提交

src/App.vue

@@ -0,0 +1,105 @@
+<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)
+  const locales = {
+    zh: zh,
+    en: en
+  }
+  onBeforeMount(() => {
+    setThemeTransitionClass(true)
+  })
+  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>
+<style>
+  .boxshadow {
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
+    background: var(--art-main-bg-color);
+    padding: 10px 20px;
+    margin-bottom: 10px;
+  }
+  .border {
+    width: 6px;
+    height: 22px;
+    border-radius: 3px;
+    background: #3471ff;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+  .el-dialog {
+    position: relative;
+    overflow: hidden;
+  }
+  .el-dialog::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    background: linear-gradient(180deg, #E4ECFF 0%, #FFFFFF 50%);
+    pointer-events: none;
+  }
+  .el-dialog__header,
+  .el-dialog__body,
+  .el-dialog__footer {
+    background: transparent !important;
+    position: relative;
+    z-index: 1;
+  }
+  .el-dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    padding-right: 40px;
+  }
+
+  .el-dialog__title {
+    flex: 1;
+    text-align: center;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .el-dialog__headerbtn {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .item-row-wrap {
+    margin-bottom: 12px;
+  }
+</style>

src/api/adminApi.ts

@@ -0,0 +1,337 @@
+import request from '@/utils/http'
+
+export class manageService {
+  //仪表盘  总
+  static statisticswhole() {
+    return request.get<any>({
+      // url: '/admin/inquiry/statistics/whole'
+      url: 'admin/crm/statistics/whole'
+    })
+  }
+  //各渠道统计
+  static channelcount() {
+    return request.get<any>({
+      // url: '/admin/inquiry/statistics/channel/count'
+      url: '/admin/crm/statistics/channel/count'
+    })
+  }
+  //各国家统计
+  static countrycount() {
+    return request.get<any>({
+      // url: '/admin/inquiry/statistics/country/count'
+      url: '/admin/crm/statistics/country/count'
+    })
+  }
+  //跟单人统计
+  static trackcount() {
+    return request.get<any>({
+      // url: '/admin/inquiry/statistics/track/count'
+      url: '/admin/crm/statistics/track/count'
+    })
+  }
+  //每日录单统计
+  static daycount() {
+    return request.get<any>({
+      // url: '/admin/inquiry/statistics/day/count'
+      url: '/admin/crm/statistics/day/count'
+    })
+  }
+  //每日录单统计
+  static inquirycount(params: any) {
+    return request.get<any>({
+      // url: '/admin/inquiry/statistics/inquiry/count',
+      url: '/admin/crm/statistics/customer/count',
+      params
+    })
+  }
+  //询单列表
+  static getinquiryList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/inquiry/list',
+      params
+    })
+  }
+  // 获取详情
+  static inquirydetail(params: any) {
+    return request.get<any>({
+      url: '/admin/inquiry/show',
+      params
+    })
+  }
+  //添加询单
+  static inquiryAdd(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/inquiry/store',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //修改询单
+  static inquiryedit(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/inquiry/update',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //删除询单
+  static inquirydelete(params: any) {
+    return request.get<Api.Common.AddResponse>({
+      url: '/admin/inquiry/destroy',
+      params
+    })
+  }
+  //分配询单
+  static inquiryallocation(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/admin/inquiry/allocation',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //重新分配询单
+  static inquiryreallocation(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/admin/inquiry/reallocation',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+
+  //发布询单
+  static inquiryrelease(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/admin/inquiry/release',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //获取用户下拉框
+  static presetusers() {
+    return request.get<any>({
+      url: '/common/preset/users'
+    })
+  }
+  //crm 客户管理
+  //客户列表
+  static getcrmCustomerList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListDatad>({
+      url: '/admin/crm/customer/list',
+      params
+    })
+  }
+  //客户导出
+  static crmCustomerExport(params: any) {
+    return request.get<any>({
+      url: '/admin/crm/customer/export',
+      params,
+      responseType: 'blob' // 设置响应类型为 blob
+    })
+  }
+  //客户审核
+  static crmCustomerAudit(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/crm/customer/audit',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //客户转移
+  static crmCustomerTransfer(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/crm/customer/transfer',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //用户列表
+  static getUserList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/user/list',
+      params
+    })
+  }
+  //用户编辑
+  static userEdit(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/user/update',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //用户新增
+  static userAdd(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/user/store',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //用户设置角色
+  static userSetRole(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/user/authorize',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //用户菜单权限设置
+  static userMenuAuth(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/user/set/resources',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //清除缓存
+  static clearCache() {
+    return request.get<any>({
+      url: '/common/preset/cache/clear'
+    })
+  }
+  //公海客户分配
+  static crmCustomerAllocation(params: any) {
+    return request.get<Api.Common.AddResponse>({
+      url: '/admin/crm/customer/cede',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //公海客户跟进记录
+  static crmCustomerFollow(params: any) {
+    return request.get<any>({
+      url: '/admin/crm/customer/follow',
+      params: params
+    })
+  }
+  //公海客户删除
+  static crmCustomerDelete(params: any) {
+    return request.get<Api.Common.AddResponse>({
+      url: '/admin/crm/customer/delete',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //回收站 恢复
+  static customerRestore(params: any) {
+    return request.get<any>({
+      url: '/admin/crm/customer/restore',
+      params
+    })
+  }
+  //备货单审核列表
+  static getstocklist(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/approval/list',
+      params
+    })
+  }
+  //备货单审核
+  static stockapproval(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/approval/store',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  // 审核更新
+  static stockapprovalupdate(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/approval/update',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //审核详情
+  static stockapprovaldetail(params: any) {
+    return request.get<any>({
+      url: '/admin/approval/show',
+      params
+    })
+  }
+  //审核删除
+  static stockapprovaldelete(params: any) {
+    return request.get<Api.Common.AddResponse>({
+      url: '/admin/approval/destroy',
+      params
+    })
+  }
+  //审批记录
+  static stockapprovalrecord(params: any) {
+    return request.get<any>({
+      url: '/admin/approval/records/todo',
+      params
+    })
+  }
+  //审批通过/拒绝
+  static stockapprovalpass(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/approval/records/action',
+      params
+    })
+  }
+  //审批记录
+  static stockapprovallogs(params: any) {
+    return request.get<any>({
+      url: '/admin/approval/records/logs',
+      params
+    })
+  }
+  //备货单
+  static getStockList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/stock/order/list',
+      params
+    })
+  }
+  //添加备货单
+  static addStock(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/admin/stock/order/store',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //详情备货单
+  static getStockDetail(params: any) {
+    return request.get<any>({
+      url: '/admin/stock/order/show',
+      params
+    })
+  }
+  //备货单查看
+  static checkStock(params: any) {
+    return request.get<any>({
+      url: '/admin/stock/order/detail',
+      params
+    })
+  }
+  //打印
+  static printStock(params: any) {
+    return request.get<any>({
+      url: '/admin/stock/order/print',
+      params
+    })
+  }
+  //审核详情
+  static stockapprovaldetailborder(params: any) {
+    return request.get<any>({
+      url: '/admin/approval/records/border',
+      params
+    })
+  }
+  //审批转交
+  static stockapprovaltransfer(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/approval/records/transfer',
+      params
+    })
+  }
+  //审批时间轴
+  static stockapprovaltimeline(params: any) {
+    return request.get<any>({
+      url: '/admin/approval/records/timeline',
+      params
+    })
+  }
+}

src/api/attribute.ts

@@ -0,0 +1,105 @@
+import request from '@/utils/http'
+
+export class attributeService {
+  //属性列表
+  static getattributeList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/sku/attribute/list',
+      params
+    })
+  }
+  //属性添加
+  static addattribute(params: any) {
+    return request.post<any>({
+      url: '/admin/sku/attribute/store',
+      params
+    })
+  }
+  //属性编辑
+  static editattribute(params: any) {
+    return request.post<any>({
+      url: '/admin/sku/attribute/update',
+      params
+    })
+  }
+  //属性删除
+  static deleteattribute(params: any) {
+    return request.post<any>({
+      url: '/admin/sku/attribute/destroy',
+      params
+    })
+  }
+  //属性详情
+  static attributedetail(params: any) {
+    return request.get<any>({
+      url: '/admin/sku/attribute/show',
+      params
+    })
+  }
+  //sku列表
+  static getskuList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/sku/list',
+      params
+    })
+  }
+  //sku添加
+  static addsku(params: any) {
+    return request.post<any>({
+      url: '/admin/sku/store',
+      params
+    })
+  }
+  //sku编辑
+  static editsku(params: any) {
+    return request.post<any>({
+      url: '/admin/sku/update',
+      params
+    })
+  }
+  //sku删除
+  static deletesku(params: any) {
+    return request.post<any>({
+      url: '/admin/sku/destroy',
+      params
+    })
+  }
+  //sku详情
+  static skudetail(params: any) {
+    return request.get<any>({
+      url: '/admin/sku/show',
+      params
+    })
+  }
+  //分类下拉
+  static getcategoryOptions() {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/post/category/preset'
+    })
+  }
+  //属性下拉
+  static getattributeOptions(params?: any) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/sku/attribute/preset',
+      params
+    })
+  }
+  //产品导入
+  static importSku(formData: FormData) {
+    return request.request<any>({
+      url: '/admin/sku/import',
+      method: 'POST',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+  }
+  //下载导入模板
+  static downloadTemplate() {
+    return request.get<Blob>({
+      url: '/admin/sku/template',
+      responseType: 'blob'
+    })
+  }
+}

src/api/classify.ts

@@ -0,0 +1,88 @@
+import request from '@/utils/http'
+
+export class classifyService {
+  //分类树列表 admin/nav/categories/tree
+  static getclassifytreeList(params: any) {
+    return request.get<any>({
+      url: '/admin/post/category/tree',
+      params
+    })
+  }
+  //分类列表
+  static getclassifyList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/post/category/list',
+      params
+    })
+  }
+  //分类添加
+  static addclassify(params: any) {
+    return request.post<any>({
+      url: '/admin/post/category/store',
+      params
+    })
+  }
+  //分类编辑
+  static editclassify(params: any) {
+    return request.post<any>({
+      url: '/admin/post/category/update',
+      params
+    })
+  }
+  //分类删除
+  static deleteclassify(params: any) {
+    return request.post<any>({
+      url: '/admin/post/category/destroy',
+      params
+    })
+  }
+  //分类详情
+  static classifydetail(params: any) {
+    return request.get<any>({
+      url: '/admin/post/category/show',
+      params
+    })
+  }
+  //分类内容列表
+  static getclassifycontentList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/post/list',
+      params
+    })
+  }
+  //分类内容添加
+  static addclassifycontent(params: any) {
+    return request.post<any>({
+      url: '/admin/post/store',
+      params
+    })
+  }
+  //分类内容编辑
+  static editclassifycontent(params: any) {
+    return request.post<any>({
+      url: '/admin/post/update',
+      params
+    })
+  }
+  //分类内容删除
+  static deleteclassifycontent(params: any) {
+    return request.post<any>({
+      url: '/admin/post/destroy',
+      params
+    })
+  }
+  //分类内容详情
+  static classifycontentdetail(params: any) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/post/show',
+      params
+    })
+  }
+  //评论 /admin/post/comment/list?post_id=&parent_id=
+  static classifycontentcommentdetail(params: any) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/post/comment/list',
+      params
+    })
+  }
+}

