feat: 远程通话开发

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+pnpm-lock.yaml*
 
 node_modules
 dist

.prettierrc.json

+{
+    "singleQuote": true,
+    "semi": false,
+    "bracketSpacing": true,
+    "htmlWhitespaceSensitivity": "ignore",
+    "endOfLine": "auto",
+    "trailingComma": "none",
+    "arrowParens": "always",
+    "tabWidth": 4,
+    "printWidth": 200
+}

components.d.ts

@@ -6,16 +6,34 @@
 export {}
 
 declare module 'vue' {
-  export interface GlobalComponents {
-    AButton: typeof import('@arco-design/web-vue')['Button']
-    ACol: typeof import('@arco-design/web-vue')['Col']
-    AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
-    ARow: typeof import('@arco-design/web-vue')['Row']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    // 自定义组件
-    GlobalSetting: typeof import('./src/components/global-setting/index.vue')['default']
-    LocaleText: typeof import('./src/components/locale/localeText.vue')['default']
-    ChangeThemeText: typeof import('./src/components/theme/changeThemeText.vue')['default']
-  }
+    export interface GlobalComponents {
+        AButton: (typeof import('@arco-design/web-vue'))['Button']
+        ACol: (typeof import('@arco-design/web-vue'))['Col']
+        AConfigProvider: (typeof import('@arco-design/web-vue'))['ConfigProvider']
+        ARow: (typeof import('@arco-design/web-vue'))['Row']
+        AMenu: (typeof import('@arco-design/web-vue'))['Menu']
+        ALayout: (typeof import('@arco-design/web-vue'))['Layout']
+        ALayoutSider: (typeof import('@arco-design/web-vue'))['LayoutSider']
+        ALayoutContent: (typeof import('@arco-design/web-vue'))['LayoutContent']
+        ASpace: (typeof import('@arco-design/web-vue'))['Space']
+        AAvatar: (typeof import('@arco-design/web-vue'))['Avatar']
+        AImage: (typeof import('@arco-design/web-vue'))['Image']
+        ARadioGroup: (typeof import('@arco-design/web-vue'))['RadioGroup']
+        ARadio: (typeof import('@arco-design/web-vue'))['Radio']
+        ARangePicker: (typeof import('@arco-design/web-vue'))['RangePicker']
+        ATag: (typeof import('@arco-design/web-vue'))['Tag']
+        ADropdown: (typeof import('@arco-design/web-vue'))['Dropdown']
+        AForm: (typeof import('@arco-design/web-vue'))['Form']
+        AFormItem: (typeof import('@arco-design/web-vue'))['FormItem']
+        AInput: (typeof import('@arco-design/web-vue'))['Input']
+        RouterLink: (typeof import('vue-router'))['RouterLink']
+        RouterView: (typeof import('vue-router'))['RouterView']
+        // 自定义组件
+        GlobalSetting: (typeof import('./src/components/global-setting/index.vue'))['default']
+        LocaleText: (typeof import('./src/components/locale/localeText.vue'))['default']
+        ChangeThemeText: (typeof import('./src/components/theme/changeThemeText.vue'))['default']
+        GlobalIcon: (typeof import('./src/components/global-icon/index.vue'))['default']
+        RangePickey: (typeof import('./src/components/range-pickey/index.vue'))['default']
+        GlobalAvatar: (typeof import('./src/components/global-avatar/index.vue'))['default']
+    }
 }

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
@@ -12,10 +12,13 @@
     "@alova/mock": "^1.5.1",
     "@vueuse/core": "^10.9.0",
     "alova": "^2.17.0",
+    "dayjs": "^1.11.10",
     "exceljs": "^4.4.0",
     "gsap": "^3.12.5",
     "less": "^4.2.0",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "qs": "^6.12.1",
     "vite-plugin-compression": "^0.5.1",
     "vue": "^3.4.19",
     "vue-i18n": "^9.9.0",
@@ -26,15 +29,20 @@
     "@arco-design/web-vue": "^2.54.5",
     "@arco-plugins/vite-vue": "^1.4.5",
     "@types/node": "^20.11.20",
+    "@types/qs": "^6.9.15",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.4",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.8.27"
   }
 }

prettierignore

+/dist/*
+/html/*
+.local
+/node_modules/**
+**/*.svg
+**/*.sh
+/public/*
\ No newline at end of file

project.app.config.ts

@@ -3,24 +3,24 @@
 // =============================
 
 export default {
-  // App配置 ==========
-  baseTitle: 'Vue3项目',  // 基础标题
-  enableGZip: false, // 是否开启gzip压缩
+    // App配置 ==========
+    baseTitle: 'Vue3项目', // 基础标题
+    enableGZip: false // 是否开启gzip压缩
 }
 
 // api设置 ==============
 export const ApiConfig = {
-  // 本地存储token的key
-  API_TOKEN_KEY: 'token',
-  // 是否开发环境
-  IS_DEVMODE: false,
-  // API服务器超时设置.
-  API_TIMEOUT: 30 * 1000,
-  // 接口服务器地址.
-  DEV_API_URL: 'http://localhost/TMSServer',
-  PROD_API_URL: 'https://www.insightbridge.com.cn',
-  // Mockt等待延时时间
-  MOCK_DELAY: 1000,
+    // 本地存储token的key
+    API_TOKEN_KEY: 'token',
+    // 是否开发环境
+    IS_DEVMODE: true,
+    // API服务器超时设置.
+    API_TIMEOUT: 30 * 1000,
+    // 接口服务器地址.
+    DEV_API_URL: 'https://ifar.test.com:440',
+    PROD_API_URL: 'https://www.insightbridge.com.cn',
+    // Mockt等待延时时间
+    MOCK_DELAY: 1000
 }
 // api地址
 export const API_URL = ApiConfig.IS_DEVMODE ? ApiConfig.DEV_API_URL : ApiConfig.PROD_API_URL

project.ui.config.ts

-import { ref } from "vue"
+import { ref } from 'vue'
 
 // 激活主题色：dark, light
-export const activedTheme = ref('light')
+export const activedTheme = ref('dark')
 
 // UI配置
 export default {
-  // 定义项目配色主色
-  colors: {
-    // 亮色主题 ===================
-    // 主色
-    primary: '#ffcc00', // 主色
-    primaryHover: '#005600',  // 主色鼠标移上色
-    primaryPressed: '#0056b3',  // 主色按下色
-    primaryActivated: '#003a8c',  // 主色激活色
-    primaryDisable: '#005600',  // 主色禁用色
-    // 背景色
-    themeBg1: '#ffffff',  // 背景色
-    themeBg2: '#f5f5f5',  // 比上面浅一点
-    themeBg3: '#eeeeee',  // 比上面浅一点
-    themeBg4: '#dddddd',  // 比上面浅一点
-    themeBg5: '#eeeeee',  // 比上面浅一点
-    // 文字色
-    themeText1: '#000000',  // 正常文字
-    themeText2: '#333333',  // 比上面浅一点
-    themeText3: '#666666',  // 比上面浅一点
-    themeText4: '#999999',  // 比上面浅一点
-    themeText5: '#eeeeee',  // 比上面浅一点
-
-    // 深色主题 ===================
-    // 主色
-    darkPrimary: '#ffcc66', // 主色
-    darkPrimaryHover: '#005600',  // 主色鼠标移上色
-    darkPrimaryPressed: '#0056b3',  // 主色按下色
-    darkPrimaryActivated: '#003a8c',  // 主色激活色
-    darkPrimaryDisable: '#005600',  // 主色禁用色
-    // 背景色
-    darkThemeBg1: '#000000',  // 背景色
-    darkThemeBg2: '#111111',  // 比上面浅一点
-    darkThemeBg3: '#222222',  // 比上面浅一点
-    darkThemeBg4: '#333333',  // 比上面浅一点
-    darkThemeBg5: '#222222',  // 比上面浅一点
-    // 文字色
-    darkThemeText1: '#ffffff',  // 正常文字
-    darkThemeText2: '#eeeeee',  // 比上面浅一点
-    darkThemeText3: '#dddddd',  // 比上面浅一点
-    darkThemeText4: '#999999',  // 比上面浅一点
-    darkThemeText5: '#666666',  // 比上面浅一点
-  },
-  // 定义间距
-  spacing: {
-    xxs: '4px',
-    xs: '8px',
-    sm: '12px',
-    md: '18px',
-    lg: '24px',
-    xl: '32px',
-    x2l: '48px',
-    x3l: '64px',
-    x4l: '80px',
-    x5l: '96px',
-    x6l: '120px',
-    x7l: '150px',
-    x8l: '180px',
-    x9l: '210px',
-  },
-  // 定义圆角
-  borderRadius: {
-    xs: '2px',
-    sm: '4px',
-    md: '8px',
-    lg: '12px',
-    xl: '16px',
-  },
-  // 定义圆角宽
-  borderWidth: {
-    xs: '1px',
-    sm: '2px',
-    md: '3px',
-    lg: '4px',
-    xl: '5px',
-  },
-  
-}
+    // 定义项目配色主色
+    colors: {
+        // 亮色主题 ===================
+        // 主色
+        primary: '#165dff', // 主色
+        primaryHover: '#4080ff', // 主色鼠标移上色
+        primaryPressed: '#0e42d2', // 主色按下色
+        primaryActivated: '#165dff', // 主色激活色
+        primaryDisable: '#94bfff', // 主色禁用色
+        // 背景色
+        themeBg1: '#ffffff', // 背景色
+        themeBg2: '#ffffff', // 比上面浅一点
+        themeBg3: '#f7f8fa', // 比上面浅一点
+        themeBg4: '#ffffff', // 比上面浅一点
+        themeBg5: '#ffffff', // 比上面浅一点
+        // 文字色
+        themeText1: '#1D2129', // 正常文字
+        themeText2: '#4E5969', // 比上面浅一点
+        themeText3: '#86909C', // 比上面浅一点
+        themeText4: '#C9CDD4', // 比上面浅一点
+        themeText5: '#eeeeee', // 比上面浅一点
+        // 填充颜色
+        themeFill1: 'rgb(var(--gray-1))', // 正常填充
+        themeFill2: 'rgb(var(--gray-2))', // 比上面浅一点
+        themeFill3: 'rgb(var(--gray-3))', // 比上面浅一点
+        themeFill4: 'rgb(var(--gray-4))', // 比上面浅一点
+        // 深色主题 ===================
+        // 主色
+        darkPrimary: '#3c7eff', // 主色
+        darkPrimaryHover: '#306fff', // 主色鼠标移上色
+        darkPrimaryPressed: '#689fff', // 主色按下色
+        darkPrimaryActivated: '#1d4dd2', // 主色激活色
+        darkPrimaryDisable: '#0e32a6', // 主色禁用色
+        // 背景色
+        darkThemeBg1: '#17171A', // 背景色
+        darkThemeBg2: '#232324', // 比上面浅一点
+        darkThemeBg3: '#2A2A2B', // 比上面浅一点
+        darkThemeBg4: '#313132', // 比上面浅一点
+        darkThemeBg5: '#373739', // 比上面浅一点
+        // 文字色
+        darkThemeText1: 'rgba(255, 255, 255, .9)', // 正常文字
+        darkThemeText2: 'rgba(255, 255, 255, .7)', // 比上面浅一点
+        darkThemeText3: 'rgba(255, 255, 255, .5)', // 比上面浅一点
+        darkThemeText4: 'rgba(255, 255, 255, .3)', // 比上面浅一点
+        darkThemeText5: '#666666', // 比上面浅一点
+        // 填充颜色
+        darkThemeFill1: 'rgba(255, 255, 255, .04)', // 正常填充
+        darkThemeFill2: 'rgba(255, 255, 255, .08)', // 比上面浅一点
+        darkThemeFill3: 'rgba(255, 255, 255, .12)', // 比上面浅一点
+        darkThemeFill4: 'rgba(255, 255, 255, .16)' // 比上面浅一点
+    },
+    // 定义间距
+    spacing: {
+        xxs: '4px',
+        xs: '8px',
+        sm: '12px',
+        md: '18px',
+        lg: '24px',
+        xl: '32px',
+        x2l: '48px',
+        x3l: '64px',
+        x4l: '80px',
+        x5l: '96px',
+        x6l: '120px',
+        x7l: '150px',
+        x8l: '180px',
+        x9l: '210px'
+    },
+    // 定义圆角
+    borderRadius: {
+        xs: '2px',
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px'
+    },
+    // 定义圆角宽
\ No newline at end of file
+    borderWidth: {
+        xs: '1px',
+        sm: '2px',
+        md: '3px',
+        lg: '4px',
+        xl: '5px'
+    }
+}

src/App.vue

 <template>
-  <a-config-provider :locale="localeVal">
-    <router-view />
-    <global-setting />
-  </a-config-provider>
+    <a-config-provider :locale="localeVal">
+        <router-view />
+        <global-setting />
+    </a-config-provider>
 </template>
 
 <script setup lang="ts">
-import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
-import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
+import enUS from '@arco-design/web-vue/es/locale/lang/en-us'
+import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn'
 
-import GlobalSetting from '@/components/global-setting/index.vue';
+import GlobalSetting from '@/components/global-setting/index.vue'
 
-import useLocale from '@/hooks/locale';
-import useAppStore from '@/store/app/index';
+import useLocale from '@/hooks/locale'
+import useAppStore from '@/store/app/index'
 
-import { activedTheme } from '../project.ui.config';
-import config from '../project.app.config';
+import { activedTheme } from '../project.ui.config'
+import config from '../project.app.config'
+import useUserStore from '@/store/user'
 
-const { changeTheme } = useAppStore();
+const { changeTheme } = useAppStore()
 
 // 国际化
-const { currentLocale, changeLocale } = useLocale();
+const { currentLocale } = useLocale()
 const localeVal = computed(() => {
-  switch (currentLocale.value) {
-    case 'zh-CN':
-      return zhCN;
-    case 'en-US':
-      return enUS;
-    default:
-      return zhCN;
-  }
-});
+    switch (currentLocale.value) {
+        case 'zh-CN':
+            return zhCN
+        case 'en-US':
+            return enUS
+        default:
+            return zhCN
+    }
+})
 
+const userStore = useUserStore()
 onMounted(() => {
-  changeTheme(activedTheme.value)
-  setTimeout(() => {
-    changeLocale('en-US')
-  }, 3000)
+    if (userStore.token) {
+        changeTheme(activedTheme.value)
+    }
 })
 
 watch(activedTheme, (newVal) => {
-  changeTheme(newVal)
+    changeTheme(newVal)
 })
 
 const router = useRouter()
 
 // @ts-ignore
+//全局前置守卫
 router.beforeEach(async (to, from, next) => {
-  // 动态标题
-  let pageTitle = !to.meta.hideBaseTitle ? config.baseTitle + ' - ' : ''
-  if(to.meta.title != '') pageTitle += to.meta.title
-  window.document.title = pageTitle
-  next()
+    const userStore = useUserStore()
+    const token = userStore.token
+    if (token) {
+        // 登录
+        if (to.name == 'Login') {
+            next({ path: './' })
+        } else {
+            next()
+        }
+    } else {
+        //未登录
+        if (to.name == 'Login') {
+            next()
+        } else {
+            next({ name: 'Login' })
+        }
+    }
 })
-
-</script>
+//全局后置守卫
+router.afterEach(async (to) => {
\ No newline at end of file
+    // 动态标题
+    let pageTitle = !to.meta.hideBaseTitle ? config.baseTitle + ' - ' : ''
+    if (to.meta.title != '') pageTitle += to.meta.title
+    window.document.title = pageTitle
+})
+</script>

src/api/alova-instance.ts

-import { createAlova } from "alova";
-import vueHook from "alova/vue";
-import GlobalFetch from "alova/GlobalFetch";
-import { API_URL, ApiConfig } from "../../project.app.config";
-
-import { createAlovaMockAdapter } from '@alova/mock';
-import mock from './mock';
+import { createAlova } from 'alova'
+import vueHook from 'alova/vue'
+import GlobalFetch from 'alova/GlobalFetch'
+import { API_URL, ApiConfig } from '../../project.app.config'
+import qs from 'qs'
+import { createAlovaMockAdapter } from '@alova/mock'
+import mock from './mock'
+import useUserStore from '@/store/user'
 
 // 创建模拟请求适配器
 const mockAdapter = createAlovaMockAdapter([mock], {
-  enable: true,
-  delay: ApiConfig.MOCK_DELAY,
-  httpAdapter: GlobalFetch(), // 无适配使用接口请求
-  mockRequestLogger: true,  // 是否打印mock接口请求信息
-});
+    enable: true,
+    delay: ApiConfig.MOCK_DELAY,
+    httpAdapter: GlobalFetch(), // 无适配使用接口请求
+    mockRequestLogger: true // 是否打印mock接口请求信息
+})
 
 // 创建实例
 export const alova = createAlova({
-  baseURL: API_URL,
-  statesHook: vueHook,
-  shareRequest: true,
-
-  // 通过环境变量控制生产环境下，不会将mock相关代码打包进去
-  requestAdapter: process.env.NODE_ENV === 'development' ? mockAdapter : GlobalFetch(),
+    baseURL: API_URL,
+    statesHook: vueHook,
+    shareRequest: true,
 
-  // 请求拦截器
-  beforeRequest(method) {
-    // 设置请求头
-    method.config.headers = {
-      "Content-Type": "application/json;charset=UTF-8",
-    }
-    // method.config.headers.Authorization = `Bearer ${localStorage.getItem("token")}`;
-  },
+    // 通过环境变量控制生产环境下，不会将mock相关代码打包进去
+    requestAdapter: process.env.NODE_ENV === 'development' ? mockAdapter : GlobalFetch(),
 
-  // 响应拦截器
-  responded: {
-    // 当使用GlobalFetch请求适配器时，第一个参数接收Response对象
-    onSuccess: async (response) => {
-      if(response.status >= 400){
-        throw new Error(response.statusText);
-      }
-      const json = await response.json();
-      if(json.code === 200) {
-        return json["data"];
-      } else {
-        return json;
-      }
+    // 请求拦截器
+    beforeRequest(method) {
+        // 设置请求头application/json;charset=UTF-8
+        method.config.headers = {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+        //转换成表单数据
+        method.data = qs.stringify(method.data)
+        //加入token
+        const userStore = useUserStore()
+        if (userStore.token) {
+            method.config.headers.Authorization = `Bearer ${userStore.token}`
+        }
     },
-    // 请求错误时将会进入该拦截器
-    onError(error) {
-      console.log(error);
-      throw error;
-    },
-    // 当你需要在请求不论是成功、失败、还是命中缓存都需要执行的逻辑时，可以在创建alova实例时指定全局的`onComplete`拦截器，例如关闭请求 loading 状态。
-    onComplete:async () => {
-      // 处理响应完成后的逻辑
-      // console.log("执行完成");
+
+    // 响应拦截器
+    responded: {
+        // 当使用GlobalFetch请求适配器时，第一个参数接收Response对象
+        onSuccess: async (response) => {
+            if (response.status >= 400) {
+                throw new Error(response.statusText)
+            }
+            if (response.url.endsWith('/admin/getCaptcha')) {
+                return await response.blob()
+            } else {
+                return await response.json()
+            }
+            // const json = await response.json()
+            // if (json.code === 200) {
+            //     return json['data']
+            // } else {
+            //     return json
+            // }
+        },
+        // 请求错误时将会进入该拦截器
+        onError(error) {
+            console.log(error)
+            throw error
+        },
+        // 当你需要在请求不论是成功、失败、还是命中缓存都需要执行的逻辑时，可以在创建alova实例时指定全局的`onComplete`拦截器，例如关闭请求 loading 状态。
+        onComplete: async () => {
+            // 处理响应完成后的逻辑
+            // console.log("执行完成");
+        }
     }
-  }
-});
+})
\ No newline at end of file

src/assets/css/arco.style.css

 body {
-  background-color: var(--color-bg-1);
-  color: var(--color-text-1);
+    background-color: var(--color-bg-3);
+    color: var(--color-text-1);
+}
+.arco-notification-content {
+    line-height: 24px;
 }

src/assets/css/style.css

-html,body,#app{width:100%;height:100%;overflow:hidden;}
-div{box-sizing:border-box;}
+html,
+body,
\ No newline at end of file
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+html,
+body,
+#app {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+div {
+    box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+    border-radius: 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    width: 7px;
+    height: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    background-color: var(--color-fill-4);
+    background-clip: padding-box;
+    min-height: 28px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    border-radius: 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    background-color: var(--color-fill-4);
+}

src/assets/css/tailwind.css

 @tailwind base;
 @tailwind components;
+@layer components {
+    .flex-center {
+        @apply flex items-center justify-center;
+    }
+    .g-block {
+        @apply py-4 flex flex-col rounded bg-theme-bg2 h-full;
+    }
+}
+
 @tailwind utilities;
 
 /* 适配主题 */
 /* 主题背景 */
-.bg-primary{@apply bg-primary-light dark:bg-primary-dark}
-.bg-primary-hover{@apply bg-primary-hover-light dark:bg-primary-hover-dark}
-.bg-primary-pressed{@apply bg-primary-pressed-light dark:bg-primary-pressed-dark}
-.bg-primary-activated{@apply bg-primary-activated-light dark:bg-primary-activated-dark}
-.bg-primary-disable{@apply bg-primary-disable-light dark:bg-primary-disable-dark}
-.bg-theme-bg1{@apply bg-theme-bg1-light dark:bg-theme-bg1-dark}
-.bg-theme-bg2{@apply bg-theme-bg2-light dark:bg-theme-bg2-dark}
-.bg-theme-bg3{@apply bg-theme-bg3-light dark:bg-theme-bg3-dark}
-.bg-theme-bg4{@apply bg-theme-bg4-light dark:bg-theme-bg4-dark}
-.bg-theme-bg5{@apply bg-theme-bg5-light dark:bg-theme-bg5-dark}
+/* primary-6 */
+.bg-primary {
+    @apply bg-primary-light dark:bg-primary-dark;
+}
+/* primary-5 */
+.bg-primary-hover {
+    @apply bg-primary-hover-light dark:bg-primary-hover-dark;
+}
+/* primary-7 */
+.bg-primary-pressed {
+    @apply bg-primary-pressed-light dark:bg-primary-pressed-dark;
+}
+/* primary-4 */
+.bg-primary-activated {
+    @apply bg-primary-activated-light dark:bg-primary-activated-dark;
+}
+/* primary-3,primary-2,primary-1 */
+.bg-primary-disable {
+    @apply bg-primary-disable-light dark:bg-primary-disable-dark;
+}
+/* color-bg-1 */
+.bg-theme-bg1 {
+    @apply bg-theme-bg1-light dark:bg-theme-bg1-dark;
+}
+/* color-bg-2 */
+.bg-theme-bg2 {
+    @apply bg-theme-bg2-light dark:bg-theme-bg2-dark;
+}
+/* color-bg-3 */
+.bg-theme-bg3 {
+    @apply bg-theme-bg3-light dark:bg-theme-bg3-dark;
+}
+/* color-bg-4 */
+.bg-theme-bg4 {
+    @apply bg-theme-bg4-light dark:bg-theme-bg4-dark;
+}
+/* color-bg-5 */
+.bg-theme-bg5 {
+    @apply bg-theme-bg5-light dark:bg-theme-bg5-dark;
+}
+/* color-fill-1 */
+.bg-fill-bg1 {
+    @apply bg-theme-fill1-light dark:bg-theme-fill1-dark;
+}
+/* color-fill-2 */
+.bg-fill-bg2 {
+    @apply bg-theme-fill2-light dark:bg-theme-fill2-dark;
+}
+/* color-fill-3 */
+.bg-fill-bg3 {
+    @apply bg-theme-fill3-light dark:bg-theme-fill3-dark;
+}
+/* color-fill-4 */
+.bg-fill-bg4 {
+    @apply bg-theme-fill4-light dark:bg-theme-fill4-dark;
+}
 /* 主题文本色 */
-.text-primary{@apply text-primary-light dark:text-primary-dark}
-.text-primary-hover{@apply text-primary-hover-light dark:text-primary-hover-dark}
-.text-primary-pressed{@apply text-primary-pressed-light dark:text-primary-pressed-dark}
-.text-primary-activated{@apply text-primary-activated-light dark:text-primary-activated-dark}
-.text-primary-disable{@apply text-primary-disable-light dark:text-primary-disable-dark}
-.text-theme-text1{@apply text-theme-text1-light dark:text-theme-text1-dark}
-.text-theme-text2{@apply text-theme-text2-light dark:text-theme-text2-dark}
-.text-theme-text3{@apply text-theme-text3-light dark:text-theme-text3-dark}
-.text-theme-text4{@apply text-theme-text4-light dark:text-theme-text4-dark}
-.text-theme-text5{@apply text-theme-text5-light dark:text-theme-text5-dark}
+/* primary-6 */
+.text-primary {
+    @apply text-primary-light dark:text-primary-dark;
+}
+/* primary-5 */
+.text-primary-hover {
+    @apply text-primary-hover-light dark:text-primary-hover-dark;
+}
+/* primary-7 */
+.text-primary-pressed {
+    @apply text-primary-pressed-light dark:text-primary-pressed-dark;
+}
+/* primary-4 */
+.text-primary-activated {
+    @apply text-primary-activated-light dark:text-primary-activated-dark;
+}
+/* primary-3,primary-2,primary-1 */
+.text-primary-disable {
+    @apply text-primary-disable-light dark:text-primary-disable-dark;
+}
+/* color-text-1 */
+.text-theme-text1 {
+    @apply text-theme-text1-light dark:text-theme-text1-dark;
+}
+/* color-text-2 */
+.text-theme-text2 {
+    @apply text-theme-text2-light dark:text-theme-text2-dark;
+}
+/* color-text-3 */
+.text-theme-text3 {
+    @apply text-theme-text3-light dark:text-theme-text3-dark;
+}
+/* color-text-4 */
+.text-theme-text4 {
+    @apply text-theme-text4-light dark:text-theme-text4-dark;
+}
+/* color-text-5 */
+.text-theme-text5 {
+    @apply text-theme-text5-light dark:text-theme-text5-dark;
+}

