@appthen/cli 1.2.11 → 1.2.13

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

@@ -0,0 +1,348 @@
+/**
+ * 赛博朋克仪表板
+ * 充满未来科技感的数据展示页面，采用霓虹配色和动态效果
+ *
+ * @type Page
+ * @route /cyberpunk-dashboard
+ * @screen 1920x1080 #0a0a0f
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  currentTime?: string;
+  systemStatus?: string;
+  cpuUsage?: number;
+  memoryUsage?: number;
+  networkSpeed?: number;
+  activeNodes?: number;
+  showDetails?: boolean;
+  selectedModule?: string;
+  modules?: {
+    /* @example 1 */id?: number,
+    /* @example 神经链接 */name?: string,
+    /* @example active */status?: string,
+    /* @example 89 */level?: number,
+  }[];
+  logs?: {
+    /* @example 1 */id?: number,
+    /* @example 23:59:45 */time?: string,
+    /* @example info */type?: string,
+    /* @example 系统初始化完成 */message?: string,
+  }[];
+  glitchMode?: boolean;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    currentTime: '',
+    systemStatus: 'ONLINE',
+    cpuUsage: 67,
+    memoryUsage: 54,
+    networkSpeed: 1024,
+    activeNodes: 42,
+    showDetails: false,
+    selectedModule: null,
+    modules: [
+      { id: 1, name: '神经链接', status: 'active', level: 89 },
+      { id: 2, name: '数据流', status: 'active', level: 76 },
+      { id: 3, name: '防火墙', status: 'warning', level: 45 },
+      { id: 4, name: '加密模块', status: 'active', level: 92 },
+      { id: 5, name: 'AI 核心', status: 'active', level: 98 },
+      { id: 6, name: '量子网络', status: 'offline', level: 0 },
+    ],
+    logs: [
+      { id: 1, time: '23:59:45', type: 'info', message: '系统初始化完成' },
+      { id: 2, time: '23:59:46', type: 'success', message: '神经链接已建立' },
+      { id: 3, time: '23:59:47', type: 'warning', message: '检测到异常数据包' },
+      { id: 4, time: '23:59:48', type: 'info', message: '防火墙更新中...' },
+      { id: 5, time: '23:59:49', type: 'success', message: '数据同步完成' },
+    ],
+    glitchMode: false,
+  };
+
+  componentDidMount() {
+    this.updateTime();
+    this.timer = setInterval(() => {
+      this.updateTime();
+      this.simulateData();
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  }
+
+  updateTime() {
+    const now = new Date();
+    const timeStr = now.toLocaleTimeString('zh-CN', {
+      hour12: false,
+    });
+    this.setState({
+      currentTime: timeStr,
+    });
+  }
+
+  simulateData() {
+    this.setState({
+      cpuUsage: Math.floor(Math.random() * 40) + 50,
+      memoryUsage: Math.floor(Math.random() * 30) + 40,
+      networkSpeed: Math.floor(Math.random() * 500) + 800,
+    });
+  }
+
+  toggleDetails() {
+    this.setState({
+      showDetails: !this.state.showDetails,
+    });
+  }
+
+  selectModule(module) {
+    this.setState({
+      selectedModule: module,
+    });
+  }
+
+  toggleGlitchMode() {
+    this.setState({
+      glitchMode: !this.state.glitchMode,
+    });
+  }
+
+  getStatusColor(status) {
+    switch (status) {
+      case 'active':
+        return '#00ff88';
+      case 'warning':
+        return '#ffaa00';
+      case 'offline':
+        return '#ff0055';
+      default:
+        return '#00ffff';
+    }
+  }
+
+  getLogTypeColor(type) {
+    switch (type) {
+      case 'success':
+        return '#00ff88';
+      case 'warning':
+        return '#ffaa00';
+      case 'error':
+        return '#ff0055';
+      default:
+        return '#00ffff';
+    }
+  }
+
+  render() {
+    return (
+      <Page style={styles.container}>
+        <View style={styles.scanlines} />
+        <View style={styles.grid} />
+        <View style={styles.header}>
+          <View style={styles.headerLeft}>
+            <Text style={styles.logo}>CYBERPUNK</Text>
+            <Text style={styles.logoSub}>DASHBOARD v2.077</Text>
+          </View>
+          <View style={styles.headerCenter}>
+            <Text style={styles.time}>{this.state.currentTime}</Text>
+          </View>
+          <View style={styles.headerRight}>
+            <View style={styles.statusBadge}>
+              <Text style={styles.statusText}>{this.state.systemStatus}</Text>
+            </View>
+          </View>
+        </View>
+        <View style={styles.mainContent}>
+          <View style={styles.leftPanel}>
+            <View style={styles.panel}>
+              <Text style={styles.panelTitle}>系统状态</Text>
+              <View style={styles.statRow}>
+                <Text style={styles.statLabel}>CPU 使用率</Text>
+                <View style={styles.statBarContainer}>
+                  <View
+                    style={[
+                      styles.statBar,
+                      {
+                        width: this.state.cpuUsage + '%',
+                        backgroundColor:
+                          this.state.cpuUsage > 80 ? '#ff0055' : '#00ffff',
+                      },
+                    ]}
+                  />
+                </View>
+                <Text style={styles.statValue}>{this.state.cpuUsage}%</Text>
+              </View>
+              <View style={styles.statRow}>
+                <Text style={styles.statLabel}>内存使用</Text>
+                <View style={styles.statBarContainer}>
+                  <View
+                    style={[
+                      styles.statBar,
+                      {
+                        width: this.state.memoryUsage + '%',
+                        backgroundColor: '#ff00ff',
+                      },
+                    ]}
+                  />
+                </View>
+                <Text style={styles.statValue}>{this.state.memoryUsage}%</Text>
+              </View>
+              <View style={styles.statRow}>
+                <Text style={styles.statLabel}>网络速度</Text>
+                <Text style={styles.statValue}>
+                  {this.state.networkSpeed}MB/s
+                </Text>
+              </View>
+              <View style={styles.statRow}>
+                <Text style={styles.statLabel}>活跃节点</Text>
+                <Text style={styles.statValue}>
+                  {this.state.activeNodes}/ 64
+                </Text>
+              </View>
+            </View>
+            <View style={styles.panel}>
+              <Text style={styles.panelTitle}>模块状态</Text>
+              {this.state.modules.map((module, index) => (
+                <View
+                  key={module.id}
+                  style={[
+                    styles.moduleItem,
+                    this.state.selectedModule?.id === module.id &&
+                      styles.moduleItemSelected,
+                  ]}
+                  onClick={() => this.selectModule(module)}
+                >
+                  <View
+                    style={[
+                      styles.moduleDot,
+                      { backgroundColor: this.getStatusColor(module.status) },
+                    ]}
+                  />
+                  <Text style={styles.moduleName}>{module.name}</Text>
+                  <Text style={styles.moduleLevel}>{module.level}%</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+          <View style={styles.centerPanel}>
+            <View style={styles.mainDisplay}>
+              <View style={styles.displayHeader}>
+                <Text style={styles.displayTitle}>数据可视化</Text>
+                <View style={styles.displayActions}>
+                  <Button
+                    style={styles.cyberButton}
+                    onClick={() => this.toggleDetails()}
+                  >
+                    <Text style={styles.buttonText}>
+                      {this.state.showDetails ? '隐藏详情' : '显示详情'}
+                    </Text>
+                  </Button>
+                  <Button
+                    style={[styles.cyberButton, styles.glitchButton]}
+                    onClick={() => this.toggleGlitchMode()}
+                  >
+                    <Text style={styles.buttonText}>故障模式</Text>
+                  </Button>
+                </View>
+              </View>
+              <View style={styles.dataDisplay}>
+                <View style={styles.dataGrid}>
+                  {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
+                    <View
+                      key={item}
+                      style={[
+                        styles.dataBlock,
+                        this.state.glitchMode && styles.dataBlockGlitch,
+                      ]}
+                    >
+                      <Text style={styles.dataBlockLabel}>
+                        DATA-{item.toString().padStart(3, '0')}
+                      </Text>
+                      <Text style={styles.dataBlockValue}>
+                        {Math.floor(Math.random() * 1000)}
+                      </Text>
+                    </View>
+                  ))}
+                </View>
+                {!!this.state.showDetails && (
+                  <View style={styles.detailsPanel}>
+                    <Text style={styles.detailsTitle}>详细数据分析</Text>
+                    <View style={styles.detailsGrid}>
+                      <View style={styles.detailItem}>
+                        <Text style={styles.detailLabel}>数据吞吐量</Text>
+                        <Text style={styles.detailValue}>2.4 TB/h</Text>
+                      </View>
+                      <View style={styles.detailItem}>
+                        <Text style={styles.detailLabel}>响应时间</Text>
+                        <Text style={styles.detailValue}>12 ms</Text>
+                      </View>
+                      <View style={styles.detailItem}>
+                        <Text style={styles.detailLabel}>错误率</Text>
+                        <Text style={styles.detailValue}>0.02%</Text>
+                      </View>
+                      <View style={styles.detailItem}>
+                        <Text style={styles.detailLabel}>加密强度</Text>
+                        <Text style={styles.detailValue}>AES-256</Text>
+                      </View>
+                    </View>
+                  </View>
+                )}
+              </View>
+            </View>
+          </View>
+          <View style={styles.rightPanel}>
+            <View style={styles.panel}>
+              <Text style={styles.panelTitle}>系统日志</Text>
+              <View style={styles.logList}>
+                {this.state.logs.map((log, index) => (
+                  <View key={log.id} style={styles.logItem}>
+                    <Text style={styles.logTime}>{log.time}</Text>
+                    <View
+                      style={[
+                        styles.logType,
+                        {
+                          backgroundColor:
+                            this.getLogTypeColor(log.type) + '33',
+                        },
+                      ]}
+                    >
+                      <Text
+                        style={[
+                          styles.logTypeText,
+                          { color: this.getLogTypeColor(log.type) },
+                        ]}
+                      >
+                        {log.type.toUpperCase()}
+                      </Text>
+                    </View>
+                    <Text style={styles.logMessage}>{log.message}</Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+          </View>
+        </View>
+        <View style={styles.footer}>
+          <Text style={styles.footerText}>NEURAL INTERFACE CONNECTED</Text>
+          <Text style={styles.footerText}>LATENCY: 12ms</Text>
+          <Text style={styles.footerText}>ENCRYPTION: ACTIVE</Text>
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;