fix: 管理列表的tab样式

src/components/layout/sidebar.tsx

@@ -35,7 +35,7 @@ const PageSidebar = (props: {
   const [lastOpenedMenu, setLastOpenedMenu] = useState<string[]>([])
   const location = useLocation()
 
-  const onSwitchMenu = ({ key, keyPath }: { key: string; keyPath: string[] }) => {
+	const onSwitchMenu = ({ key, keyPath }: { key: string; keyPath: string[] }) => {
     if (autoCollapse && keyPath.slice(1)) setLastOpenedMenu(keyPath.slice(1))
     navigate(key)
   }
@@ -44,8 +44,12 @@ const PageSidebar = (props: {
     setLastOpenedMenu(openKeys)
   }
 
-  useEffect(() => {
-    setSelectedKeys([`${location.pathname}`])
+	useEffect(() => {
+		setSelectedKeys([`${location.pathname}`])
+		const lastOpenedMenu = location.pathname.split('/')?.[1]
+		if (lastOpenedMenu) {
+			setLastOpenedMenu([`/${lastOpenedMenu}`])
+		}
     navigate(location.pathname)
   }, [location.pathname])
 

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

@@ -1,5 +1,10 @@
 .antTable {
-	:global(.ant-table-title) {
-		padding: 0;
+	border: 1px solid #f0f0f0;
+	border-top: none;
+}
+
+.antTableTab {
+	:global(.ant-tabs-nav) {
+		margin-bottom: 0;
 	}
 }

src/views/publishContent/weGZH/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { Space, Table, Button, Input, Select, DatePicker } from 'antd';
+import { Space, Table, Button, Input, Select, DatePicker, Tabs } from 'antd';
 import type { TableProps } from 'antd';
+import dayjs, { Dayjs } from 'dayjs';
 import styles from './index.module.css';
 import PunlishPlanModal from './components/publishPlanModal';
 const { RangePicker } = DatePicker;
@@ -20,10 +21,11 @@ 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 [dateRange, setDateRange] = useState<[Dayjs | null, Dayjs | null]>();
 	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 columns: TableProps<PlanData>['columns'] = [
@@ -31,16 +33,19 @@ const WeGZHContent: React.FC = () => {
 			title: '公众号名称',
 			dataIndex: 'officialAccount',
 			key: 'officialAccount',
+			width: 200,
 		},
 		{
 			title: '场景',
 			dataIndex: 'scene',
 			key: 'scene',
+			width: 120,
 		},
 		{
 			title: '视频数量',
 			dataIndex: 'videoCount',
 			key: 'videoCount',
+			width: 120,
 		},
 		{
 			title: '视频标题',
@@ -52,15 +57,18 @@ const WeGZHContent: React.FC = () => {
 			title: '计划创建时间',
 			dataIndex: 'planPublishTime',
 			key: 'planPublishTime',
+			width: 200,
 		},
 		{
 			title: '发布方',
 			dataIndex: 'publisher',
 			key: 'publisher',
+			width: 120,
 		},
 		{
 			title: '操作',
 			key: 'action',
+			width: 200,
 			render: (_, record) => (
 				<Space size="middle">
 					<Button type="link" onClick={() => editPlan(record)}>编辑</Button>
@@ -82,7 +90,7 @@ const WeGZHContent: React.FC = () => {
 			officialAccount: '小慧爱厨房',
 			scene: '关注回复',
 			videoCount: 3,
-			videoTitle: '养老金最新规定，快来看看...',
+			videoTitle: '养老金最新规定，快来看看养老金最新规定，快来看看...',
 			planPublishTime: '2024-08-13 13:32:07',
 			publisher: '平台发布',
 		},
@@ -154,28 +162,30 @@ const WeGZHContent: React.FC = () => {
 							placeholder={['开始时间', '结束时间']}
 							style={{ width: 400 }}
 							allowClear
-							onChange={(dates, dateStrings) => {
-								if (dates) {
-									setDateRange([dateStrings[0], dateStrings[1]]);
-								} else {
-									setDateRange(undefined);
-								}
+							value={dateRange}
+							onChange={(dates) => {
+								setDateRange(dates || undefined);
 							}}
 						/>
 					</div>
 
 					<Button type="primary" className="ml-2">搜索</Button>
 				</div>
+				<Tabs
+					defaultActiveKey="1"
+					type="card"
+					size="large"
+					className={styles.antTableTab}
+					items={[
+						{ label: '自动回复', key: '1' },
+					]}
+					activeKey={activeKey}
+					onChange={setActiveKey}
+					tabBarExtraContent={
+						{ right: <Button type="primary" onClick={addPunlishPlan}>+ 创建发布</Button> }}
+				/>
 				{/* 表格区域 */}
 				<Table
-					title={() =>
-						<div className="flex justify-between">
-							<div className="text-[#333] font-medium px-[45px] py-[10px] rounded-tr-[20px] bg-[#ffc107] dark:bg-[#333] text-[16px] border-none hover:bg-[#ffca2c]">
-								自动回复
-							</div>
-							<Button type="primary" onClick={addPunlishPlan}>+ 创建发布</Button>
-						</div>
-					}
 					rowKey={(record) => record.officialAccount}
 					className={styles.antTable}
 					columns={columns}