@appthen/cli 1.2.10 → 1.2.12

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

@@ -0,0 +1,212 @@
+/**
+ * 用户列表
+ * 查看和管理所有用户信息
+ *
+ * @type Page
+ * @route /users
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  users?: {
+    /* @example 1 */id?: number,
+    /* @example 张三 */name?: string,
+    /* @example zhangsan@example.com */email?: string,
+    /* @example 138****1234 */phone?: string,
+    /* @example active */status?: string,
+    /* @example admin */role?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    users: [
+      {
+        id: 1,
+        name: '张三',
+        email: 'zhangsan@example.com',
+        phone: '138****1234',
+        status: 'active',
+        role: 'admin',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: '李四',
+        email: 'lisi@example.com',
+        phone: '139****5678',
+        status: 'active',
+        role: 'user',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        name: '王五',
+        email: 'wangwu@example.com',
+        phone: '137****9012',
+        status: 'inactive',
+        role: 'user',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        name: '赵六',
+        email: 'zhaoliu@example.com',
+        phone: '136****3456',
+        status: 'active',
+        role: 'user',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        name: '钱七',
+        email: 'qianqi@example.com',
+        phone: '135****7890',
+        status: 'active',
+        role: 'manager',
+        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 === 'active') {
+      return <Tag color="green">活跃</Tag>;
+    }
+    return <Tag color="gray">禁用</Tag>;
+  }
+
+  getRoleTag(role) {
+    const config = {
+      admin: {
+        text: '管理员',
+        color: 'red',
+      },
+      manager: {
+        text: '经理',
+        color: 'blue',
+      },
+      user: {
+        text: '用户',
+        color: 'default',
+      },
+    };
+    const configItem = config[role] || config.user;
+    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: 'name', key: 'name' },
+              { title: '邮箱', dataIndex: 'email', key: 'email' },
+              { title: '手机号', dataIndex: 'phone', key: 'phone' },
+              {
+                title: '状态',
+                dataIndex: 'status',
+                key: 'status',
+                render: function (text) {
+                  return this.getStatusTag(text);
+                },
+              },
+              {
+                title: '角色',
+                dataIndex: 'role',
+                key: 'role',
+                render: function (text) {
+                  return this.getRoleTag(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.users}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/web_version/website.css

@@ -0,0 +1,205 @@
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 16px;
+}
+.nav {
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+}
+.btn-primary {
+	background: linear-gradient(135deg, #E74C3C, #c0392b);
+	border: none;
+	color: white;
+	padding: 12px 32px;
+	border-radius: 50px;
+	font-weight: 600;
+	transition: all 0.3s ease;
+	cursor: pointer;
+}
+.btn-primary:hover {
+	transform: translateY(-2px);
+	box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3);
+}
+.btn-secondary {
+	background: transparent;
+	border: 2px solid white;
+	color: white;
+	padding: 12px 32px;
+	border-radius: 50px;
+	font-weight: 600;
+	transition: all 0.3s ease;
+	cursor: pointer;
+}
+.btn-secondary:hover {
+	background: white;
+	color: #1A3E72;
+}
+.card {
+	background: white;
+	border-radius: 16px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	transition: all 0.3s ease;
+	overflow: hidden;
+}
+.card:hover {
+	transform: translateY(-8px);
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+.gradient-text {
+	background: linear-gradient(135deg, #1A3E72, #E74C3C);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+}
+@keyframes fadeInUp {
+ from {
+	opacity: 0;
+	transform: translateY(30px);
+}
+ to {
+	opacity: 1;
+	transform: translateY(0);
+}
+}
+.fade-in-up {
+	animation: fadeInUp 0.6s ease-out;
+}
+@media (max-width: 768px) {
+ .container {
+	padding: 0 12px;
+}
+. h1 {
+	font-size: 2.5rem !important;
+}
+. h2 {
+	font-size: 2rem !important;
+}
+ .btn-primary,
+  .btn-secondary {
+	padding: 10px 24px;
+	font-size: 14px;
+}
+}
+::-webkit-scrollbar {
+	width: 8px;
+}
+::-webkit-scrollbar-track {
+	background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+	background: #1A3E72;
+	border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+	background: #E74C3C;
+}
+@keyframes pulse {
+ 0%, 100% {
+	opacity: 1;
+}
+ 50% {
+	opacity: 0.5;
+}
+}
+.animate-pulse {
+	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.bg-pattern {
+	background-image: radial-gradient(circle at 25% 25%, rgba(231, 76, 60, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 75% 75%, rgba(26, 62, 114, 0.1) 0%, transparent 50%);
+}
+.form-input {
+	width: 100%;
+	padding: 12px 16px;
+	border: 1px solid #d1d5db;
+	border-radius: 8px;
+	font-size: 16px;
+	transition: border-color 0.3s ease;
+}
+.form-input:focus {
+	outline: none;
+	border-color: #1A3E72;
+	box-shadow: 0 0 0 3px rgba(26, 62, 114, 0.1);
+}
+.icon-wrapper {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 48px;
+	height: 48px;
+	border-radius: 50%;
+	background: rgba(26, 62, 114, 0.1);
+	color: #1A3E72;
+	font-size: 20px;
+}
+.counter {
+	font-size: 3rem;
+	font-weight: bold;
+	color: #F39C12;
+	line-height: 1;
+}
+.team-card {
+	position: relative;
+	overflow: hidden;
+}
+.team-card::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 4px;
+	background: linear-gradient(90deg, #1A3E72, #E74C3C, #F39C12);
+}
+.client-logo {
+	filter: grayscale(100%);
+	transition: filter 0.3s ease;
+}
+.client-logo:hover {
+	filter: grayscale(0%);
+}
+.testimonial-card {
+	position: relative;
+	background: white;
+	border-radius: 16px;
+	padding: 32px;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+.testimonial-card::before {
+	content: '"';
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	font-size: 4rem;
+	color: #e5e7eb;
+	font-family: serif;
+}
+.footer {
+	background: #2C3E50;
+	color: white;
+}
+.footer a {
+	color: #d1d5db;
+	text-decoration: none;
+	transition: color 0.3s ease;
+}
+.footer a:hover {
+	color: white;
+}
+.social-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	background: rgba(255, 255, 255, 0.1);
+	color: #d1d5db;
+	transition: all 0.3s ease;
+}
+.social-icon:hover {
+	background: rgba(255, 255, 255, 0.2);
+	color: white;
+	transform: translateY(-2px);
+}