src/api/commonApi.ts

@@ -0,0 +1,82 @@
+import request from '@/utils/http'
+
+export class commonService {
+  //通知列表
+  static getNoticeList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/common/notice/list',
+      params
+    })
+  }
+  //通知详情
+  static getNoticeDetail(params: any) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/common/notice/show',
+      params
+    })
+  }
+  //通知已读
+  static readNotice(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/common/notice/read',
+      params
+    })
+  }
+  //通知删除
+  static delNotice(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/common/notice/destroy',
+      params
+    })
+  }
+  //通知未读列表
+  static getUnReadNoticeList() {
+    return request.get<any>({
+      url: '/common/notice/unread'
+    })
+  }
+  //账户下拉框
+  static getAccountSelect() {
+    return request.get<any>({
+      url: '/common/preset/account'
+    })
+  }
+  //名下客户下拉框
+  static getCustomerSelect() {
+    return request.get<any>({
+      url: '/crm/customer/preset'
+    })
+  }
+  //角色下拉框
+  static getRoleSelect() {
+    return request.get<any>({
+      url: '/common/preset/roles'
+    })
+  }
+  //用户下拉框
+  static getUserSelect() {
+    return request.get<any>({
+      url: '/common/preset/users'
+    })
+  }
+  //分类下拉
+  static getClassifySelect() {
+    return request.get<any>({
+      url: '/common/nav/categories/preset'
+    })
+  }
+  //签名 编辑
+  static signatureEdit(params: any) {
+    return request.post<any>({
+      url: '/admin/user/update/sign',
+      params
+    })
+  }
+  //获取设置
+  static getSetting(params: any) {
+    return request.get<any>({
+      url: '/common/config/find',
+      params: params
+    })
+  }
+}

