fix: 模型版本列表按钮统一使用button,项目管理新增数据表单默认同行展示

README.md

@@ -2,7 +2,7 @@
  * @Author: zhoux zhouxia@supervision.ltd
  * @Date: 2023-11-01 13:56:33
  * @LastEditors: zhoux zhouxia@supervision.ltd
- * @LastEditTime: 2023-11-03 11:09:56
+ * @LastEditTime: 2023-11-06 09:43:02
  * @FilePath: \general-ai-platform-web\README.md
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -22,6 +22,7 @@
 
 * 展示抽屉内容时需要有关闭按钮，排版需和谐
 * 使用stepForm的时候，最后的提交写在最后一步的onfinish里面而不是总的stepForm里
+* table操作栏按钮统一使用button，合理间距
 
 
 
@@ -56,3 +57,13 @@
 
 
 ## ProForm 表单
+
+### git提交修饰
+feat: 新功能
+fix: bug修复
+docs: 仅文档更改
+style: 不影响代码含义的更改（空白、格式设置、缺失 分号等）
+refactor: 既不修复bug也不添加特性的代码更改
+perf: 改进性能的代码更改
+test: 添加缺少的测试或更正现有测试
+chore: 对构建过程或辅助工具和库（如文档）的更改（无法确认内容可使用）

src/pages/Project/ProjectList/components/MyCreateForm.tsx

@@ -5,6 +5,7 @@ import {beforeUploadFile} from '@/utils/common';
 import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons';
 import type { ProFormInstance } from '@ant-design/pro-components';
 import {
+  ProCard,
   ProForm,
   ProFormList,
   ProFormSwitch,
@@ -13,14 +14,14 @@ import {
   StepsForm,
 } from '@ant-design/pro-components';
 import { FormattedMessage, useIntl } from '@umijs/max';
-import {Modal, Switch, Transfer, Tree, message, UploadFile} from 'antd';
+import { Modal, Switch, Transfer, Tree, UploadFile, message } from 'antd';
 import type { TransferDirection } from 'antd/es/transfer';
 import { DataNode } from 'antd/es/tree';
 import React, { useEffect, useRef, useState } from 'react';
 // @ts-ignore
+import { FormListActionType } from '@ant-design/pro-form/lib';
+import yaml from 'js-yaml';
 import cookie from 'react-cookies';
-import {FormListActionType} from "@ant-design/pro-form/lib";
-import yaml from "js-yaml";
 
 interface RecordType {
   key: string;
@@ -56,7 +57,7 @@ const waitTime = (time: number = 100) => {
 };
 
 /**styles 配置 */
-const formContainerWidth: number = 755
+const formContainerWidth: number = 755;
 const stepFormItemStyleProps: Record<string, any> = {
   width: formContainerWidth,
 };
@@ -152,7 +153,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
   const [current, setCurrent] = useState(0);
 
   const [dataFormList, setDataFormList] = useState<any>([]);
-  const dataFormListRef = useRef(dataFormList)
+  const dataFormListRef = useRef(dataFormList);
   const [fileList, setFileList] = useState<UploadFile<any>[]>([]);
 
   const actionFormListRef = useRef<
@@ -176,8 +177,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
     }
 
     setFileList([...curFile]);
-  }
+  };
-
 
   const getModelData = () => {
     postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: '' }).then((res) => {
@@ -205,8 +205,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
         .then((resp: API.Response) => {
           setTreeData(resp.data.tree);
         })
-        .catch(() => {
+        .catch(() => {});
-        });
     } else {
       formRef.current?.resetFields();
     }
@@ -233,7 +232,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
       current={current}
       onCurrentChange={setCurrent}
       onFinish={async () => {
-        setFileList([])
+        setFileList([]);
         let formData = formRef.current?.getFieldsValue();
         if (formData?.name) {
           formData.inferConfig = { models: targetKeys, params: configData?.params || [] };
@@ -264,7 +263,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
             width={803}
             onCancel={() => {
               setCurrent(0);
-              setFileList([])
+              setFileList([]);
               formRef.current?.resetFields();
               formRef3.current?.resetFields();
               props.handleModal();
@@ -423,7 +422,6 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
           dataSource={modalData}
           showSearch
           titles={['未选模型', '已选模型']}
-
           locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }}
           targetKeys={targetKeys}
           onChange={handleChange}
@@ -485,7 +483,8 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
         {/* <Icon type="delete" /> */}
         {/* TODO 图标需要替换 */}
 
-        <ProFormUploadDragger max={1}
+        <ProFormUploadDragger
+          max={1}
           label="配置文件上传"
           value={fileList}
           name="dragger"
@@ -493,18 +492,23 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
             onChange: handleFileChange,
             onRemove: () => {
               let index_ids = actionFormListRef.current?.getList()?.map((v, i) => {
-                return i
+                return i;
-              })
+              });
-              actionFormListRef.current?.remove(index_ids || [])
+              actionFormListRef.current?.remove(index_ids || []);
             },
             beforeUpload: (file, fileList) => {
-              if (!file.name.endsWith('.yaml') && !file.name.endsWith('.yml') && !file.name.endsWith('.json')) {
+              if (
-                message.error('请上传yaml或json文件').then(() => {
+                !file.name.endsWith('.yaml') &&
-                })
+                !file.name.endsWith('.yml') &&
-                return false
+                !file.name.endsWith('.json')
+              ) {
+                message.error('请上传yaml或json文件').then(() => {});
+                return false;
               } else {
-                let parsedData = {}
+                let parsedData = {};
-                file.text().then((text) => {
+                file
+                  .text()
+                  .then((text) => {
                     if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) {
                       parsedData = yaml.load(text) as Record<string, unknown>;
                     }
@@ -514,17 +518,18 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
                     if (Object.keys(parsedData).length > 0) {
                       dataFormListRef.current = Object.entries(parsedData).map(([key, value]) => ({
                         name: key,
-                      default: value
+                        default: value,
-                    }))
+                      }));
 
                       dataFormListRef.current.forEach((v: any, i: number) => {
-                      actionFormListRef.current?.add(v, i)
+                        actionFormListRef.current?.add(v, i);
-                    })
+                      });
                     }
-                  return true
+                    return true;
-                }).catch(() => {
-                  return false
                   })
+                  .catch(() => {
+                    return false;
+                  });
               }
             },
           }}
