xto-fronted 0.4.85 → 0.4.87

package/src/assets/styles/_root.scss

@@ -1,184 +1,184 @@
-// ==============================================
-// CSS Variables - 企业级配色方案
-// 参考：阿里 Ant Design Pro、腾讯云控制台
-// ==============================================
-
-:root {
-  // 主色调 - 科技蓝系（深邃、专业）
-  --color-primary: #1677ff;
-  --color-primary-light-1: #4096ff;
-  --color-primary-light-2: #69b1ff;
-  --color-primary-light-3: #91caff;
-  --color-primary-light-4: #bae0ff;
-  --color-primary-light-5: #e6f4ff;
-  --color-primary-light-6: #f0f8ff;
-  --color-primary-dark-1: #0958d9;
-  --color-primary-dark-2: #003eb3;
-  --color-primary-dark-3: #002c8c;
-
-  // 功能色 - 精致调和
-  --color-success: #52c41a;
-  --color-success-light: #b7eb8f;
-  --color-success-lighter: #f6ffed;
-  --color-success-dark: #389e0d;
-
-  --color-warning: #faad14;
-  --color-warning-light: #ffe58f;
-  --color-warning-lighter: #fffbe6;
-  --color-warning-dark: #d48806;
-
-  --color-danger: #ff4d4f;
-  --color-danger-light: #ffa39e;
-  --color-danger-lighter: #fff2f0;
-  --color-danger-dark: #cf1322;
-
-  --color-info: #1677ff;
-  --color-info-light: #91caff;
-  --color-info-lighter: #e6f4ff;
-  --color-info-dark: #0958d9;
-
-  // 文字颜色 - 层次分明
-  --color-text-primary: #1f1f1f;
-  --color-text-regular: #424242;
-  --color-text-secondary: #757575;
-  --color-text-placeholder: #9e9e9e;
-  --color-text-disabled: #bdbdbd;
-
-  // 边框颜色 - 克制淡雅
-  --color-border: #d9d9d9;
-  --color-border-light: #e8e8e8;
-  --color-border-lighter: #f0f0f0;
-  --color-border-extra-light: #f5f5f5;
-  --color-border-dark: #bfbfbf;
-
-  // 填充颜色 - 背景层次
-  --color-fill: #f5f5f5;
-  --color-fill-light: #fafafa;
-  --color-fill-lighter: #ffffff;
-  --color-fill-blank: #ffffff;
-  --color-fill-dark: #e8e8e8;
-
-  // 背景颜色 - 页面层级
-  --bg-color: #ffffff;
-  --bg-color-page: #f0f2f5;
-  --bg-color-component: #ffffff;
-  --bg-color-overlay: #ffffff;
-  --bg-color-spotlight: #e6f4ff;
-
-  // 盒子阴影 - 精致层次
-  --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);
-  --box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
-                      0 1px 6px -1px rgba(0, 0, 0, 0.02),
-                      0 2px 4px 0 rgba(0, 0, 0, 0.02);
-  --box-shadow-lighter: 0 1px 4px rgba(0, 0, 0, 0.04);
-  --box-shadow-dark: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
-                     0 9px 28px 8px rgba(0, 0, 0, 0.05),
-                     0 12px 48px 16px rgba(0, 0, 0, 0.03);
-  --box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
-  --box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
-
-  // 字体 - 企业级字体栈
-  --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  --font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
-    Consolas, 'Courier New', monospace;
-  --font-size-base: 14px;
-  --font-size-small: 12px;
-  --font-size-large: 16px;
-  --font-size-extra-large: 20px;
-  --font-size-title: 24px;
-  --font-size-hero: 38px;
-  --font-line-height: 1.5714285714285714;
-
-  // 圆角 - 精致圆润
-  --border-radius-base: 6px;
-  --border-radius-small: 4px;
-  --border-radius-large: 8px;
-  --border-radius-extra-large: 12px;
-  --border-radius-round: 24px;
-  --border-radius-circle: 50%;
-
-  // 间距 - 8px 基础网格
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 24px;
-  --spacing-xl: 32px;
-  --spacing-xxl: 48px;
-
-  // 尺寸 - 组件规格
-  --component-size-large: 40px;
-  --component-size-default: 32px;
-  --component-size-small: 24px;
-
-  // 过渡 - 流畅动效
-  --transition-duration: 0.2s;
-  --transition-duration-fast: 0.1s;
-  --transition-duration-slow: 0.3s;
-  --transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-
-  // z-index - 层级管理
-  --z-index-dropdown: 1000;
-  --z-index-sticky: 1020;
-  --z-index-fixed: 1030;
-  --z-index-modal-backdrop: 1040;
-  --z-index-modal: 1050;
-  --z-index-popover: 1060;
-  --z-index-tooltip: 1070;
-
-  // 布局 - 精确尺寸
-  --sidebar-width: 220px;
-  --sidebar-collapsed-width: 64px;
-  --header-height: 56px;
-  --tabs-height: 40px;
-  --footer-height: 32px;
-
-  // 特殊效果
-  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
-  --gradient-hero: linear-gradient(135deg, #002c8c 0%, #1677ff 50%, #4096ff 100%);
-  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
-  --gradient-mask: linear-gradient(180deg, rgba(0, 44, 140, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
-}
-
-// 暗色主题 - 深邃科技感
-.dark {
-  --color-text-primary: #ffffff;
-  --color-text-regular: #e0e0e0;
-  --color-text-secondary: #a6a6a6;
-  --color-text-placeholder: #737373;
-  --color-text-disabled: #5c5c5c;
-
-  --color-border: #434343;
-  --color-border-light: #363636;
-  --color-border-lighter: #2a2a2a;
-  --color-border-extra-light: #1f1f1f;
-  --color-border-dark: #5c5c5c;
-
-  --color-fill: #262626;
-  --color-fill-light: #1f1f1f;
-  --color-fill-lighter: #141414;
-  --color-fill-blank: #141414;
-  --color-fill-dark: #363636;
-
-  --bg-color: #141414;
-  --bg-color-page: #0a0a0a;
-  --bg-color-component: #1f1f1f;
-  --bg-color-overlay: #1f1f1f;
-  --bg-color-spotlight: #111d2c;
-
-  --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32),
-                0 3px 6px -4px rgba(0, 0, 0, 0.48),
-                0 9px 28px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.16),
-                      0 1px 6px -1px rgba(0, 0, 0, 0.12),
-                      0 2px 4px 0 rgba(0, 0, 0, 0.08);
-  --box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.32);
-  --box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.48);
-
-  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
-  --gradient-hero: linear-gradient(135deg, #002c8c 0%, #0958d9 50%, #1677ff 100%);
-  --gradient-card: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.8) 100%);
+// ==============================================
+// CSS Variables - 企业级配色方案
+// 参考：阿里 Ant Design Pro、腾讯云控制台
+// ==============================================
+
+:root {
+  // 主色调 - 科技蓝系（深邃、专业）
+  --color-primary: #1677ff;
+  --color-primary-light-1: #4096ff;
+  --color-primary-light-2: #69b1ff;
+  --color-primary-light-3: #91caff;
+  --color-primary-light-4: #bae0ff;
+  --color-primary-light-5: #e6f4ff;
+  --color-primary-light-6: #f0f8ff;
+  --color-primary-dark-1: #0958d9;
+  --color-primary-dark-2: #003eb3;
+  --color-primary-dark-3: #002c8c;
+
+  // 功能色 - 精致调和
+  --color-success: #52c41a;
+  --color-success-light: #b7eb8f;
+  --color-success-lighter: #f6ffed;
+  --color-success-dark: #389e0d;
+
+  --color-warning: #faad14;
+  --color-warning-light: #ffe58f;
+  --color-warning-lighter: #fffbe6;
+  --color-warning-dark: #d48806;
+
+  --color-danger: #ff4d4f;
+  --color-danger-light: #ffa39e;
+  --color-danger-lighter: #fff2f0;
+  --color-danger-dark: #cf1322;
+
+  --color-info: #1677ff;
+  --color-info-light: #91caff;
+  --color-info-lighter: #e6f4ff;
+  --color-info-dark: #0958d9;
+
+  // 文字颜色 - 层次分明
+  --color-text-primary: #1f1f1f;
+  --color-text-regular: #424242;
+  --color-text-secondary: #757575;
+  --color-text-placeholder: #9e9e9e;
+  --color-text-disabled: #bdbdbd;
+
+  // 边框颜色 - 克制淡雅
+  --color-border: #d9d9d9;
+  --color-border-light: #e8e8e8;
+  --color-border-lighter: #f0f0f0;
+  --color-border-extra-light: #f5f5f5;
+  --color-border-dark: #bfbfbf;
+
+  // 填充颜色 - 背景层次
+  --color-fill: #f5f5f5;
+  --color-fill-light: #fafafa;
+  --color-fill-lighter: #ffffff;
+  --color-fill-blank: #ffffff;
+  --color-fill-dark: #e8e8e8;
+
+  // 背景颜色 - 页面层级
+  --bg-color: #ffffff;
+  --bg-color-page: #f0f2f5;
+  --bg-color-component: #ffffff;
+  --bg-color-overlay: #ffffff;
+  --bg-color-spotlight: #e6f4ff;
+
+  // 盒子阴影 - 精致层次
+  --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);
+  --box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+                      0 1px 6px -1px rgba(0, 0, 0, 0.02),
+                      0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --box-shadow-lighter: 0 1px 4px rgba(0, 0, 0, 0.04);
+  --box-shadow-dark: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
+                     0 9px 28px 8px rgba(0, 0, 0, 0.05),
+                     0 12px 48px 16px rgba(0, 0, 0, 0.03);
+  --box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
+  --box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
+
+  // 字体 - 企业级字体栈
+  --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
+    Consolas, 'Courier New', monospace;
+  --font-size-base: 14px;
+  --font-size-small: 12px;
+  --font-size-large: 16px;
+  --font-size-extra-large: 20px;
+  --font-size-title: 24px;
+  --font-size-hero: 38px;
+  --font-line-height: 1.5714285714285714;
+
+  // 圆角 - 精致圆润
+  --border-radius-base: 6px;
+  --border-radius-small: 4px;
+  --border-radius-large: 8px;
+  --border-radius-extra-large: 12px;
+  --border-radius-round: 24px;
+  --border-radius-circle: 50%;
+
+  // 间距 - 8px 基础网格
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-xxl: 48px;
+
+  // 尺寸 - 组件规格
+  --component-size-large: 40px;
+  --component-size-default: 32px;
+  --component-size-small: 24px;
+
+  // 过渡 - 流畅动效
+  --transition-duration: 0.2s;
+  --transition-duration-fast: 0.1s;
+  --transition-duration-slow: 0.3s;
+  --transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  // z-index - 层级管理
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1020;
+  --z-index-fixed: 1030;
+  --z-index-modal-backdrop: 1040;
+  --z-index-modal: 1050;
+  --z-index-popover: 1060;
+  --z-index-tooltip: 1070;
+
+  // 布局 - 精确尺寸
+  --sidebar-width: 220px;
+  --sidebar-collapsed-width: 64px;
+  --header-height: 56px;
+  --tabs-height: 40px;
+  --footer-height: 32px;
+
+  // 特殊效果
+  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+  --gradient-hero: linear-gradient(135deg, #002c8c 0%, #1677ff 50%, #4096ff 100%);
+  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
+  --gradient-mask: linear-gradient(180deg, rgba(0, 44, 140, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
+}
+
+// 暗色主题 - 深邃科技感
+.dark {
+  --color-text-primary: #ffffff;
+  --color-text-regular: #e0e0e0;
+  --color-text-secondary: #a6a6a6;
+  --color-text-placeholder: #737373;
+  --color-text-disabled: #5c5c5c;
+
+  --color-border: #434343;
+  --color-border-light: #363636;
+  --color-border-lighter: #2a2a2a;
+  --color-border-extra-light: #1f1f1f;
+  --color-border-dark: #5c5c5c;
+
+  --color-fill: #262626;
+  --color-fill-light: #1f1f1f;
+  --color-fill-lighter: #141414;
+  --color-fill-blank: #141414;
+  --color-fill-dark: #363636;
+
+  --bg-color: #141414;
+  --bg-color-page: #0a0a0a;
+  --bg-color-component: #1f1f1f;
+  --bg-color-overlay: #1f1f1f;
+  --bg-color-spotlight: #111d2c;
+
+  --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32),
+                0 3px 6px -4px rgba(0, 0, 0, 0.48),
+                0 9px 28px 8px rgba(0, 0, 0, 0.2);
+  --box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.16),
+                      0 1px 6px -1px rgba(0, 0, 0, 0.12),
+                      0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  --box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.32);
+  --box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.48);
+
+  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+  --gradient-hero: linear-gradient(135deg, #002c8c 0%, #0958d9 50%, #1677ff 100%);
+  --gradient-card: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.8) 100%);
 }

