前端调整

Author: zengqiao

km-console/.eslintrc.js

@@ -29,5 +29,6 @@ module.exports = {
     '@typescript-eslint/no-var-requires': 0,
     'prettier/prettier': 2, // 这项配置 对于不符合prettier规范的写法，eslint会提示报错
     'no-console': 1,
+    'react/display-name': 0,
   },
 };

km-console/README.md

@@ -1,19 +1,43 @@
 ## 安装项目依赖
 
-* 安装lerna 
+- 安装 lerna
+
 ```
-npm i -g lerna
+npm install -g lerna
+```
+
+- 安装项目依赖
+
+```
+npm run i
 ```
 
 ## 启动项目
+
 ```
 npm run start
 ```
+
 ### 环境信息
+
 http://localhost:port
 
 ## 构建项目
+
 ```
 npm run build
 
-```
+```
+
+## 目录结构
+
+- packages
+  - layout-clusters-fe: 基座应用 & 多集群管理
+  - config-manager-fe: 子应用 - 系统管理
+- tool: 启动 & 打包脚本
+- ...
+
+## 常见问题
+
+Q: 执行 `npm run start` 时看不到应用构建和热加载过程？
+A: 需要到具体的应用中执行 `npm run start`，例如 `cd packages/layout-clusters-fe` 后，执行 `npm run start`。

km-console/packages/config-manager-fe/README.md

@@ -1,11 +1,40 @@
-# `logi-fe`
+## 使用说明
 
-> TODO: description
+### 依赖安装：
 
-## Usage
+```
+npm install
+```
 
-### 启动
-* npm i @didi/d1-cli -g 
-* d1 start 
+### 启动：
 
-### 常见问题
+```
+npm run start
+```
+
+### 构建：
+
+```
+npm run build
+```
+
+构建后的代码默认会存放到项目根路径下 `km-rest/src/main/resources/templates/config` 文件夹里
+
+## 目录结构
+
+- config: 开发 & 构建配置
+  - theme.js: antd 主题配置
+  - d1-webpack.base.js: webpack 基础配置
+- src：源代码所在目录
+  - @types: TypeScript 全局类型声明
+  - api: 请求定义
+  - assets：全局资源 img、css
+  - components：公共组件
+  - constants: 全局配置、通用方法
+  - locales: 国际化语言
+  - pages: 路由匹配的页面组件
+  - app.tsx: 菜单、路由配置组件
+  - index.html: 单页
+  - index.tsx: 入口文件
+- tsconfig.json: TypeScript 配置
+- webpack.config.js: webpack 配置入口

km-console/packages/config-manager-fe/config/d1-spa-webpack.js

@@ -376,7 +376,8 @@ export default (props: { curTabKey: string }): JSX.Element => {
   const [pagination, setPagination] = useState<any>(defaultPagination);
   const [loading, setLoading] = useState<boolean>(true);
   const [deleteBtnLoading, setDeleteBtnLoading] = useState<number>(-1);
-  const [form] = Form.useForm();
+  const [searchKeywords, setSearchKeywords] = useState('');
+  const [searchKeywordsInput, setSearchKeywordsInput] = useState('');
   const detailRef = useRef(null);
   const assignRolesRef = useRef(null);
 
@@ -472,11 +473,10 @@ export default (props: { curTabKey: string }): JSX.Element => {
   ];
 
   const getRoleList = (query = {}) => {
-    const formData = form.getFieldsValue();
     const data = {
       page: pagination.current,
       size: pagination.pageSize,
-      ...formData,
+      roleName: searchKeywords,
       ...query,
     };
 
@@ -582,19 +582,33 @@ export default (props: { curTabKey: string }): JSX.Element => {
     }
   }, [curTabKey]);
 
+  useEffect(() => {
+    (searchKeywords || searchKeywords === '') && getRoleList({ pageNo: 1 });
+  }, [searchKeywords]);
+
   return (
     <>
-      <div className="operate-bar">
-        <Form form={form} layout="inline" onFinish={() => getRoleList({ page: 1 })}>
-          <Form.Item name="roleName">
-            <Input placeholder="请输入角色名称" />
-          </Form.Item>
-          <Form.Item>
-            <Button type="primary" ghost htmlType="submit">
-              查询
-            </Button>
-          </Form.Item>
-        </Form>
+      <div className="operate-bar-right">
+        <Input
+          className="search-input"
+          suffix={
+            <IconFont
+              type="icon-fangdajing"
+              onClick={(_) => {
+                setSearchKeywords(searchKeywordsInput);
+              }}
+              style={{ fontSize: '16px' }}
+            />
+          }
+          placeholder="请输入角色名称"
+          value={searchKeywordsInput}
+          onPressEnter={(_) => {
+            setSearchKeywords(searchKeywordsInput);
+          }}
+          onChange={(e) => {
+            setSearchKeywordsInput(e.target.value);
+          }}
+        />
         {global.hasPermission && global.hasPermission(ConfigPermissionMap.ROLE_ADD) ? (
           <Button
             type="primary"

km-console/packages/config-manager-fe/src/@types/index.d.ts

@@ -44,3 +44,13 @@
 .role-tab-assign-user .desc-row {
   margin-bottom: 24px;
 }
+
+.operate-bar-right {
+  display: flex;
+  justify-content: right;
+  margin-bottom: 12px;
+  .search-input {
+    width: 248px;
+    margin-right: 8px;
+  }
+}

km-console/packages/config-manager-fe/src/api/constant.ts

@@ -1,32 +1,45 @@
-## Usage
+## 使用说明
+
+### 依赖安装：
+
+```
+npm install
+```
 
 ### 启动：
-* 招行环境执行 npm start
-* 内部环境执行 npm run start:inner
+
+```
+npm run start
+```
 
 ### 构建：
-* 招行环境执行 npm build
-* 内部环境执行 npm run build:inner
 
-构建后的代码默认会存放到 `../pub` 文件夹里
+```
+npm run build
+```
 
-### 部署
-* 内部环境：代码提交主干后会自动触发打包部署至http://10.190.14.125:8016
+构建后的代码默认会存放到项目根路径下 `km-rest/src/main/resources/templates/layout` 文件夹里
 
 ## 目录结构
 
 - config: 开发 & 构建配置
-  - theme.js：antd 主题配置
-  - webpack.dev.config.js：webpack 开发环境补充配置，覆盖默认配置
-  - webpack.build.config.js：webpack 构建补充配置，覆盖默认配置
-  - webpackConfigResolveAlias.js 文件路径别名配置
+  - theme.js: antd 主题配置
+  - registerApps.js: SPA 注册
+  - systemsConfig.js: 子应用配置
+  - d1-webpack.base.js: webpack 基础配置
+  - CoverHtmlWebpackPlugin.js: 输出 html 内容
+  - CountComponentWebpackPlugin.js: 计算 knowdesign 组件引用次数
+  - webpackConfigResolveAlias.js: 文件路径别名配置
 - src：源代码所在目录
+  - @types: TypeScript 全局类型声明
+  - api: 请求定义
   - assets：全局资源 img、css
-  - common: 全局配置、通用方法
   - components：公共组件
-  - pages：路由匹配的页面组件
-  - app.jsx 菜单、路由配置组件
-  - index.html：单页
-  - index.jsx：入口文件
-  - fetk.config.js 开发工具配置页面
-
+  - constants: 全局配置、通用方法
+  - locales: 国际化语言
+  - pages: 路由匹配的页面组件
+  - app.tsx: 菜单、路由配置组件
+  - index.html: 单页
+  - index.tsx: 入口文件
+- tsconfig.json: TypeScript 配置
+- webpack.config.js: webpack 配置入口