src/api/menuApi.ts

@@ -0,0 +1,43 @@
+import { menuDataToRouter } from '@/router/utils/menuToRouter'
+import { AppRouteRecord } from '@/types/router'
+import { useUserStore } from '@/store/modules/user'
+import { UserService } from '@/api/usersApi'
+interface MenuResponse {
+  menuList: AppRouteRecord[]
+}
+// 菜单接口
+export const menuService = {
+  async getMenuList(delay = 300): Promise<MenuResponse> {
+    try {
+      const userStore = useUserStore()
+      // 验证用户登录状态
+      if (!userStore.isLogin) {
+        throw new Error('用户未登录')
+      }
+      const { menu } = await UserService.getMenuList()
+      const menuData = menu
+      // const userStore = useUserStore()
+      // 模拟接口返回的菜单数据
+      // 验证菜单数据
+      if (!menuData || !Array.isArray(menuData) || menuData.length === 0) {
+        ElMessage.error('暂无系统菜单权限')
+        return { menuList: [] }
+      }
+      // console.log('menuData', menuData)
+      // 处理菜单数据
+      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('获取菜单失败')
+    }
+  }
+}

src/api/systemApi.ts

@@ -0,0 +1,318 @@
+import request from '@/utils/http'
+
+export class systemService {
+  //系统列表
+  static getSystemList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/systems/list',
+      params
+    })
+  }
+  //系统添加
+  static systemAdd(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/systems/store',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //系统详情
+  static systemDetail(params: any) {
+    return request.get<any>({
+      url: '/admin/systems/show',
+      params
+    })
+  }
+  //系统编辑
+  static systemEdit(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/systems/update',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //系统删除
+  static systemDelete(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/systems/destroy',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //角色列表
+  static getRoleList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/role/list',
+      params
+    })
+  }
+  //角色添加
+  static roleAdd(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/role/store',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //角色详情
+  static roleDetail(params: any) {
+    return request.get<any>({
+      url: '/admin/role/show',
+      params
+    })
+  }
+  //角色编辑
+  static roleEdit(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/role/update',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //角色删除
+  static roleDelete(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/role/destroy',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //角色权限设置
+  static roleAuth(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/role/menu/resource',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //角色下拉框
+  static getRoleSelectList() {
+    return request.get<Api.Common.CommonListData>({
+      url: '/common/preset/roles'
+    })
+  }
+  //菜单列表
+  static getMenutreeList(params: any) {
+    return request.get<any>({
+      url: '/admin/resources/list/tree',
+      params
+    })
+  }
+  static getMenuList() {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/resources/list/menu'
+    })
+  }
+  //菜单添加
+  static menuAdd(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/resources/store',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //菜单详情
+  static menuDetail(params: any) {
+    return request.get<any>({
+      url: '/admin/resources/show',
+      params
+    })
+  }
+  //菜单编辑
+  static menuEdit(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/resources/update',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //菜单删除
+  static menuDelete(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/resources/destroy',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //权限菜单
+  static getPermissionMenuList(params: any) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/resources/list/menu/tree',
+      params
+    })
+  }
+  //通知列表
+  static getNoticeList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/notice/list',
+      params
+    })
+  }
+  //通知详情
+  static getNoticeDetail(params: any) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/notice/show',
+      params
+    })
+  }
+  //通知删除
+  static delNotice(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/notice/destroy',
+      params
+    })
+  }
+  //通知推送
+  static sendNotice(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/notice/push',
+      params
+    })
+  }
+  //系统设置
+  static getconfigList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/config/list',
+      params
+    })
+  }
+  //系统设置添加
+  static configAdd(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/config/store',
+      params
+    })
+  }
+  //系统设置详情
+  static configDetail(params: any) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/config/show',
+      params
+    })
+  }
+  //系统设置删除
+  static configDelete(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/config/destroy',
+      params
+    })
+  }
+  //系统设置编辑
+  static configEdit(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/config/update',
+      params
+    })
+  }
+  //协议列表
+  static getAgreementList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/agreement/list',
+      params
+    })
+  }
+  //协议添加
+  static agreementAdd(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/agreement/store',
+      params
+    })
+  }
+  //协议详情
+  static agreementDetail(params: any) {
+    return request.get<any>({
+      url: '/admin/agreement/show',
+      params
+    })
+  }
+  //协议编辑
+  static agreementEdit(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/agreement/update',
+      params
+    })
+  }
+  //协议删除
+  static agreementDelete(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/agreement/destroy',
+      params
+    })
+  }
+  //轮播列表
+  static getBannerList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/banner/list',
+      params
+    })
+  }
+  //轮播添加
+  static bannerAdd(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/banner/store',
+      params
+    })
+  }
+  //轮播详情
+  static bannerDetail(params: any) {
+    return request.get<any>({
+      url: '/admin/banner/show',
+      params
+    })
+  }
+  //轮播编辑
+  static bannerEdit(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/banner/update',
+      params
+    })
+  }
+  //轮播删除
+  static bannerDelete(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/banner/destroy',
+      params
+    })
+  }
+  ///admin/banner/module
+  static getbannerModule() {
+    return request.post<any>({
+      url: '/admin/banner/module'
+    })
+  }
+  //弹幕列表
+  static getbulletchatList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/barrage/list',
+      params
+    })
+  }
+  //弹幕添加
+  static bulletchatAdd(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/barrage/store',
+      params
+    })
+  }
+  //弹幕详情
+  static bulletchatDetail(params: any) {
+    return request.get<any>({
+      url: '/admin/barrage/show',
+      params
+    })
+  }
+  //弹幕编辑
+  static bulletchatEdit(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/barrage/update',
+      params
+    })
+  }
+  //弹幕删除
+  static bulletchatDelete(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/barrage/destroy',
+      params
+    })
+  }
+}

