diff --git a/apps/web/src/App.css b/apps/web/src/App.css
index d82b09dc3..24233c189 100644
--- a/apps/web/src/App.css
+++ b/apps/web/src/App.css
@@ -1,14 +1,140 @@
-.App {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+/* V21 App Root Styles */
+
+.xx-app-root {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
+  padding: 24px;
+}
+
+.xx-app-container {
+  max-width: 480px;
+  width: 100%;
   text-align: center;
 }
 
-.card {
-  padding: 2em;
+/* Hero Section */
+.xx-hero-section {
+  margin-bottom: 40px;
 }
 
-.read-the-docs {
-  color: #888;
+.xx-logo {
+  font-size: 72px;
+  margin-bottom: 24px;
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+.xx-hero-section h1 {
+  font-size: 36px;
+  font-weight: 850;
+  color: #0f172a;
+  margin: 0 0 12px;
+  letter-spacing: -0.5px;
+}
+
+.xx-hero-section p {
+  font-size: 18px;
+  color: #64748b;
+  margin: 0;
+}
+
+.xx-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 20px;
+  padding: 8px 16px;
+  background: #eef2ff;
+  color: #4f46e5;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.xx-status-dot {
+  width: 8px;
+  height: 8px;
+  background: #4f46e5;
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.2); }
+}
+
+/* Card */
+.xx-card {
+  background: rgba(255,255,255,0.94);
+  border: 1px solid rgba(226,232,240,0.95);
+  border-radius: 22px;
+  box-shadow: 0 24px 70px rgba(15,23,42,0.09);
+  padding: 28px;
+  transition: all 0.25s;
+}
+
+.xx-card:hover {
+  box-shadow: 0 26px 64px rgba(15,23,42,0.14);
+  transform: translateY(-2px);
+}
+
+.xx-card h3 {
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0 0 20px;
+  text-align: left;
+}
+
+/* Quick Links */
+.xx-link-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.xx-link-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 24px 16px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  text-decoration: none;
+  color: #0f172a;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.xx-link-item:hover {
+  background: #eef2ff;
+  border-color: #4f46e5;
+  color: #4f46e5;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(79,70,229,0.15);
+}
+
+.xx-link-icon {
+  font-size: 32px;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  .xx-hero-section h1 {
+    font-size: 28px;
+  }
+  
+  .xx-link-grid {
+    grid-template-columns: 1fr;
+  }
 }
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index f6939bbc9..8338d6664 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,23 +1,40 @@
-import { useState } from 'react'
-import './App.css'
+/**
+ * App Root Component - V21 UI
+ * 注意：此组件已被路由系统接管，仅作为默认展示
+ */
+import { Link } from 'react-router-dom';
+import './App.css';
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <div className="App">
-      <h1>小虾 SaaS</h1>
-      <p>自动化视频剪辑平台</p>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
+    <div className="xx-app-root">
+      <div className="xx-app-container">
+        <div className="xx-hero-section">
+          <div className="xx-logo">🎬</div>
+          <h1>小虾 SaaS</h1>
+          <p>自动化视频剪辑平台</p>
+          <div className="xx-status-badge">
+            <span className="xx-status-dot"></span>
+            前端开发中
+          </div>
+        </div>
+        
+        <div className="xx-card xx-quick-links">
+          <h3>快速链接</h3>
+          <div className="xx-link-grid">
+            <Link to="/workspaces" className="xx-link-item">
+              <span className="xx-link-icon">📁</span>
+              <span>工作空间</span>
+            </Link>
+            <Link to="/projects" className="xx-link-item">
+              <span className="xx-link-icon">📋</span>
+              <span>我的项目</span>
+            </Link>
+          </div>
+        </div>
       </div>
-      <p className="read-the-docs">
-        Phase 6: 前端开发中...
-      </p>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/apps/web/src/components/business/InviteMemberModal.tsx b/apps/web/src/components/business/InviteMemberModal.tsx
index 0b8d98a47..4c276413e 100644
--- a/apps/web/src/components/business/InviteMemberModal.tsx
+++ b/apps/web/src/components/business/InviteMemberModal.tsx
@@ -1,9 +1,10 @@
 /**
- * 邀请成员弹窗
+ * 邀请成员弹窗 - V21 UI
  */
 import React from 'react';
 import { Modal, Form, Input, Select, message } from 'antd';
 import { useInviteMember } from '@/hooks/useWorkspace';
