U 优化样式

spug_web/src/components/ACEditor.js

@@ -6,17 +6,21 @@
 import React from 'react';
 import Editor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-sh';
+import 'ace-builds/src-noconflict/mode-text';
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/mode-space';
 import 'ace-builds/src-noconflict/mode-python';
 import 'ace-builds/src-noconflict/theme-tomorrow';
 
 export default function (props) {
+  const style = {fontFamily: 'source-code-pro, Menlo, Monaco, Consolas, PingFang SC, Microsoft YaHei', ...props.style}
   return (
     <Editor
       theme="tomorrow"
       fontSize={13}
       tabSize={2}
-      style={{fontFamily: 'source-code-pro, Menlo, Monaco, Consolas, PingFang SC, Microsoft YaHei'}}
       {...props}
+      style={style}
     />
   )
 }

spug_web/src/index.css

@@ -2,7 +2,7 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Microsoft YaHei, PingFang SC, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow: hidden;
@@ -18,7 +18,12 @@ div::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace, PingFang SC, Microsoft YaHei;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace, Microsoft YaHei, PingFang SC;
+}
+
+.ant-form-item-extra {
+  font-size: 13px;
+  padding-top: 6px;
 }
 
 /* Common CSS style */

spug_web/src/pages/config/setting/JSONView.js

@@ -7,10 +7,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { SaveOutlined, EditOutlined } from '@ant-design/icons';
 import { Button, message } from 'antd';
-import Editor from 'react-ace';
-import 'ace-builds/src-noconflict/mode-json';
-import 'ace-builds/src-noconflict/theme-tomorrow';
-import { AuthButton } from 'components';
+import { AuthButton, ACEditor } from 'components';
 import { http } from 'libs';
 import store from './store';
 
