@liujitcn/kratos-admin-system 0.0.20 → 0.0.21

package/dist/package/src/views/tool/language/index.vue

@@ -0,0 +1,256 @@
+<!-- 语言管理 -->
+<template>
+  <div class="table-box">
+    <ProTable
+      ref="proTable"
+      row-key="id"
+      :columns="columns"
+      :header-actions="headerActions"
+      :request-api="requestBaseLanguageTable"
+    />
+
+    <FormDialog
+      v-model="dialog.visible"
+      ref="formDialogRef"
+      :title="t(dialog.editing ? 'system.language.action.edit' : 'system.language.action.create')"
+      width="620px"
+      :model="formData"
+      :fields="formFields"
+      :rules="rules"
+      label-width="110px"
+      @confirm="handleSubmit"
+      @close="handleCloseDialog"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
+import type { ColumnProps, HeaderActionProps, ProTableInstance } from "@liujitcn/kratos-admin-core/components/ProTable/interface";
+import ProTable from "@liujitcn/kratos-admin-core/components/ProTable";
+import FormDialog from "@liujitcn/kratos-admin-core/components/Dialog/FormDialog.vue";
+import type { ProFormField, ProFormOption } from "@liujitcn/kratos-admin-core/components/ProForm/interface";
+import { useAuthButtons } from "@liujitcn/kratos-admin-core/auth";
+import { buildPageRequest, normalizeSelectedIds } from "@liujitcn/kratos-admin-core/table";
+import { t } from "@liujitcn/kratos-admin-core";
+import { defBaseLanguageService, invalidateEnabledBaseLanguages } from "@liujitcn/kratos-admin-system/api/system/base_language";
+import type { BaseLanguage, BaseLanguageForm, PageBaseLanguageRequest } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_language";
+import { Status } from "@liujitcn/kratos-admin-system/rpc/common/v1/enum";
+
+defineOptions({ name: "BaseLanguage", inheritAttrs: false });
+
+const { BUTTONS } = useAuthButtons();
+const proTable = ref<ProTableInstance>();
+const formDialogRef = ref<InstanceType<typeof FormDialog>>();
+const dialog = reactive({ editing: false, visible: false });
+const formData = reactive<BaseLanguageForm>({
+  id: 0,
+  language_code: "",
+  language_name: "",
+  native_name: "",
+  sort: 100,
+  is_primary: false,
+  status: Status.ENABLE
+});
+
+const rules = computed(() => ({
+  language_code: [
+    { required: true, message: t("system.language.placeholder.code"), trigger: "blur" },
+    { max: 16, message: t("system.common.validation.maxLength", { field: t("system.language.field.code"), max: 16 }), trigger: "blur" }
+  ],
+  language_name: [
+    { required: true, message: t("system.language.placeholder.name"), trigger: "blur" },
+    { max: 50, message: t("system.common.validation.maxLength", { field: t("system.language.field.name"), max: 50 }), trigger: "blur" }
+  ],
+  native_name: [
+    { required: true, message: t("system.language.placeholder.nativeName"), trigger: "blur" },
+    { max: 50, message: t("system.common.validation.maxLength", { field: t("system.language.field.nativeName"), max: 50 }), trigger: "blur" }
+  ],
+  sort: [{ required: true, message: t("system.language.placeholder.sort"), trigger: "change" }]
+}));
+
+const statusOptions = computed<ProFormOption[]>(() => [
+  { label: t("common.status.enabled"), value: Status.ENABLE },
+  { label: t("common.status.disabled"), value: Status.DISABLE }
+]);
+
+const formFields = computed<ProFormField[]>(() => [
+  { prop: "language_code", label: t("system.language.field.code"), component: "input", props: { placeholder: t("system.language.placeholder.code"), disabled: dialog.editing } },
+  { prop: "language_name", label: t("system.language.field.name"), component: "input", props: { placeholder: t("system.language.placeholder.name") } },
+  { prop: "native_name", label: t("system.language.field.nativeName"), component: "input", props: { placeholder: t("system.language.placeholder.nativeName") } },
+  { prop: "sort", label: t("system.language.field.sort"), component: "input-number", props: { min: 0, controlsPosition: "right", style: { width: "100%" } } },
+  { prop: "is_primary", label: t("system.language.field.primary"), component: "switch" },
+  { prop: "status", label: t("system.language.field.status"), component: "radio-group", options: statusOptions.value }
+]);
+
+const columns = computed<ColumnProps[]>(() => [
+  { prop: "native_name", label: t("system.language.field.nativeName"), minWidth: 130 },
+  { type: "index", label: t("system.common.field.index"), width: 70 },
+  { prop: "language_name", label: t("system.language.field.name"), minWidth: 130, search: { el: "input" } },
+  { prop: "language_code", label: t("system.language.field.code"), minWidth: 120, search: { el: "input" } },
+  {
+    prop: "is_primary",
+    label: t("system.language.field.primary"),
+    minWidth: 100,
+    cellType: "status",
+    statusProps: {
+      activeValue: true,
+      inactiveValue: false,
+      activeText: t("common.status.enabled"),
+      inactiveText: t("common.status.disabled"),
+      disabled: () => !BUTTONS.value["tool:language:update"],
+      beforeChange: scope => handleBeforeSetPrimary(scope.row as BaseLanguage)
+    }
+  },
+  {
+    prop: "status",
+    label: t("system.language.field.status"),
+    minWidth: 100,
+    search: { el: "select" },
+    cellType: "status",
+    statusProps: {
+      activeValue: Status.ENABLE,
+      inactiveValue: Status.DISABLE,
+      activeText: t("common.status.enabled"),
+      inactiveText: t("common.status.disabled"),
+      disabled: () => !BUTTONS.value["tool:language:status"],
+      beforeChange: scope => handleBeforeSetStatus(scope.row as BaseLanguage)
+    }
+  },
+  { prop: "sort", label: t("system.language.field.sort"), width: 80 },
+  { prop: "created_at", label: t("system.common.field.createdAt"), minWidth: 180 },
+  {
+    prop: "operation",
+    label: t("system.common.field.operation"),
+    width: 150,
+    fixed: "right",
+    cellType: "actions",
+    actions: [
+      { label: t("common.action.edit"), type: "primary", link: true, icon: EditPen, hidden: () => !BUTTONS.value["tool:language:update"], onClick: scope => handleOpenDialog((scope.row as BaseLanguage).id) },
+      { label: t("common.action.delete"), type: "danger", link: true, icon: Delete, hidden: () => !BUTTONS.value["tool:language:delete"], onClick: scope => handleDelete(scope.row as BaseLanguage) }
+    ]
+  }
+]);
+
+const headerActions = computed<HeaderActionProps[]>(() => [
+  { label: t("common.action.create"), type: "success", icon: CirclePlus, hidden: () => !BUTTONS.value["tool:language:create"], onClick: () => handleOpenDialog() },
+  { label: t("common.action.delete"), type: "danger", icon: Delete, hidden: () => !BUTTONS.value["tool:language:delete"], disabled: scope => !scope.selectedList.length, onClick: scope => handleDelete(scope.selectedList as BaseLanguage[]) }
+]);
+
+/** 请求语言分页列表。 */
+async function requestBaseLanguageTable(params: PageBaseLanguageRequest) {
+  const data = await defBaseLanguageService.PageBaseLanguage(buildPageRequest(params));
+  return { data: { list: data.base_languages ?? [], total: data.total } };
+}
+
+/** 打开语言编辑弹窗。 */
+async function handleOpenDialog(id?: number) {
+  resetForm();
+  dialog.editing = Boolean(id);
+  dialog.visible = true;
+  if (!id) return;
+  Object.assign(formData, await defBaseLanguageService.GetBaseLanguage({ id }));
+}
+
+/** 关闭语言编辑弹窗。 */
+function handleCloseDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+/** 重置语言表单。 */
+function resetForm() {
+  formDialogRef.value?.resetFields();
+  formDialogRef.value?.clearValidate();
+  Object.assign(formData, { id: 0, language_code: "", language_name: "", native_name: "", sort: 100, is_primary: false, status: Status.ENABLE });
+}
+
+/** 提交语言表单。 */
+function handleSubmit() {
+  formDialogRef.value?.validate()?.then(valid => {
+    if (!valid) return;
+    const payload = JSON.parse(JSON.stringify(formData)) as BaseLanguageForm;
+    const request = payload.id
+      ? defBaseLanguageService.UpdateBaseLanguage({ base_language: payload })
+      : defBaseLanguageService.CreateBaseLanguage({ base_language: payload });
+    request.then(() => {
+      invalidateEnabledBaseLanguages();
+      ElMessage.success(t(payload.id ? "system.common.message.updateSuccess" : "system.common.message.createSuccess", { resource: t("system.language.resource") }));
+      handleCloseDialog();
+      proTable.value?.getTableList();
+    });
+  });
+}
+
+/** 设置语言状态前保护主语言。 */
+function handleBeforeSetStatus(row: BaseLanguage) {
+  if (row.is_primary && row.status === Status.ENABLE) {
+    ElMessage.warning(t("system.language.message.primaryCannotDisable"));
+    return Promise.resolve(false);
+  }
+  return ElMessageBox.confirm(
+    t("system.language.message.confirmStatus", { action: row.status === Status.ENABLE ? t("common.status.disabled") : t("common.status.enabled"), name: row.native_name }),
+    t("common.title.warning"),
+    { type: "warning", confirmButtonText: t("common.action.confirm"), cancelButtonText: t("common.action.cancel") }
+  ).then(
+    () =>
+      defBaseLanguageService
+        .SetBaseLanguageStatus({ id: row.id, status: row.status === Status.ENABLE ? Status.DISABLE : Status.ENABLE })
+        .then(() => {
+          invalidateEnabledBaseLanguages();
+          return true;
+        }),
+    () => false
+  );
+}
+
+/** 设置主语言前确认切换。 */
+function handleBeforeSetPrimary(row: BaseLanguage) {
+  if (row.is_primary) return Promise.resolve(false);
+  return ElMessageBox.confirm(
+    t("system.language.message.confirmPrimary", { name: row.native_name }),
+    t("common.title.warning"),
+    { type: "warning", confirmButtonText: t("common.action.confirm"), cancelButtonText: t("common.action.cancel") }
+  ).then(
+    () =>
+      defBaseLanguageService
+        .UpdateBaseLanguage({
+          base_language: {
+            ...row,
+            is_primary: true
+          }
+        })
+        .then(() => {
+          invalidateEnabledBaseLanguages();
+          proTable.value?.getTableList();
+          return true;
+        }),
+    () => false
+  );
+}
+
+/** 删除语言，兼容单项和批量操作。 */
+function handleDelete(selected?: BaseLanguage | BaseLanguage[] | number | string | Array<number | string>) {
+  const rows = Array.isArray(selected) ? (selected.filter(item => typeof item === "object") as BaseLanguage[]) : selected && typeof selected === "object" ? [selected] : [];
+  if (rows.some(item => item.is_primary)) {
+    ElMessage.warning(t("system.language.message.primaryCannotDelete"));
+    return;
+  }
+  const ids = (rows.length ? rows.map(item => item.id) : normalizeSelectedIds(selected as number | string | Array<number | string>)).join(",");
+  if (!ids) {
+    ElMessage.warning(t("system.common.message.selectDeleteItem"));
+    return;
+  }
+  ElMessageBox.confirm(t("system.language.message.confirmDelete", { name: rows.length === 1 ? rows[0].native_name : ids }), t("common.title.warning"), {
+    type: "warning",
+    confirmButtonText: t("common.action.confirm"),
+    cancelButtonText: t("common.action.cancel")
+  }).then(() => defBaseLanguageService.DeleteBaseLanguage({ id: ids })).then(() => {
+    invalidateEnabledBaseLanguages();
+    ElMessage.success(t("system.common.message.deleteSuccess", { resource: t("system.language.resource") }));
+    proTable.value?.getTableList();
+  });
+}
+</script>

