feat: 样本标签增加枚举标签

src/app.tsx

@@ -112,7 +112,7 @@ export const layout: RunTimeLayoutConfig = ({
     waterMarkProps: {
       content: initialState?.currentUser?.user.nickname,
     },
-    footerRender: () => <Footer />,
+    // footerRender: () => <Footer />,
     onPageChange: () => {
       const { location } = history;
       // 如果没有登录，重定向到 login

src/pages/ai/sample-tag/config.tsx

@@ -20,21 +20,49 @@ export const baseTenantColumns: ProColumns<AiSampleRespVO>[] = [
     ellipsis: true,
   },
   {
-    title: '文件格式',
+    title: '枚举标签',
-    width: 100,
+    dataIndex: 'enumTags',
-    dataIndex: 'sampleMineType',
+    width: 120,
+    ellipsis: true,
+    render: (_, record) => {
+      return (
+        record.enumTags?.map((tag) => {
+          return (
+            <>
+              {tag.enumValue}:<Tag key={tag.id}>{tag.tagName}</Tag>
+            </>
+          );
+        }) || '-'
+      );
+    },
   },
+
   {
-    title: '标签',
+    title: '个性标签',
     dataIndex: 'tags',
     width: 200,
     hideInSearch: true,
     render: (_, record) => {
       return record.tags?.map((tag) => {
-        return <Tag key={tag.id}>{tag.tagName}</Tag>;
+        return (
+          <Tag key={tag.id} style={{ marginBottom: 5, marginTop: 5 }}>
+            {tag.tagName}
+          </Tag>
+        );
       });
     },
   },
+  {
+    title: '关联模型',
+    width: 100,
+    dataIndex: 'relatedModels',
+  },
+  {
+    title: '文件格式',
+    width: 100,
+    dataIndex: 'sampleMineType',
+  },
+
   {
     title: '注释',
     width: 100,

src/pages/ai/sample-tag/detail.tsx

@@ -1,5 +1,6 @@
 import { ProForm, ProFormGroup, ProFormText } from '@ant-design/pro-components';
-import { Button, message, Space, Tag } from 'antd';
+import { Button, Empty, Input, message, Space, Tag } from 'antd';
+import FormItem from 'antd/es/form/FormItem';
 import type { RowSelectionType } from 'antd/es/table/interface';
 import type { FormInstance } from 'antd/lib';
 import dayjs from 'dayjs';
@@ -13,6 +14,7 @@ import React, {
 import GroupTagModal from '@/components/GroupTag/GroupTagModal';
 import type { TagItem } from '@/components/GroupTag/types';
 import type { FileItem } from '@/components/RenameRule';
+import TagEditor from '@/components/TagEditor';
 import {
   createSampleTag,
   createSampleTagGroup,
@@ -177,28 +179,50 @@ const SampleTagDetail = <T extends Record<string, any>>(
     <>
       {data!.length > 0 ? (
         <>
-          <ProForm name="validate_other" formRef={formRef} submitter={false}>
+          <div className="sample-tag-detail">
-            {type === 'radio' && (
+            <ProForm name="validate_other" formRef={formRef} submitter={false}>
-              <ProFormGroup title="预览">
-                {data?.[0].sampleFilePath && (
-                  <audio
-                    controls
-                    preload="true"
-                    crossOrigin="anonymous"
-                    style={{ marginBottom: 24 }}
-                  >
-                    <source src={data[0].sampleFilePath} />
-                    <track kind="captions" />
-                  </audio>
-                )}
-              </ProFormGroup>
-            )}
-            <ProFormGroup title="基本信息">
               {type === 'radio' && (
+                <ProFormGroup title="预览">
+                  {data?.[0].sampleFilePath && (
+                    <audio
+                      controls
+                      preload="true"
+                      crossOrigin="anonymous"
+                      style={{ marginBottom: 24 }}
+                    >
+                      <source src={data[0].sampleFilePath} />
+                      <track kind="captions" />
+                    </audio>
+                  )}
+                </ProFormGroup>
+              )}
+              <ProFormGroup title="基本信息">
+                {type === 'radio' && (
+                  <ProFormText
+                    width="md"
+                    name="sampleName"
+                    placeholder="请输入样本名称"
+                    fieldProps={{
+                      onBlur: async (e) => {
+                        if (e.target.value) {
+                          const newData =
+                            data?.map((sample) => {
+                              return {
+                                id: sample.id,
+                                sampleName: e.target.value,
+                              };
+                            }) || [];
+                          await updateSamples(newData);
+                          props?.onRefresh?.();
+                          message.success('更新样本名称成功');
+                        }
+                      },
+                    }}
+                    rules={[{ required: true, message: '样本名称不能为空' }]}
+                  />
+                )}
                 <ProFormText
                   width="md"
-                  name="sampleName"
-                  placeholder="请输入样本名称"
                   fieldProps={{
                     onBlur: async (e) => {
                       if (e.target.value) {
@@ -206,136 +230,96 @@ const SampleTagDetail = <T extends Record<string, any>>(
                           data?.map((sample) => {
                             return {
                               id: sample.id,
-                              sampleName: e.target.value,
+                              remark: e.target.value,
                             };
                           }) || [];
                         await updateSamples(newData);
                         props?.onRefresh?.();
-                        message.success('更新样本名称成功');
+                        message.success('更新注释成功');
                       }
                     },
                   }}
-                  rules={[{ required: true, message: '样本名称不能为空' }]}
+                  name="remark"
+                  placeholder="请输入注释"
                 />
-              )}
+              </ProFormGroup>
-              <ProFormText
+              <ProFormGroup title="枚举标签" block></ProFormGroup>
-                width="md"
+              <ProForm.Item name="tag1" label="物种">
-                fieldProps={{
+                <TagEditor maxCount={1} />
-                  onBlur: async (e) => {
+              </ProForm.Item>
-                    if (e.target.value) {
+              <ProForm.Item name="tag2" label="情绪">
-                      const newData =
+                <TagEditor maxCount={1} />
-                        data?.map((sample) => {
+              </ProForm.Item>
-                          return {
+              <ProFormGroup title="个性标签">
-                            id: sample.id,
+                {/* <Form.Item name="tag"> */}
-                            remark: e.target.value,
+                {forMap(value.tags || [])}
-                          };
+              </ProFormGroup>
-                        }) || [];
+              <Button
-                      await updateSamples(newData);
+                type="dashed"
-                      props?.onRefresh?.();
+                block
-                      message.success('更新注释成功');
+                style={{ marginBottom: 24 }}
-                    }
+                onClick={handleAddTag}
-                  },
+              >
-                }}
+                添加标签
-                name="remark"
+              </Button>
-                placeholder="请输入注释"
+              <ProFormGroup title="文本信息" block></ProFormGroup>
-              />
+              <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
-            </ProFormGroup>
+                <span>添加日期: </span>
+                <span>
+                  {dayjs(value.createTime).format('YYYY-MM-DD HH:mm:ss')}
+                </span>
+              </Space>
+              <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
+                <span>修改日期</span>
+                <span>
+                  {dayjs(value.updateTime).format('YYYY-MM-DD HH:mm:ss')}
+                </span>
+              </Space>
+              <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
+                <span>文件大小: </span>
+                <span>{value.sampleSize}</span>
+              </Space>
+              <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
+                <span>格式: </span>
+                <span>{value.sampleMineType}</span>
+              </Space>
+            </ProForm>
+            <GroupTagModal
+              visible={modalVisible}
+              onCancel={() => setModalVisible(false)}
+              onChange={onListAddTag}
+              editable={false}
+              value={value?.tags}
+              request={{
+                groupsApi: {
+                  get: getSampleTagGroup,
+                  create: createSampleTagGroup,
+                  delete: deleteSampleTagGroup,
+                  update: updateSampleTagGroup,
+                },
+                tagsApi: {
+                  get: getSampleTagPage,
+                  create: createSampleTag,
+                  delete: deleteSampleTag,
+                  update: updateSampleTag,
+                },
+              }}
+              title="管理技术标签"
+              width={800}
+              height={500}
+            />
+          </div>
 
-            <ProFormGroup title="标签">
-              {/* <Form.Item name="tag"> */}
-              {forMap(value.tags || [])}
-            </ProFormGroup>
-            <Button
-              type="dashed"
-              block
-              style={{ marginBottom: 24 }}
-              onClick={handleAddTag}
-            >
-              添加标签
-            </Button>
-            <ProFormGroup title="文本信息" block></ProFormGroup>
-            <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
-              <span>添加日期: </span>
-              <span>
-                {dayjs(value.createTime).format('YYYY-MM-DD HH:mm:ss')}
-              </span>
-            </Space>
-            <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
-              <span>修改日期</span>
-              <span>
-                {dayjs(value.updateTime).format('YYYY-MM-DD HH:mm:ss')}
-              </span>
-            </Space>
-            <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
-              <span>文件大小: </span>
-              <span>{value.sampleSize}</span>
-            </Space>
-            <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
-              <span>格式: </span>
-              <span>{value.sampleMineType}</span>
-            </Space>
-
-            {type === 'checkbox' && (
-              <>
-                <ProFormGroup title="其他"></ProFormGroup>
-                <Button
-                  block
-                  style={{ marginBottom: 24 }}
-                  onClick={handleTagManager}
-                >
-                  批量重命名
-                </Button>
-                <Button
-                  block
-                  style={{ marginBottom: 24 }}
-                  onClick={handleDownloadAll}
-                >
-                  下载到本地
-                </Button>
-                <Button
-                  block
-                  color="danger"
-                  style={{ marginBottom: 24 }}
-                  onClick={handleDeleteAll}
-                >
-                  删除样本
-                </Button>
-              </>
-            )}
-          </ProForm>
-          <GroupTagModal
-            visible={modalVisible}
-            onCancel={() => setModalVisible(false)}
-            onChange={onListAddTag}
-            editable={false}
-            value={value?.tags}
-            request={{
-              groupsApi: {
-                get: getSampleTagGroup,
-                create: createSampleTagGroup,
-                delete: deleteSampleTagGroup,
-                update: updateSampleTagGroup,
-              },
-              tagsApi: {
-                get: getSampleTagPage,
-                create: createSampleTag,
-                delete: deleteSampleTag,
-                update: updateSampleTag,
-              },
-            }}
-            title="管理技术标签"
-            width={800}
-            height={500}
-          />
           <TagManager
             visible={tagManagerVisible}
             files={tagNames}
             onOk={onRename}
             onCancel={() => setTagManagerVisible(false)}
           ></TagManager>
-          {type === 'radio' && (
+          {type === 'radio' ? (
             <Space
               style={{ width: '100%', justifyContent: 'center', padding: 12 }}
+              className="tag-manager-btns"
             >
               <Button color="danger" onClick={onDownload}>
                 下载
@@ -344,10 +328,31 @@ const SampleTagDetail = <T extends Record<string, any>>(
                 删除
               </Button>
             </Space>
+          ) : (
+            <Space
+              style={{
+                width: '100%',
+                justifyContent: 'center',
+                padding: 12,
+                flexWrap: 'wrap',
+                flexDirection: 'column',
+              }}
+              className="tag-manager-btns"
+            >
+              <Button block onClick={handleTagManager}>
+                批量重命名
+              </Button>
+              <Button block onClick={handleDownloadAll}>
+                下载到本地
+              </Button>
+              <Button block color="danger" onClick={handleDeleteAll}>
+                删除样本
+              </Button>
+            </Space>
           )}
         </>
       ) : (
-        '暂无数据-请选择样本'
+        <Empty description="未选择样本" />
       )}
     </>
   );

src/pages/ai/sample-tag/index.module.less

@@ -1,28 +1,38 @@
 .tag-content {
   background: #fff;
   width: 100%;
-  overflow: auto;
+  height: calc(100vh - 90px);
+  display: flex;
+  overflow: hidden;
   :global {
     .left {
-      padding-right: 385px;
+      background: #fff;
+      overflow: auto;
+      flex: 1;
     }
-    .uploader-card {
-      padding-right: 400px;
-    }
-
     .detail {
       display: flex;
       flex-direction: column;
       border-left: 1px solid #e8e8e8;
-      border-top: 1px solid #e8e8e8;
+      width: 360px;
-      width: 400px;
-      padding: 16px;
-      top: 74px;
       height: calc(100vh - 80px);
-      overflow: auto;
+      overflow-y: auto;
       background: #fff;
-      position: fixed;
+      overflow-x: hidden;
-      right: 0;
+      position: relative;
+      .ant-pro-form-group-title {
+        margin-bottom: 20px;
+      }
+      .sample-tag-detail {
+        padding: 16px;
+      }
+      .tag-manager-btns {
+        position: sticky;
+        bottom: 10px;
+        background: #fff;
+        box-shadow: 0 0 10px #e8e8e8;
+        align-items: center;
+      }
       form {
         flex: 1;
       }

src/services/ai/sample/index.ts

@@ -87,6 +87,7 @@ export interface AiSampleRespVO {
    */
   sampleTime?: string;
   tags?: { tagName?: string; id?: number }[];
+  enumTags?: { tagName?: string; id?: number; enumValue?: string }[];
 }
 
 export interface SampleReqVo extends PageParam {