@@ -543,11 +548,17 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
         >
           {(f, index, action) => {
             return (
-              <>
+              <ProCard style={{padding: 0, margin: 0}} bodyStyle={{padding: 0, margin: 0 }}>
+                <ProCard style={{padding: 0, margin: 0}} bodyStyle={{padding: 0, marginRight: 10}}>
                   <ProFormText key="name" name="name" label="键名" />
+                </ProCard>
+                <ProCard style={{padding: 0, margin: 0}} bodyStyle={{padding: 0, marginRight: 10}}>
                   <ProFormText key="default" name="default" label="默认值" />
+                </ProCard>
+                <ProCard style={{padding: 0, margin: 0}} bodyStyle={{padding: 0, marginRight: 10}}>
                   <ProFormText key="remark" name="remark" label="备注" />
-              </>
+                </ProCard>
+              </ProCard>
             );
           }}
         </ProFormList>

src/pages/Resource/AlgorithmModelList/components/ModelVersionListDrawer.tsx

@@ -254,8 +254,7 @@ const ModelVersionListDrawer: React.FC<ColumnDrawProps> = (props) => {
               dataSource={props.currentRow}
               title="模型详细信息"
               tooltip="包含了模型详细信息"
-              columns={props.columns}
+              columns={props.columns.filter((item: Record<string,any>) => !['option'].includes(item.dataIndex))}
-
             >
             </ProDescriptions>
           </ProCard>

src/pages/Resource/AlgorithmModelList/index.tsx

@@ -271,45 +271,43 @@ const AlgorithmModelList: React.FC = () => {
           accessible={access.canUpdate(history.location.pathname)}
           key={`${history.location.pathname}-add`}
         >
-          <a
+          <Button
             key="detail"
+            type="link"
+            size="small"
             onClick={() => {
               setCurrentRow(record);
               setShowDetail(true);
             }}
           >
             详情
-          </a>
+          </Button>
-          <a
+          <Button
             key="update"
+            type="link"
+            size="small"
             onClick={() => {
               setUpdateModalOpen(true);
               setCurrentRow(record);
             }}
           >
             <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
-          </a>
+          </Button>
           {/* update1101 */}
           <Popconfirm
             placement="topLeft"
-            title={(
+            title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
-              intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })
+            description={intl.formatMessage({
-            )}
+              id: 'common.modal.table.delete.content',
-            description={(
+              defaultMessage: '$$$',
-              intl.formatMessage({ id: 'common.modal.table.delete.content', defaultMessage: '$$$' })
+            })}
-            )}
+            okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
-            okText={(
+            cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
-              intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })
-            )}
-            cancelText={(
-              intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })
-            )}
-       
             onConfirm={() => {
               handleDestroy(record).then(() => {});
             }}
           >
