feat(theme): Add comprehensive theming system with theme context and table styling

- Implement ThemeContext and ThemeProvider for global theme management
- Add ThemeSwitcher component to toggle between light and dark themes
- Create centralized theme configuration with tokens and table-specific styles
- Add themed CSS variables for consistent styling across components
- Implement MinimalDocumentTable with minimal styling (horizontal lines only)
- Update DocumentManagement component with new themed styles and improved download handling
- Add DocumentManagement.css with CSS variable-based theme support
- Update EditorPanel and DocumentViewer components for theme compatibility
- Add comprehensive examples (MinimalTableExample, ThemeExample, TestMinimalStyle)
- Improve file download behavior using native browser download instead of window.open
- Support both light and dark theme variants with accessible color schemes

src/components/DocumentManagement/DocumentManagement.css

@@ -0,0 +1,205 @@
+/**
+ * Document Management Themed Styles
+ * 文档管理组件的主题化样式
+ * 
+ * 使用 CSS 变量实现主题切换，变量由 ThemeProvider 注入到 :root
+ */
+
+/* 表格容器 */
+.document-management-table {
+  font-family: var(--table-font-family);
+}
+
+/* Ant Design Table 覆盖样式 */
+.document-management-table .ant-table {
+  border-radius: var(--table-border-radius);
+  box-shadow: var(--table-box-shadow);
+  font-size: var(--table-body-font-size);
+  line-height: var(--table-line-height);
+}
+
+/* 表格边框 */
+.document-management-table .ant-table-container {
+  border: var(--table-border-width) solid var(--table-border-color);
+  border-radius: var(--table-border-radius);
+}
+
+/* ============================================
+   图二风格：移除竖线（当使用 minimal 主题时）
+   ============================================ */
+
+/* 移除所有单元格的右边框（竖线） */
+.document-management-table .ant-table-thead > tr > th,
+.document-management-table .ant-table-tbody > tr > td {
+  border-right: none !important;
+}
+
+/* 移除表头单元格之间的分隔线 */
+.document-management-table .ant-table-thead > tr > th::before {
+  display: none !important;
+}
+
+/* 移除表格容器的左右边框 */
+.document-management-table .ant-table-container {
+  border-left: none !important;
+  border-right: none !important;
+}
+
+/* 只保留横线边框 */
+.document-management-table .ant-table-wrapper {
+  border-top: var(--table-border-width) solid var(--table-border-color);
+  border-bottom: var(--table-border-width) solid var(--table-border-color);
+  border-left: none;
+  border-right: none;
+}
+
+/* 移除表格内部的竖线 */
+.document-management-table .ant-table-cell {
+  border-right: none !important;
+}
+
+/* 移除固定列的边框和阴影 */
+.document-management-table .ant-table-cell-fix-left,
+.document-management-table .ant-table-cell-fix-right {
+  border-right: none !important;
+  box-shadow: none !important;
+}
+
+/* 移除固定列分隔阴影 */
+.document-management-table .ant-table-ping-left .ant-table-cell-fix-left-last::after,
+.document-management-table .ant-table-ping-right .ant-table-cell-fix-right-first::after {
+  box-shadow: none !important;
+}
+
+/* ============================================
+   END 图二风格
+   ============================================ */
+
+/* 表头样式 */
+.document-management-table .ant-table-thead > tr > th {
+  background-color: var(--table-header-bg) !important;
+  color: var(--table-header-text) !important;
+  font-size: var(--table-header-font-size) !important;
+  font-weight: var(--table-header-font-weight) !important;
+  padding: var(--table-cell-padding-y) var(--table-cell-padding-x) !important;
+  height: var(--table-header-height);
+  border-bottom: calc(var(--table-border-width) * 2) solid var(--table-border-color) !important;
+}
+
+/* 表头边框 */
+.document-management-table .ant-table-thead > tr > th::before {
+  background-color: var(--table-border-color) !important;
+}
+
+/* 表格行样式 */
+.document-management-table .ant-table-tbody > tr {
+  background-color: var(--table-row-bg);
+  min-height: var(--table-min-row-height);
+  transition: var(--table-hover-transition);
+}
+
+/* 交替行背景（斑马纹） */
+.document-management-table .ant-table-tbody > tr:nth-child(even) {
+  background-color: var(--table-row-bg-alt);
+}
+
+/* 行悬停效果 */
+.document-management-table .ant-table-tbody > tr:hover > td {
+  background-color: var(--table-row-hover) !important;
+}
+
+/* 选中行样式 */
+.document-management-table .ant-table-tbody > tr.ant-table-row-selected > td {
+  background-color: var(--table-row-selected) !important;
+}
+
+/* 单元格样式 */
+.document-management-table .ant-table-tbody > tr > td {
+  color: var(--table-cell-text);
+  padding: var(--table-cell-padding-y) var(--table-cell-padding-x) !important;
+  border-bottom: var(--table-border-width) solid var(--table-border-color) !important;
+  font-size: var(--table-body-font-size);
+}
+
+/* 单元格内文字样式 */
+.document-management-table .ant-typography {
+  color: inherit;
+  font-size: inherit;
+}
+
+/* 次要文字颜色 */
+.document-management-table .ant-typography-secondary {
+  color: var(--table-text-secondary) !important;
+}
+
+/* 代码标签样式 */
+.document-management-table .ant-typography code {
+  font-size: var(--table-small-font-size) !important;
+}
+
+/* 标签样式 */
+.document-management-table .ant-tag {
+  font-size: var(--table-small-font-size) !important;
+}
+
+/* 操作按钮间距 */
+.document-management-table .ant-space-item {
+  margin-right: var(--table-action-spacing) !important;
+}
+
+.document-management-table .ant-space-item:last-child {
+  margin-right: 0 !important;
+}
+
+/* 操作按钮颜色 */
+.document-management-table .ant-btn-text:not(.ant-btn-dangerous) {
+  color: var(--table-action-primary);
+}
+
+.document-management-table .ant-btn-text:not(.ant-btn-dangerous):hover {
+  color: var(--table-action-primary);
+  opacity: 0.8;
+}
+
+.document-management-table .ant-btn-dangerous {
+  color: var(--table-action-danger) !important;
+}
+
+.document-management-table .ant-btn-dangerous:hover {
+  color: var(--table-action-danger) !important;
+  opacity: 0.8;
+}
+
+/* 分页器样式 */
+.document-management-table .ant-pagination {
+  margin-top: var(--table-margin);
+  font-size: var(--table-body-font-size);
+}
+
+/* 加载状态 */
+.document-management-table .ant-spin {
+  color: var(--table-action-primary);
+}
+
+/* 空状态 */
+.document-management-table .ant-empty-description {
+  color: var(--table-text-secondary);
+  font-size: var(--table-body-font-size);
+}
+
+/* 固定列阴影 */
+.document-management-table .ant-table-cell-fix-right {
+  background-color: inherit !important;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 768px) {
+  .document-management-table .ant-table-thead > tr > th,
+  .document-management-table .ant-table-tbody > tr > td {
+    padding: calc(var(--table-cell-padding-y) * 0.75) calc(var(--table-cell-padding-x) * 0.75) !important;
+  }
+  
+  .document-management-table .ant-table {
+    font-size: calc(var(--table-body-font-size) * 0.9);
+  }
+}

src/components/DocumentManagement/DocumentManagement.tsx

@@ -10,6 +10,7 @@
  */
 
 import React, { useState, useEffect, useCallback } from 'react';
