feat: optimize env management

liuxy0551 · liuxy0551 · commit 5d7f81312154 · 2024-12-04T20:43:35.000+08:00
diff --git a/app/controller/envManagement.js b/app/controller/envManagement.js
@@ -12,12 +12,14 @@ class EnvManagementController extends Controller {
     // 新增环境
     async addEnv() {
         const { ctx, app } = this;
-        const { envName, hostIp, url, remark, tagIds } = ctx.request.body;
+        const { envName, hostIp, uicUsername, uicPasswd, url, remark, tagIds } = ctx.request.body;
         if (_.isNil(envName)) throw new Error('缺少必要参数 envName');
         if (_.isNil(url)) throw new Error('缺少必要参数 url');
         const result = await ctx.service.envManagement.addEnv({
             envName,
             hostIp,
+            uicUsername,
+            uicPasswd,
             url,
             remark,
             tags: tagIds.join(','),
@@ -32,11 +34,14 @@ class EnvManagementController extends Controller {
     // 编辑环境
     async editEnv() {
         const { ctx, app } = this;
-        const { id, envName, hostIp, url, remark, tagIds } = ctx.request.body;
+        const { id, envName, hostIp, uicUsername, uicPasswd, url, remark, tagIds } =
+            ctx.request.body;
         if (_.isNil(id)) throw new Error('缺少必要参数id');
         await ctx.service.envManagement.editEnv({
             id,
             envName,
+            uicUsername,
+            uicPasswd,
             hostIp,
             url,
             remark,
diff --git a/app/model/env_management.js b/app/model/env_management.js
@@ -6,6 +6,8 @@ module.exports = (app) => {
             id: { type: INTEGER, primaryKey: true, autoIncrement: true },
             envName: { type: STRING(255), field: 'env_name' },
             hostIp: { type: STRING(20), field: 'host_ip' },
+            uicUsername: { type: STRING(255), field: 'uic_username' },
+            uicPasswd: { type: STRING(255), field: 'uic_passwd' },
             url: { type: STRING(2048), field: 'url' },
             remark: STRING(255),
             tags: { type: STRING(60), field: 'tag_ids' },
diff --git a/app/service/envManagement.js b/app/service/envManagement.js
@@ -6,7 +6,16 @@ class EnvManagementService extends Service {
         const { ctx } = this;
         const { tags = '', search = '' } = params;
         const envResult = await ctx.model.EnvManagement.findAll({
-            attributes: ['id', 'envName', 'hostIp', 'url', 'remark', 'tags'],
+            attributes: [
+                'id',
+                'envName',
+                'hostIp',
+                'uicUsername',
+                'uicPasswd',
+                'url',
+                'remark',
+                'tags',
+            ],
             where: {
                 status: 1,
                 $or: [
@@ -43,10 +52,12 @@ class EnvManagementService extends Service {
     }
     editEnv(env) {
         const { ctx } = this;
-        const { id, envName, hostIp, url, remark, tags } = env;
+        const { id, envName, hostIp, uicUsername, uicPasswd, url, remark, tags } = env;
         const newEnv = {};
         if (!_.isNil(envName)) newEnv.envName = envName;
         if (!_.isNil(hostIp)) newEnv.hostIp = hostIp;
+        if (!_.isNil(uicUsername)) newEnv.uicUsername = uicUsername;
+        if (!_.isNil(uicPasswd)) newEnv.uicPasswd = uicPasswd;
         if (!_.isNil(url)) newEnv.url = url;
         if (!_.isNil(remark)) newEnv.remark = remark;
         if (!_.isNil(tags)) newEnv.tags = tags;
diff --git a/app/web/pages/envManagement/components/envModal/index.tsx b/app/web/pages/envManagement/components/envModal/index.tsx
@@ -3,13 +3,14 @@ import { Form, Input, message as Message, Modal, Select, Spin } from 'antd';
 import { isEmpty, isFunction, isNull } from 'lodash';
 
 import { API } from '@/api';
+import { urlReg } from '@/utils/reg';
 const FormItem = Form.Item;
 const { TextArea } = Input;
 const { Option } = Select;
 
 const EnvForm = (props: any) => {
     const { value, tagList = [], forwardRef } = props;
-    const { envName, hostIp, url, remark, tags = [] } = value;
+    const { envName, hostIp, uicUsername, uicPasswd, url, remark, tags = [] } = value;
     const tagIds = tags.map((item: any) => Number(item.id));
     return (
         <Form
@@ -19,6 +20,8 @@ const EnvForm = (props: any) => {
             initialValues={{
                 envName,
                 hostIp,
+                uicUsername,
+                uicPasswd,
                 url,
                 tagIds,
                 remark,
@@ -30,24 +33,37 @@ const EnvForm = (props: any) => {
                 rules={[{ required: true, message: '请输入环境名称' }]}
                 hasFeedback
             >
-                <Input placeholder="请输入环境名称" />
+                <Input placeholder="请输入环境名称" maxLength={255} />
             </FormItem>
             <FormItem
                 label="主机IP"
                 name="hostIp"
                 rules={[{ required: true, message: '请输入主机IP' }]}
                 hasFeedback
             >
-                <Input placeholder="请输入主机IP" />
+                <Input placeholder="请输入主机IP" maxLength={255} />
+            </FormItem>
+            <FormItem label="UIC用户名" name="uicUsername" hasFeedback>
+                <Input placeholder="请输入UIC用户名" maxLength={255} />
+            </FormItem>
+            <FormItem label="UIC密码" name="uicPasswd" hasFeedback>
+                <Input type="password" placeholder="请输入UIC密码" maxLength={255} />
             </FormItem>
             <Fragment>
                 <FormItem
                     label="访问地址"
                     name="url"
-                    rules={[{ required: true, message: '请输入访问地址' }]}
+                    rules={[
+                        { required: true, message: '请输入访问地址' },
+                        {
+                            required: true,
+                            pattern: urlReg,
+                            message: '请输入正确格式的访问地址，以 http(s):// 开头',
+                        },
+                    ]}
                     hasFeedback
                 >
-                    <TextArea placeholder="请输入访问地址" rows={2} maxLength={2000} />
+                    <Input placeholder="请输入访问地址" maxLength={2000} />
                 </FormItem>
             </Fragment>
             <FormItem
@@ -59,6 +75,14 @@ const EnvForm = (props: any) => {
                         required: true,
                         message: '请选择标签',
                     },
+                    {
+                        validator: (rule, value = [], callback) => {
+                            if (value?.length > 3) {
+                                callback('最多选择三个标签');
+                            }
+                            callback();
+                        },
+                    },
                 ]}
                 hasFeedback
             >
diff --git a/app/web/pages/envManagement/index.tsx b/app/web/pages/envManagement/index.tsx
@@ -1,6 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { PlusCircleOutlined } from '@ant-design/icons';
-import { Button, Divider, Input, message as Message, Popconfirm, Table, Typography } from 'antd';
+import {
+    Button,
+    Divider,
+    Input,
+    message as Message,
+    Popconfirm,
+    Table,
+    Tooltip,
+    Typography,
+} from 'antd';
 
 import { API } from '@/api';
 import DtTag from '@/components/dtTag';
@@ -50,15 +59,42 @@ export default (props: any) => {
             {
                 title: '环境名称',
                 key: 'envName',
-                width: 220,
                 dataIndex: 'envName',
             },
             {
                 title: '主机IP',
                 key: 'hostIp',
-                width: 160,
                 dataIndex: 'hostIp',
             },
+            {
+                title: 'UIC用户名密码',
+                key: 'hostIp',
+                dataIndex: 'hostIp',
+                ellipsis: true,
+                render: (value: any, record: any) => {
+                    const { uicUsername, uicPasswd } = record;
+                    return !uicUsername && !uicPasswd ? (
+                        '--'
+                    ) : (
+                        <>
+                            {uicUsername ? (
+                                <Paragraph copyable ellipsis>
+                                    {uicUsername}
+                                </Paragraph>
+                            ) : (
+                                '--'
+                            )}
+                            {uicPasswd ? (
+                                <Paragraph copyable ellipsis>
+                                    {uicPasswd}
+                                </Paragraph>
+                            ) : (
+                                '--'
+                            )}
+                        </>
+                    );
+                },
+            },
             {
                 title: '访问地址',
                 key: 'url',
@@ -81,7 +117,6 @@ export default (props: any) => {
                 title: '标签',
                 key: 'tags',
                 dataIndex: 'tags',
-                width: 160,
                 filterMultiple: true,
                 filters: tagList.map((item: any) => {
                     return {
@@ -102,7 +137,11 @@ export default (props: any) => {
                 key: 'remark',
                 dataIndex: 'remark',
                 ellipsis: true,
-                render: (text) => <pre className="remark-content">{text || '--'}</pre>,
+                render: (text) => (
+                    <Tooltip title={text} placement="top">
+                        <pre className="remark-content">{text || '--'}</pre>
+                    </Tooltip>
+                ),
             },
             {
                 title: '操作',
@@ -179,7 +218,7 @@ export default (props: any) => {
         <div className="page-env-management">
             <div className="title_wrap">
                 <Search
-                    placeholder="请输入环境名称或IP搜索"
+                    placeholder="请输入环境名称或主机IP搜索"
                     value={searchStr}
                     onChange={(e) => setSearchStr(e.target.value)}
                     onSearch={() => loadTableData({ search: searchStr })}
@@ -192,6 +231,7 @@ export default (props: any) => {
             </div>
             <Table
                 rowKey="id"
+                size="middle"
                 columns={getColumns()}
                 className="dt-table-fixed-base"
                 scroll={{ y: 'calc(100vh - 64px - 40px - 44px - 44px)' }}
diff --git a/app/web/pages/envManagement/style.scss b/app/web/pages/envManagement/style.scss
@@ -10,10 +10,11 @@
 }
 
 .remark-content {
+    margin-bottom: 0;
     // white-space: normal;
     overflow: hidden; // 超出的文本隐藏
     text-overflow: ellipsis;    // 溢出用省略号显示
     display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
     -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-    -webkit-line-clamp: 3; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
+    -webkit-line-clamp: 4; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
 }
diff --git a/docs/docsify/imgs/add_env.png b/docs/docsify/imgs/add_env.png
diff --git a/docs/docsify/imgs/env_management.png b/docs/docsify/imgs/env_management.png
diff --git a/sql/doraemon.sql b/sql/doraemon.sql
@@ -159,6 +159,8 @@ CREATE TABLE `env_management` (
   `id` int NOT NULL AUTO_INCREMENT,
   `env_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
   `host_ip` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
+  `uic_username` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin,
+  `uic_passwd` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin,
   `url` varchar(2048) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
   `status` tinyint NOT NULL DEFAULT '1',
   `remark` varchar(2048) CHARACTER SET utf8 COLLATE utf8_bin DEFAULT NULL,

Original file line number	Diff line number	Diff line change
`@@ -10,10 +10,11 @@`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`.remark-content {`
	`13`	`+ margin-bottom: 0;`
`13`	`14`	`// white-space: normal;`
`14`	`15`	`overflow: hidden; // 超出的文本隐藏`
`15`	`16`	`text-overflow: ellipsis; // 溢出用省略号显示`
`16`	`17`	`display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。`
`17`	`18`	`-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）`
`18`		`- -webkit-line-clamp: 3; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。`
	`19`	`+ -webkit-line-clamp: 4; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。`
`19`	`20`	`}`