From 4093435b0ef351b25fafbd385ba8039c91f37020 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 10 Jun 2025 00:20:33 +0800
Subject: [PATCH] feat: refine i18n for dashboard widgets config form (#7511)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

#### What this PR does / why we need it:

Refine i18n for dashboard widgets config form.

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/7508

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 .../components/WidgetConfigFormModal.vue      | 25 +++++++++++---
 .../components/WidgetEditableItem.vue         |  2 +-
 .../modules/dashboard/widgets/index.ts        | 34 ++++++++++++-------
 ui/docs/extension-points/dashboard.md         |  5 ++-
 ui/packages/shared/src/types/widget.ts        |  5 ++-
 ui/src/locales/_missing_translations_es.yaml  |  4 +++
 ui/src/locales/en.yaml                        |  4 +++
 ui/src/locales/zh-CN.yaml                     |  4 +++
 ui/src/locales/zh-TW.yaml                     |  4 +++
 9 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/ui/console-src/modules/dashboard/components/WidgetConfigFormModal.vue b/ui/console-src/modules/dashboard/components/WidgetConfigFormModal.vue
index 18f3e1e28..8e882313a 100644
--- a/ui/console-src/modules/dashboard/components/WidgetConfigFormModal.vue
+++ b/ui/console-src/modules/dashboard/components/WidgetConfigFormModal.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FormKitSchemaDefinition } from "@formkit/core";
-import { VButton, VModal, VSpace } from "@halo-dev/components";
+import { VButton, VLoading, VModal, VSpace } from "@halo-dev/components";
 import type { DashboardWidgetDefinition } from "@halo-dev/console-shared";
