企微列表init

src/http/api.ts

@@ -21,3 +21,12 @@ export const accountGetAuthResult = `${import.meta.env.VITE_API_URL}/contentPlat
 export const accountList = `${import.meta.env.VITE_API_URL}/contentPlatform/cooperateAccount/gzh/list`
 export const accountSave = `${import.meta.env.VITE_API_URL}/contentPlatform/cooperateAccount/gzh/save`
 export const accountDelete = `${import.meta.env.VITE_API_URL}/contentPlatform/cooperateAccount/gzh/delete`
+
+
+/* 内容管理 */
+export const gzhPlanList = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/gzh/list`
+export const gzhPlanSave = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/gzh/save`
+export const qwPlanList = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/qw/list`
+export const qwPlanSave = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/qw/save`
+export const videoContentCoverFrameList = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/videoContentCoverFrameList`
+export const videoContentList = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/videoContentList`

src/views/publishContent/weCom/index.module.css

@@ -0,0 +1,5 @@
+.antTable {
+	:global(.ant-table-title) {
+		padding: 0;
+	}
+}

src/views/publishContent/weCom/index.tsx

@@ -1,68 +1,195 @@
-import React from 'react';
-import { Space, Table, Tag } from 'antd';
+import React, { useState } from 'react';
+import { Space, Table, Button, Input, Select, DatePicker, Tabs } from 'antd';
 import type { TableProps } from 'antd';
+import styles from './index.module.css';
+import PunlishPlanModal from '../weGZH/components/publishPlanModal';
+const { RangePicker } = DatePicker;
 
-interface DataType {
-  key: string;
-  name: string;
-  age: number;
-  address: string;
-  tags: string[];
+export interface PlanData {
+	// 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 [videoTitle, setVideoTitle] = useState<string>('');
+	const [selectedPublisher, setSelectedPublisher] = useState<string>();
+	const [isShowAddPunlishPlan, setIsShowAddPunlishPlan] = useState<boolean>(false);
+	const [actionType, setActionType] = useState<'add' | 'edit'>('add');
+	const [editPlanData, setEditPlanData] = useState<PlanData>();
+	const [activeKey, setActiveKey] = useState<string>('1');
 
-const data: DataType[] = [
+	// 表格列配置
+	const columns: TableProps<PlanData>['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" onClick={() => editPlan(record)}>编辑</Button>
+					<Button type="link">详情</Button>
+				</Space>
+			),
+		},
+	];
 
-];
+	const editPlan = (record: PlanData) => {
+		setEditPlanData(record);
+		setActionType('edit');
+		setIsShowAddPunlishPlan(true);
+	};
 
-const DemoTable: React.FC = () => <Table columns={columns} dataSource={data} />;
+	// 模拟数据
+	const data: PlanData[] = [
+		{
+			officialAccount: '小慧爱厨房',
+			scene: '关注回复',
+			videoCount: 3,
+			videoTitle: '养老金最新规定，快来看看...',
+			planPublishTime: '2024-08-13 13:32:07',
+			publisher: '平台发布',
+		},
+		{
+			officialAccount: '小阳看天下',
+			scene: '关注回复',
+			videoCount: 1,
+			videoTitle: '养老金最新规定，快来看看...',
+			planPublishTime: '2024-08-13 13:32:07',
+			publisher: '用户发布',
+		},
+	];
 
-export default DemoTable;
+	const addPunlishPlan = () => {
+		setActionType('add');
+		setIsShowAddPunlishPlan(true);
+	}
+
+	return (
+		<div>
+			<div className="rounded-lg">
+				<div className="text-lg font-medium mb-3">公众号内容</div>
+				
+				{/* 搜索区域 */}
+				<div className="flex flex-wrap gap-4 mb-3">
+
+					<div className="flex items-center gap-2">
+						<span className="text-gray-600">视频标题:</span>
+						<Input
+							placeholder="搜索视频标题"
+							style={{ width: 200 }}
+							value={videoTitle}
+							allowClear
+							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}
+							allowClear
+							options={[
+								{ label: '关注回复', value: 'platform' },
+								{ label: '用户发布', value: 'user' },
+							]}
+						/>
+					</div>
+
+					<Button type="primary" className="ml-2">搜索</Button>
+				</div>
+				<Tabs
+					defaultActiveKey="1"
+					type="card"
+					size="large"
+					items={[
+						{ label: '每日推送', key: '1' },
+						{ label: '自动回复', key: '2' },
+					]}
+					activeKey={activeKey}
+					onChange={setActiveKey}
+					tabBarExtraContent={
+						{ right: <Button type="primary" onClick={addPunlishPlan}>+ 创建发布</Button> }}
+				/>		
+				{/* 表格区域 */}
+				{ 
+					activeKey === '1' && (
+						<Table
+							rowKey={(record) => record.officialAccount}
+							className={styles.antTable}
+							columns={columns}
+							dataSource={data}
+							pagination={{
+								total: data.length,
+								pageSize: 10,
+								showTotal: (total) => `共 ${total} 条`,
+							}}
+						/>
+					)
+				}
+				{ 
+					activeKey === '2' && (
+						<Table
+							rowKey={(record) => record.officialAccount}
+							className={styles.antTable}
+							columns={columns}
+							dataSource={data}
+							pagination={{
+								total: data.length,
+								pageSize: 10,
+								showTotal: (total) => `共 ${total} 条`,
+							}}
+						/>
+					)
+				}
+				<PunlishPlanModal
+					visible={isShowAddPunlishPlan}
+					onCancel={() => setIsShowAddPunlishPlan(false)}
+					onOk={() => setIsShowAddPunlishPlan(false)}
+					actionType={actionType}
+					editPlanData={editPlanData}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default WeGZHContent;