xto-fronted 0.4.71 → 0.4.73

package/src/assets/styles/index.scss

@@ -15,7 +15,7 @@
 @use 'dark';
 
 // ==============================================
-// 全局通用样式
+// 全局通用样式（企业级增强）
 // ==============================================
 
 // 文字截断
@@ -33,6 +33,13 @@
   overflow: hidden;
 }
 
+.text-ellipsis-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 // Flex 布局
 .flex {
   display: flex;
@@ -50,6 +57,18 @@
   justify-content: space-between;
 }
 
+.flex-start {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.flex-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -58,6 +77,31 @@
   flex: 1;
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+// 方向
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-col-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+// Gap 间距（8px 网格系统）
+.gap-4 { gap: 4px; }
+.gap-8 { gap: 8px; }
+.gap-12 { gap: 12px; }
+.gap-16 { gap: 16px; }
+.gap-20 { gap: 20px; }
+.gap-24 { gap: 24px; }
+.gap-32 { gap: 32px; }
+
 // 文字对齐
 .text-left {
   text-align: left;
@@ -92,6 +136,14 @@
   color: var(--color-info);
 }
 
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+
+.text-placeholder {
+  color: var(--color-text-placeholder);
+}
+
 // 背景
 .bg-primary {
   background-color: var(--color-primary);
@@ -109,81 +161,254 @@
   background-color: var(--color-danger);
 }
 
-// 间距
-.mt-10 {
-  margin-top: 10px;
-}
-
-.mt-20 {
-  margin-top: 20px;
-}
-
-.mb-10 {
-  margin-bottom: 10px;
+.bg-page {
+  background-color: var(--bg-color-page);
 }
 
-.mb-20 {
-  margin-bottom: 20px;
-}
-
-.ml-10 {
-  margin-left: 10px;
-}
-
-.mr-10 {
-  margin-right: 10px;
+.bg-card {
+  background-color: var(--bg-color);
 }
 
-.p-10 {
-  padding: 10px;
-}
+// 间距（8px 网格系统）
+.mt-4 { margin-top: 4px; }
+.mt-8 { margin-top: 8px; }
+.mt-12 { margin-top: 12px; }
+.mt-16 { margin-top: 16px; }
+.mt-20 { margin-top: 20px; }
+.mt-24 { margin-top: 24px; }
+.mt-32 { margin-top: 32px; }
+
+.mb-4 { margin-bottom: 4px; }
+.mb-8 { margin-bottom: 8px; }
+.mb-12 { margin-bottom: 12px; }
+.mb-16 { margin-bottom: 16px; }
+.mb-20 { margin-bottom: 20px; }
+.mb-24 { margin-bottom: 24px; }
+.mb-32 { margin-bottom: 32px; }
+
+.ml-4 { margin-left: 4px; }
+.ml-8 { margin-left: 8px; }
+.ml-12 { margin-left: 12px; }
+.ml-16 { margin-left: 16px; }
+
+.mr-4 { margin-right: 4px; }
+.mr-8 { margin-right: 8px; }
+.mr-12 { margin-right: 12px; }
+.mr-16 { margin-right: 16px; }
+
+.p-4 { padding: 4px; }
+.p-8 { padding: 8px; }
+.p-12 { padding: 12px; }
+.p-16 { padding: 16px; }
+.p-20 { padding: 20px; }
+.p-24 { padding: 24px; }
+.p-32 { padding: 32px; }
+
+.px-4 { padding-left: 4px; padding-right: 4px; }
+.px-8 { padding-left: 8px; padding-right: 8px; }
+.px-12 { padding-left: 12px; padding-right: 12px; }
+.px-16 { padding-left: 16px; padding-right: 16px; }
+.px-24 { padding-left: 24px; padding-right: 24px; }
+
+.py-4 { padding-top: 4px; padding-bottom: 4px; }
+.py-8 { padding-top: 8px; padding-bottom: 8px; }
+.py-12 { padding-top: 12px; padding-bottom: 12px; }
+.py-16 { padding-top: 16px; padding-bottom: 16px; }
+.py-24 { padding-top: 24px; padding-bottom: 24px; }
+
+// 卡片容器（企业级）
+.card {
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-card);
+  padding: var(--spacing-lg);
+  transition: box-shadow 0.3s ease;
 
-.p-20 {
-  padding: 20px;
+  &:hover {
+    box-shadow: var(--box-shadow-card-hover);
+  }
 }
 
-// 卡片容器
-.card {
+.card-flat {
   background-color: var(--bg-color);
-  border-radius: var(--border-radius-base);
-  box-shadow: var(--box-shadow-light);
-  padding: var(--spacing-md);
+  border-radius: var(--border-radius-large);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-border-lighter);
 }
 
 // 页面容器
 .page-container {
-  padding: var(--spacing-md);
+  padding: var(--spacing-lg);
   min-height: 100%;
+  background: var(--bg-color-page);
 }
 
-// 搜索栏
+// 搜索栏（企业级）
 .search-bar {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-md);
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+  padding: var(--spacing-lg);
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-card);
 }
 
-// 工具栏
+// 工具栏（企业级）
 .toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border-lighter);
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
 }
 
