feat: 代码配置添加公开/私有tag

react-ui/src/pages/CodeConfig/components/AddCodeConfigModal/index.tsx

@@ -3,8 +3,9 @@ import { AvailableRange } from '@/enums';
 import { type CodeConfigData } from '@/pages/CodeConfig/List';
 import { addCodeConfigReq, updateCodeConfigReq } from '@/services/codeConfig';
 import { to } from '@/utils/promise';
-import { Form, Input, Radio, message, type ModalProps } from 'antd';
+import { Form, Input, Radio, message, type FormRule, type ModalProps } from 'antd';
 import { omit } from 'lodash';
+import { useMemo } from 'react';
 
 export enum VerifyMode {
   Password = 0, // 用户名密码
@@ -25,7 +26,32 @@ interface AddCodeConfigModalProps extends Omit<ModalProps, 'onOk'> {
 }
 
 function AddCodeConfigModal({ opType, codeConfigData, onOk, ...rest }: AddCodeConfigModalProps) {
-  // 上传请求
+  const [form] = Form.useForm();
+  const isPublic = Form.useWatch('code_repo_vis', form) === AvailableRange.Public;
+
+  const urlExample = useMemo(
+    () =>
+      isPublic
+        ? 'https://gitlink.org.cn/ci4s/ci4sManagement-cloud.git'
+        : 'git@code.gitlink.org.cn:ci4s/ci4sManagement-cloud.git',
+    [isPublic],
+  );
+
+  // /^(git@[\w.-]+:[\w./-]+\.git)$/
+  const urlRules: FormRule[] = useMemo(
+    () =>
+      isPublic
+        ? [
+            {
+              type: 'url',
+              message: '请输入正确的 Git 地址',
+            },
+          ]
+        : ([] as FormRule[]),
+    [isPublic],
+  );
+
+  // 创建
   const createCodeConfig = async (formData: FormData) => {
     const params: FormData & { id?: number } = {
       ...formData,
@@ -78,14 +104,12 @@ function AddCodeConfigModal({ opType, codeConfigData, onOk, ...rest }: AddCodeCo
     >
       <Form
         name="form"
+        form={form}
         layout="vertical"
         onFinish={onFinish}
         initialValues={initialValues}
         autoComplete="off"
       >
-        {/* 禁止 Chrome 自动填充 */}
-        {/* <Input type="text" style={{ display: 'none' }} />
-        <Input type="password" style={{ display: 'none' }} /> */}
         <Form.Item
           label="代码仓库名称"
           name="code_repo_name"
@@ -122,13 +146,15 @@ function AddCodeConfigModal({ opType, codeConfigData, onOk, ...rest }: AddCodeCo
               required: true,
               message: '请输入 Git 地址',
             },
-            {
-              type: 'url',
-              message: '请输入正确的 Git 地址',
-            },
+            ...urlRules,
           ]}
         >
-          <Input placeholder="请输入 Git 地址" showCount allowClear maxLength={256} />
+          <Input
+            placeholder={`请输入 Git 地址，如: ${urlExample}`}
+            showCount
+            allowClear
+            maxLength={256}
+          />
         </Form.Item>
         <Form.Item
           label="代码分支/Tag"

react-ui/src/pages/CodeConfig/components/CodeConfigItem/index.less

@@ -22,8 +22,15 @@
     font-size: 16px;
   }
 
+  &__tag {
+    padding: 4px;
+    color: @primary-color;
+    font-size: 12px;
+    background-color: .addAlpha(@primary-color, 0.1) [];
+    border-radius: 4px;
+  }
+
   &__url {
-    margin-bottom: 10px;
     color: @text-color-secondary;
     font-size: 14px;
   }

react-ui/src/pages/CodeConfig/components/CodeConfigItem/index.tsx

@@ -1,6 +1,7 @@
 import clock from '@/assets/img/clock.png';
 import creatByImg from '@/assets/img/creatBy.png';
 import KFIcon from '@/components/KFIcon';
+import { AvailableRange } from '@/enums';
 import { type CodeConfigData } from '@/pages/CodeConfig/List';
 import { formatDate } from '@/utils/date';
 import { Button, Flex, Typography } from 'antd';
@@ -8,13 +9,13 @@ import styles from './index.less';
 
 type CodeConfigItemProps = {
   item: CodeConfigData;
-  onClick: (item: CodeConfigData) => void;
-  onRemove: (item: CodeConfigData) => void;
+  onClick?: (item: CodeConfigData) => void;
+  onRemove?: (item: CodeConfigData) => void;
 };
 
 function CodeConfigItem({ item, onClick, onRemove }: CodeConfigItemProps) {
   return (
-    <div className={styles['code-config-item']} onClick={() => onClick(item)}>
+    <div className={styles['code-config-item']} onClick={() => onClick?.(item)}>
       <Flex justify="space-between" align="center" style={{ marginBottom: '20px', height: '32px' }}>
         <Typography.Paragraph
           className={styles['code-config-item__name']}
@@ -22,18 +23,31 @@ function CodeConfigItem({ item, onClick, onRemove }: CodeConfigItemProps) {
         >
           {item.code_repo_name}
         </Typography.Paragraph>
+        <div className={styles['code-config-item__tag']}>
+          {item.code_repo_vis === AvailableRange.Public ? '公开' : '私有'}
+        </div>
         <Button
           type="text"
           shape="circle"
+          style={{ marginLeft: 'auto', right: 0 }}
           onClick={(e) => {
             e.stopPropagation();
-            onRemove(item);
+            onRemove?.(item);
           }}
         >
           <KFIcon type="icon-shanchu" font={17} />
         </Button>
       </Flex>
-      <div className={styles['code-config-item__description']}>{item.git_url}</div>
+      <Typography.Paragraph
+        className={styles['code-config-item__url']}
+        ellipsis={{ tooltip: item.git_url }}
+        style={{ marginBottom: '8px' }}
+      >
+        {item.git_url}
+      </Typography.Paragraph>
+      <div className={styles['code-config-item__url']} style={{ marginBottom: '20px' }}>
+        {item.git_branch}
+      </div>
       <Flex justify="space-between">
         <div className={styles['code-config-item__time']}>
           <img style={{ width: '17px', marginRight: '6px' }} src={creatByImg} alt="" />