From 466dd4d4bdde6951b7886bd6db836f04256b25dc Mon Sep 17 00:00:00 2001
From: warjiang <1096409085@qq.com>
Date: Wed, 15 Jan 2025 10:56:44 +0800
Subject: [PATCH] add fallback value to i18n and fix inconsistent probelm
 (#166)

* feat: add i18n fallback txt & useNamespace hooks

Signed-off-by: warjiang <1096409085@qq.com>

* fix: inconsistent translation

Signed-off-by: warjiang <1096409085@qq.com>

---------

Signed-off-by: warjiang <1096409085@qq.com>
---
 ui/apps/dashboard/locales/en-US.json          |  48 ++++--
 ui/apps/dashboard/locales/zh-CN.json          |  36 ++++-
 .../src/pages/cluster-manage/index.tsx        |  75 +++++++---
 .../cluster-manage/new-cluster-modal.tsx      |  52 +++++--
 ui/apps/dashboard/src/pages/login/index.tsx   |  22 ++-
 .../override-policy/index.tsx                 |  66 ++++++---
 .../override-policy-editor-drawer.tsx         |   8 +-
 .../propagation-policy/index.tsx              | 138 ++++++++++--------
 .../propagation-policy-editor-drawer.tsx      |   9 +-
 .../config/components/config-editor-modal.tsx |   1 +
 .../config/components/configmap-table.tsx     |   4 +-
 .../config/components/secret-table.tsx        |   4 +-
 .../namespace/index.tsx                       |  93 ++++++------
 .../namespace/new-namespace-modal.tsx         |  30 ++--
 .../service/components/ingress-table.tsx      |  30 ++--
 .../components/service-editor-modal.tsx       |  50 +++++--
 .../service/components/service-table.tsx      |  40 +++--
 .../service/index.tsx                         |  39 +++--
 .../workload/index.tsx                        | 103 ++++++-------
 .../workload/new-workload-editor-modal.tsx    |  19 ++-
 .../workload/workload-detail-drawer.tsx       |  80 +++++++---
 .../dashboard/src/pages/overview/index.tsx    | 116 ++++++++++-----
 ui/apps/dashboard/src/routes/route.tsx        |  10 +-
 ui/apps/dashboard/src/services/base.ts        |  11 ++
 24 files changed, 697 insertions(+), 387 deletions(-)

diff --git a/ui/apps/dashboard/locales/en-US.json b/ui/apps/dashboard/locales/en-US.json
index 535e043f..6a9bfffa 100644
--- a/ui/apps/dashboard/locales/en-US.json
+++ b/ui/apps/dashboard/locales/en-US.json
@@ -27,12 +27,12 @@
   "3fea7ca76cdece641436d7ab0d02ab1b": "state",
   "d679aea3aae1201e38c4baaaeef86efe": "Running",
   "903b25f64e1c0d9b7f56ed80c256a2e7": "Unknown state",
-  "eca37cb0726c51702f70c486c1c38cf3": "Creation time",
-  "a0d6cb39b547d45a530a3308dce79c86": "Work cluster information",
-  "6860e13ac48e930f8076ebfe37176b78": "Number of nodes:",
-  "a1dacced95ddca3603110bdb1ae46af1": "CPU usage:",
-  "5eaa09de6e55b322fcc299f641d73ce7": "Memory usage:",
-  "820c4003e23553b3124f1608916d5282": "Pod allocation situation:",
+  "eca37cb0726c51702f70c486c1c38cf3": "creation time",
+  "a0d6cb39b547d45a530a3308dce79c86": "member cluster information",
+  "6860e13ac48e930f8076ebfe37176b78": "Number of nodes",
+  "a1dacced95ddca3603110bdb1ae46af1": "CPU usage",
+  "5eaa09de6e55b322fcc299f641d73ce7": "Memory usage",
+  "820c4003e23553b3124f1608916d5282": "Pod allocation situation",
   "85c6051762df2fe8f93ebc1083b7f6a4": "Strategy information",
   "612af712ef5ed7868a6b2f1d3d68530c": "Multi cloud resource information",
   "1200778cf86309309154ef88804fa22e": "Multi cloud namespace",
@@ -62,12 +62,13 @@
   "8a99082b2c32c843d2241e0ba60a3619": "Distribution strategy",
   "eaf8a02d1b16fcf94302927094af921f": "Coverage strategy",
   "2b6bc0f293f5ca01b006206c2535ccbc": "operation",
-  "607e7a4f377fa66b0b28ce318aab841f": "see",
+  "607e7a4f377fa66b0b28ce318aab841f": "view",
   "e83a256e4f5bb4ff8b3d804b5473217a": "confirm",
   "2f4aaddde33c9b93c36fd2503f3d122b": "delete",
-  "280c56077360c204e536eb770495bc5f": "Namespaces:",
+  "280c56077360c204e536eb770495bc5f": "Namespaces",
   "cfaff3e369b9bd51504feb59bf0972a0": "Search by namespace",
   "96d6b0fcc58b6f65dc4c00c6138d2ac0": "Add workload",
+  "634a943c97e905149acb81cef5bda28e": "Edit workload",
   "8347a927c09a4ec2fe473b0a93f667d0": "modify",
   "ac2f01145a5c4a9aaaf2f828650d91a3": "Add a new namespace",
   "e0a23c19b8a0044c5defd167b441d643": "${name} 'is a required field",
@@ -76,7 +77,7 @@
   "d41f6609ddbfa15fb95074a463f3b71a": "Do you want to skip automatic distribution",
   "0a60ac8f02ccd2cf723f927284877851": "yes",
   "c9744f45e76d885ae1c74d4f4a934b2e": "no",
-  "1d5fc011c19d35d08186afc4bad14be9": "Do you want to skip automatic scheduling",
+  "1d5fc011c19d35d08186afc4bad14be9": "Skip automatic scheduling",
   "e4b51d5cd0e4f199e41c25be1c7591d3": "running state ",
   "919994bf077d49f68f016811ffb5600e": "Successfully deleted namespace",
   "9cdd00dbaa024d64a8b8134ae57974a6": "Delete namespace failed",
@@ -128,6 +129,7 @@
   "03743b3522b7d69da1cdc44d7418ce4d": "An error occurred, please refresh and try again",
   "fc763fd5ddf637fe4ba1ac59e10b8d3a": "Confirm to delete",
   "627ce40030fcda39210cca054bb77775": "Is it a workload",
+  "7cd82aa99087de6a052b1aba33dbd3ed": "Is it a service",
   "330363dfc524cff2488f2ebde0500896": "success",
   "acd5cb847a4aff235c9a01ddeb6f9770": "fail",
   "f8484c9d3de78566f9e255360977f12c": "Failed to delete configuration",
@@ -143,7 +145,7 @@
   "944bfddeffc83e54cc6920f281d9b9f3": "Is it configured",
   "b2af3f316129c869a96f9099262df175": "View configuration",
   "5117bc6c603b6ceb9ee5197e30432266": "Edit configuration",
-  "6d95c8c1f41302ab4bc28e08a1226c8c": "Configuration type",
+  "6d95c8c1f41302ab4bc28e08a1226c8c": "Configuration Type",
   "f05bc327e4066ca97af893e52e2c62b3": "Strategy Details",
   "aa141bcb65729912b79cb27995a8989b": "Scheduling strategy",
   "8233550b23ab7acc2a9c3b2623c371dd": "Successfully added scheduling strategy",
@@ -152,6 +154,26 @@
   "5863fd1d291adf46d804f5801a79d0e1": "Editing scheduling strategy failed",
   "79d5c80e3be24682145aa9246df18b40": "Is it a cluster?",
   "85fe5099f6807dada65d274810933389": "Cluster",
-  "c7961c290ec86485d8692f3c09b4075b": "New services added",
-  "8f3747c057d893862fbe4b7980e9b451": "Service Name"
-}
\ No newline at end of file
+  "c7961c290ec86485d8692f3c09b4075b": "Add service",
+  "cc51f34aa418cb3a596fd6470c677bfe": "Edit service",
+  "8f3747c057d893862fbe4b7980e9b451": "Service Name",
+  "b13c676134d8ab066d62e9ea5bdf796c": "Do you want to delete {{name}} propagationpolicy?",
+  "30ee910e8ea18311b1b2efbea94333b8": "Do you want to delete {{name}} cluster?",
+  "fb09e53e96ff76a72894a816dd7c731c": "Cluster {{name}} deleted successfully",
+  "dd7454e05ce9088395dbeb92bf939fd4": "Do you want to delete {{name}} secret?",
+  "af57bb34df71db6c4a115ed7665faf5d": "Do you want to delete {{name}} configmap?",
+  "0518f7eb54d49436d72ae539f422e68b": "Edit {{name}} propagationpolicy",
+  "0a3e7cdadc44fb133265152268761abc": "Workload Type",
+  "924f67de61fc9e07fff979306900dc6a": "Service Type",
+  "88270824e97355ca21f4101e5f1b73a0": "Search by name, press enter to start searching",
+  "8a59b316f11d99f01ebe9b1b466ba8de": "Differentiation strategy type",
+  "7c7e4becc6e9b2be2a196ed506cdc518": "Add differentiation strategy",
+  "d4e6e1153ed42d2b2482f22ee04ac05a": "Add cluster differentiation strategy",
+  "f0ade52acfa0bc5bd63e7cb29db84959": "Do you want to delete {{name}} workload?",
+  "6163856192e115e6b914d6fb8c4fd82c": "Do you want to delete {{name}} service?",
+  "ad23e7bbdbe6ed03eebfc27eef7570fa": "View service",
+  "7afddf70e5c82fab8fa935458b53174a": "Add differentiation strategy",
+  "236513393327bd6b098056314f8676ac": "Edit differentiation strategy",
+  "781a90424b3d02153bc979e0f90179aa": "{{name}} detail",
+  "1af8d577b89a4caf0e4b30734bbf7143": "Do you want to delete {{name}} differentiation strategy?"
+}
diff --git a/ui/apps/dashboard/locales/zh-CN.json b/ui/apps/dashboard/locales/zh-CN.json
index 14c9a3cc..642b59d4 100644
--- a/ui/apps/dashboard/locales/zh-CN.json
+++ b/ui/apps/dashboard/locales/zh-CN.json
@@ -28,10 +28,10 @@
   "903b25f64e1c0d9b7f56ed80c256a2e7": "未知状态",
   "eca37cb0726c51702f70c486c1c38cf3": "创建时间",
   "a0d6cb39b547d45a530a3308dce79c86": "工作集群信息",
-  "6860e13ac48e930f8076ebfe37176b78": "节点数量：",
-  "a1dacced95ddca3603110bdb1ae46af1": "CPU使用情况：",
-  "5eaa09de6e55b322fcc299f641d73ce7": "Memory使用情况：",
-  "820c4003e23553b3124f1608916d5282": "Pod分配情况：",
+  "6860e13ac48e930f8076ebfe37176b78": "节点数量",
+  "a1dacced95ddca3603110bdb1ae46af1": "CPU使用情况",
+  "5eaa09de6e55b322fcc299f641d73ce7": "Memory使用情况",
+  "820c4003e23553b3124f1608916d5282": "Pod分配情况",
   "85c6051762df2fe8f93ebc1083b7f6a4": "策略信息",
   "612af712ef5ed7868a6b2f1d3d68530c": "多云资源信息",
   "1200778cf86309309154ef88804fa22e": "多云命名空间",
@@ -64,9 +64,10 @@
   "607e7a4f377fa66b0b28ce318aab841f": "查看",
   "e83a256e4f5bb4ff8b3d804b5473217a": "确认",
   "2f4aaddde33c9b93c36fd2503f3d122b": "删除",
-  "280c56077360c204e536eb770495bc5f": "命名空间：",
+  "280c56077360c204e536eb770495bc5f": "命名空间",
   "cfaff3e369b9bd51504feb59bf0972a0": "按命名空间搜索",
   "96d6b0fcc58b6f65dc4c00c6138d2ac0": "新增工作负载",
+  "634a943c97e905149acb81cef5bda28e": "编辑工作负载",
   "8347a927c09a4ec2fe473b0a93f667d0": "修改",
   "ac2f01145a5c4a9aaaf2f828650d91a3": "新增命名空间",
   "e0a23c19b8a0044c5defd167b441d643": "'${name}' 是必选字段",
@@ -127,6 +128,7 @@
   "03743b3522b7d69da1cdc44d7418ce4d": "发生错误，请刷新后重试",
   "fc763fd5ddf637fe4ba1ac59e10b8d3a": "确认要删除",
   "627ce40030fcda39210cca054bb77775": "工作负载么",
+  "7cd82aa99087de6a052b1aba33dbd3ed": "服务么",
   "330363dfc524cff2488f2ebde0500896": "成功",
   "acd5cb847a4aff235c9a01ddeb6f9770": "失败",
   "f8484c9d3de78566f9e255360977f12c": "删除配置失败",
@@ -152,5 +154,25 @@
   "79d5c80e3be24682145aa9246df18b40": "集群么?",
   "85fe5099f6807dada65d274810933389": "集群",
   "c7961c290ec86485d8692f3c09b4075b": "新增服务",