package/dist/package/src/views/tool/project-doc/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-loading="loading" class="table-box project-doc-page">
     <main class="project-doc-shell">
-      <aside class="document-navigation" aria-label="项目文档目录">
+      <aside class="document-navigation" :aria-label="t('system.projectDoc.title.navigation')">
         <header class="navigation-header">
-          <el-input v-model="keyword" clearable placeholder="搜索项目或路径" :prefix-icon="Search" />
+          <el-input v-model="keyword" clearable :placeholder="t('system.projectDoc.placeholder.search')" :prefix-icon="Search" />
           <span class="document-count">{{ filteredDocumentCount }} / {{ documents.length }}</span>
         </header>
 
@@ -29,9 +29,9 @@
               </span>
             </template>
           </el-tree>
-          <el-empty v-if="filteredDocumentCount === 0" description="暂无匹配文档" :image-size="72" />
+          <el-empty v-if="filteredDocumentCount === 0" :description="t('system.projectDoc.message.noMatch')" :image-size="72" />
         </div>
-        <el-empty v-else description="暂无项目文档" :image-size="72" />
+        <el-empty v-else :description="t('system.projectDoc.message.empty')" :image-size="72" />
       </aside>
 
       <section class="document-reader">
@@ -48,7 +48,7 @@
               </div>
             </div>
             <time v-if="selectedDocumentUpdatedAt" :datetime="selectedDocumentUpdatedAt" :title="selectedDocumentUpdatedAt">