src/assets/fonts/icons/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/fonts/icons/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4520078" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6f0;</span>
+                <div class="name">question-circle</div>
+                <div class="code-name">&amp;#xe6f0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6f1;</span>
+                <div class="name">safe</div>
+                <div class="code-name">&amp;#xe6f1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e5;</span>
+                <div class="name">mic-0ff</div>
+                <div class="code-name">&amp;#xe6e5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e6;</span>
+                <div class="name">record-stop</div>
+                <div class="code-name">&amp;#xe6e6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e7;</span>
+                <div class="name">swap</div>
+                <div class="code-name">&amp;#xe6e7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e8;</span>
+                <div class="name">shared screen</div>
+                <div class="code-name">&amp;#xe6e8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e9;</span>
+                <div class="name">phone-hangup</div>
+                <div class="code-name">&amp;#xe6e9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ea;</span>
+                <div class="name">screenshot</div>
+                <div class="code-name">&amp;#xe6ea;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6eb;</span>
+                <div class="name">record</div>
+                <div class="code-name">&amp;#xe6eb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ec;</span>
+                <div class="name">mic</div>
+                <div class="code-name">&amp;#xe6ec;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ed;</span>
+                <div class="name">phone</div>
+                <div class="code-name">&amp;#xe6ed;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ee;</span>
+                <div class="name">fullscreen-exit</div>
+                <div class="code-name">&amp;#xe6ee;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ef;</span>
+                <div class="name">fullscreen</div>
+                <div class="code-name">&amp;#xe6ef;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e3;</span>
+                <div class="name">download</div>
+                <div class="code-name">&amp;#xe6e3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e4;</span>
+                <div class="name">calendar</div>
+                <div class="code-name">&amp;#xe6e4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6da;</span>
+                <div class="name">pdf</div>
+                <div class="code-name">&amp;#xe6da;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6db;</span>
+                <div class="name">image</div>
+                <div class="code-name">&amp;#xe6db;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6dc;</span>
+                <div class="name">view-grid</div>
+                <div class="code-name">&amp;#xe6dc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6dd;</span>
+                <div class="name">search</div>
+                <div class="code-name">&amp;#xe6dd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6de;</span>
+                <div class="name">phone</div>
+                <div class="code-name">&amp;#xe6de;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6df;</span>
+                <div class="name">plus-circle</div>
+                <div class="code-name">&amp;#xe6df;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e0;</span>
+                <div class="name">video</div>
+                <div class="code-name">&amp;#xe6e0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e1;</span>
+                <div class="name">view-gallery</div>
+                <div class="code-name">&amp;#xe6e1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e2;</span>
+                <div class="name">edit</div>
+                <div class="code-name">&amp;#xe6e2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d0;</span>
+                <div class="name">writing</div>
+                <div class="code-name">&amp;#xe6d0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d1;</span>
+                <div class="name">user-group</div>
+                <div class="code-name">&amp;#xe6d1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d2;</span>
+                <div class="name">mic-off</div>
+                <div class="code-name">&amp;#xe6d2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d3;</span>
+                <div class="name">wifi</div>
+                <div class="code-name">&amp;#xe6d3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d4;</span>
+                <div class="name">file</div>
+                <div class="code-name">&amp;#xe6d4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d5;</span>
+                <div class="name">language</div>
+                <div class="code-name">&amp;#xe6d5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d6;</span>
+                <div class="name">user</div>
+                <div class="code-name">&amp;#xe6d6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d7;</span>
+                <div class="name">desktop</div>
+                <div class="code-name">&amp;#xe6d7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d8;</span>
+                <div class="name">mic</div>
+                <div class="code-name">&amp;#xe6d8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6d9;</span>
+                <div class="name">camera</div>
+                <div class="code-name">&amp;#xe6d9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c6;</span>
+                <div class="name">menu-fold</div>
+                <div class="code-name">&amp;#xe6c6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c7;</span>
+                <div class="name">menu-unfold</div>
+                <div class="code-name">&amp;#xe6c7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c8;</span>
+                <div class="name">up-circle</div>
+                <div class="code-name">&amp;#xe6c8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c9;</span>
+                <div class="name">right-circle</div>
+                <div class="code-name">&amp;#xe6c9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ca;</span>
+                <div class="name">left-circle</div>
+                <div class="code-name">&amp;#xe6ca;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6cb;</span>
+                <div class="name">caret-up</div>
+                <div class="code-name">&amp;#xe6cb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6cc;</span>
+                <div class="name">caret-down</div>
+                <div class="code-name">&amp;#xe6cc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6cd;</span>
+                <div class="name">caret-right</div>
+                <div class="code-name">&amp;#xe6cd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ce;</span>
+                <div class="name">down-circle</div>
+                <div class="code-name">&amp;#xe6ce;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6cf;</span>
+                <div class="name">caret-left</div>
+                <div class="code-name">&amp;#xe6cf;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: 
+       url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-question-circle"></span>
+            <div class="name">
+              question-circle
+            </div>
+            <div class="code-name">.icon-question-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-safe"></span>
+            <div class="name">
+              safe
+            </div>
+            <div class="code-name">.icon-safe
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-mic-0ff"></span>
+            <div class="name">
+              mic-0ff
+            </div>
+            <div class="code-name">.icon-mic-0ff
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-record-stop"></span>
+            <div class="name">
+              record-stop
+            </div>
+            <div class="code-name">.icon-record-stop
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-swap"></span>
+            <div class="name">
+              swap
+            </div>
+            <div class="code-name">.icon-swap
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-sharedscreen"></span>
+            <div class="name">
+              shared screen
+            </div>
+            <div class="code-name">.icon-a-sharedscreen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-phone-hangup"></span>
+            <div class="name">
+              phone-hangup
+            </div>
+            <div class="code-name">.icon-phone-hangup
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-screenshot"></span>
+            <div class="name">
+              screenshot
+            </div>
+            <div class="code-name">.icon-screenshot
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-record"></span>
+            <div class="name">
+              record
+            </div>
+            <div class="code-name">.icon-record
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-mic1"></span>
+            <div class="name">
+              mic
+            </div>
+            <div class="code-name">.icon-mic1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-phone1"></span>
+            <div class="name">
+              phone
+            </div>
+            <div class="code-name">.icon-phone1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fullscreen-exit"></span>
+            <div class="name">
+              fullscreen-exit
+            </div>
+            <div class="code-name">.icon-fullscreen-exit
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fullscreen"></span>
+            <div class="name">
+              fullscreen
+            </div>
+            <div class="code-name">.icon-fullscreen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-download"></span>
+            <div class="name">
+              download
+            </div>
+            <div class="code-name">.icon-download
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-calendar"></span>
+            <div class="name">
+              calendar
+            </div>
+            <div class="code-name">.icon-calendar
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-pdf"></span>
+            <div class="name">
+              pdf
+            </div>
+            <div class="code-name">.icon-pdf
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-image"></span>
+            <div class="name">
+              image
+            </div>
+            <div class="code-name">.icon-image
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-view-grid"></span>
+            <div class="name">
+              view-grid
+            </div>
+            <div class="code-name">.icon-view-grid
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-search"></span>
+            <div class="name">
+              search
+            </div>
+            <div class="code-name">.icon-search
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-phone"></span>
+            <div class="name">
+              phone
+            </div>
+            <div class="code-name">.icon-phone
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-plus-circle"></span>
+            <div class="name">
+              plus-circle
+            </div>
+            <div class="code-name">.icon-plus-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-video"></span>
+            <div class="name">
+              video
+            </div>
+            <div class="code-name">.icon-video
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-view-gallery"></span>
+            <div class="name">
+              view-gallery
+            </div>
+            <div class="code-name">.icon-view-gallery
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-edit"></span>
+            <div class="name">
+              edit
+            </div>
+            <div class="code-name">.icon-edit
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-writing"></span>
+            <div class="name">
+              writing
+            </div>
+            <div class="code-name">.icon-writing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-user-group"></span>
+            <div class="name">
+              user-group
+            </div>
+            <div class="code-name">.icon-user-group
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-mic-off"></span>
+            <div class="name">
+              mic-off
+            </div>
+            <div class="code-name">.icon-mic-off
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wifi"></span>
+            <div class="name">
+              wifi
+            </div>
+            <div class="code-name">.icon-wifi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-file"></span>
+            <div class="name">
+              file
+            </div>
+            <div class="code-name">.icon-file
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-language"></span>
+            <div class="name">
+              language
+            </div>
+            <div class="code-name">.icon-language
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-user"></span>
+            <div class="name">
+              user
+            </div>
+            <div class="code-name">.icon-user
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-desktop"></span>
+            <div class="name">
+              desktop
+            </div>
+            <div class="code-name">.icon-desktop
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-mic"></span>
+            <div class="name">
+              mic
+            </div>
+            <div class="code-name">.icon-mic
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-camera"></span>
+            <div class="name">
+              camera
+            </div>
+            <div class="code-name">.icon-camera
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-menu-fold"></span>
+            <div class="name">
+              menu-fold
+            </div>
+            <div class="code-name">.icon-menu-fold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-menu-unfold"></span>
+            <div class="name">
+              menu-unfold
+            </div>
+            <div class="code-name">.icon-menu-unfold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-up-circle"></span>
+            <div class="name">
+              up-circle
+            </div>
+            <div class="code-name">.icon-up-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-right-circle"></span>
+            <div class="name">
+              right-circle
+            </div>
+            <div class="code-name">.icon-right-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-left-circle"></span>
+            <div class="name">
+              left-circle
+            </div>
+            <div class="code-name">.icon-left-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caret-up"></span>
+            <div class="name">
+              caret-up
+            </div>
+            <div class="code-name">.icon-caret-up
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caret-down"></span>
+            <div class="name">
+              caret-down
+            </div>
+            <div class="code-name">.icon-caret-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caret-right"></span>
+            <div class="name">
+              caret-right
+            </div>
+            <div class="code-name">.icon-caret-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-down-circle"></span>
+            <div class="name">
+              down-circle
+            </div>
+            <div class="code-name">.icon-down-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caret-left"></span>
+            <div class="name">
+              caret-left
+            </div>
+            <div class="code-name">.icon-caret-left
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-question-circle"></use>
+                </svg>
+                <div class="name">question-circle</div>
+                <div class="code-name">#icon-question-circle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-safe"></use>
+                </svg>
+                <div class="name">safe</div>
+                <div class="code-name">#icon-safe</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-mic-0ff"></use>
+                </svg>
+                <div class="name">mic-0ff</div>
+                <div class="code-name">#icon-mic-0ff</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-record-stop"></use>
+                </svg>
+                <div class="name">record-stop</div>
+                <div class="code-name">#icon-record-stop</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-swap"></use>
+                </svg>
+                <div class="name">swap</div>
+                <div class="code-name">#icon-swap</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-sharedscreen"></use>
+                </svg>
+                <div class="name">shared screen</div>
+                <div class="code-name">#icon-a-sharedscreen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-phone-hangup"></use>
+                </svg>
+                <div class="name">phone-hangup</div>
+                <div class="code-name">#icon-phone-hangup</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-screenshot"></use>
+                </svg>
+                <div class="name">screenshot</div>
+                <div class="code-name">#icon-screenshot</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-record"></use>
+                </svg>
+                <div class="name">record</div>
+                <div class="code-name">#icon-record</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-mic1"></use>
+                </svg>
+                <div class="name">mic</div>
+                <div class="code-name">#icon-mic1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-phone1"></use>
+                </svg>
+                <div class="name">phone</div>
+                <div class="code-name">#icon-phone1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fullscreen-exit"></use>
+                </svg>
+                <div class="name">fullscreen-exit</div>
+                <div class="code-name">#icon-fullscreen-exit</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fullscreen"></use>
+                </svg>
+                <div class="name">fullscreen</div>
+                <div class="code-name">#icon-fullscreen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-download"></use>
+                </svg>
+                <div class="name">download</div>
+                <div class="code-name">#icon-download</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-calendar"></use>
+                </svg>
+                <div class="name">calendar</div>
+                <div class="code-name">#icon-calendar</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-pdf"></use>
+                </svg>
+                <div class="name">pdf</div>
+                <div class="code-name">#icon-pdf</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-image"></use>
+                </svg>
+                <div class="name">image</div>
+                <div class="code-name">#icon-image</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-view-grid"></use>
+                </svg>
+                <div class="name">view-grid</div>
+                <div class="code-name">#icon-view-grid</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-search"></use>
+                </svg>
+                <div class="name">search</div>
+                <div class="code-name">#icon-search</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-phone"></use>
+                </svg>
+                <div class="name">phone</div>
+                <div class="code-name">#icon-phone</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-plus-circle"></use>
+                </svg>
+                <div class="name">plus-circle</div>
+                <div class="code-name">#icon-plus-circle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-video"></use>
+                </svg>
+                <div class="name">video</div>
+                <div class="code-name">#icon-video</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-view-gallery"></use>
+                </svg>
+                <div class="name">view-gallery</div>
+                <div class="code-name">#icon-view-gallery</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-edit"></use>
+                </svg>
+                <div class="name">edit</div>
+                <div class="code-name">#icon-edit</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-writing"></use>
+                </svg>
+                <div class="name">writing</div>
+                <div class="code-name">#icon-writing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-user-group"></use>
+                </svg>
+                <div class="name">user-group</div>
+                <div class="code-name">#icon-user-group</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-mic-off"></use>
+                </svg>
+                <div class="name">mic-off</div>
+                <div class="code-name">#icon-mic-off</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wifi"></use>
+                </svg>
+                <div class="name">wifi</div>
+                <div class="code-name">#icon-wifi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-file"></use>
+                </svg>
+                <div class="name">file</div>
+                <div class="code-name">#icon-file</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-language"></use>
+                </svg>
+                <div class="name">language</div>
+                <div class="code-name">#icon-language</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-user"></use>
+                </svg>
+                <div class="name">user</div>
+                <div class="code-name">#icon-user</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-desktop"></use>
+                </svg>
+                <div class="name">desktop</div>
+                <div class="code-name">#icon-desktop</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-mic"></use>
+                </svg>
+                <div class="name">mic</div>
+                <div class="code-name">#icon-mic</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-camera"></use>
+                </svg>
+                <div class="name">camera</div>
+                <div class="code-name">#icon-camera</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-menu-fold"></use>
+                </svg>
+                <div class="name">menu-fold</div>
+                <div class="code-name">#icon-menu-fold</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-menu-unfold"></use>
+                </svg>
+                <div class="name">menu-unfold</div>
+                <div class="code-name">#icon-menu-unfold</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-up-circle"></use>
+                </svg>
+                <div class="name">up-circle</div>
+                <div class="code-name">#icon-up-circle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-right-circle"></use>
+                </svg>
+                <div class="name">right-circle</div>
+                <div class="code-name">#icon-right-circle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-left-circle"></use>
+                </svg>
+                <div class="name">left-circle</div>
+                <div class="code-name">#icon-left-circle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caret-up"></use>
+                </svg>
+                <div class="name">caret-up</div>
+                <div class="code-name">#icon-caret-up</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caret-down"></use>
+                </svg>
+                <div class="name">caret-down</div>
+                <div class="code-name">#icon-caret-down</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caret-right"></use>
+                </svg>
+                <div class="name">caret-right</div>
+                <div class="code-name">#icon-caret-right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-down-circle"></use>
+                </svg>
+                <div class="name">down-circle</div>
+                <div class="code-name">#icon-down-circle</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caret-left"></use>
+                </svg>
+                <div class="name">caret-left</div>
+                <div class="code-name">#icon-caret-left</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/fonts/icons/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 4520078 */
+  src: 
+       url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-question-circle:before {
+  content: "\e6f0";
+}
+
+.icon-safe:before {
+  content: "\e6f1";
+}
+
+.icon-mic-0ff:before {
+  content: "\e6e5";
+}
+
+.icon-record-stop:before {
+  content: "\e6e6";
+}
+
+.icon-swap:before {
+  content: "\e6e7";
+}
+
+.icon-a-sharedscreen:before {
+  content: "\e6e8";
+}
+
+.icon-phone-hangup:before {
+  content: "\e6e9";
+}
+
+.icon-screenshot:before {
+  content: "\e6ea";
+}
+
+.icon-record:before {
+  content: "\e6eb";
+}
+
+.icon-mic1:before {
+  content: "\e6ec";
+}
+
+.icon-phone1:before {
+  content: "\e6ed";
+}
+
+.icon-fullscreen-exit:before {
+  content: "\e6ee";
+}
+
+.icon-fullscreen:before {
+  content: "\e6ef";
+}
+
+.icon-download:before {
+  content: "\e6e3";
+}
+
+.icon-calendar:before {
+  content: "\e6e4";
+}
+
+.icon-pdf:before {
+  content: "\e6da";
+}
+
+.icon-image:before {
+  content: "\e6db";
+}
+
+.icon-view-grid:before {
+  content: "\e6dc";
+}
+
+.icon-search:before {
+  content: "\e6dd";
+}
+
+.icon-phone:before {
+  content: "\e6de";
+}
+
+.icon-plus-circle:before {
+  content: "\e6df";
+}
+
+.icon-video:before {
+  content: "\e6e0";
+}
+
+.icon-view-gallery:before {
+  content: "\e6e1";
+}
+
+.icon-edit:before {
+  content: "\e6e2";
+}
+
+.icon-writing:before {
+  content: "\e6d0";
+}
+
+.icon-user-group:before {
+  content: "\e6d1";
+}
+
+.icon-mic-off:before {
+  content: "\e6d2";
+}
+
+.icon-wifi:before {
+  content: "\e6d3";
+}
+
+.icon-file:before {
+  content: "\e6d4";
+}
+
+.icon-language:before {
+  content: "\e6d5";
+}
+
+.icon-user:before {
+  content: "\e6d6";
+}
+
+.icon-desktop:before {
+  content: "\e6d7";
+}
+
+.icon-mic:before {
+  content: "\e6d8";
+}
+
+.icon-camera:before {
+  content: "\e6d9";
+}
+
+.icon-menu-fold:before {
+  content: "\e6c6";
+}
+
+.icon-menu-unfold:before {
+  content: "\e6c7";
+}
+
+.icon-up-circle:before {
+  content: "\e6c8";
+}
+
+.icon-right-circle:before {
+  content: "\e6c9";
+}
+
+.icon-left-circle:before {
+  content: "\e6ca";
+}
+
+.icon-caret-up:before {
+  content: "\e6cb";
+}
+
+.icon-caret-down:before {
+  content: "\e6cc";
+}
+
+.icon-caret-right:before {
+  content: "\e6cd";
+}
+
+.icon-down-circle:before {
+  content: "\e6ce";
+}
+
+.icon-caret-left:before {
+  content: "\e6cf";
+}
+

src/assets/fonts/icons/iconfont.js

