@liujitcn/kratos-admin-system 0.0.20 → 0.0.21

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

@@ -0,0 +1,176 @@
+<template>
+  <el-popover
+    placement="top-start"
+    trigger="hover"
+    :show-after="120"
+    :width="360"
+    :enterable="true"
+    :teleported="true"
+    popper-class="dynamic-translation-cell__popover"
+  >
+    <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>
+</template>
+
+<script setup lang="ts">
+import { computed } from "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 { 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;
+}
+
+const props = withDefaults(defineProps<DynamicTranslationCellProps>(), {
+  translations: () => [],
+  sourceLocale: "zh-CN",
+  textField: "text",
+  showStatus: true
+});
+
+const { locale } = useLocaleStore();
+const { languages } = useEnabledBaseLanguages();
+const primaryLocale = computed(() => languages.value.find(item => item.is_primary)?.language_code ?? props.sourceLocale ?? "zh-CN");
+
+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 translationRows = computed(() =>
+  languages.value
+    .filter(item => item.language_code !== locale.value)
+    .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) : "";
+      return {
+        locale: itemLocale,
+        text,
+        isSource,
+        translation_status: record?.translation_status,
+        source_changed: record?.source_changed ?? false
+      };
+    })
+);
+
+/** getTranslationText 读取当前资源对应的翻译字段。 */
+function getTranslationText(record: DynamicTranslationCellRecord) {
+  return record[props.textField] ?? "";
+}
+
+/** 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}`);
+}
+
+/** 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";
+}
+</script>
+
+<style scoped>
+.dynamic-translation-cell {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.dynamic-translation-cell__source {
+  min-width: 0;
+  overflow: hidden;
+  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 {
+  min-width: 0;
+  color: var(--el-text-color-primary);
+  overflow-wrap: anywhere;
+}
+</style>

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="translation-editor">
+    <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">
+        <el-input
+          :model-value="item.text"
+          :maxlength="maxlength"
+          :type="multiline ? 'textarea' : 'text'"
+          :rows="multiline ? 6 : undefined"
+          show-word-limit
+          :placeholder="t('system.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
+            :icon="MagicStick"
+            :loading="loadingLocale === item.locale"
+            :disabled="item.translation_status === TranslationStatus.TRANSLATION_STATUS_REVIEWED && !item.source_changed"
+            @click="generateDraft(item.locale)"
+          />
+        </el-tooltip>
+      </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 { 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;
+  maxlength?: number;
+  multiline?: boolean;
+}
+
+const props = withDefaults(defineProps<DynamicTranslationEditorProps>(), {
+  draftEnabled: false,
+  maxlength: 100,
+  multiline: false
+});
+
+const emit = defineEmits<{ "update:modelValue": [value: DynamicTranslationValue[]] }>();
+const localValues = ref<DynamicTranslationValue[]>([]);
+const loadingLocale = ref("");
+
+watch(
+  () => props.modelValue,
+  value => {
+    localValues.value = value.map(item => ({ ...item }));
+  },
+  { immediate: true, deep: true }
+);
+
+/** updateText 更新指定语言的人工译文。 */
+function updateText(locale: DynamicTranslationValue["locale"], text: string) {
+  const values = localValues.value.map(item => (item.locale === locale ? { ...item, text } : item));
+  localValues.value = values;
+  emit("update:modelValue", values);
+}
+
+/** generateDraft 为指定目标语言生成机器翻译草稿。 */
+async function generateDraft(locale: DynamicTranslationValue["locale"]) {
+  loadingLocale.value = locale;
+  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) }));
+  } finally {
+    loadingLocale.value = "";
+  }
+}
+
+/** 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}`);
+}
+
+/** 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>
+.translation-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+}
+.translation-editor__row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.translation-editor__heading,
+.translation-editor__control {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.translation-editor__heading {
+  justify-content: space-between;
+  color: var(--el-text-color-regular);
+}
+.translation-editor__control :deep(.el-input) {
+  flex: 1;
+}
+</style>

package/dist/package/src/components/dynamicTranslation.ts

@@ -0,0 +1,86 @@
+import { TranslationStatus } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_translation";
+import { getEnabledBaseLanguages } from "@liujitcn/kratos-admin-system/api/system/base_language";
+
+/** DynamicTranslationValue 动态资源单语言翻译编辑状态。 */
+export interface DynamicTranslationValue {
+  /** 语言代码。 */
+  locale: string;
+  text: string;
+  translation_status: TranslationStatus;
+  source_changed: boolean;
+  source_hash: string;
+  translation_provider: string;
+  translated_at: string;
+  id: number;
+  reviewed_by: number;
+  reviewed_at: string;
+  created_by: number;
+  updated_by: number;
+  created_at: string;
+  updated_at: string;
+  deleted_at: number;
+}
+
+/** DynamicTranslationRecord 描述三类动态资源翻译共有字段。 */
+export interface DynamicTranslationRecord extends Omit<DynamicTranslationValue, "text"> {
+  title?: string;
+  name?: string;
+  label?: string;
+}
+
+/** DynamicLanguageOption 动态翻译编辑器显示的语言选项。 */
+export interface DynamicLanguageOption {
+  /** 语言代码。 */
+  value: string;
+  /** 语言显示名称。 */
+  label: string;
+}
+
+/** 返回语言管理中启用且非主语言的翻译语言选项。 */
+export function getEditableLanguageOptions(): DynamicLanguageOption[] {
+  return getEnabledBaseLanguages()
+    .filter(item => !item.is_primary)
+    .map(item => ({ value: item.language_code, label: item.native_name || item.language_name || item.language_code }));
+}
+
+/** 返回语言管理中的语言显示名称。 */
+export function getLanguageLabel(locale: string): string {
+  const language = getEnabledBaseLanguages().find(item => item.language_code === locale);
+  return language?.native_name || language?.language_name || locale;
+}
+
+/** normalizeDynamicTranslations 将后端翻译记录补齐为全部非主语言编辑状态。 */
+export function normalizeDynamicTranslations(
+  records: DynamicTranslationRecord[] | undefined,
+  textField: "title" | "name" | "label",
+  locales: string[] = getEditableLanguageOptions().map(item => item.value)
+): DynamicTranslationValue[] {
+  return locales.map(locale => {
+    const record = records?.find(item => item.locale === locale);
+    return {
+      id: record?.id ?? 0,
+      locale,
+      text: String(record?.[textField] ?? ""),
+      translation_status: record?.translation_status ?? TranslationStatus.TRANSLATION_STATUS_PENDING,
+      source_changed: record?.source_changed ?? false,
+      source_hash: record?.source_hash ?? "",
+      translation_provider: record?.translation_provider ?? "",
+      translated_at: record?.translated_at ?? "",
+      reviewed_by: record?.reviewed_by ?? 0,
+      reviewed_at: record?.reviewed_at ?? "",
+      created_by: record?.created_by ?? 0,
+      updated_by: record?.updated_by ?? 0,
+      created_at: record?.created_at ?? "",
+      updated_at: record?.updated_at ?? "",
+      deleted_at: record?.deleted_at ?? 0
+    };
+  });
+}
+
+/** serializeDynamicTranslations 将编辑状态转换回后端资源翻译结构。 */
+export function serializeDynamicTranslations(
+  values: DynamicTranslationValue[],
+  textField: "title" | "name" | "label"
+): Array<{ locale: string; [key: string]: string }> {
+  return values.map(({ locale, text }) => ({ locale, [textField]: text }));
+}

