@appthen/cli 1.2.11 → 1.2.13

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

@@ -0,0 +1,404 @@
+/**
+ * 用户资料
+ * 用户个人信息管理
+ *
+ * @type Page
+ * @route /profile
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  userId?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  userInfo?: {
+    /* @example 1 */id?: number,
+    /* @example zhangsan */username?: string,
+    /* @example 张三 */realName?: string,
+    /* @example zhangsan@example.com */email?: string,
+    /* @example 13800138000 */phone?: string,
+    /* @example male */gender?: string,
+    /* @example 1990-01-01 */birthday?: string,
+    /* @example https://via.placeholder.com/150 */avatar?: string,
+    /* @example 全栈开发工程师 */bio?: string,
+    /* @example 北京市海淀区 */location?: string,
+    /* @example https://example.com */website?: string,
+    /* @example active */status?: string,
+    /* @example 2024-01-01 */createTime?: string,
+  };
+  loading?: boolean;
+  editing?: boolean;
+  activeTab?: string;
+  formData?: any;
+  uploadProgress?: number;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    userInfo: {
+      id: 1,
+      username: 'zhangsan',
+      realName: '张三',
+      email: 'zhangsan@example.com',
+      phone: '13800138000',
+      gender: 'male',
+      birthday: '1990-01-01',
+      avatar: 'https://via.placeholder.com/150',
+      bio: '全栈开发工程师',
+      location: '北京市海淀区',
+      website: 'https://example.com',
+      status: 'active',
+      createTime: '2024-01-01',
+    },
+    loading: false,
+    editing: false,
+    activeTab: 'basic',
+    formData: {},
+    uploadProgress: 0,
+  };
+
+  handleTabChange(key) {
+    this.setState({
+      activeTab: key,
+    });
+  }
+
+  toggleEdit() {
+    this.setState({
+      editing: !this.state.editing,
+      formData: this.state.editing
+        ? {}
+        : {
+            ...this.state.userInfo,
+          },
+    });
+  }
+
+  handleSave() {
+    this.setState({
+      userInfo: {
+        ...this.state.userInfo,
+        ...this.state.formData,
+      },
+      editing: false,
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+      });
+    }, 1000);
+  }
+
+  handleFieldChange(field, value) {
+    this.setState({
+      formData: {
+        ...this.state.formData,
+        [field]: value,
+      },
+    });
+  }
+
+  handleAvatarUpload(file) {
+    this.setState({
+      uploadProgress: 0,
+    });
+    const interval = setInterval(() => {
+      const progress = this.state.uploadProgress + 10;
+      if (progress >= 100) {
+        clearInterval(interval);
+        this.setState({
+          uploadProgress: 100,
+        });
+      } else {
+        this.setState({
+          uploadProgress: progress,
+        });
+      }
+    }, 200);
+  }
+
+  resetPassword() {
+    console.log('重置密码');
+  }
+
+  logout() {
+    console.log('退出登录');
+  }
+
+  render() {
+    // 💀 死亡：变量声明 - 解构赋值
+    const { userInfo, loading, editing, activeTab, formData, uploadProgress } =
+      this.state;
+
+    // 💀 死亡：变量声明 - 计算属性
+    // 💀 死亡：变量声明 - 计算属性
+    const age =
+      new Date().getFullYear() - new Date(userInfo.birthday).getFullYear();
+    const isEmailVerified = true;
+    const accountStatus = userInfo.status === 'active' ? '正常' : '已禁用';
+
+    // 💀 死亡：变量声明 - 配置对象
+    // 💀 死亡：变量声明 - 配置对象
+    const genderOptions = [
+      {
+        label: '男',
+        value: 'male',
+      },
+      {
+        label: '女',
+        value: 'female',
+      },
+      {
+        label: '保密',
+        value: 'secret',
+      },
+    ];
+
+    // 💀 死亡：变量声明 - 标签页配置
+    // 💀 死亡：变量声明 - 标签页配置
+    const tabItems = [
+      {
+        key: 'basic',
+        label: '基本信息',
+      },
+      {
+        key: 'contact',
+        label: '联系方式',
+      },
+      {
+        key: 'security',
+        label: '安全设置',
+      },
+      {
+        key: 'privacy',
+        label: '隐私设置',
+      },
+    ];
+
+    // 💀 死亡：if 语句 - 条件渲染
+    // 💀 死亡：if 语句 - 条件渲染
+    if (loading) {
+      return <View className="p-6">加载中...</View>;
+    }
+
+    // 💀 死亡：变量声明 - JSX 片段函数
+    // 💀 死亡：变量声明 - JSX 片段函数
+    const basicInfoForm = () => (
+      <View className="space-y-4">
+        <View className="flex items-center gap-4 mb-6">
+          <Avatar size={80} src={userInfo.avatar} />
+          <View>
+            <Text className="text-xl font-bold">{userInfo.realName}</Text>
+            <Text className="text-gray-500">@{userInfo.username}</Text>
+          </View>
+          {!editing && (
+            <Button onClick={() => this.handleAvatarUpload(null)}>
+              更换头像
+            </Button>
+          )}
+        </View>
+        {uploadProgress > 0 && uploadProgress < 100 && (
+          <View className="mb-4">
+            <Text>上传进度: {uploadProgress}%</Text>
+          </View>
+        )}
+      </View>
+    );
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <Text className="text-2xl font-bold text-[#1f2937]">用户资料</Text>
+          <Text className="text-[#6b7280] text-sm mt-[4px]">
+            用户个人信息管理
+          </Text>
+        </View>
+        <Card className="mb-[24px]">
+          <View className="flex items-center justify-between">
+            <View className="gap-4 flex items-center">
+              <Avatar size={64} src={userInfo.avatar} />
+              <View>
+                <Text className="text-xl font-bold">{userInfo.realName}</Text>
+                <Text className="text-[#6b7280]">@{userInfo.username}</Text>
+                <View className="gap-2 flex items-center mt-[4px]">
+                  <Tag color="blue">
+                    <Text>{accountStatus}</Text>
+                  </Tag>
+                  {!!isEmailVerified && <Tag color="green">已验证</Tag>}
+                </View>
+              </View>
+            </View>
+            <View className="gap-2 flex">
+              <Button onClick={() => this.toggleEdit()}>
+                {editing ? '取消' : '编辑'}
+              </Button>
+              {!!editing && (
+                <Button type="primary" onClick={() => this.handleSave()}>
+                  保存
+                </Button>
+              )}
+            </View>
+          </View>
+        </Card>
+        <Card>
+          <Tabs
+            activeKey={activeTab}
+            onChange={key => this.handleTabChange(key)}
+          >
+            <Tabs.TabPane tab="基本信息" key="basic">
+              <View className="gap-6 grid grid-cols-2">
+                <View>
+                  <Text className="block mb-[8px]">用户名</Text>
+                  <Input
+                    value={editing ? formData.username : userInfo.username}
+                    disabled={!editing}
+                    onChange={e =>
+                      this.handleFieldChange('username', e.target.value)
+                    }
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">真实姓名</Text>
+                  <Input
+                    value={editing ? formData.realName : userInfo.realName}
+                    disabled={!editing}
+                    onChange={e =>
+                      this.handleFieldChange('realName', e.target.value)
+                    }
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">性别</Text>
+                  <Radio.Group
+                    value={editing ? formData.gender : userInfo.gender}
+                    disabled={!editing}
+                    onChange={e =>
+                      this.handleFieldChange('gender', e.target.value)
+                    }
+                  >
+                    {genderOptions.map((opt, index) => (
+                      <Radio key={opt.value} value={opt.value}>
+                        <Text>{opt.label}</Text>
+                      </Radio>
+                    ))}
+                  </Radio.Group>
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">生日</Text>
+                  <DatePicker
+                    value={editing ? formData.birthday : userInfo.birthday}
+                    disabled={!editing}
+                    onChange={date => this.handleFieldChange('birthday', date)}
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">年龄</Text>
+                  <Text>{age}岁</Text>
+                </View>
+              </View>
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="联系方式" key="contact">
+              <View className="gap-6 grid grid-cols-2">
+                <View>
+                  <Text className="block mb-[8px]">邮箱</Text>
+                  <Input
+                    value={editing ? formData.email : userInfo.email}
+                    disabled={!editing}
+                    onChange={e =>
+                      this.handleFieldChange('email', e.target.value)
+                    }
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">手机号</Text>
+                  <Input
+                    value={editing ? formData.phone : userInfo.phone}
+                    disabled={!editing}
+                    onChange={e =>
+                      this.handleFieldChange('phone', e.target.value)
+                    }
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">位置</Text>
+                  <Input
+                    value={editing ? formData.location : userInfo.location}
+                    disabled={!editing}
+                    onChange={e =>
+                      this.handleFieldChange('location', e.target.value)
+                    }
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">个人网站</Text>
+                  <Input
+                    value={editing ? formData.website : userInfo.website}
+                    disabled={!editing}
+                    onChange={e =>
+                      this.handleFieldChange('website', e.target.value)
+                    }
+                  />
+                </View>
+              </View>
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="安全设置" key="security">
+              <View className="space-y-4">
+                <View>
+                  <Text className="block mb-[8px]">修改密码</Text>
+                  <Button onClick={() => this.resetPassword()}>重置密码</Button>
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">两步验证</Text>
+                  <Switch
+                    checked={false}
+                    onChange={checked => console.log('两步验证:', checked)}
+                  />
+                  <Text className="text-[#6b7280] ml-[8px]">未启用</Text>
+                </View>
+              </View>
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="隐私设置" key="privacy">
+              <View className="space-y-4">
+                <View>
+                  <Text className="block mb-[8px]">公开个人资料</Text>
+                  <Switch
+                    checked={true}
+                    onChange={checked =>
+                      this.handleFieldChange('publicProfile', checked)
+                    }
+                  />
+                </View>
+                <View>
+                  <Text className="block mb-[8px]">允许私信</Text>
+                  <Switch
+                    checked={false}
+                    onChange={checked =>
+                      this.handleFieldChange('allowMessages', checked)
+                    }
+                  />
+                </View>
+              </View>
+            </Tabs.TabPane>
+          </Tabs>
+        </Card>
+        <Card className="mt-[24px]">
+          <View className="gap-2 flex justify-end">
+            <Button onClick={() => this.logout()} danger={true}>
+              退出登录
+            </Button>
+          </View>
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;