@@ -57,14 +54,13 @@ class JSONView extends React.Component {
     const {body, readOnly, loading} = this.state;
     return (
       <div style={{position: 'relative'}}>
-        <Editor
+        <ACEditor
           mode="json"
           theme="tomorrow"
           height="500px"
           width="100%"
           readOnly={readOnly}
           setOptions={{useWorker: false}}
-          style={{fontSize: 14}}
           value={body}
           onChange={v => this.setState({body: v})}/>
         {readOnly && <AuthButton

spug_web/src/pages/config/setting/TextView.js

@@ -5,13 +5,13 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import Editor from 'react-ace';
-import 'ace-builds/src-noconflict/mode-space';
-import 'ace-builds/src-noconflict/theme-tomorrow';
-import store from './store';
-import { http } from "libs";
-import { SaveOutlined, EditOutlined } from '@ant-design/icons';
 import { Button, message } from 'antd';
+import { SaveOutlined, EditOutlined } from '@ant-design/icons';
+import { ACEditor } from 'components';
+import store from './store';
+import { http } from 'libs';
+
+
 import { AuthButton } from 'components';
 
 @observer
@@ -52,12 +52,11 @@ class TextView extends React.Component {
     const {body, loading, readOnly} = this.state;
     return (
       <div style={{position: 'relative'}}>
-        <Editor
+        <ACEditor
           mode="space"
           width="100%"
           height="500px"
           theme="tomorrow"
-          style={{fontSize: 14}}
           value={body}
           readOnly={readOnly}
           onChange={v => this.setState({body: v})}/>

spug_web/src/pages/deploy/app/Ext1Setup2.js

@@ -7,8 +7,8 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { Form, Radio, Button, Tooltip } from 'antd';
+import { ACEditor } from 'components';
 import { cleanCommand } from 'libs';
-import Editor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-text';
 import 'ace-builds/src-noconflict/mode-sh';
 import 'ace-builds/src-noconflict/theme-tomorrow';
@@ -46,10 +46,9 @@ export default observer(function () {
   return (
     <Form layout="vertical" style={{padding: '0 120px'}}>
       <Form.Item label={FilterHead} tooltip="xxx">
-        <Editor
+        <ACEditor
           readOnly={store.isReadOnly}
           mode="text"
-          theme="tomorrow"
           width="100%"
           height="80px"
           placeholder="每行一条规则"
@@ -60,8 +59,8 @@ export default observer(function () {
       <Form.Item
         label="代码检出前执行"
         tooltip="在运行 Spug 的服务器(或容器)上执行，当前目录为仓库源代码目录，可以执行任意自定义命令。"
-        help={<span>{Tips}，请避免在此修改已跟踪的文件，防止在检出代码时失败。</span>}>
-        <Editor
+        extra={<span>{Tips}，请避免在此修改已跟踪的文件，防止在检出代码时失败。</span>}>
+        <ACEditor
           readOnly={store.isReadOnly}
           mode="sh"
           theme="tomorrow"
@@ -76,8 +75,8 @@ export default observer(function () {
         label="代码检出后执行"
         style={{marginTop: 12, marginBottom: 24}}
         tooltip="在运行 Spug 的服务器(或容器)上执行，当前目录为检出后的源代码目录，可执行任意自定义命令。"
-        help={<span>{Tips}，大多数情况下在此进行构建操作。</span>}>
-        <Editor
+        extra={<span>{Tips}，大多数情况下在此进行构建操作。</span>}>
+        <ACEditor
           readOnly={store.isReadOnly}
           mode="sh"
           theme="tomorrow"

spug_web/src/pages/deploy/app/Ext1Setup3.js

@@ -6,10 +6,7 @@
 import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { Form, Button, Input, Row, Col, message } from 'antd';
-import Editor from 'react-ace';
-import 'ace-builds/src-noconflict/mode-text';
-import 'ace-builds/src-noconflict/mode-sh';
-import 'ace-builds/src-noconflict/theme-tomorrow';
+import { ACEditor } from 'components';
 import { http, cleanCommand } from 'libs';
 import Tips from './Tips';
 import store from './store';
@@ -57,8 +54,8 @@ export default observer(function () {
       <Form.Item
         label="应用发布前执行"
         tooltip="在发布的目标主机上运行，当前目录为目标主机上待发布的源代码目录，可执行任意自定义命令。"
-        help={<span>{Tips}，此时还未进行文件变更，可进行一些发布前置操作。</span>}>
-        <Editor
+        extra={<span>{Tips}，此时还未进行文件变更，可进行一些发布前置操作。</span>}>
+        <ACEditor
           readOnly={store.isReadOnly}
           mode="sh"
           theme="tomorrow"
@@ -73,8 +70,8 @@ export default observer(function () {
         label="应用发布后执行"
         style={{marginTop: 12, marginBottom: 24}}
         tooltip="在发布的目标主机上运行，当前目录为已发布的应用目录，可执行任意自定义命令。"
-        help={<span>{Tips}，可以在发布后进行重启服务等操作。</span>}>
-        <Editor
+        extra={<span>{Tips}，可以在发布后进行重启服务等操作。</span>}>
+        <ACEditor
           readOnly={store.isReadOnly}
           mode="sh"
           theme="tomorrow"

spug_web/src/pages/deploy/app/Ext2Setup2.js

@@ -7,9 +7,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Form, Input, Button, message, Divider, Alert, Select } from 'antd';
-import Editor from 'react-ace';
-import 'ace-builds/src-noconflict/mode-sh';
-import 'ace-builds/src-noconflict/theme-tomorrow';
+import { ACEditor } from 'components';
 import styles from './index.module.css';
 import { http, cleanCommand } from 'libs';
 import Tips from './Tips';
@@ -72,7 +70,7 @@ class Ext2Setup2 extends React.Component {
             </Form.Item>
 
             <Form.Item required label="执行内容">
-              <Editor
+              <ACEditor
                 readOnly={store.isReadOnly}
                 mode="sh"
                 theme="tomorrow"
@@ -120,7 +118,7 @@ class Ext2Setup2 extends React.Component {
                   )}/>
               </Form.Item>,
               [undefined, '0'].includes(item['src_mode']) ? (
-                <Form.Item key={1} label="过滤规则" help={this.helpMap[item['mode']]}>
+                <Form.Item key={1} label="过滤规则" extra={this.helpMap[item['mode']]}>
                   <Input
                     spellCheck={false}
                     placeholder="请输入逗号分割的过滤规则"
@@ -149,7 +147,7 @@ class Ext2Setup2 extends React.Component {
               </Form.Item>
             ]) : (
               <Form.Item required label="执行内容">
-                <Editor
+                <ACEditor
                   readOnly={store.isReadOnly}
                   mode="sh"
                   theme="tomorrow"

spug_web/src/pages/deploy/request/BatchDelete.js

@@ -68,17 +68,17 @@ export default observer(function () {
         {mode === 'expire' && (
           <Form.Item
             label="截止日期 :"
-            help={<div>将删除截止日期<span style={{color: 'red'}}>之前</span>的所有发布申请记录。</div>}>
+            extra={<div>将删除截止日期<span style={{color: 'red'}}>之前</span>的所有发布申请记录。</div>}>
             <DatePicker value={value} style={{width: 290}} onChange={setValue} placeholder="请选择截止日期"/>
           </Form.Item>
         )}
         {mode === 'count' && (
-          <Form.Item label="保留记录 :" help="每个应用每个环境仅保留最新的N条发布申请。">
+          <Form.Item label="保留记录 :" extra="每个应用每个环境仅保留最新的N条发布申请。">
             <Input value={value} style={{width: 290}} onChange={e => setValue(e.target.value)} placeholder="请输入保留个数"/>
           </Form.Item>
         )}
         {mode === 'deploy' && (
-          <Form.Item label="发布配置 :" help="删除指定应用环境下的发布申请记录。">
+          <Form.Item label="发布配置 :" extra="删除指定应用环境下的发布申请记录。">
             <Space>
               <Select
                 showSearch

spug_web/src/pages/host/BatchSync.js

@@ -84,7 +84,7 @@ export default observer(function () {
 
       <Form hidden={!token} labelCol={{span: 8}} wrapperCol={{span: 14}}>
         {Object.entries(hosts).map(([key, item]) => (
-          <Form.Item key={key} label={item.name} help={item.message}>
+          <Form.Item key={key} label={item.name} extra={item.message}>
             {item.status === 'ok' && <span style={{color: "#52c41a"}}>成功</span>}
             {item.status === 'fail' && <span style={{color: "red"}}>失败</span>}
             {item.status === undefined && <LoadingOutlined style={{fontSize: 20}}/>}

spug_web/src/pages/host/Form.js

@@ -65,7 +65,7 @@ export default observer(function () {
 
   const ConfirmForm = (props) => (
     <Form layout="vertical" style={{marginTop: 24}}>
-      <Form.Item required label="授权密码" help={`用户 ${props.username} 的密码， 该密码仅做首次验证使用，不会存储该密码。`}>
+      <Form.Item required label="授权密码" extra={`用户 ${props.username} 的密码， 该密码仅做首次验证使用，不会存储该密码。`}>
         <Input.Password onChange={e => props.onChange(e.target.value)}/>
       </Form.Item>
     </Form>

spug_web/src/pages/host/Import.js

@@ -70,7 +70,7 @@ export default observer(function () {
         style={{width: 365, margin: '0 auto 20px'}}
         message="导入或输入的密码仅作首次验证使用，不会存储。"/>
       <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
-        <Form.Item label="模板下载" help="请下载使用该模板填充数据后导入">
+        <Form.Item label="模板下载" extra="请下载使用该模板填充数据后导入">
           <a href="/resource/主机导入模板.xlsx">主机导入模板.xlsx</a>
         </Form.Item>
         <Form.Item required label="选择分组">

spug_web/src/pages/monitor/Step1.js

@@ -143,7 +143,7 @@ export default observer(function () {
       <Form.Item required label="检测端口" style={getStyle(['2'])}>
         <Input value={extra} placeholder="请输入端口号" onChange={e => store.record.extra = e.target.value}/>
       </Form.Item>
-      <Form.Item required label="进程名称" help="执行 ps -ef 看到的进程名称。" style={getStyle(['3'])}>
+      <Form.Item required label="进程名称" extra="执行 ps -ef 看到的进程名称。" style={getStyle(['3'])}>
         <Input value={extra} placeholder="请输入进程名称" onChange={e => store.record.extra = e.target.value}/>
       </Form.Item>
       <Form.Item

spug_web/src/pages/monitor/Step2.js

@@ -82,7 +82,7 @@ export default observer(function () {
       <Form.Item required name="notify_mode" initialValue={info.notify_mode} label="报警方式">
         <Checkbox.Group options={modeOptions}/>
       </Form.Item>
-      <Form.Item name="quiet" initialValue={info.quiet || 24 * 60} label="通道沉默" help="相同的告警信息，沉默期内只发送一次。">
+      <Form.Item name="quiet" initialValue={info.quiet || 24 * 60} label="通道沉默" extra="相同的告警信息，沉默期内只发送一次。">
         <Select placeholder="请选择">
           <Select.Option value={5}>5分钟</Select.Option>
           <Select.Option value={10}>10分钟</Select.Option>

spug_web/src/pages/schedule/Step3.js

@@ -108,14 +108,14 @@ export default observer(function () {
             </Form.Item>
           </Tabs.TabPane>
           <Tabs.TabPane tab="UNIX Cron" key="cron">
-            <Form.Item required label="执行规则" help="兼容Cron风格，可参考官方例子">
+            <Form.Item required label="执行规则" extra="兼容Cron风格，可参考官方例子">
               <Input
                 suffix={nextRunTime || <span/>}
                 value={lds.get(args, 'cron.rule')}
                 placeholder="例如每天凌晨1点执行：0 1 * * *"
                 onChange={e => handleCronArgs('rule', e.target.value)}/>
             </Form.Item>
-            <Form.Item label="生效时间" help="定义的执行规则在到达该时间后生效">
+            <Form.Item label="生效时间" extra="定义的执行规则在到达该时间后生效">
               <DatePicker
                 showTime
                 style={{width: '100%'}}
@@ -123,7 +123,7 @@ export default observer(function () {
                 value={lds.get(args, 'cron.start') ? moment(args['cron']['start']) : undefined}
                 onChange={v => handleCronArgs('start', v)}/>
             </Form.Item>
-            <Form.Item label="结束时间" help="执行规则在到达该时间后不再执行">
+            <Form.Item label="结束时间" extra="执行规则在到达该时间后不再执行">
               <DatePicker
                 showTime
                 style={{width: '100%'}}

spug_web/src/pages/system/account/Form.js

@@ -53,7 +53,7 @@ export default observer(function () {
           <Input type="password" placeholder="请输入密码"/>
         </Form.Item>
         <Form.Item hidden={store.record.is_supper} label="角色" style={{marginBottom: 0}}>
-          <Form.Item name="role_ids" style={{display: 'inline-block', width: '80%'}} help="权限最大化原则，组合多个角色权限。">
+          <Form.Item name="role_ids" style={{display: 'inline-block', width: '80%'}} extra="权限最大化原则，组合多个角色权限。">
             <Select mode="multiple" placeholder="请选择">
               {roleStore.records.map(item => (
                 <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
@@ -67,7 +67,7 @@ export default observer(function () {
         <Form.Item
           name="wx_token"
           label="微信Token"
-          help={(
+          extra={(
             <span>
               如果启用了MFA（两步验证）则该项为必填。
               <a target="_blank" rel="noopener noreferrer" href="https://spug.cc/docs/wx-token/">什么是微信Token？</a>

spug_web/src/pages/system/role/HostPerm.js

@@ -5,8 +5,8 @@
  */
 import React, { useState, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Form, Button, Tooltip, message, TreeSelect } from 'antd';
-import { PlusOutlined, QuestionCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import { Modal, Form, Button, message, TreeSelect } from 'antd';
+import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import hostStore from 'pages/host/store';
 import http from 'libs/http';
 import store from './store';

spug_web/src/pages/system/setting/AlarmSetting.js

@@ -49,7 +49,7 @@ export default observer(function () {
     <React.Fragment>
       <div className={styles.title}>报警服务设置</div>
       <div style={{maxWidth: 340}}>
-        <Form.Item label="邮件服务" labelCol={{span: 24}} style={{marginTop: 12}} help="用于通过邮件方式发送报警信息">
+        <Form.Item label="邮件服务" labelCol={{span: 24}} style={{marginTop: 12}} extra="用于通过邮件方式发送报警信息">
           <Radio.Group
             value={mode}
             style={{marginBottom: 8}}

spug_web/src/pages/system/setting/BasicSetting.js

@@ -31,7 +31,7 @@ export default observer(function () {
         <Form.Item
           label="调用凭据"
           labelCol={{span: 24}}
-          help={<span>如需要使用Spug的邮件、微信和MFA等内置服务，请关注公众号
+          extra={<span>如需要使用Spug的邮件、微信和MFA等内置服务，请关注公众号
               <span style={{color: '#008dff', cursor: 'pointer'}}>
                   <Popover content={spugWx}>
                     <span>Spug</span>

spug_web/src/pages/system/setting/KeySetting.js

@@ -51,7 +51,7 @@ export default observer(function () {
         description="在这里你可以上传并使用已有的密钥对，没有上传密钥的情况下，Spug会在首次添加主机时自动生成密钥对。"
       />
       <Form layout="vertical" style={{maxWidth: 650, marginTop: 12}}>
-        <Form.Item label="公钥" help="一般位于 ~/.ssh/id_rsa.pub">
+        <Form.Item label="公钥" extra="一般位于 ~/.ssh/id_rsa.pub">
           <Input.TextArea
             rows={7}
             spellCheck={false}
@@ -59,7 +59,7 @@ export default observer(function () {
             onChange={e => store.settings.public_key = e.target.value}
             placeholder="请输入公钥"/>
         </Form.Item>
-        <Form.Item label="私钥" help="一般位于 ~/.ssh/id_rsa" style={{marginTop: 12}}>
+        <Form.Item label="私钥" extra="一般位于 ~/.ssh/id_rsa" style={{marginTop: 12}}>
           <Input.TextArea
             rows={14}
             spellCheck={false}

spug_web/src/pages/system/setting/OpenService.js

@@ -26,7 +26,7 @@ export default observer(function () {
     <React.Fragment>
       <div className={styles.title}>开放服务设置</div>
       <Form layout="vertical" style={{maxWidth: 320}}>
-        <Form.Item colon={false} label="访问凭据" help="该自定义凭据用于访问平台的开放服务，例如：配置中心的配置获取API等，其他开放服务请查询官方文档。">
+        <Form.Item colon={false} label="访问凭据" extra="该自定义凭据用于访问平台的开放服务，例如：配置中心的配置获取API等，其他开放服务请查询官方文档。">
           <Input
             value={store.settings.api_key}
             onChange={e => store.settings.api_key = e.target.value}

spug_web/src/pages/system/setting/SecuritySetting.js

@@ -66,7 +66,7 @@ export default observer(function () {
       <Form layout="vertical" style={{maxWidth: 500}}>
         <Form.Item
           label="访问IP校验"
-          help="建议开启，校验是否获取了真实的访问者IP，防止因为增加的反向代理层导致基于IP的安全策略失效，当校验失败时会在登录时弹窗提醒。如果你在内网部署且仅在内网使用可以关闭该特性。">
+          extra="建议开启，校验是否获取了真实的访问者IP，防止因为增加的反向代理层导致基于IP的安全策略失效，当校验失败时会在登录时弹窗提醒。如果你在内网部署且仅在内网使用可以关闭该特性。">
           <Switch
             checkedChildren="开启"
             unCheckedChildren="关闭"
@@ -81,7 +81,7 @@ export default observer(function () {
               target="_blank" rel="noopener noreferrer" href="https://spug.cc/docs/wx-token/">什么是微信Token？</a></span>}>
           {visible ? (
             <div style={{display: 'flex', width: 490}}>
-              <Form.Item noStyle help="验证通过后开启MFA（两步验证）。">
+              <Form.Item noStyle extra="验证通过后开启MFA（两步验证）。">
                 <Input placeholder="请输入验证码" onChange={e => setCode(e.target.value)}/>
               </Form.Item>
               {counter > 0 ? (