@liujitcn/kratos-admin-system 0.0.21 → 0.0.24

package/dist/package/src/components/DynamicTranslationCell.vue

@@ -1,129 +1,230 @@
 <template>
-  <el-popover
-    placement="top-start"
-    trigger="hover"
-    :show-after="120"
-    :width="360"
-    :enterable="true"
-    :teleported="true"
-    popper-class="dynamic-translation-cell__popover"
+  <el-link class="dynamic-translation-cell" type="primary" underline="never" @click="openDialog">
+    <span class="dynamic-translation-cell__source">{{ displaySource || "--" }}</span>
+  </el-link>
+
+  <ProDialog
+    v-model="dialogVisible"
+    :title="displaySource"
+    width="760px"
+    append-to-body
+    :destroy-on-close="true"
+    @closed="handleDialogClosed"
   >
-    <template #reference>
-      <span class="dynamic-translation-cell">
-        <span class="dynamic-translation-cell__source">{{ displaySource || "--" }}</span>
-      </span>
-    </template>
-
-    <div class="dynamic-translation-cell__rows">
-      <div v-for="item in translationRows" :key="item.locale" class="dynamic-translation-cell__row">
-        <span class="dynamic-translation-cell__language">{{ getLanguageLabel(item.locale) }}</span>
-        <span class="dynamic-translation-cell__text">{{ item.text || t('system.common.value.none') }}</span>
-        <el-tag v-if="showStatus && !item.isSource" :type="statusTagType(item)" effect="light" size="small">
-          {{ statusLabel(item) }}
-        </el-tag>
-      </div>
-    </div>
-  </el-popover>
+    <el-table v-loading="loading" :data="translationRows" border>
+      <el-table-column :label="t('common.field.language')" width="150">
+        <template #default="{ row }">
+          {{ getLanguageLabel(row.locale) }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('system.base.translation.field.translations')" min-width="360">
+        <template #default="{ row }">
+          <el-input
+            v-if="row.editing"
+            v-model="row.text"
+            :placeholder="t('system.base.translation.placeholder.text', { language: getLanguageLabel(row.locale) })"
+          />
+          <span v-else class="dynamic-translation-dialog__text">
+            {{ row.text || t("common.value.none") }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('common.field.operation')" width="150" fixed="right">
+        <template #default="{ row }">
+          <el-button v-if="!row.editing" link type="primary" :icon="EditPen" @click="startEdit(row)">
+            {{ t("common.action.edit") }}
+          </el-button>
+          <template v-else>
+            <el-button link type="primary" :icon="Check" :loading="row.saving" @click="saveTranslation(row)">
+              {{ t("common.action.save") }}
+            </el-button>
+            <el-button link :icon="Close" :disabled="row.saving" @click="cancelEdit(row)">
+              {{ t("common.action.cancel") }}
+            </el-button>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+  </ProDialog>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { Check, Close, EditPen } from "@element-plus/icons-vue";
+import ProDialog from "@liujitcn/kratos-admin-core/components/Dialog/ProDialog.vue";
 import { t, useLocaleStore } from "@liujitcn/kratos-admin-core";
-import { useEnabledBaseLanguages } from "@liujitcn/kratos-admin-system/api/system/base_language";
-import { TranslationStatus } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_translation";
+import { loadEnabledBaseLanguages, useEnabledBaseLanguages } from "@liujitcn/kratos-admin-system/api/system/base_language";
+import { defBaseTranslationService } from "@liujitcn/kratos-admin-system/api/system/base_translation";
+import type { BaseTranslation } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_translation";
+import { TranslationTargetType } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_translation";
 import { getLanguageLabel } from "./dynamicTranslation";
 
-/** DynamicTranslationCellRecord 描述列表翻译预览所需的最小记录结构。 */
-export interface DynamicTranslationCellRecord {
-  /** 语言区域。 */
-  locale: string;
-  /** 通用翻译文本，供系统配置使用。 */
-  text?: string;
-  /** 字典名称翻译。 */
-  name?: string;
-  /** 字典项标签翻译。 */
-  label?: string;
-  /** 菜单标题翻译。 */
-  title?: string;
-  /** 翻译审核状态。 */
-  translation_status?: TranslationStatus;
-  /** 中文源文是否已变化。 */
-  source_changed?: boolean;
-}
-
 /** DynamicTranslationCellProps 动态翻译列表单元格属性。 */
 interface DynamicTranslationCellProps {
   /** 资源源文。 */
   source: string;
-  /** 非主语言翻译记录。 */
-  translations?: DynamicTranslationCellRecord[];
-  /** 源文所属语言，仅用于语言配置尚未加载时的回退。 */
-  sourceLocale?: string;
-  /** 从翻译记录中读取的文本字段。 */
-  textField?: "text" | "name" | "label" | "title";
-  /** 是否显示翻译状态标签。 */
-  showStatus?: boolean;
+  /** 统一翻译表目标类型。 */
+  targetType?: TranslationTargetType;
+  /** 目标资源编号。 */
+  targetId?: number;
+  /** 资源列表返回的非主语言翻译。 */
+  translations?: BaseTranslation[];
 }
 
-const props = withDefaults(defineProps<DynamicTranslationCellProps>(), {
-  translations: () => [],
-  sourceLocale: "zh-CN",
-  textField: "text",
-  showStatus: true
-});
+const props = defineProps<DynamicTranslationCellProps>();
 
-const { locale } = useLocaleStore();
 const { languages } = useEnabledBaseLanguages();
-const primaryLocale = computed(() => languages.value.find(item => item.is_primary)?.language_code ?? props.sourceLocale ?? "zh-CN");
+const { locale } = useLocaleStore();
+const dialogVisible = ref(false);
+const loading = ref(false);
+const translationRows = ref<DynamicTranslationRow[]>([]);
+const translationOverrides = ref(new Map<string, string>());
 
 const displaySource = computed(() => {
-  if (locale.value === primaryLocale.value) return props.source;
-  const record = props.translations.find(item => item.locale === locale.value);
-  if (record?.translation_status !== TranslationStatus.TRANSLATION_STATUS_REVIEWED) return props.source;
-  return getTranslationText(record) || props.source;
+  const override = translationOverrides.value.get(locale.value);
+  if (override) return override;
+  const translation = props.translations?.find(item => item.locale === locale.value && item.name);
+  return translation?.name || props.source;
 });
 
-const translationRows = computed(() =>
-  languages.value
-    .filter(item => item.language_code !== locale.value)
+watch(
+  () => [props.targetType, props.targetId],
+  () => {
+    translationRows.value = [];
+    translationOverrides.value.clear();
+    dialogVisible.value = false;
+  }
+);
+
+/** DynamicTranslationRow 描述弹窗内可编辑的单语言翻译行。 */
+interface DynamicTranslationRow {
+  /** 翻译记录主键，新增翻译时为空。 */
+  id: number;
+  /** 语言区域。 */
+  locale: string;
+  /** 翻译文本。 */
+  text: string;
+  /** 是否处于编辑状态。 */
+  editing: boolean;
+  /** 是否正在保存。 */
+  saving: boolean;
+  /** 编辑前的文本，用于取消编辑。 */
+  originalText: string;
+}
+
+/** openDialog 打开翻译编辑弹窗并加载当前资源译文。 */
+async function openDialog() {
+  dialogVisible.value = true;
+  await loadTranslations();
+}
+
+/** loadTranslations 查询当前资源的翻译并补齐启用语言行。 */
+async function loadTranslations() {
+  const targetType = props.targetType;
+  const targetId = props.targetId;
+  if (!targetType || !targetId) return;
+  loading.value = true;
+  try {
+    await loadEnabledBaseLanguages();
+    const rows = await queryTranslationRows();
+    translationRows.value = rows;
+    const missingRows = rows.filter(row => !row.text);
+    if (missingRows.length === 0) return;
+    if (!props.source) return;
+    const draft = await defBaseTranslationService.DraftBaseTranslation({ source: props.source });
+    const translations = new Map(draft.translations.map(item => [item.locale, item.translation]));
+    const results = await Promise.allSettled(
+      missingRows.map(async row => {
+        const translation = translations.get(row.locale);
+        if (!translation) throw new Error("translation not found");
+        await defBaseTranslationService.UpdateBaseTranslation({
+          id: row.id,
+          target_type: targetType,
+          target_id: targetId,
+          locale: row.locale,
+          name: translation
+        });
+        return { row, text: translation };
+      })
+    );
+    for (const result of results) {
+      if (result.status !== "fulfilled") continue;
+      result.value.row.text = result.value.text;
+      result.value.row.originalText = result.value.text;
+      translationOverrides.value.set(result.value.row.locale, result.value.text);
+    }
+  } catch {
+    ElMessage.error(t("common.message.system_error"));
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** queryTranslationRows 将列表返回的翻译记录补齐为可编辑语言行。 */
+async function queryTranslationRows(): Promise<DynamicTranslationRow[]> {
+  const records = new Map((props.translations ?? []).map(item => [item.locale, item]));
+  return languages.value
+    .filter(item => !item.is_primary)
     .map(item => {
-      const itemLocale = item.language_code;
-      const isSource = itemLocale === primaryLocale.value;
-      const record = props.translations.find(item => item.locale === itemLocale);
-      const text = isSource ? props.source : record ? getTranslationText(record) : "";
+      const record = records.get(item.language_code);
+      const text = translationOverrides.value.get(item.language_code) ?? record?.name ?? "";
       return {
-        locale: itemLocale,
+        id: record?.id ?? 0,
+        locale: item.language_code,
         text,
-        isSource,
-        translation_status: record?.translation_status,
-        source_changed: record?.source_changed ?? false
+        editing: false,
+        saving: false,
+        originalText: text
       };
-    })
-);
+    });
+}
+
+/** startEdit 开启指定语言的编辑状态。 */
+function startEdit(row: DynamicTranslationRow) {
+  row.originalText = row.text;
+  row.editing = true;
+}
 
-/** getTranslationText 读取当前资源对应的翻译字段。 */
-function getTranslationText(record: DynamicTranslationCellRecord) {
-  return record[props.textField] ?? "";
+/** cancelEdit 恢复编辑前的内容。 */
+function cancelEdit(row: DynamicTranslationRow) {
+  row.text = row.originalText;
+  row.editing = false;
 }
 
-/** statusLabel 返回当前翻译审核状态文案。 */
-function statusLabel(item: (typeof translationRows.value)[number]) {
-  if (item.source_changed) return t("system.translation.status.sourceChanged");
-  const statusKey =
-    {
-      [TranslationStatus.TRANSLATION_STATUS_PENDING]: "pending",
-      [TranslationStatus.TRANSLATION_STATUS_MACHINE]: "machine",
-      [TranslationStatus.TRANSLATION_STATUS_REVIEWED]: "reviewed"
-    }[item.translation_status ?? TranslationStatus.TRANSLATION_STATUS_PENDING] ?? "pending";
-  return t(`system.translation.status.${statusKey}`);
+/** saveTranslation 使用统一更新接口保存指定语言译文。 */
+async function saveTranslation(row: DynamicTranslationRow) {
+  const targetType = props.targetType;
+  const targetId = props.targetId;
+  if (row.saving || !targetType || !targetId) return;
+  if (row.id === 0 && !row.text) {
+    row.editing = false;
+    return;
+  }
+  row.saving = true;
+  try {
+    await defBaseTranslationService.UpdateBaseTranslation({
+      id: row.id,
+      target_type: targetType,
+      target_id: targetId,
+      locale: row.locale,
+      name: row.text
+    });
+    ElMessage.success(t("common.message.operation_success"));
+    row.editing = false;
+    row.originalText = row.text;
+    translationOverrides.value.set(row.locale, row.text);
+  } catch {
+    ElMessage.error(t("common.message.system_error"));
+  } finally {
+    row.saving = false;
+  }
 }
 
-/** statusTagType 返回当前翻译审核状态对应的标签样式。 */
-function statusTagType(item: (typeof translationRows.value)[number]) {
-  if (item.source_changed) return "warning";
-  if (item.translation_status === TranslationStatus.TRANSLATION_STATUS_REVIEWED) return "success";
-  if (item.translation_status === TranslationStatus.TRANSLATION_STATUS_MACHINE) return "primary";
-  return "info";
+/** handleDialogClosed 清理弹窗状态，避免复用旧资源译文。 */
+function handleDialogClosed() {
+  translationRows.value = [];
+  loading.value = false;
 }
 </script>
 
@@ -141,36 +242,8 @@ function statusTagType(item: (typeof translationRows.value)[number]) {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-</style>
-
-<style>
-.dynamic-translation-cell__popover .dynamic-translation-cell__rows {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.dynamic-translation-cell__popover {
-  max-width: calc(100vw - 24px);
-  box-sizing: border-box;
-}
-
-.dynamic-translation-cell__popover .dynamic-translation-cell__row {
-  display: grid;
-  grid-template-columns: 76px minmax(0, 1fr) auto;
-  gap: 10px;
-  align-items: center;
-}
-
-.dynamic-translation-cell__popover .dynamic-translation-cell__language {
-  color: var(--el-text-color-regular);
-  font-weight: 600;
-}
-
-.dynamic-translation-cell__popover .dynamic-translation-cell__text {
+.dynamic-translation-dialog__text {
   min-width: 0;
-  color: var(--el-text-color-primary);
   overflow-wrap: anywhere;
 }
 </style>

package/dist/package/src/components/DynamicTranslationEditor.vue

@@ -1,75 +1,78 @@
 <template>
   <div class="translation-editor">
+    <div class="translation-editor__toolbar">
+      <el-button
+        type="primary"
+        size="small"
+        :icon="Promotion"
+        :loading="translating"
+        :disabled="!canTranslate"
+        @click="handleBatchTranslate"
+      >
+        {{ t("system.base.translation.action.batch_translate") }}
+      </el-button>
+    </div>
     <div v-for="item in localValues" :key="item.locale" class="translation-editor__row">
       <div class="translation-editor__heading">
         <span>{{ getLanguageLabel(item.locale) }}</span>
-        <el-tag :type="statusTagType(item)" effect="light" size="small">{{ statusLabel(item) }}</el-tag>
       </div>
-      <div class="translation-editor__control">
+      <div class="translation-editor__control" :class="{ 'translation-editor__control--multiline': multiline }">
         <el-input
           :model-value="item.text"
           :maxlength="maxlength"
           :type="multiline ? 'textarea' : 'text'"
           :rows="multiline ? 6 : undefined"
+          :disabled="translating || translatingLocale === item.locale"
           show-word-limit
-          :placeholder="t('system.translation.placeholder.text', { language: getLanguageLabel(item.locale) })"
+          :placeholder="t('system.base.translation.placeholder.text', { language: getLanguageLabel(item.locale) })"
           @update:model-value="value => updateText(item.locale, value)"
         />
-        <el-tooltip
-          v-if="draftEnabled && resourceId > 0"
-          :content="t('system.translation.action.generateDraft', { language: getLanguageLabel(item.locale) })"
+        <el-button
+          class="translation-editor__translate"
+          link
+          type="primary"
+          size="small"
+          :icon="Promotion"
+          :loading="translatingLocale === item.locale"
+          :disabled="!props.source || Boolean(item.text) || translating || Boolean(translatingLocale)"
+          @click="handleTranslate(item.locale)"
         >
-          <el-button
-            :icon="MagicStick"
-            :loading="loadingLocale === item.locale"
-            :disabled="item.translation_status === TranslationStatus.TRANSLATION_STATUS_REVIEWED && !item.source_changed"
-            @click="generateDraft(item.locale)"
-          />
-        </el-tooltip>
+          {{ t("system.base.translation.action.translate") }}
+        </el-button>
       </div>
     </div>
-    <el-alert
-      v-if="resourceId === 0 && draftEnabled"
-      :title="t('system.translation.message.saveBeforeDraft')"
-      type="info"
-      :closable="false"
-      show-icon
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import { MagicStick } from "@element-plus/icons-vue";
-import { t } from "@liujitcn/kratos-admin-core";
+import { computed, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { Promotion } from "@element-plus/icons-vue";
+import { t, useLocaleStore } from "@liujitcn/kratos-admin-core";
 import { defBaseTranslationService } from "@liujitcn/kratos-admin-system/api/system/base_translation";
-import {
-  BaseConfigTranslationField,
-  TranslationResourceType,
-  TranslationStatus
-} from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_translation";
 import { getLanguageLabel, type DynamicTranslationValue } from "./dynamicTranslation";
 
 /** DynamicTranslationEditorProps 动态翻译编辑器属性。 */
 interface DynamicTranslationEditorProps {
   modelValue: DynamicTranslationValue[];
-  resourceId: number;
-  resourceType: TranslationResourceType;
-  field?: BaseConfigTranslationField;
-  draftEnabled?: boolean;
+  /** 当前语言源文本。 */
+  source?: string;
   maxlength?: number;
   multiline?: boolean;
 }
 
 const props = withDefaults(defineProps<DynamicTranslationEditorProps>(), {
-  draftEnabled: false,
+  source: "",
   maxlength: 100,
   multiline: false
 });
 
+const { locale: currentLocale } = useLocaleStore();
 const emit = defineEmits<{ "update:modelValue": [value: DynamicTranslationValue[]] }>();
 const localValues = ref<DynamicTranslationValue[]>([]);
-const loadingLocale = ref("");
+const translating = ref(false);
+const translatingLocale = ref("");
+const canTranslate = computed(() => Boolean(props.source) && localValues.value.some(item => !item.text && item.locale !== currentLocale.value));
 
 watch(
   () => props.modelValue,
@@ -86,56 +89,60 @@ function updateText(locale: DynamicTranslationValue["locale"], text: string) {
   emit("update:modelValue", values);
 }
 
-/** generateDraft 为指定目标语言生成机器翻译草稿。 */
-async function generateDraft(locale: DynamicTranslationValue["locale"]) {
-  loadingLocale.value = locale;
+/** handleBatchTranslate 批量翻译当前仍为空的语言输入框。 */
+async function handleBatchTranslate() {
+  if (!canTranslate.value || translating.value) return;
+  translating.value = true;
   try {
-    const response = await defBaseTranslationService.GenerateTranslationDraft({
-      resource_type: props.resourceType,
-      resource_id: props.resourceId,
-      target_locale: locale,
-      field: props.field ?? BaseConfigTranslationField.BASE_CONFIG_TRANSLATION_FIELD_UNSPECIFIED
-    });
-    const values = localValues.value.map(item =>
-      item.locale === locale
-        ? {
-            ...item,
-            text: response.translation,
-            translation_status: response.translation_status,
-            source_changed: false,
-            source_hash: response.source_hash,
-            translation_provider: response.translation_provider,
-            translated_at: response.translated_at
-          }
-        : item
-    );
-    localValues.value = values;
-    emit("update:modelValue", values);
-    ElMessage.success(t("system.translation.message.draftSuccess", { language: getLanguageLabel(locale) }));
+    const pending = localValues.value.filter(item => !item.text && item.locale !== currentLocale.value);
+    const response = await defBaseTranslationService.DraftBaseTranslation({ source: props.source });
+    const translations = new Map(response.translations.map(item => [item.locale, item.translation]));
+    const failed = pending.filter(item => !translations.has(item.locale)).length;
+    if (translations.size) {
+      const values = localValues.value.map(item => {
+        const translation = translations.get(item.locale);
+        return translation === undefined ? item : { ...item, text: translation };
+      });
+      localValues.value = values;
+      emit("update:modelValue", values);
+    }
+    if (failed) {
+      ElMessage.warning(
+        t("system.base.translation.message.batch_translate_partial", {
+          success: translations.size,
+          failed
+        })
+      );
+    } else {
+      ElMessage.success(t("system.base.translation.message.batch_translate_success", { count: translations.size }));
+    }
+  } catch {
+    ElMessage.error(t("system.base.translation.message.batch_translate_failed"));
   } finally {
-    loadingLocale.value = "";
+    translating.value = false;
   }
 }
 
-/** statusLabel 返回当前翻译审核状态文案。 */
-function statusLabel(item: DynamicTranslationValue) {
-  if (item.source_changed) return t("system.translation.status.sourceChanged");
-  const statusKey =
-    {
-      [TranslationStatus.TRANSLATION_STATUS_PENDING]: "pending",
-      [TranslationStatus.TRANSLATION_STATUS_MACHINE]: "machine",
-      [TranslationStatus.TRANSLATION_STATUS_REVIEWED]: "reviewed"
-    }[item.translation_status] ?? "pending";
-  return t(`system.translation.status.${statusKey}`);
+/** handleTranslate 翻译指定语言的单个输入框。 */
+async function handleTranslate(locale: string) {
+  const item = localValues.value.find(value => value.locale === locale);
+  if (!item || item.text || item.locale === currentLocale.value || !props.source || translating.value || translatingLocale.value) return;
+  translatingLocale.value = locale;
+  try {
+    const response = await defBaseTranslationService.DraftBaseTranslation({ source: props.source, locale });
+    const translation = response.translations.find(item => item.locale === locale)?.translation;
+    if (!translation) throw new Error("translation not found");
+    const values = localValues.value.map(value => (value.locale === locale ? { ...value, text: translation } : value));
+    localValues.value = values;
+    emit("update:modelValue", values);
+    ElMessage.success(t("system.base.translation.message.translate_success", { language: getLanguageLabel(locale) }));
+  } catch {
+    ElMessage.error(t("system.base.translation.message.translate_failed", { language: getLanguageLabel(locale) }));
+  } finally {
+    translatingLocale.value = "";
+  }
 }
 
-/** statusTagType 返回当前翻译审核状态对应的标签样式。 */
-function statusTagType(item: DynamicTranslationValue) {
-  if (item.source_changed) return "warning";
-  if (item.translation_status === TranslationStatus.TRANSLATION_STATUS_REVIEWED) return "success";
-  if (item.translation_status === TranslationStatus.TRANSLATION_STATUS_MACHINE) return "primary";
-  return "info";
-}
 </script>
 
 <style scoped>
@@ -145,6 +152,10 @@ function statusTagType(item: DynamicTranslationValue) {
   gap: 14px;
   width: 100%;
 }
+.translation-editor__toolbar {
+  display: flex;
+  justify-content: flex-end;
+}
 .translation-editor__row {
   display: flex;
   flex-direction: column;
@@ -157,10 +168,30 @@ function statusTagType(item: DynamicTranslationValue) {
   align-items: center;
 }
 .translation-editor__heading {
-  justify-content: space-between;
   color: var(--el-text-color-regular);
 }
+.translation-editor__control {
+  position: relative;
+  width: 100%;
+}
 .translation-editor__control :deep(.el-input) {
   flex: 1;
 }
+.translation-editor__control--multiline :deep(.el-textarea__inner) {
+  padding-right: 78px;
+}
+.translation-editor__control:not(.translation-editor__control--multiline) :deep(.el-input__suffix) {
+  padding-right: 78px;
+}
+.translation-editor__translate {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+}
+.translation-editor__control--multiline .translation-editor__translate {
+  top: 8px;
+  transform: none;
+}
 </style>