src/api/usersApi.ts

@@ -0,0 +1,96 @@
+import request from '@/utils/http'
+
+export class UserService {
+  //获取公司
+  static getCompanyList() {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/common/preset/corps'
+    })
+  }
+  //获取系统
+  static getsystemsList() {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/common/preset/systems'
+    })
+  }
+  //注册
+  static register(params: any) {
+    return request.post<Api.Auth.registerResponse>({
+      url: '/common/auth/register',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //获取 飞书信息
+  static getfeishuAppList(params: any) {
+    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
+    })
+  }
+  //获取菜单
+  static getMenuList() {
+    return request.get<Api.User.UserInfo>({
+      url: '/common/preset/menus'
+    })
+  }
+  //个人信息编辑
+  static editUserInfo(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/admin/user/edit',
+      params
+    })
+  }
+  //修改密码 crm/user/savePassword
+  static savePassword(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/admin/user/update/password',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+}

src/assets/geo/GeoCoordMap.json

@@ -0,0 +1,426 @@
+{
+    "wordGeoCoordMap":{
+        "阿富汗": [67.709953, 33.93911],
+        "安哥拉": [17.873887, -11.202692],
+        "阿尔巴尼亚": [20.168331, 41.153332],
+        "阿拉伯联合酋长国": [53.847818, 23.424076],
+        "阿根廷": [-63.61667199999999, -38.416097],
+        "亚美尼亚": [45.038189, 40.069099],
+        "法属南半球和南极领地": [69.348557, -49.280366],
+        "澳大利亚": [133.775136, -25.274398],
+        "奥地利": [14.550072, 47.516231],
+        "阿塞拜疆": [47.576927, 40.143105],
+        "布隆迪": [29.918886, -3.373056],
+        "比利时": [4.469936, 50.503887],
+        "贝宁": [2.315834, 9.30769],
+        "布基纳法索": [-1.561593, 12.238333],
+        "孟加拉人民共和国": [90.356331, 23.684994],
+        "保加利亚": [25.48583, 42.733883],
+        "巴哈马": [-77.39627999999999, 25.03428],
+        "波斯尼亚和黑塞哥维那": [17.679076, 43.915886],
+        "白俄罗斯": [27.953389, 53.709807],
+        "伯利兹": [-88.49765, 17.189877],
+        "百慕大": [-64.7505, 32.3078],
+        "玻利维亚": [-63.58865299999999, -16.290154],
+        "巴西": [-51.92528, -14.235004],
+        "文莱": [114.727669, 4.535277],
+        "不丹": [90.433601, 27.514162],
+        "博茨瓦纳": [24.684866, -22.328474],
+        "中非共和国": [20.939444, 6.611110999999999],
+        "加拿大": [-106.346771, 56.130366],
+        "瑞士": [8.227511999999999, 46.818188],
+        "智利": [-71.542969, -35.675147],
+        "中华人民共和国": [104.195397, 35.86166],
+        "象牙海岸": [-5.547079999999999, 7.539988999999999],
+        "喀麦隆": [12.354722, 7.369721999999999],
+        "刚果民主共和国": [21.758664, -4.038333],
+        "刚果共和国": [15.827659, -0.228021],
+        "哥伦比亚": [-74.297333, 4.570868],
+        "哥斯达黎加共和国": [-83.753428, 9.748916999999999],
+        "古巴": [-77.781167, 21.521757],
+        "北塞浦路斯": [33.429859, 35.126413],
+        "塞浦路斯": [33.429859, 35.126413],
+        "捷克共和国": [15.472962, 49.81749199999999],
+        "德国": [10.451526, 51.165691],
+        "吉布提": [42.590275, 11.825138],
+        "丹麦": [9.501785, 56.26392],
+        "多明尼加共和国": [-70.162651, 18.735693],
+        "阿尔及利亚": [1.659626, 28.033886],
+        "厄瓜多尔": [-78.18340599999999, -1.831239],
+        "埃及": [30.802498, 26.820553],
+        "厄立特里亚": [39.782334, 15.179384],
+        "西班牙": [-3.74922, 40.46366700000001],
+        "爱沙尼亚": [25.013607, 58.595272],
+        "埃塞俄比亚": [40.489673, 9.145000000000001],
+        "芬兰": [25.748151, 61.92410999999999],
+        "斐": [178.065032, -17.713371],
+        "福克兰群岛": [-59.523613, -51.796253],
+        "法国": [2.213749, 46.227638],
+        "加蓬共和国": [11.609444, -0.803689],
+        "英国": [-3.435973, 55.378051],
+        "格鲁吉亚": [-82.9000751, 32.1656221],
+        "加纳": [-1.023194, 7.946527],
+        "几内亚": [-9.696645, 9.945587],
+        "冈比亚": [-15.310139, 13.443182],
+        "几内亚比绍": [-15.180413, 11.803749],
+        "赤道几内亚": [10.267895, 1.650801],
+        "希腊": [21.824312, 39.074208],
+        "格陵兰": [-42.604303, 71.706936],
+        "危地马拉": [-90.23075899999999, 15.783471],
+        "法属圭亚那": [-53.125782, 3.933889],
+        "圭亚那": [-58.93018, 4.860416],
+        "洪都拉斯": [-86.241905, 15.199999],
+        "克罗地亚": [15.2, 45.1],
+        "海地": [-72.285215, 18.971187],
+        "匈牙利共和国": [19.503304, 47.162494],
+        "印尼": [113.921327, -0.789275],
+        "爱尔兰": [-8.24389, 53.41291],
+        "伊朗": [53.688046, 32.427908],
+        "伊拉克": [43.679291, 33.223191],
+        "冰岛": [-19.020835, 64.963051],
+        "以色列": [34.851612, 31.046051],
+        "意大利": [12.56738, 41.87194],
+        "牙买加": [-77.297508, 18.109581],
+        "约旦": [36.238414, 30.585164],
+        "日本": [138.252924, 36.204824],
+        "哈萨克斯坦": [66.923684, 48.019573],
+        "肯尼亚": [37.906193, -0.023559],
+        "吉尔吉斯斯坦": [74.766098, 41.20438],
+        "柬埔寨": [104.990963, 12.565679],
+        "韩国": [127.766922, 35.907757],
+        "科索沃": [20.902977, 42.6026359],
+        "科威特": [47.481766, 29.31166],
+        "老挝": [102.495496, 19.85627],
+        "黎巴嫩": [35.862285, 33.854721],
+        "利比里亚共和国": [-9.429499000000002, 6.428055],
+        "利比亚": [17.228331, 26.3351],
+        "斯里兰卡": [80.77179699999999, 7.873053999999999],
+        "莱索托": [28.233608, -29.609988],
+        "立陶宛": [23.881275, 55.169438],
+        "巴林": [50.30, 26.10],
+        "卢森堡": [6.129582999999999, 49.815273],
+        "拉脱维亚共和国": [24.603189, 56.879635],
+        "摩洛哥": [-7.092619999999999, 31.791702],
+        "摩尔多瓦": [28.369885, 47.411631],
+        "马达加斯加": [46.869107, -18.766947],
+        "墨西哥": [-102.552784, 23.634501],
+        "马其顿": [21.745275, 41.608635],
+        "马里": [-3.996166, 17.570692],
+        "缅甸": [95.956223, 21.913965],
+        "黑山共和国": [19.37439, 42.708678],
+        "蒙古": [103.846656, 46.862496],
+        "莫桑比克": [35.529562, -18.665695],
+        "毛里塔尼亚": [-10.940835, 21.00789],
+        "马拉维": [34.301525, -13.254308],
+        "马来西亚": [101.975766, 4.210484],
+        "纳米比亚": [18.49041, -22.95764],
+        "新喀里多尼亚": [165.618042, -20.904305],
+        "尼日尔": [8.081666, 17.607789],
+        "尼日利亚": [8.675277, 9.081999],
+        "尼加拉瓜": [-85.207229, 12.865416],
+        "荷兰": [5.291265999999999, 52.132633],
+        "挪威": [8.468945999999999, 60.47202399999999],
+        "尼泊尔": [84.12400799999999, 28.394857],
+        "新西兰": [174.885971, -40.900557],
+        "阿曼": [55.923255, 21.512583],
+        "巴基斯坦": [69.34511599999999, 30.375321],
+        "巴拿马共和国": [-80.782127, 8.537981],
+        "秘鲁": [-75.015152, -9.189967],
+        "菲律宾": [121.774017, 12.879721],
+        "巴布亚新几内亚": [143.95555, -6.314992999999999],
+        "波兰": [19.145136, 51.919438],
+        "波多黎各": [-66.590149, 18.220833],
+        "北朝鲜": [127.510093, 40.339852],
+        "葡萄牙": [-8.224454, 39.39987199999999],
+        "巴拉圭": [-58.443832, -23.442503],
+        "卡塔尔": [51.183884, 25.354826],
+        "罗马尼亚": [24.96676, 45.943161],
+        "俄罗斯": [105.318756, 61.52401],
+        "俄罗斯联邦": [105.318756, 61.52401],
+        "卢旺达": [29.873888, -1.940278],
+        "西撒哈拉": [-12.885834, 24.215527],
+        "沙特阿拉伯": [45.079162, 23.885942],
+        "苏丹": [30.217636, 12.862807],
+        "南苏丹": [31.3069788, 6.876991899999999],
+        "塞内加尔": [-14.452362, 14.497401],
+        "所罗门群岛": [160.156194, -9.64571],
+        "塞拉利昂": [-11.779889, 8.460555],
+        "萨尔瓦多": [-88.89653, 13.794185],
+        "索马里兰": [46.8252838, 9.411743399999999],
+        "索马里": [46.199616, 5.152149],
+        "塞尔维亚": [21.005859, 44.016521],
+        "苏里南": [-56.027783, 3.919305],
+        "斯洛伐克共和国": [19.699024, 48.669026],
+        "斯洛文尼亚": [14.995463, 46.151241],
+        "瑞典": [18.643501, 60.12816100000001],
+        "斯威士兰": [31.465866, -26.522503],
+        "叙利亚": [38.996815, 34.80207499999999],
+        "乍得": [18.732207, 15.454166],
+        "多哥": [0.824782, 8.619543],
+        "泰国": [100.992541, 15.870032],
+        "塔吉克斯坦共和国": [71.276093, 38.861034],
+        "土库曼斯坦": [59.556278, 38.969719],
+        "东帝汶": [125.727539, -8.874217],
+        "特里尼达和多巴哥": [-61.222503, 10.691803],
+        "突尼斯": [9.537499, 33.886917],
+        "土耳其": [35.243322, 38.963745],
+        "坦桑尼亚": [34.888822, -6.369028],
+        "乌干达": [32.290275, 1.373333],
+        "乌克兰": [31.16558, 48.379433],
+        "乌拉圭": [-55.765835, -32.522779],
+        "美国": [-95.712891, 37.09024],
+        "乌兹别克斯坦": [64.585262, 41.377491],
+        "委内瑞拉": [-66.58973, 6.42375],
+        "越南": [108.277199, 14.058324],
+        "瓦努阿图": [166.959158, -15.376706],
+        "西岸": [35.3027226, 31.9465703],
+        "也门": [48.516388, 15.552727],
+        "南非": [22.937506, -30.559482],
+        "赞比亚": [27.849332, -13.133897],
+        "津巴布韦": [29.154857, -19.015438],
+        "科摩罗": [43.872219, -11.875001],
+        "印度尼西亚": [106.515414, -6.103040],
+        "印度": [78.96288, 20.593684],
+        "刚果": [15.12, -4.09],
+        "萨摩亚独立国": [-171.46, 13.5],
+        "朝鲜": [125.30, 39.09],
+        "新加坡": [103.87546, 1.30243],
+        "中非": [18.33, 4.21],
+        "巴勒斯坦": [35.25, 31.79],
+        "圣卢西亚": [-60.58, 14.02],
+        "安提瓜和巴布达": [-61.48, 17.20],
+        "巴巴多斯": [-59.30, 13.05],
+        "开曼群岛": [-81.24, 19.20],
+        "法罗群岛": [-6.56, 62.05],
+        "圣文森特和格林纳丁斯": [-61.10, 13.10],
+        "特立尼达和多巴哥": [-60.32, 11.18],
+        "台澎金马单独关税区": [121.21, 25.02],
+        "中国香港": [114.12, 22.26],
+        "中国澳门": [113.5, 22.2],
+        "格林纳达": [-61.4, 12.7],
+        "塞舌尔共和国": [55.28, -4.4],
+        "多米尼克": [61.23, 15.18],
+        "斐济": [178.30, -18.06],
+        "科特迪瓦": [-5.17, 6.49],
+        "欧盟": [4.47, 50.50]
+    },
+    "nameMap":{
+        "Afghanistan": "阿富汗",
+        "Singapore": "新加坡",
+        "Angola": "安哥拉",
+        "Albania": "阿尔巴尼亚",
+        "United Arab Emirates": "阿拉伯联合酋长国",
+        "Argentina": "阿根廷",
+        "Armenia": "亚美尼亚",
+        "French Southern and Antarctic Lands": "法属南半球和南极领地",
+        "Australia": "澳大利亚",
+        "Austria": "奥地利",
+        "Azerbaijan": "阿塞拜疆",
+        "Seychelles": "塞舌尔共和国",
+        "Burundi": "布隆迪",
+        "Belgium": "比利时",
+        "Benin": "贝宁",
+        "Burkina Faso": "布基纳法索",
+        "Côte d Ivoire": "科特迪瓦",
+        "Bangladesh": "孟加拉人民共和国",
+        "Bulgaria": "保加利亚",
+        "The Bahamas": "巴哈马",
+        "Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那",
+        "Belarus": "白俄罗斯",
+        "Belize": "伯利兹",
+        "Bermuda": "百慕大",
+        "Bolivia": "玻利维亚",
+        "Brazil": "巴西",
+        "Brunei": "文莱",
+        "Bhutan": "不丹",
+        "Botswana": "博茨瓦纳",
+        "Central African Republic": "中非共和国",
+        "Canada": "加拿大",
+        "Switzerland": "瑞士",
+        "Chile": "智利",
+        "China": "中华人民共和国",
+        "Ivory Coast": "象牙海岸",
+        "Cameroon": "喀麦隆",
+        "Dem. Rep. Congo": "刚果民主共和国",
+        "Republic of the Congo": "刚果共和国",
+        "Colombia": "哥伦比亚",
+        "Costa Rica": "哥斯达黎加共和国",
+        "Cuba": "古巴",
+        "Northern Cyprus": "北塞浦路斯",
+        "Cyprus": "塞浦路斯",
+        "Czech Republic": "捷克共和国",
+        "Germany": "德国",
+        "Djibouti": "吉布提",
+        "Denmark": "丹麦",
+        "Dominican Republic": "多明尼加共和国",
+        "Algeria": "阿尔及利亚",
+        "Ecuador": "厄瓜多尔",
+        "Egypt": "埃及",
+        "Eritrea": "厄立特里亚",
+        "Spain": "西班牙",
+        "Estonia": "爱沙尼亚",
+        "Ethiopia": "埃塞俄比亚",
+        "Bahrain": "巴林",
+        "Finland": "芬兰",
+        "Fiji": "斐济",
+        "Falkland Islands": "福克兰群岛",
+        "France": "法国",
+        "Gabon": "加蓬共和国",
+        "United Kingdom": "英国",
+        "Georgia": "格鲁吉亚",
+        "Ghana": "加纳",
+        "Guinea": "几内亚",
+        "Gambia": "冈比亚",
+        "Guinea Bissau": "几内亚比绍",
+        "Greece": "希腊",
+        "Greenland": "格陵兰",
+        "Guatemala": "危地马拉",
+        "French Guiana": "法属圭亚那",
+        "Guyana": "圭亚那",
+        "Honduras": "洪都拉斯",
+        "Croatia": "克罗地亚",
+        "Haiti": "海地",
+        "Hungary": "匈牙利共和国",
+        "Indonesia": "印度尼西亚",
+        "India": "印度",
+        "Ireland": "爱尔兰",
+        "Iran": "伊朗",
+        "Iraq": "伊拉克",
+        "Iceland": "冰岛",
+        "Israel": "以色列",
+        "Italy": "意大利",
+        "Jamaica": "牙买加",
+        "Jordan": "约旦",
+        "Japan": "日本",
+        "Kazakhstan": "哈萨克斯坦",
+        "Kenya": "肯尼亚",
+        "Kyrgyzstan": "吉尔吉斯斯坦",
+        "Cambodia": "柬埔寨",
+        "Kosovo": "科索沃",
+        "Kuwait": "科威特",
+        "Laos": "老挝",
+        "Lebanon": "黎巴嫩",
+        "Liberia": "利比里亚共和国",
+        "Libya": "利比亚",
+        "Sri Lanka": "斯里兰卡",
+        "Lesotho": "莱索托",
+        "Lithuania": "立陶宛",
+        "Luxembourg": "卢森堡",
+        "Latvia": "拉脱维亚共和国",
+        "Morocco": "摩洛哥",
+        "Moldova": "摩尔多瓦",
+        "Madagascar": "马达加斯加",
+        "Mexico": "墨西哥",
+        "Macedonia": "马其顿",
+        "Mali": "马里",
+        "Myanmar": "缅甸",
+        "Montenegro": "黑山共和国",
+        "Mongolia": "蒙古",
+        "Mozambique": "莫桑比克",
+        "Mauritania": "毛里塔尼亚",
+        "Malawi": "马拉维",
+        "Malaysia": "马来西亚",
+        "Namibia": "纳米比亚",
+        "New Caledonia": "新喀里多尼亚",
+        "Niger": "尼日尔",
+        "Nigeria": "尼日利亚",
+        "Nicaragua": "尼加拉瓜",
+        "Netherlands": "荷兰",
+        "Norway": "挪威",
+        "Nepal": "尼泊尔",
+        "New Zealand": "新西兰",
+        "Oman": "阿曼",
+        "Pakistan": "巴基斯坦",
+        "Panama": "巴拿马共和国",
+        "Peru": "秘鲁",
+        "Philippines": "菲律宾",
+        "Papua New Guinea": "巴布亚新几内亚",
+        "Poland": "波兰",
+        "Puerto Rico": "波多黎各",
+        "North Korea": "北朝鲜",
+        "Portugal": "葡萄牙",
+        "Paraguay": "巴拉圭",
+        "Qatar": "卡塔尔",
+        "Romania": "罗马尼亚",
+        "Russia": "俄罗斯",
+        "Rwanda": "卢旺达",
+        "Western Sahara": "西撒哈拉",
+        "Saudi Arabia": "沙特阿拉伯",
+        "Sudan": "苏丹",
+        "S. Sudan": "南苏丹",
+        "Senegal": "塞内加尔",
+        "Solomon Islands": "所罗门群岛",
+        "Sierra Leone": "塞拉利昂",
+        "El Salvador": "萨尔瓦多",
+        "Somaliland": "索马里兰",
+        "Somalia": "索马里",
+        "Republic of Serbia": "塞尔维亚",
+        "Suriname": "苏里南",
+        "Slovakia": "斯洛伐克共和国",
+        "Slovenia": "斯洛文尼亚",
+        "Sweden": "瑞典",
+        "Swaziland": "斯威士兰",
+        "Syria": "叙利亚",
+        "Chad": "乍得",
+        "Togo": "多哥",
+        "Thailand": "泰国",
+        "Tajikistan": "塔吉克斯坦共和国",
+        "Turkmenistan": "土库曼斯坦",
+        "East Timor": "东帝汶",
+        "Trinidad and Tobago": "特立尼达和多巴哥",
+        "Tunisia": "突尼斯",
+        "Turkey": "土耳其",
+        "Uganda": "乌干达",
+        "Ukraine": "乌克兰",
+        "Uruguay": "乌拉圭",
+        "United States": "美国",
+        "Uzbekistan": "乌兹别克斯坦",
+        "Venezuela": "委内瑞拉",
+        "Vietnam": "越南",
+        "Vanuatu": "瓦努阿图",
+        "West Bank": "西岸",
+        "Yemen": "也门",
+        "South Africa": "南非",
+        "Zambia": "赞比亚",
+        "Korea": "韩国",
+        "Tanzania": "坦桑尼亚",
+        "Zimbabwe": "津巴布韦",
+        "Congo": "刚果",
+        "Central African Rep.": "中非",
+        "Serbia": "塞尔维亚",
+        "Bosnia and Herz.": "波黑",
+        "Czech Rep.": "捷克",
+        "W. Sahara": "西撒哈拉",
+        "Lao PDR": "老挝",
+        "Dem. Rep. Korea": "朝鲜",
+        "Falkland Is.": "福克兰群岛",
+        "Timor-Leste": "东帝汶",
+        "Solomon Is.": "所罗门群岛",
+        "Palestine": "巴勒斯坦",
+        "N. Cyprus": "北塞浦路斯",
+        "Aland": "奥兰群岛",
+        "Fr. S. Antarctic Lands": "法属南半球和南极陆地",
+        "Mauritius": "毛里求斯",
+        "Comoros": "科摩罗",
+        "Eq. Guinea": "赤道几内亚",
+        "Guinea-Bissau": "几内亚比绍",
+        "Dominican Rep.": "多米尼加共和国",
+        "Saint Lucia": "圣卢西亚",
+        "Dominica": "多米尼克",
+        "Antigua and Barb.": "安提瓜和巴布达",
+        "U.S. Virgin Is.": "美国原始岛屿",
+        "Montserrat": "蒙塞拉特",
+        "Grenada": "格林纳达",
+        "Barbados": "巴巴多斯",
+        "Samoa": "萨摩亚独立国",
+        "Bahamas": "巴哈马",
+        "Cayman Is.": "开曼群岛",
+        "Faeroe Is.": "法罗群岛",
+        "IsIe of Man": "马恩岛",
+        "Malta": "马耳他共和国",
+        "Jersey": "泽西",
+        "Cape Verde": "佛得角共和国",
+        "Turks and Caicos Is.": "特克斯和凯科斯群岛",
+        "St. Vin. and Gren.": "圣文森特和格林纳丁斯"
+    }
+}

src/assets/styles/app.scss

@@ -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;
+  }
+}

