@appthen/cli 1.2.8 → 1.2.11

package/tests/test-app/src/pages/TicketManagementPage.tsx

@@ -0,0 +1,1238 @@
+/**
+ * 工单管理页面 - 复杂表格界面
+ * @type Page
+ * @route /ticket-management
+ * @screen 1920x1080 #f5f5f5
+ * @frames web
+ */
+import React from 'react';
+import { Page, Text, View } from '@appthen/react';
+import XMarkdown from '@ant-design/x-markdown';
+
+
+class IProps {
+  /* 部门ID - 可选的路由参数 */
+  departmentId: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 表格加载状态 */
+  loading: boolean;
+  /* 选中的工单 */
+  @Form({
+    setter: "JsonSetter"
+  })
+  selectedRowKeys: string[];
+  /* 搜索关键词 */
+  searchKeyword: string;
+  /* 筛选条件 */
+  filters: {
+    status: string,
+    priority: string,
+    department: string,
+    assignee: string,
+    dateRange: string,
+  };
+  /* 排序信息 */
+  sorter: {
+    field: string,
+    order: string,
+  };
+  /* 分页信息 */
+  pagination: {
+    current: number,
+    pageSize: number,
+    total: number,
+  };
+  /* 表格列配置 */
+  columns: {
+    /* @example 工单编号 */title?: string,
+    /* @example id */dataIndex?: string,
+    /* @example id */key?: string,
+    /* @example 120 */width?: number,
+    /* @example left */fixed: string,
+    /* @example true */sorter: boolean,
+    /* @example true */filterable: boolean,
+    /* @example true */ellipsis: boolean,
+    filters: string,
+  }[];
+  /* 高级搜索展开状态 */
+  advancedSearchExpanded: boolean;
+  /* 统计数据 */
+  statistics: {
+    total: number,
+    pending: number,
+    processing: number,
+    resolved: number,
+    escalated: number,
+    overdue: number,
+    todayCreated: number,
+    avgResponseTime: number,
+    satisfactionRate: number,
+  };
+  /* 导出加载状态 */
+  exportLoading: boolean;
+  /* 批量操作下拉框可见性 */
+  batchActionsVisible: boolean;
+  /* 详情抽屉可见性 */
+  detailDrawerVisible: boolean;
+  /* 工单列表数据 */
+  tickets: {
+    /* @example TK-2024001 */id?: string,
+    /* @example 系统登录失败无法访问 */title?: string,
+    /* @example 用户反映无法正常登录系统，提示密码错误但密码确认无误 */description?: string,
+    /* @example 技术支持 */type?: string,
+    /* @example high */priority?: string,
+    /* @example processing */status?: string,
+    /* @example 张三 */assignee?: string,
+    /* @example 李四 */reporter?: string,
+    /* @example IT支持部 */department?: string,
+    /* @example 2024-01-15 09:30:00 */createdAt?: string,
+    /* @example 2024-01-15 14:20:00 */updatedAt?: string,
+    /* @example 2024-01-17 */dueDate?: string,
+    /* @example 65 */progress?: number,
+    tags?: string,
+    /* @example 3 */attachments?: number,
+    /* @example 12 */comments?: number,
+    /* @example 5 */watchers?: number,
+    satisfaction?: any,
+    /* @example 30 */responseTime?: any,
+    resolveTime?: any,
+    /* @example normal */slaStatus?: string,
+    /* @example 系统故障 */category?: string,
+    /* @example 登录问题 */subcategory?: string,
+    /* @example high */impact?: string,
+    /* @example high */urgency?: string,
+    /* @example web */source?: string,
+    /* @example 总部大楼 */location?: string,
+    /* @example Windows PC */device?: any,
+    /* @example Chrome 120 */browser?: any,
+  }[];
+  /* 当前查看的工单详情 */
+  currentTicket: any;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    loading: false,
+    selectedRowKeys: [],
+    searchKeyword: '',
+    filters: {},
+    sorter: {},
+    pagination: { current: 1, pageSize: 20, total: 100 },
+    columns: [
+      {
+        title: '工单编号',
+        dataIndex: 'id',
+        key: 'id',
+        width: 120,
+        fixed: 'left',
+        sorter: true,
+        filterable: true,
+      },
+      {
+        title: '标题',
+        dataIndex: 'title',
+        key: 'title',
+        width: 250,
+        ellipsis: true,
+        sorter: true,
+      },
+      {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        width: 100,
+        filters: [
+          { text: '技术支持', value: '技术支持' },
+          { text: '硬件支持', value: '硬件支持' },
+          { text: '账号管理', value: '账号管理' },
+          { text: '网络支持', value: '网络支持' },
+          { text: '系统支持', value: '系统支持' },
+        ],
+      },
+      {
+        title: '优先级',
+        dataIndex: 'priority',
+        key: 'priority',
+        width: 90,
+        sorter: true,
+        filters: [
+          { text: '低', value: 'low' },
+          { text: '中', value: 'medium' },
+          { text: '高', value: 'high' },
+          { text: '紧急', value: 'urgent' },
+        ],
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 100,
+        sorter: true,
+        filters: [
+          { text: '待处理', value: 'pending' },
+          { text: '处理中', value: 'processing' },
+          { text: '已解决', value: 'resolved' },
+          { text: '已升级', value: 'escalated' },
+        ],
+      },
+      {
+        title: '处理人',
+        dataIndex: 'assignee',
+        key: 'assignee',
+        width: 100,
+        filterable: true,
+      },
+      {
+        title: '部门',
+        dataIndex: 'department',
+        key: 'department',
+        width: 120,
+        filters: [
+          { text: 'IT支持部', value: 'IT支持部' },
+          { text: '行政部', value: '行政部' },
+          { text: '人力资源部', value: '人力资源部' },
+          { text: '销售部', value: '销售部' },
+          { text: '财务部', value: '财务部' },
+        ],
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createdAt',
+        key: 'createdAt',
+        width: 150,
+        sorter: true,
+      },
+      {
+        title: '截止时间',
+        dataIndex: 'dueDate',
+        key: 'dueDate',
+        width: 110,
+        sorter: true,
+      },
+      { title: '进度', dataIndex: 'progress', key: 'progress', width: 120 },
+      {
+        title: 'SLA状态',
+        dataIndex: 'slaStatus',
+        key: 'slaStatus',
+        width: 100,
+        filters: [
+          { text: '正常', value: 'normal' },
+          { text: '预警', value: 'warning' },
+          { text: '危险', value: 'danger' },
+          { text: '超时', value: 'breached' },
+          { text: '成功', value: 'success' },
+        ],
+      },
+      {
+        title: '满意度',
+        dataIndex: 'satisfaction',
+        key: 'satisfaction',
+        width: 100,
+        sorter: true,
+      },
+      { title: '操作', key: 'actions', width: 150, fixed: 'right' },
+    ],
+    advancedSearchExpanded: false,
+    statistics: {
+      total: 325,
+      pending: 42,
+      processing: 128,
+      resolved: 155,
+      escalated: 18,
+      overdue: 25,
+      todayCreated: 38,
+      avgResponseTime: 45,
+      satisfactionRate: 4.6,
+    },
+    exportLoading: false,
+    batchActionsVisible: false,
+    detailDrawerVisible: false,
+    tickets: [
+      {
+        id: 'TK-2024001',
+        title: '系统登录失败无法访问',
+        description: '用户反映无法正常登录系统，提示密码错误但密码确认无误',
+        type: '技术支持',
+        priority: 'high',
+        status: 'processing',
+        assignee: '张三',
+        reporter: '李四',
+        department: 'IT支持部',
+        createdAt: '2024-01-15 09:30:00',
+        updatedAt: '2024-01-15 14:20:00',
+        dueDate: '2024-01-17',
+        progress: 65,
+        tags: ['紧急', '系统问题'],
+        attachments: 3,
+        comments: 12,
+        watchers: 5,
+        responseTime: 30,
+        slaStatus: 'normal',
+        category: '系统故障',
+        subcategory: '登录问题',
+        impact: 'high',
+        urgency: 'high',
+        source: 'web',
+        location: '总部大楼',
+        device: 'Windows PC',
+        browser: 'Chrome 120',
+      },
+      {
+        id: 'TK-2024002',
+        title: '打印机无法连接网络',
+        description: '3楼打印机突然无法连接网络，已尝试重启但问题依旧',
+        type: '硬件支持',
+        priority: 'medium',
+        status: 'pending',
+        assignee: '王五',
+        reporter: '赵六',
+        department: '行政部',
+        createdAt: '2024-01-15 10:15:00',
+        updatedAt: '2024-01-15 10:15:00',
+        dueDate: '2024-01-16',
+        progress: 0,
+        tags: ['硬件'],
+        attachments: 2,
+        comments: 5,
+        watchers: 3,
+        slaStatus: 'warning',
+        category: '办公设备',
+        subcategory: '打印机',
+        impact: 'medium',
+        urgency: 'medium',
+        source: 'email',
+        location: '3楼办公区',
+        device: 'HP LaserJet',
+      },
+      {
+        id: 'TK-2024003',
+        title: '需要开通新员工系统账号',
+        description: '新入职员工需要开通ERP、CRM、OA系统账号',
+        type: '账号管理',
+        priority: 'low',
+        status: 'resolved',
+        assignee: '孙七',
+        reporter: '周八',
+        department: '人力资源部',
+        createdAt: '2024-01-14 14:20:00',
+        updatedAt: '2024-01-15 11:00:00',
+        dueDate: '2024-01-15',
+        progress: 100,
+        tags: ['新员工', '账号开通'],
+        attachments: 4,
+        comments: 8,
+        watchers: 4,
+        satisfaction: 5,
+        responseTime: 120,
+        resolveTime: 1440,
+        slaStatus: 'success',
+        category: '权限管理',
+        subcategory: '账号开通',
+        impact: 'low',
+        urgency: 'low',
+        source: 'phone',
+        location: '2楼人力资源部',
+      },
+      {
+        id: 'TK-2024004',
+        title: 'VPN连接不稳定频繁断线',
+        description: '居家办公时VPN连接经常断线，影响正常工作',
+        type: '网络支持',
+        priority: 'high',
+        status: 'processing',
+        assignee: '吴九',
+        reporter: '郑十',
+        department: '销售部',
+        createdAt: '2024-01-15 08:45:00',
+        updatedAt: '2024-01-15 15:30:00',
+        dueDate: '2024-01-16',
+        progress: 40,
+        tags: ['VPN', '远程办公', '网络'],
+        attachments: 1,
+        comments: 15,
+        watchers: 6,
+        responseTime: 15,
+        slaStatus: 'danger',
+        category: '网络问题',
+        subcategory: 'VPN',
+        impact: 'high',
+        urgency: 'high',
+        source: 'mobile',
+        location: '远程',
+        device: 'MacBook Pro',
+        browser: 'Safari',
+      },
+      {
+        id: 'TK-2024005',
+        title: '数据报表导出功能异常',
+        description: '月度销售报表无法导出，点击导出按钮无响应',
+        type: '系统支持',
+        priority: 'urgent',
+        status: 'escalated',
+        assignee: '陈一',
+        reporter: '林二',
+        department: '财务部',
+        createdAt: '2024-01-15 11:00:00',
+        updatedAt: '2024-01-15 16:00:00',
+        dueDate: '2024-01-15',
+        progress: 20,
+        tags: ['报表', '数据导出', '紧急'],
+        attachments: 5,
+        comments: 20,
+        watchers: 8,
+        responseTime: 60,
+        slaStatus: 'breached',
+        category: '系统功能',
+        subcategory: '报表功能',
+        impact: 'critical',
+        urgency: 'urgent',
+        source: 'web',
+        location: '4楼财务部',
+        device: 'Windows PC',
+        browser: 'Firefox',
+      },
+    ],
+    currentTicket: {},
+  };
+
+  /**
+   * 切换高级搜索展开状态
+   */
+  toggleAdvancedSearch() {
+    this.setState({
+      advancedSearchExpanded: !this.state.advancedSearchExpanded,
+    });
+  }
+
+  /**
+   * 处理搜索
+   */
+  handleSearch() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+      });
+    }, 1000);
+  }
+
+  /**
+   * 重置搜索条件
+   */
+  handleReset() {
+    this.setState({
+      searchKeyword: '',
+      filters: {},
+      sorter: {},
+      pagination: {
+        ...this.state.pagination,
+        current: 1,
+      },
+    });
+  }
+
+  /**
+   * 处理表格变化
+   */
+  handleTableChange(pagination, filters, sorter) {
+    this.setState({
+      pagination,
+      filters,
+      sorter,
+    });
+  }
+
+  /**
+   * 处理行选择
+   */
+  handleRowSelect(selectedRowKeys) {
+    this.setState({
+      selectedRowKeys,
+    });
+  }
+
+  /**
+   * 查看工单详情
+   */
+  viewTicketDetail(ticket) {
+    this.setState({
+      currentTicket: ticket,
+      detailDrawerVisible: true,
+    });
+  }
+
+  /**
+   * 关闭详情抽屉
+   */
+  closeDetailDrawer() {
+    this.setState({
+      detailDrawerVisible: false,
+      currentTicket: null,
+    });
+  }
+
+  /**
+   * 导出数据
+   */
+  handleExport() {
+    this.setState({
+      exportLoading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        exportLoading: false,
+      });
+    }, 2000);
+  }
+
+  /**
+   * 批量分配
+   */
+  handleBatchAssign() {
+    this.setState({
+      batchActionsVisible: false,
+    });
+  }
+
+  /**
+   * 批量更新状态
+   */
+  handleBatchUpdateStatus(status) {
+    this.setState({
+      batchActionsVisible: false,
+    });
+  }
+
+  /**
+   * 批量删除
+   */
+  handleBatchDelete() {
+    this.setState({
+      selectedRowKeys: [],
+      batchActionsVisible: false,
+    });
+  }
+
+  /**
+   * 刷新数据
+   */
+  handleRefresh() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+      });
+    }, 1000);
+  }
+
+  /**
+   * 创建新工单
+   */
+  handleCreateTicket() {
+    console.log('Create new ticket');
+  }
+
+  /**
+   * 获取优先级颜色
+   */
+  getPriorityColor(priority) {
+    const colorMap = {
+      low: '#52c41a',
+      medium: '#faad14',
+      high: '#fa8c16',
+      urgent: '#f5222d',
+    };
+    return colorMap[priority] || '#d9d9d9';
+  }
+
+  /**
+   * 获取状态颜色
+   */
+  getStatusColor(status) {
+    const colorMap = {
+      pending: '#faad14',
+      processing: '#1890ff',
+      resolved: '#52c41a',
+      escalated: '#f5222d',
+    };
+    return colorMap[status] || '#d9d9d9';
+  }
+
+  /**
+   * 获取SLA状态颜色
+   */
+  getSLAStatusColor(slaStatus) {
+    const colorMap = {
+      normal: '#52c41a',
+      warning: '#faad14',
+      danger: '#fa8c16',
+      breached: '#f5222d',
+      success: '#1890ff',
+    };
+    return colorMap[slaStatus] || '#d9d9d9';
+  }
+
+  /**
+   * 获取满意度星级
+   */
+  getSatisfactionStars(satisfaction) {
+    if (!satisfaction) return '未评价';
+    const stars =
+      '★'.repeat(Math.floor(satisfaction)) +
+      '☆'.repeat(5 - Math.floor(satisfaction));
+    return `${stars} (${satisfaction})`;
+  }
+
+  render() {
+    const content = `
+      # Hello World
+
+      ### Welcome to XMarkdown!
+
+      - Item 1
+      - Item 2
+      - Item 3
+      `;
+    return (
+      <Page className="min-h-screen bg-[var(--gray-50)]">
+        <View className="p-[24px]">
+          <View className="mb-[24px] flex justify-between items-center">
+            <View>
+              <h1 className="text-2xl font-bold text-[#111827]">工单管理</h1>
+              <p className="text-[#6b7280] mt-[4px]">
+                全面管理和跟踪所有工单信息
+              </p>
+            </View>
+            <View className="gap-3 flex">
+              <button
+                onClick={() => this.handleExport()}
+                className="border-gray-300 hover:bg-gray-50 border-solid flex items-center pl-[16px] pr-[16px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+              >
+                <Text>导出数据</Text>
+              </button>
+              <button
+                onClick={() => this.handleRefresh()}
+                className="border-gray-300 hover:bg-gray-50 border-solid flex items-center pl-[16px] pr-[16px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+              >
+                <Text>刷新</Text>
+              </button>
+              <button
+                onClick={() => this.handleCreateTicket()}
+                className="bg-blue-600 hover:bg-blue-700 flex items-center pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#ffffff] rounded-lg"
+              >
+                <Text>创建工单</Text>
+              </button>
+            </View>
+          </View>
+          <View className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-[24px]">
+            <View className="bg-[#ffffff] p-[16px] rounded-lg shadow-[0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)]">
+              <View className="flex items-center justify-between">
+                <View>
+                  <p className="text-[#6b7280] text-sm">总工单数</p>
+                  <p className="text-2xl font-bold text-[#111827]">
+                    {this.state.statistics?.total}
+                  </p>
+                </View>
+                <View className="bg-[var(--blue-100)] p-[12px] rounded-full">
+                  <Text className="text-xl">📋</Text>
+                </View>
+              </View>
+            </View>
+            <View className="bg-[#ffffff] p-[16px] rounded-lg shadow-[0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)]">
+              <View className="flex items-center justify-between">
+                <View>
+                  <p className="text-[#6b7280] text-sm">处理中</p>
+                  <p className="text-2xl font-bold">
+                    {this.state.statistics?.processing}
+                  </p>
+                </View>
+                <View className="bg-[var(--blue-100)] p-[12px] rounded-full">
+                  <Text className="text-xl">⏳</Text>
+                </View>
+              </View>
+            </View>
+            <View className="bg-[#ffffff] p-[16px] rounded-lg shadow-[0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)]">
+              <View className="flex items-center justify-between">
+                <View>
+                  <p className="text-[#6b7280] text-sm">已解决</p>
+                  <p className="text-2xl font-bold">
+                    {this.state.statistics?.resolved}
+                  </p>
+                </View>
+                <View className="bg-[var(--green-100)] p-[12px] rounded-full">
+                  <Text className="text-xl">✓</Text>
+                </View>
+              </View>
+            </View>
+            <View className="bg-[#ffffff] p-[16px] rounded-lg shadow-[0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)]">
+              <View className="flex items-center justify-between">
+                <View>
+                  <p className="text-[#6b7280] text-sm">超时工单</p>
+                  <p className="text-2xl font-bold">
+                    {this.state.statistics?.overdue}
+                  </p>
+                </View>
+                <View className="bg-[var(--red-100)] p-[12px] rounded-full">
+                  <Text className="text-xl">⚠</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View className="bg-[#ffffff] p-[16px] rounded-lg shadow-[0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)] mb-[24px]">
+            <View className="gap-3 flex mb-[16px]">
+              <input
+                type="text"
+                placeholder="搜索工单编号、标题、描述..."
+                value={this.state.searchKeyword}
+                onChange={e =>
+                  this.setState({
+                    searchKeyword: e.target.value,
+                  })
+                }
+                className="border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 border-solid flex-1 pl-[16px] pr-[16px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+                onKeyPress={e => e.key === 'Enter' && this.handleSearch()}
+              />
+              <button
+                onClick={() => this.handleSearch()}
+                className="bg-blue-600 hover:bg-blue-700 pl-[24px] pr-[24px] pt-[8px] pb-[8px] text-[#ffffff] rounded-lg"
+              >
+                搜索
+              </button>
+              <button
+                onClick={() => this.toggleAdvancedSearch()}
+                className="border-gray-300 hover:bg-gray-50 border-solid pl-[16px] pr-[16px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+              >
+                {this.state.advancedSearchExpanded ? '收起筛选' : '高级筛选'}
+              </button>
+            </View>
+            {!!this.state.advancedSearchExpanded && (
+              <View className="border-t border-t-solid pt-[16px]">
+                <View className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <View>
+                    <label className="block text-sm font-medium text-[#374151] mb-[4px]">
+                      状态
+                    </label>
+                    <select className="border-gray-300 border-solid w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-lg">
+                      <option value="">全部状态</option>
+                      <option value="pending">待处理</option>
+                      <option value="processing">处理中</option>
+                      <option value="resolved">已解决</option>
+                      <option value="escalated">已升级</option>
+                    </select>
+                  </View>
+                  <View>
+                    <label className="block text-sm font-medium text-[#374151] mb-[4px]">
+                      优先级
+                    </label>
+                    <select className="border-gray-300 border-solid w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-lg">
+                      <option value="">全部优先级</option>
+                      <option value="low">低</option>
+                      <option value="medium">中</option>
+                      <option value="high">高</option>
+                      <option value="urgent">紧急</option>
+                    </select>
+                  </View>
+                  <View>
+                    <label className="block text-sm font-medium text-[#374151] mb-[4px]">
+                      部门
+                    </label>
+                    <select className="border-gray-300 border-solid w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-lg">
+                      <option value="">全部部门</option>
+                      <option value="IT支持部">IT支持部</option>
+                      <option value="行政部">行政部</option>
+                      <option value="人力资源部">人力资源部</option>
+                      <option value="销售部">销售部</option>
+                      <option value="财务部">财务部</option>
+                    </select>
+                  </View>
+                  <View>
+                    <label className="block text-sm font-medium text-[#374151] mb-[4px]">
+                      处理人
+                    </label>
+                    <input
+                      type="text"
+                      placeholder="输入处理人姓名"
+                      className="border-gray-300 border-solid w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+                    />
+                  </View>
+                  <View>
+                    <label className="block text-sm font-medium text-[#374151] mb-[4px]">
+                      创建时间
+                    </label>
+                    <input
+                      type="date"
+                      className="border-gray-300 border-solid w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+                    />
+                  </View>
+                  <View>
+                    <label className="block text-sm font-medium text-[#374151] mb-[4px]">
+                      截止时间
+                    </label>
+                    <input
+                      type="date"
+                      className="border-gray-300 border-solid w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+                    />
+                  </View>
+                </View>
+                <View className="gap-3 flex justify-end mt-[16px]">
+                  <button
+                    onClick={() => this.handleReset()}
+                    className="border-gray-300 hover:bg-gray-50 border-solid pl-[16px] pr-[16px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+                  >
+                    重置
+                  </button>
+                  <button
+                    onClick={() => this.handleSearch()}
+                    className="bg-blue-600 hover:bg-blue-700 pl-[24px] pr-[24px] pt-[8px] pb-[8px] text-[#ffffff] rounded-lg"
+                  >
+                    应用筛选
+                  </button>
+                </View>
+              </View>
+            )}
+          </View>
+          {!!this.state.selectedRowKeys?.length && (
+            <View className="bg-[var(--blue-50)] p-[12px] rounded-lg mb-[16px] flex justify-between items-center">
+              <Text className="">
+                已选择{this.state.selectedRowKeys?.length}项
+              </Text>
+              <View className="gap-2 flex">
+                <button
+                  onClick={() => this.handleBatchAssign()}
+                  className="bg-white border-gray-300 hover:bg-gray-50 border-solid pl-[12px] pr-[12px] pt-[4px] pb-[4px] text-sm border border-solid rounded"
+                >
+                  批量分配
+                </button>
+                <button
+                  onClick={() => this.handleBatchUpdateStatus('resolved')}
+                  className="bg-white border-gray-300 hover:bg-gray-50 border-solid pl-[12px] pr-[12px] pt-[4px] pb-[4px] text-sm border border-solid rounded"
+                >
+                  批量解决
+                </button>
+                <button
+                  onClick={() => this.handleBatchDelete()}
+                  className="bg-white border-red-300 hover:bg-red-50 border-solid pl-[12px] pr-[12px] pt-[4px] pb-[4px] text-sm border border-solid rounded"
+                >
+                  批量删除
+                </button>
+              </View>
+            </View>
+          )}
+          <View className="bg-[#ffffff] rounded-lg shadow-[0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)]">
+            <View className="overflow-x-auto">
+              <table className="min-w-full">
+                <thead className="bg-[var(--gray-50)] border-b-[1px] border-b-solid">
+                  <tr>
+                    <th className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                      <input
+                        type="checkbox"
+                        checked={
+                          this.state.selectedRowKeys?.length ===
+                          this.state.tickets?.length
+                        }
+                        onChange={e => {
+                          if (e.target.checked) {
+                            this.setState({
+                              selectedRowKeys: this.state.tickets?.map(
+                                t => t.id
+                              ),
+                            });
+                          } else {
+                            this.setState({
+                              selectedRowKeys: [],
+                            });
+                          }
+                        }}
+                      />
+                    </th>
+                    {this.state.columns.map((col, index) => (
+                      <th
+                        key={col.key}
+                        className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                        style={{ width: col.width }}
+                      >
+                        <Text>{col.title}</Text>
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {this.state.tickets.map((ticket, index) => (
+                    <tr key={ticket.id} className="hover:bg-gray-50">
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <input
+                          type="checkbox"
+                          checked={this.state.selectedRowKeys?.includes(
+                            ticket.id
+                          )}
+                          onChange={e => {
+                            if (e.target.checked) {
+                              this.setState({
+                                selectedRowKeys: [
+                                  ...(this.state.selectedRowKeys || []),
+                                  ticket.id,
+                                ],
+                              });
+                            } else {
+                              this.setState({
+                                selectedRowKeys:
+                                  this.state.selectedRowKeys?.filter(
+                                    id => id !== ticket.id
+                                  ),
+                              });
+                            }
+                          }}
+                        />
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <button
+                          onClick={() => this.viewTicketDetail(ticket)}
+                          className="text-blue-600 hover:text-blue-800 font-medium"
+                        >
+                          <Text>{ticket.id}</Text>
+                        </button>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <View
+                          title={ticket.title}
+                          className="overflow-hidden [textOverflow:ellipsis] [whiteSpace:nowrap]"
+                        >
+                          <Text>{ticket.title}</Text>
+                        </View>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <Text className="inline-flex pl-[8px] pr-[8px] pt-[4px] pb-[4px] text-xs font-semibold rounded-full bg-[#f3f4f6] text-[#1f2937]">
+                          {ticket.type}
+                        </Text>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <Text
+                          className="inline-flex px-2 py-1 text-xs font-semibold rounded-full text-white"
+                          style={{
+                            backgroundColor: this.getPriorityColor(
+                              ticket.priority
+                            ),
+                          }}
+                        >
+                          {ticket.priority === 'low'
+                            ? '低'
+                            : ticket.priority === 'medium'
+                            ? '中'
+                            : ticket.priority === 'high'
+                            ? '高'
+                            : '紧急'}
+                        </Text>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <Text
+                          className="inline-flex px-2 py-1 text-xs font-semibold rounded-full text-white"
+                          style={{
+                            backgroundColor: this.getStatusColor(ticket.status),
+                          }}
+                        >
+                          {ticket.status === 'pending'
+                            ? '待处理'
+                            : ticket.status === 'processing'
+                            ? '处理中'
+                            : ticket.status === 'resolved'
+                            ? '已解决'
+                            : '已升级'}
+                        </Text>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <Text>{ticket.assignee}</Text>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <Text>{ticket.department}</Text>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <Text className="text-sm text-[#4b5563]">
+                          {ticket.createdAt}
+                        </Text>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <Text className="text-sm">{ticket.dueDate}</Text>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <View className="gap-2 flex items-center">
+                          <View className="flex-1 bg-[#e5e7eb] rounded-full h-[8px]">
+                            <View
+                              className="bg-blue-600 h-2 rounded-full"
+                              style={{ width: `${ticket.progress}%` }}
+                            />
+                          </View>
+                          <Text className="text-xs text-[#4b5563]">
+                            {ticket.progress}%
+                          </Text>
+                        </View>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <Text
+                          className="inline-flex px-2 py-1 text-xs font-semibold rounded-full text-white"
+                          style={{
+                            backgroundColor: this.getSLAStatusColor(
+                              ticket.slaStatus
+                            ),
+                          }}
+                        >
+                          {ticket.slaStatus === 'normal'
+                            ? '正常'
+                            : ticket.slaStatus === 'warning'
+                            ? '预警'
+                            : ticket.slaStatus === 'danger'
+                            ? '危险'
+                            : ticket.slaStatus === 'breached'
+                            ? '超时'
+                            : '成功'}
+                        </Text>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <Text className="text-sm">
+                          {ticket.satisfaction
+                            ? this.getSatisfactionStars(ticket.satisfaction)
+                            : '-'}
+                        </Text>
+                      </td>
+                      <td className="pl-[16px] pr-[16px] pt-[12px] pb-[12px]">
+                        <View className="gap-2 flex">
+                          <button
+                            onClick={() => this.viewTicketDetail(ticket)}
+                            className="text-blue-600 hover:text-blue-800 text-sm"
+                          >
+                            详情
+                          </button>
+                          <button className="text-gray-600 hover:text-gray-800 text-sm">
+                            编辑
+                          </button>
+                          <button className="text-red-600 hover:text-red-800 text-sm">
+                            删除
+                          </button>
+                        </View>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </View>
+            <View className="p-[16px] border-t border-t-solid flex justify-between items-center">
+              <Text className="text-sm text-[#4b5563]">
+                共{this.state.pagination?.total}条记录，第
+                {this.state.pagination?.current}/
+                {Math.ceil(
+                  (this.state.pagination?.total || 0) /
+                    (this.state.pagination?.pageSize || 1)
+                )}
+                页
+              </Text>
+              <View className="gap-2 flex">
+                <button
+                  onClick={() =>
+                    this.setState({
+                      pagination: {
+                        ...this.state.pagination,
+                        current: Math.max(
+                          1,
+                          (this.state.pagination?.current || 1) - 1
+                        ),
+                      },
+                    })
+                  }
+                  disabled={this.state.pagination?.current || 1 === 1}
+                  className="border-gray-300 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed border-solid pl-[12px] pr-[12px] pt-[4px] pb-[4px] border border-solid rounded"
+                >
+                  上一页
+                </button>
+                <button
+                  onClick={() =>
+                    this.setState({
+                      pagination: {
+                        ...this.state.pagination,
+                        current: (this.state.pagination?.current || 1) + 1,
+                      },
+                    })
+                  }
+                  disabled={
+                    this.state.pagination?.current ||
+                    1 >=
+                      Math.ceil(
+                        this.state.pagination?.total ||
+                          0 / this.state.pagination?.pageSize ||
+                          1
+                      )
+                  }
+                  className="border-gray-300 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed border-solid pl-[12px] pr-[12px] pt-[4px] pb-[4px] border border-solid rounded"
+                >
+                  下一页
+                </button>
+              </View>
+            </View>
+          </View>
+          {!!this.state.detailDrawerVisible && (
+            <View className="inset-0 fixed z-50 overflow-hidden">
+              <View className="inset-0 absolute overflow-hidden">
+                <View
+                  className="inset-0 transition-opacity absolute bg-[var(--opacity-50)]"
+                  onClick={() => this.closeDetailDrawer()}
+                />
+                <View className="inset-y-0 md:max-w-2xl absolute right-[0px] max-w-full w-full">
+                  <View className="h-full flex flex-col bg-[#ffffff] shadow-[0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)]">
+                    <View className="px-4 py-6 sm:px-6 bg-[var(--gray-50)]">
+                      <View className="flex items-start justify-between">
+                        <h2 className="text-lg font-medium text-[#111827]">
+                          工单详情
+                        </h2>
+                        <button
+                          onClick={() => this.closeDetailDrawer()}
+                          className="text-gray-400 hover:text-gray-500 focus:outline-none ml-[12px] h-[28px] w-[28px] flex items-center justify-center rounded-full bg-[#ffffff]"
+                        >
+                          <Text>{``}</Text>
+                        </button>
+                      </View>
+                    </View>
+                    <View className="flex-1 relative overflow-y-auto">
+                      <View className="pt-[24px] pb-[24px]">
+                        <View className="px-4 sm:px-6">
+                          <View className="mb-[24px]">
+                            <h3 className="text-lg font-medium text-[#111827] mb-[8px]">
+                              {this.state.currentTicket?.title}
+                            </h3>
+                            <p className="text-[#4b5563]">
+                              {this.state.currentTicket?.description}
+                            </p>
+                          </View>
+                          <View className="gap-4 grid grid-cols-2 mb-[24px]">
+                            <View>
+                              <p className="text-sm text-[#6b7280]">工单编号</p>
+                              <p className="font-medium">
+                                {this.state.currentTicket?.id}
+                              </p>
+                            </View>
+                            <View>
+                              <p className="text-sm text-[#6b7280]">状态</p>
+                              <Text
+                                className="inline-flex px-2 py-1 text-xs font-semibold rounded-full text-white"
+                                style={{
+                                  backgroundColor: this.getStatusColor(
+                                    this.state.currentTicket?.status
+                                  ),
+                                }}
+                              >
+                                {this.state.currentTicket?.status === 'pending'
+                                  ? '待处理'
+                                  : this.state.currentTicket?.status ===
+                                    'processing'
+                                  ? '处理中'
+                                  : this.state.currentTicket?.status ===
+                                    'resolved'
+                                  ? '已解决'
+                                  : '已升级'}
+                              </Text>
+                            </View>
+                            <View>
+                              <p className="text-sm text-[#6b7280]">优先级</p>
+                              <Text
+                                className="inline-flex px-2 py-1 text-xs font-semibold rounded-full text-white"
+                                style={{
+                                  backgroundColor: this.getPriorityColor(
+                                    this.state.currentTicket?.priority
+                                  ),
+                                }}
+                              >
+                                {this.state.currentTicket?.priority === 'low'
+                                  ? '低'
+                                  : this.state.currentTicket?.priority ===
+                                    'medium'
+                                  ? '中'
+                                  : this.state.currentTicket?.priority ===
+                                    'high'
+                                  ? '高'
+                                  : '紧急'}
+                              </Text>
+                            </View>
+                            <View>
+                              <p className="text-sm text-[#6b7280]">类型</p>
+                              <p className="font-medium">
+                                {this.state.currentTicket?.type}
+                              </p>
+                            </View>
+                            <View>
+                              <p className="text-sm text-[#6b7280]">处理人</p>
+                              <p className="font-medium">
+                                {this.state.currentTicket?.assignee}
+                              </p>
+                            </View>
+                            <View>
+                              <p className="text-sm text-[#6b7280]">部门</p>
+                              <p className="font-medium">
+                                {this.state.currentTicket?.department}
+                              </p>
+                            </View>
+                            <View>
+                              <p className="text-sm text-[#6b7280]">创建时间</p>
+                              <p className="font-medium">
+                                {this.state.currentTicket?.createdAt}
+                              </p>
+                            </View>
+                            <View>
+                              <p className="text-sm text-[#6b7280]">截止时间</p>
+                              <p className="font-medium">
+                                {this.state.currentTicket?.dueDate}
+                              </p>
+                            </View>
+                          </View>
+                          <View className="border-t border-t-solid pt-[16px]">
+                            <h4 className="font-medium mb-[8px]">进度</h4>
+                            <View className="gap-2 flex items-center">
+                              <View className="flex-1 bg-[#e5e7eb] rounded-full h-[8px]">
+                                <View
+                                  className="bg-blue-600 h-2 rounded-full"
+                                  style={{
+                                    width: `${this.state.currentTicket?.progress}%`,
+                                  }}
+                                />
+                              </View>
+                              <Text className="text-sm text-[#4b5563]">
+                                {this.state.currentTicket?.progress}%
+                              </Text>
+                            </View>
+                          </View>
+                          <View className="border-t border-t-solid pt-[16px] mt-[16px]">
+                            <h4 className="font-medium mb-[8px]">标签</h4>
+                            <View className="gap-2 flex flex-wrap">
+                              {(this.state.currentTicket?.tags).map(
+                                (tag, idx) => (
+                                  <Text
+                                    key={idx}
+                                    className="pl-[8px] pr-[8px] pt-[4px] pb-[4px] text-xs bg-[#f3f4f6] text-[#374151] rounded"
+                                  >
+                                    {tag}
+                                  </Text>
+                                )
+                              )}
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          )}
+        </View>
+        <XMarkdown content={content} />
+      </Page>
+    );
+  }
+}
+
+export default Document;