+window._iconfont_svg_string_4520078='<svg><symbol id="icon-question-circle" viewBox="0 0 1024 1024"><path d="M170.666667 512c0-188.522667 152.810667-341.333333 341.333333-341.333333s341.333333 152.810667 341.333333 341.333333-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512zM512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m-72.533333 340.885334v-9.856a50.56 50.56 0 0 1 13.568-34.453334c8.64-9.002667 25.450667-19.242667 58.709333-19.242666 31.253333 0 52.970667 14.933333 64.064 31.850666 11.818667 18.090667 9.493333 33.258667 3.882667 40.832-7.018667 9.450667-15.701333 18.197333-26.218667 27.648-3.2 2.88-7.125333 6.314667-11.349333 9.984-7.573333 6.570667-16.021333 13.952-22.784 20.373334C495.381333 516.16 469.333333 547.968 469.333333 597.333333l0.149334 21.610667 85.333333-0.554667-0.149333-21.162666c0.042667-14.592 6.016-25.429333 23.509333-42.048 5.866667-5.589333 11.136-10.176 17.194667-15.402667 4.48-3.84 9.344-8.085333 15.189333-13.354667 12.16-10.944 25.728-24.106667 37.696-40.277333 32.341333-43.669333 24.789333-98.858667-1.066667-138.346667C620.650667 307.157333 572.288 277.333333 511.765333 277.333333c-52.352 0-92.949333 16.938667-120.362666 45.589334-26.666667 27.882667-37.141333 63.018667-37.248 93.226666v10.069334h85.333333zM469.482667 661.333333v85.504h85.333333V661.333333h-85.333333z"  ></path></symbol><symbol id="icon-safe" viewBox="0 0 1024 1024"><path d="M512 78.848l21.162667 12.096c69.717333 39.850667 150.677333 65.344 215.466666 80.896 32.149333 7.722667 59.776 12.864 79.274667 16.042667a824.170667 824.170667 0 0 0 28.437333 4.16l1.386667 0.170666 0.32 0.042667L896 196.48v361.706667l-0.576 3.498666-42.090667-7.04c42.090667 7.04 42.069333 7.04 42.069334 7.082667v0.042667l-0.021334 0.128-0.064 0.32-0.149333 0.917333-0.576 2.922667c-0.490667 2.410667-1.216 5.76-2.218667 9.898666a395.093333 395.093333 0 0 1-10.005333 33.856 495.637333 495.637333 0 0 1-51.797333 106.645334c-52.736 82.133333-146.069333 174.890667-306.773334 221.12l-11.797333 3.392-11.797333-3.413334c-160.704-46.208-254.037333-138.986667-306.773334-221.098666a495.616 495.616 0 0 1-51.797333-106.666667 394.88 394.88 0 0 1-10.005333-33.834667 262.314667 262.314667 0 0 1-2.773334-12.8l-0.170666-0.938666-0.064-0.32-0.021334-0.128v-0.042667c0-0.021333 0-0.042667 42.069334-7.061333l-42.090667 7.018666L128 558.186667V196.48l37.973333-4.224 0.298667-0.042667 1.386667-0.170666a826.026667 826.026667 0 0 0 28.437333-4.16c19.498667-3.2 47.146667-8.32 79.274667-16.042667 64.789333-15.552 145.749333-41.045333 215.466666-80.896L512 78.848z m-298.666667 192.682667v278.976a309.12 309.12 0 0 0 9.045334 31.701333c7.765333 22.72 21.056 54.186667 42.858666 88.128 42.026667 65.429333 116.16 141.034667 246.762667 181.696 130.602667-40.661333 204.757333-116.266667 246.762667-181.696a410.176 410.176 0 0 0 42.88-88.128A309.930667 309.930667 0 0 0 810.666667 550.506667V271.530667c-20.906667-3.498667-49.28-8.874667-81.962667-16.704C666.176 239.786667 586.026667 215.338667 512 176.618667c-74.026667 38.72-154.176 63.189333-216.704 78.208a1209.173333 1209.173333 0 0 1-81.962667 16.704z m517.098667 146.133333L486.933333 661.205333 328.746667 503.04l60.352-60.352 97.834666 97.834667 183.146667-183.146667 60.352 60.330667z"  ></path></symbol><symbol id="icon-mic-0ff" viewBox="0 0 1024 1024"><path d="M757.333333 637.866667L695.466667 576c5.696-9.962667 10.858667-20.266667 15.488-30.933333a149.546667 149.546667 0 0 0 10.112-34.133334c2.837333-12.096 8.362667-22.037333 16.554666-29.866666S755.946667 469.333333 768 469.333333c12.096 0 22.037333 4.266667 29.866667 12.8 7.829333 8.533333 11.029333 18.837333 9.6 30.933334a294.186667 294.186667 0 0 1-18.133334 65.621333c-8.533333 20.992-19.2 40.725333-32 59.178667z m-125.866666-128L384 262.4V213.333333c0-35.562667 12.437333-65.770667 37.333333-90.666666C446.229333 97.770667 476.437333 85.333333 512 85.333333c35.562667 0 65.770667 12.437333 90.666667 37.333334C627.562667 147.562667 640 177.770667 640 213.333333v256c0 7.829333-0.874667 14.933333-2.645333 21.333334-1.770667 6.4-3.733333 12.8-5.888 19.2zM469.333333 853.333333v-89.6c-65.429333-8.533333-121.408-35.904-167.978666-82.133333s-74.837333-102.4-84.821334-168.533333c-1.429333-12.096 1.770667-22.4 9.6-30.933334 7.829333-8.533333 17.770667-12.8 29.866667-12.8s22.229333 4.096 30.421333 12.288A61.866667 61.866667 0 0 1 302.933333 512c9.962667 49.770667 34.666667 90.666667 74.154667 122.666667C416.554667 666.666667 461.546667 682.666667 512 682.666667a210.432 210.432 0 0 0 68.821333-11.178667A208.426667 208.426667 0 0 0 640 640l60.8 60.8a319.018667 319.018667 0 0 1-67.754667 41.088A274.56 274.56 0 0 1 554.666667 763.733333V853.333333c0 12.096-4.096 22.229333-12.288 30.421334-8.192 8.192-18.325333 12.266667-30.378667 12.245333-12.096 0-22.208-4.096-30.378667-12.288-8.170667-8.192-12.266667-18.325333-12.288-30.378667z m345.6 81.066667l-725.333333-725.333333c-7.829333-7.829333-11.733333-17.770667-11.733333-29.866667s3.904-22.037333 11.733333-29.866667c7.829333-7.829333 17.770667-11.733333 29.866667-11.733333S141.504 141.504 149.333333 149.333333l725.333334 725.333334c7.829333 7.829333 11.733333 17.770667 11.733333 29.866666s-3.904 22.037333-11.733333 29.866667c-7.829333 7.829333-17.770667 11.733333-29.866667 11.733333s-22.037333-3.904-29.866667-11.733333z"  ></path></symbol><symbol id="icon-record-stop" viewBox="0 0 1024 1024"><path d="M512 170.666667C323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333 341.333333-152.810667 341.333333-341.333333S700.522667 170.666667 512 170.666667zM85.333333 512C85.333333 276.352 276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512z m341.333334-149.333333a64 64 0 0 0-64 64v170.666666a64 64 0 0 0 64 64h170.666666a64 64 0 0 0 64-64v-170.666666a64 64 0 0 0-64-64h-170.666666z"  ></path></symbol><symbol id="icon-swap" viewBox="0 0 1024 1024"><path d="M853.333333 746.666667v149.333333c0 23.466667-19.2 42.666667-42.666666 42.666667C410.026667 938.666667 85.333333 613.973333 85.333333 213.333333c0-23.466667 19.2-42.666667 42.666667-42.666666h149.333333c23.466667 0 42.666667 19.2 42.666667 42.666666 0 53.333333 8.533333 104.533333 24.32 152.32 4.693333 14.933333 1.28 31.573333-10.666667 42.666667l-93.866666 94.293333a641.92 641.92 0 0 0 281.173333 281.173334l93.866667-93.866667c11.946667-11.52 28.586667-14.933333 43.52-10.24C706.133333 695.466667 757.333333 704 810.666667 704c23.466667 0 42.666667 19.2 42.666666 42.666667z m-170.666666-426.666667h-149.333334L768 85.333333l-42.666667-42.666666-234.666666 234.666666V128h-64v256h256v-64z m42.666666-64v64h149.333334L640 554.666667l42.666667 42.666666 234.666666-234.666666v149.333333h64V256H725.333333z"  ></path></symbol><symbol id="icon-a-sharedscreen" viewBox="0 0 1024 1024"><path d="M149.333333 149.333333a85.333333 85.333333 0 0 0-85.333333 85.333334v439.466666a85.333333 85.333333 0 0 0 85.333333 85.333334h150.613334a42.666667 42.666667 0 0 0 0-85.333334H149.333333V234.666667h725.333334v439.466666h-166.4a42.666667 42.666667 0 0 0 0 85.333334H874.666667a85.333333 85.333333 0 0 0 85.333333-85.333334V234.666667a85.333333 85.333333 0 0 0-85.333333-85.333334H149.333333z m189.781334 738.986667h345.770666c24.533333 0 36.864-29.866667 19.626667-47.530667L532.053333 656.426667a27.413333 27.413333 0 0 0-40.106666 0l-172.458667 184.362666c-17.237333 17.621333-4.864 47.530667 19.626667 47.530667z"  ></path></symbol><symbol id="icon-phone-hangup" viewBox="0 0 1024 1024"><path d="M880.725333 646.912a42.666667 42.666667 0 0 1-41.898666 10.858667l-103.381334-29.568a42.666667 42.666667 0 0 1-28.757333-27.52l-35.541333-106.666667s-63.274667-42.666667-149.525334-42.666667c-86.229333 0-149.141333 42.666667-149.141333 42.666667l-35.541333 106.645333a42.666667 42.666667 0 0 1-28.778667 27.52l-103.722667 29.610667a42.666667 42.666667 0 0 1-41.877333-10.858667l-76.544-76.522666c-38.976-38.997333-30.933333-103.338667 18.474667-127.786667 101.44-50.282667 267.904-119.274667 417.130666-119.274667 149.248 0 315.733333 68.992 417.152 119.253334 49.386667 24.469333 57.450667 88.810667 18.474667 127.786666l-76.522667 76.522667z"  ></path></symbol><symbol id="icon-screenshot" viewBox="0 0 1024 1024"><path d="M298.666667 725.333333V42.666667h-85.333334v170.666666H42.666667v85.333334h170.666666v426.666666a85.333333 85.333333 0 0 0 85.333334 85.333334h426.666666v170.666666h85.333334v-170.666666h170.666666v-85.333334m-256-85.333333h85.333334V298.666667a85.333333 85.333333 0 0 0-85.333334-85.333334H384v85.333334h341.333333v341.333333z"  ></path></symbol><symbol id="icon-record" viewBox="0 0 1024 1024"><path d="M512 170.666667C323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333 341.333333-152.810667 341.333333-341.333333S700.522667 170.666667 512 170.666667zM85.333333 512C85.333333 276.352 276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512z m426.666667-170.666667a170.666667 170.666667 0 1 0 0 341.333334 170.666667 170.666667 0 0 0 0-341.333334z"  ></path></symbol><symbol id="icon-mic1" viewBox="0 0 1024 1024"><path d="M512 597.333333c-35.562667 0-65.770667-12.437333-90.666667-37.333333C396.437333 535.104 384 504.896 384 469.333333V213.333333c0-35.562667 12.437333-65.770667 37.333333-90.666666C446.229333 97.770667 476.437333 85.333333 512 85.333333c35.562667 0 65.770667 12.437333 90.666667 37.333334C627.562667 147.562667 640 177.770667 640 213.333333v256c0 35.562667-12.437333 65.770667-37.333333 90.666667C577.770667 584.896 547.562667 597.333333 512 597.333333z m-42.666667 256v-88.533333c-65.429333-9.237333-121.408-36.970667-167.978666-83.2s-74.837333-102.4-84.821334-168.533333c-1.429333-12.096 1.770667-22.4 9.6-30.933334 7.829333-8.533333 17.770667-12.8 29.866667-12.8s22.229333 4.096 30.421333 12.288A61.866667 61.866667 0 0 1 302.933333 512c9.962667 49.770667 34.666667 90.666667 74.154667 122.666667C416.554667 666.666667 461.546667 682.666667 512 682.666667c51.2 0 96.362667-16.170667 135.466667-48.512 39.104-32.341333 63.637333-73.066667 73.6-122.154667a61.909333 61.909333 0 0 1 16.554666-30.378667c8.192-8.170667 18.325333-12.266667 30.378667-12.288 12.096 0 22.037333 4.266667 29.866667 12.8 7.829333 8.533333 11.029333 18.837333 9.6 30.933334-9.962667 64.704-38.037333 120.533333-84.266667 167.466666-46.229333 46.933333-102.4 75.029333-168.533333 84.266667V853.333333c0 12.096-4.096 22.229333-12.288 30.421334-8.192 8.192-18.325333 12.266667-30.378667 12.245333-12.096 0-22.208-4.096-30.378667-12.288-8.170667-8.192-12.266667-18.325333-12.288-30.378667z"  ></path></symbol><symbol id="icon-phone1" viewBox="0 0 1024 1024"><path d="M362.581333 163.968a42.666667 42.666667 0 0 1 37.312 21.973333l52.181334 93.994667a42.666667 42.666667 0 0 1 0.853333 39.786667l-50.261333 100.565333s14.570667 74.901333 75.541333 135.893333c60.970667 60.970667 135.637333 75.306667 135.637333 75.306667l100.544-50.282667a42.666667 42.666667 0 0 1 39.808 0.853334l94.293334 52.437333A42.666667 42.666667 0 0 1 870.4 671.786667v108.224c0 55.125333-51.2 94.933333-103.424 77.312-107.264-36.202667-273.770667-105.109333-379.306667-210.645334-105.514667-105.514667-174.442667-272.021333-210.624-379.285333-17.621333-52.224 22.186667-103.424 77.290667-103.424h108.224z"  ></path></symbol><symbol id="icon-fullscreen-exit" viewBox="0 0 1024 1024"><path d="M789.333333 277.333333V128h-85.333333v170.666667a64 64 0 0 0 64 64h170.666667v-85.333334h-149.333334z m-469.333333 21.333334V128h-85.333333v149.333333H85.333333v85.333334h170.666667a64 64 0 0 0 64-64z m618.666667 362.666666h-170.666667a64 64 0 0 0-64 64v170.666667h85.333333v-149.333333h149.333334v-85.333334z m-704 85.333334H85.333333v-85.333334h170.666667a64 64 0 0 1 64 64v170.666667h-85.333333v-149.333333z"  ></path></symbol><symbol id="icon-fullscreen" viewBox="0 0 1024 1024"><path d="M853.333333 213.333333h-149.333333V128h170.666667a64 64 0 0 1 64 64v170.666667h-85.333334v-149.333334zM320 128H149.333333a64 64 0 0 0-64 64v170.666667h85.333334v-149.333334h149.333333V128z m618.666667 704v-170.666667h-85.333334v149.333334h-149.333333v85.333333h170.666667a64 64 0 0 0 64-64zM170.666667 810.666667v-149.333334H85.333333v170.666667a64 64 0 0 0 64 64h170.666667v-85.333333H170.666667z"  ></path></symbol><symbol id="icon-download" viewBox="0 0 1024 1024"><path d="M469.333333 561.344V106.666667h85.333334v454.72l120.704-120.704 60.330666 60.330666-223.68 223.701334-223.68-223.701334 60.330667-60.330666L469.333333 561.344zM213.333333 832v-85.333333H128v170.666666h768v-170.666666h-85.333333v85.333333H213.333333z"  ></path></symbol><symbol id="icon-calendar" viewBox="0 0 1024 1024"><path d="M256 149.333333V106.666667h85.333333v42.666666h341.333334V106.666667h85.333333v42.666666h85.333333a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H170.666667a64 64 0 0 1-64-64V213.333333a64 64 0 0 1 64-64h85.333333z m0 85.333334H192v192h640v-192h-64v42.666666h-85.333333v-42.666666H341.333333v42.666666h-85.333333v-42.666666z m576 277.333333H192v320h640V512z"  ></path></symbol><symbol id="icon-pdf" viewBox="0 0 1024 1024"><path d="M921.6 281.6v628.629333c0 62.826667-51.456 113.770667-114.944 113.770667H217.344C153.856 1024 102.4 973.056 102.4 910.229333V113.706667C102.4 50.944 153.856 0 217.344 0h430.805333L921.6 281.6z"  ></path><path d="M648.149333 0L921.6 281.6H701.845333c-29.632 0-53.696-20.693333-53.696-52.693333V0z"  ></path><path d="M640.042667 595.626667a315.690667 315.690667 0 0 0-65.472 8.106666 340.970667 340.970667 0 0 1-64.981334-90.410666c17.984-62.869333 18.794667-105.728 5.376-126.037334a33.856 33.856 0 0 0-26.816-14.762666 33.237333 33.237333 0 0 0-32.512 18.282666c-18.773333 33.578667 8.341333 100.202667 20.970667 127.146667a835.989333 835.989333 0 0 1-55.296 139.733333c-100.352 46.293333-103.317333 74.410667-103.317333 84.544 0.362667 12.501333 7.189333 23.68 17.706666 28.949334 4.565333 3.136 10.026667 4.693333 15.573334 4.394666 26.794667 0 56.32-31.594667 88.832-93.333333a687.402667 687.402667 0 0 1 123.968-42.858667 128.896 128.896 0 0 0 77.312 33.856c17.706667 0 53.653333 0 53.653333-38.506666 0.298667-13.056-6.954667-37.973333-54.997333-39.125334v0.042667z m-286.912 147.754666h-3.2a82.24 82.24 0 0 1 37.546666-32.746666 70.954667 70.954667 0 0 1-34.346666 32.746666z m128.298666-335.829333a6.016 6.016 0 0 1 4.266667 0h3.221333c5.546667 18.922667 5.546667 39.04 0 57.962667a97.792 97.792 0 0 1-7.488-57.962667z m53.696 218.453333c-24.149333 6.101333-47.914667 13.653333-71.146666 22.613334v-2.325334h-2.154667a944.938667 944.938667 0 0 0 31.445333-76.48v-2.346666a339.84 339.84 0 0 0 41.557334 55.04h-2.922667l3.2 3.498666z m107.306667 14.805334a85.333333 85.333333 0 0 1-31.658667-7.530667 108.586667 108.586667 0 0 1 26.858667-2.304c20.650667 0 24.96 5.482667 24.96 8.96-6.613333 1.962667-13.632 2.261333-20.394667 0.853333h0.256z"  ></path></symbol><symbol id="icon-image" viewBox="0 0 1024 1024"><path d="M921.6 281.6v628.629333c0 62.826667-51.456 113.770667-114.944 113.770667H217.344C153.856 1024 102.4 973.056 102.4 910.229333V113.706667C102.4 50.944 153.856 0 217.344 0h430.805333L921.6 281.6z"  ></path><path d="M648.149333 0L921.6 281.6H701.845333c-29.632 0-53.696-20.693333-53.696-52.693333V0z"  ></path><path d="M795.968 497.194667a16.426667 16.426667 0 0 1 5.44 12.202666v317.44a13.994667 13.994667 0 0 1-14.144 13.824H245.930667a11.178667 11.178667 0 0 1-11.264-11.072c0-2.602667 0.917333-5.12 2.602666-7.168l182.528-213.248a28.693333 28.693333 0 0 1 43.264 0l96.938667 113.216 211.968-224.256a17.194667 17.194667 0 0 1 24-0.938666zM349.354667 384c15.616 0 28.266667 12.373333 28.266666 27.648v55.466667c0 15.232-12.650667 27.626667-28.266666 27.626666h-56.426667a27.946667 27.946667 0 0 1-28.266667-27.648v-55.445333c0-15.253333 12.650667-27.648 28.266667-27.648h56.426667z"  ></path></symbol><symbol id="icon-view-grid" viewBox="0 0 1024 1024"><path d="M0 0m85.333333 0l108.608 0q85.333333 0 85.333334 85.333333l0 108.608q0 85.333333-85.333334 85.333334l-108.608 0q-85.333333 0-85.333333-85.333334l0-108.608q0-85.333333 85.333333-85.333333Z"  ></path><path d="M0 372.352m85.333333 0l108.608 0q85.333333 0 85.333334 85.333333l0 108.608q0 85.333333-85.333334 85.333334l-108.608 0q-85.333333 0-85.333333-85.333334l0-108.608q0-85.333333 85.333333-85.333333Z"  ></path><path d="M0 744.725333m85.333333 0l108.608 0q85.333333 0 85.333334 85.333334l0 108.608q0 85.333333-85.333334 85.333333l-108.608 0q-85.333333 0-85.333333-85.333333l0-108.608q0-85.333333 85.333333-85.333334Z"  ></path><path d="M372.373333 0m85.333334 0l108.608 0q85.333333 0 85.333333 85.333333l0 108.608q0 85.333333-85.333333 85.333334l-108.608 0q-85.333333 0-85.333334-85.333334l0-108.608q0-85.333333 85.333334-85.333333Z"  ></path><path d="M372.373333 372.352m85.333334 0l108.608 0q85.333333 0 85.333333 85.333333l0 108.608q0 85.333333-85.333333 85.333334l-108.608 0q-85.333333 0-85.333334-85.333334l0-108.608q0-85.333333 85.333334-85.333333Z"  ></path><path d="M372.373333 744.725333m85.333334 0l108.608 0q85.333333 0 85.333333 85.333334l0 108.608q0 85.333333-85.333333 85.333333l-108.608 0q-85.333333 0-85.333334-85.333333l0-108.608q0-85.333333 85.333334-85.333334Z"  ></path><path d="M744.725333 0m85.333334 0l108.608 0q85.333333 0 85.333333 85.333333l0 108.608q0 85.333333-85.333333 85.333334l-108.608 0q-85.333333 0-85.333334-85.333334l0-108.608q0-85.333333 85.333334-85.333333Z"  ></path><path d="M744.725333 372.352m85.333334 0l108.608 0q85.333333 0 85.333333 85.333333l0 108.608q0 85.333333-85.333333 85.333334l-108.608 0q-85.333333 0-85.333334-85.333334l0-108.608q0-85.333333 85.333334-85.333333Z"  ></path><path d="M744.725333 744.725333m85.333334 0l108.608 0q85.333333 0 85.333333 85.333334l0 108.608q0 85.333333-85.333333 85.333333l-108.608 0q-85.333333 0-85.333334-85.333333l0-108.608q0-85.333333 85.333334-85.333334Z"  ></path></symbol><symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M675.349333 252.970667c-116.650667-116.650667-305.749333-116.650667-422.4 0-116.629333 116.629333-116.629333 305.728 0 422.378666 116.650667 116.629333 305.749333 116.629333 422.4 0 116.629333-116.650667 116.629333-305.749333 0-422.4zM192.618667 192.618667C342.613333 42.666667 585.728 42.666667 735.68 192.64c139.754667 139.776 149.269333 360.469333 28.522667 511.232l152.490666 152.533333-60.330666 60.330667-152.512-152.533333c-150.762667 120.768-371.456 111.274667-511.232-28.501334C42.666667 585.706667 42.666667 342.613333 192.64 192.64z"  ></path></symbol><symbol id="icon-phone" viewBox="0 0 1024 1024"><path d="M671.061333 112.896a64 64 0 0 1 90.496 0l134.037334 134.037333 3.242666 7.552-39.232 16.810667c39.232-16.810667 39.253333-16.768 39.253334-16.746667l0.042666 0.085334 0.064 0.170666 0.170667 0.384a47.637333 47.637333 0 0 1 1.365333 3.584c0.725333 2.069333 1.642667 4.8 2.581334 8.149334 1.92 6.677333 4.032 15.872 5.546666 27.413333 3.050667 23.168 3.690667 55.466667-4.352 95.637333-16.128 80.64-66.432 189.696-195.52 318.784-129.066667 129.066667-238.144 179.392-318.784 195.52-40.170667 8.021333-72.469333 7.402667-95.616 4.352a193.322667 193.322667 0 0 1-27.434666-5.546666 129.28 129.28 0 0 1-11.733334-3.968l-0.384-0.149334-0.149333-0.085333-0.085333-0.021333c-0.042667 0-0.085333-0.042667 16.725333-39.253334l-16.810667 39.210667-7.552-3.221333-134.016-134.037334a64 64 0 0 1 0-90.517333l120.682667-120.682667a64 64 0 0 1 90.496 0l83.861333 83.861334c5.269333-2.965333 11.306667-6.506667 17.984-10.666667 27.733333-17.344 66.602667-45.546667 109.354667-88.277333 42.730667-42.730667 70.933333-81.621333 88.256-109.354667 4.181333-6.677333 7.722667-12.693333 10.666667-17.962667l-83.84-83.861333a64 64 0 0 1 0-90.517333l120.682666-120.682667z m15.082667 286.613333c39.616 15.850667 39.594667 15.872 39.594667 15.872v0.042667l-0.021334 0.042667-0.064 0.149333-0.149333 0.362667-0.426667 1.024-1.472 3.349333c-1.237333 2.773333-3.029333 6.634667-5.44 11.434667-4.8 9.621333-12.053333 23.061333-22.250666 39.36-20.373333 32.618667-52.522667 76.693333-100.288 124.48-47.786667 47.786667-91.861333 79.914667-124.458667 100.266666-16.298667 10.218667-29.738667 17.472-39.36 22.272a298.410667 298.410667 0 0 1-14.784 6.890667l-1.066667 0.426667-0.341333 0.170666-0.128 0.042667-0.064 0.021333h-0.021333c-0.021333 0.021333-0.042667 0.021333-15.872-39.594666l15.829333 39.616-26.112 10.453333-110.4-110.4-90.517333 90.517333 105.664 105.642667c2.922667 0.682667 6.762667 1.450667 11.52 2.069333 14.336 1.898667 37.184 2.688 67.733333-3.413333 60.8-12.16 155.349333-52.373333 275.178667-172.202667 119.808-119.808 160.021333-214.4 172.16-275.178666 6.122667-30.528 5.333333-53.397333 3.434666-67.712a119.424 119.424 0 0 0-2.048-11.52l-105.664-105.664-90.517333 90.496 110.4 110.421333-10.453333 26.112-39.594667-15.850667z"  ></path></symbol><symbol id="icon-plus-circle" viewBox="0 0 1024 1024"><path d="M512 170.666667C323.477333 170.666667 170.666667 323.498667 170.666667 512c0 188.522667 152.810667 341.333333 341.333333 341.333333 188.501333 0 341.333333-152.810667 341.333333-341.333333 0-188.501333-152.832-341.333333-341.333333-341.333333zM85.333333 512C85.333333 276.373333 276.352 85.333333 512 85.333333s426.666667 191.04 426.666667 426.666667c0 235.648-191.018667 426.666667-426.666667 426.666667S85.333333 747.669333 85.333333 512z m469.333334-42.666667v-128h-85.333334v128h-128v85.333334h128v128h85.333334v-128h127.978666v-85.333334h-128z"  ></path></symbol><symbol id="icon-video" viewBox="0 0 1024 1024"><path d="M921.6 281.6v628.629333c0 62.826667-51.456 113.770667-114.944 113.770667H217.344C153.856 1024 102.4 973.056 102.4 910.229333V113.706667C102.4 50.944 153.856 0 217.344 0h430.805333L921.6 281.6z"  ></path><path d="M422.4 546.133333v-120.704l104.533333 60.352 104.533334 60.352-104.533334 60.352-104.533333 60.352V546.133333z"  ></path><path d="M648.149333 0L921.6 281.6H701.845333c-29.632 0-53.696-20.693333-53.696-52.693333V0z"  ></path></symbol><symbol id="icon-view-gallery" viewBox="0 0 1024 1024"><path d="M0 0m85.333333 0l108.608 0q85.333333 0 85.333334 85.333333l0 108.608q0 85.333333-85.333334 85.333334l-108.608 0q-85.333333 0-85.333333-85.333334l0-108.608q0-85.333333 85.333333-85.333333Z"  ></path><path d="M0 372.373333m85.333333 0l853.333334 0q85.333333 0 85.333333 85.333334l0 480.981333q0 85.333333-85.333333 85.333333l-853.333334 0q-85.333333 0-85.333333-85.333333l0-480.981333q0-85.333333 85.333333-85.333334Z"  ></path><path d="M372.373333 0m85.333334 0l108.608 0q85.333333 0 85.333333 85.333333l0 108.608q0 85.333333-85.333333 85.333334l-108.608 0q-85.333333 0-85.333334-85.333334l0-108.608q0-85.333333 85.333334-85.333333Z"  ></path><path d="M744.725333 0m85.333334 0l108.608 0q85.333333 0 85.333333 85.333333l0 108.608q0 85.333333-85.333333 85.333334l-108.608 0q-85.333333 0-85.333334-85.333334l0-108.608q0-85.333333 85.333334-85.333333Z"  ></path></symbol><symbol id="icon-edit" viewBox="0 0 1024 1024"><path d="M593.045333 104.32a64 64 0 0 1 90.496 0l119.168 119.168a64 64 0 0 1 0 90.496l-436.266666 436.266667a64 64 0 0 1-37.802667 18.304l-129.002667 15.104a64 64 0 0 1-71.253333-68.394667l10.176-134.613333a64 64 0 0 1 18.56-40.426667L593.045333 104.32z m-31.829333 152.490667l89.002667 88.981333 77.056-77.056-88.981334-89.002667-77.077333 77.077334z m28.650667 149.333333l-88.981334-89.002667L223.061333 594.986667l-7.658666 100.906666 95.936-11.221333L589.866667 406.144zM896 938.666667H128v-85.333334h768v85.333334z"  ></path></symbol><symbol id="icon-writing" viewBox="0 0 1024 1024"><path d="M710.698667 80.789333l211.2 211.2L321.066667 892.757333h-211.2v-211.2L710.72 80.810667zM195.2 716.949333v90.496h90.496l409.898667-409.877333-90.517334-90.517333L195.221333 716.928z m470.208-470.229333l90.517333 90.496 45.248-45.226667-90.496-90.538666-45.269333 45.269333z"  ></path></symbol><symbol id="icon-user-group" viewBox="0 0 1024 1024"><path d="M277.333333 320a106.666667 106.666667 0 1 1 213.333334 0 106.666667 106.666667 0 0 1-213.333334 0z m106.666667-192a192 192 0 1 0 0 384 192 192 0 0 0 0-384z m298.666667 277.333333a42.666667 42.666667 0 1 1 85.333333 0 42.666667 42.666667 0 0 1-85.333333 0z m42.666666-128a128 128 0 1 0 0 256 128 128 0 0 0 0-256zM85.333333 725.333333a170.666667 170.666667 0 0 1 170.666667-170.666666h256a170.666667 170.666667 0 0 1 170.666667 170.666666v170.666667H85.333333v-170.666667z m170.666667-85.333333a85.333333 85.333333 0 0 0-85.333333 85.333333v85.333334h426.666666v-85.333334a85.333333 85.333333 0 0 0-85.333333-85.333333H256z m682.666667 85.333333a128 128 0 0 0-128-128h-85.333334v85.333334h85.333334a42.666667 42.666667 0 0 1 42.666666 42.666666v42.666667h-128v85.333333h213.333334v-128z"  ></path></symbol><symbol id="icon-mic-off" viewBox="0 0 1024 1024"><path d="M55.168 55.168a42.666667 42.666667 0 0 1 60.330667 0l640 639.978667s0 0.042667 0.042666 0.042666l213.290667 213.312a42.666667 42.666667 0 1 1-60.330667 60.330667l-184.789333-184.768A341.333333 341.333333 0 0 1 170.666667 511.701333V426.666667a42.666667 42.666667 0 1 1 85.333333 0v85.973333a256 256 0 0 0 406.826667 210.517333L55.168 115.498667a42.666667 42.666667 0 0 1 0-60.330667zM810.666667 384a42.666667 42.666667 0 0 1 42.666666 42.666667v85.44a346.453333 346.453333 0 0 1-5.333333 59.84 42.666667 42.666667 0 0 1-84.053333-14.933334 261.12 261.12 0 0 0 4.053333-45.077333V426.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z"  ></path><path d="M512 778.666667a42.666667 42.666667 0 0 1 42.666667 42.666666V938.666667a42.666667 42.666667 0 1 1-85.333334 0v-117.333334a42.666667 42.666667 0 0 1 42.666667-42.666666zM439.722667 59.52A170.666667 170.666667 0 0 1 682.666667 213.056v185.429333a42.666667 42.666667 0 0 1-85.333334 0v-185.024a85.333333 85.333333 0 0 0-161.557333-37.717333 42.666667 42.666667 0 0 1-76.245333-38.357333 170.666667 170.666667 0 0 1 80.192-77.909334zM384 341.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v127.978667a85.333333 85.333333 0 0 0 145.642666 60.288 42.666667 42.666667 0 1 1 60.288 60.373333A170.666667 170.666667 0 0 1 341.333333 512.042667V384a42.666667 42.666667 0 0 1 42.666667-42.666667z"  ></path></symbol><symbol id="icon-wifi" viewBox="0 0 1024 1024"><path d="M512 277.333333c-152.64 0-290.24 64.064-387.52 166.890667L62.506667 385.578667C175.210667 266.453333 334.954667 192 512 192c177.066667 0 336.810667 74.432 449.514667 193.578667l-61.994667 58.645333C802.218667 341.397333 664.618667 277.333333 512 277.333333zM260.629333 579.754667A340.309333 340.309333 0 0 1 512 469.333333c99.456 0 188.928 42.474667 251.370667 110.421334l62.826666-57.749334A425.664 425.664 0 0 0 512 384a425.642667 425.642667 0 0 0-314.197333 138.005333l62.826666 57.749334z m121.877334 119.722666A170.197333 170.197333 0 0 1 512 640c51.776 0 98.133333 22.997333 129.493333 59.477333l64.704-55.616A255.509333 255.509333 0 0 0 512 554.666667a255.509333 255.509333 0 0 0-194.197333 89.173333l64.704 55.637333z m170.304 33.984a106.666667 106.666667 0 0 1 34.602666 23.125334L512 832l-75.434667-75.413333a106.666667 106.666667 0 0 1 116.266667-23.125334z"  ></path></symbol><symbol id="icon-file" viewBox="0 0 1024 1024"><path d="M149.333333 170.666667a85.333333 85.333333 0 0 1 85.333334-85.333334h465.664L874.666667 259.669333V853.333333a85.333333 85.333333 0 0 1-85.333334 85.333334H234.666667a85.333333 85.333333 0 0 1-85.333334-85.333334V170.666667z m515.669334 0H234.666667v682.666666h554.666666V294.997333L665.002667 170.666667zM682.666667 490.666667H341.333333v-85.333334h341.333334v85.333334z m-128 170.666666H341.333333v-85.333333h213.333334v85.333333z"  ></path></symbol><symbol id="icon-language" viewBox="0 0 1024 1024"><path d="M661.333333 192H423.253333l-18.773333-93.696-83.648 16.725333L336.213333 192H106.666667v85.333333h95.893333c5.674667 17.92 14.08 42.090667 25.578667 69.098667 19.754667 46.464 49.664 104.021333 92.224 152.256-38.485333 29.12-81.344 55.594667-118.933334 76.8a1437.866667 1437.866667 0 0 1-84.48 43.925333l-5.013333 2.346667-1.237333 0.576-0.341334 0.149333L128 661.333333c17.621333 38.869333 17.706667 38.826667 17.706667 38.826667l0.106666-0.064 0.426667-0.192 1.557333-0.704c1.322667-0.618667 3.242667-1.493333 5.674667-2.666667 4.906667-2.325333 11.946667-5.696 20.650667-10.026666a1525.802667 1525.802667 0 0 0 69.205333-36.693334c42.581333-24.021333 94.314667-55.936 140.672-92.48 46.336 36.544 98.090667 68.48 140.672 92.48a1525.546667 1525.546667 0 0 0 75.434667 39.765334l-17.002667 40.64-68.096 171.370666 79.317333 31.509334 40.149334-101.077334h181.696l40.170666 101.077334 79.296-31.509334-67.84-170.666666L767.402667 490.666667h-84.117334l-50.176 120.021333-1.237333-0.597333a1441.92 1441.92 0 0 1-65.28-34.624c-37.610667-21.184-80.469333-47.658667-118.933333-76.8 42.538667-48.213333 72.469333-105.749333 92.224-152.234667A782.933333 782.933333 0 0 0 565.418667 277.333333H661.333333V192z m-200 121.045333c-18.176 42.752-43.797333 90.645333-77.333333 128.789334-33.557333-38.144-59.157333-86.037333-77.333333-128.789334A694.826667 694.826667 0 0 1 292.650667 277.333333h182.698666a694.826667 694.826667 0 0 1-14.016 35.712z m320.576 433.642667h-113.194666L725.333333 611.306667 781.909333 746.666667z"  ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M384 320a128 128 0 1 1 256 0 128 128 0 0 1-256 0z m128-213.333333c-117.824 0-213.333333 95.509333-213.333333 213.333333 0 117.802667 95.509333 213.333333 213.333333 213.333333s213.333333-95.530667 213.333333-213.333333c0-117.824-95.509333-213.333333-213.333333-213.333333z m-170.666667 469.333333c-61.418667 0-119.68 18.709333-163.328 55.658667C133.653333 669.205333 106.666667 723.776 106.666667 789.312v64a64 64 0 0 0 64 64h682.666666a64 64 0 0 0 64-64v-64c0-65.536-27.008-120.106667-71.338666-157.653333-43.669333-36.949333-101.930667-55.68-163.328-55.68H341.333333zM192 789.333333c0-40.490667 15.978667-71.253333 41.130667-92.544C258.944 674.922667 296.704 661.333333 341.333333 661.333333h341.333334c44.629333 0 82.346667 13.589333 108.202666 35.456C816 718.08 832 748.842667 832 789.333333v42.666667H192v-42.666667z"  ></path></symbol><symbol id="icon-desktop" viewBox="0 0 1024 1024"><path d="M85.333333 192a64 64 0 0 1 64-64h725.333334a64 64 0 0 1 64 64v469.333333a64 64 0 0 1-64 64H554.666667v85.333334h149.333333v85.333333H320v-85.333333h149.333333v-85.333334H149.333333a64 64 0 0 1-64-64V192z m85.333334 21.333333v426.666667h682.666666V213.333333H170.666667z"  ></path></symbol><symbol id="icon-mic" viewBox="0 0 1024 1024"><path d="M512 42.666667a170.666667 170.666667 0 0 0-170.666667 170.666666v298.666667a170.666667 170.666667 0 0 0 341.333334 0V213.333333a170.666667 170.666667 0 0 0-170.666667-170.666666z m-60.330667 110.336A85.333333 85.333333 0 0 1 597.333333 213.333333v298.666667a85.333333 85.333333 0 1 1-170.666666 0V213.333333a85.333333 85.333333 0 0 1 25.002666-60.330666zM256 426.666667a42.666667 42.666667 0 1 0-85.333333 0v85.333333a341.333333 341.333333 0 0 0 298.666666 338.666667V938.666667a42.666667 42.666667 0 1 0 85.333334 0v-88A341.333333 341.333333 0 0 0 853.333333 512v-85.333333a42.666667 42.666667 0 1 0-85.333333 0v85.333333a256 256 0 0 1-512 0v-85.333333z"  ></path></symbol><symbol id="icon-camera" viewBox="0 0 1024 1024"><path d="M512 144c-144.32 0-261.333333 116.992-261.333333 261.333333 0 144.32 117.013333 261.333333 261.333333 261.333334 144.341333 0 261.333333-117.013333 261.333333-261.333334 0-144.341333-116.992-261.333333-261.333333-261.333333zM176 405.333333C176 219.733333 326.442667 69.333333 512 69.333333 697.6 69.333333 848 219.733333 848 405.333333c0 109.653333-52.522667 207.04-133.802667 268.373334l108.8 227.541333A37.333333 37.333333 0 0 1 789.333333 954.666667H234.666667a37.333333 37.333333 0 0 1-33.685334-53.44l108.821334-227.541334A335.488 335.488 0 0 1 176 405.333333z m198.293333 306.56l-80.384 168.106667h436.181334l-80.384-168.106667A334.805333 334.805333 0 0 1 512 741.333333c-49.066667 0-95.68-10.517333-137.706667-29.44zM512 314.666667a90.666667 90.666667 0 1 0 0 181.333333 90.666667 90.666667 0 0 0 0-181.333333zM346.666667 405.333333a165.333333 165.333333 0 1 1 330.666666 0 165.333333 165.333333 0 0 1-330.666666 0z"  ></path></symbol><symbol id="icon-menu-fold" viewBox="0 0 1024 1024"><path d="M896 277.333333H128V192h768v85.333333z m0 277.333334H469.333333v-85.333334h426.666667v85.333334zM128 832h768v-85.333333H128v85.333333z m173.141333-448.042667a21.333333 21.333333 0 0 1 32.917334 17.92v211.456a21.333333 21.333333 0 0 1-32.917334 17.92l-163.413333-105.728a21.333333 21.333333 0 0 1 0-35.84l163.413333-105.728z"  ></path></symbol><symbol id="icon-menu-unfold" viewBox="0 0 1024 1024"><path d="M128 277.333333h768V192H128v85.333333z m341.333333 277.333334h426.666667v-85.333334H469.333333v85.333334z m426.666667 277.333333H128v-85.333333h768v85.333333zM128 406.272a21.333333 21.333333 0 0 1 32.917333-17.92l163.413334 105.728a21.333333 21.333333 0 0 1 0 35.84l-163.413334 105.728A21.333333 21.333333 0 0 1 128 617.728v-211.456z"  ></path></symbol><symbol id="icon-up-circle" viewBox="0 0 1024 1024"><path d="M170.666667 512c0-188.522667 152.810667-341.333333 341.333333-341.333333s341.333333 152.810667 341.333333 341.333333-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512zM512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m211.2 492.181334l-211.2-211.2-211.2 211.2L361.173333 637.866667 512 487.04l150.848 150.826667 60.352-60.330667z"  ></path></symbol><symbol id="icon-right-circle" viewBox="0 0 1024 1024"><path d="M170.666667 512c0-188.522667 152.810667-341.333333 341.333333-341.333333s341.333333 152.810667 341.333333 341.333333-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512zM512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m-126.485333 275.818667L536.362667 512l-150.826667 150.848L445.866667 723.2l211.178666-211.2-211.2-211.2-60.330666 60.352z"  ></path></symbol><symbol id="icon-left-circle" viewBox="0 0 1024 1024"><path d="M170.666667 512c0-188.522667 152.810667-341.333333 341.333333-341.333333s341.333333 152.810667 341.333333 341.333333-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512zM512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m125.866667 577.514667L486.997333 512l150.869334-150.848L577.493333 300.8 366.314667 512l211.2 211.2L637.866667 662.826667z"  ></path></symbol><symbol id="icon-caret-up" viewBox="0 0 1024 1024"><path d="M492.010667 280.981333a25.6 25.6 0 0 1 39.978666 0l288.064 360.106667c13.418667 16.746667 1.493333 41.578667-19.989333 41.578667H223.936c-21.461333 0-33.408-24.832-19.989333-41.6l288.064-360.085334z"  ></path></symbol><symbol id="icon-caret-down" viewBox="0 0 1024 1024"><path d="M531.989333 743.018667a25.6 25.6 0 0 1-39.978666 0L203.946667 382.912C190.506667 366.186667 202.453333 341.333333 223.936 341.333333h576.128c21.482667 0 33.408 24.832 19.989333 41.6L531.989333 743.018667z"  ></path></symbol><symbol id="icon-caret-right" viewBox="0 0 1024 1024"><path d="M743.018667 492.010667c12.8 10.24 12.8 29.738667 0 39.978666L382.912 820.053333c-16.746667 13.418667-41.578667 1.493333-41.578667-19.989333V223.936c0-21.482667 24.832-33.408 41.6-19.989333l360.085334 288.064z"  ></path></symbol><symbol id="icon-down-circle" viewBox="0 0 1024 1024"><path d="M853.333333 512c0 188.522667-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512 323.477333 170.666667 512 170.666667s341.333333 152.810667 341.333333 341.333333zM512 938.666667c235.648 0 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667z m-211.2-470.848l211.2 211.2 211.178667-211.2L662.826667 407.466667 512 558.293333l-150.869333-150.826666-60.330667 60.330666z"  ></path></symbol><symbol id="icon-caret-left" viewBox="0 0 1024 1024"><path d="M280.981333 531.989333a25.6 25.6 0 0 1 0-39.978666L641.088 203.946667c16.746667-13.418667 41.578667-1.493333 41.578667 19.989333v576.128c0 21.461333-24.832 33.408-41.6 19.989333L280.981333 531.989333z"  ></path></symbol></svg>',function(o){var a=(a=document.getElementsByTagName("script"))[a.length-1],l=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var h,t,c,i,v,e=function(a,l){l.parentNode.insertBefore(a,l)};if(l&&!o.__iconfont__svg__cssinject__){o.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}h=function(){var a,l=document.createElement("div");l.innerHTML=o._iconfont_svg_string_4520078,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?e(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),h()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(c=h,i=o.document,v=!1,s(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,m())})}function m(){v||(v=!0,c())}function s(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(s,50)}m()}}(window);
\ No newline at end of file