-            <Button key="destroy" type="text" danger>
+            <Button key="destroy" type="link" size="small" danger>
               <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
             </Button>
           </Popconfirm>
@@ -355,18 +353,16 @@ const AlgorithmModelList: React.FC = () => {
                   onClick={async () => {
                     Modal.confirm({
                       icon: <ExclamationCircleOutlined />,
-                      title: (
+                      title: intl.formatMessage({
-                        intl.formatMessage({ id: 'common.modal.table.delete.title', defaultMessage: '$$$' })
+                        id: 'common.modal.table.delete.title',
-                      ),
+                        defaultMessage: '$$$',
-                      content:(
+                      }),
-                        intl.formatMessage({ id: 'common.modal.table.delete.content', defaultMessage: '$$$' })
+                      content: intl.formatMessage({
-                      ),
+                        id: 'common.modal.table.delete.content',
-                      okText: (
+                        defaultMessage: '$$$',
-                        intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })
+                      }),
-                      ),
+                      okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' }),
-                      cancelText: (
+                      cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' }),
-                        intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })
-                      ),
                       onOk() {
                         // TODO 未对接批量删除接口
                         deleteAlgorithmModelDeleteAlgorithmModelByIds({

src/pages/Resource/ModelVersionList/index.tsx

@@ -15,7 +15,7 @@ import { DownOutlined, PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { FooterToolbar, PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components';
 import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
-import { Button, Popconfirm, message , Dropdown} from 'antd';
+import { Button, Dropdown, Popconfirm, message } from 'antd';
 // import { MenuProps } from 'rc-menu';
 import React, { useRef, useState } from 'react';
 import { ColumnDrawer } from './components/ColumnDrawer';
@@ -134,14 +134,14 @@ const ModelVersionList: React.FC = () => {
       });
     }
     const prevActions: any[] = [];
-    const moreActions: { key: string; label: any; }[] = [];
+    const moreActions: { key: string; label: any }[] = [];
     renderActions.map((item, index) => {
       if (index < maxActionCount - 1) {
         prevActions.push(item);
       } else {
         moreActions.push({
-          key: index+"",
+          key: index + '',
-          label: item
+          label: item,
         });
       }
       // eslint-disable-next-line react/jsx-key
@@ -152,7 +152,10 @@ const ModelVersionList: React.FC = () => {
           return <div key={index}>{item}</div>;
         })}
         <Dropdown menu={{ items: moreActions }}>
-         <a>更多<DownOutlined/></a>
+          <a>
+            更多
+            <DownOutlined />
+          </a>
         </Dropdown>
       </>
     );
@@ -320,23 +323,28 @@ const ModelVersionList: React.FC = () => {
         >
           <TableActionCard
             renderActions={[
-              <a
+              <Button
                 key="update"
+                type="link"
+                size="small"
                 onClick={() => {
                   setUpdateModalOpen(true);
                   setCurrentRow(record);
                 }}
               >
                 <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
-              </a>,
+              </Button>,
-              <a
+              <Button
                 key="destroy"
+                type="link"
+                size="small"
+                danger
                 onClick={() => {
                   handleDestroy(record).then(() => {});
                 }}
               >
                 <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
-              </a>,
+              </Button>,
               // eslint-disable-next-line react/jsx-key
               <Popconfirm
                 title="发布模型"
@@ -346,15 +354,17 @@ const ModelVersionList: React.FC = () => {
                 okText="Yes"
                 cancelText="No"
               >
-                <a
+                <Button
                   key="confirm_publish"
+                  type="link"
+                  size="small"
                   onClick={() => {
                     setPublishModalOpen(true);
                     setCurrentRow(record);
                   }}
                 >
                   <FormattedMessage id="common.confirm_publish" defaultMessage="confirm_publish" />
-                </a>
+                </Button>
               </Popconfirm>,
               // eslint-disable-next-line react/jsx-key
               <Popconfirm
@@ -377,12 +387,12 @@ const ModelVersionList: React.FC = () => {
                     });
                 }}
                 onCancel={() => {}}
-                okText="Yes"
+                okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
-                cancelText="No"
+                cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
               >
-                <a key="set_default" onClick={() => {}}>
+                <Button key="set_default" type="link" size="small">
                   <FormattedMessage id="common.set_default" defaultMessage="$$$" />
-                </a>
+                </Button>
               </Popconfirm>,
             ]}
           ></TableActionCard>