@appthen/cli 1.2.11 → 1.2.12

package/tests/test-app/src/pages/article-list.tsx

@@ -0,0 +1,222 @@
+/**
+ * 文章列表
+ * 查看和管理所有文章内容
+ *
+ * @type Page
+ * @route /articles
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  articles?: {
+    /* @example 1 */id?: number,
+    /* @example 如何使用React构建高性能应用 */title?: string,
+    /* @example 张三 */author?: string,
+    /* @example 技术 */category?: string,
+    /* @example 1520 */views?: number,
+    /* @example published */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    articles: [
+      {
+        id: 1,
+        title: '如何使用React构建高性能应用',
+        author: '张三',
+        category: '技术',
+        views: 1520,
+        status: 'published',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        title: '2024年前端发展趋势预测',
+        author: '李四',
+        category: '资讯',
+        views: 3280,
+        status: 'published',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        title: 'JavaScript高级特性解析',
+        author: '王五',
+        category: '教程',
+        views: 890,
+        status: 'draft',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        title: 'Vue3 Composition API最佳实践',
+        author: '赵六',
+        category: '教程',
+        views: 2150,
+        status: 'published',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        title: 'TypeScript入门指南',
+        author: '钱七',
+        category: '教程',
+        views: 4560,
+        status: 'published',
+        createTime: '2024-05-12',
+      },
+    ],
+    loading: false,
+    searchKeyword: '',
+  };
+
+  handleSearch(value) {
+    this.setState({
+      searchKeyword: value,
+    });
+  }
+
+  handleAdd() {
+    console.log('添加文章');
+  }
+
+  handleEdit(record) {
+    console.log('编辑文章', record);
+  }
+
+  handleDelete(record) {
+    console.log('删除文章', record);
+  }
+
+  getStatusTag(status) {
+    if (status === 'published') {
+      return <Tag color="green">已发布</Tag>;
+    }
+    if (status === 'draft') {
+      return <Tag color="orange">草稿</Tag>;
+    }
+    return <Tag color="gray">下架</Tag>;
+  }
+
+  getCategoryTag(category) {
+    const config = {
+      技术: {
+        text: '技术',
+        color: 'blue',
+      },
+      资讯: {
+        text: '资讯',
+        color: 'purple',
+      },
+      教程: {
+        text: '教程',
+        color: 'cyan',
+      },
+      分享: {
+        text: '分享',
+        color: 'green',
+      },
+    };
+    const configItem = config[category] || {
+      text: category,
+      color: 'default',
+    };
+    return <Tag color={configItem.color}>{configItem.text}</Tag>;
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <h1 className="text-2xl font-bold text-[#1f2937]">文章列表</h1>
+          <p className="text-[#6b7280] text-sm mt-[4px]">
+            管理系统中的所有文章内容
+          </p>
+        </View>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <Input
+              placeholder="搜索文章标题/作者"
+              value={this.state.searchKeyword}
+              onChange={e => this.handleSearch(e.target.value)}
+              prefix="🔍"
+              className=""
+            />
+            <Button type="primary" onClick={() => this.handleAdd()}>
+              + 新增文章
+            </Button>
+          </View>
+        </Card>
+        <Card>
+          <Table
+            loading={this.state.loading}
+            columns={[
+              { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+              { title: '文章标题', dataIndex: 'title', key: 'title' },
+              { title: '作者', dataIndex: 'author', key: 'author' },
+              {
+                title: '分类',
+                dataIndex: 'category',
+                key: 'category',
+                render: function (text) {
+                  return this.getCategoryTag(text);
+                },
+              },
+              { title: '阅读量', dataIndex: 'views', key: 'views' },
+              {
+                title: '状态',
+                dataIndex: 'status',
+                key: 'status',
+                render: function (text) {
+                  return this.getStatusTag(text);
+                },
+              },
+              { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
+              {
+                title: '操作',
+                key: 'action',
+                render: (text, record) => (
+                  <Space>
+                    <Button type="link" onClick={() => this.handleEdit(record)}>
+                      编辑
+                    </Button>
+                    <Button
+                      type="link"
+                      danger={true}
+                      onClick={() => this.handleDelete(record)}
+                    >
+                      删除
+                    </Button>
+                  </Space>
+                ),
+              },
+            ]}
+            dataSource={this.state.articles}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,168 @@
+/**
+ * 3岁宝宝商品推荐页面 - iPad App 单页应用
+ * @type Page
+ * @route /baby-products
+ * @screen 1400x900 #f5f5f7
+ * @frames web
+ */
+import React from 'react';
+import { Page, Text, View } from '@appthen/react';
+
+
+class IProps {
+  /* 页面标题 */
+  title?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 商品列表 */
+  products?: {
+    /* @example 1 */id?: number,
+    /* @example 乐高得宝系列 积木桶 */name?: string,
+    /* @example 299 */price?: number,
+    /* @example 益智玩具 */category?: string,
+    tags?: string[],
+    /* @example 4.8 */rating?: number,
+    /* @example 5200 */sales?: number,
+    /* @example 专为1-5岁儿童设计的大颗粒积木，色彩鲜艳，材质安全，锻炼宝宝手眼协调能力和创造力。 */description?: string,
+    /* @example 🧱 */image?: string,
+  }[];
+  /* 选中的分类 */
+  selectedCategory?: string;
+  /* 搜索关键词 */
+  searchKeyword?: string;
+  /* 模态框显示状态 */
+  modalVisible?: boolean;
+  /* 当前查看的商品 */
+  currentProduct?: any;
+  /* 购物车数量 */
+  cartCount?: number;
+  /* 当前激活的页面 */
+  activePage?: string;
+  /* 收藏的商品列表 */
+  favorites?: string[];
+  /* 购物车商品列表 */
+  cartItems?: string[];
+}
+
+
+class Document extends React.Component<IProps, IState> {
+  state = {"products": [{"id": 1, "name": "乐高得宝系列 积木桶", "price": 299, "category": "益智玩具", "tags": ["大颗粒", "安全材质"], "rating": 4.8, "sales": 5200, "description": "专为1-5岁儿童设计的大颗粒积木，色彩鲜艳，材质安全，锻炼宝宝手眼协调能力和创造力。", "image": "🧱"}, {"id": 2, "name": "小猪佩奇精装绘本套装", "price": 158, "category": "儿童绘本", "tags": ["精装", "双语"], "rating": 4.9, "sales": 8900, "description": "包含20册经典小猪佩奇故事，中英双语对照，精装印刷，培养宝宝阅读兴趣和语言能力。", "image": "📚"}, {"id": 3, "name": "纯棉卡通连体衣", "price": 89, "category": "童装", "tags": ["纯棉", "透气"], "rating": 4.7, "sales": 3200, "description": "100%纯棉材质，柔软舒适，卡通印花可爱，适合3岁宝宝日常穿着。", "image": "👕"}, {"id": 4, "name": "儿童平衡车", "price": 399, "category": "运动玩具", "tags": ["可调节", "防滑"], "rating": 4.8, "sales": 4100, "description": "无脚踏设计，锻炼宝宝平衡能力，座椅高度可调节，防滑轮胎更安全。", "image": "🚲"}, {"id": 5, "name": "磁性拼图玩具", "price": 129, "category": "益智玩具", "tags": ["磁性", "益智"], "rating": 4.6, "sales": 2800, "description": "磁性拼图板，包含动物、水果等多种图案，锻炼宝宝认知能力和动手能力。", "image": "🧩"}, {"id": 6, "name": "儿童水彩笔套装", "price": 59, "category": "艺术启蒙", "tags": ["可水洗", "无毒"], "rating": 4.7, "sales": 4500, "description": "24色可水洗水彩笔，无毒安全，让宝宝尽情发挥创造力。", "image": "🎨"}, {"id": 7, "name": "毛绒安抚玩具熊", "price": 169, "category": "安抚玩具", "tags": ["柔软", "可机洗"], "rating": 4.9, "sales": 6700, "description": "超柔软毛绒材质，可爱造型，给宝宝温暖的陪伴感。", "image": "🧸"}, {"id": 8, "name": "儿童安全剪刀", "price": 29, "category": "艺术启蒙", "tags": ["圆头", "安全"], "rating": 4.5, "sales": 3900, "description": "专为儿童设计的安全剪刀，圆头设计，保护宝宝手指安全。", "image": "✂️"}], "selectedCategory": "全部", "searchKeyword": "", "modalVisible": false, "cartCount": 0, "activePage": "home", "favorites": [], "cartItems": []}
+  
+
+handleCategoryChange(category) {
+this.setState({
+    selectedCategory: category
+  });
+}
+
+
+handleSearch(keyword) {
+this.setState({
+    searchKeyword: keyword
+  });
+}
+
+
+handleViewDetail(product) {
+this.setState({
+    modalVisible: true,
+    currentProduct: product
+  });
+}
+
+
+handleModalClose() {
+this.setState({
+    modalVisible: false
+  });
+}
+
+
+handleAddToCart(product) {
+const existingItem = this.state.cartItems.find(item => item.id === product.id);
+  if (existingItem) {
+    this.setState(prevState => ({
+      cartItems: prevState.cartItems.map(item => item.id === product.id ? {
+        ...item,
+        quantity: item.quantity + 1
+      } : item),
+      cartCount: prevState.cartCount + 1
+    }));
+  } else {
+    this.setState(prevState => ({
+      cartItems: [...prevState.cartItems, {
+        ...product,
+        quantity: 1
+      }],
+      cartCount: prevState.cartCount + 1
+    }));
+  }
+  this.utils.toast(`已将 "${product.name}" 加入购物车`);
+  this.handleModalClose();
+}
+
+
+handleToggleFavorite(product) {
+const exists = this.state.favorites.find(f => f.id === product.id);
+  if (exists) {
+    this.setState(prevState => ({
+      favorites: prevState.favorites.filter(f => f.id !== product.id)
+    }));
+    this.utils.toast('已取消收藏');
+  } else {
+    this.setState(prevState => ({
+      favorites: [...prevState.favorites, product]
+    }));
+    this.utils.toast('已收藏');
+  }
+}
+
+
+handleRemoveFromCart(productId) {
+const item = this.state.cartItems.find(i => i.id === productId);
+  this.setState(prevState => ({
+    cartItems: prevState.cartItems.filter(i => i.id !== productId),
+    cartCount: prevState.cartCount - (item?.quantity || 0)
+  }));
+  this.utils.toast('已从购物车移除');
+}
+
+
+handlePageChange(page) {
+this.setState({
+    activePage: page
+  });
+}
+
+
+getFilteredProducts() {
+let products = this.state.products || [];
+  if (this.state.selectedCategory !== '全部') {
+    products = products.filter(p => p.category === this.state.selectedCategory);
+  }
+  if (this.state.searchKeyword) {
+    const keyword = this.state.searchKeyword.toLowerCase();
+    products = products.filter(p => p.name.toLowerCase().includes(keyword) || p.category.toLowerCase().includes(keyword));
+  }
+  return products;
+}
+
+  render() {
+    const filteredProducts = this.getFilteredProducts();
+const isFavorite = product => this.state.favorites?.find(f => f.id === product.id);
+return (<Page className="bg-gradient-to-br from-[#fdf2f8] via-purple-50 to-blue-50 min-h-screen flex"><View className="bg-white/80 backdrop-blur-md w-[256px] shadow-[0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)] flex flex-col"><View className="border-gray-100 p-[24px] border-b-[1px] border-b-solid"><h1 className="bg-gradient-to-r from-[#ec4899] to-purple-500 [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [backgroundClip:text] [WebkitBackgroundClip:text] text-[transparent] text-2xl font-bold">👶 宝宝好物</h1><p className="text-[#6b7280] text-sm mt-[4px]">3岁宝宝专属商城</p></View><nav className="space-y-2 flex-1 p-[16px]"><button onClick={() => this.handlePageChange('home')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${this.state.activePage === "home" ? "bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-md" : "text-gray-600 hover:bg-pink-50"}`}><Text className="text-xl">🏠</Text><Text className="font-medium">首页推荐</Text></button><button onClick={() => this.handlePageChange('categories')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${this.state.activePage === "categories" ? "bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-md" : "text-gray-600 hover:bg-pink-50"}`}><Text className="text-xl">📂</Text><Text className="font-medium">商品分类</Text></button><button onClick={() => this.handlePageChange('favorites')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${this.state.activePage === "favorites" ? "bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-md" : "text-gray-600 hover:bg-pink-50"}`}><Text className="text-xl">❤️</Text><Text className="font-medium">我的收藏</Text>{!!(this.state.favorites?.length > 0) && (<Text className="ml-[auto] bg-[#ef4444] text-[#ffffff] text-xs pl-[8px] pr-[8px] pt-[0px] pb-[0px] rounded-full">{this.state.favorites.length}</Text>)}</button><button onClick={() => this.handlePageChange('cart')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${this.state.activePage === "cart" ? "bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-md" : "text-gray-600 hover:bg-pink-50"}`}><Text className="text-xl">🛒</Text><Text className="font-medium">购物车</Text>{!!(this.state.cartCount > 0) && (<Text className="ml-[auto] bg-[#ef4444] text-[#ffffff] text-xs pl-[8px] pr-[8px] pt-[0px] pb-[0px] rounded-full">{this.state.cartCount}</Text>)}</button><button onClick={() => this.handlePageChange('profile')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${this.state.activePage === "profile" ? "bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-md" : "text-gray-600 hover:bg-pink-50"}`}><Text className="text-xl">👤</Text><Text className="font-medium">个人中心</Text></button></nav><View className="border-gray-100 p-[16px] border-t border-t-solid"><View className="text-xs text-[var(--center)]">© 2024 宝宝好物商城</View></View></View><View className="flex-1 overflow-hidden flex flex-col"><View className="bg-white/80 backdrop-blur-md shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05)] pl-[32px] pr-[32px] pt-[16px] pb-[16px]"><View className="flex items-center justify-between"><View className="relative w-[384px]"><input type="text" placeholder="搜索商品..." value={this.state.searchKeyword} onChange={(e) => this.handleSearch(e.target.value)} className="focus:outline-none focus:ring-2 focus:ring-pink-300 w-full pl-[48px] pr-[16px] pt-[12px] pb-[12px] bg-[#f3f4f6] rounded-2xl" /><Text className="top-1/2 transform -translate-y-1/2 absolute left-[16px] text-[#9ca3af]">🔍</Text></View><View className="space-x-4 flex items-center"><button className="text-gray-500 hover:text-pink-500 transition-colors p-[8px]">🔔</button><View className="bg-gradient-to-r from-[#ec4899] to-purple-500 w-[40px] h-[40px] rounded-full flex items-center justify-center text-[#ffffff] font-bold">B</View></View></View></View><View className="flex-1 overflow-y-auto p-[32px]">{!!(this.state.activePage === 'home') && (<View><View className="bg-gradient-to-r from-[#ec4899] to-purple-500 rounded-3xl p-[32px] mb-[32px] text-[#ffffff]"><h2 className="text-3xl font-bold mb-[8px]">精选好物推荐</h2><p className="text-[var(--pink-100)]">为3岁宝宝挑选的优质商品</p></View><View className="space-x-3 flex items-center mb-[24px]">{(this.categories).map((category, index) => (<button key={category} onClick={() => this.handleCategoryChange(category)} className={`px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap ${this.state.selectedCategory === category ? "bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-md" : "bg-white text-gray-600 border border-gray-200 hover:border-pink-300"}`}><Text>{category}</Text></button>))}</View>{!!(filteredProducts.length === 0) && (<View className="text-[var(--center)] pt-[80px] pb-[80px]"><Text className="text-6xl">🔍</Text><p className="text-[#6b7280] mt-[16px]">没有找到相关商品</p></View>)}{(!(filteredProducts.length === 0)) && (<View className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">{(filteredProducts).map((product, index) => (<View key={product.id} className="shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group bg-[#ffffff] rounded-2xl overflow-hidden cursor-pointer"><View className="bg-gradient-to-br from-[#fce7f3] to-purple-100 h-[192px] flex items-center justify-center relative overflow-hidden"><Text className="group-hover:scale-110 transition-transform duration-300 text-[72px]">{product.image}</Text><View className="bg-white/90 backdrop-blur-sm absolute top-[12px] right-[12px] pl-[12px] pr-[12px] pt-[4px] pb-[4px] rounded-full text-xs font-medium text-[#ec4899]"><Text>{product.category}</Text></View><button onClick={(e) => {e.stopPropagation();
+  this.handleToggleFavorite(product);}} className="bg-white/90 backdrop-blur-sm hover:scale-110 transition-transform absolute top-[12px] left-[12px] w-[40px] h-[40px] rounded-full flex items-center justify-center"><Text className={isFavorite(product) ? "text-red-500" : "text-gray-300"}>{isFavorite(product) ? '❤️' : '🤍'}</Text></button></View><View className="p-[16px]"><h3 className="line-clamp-2 font-bold text-[#1f2937] text-lg mb-[8px]">{product.name}</h3><View className="gap-2 flex flex-wrap mb-[12px]">{(product.tags).map((tag, index) => (<Text key={tag} className="pl-[8px] pr-[8px] pt-[4px] pb-[4px] bg-[var(--pink-50)] text-[var(--pink-600)] text-xs rounded-full">{tag}</Text>))}</View><View className="flex items-center justify-between mb-[12px]"><View className="space-x-1 flex items-center"><Text className="text-[var(--yellow-400)]">⭐</Text><Text className="text-sm font-medium text-[#374151]">{product.rating}</Text></View><Text className="text-xs text-[#9ca3af]">已售{product.sales > 1000 ? (product.sales / 1000).toFixed(1) + 'k' : product.sales}</Text></View><View className="flex items-center justify-between"><View className="flex items-baseline"><Text className="text-2xl font-bold text-[#ec4899]">¥{product.price}</Text></View><button onClick={(e) => {e.stopPropagation();
+  this.handleAddToCart(product);}} className="hover:shadow-lg transition-all bg-gradient-to-r from-[#ec4899] to-purple-500 pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#ffffff] rounded-full text-sm font-medium">加入购物车</button></View></View></View>))}</View>)}</View>)}{!!(this.state.activePage === 'categories') && (<View><h2 className="text-2xl font-bold text-[#1f2937] mb-[24px]">商品分类</h2><View className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">{(this.categories.filter(c => c !== '全部')).map((category, index) => (<View key={category} onClick={() => {this.handleCategoryChange(category);
+  this.handlePageChange('home');}} className="shadow-lg hover:shadow-2xl transition-all group bg-[#ffffff] rounded-2xl p-[24px] cursor-pointer text-[var(--center)]"><Text className="block group-hover:scale-110 transition-transform text-5xl mb-[16px]">{category === '益智玩具' ? '🧩' : category === '儿童绘本' ? '📚' : category === '童装' ? '👕' : category === '运动玩具' ? '🚲' : category === '艺术启蒙' ? '🎨' : '🧸'}</Text><h3 className="font-bold text-[#1f2937]">{category}</h3><p className="text-sm text-[#6b7280] mt-[4px]">{this.state.products?.filter(function (p) {
+  return p.category === category;
+}).length}件商品</p></View>))}</View></View>)}{!!(this.state.activePage === 'favorites') && (<View><h2 className="text-2xl font-bold text-[#1f2937] mb-[24px]">我的收藏</h2>{!!(this.state.favorites?.length === 0) && (<View className="text-[var(--center)] pt-[80px] pb-[80px]"><Text className="text-6xl">❤️</Text><p className="text-[#6b7280] mt-[16px]">还没有收藏商品</p></View>)}{(!(this.state.favorites?.length === 0)) && (<View className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">{(this.state.favorites).map((product, index) => (<View key={product.id} className="shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group bg-[#ffffff] rounded-2xl overflow-hidden cursor-pointer"><View className="bg-gradient-to-br from-[#fce7f3] to-purple-100 h-[192px] flex items-center justify-center relative overflow-hidden"><Text className="group-hover:scale-110 transition-transform duration-300 text-[72px]">{product.image}</Text><View className="bg-white/90 backdrop-blur-sm absolute top-[12px] right-[12px] pl-[12px] pr-[12px] pt-[4px] pb-[4px] rounded-full text-xs font-medium text-[#ec4899]"><Text>{product.category}</Text></View><button onClick={(e) => {e.stopPropagation();
+  this.handleToggleFavorite(product);}} className="bg-white/90 backdrop-blur-sm hover:scale-110 transition-transform absolute top-[12px] left-[12px] w-[40px] h-[40px] rounded-full flex items-center justify-center"><Text className="text-[#ef4444]">❤️</Text></button></View><View className="p-[16px]"><h3 className="line-clamp-2 font-bold text-[#1f2937] text-lg mb-[8px]">{product.name}</h3><View className="gap-2 flex flex-wrap mb-[12px]">{(product.tags).map((tag, index) => (<Text key={tag} className="pl-[8px] pr-[8px] pt-[4px] pb-[4px] bg-[var(--pink-50)] text-[var(--pink-600)] text-xs rounded-full">{tag}</Text>))}</View><View className="flex items-center justify-between mb-[12px]"><View className="space-x-1 flex items-center"><Text className="text-[var(--yellow-400)]">⭐</Text><Text className="text-sm font-medium text-[#374151]">{product.rating}</Text></View><Text className="text-xs text-[#9ca3af]">已售{product.sales > 1000 ? (product.sales / 1000).toFixed(1) + 'k' : product.sales}</Text></View><View className="flex items-center justify-between"><View className="flex items-baseline"><Text className="text-2xl font-bold text-[#ec4899]">¥{product.price}</Text></View><button onClick={(e) => {e.stopPropagation();
+  this.handleAddToCart(product);}} className="hover:shadow-lg transition-all bg-gradient-to-r from-[#ec4899] to-purple-500 pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#ffffff] rounded-full text-sm font-medium">加入购物车</button></View></View></View>))}</View>)}</View>)}{!!(this.state.activePage === 'cart') && (<View><h2 className="text-2xl font-bold text-[#1f2937] mb-[24px]">购物车</h2>{!!(this.state.cartItems?.length === 0) && (<View className="text-[var(--center)] pt-[80px] pb-[80px] flex flex-col justify-center items-center"><Text className="text-6xl">🛒</Text><p className="text-[#6b7280] mt-[16px]">购物车是空的</p></View>)}{(!(this.state.cartItems?.length === 0)) && (<View className="space-y-4">{(this.state.cartItems).map((item, index) => (<View key={item.id} className="space-x-6 bg-[#ffffff] rounded-2xl p-[24px] shadow-[0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)] flex items-center"><View className="bg-gradient-to-br from-[#fce7f3] to-purple-100 w-[96px] h-[96px] rounded-xl flex items-center justify-center"><Text className="text-5xl">{item.image}</Text></View><View className="flex-1"><h3 className="font-bold text-[#1f2937] text-lg mb-[8px]">{item.name}</h3><View className="space-x-2 flex items-center"><Text className="pl-[12px] pr-[12px] pt-[4px] pb-[4px] bg-[var(--pink-100)] text-[var(--pink-600)] rounded-full text-xs">{item.category}</Text><Text className="text-sm text-[#6b7280]">数量:{item.quantity}</Text></View></View><View className="text-[var(--right)]"><View className="text-2xl font-bold text-[#ec4899]">¥<Text>{item.price * item.quantity}</Text></View><button onClick={() => this.handleRemoveFromCart(item.id)} className="text-sm text-red-500 hover:text-red-700 mt-[8px]">移除</button></View></View>))}<View className="bg-[#ffffff] rounded-2xl p-[24px] shadow-[0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)] mt-[24px]"><View className="flex items-center justify-between"><Text className="text-xl font-bold text-[#1f2937]">总计</Text><Text className="text-3xl font-bold text-[#ec4899]">¥{this.state.cartItems?.reduce((sum, this.item) => sum + this.item.price * this.item.quantity, 0)}</Text></View><button className="hover:shadow-lg transition-all bg-gradient-to-r from-[#ec4899] to-purple-500 w-full mt-[16px] pt-[16px] pb-[16px] text-[#ffffff] rounded-2xl font-bold text-lg">去结算</button></View></View>)}</View>)}{!!(this.state.activePage === 'profile') && (<View><View className="bg-[#ffffff] rounded-2xl p-[32px] shadow-[0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)] mb-[24px]"><View className="space-x-6 flex items-center"><View className="bg-gradient-to-r from-[#ec4899] to-purple-500 w-[80px] h-[80px] rounded-full flex items-center justify-center text-[#ffffff] text-3xl font-bold">B</View><View><h2 className="text-2xl font-bold text-[#1f2937]">宝妈用户</h2><p className="text-[#6b7280]">3岁宝宝的妈妈</p></View></View></View><View className="grid grid-cols-1 md:grid-cols-2 gap-6"><View className="bg-[#ffffff] rounded-2xl p-[24px] shadow-[0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)]"><h3 className="font-bold text-[#1f2937] mb-[16px]">我的订单</h3><View className="space-y-3"><View className="border-gray-100 flex items-center justify-between pt-[12px] pb-[12px] border-b-[1px] border-b-solid"><Text className="text-[#4b5563]">待付款</Text><Text className="text-[#ec4899] font-bold">0</Text></View><View className="border-gray-100 flex items-center justify-between pt-[12px] pb-[12px] border-b-[1px] border-b-solid"><Text className="text-[#4b5563]">待发货</Text><Text className="text-[#ec4899] font-bold">0</Text></View><View className="border-gray-100 flex items-center justify-between pt-[12px] pb-[12px] border-b-[1px] border-b-solid"><Text className="text-[#4b5563]">待收货</Text><Text className="text-[#ec4899] font-bold">0</Text></View><View className="flex items-center justify-between pt-[12px] pb-[12px]"><Text className="text-[#4b5563]">已完成</Text><Text className="text-[#ec4899] font-bold">0</Text></View></View></View><View className="bg-[#ffffff] rounded-2xl p-[24px] shadow-[0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)]"><h3 className="font-bold text-[#1f2937] mb-[16px]">账户设置</h3><View className="space-y-3"><button className="border-gray-100 hover:bg-gray-50 w-full flex items-center justify-between pt-[12px] pb-[12px] border-b-[1px] border-b-solid rounded-lg pl-[12px] pr-[12px]"><Text className="text-[#4b5563]">收货地址</Text><Text className="text-[#9ca3af]">›</Text></button><button className="border-gray-100 hover:bg-gray-50 w-full flex items-center justify-between pt-[12px] pb-[12px] border-b-[1px] border-b-solid rounded-lg pl-[12px] pr-[12px]"><Text className="text-[#4b5563]">优惠券</Text><Text className="text-[#9ca3af]">›</Text></button><button className="border-gray-100 hover:bg-gray-50 w-full flex items-center justify-between pt-[12px] pb-[12px] border-b-[1px] border-b-solid rounded-lg pl-[12px] pr-[12px]"><Text className="text-[#4b5563]">消息通知</Text><Text className="text-[#9ca3af]">›</Text></button><button className="hover:bg-gray-50 w-full flex items-center justify-between pt-[12px] pb-[12px] rounded-lg pl-[12px] pr-[12px]"><Text className="text-[#4b5563]">帮助中心</Text><Text className="text-[#9ca3af]">›</Text></button></View></View></View></View>)}</View></View>{(!!this.state.modalVisible && this.state.currentProduct) && (<View className="inset-0 bg-black/50 backdrop-blur-sm fixed flex items-center justify-center z-50 p-[16px]"><View className="bg-[#ffffff] rounded-3xl shadow-[0 25px 50px -12px rgb(0 0 0 / 0.25)] w-full max-h-90vh overflow-y-auto"><View className="relative"><View className="bg-gradient-to-br from-[#fce7f3] to-purple-100 h-[256px] flex items-center justify-center"><Text className="text-[128px]">{this.state.currentProduct.image}</Text></View><button onClick={() => this.handleModalClose()} className="bg-white/90 backdrop-blur-sm hover:bg-white transition-colors absolute top-[16px] right-[16px] w-[40px] h-[40px] rounded-full 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)]">✕</button></View><View className="p-[24px]"><View className="flex items-start justify-between mb-[16px]"><View className="flex-1"><h2 className="text-2xl font-bold text-[#1f2937] mb-[8px]">{this.state.currentProduct.name}</h2><View className="space-x-2 flex items-center"><Text className="pl-[12px] pr-[12px] pt-[4px] pb-[4px] bg-[var(--pink-100)] text-[var(--pink-600)] rounded-full text-sm">{this.state.currentProduct.category}</Text><View className="space-x-1 flex items-center"><Text className="text-[var(--yellow-400)]">⭐</Text><Text className="text-sm font-medium text-[#374151]">{this.state.currentProduct.rating}</Text></View></View></View><View className="text-[var(--right)]"><View className="text-3xl font-bold text-[#ec4899]">¥<Text>{this.state.currentProduct.price}</Text></View><View className="text-sm text-[#9ca3af] mt-[4px]">已售{this.state.currentProduct.sales > 1000 ? (this.state.currentProduct.sales / 1000).toFixed(1) + "k" : this.state.currentProduct.sales}</View></View></View><View className="gap-2 flex flex-wrap mb-[24px]">{(this.state.currentProduct.tags).map((tag, index) => (<Text key={tag} className="pl-[12px] pr-[12px] pt-[4px] pb-[4px] bg-[var(--purple-50)] text-[var(--purple-600)] rounded-full text-sm">{tag}</Text>))}</View><View className="mb-[24px]"><h3 className="font-bold text-[#1f2937] mb-[8px]">商品介绍</h3><p className="text-[#4b5563] [lineHeight:1.625]">{this.state.currentProduct.description}</p></View><View className="space-x-4 flex"><button onClick={() => this.handleAddToCart(this.state.currentProduct)} className="hover:shadow-lg transition-all bg-gradient-to-r from-[#ec4899] to-purple-500 flex-1 pt-[12px] pb-[12px] text-[#ffffff] rounded-xl font-bold">🛒 加入购物车</button><button onClick={() => this.handleToggleFavorite(this.state.currentProduct)} className="border-2 border-pink-300 hover:bg-pink-50 transition-colors flex-1 pt-[12px] pb-[12px] text-[#ec4899] rounded-xl font-bold">{isFavorite(this.state.currentProduct) ? "❤️ 已收藏" : "🤍 收藏"}</button></View></View></View></View>)}</Page>);
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/category-list.tsx

@@ -0,0 +1,179 @@
+/**
+ * 分类列表
+ * 查看和管理所有商品分类
+ *
+ * @type Page
+ * @route /categories
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  categories?: {
+    /* @example 1 */id?: number,
+    /* @example 手机数码 */name?: string,
+    /* @example 无 */parent?: string,
+    /* @example 2580 */goodsCount?: number,
+    /* @example enabled */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    categories: [
+      {
+        id: 1,
+        name: '手机数码',
+        parent: '无',
+        goodsCount: 2580,
+        status: 'enabled',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: '电脑办公',
+        parent: '无',
+        goodsCount: 1680,
+        status: 'enabled',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        name: '手机',
+        parent: '手机数码',
+        goodsCount: 1280,
+        status: 'enabled',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        name: '笔记本电脑',
+        parent: '电脑办公',
+        goodsCount: 980,
+        status: 'enabled',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        name: '服装鞋帽',
+        parent: '无',
+        goodsCount: 5860,
+        status: 'enabled',
+        createTime: '2024-05-12',
+      },
+    ],
+    loading: false,
+    searchKeyword: '',
+  };
+
+  handleSearch(value) {
+    this.setState({
+      searchKeyword: value,
+    });
+  }
+
+  handleAdd() {
+    console.log('添加分类');
+  }
+
+  handleEdit(record) {
+    console.log('编辑分类', record);
+  }
+
+  handleDelete(record) {
+    console.log('删除分类', record);
+  }
+
+  getStatusTag(status) {
+    if (status === 'enabled') {
+      return <Tag color="green">启用</Tag>;
+    }
+    return <Tag color="gray">禁用</Tag>;
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <h1 className="text-2xl font-bold text-[#1f2937]">分类列表</h1>
+          <p className="text-[#6b7280] text-sm mt-[4px]">
+            管理系统中的所有商品分类
+          </p>
+        </View>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <Input
+              placeholder="搜索分类名称"
+              value={this.state.searchKeyword}
+              onChange={e => this.handleSearch(e.target.value)}
+              prefix="🔍"
+              className=""
+            />
+            <Button type="primary" onClick={() => this.handleAdd()}>
+              + 新增分类
+            </Button>
+          </View>
+        </Card>
+        <Card>
+          <Table
+            loading={this.state.loading}
+            columns={[
+              { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+              { title: '分类名称', dataIndex: 'name', key: 'name' },
+              { title: '父级分类', dataIndex: 'parent', key: 'parent' },
+              { title: '商品数量', dataIndex: 'goodsCount', key: 'goodsCount' },
+              {
+                title: '状态',
+                dataIndex: 'status',
+                key: 'status',
+                render: function (text) {
+                  return this.getStatusTag(text);
+                },
+              },
+              { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
+              {
+                title: '操作',
+                key: 'action',
+                render: (text, record) => (
+                  <Space>
+                    <Button type="link" onClick={() => this.handleEdit(record)}>
+                      编辑
+                    </Button>
+                    <Button
+                      type="link"
+                      danger={true}
+                      onClick={() => this.handleDelete(record)}
+                    >
+                      删除
+                    </Button>
+                  </Space>
+                ),
+              },
+            ]}
+            dataSource={this.state.categories}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;