plandetail page

src/views/publishContent/weGZH/components/PunlishPlanDetailModal/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Modal, Descriptions } from 'antd';
+import { GzhPlanType } from '../../hooks/useGzhPlanList';
+import dayjs from 'dayjs';
+interface PunlishPlanDetailModalProps {
+  visible: boolean;
+  onCancel: () => void;
+  planData: GzhPlanType;
+}
+
+const PunlishPlanDetailModal: React.FC<PunlishPlanDetailModalProps> = ({
+  visible,
+  onCancel,
+  planData,
+}) => {
+
+  return (
+    planData && visible && <Modal
+      title="发布计划详情"
+			open={true}
+			destroyOnClose
+      onCancel={onCancel}
+      footer={null}
+      width={800}
+    >
+      <Descriptions column={1} bordered>
+				<Descriptions.Item label="场景">{planData?.scene === 0 ? '关注回复' : '自动回复'}</Descriptions.Item>
+        <Descriptions.Item label="公众号名称">{planData.accountName}</Descriptions.Item>
+        <Descriptions.Item label="视频列表">
+          {planData.videoList?.map((video, index) => (
+            <div key={video.videoId} style={{ marginBottom: '16px' }}>
+              <p>视频 {index + 1}: {video.customTitle || video.title}</p>
+              <img 
+                src={video.customCover || video.cover} 
+                alt={`视频${index + 1}封面`} 
+                style={{ maxWidth: '150px' }} 
+              />
+            </div>
+          ))}
+        </Descriptions.Item>
+        <Descriptions.Item label="发布时间">{dayjs(planData.createTimestamp).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
+        <Descriptions.Item label="发布方">{planData.publishStage === 0 ? '平台发布' : '用户发布'}</Descriptions.Item>
+			</Descriptions>
+    </Modal>
+  );
+};
+
+export default PunlishPlanDetailModal; 

src/views/publishContent/weGZH/components/publishPlanModal/index.tsx

@@ -165,11 +165,11 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
 						layout="horizontal"
 						labelCol={{ span: 4 }}
 						labelAlign='left'
+						initialValue={0}
 					>
 						<Select
 							placeholder="发布场景"
 							className='!w-50'
-							defaultValue={0}
 							options={[{ label: '关注回复', value: 0 }]}>
 						</Select>
 					</Form.Item>

src/views/publishContent/weGZH/index.tsx

@@ -9,6 +9,7 @@ import { useAccountOptions } from '@src/views/publishContent/weGZH/hooks/useAcco
 import { useGzhPlanList, GzhPlanType } from '@src/views/publishContent/weGZH/hooks/useGzhPlanList';
 import http from '@src/http';
 import { saveGzhPlanApi } from '@src/http/api';
+import PunlishPlanDetailModal from './components/PunlishPlanDetailModal';
 const WeGZHContent: React.FC = () => {
 	// 状态管理
 	const [selectedAccount, setSelectedAccount] = useState<string>();
@@ -24,6 +25,8 @@ const WeGZHContent: React.FC = () => {
 	const { accountOptions } = useAccountOptions();
 	const { gzhPlanList, getGzhPlanList, totalSize } = useGzhPlanList();
 
+	const [isShowAddPunlishDetailPlan, setIsShowAddPunlishDetailPlan] = useState<boolean>(false);
+
 	// 表格列配置
 	const columns: TableProps<GzhPlanType>['columns'] = [
 		{
@@ -78,7 +81,7 @@ const WeGZHContent: React.FC = () => {
 			render: (_, record) => (
 				<Space size="middle">
 					<Button type="link" onClick={() => editPlan(record)}>编辑</Button>
-					<Button type="link">详情</Button>
+					<Button type="link" onClick={() => editPlanDetail(record)}>详情</Button>
 				</Space>
 			),
 		},
@@ -90,6 +93,12 @@ const WeGZHContent: React.FC = () => {
 		setIsShowAddPunlishPlan(true);
 	};
 
+	const editPlanDetail = (record: GzhPlanType) => {
+		setEditPlanData(record);
+		setActionType('edit');
+		setIsShowAddPunlishDetailPlan(true);
+	}
+
 	const addPunlishPlan = () => {
 		setActionType('add');
 		setEditPlanData(undefined);
@@ -222,12 +231,23 @@ const WeGZHContent: React.FC = () => {
 				/>
 				<PunlishPlanModal
 					visible={isShowAddPunlishPlan}
-					onCancel={() => setIsShowAddPunlishPlan(false)}
+					onCancel={() => { 
+						setEditPlanData(undefined);
+						setIsShowAddPunlishPlan(false);
+					} }
 					onOk={handleAddPunlishPlan}
 					actionType={actionType}
 					editPlanData={editPlanData}
 					isSubmiting={isSubmiting}
 				/>
+				<PunlishPlanDetailModal
+					visible={isShowAddPunlishDetailPlan}
+					onCancel={() => { 
+						setEditPlanData(undefined);
+						setIsShowAddPunlishDetailPlan(false);
+					}}
+					planData={editPlanData as GzhPlanType}
+				/>
 			</div>
 		</div>
 	);