@liujitcn/kratos-admin-system 0.0.52 → 0.0.54

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

@@ -113,7 +113,9 @@ async function loadParentIdFormTreeOptions(
   resolve(normalizeLazyTreeOptions((response.list ?? []) as GeneratedTreeOption[]));
 }
 
-void loadFormOptions();
+void loadFormOptions().then(options => {
+  parentIdFormOptions.value = options;
+});
 
 /** 行政区域表单字段配置。 */
 const formFields = computed<ProFormField[]>(() => [
@@ -218,7 +220,7 @@ async function loadFormOptions() {
   const parentIdFormResponse = await defBaseAreaService.OptionBaseArea({ parent_id: 0, lazy: true } as Parameters<
     typeof defBaseAreaService.OptionBaseArea
   >[0]);
-  parentIdFormOptions.value = [
+  return [
     { label: t("system.base.area.value.root"), value: 0 },
     ...normalizeLazyTreeOptions((parentIdFormResponse.list ?? []) as GeneratedTreeOption[]).filter(
       option => Number(option.value) !== 0
@@ -231,19 +233,23 @@ async function loadFormOptions() {
  */
 async function handleOpenDialog(id?: number) {
   resetForm();
-  await loadFormOptions();
   dialog.titleKey = id ? "system.base.area.action.edit" : "system.base.area.action.create";
-  dialog.visible = true;
-  if (!id) return;
-
-  const data = await defBaseAreaService.GetBaseArea({ id });
-  Object.assign(formData, data);
+  await formDialogRef.value?.open({
+    load: async () => ({
+      options: await loadFormOptions(),
+      data: id ? await defBaseAreaService.GetBaseArea({ id }) : undefined
+    }),
+    commit: ({ options, data }) => {
+      parentIdFormOptions.value = options;
+      if (data) Object.assign(formData, data);
+    }
+  });
 }
 /**
  * 关闭行政区域弹窗。
  */
 function handleCloseDialog() {
-  dialog.visible = false;
+  formDialogRef.value?.close();
   resetForm();
 }
 /**

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

@@ -83,13 +83,21 @@ function refresh() { proTable.value?.getTableList(); }
 function defaultForm(): BaseTableArchiveForm { return { id: 0, source_name: "", table_name: "", archive_mode: BaseTableArchiveMode.BASE_TABLE_ARCHIVE_MODE_INTERNAL_DATABASE, online_retention_days: 180, archive_retention_days: 3650, batch_size: 5000, delete_after_verify: false, oss_prefix: "archive", 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 defBaseTableArchiveService.GetBaseTableArchive({ id }));
-  if (!formData.source_name) formData.source_name = String(sourceOptions.value[0]?.value ?? "");
-  await loadTableOptions(formData.source_name);
-  dialog.visible = true;
+  await formDialogRef.value?.open({
+    load: async () => {
+      await loadSourceOptions();
+      const data = id ? await defBaseTableArchiveService.GetBaseTableArchive({ id }) : undefined;
+      const form = { ...defaultForm(), ...(data ?? {}) };
+      if (!form.source_name) form.source_name = String(sourceOptions.value[0]?.value ?? "");
+      const loadedTableOptions = form.source_name ? await requestTableOptions(form.source_name) : [];
+      return { form, loadedTableOptions };
+    },
+    commit: ({ form, loadedTableOptions }) => {
+      Object.assign(formData, form);
+      dialog.editing = Boolean(id);
+      tableOptions.value = loadedTableOptions;
+    }
+  });
 }
 async function loadSourceOptions() {
   if (sourceOptions.value.length || loadingSources.value) return;
@@ -107,12 +115,16 @@ async function handleSourceChange(value: string | number | boolean | undefined)
   await loadTableOptions(formData.source_name);
 }
 async function loadTableOptions(sourceName: string) {
-  tableOptions.value = [];
-  if (!sourceName) return;
+  tableOptions.value = await requestTableOptions(sourceName);
+}
+
+/** 请求指定数据源下的数据表选项。 */
+async function requestTableOptions(sourceName: string) {
+  if (!sourceName) return [];
   loadingTables.value = true;
   try {
     const data = await defBaseTableSourceService.OptionBaseTable({ source_name: sourceName });
-    tableOptions.value = (data.value ?? []).map(value => ({ label: value, value }));
+    return (data.value ?? []).map(value => ({ label: value, value }));
   } finally {
     loadingTables.value = false;
   }

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

@@ -68,12 +68,19 @@ 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;
+  await formDialogRef.value?.open({
+    load: async () => {
+      await loadSourceOptions();
+      const data = id ? await defBaseTableBackupService.GetBaseTableBackup({ id }) : undefined;
+      const form = { ...defaultForm(), ...(data ?? {}) };
+      if (!form.source_name) form.source_name = String(sourceOptions.value[0]?.value ?? "");
+      return form;
+    },
+    commit: form => {
+      Object.assign(formData, form);
+      dialog.editing = Boolean(id);
+    }
+  });
 }
 async function loadSourceOptions() {
   if (sourceOptions.value.length || loadingSources.value) return;

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

@@ -10,10 +10,11 @@
     />
 
     <ProDialog
+      ref="dialogRef"
       v-model="dialog.visible"
       class="system-config-dialog"
       :title="t(dialog.titleKey, { resource: t('system.base.config.resource') })"
-      width="min(1040px, calc(100vw - 32px))"
+      width="min(1280px, calc(100vw - 32px))"
       top="4vh"
       :confirm-loading="saving"
       @confirm="handleSubmit"
@@ -32,6 +33,7 @@
             :rules="rules"
             :col-span="12"
             :gutter="24"
+            label-width="10em"
             label-position="right"
             scroll-to-error
           >
@@ -96,6 +98,7 @@
                 :fields="localizedFormFields"
                 :col-span="12"
                 :gutter="24"
+                label-width="10em"
                 label-position="right"
                 scroll-to-error
               />
@@ -160,6 +163,7 @@ defineOptions({
 
 const { BUTTONS } = useAuthButtons();
 const proTable = ref<ProTableInstance>();
+const dialogRef = ref<InstanceType<typeof ProDialog>>();
 const basicFormRef = ref<ProFormInstance>();
 const activeTab = ref("basic");
 
@@ -635,29 +639,48 @@ function refreshTable() {
  * 打开系统配置弹窗。
  */
 async function handleOpenDialog(configId?: number) {
-  await loadEnabledBaseLanguages();
   resetForm();
   dialog.titleKey = configId ? "common.action.edit_resource" : "common.action.create_resource";
-  if (configId) {
-    Object.assign(formData, await defBaseConfigService.GetBaseConfig({ id: configId }));
-    if (formData.type === BaseConfigType.BASE_CONFIG_TYPE_FORM) {
-      loadFormValue(formData.value);
+  await dialogRef.value?.open({
+    load: async () => ({
+      data: configId ? await defBaseConfigService.GetBaseConfig({ id: configId }) : undefined,
+      languages: await loadEnabledBaseLanguages()
+    }),
+    commit: ({ data }) => {
+      if (data) {
+        Object.assign(formData, data);
+        if (formData.type === BaseConfigType.BASE_CONFIG_TYPE_FORM) loadFormValue(formData.value);
+      }
+      activeTab.value = configId && formData.type === BaseConfigType.BASE_CONFIG_TYPE_FORM ? "form" : "basic";
     }
-  }
-  activeTab.value = configId && formData.type === BaseConfigType.BASE_CONFIG_TYPE_FORM ? "form" : "basic";
-  dialog.visible = true;
+  });
 }
 
 /** 按注册定义创建独立模型，并用已保存的配置值覆盖默认值。 */
 function loadFormValue(value?: string) {
   const definition = formDefinition.value;
+  const parsed = value ? parseJSONValue(value) : {};
   formValue.value =
-    formData.type === BaseConfigType.BASE_CONFIG_TYPE_FORM && definition
-      ? Object.assign(definition.createModel(), value ? JSON.parse(value) : {})
-      : {};
+    formData.type === BaseConfigType.BASE_CONFIG_TYPE_FORM && definition && isJSONObject(parsed)
+      ? Object.assign(definition.createModel(), parsed)
+      : definition?.createModel() ?? {};
   valueFormRef.value?.clearValidate();
 }
 
+/** 安全解析运行配置 JSON，脏数据回退到表单默认模型。 */
+function parseJSONValue(value: string): unknown {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return undefined;
+  }
+}
+
+/** 判断运行配置 JSON 是否为可合并对象。 */
+function isJSONObject(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+
 /** 按字段声明恢复运行配置提交值的 JSON 类型。 */
 function normalizeRuntimeConfigValue() {
   if (!formDefinition.value) return;
@@ -669,7 +692,8 @@ function normalizeRuntimeConfigValue() {
     } else if (field.valueType === "boolean" && typeof value === "string") {
       setRuntimeConfigFieldValue(field.prop, value === "true");
     } else if (field.valueType === "json" && typeof value === "string" && value !== "") {
-      setRuntimeConfigFieldValue(field.prop, JSON.parse(value));
+      const parsed = parseJSONValue(value);
+      if (parsed !== undefined) setRuntimeConfigFieldValue(field.prop, parsed);
     }
   }
 }
@@ -690,7 +714,7 @@ function setRuntimeConfigFieldValue(prop: string, value: unknown) {
  * 关闭系统配置弹窗并恢复默认表单值。
  */
 function handleCloseDialog() {
-  dialog.visible = false;
+  dialogRef.value?.close();
   resetForm();
 }
 

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

@@ -8,28 +8,42 @@
           :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 class="metric-top">
+            <span class="metric-label">{{ metric.label }}</span
+            ><span class="metric-icon"
+              ><el-icon><component :is="metric.icon" /></el-icon
+            ></span>
           </div>
+          <strong class="metric-value">{{ metric.value }}</strong>
         </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>
+          <template #header
+            ><div class="chart-heading">
+              <span>{{ t("system.dashboard.login_trend") }}</span
+              ><small>近 7 天</small>
+            </div></template
+          >
+          <div class="chart-wrap"><ECharts :option="loginTrendOption" height="285" /></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>
+          <template #header
+            ><div class="chart-heading">
+              <span>{{ t("system.dashboard.login_distribution") }}</span
+              ><small>总计 {{ loginDistributionTotal }}</small>
+            </div></template
+          >
+          <div class="chart-wrap"><ECharts :option="loginDistributionOption" height="265" /></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>
+          <template #header
+            ><div class="chart-heading">
+              <span>{{ t("system.dashboard.operation_distribution") }}</span
+              ><small>总计 {{ operationDistributionTotal }}</small>
+            </div></template
+          >
+          <div class="chart-wrap"><ECharts :option="operationDistributionOption" height="265" /></div>
         </el-card>
       </section>
     </template>
@@ -37,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, onBeforeUnmount, 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 {
@@ -52,25 +66,84 @@ const overview = ref<BaseDashboardOverview>();
 const trend = ref<BaseDashboardTrendPoint[]>([]);
 const loginDistribution = ref<BaseDashboardDistributionItem[]>([]);
 const operationDistribution = ref<BaseDashboardDistributionItem[]>([]);
-
+const chartTheme = ref({
+  primary: "#409eff",
+  success: "#67c23a",
+  warning: "#e6a23c",
+  info: "#909399",
+  danger: "#f56c6c",
+  text: "#606266",
+  divider: "#e4e7ed",
+  background: "#ffffff"
+});
 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" }
+  {
+    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 loginDistributionTotal = computed(() => loginDistribution.value.reduce((total, item) => total + item.count, 0));
+const operationDistributionTotal = computed(() => operationDistribution.value.reduce((total, item) => total + item.count, 0));
 
+function readThemeColor(name: string, fallback: string) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+function refreshChartTheme() {
+  chartTheme.value = {
+    primary: readThemeColor("--el-color-primary", "#409eff"),
+    success: readThemeColor("--el-color-success", "#67c23a"),
+    warning: readThemeColor("--el-color-warning", "#e6a23c"),
+    info: readThemeColor("--el-color-info", "#909399"),
+    danger: readThemeColor("--el-color-danger", "#f56c6c"),
+    text: readThemeColor("--el-text-color-secondary", "#606266"),
+    divider: readThemeColor("--el-border-color-lighter", "#e4e7ed"),
+    background: readThemeColor("--el-bg-color", "#ffffff")
+  };
+}
 const loginTrendOption = computed(() => ({
+  color: [chartTheme.value.primary],
   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: {} }]
+  grid: { left: 42, right: 20, top: 20, bottom: 28 },
+  xAxis: {
+    type: "category" as const,
+    boundaryGap: false,
+    data: trend.value.map(item => item.date),
+    axisLine: { lineStyle: { color: chartTheme.value.divider } },
+    axisLabel: { color: chartTheme.value.text }
+  },
+  yAxis: {
+    type: "value" as const,
+    minInterval: 1,
+    splitLine: { lineStyle: { color: chartTheme.value.divider } },
+    axisLabel: { color: chartTheme.value.text }
+  },
+  series: [
+    {
+      type: "line" as const,
+      smooth: true,
+      data: trend.value.map(item => item.count),
+      symbol: "circle",
+      symbolSize: 7,
+      lineStyle: { width: 3, color: chartTheme.value.primary },
+      itemStyle: { color: chartTheme.value.primary, borderWidth: 2, borderColor: chartTheme.value.background },
+      areaStyle: { color: chartTheme.value.primary, opacity: 0.12 }
+    }
+  ]
 }));
-
 const loginDistributionOption = computed(() => distributionOption(loginDistribution.value));
 const operationDistributionOption = computed(() => distributionOption(operationDistribution.value));
-
 async function loadDashboard() {
   loading.value = true;
   try {
@@ -85,12 +158,11 @@ async function loadDashboard() {
     loginDistribution.value = loginResponse.items ?? [];
     operationDistribution.value = operationResponse.items ?? [];
   } catch {
-    // 请求层已展示具体错误（包括强制改密跳转），页面不再重复弹出笼统提示。
+    /* 请求层已展示具体错误。 */
   } finally {
     loading.value = false;
   }
 }
-
 /** 将审计技术枚举名转换为当前语言的展示文案。 */
 function distributionItemLabel(label: string) {
   const mappings = [
@@ -102,67 +174,109 @@ function distributionItemLabel(label: string) {
   const value = label.slice(mapping[0].length).toLowerCase();
   return value === "unspecified" ? t("common.message.unknown") : t(`${mapping[1]}${value}`);
 }
-
 /** 创建使用本地化图例的分布图配置。 */
 function distributionOption(items: BaseDashboardDistributionItem[]) {
   return {
+    color: [
+      chartTheme.value.primary,
+      chartTheme.value.success,
+      chartTheme.value.info,
+      chartTheme.value.warning,
+      chartTheme.value.danger
+    ],
     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 })) }]
+    legend: { bottom: 0, type: "scroll" as const, textStyle: { color: chartTheme.value.text } },
+    series: [
+      {
+        type: "pie" as const,
+        radius: ["55%", "76%"] as [string, string],
+        center: ["50%", "43%"] as [string, string],
+        label: { color: chartTheme.value.text },
+        itemStyle: { borderColor: chartTheme.value.background, borderWidth: 3 },
+        data: items.map(item => ({ name: distributionItemLabel(item.label), value: item.count }))
+      }
+    ]
   };
 }
-
-onMounted(loadDashboard);
+onMounted(() => {
+  refreshChartTheme();
+  loadDashboard();
+  window.addEventListener("theme-change", refreshChartTheme);
+});
+onBeforeUnmount(() => window.removeEventListener("theme-change", refreshChartTheme));
 </script>
 
 <style scoped>
 .dashboard-page {
   min-width: 0;
 }
+.dashboard-heading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 22px;
+}
+.dashboard-eyebrow {
+  display: block;
+  color: var(--admin-page-text-placeholder);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+}
+.dashboard-heading h1 {
+  margin: 6px 0 0;
+  color: var(--admin-page-text-primary);
+  font-size: 26px;
+  line-height: 1.2;
+}
+.dashboard-updated {
+  color: var(--admin-page-text-placeholder);
+  font-size: 12px;
+}
 .metric-grid,
 .chart-grid {
   display: grid;
-  gap: 10px;
+  gap: 16px;
 }
 .metric-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  margin-bottom: 10px;
+  margin-bottom: 16px;
+}
+.metric-card {
+  position: relative;
+  overflow: hidden;
 }
 .metric-card :deep(.el-card__body) {
+  min-height: 124px;
+  padding: 18px 20px 16px;
+}
+.metric-top {
   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 {
+  color: var(--admin-page-text-secondary);
   font-size: 13px;
-  color: var(--el-text-color-secondary);
 }
 .metric-value {
-  font-size: 28px;
+  display: block;
+  margin-top: 18px;
+  color: var(--admin-page-text-primary);
+  font-size: 32px;
   line-height: 1;
-  color: var(--el-text-color-primary);
+  font-variant-numeric: tabular-nums;
 }
 .metric-icon {
-  display: flex;
-  flex: 0 0 48px;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 10px;
   color: var(--metric-color);
   background: var(--metric-bg);
-  border-radius: var(--admin-page-radius);
 }
 .metric-icon .el-icon {
-  font-size: 24px;
+  font-size: 17px;
 }
 .metric-card--primary {
   --metric-color: var(--el-color-primary);
@@ -186,11 +300,45 @@ onMounted(loadDashboard);
 .chart-card-wide {
   grid-column: 1 / -1;
 }
+.chart-card :deep(.el-card__header) {
+  padding: 17px 22px 14px;
+  border-bottom-color: var(--admin-page-divider);
+}
+.chart-card :deep(.el-card__body) {
+  padding: 0 20px 16px;
+}
+.chart-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.chart-heading span {
+  color: var(--admin-page-text-primary);
+  font-size: 16px;
+  font-weight: 600;
+}
+.chart-heading small {
+  color: var(--admin-page-text-placeholder);
+  font-size: 12px;
+  font-weight: 400;
+}
 .chart-wrap {
-  height: 320px;
+  height: 285px;
+}
+.chart-card:not(.chart-card-wide) .chart-wrap {
+  height: 265px;
 }
-
 @media (width <= 960px) {
+  .metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (width <= 640px) {
+  .dashboard-heading {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
   .metric-grid,
   .chart-grid {
     grid-template-columns: 1fr;