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
```

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(() => {
+const formSchema = ref<FormKitSchemaDefinition>();
-  return props.widgetDefinition.configFormKitSchema as 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"

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"
       >

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,

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 }

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;

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}

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

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:

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: