update

src/locales/lang/en.ts

@@ -144,6 +144,8 @@ const msg = {
   begin: "Start",
   associateOptions: "Association Options",
   widget: "Widget",
+  nameTip:
+    "The name only supports Chinese and English, horizontal lines and underscores",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -144,6 +144,8 @@ const msg = {
   begin: "Inicio",
   associateOptions: "Opciones de asociación",
   widget: "Dispositivo pequeño",
+  nameTip:
+    "Este nombre sólo admite chino e inglés, líneas cruzadas y subrayado",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",

src/locales/lang/zh.ts

@@ -142,6 +142,7 @@ const msg = {
   begin: "开始",
   associateOptions: "关联选项",
   widget: "部件",
+  nameTip: "该名称仅支持中文和英文、横线和下划线",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/views/dashboard/configuration/Widget.vue

@@ -58,7 +58,11 @@ limitations under the License. -->
         <el-collapse-item :title="t('widgetOptions')" name="3">
           <WidgetOptions />
         </el-collapse-item>
-        <el-collapse-item :title="t('associateOptions')" name="4">
+        <el-collapse-item
+          :title="t('associateOptions')"
+          name="4"
+          v-if="hasAssociate"
+        >
           <AssociateOptions />
         </el-collapse-item>
       </el-collapse>
@@ -110,6 +114,12 @@ export default defineComponent({
     const graph = computed(() => dashboardStore.selectedGrid.graph || {});
     const title = computed(() => encodeURIComponent(widget.value.title || ""));
     const tips = computed(() => encodeURIComponent(widget.value.tips || ""));
+    const hasAssociate = computed(() =>
+      ["Bar", "Line", "Area"].includes(
+        dashboardStore.selectedGrid.graph &&
+          dashboardStore.selectedGrid.graph.type
+      )
+    );
 
     function getSource(source: unknown) {
       states.source = source;
@@ -144,6 +154,7 @@ export default defineComponent({
       graph,
       title,
       tips,
+      hasAssociate,
     };
   },
 });

src/views/dashboard/configuration/widget/AssociateOptions.vue

@@ -44,9 +44,9 @@ const widgets = computed(() => {
   const isLinear = ["Bar", "Line", "Area"].includes(
     dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type
   );
-  const isRank = ["TopList"].includes(
-    dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type
-  );
+  // const isRank = ["TopList"].includes(
+  //   dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type
+  // );
   const { widgets } = getDashboard(dashboardStore.currentDashboard);
   const items = widgets.filter(
     (d: { value: string; label: string } & LayoutConfig) => {
@@ -56,11 +56,11 @@ const widgets = computed(() => {
           d.label = d.widget.name || d.id;
           return d;
         }
-        if (isRank && d.type !== "Widget" && d.widget && d.id) {
-          d.value = d.id;
-          d.label = d.widget.name || d.id;
-          return d;
-        }
+        // if (isRank && d.type !== "Widget" && d.widget && d.id) {
+        //   d.value = d.id;
+        //   d.label = d.widget.name || d.id;
+        //   return d;
+        // }
       }
     }
   );

src/views/dashboard/configuration/widget/WidgetOptions.vue

@@ -74,11 +74,9 @@ function updateWidgetConfig(param: { [key: string]: string }) {
 function updateWidgetName(param: { [key: string]: string }) {
   const key = Object.keys(param)[0];
   const n = decodeURIComponent(param[key]);
-  const pattern = /^[A-Za-z0-9-_\u4e00-\u9fa5]{4,30}$/;
+  const pattern = /^[A-Za-z0-9-_\u4e00-\u9fa5]{1,30}$/;
   if (!pattern.test(n)) {
-    ElMessage.warning(
-      "The name only supports Chinese and English, horizontal lines and underscores"
-    );
+    ElMessage.warning(t("nameTip"));
     return;
   }
   const { widgets } = getDashboard(dashboardStore.currentDashboard);