package/src/assets/styles/_variables.scss

@@ -1,70 +1,70 @@
-// ==============================================
-// SCSS Variables - 用于样式计算
-// ==============================================
-
-// 主题色 - 科技蓝
-$color-primary: #1677ff;
-$color-primary-light: #4096ff;
-$color-primary-lighter: #91caff;
-$color-primary-dark: #0958d9;
-$color-primary-darker: #003eb3;
-
-// 功能色
-$color-success: #52c41a;
-$color-warning: #faad14;
-$color-danger: #ff4d4f;
-$color-info: #1677ff;
-
-// 文字颜色
-$color-text-primary: #1f1f1f;
-$color-text-regular: #424242;
-$color-text-secondary: #757575;
-$color-text-placeholder: #9e9e9e;
-
-// 边框颜色
-$color-border: #d9d9d9;
-$color-border-light: #e8e8e8;
-$color-border-lighter: #f0f0f0;
-
-// 背景颜色
-$bg-color: #ffffff;
-$bg-color-page: #f0f2f5;
-$bg-color-component: #ffffff;
-
-// 字体
-$font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-$font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, Consolas, monospace;
-$font-size-base: 14px;
-$font-size-small: 12px;
-$font-size-large: 16px;
-$font-size-extra-large: 20px;
-
-// 圆角
-$border-radius-base: 6px;
-$border-radius-small: 4px;
-$border-radius-large: 8px;
-$border-radius-extra-large: 12px;
-$border-radius-round: 24px;
-
-// 间距 - 8px 网格系统
-$spacing-xs: 4px;
-$spacing-sm: 8px;
-$spacing-md: 16px;
-$spacing-lg: 24px;
-$spacing-xl: 32px;
-$spacing-xxl: 48px;
-
-// 布局尺寸
-$sidebar-width: 220px;
-$sidebar-collapsed-width: 64px;
-$header-height: 56px;
-$tabs-height: 40px;
-$footer-height: 32px;
-
-// 过渡
-$transition-duration: 0.2s;
-$transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
-
-// 阴影
-$box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
+// ==============================================
+// SCSS Variables - 用于样式计算
+// ==============================================
+
+// 主题色 - 科技蓝
+$color-primary: #1677ff;
+$color-primary-light: #4096ff;
+$color-primary-lighter: #91caff;
+$color-primary-dark: #0958d9;
+$color-primary-darker: #003eb3;
+
+// 功能色
+$color-success: #52c41a;
+$color-warning: #faad14;
+$color-danger: #ff4d4f;
+$color-info: #1677ff;
+
+// 文字颜色
+$color-text-primary: #1f1f1f;
+$color-text-regular: #424242;
+$color-text-secondary: #757575;
+$color-text-placeholder: #9e9e9e;
+
+// 边框颜色
+$color-border: #d9d9d9;
+$color-border-light: #e8e8e8;
+$color-border-lighter: #f0f0f0;
+
+// 背景颜色
+$bg-color: #ffffff;
+$bg-color-page: #f0f2f5;
+$bg-color-component: #ffffff;
+
+// 字体
+$font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+$font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, Consolas, monospace;
+$font-size-base: 14px;
+$font-size-small: 12px;
+$font-size-large: 16px;
+$font-size-extra-large: 20px;
+
+// 圆角
+$border-radius-base: 6px;
+$border-radius-small: 4px;
+$border-radius-large: 8px;
+$border-radius-extra-large: 12px;
+$border-radius-round: 24px;
+
+// 间距 - 8px 网格系统
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+$spacing-xxl: 48px;
+
+// 布局尺寸
+$sidebar-width: 220px;
+$sidebar-collapsed-width: 64px;
+$header-height: 56px;
+$tabs-height: 40px;
+$footer-height: 32px;
+
+// 过渡
+$transition-duration: 0.2s;
+$transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+// 阴影
+$box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
 $box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);

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