src/assets/fonts/icons/iconfont.json

+{
+  "id": "4520078",
+  "name": "anyremote",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "40058279",
+      "name": "question-circle",
+      "font_class": "question-circle",
+      "unicode": "e6f0",
+      "unicode_decimal": 59120
+    },
+    {
+      "icon_id": "40058272",
+      "name": "safe",
+      "font_class": "safe",
+      "unicode": "e6f1",
+      "unicode_decimal": 59121
+    },
+    {
+      "icon_id": "40052963",
+      "name": "mic-0ff",
+      "font_class": "mic-0ff",
+      "unicode": "e6e5",
+      "unicode_decimal": 59109
+    },
+    {
+      "icon_id": "40052964",
+      "name": "record-stop",
+      "font_class": "record-stop",
+      "unicode": "e6e6",
+      "unicode_decimal": 59110
+    },
+    {
+      "icon_id": "40052961",
+      "name": "swap",
+      "font_class": "swap",
+      "unicode": "e6e7",
+      "unicode_decimal": 59111
+    },
+    {
+      "icon_id": "40052962",
+      "name": "shared screen",
+      "font_class": "a-sharedscreen",
+      "unicode": "e6e8",
+      "unicode_decimal": 59112
+    },
+    {
+      "icon_id": "40052959",
+      "name": "phone-hangup",
+      "font_class": "phone-hangup",
+      "unicode": "e6e9",
+      "unicode_decimal": 59113
+    },
+    {
+      "icon_id": "40052960",
+      "name": "screenshot",
+      "font_class": "screenshot",
+      "unicode": "e6ea",
+      "unicode_decimal": 59114
+    },
+    {
+      "icon_id": "40052958",
+      "name": "record",
+      "font_class": "record",
+      "unicode": "e6eb",
+      "unicode_decimal": 59115
+    },
+    {
+      "icon_id": "40052956",
+      "name": "mic",
+      "font_class": "mic1",
+      "unicode": "e6ec",
+      "unicode_decimal": 59116
+    },
+    {
+      "icon_id": "40052957",
+      "name": "phone",
+      "font_class": "phone1",
+      "unicode": "e6ed",
+      "unicode_decimal": 59117
+    },
+    {
+      "icon_id": "40052955",
+      "name": "fullscreen-exit",
+      "font_class": "fullscreen-exit",
+      "unicode": "e6ee",
+      "unicode_decimal": 59118
+    },
+    {
+      "icon_id": "40052954",
+      "name": "fullscreen",
+      "font_class": "fullscreen",
+      "unicode": "e6ef",
+      "unicode_decimal": 59119
+    },
+    {
+      "icon_id": "40052808",
+      "name": "download",
+      "font_class": "download",
+      "unicode": "e6e3",
+      "unicode_decimal": 59107
+    },
+    {
+      "icon_id": "40052807",
+      "name": "calendar",
+      "font_class": "calendar",
+      "unicode": "e6e4",
+      "unicode_decimal": 59108
+    },
+    {
+      "icon_id": "40052817",
+      "name": "pdf",
+      "font_class": "pdf",
+      "unicode": "e6da",
+      "unicode_decimal": 59098
+    },
+    {
+      "icon_id": "40052814",
+      "name": "image",
+      "font_class": "image",
+      "unicode": "e6db",
+      "unicode_decimal": 59099
+    },
+    {
+      "icon_id": "40052816",
+      "name": "view-grid",
+      "font_class": "view-grid",
+      "unicode": "e6dc",
+      "unicode_decimal": 59100
+    },
+    {
+      "icon_id": "40052815",
+      "name": "search",
+      "font_class": "search",
+      "unicode": "e6dd",
+      "unicode_decimal": 59101
+    },
+    {
+      "icon_id": "40052813",
+      "name": "phone",
+      "font_class": "phone",
+      "unicode": "e6de",
+      "unicode_decimal": 59102
+    },
+    {
+      "icon_id": "40052811",
+      "name": "plus-circle",
+      "font_class": "plus-circle",
+      "unicode": "e6df",
+      "unicode_decimal": 59103
+    },
+    {
+      "icon_id": "40052810",
+      "name": "video",
+      "font_class": "video",
+      "unicode": "e6e0",
+      "unicode_decimal": 59104
+    },
+    {
+      "icon_id": "40052812",
+      "name": "view-gallery",
+      "font_class": "view-gallery",
+      "unicode": "e6e1",
+      "unicode_decimal": 59105
+    },
+    {
+      "icon_id": "40052809",
+      "name": "edit",
+      "font_class": "edit",
+      "unicode": "e6e2",
+      "unicode_decimal": 59106
+    },
+    {
+      "icon_id": "40051943",
+      "name": "writing",
+      "font_class": "writing",
+      "unicode": "e6d0",
+      "unicode_decimal": 59088
+    },
+    {
+      "icon_id": "40051941",
+      "name": "user-group",
+      "font_class": "user-group",
+      "unicode": "e6d1",
+      "unicode_decimal": 59089
+    },
+    {
+      "icon_id": "40051944",
+      "name": "mic-off",
+      "font_class": "mic-off",
+      "unicode": "e6d2",
+      "unicode_decimal": 59090
+    },
+    {
+      "icon_id": "40051940",
+      "name": "wifi",
+      "font_class": "wifi",
+      "unicode": "e6d3",
+      "unicode_decimal": 59091
+    },
+    {
+      "icon_id": "40051939",
+      "name": "file",
+      "font_class": "file",
+      "unicode": "e6d4",
+      "unicode_decimal": 59092
+    },
+    {
+      "icon_id": "40051942",
+      "name": "language",
+      "font_class": "language",
+      "unicode": "e6d5",
+      "unicode_decimal": 59093
+    },
+    {
+      "icon_id": "40051938",
+      "name": "user",
+      "font_class": "user",
+      "unicode": "e6d6",
+      "unicode_decimal": 59094
+    },
+    {
+      "icon_id": "40051937",
+      "name": "desktop",
+      "font_class": "desktop",
+      "unicode": "e6d7",
+      "unicode_decimal": 59095
+    },
+    {
+      "icon_id": "40051936",
+      "name": "mic",
+      "font_class": "mic",
+      "unicode": "e6d8",
+      "unicode_decimal": 59096
+    },
+    {
+      "icon_id": "40051935",
+      "name": "camera",
+      "font_class": "camera",
+      "unicode": "e6d9",
+      "unicode_decimal": 59097
+    },
+    {
+      "icon_id": "40051871",
+      "name": "menu-fold",
+      "font_class": "menu-fold",
+      "unicode": "e6c6",
+      "unicode_decimal": 59078
+    },
+    {
+      "icon_id": "40051870",
+      "name": "menu-unfold",
+      "font_class": "menu-unfold",
+      "unicode": "e6c7",
+      "unicode_decimal": 59079
+    },
+    {
+      "icon_id": "40051869",
+      "name": "up-circle",
+      "font_class": "up-circle",
+      "unicode": "e6c8",
+      "unicode_decimal": 59080
+    },
+    {
+      "icon_id": "40051868",
+      "name": "right-circle",
+      "font_class": "right-circle",
+      "unicode": "e6c9",
+      "unicode_decimal": 59081
+    },
+    {
+      "icon_id": "40051867",
+      "name": "left-circle",
+      "font_class": "left-circle",
+      "unicode": "e6ca",
+      "unicode_decimal": 59082
+    },
+    {
+      "icon_id": "40051866",
+      "name": "caret-up",
+      "font_class": "caret-up",
+      "unicode": "e6cb",
+      "unicode_decimal": 59083
+    },
+    {
+      "icon_id": "40051862",
+      "name": "caret-down",
+      "font_class": "caret-down",
+      "unicode": "e6cc",
+      "unicode_decimal": 59084
+    },
+    {
+      "icon_id": "40051864",
+      "name": "caret-right",
+      "font_class": "caret-right",
+      "unicode": "e6cd",
+      "unicode_decimal": 59085
+    },
+    {
+      "icon_id": "40051865",
+      "name": "down-circle",
+      "font_class": "down-circle",
+      "unicode": "e6ce",
+      "unicode_decimal": 59086
+    },
+    {
+      "icon_id": "40051863",
+      "name": "caret-left",
+      "font_class": "caret-left",
+      "unicode": "e6cf",
+      "unicode_decimal": 59087
+    }
+  ]
+}

src/assets/icons/camera.svg

+<svg t="1713941509035" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2247" width="200" height="200"><path d="M512 144c-144.32 0-261.333333 116.992-261.333333 261.333333 0 144.32 117.013333 261.333333 261.333333 261.333334 144.341333 0 261.333333-117.013333 261.333333-261.333334 0-144.341333-116.992-261.333333-261.333333-261.333333zM176 405.333333C176 219.733333 326.442667 69.333333 512 69.333333 697.6 69.333333 848 219.733333 848 405.333333c0 109.653333-52.522667 207.04-133.802667 268.373334l108.8 227.541333A37.333333 37.333333 0 0 1 789.333333 954.666667H234.666667a37.333333 37.333333 0 0 1-33.685334-53.44l108.821334-227.541334A335.488 335.488 0 0 1 176 405.333333z m198.293333 306.56l-80.384 168.106667h436.181334l-80.384-168.106667A334.805333 334.805333 0 0 1 512 741.333333c-49.066667 0-95.68-10.517333-137.706667-29.44zM512 314.666667a90.666667 90.666667 0 1 0 0 181.333333 90.666667 90.666667 0 0 0 0-181.333333zM346.666667 405.333333a165.333333 165.333333 0 1 1 330.666666 0 165.333333 165.333333 0 0 1-330.666666 0z" p-id="2248"></path></svg>
\ No newline at end of file

src/assets/icons/desktop.svg

+<svg t="1713878189693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2815" width="200" height="200"><path d="M85.333333 192a64 64 0 0 1 64-64h725.333334a64 64 0 0 1 64 64v469.333333a64 64 0 0 1-64 64H554.666667v85.333334h149.333333v85.333333H320v-85.333333h149.333333v-85.333334H149.333333a64 64 0 0 1-64-64V192z m85.333334 21.333333v426.666667h682.666666V213.333333H170.666667z" p-id="2816"></path></svg>
\ No newline at end of file

src/assets/icons/down-circle.svg

+<svg t="1713877832679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2531" width="200" height="200"><path d="M853.333333 512c0 188.522667-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512 323.477333 170.666667 512 170.666667s341.333333 152.810667 341.333333 341.333333zM512 938.666667c235.648 0 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667z m-211.2-470.848l211.2 211.2 211.178667-211.2L662.826667 407.466667 512 558.293333l-150.869333-150.826666-60.330667 60.330666z" p-id="2532"></path></svg>
\ No newline at end of file

src/assets/icons/download.svg

+<svg t="1714217900981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9191" width="200" height="200"><path d="M469.333333 561.344V106.666667h85.333334v454.72l120.704-120.704 60.330666 60.330666-223.68 223.701334-223.68-223.701334 60.330667-60.330666L469.333333 561.344zM213.333333 832v-85.333333H128v170.666666h768v-170.666666h-85.333333v85.333333H213.333333z" p-id="9192"></path></svg>
\ No newline at end of file

src/assets/icons/edit.svg

+<svg t="1714023872151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3159" width="200" height="200"><path d="M593.045333 104.32a64 64 0 0 1 90.496 0l119.168 119.168a64 64 0 0 1 0 90.496l-436.266666 436.266667a64 64 0 0 1-37.802667 18.304l-129.002667 15.104a64 64 0 0 1-71.253333-68.394667l10.176-134.613333a64 64 0 0 1 18.56-40.426667L593.045333 104.32z m-31.829333 152.490667l89.002667 88.981333 77.056-77.056-88.981334-89.002667-77.077333 77.077334z m28.650667 149.333333l-88.981334-89.002667L223.061333 594.986667l-7.658666 100.906666 95.936-11.221333L589.866667 406.144zM896 938.666667H128v-85.333334h768v85.333334z" p-id="3160"></path></svg>
\ No newline at end of file

src/assets/icons/file.svg

+<svg t="1714217853130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7529" width="200" height="200"><path d="M149.333333 170.666667a85.333333 85.333333 0 0 1 85.333334-85.333334h465.664L874.666667 259.669333V853.333333a85.333333 85.333333 0 0 1-85.333334 85.333334H234.666667a85.333333 85.333333 0 0 1-85.333334-85.333334V170.666667z m515.669334 0H234.666667v682.666666h554.666666V294.997333L665.002667 170.666667zM682.666667 490.666667H341.333333v-85.333334h341.333334v85.333334z m-128 170.666666H341.333333v-85.333333h213.333334v85.333333z" p-id="7530"></path></svg>
\ No newline at end of file

src/assets/icons/fullscreen-exit.svg

+<svg t="1714024505656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3730" width="200" height="200"><path d="M789.333333 277.333333V128h-85.333333v170.666667a64 64 0 0 0 64 64h170.666667v-85.333334h-149.333334z m-469.333333 21.333334V128h-85.333333v149.333333H85.333333v85.333334h170.666667a64 64 0 0 0 64-64z m618.666667 362.666666h-170.666667a64 64 0 0 0-64 64v170.666667h85.333333v-149.333333h149.333334v-85.333334z m-704 85.333334H85.333333v-85.333334h170.666667a64 64 0 0 1 64 64v170.666667h-85.333333v-149.333333z" p-id="3731"></path></svg>
\ No newline at end of file

src/assets/icons/fullscreen.svg

+<svg t="1714024489934" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3588" width="200" height="200"><path d="M853.333333 213.333333h-149.333333V128h170.666667a64 64 0 0 1 64 64v170.666667h-85.333334v-149.333334zM320 128H149.333333a64 64 0 0 0-64 64v170.666667h85.333334v-149.333334h149.333333V128z m618.666667 704v-170.666667h-85.333334v149.333334h-149.333333v85.333333h170.666667a64 64 0 0 0 64-64zM170.666667 810.666667v-149.333334H85.333333v170.666667a64 64 0 0 0 64 64h170.666667v-85.333333H170.666667z" p-id="3589"></path></svg>
\ No newline at end of file

src/assets/icons/image.svg

+<svg t="1714038465497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2265" width="200" height="200"><path d="M921.6 281.6v628.629333c0 62.826667-51.456 113.770667-114.944 113.770667H217.344C153.856 1024 102.4 973.056 102.4 910.229333V113.706667C102.4 50.944 153.856 0 217.344 0h430.805333L921.6 281.6z" fill="#00AA2A" p-id="2266"></path><path d="M648.149333 0L921.6 281.6H701.845333c-29.632 0-53.696-20.693333-53.696-52.693333V0z" fill="#79DD88" p-id="2267"></path><path d="M795.968 497.194667a16.426667 16.426667 0 0 1 5.44 12.202666v317.44a13.994667 13.994667 0 0 1-14.144 13.824H245.930667a11.178667 11.178667 0 0 1-11.264-11.072c0-2.602667 0.917333-5.12 2.602666-7.168l182.528-213.248a28.693333 28.693333 0 0 1 43.264 0l96.938667 113.216 211.968-224.256a17.194667 17.194667 0 0 1 24-0.938666zM349.354667 384c15.616 0 28.266667 12.373333 28.266666 27.648v55.466667c0 15.232-12.650667 27.626667-28.266666 27.626666h-56.426667a27.946667 27.946667 0 0 1-28.266667-27.648v-55.445333c0-15.253333 12.650667-27.648 28.266667-27.648h56.426667z" fill="#FFFFFF" p-id="2268"></path></svg>
\ No newline at end of file

src/assets/icons/index.html