-import { computed, toRaw, useTemplateRef } from "vue";
+import { onMounted, ref, toRaw, useTemplateRef } from "vue";
 
 const props = defineProps<{
   widgetDefinition: DashboardWidgetDefinition;
@@ -14,8 +14,24 @@ const emit = defineEmits<{
   (e: "save", config: Record<string, unknown>): void;
 }>();
 
-const formSchema = computed(() => {
-  return props.widgetDefinition.configFormKitSchema as FormKitSchemaDefinition;
+const formSchema = ref<FormKitSchemaDefinition>();
+const isLoading = ref(false);
+
+onMounted(async () => {
+  const { configFormKitSchema } = props.widgetDefinition || {};
+  const isFunction = typeof configFormKitSchema === "function";
+
+  try {
+    isLoading.value = true;
+    const schema = isFunction
+      ? await configFormKitSchema()
+      : configFormKitSchema;
+    formSchema.value = (schema || []) as FormKitSchemaDefinition;
+  } catch (e) {
+    console.error(e);
+  } finally {
+    isLoading.value = false;
+  }
 });
 
 const initialConfig =
@@ -35,6 +51,7 @@ function onSubmit(config: Record<string, unknown>) {
     @close="emit('close')"
   >
     <div>
+      <VLoading v-if="isLoading" />
       <FormKit
         v-if="formSchema"
         :id="widgetDefinition.id"
diff --git a/ui/console-src/modules/dashboard/components/WidgetEditableItem.vue b/ui/console-src/modules/dashboard/components/WidgetEditableItem.vue
index 46eb4bc02..1d92e82b1 100644
--- a/ui/console-src/modules/dashboard/components/WidgetEditableItem.vue
+++ b/ui/console-src/modules/dashboard/components/WidgetEditableItem.vue
@@ -65,7 +65,7 @@ function handleSaveConfig(config: Record<string, unknown>) {
       class="absolute z-[100] hidden h-8 right-0 top-0 rounded-tr-lg bg-gray-100 overflow-hidden group-hover/grid-item:inline-flex items-center"
     >
       <ActionButton
-        v-if="widgetDefinition?.configFormKitSchema?.length"
+        v-if="widgetDefinition?.configFormKitSchema"
         class="bg-black"
         @click="configModalVisible = true"
       >
diff --git a/ui/console-src/modules/dashboard/widgets/index.ts b/ui/console-src/modules/dashboard/widgets/index.ts
index f08db42e9..4ed2c615e 100644
--- a/ui/console-src/modules/dashboard/widgets/index.ts
+++ b/ui/console-src/modules/dashboard/widgets/index.ts
@@ -1,3 +1,4 @@
+import { i18n } from "@/locales";
 import type { DashboardWidgetDefinition } from "@halo-dev/console-shared";
 import { markRaw } from "vue";
 import CommentStatsWidget from "./presets/comments/CommentStatsWidget.vue";
@@ -16,10 +17,12 @@ export const internalWidgetDefinitions: DashboardWidgetDefinition[] = [
     id: "core:post:stats",
     component: markRaw(PostStatsWidget),
     group: "core.dashboard.widgets.groups.post",
-    configFormKitSchema: [
+    configFormKitSchema: () => [
       {
         $formkit: "checkbox",
-        label: "Enable animation",
+        label: i18n.global.t(
+          "core.dashboard.widgets.common_form.fields.enable_animation.label"
+        ),
         name: "enable_animation",
       },
     ],
@@ -37,7 +40,6 @@ export const internalWidgetDefinitions: DashboardWidgetDefinition[] = [
     id: "core:post:recent-published",
     component: markRaw(RecentPublishedWidget),
     group: "core.dashboard.widgets.groups.post",
-    configFormKitSchema: [],
     defaultConfig: {},
     defaultSize: {
       w: 6,
@@ -51,10 +53,12 @@ export const internalWidgetDefinitions: DashboardWidgetDefinition[] = [
     id: "core:singlepage:stats",
     component: markRaw(SinglePageStatsWidget),
     group: "core.dashboard.widgets.groups.page",
-    configFormKitSchema: [
+    configFormKitSchema: () => [
       {
         $formkit: "checkbox",
-        label: "Enable animation",
+        label: i18n.global.t(
+          "core.dashboard.widgets.common_form.fields.enable_animation.label"
+        ),
         name: "enable_animation",
       },
     ],
@@ -73,10 +77,12 @@ export const internalWidgetDefinitions: DashboardWidgetDefinition[] = [
     id: "core:comment:stats",
     component: markRaw(CommentStatsWidget),
     group: "core.dashboard.widgets.groups.comment",
-    configFormKitSchema: [
+    configFormKitSchema: () => [
       {
         $formkit: "checkbox",
-        label: "Enable animation",
+        label: i18n.global.t(
+          "core.dashboard.widgets.common_form.fields.enable_animation.label"
+        ),
         name: "enable_animation",
       },
     ],
@@ -95,7 +101,6 @@ export const internalWidgetDefinitions: DashboardWidgetDefinition[] = [
     id: "core:comment:pending",
     component: markRaw(PendingCommentsWidget),
     group: "core.dashboard.widgets.groups.comment",
-    configFormKitSchema: [],
     defaultConfig: {},
     defaultSize: {
       w: 6,
@@ -108,10 +113,12 @@ export const internalWidgetDefinitions: DashboardWidgetDefinition[] = [
     id: "core:user:stats",
     component: markRaw(UserStatsWidget),
     group: "core.dashboard.widgets.groups.user",
-    configFormKitSchema: [
+    configFormKitSchema: () => [
       {
         $formkit: "checkbox",
-        label: "Enable animation",
+        label: i18n.global.t(
+          "core.dashboard.widgets.common_form.fields.enable_animation.label"
+        ),
         name: "enable_animation",
       },
     ],
@@ -129,10 +136,12 @@ export const internalWidgetDefinitions: DashboardWidgetDefinition[] = [
     id: "core:view:stats",
     component: markRaw(ViewsStatsWidget),
     group: "core.dashboard.widgets.groups.other",
-    configFormKitSchema: [
+    configFormKitSchema: () => [
       {
         $formkit: "checkbox",
-        label: "Enable animation",
+        label: i18n.global.t(
+          "core.dashboard.widgets.common_form.fields.enable_animation.label"
+        ),
         name: "enable_animation",
       },
     ],
@@ -174,7 +183,6 @@ export const internalWidgetDefinitions: DashboardWidgetDefinition[] = [
     id: "core:notifications",
     component: markRaw(NotificationWidget),
     group: "core.dashboard.widgets.groups.other",
-    configFormKitSchema: [],
     defaultConfig: {},
     defaultSize: {
       w: 6,
diff --git a/ui/docs/extension-points/dashboard.md b/ui/docs/extension-points/dashboard.md
index 1969ed435..89efbb3d9 100644
--- a/ui/docs/extension-points/dashboard.md
+++ b/ui/docs/extension-points/dashboard.md
@@ -68,7 +68,10 @@ export interface DashboardWidgetDefinition {
   id: string;                                    // 小部件唯一标识符
   component: Raw<Component>;                     // 小部件 Vue 组件
   group: string;                                 // 小部件分组，用于在小部件库中分类显示
-  configFormKitSchema?: Record<string, unknown>[]; // 配置表单 FormKit 定义
+  configFormKitSchema?:
+    | Record<string, unknown>[]
+    | (() => Promise<Record<string, unknown>[]>)
+    | (() => Record<string, unknown>[]);         // 配置表单 FormKit 定义，支持异步函数
   defaultConfig?: Record<string, unknown>;       // 默认配置
   defaultSize: {                                 // 默认尺寸
     w: number;                                   // 宽度（网格单位），根据不同屏幕尺寸，网格单位不同，可参考：{ lg: 12, md: 12, sm: 6, xs: 4 }
diff --git a/ui/packages/shared/src/types/widget.ts b/ui/packages/shared/src/types/widget.ts
index 1fe18117d..c4486799a 100644
--- a/ui/packages/shared/src/types/widget.ts
+++ b/ui/packages/shared/src/types/widget.ts
@@ -27,7 +27,10 @@ export interface DashboardWidgetDefinition {
   id: string;
   component: Raw<Component>;
   group: string;
-  configFormKitSchema?: Record<string, unknown>[];
+  configFormKitSchema?:
+    | Record<string, unknown>[]
+    | (() => Promise<Record<string, unknown>[]>)
+    | (() => Record<string, unknown>[]);
   defaultConfig?: Record<string, unknown>;
   defaultSize: {
     w: number;
diff --git a/ui/src/locales/_missing_translations_es.yaml b/ui/src/locales/_missing_translations_es.yaml
index b7fe0c3a9..94f7a3b65 100644
--- a/ui/src/locales/_missing_translations_es.yaml
+++ b/ui/src/locales/_missing_translations_es.yaml
@@ -24,6 +24,10 @@ core:
       aggregate_role: Aggregate Role
   dashboard:
     widgets:
+      common_form:
+        fields:
+          enable_animation:
+            label: Enable animation
       presets:
         recent_published:
           publishTime: Publish Time {publishTime}
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index c736058b7..b2669ce2a 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -51,6 +51,10 @@ core:
     actions:
       setting: Setting
     widgets:
+      common_form:
+        fields:
+          enable_animation:
+            label: Enable animation
       groups:
         post: Post
         page: Page
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index 8dd27e471..e69a6bba6 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -120,6 +120,10 @@ core:
                 label: 部件
             toast:
               nest_warning: 不能将堆叠部件添加到堆叠部件中
+      common_form:
+        fields:
+          enable_animation:
+            label: 启用动画
   dashboard_designer:
     title: 编辑仪表盘
     actions:
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index 583dd032e..456fea0e7 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -120,6 +120,10 @@ core:
                 label: 部件
             toast:
               nest_warning: 不能將堆疊部件添加到堆疊部件中
+      common_form:
+        fields:
+          enable_animation:
+            label: 啟用動畫
   dashboard_designer:
     title: 編輯儀表盤
     actions: