vome-core 0.1.86 → 0.1.88

package/dist/admin/crud/vm-data-i18n-btn.vue

@@ -1,55 +1,116 @@
 <template>
-  <div v-if="visible">
+  <div v-if="visible" class="vm-data-i18n-btn">
     <button
       type="button"
       class="vm-crud-toolbar__btn is-ghost"
       :disabled="disabled || submitting"
-      @click="open = true"
+      @click="openDialog"
     >
       <i class="ri-translate-2" />
-      {{ text || 'AI 翻译' }}
+      {{ text || '翻译' }}
     </button>
 
+    <!-- 与 vm-upsert 同壳：24 栅格、字段默认 span 12 -->
     <Dialog :open="open" @update:open="onOpenChange">
-      <DialogContent shell="crud" class="vm-data-i18n-btn__dialog">
+      <DialogContent
+        shell="crud"
+        :show-close-button="false"
+        class="vm-crud-upsert vm-data-i18n-btn__dialog"
+        @pointer-down-outside="preventDialogOutsideClose"
+        @focus-outside="preventDialogOutsideClose"
+        @interact-outside="preventDialogOutsideClose"
+      >
         <DialogHeader class="vm-crud-shell__head">
-          <DialogTitle class="vm-crud-shell__title">业务数据 AI 翻译</DialogTitle>
+          <DialogTitle class="vm-crud-shell__title">业务数据翻译</DialogTitle>
+          <DialogClose class="vm-crud-shell__close">
+            <i class="ri-close-line" />
+            <span class="sr-only">Close</span>
+          </DialogClose>
         </DialogHeader>
-        <div class="vm-data-i18n-btn__body">
-          <p v-if="tableName" class="vm-data-i18n-btn__hint">
-            业务表：<code>{{ tableName }}</code>
-          </p>
-          <label class="vm-data-i18n-btn__field">
-            <span>目标语种</span>
+
+        <div class="vm-crud-upsert__body">
+          <div
+            class="vm-crud-upsert__field"
+            :style="{ gridColumn: `span ${fieldSpan}` }"
+          >
+            <Label class="vm-crud-upsert__label">业务表</Label>
+            <Input
+              class="vm-crud-upsert__control"
+              :model-value="tableName"
+              disabled
+            />
+          </div>
+
+          <div
+            class="vm-crud-upsert__field"
+            :style="{ gridColumn: `span ${fieldSpan}` }"
+          >
+            <Label class="vm-crud-upsert__label">
+              目标语种
+              <span class="vm-crud-upsert__req">*</span>
+            </Label>
             <vm-select
               v-model="form.langCode"
+              class="vm-crud-upsert__control"
               :options="langOptions"
               :refresh-on-change="false"
               width="100%"
               placeholder="选择语种"
             />
-          </label>
-          <label class="vm-data-i18n-btn__field">
-            <span>模式</span>
+          </div>
+
+          <div
+            class="vm-crud-upsert__field"
+            :style="{ gridColumn: `span ${fieldSpan}` }"
+          >
+            <Label class="vm-crud-upsert__label">
+              AI 模型
+              <span class="vm-crud-upsert__req">*</span>
+            </Label>
+            <vm-select
+              v-model="form.model"
+              class="vm-crud-upsert__control"
+              :options="modelOptions"
+              :refresh-on-change="false"
+              width="100%"
+              placeholder="请选择模型"
+            />
+          </div>
+
+          <div
+            class="vm-crud-upsert__field"
+            :style="{ gridColumn: `span ${fieldSpan}` }"
+          >
+            <Label class="vm-crud-upsert__label">
+              模式
+              <span class="vm-crud-upsert__req">*</span>
+            </Label>
             <vm-select
               v-model="form.mode"
+              class="vm-crud-upsert__control"
               :options="modeOptions"
               :refresh-on-change="false"
               width="100%"
             />
-          </label>
+          </div>
         </div>
+
         <DialogFooter class="vm-crud-shell__foot">
-          <button type="button" class="vm-crud-toolbar__btn is-ghost" @click="open = false">
+          <button
+            type="button"
+            class="vm-crud-shell__btn is-ghost"
+            :disabled="submitting"
+            @click="open = false"
+          >
             取消
           </button>
           <button
             type="button"
