Merge branch 'develop'

2025-07-21 11:16:16 +08:00
parent 617c96dd1d
commit 2a82a7ba95
381 changed files with 106417 additions and 38 deletions
@@ -0,0 +1,61 @@
+<template>
+  <ElConfigProvider size="default" :locale="locales[language]" :z-index="3000">
+    <RouterView></RouterView>
+  </ElConfigProvider>
+</template>
+
+<script setup lang="ts">
+  import { useUserStore } from './store/modules/user'
+  import zh from 'element-plus/es/locale/lang/zh-cn'
+  import en from 'element-plus/es/locale/lang/en'
+  import { systemUpgrade } from './utils/sys'
+  import { UserService } from './api/usersApi'
+  import { setThemeTransitionClass } from './utils/theme/animation'
+  import { checkStorageCompatibility } from './utils/storage'
+
+  const userStore = useUserStore()
+  const { language } = storeToRefs(userStore)
+  function setCompanyFromUrl() {
+    const userStore = useUserStore()
+    const params = new URLSearchParams(window.location.search)
+    const companyid = params.get('corp_id')
+    const companyabbr = params.get('corp_abbr')
+    if (companyid) {
+      userStore.setCompany(companyid, companyabbr || '')
+      // 你也可以加 localStorage/sessionStorage 备份
+    }
+  }
+  const locales = {
+    zh: zh,
+    en: en
+  }
+
+  onBeforeMount(() => {
+    setThemeTransitionClass(true)
+    setCompanyFromUrl()
+    useUserStore().restoreTokenTimer()
+  })
+
+  onMounted(() => {
+    // 检查存储兼容性
+    checkStorageCompatibility()
+    // 提升暗黑主题下页面刷新视觉体验
+    setThemeTransitionClass(false)
+    // 系统升级
+    systemUpgrade()
+    // 获取用户信息
+    getUserInfo()
+  })
+
+  // 获取用户信息
+  const getUserInfo = async () => {
+    if (userStore.isLogin) {
+      try {
+        const data = await UserService.getUserInfo()
+        userStore.setUserInfo(data)
+      } catch (error) {
+        console.error('获取用户信息失败', error)
+      }
+    }
+  }
+</script>
@@ -0,0 +1,10 @@
+import request from '@/utils/http'
+
+export class BrandService {
+  // 获取品牌
+  static getBrandInfo() {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/console/brand/preset'
+    })
+  }
+}
@@ -0,0 +1,45 @@
+import { asyncRoutes } from '@/router/routes/asyncRoutes'
+import { menuDataToRouter } from '@/router/utils/menuToRouter'
+import { AppRouteRecord } from '@/types/router'
+import { useUserStore } from '@/store/modules/user'
+interface MenuResponse {
+  menuList: AppRouteRecord[]
+}
+
+// 菜单接口
+export const menuService = {
+  async getMenuList(delay = 300): Promise<MenuResponse> {
+    try {
+      const userStore = useUserStore()
+      // 验证用户登录状态
+      if (!userStore.isLogin) {
+        throw new Error('用户未登录')
+      }
+      // 模拟接口返回的菜单数据
+      const menuData = userStore.info.menu
+      // 验证菜单数据
+      if (!menuData || !Array.isArray(menuData) || menuData.length === 0) {
+        ElMessage.error('暂无系统菜单权限')
+        return { menuList: [] }
+      }
+      
+      // 处理菜单数据
+      const menuList = menuData.map((route: any) => menuDataToRouter(route))
+      
+      // 验证处理后的菜单列表
+      if (!menuList || menuList.length === 0) {
+        ElMessage.error('菜单数据处理失败')
+        return { menuList: [] }
+      }
+      
+      // 模拟接口延迟
+      await new Promise((resolve) => setTimeout(resolve, delay))
+
+      return { menuList }
+      
+    } catch (error) {
+      console.error('获取菜单失败:', error)
+      throw error instanceof Error ? error : new Error('获取菜单失败')
+    }
+  }
+}
@@ -0,0 +1,69 @@
+import request from '@/utils/http'
+
+export class UserService {
+  //获取公司
+  static getCompanyList() {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/common/preset/corps'
+    })
+  }
+  //注册
+  static register(params: any) {
+    return request.post<Api.Auth.registerResponse>({
+      url: '/common/auth/register',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //获取 飞书信息
+  static getfeishuAppList(params: { corp_id: string }) {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/common/preset/feishu/app',
+      params
+    })
+  }
+  // 登录
+  static login(params: Api.Auth.LoginParams) {
+    return request.post<Api.Auth.LoginResponse>({
+      url: '/common/auth/login',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  // 刷新token
+  static refreshToken(params: { refresh_token: string }) {
+    return request.post<any>({
+      url: '/common/auth/refresh/token',
+      params
+    })
+  }
+  //飞书凭证 
+  static getfeishuscope() {
+    return request.get<Api.Auth.Authfeishuscope>({
+      url: '/common/auth/feishu/scope'
+    })
+  }
+
+  // 获取用户信息
+  static getUserInfo() {
+    return request.get<Api.User.UserInfo>({
+      url: '/common/user/info'
+    })
+  }
+
+  // 获取用户列表
+  static getUserList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.User.UserListData>({
+      url: '/api/user/list',
+      params
+    })
+  }
+
+  //角色 列表
+  static getRoleList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Role.RoleListData>({
+      url: '/admin/role/list',
+      params
+    })
+  }
+}
@@ -0,0 +1,100 @@
+import request from '@/utils/http'
+
+export class WorkService {
+  // 获取工单列表
+  static getWorkList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Work.WorkListData>({
+      url: '/ticket/ticket/list',
+      params
+    })
+  }
+  // 获取我的工单列表
+  static getWorkselfList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Work.WorkListData>({
+      url: '/ticket/ticket/self',
+      params
+    })
+  }
+  //添加工单
+  static WorkAdd(params: Api.Work.AddParams) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/ticket/ticket/add',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //工单修改 ticket/categorie/edit
+  static Workedit(params:any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/ticket/ticket/edit',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //修改工单状态
+  static Workstatus(params: Api.Work.StatusParams) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/ticket/ticket/status',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //工单状态下拉选择框 
+  static getStatus() {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/ticket/ticket/getStatus'
+    })
+  }
+  //工单沟通记录  
+  static getconversationList(params: any) {
+    return request.get<Api.Work.WorkListData>({
+      url: '/ticket/conversation/list',
+      params
+    })
+  }
+  //添加工单记录   ticket/conversation/add
+  static conversationAdd(params:any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/ticket/conversation/add',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //工单分类 添加
+  static WorkcategorieAdd(params:any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/ticket/categorie/add',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+   //工单分类 列表
+  static getCategorieList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Work.CategorieListData>({
+      url: '/ticket/categorie/list',
+      params
+    })
+  }
+  //工单分类修改 ticket/categorie/edit
+  static Workcategorieedit(params:any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/ticket/categorie/edit',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //工单分类下拉
+  static getcategorieselect() {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/ticket/categorie/getAll'
+    })
+  }
+  //工单分类删除
+  static Workcategoriedelete(params:any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/ticket/categorie/delete',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+}
@@ -0,0 +1,171 @@
+// 全局样式
+
+@font-face {
+  font-family: 'DMSans';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/DMSans.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/Montserrat.woff2) format('woff2');
+}
+
+.btn-icon {
+  font-size: 10px;
+}
+
+.el-btn-red {
+  color: #fa6962 !important;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+// 顶部进度条颜色
+#nprogress .bar {
+  background-color: color-mix(in srgb, var(--main-color) 65%, white);
+}
+
+// 处理移动端组件兼容性
+@media screen and (max-width: $device-phone) {
+  * {
+    cursor: default !important;
+  }
+
+  .el-col2 {
+    margin-top: 15px;
+  }
+}
+
+// 背景滤镜
+*,
+::before,
+::after {
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+}
+
+// 色弱模式
+.color-weak {
+  filter: invert(80%);
+  -webkit-filter: invert(80%);
+}
+
+#noop {
+  display: none;
+}
+
+// 语言切换选中样式
+.langDropDownStyle {
+  // 选中项背景颜色
+  .is-selected {
+    background-color: rgba(var(--art-gray-200-rgb), 0.8) !important;
+  }
+
+  // 语言切换按钮菜单样式优化
+  .lang-btn-item {
+    .el-dropdown-menu__item {
+      padding-left: 13px !important;
+      padding-right: 6px !important;
+      margin-bottom: 3px !important;
+    }
+
+    &:last-child {
+      .el-dropdown-menu__item {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .menu-txt {
+      min-width: 60px;
+      display: block;
+    }
+
+    i {
+      font-size: 10px;
+      margin-left: 10px;
+    }
+  }
+}
+
+// 盒子默认边框
+.page-content,
+.art-custom-card {
+  border: 1px solid var(--art-card-border) !important;
+}
+
+// 盒子边框
+[data-box-mode='border-mode'] {
+  .page-content,
+  .art-custom-card,
+  .art-table-card {
+    border: 1px solid var(--art-card-border) !important;
+  }
+
+  .layout-sidebar {
+    border-right: 1px solid var(--art-card-border) !important;
+  }
+}
+
+// 盒子阴影
+[data-box-mode='shadow-mode'] {
+  .page-content,
+  .art-custom-card,
+  .art-table-card {
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04) !important;
+    border: 1px solid rgba(var(--art-gray-300-rgb), 0.3) !important;
+  }
+
+  .layout-sidebar {
+    border-right: 1px solid rgba(var(--art-gray-300-rgb), 0.4) !important;
+  }
+}
+
+// 元素全屏
+.el-full-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 500;
+  margin-top: 0;
+  padding: 15px;
+  box-sizing: border-box;
+  background-color: var(--art-main-bg-color);
+
+  .art-table-full-screen {
+    height: 100% !important;
+  }
+}
+
+// 表格卡片
+.art-table-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-top: 15px;
+  border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
+
+  .el-card__body {
+    height: 100%;
+    overflow: hidden;
+  }
+}
@@ -0,0 +1,11 @@
+// 主题切换过渡优化，去除不适感
+.theme-change {
+  * {
+    transition: 0s !important;
+  }
+
+  .el-switch__core,
+  .el-switch__action {
+    transition: all 0.3s !important;
+  }
+}
@@ -0,0 +1,215 @@
+/*
+* 深色主题
+* 单页面移除深色主题 document.getElementsByTagName("html")[0].removeAttribute('class')
+*/
+
+$font-color: rgba(#ffffff, 0.7);
+$background-color: #070707;
+
+/* 覆盖element-plus默认深色背景色 */
+html.dark {
+  // ✅ element-plus
+  // --el-bg-color: $background-color;
+  --el-text-color-regular: $font-color;
+
+  // ✅ 富文本编辑器
+  // 工具栏背景颜色
+  --w-e-toolbar-bg-color: var(--art-main-bg-color);
+  // 输入区域背景颜色
+  --w-e-textarea-bg-color: var(--art-main-bg-color);
+  // 工具栏文字颜色
+  --w-e-toolbar-color: var(--art-text-gray-600);
+  // 选中菜单颜色
+  --w-e-toolbar-active-bg-color: rgba(var(--art-gray-100-rgb), 0.8);
+  // 弹窗边框颜色
+  --w-e-toolbar-border-color: var(--art-border-dashed-color);
+  // 分割线颜色
+  --w-e-textarea-border-color: var(--art-border-dashed-color);
+  // 链接输入框边框颜色
+  --w-e-modal-button-border-color: var(--art-border-dashed-color);
+  // 表格头颜色
+  --w-e-textarea-slight-bg-color: var(--art-color);
+  // 按钮背景颜色
+  --w-e-modal-button-bg-color: var(--art-color);
+}
+
+.dark {
+  color: $font-color !important;
+  background: $background-color !important;
+
+  /* 全局文字颜色 */
+  body {
+    color: $font-color;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .lang .btn,
+    .layout-top-bar .user .name,
+    .dark-text {
+      color: $font-color !important;
+    }
+  }
+
+  // 图片降低亮度
+  img {
+    filter: brightness(0.92) saturate(1.25);
+  }
+
+  .editor-wrapper {
+    *:not(pre code *) {
+      color: inherit !important;
+    }
+  }
+
+  .img-cutter {
+    *:not([class^='el-']) {
+      color: inherit !important;
+    }
+  }
+
+  // ✅ 左侧菜单样式
+  .layout-sidebar,
+  .dual-menu {
+    .el-menu-dark {
+      // 选中颜色
+      .el-menu-item.is-active {
+        background: transparent;
+      }
+
+      .el-sub-menu__title {
+        .el-icon {
+          color: var(--art-gray-800) !important;
+        }
+      }
+
+      // 鼠标移入背景色
+      .el-sub-menu__title:hover,
+      .el-menu-item:not(.is-active):hover {
+        background: rgba(var(--art-gray-200-rgb), 0.6) !important;
+      }
+
+      [level-item='2'].is-active:not(.el-menu--collapse) {
+        &.is-active {
+          &:before {
+            margin-left: -10px !important;
+          }
+        }
+      }
+
+      .el-menu:not(.el-menu--collapse) {
+        // 选中颜色
+        .el-menu-item.is-active {
+          &:before {
+            content: '';
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            background: var(--main-color) !important;
+            transition: all 0.2s;
+            margin-left: -18px;
+          }
+        }
+      }
+    }
+  }
+
+  .page-content .article-list .item .left .outer > div {
+    border-right-color: var(--dark-border-color) !important;
+  }
+
+  // ✅ 富文本编辑器
+  // 分隔线
+  .w-e-bar-divider {
+    background-color: var(--art-gray-300) !important;
+  }
+
+  // 下拉选择框
+  .w-e-select-list {
+    background-color: var(--art-main-bg-color) !important;
+    border: 1px solid var(--art-border-dashed-color) !important;
+  }
+
+  /* 弹出框 */
+  .w-e-drop-panel {
+    border: 1px solid var(--art-border-dashed-color) !important;
+  }
+
+  /* 工具栏菜单 */
+  .w-e-bar-item-group .w-e-bar-item-menus-container {
+    background-color: var(--art-main-bg-color) !important;
+    border: 1px solid var(--art-border-dashed-color) !important;
+  }
+
+  /* 下拉选择框 hover 样式调整 */
+  .w-e-select-list ul li:hover,
+  /* 工具栏 hover 按钮背景颜色 */
+  .w-e-bar-item button:hover {
+    background-color: var(--art-color) !important;
+  }
+
+  /* 代码块 */
+  .w-e-text-container [data-slate-editor] pre > code {
+    background-color: var(--art-gray-100) !important;
+    border: 1px solid var(--art-border-dashed-color) !important;
+    text-shadow: none !important;
+  }
+
+  /* 引用 */
+  .w-e-text-container [data-slate-editor] blockquote {
+    border-left: 4px solid var(--art-gray-200) !important;
+    background-color: var(--art-color);
+  }
+
+  .editor-wrapper {
+    .w-e-text-container [data-slate-editor] .table-container th:last-of-type {
+      border-right: 1px solid var(--art-gray-200) !important;
+    }
+
+    .w-e-modal {
+      background-color: var(--art-color);
+    }
+  }
+
+  // 工作台标签文字颜色
+  .worktab .scroll-view .tabs li {
+    color: var(--art-text-gray-800) !important;
+  }
+
+  // 顶部按钮文字颜色
+  .layout-top-bar .btn-box .btn i,
+  .fast-enter-trigger .btn i {
+    color: var(--art-text-gray-700) !important;
+  }
+}
+
+// 移动端文字颜色
+@media screen and (max-width: $device-phone) {
+  .dark {
+    $font-color: rgba(#ffffff, 0.8);
+    --el-text-color-regular: $font-color !important;
+    color: $font-color !important;
+
+    body {
+      color: $font-color !important;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      .lang .btn,
+      .layout-top-bar .user .name {
+        color: $font-color !important;
+      }
+    }
+  }
+}
@@ -0,0 +1,16 @@
+// 自定义Element 暗黑主题
+
+@forward 'element-plus/theme-chalk/src/dark/var.scss' //
+  with (
+  $colors: (
+    //
+    'white': #ffffff,
+    'black': #000000,
+    'success': ('base': #13deb9),
+    'warning': ('base': #ffae1f),
+    'danger': ('base': #ff4d4f),
+    'error': ('base': #fa896b)
+  )
+);
+
+@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
@@ -0,0 +1,34 @@
+// https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
+// 自定义Element 亮色主题
+
+@forward 'element-plus/theme-chalk/src/common/var.scss' //
+  with (
+  //
+  $colors: (
+      //
+      'white': #ffffff,
+      'black': #000000,
+      'success': ('base': #13deb9),
+      'warning': ('base': #ffae1f),
+      'danger': ('base': #ff4d4f),
+      'error': ('base': #fa896b)
+    ),
+  $button: (
+    //
+    'hover-bg-color': var(--el-color-primary-light-9),
+    'hover-border-color': var(--el-color-primary),
+    'border-color': var(--el-color-primary),
+    'text-color': var(--el-color-primary)
+  ),
+  $messagebox: (
+    //
+    'border-radius': '12px'
+  ),
+  $popover: (
+    //
+    'padding': '14px',
+    'border-radius': '10px'
+  )
+);
+
+@use 'element-plus/theme-chalk/src/index.scss' as *;
@@ -0,0 +1,402 @@
+// 优化 Element Plus 组件库默认样式
+
+:root {
+  // 系统主色
+  --main-color: var(--el-color-primary);
+  --el-color-white: white !important;
+  --el-color-black: white !important;
+  // 输入框边框颜色
+  // --el-border-color: #E4E4E7 !important; // DCDFE6
+  // 按钮粗度
+  --el-font-weight-primary: 400 !important;
+
+  --el-component-custom-height: 36px !important;
+
+  --el-component-size: var(--el-component-custom-height) !important;
+
+  // 边框、按钮圆角...
+  --el-border-radius-base: calc(var(--custom-radius) / 3 + 2px) !important;
+
+  --el-border-radius-small: 10px !important;
+  --el-messagebox-border-radius: 10px !important;
+
+  .region .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    color: var(--main-color);
+  }
+}
+
+// 优化菜单折叠展开动画（提升动画流畅度）
+.el-menu.el-menu--inline {
+  transition: max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+// 优化菜单 item hover 动画（提升鼠标跟手感）
+.el-sub-menu__title,
+.el-menu-item {
+  transition: background-color 0s !important;
+}
+
+// -------------------------------- 修改 el-size=default 组件默认高度 start --------------------------------
+// 修改 el-button 高度
+.el-button--default {
+  height: var(--el-component-custom-height) !important;
+}
+
+// 修改 el-select 高度
+.el-select--default {
+  .el-select__wrapper {
+    min-height: var(--el-component-custom-height) !important;
+  }
+}
+
+// 修改 el-checkbox-button 高度
+.el-checkbox-button--default .el-checkbox-button__inner,
+// 修改 el-radio-button 高度
+.el-radio-button--default .el-radio-button__inner {
+  padding: 10px 15px !important;
+}
+// -------------------------------- 修改 el-size=default 组件默认高度 end --------------------------------
+
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li {
+  border-radius: 6px;
+}
+
+.el-popover {
+  min-width: 80px;
+}
+
+.el-dialog {
+  border-radius: 100px !important;
+  border-radius: calc(var(--custom-radius) / 1.2 + 2px) !important;
+  overflow: hidden;
+}
+
+.el-dialog__header {
+  .el-dialog__title {
+    font-size: 16px;
+  }
+}
+
+.el-dialog__body {
+  padding: 25px 0 !important;
+  position: relative; // 为了兼容 el-pagination 样式，需要设置 relative，不然会影响 el-pagination 的样式，比如 el-pagination__jump--small 会被影响，导致 el-pagination__jump--small 按钮无法点击，详见 URL_ADDRESS.com/element-plus/element-plus/issues/5684#issuecomment-1176299275;
+}
+
+.el-dialog.el-dialog-border {
+  .el-dialog__body {
+    // 上边框
+    &::before,
+    // 下边框
+    &::after {
+      content: '';
+      position: absolute;
+      left: -16px;
+      width: calc(100% + 32px);
+      height: 1px;
+      background-color: rgba(var(--art-gray-300-rgb), 0.56);
+    }
+
+    &::before {
+      top: 0;
+    }
+
+    &::after {
+      bottom: 0;
+    }
+  }
+}
+
+// ✅ el-message 样式优化
+.el-message {
+  background-color: var(--art-main-bg-color) !important;
+  border: 0 !important;
+  box-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
+
+  p {
+    color: #515a6e !important;
+    font-size: 13px;
+  }
+}
+
+// 修改 el-dropdown 样式
+.el-dropdown-menu {
+  padding: 6px !important;
+  border-radius: 10px !important;
+  border: none !important;
+
+  .el-dropdown-menu__item {
+    padding: 6px 16px !important;
+    border-radius: 6px !important;
+
+    &:hover:not(.is-disabled) {
+      color: var(--art-gray-900) !important;
+      background-color: var(--art-gray-200) !important;
+    }
+  }
+}
+
+// 隐藏 select、dropdown 的三角
+.el-select__popper,
+.el-dropdown__popper {
+  margin-top: -6px !important;
+
+  .el-popper__arrow {
+    display: none;
+  }
+}
+
+.el-dropdown-selfdefine:focus {
+  outline: none !important;
+}
+
+// 处理移动端组件兼容性
+@media screen and (max-width: $device-phone) {
+  .el-message-box,
+  .el-message,
+  .el-dialog {
+    width: calc(100% - 24px) !important;
+  }
+
+  .el-date-picker.has-sidebar.has-time {
+    width: calc(100% - 24px);
+    left: 12px !important;
+  }
+
+  .el-picker-panel *[slot='sidebar'],
+  .el-picker-panel__sidebar {
+    display: none;
+  }
+
+  .el-picker-panel *[slot='sidebar'] + .el-picker-panel__body,
+  .el-picker-panel__sidebar + .el-picker-panel__body {
+    margin-left: 0;
+  }
+}
+
+// 修改el-button样式
+.el-button {
+  &.el-button--text {
+    background-color: transparent !important;
+    padding: 0 !important;
+
+    span {
+      margin-left: 0 !important;
+    }
+  }
+}
+
+// 修改el-tag样式
+.el-tag {
+  height: 26px !important;
+  line-height: 26px !important;
+  border: 0 !important;
+  border-radius: 6px !important;
+  font-weight: bold;
+  transition: all 0s !important;
+}
+
+.el-checkbox-group {
+  &.el-table-filter__checkbox-group label.el-checkbox {
+    height: 17px !important;
+
+    .el-checkbox__label {
+      font-weight: 400 !important;
+    }
+  }
+}
+
+.el-checkbox {
+  .el-checkbox__inner {
+    width: 18px !important;
+    height: 18px !important;
+    border-radius: 4px !important;
+
+    &::before {
+      content: '';
+      height: 3px !important;
+      top: 6px !important;
+      background-color: #fff !important;
+      transform: scale(0.6) !important;
+    }
+
+    &::after {
+      width: 4px;
+      height: 8px;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 4px;
+      margin: auto;
+      border: 2px solid var(--el-checkbox-checked-icon-color);
+      border-left: 0;
+      border-top: 0;
+    }
+  }
+}
+
+.el-notification .el-notification__icon {
+  font-size: 22px !important;
+}
+
+// 修改 el-message-box 样式
+.el-message-box__headerbtn .el-message-box__close,
+.el-dialog__headerbtn .el-dialog__close {
+  color: var(--art-gray-500) !important;
+  top: 7px !important;
+  right: 7px !important;
+  padding: 7px !important;
+  border-radius: 5px !important;
+  transition: all 0.3s !important;
+
+  &:hover {
+    background-color: var(--art-gray-200) !important;
+    color: var(--art-gray-800) !important;
+  }
+}
+
+.el-message-box {
+  padding: 25px 20px !important;
+}
+
+.el-message-box__title {
+  font-weight: 500 !important;
+}
+
+.el-table__column-filter-trigger i {
+  color: var(--main-color) !important;
+  margin: -3px 0 0 2px;
+}
+
+// 去除 el-dropdown 鼠标放上去出现的边框
+.el-tooltip__trigger:focus-visible {
+  outline: unset;
+}
+
+// ipad 表单右侧按钮优化
+@media screen and (max-width: $device-ipad-pro) {
+  .el-table-fixed-column--right {
+    padding-right: 0 !important;
+
+    .el-button {
+      margin: 5px 10px 5px 0 !important;
+    }
+  }
+}
+
+.login-out-dialog {
+  padding: 30px 20px !important;
+  border-radius: 10px !important;
+}
+
+// 修改 dialog 动画
+.dialog-fade-enter-active {
+  .el-dialog:not(.is-draggable) {
+    animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
+
+    // 修复 el-dialog 动画后宽度不自适应问题
+    .el-select__selected-item {
+      display: inline-block;
+    }
+  }
+}
+
+.dialog-fade-leave-active {
+  animation: fade-out 0.2s linear;
+
+  .el-dialog:not(.is-draggable) {
+    animation: dialog-close 0.5s;
+  }
+}
+
+@keyframes dialog-open {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-close {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}
+
+// 遮罩层动画
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+// 修改 el-select 样式
+.el-select__popper:not(.el-tree-select__popper) {
+  .el-select-dropdown__list {
+    padding: 5px !important;
+
+    .el-select-dropdown__item {
+      height: 34px !important;
+      line-height: 34px !important;
+      border-radius: 6px !important;
+
+      &.is-selected {
+        color: var(--art-gray-900) !important;
+        font-weight: 400 !important;
+        background-color: var(--art-gray-200) !important;
+        margin-bottom: 4px !important;
+      }
+
+      &:hover {
+        background-color: var(--art-gray-200) !important;
+      }
+    }
+
+    .el-select-dropdown__item:hover ~ .is-selected,
+    .el-select-dropdown__item.is-selected:has(~ .el-select-dropdown__item:hover) {
+      background-color: transparent !important;
+    }
+  }
+}
+
+// 修改 el-tree-select 样式
+.el-tree-select__popper {
+  .el-select-dropdown__list {
+    padding: 5px !important;
+
+    .el-tree-node {
+      .el-tree-node__content {
+        height: 36px !important;
+        border-radius: 6px !important;
+
+        &:hover {
+          background-color: var(--art-gray-200) !important;
+        }
+      }
+    }
+  }
+}
+
+// 实现水波纹在文字下面效果
+.el-button > span {
+  position: relative;
+  z-index: 10;
+}
@@ -0,0 +1,157 @@
+// sass 混合宏（函数）
+
+/**
+* 溢出省略号
+* @param {Number} 行数
+*/
+@mixin ellipsis($rowCount: 1) {
+  @if $rowCount <=1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  } @else {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: $rowCount;
+    -webkit-box-orient: vertical;
+  }
+}
+
+/**
+* 控制用户能否选中文本
+* @param {String} 类型
+*/
+@mixin userSelect($value: none) {
+  user-select: $value;
+  -moz-user-select: $value;
+  -ms-user-select: $value;
+  -webkit-user-select: $value;
+}
+
+// 绝对定位居中
+@mixin absoluteCenter() {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+/**
+* css3动画
+* 
+*/
+@mixin animation(
+  $from: (
+    width: 0px
+  ),
+  $to: (
+    width: 100px
+  ),
+  $name: mymove,
+  $animate: mymove 2s 1 linear infinite
+) {
+  -webkit-animation: $animate;
+  -o-animation: $animate;
+  animation: $animate;
+
+  @keyframes #{$name} {
+    from {
+      @each $key, $value in $from {
+        #{$key}: #{$value};
+      }
+    }
+
+    to {
+      @each $key, $value in $to {
+        #{$key}: #{$value};
+      }
+    }
+  }
+
+  @-webkit-keyframes #{$name} {
+    from {
+      @each $key, $value in $from {
+        $key: $value;
+      }
+    }
+
+    to {
+      @each $key, $value in $to {
+        $key: $value;
+      }
+    }
+  }
+}
+
+// 圆形盒子
+@mixin circle($size: 11px, $bg: #fff) {
+  border-radius: 50%;
+  width: $size;
+  height: $size;
+  line-height: $size;
+  text-align: center;
+  background: $bg;
+}
+
+// placeholder
+@mixin placeholder($color: #bbb) {
+  // Firefox
+  &::-moz-placeholder {
+    color: $color;
+    opacity: 1;
+  }
+
+  // Internet Explorer 10+
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+
+  // Safari and Chrome
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+
+  &:placeholder-shown {
+    text-overflow: ellipsis;
+  }
+}
+
+//背景透明，文字不透明。兼容IE8
+@mixin betterTransparentize($color, $alpha) {
+  $c: rgba($color, $alpha);
+  $ie_c: ie_hex_str($c);
+  background: rgba($color, 1);
+  background: $c;
+  background: transparent \9;
+  zoom: 1;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c});
+  -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})';
+}
+
+//添加浏览器前缀
+@mixin browserPrefix($propertyName, $value) {
+  @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+    #{$prefix}#{$propertyName}: $value;
+  }
+}
+
+// 边框
+@mixin border($color: red) {
+  border: 1px solid $color;
+}
+
+// 背景滤镜
+@mixin backdropBlur() {
+  --tw-backdrop-blur: blur(30px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
@@ -0,0 +1,8 @@
+// 移动端样式处理
+
+// 去除移动端点击背景色
+@media screen and (max-width: $device-ipad-pro) {
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
@@ -0,0 +1,117 @@
+/*
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  // color: #abb2bf;
+  // background: #282c34;
+
+  color: #a6accd;
+}
+
+.hljs-string,
+.hljs-section,
+.hljs-selector-class,
+.hljs-template-variable,
+.hljs-deletion {
+  color: #aed07e !important;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #6f747d;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #c792ea;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #c86068;
+}
+
+.hljs-literal {
+  color: #56b6c2;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #abb2bf;
+}
+
+.hljs-attribute {
+  color: #c792ea;
+}
+
+.hljs-function {
+  color: #c792ea;
+}
+
+.hljs-type {
+  color: #f07178;
+}
+
+.hljs-title {
+  color: #82aaff !important;
+}
+
+.hljs-built_in,
+.hljs-class {
+  color: #82aaff;
+}
+
+// 括号
+.hljs-params {
+  color: #a6accd;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #de7e61;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id {
+  color: #61aeee;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
@@ -0,0 +1,149 @@
+@charset "UTF-8";
+
+body,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+input,
+p,
+blockquote,
+th,
+td {
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h4,
+h5 {
+  margin: 0;
+  padding: 0;
+  color: var(--art-text-gray-800);
+}
+
+body {
+  color: var(--art-text-gray-700); 
+  text-align: left;
+  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC',
+  'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+}
+
+select {
+  font-size: 12px;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+fieldset,
+img {
+  border: 0none;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+fieldset p {
+  margin: 0;
+  padding: 0008px;
+}
+
+legend {
+  display: none;
+}
+
+address,
+caption,
+em,
+strong,
+th,
+i {
+  font-style: normal;
+  font-weight: 400;
+}
+
+table caption {
+  margin-left: -1px;
+}
+
+hr {
+  border-bottom: 1pxsolid #ffffff;
+  border-top: 1pxsolid #e4e4e4;
+  border-width: 1px0;
+  clear: both;
+  height: 2px;
+  margin: 5px0;
+  overflow: hidden;
+}
+
+ol,
+ul {
+  list-style-image: none;
+  list-style-position: outside;
+  list-style-type: none;
+}
+
+caption,
+th {
+  text-align: left;
+}
+
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: ””;
+}
+
+/*滚动条*/
+/*滚动条整体部分,必须要设置*/
+::-webkit-scrollbar {
+  width: 8px !important;
+  height: 0 !important;
+}
+
+/*滚动条的轨道*/
+::-webkit-scrollbar-track {
+  background-color: var(--art-text-gray-100);
+}
+
+/*滚动条的滑块按钮*/
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: #cccccc !important;
+  transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #b0abab !important;
+}
+
+/*滚动条的上下两端的按钮*/
+::-webkit-scrollbar-button {
+  height: 0px;
+  width: 0;
+}
+
+.dark {
+  ::-webkit-scrollbar-track {
+    background-color: var(--art-bg-color);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(var(--art-gray-300-rgb), 0.8) !important;
+  }
+}
@@ -0,0 +1,63 @@
+// 定义基础变量
+$bg-animation-color-light: #000;
+$bg-animation-color-dark: #fff;
+$bg-animation-duration: 0.5s;
+
+html {
+  --bg-animation-color: $bg-animation-color-light;
+
+  &.dark {
+    --bg-animation-color: $bg-animation-color-dark;
+  }
+
+  // View transition styles
+  &::view-transition-old(*) {
+    animation: none;
+  }
+
+  &::view-transition-new(*) {
+    animation: clip $bg-animation-duration ease-in;
+  }
+
+  &::view-transition-old(root) {
+    z-index: 1;
+  }
+
+  &::view-transition-new(root) {
+    z-index: 9999;
+  }
+
+  &.dark {
+    &::view-transition-old(*) {
+      animation: clip $bg-animation-duration ease-in reverse;
+    }
+
+    &::view-transition-new(*) {
+      animation: none;
+    }
+
+    &::view-transition-old(root) {
+      z-index: 9999;
+    }
+
+    &::view-transition-new(root) {
+      z-index: 1;
+    }
+  }
+}
+
+// 定义动画
+@keyframes clip {
+  from {
+    clip-path: circle(0% at var(--x) var(--y));
+  }
+
+  to {
+    clip-path: circle(var(--r) at var(--x) var(--y));
+  }
+}
+
+// body 相关样式
+body {
+  background-color: var(--bg-animation-color);
+}
@@ -0,0 +1,97 @@
+@use 'sass:map';
+
+// === 变量区域 ===
+$transition: (
+  duration: 0.26s,
+  // 动画持续时间
+  distance: 20px,
+  // 滑动动画的移动距离
+  easing: cubic-bezier(0.4, 0, 0.2, 1),
+  // 默认缓动函数
+  fade-easing: ease // 淡入淡出专用的缓动函数
+);
+
+// 抽取配置值函数，提高可复用性
+@function transition-config($key) {
+  @return map.get($transition, $key);
+}
+
+// 变量简写
+$duration: transition-config('duration');
+$distance: transition-config('distance');
+$easing: transition-config('easing');
+$fade-easing: transition-config('fade-easing');
+
+// === 动画类 ===
+
+// 淡入淡出动画
+.fade {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity $duration $fade-easing;
+    will-change: opacity;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to,
+  &-leave-from {
+    opacity: 1;
+  }
+}
+
+// 滑动动画通用样式
+@mixin slide-transition($direction) {
+  $distance-x: 0;
+  $distance-y: 0;
+
+  @if $direction == 'left' {
+    $distance-x: -$distance;
+  } @else if $direction == 'right' {
+    $distance-x: $distance;
+  } @else if $direction == 'top' {
+    $distance-y: -$distance;
+  } @else if $direction == 'bottom' {
+    $distance-y: $distance;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition:
+      opacity $duration $easing,
+      transform $duration $easing;
+    will-change: opacity, transform;
+  }
+
+  &-enter-from {
+    opacity: 0;
+    transform: translate3d($distance-x, $distance-y, 0);
+  }
+
+  &-enter-to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  &-leave-to {
+    opacity: 0;
+    transform: translate3d(-$distance-x, -$distance-y, 0);
+  }
+}
+
+// 滑动动画方向类
+.slide-left {
+  @include slide-transition('left');
+}
+.slide-right {
+  @include slide-transition('right');
+}
+.slide-top {
+  @include slide-transition('top');
+}
+.slide-bottom {
+  @include slide-transition('bottom');
+}
@@ -0,0 +1,150 @@
+// 自定义Element树形结构组件样式
+
+.tree .custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+.tree .tree .el-tree-node__content {
+  height: 38px;
+  line-height: 38px;
+}
+
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: #409eff;
+  color: #fff;
+}
+
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content i {
+  color: #fff;
+}
+
+.tree .custom-tree-node .icon {
+  font-size: 13px;
+  color: #409eff;
+}
+
+.tree .custom-tree-node .btn {
+  font-size: 13px;
+  display: none;
+  padding: 6px;
+  position: relative;
+}
+
+.tree .custom-tree-node:hover .icon {
+  color: #409eff;
+}
+
+.tree .el-tree-node__content:hover {
+  color: #606060;
+  // background: #409EFF;
+  background: #f0f7ff;
+}
+
+.tree .custom-tree-node:hover .btn {
+  display: inline;
+}
+
+.tree .custom-tree-node .btn:hover ul {
+  display: inline;
+}
+
+.tree .custom-tree-node .btn ul {
+  width: 120px;
+  background: #fff;
+  position: absolute;
+  top: 26px;
+  right: 0;
+  display: none;
+  z-index: 999;
+  border: 1px solid #f0f0f0;
+  //   box-shadow: 0 4px 4px 2px #f2f2f2;
+}
+
+.tree .custom-tree-node .btn ul li {
+  padding: 10px 15px;
+  color: #666666;
+  box-sizing: border-box;
+}
+
+.tree .custom-tree-node .btn ul li:hover {
+  color: #333;
+  background: #f5f5f5;
+}
+
+.tree .el-tree-node.is-expanded > .el-tree-node__children {
+  overflow: inherit;
+}
+
+.tree .el-tree > .el-tree-node:after {
+  border-top: none;
+}
+
+.tree .el-tree-node {
+  position: relative;
+}
+
+.tree .el-tree-node__expand-icon.is-leaf {
+  display: none;
+}
+
+.tree .el-tree-node__children {
+  padding-left: 16px;
+}
+
+.tree .el-tree-node :last-child:before {
+  height: 38px;
+}
+
+.tree .el-tree-node :last-child:before {
+  height: 17px;
+}
+
+.tree .el-tree > .el-tree-node:before {
+  border-left: none;
+}
+
+.tree .el-tree > .el-tree-node:after {
+  border-top: none;
+}
+
+.tree .el-tree-node:before {
+  content: '';
+  position: absolute;
+  left: -4px;
+  right: auto;
+  border-width: 1px;
+}
+
+.tree .el-tree-node:after {
+  content: '';
+  left: -4px;
+  position: absolute;
+  right: auto;
+  border-width: 1px;
+}
+
+.tree .el-tree-node:before {
+  border-left: 1px dashed #dcdfe6;
+  bottom: 0px;
+  height: 100%;
+  top: -3px;
+  width: 1px;
+  left: 14px;
+}
+
+.tree .el-tree-node:after {
+  border-top: 1px dashed #dcdfe6;
+  height: 20px;
+  top: 13px;
+  left: 15px;
+  width: 12px;
+}
+
+.tree-color {
+  background: #f7fafe;
+}
@@ -0,0 +1,251 @@
+// Light 主题变量 ｜ Dark 主题变量
+
+:root {
+  // Theme color
+  --art-primary: 93, 135, 255;
+  --art-secondary: 73, 190, 255;
+  --art-error: 250, 137, 107;
+  --art-info: 83, 155, 255;
+  --art-success: 19, 222, 185;
+  --art-warning: 255, 174, 31;
+  --art-danger: 255, 77, 79;
+
+  // Theme background color
+  --art-bg-primary: 236, 242, 255;
+  --art-bg-secondary: 232, 247, 255;
+  --art-bg-success: 230, 255, 250;
+  --art-bg-error: 253, 237, 232;
+  --art-bg-info: 235, 243, 254;
+  --art-bg-warning: 254, 245, 229;
+  --art-bg-danger: 253, 237, 232;
+
+  --art-hoverColor: 246, 249, 252;
+  --art-grey100: 242, 246, 250;
+  --art-grey200: 234, 239, 244;
+
+  --art-color: #ffffff;
+  --art-light: #f9f9f9;
+  --art-dark: #1e2129;
+
+  // Background color | Hover color
+  --art-text-muted: #99a1b7;
+  --art-gray-100: #f9f9f9;
+  --art-gray-100-rgb: 249, 249, 249;
+  --art-gray-200: #f1f1f4;
+  --art-gray-200-rgb: 241, 241, 244;
+  --art-gray-300: #dbdfe9;
+  --art-gray-300-rgb: 219, 223, 233;
+  --art-gray-400: #c4cada;
+  --art-gray-400-rgb: 196, 202, 218;
+  --art-gray-500: #99a1b7;
+  --art-gray-500-rgb: 153, 161, 183;
+  --art-gray-600: #78829d;
+  --art-gray-600-rgb: 120, 130, 157;
+  --art-gray-700: #4b5675;
+  --art-gray-700-rgb: 75, 86, 117;
+  --art-gray-800: #252f4a;
+  --art-gray-800-rgb: 37, 47, 74;
+  --art-gray-900: #071437;
+  --art-gray-900-rgb: 7, 20, 55;
+
+  // Text color
+  --art-text-muted: #99a1b7;
+  --art-text-gray-100: #f9f9f9;
+  --art-text-gray-200: #f1f1f4;
+  --art-text-gray-300: #dbdfe9;
+  --art-text-gray-400: #c4cada;
+  --art-text-gray-500: #99a1b7;
+  --art-text-gray-600: #78829d;
+  --art-text-gray-700: #4b5675;
+  --art-text-gray-800: #252f4a;
+  --art-text-gray-900: #071437;
+
+  // Border
+  --art-border-color: #eaebf1;
+  --art-border-dashed-color: #dbdfe9;
+  --art-root-card-border-color: #f1f1f4;
+
+  // Shadow
+  --art-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
+  --art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
+  --art-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
+  --art-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
+
+  // Root card box、shadow
+  --art-root-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
+  --art-root-card-border-color: #f1f1f4;
+
+  // Theme background color
+  --art-bg-color: #fafbfc; // 最底部背景颜色
+  --art-main-bg-color: #ffffff;
+}
+
+// Dark 主题变量
+html.dark {
+  // Theme color
+  --art-primary: 93, 135, 255;
+  --art-secondary: 73, 190, 255;
+  --art-error: 250, 137, 107;
+  --art-info: 83, 155, 255;
+  --art-success: 19, 222, 185;
+  --art-warning: 255, 174, 31;
+  --art-danger: 255, 77, 79;
+
+  // Theme background color
+  --art-bg-primary: 37, 54, 98;
+  --art-bg-secondary: 28, 69, 93;
+  --art-bg-success: 27, 60, 72;
+  --art-bg-error: 75, 49, 61;
+  --art-bg-info: 34, 54, 98;
+  --art-bg-warning: 77, 58, 42;
+  --art-bg-danger: 100, 49, 61;
+
+  --art-hoverColor: 51, 63, 85;
+  --art-grey100: 51, 63, 85;
+  --art-grey200: 70, 86, 112;
+
+  --art-color: #000000;
+  --art-light: #1b1c22;
+  --art-dark: #272a34;
+
+  // Background color | Hover color
+  --art-text-muted: #636674;
+  --art-gray-100: #1b1c22;
+  --art-gray-100-rgb: 27, 28, 34;
+  --art-gray-200: #26272f;
+  --art-gray-200-rgb: 38, 39, 47;
+  --art-gray-300: #363843;
+  --art-gray-300-rgb: 54, 56, 67;
+  --art-gray-400: #464852;
+  --art-gray-400-rgb: 70, 72, 82;
+  --art-gray-500: #636674;
+  --art-gray-500-rgb: 99, 102, 116;
+  --art-gray-600: #808290;
+  --art-gray-600-rgb: 128, 130, 144;
+  --art-gray-700: #9a9cae;
+  --art-gray-700-rgb: 154, 156, 174;
+  --art-gray-800: #b5b7c8;
+  --art-gray-800-rgb: 181, 183, 200;
+  --art-gray-900: #f5f5f5;
+  --art-gray-900-rgb: 245, 245, 245;
+
+  // Text color
+  --art-text-muted: #636674;
+  --art-text-gray-100: #1b1c22;
+  --art-text-gray-200: #26272f;
+  --art-text-gray-300: #363843;
+  --art-text-gray-400: #464852;
+  --art-text-gray-500: #636674;
+  --art-text-gray-600: #808290;
+  --art-text-gray-700: #9a9cae;
+  --art-text-gray-800: #b5b7c8;
+  --art-text-gray-900: #f5f5f5;
+
+  // Border
+  --art-border-color: #26272f;
+  --art-border-dashed-color: #363843;
+  --art-root-card-border-color: #1e2027;
+
+  // Shadow
+  --art-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
+  --art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
+  --art-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
+  --art-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
+
+  // Root card box、shadow
+  --art-root-card-box-shadow: none;
+  --art-root-card-border-color: #1e2027;
+
+  // Theme background color
+  --art-bg-color: #070707;
+  --art-main-bg-color: #161618;
+}
+
+// CSS 全局变量
+:root {
+  --art-card-border: rgba(var(--art-gray-300-rgb), 0.6); // 卡片边框颜色
+  --art-card-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04); // 卡片阴影
+}
+
+// 媒体查询-设备尺寸
+// notebook
+$device-notebook: 1600px;
+// ipad pro
+$device-ipad-pro: 1180px;
+// ipad
+$device-ipad: 800px;
+// ipad-竖屏
+$device-ipad-vertical: 900px;
+// mobile
+$device-phone: 500px;
+
+.bg-primary {
+  background-color: rgb(var(--art-bg-primary)) !important;
+  color: rgb(var(--art-primary)) !important;
+}
+
+.bg-secondary {
+  background-color: rgb(var(--art-bg-secondary)) !important;
+  color: rgb(var(--art-secondary)) !important;
+  border: 1px solid var(--art-secondary);
+}
+
+.bg-warning {
+  background-color: rgb(var(--art-bg-warning)) !important;
+  color: rgb(var(--art-warning)) !important;
+}
+
+.bg-error {
+  background-color: rgb(var(--art-bg-error)) !important;
+  color: rgb(var(--art-error)) !important;
+}
+
+.bg-success {
+  background-color: rgb(var(--art-bg-success)) !important;
+  color: rgb(var(--art-success)) !important;
+}
+
+.bg-danger {
+  background-color: rgb(var(--art-bg-danger)) !important;
+  color: rgb(var(--art-danger)) !important;
+}
+
+.bg-grey100 {
+  background-color: rgb(var(--art-grey100)) !important;
+}
+
+.bg-grey200 {
+  background-color: rgb(var(--art-grey200)) !important;
+}
+
+.bg-hoverColor {
+  background-color: rgb(var(--art-hoverColor)) !important;
+}
+
+.text-primary {
+  color: rgb(var(--art-primary)) !important;
+}
+
+.text-secondary {
+  color: rgb(var(--art-secondary)) !important;
+}
+
+.text-error {
+  color: rgb(var(--art-error)) !important;
+}
+
+.text-danger {
+  color: rgb(var(--art-danger)) !important;
+}
+
+.text-info {
+  color: rgb(var(--art-info)) !important;
+}
+
+.text-success {
+  color: rgb(var(--art-success)) !important;
+}
+
+.text-warning {
+  color: rgb(var(--art-warning)) !important;
+}
@@ -0,0 +1,32 @@
+// 自定义四点旋转SVG
+export const fourDotsSpinnerSvg = `
+  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+    <style>
+      .spinner {
+        transform-origin: center;
+        animation: rotate 1.6s linear infinite;
+      }
+      .dot {
+        fill: var(--main-color);
+        animation: fade 1.6s infinite;
+      }
+      .dot:nth-child(1) { animation-delay: 0s; }
+      .dot:nth-child(2) { animation-delay: 0.5s; }
+      .dot:nth-child(3) { animation-delay: 1s; }
+      .dot:nth-child(4) { animation-delay: 1.5s; }
+      @keyframes rotate {
+        100% { transform: rotate(360deg); }
+      }
+      @keyframes fade {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+    </style>
+    <g class="spinner">
+      <circle class="dot" cx="20" cy="8" r="4"/>
+      <circle class="dot" cx="32" cy="20" r="4"/>
+      <circle class="dot" cx="20" cy="32" r="4"/>
+      <circle class="dot" cx="8" cy="20" r="4"/>
+    </g>
+  </svg>
+`
@@ -0,0 +1,343 @@
+<!-- 基础横幅组件 -->
+<template>
+  <div
+    class="basic-banner art-custom-card"
+    :class="{ 'has-decoration': decoration }"
+    :style="{ backgroundColor: backgroundColor, height: height }"
+    @click="emit('click')"
+  >
+    <!-- 流星效果 -->
+    <div v-if="meteorConfig?.enabled && isDark" class="basic-banner__meteors">
+      <span
+        v-for="(meteor, index) in meteors"
+        :key="index"
+        class="meteor"
+        :style="{
+          top: '-60px',
+          left: `${meteor.x}%`,
+          animationDuration: `${meteor.speed}s`,
+          animationDelay: `${meteor.delay}s`
+        }"
+      ></span>
+    </div>
+
+    <div class="basic-banner__content">
+      <!-- title slot -->
+      <slot name="title">
+        <p v-if="title" class="basic-banner__title" :style="{ color: titleColor }">{{ title }}</p>
+      </slot>
+
+      <!-- subtitle slot -->
+      <slot name="subtitle">
+        <p v-if="subtitle" class="basic-banner__subtitle" :style="{ color: subtitleColor }">{{
+          subtitle
+        }}</p>
+      </slot>
+
+      <!-- button slot -->
+      <slot name="button">
+        <div
+          v-if="buttonConfig?.show"
+          class="basic-banner__button"
+          :style="{
+            backgroundColor: buttonColor,
+            color: buttonTextColor,
+            borderRadius: buttonRadius
+          }"
+          @click.stop="emit('buttonClick')"
+        >
+          {{ buttonConfig?.text }}
+        </div>
+      </slot>
+
+      <!-- default slot -->
+      <slot></slot>
+
+      <!-- background image -->
+      <img
+        v-if="imageConfig.src"
+        class="basic-banner__background-image"
+        :src="imageConfig.src"
+        :style="{ width: imageConfig.width, bottom: imageConfig.bottom, right: imageConfig.right }"
+        loading="lazy"
+        alt="背景图片"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref, computed } from 'vue'
+  import { useSettingStore } from '@/store/modules/setting'
+  const settingStore = useSettingStore()
+  const { isDark } = storeToRefs(settingStore)
+
+  defineOptions({ name: 'ArtBasicBanner' })
+
+  // 流星对象接口定义
+  interface Meteor {
+    /** 流星的水平位置(百分比) */
+    x: number
+    /** 流星划过的速度 */
+    speed: number
+    /** 流星出现的延迟时间 */
+    delay: number
+  }
+
+  // 按钮配置接口定义
+  interface ButtonConfig {
+    /** 是否启用按钮 */
+    show: boolean
+    /** 按钮文本 */
+    text: string
+    /** 按钮背景色 */
+    color?: string
+    /** 按钮文字颜色 */
+    textColor?: string
+    /** 按钮圆角大小 */
+    radius?: string
+  }
+
+  // 流星效果配置接口定义
+  interface MeteorConfig {
+    /** 是否启用流星效果 */
+    enabled: boolean
+    /** 流星数量 */
+    count?: number
+  }
+
+  // 背景图片配置接口定义
+  interface ImageConfig {
+    /** 图片源地址 */
+    src: string
+    /** 图片宽度 */
+    width?: string
+    /** 距底部距离 */
+    bottom?: string
+    /** 距右侧距离 */
+    right?: string // 距右侧距离
+  }
+
+  // 组件属性接口定义
+  interface Props {
+    /** 横幅高度 */
+    height?: string
+    /** 标题文本 */
+    title?: string
+    /** 副标题文本 */
+    subtitle?: string
+    /** 背景颜色 */
+    backgroundColor?: string
+    /** 是否显示装饰效果 */
+    decoration?: boolean
+    /** 按钮配置 */
+    buttonConfig?: ButtonConfig
+    /** 流星配置 */
+    meteorConfig?: MeteorConfig
+    /** 图片配置 */
+    imageConfig?: ImageConfig
+    /** 标题颜色 */
+    titleColor?: string
+    /** 副标题颜色 */
+    subtitleColor?: string
+  }
+
+  // 组件属性默认值设置
+  const props = withDefaults(defineProps<Props>(), {
+    height: '11rem',
+    titleColor: 'white',
+    subtitleColor: 'white',
+    backgroundColor: 'var(--el-color-primary-light-3)',
+    decoration: true,
+    buttonConfig: () => ({
+      show: true,
+      text: '查看',
+      color: '#fff',
+      textColor: '#333',
+      radius: '6px'
+    }),
+    meteorConfig: () => ({ enabled: false, count: 10 }),
+    imageConfig: () => ({ src: '', width: '12rem', bottom: '-3rem', right: '0' })
+  })
+
+  // 定义组件事件
+  const emit = defineEmits<{
+    (e: 'click'): void // 整体点击事件
+    (e: 'buttonClick'): void // 按钮点击事件
+  }>()
+
+  // 计算按钮样式属性
+  const buttonColor = computed(() => props.buttonConfig?.color ?? '#fff')
+  const buttonTextColor = computed(() => props.buttonConfig?.textColor ?? '#333')
+  const buttonRadius = computed(() => props.buttonConfig?.radius ?? '6px')
+
+  // 流星数据初始化
+  const meteors = ref<Meteor[]>([])
+  onMounted(() => {
+    if (props.meteorConfig?.enabled) {
+      meteors.value = generateMeteors(props.meteorConfig?.count ?? 10)
+    }
+  })
+
+  /**
+   * 生成流星数据数组
+   * @param count 流星数量
+   * @returns 流星数据数组
+   */
+  function generateMeteors(count: number): Meteor[] {
+    // 计算每个流星的区域宽度
+    const segmentWidth = 100 / count
+    return Array.from({ length: count }, (_, index) => {
+      // 计算流星起始位置
+      const segmentStart = index * segmentWidth
+      // 在区域内随机生成x坐标
+      const x = segmentStart + Math.random() * segmentWidth
+      // 随机决定流星速度快慢
+      const isSlow = Math.random() > 0.5
+      return {
+        x,
+        speed: isSlow ? 5 + Math.random() * 3 : 2 + Math.random() * 2,
+        delay: Math.random() * 5
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .basic-banner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 2rem;
+    overflow: hidden;
+    color: white;
+    border-radius: calc(var(--custom-radius) + 2px) !important;
+
+    &__content {
+      position: relative;
+      z-index: 1;
+    }
+
+    &__title {
+      margin: 0 0 0.5rem;
+      font-size: 1.5rem;
+      font-weight: 600;
+    }
+
+    &__subtitle {
+      position: relative;
+      z-index: 10;
+      margin: 0 0 1.5rem;
+      font-size: 0.9rem;
+      opacity: 0.9;
+    }
+
+    &__button {
+      box-sizing: border-box;
+      display: inline-block;
+      min-width: 80px;
+      height: var(--el-component-custom-height);
+      padding: 0 12px;
+      font-size: 14px;
+      line-height: var(--el-component-custom-height);
+      text-align: center;
+      cursor: pointer;
+      user-select: none;
+      transition: all 0.3s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    &__background-image {
+      position: absolute;
+      right: 0;
+      bottom: -3rem;
+      z-index: 0;
+      width: 12rem;
+    }
+
+    &.has-decoration::after {
+      position: absolute;
+      right: -10%;
+      bottom: -20%;
+      width: 60%;
+      height: 140%;
+      content: '';
+      background: rgb(255 255 255 / 10%);
+      border-radius: 30%;
+      transform: rotate(-20deg);
+    }
+
+    &__meteors {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+
+      .meteor {
+        position: absolute;
+        width: 2px;
+        height: 60px;
+        background: linear-gradient(
+          to top,
+          rgb(255 255 255 / 40%),
+          rgb(255 255 255 / 10%),
+          transparent
+        );
+        opacity: 0;
+        transform-origin: top left;
+        animation-name: meteor-fall;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+
+        &::before {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          width: 2px;
+          height: 2px;
+          content: '';
+          background: rgb(255 255 255 / 50%);
+        }
+      }
+    }
+  }
+
+  @keyframes meteor-fall {
+    0% {
+      opacity: 1;
+      transform: translate(0, -60px) rotate(-45deg);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translate(400px, 340px) rotate(-45deg);
+    }
+  }
+
+  @media (max-width: $device-phone) {
+    .basic-banner {
+      box-sizing: border-box;
+      justify-content: flex-start;
+      padding: 16px;
+
+      &__title {
+        font-size: 1.4rem;
+      }
+
+      &__background-image {
+        display: none;
+      }
+
+      &.has-decoration::after {
+        display: none;
+      }
+    }
+  }
+</style>
@@ -0,0 +1,187 @@
+<!-- 卡片横幅组件 -->
+<template>
+  <div class="card-banner art-custom-card" :style="{ height: props.height }">
+    <div class="banner-content">
+      <div class="banner-icon">
+        <img :src="props.image" :alt="props.title" />
+      </div>
+      <div class="banner-text">
+        <p class="banner-title">{{ props.title }}</p>
+        <p class="banner-description">{{ props.description }}</p>
+      </div>
+      <div class="banner-buttons">
+        <div
+          v-if="props.cancelButton?.show"
+          class="banner-button cancel-button"
+          :style="{
+            backgroundColor: props.cancelButton?.color,
+            color: props.cancelButton?.textColor
+          }"
+          @click="handleCancel"
+        >
+          {{ props.cancelButton?.text }}
+        </div>
+        <div
+          v-if="props.button?.show"
+          class="banner-button"
+          :style="{ backgroundColor: props.button?.color, color: props.button?.textColor }"
+          @click="handleClick"
+        >
+          {{ props.button?.text }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // 导入默认图标
+  import defaultIcon from '@imgs/3d/icon1.webp'
+
+  defineOptions({ name: 'ArtCardBanner' })
+
+  // 定义卡片横幅组件的属性接口
+  interface CardBannerProps {
+    /** 高度 */
+    height?: string
+    /** 图片路径 */
+    image?: string
+    /** 标题文本 */
+    title: string
+    /** 描述文本 */
+    description: string
+    /** 主按钮配置 */
+    button?: {
+      /** 是否显示 */
+      show?: boolean
+      /** 按钮文本 */
+      text?: string
+      /** 背景颜色 */
+      color?: string
+      /** 文字颜色 */
+      textColor?: string
+    }
+    /** 取消按钮配置 */
+    cancelButton?: {
+      /** 是否显示 */
+      show?: boolean
+      /** 按钮文本 */
+      text?: string
+      /** 背景颜色 */
+      color?: string
+      /** 文字颜色 */
+      textColor?: string
+    }
+  }
+
+  // 定义组件属性默认值
+  const props = withDefaults(defineProps<CardBannerProps>(), {
+    height: '24rem',
+    image: defaultIcon,
+    title: '',
+    description: '',
+    // 主按钮默认配置
+    button: () => ({
+      show: true,
+      text: '查看详情',
+      color: 'var(--main-color)',
+      textColor: '#fff'
+    }),
+    // 取消按钮默认配置
+    cancelButton: () => ({
+      show: false,
+      text: '取消',
+      color: '#f5f5f5',
+      textColor: '#666'
+    })
+  })
+
+  // 定义组件事件
+  const emit = defineEmits<{
+    (e: 'click'): void // 主按钮点击事件
+    (e: 'cancel'): void // 取消按钮点击事件
+  }>()
+
+  // 主按钮点击处理函数
+  const handleClick = () => {
+    emit('click')
+  }
+
+  // 取消按钮点击处理函数
+  const handleCancel = () => {
+    emit('cancel')
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card-banner {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 1.5rem;
+    background-color: var(--art-main-bg-color);
+    border-radius: calc(var(--custom-radius) + 2px) !important;
+
+    .banner-content {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      align-items: center;
+      text-align: center;
+    }
+
+    .banner-icon {
+      width: 180px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .banner-text {
+      box-sizing: border-box;
+      padding: 0 16px;
+
+      .banner-title {
+        margin-bottom: 8px;
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--art-text-gray-800);
+      }
+
+      .banner-description {
+        margin: 0;
+        font-size: 14px;
+        color: var(--art-text-gray-600);
+      }
+    }
+
+    .banner-buttons {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+
+    .banner-button {
+      display: inline-block;
+      height: var(--el-component-custom-height);
+      padding: 0 12px;
+      font-size: 14px;
+      line-height: var(--el-component-custom-height);
+      cursor: pointer;
+      user-select: none;
+      border-radius: 6px;
+      transition: opacity 0.3s;
+
+      &:hover {
+        opacity: 0.9;
+      }
+
+      &.cancel-button {
+        border: 1px solid #dcdfe6;
+      }
+    }
+  }
+</style>
@@ -0,0 +1,63 @@
+<!-- 返回顶部 -->
+<template>
+  <div>
+    <div class="back-to-top" v-show="showButton" @click="scrollToTop">
+      <div class="back-to-top-btn">
+        <i class="iconfont-sys">&#xe864;</i>
+        <p>顶部</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useCommon } from '@/composables/useCommon'
+
+  defineOptions({ name: 'ArtBackToTop' })
+
+  const { scrollToTop } = useCommon()
+
+  const { y } = useWindowScroll()
+  const showButton = ref(false)
+  const scrollThreshold = 2000 // 设置阈值
+
+  // 监听滚动位置
+  watch(y, (newY: number) => {
+    showButton.value = newY > scrollThreshold
+  })
+</script>
+
+<style lang="scss" scoped>
+  .back-to-top {
+    position: fixed;
+    right: 40px;
+    bottom: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    color: var(--art-gray-700);
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid var(--art-border-color);
+    border-radius: 6px;
+    transition: all 0.3s;
+
+    i {
+      display: block;
+      line-height: 1;
+    }
+
+    p {
+      margin-top: 2px;
+      font-size: 10px;
+      line-height: 1;
+    }
+
+    &:hover {
+      background-color: var(--art-text-gray-200);
+      border-color: var(--art-border-dashed-color);
+    }
+  }
+</style>
@@ -0,0 +1,280 @@
+<!-- 图标选择器 -->
+<template>
+  <div class="icon-selector">
+    <div
+      class="select"
+      @click="handleClick"
+      :style="{ width: props.width }"
+      :class="[size, { 'is-disabled': disabled }, { 'has-icon': selectValue }]"
+    >
+      <div class="icon">
+        <i
+          :class="`iconfont-sys ${selectValue}`"
+          v-show="props.iconType === IconTypeEnum.CLASS_NAME"
+        ></i>
+        <i
+          class="iconfont-sys"
+          v-html="selectValue"
+          v-show="props.iconType === IconTypeEnum.UNICODE"
+        ></i>
+      </div>
+      <div class="text"> {{ props.text }} </div>
+      <div class="arrow">
+        <i class="iconfont-sys arrow-icon">&#xe709;</i>
+        <i class="iconfont-sys clear-icon" @click.stop="clearIcon">&#xe83a;</i>
+      </div>
+    </div>
+
+    <el-dialog title="选择图标" width="40%" v-model="visible" align-center>
+      <el-scrollbar height="400px">
+        <ul class="icons-list" v-show="activeName === 'icons'">
+          <li v-for="icon in iconsList" :key="icon.className" @click="selectorIcon(icon)">
+            <i
+              :class="`iconfont-sys ${icon.className}`"
+              v-show="iconType === IconTypeEnum.CLASS_NAME"
+            ></i>
+            <i
+              class="iconfont-sys"
+              v-html="icon.unicode"
+              v-show="iconType === IconTypeEnum.UNICODE"
+            ></i>
+          </li>
+        </ul>
+      </el-scrollbar>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">取 消</el-button>
+          <el-button type="primary" @click="visible = false">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { IconTypeEnum } from '@/enums/appEnum'
+  import { extractIconClasses, type IconfontType } from '@/utils/constants'
+
+  defineOptions({ name: 'ArtIconSelector' })
+
+  // 组件大小类型
+  type ComponentSize = 'large' | 'default' | 'small'
+
+  // Props 接口定义
+  interface Props {
+    /** 图标类型 */
+    iconType?: IconTypeEnum
+    /** v-model 绑定的图标值 */
+    modelValue?: string
+    /** 显示文本 */
+    text?: string
+    /** 组件宽度 */
+    width?: string
+    /** 组件大小 */
+    size?: ComponentSize
+    /** 是否禁用 */
+    disabled?: boolean
+  }
+
+  // Emits 接口定义
+  interface Emits {
+    'update:modelValue': [value: string]
+    getIcon: [value: string]
+  }
+
+  // 使用 withDefaults 定义 props
+  const props = withDefaults(defineProps<Props>(), {
+    iconType: IconTypeEnum.CLASS_NAME,
+    modelValue: '',
+    text: '图标选择器',
+    width: '200px',
+    size: 'default',
+    disabled: false
+  })
+
+  // 定义 emits
+  const emits = defineEmits<Emits>()
+
+  // 响应式数据
+  const selectValue = ref<string>(props.modelValue)
+  const visible = ref<boolean>(false)
+  const activeName = ref<string>('icons')
+
+  // 图标列表 - 使用计算属性优化性能
+  const iconsList = computed<IconfontType[]>(() => extractIconClasses())
+
+  // 监听 modelValue 变化
+  watch(
+    () => props.modelValue,
+    (newVal: string) => {
+      selectValue.value = newVal
+    },
+    { immediate: true }
+  )
+
+  // 选择图标
+  const selectorIcon = (icon: IconfontType): void => {
+    const iconValue =
+      props.iconType === IconTypeEnum.CLASS_NAME ? icon.className : icon.unicode || ''
+
+    selectValue.value = iconValue
+    visible.value = false
+
+    // 发射 v-model 更新事件和自定义事件
+    emits('update:modelValue', iconValue)
+    emits('getIcon', iconValue)
+  }
+
+  // 处理点击事件
+  const handleClick = (): void => {
+    if (!props.disabled) {
+      visible.value = true
+    }
+  }
+
+  // 清除图标
+  const clearIcon = (): void => {
+    selectValue.value = ''
+
+    // 发射 v-model 更新事件和自定义事件
+    emits('update:modelValue', '')
+    emits('getIcon', '')
+  }
+
+  // 计算属性：当前图标类型（用于模板中的判断）
+  const iconType = computed<IconTypeEnum>(() => props.iconType)
+</script>
+
+<style lang="scss" scoped>
+  .icon-selector {
+    width: 100%;
+
+    .select {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: var(--el-component-custom-height);
+      padding: 0 15px;
+      cursor: pointer;
+      border: 1px solid var(--art-border-dashed-color);
+      border-radius: calc(var(--custom-radius) / 3 + 2px) !important;
+      transition: border 0.3s;
+
+      @media (width <= 500px) {
+        width: 100% !important;
+      }
+
+      &.large {
+        height: 40px;
+      }
+
+      &.small {
+        height: 24px;
+      }
+
+      &:hover:not(.is-disabled).has-icon {
+        .arrow-icon {
+          display: none;
+        }
+
+        .clear-icon {
+          display: block !important;
+        }
+      }
+
+      &:hover {
+        border-color: var(--art-text-gray-400);
+      }
+
+      .icon {
+        display: flex;
+        align-items: center;
+        width: 20px;
+        color: var(--art-gray-700);
+
+        i {
+          display: block;
+          margin: 0 auto;
+          font-size: 16px;
+        }
+      }
+
+      .text {
+        display: flex;
+        display: inline-block;
+        align-items: center;
+        width: 50%;
+        font-size: 14px;
+        color: var(--art-gray-600);
+
+        @include ellipsis();
+
+        @media (width <= 500px) {
+          display: none;
+        }
+      }
+
+      .arrow {
+        display: flex;
+        align-items: center;
+        height: calc(100% - 2px);
+
+        i {
+          font-size: 13px;
+          color: var(--art-gray-600);
+        }
+
+        .clear-icon {
+          display: none;
+        }
+      }
+
+      &.is-disabled {
+        cursor: not-allowed;
+        background-color: var(--el-disabled-bg-color);
+        border-color: var(--el-border-color-lighter);
+
+        .icon,
+        .text,
+        .arrow {
+          color: var(--el-text-color-placeholder);
+        }
+
+        &:hover {
+          border-color: var(--el-border-color-lighter);
+        }
+      }
+    }
+
+    .icons-list {
+      display: grid;
+      grid-template-columns: repeat(10, 1fr);
+      border-top: 1px solid var(--art-border-color);
+      border-left: 1px solid var(--art-border-color);
+
+      li {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        aspect-ratio: 1 / 1;
+        color: var(--art-gray-600);
+        text-align: center;
+        border-right: 1px solid var(--art-border-color);
+        border-bottom: 1px solid var(--art-border-color);
+
+        &:hover {
+          cursor: pointer;
+          background: var(--art-gray-100);
+        }
+
+        i {
+          font-size: 22px;
+          color: var(--art-gray-800);
+        }
+      }
+    }
+  }
+</style>
@@ -0,0 +1,34 @@
+<!-- 系统logo -->
+<template>
+  <div class="art-logo">
+    <img :style="logoStyle" src="@imgs/common/logo.webp" alt="logo" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineOptions({ name: 'ArtLogo' })
+
+  interface Props {
+    /** logo 大小 */
+    size?: number | string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    size: 36
+  })
+
+  const logoStyle = computed(() => ({ width: `${props.size}px` }))
+</script>
+
+<style lang="scss" scoped>
+  .art-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
@@ -0,0 +1,175 @@
+<!-- 柱状图卡片 -->
+<template>
+  <div class="bar-chart-card art-custom-card" :style="{ height: `${height}rem` }">
+    <div class="card-body">
+      <div class="chart-header">
+        <div class="metric">
+          <p class="value">{{ value }}</p>
+          <p class="label">{{ label }}</p>
+        </div>
+        <div
+          class="percentage"
+          :class="{ 'is-increase': percentage > 0, 'is-mini-chart': isMiniChart }"
+        >
+          {{ percentage > 0 ? '+' : '' }}{{ percentage }}%
+        </div>
+        <div class="date" v-if="date" :class="{ 'is-mini-chart': isMiniChart }">{{ date }}</div>
+      </div>
+      <div
+        ref="chartRef"
+        class="chart-container"
+        :class="{ 'is-mini-chart': isMiniChart }"
+        :style="{ height: `calc(${height}rem - 5rem)` }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useChart, useChartOps } from '@/composables/useChart'
+  import { EChartsOption } from 'echarts'
+  const { chartRef, isDark, initChart } = useChart()
+
+  defineOptions({ name: 'ArtBarChartCard' })
+
+  interface Props {
+    /** 数值 */
+    value: number
+    /** 标签 */
+    label: string
+    /** 百分比 +（绿色）-（红色） */
+    percentage: number
+    /** 日期 */
+    date?: string
+    /** 高度 */
+    height?: number
+    /** 颜色 */
+    color?: string
+    /** 图表数据 */
+    chartData: number[]
+    /** 柱状图宽度 */
+    barWidth?: string
+    /** 是否为迷你图表 */
+    isMiniChart?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    height: 11,
+    barWidth: '26%'
+  })
+
+  const options: () => EChartsOption = () => {
+    const computedColor = props.color || useChartOps().themeColor
+
+    return {
+      grid: {
+        top: 0,
+        right: 0,
+        bottom: 15,
+        left: 0
+      },
+      xAxis: {
+        type: 'category',
+        show: false
+      },
+      yAxis: {
+        type: 'value',
+        show: false
+      },
+      series: [
+        {
+          data: props.chartData,
+          type: 'bar',
+          barWidth: props.barWidth,
+          itemStyle: {
+            color: computedColor,
+            borderRadius: 2
+          }
+        }
+      ]
+    }
+  }
+
+  watch(isDark, () => {
+    initChart(options())
+  })
+
+  onMounted(() => {
+    initChart(options())
+  })
+</script>
+
+<style lang="scss" scoped>
+  .bar-chart-card {
+    position: relative;
+    overflow: hidden;
+    color: #303133;
+    background-color: var(--art-main-bg-color);
+    border-radius: var(--custom-radius);
+    transition: 0.3s;
+
+    .chart-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 20px 20px 0;
+      margin-bottom: 20px;
+    }
+
+    .metric {
+      .value {
+        margin: 0;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 1.2;
+        color: var(--art-text-gray-900);
+      }
+
+      .label {
+        margin: 4px 0 0;
+        font-size: 14px;
+        color: var(--art-text-gray-600);
+      }
+    }
+
+    .percentage {
+      font-size: 14px;
+      font-weight: 500;
+      color: #f56c6c;
+
+      &.is-increase {
+        color: #67c23a;
+      }
+
+      &.is-mini-chart {
+        position: absolute;
+        bottom: 20px;
+      }
+    }
+
+    .date {
+      position: absolute;
+      right: 20px;
+      bottom: 20px;
+      font-size: 12px;
+      color: var(--art-text-gray-600);
+    }
+
+    .chart-container {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: calc(100% - 22px);
+      height: 100px;
+      margin: auto;
+
+      &.is-mini-chart {
+        position: absolute;
+        inset: 25px 20px auto auto;
+        width: 40%;
+        height: 60px !important;
+      }
+    }
+  }
+</style>
@@ -0,0 +1,144 @@
+<!-- 数据列表卡片 -->
+<template>
+  <div class="basic-list-card">
+    <div class="art-card art-custom-card">
+      <div class="card-header">
+        <p class="card-title">{{ title }}</p>
+        <p class="card-subtitle">{{ subtitle }}</p>
+      </div>
+      <ElScrollbar :style="{ height: maxHeight }">
+        <div v-for="(item, index) in list" :key="index" class="list-item">
+          <div class="item-icon" :class="item.class" v-if="item.icon">
+            <i class="iconfont-sys" v-html="item.icon"></i>
+          </div>
+          <div class="item-content">
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-status">{{ item.status }}</div>
+          </div>
+          <div class="item-time">{{ item.time }}</div>
+        </div>
+      </ElScrollbar>
+      <ElButton class="more-btn" v-if="showMoreButton" v-ripple @click="handleMore"
+        >查看更多</ElButton
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineOptions({ name: 'ArtDataListCard' })
+
+  interface Props {
+    /** 数据列表 */
+    list: Activity[]
+    /** 标题 */
+    title: string
+    /** 副标题 */
+    subtitle?: string
+    /** 最大显示数量 */
+    maxCount?: number
+    /** 是否显示更多按钮 */
+    showMoreButton?: boolean
+  }
+
+  interface Activity {
+    /** 标题 */
+    title: string
+    /** 状态 */
+    status: string
+    /** 时间 */
+    time: string
+    /** 样式类名 */
+    class: string
+    /** 图标 */
+    icon: string
+  }
+
+  const ITEM_HEIGHT = 66
+  const DEFAULT_MAX_COUNT = 5
+
+  const props = withDefaults(defineProps<Props>(), {
+    maxCount: DEFAULT_MAX_COUNT
+  })
+
+  const maxHeight = computed(() => `${ITEM_HEIGHT * props.maxCount}px`)
+
+  const emit = defineEmits<{
+    /** 点击更多按钮事件 */
+    (e: 'more'): void
+  }>()
+
+  const handleMore = () => emit('more')
+</script>
+
+<style lang="scss" scoped>
+  .basic-list-card {
+    .art-card {
+      padding: 30px;
+      background-color: var(--art-main-bg-color);
+      border-radius: var(--custom-radius);
+
+      .card-header {
+        padding-bottom: 15px;
+
+        .card-title {
+          font-size: 18px;
+          font-weight: 500;
+          color: var(--art-gray-900);
+        }
+
+        .card-subtitle {
+          font-size: 14px;
+          color: var(--art-gray-500);
+        }
+      }
+    }
+
+    .list-item {
+      display: flex;
+      align-items: center;
+      padding: 12px 0;
+
+      .item-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        margin-right: 12px;
+        border-radius: 8px;
+
+        i {
+          font-size: 20px;
+        }
+      }
+
+      .item-content {
+        flex: 1;
+
+        .item-title {
+          margin-bottom: 4px;
+          font-size: 15px;
+          color: var(--art-gray-900);
+        }
+
+        .item-status {
+          font-size: 12px;
+          color: var(--art-gray-600);
+        }
+      }
+
+      .item-time {
+        margin-left: 12px;
+        font-size: 12px;
+        color: var(--art-gray-500);
+      }
+    }
+
+    .more-btn {
+      width: 100%;
+      margin-top: 25px;
+      text-align: center;
+    }
+  }
+</style>
@@ -0,0 +1,209 @@
+<!-- 环型图卡片 -->
+<template>
+  <div class="donut-chart-card art-custom-card" :style="{ height: `${height}rem` }">
+    <div class="card-body">
+      <div class="card-content">
+        <div class="data-section">
+          <p class="title">{{ title }}</p>
+          <div>
+            <p class="value">{{ formatNumber(value) }}</p>
+            <div class="percentage" :class="{ 'is-increase': percentage > 0 }">
+              {{ percentage > 0 ? '+' : '' }}{{ percentage }}%
+              <span v-if="percentageLabel">{{ percentageLabel }}</span>
+            </div>
+          </div>
+          <div class="chart-legend">
+            <span class="legend-item current" v-if="currentValue">{{ currentValue }}</span>
+            <span class="legend-item previous" v-if="previousValue">{{ previousValue }}</span>
+          </div>
+        </div>
+        <div class="chart-section">
+          <div ref="chartRef" class="chart-container"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { EChartsOption } from 'echarts'
+  import { useChart, useChartOps } from '@/composables/useChart'
+  const { chartRef, isDark, initChart } = useChart()
+
+  defineOptions({ name: 'ArtDonutChartCard' })
+
+  interface Props {
+    /** 数值 */
+    value: number
+    /** 标题 */
+    title: string
+    /** 百分比 */
+    percentage: number
+    /** 百分比标签 */
+    percentageLabel?: string
+    /** 当前年份 */
+    currentValue?: string
+    /** 去年年份 */
+    previousValue?: string
+    /** 高度 */
+    height?: number
+    /** 颜色 */
+    color?: string
+    /** 半径 */
+    radius?: [string, string]
+    /** 数据 */
+    data: [number, number]
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    height: 9,
+    radius: () => ['70%', '90%'],
+    data: () => [0, 0]
+  })
+
+  const formatNumber = (num: number) => {
+    return num.toLocaleString()
+  }
+
+  const options: () => EChartsOption = () => {
+    const computedColor = props.color || useChartOps().themeColor
+
+    return {
+      series: [
+        {
+          type: 'pie',
+          radius: props.radius,
+          avoidLabelOverlap: false,
+          label: {
+            show: false
+          },
+          data: [
+            {
+              value: props.data[0],
+              name: props.currentValue,
+              itemStyle: { color: computedColor }
+            },
+            {
+              value: props.data[1],
+              name: props.previousValue,
+              itemStyle: { color: '#e6e8f7' }
+            }
+          ]
+        }
+      ]
+    }
+  }
+
+  watch(isDark, () => {
+    initChart(options())
+  })
+
+  onMounted(() => {
+    initChart(options())
+  })
+</script>
+
+<style lang="scss" scoped>
+  .donut-chart-card {
+    overflow: hidden;
+    color: #303133;
+    background-color: var(--art-main-bg-color);
+    border-radius: var(--custom-radius);
+    transition: 0.3s;
+
+    .card-body {
+      box-sizing: border-box;
+      display: flex;
+      height: 100%;
+      padding: 20px;
+    }
+
+    .card-content {
+      display: flex;
+      gap: 20px;
+      align-items: flex-start;
+      width: 100%;
+    }
+
+    .data-section {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+    }
+
+    .chart-section {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      max-width: 200px;
+      height: 100%;
+    }
+
+    .title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 1.2;
+      color: var(--art-text-gray-900);
+    }
+
+    .value {
+      margin: 0;
+      margin-top: 10px;
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 1.2;
+      color: var(--art-text-gray-900);
+    }
+
+    .percentage {
+      margin-top: 5px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #f56c6c;
+
+      &.is-increase {
+        color: #67c23a;
+      }
+    }
+
+    .chart-container {
+      width: 100%;
+      height: 120px;
+    }
+
+    .chart-legend {
+      display: flex;
+      gap: 16px;
+      margin-top: 8px;
+      font-size: 12px;
+      color: #909399;
+
+      .legend-item {
+        position: relative;
+        padding-left: 16px;
+
+        &::before {
+          position: absolute;
+          top: 50%;
+          left: 0;
+          width: 8px;
+          height: 8px;
+          content: '';
+          border-radius: 50%;
+          transform: translateY(-50%);
+        }
+
+        &.current::before {
+          background-color: var(--main-color);
+        }
+
+        &.previous::before {
+          background-color: #e6e8f7;
+        }
+      }
+    }
+  }
+</style>
@@ -0,0 +1,155 @@
+<!-- 图片卡片 -->
+<template>
+  <div class="image-card" @click="handleClick">
+    <ElCard :body-style="{ padding: '0px' }" shadow="hover" class="art-custom-card">
+      <div class="image-wrapper">
+        <ElImage :src="props.imageUrl" fit="cover" loading="lazy">
+          <template #placeholder>
+            <div class="image-placeholder">
+              <ElIcon><Picture /></ElIcon>
+            </div>
+          </template>
+        </ElImage>
+        <div class="read-time" v-if="props.readTime"> {{ props.readTime }} 阅读 </div>
+      </div>
+
+      <div class="content">
+        <div class="category" v-if="props.category">
+          {{ props.category }}
+        </div>
+        <p class="title">{{ props.title }}</p>
+        <div class="stats">
+          <span class="views" v-if="props.views">
+            <ElIcon><View /></ElIcon>
+            {{ props.views }}
+          </span>
+          <span class="comments" v-if="props.comments">
+            <ElIcon><ChatLineRound /></ElIcon>
+            {{ props.comments }}
+          </span>
+          <span class="date">{{ props.date }}</span>
+        </div>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Picture, View, ChatLineRound } from '@element-plus/icons-vue'
+
+  defineOptions({ name: 'ArtImageCard' })
+
+  interface Props {
+    /** 图片地址 */
+    imageUrl: string
+    /** 标题 */
+    title: string
+    /** 分类 */
+    category?: string
+    /** 阅读时间 */
+    readTime?: string
+    /** 浏览量 */
+    views?: number
+    /** 评论数 */
+    comments?: number
+    /** 日期 */
+    date?: string
+  }
+
+  const props = defineProps<Props>()
+
+  const emit = defineEmits<{
+    (e: 'click', card: Props): void
+  }>()
+
+  const handleClick = () => {
+    emit('click', props)
+  }
+</script>
+
+<style lang="scss" scoped>
+  .image-card {
+    width: 100%;
+    cursor: pointer;
+
+    .art-custom-card {
+      border-radius: calc(var(--custom-radius) + 2px) !important;
+    }
+
+    .image-wrapper {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 16/10; // 图片宽高比 16:10
+      overflow: hidden;
+
+      .el-image {
+        width: 100%;
+        height: 100%;
+        transition: transform 0.3s ease-in-out;
+
+        &:hover {
+          transform: scale(1.05);
+        }
+      }
+
+      .read-time {
+        position: absolute;
+        right: 15px;
+        bottom: 15px;
+        padding: 4px 8px;
+        font-size: 12px;
+        background: var(--art-gray-200);
+        border-radius: 4px;
+      }
+
+      .image-placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background: #f5f7fa;
+      }
+    }
+
+    .content {
+      padding: 16px;
+
+      .category {
+        display: inline-block;
+        padding: 2px 8px;
+        margin-bottom: 8px;
+        font-size: 12px;
+        background: var(--art-gray-200);
+        border-radius: 4px;
+      }
+
+      .title {
+        margin: 0 0 12px;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 1.4;
+        color: var(--art-text-gray-900);
+      }
+
+      .stats {
+        display: flex;
+        gap: 16px;
+        align-items: center;
+        font-size: 13px;
+        color: var(--art-text-gray-600);
+
+        .views,
+        .comments {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+        }
+
+        .el-icon {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+</style>
@@ -0,0 +1,197 @@
+<!-- 折线图卡片 -->
+<template>
+  <div class="line-chart-card art-custom-card" :style="{ height: `${height}rem` }">
+    <div class="card-body">
+      <div class="chart-header">
+        <div class="metric">
+          <p class="value">{{ value }}</p>
+          <p class="label">{{ label }}</p>
+        </div>
+        <div
+          class="percentage"
+          :class="{ 'is-increase': percentage > 0, 'is-mini-chart': isMiniChart }"
+        >
+          {{ percentage > 0 ? '+' : '' }}{{ percentage }}%
+        </div>
+        <div class="date" v-if="date" :class="{ 'is-mini-chart': isMiniChart }">
+          {{ date }}
+        </div>
+      </div>
+      <div
+        ref="chartRef"
+        class="chart-container"
+        :class="{ 'is-mini-chart': isMiniChart }"
+        :style="{ height: `calc(${height}rem - 5rem)` }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import * as echarts from 'echarts'
+  import { getCssVar, hexToRgba } from '@/utils/ui'
+  import { useChart, useChartOps } from '@/composables/useChart'
+  import { EChartsOption } from 'echarts'
+  const { chartRef, isDark, initChart } = useChart()
+
+  defineOptions({ name: 'ArtLineChartCard' })
+
+  interface Props {
+    /** 数值 */
+    value: number
+    /** 标签 */
+    label: string
+    /** 百分比 */
+    percentage: number
+    /** 日期 */
+    date?: string
+    /** 高度 */
+    height?: number
+    /** 颜色 */
+    color?: string
+    /** 是否显示区域颜色 */
+    showAreaColor?: boolean
+    /** 图表数据 */
+    chartData: number[]
+    /** 是否为迷你图表 */
+    isMiniChart?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    height: 11
+  })
+
+  const options: () => EChartsOption = () => {
+    const computedColor = props.color || useChartOps().themeColor
+
+    return {
+      grid: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      },
+      xAxis: {
+        type: 'category',
+        show: false,
+        boundaryGap: false
+      },
+      yAxis: {
+        type: 'value',
+        show: false
+      },
+      series: [
+        {
+          data: props.chartData,
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          lineStyle: {
+            width: 3,
+            color: computedColor
+          },
+          areaStyle: props.showAreaColor
+            ? {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: props.color
+                      ? hexToRgba(props.color, 0.2).rgba
+                      : hexToRgba(getCssVar('--el-color-primary'), 0.2).rgba
+                  },
+                  {
+                    offset: 1,
+                    color: props.color
+                      ? hexToRgba(props.color, 0.01).rgba
+                      : hexToRgba(getCssVar('--el-color-primary'), 0.01).rgba
+                  }
+                ])
+              }
+            : undefined
+        }
+      ]
+    }
+  }
+
+  watch(isDark, () => {
+    initChart(options())
+  })
+
+  onMounted(() => {
+    initChart(options())
+  })
+</script>
+
+<style lang="scss" scoped>
+  .line-chart-card {
+    position: relative;
+    overflow: hidden;
+    background-color: var(--art-main-bg-color);
+    border-radius: var(--custom-radius);
+
+    .chart-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 20px 20px 0;
+      margin-bottom: 10px;
+    }
+
+    .metric {
+      .value {
+        font-size: 1.7rem;
+        font-weight: 500;
+        line-height: 1;
+        color: var(--art-text-gray-900);
+      }
+
+      .label {
+        margin: 4px 0 0;
+        font-size: 14px;
+        color: var(--art-text-gray-600);
+      }
+    }
+
+    .percentage {
+      font-size: 14px;
+      font-weight: 500;
+      color: #f56c6c;
+
+      &.is-increase {
+        color: #67c23a;
+      }
+
+      &.is-mini-chart {
+        position: absolute;
+        bottom: 20px;
+      }
+    }
+
+    .date {
+      position: absolute;
+      right: 20px;
+      bottom: 20px;
+      font-size: 12px;
+      color: var(--art-text-gray-600);
+    }
+
+    .chart-container {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      box-sizing: border-box;
+      width: 100%;
+      height: 90px;
+
+      &.is-mini-chart {
+        position: absolute;
+        top: 25px;
+        right: 40px;
+        left: auto;
+        width: 40%;
+        height: 60px !important;
+      }
+    }
+  }
+</style>
@@ -0,0 +1,153 @@
+<!-- 进度条卡片 -->
+<template>
+  <div class="progress-card art-custom-card">
+    <div class="progress-info" :style="{ justifyContent: icon ? 'space-between' : 'flex-start' }">
+      <div class="left">
+        <i
+          v-if="icon"
+          class="iconfont-sys"
+          v-html="icon"
+          :style="{
+            color: iconColor,
+            backgroundColor: iconBgColor,
+            fontSize: iconSize + 'px',
+            borderRadius: iconBgRadius + 'px'
+          }"
+        ></i>
+      </div>
+      <div class="right">
+        <CountTo
+          :key="percentage"
+          class="percentage"
+          :style="{ textAlign: icon ? 'right' : 'left' }"
+          :endVal="percentage"
+          :duration="2000"
+          suffix="%"
+        />
+        <p class="title">{{ title }}</p>
+      </div>
+    </div>
+    <ElProgress
+      :percentage="currentPercentage"
+      :stroke-width="strokeWidth"
+      :show-text="false"
+      :color="color"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { CountTo } from 'vue3-count-to'
+
+  defineOptions({ name: 'ArtProgressCard' })
+
+  interface Props {
+    /** 进度百分比 */
+    percentage: number
+    /** 标题 */
+    title: string
+    /** 颜色 */
+    color?: string
+    /** 图标 */
+    icon?: string
+    /** 图标颜色 */
+    iconColor?: string
+    /** 图标背景颜色 */
+    iconBgColor?: string
+    /** icon 背景圆角大小 */
+    iconBgRadius?: number
+    /** 图标大小 */
+    iconSize?: number
+    /** 进度条宽度 */
+    strokeWidth?: number
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    strokeWidth: 5,
+    iconBgRadius: 8,
+    color: '#67C23A'
+  })
+
+  const animationDuration = 500
+  const currentPercentage = ref(0)
+
+  const animateProgress = () => {
+    const startTime = Date.now()
+    const startValue = currentPercentage.value
+    const endValue = props.percentage
+
+    const animate = () => {
+      const currentTime = Date.now()
+      const elapsed = currentTime - startTime
+      const progress = Math.min(elapsed / animationDuration, 1)
+
+      currentPercentage.value = startValue + (endValue - startValue) * progress
+
+      if (progress < 1) {
+        requestAnimationFrame(animate)
+      }
+    }
+
+    requestAnimationFrame(animate)
+  }
+
+  onMounted(() => {
+    animateProgress()
+  })
+
+  // 当 percentage 属性变化时重新执行动画
+  watch(
+    () => props.percentage,
+    () => {
+      animateProgress()
+    }
+  )
+</script>
+
+<style lang="scss" scoped>
+  .progress-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 8rem;
+    padding: 0 20px;
+    background-color: var(--art-main-bg-color);
+    border-radius: calc(var(--custom-radius) + 4px);
+
+    .progress-info {
+      display: flex;
+      align-items: center;
+      margin-block-end: 15px;
+
+      .left {
+        i {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 46px;
+          height: 46px;
+          background-color: var(--art-gray-300);
+        }
+      }
+
+      .right {
+        .percentage {
+          display: block;
+          margin-block-end: 4px;
+          font-size: 1.5rem;
+          font-weight: 600;
+          color: var(--art-gray-900);
+        }
+
+        .title {
+          font-size: 0.875rem;
+          color: var(--art-gray-600);
+        }
+      }
+    }
+
+    :deep(.el-progress-bar__outer) {
+      background-color: rgb(240 240 240);
+    }
+  }
+</style>
@@ -0,0 +1,130 @@
+<!-- 统计卡片 -->
+<template>
+  <div class="stats-card art-custom-card" :style="{ backgroundColor: backgroundColor }">
+    <div
+      v-if="icon"
+      class="stats-card__icon"
+      :style="{ backgroundColor: iconBgColor, borderRadius: iconBgRadius + 'px' }"
+    >
+      <i
+        class="iconfont-sys"
+        v-html="icon"
+        :style="{
+          color: iconColor,
+          fontSize: iconSize + 'px'
+        }"
+      ></i>
+    </div>
+    <div class="stats-card__content">
+      <p class="stats-card__title" :style="{ color: textColor }" v-if="title">
+        {{ title }}
+      </p>
+      <CountTo v-if="count" class="stats-card__count" :endVal="count" :duration="1000"></CountTo>
+      <p class="stats-card__description" :style="{ color: textColor }" v-if="description">{{
+        description
+      }}</p>
+    </div>
+    <div class="stats-card__arrow" v-if="showArrow">
+      <i class="iconfont-sys">&#xe703;</i>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { CountTo } from 'vue3-count-to'
+
+  defineOptions({ name: 'ArtStatsCard' })
+
+  interface StatsCardProps {
+    /** 图标 */
+    icon?: string
+    /** 标题 */
+    title?: string
+    /** 数值 */
+    count?: number
+    /** 描述 */
+    description: string
+    /** 图标颜色 */
+    iconColor?: string
+    /** 图标背景颜色 */
+    iconBgColor?: string
+    /** 图标圆角大小 */
+    iconBgRadius?: number
+    /** 图标大小 */
+    iconSize?: number
+    /** 文本颜色 */
+    textColor?: string
+    /** 背景颜色 */
+    backgroundColor?: string
+    /** 是否显示箭头 */
+    showArrow?: boolean
+  }
+
+  withDefaults(defineProps<StatsCardProps>(), {
+    iconSize: 30,
+    iconBgRadius: 50
+  })
+</script>
+
+<style lang="scss" scoped>
+  .stats-card {
+    display: flex;
+    align-items: center;
+    height: 8rem;
+    padding: 0 20px;
+    cursor: pointer;
+    background-color: var(--art-main-bg-color);
+    border-radius: calc(var(--custom-radius) + 4px) !important;
+    transition: transform 0.2s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+    }
+
+    &__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 46px;
+      height: 46px;
+      margin-right: 16px;
+      border-radius: 50%;
+
+      i {
+        font-size: 30px;
+      }
+    }
+
+    &__content {
+      flex: 1;
+    }
+
+    &__title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 500;
+      color: var(--art-gray-900);
+    }
+
+    &__count {
+      margin: 0;
+      font-size: 28px;
+      font-weight: 500;
+      color: var(--art-gray-900);
+    }
+
+    &__description {
+      margin: 4px 0 0;
+      font-size: 14px;
+      color: var(--art-gray-600);
+      opacity: 0.9;
+    }
+
+    &__arrow {
+      i {
+        font-size: 18px;
+        color: var(--art-gray-600);
+      }
+    }
+  }
+</style>
--- a/Show More
+++ b/Show More