+import './DocumentManagement.css';
 import {
   Card,
   Table,
@@ -142,11 +143,27 @@ export const DocumentManagement: React.FC<DocumentManagementProps> = ({
         message.warning(result.warning, 5);
       }
 
-      // The downloadUrl is now properly formatted with base URL in the service
+      // 直接触发浏览器下载，而不是在新标签页打开
       if (result.downloadUrl) {
-        window.open(result.downloadUrl, '_blank');
+        // 创建隐藏的 a 标签来触发下载
+        const link = document.createElement('a');
+        link.href = result.downloadUrl;
+        link.download = result.fileName; // 设置下载文件名
+        link.style.display = 'none';
+        
+        // 添加到 DOM，触发点击，然后移除
+        document.body.appendChild(link);
+        link.click();
+        
+        // 延迟移除，确保下载开始
+        setTimeout(() => {
+          document.body.removeChild(link);
+        }, 100);
+        
+        console.log('[DocumentManagement] Word 文档下载已触发:', result.fileName);
       }
     } catch (error) {
+      console.error('[DocumentManagement] 导出失败:', error);
       message.error('导出失败: ' + (error instanceof Error ? error.message : '未知错误'));
     } finally {
       setExporting((prev) => ({ ...prev, [documentId]: false }));
@@ -304,21 +321,82 @@ export const DocumentManagement: React.FC<DocumentManagementProps> = ({
       )}
 
       {/* Table */}
-      <Table
-        columns={columns}
-        dataSource={documents}
-        rowKey="id"
-        loading={loading}
-        pagination={{
-          current: currentPage,
-          pageSize,
-          total,
-          showSizeChanger: false,
-          showTotal: (total) => `共 ${total} 个文档`,
-          onChange: (page) => setCurrentPage(page),
-        }}
-        scroll={{ x: 900 }}
-      />
+      <div className="document-management-table">
+        {/* 内联样式 - 强制移除竖线 */}
+        <style>{`
+          /* 移除所有竖线 - 最高优先级 */
+          .document-management-table .ant-table-thead > tr > th,
+          .document-management-table .ant-table-tbody > tr > td,
+          .document-management-table .ant-table-cell {
+            border-right: none !important;
+            border-left: none !important;
+          }
+          
+          /* 移除表头分隔线 */
+          .document-management-table .ant-table-thead > tr > th::before {
+            display: none !important;
+            width: 0 !important;
+            background: transparent !important;
+          }
+          
+          /* 移除容器边框 */
+          .document-management-table .ant-table-container {
+            border-left: none !important;
+            border-right: none !important;
+          }
+          
+          /* 移除固定列样式 */
+          .document-management-table .ant-table-cell-fix-left,
+          .document-management-table .ant-table-cell-fix-right {
+            border-right: none !important;
+            box-shadow: none !important;
+          }
+          
+          /* 移除固定列阴影 */
+          .document-management-table .ant-table-ping-left .ant-table-cell-fix-left-last::after,
+          .document-management-table .ant-table-ping-right .ant-table-cell-fix-right-first::after {
+            box-shadow: none !important;
+            display: none !important;
+          }
+          
+          /* 表格整体只保留横线 */
+          .document-management-table .ant-table-wrapper {
+            border-left: none !important;
+            border-right: none !important;
+          }
+          
+          /* 确保表格内部没有竖线 */
+          .document-management-table .ant-table {
+            border-left: none !important;
+            border-right: none !important;
+          }
+          
+          .document-management-table .ant-table table {
+            border-collapse: collapse !important;
+          }
+          
+          .document-management-table .ant-table-thead > tr > th,
+          .document-management-table .ant-table-tbody > tr > td {
+            border-left: 0 !important;
+            border-right: 0 !important;
+          }
+        `}</style>
+        <Table
+          columns={columns}
+          dataSource={documents}
+          rowKey="id"
+          loading={loading}
+          pagination={{
+            current: currentPage,
+            pageSize,
+            total,
+            showSizeChanger: false,
+            showTotal: (total) => `共 ${total} 个文档`,
+            onChange: (page) => setCurrentPage(page),
+          }}
+          scroll={{ x: 900 }}
+        />
+      </div>
 
       {/* View Document Modal */}
       <Modal

src/components/DocumentManagement/MinimalDocumentTable.tsx

@@ -0,0 +1,181 @@
+/**
+ * Minimal Document Table Component
+ * 简洁文档表格组件 
+ */
+
+import React from 'react';
+import './MinimalTable.css';
+import { Table, Typography } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+
+const { Text, Paragraph } = Typography;
+
+/**
+ * 文档数据接口（简化版，适配图二的结构）
+ */
+interface DocumentRow {
+  key: string;
+  category: string;         // 分类（如：设计单位、审核意见、审核人等）
+  content1: string;         // 第一列内容
+  content2: string;         // 第二列内容
+  content3: string;         // 第三列内容
+}
+
+interface MinimalDocumentTableProps {
+  /** 表格数据 */
+  dataSource: DocumentRow[];
+  /** 是否加载中 */
+  loading?: boolean;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 是否显示边框 */
+  bordered?: boolean;
+}
+
+/**
+ * 简洁文档表格组件
+ */
+export const MinimalDocumentTable: React.FC<MinimalDocumentTableProps> = ({
+  dataSource,
+  loading = false,
+  style,
+  bordered = false,
+}) => {
+  /**
+   * 表格列定义
+   */
+  const columns: ColumnsType<DocumentRow> = [
+    {
+      title: '设计单位',
+      dataIndex: 'category',
+      key: 'category',
+      width: '12%',
+      render: (text: string) => (
+        <Text style={{ fontSize: 13, fontWeight: 500 }}>
+          {text}
+        </Text>
+      ),
+    },
+    {
+      title: '东河采油气管理区（东河储气库分公司）油气藏地质研究所',
+      dataIndex: 'content1',
+      key: 'content1',
+      width: '29%',
+      render: (text: string) => (
+        <Paragraph
+          style={{
+            margin: 0,
+            fontSize: 13,
+            lineHeight: 1.75,
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          {text}
+        </Paragraph>
+      ),
+    },
+    {
+      title: '东河采油气管理区（东河储气库分公司）油气藏地质研究所',
+      dataIndex: 'content2',
+      key: 'content2',
+      width: '29%',
+      render: (text: string) => (
+        <Paragraph
+          style={{
+            margin: 0,
+            fontSize: 13,
+            lineHeight: 1.75,
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          {text}
+        </Paragraph>
+      ),
+    },
+    {
+      title: '东河采油气管理区（东河储气库分公司）油气藏地质研究所',
+      dataIndex: 'content3',
+      key: 'content3',
+      width: '29%',
+      render: (text: string) => (
+        <Paragraph
+          style={{
+            margin: 0,
+            fontSize: 13,
+            lineHeight: 1.75,
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          {text}
+        </Paragraph>
+      ),
+    },
+  ];
+
+  return (
+    <div className="minimal-table" style={style}>
+      <Table
+        columns={columns}
+        dataSource={dataSource}
+        loading={loading}
+        pagination={false}
+        bordered={bordered}
+        size="middle"
+        showHeader={true}
+        scroll={{ x: 'max-content' }}
+      />
+    </div>
+  );
+};
+
+/**
+ * 示例数据生成函数
+ */
+export const generateSampleData = (): DocumentRow[] => {
+  return [
+    {
+      key: '1',
+      category: '设计单位',
+      content1: '东河采油气管理区（东河储气库分公司）油气藏地质研究所',
+      content2: '东河采油气管理区（东河储气库分公司）油气藏地质研究所',
+      content3: '东河采油气管理区（东河储气库分公司）油气藏地质研究所',
+    },
+    {
+      key: '2',
+      category: '审核意见',
+      content1: '说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见；同时，如果对设计内容之外有相关要求，可以在这里强调一下。',
+      content2: '说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见；同时，如果对设计内容之外有相关要求，可以在这里强调一下。',
+      content3: '说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见；同时，如果对设计内容之外有相关要求，可以在这里强调一下。',
+    },
+    {
+      key: '3',
+      category: '审核人',
+      content1: '',
+      content2: '审核时间',
+      content3: '',
+    },
+    {
+      key: '4',
+      category: '审批意见',
+      content1: '说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见；同时，如果对设计内容之外有相关要求，可以在这里强调一下。',
+      content2: '说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见；同时，如果对设计内容之外有相关要求，可以在这里强调一下。',
+      content3: '说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见；同时，如果对设计内容之外有相关要求，可以在这里强调一下。',
+    },
+    {
+      key: '5',
+      category: '审批人',
+      content1: '',
+      content2: '审批时间',
+      content3: '',
+    },
+    {
+      key: '6',
+      category: '主管部门审核意见',
+      content1: '（需油气开发审批的保留三级审核部分，常规措施由采油气管理区二级审核）这里需要明确哪些井作下作业设计需要到油气开发部？',
+      content2: '（需油气开发审批的保留三级审核部分，常规措施由采油气管理区二级审核）这里需要明确哪些井作下作业设计需要到油气开发部？',
+      content3: '（需油气开发审批的保留三级审核部分，常规措施由采油气管理区二级审核）这里需要明确哪些井作下作业设计需要到油气开发部？',
+    },
+  ];
+};
+
+export default MinimalDocumentTable;

src/components/DocumentManagement/MinimalTable.css

@@ -0,0 +1,243 @@
+/**
+ * Minimal Table Styles 
+ * 简洁表格样式 - 只有横线，无竖线，紧凑布局
+ */
+
+/* 表格容器 */
+.minimal-table {
+  font-family: var(--table-font-family);
+  width: 100%;
+}
+
+/* 移除 Ant Design 默认的圆角和阴影 */
+.minimal-table .ant-table {
+  border-radius: 0;
+  box-shadow: none;
+  font-size: var(--table-body-font-size);
+  line-height: var(--table-line-height);
+}
+
+/* 移除表格容器边框和圆角 */
+.minimal-table .ant-table-container {
+  border: none !important;
+  border-radius: 0;
+}
+
+/* 表格边框 - 只保留顶部和底部 */
+.minimal-table .ant-table-container::before,
+.minimal-table .ant-table-container::after {
+  display: none;
+}
+
+/* 表格整体边框 */
+.minimal-table .ant-table-wrapper {
+  border-top: var(--table-border-width) solid var(--table-border-color);
+  border-bottom: var(--table-border-width) solid var(--table-border-color);
+}
+
+/* 表头样式 */
+.minimal-table .ant-table-thead > tr > th {
+  background-color: var(--table-header-bg) !important;
+  color: var(--table-header-text) !important;
+  font-size: var(--table-header-font-size) !important;
+  font-weight: var(--table-header-font-weight) !important;
+  padding: var(--table-cell-padding-y) var(--table-cell-padding-x) !important;
+  border-bottom: calc(var(--table-border-width) * 2) solid var(--table-border-color) !important;
+  border-right: none !important;
+  text-align: left;
+}
+
+/* 移除表头单元格之间的分隔线 */
+.minimal-table .ant-table-thead > tr > th::before {
+  display: none !important;
+}
+
+/* 移除表头排序图标附近的边框 */
+.minimal-table .ant-table-thead > tr > th.ant-table-column-has-sorters::before {
+  display: none !important;
+}
+
+/* 表格行样式 */
+.minimal-table .ant-table-tbody > tr {
+  background-color: var(--table-row-bg);
+  transition: var(--table-hover-transition);
+}
+
+/* 移除斑马纹效果 */
+.minimal-table .ant-table-tbody > tr:nth-child(even) {
+  background-color: var(--table-row-bg);
+}
+
+/* 行悬停效果 */
+.minimal-table .ant-table-tbody > tr:hover > td {
+  background-color: var(--table-row-hover) !important;
+}
+
+/* 单元格样式 */
+.minimal-table .ant-table-tbody > tr > td {
+  color: var(--table-cell-text);
+  padding: var(--table-cell-padding-y) var(--table-cell-padding-x) !important;
+  border-bottom: var(--table-border-width) solid var(--table-border-color) !important;
+  border-right: none !important;
+  font-size: var(--table-body-font-size);
+  vertical-align: top;
+  line-height: var(--table-line-height);
+}
+
+/* 最后一行不显示底部边框 */
+.minimal-table .ant-table-tbody > tr:last-child > td {
+  border-bottom: none !important;
+}
+
+/* 移除固定列的阴影效果 */
+.minimal-table .ant-table-cell-fix-left,
+.minimal-table .ant-table-cell-fix-right {
+  background-color: inherit !important;
+  box-shadow: none !important;
+}
+
+/* 单元格内文字样式 */
+.minimal-table .ant-typography {
+  color: inherit;
+  font-size: inherit;
+  margin-bottom: 0;
+}
+
+/* 次要文字颜色 */
+.minimal-table .ant-typography-secondary {
+  color: var(--table-text-secondary) !important;
+}
+
+/* 移除表格内部的所有竖线 */
+.minimal-table .ant-table-cell {
+  border-right: none !important;
+}
+
+/* 表格标题和内容的对齐 */
+.minimal-table .ant-table-thead > tr > th,
+.minimal-table .ant-table-tbody > tr > td {
+  text-align: left;
+}
+
+/* 标签样式 */
+.minimal-table .ant-tag {
+  font-size: var(--table-small-font-size) !important;
+  border: none;
+  margin: 0;
+}
+
+/* 代码样式 */
+.minimal-table .ant-typography code {
+  font-size: var(--table-small-font-size) !important;
+  background-color: var(--table-row-bg-alt);
+  border: var(--table-border-width) solid var(--table-border-color);
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+/* 按钮组样式 */
+.minimal-table .ant-space {
+  gap: var(--table-action-spacing) !important;
+}
+
+/* 操作按钮颜色 */
+.minimal-table .ant-btn-text:not(.ant-btn-dangerous) {
+  color: var(--table-action-primary);
+}
+
+.minimal-table .ant-btn-text:not(.ant-btn-dangerous):hover {
+  color: var(--table-action-primary);
+  background-color: var(--table-row-hover);
+}
+
+.minimal-table .ant-btn-dangerous {
+  color: var(--table-action-danger) !important;
+}
+
+.minimal-table .ant-btn-dangerous:hover {
+  color: var(--table-action-danger) !important;
+  background-color: rgba(239, 68, 68, 0.1);
+}
+
+/* 分页器样式 */
+.minimal-table .ant-pagination {
+  margin-top: var(--table-margin);
+  font-size: var(--table-body-font-size);
+}
+
+/* 加载状态 */
+.minimal-table .ant-spin {
+  color: var(--table-action-primary);
+}
+
+/* 空状态 */
+.minimal-table .ant-empty-description {
+  color: var(--table-text-secondary);
+  font-size: var(--table-body-font-size);
+}
+
+/* 多行文本样式 */
+.minimal-table .ant-table-cell p {
+  margin: 0;
+  line-height: var(--table-line-height);
+}
+
+/* 表格内容行高 */
+.minimal-table .ant-table-tbody > tr > td {
+  line-height: 1.75;
+}
+
+/* 紧凑显示 - 移除不必要的间距 */
+.minimal-table .ant-table-thead th.ant-table-column-sort {
+  padding-right: var(--table-cell-padding-x) !important;
+}
+
+/* 移除固定列阴影 */
+.minimal-table .ant-table-ping-left .ant-table-cell-fix-left-last::after,
+.minimal-table .ant-table-ping-right .ant-table-cell-fix-right-first::after {
+  box-shadow: none !important;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 768px) {
+  .minimal-table .ant-table-thead > tr > th,
+  .minimal-table .ant-table-tbody > tr > td {
+    padding: calc(var(--table-cell-padding-y) * 0.75) calc(var(--table-cell-padding-x) * 0.75) !important;
+  }
+  
+  .minimal-table .ant-table {
+    font-size: calc(var(--table-body-font-size) * 0.9);
+  }
+}
+
+/* 表格列宽度自适应 */
+.minimal-table .ant-table-tbody > tr > td:first-child,
+.minimal-table .ant-table-thead > tr > th:first-child {
+  min-width: 120px;
+}
+
+/* 确保长文本换行 */
+.minimal-table .ant-table-cell {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* 移除表格的外层边框线 */
+.minimal-table .ant-table-bordered .ant-table-container {
+  border: none !important;
+}
+
+/* 选中行样式 */
+.minimal-table .ant-table-tbody > tr.ant-table-row-selected > td {
+  background-color: var(--table-row-selected) !important;
+}
+
+/* Tooltip 样式 */
+.minimal-table .ant-tooltip {
+  font-size: var(--table-small-font-size);
+}
+
+/* Popconfirm 样式 */
+.minimal-table .ant-popconfirm {
+  font-size: var(--table-body-font-size);
+}

src/components/DocumentManagement/index.ts

@@ -1,2 +1,3 @@
 export { DocumentManagement } from './DocumentManagement';
+export { MinimalDocumentTable, generateSampleData } from './MinimalDocumentTable';
 export { DocumentManagement as default } from './DocumentManagement';

src/components/DocumentManagementLayout/DocumentManagementLayout.tsx

@@ -251,15 +251,30 @@ const DocumentManagementLayout: React.FC<DocumentManagementLayoutProps> = ({
       
       message.success(`导出成功: ${result.fileName}`);
       
-      // Open download URL in new tab
+      // 直接触发浏览器下载
       if (result.downloadUrl) {
         const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://192.168.0.195:8000';
         const fullUrl = result.downloadUrl.startsWith('http') 
           ? result.downloadUrl 
           : `${baseUrl}${result.downloadUrl}`;
-        window.open(fullUrl, '_blank');
+        
+        // 创建隐藏的 a 标签来触发下载
+        const link = document.createElement('a');
+        link.href = fullUrl;
+        link.download = result.fileName;
+        link.style.display = 'none';
+        
+        document.body.appendChild(link);
+        link.click();
+        
+        setTimeout(() => {
+          document.body.removeChild(link);
+        }, 100);
+        
+        console.log('[DocumentManagementLayout] Word 文档下载已触发:', result.fileName);
       }
     } catch (error) {
+      console.error('[DocumentManagementLayout] 导出失败:', error);
       message.error('导出失败: ' + (error instanceof Error ? error.message : '未知错误'));
     } finally {
       setLoading(false);
@@ -283,7 +298,22 @@ const DocumentManagementLayout: React.FC<DocumentManagementLayoutProps> = ({
     if (selectedRecordId) {
       const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://192.168.0.195:8000';
       const downloadUrl = `${baseUrl}/api/v1/export/records/${selectedRecordId}/download?userId=${encodeURIComponent(userId)}`;
-      window.open(downloadUrl, '_blank');
+      
+      // 创建隐藏的 a 标签来触发下载
+      const link = document.createElement('a');
+      link.href = downloadUrl;
+      link.download = `document-${selectedRecordId}.docx`; // 默认文件名
+      link.style.display = 'none';
+      
+      document.body.appendChild(link);
+      link.click();
+      
+      setTimeout(() => {
+        document.body.removeChild(link);
+      }, 100);
+      
+      message.success('下载已开始');
+      console.log('[DocumentManagementLayout] 下载已触发:', downloadUrl);
     }
   }, [selectedRecordId, userId]);
 

src/components/DocumentViewer/DocumentViewer.tsx

@@ -202,14 +202,42 @@ export const DocumentViewer: React.FC<DocumentViewerProps> = ({
 
         return (
           <div key={block.id} id={block.id} style={{ marginBottom: '24px' }}>
-            <Table
-              columns={columns}
-              dataSource={dataSource}
-              pagination={false}
-              bordered
-              size="small"
-              style={{ fontSize: '13px' }}
-            />
+            {/* 内联样式 - 移除竖线 */}
+            <style>{`
+              /* 移除表格竖线 - 只保留横线 */
+              .document-viewer-table .ant-table-thead > tr > th,
+              .document-viewer-table .ant-table-tbody > tr > td {
+                border-right: none !important;
+                border-left: none !important;
+              }
+              
+              /* 移除表头分隔线 */
+              .document-viewer-table .ant-table-thead > tr > th::before {
+                display: none !important;
+              }
+              
+              /* 只保留横线 */
+              .document-viewer-table .ant-table-container {
+                border-left: none !important;
+                border-right: none !important;
+              }
+              
+              /* 表格整体样式 */
+              .document-viewer-table .ant-table {
+                border-left: none !important;
+                border-right: none !important;
+              }
+            `}</style>
+            <div className="document-viewer-table">
+              <Table
+                columns={columns}
+                dataSource={dataSource}
+                pagination={false}
+                bordered={false}
+                size="small"
+                style={{ fontSize: '13px' }}
+              />
+            </div>
           </div>
         );
       }

src/components/EditorPanel/EditorPanel.tsx

@@ -277,11 +277,27 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
       
       message.success(`导出成功: ${result.fileName}`);
       
-      // The downloadUrl is now properly formatted with base URL in the service
+      // 直接触发浏览器下载，而不是在新标签页打开
       if (result.downloadUrl) {
-        window.open(result.downloadUrl, '_blank');
+        // 创建隐藏的 a 标签来触发下载
+        const link = document.createElement('a');
+        link.href = result.downloadUrl;
+        link.download = result.fileName; // 设置下载文件名
+        link.style.display = 'none';
+        
+        // 添加到 DOM，触发点击，然后移除
+        document.body.appendChild(link);
+        link.click();
+        
+        // 延迟移除，确保下载开始
+        setTimeout(() => {
+          document.body.removeChild(link);
+        }, 100);
+        
+        console.log('[EditorPanel] Word 文档下载已触发:', result.fileName);
       }
     } catch (error) {
+      console.error('[EditorPanel] 导出失败:', error);
       message.error('导出失败: ' + (error instanceof Error ? error.message : '未知错误'));
     } finally {
       setExporting(false);

src/components/EditorPanel/WYSIWYGEditor.css

@@ -83,12 +83,12 @@
   line-height: 1.8;
 }
 
-/* Tables - Simple black border style (like Word default) */
+/* Tables - Completely borderless (无边框) */
 .mdx-editor-content table {
   width: 100%;
   margin-bottom: 20px;
   border-collapse: collapse;
-  border: 1px solid #000000;
+  border: none;                     /* 移除所有边框 */
   font-size: 13px;
 }
 
@@ -99,7 +99,7 @@
 .mdx-editor-content th,
 .mdx-editor-content td {
   padding: 8px 12px;
-  border: 1px solid #000000;
+  border: none;                     /* 移除所有边框 */
   text-align: left;
   vertical-align: top;
 }
@@ -120,6 +120,30 @@
   background-color: transparent;
 }
 
+/* 隐藏表格编辑按钮 */
+.mdx-editor-content table button,
+.mdx-editor-content [role="button"],
+.mdx-editor-content [class*="tableColumnEditor"],
+.mdx-editor-content [class*="tableEditor"] button,
+.mdx-editor-content [class*="iconButton"] {
+  display: none !important;
+}
+
+/* 隐藏表格单元格中的编辑控件 */
+.mdx-editor-content th button,
+.mdx-editor-content td button {
+  display: none !important;
+}
+
+/* 隐藏表格上方和单元格中的所有按钮 */
+.mdx-editor-content table + button,
+.mdx-editor-content table button {
+  display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
 /* Blockquotes */
 .mdx-editor-content blockquote {
   margin: 16px 0;

src/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -0,0 +1,102 @@
+/**
+ * Theme Switcher Component
+ * 主题切换器组件 - 提供主题切换的 UI 控件
+ */
+
+import React from 'react';
+import { Select, Space, Typography } from 'antd';
+import { BgColorsOutlined } from '@ant-design/icons';
+import { useTheme } from '../../theme';
+import type { TableThemeType } from '../../theme';
+
+const { Text } = Typography;
+
+/**
+ * 主题显示名称映射
+ */
+const themeNames: Record<TableThemeType, string> = {
+  default: '默认主题',
+  dark: '暗色主题',
+  compact: '紧凑主题',
+  comfortable: '宽松主题',
+  minimal: '简洁主题',
+};
+
+/**
+ * 主题描述映射
+ */
+const themeDescriptions: Record<TableThemeType, string> = {
+  default: '标准的亮色主题，适合日常使用',
+  dark: '深色背景主题，护眼且现代',
+  compact: '紧凑布局，适合显示更多内容',
+  comfortable: '宽松布局，适合长时间阅读',
+  minimal: '简洁布局，只有横线无竖线',
+};
+
+interface ThemeSwitcherProps {
+  /** 是否显示为紧凑模式 */
+  compact?: boolean;
+  /** 是否显示描述 */
+  showDescription?: boolean;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+}
+
+/**
+ * 主题切换器组件
+ */
+export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({
+  compact = false,
+  showDescription = false,
+  style,
+}) => {
+  const { currentThemeType, setTheme, availableThemes } = useTheme();
+
+  const handleThemeChange = (value: TableThemeType) => {
+    setTheme(value);
+  };
+
+  if (compact) {
+    return (
+      <Select
+        value={currentThemeType}
+        onChange={handleThemeChange}
+        style={{ width: 120, ...style }}
+        size="small"
+      >
+        {availableThemes.map((theme) => (
+          <Select.Option key={theme} value={theme}>
+            {themeNames[theme]}
+          </Select.Option>
+        ))}
+      </Select>
+    );
+  }
+
+  return (
+    <Space direction="vertical" style={style}>
+      <Space>
+        <BgColorsOutlined />
+        <Text strong>主题设置</Text>
+      </Space>
+      <Select
+        value={currentThemeType}
+        onChange={handleThemeChange}
+        style={{ width: 200 }}
+      >
+        {availableThemes.map((theme) => (
+          <Select.Option key={theme} value={theme}>
+            {themeNames[theme]}
+          </Select.Option>
+        ))}
+      </Select>
+      {showDescription && (
+        <Text type="secondary" style={{ fontSize: 12 }}>
+          {themeDescriptions[currentThemeType]}
+        </Text>
+      )}
+    </Space>
+  );
+};
+
+export default ThemeSwitcher;

src/components/ThemeSwitcher/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Theme Switcher Module Entry
+ */
+
+export { ThemeSwitcher } from './ThemeSwitcher';
+export { default } from './ThemeSwitcher';

src/examples/MinimalTableExample.tsx

@@ -0,0 +1,189 @@
+/**
+ * Minimal Table Usage Example
+ * 简洁表格使用示例 - 展示图二风格的表格
+ */
+
+import React from 'react';
+import { Card, Space, Typography, Divider } from 'antd';
+import { ThemeProvider } from '../theme';
+import { ThemeSwitcher } from '../components/ThemeSwitcher';
+import { MinimalDocumentTable, generateSampleData } from '../components/DocumentManagement';
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * 基本使用示例
+ */
+export const BasicMinimalTableExample: React.FC = () => {
+  const sampleData = generateSampleData();
+
+  return (
+    <ThemeProvider initialTheme="minimal">
+      <div style={{ padding: 24, backgroundColor: '#f5f5f5', minHeight: '100vh' }}>
+        <Card>
+          <Space direction="vertical" style={{ width: '100%' }} size="large">
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <Title level={3}>简洁表格示例（图二风格）</Title>
+              <ThemeSwitcher compact />
+            </div>
+            
+            <Paragraph>
+              这是一个简洁的表格样式，特点：
+              <ul>
+                <li>只有横线，没有竖线</li>
+                <li>白色背景，清爽简洁</li>
+                <li>紧凑的布局</li>
+                <li>适合文档类内容展示</li>
+              </ul>
+            </Paragraph>
+
+            <Divider />
+
+            <MinimalDocumentTable dataSource={sampleData} />
+          </Space>
+        </Card>
+      </div>
+    </ThemeProvider>
+  );
+};
+
+/**
+ * 对比示例：展示不同主题下的表格效果
+ */
+export const ThemeComparisonMinimalExample: React.FC = () => {
+  const sampleData = generateSampleData();
+
+  return (
+    <div style={{ padding: 24, backgroundColor: '#f5f5f5' }}>
+      <Space direction="vertical" style={{ width: '100%' }} size="large">
+        <Title level={2}>表格主题对比</Title>
+
+        {/* Default 主题 */}
+        <Card title="默认主题（有网格线）">
+          <ThemeProvider initialTheme="default">
+            <MinimalDocumentTable dataSource={sampleData.slice(0, 3)} />
+          </ThemeProvider>
+        </Card>
+
+        {/* Minimal 主题 */}
+        <Card title="简洁主题（只有横线）- 图二风格">
+          <ThemeProvider initialTheme="minimal">
+            <MinimalDocumentTable dataSource={sampleData.slice(0, 3)} />
+          </ThemeProvider>
+        </Card>
+
+        {/* Compact 主题 */}
+        <Card title="紧凑主题">
+          <ThemeProvider initialTheme="compact">
+            <MinimalDocumentTable dataSource={sampleData.slice(0, 3)} />
+          </ThemeProvider>
+        </Card>
+      </Space>
+    </div>
+  );
+};
+
+/**
+ * 自定义数据示例
+ */
+export const CustomDataExample: React.FC = () => {
+  // 自定义数据
+  const customData = [
+    {
+      key: '1',
+      category: '设计单位',
+      content1: '东河采油气管理区（东河储气库分公司）油气藏地质研究所',
+      content2: '东河采油气管理区（东河储气库分公司）油气藏地质研究所',
+      content3: '东河采油气管理区（东河储气库分公司）油气藏地质研究所',
+    },
+    {
+      key: '2',
+      category: '审核意见',
+      content1: '说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见；同时，如果对设计内容之外有相关要求，可以在这里强调一下。',
+      content2: '说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见；同时，如果对设计内容之外有相关要求，可以在这里强调一下。',
+      content3: '说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见；同时，如果对设计内容之外有相关要求，可以在这里强调一下。',
+    },
+    {
+      key: '3',
+      category: '审核人',
+      content1: '',
+      content2: '审核时间',
+      content3: '',
+    },
+  ];
+
+  return (
+    <ThemeProvider initialTheme="minimal">
+      <div style={{ padding: 24 }}>
+        <Card>
+          <Space direction="vertical" style={{ width: '100%' }}>
+            <Title level={3}>自定义数据示例</Title>
+            <Text type="secondary">你可以根据实际需求定制数据结构</Text>
+            <Divider />
+            <MinimalDocumentTable dataSource={customData} />
+          </Space>
+        </Card>
+      </div>
+    </ThemeProvider>
+  );
+};
+
+/**
+ * 完整页面示例
+ */
+export const FullPageMinimalTableExample: React.FC = () => {
+  const sampleData = generateSampleData();
+
+  return (
+    <ThemeProvider initialTheme="minimal">
+      <div style={{ minHeight: '100vh', backgroundColor: '#ffffff' }}>
+        {/* 页面头部 */}
+        <div
+          style={{
+            padding: '16px 24px',
+            backgroundColor: '#ffffff',
+            borderBottom: '1px solid #d9d9d9',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <div>
+            <Title level={2} style={{ margin: 0 }}>
+              文档审核表
+            </Title>
+            <Text type="secondary">油气藏地质研究所审批流程</Text>
+          </div>
+          <ThemeSwitcher compact />
+        </div>
+
+        {/* 主内容区 */}
+        <div style={{ padding: '24px' }}>
+          <MinimalDocumentTable dataSource={sampleData} />
+        </div>
+
+        {/* 页脚 */}
+        <div
+          style={{
+            padding: '16px 24px',
+            textAlign: 'center',
+            borderTop: '1px solid #d9d9d9',
+            color: '#8c8c8c',
+            fontSize: 13,
+          }}
+        >
+          © 2024 东河采油气管理区 | 文档管理系统
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+};
+
+/**
+ * 默认导出完整示例
+ */
+const MinimalTableExampleApp: React.FC = () => {
+  return <FullPageMinimalTableExample />;
+};
+
+export default MinimalTableExampleApp;

src/examples/TestMinimalStyle.tsx

@@ -0,0 +1,247 @@
+/**
+ * Test Minimal Style
+ * 测试简洁风格（图二）是否生效
+ */
+
+import React from 'react';
+import { Card, Typography, Space, Divider } from 'antd';
+import { ThemeProvider } from '../theme';
+import { ThemeSwitcher } from '../components/ThemeSwitcher';
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * 测试页面 - 验证简洁风格
+ */
+export const TestMinimalStyle: React.FC = () => {
+  // 模拟数据
+  const testData = [
+    {
+      id: 'doc-001',
+      sessionId: 'sess-001-xxx',
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    },
+    {
+      id: 'doc-002',
+      sessionId: 'sess-002-xxx',
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    },
+    {
+      id: 'doc-003',
+      sessionId: 'sess-003-xxx',
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    },
+  ];
+
+  return (
+    <div style={{ padding: 24, backgroundColor: '#f5f5f5', minHeight: '100vh' }}>
+      <Card>
+        <Space direction="vertical" style={{ width: '100%' }} size="large">
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Title level={2}>简洁表格样式测试</Title>
+            <ThemeSwitcher compact />
+          </div>
+
+          <Divider />
+
+          <Paragraph>
+            <Text strong>测试说明：</Text>
+          </Paragraph>
+          <ul>
+            <li>切换到 <Text code>minimal</Text> 主题，表格应该只有横线，无竖线</li>
+            <li>切换到 <Text code>default</Text> 主题，表格应该有网格线</li>
+            <li>如果样式没有生效，请刷新页面或重启开发服务器</li>
+          </ul>
+
+          <Divider />
+
+          {/* 使用原生 table 来演示效果 */}
+          <div>
+            <Title level={4}>原生 HTML 表格（参考效果）</Title>
+            <table style={{
+              width: '100%',
+              borderCollapse: 'collapse',
+              borderTop: '1px solid #d9d9d9',
+              borderBottom: '1px solid #d9d9d9',
+            }}>
+              <thead>
+                <tr>
+                  <th style={{
+                    padding: '12px 16px',
+                    textAlign: 'left',
+                    backgroundColor: '#ffffff',
+                    borderBottom: '2px solid #d9d9d9',
+                    borderRight: 'none',
+                    fontWeight: 600,
+                  }}>设计单位</th>
+                  <th style={{
+                    padding: '12px 16px',
+                    textAlign: 'left',
+                    backgroundColor: '#ffffff',
+                    borderBottom: '2px solid #d9d9d9',
+                    borderRight: 'none',
+                    fontWeight: 600,
+                  }}>内容1</th>
+                  <th style={{
+                    padding: '12px 16px',
+                    textAlign: 'left',
+                    backgroundColor: '#ffffff',
+                    borderBottom: '2px solid #d9d9d9',
+                    borderRight: 'none',
+                    fontWeight: 600,
+                  }}>内容2</th>
+                  <th style={{
+                    padding: '12px 16px',
+                    textAlign: 'left',
+                    backgroundColor: '#ffffff',
+                    borderBottom: '2px solid #d9d9d9',
+                    borderRight: 'none',
+                    fontWeight: 600,
+                  }}>内容3</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}>设计单位</td>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}>东河采油气管理区（东河储气库分公司）油气藏地质研究所</td>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}>东河采油气管理区（东河储气库分公司）油气藏地质研究所</td>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}>东河采油气管理区（东河储气库分公司）油气藏地质研究所</td>
+                </tr>
+                <tr>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}>审核意见</td>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}>说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见...</td>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}>说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见...</td>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}>说明：审核人要明确确表达"同意或不同意"，不能只签名不签署意见...</td>
+                </tr>
+                <tr>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}>审核人</td>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}></td>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}>审核时间</td>
+                  <td style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #d9d9d9',
+                    borderRight: 'none',
+                  }}></td>
+                </tr>
+              </tbody>
+            </table>
+            <Text type="secondary" style={{ marginTop: 8, display: 'block' }}>
+              ☝️ 这是期望的效果：只有横线，没有竖线
+            </Text>
+          </div>
+
+          <Divider />
+
+          <div>
+            <Title level={4}>检查清单</Title>
+            <ol>
+              <li>
+                <Text strong>CSS 是否加载？</Text>
+                <Paragraph type="secondary">
+                  打开浏览器开发者工具 (F12) → Sources → 搜索 <Text code>DocumentManagement.css</Text>
+                </Paragraph>
+              </li>
+              <li>
+                <Text strong>CSS 变量是否生效？</Text>
+                <Paragraph type="secondary">
+                  开发者工具 → Console → 运行：
+                  <br />
+                  <Text code>getComputedStyle(document.documentElement).getPropertyValue('--table-border-color')</Text>
+                </Paragraph>
+              </li>
+              <li>
+                <Text strong>类名是否正确？</Text>
+                <Paragraph type="secondary">
+                  开发者工具 → Elements → 检查表格容器是否有 <Text code>document-management-table</Text> 类名
+                </Paragraph>
+              </li>
+              <li>
+                <Text strong>主题是否设置？</Text>
+                <Paragraph type="secondary">
+                  使用 ThemeSwitcher 切换到 <Text code>minimal</Text> 主题
+                </Paragraph>
+              </li>
+            </ol>
+          </div>
+
+          <Divider />
+
+          <div style={{
+            padding: 16,
+            backgroundColor: '#fff7e6',
+            border: '1px solid #ffd666',
+            borderRadius: 4,
+          }}>
+            <Text strong style={{ color: '#d46b08' }}>💡 重要提示：</Text>
+            <Paragraph style={{ marginTop: 8, marginBottom: 0 }}>
+              如果样式没有生效，请执行以下操作：<br />
+              1. <Text code>Ctrl + C</Text> 停止开发服务器<br />
+              2. <Text code>npm run dev</Text> 重新启动<br />
+              3. <Text code>Ctrl + Shift + R</Text> 强制刷新浏览器（清除缓存）
+            </Paragraph>
+          </div>
+        </Space>
+      </Card>
+    </div>
+  );
+};
+
+/**
+ * 在应用中使用的包装器
+ */
+export const TestMinimalStyleApp: React.FC = () => {
+  return (
+    <ThemeProvider initialTheme="minimal">
+      <TestMinimalStyle />
+    </ThemeProvider>
+  );
+};
+
+export default TestMinimalStyleApp;

src/examples/ThemeExample.tsx

@@ -0,0 +1,215 @@
+/**
+ * Theme System Usage Example
+ * 主题系统使用示例
+ * 
+ * 展示如何在应用中集成和使用主题系统
+ */
+
+import React from 'react';
+import { Card, Space, Divider, Typography, Row, Col } from 'antd';
+import { ThemeProvider } from '../theme';
+import { ThemeSwitcher } from '../components/ThemeSwitcher';
+import { DocumentManagement } from '../components/DocumentManagement';
+
+const { Title, Paragraph, Text } = Typography;
+
+/**
+ * 示例：基本用法
+ */
+export const BasicThemeExample: React.FC = () => {
+  return (
+    <ThemeProvider initialTheme="default">
+      <Space direction="vertical" style={{ width: '100%', padding: 24 }} size="large">
+        <Card>
+          <Space direction="vertical" size="middle">
+            <Title level={3}>主题系统示例</Title>
+            <Paragraph>
+              使用 <Text code>ThemeProvider</Text> 包裹应用，即可启用主题系统。
+            </Paragraph>
+            <ThemeSwitcher showDescription />
+          </Space>
+        </Card>
+
+        <Card title="文档管理表格">
+          <DocumentManagement userId="demo-user" />
+        </Card>
+      </Space>
+    </ThemeProvider>
+  );
+};
+
+/**
+ * 示例：紧凑主题切换器
+ */
+export const CompactSwitcherExample: React.FC = () => {
+  return (
+    <ThemeProvider>
+      <Card
+        title="文档管理"
+        extra={<ThemeSwitcher compact />}
+      >
+        <DocumentManagement userId="demo-user" pageSize={10} />
+      </Card>
+    </ThemeProvider>
+  );
+};
+
+/**
+ * 示例：多主题对比
+ */
+export const ThemeComparisonExample: React.FC = () => {
+  const themes: Array<{ key: string; name: string; type: 'default' | 'dark' | 'compact' | 'comfortable' }> = [
+    { key: 'default', name: '默认主题', type: 'default' },
+    { key: 'dark', name: '暗色主题', type: 'dark' },
+    { key: 'compact', name: '紧凑主题', type: 'compact' },
+    { key: 'comfortable', name: '宽松主题', type: 'comfortable' },
+  ];
+
+  return (
+    <Space direction="vertical" style={{ width: '100%', padding: 24 }} size="large">
+      <Title level={2}>主题对比</Title>
+      <Paragraph>
+        以下展示了所有可用主题的效果对比。
+      </Paragraph>
+
+      <Row gutter={[16, 16]}>
+        {themes.map((theme) => (
+          <Col span={12} key={theme.key}>
+            <ThemeProvider initialTheme={theme.type}>
+              <Card title={theme.name}>
+                <div style={{ height: 400, overflow: 'auto' }}>
+                  <DocumentManagement 
+                    userId="demo-user" 
+                    pageSize={5} 
+                    showSessionFilter={false}
+                  />
+                </div>
+              </Card>
+            </ThemeProvider>
+          </Col>
+        ))}
+      </Row>
+    </Space>
+  );
+};
+
+/**
+ * 示例：自定义样式与主题集成
+ */
+export const CustomStyledExample: React.FC = () => {
+  return (
+    <ThemeProvider>
+      <div style={{ padding: 24 }}>
+        <Card>
+          <Space direction="vertical" style={{ width: '100%' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <Title level={3}>自定义样式示例</Title>
+              <ThemeSwitcher compact />
+            </div>
+
+            <Divider />
+
+            {/* 使用 CSS 变量的自定义样式 */}
+            <div
+              style={{
+                backgroundColor: 'var(--table-row-bg)',
+                border: 'var(--table-border-width) solid var(--table-border-color)',
+                padding: 'var(--table-cell-padding-y) var(--table-cell-padding-x)',
+                borderRadius: 'var(--table-border-radius)',
+                color: 'var(--table-cell-text)',
+              }}
+            >
+              <Text>这个区块使用了主题的 CSS 变量</Text>
+            </div>
+
+            <Divider />
+
+            <DocumentManagement userId="demo-user" pageSize={8} />
+          </Space>
+        </Card>
+      </div>
+    </ThemeProvider>
+  );
+};
+
+/**
+ * 完整示例应用
+ */
+const ThemeExampleApp: React.FC = () => {
+  return (
+    <ThemeProvider>
+      <div style={{ minHeight: '100vh', backgroundColor: '#f0f2f5', padding: 24 }}>
+        <Space direction="vertical" style={{ width: '100%' }} size="large">
+          {/* 顶部栏 */}
+          <Card>
+            <Row justify="space-between" align="middle">
+              <Col>
+                <Title level={2} style={{ margin: 0 }}>文档管理系统</Title>
+              </Col>
+              <Col>
+                <Space>
+                  <Text>主题：</Text>
+                  <ThemeSwitcher compact />
+                </Space>
+              </Col>
+            </Row>
+          </Card>
+
+          {/* 主内容 */}
+          <Card>
+            <DocumentManagement 
+              userId="demo-user" 
+              showSessionFilter 
+              pageSize={20}
+            />
+          </Card>
+
+          {/* 统计卡片 */}
+          <Row gutter={16}>
+            <Col span={8}>
+              <Card
+                style={{
+                  backgroundColor: 'var(--table-header-bg)',
+                  borderColor: 'var(--table-border-color)',
+                }}
+              >
+                <Title level={4}>总文档数</Title>
+                <Title level={2} style={{ color: 'var(--table-action-primary)' }}>
+                  1,234
+                </Title>
+              </Card>
+            </Col>
+            <Col span={8}>
+              <Card
+                style={{
+                  backgroundColor: 'var(--table-header-bg)',
+                  borderColor: 'var(--table-border-color)',
+                }}
+              >
+                <Title level={4}>今日新增</Title>
+                <Title level={2} style={{ color: 'var(--table-action-primary)' }}>
+                  42
+                </Title>
+              </Card>
+            </Col>
+            <Col span={8}>
+              <Card
+                style={{
+                  backgroundColor: 'var(--table-header-bg)',
+                  borderColor: 'var(--table-border-color)',
+                }}
+              >
+                <Title level={4}>活跃会话</Title>
+                <Title level={2} style={{ color: 'var(--table-action-primary)' }}>
+                  89
+                </Title>
+              </Card>
+            </Col>
+          </Row>
+        </Space>
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default ThemeExampleApp;

src/theme/ThemeContext.tsx

@@ -0,0 +1,161 @@
+/**
+ * Theme Context and Provider
+ * 主题上下文和提供器 - 提供全局主题管理和切换功能
+ */
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import type { TableTheme } from './types';
+import { tableThemes, type TableThemeType } from './tableTheme';
+
+/**
+ * 主题上下文类型
+ */
+interface ThemeContextType {
+  /** 当前表格主题 */
+  tableTheme: TableTheme;
+  /** 当前主题类型 */
+  currentThemeType: TableThemeType;
+  /** 切换主题 */
+  setTheme: (themeType: TableThemeType) => void;
+  /** 所有可用主题类型 */
+  availableThemes: TableThemeType[];
+}
+
+/**
+ * 主题上下文
+ */
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+/**
+ * 本地存储键名
+ */
+const THEME_STORAGE_KEY = 'app-table-theme';
+
+/**
+ * 从本地存储加载主题
+ */
+const loadThemeFromStorage = (): TableThemeType => {
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored && stored in tableThemes) {
+      return stored as TableThemeType;
+    }
+  } catch (error) {
+    console.warn('Failed to load theme from localStorage:', error);
+  }
+  return 'default';
+};
+
+/**
+ * 保存主题到本地存储
+ */
+const saveThemeToStorage = (themeType: TableThemeType) => {
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, themeType);
+  } catch (error) {
+    console.warn('Failed to save theme to localStorage:', error);
+  }
+};
+
+/**
+ * 主题提供器属性
+ */
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  /** 初始主题类型（可选，默认从本地存储读取或使用 'default'） */
+  initialTheme?: TableThemeType;
+}
+
+/**
+ * 主题提供器组件
+ */
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  initialTheme,
+}) => {
+  const [currentThemeType, setCurrentThemeType] = useState<TableThemeType>(
+    initialTheme || loadThemeFromStorage()
+  );
+
+  const tableTheme = tableThemes[currentThemeType];
+
+  const setTheme = useCallback((themeType: TableThemeType) => {
+    setCurrentThemeType(themeType);
+    saveThemeToStorage(themeType);
+  }, []);
+
+  const availableThemes = Object.keys(tableThemes) as TableThemeType[];
+
+  // 应用 CSS 变量到 document root
+  useEffect(() => {
+    const root = document.documentElement;
+    const theme = tableTheme;
+
+    // 颜色变量
+    root.style.setProperty('--table-border-color', theme.colors.border);
+    root.style.setProperty('--table-header-bg', theme.colors.headerBg);
+    root.style.setProperty('--table-header-text', theme.colors.headerText);
+    root.style.setProperty('--table-row-bg', theme.colors.rowBg);
+    root.style.setProperty('--table-row-bg-alt', theme.colors.rowBgAlt);
+    root.style.setProperty('--table-row-hover', theme.colors.rowHover);
+    root.style.setProperty('--table-row-selected', theme.colors.rowSelected);
+    root.style.setProperty('--table-cell-text', theme.colors.cellText);
+    root.style.setProperty('--table-text-secondary', theme.colors.textSecondary);
+    root.style.setProperty('--table-action-primary', theme.colors.actionPrimary);
+    root.style.setProperty('--table-action-danger', theme.colors.actionDanger);
+
+    // 间距变量
+    root.style.setProperty('--table-cell-padding-y', theme.spacing.cellPaddingY);
+    root.style.setProperty('--table-cell-padding-x', theme.spacing.cellPaddingX);
+    root.style.setProperty('--table-margin', theme.spacing.tableMargin);
+    root.style.setProperty('--table-border-width', theme.spacing.borderWidth);
+    root.style.setProperty('--table-action-spacing', theme.spacing.actionSpacing);
+
+    // 字体变量
+    root.style.setProperty('--table-header-font-size', theme.typography.headerFontSize);
+    root.style.setProperty('--table-header-font-weight', String(theme.typography.headerFontWeight));
+    root.style.setProperty('--table-body-font-size', theme.typography.bodyFontSize);
+    root.style.setProperty('--table-small-font-size', theme.typography.smallFontSize);
+    root.style.setProperty('--table-line-height', String(theme.typography.lineHeight));
+    root.style.setProperty('--table-font-family', theme.typography.fontFamily);
+
+    // 布局变量
+    root.style.setProperty('--table-min-row-height', theme.layout.minRowHeight);
+    root.style.setProperty('--table-header-height', theme.layout.headerHeight);
+    root.style.setProperty('--table-column-min-width', theme.layout.columnMinWidth);
+    root.style.setProperty('--table-border-radius', theme.layout.borderRadius);
+    root.style.setProperty('--table-box-shadow', theme.layout.boxShadow);
+
+    // 动画变量
+    root.style.setProperty('--table-hover-transition', theme.animation.hoverTransition);
+    root.style.setProperty('--table-loading-duration', theme.animation.loadingDuration);
+  }, [tableTheme]);
+
+  const value: ThemeContextType = {
+    tableTheme,
+    currentThemeType,
+    setTheme,
+    availableThemes,
+  };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+/**
+ * 使用主题的 Hook
+ */
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+/**
+ * 使用表格主题的 Hook（简化版）
+ */
+export const useTableTheme = (): TableTheme => {
+  const { tableTheme } = useTheme();
+  return tableTheme;
+};

src/theme/index.ts

@@ -0,0 +1,41 @@
+/**
+ * Theme Module Entry Point
+ * 主题模块入口 - 导出所有主题相关内容
+ */
+
+// 类型定义
+export type {
+  TableColors,
+  TableSpacing,
+  TableTypography,
+  TableLayout,
+  TableAnimation,
+  TableTheme,
+  AppTheme,
+} from './types';
+
+// 设计令牌
+export {
+  colorTokens,
+  spacingTokens,
+  fontSizeTokens,
+  fontWeightTokens,
+  lineHeightTokens,
+  borderRadiusTokens,
+  shadowTokens,
+  transitionTokens,
+  borderWidthTokens,
+} from './tokens';
+
+// 表格主题
+export {
+  defaultTableTheme,
+  darkTableTheme,
+  compactTableTheme,
+  comfortableTableTheme,
+  tableThemes,
+  type TableThemeType,
+} from './tableTheme';
+
+// 主题上下文和 Hooks
+export { ThemeProvider, useTheme, useTableTheme } from './ThemeContext';

src/theme/tableTheme.ts

@@ -0,0 +1,218 @@
+/**
+ * Table Theme Configuration
+ * 表格主题配置 - 基于设计令牌构建具体的表格样式
+ */
+
+import type { TableTheme } from './types';
+import {
+  colorTokens,
+  spacingTokens,
+  fontSizeTokens,
+  fontWeightTokens,
+  lineHeightTokens,
+  borderRadiusTokens,
+  shadowTokens,
+  transitionTokens,
+  borderWidthTokens,
+} from './tokens';
+
+/**
+ * 默认（亮色）表格主题
+ */
+export const defaultTableTheme: TableTheme = {
+  colors: {
+    border: colorTokens.neutral[200],
+    headerBg: colorTokens.neutral[50],
+    headerText: colorTokens.neutral[800],
+    rowBg: '#ffffff',
+    rowBgAlt: colorTokens.neutral[50],
+    rowHover: colorTokens.primary[50],
+    rowSelected: colorTokens.primary[100],
+    cellText: colorTokens.neutral[700],
+    textSecondary: colorTokens.neutral[500],
+    actionPrimary: colorTokens.primary[600],
+    actionDanger: colorTokens.danger[500],
+  },
+  spacing: {
+    cellPaddingY: spacingTokens.md,
+    cellPaddingX: spacingTokens.lg,
+    tableMargin: spacingTokens.lg,
+    borderWidth: borderWidthTokens.base,
+    actionSpacing: spacingTokens.sm,
+  },
+  typography: {
+    headerFontSize: fontSizeTokens.md,
+    headerFontWeight: fontWeightTokens.semibold,
+    bodyFontSize: fontSizeTokens.base,
+    smallFontSize: fontSizeTokens.sm,
+    lineHeight: lineHeightTokens.normal,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  },
+  layout: {
+    minRowHeight: '48px',
+    headerHeight: '54px',
+    columnMinWidth: '100px',
+    borderRadius: borderRadiusTokens.md,
+    boxShadow: shadowTokens.sm,
+  },
+  animation: {
+    hoverTransition: `background-color ${transitionTokens.fast} ease`,
+    loadingDuration: transitionTokens.slow,
+  },
+};
+
+/**
+ * 暗色表格主题
+ */
+export const darkTableTheme: TableTheme = {
+  colors: {
+    border: colorTokens.neutral[700],
+    headerBg: colorTokens.neutral[800],
+    headerText: colorTokens.neutral[100],
+    rowBg: colorTokens.neutral[900],
+    rowBgAlt: colorTokens.neutral[800],
+    rowHover: colorTokens.primary[900],
+    rowSelected: colorTokens.primary[800],
+    cellText: colorTokens.neutral[200],
+    textSecondary: colorTokens.neutral[400],
+    actionPrimary: colorTokens.primary[400],
+    actionDanger: colorTokens.danger[400],
+  },
+  spacing: {
+    cellPaddingY: spacingTokens.md,
+    cellPaddingX: spacingTokens.lg,
+    tableMargin: spacingTokens.lg,
+    borderWidth: borderWidthTokens.base,
+    actionSpacing: spacingTokens.sm,
+  },
+  typography: {
+    headerFontSize: fontSizeTokens.md,
+    headerFontWeight: fontWeightTokens.semibold,
+    bodyFontSize: fontSizeTokens.base,
+    smallFontSize: fontSizeTokens.sm,
+    lineHeight: lineHeightTokens.normal,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  },
+  layout: {
+    minRowHeight: '48px',
+    headerHeight: '54px',
+    columnMinWidth: '100px',
+    borderRadius: borderRadiusTokens.md,
+    boxShadow: shadowTokens.lg,
+  },
+  animation: {
+    hoverTransition: `background-color ${transitionTokens.fast} ease`,
+    loadingDuration: transitionTokens.slow,
+  },
+};
+
+/**
+ * 紧凑表格主题（更小的间距和字体）
+ */
+export const compactTableTheme: TableTheme = {
+  ...defaultTableTheme,
+  spacing: {
+    cellPaddingY: spacingTokens.sm,
+    cellPaddingX: spacingTokens.md,
+    tableMargin: spacingTokens.md,
+    borderWidth: borderWidthTokens.base,
+    actionSpacing: spacingTokens.xs,
+  },
+  typography: {
+    ...defaultTableTheme.typography,
+    headerFontSize: fontSizeTokens.sm,
+    bodyFontSize: fontSizeTokens.sm,
+    smallFontSize: fontSizeTokens.xs,
+  },
+  layout: {
+    ...defaultTableTheme.layout,
+    minRowHeight: '36px',
+    headerHeight: '40px',
+  },
+};
+
+/**
+ * 宽松表格主题（更大的间距和字体）
+ */
+export const comfortableTableTheme: TableTheme = {
+  ...defaultTableTheme,
+  spacing: {
+    cellPaddingY: spacingTokens.lg,
+    cellPaddingX: spacingTokens.xl,
+    tableMargin: spacingTokens.xl,
+    borderWidth: borderWidthTokens.base,
+    actionSpacing: spacingTokens.md,
+  },
+  typography: {
+    ...defaultTableTheme.typography,
+    headerFontSize: fontSizeTokens.lg,
+    bodyFontSize: fontSizeTokens.md,
+    smallFontSize: fontSizeTokens.base,
+  },
+  layout: {
+    ...defaultTableTheme.layout,
+    minRowHeight: '56px',
+    headerHeight: '64px',
+  },
+};
+
+/**
+ * 简洁表格主题
+ */
+export const minimalTableTheme: TableTheme = {
+  colors: {
+    border: colorTokens.neutral[300],
+    headerBg: '#ffffff',
+    headerText: colorTokens.neutral[900],
+    rowBg: '#ffffff',
+    rowBgAlt: '#ffffff',
+    rowHover: colorTokens.neutral[50],
+    rowSelected: colorTokens.primary[50],
+    cellText: colorTokens.neutral[800],
+    textSecondary: colorTokens.neutral[600],
+    actionPrimary: colorTokens.primary[600],
+    actionDanger: colorTokens.danger[500],
+  },
+  spacing: {
+    cellPaddingY: spacingTokens.md,
+    cellPaddingX: spacingTokens.lg,
+    tableMargin: '0px',
+    borderWidth: borderWidthTokens.base,
+    actionSpacing: spacingTokens.sm,
+  },
+  typography: {
+    headerFontSize: fontSizeTokens.base,
+    headerFontWeight: fontWeightTokens.semibold,
+    bodyFontSize: fontSizeTokens.base,
+    smallFontSize: fontSizeTokens.sm,
+    lineHeight: lineHeightTokens.relaxed,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif',
+  },
+  layout: {
+    minRowHeight: 'auto',
+    headerHeight: 'auto',
+    columnMinWidth: '120px',
+    borderRadius: '0px',
+    boxShadow: 'none',
+  },
+  animation: {
+    hoverTransition: `background-color ${transitionTokens.fast} ease`,
+    loadingDuration: transitionTokens.slow,
+  },
+};
+
+/**
+ * 所有可用的表格主题
+ */
+export const tableThemes = {
+  default: defaultTableTheme,
+  dark: darkTableTheme,
+  compact: compactTableTheme,
+  comfortable: comfortableTableTheme,
+  minimal: minimalTableTheme,
+};
+
+/**
+ * 表格主题类型
+ */
+export type TableThemeType = keyof typeof tableThemes;

src/theme/tokens.ts

@@ -0,0 +1,147 @@
+/**
+ * Design Tokens
+ * 基础设计令牌 - 可在多个主题间共享的基础值
+ */
+
+/**
+ * 颜色令牌
+ */
+export const colorTokens = {
+  // 中性色
+  neutral: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#e5e5e5',
+    300: '#d4d4d4',
+    400: '#a3a3a3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+  },
+  // 主色
+  primary: {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    200: '#bfdbfe',
+    300: '#93c5fd',
+    400: '#60a5fa',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    800: '#1e40af',
+    900: '#1e3a8a',
+  },
+  // 成功色
+  success: {
+    50: '#f0fdf4',
+    500: '#22c55e',
+    600: '#16a34a',
+  },
+  // 警告色
+  warning: {
+    50: '#fffbeb',
+    500: '#f59e0b',
+    600: '#d97706',
+  },
+  // 危险色
+  danger: {
+    50: '#fef2f2',
+    500: '#ef4444',
+    600: '#dc2626',
+  },
+};
+
+/**
+ * 间距令牌（基于 4px 网格）
+ */
+export const spacingTokens = {
+  xs: '4px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '20px',
+  '2xl': '24px',
+  '3xl': '32px',
+  '4xl': '40px',
+};
+
+/**
+ * 字体大小令牌
+ */
+export const fontSizeTokens = {
+  xs: '11px',
+  sm: '12px',
+  base: '13px',
+  md: '14px',
+  lg: '16px',
+  xl: '18px',
+  '2xl': '20px',
+  '3xl': '24px',
+};
+
+/**
+ * 字重令牌
+ */
+export const fontWeightTokens = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+};
+
+/**
+ * 行高令牌
+ */
+export const lineHeightTokens = {
+  tight: 1.2,
+  normal: 1.5,
+  relaxed: 1.75,
+  loose: 2,
+};
+
+/**
+ * 圆角令牌
+ */
+export const borderRadiusTokens = {
+  none: '0',
+  sm: '2px',
+  base: '4px',
+  md: '6px',
+  lg: '8px',
+  xl: '12px',
+  full: '9999px',
+};
+
+/**
+ * 阴影令牌
+ */
+export const shadowTokens = {
+  none: 'none',
+  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+};
+
+/**
+ * 过渡时长令牌
+ */
+export const transitionTokens = {
+  fast: '150ms',
+  base: '200ms',
+  slow: '300ms',
+  slower: '500ms',
+};
+
+/**
+ * 边框宽度令牌
+ */
+export const borderWidthTokens = {
+  none: '0',
+  thin: '1px',
+  base: '1px',
+  thick: '2px',
+};