-            class="vm-crud-toolbar__btn is-primary"
-            :disabled="submitting"
+            class="vm-crud-shell__btn is-primary"
+            :disabled="submitting || !form.model || !form.langCode"
             @click="runTranslate"
           >
-            {{ submitting ? '翻译中…' : '开始翻译' }}
+            {{ submitting ? '翻译中…' : '翻译' }}
           </button>
         </DialogFooter>
       </DialogContent>
@@ -60,11 +121,15 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
 import { toast } from 'vue-sonner'
-import { findEpsEntity } from '../lib/eps'
+import { preventDialogOutsideClose } from '../lib/dialog-float'
 import { useVome } from '../hooks/useVome'
 import { useCrud } from './useCrud'
 import VmSelect from './components/vm-select.vue'
-import type { EpsEntity } from '../../../typings/routing/eps'
+import { resolveFormSpan, useFormCols } from './span'
+import {
+  canUseDataI18n,
+  dataPackFromService,
+} from './data-i18n'
 
 defineOptions({ name: 'vm-data-i18n-btn' })
 
@@ -85,9 +150,14 @@ const { service } = useVome()
 const open = ref(false)
 const submitting = ref(false)
 const langOptions = ref<Array<{ label: string; value: string }>>([])
+const modelOptions = ref<Array<{ label: string; value: string }>>([])
+const formCols = useFormCols()
+/** 与 skill 约定一致：表单字段默认 span 12（半宽两列） */
+const fieldSpan = computed(() => resolveFormSpan(12, formCols.value))
 
 const form = reactive({
   langCode: 'en-US',
+  model: '',
   mode: 'incremental' as 'incremental' | 'full',
 })
 
@@ -96,41 +166,34 @@ const modeOptions = [
   { label: '全量覆盖', value: 'full' },
 ]
 
-const epsEntity = computed(() => {
-  const ns = (crud.service as { namespace?: string } | undefined)?.namespace
-  if (!ns) return undefined
-  return findEpsEntity(`/${ns}`) as (EpsEntity & { dataI18n?: boolean }) | undefined
-})
-
-function resolveTableName(entity?: EpsEntity): string {
-  if (props.tableName?.trim()) return props.tableName.trim()
-  if (!entity) return ''
-  const cols = [...(entity.columns || []), ...(entity.pageColumns || [])]
-  for (const col of cols) {
-    const table = String(col.table || '').trim()
-    if (table) return table
-  }
-  return ''
-}
-
-const tableName = computed(() => resolveTableName(epsEntity.value))
+const meta = computed(() =>
+  canUseDataI18n(crud.service, service, props.tableName),
+)
 
-const visible = computed(() => {
-  if (!epsEntity.value?.dataI18n) return false
-  if (!tableName.value) return false
-  const dataPack = (service as { i18n?: { dataPack?: { translateTable?: unknown } } })
-    .i18n?.dataPack
-  return Boolean(dataPack?.translateTable)
-})
+const tableName = computed(() => meta.value.tableName)
+const visible = computed(() => meta.value.ok)
 
 watch(open, (v) => {
-  if (v) void loadLangs()
+  if (v) void loadDialogData()
 })
 
 function onOpenChange(v: boolean) {
   open.value = v
 }
 
+function openDialog() {
+  if (props.disabled || submitting.value) return
+  open.value = true
+}
+
+async function loadDialogData() {
+  await Promise.all([loadLangs(), loadModels()])
+  const viewing = crud.dataI18nLangCode?.value
+  if (viewing && langOptions.value.some((o) => o.value === viewing)) {
+    form.langCode = viewing
+  }
+}
+
 async function loadLangs() {
   const langSvc = (service as { i18n?: { lang?: { list?: (q: unknown) => Promise<unknown> } } })
     .i18n?.lang
@@ -157,6 +220,27 @@ async function loadLangs() {
   }
 }
 
