@appthen/cli 1.2.10 → 1.2.12

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

@@ -0,0 +1,637 @@
+/**
+ * 赛博朋克产品管理
+ * 充满未来科技感的产品管理页面，采用全息卡片和霓虹效果
+ *
+ * @type Page
+ * @route /cyberpunk-product-management
+ * @screen 1920x1080 #0a0a0f
+ * @frames web
+ */
+import React from 'react';
+import { Button, Image, Text, View } from '@appthen/react';
+import { Input, Select, Space, Tag } from '@appthen/antd';
+
+
+class IProps {
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  products?: {
+    /* @example 1 */id?: number,
+    /* @example 神经植入体 V7 */name?: string,
+    /* @example implants */category?: string,
+    /* @example 8999 */price?: number,
+    /* @example 42 */stock?: number,
+    /* @example available */status?: string,
+    /* @example 4.8 */rating?: number,
+    /* @example https://via.placeholder.com/200x200/00ffff/000000?text=NEURAL */image?: string,
+    /* @example 最新一代神经接口，支持直接脑机连接 */description?: string,
+    features?: string[],
+  }[];
+  filteredProducts?: string[];
+  selectedCategory?: string;
+  searchKeyword?: string;
+  selectedProduct?: any;
+  modalVisible?: boolean;
+  viewMode?: string;
+  sortBy?: string;
+  hologramMode?: boolean;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    products: [
+      {
+        id: 1,
+        name: '神经植入体 V7',
+        category: 'implants',
+        price: 8999,
+        stock: 42,
+        status: 'available',
+        rating: 4.8,
+        image: 'https://via.placeholder.com/200x200/00ffff/000000?text=NEURAL',
+        description: '最新一代神经接口，支持直接脑机连接',
+        features: ['低延迟', '高带宽', '自适应'],
+      },
+      {
+        id: 2,
+        name: '量子处理器核心',
+        category: 'hardware',
+        price: 15999,
+        stock: 18,
+        status: 'limited',
+        rating: 4.9,
+        image: 'https://via.placeholder.com/200x200/ff00ff/000000?text=QUANTUM',
+        description: '突破性的量子计算单元，算力提升1000倍',
+        features: ['超导', '稳定', '可扩展'],
+      },
+      {
+        id: 3,
+        name: '全息投影仪',
+        category: 'devices',
+        price: 4999,
+        stock: 67,
+        status: 'available',
+        rating: 4.5,
+        image:
+          'https://via.placeholder.com/200x200/00ff88/000000?text=HOLOGRAM',
+        description: '8K 分辨率全息投影，支持360度观看',
+        features: ['8K', '360°', '触控'],
+      },
+      {
+        id: 4,
+        name: '纳米修复机器人',
+        category: 'medical',
+        price: 24999,
+        stock: 8,
+        status: 'limited',
+        rating: 4.7,
+        image: 'https://via.placeholder.com/200x200/ffaa00/000000?text=NANO',
+        description: '智能纳米机器人，快速修复细胞损伤',
+        features: ['精准', '快速', '安全'],
+      },
+      {
+        id: 5,
+        name: '反重力推进器',
+        category: 'vehicles',
+        price: 49999,
+        stock: 3,
+        status: 'rare',
+        rating: 5,
+        image: 'https://via.placeholder.com/200x200/ff0055/000000?text=GRAVITY',
+        description: '个人飞行装置，最高时速500km/h',
+        features: ['静音', '高效', '稳定'],
+      },
+      {
+        id: 6,
+        name: '记忆芯片 1PB',
+        category: 'storage',
+        price: 2999,
+        stock: 156,
+        status: 'available',
+        rating: 4.3,
+        image: 'https://via.placeholder.com/200x200/00ffff/000000?text=MEMORY',
+        description: '超高密度存储，可保存整个人类记忆',
+        features: ['1PB', '快速', '加密'],
+      },
+      {
+        id: 7,
+        name: '能量护盾发生器',
+        category: 'defense',
+        price: 12999,
+        stock: 24,
+        status: 'available',
+        rating: 4.6,
+        image: 'https://via.placeholder.com/200x200/ff00ff/000000?text=SHIELD',
+        description: '便携式能量护盾，可抵御物理和能量攻击',
+        features: ['轻便', '强效', '持久'],
+      },
+      {
+        id: 8,
+        name: 'AI 助手核心',
+        category: 'software',
+        price: 7999,
+        stock: 89,
+        status: 'available',
+        rating: 4.4,
+        image: 'https://via.placeholder.com/200x200/00ff88/000000?text=AI',
+        description: '个人AI助手，全天候智能服务',
+        features: ['学习', '推理', '创造'],
+      },
+      {
+        id: 9,
+        name: '隐形迷彩服',
+        category: 'clothing',
+        price: 6999,
+        stock: 31,
+        status: 'limited',
+        rating: 4.5,
+        image: 'https://via.placeholder.com/200x200/ffaa00/000000?text=CLOAK',
+        description: '光学隐形技术，完全融入环境',
+        features: ['隐形', '透气', '耐用'],
+      },
+      {
+        id: 10,
+        name: '时间扭曲器',
+        category: 'experimental',
+        price: 99999,
+        stock: 1,
+        status: 'rare',
+        rating: 5,
+        image: 'https://via.placeholder.com/200x200/ff0055/000000?text=TIME',
+        description: '实验性时间操控设备，慎用',
+        features: ['危险', '强大', '实验'],
+      },
+    ],
+    filteredProducts: [],
+    selectedCategory: 'all',
+    searchKeyword: '',
+    selectedProduct: null,
+    modalVisible: false,
+    viewMode: 'grid',
+    sortBy: 'name',
+    hologramMode: true,
+  };
+
+  componentDidMount() {
+    this.filterProducts();
+  }
+
+  filterProducts() {
+    let filtered = this.state.products;
+    if (this.state.selectedCategory !== 'all') {
+      filtered = filtered.filter(
+        p => p.category === this.state.selectedCategory
+      );
+    }
+    if (this.state.searchKeyword) {
+      const keyword = this.state.searchKeyword.toLowerCase();
+      filtered = filtered.filter(
+        p =>
+          p.name.toLowerCase().includes(keyword) ||
+          p.description.toLowerCase().includes(keyword)
+      );
+    }
+    if (this.state.sortBy === 'price') {
+      filtered = [...filtered].sort((a, b) => b.price - a.price);
+    } else if (this.state.sortBy === 'rating') {
+      filtered = [...filtered].sort((a, b) => b.rating - a.rating);
+    } else if (this.state.sortBy === 'stock') {
+      filtered = [...filtered].sort((a, b) => b.stock - a.stock);
+    }
+    this.setState({
+      filteredProducts: filtered,
+    });
+  }
+
+  handleCategoryChange(value) {
+    this.setState(
+      {
+        selectedCategory: value,
+      },
+      () => this.filterProducts()
+    );
+  }
+
+  handleSearch(value) {
+    this.setState(
+      {
+        searchKeyword: value,
+      },
+      () => this.filterProducts()
+    );
+  }
+
+  handleSortChange(value) {
+    this.setState(
+      {
+        sortBy: value,
+      },
+      () => this.filterProducts()
+    );
+  }
+
+  handleViewProduct(product) {
+    this.setState({
+      selectedProduct: product,
+      modalVisible: true,
+    });
+  }
+
+  handleCloseModal() {
+    this.setState({
+      modalVisible: false,
+    });
+  }
+
+  handleAddProduct() {
+    this.utils.showToast('添加新产品');
+  }
+
+  handleEditProduct(product) {
+    this.utils.showToast(`编辑产品: ${product.name}`);
+  }
+
+  handleDeleteProduct(product) {
+    this.utils.showToast(`删除产品: ${product.name}`);
+  }
+
+  toggleViewMode() {
+    this.setState({
+      viewMode: this.state.viewMode === 'grid' ? 'list' : 'grid',
+    });
+  }
+
+  toggleHologramMode() {
+    this.setState({
+      hologramMode: !this.state.hologramMode,
+    });
+  }
+
+  getStatusColor(status) {
+    switch (status) {
+      case 'available':
+        return '#00ff88';
+      case 'limited':
+        return '#ffaa00';
+      case 'rare':
+        return '#ff00ff';
+      default:
+        return '#888888';
+    }
+  }
+
+  getStatusText(status) {
+    switch (status) {
+      case 'available':
+        return '现货';
+      case 'limited':
+        return '限量';
+      case 'rare':
+        return '稀有';
+      default:
+        return status;
+    }
+  }
+
+  getCategoryColor(category) {
+    const colors = {
+      implants: '#00ffff',
+      hardware: '#ff00ff',
+      devices: '#00ff88',
+      medical: '#ffaa00',
+      vehicles: '#ff0055',
+      storage: '#00ffff',
+      defense: '#ff00ff',
+      software: '#00ff88',
+      clothing: '#ffaa00',
+      experimental: '#ff0055',
+    };
+    return colors[category] || '#888888';
+  }
+
+  render() {
+    return (
+      <Page style={styles.container}>
+        <View style={styles.scanlines} />
+        <View style={styles.grid} />
+        <View style={styles.particles} />
+        <View style={styles.header}>
+          <View style={styles.headerLeft}>
+            <Text style={styles.title}>产品管理</Text>
+            <Text style={styles.subtitle}>PRODUCT MANAGEMENT SYSTEM</Text>
+          </View>
+          <View style={styles.headerRight}>
+            <Button
+              style={styles.cyberButton}
+              onClick={() => this.toggleHologramMode()}
+            >
+              <Text style={styles.buttonText}>
+                {this.state.hologramMode ? '关闭全息' : '开启全息'}
+              </Text>
+            </Button>
+            <Button
+              style={[styles.cyberButton, styles.primaryButton]}
+              onClick={() => this.handleAddProduct()}
+            >
+              <Text style={styles.buttonText}>+ 新增产品</Text>
+            </Button>
+          </View>
+        </View>
+        <View style={styles.toolbar}>
+          <View style={styles.toolbarLeft}>
+            <Input
+              placeholder="搜索产品..."
+              style={styles.searchInput}
+              value={this.state.searchKeyword}
+              onChange={e => this.handleSearch(e.target.value)}
+            />
+            <Select
+              style={styles.categorySelect}
+              value={this.state.selectedCategory}
+              onChange={value => this.handleCategoryChange(value)}
+            >
+              {categories.map((cat, index) => (
+                <Select.Option key={cat.value} value={cat.value}>
+                  <Text className="text-[#ffffff]">{cat.label}</Text>
+                </Select.Option>
+              ))}
+            </Select>
+            <Select
+              style={styles.sortSelect}
+              value={this.state.sortBy}
+              onChange={value => this.handleSortChange(value)}
+            >
+              <Select.Option value="name">
+                <Text className="text-[#ffffff]">按名称</Text>
+              </Select.Option>
+              <Select.Option value="price">
+                <Text className="text-[#ffffff]">按价格</Text>
+              </Select.Option>
+              <Select.Option value="rating">
+                <Text className="text-[#ffffff]">按评分</Text>
+              </Select.Option>
+              <Select.Option value="stock">
+                <Text className="text-[#ffffff]">按库存</Text>
+              </Select.Option>
+            </Select>
+          </View>
+          <View style={styles.toolbarRight}>
+            <Text style={styles.totalText}>
+              共{this.state.filteredProducts?.length}件产品
+            </Text>
+            <Button
+              style={styles.viewModeButton}
+              onClick={() => this.toggleViewMode()}
+            >
+              <Text style={styles.buttonText}>
+                {this.state.viewMode === 'grid' ? '列表' : '网格'}
+              </Text>
+            </Button>
+          </View>
+        </View>
+        <View style={styles.productContainer}>
+          {!!(this.state.viewMode === 'grid') && (
+            <View style={styles.productGrid}>
+              {this.state.filteredProducts.map((product, index) => (
+                <View
+                  key={product.id}
+                  style={[
+                    styles.productCard,
+                    this.state.hologramMode && styles.productCardHologram,
+                  ]}
+                  onClick={() => this.handleViewProduct(product)}
+                >
+                  <View style={styles.productImageContainer}>
+                    <Image src={product.image} style={styles.productImage} />
+                    <View
+                      style={[
+                        styles.statusBadge,
+                        {
+                          backgroundColor:
+                            this.getStatusColor(product.status) + '33',
+                          borderColor: this.getStatusColor(product.status),
+                        },
+                      ]}
+                    >
+                      <Text
+                        style={[
+                          styles.statusText,
+                          { color: this.getStatusColor(product.status) },
+                        ]}
+                      >
+                        {this.getStatusText(product.status)}
+                      </Text>
+                    </View>
+                  </View>
+                  <View style={styles.productInfo}>
+                    <Text style={styles.productName}>{product.name}</Text>
+                    <Tag
+                      color={this.getCategoryColor(product.category)}
+                      style={styles.categoryTag}
+                    >
+                      <Text>
+                        {
+                          this.categories.find(function (c) {
+                            return c.value === product.category;
+                          })?.label
+                        }
+                      </Text>
+                    </Tag>
+                    <View style={styles.productMeta}>
+                      <Text style={styles.productPrice}>
+                        ¥{product.price.toLocaleString()}
+                      </Text>
+                      <Text style={styles.productRating}>
+                        ★{product.rating}
+                      </Text>
+                    </View>
+                    <View style={styles.productStock}>
+                      <Text style={styles.stockLabel}>库存:</Text>
+                      <Text style={styles.stockValue}>{product.stock}</Text>
+                    </View>
+                  </View>
+                </View>
+              ))}
+            </View>
+          )}
+          {!(this.state.viewMode === 'grid') && (
+            <View style={styles.productList}>
+              {this.state.filteredProducts.map((product, index) => (
+                <View
+                  key={product.id}
+                  style={[
+                    styles.productListItem,
+                    this.state.hologramMode && styles.productListItemHologram,
+                  ]}
+                  onClick={() => this.handleViewProduct(product)}
+                >
+                  <Image src={product.image} style={styles.listItemImage} />
+                  <View style={styles.listItemInfo}>
+                    <Text style={styles.listItemName}>{product.name}</Text>
+                    <Text style={styles.listItemDescription}>
+                      {product.description}
+                    </Text>
+                  </View>
+                  <View style={styles.listItemMeta}>
+                    <Text style={styles.listItemPrice}>
+                      ¥{product.price.toLocaleString()}
+                    </Text>
+                    <Text style={styles.listItemRating}>★{product.rating}</Text>
+                    <Text style={styles.listItemStock}>
+                      库存:{product.stock}
+                    </Text>
+                  </View>
+                  <View style={styles.listItemActions}>
+                    <Button
+                      size="small"
+                      style={styles.actionButton}
+                      onClick={e => {
+                        e.stopPropagation();
+                        this.handleEditProduct(product);
+                      }}
+                    >
+                      编辑
+                    </Button>
+                    <Button
+                      size="small"
+                      style={[styles.actionButton, styles.deleteButton]}
+                      onClick={e => {
+                        e.stopPropagation();
+                        this.handleDeleteProduct(product);
+                      }}
+                    >
+                      删除
+                    </Button>
+                  </View>
+                </View>
+              ))}
+            </View>
+          )}
+        </View>
+        {!!this.state.modalVisible && (
+          <View
+            style={styles.modalOverlay}
+            onClick={() => this.handleCloseModal()}
+          >
+            <View style={styles.modal} onClick={e => e.stopPropagation()}>
+              <View style={styles.modalHeader}>
+                <Text style={styles.modalTitle}>产品详情</Text>
+                <Button
+                  style={styles.closeButton}
+                  onClick={() => this.handleCloseModal()}
+                >
+                  <Text style={styles.closeButtonText}>✕</Text>
+                </Button>
+              </View>
+              <View style={styles.modalContent}>
+                <View style={styles.modalImageSection}>
+                  <Image
+                    src={this.state.selectedProduct?.image}
+                    style={styles.modalImage}
+                  />
+                </View>
+                <View style={styles.modalInfoSection}>
+                  <Text style={styles.modalProductName}>
+                    {this.state.selectedProduct?.name}
+                  </Text>
+                  <View style={styles.modalTags}>
+                    <Tag
+                      color={this.getCategoryColor(
+                        this.state.selectedProduct?.category
+                      )}
+                      style={styles.modalTag}
+                    >
+                      <Text>
+                        {
+                          this.categories.find(function (c) {
+                            return (
+                              c.value === this.state.selectedProduct?.category
+                            );
+                          })?.label
+                        }
+                      </Text>
+                    </Tag>
+                    <Tag
+                      color={this.getStatusColor(
+                        this.state.selectedProduct?.status
+                      )}
+                      style={styles.modalTag}
+                    >
+                      <Text>
+                        {this.getStatusText(this.state.selectedProduct?.status)}
+                      </Text>
+                    </Tag>
+                  </View>
+                  <Text style={styles.modalDescription}>
+                    {this.state.selectedProduct?.description}
+                  </Text>
+                  <View style={styles.modalFeatures}>
+                    <Text style={styles.featuresTitle}>特性:</Text>
+                    {(this.state.selectedProduct?.features).map(
+                      (feature, index) => (
+                        <Tag
+                          key={index}
+                          color="#00ffff"
+                          style={styles.featureTag}
+                        >
+                          <Text>{feature}</Text>
+                        </Tag>
+                      )
+                    )}
+                  </View>
+                  <View style={styles.modalMeta}>
+                    <View style={styles.metaItem}>
+                      <Text style={styles.metaLabel}>价格</Text>
+                      <Text style={styles.metaValue}>
+                        ¥{this.state.selectedProduct?.price?.toLocaleString()}
+                      </Text>
+                    </View>
+                    <View style={styles.metaItem}>
+                      <Text style={styles.metaLabel}>评分</Text>
+                      <Text style={styles.metaValue}>
+                        ★{this.state.selectedProduct?.rating}
+                      </Text>
+                    </View>
+                    <View style={styles.metaItem}>
+                      <Text style={styles.metaLabel}>库存</Text>
+                      <Text style={styles.metaValue}>
+                        {this.state.selectedProduct?.stock}
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+              <View style={styles.modalFooter}>
+                <Button
+                  style={[styles.cyberButton, styles.modalButton]}
+                  onClick={() => this.handleCloseModal()}
+                >
+                  <Text style={styles.buttonText}>关闭</Text>
+                </Button>
+                <Button
+                  style={[
+                    styles.cyberButton,
+                    styles.primaryButton,
+                    styles.modalButton,
+                  ]}
+                  onClick={() =>
+                    this.handleEditProduct(this.state.selectedProduct)
+                  }
+                >
+                  <Text style={styles.buttonText}>编辑产品</Text>
+                </Button>
+              </View>
+            </View>
+          </View>
+        )}
+      </Page>
+    );
+  }
+}
+
+export default Document;