src/theme/types.ts

@@ -0,0 +1,121 @@
+/**
+ * Theme type definitions
+ * 定义主题系统的类型结构
+ */
+
+/**
+ * 表格颜色配置
+ */
+export interface TableColors {
+  /** 边框颜色 */
+  border: string;
+  /** 表头背景色 */
+  headerBg: string;
+  /** 表头文字颜色 */
+  headerText: string;
+  /** 行背景色 */
+  rowBg: string;
+  /** 交替行背景色（斑马纹） */
+  rowBgAlt: string;
+  /** 悬停行背景色 */
+  rowHover: string;
+  /** 选中行背景色 */
+  rowSelected: string;
+  /** 单元格文字颜色 */
+  cellText: string;
+  /** 次要文字颜色 */
+  textSecondary: string;
+  /** 操作按钮颜色 */
+  actionPrimary: string;
+  /** 危险操作颜色 */
+  actionDanger: string;
+}
+
+/**
+ * 表格间距配置
+ */
+export interface TableSpacing {
+  /** 单元格内边距（垂直） */
+  cellPaddingY: string;
+  /** 单元格内边距（水平） */
+  cellPaddingX: string;
+  /** 表格外边距 */
+  tableMargin: string;
+  /** 边框宽度 */
+  borderWidth: string;
+  /** 操作按钮间距 */
+  actionSpacing: string;
+}
+
+/**
+ * 表格字体配置
+ */
+export interface TableTypography {
+  /** 表头字号 */
+  headerFontSize: string;
+  /** 表头字重 */
+  headerFontWeight: string | number;
+  /** 内容字号 */
+  bodyFontSize: string;
+  /** 小字号（用于ID、标签等） */
+  smallFontSize: string;
+  /** 行高 */
+  lineHeight: string | number;
+  /** 字体族 */
+  fontFamily: string;
+}
+
+/**
+ * 表格布局配置
+ */
+export interface TableLayout {
+  /** 最小行高 */
+  minRowHeight: string;
+  /** 表头高度 */
+  headerHeight: string;
+  /** 列最小宽度 */
+  columnMinWidth: string;
+  /** 圆角 */
+  borderRadius: string;
+  /** 阴影 */
+  boxShadow: string;
+}
+
+/**
+ * 表格动画配置
+ */
+export interface TableAnimation {
+  /** 悬停过渡时间 */
+  hoverTransition: string;
+  /** 加载动画时长 */
+  loadingDuration: string;
+}
+
+/**
+ * 完整的表格主题配置
+ */
+export interface TableTheme {
+  /** 颜色系统 */
+  colors: TableColors;
+  /** 间距系统 */
+  spacing: TableSpacing;
+  /** 字体系统 */
+  typography: TableTypography;
+  /** 布局系统 */
+  layout: TableLayout;
+  /** 动画系统 */
+  animation: TableAnimation;
+}
+
+/**
+ * 应用主题配置（包含所有组件主题）
+ */
+export interface AppTheme {
+  /** 主题名称 */
+  name: string;
+  /** 表格主题 */
+  table: TableTheme;
+  // 未来可以扩展其他组件主题
+  // button?: ButtonTheme;
+  // form?: FormTheme;
+}