From 9362625b4e82fec0bfc7381a878b1907118e48aa Mon Sep 17 00:00:00 2001 From: zhxiao1124 Date: Wed, 1 Jul 2026 23:28:54 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E7=BB=9F=E4=B8=80=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E9=A3=8E=E6=A0=BC=E4=B8=8E=E4=B8=AD=E6=96=87?= =?UTF-8?q?=E6=96=87=E6=9C=AC=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 本次提交完成以下调整： 1. 在main.tsx中添加Arco Design适配React19的适配器导入，修复命令式组件兼容问题 2. 全项目替换单引号为双引号，统一代码格式化风格 3. 重构所有JSX组件的多行写法，拆分复杂属性提升可读性 4. 修正部分组件的代码缩进与换行规范 --- src/Drama/index.tsx | 413 +++++++++++++++++++++++++++++++------------- src/main.tsx | 3 + 2 files changed, 296 insertions(+), 120 deletions(-) diff --git a/src/Drama/index.tsx b/src/Drama/index.tsx index 8ef16b2..a022c47 100644 --- a/src/Drama/index.tsx +++ b/src/Drama/index.tsx @@ -1,5 +1,5 @@ -import { useEffect, useState } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useEffect, useState } from "react"; +import { useNavigate, useParams } from "react-router-dom"; import { Button, Card, @@ -16,36 +16,38 @@ import { Switch, Table, Tag, -} from '@arco-design/web-react'; -import { IconArrowLeft, IconPlus, IconRefresh } from '@arco-design/web-react/icon'; -import type { ApiResponse, Drama, Episode, UploadTask } from '../api/types'; -import { api } from '../api/client'; -import { usePageData } from '../hooks/usePageData'; +} from "@arco-design/web-react"; +import { + IconArrowLeft, + IconPlus, + IconRefresh, +} from "@arco-design/web-react/icon"; +import type { ApiResponse, Drama, Episode, UploadTask } from "../api/types"; +import { api } from "../api/client"; +import { usePageData } from "../hooks/usePageData"; const { Row, Col } = Grid; -const TYPE_OPTIONS = ['revenge', 'romance', 'action']; - const STATUS_OPTIONS: { value: string; label: string }[] = [ - { value: 'draft', label: '草稿' }, - { value: 'scheduled', label: '定时发布' }, - { value: 'published', label: '已发布' }, - { value: 'offline', label: '已下线' }, + { value: "draft", label: "草稿" }, + { value: "scheduled", label: "定时发布" }, + { value: "published", label: "已发布" }, + { value: "offline", label: "已下线" }, ]; const REVIEW_STATUS_LABEL: Record = { - not_submitted: '未提交', - pending: '待审核', - reviewing: '审核中', - approved: '已通过', - rejected: '已拒绝', + not_submitted: "未提交", + pending: "待审核", + reviewing: "审核中", + approved: "已通过", + rejected: "已拒绝", }; const PUBLISH_STATUS_LABEL: Record = { - draft: '草稿', - scheduled: '定时发布', - published: '已发布', - offline: '已下线', + draft: "草稿", + scheduled: "定时发布", + published: "已发布", + offline: "已下线", }; function DramasPage() { @@ -60,15 +62,15 @@ function DramasPage() { function DramaListPage() { const navigate = useNavigate(); - const { data, loading, reload } = usePageData('/api/admin/v1/dramas'); + const { data, loading, reload } = usePageData("/api/admin/v1/dramas"); const [visible, setVisible] = useState(false); const [creating, setCreating] = useState(false); const createDrama = async (values: Partial) => { setCreating(true); try { - await api.post('/api/admin/v1/dramas', values); - Message.success('短剧创建成功'); + await api.post("/api/admin/v1/dramas", values); + Message.success("短剧创建成功"); setVisible(false); await reload(); } finally { @@ -77,23 +79,80 @@ function DramaListPage() { }; return ( - } onClick={() => setVisible(true)}>新增短剧}> - {PUBLISH_STATUS_LABEL[String(status)] || String(status)} }, - { title: '推荐', dataIndex: 'isRecommended', width: 100, render: (value) => value ? 是 : 否 }, - { title: '操作', width: 120, render: (_, record) => }, - ]} /> - setVisible(false)} footer={null} style={{ width: 640 }}> + } + onClick={() => setVisible(true)} + > + 新增短剧 + + } + > +
( + + {PUBLISH_STATUS_LABEL[String(status)] || String(status)} + + ), + }, + { + title: "推荐", + dataIndex: "isRecommended", + width: 100, + render: (value) => + value ? 是 : 否, + }, + { + title: "操作", + width: 120, + render: (_, record) => ( + + ), + }, + ]} + /> + setVisible(false)} + footer={null} + style={{ width: 640 }} + >
@@ -101,24 +160,33 @@ function DramaListPage() { - + - + - + @@ -136,25 +204,38 @@ function DramaListPage() { - + - + - +
- +
@@ -168,14 +249,18 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) { const [episodes, setEpisodes] = useState([]); const [loading, setLoading] = useState(false); const [episodeCount, setEpisodeCount] = useState(1); - const [uploadingEpisodeId, setUploadingEpisodeId] = useState(null); + const [uploadingEpisodeId, setUploadingEpisodeId] = useState( + null, + ); const loadDetail = async () => { setLoading(true); try { const [dramaResponse, episodeResponse] = await Promise.all([ api.get>(`/api/admin/v1/dramas/${dramaId}`), - api.get>(`/api/admin/v1/dramas/${dramaId}/episodes?pageSize=200`), + api.get>( + `/api/admin/v1/dramas/${dramaId}/episodes?pageSize=200`, + ), ]); setDrama(dramaResponse.data.data); setEpisodeCount(dramaResponse.data.data.totalEpisodes || 1); @@ -190,29 +275,37 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) { }, [dramaId]); const configureEpisodes = async () => { - await api.post(`/api/admin/v1/dramas/${dramaId}/episodes/batch`, { episodeCount }); - Message.success('剧集数量已更新'); + await api.post(`/api/admin/v1/dramas/${dramaId}/episodes/batch`, { + episodeCount, + }); + Message.success("剧集数量已更新"); await loadDetail(); }; const updateDramaStatus = async (status: string) => { await api.patch(`/api/admin/v1/dramas/${dramaId}`, { status }); - Message.success('短剧状态已更新'); + Message.success("短剧状态已更新"); await loadDetail(); }; const uploadEpisodeVideo = async (episode: Episode, file: File) => { setUploadingEpisodeId(episode.id); try { - const task = await api.post>('/api/admin/v1/media/upload-tasks', { - episodeId: episode.id, - fileName: file.name, - contentType: file.type || 'video/mp4', - fileSize: file.size, - }); - await api.patch(`/api/admin/v1/media/upload-tasks/${task.data.data.jobId}/complete`, {}); - await api.post('/api/admin/v1/media/review-status/sync', {}); - Message.success('视频上传并审核通过'); + const task = await api.post>( + "/api/admin/v1/media/upload-tasks", + { + episodeId: episode.id, + fileName: file.name, + contentType: file.type || "video/mp4", + fileSize: file.size, + }, + ); + await api.patch( + `/api/admin/v1/media/upload-tasks/${task.data.data.jobId}/complete`, + {}, + ); + await api.post("/api/admin/v1/media/review-status/sync", {}); + Message.success("视频上传并审核通过"); await loadDetail(); } finally { setUploadingEpisodeId(null); @@ -221,10 +314,10 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) { const publishEpisode = async (episode: Episode) => { await api.patch(`/api/admin/v1/episodes/${episode.id}`, { - publishStatus: 'published', - status: 'published', + publishStatus: "published", + status: "published", }); - Message.success('剧集已发布'); + Message.success("剧集已发布"); await loadDetail(); }; @@ -233,70 +326,150 @@ function DramaDetailPage({ dramaId }: { dramaId: number }) { - - - } + title={ + + + + + + } > {drama && ( )} - - setEpisodeCount(Number(value) || 1)} /> - - }> -
value || '-' }, - { title: '尺寸', width: 120, render: (_, record) => record.width && record.height ? `${record.width}x${record.height}` : '-' }, - { title: '时长', dataIndex: 'durationSeconds', width: 100, render: (value) => value ? `${value}s` : '-' }, - { title: '审核状态', dataIndex: 'reviewStatus', width: 120, render: (status) => {REVIEW_STATUS_LABEL[String(status)] || String(status)} }, - { title: '发布状态', dataIndex: 'publishStatus', width: 120, render: (status) => {PUBLISH_STATUS_LABEL[String(status)] || String(status)} }, - { - title: '操作', - width: 280, - render: (_, record) => ( - - - - - ), - }, - ]} /> + + setEpisodeCount(Number(value) || 1)} + /> + + + } + > +
value || "-", + }, + { + title: "尺寸", + width: 120, + render: (_, record) => + record.width && record.height + ? `${record.width}x${record.height}` + : "-", + }, + { + title: "时长", + dataIndex: "durationSeconds", + width: 100, + render: (value) => (value ? `${value}s` : "-"), + }, + { + title: "审核状态", + dataIndex: "reviewStatus", + width: 120, + render: (status) => ( + + {REVIEW_STATUS_LABEL[String(status)] || String(status)} + + ), + }, + { + title: "发布状态", + dataIndex: "publishStatus", + width: 120, + render: (status) => ( + + {PUBLISH_STATUS_LABEL[String(status)] || String(status)} + + ), + }, + { + title: "操作", + width: 280, + render: (_, record) => ( + + + + + ), + }, + ]} + /> ); diff --git a/src/main.tsx b/src/main.tsx index 1dae726..baca992 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,3 +1,6 @@ +// 让 Arco 的命令式组件（Message/Notification/Modal.confirm 等）在 React 18/19 下 +// 使用 react-dom/client 的 createRoot，而非已被移除的 ReactDOM.render。必须在使用 Arco 前引入。 +import '@arco-design/web-react/es/_util/react-19-adapter'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import '@arco-design/web-react/dist/css/arco.css';