@appthen/cli 1.2.10 → 1.2.12

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

@@ -0,0 +1,567 @@
+/**
+ * 静态赛博朋克用户列表
+ * 使用基本 HTML 元素 + Tailwind CSS 的纯静态用户管理页面
+ *
+ * @type Page
+ * @route /static-cyberpunk-user-list
+ * @screen 1920x1080 #0a0a0f
+ * @frames web
+ */
+import React from 'react';
+
+
+class IProps {
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  users?: {
+    /* @example 1 */id?: number,
+    /* @example 霓虹行者 */name?: string,
+    /* @example neon@cyber.net */email?: string,
+    /* @example 管理员 */role?: string,
+    /* @example active */status?: string,
+    /* @example 99 */level?: number,
+    /* @example https://api.dicebear.com/7.x/bottts/svg?seed=neon */avatar?: string,
+    /* @example 2077-01-15 */joinDate?: string,
+    /* @example 2077-12-01 23:45:12 */lastLogin?: string,
+    /* @example 资深网络专家，擅长突破任何防火墙系统 */bio?: string,
+  }[];
+  viewMode?: string;
+  selectedUser?: any;
+  modalVisible?: boolean;
+  searchKeyword?: string;
+  filterStatus?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    users: [
+      {
+        id: 1,
+        name: '霓虹行者',
+        email: 'neon@cyber.net',
+        role: '管理员',
+        status: 'active',
+        level: 99,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=neon',
+        joinDate: '2077-01-15',
+        lastLogin: '2077-12-01 23:45:12',
+        bio: '资深网络专家，擅长突破任何防火墙系统',
+      },
+      {
+        id: 2,
+        name: '数据幽灵',
+        email: 'ghost@cyber.net',
+        role: '开发者',
+        status: 'active',
+        level: 87,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=ghost',
+        joinDate: '2077-03-22',
+        lastLogin: '2077-12-01 22:30:45',
+        bio: '隐形于数据流中的黑客，无人知晓其真实身份',
+      },
+      {
+        id: 3,
+        name: '赛博黑客',
+        email: 'hacker@cyber.net',
+        role: '操作员',
+        status: 'warning',
+        level: 72,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=hacker',
+        joinDate: '2077-05-10',
+        lastLogin: '2077-11-30 18:20:33',
+        bio: '专注于系统漏洞挖掘和安全测试',
+      },
+      {
+        id: 4,
+        name: '量子行者',
+        email: 'quantum@cyber.net',
+        role: '开发者',
+        status: 'active',
+        level: 95,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=quantum',
+        joinDate: '2077-02-28',
+        lastLogin: '2077-12-01 21:15:27',
+        bio: '量子计算领域的先驱，正在开发下一代AI',
+      },
+      {
+        id: 5,
+        name: '暗影猎手',
+        email: 'shadow@cyber.net',
+        role: '操作员',
+        status: 'offline',
+        level: 65,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=shadow',
+        joinDate: '2077-06-15',
+        lastLogin: '2077-11-25 10:45:00',
+        bio: '网络追踪专家，擅长定位和追踪目标',
+      },
+      {
+        id: 6,
+        name: '网络守护者',
+        email: 'guardian@cyber.net',
+        role: '管理员',
+        status: 'active',
+        level: 91,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=guardian',
+        joinDate: '2077-01-08',
+        lastLogin: '2077-12-01 23:50:18',
+        bio: '网络安全专家，负责维护系统安全',
+      },
+      {
+        id: 7,
+        name: '代码刺客',
+        email: 'assassin@cyber.net',
+        role: '开发者',
+        status: 'active',
+        level: 83,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=assassin',
+        joinDate: '2077-04-12',
+        lastLogin: '2077-12-01 20:10:55',
+        bio: '高效代码编写者，能在极短时间内完成任务',
+      },
+      {
+        id: 8,
+        name: '数字浪人',
+        email: 'ronin@cyber.net',
+        role: '操作员',
+        status: 'warning',
+        level: 58,
+        avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=ronin',
+        joinDate: '2077-07-20',
+        lastLogin: '2077-11-28 14:30:22',
+        bio: '自由职业者，接各种网络任务',
+      },
+    ],
+    viewMode: 'grid',
+    selectedUser: null,
+    modalVisible: false,
+    searchKeyword: '',
+    filterStatus: 'all',
+  };
+
+  toggleViewMode() {
+    this.setState({
+      viewMode: this.state.viewMode === 'grid' ? 'list' : 'grid',
+    });
+  }
+
+  handleViewUser(user) {
+    this.setState({
+      selectedUser: user,
+      modalVisible: true,
+    });
+  }
+
+  handleCloseModal() {
+    this.setState({
+      modalVisible: false,
+    });
+  }
+
+  handleSearch(value) {
+    this.setState({
+      searchKeyword: value,
+    });
+  }
+
+  handleFilter(value) {
+    this.setState({
+      filterStatus: value,
+    });
+  }
+
+  getStatusColor(status) {
+    switch (status) {
+      case 'active':
+        return '#00ff88';
+      case 'warning':
+        return '#ffaa00';
+      case 'offline':
+        return '#ff0055';
+      default:
+        return '#888888';
+    }
+  }
+
+  getStatusText(status) {
+    switch (status) {
+      case 'active':
+        return '在线';
+      case 'warning':
+        return '警告';
+      case 'offline':
+        return '离线';
+      default:
+        return status;
+    }
+  }
+
+  getRoleColor(role) {
+    switch (role) {
+      case '管理员':
+        return '#ff00ff';
+      case '开发者':
+        return '#00ffff';
+      case '操作员':
+        return '#ffaa00';
+      default:
+        return '#888888';
+    }
+  }
+
+  getFilteredUsers() {
+    let filtered = this.state.users;
+    if (this.state.searchKeyword) {
+      const keyword = this.state.searchKeyword.toLowerCase();
+      filtered = filtered.filter(
+        user =>
+          user.name.toLowerCase().includes(keyword) ||
+          user.email.toLowerCase().includes(keyword)
+      );
+    }
+    if (this.state.filterStatus !== 'all') {
+      filtered = filtered.filter(
+        user => user.status === this.state.filterStatus
+      );
+    }
+    return filtered;
+  }
+
+  render() {
+    const filteredUsers = this.getFilteredUsers();
+    return (
+      <Page className="relative min-h-screen overflow-x-hidden bg-[#0a0a0f] [fontFamily:monospace] text-[#ffffff]">
+        <View className="pointer-events-none fixed top-[0px] left-[0px] right-[0px] bottom-[0px] z-[100] bg-[repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px)]" />
+        <View className="pointer-events-none fixed top-[0px] left-[0px] right-[0px] bottom-[0px] bg-gradient-to-r bg-[linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px)] bg-[length:50px 50px]" />
+        <View className="relative z-10">
+          <header className="flex justify-between items-center pl-[32px] pr-[32px] pt-[24px] pb-[24px] [borderBottom:2px solid #00ffff] bg-[rgba(0, 255, 255, 0.05)] [backdropFilter:blur(10px)]">
+            <View className="flex flex-col">
+              <h1 className="text-3xl font-bold tracking-[0.1em] text-[#00ffff] text-shadow-[0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff] [fontFamily:Orbitron, sans-serif]">
+                用户管理
+              </h1>
+              <p className="text-xs mt-[4px] text-[#ff00ff] tracking-[0.2em]">
+                USER MANAGEMENT SYSTEM
+              </p>
+            </View>
+            <View className="gap-6 flex items-center">
+              <View className="pl-[16px] pr-[16px] pt-[8px] pb-[8px] rounded bg-[rgba(0, 255, 136, 0.2)] border border-solid border-[#00ff88]">
+                <Text className="font-bold tracking-[0.05em] text-sm text-[#00ff88]">
+                  共{filteredUsers.length}位用户
+                </Text>
+              </View>
+              <button
+                onClick={() => this.toggleViewMode()}
+                className="transition pl-[16px] pr-[16px] pt-[8px] pb-[8px] rounded font-bold text-xs tracking-[0.05em] bg-[transparent] border-[2px] border-solid border-[#00ffff] text-[#00ffff] shadow-[0 0 10px rgba(0, 255, 255, 0.3)]"
+              >
+                {this.state.viewMode === 'grid' ? '列表视图' : '网格视图'}
+              </button>
+            </View>
+          </header>
+          <View className="flex justify-between items-center pl-[32px] pr-[32px] pt-[16px] pb-[16px] [borderBottom:1px solid rgba(0, 255, 255, 0.2)]">
+            <View className="gap-4 flex flex-1">
+              <input
+                type="text"
+                placeholder="搜索用户..."
+                value={this.state.searchKeyword}
+                onChange={e => this.handleSearch(e.target.value)}
+                className="pl-[16px] pr-[16px] pt-[8px] pb-[8px] rounded text-sm w-[300px] bg-[rgba(0, 0, 0, 0.6)] border border-solid border-[rgba(0, 255, 255, 0.3)] text-[#ffffff] [outline:none]"
+              />
+              <select
+                value={this.state.filterStatus}
+                onChange={e => this.handleFilter(e.target.value)}
+                className="pl-[16px] pr-[16px] pt-[8px] pb-[8px] rounded text-sm w-[150px] bg-[rgba(0, 0, 0, 0.6)] border border-solid border-[rgba(0, 255, 255, 0.3)] text-[#ffffff] [outline:none]"
+              >
+                <option value="all">全部状态</option>
+                <option value="active">在线</option>
+                <option value="warning">警告</option>
+                <option value="offline">离线</option>
+              </select>
+            </View>
+          </View>
+          <main className="p-[32px]">
+            {!!(this.state.viewMode === 'grid') && (
+              <View className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                {filteredUsers.map((user, index) => (
+                  <View
+                    key={user.id}
+                    onClick={() => this.handleViewUser(user)}
+                    className="transition hover:scale-105 rounded-xl p-[24px] cursor-pointer bg-[rgba(0, 0, 0, 0.6)] [backdropFilter:blur(10px)] border border-solid border-[rgba(0, 255, 255, 0.3)] shadow-[0 0 20px rgba(0, 255, 255, 0.1)]"
+                  >
+                    <View className="flex flex-col items-center mb-[16px]">
+                      <Image
+                        src={user.avatar}
+                        alt={user.name}
+                        className="w-[80px] h-[80px] rounded-full mb-[12px] border-[3px] border-solid border-[#00ffff] shadow-[0 0 15px rgba(0, 255, 255, 0.5)]"
+                      />
+                      <h3 className="text-lg font-bold text-[#ffffff]">
+                        {user.name}
+                      </h3>
+                      <p className="text-xs text-[#888888] mt-[4px]">
+                        {user.email}
+                      </p>
+                    </View>
+                    <View className="space-y-2 mb-[16px]">
+                      <View className="flex justify-between items-center">
+                        <Text className="text-xs text-[#00ffff]">角色</Text>
+                        <Text
+                          className="px-2 py-1 rounded text-xs font-bold"
+                          style={{
+                            backgroundColor:
+                              this.getRoleColor(user.role) + '33',
+                            color: this.getRoleColor(user.role),
+                            border: '1px solid ' + this.getRoleColor(user.role),
+                          }}
+                        >
+                          {user.role}
+                        </Text>
+                      </View>
+                      <View className="flex justify-between items-center">
+                        <Text className="text-xs text-[#00ffff]">等级</Text>
+                        <Text className="text-sm font-bold text-[#ffffff]">
+                          LV.{user.level}
+                        </Text>
+                      </View>
+                      <View className="flex justify-between items-center">
+                        <Text className="text-xs text-[#00ffff]">状态</Text>
+                        <View className="gap-2 flex items-center">
+                          <View
+                            className="w-2 h-2 rounded-full"
+                            style={{
+                              backgroundColor: this.getStatusColor(user.status),
+                              boxShadow:
+                                '0 0 10px ' + this.getStatusColor(user.status),
+                            }}
+                          />
+                          <Text
+                            className="text-xs font-bold"
+                            style={{ color: this.getStatusColor(user.status) }}
+                          >
+                            {this.getStatusText(user.status)}
+                          </Text>
+                        </View>
+                      </View>
+                    </View>
+                    <View className="pt-[12px] border-t border-t-solid border-[rgba(255, 255, 255, 0.1)]">
+                      <View className="flex justify-between items-center">
+                        <Text className="text-xs text-[#888888]">加入时间</Text>
+                        <Text className="text-xs text-[#ffffff]">
+                          {user.joinDate}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                ))}
+              </View>
+            )}
+            {!(this.state.viewMode === 'grid') && (
+              <View className="space-y-4">
+                {filteredUsers.map((user, index) => (
+                  <View
+                    key={user.id}
+                    onClick={() => this.handleViewUser(user)}
+                    className="transition hover:scale-[1.01] flex items-center p-[24px] rounded-xl cursor-pointer bg-[rgba(0, 0, 0, 0.6)] [backdropFilter:blur(10px)] border border-solid border-[rgba(0, 255, 255, 0.3)] shadow-[0 0 20px rgba(0, 255, 255, 0.1)]"
+                  >
+                    <Image
+                      src={user.avatar}
+                      alt={user.name}
+                      className="w-[64px] h-[64px] rounded-full mr-[24px] border-[2px] border-solid border-[#00ffff] shadow-[0 0 10px rgba(0, 255, 255, 0.5)]"
+                    />
+                    <View className="flex-1">
+                      <View className="gap-3 flex items-center mb-[8px]">
+                        <h3 className="text-lg font-bold text-[#ffffff]">
+                          {user.name}
+                        </h3>
+                        <Text
+                          className="px-2 py-1 rounded text-xs font-bold"
+                          style={{
+                            backgroundColor:
+                              this.getRoleColor(user.role) + '33',
+                            color: this.getRoleColor(user.role),
+                            border: '1px solid ' + this.getRoleColor(user.role),
+                          }}
+                        >
+                          {user.role}
+                        </Text>
+                        <View className="gap-2 flex items-center">
+                          <View
+                            className="w-2 h-2 rounded-full"
+                            style={{
+                              backgroundColor: this.getStatusColor(user.status),
+                              boxShadow:
+                                '0 0 10px ' + this.getStatusColor(user.status),
+                            }}
+                          />
+                          <Text
+                            className="text-xs font-bold"
+                            style={{ color: this.getStatusColor(user.status) }}
+                          >
+                            {this.getStatusText(user.status)}
+                          </Text>
+                        </View>
+                      </View>
+                      <p className="text-sm mb-[4px] text-[#888888]">
+                        {user.email}
+                      </p>
+                      <p className="text-xs text-[#666666]">{user.bio}</p>
+                    </View>
+                    <View className="text-[var(--right)]">
+                      <View className="text-sm mb-[4px] text-[#00ffff]">
+                        LV.<Text>{user.level}</Text>
+                      </View>
+                      <View className="text-xs text-[#888888]">
+                        <Text>{user.joinDate}</Text>
+                      </View>
+                    </View>
+                  </View>
+                ))}
+              </View>
+            )}
+          </main>
+          {!!this.state.modalVisible && (
+            <View
+              onClick={() => this.handleCloseModal()}
+              className="fixed top-[0px] left-[0px] right-[0px] bottom-[0px] flex justify-center items-center z-[1000] bg-[rgba(0, 0, 0, 0.8)] [backdropFilter:blur(5px)]"
+            >
+              <View
+                onClick={e => e.stopPropagation()}
+                className="rounded-xl overflow-hidden w-[500px] bg-[rgba(10, 10, 15, 0.95)] border-[2px] border-solid border-[#00ffff] shadow-[0 0 50px rgba(0, 255, 255, 0.3)]"
+              >
+                <View className="flex justify-between items-center pl-[24px] pr-[24px] pt-[16px] pb-[16px] [borderBottom:1px solid rgba(0, 255, 255, 0.3)] bg-[rgba(0, 255, 255, 0.05)]">
+                  <h2 className="text-lg font-bold tracking-[0.05em] text-[#00ffff]">
+                    用户详情
+                  </h2>
+                  <button
+                    onClick={() => this.handleCloseModal()}
+                    className="text-2xl font-bold text-[#ff0055] bg-[transparent] border cursor-pointer"
+                  >
+                    ✕
+                  </button>
+                </View>
+                <View className="p-[24px]">
+                  <View className="flex flex-col items-center mb-[24px] pb-[24px] [borderBottom:1px solid rgba(255, 255, 255, 0.1)]">
+                    <Image
+                      src={this.state.selectedUser?.avatar}
+                      alt={this.state.selectedUser?.name}
+                      className="w-[96px] h-[96px] rounded-full mb-[16px] border-[3px] border-solid border-[#00ffff] shadow-[0 0 20px rgba(0, 255, 255, 0.5)]"
+                    />
+                    <h3 className="text-2xl font-bold mb-[8px] text-[#ffffff]">
+                      {this.state.selectedUser?.name}
+                    </h3>
+                    <Text
+                      className="px-3 py-1 rounded text-sm font-bold"
+                      style={{
+                        backgroundColor:
+                          this.getRoleColor(this.state.selectedUser?.role) +
+                          '33',
+                        color: this.getRoleColor(this.state.selectedUser?.role),
+                        border:
+                          '1px solid ' +
+                          this.getRoleColor(this.state.selectedUser?.role),
+                      }}
+                    >
+                      {this.state.selectedUser?.role}
+                    </Text>
+                  </View>
+                  <View className="gap-4 grid grid-cols-2 mb-[24px]">
+                    <View className="p-[16px] rounded bg-[rgba(0, 0, 0, 0.4)] border border-solid border-[rgba(255, 255, 255, 0.1)]">
+                      <View className="text-xs mb-[4px] text-[#888888] tracking-wide [textTransform:uppercase]">
+                        邮箱
+                      </View>
+                      <View className="text-sm font-bold text-[#ffffff]">
+                        <Text>{this.state.selectedUser?.email}</Text>
+                      </View>
+                    </View>
+                    <View className="p-[16px] rounded bg-[rgba(0, 0, 0, 0.4)] border border-solid border-[rgba(255, 255, 255, 0.1)]">
+                      <View className="text-xs mb-[4px] text-[#888888] tracking-wide [textTransform:uppercase]">
+                        等级
+                      </View>
+                      <View className="text-sm font-bold text-[#ffffff]">
+                        LV.<Text>{this.state.selectedUser?.level}</Text>
+                      </View>
+                    </View>
+                    <View className="p-[16px] rounded bg-[rgba(0, 0, 0, 0.4)] border border-solid border-[rgba(255, 255, 255, 0.1)]">
+                      <View className="text-xs mb-[4px] text-[#888888] tracking-wide [textTransform:uppercase]">
+                        状态
+                      </View>
+                      <View
+                        className="text-sm font-bold"
+                        style={{
+                          color: this.getStatusColor(
+                            this.state.selectedUser?.status
+                          ),
+                        }}
+                      >
+                        <Text>
+                          {this.getStatusText(this.state.selectedUser?.status)}
+                        </Text>
+                      </View>
+                    </View>
+                    <View className="p-[16px] rounded bg-[rgba(0, 0, 0, 0.4)] border border-solid border-[rgba(255, 255, 255, 0.1)]">
+                      <View className="text-xs mb-[4px] text-[#888888] tracking-wide [textTransform:uppercase]">
+                        加入时间
+                      </View>
+                      <View className="text-sm font-bold text-[#ffffff]">
+                        <Text>{this.state.selectedUser?.joinDate}</Text>
+                      </View>
+                    </View>
+                  </View>
+                  <View className="mb-[24px]">
+                    <View className="text-xs mb-[8px] text-[#00ffff] tracking-wide [textTransform:uppercase]">
+                      个人简介
+                    </View>
+                    <View className="p-[16px] rounded bg-[rgba(0, 0, 0, 0.4)] border border-solid border-[rgba(255, 255, 255, 0.1)]">
+                      <p className="text-sm text-[#cccccc] [lineHeight:1.6]">
+                        {this.state.selectedUser?.bio}
+                      </p>
+                    </View>
+                  </View>
+                  <View className="gap-4 grid grid-cols-2">
+                    <View className="p-[16px] rounded bg-[rgba(0, 0, 0, 0.4)] border border-solid border-[rgba(255, 255, 255, 0.1)]">
+                      <View className="text-xs mb-[4px] text-[#888888] tracking-wide [textTransform:uppercase]">
+                        最后登录
+                      </View>
+                      <View className="text-sm font-bold text-[#ffffff]">
+                        <Text>{this.state.selectedUser?.lastLogin}</Text>
+                      </View>
+                    </View>
+                    <View className="p-[16px] rounded bg-[rgba(0, 0, 0, 0.4)] border border-solid border-[rgba(255, 255, 255, 0.1)]">
+                      <View className="text-xs mb-[4px] text-[#888888] tracking-wide [textTransform:uppercase]">
+                        用户ID
+                      </View>
+                      <View className="text-sm font-bold text-[#ffffff]">
+                        #
+                        <Text>
+                          {this.state.selectedUser?.id
+                            .toString()
+                            .padStart(6, '0')}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+                <View className="gap-3 flex justify-end pl-[24px] pr-[24px] pt-[16px] pb-[16px] [borderTop:1px solid rgba(255, 255, 255, 0.1)]">
+                  <button
+                    onClick={() => this.handleCloseModal()}
+                    className="transition pl-[24px] pr-[24px] pt-[8px] pb-[8px] rounded font-bold text-xs tracking-[0.05em] bg-[transparent] border-[2px] border-solid border-[#00ffff] text-[#00ffff] shadow-[0 0 10px rgba(0, 255, 255, 0.3)]"
+                  >
+                    关闭
+                  </button>
+                  <button className="transition pl-[24px] pr-[24px] pt-[8px] pb-[8px] rounded font-bold text-xs tracking-[0.05em] bg-[rgba(0, 255, 255, 0.1)] border-[2px] border-solid border-[#00ffff] text-[#00ffff] shadow-[0 0 10px rgba(0, 255, 255, 0.3)]">
+                    编辑用户
+                  </button>
+                </View>
+              </View>
+            </View>
+          )}
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;