-// 表格容器
+// 表格容器（企业级）
 .table-container {
   background-color: var(--bg-color);
-  border-radius: var(--border-radius-base);
-  padding: var(--spacing-md);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-card);
+  overflow: hidden;
 }
 
 // 分页容器
 .pagination-container {
   display: flex;
   justify-content: flex-end;
-  margin-top: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-top: 1px solid var(--color-border-lighter);
+}
+
+// 标签徽章
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 10px;
+  background: var(--color-fill);
+  color: var(--color-text-secondary);
+}
+
+.badge-primary {
+  background: var(--color-primary-light-6);
+  color: var(--color-primary);
+}
+
+.badge-success {
+  background: var(--color-success-lighter);
+  color: var(--color-success);
+}
+
+.badge-warning {
+  background: var(--color-warning-lighter);
+  color: var(--color-warning);
+}
+
+.badge-danger {
+  background: var(--color-danger-lighter);
+  color: var(--color-danger);
+}
+
+// 分隔线
+.divider {
+  height: 1px;
+  background: var(--color-border-lighter);
+  margin: var(--spacing-md) 0;
+}
+
+.divider-vertical {
+  width: 1px;
+  height: 100%;
+  background: var(--color-border-lighter);
+  margin: 0 var(--spacing-md);
+}
+
+// 空状态
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: var(--color-text-placeholder);
+
+  .empty-icon {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+
+  .empty-text {
+    font-size: 14px;
+  }
+}
+
+// 加载状态
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+
+  .loading-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--color-border-lighter);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  .loading-text {
+    margin-top: 16px;
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+// 链接样式
+.link {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-primary-dark-1);
+  }
+}
+
+.link-underline {
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+
+  &:hover {
+    color: var(--color-primary-dark-1);
+  }
 }
 
 // ==============================================

package/src/components/Layout/Sidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMenuStore } from '@/stores/menu'
 import { useUserStore } from '@/stores/user'
@@ -43,19 +43,38 @@ watch(openedMenus, (val) => {
   local.set(OPENED_MENUS_KEY, val)
 }, { deep: true })
 
-// 根据当前路由自动展开父菜单
-onMounted(() => {
-  const path = route.path
-  // 找到当前路由对应的父菜单并展开
-  for (const menu of displayMenuList.value) {
+// 递归查找当前路由对应的父菜单并展开
+const findAndOpenParentMenus = (menus: any[], path: string, parentUrls: string[] = []) => {
+  for (const menu of menus) {
     if (menu.children?.length) {
-      const hasActiveChild = menu.children.some((child: any) => path.startsWith(child.menuUrl))
-      if (hasActiveChild && !openedMenus.value.includes(menu.menuUrl)) {
-        openedMenus.value.push(menu.menuUrl)
+      // 检查当前菜单的直接子菜单是否匹配
+      const hasDirectMatch = menu.children.some((child: any) => path === child.menuUrl || path.startsWith(child.menuUrl + '/'))
+
+      if (hasDirectMatch) {
+        // 找到匹配，展开所有父菜单
+        for (const parentUrl of parentUrls) {
+          if (!openedMenus.value.includes(parentUrl)) {
+            openedMenus.value.push(parentUrl)
+          }
+        }
+        // 展开当前菜单
+        if (!openedMenus.value.includes(menu.menuUrl)) {
+          openedMenus.value.push(menu.menuUrl)
+        }
       }
+
+      // 递归查找更深层级
+      findAndOpenParentMenus(menu.children, path, [...parentUrls, menu.menuUrl])
     }
   }
-})
+}
+
+// 监听路由变化和菜单列表变化
+watch([() => route.path, displayMenuList], ([path, menus]) => {
+  if (menus.length > 0) {
+    findAndOpenParentMenus(menus, path)
+  }
+}, { immediate: true })
 
 // 菜单主题相关
 const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')