+
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <meta charset="UTF-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            </head>
+            <body>
+                <div class="main"><div class="icon"><i><svg t="1713878189693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2815" width="200" height="200"><path d="M85.333333 192a64 64 0 0 1 64-64h725.333334a64 64 0 0 1 64 64v469.333333a64 64 0 0 1-64 64H554.666667v85.333334h149.333333v85.333333H320v-85.333333h149.333333v-85.333334H149.333333a64 64 0 0 1-64-64V192z m85.333334 21.333333v426.666667h682.666666V213.333333H170.666667z" p-id="2816"></path></svg></i><span class="name">desktop</span></div> <div class="icon"><i><svg t="1713877832679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2531" width="200" height="200"><path d="M853.333333 512c0 188.522667-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512 323.477333 170.666667 512 170.666667s341.333333 152.810667 341.333333 341.333333zM512 938.666667c235.648 0 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667z m-211.2-470.848l211.2 211.2 211.178667-211.2L662.826667 407.466667 512 558.293333l-150.869333-150.826666-60.330667 60.330666z" p-id="2532"></path></svg></i><span class="name">down-circle</span></div> <div class="icon"><i><svg t="1713878019362" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2673" width="200" height="200"><path d="M661.333333 192H423.253333l-18.773333-93.696-83.648 16.725333L336.213333 192H106.666667v85.333333h95.893333c5.674667 17.92 14.08 42.090667 25.578667 69.098667 19.754667 46.464 49.664 104.021333 92.224 152.256-38.485333 29.12-81.344 55.594667-118.933334 76.8a1437.866667 1437.866667 0 0 1-84.48 43.925333l-5.013333 2.346667-1.237333 0.576-0.341334 0.149333L128 661.333333c17.621333 38.869333 17.706667 38.826667 17.706667 38.826667l0.106666-0.064 0.426667-0.192 1.557333-0.704c1.322667-0.618667 3.242667-1.493333 5.674667-2.666667 4.906667-2.325333 11.946667-5.696 20.650667-10.026666a1525.802667 1525.802667 0 0 0 69.205333-36.693334c42.581333-24.021333 94.314667-55.936 140.672-92.48 46.336 36.544 98.090667 68.48 140.672 92.48a1525.546667 1525.546667 0 0 0 75.434667 39.765334l-17.002667 40.64-68.096 171.370666 79.317333 31.509334 40.149334-101.077334h181.696l40.170666 101.077334 79.296-31.509334-67.84-170.666666L767.402667 490.666667h-84.117334l-50.176 120.021333-1.237333-0.597333a1441.92 1441.92 0 0 1-65.28-34.624c-37.610667-21.184-80.469333-47.658667-118.933333-76.8 42.538667-48.213333 72.469333-105.749333 92.224-152.234667A782.933333 782.933333 0 0 0 565.418667 277.333333H661.333333V192z m-200 121.045333c-18.176 42.752-43.797333 90.645333-77.333333 128.789334-33.557333-38.144-59.157333-86.037333-77.333333-128.789334A694.826667 694.826667 0 0 1 292.650667 277.333333h182.698666a694.826667 694.826667 0 0 1-14.016 35.712z m320.576 433.642667h-113.194666L725.333333 611.306667 781.909333 746.666667z" p-id="2674"></path></svg></i><span class="name">language</span></div> <div class="icon"><i><svg t="1713876625455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2105" width="200" height="200"><path d="M170.666667 512c0-188.522667 152.810667-341.333333 341.333333-341.333333s341.333333 152.810667 341.333333 341.333333-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512zM512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m-72.533333 340.885334v-9.856a50.56 50.56 0 0 1 13.568-34.453334c8.64-9.002667 25.450667-19.242667 58.709333-19.242666 31.253333 0 52.970667 14.933333 64.064 31.850666 11.818667 18.090667 9.493333 33.258667 3.882667 40.832-7.018667 9.450667-15.701333 18.197333-26.218667 27.648-3.2 2.88-7.125333 6.314667-11.349333 9.984-7.573333 6.570667-16.021333 13.952-22.784 20.373334C495.381333 516.16 469.333333 547.968 469.333333 597.333333l0.149334 21.610667 85.333333-0.554667-0.149333-21.162666c0.042667-14.592 6.016-25.429333 23.509333-42.048 5.866667-5.589333 11.136-10.176 17.194667-15.402667 4.48-3.84 9.344-8.085333 15.189333-13.354667 12.16-10.944 25.728-24.106667 37.696-40.277333 32.341333-43.669333 24.789333-98.858667-1.066667-138.346667C620.650667 307.157333 572.288 277.333333 511.765333 277.333333c-52.352 0-92.949333 16.938667-120.362666 45.589334-26.666667 27.882667-37.141333 63.018667-37.248 93.226666v10.069334h85.333333zM469.482667 661.333333v85.504h85.333333V661.333333h-85.333333z" p-id="2106"></path></svg></i><span class="name">question-circle</span></div> <div class="icon"><i><svg t="1713877746418" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2247" width="200" height="200"><path d="M512 78.848l21.162667 12.096c69.717333 39.850667 150.677333 65.344 215.466666 80.896 32.149333 7.722667 59.776 12.864 79.274667 16.042667a824.170667 824.170667 0 0 0 28.437333 4.16l1.386667 0.170666 0.32 0.042667L896 196.48v361.706667l-0.576 3.498666-42.090667-7.04c42.090667 7.04 42.069333 7.04 42.069334 7.082667v0.042667l-0.021334 0.128-0.064 0.32-0.149333 0.917333-0.576 2.922667c-0.490667 2.410667-1.216 5.76-2.218667 9.898666a395.093333 395.093333 0 0 1-10.005333 33.856 495.637333 495.637333 0 0 1-51.797333 106.645334c-52.736 82.133333-146.069333 174.890667-306.773334 221.12l-11.797333 3.392-11.797333-3.413334c-160.704-46.208-254.037333-138.986667-306.773334-221.098666a495.616 495.616 0 0 1-51.797333-106.666667 394.88 394.88 0 0 1-10.005333-33.834667 262.314667 262.314667 0 0 1-2.773334-12.8l-0.170666-0.938666-0.064-0.32-0.021334-0.128v-0.042667c0-0.021333 0-0.042667 42.069334-7.061333l-42.090667 7.018666L128 558.186667V196.48l37.973333-4.224 0.298667-0.042667 1.386667-0.170666a826.026667 826.026667 0 0 0 28.437333-4.16c19.498667-3.2 47.146667-8.32 79.274667-16.042667 64.789333-15.552 145.749333-41.045333 215.466666-80.896L512 78.848z m-298.666667 192.682667v278.976a309.12 309.12 0 0 0 9.045334 31.701333c7.765333 22.72 21.056 54.186667 42.858666 88.128 42.026667 65.429333 116.16 141.034667 246.762667 181.696 130.602667-40.661333 204.757333-116.266667 246.762667-181.696a410.176 410.176 0 0 0 42.88-88.128A309.930667 309.930667 0 0 0 810.666667 550.506667V271.530667c-20.906667-3.498667-49.28-8.874667-81.962667-16.704C666.176 239.786667 586.026667 215.338667 512 176.618667c-74.026667 38.72-154.176 63.189333-216.704 78.208a1209.173333 1209.173333 0 0 1-81.962667 16.704z m517.098667 146.133333L486.933333 661.205333 328.746667 503.04l60.352-60.352 97.834666 97.834667 183.146667-183.146667 60.352 60.330667z" p-id="2248"></path></svg></i><span class="name">safe</span></div> <div class="icon"><i><svg t="1713877787968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2389" width="200" height="200"><path d="M384 320a128 128 0 1 1 256 0 128 128 0 0 1-256 0z m128-213.333333c-117.824 0-213.333333 95.509333-213.333333 213.333333 0 117.802667 95.509333 213.333333 213.333333 213.333333s213.333333-95.530667 213.333333-213.333333c0-117.824-95.509333-213.333333-213.333333-213.333333z m-170.666667 469.333333c-61.418667 0-119.68 18.709333-163.328 55.658667C133.653333 669.205333 106.666667 723.776 106.666667 789.312v64a64 64 0 0 0 64 64h682.666666a64 64 0 0 0 64-64v-64c0-65.536-27.008-120.106667-71.338666-157.653333-43.669333-36.949333-101.930667-55.68-163.328-55.68H341.333333zM192 789.333333c0-40.490667 15.978667-71.253333 41.130667-92.544C258.944 674.922667 296.704 661.333333 341.333333 661.333333h341.333334c44.629333 0 82.346667 13.589333 108.202666 35.456C816 718.08 832 748.842667 832 789.333333v42.666667H192v-42.666667z" p-id="2390"></path></svg></i><span class="name">user</span></div></div>
+            </body>
+            <style>
+            .main{
+                width:1100px;
+                margin:0 auto;
+                padding:20px;
+                display:flex;
+                flex-wrap:wrap;
+            }
+            .icon{
+                width:150px;
+                padding: 10px;
+                font-size: 14px;
+                display:flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+            svg{
+                width:30px;
+                height:30px;
+            }
+            </style>
+        </html>
\ No newline at end of file

src/assets/icons/language.svg

+<svg t="1713878019362" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2673" width="200" height="200"><path d="M661.333333 192H423.253333l-18.773333-93.696-83.648 16.725333L336.213333 192H106.666667v85.333333h95.893333c5.674667 17.92 14.08 42.090667 25.578667 69.098667 19.754667 46.464 49.664 104.021333 92.224 152.256-38.485333 29.12-81.344 55.594667-118.933334 76.8a1437.866667 1437.866667 0 0 1-84.48 43.925333l-5.013333 2.346667-1.237333 0.576-0.341334 0.149333L128 661.333333c17.621333 38.869333 17.706667 38.826667 17.706667 38.826667l0.106666-0.064 0.426667-0.192 1.557333-0.704c1.322667-0.618667 3.242667-1.493333 5.674667-2.666667 4.906667-2.325333 11.946667-5.696 20.650667-10.026666a1525.802667 1525.802667 0 0 0 69.205333-36.693334c42.581333-24.021333 94.314667-55.936 140.672-92.48 46.336 36.544 98.090667 68.48 140.672 92.48a1525.546667 1525.546667 0 0 0 75.434667 39.765334l-17.002667 40.64-68.096 171.370666 79.317333 31.509334 40.149334-101.077334h181.696l40.170666 101.077334 79.296-31.509334-67.84-170.666666L767.402667 490.666667h-84.117334l-50.176 120.021333-1.237333-0.597333a1441.92 1441.92 0 0 1-65.28-34.624c-37.610667-21.184-80.469333-47.658667-118.933333-76.8 42.538667-48.213333 72.469333-105.749333 92.224-152.234667A782.933333 782.933333 0 0 0 565.418667 277.333333H661.333333V192z m-200 121.045333c-18.176 42.752-43.797333 90.645333-77.333333 128.789334-33.557333-38.144-59.157333-86.037333-77.333333-128.789334A694.826667 694.826667 0 0 1 292.650667 277.333333h182.698666a694.826667 694.826667 0 0 1-14.016 35.712z m320.576 433.642667h-113.194666L725.333333 611.306667 781.909333 746.666667z" p-id="2674"></path></svg>
\ No newline at end of file

src/assets/icons/mic-fill.svg

+<svg t="1713941985445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2531" width="200" height="200"><path d="M512 597.333333c-35.562667 0-65.770667-12.437333-90.666667-37.333333C396.437333 535.104 384 504.896 384 469.333333V213.333333c0-35.562667 12.437333-65.770667 37.333333-90.666666C446.229333 97.770667 476.437333 85.333333 512 85.333333c35.562667 0 65.770667 12.437333 90.666667 37.333334C627.562667 147.562667 640 177.770667 640 213.333333v256c0 35.562667-12.437333 65.770667-37.333333 90.666667C577.770667 584.896 547.562667 597.333333 512 597.333333z m-42.666667 256v-88.533333c-65.429333-9.237333-121.408-36.970667-167.978666-83.2s-74.837333-102.4-84.821334-168.533333c-1.429333-12.096 1.770667-22.4 9.6-30.933334 7.829333-8.533333 17.770667-12.8 29.866667-12.8s22.229333 4.096 30.421333 12.288A61.866667 61.866667 0 0 1 302.933333 512c9.962667 49.770667 34.666667 90.666667 74.154667 122.666667C416.554667 666.666667 461.546667 682.666667 512 682.666667c51.2 0 96.362667-16.170667 135.466667-48.512 39.104-32.341333 63.637333-73.066667 73.6-122.154667a61.909333 61.909333 0 0 1 16.554666-30.378667c8.192-8.170667 18.325333-12.266667 30.378667-12.288 12.096 0 22.037333 4.266667 29.866667 12.8 7.829333 8.533333 11.029333 18.837333 9.6 30.933334-9.962667 64.704-38.037333 120.533333-84.266667 167.466666-46.229333 46.933333-102.4 75.029333-168.533333 84.266667V853.333333c0 12.096-4.096 22.229333-12.288 30.421334-8.192 8.192-18.325333 12.266667-30.378667 12.245333-12.096 0-22.208-4.096-30.378667-12.288-8.170667-8.192-12.266667-18.325333-12.288-30.378667z" p-id="2532"></path></svg>
\ No newline at end of file

src/assets/icons/mic-off.svg

+<svg t="1714029340550" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4582" width="200" height="200"><path d="M55.168 55.168a42.666667 42.666667 0 0 1 60.330667 0l640 639.978667s0 0.042667 0.042666 0.042666l213.290667 213.312a42.666667 42.666667 0 1 1-60.330667 60.330667l-184.789333-184.768A341.333333 341.333333 0 0 1 170.666667 511.701333V426.666667a42.666667 42.666667 0 1 1 85.333333 0v85.973333a256 256 0 0 0 406.826667 210.517333L55.168 115.498667a42.666667 42.666667 0 0 1 0-60.330667zM810.666667 384a42.666667 42.666667 0 0 1 42.666666 42.666667v85.44a346.453333 346.453333 0 0 1-5.333333 59.84 42.666667 42.666667 0 0 1-84.053333-14.933334 261.12 261.12 0 0 0 4.053333-45.077333V426.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z" p-id="4583"></path><path d="M512 778.666667a42.666667 42.666667 0 0 1 42.666667 42.666666V938.666667a42.666667 42.666667 0 1 1-85.333334 0v-117.333334a42.666667 42.666667 0 0 1 42.666667-42.666666zM439.722667 59.52A170.666667 170.666667 0 0 1 682.666667 213.056v185.429333a42.666667 42.666667 0 0 1-85.333334 0v-185.024a85.333333 85.333333 0 0 0-161.557333-37.717333 42.666667 42.666667 0 0 1-76.245333-38.357333 170.666667 170.666667 0 0 1 80.192-77.909334zM384 341.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v127.978667a85.333333 85.333333 0 0 0 145.642666 60.288 42.666667 42.666667 0 1 1 60.288 60.373333A170.666667 170.666667 0 0 1 341.333333 512.042667V384a42.666667 42.666667 0 0 1 42.666667-42.666667z" p-id="4584"></path></svg>
\ No newline at end of file

src/assets/icons/mic.svg

+<svg t="1713941552920" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2389" width="200" height="200"><path d="M512 42.666667a170.666667 170.666667 0 0 0-170.666667 170.666666v298.666667a170.666667 170.666667 0 0 0 341.333334 0V213.333333a170.666667 170.666667 0 0 0-170.666667-170.666666z m-60.330667 110.336A85.333333 85.333333 0 0 1 597.333333 213.333333v298.666667a85.333333 85.333333 0 1 1-170.666666 0V213.333333a85.333333 85.333333 0 0 1 25.002666-60.330666zM256 426.666667a42.666667 42.666667 0 1 0-85.333333 0v85.333333a341.333333 341.333333 0 0 0 298.666666 338.666667V938.666667a42.666667 42.666667 0 1 0 85.333334 0v-88A341.333333 341.333333 0 0 0 853.333333 512v-85.333333a42.666667 42.666667 0 1 0-85.333333 0v85.333333a256 256 0 0 1-512 0v-85.333333z" p-id="2390"></path></svg>
\ No newline at end of file

src/assets/icons/moon.svg

+<svg t="1714007606639" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2307" width="200" height="200"><path d="M387.242667 130.453333c44.181333-14.058667 76.8 29.44 65.216 65.834667a298.389333 298.389333 0 0 0-13.994667 90.645333c0 164.906667 133.696 298.602667 298.602667 298.602667 31.68 0 62.122667-4.906667 90.645333-13.994667 36.416-11.584 79.893333 21.034667 65.834667 65.216C841.770667 799.424 689.493333 917.333333 509.546667 917.333333 287.061333 917.333333 106.666667 736.96 106.666667 514.432 106.666667 334.506667 224.576 182.229333 387.242667 130.453333zM356.48 236.16C258.389333 290.197333 192 394.602667 192 514.432 192 689.834667 334.186667 832 509.568 832c119.829333 0 224.234667-66.389333 278.293333-164.48-16.64 2.218667-33.578667 3.349333-50.773333 3.349333-212.053333 0-383.957333-171.904-383.957333-383.936 0-17.216 1.152-34.176 3.349333-50.794666z" p-id="2308"></path></svg>
\ No newline at end of file

src/assets/icons/pdf.svg

+<svg t="1714038298260" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1977" width="200" height="200"><path d="M921.6 281.6v628.629333c0 62.826667-51.456 113.770667-114.944 113.770667H217.344C153.856 1024 102.4 973.056 102.4 910.229333V113.706667C102.4 50.944 153.856 0 217.344 0h430.805333L921.6 281.6z" fill="#D43030" p-id="1978"></path><path d="M648.149333 0L921.6 281.6H701.845333c-29.632 0-53.696-20.693333-53.696-52.693333V0z" fill="#E56060" p-id="1979"></path><path d="M640.042667 595.626667a315.690667 315.690667 0 0 0-65.472 8.106666 340.970667 340.970667 0 0 1-64.981334-90.410666c17.984-62.869333 18.794667-105.728 5.376-126.037334a33.856 33.856 0 0 0-26.816-14.762666 33.237333 33.237333 0 0 0-32.512 18.282666c-18.773333 33.578667 8.341333 100.202667 20.970667 127.146667a835.989333 835.989333 0 0 1-55.296 139.733333c-100.352 46.293333-103.317333 74.410667-103.317333 84.544 0.362667 12.501333 7.189333 23.68 17.706666 28.949334 4.565333 3.136 10.026667 4.693333 15.573334 4.394666 26.794667 0 56.32-31.594667 88.832-93.333333a687.402667 687.402667 0 0 1 123.968-42.858667 128.896 128.896 0 0 0 77.312 33.856c17.706667 0 53.653333 0 53.653333-38.506666 0.298667-13.056-6.954667-37.973333-54.997333-39.125334v0.042667z m-286.912 147.754666h-3.2a82.24 82.24 0 0 1 37.546666-32.746666 70.954667 70.954667 0 0 1-34.346666 32.746666z m128.298666-335.829333a6.016 6.016 0 0 1 4.266667 0h3.221333c5.546667 18.922667 5.546667 39.04 0 57.962667a97.792 97.792 0 0 1-7.488-57.962667z m53.696 218.453333c-24.149333 6.101333-47.914667 13.653333-71.146666 22.613334v-2.325334h-2.154667a944.938667 944.938667 0 0 0 31.445333-76.48v-2.346666a339.84 339.84 0 0 0 41.557334 55.04h-2.922667l3.2 3.498666z m107.306667 14.805334a85.333333 85.333333 0 0 1-31.658667-7.530667 108.586667 108.586667 0 0 1 26.858667-2.304c20.650667 0 24.96 5.482667 24.96 8.96-6.613333 1.962667-13.632 2.261333-20.394667 0.853333h0.256z" fill="#FFFFFF" p-id="1980"></path></svg>
\ No newline at end of file

src/assets/icons/phone-fill.svg

+<svg t="1713942094892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2815" width="200" height="200"><path d="M362.581333 163.968a42.666667 42.666667 0 0 1 37.312 21.973333l52.181334 93.994667a42.666667 42.666667 0 0 1 0.853333 39.786667l-50.261333 100.565333s14.570667 74.901333 75.541333 135.893333c60.970667 60.970667 135.637333 75.306667 135.637333 75.306667l100.544-50.282667a42.666667 42.666667 0 0 1 39.808 0.853334l94.293334 52.437333A42.666667 42.666667 0 0 1 870.4 671.786667v108.224c0 55.125333-51.2 94.933333-103.424 77.312-107.264-36.202667-273.770667-105.109333-379.306667-210.645334-105.514667-105.514667-174.442667-272.021333-210.624-379.285333-17.621333-52.224 22.186667-103.424 77.290667-103.424h108.224z" p-id="2816"></path></svg>
\ No newline at end of file

src/assets/icons/phone-hangup.svg

+<svg t="1714014198485" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2733" width="200" height="200"><path d="M880.725333 646.912a42.666667 42.666667 0 0 1-41.898666 10.858667l-103.381334-29.568a42.666667 42.666667 0 0 1-28.757333-27.52l-35.541333-106.666667s-63.274667-42.666667-149.525334-42.666667c-86.229333 0-149.141333 42.666667-149.141333 42.666667l-35.541333 106.645333a42.666667 42.666667 0 0 1-28.778667 27.52l-103.722667 29.610667a42.666667 42.666667 0 0 1-41.877333-10.858667l-76.544-76.522666c-38.976-38.997333-30.933333-103.338667 18.474667-127.786667 101.44-50.282667 267.904-119.274667 417.130666-119.274667 149.248 0 315.733333 68.992 417.152 119.253334 49.386667 24.469333 57.450667 88.810667 18.474667 127.786666l-76.522667 76.522667z" p-id="2734"></path></svg>
\ No newline at end of file

src/assets/icons/phone.svg

+<svg t="1713942075745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2673" width="200" height="200"><path d="M671.061333 112.896a64 64 0 0 1 90.496 0l134.037334 134.037333 3.242666 7.552-39.232 16.810667c39.232-16.810667 39.253333-16.768 39.253334-16.746667l0.042666 0.085334 0.064 0.170666 0.170667 0.384a47.637333 47.637333 0 0 1 1.365333 3.584c0.725333 2.069333 1.642667 4.8 2.581334 8.149334 1.92 6.677333 4.032 15.872 5.546666 27.413333 3.050667 23.168 3.690667 55.466667-4.352 95.637333-16.128 80.64-66.432 189.696-195.52 318.784-129.066667 129.066667-238.144 179.392-318.784 195.52-40.170667 8.021333-72.469333 7.402667-95.616 4.352a193.322667 193.322667 0 0 1-27.434666-5.546666 129.28 129.28 0 0 1-11.733334-3.968l-0.384-0.149334-0.149333-0.085333-0.085333-0.021333c-0.042667 0-0.085333-0.042667 16.725333-39.253334l-16.810667 39.210667-7.552-3.221333-134.016-134.037334a64 64 0 0 1 0-90.517333l120.682667-120.682667a64 64 0 0 1 90.496 0l83.861333 83.861334c5.269333-2.965333 11.306667-6.506667 17.984-10.666667 27.733333-17.344 66.602667-45.546667 109.354667-88.277333 42.730667-42.730667 70.933333-81.621333 88.256-109.354667 4.181333-6.677333 7.722667-12.693333 10.666667-17.962667l-83.84-83.861333a64 64 0 0 1 0-90.517333l120.682666-120.682667z m15.082667 286.613333c39.616 15.850667 39.594667 15.872 39.594667 15.872v0.042667l-0.021334 0.042667-0.064 0.149333-0.149333 0.362667-0.426667 1.024-1.472 3.349333c-1.237333 2.773333-3.029333 6.634667-5.44 11.434667-4.8 9.621333-12.053333 23.061333-22.250666 39.36-20.373333 32.618667-52.522667 76.693333-100.288 124.48-47.786667 47.786667-91.861333 79.914667-124.458667 100.266666-16.298667 10.218667-29.738667 17.472-39.36 22.272a298.410667 298.410667 0 0 1-14.784 6.890667l-1.066667 0.426667-0.341333 0.170666-0.128 0.042667-0.064 0.021333h-0.021333c-0.021333 0.021333-0.042667 0.021333-15.872-39.594666l15.829333 39.616-26.112 10.453333-110.4-110.4-90.517333 90.517333 105.664 105.642667c2.922667 0.682667 6.762667 1.450667 11.52 2.069333 14.336 1.898667 37.184 2.688 67.733333-3.413333 60.8-12.16 155.349333-52.373333 275.178667-172.202667 119.808-119.808 160.021333-214.4 172.16-275.178666 6.122667-30.528 5.333333-53.397333 3.434666-67.712a119.424 119.424 0 0 0-2.048-11.52l-105.664-105.664-90.517333 90.496 110.4 110.421333-10.453333 26.112-39.594667-15.850667z" p-id="2674"></path></svg>
\ No newline at end of file

src/assets/icons/plus-circle.svg

+<svg t="1713930731698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2105" width="200" height="200"><path d="M512 170.666667C323.477333 170.666667 170.666667 323.498667 170.666667 512c0 188.522667 152.810667 341.333333 341.333333 341.333333 188.501333 0 341.333333-152.810667 341.333333-341.333333 0-188.501333-152.832-341.333333-341.333333-341.333333zM85.333333 512C85.333333 276.373333 276.352 85.333333 512 85.333333s426.666667 191.04 426.666667 426.666667c0 235.648-191.018667 426.666667-426.666667 426.666667S85.333333 747.669333 85.333333 512z m469.333334-42.666667v-128h-85.333334v128h-128v85.333334h128v128h85.333334v-128h127.978666v-85.333334h-128z" p-id="2106"></path></svg>
\ No newline at end of file

src/assets/icons/question-circle.svg

+<svg t="1713876625455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2105" width="200" height="200"><path d="M170.666667 512c0-188.522667 152.810667-341.333333 341.333333-341.333333s341.333333 152.810667 341.333333 341.333333-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512zM512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m-72.533333 340.885334v-9.856a50.56 50.56 0 0 1 13.568-34.453334c8.64-9.002667 25.450667-19.242667 58.709333-19.242666 31.253333 0 52.970667 14.933333 64.064 31.850666 11.818667 18.090667 9.493333 33.258667 3.882667 40.832-7.018667 9.450667-15.701333 18.197333-26.218667 27.648-3.2 2.88-7.125333 6.314667-11.349333 9.984-7.573333 6.570667-16.021333 13.952-22.784 20.373334C495.381333 516.16 469.333333 547.968 469.333333 597.333333l0.149334 21.610667 85.333333-0.554667-0.149333-21.162666c0.042667-14.592 6.016-25.429333 23.509333-42.048 5.866667-5.589333 11.136-10.176 17.194667-15.402667 4.48-3.84 9.344-8.085333 15.189333-13.354667 12.16-10.944 25.728-24.106667 37.696-40.277333 32.341333-43.669333 24.789333-98.858667-1.066667-138.346667C620.650667 307.157333 572.288 277.333333 511.765333 277.333333c-52.352 0-92.949333 16.938667-120.362666 45.589334-26.666667 27.882667-37.141333 63.018667-37.248 93.226666v10.069334h85.333333zM469.482667 661.333333v85.504h85.333333V661.333333h-85.333333z" p-id="2106"></path></svg>
\ No newline at end of file

src/assets/icons/record.svg

+<svg t="1714029310885" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4440" width="200" height="200"><path d="M512 170.666667C323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333 341.333333-152.810667 341.333333-341.333333S700.522667 170.666667 512 170.666667zM85.333333 512C85.333333 276.352 276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512z m426.666667-170.666667a170.666667 170.666667 0 1 0 0 341.333334 170.666667 170.666667 0 0 0 0-341.333334z" p-id="4441"></path></svg>
\ No newline at end of file

src/assets/icons/safe.svg

+<svg t="1713877746418" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2247" width="200" height="200"><path d="M512 78.848l21.162667 12.096c69.717333 39.850667 150.677333 65.344 215.466666 80.896 32.149333 7.722667 59.776 12.864 79.274667 16.042667a824.170667 824.170667 0 0 0 28.437333 4.16l1.386667 0.170666 0.32 0.042667L896 196.48v361.706667l-0.576 3.498666-42.090667-7.04c42.090667 7.04 42.069333 7.04 42.069334 7.082667v0.042667l-0.021334 0.128-0.064 0.32-0.149333 0.917333-0.576 2.922667c-0.490667 2.410667-1.216 5.76-2.218667 9.898666a395.093333 395.093333 0 0 1-10.005333 33.856 495.637333 495.637333 0 0 1-51.797333 106.645334c-52.736 82.133333-146.069333 174.890667-306.773334 221.12l-11.797333 3.392-11.797333-3.413334c-160.704-46.208-254.037333-138.986667-306.773334-221.098666a495.616 495.616 0 0 1-51.797333-106.666667 394.88 394.88 0 0 1-10.005333-33.834667 262.314667 262.314667 0 0 1-2.773334-12.8l-0.170666-0.938666-0.064-0.32-0.021334-0.128v-0.042667c0-0.021333 0-0.042667 42.069334-7.061333l-42.090667 7.018666L128 558.186667V196.48l37.973333-4.224 0.298667-0.042667 1.386667-0.170666a826.026667 826.026667 0 0 0 28.437333-4.16c19.498667-3.2 47.146667-8.32 79.274667-16.042667 64.789333-15.552 145.749333-41.045333 215.466666-80.896L512 78.848z m-298.666667 192.682667v278.976a309.12 309.12 0 0 0 9.045334 31.701333c7.765333 22.72 21.056 54.186667 42.858666 88.128 42.026667 65.429333 116.16 141.034667 246.762667 181.696 130.602667-40.661333 204.757333-116.266667 246.762667-181.696a410.176 410.176 0 0 0 42.88-88.128A309.930667 309.930667 0 0 0 810.666667 550.506667V271.530667c-20.906667-3.498667-49.28-8.874667-81.962667-16.704C666.176 239.786667 586.026667 215.338667 512 176.618667c-74.026667 38.72-154.176 63.189333-216.704 78.208a1209.173333 1209.173333 0 0 1-81.962667 16.704z m517.098667 146.133333L486.933333 661.205333 328.746667 503.04l60.352-60.352 97.834666 97.834667 183.146667-183.146667 60.352 60.330667z" p-id="2248"></path></svg>
\ No newline at end of file

src/assets/icons/screenshot.svg

+<svg t="1714029191173" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4156" width="200" height="200"><path d="M298.666667 725.333333V42.666667h-85.333334v170.666666H42.666667v85.333334h170.666666v426.666666a85.333333 85.333333 0 0 0 85.333334 85.333334h426.666666v170.666666h85.333334v-170.666666h170.666666v-85.333334m-256-85.333333h85.333334V298.666667a85.333333 85.333333 0 0 0-85.333334-85.333334H384v85.333334h341.333333v341.333333z" p-id="4157"></path></svg>
\ No newline at end of file

src/assets/icons/shared-screen.svg

+<svg t="1714029226282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4298" width="200" height="200"><path d="M149.333333 149.333333a85.333333 85.333333 0 0 0-85.333333 85.333334v439.466666a85.333333 85.333333 0 0 0 85.333333 85.333334h150.613334a42.666667 42.666667 0 0 0 0-85.333334H149.333333V234.666667h725.333334v439.466666h-166.4a42.666667 42.666667 0 0 0 0 85.333334H874.666667a85.333333 85.333333 0 0 0 85.333333-85.333334V234.666667a85.333333 85.333333 0 0 0-85.333333-85.333334H149.333333z m189.781334 738.986667h345.770666c24.533333 0 36.864-29.866667 19.626667-47.530667L532.053333 656.426667a27.413333 27.413333 0 0 0-40.106666 0l-172.458667 184.362666c-17.237333 17.621333-4.864 47.530667 19.626667 47.530667z" p-id="4299"></path></svg>
\ No newline at end of file

src/assets/icons/sun.svg

+<svg t="1714007585660" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2165" width="200" height="200"><path d="M448 106.666667h128v128h-128V106.666667z m64 298.666666a106.666667 106.666667 0 1 0 0 213.333334 106.666667 106.666667 0 0 0 0-213.333334z m-192 106.666667a192 192 0 1 1 384 0 192 192 0 0 1-384 0z m256 405.333333v-128h-128v128h128z m341.333333-341.333333h-128v-128h128v128z m-682.666666 0v-128H106.666667v128h128z m609.194666 177.365333l-90.496 90.496-90.517333-90.496 90.517333-90.517333 90.496 90.517333z m-573.226666-392.213333l90.517333-90.517333-90.517333-90.496-90.496 90.496 90.496 90.517333z m0 482.709333l-90.496-90.496 90.517333-90.517333 90.517333 90.517333-90.517333 90.496z m392.234666-573.226666l90.496 90.517333 90.517334-90.517333-90.517334-90.496-90.496 90.496z" p-id="2166"></path></svg>
\ No newline at end of file

src/assets/icons/swap.svg

+<svg t="1714029151207" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4014" width="200" height="200"><path d="M853.333333 746.666667v149.333333c0 23.466667-19.2 42.666667-42.666666 42.666667C410.026667 938.666667 85.333333 613.973333 85.333333 213.333333c0-23.466667 19.2-42.666667 42.666667-42.666666h149.333333c23.466667 0 42.666667 19.2 42.666667 42.666666 0 53.333333 8.533333 104.533333 24.32 152.32 4.693333 14.933333 1.28 31.573333-10.666667 42.666667l-93.866666 94.293333a641.92 641.92 0 0 0 281.173333 281.173334l93.866667-93.866667c11.946667-11.52 28.586667-14.933333 43.52-10.24C706.133333 695.466667 757.333333 704 810.666667 704c23.466667 0 42.666667 19.2 42.666666 42.666667z m-170.666666-426.666667h-149.333334L768 85.333333l-42.666667-42.666666-234.666666 234.666666V128h-64v256h256v-64z m42.666666-64v64h149.333334L640 554.666667l42.666667 42.666666 234.666666-234.666666v149.333333h64V256H725.333333z" p-id="4015"></path></svg>
\ No newline at end of file

src/assets/icons/up-circle.svg

+<svg t="1714116381592" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1833" width="200" height="200"><path d="M170.666667 512c0-188.522667 152.810667-341.333333 341.333333-341.333333s341.333333 152.810667 341.333333 341.333333-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512zM512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m211.2 492.181334l-211.2-211.2-211.2 211.2L361.173333 637.866667 512 487.04l150.848 150.826667 60.352-60.330667z" p-id="1834"></path></svg>
\ No newline at end of file

src/assets/icons/user-group.svg

+<svg t="1714034521236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2307" width="200" height="200"><path d="M277.333333 320a106.666667 106.666667 0 1 1 213.333334 0 106.666667 106.666667 0 0 1-213.333334 0z m106.666667-192a192 192 0 1 0 0 384 192 192 0 0 0 0-384z m298.666667 277.333333a42.666667 42.666667 0 1 1 85.333333 0 42.666667 42.666667 0 0 1-85.333333 0z m42.666666-128a128 128 0 1 0 0 256 128 128 0 0 0 0-256zM85.333333 725.333333a170.666667 170.666667 0 0 1 170.666667-170.666666h256a170.666667 170.666667 0 0 1 170.666667 170.666666v170.666667H85.333333v-170.666667z m170.666667-85.333333a85.333333 85.333333 0 0 0-85.333333 85.333333v85.333334h426.666666v-85.333334a85.333333 85.333333 0 0 0-85.333333-85.333333H256z m682.666667 85.333333a128 128 0 0 0-128-128h-85.333334v85.333334h85.333334a42.666667 42.666667 0 0 1 42.666666 42.666666v42.666667h-128v85.333333h213.333334v-128z" p-id="2308"></path></svg>
\ No newline at end of file

src/assets/icons/user.svg

+<svg t="1713877787968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2389" width="200" height="200"><path d="M384 320a128 128 0 1 1 256 0 128 128 0 0 1-256 0z m128-213.333333c-117.824 0-213.333333 95.509333-213.333333 213.333333 0 117.802667 95.509333 213.333333 213.333333 213.333333s213.333333-95.530667 213.333333-213.333333c0-117.824-95.509333-213.333333-213.333333-213.333333z m-170.666667 469.333333c-61.418667 0-119.68 18.709333-163.328 55.658667C133.653333 669.205333 106.666667 723.776 106.666667 789.312v64a64 64 0 0 0 64 64h682.666666a64 64 0 0 0 64-64v-64c0-65.536-27.008-120.106667-71.338666-157.653333-43.669333-36.949333-101.930667-55.68-163.328-55.68H341.333333zM192 789.333333c0-40.490667 15.978667-71.253333 41.130667-92.544C258.944 674.922667 296.704 661.333333 341.333333 661.333333h341.333334c44.629333 0 82.346667 13.589333 108.202666 35.456C816 718.08 832 748.842667 832 789.333333v42.666667H192v-42.666667z" p-id="2390"></path></svg>
\ No newline at end of file

src/assets/icons/video.svg

+<svg t="1714038446226" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2121" width="200" height="200"><path d="M921.6 281.6v628.629333c0 62.826667-51.456 113.770667-114.944 113.770667H217.344C153.856 1024 102.4 973.056 102.4 910.229333V113.706667C102.4 50.944 153.856 0 217.344 0h430.805333L921.6 281.6z" fill="#3E81FD" p-id="2122"></path><path d="M422.4 546.133333v-120.704l104.533333 60.352 104.533334 60.352-104.533334 60.352-104.533333 60.352V546.133333z" fill="#FFFFFF" p-id="2123"></path><path d="M648.149333 0L921.6 281.6H701.845333c-29.632 0-53.696-20.693333-53.696-52.693333V0z" fill="#78A7FE" p-id="2124"></path></svg>
\ No newline at end of file

src/assets/icons/view-gallery.svg

+<svg t="1714024456088" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3301" width="200" height="200"><path d="M0 0m85.333333 0l108.608 0q85.333333 0 85.333334 85.333333l0 108.608q0 85.333333-85.333334 85.333334l-108.608 0q-85.333333 0-85.333333-85.333334l0-108.608q0-85.333333 85.333333-85.333333Z" p-id="3302"></path><path d="M0 372.373333m85.333333 0l853.333334 0q85.333333 0 85.333333 85.333334l0 480.981333q0 85.333333-85.333333 85.333333l-853.333334 0q-85.333333 0-85.333333-85.333333l0-480.981333q0-85.333333 85.333333-85.333334Z" p-id="3303"></path><path d="M372.373333 0m85.333334 0l108.608 0q85.333333 0 85.333333 85.333333l0 108.608q0 85.333333-85.333333 85.333334l-108.608 0q-85.333333 0-85.333334-85.333334l0-108.608q0-85.333333 85.333334-85.333333Z" p-id="3304"></path><path d="M744.725333 0m85.333334 0l108.608 0q85.333333 0 85.333333 85.333333l0 108.608q0 85.333333-85.333333 85.333334l-108.608 0q-85.333333 0-85.333334-85.333334l0-108.608q0-85.333333 85.333334-85.333333Z" p-id="3305"></path></svg>
\ No newline at end of file

src/assets/icons/wifi.svg

+<svg t="1714034493068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2165" width="200" height="200"><path d="M512 277.333333c-152.64 0-290.24 64.064-387.52 166.890667L62.506667 385.578667C175.210667 266.453333 334.954667 192 512 192c177.066667 0 336.810667 74.432 449.514667 193.578667l-61.994667 58.645333C802.218667 341.397333 664.618667 277.333333 512 277.333333zM260.629333 579.754667A340.309333 340.309333 0 0 1 512 469.333333c99.456 0 188.928 42.474667 251.370667 110.421334l62.826666-57.749334A425.664 425.664 0 0 0 512 384a425.642667 425.642667 0 0 0-314.197333 138.005333l62.826666 57.749334z m121.877334 119.722666A170.197333 170.197333 0 0 1 512 640c51.776 0 98.133333 22.997333 129.493333 59.477333l64.704-55.616A255.509333 255.509333 0 0 0 512 554.666667a255.509333 255.509333 0 0 0-194.197333 89.173333l64.704 55.637333z m170.304 33.984a106.666667 106.666667 0 0 1 34.602666 23.125334L512 832l-75.434667-75.413333a106.666667 106.666667 0 0 1 116.266667-23.125334z" p-id="2166"></path></svg>
\ No newline at end of file

src/assets/icons/writing.svg

+<svg t="1714121843459" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4681" width="200" height="200"><path d="M710.698667 80.789333l211.2 211.2L321.066667 892.757333h-211.2v-211.2L710.72 80.810667zM195.2 716.949333v90.496h90.496l409.898667-409.877333-90.517334-90.517333L195.221333 716.928z m470.208-470.229333l90.517333 90.496 45.248-45.226667-90.496-90.538666-45.269333 45.269333z" p-id="4682"></path></svg>
\ No newline at end of file

src/components/global-avatar/index.vue

+<template>
+    <a-avatar :size="avatarSize" class="shrink-0">
+        <global-icon :icon="iconName" :size="iconSize" :color="color"></global-icon>
+    </a-avatar>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    avatarSize?: number
+    iconName?: string
+    iconSize?: number
+    color?: string
+}
+const ps = withDefaults(defineProps<Props>(), {
+    avatarSize: 40,
+    iconName: 'user',
+    iconSize: 20,
+    color: 'var(--color-bg-white)'
+})
+</script>
+<style lang="less" scoped></style>

