前端调整

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

@@ -1,37 +0,0 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const StatsPlugin = require('stats-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const TerserJSPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const HappyPack = require('happypack');
-const os = require('os');
-const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
-var cwd = process.cwd();
-const path = require('path');
-const isProd = process.env.NODE_ENV === 'production';
-
-const babelOptions = {
-  cacheDirectory: true,
-  babelrc: false,
-  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')],
-  plugins: [
-    new HtmlWebpackPlugin({
-      meta: {
-        manifest: 'manifest.json',
-      },
-      template: './src/index.html',
-      inject: 'body',
-    }),
-  ],
-  output: {
-    library: pkgJson.ident,
-    libraryTarget: 'amd',
-  },
-  entry: {
-    [pkgJson.ident]: ['./src/index.tsx'],
-  },
-};

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

@@ -1,7 +0,0 @@
-export const defaultPagination = {
-  current: 1,
-  pageSize: 10,
-  position: 'bottomRight',
-  showSizeChanger: true,
-  pageSizeOptions: ['10', '20', '50', '100'],
-};

km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx

@@ -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/pages/UserManage/index.less

@@ -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;
+  }
+}