feat: 内容管理

src/pages/prod/list/components/prod-info.tsx

@@ -0,0 +1,151 @@
+import {
+  ProForm,
+  ProFormGroup,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+} from '@ant-design/pro-components';
+import { Divider } from 'antd';
+import React from 'react';
+import TagEditor from '@/components/TagEditor';
+import TinymceEditor from '@/components/Tinymce';
+import UploadImages from '@/components/Upload/UploadImages';
+import UploadVideo from '@/components/Upload/UploadVideo';
+import type { Prod } from '@/services/prod/prod-manager';
+
+interface ProdInfoProps<T> {
+  onRefresh?: (type?: string) => void;
+  data?: T;
+}
+
+const ProdInfo = <T extends Record<string, any>>(props: ProdInfoProps<T>) => {
+  console.log(props, 'ProdInfo');
+  return (
+    <>
+      <ProFormGroup title="一、基础信息">
+        <ProFormText
+          name="prodName"
+          label="商品名字"
+          rules={[{ required: true }]}
+          width="xl"
+        />
+        <ProFormText name="abbreviation" label="商品简称" width="xl" />
+        <ProFormText name="brief" label="商品概述" width="xl" />
+        <ProFormText name="prodNumber" label="商品编码" width="xl" />
+        <ProFormText name="brand" label="品牌" width="xl" />
+        <ProFormText name="shopId" label="商品所有权" width="xl" />
+        <ProFormText name="categoryName" label="关联类目" width="xl" />
+        <ProForm.Item
+          name="tag"
+          label="商品标签"
+          tooltip="设置卖点标签，单标签限xx字符，最多x个标签"
+          layout="horizontal"
+          width="xl"
+          required={false}
+          // getValueFromEvent={(e) => e.fileList}
+        >
+          <TagEditor
+            placeholder="输入标签名称"
+            maxCount={10}
+            tagProps={{
+              color: 'blue',
+            }}
+          />
+        </ProForm.Item>
+      </ProFormGroup>
+      <ProFormGroup title="二、内容展示">
+        <ProForm.Item
+          style={{ width: '100%' }}
+          name="pic"
+          label="主图"
+          width="xl"
+          extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
+          // rules={[{ required: true }]}
+          // getValueFromEvent={(e) => e.fileList}
+        >
+          <UploadImages />
+        </ProForm.Item>
+        <ProForm.Item
+          style={{ width: '100%' }}
+          name="imgs"
+          label="轮播图"
+          layout="horizontal"
+          width="xl"
+          extra="仅支持.jpg .png 格式，建议图片比例1:1，限7张"
+          // getValueFromEvent={(e) => e.fileList}
+        >
+          <UploadImages />
+        </ProForm.Item>
+        <ProForm.Item
+          style={{ width: '100%' }}
+          name="whiteImg"
+          label="白底图"
+          width="xl"
+          extra="仅支持.jpg .png 格式，建议图片比例1:1，限1张"
+          // getValueFromEvent={(e) => e.fileList}
+        >
+          <UploadImages />
+        </ProForm.Item>
+        <ProForm.Item
+          name="video"
+          label="主视频"
+          width="xl"
+          extra="仅支持.MP4 .MOV 格式，建议比例1:1、16:9，限1个"
+          // getValueFromEvent={(e) => e.fileList}
+        >
+          <UploadVideo />
+        </ProForm.Item>
+        <ProForm.Item
+          name="content"
+          label="图文介绍"
+          rules={[{ required: true }]}
+          width="xl"
+          // getValueFromEvent={(e) => e.fileList}
+        >
+          <TinymceEditor />
+        </ProForm.Item>
+      </ProFormGroup>
+      <ProFormGroup title="三、营销与传播">
+        <ProFormText
+          name="seoShortName"
+          label="短标题"
+          colProps={{
+            span: 20,
+          }}
+        />
+        <ProFormText name="seoSearch" label="SEO标题" width={'xl'} />
+        <ProFormTextArea name="keyword" label="商品关键词" width={'xl'} />
+        <Divider />
+
+        <ProForm.Item
+          style={{ width: '100%' }}
+          name="shareImage"
+          label="分享图"
+          width="xl"
+          extra="仅支持.jpg .png 格式，限1张"
+        >
+          <UploadImages />
+        </ProForm.Item>
+        <ProFormTextArea
+          name="shareContent"
+          label="分享话术"
+          placeholder={'请输入分享话术'}
+          width={'xl'}
+        />
+      </ProFormGroup>
+      <ProFormGroup>
+        <ProFormSelect name="status" label="商品状态" readonly />
+        <ProFormText name="prodId" label="商品ID" readonly />
+        <ProFormText name="createTime" label="创建时间" readonly />
+        <ProFormText name="creator" label="创建人" readonly />
+        <ProFormText name="updateTime" label="更新时间" readonly />
+        <ProFormText name="updater" label="更新人" readonly />
+        <ProFormText name="version" label="版本号" readonly />
+      </ProFormGroup>
+    </>
+  );
+};
+
+export default React.memo(ProdInfo) as <_T extends Record<string, any>>(
+  props: ProdInfoProps<Prod>,
+) => React.ReactElement;