@appthen/cli 1.2.10 → 1.2.12

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

@@ -0,0 +1,668 @@
+/**
+ * SLA管理页面
+ * @type Page
+ * @route /sla-management
+ * @screen 1920x1080 #f5f5f5
+ * @frames web
+ */
+import React from 'react';
+import { Page, Text, View } from '@appthen/react';
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    activeTab: '[object Object]',
+    slaPolicies: [],
+    slaMonitoring: {},
+    slaStatistics: {},
+    showPolicyModal: false,
+    ticketTypes: [],
+    departments: [],
+    workingHours: [
+      { day: 'monday', start: '09:00', end: '18:00', enabled: true },
+      { day: 'tuesday', start: '09:00', end: '18:00', enabled: true },
+      { day: 'wednesday', start: '09:00', end: '18:00', enabled: true },
+      { day: 'thursday', start: '09:00', end: '18:00', enabled: true },
+      { day: 'friday', start: '09:00', end: '18:00', enabled: true },
+      { day: 'saturday', start: '09:00', end: '12:00', enabled: false },
+      { day: 'sunday', start: '09:00', end: '12:00', enabled: false },
+    ],
+    holidays: [],
+  };
+
+  render() {
+    return (
+      <Page className="min-h-screen bg-[var(--gray-50)]">
+        <View className="ml-[auto] mr-[auto] p-[24px]">
+          <View className="flex justify-between items-center mb-[24px]">
+            <h1 className="text-2xl font-bold text-[#111827]">
+              SLA管理1234567891010777889
+            </h1>
+            <button
+              onClick={() => this.showCreatePolicyModal()}
+              className="bg-blue-600 hover:bg-blue-700 pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#ffffff] rounded-lg"
+            >
+              创建SLA策略
+            </button>
+          </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)] mb-[24px]">
+            <View className="border-gray-200 border-b-[1px] border-b-solid">
+              <nav className="-mb-px space-x-8 flex pl-[24px] pr-[24px]">
+                <button
+                  onClick={() => this.switchTab('policies')}
+                  className={`py-4 px-1 border-b-2 font-medium text-sm ${
+                    this.state.activeTab === 'policies'
+                      ? 'border-blue-500 text-blue-600'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                  }`}
+                >
+                  SLA策略
+                </button>
+                <button
+                  onClick={() => this.switchTab('monitoring')}
+                  className={`py-4 px-1 border-b-2 font-medium text-sm ${
+                    this.state.activeTab === 'monitoring'
+                      ? 'border-blue-500 text-blue-600'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                  }`}
+                >
+                  SLA监控
+                </button>
+                <button
+                  onClick={() => this.switchTab('statistics')}
+                  className={`py-4 px-1 border-b-2 font-medium text-sm ${
+                    this.state.activeTab === 'statistics'
+                      ? 'border-blue-500 text-blue-600'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                  }`}
+                >
+                  SLA统计
+                </button>
+                <button
+                  onClick={() => this.switchTab('settings')}
+                  className={`py-4 px-1 border-b-2 font-medium text-sm ${
+                    this.state.activeTab === 'settings'
+                      ? 'border-blue-500 text-blue-600'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                  }`}
+                >
+                  时间设置
+                </button>
+              </nav>
+            </View>
+          </View>
+          {!!(this.state.activeTab === 'policies') && (
+            <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="p-[24px]">
+                <View className="overflow-x-auto">
+                  <table className="divide-y divide-gray-200 min-w-full">
+                    <thead className="bg-[var(--gray-50)]">
+                      <tr>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase] tracking-[0.05em]">
+                          策略名称
+                        </th>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase] tracking-[0.05em]">
+                          工单类型
+                        </th>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase] tracking-[0.05em]">
+                          优先级
+                        </th>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase] tracking-[0.05em]">
+                          响应时间
+                        </th>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase] tracking-[0.05em]">
+                          解决时间
+                        </th>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase] tracking-[0.05em]">
+                          状态
+                        </th>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase] tracking-[0.05em]">
+                          操作
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200 bg-[#ffffff]">
+                      {this.state.slaPolicies.map((policy, index) => (
+                        <tr key={policy.id || index}>
+                          <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px] text-sm text-[#111827]">
+                            <Text>{policy.name}</Text>
+                          </td>
+                          <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px] text-sm text-[#111827]">
+                            <Text>{policy.ticketType}</Text>
+                          </td>
+                          <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px]">
+                            <Text
+                              className="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
+                              style={{
+                                backgroundColor:
+                                  this.getPriorityColor(policy.priority) + '20',
+                                color: this.getPriorityColor(policy.priority),
+                              }}
+                            >
+                              {policy.priority}
+                            </Text>
+                          </td>
+                          <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px] text-sm text-[#111827]">
+                            <Text>{this.formatTime(policy.responseTime)}</Text>
+                          </td>
+                          <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px] text-sm text-[#111827]">
+                            <Text>{this.formatTime(policy.resolveTime)}</Text>
+                          </td>
+                          <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px]">
+                            <Text
+                              className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
+                                policy.active
+                                  ? 'bg-green-100 text-green-800'
+                                  : 'bg-gray-100 text-gray-800'
+                              }`}
+                            >
+                              {policy.active ? '启用' : '禁用'}
+                            </Text>
+                          </td>
+                          <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px] text-sm">
+                            <button
+                              onClick={() => this.showEditPolicyModal(policy)}
+                              className="text-blue-600 hover:text-blue-800 mr-[12px]"
+                            >
+                              编辑
+                            </button>
+                            <button
+                              onClick={() =>
+                                this.togglePolicyStatus(
+                                  policy.id,
+                                  !policy.active
+                                )
+                              }
+                              className="text-yellow-600 hover:text-yellow-800 mr-[12px]"
+                            >
+                              {policy.active ? '禁用' : '启用'}
+                            </button>
+                            <button
+                              onClick={() => this.deletePolicy(policy.id)}
+                              className="text-red-600 hover:text-red-800"
+                            >
+                              删除
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </View>
+              </View>
+            </View>
+          )}
+          {!!(this.state.activeTab === 'monitoring') && (
+            <View className="space-y-6">
+              <View className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <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)] p-[16px]">
+                  <View className="text-2xl font-bold text-[var(--blue-600)]">
+                    {0}
+                  </View>
+                  <View className="text-[#4b5563] text-sm">
+                    <Text>监控工单总数</Text>
+                  </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)] p-[16px]">
+                  <View className="text-2xl font-bold text-[var(--green-600)]">
+                    {0}
+                  </View>
+                  <View className="text-[#4b5563] text-sm">
+                    <Text>SLA正常</Text>
+                  </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)] p-[16px]">
+                  <View className="text-2xl font-bold text-[var(--yellow-600)]">
+                    {0}
+                  </View>
+                  <View className="text-[#4b5563] text-sm">
+                    <Text>SLA预警</Text>
+                  </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)] p-[16px]">
+                  <View className="text-2xl font-bold text-[var(--red-600)]">
+                    {0}
+                  </View>
+                  <View className="text-[#4b5563] text-sm">
+                    <Text>SLA超时</Text>
+                  </View>
+                </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="p-[24px]">
+                  <h2 className="text-lg font-semibold text-[#111827] mb-[16px]">
+                    SLA监控详情
+                  </h2>
+                  <View className="space-y-4">
+                    {(this.state.slaMonitoring?.details).map((item, index) => (
+                      <View
+                        key={index}
+                        className="border-l-4 pl-4 py-2"
+                        style={{
+                          borderLeftColor: this.getSLAStatusColor(item.status),
+                        }}
+                      >
+                        <View className="flex justify-between items-start">
+                          <View>
+                            <View className="font-medium text-[#111827]">
+                              <Text>工单 #</Text>
+                              <Text>{item.ticketId}</Text>
+                              <Text>-</Text>
+                              <Text>{item.title}</Text>
+                            </View>
+                            <View className="text-sm text-[#6b7280]">
+                              <Text>类型:</Text>
+                              <Text>{item.type}</Text>
+                              <Text>| 优先级:</Text>
+                              <Text>{item.priority}</Text>
+                              <Text>| 处理人:</Text>
+                              <Text>{item.assignee}</Text>
+                            </View>
+                          </View>
+                          <View className="text-[var(--right)]">
+                            <View
+                              className={`text-sm font-medium`}
+                              style={{
+                                color: this.getSLAStatusColor(item.status),
+                              }}
+                            >
+                              <Text>{item.statusText}</Text>
+                            </View>
+                            <View className="text-xs text-[#6b7280]">
+                              <Text>剩余:</Text>
+                              <Text>{item.remainingTime}</Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    ))}
+                  </View>
+                </View>
+              </View>
+            </View>
+          )}
+          {!!(this.state.activeTab === 'statistics') && (
+            <View className="space-y-6">
+              <View className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <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)] p-[24px]">
+                  <h3 className="text-lg font-medium text-[#111827] mb-[8px]">
+                    SLA达成率
+                  </h3>
+                  <View className="text-3xl font-bold text-[var(--green-600)]">
+                    <Text>
+                      {(this.state.slaStatistics?.achievementRate || 0).toFixed(
+                        1
+                      )}
+                    </Text>
+                    <Text>%</Text>
+                  </View>
+                  <View className="text-sm text-[#6b7280]">
+                    <Text>本月</Text>
+                  </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)] p-[24px]">
+                  <h3 className="text-lg font-medium text-[#111827] mb-[8px]">
+                    平均响应时间
+                  </h3>
+                  <View className="text-3xl font-bold text-[var(--blue-600)]">
+                    <Text>
+                      {this.formatTime(
+                        this.state.slaStatistics?.avgResponseTime || 0
+                      )}
+                    </Text>
+                  </View>
+                  <View className="text-sm text-[#6b7280]">
+                    <Text>本月</Text>
+                  </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)] p-[24px]">
+                  <h3 className="text-lg font-medium text-[#111827] mb-[8px]">
+                    平均解决时间
+                  </h3>
+                  <View className="text-3xl font-bold text-[var(--purple-600)]">
+                    <Text>
+                      {this.formatTime(
+                        this.state.slaStatistics?.avgResolveTime || 0
+                      )}
+                    </Text>
+                  </View>
+                  <View className="text-sm text-[#6b7280]">
+                    <Text>本月</Text>
+                  </View>
+                </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)] p-[24px]">
+                <h3 className="text-lg font-medium text-[#111827] mb-[16px]">
+                  SLA达成率趋势
+                </h3>
+                <View className="h-[256px] flex items-center justify-center bg-[var(--gray-50)] rounded">
+                  <p className="text-[#6b7280]">趋势图表占位符</p>
+                </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)] p-[24px]">
+                <h3 className="text-lg font-medium text-[#111827] mb-[16px]">
+                  分部门SLA统计
+                </h3>
+                <View className="overflow-x-auto">
+                  <table className="divide-y divide-gray-200 min-w-full">
+                    <thead className="bg-[var(--gray-50)]">
+                      <tr>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase]">
+                          部门
+                        </th>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase]">
+                          工单数量
+                        </th>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase]">
+                          SLA达成率
+                        </th>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase]">
+                          平均响应时间
+                        </th>
+                        <th className="pl-[24px] pr-[24px] pt-[12px] pb-[12px] text-[#6b7280] text-xs font-medium [textTransform:uppercase]">
+                          平均解决时间
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200 bg-[#ffffff]">
+                      {(this.state.slaStatistics?.byDepartment).map(
+                        (dept, index) => (
+                          <tr key={index}>
+                            <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px] text-sm text-[#111827]">
+                              <Text>{dept.name}</Text>
+                            </td>
+                            <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px] text-sm text-[#111827]">
+                              <Text>{dept.ticketCount}</Text>
+                            </td>
+                            <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px] text-sm text-[#111827]">{`${dept.achievementRate}%`}</td>
+                            <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px] text-sm text-[#111827]">
+                              <Text>
+                                {this.formatTime(dept.avgResponseTime)}
+                              </Text>
+                            </td>
+                            <td className="pl-[24px] pr-[24px] pt-[16px] pb-[16px] text-sm text-[#111827]">
+                              <Text>
+                                {this.formatTime(dept.avgResolveTime)}
+                              </Text>
+                            </td>
+                          </tr>
+                        )
+                      )}
+                    </tbody>
+                  </table>
+                </View>
+              </View>
+            </View>
+          )}
+          {!!(this.state.activeTab === 'settings') && (
+            <View className="space-y-6">
+              <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="p-[24px]">
+                  <h3 className="text-lg font-medium text-[#111827] mb-[16px]">
+                    工作时间设置
+                  </h3>
+                  <View className="space-y-3">
+                    {this.state.workingHours.map((wh, index) => (
+                      <View key={index} className="gap-4 flex items-center">
+                        <View className="w-[96px]">
+                          <Text className="text-sm font-medium text-[#374151]">
+                            {wh.day === 'monday'
+                              ? '周一'
+                              : wh.day === 'tuesday'
+                              ? '周二'
+                              : wh.day === 'wednesday'
+                              ? '周三'
+                              : wh.day === 'thursday'
+                              ? '周四'
+                              : wh.day === 'friday'
+                              ? '周五'
+                              : wh.day === 'saturday'
+                              ? '周六'
+                              : '周日'}
+                          </Text>
+                        </View>
+                        <input
+                          type="checkbox"
+                          checked={wh.enabled}
+                          onChange={e =>
+                            this.updateWorkingHours(
+                              wh.day,
+                              'enabled',
+                              e.target.checked
+                            )
+                          }
+                          className="rounded"
+                        />
+                        <input
+                          type="time"
+                          value={wh.start}
+                          onChange={e =>
+                            this.updateWorkingHours(
+                              wh.day,
+                              'start',
+                              e.target.value
+                            )
+                          }
+                          disabled={!wh.enabled}
+                          className="pl-[8px] pr-[8px] pt-[4px] pb-[4px] border border-solid rounded"
+                        />
+                        <Text className="text-[#6b7280]">至</Text>
+                        <input
+                          type="time"
+                          value={wh.end}
+                          onChange={e =>
+                            this.updateWorkingHours(
+                              wh.day,
+                              'end',
+                              e.target.value
+                            )
+                          }
+                          disabled={!wh.enabled}
+                          className="pl-[8px] pr-[8px] pt-[4px] pb-[4px] border border-solid rounded"
+                        />
+                      </View>
+                    ))}
+                  </View>
+                </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="p-[24px]">
+                  <View className="flex justify-between items-center mb-[16px]">
+                    <h3 className="text-lg font-medium text-[#111827]">
+                      节假日设置
+                    </h3>
+                    <button className="bg-blue-600 hover:bg-blue-700 pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#ffffff] rounded-lg">
+                      添加节假日
+                    </button>
+                  </View>
+                  <View className="space-y-2">
+                    {this.state.holidays.map((holiday, index) => (
+                      <View
+                        key={index}
+                        className="flex items-center justify-between p-[12px] bg-[var(--gray-50)] rounded"
+                      >
+                        <View>
+                          <View className="font-medium text-[#111827]">
+                            <Text>{holiday.name}</Text>
+                          </View>
+                          <View className="text-sm text-[#6b7280]">
+                            <Text>{holiday.date}</Text>
+                          </View>
+                        </View>
+                        <button
+                          onClick={() => this.removeHoliday(holiday.id)}
+                          className="text-red-600 hover:text-red-800"
+                        >
+                          删除
+                        </button>
+                      </View>
+                    ))}
+                  </View>
+                </View>
+              </View>
+            </View>
+          )}
+          {!!this.state.showPolicyModal && (
+            <View className="inset-0 fixed bg-[var(--opacity-50)] overflow-y-auto h-full w-full z-50">
+              <View className="relative top-[40px] ml-[auto] mr-[auto] p-[20px] border border-solid w-[384px] shadow-[0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)] rounded-md bg-[#ffffff]">
+                <View className="mt-[12px]">
+                  <h3 className="text-lg [lineHeight:6] font-medium text-[#111827] mb-[16px]">
+                    {this.state.editingPolicy?.id
+                      ? '编辑SLA策略'
+                      : '创建SLA策略'}
+                  </h3>
+                  <View className="space-y-4">
+                    <View>
+                      <label className="block text-sm font-medium text-[#374151]">
+                        策略名称
+                      </label>
+                      <input
+                        type="text"
+                        className="block border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 mt-[4px] w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-md shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]"
+                        value={this.state.editingPolicy?.name || ''}
+                        onChange={e =>
+                          this.setState({
+                            editingPolicy: {
+                              ...this.state.editingPolicy,
+                              name: e.target.value,
+                            },
+                          })
+                        }
+                      />
+                    </View>
+                    <View>
+                      <label className="block text-sm font-medium text-[#374151]">
+                        工单类型
+                      </label>
+                      <select
+                        className="block border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 mt-[4px] w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-md shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]"
+                        value={this.state.editingPolicy?.ticketType || ''}
+                        onChange={e =>
+                          this.setState({
+                            editingPolicy: {
+                              ...this.state.editingPolicy,
+                              ticketType: e.target.value,
+                            },
+                          })
+                        }
+                      >
+                        <option value="">请选择工单类型</option>
+                        {this.state.ticketTypes.map((type, index) => (
+                          <option key={index} value={type.value}>
+                            <Text>{type.label}</Text>
+                          </option>
+                        ))}
+                      </select>
+                    </View>
+                    <View>
+                      <label className="block text-sm font-medium text-[#374151]">
+                        优先级
+                      </label>
+                      <select
+                        className="block border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 mt-[4px] w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-md shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]"
+                        value={this.state.editingPolicy?.priority || ''}
+                        onChange={e =>
+                          this.setState({
+                            editingPolicy: {
+                              ...this.state.editingPolicy,
+                              priority: e.target.value,
+                            },
+                          })
+                        }
+                      >
+                        <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]">
+                        响应时间(分钟)
+                      </label>
+                      <input
+                        type="number"
+                        className="block border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 mt-[4px] w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-md shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]"
+                        value={this.state.editingPolicy?.responseTime || 0}
+                        onChange={e =>
+                          this.setState({
+                            editingPolicy: {
+                              ...this.state.editingPolicy,
+                              responseTime: parseInt(e.target.value) || 0,
+                            },
+                          })
+                        }
+                      />
+                    </View>
+                    <View>
+                      <label className="block text-sm font-medium text-[#374151]">
+                        解决时间(分钟)
+                      </label>
+                      <input
+                        type="number"
+                        className="block border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 mt-[4px] w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-md shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)]"
+                        value={this.state.editingPolicy?.resolveTime || 0}
+                        onChange={e =>
+                          this.setState({
+                            editingPolicy: {
+                              ...this.state.editingPolicy,
+                              resolveTime: parseInt(e.target.value) || 0,
+                            },
+                          })
+                        }
+                      />
+                    </View>
+                    <View>
+                      <label className="flex items-center">
+                        <input
+                          type="checkbox"
+                          checked={this.state.editingPolicy?.active || false}
+                          onChange={e =>
+                            this.setState({
+                              editingPolicy: {
+                                ...this.state.editingPolicy,
+                                active: e.target.checked,
+                              },
+                            })
+                          }
+                          className="rounded"
+                        />
+                        <Text className="ml-[8px] text-sm text-[#374151]">
+                          启用策略
+                        </Text>
+                      </label>
+                    </View>
+                  </View>
+                  <View className="gap-3 flex justify-end mt-[24px]">
+                    <button
+                      onClick={() => this.closePolicyModal()}
+                      className="bg-gray-300 hover:bg-gray-400 pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#374151] rounded-md"
+                    >
+                      取消
+                    </button>
+                    <button
+                      onClick={() => this.savePolicy()}
+                      className="bg-blue-600 hover:bg-blue-700 pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#ffffff] rounded-md"
+                    >
+                      保存
+                    </button>
+                  </View>
+                </View>
+              </View>
+            </View>
+          )}
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;