-              更新于 {{ formatDocumentUpdatedAt(selectedDocumentUpdatedAt) }}
+              {{ t("system.projectDoc.value.updatedAt", { time: formatDocumentUpdatedAt(selectedDocumentUpdatedAt) }) }}
             </time>
           </header>
           <div ref="readerScrollRef" v-loading="detailLoading" class="reader-scroll">
@@ -62,7 +62,7 @@
             </div>
           </div>
         </template>
-        <el-empty v-else description="请选择一篇项目文档" />
+        <el-empty v-else :description="t('system.projectDoc.message.select')" />
       </section>
     </main>
   </div>
@@ -72,6 +72,7 @@
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { Search } from "@element-plus/icons-vue";
 import type { TreeNodeData } from "element-plus";
+import { getCurrentLocale, t } from "@liujitcn/kratos-admin-core";
 import MarkdownPreview from "@liujitcn/kratos-admin-core/components/MarkdownPreview/index.vue";
 import { useGlobalStore } from "@liujitcn/kratos-admin-core/stores/runtime";
 import { defProjectDocumentService } from "@liujitcn/kratos-admin-system/api/system/project_document";
@@ -121,13 +122,6 @@ const detailRequestToken = ref(0);
 const documentTreeRef = ref<InstanceType<typeof ElTree>>();
 const markdownRef = ref<HTMLElement>();
 const readerScrollRef = ref<HTMLElement>();
