From 82524c431205a9b3e1576366b9df34c074618c94 Mon Sep 17 00:00:00 2001 From: zhxiao1124 Date: Fri, 3 Jul 2026 16:12:00 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E7=A7=BB=E9=99=A4=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E7=9A=84rounded-xl=E6=A0=B7=E5=BC=8F=E5=B9=B6=E6=95=B4?= =?UTF-8?q?=E7=90=86=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 移除多个组件冗余的rounded-xl类名，统一圆角样式配置 2. 调整Dashboard页面代码缩进与引号风格为统一的双引号格式 3. 简化DramaDetail页面布局结构，重构详情展示区域 4. 清理index.css中多余的descriptions自定义样式 5. 更新gitignore忽略.trae和.mimocode目录 --- .gitignore | 2 + .mimocode/plans/1783060688305-neon-meadow.md | 1 - src/Dashboard/index.tsx | 96 +++++++------ src/Drama/components/DramaDetail.tsx | 133 ++++++++++--------- src/Login/components/LoginPanel.tsx | 2 +- src/Login/components/LoginVisual.tsx | 8 +- src/Profile/components/ProfileInfoList.tsx | 2 +- src/Role/components/PermissionTreePicker.tsx | 2 +- src/index.css | 21 +-- src/layout/index.tsx | 6 +- 10 files changed, 133 insertions(+), 140 deletions(-) diff --git a/.gitignore b/.gitignore index a547bf3..23fe0d0 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,8 @@ dist-ssr # Editor directories and files .vscode/* +.trae/* +.mimocode/* !.vscode/extensions.json .idea .DS_Store diff --git a/.mimocode/plans/1783060688305-neon-meadow.md b/.mimocode/plans/1783060688305-neon-meadow.md index edeef64..825e3c4 100644 --- a/.mimocode/plans/1783060688305-neon-meadow.md +++ b/.mimocode/plans/1783060688305-neon-meadow.md @@ -122,7 +122,6 @@ - `border-line/60` 等边框 — 保持 1px - `shadow-*` 类 — shadow 值保持 px - Arco 组件的 `size` prop（如 Avatar `size={32}`）— Arco 内部用 px，保持数字 -- `rounded-xl`, `rounded-2xl` 等 — 已在 config 中定义为 rem ## 实施顺序 diff --git a/src/Dashboard/index.tsx b/src/Dashboard/index.tsx index 54d42b8..d4f75fe 100644 --- a/src/Dashboard/index.tsx +++ b/src/Dashboard/index.tsx @@ -1,65 +1,63 @@ -import { IconPlayCircle, IconUser, IconFile, IconCheckCircle } from '@arco-design/web-react/icon'; -import { dramaApi, logApi, userApi } from '../api'; -import { usePageData } from '../hooks/usePageData'; -import { hasPermissions } from '../utils/permission'; -import { NoAccessPage } from '../components/NoAccessPage'; -import { Panel } from '../components/Panel'; -import { RequestLogTable } from '../components/RequestLogTable'; -import type { AppUser, DashboardPageProps, Drama, MetricCardProps, RequestLog } from './interface'; +import { IconPlayCircle, IconUser, IconFile, IconCheckCircle } from "@arco-design/web-react/icon"; +import { dramaApi, logApi, userApi } from "../api"; +import { usePageData } from "../hooks/usePageData"; +import { hasPermissions } from "../utils/permission"; +import { NoAccessPage } from "../components/NoAccessPage"; +import { Panel } from "../components/Panel"; +import { RequestLogTable } from "../components/RequestLogTable"; +import type { AppUser, DashboardPageProps, Drama, MetricCardProps, RequestLog } from "./interface"; const METRIC_ICONS: Record = { - dramas: , - users: , - logs: , - status: , + dramas: , + users: , + logs: , + status: , }; const METRIC_COLORS: Record = { - dramas: 'from-brand/5 to-brand/10', - users: 'from-success/5 to-success/10', - logs: 'from-warning/5 to-warning/10', - status: 'from-success/5 to-success/10', + dramas: "from-brand/5 to-brand/10", + users: "from-success/5 to-success/10", + logs: "from-warning/5 to-warning/10", + status: "from-success/5 to-success/10", }; function MetricCard({ label, value, icon }: MetricCardProps & { icon: string }) { - return ( -
-
-
- {METRIC_ICONS[icon]} + return ( +
+
+
{METRIC_ICONS[icon]}
+ {label} +
+
{value}
- {label} -
-
{value}
-
- ); + ); } function DashboardPage({ profile }: DashboardPageProps) { - const canReadDramas = hasPermissions(profile, ['drama:read']); - const canReadUsers = hasPermissions(profile, ['user:read']); - const canReadLogs = hasPermissions(profile, ['log:read']); - const dramas = usePageData(dramaApi.listDramas, { page: 1, pageSize: 20 }, canReadDramas); - const users = usePageData(userApi.listUsers, { page: 1, pageSize: 20 }, canReadUsers); - const logs = usePageData(logApi.listRequestLogs, { page: 1, pageSize: 20 }, canReadLogs); - const hasAnyDataModule = canReadDramas || canReadUsers || canReadLogs; + const canReadDramas = hasPermissions(profile, ["drama:read"]); + const canReadUsers = hasPermissions(profile, ["user:read"]); + const canReadLogs = hasPermissions(profile, ["log:read"]); + const dramas = usePageData(dramaApi.listDramas, { page: 1, pageSize: 20 }, canReadDramas); + const users = usePageData(userApi.listUsers, { page: 1, pageSize: 20 }, canReadUsers); + const logs = usePageData(logApi.listRequestLogs, { page: 1, pageSize: 20 }, canReadLogs); + const hasAnyDataModule = canReadDramas || canReadUsers || canReadLogs; - return ( -
-
- {canReadDramas && } - {canReadUsers && } - {canReadLogs && } - -
- {canReadLogs ? ( - - - - ) : null} - {!hasAnyDataModule ? : null} -
- ); + return ( +
+
+ {canReadDramas && } + {canReadUsers && } + {canReadLogs && } + +
+ {canReadLogs ? ( + + + + ) : null} + {!hasAnyDataModule ? : null} +
+ ); } export default DashboardPage; diff --git a/src/Drama/components/DramaDetail.tsx b/src/Drama/components/DramaDetail.tsx index a43448f..f50e506 100644 --- a/src/Drama/components/DramaDetail.tsx +++ b/src/Drama/components/DramaDetail.tsx @@ -38,11 +38,7 @@ export function DramaDetail({ dramaId }: DramaDetailPageProps) { const loadDetail = async () => { setLoading(true); try { - const [dramaData, episodeList, channelPage] = await Promise.all([ - dramaApi.getDrama(dramaId), - dramaApi.getDramaEpisodes(dramaId), - channelApi.listChannels({ page: 1, pageSize: 100 }).catch(() => ({ list: [] })), - ]); + const [dramaData, episodeList, channelPage] = await Promise.all([dramaApi.getDrama(dramaId), dramaApi.getDramaEpisodes(dramaId), channelApi.listChannels({ page: 1, pageSize: 100 }).catch(() => ({ list: [] }))]); setDrama(dramaData); setEpisodeCount(dramaData.totalEpisodes || 1); setEpisodes(episodeList); @@ -115,70 +111,75 @@ export function DramaDetail({ dramaId }: DramaDetailPageProps) { return (
- + {/* 导航栏 */} + - - setEpisodeCount(Number(value) || 1)} /> - - - } - noPadding - > - - + {/* 内容区域 */} +
+ + {loading && !drama ? ( +
加载中...
+ ) : drama ? ( +
+ + + + + + +
+
+ {drama.title} +
+
+ + +
+ ) : null} + + + + setEpisodeCount(Number(value) || 1)} /> + + + } + noPadding + > + + +
{drama && ( setEditVisible(false)} footer={null} style={{ width: "45rem" }}> diff --git a/src/Login/components/LoginPanel.tsx b/src/Login/components/LoginPanel.tsx index bc25675..71564b9 100644 --- a/src/Login/components/LoginPanel.tsx +++ b/src/Login/components/LoginPanel.tsx @@ -17,7 +17,7 @@ export const LoginPanel = ({ loading, onSubmit }: LoginPanelProps) => { } placeholder="请输入密码" size="large" /> - diff --git a/src/Login/components/LoginVisual.tsx b/src/Login/components/LoginVisual.tsx index 7cca86b..27d9230 100644 --- a/src/Login/components/LoginVisual.tsx +++ b/src/Login/components/LoginVisual.tsx @@ -2,7 +2,7 @@ export function LoginVisual() { return (
- CT + CT cth-tk-admin
@@ -11,15 +11,15 @@ export function LoginVisual() {

集中处理短剧内容、剧集发布、订单支付、播放日志和系统权限，帮助运营人员稳定管理短剧业务。

-
+
内容 短剧与剧集管理
-
+
权限 角色化后台授权
-
+
日志 请求与播放追踪
diff --git a/src/Profile/components/ProfileInfoList.tsx b/src/Profile/components/ProfileInfoList.tsx index 03dbd8e..6c111a9 100644 --- a/src/Profile/components/ProfileInfoList.tsx +++ b/src/Profile/components/ProfileInfoList.tsx @@ -13,7 +13,7 @@ export function ProfileInfoList({ profile }: ProfileInfoListProps) { function ProfileInfoItem({ label, value }: ProfileInfoItemProps) { return ( -
+
{label} {value}
diff --git a/src/Role/components/PermissionTreePicker.tsx b/src/Role/components/PermissionTreePicker.tsx index 19e9f17..72a1235 100644 --- a/src/Role/components/PermissionTreePicker.tsx +++ b/src/Role/components/PermissionTreePicker.tsx @@ -118,7 +118,7 @@ export function PermissionTreePicker({ permissions, value, onChange }: Permissio const checkedKeys = value.map((id) => permissionKey(id)); return ( -
+
- TK + TK {!collapsed && TK短剧管理后台}
@@ -89,7 +89,7 @@ export function AdminLayout() { position="br" trigger="click" droplist={ - + navigate("/profile")} className="!rounded-lg !h-9"> 个人中心 @@ -99,7 +99,7 @@ export function AdminLayout() { } > -