U 优化主机选择控件样式

spug_web/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
     "ace-builds": "^1.4.13",
-    "antd": "4.21.4",
+    "antd": "4.21.5",
     "axios": "^0.21.0",
     "bizcharts": "^3.5.9",
     "history": "^4.10.1",

spug_web/src/index.less

@@ -8,16 +8,6 @@ body {
   overflow: hidden;
 }
 
-div::-webkit-scrollbar, textarea::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-div::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
-  border-radius: 6px;
-  background: rgba(0, 0, 0, .2);
-}
-
 code {
   font-family: Source Code Pro, Menlo, Monaco, Consolas, Courier New, monospace, Courier, PingFang SC, Microsoft YaHei;
 }

spug_web/src/pages/host/IPAddress.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
+ * Copyright (c) <spug.dev@gmail.com>
+ * Released under the AGPL-3.0 License.
+ */
+import React from 'react';
+
+function IPAddress(props) {
+  const style = {
+    background: '#ffe7ba',
+    borderRadius: 4,
+    color: '#333',
+    fontSize: 10,
+    marginRight: 4,
+    padding: '0 8px'
+  }
+
+  const style2 = {
+    background: '#bae7ff',
+    borderRadius: 4,
+    color: '#333',
+    fontSize: 10,
+    marginRight: 4,
+    padding: '0 8px'
+  }
+  return (props.ip && props.ip.length > 0) ? (
+    <div style={{width: 150, display: 'flex', alignItems: 'center'}}>
+      {props.isPublic ? <span style={style}>公</span> : <span style={style2}>内</span>}
+      <span>{props.ip[0]}</span>
+    </div>
+  ) : null
+}
+
+export default IPAddress

spug_web/src/pages/host/Selector.js

@@ -7,6 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
 import { Modal, Row, Col, Tree, Table, Button, Space, Input } from 'antd';
 import { FolderOpenOutlined, FolderOutlined } from '@ant-design/icons';
+import IPAddress from './IPAddress';
 import hStore from './store';
 import store from './store2';
 import styles from './index.module.less';
@@ -45,7 +46,7 @@ export default observer(function (props) {
   }, [props.selectedRowKeys])
 
   useEffect(() => {
-    if (props.oneGroup) {
+    if (props.onlySelf) {
       setSelectedRowKeys([])
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -118,8 +119,9 @@ export default observer(function (props) {
       okButtonProps={{disabled: selectedRowKeys.length === 0}}
       confirmLoading={loading}
       onCancel={props.onCancel}>
-      <Row gutter={12}>
-        <Col span={6}>
+      <Row>
+        <Col span={6} style={{borderRight: '8px solid #f0f0f0', paddingRight: 12}}>
+          <div className={styles.gTitle}>分组列表</div>
           <Tree.DirectoryTree
             showIcon={false}
             autoExpandParent
@@ -132,7 +134,7 @@ export default observer(function (props) {
             onSelect={(_, {node}) => store.group = node}
           />
         </Col>
-        <Col span={18}>
+        <Col span={18} style={{paddingLeft: 12}}>
           <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 12}}>
             <Input allowClear style={{width: 260}} placeholder="输入名称/IP检索"
                    onChange={e => store.f_word = e.target.value}/>
@@ -157,9 +159,14 @@ export default observer(function (props) {
               onSelect: handleClickRow,
               onSelectAll: handleSelectAll
             }}>
-            <Table.Column title="主机名称" dataIndex="name" sorter={(a, b) => a.name.localeCompare(b.name)}/>
-            <Table.Column title="IP地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
-            <Table.Column hide ellipsis title="备注信息" dataIndex="desc"/>
+            <Table.Column ellipsis width={170} title="主机名称" dataIndex="name"/>
+            <Table.Column width={320} title="IP地址" render={info => (
+              <Space>
+                <IPAddress ip={info.public_ip_address} isPublic/>
+                <IPAddress ip={info.private_ip_address}/>
+              </Space>
+            )}/>
+            <Table.Column title="备注信息" dataIndex="desc"/>
           </Table>
         </Col>
       </Row>

spug_web/src/pages/host/Table.js

@@ -8,6 +8,7 @@ import { observer } from 'mobx-react';
 import { Table, Modal, Dropdown, Button, Menu, Avatar, Tooltip, Space, Tag, Radio, Input, message } from 'antd';
 import { PlusOutlined, DownOutlined, SyncOutlined, FormOutlined } from '@ant-design/icons';
 import { Action, TableCard, AuthButton, AuthFragment } from 'components';
+import IPAddress from './IPAddress';
 import { http, hasPermission } from 'libs';
 import store from './store';
 import icons from './icons';
@@ -37,16 +38,6 @@ function ComTable() {
     }
   }
 
-  function IpAddress(props) {
-    if (props.ip && props.ip.length > 0) {
-      return (
-        <div>{props.ip[0]}<span style={{color: '#999'}}>（{props.isPublic ? '公' : '私'}）</span></div>
-      )
-    } else {
-      return null
-    }
-  }
-
   return (
     <TableCard
       tKey="hi"
@@ -113,8 +104,8 @@ function ComTable() {
         sorter={(a, b) => a.name.localeCompare(b.name)}/>
       <Table.Column title="IP地址" render={info => (
         <div>
-          <IpAddress ip={info.public_ip_address} isPublic/>
-          <IpAddress ip={info.private_ip_address}/>
+          <IPAddress ip={info.public_ip_address} isPublic/>
+          <IPAddress ip={info.private_ip_address}/>
         </div>
       )}/>
       <Table.Column title="配置信息" render={info => (

spug_web/src/pages/host/index.module.less

@@ -30,6 +30,15 @@
   :global(.ant-modal-footer) {
     border-top: none
   }
+
+  .gTitle {
+    height: 44px;
+    line-height: 44px;
+    padding-left: 12px;
+    font-weight: bold;
+    margin-bottom: 12px;
+    background: #fafafa;
+  }
 }
 
 .formAddress1 {