+async function loadModels() {
+  const dataPack = dataPackFromService(service)
+  if (!dataPack?.chatModels) {
+    modelOptions.value = []
+    form.model = ''
+    return
+  }
+  try {
+    const list = (await dataPack.chatModels()) as Array<{ code?: string }>
+    modelOptions.value = (list || [])
+      .filter((m) => m.code)
+      .map((m) => ({ label: String(m.code), value: String(m.code) }))
+    if (!modelOptions.value.some((o) => o.value === form.model)) {
+      form.model = modelOptions.value[0]?.value || ''
+    }
+  } catch {
+    modelOptions.value = []
+    form.model = ''
+  }
+}
+
 async function runTranslate() {
   if (submitting.value || props.disabled) return
   const table = tableName.value
@@ -168,13 +252,11 @@ async function runTranslate() {
     toast.error('请选择非中文目标语种')
     return
   }
-  const dataPack = (service as {
-    i18n?: {
-      dataPack?: {
-        translateTable?: (body: Record<string, unknown>) => Promise<unknown>
-      }
-    }
-  }).i18n?.dataPack
+  if (!form.model) {
+    toast.error('请选择 AI 模型')
+    return
+  }
+  const dataPack = dataPackFromService(service)
   if (!dataPack?.translateTable) {
     toast.error('未配置业务翻译服务')
     return
@@ -185,6 +267,7 @@ async function runTranslate() {
       tableName: table,
       langCode: form.langCode,
       mode: form.mode,
+      model: form.model,
     })) as { skipped?: boolean; message?: string; rowCount?: number }
     if (res?.skipped) {
       toast.message(res.message || '已跳过')
@@ -192,6 +275,12 @@ async function runTranslate() {
       toast.success(`翻译完成，共 ${res?.rowCount ?? 0} 条`)
     }
     open.value = false
+    if (crud.dataI18nLangCode) {
+      crud.dataI18nLangCode.value = form.langCode
+    }
+    if (crud.trashMode.value !== 'dataI18n') {
+      crud.trashMode.value = 'dataI18n'
+    }
     await crud.refresh()
   } catch (e) {
     toast.error(e instanceof Error ? e.message : '翻译失败')
@@ -202,33 +291,81 @@ async function runTranslate() {
 </script>
 
 <style lang="scss" scoped>
-.vm-data-i18n-btn__dialog {
-  width: min(480px, calc(100vw - 32px));
+.vm-data-i18n-btn {
+  display: inline-flex;
 }
 
-.vm-data-i18n-btn__body {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  padding: 8px 22px 16px;
+.vm-crud-toolbar__btn {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--muted);
+  color: var(--foreground);
+  transition: background 0.15s ease, opacity 0.15s ease;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+  }
 }
 
-.vm-data-i18n-btn__hint {
-  margin: 0;
-  font-size: 13px;
-  color: var(--muted-foreground);
+/* 复用 vm-upsert 栅格与控件视觉（与业务编辑弹窗一致） */
+.vm-crud-upsert__body {
+  display: grid;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+  gap: 12px 16px;
+  padding: 8px 22px 16px;
 
-  code {
-    font-family: ui-monospace, monospace;
-    color: var(--foreground);
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 10px;
+    padding: 10px 12px;
   }
 }
 
-.vm-data-i18n-btn__field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+.vm-crud-upsert__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 6px;
   font-size: 12px;
   color: var(--muted-foreground);
 }
+
+.vm-crud-upsert__req {
+  color: var(--destructive);
+}
+
+.vm-crud-upsert__field {
+  min-width: 0;
+
+  :deep(.vm-crud-upsert__control),
+  :deep(.vm-crud-select.vm-crud-upsert__control) {
+    width: 100%;
+    height: var(--vm-control-height) !important;
+    min-height: var(--vm-control-height);
+    border-radius: var(--vm-control-radius) !important;
+    font-size: var(--vm-control-font-size) !important;
+  }
+
+  :deep(input.vm-crud-upsert__control),
+  :deep(.vm-crud-upsert__control[data-slot='input']) {
+    background: var(--card) !important;
+  }
+
+  :deep(.vm-crud-select.vm-crud-upsert__control) {
+    background: var(--muted) !important;
+  }
+}
 </style>

package/dist/admin/crud/vm-data-i18n-lang.vue

@@ -0,0 +1,176 @@
+<template>
+  <DropdownMenu v-if="langs.length" :modal="false">
+    <DropdownMenuTrigger as-child>
+      <button
+        type="button"
+        class="vm-crud-toolbar__btn is-ghost vm-data-i18n-lang__btn"
+        :disabled="switching"
+        :title="current?.name || langCode"
+      >
+        <span class="vm-data-i18n-lang__flag" aria-hidden="true">
+          {{ current?.flag || '🏳️' }}
+        </span>
+        切换
+      </button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start" class="vm-data-i18n-lang__menu">
+      <DropdownMenuItem
+        v-for="lang in langs"
+        :key="lang.value"
+        class="vm-data-i18n-lang__item"
+        :class="{ 'is-active': langCode === lang.value }"
+        :disabled="switching"
+        @click="switchLang(lang.value)"
+      >
+        <span class="vm-data-i18n-lang__flag" aria-hidden="true">
+          {{ lang.flag || '🏳️' }}
+        </span>
+        <span class="vm-data-i18n-lang__label">{{ lang.name || lang.label }}</span>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useVome } from '../hooks/useVome'
+import { useCrud } from './useCrud'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/ui/dropdown-menu'
+import type { DataI18nLangOption } from './data-i18n'
+
+defineOptions({ name: 'vm-data-i18n-lang' })
+
+const crud = useCrud()
+const { service } = useVome()
+const langs = ref<DataI18nLangOption[]>([])
+const switching = ref(false)
+
+const langCode = computed({
+  get: () => crud.dataI18nLangCode?.value || '',
+  set: (v: string) => {
+    if (crud.dataI18nLangCode) crud.dataI18nLangCode.value = v
+  },
+})
+
+const current = computed(
+  () => langs.value.find((l) => l.value === langCode.value) || langs.value[0],
+)
+
+async function loadLangs() {
+  const langSvc = (service as { i18n?: { lang?: { list?: (q: unknown) => Promise<unknown> } } })
+    .i18n?.lang
+  if (!langSvc?.list) {
+    langs.value = [{ label: 'en-US', value: 'en-US', name: 'en-US', flag: '🇺🇸' }]
+    ensureLang()
+    return
+  }
+  try {
+    const rows = (await langSvc.list({ status: 1 })) as Array<{
+      code?: string
+      name?: string
+      flag?: string
+    }>
+    langs.value = (rows || [])
+      .filter((r) => r.code && r.code !== 'zh-CN')
+      .map((r) => ({
+        label: `${r.name || r.code} (${r.code})`,
+        value: String(r.code),
+        name: String(r.name || r.code),
+        flag: r.flag || '🏳️',
+      }))
+  } catch {
+    langs.value = [{ label: 'en-US', value: 'en-US', name: 'en-US', flag: '🇺🇸' }]
+  }
+  ensureLang()
+  if (crud.trashMode.value === 'dataI18n') {
+    await crud.refresh()
+  }
+}
+
+function ensureLang() {
+  if (!langs.value.length) return
+  if (!langCode.value || !langs.value.some((l) => l.value === langCode.value)) {
+    langCode.value = langs.value[0]!.value
+  }
+}
+
+async function switchLang(code: string) {
+  if (switching.value || !code || code === langCode.value) return
+  switching.value = true
+  try {
+    langCode.value = code
+    crud.pagination.value = { ...crud.pagination.value, page: 1 }
+    await crud.refresh()
+  } finally {
+    switching.value = false
+  }
+}
+
+watch(
+  () => crud.trashMode.value,
+  (mode) => {
+    if (mode === 'dataI18n') void loadLangs()
+  },
+)
+
+onMounted(() => {
+  if (crud.trashMode.value === 'dataI18n') void loadLangs()
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-toolbar__btn {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--muted);
+  color: var(--foreground);
+  transition: background 0.15s ease, opacity 0.15s ease;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+  }
+}
+
+.vm-data-i18n-lang__flag {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.vm-data-i18n-lang__menu {
+  min-width: 140px;
+}
+
+.vm-data-i18n-lang__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+
+  &.is-active {
+    background: color-mix(in srgb, var(--brand) 12%, transparent);
+    color: var(--brand);
+  }
+}
+
+.vm-data-i18n-lang__label {
+  font-size: 13px;
+}
+</style>