|
|
@@ -1,165 +1,175 @@
|
|
|
-import React from 'react';
|
|
|
-import { Space, Table, Tag } from 'antd';
|
|
|
+import React, { useState } from 'react';
|
|
|
+import { Space, Table, Button, Input, Select, DatePicker } from 'antd';
|
|
|
import type { TableProps } from 'antd';
|
|
|
|
|
|
+const { RangePicker } = DatePicker;
|
|
|
+
|
|
|
interface DataType {
|
|
|
- key: string;
|
|
|
- name: string;
|
|
|
- age: number;
|
|
|
- address: string;
|
|
|
- tags: string[];
|
|
|
+ key: string;
|
|
|
+ officialAccount: string;
|
|
|
+ scene: string;
|
|
|
+ videoCount: number;
|
|
|
+ videoTitle: string;
|
|
|
+ planPublishTime: string;
|
|
|
+ publisher: string;
|
|
|
}
|
|
|
|
|
|
-const columns: TableProps<DataType>['columns'] = [
|
|
|
- {
|
|
|
- title: 'Name',
|
|
|
- dataIndex: 'name',
|
|
|
- key: 'name',
|
|
|
- render: (text) => <a>{text}</a>,
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'Age',
|
|
|
- dataIndex: 'age',
|
|
|
- key: 'age',
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'Address',
|
|
|
- dataIndex: 'address',
|
|
|
- key: 'address',
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'Tags',
|
|
|
- key: 'tags',
|
|
|
- dataIndex: 'tags',
|
|
|
- render: (_, { tags }) => (
|
|
|
- <>
|
|
|
- {tags.map((tag) => {
|
|
|
- let color = tag.length > 5 ? 'geekblue' : 'green';
|
|
|
- if (tag === 'loser') {
|
|
|
- color = 'volcano';
|
|
|
- }
|
|
|
- return (
|
|
|
- <Tag color={color} key={tag}>
|
|
|
- {tag.toUpperCase()}
|
|
|
- </Tag>
|
|
|
- );
|
|
|
- })}
|
|
|
- </>
|
|
|
- ),
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'Action',
|
|
|
- key: 'action',
|
|
|
- render: (_, record) => (
|
|
|
- <Space size="middle">
|
|
|
- <a>Invite {record.name}</a>
|
|
|
- <a>Delete</a>
|
|
|
- </Space>
|
|
|
- ),
|
|
|
- },
|
|
|
-];
|
|
|
+const WeGZHContent: React.FC = () => {
|
|
|
+ // 状态管理
|
|
|
+ const [selectedAccount, setSelectedAccount] = useState<string>();
|
|
|
+ const [videoTitle, setVideoTitle] = useState<string>('');
|
|
|
+ const [selectedPublisher, setSelectedPublisher] = useState<string>();
|
|
|
+ const [dateRange, setDateRange] = useState<[string, string]>();
|
|
|
+
|
|
|
+ // 表格列配置
|
|
|
+ const columns: TableProps<DataType>['columns'] = [
|
|
|
+ {
|
|
|
+ title: '公众号名称',
|
|
|
+ dataIndex: 'officialAccount',
|
|
|
+ key: 'officialAccount',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '场景',
|
|
|
+ dataIndex: 'scene',
|
|
|
+ key: 'scene',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频数量',
|
|
|
+ dataIndex: 'videoCount',
|
|
|
+ key: 'videoCount',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频标题',
|
|
|
+ dataIndex: 'videoTitle',
|
|
|
+ key: 'videoTitle',
|
|
|
+ ellipsis: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '计划创建时间',
|
|
|
+ dataIndex: 'planPublishTime',
|
|
|
+ key: 'planPublishTime',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '发布方',
|
|
|
+ dataIndex: 'publisher',
|
|
|
+ key: 'publisher',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'action',
|
|
|
+ render: (_, record) => (
|
|
|
+ <Space size="middle">
|
|
|
+ <Button type="link">编辑</Button>
|
|
|
+ <Button type="link">详情</Button>
|
|
|
+ </Space>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 模拟数据
|
|
|
+ const data: DataType[] = [
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ officialAccount: '小慧爱厨房',
|
|
|
+ scene: '关注回复',
|
|
|
+ videoCount: 3,
|
|
|
+ videoTitle: '养老金最新规定，快来看看...',
|
|
|
+ planPublishTime: '2024-08-13 13:32:07',
|
|
|
+ publisher: '平台发布',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '2',
|
|
|
+ officialAccount: '小阳看天下',
|
|
|
+ scene: '关注回复',
|
|
|
+ videoCount: 1,
|
|
|
+ videoTitle: '养老金最新规定，快来看看...',
|
|
|
+ planPublishTime: '2024-08-13 13:32:07',
|
|
|
+ publisher: '用户发布',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <div className="bg-white p-6 rounded-lg">
|
|
|
+ <div className="text-lg font-medium mb-6">公众号内容</div>
|
|
|
+
|
|
|
+ {/* 搜索区域 */}
|
|
|
+ <div className="flex flex-wrap gap-4 mb-6">
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <span className="text-gray-600">公众号名称:</span>
|
|
|
+ <Select
|
|
|
+ placeholder="选择公众号"
|
|
|
+ style={{ width: 200 }}
|
|
|
+ value={selectedAccount}
|
|
|
+ onChange={setSelectedAccount}
|
|
|
+ options={[
|
|
|
+ { label: '小慧爱厨房', value: '小慧爱厨房' },
|
|
|
+ { label: '小阳看天下', value: '小阳看天下' },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <span className="text-gray-600">视频标题:</span>
|
|
|
+ <Input
|
|
|
+ placeholder="搜索视频标题"
|
|
|
+ style={{ width: 200 }}
|
|
|
+ value={videoTitle}
|
|
|
+ onChange={e => setVideoTitle(e.target.value)}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <span className="text-gray-600">发布方:</span>
|
|
|
+ <Select
|
|
|
+ placeholder="选择发布方"
|
|
|
+ style={{ width: 200 }}
|
|
|
+ value={selectedPublisher}
|
|
|
+ onChange={setSelectedPublisher}
|
|
|
+ options={[
|
|
|
+ { label: '平台发布', value: 'platform' },
|
|
|
+ { label: '用户发布', value: 'user' },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
|
|
|
-const data: DataType[] = [
|
|
|
- {
|
|
|
- key: '1',
|
|
|
- name: 'John Brown',
|
|
|
- age: 32,
|
|
|
- address: 'New York No. 1 Lake Park',
|
|
|
- tags: ['nice', 'developer'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '2',
|
|
|
- name: 'Jim Green',
|
|
|
- age: 42,
|
|
|
- address: 'London No. 1 Lake Park',
|
|
|
- tags: ['loser'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '3',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '4',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '5',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '6',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '7',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '8',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '9',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '10',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '11',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '12',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '13',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
- {
|
|
|
- key: '14',
|
|
|
- name: 'Joe Black',
|
|
|
- age: 32,
|
|
|
- address: 'Sydney No. 1 Lake Park',
|
|
|
- tags: ['cool', 'teacher'],
|
|
|
- },
|
|
|
-];
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <RangePicker
|
|
|
+ placeholder={['开始时间', '结束时间']}
|
|
|
+ style={{ width: 400 }}
|
|
|
+ onChange={(dates, dateStrings) => {
|
|
|
+ if (dates) {
|
|
|
+ setDateRange([dateStrings[0], dateStrings[1]]);
|
|
|
+ } else {
|
|
|
+ setDateRange(undefined);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
|
|
|
-const DemoTable: React.FC = () => <Table columns={columns} dataSource={data} />;
|
|
|
+ <Button type="primary" className="ml-2">搜索</Button>
|
|
|
+ </div>
|
|
|
+ {/* 表格区域 */}
|
|
|
+ <Table
|
|
|
+ title={() =>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <div className="bg-[#ffc107] text-white border-none hover:bg-[#ffca2c]">
|
|
|
+ 自动回复
|
|
|
+ </div>
|
|
|
+ <Button type="primary">+ 创建发布</Button>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ columns={columns}
|
|
|
+ dataSource={data}
|
|
|
+ pagination={{
|
|
|
+ total: data.length,
|
|
|
+ pageSize: 10,
|
|
|
+ showTotal: (total) => `共 ${total} 条`,
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
-export default DemoTable;
|
|
|
+export default WeGZHContent;
|
