feat: titleCase for sidebar、table column title、card title and segment…

… switcher Signed-off-by: warjiang <[email protected]>
karmada-io · Jan 18, 2025 · a645653 · a645653
1 parent 926ab84
commit a645653
Show file tree

Hide file tree

Showing 12 changed files with 342 additions and 165 deletions.
diff --git a/ui/apps/dashboard/src/pages/cluster-manage/index.tsx b/ui/apps/dashboard/src/pages/cluster-manage/index.tsx
@@ -1,4 +1,4 @@
-import i18nInstance from '@/utils/i18n';
+import i18nInstance, { titleCase } from '@/utils/i18n';
 import Panel from '@/components/panel';
 import { useQuery } from '@tanstack/react-query';
 import { GetClusters } from '@/services';
@@ -54,7 +54,9 @@ const ClusterManagePage = () => {
   });
   const columns: TableColumnProps<Cluster>[] = [
     {
-      title: i18nInstance.t('c3f28b34bbdec501802fa403584267e6', '集群名称'),
+      title: titleCase(
+        i18nInstance.t('c3f28b34bbdec501802fa403584267e6', '集群名称'),
+      ),
       key: 'clusterName',
       width: 150,
       render: (_, r) => {
@@ -63,17 +65,18 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t(
-        'bd17297989ec345cbc03ae0b8a13dc0a',
-        'kubernetes版本',
+      title: titleCase(
+        i18nInstance.t('bd17297989ec345cbc03ae0b8a13dc0a', 'kubernetes版本'),
       ),
       dataIndex: 'kubernetesVersion',
       key: 'kubernetesVersion',
       width: 150,
       align: 'center',
     },
     {
-      title: i18nInstance.t('ee00813361387a116d274c608ba8bb13', '集群状态'),
+      title: titleCase(
+        i18nInstance.t('ee00813361387a116d274c608ba8bb13', '集群状态'),
+      ),
       dataIndex: 'ready',
       key: 'ready',
       align: 'center',
@@ -113,7 +116,9 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('f0789e79d48f135e5d870753f7a85d05', '模式'),
+      title: titleCase(
+        i18nInstance.t('f0789e79d48f135e5d870753f7a85d05', '模式'),
+      ),
       dataIndex: 'syncMode',
       width: 150,
       align: 'center',
@@ -126,7 +131,9 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('b86224e030e5948f96b70a4c3600b33f', '节点状态'),
+      title: titleCase(
+        i18nInstance.t('b86224e030e5948f96b70a4c3600b33f', '节点状态'),
+      ),
       dataIndex: 'nodeStatus',
       align: 'center',
       width: 150,
@@ -143,7 +150,9 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('763a78a5fc84dbca6f0137a591587f5f', 'cpu用量'),
+      title: titleCase(
+        i18nInstance.t('763a78a5fc84dbca6f0137a591587f5f', 'cpu用量'),
+      ),
       dataIndex: 'cpuFraction',
       width: '15%',
       render: (_, r) => {
@@ -159,7 +168,9 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('8b2e672e8b847415a47cc2dd25a87a07', 'memory用量'),
+      title: titleCase(
+        i18nInstance.t('8b2e672e8b847415a47cc2dd25a87a07', 'memory用量'),
+      ),
       dataIndex: 'memoryFraction',
       width: '15%',
       render: (_, r) => {
@@ -175,7 +186,9 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
+      title: titleCase(
+        i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
+      ),
       key: 'op',
       width: 200,
       render: (_, r) => {

diff --git a/ui/apps/dashboard/src/pages/multicloud-policy-manage/override-policy/index.tsx b/ui/apps/dashboard/src/pages/multicloud-policy-manage/override-policy/index.tsx
@@ -1,4 +1,4 @@
-import i18nInstance from '@/utils/i18n';
+import i18nInstance, { titleCase } from '@/utils/i18n';
 import { useMemo, useState } from 'react';
 import Panel from '@/components/panel';
 import {
@@ -90,25 +90,28 @@ const OverridePolicyManage = () => {
   });
   const columns = [
     filter.policyScope === 'namespace-scope' && {
-      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
+      title: titleCase(
+        i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
+      ),
       key: 'namespaceName',
       width: 200,
       render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
         return r.objectMeta.namespace;
       },
     },
     {
-      title: i18nInstance.t('53cf41060c577315071a7c14bb612852', '策略名称'),
+      title: titleCase(
+        i18nInstance.t('53cf41060c577315071a7c14bb612852', '策略名称'),
+      ),
       key: 'policyName',
       width: 200,
       render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
         return r.objectMeta.name;
       },
     },
     {
-      title: i18nInstance.t(
-        '8a59b316f11d99f01ebe9b1b466ba8de',
-        '差异化策略类型',
+      title: titleCase(
+        i18nInstance.t('8a59b316f11d99f01ebe9b1b466ba8de', '差异化策略类型'),
       ),
       key: 'ruleTypes',
       dataIndex: 'ruleTypes',
@@ -125,7 +128,9 @@ const OverridePolicyManage = () => {
       },
     },
     {
-      title: i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758', '关联集群'),
+      title: titleCase(
+        i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758', '关联集群'),
+      ),
       key: 'cluster',
       render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
         const clusters = extractClusterNames(r);
@@ -140,7 +145,9 @@ const OverridePolicyManage = () => {
       },
     },
     {
-      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
+      title: titleCase(
+        i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
+      ),
       key: 'op',
       width: 200,
       render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
@@ -263,16 +270,17 @@ const OverridePolicyManage = () => {
         }}
         options={[
           {
-            label: i18nInstance.t(
-              'bf15e71b2553d369585ace795d15ac3b',
-              '命名空间级别',
+            label: titleCase(
+              i18nInstance.t(
+                'bf15e71b2553d369585ace795d15ac3b',
+                '命名空间级别',
+              ),
             ),
             value: 'namespace-scope',
           },
           {
-            label: i18nInstance.t(
-              '860f29d8fc7a68113902db52885111d4',
-              '集群级别',
+            label: titleCase(
+              i18nInstance.t('860f29d8fc7a68113902db52885111d4', '集群级别'),
             ),
             value: 'cluster-scope',
           },

diff --git a/ui/apps/dashboard/src/pages/multicloud-policy-manage/propagation-policy/index.tsx b/ui/apps/dashboard/src/pages/multicloud-policy-manage/propagation-policy/index.tsx
@@ -1,4 +1,4 @@
-import i18nInstance from '@/utils/i18n';
+import i18nInstance, { titleCase } from '@/utils/i18n';
 import { useState } from 'react';
 import Panel from '@/components/panel';
 import {
@@ -79,29 +79,37 @@ const PropagationPolicyManage = () => {
   });
   const columns = [
     filter.policyScope === PolicyScope.Namespace && {
-      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
+      title: titleCase(
+        i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
+      ),
       key: 'namespaceName',
       width: 200,
       render: (_v: string, r: PropagationPolicy) => {
         return r.objectMeta.namespace;
       },
     },
     {
-      title: i18nInstance.t('53cf41060c577315071a7c14bb612852', '策略名称'),
+      title: titleCase(
+        i18nInstance.t('53cf41060c577315071a7c14bb612852', '策略名称'),
+      ),
       key: 'policyName',
       width: 200,
       render: (_v: string, r: PropagationPolicy) => {
         return r.objectMeta.name;
       },
     },
     {
-      title: i18nInstance.t('915f48c8fcbe25e3dc5875c471b0ce3e', '调度器名称'),
+      title: titleCase(
+        i18nInstance.t('915f48c8fcbe25e3dc5875c471b0ce3e', '调度器名称'),
+      ),
       key: 'schedulerName',
       dataIndex: 'schedulerName',
       width: 200,
     },
     {
-      title: i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758', '关联集群'),
+      title: titleCase(
+        i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758', '关联集群'),
+      ),
       key: 'cluster',
       render: (_v: string, r: PropagationPolicy) => {
         if (!r?.clusterAffinity?.clusterNames) {
@@ -117,7 +125,9 @@ const PropagationPolicyManage = () => {
       },
     },
     {
-      title: i18nInstance.t('8c0921045b741bc4e19d61426b99c938', '关联资源'),
+      title: titleCase(
+        i18nInstance.t('8c0921045b741bc4e19d61426b99c938', '关联资源'),
+      ),
       key: 'deployments',
       render: (_v: string, r: PropagationPolicy) => {
         return r?.deployments?.map((d) => (
@@ -126,7 +136,9 @@ const PropagationPolicyManage = () => {
       },
     },
     {
-      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
+      title: titleCase(
+        i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
+      ),
       key: 'op',
       width: 200,
       render: (_v: string, r: PropagationPolicy) => {
@@ -257,16 +269,17 @@ const PropagationPolicyManage = () => {
         }}
         options={[
           {
-            label: i18nInstance.t(
-              'bf15e71b2553d369585ace795d15ac3b',
-              '命名空间级别',
+            label: titleCase(
+              i18nInstance.t(
+                'bf15e71b2553d369585ace795d15ac3b',
+                '命名空间级别',
+              ),
             ),
             value: PolicyScope.Namespace,
           },
           {
-            label: i18nInstance.t(
-              '860f29d8fc7a68113902db52885111d4',
-              '集群级别',
+            label: titleCase(
+              i18nInstance.t('860f29d8fc7a68113902db52885111d4', '集群级别'),
             ),
             value: PolicyScope.Cluster,
           },

diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/configmap-table.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/configmap-table.tsx
@@ -1,4 +1,4 @@
-import i18nInstance from '@/utils/i18n';
+import i18nInstance, { titleCase } from '@/utils/i18n';
 import { Button, Popconfirm, Space, Table, TableColumnProps, Tag } from 'antd';
 import TagList from '@/components/tag-list';
 import { FC } from 'react';
@@ -25,23 +25,29 @@ const ConfigMapTable: FC<ConfigMapTableProps> = (props) => {
   } = props;
   const columns: TableColumnProps<Config>[] = [
     {
-      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
+      title: titleCase(
+        i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
+      ),
       key: 'namespaceName',
       width: 200,
       render: (_, r) => {
         return r.objectMeta.namespace;
       },
     },
     {
-      title: i18nInstance.t('4fcad1c9ba0732214679e13bd69d998b', '配置名称'),
+      title: titleCase(
+        i18nInstance.t('4fcad1c9ba0732214679e13bd69d998b', '配置名称'),
+      ),
       key: 'configmapName',
       width: 300,
       render: (_, r) => {
         return r.objectMeta.name;
       },
     },
     {
-      title: i18nInstance.t('1f7be0a924280cd098db93c9d81ecccd', '标签信息'),
+      title: titleCase(
+        i18nInstance.t('1f7be0a924280cd098db93c9d81ecccd', '标签信息'),
+      ),
       key: 'labelName',
       align: 'left',
       width: '30%',
@@ -59,23 +65,29 @@ const ConfigMapTable: FC<ConfigMapTableProps> = (props) => {
       },
     },
     {
-      title: i18nInstance.t('8a99082b2c32c843d2241e0ba60a3619', '分发策略'),
+      title: titleCase(
+        i18nInstance.t('8a99082b2c32c843d2241e0ba60a3619', '分发策略'),
+      ),
       key: 'propagationPolicies',
       render: (_, r) => {
         const pp = extractPropagationPolicy(r);
         return pp ? <Tag>{pp}</Tag> : '-';
       },
     },
     {
-      title: i18nInstance.t('eaf8a02d1b16fcf94302927094af921f', '覆盖策略'),
+      title: titleCase(
+        i18nInstance.t('eaf8a02d1b16fcf94302927094af921f', '覆盖策略'),
+      ),
       key: 'overridePolicies',
-      width: 150,
+      width: i18nInstance.language === 'en-US' ? '200px' : '150px',
       render: () => {
         return '-';
       },
     },
     {
-      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
+      title: titleCase(
+        i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
+      ),
       key: 'op',
       width: 200,
       render: (_, r) => {