news detail 修改完成

src/assets/index.scss

@@ -66,6 +66,16 @@ body {
 .article-action-icon {
   @apply cursor-pointer text-gray-500 hover:text-blue-500 block;
 }
+.news-detail-modal{
+  .ant-modal-content{
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+.news-detail-content-container{
+  margin-right: -30px;
+  padding-right: 30px;
+}
 
 img {
   max-width: 100%;

src/pages/news/index.tsx

@@ -1,6 +1,7 @@
 import React, {useRef, useState} from "react";
-import {Checkbox, Divider, Empty, Modal, Pagination, Space} from "antd";
+import {Checkbox, Divider, Empty, Modal, Space} from "antd";
 import {useRequest} from "ahooks";
+import {CloseOutlined} from "@ant-design/icons"
 
 import SearchPanel from "@/pages/news/components/search-panel.tsx";
 import {getById, getList} from "@/service/api/news.ts";
@@ -46,7 +47,7 @@ export default function NewsIndex() {
 		const {update, close} = showLoading('获取新闻详情...')
 		getById(id).then(res => {
 			close()
-			setActiveNews(res)
+			setActiveNews({...res, id})
 		}).catch(() => {
 			update('获取新闻详情失败', 'info')
 		})
@@ -61,22 +62,45 @@ export default function NewsIndex() {
 		}
 	}
 	const scrollerRef = useRef<InfiniteScrollerRef | null>(null)
-
+	const handleCheckChange = (id: number) => {
+		if (checkedId.includes(id)) {
+			setCheckedId(checkedId.filter(id => id != id))
+		} else {
+			setCheckedId([...checkedId, id])
+		}
+	}
 
 	return (<div className={'container pb-5'}>
 		<SearchPanel onSearch={setParams}/>
-		{activeNews && <Modal open={true} centered width={1000} footer={null} onCancel={() => setActiveNews(undefined)}>
-            <div className="news-detail px-3 pb-5">
+		{activeNews && <Modal
+            rootClassName={'news-detail-modal'}
+            closeIcon={null} open={true}  width={1000}
+            maskClosable={false}
+            footer={null} onCancel={() => setActiveNews(undefined)}
+        >
+            <div className="news-detail pl-16 pr-1 flex pb-5">
                 <div className="px-4 py-6 bg-white">
                     <div className="new-title text-2xl">{activeNews?.title}</div>
-                    <Divider className={'my-4'}/>
-                    <div className="info mt-2 mb-5 text-sm flex gap-3">
+                    <div className="info mt-2 mb-2 text-sm flex gap-3">
                         <span className="source text-blue-400">{activeNews?.media_name}</span>
                         <span className="create-time text-gray-400">{formatTime(activeNews?.publish_time)}</span>
                     </div>
-                    <div className="overflow-auto leading-7 text-base"
+                    <Divider className={'my-2'}/>
+                    <div className="overflow-auto leading-7 text-base news-detail-content-container"
                          style={{maxHeight: 500}} dangerouslySetInnerHTML={{__html: activeNews?.content || ''}}></div>
                 </div>
+                <div className="actions ml-2">
+                    <div className="close">
+                        <CloseOutlined className="text-xl text-gray-400 hover:text-gray-800"
+                                       onClick={() => setActiveNews(undefined)}/>
+                    </div>
+                    <div className="whitespace-nowrap text-sm mt-2">
+                        <Checkbox
+                            checked={checkedId.includes(activeNews!.id)}
+                            onChange={() => handleCheckChange(activeNews!.id)}
+                        ><span>选择</span></Checkbox>
+                    </div>
+                </div>
             </div>
         </Modal>}
 		<div className="news-list-container">
@@ -138,11 +162,7 @@ export default function NewsIndex() {
 										{item.internal_article_id > 0 ?
 											<span className={"inline-block w-[16px] "}></span> :
 											<Checkbox checked={checkedId.includes(item.id)} onChange={() => {
-												if (checkedId.includes(item.id)) {
-													setCheckedId(checkedId.filter(id => id != item.id))
-												} else {
-													setCheckedId([...checkedId, item.id])
-												}
+												handleCheckChange(item.id)
 											}}/>}
 									</div>
 								</div>

src/types/core.d.ts

@@ -35,6 +35,7 @@ declare interface ArticleDetail {
 }
 
 declare interface NewsInfo {
+	id: number;
 	title: string;
 	content: string;
 	media_name: string;

vite.config.ts

@@ -6,7 +6,7 @@ import dayjs from "dayjs";
 
 // https://vitejs.dev/config/
 export default defineConfig(({mode}) => {
-	const devServerHost = mode == 'test' ? '124.220.14.192' : '192.168.0.231:9999'
+	const devServerHost = mode == 'test' ? 'https://fm-admin.starbitech.com' : 'http://192.168.0.231:9999'
 	const AUTH_TOKEN_KEY = mode == 'production' ? 'digital-person-token' : `digital-person-token_${mode}`
 
 	if (mode !== 'production') {
@@ -41,7 +41,7 @@ export default defineConfig(({mode}) => {
 			port: 10021,
 			proxy: {
 				'/mgmt': {
-					target: `http://${devServerHost}`, // http://124.220.14.192/ 192.168.0.231:9999
+					target: `${devServerHost}`, // http://124.220.14.192/ 192.168.0.231:9999
 					changeOrigin: true,
 					// rewrite: (path) => path.replace(/^\/api/, '')
 				},