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;

src/pages/prod/list/components/service-rule/index.tsx

@@ -0,0 +1,69 @@
+import { ProForm, ProFormText } from '@ant-design/pro-components';
+
+const ServiceRule: React.FC = () => {
+  return (
+    <ProForm<{
+      name: string;
+      company: string;
+    }>
+      grid
+      onFinish={async (values) => {
+        // await waitTime(2000);
+        console.log(values);
+        // message.success('提交成功');
+      }}
+      initialValues={{
+        name: '蚂蚁设计有限公司',
+        useMode: 'chapter',
+      }}
+    >
+      <ProForm.Group>
+        <ProFormText
+          width="md"
+          name="name"
+          label="签约客户名称"
+          tooltip="最长为 24 位"
+          placeholder="请输入名称"
+        />
+        <ProFormText
+          width="md"
+          name="company"
+          label="我方公司名称"
+          placeholder="请输入名称"
+        />
+      </ProForm.Group>
+      <ProFormText width="sm" name="id" label="主合同编号" />
+      <ProForm.Item
+        label="数组数据"
+        name="dataSource"
+        // initialValue={defaultData}
+        trigger="onValuesChange"
+      >
+        {/* <EditableProTable<DataSourceType>
+          rowKey="id"
+          toolBarRender={false}
+          columns={columns}
+          recordCreatorProps={{
+            newRecordType: 'dataSource',
+            position: 'top',
+            record: () => ({
+              id: Date.now(),
+              addonBefore: 'ccccccc',
+              decs: 'testdesc',
+            }),
+          }}
+          editable={{
+            type: 'multiple',
+            editableKeys,
+            onChange: setEditableRowKeys,
+            actionRender: (row, _, dom) => {
+              return [dom.delete];
+            },
+          }} */}
+        {/* /> */}
+      </ProForm.Item>
+    </ProForm>
+  );
+};
+
+export default ServiceRule;

src/pages/prod/list/components/sku/index.tsx

@@ -0,0 +1,31 @@
+import { ProForm } from '@ant-design/pro-components';
+import React from 'react';
+import SkuConfig from './sku-confiig';
+import SkuList from './sku-list';
+
+const Sku: React.FC = () => {
+  return (
+    <>
+      <ProForm.Item
+        style={{ width: '100%' }}
+        name="prodPropSaveReqVO"
+        layout="horizontal"
+        width="xl"
+        // getValueFromEvent={(e) => e.fileList}
+      >
+        <SkuConfig />
+      </ProForm.Item>
+      <ProForm.Item
+        style={{ width: '100%' }}
+        name="skuList"
+        layout="horizontal"
+        width="xl"
+        // getValueFromEvent={(e) => e.fileList}
+      >
+        <SkuList />
+      </ProForm.Item>
+    </>
+  );
+};
+
+export default React.memo(Sku);

src/pages/prod/list/components/sku/sku-confiig.tsx

@@ -0,0 +1,23 @@
+import { Typography } from 'antd';
+import React from 'react';
+import DraggableTagList from '@/components/Draggable/DraggableTagList';
+
+const { Title, Text } = Typography;
+const SkuConfig: React.FC<{
+  value?: API.ProdPropSaveReqVO;
+  onChange?: (value: API.ProdPropSaveReqVO) => void;
+}> = () => {
+  // const { value, onChange } = props;
+  return (
+    <>
+      <Title level={4}>规格设置</Title>
+      <Text type="secondary">
+        你想区分商品的哪些属性？第一次使用？<a>点此查看详情</a>
+        学习。商品创建成功后，规格属性不可增减，如需变更规格逻辑定义，请创建新的商品。
+      </Text>
+      <DraggableTagList />
+    </>
+  );
+};
+
+export default React.memo(SkuConfig);

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

@@ -0,0 +1,22 @@
+import { Typography } from 'antd';
+import React from 'react';
+import type { SkuConfig } from '@/services/prod/prod-manager';
+
+const { Title, Text } = Typography;
+const SkuList: React.FC<{
+  value?: SkuConfig;
+  onChange?: (value: SkuConfig) => void;
+}> = (props) => {
+  const { value } = props;
+  console.log('value', value);
+  return (
+    <>
+      <Title level={4}>SKU 列表</Title>
+      <Text type="secondary">
+        请填写SKU价格与可售数量，高级设置可自定义更多内容。
+      </Text>
+    </>
+  );
+};
+
+export default React.memo(SkuList);