@appthen/cli 1.2.10 → 1.2.12

package/tests/test-app/src/pages/housekeeping/adminDashboardPage.tsx

@@ -0,0 +1,880 @@
+/**
+ * 家政管理后台
+ * @type Page
+ * @route /housekeeping/admin
+ * @screen 1400x900 #f5f5f5
+ * @frames web
+ */
+import React from 'react';
+import { Button, Form, Input, Menu, Modal, Select, Space, Table, Tag } from '@appthen/antd';
+
+
+class IProps {
+  /* 页面标题 */
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 当前激活的标签页 */
+  activeTab?: string;
+  /* 服务人员列表 */
+  staff?: {
+    /* @example 1 */id?: number,
+    /* @example 张阿姨 */name?: string,
+    /* @example 138****1234 */phone?: string,
+    /* @example 保洁、做饭 */skill?: string,
+    /* @example 4.8 */rating?: number,
+    /* @example 156 */orders?: number,
+    /* @example available */status?: string,
+  }[];
+  /* 订单列表 */
+  orders?: {
+    /* @example 1001 */id?: number,
+    /* @example 陈先生 */customer?: string,
+    /* @example 家庭保洁 */service?: string,
+    /* @example 张阿姨 */staff?: string,
+    /* @example 2025-01-15 */date?: string,
+    /* @example 200 */amount?: number,
+    /* @example completed */status?: string,
+  }[];
+  /* 统计数据 */
+  stats?: {
+    /* @example 128 */totalStaff?: number,
+    /* @example 2456 */totalOrders?: number,
+    /* @example 42 */todayOrders?: number,
+    /* @example 386500 */revenue?: number,
+  };
+  /* 搜索关键词 */
+  searchKeyword?: string;
+  /* 模态框显示状态 */
+  modalVisible?: boolean;
+  /* 当前编辑项 */
+  currentItem?: any;
+  /* 模态框类型 */
+  modalType?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    activeTab: 'overview',
+    staff: [
+      {
+        id: 1,
+        name: '张阿姨',
+        phone: '138****1234',
+        skill: '保洁、做饭',
+        rating: 4.8,
+        orders: 156,
+        status: 'available',
+      },
+      {
+        id: 2,
+        name: '李阿姨',
+        phone: '139****5678',
+        skill: '保洁、收纳',
+        rating: 4.9,
+        orders: 203,
+        status: 'busy',
+      },
+      {
+        id: 3,
+        name: '王阿姨',
+        phone: '137****9012',
+        skill: '做饭、月嫂',
+        rating: 4.7,
+        orders: 89,
+        status: 'available',
+      },
+      {
+        id: 4,
+        name: '赵阿姨',
+        phone: '136****3456',
+        skill: '保洁、护工',
+        rating: 4.6,
+        orders: 124,
+        status: 'off',
+      },
+      {
+        id: 5,
+        name: '孙阿姨',
+        phone: '135****7890',
+        skill: '做饭、保洁',
+        rating: 4.8,
+        orders: 178,
+        status: 'available',
+      },
+    ],
+    orders: [
+      {
+        id: 1001,
+        customer: '陈先生',
+        service: '家庭保洁',
+        staff: '张阿姨',
+        date: '2025-01-15',
+        amount: 200,
+        status: 'completed',
+      },
+      {
+        id: 1002,
+        customer: '林女士',
+        service: '月嫂服务',
+        staff: '王阿姨',
+        date: '2025-01-15',
+        amount: 8000,
+        status: 'ongoing',
+      },
+      {
+        id: 1003,
+        customer: '周先生',
+        service: '做饭服务',
+        staff: '孙阿姨',
+        date: '2025-01-16',
+        amount: 150,
+        status: 'pending',
+      },
+      {
+        id: 1004,
+        customer: '吴女士',
+        service: '收纳整理',
+        staff: '李阿姨',
+        date: '2025-01-16',
+        amount: 300,
+        status: 'confirmed',
+      },
+      {
+        id: 1005,
+        customer: '郑先生',
+        service: '老人陪护',
+        staff: '赵阿姨',
+        date: '2025-01-17',
+        amount: 400,
+        status: 'pending',
+      },
+    ],
+    stats: {
+      totalStaff: 128,
+      totalOrders: 2456,
+      todayOrders: 42,
+      revenue: 386500,
+    },
+    searchKeyword: '',
+    modalVisible: false,
+    currentItem: null,
+    modalType: '',
+  };
+
+  handleTabChange(tab) {
+    this.setState({
+      activeTab: tab,
+    });
+  }
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword,
+    });
+  }
+
+  handleAddStaff() {
+    this.setState({
+      modalVisible: true,
+      modalType: 'staff',
+      currentItem: null,
+    });
+  }
+
+  handleEditStaff(item) {
+    this.setState({
+      modalVisible: true,
+      modalType: 'staff',
+      currentItem: item,
+    });
+  }
+
+  handleDeleteStaff(item) {
+    this.utils.confirm('确认删除该服务人员吗？', () => {
+      const staff = this.state.staff.filter(s => s.id !== item.id);
+      this.setState({
+        staff,
+      });
+      this.utils.toast('删除成功');
+    });
+  }
+
+  handleUpdateOrderStatus(order, status) {
+    const orders = this.state.orders.map(o =>
+      o.id === order.id
+        ? {
+            ...o,
+            status,
+          }
+        : o
+    );
+    this.setState({
+      orders,
+    });
+    this.utils.toast('状态更新成功');
+  }
+
+  handleModalClose() {
+    this.setState({
+      modalVisible: false,
+    });
+  }
+
+  handleSubmit(values) {
+    if (this.state.modalType === 'staff') {
+      if (this.state.currentItem) {
+        const staff = this.state.staff.map(item =>
+          item.id === this.state.currentItem.id
+            ? {
+                ...item,
+                ...values,
+              }
+            : item
+        );
+        this.setState({
+          staff,
+        });
+      } else {
+        const staff = [
+          ...this.state.staff,
+          {
+            id: Date.now(),
+            ...values,
+            orders: 0,
+            rating: 0,
+            status: 'available',
+          },
+        ];
+        this.setState({
+          staff,
+        });
+      }
+    }
+    this.setState({
+      modalVisible: false,
+    });
+    this.utils.toast('保存成功');
+  }
+
+  getFilteredStaff() {
+    const keyword = this.state.searchKeyword?.toLowerCase();
+    if (!keyword) return this.state.staff;
+    return this.state.staff.filter(
+      s =>
+        s.name?.toLowerCase().includes(keyword) ||
+        s.phone?.includes(keyword) ||
+        s.skill?.toLowerCase().includes(keyword)
+    );
+  }
+
+  getFilteredOrders() {
+    const keyword = this.state.searchKeyword?.toLowerCase();
+    if (!keyword) return this.state.orders;
+    return this.state.orders.filter(
+      o =>
+        o.customer?.toLowerCase().includes(keyword) ||
+        o.service?.toLowerCase().includes(keyword) ||
+        o.staff?.toLowerCase().includes(keyword)
+    );
+  }
+
+  render() {
+    return (
+      <Page className="min-h-screen bg-[#f3f4f6] flex">
+        <View className="bg-gradient-to-b from-indigo-900 to-indigo-800 w-[288px] shadow-[0 25px 50px -12px rgb(0 0 0 / 0.25)]">
+          <View className="border-indigo-700 p-[32px] border-b-[1px] border-b-solid">
+            <View className="space-x-3 flex items-center">
+              <View className="w-[40px] h-[40px] bg-[#ffffff] rounded-xl flex items-center justify-center shadow-[0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)]">
+                <Text className="text-2xl">🏠</Text>
+              </View>
+              <h1 className="text-xl font-bold text-[#ffffff] tracking-[0.025em]">
+                家政管家
+              </h1>
+            </View>
+          </View>
+          <nav className="p-[24px]">
+            <Menu
+              selectedKeys={[this.state.activeTab]}
+              mode="inline"
+              theme="dark"
+              className="border-none bg-[var(--transparent)]"
+              items={[
+                {
+                  key: 'overview',
+                  icon: <Text>📊</Text>,
+                  label: <Text>数据概览</Text>,
+                  onClick: function () {
+                    return this.handleTabChange('overview');
+                  },
+                },
+                {
+                  key: 'staff',
+                  icon: <Text>👥</Text>,
+                  label: <Text>服务人员</Text>,
+                  onClick: function () {
+                    return this.handleTabChange('staff');
+                  },
+                },
+                {
+                  key: 'orders',
+                  icon: <Text>📋</Text>,
+                  label: <Text>订单管理</Text>,
+                  onClick: function () {
+                    return this.handleTabChange('orders');
+                  },
+                },
+              ]}
+            />
+          </nav>
+        </View>
+        <View className="flex-1 p-[32px]">
+          {!!(this.state.activeTab === 'overview') && (
+            <View>
+              <h2 className="text-2xl font-bold text-[#1f2937] mb-[24px]">
+                数据概览
+              </h2>
+              <View className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-[32px]">
+                <View className="transform hover:scale-105 transition-all duration-300 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl shadow-[0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)] p-[24px]">
+                  <View className="flex items-center justify-between">
+                    <View>
+                      <p className="text-[var(--blue-100)] text-sm font-medium">
+                        服务人员总数
+                      </p>
+                      <p className="text-4xl font-bold text-[#ffffff] mt-[8px]">
+                        <Text>{this.state.stats?.totalStaff}</Text>
+                      </p>
+                      <p className="text-[var(--blue-200)] text-xs mt-[8px]">
+                        ↑ 12% 较上月
+                      </p>
+                    </View>
+                    <View className="bg-white/20 backdrop-blur w-[64px] h-[64px] rounded-2xl flex items-center justify-center">
+                      <Text className="text-3xl">👥</Text>
+                    </View>
+                  </View>
+                </View>
+                <View className="transform hover:scale-105 transition-all duration-300 bg-gradient-to-br from-[var(--emerald-500)] to-[var(--emerald-600)] rounded-2xl shadow-[0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)] p-[24px]">
+                  <View className="flex items-center justify-between">
+                    <View>
+                      <p className="text-[var(--emerald-100)] text-sm font-medium">
+                        订单总数
+                      </p>
+                      <p className="text-4xl font-bold text-[#ffffff] mt-[8px]">
+                        <Text>{this.state.stats?.totalOrders}</Text>
+                      </p>
+                      <p className="text-[var(--emerald-200)] text-xs mt-[8px]">
+                        ↑ 8% 较上月
+                      </p>
+                    </View>
+                    <View className="bg-white/20 backdrop-blur w-[64px] h-[64px] rounded-2xl flex items-center justify-center">
+                      <Text className="text-3xl">📋</Text>
+                    </View>
+                  </View>
+                </View>
+                <View className="transform hover:scale-105 transition-all duration-300 bg-gradient-to-br from-[var(--amber-500)] to-[#f97316] rounded-2xl shadow-[0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)] p-[24px]">
+                  <View className="flex items-center justify-between">
+                    <View>
+                      <p className="text-[var(--amber-100)] text-sm font-medium">
+                        今日订单
+                      </p>
+                      <p className="text-4xl font-bold text-[#ffffff] mt-[8px]">
+                        <Text>{this.state.stats?.todayOrders}</Text>
+                      </p>
+                      <p className="text-[var(--amber-200)] text-xs mt-[8px]">
+                        ↑ 5% 较昨日
+                      </p>
+                    </View>
+                    <View className="bg-white/20 backdrop-blur w-[64px] h-[64px] rounded-2xl flex items-center justify-center">
+                      <Text className="text-3xl">📅</Text>
+                    </View>
+                  </View>
+                </View>
+                <View className="transform hover:scale-105 transition-all duration-300 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl shadow-[0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)] p-[24px]">
+                  <View className="flex items-center justify-between">
+                    <View>
+                      <p className="text-[var(--purple-100)] text-sm font-medium">
+                        总收入
+                      </p>
+                      <p className="text-4xl font-bold text-[#ffffff] mt-[8px]">
+                        <Text>
+                          ¥{this.state.stats?.revenue?.toLocaleString()}
+                        </Text>
+                      </p>
+                      <p className="text-[var(--purple-200)] text-xs mt-[8px]">
+                        ↑ 15% 较上月
+                      </p>
+                    </View>
+                    <View className="bg-white/20 backdrop-blur w-[64px] h-[64px] rounded-2xl flex items-center justify-center">
+                      <Text className="text-3xl">💰</Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+              <View className="bg-[#ffffff] rounded-2xl shadow-[0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)] overflow-hidden">
+                <View className="border-gray-100 bg-gradient-to-r from-[#f9fafb] to-white p-[24px] border-b-[1px] border-b-solid">
+                  <h3 className="text-lg font-bold text-[#1f2937]">最近订单</h3>
+                </View>
+                <Table
+                  dataSource={this.state.orders?.slice(0, 5)}
+                  rowKey="id"
+                  pagination={false}
+                  columns={[
+                    {
+                      title: <Text>订单号</Text>,
+                      dataIndex: 'id',
+                      key: 'id',
+                      render: id => (
+                        <Text className="font-bold text-[var(--indigo-600)]">
+                          #{id}
+                        </Text>
+                      ),
+                    },
+                    {
+                      title: <Text>客户</Text>,
+                      dataIndex: 'customer',
+                      key: 'customer',
+                    },
+                    {
+                      title: <Text>服务类型</Text>,
+                      dataIndex: 'service',
+                      key: 'service',
+                      render: service => (
+                        <Tag color="blue">
+                          <Text>{service}</Text>
+                        </Tag>
+                      ),
+                    },
+                    {
+                      title: <Text>服务人员</Text>,
+                      dataIndex: 'staff',
+                      key: 'staff',
+                    },
+                    {
+                      title: <Text>金额</Text>,
+                      dataIndex: 'amount',
+                      key: 'amount',
+                      render: amount => (
+                        <Text className="font-bold">¥{amount}</Text>
+                      ),
+                    },
+                    {
+                      title: <Text>状态</Text>,
+                      dataIndex: 'status',
+                      key: 'status',
+                      render: status =>
+                        (() => {
+                          const statusConfig = {
+                            completed: {
+                              color: 'success',
+                              text: '已完成',
+                            },
+                            ongoing: {
+                              color: 'processing',
+                              text: '进行中',
+                            },
+                            confirmed: {
+                              color: 'warning',
+                              text: '已确认',
+                            },
+                            pending: {
+                              color: 'default',
+                              text: '待处理',
+                            },
+                          };
+                          const config =
+                            statusConfig[status] || statusConfig.pending;
+                          return (
+                            <Tag color={config.color}>
+                              <Text>{config.text}</Text>
+                            </Tag>
+                          );
+                        })(),
+                    },
+                  ]}
+                />
+              </View>
+            </View>
+          )}
+          {!!(this.state.activeTab === 'staff') && (
+            <View>
+              <View className="flex items-center justify-between mb-[32px]">
+                <h2 className="text-2xl font-bold text-[#1f2937]">
+                  服务人员管理
+                </h2>
+                <Button
+                  type="primary"
+                  size="large"
+                  onClick={() => this.handleAddStaff()}
+                  className="border-none hover:from-indigo-600 hover:to-indigo-700 bg-gradient-to-r from-indigo-500 to-indigo-600"
+                >
+                  <Text>➕ 新增服务人员</Text>
+                </Button>
+              </View>
+              <View className="mb-[24px]">
+                <Input
+                  placeholder="搜索姓名、电话或技能..."
+                  prefix={<Text>🔍</Text>}
+                  value={this.state.searchKeyword}
+                  onChange={e => this.handleSearch(e.target.value)}
+                  size="large"
+                  allowClear={true}
+                  className=""
+                />
+              </View>
+              <View className="bg-[#ffffff] rounded-2xl shadow-[0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)] overflow-hidden">
+                <Table
+                  dataSource={this.getFilteredStaff()}
+                  rowKey="id"
+                  pagination={{ pageSize: 10 }}
+                  columns={[
+                    {
+                      title: <Text>姓名</Text>,
+                      dataIndex: 'name',
+                      key: 'name',
+                      render: name => (
+                        <Space>
+                          <View className="bg-gradient-to-br from-indigo-400 to-indigo-500 w-[40px] h-[40px] rounded-full flex items-center justify-center text-[#ffffff] font-bold text-sm">
+                            <Text>{name?.charAt(0)}</Text>
+                          </View>
+                          <Text className="font-bold">{name}</Text>
+                        </Space>
+                      ),
+                    },
+                    {
+                      title: <Text>电话</Text>,
+                      dataIndex: 'phone',
+                      key: 'phone',
+                    },
+                    {
+                      title: <Text>技能</Text>,
+                      dataIndex: 'skill',
+                      key: 'skill',
+                      render: skill => (
+                        <Tag color="indigo">
+                          <Text>{skill}</Text>
+                        </Tag>
+                      ),
+                    },
+                    {
+                      title: <Text>评分</Text>,
+                      dataIndex: 'rating',
+                      key: 'rating',
+                      render: rating => (
+                        <Space>
+                          <Text>⭐</Text>
+                          <Text className="font-bold">{rating}</Text>
+                        </Space>
+                      ),
+                    },
+                    {
+                      title: <Text>订单数</Text>,
+                      dataIndex: 'orders',
+                      key: 'orders',
+                    },
+                    {
+                      title: <Text>状态</Text>,
+                      dataIndex: 'status',
+                      key: 'status',
+                      render: status =>
+                        (() => {
+                          const statusConfig = {
+                            available: {
+                              color: 'success',
+                              text: '空闲',
+                            },
+                            busy: {
+                              color: 'error',
+                              text: '忙碌',
+                            },
+                            off: {
+                              color: 'default',
+                              text: '休息',
+                            },
+                          };
+                          const config =
+                            statusConfig[status] || statusConfig.off;
+                          return (
+                            <Tag color={config.color}>
+                              <Text>{config.text}</Text>
+                            </Tag>
+                          );
+                        })(),
+                    },
+                    {
+                      title: <Text>操作</Text>,
+                      key: 'action',
+                      render: (_, record) => (
+                        <Space>
+                          <Button
+                            type="link"
+                            size="small"
+                            onClick={() => this.handleEditStaff(record)}
+                          >
+                            <Text>✏️ 编辑</Text>
+                          </Button>
+                          <Button
+                            type="link"
+                            danger={true}
+                            size="small"
+                            onClick={() => this.handleDeleteStaff(record)}
+                          >
+                            <Text>🗑️ 删除</Text>
+                          </Button>
+                        </Space>
+                      ),
+                    },
+                  ]}
+                />
+              </View>
+            </View>
+          )}
+          {!!(this.state.activeTab === 'orders') && (
+            <View>
+              <h2 className="text-2xl font-bold text-[#1f2937] mb-[32px]">
+                订单管理
+              </h2>
+              <View className="mb-[24px]">
+                <Input
+                  placeholder="搜索客户、服务类型或服务人员..."
+                  prefix={<Text>🔍</Text>}
+                  value={this.state.searchKeyword}
+                  onChange={e => this.handleSearch(e.target.value)}
+                  size="large"
+                  allowClear={true}
+                  className=""
+                />
+              </View>
+              <View className="bg-[#ffffff] rounded-2xl shadow-[0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)] overflow-hidden">
+                <Table
+                  dataSource={this.getFilteredOrders()}
+                  rowKey="id"
+                  pagination={{ pageSize: 10 }}
+                  columns={[
+                    {
+                      title: <Text>订单号</Text>,
+                      dataIndex: 'id',
+                      key: 'id',
+                      render: id => (
+                        <Text className="font-bold text-[var(--indigo-600)]">
+                          #{id}
+                        </Text>
+                      ),
+                    },
+                    {
+                      title: <Text>客户</Text>,
+                      dataIndex: 'customer',
+                      key: 'customer',
+                      render: customer => (
+                        <Space>
+                          <View className="bg-gradient-to-br from-[var(--amber-400)] to-[#f97316] w-[32px] h-[32px] rounded-full flex items-center justify-center text-[#ffffff] font-bold text-xs">
+                            <Text>{customer?.charAt(0)}</Text>
+                          </View>
+                          <Text className="font-medium">{customer}</Text>
+                        </Space>
+                      ),
+                    },
+                    {
+                      title: <Text>服务类型</Text>,
+                      dataIndex: 'service',
+                      key: 'service',
+                      render: service => (
+                        <Tag color="blue">
+                          <Text>{service}</Text>
+                        </Tag>
+                      ),
+                    },
+                    {
+                      title: <Text>服务人员</Text>,
+                      dataIndex: 'staff',
+                      key: 'staff',
+                    },
+                    {
+                      title: <Text>日期</Text>,
+                      dataIndex: 'date',
+                      key: 'date',
+                    },
+                    {
+                      title: <Text>金额</Text>,
+                      dataIndex: 'amount',
+                      key: 'amount',
+                      render: amount => (
+                        <Text className="font-bold">¥{amount}</Text>
+                      ),
+                    },
+                    {
+                      title: <Text>状态</Text>,
+                      dataIndex: 'status',
+                      key: 'status',
+                      render: status =>
+                        (() => {
+                          const statusConfig = {
+                            completed: {
+                              color: 'success',
+                              text: '已完成',
+                            },
+                            ongoing: {
+                              color: 'processing',
+                              text: '进行中',
+                            },
+                            confirmed: {
+                              color: 'warning',
+                              text: '已确认',
+                            },
+                            pending: {
+                              color: 'default',
+                              text: '待处理',
+                            },
+                          };
+                          const config =
+                            statusConfig[status] || statusConfig.pending;
+                          return (
+                            <Tag color={config.color}>
+                              <Text>{config.text}</Text>
+                            </Tag>
+                          );
+                        })(),
+                    },
+                    {
+                      title: <Text>操作</Text>,
+                      key: 'action',
+                      render: (_, record) => (
+                        <Space>
+                          {!!(record.status === 'pending') && (
+                            <Button
+                              type="link"
+                              size="small"
+                              onClick={() =>
+                                this.handleUpdateOrderStatus(
+                                  record,
+                                  'confirmed'
+                                )
+                              }
+                            >
+                              <Text>✓ 确认</Text>
+                            </Button>
+                          )}
+                          {!!(record.status === 'confirmed') && (
+                            <Button
+                              type="link"
+                              size="small"
+                              onClick={() =>
+                                this.handleUpdateOrderStatus(record, 'ongoing')
+                              }
+                            >
+                              <Text>▶ 开始</Text>
+                            </Button>
+                          )}
+                          {!!(record.status === 'ongoing') && (
+                            <Button
+                              type="link"
+                              size="small"
+                              onClick={() =>
+                                this.handleUpdateOrderStatus(
+                                  record,
+                                  'completed'
+                                )
+                              }
+                            >
+                              <Text>✓ 完成</Text>
+                            </Button>
+                          )}
+                        </Space>
+                      ),
+                    },
+                  ]}
+                />
+              </View>
+            </View>
+          )}
+        </View>
+        {!!this.state.modalVisible && (
+          <View className="inset-0 fixed bg-[var(--opacity-50)] flex items-center justify-center z-50">
+            <View className="bg-[#ffffff] rounded-lg shadow-[0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)] w-full p-[24px]">
+              <h2 className="text-xl font-bold mb-[16px]">
+                <Text>{this.state.currentItem ? '编辑' : '新增'}服务人员</Text>
+              </h2>
+              <form
+                onSubmit={e => {
+                  e.preventDefault();
+                  const formData = new FormData(e.target);
+                  const values = Object.fromEntries(formData);
+                  this.handleSubmit(values);
+                }}
+              >
+                <View className="mb-[16px]">
+                  <label className="block text-sm font-medium text-[#374151] mb-[8px]">
+                    <Text>姓名</Text>
+                  </label>
+                  <input
+                    name="name"
+                    defaultValue={this.state.currentItem?.name}
+                    className="border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+                    required={true}
+                  />
+                </View>
+                <View className="mb-[16px]">
+                  <label className="block text-sm font-medium text-[#374151] mb-[8px]">
+                    <Text>电话</Text>
+                  </label>
+                  <input
+                    name="phone"
+                    defaultValue={this.state.currentItem?.phone}
+                    className="border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+                    required={true}
+                  />
+                </View>
+                <View className="mb-[16px]">
+                  <label className="block text-sm font-medium text-[#374151] mb-[8px]">
+                    <Text>技能</Text>
+                  </label>
+                  <input
+                    name="skill"
+                    defaultValue={this.state.currentItem?.skill}
+                    placeholder="例如：保洁、做饭、收纳"
+                    className="border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+                    required={true}
+                  />
+                </View>
+                <View className="mb-[16px]">
+                  <label className="block text-sm font-medium text-[#374151] mb-[8px]">
+                    <Text>状态</Text>
+                  </label>
+                  <select
+                    name="status"
+                    defaultValue={this.state.currentItem?.status || 'available'}
+                    className="border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full pl-[12px] pr-[12px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+                  >
+                    <option value="available">空闲</option>
+                    <option value="busy">忙碌</option>
+                    <option value="off">休息</option>
+                  </select>
+                </View>
+                <View className="space-x-3 flex justify-end">
+                  <button
+                    type="button"
+                    onClick={() => this.handleModalClose()}
+                    className="border-gray-300 hover:bg-gray-50 transition-colors pl-[16px] pr-[16px] pt-[8px] pb-[8px] border border-solid rounded-lg"
+                  >
+                    <Text>取消</Text>
+                  </button>
+                  <button
+                    type="submit"
+                    className="bg-blue-500 hover:bg-blue-600 transition-colors pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#ffffff] rounded-lg"
+                  >
+                    <Text>保存</Text>
+                  </button>
+                </View>
+              </form>
+            </View>
+          </View>
+        )}
+      </Page>
+    );
+  }
+}
+
+export default Document;