@aquiferre/ui-kit 0.4.4 → 0.5.0

package/components/ConfirmDialog.vue

@@ -5,7 +5,7 @@
         <div class="fixed inset-0 bg-bg-overlay" :data-testid="testId ? `${testId}-mask` : undefined" @click="cancel" />
         <div class="panel-glass dialog max-w-sm">
           <div class="px-6 py-4">
-            <h3 class="dialog-title">{{ title }}</h3>
+            <h3 class="dialog-title">{{ titleText }}</h3>
             <p v-if="content" class="text-text-secondary text-sm mt-2">{{ content }}</p>
           </div>
           <div class="dialog-actions px-6 py-4 border-t border-border-primary bg-bg-secondary/50 rounded-b-2xl">
@@ -23,7 +23,10 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = withDefaults(defineProps<{
   visible: boolean
   title?: string
   content?: string
@@ -35,14 +38,16 @@ withDefaults(defineProps<{
   confirmClass?: string
   testId?: string
 }>(), {
-  title: '确认删除',
-  confirmText: '确认删除',
-  cancelText: '取消',
   showCancel: true,
-  loadingText: '删除中...',
   confirmClass: 'btn-danger',
 })
 
+const { t } = useI18n()
+const titleText = computed(() => props.title ?? t('ui.confirmDialog.title'))
+const confirmText = computed(() => props.confirmText ?? t('ui.confirmDialog.confirmText'))
+const cancelText = computed(() => props.cancelText ?? t('ui.common.cancel'))
+const loadingText = computed(() => props.loadingText ?? t('ui.confirmDialog.loadingText'))
+
 const emit = defineEmits<{
   confirm: []
   cancel: []

package/components/DataTable.vue

@@ -30,7 +30,7 @@
       <tbody class="table-body">
         <tr v-if="!loading && data.length === 0" class="table-row">
           <td :colspan="colspan" class="table-empty">
-            {{ emptyText }}
+            {{ emptyTextText }}
           </td>
         </tr>
         <tr
@@ -61,7 +61,7 @@
     <div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-bg-elevated/60 backdrop-blur-[1px] z-10">
       <div class="flex items-center space-x-2 text-text-secondary">
         <div class="spinner"></div>
-        <span class="text-sm">加载中...</span>
+        <span class="text-sm">{{ loadingText }}</span>
       </div>
     </div>
   </div>
@@ -69,8 +69,11 @@
 
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { Column } from '../types'
 
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<{
   columns: Column[]
   data: any[]
@@ -85,7 +88,6 @@ const props = withDefaults(defineProps<{
   scrollable?: boolean
 }>(), {
   loading: false,
-  emptyText: '暂无数据',
   selectable: false,
   selected: () => [],
   rowKey: 'id',
@@ -94,6 +96,9 @@ const props = withDefaults(defineProps<{
   scrollable: false,
 })
 
+const loadingText = computed(() => t('ui.dataTable.loading'))
+const emptyTextText = computed(() => props.emptyText ?? t('ui.dataTable.empty'))
+
 const attrs = useAttrs()
 const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
 const rowPrefix = computed<string | undefined>(() => props.rowTestIdPrefix ?? baseTestId.value)

package/components/DateTimePicker.vue

@@ -37,7 +37,7 @@
         <div class="flex items-center justify-between mb-2">
           <div class="relative">
             <button type="button" class="btn-sm btn-ghost text-xs font-semibold" @click="yearDropdownOpen = !yearDropdownOpen">
-              {{ viewYear }}年 &#x25BE;
+              {{ t('ui.dateTimePicker.year', { year: viewYear }) }} &#x25BE;
             </button>
             <div
               v-if="yearDropdownOpen"
@@ -61,12 +61,12 @@
           </div>
           <div class="flex items-center gap-1">
             <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="prevMonth">&#x25C0;</button>
-            <span class="text-xs font-semibold text-text-primary min-w-[3rem] text-center">{{ viewMonth }}月</span>
+            <span class="text-xs font-semibold text-text-primary min-w-[3rem] text-center">{{ t('ui.dateTimePicker.month', { month: viewMonth }) }}</span>
             <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="nextMonth">&#x25B6;</button>
           </div>
         </div>
         <div class="grid grid-cols-7 gap-0.5 mb-1">
-          <div v-for="d in weekDays" :key="d" class="text-center text-xs text-text-tertiary py-0.5 font-medium">{{ d }}</div>
+          <div v-for="d in weekdayKeys" :key="d" class="text-center text-xs text-text-tertiary py-0.5 font-medium">{{ t('ui.dateTimePicker.week.' + d) }}</div>
         </div>
         <div class="grid grid-cols-7 gap-0.5">
           <button
@@ -98,20 +98,20 @@
         </div>
         <div class="w-px bg-border-primary" />
         <div>
-          <div class="mb-1.5 px-1"><span class="text-xs text-text-secondary">月份</span></div>
+          <div class="mb-1.5 px-1"><span class="text-xs text-text-secondary">{{ t('ui.dateTimePicker.monthSection') }}</span></div>
           <div class="grid grid-cols-2 gap-1">
             <button
               v-for="m in 12" :key="m" type="button"
               class="px-2 py-1 text-xs rounded-md transition-colors min-w-[2.5rem]"
               :class="m === viewMonth ? 'bg-accent-primary text-white' : 'bg-bg-secondary text-text-primary hover:bg-bg-hover'"
               @click="selectMonth(m)"
-            >{{ m }}月</button>
+            >{{ t('ui.dateTimePicker.month', { month: m }) }}</button>
           </div>
         </div>
         <div class="w-px bg-border-primary" />
         <div>
           <div class="grid grid-cols-7 gap-0.5 mb-1">
-            <div v-for="d in weekDays" :key="d" class="text-center text-xs text-text-tertiary py-0.5 font-medium">{{ d }}</div>
+            <div v-for="d in weekdayKeys" :key="d" class="text-center text-xs text-text-tertiary py-0.5 font-medium">{{ t('ui.dateTimePicker.week.' + d) }}</div>
           </div>
           <div class="grid grid-cols-7 gap-0.5">
             <button
@@ -145,7 +145,7 @@
 
       <!-- Confirm button -->
       <div v-if="mode !== 'date'" class="flex justify-end mt-3 pt-2 border-t border-border-primary">
-        <button type="button" class="btn-sm btn-primary" @click="confirm">确认</button>
+        <button type="button" class="btn-sm btn-primary" @click="confirm">{{ t('ui.common.confirm') }}</button>
       </div>
     </div>
     </Teleport>
@@ -154,6 +154,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted, nextTick, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { DateTimePreset } from '../types'
 
 const props = withDefaults(defineProps<{
@@ -180,6 +181,8 @@ const props = withDefaults(defineProps<{
   clearable: true,
 })
 
+const { t } = useI18n()
+
 const emit = defineEmits<{
   'update:modelValue': [value: string | [string, string]]
   'change': [value: string | [string, string]]
@@ -210,7 +213,8 @@ const minutes = ref(0)
 const seconds = ref(0)
 const editingTime = ref<'h' | 'm' | 's' | null>(null)
 
-const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+// 星期表头 key 数组（周日～周六），文案在模板中按词典渲染
+const weekdayKeys = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
 
 const decadeYears = computed(() => Array.from({ length: 10 }, (_, i) => decadeStart.value + i))
 

package/components/FileUploader.vue

@@ -11,7 +11,7 @@
     />
 
     <button @click="triggerFileInput" class="btn-primary btn-sm inline-flex items-center gap-1" :data-testid="baseTestId ? `${baseTestId}-trigger` : undefined">
-      📎 选择文件
+      📎 {{ t('ui.fileUploader.select') }}
     </button>
 
     <div v-if="uploadQueue.length > 0" class="mt-3 space-y-2">
@@ -31,9 +31,9 @@
 
         <div class="text-xs mt-1">
           <span v-if="item.status === 'uploading'" class="text-accent-primary">
-            上传中 {{ item.progress.toFixed(2) }}%
+            {{ t('ui.fileUploader.uploading', { progress: item.progress.toFixed(2) }) }}
           </span>
-          <span v-else-if="item.status === 'success'" class="text-accent-success">✓ 完成</span>
+          <span v-else-if="item.status === 'success'" class="text-accent-success">✓ {{ t('ui.fileUploader.done') }}</span>
           <span v-else-if="item.status === 'error'" class="text-accent-danger">✗ {{ item.error }}</span>
         </div>
       </div>
@@ -43,6 +43,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, computed, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface UploadItem {
   id: string
@@ -61,6 +62,8 @@ const props = withDefaults(defineProps<{
   acceptTypes: 'image/*,video/*'
 })
 
+const { t } = useI18n()
+
 const attrs = useAttrs()
 const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
 
@@ -113,7 +116,7 @@ async function handleFileSelect(event: Event) {
       }, 1500)
     } catch (error: any) {
       item.status = 'error'
-      item.error = error.message || '上传失败'
+      item.error = error.message || t('ui.fileUploader.failed')
     }
   }
 

package/components/FilterDropdown.vue

@@ -5,7 +5,7 @@
     :data-testid="baseTestId"
     @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
   >
-    <option v-if="showAll" value="">{{ placeholder || '全部' }}</option>
+    <option v-if="showAll" value="">{{ allText }}</option>
     <option v-for="opt in options" :key="opt.value" :value="opt.value" :data-testid="baseTestId ? `${baseTestId}-option-${opt.value}` : undefined">
       {{ opt.label }}
     </option>
@@ -14,6 +14,7 @@
 
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = withDefaults(defineProps<{
   modelValue: string
@@ -25,6 +26,10 @@ const props = withDefaults(defineProps<{
   showAll: true
 })
 
+const { t } = useI18n()
+// placeholder 显式传入时优先（既有调用约定），缺省走词典
+const allText = computed(() => props.placeholder ?? t('ui.filterDropdown.all'))
+
 defineEmits<{
   'update:modelValue': [value: string]
 }>()

package/components/FormDialog.vue

@@ -17,7 +17,7 @@
               :data-testid="testId ? `${testId}-cancel` : undefined"
               @click="cancel"
             >
-              取消
+              {{ cancelText }}
             </button>
             <button
               :disabled="loading"
@@ -25,7 +25,7 @@
               :data-testid="testId ? `${testId}-submit` : 'submit-btn'"
               @click="confirm"
             >
-              {{ loading ? '提交中...' : (confirmText || '确认') }}
+              {{ loading ? submittingText : confirmTextText }}
             </button>
           </div>
         </div>
@@ -35,7 +35,10 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
   visible: boolean
   title: string
   loading?: boolean
@@ -44,6 +47,11 @@ defineProps<{
   testId?: string
 }>()
 
+const { t } = useI18n()
+const cancelText = computed(() => t('ui.common.cancel'))
+const submittingText = computed(() => t('ui.common.submitting'))
+const confirmTextText = computed(() => props.confirmText ?? t('ui.formDialog.confirmText'))
+
 const emit = defineEmits<{
   confirm: []
   cancel: []

package/components/Pagination.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center justify-between px-6 py-2" :data-testid="baseTestId">
     <div class="text-xs text-text-tertiary">
-      共 {{ total }} 条，第 {{ startItem }} - {{ endItem }} 条
+      {{ totalText }}
     </div>
     <div class="flex items-center space-x-1">
       <button
@@ -10,7 +10,7 @@
         :data-testid="baseTestId ? `${baseTestId}-prev` : undefined"
         @click="changePage(page - 1)"
       >
-        ← 上一页
+        ← {{ prevText }}
       </button>
       <template v-for="p in visiblePages" :key="p">
         <span v-if="p === '...'" class="btn-glass btn-sm pointer-events-none">…</span>
@@ -29,17 +29,15 @@
         :data-testid="baseTestId ? `${baseTestId}-next` : undefined"
         @click="changePage(page + 1)"
       >
-        下一页 →
+        {{ nextText }} →
       </button>
       <select
-        :value="pageSize"
+        :value="selectedPageSize"
         class="select ml-2"
         :data-testid="baseTestId ? `${baseTestId}-size-select` : undefined"
         @change="changePageSize(Number(($event.target as HTMLSelectElement).value))"
       >
-        <option :value="10">10条/页</option>
-        <option :value="20">20条/页</option>
-        <option :value="50">50条/页</option>
+        <option v-for="size in sizeOptions" :key="size" :value="size">{{ pageSizeText(size) }}</option>
       </select>
     </div>
   </div>
@@ -48,13 +46,22 @@
 <script setup lang="ts">
 // @ts-nocheck
 import { computed, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-const props = defineProps<{
+// 默认页容量选项（自定义值通过 pageSizeOptions 排在其前）
+const DEFAULT_PAGE_SIZES = [20, 50, 100, 200, 500, 1000, 5000]
+
+const { t } = useI18n()
+
+const props = withDefaults(defineProps<{
   page: number
   pageSize: number
   total: number
+  pageSizeOptions?: number[]
   testId?: string
-}>()
+}>(), {
+  pageSizeOptions: () => [],
+})
 
 const attrs = useAttrs()
 const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
@@ -65,11 +72,33 @@ const emit = defineEmits<{
   change: [page: number, pageSize: number]
 }>()
 
+const sizeOptions = computed(() => {
+  const custom = (props.pageSizeOptions || []).filter(size => Number.isInteger(size) && size > 0)
+  const merged = [...custom]
+  for (const size of DEFAULT_PAGE_SIZES) {
+    if (!merged.includes(size)) merged.push(size)
+  }
+  return merged
+})
+
+const selectedPageSize = computed(() =>
+  sizeOptions.value.includes(props.pageSize) ? props.pageSize : sizeOptions.value[0]
+)
+
 const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
 
 const startItem = computed(() => (props.page - 1) * props.pageSize + 1)
 const endItem = computed(() => Math.min(props.page * props.pageSize, props.total))
 
+const totalText = computed(() =>
+  t('ui.pagination.total', { total: props.total, startItem: startItem.value, endItem: endItem.value })
+)
+const prevText = computed(() => t('ui.pagination.prev'))
+const nextText = computed(() => t('ui.pagination.next'))
+function pageSizeText(size: number) {
+  return t('ui.pagination.pageSize', { size })
+}
+
 /**
  * 生成可见页码数组，当前页 ±2 范围内显示，其余用 '...' 省略
  * 始终显示首页和末页

package/components/SearchSelect.vue

@@ -7,7 +7,7 @@
       <input
         ref="inputRef"
         :value="inputValue"
-        :placeholder="displayLabel || placeholder"
+        :placeholder="displayLabel || placeholderText"
         :disabled="disabled"
         class="flex-1 min-w-0 bg-transparent border-none outline-none text-input-text placeholder:text-input-placeholder"
         :data-testid="baseTestId ? `${baseTestId}-input` : undefined"
@@ -35,7 +35,7 @@
       v-if="open"
       class="absolute top-full left-0 mt-1 w-full max-h-60 overflow-auto card shadow-lg z-20 py-1"
     >
-      <div v-if="filtered.length === 0" class="px-4 py-2 text-sm text-text-tertiary">无匹配项</div>
+      <div v-if="filtered.length === 0" class="px-4 py-2 text-sm text-text-tertiary">{{ noMatchText }}</div>
       <div
         v-for="opt in filtered"
         :key="opt.value"
@@ -52,6 +52,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { match } from 'pinyin-pro'
 import type { SelectOption } from '../types'
 
@@ -64,12 +65,16 @@ const props = withDefaults(defineProps<{
   optionTestIdPrefix?: string
   testId?: string
 }>(), {
-  placeholder: '请选择',
   clearable: true,
   disabled: false,
   optionTestIdPrefix: '',
 })
 
+const { t } = useI18n()
+// 占位/空态兜底文案：显式传入优先，缺省走词典
+const placeholderText = computed(() => props.placeholder ?? t('ui.searchSelect.placeholder'))
+const noMatchText = computed(() => t('ui.common.noMatch'))
+
 const attrs = useAttrs()
 const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
 const optionPrefix = computed<string | undefined>(() => props.optionTestIdPrefix || baseTestId.value)

package/components/SideMenu.vue

@@ -4,7 +4,7 @@
       <button
         v-if="collapsible"
         class="sidebar-collapse-btn text-xs w-5 h-5 flex items-center justify-center rounded hover:bg-white/10 transition-colors"
-        :title="collapsed ? '展开菜单' : '收起菜单'"
+        :title="collapsed ? expandText : collapseText"
         @click="collapsed = !collapsed"
       >{{ collapsed ? '▶' : '◀' }}</button>
     </div>
@@ -15,10 +15,10 @@
         class="sidebar-item text-xs"
         exact-active-class="sidebar-item-active"
         :data-testid="baseTestId ? `${baseTestId}-item-home` : undefined"
-        :title="collapsed ? '首页' : undefined"
+        :title="collapsed ? homeText : undefined"
       >
         <span class="w-5 text-center text-sm">🏠</span>
-        <span v-if="!collapsed" class="ml-2">首页</span>
+        <span v-if="!collapsed" class="ml-2">{{ homeText }}</span>
       </router-link>
 
       <template v-for="group in menuGroups" :key="group.key">
@@ -42,6 +42,7 @@
 
 <script setup lang="ts">
 import { computed, ref, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { MenuGroup } from '../types'
 
 const props = withDefaults(defineProps<{
@@ -51,6 +52,11 @@ const props = withDefaults(defineProps<{
   showHome?: boolean
 }>(), { collapsible: false, showHome: true })
 
+const { t } = useI18n()
+const expandText = computed(() => t('ui.sideMenu.expand'))
+const collapseText = computed(() => t('ui.sideMenu.collapse'))
+const homeText = computed(() => t('ui.sideMenu.home'))
+
 const collapsed = ref(false)
 
 const attrs = useAttrs()

package/components/StatusTag.vue

@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = withDefaults(defineProps<{
   status: string | number
@@ -15,22 +16,31 @@ const props = withDefaults(defineProps<{
   statusMap: () => ({})
 })
 
+const { t } = useI18n()
 const attrs = useAttrs()
 const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
 
-const defaultMap: Record<string, { label: string; cls: string }> = {
-  active: { label: '正常', cls: 'badge-success' },
-  locked: { label: '已锁定', cls: 'badge-danger' },
-  deleted: { label: '已删除', cls: 'badge-danger' },
-  '0': { label: '已停用', cls: 'badge-warning' },
-  '1': { label: '正常', cls: 'badge-success' },
+// 内置状态文案走词典（key 前缀 ui.status.）；调用方显式传入 statusMap 时优先
+const defaultMap: Record<string, { labelKey: string; cls: string }> = {
+  active: { labelKey: 'ui.status.active', cls: 'badge-success' },
+  locked: { labelKey: 'ui.status.locked', cls: 'badge-danger' },
+  deleted: { labelKey: 'ui.status.deleted', cls: 'badge-danger' },
+  '0': { labelKey: 'ui.status.disabled', cls: 'badge-warning' },
+  '1': { labelKey: 'ui.status.active', cls: 'badge-success' },
 }
 
-const entry = computed(() => {
+const label = computed(() => {
   const key = String(props.status)
-  return props.statusMap[key] || props.statusMap[props.status] || defaultMap[key] || { label: key, cls: 'badge-danger' }
+  const custom = props.statusMap[key] || props.statusMap[props.status]
+  if (custom) return custom.label
+  const def = defaultMap[key]
+  return def ? t(def.labelKey) : key
 })
 
-const label = computed(() => entry.value.label)
-const cls = computed(() => entry.value.cls)
+const cls = computed(() => {
+  const key = String(props.status)
+  const custom = props.statusMap[key] || props.statusMap[props.status]
+  if (custom) return custom.cls
+  return (defaultMap[key] || { cls: 'badge-danger' }).cls
+})
 </script>

package/components/SuggestInput.vue

@@ -4,7 +4,7 @@
       <input
         ref="inputRef"
         :value="modelValue"
-        :placeholder="placeholder"
+        :placeholder="placeholderText"
         :disabled="disabled"
         class="flex-1 min-w-0 bg-transparent border-none outline-none text-input-text placeholder:text-input-placeholder"
         :data-testid="baseTestId ? `${baseTestId}-input` : undefined"
@@ -29,7 +29,7 @@
         :data-testid="baseTestId ? `${baseTestId}-load` : undefined"
         @click.stop="onLoadBtnClick"
         tabindex="-1"
-      >{{ loading ? '获取中...' : loadBtnText }}</button>
+      >{{ loading ? loadingText : loadBtnTextText }}</button>
       <!-- 无 loadBtn 时提供展开按钮（配合外部 options 模式） -->
       <button
         v-if="!loadBtn && loading"
@@ -54,14 +54,14 @@
       :data-testid="baseTestId ? `${baseTestId}-dropdown` : undefined"
     >
       <!-- 初始加载中 -->
-      <div v-if="initialLoading" class="px-4 py-2 text-sm text-text-tertiary">获取中...</div>
+      <div v-if="initialLoading" class="px-4 py-2 text-sm text-text-tertiary">{{ loadingText }}</div>
       <!-- 加载失败 -->
       <div v-else-if="loadError" class="px-4 py-2">
         <span class="text-sm text-accent-danger">{{ loadError }}</span>
-        <button class="ml-2 text-xs text-accent-primary hover:text-accent-primary-hover" @click="retryLoad">重试</button>
+        <button class="ml-2 text-xs text-accent-primary hover:text-accent-primary-hover" @click="retryLoad">{{ retryText }}</button>
       </div>
       <!-- 无选项 -->
-      <div v-else-if="filtered.length === 0" class="px-4 py-2 text-sm text-text-tertiary">无匹配项</div>
+      <div v-else-if="filtered.length === 0" class="px-4 py-2 text-sm text-text-tertiary">{{ noMatchText }}</div>
       <!-- 选项列表 -->
       <div
         v-for="opt in filtered"
@@ -79,6 +79,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { match } from 'pinyin-pro'
 import type { SelectOption } from '../types'
 
@@ -94,13 +95,19 @@ const props = withDefaults(defineProps<{
   loadBtnText?: string
 }>(), {
   options: () => [],
-  placeholder: '请输入或选择',
   disabled: false,
   clearable: true,
   loadBtn: false,
-  loadBtnText: '获取',
 })
 
+const { t } = useI18n()
+// 兜底文案：props 显式传入优先，缺省走词典
+const placeholderText = computed(() => props.placeholder ?? t('ui.suggestInput.placeholder'))
+const loadBtnTextText = computed(() => props.loadBtnText ?? t('ui.suggestInput.loadBtnText'))
+const loadingText = computed(() => t('ui.suggestInput.loading'))
+const retryText = computed(() => t('ui.common.retry'))
+const noMatchText = computed(() => t('ui.common.noMatch'))
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
@@ -145,7 +152,7 @@ async function loadAsync() {
     const result = await props.loadOptions()
     innerOptions.value = result
   } catch (err: any) {
-    loadError.value = err?.message || '获取失败'
+    loadError.value = err?.message || t('ui.common.fetchFailed')
   } finally {
     initialLoading.value = false
     loading.value = false

package/components/TopNavbar.vue

@@ -7,7 +7,7 @@
             <path d="M12 2L2 7l10 5 10-5-10-5z"/>
           </svg>
         </div>
-        <span class="navbar-brand">{{ title }}</span>
+        <span class="navbar-brand">{{ displayTitle }}</span>
       </slot>
       <span v-if="tenantLabel" class="text-xs text-text-tertiary">| {{ tenantLabel }}</span>
 
@@ -28,11 +28,39 @@
     </div>
 
     <div class="navbar-user">
+      <!-- 语言切换 -->
+      <div v-if="showLocaleSwitch" class="relative" ref="localeDropdownRef">
+        <button
+          @click="showLocaleDropdown = !showLocaleDropdown"
+          :title="languageTitle"
+          class="btn-icon text-text-secondary hover:text-text-primary"
+          :data-testid="testId ? `${testId}-locale-toggle` : undefined"
+        >
+          🌐
+        </button>
+
+        <Transition name="dropdown">
+          <div v-if="showLocaleDropdown" class="absolute right-0 mt-2 w-40 card shadow-lg z-50 py-1">
+            <button
+              v-for="opt in SUPPORTED_LOCALES"
+              :key="opt.code"
+              class="w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-bg-tertiary"
+              :class="localeStore.locale === opt.code ? 'text-accent-primary' : 'text-text-secondary'"
+              :data-testid="testId ? `${testId}-locale-${opt.code}` : undefined"
+              @click="selectLocale(opt.code)"
+            >
+              <span>{{ opt.code === localeStore.locale ? '✓' : '' }}</span>
+              <span>{{ opt.label }}</span>
+            </button>
+          </div>
+        </Transition>
+      </div>
+
       <!-- 主题切换 -->
       <div class="relative" ref="themeDropdownRef">
-        <button 
+        <button
           @click="showThemeDropdown = !showThemeDropdown"
-          :title="`当前主题: ${themeStore.currentThemeInfo?.label}`"
+          :title="themeTooltip"
           class="btn-icon text-text-secondary hover:text-text-primary"
           :data-testid="testId ? `${testId}-theme-toggle` : undefined"
         >
@@ -42,15 +70,15 @@
         <Transition name="dropdown">
           <div v-if="showThemeDropdown" class="absolute right-0 mt-2 w-40 card shadow-lg z-50 py-1">
             <button
-              v-for="t in themeStore.themeList"
-              :key="t.mode"
+              v-for="opt in themeStore.themeList"
+              :key="opt.mode"
               class="w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-bg-tertiary"
-              :class="themeStore.theme === t.mode ? 'text-accent-primary' : 'text-text-secondary'"
-              :data-testid="testId ? `${testId}-theme-${t.mode}` : undefined"
-              @click="selectTheme(t.mode)"
+              :class="themeStore.theme === opt.mode ? 'text-accent-primary' : 'text-text-secondary'"
+              :data-testid="testId ? `${testId}-theme-${opt.mode}` : undefined"
+              @click="selectTheme(opt.mode)"
             >
-              <span>{{ t.icon }}</span>
-              <span>{{ t.label }}</span>
+              <span>{{ opt.icon }}</span>
+              <span>{{ t(opt.labelKey) }}</span>
             </button>
           </div>
         </Transition>
@@ -100,7 +128,9 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from 'vue'
-import { useThemeStore } from '@aquiferre/theme-kit'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore, useLocaleStore, SUPPORTED_LOCALES } from '@aquiferre/theme-kit'
+import type { LocaleCode } from '@aquiferre/theme-kit'
 import type { NavModule, DropdownItem } from '../types'
 
 const props = withDefaults(defineProps<{
@@ -110,23 +140,35 @@ const props = withDefaults(defineProps<{
   modules?: NavModule[]
   activeModule?: string
   userDropdownItems?: DropdownItem[]
+  showLocaleSwitch?: boolean
   testId?: string
 }>(), {
-  title: '医疗设备智能平台',
   avatarText: 'U',
   tenantLabel: '',
   modules: () => [],
   activeModule: '',
-  userDropdownItems: () => []
+  userDropdownItems: () => [],
+  showLocaleSwitch: true,
 })
 
+const { t } = useI18n()
 const themeStore = useThemeStore()
+const localeStore = useLocaleStore()
 const showUserDropdown = ref(false)
 const showThemeDropdown = ref(false)
+const showLocaleDropdown = ref(false)
 const userDropdownRef = ref<HTMLElement | null>(null)
 const themeDropdownRef = ref<HTMLElement | null>(null)
+const localeDropdownRef = ref<HTMLElement | null>(null)
 
+const displayTitle = computed(() => props.title ?? t('ui.navbar.title'))
 const themeIcon = computed(() => themeStore.currentThemeInfo?.icon || '🎨')
+const themeTooltip = computed(() =>
+  t('ui.navbar.currentTheme', {
+    theme: themeStore.currentThemeInfo ? t(themeStore.currentThemeInfo.labelKey) : '',
+  })
+)
+const languageTitle = computed(() => t('ui.navbar.language'))
 const avatarInitial = computed(() => props.avatarText.charAt(0).toUpperCase())
 
 function selectTheme(mode: 'light' | 'dark' | 'neutral') {
@@ -134,6 +176,11 @@ function selectTheme(mode: 'light' | 'dark' | 'neutral') {
   showThemeDropdown.value = false
 }
 
+function selectLocale(code: LocaleCode) {
+  localeStore.setLocale(code)
+  showLocaleDropdown.value = false
+}
+
 function handleItemClick(item: DropdownItem) {
   if (item.onClick) item.onClick()
   showUserDropdown.value = false
@@ -146,6 +193,9 @@ function handleClickOutside(event: MouseEvent) {
   if (themeDropdownRef.value && !themeDropdownRef.value.contains(event.target as Node)) {
     showThemeDropdown.value = false
   }
+  if (localeDropdownRef.value && !localeDropdownRef.value.contains(event.target as Node)) {
+    showLocaleDropdown.value = false
+  }
 }
 
 onMounted(() => document.addEventListener('click', handleClickOutside))

package/components/Tree.vue

@@ -5,12 +5,12 @@
         v-model="keyword"
         type="text"
         class="tree-search"
-        :placeholder="searchPlaceholder"
+        :placeholder="searchPlaceholderText"
         :data-testid="testId ? `${testId}-search` : undefined"
       />
     </div>
     <div v-if="visibleRoot.length === 0" class="tree-empty">
-      <p>{{ emptyText }}</p>
+      <p>{{ emptyTextText }}</p>
     </div>
     <div v-else class="tree-scroll">
       <TreeNodeItem
@@ -32,6 +32,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import TreeNodeItem from './TreeNodeItem.vue'
 
 /** 通用树节点：业务字段（type 等）可透传附加；children 由组件懒加载后写入 */
@@ -59,9 +60,14 @@ const props = withDefaults(
     emptyText?: string
     testId?: string
   }>(),
-  { showSearch: false, searchPlaceholder: '搜索...', emptyText: '暂无数据' }
+  { showSearch: false }
 )
 
+const { t } = useI18n()
+// 搜索占位与空态文案：显式传入优先，缺省走词典
+const searchPlaceholderText = computed(() => props.searchPlaceholder ?? t('ui.tree.searchPlaceholder'))
+const emptyTextText = computed(() => props.emptyText ?? t('ui.common.noData'))
+
 const emit = defineEmits<{
   (e: 'select', node: TreeNode | null): void
 }>()

package/components/UserPicker.vue

@@ -4,7 +4,7 @@
       <input
         class="input w-full"
         v-model="keyword"
-        placeholder="搜索用户..."
+        :placeholder="t('ui.userPicker.searchPlaceholder')"
         :data-testid="baseTestId ? `${baseTestId}-search` : undefined"
         @input="handleSearch"
       />
@@ -12,7 +12,7 @@
 
     <div v-if="loading" class="text-center py-4 text-text-secondary">
       <div class="spinner mx-auto mb-2"></div>
-      <p>加载中...</p>
+      <p>{{ loadingText }}</p>
     </div>
 
     <div v-else-if="users.length > 0" class="user-list space-y-2 max-h-64 overflow-y-auto">
@@ -40,13 +40,14 @@
     </div>
 
     <div v-else class="text-center py-4 text-text-tertiary">
-      <p>未找到符合条件的用户</p>
+      <p>{{ emptyText }}</p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, computed, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface UserBasicInfo {
   id: string
@@ -61,6 +62,10 @@ const props = defineProps<{
   testId?: string
 }>()
 
+const { t } = useI18n()
+const loadingText = computed(() => t('ui.common.loading'))
+const emptyText = computed(() => t('ui.userPicker.empty'))
+
 const attrs = useAttrs()
 const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
 

package/index.ts

@@ -19,4 +19,5 @@ export { default as DateTimePicker } from './components/DateTimePicker.vue'
 export { default as Tree } from './components/Tree.vue'
 export type { TreeNode } from './components/Tree.vue'
 export { useToast } from './composables/useToast'
+export { uiKitMessages, uiKitMessagesZhCN, uiKitMessagesEnUS } from './messages'
 export type { Column, SelectOption, MenuItem, MenuGroup, NavModule, DropdownItem, ToastType, DateTimePreset } from './types'

package/messages/en-US.ts

@@ -0,0 +1,84 @@
+// ui-kit 词典（en-US）：扁平 key 结构，key 前缀 ui.，由 app 在 createI18n 时与自身词典合并。
+// 覆盖 ui-kit 组件内置文案的默认值；组件 props 显式传入的文案始终优先。
+export const uiKitMessagesEnUS: Record<string, string> = {
+  // Common
+  'ui.common.confirm': 'Confirm',
+  'ui.common.cancel': 'Cancel',
+  'ui.common.loading': 'Loading...',
+  'ui.common.submitting': 'Submitting...',
+  'ui.common.retry': 'Retry',
+  'ui.common.noMatch': 'No matches found',
+  'ui.common.noData': 'No data',
+  'ui.common.fetchFailed': 'Failed to load',
+  'ui.common.search': 'Search',
+
+  // ConfirmDialog
+  'ui.confirmDialog.title': 'Confirm deletion',
+  'ui.confirmDialog.confirmText': 'Delete',
+  'ui.confirmDialog.loadingText': 'Deleting...',
+
+  // DataTable
+  'ui.dataTable.loading': 'Loading...',
+  'ui.dataTable.empty': 'No data',
+
+  // Pagination
+  'ui.pagination.total': 'Total {total} items, {startItem} - {endItem}',
+  'ui.pagination.prev': 'Previous',
+  'ui.pagination.next': 'Next',
+  'ui.pagination.pageSize': '{size}/page',
+
+  // StatusTag (status value → label, matching StatusTag internal mapping keys)
+  'ui.status.active': 'Active',
+  'ui.status.locked': 'Locked',
+  'ui.status.deleted': 'Deleted',
+  'ui.status.disabled': 'Disabled',
+
+  // FormDialog
+  'ui.formDialog.confirmText': 'Confirm',
+
+  // FilterDropdown
+  'ui.filterDropdown.all': 'All',
+
+  // SearchSelect
+  'ui.searchSelect.placeholder': 'Please select',
+
+  // SuggestInput
+  'ui.suggestInput.placeholder': 'Type or select',
+  'ui.suggestInput.loadBtnText': 'Load',
+  'ui.suggestInput.loading': 'Loading...',
+
+  // Tree
+  'ui.tree.searchPlaceholder': 'Search...',
+
+  // SideMenu
+  'ui.sideMenu.expand': 'Expand menu',
+  'ui.sideMenu.collapse': 'Collapse menu',
+  'ui.sideMenu.home': 'Home',
+
+  // UserPicker
+  'ui.userPicker.searchPlaceholder': 'Search user...',
+  'ui.userPicker.empty': 'No matching users found',
+
+  // FileUploader
+  'ui.fileUploader.select': 'Choose file',
+  'ui.fileUploader.uploading': 'Uploading {progress}%',
+  'ui.fileUploader.done': 'Done',
+  'ui.fileUploader.failed': 'Upload failed',
+
+  // DateTimePicker
+  'ui.dateTimePicker.year': '{year}',
+  'ui.dateTimePicker.month': '{month}',
+  'ui.dateTimePicker.monthSection': 'Month',
+  'ui.dateTimePicker.week.sun': 'Su',
+  'ui.dateTimePicker.week.mon': 'Mo',
+  'ui.dateTimePicker.week.tue': 'Tu',
+  'ui.dateTimePicker.week.wed': 'We',
+  'ui.dateTimePicker.week.thu': 'Th',
+  'ui.dateTimePicker.week.fri': 'Fr',
+  'ui.dateTimePicker.week.sat': 'Sa',
+
+  // TopNavbar
+  'ui.navbar.title': 'Medical Device Intelligent Platform',
+  'ui.navbar.currentTheme': 'Theme: {theme}',
+  'ui.navbar.language': 'Language',
+}

package/messages/index.ts

@@ -0,0 +1,14 @@
+import { uiKitMessagesZhCN } from './zh-CN'
+import { uiKitMessagesEnUS } from './en-US'
+
+export { uiKitMessagesZhCN } from './zh-CN'
+export { uiKitMessagesEnUS } from './en-US'
+
+/** 各语言词典聚合：app 侧 createI18n 时展开合并 */
+export const uiKitMessages = {
+  'zh-CN': uiKitMessagesZhCN,
+  'en-US': uiKitMessagesEnUS,
+}
+
+export type UiKitMessagesZh = typeof uiKitMessagesZhCN
+export type UiKitMessagesEn = typeof uiKitMessagesEnUS

package/messages/zh-CN.ts

@@ -0,0 +1,84 @@
+// ui-kit 词典（zh-CN）：扁平 key 结构，key 前缀 ui.，由 app 在 createI18n 时与自身词典合并。
+// 覆盖 ui-kit 组件内置文案的默认值；组件 props 显式传入的文案始终优先。
+export const uiKitMessagesZhCN: Record<string, string> = {
+  // 通用
+  'ui.common.confirm': '确认',
+  'ui.common.cancel': '取消',
+  'ui.common.loading': '加载中...',
+  'ui.common.submitting': '提交中...',
+  'ui.common.retry': '重试',
+  'ui.common.noMatch': '无匹配项',
+  'ui.common.noData': '暂无数据',
+  'ui.common.fetchFailed': '获取失败',
+  'ui.common.search': '搜索',
+
+  // ConfirmDialog
+  'ui.confirmDialog.title': '确认删除',
+  'ui.confirmDialog.confirmText': '确认删除',
+  'ui.confirmDialog.loadingText': '删除中...',
+
+  // DataTable
+  'ui.dataTable.loading': '加载中...',
+  'ui.dataTable.empty': '暂无数据',
+
+  // Pagination
+  'ui.pagination.total': '共 {total} 条，第 {startItem} - {endItem} 条',
+  'ui.pagination.prev': '上一页',
+  'ui.pagination.next': '下一页',
+  'ui.pagination.pageSize': '{size}条/页',
+
+  // StatusTag（状态值→文案，同 StatusTag 内部映射 key）
+  'ui.status.active': '正常',
+  'ui.status.locked': '已锁定',
+  'ui.status.deleted': '已删除',
+  'ui.status.disabled': '已停用',
+
+  // FormDialog
+  'ui.formDialog.confirmText': '确认',
+
+  // FilterDropdown
+  'ui.filterDropdown.all': '全部',
+
+  // SearchSelect
+  'ui.searchSelect.placeholder': '请选择',
+
+  // SuggestInput
+  'ui.suggestInput.placeholder': '请输入或选择',
+  'ui.suggestInput.loadBtnText': '获取',
+  'ui.suggestInput.loading': '获取中...',
+
+  // Tree
+  'ui.tree.searchPlaceholder': '搜索...',
+
+  // SideMenu
+  'ui.sideMenu.expand': '展开菜单',
+  'ui.sideMenu.collapse': '收起菜单',
+  'ui.sideMenu.home': '首页',
+
+  // UserPicker
+  'ui.userPicker.searchPlaceholder': '搜索用户...',
+  'ui.userPicker.empty': '未找到符合条件的用户',
+
+  // FileUploader
+  'ui.fileUploader.select': '选择文件',
+  'ui.fileUploader.uploading': '上传中 {progress}%',
+  'ui.fileUploader.done': '完成',
+  'ui.fileUploader.failed': '上传失败',
+
+  // DateTimePicker
+  'ui.dateTimePicker.year': '{year}年',
+  'ui.dateTimePicker.month': '{month}月',
+  'ui.dateTimePicker.monthSection': '月份',
+  'ui.dateTimePicker.week.sun': '日',
+  'ui.dateTimePicker.week.mon': '一',
+  'ui.dateTimePicker.week.tue': '二',
+  'ui.dateTimePicker.week.wed': '三',
+  'ui.dateTimePicker.week.thu': '四',
+  'ui.dateTimePicker.week.fri': '五',
+  'ui.dateTimePicker.week.sat': '六',
+
+  // TopNavbar
+  'ui.navbar.title': '医疗设备智能平台',
+  'ui.navbar.currentTheme': '当前主题: {theme}',
+  'ui.navbar.language': '语言',
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiferre/ui-kit",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "private": false,
   "type": "module",
   "main": "index.ts",
@@ -11,15 +11,17 @@
     "*.ts",
     "*.vue",
     "components/**/*.vue",
-    "composables/**/*.ts"
+    "composables/**/*.ts",
+    "messages/*.ts"
   ],
   "dependencies": {
     "pinyin-pro": "^3.28.1"
   },
   "peerDependencies": {
-    "@aquiferre/theme-kit": ">=0.1.0",
+    "@aquiferre/theme-kit": ">=0.2.0",
     "pinia": ">=2.0.0",
-    "vue": ">=3.0.0"
+    "vue": ">=3.0.0",
+    "vue-i18n": "^11.0.0"
   },
   "publishConfig": {
     "access": "public"