-const documentUpdatedAtFormatter = new Intl.DateTimeFormat("zh-CN", {
-  month: "2-digit",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit",
-  hourCycle: "h23"
-});
 const documentTree = computed<ProjectDocumentTreeNode[]>(() => projects.value.map(buildProjectTreeNode));
 const documents = computed<ProjectDocumentTreeNode[]>(() => flattenDocumentTree(documentTree.value));
 const documentPathIndex = computed(() => {
@@ -237,7 +231,7 @@ function handleMarkdownClick(event: MouseEvent) {
   const documentPath = resolveDocumentPath(selectedDocument.value.path, linkPath);
   const linkedDocument = documentPathIndex.value.get(`${selectedDocument.value.project_key}\0${documentPath}`);
   if (!linkedDocument) {
-    ElMessage.warning(`未收集引用文档：${documentPath}`);
+    ElMessage.warning(t("system.projectDoc.message.uncollected", { path: documentPath }));
     return;
   }
   void selectDocument(linkedDocument.id, decodeURIComponent(rawAnchor));
@@ -272,7 +266,15 @@ function scrollToAnchor(anchor: string) {
 function formatDocumentUpdatedAt(value: string) {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value;
-  return documentUpdatedAtFormatter.format(date).replaceAll("/", "-");
+  return new Intl.DateTimeFormat(getCurrentLocale(), {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23"
+  })
+    .format(date)
+    .replaceAll("/", "-");
 }
 
 /** 将接口项目节点转换为管理端树节点。 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liujitcn/kratos-admin-system",
   "private": false,
-  "version": "0.0.20",
+  "version": "0.0.21",
   "type": "module",
   "description": "kratos-admin system management module",
   "license": "MIT",
@@ -15,7 +15,7 @@
     "sortablejs": "^1.15.2",
     "swagger-ui-dist": "^5.32.9",
     "vue-element-plus-x": "^2.0.3",
-    "@liujitcn/kratos-admin-core": "0.0.20"
+    "@liujitcn/kratos-admin-core": "0.0.21"
   },
   "peerDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
@@ -36,6 +36,10 @@
       "types": "./dist/package/declarations/src/api/*.d.ts",
       "default": "./dist/package/src/api/*.ts"
     },
+    "./components/*": {
+      "types": "./dist/package/declarations/src/components/*.d.ts",
+      "default": "./dist/package/src/components/*"
+    },
     "./rpc/*": {
       "types": "./dist/package/declarations/src/rpc/*.d.ts",
       "default": "./dist/package/src/rpc/*.ts"