@appthen/cli 1.2.11 → 1.2.12

package/tests/test-app/src/pages/cyberpunk/cyberpunkCRMPage.tsx

@@ -0,0 +1,1299 @@
+/**
+ * 赛博朋克风格 CRM
+ * @type Page
+ * @route /cyberpunk/crm
+ * @screen 1400x900 #0a0a0f
+ * @frames web
+ */
+import React from 'react';
+import { Button, Card, Form, Input, Menu, Modal, Progress, Select, Space, Statistic, Table, Tag } from '@appthen/antd';
+
+
+class IProps {
+  /* 页面标题 */
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 当前激活的标签页 */
+  activeTab?: string;
+  /* 客户列表 */
+  customers?: {
+    /* @example 1 */id?: number,
+    /* @example 未来科技 */name?: string,
+    /* @example 人工智能 */industry?: string,
+    /* @example 2500000 */revenue?: number,
+    /* @example active */status?: string,
+    /* @example 张三 */contact?: string,
+    /* @example zhang@future.tech */email?: string,
+  }[];
+  /* 销售数据 */
+  sales?: {
+    /* @example 12550000 */totalRevenue?: number,
+    /* @example 128 */newCustomers?: number,
+    /* @example 68 */conversionRate?: number,
+    /* @example 98000 */avgDealSize?: number,
+  };
+  /* 任务列表 */
+  tasks?: {
+    /* @example 1 */id?: number,
+    /* @example 跟进未来科技 */title?: string,
+    /* @example high */priority?: string,
+    /* @example inprogress */status?: string,
+    /* @example 2025-01-20 */dueDate?: string,
+  }[];
+  /* 搜索关键词 */
+  searchKeyword?: string;
+  /* 模态框显示状态 */
+  modalVisible?: boolean;
+  /* 当前编辑项 */
+  currentItem?: any;
+  /* 模态框类型 */
+  modalType?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    activeTab: 'dashboard',
+    customers: [
+      {
+        id: 1,
+        name: '未来科技',
+        industry: '人工智能',
+        revenue: 2500000,
+        status: 'active',
+        contact: '张三',
+        email: 'zhang@future.tech',
+      },
+      {
+        id: 2,
+        name: '星际网络',
+        industry: '云计算',
+        revenue: 1800000,
+        status: 'active',
+        contact: '李四',
+        email: 'li@star.net',
+      },
+      {
+        id: 3,
+        name: '量子动力',
+        industry: '新能源',
+        revenue: 3200000,
+        status: 'pending',
+        contact: '王五',
+        email: 'wang@quantum.power',
+      },
+      {
+        id: 4,
+        name: '虚拟现实',
+        industry: 'VR/AR',
+        revenue: 950000,
+        status: 'active',
+        contact: '赵六',
+        email: 'zhao@vr.real',
+      },
+      {
+        id: 5,
+        name: '生物科技',
+        industry: '生物医药',
+        revenue: 4100000,
+        status: 'inactive',
+        contact: '孙七',
+        email: 'sun@bio.tech',
+      },
+    ],
+    sales: {
+      totalRevenue: 12550000,
+      newCustomers: 128,
+      conversionRate: 68,
+      avgDealSize: 98000,
+    },
+    tasks: [
+      {
+        id: 1,
+        title: '跟进未来科技',
+        priority: 'high',
+        status: 'inprogress',
+        dueDate: '2025-01-20',
+      },
+      {
+        id: 2,
+        title: '准备量子动力提案',
+        priority: 'high',
+        status: 'pending',
+        dueDate: '2025-01-22',
+      },
+      {
+        id: 3,
+        title: '客户满意度调研',
+        priority: 'medium',
+        status: 'completed',
+        dueDate: '2025-01-18',
+      },
+      {
+        id: 4,
+        title: '更新销售数据',
+        priority: 'low',
+        status: 'pending',
+        dueDate: '2025-01-25',
+      },
+      {
+        id: 5,
+        title: '团队周会',
+        priority: 'medium',
+        status: 'inprogress',
+        dueDate: '2025-01-19',
+      },
+    ],
+    searchKeyword: '',
+    modalVisible: false,
+    currentItem: null,
+    modalType: '',
+  };
+
+  handleTabChange(tab) {
+    this.setState({
+      activeTab: tab,
+    });
+  }
+
+  handleSearch(keyword) {
+    this.setState({
+      searchKeyword: keyword,
+    });
+  }
+
+  handleAddCustomer() {
+    this.setState({
+      modalVisible: true,
+      modalType: 'customer',
+      currentItem: null,
+    });
+  }
+
+  handleEditCustomer(item) {
+    this.setState({
+      modalVisible: true,
+      modalType: 'customer',
+      currentItem: item,
+    });
+  }
+
+  handleDeleteCustomer(item) {
+    this.utils.confirm('确认删除该客户吗？', () => {
+      const customers = this.state.customers.filter(c => c.id !== item.id);
+      this.setState({
+        customers,
+      });
+      this.utils.toast('删除成功');
+    });
+  }
+
+  handleAddTask() {
+    this.setState({
+      modalVisible: true,
+      modalType: 'task',
+      currentItem: null,
+    });
+  }
+
+  handleEditTask(item) {
+    this.setState({
+      modalVisible: true,
+      modalType: 'task',
+      currentItem: item,
+    });
+  }
+
+  handleDeleteTask(item) {
+    this.utils.confirm('确认删除该任务吗？', () => {
+      const tasks = this.state.tasks.filter(t => t.id !== item.id);
+      this.setState({
+        tasks,
+      });
+      this.utils.toast('删除成功');
+    });
+  }
+
+  handleModalClose() {
+    this.setState({
+      modalVisible: false,
+    });
+  }
+
+  handleSubmit(values) {
+    if (this.state.modalType === 'customer') {
+      if (this.state.currentItem) {
+        const customers = this.state.customers.map(item =>
+          item.id === this.state.currentItem.id
+            ? {
+                ...item,
+                ...values,
+              }
+            : item
+        );
+        this.setState({
+          customers,
+        });
+      } else {
+        const customers = [
+          ...this.state.customers,
+          {
+            id: Date.now(),
+            ...values,
+            revenue: 0,
+            status: 'pending',
+          },
+        ];
+        this.setState({
+          customers,
+        });
+      }
+    } else if (this.state.modalType === 'task') {
+      if (this.state.currentItem) {
+        const tasks = this.state.tasks.map(item =>
+          item.id === this.state.currentItem.id
+            ? {
+                ...item,
+                ...values,
+              }
+            : item
+        );
+        this.setState({
+          tasks,
+        });
+      } else {
+        const tasks = [
+          ...this.state.tasks,
+          {
+            id: Date.now(),
+            ...values,
+            status: 'pending',
+          },
+        ];
+        this.setState({
+          tasks,
+        });
+      }
+    }
+    this.setState({
+      modalVisible: false,
+    });
+    this.utils.toast('保存成功');
+  }
+
+  getFilteredCustomers() {
+    const keyword = this.state.searchKeyword?.toLowerCase();
+    if (!keyword) return this.state.customers;
+    return this.state.customers.filter(
+      c =>
+        c.name?.toLowerCase().includes(keyword) ||
+        c.industry?.toLowerCase().includes(keyword) ||
+        c.contact?.toLowerCase().includes(keyword)
+    );
+  }
+
+  getFilteredTasks() {
+    const keyword = this.state.searchKeyword?.toLowerCase();
+    if (!keyword) return this.state.tasks;
+    return this.state.tasks.filter(t =>
+      t.title?.toLowerCase().includes(keyword)
+    );
+  }
+
+  render() {
+    return (
+      <Page className="min-h-screen bg-[#0a0a0f] text-[#ffffff] relative overflow-hidden">
+        <View className="inset-0 pointer-events-none absolute bg-[repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 255, 0.03) 2px, rgba(0, 255, 255, 0.03) 4px)] bg-[length:100% 4px]" />
+        <View className="inset-0 pointer-events-none absolute bg-gradient-to-r bg-[linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px)] bg-[length:50px 50px]" />
+        <View className="relative z-10 flex">
+          <View className="border-cyan-500/30 w-[288px] bg-[#0f0f23] border-r border-r-solid shadow-[0 25px 50px -12px rgb(0 0 0 / 0.25)]">
+            <View className="border-cyan-500/30 p-[24px] border-b-[1px] border-b-solid">
+              <View className="space-x-3 flex items-center">
+                <View className="shadow-cyan-500/50 bg-gradient-to-br from-[var(--cyan-400)] to-purple-500 w-[48px] h-[48px] rounded-lg 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>
+                <View>
+                  <h1 className="bg-gradient-to-r from-[var(--cyan-400)] to-purple-500 [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [backgroundClip:text] [WebkitBackgroundClip:text] text-[transparent] text-xl font-bold">
+                    CYBER CRM
+                  </h1>
+                  <p className="text-cyan-500/60 text-xs">v2.0.77</p>
+                </View>
+              </View>
+            </View>
+            <nav className="p-[16px]">
+              <Menu
+                selectedKeys={[this.state.activeTab]}
+                mode="inline"
+                theme="dark"
+                className="border-none cyberpunk-menu bg-[var(--transparent)]"
+                items={[
+                  {
+                    key: 'dashboard',
+                    icon: <Text className="text-[var(--cyan-400)]">📊</Text>,
+                    label: (
+                      <Text className="text-[var(--cyan-100)]">仪表盘</Text>
+                    ),
+                    onClick: function () {
+                      return this.handleTabChange('dashboard');
+                    },
+                  },
+                  {
+                    key: 'customers',
+                    icon: <Text className="text-[var(--purple-400)]">👥</Text>,
+                    label: (
+                      <Text className="text-[var(--cyan-100)]">客户管理</Text>
+                    ),
+                    onClick: function () {
+                      return this.handleTabChange('customers');
+                    },
+                  },
+                  {
+                    key: 'tasks',
+                    icon: <Text className="text-[var(--pink-400)]">📋</Text>,
+                    label: (
+                      <Text className="text-[var(--cyan-100)]">任务管理</Text>
+                    ),
+                    onClick: function () {
+                      return this.handleTabChange('tasks');
+                    },
+                  },
+                ]}
+              />
+            </nav>
+            <View className="border-cyan-500/30 bg-[#0a0a0f]/80 absolute bottom-[0px] left-[0px] right-[0px] p-[16px] border-t border-t-solid">
+              <View className="flex items-center justify-between text-xs">
+                <Text className="text-cyan-500/60">系统状态</Text>
+                <View className="space-x-2 flex items-center">
+                  <Text className="animate-pulse w-[8px] h-[8px] bg-[var(--green-400)] rounded-full" />
+                  <Text className="text-[var(--green-400)]">在线</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View className="flex-1 p-[32px]">
+            {!!(this.state.activeTab === 'dashboard') && (
+              <View>
+                <h2 className="bg-gradient-to-r from-[var(--cyan-400)] via-purple-500 to-[#ec4899] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [backgroundClip:text] [WebkitBackgroundClip:text] text-[transparent] text-3xl font-bold mb-[32px]">
+                  仪表盘
+                </h2>
+                <View className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-[32px]">
+                  <Card className="cyberpunk-card">
+                    <Statistic
+                      title={
+                        <Text className="text-[var(--cyan-400)]">总收入</Text>
+                      }
+                      value={this.state.sales?.totalRevenue}
+                      prefix="¥"
+                      valueStyle={{
+                        color: '#00ffff',
+                        textShadow: '0 0 10px rgba(0, 255, 255, 0.5)',
+                      }}
+                    />
+                    <View className="mt-[16px]">
+                      <Progress
+                        percent={75}
+                        strokeColor="#00ffff"
+                        trailColor="rgba(0, 255, 255, 0.1)"
+                        showInfo={false}
+                      />
+                    </View>
+                  </Card>
+                  <Card className="cyberpunk-card">
+                    <Statistic
+                      title={
+                        <Text className="text-[var(--purple-400)]">新客户</Text>
+                      }
+                      value={this.state.sales?.newCustomers}
+                      valueStyle={{
+                        color: '#bf00ff',
+                        textShadow: '0 0 10px rgba(191, 0, 255, 0.5)',
+                      }}
+                    />
+                    <View className="mt-[16px]">
+                      <Progress
+                        percent={68}
+                        strokeColor="#bf00ff"
+                        trailColor="rgba(191, 0, 255, 0.1)"
+                        showInfo={false}
+                      />
+                    </View>
+                  </Card>
+                  <Card className="cyberpunk-card">
+                    <Statistic
+                      title={
+                        <Text className="text-[var(--pink-400)]">转化率</Text>
+                      }
+                      value={this.state.sales?.conversionRate}
+                      suffix="%"
+                      valueStyle={{
+                        color: '#ff00ff',
+                        textShadow: '0 0 10px rgba(255, 0, 255, 0.5)',
+                      }}
+                    />
+                    <View className="mt-[16px]">
+                      <Progress
+                        percent={68}
+                        strokeColor="#ff00ff"
+                        trailColor="rgba(255, 0, 255, 0.1)"
+                        showInfo={false}
+                      />
+                    </View>
+                  </Card>
+                  <Card className="cyberpunk-card">
+                    <Statistic
+                      title={
+                        <Text className="text-[var(--green-400)]">
+                          平均成交
+                        </Text>
+                      }
+                      value={this.state.sales?.avgDealSize}
+                      prefix="¥"
+                      valueStyle={{
+                        color: '#00ff88',
+                        textShadow: '0 0 10px rgba(0, 255, 136, 0.5)',
+                      }}
+                    />
+                    <View className="mt-[16px]">
+                      <Progress
+                        percent={85}
+                        strokeColor="#00ff88"
+                        trailColor="rgba(0, 255, 136, 0.1)"
+                        showInfo={false}
+                      />
+                    </View>
+                  </Card>
+                </View>
+                <Card
+                  className="cyberpunk-card mb-[32px]"
+                  title={
+                    <Text className="text-[var(--cyan-400)]">客户概览</Text>
+                  }
+                >
+                  <Table
+                    dataSource={this.state.customers}
+                    rowKey="id"
+                    pagination={false}
+                    className="cyberpunk-table"
+                    columns={[
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">
+                            客户名称
+                          </Text>
+                        ),
+                        dataIndex: 'name',
+                        key: 'name',
+                        render: name => (
+                          <Text className="text-[var(--cyan-100)] font-semibold">
+                            {name}
+                          </Text>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">行业</Text>
+                        ),
+                        dataIndex: 'industry',
+                        key: 'industry',
+                        render: industry => (
+                          <Tag color="cyan">
+                            <Text>{industry}</Text>
+                          </Tag>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">收入</Text>
+                        ),
+                        dataIndex: 'revenue',
+                        key: 'revenue',
+                        render: revenue => (
+                          <Text className="text-[var(--purple-400)] font-bold">
+                            ¥{revenue?.toLocaleString()}
+                          </Text>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">状态</Text>
+                        ),
+                        dataIndex: 'status',
+                        key: 'status',
+                        render: status =>
+                          (() => {
+                            const statusConfig = {
+                              active: {
+                                color: 'success',
+                                text: '活跃',
+                              },
+                              pending: {
+                                color: 'warning',
+                                text: '待定',
+                              },
+                              inactive: {
+                                color: 'default',
+                                text: '非活跃',
+                              },
+                            };
+                            const config =
+                              statusConfig[status] || statusConfig.inactive;
+                            return (
+                              <Tag color={config.color}>
+                                <Text>{config.text}</Text>
+                              </Tag>
+                            );
+                          })(),
+                      },
+                    ]}
+                  />
+                </Card>
+                <Card
+                  className="cyberpunk-card"
+                  title={
+                    <Text className="text-[var(--pink-400)]">任务概览</Text>
+                  }
+                >
+                  <Table
+                    dataSource={this.state.tasks}
+                    rowKey="id"
+                    pagination={false}
+                    className="cyberpunk-table"
+                    columns={[
+                      {
+                        title: (
+                          <Text className="text-[var(--pink-400)]">任务</Text>
+                        ),
+                        dataIndex: 'title',
+                        key: 'title',
+                        render: title => (
+                          <Text className="text-[var(--cyan-100)]">
+                            {title}
+                          </Text>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--pink-400)]">优先级</Text>
+                        ),
+                        dataIndex: 'priority',
+                        key: 'priority',
+                        render: priority =>
+                          (() => {
+                            const priorityConfig = {
+                              high: {
+                                color: 'error',
+                                text: '高',
+                              },
+                              medium: {
+                                color: 'warning',
+                                text: '中',
+                              },
+                              low: {
+                                color: 'default',
+                                text: '低',
+                              },
+                            };
+                            const config =
+                              priorityConfig[priority] || priorityConfig.low;
+                            return (
+                              <Tag color={config.color}>
+                                <Text>{config.text}</Text>
+                              </Tag>
+                            );
+                          })(),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--pink-400)]">状态</Text>
+                        ),
+                        dataIndex: 'status',
+                        key: 'status',
+                        render: status =>
+                          (() => {
+                            const statusConfig = {
+                              completed: {
+                                color: 'success',
+                                text: '已完成',
+                              },
+                              inprogress: {
+                                color: 'processing',
+                                text: '进行中',
+                              },
+                              pending: {
+                                color: 'default',
+                                text: '待处理',
+                              },
+                            };
+                            const config =
+                              statusConfig[status] || statusConfig.pending;
+                            return (
+                              <Tag color={config.color}>
+                                <Text>{config.text}</Text>
+                              </Tag>
+                            );
+                          })(),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--pink-400)]">
+                            截止日期
+                          </Text>
+                        ),
+                        dataIndex: 'dueDate',
+                        key: 'dueDate',
+                        render: date => (
+                          <Text className="text-[var(--cyan-100)]">{date}</Text>
+                        ),
+                      },
+                    ]}
+                  />
+                </Card>
+              </View>
+            )}
+            {!!(this.state.activeTab === 'customers') && (
+              <View>
+                <View className="flex items-center justify-between mb-[32px]">
+                  <h2 className="bg-gradient-to-r from-[var(--cyan-400)] to-purple-500 [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [backgroundClip:text] [WebkitBackgroundClip:text] text-[transparent] text-3xl font-bold">
+                    客户管理
+                  </h2>
+                  <Button
+                    type="primary"
+                    size="large"
+                    onClick={() => this.handleAddCustomer()}
+                    className="cyberpunk-button"
+                  >
+                    <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"
+                    className="cyberpunk-input "
+                    allowClear={true}
+                  />
+                </View>
+                <Card className="cyberpunk-card">
+                  <Table
+                    dataSource={this.getFilteredCustomers()}
+                    rowKey="id"
+                    pagination={{ pageSize: 10 }}
+                    className="cyberpunk-table"
+                    columns={[
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">
+                            客户名称
+                          </Text>
+                        ),
+                        dataIndex: 'name',
+                        key: 'name',
+                        render: name => (
+                          <Space>
+                            <View className="bg-gradient-to-br from-[var(--cyan-400)] to-purple-500 w-[40px] h-[40px] rounded-lg flex items-center justify-center text-[#ffffff] font-bold">
+                              <Text>{name?.charAt(0)}</Text>
+                            </View>
+                            <Text className="text-[var(--cyan-100)] font-bold text-lg">
+                              {name}
+                            </Text>
+                          </Space>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">行业</Text>
+                        ),
+                        dataIndex: 'industry',
+                        key: 'industry',
+                        render: industry => (
+                          <Tag color="cyan">
+                            <Text>{industry}</Text>
+                          </Tag>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">联系人</Text>
+                        ),
+                        dataIndex: 'contact',
+                        key: 'contact',
+                        render: contact => (
+                          <Text className="text-[var(--cyan-100)]">
+                            {contact}
+                          </Text>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">邮箱</Text>
+                        ),
+                        dataIndex: 'email',
+                        key: 'email',
+                        render: email => (
+                          <Text className="text-cyan-100/70">{email}</Text>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">收入</Text>
+                        ),
+                        dataIndex: 'revenue',
+                        key: 'revenue',
+                        render: revenue => (
+                          <Text className="text-[var(--purple-400)] font-bold text-lg">
+                            ¥{revenue?.toLocaleString()}
+                          </Text>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">状态</Text>
+                        ),
+                        dataIndex: 'status',
+                        key: 'status',
+                        render: status =>
+                          (() => {
+                            const statusConfig = {
+                              active: {
+                                color: 'success',
+                                text: '活跃',
+                              },
+                              pending: {
+                                color: 'warning',
+                                text: '待定',
+                              },
+                              inactive: {
+                                color: 'default',
+                                text: '非活跃',
+                              },
+                            };
+                            const config =
+                              statusConfig[status] || statusConfig.inactive;
+                            return (
+                              <Tag color={config.color}>
+                                <Text>{config.text}</Text>
+                              </Tag>
+                            );
+                          })(),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--cyan-400)]">操作</Text>
+                        ),
+                        key: 'action',
+                        render: (_, record) => (
+                          <Space>
+                            <Button
+                              type="link"
+                              size="small"
+                              onClick={() => this.handleEditCustomer(record)}
+                              className="text-cyan-400 hover:text-cyan-300"
+                            >
+                              <Text>✏️ 编辑</Text>
+                            </Button>
+                            <Button
+                              type="link"
+                              danger={true}
+                              size="small"
+                              onClick={() => this.handleDeleteCustomer(record)}
+                            >
+                              <Text>🗑️ 删除</Text>
+                            </Button>
+                          </Space>
+                        ),
+                      },
+                    ]}
+                  />
+                </Card>
+              </View>
+            )}
+            {!!(this.state.activeTab === 'tasks') && (
+              <View>
+                <View className="flex items-center justify-between mb-[32px]">
+                  <h2 className="bg-gradient-to-r from-[#f472b6] to-purple-500 [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [backgroundClip:text] [WebkitBackgroundClip:text] text-[transparent] text-3xl font-bold">
+                    任务管理
+                  </h2>
+                  <Button
+                    type="primary"
+                    size="large"
+                    onClick={() => this.handleAddTask()}
+                    className="cyberpunk-button"
+                  >
+                    <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"
+                    className="cyberpunk-input "
+                    allowClear={true}
+                  />
+                </View>
+                <Card className="cyberpunk-card">
+                  <Table
+                    dataSource={this.getFilteredTasks()}
+                    rowKey="id"
+                    pagination={{ pageSize: 10 }}
+                    className="cyberpunk-table"
+                    columns={[
+                      {
+                        title: (
+                          <Text className="text-[var(--pink-400)]">任务</Text>
+                        ),
+                        dataIndex: 'title',
+                        key: 'title',
+                        render: title => (
+                          <Text className="text-[var(--cyan-100)] font-semibold">
+                            {title}
+                          </Text>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--pink-400)]">优先级</Text>
+                        ),
+                        dataIndex: 'priority',
+                        key: 'priority',
+                        render: priority =>
+                          (() => {
+                            const priorityConfig = {
+                              high: {
+                                color: 'error',
+                                text: '高',
+                              },
+                              medium: {
+                                color: 'warning',
+                                text: '中',
+                              },
+                              low: {
+                                color: 'default',
+                                text: '低',
+                              },
+                            };
+                            const config =
+                              priorityConfig[priority] || priorityConfig.low;
+                            return (
+                              <Tag color={config.color}>
+                                <Text>{config.text}</Text>
+                              </Tag>
+                            );
+                          })(),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--pink-400)]">状态</Text>
+                        ),
+                        dataIndex: 'status',
+                        key: 'status',
+                        render: status =>
+                          (() => {
+                            const statusConfig = {
+                              completed: {
+                                color: 'success',
+                                text: '已完成',
+                              },
+                              inprogress: {
+                                color: 'processing',
+                                text: '进行中',
+                              },
+                              pending: {
+                                color: 'default',
+                                text: '待处理',
+                              },
+                            };
+                            const config =
+                              statusConfig[status] || statusConfig.pending;
+                            return (
+                              <Tag color={config.color}>
+                                <Text>{config.text}</Text>
+                              </Tag>
+                            );
+                          })(),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--pink-400)]">
+                            截止日期
+                          </Text>
+                        ),
+                        dataIndex: 'dueDate',
+                        key: 'dueDate',
+                        render: date => (
+                          <Text className="text-[var(--cyan-100)]">{date}</Text>
+                        ),
+                      },
+                      {
+                        title: (
+                          <Text className="text-[var(--pink-400)]">操作</Text>
+                        ),
+                        key: 'action',
+                        render: (_, record) => (
+                          <Space>
+                            <Button
+                              type="link"
+                              size="small"
+                              onClick={() => this.handleEditTask(record)}
+                              className="text-pink-400 hover:text-pink-300"
+                            >
+                              <Text>✏️ 编辑</Text>
+                            </Button>
+                            <Button
+                              type="link"
+                              danger={true}
+                              size="small"
+                              onClick={() => this.handleDeleteTask(record)}
+                            >
+                              <Text>🗑️ 删除</Text>
+                            </Button>
+                          </Space>
+                        ),
+                      },
+                    ]}
+                  />
+                </Card>
+              </View>
+            )}
+          </View>
+        </View>
+        <Modal
+          title={
+            <Text className="text-[var(--cyan-400)]">
+              {this.state.currentItem ? '✏️ 编辑客户' : '⚡ 新增客户'}
+            </Text>
+          }
+          open={this.state.modalVisible && this.state.modalType === 'customer'}
+          onCancel={() => this.handleModalClose()}
+          footer={null}
+          width={500}
+          className="cyberpunk-modal"
+        >
+          <Form
+            initialValues={
+              this.state.currentItem || {
+                status: 'pending',
+              }
+            }
+            onFinish={values => this.handleSubmit(values)}
+            layout="vertical"
+          >
+            <Form.Item
+              label={
+                <Text className="text-[var(--cyan-400)]">🏢 客户名称</Text>
+              }
+              name="name"
+              rules={[{ required: true, message: '请输入客户名称' }]}
+            >
+              <Input
+                placeholder="请输入客户名称"
+                size="large"
+                className="cyberpunk-input"
+              />
+            </Form.Item>
+            <Form.Item
+              label={<Text className="text-[var(--cyan-400)]">🏭 行业</Text>}
+              name="industry"
+              rules={[{ required: true, message: '请输入行业' }]}
+            >
+              <Input
+                placeholder="例如：人工智能、云计算"
+                size="large"
+                className="cyberpunk-input"
+              />
+            </Form.Item>
+            <Form.Item
+              label={<Text className="text-[var(--cyan-400)]">👤 联系人</Text>}
+              name="contact"
+              rules={[{ required: true, message: '请输入联系人' }]}
+            >
+              <Input
+                placeholder="请输入联系人姓名"
+                size="large"
+                className="cyberpunk-input"
+              />
+            </Form.Item>
+            <Form.Item
+              label={<Text className="text-[var(--cyan-400)]">📧 邮箱</Text>}
+              name="email"
+              rules={[{ required: true, message: '请输入邮箱' }]}
+            >
+              <Input
+                placeholder="请输入邮箱地址"
+                size="large"
+                className="cyberpunk-input"
+              />
+            </Form.Item>
+            <Form.Item
+              label={<Text className="text-[var(--cyan-400)]">📊 状态</Text>}
+              name="status"
+              rules={[{ required: true, message: '请选择状态' }]}
+            >
+              <Select size="large" className="cyberpunk-select">
+                <Select.Option value="active">✓ 活跃</Select.Option>
+                <Select.Option value="pending">⏳ 待定</Select.Option>
+                <Select.Option value="inactive">💤 非活跃</Select.Option>
+              </Select>
+            </Form.Item>
+            <Form.Item className="mb-0">
+              <Space className="w-full justify-end">
+                <Button
+                  onClick={() => this.handleModalClose()}
+                  className="cyberpunk-button-secondary"
+                >
+                  <Text>取消</Text>
+                </Button>
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  className="cyberpunk-button"
+                >
+                  <Text>⚡ 保存</Text>
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </Modal>
+        <Modal
+          title={
+            <Text className="text-[var(--pink-400)]">
+              {this.state.currentItem ? '✏️ 编辑任务' : '⚡ 新增任务'}
+            </Text>
+          }
+          open={this.state.modalVisible && this.state.modalType === 'task'}
+          onCancel={() => this.handleModalClose()}
+          footer={null}
+          width={500}
+          className="cyberpunk-modal"
+        >
+          <Form
+            initialValues={
+              this.state.currentItem || {
+                priority: 'medium',
+                status: 'pending',
+              }
+            }
+            onFinish={values => this.handleSubmit(values)}
+            layout="vertical"
+          >
+            <Form.Item
+              label={
+                <Text className="text-[var(--pink-400)]">📝 任务标题</Text>
+              }
+              name="title"
+              rules={[{ required: true, message: '请输入任务标题' }]}
+            >
+              <Input
+                placeholder="请输入任务标题"
+                size="large"
+                className="cyberpunk-input"
+              />
+            </Form.Item>
+            <Form.Item
+              label={<Text className="text-[var(--pink-400)]">⚡ 优先级</Text>}
+              name="priority"
+              rules={[{ required: true, message: '请选择优先级' }]}
+            >
+              <Select size="large" className="cyberpunk-select">
+                <Select.Option value="high">🔴 高</Select.Option>
+                <Select.Option value="medium">🟡 中</Select.Option>
+                <Select.Option value="low">🟢 低</Select.Option>
+              </Select>
+            </Form.Item>
+            <Form.Item
+              label={<Text className="text-[var(--pink-400)]">📊 状态</Text>}
+              name="status"
+              rules={[{ required: true, message: '请选择状态' }]}
+            >
+              <Select size="large" className="cyberpunk-select">
+                <Select.Option value="pending">⏳ 待处理</Select.Option>
+                <Select.Option value="inprogress">🔄 进行中</Select.Option>
+                <Select.Option value="completed">✓ 已完成</Select.Option>
+              </Select>
+            </Form.Item>
+            <Form.Item
+              label={
+                <Text className="text-[var(--pink-400)]">📅 截止日期</Text>
+              }
+              name="dueDate"
+              rules={[{ required: true, message: '请选择截止日期' }]}
+            >
+              <Input type="date" size="large" className="cyberpunk-input" />
+            </Form.Item>
+            <Form.Item className="mb-0">
+              <Space className="w-full justify-end">
+                <Button
+                  onClick={() => this.handleModalClose()}
+                  className="cyberpunk-button-secondary"
+                >
+                  <Text>取消</Text>
+                </Button>
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  className="cyberpunk-button"
+                >
+                  <Text>⚡ 保存</Text>
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </Modal>
+        <style jsx={true} global={true}>
+          <Text>{`
+          .cyberpunk-card {
+            background: rgba(15, 15, 35, 0.8) !important;
+            border: 1px solid rgba(0, 255, 255, 0.3) !important;
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.05) !important;
+            backdrop-filter: blur(10px);
+          }
+
+          .cyberpunk-card .ant-card-head {
+            border-bottom: 1px solid rgba(0, 255, 255, 0.3) !important;
+            background: rgba(0, 255, 255, 0.05) !important;
+          }
+
+          .cyberpunk-card .ant-card-body {
+            color: #00ffff !important;
+          }
+
+          .cyberpunk-table .ant-table {
+            background: transparent !important;
+            color: #00ffff !important;
+          }
+
+          .cyberpunk-table .ant-table-thead > tr > th {
+            background: rgba(0, 255, 255, 0.1) !important;
+            border-bottom: 1px solid rgba(0, 255, 255, 0.3) !important;
+            color: #00ffff !important;
+          }
+
+          .cyberpunk-table .ant-table-tbody > tr > td {
+            border-bottom: 1px solid rgba(0, 255, 255, 0.1) !important;
+            color: #00ffff !important;
+          }
+
+          .cyberpunk-table .ant-table-tbody > tr:hover > td {
+            background: rgba(0, 255, 255, 0.1) !important;
+          }
+
+          .cyberpunk-input {
+            background: rgba(15, 15, 35, 0.8) !important;
+            border: 1px solid rgba(0, 255, 255, 0.3) !important;
+            color: #00ffff !important;
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.1) !important;
+          }
+
+          .cyberpunk-input::placeholder {
+            color: rgba(0, 255, 255, 0.5) !important;
+          }
+
+          .cyberpunk-input:hover,
+          .cyberpunk-input:focus {
+            border-color: #00ffff !important;
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3) !important;
+          }
+
+          .cyberpunk-select {
+            background: rgba(15, 15, 35, 0.8) !important;
+            border: 1px solid rgba(0, 255, 255, 0.3) !important;
+            color: #00ffff !important;
+          }
+
+          .cyberpunk-select:hover,
+          .cyberpunk-select:focus {
+            border-color: #00ffff !important;
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3) !important;
+          }
+
+          .cyberpunk-button {
+            background: linear-gradient(135deg, #00ffff 0%, #bf00ff 100%) !important;
+            border: none !important;
+            color: #ffffff !important;
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(191, 0, 255, 0.3) !important;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
+          }
+
+          .cyberpunk-button:hover {
+            box-shadow: 0 0 30px rgba(0, 255, 255, 0.7), 0 0 60px rgba(191, 0, 255, 0.5) !important;
+            transform: scale(1.05);
+          }
+
+          .cyberpunk-button-secondary {
+            background: rgba(15, 15, 35, 0.8) !important;
+            border: 1px solid rgba(0, 255, 255, 0.3) !important;
+            color: #00ffff !important;
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.1) !important;
+          }
+
+          .cyberpunk-button-secondary:hover {
+            border-color: #00ffff !important;
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3) !important;
+          }
+
+          .cyberpunk-modal .ant-modal-content {
+            background: rgba(10, 10, 15, 0.95) !important;
+            border: 1px solid rgba(0, 255, 255, 0.3) !important;
+            box-shadow: 0 0 50px rgba(0, 255, 255, 0.2) !important;
+            backdrop-filter: blur(20px);
+          }
+
+          .cyberpunk-modal .ant-modal-header {
+            border-bottom: 1px solid rgba(0, 255, 255, 0.3) !important;
+            background: rgba(0, 255, 255, 0.05) !important;
+          }
+
+          .cyberpunk-modal .ant-modal-close-x {
+            color: #00ffff !important;
+          }
+
+          .cyberpunk-modal .ant-modal-close-x:hover {
+            color: #ff00ff !important;
+          }
+
+          .cyberpunk-modal .ant-form-item-label > label {
+            color: #00ffff !important;
+          }
+
+          .ant-menu-dark.cyberpunk-menu {
+            background: transparent !important;
+          }
+
+          .ant-menu-dark.cyberpunk-menu .ant-menu-item-selected {
+            background: linear-gradient(90deg, rgba(0, 255, 255, 0.2) 0%, transparent 100%) !important;
+            border-left: 3px solid #00ffff !important;
+          }
+
+          .ant-menu-dark.cyberpunk-menu .ant-menu-item:hover {
+            background: rgba(0, 255, 255, 0.1) !important;
+          }
+
+          .ant-progress-bg {
+            box-shadow: 0 0 10px currentColor !important;
+          }
+
+          .ant-statistic-title {
+            color: rgba(0, 255, 255, 0.7) !important;
+          }
+
+          .ant-tag {
+            border: 1px solid rgba(0, 255, 255, 0.3) !important;
+            background: rgba(0, 255, 255, 0.1) !important;
+          }
+        `}</Text>
+        </style>
+      </Page>
+    );
+  }
+}
+
+export default Document;