-  "8f3747c057d893862fbe4b7980e9b451": "服务名称"
-}
\ No newline at end of file
+  "cc51f34aa418cb3a596fd6470c677bfe": "编辑服务",
+  "8f3747c057d893862fbe4b7980e9b451": "服务名称",
+  "b13c676134d8ab066d62e9ea5bdf796c": "要删除{{name}}调度策略么?",
+  "30ee910e8ea18311b1b2efbea94333b8": "要删除{{name}}集群么?",
+  "fb09e53e96ff76a72894a816dd7c731c": "集群{{name}}删除成功",
+  "dd7454e05ce9088395dbeb92bf939fd4": "要删除{{name}}秘钥么?",
+  "af57bb34df71db6c4a115ed7665faf5d": "要删除{{name}}配置么?",
+  "0518f7eb54d49436d72ae539f422e68b": "编辑{{name}}调度策略",
+  "0a3e7cdadc44fb133265152268761abc": "工作负载类型",
+  "924f67de61fc9e07fff979306900dc6a": "服务类型",
+  "88270824e97355ca21f4101e5f1b73a0": "按名称检索，按下回车开始搜索",
+  "8a59b316f11d99f01ebe9b1b466ba8de": "差异化策略类型",
+  "7c7e4becc6e9b2be2a196ed506cdc518": "新增差异化策略",
+  "d4e6e1153ed42d2b2482f22ee04ac05a": "新增集群差异化策略",
+  "f0ade52acfa0bc5bd63e7cb29db84959": "确认要删除 {{name}} 工作负载么?",
+  "6163856192e115e6b914d6fb8c4fd82c": "确认要删除 {{name}} 服务么",
+  "ad23e7bbdbe6ed03eebfc27eef7570fa": "查看服务",
+  "7afddf70e5c82fab8fa935458b53174a": "新增覆盖策略",
+  "236513393327bd6b098056314f8676ac": "编辑覆盖策略",
+  "781a90424b3d02153bc979e0f90179aa": "{{name}} 策略详情",
+  "1af8d577b89a4caf0e4b30734bbf7143": "确认要删除 {{name}} 覆盖策略么"
+}
diff --git a/ui/apps/dashboard/src/pages/cluster-manage/index.tsx b/ui/apps/dashboard/src/pages/cluster-manage/index.tsx
index 6d4e16fb..8e8be2b0 100644
--- a/ui/apps/dashboard/src/pages/cluster-manage/index.tsx
+++ b/ui/apps/dashboard/src/pages/cluster-manage/index.tsx
@@ -54,7 +54,7 @@ const ClusterManagePage = () => {
   });
   const columns: TableColumnProps<Cluster>[] = [
     {
-      title: i18nInstance.t('c3f28b34bbdec501802fa403584267e6'),
+      title: i18nInstance.t('c3f28b34bbdec501802fa403584267e6', '集群名称'),
       key: 'clusterName',
       width: 150,
       render: (_, r) => {
@@ -63,14 +63,17 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('bd17297989ec345cbc03ae0b8a13dc0a'),
+      title: i18nInstance.t(
+        'bd17297989ec345cbc03ae0b8a13dc0a',
+        'kubernetes版本',
+      ),
       dataIndex: 'kubernetesVersion',
       key: 'kubernetesVersion',
       width: 150,
       align: 'center',
     },
     {
-      title: i18nInstance.t('ee00813361387a116d274c608ba8bb13'),
+      title: i18nInstance.t('ee00813361387a116d274c608ba8bb13', '集群状态'),
       dataIndex: 'ready',
       key: 'ready',
       align: 'center',
@@ -110,7 +113,7 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('f0789e79d48f135e5d870753f7a85d05'),
+      title: i18nInstance.t('f0789e79d48f135e5d870753f7a85d05', '模式'),
       dataIndex: 'syncMode',
       width: 150,
       align: 'center',
@@ -123,7 +126,7 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('b86224e030e5948f96b70a4c3600b33f'),
+      title: i18nInstance.t('b86224e030e5948f96b70a4c3600b33f', '节点状态'),
       dataIndex: 'nodeStatus',
       align: 'center',
       width: 150,
@@ -140,7 +143,7 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('763a78a5fc84dbca6f0137a591587f5f'),
+      title: i18nInstance.t('763a78a5fc84dbca6f0137a591587f5f', 'cpu用量'),
       dataIndex: 'cpuFraction',
       width: '15%',
       render: (_, r) => {
@@ -156,7 +159,7 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('8b2e672e8b847415a47cc2dd25a87a07'),
+      title: i18nInstance.t('8b2e672e8b847415a47cc2dd25a87a07', 'memory用量'),
       dataIndex: 'memoryFraction',
       width: '15%',
       render: (_, r) => {
@@ -172,14 +175,14 @@ const ClusterManagePage = () => {
       },
     },
     {
-      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc'),
+      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
       key: 'op',
       width: 200,
       render: (_, r) => {
         return (
           <Space.Compact>
             <Button size={'small'} type="link" disabled>
-              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f')}
+              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f', '查看')}
             </Button>
             <Button
               size={'small'}
@@ -193,29 +196,42 @@ const ClusterManagePage = () => {
                 });
               }}
             >
-              {i18nInstance.t('95b351c86267f3aedf89520959bce689')}
+              {i18nInstance.t('95b351c86267f3aedf89520959bce689', '编辑')}
             </Button>
             <Popconfirm
               placement="topRight"
-              title={`${i18nInstance.t('fc763fd5ddf637fe4ba1ac59e10b8d3a', '确认要删除')}${r.objectMeta.name}${i18nInstance.t('79d5c80e3be24682145aa9246df18b40', '集群么?')}`}
+              title={i18nInstance.t('30ee910e8ea18311b1b2efbea94333b8', {
+                name: r.objectMeta.name,
+              })}
               onConfirm={async () => {
                 const ret = await DeleteCluster(r.objectMeta.name);
                 if (ret.code === 200) {
                   await messageApi.success(
-                    `${i18nInstance.t('85fe5099f6807dada65d274810933389', '集群')}${r.objectMeta.name}${i18nInstance.t('0007d170de017dafc266aa03926d7f00', '删除成功')}`,
+                    i18nInstance.t('fb09e53e96ff76a72894a816dd7c731c', {
+                      name: r.objectMeta.name,
+                    }),
                   );
                   await refetch();
                 } else {
                   await messageApi.error(
-                    i18nInstance.t('9e7856e9c5938b9200dbdc174e97cf8a'),
+                    i18nInstance.t(
+                      '9e7856e9c5938b9200dbdc174e97cf8a',
+                      '集群删除失败',
+                    ),
                   );
                 }
               }}
-              okText={i18nInstance.t('e83a256e4f5bb4ff8b3d804b5473217a')}
-              cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c')}
+              okText={i18nInstance.t(
+                'e83a256e4f5bb4ff8b3d804b5473217a',
+                '确认',
+              )}
+              cancelText={i18nInstance.t(
+                '625fb26b4b3340f7872b411f401e754c',
+                '取消',
+              )}
             >
               <Button size={'small'} type="link" danger>
-                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b')}
+                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b', '删除')}
               </Button>
             </Popconfirm>
           </Space.Compact>
@@ -227,7 +243,10 @@ const ClusterManagePage = () => {
     <Panel>
       <div className={'flex flex-row justify-between mb-4'}>
         <Input.Search
-          placeholder={i18nInstance.t('e8d235e76b8e310660e158dc4c2fd560')}
+          placeholder={i18nInstance.t(
+            'e8d235e76b8e310660e158dc4c2fd560',
+            '按集群名称搜索',
+          )}
           className={'w-[400px]'}
         />
         <Button
@@ -241,7 +260,7 @@ const ClusterManagePage = () => {
             });
           }}
         >
-          {i18nInstance.t('4cd980b26c5c76cdd4a5c5e44064d6da')}
+          {i18nInstance.t('4cd980b26c5c76cdd4a5c5e44064d6da', '新增集群')}
         </Button>
       </div>
       <Table
@@ -258,11 +277,17 @@ const ClusterManagePage = () => {
           if (ret.code === 200) {
             if (clusterModalData.mode === 'create') {
               await messageApi.success(
-                i18nInstance.t('dca2754f7a646ef40f495f75145428d0'),
+                i18nInstance.t(
+                  'dca2754f7a646ef40f495f75145428d0',
+                  '集群接入成功',
+                ),
               );
             } else if (clusterModalData.mode === 'edit') {
               await messageApi.success(
-                i18nInstance.t('474162cdce4e540d3a4d97c6de92cd68'),
+                i18nInstance.t(
+                  '474162cdce4e540d3a4d97c6de92cd68',
+                  '集群更新成功',
+                ),
               );
             }
             await refetch();
@@ -274,11 +299,17 @@ const ClusterManagePage = () => {
           } else {
             if (clusterModalData.mode === 'create') {
               await messageApi.error(
-                i18nInstance.t('3b0b5df2e18ef97b7f948c60906a7821'),
+                i18nInstance.t(
+                  '3b0b5df2e18ef97b7f948c60906a7821',
+                  '集群接入失败',
+                ),
               );
             } else if (clusterModalData.mode === 'edit') {
               await messageApi.error(
-                i18nInstance.t('01812e386ab69ce4391769918e32d6d1'),
+                i18nInstance.t(
+                  '01812e386ab69ce4391769918e32d6d1',
+                  '集群更新失败',
+                ),
               );
             }
           }
diff --git a/ui/apps/dashboard/src/pages/cluster-manage/new-cluster-modal.tsx b/ui/apps/dashboard/src/pages/cluster-manage/new-cluster-modal.tsx
index 0480a865..17859f8b 100644
--- a/ui/apps/dashboard/src/pages/cluster-manage/new-cluster-modal.tsx
+++ b/ui/apps/dashboard/src/pages/cluster-manage/new-cluster-modal.tsx
@@ -79,12 +79,12 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
       open={open}
       title={
         mode === 'create'
-          ? i18nInstance.t('4cd980b26c5c76cdd4a5c5e44064d6da')
-          : i18nInstance.t('8d3d771ab6d38cf457a832763a5203a0')
+          ? i18nInstance.t('4cd980b26c5c76cdd4a5c5e44064d6da', '新增集群')
+          : i18nInstance.t('8d3d771ab6d38cf457a832763a5203a0', '编辑集群')
       }
       width={800}
-      okText={i18nInstance.t('38cf16f2204ffab8a6e0187070558721')}
-      cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c')}
+      okText={i18nInstance.t('38cf16f2204ffab8a6e0187070558721', '确定')}
+      cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c', '取消')}
       destroyOnClose={true}
       confirmLoading={confirmLoading}
       onOk={async () => {
@@ -121,24 +121,30 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
         form={form}
         className={mode === 'create' ? 'min-h-[500px]' : 'min-h-[200px]'}
         validateMessages={{
-          required: i18nInstance.t('e0a23c19b8a0044c5defd167b441d643'),
+          required: i18nInstance.t(
+            'e0a23c19b8a0044c5defd167b441d643',
+            "'${name}' 是必选字段",
+          ),
         }}
       >
         <Form.Item
-          label={i18nInstance.t('c3f28b34bbdec501802fa403584267e6')}
+          label={i18nInstance.t('c3f28b34bbdec501802fa403584267e6', '集群名称')}
           name="clusterName"
           required
           rules={[{ required: true }]}
           {...formItemLayout}
         >
           <Input
-            placeholder={i18nInstance.t('debdfce08462b0261ed58925fe915450')}
+            placeholder={i18nInstance.t(
+              'debdfce08462b0261ed58925fe915450',
+              '请输入集群名称',
+            )}
             disabled={mode !== 'create'}
             className={'w-[200px]'}
           />
         </Form.Item>
         <Form.Item
-          label={i18nInstance.t('e8d733d77271dd37b33820f5eafeb2c2')}
+          label={i18nInstance.t('e8d733d77271dd37b33820f5eafeb2c2', '接入模式')}
           name="mode"
           required
           {...formItemLayout}
@@ -182,7 +188,9 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
               setShowAdvancedConfig(!showAdvancedConfig);
             }}
           >
-            <span>{i18nInstance.t('1f318234cab713b51b5172d91770bc11')}</span>
+            <span>
+              {i18nInstance.t('1f318234cab713b51b5172d91770bc11', '高级配置')}
+            </span>
             <Icons.up
               width={16}
               height={16}
@@ -212,7 +220,10 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
                       : formItemLayoutWithOutLabel)}
                     label={
                       index === 0
-                        ? i18nInstance.t('b5a42b0552078d909538b09290dac33b')
+                        ? i18nInstance.t(
+                            'b5a42b0552078d909538b09290dac33b',
+                            '集群标签',
+                          )
                         : ''
                     }
                     required
@@ -226,6 +237,7 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
                             required: true,
                             message: i18nInstance.t(
                               '645e18caca231e11428f48afbcc33f12',
+                              'label key必填',
                             ),
                           },
                         ]}
@@ -234,6 +246,7 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
                         <Input
                           placeholder={i18nInstance.t(
                             '38fe9f04343da51a22f32b08fda176e2',
+                            '请输出label的key',
                           )}
                           className={'w-[150px]'}
                         />
@@ -245,6 +258,7 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
                             required: true,
                             message: i18nInstance.t(
                               '95ef866ba7b4dccef30d67b9d0573f4c',
+                              'label value必填',
                             ),
                           },
                         ]}
