diff --git a/apps/web/src/components/ui/Form.tsx b/apps/web/src/components/ui/Form.tsx deleted file mode 100644 index 50e1f9ecf..000000000 --- a/apps/web/src/components/ui/Form.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/** - * V21 Form 表单 - * 封装 Ant Design Form,应用 V21 设计系统样式 - */ -import React from "react"; -import { Form as AntForm } from "antd"; -import type { FormProps as AntFormProps } from "antd"; -import classNames from "classnames"; -import "./ui.css"; - -export interface FormProps extends AntFormProps { - /** 紧凑模式(减小表单项间距) */ - compact?: boolean; -} - -const Form = ({ className, compact, children, ...rest }: FormProps) => { - const v21Class = classNames( - "xx-form", - compact && "xx-form-compact", - className, - ); - return ( - )} - > - {children as React.ReactNode} - - ); -}; - -/** 导出 Form 的子组件(保持 antd API 一致) */ -export const FormItem = AntForm.Item; -export const FormList = AntForm.List; -export const FormProvider = AntForm.Provider; - -export default Form; diff --git a/apps/web/src/components/ui/Pagination.tsx b/apps/web/src/components/ui/Pagination.tsx deleted file mode 100644 index 4bfad7270..000000000 --- a/apps/web/src/components/ui/Pagination.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/** - * V21 Pagination 分页 - * 封装 Ant Design Pagination,应用 V21 设计系统样式 - */ -import React from "react"; -import { Pagination as AntPagination } from "antd"; -import type { PaginationProps as AntPaginationProps } from "antd"; -import classNames from "classnames"; -import "./ui.css"; - -export interface PaginationProps extends AntPaginationProps { - /** 使用 V21 样式 */ - v21?: boolean; -} - -const Pagination: React.FC = ({ - className, - v21 = true, - ...rest -}) => { - const v21Class = classNames(v21 && "xx-pagination", className); - return ; -}; - -export default Pagination; diff --git a/apps/web/src/components/ui/Table.tsx b/apps/web/src/components/ui/Table.tsx deleted file mode 100644 index da909f86b..000000000 --- a/apps/web/src/components/ui/Table.tsx +++ /dev/null @@ -1,29 +0,0 @@ -/** - * V21 Table 表格 - * 封装 Ant Design Table,应用 V21 设计系统样式 - */ -import React from "react"; -import { Table as AntTable } from "antd"; -import type { TableProps as AntTableProps } from "antd"; -import classNames from "classnames"; -import "./ui.css"; - -export interface TableProps< - RecordType = unknown, -> extends AntTableProps { - /** 使用 V21 样式 */ - v21?: boolean; -} - -function Table>({ - className, - v21 = true, - ...rest -}: TableProps) { - const v21Class = classNames(v21 && "xx-table", className); - return className={v21Class} {...rest} />; -} - -export default Table as >( - props: TableProps & React.RefAttributes, -) => React.ReactElement; diff --git a/apps/web/src/components/ui/index.ts b/apps/web/src/components/ui/index.ts index 98f8f77da..67ea0fc08 100644 --- a/apps/web/src/components/ui/index.ts +++ b/apps/web/src/components/ui/index.ts @@ -15,9 +15,6 @@ export type { SelectProps } from "./Select"; export { default as Modal } from "./Modal"; export type { ModalProps } from "./Modal"; -export { default as Table } from "./Table"; -export type { TableProps } from "./Table"; - export { default as Card } from "./Card"; export type { CardProps } from "./Card"; @@ -26,9 +23,3 @@ export type { TagProps, TagVariant } from "./Tag"; export { Tooltip, Popover } from "./Tooltip"; export type { TooltipProps, PopoverProps } from "./Tooltip"; - -export { default as Form, FormItem, FormList, FormProvider } from "./Form"; -export type { FormProps } from "./Form"; - -export { default as Pagination } from "./Pagination"; -export type { PaginationProps } from "./Pagination"; diff --git a/apps/web/src/pages/accounts/accounts.css b/apps/web/src/pages/accounts/accounts.css index 2952690d6..bbad96f7c 100755 --- a/apps/web/src/pages/accounts/accounts.css +++ b/apps/web/src/pages/accounts/accounts.css @@ -82,77 +82,6 @@ gap: 10px; } -/* ── 账号行 ─────────────────────────────────────────────── */ - -.acc-account-row { - display: flex; - align-items: center; - gap: 10px; - padding: 12px; - background: var(--bg-secondary); - border-radius: var(--radius-md); - transition: var(--transition-fast); -} - -.acc-account-row:hover { - background: var(--primary-soft); -} - -.acc-account-avatar { - width: 36px; - height: 36px; - border-radius: 50%; - display: grid; - place-items: center; - color: var(--text-inverse); - font-weight: var(--font-weight-bold); - font-size: var(--font-size-sm); - flex-shrink: 0; -} - -.acc-account-info { - flex: 1; - min-width: 0; -} - -.acc-account-name { - font-size: var(--font-size-base); - font-weight: var(--font-weight-semibold); - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* ── 状态标签 ───────────────────────────────────────────── */ - -.acc-status-pill { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 2px 8px; - border-radius: var(--radius-full); - font-size: var(--font-size-xs); - font-weight: var(--font-weight-semibold); - line-height: 1.6; - margin-top: 2px; -} - -.acc-status--active { - background: var(--success-soft); - color: var(--secondary-color); -} - -.acc-status--expired { - background: var(--error-soft); - color: var(--error-color); -} - -.acc-status--limited { - background: var(--warning-soft); - color: var(--accent-color); -} - /* ── 空状态 ─────────────────────────────────────────────── */ .acc-empty { @@ -235,17 +164,6 @@ font-size: var(--font-size-base); } - .acc-account-row { - padding: 10px; - gap: 8px; - } - - .acc-account-avatar { - width: 32px; - height: 32px; - font-size: var(--font-size-xs); - } - .acc-stats-bar { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); diff --git a/apps/web/src/pages/dashboard/dashboard.css b/apps/web/src/pages/dashboard/dashboard.css index 02d386666..ccffc0e0d 100644 --- a/apps/web/src/pages/dashboard/dashboard.css +++ b/apps/web/src/pages/dashboard/dashboard.css @@ -1,6 +1,6 @@ /** * 控制台页面 - V21 设计系统样式 - * KPI 卡片网格 + 快速入口 + 最近任务卡片列表 + 使用统计图表 + 公告 + * KPI 卡片网格 + 快速入口 + 最近任务 + 使用统计图表 + 公告 * 统一使用 CSS 变量,支持深色/浅色主题 */ @import "../../styles/global.css"; @@ -13,26 +13,6 @@ padding: var(--space-xl); } -/* ============================================================ - 欢迎头部 - ============================================================ */ -.xx-dashboard-welcome { - margin-bottom: var(--space-lg); -} - -.xx-dashboard-welcome h2 { - margin: 0 0 var(--space-xs); - font-size: var(--font-size-xl); - font-weight: var(--font-weight-bold); - color: var(--text-primary); -} - -.xx-dashboard-welcome p { - margin: 0; - font-size: var(--font-size-sm); - color: var(--text-secondary); -} - /* ============================================================ KPI 卡片网格 ============================================================ */ @@ -43,76 +23,6 @@ margin-bottom: var(--space-lg); } -.xx-kpi-card { - background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary)); - border: 1px solid var(--border-color); - border-radius: var(--radius-lg); - padding: 20px; - transition: 0.18s ease; - position: relative; - overflow: hidden; -} - -.xx-kpi-card:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-sm); -} - -.xx-kpi-icon { - width: 40px; - height: 40px; - border-radius: var(--radius-md); - display: flex; - align-items: center; - justify-content: center; - font-size: var(--font-size-lg); - margin-bottom: var(--space-sm); -} - -.xx-kpi-value { - font-size: 30px; - font-weight: 800; - color: var(--text-primary); - line-height: 1.2; - margin-bottom: var(--space-xs); -} - -.xx-kpi-label { - font-size: var(--font-size-sm); - color: var(--text-secondary); - margin-bottom: var(--space-sm); -} - -.xx-kpi-trend { - font-size: 12px; - margin-top: 8px; - display: inline-flex; - align-items: center; - gap: 4px; -} - -.xx-kpi-trend--up { - color: var(--success-color); -} - -.xx-kpi-trend--down { - color: var(--error-color); -} - -.xx-kpi-trend--neutral { - color: var(--text-tertiary); -} - -/* ============================================================ - 主内容区两栏布局 - ============================================================ */ -.xx-dashboard-main { - display: grid; - grid-template-columns: 1fr 320px; - gap: var(--space-md); - margin-bottom: var(--space-lg); -} - /* ============================================================ 区块卡片 ============================================================ */ @@ -161,7 +71,25 @@ } /* ============================================================ - 最近任务卡片列表 + 空状态 + ============================================================ */ +.xx-dashboard-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--space-xl) var(--space-md); + text-align: center; + color: var(--text-tertiary); +} + +.xx-dashboard-empty p { + margin: 0; + font-size: var(--font-size-sm); +} + +/* ============================================================ + 最近任务列表 ============================================================ */ .xx-task-list { display: flex; @@ -169,86 +97,6 @@ gap: var(--space-sm); } -.xx-task-item { - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: var(--radius-md); - padding: var(--space-sm) var(--space-md); - display: grid; - grid-template-columns: 1fr auto auto auto; - gap: var(--space-md); - align-items: center; - transition: var(--transition-all); -} - -.xx-task-item:hover { - border-color: var(--primary-color); - box-shadow: var(--shadow-sm); -} - -.xx-task-info h4 { - margin: 0 0 var(--space-xs); - font-size: var(--font-size-sm); - font-weight: 600; - color: var(--text-primary); -} - -.xx-task-info span { - font-size: var(--font-size-xs); - color: var(--text-secondary); -} - -.xx-task-status { - display: inline-flex; - align-items: center; - gap: var(--space-xs); - padding: 3px 10px; - border-radius: var(--radius-sm); - font-size: var(--font-size-xs); - font-weight: 500; - white-space: nowrap; -} - -.xx-task-status--completed { - color: var(--success-color); - background: var(--success-soft); - border: 1px solid var(--success-border); -} - -.xx-task-status--processing { - color: var(--info-color); - background: var(--primary-soft); - border: 1px solid var(--color-primary-200); -} - -.xx-task-status--pending { - color: var(--text-secondary); - background: var(--bg-secondary); - border: 1px solid var(--border-color); -} - -.xx-task-status--failed { - color: var(--error-color); - background: var(--error-soft); - border: 1px solid var(--error-border); -} - -.xx-task-time { - text-align: right; - font-size: var(--font-size-xs); - color: var(--text-secondary); - min-width: 100px; -} - -.xx-task-time span { - display: block; - margin-bottom: var(--space-xxs); -} - -.xx-task-action { - font-size: var(--font-size-xs); -} - /* ============================================================ 使用统计图表(纯 CSS 柱状图) ============================================================ */ @@ -264,69 +112,27 @@ padding-top: var(--space-sm); } -.xx-chart-bar-wrapper { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - height: 100%; - justify-content: flex-end; -} - -.xx-chart-bar { - width: 100%; - max-width: 36px; - border-radius: var(--radius-sm) var(--radius-sm) 0 0; - background: var(--gradient-primary); - transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); - position: relative; - min-height: 4px; - cursor: pointer; -} - -.xx-chart-bar:hover { - opacity: 0.85; -} - -.xx-chart-bar:active { - opacity: 0.7; - transform: scaleY(0.97); - transform-origin: bottom; -} - -.xx-chart-bar-value { - position: absolute; - top: -20px; - left: 50%; - transform: translateX(-50%); - font-size: var(--font-size-xs); - font-weight: 600; - color: var(--text-primary); - white-space: nowrap; - opacity: 0; - transition: var(--transition-opacity); -} - -.xx-chart-bar:hover .xx-chart-bar-value { - opacity: 1; -} - -.xx-chart-labels { - display: flex; - gap: var(--space-sm); - margin-top: var(--space-sm); -} - -.xx-chart-label { - flex: 1; - text-align: center; - font-size: var(--font-size-xs); - color: var(--text-secondary); -} - /* ============================================================ - 快速入口卡片网格 + 快速入口 ============================================================ */ +.xx-quick-entry-section { + margin-bottom: var(--space-md); +} + +.xx-quick-entry-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-md); +} + +.xx-quick-entry-title { + margin: 0; + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + color: var(--text-primary); +} + .xx-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); @@ -334,53 +140,6 @@ margin-bottom: var(--space-lg); } -.xx-quick-card { - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: var(--radius-lg); - padding: var(--space-lg); - cursor: pointer; - transition: var(--transition-all); - text-align: center; -} - -.xx-quick-card:hover { - border-color: var(--primary-color); - box-shadow: var(--shadow-md); - transform: translateY(-2px); -} - -.xx-quick-card:active { - transform: translateY(0) scale(0.98); - box-shadow: var(--shadow-sm); - transition-duration: 0.1s; -} - -.xx-quick-card-icon { - width: 52px; - height: 52px; - border-radius: var(--radius-md); - display: flex; - align-items: center; - justify-content: center; - font-size: var(--font-size-xl); - margin: 0 auto var(--space-md); - color: var(--text-inverse); -} - -.xx-quick-card h3 { - margin: 0 0 var(--space-sm); - font-size: var(--font-size-md); - font-weight: var(--font-weight-semibold); - color: var(--text-primary); -} - -.xx-quick-card p { - margin: 0; - color: var(--text-secondary); - font-size: var(--font-size-sm); -} - /* ============================================================ 公告区域 ============================================================ */ @@ -451,90 +210,10 @@ color: var(--text-secondary); } -/* ============================================================ - 存储用量条 - ============================================================ */ -.xx-storage-bar { - margin-top: var(--space-sm); -} - -.xx-storage-bar-track { - height: var(--space-sm); - background: var(--bg-secondary); - border-radius: var(--space-xs); - overflow: hidden; -} - -.xx-storage-bar-fill { - height: 100%; - border-radius: var(--space-xs); - background: var(--gradient-primary); - transition: width 0.6s ease; -} - -.xx-storage-bar-label { - display: flex; - justify-content: space-between; - font-size: var(--font-size-xs); - color: var(--text-secondary); - margin-top: var(--space-xs); -} - -/* ============================================================ - 迁移自内联样式的工具类 - ============================================================ */ -.xx-dashboard-left-col { - display: flex; - flex-direction: column; - gap: var(--space-md); -} - -.xx-chart-total { - font-size: var(--font-size-xs); - color: var(--text-secondary); -} - -.xx-dashboard-section--start { - align-self: start; -} - -.xx-storage-section { - margin-top: var(--space-md); -} - -.xx-storage-section-title { - font-size: 13px; - font-weight: 500; - color: var(--text-primary); - margin-bottom: 4px; -} - -.xx-quick-entry-section { - margin-bottom: var(--space-md); -} - -.xx-quick-entry-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: var(--space-md); -} - -.xx-quick-entry-title { - margin: 0; - font-size: var(--font-size-base); - font-weight: var(--font-weight-semibold); - color: var(--text-primary); -} - /* ============================================================ 响应式 ============================================================ */ @media (max-width: 1200px) { - .xx-dashboard-main { - grid-template-columns: 1fr; - } - .xx-kpi-grid { grid-template-columns: repeat(2, 1fr); } @@ -557,15 +236,6 @@ grid-template-columns: 1fr; } - .xx-task-item { - grid-template-columns: 1fr; - gap: var(--space-sm); - } - - .xx-task-time { - text-align: left; - } - .xx-chart-bars { height: 120px; }