openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into star-pattern-view-passwd-error-third

This commit is contained in:
duanzhijiang 2022-11-11 15:44:58 +08:00
parent ed67ff29e9 d372fb205c
commit c8ba499905
78 changed files with 11873 additions and 1084 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.husky/pre-commit Executable file
View File

@ -0,0 +1,6 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn lint-staged
yarn build
yarn build:vite

17
package.json
View File

@ -17,18 +17,27 @@
"build:widgets": "node ./tasks/build-widgets.js",
"esbuild:ts": "node ./tasks/esbuild-packages.js",
"format": "npm run format:prettier",
"format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write"
"format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write",
"postinstall": "husky install"
},
"lint-staged": {
"*.{cjs,html,js,json,md,ts}": [
"prettier --write",
"git add"
]
},
"dependencies": {
"lit": "^2.2.7"
},
"devDependencies": {
"prettier": "^2.7.1",
"vite": "^3.0.0",
"esbuild": "^0.15.8",
"fast-glob": "^3.2.12",
"husky": "^8.0.1",
"lint-staged": "^13.0.3",
"prettier": "^2.7.1",
"tslib": "^2.4.0",
"typescript": "^4.8.3"
"typescript": "^4.8.3",
"vite": "^3.0.0"
},
"workspaces": [
"src/components/*",

405
src/components/animation/README-define.md Normal file
View File

@ -0,0 +1,405 @@
# 目录
* [<font size=4>**命名规则**</font>](#命名规则)</br>
* [<font size=4>**介绍**</font>](#介绍)
* [<font size=3>**基础控件库**</font>](#基础控件库)
* [<font size=3>**应用窗口**</font>](#应用窗口)
* [<font size=3>**桌面**</font>](#桌面)
* [<font size=3>**多任务视图**</font>](#多任务视图)
* [<font size=3>**控制中心**</font>](#控制中心)
* [<font size=3>**音量条**</font>](#音量条)
* [<font size=3>**通知中心**</font>](#通知中心)
* [<font size=3>**锁屏及解锁**</font>](#锁屏及解锁)
* [<font size=3>**组件编辑**</font>](#组件编辑)
* [<font size=3>**个性化配置**</font>](#个性化配置)
# 命名规则
| 名称 | 动作 |
| ---------------- | ---------------------------------------------- |
| star_press | 缩小、背景颜色加深 |
| star_free | 放大、背景颜色变浅 |
| star_contraction | 缩小 |
| star_expansion | 放大 |
| star_fadeIn | 逐渐出现(透明度变化) |
| star_fadeOut | 逐渐消失(透明度变化) |
| star_open | 出现(透明度变化)、背景颜色变化、尺寸变化、位移 |
| star_close | 消失(透明度变化)、背景颜色变化、尺寸变化、位移 |
| star_moveX | X 方向位移 |
| star_moveY | Y 方向位移 |
| star_background | 背景颜色变化 |
| star_appear | 出现(透明度 0-100)、位移、缩放 |
| star_disappear | 消失(透明度 100-0)、位移、缩放 |
| star_size | 尺寸变化 |
| v_x | v_x 代表 version_x，由数据不同而定义不同的版本 |
# 介绍
## 基础控件库
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :---------------------- | :-----------------------------: | :------------------: | :--------------------: | :-----------------------------------------------------------------------------------------------------: | :------: | :---------------: | --------------------: |
| primary button | 按下 | 按钮整体 | star_press | scale(1-0.9)、#0098f7-#0086d9 | 150ms | (0,0.35,0.2,1) | .star_press |
| | 释放 | 按钮整体 | star_free | scale(0.9-1)、#0086d9-#0098f7 | 200ms | (0,0.35,0.2,1) | .star_free |
| default button | 按下 | 按钮整体 | star_contraction_v1 | scale(1-0.9) | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
| | | 底板 | star_fadeIn_v1 | opacity(6-15) | 150ms | (0,0.35,0.2,1) | .star_fadeIn_v1 |
| | 释放 | 按钮整体 | star_expansion_v1 | scale(0.9-1) | 200ms | (0,0.35,0.2,1) | .star_expansion_v1 |
| | | 底板 | star_fadeOut_v1 | opacity(15-6) | 200ms | (0,0.35,0.2,1) | .star_fadeOut_v1 |
| pure button | 按下 | 按钮整体 | star_contraction_v1 | | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
| | | 底板 | star_fadeIn_v2 | opacity(78-96) | 150ms | (0,0.35,0.2,1) | .star_fadeIn_v2 |
| | 释放 | 按钮整体 | star_expansion_v1 | scale(0.9-1) | 200ms | (0,0.35,0.2,1) | .star_expansion_v1 |
| | | 底板 | star_fadeOut_v2 | opacity(96-78) | 200ms | (0,0.35,0.2,1) | .star_fadeOut_v2 |
| icon button | 按下 | 圆底 | star_open_v1 | scale(1-2)、opacity(0-6) | 200ms | (0.25,0.1,0.25,1) | .star_open_v1 |
| | 释放 | 圆底 | star_fadeOut_v2 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v2a |
| text button | 按下 | 按钮底 | star_fadeIn_v3 | opacity(0-6) | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v3 |
| | 释放 | 按钮底 | star_fadeOut_v3 | opacity(6-0) | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v3 |
| multi buttons | 按下 | 按钮底 | star_fadeIn_v4 | opacity(0-50) | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v4 |
| | 释放 | 按钮底 | star_fadeOut_v4 | opacity(50-0) | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v4 |
| switch | 开 | 按钮整体 | star_open_v2 | scale(1-0.9)、scale(0.9-1)、</br>rgba(29,152,240,1)-rgba(0,0,0,0.35) | 300ms | (0.25,0.1,0.25,1) | .star_open_v2 |
| | 关 | 按钮整体 | star_close_v1 | scale(1-0.9)、scale(0.9-1)、</br>rgba(0,0,0,0.35)-rgba(29,152,240,1) | 300ms | (0.25,0.1,0.25,1) | .star_close_v1 |
| radio | 开 | 按钮整体 | star_open_v3 | rgba(41,41,41,1)-rgba(29,152,240,10)、</br>border(4px rgba(38, 38, 38, 0.25)-9px rgba(29, 152, 240, 1)) | 200ms | (0.25,0.1,0.25,1) | .star_open_v3 |
| | 关 | 按钮整体 | star_close_v2 | rgba(29,152,240,10)-rgba(41,41,41,1)、</br>border(9px rgba(29, 152, 240, 1)-4px rgba(38, 38, 38, 0.25)) | 200ms | (0.25,0.1,0.25,1) | .star_close_v2 |
| checkbox | 开 | 对勾图标 | star_open_v4 | opacity(0-100)、scale(0-1） | 250ms | (0.25,0.1,0.25,1) | .star_open_v4 |
| | | 方框 | star_open_v5 | border-width(3px-0)、opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_open_v5 |
| checkbox | 关 | 对勾图标 | star_close_v3 | opacity(100-0)、scale(0-1） | 250ms | (0.25,0.1,0.25,1) | .star_close_v3 |
| | | 方框 | star_close_v4 | border-width(0-3px)、opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_close_v4 |
| toggle | 开 | 圆块 | star_moveX_v1 | 32px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v1 |
| | | 底盘 | star_background_v1 | rgba(0,0,0,12)-rgba(29,152,240,1) | 200ms | (0.25,0.1,0.25,1) | .star_background_v1 |
| toggle | 关 | 圆块 | star_moveX_v2 | -32px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v2 |
| | | 底盘 | star_background_v2 | rgba(29,152,240,1)-rgba(0,0,0,12) | 200ms | (0.25,0.1,0.25,1) | .star_background_v2 |
| toast | 出现 | 整体 | star_appear_v1 | Y:90px opacity(0-100) | - | | .star_appear_v1 |
| | 消失 | 整体 | star_disappear_v1 | scale(1-0.85) opacity(100-0) | 150ms | (0.25,0.1,0.25,1) | .star_disappear_v1 |
| dialog | 出现 | 弹窗整体 | star_appear_v2 | scale(0.85-1) opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v2 |
| | | 遮罩 | star_fadeIn_v5 | opacity(0-30) | 250ms | | .star_fadeIn_v5 |
| | 消失 | 弹窗整体 | star_disappear_v1 | scale(1-0.85) opacity(100-0) | 250ms | (0,0.35,0.25,1) | .star_disappear_v1a |
| | | 遮罩 | star_fadeOut_v5 | opacity(30-0) | 250ms | 0,0.35,0.25,1) | .star_fadeOut_v5 |
| notification | 出现 | 整体 | star_moveY_v1 | 230px | 250ms | (0.3,0.2,0.1,1) | .star_moveY_v1 |
| | 自动消失 | 整体 | star_moveY_v2 | -230px | 250ms | (0.3,0.2,0.1,1) | .star_moveY_v2 |
| | 划出面板 | 整体 | star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
| | 划出面板 | 整体 | star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
| | 点击面板</br>打开应用-按下 | 面板整体 | star_contraction_v2 | scale(1-0.95) | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v2 |
| | 点击面板</br>打开应用-释放 | 面板整体 | star_disappear_v2 | scale(0.95-1) opacity(100-0) | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v2 |
| | | 应用界面 | star_appear_v3 | scale(0.5-1) opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v3a |
| | 执行按钮</b>操作-按下 | 按钮 | star_contraction_v1 | | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
| | 执行按钮</b>操作-释放 | 按钮 | star_expansion_v1 | | 150ms | (0,0.35,0.2,1) | .star_expansion_v1a |
| | 执行按钮</b>操作-释放 | 通知面板 | star_moveY_v2 | | 150ms | (0,0.35,0.2,1) | .star_moveY_v2a |
| DatePicker、TimePicker | 滑动选择 | 对应列 | star_moveY | 位移参数无法确定 | | |
| | | 进入中间选中态的选项 | star_open_v6 | font-star_size(28pt-36pt)</br>color(rgba(38,38,38,0.45)-rgba(29,152,240,1)) | | | .star_open_v6 |
| | | 离开中间选中态的选项 | star_close_v5 | font-star_size(36pt-28pt)</br>color(rgba(29,152,240,1)-rgba(38,38,38,0.45)) | | | .star_close_v5 |
| | 拖拽选择 | 对应列 | star_moveX、star_moveY | 位移参数无法确定 | |
| | 点击选择</br>时间动效 | 对应列 | star_moveX、star_moveY | 位移参数无法确定 | |
| | | 进入中间选中态的选项 | star_open_v6 | | 200ms | (0,0.35,0.2,1) | .star_open_v6 |
| | | 离开中间选中态的选项 | star_close_v5 | | 200ms | (0,0.35,0.2,1) | .star_close_v5 |
| | 点击切换</br>上下午 | 被点击项 | star_open_v6 | | 200ms | (0,0.35,0.2,1) | .star_open_v6 |
| | | 未被点击项 | star_close_v5 | | 200ms | (0,0.35,0.2,1) | .star_close_v5 |
| 底部菜单 | 出现 | 整体 | star_moveY_v3 | -50px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v3 |
| | 消失 | 整体 | star_moveY_v4 | 50px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v4 |
| 长按菜单 | 出现-长按桌面</br>图标/桌面组件 | 图标 | star_contraction_v3 | scale(1-0.85) | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v3 |
| | | 组件 | star_contraction_v1 | | 200ms | (0.25,0.1,0.25,1) | .star_contraction_v1a |
| | 出现-按下第 0.4s | 图标 | star_expansion_v2 | | - | | .star_expansion_v2 |
| | | 组件 | star_expansion_v1 | | - | | .star_expansion_v1 |
| | | 菜单 | star_appear_v2 | | 250ms | (0.25,0.1,0.25,1) | .star_appear_v2 |
| | 消失 | 菜单 | star_disappear_v1 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v1b |
| 时间日期</br>及桌面组件 | 按下 | 整体 | star_contraction_v1 | | 200ms | (0,0.35,0.2,1) | .star_contraction_v1b |
| | 释放 | 整体 | star_expansion_v1 | | 250ms | (0,0.35,0.2,1) | .star_expansion_v1b |
| 控制中心吊件 | 按下 | 整体 | star_contraction_v1 | | 150ms | (0,0.35,0.2,1) | .star_contraction_v1 |
| | 释放 | 整体 | star_expansion_v1 | | 200ms | (0,0.35,0.2,1) | .star_expansion_v1 |
| 可点击列表项 | 按下 | 底板 | star_fadeIn_v3 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v3 |
| | 释放 | 底板 | star_fadeOut_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v3 |
| 控件列表项 | 按下 | 底板 | star_fadeIn_v3 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v3 |
| | 释放 | 底板 | star_fadeOut_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v3 |
## 应用窗口
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :------- | :------------------------------------: | :------: | :-----------------: | :-------------------------: | :------: | :---------------: | -------------------: |
| 应用窗口 | 从桌面图标打开</br>-按下图标 | 应用图标 | star_contraction_v3 | | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v3 |
| | 从桌面图标打开</br>-松手 | 应用图标 | star_expansion_v3 | scale(0.85-1.3) | 150ms | (0.25,0.1,0.25,1) | .star_expansion_v3 |
| | | 高斯遮罩 | star_fadeIn_v6 | opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6 |
| | | 应用界面 | star_appear_v4 | scale(0.1-1) opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v4 |
| | 退出到桌面图标</br>-从底部上划 | 应用界面 | star_contraction_v4 | scale(1-0.5) | - | | .star_contraction_v4 |
| | 从桌面图标打开</br>-松手 | 应用界面 | star_disappear_v3 | scale(-0.1) opacity(100-0) | 250ms | (0,0.35,0.2,1) | .star_disappear_v3 |
| | | 高斯遮罩 | star_fadeOut_v6 | opacity(100-0) | 250ms | (0,0.35,0.2,1) | .star_fadeOut_v6 |
| | | 应用图标 | star_contraction_v5 | scale(1.3-1) | 150ms | (0,0.35,0.2,1) | .star_contraction_v5 |
| | 从他处打开 | 高斯遮罩 | star_fadeIn_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6 |
| | | 应用界面 | star_appear_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_appear_v3 |
| | 退出到无对应应用</br>的界面-从底部上划 | 应用界面 | star_contraction_v4 | | - | | .star_contraction_v4 |
| | 退出到无对应应用</br>的界面-松手 | 应用界面 | star_disappear_v3 | | 250ms | (0,0.35,0.2,1) | .star_disappear_v3 |
| | | 高斯遮罩 | star_fadeOut_v6 | | 250ms | (0,0.35,0.2,1) | .star_fadeOut_v6 |
## 桌面
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :-------------------------------- | :------------------------------------------: | :-----------------------------: | :-------------------: | :----------------------------------------------------: | :------: | :---------------: | --------------------: |
| 应用组 | 应用组展开 | 容器底 | star_fadeOut_v7 | opacity(25-0) | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v7 |
| | | 应用组名称(小) | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
| | | 桌面上除应用组</br>的所有内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
| | | 组内各应用图标</br>(包括其名称) | star_expansion_v4 | scale(0.148-1) | 300ms | (0.3,0.2,0.1,1) | .star_expansion_v4 |
| | | 各自应用名称 | star_fadeIn_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6a |
| | | 应用组名称(大) | star_fadeIn_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6a |
| | 应用组收缩 | 应用组名称(大) | star_fadeOut_v6 | | 100ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6b |
| | | 组内各应用图标</br>(包括其名称) | star_contraction_v6 | scale(1-0.148) | 300ms | (0.3,0.2,0.1,1) | .star_contraction_v6 |
| | | 各自应用名称 | star_fadeOut_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6c |
| | | 桌面上除应用组</br>的所有内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
| | | 应用组名称(小) | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
| | | 容器底 | star_fadeIn_v7 | opacity(0-25) | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v7 |
| 屏幕编辑模式 | 唤起屏幕编辑 | 卸载角标按钮</br>(整体) | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
| | | 顶部三按钮</br>(整体) | star_appear_v5 | Y:70px opacity(0-100) | 250ms | (0.3,0.2,0.1,1) | .star_appear_v5 |
| | | 时间天气组件</br>(整体) | star_contraction_v2 | | 250ms | (0.3,0.2,0.1,1) | .star_contraction_v2a |
| | | 时间天气组件</br>(底板) | star_fadeIn_v8 | opacity(0-12) | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v8 |
| | 退出屏幕编辑 | 卸载角标按钮</br>(整体) | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
| | | 顶部三按钮</br>(整体) | star_disappear_v4 | Y:-70px opacity(100-0) | 250ms | (0.3,0.2,0.1,1) | .star_disappear_v4 |
| | | 时间天气组件</br>(整体) | star_expansion_v5 | scale(0.95-1) | 250ms | (0.3,0.2,0.1,1) | .star_expansion_v5 |
| | | 时间天气组件</br>(底板) | star_fadeOut_v8 | opacity(12-0) | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v8 |
| | 移除桌面组件 | 卸载角标 | star_fadeOut_v6 | | 50ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6d |
| | | 对应桌面组件 | star_disappear_v5 | scale(1-0.7) opacity(100-0) | 250ms | (0.3,0.2,0.1,1) | .star_disappear_v5 |
| dock 栏 | 移出图标 | 其他图标 | star_moveX/star_moveY | 位移参数无法确定 | 200ms | (0.3,0.2,0.1,1) |
| | 移入图标 | 其他图标 | star_moveX/star_moveY | 位移参数无法确定 | 200ms | (0.3,0.2,0.1,1) |
| | 移入图标-松手 | 被拖拽图标 | star_moveX/star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
| | 内部移动图标 | 其他图标 | star_moveX/star_moveY | 位移参数无法确定 | 200ms | (0.3,0.2,0.1,1) |
| | 内部移动图标-松手 | 被拖拽图标 | star_moveX/star_moveY | 位移参数无法确定 | 250ms | (0.3,0.2,0.1,1) |
| 创建应用组、增加</br>应用(不展开) | 创建应用组(未展开)-</br>长按 A 并拖动 | A 应用名称 | star_fadeOut_v6 | | 50ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6f |
| | 创建应用组(未展开)-</br>A 覆盖 B 一半 | B 图标下的</br>容器底 | star_fadeIn_v5 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5 |
| | 创建应用组(未展开)-</br>覆盖 0.6s 内松手 | B 应用名称 | | | 50ms | (0.25,0.1,0.25,1) |
| | | B 图标 | star_contraction_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_contraction_v6a |
| | | A 图标 | star_contraction_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_contraction_v6a |
| | | 应用组容器 | star_size_v1 | 114×114-92×92</br>border-radius(28px-20px) | 300ms | (0.25,0.1,0.25,1) | .star_size_v1 |
| | 增加应用-</br>C 覆盖 B 一半时 | 应用组容器 | star_size_v2 | 92×92-114×114</br>border-radius(20px-28px) | 250ms | (0.25,0.1,0.25,1) | .star_size_v2 |
| | 增加应用-</br>C 覆盖 0.6 内松手 | 应用组容器 | star_size_v1 | | 300ms | (0.25,0.1,0.25,1) | .star_size_v1 |
| | 增加应用-</br>C 覆盖 0.6 内松手 | C 图标 | star_contraction_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_contraction_v6a |
| 创建应用组(展开) | A 覆盖 B 一半 | B 图标下的</br>容器底 | star_fadeIn_v5 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5 |
| | 覆盖到第 0.6 内松手 | B 图标下的</br>容器底 | star_fadeOut_v5 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeOut_v5a |
| | | 桌面上除应用组</br>的所有内容 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
| | | B 图标 | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
| | | 应用组名称(大) | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
| | | 容器白线框 | star_fadeIn_v9 | opacity(0-35) | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v9 |
| | 释放 A 图标 | A 图标 | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
| | | 容器白线框 | star_fadeOut_v9 | opacity(35-0) | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v9 |
| 组内跨页移动 | 开始拖动 | 容器白线框 | star_fadeIn_v5 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeIn_v5a |
| | A 距右边框 30px 以内</br>且停留到第 0.3 秒时 | 组内应用组/分页符 | | | 300ms | (0.25,0.1,0.25,1) |
| | 释放 A 图标 | A 图标 | star_moveX | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
| | | A 应用名称 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
| | | 容器白线框 | star_fadeOut_v9 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v9 |
| 移出应用组 | 开始拖动 | 容器白线框 | star_fadeIn_v9 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeIn_v9a |
| | A 中线超过边框</br>且停留到 0.2s 时 | 分页符 | star_fadeOut_v6 | | 100ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6b |
| | | 容器白线框 | star_fadeOut_v6 | | 100ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6b |
| | | 应用组名称(大) | star_fadeIn_v6 | 位移参数无法确定 | 100ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6d |
| | | 组内各应用图标</br>(包括其名称) | star_contraction_v6 | 位移参数无法确定 | 300ms | (0.3,0.2,0.1,1) | .star_contraction_v6 |
| | | 各自应用名称 | star_fadeOut_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6c |
| | | 桌面上除应用组</br>的所有内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
| | | 应用组名称(小) | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
| | | 容器底 | star_fadeIn_v5 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v5b |
| | 释放 A 图标 | A 图标 | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1 |
| | | A 应用名称 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
| | | 应用组内图标 | | | 300ms | (0.25,0.1,0.25,1 |
| 父子级页面跳转 | 进入子页面 | 当前页面 | star_moveX_v11 | -600px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v11 |
| | | 本页面上</br>的遮罩 | star_open_v10 | X:-600px</br>rgba(24, 24, 24, 0)-rgba(24, 24, 24, 0.3) | 300ms | (0.25,0.1,0.25,1) | .star_open_v10 |
| | | 子页面 | star_moveX_v12 | -1200px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v12 |
| | 返回到上级页面 | 当前页面 | star_moveX_v10 | 1200px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v10 |
| | | 本页面上</br>的遮罩 | star_close_v9 | X:1200px</br>rgba(24, 24, 24, 0.3)-rgba(24, 24, 24, 0) | 300ms | (0.25,0.1,0.25,1) | .star_close_v9 |
| | | 上级页面 | star_moveX_v13 | 600px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v13 |
| 侧边栏结构父子级页面跳转 | 进入子页面 | 当前页面 | star_moveX_v14 | -368px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v14 |
| | | 本页面上</br>的遮罩 | star_open_v11 | X:-368px</br>rgba(24, 24, 24, 0)-rgba(24, 24, 24, 0.3) | 300ms | (0.25,0.1,0.25,1) | .star_open_v11 |
| | | 子页面 | star_moveX_v15 | -736px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v15 |
| | 返回到上级页面 | 当前页面 | star_moveX_v16 | 736px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v16 |
| | | 本页面上</br>的遮罩 | star_close_v10 | X:736px</br>rgba(24, 24, 24, 0.3)-rgba(24, 24, 24, 0) | 300ms | (0.25,0.1,0.25,1) | .star_close_v10 |
| | | 上级页面 | star_moveX_v17 | 368px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v17 |
## 多任务视图
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :---------------------------- | :---------------------------------: | :-----------------------------------: | :-------------------: | :----------------------------------: | :------: | :---------------: | -------------------: |
| 从桌面唤起</br>多任务视图 | 开始滑动 | 桌面上所有内容 | star_contraction_v2 | | | | .star_contraction_v2 |
| | 应用界面冒出 | 应用界面 | star_moveX_v3 | 596px | 400ms | (0.25,0.1,0.25,1) | .star_moveX_v3 |
| | | 高斯遮罩 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
| | 应用界面跟随手指</br>滑动的联动效果 | 应用界面阵列 | star_contraction_v7 | scale(0.7-0.4) | | | .star_contraction_v7 |
| | 排列为矩阵 | 各应用界面 | star_contraction_v8 | scale(-0.275)、位移参数无法确定 | 300ms | (0,0.35,0.2,1) | .star_contraction_v8 |
| | | 清除按钮 | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
| | | 应用图标及名称</br>(整体) | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
| 退出多任务视图 | 退出多任务 | 所有应用界面</br>(整体) | star_moveX_v4 | -100px | 350ms | (0.25,0.1,0.25,1) | .star_moveX_v4 |
| | | 所有应用图标</br>和名称 | star_moveX_v4 | | 350ms | (0.25,0.1,0.25,1) | .star_moveX_v4 |
| | | 高斯遮罩 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
| | | 桌面内容(整体) | star_expansion_v5 | | 300ms | (0.25,0.1,0.25,1) | .star_expansion_v5a |
| 从应用界面启动</br>多任务视图 | 开始滑动 | 桌面上所有内容 | star_contraction_v9 | scale(1-0.3) | | | .star_contraction_v9 |
| | 其他界面出现 | 应用界面 | star_moveX | 位移参数无法确定 | 150ms | (0,0.35,0.2,1) |
| | 继续滑动的联动效果 | 应用界面 | star_moveX | 位移参数无法确定 | | |
| | | | star_contraction_v9 | | | | .star_contraction_v9 |
| | 排列为矩阵 | 各应用界面 | star_contraction_v8 | scale(-0.275)、位移参数无法确定 | 300ms | (0,0.35,0.2,1) | .star_contraction_v8 |
| | | 清除按钮 | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
| | | 应用图标及名称</br>(整体) | star_fadeIn_v6 | | 100ms | (0,0.35,0.2,1) | .star_fadeIn_v6g |
| 关闭应用进程 | 划掉应用 | 被滑动应用面板</br>(包括其图标和名称) | star_disappear_v6 | scale(1-0.5) opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v6 |
| | | 其他应用面板</br>(包括其图标和名称) | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0.25,0.1,0.25,1) |
| | 未划掉应用 | 被拖拽应用面板</br>(包括其图标和名称) | star_moveY | 位移参数无法确定 | 250ms | (0.25,0.1,0.25,1) |
| 清除应用 | 清除应用 | 被清除应用面板</br>(包括其图标和名称) | star_disappear_v7 | scale(1-0.7) Y:-144px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v7 |
| | | 被锁定应用面板</br>(包括其图标和名称) | star_moveX/star_moveY | 位移参数无法确定 | 300ms | (0,0.35,0.2,1) |
| | 自动回到桌面 | 被锁定应用面板</br>(包括其图标和名称 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
| | | 清除按钮 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
| | | 高斯遮罩 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
| | | 桌面内容(整体) | star_expansion_v5 | | 300ms | (0.25,0.1,0.25,1) | .star_expansion_v5a |
## 控制中心
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :-------------- | :---------------------------: | :------------: | :----------------: | :----------------------------------: | :------: | :---------------: | ------------------: |
| 唤起/退出 | 跟随手指下滑动</br>的联动效果 | 毛玻璃遮罩层 | star_fadeIn_v10 | blur(0-60) opacity(0-0.65) | | | .star_fadeIn_v10 |
| | | 控制中心内容 | star_moveY_v5 | 250px | | | .star_moveY_v5 |
| | 控制中心出现 | 控制中心内容 | star_fadeIn_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6 |
| | 控制中心回弹 | 控制中心内容 | star_moveY | 位移参数无法确定 | | |
| | 退出控制中心 | 控制中心内容 | star_disappear_v8 | Y:-40px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v8 |
| | | 毛玻璃遮罩层 | star_fadeOut_v10 | blur(60-0) opacity(0.65-0) | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10 |
| 编辑模式 | 进入 | 控制中心内容 | star_disappear_v9 | X:-30px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v9 |
| | | 编辑模式内容 | star_appear_v6 | X:-30px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v6 |
| | | 右上状态图标 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
| | 退出 | 编辑模式内容 | star_disappear_v10 | X:30px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v10 |
| | | 控制中心内容 | star_appear_v7 | X:30px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v7 |
| | | 右上状态图标 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
| editable-switch | 进入列表页 | 控制中心标题栏 | star_fadeOut_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6c |
| | | 列表页标题栏 | star_fadeIn_v6 | | 300ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6a |
| | | 长按钮内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
| | | 控制中心内容 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
| | | 容器 | star_size_v3 | 240×108-512×700 background(浅白渐变) | 300ms | (0.3,0.2,0.1,1) | .star_size_v3 |
| | | 列表页内容 | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
| | 退出列表页 | 控制中心标题栏 | star_fadeIn_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6b |
| | | 列表页标题栏 | star_fadeOut_v6 | | 250ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6a |
| | | 长按钮内容 | star_fadeIn_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6h |
| | | 控制中心内容 | star_fadeIn_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6h |
| | | 容器 | star_size_v4 | 512×700-240×108 background(状态色) | 250ms | (0.3,0.2,0.1,1) | .star_size_v4 |
| | | 列表页内容 | star_fadeOut_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6i |
| | 进入密码页 | 列表页内容 | star_fadeOut_v6 | | 200ms | (0.3,0.2,0.1,1) | .star_fadeOut_v6i |
| | | 密码页 | star_appear_v8 | scale(0.9-1) opacity(0-100) | 300ms | (0.3,0.2,0.1,1) | .star_appear_v8 |
| | 退出密码页 | 密码页 | star_disappear_v11 | scale(1-0.9) opacity(100-0) | 250ms | (0.3,0.2,0.1,1) | .star_disappear_v11 |
| | | 列表页内容 | star_fadeIn_v6 | | 150ms | (0.3,0.2,0.1,1) | .star_fadeIn_v6i |
## 音量条
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :------------- | :-----------: | :------------: | :-------------: | :-------------------: | :------: | :---------------: | ---------------: |
| 出现、消失 | 出现 | 音量条 | star_moveX_v5 | 40px | 250ms | (0.25,0.1,0.25,1) | .star_moveX_v5 |
| | 消失 | 音量条 | star_moveX_v6 | -40px | 250ms | (0.25,0.1,0.25,1) | .star_moveX_v6 |
| | 调节音量-接触 | 值槽 | star_size_v5 | 16px-32px | 250ms | (0.25,0.1,0.25,1) | .star_size_v5 |
| | 调节音量-松手 | 值槽 | star_size_v6 | 32px-16px | 250ms | (0.25,0.1,0.25,1) | .star_size_v6 |
| 静音、取消静音 | 静音 | | | | 300ms | (0.25,0.1,0.25,1) |
| | 取消静音 | | | | 300ms | (0.25,0.1,0.25,1) |
| 展开音量条 | 展开 | 容器 | star_size_v7 | 96px-388px | 300ms | (0.25,0.1,0.25,1) | .star_size_v7 |
| | | 铃声音量内容组 | star_moveX_v7 | 26px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v7 |
| | | 媒体音量内容组 | star_appear_v9 | X:36px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v9 |
| | | 闹钟音量内容组 | star_appear_v10 | X:46px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v10 |
| | 消失 | 整体面板 | star_moveX | 位移参数无法确定 | 250ms | (0.25,0.1,0.25,1) |
## 通知中心
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :------------------------ | :---------------------------: | :------------------: | :-----------------: | :-------------------------: | :------: | :---------------: | -------------------: |
| 唤起/退出</br>通知中心 | 跟随手指下滑动</br>的联动效果 | 毛玻璃遮罩层 | star_fadeIn_v10 | blur(0-60) opacity(0-0.65) | | | .star_fadeIn_v10 |
| | | 通知中心内容 | star_appear_v11 | Y:250px opacity(0-100) | | | .star_appear_v11 |
| | 通知中心回弹 | 控制中心内容 | star_moveY | 位移参数无法确定 | | |
| | | 清除按钮 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
| | 退出通知中心 | 通知中心内容 | star_disappear_v12 | Y:-60px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v12 |
| | | 清除按钮 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
| | | 毛玻璃遮罩层 | star_fadeOut_v10 | | | (0.25,0.1,0.25,1) | .star_fadeOut_v10 |
| 唤起/退出</br>通知选项 | 唤出通知选项 | 对应通知条 | star_moveX | 无法确定位移参数 | 250ms | (0.25,0.1,0.25,1) |
| | | 删除及设置按钮 | star_fadeOut_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6j |
| | 收起通知选项 | 对应通知条 | star_moveX | 无法确定位移参数 | 250ms | (0.25,0.1,0.25,1) |
| | | 删除及设置按钮 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
| 删除通知 | 点击按钮删除 | 对应通知条 | star_moveX_v8 | -860px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v8 |
| | | 删除按钮 | star_disappear_v9 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v9a |
| | | 设置按钮 | star_disappear_v13 | X:-15px opacity(100-0) | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v13 |
| | | 下方所有通知条 | star_moveY_v6 | -150px | 250ms | (0.25,0.1,0.25,1) | .star_moveY_v6 |
| | 继续左滑删除 | 对应通知条 | star_moveX_v9 | -50px | 200ms | (0.25,0.1,0.25,1) | .star_moveX_v9 |
| | | 删除按钮 | star_disappear_v9 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v9a |
| | | 设置按钮 | star_disappear_v13 | | 200ms | (0.25,0.1,0.25,1) | .star_disappear_v13 |
| | | 下方所有通知条 | star_moveY_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_moveY_v6 |
| 清除通知 | 清除通知 | 所有通知条 | star_disappear_v14 | scale(1-0.9) opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v14 |
| | | "暂无通知"文字 | star_fadeIn_v6 | | 50ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6j |
| | 自动进入桌面 | 毛玻璃遮罩 | star_fadeOut_v10 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10a |
| | | 标题栏 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
| | | "暂无通知"文字 | star_fadeOut_v6 | | 200ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6g |
| 同应用多通知<br>展开/收起 | 多通知展开 | 展开前的多通知内容 | star_fadeOut_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6j |
| | | 展开后的首个通知内容 | star_fadeIn_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6k |
| | | 多通知容器 | star_size_v8 | height: 304px | 300ms | (0.25,0.1,0.25,1) | .star_size_v8 |
| | | 各子通知内容 | star_appear_v12 | Y:52px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v12 |
| | | 下方其他通知 | star_moveY_v7 | 152px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v7 |
| | 多通知收缩 | 多通知容器 | star_size_v9 | height: 152px | 300ms | (0.25,0.1,0.25,1) | .star_size_v9 |
| | | 各子通知内容 | star_disappear_v15 | Y:-52px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v15 |
| | | 下方其他通知 | star_moveY_v8 | -152px | 300ms | (0.25,0.1,0.25,1) | .star_moveY_v8 |
| | | 首个子通知内容 | star_fadeOut_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6j |
| | | 收缩后通知内容 | star_fadeIn_v6 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6k |
| 点击通知打开应用 | 按下通知条 | 通知条 | star_contraction_v2 | | 150ms | (0.25,0.1,0.25,1) | .star_contraction_v2 |
| | 松手 | 通知条 | star_expansion_v5 | | 200ms | (0.25,0.1,0.25,1) | .star_expansion_v5b |
| | | 通知中心内容 | star_disappear_v12 | | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v12a |
| | | 清除按钮 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
| | | 毛玻璃遮罩层 | star_fadeOut_v10 | | 150ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10b |
| | | 对应应用界面 | star_appear_v3 | | 250ms | (0.25,0.1,0.25,1) | .star_appear_v3 |
## 锁屏及解锁
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :--------------------- | :------------: | :-------------------------: | :----------------: | :--------------------------------: | :------: | :---------------: | ------------------: |
| 锁屏页-</br>样式选择页 | 激活样式选择页 | 当前及其他锁屏页 | star_open_v7 | scale(1-0.43) border-radius(-20px) | 300ms | (0.25,0.1,0.25,1) | .star_open_v7 |
| | | 样式选择页的</br>底部按钮组 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
| | | 样式选择页的</br>选中框 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
| | 缩略图划页 | 缩略图阵列 | | | | |
| | 取消样式选择页 | 缩略图阵列 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
| | | 样式选择页的</br>底部按钮组 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
| | | 样式选择页的</br>选中框 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
| | | 毛玻璃遮罩 | star_fadeOut_v6 | | 250ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6k |
| | 进入全屏预览页 | 样式选择页的</br>选中框 | star_fadeOut_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6l |
| | | 当前及其他锁屏页 | star_close_v6 | scale(0.43-1) border-radius(20px-) | 300ms | (0.25,0.1,0.25,1) | .star_close_v6 |
| | 全屏预览划页 | 全屏页面 | | | | |
| | 回到缩略图 | 当前及其他锁屏页 | star_open_v7 | | 300ms | (0.25,0.1,0.25,1) | .star_open_v7 |
| | | 样式选择页的</br>选中框 | star_fadeIn_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6c |
| | 缩略图样式完成 | 当前及其他锁屏页 | star_close_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_close_v6 |
| | | 样式选择页的</br>底部按钮组 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
| | | 样式选择页的</br>选中框 | star_fadeOut_v6 | | 100ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6l |
| 进入/退出密码页 | 进入密码页 | 锁屏页内容 | star_disappear_v16 | Y:-160px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v16 |
| | | 毛玻璃遮罩 | star_fadeIn_v10 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v10 |
| | | 密码页内容 | star_appear_v13 | Y:-160px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v13 |
| | 退出密码页 | 锁屏页内容 | star_disappear_v17 | Y:160px opacity(100-0) | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v17 |
| | | 毛玻璃遮罩 | star_fadeOut_v10 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10c |
| | | 密码页内容 | star_appear_v14 | Y:160px opacity(0-100) | 300ms | (0.25,0.1,0.25,1) | .star_appear_v14 |
| 数字按键 | 按下 | 底圆 | star_open_v8 | 60×60-154×154 opacity(0-35) | 200ms | (0.25,0.1,0.25,1) | .star_open_v8 |
| | 松手 | 底圆 | star_close_v7 | -206×206 opacity(35-0) | 400ms | (0.25,0.1,0.25,1) | .star_close_v7 |
| 密码登录至桌面 | 密码登录至桌面 | 密码页内容 | star_disappear_v17 | | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v17 |
| | | 毛玻璃遮罩 | star_fadeOut_v10 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v10c |
| | | 桌面内容</br>(除了 dock 栏) | star_appear_v15 | scale(1.1-1) opacity(0-100) | 400ms | (0.25,0.1,0.25,1) | .star_appear_v15 |
| | | dock 栏 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
## 组件编辑
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :------------------------------------------ | :--------------: | :------------: | :---------------: | :----------------------------------: | :------: | :---------------: | ------------------: |
| 唤出/收起组价</br> 编辑面板 | 唤出 | 组件编辑面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
| | | 所有卸载按钮 | star_fadeOut_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6h |
| | | 时间组件底板 | star_fadeOut_v11 | opacity(10-0) | 300ms | (0.25,0.1,0.25,1) | .star_fadeOut_v11 |
| | | 上方按钮组 | star_disappear_v4 | | 300ms | (0.25,0.1,0.25,1) | .star_disappear_v4a |
| | 收起 | 组件编辑面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
| | | 所有卸载按钮 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
| | omp | 时间组件底板 | star_fadeIn_v11 | opacity(0-10) | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v11 |
| | | 上方按钮组 | star_appear_v5 | | 300ms | (0.25,0.1,0.25,1) | .star_appear_v5a |
| 唤出/收起全部</br> 应用面板 | 唤出 | 全部应用面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
| | | 组件编辑面板 | star_close_v8 | opacity(100-50) scale(1-0.9) Y:-32px | 300ms | (0.25,0.1,0.25,1) | .star_close_v8 |
| | 收起 | 全部应用面板 | star_moveY | 无法确定位移参数 | 300ms | (0.32,0.2,0.1,1) |
| | | 组件编辑面板 | star_open_v9 | opacity(50-100) scale(0.9-1) Y:32px | 300ms | (0.25,0.1,0.25,1) | .star_open_v9 |
| 全部应用点击定位至</br>组件编辑页对应组件处 | 定位至对应组件处 | 全部应用面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
| | | 组件编辑面板 | star_open_v9 | | 400ms | (0.25,0.1,0.25,1) | .star_open_v9a |
| | | 组件编辑页内容 | star_moveY | 无法确定位移参数 | 450ms | (0.25,0.1,0.25,1) |
| 拖拽组件至桌面并放置 | 选中组件 | 被选中的组件 | star_fadeIn_v6 | | 300ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6e |
| | 拖动组件 | 被拖拽组件 | star_fadeOut_v6 | | 350ms | (0.25,0.1,0.25,1) | .star_fadeOut_v6m |
| | | 组件编辑面板 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
| | 放置组件 | 对应组件 | star_moveY | 无法确定位移参数 | 300ms | (0.25,0.1,0.25,1) |
## 个性化配置
| 项目 | 事件 | 对象 | 动效 | 参数 | 持续时长 | 贝塞尔曲线值 | 调用 |
| :----------------------- | :-----------------------: | :-----------------------------: | :----------------: | :-----------------------: | :------: | :---------------: | ------------------: |
| 唤出/收起</br>个性化面板 | 同组件编辑 | | | | | |
| 切换标签页 | 切换到右边 tab 页 | 当前页内容 | star_disappear_v18 | X:-80px opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v18 |
| | | 下一页内容 | star_appear_v16 | X:-80px opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v16 |
| | 切换到左边 tab 页 | 当前页内容 | star_disappear_v19 | X:80px opacity(100-0) | 250ms | (0.25,0.1,0.25,1) | .star_disappear_v19 |
| | | 下一页内容 | star_appear_v17 | X:80px opacity(0-100) | 250ms | (0.25,0.1,0.25,1) | .star_appear_v17 |
| 图标调整-联动控制 | 调整图标大小 | 图标 | star_size_v10 | 88×88-120×120 | | | .star_size_v10 |
| | 调整应用名称</br>文字大小 | 文字 | star_size_v11 | font-star_size(16pt-28pt) | | | .star_size_v11 |
| 进入/退出壁纸预览页 | 进入 | 被点击的壁纸 | star_open | 位移参数无法确定 | 350ms | (0.25,0.1,0.25,1) |
| | | 预览页壁纸缩略</br>图阵列(整体) | star_appear_v18 | X:-500px opacity(0-100) | 400ms | (0.25,0.1,0.25,1) | .star_appear_v18 |
| | | 预览页应用按钮 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
| | | 预览页顶部返回</br>按钮 | star_fadeIn_v6 | | 400ms | (0.25,0.1,0.25,1) | .star_fadeIn_v6f |
| | 退出 | 当前页面 | star_moveX_v10 | 1200px | 300ms | (0.25,0.1,0.25,1) | .star_moveX_v10 |

189
src/components/animation/animaiton.ts Normal file
View File

@ -0,0 +1,189 @@
import {html, LitElement, CSSResultArray} from 'lit'
import {customElement} from 'lit/decorators.js'
import {animation} from './animation-styles'
import '../button/button'
@customElement('star-animation')
export class StarAnimation extends LitElement {
public static override get styles(): CSSResultArray {
return [animation]
}
render() {
return html`
<label>
<span class="title">press free background</span>
<div class="press"></div>
<div class="free"></div>
<div class="background_v1"></div>
<div class="background_v2"></div>
</label>
<label>
<span class="title">contraction</span>
<div class="contraction_v1"></div>
<div class="contraction_v2"></div>
<div class="contraction_v3"></div>
<div class="contraction_v4"></div>
<div class="contraction_v5"></div>
<div class="contraction_v6"></div>
<div class="contraction_v7"></div>
<div class="contraction_v8"></div>
<div class="contraction_v9"></div>
</label>
<label class="expansion">
<span class="title">expansion</span>
<div class="expansion_v1"></div>
<div class="expansion_v2"></div>
<div class="expansion_v3"></div>
<div class="expansion_v4"></div>
<div class="expansion_v5"></div>
</label>
<label class="fadeIn">
<span class="title">fadeIn</span>
<div class="fadeIn_v1"></div>
<div class="fadeIn_v2"></div>
<div class="fadeIn_v3"></div>
<div class="fadeIn_v4"></div>
<div class="fadeIn_v5"></div>
<div class="fadeIn_v6"></div>
<div class="fadeIn_v7"></div>
<div class="fadeIn_v8"></div>
<div class="fadeIn_v9"></div>
<div class="fadeIn_v10"></div>
<div class="fadeIn_v11"></div>
</label>
<label class="fadeOut">
<span class="title">fadeOut</span>
<div class="fadeOut_v1"></div>
<div class="fadeOut_v2"></div>
<div class="fadeOut_v3"></div>
<div class="fadeOut_v4"></div>
<div class="fadeOut_v5"></div>
<div class="fadeOut_v6"></div>
<div class="fadeOut_v7"></div>
<div class="fadeOut_v8"></div>
<div class="fadeOut_v9"></div>
<div class="fadeOut_v10"></div>
<div class="fadeOut_v11"></div>
</label>
<label class="open">
<span class="title">open</span>
<div class="open_v1"></div>
<div class="open_v2"></div>
<div class="open_v3"></div>
<div class="open_v4"></div>
<div class="open_v5">A</div>
<div class="open_v6"></div>
<div class="open_v7"></div>
<div class="open_v8"></div>
<div class="open_v9"></div>
</label>
<label class="close">
<span class="title">close</span>
<div class="close_v1"></div>
<div class="close_v2"></div>
<div class="close_v3"></div>
<div class="close_v4"></div>
<div class="close_v5">A</div>
<div class="close_v6"></div>
<div class="close_v7"></div>
<div class="close_v8"></div>
</label>
<label class="moveX">
<span class="title">moveX</span>
<div class="moveX_v1"></div>
<div class="moveX_v2"></div>
<div class="moveX_v3"></div>
<div class="moveX_v4"></div>
<div class="moveX_v5"></div>
<div class="moveX_v6"></div>
<div class="moveX_v7"></div>
<div class="moveX_v8"></div>
<div class="moveX_v9"></div>
<div class="moveX_v10"></div>
</label>
<label class="moveY">
<span class="title">moveY</span>
<div class="moveY_v1"></div>
<div class="moveY_v2"></div>
<div class="moveY_v3"></div>
<div class="moveY_v4"></div>
<div class="moveY_v5"></div>
<div class="moveY_v6"></div>
<div class="moveY_v7"></div>
<div class="moveY_v8"></div>
</label>
<label class="appear">
<span class="title">appear</span>
<div class="appear_v1"></div>
<div class="appear_v2"></div>
<div class="appear_v3"></div>
<div class="appear_v4"></div>
<div class="appear_v5"></div>
<div class="appear_v6"></div>
<div class="appear_v7"></div>
<div class="appear_v8"></div>
<div class="appear_v9"></div>
<div class="appear_v10"></div>
<div class="appear_v11"></div>
<div class="appear_v12"></div>
<div class="appear_v13"></div>
<div class="appear_v14"></div>
<div class="appear_v15"></div>
<div class="appear_v16"></div>
<div class="appear_v17"></div>
<div class="appear_v18"></div>
</label>
<label class="disappear">
<span class="title">disappear</span>
<div class="disappear_v1"></div>
<div class="disappear_v2"></div>
<div class="disappear_v3"></div>
<div class="disappear_v4"></div>
<div class="disappear_v5"></div>
<div class="disappear_v6"></div>
<div class="disappear_v7"></div>
<div class="disappear_v8"></div>
<div class="disappear_v9"></div>
<div class="disappear_v10"></div>
<div class="disappear_v11"></div>
<div class="disappear_v12"></div>
<div class="disappear_v13"></div>
<div class="disappear_v14"></div>
<div class="disappear_v15"></div>
<div class="disappear_v16"></div>
<div class="disappear_v17"></div>
<div class="disappear_v18"></div>
<div class="disappear_v19"></div>
</label>
<label class="size">
<span class="title">size</span>
<div class="size_v1"></div>
<div class="size_v2"></div>
<div class="size_v3"></div>
<div class="size_v4"></div>
<div class="size_v5"></div>
<div class="size_v6"></div>
<div class="size_v7"></div>
<div class="size_v8"></div>
</label>
`
}
}
declare global {
interface HTMLElementTagNameMap {
'star-animation': StarAnimation
}
}

2106
src/components/animation/animation-styles.ts Normal file
View File

File diff suppressed because it is too large Load Diff

3
src/components/asset/icons/index.ts
View File

@ -1,5 +1,6 @@
import {html} from 'lit'
/********************复杂SVG***************************/
// 主题
export const store = html`
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -234,6 +235,8 @@ export const privacy = html`
</defs>
</svg>
`
/********************单色SVG***************************/
// 删除, 类'-', 删除角标中使用
export const deletecorner = html`
<svg viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">

34
src/components/base/README.md
View File

@ -1,8 +1,8 @@
# 基类文件
## 基类样式 - base-style.ts
## 基类样式 - bases-style.ts
存放基础样式，包括 light 模式和 dark 模式。
组件说明:存放基础样式，包括 light 模式、 dark 模式、主题模式(主要分为清爽风和商务风，目前仅做出了商务风)和主题色模式。
## 基类元素 - star-base-element.ts
@ -11,3 +11,33 @@
- 引入基类根样式、主题样式
- 用于管理可重用的部件、模块
- 放置基类抽象函数, 应用于主题模式、多语言切换等
## 设计说明：
* 为缩短变量名，将对打头的css属性进行简写。
*
* 缩写规则：
* bor = border
* br = border-radius
* btn = button
* bgc = background-color
*
* 模块划分原则：
* 基础模块 - 基础模块存放具有通用意义的变量
* 星光组件模块 - 按照星光组件的具体模块进行变量的逐个编写
* 主屏小组件模块 - 按照具体模块逐个编写
* 深色模式 - 存放深色模式独有(浅色模式即为root中的默认值)
* 主题模式 -
*
* 比如： --bgc-button 在浅色模式下背景色为：#ffffff, 在深色模式下为：#000000；
* 按照如下格式书写：
* :root {
* --bgc-button: #ffffff;
* --bgc-button-dm: #000000;
* }
* @media (prefers-color-scheme: dark) {
* --bgc-button: var(--bgc-button-dm);
* }
*
* 注意颜色变量若使用到的是主题色，检索本文档对应主题色，再使用对应的主题色变量。
*

1
src/components/base/auto-px-style.ts
View File

@ -4,6 +4,7 @@ export const autoPxStyle: CSSResult = css`
:root {
--hostDevicePixelRatio: var(--devicePixelRatio, 1);
--auto-6px: calc(6px / var(--hostDevicePixelRatio));
--auto-9px: calc(9px / var(--hostDevicePixelRatio));
--auto-10px: calc(10px / var(--hostDevicePixelRatio));
--auto-12px: calc(12px / var(--hostDevicePixelRatio));
--auto-14px: calc(14px / var(--hostDevicePixelRatio));

179
src/components/base/custome_element_l10n.ts Normal file
View File

@ -0,0 +1,179 @@
import {StarBaseElement} from './star-base-element'
interface PropertiesParser {
patterns: {[type: string]: RegExp}
entryIds: object
init: () => void
parse: (ctx: any, source: string) => any[]
parseEntity: (id: string, value: string, ast: string[]) => void
setEntityValue: (
id: string,
attr: string,
key: string,
rawValue: string,
ast: any[]
) => any
parseString: (str: string) => any[]
unescapeString: (str: string) => string
parseIndex: (str: string) => (string | {t: string; v: string})[]
}
class L10nHelper {
/* 开启了国际化功能的组件 */
updateArray: Set<StarBaseElement> = new Set()
// TODO: fluent.js 替换完后更改此处
l10n: any
/* 国际化资源转化器 */
PropertiesParser?: PropertiesParser
suspending: Function[] = []
constructor() {
this.init()
}
init = (): void => {
// @ts-ignore
const l10n = navigator.mozL10n
if (!l10n) {
return document.addEventListener('readystatechange', this.init, {
once: true,
})
}
this.l10n = l10n
/* 变更语言时, 刷新组件 */
window.addEventListener('languagechange', () => {
this.updateArray.forEach((element) => element.requestUpdate())
})
if (this.suspending.length) {
this.suspending.forEach((fun) => fun())
}
this.loadAllLocales()
}
/* 空闲时加载所有国际化资源, 防止语言切换时闪烁 */
loadAllLocales = () => {
requestIdleCallback(() => {
const availableLocales: string[] = this.l10n.ctx.availableLocales
const shouldRequest: string[] = []
availableLocales.forEach((lang) => {
const locale = this.l10n.ctx.getLocale(lang)
if (!locale.isReady) {
shouldRequest.push(lang)
}
})
shouldRequest.length && this.l10n.ctx.requestLocales(...shouldRequest)
})
}
observe = (el: StarBaseElement) => {
this.updateArray.add(el)
}
unobserve = (el: StarBaseElement) => {
this.updateArray.delete(el)
}
/* 添加国际化资源 */
addLocaleSrc = (json: {[lang: string]: {[l10nId: string]: string}}): void => {
if (!this.l10n || !this.l10n.ctx.isReady) {
this.suspending.push(this.addLocaleSrc.bind(this, json))
return
}
this.initParser().then(() => {
for (const language in json) {
const context = json[language]
const ast = this.parse(context)
const locale = this.l10n.ctx.getLocale(language)
locale.addAST(ast)
}
})
}
/* 初始化转化器 */
initParser = () => {
if (this.l10n.ctx.isReady && this.PropertiesParser) {
return Promise.resolve()
}
return new Promise((res) => {
this.l10n.once(() => {
this.PropertiesParser = this.l10n._getInternalAPI()
.PropertiesParser as PropertiesParser
this.PropertiesParser.init()
res(void 0)
})
})
}
parse = (context: {[l10nId: string]: string}) => {
let str = ''
for (const key in context) {
const value = context[key]
str += `${key}=${value}\n`
}
return this.PropertiesParser!.parse(null, str)
}
get = (id: string, ctxdata: any) => {
let result = ''
if (this.l10n) {
if (this.l10n.ctx.isReady) {
// 如果L10n已经准备好, 则获取对应国际化结果
if (this.l10n.ctx.getLocale(navigator.language).isReady) {
result = this.l10n.get(id, ctxdata)
if (!result) {
console.warn(
'l10n get nothing by id:',
id,
'; and ctxdata:',
ctxdata
)
}
} else {
// 相应的国际化资源未准备完成, 待完成后重新刷新
this.openLocaleListener()
}
} else {
// L10n还没有准备好, 等待L10n准备完毕后, 刷新小组件
this.openL10nReadyListener()
}
} else {
console.warn('l10n is not exist!')
}
return result
}
/* 等待国际化资源加载, 添加加载成功的事件监听 */
_localeListening: boolean = false
openLocaleListener = () => {
if (!this._localeListening) {
this._localeListening = true
const cb = () => {
this.updateArray.forEach((el) => el.requestUpdate())
this.l10n.ctx.removeEventListener('request-locales-done', cb)
this._localeListening = false
}
this.l10n.ctx.addEventListener('request-locales-done', cb)
}
}
/* 等待L10n准备完毕, 添加准备完毕的事件监听 */
_readyListening: boolean = false
openL10nReadyListener = () => {
if (!this._readyListening) {
this._readyListening = true
this.l10n.once(() => {
this.updateArray.forEach((el) => el.requestUpdate())
this._readyListening = false
})
}
}
}
export const l10nHelper = new L10nHelper()

804
src/components/base/global-style.ts Normal file
View File

@ -0,0 +1,804 @@
import {css, CSSResultArray} from 'lit'
/**
* 为缩短变量名，将对打头的css属性进行简写。
*
* 缩写规则：
* bor = border
* br = border-radius
* btn = button
* bgc = background-color
* bs = box-shadow
*
* 模块划分原则：
* 基础模块 - 基础模块存放具有通用意义的变量
* 星光组件模块 - 按照星光组件的具体模块进行变量的逐个编写
* 主屏小组件模块 - 按照具体模块逐个编写
* 深色模式 - 存放深色模式独有(浅色模式即为root中的默认值)
* 主题模式 -
*
* 比如： --bgc-button 在浅色模式下背景色为：#ffffff, 在深色模式下为：#000000；
* 按照如下格式书写：
* :root {
* --bgc-button: #ffffff;
* --bgc-button-dm: #000000;
* }
* @media (prefers-color-scheme: dark) {
* --bgc-button: var(--bgc-button-dm);
* }
*
* 注意颜色变量若使用到的是主题色，检索本文档对应主题色，再使用对应的主题色变量。
*
*/
const baseStyle = css`
:root {
--devicePixelRatio: 2;
--text-font-family: 'OPPPSans';
/*****************************线性渐变*************************************/
--gradient-black: linear-gradient(180deg, #83eea1 0%, #24ba8d 100%);
--gradient-black-2: linear-gradient(
140.95deg,
#000000 24.83%,
#515c62 49.69%,
#000000 74.91%
);
--gradient-black-3: linear-gradient(180deg, #49538a -4.16%, #21264f 100%);
--gradient-blue: linear-gradient(180deg, #36ccea 0%, #2785ba 100%);
--gradient-blue-2: linear-gradient(180deg, #43b0f0 0%, #2387da 100%);
--gradient-blue-3: linear-gradient(180deg, #6addf3 0%, #2a95d1 100%);
--gradient-dark-blue: linear-gradient(270deg, #91fff2 0%, #009bf5 100%);
--gradient-green: linear-gradient(180deg, #49df73 0%, #14a97c 100%);
--gradient-green-2: linear-gradient(
180deg,
#4ed35b 0%,
rgba(12, 153, 36, 0.82) 100%
);
--gradient-green-3: linear-gradient(
152.36deg,
#6be4d0 8.74%,
#10a775 82.29%
);
--gradient-orange: linear-gradient(180deg, #f2c655 0%, #d38740 100%);
--gradient-orange-2: linear-gradient(180deg, #fcda84 0%, #ef9b4d 100%);
--gradient-gold: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
--gradient-purple: linear-gradient(180deg, #7376ce 0%, #503daf 100%);
--gradient-red: linear-gradient(180deg, #ee815e 0%, #e15033 100%);
--gradient-deep-purple: linear-gradient(
135deg,
#8e2de2 14.65%,
#4a00e0 85.35%
);
--gradient-green2cyan: linear-gradient(180deg, #83eea1 0%, #24ba8d 100%);
--gradient-silver: linear-gradient(180deg, #e6e6e6 17.81%, #b8b8b8 82.29%);
--gradient-white2gray: linear-gradient(
137.64deg,
#f5f0f5 0%,
#fafafa 20.46%,
#d5daf2 90.45%
);
--gradient-blackout: linear-gradient(
131.48deg,
rgba(71, 71, 71, 0.8) 7.8%,
rgba(20, 20, 20, 0.8) 87.95%
);
--gradient-blackout-vertical: linear-gradient(
147.15deg,
rgba(20, 20, 20, 0.8) 23.26%,
rgba(77, 77, 77, 0.8) 89.93%
);
--gradient-pale: linear-gradient(
180deg,
rgba(251, 251, 251, 0.65) 25.7%,
rgba(218, 218, 218, 0.65) 75.14%
);
--gradient-shallow: linear-gradient(
134.78deg,
#f7f5f7 2.34%,
#fafafa 34.11%,
#e1e4f2 100%
);
--gradient-deep: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%);
--gradient-light-yellow: linear-gradient(
126.33deg,
#fffbf2 13.54%,
#ede6d8 100%
);
--gradient-silvery-white: linear-gradient(
193.07deg,
rgba(182, 224, 255, 0.16) 5.07%,
rgba(182, 224, 255, 0.0592) 100.51%
);
--gradient-clock-black: linear-gradient(
145.7deg,
rgba(179, 193, 242, 0.8) 16.24%,
rgba(122, 130, 161, 0.8) 94.91%
);
--gradient-clock-border: linear-gradient(
rgba(217, 195, 147, 1),
rgba(217, 201, 165, 0.45)
);
/*****************************径向渐变*************************************/
--angular-gradient-yellow: angular-gradient(
rgba(223, 176, 82),
rgba(228, 201, 89)
);
--angular-gradient-blue: angular-gradient(
rgba(86, 91, 232),
rgba(55, 221, 240)
);
--angular-gradient-yellow-2: angular-gradient(
rgba(230, 178, 57),
rgba(232, 200, 72)
);
--radial-gradient-white2purple: radial-gradient(
60.05% 60.05% at 12.24% 12.74%,
#f7f9ff 0%,
#c6d1f5 100%
);
--radial-gradient-grey2blue: radial-gradient(
79.48% 79.48% at 0% 15.05%,
#a9b9d4 0%,
#5d78a6 100%
);
--radial-gradient-dark-grey: radial-gradient(
102.32% 100% at 0% 0%,
#7890ab 0%,
#21364d 100%
);
--radial-gradient-silver-grey: radial-gradient(
133.12% 125.53% at -21.25% 0%,
#b1bfd8 0%,
#5e77a1 100%
);
--radial-gradient-silver-blue: radial-gradient(
60.44% 448.77% at 3.78% 14.69%,
#54588e 0%,
#282b57 100%
);
--radial-gradient-black: radial-gradient(
64.66% 57.07% at 19.37% 18.18%,
#4b4e52 0%,
#302f33 100%
);
--radial-gradient-black-2: radial-gradient(
rgba(230, 225, 225, 0.85),
rgba(232, 246, 255),
rgba(204, 211, 219, 0.85)
);
--radial-gradient-clock-black: radial-gradient(
46.11% 46.11% at 29.45% 23.09%,
rgba(64, 70, 89, 0.8) 0%,
rgba(36, 40, 56, 0.8) 100%
);
/*****************************黑色透明*************************************/
--opacity-black-04: rgba(0, 0, 0, 0.04);
--opacity-black-06: rgba(0, 0, 0, 0.06);
--opacity-black-08: rgba(0, 0, 0, 0.08);
--opacity-black-09: rgba(0, 0, 0, 0.09);
--opacity-black-10: rgba(0, 0, 0, 0.1);
--opacity-black-12: rgba(0, 0, 0, 0.12);
--opacity-black-15: rgba(0, 0, 0, 0.15);
--opacity-black-25: rgba(0, 0, 0, 0.25);
--opacity-black-30: rgba(0, 0, 0, 0.3);
/****************************浅灰色透明*************************************/
--opacity-lig-grey-06: rgba(51, 51, 51, 0.06);
--opacity-lig-grey-15: rgba(51, 51, 51, 0.15);
/****************************灰色透明*************************************/
--opacity-grey-04: rgba(64, 64, 64, 0.4);
--opacity-grey-65: rgba(64, 64, 64, 0.65);
--opacity-grey-70: rgba(64, 64, 64, 0.7);
--opacity-grey-75: rgba(64, 64, 64, 0.75);
--opacity-grey-90: rgba(64, 64, 64, 0.9);
--opacity-grey-1: rgba(64, 64, 64, 1);
/****************************花白色透明*************************************/
--opacity-graying-02: rgba(225, 225, 225, 0.2);
--opacity-graying-04: rgba(225, 225, 225, 0.4);
--opacity-graying-05: rgba(225, 225, 225, 0.5);
--opacity-graying-06: rgba(225, 225, 225, 0.6);
/****************************浅白色透明*************************************/
--opacity-plain-01: rgba(228, 228, 228, 0.1);
--opacity-plain-12: rgba(228, 228, 228, 0.12);
--opacity-plain-14: rgba(228, 228, 228, 0.14);
--opacity-plain-28: rgba(228, 228, 228, 0.28);
/****************************白雾色透明*************************************/
--opacity-white-fog-78: rgba(247, 247, 247, 0.78);
--opacity-white-fog-96: rgba(247, 247, 247, 0.96);
/*****************************白色透明*************************************/
--opacity-white-06: rgba(255, 255, 255, 0.06);
--opacity-white-09: rgba(255, 255, 255, 0.09);
--opacity-white-10: rgba(255, 255, 255, 0.1);
--opacity-white-12: rgba(255, 255, 255, 0.12);
--opacity-white-14: rgba(255, 255, 255, 0.14);
--opacity-white-15: rgba(255, 255, 255, 0.15);
--opacity-white-20: rgba(255, 255, 255, 0.2);
--opacity-white-25: rgba(255, 255, 255, 0.25);
--opacity-white-40: rgba(255, 255, 255, 0.4);
--opacity-white-55: rgba(255, 255, 255, 0.55);
--opacity-white-68: rgba(255, 255, 255, 0.68);
--opacity-white-75: rgba(255, 255, 255, 0.75);
--opacity-white-1: rgba(255, 255, 255, 1);
/*******************************纯色***************************************/
--pure-white: rgba(255, 255, 255);
--pure-black: rgba(0, 0, 0);
/*******************************基础色**************************************/
/* 底色/base白 */
--base-white: #fafafa;
/* 底色/base黑 */
--base-black: #1a1a1a;
/****************************主题色汇总*************************************/
/* /主题色/紫 */
--theme-purple: #8c66ff;
/* 主题色/深蓝 */
--theme-dark-blue: #4a7ef8;
/* 主题色/蓝 */
--theme-blue: #1d98f0;
/* 主题色/青 */
--theme-cyan: #00c6c6;
/* 主题色/绿 */
--theme-green: #3ac668;
/* 主题色/黄 */
--theme-yellow: #f5c125;
/* 主题色/橙黄 */
--theme-orange: #fe9d09;
/* 主题色/红 */
--theme-red: #ec4949;
/* 主题色/橙红 */
--theme-orange-red: #f36f43;
/* 主题色/粉 */
--theme-toner: #e362bc;
/* 主题色/黄金渐变 */
--theme-gold-gradient: var(--gradient-gold);
/* 主题色/蓝色渐变 */
--theme-blue-gradient: var(--gradient-blue-2);
/* 主题色/紫色渐变 */
--theme-purple-gradient: var(--gradient-purple);
/* 主题色/绿色渐变 */
--theme-green-gradient: var(--gradient-green-2);
/* 主题色/红色渐变 */
--theme-red-gradient: var(--gradient-red);
/****************************主题色的透明色*************************************/
--theme-blue-opacity-12: linear-gradient(
0deg,
rgba(0, 0, 0, 0.12),
rgba(0, 0, 0, 0.12)
),
var(--theme-blue);
--theme-red-opacity-12: linear-gradient(
0deg,
rgba(0, 0, 0, 0.12),
rgba(0, 0, 0, 0.12)
),
var(--theme-red);
--theme-green-opacity-12: linear-gradient(
0deg,
rgba(0, 0, 0, 0.12),
rgba(0, 0, 0, 0.12)
),
var(--theme-green);
/****************************文字颜色*************************************/
/* 文字/正文白 */
--font-main-white: #f0f0f0;
/* 文字/正文黑 */
--font-main-black: #262626;
/* 文字/底色黑 */
--font-base-black: var(--pure-black);
/* 文字/底色白 */
--font-base-white: rgba(245, 245, 245, 1);
/* 文字/高亮白 */
--font-highlight-white: var(--base-white);
/* 文字/标题黑 */
--font-heading-black: #4d4d4d;
/* 文字/通知字-黑 */
--font-notice-black: #404040;
/* 文字/辅助通知-黑 */
--font-aucnotice-black: var(--opacity-grey-65);
/* 文字/辅助字-黑 */
--font-auxiliary-black: rgba(38, 38, 38, 0.5);
/* 文字/辅助字-白 */
--font-auxiliary-white: rgba(245, 245, 245, 0.5);
/* 文字/辅助字-浅黑 */
--font-auxiliary-ligblack: rgba(38, 38, 38, 0.4);
/* 文字/辅助字-蓝 */
--font-auxiliary-blue: rgba(33, 149, 237);
/* 文字/辅助字-黄 */
--font-auxiliary-yellow: rgba(224, 188, 117, 1);
/* 文字/次辅助字-黑 */
--font-sec-auxiliary-black: rgba(38, 38, 38, 0.45);
/* 文字/次辅助字-白 */
--font-sec-auxiliary-white: rgba(240, 240, 240, 0.45);
/* 文字/提示字-黑 */
--font-prompt-black: rgba(38, 38, 38, 0.35);
/* 文字/正文次黑 */
--font-secondary-black: var(--opacity-grey-65);
/* 文字/正文次白 */
--font-secondary-white: #e0e0e0;
/* 文字/渐变黑 */
--font-gradient-black: var(--gradient-black);
/* 文字/渐变银 */
--font-gradient-silver: var(--gradient-silver);
/****************************文字尺寸*************************************/
/* 字体/超小尺寸/ */
--font-ultrasmall-size: var(--auto-20px);
/* 字体/小尺寸/禁用和正常 */
--font-small-size: var(--auto-28px);
/* 字体/小尺寸/按下 */
--font-small-pressed-size: var(--auto-25_2px);
/* 字体/中尺寸/禁用和正常 */
--font-middle-size: var(--auto-32px);
/* 字体/中尺寸/按下 */
--font-middle-pressed-size: var(--auto-28_8px);
/* 字体/大尺寸/禁用和正常 */
--font-large-size: var(--auto-34px);
/* 字体/中尺寸/按下 */
--font-large-pressed-size: var(--auto-30_6px);
/* 字体/TimePicker选中 */
--font-select-size: var(--auto-36px);
/* 线性图标/32及以下-常规黑 */
--linear-icon32-black: #333333;
/* 线性图标/48及以上-常规黑 */
--linear-icon-black: #4d4d4d;
/* 线性图标/常规白 */
--linear-icon-white: #f4f4f4;
/* 线性图标/选中白(纯白) */
--linear-icon-check-white: var(--pure-white);
/* 线性图标/未选中白 */
--linear-unchecked-white: #d1d1d1;
/* 全/高斯蒙层-浅 */
--bgc-gauss-mask: rgba(217, 217, 217, 0.65);
--bgc-gauss-mask-dm: rgba(89, 89, 89, 0.68);
--gauss-mask-backdrop-filter: blur(60px);
/* 全/弹窗遮罩 */
--full-pop-up-mask: rgba(24, 24, 24, 0.35);
/********************************共用***************************************/
/* 全/radio */
--bgc-radio-off: rgba(38, 38, 38, 0.25);
--bgc-radio-on: rgba(29, 152, 240, 1);
--bgc-radio-off-bor: var(--auto-3px) solid var(--bgc-radio-off);
--bgc-radio-on-bor: var(--auto-9px) solid var(--bgc-radio-on);
/* 全/Toggele */
--bgc-toggele-on: rgba(29, 152, 240);
--bgc-radio-bor: var(--auto-19px);
/* 全/checkbox */
--bgc-checkbox-on: rgba(29, 152, 240);
--bgc-radio-on-bor: var(--auto-5px);
/* 全/hover */
--bgc-gray-button-pressed: var(--opacity-lig-grey-15);
}
`
/**
* 基础组件所需变量
*/
const baseComponentStyle = css`
:root {
/************Button按钮****************/
--br-btn-normal-small: var(--auto-34px);
--br-btn-normal-middle: var(--auto-40px);
--br-btn-normal-large: var(--auto-50px);
--br-btn-pure-small: var(--auto-32px);
--br-btn-pure-middle: var(--auto-40px);
--br-btn-pure-large: var(--auto-48px);
--bgc-btn-noraml: var(--opacity-lig-grey-06);
--bgc-btn-noraml-dm: var(--opacity-plain-12);
--bgc-btn-noraml-pressed: var(--opacity-lig-grey-15);
--bgc-btn-noraml-pressed-dm: var(--opacity-plain-28);
--bgc-btn-normal-primary: var(--theme-blue);
--bgc-btn-normal-primary-pressed: var(--theme-blue-opacity-12);
--bgc-btn-pure: var(--opacity-white-fog-78);
--bgc-btn-pure-dm: var(--opacity-grey-75);
--bgc-btn-pure-pressed: var(--opacity-white-fog-96);
--bgc-btn-pure-pressed-dm: var(--opacity-grey-90);
--bgc-btn-pure-default: var(--linear-icon-white);
--bgc-btn-pure-default-dm: var(--opacity-grey-04);
--bgc-btn-text-pressed: var(--opacity-black-06);
--bgc-btn-text-pressed-dm: var(--opacity-white-12);
--bgc-btn-icon-pressed: var(--opacity-black-06);
--bgc-btn-icon-pressed-dm: var(--opacity-white-12);
--bgc-btn-ghost: rgba(38, 38, 38, 0.2);
--bgc-btn-ghost-dm: var(--opacity-white-20);
--bgc-btn-special-delete: var(--opacity-white-75);
--bgc-btn-special-delete-dm: #666666;
--bgc-btn-special-delete-icon: var(--font-notice-black);
--bgc-btn-special-delete-icon-dm: var(--linear-icon-white);
--bgc-btn-specail-hang-up: var(--theme-red);
--bgc-btn-specail-answer: var(--opacity-black-12);
--bs-btn-special-hang-up: 0 var(--auto-14px) var(--auto-14px) rgba(128, 0, 4, 0.08);
--bs-btn-special-answer: 0 var(--auto-14px) var(--auto-14px) rgba(9, 102, 0, 0.08);
--bs-btn-special-hang-up-pressed: var(--theme-red-opacity-12);
--bs-btn-special-answer-pressed: var(--theme-green-opacity-12);
--color-btn-normal-default: var(--font-heading-black);
--color-btn-normal-default-dm: var(--font-main-white);
--color-btn-pure: var(--font-heading-black);
--color-btn-pure-dm: var(--font-main-white);
--color-btn-pure-default: var(--linear-icon-black);
--color-btn-pure-default-dm: var(--linear-icon-white);
--color-btn-text: var(--font-heading-black);
--color-btn-text-dm: var(--font-main-white);
--color-btn-icon: var(--font-heading-black);
--color-btn-icon-dm: var(--font-main-white);
--color-btn-special-go-back: var(--font-main-black);
--color-btn-special-go-back-dm: var(--font-highlight-white);
/* Radio */
--bor-radio-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
--bor-radio-off: var(--auto-3px) solid var(--opacity-white-25);
/* border/未选中 */
--bgc-radio: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
--bgc-radio: var(--auto-3px) solid var(--opacity-white-25);
/* border/选中 */
--bgc-radio-selected: var(--auto-9px) solid var(--theme-blue);
/* Checxbox */
--bor-checkbox-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
--bor-checkbox-off: var(--auto-3px) solid var(--opacity-white-25);
--bor-radius-checkbox: var(--auto-5px);
/* Toggle */
--bgc-toggle-color: var(--opacity-black-12);
--bgc-toggle-color: var(--opacity-white-15);
--bor-radius-toggle: var(--auto-19px);
/* Tab */
--bgc-tab-color: var(--base-white);
--bgc-tab-color: var(--opacity-black-25);
--bor-radius-tab-small: var(--auto-44_8px);
--bor-radius-tab-middle:: var(--auto-56px);
/* Toast */
--bgc-toast-color: var(--base-white);
--bgc-toast-color:#2E2E2E;
--bor-toast: var(--auto-1px) solid var(--opacity-white-15);;
--bor-toast: var(--auto-1px) solid var(--opacity-black-04);
--bor-radius-toast: var(--auto-20px);
/* MessageBox */
/* 全/分割线-深 */
--bor-message:var(--auto-1px) solid var(--opacity-black-09);
/* 全/分割线-浅 */
--bor-message:var(--auto-1px) solid var(--opacity-white-12);
/* SelectMenu */
/* 底色/弹窗浅 */
--bgc-dialog: var(-gradient-shallow);
/* 底色/弹窗深 */
--bgc-dialog-dark: var(-gradient-deep);
/* Li */
--line-height: calc(3 * var(--font-main-size));
--li-left-padding: var(--auto-10px);
--li-right-padding: var(--auto-10px);
--li-base-height: var(--auto-43px);
/* Searchbar-搜索底框-黑透/白透 */
--lm-bg-searchbox-normal: var(--opacity-black-04);
--lm-bg-searchbox-press: var(--opacity-black-10);
--dm-bg-searchbox-normal: var(--opacity-white-06);
--dm-bg-searchbox-press: var(--opacity-white-14);
/* 全/click */
--lm-bg-click: var(--opacity-black-06);
--dm-bg-click: var(--opacity-white-10);
/* 全/浮层菜单投影 */
--full-menu-projection: var(--auto-1px) var(--auto-3px) var(--auto-8px) var(--opacity-black-15);
/* 分隔符 */
--split-line: #cfd8e8;
/* 字体大小和粗细 */
--font-main-size: var(--auto-14px);
--font-main-weight: bold; /* 400 */
/* 倒角 */
--base-menu-radius: var(--auto-16px);
--base-dialog-radius: var(--auto-20px);
--base-border-radius: var(--auto-34px);
/************控制中心(ControlCenter, cc)**************/
/* 控制中心小格子底色 */
--bgc-cc-block: var(--theme-blue);
/* 底色 */
--bgc-control-base: var(--pure-white);
--bgc-control-base-dm: var(--opacity-black-15);
/* 多端智联 */
--bgc-control-terminal: var(--opacity-white-4);
--bgc-control-terminal-dm: var(--opacity-black-25);
/* 多端智联-绿色渐变 */
--bgc-green-gradient: var(--gradient-green2cyan);
--bgc-green-gradient-dm: var(--gradient-green);
/* 多端智联-蓝色渐变 */
--bgc-blue-gradient: var(--gradient-blue-3);
--bgc-blue-gradient-dm: var(--gradient-blue);
/* 多端智联-黄色渐变 */
--bgc-lmorange-gradient: var(--gradient-orange-2);
--bgc-lmorange-gradient-dm: var(--gradient-orange);
/************通知中心(NotifiCenter, nc)**************/
--bgc-dialog-notice: var(--opacity-white-55);
--bgc-dialog-notice-dm: var(--opacity-black-25);
/* lm/绿色渐变 */
--bgc-lmgreen-gradient: var(--gradient-green2cyan);
/* lm/蓝色渐变 */
--bgc-lmblue-gradient: var(--gradient-blue-3);
/* lm/橙色渐变 */
--bgc-lmorange-gradient: var(--gradient-orange-2);
/* Bullet frame */
--bgc-notice-pop-up: var(--opacity-white-55);
/* 搜索底框/黑透_lm */
--bgc-searchbox: var(--opacity-black-04);
--bgc-toggele-off: var(--opacity-black-12)
}
`
const homeWidgetStyle = css`
:root {
/************主屏、个性化配置、功能组件**************/
/* 首屏时间-分钟 */
--bgc-screen-minute-time: var(--gradient-pale);
/* 首屏时间-冒号 */
--bgc-screen-colon: var(--opacity-graying-06);
/* 首屏天气-天气字 */
--bgc-screen-weather: var(--font-base-white);
/* 首屏_lm/日历浅 */
--bgc-screen-calendar: var(--gradient-white2gray);
/* 日历浅-阴影（全） */
--bgc-calendar-box-shadow: 0 var(--auto-4px) var(--auto-10px)
var(--opacity-black-08);
--br-screen-calendar: var(--auto-20px);
/* 首屏_dm/日历深 */
--bgc-screen-calendar: var(--gradient-blackout);
/* 日历深/描边 */
--bor-calendar: var(--auto-2px) dashed var(--opacity-white-15);
/* 首屏_lm/音乐播放器 */
--bgc-screen-music: var(--radial-gradient-white2purple);
--bgc-music-disc: var(--gradient-black-2);
/* 首屏_dm/音乐播放器 */
--bgc-screen-music: var(--radial-gradient-dark-grey);
--bgc-music-disc: var(--gradient-black-2);
/* 首屏_lm/长按菜单 */
--bgc-press-menu: var(-gradient-shallow);
/* 首屏_dm/长按菜单 */
--bgc-press-menu: var(-gradient-deep);
/************主屏/个性化配置**************/
/* 桌面编辑_lm/时间天气 */
--bgc-time-weather: var(--opacity-white-10);
/* 桌面编辑_lm/屏幕按钮浅-常规态 */
--bgc-screen-btn: var(--opacity-white-fog-78);
--bor-screen-btn: var(--auto-40px);
/* 桌面编辑_lm/屏幕按钮浅-点击态 */
--bgc-screen-btn-click: var(--opacity-white-fog-96);
--bor-screen-btn-click: var(--auto-36px);
/* 桌面编辑_dm/屏幕按钮深-常规态 */
--bgc-screen-btn: var(--opacity-grey-75);
--bor-screen-btn: var(--auto-70px);
/* 桌面编辑_dm/屏幕按钮深-点击态 */
--bgc-screen-btn-click: var(--opacity-grey-90);
--bor-screen-btn-click: var(--auto-63px);
/* 桌面编辑-强调按钮-常规态 */
--bgc-emphasize-btn: var(--theme-blue);
--bor-emphasize-btn: var(--auto-50px);
/* 桌面编辑-强调按钮-点击态 */
--bgc-emphasize-btn-click: var(--opacity-black-12);
--bor-emphasize-btn-click: var(--auto-45px);
/* 桌面编辑_dm/时间天气 */
--bgc-time-weather: var(--opacity-black-10);
/* 桌面编辑_dm/音乐进度条 */
--bgc-music-progress-bar: var(--gradient-dark-blue);
/* 装机默认/音乐进度条 */
--bgc-default-progress-bar: var(--opacity-white-15);
/************主屏/功能组件**************/
/* 功能组件-来电_lm-border*/
--br-function-call: var(--auto-1px) dashed rgba(116, 116, 116, 0.12);
--bor-function-call: var(--auto-20px);
/************桌面组件、组件编辑**************/
/* 音乐浅色-装机默认 */
--bgc-music-Installation-default: var(--radial-gradient-white2purple);
/* 音乐深色-装机默认 */
--bgc-music-Installation-default: var(--gradient-blackout);
/* 便签2*2-浅色-样式1 */
--bgc-note-sytle1: var(--gradient-light-yellow);
/* 便签2*2-浅色-样式2 */
--bgc-note-style2: var(--gradient-white2gray);
/* 便签2*2-浅色-样式2顶部 */
--bgc-note-style2-top: var(--radial-gradient-silver-grey);
/* 便签2*2-深色-样式1 */
--bgc-note-sytle1: var(--gradient-blackout);
/* 便签2*2-深色-样式2 */
--bgc-note-style2: var(--gradient-blackout);
/* 便签2*2-深色-样式2顶部 */
--bgc-note-style2-top: var(--radial-gradient-silver-grey);
/* 天气/lm */
--bgc-weather: var(--gradient-white2gray);
/* 天气/dm */
--bgc-weather: var(--gradient-blackout);
--bor-weather: var(--auto-1px) dashed var(--opacity-white-15);
/* 日历/lm-1*1 */
--bgc-calendar: var(--gradient-white2gray);
/* 日历/lm-1*1 Top*/
--bgc-calendar-top: var(--radial-gradient-grey2blue);
/* 日历_dm */
--bgc-calendar: var(--radial-gradient-silver-blue);
/* 日历/1*1Top/黑色渐变 */
--bgc-calendar-top: var(--gradient-black-3);
/* 电池_dm/黄色渐变 */
--bgc-battery-yellow: var(--angular-gradient-yellow);
/* 电池_dm/蓝色渐变 */
--bgc-battery-blue: var(--angular-gradient-blue);
/* dm/绿色渐变 */
--bgc-lmgreen-gradient: var(--gradient-green);
/* dm/蓝色渐变 */
--bgc-lmblue-gradient: var(--gradient-blue);
/* dm/橙色渐变 */
--bgc-lmorange-gradient: var(--gradient-orange);
/* dm/设备连接 */
--bgc-notice-gradient: var(--gradient-silvery-white);
/* 电池_lm/黄色渐变 */
--bgc-battery-yellow: var(--angular-gradient-yellow-2);
/* 电池_lm/蓝色渐变 */
--bgc-battery-blue: var(--angular-gradient-blue);
}
`
const themeStyle = css`
:root {
/***************************主题风格-商务风格*********************************/
/* 商务/组件浅-阴影（全） */
--business-light-shaded: 0 var(--auto-4px) var(--auto-10px)
var(--opacity-black-08);
/* 商务/组件浅/白调-斜线渐变 */
--bgc-dialog-gradient: var(--gradient-white2gray);
/* 商务/组件浅/白紫-径向渐变 */
--bgc-dialog-radial-gradient: var(--radial-gradient-white2purple);
/* 商务/组件浅/灰蓝-径向渐变 */
--bgc-dialog-greyblue-gradient: var(--radial-gradient-grey2blue);
/* 商务/组件深/描边 */
--bgc-dialog-stroke: var(--auto-1px) solid var(--opacity-white-15);
/* 商务/组件深/黑透渐变（高斯） */
--bgc-dialog-black-gradient: var(--gradient-blackout);
/* 商务/组件深/黑透渐变-竖（高斯） */
--bgc-dialog-black-vertical-gradient: var(--gradient-blackout-vertical);
/* 商务/组件深/黑不透渐变-竖 */
--bgc-dialog-black-opaque-gradient: var(--radial-gradient-black);
/* 商务/组件浅/ 表盘渐变-毛玻璃 */
--bgc-dialog-dial-gradation: var(--gradient-clock-black);
/* 商务/组件浅/浅黄纸张-斜线渐变 */
--light-yellow-gradation: var(--gradient-light-yellow);
/* 商务/组件深/描边 */
--bgc-border-stroke: var(--auto-1px) solid var(--opacity-white-15);
/* 电量底-scaleX-scaleY */
--battery-green-gradation: var(--gradient-green-3);
/* 商务/组件浅/ 表盘渐变-毛玻璃 */
--back-clock-border: var(--radial-gradient-black-2);
--back-clock-case: var(--gradient-clock-black);
--back-clock-box-shadow: 0 var(--auto-6px) var(--auto-12px)
var(--opacity-black-15);
--back-clock-backdrop-filter: blur(20px);
}
`
const cubicBezierStyle = css`
:root {
--cubic-bezier-025-01-025-1: cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
--cubic-bezier-03-02-01-1: cubic-bezier(0.3, 0.2, 0.1, 1) forwards;
--cubic-bezier-0-035-02-1: cubic-bezier(0, 0.35, 0.2, 1) forwards;
--cubic-bezier-0-035-025-1: cubic-bezier(0, 0.35, 0.25, 1) forwards;
/* TBD: 给以下 sytle1 命名为具体含义值 */
--animation-style1-50ms: 50ms var(--cubic-bezier-025-01-025-1);
--animation-style1-100ms: 100ms var(--cubic-bezier-025-01-025-1);
--animation-style1-150ms: 150ms var(--cubic-bezier-025-01-025-1);
--animation-style1-200ms: 200ms var(--cubic-bezier-025-01-025-1);
--animation-style1-250ms: 250ms var(--cubic-bezier-025-01-025-1);
--animation-style1-300ms: 300ms var(--cubic-bezier-025-01-025-1);
--animation-style1-400ms: 400ms var(--cubic-bezier-025-01-025-1);
--animation-style2-50ms: 50ms var(--cubic-bezier-0-035-02-1);
--animation-style2-100ms: 100ms var(--cubic-bezier-0-035-02-1);
--animation-style2-150ms: 150ms var(--cubic-bezier-0-035-02-1);
--animation-style2-200ms: 200ms var(--cubic-bezier-0-035-02-1);
--animation-style2-250ms: 250ms var(--cubic-bezier-0-035-02-1);
--animation-style2-300ms: 300ms var(--cubic-bezier-0-035-02-1);
--animation-style2-400ms: 400ms var(--cubic-bezier-0-035-02-1);
--animation-style3-50ms: 50ms var(--cubic-bezier-03-02-01-1);
--animation-style3-100ms: 100ms var(--cubic-bezier-03-02-01-1);
--animation-style3-150ms: 150ms var(--cubic-bezier-03-02-01-1);
--animation-style3-200ms: 200ms var(--cubic-bezier-03-02-01-1);
--animation-style3-250ms: 250ms var(--cubic-bezier-03-02-01-1);
--animation-style3-300ms: 300ms var(--cubic-bezier-03-02-01-1);
--animation-style3-400ms: 400ms var(--cubic-bezier-03-02-01-1);
--animation-style4-50ms: 50ms var(--cubic-bezier-03-025-01-1);
--animation-style4-100ms: 100ms var(--cubic-bezier-03-025-01-1);
--animation-style4-150ms: 150ms var(--cubic-bezier-03-025-01-1);
--animation-style4-200ms: 200ms var(--cubic-bezier-03-025-01-1);
--animation-style4-250ms: 250ms var(--cubic-bezier-03-025-01-1);
--animation-style4-300ms: 300ms var(--cubic-bezier-03-025-01-1);
--animation-style4-400ms: 400ms var(--cubic-bezier-03-025-01-1);
}
`
const lightStyle = css`
@media (prefers-color-scheme: light) {
:root {
/* 全/checkbox_lm */
--bgc-checkbox-off: rgba(38, 38, 38, 0.25);
--bgc-radio-off-border: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
/* 全/Toggele_lm */
/* 底色/ 侧栏白 */
--base-sidebar-color: #edeff8;
}
}
`
const darkStyle = css`
@media (prefers-color-scheme: dark) {
:root {
/* 底色/弹窗深 */
--bgc-dialog: var(--bgc-dialog-dark);
/* 商务/组件深/黑透渐变（高斯） */
--bgc-black-gradient: var(--gradient-blackout);
/* 商务/组件深/黑透渐变-竖（高斯） */
--bgc-black-vertical-gradient: var(--gradient-blackout-vertical);
/* 按钮button */
--bgc-btn-noraml: var(--bgc-btn-noraml-dm);
--bgc-btn-noraml-pressed: var(--bgc-btn-noraml-pressed-dm);
--bgc-btn-pure-default: var(--bgc-btn-pure-default-dm);
--bgc-btn-text-pressed: var(--bgc-btn-text-pressed-dm);
--bgc-btn-icon-pressed: var(--bgc-btn-icon-pressed-dm);
--bgc-btn-ghost: var(--bgc-btn-ghost-dm);
--bgc-btn-special-delete: var(--bgc-btn-special-delete-dm);
--bgc-btn-special-delete-icon: var(--bgc-btn-special-delete-icon-dm);
--color-btn-normal-default: var(--color-btn-normal-default-dm);
--color-btn-pure: var(--color-btn-pure-dm);
--color-btn-pure-default: var(--color-btn-pure-default);
--color-btn-text: var(--color-btn-text-dm);
--color-btn-icon: var(--color-btn-icon-dm);
--color-btn-special-go-back: var(--color-btn-special-go-back-dm);
/* 全/ click_dm */
--bgc-btn-click: var(--opacity-white-10);
/* 全/ checkbox_dm */
--bgc-checkbox-off: var(--opacity-white-25);
--bgc-radio-off-border: var(--auto-3px) solid var(--opacity-white-25);
/* 全/ Toggele_dm */
--bgc-toggele-off: var(--opacity-white-15);
/* 搜索底框/白透_dm */
--bgc-searchbox: var(--opacity-white-06);
/* 商务/组件深/ 表盘渐变-毛玻璃 */
--bor-bgc-clock: var(gradient-clock-border);
--bgc-clock-case: var(--radial-gradient-clock-black);
--bgc-clock-box-shadow: 0 var(--auto-4px) var(--auto-10px)
var(--opacity-black-08);
--bgc-clock-backdrop-filter: blur(20.3871px);
--bgc-gauss-mask: var(--bgc-gauss-mask-dm);
}
}
`
export const globalStyles: CSSResultArray = [
baseStyle,
baseComponentStyle,
homeWidgetStyle,
themeStyle,
cubicBezierStyle,
lightStyle,
darkStyle,
]

55
src/components/base/star-base-element.ts
View File

@ -3,8 +3,9 @@ import GestureDetector, {
GestureEvents,
GestureOptions,
} from '../../lib/gesture/gesture-detector'
import {baseStyles} from './base-style'
import {autoPxStyle} from './auto-px-style'
import {globalStyles} from './global-style'
import {l10nHelper} from './custome_element_l10n'
declare global {
var loadStarMixin: boolean
@ -78,14 +79,15 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
// 填充全局所需基础样式变量, 只添加一次
const style = document.createElement('style')
const baseStylesString = baseStyles
const globalStylesString = globalStyles
.join(' ')
.toString()
.replace(/(--devicePixelRatio: )\d+/, (_, s1) => {
// 替换 devicepixelRatio
return s1 + String(devicePixelRatio)
})
const autoPxStyleString = autoPxStyle.toString()
style.innerHTML = baseStylesString + autoPxStyleString
style.innerHTML = globalStylesString + autoPxStyleString
document.head.appendChild(style)
window.loadStarMixin = true
@ -97,10 +99,12 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
return class StarBaseElementInitial extends constructor {
hello() {}
onhover() {
this.classList.add('pressed')
this.classList.toggle('starpress', true)
this.classList.toggle('starfree', false)
}
onhoverend() {
this.classList.remove('pressed')
this.classList.toggle('starpress', false)
this.classList.toggle('starfree', true)
}
}
}
@ -110,6 +114,16 @@ export type StarElementEventMap = HTMLElementEventMap & GestureEvents
export class StarBaseElement extends StarMixin(LitElement) {
gestureDetector!: GestureDetector
disconnectedCallback(): void {
super.disconnectedCallback()
this._l10n && l10nHelper.observe(this)
}
connectedCallback(): void {
super.connectedCallback()
this._l10n && l10nHelper.unobserve(this)
}
/**
* 启动手势监听框架
*/
@ -123,6 +137,35 @@ export class StarBaseElement extends StarMixin(LitElement) {
GestureDetector.disembedded(this)
}
/**
* 动态添加国际化资源
*/
addLocaleSrc(json: {[lang: string]: {[l10nId: string]: string}}): void {
l10nHelper.addLocaleSrc(json)
}
/* 该组件是否启用了国际化功能, 用于判断是否因系统语言变化而刷新 */
_languageChangeObserve: boolean = false
get _l10n() {
return this._languageChangeObserve
}
set _l10n(value) {
if (value) {
if (!this._languageChangeObserve) {
l10nHelper.observe(this)
}
} else {
l10nHelper.unobserve(this)
}
this._languageChangeObserve = value
}
/* 根据 id 和传值 ctxdata 获取国际化结果 */
$l = (id: string, ctxdata?: string) => {
this._l10n = true
return l10nHelper.get(id, ctxdata)
}
public static get styles(): CSSResultArray {
return []
}
@ -131,4 +174,4 @@ export class StarBaseElement extends StarMixin(LitElement) {
export * from 'lit'
export * from 'lit/decorators.js'
export * from 'lit/directives/if-defined.js'
export * from 'lit-html/directives/style-map.js'
export * from 'lit/directives/style-map.js'

6
src/components/base/tsconfig.json
View File

@ -4,5 +4,9 @@
"composite": true,
"rootDir": "../../"
},
"include": ["*.ts", "../../lib/gesture/gesture-detector.ts"]
"include": [
"*.ts",
"../../lib/gesture/gesture-detector.ts",
"../../../../typings/"
]
}

11
src/components/battery-square/battery-square-styles.ts
View File

@ -1,11 +1,10 @@
import {css, CSSResult} from 'lit'
export const sharedStyles: CSSResult = css`
.power {
:host {
position: relative;
width: 100%;
height: 0;
padding: 0;
padding-bottom: 100%;
height: 100%;
display: block;
}
.container {
@ -36,10 +35,10 @@ export const sharedStyles: CSSResult = css`
position: absolute;
font-style: normal;
font-weight: 400;
font-size: 9vw;
font-size: var(--percent-size);
color: #717171;
padding-inline-start: 25%;
padding-top: 2.5%;
padding-block-start: 2.5%;
}
.lightning {

23
src/components/battery-square/battery-square.ts
View File

@ -18,6 +18,8 @@ export class StarBatterysquare extends LitElement {
@query('.canvas') _canvas: any
@query('.container') _container: any
drawcircle() {
const canvas = this._canvas
const can = canvas.getContext('2d')
@ -57,19 +59,28 @@ export class StarBatterysquare extends LitElement {
can.closePath()
}
protected resize() {
var width = this._container.clientWidth
console.log(width)
this.style.setProperty('--percent-size', width / 10 + 'px')
}
protected firstUpdated(): void {
this.drawcircle()
this.drawarc()
this.resize()
window.addEventListener('resize', () => {
this.resize()
})
}
render() {
return html`
<div class="power">
<div class="container">
<canvas class="canvas" width="160px" height="160px"></canvas>
<img src="src/assets/lightning.svg" class="lightning" />
<span class="percent">%</span>
</div>
<div class="container">
<canvas class="canvas" width="160px" height="160px"></canvas>
<img src="src/assets/lightning.svg" class="lightning" />
<span class="percent">%</span>
</div>
`
}

13
src/components/battery/battery-styles.ts
View File

@ -1,12 +1,11 @@
import {css, CSSResult} from 'lit'
export const sharedStyles: CSSResult = css`
// .holder {
// position: relative;
// width: var(--battery-width, 100%);
// height: 0;
// padding: 0;
// padding-bottom: 35.4%;
// }
:host {
position: relative;
width: 100%;
height: 100%;
display: block;
}
.container {
display: flex;

3
src/components/battery/battery.ts
View File

@ -1,12 +1,13 @@
import {html, LitElement, CSSResultArray} from 'lit'
import {customElement, property, query} from 'lit/decorators.js'
import {sharedStyles} from './battery-styles'
import {animation} from '../animation/animation-styles'
import lightning from './svg/lightning.svg'
@customElement('star-battery')
export class StarBattery extends LitElement {
public static override get styles(): CSSResultArray {
return [sharedStyles]
return [sharedStyles , animation]
}
@property({type: Boolean}) deep = false

82
src/components/button/README.md
View File

@ -14,10 +14,10 @@
| type | 'normal'，'pure'，'text'，'icon'，'ghost'，'specail' |
| variant | 'primary'，'default'，'warn'，'establish' |
| label | 字符串 |
| width | 字符串 | | 用于自定义 Normal 按钮的宽度 |
| special | 'corner-marker'，'hang-up'，'answer-call'，'go-back' |
| icon | 对应 gaia-icons 中的图标名 |
| disabled | true，false | false |
| theme | ligth，theme | light | 手动设置组件主题 |
<center><b>star-button组件支持的插槽</b></center>
@ -49,11 +49,15 @@
注意：
- type 必需: type="normal".
- size 可选， 默认为 "small"，可选 "small", "middle", "large".
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn".
- width 可选, 有效值区间[200,520], 抵近对应按钮的最小宽度和最大宽度
- disabled 可选， 默认为 false.
- type 必需: type="normal"。
- size 可选， 默认为 "small"，可选 "small", "middle", "large"。
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn"。
- disabled 可选， 默认为 false。
- theme 可选，默认为 light，可选 "light"，"dark"。
- 可直接在 <star-button> 上设置各种单位的宽度, 宽度值的有效值区间(最小宽度和最大宽度):
- small: [200,520]
- middle: [260,520]
- large: [320,520]
### 2. Pure - 纯按钮
@ -73,13 +77,18 @@
注意：
- type 必需: type="pure".
- size 可选， 默认为 "small"，可选 "small", "middle", "large".
- label 可选，填充类型为字符串.
- disabled 可选，默认为 false.
- icon 可选， 其值为 gaia-icons 中支持的图标名.
- 插槽<slot name="asset">可选，其内包裹 svg.
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者.
- type 必需: type="pure"。
- size 可选， 默认为 "small"，可选 "small", "middle", "large"。
- label 可选，填充类型为字符串。
- disabled 可选，默认为 false。
- icon 可选， 其值为 gaia-icons 中支持的图标名。
- 插槽<slot name="asset">可选，其内包裹 svg。
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者。
- theme 可选，默认为 light，可选 "light"，"dark"。
- 图标+文字时，可直接在 <star-button> 上设置各种单位的宽度, 宽度值的有效值区间(最小宽度和最大宽度):
- small: [208,520]
- middle: [260,520]
- large: [320,520]
### 3. Text - 文本按钮
@ -94,10 +103,13 @@
注意：
- type 必需: type="text".
- label 必需，填充类型为字符串.
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn".
- disabled 可选，默认为 false.
- type 必需: type="text"。
- label 必需，填充类型为字符串。
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn"。
- disabled 可选，默认为 false。
- theme 可选，默认为 light，可选 "light"，"dark"。
- 可直接在 <star-button> 上设置各种单位的宽度, 宽度值的有效值区间(最小宽度和最大宽度):
- small: [112,520]
### 4. Icon - 图标按钮
@ -112,12 +124,13 @@
注意：
- type 必需: type="icon".
- size 可选， 默认为 "small"，可选 "small", "middle".
- disabled 可选，默认为 false.
- icon 可选， 其值为 gaia-icons 中支持的图标名.
- 插槽<slot name="asset">可选，其内包裹 svg.
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者.
- type 必需: type="icon"。
- size 可选， 默认为 "small"，可选 "small", "middle"。
- disabled 可选，默认为 false。
- icon 可选， 其值为 gaia-icons 中支持的图标名。
- 插槽<slot name="asset">可选，其内包裹 svg。
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者。
- theme 可选，默认为 light，可选 "light"，"dark"。
### 5. Ghost - 重影按钮
@ -134,13 +147,14 @@
注意：
- type 必需: type="ghost".
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge".
- variant 可选， 默认为 "default"，可选 "default", "primary", "establish".
- disabled 可选，默认为 false.
- icon 可选， 其值为 gaia-icons 中支持的图标名.
- 插槽<slot name="asset">可选，其内包裹 svg.
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者.
- type 必需: type="ghost"。
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge"。
- variant 可选， 默认为 "default"，可选 "default", "primary", "establish"。
- disabled 可选，默认为 false。
- icon 可选， 其值为 gaia-icons 中支持的图标名。
- 插槽<slot name="asset">可选，其内包裹 svg。
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者。
- theme 可选，默认为 light，可选 "light"，"dark"。
### 6. Special - 特殊按钮
@ -162,4 +176,12 @@
注意：
- special="corner-marker"和 special="go-back" 只有唯一一种用法
- theme 可选，默认为 light，可选 "light"，"dark"。
- special="hang-up"和 special="answer-call" 支持的 size 必需: "middle", "large"
- theme 可选，默认为 light，可选 "light"，"dark"。
## TBD
- icon 类型 button 的动效未实现，较复杂。
- multi-buttons 未整合
- button 中的 svg icon 颜色未同步黑暗模式，等待新版 gaia-icon 和确定的 svg 包装完成。

159
src/components/button/button-styles.ts
View File

@ -1,159 +0,0 @@
import {css, CSSResult} from 'lit'
export const sharedStyles: CSSResult = css`
button {
display: inline-block;
line-height: 18.2px;
white-space: nowrap;
cursor: pointer;
background: #fff;
color: #606266;
text-align: center;
box-sizing: border-box;
transition: 0.1s;
font-weight: 500;
font-size: 14px;
padding: 12px 23px 14px 23px;
border: none;
border-radius: 18px;
}
.small {
font-size: 12px;
height: 24px;
line-height: 15.6px;
min-height: 24px;
min-width: 54px;
padding: 0px 10px 0px 10px;
}
.medium {
font-size: 14px;
height: 32.2px;
line-height: 18.2px;
min-height: 32px;
min-width: 72px;
padding: 0px 14px 0px 14px;
}
.large {
font-size: 16px;
height: 40.8px;
line-height: 20.8px;
min-height: 40px;
min-width: 90px;
padding: 0px 18px 0px 18px;
}
.extralarge {
font-size: 18px;
height: 48.4px;
line-height: 23.4px;
min-height: 48px;
min-width: 100px;
padding: 0px 22px 0px 22px;
}
.accent {
background-color: #0469e3;
color: #ffffff;
}
.accent:hover {
background-color: #015bc7;
box-shadow: none;
}
.primary {
background-color: #222222;
color: #ebebeb;
}
.primary:hover {
background-color: #000000;
color: #ffffff;
}
.secondary {
background-color: #e6e6e6;
color: #222222;
}
.secondary:hover {
background-color: #d5d5d5;
color: #d42222;
}
.negative {
background-color: #b30202;
color: #ebebeb;
}
.negative:hover {
background-color: #a20101;
color: #ebebeb;
}
.black {
color: #222222;
background-color: #000000;
}
.white {
background-color: #ffffff;
color: #ebebeb;
}
.disabled {
background-color: #e6e6e6;
cursor: default;
pointer-events: none;
}
.fill.primary {
color: #ffffff;
}
.fill.primary:hover {
background-color: #000000;
}
.outline.primary {
background-color: #f0f0f0;
border-style: solid;
color: #222222;
}
.outline.primary:hover {
background-color: #d5d5d5;
border-style: solid;
color: #000000;
}
button.hasicon::before {
font-size: 16px;
font-family: 'gaia-icons';
content: attr(data-icon);
text-align: center;
padding-inline-end: 5px; /**定义元素逻辑块末尾填充 */
}
button.icononly::before {
font-size: 16px;
font-family: 'gaia-icons';
content: attr(data-icon);
text-align: center;
}
button.icononly {
border-radius: 50%;
height: auto;
line-height: auto;
min-height: 32.2px;
min-width: 32.2px;
padding: 0px;
}
.start-button-confirm {
display: inline-block;
}
`

1032
src/components/button/button.css.ts
View File

File diff suppressed because it is too large Load Diff

39
src/components/button/button.ts
View File

@ -4,7 +4,6 @@ import {
ifDefined,
nothing,
property,
styleMap,
CSSResultArray,
HTMLTemplateResult,
StarBaseElement,
@ -52,6 +51,11 @@ export enum ButtonSpecial {
GOBACK = 'go-back',
}
export enum Theme {
LIGHT = 'light',
DARK = 'dark',
}
/**
* 首字母大写
*/
@ -140,6 +144,8 @@ export class StarButton extends StarBaseElement {
@property({type: String}) fontsize = ''
@property({type: String}) theme = 'light'
protected get hasLabel(): boolean {
return this.label !== ''
}
@ -192,17 +198,9 @@ export class StarButton extends StarBaseElement {
*/
renderNormalButton(): HTMLTemplateResult {
const computeClasses = `${this.variant} ${this.size}`
const styles = {
width: this.width,
}
return html`
<button
class="${computeClasses}"
style=${ifDefined(this.width) ? styleMap(styles) : nothing}
>
${this.label}
</button>
<button class="${computeClasses}">${this.label}</button>
`
}
@ -218,19 +216,16 @@ export class StarButton extends StarBaseElement {
*/
renderPureButton(): HTMLTemplateResult {
const classes = `${this.size} ${this.variant}`
/* prettier-ignore */
const innerContent = html`${this.hasIcon
? nothing
: html`<slot name="asset"></slot>`}${this.hasLabel
// ? html`<span>${this.label}</span>`
? html`${this.label}`
: nothing}`
/* prettier-ignore */
return html`
<button class="${classes}" data-icon=${ifDefined(this.icon)}>
${this.hasIcon
? nothing
: html`
<slot name="asset"></slot>
`}
${this.hasLabel
? html`
<span>${this.label}</span>
`
: nothing}
</button>
<button class="${classes}" data-icon=${ifDefined(this.icon)}>${innerContent}</button>
`
}

7
src/components/button/tsconfig.json
View File

@ -4,5 +4,10 @@
"composite": true,
"rootDir": "../../"
},
"include": ["*.ts", "../base/*.ts", "../asset/svg-icon.ts"]
"include": [
"*.ts",
"../base/*.ts",
"../animation/*.ts",
"../asset/svg-icon.ts"
]
}

29
src/components/clock/clock-style.ts
View File

@ -1,4 +1,19 @@
import {css, CSSResult} from 'lit'
import {css, CSSResult,unsafeCSS} from 'lit'
const darkHour = unsafeCSS(
new URL('./svg/dark_hour.svg', import.meta.url).href
)
const darkMinute = unsafeCSS(
new URL('./svg/dark_minute.svg', import.meta.url).href
)
const lightHour = unsafeCSS(
new URL('./svg/light_hour.svg', import.meta.url).href
)
const lightMinute = unsafeCSS(
new URL('./svg/light_minute.svg', import.meta.url).href
)
const sharedSecond = unsafeCSS(
new URL('./svg/second.svg', import.meta.url).href
)
export const sharedStyles: CSSResult = css`
@media (prefers-color-scheme: light) {
:host {
@ -17,13 +32,13 @@ export const sharedStyles: CSSResult = css`
--back-clock-backdrop-filter: blur(20px);
}
.star-clock-hour-hand {
background: url('./src/components/clock/svg/light_hour.svg') no-repeat;
background: url(${lightHour}) no-repeat;
}
.star-clock-minute-hand {
background: url('./src/components/clock/svg/light_minute.svg') no-repeat;
background: url(${lightMinute}) no-repeat;
}
.star-clock-second-hand {
background: url('./src/components/clock/svg/second.svg') no-repeat;
background: url(${sharedSecond}) no-repeat;
}
}
@media (prefers-color-scheme: dark) {
@ -42,13 +57,13 @@ export const sharedStyles: CSSResult = css`
--back-clock-backdrop-filter: blur(20.3871px);
}
.star-clock-hour-hand {
background: url('./src/components/clock/svg/dark_hour.svg') no-repeat;
background: url(${darkHour}) no-repeat;
}
.star-clock-minute-hand {
background: url('./src/components/clock/svg/dark_minute.svg') no-repeat;
background: url(${darkMinute}) no-repeat;
}
.star-clock-second-hand {
background: url('./src/components/clock/svg/second.svg') no-repeat;
background: url(${sharedSecond}) no-repeat;
}
}
* {

1
src/components/confirm/confirm-style.ts
View File

@ -8,6 +8,7 @@ export const sharedStyles: CSSResult = css`
display: flex;
justify-content: center;
align-items: center;
top: 0;
}
.top-center-popup {
align-items: flex-start;

58
src/components/dialog/README.md Normal file
View File

@ -0,0 +1,58 @@
# 弹窗/对话框设计
弹窗区别于其他内容的地方：
- 弹窗底部有按钮
弹窗基类决定的内容：
- 弹窗盒子三段式结构
- 弹窗盒子的位置、实际大小、显示大小
- 深浅颜色模式支持
- 按钮组及默认行为(cancel, confirm)的代理
基类采用的三段式结构：
```
-------------------
| 图标/标题 |
-------------------
| 内容 |
| 纯文本/富文本/表单 |
-------------------
| 按钮/按钮组 |
-------------------
```
## 系统弹窗(alert/confirm/prompt)
```
alert
-------------------
| 提示 |
-------------------
| 纯文本 |
-------------------
| 确认按钮 |
-------------------
confirm
-------------------
| 提出问题？ |
-------------------
| 返回按钮 确认按钮 |
-------------------
prompt
-------------------
| 请输入： |
-------------------
| 预置文本的输入框 |
-------------------
| 返回按钮 确认按钮 |
-------------------
```
## TBD: 使用用户代理支持的<dialog>
使用浏览器用户代理支持的<dialog>时，可以省去自行设定模态的步骤，并且其自身已经拥有了默认排版，省去设置样式的行为。

10
src/components/dialog/alert-dialog.css.ts Normal file
View File

@ -0,0 +1,10 @@
import {css} from 'lit'
export default css`
div {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
`

66
src/components/dialog/alert-dialog.ts Normal file
View File

@ -0,0 +1,66 @@
import {
html,
CSSResultArray,
TemplateResult,
customElement,
} from '../base/star-base-element.js'
import StarBaseDialog from './base-dialog.js'
import alertDialogStyles from './alert-dialog.css.js'
import './base-dialog.js'
import '../button/button.js'
import '../button-group/button-group.js'
interface AlertDialogOptions {
text?: string
confirm?: string
onconfirm?: () => void
}
@customElement('star-alert-dialog')
export class StarAlertDialog extends StarBaseDialog {
public static override get styles(): CSSResultArray {
return [super.styles, alertDialogStyles]
}
title = '提示'
text!: string
onconfirm!: () => void
protected override get headerContent(): TemplateResult {
return html`
<h1 slot="header">${this.title}</h1>
`
}
protected override get mainContent(): TemplateResult {
return html`
<span>${this.text}</span>
`
}
protected override get bottomContent(): TemplateResult {
return html`
<star-button-group>
<star-button
type="text"
variant="primary"
label=${this.confirm}
@click=${this.handleConfirm}
></star-button>
</star-button-group>
`
}
handleEvent(e: any): void {
console.log(e)
}
constructor(obj: AlertDialogOptions) {
super()
this.text = obj.text || ''
this.confirm = obj.confirm || '确定'
this.onconfirm = obj.onconfirm || (() => {})
}
}

13
src/components/dialog/base-dialog.css.ts Normal file
View File

@ -0,0 +1,13 @@
import {css} from 'lit'
export default css`
div {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
dialog::backdrop {
background: green;
}
`

111
src/components/dialog/base-dialog.ts Normal file
View File

@ -0,0 +1,111 @@
import {
html,
nothing,
query,
CSSResultArray,
StarBaseElement,
TemplateResult,
} from '../base/star-base-element.js'
import baseDialogStyles from './base-dialog.css.js'
const USE_DIALOG = 0
export default class StarBaseDialog extends StarBaseElement {
title!: string
value!: string
cancel!: string
confirm!: string
onconfirm!: (e: Event) => void
oncancel!: (e: Event) => void
@query('dialog') dialog!: HTMLDialogElement
public static override get styles(): CSSResultArray {
return [baseDialogStyles]
}
protected get headerContent(): TemplateResult {
return html`
PLEASE REWRITE ME
`
}
protected get mainContent(): TemplateResult | typeof nothing {
return nothing
}
protected get bottomContent(): TemplateResult {
return html`
PLEASE REWRITE ME
`
}
protected get parent(): Element {
return this.parentElement || (this.getRootNode() as Element)
}
protected handleConfirm(e: Event) {
this.parent.removeChild(this)
this.onconfirm?.(e)
}
protected handleCancel(e: Event) {
this.parent.removeChild(this)
this.oncancel?.(e)
}
/**
* TBD: 在Gecko>=98时，使用 <dialog> 和 this.showModal() 的方法进行包裹
*/
private renderDialog() {
return html`
<dialog>
<header>${this.headerContent}</header>
<main>${this.mainContent}</main>
<footer>${this.bottomContent}</footer>
</dialog>
`
}
private renderMockDialog() {
return html`
<div>
<header>${this.headerContent}</header>
<main>${this.mainContent}</main>
<footer>${this.bottomContent}</footer>
</div>
`
}
/**
*
* @returns
*/
protected render() {
if (USE_DIALOG && typeof HTMLDialogElement === 'function') {
return this.renderDialog()
} else {
return this.renderMockDialog()
}
}
connectedCallback(): void {
super.connectedCallback()
if (USE_DIALOG && typeof HTMLDialogElement === 'function') {
this.updateComplete.then(() => {
this.dialog.showModal()
})
}
}
}
declare global {
interface HTMLElementTagNameMap {
'star-base-dialog': StarBaseDialog
}
}

10
src/components/dialog/confirm-dialog.css.ts Normal file
View File

@ -0,0 +1,10 @@
import {css} from 'lit'
export default css`
div {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
`

59
src/components/dialog/confirm-dialog.ts Normal file
View File

@ -0,0 +1,59 @@
import {
customElement,
html,
CSSResultArray,
TemplateResult,
} from '../base/star-base-element.js'
import StarBaseDialog from './base-dialog.js'
import confirmDialogStyles from './confirm-dialog.css.js'
import './base-dialog.js'
import '../button/button.js'
interface ConfirmDialogOptions {
title?: string
cancel?: string
confirm?: string
oncancel?: () => void
onconfirm?: () => void
}
@customElement('star-confirm-dialog')
export class StarConfirmDialog extends StarBaseDialog {
public static override get styles(): CSSResultArray {
return [super.styles, confirmDialogStyles]
}
protected override get headerContent(): TemplateResult {
return html`
<h1 slot="header">${this.title}</h1>
`
}
protected override get bottomContent(): TemplateResult {
return html`
<star-button-group>
<star-button
type="text"
variant="default"
label=${this.cancel}
@click=${this.handleCancel}
></star-button>
<star-button
type="text"
variant="primary"
label=${this.confirm}
@click=${this.handleConfirm}
></star-button>
</star-button-group>
`
}
constructor(obj: ConfirmDialogOptions) {
super()
this.title = obj.title || ''
this.cancel = obj.cancel || '取消'
this.confirm = obj.confirm || '确定'
this.oncancel = obj.oncancel || (() => {})
this.onconfirm = obj.onconfirm || (() => {})
}
}

3
src/components/dialog/index.ts Normal file
View File

@ -0,0 +1,3 @@
export {StarAlertDialog} from './alert-dialog.js'
export {StarConfirmDialog} from './confirm-dialog.js'
export {StarPromptDialog} from './prompt-dialog.js'

22
src/components/dialog/package.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "@star-web-components/dialog",
"version": "0.0.1",
"description": "",
"type": "module",
"main": "./index.js",
"module": "./index.js",
"exports": {
".": {
"default": "./index.js"
},
"./index": {
"default": "./index.js"
},
"./index.js": {
"default": "./index.js"
},
"./package.json": "./package.json"
},
"author": "",
"license": "ISC"
}

10
src/components/dialog/prompt-dialog.css.ts Normal file
View File

@ -0,0 +1,10 @@
import {css} from 'lit'
export default css`
div {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
`

73
src/components/dialog/prompt-dialog.ts Normal file
View File

@ -0,0 +1,73 @@
import {
customElement,
html,
query,
CSSResultArray,
TemplateResult,
} from '../base/star-base-element.js'
import StarBaseDialog from './base-dialog.js'
import promptDialogStyles from './prompt-dialog.css.js'
import './base-dialog.js'
import '../button/button.js'
interface PromptDialogOptions {
title?: string
value?: string
cancel?: string
confirm?: string
oncancel?: () => void
onconfirm?: () => void
}
@customElement('star-prompt-dialog')
export class StarPromptDialog extends StarBaseDialog {
// 暴露给外部使用
@query('input') public promptInput!: HTMLInputElement
public static override get styles(): CSSResultArray {
return [super.styles, promptDialogStyles]
}
protected override get headerContent(): TemplateResult {
return html`
<h1 slot="header">${this.title}</h1>
`
}
protected override get mainContent(): TemplateResult {
return html`
<p>
<input placeholder=${this.value} />
</p>
`
}
protected override get bottomContent(): TemplateResult {
return html`
<star-button-group>
<star-button
type="text"
variant="default"
label=${this.cancel}
@click=${this.handleCancel}
></star-button>
<star-button
type="text"
variant="primary"
label=${this.confirm}
@click=${this.handleConfirm}
></star-button>
</star-button-group>
`
}
constructor(obj: PromptDialogOptions) {
super()
this.title = obj.title || ''
this.value = obj.value || ''
this.cancel = obj.cancel || '取消'
this.confirm = obj.confirm || '确定'
this.oncancel = obj.oncancel || (() => {})
this.onconfirm = obj.onconfirm || (() => {})
}
}

8
src/components/dialog/tsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"composite": true,
"rootDir": "../../"
},
"include": ["*.ts", "../base/*.ts", "../button/*.ts", "../button-group/*.ts"]
}

37
src/components/dock/dock-child.ts
View File

@ -91,4 +91,41 @@ export default class DockChild {
!this.container.classList.contains('dragging') &&
(container.style.transform = 'translate(' + left + 'px, ' + top + 'px)')
}
/**
* 放入文件夹时, 该方法将根据参考元素, 将该子节点移动并缩放至参考元素的位置与大小
* @param element 参考元素
* @param pagination 参考元素所在页面
* @returns
*/
bringIntoForlder: boolean = false
synchroniseWithRefElement(element: HTMLElement, _pagination: number) {
return new Promise((res) => {
let {top, left, height, width} = element.getBoundingClientRect()
/* 水平偏移量 = 参考元素与屏幕左侧距离 - 主屏容器左边距 + 参考元素所在页面的offsetLeft */
/* left =
left - this.manager.left + this.manager.pages[pagination].offsetLeft */
// top -= this.manager.top
this.container.style.height = height + 'px'
this.container.style.width = width + 'px'
this.container.style.transform =
'translate(' + left + 'px, ' + top + 'px)'
this.bringIntoForlder = true
this.container.classList.add('bring-into-folder')
let timer!: number
const transitionCB = (evt: any) => {
if (evt?.pseudoElement) {
return
}
clearTimeout(timer)
this.container.removeEventListener('transitionend', transitionCB)
res(void 0)
}
this.container.addEventListener('transitionend', transitionCB)
timer = window.setTimeout(transitionCB, 300)
})
}
}

8
src/components/grid-container/container-style.ts
View File

@ -67,10 +67,13 @@ export default css`
opacity: 0.5;
}
/* 子节点元素容器 */
::slotted(.gaia-container-child) {
/* 高 = 单元格高度 * 占据行数 - 上下边距 */
height: calc(
var(--grid-height) * var(--rows, 1) - var(--grid-margin-top, 0px) * 2
);
/* 宽算法类似高 */
width: calc(
var(--grid-width) * var(--columns, 1) - var(--grid-margin-left, 0px) * 2
);
@ -92,4 +95,9 @@ export default css`
width: var(--icon-size, 100%);
height: 0;
}
:host([data-dragging='true']) .folder.opened .folder-page-container {
/* 为了防止拖动文件夹内的图标导致滑动 */
overflow: hidden;
}
`

616
src/components/grid-container/container.ts
View File

File diff suppressed because it is too large Load Diff

8
src/components/grid-container/contianer-interface.ts
View File

@ -1,3 +1,6 @@
import GaiaContainerChild from './gaia-container-child'
import GaiaContainerFolder from './gaia-container-folder'
type Timer = number | undefined
type IndeterHTMLElement = HTMLElement | null
export interface ChildElementInfo {
@ -8,6 +11,7 @@ export interface ChildElementInfo {
anchorCoordinate?: Coordinate
callback?: Function
isWidget?: boolean
order?: number
}
interface ClickInfo {
pageX: number
@ -36,11 +40,11 @@ export interface Coordinate {
export enum STATUS {
STATIC = 0, // 静置
OPEN_FORDER = 1, // 开启文件夹状态
SWIPE = 1 << 1, // 划动
DRAG = 1 << 2, // 拖动元素
TURN = 1 << 3, // 翻页
SORT = 1 << 4, // 整理
OPEN_FORDER = 1 << 5, // 开启文件夹状态
}
/**
@ -63,7 +67,7 @@ export interface DragAndDrop {
timeout: Timer
// The child that was tapped/clicked
child: any
child?: GaiaContainerChild | GaiaContainerFolder
// Whether a drag is active
active: boolean

8
src/components/grid-container/element-exchange-strategy.ts
View File

@ -18,6 +18,14 @@ type PlacedRecorder = {
* 6. 寻位方向并非绝对方向，以移动网格数量最短为优先条件
* 7. 为满足规则5，规则6的寻位方向变化以顺时针方向转变，如：上左 → 上右 → 下右 → 下左
* 8. 图标节点被另一个图标节点挤占位置时，仅能再去挤占相邻网格的图标的位置（即不允许挤占上下相邻图标）
* 9. TODO: 图标被小组件挤压后,优先考虑集体移动到组件的相同的某一个方向上
* 10. TODO: 被挤占位置时, 比起就近原则再去挤占其他组件或图标的位置, 应优先寻找可放置的空白位置
*
* 核心准则:
* 1. TODO: 应尽量保证用户放置图标、小组件、应用文件夹的页面、位置不被扰乱
* 2. 因拖拽、放置的自由度很高, 应尽量降低用户对一次误操作或者一次不满意操作的纠错成本
* 3. TODO: 非必要不应挪动其他与本次换位无关的元素的位置
* 4. 除非被主动拖拽, 元素不允许任何跨页放置行为(很明显地, 进行一次跨页操作所需要的时间成本和操作成本远大于页内操作)
*/
enum Directions {

144
src/components/grid-container/gaia-container-child.ts
View File

@ -1,5 +1,6 @@
import GaiaContainer from './container'
import {Coordinate, DragInType} from './contianer-interface'
import GaiaContainerFolder from './gaia-container-folder'
/**
* Grid 布局
* 组件属性：
@ -33,6 +34,7 @@ export default class GaiaContainerChild {
manager: GaiaContainer
_isStatic: boolean | string
anchorCoordinate: Coordinate
name!: string
// 静态位置
_lastMasterTop: number | null = null
_lastMasterLeft: number | null = null
@ -57,9 +59,17 @@ export default class GaiaContainerChild {
_shadowContainer!: HTMLElement
// 建立时间, 用于区分不同小组件
createTime: number = new Date().getTime()
// 正在纳入文件夹中
bringIntoForlder: boolean = false
// 在文件夹中的顺序
_order: number = -1
// 用于记录将会与其进行交换的占位DOM
_switch?: HTMLElement
// 越界标志
breakout: boolean = false
constructor(
element: HTMLElement | undefined,
element: HTMLElement = document.createElement('div'),
row: number = 1,
column: number = 1,
anchorCoordinate: Coordinate | undefined,
@ -75,6 +85,11 @@ export default class GaiaContainerChild {
this._isStatic = false
this.anchorCoordinate = anchorCoordinate ?? {...defaultCoordinate} // 两种屏幕方向的锚固坐标
this.markDirty()
/* test */
this.name =
// @ts-ignore
element.firstElementChild?.name ||
element.dataset.id?.replace(/http:\/\/(.*).localhost.*/, '$1')
}
rotate() {
@ -116,7 +131,14 @@ export default class GaiaContainerChild {
return this.manager.pagination
}
throw new Error(`Can not find pagination`)
return 0
}
get folderPagination() {
if (this.position == 'folder') {
return +this.master.parentElement!.dataset.pagination!
}
return 0
}
get position() {
@ -125,11 +147,27 @@ export default class GaiaContainerChild {
const inPage = this.master.parentElement.classList.contains(
'gaia-container-page'
)
return inPage ? 'page' : 'folder'
const inFolder = this.master.parentElement.classList.contains('folder-page')
if (inPage) {
return 'page'
} else if (inFolder) {
return 'folder'
} else {
return 'other'
}
}
get folder(): GaiaContainerFolder | undefined {
if (this.isFolder || this.position !== 'folder') {
return undefined
}
return this.manager.folders[this.folderName]
}
get folderName() {
const name = this.master.parentElement?.dataset.name
const name = this.isFolder
? this.name
: this.master.parentElement?.dataset.name
return name || ''
}
@ -162,10 +200,16 @@ export default class GaiaContainerChild {
this._isStatic = !!value
}
// 是否是页面最后一个组件
get isTail() {
const page = this.manager.pages[this.pagination]
return page.lastChild === this.master
/* 获取应用图标所在文件夹中的顺序 */
get order() {
return this._order
}
set order(value) {
if (value >= 0) {
this._order = value
this.master.style.order = String(value)
}
}
/**
@ -367,17 +411,29 @@ export default class GaiaContainerChild {
* Synchronise the container's transform with the position of the master.
*/
synchroniseContainer(isActive = false) {
if (this.bringIntoForlder) {
// 正处于纳入文件夹动画中, 不进行归位操作
return true
}
let master = this.master
let container = this.container
let top = master.offsetTop
let left = master.offsetLeft
const position = this.position
// 左上角的 GridID
const gridId =
position == 'page'
? this.manager.getGridIdByCoordinate(left, top, this.pagination)
: this.manager.getFolderGridIdByCoordinate(left, top, this.pagination)
if (gridId !== this.curGridId) {
let gridId!: number
if (position == 'page') {
gridId = this.manager.getGridIdByCoordinate(left, top, this.pagination)
} else if (position == 'folder') {
// gridId = this.manager.getFolderOrderByCoordinate(
// left,
// top,
// this.pagination
// )
} else {
return true
}
if (position == 'page' && gridId !== this.curGridId) {
// this.manager.recordCoordinate(this, this.pagination, gridId)
if (!this.manager.recordCoordinate(this, this.pagination, gridId)) {
/* 未能成功记录，记录位置已有其他子节点，需要清空位置记录并重新归位 */
@ -399,9 +455,71 @@ export default class GaiaContainerChild {
this._lastElementHeight = this.element?.offsetHeight!
}
const crossResult = this.manager.exchangeStratege.handleCrossField(
this.curGridId,
this
)
this.breakout = crossResult.bottom || crossResult.right
!isActive &&
!this.breakout &&
!this.container.classList.contains('dragging') &&
(container.style.transform = 'translate(' + left + 'px, ' + top + 'px)')
return true
}
/**
* 放入文件夹时, 该方法将根据参考元素, 将该子节点移动并缩放至参考元素的位置与大小
* @param element 参考元素
* @param pagination 参考元素所在页面
* @returns
*/
synchroniseWithRefElement(element: HTMLElement, pagination: number) {
return new Promise((res) => {
let {top, left, height, width} = element.getBoundingClientRect()
const curTop = +window
.getComputedStyle(this.container)
.top.replace('px', '')
const curLeft = +window
.getComputedStyle(this.container)
.left.replace('px', '')
if (this.manager.openedFolder?.element.compareDocumentPosition(element)) {
// 放入了打开状态的文件夹
left = left - curLeft - this.manager.left
} else {
// 放入了关闭状态的文件夹
// 水平偏移量 = 参考元素与屏幕左侧距离 - 主屏容器左边距 + 参考元素所在页面的offsetLeft
left =
left -
curLeft -
this.manager.left +
this.manager.pages[pagination].offsetLeft
}
top = top - curTop - this.manager.top
this.container.classList.add('bring-into-folder')
this.container.style.height = height + 'px'
this.container.style.width = width + 'px'
this.container.style.transform =
'translate(' + left + 'px, ' + top + 'px)'
this.bringIntoForlder = true
let timer!: number
const transitionCB = (evt: any) => {
if (evt?.pseudoElement) {
return
}
this.container.classList.remove('bring-into-folder')
this.container.classList.add('folder-item')
this.bringIntoForlder = false
clearTimeout(timer)
this.container.removeEventListener('transitionend', transitionCB)
res(void 0)
}
this.container.addEventListener('transitionend', transitionCB)
timer = window.setTimeout(transitionCB, 300)
})
}
}

199
src/components/grid-container/gaia-container-folder-page.ts Normal file
View File

@ -0,0 +1,199 @@
import GaiaContainerChild from './gaia-container-child'
import GaiaContainerFolder from './gaia-container-folder'
/**
* 主屏文件夹分页,其中的每个分页仅允许存在16个图标
*/
export default class GaiaContainerFolderPageManager {
folder!: GaiaContainerFolder
_container!: HTMLElement
observerCallback: MutationCallback
constructor(folder: GaiaContainerFolder) {
this.folder = folder
this.observerCallback = (mutations: MutationRecord[]) => {
for (const mutation of mutations) {
const pagination = this.pages.indexOf(mutation.target as HTMLElement)
const curPage = mutation.target as HTMLElement
let nextPage = curPage.nextSibling
if (pagination == -1) return
if (
nextPage instanceof HTMLElement &&
nextPage.children.length &&
curPage.children.length < 16
) {
curPage.appendChild(nextPage.children[0])
} else if (curPage.children.length > 16) {
if (!nextPage) {
nextPage = this.addPage()
}
;(nextPage as HTMLElement).insertAdjacentElement(
'afterbegin',
[...curPage.children].pop()!
)
}
}
}
}
get container() {
if (!this._container) {
this._container = document.createElement('div')
this._container.classList.add('folder-page-container')
this.addPage()
}
return this._container
}
get curPagination() {
const pageWidth = this.pages[0].offsetWidth
const scrollLeft = this.container.scrollLeft
let pagination = Math.round(scrollLeft / pageWidth)
if (pagination >= this.pages.length) {
pagination = this.pages.length - 1
} else if (pagination < 0) {
pagination = 0
}
return pagination
}
get curPage() {
return this.pages[this.curPagination]
}
_canScrollByFinger: boolean = true
get canScrollByFinger() {
return this._canScrollByFinger
}
set canScrollByFinger(value: boolean) {
this._canScrollByFinger = value
if (value) {
this.container.style.removeProperty('overflow')
this.container.style.removeProperty('scroll-snap-type')
} else {
this.container.style.overflow = 'hidden'
this.container.style.scrollSnapType = 'unset'
}
}
pages: HTMLElement[] = []
addPage = () => {
const page = document.createElement('div')
page.classList.add('folder-page')
page.dataset.name = this.folder.name
page.dataset.pagination = String(this.pages.length)
this.pages.push(page)
this.container.appendChild(page)
this.observe(page)
return page
}
observe = (page: HTMLElement) => {
let observe = new MutationObserver(this.observerCallback)
observe.observe(page, {
childList: true,
subtree: true,
})
}
/* 分页监听器, 监听子节点是否不满/溢出16个图标, 并作出相应对策 */
pageMutation(page: HTMLElement) {
let observe = new MutationObserver(this.observerCallback)
observe.observe(page, {
childList: true,
})
}
deletePage = () => {
const page = this.pages[this.pages.length - 1]
if (page && page.children.length == 0) {
this.pages.pop()
page.remove()
}
}
/* 控制添加图标进文件夹图标动画 */
children: GaiaContainerChild[] = []
appendIcon = (
child: GaiaContainerChild,
{dropChild, order}: {dropChild?: GaiaContainerChild; order?: number} = {}
) => {
order = order ?? dropChild?.order ?? this.children.length
const pagination = Math.floor(order / 16)
child.order = order
this.children.push(child)
let page = this.pages[pagination]
if (!page) {
page = this.pages[this.pages.length - 1]
}
// 生成一个用于占位的交换DOM, 为即将进入文件夹的图标充当一个定位和确定尺寸的标靶
const tail = document.createElement('div')
tail.classList.add('tail')
tail.style.order = String(order)
// 记录此交换DOM
child._switch = tail
if (dropChild) {
page.insertBefore(tail, dropChild._switch ?? dropChild.master)
} else {
page.appendChild(tail)
}
child.synchroniseWithRefElement(tail, this.folder.pagination).then(() => {
// 纳入文件夹动画完成,将图标真正放入文件夹
// this.folder.movein(child.master)
child.bringIntoForlder = false
// child.synchroniseContainer()
child.container.style.transform =
'translate(' + tail.offsetLeft + 'px, ' + tail.offsetTop + 'px)'
page.replaceChild(child.master, tail)
// 移除交换标志及交换DOM
child._switch = undefined
tail.remove()
child.container.style.removeProperty('height')
child.container.style.removeProperty('width')
})
}
/* 滑动到指定分页 */
scrollToPage(pagination: number, behavior: 'smooth' | 'auto' = 'smooth') {
if (pagination >= this.pages.length) {
pagination = this.pages.length - 1
} else if (pagination < 0) {
pagination = 0
}
const firstLeft = this.pages[0].offsetLeft
const left = this.pages[pagination].offsetLeft - firstLeft
this.container.scrollTo({left, behavior})
}
/* 隐藏指定分页前的页面 */
hideTo?: number
hidePages(to: number) {
if (to >= this.pages.length) to = this.pages.length - 1
this.hideTo = to
this.pages.find((page, pagination) => {
if (pagination < to) {
page.style.width = '0'
}
return pagination == to
})
}
/* 显示所有隐藏分页并滑动到未被隐藏的页面 */
showPages() {
this.pages.find((page, pagination) => {
page.style.removeProperty('width')
return pagination == this.hideTo
})
this.scrollToPage(this.hideTo ?? 0, 'auto')
this.hideTo = undefined
}
}

453
src/components/grid-container/gaia-container-folder.ts
View File

@ -1,5 +1,7 @@
import GaiaContainerChild from './gaia-container-child'
import GaiaContainer from './container'
import GaiaContainerFolderPageManager from './gaia-container-folder-page'
import {STATUS} from './contianer-interface'
/**
* 主屏文件夹，只允许 App 图标进入，且文件夹内图标数量大于2时才稳定存在
@ -10,10 +12,9 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
name: string
// 图标 TagName
iconName: string = 'gaia-app-icon'
// 图标隐藏标题属性
hideAttrName = 'hide-subtitle'
// 文件夹子节点
_children: GaiaContainerChild[] = []
// _children: GaiaContainerChild[] = []
_children: Set<GaiaContainerChild> = new Set()
isFolder: boolean = true
// 文件夹开启状态
_status: number = 0
@ -25,9 +26,12 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
// 文件夹名元素
_title: HTMLElement | null = null
// 开启文件夹动画计时器
openTimer: number | undefined = undefined
openTimer?: number
transitionTimer?: number
// 子节点坐标
childCoordinate: {[gridId: number]: GaiaContainerChild | undefined}[] = [{}]
// 分页管理器
pageManager!: GaiaContainerFolderPageManager
gridHeight: number = 0
gridWidth: number = 0
@ -43,11 +47,13 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
'GaiaContainerFolder',
GaiaContainerFolder.shadowStyle()
)
this.pageManager = new GaiaContainerFolderPageManager(this)
this.container.addEventListener('touchstart', this)
this.container.addEventListener('touchmove', this)
this.container.addEventListener('touchend', this)
this.container.addEventListener('click', this)
this.element.dataset.name = this.name
this.master.className = 'folder initializing'
this.master.className = 'folder initializing closed'
this.master.id = this._id
this.master.addEventListener(
'animationend',
@ -68,26 +74,20 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
resize() {
let element = this.element
const firstChild = [...this._children][0]
this._lastElementTop = element?.offsetTop!
this._lastElementLeft = element?.offsetLeft!
this.gridHeight = this._children[0]._lastElementHeight!
this.gridWidth = this._children[0]._lastElementWidth!
this.gridHeight = firstChild._lastElementHeight!
this.gridWidth = firstChild._lastElementWidth!
}
get element() {
if (
!this._element ||
!this._element.classList.contains('gaia-container-folder')
!this._element.classList.contains('folder-page-container')
) {
const element = document.createElement('div')
element.classList.add('gaia-container-folder')
this.folderIconWidth = this.manager.gridWidth * 0.6
element.style.width = this.folderIconWidth + 'px'
element.style.height = this.folderIconWidth + 'px'
this._element = element
this._element = this.pageManager.container
}
return this._element
}
@ -107,6 +107,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
if (!this._container) {
// Create container
let container = document.createElement('div')
container.appendChild(this.pageManager.container)
container.classList.add('gaia-container-child')
container.style.position = 'absolute'
container.style.top = '0'
@ -115,8 +116,6 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
container.style.height = this.manager.gridHeight + 'px'
container.style.width = this.manager.gridWidth + 'px'
container.appendChild(this.element) //this.element是div.icon-container
this._container = container
this.master.appendChild(container)
}
@ -124,15 +123,13 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
}
get children() {
return this._children.map((child) => child.element)
return [...this._children].map((child) => child.element)
}
showIconsSubtitle(element: HTMLElement) {
element.removeAttribute(this.hideAttrName)
}
hideIconsSubtitle(element: HTMLElement) {
element.setAttribute(this.hideAttrName, '')
get folderPage() {
return Math.round(
this.element.scrollLeft / this.pageManager.pages[0].offsetWidth
)
}
/**
@ -140,7 +137,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
* @param {HTMLElement} element master
*/
movein(element: HTMLElement) {
let target
let target!: GaiaContainerChild
let targetIndex
this.manager._children.forEach((child: GaiaContainerChild, i) => {
if (child.master == element) {
@ -161,46 +158,107 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
targetIndex++
}
typeof targetIndex == 'number' &&
this.manager._children.splice(targetIndex, 1)
typeof targetIndex == 'number' && this.manager._children.delete(target)
}
addAppIcon(element: HTMLElement, shouldOpen = false) {
const child = this.manager.getChildByElement(element)
addAppIcon(child: GaiaContainerChild, order?: number) {
// addAppIcon(child: GaiaContainerChild, order?: number) {
this.manager._children.delete(child)
this._children.add(child!)
this._children.push(child!)
if (!this._status) {
this.hideIconsSubtitle(child?.element!)
const prePagination = child.pagination
const preGrid = child.curGridId
delete this.manager.childCoordinate[prePagination]?.[preGrid]
if (order !== undefined) {
this.insertAppIcon(child, order, 'immediately')
} else {
this.showIconsSubtitle(child?.element!)
}
if (!this._status && shouldOpen) {
this.suspendElement.push(element)
this.open()
} else {
this.movein(element)
this.element.appendChild(element)
this.pageManager.appendIcon(child)
}
}
removeAppIcon(node: GaiaContainerChild | HTMLElement) {
let removeChild = node
if (node instanceof HTMLElement) {
this._children = this._children.filter((child) => {
const arr = [...this._children].filter((child) => {
if (child.master == node && child.container == node) {
removeChild = child
return false
}
return true
})
this._children = new Set(arr)
}
if (!removeChild) return null
this.showIconsSubtitle((removeChild as GaiaContainerChild).element!)
this.manager._children.push(removeChild as GaiaContainerChild)
this.manager._children.add(removeChild as GaiaContainerChild)
return removeChild
}
insertTimer?: number
insertAppIcon(
child: GaiaContainerChild,
order: number,
mode: 'delay' | 'immediately' = 'delay'
) {
clearTimeout(this.insertTimer)
this.insertTimer = undefined
if (!child) return
const dropChild = this.getCurrentChildByOrder(order)
const exchange = (_: number) => {
if (dropChild) {
this.pageManager.appendIcon(child, {dropChild, order})
const children = [...this._children]
const index = children.indexOf(dropChild)
children.splice(index, 0, child)
this._children = new Set(children)
} else {
this.pageManager.appendIcon(child, {order})
}
this.synchroniseChildren()
}
if (mode == 'immediately') {
exchange(order)
} else {
this.insertTimer = window.setTimeout(() => exchange(order), 300)
}
}
sortOrder() {
;[...this._children].forEach((child, i) => {
child.order = i
})
}
synchroniseChildren() {
this._children.forEach((child) => {
child.synchroniseContainer()
})
}
/* 向后寻找顺序最接近传入的order的子节点 */
getCurrentChildByOrder(order: number) {
for (const child of [...this._children]) {
if (child.order >= order) {
return child
}
}
return undefined
}
getChildByOrder(order: number) {
for (const child of [...this._children]) {
if (child.order == order) {
return child
}
}
return undefined
}
/**
* 检查文件夹名是否存在，存在则替换成 ‘新建文件夹n’ 样式的名字，
* 未传入文件名，则生成一个不重复的文件夹名
@ -226,17 +284,29 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
open() {
if (this._status) return
this._status = 1
this.manager.dispatchEvent(
new CustomEvent('open-folder', {
detail: {
folder: this,
},
})
)
this.manager.classList.remove('open-folder')
this.manager.status |= STATUS.OPEN_FORDER
this.master.classList.add('openning')
this._children.forEach((child) => this.showIconsSubtitle(child.element!))
this.manager.status |= 16
this.master.classList.add('active')
this.master.classList.remove('closed')
this.manager.openedFolder = this
this.container.style.height = '100%'
this.container.style.width = '100%'
this.pageManager.hidePages(this.folderPage)
this.container.style.height = '100vh'
this.container.style.width = '100vw'
// this.container.style.top = -this.manager.top + 'px'
// this.container.style.left = -this.manager.left + 'px'
this.master.style.setProperty('z-index', String(10))
this.container.style.removeProperty('--grid-height')
this.container.style.removeProperty('--grid-width')
this.element.addEventListener('transitionend', this.openTransition)
this.container.addEventListener('transitionend', this.openTransition)
}
openTransition = (evt: TransitionEvent) => {
@ -248,28 +318,36 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
}
if (
this._children[this._children.length - 1].master.compareDocumentPosition(
evt.target as HTMLElement
) & 16
[...this._children][
this._children.size - 1
].master.compareDocumentPosition(evt.target as HTMLElement) & 16
) {
return
}
this.pageManager.showPages()
this.container.style.setProperty('--folder-element-left', '0px')
this.container.style.setProperty('--folder-element-top', '0px')
this.openTimer = window.setTimeout(() => {
this._children.forEach((child) => child.synchroniseContainer())
this.master.classList.remove('openning')
this.master.classList.add('opened')
// 图标换位时可以进行动画
this.transitionTimer = window.setTimeout(
() => this.master.classList.add('transition'),
50
)
let element = this.suspendElement.shift()
while (element) {
this.movein(element)
// this.movein(element)
this.element.appendChild(element)
element = this.suspendElement.shift()
}
this.gridHeight = this._children[0]._lastElementHeight!
this.gridWidth = this._children[0]._lastElementWidth!
const firstChild = [...this._children][0]
this.gridHeight = firstChild._lastElementHeight!
this.gridWidth = firstChild._lastElementWidth!
})
this.element.removeEventListener('transitionend', this.openTransition)
this.container.removeEventListener('transitionend', this.openTransition)
}
/**
@ -279,28 +357,42 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
close() {
if (!this._status) return
clearTimeout(this.openTimer)
this._children = this._children.filter((child) => {
clearTimeout(this.transitionTimer)
this.manager.dispatchEvent(
new CustomEvent('close-folder', {
detail: {
folder: this,
},
})
)
this.manager.classList.remove('open-folder')
this.master.classList.remove('active')
this.manager.status &= ~STATUS.OPEN_FORDER
const arr = [...this._children].filter((child) => {
if (child.container.classList.contains('dragging')) {
this.removeAppIcon(child)
return false
} else {
this.hideIconsSubtitle(child.element!)
return true
}
})
this._children = new Set(arr)
this.pageManager.scrollToPage(0)
this.master.classList.remove('openning')
this.master.classList.remove('opened')
this.master.classList.remove('transition')
this.master.classList.add('closing')
this.element.removeEventListener('transitionend', this.openTransition)
this.container.removeEventListener('transitionend', this.openTransition)
this.manager.status &= ~16
this.manager.openedFolder = null
this.container.style.height = this.manager.gridHeight + 'px'
this.container.style.width = this.manager.gridWidth + 'px'
this.element.addEventListener(
this.container.addEventListener(
'transitionend',
() => {
this.pageManager.scrollToPage(0)
this._status = 0
this._children.forEach((child) => child.synchroniseContainer())
this.container.style.setProperty(
@ -313,18 +405,20 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
)
this.master.style.removeProperty('z-index')
this.master.classList.remove('closing')
if (this._children.length <= 1) {
this.master.classList.add('closed')
if (this._children.size <= 1) {
this.destroy()
}
this.gridHeight = this._children[0]._lastElementHeight!
this.gridWidth = this._children[0]._lastElementWidth!
const firstChild = [...this._children][0]
this.gridHeight = firstChild._lastElementHeight!
this.gridWidth = firstChild._lastElementWidth!
},
{once: true}
)
}
destroy() {
if (this._children.length > 0) {
if (this._children.size > 0) {
return
}
const {height: originHeight, width: originWidth} =
@ -332,9 +426,9 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
const {height: targetHeight, width: targetWidth} =
this.element.getBoundingClientRect()
const child = this._children[0]
const master = this._children[0].master
this.manager._children.push(child)
const child = [...this._children][0]
const master = child.master
this.manager._children.add(child)
const childContainer = master.querySelector(
'.gaia-container-child'
) as HTMLElement
@ -346,7 +440,6 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
// nextTick，用以配合 originXXX 形成动画
window.setTimeout(() => {
this.showIconsSubtitle(this._children[0].element!)
this.element.style.height = targetHeight + 'px'
this.element.style.width = targetWidth + 'px'
})
@ -380,28 +473,35 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
handleEvent(evt: TouchEvent) {
switch (evt.type) {
// @ts-ignore
case 'touchend':
if (this._status && evt.target === this.container) {
this.close()
}
case 'click':
if (
this._status &&
(evt.target as HTMLElement).tagName !== 'SITE-ICON'
(this._status &&
(evt.target as HTMLElement).classList.contains('folder-page')) ||
(evt.target as HTMLElement).classList.contains('gaia-container-child')
) {
evt.preventDefault()
evt.stopImmediatePropagation()
}
break
case 'touchstart':
case 'touchmove':
if (
this._status &&
(evt.target as HTMLElement).tagName !== 'SITE-ICON'
) {
evt.preventDefault()
evt.stopImmediatePropagation()
case 'touchend':
if (this._status && evt.target === this.container) {
this.close()
}
break
// @ts-ignore
case 'touchmove':
// if (
// this.manager._dnd.child &&
// !this.manager._dnd.child.isFolder &&
// this.manager._dnd.child.element?.compareDocumentPosition?.(
// evt.target as HTMLElement
// )! & 16
// ) {
// evt.preventDefault()
// evt.stopImmediatePropagation()
// }
case 'touchstart':
break
}
}
@ -410,60 +510,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
::slotted(.gaia-container-child) {
box-sizing: content-box;
}
::slotted(.gaia-container-folder) {
display: grid;
position: unset;
grid-template-rows: repeat(4, 25%);
grid-template-columns: repeat(4, 25%);
grid-auto-flow: row dense;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0px 3px rgba(255,255,255,0.5);
border-radius: 5px;
transition: transform 0.2s, box-shadow 0.2s, height 0.2s, width 0.2s !important;
}
::slotted(.gaia-container-folder::before) {
display: block;
position: absolute;
content: '';
height: 100%;
width: 100%;
z-index: -1;
pointer-events: none;
transform: scale(1);
}
::slotted(.gaia-container-folder) .gaia-container-child {
height: 12.5% !important;
width: 12.5% !important;
}
::slotted(.gaia-container-folder) gaia-app-icon {
display: block;
width: 100%;
}
::slotted(.gaia-container-folder::after) {
content: '';
z-index: 99;
height: 100%;
width: 100%;
pointer-events: all;
position: absolute;
}
::slotted(.folder.opened) .gaia-container-folder::after {
pointer-events: none;
z-index: -1;
}
::slotted( ) .folder:not(.opened) .gaia-container-folder .gaia-container-child:not(.dragging) {
position: unset !important;
}
::slotted(.folder.openning) .gaia-container-folder {
position: relative;
}
::slotted(.folder.initializing) .gaia-container-child {
position: unset !important;
transform: unset !important;
@ -477,23 +524,11 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
animation: folder-fadein 0.3s cubic-bezier(.08,.82,.17,1);
}
::slotted(.folder.opened) .gaia-container-folder {
z-index: -1;
}
::slotted(.folder) .container-master {
pointer-events: none;
}
::slotted(.folder.opened) .container-master {
pointer-events: unset;
}
::slotted(.destroying) .gaia-container-folder {
display: block;
}
::slotted(.destroying) .gaia-container-folder::before {
transform-origin: bottom right;
transform: scale(0);
transition: transform 0.5s;
pointer-events: all;
}
::slotted(.destroying) .folder-title {
opacity: 0;
@ -508,24 +543,22 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
margin-top: 3px;
opacity: 1;
transition: opacity 0.2s;
transform: translateY(calc(var(--icon-size) / 2));
}
::slotted(.folder.closing) .folder-title,
::slotted(.folder.opened) .folder-title,
::slotted(.folder.openning) .folder-title {
opacity: 0;
}
::slotted(.gaia-container-folder) .gaia-container-child {
display: unset !important;
}
::slotted(.folder.openning) > .gaia-container-child,
::slotted(.folder.opened) > .gaia-container-child {
left: calc(var(--pagination) * var(--page-width)) !important;
transform: translate(0) !important;
transform: translate(calc(var(--container-left) * -1), calc(var(--container-top) * -1)) !important;
}
::slotted(.folder.openning) > .gaia-container-child {
transform: translate(0) !important;
transform: translate(calc(var(--container-left) * -1), calc(var(--container-top) * -1)) !important;
}
::slotted(.folder.openning) .gaia-container-child {
transition: left 0.2s, height 0.2s, width 0.2s !important;
@ -540,14 +573,6 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
transition: unset !important;
}
::slotted(.folder.opened) .gaia-container-folder,
::slotted(.folder.openning) .gaia-container-folder {
height: 50% !important;
max-height: 500px;
width: 50% !important;
max-width: 500px;
}
::slotted(.scaling) {
transform-origin: top left;
position: unset !important;
@ -558,6 +583,106 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
opacity: 0;
}
/* 文件夹名(文件夹图标下) */
::slotted(.folder-title) {
height: 0;
margin-top: 1.5vmin !important;
color: var(--icon-font-color, #fff);
font-weight: 600;
}
/* 文件夹容器 */
::slotted(.folder-page-container) {
/* 占图标的实心区域的长宽 */
height: calc(var(--icon-size) * 0.75);
width: calc(var(--icon-size) * 0.75);
background-color: rgba(245, 245, 245, 0.3);
border-radius: 1.67vmin;
box-shadow: 0 0 0 0.66vmin rgba(245, 245, 245, 0.3);
scroll-snap-type: x mandatory;
padding: 0.2vmin;
}
::slotted(.folder.closing) .folder-page-container,
::slotted(.folder.opened) .folder-page-container,
::slotted(.folder.openning) .folder-page-container {
transition: height 0.2s, width 0.2s, transform !important;
background-color: unset;
box-shadow: unset;
}
::slotted(.folder.opened) .folder-page-container,
::slotted(.folder.openning) .folder-page-container {
/* 处于开启状态或开启中状态时, 文件夹分页的高度随之变化 */
height: 74.67vmin;
width: 73.33vmin;
max-height: 80vh;
}
/* 文件夹分页 */
::slotted(.folder-page) {
display: inline flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
justify-content: flex-start;
align-content: flex-start;
vertical-align: top;
margin-right: 0.2vmin;
pointer-events: none;
scroll-snap-align: center;
/* 在图标状态下, 分页会冒出来莫名其妙的空白区域,需要隐藏 */
overflow: hidden;
}
::slotted(.folder.opened) .folder-page {
margin-right: 0;
pointer-events: auto;
}
/* 位于文件夹内的子元素占位节点 */
::slotted(.folder-page) .container-master,
::slotted(.folder-page) .tail {
height: 25% !important;
width: 25% !important;
}
/* 非开启的文件夹中, 子图标都不采用绝对定位和位移样式 */
::slotted(.folder.openning) .folder-page .container-master:not(.switch) .gaia-container-child,
::slotted(.folder.closing) .folder-page .container-master:not(.switch) .gaia-container-child,
::slotted(.folder.closed) .folder-page .container-master:not(.switch) .gaia-container-child {
position: unset !important;
transform: unset !important;
}
::slotted(.folder) .folder-page .gaia-container-child {
transition: unset !important;
}
::slotted(.folder.opened.transition) .folder-page .gaia-container-child {
transition: transform 0.2s !important;
}
/* 文件夹下的子图标容器因为没采用绝对定位, 高宽跟随其 master 变化 */
::slotted(.folder) .folder-item{
height: 100% !important;
width: 100% !important;
}
/* 开启状态下, 子图标因为采用了绝对定位, 为了大小不变, 更改高宽 */
::slotted(.folder.opened) .folder-item {
height: 25% !important;
width: 25% !important;
}
::slotted(.folder-page-container) {
position: absolute;
transform: translate(0, 0);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
::slotted(.folder-page-container.opened) {
height: 50vh;
width: 50vw;
}
@keyframes folder-fadein {
0% {
opacity: 0;

114
src/components/icon-added-container/added-container-child.ts Normal file
View File

@ -0,0 +1,114 @@
export default class AddedContainerChild {
_element: HTMLElement | null
_container: HTMLElement | null = null
_master: HTMLElement | null = null
_lastElementWidth: number | null = null
_lastElementHeight: number | null = null
_lastElementDisplay: string | null = null
_lastElementOrder: string | null = null
_lastMasterTop: number | null = null
_lastMasterLeft: number | null = null
// 状态计时器
removed: number | undefined = undefined
added: number | undefined = undefined
constructor(element: HTMLElement | null) {
this._element = element
this.markDirty()
}
get element() {
return this._element
}
/**
* The element that will contain the child element and control its position.
*/
get container() {
if (!this._container) {
// Create container
let container = document.createElement('div')
container.classList.add('gaia-container-child')
container.style.position = 'absolute'
container.style.top = '0'
container.style.left = '0'
container.appendChild(this.element as HTMLElement) //this.element是div.icon-container
this._container = container
}
return this._container
}
/**
* The element that will be added to the container that will
* control the element's transform.
*/
get master() {
if (!this._master) {
// Create master
let master = document.createElement('div')
master.style.visibility = 'hidden'
this._master = master
}
return this._master
}
/**
* Clears any cached style properties. To be used if elements are
* manipulated outside of the methods of this object.
*/
markDirty() {
this._lastElementWidth = null
this._lastElementHeight = null
this._lastElementDisplay = null
this._lastElementOrder = null
this._lastMasterTop = null
this._lastMasterLeft = null
}
/**
* Synchronise the size of the master with the managed child element.
*/
synchroniseMaster() {
let master = this.master
let element = this.element
let style = window.getComputedStyle(element as HTMLElement)
let display = style.display
let order = style.order
let width = (element as HTMLElement).offsetWidth
let height = (element as HTMLElement).offsetHeight
if (
this._lastElementWidth !== width ||
this._lastElementHeight !== height ||
this._lastElementDisplay !== display ||
this._lastElementOrder !== order
) {
this._lastElementWidth = width
this._lastElementHeight = height
this._lastElementDisplay = display
this._lastElementOrder = order
master.style.width = width + 'px'
master.style.height = height + 'px'
master.style.display = display
master.style.order = order
}
}
/**
* Synchronise the container's transform with the position of the master.
*/
synchroniseContainer() {
let master = this.master
let container = this.container
let top = master.offsetTop
let left = master.offsetLeft
if (this._lastMasterTop !== top || this._lastMasterLeft !== left) {
this._lastMasterTop = top
this._lastMasterLeft = left
container.style.transform = 'translate(' + left + 'px, ' + top + 'px)'
}
}
}

1146
src/components/icon-added-container/icon-added-container.ts Normal file
View File

File diff suppressed because it is too large Load Diff

1
src/components/icon-added-container/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './icon-added-container.js'

22
src/components/icon-added-container/package.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "@star-web-components/icon-added-container",
"version": "0.0.1",
"description": "",
"type": "module",
"main": "./index.js",
"module": "./index.js",
"exports": {
".": {
"default": "./index.js"
},
"./index": {
"default": "./index.js"
},
"./icon-added-container.js": {
"default": "./icon-added-container.js"
},
"./package.json": "./package.json"
},
"author": "",
"license": "ISC"
}

8
src/components/icon-added-container/tsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"composite": true,
"rootDir": "../../"
},
"include": ["*.ts"]
}

4
src/components/icon-control-bar/icon-control-bar.ts
View File

@ -32,7 +32,7 @@ export class IconControlBar extends LitElement {
@property({type: Boolean}) active = false
@property({type: Boolean}) longPress = false
@property({type: Boolean}) isNameShown = false
@state({}) timer!: NodeJS.Timeout
@state({}) timer!: number
@query('.more-info-icon') moreInfoIcon!: HTMLDivElement
@query('.icon-button') iconBtn!: HTMLDivElement
@ -249,7 +249,7 @@ export class IconControlBar extends LitElement {
return
}
this.timer = setTimeout(() => {
this.timer = window.setTimeout(() => {
this.dispatchEvent(
new CustomEvent('icon-control-bar-touch-start', {
detail: {

19
src/components/icon-unadd-container/container-style.ts Normal file
View File

@ -0,0 +1,19 @@
import {css} from 'lit'
export default css`
:host {
// position: relative;
display: flex;
flex: 1;
margin-bottom: 0;
width: 100%;
height: 100%;
}
::slotted(.gaia-container-child):not(.dragging):not(.added) {
transition: transform 0.2s;
}
::slotted(.gaia-container-child.dragging) {
z-index: 1;
will-change: transform;
}
`

1013
src/components/icon-unadd-container/icon-unadd-container.ts Normal file
View File

File diff suppressed because it is too large Load Diff

1
src/components/icon-unadd-container/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './icon-unadd-container.js'

22
src/components/icon-unadd-container/package.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "@star-web-components/icon-unadd-container",
"version": "0.0.1",
"description": "",
"type": "module",
"main": "./index.js",
"module": "./index.js",
"exports": {
".": {
"default": "./index.js"
},
"./index": {
"default": "./index.js"
},
"./icon-unadd-container.js": {
"default": "./icon-unadd-container.js"
},
"./package.json": "./package.json"
},
"author": "",
"license": "ISC"
}

8
src/components/icon-unadd-container/tsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"composite": true,
"rootDir": "../../"
},
"include": ["*.ts"]
}

114
src/components/icon-unadd-container/unadd-container-child.ts Normal file
View File

@ -0,0 +1,114 @@
export default class UnaddContainerChild {
_element: HTMLElement | null
_container: HTMLElement | null = null
_master: HTMLElement | null = null
_lastElementWidth: number | null = null
_lastElementHeight: number | null = null
_lastElementDisplay: string | null = null
_lastElementOrder: string | null = null
_lastMasterTop: number | null = null
_lastMasterLeft: number | null = null
// 状态计时器
removed: number | undefined = undefined
added: number | undefined = undefined
constructor(element: HTMLElement | null) {
this._element = element
this.markDirty()
}
get element() {
return this._element
}
/**
* The element that will contain the child element and control its position.
*/
get container() {
if (!this._container) {
// Create container
let container = document.createElement('div')
container.classList.add('gaia-container-child')
container.style.position = 'absolute'
container.style.top = '0'
container.style.left = '0'
container.appendChild(this.element as HTMLElement) //this.element是div.icon-container
this._container = container
}
return this._container
}
/**
* The element that will be added to the container that will
* control the element's transform.
*/
get master() {
if (!this._master) {
// Create master
let master = document.createElement('div')
master.style.visibility = 'hidden'
this._master = master
}
return this._master
}
/**
* Clears any cached style properties. To be used if elements are
* manipulated outside of the methods of this object.
*/
markDirty() {
this._lastElementWidth = null
this._lastElementHeight = null
this._lastElementDisplay = null
this._lastElementOrder = null
this._lastMasterTop = null
this._lastMasterLeft = null
}
/**
* Synchronise the size of the master with the managed child element.
*/
synchroniseMaster() {
let master = this.master
let element = this.element
let style = window.getComputedStyle(element as HTMLElement)
let display = style.display
let order = style.order
let width = (element as HTMLElement).offsetWidth
let height = (element as HTMLElement).offsetHeight
if (
this._lastElementWidth !== width ||
this._lastElementHeight !== height ||
this._lastElementDisplay !== display ||
this._lastElementOrder !== order
) {
this._lastElementWidth = width
this._lastElementHeight = height
this._lastElementDisplay = display
this._lastElementOrder = order
master.style.width = width + 'px'
master.style.height = height + 'px'
master.style.display = display
master.style.order = order
}
}
/**
* Synchronise the container's transform with the position of the master.
*/
synchroniseContainer() {
let master = this.master
let container = this.container
let top = master.offsetTop
let left = master.offsetLeft
if (this._lastMasterTop !== top || this._lastMasterLeft !== left) {
this._lastMasterTop = top
this._lastMasterLeft = left
container.style.transform = 'translate(' + left + 'px, ' + top + 'px)'
}
}
}

92
src/components/toast/style.ts Normal file
View File

@ -0,0 +1,92 @@
import {css} from 'lit'
export default css`
/** Host
---------------------------------------------------------*/
:host {
position: fixed;
left: 50%;
bottom: 13.33vh;
border-radius: var(--auto-20px);
max-width: 70%;
text-align: center;
z-index: 100;
color: var(--font-main-black, #262626);
overflow: hidden;
transform: translateX(-50%);
}
/** Inner
---------------------------------------------------------*/
.inner {
display: none;
}
.inner.visible {
display: block;
}
/**
---------------------------------------------------------*/
.bread {
max-width: 600px;
margin: 0 auto;
padding: var(--auto-24px) var(--auto-32px);
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
transform: translateY(100%);
font-size: var(--auto-26px);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: var(--font-normal-color);
background: var(--base-normal-bgc);
transition: color 0.2s, background 0.2s;
}
.bread.animate-in {
animation-name: gaia-toast-enter;
animation-fill-mode: forwards;
animation-duration: 300ms;
}
.bread.animate-out {
animation-name: gaia-toast-leave;
animation-duration: 600ms;
transform: translateY(0%);
}
@keyframes gaia-toast-enter {
0% {
transform: translateY(100%);
opacity: 0;
}
40% {
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
@keyframes gaia-toast-leave {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@media screen and (orientation: landscape) {
:host {
}
}
`

246
src/components/toast/toast.ts
View File

@ -1,6 +1,9 @@
import {html, LitElement, CSSResultArray, TemplateResult} from 'lit'
import {html, CSSResultArray} from 'lit'
import {customElement, property, query, state} from 'lit/decorators.js'
import {sharedStyles} from './toast-styles.js'
import {autoPxStyle} from '../base/auto-px-style'
import {StarBaseElement} from '../base/star-base-element.js'
import style from './style'
export const toastVariants: ToastVariants[] = [
'negative',
@ -18,17 +21,110 @@ export type ToastVariants =
| 'warning'
| ''
enum Direction {
top,
bottom,
}
interface Options {
[prop: string]: string | boolean | undefined
direction?: keyof typeof Direction
icon?: boolean
close?: boolean
verline?: boolean
do?: boolean
information: string
}
// BUG: 该组件存在 UI 隐患, 因为弹出键盘时, 使用该组件的应用将会被键盘挤压窗口
// 导致该组件位置会被推至屏幕上方, 无法避免; 即便不被挤压(如Homescreen), 仍会
// 存在被键盘遮挡的情况, 依旧无法避免
@customElement('star-toast')
export class StarToast extends LitElement {
export class StarToast extends StarBaseElement {
public static override get styles(): CSSResultArray {
return [sharedStyles]
return [style, sharedStyles, autoPxStyle]
}
/* 暂时更改使用: start */
constructor(options: Options) {
super()
Object.assign(this, options)
document.body.appendChild(this)
this.appended = true
}
@property()
public direction: keyof typeof Direction = 'bottom'
@property({type: Number})
get timeout() {
return Number(this.getAttribute('timeout')) || 3000
}
set timeout(value) {
let current = Number(this.getAttribute('timeout'))
if (current == value) {
return
} else if (!value) {
this.removeAttribute('timeout')
} else {
this.setAttribute('timeout', String(value))
}
}
appended: boolean = false
onAnimateOutEnd = (_: any) => {}
hideTimeout?: number
@query('.inner') inner!: HTMLElement
@query('.bread') bread!: HTMLElement
show = () => {
if (!this.appended) {
document.body.appendChild(this)
this.appended = true
}
this.open = true
this.bread.removeEventListener('animationend', this.onAnimateOutEnd)
clearTimeout(this.hideTimeout)
this.inner.classList.add('visible')
this.bread.classList.remove('animate-out')
this.bread.classList.add('animate-in')
this.hideTimeout = window.setTimeout(this.hide.bind(this), this.timeout)
}
hide = () => {
clearTimeout(this.hideTimeout)
this.open = false
this.bread.classList.remove('animate-in')
this.bread.classList.add('animate-out')
this.bread.removeEventListener('animationend', this.onAnimateOutEnd)
this.onAnimateOutEnd = () => {
this.bread.removeEventListener('animationend', this.onAnimateOutEnd)
this.bread.classList.remove('animate-out')
this.inner.classList.remove('visible')
}
this.bread.addEventListener('animationend', this.onAnimateOutEnd)
}
render() {
return html`
<div class="inner">
<div class="bread">${this.information}</div>
</div>
`
}
/* 暂时更改使用: end */
@state()
public open: Boolean = false
@property({type: Number})
private timeout = 5000
// @property({type: Number})
// private timeout = 5000
@property({type: String})
public variant: ToastVariants = ''
@ -52,77 +148,77 @@ export class StarToast extends LitElement {
@property({type: String})
public buttonName = ''
private renderIcon(): TemplateResult {
switch (this.variant) {
case 'positive':
return html`
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 36 36"
role="img"
fill="white"
aria-hidden="false"
aria-label="Success"
>
<path
d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10.666 9.08L16.018 27.341a1.208 1.208 0 0 1-.875.461c-.024.002-.05.002-.073.002a1.2 1.2 0 0 1-.85-.351l-7.784-7.795a1.2 1.2 0 0 1 0-1.698l1.326-1.325a1.201 1.201 0 0 1 1.695 0l5.346 5.347L25.314 8.473A1.203 1.203 0 0 1 27 8.263l1.455 1.133a1.205 1.205 0 0 1 .211 1.684Z"
></path>
</svg>
`
case 'warning':
case 'info':
return html`
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 36 36"
role="img"
fill="white"
aria-hidden="false"
aria-label="Information"
>
<path
d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm-.3 4.3a2.718 2.718 0 0 1 2.864 2.824 2.664 2.664 0 0 1-2.864 2.863 2.705 2.705 0 0 1-2.864-2.864A2.717 2.717 0 0 1 17.7 6.3ZM22 27a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-6h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v9h1a1 1 0 0 1 1 1Z"
></path>
</svg>
`
case 'error':
case 'negative':
default:
return html`
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 36 36"
role="img"
fill="white"
aria-hidden="false"
aria-label="Error"
>
<path
d="M17.127 2.579.4 32.512A1 1 0 0 0 1.272 34h33.456a1 1 0 0 0 .872-1.488L18.873 2.579a1 1 0 0 0-1.746 0ZM20 29.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Zm0-6a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Z"
></path>
</svg>
`
}
}
// private renderIcon() {
// switch (this.variant) {
// case 'positive':
// return html`
// <svg
// xmlns="http://www.w3.org/2000/svg"
// viewBox="0 0 36 36"
// role="img"
// fill="white"
// aria-hidden="false"
// aria-label="Success"
// >
// <path
// d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10.666 9.08L16.018 27.341a1.208 1.208 0 0 1-.875.461c-.024.002-.05.002-.073.002a1.2 1.2 0 0 1-.85-.351l-7.784-7.795a1.2 1.2 0 0 1 0-1.698l1.326-1.325a1.201 1.201 0 0 1 1.695 0l5.346 5.347L25.314 8.473A1.203 1.203 0 0 1 27 8.263l1.455 1.133a1.205 1.205 0 0 1 .211 1.684Z"
// ></path>
// </svg>
// `
// case 'warning':
// case 'info':
// return html`
// <svg
// xmlns="http://www.w3.org/2000/svg"
// viewBox="0 0 36 36"
// role="img"
// fill="white"
// aria-hidden="false"
// aria-label="Information"
// >
// <path
// d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm-.3 4.3a2.718 2.718 0 0 1 2.864 2.824 2.664 2.664 0 0 1-2.864 2.863 2.705 2.705 0 0 1-2.864-2.864A2.717 2.717 0 0 1 17.7 6.3ZM22 27a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-6h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v9h1a1 1 0 0 1 1 1Z"
// ></path>
// </svg>
// `
// case 'error':
// case 'negative':
// default:
// return html`
// <svg
// xmlns="http://www.w3.org/2000/svg"
// viewBox="0 0 36 36"
// role="img"
// fill="white"
// aria-hidden="false"
// aria-label="Error"
// >
// <path
// d="M17.127 2.579.4 32.512A1 1 0 0 0 1.272 34h33.456a1 1 0 0 0 .872-1.488L18.873 2.579a1 1 0 0 0-1.746 0ZM20 29.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Zm0-6a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Z"
// ></path>
// </svg>
// `
// }
// }
protected override render(): TemplateResult {
return html`
<div open=${this.open} class="toast" id="toast" variant=${this.variant}>
<div>
<icon icon=${this.icon}>${this.renderIcon()}</icon>
</div>
<div>
<span class="text">${this.information}</span>
<do do=${this.do} wraping>Do Something</do>
</div>
<verline verline=${this.verline}></verline>
<close close=${this.close} @click=${this.closeToast}>X</close>
</div>
<div>
<do do="true" click @click=${this.toastChange}>${this.buttonName}</do>
</div>
`
}
// protected override render() {
// return html`
// <div open=${this.open} class="toast" id="toast" variant=${this.variant}>
// <div>
// <icon icon=${this.icon}>${this.renderIcon()}</icon>
// </div>
// <div>
// <span class="text">${this.information}</span>
// <do do=${this.do} wraping>Do Something</do>
// </div>
// <verline verline=${this.verline}></verline>
// <close close=${this.close} @click=${this.closeToast}>X</close>
// </div>
// <div>
// <do do="true" click @click=${this.toastChange}>${this.buttonName}</do>
// </div>
// `
// }
@query('#toast')
toast!: HTMLElement

2
src/components/toast/tsconfig.json
View File

@ -4,5 +4,5 @@
"composite": true,
"rootDir": "../../"
},
"include": ["*.ts"]
"include": ["*.ts", "../base/*.ts"]
}

7
src/components/ul/ul.css.ts
View File

@ -64,4 +64,11 @@ export default css`
footer a:visited {
color: blue;
}
/* Just for test */
@media (prefers-color-scheme: dark) {
ul {
background-color: var(--base-black);
}
}
`

20
src/test/panels/animation/animation.ts Normal file
View File

@ -0,0 +1,20 @@
import {html, LitElement} from 'lit'
import {customElement, query} from 'lit/decorators.js'
@customElement('panel-animation')
export class PanelAnimation extends LitElement {
@query('#container') container!: HTMLElement
@query('star-battery') battery!: HTMLElement
render() {
return html`
<star-animation></star-animation>
`
}
}
declare global {
interface HTMLElementTagNameMap {
'panel-animation': PanelAnimation
}
}

843
src/test/panels/animation/show-styles.ts Normal file
View File

@ -0,0 +1,843 @@
import {css, CSSResult} from 'lit'
export const sharedStyles: CSSResult = css`
div {
width: 50px;
height: 50px;
margin: 30px;
text-align: center;
background: linear-gradient(
137.64deg,
#f5f0f5 0%,
#fafafa 20.46%,
#d5daf2 90.45%
);
}
.expansion {
position: absolute;
left: 0px;
top: 280px;
}
.fadeIn {
position: absolute;
left: 0px;
top: 450px;
}
.fadeOut {
position: absolute;
left: 0px;
top: 600px;
}
.open {
position: absolute;
left: 0px;
top: 750px;
}
.close {
position: absolute;
left: 0px;
top: 950px;
}
.moveX {
position: absolute;
left: 0px;
top: 1250px;
}
.moveY {
position: absolute;
left: 0px;
top: 1650px;
}
.appear {
position: absolute;
left: 0px;
top: 2050px;
}
.disappear {
position: absolute;
left: 0px;
top: 2400px;
}
.size {
position: absolute;
left: 0px;
top: 2600px;
}
.title {
font-size: 20px;
margin: 30px;
}
.press {
animation: press 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
background: none;
}
.free {
animation: free 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
background: none;
position: absolute;
top: 30px;
left: 100px;
}
.background_v1 {
animation: background_v1 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
background: none;
position: absolute;
top: 30px;
left: 200px;
}
.background_v2 {
animation: background_v2 1s cubic-bezier(0, 0.35, 0.2, 1) infinite;
background: none;
position: absolute;
top: 30px;
left: 300px;
}
.contraction_v1 {
animation: contraction_v1 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
}
.contraction_v2 {
animation: contraction_v2 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 170px;
left: 100px;
}
.contraction_v3 {
animation: contraction_v3 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 170px;
left: 200px;
}
.contraction_v4 {
animation: contraction_v4 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 170px;
left: 300px;
}
.contraction_v5 {
animation: contraction_v5 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 170px;
left: 400px;
}
.contraction_v6 {
animation: contraction_v6 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 170px;
left: 500px;
}
.contraction_v7 {
animation: contraction_v7 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 170px;
left: 600px;
}
.contraction_v8 {
animation: contraction_v8 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 170px;
left: 700px;
}
.contraction_v9 {
animation: contraction_v9 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 170px;
left: 800px;
}
.expansion_v1 {
animation: expansion_v1 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
}
.expansion_v2 {
animation: expansion_v2 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 100px;
}
.expansion_v3 {
animation: expansion_v3 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 200px;
}
.expansion_v4 {
animation: expansion_v4 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 300px;
}
.expansion_v5 {
animation: expansion_v5 450ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 400px;
}
.fadeIn_v1 {
animation: fadeIn_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
}
.fadeIn_v2 {
animation: fadeIn_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 100px;
}
.fadeIn_v3 {
animation: fadeIn_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 200px;
}
.fadeIn_v4 {
animation: fadeIn_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 300px;
}
.fadeIn_v5 {
animation: fadeIn_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 400px;
}
.fadeIn_v6 {
animation: fadeIn_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 500px;
}
.fadeIn_v7 {
animation: fadeIn_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 600px;
}
.fadeIn_v8 {
animation: fadeIn_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 700px;
}
.fadeIn_v9 {
animation: fadeIn_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 800px;
}
.fadeIn_v10 {
animation: fadeIn_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 900px;
}
.fadeIn_v11 {
animation: fadeIn_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 1000px;
}
.fadeOut_v1 {
animation: fadeOut_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
}
.fadeOut_v2 {
animation: fadeOut_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 100px;
}
.fadeOut_v3 {
animation: fadeOut_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 200px;
}
.fadeOut_v4 {
animation: fadeOut_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 300px;
}
.fadeOut_v5 {
animation: fadeOut_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 400px;
}
.fadeOut_v6 {
animation: fadeOut_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 500px;
}
.fadeOut_v7 {
animation: fadeOut_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 600px;
}
.fadeOut_v8 {
animation: fadeOut_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 700px;
}
.fadeOut_v9 {
animation: fadeOut_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 800px;
}
.fadeOut_v10 {
animation: fadeOut_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 900px;
}
.fadeOut_v11 {
animation: fadeOut_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
background: black;
left: 1000px;
}
.open_v1 {
animation: open_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
}
.open_v2 {
animation: open_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 100px;
}
.open_v3 {
animation: open_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 200px;
}
.open_v4 {
animation: open_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 300px;
box-sizing: border-box;
border: 0px solid red;
}
.open_v5 {
animation: open_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 400px;
background: none;
font-size: none;
color: none;
}
.open_v6 {
animation: open_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 500px;
}
.open_v7 {
animation: open_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 600px;
background: black;
}
.open_v8 {
animation: open_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 800px;
}
.open_v9 {
animation: open_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 900px;
}
.close_v1 {
animation: close_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
}
.close_v2 {
animation: close_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 100px;
}
.close_v3 {
animation: close_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 200px;
}
.close_v4 {
animation: close_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 300px;
box-sizing: border-box;
border: 0px solid red;
}
.close_v5 {
animation: close_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 400px;
background: none;
font-size: none;
color: none;
}
.close_v6 {
animation: close_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 500px;
}
.close_v7 {
animation: close_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 600px;
background: black;
}
.close_v8 {
animation: close_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 800px;
}
.moveX_v1 {
animation: moveX_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
}
.moveX_v2 {
animation: moveX_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 200px;
}
.moveX_v3 {
animation: moveX_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 300px;
}
.moveX_v4 {
animation: moveX_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 100px;
left: 100px;
}
.moveX_v5 {
animation: moveX_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 100px;
left: 200px;
}
.moveX_v6 {
animation: moveX_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 100px;
left: 400px;
}
.moveX_v7 {
animation: moveX_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 100px;
left: 500px;
}
.moveX_v8 {
animation: moveX_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 200px;
left: 900px;
}
.moveX_v9 {
animation: moveX_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 100px;
left: 700px;
}
.moveX_v10 {
animation: moveX_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
top: 300px;
left: 0px;
}
.moveY_v1 {
animation: moveY_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
}
.moveY_v2 {
animation: moveY_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 100px;
top: 170px;
}
.moveY_v3 {
animation: moveY_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 200px;
}
.moveY_v4 {
animation: moveY_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 300px;
}
.moveY_v5 {
animation: moveY_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 400px;
}
.moveY_v6 {
animation: moveY_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 500px;
top: 100px;
}
.moveY_v7 {
animation: moveY_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 600px;
}
.moveY_v8 {
animation: moveY_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 700px;
top: 100px;
}
.appear_v1 {
animation: appear_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
}
.appear_v2 {
animation: appear_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 100px;
}
.appear_v3 {
animation: appear_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 200px;
}
.appear_v4 {
animation: appear_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 300px;
}
.appear_v5 {
animation: appear_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 400px;
}
.appear_v6 {
animation: appear_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 500px;
}
.appear_v7 {
animation: appear_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 600px;
}
.appear_v8 {
animation: appear_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 700px;
}
.appear_v9 {
animation: appear_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 800px;
}
.appear_v10 {
animation: appear_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 900px;
}
.appear_v11 {
animation: appear_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1000px;
}
.appear_v12 {
animation: appear_v12 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1100px;
}
.appear_v13 {
animation: appear_v13 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1200px;
}
.appear_v14 {
animation: appear_v14 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1300px;
}
.appear_v15 {
animation: appear_v15 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1400px;
}
.appear_v16 {
animation: appear_v16 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1600px;
}
.appear_v17 {
animation: appear_v17 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1700px;
}
.appear_v18 {
animation: appear_v18 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1800px;
}
.disappear_v1 {
animation: disappear_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
}
.disappear_v2 {
animation: disappear_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 100px;
}
.disappear_v3 {
animation: disappear_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 200px;
}
.disappear_v4 {
animation: disappear_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 300px;
}
.disappear_v5 {
animation: disappear_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 400px;
}
.disappear_v6 {
animation: disappear_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 500px;
}
.disappear_v7 {
animation: disappear_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 600px;
}
.disappear_v8 {
animation: disappear_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 700px;
}
.disappear_v9 {
animation: disappear_v9 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 800px;
}
.disappear_v10 {
animation: disappear_v10 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 900px;
}
.disappear_v11 {
animation: disappear_v11 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1000px;
}
.disappear_v12 {
animation: disappear_v12 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1100px;
}
.disappear_v13 {
animation: disappear_v13 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1200px;
}
.disappear_v14 {
animation: disappear_v14 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1300px;
}
.disappear_v15 {
animation: disappear_v15 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1400px;
}
.disappear_v16 {
animation: disappear_v16 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1500px;
}
.disappear_v17 {
animation: disappear_v17 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1600px;
}
.disappear_v18 {
animation: disappear_v18 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1700px;
}
.disappear_v19 {
animation: disappear_v19 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1800px;
}
.size_v1 {
animation: size_v1 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
}
.size_v2 {
animation: size_v2 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 150px;
}
.size_v3 {
animation: size_v3 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 300px;
}
.size_v4 {
animation: size_v4 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 900px;
}
.size_v5 {
animation: size_v5 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1400px;
}
.size_v6 {
animation: size_v6 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1500px;
}
.size_v7 {
animation: size_v7 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 1600px;
}
.size_v8 {
animation: size_v8 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
position: absolute;
left: 2000px;
}
`

23
src/test/panels/battery-square/battery-square.ts
View File

@ -1,4 +1,4 @@
import {html, LitElement, CSSResultArray} from 'lit'
import {html, LitElement, CSSResultArray, css} from 'lit'
import {customElement} from 'lit/decorators.js'
import {sharedStyles} from '../../../components/battery-square/battery-square-styles'
@ -6,15 +6,26 @@ import {sharedStyles} from '../../../components/battery-square/battery-square-st
export class PanelBatterysquare extends LitElement {
render() {
return html`
<star-batterysquare></star-batterysquare>
<!-- <star-batterysquare blue></star-batterysquare> -->
<!-- <star-batterysquare deep></star-batterysquare> -->
<!-- <star-batterysquare deep blue></star-batterysquare> -->
<div id="container">
<star-batterysquare></star-batterysquare>
</div>
`
}
public static override get styles(): CSSResultArray {
return [sharedStyles]
return [
sharedStyles,
css`
:host {
height: 100vh;
width: 100vw;
}
#container {
height: 31.01vh;
width: 26.145vw;
}
`,
]
}
}

10
src/test/panels/battery/battery.ts
View File

@ -8,9 +8,9 @@ export class PanelBattery extends LitElement {
@query('star-battery') battery!: HTMLElement
render() {
return html`
<star-battery charge></star-battery>
<!-- <star-battery deep></star-battery> -->
<!-- <star-battery charge></star-battery> -->
<div id="container">
<star-battery charge></star-battery>
</div>
`
}
@ -29,8 +29,8 @@ export class PanelBattery extends LitElement {
width: 100vw;
}
#container {
height: 100vh;
width: 100vw;
height: 60vh;
width: 50vw;
}
`,
]

74
src/test/panels/button/button.ts
View File

@ -64,6 +64,11 @@ export class PanelButton extends LitElement {
<star-button type="normal" variant="default" size="small" label="普通按钮"></star-button>
<star-button type="normal" variant="warn" size="small" label="警告按钮"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" theme="dark" variant="primary" size="small" label="强调按钮"></star-button>
<star-button type="normal" theme="dark" variant="default" size="small" label="普通按钮"></star-button>
<star-button type="normal" theme="dark" variant="warn" size="small" label="警告按钮"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" variant="primary" size="middle" label="强调按钮"></star-button>
<star-button type="normal" variant="default" size="middle" label="普通按钮"></star-button>
@ -95,9 +100,9 @@ export class PanelButton extends LitElement {
<star-button type="normal" variant="warn" label="警告按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" variant="primary" width="100px" size="small" label="自定义长度100px(最小为200px)"></star-button>
<star-button type="normal" variant="primary" width="400px" size="middle" label="自定义长度400px"></star-button>
<star-button type="normal" variant="primary" width="600px" size="large" label="自定义长度600px(最小为520px)"></star-button>
<star-button type="normal" variant="primary" style="width:100px" size="small" label="自定义长度100px(最短为208px)"></star-button>
<star-button type="normal" variant="primary" style="width:400px" size="middle" label="自定义长度400px"></star-button>
<star-button type="normal" variant="primary" style="width:600px" size="large" label="自定义长度600px(最长为520px)"></star-button>
</star-li>
</star-ul>
@ -118,11 +123,21 @@ export class PanelButton extends LitElement {
<star-button type="pure" variant="primary" size="large" icon="delete"></star-button>
<star-button type="pure" variant="primary" size="large" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug"></star-button>
<star-button type="pure" theme="dark" variant="primary" size="large" icon="delete"></star-button>
<star-button type="pure" theme="dark" variant="primary" size="large" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="default" size="extralarge" icon="bug"></star-button>
<star-button type="pure" variant="default" size="extralarge" icon="delete"></star-button>
<star-button type="pure" variant="default" size="extralarge" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="bug"></star-button>
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="delete"></star-button>
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="primary" size="small" icon="bug" label="添"></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="添" disabled></star-button>
@ -159,6 +174,25 @@ export class PanelButton extends LitElement {
<star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug" label="添加组件"></star-button>
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" icon="bug" size="small" label="最短"></star-button>
<star-button type="pure" icon="bug" size="middle" label="最短"></star-button>
<star-button type="pure" icon="bug" size="large" label="最短"></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" icon="bug" size="small" label="最长最长最长最长最长最长最长最长最长"></star-button>
<star-button type="pure" icon="bug" size="middle" label="最长最长最长最长最长最长最长"></star-button>
<star-button type="pure" icon="bug" size="large" label="最长最长最长最长最长最长最长"></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" icon="bug" style="width:100px" size="small" label="自定义长度100px(最短为200px)"></star-button>
<star-button type="pure" icon="bug" style="width:400px" size="middle" label="自定义长度400px"></star-button>
<star-button type="pure" icon="bug" style="width:600px" size="large" label="自定义长度600px(最长为520px)"></star-button>
</star-li>
</star-ul>
<h3>使用场景:对话框底部按钮</h3>
@ -175,6 +209,24 @@ export class PanelButton extends LitElement {
<star-button type="text" variant="warn" label="警告按钮"></star-button>
<star-button type="text" variant="warn" label="警告按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" theme="dark" variant="primary" label="强调按钮"></star-button>
<star-button type="text" theme="dark" variant="primary" label="强调按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" theme="dark" variant="default" label="普通按钮"></star-button>
<star-button type="text" theme="dark" variant="default" label="普通按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" theme="dark" variant="warn" label="警告按钮"></star-button>
<star-button type="text" theme="dark" variant="warn" label="警告按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" variant="primary" label="最长最长最长最长最长最长最长"></star-button>
<star-button type="text" variant="primary" style="width:100px" label="自定义长度100px"></star-button>
<star-button type="text" variant="primary" style="width:400px" label="自定义长度400px"></star-button>
<star-button type="text" variant="primary" style="width:600px" label="自定义长度600px(最长为520px)"></star-button>
</star-li>
</star-ul>
<h3>Icon类型按钮使用场景:在base色纯背景上的裸图标按钮</h3>
@ -187,6 +239,10 @@ export class PanelButton extends LitElement {
<star-button type="icon" icon="bug" size="middle"></star-button>
<star-button type="icon" icon="bug" size="middle" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="icon" theme="dark" icon="bug" size="middle"></star-button>
<star-button type="icon" theme="dark" icon="bug" size="middle" disabled></star-button>
</star-li>
</star-ul>
<h3>Ghost类型按钮使用场景:拍照、摄像应用，多端协同拍照控制界面</h3>
@ -203,6 +259,10 @@ export class PanelButton extends LitElement {
<star-button type="ghost" icon="bug" size="large"></star-button>
<star-button type="ghost" icon="bug" size="large" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="ghost" theme="dark" icon="bug" size="large"></star-button>
<star-button type="ghost" theme="dark" icon="bug" size="large" disabled></star-button>
</star-li>
</star-ul>
<star-ul type="onlyheader" title="Special类型按钮">
@ -210,6 +270,10 @@ export class PanelButton extends LitElement {
<star-button type="special" special="corner-marker"></star-button>
<star-button type="special" special="corner-marker" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="special" theme="dark" special="corner-marker"></star-button>
<star-button type="special" theme="dark" special="corner-marker" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="special" special="hang-up" size="middle"></star-button>
<star-button type="special" special="hang-up" size="middle" disabled></star-button>
@ -226,6 +290,10 @@ export class PanelButton extends LitElement {
<star-button type="special" special="go-back"></star-button>
<star-button type="special" special="go-back" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="special" theme="dark" special="go-back"></star-button>
<star-button type="special" theme="dark" special="go-back" disabled></star-button>
</star-li>
</star-ul>
<star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮">

71
src/test/panels/dialog/dialog.ts Normal file
View File

@ -0,0 +1,71 @@
import {html, LitElement} from 'lit'
import {customElement} from 'lit/decorators.js'
import {
StarAlertDialog,
StarConfirmDialog,
StarPromptDialog,
} from '../../../components/dialog'
import '../../../components/button'
@customElement('panel-dialog')
export class PanelDialog extends LitElement {
render() {
return html`
<star-button
type="normal"
variant="primary"
size="large"
label="弹出警告弹窗"
@click=${this.showAlert}
></star-button>
<star-button
type="normal"
variant="primary"
size="large"
label="弹出确认弹窗"
@click=${this.showConfirm}
></star-button>
<star-button
type="normal"
variant="primary"
size="large"
label="弹出输入弹窗"
@click=${this.showPrompt}
></star-button>
`
}
showAlert() {
const starAlertDialog = new StarAlertDialog({
text: '请先填写个人信息',
onconfirm: () => console.log('确认'),
})
console.log(starAlertDialog)
this.shadowRoot?.appendChild(starAlertDialog)
}
showConfirm() {
const starConfirmDialog = new StarConfirmDialog({
title: '确定要离开吗？',
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starConfirmDialog)
}
showPrompt() {
const starPromptDialog = new StarPromptDialog({
title: '请输入你的账号：',
value: '8位数字',
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starPromptDialog)
}
}
declare global {
interface HTMLElementTagNameMap {
'panel-dialog': PanelDialog
}
}

36
src/test/panels/iconfont/REMEAD.md Normal file
View File

@ -0,0 +1,36 @@
# iconfont字体库
## 介绍
iconfont字体库支持多色图标字体，可通过Unicode、fontclass和symbol三种方式进行引用。
## iconfont使用方法
> Unicode 引用
```
第一步：设置@font-face
@font-face {
font-family: "iconfont-signal";
src:
url('iconfont-signal.ttf?t=1667956429504') format('truetype');
}
第二步：定义样式，如
.iconfont {
font-family: "iconfont-signal" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
第三步：挑选相应图标并获取字体编码，应用于页面（字体编码可在iconfont.json文件中查询）
<span class="iconfont">&#x33;</span>
> Symbol使用方式
在需要图标处通过xlink方式链接到ffont.symbol.svg，以‘#ffont’+图表名称 的方式调用对应图标
```
<svg class="icon" aria-hidden="true">
<use xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-QQ"></use>
</svg>
```

663
src/test/panels/iconfont/ffont.symbol.svg Normal file
View File

@ -0,0 +1,663 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" style="display:none;">
<symbol viewBox="0 0 32 32" id="ffont-QQ">
<g clip-path="url(#clip0_2073_78773)">
<path d="M25.31 18.4088C24.8345 16.9311 24.2877 15.6892 23.4466 13.6567C23.5774 8.31804 21.283 4 15.9987 4C10.655 4 8.41117 8.40428 8.55383 13.6567C7.70977 15.692 7.1659 16.9254 6.69037 18.4088C5.67989 21.5568 6.00681 22.8591 6.25646 22.8878C6.79142 22.9511 8.33984 20.5189 8.33984 20.5189C8.33984 21.9276 9.08879 23.7647 10.7115 25.09C9.9269 25.3228 8.16449 25.9495 8.58355 26.6366C8.92236 27.1915 14.4146 26.9902 15.9987 26.8178C17.5828 26.9902 23.0751 27.1915 23.4139 26.6366C23.833 25.9524 22.0676 25.3228 21.2859 25.09C22.9087 23.7618 23.6576 21.9247 23.6576 20.5189C23.6576 20.5189 25.206 22.9511 25.741 22.8878C25.9936 22.8562 26.3205 21.5539 25.31 18.4088Z" fill="#4D4D4D"></path>
</g>
<defs>
<clippath id="clip0_2073_78773">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-add">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 17V26H17V17H26V15H17V6H15V15H6V17H15Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-airplane">
<path opacity="0.95" fill-rule="evenodd" clip-rule="evenodd" d="M10 22L13 26L14 25L13 21L17.474 16.707L22 25L23 24L21 13L25.4171 8.77022C26.1108 8.07653 26.2233 7.12661 25.5483 6.45167C24.8734 5.77673 23.9235 5.88922 23.2298 6.58291L19 11L8 9L7 10L15.293 14.526L11 19L7 18L6 19L10 22Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-alarm-clock">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.6377V17.6667L20.5 21L21.5 19.5L17 16.7377V10.6377H15Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 17C8 21.4524 11.5476 25 16 25C20.4524 25 24 21.4524 24 17C24 12.5476 20.4524 9 16 9C11.5476 9 8 12.5476 8 17ZM16 27C10.443 27 6 22.557 6 17C6 11.443 10.443 7 16 7C21.557 7 26 11.443 26 17C26 22.557 21.557 27 16 27Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3594 10.7684L20.3594 5.76838L21.6397 4.23193L27.6397 9.23193L26.3594 10.7684Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.64062 10.7684L11.6406 5.76838L10.3603 4.23193L4.36026 9.23193L5.64062 10.7684Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-alarm-stop">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4C15.4477 4 15 4.44772 15 5V6C11.6863 6 8.99985 8.68629 8.99985 12V17.7458C8.99985 18.2376 8.85429 18.7183 8.58152 19.1275L7.66395 20.5038C6.95264 21.5708 7.71751 23 8.99985 23H22.9999C24.2822 23 25.0471 21.5708 24.3358 20.5038L23.4182 19.1275C23.1454 18.7183 22.9999 18.2376 22.9999 17.7458V12C22.9999 8.68634 20.3136 6.00008 17 6V5C17 4.44772 16.5523 4 16 4ZM14.9999 8H16.9999C19.209 8 20.9999 9.79086 20.9999 12V17.7458C20.9999 18.6324 21.2623 19.4992 21.7541 20.2369L22.2628 21H9.73689L10.2456 20.2369C10.7374 19.4992 10.9999 18.6324 10.9999 17.7458V12C10.9999 9.79086 12.7907 8 14.9999 8Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.1001 6.20006C23.5419 6.53143 23.6314 7.15823 23.3001 7.60006L9.80006 25.6001C9.46869 26.0419 8.84189 26.1314 8.40006 25.8001C7.95823 25.4687 7.86869 24.8419 8.20006 24.4001L21.7001 6.40006C22.0314 5.95823 22.6582 5.86869 23.1001 6.20006Z" fill="#333333"></path>
<path d="M13 24C13 25.6569 14.3431 27 16 27C17.6569 27 19 25.6569 19 24H13Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-alarm">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4C15.4477 4 15 4.44772 15 5V6C11.6863 6 8.99985 8.68629 8.99985 12V17.7458C8.99985 18.2376 8.85429 18.7183 8.58152 19.1275L7.66395 20.5038C6.95264 21.5708 7.71751 23 8.99985 23H22.9999C24.2822 23 25.0471 21.5708 24.3358 20.5038L23.4182 19.1275C23.1454 18.7183 22.9999 18.2376 22.9999 17.7458V12C22.9999 8.68634 20.3136 6.00008 17 6V5C17 4.44772 16.5523 4 16 4ZM14.9999 8H16.9999C19.209 8 20.9999 9.79086 20.9999 12V17.7458C20.9999 18.6324 21.2623 19.4992 21.7541 20.2369L22.2628 21H9.73689L10.2456 20.2369C10.7374 19.4992 10.9999 18.6324 10.9999 17.7458V12C10.9999 9.79086 12.7907 8 14.9999 8Z" fill="#333333"></path>
<path d="M13 24C13 25.6569 14.3431 27 16 27C17.6569 27 19 25.6569 19 24H13Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-call">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4594 26.9915C25.636 26.9915 26.6187 24.0167 26.8226 23.3214C27.2199 21.9674 26.9115 21.7582 26.279 21.4498L22.1233 19.0397C21.7573 18.8253 20.9733 18.8096 20.6439 19.1181C20.3198 19.4265 20.0219 19.7664 19.7501 20.1323C19.4783 20.4931 19.1907 20.8329 18.8823 21.1413C18.5792 21.4498 18.323 21.6484 18.1348 21.6066C17.4657 21.455 15.3539 20.5924 12.8971 18.1352C10.3305 15.563 9.3948 13.4509 9.42617 12.902C9.43662 12.7085 9.57776 12.4576 9.8914 12.1544C10.1998 11.8511 10.5344 11.5636 10.9003 11.2918C11.2662 11.0199 11.7471 10.5494 11.9091 10.3925C12.2698 10.037 12.0816 8.82413 11.8621 8.4634L9.59867 4.75674C9.03412 3.75296 8.43298 3.94639 7.70639 4.21825C6.97979 4.49011 5.56842 5.32136 4.85751 6.54994C4.4916 7.18776 4.15705 8.32224 4.0316 9.54037C4.0316 9.56128 4.02637 9.58219 4.02637 9.60833C4.00024 10.5285 3.37819 14.6011 10.0221 21.0054C16.7287 27.4829 21.1667 26.9915 21.4594 26.9915Z" fill="#4D4D4D"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-close">
<g clip-path="url(#clip0_6482_261825)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L16 14.5858L24.2929 6.29289C24.6834 5.90237 25.3166 5.90237 25.7071 6.29289C26.0976 6.68342 26.0976 7.31658 25.7071 7.70711L17.4142 16L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L16 17.4142L7.70711 25.7071C7.31658 26.0976 6.68342 26.0976 6.29289 25.7071C5.90237 25.3166 5.90237 24.6834 6.29289 24.2929L14.5858 16L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6482_261825">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-fix-to-dock">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7003 16.81C21.0803 16.44 21.1003 15.85 20.7503 15.45C20.4003 15.06 19.8003 14.99 19.3703 15.3L19.2603 15.4L17.0103 17.61V6C17.0103 5.45 16.5503 5 15.9903 5C15.4203 5 14.9703 5.45 14.9703 6V17.58L12.7403 15.4C12.3903 15.05 11.8203 15 11.4103 15.3L11.3003 15.4C10.9403 15.75 10.9003 16.3 11.2003 16.7L11.3003 16.81L15.2803 20.71C15.6403 21.06 16.2003 21.1 16.6103 20.8L16.7203 20.71L20.7003 16.81Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C5.89543 12 5 12.8954 5 14V24C5 25.1046 5.89543 26 7 26H25C26.1046 26 27 25.1046 27 24V14C27 12.8954 26.1046 12 25 12H20V10H25C27.2091 10 29 11.7909 29 14V24C29 26.2091 27.2091 28 25 28H7C4.79086 28 3 26.2091 3 24V14C3 11.7909 4.79086 10 7 10H12V12H7Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 6 32" id="ffont-flow-down">
<path opacity="0.4" d="M2.8285 9.28583C2.90618 9.15636 3.09382 9.15636 3.1715 9.28583L5.81826 13.6971C5.89824 13.8304 5.80222 14 5.64676 14H0.353238C0.197779 14 0.101757 13.8304 0.181739 13.6971L2.8285 9.28583Z" fill="#333333"></path>
<path d="M2.8285 22.7142C2.90618 22.8436 3.09382 22.8436 3.1715 22.7142L5.81826 18.3029C5.89824 18.1696 5.80222 18 5.64676 18H0.353238C0.197779 18 0.101757 18.1696 0.181739 18.3029L2.8285 22.7142Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 6 32" id="ffont-flow-none">
<path opacity="0.4" d="M2.8285 9.28583C2.90618 9.15636 3.09382 9.15636 3.1715 9.28583L5.81826 13.6971C5.89824 13.8304 5.80222 14 5.64676 14H0.353238C0.197779 14 0.101757 13.8304 0.181739 13.6971L2.8285 9.28583Z" fill="#333333"></path>
<path opacity="0.4" d="M2.8285 22.7142C2.90618 22.8436 3.09382 22.8436 3.1715 22.7142L5.81826 18.3029C5.89824 18.1696 5.80222 18 5.64676 18H0.353238C0.197779 18 0.101757 18.1696 0.181739 18.3029L2.8285 22.7142Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 6 32" id="ffont-flow-up">
<path d="M2.8285 9.28583C2.90618 9.15636 3.09382 9.15636 3.1715 9.28583L5.81826 13.6971C5.89824 13.8304 5.80222 14 5.64676 14H0.353238C0.197779 14 0.101757 13.8304 0.181739 13.6971L2.8285 9.28583Z" fill="#333333"></path>
<path opacity="0.4" d="M2.8285 22.7142C2.90618 22.8436 3.09382 22.8436 3.1715 22.7142L5.81826 18.3029C5.89824 18.1696 5.80222 18 5.64676 18H0.353238C0.197779 18 0.101757 18.1696 0.181739 18.3029L2.8285 22.7142Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 6 32" id="ffont-flow-updown">
<path d="M2.8285 9.28583C2.90618 9.15636 3.09382 9.15636 3.1715 9.28583L5.81826 13.6971C5.89824 13.8304 5.80222 14 5.64676 14H0.353238C0.197779 14 0.101757 13.8304 0.181739 13.6971L2.8285 9.28583Z" fill="#333333"></path>
<path d="M2.8285 22.7142C2.90618 22.8436 3.09382 22.8436 3.1715 22.7142L5.81826 18.3029C5.89824 18.1696 5.80222 18 5.64676 18H0.353238C0.197779 18 0.101757 18.1696 0.181739 18.3029L2.8285 22.7142Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-hot-spot">
<path d="M7.76429 7.75C7.49142 7.75 7.23305 7.85499 7.03431 8.04661L7.03351 8.04738C4.91221 10.1108 3.75 12.8604 3.75 15.8057V15.817C3.75 18.7405 4.92372 21.4895 7.03304 23.5521L7.03431 23.5534C7.23305 23.745 7.49142 23.85 7.76429 23.85C8.04881 23.85 8.30724 23.7445 8.51655 23.5416C8.72401 23.3413 8.8217 23.0695 8.8217 22.7956C8.8217 22.511 8.70599 22.2461 8.51173 22.0444L8.50608 22.0387C6.79748 20.3749 5.86483 18.1622 5.86483 15.8057C5.86483 13.4378 6.79746 11.2253 8.50568 9.56163C8.70836 9.36596 8.8217 9.09667 8.8217 8.80436C8.8217 8.53173 8.72492 8.26118 8.51943 8.06117C8.31539 7.8512 8.0422 7.75 7.76429 7.75Z" fill="#4D4D4D"></path>
<path d="M24.2358 7.75C23.9556 7.75 23.6956 7.85265 23.4945 8.05813C23.2752 8.25918 23.1784 8.53202 23.1784 8.80436C23.1784 9.08897 23.2941 9.35385 23.4883 9.55556L23.494 9.56124C25.2025 11.225 26.1352 13.4376 26.1352 15.8057C26.1352 18.162 25.2028 20.3743 23.4946 22.0381C23.2918 22.2338 23.1784 22.5032 23.1784 22.7956C23.1784 23.0666 23.2742 23.3381 23.4912 23.5388C23.6874 23.7518 23.9627 23.85 24.2358 23.85C24.5145 23.85 24.7766 23.7482 24.9693 23.55C27.0888 21.4868 28.2501 18.7384 28.2501 15.7943C28.2501 12.8615 27.0887 10.1131 24.9693 8.05002C24.7753 7.85051 24.5018 7.75 24.2358 7.75Z" fill="#4D4D4D"></path>
<path d="M11.0415 10.4641C10.7766 10.4641 10.5302 10.5712 10.3448 10.7488L10.3422 10.7513C8.98559 12.0895 8.22744 13.8868 8.22744 15.8008C8.22744 17.7141 8.9851 19.4991 10.3401 20.8368C10.5342 21.0369 10.7865 21.1261 11.0415 21.1261C11.2875 21.1261 11.5362 21.0359 11.7273 20.8527C11.9146 20.6732 12.0335 20.4168 12.0335 20.1511C12.0335 19.8822 11.9314 19.6334 11.7256 19.4477C10.7399 18.476 10.2004 17.1714 10.2004 15.7894C10.2004 14.4081 10.7395 13.1145 11.7256 12.1425C11.9329 11.9553 12.0335 11.6945 12.0335 11.4391C12.0335 11.1734 11.9146 10.917 11.7273 10.7375C11.5375 10.5556 11.3004 10.4641 11.0415 10.4641Z" fill="#4D4D4D"></path>
<path d="M20.9677 10.4641C20.718 10.4641 20.4665 10.5498 20.2816 10.7376C20.0757 10.9247 19.9758 11.1845 19.9758 11.4391C19.9758 11.695 20.0765 11.9536 20.2698 12.1395C21.2577 13.1119 21.7979 14.4067 21.7979 15.7894C21.7979 17.1727 21.2573 18.4786 20.2698 19.4506C20.0779 19.6351 19.9758 19.8818 19.9758 20.1511C19.9758 20.4057 20.0757 20.6655 20.2816 20.8526C20.4665 21.0404 20.718 21.1261 20.9677 21.1261C21.2296 21.1261 21.4792 21.021 21.6578 20.8372C23.0245 19.499 23.7818 17.7023 23.7818 15.7894C23.7818 13.8892 23.0255 12.0939 21.6611 10.7562C21.4747 10.551 21.2187 10.4641 20.9677 10.4641Z" fill="#4D4D4D"></path>
<circle cx="16" cy="16" r="2" fill="#4D4D4D"></circle>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-info">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4C9.37226 4 4 9.37226 4 16C4 22.6277 9.37226 28 16 28C22.6277 28 28 22.6277 28 16C28 9.37226 22.6277 4 16 4ZM2 16C2 8.26769 8.26769 2 16 2C23.7323 2 30 8.26769 30 16C30 23.7323 23.7323 30 16 30C8.26769 30 2 23.7323 2 16Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 9C15.175 9 14.5 9.675 14.5 10.5C14.5 11.325 15.175 12 16 12C16.825 12 17.5 11.325 17.5 10.5C17.5 9.675 16.825 9 16 9Z" fill="#333333"></path>
<rect x="15" y="13" width="2" height="10" rx="1" fill="#333333"></rect>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-location">
<g clip-path="url(#clip0_6482_301011)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.00202 23.7834C6.00999 23.7605 6.03721 23.7045 6.12335 23.6134C6.27197 23.4564 6.5387 23.2603 6.96126 23.0508C7.8035 22.6331 9.0725 22.2557 10.6667 21.9862L10.3333 20.0142C8.63959 20.3005 7.15859 20.7206 6.07281 21.2589C5.53136 21.5274 5.03957 21.8489 4.67067 22.2388C4.29718 22.6334 4 23.1552 4 23.7851C4 24.7259 4.64614 25.4102 5.29594 25.8592C5.97631 26.3294 6.89546 26.7127 7.94128 27.0183C10.0462 27.6335 12.8951 28.0002 16 28.0002C19.1049 28.0002 21.9538 27.6335 24.0587 27.0183C25.1045 26.7127 26.0237 26.3294 26.7041 25.8592C27.3539 25.4102 28 24.7259 28 23.7851C28 23.1552 27.7028 22.6334 27.3293 22.2388C26.9604 21.8489 26.4686 21.5274 25.9272 21.2589C24.8414 20.7206 23.3604 20.3005 21.6667 20.0142L21.3333 21.9862C22.9275 22.2557 24.1965 22.6331 25.0387 23.0508C25.4613 23.2603 25.728 23.4564 25.8766 23.6134C25.9628 23.7045 25.99 23.7605 25.998 23.7834C25.986 23.8191 25.9189 23.9707 25.5671 24.2139C25.1342 24.513 24.4424 24.8225 23.4976 25.0987C21.6213 25.6471 18.9702 26.0002 16 26.0002C13.0298 26.0002 10.3787 25.6471 8.50237 25.0987C7.55759 24.8225 6.86582 24.513 6.43293 24.2139C6.0811 23.9707 6.01395 23.8191 6.00202 23.7834ZM5.99902 23.7953C5.99888 23.7953 5.999 23.7937 5.9998 23.7906C5.99956 23.7937 5.99916 23.7953 5.99902 23.7953ZM26.001 23.7953C26.0008 23.7953 26.0004 23.7937 26.0002 23.7906C26.001 23.7937 26.0011 23.7953 26.001 23.7953Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12.255C22 8.74 19.2556 6 16 6C12.7444 6 10 8.74 10 12.255C10 13.3894 10.4217 14.6897 11.5302 16.321C12.5186 17.7757 13.9889 19.3994 16 21.2883C18.0111 19.3994 19.4814 17.7757 20.4698 16.321C21.5783 14.6897 22 13.3894 22 12.255ZM15.4682 23.52C10.5129 19.01 8 15.585 8 12.255C8 7.695 11.5812 4 16 4C20.4188 4 24 7.695 24 12.255C24 15.585 21.4871 19.01 16.5318 23.52L16 24L15.4682 23.52Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 10.896 17.104 10 16 10C14.896 10 14 10.896 14 12C14 13.104 14.896 14 16 14C17.104 14 18 13.104 18 12Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6482_301011">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-message">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.63637 5C4.62806 5 3 6.62806 3 8.63637V17.3636C3 19.3719 4.62806 21 6.63637 21H8V27C10.8619 23.9067 15.2336 22.0316 18.9127 21H24.3636C26.3719 21 28 19.3719 28 17.3636V8.63637C28 6.62806 26.3719 5 24.3636 5H6.63637Z" fill="#4D4D4D"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-mobile-data">
<path d="M10.9083 5.27766L4.58594 11.3304L5.96901 12.7751L11 7.95863V27.0003H13V6.00033C13 5.44804 12.5523 5.00033 12 5.00033C11.9317 5.00033 11.8649 5.00718 11.8004 5.02024C11.4899 4.95694 11.1545 5.04192 10.9083 5.27766Z" fill="#333333"></path>
<path d="M20.9404 26.3409C20.801 26.7253 20.4326 27 20 27C19.4477 27 19 26.5523 19 26V5H21V23.6333L26.2312 18.6251L27.6143 20.0698L21.2919 26.1226C21.1878 26.2222 21.0678 26.295 20.9404 26.3409Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-more">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 14C4.675 14 4 14.675 4 15.5C4 16.325 4.675 17 5.5 17C6.325 17 7 16.325 7 15.5C7 14.675 6.325 14 5.5 14ZM15.5 14C14.675 14 14 14.675 14 15.5C14 16.325 14.675 17 15.5 17C16.325 17 17 16.325 17 15.5C17 14.675 16.325 14 15.5 14ZM24 15.5C24 14.675 24.675 14 25.5 14C26.325 14 27 14.675 27 15.5C27 16.325 26.325 17 25.5 17C24.675 17 24 16.325 24 15.5Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-no-see">
<path d="M15.3458 17.2035C15.3458 16.8218 15.6277 16.5095 15.9723 16.5095H16.4171C16.7617 16.5095 17.0436 16.8218 17.0436 17.2035V21.1241C17.0436 21.5058 16.7617 21.8181 16.4171 21.8181H15.9723C15.6277 21.8181 15.3458 21.5058 15.3458 21.1241V17.2035ZM7.06042 14.5978C7.30475 14.3306 7.70571 14.3341 7.95004 14.6012L8.26642 14.9517C8.51075 15.2223 8.50762 15.6595 8.26329 15.9301L5.38769 19.0597C5.14336 19.3269 4.7424 19.3234 4.49807 19.0562L4.18169 18.7058C3.93736 18.4352 3.94049 17.998 4.18482 17.7274L7.06042 14.5978ZM24.8935 14.2855C24.6492 14.0149 24.2514 14.0149 24.007 14.2855L23.6907 14.6359C23.4463 14.9066 23.4463 15.3472 23.6907 15.6178L26.4472 18.678C26.6915 18.9487 27.0894 18.9487 27.3337 18.678L27.6501 18.3276C27.8944 18.057 27.8944 17.6163 27.6501 17.3457L24.8935 14.2855ZM20.8151 15.6109C20.6428 15.2778 20.2606 15.1633 19.963 15.3541L19.5777 15.6005C19.2801 15.7913 19.1736 16.2181 19.3459 16.5512L21.4697 20.6696C21.642 21.0027 22.0242 21.1172 22.3218 20.9264L22.7071 20.68C23.0046 20.4892 23.1111 20.0624 22.9389 19.7293L20.8151 15.6109ZM11.4678 16.0793C11.6401 15.7497 12.0254 15.6352 12.323 15.826L12.7082 16.0724C13.0058 16.2632 13.1092 16.6899 12.9369 17.0196L10.9227 20.8847C10.7505 21.2143 10.3652 21.3288 10.0676 21.138L9.68229 20.8917C9.38471 20.7008 9.28134 20.2741 9.45362 19.9445L11.4678 16.0793Z" fill="#333333" stroke="#333333" stroke-width="0.3"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.30202 12.4432L3.13285 12.5499L3.13219 12.5488L3.13041 12.546L3.12515 12.5372C3.12093 12.5301 3.11535 12.5203 3.1088 12.5082C3.09574 12.4841 3.07867 12.4501 3.06091 12.4082C3.02577 12.3253 2.986 12.2067 2.972 12.0688C2.95791 11.9299 2.96965 11.7675 3.04214 11.6036C3.1152 11.4385 3.24428 11.2847 3.44424 11.1561C3.64381 11.0275 3.83745 10.9759 4.01843 10.9825C4.19762 10.989 4.34897 11.0517 4.46737 11.127C4.58508 11.2019 4.67453 11.2918 4.73383 11.3611C4.76382 11.3961 4.787 11.427 4.80308 11.4497C4.81114 11.4611 4.81748 11.4705 4.82205 11.4775L4.82639 11.4843C5.52982 12.4968 6.97932 13.3997 8.9455 14.0493C10.9067 14.6972 13.3537 15.0836 16.0121 15.0836C18.6704 15.0836 21.1174 14.6972 23.0786 14.0493C25.0454 13.3995 26.4952 12.4962 27.1984 11.4833L27.2041 11.4747C27.2089 11.4678 27.2154 11.4585 27.2237 11.4473C27.2401 11.4251 27.2639 11.3951 27.2946 11.3614C27.3552 11.2949 27.4471 11.2096 27.5685 11.1428C27.6913 11.0753 27.8466 11.0257 28.0282 11.0372C28.2101 11.0488 28.4018 11.1207 28.5984 11.2692C28.9549 11.5382 29.0469 11.8538 29.0319 12.112C29.0248 12.2352 28.9939 12.339 28.9652 12.4117C28.9507 12.4483 28.9365 12.4779 28.9254 12.4992C28.9198 12.5099 28.915 12.5185 28.9112 12.525L28.9064 12.5331L28.9047 12.5359L28.9035 12.5379L28.8975 12.5468C27.9219 13.9188 26.1647 15.076 23.9323 15.89C21.696 16.7054 18.9643 17.1836 16.0152 17.1836C13.0691 17.1836 10.3405 16.707 8.10582 15.8939C5.87506 15.0822 4.11802 13.9282 3.13933 12.5595L3.13285 12.5499C3.13292 12.55 3.13441 12.55 3.30202 12.4432Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-personalization">
<path d="M25.6155 7.64575L18.1967 3.56921C16.8165 2.81039 15.1687 2.81039 13.7886 3.56921L6.38207 7.64575C4.9209 8.44632 4.00737 9.97871 4 11.6486V19.5045C4.00982 21.1695 4.92336 22.6995 6.38207 23.5L13.8009 27.5766C14.4909 27.9572 15.2473 28.1463 16.0061 28.1463C16.7625 28.1463 17.5213 27.9572 18.2114 27.5766L25.6204 23.5C27.0791 22.6995 27.9926 21.1695 28 19.4996V11.6412C27.9902 9.97625 27.0766 8.44387 25.6155 7.64575ZM14.5 5.50009C14.9248 5.2668 15.5334 5.00009 16 5.00009C16.4666 5.00009 17.0752 5.2668 17.5 5.50009L24 9.00009C24.1768 9.09587 24.8527 9.51616 25 9.64631L16 14.5001L7 9.64631C7.14734 9.51862 7.82319 9.09832 8 9.00009L14.5 5.50009ZM7.5 22.0001C6.59874 21.5065 6.00491 20.5261 6 19.5045V12.0001C6 11.8516 6 11.5001 6.5 11.5001L15 16.0935V26.0368C14.8379 25.9828 14.1547 25.5836 14 25.5001L7.5 22.0001ZM26 19.5045C25.9951 20.531 25.8988 21.0065 25 21.5001L18 25.5001C17.8428 25.586 17.167 25.9461 17 26.0001V16.0001L25.6155 11.5001C26 11.5001 26 11.6412 26 12.0001V19.5045Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-right">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.6863 15.8995L11.8934 6.1066L13.3076 4.69238L23.8076 15.1924C24.1981 15.5829 24.1981 16.2161 23.8076 16.6066L13.3076 27.1066L11.8934 25.6924L21.6863 15.8995Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-screen">
<path d="M7 9H10V12H7V9Z" fill="#333333"></path>
<path d="M7 15H10V18H7V15Z" fill="#333333"></path>
<path d="M15 9H12V12H15V9Z" fill="#333333"></path>
<path d="M12 15H15V18H12V15Z" fill="#333333"></path>
<path d="M20 9H17V12H20V9Z" fill="#333333"></path>
<path d="M17 15H20V18H17V15Z" fill="#333333"></path>
<path d="M25 9H22V12H25V9Z" fill="#333333"></path>
<path d="M22 15H25V18H22V15Z" fill="#333333"></path>
<path d="M21 21H11V23H21V21Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H26C28.7614 4 31 6.23858 31 9V23C31 25.7614 28.7614 28 26 28H6C3.23858 28 1 25.7614 1 23V9C1 6.23858 3.23858 4 6 4ZM6 6C4.34315 6 3 7.34315 3 9V23C3 24.6569 4.34315 26 6 26H26C27.6569 26 29 24.6569 29 23V9C29 7.34315 27.6569 6 26 6H6Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-settings">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6765 2.61024C14.3941 2.20083 15.2054 2 16 2C16.7946 2 17.6059 2.20083 18.3235 2.61024C18.3244 2.61075 18.3253 2.61125 18.3261 2.61176L27.3097 7.67811C27.3099 7.67821 27.3095 7.67801 27.3097 7.67811C28.3405 8.2573 29 9.33285 29 10.52V21.48C29 22.6674 28.3408 23.7428 27.3097 24.3219L18.3261 29.3882C18.3253 29.3888 18.3244 29.3893 18.3235 29.3898C17.6059 29.7992 16.7946 30 16 30C15.2054 30 14.3941 29.7992 13.6765 29.3898C13.6756 29.3893 13.6747 29.3888 13.6739 29.3882L4.69031 24.3219C4.69024 24.3219 4.69037 24.3219 4.69031 24.3219C3.65929 23.7427 3 22.6673 3 21.48V10.52C3 9.33299 3.65879 8.25786 4.68941 7.67861C4.68971 7.67844 4.69001 7.67827 4.69031 7.67811L13.6765 2.61024ZM16 4C15.5356 4 15.0679 4.11867 14.6661 4.34824L14.6612 4.35105L5.66969 9.42189C5.24082 9.66277 5 10.0874 5 10.52V21.48C5 21.9126 5.24083 22.3372 5.66969 22.5781L5.67123 22.579L14.6661 27.6517C15.0679 27.8813 15.5356 28 16 28C16.4644 28 16.9321 27.8813 17.3339 27.6518L17.3388 27.649L26.3303 22.5781C26.7592 22.3372 27 21.9126 27 21.48V10.52C27 10.0874 26.7592 9.66277 26.3303 9.42189L17.3339 4.34826C16.9321 4.11869 16.4644 4 16 4Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 16C11 13.2377 13.2377 11 16 11C18.7623 11 21 13.2377 21 16C21 18.7623 18.7623 21 16 21C13.2377 21 11 18.7623 11 16ZM16 13C14.3423 13 13 14.3423 13 16C13 17.6577 14.3423 19 16 19C17.6577 19 19 17.6577 19 16C19 14.3423 17.6577 13 16 13Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-0">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-1">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-2">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-2g-0">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261243)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path d="M8.2459 5.81621L8.23466 5.80808C8.25495 5.79666 8.27494 5.78478 8.29463 5.77246C8.7059 5.39821 8.93227 5.05819 9 4.49988C8.99994 3.67151 8.32839 3 7.5 3C6.67157 3 6 3.67157 6 4.5L4 4.49999C4 4.15251 4.05064 3.81685 4.14494 3.5C4.57522 2.05425 5.91449 1 7.5 1C9.43296 1 10.9999 2.56694 11 4.49988C11 4.49992 11 4.49984 11 4.49988C10.9991 4.51292 10.9257 5.54176 9.99544 6.44852L7 8.99988H11V10.9999H4V8.99988L7 6.81621C7.21076 6.64533 7.40355 6.49451 7.57907 6.35722C7.83832 6.15442 8.05987 5.98111 8.2459 5.81621Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261243">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-2g-1">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261263)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path d="M8.2459 5.81621L8.23466 5.80808C8.25495 5.79666 8.27494 5.78478 8.29463 5.77246C8.7059 5.39821 8.93227 5.05819 9 4.49988C8.99994 3.67151 8.32839 3 7.5 3C6.67157 3 6 3.67157 6 4.5L4 4.49999C4 4.15251 4.05064 3.81685 4.14494 3.5C4.57522 2.05425 5.91449 1 7.5 1C9.43296 1 10.9999 2.56694 11 4.49988C11 4.49992 11 4.49984 11 4.49988C10.9991 4.51292 10.9257 5.54176 9.99544 6.44852L7 8.99988H11V10.9999H4V8.99988L7 6.81621C7.21076 6.64533 7.40355 6.49451 7.57907 6.35722C7.83832 6.15442 8.05987 5.98111 8.2459 5.81621Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261263">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-2g-2">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261283)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path d="M8.2459 5.81621L8.23466 5.80808C8.25495 5.79666 8.27494 5.78478 8.29463 5.77246C8.7059 5.39821 8.93227 5.05819 9 4.49988C8.99994 3.67151 8.32839 3 7.5 3C6.67157 3 6 3.67157 6 4.5L4 4.49999C4 4.15251 4.05064 3.81685 4.14494 3.5C4.57522 2.05425 5.91449 1 7.5 1C9.43296 1 10.9999 2.56694 11 4.49988C11 4.49992 11 4.49984 11 4.49988C10.9991 4.51292 10.9257 5.54176 9.99544 6.44852L7 8.99988H11V10.9999H4V8.99988L7 6.81621C7.21076 6.64533 7.40355 6.49451 7.57907 6.35722C7.83832 6.15442 8.05987 5.98111 8.2459 5.81621Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261283">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-2g-3">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261363)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path d="M8.2459 5.81621L8.23466 5.80808C8.25495 5.79666 8.27494 5.78478 8.29463 5.77246C8.7059 5.39821 8.93227 5.05819 9 4.49988C8.99994 3.67151 8.32839 3 7.5 3C6.67157 3 6 3.67157 6 4.5L4 4.49999C4 4.15251 4.05064 3.81685 4.14494 3.5C4.57522 2.05425 5.91449 1 7.5 1C9.43296 1 10.9999 2.56694 11 4.49988C11 4.49992 11 4.49984 11 4.49988C10.9991 4.51292 10.9257 5.54176 9.99544 6.44852L7 8.99988H11V10.9999H4V8.99988L7 6.81621C7.21076 6.64533 7.40355 6.49451 7.57907 6.35722C7.83832 6.15442 8.05987 5.98111 8.2459 5.81621Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261363">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-2g-4">
<rect x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261403)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path d="M8.2459 5.81621L8.23466 5.80808C8.25495 5.79666 8.27494 5.78478 8.29463 5.77246C8.7059 5.39821 8.93227 5.05819 9 4.49988C8.99994 3.67151 8.32839 3 7.5 3C6.67157 3 6 3.67157 6 4.5L4 4.49999C4 4.15251 4.05064 3.81685 4.14494 3.5C4.57522 2.05425 5.91449 1 7.5 1C9.43296 1 10.9999 2.56694 11 4.49988C11 4.49992 11 4.49984 11 4.49988C10.9991 4.51292 10.9257 5.54176 9.99544 6.44852L7 8.99988H11V10.9999H4V8.99988L7 6.81621C7.21076 6.64533 7.40355 6.49451 7.57907 6.35722C7.83832 6.15442 8.05987 5.98111 8.2459 5.81621Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261403">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-3">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-3g-0">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261303)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.50002 6.5L5.00002 5.5L8.50002 3H4.99999L5 1H11V3L9.17033 4.4231C10.2606 5.016 11.0007 6.17155 11.0007 7.49994C11.0007 9.43294 9.43369 10.9999 7.50069 10.9999C6.10449 10.9999 4.89924 10.1824 4.3375 8.99994C4.18983 8.68909 4.08664 8.35302 4.03613 7.99994H6.08604C6.29196 8.58254 6.84758 8.99994 7.50069 8.99994C8.32912 8.99994 9.00069 8.32837 9.00069 7.49994C9.00069 6.86089 8.60106 6.31517 8.03807 6.09907C7.87124 6.03504 7.69006 5.99994 7.50069 5.99994C7.38278 5.99994 7.26806 6.01355 7.15799 6.03927C7.14578 6.04212 7.13362 6.04513 7.12153 6.04828C7.09993 6.0539 7.07852 6.06 7.05731 6.06655L6.50002 6.5Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261303">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-3g-1">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261323)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.50002 6.5L5.00002 5.5L8.50002 3H4.99999L5 1H11V3L9.17033 4.4231C10.2606 5.016 11.0007 6.17155 11.0007 7.49994C11.0007 9.43294 9.43369 10.9999 7.50069 10.9999C6.10449 10.9999 4.89924 10.1824 4.3375 8.99994C4.18983 8.68909 4.08664 8.35302 4.03613 7.99994H6.08604C6.29196 8.58254 6.84758 8.99994 7.50069 8.99994C8.32912 8.99994 9.00069 8.32837 9.00069 7.49994C9.00069 6.86089 8.60106 6.31517 8.03807 6.09907C7.87124 6.03504 7.69006 5.99994 7.50069 5.99994C7.38278 5.99994 7.26806 6.01355 7.15799 6.03927C7.14578 6.04212 7.13362 6.04513 7.12153 6.04828C7.09993 6.0539 7.07852 6.06 7.05731 6.06655L6.50002 6.5Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261323">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-3g-2">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261343)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.50002 6.5L5.00002 5.5L8.50002 3H4.99999L5 1H11V3L9.17033 4.4231C10.2606 5.016 11.0007 6.17155 11.0007 7.49994C11.0007 9.43294 9.43369 10.9999 7.50069 10.9999C6.10449 10.9999 4.89924 10.1824 4.3375 8.99994C4.18983 8.68909 4.08664 8.35302 4.03613 7.99994H6.08604C6.29196 8.58254 6.84758 8.99994 7.50069 8.99994C8.32912 8.99994 9.00069 8.32837 9.00069 7.49994C9.00069 6.86089 8.60106 6.31517 8.03807 6.09907C7.87124 6.03504 7.69006 5.99994 7.50069 5.99994C7.38278 5.99994 7.26806 6.01355 7.15799 6.03927C7.14578 6.04212 7.13362 6.04513 7.12153 6.04828C7.09993 6.0539 7.07852 6.06 7.05731 6.06655L6.50002 6.5Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261343">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-3g-3">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261383)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.50002 6.5L5.00002 5.5L8.50002 3H4.99999L5 1H11V3L9.17033 4.4231C10.2606 5.016 11.0007 6.17155 11.0007 7.49994C11.0007 9.43294 9.43369 10.9999 7.50069 10.9999C6.10449 10.9999 4.89924 10.1824 4.3375 8.99994C4.18983 8.68909 4.08664 8.35302 4.03613 7.99994H6.08604C6.29196 8.58254 6.84758 8.99994 7.50069 8.99994C8.32912 8.99994 9.00069 8.32837 9.00069 7.49994C9.00069 6.86089 8.60106 6.31517 8.03807 6.09907C7.87124 6.03504 7.69006 5.99994 7.50069 5.99994C7.38278 5.99994 7.26806 6.01355 7.15799 6.03927C7.14578 6.04212 7.13362 6.04513 7.12153 6.04828C7.09993 6.0539 7.07852 6.06 7.05731 6.06655L6.50002 6.5Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261383">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-3g-4">
<rect x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261423)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.50002 6.5L5.00002 5.5L8.50002 3H4.99999L5 1H11V3L9.17033 4.4231C10.2606 5.016 11.0007 6.17155 11.0007 7.49994C11.0007 9.43294 9.43369 10.9999 7.50069 10.9999C6.10449 10.9999 4.89924 10.1824 4.3375 8.99994C4.18983 8.68909 4.08664 8.35302 4.03613 7.99994H6.08604C6.29196 8.58254 6.84758 8.99994 7.50069 8.99994C8.32912 8.99994 9.00069 8.32837 9.00069 7.49994C9.00069 6.86089 8.60106 6.31517 8.03807 6.09907C7.87124 6.03504 7.69006 5.99994 7.50069 5.99994C7.38278 5.99994 7.26806 6.01355 7.15799 6.03927C7.14578 6.04212 7.13362 6.04513 7.12153 6.04828C7.09993 6.0539 7.07852 6.06 7.05731 6.06655L6.50002 6.5Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261423">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-4">
<rect x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-5g-0">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261205)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1L4.02649 6.84106C4.01647 6.89364 4.00763 6.94662 4 7H6.04991C6.16871 6.66387 6.40392 6.38273 6.70711 6.20501C6.92941 6.0747 7.18826 6 7.46456 6C8.29298 6 8.96456 6.67157 8.96456 7.5C8.96456 8.32843 8.29298 9 7.46456 9C7.09598 9 6.75846 8.86707 6.49731 8.64653C6.29571 8.47628 6.13962 8.25382 6.04991 8C6.02524 7.93019 6.00558 7.85802 5.99139 7.7839L4.23043 8.84047C4.75652 10.1083 6.0064 11 7.46456 11C9.39755 11 10.9646 9.433 10.9646 7.5C10.9646 5.567 9.39755 4 7.46456 4C7.21286 4 6.96737 4.02657 6.73074 4.07705L7 3H10V1H5Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261205">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-5g-1">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261169)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1L4.02649 6.84106C4.01647 6.89364 4.00763 6.94662 4 7H6.04991C6.16871 6.66387 6.40392 6.38273 6.70711 6.20501C6.92941 6.0747 7.18826 6 7.46456 6C8.29298 6 8.96456 6.67157 8.96456 7.5C8.96456 8.32843 8.29298 9 7.46456 9C7.09598 9 6.75846 8.86707 6.49731 8.64653C6.29571 8.47628 6.13962 8.25382 6.04991 8C6.02524 7.93019 6.00558 7.85802 5.99139 7.7839L4.23043 8.84047C4.75652 10.1083 6.0064 11 7.46456 11C9.39755 11 10.9646 9.433 10.9646 7.5C10.9646 5.567 9.39755 4 7.46456 4C7.21286 4 6.96737 4.02657 6.73074 4.07705L7 3H10V1H5Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261169">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-5g-2">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261187)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1L4.02649 6.84106C4.01647 6.89364 4.00763 6.94662 4 7H6.04991C6.16871 6.66387 6.40392 6.38273 6.70711 6.20501C6.92941 6.0747 7.18826 6 7.46456 6C8.29298 6 8.96456 6.67157 8.96456 7.5C8.96456 8.32843 8.29298 9 7.46456 9C7.09598 9 6.75846 8.86707 6.49731 8.64653C6.29571 8.47628 6.13962 8.25382 6.04991 8C6.02524 7.93019 6.00558 7.85802 5.99139 7.7839L4.23043 8.84047C4.75652 10.1083 6.0064 11 7.46456 11C9.39755 11 10.9646 9.433 10.9646 7.5C10.9646 5.567 9.39755 4 7.46456 4C7.21286 4 6.96737 4.02657 6.73074 4.07705L7 3H10V1H5Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261187">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-5g-3">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261133)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1L4.02649 6.84106C4.01647 6.89364 4.00763 6.94662 4 7H6.04991C6.16871 6.66387 6.40392 6.38273 6.70711 6.20501C6.92941 6.0747 7.18826 6 7.46456 6C8.29298 6 8.96456 6.67157 8.96456 7.5C8.96456 8.32843 8.29298 9 7.46456 9C7.09598 9 6.75846 8.86707 6.49731 8.64653C6.29571 8.47628 6.13962 8.25382 6.04991 8C6.02524 7.93019 6.00558 7.85802 5.99139 7.7839L4.23043 8.84047C4.75652 10.1083 6.0064 11 7.46456 11C9.39755 11 10.9646 9.433 10.9646 7.5C10.9646 5.567 9.39755 4 7.46456 4C7.21286 4 6.96737 4.02657 6.73074 4.07705L7 3H10V1H5Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261133">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-5g-4">
<rect x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6476_261151)">
<path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1L4.02649 6.84106C4.01647 6.89364 4.00763 6.94662 4 7H6.04991C6.16871 6.66387 6.40392 6.38273 6.70711 6.20501C6.92941 6.0747 7.18826 6 7.46456 6C8.29298 6 8.96456 6.67157 8.96456 7.5C8.96456 8.32843 8.29298 9 7.46456 9C7.09598 9 6.75846 8.86707 6.49731 8.64653C6.29571 8.47628 6.13962 8.25382 6.04991 8C6.02524 7.93019 6.00558 7.85802 5.99139 7.7839L4.23043 8.84047C4.75652 10.1083 6.0064 11 7.46456 11C9.39755 11 10.9646 9.433 10.9646 7.5C10.9646 5.567 9.39755 4 7.46456 4C7.21286 4 6.96737 4.02657 6.73074 4.07705L7 3H10V1H5Z" fill="#333333"></path>
</g>
<defs>
<clippath id="clip0_6476_261151">
<rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-e-0">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<path d="M6 3V5H11V7H6V9H11V11H4V1H11V3H6Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-e-1">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<path d="M6 3V5H11V7H6V9H11V11H4V1H11V3H6Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-e-2">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<path d="M6 3V5H11V7H6V9H11V11H4V1H11V3H6Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-e-3">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<path d="M6 3V5H11V7H6V9H11V11H4V1H11V3H6Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-e-4">
<rect x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<path d="M6 3V5H11V7H6V9H11V11H4V1H11V3H6Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-signal-open-card">
<rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
<rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
<g clip-path="url(#clip0_6455_260737)">
<path d="M9.97765 5C9.97765 6.10457 9.08222 7 7.97765 7C7.61336 7 7.27182 6.90261 6.97765 6.73244V8.87398C7.29727 8.95625 7.63235 9 7.97765 9C10.1868 9 11.9776 7.20914 11.9776 5C11.9776 2.79086 10.1868 1 7.97765 1C5.9122 1 4.21238 2.56547 4 4.57462L5.98262 4.85785C6.05553 3.81962 6.92087 3 7.97765 3C9.08222 3 9.97765 3.89543 9.97765 5Z" fill="#333333"></path>
<rect x="6.97754" y="7" width="2" height="4" fill="#333333"></rect>
<circle cx="7.97754" cy="13" r="1" fill="#333333"></circle>
</g>
<defs>
<clippath id="clip0_6455_260737">
<rect width="8" height="13" fill="white" transform="translate(4 1)"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 6 32" id="ffont-signal-roaming">
<path d="M2.8285 9.28583C2.90618 9.15636 3.09382 9.15636 3.1715 9.28583L5.81826 13.6971C5.89824 13.8304 5.80222 14 5.64676 14H0.353238C0.197779 14 0.101757 13.8304 0.181739 13.6971L2.8285 9.28583Z" fill="#333333"></path>
<path opacity="0.4" d="M2.8285 22.7142C2.90618 22.8436 3.09382 22.8436 3.1715 22.7142L5.81826 18.3029C5.89824 18.1696 5.80222 18 5.64676 18H0.353238C0.197779 18 0.101757 18.1696 0.181739 18.3029L2.8285 22.7142Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-skip-forward">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 8.13C5 7.01 5.95 6.1 7.12 6.1C7.54 6.1 7.95 6.22 8.3 6.44L20.76 14.38C20.83 14.42 20.89 14.47 20.95 14.52V7.75C20.95 6.23 22.18 5 23.7 5H24.25C25.77 5 27 6.23 27 7.75V24.25C27 25.77 25.77 27 24.25 27H23.7C22.18 27 20.95 25.77 20.95 24.25V16.87C20.91 16.91 20.86 16.94 20.81 16.97L8.36 25.52C7.41 26.17 6.08 25.96 5.4 25.06C5.14 24.71 5 24.3 5 23.87V8.13Z" fill="black"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-tick">
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.6762 6.26329C29.0831 6.63675 29.1102 7.26934 28.7367 7.67621L13.1329 24.6762C12.9534 24.8718 12.7035 24.9879 12.4383 24.9991C12.1731 25.0103 11.9143 24.9156 11.719 24.7358L3.32282 17.0085C2.91644 16.6345 2.89019 16.0019 3.2642 15.5955C3.6382 15.1892 4.27082 15.1629 4.67719 15.5369L12.3366 22.5861L27.2633 6.3238C27.6368 5.91692 28.2693 5.88984 28.6762 6.26329Z" fill="#333333"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wechat">
<g clip-path="url(#clip0_2073_78772)">
<path d="M20.6008 11.6559C20.8994 11.6559 21.1945 11.6796 21.486 11.7142C20.6904 7.86268 16.7262 5 12.2017 5C7.14333 5 3 8.58154 3 13.1301C3 15.7556 4.37877 17.9103 6.68315 19.5834L5.7628 22.4589L8.97875 20.7839C10.1309 21.0211 11.0548 21.2638 12.2017 21.2638C12.4915 21.2638 12.7778 21.2492 13.0624 21.2273C12.8759 20.5764 12.7801 19.9012 12.7778 19.2222C12.7778 15.0458 16.2291 11.6577 20.6008 11.6577V11.6559ZM15.653 9.06504C16.3468 9.06504 16.8052 9.53941 16.8052 10.2583C16.8052 10.9753 16.3468 11.4552 15.653 11.4552C14.9645 11.4552 14.2708 10.9753 14.2708 10.2583C14.2708 9.53941 14.9645 9.06504 15.653 9.06504ZM9.21235 11.4552C8.52385 11.4552 7.82832 10.9753 7.82832 10.2583C7.82832 9.53941 8.52385 9.06504 9.21235 9.06504C9.90262 9.06504 10.361 9.53941 10.361 10.2583C10.361 10.9753 9.90437 11.4552 9.21235 11.4552Z" fill="#4D4D4D"></path>
<path d="M29.0003 19.1072C29.0003 15.2849 25.3189 12.1704 21.1844 12.1704C16.8057 12.1704 13.3579 15.2849 13.3579 19.1072C13.3579 22.9351 16.8057 26.0441 21.1844 26.0441C22.0995 26.0441 23.0251 25.8051 23.9454 25.5642L26.4694 27.0001L25.7773 24.6118C27.6251 23.1705 29.0003 21.2638 29.0003 19.1072ZM18.6446 17.914C18.188 17.914 17.7243 17.4396 17.7243 16.9561C17.7243 16.4818 18.1862 16.0001 18.6446 16.0001C19.3402 16.0001 19.7968 16.4799 19.7968 16.9561C19.7968 17.4396 19.3402 17.914 18.6446 17.914ZM23.7066 17.914C23.2499 17.914 22.7932 17.4396 22.7932 16.9561C22.7932 16.4818 23.2499 16.0001 23.7066 16.0001C24.3968 16.0001 24.857 16.4799 24.857 16.9561C24.857 17.4396 24.3968 17.914 23.7066 17.914Z" fill="#4D4D4D"></path>
</g>
<defs>
<clippath id="clip0_2073_78772">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-0">
<g clip-path="url(#clip0_6455_180119)">
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path opacity="0.4" d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_180119">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-1">
<g clip-path="url(#clip0_6455_180097)">
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_180097">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-2">
<g clip-path="url(#clip0_6455_180073)">
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_180073">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-3">
<g clip-path="url(#clip0_6455_180051)">
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_180051">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-4">
<g clip-path="url(#clip0_6455_179951)">
<path d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_179951">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-lock-0">
<g clip-path="url(#clip0_6455_260586)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 21C32 19.8954 31.1046 19 30 19V18.5C30 17.1193 28.8807 16 27.5 16C26.1193 16 25 17.1193 25 18.5V19C23.8954 19 23 19.8954 23 21V24C23 25.1046 23.8954 26 25 26H30C31.1046 26 32 25.1046 32 24V21ZM28.5 18.5V19H26.5V18.5C26.5 17.9477 26.9477 17.5 27.5 17.5C28.0523 17.5 28.5 17.9477 28.5 18.5ZM27.5 21C28.325 21 29 21.675 29 22.5C29 23.325 28.325 24 27.5 24C26.675 24 26 23.325 26 22.5C26 21.675 26.675 21 27.5 21Z" fill="#333333"></path>
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path opacity="0.4" d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_260586">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-lock-1">
<g clip-path="url(#clip0_6455_260553)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 21C32 19.8954 31.1046 19 30 19V18.5C30 17.1193 28.8807 16 27.5 16C26.1193 16 25 17.1193 25 18.5V19C23.8954 19 23 19.8954 23 21V24C23 25.1046 23.8954 26 25 26H30C31.1046 26 32 25.1046 32 24V21ZM28.5 18.5V19H26.5V18.5C26.5 17.9477 26.9477 17.5 27.5 17.5C28.0523 17.5 28.5 17.9477 28.5 18.5ZM27.5 21C28.325 21 29 21.675 29 22.5C29 23.325 28.325 24 27.5 24C26.675 24 26 23.325 26 22.5C26 21.675 26.675 21 27.5 21Z" fill="#333333"></path>
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_260553">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-lock-2">
<g clip-path="url(#clip0_6455_260518)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 21C32 19.8954 31.1046 19 30 19V18.5C30 17.1193 28.8807 16 27.5 16C26.1193 16 25 17.1193 25 18.5V19C23.8954 19 23 19.8954 23 21V24C23 25.1046 23.8954 26 25 26H30C31.1046 26 32 25.1046 32 24V21ZM28.5 18.5V19H26.5V18.5C26.5 17.9477 26.9477 17.5 27.5 17.5C28.0523 17.5 28.5 17.9477 28.5 18.5ZM27.5 21C28.325 21 29 21.675 29 22.5C29 23.325 28.325 24 27.5 24C26.675 24 26 23.325 26 22.5C26 21.675 26.675 21 27.5 21Z" fill="#333333"></path>
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_260518">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-lock-3">
<g clip-path="url(#clip0_6455_260485)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 21C32 19.8954 31.1046 19 30 19V18.5C30 17.1193 28.8807 16 27.5 16C26.1193 16 25 17.1193 25 18.5V19C23.8954 19 23 19.8954 23 21V24C23 25.1046 23.8954 26 25 26H30C31.1046 26 32 25.1046 32 24V21ZM28.5 18.5V19H26.5V18.5C26.5 17.9477 26.9477 17.5 27.5 17.5C28.0523 17.5 28.5 17.9477 28.5 18.5ZM27.5 21C28.325 21 29 21.675 29 22.5C29 23.325 28.325 24 27.5 24C26.675 24 26 23.325 26 22.5C26 21.675 26.675 21 27.5 21Z" fill="#333333"></path>
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_260485">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-lock-4">
<g clip-path="url(#clip0_6455_180141)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 21C32 19.8954 31.1046 19 30 19V18.5C30 17.1193 28.8807 16 27.5 16C26.1193 16 25 17.1193 25 18.5V19C23.8954 19 23 19.8954 23 21V24C23 25.1046 23.8954 26 25 26H30C31.1046 26 32 25.1046 32 24V21ZM28.5 18.5V19H26.5V18.5C26.5 17.9477 26.9477 17.5 27.5 17.5C28.0523 17.5 28.5 17.9477 28.5 18.5ZM27.5 21C28.325 21 29 21.675 29 22.5C29 23.325 28.325 24 27.5 24C26.675 24 26 23.325 26 22.5C26 21.675 26.675 21 27.5 21Z" fill="#333333"></path>
<path d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_180141">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-nonet-0">
<g clip-path="url(#clip0_6455_260708)">
<path d="M26.14 16.4935C26.0649 15.6922 26.6952 15 27.5 15C28.3048 15 28.9351 15.6922 28.86 16.4935L28.32 22.2533C28.2803 22.6765 27.9251 23 27.5 23C27.0749 23 26.7197 22.6765 26.68 22.2533L26.14 16.4935Z" fill="#333333"></path>
<circle cx="27.5" cy="25" r="1" fill="#333333"></circle>
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path opacity="0.4" d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_260708">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-nonet-1">
<g clip-path="url(#clip0_6455_260679)">
<path d="M26.14 16.4935C26.0649 15.6922 26.6952 15 27.5 15C28.3048 15 28.9351 15.6922 28.86 16.4935L28.32 22.2533C28.2803 22.6765 27.9251 23 27.5 23C27.0749 23 26.7197 22.6765 26.68 22.2533L26.14 16.4935Z" fill="#333333"></path>
<circle cx="27.5" cy="25" r="1" fill="#333333"></circle>
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_260679">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-nonet-2">
<g clip-path="url(#clip0_6455_260648)">
<path d="M26.14 16.4935C26.0649 15.6922 26.6952 15 27.5 15C28.3048 15 28.9351 15.6922 28.86 16.4935L28.32 22.2533C28.2803 22.6765 27.9251 23 27.5 23C27.0749 23 26.7197 22.6765 26.68 22.2533L26.14 16.4935Z" fill="#333333"></path>
<circle cx="27.5" cy="25" r="1" fill="#333333"></circle>
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_260648">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-nonet-3">
<g clip-path="url(#clip0_6455_260619)">
<path d="M26.14 16.4935C26.0649 15.6922 26.6952 15 27.5 15C28.3048 15 28.9351 15.6922 28.86 16.4935L28.32 22.2533C28.2803 22.6765 27.9251 23 27.5 23C27.0749 23 26.7197 22.6765 26.68 22.2533L26.14 16.4935Z" fill="#333333"></path>
<circle cx="27.5" cy="25" r="1" fill="#333333"></circle>
<path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_260619">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
<symbol viewBox="0 0 32 32" id="ffont-wifi-permissions">
<g clip-path="url(#clip0_6455_180178)">
<path d="M26.14 16.4935C26.0649 15.6922 26.6952 15 27.5 15C28.3048 15 28.9351 15.6922 28.86 16.4935L28.32 22.2533C28.2803 22.6765 27.9251 23 27.5 23C27.0749 23 26.7197 22.6765 26.68 22.2533L26.14 16.4935Z" fill="#333333"></path>
<circle cx="27.5" cy="25" r="1" fill="#333333"></circle>
<path d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
<path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
<path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
<path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
</g>
<defs>
<clippath id="clip0_6455_180178">
<rect width="32" height="32" fill="white"></rect>
</clippath>
</defs>
</symbol>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

48
src/test/panels/iconfont/iconfont-style.ts Normal file
View File

@ -0,0 +1,48 @@
import {css, CSSResult} from 'lit'
import './iconfont/iconfont-signal.css'
import './iconfont/iconfont-wifi.css'
export const iconFontStyles: CSSResult = css`
@font-face {
font-family: "iconfont-signal"; /* Project id 3582390 */
/* Color fonts */
src:
url('iconfont.ttf?t=1667956429504') format('truetype');
}
@font-face {
font-family: "iconfont-wifi"; /* Project id 3582390 */
/* Color fonts */
src:
url('iconfont.ttf?t=1667957389350') format('truetype');
}
.iconfont-signal {
font-family: "iconfont-signal" !important;
font-size: 32px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
width: 40px;
height: 40px;
margin: 0 20px;
}
.iconfont-wifi {
font-family: "iconfont-wifi" !important;
font-size: 32px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
width: 40px;
height: 40px;
margin: 0 20px;
}
.icon {
display: inline-block;
width: 40px;
height: 40px;
}
h3 {
color: red;
}
`

553
src/test/panels/iconfont/iconfont.ts Normal file
View File

@ -0,0 +1,553 @@
import {
html,
LitElement,
CSSResultArray,
} from 'lit'
import {customElement} from 'lit/decorators.js'
import {iconFontStyles} from './iconfont-style'
@customElement('panel-iconfont')
export class PanelIconFont extends LitElement {
public icondata_signal = {
"id": "3582390",
"name": "多色-signal",
"font_family": "iconfont-signal",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "32701896",
"name": "flow-none",
"font_class": "flow-none",
"unicode": "e664",
"unicode_decimal": 58980
},
{
"icon_id": "32701897",
"name": "flow-down",
"font_class": "flow-down",
"unicode": "e665",
"unicode_decimal": 58981
},
{
"icon_id": "32701898",
"name": "flow-up",
"font_class": "flow-up",
"unicode": "e666",
"unicode_decimal": 58982
},
{
"icon_id": "32701899",
"name": "flow-updown",
"font_class": "flow-updown",
"unicode": "e667",
"unicode_decimal": 58983
},
{
"icon_id": "32701900",
"name": "signal-0",
"font_class": "signal-0",
"unicode": "e668",
"unicode_decimal": 58984
},
{
"icon_id": "32701901",
"name": "signal-1",
"font_class": "signal-1",
"unicode": "e669",
"unicode_decimal": 58985
},
{
"icon_id": "32701902",
"name": "signal-2",
"font_class": "signal-2",
"unicode": "e66a",
"unicode_decimal": 58986
},
{
"icon_id": "32701903",
"name": "signal-2g-0",
"font_class": "signal-2g-0",
"unicode": "e66b",
"unicode_decimal": 58987
},
{
"icon_id": "32701904",
"name": "signal-2g-1",
"font_class": "signal-2g-1",
"unicode": "e66c",
"unicode_decimal": 58988
},
{
"icon_id": "32701905",
"name": "signal-2g-3",
"font_class": "signal-2g-3",
"unicode": "e66d",
"unicode_decimal": 58989
},
{
"icon_id": "32701906",
"name": "signal-2g-2",
"font_class": "signal-2g-2",
"unicode": "e66e",
"unicode_decimal": 58990
},
{
"icon_id": "32701907",
"name": "signal-2g-4",
"font_class": "signal-2g-4",
"unicode": "e66f",
"unicode_decimal": 58991
},
{
"icon_id": "32701908",
"name": "signal-3",
"font_class": "signal-3",
"unicode": "e670",
"unicode_decimal": 58992
},
{
"icon_id": "32701909",
"name": "signal-3g-0",
"font_class": "signal-3g-0",
"unicode": "e671",
"unicode_decimal": 58993
},
{
"icon_id": "32701910",
"name": "signal-3g-1",
"font_class": "signal-3g-1",
"unicode": "e672",
"unicode_decimal": 58994
},
{
"icon_id": "32701911",
"name": "signal-3g-2",
"font_class": "signal-3g-2",
"unicode": "e673",
"unicode_decimal": 58995
},
{
"icon_id": "32701912",
"name": "signal-3g-3",
"font_class": "signal-3g-3",
"unicode": "e674",
"unicode_decimal": 58996
},
{
"icon_id": "32701913",
"name": "signal-4g-0",
"font_class": "signal-4g-0",
"unicode": "e675",
"unicode_decimal": 58997
},
{
"icon_id": "32701914",
"name": "signal-3g-4",
"font_class": "signal-3g-4",
"unicode": "e676",
"unicode_decimal": 58998
},
{
"icon_id": "32701915",
"name": "signal-4g-1",
"font_class": "signal-4g-1",
"unicode": "e677",
"unicode_decimal": 58999
},
{
"icon_id": "32701916",
"name": "signal-4",
"font_class": "signal-4",
"unicode": "e678",
"unicode_decimal": 59000
},
{
"icon_id": "32701917",
"name": "signal-4g-2",
"font_class": "signal-4g-2",
"unicode": "e679",
"unicode_decimal": 59001
},
{
"icon_id": "32701918",
"name": "signal-5g-0",
"font_class": "signal-5g-0",
"unicode": "e67a",
"unicode_decimal": 59002
},
{
"icon_id": "32701919",
"name": "signal-5g-2",
"font_class": "signal-5g-2",
"unicode": "e67b",
"unicode_decimal": 59003
},
{
"icon_id": "32701920",
"name": "signal-4g-4",
"font_class": "signal-4g-4",
"unicode": "e67c",
"unicode_decimal": 59004
},
{
"icon_id": "32701921",
"name": "signal-5g-1",
"font_class": "signal-5g-1",
"unicode": "e67d",
"unicode_decimal": 59005
},
{
"icon_id": "32701922",
"name": "signal-4g-3",
"font_class": "signal-4g-3",
"unicode": "e67e",
"unicode_decimal": 59006
},
{
"icon_id": "32701923",
"name": "signal-5g-3",
"font_class": "signal-5g-3",
"unicode": "e67f",
"unicode_decimal": 59007
},
{
"icon_id": "32701924",
"name": "signal-5g-4",
"font_class": "signal-5g-4",
"unicode": "e680",
"unicode_decimal": 59008
},
{
"icon_id": "32701925",
"name": "signal-e-1",
"font_class": "signal-e-1",
"unicode": "e681",
"unicode_decimal": 59009
},
{
"icon_id": "32701926",
"name": "signal-e-0",
"font_class": "signal-e-0",
"unicode": "e682",
"unicode_decimal": 59010
},
{
"icon_id": "32701927",
"name": "signal-e-3",
"font_class": "signal-e-3",
"unicode": "e683",
"unicode_decimal": 59011
},
{
"icon_id": "32701928",
"name": "signal-roaming",
"font_class": "signal-roaming",
"unicode": "e684",
"unicode_decimal": 59012
},
{
"icon_id": "32701929",
"name": "signal-e-4",
"font_class": "signal-e-4",
"unicode": "e685",
"unicode_decimal": 59013
},
{
"icon_id": "32701930",
"name": "signal-open-card",
"font_class": "signal-open-card",
"unicode": "e686",
"unicode_decimal": 59014
},
{
"icon_id": "32701932",
"name": "signal-e-2",
"font_class": "signal-e-2",
"unicode": "e688",
"unicode_decimal": 59016
}
]
}
public icondata_wifi = {
"id": "3756669",
"name": "多色-wifi",
"font_family": "iconfont-wifi",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "32723522",
"name": "wifi-1",
"font_class": "wifi-1",
"unicode": "e679",
"unicode_decimal": 59001
},
{
"icon_id": "32723523",
"name": "wifi-0",
"font_class": "wifi-0",
"unicode": "e67a",
"unicode_decimal": 59002
},
{
"icon_id": "32723524",
"name": "wifi-2",
"font_class": "wifi-2",
"unicode": "e67b",
"unicode_decimal": 59003
},
{
"icon_id": "32723525",
"name": "wifi-lock-1",
"font_class": "wifi-lock-1",
"unicode": "e67c",
"unicode_decimal": 59004
},
{
"icon_id": "32723526",
"name": "wifi-lock-2",
"font_class": "wifi-lock-2",
"unicode": "e67d",
"unicode_decimal": 59005
},
{
"icon_id": "32723527",
"name": "wifi-3",
"font_class": "wifi-3",
"unicode": "e67e",
"unicode_decimal": 59006
},
{
"icon_id": "32723528",
"name": "wifi-lock-3",
"font_class": "wifi-lock-3",
"unicode": "e67f",
"unicode_decimal": 59007
},
{
"icon_id": "32723529",
"name": "wifi-nonet-0",
"font_class": "wifi-nonet-0",
"unicode": "e680",
"unicode_decimal": 59008
},
{
"icon_id": "32723530",
"name": "wifi-lock-0",
"font_class": "wifi-lock-0",
"unicode": "e681",
"unicode_decimal": 59009
},
{
"icon_id": "32723531",
"name": "wifi-nonet-1",
"font_class": "wifi-nonet-1",
"unicode": "e682",
"unicode_decimal": 59010
},
{
"icon_id": "32723532",
"name": "wifi-lock-4",
"font_class": "wifi-lock-4",
"unicode": "e683",
"unicode_decimal": 59011
},
{
"icon_id": "32723533",
"name": "wifi-permissions",
"font_class": "wifi-permissions",
"unicode": "e684",
"unicode_decimal": 59012
},
{
"icon_id": "32723534",
"name": "wifi-nonet-2",
"font_class": "wifi-nonet-2",
"unicode": "e685",
"unicode_decimal": 59013
},
{
"icon_id": "32723535",
"name": "wifi-nonet-3",
"font_class": "wifi-nonet-3",
"unicode": "e686",
"unicode_decimal": 59014
},
{
"icon_id": "32723615",
"name": "wifi-4",
"font_class": "wifi-4",
"unicode": "e687",
"unicode_decimal": 59015
}
]
}
initSignalIcon() {
let html = ''
html += '<h3>signal字体库iconfont-signal</h3>'
for (let i = 0; i < this.icondata_signal.glyphs.length; i++) {
html +=
'<span class="iconfont-signal">&#x' +
this.icondata_signal.glyphs[i].unicode +
';</span>'
html +=
'<span class="icon-name">' +
this.icondata_signal.glyphs[i].name +
'</span><hr/>'
}
let node = document.createElement('div')
node.className = 'p-signal'
node.innerHTML = html
this.shadowRoot!.querySelector('.abc')!.appendChild(node)
}
initWifiIcon() {
let html = ''
html += '<h3>WIFI字体库iconfont-wifi</h3>'
for (let i = 0; i < this.icondata_wifi.glyphs.length; i++) {
html +=
'<span class="iconfont-wifi">&#x' +
this.icondata_wifi.glyphs[i].unicode +
';</span>'
html +=
'<span class="icon-name">' +
this.icondata_wifi.glyphs[i].name +
'</span><hr/>'
}
let node = document.createElement('div')
node.className = 'p-wifi'
node.innerHTML = html
this.shadowRoot!.querySelector('.abc')!.appendChild(node)
}
firstUpdated() {
this.initSignalIcon()
this.initWifiIcon()
}
render() {
return html`
<div class="abc"></div>
<div>
<h3>使用ffont.svg的symbol方法展示</h3>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-QQ"
></use>
</svg>
<h4>ffont-QQ</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-nonet-1"
></use>
</svg>
<h4>ffont-wifi-nonet-1</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-nonet-2"
></use>
</svg>
<h4>ffont-wifi-nonet-2</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-nonet-3"
></use>
</svg>
<h4>ffont-wifi-nonet-3</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-1"
></use>
</svg>
<h4>ffont-wifi-1</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-2"
></use>
</svg>
<h4>ffont-wifi-2</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-3"
></use>
</svg>
<h4>ffont-wifi-3</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-4"
></use>
</svg>
<h4>ffont-wifi-4</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-signal-0"
></use>
</svg>
<h4>ffont-signal-0</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-signal-1"
></use>
</svg>
<h4>ffont-signal-1</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-signal-2"
></use>
</svg>
<h4>ffont-signal-2</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-signal-3"
></use>
</svg>
<h4>ffont-signal-3</h4>
</li>
<li class="symbol">
<svg class="icon" aria-hidden="true">
<use
xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-signal-4"
></use>
</svg>
<h4>ffont-signal-4</h4>
</li>
</div>
`
}
public static override get styles(): CSSResultArray {
return [iconFontStyles]
}
}
declare global {
interface HTMLElementTagNameMap {
'panel-iconfont': PanelIconFont
}
}

159
src/test/panels/iconfont/iconfont/iconfont-signal.css Normal file
View File

@ -0,0 +1,159 @@
@font-face {
font-family: "iconfont-signal"; /* Project id 3582390 */
/* Color fonts */
src:
url('iconfont-signal.ttf?t=1667956429504') format('truetype');
}
.iconfont-signal {
font-family: "iconfont-signal" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-flow-none:before {
content: "\e664";
}
.icon-flow-down:before {
content: "\e665";
}
.icon-flow-up:before {
content: "\e666";
}
.icon-flow-updown:before {
content: "\e667";
}
.icon-signal-0:before {
content: "\e668";
}
.icon-signal-1:before {
content: "\e669";
}
.icon-signal-2:before {
content: "\e66a";
}
.icon-signal-2g-0:before {
content: "\e66b";
}
.icon-signal-2g-1:before {
content: "\e66c";
}
.icon-signal-2g-3:before {
content: "\e66d";
}
.icon-signal-2g-2:before {
content: "\e66e";
}
.icon-signal-2g-4:before {
content: "\e66f";
}
.icon-signal-3:before {
content: "\e670";
}
.icon-signal-3g-0:before {
content: "\e671";
}
.icon-signal-3g-1:before {
content: "\e672";
}
.icon-signal-3g-2:before {
content: "\e673";
}
.icon-signal-3g-3:before {
content: "\e674";
}
.icon-signal-4g-0:before {
content: "\e675";
}
.icon-signal-3g-4:before {
content: "\e676";
}
.icon-signal-4g-1:before {
content: "\e677";
}
.icon-signal-4:before {
content: "\e678";
}
.icon-signal-4g-2:before {
content: "\e679";
}
.icon-signal-5g-0:before {
content: "\e67a";
}
.icon-signal-5g-2:before {
content: "\e67b";
}
.icon-signal-4g-4:before {
content: "\e67c";
}
.icon-signal-5g-1:before {
content: "\e67d";
}
.icon-signal-4g-3:before {
content: "\e67e";
}
.icon-signal-5g-3:before {
content: "\e67f";
}
.icon-signal-5g-4:before {
content: "\e680";
}
.icon-signal-e-1:before {
content: "\e681";
}
.icon-signal-e-0:before {
content: "\e682";
}
.icon-signal-e-3:before {
content: "\e683";
}
.icon-signal-roaming:before {
content: "\e684";
}
.icon-signal-e-4:before {
content: "\e685";
}
.icon-signal-open-card:before {
content: "\e686";
}
.icon-signal-e-2:before {
content: "\e688";
}

261
src/test/panels/iconfont/iconfont/iconfont-signal.json Normal file
View File

@ -0,0 +1,261 @@
{
"id": "3582390",
"name": "多色-signal",
"font_family": "iconfont-signal",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "32701896",
"name": "flow-none",
"font_class": "flow-none",
"unicode": "e664",
"unicode_decimal": 58980
},
{
"icon_id": "32701897",
"name": "flow-down",
"font_class": "flow-down",
"unicode": "e665",
"unicode_decimal": 58981
},
{
"icon_id": "32701898",
"name": "flow-up",
"font_class": "flow-up",
"unicode": "e666",
"unicode_decimal": 58982
},
{
"icon_id": "32701899",
"name": "flow-updown",
"font_class": "flow-updown",
"unicode": "e667",
"unicode_decimal": 58983
},
{
"icon_id": "32701900",
"name": "signal-0",
"font_class": "signal-0",
"unicode": "e668",
"unicode_decimal": 58984
},
{
"icon_id": "32701901",
"name": "signal-1",
"font_class": "signal-1",
"unicode": "e669",
"unicode_decimal": 58985
},
{
"icon_id": "32701902",
"name": "signal-2",
"font_class": "signal-2",
"unicode": "e66a",
"unicode_decimal": 58986
},
{
"icon_id": "32701903",
"name": "signal-2g-0",
"font_class": "signal-2g-0",
"unicode": "e66b",
"unicode_decimal": 58987
},
{
"icon_id": "32701904",
"name": "signal-2g-1",
"font_class": "signal-2g-1",
"unicode": "e66c",
"unicode_decimal": 58988
},
{
"icon_id": "32701905",
"name": "signal-2g-3",
"font_class": "signal-2g-3",
"unicode": "e66d",
"unicode_decimal": 58989
},
{
"icon_id": "32701906",
"name": "signal-2g-2",
"font_class": "signal-2g-2",
"unicode": "e66e",
"unicode_decimal": 58990
},
{
"icon_id": "32701907",
"name": "signal-2g-4",
"font_class": "signal-2g-4",
"unicode": "e66f",
"unicode_decimal": 58991
},
{
"icon_id": "32701908",
"name": "signal-3",
"font_class": "signal-3",
"unicode": "e670",
"unicode_decimal": 58992
},
{
"icon_id": "32701909",
"name": "signal-3g-0",
"font_class": "signal-3g-0",
"unicode": "e671",
"unicode_decimal": 58993
},
{
"icon_id": "32701910",
"name": "signal-3g-1",
"font_class": "signal-3g-1",
"unicode": "e672",
"unicode_decimal": 58994
},
{
"icon_id": "32701911",
"name": "signal-3g-2",
"font_class": "signal-3g-2",
"unicode": "e673",
"unicode_decimal": 58995
},
{
"icon_id": "32701912",
"name": "signal-3g-3",
"font_class": "signal-3g-3",
"unicode": "e674",
"unicode_decimal": 58996
},
{
"icon_id": "32701913",
"name": "signal-4g-0",
"font_class": "signal-4g-0",
"unicode": "e675",
"unicode_decimal": 58997
},
{
"icon_id": "32701914",
"name": "signal-3g-4",
"font_class": "signal-3g-4",
"unicode": "e676",
"unicode_decimal": 58998
},
{
"icon_id": "32701915",
"name": "signal-4g-1",
"font_class": "signal-4g-1",
"unicode": "e677",
"unicode_decimal": 58999
},
{
"icon_id": "32701916",
"name": "signal-4",
"font_class": "signal-4",
"unicode": "e678",
"unicode_decimal": 59000
},
{
"icon_id": "32701917",
"name": "signal-4g-2",
"font_class": "signal-4g-2",
"unicode": "e679",
"unicode_decimal": 59001
},
{
"icon_id": "32701918",
"name": "signal-5g-0",
"font_class": "signal-5g-0",
"unicode": "e67a",
"unicode_decimal": 59002
},
{
"icon_id": "32701919",
"name": "signal-5g-2",
"font_class": "signal-5g-2",
"unicode": "e67b",
"unicode_decimal": 59003
},
{
"icon_id": "32701920",
"name": "signal-4g-4",
"font_class": "signal-4g-4",
"unicode": "e67c",
"unicode_decimal": 59004
},
{
"icon_id": "32701921",
"name": "signal-5g-1",
"font_class": "signal-5g-1",
"unicode": "e67d",
"unicode_decimal": 59005
},
{
"icon_id": "32701922",
"name": "signal-4g-3",
"font_class": "signal-4g-3",
"unicode": "e67e",
"unicode_decimal": 59006
},
{
"icon_id": "32701923",
"name": "signal-5g-3",
"font_class": "signal-5g-3",
"unicode": "e67f",
"unicode_decimal": 59007
},
{
"icon_id": "32701924",
"name": "signal-5g-4",
"font_class": "signal-5g-4",
"unicode": "e680",
"unicode_decimal": 59008
},
{
"icon_id": "32701925",
"name": "signal-e-1",
"font_class": "signal-e-1",
"unicode": "e681",
"unicode_decimal": 59009
},
{
"icon_id": "32701926",
"name": "signal-e-0",
"font_class": "signal-e-0",
"unicode": "e682",
"unicode_decimal": 59010
},
{
"icon_id": "32701927",
"name": "signal-e-3",
"font_class": "signal-e-3",
"unicode": "e683",
"unicode_decimal": 59011
},
{
"icon_id": "32701928",
"name": "signal-roaming",
"font_class": "signal-roaming",
"unicode": "e684",
"unicode_decimal": 59012
},
{
"icon_id": "32701929",
"name": "signal-e-4",
"font_class": "signal-e-4",
"unicode": "e685",
"unicode_decimal": 59013
},
{
"icon_id": "32701930",
"name": "signal-open-card",
"font_class": "signal-open-card",
"unicode": "e686",
"unicode_decimal": 59014
},
{
"icon_id": "32701932",
"name": "signal-e-2",
"font_class": "signal-e-2",
"unicode": "e688",
"unicode_decimal": 59016
}
]
}

BIN
src/test/panels/iconfont/iconfont/iconfont-signal.ttf Normal file
View File

Binary file not shown.

75
src/test/panels/iconfont/iconfont/iconfont-wifi.css Normal file
View File

@ -0,0 +1,75 @@
@font-face {
font-family: "iconfont-wifi"; /* Project id 3756669 */
/* Color fonts */
src:
url('iconfont-wifi.ttf?t=1667957389350') format('truetype');
}
.iconfont-wifi {
font-family: "iconfont-wifi" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-wifi-1:before {
content: "\e679";
}
.icon-wifi-0:before {
content: "\e67a";
}
.icon-wifi-2:before {
content: "\e67b";
}
.icon-wifi-lock-1:before {
content: "\e67c";
}
.icon-wifi-lock-2:before {
content: "\e67d";
}
.icon-wifi-3:before {
content: "\e67e";
}
.icon-wifi-lock-3:before {
content: "\e67f";
}
.icon-wifi-nonet-0:before {
content: "\e680";
}
.icon-wifi-lock-0:before {
content: "\e681";
}
.icon-wifi-nonet-1:before {
content: "\e682";
}
.icon-wifi-lock-4:before {
content: "\e683";
}
.icon-wifi-permissions:before {
content: "\e684";
}
.icon-wifi-nonet-2:before {
content: "\e685";
}
.icon-wifi-nonet-3:before {
content: "\e686";
}
.icon-wifi-4:before {
content: "\e687";
}

114
src/test/panels/iconfont/iconfont/iconfont-wifi.json Normal file
View File

@ -0,0 +1,114 @@
{
"id": "3756669",
"name": "多色-wifi",
"font_family": "iconfont-wifi",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "32723522",
"name": "wifi-1",
"font_class": "wifi-1",
"unicode": "e679",
"unicode_decimal": 59001
},
{
"icon_id": "32723523",
"name": "wifi-0",
"font_class": "wifi-0",
"unicode": "e67a",
"unicode_decimal": 59002
},
{
"icon_id": "32723524",
"name": "wifi-2",
"font_class": "wifi-2",
"unicode": "e67b",
"unicode_decimal": 59003
},
{
"icon_id": "32723525",
"name": "wifi-lock-1",
"font_class": "wifi-lock-1",
"unicode": "e67c",
"unicode_decimal": 59004
},
{
"icon_id": "32723526",
"name": "wifi-lock-2",
"font_class": "wifi-lock-2",
"unicode": "e67d",
"unicode_decimal": 59005
},
{
"icon_id": "32723527",
"name": "wifi-3",
"font_class": "wifi-3",
"unicode": "e67e",
"unicode_decimal": 59006
},
{
"icon_id": "32723528",
"name": "wifi-lock-3",
"font_class": "wifi-lock-3",
"unicode": "e67f",
"unicode_decimal": 59007
},
{
"icon_id": "32723529",
"name": "wifi-nonet-0",
"font_class": "wifi-nonet-0",
"unicode": "e680",
"unicode_decimal": 59008
},
{
"icon_id": "32723530",
"name": "wifi-lock-0",
"font_class": "wifi-lock-0",
"unicode": "e681",
"unicode_decimal": 59009
},
{
"icon_id": "32723531",
"name": "wifi-nonet-1",
"font_class": "wifi-nonet-1",
"unicode": "e682",
"unicode_decimal": 59010
},
{
"icon_id": "32723532",
"name": "wifi-lock-4",
"font_class": "wifi-lock-4",
"unicode": "e683",
"unicode_decimal": 59011
},
{
"icon_id": "32723533",
"name": "wifi-permissions",
"font_class": "wifi-permissions",
"unicode": "e684",
"unicode_decimal": 59012
},
{
"icon_id": "32723534",
"name": "wifi-nonet-2",
"font_class": "wifi-nonet-2",
"unicode": "e685",
"unicode_decimal": 59013
},
{
"icon_id": "32723535",
"name": "wifi-nonet-3",
"font_class": "wifi-nonet-3",
"unicode": "e686",
"unicode_decimal": 59014
},
{
"icon_id": "32723615",
"name": "wifi-4",
"font_class": "wifi-4",
"unicode": "e687",
"unicode_decimal": 59015
}
]
}

BIN
src/test/panels/iconfont/iconfont/iconfont-wifi.ttf Normal file
View File

Binary file not shown.

32
src/test/panels/root.ts
View File

@ -18,6 +18,7 @@ import './confirm/confirm'
import './container/container'
import './container/homescreen-container'
import './control-center/control-center'
import './dialog/dialog'
import './digicipher/digicipher'
import './icon/icon'
import './gauss_canvas/gauss-blur'
@ -37,8 +38,10 @@ import './slider/slider'
import './switch/switch'
import './toast/toast'
import './weather/weather'
import './iconfont/iconfont'
import './swiper/swiper'
import './animation/animation'
type SEID = string
@customElement('panel-root')
@ -301,7 +304,7 @@ export class PanelRoot extends LitElement {
iconcolor="blue"
href="#battery"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="电池"
@ -309,6 +312,23 @@ export class PanelRoot extends LitElement {
iconcolor="red"
href="#batterysquare"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="动效"
icon="add"
iconcolor="purple"
href="#animation"
></star-li>
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="IconFont图标"
icon="all-day"
iconcolor="yellow"
href="#iconfont"
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="时钟">
@ -375,6 +395,16 @@ export class PanelRoot extends LitElement {
></star-li>
</star-ul>
<star-ul type=${UlType.ONLY_HEADER} title="生产用弹窗">
<star-li
type=${LiType.ICON_LABEL}
label="浏览器模态弹窗"
icon="play-circle"
iconcolor="red"
href="#dialog"
></star-li>
</star-ul>
<star-ul type=${UlType.BASE}>
<star-li
type=${LiType.ONLY_EDIT}

24
src/test/panels/toast/toast.ts
View File

@ -1,13 +1,37 @@
import {html, LitElement, CSSResultArray} from 'lit'
import {customElement} from 'lit/decorators.js'
import {sharedStyles} from '../../../components/toast/toast-styles'
import '../../../components/button'
import {StarToast} from '../../../components/toast'
@customElement('panel-toast')
export class PanelToast extends LitElement {
toast: StarToast = new StarToast({information: 'test'})
constructor() {
super()
}
public static override get styles(): CSSResultArray {
return [sharedStyles]
}
show() {
if (this.toast.open) {
this.toast.hide()
} else {
this.toast.show()
}
}
render() {
return html`
<star-button
type="normal"
class="$1"
@click=${this.show}
label="弹出通知"
></star-button>
`
}
render_bak() {
return html`
<div>
<h3>普通的</h3>

12
src/widgets/gaia-widget.ts
View File

@ -365,11 +365,15 @@ export default class GaiaWidget extends StarBaseElement {
const dom = this.shadowRoot!.querySelector(operator.target)
if (operator.data[0] === 'src' && !/^http:\/\//.test(operator.data[1])) {
let str = operator.data[1].replace(/^\//, '')
operator.data[1] = this.origin + '/' + str
for (const key in operator.data) {
let value = operator.data[key]
if (key === 'src' && !/^http:\/\//.test(value)) {
let str = value.replace(/^\//, '')
value = this.origin + '/' + str
}
dom.setAttribute(key, value)
}
dom.setAttribute(...operator.data)
})
}