@@ -253,6 +267,7 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
                         <Input
                           placeholder={i18nInstance.t(
                             '8728e41e53f5447795926bfe80e547df',
+                            '请输出label的value',
                           )}
                           className={'w-[150px]'}
                         />
@@ -273,7 +288,10 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
                     icon={<Icons.add />}
                     className="flex flex-row items-center justify-center h-[32px]"
                   >
-                    {i18nInstance.t('c1153b413b26be76aa95cce9ce3ce588')}
+                    {i18nInstance.t(
+                      'c1153b413b26be76aa95cce9ce3ce588',
+                      '新增集群标签',
+                    )}
                   </Button>
                 </Form.Item>
               </>
@@ -292,7 +310,10 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
                           : formItemLayoutWithOutLabel)}
                         label={
                           index === 0
-                            ? i18nInstance.t('7e9edd6aac5f7394babb5825093d0b2f')
+                            ? i18nInstance.t(
+                                '7e9edd6aac5f7394babb5825093d0b2f',
+                                '集群污点',
+                              )
                             : ''
                         }
                         required
@@ -307,6 +328,7 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
                             <Input
                               placeholder={i18nInstance.t(
                                 'af4d4438625e0bd7915a63a9cf48d6cb',
+                                '请输出taint的key',
                               )}
                               className={'w-[200px]'}
                             />
@@ -333,6 +355,7 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
                             <Input
                               placeholder={i18nInstance.t(
                                 'dc74ee6676ae5689ef91a6a1f6ca4e17',
+                                '请输出taint的value',
                               )}
                               className={'w-[200px]'}
                             />
@@ -381,7 +404,10 @@ const NewClusterModal: FC<NewClusterModalProps> = (props) => {
                       icon={<Icons.add />}
                       className="flex flex-row items-center justify-center h-[32px]"
                     >
-                      {i18nInstance.t('a8c0e7f3a8bbae7c553d25aab4f68978')}
+                      {i18nInstance.t(
+                        'a8c0e7f3a8bbae7c553d25aab4f68978',
+                        '新增集群污点',
+                      )}
                     </Button>
                   </Form.Item>
                 </>
diff --git a/ui/apps/dashboard/src/pages/login/index.tsx b/ui/apps/dashboard/src/pages/login/index.tsx
index af5752b8..414ee9c0 100644
--- a/ui/apps/dashboard/src/pages/login/index.tsx
+++ b/ui/apps/dashboard/src/pages/login/index.tsx
@@ -39,7 +39,10 @@ const LoginPage = () => {
                   items={[
                     {
                       key: '1',
-                      label: i18nInstance.t('11fa53ed08b11d4753c29bbc8c8fee64'),
+                      label: i18nInstance.t(
+                        '11fa53ed08b11d4753c29bbc8c8fee64',
+                        '参考文档生成jwt token',
+                      ),
                       children: <code>!!todo</code>,
                     },
                   ]}
@@ -66,7 +69,10 @@ const LoginPage = () => {
                   const ret = await Login(authToken);
                   if (ret.code === 200) {
                     await messageApi.success(
-                      i18nInstance.t('11427a1edb98cf7efe26ca229d6f2626'),
+                      i18nInstance.t(
+                        '11427a1edb98cf7efe26ca229d6f2626',
+                        '登录成功，即将跳转',
+                      ),
                     );
                     setTimeout(() => {
                       setToken(authToken);
@@ -74,17 +80,23 @@ const LoginPage = () => {
                     }, 1000);
                   } else {
                     await messageApi.error(
-                      i18nInstance.t('a831066e2d289e126ff7cbf483c3bad1'),
+                      i18nInstance.t(
+                        'a831066e2d289e126ff7cbf483c3bad1',
+                        '登录失败，请重试',
+                      ),
                     );
                   }
                 } catch (e) {
                   await messageApi.error(
-                    i18nInstance.t('b6076a055fe6cc0473e0d313dc58a049'),
+                    i18nInstance.t(
+                      'b6076a055fe6cc0473e0d313dc58a049',
+                      '登录失败',
+                    ),
                   );
                 }
               }}
             >
-              {i18nInstance.t('402d19e50fff44c827a4f3b608bd5812')}
+              {i18nInstance.t('402d19e50fff44c827a4f3b608bd5812', '登录')}
             </Button>
           </div>
         </Card>
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
index c9413f22..284644e9 100644
--- 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
@@ -90,7 +90,7 @@ const OverridePolicyManage = () => {
   });
   const columns = [
     filter.policyScope === 'namespace-scope' && {
-      title: '命名空间',
+      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
       key: 'namespaceName',
       width: 200,
       render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
@@ -98,7 +98,7 @@ const OverridePolicyManage = () => {
       },
     },
     {
-      title: '策略名称',
+      title: i18nInstance.t('53cf41060c577315071a7c14bb612852', '策略名称'),
       key: 'policyName',
       width: 200,
       render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
@@ -106,7 +106,10 @@ const OverridePolicyManage = () => {
       },
     },
     {
-      title: '差异化策略类型',
+      title: i18nInstance.t(
+        '8a59b316f11d99f01ebe9b1b466ba8de',
+        '差异化策略类型',
+      ),
       key: 'ruleTypes',
       dataIndex: 'ruleTypes',
       render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
@@ -122,7 +125,7 @@ const OverridePolicyManage = () => {
       },
     },
     {
-      title: '关联集群',
+      title: i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758', '关联集群'),
       key: 'cluster',
       render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
         const clusters = extractClusterNames(r);
@@ -137,7 +140,7 @@ const OverridePolicyManage = () => {
       },
     },
     {
-      title: '操作',
+      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
       key: 'op',
       width: 200,
       render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
@@ -165,7 +168,7 @@ const OverridePolicyManage = () => {
                 });
               }}
             >
-              查看
+              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f', '查看')}
             </Button>
             <Button
               size={'small'}
@@ -189,11 +192,13 @@ const OverridePolicyManage = () => {
                 });
               }}
             >
-              编辑
+              {i18nInstance.t('95b351c86267f3aedf89520959bce689', '编辑')}
             </Button>
             <Popconfirm
               placement="topRight"
-              title={`确认要删除${r.objectMeta.name}覆盖策略么`}
+              title={i18nInstance.t('1af8d577b89a4caf0e4b30734bbf7143', {
+                name: r.objectMeta.name,
+              })}
               onConfirm={async () => {
                 const ret = await DeleteOverridePolicy({
                   isClusterScope: filter.policyScope === 'cluster-scope',
@@ -201,17 +206,27 @@ const OverridePolicyManage = () => {
                   name: r.objectMeta.name,
                 });
                 if (ret.code === 200) {
-                  await messageApi.success(i18nInstance.t('删除成功'));
+                  await messageApi.success(
+                    i18nInstance.t(
+                      '0007d170de017dafc266aa03926d7f00',
+                      '删除成功',
+                    ),
+                  );
                   await refetch();
                 } else {
-                  await messageApi.error(i18nInstance.t('删除失败'));
+                  await messageApi.error(
+                    i18nInstance.t(
+                      'acf0664a54dc58d9d0377bb56e162092',
+                      '删除失败',
+                    ),
+                  );
                 }
               }}
               okText={'确认'}
               cancelText={'取消'}
             >
               <Button size={'small'} type="link" danger>
-                删除
+                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b', '删除')}
               </Button>
             </Popconfirm>
           </Space.Compact>
@@ -248,11 +263,17 @@ const OverridePolicyManage = () => {
         }}
         options={[
           {
-            label: '命名空间级别',
+            label: i18nInstance.t(
+              'bf15e71b2553d369585ace795d15ac3b',
+              '命名空间级别',
+            ),
             value: 'namespace-scope',
           },
           {
-            label: '集群级别',
+            label: i18nInstance.t(
+              '860f29d8fc7a68113902db52885111d4',
+              '集群级别',
+            ),
             value: 'cluster-scope',
           },
         ]}