src/assets/styles/change.scss

@@ -0,0 +1,11 @@
+// 主题切换过渡优化，去除不适感
+.theme-change {
+  * {
+    transition: 0s !important;
+  }
+
+  .el-switch__core,
+  .el-switch__action {
+    transition: all 0.3s !important;
+  }
+}

src/assets/styles/dark.scss

@@ -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;
+      }
+    }
+  }
+}

src/assets/styles/el-dark.scss

@@ -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 *;

src/assets/styles/el-light.scss

@@ -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 *;

src/assets/styles/el-ui.scss

@@ -0,0 +1,411 @@
+// 优化 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;
+}
+
+// 修复 el-table 空数据块样式
+.el-table__empty-block {
+  height: 100% !important;
+  min-height: 200px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}

src/assets/styles/mixin.scss

@@ -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);
+}

src/assets/styles/mobile.scss

@@ -0,0 +1,8 @@
+// 移动端样式处理
+
+// 去除移动端点击背景色
+@media screen and (max-width: $device-ipad-pro) {
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+}

src/assets/styles/one-dark-pro.scss

@@ -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;
+}

src/assets/styles/reset.scss

@@ -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;
+  }
+}

src/assets/styles/theme-animation.scss

@@ -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);
+}

src/assets/styles/transition.scss

@@ -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');
+}

src/assets/styles/tree.scss

@@ -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;
+}

src/assets/styles/variables.scss

@@ -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;
+}

src/assets/svg/loading.ts

@@ -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>
+`

src/components/core/banners/art-basic-banner/index.vue

@@ -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>

src/components/core/banners/art-card-banner/index.vue

@@ -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>

src/components/core/base/art-back-to-top/index.vue

@@ -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>

src/components/core/base/art-icon-selector/index.vue

@@ -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>

src/components/core/base/art-logo/index.vue

@@ -0,0 +1,34 @@
+<!-- 系统logo -->
+<template>
+  <div class="art-logo">
+    <img :style="logoStyle" src="@imgs/login/logopc.png" 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>

src/components/core/cards/art-bar-chart-card/index.vue

@@ -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>

src/components/core/cards/art-data-list-card/index.vue

@@ -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>

src/components/core/cards/art-donut-chart-card/index.vue

@@ -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>

src/components/core/cards/art-image-card/index.vue

@@ -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>