PullRequest: 83 优化国际化和样式问题

Merge branch dev-th-20240308 of [email protected]:multi-cluster/karbour.git into sprint-20240311 https://code.alipay.com/multi-cluster/karbour/pull_requests/83?tab=diff Signed-off-by: 向野 <[email protected]> * PullRequest: 78 feat: 国际化 Merge branch dev-th-20240304 of [email protected]:multi-cluster/karbour.git into sprint-20240307 https://code.alipay.com/multi-cluster/karbour/pull_requests/78 Signed-off-by: 向野 <[email protected]> * PullRequest: 76 pref: 优化样式 Merge branch dev-th-0205 of [email protected]:multi-cluster/karbour.git into sprint-20240301 https://code.alipay.com/multi-cluster/karbour/pull_requests/76?tab=diff Signed-off-by: 向野 <[email protected]> * pref: 优化样式 * pref * feat: 国际化 * PullRequest: 80 docs: adjust locale files Merge branch sprint-20240307-adjust-locates-file of [email protected]:multi-cluster/karbour.git into sprint-20240307 https://code.alipay.com/multi-cluster/karbour/pull_requests/80 Signed-off-by: 妙明 <[email protected]> * chore: add debug conditions in release.yaml * docs: adjust locale files * fix: typo * fix: typo for exception * fix: zh translation * style: format frontend code * fix: wrong exceptional cluster png * fix: some locate problems * fix: compile problem * pref: 优化国际化 * pref: 优化国际化 and 样式问题
KusionStack · Mar 12, 2024 · d0af156 · d0af156
1 parent 7d60b6a
commit d0af156
Show file tree

Hide file tree

Showing 27 changed files with 298 additions and 191 deletions.
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -5,6 +5,7 @@ on:
   push:
     tags:
       - 'v[0-9]+.[0-9]+.[0-9]+'
+      - 'v[0-9]+.[0-9]+.[0-9]+-debug.[0-9]+'
       - 'v[0-9]+.[0-9]+.[0-9]+-alpha.[0-9]+'
       - 'v[0-9]+.[0-9]+.[0-9]+-beta.[0-9]+'
       - 'v[0-9]+.[0-9]+.[0-9]+-rc.[0-9]+'

diff --git a/ui/src/assets/arrowright.png b/ui/src/assets/arrowright.png
diff --git a/ui/src/assets/translate_language.svg b/ui/src/assets/translate_language.svg
diff --git a/ui/src/components/layout/index.tsx b/ui/src/components/layout/index.tsx
@@ -1,10 +1,11 @@
 import React, { memo } from 'react'
-import { Divider, Menu, Popover } from 'antd'
+import { Divider, Menu, Dropdown } from 'antd'
 import {
   ClusterOutlined,
   FundOutlined,
   QuestionCircleOutlined,
   SearchOutlined,
+  CaretDownOutlined,
 } from '@ant-design/icons'
 import type { MenuProps } from 'antd'
 import { Outlet, useLocation, useNavigate } from 'react-router-dom'
@@ -13,7 +14,7 @@ import { setServerConfigMode } from '@/store/modules/globalSlice'
 import axios from 'axios'
 import { useTranslation } from 'react-i18next'
 import showPng from '@/assets/show.png'
-import languagePng from '@/assets/language.png'
+import languagePng from '@/assets/translate_language.svg'
 
 import styles from './style.module.less'
 
@@ -143,16 +144,27 @@ const LayoutPage = () => {
     localStorage.setItem('lang', 'en')
     i18n.changeLanguage('en')
   }
-  const languageContent = (
-    <div className={styles.language_content}>
-      <div className={styles.language_content_item} onClick={changeToZh}>
-        中文
-      </div>
-      <div className={styles.language_content_item} onClick={changeToEn}>
-        English
-      </div>
-    </div>
-  )
+
+  console.log(i18n.language, '===i18n===')
+
+  const languageItems: MenuProps['items'] = [
+    {
+      label: (
+        <div className={styles.language_content_item} onClick={changeToEn}>
+          English
+        </div>
+      ),
+      key: 'English',
+    },
+    {
+      label: (
+        <div className={styles.language_content_item} onClick={changeToZh}>
+          中文
+        </div>
+      ),
+      key: 'Chinese',
+    },
+  ]
 
   return (
     <div className={styles.wrapper}>
@@ -181,11 +193,20 @@ const LayoutPage = () => {
             </div>
           )}
           <div className={styles.help}>
-            <Popover content={languageContent} trigger="click">
-              <div className={styles.language}>
-                <img src={languagePng} />
-              </div>
-            </Popover>
+            <Dropdown menu={{ items: languageItems }}>
+              <a
+                onClick={e => e.preventDefault()}
+                style={{ display: 'flex', alignItems: 'center' }}
+              >
+                <img src={languagePng} style={{ width: 16, height: 16 }} />
+                <span
+                  style={{ fontSize: 14, margin: '0 4px', color: '#646566' }}
+                >
+                  {i18n.language === 'zh' ? '中文' : 'English'}
+                </span>
+                <CaretDownOutlined style={{ color: '#646566' }} />
+              </a>
+            </Dropdown>
           </div>
           <div className={styles.help}>
             <a

diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import ReactDOM from 'react-dom/client'
 import { ConfigProvider } from 'antd'
 import { Provider } from 'react-redux'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
+import { useTranslation } from 'react-i18next'
 import zhCN from 'antd/locale/zh_CN'
+import enUS from 'antd/locale/en_US'
 import { BrowserRouter } from 'react-router-dom'
 import WrappedRoutes from '@/router'
 import store from '@/store'
@@ -17,10 +19,18 @@ import './index.css'
 dayjs.locale('zh-cn')
 
 function App() {
+  const { i18n } = useTranslation()
+  const currentLocale = localStorage.getItem('lang')
+  const [lang, setLang] = useState(currentLocale || 'en')
+
+  useEffect(() => {
+    setLang(i18n.language)
+  }, [i18n.language])
+
   return (
     <Provider store={store}>
       <ConfigProvider
-        locale={zhCN}
+        locale={lang === 'en' ? enUS : zhCN}
         theme={{
           token: {
             colorPrimary: '#2F54EB',

diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
@@ -91,5 +91,6 @@
   "Warning": "Warning",
   "Normal": "Normal",
   "CreateTime": "Creation Timestamp",
-  "InDevelopment": "In development"
+  "InDevelopment": "In development",
+  "InputClusterName": "Input Cluster Name"
 }
diff --git a/ui/src/locales/zh.json b/ui/src/locales/zh.json
@@ -87,10 +87,10 @@
   "NoIssuesFound": "无风险异常，再接再厉",
   "HealthScore": "健康分",
   "TriggeredTimestamp": "触发时间点",
-  "CheckAllIssues": "查看全部风险",
   "Exception": "异常",
   "Warning": "告警",
   "Normal": "正常",
   "CreateTime": "创建时间",
-  "InDevelopment": "开发中"
+  "InDevelopment": "开发中",
+  "InputClusterName": "请输入集群名称"
 }
diff --git a/ui/src/pages/cluster/certificate/index.tsx b/ui/src/pages/cluster/certificate/index.tsx
@@ -219,10 +219,12 @@ const ClusterCertificate = () => {
   return (
     <div className={styles.container}>
       <div className={styles.header}>
-        <ArrowLeftOutlined
-          style={{ marginRight: 10 }}
-          onClick={() => goBack()}
-        />
+        <div className={styles.header_back}>
+          <ArrowLeftOutlined
+            style={{ fontSize: 18 }}
+            onClick={() => goBack()}
+          />
+        </div>
         {t('RotateCertificate')}
       </div>
       <div className={styles.content}>

diff --git a/ui/src/pages/cluster/certificate/styles.module.less b/ui/src/pages/cluster/certificate/styles.module.less
@@ -5,7 +5,14 @@
   flex-direction: column;
 
   .header {
+    display: flex;
     margin-bottom: 16px;
+    align-items: center;
+    font-size: 18px;
+
+    .header_back {
+      padding: 5px 10px 5px 0;
+    }
   }
 
   .content {

diff --git a/ui/src/pages/cluster/components/editPopForm/index.tsx b/ui/src/pages/cluster/components/editPopForm/index.tsx
@@ -31,7 +31,6 @@ export const EditForm = ({ submit, cancel, lastDetail }: EditFormProps) => {
   }
 
   function onCancel() {
-    form.resetFields()
     cancel()
   }
 

diff --git a/ui/src/pages/cluster/index.tsx b/ui/src/pages/cluster/index.tsx
@@ -17,7 +17,6 @@ import Loading from '../../components/loading'
 import ClusterCard from './components/clusterCard'
 import healthPng from '@/assets/health_green.png'
 import exceptionalPng from '@/assets/exceptional.png'
-// import clusterPng from '@/assets/cluster.png'
 import clusterPng from '@/assets/cluster_outlind.png'
 
 const Cluster = () => {
@@ -96,14 +95,6 @@ const Cluster = () => {
     getPageData(sortParams)
   })
 
-  // function handleChangePage(page: number, pageSize: number) {
-  //   setSearchParams({
-  //     ...searchParams,
-  //     page,
-  //     pageSize,
-  //   });
-  // }
-
   const join = () => {
     if (isReadOnlyMode) {
       return
@@ -131,7 +122,6 @@ const Cluster = () => {
   }
 
   const [currentTab, setCurrentTab] = useState('all')
-  // const [radioValue, setRadioValue] = useState('all');
   const [triangleLeftOffestIndex, setTriangleLeftOffestIndex] = useState(0)
 
   function handleTabChange(value: string, index: number) {
@@ -190,16 +180,6 @@ const Cluster = () => {
 
   const numberStyle = { paddingLeft: 10, fontSize: 24 }
 
-  // const radioOptions = [
-  //   { label: '全部', value: 'all' },
-  //   { label: '我是Owner', value: 'owner' },
-  // ]
-
-  // function handleChangeRadio(event: any) {
-
-  //   setRadioValue(event.target.value);
-  // }
-
   async function deleteItem(item) {
     if (isReadOnlyMode) {
       return
@@ -264,7 +244,6 @@ const Cluster = () => {
       ),
       value: 'exception',
     },
-    // { label: <div style={tabStyle}><DeleteRowOutlined style={{ ...iconStyle, background: 'rgba(0,10,26, 0.08)', color: '#000A1A' }} />已删除<span style={numberStyle}>3</span></div>, value: "delete" },
   ]
 
   const orderIconStyle = {
@@ -293,7 +272,18 @@ const Cluster = () => {
           </Button>
         )}
       </div>
-      {!pageData || !pageData?.length ? (
+      {loading ? (
+        <div
+          style={{
+            height: 300,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Loading />
+        </div>
+      ) : !pageData || !pageData?.length ? (
         <div className={styles.empty_content}>
           <div className={styles.empty_data}>
             <div className={styles.left}>
@@ -307,7 +297,9 @@ const Cluster = () => {
                 </Button>
               </div>
             </div>
-            <div className={styles.right}></div>
+            <div className={styles.right}>
+              <Empty />
+            </div>
           </div>
         </div>
       ) : (
@@ -363,20 +355,9 @@ const Cluster = () => {
               </Button>
               {/* <Radio.Group options={radioOptions} onChange={handleChangeRadio} value={radioValue} optionType="button" buttonStyle="solid" /> */}
               {/* <div className={styles.right}>
-                </div> */}
+                    </div> */}
             </div>
-            {loading ? (
-              <div
-                style={{
-                  height: 300,
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <Loading />
-              </div>
-            ) : showPageData && showPageData?.length > 0 ? (
+            {showPageData && showPageData?.length > 0 ? (
               <div className={styles.page_list}>
                 {showPageData?.map((item: any, index: number) => {
                   return (

diff --git a/ui/src/pages/cluster/styles.module.less b/ui/src/pages/cluster/styles.module.less
@@ -44,8 +44,6 @@
       .right {
         flex: 1;
         height: 100%;
-        background-color: #d8d8d8;
-        border: 1px solid #979797;
       }
     }
   }

diff --git a/ui/src/pages/insightDetail/cluster/index.tsx b/ui/src/pages/insightDetail/cluster/index.tsx
@@ -2,19 +2,20 @@ import React, { useEffect, useState } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 import axios from 'axios'
 import queryString from 'query-string'
-import { Breadcrumb, message } from 'antd'
+import { Breadcrumb, Tooltip, message } from 'antd'
 import { useTranslation } from 'react-i18next'
 import ExceptionDrawer from '../components/exceptionDrawer'
 import TopologyMap from '../components/topologyMap'
-import KarbourTabs from '../../../components/tabs'
+import KarbourTabs from '@/components/tabs'
 import SourceTable from '../components/sourceTable'
 import ExceptionList from '../components/exceptionList'
 import EventDetail from '../components/eventDetail'
-import Yaml from '../../../components/yaml'
+import Yaml from '@/components/yaml'
 import K8sEvent from '../components/k8sEvent'
 import K8sEventDrawer from '../components/k8sEventDrawer'
 import SummaryCard from '../components/summaryCard'
-import { generateTopologyData } from '../../../utils/tools'
+import { capitalized, generateTopologyData } from '@/utils/tools'
+import cRole from '@/assets/labeled/c-role-128.png'
 
 import styles from './styles.module.less'
 
@@ -38,7 +39,7 @@ const ClusterDetail = () => {
   const [currentItem, setCurrentItem] = useState<any>()
   const [topologyData, setTopologyData] = useState<any>()
   const [topologyLoading, setTopologyLoading] = useState(false)
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
 
   const tabsList = [
     { label: t('ResourceTopology'), value: 'Topology' },
@@ -210,7 +211,17 @@ const ClusterDetail = () => {
       first,
       {
         key: cluster,
-        title: cluster,
+        title: (
+          <Tooltip title={capitalized('cluster')}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <img
+                src={cRole}
+                style={{ width: 14, height: 14, marginRight: 2 }}
+              />
+              {cluster}
+            </div>
+          </Tooltip>
+        ),
       },
     ]
     setBreadcrumbItems(result)
@@ -219,7 +230,7 @@ const ClusterDetail = () => {
   useEffect(() => {
     getBreadcrumbs()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [from, key, cluster, kind, namespace, name])
+  }, [from, key, cluster, kind, namespace, name, i18n?.language])
 
   return (
     <div className={styles.container}>

diff --git a/ui/src/pages/insightDetail/components/eventDetail/index.tsx b/ui/src/pages/insightDetail/components/eventDetail/index.tsx
@@ -36,7 +36,7 @@ const EventDetail = ({ open, detail, cancel }: IProps) => {
       <div className={styles.container}>
         <div className={styles.title}>
           <Tag color={SEVERITY_MAP?.[detail?.issue?.severity]?.color}>
-            {SEVERITY_MAP?.[detail?.issue?.severity]?.text}
+            {t(SEVERITY_MAP?.[detail?.issue?.severity]?.text)}
           </Tag>
           {detail?.issue?.title || '--'}
         </div>
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       function onCancel() {
-        form.resetFields()
         cancel()
       }
@@ Expand Down @@