+import './business.css';
 
 interface InviteMemberModalProps {
   workspaceId: string;
@@ -45,6 +46,8 @@ const InviteMemberModal: React.FC<InviteMemberModalProps> = ({
       confirmLoading={inviteMutation.isPending}
       okText="发送邀请"
       cancelText="取消"
+      className="xx-modal"
+      width={480}
     >
       <Form form={form} layout="vertical">
         <Form.Item
@@ -60,7 +63,7 @@ const InviteMemberModal: React.FC<InviteMemberModalProps> = ({
 
         <Form.Item
           name="role"
-          label="角色"
+          label="角色权限"
           initialValue="member"
           rules={[{ required: true, message: '请选择角色' }]}
         >
diff --git a/apps/web/src/components/business/MemberList.tsx b/apps/web/src/components/business/MemberList.tsx
index e78ae0276..959b6b335 100644
--- a/apps/web/src/components/business/MemberList.tsx
+++ b/apps/web/src/components/business/MemberList.tsx
@@ -1,5 +1,5 @@
 /**
- * 成员列表组件
+ * 成员列表组件 - V21 UI
  */
 import React from 'react';
 import { Table, Button, Tag, Space, Popconfirm, message, Select } from 'antd';
@@ -7,6 +7,7 @@ import { DeleteOutlined } from '@ant-design/icons';
 import { useWorkspaceMembers } from '@/hooks/useWorkspace';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { removeMember, updateMemberRole } from '@/api/workspace';
+import './business.css';
 
 interface MemberListProps {
   workspaceId: string;
@@ -34,14 +35,14 @@ const MemberList: React.FC<MemberListProps> = ({ workspaceId }) => {
   });
 
   const getRoleTag = (role: string) => {
-    const roleConfig: Record<string, { color: string; text: string }> = {
-      owner: { color: 'gold', text: '拥有者' },
-      admin: { color: 'blue', text: '管理员' },
-      member: { color: 'green', text: '成员' },
-      viewer: { color: 'default', text: '访客' },
+    const roleConfig: Record<string, { color: string; text: string; className: string }> = {
+      owner: { color: 'gold', text: '拥有者', className: 'xx-tag-warning' },
+      admin: { color: 'blue', text: '管理员', className: 'xx-tag-indigo' },
+      member: { color: 'green', text: '成员', className: 'xx-tag-success' },
+      viewer: { color: 'default', text: '访客', className: '' },
     };
     const config = roleConfig[role] || roleConfig.member;
-    return <Tag color={config.color}>{config.text}</Tag>;
+    return <Tag color={config.color} className={`xx-tag ${config.className}`}>{config.text}</Tag>;
   };
 
   const columns = [
@@ -49,11 +50,13 @@ const MemberList: React.FC<MemberListProps> = ({ workspaceId }) => {
       title: '用户名',
       dataIndex: 'username',
       key: 'username',
+      render: (text: string) => <span style={{ fontWeight: 600, color: '#0f172a' }}>{text}</span>,
     },
     {
       title: '邮箱',
       dataIndex: 'email',
       key: 'email',
+      render: (text: string) => <span style={{ color: '#64748b' }}>{text}</span>,
     },
     {
       title: '角色',
@@ -66,7 +69,7 @@ const MemberList: React.FC<MemberListProps> = ({ workspaceId }) => {
         return (
           <Select
             value={role}
-            style={{ width: 120 }}
+            style={{ width: 130 }}
             onChange={(newRole) =>
               updateRoleMutation.mutate({ memberId: record.id, role: newRole })
             }
@@ -83,11 +86,12 @@ const MemberList: React.FC<MemberListProps> = ({ workspaceId }) => {
       title: '加入时间',
       dataIndex: 'joined_at',
       key: 'joined_at',
-      render: (date: string) => new Date(date).toLocaleDateString(),
+      render: (date: string) => <span style={{ color: '#64748b' }}>{new Date(date).toLocaleDateString()}</span>,
     },
     {
       title: '操作',
       key: 'action',
+      width: 100,
       render: (_: any, record: any) => {
         if (record.role === 'owner') {
           return <span style={{ color: '#999' }}>-</span>;
@@ -116,13 +120,15 @@ const MemberList: React.FC<MemberListProps> = ({ workspaceId }) => {
   ];
 
   return (
-    <Table
-      columns={columns}
-      dataSource={members}
-      loading={isLoading}
-      rowKey="id"
-      pagination={{ pageSize: 10 }}
-    />
+    <div className="xx-table-wrapper">
+      <Table
+        columns={columns}
+        dataSource={members}
+        loading={isLoading}
+        rowKey="id"
+        pagination={{ pageSize: 10, showSizeChanger: false }}
+      />
+    </div>
   );
 };
 
diff --git a/apps/web/src/components/business/PermissionMatrix.tsx b/apps/web/src/components/business/PermissionMatrix.tsx
index b16a6b1f0..97cad565f 100644
--- a/apps/web/src/components/business/PermissionMatrix.tsx
+++ b/apps/web/src/components/business/PermissionMatrix.tsx
@@ -1,9 +1,10 @@
 /**
- * 权限矩阵展示组件
+ * 权限矩阵展示组件 - V21 UI
  */
 import React from 'react';
 import { Card, Table } from 'antd';
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import './business.css';
 
 const PermissionMatrix: React.FC = () => {
   const permissions = [
@@ -24,18 +25,20 @@ const PermissionMatrix: React.FC = () => {
       dataIndex: 'action',
       key: 'action',
       fixed: 'left' as const,
-      width: 150,
+      width: 160,
+      render: (text: string) => <span style={{ fontWeight: 500 }}>{text}</span>,
     },
     {
       title: '拥有者',
       dataIndex: 'owner',
       key: 'owner',
       align: 'center' as const,
+      width: 100,
       render: (value: boolean) =>
         value ? (
-          <CheckOutlined style={{ color: '#52c41a', fontSize: '16px' }} />
+          <CheckOutlined style={{ color: '#16a34a', fontSize: '18px' }} />
         ) : (
-          <CloseOutlined style={{ color: '#ff4d4f', fontSize: '16px' }} />
+          <CloseOutlined style={{ color: '#dc2626', fontSize: '16px' }} />
         ),
     },
     {
@@ -43,11 +46,12 @@ const PermissionMatrix: React.FC = () => {
       dataIndex: 'admin',
       key: 'admin',
       align: 'center' as const,
+      width: 100,
       render: (value: boolean) =>
         value ? (
-          <CheckOutlined style={{ color: '#52c41a', fontSize: '16px' }} />
+          <CheckOutlined style={{ color: '#16a34a', fontSize: '18px' }} />
         ) : (
-          <CloseOutlined style={{ color: '#ff4d4f', fontSize: '16px' }} />
+          <CloseOutlined style={{ color: '#dc2626', fontSize: '16px' }} />
         ),
     },
     {
@@ -55,11 +59,12 @@ const PermissionMatrix: React.FC = () => {
       dataIndex: 'member',
       key: 'member',
       align: 'center' as const,
+      width: 100,
       render: (value: boolean) =>
         value ? (
-          <CheckOutlined style={{ color: '#52c41a', fontSize: '16px' }} />
+          <CheckOutlined style={{ color: '#16a34a', fontSize: '18px' }} />
         ) : (
-          <CloseOutlined style={{ color: '#ff4d4f', fontSize: '16px' }} />
+          <CloseOutlined style={{ color: '#dc2626', fontSize: '16px' }} />
         ),
     },
     {
@@ -67,24 +72,27 @@ const PermissionMatrix: React.FC = () => {
       dataIndex: 'viewer',
       key: 'viewer',
       align: 'center' as const,
+      width: 100,
       render: (value: boolean) =>
         value ? (
-          <CheckOutlined style={{ color: '#52c41a', fontSize: '16px' }} />
+          <CheckOutlined style={{ color: '#16a34a', fontSize: '18px' }} />
         ) : (
-          <CloseOutlined style={{ color: '#ff4d4f', fontSize: '16px' }} />
+          <CloseOutlined style={{ color: '#dc2626', fontSize: '16px' }} />
         ),
     },
   ];
 
   return (
-    <Card title="权限说明">
-      <Table
-        columns={columns}
-        dataSource={permissions}
-        pagination={false}
-        rowKey="action"
-        size="small"
-      />
+    <Card title="权限说明" className="xx-card">
+      <div className="xx-table-wrapper">
+        <Table
+          columns={columns}
+          dataSource={permissions}
+          pagination={false}
+          rowKey="action"
+          size="middle"
+        />
+      </div>
     </Card>
   );
 };
diff --git a/apps/web/src/components/business/QuotaDisplay.tsx b/apps/web/src/components/business/QuotaDisplay.tsx
index ca44d67f1..49eadc054 100644
--- a/apps/web/src/components/business/QuotaDisplay.tsx
+++ b/apps/web/src/components/business/QuotaDisplay.tsx
@@ -1,9 +1,11 @@
 /**
- * 配额使用展示组件
+ * 配额使用展示组件 - V21 UI
  */
 import React from 'react';
 import { Card, Progress, Row, Col, Tag, Space } from 'antd';
 import { ProjectOutlined, CloudOutlined, WarningOutlined } from '@ant-design/icons';
+import './business.css';
+
 interface QuotaStatus {
   projects: {
     used: number;
@@ -23,68 +25,70 @@ interface QuotaDisplayProps {
 
 const QuotaDisplay: React.FC<QuotaDisplayProps> = ({ quota }) => {
   const getStatusTag = (status: string) => {
-    const config: Record<string, { color: string; text: string; icon: React.ReactNode }> = {
-      normal: { color: 'success', text: '正常', icon: null },
-      warning: { color: 'warning', text: '接近上限', icon: <WarningOutlined /> },
-      critical: { color: 'error', text: '即将超限', icon: <WarningOutlined /> },
-      exceeded: { color: 'error', text: '已超限', icon: <WarningOutlined /> },
+    const config: Record<string, { color: string; text: string; className: string }> = {
+      normal: { color: 'success', text: '正常', className: 'xx-tag-success' },
+      warning: { color: 'warning', text: '接近上限', className: 'xx-tag-warning' },
+      critical: { color: 'error', text: '即将超限', className: 'xx-tag-error' },
+      exceeded: { color: 'error', text: '已超限', className: 'xx-tag-error' },
     };
     const item = config[status] || config.normal;
     return (
-      <Tag color={item.color} icon={item.icon}>
+      <Tag color={item.color} icon={<WarningOutlined />} className={`xx-tag ${item.className}`}>
         {item.text}
       </Tag>
     );
   };
 
-  const getProgressStatus = (status: string) => {
-    const statusMap: Record<string, 'success' | 'exception' | 'normal'> = {
-      normal: 'success',
-      warning: 'normal',
-      critical: 'exception',
-      exceeded: 'exception',
+  const getProgressColor = (status: string) => {
+    const colorMap: Record<string, string> = {
+      normal: '#16a34a',
+      warning: '#d97706',
+      critical: '#dc2626',
+      exceeded: '#dc2626',
     };
-    return statusMap[status] || 'normal';
+    return colorMap[status] || '#4f46e5';
   };
 
   return (
-    <Card title="配额使用情况">
+    <Card title="配额使用情况" className="xx-card">
       <Space direction="vertical" style={{ width: '100%' }} size="large">
-        <div>
-          <Row justify="space-between" style={{ marginBottom: 8 }}>
+        <div className="xx-quota-item">
+          <Row justify="space-between" align="middle" style={{ marginBottom: 12 }}>
             <Col>
               <Space>
-                <ProjectOutlined />
-                <span>项目数量</span>
+                <ProjectOutlined style={{ fontSize: 18, color: '#4f46e5' }} />
+                <span style={{ fontWeight: 600, color: '#0f172a', fontSize: 15 }}>项目数量</span>
               </Space>
             </Col>
             <Col>{getStatusTag(quota.projects.status)}</Col>
           </Row>
-          <div style={{ marginBottom: 4, color: '#666' }}>
+          <div style={{ marginBottom: 8, color: '#64748b', fontSize: 14 }}>
             {quota.projects.used} / {quota.projects.limit} 个项目
           </div>
           <Progress
             percent={Math.round((quota.projects.used / quota.projects.limit) * 100)}
-            status={getProgressStatus(quota.projects.status)}
+            strokeColor={getProgressColor(quota.projects.status)}
+            trailColor="#f1f5f9"
           />
         </div>
 
-        <div>
-          <Row justify="space-between" style={{ marginBottom: 8 }}>
+        <div className="xx-quota-item">
+          <Row justify="space-between" align="middle" style={{ marginBottom: 12 }}>
             <Col>
               <Space>
-                <CloudOutlined />
-                <span>存储空间</span>
+                <CloudOutlined style={{ fontSize: 18, color: '#4f46e5' }} />
+                <span style={{ fontWeight: 600, color: '#0f172a', fontSize: 15 }}>存储空间</span>
               </Space>
             </Col>
             <Col>{getStatusTag(quota.storage.status)}</Col>
           </Row>
-          <div style={{ marginBottom: 4, color: '#666' }}>
+          <div style={{ marginBottom: 8, color: '#64748b', fontSize: 14 }}>
             {quota.storage.used_gb.toFixed(2)} / {quota.storage.limit_gb} GB
           </div>
           <Progress
             percent={Math.round((quota.storage.used_gb / quota.storage.limit_gb) * 100)}
-            status={getProgressStatus(quota.storage.status)}
+            strokeColor={getProgressColor(quota.storage.status)}
+            trailColor="#f1f5f9"
           />
         </div>
       </Space>
diff --git a/apps/web/src/components/business/business.css b/apps/web/src/components/business/business.css
new file mode 100644
index 000000000..4bd15b81f
--- /dev/null
+++ b/apps/web/src/components/business/business.css
@@ -0,0 +1,345 @@
+/* V21 业务组件统一样式 */
+
+/* ==================== 按钮 ==================== */
+.xx-primary-btn {
+  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 14px !important;
+  padding: 10px 20px !important;
+  font-weight: 600 !important;
+  box-shadow: 0 14px 26px rgba(79,70,229,0.22) !important;
+  transition: all 0.2s !important;
+  cursor: pointer;
+  height: auto !important;
+}
+
+.xx-primary-btn:hover {
+  box-shadow: 0 18px 34px rgba(79,70,229,0.28) !important;
+  transform: translateY(-1px);
+}
+
+.xx-ghost-btn {
+  background: transparent !important;
+  color: #4f46e5 !important;
+  border: 2px solid #4f46e5 !important;
+  border-radius: 14px !important;
+  padding: 8px 18px !important;
+  font-weight: 600 !important;
+  transition: all 0.2s !important;
+  cursor: pointer;
+  height: auto !important;
+}
+
+.xx-ghost-btn:hover {
+  background: #eef2ff !important;
+}
+
+/* ==================== 卡片 ==================== */
+.xx-card {
+  background: rgba(255,255,255,0.94);
+  border: 1px solid rgba(226,232,240,0.95);
+  border-radius: 22px;
+  box-shadow: 0 24px 70px rgba(15,23,42,0.09);
+  padding: 24px;
+  margin-bottom: 20px;
+  transition: all 0.25s;
+}
+
+.xx-card:hover {
+  box-shadow: 0 26px 64px rgba(15,23,42,0.14);
+  transform: translateY(-2px);
+}
+
+/* ==================== 页面结构 ==================== */
+.xx-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.xx-page-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 18px;
+  margin-bottom: 28px;
+}
+
+.xx-page-head h2 {
+  font-size: 26px;
+  font-weight: 850;
+  color: #0f172a;
+  margin: 0 0 8px;
+}
+
+.xx-page-head p {
+  font-size: 14px;
+  color: #64748b;
+  margin: 0;
+}
+
+/* ==================== 表格样式 ==================== */
+.xx-table-card {
+  background: rgba(255,255,255,0.94);
+  border: 1px solid rgba(226,232,240,0.95);
+  border-radius: 22px;
+  box-shadow: 0 24px 70px rgba(15,23,42,0.09);
+  padding: 20px;
+  overflow: hidden;
+}
+
+.xx-table-wrapper {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+/* ==================== 标签/Tag ==================== */
+.xx-tag {
+  padding: 4px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.xx-tag-indigo {
+  background: #eef2ff;
+  color: #4f46e5;
+  border: 1px solid #c7d2fe;
+}
+
+.xx-tag-success {
+  background: #f0fdf4;
+  color: #16a34a;
+  border: 1px solid #bbf7d0;
+}
+
+.xx-tag-warning {
+  background: #fffbeb;
+  color: #d97706;
+  border: 1px solid #fde68a;
+}
+
+.xx-tag-error {
+  background: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+}
+
+/* ==================== 搜索栏 ==================== */
+.xx-search-bar {
+  margin-bottom: 20px;
+}
+
+.xx-search-input {
+  width: 100%;
+  padding: 12px 18px;
+  border: 2px solid #e2e8f0;
+  border-radius: 14px;
+  font-size: 14px;
+  background: white;
+  transition: all 0.2s;
+  outline: none;
+}
+
+.xx-search-input:focus {
+  border-color: #4f46e5;
+  box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
+}
+
+/* ==================== Modal ==================== */
+.xx-modal .ant-modal-content {
+  border-radius: 22px;
+  padding: 24px;
+}
+
+.xx-modal .ant-modal-header {
+  border-radius: 22px 22px 0 0;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.xx-modal .ant-modal-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.xx-modal .ant-modal-footer {
+  border-top: 1px solid #e2e8f0;
+  padding: 16px 24px;
+}
+
+/* ==================== 空状态 ==================== */
+.xx-empty-state {
+  text-align: center;
+  padding: 48px 24px;
+  color: #64748b;
+}
+
+.xx-empty-state-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+/* ==================== 网格布局 ==================== */
+.xx-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+
+.xx-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+.xx-grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+@media (max-width: 768px) {
+  .xx-grid-2, .xx-grid-3, .xx-grid-4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ==================== 配额展示 ==================== */
+.xx-quota-item {
+  padding: 20px;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  transition: all 0.2s;
+}
+
+.xx-quota-item:hover {
+  border-color: #4f46e5;
+  box-shadow: 0 8px 24px rgba(79,70,229,0.1);
+}
+
+/* ==================== Ant Design 覆盖样式 ==================== */
+.ant-table-wrapper .ant-table-thead > tr > th {
+  background: #f8fafc !important;
+  font-weight: 700 !important;
+  color: #0f172a !important;
+  border-bottom: 2px solid #e2e8f0 !important;
+  padding: 14px 16px !important;
+}
+
+.ant-table-wrapper .ant-table-tbody > tr > td {
+  padding: 14px 16px !important;
+  border-bottom: 1px solid #f1f5f9 !important;
+}
+
+.ant-table-wrapper .ant-table-tbody > tr:hover > td {
+  background: #fafbfc !important;
+}
+
+.ant-card {
+  border-radius: 22px !important;
+  border: 1px solid rgba(226,232,240,0.95) !important;
+}
+
+.ant-card-head {
+  border-bottom: 1px solid #e2e8f0 !important;
+  min-height: 52px !important;
+  padding: 0 24px !important;
+}
+
+.ant-card-head-title {
+  font-weight: 700 !important;
+  font-size: 16px !important;
+  color: #0f172a !important;
+}
+
+.ant-card-body {
+  padding: 20px 24px !important;
+}
+
+.ant-modal-content {
+  border-radius: 22px !important;
+  overflow: hidden;
+}
+
+.ant-modal-header {
+  padding: 20px 24px !important;
+  background: white !important;
+}
+
+.ant-modal-title {
+  font-weight: 700 !important;
+  font-size: 18px !important;
+  color: #0f172a !important;
+}
+
+.ant-modal-body {
+  padding: 24px !important;
+}
+
+.ant-modal-footer {
+  padding: 16px 24px !important;
+}
+
+.ant-btn-primary {
+  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
+  border: none !important;
+  border-radius: 14px !important;
+  box-shadow: 0 14px 26px rgba(79,70,229,0.22) !important;
+  height: auto !important;
+  padding: 10px 20px !important;
+  font-weight: 600 !important;
+}
+
+.ant-btn-primary:hover {
+  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
+  box-shadow: 0 18px 34px rgba(79,70,229,0.28) !important;
+  transform: translateY(-1px);
+}
+
+.ant-tag {
+  border-radius: 10px !important;
+  padding: 4px 12px !important;
+  font-weight: 500 !important;
+}
+
+.ant-select-selector {
+  border-radius: 14px !important;
+  border-color: #e2e8f0 !important;
+}
+
+.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
+  border-color: #4f46e5 !important;
+}
+
+.ant-select-focused .ant-select-selector {
+  border-color: #4f46e5 !important;
+  box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important;
+}
+
+.ant-input {
+  border-radius: 14px !important;
+  border-color: #e2e8f0 !important;
+  padding: 10px 14px !important;
+}
+
+.ant-input:hover {
+  border-color: #4f46e5 !important;
+}
+
+.ant-input:focus {
+  border-color: #4f46e5 !important;
+  box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important;
+}
+
+.ant-progress-inner {
+  background: #f1f5f9 !important;
+  border-radius: 10px !important;
+}
+
+.ant-progress-bg {
+  border-radius: 10px !important;
+}
diff --git a/apps/web/src/pages/workspace/ProjectTasks.css b/apps/web/src/pages/workspace/ProjectTasks.css
new file mode 100644
index 000000000..253efb84a
--- /dev/null
+++ b/apps/web/src/pages/workspace/ProjectTasks.css
@@ -0,0 +1,53 @@
+/* V21 项目任务中心页面 */
+.xx-project-tasks {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+/* 任务列表项 */
+.xx-task-item {
+  padding: 20px 0 !important;
+  border-bottom: 1px solid #f1f5f9 !important;
+  transition: all 0.2s;
+}
+
+.xx-task-item:last-child {
+  border-bottom: none !important;
+}
+
+.xx-task-item:hover {
+  background: #fafbfc;
+}
+
+/* 任务标题行 */
+.xx-task-title {
+  align-items: center;
+  gap: 10px;
+}
+
+.xx-task-type {
+  font-weight: 600;
+  color: #0f172a;
+  font-size: 15px;
+}
+
+/* 任务描述 */
+.xx-task-desc {
+  margin-top: 12px;
+}
+
+/* V21 标签 */
+.xx-tag {
+  padding: 4px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 500;
+  margin: 0 !important;
+}
+
+.xx-tag-indigo {
+  background: #eef2ff;
+  color: #4f46e5;
+  border: 1px solid #c7d2fe;
+}
diff --git a/apps/web/src/pages/workspace/ProjectTasks.tsx b/apps/web/src/pages/workspace/ProjectTasks.tsx
index 86a41de62..fbebb02c1 100644
--- a/apps/web/src/pages/workspace/ProjectTasks.tsx
+++ b/apps/web/src/pages/workspace/ProjectTasks.tsx
@@ -1,15 +1,20 @@
+/**
+ * 项目任务中心 - V21 UI
+ */
 import React from 'react';
 import { Alert, Button, Card, Empty, List, Progress, Space, Tag, Typography } from 'antd';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import { getProjectTasks, retryProjectTask } from '@/api/tasks';
+import '@/components/business/business.css';
+import './ProjectTasks.css';
 
 const statusMap: Record<string, { label: string; color: string }> = {
   pending: { label: '排队中', color: 'default' },
-  processing: { label: '处理中', color: 'blue' },
-  running: { label: '运行中', color: 'blue' },
-  completed: { label: '已完成', color: 'green' },
-  failed: { label: '失败', color: 'red' },
+  processing: { label: '处理中', color: 'processing' },
+  running: { label: '运行中', color: 'processing' },
+  completed: { label: '已完成', color: 'success' },
+  failed: { label: '失败', color: 'error' },
   cancelled: { label: '已取消', color: 'default' },
 };
 
@@ -31,49 +36,83 @@ const ProjectTasks: React.FC = () => {
   });
 
   const retryMutation = useMutation({
-    mutationFn: ({ taskType, sourceId }: { taskType: string; sourceId: string }) => retryProjectTask(taskType, sourceId),
+    mutationFn: ({ taskType, sourceId }: { taskType: string; sourceId: string }) =>
+      retryProjectTask(taskType, sourceId),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['project-tasks', projectId] }),
   });
 
   return (
-    <div style={{ padding: 24 }}>
-      <Card title="项目任务中心" extra={<Button onClick={() => tasksQuery.refetch()}>刷新</Button>}>
-        {tasksQuery.isError && <Alert style={{ marginBottom: 16 }} type="error" showIcon message="任务列表加载失败" />}
+    <div className="xx-project-tasks">
+      <div className="xx-page-head">
+        <div>
+          <h2>任务中心</h2>
+          <p>查看和管理项目中的所有任务</p>
+        </div>
+        <Button className="xx-ghost-btn" onClick={() => tasksQuery.refetch()}>
+          刷新
+        </Button>
+      </div>
+
+      <div className="xx-card">
+        {tasksQuery.isError && (
+          <Alert style={{ marginBottom: 16 }} type="error" showIcon message="任务列表加载失败" />
+        )}
         {tasksQuery.data?.some((task) => task.retryable) && (
           <Alert
             style={{ marginBottom: 16 }}
             type="warning"
             showIcon
             message="部分任务可重试"
-            description="失败任务可通过“重试”重新排队；系统会保留原始失败原因方便排查。"
+            description="失败任务可通过"重试"重新排队；系统会保留原始失败原因方便排查。"
           />
         )}
         <List
           loading={tasksQuery.isLoading}
           dataSource={tasksQuery.data || []}
-          locale={{ emptyText: <Empty description="暂无任务，上传素材或发起生成后会出现在这里" /> }}
+          locale={{
+            emptyText: (
+              <div className="xx-empty-state">
+                <div className="xx-empty-state-icon">📋</div>
+                <p>暂无任务，上传素材或发起生成后会出现在这里</p>
+              </div>
+            ),
+          }}
           renderItem={(task) => {
             const status = statusMap[task.status] || { label: task.status, color: 'default' };
             return (
-              <List.Item>
+              <List.Item className="xx-task-item">
                 <List.Item.Meta
                   title={
-                    <Space wrap>
-                      <Typography.Text>{taskTypeLabels[task.task_type] || task.task_type}</Typography.Text>
-                      <Tag color={status.color}>{status.label}</Tag>
-                      <Tag>{task.current_step}</Tag>
-                      {task.retryable ? (
-                        <Button size="small" loading={retryMutation.isPending} onClick={() => retryMutation.mutate({ taskType: task.task_type, sourceId: task.source_id })}>
+                    <Space wrap className="xx-task-title">
+                      <span className="xx-task-type">{taskTypeLabels[task.task_type] || task.task_type}</span>
+                      <Tag color={status.color} className="xx-tag">{status.label}</Tag>
+                      <Tag className="xx-tag xx-tag-indigo">{task.current_step}</Tag>
+                      {task.retryable && (
+                        <Button
+                          size="small"
+                          className="xx-ghost-btn"
+                          loading={retryMutation.isPending}
+                          onClick={() =>
+                            retryMutation.mutate({ taskType: task.task_type, sourceId: task.source_id })
+                          }
+                        >
                           重试
                         </Button>
-                      ) : null}
+                      )}
                     </Space>
                   }
                   description={
-                    <Space direction="vertical" style={{ width: '100%' }}>
-                      <Progress percent={Math.round(task.progress || 0)} size="small" status={task.status === 'failed' ? 'exception' : undefined} />
-                      {task.user_message ? <Typography.Text type="danger">{task.user_message}</Typography.Text> : null}
-                      <Typography.Text type="secondary" copyable>
+                    <Space direction="vertical" style={{ width: '100%' }} className="xx-task-desc">
+                      <Progress
+                        percent={Math.round(task.progress || 0)}
+                        size="small"
+                        status={task.status === 'failed' ? 'exception' : undefined}
+                        strokeColor={task.status === 'failed' ? '#ef4444' : '#4f46e5'}
+                      />
+                      {task.user_message ? (
+                        <Typography.Text type="danger">{task.user_message}</Typography.Text>
+                      ) : null}
+                      <Typography.Text type="secondary" copyable style={{ fontSize: 12 }}>
                         任务 ID：{task.source_id}
                       </Typography.Text>
                     </Space>
@@ -83,7 +122,7 @@ const ProjectTasks: React.FC = () => {
             );
           }}
         />
-      </Card>
+      </div>
     </div>
   );
 };
diff --git a/apps/web/src/pages/workspace/WorkspaceDetail.tsx b/apps/web/src/pages/workspace/WorkspaceDetail.tsx
index 6ac291b06..0d95e4cc6 100644
--- a/apps/web/src/pages/workspace/WorkspaceDetail.tsx
+++ b/apps/web/src/pages/workspace/WorkspaceDetail.tsx
@@ -1,5 +1,5 @@
 /**
- * 工作空间详情页面
+ * 工作空间详情页面 - V21 UI
  */
 import React, { useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
@@ -11,6 +11,7 @@ import { createProject, getProjects } from '@/api/projects';
 import MemberList from '@/components/business/MemberList';
 import InviteMemberModal from '@/components/business/InviteMemberModal';
 import PermissionMatrix from '@/components/business/PermissionMatrix';
+import '@/components/business/business.css';
 
 const WorkspaceDetail: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -50,20 +51,20 @@ const WorkspaceDetail: React.FC = () => {
     });
   };
 
-  if (isLoading) return <div>加载中...</div>;
-  if (!workspace) return <div>工作空间不存在</div>;
+  if (isLoading) return <div className="xx-page"><div className="xx-card" style={{textAlign: 'center', padding: '40px'}}>加载中...</div></div>;
+  if (!workspace) return <div className="xx-page"><div className="xx-card" style={{textAlign: 'center', padding: '40px'}}>工作空间不存在</div></div>;
 
   const items = [
     {
       key: 'overview',
       label: '概览',
       children: (
-        <div>
+        <div className="xx-workspace-overview">
           <Card
             title="工作空间信息"
-            style={{ marginBottom: 16 }}
+            className="xx-card"
             extra={
-              <Button type="primary" onClick={() => setCreateProjectOpen(true)}>
+              <Button type="primary" className="xx-primary-btn" onClick={() => setCreateProjectOpen(true)}>
                 创建项目
               </Button>
             }
@@ -80,7 +81,7 @@ const WorkspaceDetail: React.FC = () => {
             </Descriptions>
           </Card>
 
-          <Card title="项目" style={{ marginBottom: 16 }}>
+          <Card title="项目列表" className="xx-card">
             {projectsQuery.isError && (
               <Alert type="error" showIcon message="项目列表加载失败" style={{ marginBottom: 16 }} />
             )}
@@ -131,18 +132,25 @@ const WorkspaceDetail: React.FC = () => {
         </>
       ),
       children: (
-        <div>
-          <div style={{ marginBottom: 16 }}>
+        <div className="xx-members-section">
+          <div className="xx-page-head" style={{marginBottom: 20}}>
+            <div>
+              <h3 style={{margin: 0, fontSize: 18, fontWeight: 700, color: '#0f172a'}}>工作空间成员</h3>
+              <p style={{margin: '4px 0 0', fontSize: 14, color: '#64748b'}}>管理有权访问此工作空间的成员</p>
+            </div>
             <Button
               type="primary"
+              className="xx-primary-btn"
               icon={<PlusOutlined />}
               onClick={() => setInviteModalOpen(true)}
             >
               邀请成员
             </Button>
           </div>
-          <MemberList workspaceId={id!} />
-          <div style={{ marginTop: 24 }}>
+          <div className="xx-card">
+            <MemberList workspaceId={id!} />
+          </div>
+          <div style={{marginTop: 24}}>
             <PermissionMatrix />
           </div>
         </div>
@@ -151,13 +159,18 @@ const WorkspaceDetail: React.FC = () => {
     {
       key: 'settings',
       label: '设置',
-      children: <div>工作空间设置（待开发）</div>,
+      children: <div className="xx-card"><p style={{color: '#64748b'}}>工作空间设置（待开发）</p></div>,
     },
   ];
 
   return (
-    <div>
-      <h1>{workspace.name}</h1>
+    <div className="xx-page">
+      <div className="xx-page-head">
+        <div>
+          <h1 style={{margin: 0, fontSize: 28, fontWeight: 850, color: '#0f172a'}}>{workspace.name}</h1>
+          <p style={{margin: '8px 0 0', fontSize: 14, color: '#64748b'}}>工作空间详情与成员管理</p>
+        </div>
+      </div>
       <Tabs items={items} />
       <Modal
         title="创建项目"
@@ -167,6 +180,7 @@ const WorkspaceDetail: React.FC = () => {
         confirmLoading={createProjectMutation.isPending}
         onOk={handleCreateProject}
         onCancel={() => setCreateProjectOpen(false)}
+        className="xx-modal"
       >
         <Form form={projectForm} layout="vertical" preserve={false}>
           <Form.Item