src/components/global-icon/index.vue

+<template>
+    <!-- svg -->
+    <span v-bind="$attrs" class="flex" :style="{ color }" v-if="svg">
+        <svg aria-hidden="true" class="svg-icon" :style="getSvgStyle">
+            <use :xlink:href="`#icon-${icon}`" rel="external nofollow" />
+        </svg>
+    </span>
+    <!-- iconfont -->
+    <i class="iconfont" :class="`icon-${icon}`" :style="getIconStyle" v-else></i>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+const ps = defineProps({
+    className: {
+        type: String,
+        default: ''
+    },
+    icon: {
+        type: String,
+        default: ''
+    },
+    color: {
+        type: String,
+        default: 'var(--color-text-2)'
+    },
+    size: {
+        type: Number,
+        default: 16
+    },
+    svg: {
+        type: Boolean,
+        default: true
+    }
+})
+const getSvgStyle = computed(() => {
+    return {
+        width: ps.size + 'px',
+        height: ps.size + 'px'
+    }
+})
+const getIconStyle = computed(() => {
+    return {
+        fontSize: ps.size + 'px'
+    }
+})
+</script>
+<style lang="less" scoped>
+.svg-icon {
+    position: relative;
+    vertical-align: -1px;
+    fill: v-bind(color);
+}
+</style>

src/components/range-pickey/index.vue

+<template>
+    <div>
+        <a-radio-group v-model="active" v-if="showOptions">
+            <template v-for="(item, i) in radioGroupList" :key="i">
+                <a-radio :value="i" v-if="option.includes(i)">
+                    <template #radio="{ checked }">
+                        <a-tag size="large" :checked="checked" checkable>{{ item.label }}</a-tag>
+                    </template>
+                </a-radio>
+            </template>
+        </a-radio-group>
+        <a-range-picker
+            class="w-[260px]"
+            v-bind="$attrs"
+            v-model="dateValue"
+            :showTime="showTime"
+            :mode="mode"
+            :clearable="clearable"
+            :editable="editable"
+            :placeholder="placeholder"
+            :separator="separator"
+            :format="format"
+            :valueFormat="valueFormat"
+            :disabled-date="startDisabled"
+            @change="rangeChange"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import Day from '@/utils/dayjs'
+import type { Dayjs } from 'dayjs'
+
+type OptionType = 'default' | 'today' | 'yesterday' | 'days7' | 'currentMonth' | 'days30'
+interface RadioItem {
+    label: string
+    startDate: string
+    endDate: string
+}
+interface Props {
+    showOptions?: boolean
+    option?: OptionType[]
+    defaultOption?: OptionType
+    showTime?: boolean
+    mode?: 'date' | 'year' | 'quarter' | 'month' | 'week'
+    clearable?: boolean
+    editable?: boolean
+    placeholder?: string[]
+    separator?: string
+    format?: string
+    valueFormat?: string
+    startDate?: Date | number | string
+    endDate?: Date | number | string
+    minDate?: Date | number | string | Dayjs
+    maxDate?: Date | number | string | Dayjs
+}
+const ps = withDefaults(defineProps<Props>(), {
+    showOptions: true,
+    option: () => ['default', 'days7', 'days30'],
+    defaultOption: 'default',
+    showTime: false,
+    mode: 'date',
+    clearable: true,
+    editable: false,
+    placeholder: () => ['开始时间', '结束时间'],
+    separator: '-',
+    format: 'YYYY-MM-DD',
+    valueFormat: 'YYYYMMDD'
+})
+const modelStartDate = defineModel('startDate')
+const modelEndDate = defineModel('endDate')
+const dateValue = ref<[string, string]>(['', ''])
+const startTime = ref('')
+const finishTime = ref('')
+//开始日期Format
+const startFormat = (day: Dayjs = Day()) => {
+    return day.startOf('day').format(ps.valueFormat)
+}
+//结束日期Format
+const endFormat = (day: Dayjs = Day()) => {
+    return day.endOf('day').format(ps.valueFormat)
+}
+//默认配置radio
+const active = ref('')
+watch(active, (newVal) => {
+    setDate(newVal as OptionType)
+})
+const radioGroupList = reactive<{ [key in OptionType]: RadioItem }>({
+    default: {
+        label: '默认',
+        startDate: '',
+        endDate: ''
+    },
+    today: {
+        label: '今天',
+        startDate: startFormat(),
+        endDate: endFormat()
+    },
+    yesterday: {
+        label: '昨天',
+        startDate: startFormat(Day().subtract(1, 'days')),
+        endDate: endFormat(Day().subtract(1, 'days'))
+    },
+    days7: {
+        label: '近七天',
+        startDate: startFormat(Day().subtract(6, 'days')),
+        endDate: endFormat()
+    },
+    currentMonth: {
+        label: '本月',
+        startDate: startFormat(Day().startOf('month')),
+        endDate: endFormat(Day().endOf('month'))
+    },
+    days30: {
+        label: '近30天',
+        startDate: startFormat(Day().subtract(29, 'days')),
+        endDate: endFormat()
+    }
+})
+//radio-Button切换事件
+const setDate = (val: OptionType) => {
+    active.value = val
+    const radioSelect = radioGroupList[val]
+    if (radioSelect) {
+        startTime.value = radioSelect.startDate
+        finishTime.value = radioSelect.endDate
+    }
+    modelStartDate.value = startTime.value || ''
+    modelEndDate.value = finishTime.value || ''
+}
+//日期切换事件datetime
+const dateChange = () => {
+    active.value =
+        Object.keys(radioGroupList).find((key) => {
+            let radioSelect = radioGroupList[key as OptionType]
+            if (radioSelect.startDate == startTime.value && radioSelect.endDate == finishTime.value) {
+                return key
+            }
+        }) || ''
+    if (startTime.value && startTime.value != '0' && finishTime.value && finishTime.value != '0' && startTime.value > finishTime.value) {
+        startTime.value = finishTime.value
+    }
+}
+//日期切换事件rangetime
+const rangeChange = () => {
+    if (dateValue.value && dateValue.value.length) {
+        if (dateValue.value[0]) {
+            startTime.value = Day(dateValue.value[0]).second(0).format(ps.valueFormat)
+        }
+        if (dateValue.value[1]) {
+            finishTime.value = Day(dateValue.value[1]).second(59).format(ps.valueFormat)
+        }
+    } else {
+        startTime.value = ''
+        finishTime.value = ''
+    }
+    dateChange()
+}
+//将props的startDate和endDate的赋值给startTime和finishTime
+const changeDateByProps = () => {
+    if (ps.startDate !== '' && ps.startDate !== '0') {
+        if (!ps.format.includes('ss')) {
+            startTime.value = Day(ps.startDate).second(0).format(ps.valueFormat)
+        } else {
+            startTime.value = Day(ps.startDate).format(ps.valueFormat)
+        }
+    } else {
+        startTime.value = ''
+    }
+    if (ps.endDate !== '' && ps.endDate !== '0') {
+        if (!ps.format.includes('ss')) {
+            finishTime.value = Day(ps.endDate).second(59).format(ps.valueFormat)
+        } else {
+            finishTime.value = Day(ps.endDate).format(ps.valueFormat)
+        }
+    } else {
+        finishTime.value = ''
+    }
+    dateChange()
+}
+//监听props的startDate和endDate变化
+watch([() => ps.startDate, () => ps.endDate], () => {
+    nextTick(() => {
+        changeDateByProps()
+    })
+})
+watchEffect(() => {
+    dateValue.value = [startTime.value, finishTime.value]
+    modelStartDate.value = startTime.value || ''
+    modelEndDate.value = finishTime.value || ''
+})
+//设置开始时间的最小值
+const startDisabled = (time: Record<string, any>) => {
+    if (finishTime.value != '')
+        return (
+            time.valueOf() > Day(finishTime.value).format('x') ||
+            (ps.minDate && time.valueOf() < Day(ps.minDate).startOf('day')) ||
+            ((ps.maxDate && time.valueOf() > Day(ps.maxDate).endOf('day')) as boolean)
+        )
+    return false
+}
+onBeforeMount(() => {
+    active.value = ps.defaultOption
+    setDate(ps.defaultOption)
+})
+</script>
+<style lang="less" scoped>
+.arco-tag {
+    padding: 5px 16px;
+    &.arco-tag-checked,
+    &:hover {
+        background: var(--color-fill-2);
+        border-radius: 100px;
+        color: rgb(var(--primary-6));
+    }
+}
+.arco-radio-group .arco-radio {
+    margin-right: 12px;
+}
+</style>

src/configs/arco.ui.config.ts

 import projectUiConfig from '../../project.ui.config'
 
 // 改变ArcoUI框架的主题
-export function changeArcoTheme(themeName:string) {
-  if(themeName === 'dark') {
-    document.body.setAttribute('arco-theme', themeName)
-  } else {
-    document.body.removeAttribute('arco-theme')
-  }
+export function changeArcoTheme(themeName: string) {
+    if (themeName === 'dark') {
+        document.body.setAttribute('arco-theme', themeName)
+    } else {
+        document.body.removeAttribute('arco-theme')
+    }
 }
 
 // Arco的变量设置
 export const arcoUiConfig = {
-  // 白底主色 ==================
-  'primary-7': projectUiConfig.colors.primaryPressed,
-  'primary-6': projectUiConfig.colors.primary,
-  'primary-5': projectUiConfig.colors.primaryHover,
-  'primary-4': projectUiConfig.colors.primary,
-  'primary-3': projectUiConfig.colors.primaryDisable,
-  'primary-2': projectUiConfig.colors.primaryDisable,
-  'primary-1': projectUiConfig.colors.primaryDisable,
-  'color-bg-1': projectUiConfig.colors.themeBg1,
-  'color-bg-2': projectUiConfig.colors.themeBg2,
-  'color-bg-3': projectUiConfig.colors.themeBg3,
-  'color-bg-4': projectUiConfig.colors.themeBg4,
-  'color-bg-5': projectUiConfig.colors.themeBg5,
-  'color-text-1': projectUiConfig.colors.themeText1,
-  'color-text-2': projectUiConfig.colors.themeText2,
-  'color-text-3': projectUiConfig.colors.themeText3,
-  'color-text-4': projectUiConfig.colors.themeText4,
-  // 深底主色 ==================
-  'dark-primary-7': projectUiConfig.colors.darkPrimaryPressed,
-  'dark-primary-6': projectUiConfig.colors.darkPrimary,
-  'dark-primary-5': projectUiConfig.colors.darkPrimaryHover,
-  'dark-primary-4': projectUiConfig.colors.darkPrimary,
-  'dark-primary-3': projectUiConfig.colors.darkPrimaryDisable,
-  'dark-primary-2': projectUiConfig.colors.darkPrimaryDisable,
-  'dark-primary-1': projectUiConfig.colors.darkPrimaryDisable,
-  'dark-color-bg-1': projectUiConfig.colors.darkThemeBg1,
-  'dark-color-bg-2': projectUiConfig.colors.darkThemeBg2,
-  'dark-color-bg-3': projectUiConfig.colors.darkThemeBg3,
-  'dark-color-bg-4': projectUiConfig.colors.darkThemeBg4,
-  'dark-color-bg-5': projectUiConfig.colors.darkThemeBg5,
-  'dark-color-text-1': projectUiConfig.colors.darkThemeText1,
-  'dark-color-text-2': projectUiConfig.colors.darkThemeText2,
-  'dark-color-text-3': projectUiConfig.colors.darkThemeText3,
-  'dark-color-text-4': projectUiConfig.colors.darkThemeText4,
-  // 边框宽度 =================
-  'border-1': projectUiConfig.borderWidth.xs,
-  'border-2': projectUiConfig.borderWidth.sm,
-  'border-3': projectUiConfig.borderWidth.md,
-  // 边框圆角 ================
-  'border-radius-small': projectUiConfig.borderRadius.sm,
-  'border-radius-medium': projectUiConfig.borderRadius.md,
-  'border-radius-large': projectUiConfig.borderRadius.lg,
+    // 白底主色 ==================
+    'primary-7': projectUiConfig.colors.primaryPressed,
+    'primary-6': projectUiConfig.colors.primary,
+    'primary-5': projectUiConfig.colors.primaryHover,
+    'primary-4': projectUiConfig.colors.primaryActivated,
+    'primary-3': projectUiConfig.colors.primaryDisable,
+    'primary-2': projectUiConfig.colors.primaryDisable,
+    'primary-1': projectUiConfig.colors.primaryDisable,
+    'color-bg-1': projectUiConfig.colors.themeBg1,
+    'color-bg-2': projectUiConfig.colors.themeBg2,
+    'color-bg-3': projectUiConfig.colors.themeBg3,
+    'color-bg-4': projectUiConfig.colors.themeBg4,
+    'color-bg-5': projectUiConfig.colors.themeBg5,
+    'color-text-1': projectUiConfig.colors.themeText1,
+    'color-text-2': projectUiConfig.colors.themeText2,
+    'color-text-3': projectUiConfig.colors.themeText3,
+    'color-text-4': projectUiConfig.colors.themeText4,
+    // 深底主色 ==================
+    'dark-primary-7': projectUiConfig.colors.darkPrimaryPressed,
+    'dark-primary-6': projectUiConfig.colors.darkPrimary,
+    'dark-primary-5': projectUiConfig.colors.darkPrimaryHover,
+    'dark-primary-4': projectUiConfig.colors.darkPrimaryActivated,
+    'dark-primary-3': projectUiConfig.colors.darkPrimaryDisable,
+    'dark-primary-2': projectUiConfig.colors.darkPrimaryDisable,
+    'dark-primary-1': projectUiConfig.colors.darkPrimaryDisable,
+    'dark-color-bg-1': projectUiConfig.colors.darkThemeBg1,
+    'dark-color-bg-2': projectUiConfig.colors.darkThemeBg2,
+    'dark-color-bg-3': projectUiConfig.colors.darkThemeBg3,
+    'dark-color-bg-4': projectUiConfig.colors.darkThemeBg4,
+    'dark-color-bg-5': projectUiConfig.colors.darkThemeBg5,
+    'dark-color-text-1': projectUiConfig.colors.darkThemeText1,
+    'dark-color-text-2': projectUiConfig.colors.darkThemeText2,
+    'dark-color-text-3': projectUiConfig.colors.darkThemeText3,
+    'dark-color-text-4': projectUiConfig.colors.darkThemeText4,
+    // 边框宽度 =================
+    'border-1': projectUiConfig.borderWidth.xs,
+    'border-2': projectUiConfig.borderWidth.sm,
+    'border-3': projectUiConfig.borderWidth.md,
+    // 边框圆角 ================
+    'border-radius-small': projectUiConfig.borderRadius.sm,
+    'border-radius-medium': projectUiConfig.borderRadius.md,
+    'border-radius-large': projectUiConfig.borderRadius.lg
 }

src/configs/tailwind.ui.config.ts

 import projectUiConfig from '../../project.ui.config'
 
 // 改变ArcoUI框架的主题
-export function changeTailwindTheme(themeName:string) {
-  document.body.setAttribute('class', themeName)
+export function changeTailwindTheme(themeName: string) {
+    document.body.setAttribute('class', themeName)
 }
 
 // tailwind的UI变量设置
 export const tailwindUiConfig = {
-  // 定义主色，这里简化一点，就直接动态改变
-  colors: {
-    'primary-light': projectUiConfig.colors.primary,
-    'primary-hover-light': projectUiConfig.colors.primaryHover,
-    'primary-pressed-light': projectUiConfig.colors.primaryPressed,
-    'primary-activated-light': projectUiConfig.colors.primaryActivated,
-    'primary-disable-light': projectUiConfig.colors.primaryDisable,
-    'theme-bg1-light': projectUiConfig.colors.themeBg1,
-    'theme-bg2-light': projectUiConfig.colors.themeBg2,
-    'theme-bg3-light': projectUiConfig.colors.themeBg3,
-    'theme-bg4-light': projectUiConfig.colors.themeBg4,
-    'theme-bg5-light': projectUiConfig.colors.themeBg5,
-    'theme-text1-light': projectUiConfig.colors.themeText1,
-    'theme-text2-light': projectUiConfig.colors.themeText2,
-    'theme-text3-light': projectUiConfig.colors.themeText3,
-    'theme-text4-light': projectUiConfig.colors.themeText4,
-    'theme-text5-light': projectUiConfig.colors.themeText5,
-
-    'primary-dark': projectUiConfig.colors.darkPrimary,
-    'primary-hover-dark': projectUiConfig.colors.darkPrimaryHover,
-    'primary-pressed-dark': projectUiConfig.colors.darkPrimaryPressed,
-    'primary-activated-dark': projectUiConfig.colors.darkPrimaryActivated,
-    'primary-disable-dark': projectUiConfig.colors.darkPrimaryDisable,
-    'theme-bg1-dark': projectUiConfig.colors.darkThemeBg1,
-    'theme-bg2-dark': projectUiConfig.colors.darkThemeBg2,
-    'theme-bg3-dark': projectUiConfig.colors.darkThemeBg3,
-    'theme-bg4-dark': projectUiConfig.colors.darkThemeBg4,
-    'theme-bg5-dark': projectUiConfig.colors.darkThemeBg5,
-    'theme-text1-dark': projectUiConfig.colors.darkThemeText1,
-    'theme-text2-dark': projectUiConfig.colors.darkThemeText2,
-    'theme-text3-dark': projectUiConfig.colors.darkThemeText3,
-    'theme-text4-dark': projectUiConfig.colors.darkThemeText4,
-    'theme-text5-dark': projectUiConfig.colors.darkThemeText5,
-  },
-  // 定义间距
-  spacing: {
-    'xxs': projectUiConfig.spacing.xxs,
-    'xs': projectUiConfig.spacing.xs,
-    'sm': projectUiConfig.spacing.sm,
-    'md': projectUiConfig.spacing.md,
-    'lg': projectUiConfig.spacing.lg,
-    'xl': projectUiConfig.spacing.xl,
-    '2xl': projectUiConfig.spacing.x2l,
-    '3xl': projectUiConfig.spacing.x3l,
-    '4xl': projectUiConfig.spacing.x4l,
-    '5xl': projectUiConfig.spacing.x5l,
-    '6xl': projectUiConfig.spacing.x6l,
-    '7xl': projectUiConfig.spacing.x7l,
-    '8xl': projectUiConfig.spacing.x8l,
-    '9xl': projectUiConfig.spacing.x9l,
-  },
-  // 定义圆角
-  borderRadius: {
-    'xs': projectUiConfig.borderRadius.xs,
-    'sm': projectUiConfig.borderRadius.sm,
-    'md': projectUiConfig.borderRadius.md,
-    'lg': projectUiConfig.borderRadius.lg,
-    'xl': projectUiConfig.borderRadius.xl,
-  },
-  borderWidth: {
-    'xs': projectUiConfig.borderWidth.xs,
-    'sm': projectUiConfig.borderWidth.sm,
-    'md': projectUiConfig.borderWidth.md,
-    'lg': projectUiConfig.borderWidth.lg,
-    'xl': projectUiConfig.borderWidth.xl,
-  },
-  // 新加的角度
-  rotate: {
-    '30': '30deg',
-    '60': '60deg',
-  },
-  // 新加的缩放
-  scale: {
-    '20': '.2',
-    '25': '.25',
-    '30': '.3',
-    '66': '.66',
-    '80': '.8',
-    '200': '.2',
-  },
-  // 动画延时
-  transitionDelay: {
-    '1250': '1250ms',
-    '1500': '1500ms',
-    '1750': '1750ms',
-    '2000': '2000ms',
-    '2250': '2250ms',
-    '2500': '2500ms',
-    '2750': '2750ms',
-    '3000': '3000ms',
-  },
-  // 动画周期
-  transitionDuration: {
-    '1250': '1250ms',
-    '1500': '1500ms',
-    '1750': '1750ms',
-    '2000': '2000ms',
-    '2250': '2250ms',
-    '2500': '2500ms',
-    '2750': '2750ms',
-    '3000': '3000ms',
-  },
-  // 层级
-  zIndex: {
-    '60': '60',
-    '70': '70',
-    '80': '80',
-    '90': '90',
-    '100': '100',
-    '200': '200',
-    '300': '300',
-    '400': '400',
-    '500': '500',
-    '600': '600',
-    '700': '700',
-    '800': '800',
-    '900': '900',
-    '1000': '1000',
-    '1100': '1100',
-  },
-  backgroundColor: {
-
-  }
-}
+    // 定义主色，这里简化一点，就直接动态改变
+    colors: {
+        'primary-light': projectUiConfig.colors.primary,
+        'primary-hover-light': projectUiConfig.colors.primaryHover,
+        'primary-pressed-light': projectUiConfig.colors.primaryPressed,
+        'primary-activated-light': projectUiConfig.colors.primaryActivated,
+        'primary-disable-light': projectUiConfig.colors.primaryDisable,
+        'theme-bg1-light': projectUiConfig.colors.themeBg1,
+        'theme-bg2-light': projectUiConfig.colors.themeBg2,
+        'theme-bg3-light': projectUiConfig.colors.themeBg3,
+        'theme-bg4-light': projectUiConfig.colors.themeBg4,
+        'theme-bg5-light': projectUiConfig.colors.themeBg5,
+        'theme-text1-light': projectUiConfig.colors.themeText1,
+        'theme-text2-light': projectUiConfig.colors.themeText2,
+        'theme-text3-light': projectUiConfig.colors.themeText3,
+        'theme-text4-light': projectUiConfig.colors.themeText4,
+        'theme-text5-light': projectUiConfig.colors.themeText5,
+        'theme-fill1-light': projectUiConfig.colors.themeFill1,
+        'theme-fill2-light': projectUiConfig.colors.themeFill2,
+        'theme-fill3-light': projectUiConfig.colors.themeFill3,
+        'theme-fill4-light': projectUiConfig.colors.themeFill4,
+        'primary-dark': projectUiConfig.colors.darkPrimary,
+        'primary-hover-dark': projectUiConfig.colors.darkPrimaryHover,
+        'primary-pressed-dark': projectUiConfig.colors.darkPrimaryPressed,
+        'primary-activated-dark': projectUiConfig.colors.darkPrimaryActivated,
+        'primary-disable-dark': projectUiConfig.colors.darkPrimaryDisable,
+        'theme-bg1-dark': projectUiConfig.colors.darkThemeBg1,
+        'theme-bg2-dark': projectUiConfig.colors.darkThemeBg2,
+        'theme-bg3-dark': projectUiConfig.colors.darkThemeBg3,
+        'theme-bg4-dark': projectUiConfig.colors.darkThemeBg4,
+        'theme-bg5-dark': projectUiConfig.colors.darkThemeBg5,
+        'theme-text1-dark': projectUiConfig.colors.darkThemeText1,
+        'theme-text2-dark': projectUiConfig.colors.darkThemeText2,
+        'theme-text3-dark': projectUiConfig.colors.darkThemeText3,
+        'theme-text4-dark': projectUiConfig.colors.darkThemeText4,
+        'theme-text5-dark': projectUiConfig.colors.darkThemeText5,
+        'theme-fill1-dark': projectUiConfig.colors.darkThemeFill1,
+        'theme-fill2-dark': projectUiConfig.colors.darkThemeFill2,
+        'theme-fill3-dark': projectUiConfig.colors.darkThemeFill3,
+        'theme-fill4-dark': projectUiConfig.colors.darkThemeFill4
+    },
+    // 定义间距
+    spacing: {
+        xxs: projectUiConfig.spacing.xxs,
+        xs: projectUiConfig.spacing.xs,
+        sm: projectUiConfig.spacing.sm,
+        md: projectUiConfig.spacing.md,
+        lg: projectUiConfig.spacing.lg,
+        xl: projectUiConfig.spacing.xl,
+        '2xl': projectUiConfig.spacing.x2l,
+        '3xl': projectUiConfig.spacing.x3l,
+        '4xl': projectUiConfig.spacing.x4l,
+        '5xl': projectUiConfig.spacing.x5l,
+        '6xl': projectUiConfig.spacing.x6l,
+        '7xl': projectUiConfig.spacing.x7l,
+        '8xl': projectUiConfig.spacing.x8l,
+        '9xl': projectUiConfig.spacing.x9l
+    },
+    // 定义圆角
+    borderRadius: {
+        xs: projectUiConfig.borderRadius.xs,
+        sm: projectUiConfig.borderRadius.sm,
+        md: projectUiConfig.borderRadius.md,
+        lg: projectUiConfig.borderRadius.lg,
+        xl: projectUiConfig.borderRadius.xl
+    },
+    borderWidth: {
+        xs: projectUiConfig.borderWidth.xs,
+        sm: projectUiConfig.borderWidth.sm,
+        md: projectUiConfig.borderWidth.md,
+        lg: projectUiConfig.borderWidth.lg,
+        xl: projectUiConfig.borderWidth.xl
+    },
+    // 新加的角度
+    rotate: {
+        '30': '30deg',
+        '60': '60deg'
+    },
+    // 新加的缩放
+    scale: {
+        '20': '.2',
+        '25': '.25',
+        '30': '.3',
+        '66': '.66',
+        '80': '.8',
+        '200': '.2'
+    },
+    // 动画延时
+    transitionDelay: {
+        '1250': '1250ms',
+        '1500': '1500ms',
+        '1750': '1750ms',
+        '2000': '2000ms',
+        '2250': '2250ms',
+        '2500': '2500ms',
+        '2750': '2750ms',
+        '3000': '3000ms'
+    },
+    // 动画周期
+    transitionDuration: {
+        '1250': '1250ms',
+        '1500': '1500ms',
+        '1750': '1750ms',
+        '2000': '2000ms',
+        '2250': '2250ms',
+        '2500': '2500ms',
+        '2750': '2750ms',
+        '3000': '3000ms'
+    },
+    // 层级
+    zIndex: {
+        '60': '60',
+        '70': '70',
+        '80': '80',
+        '90': '90',
+        '100': '100',
+        '200': '200',
+        '300': '300',
+        '400': '400',
+        '500': '500',
+        '600': '600',
+        '700': '700',
+        '800': '800',
+        '900': '900',
\ No newline at end of file
+        '1000': '1000',
+        '1100': '1100'
+    },
+    backgroundColor: {}
+}

src/locale/en-US.ts

 // 不同的翻译文件都放在对应的模块里，可以在views里
 
-import localeApp from './en-US/app';
+import localeApp from './en-US/app'
+import localeMenu from './en-US/menu'
 
 export default {
-  'action.locale': 'Switch to English',
-  ...localeApp,
-};
+    'action.locale': 'Switch to English',
+    ...localeApp,
+    ...localeMenu
+}

