init: 初始化提交

master
xiaoshuaiwen 7 days ago
commit 10c63ed51f

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

@ -0,0 +1,371 @@
# 康策 CSM 系统 API 接口文档
> 自动生成时间2025-07-11
> Swagger UIhttp://localhost:5276/swagger
> 基地址http://localhost:5276
---
## 📋 接口概览
| Controller | 路由前缀 | 接口数 | 是否需要认证 |
|---|---|---|---|
| AdminController | `/api/admin` | 14 | 除登录外均需 JWT |
| HospitalController | `/api/hospital` | 9 | 除登录外均需 JWT |
| UploadController | `/api/upload` | 2 | 上传需 JWT |
---
## 🔐 认证说明
```
Authorization: Bearer {token}
```
- 调用登录接口获取 Token
- Token 有效期1440 分钟24 小时)
- 签发者CSM_System
- 受众CSM_Client
---
## 📐 统一响应格式
所有接口均返回 `ApiResponse``ApiResponse<T>`
```json
// 成功
{ "code": 200, "message": "success", "data": { ... } }
// 错误
{ "code": 400, "message": "参数错误", "data": null }
{ "code": 401, "message": "未授权", "data": null }
{ "code": 403, "message": "无权限", "data": null }
{ "code": 404, "message": "资源不存在", "data": null }
{ "code": 500, "message": "服务器内部错误", "data": null }
```
分页接口返回 `ApiResponse<PagedResult<T>>`
```json
{
"code": 200,
"message": "success",
"data": {
"total": 100,
"page": 1,
"pageSize": 10,
"list": [...]
}
}
```
---
## 一、管理端 API — `/api/admin`
### 1.1 登录
> **POST** `/api/admin/login` · 无需认证
**请求体:**
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| username | string | 是 | 用户名 |
| password | string | 是 | 密码 |
**请求示例:**
```json
{ "username": "admin", "password": "123456" }
```
**响应数据:**
| 字段 | 类型 | 说明 |
|---|---|---|
| token | string | JWT Token |
| userId | int | 用户 ID |
| userName | string | 用户名 |
| userType | string | 用户类型Admin/Hospital |
| hospitalId | int? | 所属医院 IDAdmin 为 null |
| hospitalName | string | 所属医院名称 |
| role | string | 角色 |
| name | string | 姓名 |
> ⚠️ 仅允许 `userType == "Admin"` 的账号登录,否则返回 403
---
### 1.2 服务工单
#### 获取工单列表
> **GET** `/api/admin/orders` · ✅ 需认证
| 查询参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| page | int | 否 | 页码,默认 1 |
| pageSize | int | 否 | 每页条数,默认 10 |
| status | string | 否 | 状态筛选 |
| priority | string | 否 | 优先级筛选(高/中/低) |
| type | string | 否 | 服务类型筛选 |
| keyword | string | 否 | 关键词搜索 |
| startDate | string | 否 | 开始时间 |
| endDate | string | 否 | 结束时间 |
| hospitalId | int | 否 | 医院 ID 筛选 |
#### 获取工单详情
> **GET** `/api/admin/orders/{id}` · ✅ 需认证
| 路径参数 | 类型 | 说明 |
|---|---|---|
| id | int | 工单 ID |
#### 管理端提交工单
> **POST** `/api/admin/orders` · ✅ 需认证
**请求体:**
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| title | string | 是 | 工单标题 |
| priority | string | 是 | 优先级(高/中/低) |
| serviceType | string | 是 | 服务类型 |
| description | string | 是 | 详细描述HTML |
| department | string | 否 | 科室 |
| submitter | string | 否 | 提交人 |
| colorTag | string | 否 | 颜色标签 |
| hospitalId | int | 否 | 指定医院 ID |
#### 处理工单
> **PUT** `/api/admin/orders/{id}/process` · ✅ 需认证
**路径参数:** `id` — 工单 ID
**请求体:**
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| processRemark | string | 是 | 处理备注HTML |
| status | string | 是 | 目标状态(如"已完成" |
---
### 1.3 医院信息
#### 获取医院列表
> **GET** `/api/admin/hospitals` · ✅ 需认证
| 查询参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| page | int | 否 | 页码,默认 1 |
| pageSize | int | 否 | 每页条数,默认 10 |
| keyword | string | 否 | 关键词搜索 |
| category | string | 否 | 类别筛选 |
#### 获取医院详情
> **GET** `/api/admin/hospitals/{id}` · ✅ 需认证
| 路径参数 | 类型 | 说明 |
|---|---|---|
| id | int | 医院 ID |
#### 添加医院
> **POST** `/api/admin/hospitals` · ✅ 需认证
**请求体:**
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| name | string | 是 | 医院名称 |
| customerCategory | string | 是 | 客户类别(如 A |
| contactDept | string | 否 | 联系部门 |
| contactPerson | string | 否 | 联系人 |
| contactPosition | string | 否 | 联系人职位 |
| contactPhone | string | 否 | 联系电话 |
| signDate | DateTime | 是 | 签约日期 |
| acceptDate | DateTime | 是 | 验收日期 |
| contractYears | int | 是 | 合同年限 |
| maintenanceEnd | DateTime | 是 | 维保到期日 |
| managerId | int | 否 | 负责人 ID |
| remark | string | 否 | 备注 |
#### 更新医院信息
> **PUT** `/api/admin/hospitals/{id}` · ✅ 需认证
请求体同「添加医院」
---
### 1.4 账号管理
#### 获取账号列表
> **GET** `/api/admin/accounts` · ✅ 需认证
| 查询参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| type | string | 否 | 用户类型Admin/Hospital |
| page | int | 否 | 页码 |
| pageSize | int | 否 | 每页条数 |
| keyword | string | 否 | 关键词搜索 |
#### 添加账号
> **POST** `/api/admin/accounts` · ✅ 需认证
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| username | string | 是 | 用户名 |
| password | string | 是 | 密码 |
| name | string | 是 | 姓名 |
| gender | string | 否 | 性别 |
| userType | string | 是 | 类型Admin/Hospital |
| hospitalId | int | 否 | 所属医院 ID |
| role | string | 否 | 角色 |
#### 编辑账号
> **PUT** `/api/admin/accounts/{id}` · ✅ 需认证
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| name | string | 否 | 姓名 |
| gender | string | 否 | 性别 |
| hospitalId | int | 否 | 所属医院 ID |
| role | string | 否 | 角色 |
#### 切换账号状态
> **PUT** `/api/admin/accounts/{id}/status` · ✅ 需认证
切换启用/禁用状态,无需请求体。
#### 重置密码
> **POST** `/api/admin/accounts/{id}/reset-password` · ✅ 需认证
重置为默认密码 `123456`,无需请求体。
---
## 二、医院端 API — `/api/hospital`
### 2.1 登录
> **POST** `/api/hospital/login` · 无需认证
请求体同管理端登录。
> ⚠️ 仅允许 `userType == "Hospital"` 的账号登录,否则返回 403
---
### 2.2 工作台
#### 获取统计数据
> **GET** `/api/hospital/workbench` · ✅ 需认证
| 查询参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| period | string | 否 | 统计周期month |
| start | DateTime | 否 | 开始日期 |
| end | DateTime | 否 | 结束日期 |
**响应数据:**
| 字段 | 类型 | 说明 |
|---|---|---|
| totalOrders | int | 总工单数 |
| completedOrders | int | 已完成数 |
| pendingOrders | int | 待处理数 |
| highPriorityOrders | int | 高优先级数 |
| trendData | array | 趋势图数据 `[{ date, submitCount, completeCount }]` |
---
### 2.3 工单管理
#### 我的工单列表
> **GET** `/api/hospital/orders` · ✅ 需认证
查询参数同管理端工单列表(不含 `hospitalId`,自动绑定当前医院)
#### 工单详情
> **GET** `/api/hospital/orders/{id}` · ✅ 需认证
| 路径参数 | 类型 | 说明 |
|---|---|---|
| id | int | 工单 ID |
返回工单详情(含附件列表 + 状态流转日志)
#### 快速提交工单
> **POST** `/api/hospital/orders` · ✅ 需认证
请求体同管理端提交工单(不含 `hospitalId`,自动绑定当前医院)
#### 编辑工单
> **PUT** `/api/hospital/orders/{id}` · ✅ 需认证
#### 取消工单
> **DELETE** `/api/hospital/orders/{id}` · ✅ 需认证
---
### 2.4 积分
#### 积分总览
> **GET** `/api/hospital/points` · ✅ 需认证
**响应:**
```json
{ "totalPoints": 0, "rewardCount": 0 }
```
#### 积分明细
> **GET** `/api/hospital/points/details` · ✅ 需认证
| 查询参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| page | int | 否 | 页码,默认 1 |
| pageSize | int | 否 | 每页条数,默认 10 |
**响应:**
```json
[{ "source": "string", "orderNo": "string", "changeAmount": 0, "description": "string", "createdAt": "2025-01-01" }]
```
---
## 三、附件上传下载 — `/api/upload`
### 3.1 上传附件
> **POST** `/api/upload` · ✅ 需认证
**请求格式:** `multipart/form-data`
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| orderNo | string | 是 | 关联工单号 |
| files | file[] | 是 | 文件列表 |
- 单文件最大50 MB
- 存储路径:`Uploads/Attachments/`
### 3.2 下载/预览附件
> **GET** `/api/upload/{fileName}` · 无需认证
| 路径参数 | 类型 | 说明 |
|---|---|---|
| fileName | string | 文件名 |
---
## 🏷️ 附录:状态码说明
| 状态码 | 说明 |
|---|---|
| 200 | 请求成功 |
| 400 | 参数校验失败 |
| 401 | 未登录或 Token 过期 |
| 403 | 无操作权限 |
| 404 | 资源不存在 |
| 500 | 服务器内部错误 |

@ -0,0 +1,5 @@
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

Binary file not shown.

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>康策CSM</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

7034
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,36 @@
{
"name": "micro-service",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.2",
"@jaames/iro": "^5.5.2",
"axios": "^1.13.2",
"dayjs": "^1.11.21",
"echarts": "^6.0.0",
"element-plus": "^2.11.8",
"pinia": "^3.0.4",
"pinia-plugin-persistedstate": "^4.7.1",
"qs": "^6.12.1",
"swiper": "^12.1.3",
"vue": "^3.5.24",
"vue-draggable-next": "^2.3.0",
"vue-echarts": "^8.0.1",
"vue-i18n": "^9.14.5",
"vue-router": "^4.6.3",
"wujie-vue3": "^1.0.29"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.1",
"fast-glob": "^3.3.3",
"sass-embedded": "^1.93.3",
"vite": "^7.2.2",
"vite-plugin-svg-icons": "^2.0.1"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

@ -0,0 +1,39 @@
<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import HospitalLayout from "@/components/layout/HospitalLayout.vue";
import AdminLayout from "@/components/layout/AdminLayout.vue";
// Element Plus
import zhCn from "element-plus/es/locale/lang/zh-cn";
const route = useRoute();
// 使 meta.layoutType
const layoutType = computed(() => {
if (route.meta?.layout === false) return "none";
return route.meta?.layoutType || "none";
});
</script>
<template>
<el-config-provider :locale="zhCn">
<router-view v-slot="{ Component }">
<!-- 无布局登录页 -->
<component v-if="layoutType === 'none' || !Component" :is="Component" />
<!-- 医院端顶部菜单布局 -->
<HospitalLayout v-else-if="layoutType === 'hospital'">
<component :is="Component" />
</HospitalLayout>
<!-- 管理端侧边栏布局 -->
<AdminLayout v-else-if="layoutType === 'admin'">
<component :is="Component" />
</AdminLayout>
<!-- 兜底 -->
<component v-else :is="Component" />
</router-view>
</el-config-provider>
</template>
<style></style>

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40.41633224487305" height="40.41632843017578" viewBox="0 0 40.41633224487305 40.41632843017578"><defs><clipPath id="master_svg0_50_262469/41_35480"><rect x="0" y="0" width="40.41633224487305" height="40.41632843017578" rx="6"/></clipPath></defs><g clip-path="url(#master_svg0_50_262469/41_35480)"><g><path d="M17.856854900000002,19.8377013L13.2903225,19.8377013C12.57459682,19.8377013,12,19.2631044,12,18.5473785L12,13.9808466C12,13.2752014,12.58467752,12.6905241,13.2903225,12.6905241L17.856854900000002,12.6905241C18.5725799,12.6905241,19.1471772,13.2651209,19.1471772,13.9808466L19.1471772,18.5473785C19.1471772,19.2631044,18.5725799,19.8377013,17.856854900000002,19.8377013ZM17.856854900000002,28.41633L13.2903225,28.41633C12.57459682,28.41633,12,27.841732999999998,12,27.126007L12,22.559475C12,21.843749000000003,12.57459682,21.269152599999998,13.2903225,21.269152599999998L17.856854900000002,21.269152599999998C18.5725799,21.269152599999998,19.1471772,21.843749000000003,19.1471772,22.559475L19.1471772,27.126007C19.1471772,27.831653,18.5725799,28.41633,17.856854900000002,28.41633ZM26.435482999999998,28.41633L21.868951799999998,28.41633C21.153225900000002,28.41633,20.5786285,27.841732999999998,20.5786285,27.126007L20.5786285,22.559475C20.5786285,21.843749000000003,21.153224,21.269152599999998,21.868951799999998,21.269152599999998L26.435482999999998,21.269152599999998C27.151209,21.269152599999998,27.725806,21.843749000000003,27.725806,22.559475L27.725806,27.126007C27.725806,27.831653,27.141129,28.41633,26.435482999999998,28.41633ZM28.038305,15.3618951L25.054434999999998,12.37802431C24.550402,11.87399197,23.733871,11.87399197,23.229837,12.37802431L20.2459669,15.3618951C19.7419357,15.8659272,19.7419357,16.6824603,20.2459669,17.1864915L23.229838,20.1703625C23.733871,20.6743946,24.550403,20.6743946,25.054436000000003,20.1703625L28.038307,17.1864915C28.542341,16.6723785,28.542341,15.8558464,28.038305,15.3618951ZM24.409274,18.7893143C24.268146,18.9304438,24.02621,18.9304438,23.885080000000002,18.7893143L21.6270161,16.53125C21.4858875,16.3901215,21.4858875,16.1481857,21.6270161,16.0070567L23.885080000000002,13.7489922C24.026209,13.6078631,24.268145,13.6078631,24.409274,13.7489922L26.667338,16.0070567C26.808467,16.1481857,26.808467,16.3901215,26.667338,16.53125L24.409274,18.7893143Z" fill="#ECF2FF" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_50_262469/40_35672"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_50_262469/40_35672)"><g><path d="M12.50013671875,16.2500166484375C12.48722371875,16.953390648437498,12.24304971875,17.5425166484375,11.76763721875,18.0175166484375C11.29222491875,18.4925176484375,10.70304871875,18.7366406484375,10.00013731875,18.7500156484375C9.29679921875,18.7371406484375,8.70763631875,18.4928916484375,8.23263691875,18.0175166484375C7.75763701875,17.5421406484375,7.51347401875,16.9528916484375,7.50013681875,16.2500166484375C7.50013681875,16.2500166484375,12.50013671875,16.2500166484375,12.50013671875,16.2500166484375C12.50013671875,16.2500166484375,12.50013671875,16.2500166484375,12.50013671875,16.2500166484375ZM16.25013671875,15.0000156484375C16.25013671875,15.0000156484375,2.61701166875,15.0000156484375,2.61701166875,15.0000156484375C2.40867793875,15.0000156484375,2.23284545875,14.9283916484375,2.08951171875,14.7850156484375C1.94617834675,14.6416416484375,1.87451171875,14.4627656484375,1.87451171875,14.2481416484375C1.87451171875,14.0335156484375,1.94617834675,13.8577666484375,2.08951171875,13.7206406484375C2.23284545875,13.5835526484375,2.40867793875,13.5087656484375,2.61701166875,13.4962656484375C2.61701166875,13.4962656484375,3.75013661875,13.4962656484375,3.75013661875,13.4962656484375C3.75013661875,13.4962656484375,3.75013661875,8.7500157484375,3.75013661875,8.7500157484375C3.77638671875,7.2133526484375,4.251599318749999,5.8885526484375,5.17576171875,4.7756400484375C6.09992411875,3.6627273484375,7.29138661875,2.9433523484375,8.75013681875,2.6175147484375003C8.73722411875,2.3829309484375,8.77951191875,2.1614735084375,8.87701221875,1.9531397184375C8.97451161875,1.7448059584375,9.12742421875,1.5754309284375,9.335761518750001,1.4450146684375C9.54409931875,1.3145980314375,9.76554921875,1.2493896484375002,10.00013731875,1.2493896484375C10.23472401875,1.2493896484374998,10.45617481875,1.3145980314375,10.66451171875,1.4450146684375C10.87284941875,1.5754309284375,11.02576161875,1.7448059584375,11.12326241875,1.9531397184375C11.22076221875,2.1614735084375,11.26304911875,2.3829309484375,11.25013731875,2.6175147484375003C12.73472471875,2.9562647484375,13.93263671875,3.6821024484375,14.84388671875,4.7950148484375C15.75513671875,5.9079275484375,16.223886718750002,7.2262649484375,16.25013671875,8.7500157484375C16.25013671875,8.7500157484375,16.25013671875,13.4962656484375,16.25013671875,13.4962656484375C16.25013671875,13.4962656484375,17.38326071875,13.4962656484375,17.38326071875,13.4962656484375C17.59163671875,13.5091786484375,17.76738771875,13.5839786484375,17.91076271875,13.7206406484375C18.05413671875,13.8572656484375,18.12576271875,14.0331406484375,18.12576271875,14.2481416484375C18.12576271875,14.4631416484375,18.05413671875,14.6421416484375,17.91076271875,14.7850156484375C17.76738771875,14.9278906484375,17.59163671875,14.9996416484375,17.38326071875,15.0000156484375C17.38326071875,15.0000156484375,16.25013671875,15.0000156484375,16.25013671875,15.0000156484375C16.25013671875,15.0000156484375,16.25013671875,15.0000156484375,16.25013671875,15.0000156484375C16.25013671875,15.0000156484375,16.25013671875,15.0000156484375,16.25013671875,15.0000156484375Z" fill="#D9ECFF" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 408 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g><g><path d="M12.03139,8.187483708541214C11.289895,8.187483708541214,10.60047,8.382797108541213,10.015338,8.732328308541213C9.9943838,8.722017208541212,9.9835892,8.701078308541213,9.9631109,8.691235408541212C11.1756,7.724201608541213,11.853756,6.264511008541213,11.780734,4.701851708541213C11.676279,2.1626276085412126,9.5664091,0.0962171315412128,6.9866548,0.0037169368412127896C5.6184378,-0.04768942145878721,4.3127656,0.4354365785412128,3.3206136,1.3709072085412128C2.3284616,2.306377808541213,1.7852386,3.570912008541213,1.7852386,4.917789808541213C1.7852386,6.398105508541213,2.4641879,7.775764808541213,3.623498,8.700922908541212C1.3963176,9.858418408541214,0.0019324829,12.133175908541213,0,14.612184908541213C0,15.372966908541212,0.636406,15.999999908541213,1.409332,15.999999908541213L12.03139,15.999999908541213C14.214283,15.999999908541213,16,14.252340908541212,16,12.093741908541213C16,9.935143408541213,14.214283,8.187483708541214,12.03139,8.187483708541214ZM1.0444336,14.601919908541213C1.0444336,14.807544908541212,1.2111151,14.972076908541213,1.4095455,14.972076908541213L1.4095455,14.972232908541212L9.3264418,14.972232908541212C8.5430393,14.252699908541214,8.0417252,13.234417908541213,8.0417252,12.093789908541213C8.0387783,11.100068908541212,8.4236002,10.143170908541213,9.1167402,9.420659008541213C9.0957861,9.410346908541213,9.0749912,9.410346908541213,9.0540371,9.400033908541213C8.9600601,9.369096708541212,8.8452873,9.338315908541214,8.6676531,9.276596008541214C8.4725933,9.211489608541212,8.3367825,9.036894708541213,8.3238134,8.834564108541214C8.3133364,8.628938608541214,8.4177895,8.433626108541214,8.6057434,8.341125408541213C9.973959,7.631749108541213,10.778159,6.254246108541213,10.715455,4.753305308541213C10.621479,2.748613708541213,8.9608536,1.1140793085412128,6.9241648,1.0312666085412128C5.8378768,0.9906415585412128,4.8139763,1.3711111085412129,4.0310488,2.111268908541213C3.2481222,2.851426708541213,2.8195124,3.848616508541213,2.8195124,4.917837008541213C2.8195124,6.346746808541213,3.6341887,7.662687208541213,4.9403367,8.341125408541213C5.1282902,8.433626108541214,5.2327437,8.639251608541214,5.2222672,8.834564108541214C5.2117891,9.029876608541214,5.0760632,9.204564908541213,4.8776326,9.276596008541214C2.5902858,10.068315908541212,1.0444336,12.216914908541213,1.0444336,14.601919908541213ZM9.1069336,12.093531908541213C9.1069336,13.676660908541212,10.422924,14.971974908541213,12.031322,14.971974908541213C13.639719,14.971974908541213,14.955709,13.677128908541214,14.955709,12.093687908541213C14.955709,10.510246908541212,13.639719,9.215087808541213,12.031322,9.215087808541213C10.422924,9.215087808541213,9.1069336,10.510402908541213,9.1069336,12.093531908541213ZM10.109706,11.517835908541214L13.858612,11.517835908541214C14.005775,11.516829908541213,14.147222,11.573864908541212,14.251373,11.676204908541212C14.355527,11.778544908541212,14.413714,11.917669908541212,14.412947,12.062523908541213L14.412947,12.125023908541213C14.410952,12.425420908541213,14.163805,12.668334908541214,13.858612,12.669867908541212L10.110182,12.669867908541212C9.8052979,12.667908908541213,9.5586319,12.425117908541212,9.5566406,12.125023908541213L9.5566406,12.062523908541213C9.5587158,11.762671908541213,9.805069,11.520048908541213,10.109706,11.517835908541214Z" fill-rule="evenodd" fill="#FF9000" fill-opacity="1"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g><path d="M8.8874149,2.9820271L8.7591991,3.1784549C8.6192961,3.3862062,8.6051903,3.6545396,8.7225351,3.8759143C8.8398809,4.0972896,9.0694742,4.2354794,9.3193007,4.2351007C9.5450401,4.2339287,9.7552452,4.1195374,9.8794012,3.9302993L10.007617,3.7338712C10.420927,3.0910232,10.333963,2.2462947,9.7984228,1.70186C9.6689034,1.5945075,9.6452293,1.4044142,9.7444372,1.2683641L9.9266386,1.0245228C10.015675,0.86672896,10.037952,0.67968929,9.9884863,0.50527537C9.9390202,0.33086148,9.8219414,0.18364078,9.6634588,0.096570864C9.3446941,-0.095332921,8.9313393,0.0076340437,8.7389545,0.32686552L8.5769978,0.59102702C8.1935825,1.248378,8.2988329,2.0824025,8.8334293,2.6230385C8.9376507,2.7126937,8.9606285,2.8654895,8.8874149,2.9820271ZM3.2322402,2.9820659L3.1040242,3.1784937C3.0042214,3.3283525,2.9680476,3.51196,3.0035112,3.6886678C3.0389748,3.865375,3.1431501,4.0206056,3.292974,4.1199923C3.4027719,4.1940608,3.5318379,4.2341027,3.6641254,4.2351398C3.8898659,4.2339673,4.100071,4.119576,4.2242265,3.9303379L4.3524427,3.7339103C4.7657523,3.0910618,4.6787882,2.2463336,4.1432481,1.7018987C4.0125942,1.5943811,3.991601,1.4017266,4.0960107,1.2684029L4.2444715,1.0177882C4.4267364,0.69674557,4.3190184,0.28831789,4.0023737,0.099839881C3.6857288,-0.088638134,3.2770138,0.012390844,3.0837796,0.32690427L2.9353189,0.59106576C2.5459726,1.2449294,2.6458373,2.0802376,3.1782544,2.6230772C3.2884753,2.7093248,3.3118689,2.8669186,3.2322402,2.9820659ZM6.0596581,2.9820654L5.9314423,3.1784933C5.7915392,3.3862445,5.7774334,3.6545777,5.8947787,3.875953C6.0121241,4.0973277,6.2417173,4.2355175,6.4915433,4.2351394C6.7172837,4.2339668,6.9274888,4.1195755,7.0516448,3.9303379L7.1798606,3.7339098C7.5931702,3.0910616,7.5062065,2.2463331,6.9706659,1.7018983C6.8411465,1.5945458,6.8174729,1.4044526,6.9166803,1.2684026L7.0718894,1.0177878C7.2541542,0.69674528,7.1464362,0.28831783,6.8297915,0.099839881C6.5131469,-0.088638052,6.1044321,0.01239075,5.9111977,0.32690391L5.7627373,0.59106541C5.3786025,1.2494026,5.4868526,2.0852032,6.0259171,2.6230769C6.1235414,2.7179041,6.1379375,2.8705308,6.0596581,2.9820654ZM12.963306,7.4587164C13.182354,7.3938656,13.409758,7.3619099,13.638127,7.3638897C14.942553,7.3638897,16,8.4252796,16,9.7345695C16,11.043859,14.942553,12.105249,13.638127,12.105249C13.353378,12.100998,13.071906,12.043574,12.808097,11.935915C12.19367,14.324476,10.049458,15.995013,7.591733,15.999938L5.3985662,15.999938C2.4170203,15.999938,0,13.573905,0,10.581242L0,6.686552C0,5.5643034,0.90638262,4.654541,2.024462,4.654541L10.938844,4.654541C12.056925,4.654541,12.963306,5.5643034,12.963306,6.686552L12.963306,7.4587164ZM11.613634,10.581303C11.613634,12.825801,9.800869,14.645327,7.5647092,14.645327L5.3985338,14.645327C3.1623747,14.645327,1.3496094,12.825801,1.3496094,10.581303L1.3496094,6.6866145C1.3496094,6.3125315,1.651737,6.0092773,2.0244303,6.0092773L10.965806,6.0092773C11.338499,6.0092773,11.640626,6.3125315,11.640626,6.6866145L11.613634,10.581303ZM13.638062,10.750737C13.424194,10.751226,13.215896,10.682327,13.04422,10.55431L12.990234,10.55431L12.990234,8.9422464L13.037472,8.9422464C13.38741,8.6609182,13.880034,8.6441669,14.248139,8.9010782C14.616244,9.1579905,14.772116,9.627347,14.631206,10.054563C14.490296,10.481778,14.086183,10.765055,13.638062,10.750737Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1777452842620" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8518" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M509.9 709.88a20 20 0 0 1-20-20V148.49a20 20 0 0 1 40 0v541.39a20 20 0 0 1-20 20z" fill="currentColor" p-id="8519"></path><path d="M509.9 709.88a20 20 0 0 1-14-5.73L324.43 535.76a20 20 0 0 1 28-28.53l171.48 168.38a20 20 0 0 1-14 34.27z" fill="currentColor" p-id="8520"></path><path d="M509.9 709.88a20 20 0 0 1-14-34.27l171.43-168.38a20 20 0 1 1 28 28.53L523.91 704.15a19.94 19.94 0 0 1-14.01 5.73z" fill="currentColor" p-id="8521"></path><path d="M215.26 925.93a104.23 104.23 0 0 1-104.12-104.09V695.53a20 20 0 0 1 40 0v126.24a64.21 64.21 0 0 0 64.13 64.16h589.16a64.14 64.14 0 0 0 64.16-64.15V695.53a20 20 0 0 1 40 0v126.24A104.12 104.12 0 0 1 804.5 925.93H215.26z" fill="currentColor" p-id="8522"></path></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1777451652405" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7494" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M888.046933 1024H135.953067A135.816533 135.816533 0 0 1 0 888.046933V135.953067A135.816533 135.816533 0 0 1 135.953067 0H567.978667c22.4256 0 40.0384 17.646933 40.0384 40.0384 0 22.4256-17.6128 40.072533-40.0384 40.072533H135.953067c-30.378667 0-55.978667 25.6-55.978667 55.978667v751.957333c0 30.378667 25.6 55.978667 55.978667 55.978667h751.957333c30.378667 0 55.978667-25.6 55.978667-55.978667V456.021333c0-22.4256 17.646933-40.0384 40.072533-40.0384 22.391467 0 40.0384 17.6128 40.0384 40.0384v432.0256A135.816533 135.816533 0 0 1 888.046933 1024z" fill="currentColor" p-id="7495"></path><path d="M977.578667 297.642667a39.662933 39.662933 0 0 1-40.0384-40.0384v-123.221334l-319.965867 320.034134c-16.042667 16.042667-41.642667 16.042667-55.978667 0-14.336-16.042667-16.042667-41.642667 0-55.978667l307.2-308.770133h-99.191466a39.662933 39.662933 0 0 1-40.072534-40.072534c0-22.391467 17.646933-40.0384 40.072534-40.0384H972.8c31.982933 0 44.817067 7.953067 44.817067 40.0384v208.008534c0 20.821333-17.6128 40.0384-40.0384 40.0384z" fill="currentColor" p-id="7496"></path></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 494 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><mask id="master_svg0_50_262469/40_35577" style="mask-type:alpha" maskUnits="objectBoundingBox"><g><path d="M0,0L22,0L22,24L0,24L0,0Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g></mask></defs><g><g><path d="M19.033638446875,3.333251953125C21.809772046875,5.5399680531249995,23.508810046875,8.948613653125001,23.319005046875,12.691106753125C23.286358846875,13.337300953125,23.198048546875,13.968284953125,23.059723846875002,14.579795953125C22.577363046875,16.709438953125,20.347834546875,16.045801953125,19.025686246875,15.151756953125L15.167433856875,12.657844553125C14.432279496875,12.156667753125,14.567256591875,11.957089453125,15.179989876875,11.520816753125L17.606647946875,9.721167053125C19.743052946875,8.257392453125,20.507505446875,5.445655153125,19.033638446875,3.333251953125L19.033638446875,3.333251953125Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g><g mask="url(#master_svg0_50_262469/40_35577)"><g><path d="M16.447662,2.1660271C15.775244,0.96637702,14.410853,0.10119945,12.642452,0.014745893C5.9952054,-0.31073889,0.34165078,4.7915187,0.014789859,11.41078C-0.31185615,18.030041,4.8117585,23.660007,11.459219,23.985277C15.798024,24.197559,19.713049,22.097424,22,18.772385C21.264832,19.211714,20.39127,19.186249,19.587118,18.975252C18.44837,18.676302,17.322945,17.987028,16.385986,17.293045L11.184364,13.588169C9.8734818,12.610215,9.8459749,11.288161,11.137732,10.286669L13.389225,8.5406933C13.528409,8.4322929,13.672024,8.32234,13.818103,8.2105007C15.715466,6.757863,18.028587,4.986917,16.447662,2.1660271ZM3.7682054,11.521688C4.0165257,7.0637693,8.1135979,3.2712524,11.804885,6.5986958C6.0568409,6.6525893,6.0568409,17.338112,11.804885,17.392006C7.8433552,20.96315,3.4966974,16.394438,3.7682054,11.521688Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="20px" viewBox="0 0 22 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="店铺装修-健康头条" transform="translate(-1669.000000, -30.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="编组-30" transform="translate(1566.016658, 29.002694)">
<g id="编组" transform="translate(103.983342, 0.997306)">
<path d="M0,0.801666285 L0,0.806090492 L0,6.41686965 C0,6.84601772 0.376845587,7.19376038 0.839772652,7.19376038 C1.30269972,7.19376038 1.6795453,6.84513287 1.6795453,6.41686965 L1.6795453,2.79786843 L6.54123596,7.74590139 C6.8530422,8.06444429 7.38100861,8.08568048 7.72533452,7.79722219 C8.06966044,7.50876391 8.0926155,7.02033147 7.78080926,6.70178857 L2.71730536,1.55378145 L6.92286385,1.55378145 C7.38674737,1.55378145 7.7626365,1.20515395 7.7626365,0.776890727 C7.7626365,0.348627502 7.38579091,0 6.92286385,0 L0.857945409,0 C0.651349859,0 0.458144761,0.0681327858 0.316588551,0.18670153 C0.303198099,0.194665102 0.288851186,0.207052882 0.275460733,0.220325502 C0.0918202444,0.37340306 0,0.589304356 0,0.801666285 L0,0.801666285 L0,0.801666285 Z" id="路径"></path>
<path d="M20,0.800427318 L20,0.804849569 L20,6.4131475 C20,6.84210579 19.6231544,7.18969466 19.1602273,7.18969466 C18.6963438,7.18969466 18.3204547,6.84122134 18.3204547,6.4131475 L18.3204547,2.79574669 L13.458764,7.74601376 C13.1469578,8.06441579 12.6189914,8.08564259 12.2746655,7.79731187 C11.9303396,7.50898114 11.9073845,7.0207647 12.2191907,6.70236267 L17.2826946,1.55309433 L13.0771362,1.55309433 C12.6132526,1.55309433 12.2373635,1.204621 12.2373635,0.776547166 C12.2373635,0.34847333 12.6142091,0 13.0771362,0 L19.1420546,0 C19.3486501,0 19.5418552,0.0681026558 19.6834114,0.186618966 C19.6968019,0.195463467 19.7111488,0.207845768 19.7245393,0.220228069 C19.9081798,0.372353482 20,0.5881593 20,0.800427318 L20,0.800427318 L20,0.800427318 Z" id="路径"></path>
<path d="M0,19.1983337 L0,19.1939095 L0,13.5831304 C0,13.1539823 0.376845587,12.8062396 0.839772652,12.8062396 C1.30269972,12.8062396 1.6795453,13.1548671 1.6795453,13.5831304 L1.6795453,17.2021316 L6.54123596,12.2540986 C6.8530422,11.9355557 7.38100861,11.9143195 7.72533452,12.2027778 C8.06966044,12.4912361 8.0926155,12.9796685 7.78080926,13.2982114 L2.71730536,18.4462185 L6.92286385,18.4462185 C7.38674737,18.4462185 7.7626365,18.794846 7.7626365,19.2231093 C7.7626365,19.6513725 7.38579091,20 6.92286385,20 L0.857945409,20 C0.651349859,20 0.458144761,19.9318672 0.316588551,19.8132985 C0.303198099,19.8044501 0.288851186,19.7920623 0.275460733,19.7796745 C0.0918202444,19.6274818 0,19.4151199 0,19.1983337 L0,19.1983337 L0,19.1983337 Z" id="路径"></path>
<path d="M20,19.1951504 L20,19.1907282 L20,13.5824303 C20,13.153472 19.6231544,12.8058831 19.1602273,12.8058831 C18.6963438,12.8058831 18.3204547,13.1543564 18.3204547,13.5824303 L18.3204547,17.1998311 L13.458764,12.2539862 C13.1469578,11.9355842 12.6189914,11.9143574 12.2746655,12.2026881 C11.9303396,12.4910189 11.9073845,12.9792353 12.2191907,13.2976373 L17.2826946,18.4469057 L13.0771362,18.4469057 C12.6132526,18.4469057 12.2373635,18.795379 12.2373635,19.2234528 C12.2373635,19.6515267 12.6142091,20 13.0771362,20 L19.1420546,20 C19.3486501,20 19.5418552,19.9318973 19.6834114,19.813381 C19.6968019,19.8045365 19.7111488,19.7921542 19.7245393,19.7797719 C19.9081798,19.6241087 20,19.4118407 20,19.1951504 L20,19.1951504 L20,19.1951504 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>vuesax/bulk/brush</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="店铺装修-健康头条" transform="translate(-58.000000, -671.000000)">
<g id="左侧导航-未选中" transform="translate(20.000000, 100.000000)">
<g id="店铺装修/未选" transform="translate(0.000000, 557.000000)">
<g id="brush" transform="translate(38.000000, 14.000000)">
<path d="M22,0 L22,22 L0,22 L0,0 L22,0 Z" id="Vector" opacity="0"></path>
<path d="M8.70833333,16.5 L4.125,16.5 C3.62083332,16.5 3.16249993,16.2983332 2.83249992,15.9591665 C2.49333325,15.6291665 2.29166667,15.1708333 2.29166667,14.6666667 C2.29166667,13.7225 3.02499996,12.9341669 3.95083328,12.8425002 C4.00583328,12.8333333 4.06083333,12.8333333 4.125,12.8333333 L17.875,12.8333333 C17.9391667,12.8333333 17.9941672,12.8333333 18.0491672,12.8425002 C18.4891671,12.8791669 18.8741665,13.0716668 19.1674999,13.3741668 C19.5433332,13.7408335 19.7449998,14.2633336 19.6991665,14.8316669 C19.6166665,15.7941669 18.7458327,16.5 17.7741661,16.5 L13.2916667,16.5 L13.2916667,17.875 C13.2916667,19.14 12.265,20.1666667 11,20.1666667 C9.735,20.1666667 8.70833333,19.14 8.70833333,17.875 L8.70833333,16.5 Z" id="Vector" fill="#3377FF" fill-rule="nonzero"></path>
<path d="M18.0493166,12.8425002 C17.9943166,12.8333333 17.9393162,12.8333333 17.8751495,12.8333333 L4.12514916,12.8333333 C4.06098249,12.8333333 4.00598244,12.8333333 3.95098244,12.8425002 L3.51098242,4.85833351 C3.34598241,3.23583353 4.62014902,1.83333333 6.242649,1.83333333 L15.75765,1.83333333 C17.38015,1.83333333 18.6543154,3.23583353 18.4893154,4.85833351 L18.0493166,12.8425002 Z" id="Vector" fill="#3377FF" fill-rule="nonzero" opacity="0.300000012"></path>
<path d="M8.01188151,6.41666667 C8.01188151,6.7925 7.70021484,7.10416667 7.32438151,7.10416667 C6.94854818,7.10416667 6.63688151,6.7925 6.63688151,6.41666667 L6.63688151,1.83333333 L8.01188151,1.83333333 L8.01188151,6.41666667 Z" id="Vector" fill="#3377FF" fill-rule="nonzero"></path>
<path d="M11.6875,3.66666667 C11.6875,4.0425 11.3758333,4.35416667 11,4.35416667 C10.6241667,4.35416667 10.3125,4.0425 10.3125,3.66666667 L10.3125,1.83333333 L11.6875,1.83333333 L11.6875,3.66666667 Z" id="Vector" fill="#3377FF" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1776524700051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5535" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M393.012865 330.571535l-1.086002-281.402226c-0.479118-21.680109-18.382177-34.69616-40.102213-35.175278h-29.146371c-21.656153-0.479118-38.856505 18.390162-38.377387 40.054301l1.213767 153.030427-192.853154-189.970458a53.485588 53.485588 0 0 0-75.852433 0 53.980677 53.980677 0 0 0 0 76.068036l191.088401 189.35559-146.490461 0.590913c-21.656153-0.550986-41.747186 14.477362-45.037132 40.086242v27.645134c0.550986 21.728021 18.44606 39.686977 40.102213 40.166095l279.70934-1.652959c0.415236 0.039927 0.694722 0.199633 1.062046 0.199633l19.6199 0.431206a36.940031 36.940031 0 0 0 27.437515-11.019723c7.02707-6.979158 9.622295-16.737204 9.334825-27.645134l-2.092151-19.683782c0-0.383295 1.453326-0.64681 1.453326-1.086002h0.015971z m419.41229 408.943553l146.290828-0.582928c21.664138 0.479118 41.715245-12.848359 45.037132-38.449254v-27.645133c-0.543001-21.736006-18.501957-39.686977-40.094227-40.245949l-276.131923 1.676915c-0.423221 0-0.686736-0.167691-1.101973-0.167692l-19.571987-0.479118a37.051825 37.051825 0 0 0-27.509384 11.027709c-7.066997 6.931247-9.590354 16.721233-9.37475 27.629163l2.156033 19.643856c0.039927 0.479118-1.413399 0.758604-1.4134 1.125928l1.125928 277.066204c0.550986 21.664138 18.44606 34.640263 40.102213 35.111396l27.54931 0.047912c21.600256 0.495089 38.86449-18.44606 38.329475-40.134154l-1.221752-149.740481 192.853154 191.216166a53.421705 53.421705 0 0 0 75.812506 0 53.876868 53.876868 0 0 0 0-76.04408L812.425155 739.507102v0.007986zM384.292909 644.657623a37.019884 37.019884 0 0 0-27.445501-11.035694l-19.6199 0.479118c-0.399265 0-0.654795 0.175677-1.093987 0.175677l-279.685384-1.676914c-21.656153 0.558972-39.583168 18.509942-40.102213 40.245948v27.645133c3.265991 25.600895 23.357024 38.920387 44.981235 38.441269l148.15939 0.479119-192.701433 191.072431c-20.921505 20.969417-20.921505 55.018767 0 76.052065a53.453646 53.453646 0 0 0 75.828477 0l192.885095-189.970458-1.237722 150.650806c-0.479118 21.736006 16.721233 40.66917 38.33746 40.126168h29.146371c21.720036-0.550986 39.623094-13.455243 40.102213-35.183263l1.125928-279.134399c0-0.399265-1.453326-0.654795-1.453326-1.086002l2.092151-19.643855c0.239559-10.90793-2.283798-20.697916-9.310869-27.629163h-0.007985zM639.463401 379.026379a36.892119 36.892119 0 0 0 27.493413 10.971812l19.564002-0.431206c0.439192 0 0.702707-0.159706 1.141899-0.223589l280.124577 1.676915c21.656153-0.495089 39.551227-18.46203 40.094227-40.190051l0.071868-27.653119c-3.329873-25.640821-23.452847-40.597302-45.037133-40.126169l-148.646493-0.582927 190.984592-189.371561c21.001358-20.945461 21.001358-54.930928 0.063883-75.964227a53.42969 53.42969 0 0 0-75.812507 0L736.652575 208.292526l1.237722-154.212253c0.519045-21.664138-16.745189-40.605287-38.345445-40.126168h-27.54931c-21.664138 0.550986-39.559212 13.519125-40.102212 35.183263l-1.109958 281.458123c0 0.431207 1.437355 0.702707 1.437355 1.086002l-2.132077 19.683782c-0.223589 10.90793 2.299768 20.665975 9.374751 27.653119v0.007985z" p-id="5536" fill="#ffffff"></path></svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g><path d="M9,13C9,13.552277,8.5522461,14,8,14C7.44775391,14,7,13.552277,7,13C7,12.447723,7.44775391,12,8,12C8.5522461,12,9,12.447723,9,13ZM8,4C8.5522461,4,9,3.5522766,9,3C9,2.44772339,8.5522461,2,8,2C7.44775391,2,7,2.44772339,7,3C7,3.5522766,7.44775391,4,8,4ZM8,9C8.5522461,9,9,8.552276599999999,9,8C9,7.4477234,8.5522461,7,8,7C7.44775391,7,7,7.4477234,7,8C7,8.552276599999999,7.44775391,9,8,9Z" fill="#D9ECFF" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 600 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><g><rect x="0" y="0" width="14" height="14" rx="7" fill="#ffffff" fill-opacity="1"/><g><path d="M9.729088784558105,8.416942584558106C9.180977784558106,8.004929984558107,8.643053484558106,7.727047484558105,8.257650384558104,8.171602684558106C8.257650384558104,8.171602684558106,7.849042884558106,8.656906584558104,6.644726984558106,7.522173184558106C5.244030984558106,6.190488584558105,5.832606284558105,5.720465584558106,5.832606284558105,5.720465584558106C6.319878584558106,5.232615084558105,6.010310684558105,4.868708384558105,5.601703684558105,4.317754264558106C5.193096484558105,3.7668002485581056,4.778547224558105,3.5936189245581054,4.187142344558105,4.0650566845581055C3.0459286545581055,4.9802007845581056,4.656587724558105,7.125440584558105,5.468708384558106,7.959370584558106C6.280829684558105,8.793299184558105,6.706980484558105,9.235590984558105,7.485994384558106,9.660338384558106L7.901957984558106,9.892662084558104C8.501003784558105,10.198558784558106,9.170791584558106,10.337499184558105,9.645330384558106,10.054523984558106C9.645330384558106,10.054523984558106,9.873685884558105,9.938220984558106,10.079121084558105,9.579407684558106C10.340585684558105,9.119288484558105,10.195987184558106,8.768115984558104,9.729088784558105,8.416942584558106Z" fill="currentColor" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="20px" viewBox="0 0 22 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>changjianwentixiangguanwenti</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="店铺装修-健康头条" transform="translate(-1617.000000, -29.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="编组-30" transform="translate(1566.016658, 29.002694)">
<g id="changjianwentixiangguanwenti" transform="translate(51.988730, 0.000000)">
<path d="M10,20 C15.5227048,20 20,15.5227274 20,10 C20,4.47718226 15.5227274,0 10,0 C4.47715968,0 0,4.47715968 0,10 C0,15.5227048 4.47715968,20 10,20 L10,20 Z M10,18.5713931 C5.26611106,18.5713931 1.42853917,14.7338889 1.42853917,10 C1.42853917,5.26611106 5.26608848,1.42853917 10,1.42853917 C14.7339115,1.42853917 18.5713931,5.26608848 18.5713931,10 C18.5713931,14.7339115 14.7338889,18.5713931 10,18.5713931 L10,18.5713931 Z M10.1542182,3.9485277 C8.91997589,3.9485277 7.96000714,4.32571876 7.27426679,5.08003315 C6.58859418,5.79998148 6.26281671,6.75999539 6.26281671,7.95998456 L7.61713696,7.95998456 C7.61713696,7.11998085 7.80567604,6.46856139 8.1828671,5.98856573 C8.59431131,5.42283558 9.22857033,5.14856202 10.0856893,5.14856202 C10.8056377,5.14856202 11.3714807,5.33714626 11.7657193,5.74854531 C12.1429104,6.12566864 12.348497,6.65714563 12.348497,7.34281824 C12.348497,7.82285907 12.1771184,8.268579 11.8342482,8.6971385 C11.7315113,8.83424141 11.5256989,9.04000867 11.2514705,9.31423707 C10.3257097,10.1371481 9.75997959,10.7885675 9.51995918,11.3029292 C9.31425965,11.7314887 9.21140989,12.2285771 9.21140989,12.7943072 L9.21140989,13.1886588 L10.5827777,13.1886588 L10.5827777,12.7943072 C10.5827777,12.3314269 10.6857403,11.9199149 10.9086003,11.5428368 C11.079979,11.2342875 11.3371598,10.9256253 11.714238,10.6000285 C12.4685072,9.93140339 12.9315005,9.48568345 13.1028791,9.27998392 C13.5314386,8.71425378 13.7542986,8.04567387 13.7542986,7.27424421 C13.7542986,6.24570142 13.4285888,5.43999603 12.7943298,4.85710544 C12.1256144,4.24002944 11.2514705,3.9485277 10.1542182,3.9485277 L10.1542182,3.9485277 Z M9.89715024,14.3886479 C9.60571623,14.3886479 9.36574098,14.4743372 9.1599963,14.6800368 C8.95429677,14.8684629 8.86860745,15.1085963 8.86860745,15.3999851 C8.86860745,15.6913739 8.95429677,15.9315073 9.1599963,16.1372068 C9.36574098,16.325633 9.60571623,16.4285956 9.89715024,16.4285956 C10.188652,16.4285956 10.4285595,16.325633 10.634259,16.1372068 C10.8399585,15.9485548 10.9428083,15.7085344 10.9428083,15.3999851 C10.9428083,15.1085963 10.8399585,14.8684629 10.6514195,14.6800368 C10.4457199,14.4743372 10.188652,14.3886479 9.89715024,14.3886479 L9.89715024,14.3886479 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="19.800823211669922" height="19.781291961669922" viewBox="0 0 19.800823211669922 19.781291961669922"><defs><clipPath id="master_svg0_50_262469/50_68370"><rect x="0" y="0" width="19.800823211669922" height="19.781291961669922" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_50_262469/50_68370)"><g><path d="M17.212891,15.111327875L15.011719,12.917968875C15.720703,11.820312475,16.132812,10.515624975,16.132812,9.111328075C16.132812,5.232421875,12.992188,2.091796875,9.1132812,2.091796875C5.234375,2.091796875,2.09375,5.236328074999999,2.09375,9.111328075C2.09375,12.990234875,5.234375,16.130858875,9.1132812,16.130858875C10.5195312,16.130858875,11.8300781,15.716796875,12.927734,15.005858875L15.125,17.195312875C15.75,17.818358875,16.724609,17.857421875,17.300781,17.283202875C17.875,16.708984875,17.835938,15.734374875,17.212891,15.111327875ZM9.109375,13.794921875C6.5273438,13.794921875,4.4296875,11.701171875,4.4296875,9.115234375C4.4296875,6.533203075,6.5234375,4.435546875,9.109375,4.435546875C11.6953125,4.435546875,13.789062,6.529296875,13.789062,9.115234375C13.785156,11.701171875,11.6914062,13.794921875,9.109375,13.794921875Z" fill="#ECF2FF" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>关闭</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="店铺装修-健康头条" transform="translate(-1817.000000, -665.000000)">
<g id="关闭" transform="translate(1817.000000, 665.000000)">
<circle id="椭圆形" fill="#000000" opacity="0.800000012" cx="12" cy="12" r="12"></circle>
<path d="M8.03120495,6.1769268 L12.5,10.645 L16.9687951,6.1769268 C17.1784861,5.96723578 17.5039862,5.94393678 17.7394126,6.10702979 L17.8230732,6.1769268 C18.0589756,6.41282919 18.0589756,6.79530255 17.8230732,7.03120495 L17.8230732,7.03120495 L13.355,11.5 L17.8230732,15.9687951 C18.0589756,16.2046975 18.0589756,16.5871708 17.8230732,16.8230732 C17.5871708,17.0589756 17.2046975,17.0589756 16.9687951,16.8230732 L12.5,12.355 L8.03120495,16.8230732 C7.82151393,17.0327642 7.49601375,17.0560632 7.26058737,16.8929702 L7.1769268,16.8230732 C6.9410244,16.5871708 6.9410244,16.2046975 7.1769268,15.9687951 L7.1769268,15.9687951 L11.645,11.5 L7.1769268,7.03120495 C6.9410244,6.79530255 6.9410244,6.41282919 7.1769268,6.1769268 C7.41282919,5.9410244 7.79530255,5.9410244 8.03120495,6.1769268 Z" id="icon换色层" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1776536355922" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7486" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M511.466 269.569c169.452 0 315.308 99.39 383.565 242.84h66.514c-72.09-177.91-246.293-303.527-450.08-303.527-203.754 0-377.957 125.617-450.046 303.526h66.515c68.255-143.449 214.111-242.84 383.532-242.84z" p-id="7487"></path><path d="M511.466 755.248c-169.42 0-315.277-99.39-383.532-242.84H61.419C133.507 690.35 307.71 815.966 511.466 815.966c203.786 0 377.99-125.617 450.079-303.558H895.03c-68.257 143.45-214.112 242.84-383.565 242.84z" p-id="7488"></path><path d="M349.594 512.424c0 89.412 72.474 161.886 161.885 161.886 89.414 0 161.886-72.474 161.886-161.886 0-89.414-72.472-161.886-161.886-161.886-89.412 0-161.885 72.472-161.885 161.886z m263.084 0c0 55.88-45.32 101.197-101.199 101.197s-101.166-45.318-101.166-101.197c0-55.88 45.287-101.2 101.166-101.2s101.199 45.32 101.199 101.2z" p-id="7489"></path></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="店铺装修-健康头条" transform="translate(-1424.000000, -387.000000)" fill="#999999" fill-rule="nonzero">
<g id="编组-7" transform="translate(1416.000000, 376.000000)">
<g id="编组" transform="translate(8.000000, 11.000000)">
<path d="M11.5969638,0.24456132 L14.2520033,2.94788429 C14.572261,3.27396605 14.572261,3.79990437 14.2520033,4.12598613 C14.0918744,4.28639732 13.8826739,4.36791776 13.6734733,4.36791776 C13.4642727,4.36791776 13.2550721,4.28639732 13.0949433,4.12335644 L11.878554,2.88665031 C11.8855627,4.42524643 11.8980221,7.29912108 11.9076358,10.2736607 C14.3771916,10.2668098 16.9671596,10.2571578 19.2627533,10.2471238 L17.8740139,8.80817844 C17.5479321,8.47013631 17.5479321,7.92490706 17.8740139,7.58686493 C18.2000956,7.2488228 18.7260339,7.2488228 19.0521157,7.58686493 L21.7554387,10.3920694 C22.0815204,10.7301115 22.0815204,11.2753408 21.7554387,11.6133829 L19.0521157,14.4158612 C18.8890748,14.5821561 18.6760698,14.6666667 18.4630648,14.6666667 C18.2500598,14.6666667 18.0370547,14.5821561 17.8740139,14.4131351 C17.5479321,14.0750929 17.5479321,13.5298637 17.8740139,13.1918216 L19.1085216,11.9122948 C17.600926,11.9186808 14.8171972,11.9299089 11.9125465,11.9387589 C11.9162217,13.9309164 11.9180005,15.8650806 11.9155574,17.3692367 C11.9139328,18.0667383 11.9126193,18.6306489 11.9056177,19.087045 L13.0949433,17.8740139 C13.415201,17.5479321 13.9317456,17.5479321 14.2520033,17.8740139 C14.572261,18.2000956 14.572261,18.7260339 14.2520033,19.0521157 L11.5969638,21.7554387 C11.436835,21.9184796 11.2276344,22 11.0184338,22 C10.8092332,22 10.6000327,21.9184796 10.4399038,21.7554387 L7.78486435,19.0521157 C7.46460667,18.7260339 7.46460667,18.2000956 7.78486435,17.8740139 C8.10512203,17.5479321 8.62166667,17.5479321 8.94192435,17.8740139 L10.1164007,19.0713851 C10.1273239,17.6374558 10.1269377,14.9744121 10.1204007,11.9427034 C9.25743274,11.9442005 8.40421192,11.94542 7.59131823,11.9461063 L4.63135931,11.946689 C3.93258313,11.9451752 3.36789164,11.9439519 2.91106333,11.9374081 L4.12598613,13.1945477 C4.45206789,13.5325898 4.45206789,14.0778191 4.12598613,14.4158612 C3.96294525,14.5821561 3.74994023,14.6666667 3.53693521,14.6666667 C3.32393019,14.6666667 3.11092517,14.5821561 2.94788429,14.4131351 L0.24456132,11.6133829 C-0.0815204399,11.2753408 -0.0815204399,10.7301115 0.24456132,10.3920694 L2.94788429,7.58959108 C3.27396605,7.25154895 3.79990437,7.25154895 4.12598613,7.58959108 C4.45206789,7.92763321 4.45206789,8.47286245 4.12598613,8.81090458 L2.71401891,10.2724507 C4.09328698,10.285018 6.90103098,10.2847107 10.1161707,10.2778604 C10.1096195,7.83177516 10.0997498,5.25540584 10.08915,2.95702619 L8.94192435,4.12598613 C8.62166667,4.45206789 8.10512203,4.45206789 7.78486435,4.12598613 C7.46460667,3.79990437 7.46460667,3.27396605 7.78486435,2.94788429 L10.4399038,0.24456132 C10.7601615,-0.0815204399 11.2767061,-0.0815204399 11.5969638,0.24456132 Z" id="形状结合"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>image_add</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="店铺装修-健康头条" transform="translate(-1659.000000, -452.000000)" fill="currentColor">
<g id="编组-7" transform="translate(1416.000000, 376.000000)">
<g id="Group-15-Copy-2" transform="translate(92.000000, 53.000000)">
<g id="Group-14" transform="translate(131.000000, 23.000000)">
<g id="image_add" transform="translate(20.000000, 0.000000)">
<circle id="Oval" opacity="0.200000003" cx="12" cy="12" r="12"></circle>
<path d="M12,7 C12.5522847,7 13,7.44771525 13,8 L13,11 L16,11 C16.5522847,11 17,11.4477153 17,12 C17,12.5522847 16.5522847,13 16,13 L13,13 L13,16 C13,16.5522847 12.5522847,17 12,17 C11.4477153,17 11,16.5522847 11,16 L11,13 L8,13 C7.44771525,13 7,12.5522847 7,12 C7,11.4477153 7.44771525,11 8,11 L11,11 L11,8 C11,7.44771525 11.4477153,7 12,7 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1776536399454" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8531" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M949.65726 253.775217L776.574163 11.498877C771.474661 4.29958 763.075481 0 754.27634 0H96.740553C81.542037 0 69.243238 12.298799 69.243238 27.497315v969.00537c0 15.198516 12.298799 27.497315 27.497315 27.497315h830.518894c15.198516 0 27.497315-12.298799 27.497315-27.497315V269.673665c0-5.699443-1.799824-11.298897-5.099502-15.898448zM313.619373 54.894639h373.7635c-0.599941 2.299775-0.899912 4.699541-0.899912 7.099307v249.375647h-371.963676V62.093936c0-2.499756-0.299971-4.899522-0.899912-7.199297z m396.761254 914.110732H313.619373c0.599941-2.299775 0.899912-4.699541 0.899912-7.099307V747.027048h394.96143v214.779026c0 2.499756 0.299971 4.899522 0.899912 7.199297z m189.381506 0H763.475442c0.599941-2.299775 0.899912-4.699541 0.899912-7.099307V719.629724c0-15.198516-12.298799-27.497315-27.497315-27.497315H287.021971c-15.198516 0-27.497315 12.298799-27.497315 27.497315V961.906064c0 2.499756 0.299971 4.899522 0.899912 7.099307H124.237867V54.894639h136.386681c-0.599941 2.299775-0.899912 4.699541-0.899912 7.099307v276.972952c0 15.198516 12.298799 27.497315 27.497315 27.497314H713.980275c15.198516 0 27.497315-12.298799 27.497315-27.497314V62.093936c0-2.199785-0.299971-4.39957-0.799922-6.499365l159.284445 222.978225v690.432575z" fill="" p-id="8532"></path><path d="M575.493799 200.480422m-35.996484 0a35.996485 35.996485 0 1 0 71.992969 0 35.996485 35.996485 0 1 0-71.992969 0Z" fill="" p-id="8533"></path></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="54px" height="54px" viewBox="2.64 2.64 18.72 18.72" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>购物车</title>
<path d="M8.86357594,17.6036844 C9.45732893,17.6017135 10.0068084,17.9249443 10.3042445,18.4511653 C10.6016805,18.9773862 10.6016805,19.6262892 10.3042445,20.1525102 C10.0068084,20.6787311 9.45732893,21.0019619 8.86357594,20.999991 L8.85928527,20.999991 C7.9455194,20.996935 7.20633998,20.2375431 7.20633998,19.3018377 C7.20633998,18.3661323 7.9455194,17.6067404 8.85928527,17.6036844 L8.86357594,17.6036844 L8.86357594,17.6036844 Z M17.9432747,17.6036844 C18.8570406,17.6067404 19.59622,18.3661323 19.59622,19.3018377 C19.59622,20.2375431 18.8570406,20.996935 17.9432747,20.999991 L17.9381224,20.999991 C17.3443694,21.0019619 16.7948899,20.6787311 16.4974539,20.1525102 C16.2000179,19.6262892 16.2000179,18.9773862 16.4974539,18.4511653 C16.7948899,17.9249443 17.3443694,17.6017135 17.9381224,17.6036844 L17.9432747,17.6036844 L17.9432747,17.6036844 Z M3.87913185,3.00000007 L4.0411927,3.00000007 C5.57861359,2.99968203 6.9152569,4.07998964 7.27212283,5.61131642 L7.30641305,5.78252548 L8.6089139,13.0220324 C8.7358053,13.7306197 9.31202169,14.2556812 10.0022926,14.3154099 L10.1326306,14.3206679 L17.1784094,14.3206679 C17.8832405,14.3206679 18.4937471,13.8359957 18.674694,13.1502231 L18.7038494,13.0202858 L19.2020248,10.2228148 C19.2757446,9.80896725 19.1857638,9.38208594 18.9519068,9.03622146 C18.7180498,8.69035698 18.3595052,8.45388824 17.9552675,8.37891409 L17.8163658,8.35961075 L17.6774464,8.35345241 L9.62930295,8.35345241 C9.16168937,8.35032029 8.77717403,7.97516185 8.75152447,7.49703404 C8.72587492,7.01890622 9.06794629,6.60287568 9.5324111,6.54731209 L9.62930295,6.54205409 L17.6783256,6.54205409 C18.6328897,6.54084018 19.5417086,6.96072895 20.1724792,7.69439256 C20.8032498,8.42805618 21.0948409,9.40439181 20.972719,10.3738381 L20.9461309,10.5468299 L20.4470763,13.3442829 C20.1699743,14.8949658 18.8882246,16.0471829 17.3507573,16.1276906 L17.179271,16.1320843 L10.1334571,16.1320843 C8.59603623,16.1324023 7.25939293,15.0520947 6.902527,13.520768 L6.86737513,13.3495589 L5.56575351,6.11005194 C5.4390297,5.40628701 4.86792026,4.87649308 4.17151313,4.81667446 L4.04117512,4.81141646 L3.87911426,4.81141646 C3.41150376,4.80827535 3.02699669,4.43311419 3.00135195,3.95498921 C2.9757072,3.47686423 3.31777813,3.06083887 3.78223999,3.00527615 L3.87913185,3.00000007 L4.0411927,3.00000007 L3.87913185,3.00000007 Z" stroke="currentColor" stroke-width="0.2" fill="currentColor"></path>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="65.187 30.69 929.192 929.192" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M529.78217 48.576307c-246.72 0-446.726246 200.000102-446.726246 446.709965 0 246.709965 200.006246 446.708941 446.726246 446.708941 246.721024 0 446.72727-199.999078 446.72727-446.708941C976.50944 248.577434 776.503296 48.576307 529.78217 48.576307zM408.385536 724.046438c-18.950349 0-34.317005-15.361843-34.317005-34.314547 0-18.95465 15.366554-34.317619 34.317005-34.317619 18.954445 0 34.317005 15.362867 34.317005 34.317619C442.703462 708.684595 427.339981 724.046438 408.385536 724.046438zM618.101248 733.695181c-26.059571 0-47.186534-21.126144-47.186534-47.185715 0-26.058445 21.12809-47.180595 47.186534-47.180595 26.060595 0 47.18551 21.123072 47.18551 47.180595C665.286758 712.569037 644.160819 733.695181 618.101248 733.695181zM827.649126 316.21591c0 13.335757-11.555635 24.146944-25.809818 24.146944l-81.197557 0-92.148429 261.262336c-3.498803 10.746778-13.894042 17.305088-24.741478 16.469094-0.674406 0.052224-1.354957 0.101274-2.046669 0.101274L354.153156 618.195558c-13.877658 0-25.126298-10.814259-25.126298-24.148992l0-7.469112c0-13.334733 11.24864-24.150016 25.126298-24.150016l229.050895 0 12.21673-34.625638L312.42409 527.8018c-13.336269 0-24.148992-10.810163-24.148992-24.147968l0-7.467065c0-13.337805 10.812723-24.148992 24.148992-24.148992l302.330807 0c0.109466 0 0.216986 0.016384 0.324403 0.017408l11.920998-33.794662L286.686884 438.26052c-13.338317 0-24.148992-10.811187-24.148992-24.147968l0-7.469112c0-13.335757 10.810675-24.147968 24.148992-24.147968l359.982147 0 28.983296-82.167398c3.146752-9.680486 11.899494-15.965594 21.52919-16.505958 1.252557-0.17705 2.522522-0.296755 3.827302-0.296755l100.829468 0c14.254182 0 25.809818 10.810163 25.809818 24.147968L827.648106 316.215942z" /></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="-26.348 -3.619 1050.621 1050.621" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M332.8 790.528q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM758.784 792.576q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM930.816 210.944q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.84t-38.4 14.336l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-12.288l103.424 0q20.48 0 32.768 6.144t19.456 15.36 10.24 18.944 5.12 16.896q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM892.928 302.08l-641.024-2.048 35.84 185.344 535.552 1.024z" /></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="-13.036 -8.452 1050.621 1050.621" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M346.112 806.912q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM772.096 808.96q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM944.128 227.328q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.328t-38.4 14.848l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-13.312l21.504 0 21.504 0 25.6 0 34.816 0q20.48 0 32.768 6.144t19.456 15.36 10.24 19.456 5.12 17.408q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM867.328 194.56l-374.784 0 135.168-135.168q23.552-23.552 51.712-24.064t51.712 23.04z" /></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="54px" height="54px" viewBox="2.194 2.6 19.611 19.611" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>首页icon</title>
<path d="M3.63529416,8.65865703 L10.0265566,4.03333119 C11.2308486,3.1617909 12.8595851,3.16562087 14.059765,4.04281528 L20.3744862,8.65815545 C21.0369589,9.14234737 21.4285714,9.91363287 21.4285714,10.7341887 L21.4285714,18 C21.4285714,19.8935477 19.8935477,21.4285714 18,21.4285714 L6,21.4285714 C4.10645229,21.4285714 2.57142857,19.8935477 2.57142857,18 L2.57142857,10.7418034 C2.57142857,9.91698428 2.96709792,9.14222743 3.63529416,8.65865703 Z" fill="currentColor"></path>
<path d="M12,11 C12.3624369,11 12.65625,11.2938131 12.65625,11.65625 L12.656,13.343 L14.34375,13.34375 C14.7061869,13.34375 15,13.6375631 15,14 C15,14.3624369 14.7061869,14.65625 14.34375,14.65625 L12.656,14.656 L12.65625,16.34375 C12.65625,16.7061869 12.3624369,17 12,17 C11.6375631,17 11.34375,16.7061869 11.34375,16.34375 L11.343,14.656 L9.65625,14.65625 C9.29381313,14.65625 9,14.3624369 9,14 C9,13.6375631 9.29381313,13.34375 9.65625,13.34375 L11.343,13.343 L11.34375,11.65625 C11.34375,11.2938131 11.6375631,11 12,11 Z" fill="#FFFFFF"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="89.059 87.718 845.882 845.882" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M155.584 342.56l312.874667-224.565333a74.666667 74.666667 0 0 1 87.082666 0l312.874667 224.565333A117.333333 117.333333 0 0 1 917.333333 437.866667V800c0 64.8-52.533333 117.333333-117.333333 117.333333H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V437.877333a117.333333 117.333333 0 0 1 48.917333-95.317333z m37.322667 51.989333A53.333333 53.333333 0 0 0 170.666667 437.877333V800a53.333333 53.333333 0 0 0 53.333333 53.333333h576a53.333333 53.333333 0 0 0 53.333333-53.333333V437.877333a53.333333 53.333333 0 0 0-22.24-43.328L518.218667 169.984a10.666667 10.666667 0 0 0-12.437334 0L192.906667 394.56z" /></svg>

After

Width:  |  Height:  |  Size: 922 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="89.059 87.718 845.882 845.882" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M555.541333 117.994667l312.874667 224.565333A117.333333 117.333333 0 0 1 917.333333 437.866667V800c0 64.8-52.533333 117.333333-117.333333 117.333333H640V746.666667c0-70.688-57.312-128-128-128s-128 57.312-128 128v170.666666H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V437.877333a117.333333 117.333333 0 0 1 48.917333-95.317333l312.874667-224.565333a74.666667 74.666667 0 0 1 87.082666 0z" /></svg>

After

Width:  |  Height:  |  Size: 708 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="-20.47 -20.478 1064.94 1064.94" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M999.103969 450.980217 600.03496 32.435355C559.394816-10.188151 492.394773-10.891714 450.867491 30.861655L26.049704 457.992209C-23.655972 507.968481 1.212199 568.281046 71.688022 567.83196L191.983925 567.065422 156.438281 531.756441 156.438281 917.836305C156.438281 976.336883 203.589196 1023.825676 261.911636 1023.825676L389.99329 1023.825676 389.99329 953.206301 261.911636 953.206301C242.721404 953.206301 227.0793 937.452108 227.0793 917.836305L227.0793 531.756441C227.0793 512.167492 211.12822 496.322622 191.533656 496.447477L71.237753 497.214033C66.173938 497.246289 62.895469 496.713148 61.736428 496.22598 63.980271 497.169102 67.084328 499.993735 69.04654 504.752651 70.980045 509.441972 70.786089 513.494624 69.931418 515.610663 70.455361 514.313455 72.463158 511.484602 76.143505 507.784218L500.961291 80.653664C514.458349 67.083127 535.692465 67.306108 548.901395 81.159669L947.970422 499.704531C951.487338 503.393087 953.386928 506.221746 953.891186 507.578027 953.219595 505.771654 953.125848 502.205128 954.837927 498.082651 956.584273 493.877656 959.306191 491.320776 961.229598 490.464427 960.049848 490.989677 956.841363 491.570786 951.877986 491.602406L952.328255 562.22035C1022.230896 561.774919 1047.266224 501.492949 999.103969 450.980217ZM774.238215 1023.825676C832.500577 1023.825676 879.711571 976.292569 879.711571 917.836305L879.711571 527.597754 844.616195 562.906718 952.328255 562.22035 951.877986 491.602406 844.165926 492.288773C824.747205 492.412516 809.070551 508.184576 809.070551 527.597754L809.070551 917.836305C809.070551 937.402462 793.373788 953.206301 774.238215 953.206301L646.156562 953.206301 646.156562 1023.825676 774.238215 1023.825676ZM582.482144 670.786834C582.575273 670.786834 582.632792 1023.982363 582.632792 1023.982363L653.273812 1023.982363 653.273812 670.618548C653.273812 631.73658 621.484606 600.16746 582.482144 600.16746L441.501384 600.16746C402.513769 600.16746 370.709699 631.646628 370.709699 670.618548L441.350736 670.618548C441.350736 670.806978 582.482144 670.786834 582.482144 670.786834ZM441.350736 670.618548 370.709699 670.618548 370.709699 1023.982363 441.350736 1023.982363 441.350736 670.618548Z" /></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="54px" height="54px" viewBox="-0.48 -0.346 18.652 18.652" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>商城icon</title>
<g fill="currentColor">
<path d="M3.13986073,5.7192595 C3.13986073,2.56763457 5.69475754,0.012737759 8.84638247,0.012737759 C11.9980074,0.012737759 14.5529042,2.56763457 14.5529042,5.7192595 L14.6735564,5.7192595 C15.9514732,5.71933206 17.013898,6.70325607 17.1118716,7.97741168 L17.676002,15.3143682 C17.7282154,15.9934066 17.4949208,16.6634629 17.0322765,17.1632425 C16.5696322,17.6630221 15.9195449,17.9472547 15.238502,17.9475204 L2.45507812,17.9475204 C1.77389347,17.9475204 1.12358932,17.663348 0.660765403,17.1635415 C0.197941481,16.663735 -0.0354612546,15.993548 0.0167629012,15.3143682 L0.580893349,7.97741168 C0.678866965,6.70325607 1.74129177,5.71933206 3.01920857,5.7192595 L3.13986073,5.7192595 Z M4.77029552,5.7192595 L12.9224694,5.7192595 C12.9224694,3.46809887 11.0975431,1.64317262 8.84638247,1.64317262 C6.59522183,1.64317262 4.77029552,3.46809887 4.77029552,5.7192595 Z M3.01920857,7.3496943 C2.59333305,7.3496943 2.23922924,7.67752881 2.20643682,8.10213995 L1.64230639,15.4390965 C1.62481872,15.6655348 1.70258388,15.8890035 1.85686748,16.055667 C2.01115109,16.2223304 2.22796552,16.3170856 2.45507812,16.3170856 L15.2376868,16.3170856 C15.4647994,16.3170856 15.6816139,16.2223304 15.8358975,16.055667 C15.9901811,15.8890035 16.0679462,15.6655348 16.0504586,15.4390965 L15.4863281,8.10213995 C15.4535357,7.67752881 15.0994319,7.3496943 14.6735564,7.3496943 L3.01920857,7.3496943 L3.01920857,7.3496943 Z"></path>
<path d="M4.77029552,10.6105639 C4.77029552,12.8617245 6.59522183,14.6866507 8.84638247,14.6866507 C11.0975431,14.6866507 12.9224694,12.8617245 12.9224694,10.6105639 C12.9224694,10.1603805 12.5574354,9.79547126 12.107252,9.79547126 C11.6570686,9.79547126 11.2921036,10.1603805 11.2920346,10.6105639 C11.2920346,11.9612603 10.1970789,13.056216 8.84638247,13.056216 C7.49568607,13.056216 6.4007303,11.9612603 6.4007303,10.6105639 C6.40066138,10.1603805 6.03569631,9.79547126 5.58551291,9.79547126 C5.13532951,9.79547126 4.77029552,10.1603805 4.77029552,10.6105639 Z"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="44 44 936 936" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M918.223 125.763c-0.021-23.657-19.221-42.805-42.857-42.805h-0.041l-728.572 0.9c-23.657 0.021-42.836 19.231-42.815 42.899L62 898.248c0.021 23.657 19.221 42.794 42.878 42.794h0.042l814.285-0.994c23.658-0.021 42.838-19.241 42.795-42.92l-43.777-771.365z m-167.36 309.752c-41.057 93.362-134.723 153.766-238.643 153.86h-0.377c-103.722 0-197.356-60.121-238.634-153.274-9.584-21.639 0.178-46.949 21.826-56.543 21.585-9.596 46.948 0.178 56.543 21.826 27.539 62.15 90.433 102.277 160.285 102.277h0.251c69.988-0.063 132.893-40.357 160.275-102.654 9.542-21.659 34.821-31.474 56.49-21.983 21.66 9.532 31.506 34.821 21.984 56.491z" /></svg>

After

Width:  |  Height:  |  Size: 911 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="58.291 68.042 910.701 910.701" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M884.3264 210.6368c0-69.12-55.296-125.0816-123.5456-125.0816L266.496 85.5552c-68.2496 0-123.5968 55.9616-123.5968 125.0816L101.6832 836.096c0 69.12 55.296 125.1328 123.5968 125.1328l576.7168 0c68.2496 0 123.60192-56.0128 123.60192-125.1328L884.3264 210.6368zM746.6496 255.3344c0 61.5936-23.7056 119.552-66.7648 163.1232-43.008 43.5712-100.2496 67.584-161.1264 67.584-60.8768 0-118.1184-24.0128-161.1776-67.584-43.008-43.5712-66.7136-101.5296-66.7136-163.1232l0-0.6656 56.0128 0.1024 0 0.7168c0.1024 95.8464 77.1584 173.824 171.8784 173.824 94.72 0 171.776-77.9776 171.8272-173.824l0-0.6656 56.064-0.256L746.6496 255.3344z" /></svg>

After

Width:  |  Height:  |  Size: 932 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="44 58.515 936.001 936.001" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M834.799 183.24l38.923 685.672-723.549 0.879 37.27-685.767 647.356-0.784m40.545-85.767h-0.042l-728.571 0.89c-23.668 0.031-42.836 19.242-42.805 42.909L62 912.764c0.031 23.646 19.221 42.794 42.878 42.794h0.042l814.286-0.983c23.668-0.031 42.826-19.252 42.795-42.92l-43.789-771.366c-0.032-23.658-19.222-42.816-42.868-42.816z" /><path fill="currentColor" d="M511.801 603.891c-103.69 0-197.314-60.121-238.592-153.275-9.584-21.638 0.178-46.948 21.826-56.543 21.585-9.584 46.948 0.167 56.543 21.826 27.539 62.151 90.423 102.277 160.244 102.277h0.282c69.988-0.072 132.893-40.366 160.275-102.653 9.543-21.669 34.832-31.453 56.49-21.983 21.67 9.532 31.505 34.821 21.983 56.491-41.058 93.353-134.724 153.756-238.644 153.861l-0.407-0.001z" /></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="54px" height="54px" viewBox="2.5 2 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>我的备份</title>
<path d="M15.5,2.75 L15.75,6.5 C15.75,7.53553391 15.330267,8.47303391 14.6516504,9.15165043 C13.9730339,9.83026695 13.0355339,10.25 12,10.25 C10.9644661,10.25 10.0269661,9.83026695 9.34834957,9.15165043 C8.66973305,8.47303391 8.25,7.53553391 8.25,6.5 C8.25,5.46446609 8.66973305,4.52696609 9.34834957,3.84834957 C10.0269661,3.16973305 10.9644661,2.75 12,2.75 L12,2.75 L15.5,2.75 Z" stroke="currentColor" stroke-width="1.5" fill="none"></path>
<rect stroke="currentColor" stroke-width="1.5" x="4.75" y="11.75" width="14.5" height="8.5" rx="4.25" fill="none"></rect>
<path d="M12,13 C12.3624369,13 12.65625,13.2938131 12.65625,13.65625 L12.656,15.343 L14.34375,15.34375 C14.7061869,15.34375 15,15.6375631 15,16 C15,16.3624369 14.7061869,16.65625 14.34375,16.65625 L12.656,16.656 L12.65625,18.34375 C12.65625,18.7061869 12.3624369,19 12,19 C11.6375631,19 11.34375,18.7061869 11.34375,18.34375 L11.343,16.656 L9.65625,16.65625 C9.29381313,16.65625 9,16.3624369 9,16 C9,15.6375631 9.29381313,15.34375 9.65625,15.34375 L11.343,15.343 L11.34375,13.65625 C11.34375,13.2938131 11.6375631,13 12,13 Z" fill="currentColor"></path>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="71.005 46.917 887.494 887.494" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M514.752 490.656a213.344 213.344 0 1 1 0-426.656 213.344 213.344 0 0 1 0 426.656zM280.096 448c66.016 71.104 144.256 106.656 234.688 106.656 90.4 0 168.64-35.52 234.624-106.656l117.376 258.208a149.344 149.344 0 0 1-135.936 211.136H298.656a149.344 149.344 0 0 1-135.936-211.136L280.096 448z" /></svg>

After

Width:  |  Height:  |  Size: 599 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="51.2 51.2 968.145 968.145" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M535.272727 69.818182c-257.070545 0-465.454545 208.384-465.454545 465.454545 0 257.070545 208.384 465.454545 465.454545 465.454545 257.070545 0 465.454545-208.384 465.454545-465.454545C1000.727273 278.202182 792.343273 69.818182 535.272727 69.818182zM254.184727 845.265455C298.030545 732.253091 406.760727 651.636364 535.272727 651.636364c128.512 0 237.242182 80.616727 281.088 193.582545-74.379636 67.490909-172.776727 108.962909-281.088 108.962909C426.961455 954.181818 328.564364 912.709818 254.184727 845.265455zM395.636364 465.454545c0-77.125818 62.510545-139.636364 139.636364-139.636364 77.125818 0 139.636364 62.510545 139.636364 139.636364s-62.510545 139.636364-139.636364 139.636364C458.146909 605.090909 395.636364 542.580364 395.636364 465.454545zM851.502545 809.472c-41.146182-89.786182-118.365091-159.278545-213.876364-188.695273C688.081455 587.496727 721.454545 530.432 721.454545 465.454545c0-102.818909-83.362909-186.181818-186.181818-186.181818-102.818909 0-186.181818 83.362909-186.181818 186.181818 0 64.977455 33.373091 122.042182 83.874909 155.368727-95.511273 29.370182-172.730182 98.862545-213.876364 188.695273C155.229091 735.976727 116.363636 640.279273 116.363636 535.272727c0-231.377455 187.531636-418.909091 418.909091-418.909091 231.377455 0 418.909091 187.531636 418.909091 418.909091C954.181818 640.279273 915.269818 735.976727 851.502545 809.472z" /></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200px" viewBox="42.357 45.426 935.19 935.19" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M60.342832 962.631304c7.495718-205.833949 153.446811-376.366903 347.56595-421.346327-87.180572-39.005362-147.918911-126.462227-147.918911-228.090858 0-40.947598 9.870812-79.593779 27.336602-113.703645-6.749728-10.416234-10.667967-22.832008-10.667967-36.166711 0-36.784788 29.839609-66.609047 66.64077-66.609047 10.863419 0 21.107737 2.594081 30.149671 7.187703 39.256072-25.604144 86.123496-40.492226 136.50393-40.492226 138.030703 0 249.944586 111.834065 249.944586 249.783926 0 101.628632-60.737316 189.085496-147.917888 228.090858 194.118116 44.979424 340.069209 215.512379 347.582323 421.346327L60.342832 962.631304z" /></svg>

After

Width:  |  Height:  |  Size: 929 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编辑信息</title>
<g id="个人中心" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="店铺装修-个人中心头部自定义2" transform="translate(-915.000000, -367.000000)">
<g id="编组-41" transform="translate(300.000000, 142.000000)">
<g id="编组-8" transform="translate(473.000000, 89.000000)">
<g id="编辑信息" transform="translate(142.000000, 136.000000)">
<circle id="椭圆形" fill="#FFFFFF" opacity="0.742071174" cx="9.5" cy="9.5" r="9.5"></circle>
<g id="vuesax/bulk/edit-2" transform="translate(3.000000, 2.000000)">
<path d="M14,0 L14,14 L0,14 L0,0 L14,0 Z" id="Vector" opacity="0"></path>
<path d="M1.75,12.8333333 C1.51083334,12.8333333 1.3125,12.635 1.3125,12.3958333 C1.3125,12.1566667 1.51083334,11.9583333 1.75,11.9583333 L12.25,11.9583333 C12.4891667,11.9583333 12.6875,12.1566667 12.6875,12.3958333 C12.6875,12.635 12.4891667,12.8333333 12.25,12.8333333 L1.75,12.8333333 Z" id="Vector" fill="#1271BA" fill-rule="nonzero" opacity="0.400000006"></path>
<path d="M7.69449458,2.03009173 L6.98866118,2.73592516 C6.93032785,2.79425849 6.90699485,2.88759188 6.93032819,2.96925855 C7.37366151,4.51509194 8.61032808,5.7517584 10.1561615,6.19509172 C10.1794948,6.20092506 10.2028286,6.20675866 10.226162,6.20675866 C10.2903286,6.20675866 10.3486614,6.18342539 10.395328,6.13675872 L11.0953285,5.43092537 C11.6728285,4.85925869 11.9528281,4.30509182 11.9528281,3.74509184 C11.9586614,3.16759183 11.6786618,2.60759174 11.0953285,2.03009173 C9.96366179,0.898425033 8.85532791,0.869258394 7.69449458,2.03009173 Z" id="Vector" fill="#1271BA" fill-rule="nonzero" opacity="0.400000006"></path>
<path d="M8.61601941,6.46905271 C8.48768608,6.39321938 8.36518587,6.31155267 8.24268587,6.22405267 C8.14351921,6.159886 8.02685229,6.06655249 7.91601896,5.97321916 C7.9043523,5.96738582 7.86351892,5.93238604 7.81685225,5.88571938 C7.62435224,5.72238604 7.40851908,5.51238607 7.21601907,5.27905273 C7.19851907,5.26738607 7.16935263,5.22655256 7.1285193,5.17405256 C7.07018596,5.10405256 6.97101926,4.98738578 6.88351925,4.85321911 C6.81351925,4.76571911 6.73185238,4.63738597 6.65601905,4.50905263 C6.56268572,4.35155263 6.4810193,4.19405253 6.39935263,4.0307192 C6.31768596,3.85571919 6.25351907,3.68655274 6.19518574,3.52905273 L2.5318527,7.19238591 C2.45601937,7.26821924 2.38601925,7.41405269 2.36851925,7.51321936 L2.05351926,9.74738542 C1.99518592,10.1440521 2.10601941,10.5173854 2.3510194,10.7682188 C2.56101941,10.9723854 2.85268583,11.0832193 3.16768585,11.0832193 C3.23768584,11.0832193 3.30768593,11.0773856 3.37768592,11.0657189 L5.61768587,10.7507195 C5.72268588,10.7332195 5.86851932,10.6632191 5.93851932,10.5873857 L9.60185194,6.92405256 C9.43851861,6.86571922 9.28101895,6.80155246 9.10601894,6.72571913 C8.93685228,6.64405247 8.77351941,6.56238604 8.61601941,6.46905271 Z" id="Vector" fill="#1271BA" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="80px" height="20px" viewBox="0 0 80 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>会员标志</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFDE00" offset="0%"></stop>
<stop stop-color="#FFBB00" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#FFC321" offset="0%"></stop>
<stop stop-color="#FFE573" offset="100%"></stop>
</linearGradient>
</defs>
<g id="个人中心" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="店铺装修-个人中心头部自定义2" transform="translate(-858.000000, -393.000000)">
<g id="编组-41" transform="translate(300.000000, 142.000000)">
<g id="编组-8" transform="translate(473.000000, 89.000000)">
<g id="编组-4" transform="translate(15.000000, 128.000000)">
<g id="会员标志" transform="translate(70.000000, 34.000000)">
<path d="M12.8572652,2 L71,2 C75.9705627,2 80,6.02943725 80,11 C80,15.9705627 75.9705627,20 71,20 L11.4753402,20 C8.1872916,20 5.52180152,17.3345099 5.52180152,14.0464613 C5.52180152,12.9739871 5.81150267,11.9214276 6.36029412,11 L11.1389439,2.97658806 C11.4996165,2.37101433 12.1524217,2 12.8572652,2 Z" id="矩形" fill="#FFEDBE"></path>
<g id="编组-3" transform="translate(66.000000, 7.000000)">
<rect id="矩形" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="8" height="8"></rect>
<path d="M5.68198052,3.67487373 C5.87724266,3.87013588 5.87724266,4.18671837 5.68198052,4.38198052 L2.85355339,7.21040764 C2.65829124,7.40566979 2.34170876,7.40566979 2.14644661,7.21040764 C1.95118446,7.01514549 1.95118446,6.698563 2.14644661,6.50330086 L4.62132034,4.02842712 L2.14644661,1.55355339 C1.95118446,1.35829124 1.95118446,1.04170876 2.14644661,0.846446609 C2.34170876,0.651184464 2.65829124,0.651184464 2.85355339,0.846446609 L5.68198052,3.67487373 Z" id="路径" fill="#997700"></path>
</g>
<text id="黄金会员" font-family="PingFangSC-Medium, PingFang SC" font-size="10" font-weight="400" line-spacing="12" fill="#997700">
<tspan x="25" y="16">黄金会员</tspan>
</text>
<g id="编组">
<path d="M3.72193488,7.86096744 L12,12 L12,12 L20.2780651,7.86096744 C21.2660221,7.36698894 22.4673682,7.76743763 22.9613467,8.75539463 C23.1644456,9.16159247 23.2232533,9.62481788 23.1280971,10.06888 L21.3387732,18.4190582 C21.1411715,19.3411997 20.326244,20 19.3831684,20 L4.61683158,20 C3.67375601,20 2.85882852,19.3411997 2.66122675,18.4190582 L0.871902857,10.06888 C0.640463416,8.98882927 1.32839878,7.92565643 2.40844951,7.69421699 C2.85251162,7.59906082 3.31573704,7.65786852 3.72193488,7.86096744 Z" id="矩形" fill="url(#linearGradient-1)"></path>
<path d="M13.7524318,3.18623967 L21.3698894,17.0361625 C21.9022021,18.0040039 21.5491364,19.2201191 20.5812951,19.7524318 C20.2860051,19.9148413 19.9544635,20 19.6174576,20 L4.38254244,20 C3.27797294,20 2.38254244,19.1045695 2.38254244,18 C2.38254244,17.6629941 2.46770114,17.3314525 2.63011062,17.0361625 L10.2475682,3.18623967 C10.7798809,2.2183983 11.9959961,1.8653326 12.9638375,2.39764535 C13.2961569,2.58042104 13.5696561,2.85392024 13.7524318,3.18623967 Z" id="三角形" fill="url(#linearGradient-2)"></path>
<circle id="椭圆形" fill="#CE9700" cx="12" cy="12" r="3"></circle>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="375px" height="250px" viewBox="0 0 375 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>顶部背景</title>
<defs>
<path d="M0,0 L375,0 L375,238 C375,244.627417 369.627417,250 363,250 L12,250 C5.372583,250 8.11624501e-16,244.627417 0,238 L0,0 L0,0 Z" id="path-1"></path>
</defs>
<g id="个人中心" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="店铺装修-个人中心头部自定义2" transform="translate(-773.000000, -231.000000)">
<g id="编组-41" transform="translate(300.000000, 142.000000)">
<g id="顶部背景" transform="translate(473.000000, 89.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="矩形" fill="#E7E9EE" xlink:href="#path-1"></use>
<g id="编组" mask="url(#mask-2)" fill="#383838" fill-rule="nonzero" opacity="0.0531379251">
<g transform="translate(132.000000, 100.000000)" id="形状">
<path d="M45.4746977,22.5277648 C44.3999104,21.4526365 43.1316614,20.6014932 41.6806986,19.9631358 C40.2189879,19.3247783 38.6712942,19 37.0376176,19 C35.3502015,19 33.7810121,19.3135791 32.3193014,19.9631358 C30.8575907,20.6014932 29.6000896,21.4526365 28.5253023,22.5277648 C27.450515,23.6028931 26.5906852,24.8684088 25.9565607,26.3243117 C25.3116883,27.7802147 25,29.3257116 25,30.9608026 C25,32.5958936 25.3224362,34.1413906 25.9565607,35.5972935 C26.601433,37.0531965 27.450515,38.3299113 28.5253023,39.4274382 C29.6000896,40.524965 30.8683386,41.3985068 32.3193014,42.0368642 C33.7810121,42.6752217 35.3502015,43 37.0376176,43 C38.6712942,43 40.2189879,42.6752217 41.6806986,42.0368642 C43.1424093,41.3985068 44.3999104,40.524965 45.4746977,39.4274382 C46.549485,38.3299113 47.4093148,37.0531965 48.0434393,35.5972935 C48.6775638,34.1413906 49,32.5958936 49,30.9608026 C49,29.3257116 48.6775638,27.7802147 48.0434393,26.3243117 C47.4093148,24.8572095 46.549485,23.5916939 45.4746977,22.5277648 Z M88.3074327,0 L9.70351104,0 C4.34191002,0 -2.13162821e-14,4.18773499 -2.13162821e-14,9.3562816 L-2.13162821e-14,75.6437184 C-2.13162821e-14,80.812265 4.34191002,85 9.70351104,85 L88.2964682,85 C93.6580693,85 98,80.812265 98,75.6437184 L98,9.3562816 C98.0109437,4.18773499 93.6690337,0 88.3074327,0 Z M88,62.1429112 C86.9630563,59.8404537 85.7514694,57.4941399 84.3761545,55.0930057 C83.0008396,52.6918715 81.4945424,50.520983 79.8572628,48.5693762 C78.2199832,46.6177694 76.440806,45.0279773 74.5197313,43.8 C72.5986566,42.5720227 70.6011755,41.958034 68.5163728,41.958034 C66.0713686,41.958034 63.9974811,42.4185255 62.2837951,43.3395085 C60.5701092,44.2714556 59.0856423,45.4226843 57.8413098,46.826087 C56.5969773,48.2294896 55.472712,49.731569 54.4903442,51.3323251 C53.5079765,52.9330813 52.5146935,54.4351607 51.5323258,55.8385633 C50.549958,57.241966 49.4693535,58.4041588 48.3014274,59.3251418 C47.1335013,60.2461248 45.7472712,60.7066163 44.131822,60.7066163 C42.5163728,60.7066163 41.1410579,60.5969754 40.0058774,60.3667297 C38.8597817,60.1364839 37.8337531,59.8514178 36.9277918,59.5005671 C36.0218304,59.1497164 35.170445,58.7659735 34.395466,58.3383743 C33.620487,57.910775 32.7691016,57.5270321 31.8631402,57.1761815 C30.9571788,56.8253308 29.9202351,56.5402647 28.7413938,56.3100189 C27.5734677,56.0797732 26.1872376,55.9701323 24.5717884,55.9701323 C23.2183039,55.9701323 21.8866499,56.3100189 20.5549958,56.978828 C19.2342569,57.6586011 17.9462636,58.5137996 16.7019312,59.5663516 C15.4575987,60.6189036 14.256927,61.7920605 13.1217464,63.0967864 C11.9756507,64.4015123 10.938707,65.6952741 10,67 L10,13.1663516 C10,10.8638941 11.9429051,9 14.3333333,9 L83.6666667,9 C86.0570949,9 88,10.8638941 88,13.1663516 L88,62.1429112 Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><g><g><path d="M7.5752563,2.875C4.0818968,2.875,1.25,5.2536662,1.25,8.1876192C1.25,9.7886624,2.10210472,11.2296505,3.4354892,12.2034616C3.5426161,12.2804785,3.6126609,12.4067802,3.6126609,12.549881C3.6126609,12.5969477,3.6026769,12.6398926,3.5903163,12.685216L3.5411754,12.8700047C3.4382248,13.257137,3.3121698,13.731153,3.3053834,13.756804C3.3021185,13.769165,3.2984152,13.781639,3.2946849,13.794204C3.2832055,13.83287,3.2714703,13.872399,3.2714703,13.912107C3.2714703,14.029535,3.3657613,14.12446,3.4822383,14.12446C3.5281954,14.12446,3.5654361,14.107504,3.603945,14.085001L4.988991,13.279169C5.0929489,13.218792,5.203087099999999,13.181551,5.324635,13.181551C5.3894501,13.181551,5.4517298,13.191218,5.5105228,13.209283C6.1566138,13.396597,6.853416,13.500555,7.5752563,13.500555C7.6918917,13.500555,7.8075762,13.497386,7.9226265,13.492314C7.7850728,13.077752,7.7102747,12.6414776,7.7102747,12.1901493C7.7102747,9.5143471,10.2928944,7.3448644,13.478976,7.3448644C13.56617,7.3448644,13.6043,7.3469462,13.666778,7.350358C13.686966,7.3514605,13.709697,7.3527017,13.737445,7.3540559C13.261079,4.8159664,10.7309122,2.875,7.5752563,2.875ZM5.4671016,7.2413821C5.0538063,7.2413821,4.7189546,6.9038367,4.7189546,6.487689C4.7189546,6.0713825,5.0538063,5.7339953999999995,5.4671016,5.7339953999999995C5.8797631,5.7339953999999995,6.2146144,6.0713825,6.2146144,6.487689C6.2146144,6.9038367,5.8797631,7.2413821,5.4671016,7.2413821ZM9.6837282,7.2412238C9.27075,7.2412238,8.9358978,6.9038367,8.9358978,6.487689C8.9358978,6.0713825,9.27075,5.7339953999999995,9.6837282,5.7339953999999995C10.0967064,5.7339953999999995,10.4315577,6.0713825,10.4315577,6.487689C10.4315577,6.9038367,10.0967064,7.2412238,9.6837282,7.2412238ZM16.928837,15.536524C18.040045,14.724829,18.75,13.524085,18.75,12.1900673C18.75,9.7448425,16.39019,7.7629905,13.478899,7.7629905C10.5679255,7.7629905,8.2078004,9.7448425,8.2078004,12.1900673C8.2078004,14.635292,10.5679255,16.617461,13.478899,16.617461C14.080301,16.617461,14.661102,16.530777999999998,15.19959,16.374841C15.248558,16.359785000000002,15.300537,16.351385999999998,15.354577,16.351385999999998C15.455681,16.351385999999998,15.547595,16.382447,15.634438,16.432999000000002L16.788114999999998,17.104605C16.820442,17.122989,16.851663000000002,17.137568,16.889853000000002,17.137568C16.986998,17.137568,17.0656,17.058172,17.0656,16.960554000000002C17.0656,16.927751999999998,17.055934999999998,16.895213,17.046485,16.863396C17.043243,16.852480999999997,17.040025999999997,16.84165,17.037233,16.830923C17.030577,16.805885,16.888586,16.271517,16.799683,15.937933C16.789541,15.900374,16.781143,15.864244,16.781143,15.825101C16.781143,15.706247,16.839460000000003,15.600704,16.928837,15.536524ZM11.72192,11.436533C11.358543,11.436533,11.0637846,11.1397142,11.0637846,10.7734857C11.0637846,10.407097799999999,11.358543,10.1101208,11.72192,10.1101208C12.085455,10.1101208,12.380055,10.407097799999999,12.380055,10.7734857C12.380055,11.1397142,12.085455,11.436533,11.72192,11.436533ZM15.23604,11.436533C14.872503,11.436533,14.578222,11.1397142,14.578222,10.7734857C14.578222,10.407097799999999,14.872503,10.1101208,15.23604,10.1101208C15.599575,10.1101208,15.894175,10.407097799999999,15.894175,10.7734857C15.894175,11.1397142,15.599575,11.436533,15.23604,11.436533Z" fill-rule="evenodd" fill="#ECF2FF" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

@ -0,0 +1,813 @@
.hover:hover {
cursor: pointer;
}
//
// =========================
// 1px
//
// ml-4 -> margin-left: 4px
// mlr-4 -> margin-left/right: 4px
// mtb-4 -> margin-top/bottom: 4px
// mx / my
// =========================
$spacing-px-max: 500 !default;
$spacing-percent-max: 100 !default;
$radius-px-max: 50 !default;
$radius-percent-max: 100 !default;
$flex-max: 24 !default;
$spacing-em-max: 20 !default;
$spacing-rem-max: 15 !default;
$spacing-unit: 1px !default;
@mixin spacing-single($class, $property, $value) {
.#{$class}-#{$value} {
#{$property}: $value * $spacing-unit !important;
}
}
@mixin spacing-double($class, $property1, $property2, $value) {
.#{$class}-#{$value} {
#{$property1}: $value * $spacing-unit !important;
#{$property2}: $value * $spacing-unit !important;
}
}
@mixin spacing-single-with-suffix($class, $property, $suffix, $value, $unit) {
.#{$class}-#{$suffix}-#{$value} {
#{$property}: #{$value}#{$unit} !important;
}
}
@mixin generate-flex-utilities($max: $flex-max) {
@for $i from 0 through $max {
.flex-#{$i} {
flex: #{$i} !important;
}
}
}
@mixin spacing-double-with-suffix(
$class,
$property1,
$property2,
$suffix,
$value,
$unit
) {
.#{$class}-#{$suffix}-#{$value} {
#{$property1}: #{$value}#{$unit} !important;
#{$property2}: #{$value}#{$unit} !important;
}
}
@mixin border-radius-single($class, $value) {
.#{$class}-#{$value} {
border-radius: #{$value}px !important;
}
}
@mixin border-radius-single-with-suffix($class, $suffix, $value, $unit) {
.#{$class}-#{$suffix}-#{$value} {
border-radius: #{$value}#{$unit} !important;
}
}
@mixin line-height-single($value) {
.lh-#{$value} {
line-height: #{$value}px !important;
}
}
@mixin line-height-single-with-suffix($suffix, $value, $unit) {
.lh-#{$suffix}-#{$value} {
line-height: #{$value}#{$unit} !important;
}
}
@mixin generate-spacing-utilities($prefix, $property, $max: $spacing-px-max) {
@for $i from 0 through $max {
@include spacing-single($prefix, $property, $i);
}
}
@mixin generate-spacing-axis-utilities(
$prefix,
$property1,
$property2,
$max: $spacing-px-max
) {
@for $i from 0 through $max {
@include spacing-double($prefix, $property1, $property2, $i);
}
}
@mixin generate-spacing-utilities-with-suffix(
$prefix,
$property,
$suffix,
$unit,
$max: $spacing-px-max
) {
@for $i from 0 through $max {
@include spacing-single-with-suffix($prefix, $property, $suffix, $i, $unit);
}
}
@mixin generate-spacing-axis-utilities-with-suffix(
$prefix,
$property1,
$property2,
$suffix,
$unit,
$max: $spacing-px-max
) {
@for $i from 0 through $max {
@include spacing-double-with-suffix(
$prefix,
$property1,
$property2,
$suffix,
$i,
$unit
);
}
}
@include generate-flex-utilities($flex-max);
// line-height
@for $i from 0 through $spacing-px-max {
@include line-height-single($i);
}
@for $i from 0 through $spacing-px-max {
@include line-height-single-with-suffix("ra", $i, "");
}
// border-radius
@for $i from 0 through $radius-px-max {
@include border-radius-single("radius", $i);
}
@for $i from 0 through $radius-percent-max {
@include border-radius-single-with-suffix("radius", "ra", $i, "%");
}
// margin
@include generate-spacing-utilities("m", margin);
@include generate-spacing-utilities("mt", margin-top);
@include generate-spacing-utilities("mr", margin-right);
@include generate-spacing-utilities("mb", margin-bottom);
@include generate-spacing-utilities("ml", margin-left);
@include generate-spacing-axis-utilities("mx", margin-left, margin-right);
@include generate-spacing-axis-utilities("my", margin-top, margin-bottom);
// margin percent
@include generate-spacing-utilities-with-suffix(
"m",
margin,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-utilities-with-suffix(
"mt",
margin-top,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-utilities-with-suffix(
"mr",
margin-right,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-utilities-with-suffix(
"mb",
margin-bottom,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-utilities-with-suffix(
"ml",
margin-left,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-axis-utilities-with-suffix(
"mx",
margin-left,
margin-right,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-axis-utilities-with-suffix(
"my",
margin-top,
margin-bottom,
"ra",
"%",
$spacing-percent-max
);
// margin em
@include generate-spacing-utilities-with-suffix(
"m",
margin,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-utilities-with-suffix(
"mt",
margin-top,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-utilities-with-suffix(
"mr",
margin-right,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-utilities-with-suffix(
"mb",
margin-bottom,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-utilities-with-suffix(
"ml",
margin-left,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-axis-utilities-with-suffix(
"mx",
margin-left,
margin-right,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-axis-utilities-with-suffix(
"my",
margin-top,
margin-bottom,
"em",
"em",
$spacing-em-max
);
// margin rem
@include generate-spacing-utilities-with-suffix(
"m",
margin,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"mt",
margin-top,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"mr",
margin-right,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"mb",
margin-bottom,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"ml",
margin-left,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-axis-utilities-with-suffix(
"mx",
margin-left,
margin-right,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-axis-utilities-with-suffix(
"my",
margin-top,
margin-bottom,
"rem",
"rem",
$spacing-rem-max
);
// padding
@include generate-spacing-utilities("p", padding);
@include generate-spacing-utilities("pt", padding-top);
@include generate-spacing-utilities("pr", padding-right);
@include generate-spacing-utilities("pb", padding-bottom);
@include generate-spacing-utilities("pl", padding-left);
@include generate-spacing-axis-utilities("px", padding-left, padding-right);
@include generate-spacing-axis-utilities("py", padding-top, padding-bottom);
// padding percent
@include generate-spacing-utilities-with-suffix(
"p",
padding,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-utilities-with-suffix(
"pt",
padding-top,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-utilities-with-suffix(
"pr",
padding-right,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-utilities-with-suffix(
"pb",
padding-bottom,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-utilities-with-suffix(
"pl",
padding-left,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-axis-utilities-with-suffix(
"px",
padding-left,
padding-right,
"ra",
"%",
$spacing-percent-max
);
@include generate-spacing-axis-utilities-with-suffix(
"py",
padding-top,
padding-bottom,
"ra",
"%",
$spacing-percent-max
);
// padding em
@include generate-spacing-utilities-with-suffix(
"p",
padding,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-utilities-with-suffix(
"pt",
padding-top,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-utilities-with-suffix(
"pr",
padding-right,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-utilities-with-suffix(
"pb",
padding-bottom,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-utilities-with-suffix(
"pl",
padding-left,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-axis-utilities-with-suffix(
"px",
padding-left,
padding-right,
"em",
"em",
$spacing-em-max
);
@include generate-spacing-axis-utilities-with-suffix(
"py",
padding-top,
padding-bottom,
"em",
"em",
$spacing-em-max
);
// padding rem
@include generate-spacing-utilities-with-suffix(
"p",
padding,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"pt",
padding-top,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"pr",
padding-right,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"pb",
padding-bottom,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"pl",
padding-left,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-axis-utilities-with-suffix(
"px",
padding-left,
padding-right,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-axis-utilities-with-suffix(
"py",
padding-top,
padding-bottom,
"rem",
"rem",
$spacing-rem-max
);
// gap
@include generate-spacing-utilities("gap", gap);
@include generate-spacing-utilities("row-gap", row-gap);
@include generate-spacing-utilities("col-gap", column-gap);
// width / height
@include generate-spacing-utilities("w", width);
@include generate-spacing-utilities("h", height);
// width / height percent
@include generate-spacing-utilities-with-suffix("w", width, "ra", "%");
@include generate-spacing-utilities-with-suffix("h", height, "ra", "%");
// width / height em
@include generate-spacing-utilities-with-suffix("w", width, "em", "em");
@include generate-spacing-utilities-with-suffix("h", height, "em", "em");
// width / height rem
@include generate-spacing-utilities-with-suffix(
"w",
width,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"h",
height,
"rem",
"rem",
$spacing-rem-max
);
// font-size
@include generate-spacing-utilities("fs", font-size);
// font-size percent
@include generate-spacing-utilities-with-suffix("fs", font-size, "ra", "%");
// font-size em
@include generate-spacing-utilities-with-suffix("fs", font-size, "em", "em");
// font-size rem
@include generate-spacing-utilities-with-suffix(
"fs",
font-size,
"rem",
"rem",
$spacing-rem-max
);
// position
@include generate-spacing-utilities("l", left);
@include generate-spacing-utilities("r", right);
@include generate-spacing-utilities("t", top);
@include generate-spacing-utilities("b", bottom);
@include generate-spacing-utilities-with-suffix("l", left, "ra", "%");
@include generate-spacing-utilities-with-suffix("r", right, "ra", "%");
@include generate-spacing-utilities-with-suffix("t", top, "ra", "%");
@include generate-spacing-utilities-with-suffix("b", bottom, "ra", "%");
@include generate-spacing-utilities-with-suffix("l", left, "em", "em");
@include generate-spacing-utilities-with-suffix("r", right, "em", "em");
@include generate-spacing-utilities-with-suffix("t", top, "em", "em");
@include generate-spacing-utilities-with-suffix("b", bottom, "em", "em");
@include generate-spacing-utilities-with-suffix(
"l",
left,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"r",
right,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"t",
top,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"b",
bottom,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-axis-utilities("inset-x", left, right);
@include generate-spacing-axis-utilities("inset-y", top, bottom);
@include generate-spacing-utilities("inset", inset);
@include generate-spacing-axis-utilities-with-suffix(
"inset-x",
left,
right,
"ra",
"%"
);
@include generate-spacing-axis-utilities-with-suffix(
"inset-y",
top,
bottom,
"ra",
"%"
);
@include generate-spacing-utilities-with-suffix("inset", inset, "ra", "%");
@include generate-spacing-axis-utilities-with-suffix(
"inset-x",
left,
right,
"em",
"em"
);
@include generate-spacing-axis-utilities-with-suffix(
"inset-y",
top,
bottom,
"em",
"em"
);
@include generate-spacing-utilities-with-suffix("inset", inset, "em", "em");
@include generate-spacing-axis-utilities-with-suffix(
"inset-x",
left,
right,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-axis-utilities-with-suffix(
"inset-y",
top,
bottom,
"rem",
"rem",
$spacing-rem-max
);
@include generate-spacing-utilities-with-suffix(
"inset",
inset,
"rem",
"rem",
$spacing-rem-max
);
//
.inline-block {
display: inline-block !important;
}
.block {
display: block !important;
}
.inline {
display: inline !important;
}
.hidden {
display: none !important;
}
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
&.column {
flex-direction: column;
}
&.center {
justify-content: center;
}
&.start {
justify-content: flex-start;
}
&.end {
justify-content: flex-end;
}
&.core {
justify-content: center;
align-items: center;
}
}
img {
object-fit: contain;
object-position: center;
}
.pointer {
cursor: pointer;
}
.absolute {
position: absolute;
&.core {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&.full {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&.top-left {
top: 0;
left: 0;
}
&.top-right {
top: 0;
right: 0;
}
&.bottom-left {
bottom: 0;
left: 0;
}
&.bottom-right {
bottom: 0;
right: 0;
}
}
.fw-100,
.font-thin {
font-weight: 100;
} /* 细体 */
.fw-200,
.font-extralight {
font-weight: 200;
} /* 特细 */
.fw-300,
.font-light {
font-weight: 300;
} /* 轻细 */
.fw-400,
.font-normal {
font-weight: 400;
} /* 常规(默认)*/
.fw-500,
.font-medium {
font-weight: 500;
} /* 中等 */
.fw-600,
.font-semibold {
font-weight: 600;
} /* 半粗(你提到的 600*/
.fw-700,
.font-bold {
font-weight: 700;
} /* 粗体 */
.fw-800,
.font-extrabold {
font-weight: 800;
} /* 特粗 */
.fw-900,
.font-black {
font-weight: 900;
} /* 极粗 */
.bg-brand {
background-color: var(--brand-color) !important;
}
.color-brand {
color: var(--brand-color) !important;
}
.corlor-place {
color: var(--text-color-placeholder) !important;
}
.bg-brand-hover {
background-color: var(--brand-color-hover) !important;
}
body {
color: #fff;
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.el-dropdown,
.el-dropdown {
&:focus,
&:focus-visible {
outline: none !important;
}
*:focus,
*:focus-visible {
outline: none !important;
}
}

@ -0,0 +1,4 @@
@use './theme/dark.scss';
@use './theme/green.scss';
@use './theme/blue.scss';
@use './theme/purple.scss';

@ -0,0 +1,176 @@
html,
body {
height: 100%;
/* 文字风格 Sans-serif 各笔画粗细相同Serif 笔画粗细不同monospace 等宽体cursive草书fantasy梦幻 */
font-family: 'Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif';
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-size: 14px;
color: #333;
}
/* 重置各标签的默认样式 */
a,
body,
center,
cite,
code,
dd,
del,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hr,
html,
img,
input,
label,
legend,
li,
mark,
ol,
p,
section,
span,
textarea,
time,
td,
th,
ul {
margin: 0;
/* border: 0; */
padding: 0;
font-style: normal;
box-sizing: border-box;
/* 自动换行 */
word-wrap: break-word;
/* 强制英文单词断行 */
word-break: break-all;
}
/* 设置标签为块级分类 */
article,
aside,
details,
fieldset,
figcaption,
figure,
footer,
header,
main,
nav,
section {
display: block;
}
/* 去除input标签的默认样式 */
button,
input,
textarea {
-webkit-appearance: none;
font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial,
'黑体', '宋体', Arial;
border: 0;
margin: 0;
padding: 0;
font-size: 1em;
line-height: 1em;
outline: none;
background-color: transparent;
}
/* 禁止多文本框手动拖动大小 */
textarea {
resize: none;
-webkit-appearance: none;
}
/* 去掉按下的阴影盒子 */
input,
textarea,
a {
-webkit-tap-highlight-color: transparent;
}
/* 清除a标签下划线 */
a,
a:visited {
text-decoration: none;
}
a:focus,
a:active,
a:hover {
outline: none;
}
/* 清除列表前面的点 */
ol,
li,
ul {
list-style: none;
}
/* 清除IE下图片的边框 */
img {
border-style: none;
font-size: 0;
}
/* 解决chrome浏览器默认黄色背景问题 */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
/* 设置默认滚动条样式 */
::-webkit-input-placeholder {
color: #afbdcc;
}
:-moz-placeholder {
color: #afbdcc;
}
::-moz-placeholder {
color: #afbdcc;
}
:-ms-input-placeholder {
color: #afbdcc;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
::-webkit-scrollbar-track-piece {
background-color: #f5f5f5;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 6px;
}
::-webkit-scrollbar-corner {
background-color: #f5f5f5;
}
::-webkit-resizer {
background-repeat: no-repeat;
background-position: bottom right;
}

@ -0,0 +1,205 @@
/** blue 穹宇蓝 */
:root ,
// default-theme
.default-theme{
/* 主题色&功能色 开始 */
//
--brand-color: #1764FF;
// hover
--brand-color-hover: #3377FF;
// active
--brand-color-active: #1557DB;
// disabled
--brand-color-disabled: #B2CCFF;
// focus
--brand-color-focus: #D9E5FF;
// light使
--brand-color-light: #ECF2FF;
//
--error-color: #FF4040;
// hover
--error-color-hover: #FF7474;
// active
--error-color-active: #DB3131;
// disabled
--error-color-disabled: #FFB9B0;
// focus
--error-color-focus: #FFD8D2;
// light使
--error-color-light: #FFF0ED;
//
--warning-color: #FF9000;
// hover
--warning-color-hover: #FFA938;
// active
--warning-color-active: #EA8A0E;
// disabled
--warning-color-disabled: #FFC882;
// focus
--warning-color-focus: #FFE2C2;
// light使
--warning-color-light: #FFF4E9;
//
--success-color: #1FBB79;
// hover
--success-color-hover: #43C78F;
// active
--success-color-active: #2BA471;
// disabled
--success-color-disabled: #92DAB2;
// focus
--success-color-focus: #C6F3D7;
// light使
--success-color-light: #E3F9E9;
/* 主题色&功能色 结束 */
/* 文字&图标色彩 开始 */
//
--text-color-primary: #191919;
//
--text-color-secondary: #666666;
//
--text-color-placeholder: #999999;
// disabled
--text-color-disabled: #BDBDBD;
//
--text-color-anti: #FFFFFF;
//
--text-color-anti-opacity: rgba(255, 255, 255, 0.24);
//
--text-color-brand: var(--brand-color);
//
--text-color-link: var(--brand-color);
/* 文字&图标色彩 结束 */
/* 中性色彩交互token 开始 */
// hover hover
--bg-color-container-hover: #F5F7FA;
// click click
--bg-color-container-active: #EBEEF5;
// hover
--bg-color-secondarycontainer-hover: #F4F6FA;
// click
--bg-color-secondarycontainer-active: #E1E5ED;
// hover hover
--bg-color-component-hover: #E1E5ED;
//active active
--bg-color-component-active: #B8BECA;
// disabled disabled
--bg-color-component-disabled: #F4F6FA;
/* 中性色彩交互token 结束 */
/* 中性色彩 开始 */
//
--bg-color-page: #F4F6FA;
//
--bg-color-container:#FFFFFF;
//
--bg-color-secondarycontainer: #F5F7FA;
//
--bg-color-component: #EBEEF5;
// 线
--component-stroke: #EBEEF5;
//
--component-border: #E1E5ED;
/* 中性色彩 结束 */
// Element Plus 使
--el-color-primary: var(--brand-color);
--el-color-primary-light-3: var(--brand-color-hover);
--el-color-primary-light-5: var(--brand-color-active);
--el-color-primary-light-7: var(--brand-color-disabled);
--el-color-primary-light-8: var(--brand-color-focus);
--el-color-primary-light-9: var(--brand-color-light);
--el-color-primary-dark-2: var(--brand-color-hover);
--el-color-success: var(--success-color);
--el-color-success-light-3: var(--success-color-hover);
--el-color-success-light-5: var(--success-color-active);
--el-color-success-light-7: var(--success-color-disabled);
--el-color-success-light-8: var(--success-color-focus);
--el-color-success-light-9: var(--success-color-light);
--el-color-success-dark-2: var(--success-color-hover);
--el-color-warning: var(--warning-color);
--el-color-warning-light-3: var(--warning-color-hover);
--el-color-warning-light-5: var(--warning-color-active);
--el-color-warning-light-7: var(--warning-color-disabled);
--el-color-warning-light-8: var(--warning-color-focus);
--el-color-warning-light-9: var(--warning-color-light);
--el-color-warning-dark-2: var(--warning-color-hover);
--el-color-danger: var(--error-color);
--el-color-danger-light-3: var(--error-color-hover);
--el-color-danger-light-5: var(--error-color-active);
--el-color-danger-light-7: var(--error-color-disabled);
--el-color-danger-light-8: var(--error-color-focus);
--el-color-danger-light-9: var(--error-color-light);
--el-color-danger-dark-2: var(--error-color-hover);
--el-color-error: var(--error-color);
--el-color-error-light-3: var(--error-color-hover);
--el-color-error-light-5: var(--error-color-active);
--el-color-error-light-7: var(--error-color-disabled);
--el-color-error-light-8: var(--error-color-focus);
--el-color-error-light-9: var(--error-color-light);
--el-color-error-dark-2: var(--error-color-hover);
--el-color-info: var(--text-color-secondary);
--el-color-info-light-3: var(--text-color-secondary);
--el-color-info-light-5: var(--text-color-placeholder);
--el-color-info-light-7: var(--text-color-disabled);
--el-color-info-light-8: var(--text-color-disabled);
--el-color-info-light-9: var(--text-color-disabled);
--el-color-info-dark-2: var(--text-color-secondary);
// --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
// --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
// --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
// --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
--el-bg-color-page: var(--bg-color-page);
--el-bg-color: var(--bg-color-container);
--el-bg-color-overlay: var(--bg-color-secondarycontainer);
--el-text-color-primary: var(--text-color-primary);
--el-text-color-regular: var(--text-color-primary);
--el-text-color-secondary: var(--text-color-secondary);
--el-text-color-placeholder: var(--text-color-placeholder);
--el-text-color-disabled: var(--text-color-disabled);
--el-border-color-darker: var(--component-border);
--el-border-color-dark: var(--component-border);
--el-border-color: var(--component-stroke);
--el-border-color-light: var(--component-stroke);
--el-border-color-lighter: var(--component-stroke);
--el-border-color-extra-light: var(--component-stroke);
--el-fill-color-darker: var(--bg-color-container-active);
--el-fill-color-dark: var(--bg-color-secondarycontainer);
--el-fill-color: var(--bg-color-component);
--el-fill-color-light: var(--bg-color-component-hover);
--el-fill-color-lighter: var(--bg-color-container-hover);
--el-fill-color-extra-light: var(--bg-color-page);
--el-fill-color-blank: transparent;
// --el-mask-color: rgba(0, 0, 0, 0.8);
// --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
--el-menu-base-level-padding:8px;
--el-menu-level-padding:25px;
--el-menu-level:0;
--el-menu-item-height:40px;
--el-menu-hover-bg-color:var(--brand-color-light);
--el-text-color-secondary:var(--brand-color);
--el-menu-text-color:var(--text-color-secondary);
--el-menu-active-color:var(--brand-color);
--el-menu-active-background:var(--brand-color-light);
--el-font-size-base: 0.875rem
}

@ -0,0 +1,201 @@
/* 耀石黑 dark*/
html.dark {
/* 主题色&功能色 开始 */
//
--brand-color: #1764ff;
// hover
--brand-color-hover: #2b7aff;
// active
--brand-color-active: #1557db;
// disabled
--brand-color-disabled: #b2ccff;
// focus
--brand-color-focus: #d9e5ff;
// light使
--brand-color-light: #24365c;
//
--error-color: #ff4040;
// hover
--error-color-hover: #ff7474;
// active
--error-color-active: #db3131;
// disabled
--error-color-disabled: #ffb9b0;
// focus
--error-color-focus: #ffd8d2;
// light使
--error-color-light: #fff0ed;
//
--warning-color: #ff9000;
// hover
--warning-color-hover: #ffa938;
// active
--warning-color-active: #ea8a0e;
// disabled
--warning-color-disabled: #ffc882;
// focus
--warning-color-focus: #ffe2c2;
// light使
--warning-color-light: #fff4e9;
//
--success-color: #1fbb79;
// hover
--success-color-hover: #43c78f;
// active
--success-color-active: #2ba471;
// disabled
--success-color-disabled: #92dab2;
// focus
--success-color-focus: #c6f3d7;
// light使
--success-color-light: #e3f9e9;
/* 主题色&功能色 结束 */
/* 文字&图标色彩 开始 */
--text-color-primary: #e6e6e6;
--text-color-secondary: #b3b3b3;
--text-color-placeholder: #808080;
--text-color-disabled: #808080;
--text-color-anti: #ffffff;
--text-color-anti-opacity: rgba(255, 255, 255, 0.24);
//
--text-color-brand: var(--brand-color);
//
--text-color-link: var(--brand-color);
/* 文字&图标色彩 结束 */
/* 中性色彩交互token 开始 */
--bg-color-container-hover: #333333;
--bg-color-container-active: #404040;
--bg-color-secondarycontainer-hover: #404040;
--bg-color-secondarycontainer-active: #4d4d4d;
--bg-color-component-hover: #404040;
--bg-color-component-active: #4d4d4d;
--bg-color-component-disabled: #1a1a1a;
/* 中性色彩交互token 结束 */
/* 中性色彩 开始 */
--bg-color-page: #181818;
--bg-color-container: #262626;
--bg-color-secondarycontainer: #333333;
--bg-color-component: #333333;
--component-stroke: #3c3c3c;
--component-border: #262626;
/* 中性色彩 结束 */
// Element Plus 使
--el-color-primary: var(--brand-color);
--el-color-primary-light-3: var(--brand-color-hover);
--el-color-primary-light-5: var(--brand-color-active);
--el-color-primary-light-7: var(--brand-color-disabled);
--el-color-primary-light-8: var(--brand-color-focus);
--el-color-primary-light-9: var(--brand-color-light);
--el-color-primary-dark-2: var(--brand-color-hover);
--el-color-success: var(--success-color);
--el-color-success-light-3: var(--success-color-hover);
--el-color-success-light-5: var(--success-color-active);
--el-color-success-light-7: var(--success-color-disabled);
--el-color-success-light-8: var(--success-color-focus);
--el-color-success-light-9: var(--success-color-light);
--el-color-success-dark-2: var(--success-color-hover);
--el-color-warning: var(--warning-color);
--el-color-warning-light-3: var(--warning-color-hover);
--el-color-warning-light-5: var(--warning-color-active);
--el-color-warning-light-7: var(--warning-color-disabled);
--el-color-warning-light-8: var(--warning-color-focus);
--el-color-warning-light-9: var(--warning-color-light);
--el-color-warning-dark-2: var(--warning-color-hover);
--el-color-danger: var(--error-color);
--el-color-danger-light-3: var(--error-color-hover);
--el-color-danger-light-5: var(--error-color-active);
--el-color-danger-light-7: var(--error-color-disabled);
--el-color-danger-light-8: var(--error-color-focus);
--el-color-danger-light-9: var(--error-color-light);
--el-color-danger-dark-2: var(--error-color-hover);
--el-color-error: var(--error-color);
--el-color-error-light-3: var(--error-color-hover);
--el-color-error-light-5: var(--error-color-active);
--el-color-error-light-7: var(--error-color-disabled);
--el-color-error-light-8: var(--error-color-focus);
--el-color-error-light-9: var(--error-color-light);
--el-color-error-dark-2: var(--error-color-hover);
--el-color-info: var(--text-color-secondary);
--el-color-info-light-3: var(--text-color-secondary);
--el-color-info-light-5: var(--text-color-placeholder);
--el-color-info-light-7: var(--text-color-disabled);
--el-color-info-light-8: var(--text-color-disabled);
--el-color-info-light-9: var(--text-color-disabled);
--el-color-info-dark-2: var(--text-color-secondary);
// --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
// --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
// --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
// --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
--el-bg-color-page: var(--bg-color-page);
--el-bg-color: var(--bg-color-container);
--el-bg-color-overlay: var(--bg-color-secondarycontainer);
--el-text-color-primary: var(--text-color-primary);
--el-text-color-regular: var(--text-color-primary);
--el-text-color-secondary: var(--text-color-secondary);
--el-text-color-placeholder: var(--text-color-placeholder);
--el-text-color-disabled: var(--text-color-disabled);
--el-border-color-darker: var(--component-border);
--el-border-color-dark: var(--component-border);
--el-border-color: var(--component-stroke);
--el-border-color-light: var(--component-stroke);
--el-border-color-lighter: var(--component-stroke);
--el-border-color-extra-light: var(--component-stroke);
--el-fill-color-darker: var(--bg-color-container-active);
--el-fill-color-dark: var(--bg-color-secondarycontainer);
--el-fill-color: var(--bg-color-component);
--el-fill-color-light: var(--bg-color-component-hover);
--el-fill-color-lighter: var(--bg-color-container-hover);
--el-fill-color-extra-light: var(--bg-color-page);
--el-fill-color-blank: transparent;
--el-mask-color: rgba(0, 0, 0, 0.8);
--el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
--el-menu-base-level-padding: 8px;
--el-menu-level-padding: 25px;
--el-menu-level: 0;
--el-menu-item-height: 40px;
--el-menu-hover-bg-color: var(--brand-color-hover);
--el-text-color-secondary: var(--text-color-anti);
--el-menu-text-color: var(--text-color-secondary);
--el-menu-active-color: var(--text-color-anti);
--el-menu-active-background: var(--brand-color);
}
html.dark .el-button {
--el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
}
html.dark .el-card {
--el-card-bg-color: var(--el-bg-color-overlay);
}
html.dark .el-empty {
--el-empty-fill-color-0: var(--el-color-black);
--el-empty-fill-color-1: #4b4b52;
--el-empty-fill-color-2: #36383d;
--el-empty-fill-color-3: #1e1e20;
--el-empty-fill-color-4: #262629;
--el-empty-fill-color-5: #202124;
--el-empty-fill-color-6: #212224;
--el-empty-fill-color-7: #1b1c1f;
--el-empty-fill-color-8: #1c1d1f;
--el-empty-fill-color-9: #18181a;
}

@ -0,0 +1,202 @@
/** 青峦绿 green */
html.green {
/* 主题色&功能色 开始 */
//
--brand-color: #29A181;
// hover
--brand-color-hover: #34B693;
// active
--brand-color-active: #228F72;
// disabled
--brand-color-disabled: rgba(41,161,129,0.4);
// focus
--brand-color-focus: rgba(41,161,129,0.2);
// light使
--brand-color-light: rgba(41,161,129,0.2);
//
--error-color: #FF4040;
// hover
--error-color-hover: #FF7474;
// active
--error-color-active: #DB3131;
// disabled
--error-color-disabled: #FFB9B0;
// focus
--error-color-focus: #FFD8D2;
// light使
--error-color-light: #FFF0ED;
//
--warning-color: #FF9000;
// hover
--warning-color-hover: #FFA938;
// active
--warning-color-active: #EA8A0E;
// disabled
--warning-color-disabled: #FFC882;
// focus
--warning-color-focus: #FFE2C2;
// light使
--warning-color-light: #FFF4E9;
//
--success-color: #1FBB79;
// hover
--success-color-hover: #43C78F;
// active
--success-color-active: #2BA471;
// disabled
--success-color-disabled: #92DAB2;
// focus
--success-color-focus: #C6F3D7;
// light使
--success-color-light: #E3F9E9;
/* 主题色&功能色 结束 */
/* 文字&图标色彩 开始 */
//
--text-color-primary: #191919;
//
--text-color-secondary: #666666;
//
--text-color-placeholder: #999999;
// disabled
--text-color-disabled: #BDBDBD;
//
--text-color-anti: #FFFFFF;
//
--text-color-anti-opacity: rgba(255, 255, 255, 0.24);
//
--text-color-brand: var(--brand-color);
//
--text-color-link: var(--brand-color);
/* 文字&图标色彩 结束 */
/* 中性色彩交互token 开始 */
// hover hover
--bg-color-container-hover: #F5F7FA;
// click click
--bg-color-container-active: #EBEEF5;
// hover
--bg-color-secondarycontainer-hover: #F4F6FA;
// click
--bg-color-secondarycontainer-active: #E1E5ED;
// hover hover
--bg-color-component-hover: #E1E5ED;
//active active
--bg-color-component-active: #B8BECA;
// disabled disabled
--bg-color-component-disabled: #F4F6FA;
/* 中性色彩交互token 结束 */
/* 中性色彩 开始 */
//
--bg-color-page: #F4F6FA;
//
--bg-color-container:#FFFFFF;
//
--bg-color-secondarycontainer: #F5F7FA;
//
--bg-color-component: #EBEEF5;
// 线
--component-stroke: #EBEEF5;
//
--component-border: #E1E5ED;
/* 中性色彩 结束 */
// Element Plus 使
--el-color-primary: var(--brand-color);
--el-color-primary-light-3: var(--brand-color-hover);
--el-color-primary-light-5: var(--brand-color-active);
--el-color-primary-light-7: var(--brand-color-disabled);
--el-color-primary-light-8: var(--brand-color-focus);
--el-color-primary-light-9: var(--brand-color-light);
--el-color-primary-dark-2: var(--brand-color-hover);
--el-color-success: var(--success-color);
--el-color-success-light-3: var(--success-color-hover);
--el-color-success-light-5: var(--success-color-active);
--el-color-success-light-7: var(--success-color-disabled);
--el-color-success-light-8: var(--success-color-focus);
--el-color-success-light-9: var(--success-color-light);
--el-color-success-dark-2: var(--success-color-hover);
--el-color-warning: var(--warning-color);
--el-color-warning-light-3: var(--warning-color-hover);
--el-color-warning-light-5: var(--warning-color-active);
--el-color-warning-light-7: var(--warning-color-disabled);
--el-color-warning-light-8: var(--warning-color-focus);
--el-color-warning-light-9: var(--warning-color-light);
--el-color-warning-dark-2: var(--warning-color-hover);
--el-color-danger: var(--error-color);
--el-color-danger-light-3: var(--error-color-hover);
--el-color-danger-light-5: var(--error-color-active);
--el-color-danger-light-7: var(--error-color-disabled);
--el-color-danger-light-8: var(--error-color-focus);
--el-color-danger-light-9: var(--error-color-light);
--el-color-danger-dark-2: var(--error-color-hover);
--el-color-error: var(--error-color);
--el-color-error-light-3: var(--error-color-hover);
--el-color-error-light-5: var(--error-color-active);
--el-color-error-light-7: var(--error-color-disabled);
--el-color-error-light-8: var(--error-color-focus);
--el-color-error-light-9: var(--error-color-light);
--el-color-error-dark-2: var(--error-color-hover);
--el-color-info: var(--text-color-secondary);
--el-color-info-light-3: var(--text-color-secondary);
--el-color-info-light-5: var(--text-color-placeholder);
--el-color-info-light-7: var(--text-color-disabled);
--el-color-info-light-8: var(--text-color-disabled);
--el-color-info-light-9: var(--text-color-disabled);
--el-color-info-dark-2: var(--text-color-secondary);
// --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
// --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
// --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
// --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
--el-bg-color-page: var(--bg-color-page);
--el-bg-color: var(--bg-color-container);
--el-bg-color-overlay: var(--bg-color-secondarycontainer);
--el-text-color-primary: var(--text-color-primary);
--el-text-color-regular: var(--text-color-primary);
--el-text-color-secondary: var(--text-color-secondary);
--el-text-color-placeholder: var(--text-color-placeholder);
--el-text-color-disabled: var(--text-color-disabled);
--el-border-color-darker: var(--component-border);
--el-border-color-dark: var(--component-border);
--el-border-color: var(--component-stroke);
--el-border-color-light: var(--component-stroke);
--el-border-color-lighter: var(--component-stroke);
--el-border-color-extra-light: var(--component-stroke);
--el-fill-color-darker: var(--bg-color-container-active);
--el-fill-color-dark: var(--bg-color-secondarycontainer);
--el-fill-color: var(--bg-color-component);
--el-fill-color-light: var(--bg-color-component-hover);
--el-fill-color-lighter: var(--bg-color-container-hover);
--el-fill-color-extra-light: var(--bg-color-page);
--el-fill-color-blank: transparent;
// --el-mask-color: rgba(0, 0, 0, 0.8);
// --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
--el-menu-base-level-padding:8px;
--el-menu-level-padding:25px;
--el-menu-level:0;
--el-menu-item-height:40px;
--el-menu-hover-bg-color:var(--brand-color-light);
--el-text-color-secondary:var(--brand-color);
--el-menu-text-color:var(--text-color-secondary);
--el-menu-active-color:var(--brand-color);
--el-menu-active-background:var(--brand-color-light);
}

@ -0,0 +1,203 @@
/** purple 星轨紫 */
html.purple {
/* 主题色&功能色 开始 */
//
--brand-color: #8649FB;
// hover
--brand-color-hover: #A06CFC;
// active
--brand-color-active: #6B2EDB;
// disabled
--brand-color-disabled: #D6C6F7;
// focus
--brand-color-focus: #E6DEFA;
// light使
--brand-color-light: #F3F0FE;
//
--error-color: #FF4040;
// hover
--error-color-hover: #FF7474;
// active
--error-color-active: #DB3131;
// disabled
--error-color-disabled: #FFB9B0;
// focus
--error-color-focus: #FFD8D2;
// light使
--error-color-light: #FFF0ED;
//
--warning-color: #FF9000;
// hover
--warning-color-hover: #FFA938;
// active
--warning-color-active: #EA8A0E;
// disabled
--warning-color-disabled: #FFC882;
// focus
--warning-color-focus: #FFE2C2;
// light使
--warning-color-light: #FFF4E9;
//
--success-color: #1FBB79;
// hover
--success-color-hover: #43C78F;
// active
--success-color-active: #2BA471;
// disabled
--success-color-disabled: #92DAB2;
// focus
--success-color-focus: #C6F3D7;
// light使
--success-color-light: #E3F9E9;
/* 主题色&功能色 结束 */
/* 文字&图标色彩 开始 */
//
--text-color-primary: #191919;
//
--text-color-secondary: #666666;
//
--text-color-placeholder: #999999;
// disabled
--text-color-disabled: #BDBDBD;
//
--text-color-anti: #FFFFFF;
//
--text-color-anti-opacity: rgba(255, 255, 255, 0.24);
//
--text-color-brand: var(--brand-color);
//
--text-color-link: var(--brand-color);
/* 文字&图标色彩 结束 */
/* 中性色彩交互token 开始 */
// hover hover
--bg-color-container-hover: #F5F7FA;
// click click
--bg-color-container-active: #EBEEF5;
// hover
--bg-color-secondarycontainer-hover: #F4F6FA;
// click
--bg-color-secondarycontainer-active: #E1E5ED;
// hover hover
--bg-color-component-hover: #E1E5ED;
//active active
--bg-color-component-active: #B8BECA;
// disabled disabled
--bg-color-component-disabled: #F4F6FA;
/* 中性色彩交互token 结束 */
/* 中性色彩 开始 */
//
--bg-color-page: #F4F6FA;
//
--bg-color-container:#FFFFFF;
//
--bg-color-secondarycontainer: #F5F7FA;
//
--bg-color-component: #EBEEF5;
// 线
--component-stroke: #EBEEF5;
//
--component-border: #E1E5ED;
/* 中性色彩 结束 */
// Element Plus 使
--el-color-primary: var(--brand-color);
--el-color-primary-light-3: var(--brand-color-hover);
--el-color-primary-light-5: var(--brand-color-active);
--el-color-primary-light-7: var(--brand-color-disabled);
--el-color-primary-light-8: var(--brand-color-focus);
--el-color-primary-light-9: var(--brand-color-light);
--el-color-primary-dark-2: var(--brand-color-hover);
--el-color-success: var(--success-color);
--el-color-success-light-3: var(--success-color-hover);
--el-color-success-light-5: var(--success-color-active);
--el-color-success-light-7: var(--success-color-disabled);
--el-color-success-light-8: var(--success-color-focus);
--el-color-success-light-9: var(--success-color-light);
--el-color-success-dark-2: var(--success-color-hover);
--el-color-warning: var(--warning-color);
--el-color-warning-light-3: var(--warning-color-hover);
--el-color-warning-light-5: var(--warning-color-active);
--el-color-warning-light-7: var(--warning-color-disabled);
--el-color-warning-light-8: var(--warning-color-focus);
--el-color-warning-light-9: var(--warning-color-light);
--el-color-warning-dark-2: var(--warning-color-hover);
--el-color-danger: var(--error-color);
--el-color-danger-light-3: var(--error-color-hover);
--el-color-danger-light-5: var(--error-color-active);
--el-color-danger-light-7: var(--error-color-disabled);
--el-color-danger-light-8: var(--error-color-focus);
--el-color-danger-light-9: var(--error-color-light);
--el-color-danger-dark-2: var(--error-color-hover);
--el-color-error: var(--error-color);
--el-color-error-light-3: var(--error-color-hover);
--el-color-error-light-5: var(--error-color-active);
--el-color-error-light-7: var(--error-color-disabled);
--el-color-error-light-8: var(--error-color-focus);
--el-color-error-light-9: var(--error-color-light);
--el-color-error-dark-2: var(--error-color-hover);
--el-color-info: var(--text-color-secondary);
--el-color-info-light-3: var(--text-color-secondary);
--el-color-info-light-5: var(--text-color-placeholder);
--el-color-info-light-7: var(--text-color-disabled);
--el-color-info-light-8: var(--text-color-disabled);
--el-color-info-light-9: var(--text-color-disabled);
--el-color-info-dark-2: var(--text-color-secondary);
// --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
// --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
// --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
// --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
--el-bg-color-page: var(--bg-color-page);
--el-bg-color: var(--bg-color-container);
--el-bg-color-overlay: var(--bg-color-secondarycontainer);
--el-text-color-primary: var(--text-color-primary);
--el-text-color-regular: var(--text-color-primary);
--el-text-color-secondary: var(--text-color-secondary);
--el-text-color-placeholder: var(--text-color-placeholder);
--el-text-color-disabled: var(--text-color-disabled);
--el-border-color-darker: var(--component-border);
--el-border-color-dark: var(--component-border);
--el-border-color: var(--component-stroke);
--el-border-color-light: var(--component-stroke);
--el-border-color-lighter: var(--component-stroke);
--el-border-color-extra-light: var(--component-stroke);
--el-fill-color-darker: var(--bg-color-container-active);
--el-fill-color-dark: var(--bg-color-secondarycontainer);
--el-fill-color: var(--bg-color-component);
--el-fill-color-light: var(--bg-color-component-hover);
--el-fill-color-lighter: var(--bg-color-container-hover);
--el-fill-color-extra-light: var(--bg-color-page);
--el-fill-color-blank: transparent;
// --el-mask-color: rgba(0, 0, 0, 0.8);
// --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
--el-menu-base-level-padding:8px;
--el-menu-level-padding:25px;
--el-menu-level:0;
--el-menu-item-height:40px;
--el-menu-hover-bg-color:var(--brand-color-light);
--el-text-color-secondary:var(--brand-color);
--el-menu-text-color:var(--text-color-secondary);
--el-menu-active-color:var(--brand-color);
--el-menu-active-background:var(--brand-color-light);
}

@ -0,0 +1,42 @@
<template>
<SvgIcon
:title="isFullscreen ? '退出全屏' : '全屏显示'"
:name="isFullscreen ? 'minify' : 'magnify'"
:size="18"
color="#fff"
style="cursor:pointer"
@click="toggleFullscreen"
/>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
const isFullscreen = ref(false)
const updateFullscreenState = () => {
isFullscreen.value = !!document.fullscreenElement
}
const toggleFullscreen = async () => {
try {
if (!document.fullscreenElement) {
await document.documentElement.requestFullscreen()
} else {
await document.exitFullscreen()
}
} catch (error) {
console.error('切换全屏失败:', error)
}
}
onMounted(() => {
updateFullscreenState()
document.addEventListener('fullscreenchange', updateFullscreenState)
})
onBeforeUnmount(() => {
document.removeEventListener('fullscreenchange', updateFullscreenState)
})
</script>

@ -0,0 +1,87 @@
<template>
<svg
:class="['svg-icon', $attrs.class]"
:style="svgStyle"
aria-hidden="true"
v-bind="$attrs"
>
<use :href="symbolId" />
</svg>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
/**
* 图标名称对应 src/assets/image 下的 SVG 文件路径相对
* 规则icon-[子目录]-[文件名] icon-[文件名]根目录下
* 示例
* magnify.svg name="magnify"
* shop/handle.svg name="shop-handle"
*/
name: {
type: String,
required: true,
},
color: {
type: String,
default: '',
},
strokeBold: {
type: Boolean,
default: false,
},
size: {
type: [String, Number],
default: '',
},
})
const symbolId = computed(() => {
// id
if (props.name.startsWith('icon-')) return `#${props.name}`
return `#icon-${props.name}`
})
const svgStyle = computed(() => {
const style = {}
if (props.color) style.color = props.color
if (props.size) {
if (typeof props.size === 'number') {
const s = `${props.size}px`
style.fontSize = s
style.width = s
style.height = s
} else if (typeof props.size === 'string') {
const parts = props.size.trim().split(/\s+/)
if (parts.length === 2) {
// 'width height'
style.width = parts[0]
style.height = parts[1]
} else {
// '24px' '1.5em'
style.fontSize = props.size
style.width = props.size
style.height = props.size
}
}
}
// stroke currentColor
if (props.strokeBold) style.stroke = 'currentColor'
return style
})
</script>
<style scoped>
.svg-icon {
/* 默认继承父级字体大小 */
width: 1em;
height: 1em;
/* 颜色通过 currentColor 继承,配合 fill=currentColor 的 SVG */
fill: currentColor;
vertical-align: -0.15em;
overflow: hidden;
display: inline-block;
}
</style>

@ -0,0 +1,97 @@
<template>
<el-dialog
title="设置字体大小"
v-model="visible"
width="30%"
@close="handleCancel"
>
<div class="font-size-control">
<div class="slider-label">字体缩放{{ tempScale.toFixed(2) }}</div>
<el-slider
v-model="tempScale"
:show-tooltip="false"
show-stops
:min="0.5"
:max="1.5"
:step="0.05"
:marks="marks"
@input="handlePreview"
/>
<div class="preview" :style="{ fontSize: previewSize + 'px' }">
这里是预览文字 (This is preview text)
</div>
</div>
<template #footer>
<el-button @click="handleCancel"></el-button>
<el-button type="primary" @click="handleConfirm"></el-button>
</template>
</el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useFontSizeStore } from '@/stores/fontSize'
const visible = ref(false)
const tempScale = ref(1.0) // 1.0
const previewSize = ref(16)
const fontSizeStore = useFontSizeStore()
//
const marks = {
0.5: '小',
1.0: '默认',
1.5: '大'
}
//
const open = () => {
tempScale.value = fontSizeStore.scale || 1.0
visible.value = true
}
//
const handlePreview = (val) => {
previewSize.value = 16 * val
}
//
const handleConfirm = () => {
fontSizeStore.updateScale(tempScale.value)
visible.value = false
}
//
const handleCancel = () => {
tempScale.value = fontSizeStore.scale
visible.value = false
}
// tempScale
watch(tempScale, (newVal) => {
previewSize.value = 16 * newVal
}, { immediate: true })
// open
defineExpose({ open })
</script>
<style scoped>
.font-size-control {
padding: 1rem;
}
.slider-label {
margin-bottom: 10px;
font-weight: 500;
}
.preview {
margin-top: 1rem;
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
</style>

@ -0,0 +1,28 @@
<template>
<el-select v-model="currentLang" @change="changeLang" style="width: 120px">
<el-option v-for="(item,index) in langData" :value="item.value" :label="item.label" :key="index"></el-option>
</el-select>
</template>
<script setup>
import {ref, reactive} from 'vue'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const langData = reactive([
{value:'zhCN',label:'中文(简体)'},
{value:'zhTW',label:'中文(繁體)'},
{value:'enUS',label:'English'},
])
const currentLang = ref(localStorage.getItem('lang') || 'zhCN')
const changeLang = (lang) => {
currentLang.value = lang
locale.value = lang
}
</script>
<style scoped>
</style>

@ -0,0 +1,48 @@
<template>
<el-select class="language-switch" :class="{ 'default-theme': defaultTheme }" v-model="currentLang"
size="small">
<el-option :class="{ 'default-theme': defaultTheme }" v-for="(item, index) in langData" :value="item.value"
:label="item.label" :key="index" />
</el-select>
</template>
<script setup>
import { useLanguage } from '@/composables/useLanguage'
const props = defineProps({
defaultTheme: {
type: Boolean,
default: false,
},
})
const { langOptions: langData, currentLang } = useLanguage()
</script>
<style lang="scss" scoped>
.language-switch {
--el-text-color-regular: #000;
--el-select-input-font-size: 16px;
--el-select-input-color: #303133;
flex-shrink: 0;
width: 120px;
height: 28px;
line-height: 28px;
:deep(.el-select__wrapper) {
font-size: 16px;
font-weight: 500;
.el-select__selection {
height: 28px;
line-height: 28px;
}
.el-select__selected-item {
height: 28px;
line-height: 28px;
}
}
}
</style>

@ -0,0 +1,296 @@
<template>
<div class="admin-layout">
<aside class="admin-sidebar" :class="{ collapse: collapsed }">
<div class="logo-bar">
<SvgIcon name="logo" :size="22" color="#fff" />
<span v-if="!collapsed" class="logo-text">CSM</span>
</div>
<NavBar
ref="sideBarRef"
class="side-menu"
:routes="sideRoutes"
:activeMenu="$route.path"
:isIcon="false"
:defaultOpeneds="defaultOpeneds"
/>
<div class="collapse-btn" @click="toggleSidebar">
<el-icon :size="14">
<component :is="collapsed ? Expand : Fold" />
</el-icon>
<span v-if="!collapsed"></span>
</div>
</aside>
<div class="admin-main">
<header class="admin-header">
<div class="header-title">{{ currentTitle }}</div>
<div class="header-user">
<el-dropdown trigger="hover" @command="handleCommand">
<div class="user-trigger">
<SvgIcon name="bell-filled" :size="20" />
<el-avatar :size="28"></el-avatar>
<span class="username">{{ userStore.userInfo?.name || userStore.userInfo?.userName || '管理员' }}</span>
<el-icon><ArrowDown /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="password">修改密码</el-dropdown-item>
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</header>
<main class="admin-content">
<slot />
</main>
</div>
</div>
</template>
<script setup>
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import { Fold, Expand, ArrowDown } from "@element-plus/icons-vue";
import NavBar from "@/components/navBar/NavBar.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { useUserStore } from "@/stores/api/user";
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const collapsed = ref(false);
//
const GROUP_ORDER = ["工单管理", "客户管理", "绩效管理", "系统管理"];
// icon group
const GROUP_ICON = {
工单管理: "Tickets",
客户管理: "OfficeBuilding",
绩效管理: "Trophy",
系统管理: "Setting",
};
// path path index
const buildSideRoutes = (children) => {
const visible = children.filter((c) => c.meta?.title && !c.meta?.hidden);
const groupMap = new Map();
visible.forEach((c) => {
const group = c.meta?.group;
if (!group) return; // password
if (!groupMap.has(group)) groupMap.set(group, []);
groupMap.get(group).push(c);
});
return GROUP_ORDER.filter((g) => groupMap.has(g)).map((group) => {
const items = groupMap.get(group);
return {
// index
// el-sub-menu path
path: `/admin/${items[0].path}`,
title: group,
iconName: GROUP_ICON[group] || "Document",
children: items.map((c) => ({
path: `/admin/${c.path}`,
title: c.meta.title,
iconName: c.meta?.icon || "Document",
})),
};
});
};
const sideRoutes = computed(() => {
const adminRoute = route.matched.find((r) => r.path === "/admin");
if (!adminRoute || !adminRoute.children) return [];
return buildSideRoutes(adminRoute.children);
});
//
const defaultOpeneds = computed(() => {
return sideRoutes.value
.filter((g) => g.children.some((c) => route.path === c.path || route.path.startsWith(c.path + "/")))
.map((g) => g.path);
});
const currentTitle = computed(() => {
const last = [...route.matched].reverse().find((r) => r.meta?.title);
return last?.meta?.title || "管理端";
});
const toggleSidebar = () => {
collapsed.value = !collapsed.value;
};
const handleCommand = async (cmd) => {
if (cmd === "password") {
router.push("/admin/password");
return;
}
if (cmd === "logout") {
try {
await ElMessageBox.confirm("确定要退出登录吗?", "提示", {
confirmButtonText: "退出",
cancelButtonText: "取消",
type: "warning",
});
userStore.clear();
router.push("/login");
} catch (_) {
/* canceled */
}
}
};
</script>
<style scoped lang="scss">
.admin-layout {
display: flex;
width: 100vw;
height: 100vh;
background: var(--bg-color-page);
.admin-sidebar {
flex-shrink: 0;
width: 210px;
height: 100%;
background: linear-gradient(180deg, #6c7cf3 0%, #5868e6 100%);
color: #fff;
display: flex;
flex-direction: column;
transition: width 0.2s linear;
&.collapse {
width: 64px;
}
.logo-bar {
height: 60px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
font-size: 16px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
}
.side-menu {
flex: 1;
background: transparent !important;
border-right: none;
overflow-y: auto;
padding: 8px 8px;
//
:deep(.el-sub-menu__title) {
color: rgba(255, 255, 255, 0.85) !important;
border-radius: 4px;
&:hover {
background-color: rgba(255, 255, 255, 0.12) !important;
}
}
//
:deep(.el-sub-menu.is-active > .el-sub-menu__title) {
color: #fff !important;
}
//
:deep(.el-sub-menu .el-menu) {
background: transparent !important;
padding: 0;
}
//
:deep(.el-menu-item) {
color: rgba(255, 255, 255, 0.75) !important;
border-radius: 4px;
min-width: 0;
height: 40px;
line-height: 40px;
&:hover {
background-color: rgba(255, 255, 255, 0.12) !important;
}
//
.el-sub-menu ~ & {
padding-left: 48px !important;
}
}
:deep(.el-menu-item.is-active) {
background-color: rgba(255, 255, 255, 0.22) !important;
color: #fff !important;
}
//
&.el-menu--collapse :deep(.el-sub-menu .el-menu) {
background: #5868e6 !important;
}
}
.collapse-btn {
height: 40px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 16px;
cursor: pointer;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
white-space: nowrap;
overflow: hidden;
}
}
.admin-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.admin-header {
flex-shrink: 0;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
.header-title {
font-size: 16px;
font-weight: 600;
}
.header-user {
.user-trigger {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
color: #303133;
}
}
}
.admin-content {
flex: 1;
overflow: auto;
padding: 16px;
}
}
}
</style>

@ -0,0 +1,165 @@
<template>
<div class="hospital-layout">
<header class="hospital-header">
<div class="brand flex gap-8">
<SvgIcon name="logo" :size="26" color="#fff" />
<span class="title">康策CSM</span>
<el-divider direction="vertical" class="divider" />
<span class="sub-title">{{ userStore.userInfo?.hospitalName || '医院端' }}</span>
</div>
<nav class="hospital-nav">
<NavBar
mode="horizontal"
class="head-menu"
:isNested="false"
:routes="topRoutes"
:activeMenu="$route.path"
:isIcon="false"
/>
</nav>
<div class="user-area">
<el-dropdown trigger="hover" @command="handleCommand">
<div class="user-trigger">
<el-avatar :size="28"></el-avatar>
<span class="username">{{ userStore.userInfo?.name || userStore.userInfo?.userName || '用户' }}</span>
<el-icon><ArrowDown /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="password">修改密码</el-dropdown-item>
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</header>
<main class="hospital-main">
<slot />
</main>
</div>
</template>
<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
import NavBar from "@/components/navBar/NavBar.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { useUserStore } from "@/stores/api/user";
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
//
const topRoutes = computed(() => {
const hospitalRoute = route.matched.find((r) => r.path === "/hospital");
if (!hospitalRoute || !hospitalRoute.children) return [];
return hospitalRoute.children
.filter((c) => c.meta?.title && !c.meta?.hidden)
.map((c) => ({
path: `/hospital/${c.path}`,
title: c.meta.title,
iconName: c.meta?.icon || "Document",
children: [],
}));
});
const handleCommand = async (cmd) => {
if (cmd === "password") {
router.push("/hospital/password");
return;
}
if (cmd === "logout") {
try {
await ElMessageBox.confirm("确定要退出登录吗?", "提示", {
confirmButtonText: "退出",
cancelButtonText: "取消",
type: "warning",
});
userStore.clear();
router.push("/login");
} catch (_) {
/* canceled */
}
}
};
</script>
<style scoped lang="scss">
.hospital-layout {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
background: var(--bg-color-page);
.hospital-header {
flex-shrink: 0;
height: 60px;
display: flex;
align-items: center;
padding: 0 24px;
background: linear-gradient(135deg, #8b9ff5 0%, #6c7cf3 100%);
color: #fff;
.brand {
align-items: center;
.title {
font-size: 18px;
font-weight: 600;
}
.divider {
height: 18px;
background: rgba(255, 255, 255, 0.4);
}
.sub-title {
font-size: 14px;
opacity: 0.9;
}
}
.hospital-nav {
flex: 1;
display: flex;
justify-content: center;
:deep(.head-menu) {
--el-menu-active-color: #fff;
--el-menu-text-color: #fff;
--el-menu-hover-bg-color: rgba(255, 255, 255, 0.16);
--el-menu-horizontal-height: 60px;
--el-menu-item-font-size: 15px;
--el-menu-border-color: transparent;
:deep(.el-sub-menu .el-sub-menu__title) {
color: #fff !important;
}
}
}
.user-area {
flex-shrink: 0;
.user-trigger {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: #fff;
font-size: 14px;
padding: 0 8px;
}
}
}
.hospital-main {
flex: 1;
overflow: auto;
padding: 16px;
}
}
</style>

@ -0,0 +1,404 @@
<template>
<div class="app-layout">
<Header @toggle-sidebar="toggleSidebar" />
<div class="main">
<div class="sidebar" :class="{ collapse: collapsed }" v-if="routeStore.sideRoutes.length > 0">
<div class="collapse-btn corlor-place w-ra-100 flex gap-6 start h-44 fs-12 pl-25">
<el-icon @click="toggleSidebar" :size="14">
<component :is="collapsed ? Expand : Fold" />
</el-icon>
<span class="txt" :class="{ transparent: collapsed }">收起导航</span>
</div>
<NavBar ref="sideBarRef" class="side-menu w-ra-100" :routes="routeStore.sideRoutes"
:activeMenu="routeStore.activeSideRoute?.path" :isIcon="false" />
</div>
<div class="content px-16 pb-16">
<div class="content-header my-16">
<el-icon class="tabs-arrow left" :class="{ disabled: !canScrollLeft }" @click="scrollTabs('left')">
<ArrowLeft />
</el-icon>
<div ref="tabsWrapRef" class="route-tabs" @scroll="syncScrollState">
<div v-for="tab in routeTabs" :key="tab.path" class="route-tab"
:class="{ active: tab.path === activeTabPath }" @click="goTab(tab.path)">
<span class="tab-title">{{ tab.title }}</span>
<el-icon v-if="tab.closable && routeTabs.length > 1" class="tab-close" @click.stop="closeTab(tab)">
<Close />
</el-icon>
</div>
</div>
<el-icon class="tabs-arrow right" :class="{ disabled: !canScrollRight }" @click="scrollTabs('right')">
<ArrowRight />
</el-icon>
</div>
<!-- 主显示区域 -->
<slot />
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import Header from './header.vue'
import NavBar from '@/components/navBar/NavBar.vue'
import { Fold, Expand, Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { useRouteSync } from '@/composables/useRouteSync'
const route = useRoute()
const router = useRouter()
const routeStore = useRouteSync()
const routeTabs = ref([])
const tabsWrapRef = ref(null)
const canScrollLeft = ref(false)
const canScrollRight = ref(false)
const activeTabPath = computed({
get() {
const path = route.fullPath || route.path;
if(path === '/shop/home') {
return '/shop/index'
}
return path;
}
})
const currentRouteInfo = computed(() => {
const matched = [...route.matched].reverse().find((r) => r.meta?.title) || route.matched[route.matched.length - 1]
let title = matched?.meta?.title || route.meta?.title || ''
const hidden = matched?.meta?.hidden ?? false
let path = route.fullPath || route.path
if(hidden) {
if(path === '/shop/home') {
path = '/shop/index',
title = '页面管理'
}
}
if (!title) return null
return {
title,
path,
closable: (matched?.meta?.closable ?? true), //&& route.path !== '/home'
}
})
watch(
currentRouteInfo,
(tab) => {
console.log('咋不对呢',tab);
if (!tab) return
const exists = routeTabs.value.some((item) => item.path === tab.path)
if (!exists) {
routeTabs.value.push(tab)
}
nextTick(() => {
scrollActiveTabIntoView()
syncScrollState()
})
},
{ immediate: true },
)
const syncScrollState = () => {
const el = tabsWrapRef.value
if (!el) return
canScrollLeft.value = el.scrollLeft > 0
canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 1
}
const scrollTabs = (direction) => {
const el = tabsWrapRef.value
if (!el) return
const distance = 220
el.scrollBy({
left: direction === 'left' ? -distance : distance,
behavior: 'smooth',
})
}
const scrollActiveTabIntoView = () => {
const el = tabsWrapRef.value
if (!el) return
const activeTab = el.querySelector('.route-tab.active')
activeTab?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
}
let resizeObserver = null
onMounted(() => {
nextTick(() => {
syncScrollState()
scrollActiveTabIntoView()
})
if (window.ResizeObserver && tabsWrapRef.value) {
resizeObserver = new ResizeObserver(() => {
syncScrollState()
})
resizeObserver.observe(tabsWrapRef.value)
}
})
onBeforeUnmount(() => {
resizeObserver?.disconnect()
})
const goTab = (path) => {
if (path && path !== route.fullPath) {
router.push(path)
}
}
const closeTab = (tab) => {
if (routeTabs.value.length <= 1) return
const tabs = routeTabs.value
const index = tabs.findIndex((item) => item.path === tab.path)
if (index < 0) return
tabs.splice(index, 1)
if (tab.path === route.fullPath) {
const nextTab = tabs[index] || tabs[index - 1] || tabs[0]
if (nextTab) {
router.push(nextTab.path)
} else {
router.push('/home')
}
}
}
const sideBarRef = ref(null)
const collapsed = ref(false)
const toggleSidebar = () => {
collapsed.value = !collapsed.value
}
</script>
<style scoped lang="scss">
:deep(.el-icon) {
cursor: pointer;
}
.app-layout {
width: 100vw;
height: 100vh;
.main {
display: flex;
overflow: hidden;
background: var(--bg-color-page);
height: calc(100vh - 60px);
overflow: hidden;
.sidebar {
width: 160px;
height: calc(100vh - 60px);
background-color: var(--bg-color-container);
transition: 0.2s all linear;
&.collapse {
width: 64px;
:deep(.el-menu-item) {
padding-left: 10px !important;
&:hover span {
overflow: visible;
text-overflow: clip;
max-width: none;
position: absolute;
top: 50%;
left: 36px;
transform: translateY(-50%);
padding: 0 10px;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
z-index: 20;
}
}
}
.collapse-btn {
border-bottom: 1px solid var(--component-stroke);
.txt {
transition: 0.2s all linear;
white-space: nowrap;
display: inline-block;
opacity: 1;
&.transparent {
opacity: 0;
}
}
}
.side-menu {
transition: width 0.3s;
padding: 16px 8px;
border-right: none;
background: transparent;
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
width: 100%;
position: relative;
overflow: visible;
span {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
}
:deep(.el-menu-item) {
transition: 0.2s all linear;
padding-left: 20px;
border-radius: 3px;
color: var(--text-color-secondary);
&:hover {
background-color: var(--brand-color-light);
}
&.is-active {
background-color: var(--brand-color);
color: var(--text-color-primary);
}
}
}
&.collapse {
width: 64px;
}
}
.content {
height: 100%;
overflow: auto;
flex: 1;
.content-header {
display: flex;
align-items: center;
gap: 10px;
background-color: var(--bg-color-container);
height: 44px;
overflow: hidden;
border-radius: 6px;
.tabs-arrow {
flex: 0 0 auto;
width: 44px;
height: 100%;
border-radius: 0;
background: var(--bg-color-container);
color: #666;
border: none;
z-index: 1;
:deep(svg) {
width: 14px;
height: 14px;
}
&.disabled {
color: #c9cdd4;
cursor: not-allowed;
pointer-events: none;
opacity: 0.7;
}
&.left {
box-shadow: 6px 0 14px rgba(0, 0, 0, 0.08);
}
&.right {
box-shadow: -6px 0 14px rgba(0, 0, 0, 0.08);
}
}
.route-tabs {
display: flex;
align-items: center;
// gap: 12px;
flex: 1;
min-width: 0;
overflow-x: auto;
padding-bottom: 0;
scrollbar-width: none;
height: 100%;
&::-webkit-scrollbar {
display: none;
}
.route-tab {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 6px;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent;
color: var(--text-color-secondary);
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
&:hover {
color: var(--brand-color-hover);
border-bottom-color: var(--brand-color-hover);
}
&.active {
color: var(--brand-color);
border-bottom-color: var(--brand-color);
font-weight: 600;
}
}
}
.tab-title {
line-height: 1;
display: inline-flex;
align-items: center;
height: 100%;
}
.tab-close {
margin-left: 8px;
font-size: 12px;
color: #999;
&:hover {
color: var(--brand-color);
}
}
}
}
}
}
</style>

@ -0,0 +1,3 @@
<template>
<router-view />
</template>

@ -0,0 +1,536 @@
<template>
<header class="app-header h-60 flex px-24 fs-16 bg-brand-hover" v-if="routeStore.activeMainRoute">
<div class="title flex">
<SvgIcon name="logo" :size="24" color="#fff" />
<!--todo 切换医院功能 selectHospital -->
<div class="flex"><span>康策CRM8.0</span><span class="mx-12 mb-2">|</span>
<el-dropdown @command="selectHospital">
<span class="fs-16" style="color:#fff;">
<span>上海演示医院</span>
<el-icon style="margin-left:10px" :size="12">
<ArrowDownBold />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu class="fs-16">
<el-dropdown-item command="password">上海演示医院1</el-dropdown-item>
<el-dropdown-item command="logout" divided>上海演示医院2</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div class="menus flex">
<NavBar class="head-menu" :isNested="false" @collapse="onCollapse" mode="horizontal"
:routes="routeStore.mainRoutes" :isIcon="false" :activeMenu="routeStore.activeMainRoute?.path">
<template #moretitle>
<el-sub-menu class="more-menu" index="__more__" v-if="routeStore.moreMainRoutes.length > 0"
:class="{ 'is-active': isMoreActive }" :expand-close-icon="ArrowDownBold" :expand-open-icon="ArrowDownBold"
:show-timeout="200" :hide-timeout="200">
<template #title>
<span class="lh-ra-1">更多</span>
</template>
<NavBarMenuItem :items="routeStore.moreMainRoutes" :isNested="true"
:activeMenu="routeStore.activeMainRoute?.path" :isIcon="false" />
</el-sub-menu>
</template>
</NavBar>
<SvgIcon name="apps" :size="40" color="#fff" style="cursor:pointer" class="mt-2" />
</div>
<div class="status flex gap-6 h-28 radius-14 py-0 px-12 fs-14" :class="{ 'is-busy': statusText === '忙碌' }">
<div class="status-item phone flex gap-3 color-brand" v-if="statusText === '空闲'">
<SvgIcon name="phone" :size="14" style="cursor:pointer" />
<span>8866</span>
</div>
<div class="status-item phone flex gap-3" style="color:#ffa938;" v-if="statusText === '忙碌'">
<SvgIcon name="phone" :size="14" style="cursor:pointer" />
<span style="color:#fff;">8866</span>
</div>
<el-dropdown class="status-item center h-ra-100 fs-14 px-10 radius-14 color-brand" trigger="click"
@command="handleStatusCommand">
<div class="flex gap-4 color-brand" v-if="statusText === '空闲'" role="button">
<SvgIcon name="coffee" :size="16" style="cursor:pointer" />
<span>{{ statusText }}</span>
<el-icon class="status-arrow color-brand" :size="12">
<ArrowDownBold />
</el-icon>
</div>
<div class="flex gap-4" v-else role="button" style="color:#ffa938;">
<SvgIcon name="busy" :size="16" style="cursor:pointer" />
<span>{{ statusText }}</span>
<el-icon class="status-arrow" :size="12" color="#ffa938">
<ArrowDownBold />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="busy">忙碌</el-dropdown-item>
<el-dropdown-item command="free">空闲</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="status-item flex">
<span>{{ currentTime }}</span>
</div>
</div>
<div class="actions flex gap-12 p-0">
<div class="search-expand" tabindex="0">
<SvgIcon name="search" :size="22" class="search-icon" />
<input v-model="searchQuery" class="search-input" type="text" placeholder="请输入内容" @keydown.enter="onSearch" />
</div>
<!-- <el-tooltip content="提示内容" placement="bottom">
<SvgIcon name="question" :size="22" color="#fff" style="cursor:pointer" />
</el-tooltip> -->
<el-badge :is-dot="hasUnreadMessage" class="message-badge">
<SvgIcon name="wechat" :size="22" style="cursor:pointer" @click="goMessage" />
</el-badge>
<el-badge :is-dot="hasWechatUnread" class="message-badge">
<SvgIcon name="bell-filled" :size="22" class="wechat-icon" style="cursor:pointer" @click="goWechat" />
</el-badge>
<!-- <FullScreenToggle /> -->
<!-- <el-button @click="switchThem" type="primary">切换主题</el-button> -->
<!-- <el-button @click="switchFontSize" type="primary">字体大小</el-button> -->
<!-- <I18nSwitcher /> -->
<el-dropdown @command="handleCommand" popper-class="user-dropdown-popper" trigger="hover">
<span class="user-dropdown ml-12 flex">
<el-avatar :size="26"></el-avatar>
<span class="fs-14 mx-8">{{ userStore.userData.EmployeeName || '管理员' }}</span>
<SvgIcon name="more" :size="16" color="#fff" class="mt-2" />
</span>
<template #dropdown>
<el-dropdown-menu class="user-dropdown-menu">
<el-dropdown-item command="password">修改密码</el-dropdown-item>
<el-dropdown-item command="notice" class="dropdown-arrow-item">
<span>提示设置</span>
<el-icon>
<ArrowRight />
</el-icon>
</el-dropdown-item>
<el-dropdown-item class="dropdown-arrow-item lang-item" style="overflow: visible; position: relative;">
<span>语言切换</span>
<el-icon>
<ArrowRight />
</el-icon>
<!-- 子菜单 -->
<div class="lang-sub-menu">
<div class="lang-sub-menu-item" :class="{ 'is-active': currentLangKey === 'zhCN' }"
@click="changeLang('zhCN')">中文</div>
<div class="lang-sub-menu-item" :class="{ 'is-active': currentLangKey === 'zhTW' }"
@click="changeLang('zhTW')">中文繁体字</div>
<div class="lang-sub-menu-item" :class="{ 'is-active': currentLangKey === 'enUS' }"
@click="changeLang('enUS')">英文</div>
</div>
</el-dropdown-item>
<el-dropdown-item command="theme" class="dropdown-arrow-item">
<span>皮肤选择</span>
<el-icon>
<ArrowRight />
</el-icon>
</el-dropdown-item>
<el-dropdown-item command="logout" divided>安全退出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</header>
<!-- 主题色切换弹窗 -->
<ThemeSwitch ref="themeDialog"></ThemeSwitch>
<!-- 字体大小切换弹窗 -->
<FontSizeSwitch ref="fontDialog"></FontSizeSwitch>
</template>
<script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/api/user'
import ThemeSwitch from '@/components/themeSwitch/index.vue'
import FontSizeSwitch from '@/components/fontSizeSwitch/index.vue'
import { ArrowDownBold, ArrowRight } from '@element-plus/icons-vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import NavBar from '@/components/navBar/NavBar.vue'
import NavBarMenuItem from '@/components/navBar/NavBarMenuItem.vue'
import { useRouteSync } from '@/composables/useRouteSync'
import { useLanguage } from '@/composables/useLanguage'
const routeStore = useRouteSync()
const router = useRouter()
const userStore = useUserStore()
const { currentLangKey, changeLang } = useLanguage()
const emit = defineEmits(['toggle-sidebar'])
const themeDialog = ref(null)
const fontDialog = ref(null)
const statusText = ref('空闲')
const currentTime = ref('')
const hasUnreadMessage = ref(true)
const hasWechatUnread = ref(true)
let timer = null
const isMoreActive = computed(() =>
routeStore.moreMainRoutes.some((route) => route.path === routeStore.activeMainRoute?.path),
)
const updateTime = () => {
const now = new Date()
currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })
}
onMounted(() => {
updateTime()
timer = window.setInterval(updateTime, 1000)
})
onUnmounted(() => {
if (timer) window.clearInterval(timer)
})
const switchThem = () => { themeDialog.value?.open() }
const switchFontSize = () => { fontDialog.value?.open() }
const handleStatusCommand = (cmd) => {
const statusMap = {
busy: '忙碌',
free: '空闲',
}
statusText.value = statusMap[cmd] || '空闲'
}
const goMessage = () => {
router.push('/message/notification')
}
const goWechat = () => {
// /
console.log('go wechat')
}
//
const searchQuery = ref('')
const onSearch = () => {
const q = searchQuery.value && searchQuery.value.trim()
if (!q) return
//
console.log('search:', q)
// /search?q=...
// router.push({ path: '/search', query: { q } })
}
const handleCommand = (cmd) => {
if (cmd === 'password') {
router.push('/password')
return
}
if (cmd === 'notice') {
fontDialog.value?.open()
return
}
if (cmd === 'theme') {
themeDialog.value?.open()
return
}
if (cmd === 'logout') {
router.push('/login')
}
}
</script>
<style scoped lang="scss">
.app-header {
flex-shrink: 0;
justify-content: space-between;
align-items: center;
.title {
gap: 10px;
}
.status {
background: rgba(255, 255, 255, 0.24);
&.is-busy {
background: #ffa938;
}
.status-item {
height: 100%;
cursor: pointer;
&.center {
background: #fff;
}
}
.status-icon {
font-size: 15px;
line-height: 1;
}
.status-arrow {
margin-left: 2px;
}
}
.actions {
.el-icon {
font-size: 22px;
color: #fff;
cursor: pointer;
}
}
/* search-expand: hover 或 focus-within 时向左展开为输入框 */
.search-expand {
display: inline-flex;
align-items: center;
position: relative;
}
.search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #fff;
pointer-events: none;
}
.search-input {
width: 0;
opacity: 0;
padding: 0;
margin-left: 0;
border: none;
outline: none;
background: transparent;
color: #fff;
transition: width 0.28s ease, opacity 0.18s ease, margin-left 0.18s ease, padding 0.18s ease, background 0.18s ease;
/* 为图标留出空间 */
padding-left: 36px;
height: 32px;
line-height: 32px;
box-sizing: border-box;
border-radius: 3px;
}
.search-expand:hover .search-input,
.search-expand:focus-within .search-input {
width: 240px;
opacity: 1;
margin-left: 0;
padding-right: 12px;
background: rgba(255, 255, 255, 0.26);
color: #fff;
border-radius: 3px;
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.85);
}
.message-badge {
display: inline-flex;
align-items: center;
}
.message-icon {
width: 22px;
height: 22px;
font-size: 22px;
color: #fff;
cursor: pointer;
}
.wechat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: #fff;
}
.iconBox {
flex: 1;
text-align: center;
font-size: 1rem;
cursor: pointer;
}
.iconBox:hover {
background: var(--bg-color-container-active);
}
.iconBox:nth-of-type(1) {
border-right: 1px solid #ebeef5;
}
.header-actions {
display: flex;
align-items: center;
}
}
.user-dropdown {
display: flex;
align-items: center;
cursor: pointer;
font-size: 18px;
color: #fff;
}
:deep(.user-dropdown-popper) {
padding: 0;
}
:deep(.user-dropdown-menu) {
overflow: visible;
min-width: 176px;
padding: 8px 0;
.el-dropdown-menu__item {
height: 40px;
padding: 0 16px;
font-size: 16px;
color: #222;
display: flex;
align-items: center;
justify-content: space-between;
}
.dropdown-arrow-item {
position: relative;
.el-icon {
margin-left: 16px;
color: #999;
font-size: 14px;
}
}
}
.navigation {
height: 3rem;
display: flex;
align-items: center;
padding: 0 1rem;
border-bottom: 1px solid #ebeef5;
background: #fff;
flex-shrink: 0;
}
.head-menu {
// background-color: red;
color: #fff;
--el-menu-active-color: #fff;
--el-menu-text-color: #fff;
--el-menu-hover-bg-color: transparent;
--el-menu-horizontal-height: 60px;
// --el-menu-horizontal-height: auto;
--el-menu-item-font-size: 16px;
--el-menu-item-height: 1;
padding-top: 6px;
--el-menu-border-color: transparent;
// :deep(.el-menu-item) {
// padding-top: 6px;
// }
:deep(.el-sub-menu .el-sub-menu__title) {
color: #fff !important;
}
:deep(.more-menu .el-sub-menu__icon-arrow) {
transition: transform 0.2s ease !important;
transition-delay: 0.2s !important;
}
:deep(.more-menu:hover .el-sub-menu__icon-arrow) {
transform: rotate(180deg) !important;
}
}
</style>
<style lang="scss">
/* Element Plus dropdown el-scrollbar
且因为弹窗挂载在 body 所以必须使用非 scoped 或者全局样式覆盖才能生效 */
.user-dropdown-popper {
.el-scrollbar,
.el-scrollbar__wrap,
.el-scrollbar__view,
.el-dropdown-menu {
overflow: visible !important;
}
.lang-item {
position: relative;
overflow: visible !important;
}
}
.lang-item {
.lang-sub-menu {
display: none;
position: absolute;
right: calc(100% + 0px);
top: 100%;
transform: translateY(-50%);
// min-width: 120px;
z-index: 10000;
background: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 10px 0;
white-space: nowrap;
}
&:hover,
&:focus-within {
.lang-sub-menu {
display: block;
}
}
.lang-sub-menu-item {
padding: 5px 16px;
line-height: 22px;
cursor: pointer;
color: var(--el-text-color-regular);
font-size: var(--el-font-size-base);
&:hover,
&.is-active {
background-color: var(--el-dropdown-menuItem-hover-fill);
color: var(--el-dropdown-menuItem-hover-color);
}
}
}
</style>

@ -0,0 +1,48 @@
<template>
<el-menu :key="activeMenu" class="el-menu-vertical-demo" :default-active="activeMenu" :mode="mode"
:collapse="isCollapse" router :ellipsis="false" :default-openeds="defaultOpeneds">
<NavBarMenuItem :items="routes" :isNested="isNested" :activeMenu="activeMenu" :isIcon="isIcon" />
<slot name="moretitle"></slot>
</el-menu>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import NavBarMenuItem from './NavBarMenuItem.vue'
const props = defineProps({
routes: {
type: Array,
default: () => []
},
//
isCollapse: {
type: Boolean,
default: false,
},
mode: {
type: String,
default: 'vertical',
},
isNested: {
type: Boolean,
default: true,
},
activeMenu: {
type: String,
default: '',
},
isIcon: {
type: Boolean,
default: true,
},
// index
defaultOpeneds: {
type: Array,
default: () => [],
}
})
</script>

@ -0,0 +1,54 @@
<template>
<template v-for="item in items" :key="item.path">
<!-- 有子菜单 -->
<el-sub-menu v-if="isNested && item.children && item.children.length >= 1" :index="item.path"
:class="{ 'is-active': isActive(item.path) }">
<template #title>
<SvgIcon v-if="isIcon" :name="item.iconName" :size="22" color="#3377FF" />
<span>{{ item.title }}</span>
</template>
<NavBarMenuItem :items="item.children" :isNested="isNested" />
</el-sub-menu>
<!-- 只有一个子菜单或无子菜单直接显示 -->
<el-menu-item v-else :index="item.path" :class="{ 'is-active': isActive(item.path) }">
<template #title>
<SvgIcon v-if="isIcon" :name="item.iconName" :size="18" color="currentColor" />
<span>{{ item.title }}</span>
</template>
</el-menu-item>
</template>
</template>
<script setup>
import SvgIcon from '@/components/SvgIcon/index.vue'
defineOptions({
name: 'NavBarMenuItem'
})
const props = defineProps({
items: {
type: Array,
default: () => []
},
isNested: {
type: Boolean,
default: true
},
activeMenu: {
type: String,
default: ''
},
isIcon: {
type: Boolean,
default: true
}
})
const isActive = (path) => {
if (!path || !props.activeMenu) return false
return props.activeMenu === path
}
</script>

@ -0,0 +1,363 @@
<template>
<div ref="panelRef" class="iro-picker-panel">
<div class="iro-picker-panel__box-row">
<div ref="boxPickerMountRef" class="iro-picker-panel__box-mount"></div>
</div>
<div class="iro-picker-panel__slider-row">
<div ref="sliderPickerMountRef" class="iro-picker-panel__slider-mount"></div>
<div class="iro-picker-panel__swatch-wrap">
<div class="iro-picker-panel__swatch" :style="swatchStyle"></div>
</div>
</div>
<div class="iro-picker-panel__footer">
<div class="iro-picker-panel__fields">
<el-select v-model="displayFormat" size="small" class="iro-picker-panel__format">
<el-option label="RGBA" value="RGBA" />
<el-option label="HEX" value="HEX" />
<el-option label="HSLA" value="HSLA" />
</el-select>
<template v-if="displayFormat === 'RGBA'">
<el-input v-model="rgbInput.r" size="small" @change="applyRgbInput" />
<el-input v-model="rgbInput.g" size="small" @change="applyRgbInput" />
<el-input v-model="rgbInput.b" size="small" @change="applyRgbInput" />
<el-input v-model="rgbInput.a" size="small" @change="applyRgbInput" />
</template>
<template v-else-if="displayFormat === 'HSLA'">
<el-input v-model="hslInput.h" size="small" @change="applyHslInput" />
<el-input v-model="hslInput.s" size="small" @change="applyHslInput" />
<el-input v-model="hslInput.l" size="small" @change="applyHslInput" />
<el-input v-model="hslInput.a" size="small" @change="applyHslInput" />
</template>
<template v-else>
<el-input v-model="hexInput" size="small" class="iro-picker-panel__hex" @change="applyHexInput" />
</template>
</div>
</div>
</div>
</template>
<script setup>
import iro from '@jaames/iro'
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
const props = defineProps({
modelValue: {
type: String,
default: '#1764FF',
},
visible: {
type: Boolean,
default: false,
},
})
const emit = defineEmits(['update:modelValue'])
const panelRef = ref(null)
const boxPickerMountRef = ref(null)
const sliderPickerMountRef = ref(null)
const boxPickerInstance = ref(null)
const sliderPickerInstance = ref(null)
const displayFormat = ref('RGBA')
const rgbInput = ref({ r: '23', g: '100', b: '255', a: '1' })
const hslInput = ref({ h: '221', s: '100', l: '55', a: '1' })
const hexInput = ref('#1764FF')
const swatchRgba = ref('rgba(23, 100, 255, 1)')
let resizeObserver = null
let isSyncingPickers = false
const getBoxPickerWidth = () => {
const panelWidth = panelRef.value?.clientWidth || 332
return Math.max(panelWidth, 240)
}
const getSliderPickerWidth = () => {
const panelWidth = panelRef.value?.clientWidth || 332
return Math.max(panelWidth - 48, 192)
}
const formatOutputColor = (color) => {
if (displayFormat.value === 'HEX') {
return color.alpha < 1 ? color.hex8String.toUpperCase() : color.hexString.toUpperCase()
}
if (displayFormat.value === 'HSLA') {
return color.alpha < 1 ? color.hslaString : color.hslString
}
return color.alpha < 1 ? color.rgbaString : color.rgbString
}
const clampNumber = (value, min, max) => {
const parsed = Number(value)
if (Number.isNaN(parsed)) return min
return Math.min(max, Math.max(min, parsed))
}
const syncInputsFromColor = (color) => {
rgbInput.value = {
r: String(Math.round(color.red)),
g: String(Math.round(color.green)),
b: String(Math.round(color.blue)),
a: String(Number(color.alpha.toFixed(2))),
}
hslInput.value = {
h: String(Math.round(color.hue)),
s: String(Math.round(color.hsl.s)),
l: String(Math.round(color.hsl.l)),
a: String(Number(color.alpha.toFixed(2))),
}
hexInput.value = color.alpha < 1 ? color.hex8String.toUpperCase() : color.hexString.toUpperCase()
swatchRgba.value = color.rgbaString
}
const emitThemeColor = (color) => {
emit('update:modelValue', formatOutputColor(color))
}
const handleColorChange = (color) => {
syncInputsFromColor(color)
emitThemeColor(color)
}
const syncOtherPicker = (source, value) => {
if (isSyncingPickers) return
isSyncingPickers = true
try {
if (source !== boxPickerInstance.value && boxPickerInstance.value) {
boxPickerInstance.value.color.set(value)
}
if (source !== sliderPickerInstance.value && sliderPickerInstance.value) {
sliderPickerInstance.value.color.set(value)
}
} finally {
isSyncingPickers = false
}
}
const createBoxPicker = () => {
if (!boxPickerMountRef.value || boxPickerInstance.value) return
boxPickerInstance.value = new iro.ColorPicker(boxPickerMountRef.value, {
width: getBoxPickerWidth(),
color: props.modelValue || '#1764FF',
borderWidth: 0,
padding: 0,
margin: 0,
sliderSize: 14,
handleRadius: 8,
boxHeight: 180,
layoutDirection: 'vertical',
layout: [
{
component: iro.ui.Box,
options: {
boxHeight: 180,
},
},
],
})
boxPickerInstance.value.on('color:change', (color) => {
handleColorChange(color)
syncOtherPicker(boxPickerInstance.value, color.rgbaString)
})
}
const createSliderPicker = () => {
if (!sliderPickerMountRef.value || sliderPickerInstance.value) return
sliderPickerInstance.value = new iro.ColorPicker(sliderPickerMountRef.value, {
width: getSliderPickerWidth(),
color: props.modelValue || '#1764FF',
borderWidth: 0,
padding: 0,
margin: 8,
sliderSize: 14,
handleRadius: 8,
layoutDirection: 'vertical',
layout: [
{
component: iro.ui.Slider,
options: {
sliderType: 'hue',
},
},
{
component: iro.ui.Slider,
options: {
sliderType: 'alpha',
},
},
],
})
sliderPickerInstance.value.on('color:change', (color) => {
handleColorChange(color)
syncOtherPicker(sliderPickerInstance.value, color.rgbaString)
})
}
const resizePickers = async () => {
await nextTick()
boxPickerInstance.value?.resize(getBoxPickerWidth())
boxPickerInstance.value?.forceUpdate()
sliderPickerInstance.value?.resize(getSliderPickerWidth())
sliderPickerInstance.value?.forceUpdate()
}
const applyRgbInput = () => {
const nextColor = {
r: clampNumber(rgbInput.value.r, 0, 255),
g: clampNumber(rgbInput.value.g, 0, 255),
b: clampNumber(rgbInput.value.b, 0, 255),
a: clampNumber(rgbInput.value.a, 0, 1),
}
boxPickerInstance.value?.color.set(nextColor)
sliderPickerInstance.value?.color.set(nextColor)
}
const applyHslInput = () => {
const nextColor = {
h: clampNumber(hslInput.value.h, 0, 360),
s: clampNumber(hslInput.value.s, 0, 100),
l: clampNumber(hslInput.value.l, 0, 100),
a: clampNumber(hslInput.value.a, 0, 1),
}
boxPickerInstance.value?.color.set(nextColor)
sliderPickerInstance.value?.color.set(nextColor)
}
const applyHexInput = () => {
const normalized = hexInput.value.startsWith('#') ? hexInput.value : `#${hexInput.value}`
boxPickerInstance.value?.color.set(normalized)
sliderPickerInstance.value?.color.set(normalized)
}
watch(
() => props.modelValue,
(value) => {
if (!boxPickerInstance.value || !value) return
const currentValue = formatOutputColor(boxPickerInstance.value.color)
if (String(currentValue).toUpperCase() === String(value).toUpperCase()) return
syncOtherPicker(null, value)
syncInputsFromColor(boxPickerInstance.value.color)
}
)
watch(
() => props.visible,
async (value) => {
if (!value) return
await resizePickers()
}
)
onMounted(() => {
createBoxPicker()
createSliderPicker()
if (boxPickerInstance.value) {
syncInputsFromColor(boxPickerInstance.value.color)
}
if (typeof ResizeObserver !== 'undefined' && panelRef.value) {
resizeObserver = new ResizeObserver(() => {
resizePickers()
})
resizeObserver.observe(panelRef.value)
}
})
onBeforeUnmount(() => {
resizeObserver?.disconnect()
})
const swatchStyle = computed(() => ({
backgroundColor: swatchRgba.value,
}))
</script>
<style scoped lang="scss">
.iro-picker-panel {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.iro-picker-panel__box-row {
width: 100%;
}
.iro-picker-panel__box-mount {
width: 100%;
}
.iro-picker-panel__slider-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.iro-picker-panel__slider-mount {
flex: 1;
min-width: 0;
}
.iro-picker-panel__footer {
width: 100%;
}
.iro-picker-panel__fields {
display: grid;
grid-template-columns: 88px repeat(4, minmax(0, 1fr));
gap: 8px;
width: 100%;
}
.iro-picker-panel__format {
width: 88px;
}
.iro-picker-panel__hex {
grid-column: span 4;
}
.iro-picker-panel__swatch-wrap {
flex: 0 0 36px;
width: 36px;
height: 36px;
padding: 2px;
border-radius: 8px;
background-image:
linear-gradient(45deg, #d9dee7 25%, transparent 25%),
linear-gradient(-45deg, #d9dee7 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #d9dee7 75%),
linear-gradient(-45deg, transparent 75%, #d9dee7 75%);
background-size: 12px 12px;
background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
}
.iro-picker-panel__swatch {
width: 100%;
height: 100%;
border-radius: 6px;
border: 1px solid rgba(15, 23, 42, 0.08);
}
.iro-picker-panel :deep(.IroColorPicker) {
width: 100% !important;
}
.iro-picker-panel :deep(svg) {
display: block;
}
</style>

@ -0,0 +1,388 @@
<template>
<el-dialog title="皮肤设置" v-model="visible" width="900px" class="skin-dialog" :close-on-click-modal="false"
:before-close="handleDialogCancel">
<div class="skin-content">
<h4 class="section-title">选择皮肤颜色</h4>
<div class="theme-list">
<div v-for="item in themes" :key="item.value" class="theme-item"
:class="{ active: currentThemeValue === item.value }">
<div class="theme-preview" :style="getThemePreviewStyle(item)" @click="selectTheme(item.value)">
<div class="header" :style="{ background: getThemeColor(item) }"></div>
<div class="body" :class="{ dark: item.value === 'black' }">
<div class="logo" :style="{ color: getThemeColor(item), borderColor: getThemeColor(item,0.33) }">
<SvgIcon name="logo" :size="12" class="mr-2" />
<span>康策CRM8.0</span>
</div>
<div class="line-wrap" :style="{ color: getThemeColor(item,0.33) }">
<div class="avatar-fake"></div>
<div class="lines">
<div class="line short"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
<div class="theme-radio custom-theme-radio">
<el-radio style="margin-right: 0;" :model-value="currentThemeValue" :label="item.value"
@change="selectTheme(item.value)">
{{ item.label }}
</el-radio>
<template v-if="item.value === 'custom'">
<el-button link class="edit-custom-btn" @click.stop="toggleCustomColorPanel">
<!-- 编辑 -->
<el-icon :size="14">
<EditPen />
</el-icon>
</el-button>
<div class="custom-color-panel" :class="{ appear: showCustomPanel }" @click.stop>
<CustomColorPicker :model-value="draftCustomColor" :visible="showCustomPanel"
@update:modelValue="handleCustomColorChange" />
<div class="custom-color-panel__actions">
<el-button size="small" @click="cancelCustomColor"></el-button>
<el-button size="small" type="primary" @click="confirmCustomColor"></el-button>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
<template #footer>
<el-button @click="handleDialogCancel"></el-button>
<el-button type="primary" @click="setAsDefault"></el-button>
</template>
</el-dialog>
</template>
<script setup>
import { computed, onBeforeUnmount, ref } from "vue";
import { useThemeStore } from "@/stores/theme";
import { ElMessage } from "element-plus";
import CustomColorPicker from "@/components/themeSwitch/CustomColorPicker.vue";
import { EditPen } from '@element-plus/icons-vue';
import { applyAlphaToColor } from "@/utils/index.js";
const visible = ref(false);
const themeStore = useThemeStore();
const draftCustomColor = ref(themeStore.customThemeColor);
const showCustomPanel = ref(false);
const panelInitialColor = ref(themeStore.customThemeColor);
const panelInitialTheme = ref(themeStore.themeValue);
const dialogInitialColor = ref(themeStore.customThemeColor);
const dialogInitialTheme = ref(themeStore.themeValue);
let previewFrameId = 0;
let pendingPreviewColor = themeStore.customThemeColor;
const themes = [
{
label: "穹宇蓝",
value: "blue",
color: "#1764FF",
previewBg: "linear-gradient(180deg, #E6EEFF 0%, #F5F8FF 100%)",
className: "blue",
},
{
label: "星轨紫",
value: "purple",
color: "#8649FB",
previewBg: "linear-gradient(180deg, #F3E9FF 0%, #FBF7FF 100%)",
className: "purple",
},
{
label: "青岚绿",
value: "green",
color: "#29A181",
previewBg: "linear-gradient(180deg, #E7F6F0 0%, #F4FBF8 100%)",
className: "green",
},
{
label: "曜石黑",
value: "black",
color: "#000000",
previewBg: "#2B2B2B",
className: "dark",
},
{
label: "自定义颜色",
value: "custom",
color: themeStore.customThemeColor,
previewBg: "linear-gradient(180deg, #E9EEF8 0%, #FFFFFF 100%)",
className: "custom",
},
];
const currentThemeValue = computed(() => themeStore.themeValue);
const getThemeColor = (item, alpha = 1) => {
const color = item.value === "custom" ? themeStore.customThemeColor : item.color;
return applyAlphaToColor(color, alpha);
};
const getThemePreviewStyle = (item) => ({
background: item.value === "custom"
? `linear-gradient(180deg, ${themeStore.buildCustomThemeVars(themeStore.customThemeColor)['--el-color-primary-light-8']} 0%, #FFFFFF 100%)`
: item.previewBg,
borderColor: currentThemeValue.value === item.value ? getThemeColor(item) : '#e5e5e5',
});
const open = () => {
clearScheduledPreview();
dialogInitialColor.value = themeStore.customThemeColor;
dialogInitialTheme.value = themeStore.themeValue;
draftCustomColor.value = themeStore.customThemeColor;
showCustomPanel.value = false;
visible.value = true;
};
defineExpose({ open });
const restoreThemeState = (theme, color) => {
draftCustomColor.value = color;
themeStore.setCustomThemeColor(color);
themeStore.setTheme(theme);
};
const clearScheduledPreview = () => {
if (!previewFrameId) return;
cancelAnimationFrame(previewFrameId);
previewFrameId = 0;
};
const scheduleCustomColorPreview = (color) => {
pendingPreviewColor = color;
if (previewFrameId) return;
previewFrameId = requestAnimationFrame(() => {
previewFrameId = 0;
themeStore.previewCustomThemeColor(pendingPreviewColor);
if (themeStore.themeValue !== 'custom') {
themeStore.setTheme('custom');
}
});
};
onBeforeUnmount(() => {
clearScheduledPreview();
});
const toggleCustomColorPanel = () => {
if (!showCustomPanel.value) {
panelInitialColor.value = themeStore.customThemeColor;
panelInitialTheme.value = themeStore.themeValue;
draftCustomColor.value = themeStore.customThemeColor;
if (themeStore.themeValue !== 'custom') {
themeStore.setTheme('custom');
}
}
showCustomPanel.value = true;
};
const selectTheme = (value) => {
if (value === 'custom') {
themeStore.previewCustomThemeColor(draftCustomColor.value);
}
themeStore.setTheme(value);
};
const handleCustomColorChange = (color) => {
if (!color) return;
draftCustomColor.value = color;
scheduleCustomColorPreview(color);
};
const cancelCustomColor = () => {
clearScheduledPreview();
restoreThemeState(panelInitialTheme.value, panelInitialColor.value);
showCustomPanel.value = false;
};
const confirmCustomColor = () => {
clearScheduledPreview();
themeStore.setCustomThemeColor(draftCustomColor.value);
themeStore.setTheme('custom');
showCustomPanel.value = false;
};
const setAsDefault = () => {
clearScheduledPreview();
if (themeStore.themeValue === 'custom') {
themeStore.setCustomThemeColor(draftCustomColor.value);
}
themeStore.setTheme(themeStore.themeValue);
showCustomPanel.value = false;
visible.value = false;
ElMessage.success('设置主题成功!');
};
const handleDialogCancel = (done) => {
clearScheduledPreview();
restoreThemeState(dialogInitialTheme.value, dialogInitialColor.value);
showCustomPanel.value = false;
visible.value = false;
if (typeof done === 'function') done();
};
</script>
<style scoped lang="scss">
.skin-dialog .el-dialog__body {
padding: 20px 30px;
}
.skin-content {
text-align: left;
}
.section-title {
color: #999;
margin-bottom: 20px;
font-weight: normal;
}
.theme-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.theme-item {
text-align: center;
cursor: pointer;
min-width: 0;
max-width: none;
position: relative;
}
.theme-preview {
border: 2px solid #e5e5e5;
border-radius: 6px;
height: 121px;
margin-bottom: 10px;
overflow: hidden;
transition: all 0.3s;
padding: 16px 0 0 16px;
}
.theme-item.active .theme-preview {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.theme-preview .header {
height: 22px;
width: 60px;
border-radius: 6px;
margin-bottom: 10px;
}
.theme-preview .body {
background-color: #fff;
border-radius: 6px;
height: 999px;
}
.theme-preview .body.dark {
background: rgba(255, 255, 255, 0.04);
}
.theme-preview .logo {
font-size: 12px;
height: 22px;
border-bottom-width: 2px;
border-bottom-style: solid;
display: flex;
align-items: center;
line-height: 1;
padding-left: 10px;
}
.theme-preview .line-wrap {
height: 50px;
display: flex;
padding-left: 10px;
align-items: center;
gap: 5px;
.avatar-fake {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: currentColor;
}
.lines {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
.line {
width: 100px;
height: 6px;
border-radius: 3px;
background-color: currentColor;
}
.line.short {
width: 60px;
}
}
}
.theme-radio {
font-size: 14px;
}
.custom-theme-radio {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.edit-custom-btn {
padding: 0;
font-size: 12px;
}
.custom-color-panel {
position: absolute;
top: 50%;
left: calc(100% + 10px);
transform: translateY(-50%) translateX(-100%);
z-index: 30;
padding: 12px;
background: #fff;
border: 1px solid var(--el-border-color-light);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
overflow: visible;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
&.appear {
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}
}
.custom-color-panel {
min-width: 332px;
}
.custom-color-panel__actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 12px;
}
.dialog-footer {
text-align: right;
}
</style>

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save