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 ```
2025-06-10 00:20:33 +08:00 · 2025-06-10 00:20:33 +08:00 · 4093435b0e
parent c604952914
commit 4093435b0e
9 changed files with 67 additions and 20 deletions
--- 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"
--- 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"
      >
--- 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,
--- 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 }
--- 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;
--- 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}
--- 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
--- 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:
--- 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: