@liujitcn/kratos-admin-system 0.0.29 → 0.0.32

package/dist/package/src/views/base/backup-management/backup-config/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="table-box">
+    <ProTable ref="proTable" row-key="id" :columns="columns" :header-actions="headerActions" :request-api="requestTable" />
+    <FormDialog
+      ref="formDialogRef"
+      v-model="dialog.visible"
+      :title="t(dialog.editing ? 'common.action.edit_resource' : 'common.action.create_resource', { resource: t('system.backup.backup.config') })"
+      :model="formData"
+      :fields="formFields"
+      :rules="formRules"
+      @confirm="handleSubmit"
+      @close="resetForm"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import ProTable from "@liujitcn/kratos-admin-core/components/ProTable";
+import FormDialog from "@liujitcn/kratos-admin-core/components/Dialog/FormDialog.vue";
+import type { ColumnProps, HeaderActionProps, ProTableInstance } from "@liujitcn/kratos-admin-core/components/ProTable/interface";
+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 { defBaseTableBackupService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_table_backup";
+import { defBaseTableSourceService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_table_source";
+import { BaseTableBackupType, type BaseTableBackupForm, type PageBaseTableBackupRequest } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_table_backup";
+import { Status } from "@liujitcn/kratos-admin-system/rpc/common/v1/enum";
+
+defineOptions({ name: "BaseTableBackupConfig", inheritAttrs: false });
+const { BUTTONS } = useAuthButtons();
+const proTable = ref<ProTableInstance>();
+const formDialogRef = ref<InstanceType<typeof FormDialog>>();
+const dialog = reactive({ visible: false, editing: false });
+const formData = reactive<BaseTableBackupForm>(defaultForm());
+const sourceOptions = ref<ProFormOption[]>([]);
+const loadingSources = ref(false);
+const backupTypeOptions = computed<ProFormOption[]>(() => [{ label: t("system.backup.backup.type.full"), value: BaseTableBackupType.BASE_TABLE_BACKUP_TYPE_FULL }]);
+const statusOptions = computed<ProFormOption[]>(() => [{ label: t("common.status.enabled"), value: Status.STATUS_ENABLE }, { label: t("common.status.disabled"), value: Status.STATUS_DISABLE }]);
+const formFields = computed<ProFormField[]>(() => [
+  { prop: "source_name", label: t("system.backup.field.source_name"), component: "select", options: sourceOptions.value, props: { loading: loadingSources.value, filterable: true, placeholder: t("system.backup.placeholder.source_name") } },
+  { prop: "backup_type", label: t("system.backup.field.backup_type"), component: "select", options: backupTypeOptions.value },
+  { prop: "oss_prefix", label: t("system.backup.field.oss_prefix"), component: "input" },
+  { prop: "retention_count", label: t("system.backup.field.retention_count"), component: "input-number", props: { min: 1, max: 1000 } },
+  { prop: "status", label: t("common.field.status"), component: "radio-group", options: statusOptions.value }
+]);
+const formRules = computed(() => ({ source_name: [{ required: true, message: t("system.backup.validation.source_name"), trigger: "change" }] }));
+const columns = computed<ColumnProps[]>(() => [
+  { type: "selection", width: 55 },
+  { prop: "source_name", label: t("system.backup.field.source_name"), minWidth: 150 },
+  { prop: "backup_type", label: t("system.backup.field.backup_type"), width: 110, render: scope => backupTypeLabel(scope.row.backup_type) },
+  { prop: "oss_prefix", label: t("system.backup.field.oss_prefix"), minWidth: 180 },
+  { prop: "retention_count", label: t("system.backup.field.retention_count"), width: 110 },
+  { prop: "status", label: t("common.field.status"), width: 100, cellType: "status", statusProps: { activeValue: Status.STATUS_ENABLE, inactiveValue: Status.STATUS_DISABLE, activeText: t("common.status.enabled"), inactiveText: t("common.status.disabled"), disabled: () => !BUTTONS.value["base:table-backup:status"], beforeChange: scope => setStatus(scope.row as BaseTableBackupForm) } },
+  { prop: "operation", label: t("common.field.operation"), width: 180, fixed: "right", cellType: "actions", actions: [{ label: t("common.action.edit"), link: true, icon: EditPen, hidden: () => !BUTTONS.value["base:table-backup:update"], onClick: scope => openDialog((scope.row as BaseTableBackupForm).id) }, { label: t("common.action.delete"), link: true, type: "danger", icon: Delete, hidden: () => !BUTTONS.value["base:table-backup:delete"], onClick: scope => remove(scope.row as BaseTableBackupForm) }] }
+]);
+const headerActions = computed<HeaderActionProps[]>(() => [{ label: t("common.action.create"), type: "primary", icon: CirclePlus, hidden: !BUTTONS.value["base:table-backup:create"], onClick: () => openDialog() }, { label: t("common.action.delete"), type: "danger", icon: Delete, hidden: !BUTTONS.value["base:table-backup:delete"], disabled: scope => !scope.isSelected, onClick: scope => remove(scope.selectedListIds as number[]) }]);
+
+/** 请求备份配置分页列表。 */
+async function requestTable(params: PageBaseTableBackupRequest) {
+  const data = await defBaseTableBackupService.PageBaseTableBackup(buildPageRequest(params));
+  return { data: { list: data.base_table_backups ?? [], total: data.total } };
+}
+function refresh() { proTable.value?.getTableList(); }
+function defaultForm(): BaseTableBackupForm { return { id: 0, source_name: "", backup_type: BaseTableBackupType.BASE_TABLE_BACKUP_TYPE_FULL, oss_prefix: "backup/database", retention_count: 7, status: Status.STATUS_ENABLE }; }
+function resetForm() { dialog.visible = false; formDialogRef.value?.resetFields(); Object.assign(formData, defaultForm()); }
+async function openDialog(id?: number) {
+  await loadSourceOptions();
+  Object.assign(formData, defaultForm());
+  dialog.editing = Boolean(id);
+  if (id) Object.assign(formData, await defBaseTableBackupService.GetBaseTableBackup({ id }));
+  if (!formData.source_name) formData.source_name = String(sourceOptions.value[0]?.value ?? "");
+  dialog.visible = true;
+}
+async function loadSourceOptions() {
+  if (sourceOptions.value.length || loadingSources.value) return;
+  loadingSources.value = true;
+  try {
+    const data = await defBaseTableSourceService.OptionBaseTableSource({});
+    sourceOptions.value = (data.value ?? []).map(value => ({ label: value, value }));
+  } finally {
+    loadingSources.value = false;
+  }
+}
+async function handleSubmit() { const valid = await formDialogRef.value?.validate(); if (!valid) return; const payload = JSON.parse(JSON.stringify(formData)) as BaseTableBackupForm; if (payload.id) await defBaseTableBackupService.UpdateBaseTableBackup({ base_table_backup: payload }); else await defBaseTableBackupService.CreateBaseTableBackup({ base_table_backup: payload }); ElMessage.success(t("common.message.save_success")); resetForm(); refresh(); }
+/** 确认并切换备份配置状态。 */
+async function setStatus(row: BaseTableBackupForm) {
+  const status = row.status === Status.STATUS_ENABLE ? Status.STATUS_DISABLE : Status.STATUS_ENABLE;
+  const action = t(status === Status.STATUS_ENABLE ? "common.status.enabled" : "common.status.disabled");
+  const name = row.source_name || `ID:${row.id}`;
+  try {
+    await ElMessageBox.confirm(
+      t("common.dialog.status_change", {
+        action,
+        resource: t("system.backup.backup.config"),
+        field: t("system.backup.field.source_name"),
+        value: name
+      }),
+      t("common.title.notice"),
+      {
+        confirmButtonText: t("common.action.confirm"),
+        cancelButtonText: t("common.action.cancel"),
+        type: "warning"
+      }
+    );
+    await defBaseTableBackupService.SetBaseTableBackupStatus({ id: row.id, status });
+    ElMessage.success(t("common.message.status_success", { action }));
+    await proTable.value?.getTableList();
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function remove(selected: number | number[] | BaseTableBackupForm) { let ids: number[]; if (Array.isArray(selected)) ids = selected.map(Number); else if (typeof selected === "object") ids = [selected.id]; else ids = normalizeSelectedIds(selected).map(Number); if (!ids.length) return; await ElMessageBox.confirm(t("common.dialog.delete_selected", { resource: t("system.backup.backup.config") }), t("common.title.warning"), { type: "warning" }); await defBaseTableBackupService.DeleteBaseTableBackup({ id: ids.join(",") }); ElMessage.success(t("common.message.delete_success", { resource: t("system.backup.backup.config") })); refresh(); }
+function backupTypeLabel(value: BaseTableBackupType) { return backupTypeOptions.value.find(item => item.value === value)?.label ?? String(value); }
+</script>

package/dist/package/src/views/base/backup-management/backup-record/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="table-box">
+    <ProTable ref="proTable" row-key="id" :columns="columns" :request-api="requestTable" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import ProTable from "@liujitcn/kratos-admin-core/components/ProTable";
+import type { ColumnProps, ProTableInstance } from "@liujitcn/kratos-admin-core/components/ProTable/interface";
+import { buildPageRequest } from "@liujitcn/kratos-admin-core/table";
+import { t } from "@liujitcn/kratos-admin-core";
+import { defBaseTableBackupRecordService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_table_backup_record";
+import { BaseTableBackupRecordStatus, type PageBaseTableBackupRecordRequest } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_table_backup_record";
+
+defineOptions({ name: "BaseTableBackupRecord", inheritAttrs: false });
+const proTable = ref<ProTableInstance>();
+const statusOptions = computed(() => [
+  { label: t("system.backup.status.running"), value: BaseTableBackupRecordStatus.BASE_TABLE_BACKUP_RECORD_STATUS_RUNNING },
+  { label: t("system.backup.status.success"), value: BaseTableBackupRecordStatus.BASE_TABLE_BACKUP_RECORD_STATUS_SUCCESS },
+  { label: t("system.backup.status.failed"), value: BaseTableBackupRecordStatus.BASE_TABLE_BACKUP_RECORD_STATUS_FAILED },
+  { label: t("system.backup.status.deleted"), value: BaseTableBackupRecordStatus.BASE_TABLE_BACKUP_RECORD_STATUS_DELETED }
+]);
+const columns = computed<ColumnProps[]>(() => [
+  { prop: "id", label: t("system.backup.field.id"), width: 90 },
+  { prop: "source_name", label: t("system.backup.field.source_name"), minWidth: 140 },
+  { prop: "database_name", label: t("system.backup.field.database_name"), minWidth: 160 },
+  { prop: "object_key", label: t("system.backup.field.object_key"), minWidth: 260 },
+  { prop: "size_bytes", label: t("system.backup.field.size_bytes"), width: 110 },
+  { prop: "status", label: t("common.field.status"), width: 110, search: { el: "select", enum: statusOptions.value }, render: scope => statusOptions.value.find(item => item.value === scope.row.status)?.label ?? String(scope.row.status) },
+  { prop: "started_at", label: t("system.backup.field.started_at"), minWidth: 170 },
+  { prop: "finished_at", label: t("system.backup.field.finished_at"), minWidth: 170 },
+  { prop: "verified_at", label: t("system.backup.field.verified_at"), minWidth: 170 }
+]);
+
+/** 请求备份记录分页列表。 */
+async function requestTable(params: PageBaseTableBackupRecordRequest) {
+  const data = await defBaseTableBackupRecordService.PageBaseTableBackupRecord(buildPageRequest(params));
+  return { data: { list: data.base_table_backup_records ?? [], total: data.total } };
+}
+</script>

package/dist/package/src/views/base/backup-management/backup-restore/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="table-box">
+    <ProTable ref="proTable" row-key="id" :columns="columns" :request-api="requestTable" />
+    <el-card class="restore-card">
+      <template #header>{{ t("system.backup.backup.restore.manual") }}</template>
+      <ProForm ref="formRef" :model="formData" :fields="formFields" :rules="formRules" label-width="160px" />
+      <el-button v-if="BUTTONS['base:table-backup-restore:execute']" type="primary" :loading="submitting" @click="submitRestore">{{ t("system.backup.action.restore") }}</el-button>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
+import ProTable from "@liujitcn/kratos-admin-core/components/ProTable";
+import ProForm from "@liujitcn/kratos-admin-core/components/ProForm/index.vue";
+import type { ColumnProps, ProTableInstance } from "@liujitcn/kratos-admin-core/components/ProTable/interface";
+import type { ProFormField, ProFormInstance, ProFormOption } from "@liujitcn/kratos-admin-core/components/ProForm/interface";
+import { buildPageRequest } from "@liujitcn/kratos-admin-core/table";
+import { useAuthButtons } from "@liujitcn/kratos-admin-core/auth";
+import { t } from "@liujitcn/kratos-admin-core";
+import { defBaseTableBackupRestoreService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_table_backup_restore";
+import { defBaseTableSourceService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_table_source";
+import { BaseTableBackupRestoreMode, BaseTableBackupRestoreStatus, type BaseTableBackupRestore } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_table_backup_restore";
+
+defineOptions({ name: "BaseTableBackupRestore", inheritAttrs: false });
+const proTable = ref<ProTableInstance>();
+const { BUTTONS } = useAuthButtons();
+const formRef = ref<ProFormInstance>();
+const submitting = ref(false);
+const sourceOptions = ref<ProFormOption[]>([]);
+const formData = reactive<BaseTableBackupRestore>({ id: 0, backup_record_id: 0, source_name: "", target_source_name: "default", target_database: "", restore_mode: BaseTableBackupRestoreMode.BASE_TABLE_BACKUP_RESTORE_MODE_VERIFY_ONLY, operator_id: 0, status: BaseTableBackupRestoreStatus.BASE_TABLE_BACKUP_RESTORE_STATUS_PENDING, error: "", started_at: "", finished_at: "" });
+const modeOptions = computed<ProFormOption[]>(() => [{ label: t("system.backup.restore.mode.verify_only"), value: BaseTableBackupRestoreMode.BASE_TABLE_BACKUP_RESTORE_MODE_VERIFY_ONLY }, { label: t("system.backup.restore.mode.full"), value: BaseTableBackupRestoreMode.BASE_TABLE_BACKUP_RESTORE_MODE_FULL }]);
+const formFields = computed<ProFormField[]>(() => [{ prop: "backup_record_id", label: t("system.backup.field.backup_record_id"), component: "input-number", props: { min: 0, precision: 0 } }, { prop: "target_source_name", label: t("system.backup.field.target_source_name"), component: "select", options: sourceOptions.value, props: { filterable: true, placeholder: t("system.backup.placeholder.source_name") } }, { prop: "target_database", label: t("system.backup.field.target_database"), component: "input" }, { prop: "restore_mode", label: t("system.backup.field.restore_mode"), component: "select", options: modeOptions.value }]);
+const formRules = computed(() => ({
+  backup_record_id: [
+    { required: true, message: t("system.backup.validation.backup_record_id"), trigger: "blur" },
+    { type: "number", min: 1, message: t("system.backup.validation.backup_record_id_positive"), trigger: "change" }
+  ],
+  target_source_name: [{ required: true, message: t("system.backup.validation.target_source_name"), trigger: "blur" }],
+  target_database: [{ required: true, message: t("system.backup.validation.target_database"), trigger: "blur" }]
+}));
+const columns = computed<ColumnProps[]>(() => [{ prop: "id", label: t("system.backup.field.id"), width: 90 }, { prop: "backup_record_id", label: t("system.backup.field.backup_record_id"), width: 130 }, { prop: "source_name", label: t("system.backup.field.source_name"), minWidth: 130 }, { prop: "target_source_name", label: t("system.backup.field.target_source_name"), minWidth: 130 }, { prop: "target_database", label: t("system.backup.field.target_database"), minWidth: 150 }, { prop: "restore_mode", label: t("system.backup.field.restore_mode"), width: 120, render: scope => modeOptions.value.find(item => item.value === scope.row.restore_mode)?.label ?? String(scope.row.restore_mode) }, { prop: "status", label: t("common.field.status"), width: 110 }, { prop: "error", label: t("system.backup.field.error"), minWidth: 220 }, { prop: "started_at", label: t("system.backup.field.started_at"), minWidth: 170 }, { prop: "finished_at", label: t("system.backup.field.finished_at"), minWidth: 170 }]);
+
+/** 请求备份恢复记录分页列表。 */
+async function requestTable(params: Record<string, unknown>) { const data = await defBaseTableBackupRestoreService.PageBaseTableBackupRestore(buildPageRequest(params)); return { data: { list: data.base_table_backup_restores ?? [], total: data.total } }; }
+/** 手工提交备份恢复请求。 */
+async function submitRestore() {
+  if (!(await formRef.value?.validate())) return;
+  if (!Number.isInteger(formData.backup_record_id) || formData.backup_record_id < 1) {
+    ElMessage.warning(t("system.backup.validation.backup_record_id_positive"));
+    return;
+  }
+  submitting.value = true;
+  try {
+    await defBaseTableBackupRestoreService.ExecuteBaseTableBackupRestore({ base_table_backup_restore: { ...formData } });
+    ElMessage.success(t("system.backup.message.restore_submitted"));
+    proTable.value?.getTableList();
+  } finally {
+    submitting.value = false;
+  }
+}
+/** 加载备份恢复可用的目标数据源。 */
+async function loadSourceOptions() { const data = await defBaseTableSourceService.OptionBaseTableSource({}); sourceOptions.value = (data.value ?? []).map(value => ({ label: value, value })); if (!sourceOptions.value.some(item => item.value === formData.target_source_name)) formData.target_source_name = String(sourceOptions.value[0]?.value ?? ""); }
+onMounted(() => void loadSourceOptions());
+</script>

package/dist/package/src/views/base/config/index.vue

@@ -30,7 +30,7 @@
         <UploadImg v-model:image-url="formData.value" upload-type="config" />
       </template>
       <template #richTextValue>
-        <WangEditor v-model:value="formData.value" />
+        <WangEditor v-model:value="formData.value" upload-type="config" />
       </template>
       <template #dictValue>
         <Dict
@@ -57,19 +57,10 @@
         />
       </template>
       <template #nameI18ns>
-        <DynamicI18nEditor
-          v-model="nameI18nValues"
-          :source="formData.name"
-          :maxlength="100"
-        />
+        <DynamicI18nEditor v-model="nameI18nValues" :source="formData.name" :maxlength="100" />
       </template>
       <template #valueI18ns>
-        <DynamicI18nEditor
-          v-model="valueI18nValues"
-          :source="formData.value"
-          :maxlength="10000"
-          multiline
-        />
+        <DynamicI18nEditor v-model="valueI18nValues" :source="formData.value" :maxlength="10000" multiline />
       </template>
     </FormDialog>
   </div>
@@ -78,18 +69,17 @@
 <script setup lang="ts">
 import { computed, h, reactive, ref } from "vue";
 import { useDebounceFn } from "@vueuse/core";
-import { ElImage, ElMessage, ElMessageBox, ElTag, ElTooltip } from "element-plus";
-import { CirclePlus, Delete, EditPen, RefreshLeft } 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 DictLabel from "@liujitcn/kratos-admin-core/components/Dict/DictLabel.vue";
+import RichTextPreview from "@liujitcn/kratos-admin-core/components/RichTextPreview/index.vue";
 import UploadImg from "@liujitcn/kratos-admin-core/components/Upload/Img.vue";
 import WangEditor from "@liujitcn/kratos-admin-core/components/WangEditor/index.vue";
 import { useAuthButtons } from "@liujitcn/kratos-admin-core/auth";
-import { defBaseConfigService } from "@liujitcn/kratos-admin-system/api/system/base_config";
-import { loadEnabledBaseLanguages } from "@liujitcn/kratos-admin-system/api/system/base_language";
+import { defBaseConfigService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_config";
+import { loadEnabledBaseLanguages } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_language";
 import type {
   BaseConfig,
   BaseConfigForm,
@@ -98,16 +88,13 @@ import type {
 import type { BaseI18n } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_i18n";
 import { BaseConfigSite } from "@liujitcn/kratos-admin-system/rpc/base/v1/config";
 import { Status } from "@liujitcn/kratos-admin-system/rpc/common/v1/enum";
-import { BaseConfigType } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_config";
+import { BaseConfigHiddenStatus, BaseConfigType } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_config";
 import { I18nTargetType } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_i18n";
 import { buildPageRequest, normalizeSelectedIds } from "@liujitcn/kratos-admin-core/table";
 import { t } from "@liujitcn/kratos-admin-core";
 import DynamicI18nEditor from "@liujitcn/kratos-admin-system/components/DynamicI18nEditor.vue";
 import DynamicI18nCell from "@liujitcn/kratos-admin-system/components/DynamicI18nCell.vue";
-import {
-  getEditableLanguageOptions,
-  type DynamicI18nValue
-} from "@liujitcn/kratos-admin-system/components/dynamicI18n";
+import { getEditableLanguageOptions, type DynamicI18nValue } from "@liujitcn/kratos-admin-system/components/dynamicI18n";
 
 /** 系统配置编辑表单状态，新增时枚举字段保持为空，避免把未知值 0 显示为下拉文本。 */
 type BaseConfigFormState = Omit<BaseConfigForm, "site" | "type"> & {
@@ -144,6 +131,8 @@ const formData = reactive<BaseConfigFormState>({
   key: "",
   /** 配置value */
   value: "",
+  /** 隐藏状态。 */
+  hidden_status: BaseConfigHiddenStatus.BASE_CONFIG_HIDDEN_STATUS_VISIBLE,
   /** 状态 */
   status: Status.STATUS_ENABLE,
   /** 配置名称非主语言翻译。 */
@@ -154,9 +143,7 @@ const formData = reactive<BaseConfigFormState>({
 
 /** 将配置值翻译记录转换为编辑器值，缺少记录时保留可编辑的空行。 */
 function normalizeConfigI18ns(targetType: I18nTargetType): DynamicI18nValue[] {
-  const records = targetType === I18nTargetType.I18N_TARGET_TYPE_BASE_CONFIG_NAME
-    ? formData.name_i18ns
-    : formData.value_i18ns;
+  const records = targetType === I18nTargetType.I18N_TARGET_TYPE_BASE_CONFIG_NAME ? formData.name_i18ns : formData.value_i18ns;
   return getEditableLanguageOptions()
     .map(item => item.value)
     .map(locale => {
@@ -259,7 +246,9 @@ const statusOptions = computed<ProFormOption[]>(() => [
 
 /** 字典类系统配置与字典编码的映射关系。 */
 const BASE_CONFIG_DICT_CODE_MAP: Record<string, string> = {
-  captchaType: "captcha_type"
+  captchaType: "captcha_type",
+  securityMfaPolicy: "security_mfa_policy",
+  securityMfaMethod: "mfa_method"
 };
 
 /** 当前字典类配置对应的字典编码，未配置映射时允许退回手动输入。 */
@@ -435,7 +424,8 @@ function renderConfigNameCell(row: BaseConfig) {
     source: row.name,
     targetType: I18nTargetType.I18N_TARGET_TYPE_BASE_CONFIG_NAME,
     targetId: row.id,
-    i18ns: row.i18ns
+    i18ns: row.i18ns,
+    editable: !!BUTTONS.value["base:config:update"]
   });
 }
 
@@ -470,7 +460,7 @@ function renderConfigValuePreview(row: BaseConfig) {
           previewSrcList: [row.value],
           previewTeleported: true,
           fit: "contain",
-          style: { width: "180px", height: "120px", borderRadius: "4px" }
+          style: { width: "180px", height: "120px", borderRadius: "var(--admin-page-radius)" }
         })
       : h("span", { class: "config-value-preview" }, t("system.base.config.message.image_missing"));
   }
@@ -490,7 +480,7 @@ function renderConfigValuePreview(row: BaseConfig) {
 
   if (row.type === BaseConfigType.BASE_CONFIG_TYPE_RICH_TEXT) {
     return row.value
-      ? h("div", { class: "config-rich-text-preview", innerHTML: row.value })
+      ? h(RichTextPreview, { class: "config-rich-text-preview", modelValue: row.value })
       : h("span", { class: "config-value-preview" }, t("system.base.config.message.rich_text_missing"));
   }
 
@@ -573,6 +563,7 @@ function resetForm() {
   formData.type = undefined;
   formData.key = "";
   formData.value = "";
+  formData.hidden_status = BaseConfigHiddenStatus.BASE_CONFIG_HIDDEN_STATUS_VISIBLE;
   formData.name_i18ns = [];
   formData.value_i18ns = [];
   formData.status = Status.STATUS_ENABLE;

package/dist/package/src/views/base/dashboard/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <main class="dashboard-page">
+    <el-skeleton v-if="loading && !overview" :rows="3" animated />
+    <template v-else>
+      <section class="metric-grid" :aria-label="t('system.dashboard.overview')">
+        <el-card
+          v-for="metric in metrics"
+          :key="metric.key"
+          :class="['metric-card', `metric-card--${metric.tone}`, 'admin-page-card']"
+        >
+          <div class="metric-content">
+            <span class="metric-label">{{ metric.label }}</span>
+            <strong class="metric-value">{{ metric.value }}</strong>
+          </div>
+          <div class="metric-icon" aria-hidden="true">
+            <el-icon><component :is="metric.icon" /></el-icon>
+          </div>
+        </el-card>
+      </section>
+
+      <section class="chart-grid">
+        <el-card class="chart-card chart-card-wide admin-page-card">
+          <template #header>{{ t("system.dashboard.login_trend") }}</template>
+          <div class="chart-wrap"><ECharts :option="loginTrendOption" height="320" /></div>
+        </el-card>
+        <el-card class="chart-card admin-page-card">
+          <template #header>{{ t("system.dashboard.login_distribution") }}</template>
+          <div class="chart-wrap"><ECharts :option="loginDistributionOption" height="320" /></div>
+        </el-card>
+        <el-card class="chart-card admin-page-card">
+          <template #header>{{ t("system.dashboard.operation_distribution") }}</template>
+          <div class="chart-wrap"><ECharts :option="operationDistributionOption" height="320" /></div>
+        </el-card>
+      </section>
+    </template>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import ECharts from "@liujitcn/kratos-admin-core/components/ECharts/index.vue";
+import { defBaseDashboardService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_dashboard";
+import type {
+  BaseDashboardDistributionItem,
+  BaseDashboardOverview,
+  BaseDashboardTrendPoint
+} from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_dashboard";
+import { t } from "@liujitcn/kratos-admin-core";
+
+const loading = ref(true);
+const overview = ref<BaseDashboardOverview>();
+const trend = ref<BaseDashboardTrendPoint[]>([]);
+const loginDistribution = ref<BaseDashboardDistributionItem[]>([]);
+const operationDistribution = ref<BaseDashboardDistributionItem[]>([]);
+
+const metrics = computed(() => [
+  { key: "users", label: t("system.dashboard.users"), value: overview.value?.user_count ?? 0, icon: User, tone: "primary" },
+  { key: "roles", label: t("system.dashboard.roles"), value: overview.value?.role_count ?? 0, icon: UserFilled, tone: "success" },
+  { key: "logins", label: t("system.dashboard.today_logins"), value: overview.value?.today_login_count ?? 0, icon: Timer, tone: "warning" },
+  { key: "operations", label: t("system.dashboard.today_operations"), value: overview.value?.today_operation_count ?? 0, icon: Operation, tone: "danger" }
+]);
+
+const loginTrendOption = computed(() => ({
+  tooltip: { trigger: "axis" as const },
+  grid: { left: 40, right: 20, top: 24, bottom: 32 },
+  xAxis: { type: "category" as const, boundaryGap: false, data: trend.value.map((item) => item.date) },
+  yAxis: { type: "value" as const, minInterval: 1 },
+  series: [{ type: "line" as const, smooth: true, data: trend.value.map((item) => item.count), areaStyle: {} }]
+}));
+
+const loginDistributionOption = computed(() => distributionOption(loginDistribution.value));
+const operationDistributionOption = computed(() => distributionOption(operationDistribution.value));
+
+async function loadDashboard() {
+  loading.value = true;
+  try {
+    const [overviewResponse, trendResponse, loginResponse, operationResponse] = await Promise.all([
+      defBaseDashboardService.GetBaseDashboardOverview({}),
+      defBaseDashboardService.GetBaseDashboardLoginTrend({ days: 7 }),
+      defBaseDashboardService.GetBaseDashboardLoginDistribution({}),
+      defBaseDashboardService.GetBaseDashboardOperationDistribution({})
+    ]);
+    overview.value = overviewResponse;
+    trend.value = trendResponse.points ?? [];
+    loginDistribution.value = loginResponse.items ?? [];
+    operationDistribution.value = operationResponse.items ?? [];
+  } catch {
+    // 请求层已展示具体错误（包括强制改密跳转），页面不再重复弹出笼统提示。
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 将审计技术枚举名转换为当前语言的展示文案。 */
+function distributionItemLabel(label: string) {
+  const mappings = [
+    ["BASE_OPERATION_ACTION_", "system.base.log.operation_action."],
+    ["BASE_LOG_RESULT_", "system.base.log.result."]
+  ];
+  const mapping = mappings.find(([prefix]) => label.startsWith(prefix));
+  if (!mapping) return label;
+  const value = label.slice(mapping[0].length).toLowerCase();
+  return value === "unspecified" ? t("common.message.unknown") : t(`${mapping[1]}${value}`);
+}
+
+/** 创建使用本地化图例的分布图配置。 */
+function distributionOption(items: BaseDashboardDistributionItem[]) {
+  return {
+    tooltip: { trigger: "item" as const },
+    legend: { bottom: 0, type: "scroll" as const },
+    series: [{ type: "pie" as const, radius: ["38%", "68%"] as [string, string], center: ["50%", "45%"] as [string, string], data: items.map((item) => ({ name: distributionItemLabel(item.label), value: item.count })) }]
+  };
+}
+
+onMounted(loadDashboard);
+</script>
+
+<style scoped>
+.dashboard-page {
+  min-width: 0;
+}
+.metric-grid,
+.chart-grid {
+  display: grid;
+  gap: 10px;
+}
+.metric-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-bottom: 10px;
+}
+.metric-card :deep(.el-card__body) {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 92px;
+}
+.metric-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+.metric-label {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+.metric-value {
+  font-size: 28px;
+  line-height: 1;
+  color: var(--el-text-color-primary);
+}
+.metric-icon {
+  display: flex;
+  flex: 0 0 48px;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  color: var(--metric-color);
+  background: var(--metric-bg);
+  border-radius: var(--admin-page-radius);
+}
+.metric-icon .el-icon {
+  font-size: 24px;
+}
+.metric-card--primary {
+  --metric-color: var(--el-color-primary);
+  --metric-bg: var(--el-color-primary-light-9);
+}
+.metric-card--success {
+  --metric-color: var(--el-color-success);
+  --metric-bg: var(--el-color-success-light-9);
+}
+.metric-card--warning {
+  --metric-color: var(--el-color-warning);
+  --metric-bg: var(--el-color-warning-light-9);
+}
+.metric-card--danger {
+  --metric-color: var(--el-color-danger);
+  --metric-bg: var(--el-color-danger-light-9);
+}
+.chart-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.chart-card-wide {
+  grid-column: 1 / -1;
+}
+.chart-wrap {
+  height: 320px;
+}
+
+@media (width <= 960px) {
+  .metric-grid,
+  .chart-grid {
+    grid-template-columns: 1fr;
+  }
+  .chart-card-wide {
+    grid-column: auto;
+  }
+}
+</style>