@@ -262,7 +283,9 @@ const OverridePolicyManage = () => {
         <div className={'flex flex-row space-x-4'}>
           {filter.policyScope === 'namespace-scope' && (
             <>
-              <h3 className={'leading-[32px]'}>命名空间</h3>
+              <h3 className={'leading-[32px]'}>
+                {i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间')}
+              </h3>
               <Select
                 options={nsOptions}
                 className={'min-w-[200px]'}
@@ -282,7 +305,10 @@ const OverridePolicyManage = () => {
           )}
 
           <Input.Search
-            placeholder={'按名称检索，按下回车开始搜索'}
+            placeholder={i18nInstance.t(
+              '88270824e97355ca21f4101e5f1b73a0',
+              '按名称检索，按下回车开始搜索',
+            )}
             className={'w-[400px]'}
             onPressEnter={(e) => {
               const input = e.currentTarget.value;
@@ -307,8 +333,14 @@ const OverridePolicyManage = () => {
             }}
           >
             {filter.policyScope === 'namespace-scope'
-              ? '新增差异化策略'
-              : '新增集群差异化策略'}
+              ? i18nInstance.t(
+                  '7c7e4becc6e9b2be2a196ed506cdc518',
+                  '新增差异化策略',
+                )
+              : i18nInstance.t(
+                  'd4e6e1153ed42d2b2482f22ee04ac05a',
+                  '新增集群差异化策略',
+                )}
           </Button>
         </div>
       </div>
diff --git a/ui/apps/dashboard/src/pages/multicloud-policy-manage/override-policy/override-policy-editor-drawer.tsx b/ui/apps/dashboard/src/pages/multicloud-policy-manage/override-policy/override-policy-editor-drawer.tsx
index ef525171..ea226a68 100644
--- a/ui/apps/dashboard/src/pages/multicloud-policy-manage/override-policy/override-policy-editor-drawer.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-policy-manage/override-policy/override-policy-editor-drawer.tsx
@@ -6,6 +6,7 @@ import { IResponse } from '@/services/base.ts';
 import { parse } from 'yaml';
 import _ from 'lodash';
 import { CreateOverridePolicy } from '@/services/overridepolicy.ts';
+import i18nInstance from '@/utils/i18n.tsx';
 export interface OverridePolicyEditorDrawerProps {
   open: boolean;
   mode: 'create' | 'edit' | 'detail';
@@ -23,11 +24,11 @@ function getTitle(
 ) {
   switch (mode) {
     case 'create':
-      return '新增调度策略';
+      return i18nInstance.t('7afddf70e5c82fab8fa935458b53174a', '新增覆盖策略');
     case 'edit':
-      return `编辑覆盖策略`;
+      return i18nInstance.t('236513393327bd6b098056314f8676ac', '编辑覆盖策略');
     case 'detail':
-      return `${name}策略详情`;
+      return i18nInstance.t('781a90424b3d02153bc979e0f90179aa', { name });
     default:
       return '';
   }
@@ -113,6 +114,7 @@ const OverridePolicyEditorDrawer: FC<OverridePolicyEditorDrawerProps> = (
           minimap: {
             enabled: false,
           },
+          wordWrap: 'on',
         }}
         onChange={handleEditorChange}
       />
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
index 235bc6e0..a743c63a 100644
--- 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,43 +1,43 @@
 import i18nInstance from '@/utils/i18n';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import Panel from '@/components/panel';
 import {
-  Input,
   Button,
-  Segmented,
-  TableColumnProps,
-  Tag,
-  Space,
-  Table,
+  Input,
   message,
   Popconfirm,
+  Segmented,
   Select,
+  Space,
+  Table,
+  TableColumnProps,
+  Tag,
 } from 'antd';
 import { Icons } from '@/components/icons';
 import { useQuery } from '@tanstack/react-query';
+import type { PropagationPolicy } from '@/services/propagationpolicy.ts';
 import {
-  GetPropagationPolicies,
+  ClusterPropagationPolicy,
   DeletePropagationPolicy,
   GetClusterPropagationPolicies,
-  ClusterPropagationPolicy,
+  GetPropagationPolicies,
 } from '@/services/propagationpolicy.ts';
-import type { PropagationPolicy } from '@/services/propagationpolicy.ts';
 import PropagationPolicyEditorDrawer, {
   PropagationPolicyEditorDrawerProps,
 } from './propagation-policy-editor-drawer';
 import { stringify } from 'yaml';
 import { GetResource } from '@/services/unstructured.ts';
-import { GetNamespaces } from '@/services/namespace.ts';
 import { useDebounce } from '@uidotdev/usehooks';
+import { PolicyScope } from '@/services/base.ts';
+import useNamespace from '@/hooks/use-namespace.ts';
 
-export type PolicyScope = 'namespace-scope' | 'cluster-scope';
 const PropagationPolicyManage = () => {
   const [filter, setFilter] = useState<{
     policyScope: PolicyScope;
     selectedNamespace: string;
     searchText: string;
   }>({
-    policyScope: 'namespace-scope',
+    policyScope: PolicyScope.Namespace,
     selectedNamespace: '',
     searchText: '',
   });
@@ -50,7 +50,7 @@ const PropagationPolicyManage = () => {
       debouncedSearchText,
     ],
     queryFn: async () => {
-      if (filter.policyScope === 'cluster-scope') {
+      if (filter.policyScope === PolicyScope.Cluster) {
         const ret = await GetClusterPropagationPolicies({
           keyword: filter.searchText,
         });
@@ -64,22 +64,7 @@ const PropagationPolicyManage = () => {
       }
     },
   });
-  const { data: nsData, isLoading: isNsDataLoading } = useQuery({
-    queryKey: ['GetNamespaces'],
-    queryFn: async () => {
-      const clusters = await GetNamespaces({});
-      return clusters.data || {};
-    },
-  });
-  const nsOptions = useMemo(() => {
-    if (!nsData?.namespaces) return [];
-    return nsData.namespaces.map((item) => {
-      return {
-        title: item.objectMeta.name,
-        value: item.objectMeta.name,
-      };
-    });
-  }, [nsData]);
+  const { nsOptions, isNsDataLoading } = useNamespace({});
   const [editorDrawerData, setEditorDrawerData] = useState<
     Omit<
       PropagationPolicyEditorDrawerProps,
@@ -93,8 +78,8 @@ const PropagationPolicyManage = () => {
     propagationContent: '',
   });
   const columns = [
-    filter.policyScope === 'namespace-scope' && {
-      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298'),
+    filter.policyScope === PolicyScope.Namespace && {
+      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
       key: 'namespaceName',
       width: 200,
       render: (_v: string, r: PropagationPolicy) => {
@@ -102,7 +87,7 @@ const PropagationPolicyManage = () => {
       },
     },
     {
-      title: i18nInstance.t('53cf41060c577315071a7c14bb612852'),
+      title: i18nInstance.t('53cf41060c577315071a7c14bb612852', '策略名称'),
       key: 'policyName',
       width: 200,
       render: (_v: string, r: PropagationPolicy) => {
@@ -110,13 +95,13 @@ const PropagationPolicyManage = () => {
       },
     },
     {
-      title: i18nInstance.t('915f48c8fcbe25e3dc5875c471b0ce3e'),
+      title: i18nInstance.t('915f48c8fcbe25e3dc5875c471b0ce3e', '调度器名称'),
       key: 'schedulerName',
       dataIndex: 'schedulerName',
       width: 200,
     },
     {
-      title: i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758'),
+      title: i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758', '关联集群'),
       key: 'cluster',
       render: (_v: string, r: PropagationPolicy) => {
         if (!r?.clusterAffinity?.clusterNames) {
@@ -132,7 +117,7 @@ const PropagationPolicyManage = () => {
       },
     },
     {
-      title: i18nInstance.t('8c0921045b741bc4e19d61426b99c938'),
+      title: i18nInstance.t('8c0921045b741bc4e19d61426b99c938', '关联资源'),
       key: 'deployments',
       render: (_v: string, r: PropagationPolicy) => {
         return r?.deployments?.map((d) => (
@@ -141,7 +126,7 @@ const PropagationPolicyManage = () => {
       },
     },
     {
-      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc'),
+      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
       key: 'op',
       width: 200,
       render: (_v: string, r: PropagationPolicy) => {
@@ -154,7 +139,10 @@ const PropagationPolicyManage = () => {
                 const ret = await GetResource({
                   name: r.objectMeta.name,
                   namespace: r.objectMeta.namespace,
-                  kind: 'propagationpolicy',
+                  kind:
+                    filter.policyScope === PolicyScope.Namespace
+                      ? 'propagationpolicy'
+                      : 'clusterpropagationpolicy',
                 });
                 const content = stringify(ret.data);
                 setEditorDrawerData({
@@ -166,7 +154,7 @@ const PropagationPolicyManage = () => {
                 });
               }}
             >
-              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f')}
+              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f', '查看')}
             </Button>
             <Button
               size={'small'}
@@ -175,7 +163,10 @@ const PropagationPolicyManage = () => {
                 const ret = await GetResource({
                   name: r.objectMeta.name,
                   namespace: r.objectMeta.namespace,
-                  kind: 'propagationpolicy',
+                  kind:
+                    filter.policyScope === PolicyScope.Namespace
+                      ? 'propagationpolicy'
+                      : 'clusterpropagationpolicy',
                 });
                 const content = stringify(ret.data);
                 setEditorDrawerData({
@@ -187,33 +178,47 @@ const PropagationPolicyManage = () => {
                 });
               }}
             >
-              {i18nInstance.t('95b351c86267f3aedf89520959bce689')}
+              {i18nInstance.t('95b351c86267f3aedf89520959bce689', '编辑')}
             </Button>
             <Popconfirm
               placement="topRight"
-              title={`${i18nInstance.t('fc763fd5ddf637fe4ba1ac59e10b8d3a', '确认要删除')}${r.objectMeta.name}${i18nInstance.t('aa141bcb65729912b79cb27995a8989b', '调度策略么')}`}
+              title={i18nInstance.t('b13c676134d8ab066d62e9ea5bdf796c', {
+                name: r.objectMeta.name,
+              })}
               onConfirm={async () => {
                 const ret = await DeletePropagationPolicy({
-                  isClusterScope: filter.policyScope === 'cluster-scope',
+                  isClusterScope: filter.policyScope === PolicyScope.Cluster,
                   namespace: r.objectMeta.namespace,
                   name: r.objectMeta.name,
                 });
                 if (ret.code === 200) {
                   await messageApi.success(
-                    i18nInstance.t('0007d170de017dafc266aa03926d7f00'),
+                    i18nInstance.t(
+                      '0007d170de017dafc266aa03926d7f00',
+                      '删除成功',
+                    ),
                   );
                   await refetch();
                 } else {
                   await messageApi.error(
-                    i18nInstance.t('acf0664a54dc58d9d0377bb56e162092'),
+                    i18nInstance.t(
+                      'acf0664a54dc58d9d0377bb56e162092',
+                      '删除失败',
+                    ),
                   );
                 }
               }}
-              okText={i18nInstance.t('e83a256e4f5bb4ff8b3d804b5473217a')}
-              cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c')}
+              okText={i18nInstance.t(
+                'e83a256e4f5bb4ff8b3d804b5473217a',
+                '确认',
+              )}
+              cancelText={i18nInstance.t(
+                '625fb26b4b3340f7872b411f401e754c',
+                '取消',
+              )}
             >
               <Button size={'small'} type="link" danger>
-                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b')}
+                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b', '删除')}
               </Button>
             </Popconfirm>
           </Space.Compact>
@@ -252,21 +257,29 @@ const PropagationPolicyManage = () => {
         }}
         options={[
           {
-            label: i18nInstance.t('bf15e71b2553d369585ace795d15ac3b'),
-            value: 'namespace-scope',
+            label: i18nInstance.t(
+              'bf15e71b2553d369585ace795d15ac3b',
+              '命名空间级别',
+            ),
+            value: PolicyScope.Namespace,
           },
           {
-            label: i18nInstance.t('860f29d8fc7a68113902db52885111d4'),
-            value: 'cluster-scope',
+            label: i18nInstance.t(
+              '860f29d8fc7a68113902db52885111d4',
+              '集群级别',
+            ),
+            value: PolicyScope.Cluster,
           },
         ]}
       />
 
       <div className={'flex flex-row mb-4 justify-between'}>
         <div className={'flex flex-row space-x-4'}>
-          {filter.policyScope === 'namespace-scope' && (
+          {filter.policyScope === PolicyScope.Namespace && (
             <>
-              <h3 className={'leading-[32px]'}>命名空间</h3>
+              <h3 className={'leading-[32px]'}>
+                {i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间')}
+              </h3>
               <Select
                 options={nsOptions}
                 className={'min-w-[200px]'}
@@ -285,7 +298,10 @@ const PropagationPolicyManage = () => {
             </>
           )}
           <Input.Search
-            placeholder={'按名称检索，按下回车开始搜索'}
+            placeholder={i18nInstance.t(
+              '88270824e97355ca21f4101e5f1b73a0',
+              '按名称检索，按下回车开始搜索',
+            )}
             className={'w-[400px]'}
             value={filter.searchText}
             onChange={(e) => {
@@ -308,9 +324,15 @@ const PropagationPolicyManage = () => {
               });
             }}
           >
-            {filter.policyScope === 'namespace-scope'
-              ? i18nInstance.t('5ac6560da4f54522d590c5f8e939691b')
-              : i18nInstance.t('929e0cda9f7fdc960dafe6ef742ab088')}
+            {filter.policyScope === PolicyScope.Namespace
+              ? i18nInstance.t(
+                  '5ac6560da4f54522d590c5f8e939691b',
+                  '新增调度策略',
+                )
+              : i18nInstance.t(
+                  '929e0cda9f7fdc960dafe6ef742ab088',
+                  '新增集群调度策略',
+                )}
           </Button>
         </div>
       </div>
diff --git a/ui/apps/dashboard/src/pages/multicloud-policy-manage/propagation-policy/propagation-policy-editor-drawer.tsx b/ui/apps/dashboard/src/pages/multicloud-policy-manage/propagation-policy/propagation-policy-editor-drawer.tsx
index f738f75a..7653a744 100644
--- a/ui/apps/dashboard/src/pages/multicloud-policy-manage/propagation-policy/propagation-policy-editor-drawer.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-policy-manage/propagation-policy/propagation-policy-editor-drawer.tsx
@@ -23,9 +23,9 @@ function getTitle(
 ) {
   switch (mode) {
     case 'create':
-      return i18nInstance.t('5ac6560da4f54522d590c5f8e939691b');
+      return i18nInstance.t('5ac6560da4f54522d590c5f8e939691b', '新增调度策略');
     case 'edit':
-      return `${i18nInstance.t('95b351c86267f3aedf89520959bce689', '编辑')}${name}${i18nInstance.t('a95abe7b8eeb55427547e764bf39f1c4', '调度策略')}`;
+      return i18nInstance.t('0518f7eb54d49436d72ae539f422e68b', { name });
     case 'detail':
       return `${name}${i18nInstance.t('f05bc327e4066ca97af893e52e2c62b3', '策略详情')}`;
     default:
@@ -68,7 +68,7 @@ const PropagationPolicyEditorDrawer: FC<PropagationPolicyEditorDrawerProps> = (
         <div className={'flex flex-row justify-end'}>
           <Space>
             <Button onClick={onClose}>
-              {i18nInstance.t('625fb26b4b3340f7872b411f401e754c')}
+              {i18nInstance.t('625fb26b4b3340f7872b411f401e754c', '取消')}
             </Button>
             <Button
               type="primary"
@@ -95,7 +95,7 @@ const PropagationPolicyEditorDrawer: FC<PropagationPolicyEditorDrawerProps> = (
                 }
               }}
             >
-              {i18nInstance.t('38cf16f2204ffab8a6e0187070558721')}
+              {i18nInstance.t('38cf16f2204ffab8a6e0187070558721', '确定')}
             </Button>
           </Space>
         </div>
@@ -113,6 +113,7 @@ const PropagationPolicyEditorDrawer: FC<PropagationPolicyEditorDrawerProps> = (
           minimap: {
             enabled: false,
           },
+          wordWrap: 'on',
         }}
         onChange={handleEditorChange}
       />
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/config-editor-modal.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/config-editor-modal.tsx
index b7385836..00b27408 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/config-editor-modal.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/config-editor-modal.tsx
@@ -110,6 +110,7 @@ const NewConfigEditorModal: FC<NewWorkloadEditorModalProps> = (props) => {
           minimap: {
             enabled: false,
           },
+          wordWrap: 'on',
         }}
         onChange={handleEditorChange}
       />
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
index a92d0f2e..1112c153 100644
--- 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
@@ -112,7 +112,9 @@ const ConfigMapTable: FC<ConfigMapTableProps> = (props) => {
 
             <Popconfirm
               placement="topRight"
-              title={`${i18nInstance.t('fc763fd5ddf637fe4ba1ac59e10b8d3a', '确认要删除')}${r.objectMeta.name}${i18nInstance.t('944bfddeffc83e54cc6920f281d9b9f3', '配置么')}`}
+              title={i18nInstance.t('af57bb34df71db6c4a115ed7665faf5d', {
+                name: r.objectMeta.name,
+              })}
               onConfirm={() => {
                 onDeleteConfigMapContent(r);
               }}
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/secret-table.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/secret-table.tsx
index ac246fb2..98e1719b 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/secret-table.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/secret-table.tsx
@@ -117,7 +117,9 @@ const SecretTable: FC<SecretTableProps> = (props) => {
 
             <Popconfirm
               placement="topRight"
-              title={`${i18nInstance.t('fc763fd5ddf637fe4ba1ac59e10b8d3a', '确认要删除')}${r.objectMeta.name}${i18nInstance.t('d75cd1214625380b095ff63a891ce293', '秘钥么')}`}
+              title={i18nInstance.t('dd7454e05ce9088395dbeb92bf939fd4', {
+                name: r.objectMeta.name,
+              })}
               onConfirm={() => {
                 onDeleteSecretContent(r);
               }}
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/index.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/index.tsx
index b6dc780b..5614b0d7 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/index.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/index.tsx
@@ -1,15 +1,7 @@
 import i18nInstance from '@/utils/i18n';
 import Panel from '@/components/panel';
 import { useQuery } from '@tanstack/react-query';
-import {
-  Button,
-  Input,
-  message,
-  Space,
-  Table,
-  TableColumnProps,
-  Tag,
-} from 'antd';
+import { App, Button, Input, Space, Table, TableColumnProps, Tag } from 'antd';
 import { GetNamespaces } from '@/services/namespace.ts';
 import type { Namespace } from '@/services/namespace.ts';
 import { Icons } from '@/components/icons';
@@ -19,7 +11,7 @@ import NewNamespaceModal from './new-namespace-modal.tsx';
 import { DeleteResource } from '@/services/unstructured';
 import { useState } from 'react';
 import { DataSelectQuery } from '@/services/base.ts';
-import TagList from '@/components/tag-list';
+import TagList, { convertLabelToTags } from '@/components/tag-list';
 
 const NamespacePage = () => {
   const [searchFilter, setSearchFilter] = useState('');
@@ -35,10 +27,9 @@ const NamespacePage = () => {
     },
   });
   const size = useWindowSize();
-  console.log('size.width', size?.width);
   const columns: TableColumnProps<Namespace>[] = [
     {
-      title: i18nInstance.t('06ff2e9eba7ae422587c6536e337395f'),
+      title: i18nInstance.t('06ff2e9eba7ae422587c6536e337395f', '命名空间名称'),
       key: 'namespaceName',
       width: 200,
       render: (_, r) => {
@@ -46,29 +37,21 @@ const NamespacePage = () => {
       },
     },
     {
-      title: i18nInstance.t('14d342362f66aa86e2aa1c1e11aa1204'),
+      title: i18nInstance.t('14d342362f66aa86e2aa1c1e11aa1204', '标签'),
       key: 'label',
       align: 'left',
-      render: (_, r) => {
-        if (!r?.objectMeta?.labels) {
-          return '-';
-        }
-        const params = Object.keys(r.objectMeta.labels).map((key) => {
-          return {
-            key: `${r.objectMeta.name}-${key}`,
-            value: `${key}:${r.objectMeta.labels[key]}`,
-          };
-        });
-        return (
-          <TagList
-            tags={params}
-            maxLen={size && size.width! > 1800 ? undefined : 1}
-          />
-        );
-      },
+      render: (_, r) => (
+        <TagList
+          tags={convertLabelToTags(r?.objectMeta?.name, r?.objectMeta?.labels)}
+          maxLen={size && size.width! > 1800 ? undefined : 1}
+        />
+      ),
     },
     {
-      title: i18nInstance.t('1d5fc011c19d35d08186afc4bad14be9'),
+      title: i18nInstance.t(
+        '1d5fc011c19d35d08186afc4bad14be9',
+        '是否跳过自动调度',
+      ),
       key: 'skipAutoPropagation',
       render: (_, r) => {
         return r.skipAutoPropagation ? (
@@ -79,12 +62,12 @@ const NamespacePage = () => {
       },
     },
     {
-      title: i18nInstance.t('e4b51d5cd0e4f199e41c25be1c7591d3'),
+      title: i18nInstance.t('e4b51d5cd0e4f199e41c25be1c7591d3', '运行状态'),
       key: 'phase',
       dataIndex: 'phase',
     },
     {
-      title: i18nInstance.t('eca37cb0726c51702f70c486c1c38cf3'),
+      title: i18nInstance.t('eca37cb0726c51702f70c486c1c38cf3', '创建时间'),
       key: 'creationTimestamp',
       render: (_, r) => {
         return dayjs(r.objectMeta.creationTimestamp).format(
@@ -93,17 +76,17 @@ const NamespacePage = () => {
       },
     },
     {
-      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc'),
+      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
       key: 'op',
       width: 200,
       render: (_, r) => {
         return (
           <Space.Compact>
-            <Button size={'small'} type="link">
-              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f')}
+            <Button size={'small'} type="link" disabled={true}>
+              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f', '查看')}
             </Button>
-            <Button size={'small'} type="link">
-              {i18nInstance.t('95b351c86267f3aedf89520959bce689')}
+            <Button size={'small'} type="link" disabled={true}>
+              {i18nInstance.t('95b351c86267f3aedf89520959bce689', '编辑')}
             </Button>
             <Button
               size={'small'}
@@ -116,17 +99,23 @@ const NamespacePage = () => {
                 });
                 if (ret.code === 200) {
                   await messageApi.error(
-                    i18nInstance.t('919994bf077d49f68f016811ffb5600e'),
+                    i18nInstance.t(
+                      '919994bf077d49f68f016811ffb5600e',
+                      '删除命名空间成功',
+                    ),
                   );
                   await refetch();
                 } else {
                   await messageApi.error(
-                    i18nInstance.t('9cdd00dbaa024d64a8b8134ae57974a6'),
+                    i18nInstance.t(
+                      '9cdd00dbaa024d64a8b8134ae57974a6',
+                      '删除命名空间失败',
+                    ),
                   );
                 }
               }}
             >
-              {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b')}
+              {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b', '删除')}
             </Button>
           </Space.Compact>
         );
@@ -135,13 +124,15 @@ const NamespacePage = () => {
   ];
 
   const [showModal, toggleShowModal] = useToggle(false);
-  const [messageApi, messageContextHolder] = message.useMessage();
-
+  const { message: messageApi } = App.useApp();
   return (
     <Panel>
       <div className={'flex flex-row justify-between mb-4'}>
         <Input.Search
-          placeholder={i18nInstance.t('cfaff3e369b9bd51504feb59bf0972a0')}
+          placeholder={i18nInstance.t(
+            'cfaff3e369b9bd51504feb59bf0972a0',
+            '按命名空间搜索',
+          )}
           className={'w-[400px]'}
           onPressEnter={(e) => {
             const input = e.currentTarget.value;
@@ -156,7 +147,7 @@ const NamespacePage = () => {
             toggleShowModal(true);
           }}
         >
-          {i18nInstance.t('ac2f01145a5c4a9aaaf2f828650d91a3')}
+          {i18nInstance.t('ac2f01145a5c4a9aaaf2f828650d91a3', '新增命名空间')}
         </Button>
       </div>
       <Table
@@ -171,13 +162,19 @@ const NamespacePage = () => {
         onOk={async (ret) => {
           if (ret.code === 200) {
             await messageApi.success(
-              i18nInstance.t('03b7ea4ba52a71e18764013f4696afe0'),
+              i18nInstance.t(
+                '03b7ea4ba52a71e18764013f4696afe0',
+                '创建命名空间成功',
+              ),
             );
             toggleShowModal(false);
             await refetch();
           } else {
             await messageApi.error(
-              i18nInstance.t('ca0f9765a014b2d0bcaef7b90c6eddd9'),
+              i18nInstance.t(
+                'ca0f9765a014b2d0bcaef7b90c6eddd9',
+                '创建命名空间失败',
+              ),
             );
           }
         }}
@@ -185,8 +182,6 @@ const NamespacePage = () => {
           toggleShowModal(false);
         }}
       />
-
-      {messageContextHolder}
     </Panel>
   );
 };
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/new-namespace-modal.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/new-namespace-modal.tsx
index 8dc92fc8..90191b29 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/new-namespace-modal.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/new-namespace-modal.tsx
@@ -19,10 +19,10 @@ const NewNamespaceModal: FC<NewNamespaceModalProps> = (props) => {
   return (
     <Modal
       open={open}
-      title={i18nInstance.t('ac2f01145a5c4a9aaaf2f828650d91a3')}
+      title={i18nInstance.t('ac2f01145a5c4a9aaaf2f828650d91a3', '新增命名空间')}
       width={600}
-      okText={i18nInstance.t('38cf16f2204ffab8a6e0187070558721')}
-      cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c')}
+      okText={i18nInstance.t('38cf16f2204ffab8a6e0187070558721', '确定')}
+      cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c', '取消')}
       onOk={async () => {
         try {
           const submitData = await form.validateFields();
@@ -45,31 +45,43 @@ const NewNamespaceModal: FC<NewNamespaceModalProps> = (props) => {
         form={form}
         className={'h-[100px]'}
         validateMessages={{
-          required: i18nInstance.t('e0a23c19b8a0044c5defd167b441d643'),
+          required: i18nInstance.t(
+            'e0a23c19b8a0044c5defd167b441d643',
+            "'${name}' 是必选字段",
+          ),
         }}
       >
         <Form.Item
-          label={i18nInstance.t('06ff2e9eba7ae422587c6536e337395f')}
+          label={i18nInstance.t(
+            '06ff2e9eba7ae422587c6536e337395f',
+            '命名空间名称',
+          )}
           name="name"
           required
           rules={[{ required: true }]}
         >
           <Input
-            placeholder={i18nInstance.t('6375184207a6497c71d305f93908c8a1')}
+            placeholder={i18nInstance.t(
+              '6375184207a6497c71d305f93908c8a1',
+              '请输入命名空间名称',
+            )}
           />
         </Form.Item>
         <Form.Item
-          label={i18nInstance.t('d41f6609ddbfa15fb95074a463f3b71a')}
+          label={i18nInstance.t(
+            'd41f6609ddbfa15fb95074a463f3b71a',
+            '是否跳过自动分发',
+          )}
           name="skipAutoPropagation"
           required
           rules={[{ required: true }]}
         >
           <Radio.Group>
             <Radio value={true}>
-              {i18nInstance.t('0a60ac8f02ccd2cf723f927284877851')}
+              {i18nInstance.t('0a60ac8f02ccd2cf723f927284877851', '是')}
             </Radio>
             <Radio value={false}>
-              {i18nInstance.t('c9744f45e76d885ae1c74d4f4a934b2e')}
+              {i18nInstance.t('c9744f45e76d885ae1c74d4f4a934b2e', '否')}
             </Radio>
           </Radio.Group>
         </Form.Item>
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/ingress-table.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/ingress-table.tsx
index e5ecb2d5..933ffac2 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/ingress-table.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/ingress-table.tsx
@@ -26,7 +26,7 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
   } = props;
   const columns: TableColumnProps<Ingress>[] = [
     {
-      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298'),
+      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
       key: 'namespaceName',
       width: 200,
       render: (_, r) => {
@@ -42,7 +42,7 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
       },
     },
     {
-      title: i18nInstance.t('1f7be0a924280cd098db93c9d81ecccd'),
+      title: i18nInstance.t('1f7be0a924280cd098db93c9d81ecccd', '标签信息'),
       key: 'labelName',
       align: 'left',
       width: '30%',
@@ -60,7 +60,7 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
       },
     },
     {
-      title: i18nInstance.t('8a99082b2c32c843d2241e0ba60a3619'),
+      title: i18nInstance.t('8a99082b2c32c843d2241e0ba60a3619', '分发策略'),
       key: 'propagationPolicies',
       render: (_, r) => {
         const pp = extractPropagationPolicy(r);
@@ -68,7 +68,7 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
       },
     },
     {
-      title: i18nInstance.t('eaf8a02d1b16fcf94302927094af921f'),
+      title: i18nInstance.t('eaf8a02d1b16fcf94302927094af921f', '覆盖策略'),
       key: 'overridePolicies',
       width: 150,
       render: () => {
@@ -76,7 +76,7 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
       },
     },
     {
-      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc'),
+      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
       key: 'op',
       width: 200,
       render: (_, r) => {
@@ -94,7 +94,7 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
                 onViewIngressContent(ret?.data);
               }}
             >
-              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f')}
+              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f', '查看')}
             </Button>
             <Button
               size={'small'}
@@ -103,18 +103,26 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
                 onDeleteIngressContent(r);
               }}
             >
-              {i18nInstance.t('95b351c86267f3aedf89520959bce689')}
+              {i18nInstance.t('95b351c86267f3aedf89520959bce689', '编辑')}
             </Button>
 
             <Popconfirm
               placement="topRight"
-              title={`${i18nInstance.t('fc763fd5ddf637fe4ba1ac59e10b8d3a', '确认要删除')}${r.objectMeta.name}${i18nInstance.t('627ce40030fcda39210cca054bb77775', '工作负载么')}`}
+              title={i18nInstance.t('6163856192e115e6b914d6fb8c4fd82c', {
+                name: r.objectMeta.name,
+              })}
               onConfirm={async () => {}}
-              okText={i18nInstance.t('e83a256e4f5bb4ff8b3d804b5473217a')}
-              cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c')}
+              okText={i18nInstance.t(
+                'e83a256e4f5bb4ff8b3d804b5473217a',
+                '确认',
+              )}
+              cancelText={i18nInstance.t(
+                '625fb26b4b3340f7872b411f401e754c',
+                '取消',
+              )}
             >
               <Button size={'small'} type="link" danger>
-                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b')}
+                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b', '删除')}
               </Button>
             </Popconfirm>
           </Space.Compact>
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/service-editor-modal.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/service-editor-modal.tsx
index ea4c0f86..18b7dcf9 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/service-editor-modal.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/service-editor-modal.tsx
@@ -1,24 +1,24 @@
 import i18nInstance from '@/utils/i18n';
 import { FC, useEffect, useState } from 'react';
-import { Modal } from 'antd';
+import { Form, Modal, Select } from 'antd';
 import Editor from '@monaco-editor/react';
 import { parse, stringify } from 'yaml';
 import _ from 'lodash';
 import { PutResource } from '@/services/unstructured';
 import { CreateDeployment } from '@/services/workload';
-import { IResponse } from '@/services/base.ts';
+import { IResponse, ServiceKind } from '@/services/base.ts';
 export interface NewWorkloadEditorModalProps {
-  mode: 'create' | 'edit';
+  mode: 'create' | 'edit' | 'detail';
   open: boolean;
   serviceContent?: string;
   onOk: (ret: IResponse<any>) => Promise<void> | void;
   onCancel: () => Promise<void> | void;
+  kind: ServiceKind;
 }
 const ServiceEditorModal: FC<NewWorkloadEditorModalProps> = (props) => {
-  const { mode, open, serviceContent = '', onOk, onCancel } = props;
+  const { mode, open, serviceContent = '', onOk, onCancel, kind } = props;
   const [content, setContent] = useState<string>(serviceContent);
   useEffect(() => {
-    console.log('workloadContent', serviceContent);
     setContent(serviceContent);
   }, [serviceContent]);
   function handleEditorChange(value: string | undefined) {
@@ -26,11 +26,17 @@ const ServiceEditorModal: FC<NewWorkloadEditorModalProps> = (props) => {
   }
   return (
     <Modal
-      title={`${mode === 'create' ? i18nInstance.t('66ab5e9f24c8f46012a25c89919fb191') : i18nInstance.t('95b351c86267f3aedf89520959bce689')}${i18nInstance.t('c3bc562e9ffcae6029db730fe218515c', '工作负载')}`}
+      title={
+        mode === 'create'
+          ? i18nInstance.t('c7961c290ec86485d8692f3c09b4075b', '新增服务')
+          : mode === 'edit'
+            ? i18nInstance.t('cc51f34aa418cb3a596fd6470c677bfe', '编辑服务')
+            : i18nInstance.t('ad23e7bbdbe6ed03eebfc27eef7570fa', '查看服务')
+      }
       open={open}
       width={1000}
-      okText={i18nInstance.t('38cf16f2204ffab8a6e0187070558721')}
-      cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c')}
+      okText={i18nInstance.t('38cf16f2204ffab8a6e0187070558721', '确定')}
+      cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c', '取消')}
       destroyOnClose={true}
       onOk={async () => {
         // await onOk()
@@ -68,17 +74,41 @@ const ServiceEditorModal: FC<NewWorkloadEditorModalProps> = (props) => {
         setContent('');
       }}
     >
+      <Form.Item
+        label={i18nInstance.t('924f67de61fc9e07fff979306900dc6a', '服务类型')}
+      >
+        <Select
+          value={kind}
+          disabled
+          options={[
+            {
+              label: 'Service',
+              value: ServiceKind.Service,
+            },
+            {
+              label: 'Ingress',
+              value: ServiceKind.Ingress,
+            },
+          ]}
+          style={{
+            width: 200,
+          }}
+        />
+      </Form.Item>
       <Editor
         height="600px"
         defaultLanguage="yaml"
         value={content}
-        theme="vs-dark"
+        theme="vs"
         options={{
-          theme: 'vs-dark',
+          theme: 'vs',
           lineNumbers: 'on',
+          fontSize: 15,
+          readOnly: mode === 'detail',
           minimap: {
             enabled: false,
           },
+          wordWrap: 'on',
         }}
         onChange={handleEditorChange}
       />
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/service-table.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/service-table.tsx
index a63a0ff0..a87e3b46 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/service-table.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/service-table.tsx
@@ -14,6 +14,7 @@ interface ServiceTableProps {
   selectedWorkSpace: string;
   searchText: string;
   onViewServiceContent: (r: any) => void;
+  onEditServiceContent: (r: any) => void;
   onDeleteServiceContent: (r: Service) => void;
 }
 const ServiceTable: FC<ServiceTableProps> = (props) => {
@@ -22,11 +23,12 @@ const ServiceTable: FC<ServiceTableProps> = (props) => {
     selectedWorkSpace,
     searchText,
     onViewServiceContent,
+    onEditServiceContent,
     onDeleteServiceContent,
   } = props;
   const columns: TableColumnProps<Service>[] = [
     {
-      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298'),
+      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
       key: 'namespaceName',
       width: 200,
       render: (_, r) => {
@@ -35,14 +37,14 @@ const ServiceTable: FC<ServiceTableProps> = (props) => {
     },
     {
       title: i18nInstance.t('8f3747c057d893862fbe4b7980e9b451', '服务名称'),
-      key: 'servicename',
+      key: 'serviceName',
       width: 300,
       render: (_, r) => {
         return r.objectMeta.name;
       },
     },
     {
-      title: i18nInstance.t('1f7be0a924280cd098db93c9d81ecccd'),
+      title: i18nInstance.t('1f7be0a924280cd098db93c9d81ecccd', '标签信息'),
       key: 'labelName',
       align: 'left',
       width: '30%',
@@ -60,7 +62,7 @@ const ServiceTable: FC<ServiceTableProps> = (props) => {
       },
     },
     {
-      title: i18nInstance.t('8a99082b2c32c843d2241e0ba60a3619'),
+      title: i18nInstance.t('8a99082b2c32c843d2241e0ba60a3619', '分发策略'),
       key: 'propagationPolicies',
       render: (_, r) => {
         const pp = extractPropagationPolicy(r);
@@ -68,7 +70,7 @@ const ServiceTable: FC<ServiceTableProps> = (props) => {
       },
     },
     {
-      title: i18nInstance.t('eaf8a02d1b16fcf94302927094af921f'),
+      title: i18nInstance.t('eaf8a02d1b16fcf94302927094af921f', '覆盖策略'),
       key: 'overridePolicies',
       width: 150,
       render: () => {
@@ -76,7 +78,7 @@ const ServiceTable: FC<ServiceTableProps> = (props) => {
       },
     },
     {
-      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc'),
+      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
       key: 'op',
       width: 200,
       render: (_, r) => {
@@ -94,27 +96,39 @@ const ServiceTable: FC<ServiceTableProps> = (props) => {
                 onViewServiceContent(ret?.data);
               }}
             >
-              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f')}
+              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f', '查看')}
             </Button>
             <Button
               size={'small'}
               type="link"
               onClick={async () => {
-                onDeleteServiceContent(r);
+                const ret = await GetResource({
+                  kind: r.typeMeta.kind,
+                  name: r.objectMeta.name,
+                  namespace: r.objectMeta.namespace,
+                });
+                onEditServiceContent(ret?.data);
               }}
             >
-              {i18nInstance.t('95b351c86267f3aedf89520959bce689')}
+              {i18nInstance.t('95b351c86267f3aedf89520959bce689', '编辑')}
             </Button>
 
             <Popconfirm
               placement="topRight"
-              title={`${i18nInstance.t('fc763fd5ddf637fe4ba1ac59e10b8d3a', '确认要删除')}${r.objectMeta.name}${i18nInstance.t('627ce40030fcda39210cca054bb77775', '工作负载么')}`}
-              onConfirm={async () => {}}
-              okText={i18nInstance.t('e83a256e4f5bb4ff8b3d804b5473217a')}
+              title={i18nInstance.t('6163856192e115e6b914d6fb8c4fd82c', {
+                name: r.objectMeta.name,
+              })}
+              onConfirm={() => {
+                onDeleteServiceContent(r);
+              }}
+              okText={i18nInstance.t(
+                'e83a256e4f5bb4ff8b3d804b5473217a',
+                '确认',
+              )}
               cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c')}
             >
               <Button size={'small'} type="link" danger>
-                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b')}
+                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b', '删除')}
               </Button>
             </Popconfirm>
           </Space.Compact>
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/index.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/index.tsx
index b0921e4e..15aff68c 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/index.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/service/index.tsx
@@ -3,14 +3,13 @@ import Panel from '@/components/panel';
 import { Button, Input, Segmented, Select } from 'antd';
 import { ServiceKind } from '@/services/base';
 import { Icons } from '@/components/icons';
-import { useQuery } from '@tanstack/react-query';
-import { GetNamespaces } from '@/services/namespace';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useToggle, useWindowSize } from '@uidotdev/usehooks';
 import ServiceTable from './components/service-table';
 import ServiceEditorModal from './components/service-editor-modal';
 import { stringify } from 'yaml';
 import IngressTable from '@/pages/multicloud-resource-manage/service/components/ingress-table';
+import useNamespace from '@/hooks/use-namespace.ts';
 const ServicePage = () => {
   const [filter, setFilter] = useState<{
     selectedWorkSpace: string;
@@ -21,26 +20,11 @@ const ServicePage = () => {
     searchText: '',
     kind: ServiceKind.Service,
   });
-  const { data: nsData, isLoading: isNsDataLoading } = useQuery({
-    queryKey: ['GetNamespaces'],
-    queryFn: async () => {
-      const clusters = await GetNamespaces({});
-      return clusters.data || {};
-    },
-  });
-  const nsOptions = useMemo(() => {
-    if (!nsData?.namespaces) return [];
-    return nsData.namespaces.map((item) => {
-      return {
-        title: item.objectMeta.name,
-        value: item.objectMeta.name,
-      };
-    });
-  }, [nsData]);
+  const { nsOptions, isNsDataLoading } = useNamespace({});
   const size = useWindowSize();
   const labelTagNum = size && size.width! > 1800 ? undefined : 1;
   const [editorState, setEditorState] = useState<{
-    mode: 'create' | 'edit';
+    mode: 'create' | 'edit' | 'detail';
     content: string;
   }>({
     mode: 'create',
@@ -103,7 +87,7 @@ const ServicePage = () => {
       </div>
       <div className={'flex flex-row space-x-4 mb-4'}>
         <h3 className={'leading-[32px]'}>
-          {i18nInstance.t('280c56077360c204e536eb770495bc5f')}
+          {i18nInstance.t('280c56077360c204e536eb770495bc5f', '命名空间')}
         </h3>
         <Select
           options={nsOptions}
@@ -120,7 +104,10 @@ const ServicePage = () => {
           }}
         />
         <Input.Search
-          placeholder={i18nInstance.t('cfaff3e369b9bd51504feb59bf0972a0')}
+          placeholder={i18nInstance.t(
+            'cfaff3e369b9bd51504feb59bf0972a0',
+            '按命名空间搜索',
+          )}
           className={'w-[300px]'}
           onPressEnter={(e) => {
             const input = e.currentTarget.value;
@@ -137,6 +124,13 @@ const ServicePage = () => {
           searchText={filter.searchText}
           selectedWorkSpace={filter.selectedWorkSpace}
           onViewServiceContent={(r) => {
+            setEditorState({
+              mode: 'detail',
+              content: stringify(r),
+            });
+            toggleShowModal(true);
+          }}
+          onEditServiceContent={(r) => {
             setEditorState({
               mode: 'edit',
               content: stringify(r),
@@ -173,6 +167,7 @@ const ServicePage = () => {
           resetEditorState();
           toggleShowModal(false);
         }}
+        kind={filter.kind}
       />
     </Panel>
   );
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/index.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/index.tsx
index 980f6d6d..44451915 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/index.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/index.tsx
@@ -1,9 +1,9 @@
 import i18nInstance from '@/utils/i18n';
 import Panel from '@/components/panel';
 import {
+  App,
   Button,
   Input,
-  message,
   Popconfirm,
   Segmented,
   Select,
@@ -13,11 +13,10 @@ import {
   Tag,
 } from 'antd';
 import { Icons } from '@/components/icons';
-import { GetNamespaces } from '@/services/namespace';
 import type { DeploymentWorkload } from '@/services/workload';
 import { GetWorkloads } from '@/services/workload';
 import { useQuery } from '@tanstack/react-query';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { DeleteResource, GetResource } from '@/services/unstructured.ts';
 import NewWorkloadEditorModal from './new-workload-editor-modal.tsx';
 import WorkloadDetailDrawer, {
@@ -25,13 +24,9 @@ import WorkloadDetailDrawer, {
 } from './workload-detail-drawer.tsx';
 import { useToggle, useWindowSize } from '@uidotdev/usehooks';
 import { stringify } from 'yaml';
-import TagList from '@/components/tag-list';
+import TagList, { convertLabelToTags } from '@/components/tag-list';
 import { WorkloadKind } from '@/services/base.ts';
-
-/*
-propagationpolicy.karmada.io/name: "nginx-propagation"
-propagationpolicy.karmada.io/namespace: "default"
-*/
+import useNamespace from '@/hooks/use-namespace.ts';
 
 const propagationpolicyKey = 'propagationpolicy.karmada.io/name';
 const WorkloadPage = () => {
@@ -44,22 +39,8 @@ const WorkloadPage = () => {
     selectedWorkSpace: '',
     searchText: '',
   });
-  const { data: nsData, isLoading: isNsDataLoading } = useQuery({
-    queryKey: ['GetNamespaces'],
-    queryFn: async () => {
-      const clusters = await GetNamespaces({});
-      return clusters.data || {};
-    },
-  });
-  const nsOptions = useMemo(() => {
-    if (!nsData?.namespaces) return [];
-    return nsData.namespaces.map((item) => {
-      return {
-        title: item.objectMeta.name,
-        value: item.objectMeta.name,
-      };
-    });
-  }, [nsData]);
+
+  const { nsOptions, isNsDataLoading } = useNamespace({});
   const { data, isLoading, refetch } = useQuery({
     queryKey: ['GetWorkloads', JSON.stringify(filter)],
     queryFn: async () => {
@@ -96,7 +77,7 @@ const WorkloadPage = () => {
   const size = useWindowSize();
   const columns: TableColumnProps<DeploymentWorkload>[] = [
     {
-      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298'),
+      title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
       key: 'namespaceName',
       width: 200,
       render: (_, r) => {
@@ -104,7 +85,7 @@ const WorkloadPage = () => {
       },
     },
     {
-      title: i18nInstance.t('89d19c60880d35c2bd88af0d9cc0497b'),
+      title: i18nInstance.t('89d19c60880d35c2bd88af0d9cc0497b', '负载名称'),
       key: 'workloadName',
       width: 200,
       render: (_, r) => {
@@ -112,30 +93,19 @@ const WorkloadPage = () => {
       },
     },
     {
-      title: i18nInstance.t('1f7be0a924280cd098db93c9d81ecccd'),
+      title: i18nInstance.t('1f7be0a924280cd098db93c9d81ecccd', '标签信息'),
       key: 'labelName',
       align: 'left',
       width: '30%',
-      render: (_, r) => {
-        if (!r?.objectMeta?.labels) {
-          return '-';
-        }
-        const params = Object.keys(r.objectMeta.labels).map((key) => {
-          return {
-            key: `${r.objectMeta.name}-${key}`,
-            value: `${key}:${r.objectMeta.labels[key]}`,
-          };
-        });
-        return (
-          <TagList
-            tags={params}
-            maxLen={size && size.width! > 1800 ? undefined : 1}
-          />
-        );
-      },
+      render: (_, r) => (
+        <TagList
+          tags={convertLabelToTags(r?.objectMeta?.name, r?.objectMeta?.labels)}
+          maxLen={size && size.width! > 1800 ? undefined : 1}
+        />
+      ),
     },
     {
-      title: i18nInstance.t('8a99082b2c32c843d2241e0ba60a3619'),
+      title: i18nInstance.t('8a99082b2c32c843d2241e0ba60a3619', '分发策略'),
       key: 'propagationPolicies',
       render: (_, r) => {
         if (!r?.objectMeta?.annotations?.[propagationpolicyKey]) {
@@ -145,7 +115,7 @@ const WorkloadPage = () => {
       },
     },
     {
-      title: i18nInstance.t('eaf8a02d1b16fcf94302927094af921f'),
+      title: i18nInstance.t('eaf8a02d1b16fcf94302927094af921f', '覆盖策略'),
       key: 'overridePolicies',
       width: 150,
       render: () => {
@@ -153,7 +123,7 @@ const WorkloadPage = () => {
       },
     },
     {
-      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc'),
+      title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
       key: 'op',
       width: 200,
       render: (_, r) => {
@@ -171,7 +141,7 @@ const WorkloadPage = () => {
                 });
               }}
             >
-              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f')}
+              {i18nInstance.t('607e7a4f377fa66b0b28ce318aab841f', '查看')}
             </Button>
             <Button
               size={'small'}
@@ -189,12 +159,14 @@ const WorkloadPage = () => {
                 toggleShowModal(true);
               }}
             >
-              {i18nInstance.t('95b351c86267f3aedf89520959bce689')}
+              {i18nInstance.t('95b351c86267f3aedf89520959bce689', '编辑')}
             </Button>
 
             <Popconfirm
               placement="topRight"
-              title={`${i18nInstance.t('fc763fd5ddf637fe4ba1ac59e10b8d3a', '确认要删除')}${r.objectMeta.name}${i18nInstance.t('627ce40030fcda39210cca054bb77775', '工作负载么')}`}
+              title={i18nInstance.t('f0ade52acfa0bc5bd63e7cb29db84959', {
+                name: r.objectMeta.name,
+              })}
               onConfirm={async () => {
                 // todo after delete, need to wait until resource deleted
                 const ret = await DeleteResource({
@@ -206,11 +178,17 @@ const WorkloadPage = () => {
                   await refetch();
                 }
               }}
-              okText={i18nInstance.t('e83a256e4f5bb4ff8b3d804b5473217a')}
-              cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c')}
+              okText={i18nInstance.t(
+                'e83a256e4f5bb4ff8b3d804b5473217a',
+                '确认',
+              )}
+              cancelText={i18nInstance.t(
+                '625fb26b4b3340f7872b411f401e754c',
+                '取消',
+              )}
             >
               <Button size={'small'} type="link" danger>
-                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b')}
+                {i18nInstance.t('2f4aaddde33c9b93c36fd2503f3d122b', '删除')}
               </Button>
             </Popconfirm>
           </Space.Compact>
@@ -218,7 +196,7 @@ const WorkloadPage = () => {
       },
     },
   ];
-  const [messageApi, messageContextHolder] = message.useMessage();
+  const { message: messageApi } = App.useApp();
   return (
     <Panel>
       <div className={'flex flex-row justify-between mb-4'}>
@@ -277,12 +255,12 @@ const WorkloadPage = () => {
             toggleShowModal(true);
           }}
         >
-          {i18nInstance.t('96d6b0fcc58b6f65dc4c00c6138d2ac0')}
+          {i18nInstance.t('96d6b0fcc58b6f65dc4c00c6138d2ac0', '新增工作负载')}
         </Button>
       </div>
       <div className={'flex flex-row space-x-4 mb-4'}>
         <h3 className={'leading-[32px]'}>
-          {i18nInstance.t('280c56077360c204e536eb770495bc5f')}
+          {i18nInstance.t('280c56077360c204e536eb770495bc5f', '命名空间')}：
         </h3>
         <Select
           options={nsOptions}
@@ -299,7 +277,10 @@ const WorkloadPage = () => {
           }}
         />
         <Input.Search
-          placeholder={i18nInstance.t('cfaff3e369b9bd51504feb59bf0972a0')}
+          placeholder={i18nInstance.t(
+            'cfaff3e369b9bd51504feb59bf0972a0',
+            '按命名空间搜索',
+          )}
           className={'w-[300px]'}
           onPressEnter={(e) => {
             const input = e.currentTarget.value;
@@ -327,8 +308,8 @@ const WorkloadPage = () => {
         onOk={async (ret) => {
           const msg =
             editorState.mode === 'edit'
-              ? i18nInstance.t('8347a927c09a4ec2fe473b0a93f667d0')
-              : i18nInstance.t('66ab5e9f24c8f46012a25c89919fb191');
+              ? i18nInstance.t('8347a927c09a4ec2fe473b0a93f667d0', '修改')
+              : i18nInstance.t('66ab5e9f24c8f46012a25c89919fb191', '新增');
           if (ret.code === 200) {
             await messageApi.success(
               `${i18nInstance.t('c3bc562e9ffcae6029db730fe218515c', '工作负载')}${msg}${i18nInstance.t('330363dfc524cff2488f2ebde0500896', '成功')}`,
@@ -362,8 +343,6 @@ const WorkloadPage = () => {
           });
         }}
       />
-
-      {messageContextHolder}
     </Panel>
   );
 };
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/new-workload-editor-modal.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/new-workload-editor-modal.tsx
index 517a08c7..d885d15c 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/new-workload-editor-modal.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/new-workload-editor-modal.tsx
@@ -19,7 +19,6 @@ const NewWorkloadEditorModal: FC<NewWorkloadEditorModalProps> = (props) => {
   const { mode, open, workloadContent = '', onOk, onCancel, kind } = props;
   const [content, setContent] = useState<string>(workloadContent);
   useEffect(() => {
-    console.log('workloadContent', workloadContent);
     setContent(workloadContent);
   }, [workloadContent]);
 
@@ -28,11 +27,15 @@ const NewWorkloadEditorModal: FC<NewWorkloadEditorModalProps> = (props) => {
   }
   return (
     <Modal
-      title={`${mode === 'create' ? i18nInstance.t('66ab5e9f24c8f46012a25c89919fb191') : i18nInstance.t('95b351c86267f3aedf89520959bce689')}${i18nInstance.t('c3bc562e9ffcae6029db730fe218515c', '工作负载')}`}
+      title={
+        mode === 'create'
+          ? i18nInstance.t('96d6b0fcc58b6f65dc4c00c6138d2ac0', '新增工作负载')
+          : i18nInstance.t('634a943c97e905149acb81cef5bda28e', '编辑工作负载')
+      }
       open={open}
       width={1000}
-      okText={i18nInstance.t('38cf16f2204ffab8a6e0187070558721')}
-      cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c')}
+      okText={i18nInstance.t('38cf16f2204ffab8a6e0187070558721', '确定')}
+      cancelText={i18nInstance.t('625fb26b4b3340f7872b411f401e754c', '取消')}
       destroyOnClose={true}
       onOk={async () => {
         // await onOk()
@@ -70,7 +73,12 @@ const NewWorkloadEditorModal: FC<NewWorkloadEditorModalProps> = (props) => {
         setContent('');
       }}
     >
-      <Form.Item label={'工作负载类型'}>
+      <Form.Item
+        label={i18nInstance.t(
+          '0a3e7cdadc44fb133265152268761abc',
+          '工作负载类型',
+        )}
+      >
         <Select
           value={kind}
           disabled
@@ -113,6 +121,7 @@ const NewWorkloadEditorModal: FC<NewWorkloadEditorModalProps> = (props) => {
           minimap: {
             enabled: false,
           },
+          wordWrap: 'on',
         }}
         onChange={handleEditorChange}
       />
diff --git a/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/workload-detail-drawer.tsx b/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/workload-detail-drawer.tsx
index cc67da1d..f40048c7 100644
--- a/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/workload-detail-drawer.tsx
+++ b/ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/workload-detail-drawer.tsx
@@ -4,7 +4,6 @@ import {
   Drawer,
   Card,
   Statistic,
-  Tag,
   Table,
   TableColumnProps,
   Typography,
@@ -18,6 +17,8 @@ import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import styles from './index.module.less';
 import { WorkloadKind } from '@/services/base.ts';
+import { cn } from '@/utils/cn';
+import TagList, { convertLabelToTags } from '@/components/tag-list';
 
 export interface WorkloadDetailDrawerProps {
   open: boolean;
@@ -58,27 +59,27 @@ const WorkloadDetailDrawer: FC<WorkloadDetailDrawerProps> = (props) => {
   });
   const columns: TableColumnProps<WorkloadEvent>[] = [
     {
-      title: i18nInstance.t('383a6d166f8f60e16e726ccc9c483631'),
+      title: i18nInstance.t('383a6d166f8f60e16e726ccc9c483631', '类别'),
       key: 'type',
       dataIndex: 'type',
     },
     {
-      title: i18nInstance.t('26ca20b161c33362d88eb0ba0bc90751'),
+      title: i18nInstance.t('26ca20b161c33362d88eb0ba0bc90751', '来源'),
       key: 'sourceComponent',
       dataIndex: 'sourceComponent',
     },
     {
-      title: i18nInstance.t('03663386e7d82f847634a6ee9111a32b'),
+      title: i18nInstance.t('03663386e7d82f847634a6ee9111a32b', '最后检测时间'),
       key: 'lastSeen',
       dataIndex: 'lastSeen',
     },
     {
-      title: i18nInstance.t('41dfb0bf6167ca035b93caf3e06d6c95'),
+      title: i18nInstance.t('41dfb0bf6167ca035b93caf3e06d6c95', '原因'),
       key: 'reason',
       dataIndex: 'reason',
     },
     {
-      title: i18nInstance.t('d8c7e04c8e2be23dd3b81a31db6e04f1'),
+      title: i18nInstance.t('d8c7e04c8e2be23dd3b81a31db6e04f1', '信息'),
       key: 'message',
       dataIndex: 'message',
     },
@@ -86,27 +87,45 @@ const WorkloadDetailDrawer: FC<WorkloadDetailDrawerProps> = (props) => {
 
   return (
     <Drawer
-      title={i18nInstance.t('0af9d9af618327e912ac9f91bbe6a30f')}
+      title={i18nInstance.t('0af9d9af618327e912ac9f91bbe6a30f', '工作负载详情')}
       placement="right"
       open={open}
       width={800}
       loading={isDetailDataLoading}
       onClose={onClose}
     >
-      <Card title={i18nInstance.t('9e5ffa068ed435ced73dc9bf5dd8e09c')} bordered>
+      <Card
+        title={i18nInstance.t('9e5ffa068ed435ced73dc9bf5dd8e09c', '基本信息')}
+        bordered
+      >
         <div className="flex flex-row space-x-4 mb-4">
           <Statistic
-            title={i18nInstance.t('d7ec2d3fea4756bc1642e0f10c180cf5')}
-            value={detailData?.objectMeta?.name || '-'}
+            className={styles['no-value']}
+            title={i18nInstance.t('d7ec2d3fea4756bc1642e0f10c180cf5', '名称')}
+            prefix={
+              <Typography.Text
+                ellipsis={{
+                  tooltip: detailData?.objectMeta?.name || '-',
+                }}
+                className={'w-[120px]'}
+              >
+                {detailData?.objectMeta?.name || '-'}
+              </Typography.Text>
+            }
           />
           <Statistic
-            title={i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298')}
+            title={i18nInstance.t(
+              'a4b28a416f0b6f3c215c51e79e517298',
+              '命名空间',
+            )}
             value={detailData?.objectMeta?.namespace || '-'}
           />
 
-          {/*'2024-01-01'*/}
           <Statistic
-            title={i18nInstance.t('eca37cb0726c51702f70c486c1c38cf3')}
+            title={i18nInstance.t(
+              'eca37cb0726c51702f70c486c1c38cf3',
+              '创建时间',
+            )}
             value={
               detailData?.objectMeta?.creationTimestamp
                 ? dayjs(detailData?.objectMeta?.creationTimestamp).format(
@@ -117,12 +136,18 @@ const WorkloadDetailDrawer: FC<WorkloadDetailDrawerProps> = (props) => {
           />
 
           <Statistic
-            title={i18nInstance.t('4a6341a8bcc68e0b7120dbc89014b6a2')}
+            title={i18nInstance.t(
+              '4a6341a8bcc68e0b7120dbc89014b6a2',
+              '持续时间',
+            )}
             value="2h"
           />
           <Statistic
             className={styles['no-value']}
-            title={i18nInstance.t('70e6882e567e3dbc86df3ef2fb2f65e4')}
+            title={i18nInstance.t(
+              '70e6882e567e3dbc86df3ef2fb2f65e4',
+              '资源UID',
+            )}
             prefix={
               <Typography.Text
                 ellipsis={{
@@ -138,28 +163,35 @@ const WorkloadDetailDrawer: FC<WorkloadDetailDrawerProps> = (props) => {
 
         <div className="mb-4">
           <div className="text-base text-gray-500 mb-2">
-            {i18nInstance.t('14d342362f66aa86e2aa1c1e11aa1204')}
+            {i18nInstance.t('14d342362f66aa86e2aa1c1e11aa1204', '标签')}
           </div>
           <div>
-            <Tag>k8s-app:vpc-nginx</Tag>
-            <Tag>app:vpc-nginx</Tag>
-            <Tag>controlled-by:helm-client</Tag>
+            <TagList
+              tags={convertLabelToTags(
+                detailData?.objectMeta?.name || '',
+                detailData?.objectMeta?.labels,
+              )}
+            />
           </div>
         </div>
         <div>
           <div className="text-base text-gray-500 mb-2">
-            {i18nInstance.t('c11db1c192a765494c8859d854199085')}
+            {i18nInstance.t('c11db1c192a765494c8859d854199085', '注解')}
           </div>
           <div>
-            <Tag>deployment.kubernetes.io/revision:2</Tag>
-            <Tag>kubectl.kubernetes.io/last-applied-configuration</Tag>
+            <TagList
+              tags={convertLabelToTags(
+                detailData?.objectMeta?.name || '',
+                detailData?.objectMeta?.annotations,
+              )}
+            />
           </div>
         </div>
       </Card>
       <Card
-        title={i18nInstance.t('be41a5333fef1e665214254aaf11f4fd')}
+        title={i18nInstance.t('be41a5333fef1e665214254aaf11f4fd', '调度信息')}
         bordered
-        className={styles['schedule-container']}
+        className={cn(styles['schedule-container'], 'mt-[6px]')}
       >
         <Table
           rowKey={(e) => e.objectMeta.uid}
diff --git a/ui/apps/dashboard/src/pages/overview/index.tsx b/ui/apps/dashboard/src/pages/overview/index.tsx
index 6bb3a1dd..34a10f36 100644
--- a/ui/apps/dashboard/src/pages/overview/index.tsx
+++ b/ui/apps/dashboard/src/pages/overview/index.tsx
@@ -1,12 +1,12 @@
 import i18nInstance from '@/utils/i18n';
 import Panel from '@/components/panel';
-import { Badge, Descriptions, DescriptionsProps, Statistic } from 'antd';
+import { Badge, Descriptions, DescriptionsProps, Statistic, Spin } from 'antd';
 import { useQuery } from '@tanstack/react-query';
 import { GetOverview } from '@/services/overview.ts';
 import dayjs from 'dayjs';
 
 const Overview = () => {
-  const { data } = useQuery({
+  const { data, isLoading } = useQuery({
     queryKey: ['GetOverview'],
     queryFn: async () => {
       const ret = await GetOverview();
@@ -16,28 +16,31 @@ const Overview = () => {
   const basicItems: DescriptionsProps['items'] = [
     {
       key: 'karmada-version',
-      label: i18nInstance.t('66e8579fa53a0cdf402e882a3574a380'),
+      label: i18nInstance.t('66e8579fa53a0cdf402e882a3574a380', 'Karmada版本'),
       children: data?.karmadaInfo.version.gitVersion || '-',
     },
     {
       key: 'karmada-status',
-      label: i18nInstance.t('3fea7ca76cdece641436d7ab0d02ab1b'),
+      label: i18nInstance.t('3fea7ca76cdece641436d7ab0d02ab1b', '状态'),
       children:
         data?.karmadaInfo.status === 'running' ? (
           <Badge
             color={'green'}
-            text={i18nInstance.t('d679aea3aae1201e38c4baaaeef86efe')}
+            text={i18nInstance.t('d679aea3aae1201e38c4baaaeef86efe', '运行中')}
           />
         ) : (
           <Badge
             color={'red'}
-            text={i18nInstance.t('903b25f64e1c0d9b7f56ed80c256a2e7')}
+            text={i18nInstance.t(
+              '903b25f64e1c0d9b7f56ed80c256a2e7',
+              '未知状态',
+            )}
           />
         ),
     },
     {
-      key: 'karmada-createtime',
-      label: i18nInstance.t('eca37cb0726c51702f70c486c1c38cf3'),
+      key: 'karmada-create-time',
+      label: i18nInstance.t('eca37cb0726c51702f70c486c1c38cf3', '创建时间'),
       children:
         (data?.karmadaInfo.createTime &&
           dayjs(data?.karmadaInfo.createTime).format('YYYY-MM-DD HH:mm:ss')) ||
@@ -45,18 +48,27 @@ const Overview = () => {
     },
     {
       key: 'cluster-info',
-      label: i18nInstance.t('a0d6cb39b547d45a530a3308dce79c86'),
+      label: i18nInstance.t('a0d6cb39b547d45a530a3308dce79c86', '工作集群信息'),
       children: (
         <>
           <div>
-            <span>{i18nInstance.t('6860e13ac48e930f8076ebfe37176b78')}</span>
+            <span>
+              {i18nInstance.t('6860e13ac48e930f8076ebfe37176b78', '节点数量')}
+            </span>
+            ：
             <span>
               {data?.memberClusterStatus.nodeSummary.readyNum}/
               {data?.memberClusterStatus.nodeSummary.totalNum}
             </span>
           </div>
           <div>
-            <span>{i18nInstance.t('a1dacced95ddca3603110bdb1ae46af1')}</span>
+            <span>
+              {i18nInstance.t(
+                'a1dacced95ddca3603110bdb1ae46af1',
+                'CPU使用情况',
+              )}
+            </span>
+            ：
             <span>
               {data?.memberClusterStatus.cpuSummary.allocatedCPU &&
                 data?.memberClusterStatus.cpuSummary.allocatedCPU.toFixed(2)}
@@ -64,7 +76,13 @@ const Overview = () => {
             </span>
           </div>
           <div>
-            <span>{i18nInstance.t('5eaa09de6e55b322fcc299f641d73ce7')}</span>
+            <span>
+              {i18nInstance.t(
+                '5eaa09de6e55b322fcc299f641d73ce7',
+                'Memory使用情况',
+              )}
+            </span>
+            ：
             <span>
               {data?.memberClusterStatus?.memorySummary?.allocatedMemory &&
                 (
@@ -83,7 +101,13 @@ const Overview = () => {
             </span>
           </div>
           <div>
-            <span>{i18nInstance.t('820c4003e23553b3124f1608916d5282')}</span>
+            <span>
+              {i18nInstance.t(
+                '820c4003e23553b3124f1608916d5282',
+                'Pod分配情况',
+              )}
+            </span>
+            ：
             <span>
               {data?.memberClusterStatus?.podSummary?.allocatedPod}/
               {data?.memberClusterStatus?.podSummary?.totalPod}
@@ -99,16 +123,22 @@ const Overview = () => {
   const resourceItems: DescriptionsProps['items'] = [
     {
       key: 'policy-info',
-      label: i18nInstance.t('85c6051762df2fe8f93ebc1083b7f6a4'),
+      label: i18nInstance.t('85c6051762df2fe8f93ebc1083b7f6a4', '策略信息'),
       children: (
         <div className="flex flex-row space-x-4">
           <Statistic
-            title={i18nInstance.t('a95abe7b8eeb55427547e764bf39f1c4')}
+            title={i18nInstance.t(
+              'a95abe7b8eeb55427547e764bf39f1c4',
+              '调度策略',
+            )}
             value={data?.clusterResourceStatus.propagationPolicyNum}
           />
 
           <Statistic
-            title={i18nInstance.t('0a7e9443c41575378d2db1e288d3f1cb')}
+            title={i18nInstance.t(
+              '0a7e9443c41575378d2db1e288d3f1cb',
+              '差异化策略',
+            )}
             value={data?.clusterResourceStatus.overridePolicyNum}
           />
         </div>
@@ -118,26 +148,38 @@ const Overview = () => {
     },
     {
       key: 'multicloud-resources-info',
-      label: i18nInstance.t('612af712ef5ed7868a6b2f1d3d68530c'),
+      label: i18nInstance.t('612af712ef5ed7868a6b2f1d3d68530c', '多云资源信息'),
       children: (
         <div className="flex flex-row space-x-4">
           <Statistic
-            title={i18nInstance.t('1200778cf86309309154ef88804fa22e')}
+            title={i18nInstance.t(
+              '1200778cf86309309154ef88804fa22e',
+              '多云命名空间',
+            )}
             value={data?.clusterResourceStatus.namespaceNum}
           />
 
           <Statistic
-            title={i18nInstance.t('3692cf6a2e079d34e7e5035aa98b1335')}
+            title={i18nInstance.t(
+              '3692cf6a2e079d34e7e5035aa98b1335',
+              '多云工作负载',
+            )}
             value={data?.clusterResourceStatus.workloadNum}
           />
 
           <Statistic
-            title={i18nInstance.t('2030a6e845ad6476fecbc1711c9f139d')}
+            title={i18nInstance.t(
+              '2030a6e845ad6476fecbc1711c9f139d',
+              '多云服务与路由',
+            )}
             value={data?.clusterResourceStatus.serviceNum}
           />
 
           <Statistic
-            title={i18nInstance.t('0287028ec7eefa1333b56ee340d325a0')}
+            title={i18nInstance.t(
+              '0287028ec7eefa1333b56ee340d325a0',
+              '多云配置与秘钥',
+            )}
             value={data?.clusterResourceStatus.configNum}
           />
         </div>
@@ -148,22 +190,24 @@ const Overview = () => {
   ];
 
   return (
-    <Panel>
-      <Descriptions
-        className={'mt-8'}
-        title={i18nInstance.t('9e5ffa068ed435ced73dc9bf5dd8e09c')}
-        bordered
-        items={basicItems}
-      />
+    <Spin spinning={isLoading}>
+      <Panel>
+        <Descriptions
+          className={'mt-8'}
+          title={i18nInstance.t('9e5ffa068ed435ced73dc9bf5dd8e09c', '基本信息')}
+          bordered
+          items={basicItems}
+        />
 
-      <Descriptions
-        className={'mt-8'}
-        title={i18nInstance.t('ba584c3d8a7e637efe00449e0c93900c')}
-        bordered
-        items={resourceItems}
-        labelStyle={{ width: '150px' }}
-      />
-    </Panel>
+        <Descriptions
+          className={'mt-8'}
+          title={i18nInstance.t('ba584c3d8a7e637efe00449e0c93900c', '资源信息')}
+          bordered
+          items={resourceItems}
+          labelStyle={{ width: '150px' }}
+        />
+      </Panel>
+    </Spin>
   );
 };
 
diff --git a/ui/apps/dashboard/src/routes/route.tsx b/ui/apps/dashboard/src/routes/route.tsx
index e7410d57..1982504f 100644
--- a/ui/apps/dashboard/src/routes/route.tsx
+++ b/ui/apps/dashboard/src/routes/route.tsx
@@ -87,7 +87,10 @@ export function getRoutes() {
               element: <MultiCloudNamespace />,
               handle: {
                 sidebarKey: 'NAMESPACE',
-                sidebarName: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298'),
+                sidebarName: i18nInstance.t(
+                  'a4b28a416f0b6f3c215c51e79e517298',
+                  '命名空间',
+                ),
               },
             },
             {
@@ -208,7 +211,10 @@ export function getRoutes() {
           path: '/advanced-config',
           handle: {
             sidebarKey: 'ADVANCED-CONFIG',
-            sidebarName: i18nInstance.t('1f318234cab713b51b5172d91770bc11'),
+            sidebarName: i18nInstance.t(
+              '1f318234cab713b51b5172d91770bc11',
+              '高级配置',
+            ),
             icon: <Icons.advancedConfig {...IconStyles} />,
             isPage: false,
           },
diff --git a/ui/apps/dashboard/src/services/base.ts b/ui/apps/dashboard/src/services/base.ts
index 41604fe0..043f5421 100644
--- a/ui/apps/dashboard/src/services/base.ts
+++ b/ui/apps/dashboard/src/services/base.ts
@@ -87,6 +87,17 @@ export enum ConfigKind {
   ConfigMap = 'configmap',
 }
 
+export enum PolicyScope {
+  Namespace = 'namespace-scope',
+  Cluster = 'cluster-scope',
+}
+
+export enum Mode {
+  Create = 'create',
+  Edit = 'edit',
+  Detail = 'detail',
+}
+
 export const propagationpolicyKey = 'propagationpolicy.karmada.io/name';
 // safely extract propagationpolicy
 export const extractPropagationPolicy = (r: { objectMeta: ObjectMeta }) => {