placeholder and tips (#49)

Author: luhc228

renderer/src/pages/Git/components/GitDirFormItemLabel/index.tsx

@@ -11,7 +11,7 @@ export default () => {
         align="t"
         delay={200}
       >
-        该目录下的 Git 项目都将使用此配置，详细说明查看<a href="https://git-scm.com/docs/git-config#_conditional_includes" target="__blank">文档</a>
+        该目录下的 Git 项目都将使用此 Git 配置，详细说明参考<a href="https://appworks.site/pack/basic/toolkit.html#使用不同的-git-配置" target="__blank">文档</a>
       </Tooltip>
     </span>
   );

renderer/src/pages/Git/components/GlobalGitConfig/index.tsx

@@ -13,6 +13,10 @@ const GlobalGitConfig: FC<{}> = () => {
   const { globalGitConfig } = state;
 
   const onFieldChange = debounce(async () => {
+    const { errors } = await field.validatePromise();
+    if (errors) {
+      return;
+    }
     const values: any = field.getValues();
     await dispatcher.updateGlobalGitConfig(removeObjEmptyValue(values));
     Message.success('更新全局 Git 配置成功');

renderer/src/pages/Git/components/HostNameFormItemLabel/index.tsx

@@ -0,0 +1,18 @@
+import { Icon, Balloon } from '@alifd/next';
+
+const { Tooltip } = Balloon;
+
+export default () => {
+  return (
+    <span>
+      Git 服务器域名
+      <Tooltip
+        trigger={<Icon type="prompt" style={{ marginLeft: 4 }} />}
+        align="t"
+        delay={200}
+      >
+        如何查看 Git 服务器域名，请参考<a href="https://appworks.site/pack/basic/toolkit.html#新增配置" target="__blank">文档</a>
+      </Tooltip>
+    </span>
+  );
+};

renderer/src/pages/Git/components/SSHKeyFormItemLabel/index.tsx

@@ -11,7 +11,7 @@ export default () => {
         align="t"
         delay={200}
       >
-        添加 SSH 公钥教程，请查看<a href="https://appworks.site/pack/basic/toolkit.html" target="__blank">文档</a>
+        添加 SSH 公钥教程，请参考<a href="https://appworks.site/pack/basic/toolkit.html#使用-ssh-公钥" target="__blank">文档</a>
       </Tooltip>
     </span>
   );

renderer/src/pages/Git/components/UserGitConfig/index.tsx

@@ -7,6 +7,7 @@ import Icon from '@/components/Icon';
 import store from '../../store';
 import SSHKeyFormItemLabel from '../SSHKeyFormItemLabel';
 import GitDirsForm from '../GitDirsForm';
+import HostNameFormItemLabel from '../HostNameFormItemLabel';
 import styles from './index.module.scss';
 
 const { Row, Col } = Grid;
@@ -28,6 +29,10 @@ const UserGitConfig: FC<UserGitConfigProps> = ({ configName, gitDirs, SSHPublicK
   const field = Field.useField({
     parseName: true,
     onChange: debounce(async () => {
+      const { errors } = await field.validatePromise();
+      if (errors) {
+        return;
+      }
       const values: any = field.getValues();
       await dispatcher.updateUserGitConfig({
         configName,
@@ -49,13 +54,29 @@ const UserGitConfig: FC<UserGitConfigProps> = ({ configName, gitDirs, SSHPublicK
   return (
     <div className={styles.userGitConfig}>
       <Row align="center" className={styles.row}>
-        <Col span={10} className={styles.label}>Git 服务器域名</Col>
+        <Col span={10} className={styles.label}><HostNameFormItemLabel /></Col>
         <Col span={14}>
           <Input
-            {...field.init('user.hostName')}
+            {...field.init('user.hostName', {
+              rules: [
+                {
+                  required: true,
+                  pattern: /^(?!http:\/\/|https:\/\/).*/i,
+                  message: 'Git 服务器域名不需要带 http(s)://，如 github.com',
+                  trigger: 'onChange',
+                },
+              ],
+            })}
             className={styles.input}
-            placeholder="如 github.com、gitlab.com"
+            placeholder="如 github.com"
           />
+          {field.getError('user.hostName') ? (
+            <div style={{ color: 'red', marginTop: 4 }}>
+              {field.getError('user.hostName').join(',')}
+            </div>
+          ) : (
+            ''
+          )}
         </Col>
       </Row>
       <Row align="center" className={styles.row}>

renderer/src/pages/Git/components/UserGitConfigDialogForm/index.tsx

@@ -1,6 +1,7 @@
 import { FC, useEffect } from 'react';
 import { Dialog, Form, Field, Input, Message, Icon, Button } from '@alifd/next';
 import store from '../../store';
+import HostNameFormItemLabel from '../HostNameFormItemLabel';
 import styles from './index.module.scss';
 
 interface UserGitConfigDialogFormProps {
@@ -80,7 +81,7 @@ const UserGitConfigDialogForm: FC<UserGitConfigDialogFormProps> = ({ refresh })
     <Dialog
       visible={userGitConfigFormVisible}
       title={'新增用户配置'}
-      style={{ width: 600 }}
+      style={{ width: 700 }}
       onOk={submit}
       onCancel={close}
       closeable={false}
@@ -99,11 +100,13 @@ const UserGitConfigDialogForm: FC<UserGitConfigDialogFormProps> = ({ refresh })
           <Input name="configName" placeholder="请输入配置名称，仅支持字母和数字的组合，如 Github" />
         </Form.Item>
         <Form.Item
-          label="Git 服务器域名"
+          label={<HostNameFormItemLabel />}
           required
           requiredMessage="请输入 Git 服务器域名，如 github.com"
+          pattern={/^(?!http:\/\/|https:\/\/).*/i}
+          patternMessage="Git 服务器域名不需要带 http(s)://，如 github.com"
         >
-          <Input name="user.hostName" placeholder="请输入 Git 服务器域名" />
+          <Input name="user.hostName" placeholder="请输入 Git 服务器域名，如 github.com" />
         </Form.Item>
         <Form.Item
           label="用户名"