Merge pull request #81 from hlt1997/main

Supports internationalization functionality and fixes some bugs
traas-stack · Sep 27, 2023 · 0d7502c · 0d7502c
2 parents 8bfb2db + c27d523
commit 0d7502c
Show file tree

Hide file tree

Showing 52 changed files with 2,536 additions and 731 deletions.
diff --git a/chaosmeta-platform-frontend/.env b/chaosmeta-platform-frontend/.env
@@ -0,0 +1 @@
+PORT=8000
diff --git a/chaosmeta-platform-frontend/config/config.ts b/chaosmeta-platform-frontend/config/config.ts
@@ -6,16 +6,26 @@ export default defineConfig({
   antd: {},
   access: {},
   model: {},
+  esbuildMinifyIIFE: true,
   initialState: {},
   request: {},
   layout: {
     title: 'chaosmeta',
+    locale: true
   },
   hash: true,
   historyWithQuery: {},
   routes,
   npmClient: 'yarn',
   styledComponents: {},
+
+  locale: {
+    // 默认使用 src/locales/zh-CN.ts 作为多语言文件
+    default: 'zh-CN',
+    baseSeparator: '-',
+    baseNavigator: true,
+    antd: true,
+  },
   proxy: {
     '/users': {
       target: 'http://127.0.0.1/',

diff --git a/chaosmeta-platform-frontend/config/router.ts b/chaosmeta-platform-frontend/config/router.ts
@@ -5,19 +5,19 @@ export default [
   },
   { path: '/*', component: '@/pages/404' },
   {
-    name: '登录',
+    name: 'login',
     path: '/login',
     component: './Login',
     layout: false,
   },
   {
-    name: '创建实验',
+    name: 'experimentCreate',
     path: '/space/experiment/add',
     component: './Space/AddExperiment',
     layout: false,
   },
   {
-    name: '空间',
+    name: 'space',
     path: '/space',
     key: '/space',
     hideInBreadcrumb: true,
@@ -27,62 +27,52 @@ export default [
         redirect: './overview',
       },
       {
-        name: '空间概览',
+        name: 'overview',
         path: '/space/overview',
         component: './Space/SpaceOverview',
         icon: 'https://mdn.alipayobjects.com/huamei_d3kmvr/afts/img/A*ySleT74WnD4AAAAAAAAAAAAADmKmAQ/original',
       },
       {
-        name: '实验',
-        key: 'shiyan',
+        name: 'experiment',
         path: '/space/experiment',
-        // parentKeys: ['/space'],
         component: './Space/Experiment',
         icon: 'https://mdn.alipayobjects.com/huamei_d3kmvr/afts/img/A*LTdSQbHlFP8AAAAAAAAAAAAADmKmAQ/original',
       },
       {
-        name: '创建实验',
+        name: 'experimentCreate',
         path: '/space/experiment/choose',
         component: './Space/ChooseExperiment',
         hideInMenu: true,
       },
       {
-        name: '实验详情',
+        name: 'experimentDetail',
         path: '/space/experiment/detail',
         component: './Space/ExperimentDetail',
         hideInMenu: true,
       },
       {
-        name: '实验结果详情',
+        name: 'experimentResultDetail',
         path: '/space/experiment-result/detail',
         component: './Space/ExperimentResultDetail',
-        parentKeys: [''],
         hideInMenu: true,
       },
-      // {
-      //   name: '创建实验',
-      //   path: '/space/experiment/add',
-      //   component: './Space/AddExperiment',
-      //   hideInMenu: true,
-      //   // layout: false,
-      // },
       {
-        name: '实验结果',
+        name: 'experimentResult',
         path: '/space/experiment-result',
         component: './Space/ExperimentResult',
         parentKeys: [''],
         icon: 'https://mdn.alipayobjects.com/huamei_d3kmvr/afts/img/A*bABiRoluWWUAAAAAAAAAAAAADmKmAQ/original',
       },
       {
-        name: '空间设置',
+        name: 'settings',
         path: `/space/setting`,
         component: './Space/SpaceSetting',
         icon: 'https://mdn.alipayobjects.com/huamei_d3kmvr/afts/img/A*KesMQo37t4sAAAAAAAAAAAAADmKmAQ/original',
       },
     ],
   },
   {
-    name: '全局设置',
+    name: 'globalSettings',
     path: '/setting',
     hideInBreadcrumb: true,
     routes: [
@@ -91,13 +81,13 @@ export default [
         redirect: './account',
       },
       {
-        name: '账号管理',
+        name: 'account',
         path: '/setting/account',
         component: './GlobalSetting/Account',
         icon: 'https://mdn.alipayobjects.com/huamei_d3kmvr/afts/img/A*Yvf-TKO1tPAAAAAAAAAAAAAADmKmAQ/original',
       },
       {
-        name: '空间管理',
+        name: 'space',
         path: '/setting/space',
         component: './GlobalSetting/Space',
         icon: 'https://mdn.alipayobjects.com/huamei_d3kmvr/afts/img/A*8FUVTpn7RXIAAAAAAAAAAAAADmKmAQ/original',

diff --git a/chaosmeta-platform-frontend/package.json b/chaosmeta-platform-frontend/package.json
@@ -19,8 +19,8 @@
     "antd": "^5.4.0",
     "cronstrue": "^2.31.0",
     "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
-    "moment": "^2.29.4",
     "react-cookies": "^0.1.1",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",

diff --git a/chaosmeta-platform-frontend/src/app.tsx b/chaosmeta-platform-frontend/src/app.tsx
@@ -6,7 +6,12 @@ import SpaceDropdown from './components/SpaceDropdown';
 import UserRightArea from './components/UserRightArea';
 import cookie from './utils/cookie';
 import errorHandler from './utils/errorHandler';
+import dayjs from 'dayjs';
+import localeData from 'dayjs/plugin/localeData';
+import weekday from 'dayjs/plugin/weekday';
 
+dayjs.extend(weekday);
+dayjs.extend(localeData);
 // 更多信息见文档：https://umijs.org/docs/api/runtime-config#getinitialstate
 // export async function getInitialState(): Promise<{
 //   userInfo: {
@@ -69,8 +74,8 @@ export const request: RequestConfig = {
         options: {
           ...options,
           headers: {
-            ...options.headers,
             Authorization: token,
+            ...options.headers,
           },
         },
       };
@@ -92,7 +97,7 @@ export const layout = () => {
     logo: 'https://mdn.alipayobjects.com/huamei_d3kmvr/afts/img/A*lMXkRKmd8WcAAAAAAAAAAAAADmKmAQ/original',
     title: '',
     menu: {
-      locale: false,
+      locale: true,
     },
     siderWidth: 208,
     layout: 'mix',

diff --git a/chaosmeta-platform-frontend/src/components/AddSpaceDrawer/index.tsx b/chaosmeta-platform-frontend/src/components/AddSpaceDrawer/index.tsx
@@ -1,5 +1,8 @@
-import { createSpace } from '@/services/chaosmeta/SpaceController';
-import { history, useModel, useRequest } from '@umijs/max';
+import {
+  createSpace,
+  queryClassSpaceList,
+} from '@/services/chaosmeta/SpaceController';
+import { history, useIntl, useModel, useRequest } from '@umijs/max';
 import { Button, Drawer, Form, Input, Space, message } from 'antd';
 import React from 'react';
 
@@ -11,19 +14,47 @@ interface IProps {
 const AddSpaceDrawer: React.FC<IProps> = (props) => {
   const { open, setOpen } = props;
   const [form] = Form.useForm();
-  const { setCurSpace } = useModel('global');
+  const { setCurSpace, setSpaceList } = useModel('global');
+  const intl = useIntl();
 
   const handleCancel = () => {
     setOpen(false);
   };
 
+  /**
+   * 获取空间列表 -- 当前用户有查看权限的空间只读和读写
+   */
+  const getSpaceList = useRequest(queryClassSpaceList, {
+    manual: true,
+    formatResult: (res) => res,
+    debounceInterval: 300,
+    onSuccess: (res) => {
+      if (res?.code === 200) {
+        const namespaceList = res.data?.namespaces?.map(
+          (item: { namespaceInfo: any }) => {
+            // side侧边菜单的展开/收起会影响这里，暂时用icon代替，todo
+            return {
+              icon: item?.namespaceInfo?.name,
+              key: item?.namespaceInfo?.id,
+              id: item?.namespaceInfo?.id?.toString(),
+              name: item?.namespaceInfo?.name,
+            };
+          },
+        );
+        // 更新空间列表
+        setSpaceList(namespaceList);
+      }
+    },
+  });
+
   /**
    * 更新地址栏空间id，并保存
    * @param id
    */
   const handleUpdateSpaceId = (id: any) => {
     if (id) {
       const name = form.getFieldValue('name');
+      getSpaceList?.run({ page: 1, page_size: 10, namespaceClass: 'relevant' });
       history.push({
         pathname: history.location.pathname,
         query: {
@@ -45,7 +76,7 @@ const AddSpaceDrawer: React.FC<IProps> = (props) => {
     formatResult: (res) => res,
     onSuccess: async (res) => {
       if (res.code === 200) {
-        message.success('创建成功');
+        message.success(intl.formatMessage({ id: 'createText' }));
         // 更新空间信息
         handleUpdateSpaceId(res?.data?.id);
         setOpen(false);
@@ -70,20 +101,22 @@ const AddSpaceDrawer: React.FC<IProps> = (props) => {
 
   return (
     <Drawer
-      title="新建空间"
+      title={intl.formatMessage({ id: 'createSpace' })}
       open={open}
       onClose={handleCancel}
       width={480}
       footer={
         <div style={{ textAlign: 'right' }}>
           <Space>
-            <Button onClick={handleCancel}>取消</Button>
+            <Button onClick={handleCancel}>
+              {intl.formatMessage({ id: 'cancel' })}
+            </Button>
             <Button
               type="primary"
               onClick={handleCreate}
               loading={create.loading}
             >
-              创建完成并去配置
+              {intl.formatMessage({ id: 'createSpace.confirm' })}
             </Button>
           </Space>
         </div>
@@ -92,18 +125,33 @@ const AddSpaceDrawer: React.FC<IProps> = (props) => {
       <Form layout="vertical" form={form}>
         <Form.Item
           name={'name'}
-          label="空间名称"
-          rules={[{ required: true, message: '请输入' }]}
-          help="请尽量保持空间名称的简洁，不超过64个字符"
+          label={intl.formatMessage({ id: 'spaceName' })}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({ id: 'inputPlaceholder' }),
+            },
+          ]}
+          help={intl.formatMessage({ id: 'spaceDescriptionTip' })}
         >
-          <Input placeholder="请输入空间名称" maxLength={64} />
+          <Input
+            placeholder={`${intl.formatMessage({
+              id: 'inputPlaceholder',
+            })} ${intl.formatMessage({ id: 'spaceName' })}`}
+            maxLength={64}
+          />
         </Form.Item>
         <Form.Item
           name={'description'}
-          label="空间描述"
+          label={intl.formatMessage({ id: 'spaceDescription' })}
           style={{ marginTop: '36px' }}
         >
-          <Input.TextArea placeholder="请输入空间描述" rows={5} />
+          <Input.TextArea
+            placeholder={`${intl.formatMessage({
+              id: 'inputPlaceholder',
+            })} ${intl.formatMessage({ id: 'spaceDescription' })}`}
+            rows={5}
+          />
         </Form.Item>
       </Form>
     </Drawer>