@appthen/cli 1.2.10 → 1.2.12

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;

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

@@ -0,0 +1,245 @@
+/**
+ * 可视化AI IDE升级介绍
+ * 展示从可视化IDE升级到可视化AI IDE的四大核心特性
+ *
+ * @type Component
+ * @screen 1920x800 #1a1a1a
+ * @frames web
+ * @portal true
+ */
+import React from 'react';
+import { Component, Text, View } from '@appthen/react';
+import main from '/src/pages/test/main';
+
+
+class IProps {
+  /* 主题色 */
+  themeColor: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 当前激活的特性索引 */
+  activeFeature: number;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = { activeFeature: 0 };
+
+  /**
+   * 切换特性展示
+   */
+  switchFeature(index) {
+    this.setState({
+      activeFeature: index,
+    });
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <View className="w-full h-full bg-[#111827] flex flex-col overflow-hidden">
+          <header className="p-[32px] text-[var(--center)]">
+            <h1 className="bg-gradient-to-r from-purple-400 via-[#f472b6] to-indigo-400 [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [backgroundClip:text] [WebkitBackgroundClip:text] text-[transparent] text-5xl font-bold mb-[8px]">
+              可视化AI IDE
+            </h1>
+            <h2 className="bg-gradient-to-r from-blue-400 via-[var(--cyan-400)] to-[var(--teal-400)] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [backgroundClip:text] [WebkitBackgroundClip:text] text-[transparent] text-3xl font-bold">
+              全面升级
+            </h2>
+            <p className="text-[#9ca3af] mt-[16px] text-lg">
+              从可视化IDE到可视化AI IDE的进化之路
+            </p>
+          </header>
+          <main className="flex-1 flex items-center justify-center pl-[32px] pr-[32px]">
+            <View className="w-full">
+              <View className="border-gray-700 bg-[#1f2937] rounded-2xl p-[32px] shadow-[0 25px 50px -12px rgb(0 0 0 / 0.25)] border border-solid">
+                <View className="text-[var(--center)] mb-[24px]">
+                  <View className="text-6xl mb-[2px]">
+                    {!!(this.state.activeFeature === 0) && <Text>📁</Text>}
+                    {!!(this.state.activeFeature === 1) && <Text>⚡</Text>}
+                    {!!(this.state.activeFeature === 2) && <Text>🤖</Text>}
+                    {!!(this.state.activeFeature === 3) && <Text>👥</Text>}
+                  </View>
+                  <h3
+                    className={`text-2xl font-bold bg-gradient-to-r ${
+                      this.state.activeFeature === 0
+                        ? 'from-purple-500 to-pink-500'
+                        : this.state.activeFeature === 1
+                        ? 'from-blue-500 to-cyan-500'
+                        : this.state.activeFeature === 2
+                        ? 'from-green-500 to-emerald-500'
+                        : 'from-orange-500 to-red-500'
+                    } bg-clip-text text-transparent mb-2`}
+                  >{`${
+                    this.state.activeFeature === 0 ? '对象资源管理能力增强' : ''
+                  }${this.state.activeFeature === 1 ? '双向编辑能力' : ''}${
+                    this.state.activeFeature === 2 ? 'AI能力增强' : ''
+                  }${
+                    this.state.activeFeature === 3 ? '协作能力增强' : ''
+                  }`}</h3>
+                  <p className="text-[#d1d5db] text-lg mt-[7px]">{`${
+                    this.state.activeFeature === 0 ? '模块化文件夹管理' : ''
+                  }${this.state.activeFeature === 1 ? '可视化 ↔ 代码' : ''}${
+                    this.state.activeFeature === 2 ? '完整AI Agent集成' : ''
+                  }${
+                    this.state.activeFeature === 3 ? '人机协作新体验' : ''
+                  }`}</p>
+                </View>
+                <View className="bg-[#374151] rounded-xl p-[24px] mb-[24px]">
+                  <p className="text-[#fff4f4] [lineHeight:1.625]">{`${
+                    this.state.activeFeature === 0
+                      ? '现在可以用文件夹的方式，将前端、后端、接口文档、协作文档都方便进行模块化的管理'
+                      : ''
+                  }${
+                    this.state.activeFeature === 1
+                      ? '所有资源都可以进行可视化开发和代码开发双向编辑，让开发者可以自由切换工作模式，提升开发效率'
+                      : ''
+                  }${
+                    this.state.activeFeature === 2
+                      ? '引入完整的AI Agent，可以更好地理解低代码资源，提供更充足的上下文帮助我们完成应用开发工作'
+                      : ''
+                  }${
+                    this.state.activeFeature === 3
+                      ? '与同事更好的协作，与AI更好的协作，打造全新的协作开发体验'
+                      : ''
+                  }`}</p>
+                </View>
+                <View className="space-x-2 flex justify-center">
+                  <button
+                    onClick={() => this.switchFeature(0)}
+                    className={`w-3 h-3 rounded-full transition-all duration-300 ${
+                      this.state.activeFeature === 0
+                        ? 'bg-white scale-125'
+                        : 'bg-gray-600 hover:bg-gray-500'
+                    }`}
+                  />
+                  <button
+                    onClick={() => this.switchFeature(1)}
+                    className={`w-3 h-3 rounded-full transition-all duration-300 ${
+                      this.state.activeFeature === 1
+                        ? 'bg-white scale-125'
+                        : 'bg-gray-600 hover:bg-gray-500'
+                    }`}
+                  />
+                  <button
+                    onClick={() => this.switchFeature(2)}
+                    className={`w-3 h-3 rounded-full transition-all duration-300 ${
+                      this.state.activeFeature === 2
+                        ? 'bg-white scale-125'
+                        : 'bg-gray-600 hover:bg-gray-500'
+                    }`}
+                  />
+                  <button
+                    onClick={() => this.switchFeature(3)}
+                    className={`w-3 h-3 rounded-full transition-all duration-300 ${
+                      this.state.activeFeature === 3
+                        ? 'bg-white scale-125'
+                        : 'bg-gray-600 hover:bg-gray-500'
+                    }`}
+                  />
+                </View>
+              </View>
+              <View className="mt-[32px] grid grid-cols-2 gap-4">
+                <button
+                  onClick={() => this.switchFeature(0)}
+                  className={`p-4 rounded-xl border transition-all duration-300 ${
+                    this.state.activeFeature === 0
+                      ? 'border-purple-500 bg-purple-500/10'
+                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
+                  }`}
+                >
+                  <View className="text-2xl mb-[8px]">
+                    <Text>📁</Text>
+                  </View>
+                  <View
+                    className={`text-sm font-medium ${
+                      this.state.activeFeature === 0
+                        ? 'text-purple-400'
+                        : 'text-gray-400'
+                    }`}
+                  >
+                    <Text>资源管理</Text>
+                  </View>
+                </button>
+                <button
+                  onClick={() => this.switchFeature(1)}
+                  className={`p-4 rounded-xl border transition-all duration-300 ${
+                    this.state.activeFeature === 1
+                      ? 'border-blue-500 bg-blue-500/10'
+                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
+                  }`}
+                >
+                  <View className="text-2xl mb-[8px]">
+                    <Text>⚡</Text>
+                  </View>
+                  <View
+                    className={`text-sm font-medium ${
+                      this.state.activeFeature === 1
+                        ? 'text-blue-400'
+                        : 'text-gray-400'
+                    }`}
+                  >
+                    <Text>双向编辑</Text>
+                  </View>
+                </button>
+                <button
+                  onClick={() => this.switchFeature(2)}
+                  className={`p-4 rounded-xl border transition-all duration-300 ${
+                    this.state.activeFeature === 2
+                      ? 'border-green-500 bg-green-500/10'
+                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
+                  }`}
+                >
+                  <View className="text-2xl mb-[8px]">
+                    <Text>🤖</Text>
+                  </View>
+                  <View
+                    className={`text-sm font-medium ${
+                      this.state.activeFeature === 2
+                        ? 'text-green-400'
+                        : 'text-gray-400'
+                    }`}
+                  >
+                    <Text>AI增强</Text>
+                  </View>
+                </button>
+                <button
+                  onClick={() => this.switchFeature(3)}
+                  className={`p-4 rounded-xl border transition-all duration-300 ${
+                    this.state.activeFeature === 3
+                      ? 'border-orange-500 bg-orange-500/10'
+                      : 'border-gray-700 bg-gray-800 hover:border-gray-600'
+                  }`}
+                >
+                  <View className="text-2xl mb-[8px]">
+                    <Text>👥</Text>
+                  </View>
+                  <View
+                    className={`text-sm font-medium ${
+                      this.state.activeFeature === 3
+                        ? 'text-orange-400'
+                        : 'text-gray-400'
+                    }`}
+                  >
+                    <Text>协作增强</Text>
+                  </View>
+                </button>
+              </View>
+            </View>
+          </main>
+          <footer className="p-[16px] text-[var(--center)]">
+            <View className="space-x-8 flex justify-center text-[#6b7280] text-sm">
+              <Text>🚀 更快</Text>
+              <Text>🎯 更准</Text>
+              <Text>💡 更智能</Text>
+            </View>
+          </footer>
+        </View>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Document;