src/locale/en-US/menu.ts

+export default {
+    'menu.remote': 'remote',
+    'menu.remote.contacts': 'contacts',
+    'menu.remote.events': 'events',
+    'menu.remote.experience': 'experience',
+    'menu.remote.resource': 'resource'
+}

src/locale/zh-CN.ts

 // 不同的翻译文件都放在对应的模块里，可以在views里
 
-import localeApp from './zh-CN/app';
+import localeApp from './zh-CN/app'
+import localeMenu from './zh-CN/menu'
 
 export default {
-  'action.locale': '切换为中文',
-  ...localeApp,
-};
+    'action.locale': '切换为中文',
+    ...localeApp,
+    ...localeMenu
+}

src/locale/zh-CN/menu.ts

+export default {
+    'menu.remote': '远程模块',
+    'menu.remote.contacts': '联系人',
+    'menu.remote.events': '进行中的事件',
+    'menu.remote.experience': '经验库',
+    'menu.remote.resource': '资源库'
+}

src/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import { createPinia } from 'pinia';
-import i18n from './locale';
+import { setupPinia } from './store/'
+import i18n from './locale'
 
 // import directive from './directive';
 
@@ -10,11 +10,15 @@ import i18n from './locale';
 import './assets/css/arco.style.css'
 import './assets/css/style.css'
 import './assets/css/tailwind.css'
+// svg插件需要的配置代码
+import 'virtual:svg-icons-register'
+// 加载图标
+import './assets/fonts/icons/iconfont.css'
 
 const app = createApp(App)
 
 app.use(router)
-app.use(createPinia())
+setupPinia(app)
 app.use(i18n)
 // app.use(directive);
 app.mount('#app')

src/router/index.ts

