Merge branch 'feature_first_pages' of https://git.yishihui.com/Web/contentCooper into feature_first_pages

src/assets/images/publishContent/wxCom.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744169939010" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2830" xmlns:xlink="http://www.w3.org/1999/xlink" width="76.75" height="64"><path d="M1045.84 747.027a153.563 153.563 0 0 0-53.156 21.515 129.094 129.094 0 0 1-58.092 35.1c2.953-19.828 12.783-37.926 27.633-51.3a191.186 191.186 0 0 0 26.452-62.142 56.953 56.953 0 1 1 57.164 56.827zM941.639 610.634a190.814 190.814 0 0 0-61.932-26.747 56.953 56.953 0 1 1 56.953-56.953 155.266 155.266 0 0 0 21.263 53.325 129.666 129.666 0 0 1 34.762 58.346 85.978 85.978 0 0 1-50.878-27.97h-0.21z m-93.826-200.728c-17.17-143.817-166.092-256.5-346.274-256.5-191.954 0-348.132 127.744-348.132 284.85a266.33 266.33 0 0 0 124.369 216.169 351.762 351.762 0 0 0 37.969 24.384l-15.44 61.636c5.568 2.616 10.968 5.4 16.663 7.805l77.963-38.981c11.39 2.953 23.372 4.851 35.268 6.876 7.594 1.35 15.188 2.742 22.993 3.67a401.119 401.119 0 0 0 145.547-8.353 281.011 281.011 0 0 0 11.474 62.185 481.153 481.153 0 0 1-108.675 12.698 472.5 472.5 0 0 1-97.621-10.758L262.46 846.21a31.219 31.219 0 0 1-33.877-3.543 31.64 31.64 0 0 1-10.926-32.316l25.312-101.925A330.075 330.075 0 0 1 90.125 438.256c0-192.29 184.19-348.131 411.413-348.131 215.746 0 392.428 140.653 409.64 319.444a276.919 276.919 0 0 0-29.91-2.953c-11.18 0.422-22.36 1.476-33.456 3.248zM716.399 634.47c18.943-3.797 36.957-11.053 53.157-21.515a129.094 129.094 0 0 1 58.134-35.016 86.358 86.358 0 0 1-27.675 51.216c-12.445 18.984-21.389 40.078-26.451 62.184a56.953 56.953 0 1 1-57.165-56.869z m102.6 137.025c18.816 12.614 39.741 21.727 61.763 27a56.953 56.953 0 1 1-56.953 56.953 154.406 154.406 0 0 0-21.094-53.409 129.558 129.558 0 0 1-34.51-58.514 85.888 85.888 0 0 1 50.794 28.308v-0.338z" p-id="2831"></path></svg>

src/index.css

@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, antd, components, utilities;
+
+@import 'tailwindcss';
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

src/views/publishContent/publishContent.router.tsx

@@ -1,7 +1,9 @@
-import { DesktopOutlined } from '@ant-design/icons'
+import Icon, { DesktopOutlined } from '@ant-design/icons'
 import { AdminRouterItem } from "../../router";
-import WeCom from "./weCom";
-import WeGZH from "./weGZH";
+import WeCom from "./weCom/index";
+import WeGZH from "./weGZH/index";
+import WeComIcon from "@src/assets/images/publishContent/wxCom.svg?react";
+import WeGZHIcon from "@src/assets/images/publishContent/wxGzh.svg?react";
 import { Outlet } from "react-router-dom";
 
 const demoRoutes: AdminRouterItem[] = [
@@ -22,7 +24,7 @@ const demoRoutes: AdminRouterItem[] = [
 					label: "公众号",
 					title: "公众号",
 					key: "/publishContent/wegzh",
-					icon: <DesktopOutlined />,
+					icon: <Icon component={WeGZHIcon} className="!text-[20px]" />,
 				}
 			},
 			{
@@ -32,7 +34,7 @@ const demoRoutes: AdminRouterItem[] = [
 					label: "企微",
 					title: "企微",
 					key: "/publishContent/wecom",
-					icon: <DesktopOutlined />,
+					icon: <Icon component={WeComIcon} className="!text-[20px]"/>,
 				}
 			},
 		]

src/views/publishContent/weGZH/index.tsx

@@ -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;