@liujitcn/kratos-admin-system 0.0.26 → 0.0.28

package/dist/package/src/views/tool/code-gen/proto/index.vue

@@ -87,7 +87,7 @@
     <ProDialog
       v-model="configDialog.visible"
       :title="configDialogTitle"
-      width="min(520px, calc(100vw - 32px))"
+      width="520px"
       destroy-on-close
       :show-close="false"
       :close-on-click-modal="false"
@@ -599,7 +599,6 @@ onMounted(() => {
   border-radius: var(--admin-page-radius);
   box-shadow: var(--admin-page-shadow);
 }
-
 .code-gen-config-dialog__header {
   display: flex;
   gap: 12px;
@@ -607,7 +606,6 @@ onMounted(() => {
   justify-content: space-between;
   width: 100%;
 }
-
 :deep(.code-gen-toolbar) {
   display: flex;
   flex-wrap: wrap;
@@ -667,6 +665,7 @@ onMounted(() => {
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
+
   /* 多行单元格与列标题保持居中，避免文本继承居中而 Flex 子项贴左。 */
   justify-content: center;
   min-width: 0;
@@ -693,14 +692,14 @@ onMounted(() => {
   flex-direction: column;
   gap: 2px;
   min-width: 0;
-  cursor: pointer;
   text-align: left;
+  cursor: pointer;
 }
 .code-gen-proto-capability-trigger__comment {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--admin-page-text-primary);
+  white-space: nowrap;
 }
 .code-gen-proto-capability-popover {
   display: flex;
@@ -709,8 +708,8 @@ onMounted(() => {
 }
 .code-gen-proto-capability-popover__preview {
   max-width: 100%;
-  margin: 0;
   padding: 10px;
+  margin: 0;
   overflow-x: auto;
   font-size: 12px;
   line-height: 18px;
@@ -730,8 +729,8 @@ onMounted(() => {
 }
 .code-gen-proto-capability-popover__item code {
   min-width: 0;
-  overflow-wrap: anywhere;
   color: var(--admin-page-text-primary);
+  overflow-wrap: anywhere;
 }
 .code-gen-proto-capability-popover__item .code-gen-proto-capability-popover__path {
   display: block;
@@ -742,8 +741,8 @@ onMounted(() => {
 }
 .code-gen-proto-capability-popover__value {
   min-width: 0;
-  overflow-wrap: anywhere;
   color: var(--admin-page-text-primary);
+  overflow-wrap: anywhere;
 }
 .code-gen-proto-config-form :deep(.el-select) {
   width: 100%;

package/dist/package/src/views/tool/code-gen/table/index.vue

@@ -15,7 +15,8 @@
       v-model="dialog.visible"
       ref="formDialogRef"
       :title="dialogTitle"
-      width="min(920px, calc(100vw - 32px))"
+      width="920px"
+      label-width="240px"
       top="4vh"
       :model="formData"
       :fields="formFields"
@@ -587,6 +588,38 @@ async function handleGenerate(selected: CodeGenGenerateTarget) {
     ElMessage.warning(t("system.code.gen.table.message.disabled", { name: disabledTable.name }));
     return;
   }
+  generating.value = true;
+  let missingTranslations: string[] = [];
+  try {
+    const previewEntries = await Promise.all(
+      tables.map(async table => ({
+        table,
+        preview: await defCodeGenService.PreviewCodeGen({ table_id: table.id, output_paths: undefined })
+      }))
+    );
+    missingTranslations = previewEntries.flatMap(({ table, preview }) =>
+      (preview.missing_translations ?? []).map(item => (tables.length === 1 ? item : `${table.name}: ${item}`))
+    );
+  } finally {
+    generating.value = false;
+  }
+  if (missingTranslations.length) {
+    try {
+      await ElMessageBox.alert(
+        t("system.code.gen.preview.message.missing_translations", {
+          items: missingTranslations.join(t("system.code.gen.preview.value.list_separator"))
+        }),
+        t("common.title.warning"),
+        {
+          confirmButtonText: t("common.action.close"),
+          type: "warning"
+        }
+      );
+    } catch {
+      // 关闭提示框与点击关闭按钮语义一致。
+    }
+    return;
+  }
   const message =
     tables.length === 1
       ? t("system.code.gen.table.dialog.generate_one", { name: tables[0].name })
@@ -936,7 +969,6 @@ function ensureLeftTreeConfig() {
 /* 固定操作列表头与普通表头使用同一主题背景，并保持行内操作单行展示。 */
 :deep(.code-gen-table) {
   --el-table-header-bg-color: var(--el-fill-color-light);
-
   td.el-table-fixed-column--right .cell {
     white-space: nowrap;
   }

package/dist/package/src/views/tool/ops-monitoring/index.vue

@@ -189,10 +189,22 @@
             <code>{{ node.name }}</code>
             <div class="ops-node-meters">
               <div v-for="metric in node.metrics" :key="metric.label" class="ops-meter">
-                <span>{{ metric.label }}</span
-                ><el-progress :percentage="metric.value" :show-text="false" :color="metric.color" /><strong
-                  >{{ metric.value }}%</strong
-                >
+                <div class="ops-meter-head">
+                  <span class="ops-meter-label">{{ metric.label }}</span>
+                  <span class="ops-meter-stats">
+                    <span>
+                      {{ t("system.ops_monitoring.node_metric.current") }} {{ metric.usedLabel }} /
+                      {{ t("system.ops_monitoring.node_metric.total") }} {{ metric.totalLabel }}
+                    </span>
+                    <strong>{{ metric.percentageLabel }}</strong>
+                  </span>
+                </div>
+                <el-progress
+                  :percentage="metric.percentage"
+                  :show-text="false"
+                  :stroke-width="10"
+                  :color="metric.color"
+                />
               </div>
             </div>
           </div>
@@ -225,15 +237,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { computed, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref } from "vue";
 import { defOpsMonitoringService } from "@liujitcn/kratos-admin-system/api/system/ops_monitoring";
-import {
-  subscribeOpsMonitoringNodes,
-  subscribeOpsMonitoringServices,
-  subscribeOpsMonitoringStorage,
-  subscribeOpsMonitoringTraffic,
-  type OpsMonitoringSseStop
-} from "@liujitcn/kratos-admin-system/api/system/ops_monitoring_sse";
 import { getCurrentLocale, t } from "@liujitcn/kratos-admin-core";
 import type {
   OpsAlert,
@@ -285,12 +290,28 @@ interface EndpointItem {
   healthy: boolean;
 }
 
-/** 实例资源指标。 */
+/** 实例资源单项指标。 */
+interface NodeMetricItem {
+  /** 指标名称。 */
+  label: string;
+  /** 指标使用百分比。 */
+  percentage: number;
+  /** 两位小数百分比。 */
+  percentageLabel: string;
+  /** 当前已用容量。 */
+  usedLabel: string;
+  /** 总容量。 */
+  totalLabel: string;
+  /** 进度条颜色。 */
+  color: string;
+}
+
+/** 实例资源信息。 */
 interface NodeItem {
   /** 实例名称。 */
   name: string;
   /** 实例资源指标。 */
-  metrics: Array<{ label: string; value: number; color: string }>;
+  metrics: NodeMetricItem[];
 }
 
 /** 折线图中的流量趋势点。 */
@@ -341,6 +362,12 @@ const alerts = ref<OpsAlertsResponse>();
 const windowMinutes = ref(15);
 const lastCollectedAt = ref("");
 const trendGridLines = [16, 62, 108, 154, 198];
+const nodeMetricLabelKeys: Record<string, string> = {
+  堆内存: "system.ops_monitoring.node_metric.heap_memory",
+  内存: "system.ops_monitoring.node_metric.memory",
+  硬盘: "system.ops_monitoring.node_metric.disk"
+};
+const byteUnits = ["B", "KB", "MB", "GB", "TB", "PB"];
 const trafficSummary = computed(() => traffic.value?.traffic);
 
 const kpiItems = computed<KpiItem[]>(() => [
@@ -438,7 +465,9 @@ const alertItems = computed(() => (alerts.value?.alerts ?? []).map(mapAlert));
 const serviceCount = computed(() => availabilityItems.value.length);
 const onlineCount = computed(() => availabilityItems.value.filter(item => item.tone === "ok").length);
 
-let sseStops: OpsMonitoringSseStop[] = [];
+let monitoringTimer: number | undefined;
+let monitoringActive = false;
+let monitoringRun = 0;
 
 async function loadMonitoring() {
   loading.value = true;
@@ -495,18 +524,23 @@ function updateCollectedAt(value?: string) {
   if (value) lastCollectedAt.value = value;
 }
 
-function subscribeRealtime() {
-  sseStops = [
-    subscribeOpsMonitoringTraffic(setTraffic),
-    subscribeOpsMonitoringServices(setServices),
-    subscribeOpsMonitoringStorage(setStorage),
-    subscribeOpsMonitoringNodes(setNodes)
-  ];
+async function startMonitoring() {
+  if (monitoringActive) return;
+  monitoringActive = true;
+  const run = ++monitoringRun;
+  await loadMonitoring();
+  if (!monitoringActive || run !== monitoringRun) return;
+  monitoringTimer = window.setInterval(() => {
+    if (!loading.value) void loadMonitoring();
+  }, 5000);
 }
 
-function stopRealtime() {
-  sseStops.forEach(stop => stop());
-  sseStops = [];
+function stopMonitoring() {
+  monitoringActive = false;
+  monitoringRun += 1;
+  if (monitoringTimer === undefined) return;
+  window.clearInterval(monitoringTimer);
+  monitoringTimer = undefined;
 }
 
 function formatNumber(value?: number) {
@@ -579,14 +613,46 @@ function mapEndpoint(endpoint: OpsEndpoint): EndpointItem {
 function mapNode(node: OpsNode): NodeItem {
   return {
     name: node.name,
-    metrics: (node.metrics ?? []).map(metric => ({
-      label: metric.label,
-      value: Math.max(0, Math.min(metric.value, 100)),
-      color: metric.value >= 70 ? "var(--el-color-warning)" : "var(--el-color-primary)"
-    }))
+    metrics: (node.metrics ?? []).map(metric => {
+      const percentage = Math.max(0, Math.min(metric.value, 100));
+      return {
+        label: translateNodeMetricLabel(metric.label),
+        percentage,
+        percentageLabel: `${formatFixedNumber(percentage)}%`,
+        usedLabel: formatBytes(metric.used_bytes),
+        totalLabel: formatBytes(metric.total_bytes),
+        color: percentage >= 70 ? "var(--el-color-warning)" : "var(--el-color-primary)"
+      };
+    })
   };
 }
 
+/** 将字节数格式化为保留两位小数的可读容量。 */
+function formatBytes(value: number) {
+  if (!Number.isFinite(value) || value < 0) return "--";
+  let unitIndex = 0;
+  let displayValue = value;
+  while (displayValue >= 1024 && unitIndex < byteUnits.length - 1) {
+    displayValue /= 1024;
+    unitIndex += 1;
+  }
+  return `${formatFixedNumber(displayValue)} ${byteUnits[unitIndex]}`;
+}
+
+/** 将数值格式化为固定两位小数。 */
+function formatFixedNumber(value: number) {
+  return new Intl.NumberFormat(getCurrentLocale(), {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value);
+}
+
+/** 翻译实例资源指标名称，未知指标保留后端原值。 */
+function translateNodeMetricLabel(label: string) {
+  const localeKey = nodeMetricLabelKeys[label];
+  return localeKey ? t(localeKey) : label;
+}
+
 function mapAlert(alert: OpsAlert) {
   return {
     title: alert.title,
@@ -596,12 +662,10 @@ function mapAlert(alert: OpsAlert) {
   };
 }
 
-onMounted(async () => {
-  await loadMonitoring();
-  subscribeRealtime();
-});
-
-onBeforeUnmount(stopRealtime);
+onMounted(startMonitoring);
+onActivated(startMonitoring);
+onDeactivated(stopMonitoring);
+onBeforeUnmount(stopMonitoring);
 </script>
 
 <style scoped lang="scss">
@@ -656,6 +720,7 @@ onBeforeUnmount(stopRealtime);
 .ops-panel,
 .ops-storage-card,
 .ops-alert-panel {
+  min-width: 0;
   background: var(--ops-card-bg);
   border: 1px solid var(--ops-card-border);
   border-radius: var(--admin-page-radius);
@@ -936,7 +1001,7 @@ onBeforeUnmount(stopRealtime);
   margin-bottom: 12px;
 }
 .ops-storage-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
 }
 .ops-storage-card {
   min-width: 0;
@@ -1042,37 +1107,70 @@ onBeforeUnmount(stopRealtime);
 .ops-node-list {
   display: grid;
   gap: 16px;
+  min-width: 0;
   padding-top: 3px;
 }
 .ops-node-row {
   display: grid;
-  grid-template-columns: 95px minmax(0, 1fr);
-  gap: 10px;
-  align-items: center;
+  grid-template-columns: minmax(110px, 0.24fr) minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+  min-width: 0;
 }
 .ops-node-row > code {
+  overflow: hidden;
   font-family: var(--el-font-family-monospace);
   font-size: 11px;
   color: var(--ops-text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .ops-node-meters {
   display: grid;
-  gap: 7px;
+  gap: 13px;
+  min-width: 0;
 }
 .ops-meter {
   display: grid;
-  grid-template-columns: 34px minmax(0, 1fr) 35px;
   gap: 7px;
-  align-items: center;
-  font-size: 10px;
+  min-width: 0;
+  font-size: 11px;
   color: var(--ops-text-placeholder);
 }
-.ops-meter strong {
-  font-size: 11px;
-  font-weight: 500;
+.ops-meter-head,
+.ops-meter-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+}
+.ops-meter-label {
+  flex: none;
+  font-weight: 600;
   color: var(--ops-text-secondary);
+}
+.ops-meter-stats {
+  flex: 1;
+  justify-content: flex-end;
   text-align: right;
 }
+.ops-meter-stats > span {
+  overflow-wrap: anywhere;
+}
+.ops-meter-stats strong {
+  flex: none;
+  font-size: 11px;
+  font-weight: 650;
+  color: var(--ops-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.ops-meter :deep(.el-progress),
+.ops-meter :deep(.el-progress-bar) {
+  min-width: 0;
+  width: 100%;
+}
 .ops-alert-panel {
   margin-bottom: 0;
 }
@@ -1127,6 +1225,7 @@ onBeforeUnmount(stopRealtime);
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .ops-primary-grid,
+  .ops-storage-grid,
   .ops-secondary-grid {
     grid-template-columns: 1fr;
   }
@@ -1161,8 +1260,13 @@ onBeforeUnmount(stopRealtime);
     margin-left: 54px;
   }
   .ops-node-row {
-    grid-template-columns: 82px minmax(0, 1fr);
-    gap: 7px;
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  .ops-meter-stats {
+    flex-basis: 100%;
+    justify-content: flex-start;
+    text-align: left;
   }
   .ops-alert-row {
     grid-template-columns: 8px minmax(0, 1fr);

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

@@ -72,7 +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 { getCurrentLocale, t, useLocaleStore } 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";
@@ -112,6 +112,7 @@ interface ProjectDocumentTreeNode {
 }
 
 const globalStore = useGlobalStore();
+const { locale } = useLocaleStore();
 const loading = ref(false);
 const detailLoading = ref(false);
 const keyword = ref("");
@@ -137,11 +138,11 @@ const filteredDocumentCount = computed(() => {
   const search = keyword.value.trim().toLocaleLowerCase();
   if (!search) return documents.value.length;
   return documents.value.filter(node =>
-    [node.projectKey, node.projectName, node.path].some(value => value.toLocaleLowerCase().includes(search))
+    [node.label, node.projectKey, node.projectName, node.path].some(value => value.toLocaleLowerCase().includes(search))
   ).length;
 });
 const selectedDocumentNodeKey = computed(() => (selectedDocumentId.value ? buildDocumentNodeKey(selectedDocumentId.value) : ""));
-const selectedDocumentName = computed(() => selectedDocument.value?.path.split("/").at(-1) ?? "");
+const selectedDocumentName = computed(() => selectedDocument.value?.name ?? "");
 const selectedDocumentUpdatedAt = computed(
   () => documents.value.find(node => node.document?.id === selectedDocumentId.value)?.document?.updated_at ?? ""
 );
@@ -321,7 +322,7 @@ function buildDocumentTreeNode(
 ): ProjectDocumentTreeNode {
   return {
     key: buildDocumentNodeKey(document.id),
-    label: document.path.split("/").at(-1) ?? document.path,
+    label: document.name,
     kind: "document",
     projectKey,
     projectName,
@@ -352,6 +353,10 @@ watch(keyword, value => {
   documentTreeRef.value?.filter(value);
 });
 
+watch(locale, () => {
+  void loadDocuments();
+});
+
 onMounted(() => {
   void loadDocuments();
 });