-import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import remote from './remote'
 
 const routes: Array<RouteRecordRaw> = [
     {
         path: '/',
-        component: () => import('../views/login/index.vue'),
-        meta: {
-            title: '登录',
-        }
+        component: () => import(/* webpackChunkName: "Layout" */ '@/views/layout/index.vue'),
+        name: 'Layout',
+        redirect: { name: 'Contacts' },
+        children: [{ ...remote }]
     },
+    {
+        path: '/login',
+        component: () => import(/* webpackChunkName: "Home" */ '@/views/login/index.vue'),
+        name: 'Login',
+        meta: { title: '登录' },
+        children: []
+    },
+    {
+        path: '/home',
+        component: () => import(/* webpackChunkName: "Home" */ '@/views/home/index.vue'),
+        name: 'Home',
+        meta: { title: '测试' },
+        children: []
+    },
+    {
+        path: '/404',
+        name: 'Error404',
+        component: () => import(/* webpackChunkName: "Error404" */ '@/views/error/index.vue'),
+        meta: { power: true, title: '404' }
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        component: () => import(/* webpackChunkName: "Error404" */ '@/views/error/index.vue'),
+        meta: { power: true, title: '404' }
+    }
 ]
 
 const router = createRouter({
@@ -15,4 +41,4 @@ const router = createRouter({
     routes
 })
 
-export default router
+export default router
\ No newline at end of file

src/router/remote/index.ts

+export default {
+    path: 'remote',
+    component: () => import('@/views/remote/index.vue'),
+    name: 'Remote',
+    meta: { title: '远程模块', locale: 'menu.remote', hideInMenu: false },
+    redirect: { name: 'Contacts' },
+    children: [
+        {
+            path: '/contacts',
+            component: () => import(/* webpackChunkName: "Contacts" */ '@/views/remote/contacts/index.vue'),
+            name: 'Contacts',
+            meta: { title: '联系人', locale: 'menu.remote.contacts', hideInMenu: false }
+        },
+        {
+            path: '/videoCall',
+            component: () => import(/* webpackChunkName: "Resource" */ '@/views/remote/videoCall/index.vue'),
+            name: 'VideoCall',
+            meta: { title: '视频通话', hideInMenu: true }
+        },
+        {
+            path: '/events',
+            component: () => import(/* webpackChunkName: "Events" */ '@/views/remote/events/index.vue'),
+            name: 'Events',
+            meta: { title: '进行中的事件', locale: 'menu.remote.events', hideInMenu: false }
+        },
+        {
+            path: '/experience',
+            component: () => import(/* webpackChunkName: "Experience" */ '@/views/remote/experience/index.vue'),
+            name: 'Experience',
+            meta: { title: '经验库', locale: 'menu.remote.experience', hideInMenu: false }
+        },
+        {
+            path: '/resource',
+            component: () => import(/* webpackChunkName: "Resource" */ '@/views/remote/resource/index.vue'),
+            name: 'Resource',
+            meta: { title: '资源库', locale: 'menu.remote.resource', hideInMenu: false }
+        }
+    ]
+}

src/store/app/index.ts

-import { defineStore } from 'pinia';
-import { AppState } from './types'; 
-import { changeArcoTheme } from '@/configs/arco.ui.config';
-import { changeTailwindTheme } from '@/configs/tailwind.ui.config';
+import { defineStore } from 'pinia'
+import { AppState } from './types'
+import { changeArcoTheme } from '@/configs/arco.ui.config'
+import { changeTailwindTheme } from '@/configs/tailwind.ui.config'
 
 const useAppStore = defineStore('app', {
-  state: (): AppState => {
-    return {
-      theme: 'light',
-    }
-  },
+    state: (): AppState => {
+        return {
+            theme: 'light'
+        }
+    },
 
-  getters: {},
+    getters: {},
 
-  actions: {
-    changeTheme(themeName: string) {
-      this.theme = 'dark';
-      changeArcoTheme(themeName);
-      changeTailwindTheme(themeName);
+    actions: {
+        changeTheme(themeName: string) {
+            this.theme = 'dark'
+            changeArcoTheme(themeName)
+            changeTailwindTheme(themeName)
+        }
     },
-  },
-});
 
-export default useAppStore;
+    persist: false
+})
+
+export default useAppStore

src/store/contacts/index.ts

+import { defineStore } from 'pinia'
+import { ContactsState } from './types'
+export const CallState = {
+    callIn: 'callIn',
+    callOut: 'callout',
+    calling: 'calling',
+    idle: 'idle'
+}
+const useContactsStore = defineStore('contacts', {
+    state: (): ContactsState => {
+        return {
+            showWait: false
+        }
+    },
+
+    getters: {},
+
+    actions: {
+        changeWait(val: boolean) {
+            this.showWait = val
+        }
+    },
+
+    persist: true
+})
+
+export default useContactsStore

src/store/contacts/types.ts

+export interface ContactsState {
+    showWait: boolean
+}

src/store/index.ts

-import {createPinia} from 'pinia';
+import { createPinia } from 'pinia'
+import { markRaw } from 'vue'
+import router from '@/router'
+import { Router } from 'vue-router'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
-const pinia = createPinia();
+declare module 'pinia' {
+    export interface PiniaCustomProperties {
+        router: Router
+    }
+}
+export const setupPinia = (app: any) => {
+    const pinia = createPinia()
+    // 配置router路由
+    pinia.use(({ store }) => {
+        store.router = markRaw(router)
+    })
+    //持久化pinia
+    pinia.use(piniaPluginPersistedstate)
 
-export default pinia;
+    app.use(pinia)
+}

src/store/user/index.ts

+import { defineStore } from 'pinia'
+import type { UserState, UserInfo } from './types'
+import useAppStore from '@/store/app/index'
+import { activedTheme } from '../../../project.ui.config'
+
+const useContactsStore = defineStore('user', {
+    state: (): UserState => {
+        return {
+            token: '',
+            user_info: {
+                id: '',
+                username: '',
+                nickname: '',
+                status: 0,
+                token: '',
+                tokenHead: ' ',
+                videoGroup: 0,
+                autoRecord: false
+            }
+        }
+    },
+
+    getters: {},
+
+    actions: {
+        //用户登录
+        setUserInfo(res: UserInfo) {
+            this.token = res.token
+            this.user_info = res
+            //初始化主题色
+            const { changeTheme } = useAppStore()
+            changeTheme(activedTheme.value)
+            this.router.push('/')
+        },
+        //退出登录
+        handleLogOut() {
+            this.token = ''
+            this.user_info = {
+                id: '',
+                username: '',
+                nickname: '',
+                status: 0,
+                token: '',
+                tokenHead: ' ',
+                videoGroup: 0,
+                autoRecord: false
+            }
+            const { changeTheme } = useAppStore()
+            changeTheme('light')
+            this.router.replace('/login')
+        }
+    },
+
+    persist: true
+})
+
+export default useContactsStore

src/store/user/types.ts

+export interface UserInfo {
+    id: string
+    username: string
+    nickname: string
+    status: number
+    token: string
+    tokenHead: string
+    videoGroup: number
+    autoRecord: boolean
+}
+
+export interface UserState {
+    token: string
+    user_info: UserInfo
+}

src/utils/dayjs.ts

+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn' // 导入本地化语言
+
+dayjs.locale('zh-cn') // 使用本地化语言
+export default dayjs

src/views/error/index.vue

+<template>
+    <div class="flex justify-center items-center h-full">
+        <a-result status="404" subtitle="页面不存在">
+            <template #extra>
+                <a-space>
+                    <a-button type="primary" @click="goBack">返回</a-button>
+                </a-space>
+            </template>
+        </a-result>
+    </div>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+const goBack = () => {
+    router.push('/')
+}
+</script>
+<style lang="less" scoped></style>

src/views/home.vue → src/views/home/index.vue

 <template>
-  <div id="app" class="absolute p-md">
-    <div class="relative wrapper bg-theme-bg2 w-full h-10 rounded-sm">
-      {{$t('action.locale')}}
-      <div class="absolute right-3 flex items-center">
-        <locale-text class="mr-md w-24" />
-        <change-theme-text class="w-24 "/>
-      </div>
+    <div id="app" class="absolute p-md">
+        <div class="relative wrapper bg-theme-bg2 w-full h-10 rounded-sm">
+            {{ $t('action.locale') }}
+            <div class="absolute right-3 flex items-center">
+                <locale-text class="mr-md w-24" />
+                <change-theme-text class="w-24" />
+            </div>
+        </div>
+        <div class="flex items-center justify-between px-md bg-theme-bg3 mt-sm h-14 rounded-sm">
+            {{ $t('app.title') }}
+            <a-date-picker style="width: 200px" />
+        </div>
+        <div class="w-full bg-theme-bg4 mt-md rounded-sm grid md:grid-cols-6 sm:grid-cols-2 gap-sm p-md">
+            <div class="bg-theme-bg3 text-theme-text3">col3</div>
+            <div class="col-span-2 bg-red-600/50">col3</div>
+            <div class="col-span-1 bg-theme-bg2">col3</div>
+            <div class="bg-theme-bg2">col3</div>
+            <div class="bg-theme-bg2">col3</div>
+            <div class="bg-theme-bg2">col3</div>
+            <div class="bg-theme-bg2">col3</div>
+        </div>
+        <a-button type="primary" size="large" class="px-md mt-md">
+            <template #icon><icon-plus /></template>
+            <template #default>Delete</template>
+        </a-button>
+        <a-row class="mt-md">
+            <a-col class="grid-item bg-slate-700" :span="12">
+                <div class="text-white">12 - 50%</div>
+            </a-col>
+            <a-col class="grid-item bg-slate-500" :span="12">
+                <div class="text-white">12 - 50%</div>
+            </a-col>
+        </a-row>
     </div>
-    <div class="flex items-center justify-between px-md bg-theme-bg3 mt-sm h-14 rounded-sm">
-      {{$t('app.title')}}
-      <a-date-picker style="width: 200px;" />
-    </div>
-    <div class="w-full bg-theme-bg4 mt-md rounded-sm grid md:grid-cols-6 sm:grid-cols-2 gap-sm p-md">
-      <div class="bg-theme-bg3 text-theme-text3">col3</div>
-      <div class="col-span-2 bg-red-600/50">col3</div>
-      <div class="col-span-1 bg-theme-bg2">col3</div>
-      <div class="bg-theme-bg2">col3</div>
-      <div class="bg-theme-bg2">col3</div>
-      <div class="bg-theme-bg2">col3</div>
-      <div class="bg-theme-bg2">col3</div>
-    </div>
-    <a-button type="primary" size="large" class="px-md mt-md">
-      <template #icon><icon-plus/></template>
-      <template #default>Delete</template>
-    </a-button>
-    <a-row class="mt-md">
-      <a-col class="grid-item bg-slate-700" :span="12">
-        <div class="text-white">12 - 50%</div>
-      </a-col>
-      <a-col class="grid-item bg-slate-500" :span="12">
-        <div class="text-white">12 - 50%</div>
-      </a-col>
-    </a-row>
-  </div>
 </template>
 
 <script lang="ts" setup>
-  import { IconPlus } from "@arco-design/web-vue/es/icon"
-  import { alova } from '@/api/alova-instance'
-  import {onRenderTriggered as onRenderTracked} from "vue";
+import { IconPlus } from '@arco-design/web-vue/es/icon'
+import { alova } from '@/api/alova-instance'
+import { onRenderTriggered as onRenderTracked } from 'vue'
 
-  onRenderTracked(function (e: any) {
-    console.log("rendered here", e);
-  })
+onRenderTracked(function (e: any) {
+    console.log('rendered here', e)
+})
 
-  onMounted(() => {
+onMounted(() => {
     console.log('进入首页')
 
     alova
-    // .Get('/tibetmuseum/TMServer/api.php?fun_name=statisticsUserAccess&pageName=radio&timeStart=2024-02-21&timeEnd=2024-02-21')
-    .Get('/tibetmuseum/TMServer/api.php?fun_name=statisticsUserAccess&pageName=radio')
-    .then((res:any) => {
-      console.log(res)
-    })
+        // .Get('/tibetmuseum/TMServer/api.php?fun_name=statisticsUserAccess&pageName=radio&timeStart=2024-02-21&timeEnd=2024-02-21')
+        .Get('/tibetmuseum/TMServer/api.php?fun_name=statisticsUserAccess&pageName=radio')
+        .then((res: any) => {
+            console.log(res)
+        })
 
-    alova
-    .Get('/api/user')
-    .then((res:any) => {
-      console.log(res)
+    alova.Get('/api/user').then((res: any) => {
+        console.log(res)
     })
 
-    alova
-    .Post('/api/login', { uName: 'admin', pwd: '123456' })
-    .then((res:any) => {
-      console.log(res)
+    alova.Post('/api/login', { uName: 'admin', pwd: '123456' }).then((res: any) => {
+        console.log(res)
     })
-  })
-
+})
 </script>
 
 <style>
-.wrapper{
-  @apply flex items-center justify-center flex-wrap;
+.wrapper {
+    @apply flex items-center justify-center flex-wrap;
 }
-.grid-item{
-  @apply h-28 flex items-center justify-center
+.grid-item {
+    @apply h-28 flex items-center justify-center;
 }
-
 </style>

src/views/layout/gAside.vue

+<template>
+    <a-layout-sider theme="dark" class="mt-px">
+        <a-menu :default-open-keys="[route.matched[1].name]" :default-selected-keys="[route.name]" v-if="isActive">
+            <g-menu :menuList="menuList"></g-menu>
+        </a-menu>
+    </a-layout-sider>
+</template>
+
+<script setup lang="ts">
+import GMenu from './gMenu.vue'
+//获取菜单列表
+const route = useRoute()
+const menuList = [...route.matched[0].children]
+//监听路由变化
+const isActive = ref(true)
+watch(route, () => {
+    isActive.value = false
+    nextTick(() => {
+        isActive.value = true
+    })
+})
+</script>
+<style lang="less" scoped>
+:deep(.arco-layout-sider-children) {
+    background-color: var(--color-bg-1);
+    overflow-y: auto;
+    --color-menu-dark-bg: var(--color-bg-1);
+}
+</style>

src/views/layout/gHeader.vue

+<template>
+    <a-layout-header class="h-[60px] flex items-center px-4 justify-between bg-theme-bg2">
+        <a-image :src="logo" :preview="false" fit="fill" />
+        <a-space size="large">
+            <a-button type="outline" shape="circle"><global-icon icon="question-circle" :size="14"></global-icon></a-button>
+            <a-button type="outline" shape="circle"><global-icon icon="safe" :size="14"></global-icon></a-button>
+            <a-dropdown @select="handleLanguage">
+                <a-button type="outline" shape="circle"><global-icon icon="language" :size="14"></global-icon></a-button>
+                <template #content>
+                    <a-doption :value="{ value: 'zh-CN' }">中文</a-doption>
+                    <a-doption :value="{ value: 'en-US' }">Englishs</a-doption>
+                </template>
+            </a-dropdown>
+            <a-button type="outline" shape="circle" v-if="activedTheme == 'dark'" @click="activedTheme = 'light'"><global-icon icon="moon" :size="14"></global-icon></a-button>
+            <a-button type="outline" shape="circle" v-else @click="activedTheme = 'dark'"><global-icon icon="sun" :size="14"></global-icon></a-button>
+            <a-dropdown @popup-visible-change="handleDown">
+                <div class="flex items-center cursor-pointer">
+                    <global-avatar :avatar-size="32" :icon-size="16"></global-avatar>
+                    <div class="mx-2">
+                        <span class="mb-1 inline-block text-theme-text1">张三</span>
+                        <br />
+                        <span class="text-theme-text3">专家</span>
+                    </div>
+                    <global-icon :icon="idDown ? 'up-circle' : 'down-circle'" :size="14"></global-icon>
+                </div>
+                <template #content>
+                    <a-doption @click="logOut">退出登录</a-doption>
+                </template>
+            </a-dropdown>
+        </a-space>
+    </a-layout-header>
+</template>
+
+<script setup lang="ts">
+import logo from '@/assets/images/header/logo.png'
+import useLocale from '@/hooks/locale'
+import { activedTheme } from '../../../project.ui.config'
+import useUserStore from '@/store/user'
+
+const { changeLocale } = useLocale()
+//切换语言
+const handleLanguage = (res: any) => {
+    changeLocale(res.value)
+}
+//退出登录
+const idDown = ref(false)
+const handleDown = (visible: boolean) => {
+    idDown.value = visible
+}
+const userStore = useUserStore()
+const logOut = () => {
+    userStore.handleLogOut()
+}
+</script>
+<style lang="less" scoped>
+.arco-btn {
+    border: 1px solid var(--color-border-2);
+}
+</style>

src/views/layout/gMenu.vue

+<template>
+    <template v-for="item in menuList" :key="item.path">
+        <template v-if="!item.meta?.hideInMenu">
+            <!-- 有子菜单 -->
+            <a-sub-menu v-if="item.children && item.children.length" :key="item.name!">
+                <template #icon><global-icon icon="desktop" :size="18"></global-icon></template>
+                <template #title>{{ $t(item.meta.locale) }}</template>
+                <!-- 递归菜单 -->
+                <g-menu :menuList="item.children"></g-menu>
+            </a-sub-menu>
+            <!-- 没有子菜单 -->
+            <a-menu-item v-else :key="item.name!" @click="goRoute(item.name)">
+                {{ $t(item.meta.locale) }}
+            </a-menu-item>
+        </template>
+    </template>
+</template>
+
+<script setup lang="ts">
+const props = defineProps(['menuList'])
+defineOptions({
+    name: 'GMenu'
+})
+//点击菜单跳转
+const router = useRouter()
+const goRoute = (name: string) => {
+    router.push({ name })
+}
+</script>
+<style lang="less" scoped>
+.arco-menu-item {
+    color: var(--color-text-2);
+    &.arco-menu-selected {
+        color: rgb(var(--primary-6));
+    }
+    &:hover {
+        color: rgb(var(--primary-6));
+    }
+}
+:deep(.arco-menu-inline-header.arco-menu-selected) .svg-icon {
+    fill: rgb(var(--primary-6));
+}
+</style>

src/views/layout/index.vue

+<template>
+    <div class="h-full">
+        <a-layout class="h-full">
+            <!-- 头部区域 -->
+            <g-header></g-header>
+            <!-- 内容区域 -->
+            <a-layout class="h-[calc(100%-60px)]">
+                <!-- 视频等待遮罩 -->
+                <contacts-wait v-if="showWait"></contacts-wait>
+                <!-- 侧边栏 -->
+                <g-aside v-if="getShowMenu"></g-aside>
+                <!-- 路由内容 -->
+                <a-layout-content class="h-full p-4 overflow-y-hidden overflow-x-auto box-border">
+                    <router-view></router-view>
+                </a-layout-content>
+            </a-layout>
+        </a-layout>
+    </div>
+</template>
+
+<script setup lang="ts">
+import GHeader from './gHeader.vue'
+import GAside from './gAside.vue'
+import ContactsWait from '@/views/remote/contacts/contactsWait.vue'
+import { storeToRefs } from 'pinia'
+import useContactsStore from '@/store/contacts/'
+
+//显示通话等待
+const contactsStore = useContactsStore()
+const { showWait } = storeToRefs(contactsStore)
+//是否展示菜单
+const route = useRoute()
+const getShowMenu = computed(() => {
+    return !route.meta?.hideInMenu
+})
+</script>
+<style lang="less" scoped></style>

src/views/login/index.vue

+<template>
+    <a-spin class="w-full h-full flex justify-center items-center bg-primary" :loading="loading" tip="登录中...">
+        <div class="w-[400px] py-4 px-8 bg-white shadow-xl rounded-3xl" @keyup.enter="handleLogin">
+            <div class="flex justify-center my-8"><a-image :src="logo" :preview="false" fit="fill" /></div>
+            <h3 class="font-bold text-xl">登录</h3>
+            <a-form ref="loginFormRef" :rules="rules" :model="loginForm" layout="vertical">
+                <a-form-item field="username" label="用户名:" validate-trigger="change" hide-asterisk>
+                    <a-input v-model="loginForm.username" placeholder="请输入你的用户名" size="large" allow-clear />
+                </a-form-item>
+                <a-form-item field="password" label="密码:" validate-trigger="change" hide-asterisk>
+                    <a-input-password v-model="loginForm.password" size="large" placeholder="请输入你的密码" allow-clear />
+                </a-form-item>
+                <a-form-item field="captcha" label="验证码:" validate-trigger="change" hide-asterisk>
+                    <a-input v-model="loginForm.captcha" placeholder="请输入验证码" size="large" allow-clear />
+                    <div class="w-24 h-9 ml-2 cursor-pointer" @click="getCaptcha">
+                        <a-image width="100%" height="100%" :src="loginCode" :preview="false" fit="fill" v-if="loginCode && loginForm.username"></a-image>
+                    </div>
+                </a-form-item>
+                <a-form-item>
+                    <a-button class="shadow-xl" size="large" type="primary" @click="handleLogin" long :loading="loading">登录</a-button>
+                </a-form-item>
+            </a-form>
+        </div>
+    </a-spin>
+</template>
+
+<script setup lang="ts">
+import logo from '@/assets/images/header/logo.png'
+import useUserStore from '@/store/user'
+import { Notification, ValidatedError } from '@arco-design/web-vue'
+import { alova } from '@/api/alova-instance'
+import { useRequest } from 'alova'
+
+const loginForm = reactive({
+    username: '',
+    password: '',
+    captcha: ''
+})
+const rules = {
+    username: [
+        { required: true, message: '请输入账号' },
+        { max: 200, message: '最多输入200个字' }
+    ],
+    password: [
+        { required: true, message: '请输入密码' },
+        { max: 200, message: '最多输入200个字' }
+    ],
+    captcha: [{ required: true, message: '请输入验证码' }]
+}
+//登录
+const loginFormRef = ref()
+const userStore = useUserStore()
+const {
+    loading,
+    send: sendLogin,
+    onSuccess: loginSuccess
+} = useRequest(() => alova.Post<any>('/admin/login', loginForm), {
+    immediate: false
+})
+const handleLogin = async () => {
+    loginFormRef.value?.validate(async (errors: Record<string, ValidatedError>) => {
+        if (!errors && !loading.value) {
+            sendLogin()
+        }
+    })
+}
+loginSuccess((respond) => {
+    const res = respond.data
+    if (res.code == 200) {
+        userStore.setUserInfo(res.data)
+        Notification.success({
+            content: '登录成功'
+        })
+    } else {
+        Notification.error({
+            content: res.message
+        })
+    }
+})
+//获取验证码
+const loginCode = ref('')
+const getCaptcha = async () => {
+    alova.Post('/admin/getCaptcha', { username: loginForm.username }).then((blob: any) => {
+        if (blob) {
+            loginCode.value = URL.createObjectURL(blob)
+        }
+    })
+}
+watch(
+    () => loginForm.username,
+    (value) => {
+        if (value) {
+            getCaptcha()
+        }
+    }
+)
+</script>
+<style lang="less" scoped></style>

src/views/remote/contacts/constants/data.config.ts

+//表格数据
+export const columns = [
+    {
+        title: '事件名称',
+        dataIndex: 'eventName'
+    },
+    {
+        title: '发起人',
+        dataIndex: 'initiator',
+        slotName: 'initiator'
+    },
+    {
+        title: '职位',
+        dataIndex: 'position',
+        slotName: 'position'
+    },
+    {
+        title: '开始时间',
+        dataIndex: 'startTime'
+    },
+    {
+        title: '结束时间',
+        dataIndex: 'endTime'
+    },
+    {
+        title: '时长',
+        dataIndex: 'duration'
+    },
+    {
+        title: '附件',
+        dataIndex: 'attachment'
+    }
+]
+export const tableData = reactive([
+    {
+        key: '1',
+        eventName: '2024-02-17 10:22:23远程协助事件',
+        initiator: '李豫卓',
+        position: '标签',
+        startTime: '2024-02-17 04:56:46',
+        endTime: '2024-02-14 22:33:11',
+        duration: '09:22',
+        attachment: '无附件'
+    },
+    {
+        key: '2',
+        eventName: '2024-02-17 10:22:23远程协助事件',
+        initiator: '李豫卓',
+        position: '标签',
+        startTime: '2024-02-17 04:56:46',
+        endTime: '2024-02-14 22:33:11',
+        duration: '09:22',
+        attachment: '无附件'
+    }
+])

src/views/remote/contacts/contactsInfo.vue

+<template>
+    <div class="g-block">
+        <div class="flex justify-between items-center h-10 px-4">
+            <span class="text-base">联系人</span>
+            <a-checkbox value="1">只显示在线人员</a-checkbox>
+        </div>
+        <a-tabs class="h-full">
+            <a-tab-pane title="默认列表">
+                <div class="px-4">
+                    <a-input-search placeholder="搜索"></a-input-search>
+                    <a-button class="rounded-full my-4" type="primary" long style="min-height: 32px">
+                        <template #icon>
+                            <global-icon icon="plus-circle" :size="14" color="var(--color-bg-white)" />
+                        </template>
+                        多人呼叫
+                    </a-button>
+                </div>
+                <a-collapse :bordered="false">
+                    <a-collapse-item header="维修员列表" :key="1">
+                        <contacts-list :data="list"></contacts-list>
+                    </a-collapse-item>
+                    <a-collapse-item header="专家列表" :key="2">
+                        <contacts-list :data="list"></contacts-list>
+                    </a-collapse-item>
+                </a-collapse>
+            </a-tab-pane>
+            <a-tab-pane title="群组列表" v-if="showGroup">
+                <div class="px-4">我是群组列表</div>
+            </a-tab-pane>
+        </a-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import contactsList from './contactsList.vue'
+
+interface Props {
+    showGroup?: boolean
+}
+const ps = withDefaults(defineProps<Props>(), {
+    showGroup: true
+})
+//联系人列表
+interface UserItemDto {
+    id: string
+    nickname: string
+    remark: string
+    videoGroup: 0 | 1
+}
+const list = ref([
+    { id: '1', name: '张三', phone: '13687222908', active: true },
+    { id: '1', name: '张三', phone: '13687222908' },
+    { id: '1', name: '张三', phone: '13687222908' },
+    { id: '1', name: '张三', phone: '13687222908' },
+    { id: '1', name: '张三', phone: '13687222908' },
+    { id: '1', name: '张三', phone: '13687222908' },
+    { id: '1', name: '张三', phone: '13687222908', disabled: true }
+])
+//是否显示群组列表
+const getShowGroup = computed(() => {
+    return ps.showGroup ? 'block' : 'none'
+})
+</script>
+<style lang="less" scoped>
+@import './styles/contactsInfo.less';
+:deep(.arco-tabs-nav) {
+    display: v-bind('getShowGroup');
+    margin: 0 16px;
+}
+</style>

src/views/remote/contacts/contactsList.vue

+<template>
+    <template v-for="(item, index) in data" :key="item.id">
+        <div class="item flex items-center px-4 py-3 rounded cursor-pointer" :class="{ active: item.active }">
+            <global-avatar></global-avatar>
+            <div class="ml-[9px] inline-block">张三</div>
+            <div class="flex items-center ml-6">
+                <global-icon icon="camera" :size="14" class="mr-2"></global-icon>
+                <global-icon icon="mic" :size="14"></global-icon>
+            </div>
+            <div class="flex-auto text-right">
+                <a-button type="primary" shape="circle" :disabled="item.disabled" @click.stop="handleCall"><global-icon icon="phone" :size="14" color="var(--color-bg-white)"></global-icon></a-button>
+            </div>
+        </div>
+    </template>
+</template>
+
+<script setup lang="ts">
+import useContactsStore from '@/store/contacts/index'
+
+interface Props {
+    data?: Array<any>
+}
+const ps = withDefaults(defineProps<Props>(), {
+    data: () => []
+})
+//拨打视频
+const { changeWait } = useContactsStore()
+const handleCall = () => {
+    changeWait(true)
+}
+</script>
+<style lang="less" scoped>
+.item.active,
+.item:hover {
+    background-color: var(--color-fill-1);
+}
+</style>

src/views/remote/contacts/contactsWait.vue

+<template>
+    <div class="w-full h-full flex justify-center items-center flex-col absolute bg-theme-bg3 z-[999]">
+        <global-avatar :avatar-size="124" :icon-size="32"></global-avatar>
+        <div class="text-4xl font-medium mt-8 mb-2 text-theme-text1">孙婉茹</div>
+        <div class="text-2xl font-medium mb-8 text-theme-text3">正在呼叫你...</div>
+        <a-space :size="32">
+            <a-button type="primary" shape="circle" status="success" @click="agreeCall">
+                <global-icon icon="phone-fill" :size="32" color="var(--color-bg-white)"></global-icon>
+            </a-button>
+            <a-button type="primary" shape="circle" status="danger" @click="refuseCall">
+                <global-icon icon="phone-hangup" :size="32" color="var(--color-bg-white)"></global-icon>
+            </a-button>
+        </a-space>
+    </div>
+</template>
+
+<script setup lang="ts">
+import useContactsStore from '@/store/contacts/index'
+
+//同意视频
+const router = useRouter()
+const agreeCall = () => {
+    router.push({ name: 'VideoCall' })
+    changeWait(false)
+}
+//拒绝视频
+const { changeWait } = useContactsStore()
+const refuseCall = () => {
+    changeWait(false)
+}
+</script>
+<style lang="less" scoped>
+.arco-btn {
+    width: 64px;
+    height: 64px;
+}
+</style>

src/views/remote/contacts/eventList.vue

+<template>
+    <div class="g-block ml-4">
+        <!-- 搜索条件 -->
+        <div class="flex items-center justify-between mb-4 px-4">
+            <range-pickey v-model:start-date="searchParams.startDate" v-model:end-date="searchParams.endDate"></range-pickey>
+            <a-input-search placeholder="搜索" class="w-[240px]"></a-input-search>
+        </div>
+        <!-- table展示 -->
+        <div class="flex-auto overflow-y-auto px-4">
+            <a-table :columns="columns" :data="tableData" :bordered="false">
+                <template #initiator="{ record }">
+                    <div class="flex items-center">
+                        <global-avatar :avatar-size="24" :icon-size="12"></global-avatar>
+                        <span class="ml-2">{{ record.initiator }}</span>
+                    </div>
+                </template>
+                <template #position="{ record }">
+                    <a-button type="outline" size="mini">{{ record.position }}</a-button>
+                </template>
+            </a-table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { columns, tableData } from './constants/data.config'
+
+//表格搜索
+const searchParams = reactive({
+    startDate: '',
+    endDate: ''
+})
+</script>
+<style lang="less" scoped>
+:deep(.arco-table-th) {
+    background: var(--color-fill-1);
+    border-bottom: 1px solid var(--color-neutral-3);
+}
+:deep(.arco-table-td) {
+    background: inherit;
+}
+</style>

src/views/remote/contacts/index.vue

+<template>
+    <a-row class="h-full" :gap="16">
+        <a-col :flex="3" class="h-full">
+            <!-- 联系人列表 -->
+            <contacts-info></contacts-info>
+        </a-col>
+        <a-col :flex="13" class="h-full">
+            <!-- 事件列表 -->
+            <event-list></event-list>
+        </a-col>
+    </a-row>
+</template>
+
+<script setup lang="ts">
+import ContactsInfo from './contactsInfo.vue'
+import EventList from './eventList.vue'
+</script>
+<style lang="less" scoped></style>

src/views/remote/contacts/styles/contactsInfo.less

+:deep(.arco-tabs-content) {
+    height: 100%;
+    .arco-tabs-content-list {
+        height: 100%;
+    }
+    .arco-tabs-pane {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    .arco-collapse {
+        padding: 0 16px;
+        flex: auto;
+        overflow-y: auto;
+    }
+}
+:deep(.arco-tabs-nav-tab-list) {
+    width: 100%;
+    display: flex;
+    padding: 0 16px;
+    box-sizing: border-box;
+    .arco-tabs-tab {
+        flex: 1;
+        box-sizing: border-box;
+        justify-content: center;
+    }
+    .arco-tabs-nav-ink {
+        width: 50%;
+    }
+}
+:deep(.arco-collapse-item) {
+    border: none;
+}
+:deep(.arco-collapse-item-header) {
+    background: none;
+    border: none;
+}
+:deep(.arco-collapse-item-content) {
+    padding: 0;
+    background: none;
+    .arco-collapse-item-content-box {
+        padding: 0;
+    }
+}
\ No newline at end of file

src/views/remote/events/index.vue

+<template>
+    <div>进行中的事件</div>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped></style>

src/views/remote/experience/index.vue

+<template>
+    <div>经验库</div>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped></style>

src/views/remote/index.vue

+<template>
+    <router-view></router-view>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped></style>

src/views/remote/resource/index.vue

+<template>
+    <div>资源库</div>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped></style>

src/views/remote/videoCall/chatDetails.vue

+<template>
+    <div class="record flex mb-4">
+        <div class="min-w-10">
+            <global-avatar v-if="!isSelf"></global-avatar>
+        </div>
+        <div class="flex flex-col flex-auto" :class="{ 'items-end': isSelf }">
+            <div class="mx-2 mb-1">
+                <span class="mb-2 inline-block text-theme-text1" v-if="!isSelf">孙婉茹</span>
+                <p class="text-theme-text3">2024-03-04 05:10:45</p>
+            </div>
+            <!-- 聊天信息 -->
+            <template v-if="type == 'text'">
+                <div :class="{ 'bg-primary-hover': isSelf, 'bg-theme-bg3': !isSelf }" class="p-4 rounded leading-[22px] text-theme-text1">字节跳动的核心产品头条（“头条号”）是中国及全球的内容平台</div>
+            </template>
+            <template v-else-if="type == 'image'">
+                <a-image
+                    width="100%"
+                    :height="160"
+                    src="https://s3-alpha-sig.figma.com/img/0541/c168/c14a6d7b205f6fbd37f935f30aa16eed?Expires=1714953600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=VxIHNdXoU14s4dxHDN433j7lQXZZ61vQW5uON0q5Xk9fs3YTOcEKj0wqTVwjmaDz7g6z4Gaavwdlngrp-lYGch8delQHP5YbqTzO9Q5r657B7f-smrvBC7AAvkdhkq3i6FxCw0~EQCxnYW5o-NPV4417Qp9BN0~gbXt~eUQ5sMY2wzKg8ihGbWWKjjgnVpOZnKMMlUx6X-VBUd5aQYP9Rpy7liwvvDyNcZsl5FSa1GKnsaaNxyfdQj8Ug4vu3EDr~tsqlqqDmR0a7laXSnQz5YHHpVcAef54s7iTnV2qswtrsPyeInoADfQgHviRr-sNLVFPyQf0cVfRdjyVZm5YvA__"
+                ></a-image>
+            </template>
+            <template v-else-if="type == 'pdf'">
+                <div :class="{ 'bg-primary-hover': isSelf, 'bg-theme-bg3': !isSelf }" class="py-[10px] px-3 rounded flex-center justify-between leading-[22px] text-theme-text1 w-full">
+                    <div class="flex-center">
+                        <global-icon icon="file"></global-icon>
+                        <span class="ml-3">可携带文件格式.pdf</span>
+                    </div>
+                    <global-icon icon="download" class="cursor-pointer"></global-icon>
+                </div>
+            </template>
+            <template v-else>
+                <slot></slot>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    isSelf?: boolean
+    type?: 'text' | 'image' | 'pdf' | 'video'
+}
+const ps = withDefaults(defineProps<Props>(), {
+    isSelf: false,
+    type: 'text'
+})
+</script>
+<style lang="less" scoped></style>

src/views/remote/videoCall/index.vue

+<template>
+    <a-row class="h-full flex-nowrap" :gap="16">
+        <a-col :flex="3" class="h-full">
+            <contacts-info :showGroup="false"></contacts-info>
+        </a-col>
+        <a-col :flex="10" class="h-full">
+            <video-info></video-info>
+        </a-col>
+        <a-col :flex="3" class="h-full">
+            <video-chat></video-chat>
+        </a-col>
+    </a-row>
+</template>
+
+<script setup lang="ts">
+import ContactsInfo from '../contacts/contactsInfo.vue'
+import VideoInfo from './videoInfo.vue'
+import VideoChat from './videoChat.vue'
+</script>
+<style lang="less" scoped></style>

src/views/remote/videoCall/videoChat.vue

+<template>
+    <div class="g-block ml-4 pb-0">
+        <div class="px-4">
+            <video-item></video-item>
+        </div>
+        <a-row class="mt-2 px-4">
+            <a-col :span="12">
+                <div class="flex items-center p-1.5 leading-7">
+                    <global-icon icon="wifi" :size="16"></global-icon>
+                    <span class="text-xs ml-1 text-theme-text2">网络状态良好</span>
+                </div>
+            </a-col>
+            <a-col :span="12">
+                <div class="flex items-center p-1.5 leading-7">
+                    <global-icon icon="user-group" :size="16"></global-icon>
+                    <span class="text-xs ml-1 text-theme-text2">房间已有 6 人</span>
+                </div>
+            </a-col>
+            <a-col :span="12">
+                <div class="flex items-center p-1.5 leading-7">
+                    <global-icon icon="mic" :size="16"></global-icon>
+                    <span class="text-xs ml-1 text-theme-text2">麦克风已开启</span>
+                </div>
+            </a-col>
+            <a-col :span="12">
+                <div class="flex items-center p-1.5 leading-7">
+                    <global-icon icon="camera" :size="16"></global-icon>
+                    <span class="text-xs ml-1 text-theme-text2">摄像头已开启</span>
+                </div>
+            </a-col>
+        </a-row>
+        <div class="chat-list p-4 my-4 flex-auto overflow-y-auto mb-0">
+            <chat-details></chat-details>
+            <chat-details isSelf type="image"></chat-details>
+            <chat-details type="pdf"></chat-details>
+            <chat-details isSelf></chat-details>
+            <chat-details type="image"></chat-details>
+            <chat-details isSelf type="pdf"></chat-details>
+        </div>
+        <div class="px-4 py-2">
+            <a-space size="medium">
+                <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
+                    <global-icon icon="image" :size="15"></global-icon>
+                </div>
+                <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
+                    <global-icon icon="pdf" :size="15"></global-icon>
+                </div>
+                <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
+                    <global-icon icon="video" :size="15"></global-icon>
+                </div>
+            </a-space>
+            <a-textarea class="h-16 mt-2" placeholder="请输入" allow-clear />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import VideoItem from './videoItem.vue'
+import ChatDetails from './chatDetails.vue'
+</script>
+<style lang="less" scoped>
+.chat-list {
+    border-top: 1px solid var(--color-border-2);
+    border-bottom: 1px solid var(--color-border-2);
+}
+</style>

src/views/remote/videoCall/videoInfo.vue

+<template>
+    <div class="g-block ml-4 overflow-y-auto">
+        <div class="flex justify-between items-center mb-4 px-4">
+            <a-typography-paragraph editable v-model:editText="videoTitle">
+                {{ videoTitle }}
+            </a-typography-paragraph>
+            <a-space size="medium">
+                <div class="tool py-[9px] cursor-pointer">
+                    <global-icon icon="view-gallery" :size="12"></global-icon>
+                    <span class="ml-1 color-text-2">视图</span>
+                </div>
+                <div class="tool py-[9px] cursor-pointer">
+                    <global-icon icon="fullscreen" :size="16"></global-icon>
+                    <span class="ml-1 color-text-2">全屏</span>
+                </div>
+            </a-space>
+        </div>
+        <video-slider class="mb-3 px-4"></video-slider>
+        <video-tools class="px-4"></video-tools>
+    </div>
+</template>
+
+<script setup lang="ts">
+import VideoSlider from './videoSlider.vue'
+import VideoTools from './videoTools.vue'
+
+const videoTitle = ref('2024-02-17 10:22:23远程协助事件')
+</script>
+<style lang="less" scoped>
+:deep(.arco-typography-operation-edit) {
+    color: rgb(var(--primary-6));
+    .arco-icon {
+        width: 16px;
+        height: 16px;
+    }
+}
+.tool {
+    @apply flex-center px-2 rounded;
+    background-color: var(--color-fill-1);
+}
+.item {
+    @apply flex-center flex-col rounded cursor-pointer;
+    &:hover {
+        background-color: var(--color-fill-2);
+    }
+}
+</style>

src/views/remote/videoCall/videoItem.vue

+<template>
+    <div class="relative">
+        <div class="absolute flex justify-between items-center p-1 top-0 left-0 w-full z-10">
+            <div class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">冯云</div>
+            <a-space :size="4">
+                <div class="rounded-full size-6 flex-center bg-theme-bg1 cursor-pointer">
+                    <global-icon icon="writing" :size="12"></global-icon>
+                </div>
+                <div class="rounded-full size-6 flex-center cursor-pointer" style="background-color: var(--color-border-1)">
+                    <global-icon icon="mic" :size="12" color="rgb(var(--success-6))"></global-icon>
+                </div>
+            </a-space>
+        </div>
+        <div class="absolute left-0 bottom-0 z-10 p-1">
+            <div class="flex-center rounded-sm px-2 py-0.5 bg-fill-bg1">
+                <global-icon icon="user" :size="12"></global-icon>
+                <span class="text-xs ml-1 text-theme-text1">主持人</span>
+            </div>
+        </div>
+        <div class="absolute top-0 left-0 right-0 bottom-0 flex-center flex-col">
+            <div class="text-base text-theme-text1">呼叫中...</div>
+            <a-button type="primary" shape="circle" status="danger">
+                <global-icon icon="phone-hangup" :size="20" color="var(--color-bg-white)"></global-icon>
+            </a-button>
+        </div>
+        <a-image
+            width="100%"
+            :preview="false"
+            src="https://s3-alpha-sig.figma.com/img/b060/b602/cabebaea2d4e243fae3c3f4a84c8bbd8?Expires=1714953600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=S~hrEGVCWq9THKFJ~xDhZ3Up8Lrjkl5lYLVz~9WZwC1yZNm5jtXYN6g3tcmecPgoWFuLp7RBz-IEyFDy8Sam8BWP3~Pvd~2Zyhq8yrDksZSrbcIciAV6fhPLAaZ-6uMZ2-KOcHsVMSfpihf-r8XWo1ovXBdcBjNHfCSGwMrGfnrCUpb5zoBCakrwxaPpHkakLBBMshVm0WDYM07QB-5Vf-HMo3~IYZcCNogGI-Eg6kH~QUrB~L~g6fGjvGr-aDiCKTMy2zHVKSHqU1Bvx0QNvq-15Wofshs6wQSGkM0GrfiwUCjMYl-9r-Fyxb093rw2pCMsOvGCwP0MaTKAubfZtQ__"
+        />
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped></style>

src/views/remote/videoCall/videoSlider.vue

+<template>
+    <a-space class="justify-center">
+        <!-- 往左 -->
+        <div class="cursor-pointer" @click="slideLeft"><icon-left /></div>
+        <div class="slider-container mb-1">
+            <a-space class="slider-content overflow-y-hidden" :size="8" :style="sliderStyles">
+                <video-item class="slider-item" v-for="item in 10"></video-item>
+            </a-space>
+        </div>
+        <!-- 往右 -->
+        <div class="cursor-pointer" @click="slideRight"><icon-right /></div>
+    </a-space>
+</template>
+
+<script setup lang="ts">
+import VideoItem from './videoItem.vue'
+import { IconLeft, IconRight } from '@arco-design/web-vue/es/icon'
+
+const slidePosition = ref(0)
+const slideDistance = 150 // 滑动距离
+const animationDuration = 500 // 动画持续时间（毫秒）
+const sliderStyles = computed(() => {
+    return {
+        transform: `translateX(${slidePosition.value}px)`,
+        transition: `transform ${animationDuration}ms`
+    }
+})
+const slideLeft = () => {
+    slidePosition.value += slideDistance
+}
+
+const slideRight = () => {
+    slidePosition.value -= slideDistance
+}
+</script>
+<style lang="less" scoped>
+.slider-container {
+    max-width: 840px;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    .slider-item {
+        width: 150px;
+    }
+}
+</style>

src/views/remote/videoCall/videoTools.vue

+<template>
+    <div>
+        <div class="relative mb-4">
+            <div class="absolute flex justify-between items-center p-1 t-0 l-0 w-full z-10">
+                <div class="text-xs px-2 rounded-sm leading-5" style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))">吴彦谦</div>
+                <div class="rounded-full size-6 flex-center" style="background-color: var(--color-border-1)">
+                    <global-icon icon="mic" :size="12" color="rgb(var(--success-6))"></global-icon>
+                </div>
+            </div>
+            <a-image
+                width="100%"
+                :height="500"
+                :preview="false"
+                src="https://s3-alpha-sig.figma.com/img/c028/6bf9/6d366fb8f403413739dd9d69011c5be8?Expires=1714953600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=pPeI3Z7apUwh723BAGSH5owGG0AeyS8Flw4Nmn8PSU9ekyiMwxvAYQn0~sgCbWxIRkS2IdxzmM4vo3Qihhf8eQJzFGRQMKWC4ISp0P5XX9hrnJjWecLLsMqgmyKBsP5cDS-yuyt0JcdgiMMd6Yo1M7Y-CxjLLfcj-BD~zd3h0mm2USIKlgk9ZrANkIolmf9X3HBfd0DFfuqRUDjYrzBPUO7B7LxhtG57Uu0gEZ2hJIoT7eFQASIZk-ZrNQkPnSTvIvKS99~ZE4F1zoDY4dcnL~CQV5j~11H6yBaR6RfswVfJb2TEsjDjPe0g-m8fZRZqSpGYJfEtyTX7kswKkODEQw__"
+            />
+        </div>
+        <div class="flex justify-center w-full">
+            <div class="w-[120px] h-[72px] item">
+                <global-icon icon="phone-hangup" :size="21" color="rgb(var(--danger-5))"></global-icon>
+                <span class="mt-1" style="color: rgb(var(--danger-5))">挂断</span>
+            </div>
+            <div class="w-[120px] h-[72px] item">
+                <global-icon icon="mic" :size="21"></global-icon>
+                <span class="mt-1 color-text-2">静音</span>
+            </div>
+            <div class="w-[120px] h-[72px] item">
+                <global-icon icon="swap" :size="21"></global-icon>
+                <span class="mt-1 color-text-2">语音模式</span>
+            </div>
+            <div class="w-[120px] h-[72px] item">
+                <global-icon icon="screenshot" :size="21"></global-icon>
+                <span class="mt-1 color-text-2">截图</span>
+            </div>
+            <div class="w-[120px] h-[72px] item">
+                <global-icon icon="shared-screen" :size="21"></global-icon>
+                <span class="mt-1 color-text-2">屏幕共享</span>
+            </div>
+            <div class="w-[120px] h-[72px] item">
+                <global-icon icon="record" :size="21"></global-icon>
+                <span class="mt-1 color-text-2">开始录制</span>
+            </div>
+            <div class="w-[120px] h-[72px] item">
+                <global-icon icon="mic-off" :size="21"></global-icon>
+                <span class="mt-1 color-text-2">全体静音</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+<style lang="less" scoped>
+.item {
+    @apply flex-center flex-col rounded cursor-pointer;
+    &:hover {
+        background-color: var(--color-fill-2);
+    }
+}
+</style>

tsconfig.json

@@ -5,6 +5,8 @@
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -16,7 +18,7 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     

vite.config.ts

-import {defineConfig} from 'vite'
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import {resolve} from 'path'
+import { resolve } from 'path'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
-import {ArcoResolver} from 'unplugin-vue-components/resolvers'
-import {vitePluginForArco} from '@arco-plugins/vite-vue'
+import { ArcoResolver } from 'unplugin-vue-components/resolvers'
+import { vitePluginForArco } from '@arco-plugins/vite-vue'
 import viteCompression from 'vite-plugin-compression'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+
+import path from 'path'
 
 // @ts-ignore
-import {arcoUiConfig} from './src/configs/arco.ui.config.ts'
+import { arcoUiConfig } from './src/configs/arco.ui.config.ts'
 // @ts-ignore
 import appDefine from './project.app.config'
+// @ts-ignore
+import { API_URL } from './project.app.config'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -18,7 +23,7 @@ export default defineConfig({
         preprocessorOptions: {
             less: {
                 modifyVars: arcoUiConfig, // 定制less变量
-                javascriptEnabled: true,
+                javascriptEnabled: true
             }
         }
     },
@@ -28,9 +33,7 @@ export default defineConfig({
         AutoImport({
             imports: ['vue', 'vue-router'],
             dts: 'src/auto-import.d.ts',
-            resolvers: [
-                ArcoResolver()
-            ],
+            resolvers: [ArcoResolver()]
         }),
         Components({
             // 自动导入的组件位置，默认是src/components
@@ -39,15 +42,21 @@ export default defineConfig({
                 ArcoResolver({
                     importStyle: 'less',
                     resolveIcons: true,
-                    sideEffect: true,
+                    sideEffect: true
                 })
             ],
-            dts: false,
+            dts: false
         }),
         viteCompression({
             disable: !appDefine.enableGZip, // 是否禁用
-            deleteOriginFile: true, // 删除源文件，删除后nginx没有开启压缩的情况下，就不可以访问
+            deleteOriginFile: true // 删除源文件，删除后nginx没有开启压缩的情况下，就不可以访问
         }),
+        createSvgIconsPlugin({
+            // Specify the icon folder to be cached
+            iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+            // Specify symbolId format
+            symbolId: 'icon-[dir]-[name]'
+        })
     ],
     resolve: {
         alias: {
@@ -58,7 +67,6 @@ export default defineConfig({
     server: {
         port: 3000, // 启动端口
         open: true, // 自动打开
-        cors: true, // 跨域
-    },
-
+        cors: true // 跨域
+    }
 })

writeSvgHtml.mjs

+//1、导入fs文件系统模块
+import fs from 'fs'
+import path from 'path'
+
+const basePath = './src/assets/icons'
+const files = fs.readdirSync(basePath)
+const iconHtml = []
+files.forEach((file) => {
+    if (path.extname(file) == '.svg') {
+        const fileName = file.replace('.svg', '')
+        const svg = fs.readFileSync(basePath + '/' + file)
+        iconHtml.push(`<div class="icon"><i>${svg}</i><span class="name">${fileName}</span></div>`)
+    }
+})
+const html = `
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <meta charset="UTF-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            </head>
+            <body>
+                <div class="main">${iconHtml.join(' ')}</div>
+            </body>
+            <style>
+            .main{
+                width:1100px;
+                margin:0 auto;
+                padding:20px;
+                display:flex;
+                flex-wrap:wrap;
+            }
+            .icon{
+                width:150px;
+                padding: 10px;
+                font-size: 14px;
+                display:flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+            svg{
+                width:30px;
+                height:30px;
+            }
+            </style>
+        </html>`
+fs.writeFile(basePath + '/index.html', html, function (err) {})