package/dist/package/src/locales/README.md

@@ -0,0 +1,28 @@
+# 管理端 System 语言包
+
+本目录提供 System 管理业务模块的页面、AI、个人中心、基础资料和代码生成等业务文案。语言包由同级 `../module.ts` 导入，随 `systemAdminModule` 注册；管理端启动时由 core 的 `registerLocaleMessages` 合并，System 页面和组件通过 `t()` 或 `useLocaleStore()` 使用 `system.*` 键。
+
+| 文件 | 用途 | 使用位置 |
+| --- | --- | --- |
+| `zh-CN.json` | System 模块简体中文固定 UI 默认语言包，也是七语键集合和占位符校验基准。 | 管理端固定文案默认语言及缺失翻译回退。 |
+| `zh-TW.json` | System 模块繁体中文语言包。 | 管理端切换为繁体中文时由 Vue I18n 使用。 |
+| `en-US.json` | System 模块英文语言包。 | 管理端切换为英文时由 Vue I18n 使用。 |
+| `ja-JP.json` | System 模块日文语言包。 | 管理端切换为日文时由 Vue I18n 使用。 |
+| `ko-KR.json` | System 模块韩语语言包。 | 管理端切换为韩语时由 Vue I18n 使用。 |
+| `fr-FR.json` | System 模块法语语言包。 | 管理端切换为法语时由 Vue I18n 使用。 |
+| `es-ES.json` | System 模块西班牙语语言包。 | 管理端切换为西班牙语时由 Vue I18n 使用。 |
+
+## 命名空间与使用位置
+
+| 命名空间 | 文案范围 | 主要使用位置 |
+| --- | --- | --- |
+| `system.common.*` | System 页面共用的操作、字段、弹窗、状态和校验文案。 | `src/views/**` 下的列表页、表单和确认弹窗。 |
+| `system.ai.*` | AI 会话、消息流、重试和错误提示。 | `src/views/ai/**`、`src/api/base/ai_message.ts`。 |
+| `system.profile.*` | 个人资料、安全设置和用户中心导航。 | `src/views/profile/**`、`src/module.ts` 的用户菜单。 |
+| `system.base.*` | 区域、配置、部门、字典、岗位、角色、租户、用户等基础管理页面。 | `src/views/base/**`。 |
+| `system.codegen.*` | 代码生成配置、预览、列配置和多语言编辑。 | `src/views/tool/code-gen/**`。 |
+| `system.translation.*` | 动态翻译编辑、草稿生成和语言包状态。 | `src/components/DynamicTranslationEditor.vue`、代码生成语言编辑组件。 |
+
+语言包由 `module.ts` 传入 `systemAdminModule.messages`，由 core 的 `registerLocaleMessages` 校验七语键集合、命名空间和占位符后注册到 Vue I18n；业务代码统一使用 `t('system....')` 或 `useLocaleStore()` 读取。
+
+语言键必须使用 `system.` 命名空间；语言包保持标准 JSON，不在文件内写注释。