xto-fronted 0.4.86 → 0.4.87

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: 12px;
   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: 12px;
+  padding: 12px;
+  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: 12px;
+  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: 12px;
+  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 } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMenuStore } from '@/stores/menu'
 import { useUserStore } from '@/stores/user'
@@ -7,6 +7,7 @@ import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
 import { Menu } from '@xto/navigation'
 import { Button } from '@xto/base'
+import { local } from '@/utils/storage'
 import SidebarMenuItem from './SidebarMenuItem.vue'
 
 // Props
@@ -33,6 +34,45 @@ const displayMenuList = computed(() => props.menuList.length > 0 ? props.menuLis
 const isCollapsed = computed(() => appStore.isCollapsed)
 const activeMenu = computed(() => route.path)
 
+// 菜单展开状态持久化
+const OPENED_MENUS_KEY = 'sidebar_opened_menus'
+const openedMenus = ref<string[]>(local.get<string[]>(OPENED_MENUS_KEY) || [])
+
+// 监听变化并持久化
+watch(openedMenus, (val) => {
+  local.set(OPENED_MENUS_KEY, val)
+}, { deep: true })
+
+// 递归查找当前路由对应的父菜单路径
+const findMenuPath = (menus: any[], path: string, parentUrls: string[] = []): string[] | null => {
+  for (const menu of menus) {
+    // 当前菜单匹配
+    if (path === menu.menuUrl || path.startsWith(menu.menuUrl + '/')) {
+      return [...parentUrls, menu.menuUrl]
+    }
+    // 递归查找子菜单
+    if (menu.children?.length) {
+      const result = findMenuPath(menu.children, path, [...parentUrls, menu.menuUrl])
+      if (result) return result
+    }
+  }
+  return null
+}
+
+// 监听路由变化，只展开当前路由相关的父菜单
+watch([() => route.path, displayMenuList], ([path, menus]) => {
+  if (menus.length > 0) {
+    const menuPath = findMenuPath(menus, path)
+    if (menuPath) {
+      // 只保留路径上的父菜单（不包括当前页面本身）
+      openedMenus.value = menuPath.slice(0, -1)
+    } else {
+      // 如果找不到匹配的菜单，关闭所有
+      openedMenus.value = []
+    }
+  }
+}, { immediate: true })
+
 // 菜单主题相关
 const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
 const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
@@ -64,7 +104,8 @@ const handleLogout = () => {
 
     <!-- 菜单 -->
     <Menu
-      :model-value="activeMenu"
+      v-model="activeMenu"
+      v-model:openeds="openedMenus"
       mode="vertical"
       :collapse="isCollapsed"
       :collapse-transition="false"

package/src/components/Layout/TopMenu.vue

@@ -322,19 +322,44 @@ onUnmounted(() => {
               <span class="top-menu__menu-text">{{ menu.menuName }}</span>
             </span>
           </template>
-          <MenuItem
-            v-for="child in menu.children"
-            :key="child.menuUrl"
-            :index="child.menuUrl"
-          >
-            <span class="top-menu__menu-content">
-              <span class="top-menu__menu-icon">
-                <Icon v-if="iconExists(getMenuIcon(child.icon))" :name="getMenuIcon(child.icon)" :size="16" />
-                <span v-else class="top-menu__menu-char">{{ getFirstChar(child.menuName) }}</span>
+          <!-- 递归渲染子菜单 -->
+          <template v-for="child in menu.children" :key="child.menuUrl">
+            <SubMenu v-if="child.children && child.children.length > 0" :index="child.menuUrl">
+              <template #title>
+                <span class="top-menu__menu-content">
+                  <span class="top-menu__menu-icon">
+                    <Icon v-if="iconExists(getMenuIcon(child.icon))" :name="getMenuIcon(child.icon)" :size="16" />
+                    <span v-else class="top-menu__menu-char">{{ getFirstChar(child.menuName) }}</span>
+                  </span>
+                  <span class="top-menu__menu-text">{{ child.menuName }}</span>
+                </span>
+              </template>
+              <!-- 三级菜单项 -->
+              <MenuItem
+                v-for="grandChild in child.children"
+                :key="grandChild.menuUrl"
+                :index="grandChild.menuUrl"
+              >
+                <span class="top-menu__menu-content">
+                  <span class="top-menu__menu-icon">
+                    <Icon v-if="iconExists(getMenuIcon(grandChild.icon))" :name="getMenuIcon(grandChild.icon)" :size="16" />
+                    <span v-else class="top-menu__menu-char">{{ getFirstChar(grandChild.menuName) }}</span>
+                  </span>
+                  <span class="top-menu__menu-text">{{ grandChild.menuName }}</span>
+                </span>
+              </MenuItem>
+            </SubMenu>
+            <!-- 二级菜单项 -->
+            <MenuItem v-else :index="child.menuUrl">
+              <span class="top-menu__menu-content">
+                <span class="top-menu__menu-icon">
+                  <Icon v-if="iconExists(getMenuIcon(child.icon))" :name="getMenuIcon(child.icon)" :size="16" />
+                  <span v-else class="top-menu__menu-char">{{ getFirstChar(child.menuName) }}</span>
+                </span>
+                <span class="top-menu__menu-text">{{ child.menuName }}</span>
               </span>
-              <span class="top-menu__menu-text">{{ child.menuName }}</span>
-            </span>
-          </MenuItem>
+            </MenuItem>
+          </template>
         </SubMenu>
         <!-- 无子菜单 -->
         <MenuItem v-else :index="menu.menuUrl">

package/src/components/Layout/index.vue

@@ -187,6 +187,7 @@ const showMixSidebar = computed(() => {
     flex: 1;
     overflow: auto;
     background-color: var(--bg-color-page);
+    padding: 0;
   }
 }
 </style>

package/src/composables/useI18n.ts

@@ -0,0 +1,44 @@
+/**
+ * 国际化组合式函数
+ * 提供便捷的国际化操作
+ */
+
+import { useLocaleStore } from '@/stores/locale'
+import type { LocaleCode, LocaleMessages } from '@xto/core/locale'
+
+/**
+ * 使用国际化
+ * 封装 locale store，提供更简洁的 API
+ */
+export function useI18n() {
+  const localeStore = useLocaleStore()
+
+  return {
+    /** 当前语言代码 */
+    locale: localeStore.locale,
+    /** 当前语言名称 */
+    localeName: localeStore.localeName,
+    /** 支持的语言列表 */
+    locales: localeStore.locales,
+    /** 翻译函数 */
+    t: localeStore.t,
+    /** 当前语言包 */
+    messages: localeStore.messages,
+    /** 切换语言 */
+    setLocale: localeStore.changeLocale,
+    /** 添加自定义翻译 */
+    addMessages: localeStore.addMessages
+  }
+}
+
+/**
+ * 创建翻译函数
+ * 用于在非组件上下文中使用翻译
+ */
+export function createTranslator() {
+  const localeStore = useLocaleStore()
+  return localeStore.t
+}
+
+// 导出类型
+export type { LocaleCode, LocaleMessages }

package/src/index.ts

@@ -3,6 +3,7 @@ import './style.scss'
 
 // 配置
 import { initAppConfig, getAppId, getClientId, getApiBaseUrl } from './utils/config'
+import type { LocaleCode } from '@xto/core/locale'
 
 // XtoConfig 类型定义
 export interface XtoConfig {
@@ -12,6 +13,7 @@ export interface XtoConfig {
   apiBaseUrl?: string
   indexPath?: string
   loginPath?: string
+  locale?: LocaleCode
 }
 
 /**
@@ -25,6 +27,15 @@ export function createXtoApp(config: Partial<XtoConfig>) {
     clientId: config.clientId,
     apiBaseUrl: config.apiBaseUrl
   })
+
+  // 设置初始语言（如果提供）
+  if (config.locale) {
+    import('./stores/locale').then(({ useLocaleStore }) => {
+      const localeStore = useLocaleStore()
+      localeStore.changeLocale(config.locale!)
+    })
+  }
+
   return {
     config: {
       appName: config.appName || 'XTO App',
@@ -32,7 +43,8 @@ export function createXtoApp(config: Partial<XtoConfig>) {
       clientId: getClientId(),
       apiBaseUrl: getApiBaseUrl(),
       indexPath: config.indexPath || '/dashboard',
-      loginPath: config.loginPath || '/login'
+      loginPath: config.loginPath || '/login',
+      locale: config.locale || 'zh-CN'
     }
   }
 }
@@ -54,6 +66,7 @@ export * from './composables/useApp'
 export * from './composables/useAuth'
 export * from './composables/useForm'
 export * from './composables/useTable'
+export * from './composables/useI18n'
 
 // 工具函数
 export * from './utils/auth'
@@ -67,6 +80,7 @@ export * from './stores/app'
 export * from './stores/auth'
 export * from './stores/menu'
 export * from './stores/user'
+export * from './stores/locale'
 
 // 路由
 export { default as router, resetRouter } from './router'

package/src/stores/index.ts

@@ -12,4 +12,5 @@ export default pinia
 export * from './user'
 export * from './auth'
 export * from './menu'
-export * from './app'
+export * from './app'
+export * from './locale'

package/src/stores/locale.ts

@@ -0,0 +1,67 @@
+/**
+ * 国际化状态管理
+ */
+
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { local } from '@/utils/storage'
+import {
+  useLocale,
+  createLocaleProvider,
+  getSupportedLocales,
+  type LocaleCode,
+  type LocaleMessages
+} from '@xto/core/locale'
+
+export type { LocaleCode, LocaleMessages }
+
+export const useLocaleStore = defineStore('locale', () => {
+  // 从本地存储获取语言设置
+  const savedLocale = local.get<LocaleCode>('locale') || 'zh-CN'
+
+  // 创建国际化提供者
+  const provider = createLocaleProvider(savedLocale)
+
+  // 状态
+  const locale = ref<LocaleCode>(savedLocale)
+  const locales = getSupportedLocales()
+
+  // 使用国际化组合式函数
+  const { t, messages, setLocale, mergeMessages } = useLocale()
+
+  // 当前语言名称
+  const localeName = computed(() => {
+    const found = locales.find(l => l.code === locale.value)
+    return found?.name || locale.value
+  })
+
+  // 设置语言
+  const changeLocale = (code: LocaleCode) => {
+    locale.value = code
+    setLocale(code)
+    local.set('locale', code)
+    provider.setLocale(code)
+  }
+
+  // 添加自定义翻译
+  const addMessages = (msgs: LocaleMessages) => {
+    mergeMessages(msgs)
+  }
+
+  // 初始化
+  const initLocale = () => {
+    setLocale(savedLocale)
+  }
+
+  return {
+    locale,
+    localeName,
+    locales,
+    messages,
+    t,
+    changeLocale,
+    addMessages,
+    initLocale,
+    provider
+  }
+})