@appthen/cli 1.2.10 → 1.2.11

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;

package/tests/test-app/src/pages/appthen_guide/ComponentTreeUnderstanding.tsx

@@ -0,0 +1,26 @@
+/**
+ * 组件树理解
+ * @type Component
+ * @screen 1400w
+ * @frames web
+ */
+import React from 'react';
+import { Component } from '@appthen/react';
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {}
+
+class Document extends React.Component<IProps, IState> {
+  state = {};
+
+  render() {
+    return <React.Fragment />;
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/appthen_guide/DataBindingLearning.tsx

@@ -0,0 +1,26 @@
+/**
+ * 数据绑定学习
+ * @type Component
+ * @screen 1400w
+ * @frames web
+ */
+import React from 'react';
+import { Component } from '@appthen/react';
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {}
+
+class Document extends React.Component<IProps, IState> {
+  state = {};
+
+  render() {
+    return <React.Fragment />;
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/back-end/adminRootLayout.tsx

@@ -0,0 +1,155 @@
+/**
+ * 后台根布局
+ * @type Page
+ * @screen 1400w
+ * @frames web
+ */
+import React from 'react';
+import { AtIcon, Page, View } from '@appthen/react';
+import { ProConfigProvider, ProLayout } from '@appthen/antd-pro';
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 菜单数据 */
+  menu?: any;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {};
+
+  /**
+   * 页面加载后执行
+   */
+  componentDidMount() {
+    const globalMenu = this.utils.getGlobalData('ADMIN_MENU');
+    if (globalMenu) {
+      const menu = JSON.parse(JSON.stringify(globalMenu));
+      // 转换图标
+      menu.routes = this.transformMenus(menu.routes);
+      this.setState(
+        {
+          menu,
+        },
+        () => {
+          console.log(
+            111,
+            this.history?.location?.pathname ||
+              this.state.menu?.routes[0]?.routes?.[0]?.path ||
+              this.state.menu?.routes[0]?.path
+          );
+        }
+      );
+    }
+  }
+
+  /**
+   * 菜单转换
+   */
+  transformMenus(routes) {
+    return routes.map(menu => {
+      if (menu.icon && menu.icon.includes('<svg')) {
+        menu.icon = React.createElement('div', {
+          style: {
+            width: '14px',
+            height: '14px',
+            lineHeight: 1,
+          },
+          dangerouslySetInnerHTML: { __html: menu.icon },
+        });
+      }
+      menu.routes =
+        menu.route?.length > 0 ? this.transformMenus(menu.routes) : [];
+      return menu;
+    });
+  }
+
+  render() {
+    return (
+      <Page>
+        <ProConfigProvider
+          autoClearCache={false}
+          needDeps={false}
+          dark={false}
+          hashed={false}
+        >
+          <ProLayout
+            avatarProps={{
+              src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+              size: 'small',
+              title: 'Nickname',
+            }}
+            devops={false}
+            route={this.state.menu}
+            location={{
+              pathname:
+                this.history?.location?.pathname ||
+                this.state.menu?.routes[0]?.routes?.[0]?.path ||
+                this.state.menu?.routes[0]?.path,
+            }}
+            title="后台管理系统"
+            links={[]}
+            menu={{
+              locale: false,
+              defaultOpenAll: false,
+              ignoreFlatMenu: false,
+              loading: false,
+              params: {},
+              type: 'sub',
+            }}
+            siderWidth={280}
+            contentWidth="Fluid"
+            token={{}}
+            layout="mix"
+            content={
+              <View
+                inlineStyle={[
+                  {
+                    enable: this.props.__designMode === 'design',
+                    name: '开发模式',
+                    style: { height: '100%', backgroundColor: '#f5f5f5' },
+                  },
+                ]}
+                __hidePh={true}
+              >
+                {this.props.children}
+              </View>
+            }
+            key={this.state.menu?.routes?.length}
+            _unsafe_MixedSetter_key_select="VariableSetter"
+            contentStyle={{
+              paddingTop: '0px',
+              paddingRight: '0px',
+              paddingBottom: '0px',
+              paddingLeft: '0px',
+            }}
+            onPageChange={location => {
+              if (location?.pathname) {
+                this.history.push(location?.pathname);
+              }
+            }}
+            _unsafe_extendAttr={[{ key: 'splitMenus', value: true }]}
+            splitMenus={true}
+            logo={
+              <View>
+                <AtIcon
+                  color="#5281ff"
+                  size={30}
+                  svg="&#60;svg t=&#34;1754273789163&#34; class=&#34;icon&#34; viewBox=&#34;0 0 1024 1024&#34; version=&#34;1.1&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; p-id=&#34;5352&#34; width=&#34;100%&#34; height=&#34;100%&#34;&#62;&#60;path d=&#34;M832.8 289L543.2 120.6c-19.4-11.4-43.3-11.4-62.4 0L191.2 289c-19.4 11.4-31.2 31.8-31.2 54.6v336.8c0 22.4 11.7 43.2 31.2 54.6l289.6 168.4c19.4 11.4 43.3 11.4 62.4 0L832.8 735c19.4-11.4 31.2-31.8 31.2-54.6V343.2c0-22.4-11.7-43.2-31.2-54.2zM731.5 406.4l-184.3 94.2v218.1c0 19.6-15.8 35.5-35.2 35.5-19.4 0-35.2-15.9-35.2-35.5V500.6l-184.3-94.2c-17.4-9-24.3-30.2-15.4-47.7 8.9-17.5 30-24.5 47.4-15.5L512 439.4l187.9-95.8c17.4-9 38.5-1.6 47.4 15.5 9 17.1 1.7 38.7-15.8 47.3z m0 0&#34; p-id=&#34;5353&#34; fill=&#34;currentColor&#34;/&#62;&#60;/path&#62;&#60;/svg&#62;"
+                />
+              </View>
+            }
+            _unsafe_MixedSetter_logo_select="SlotSetter"
+            className="min-h-screen"
+          />
+        </ProConfigProvider>
+      </Page>
+    );
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/back-end/adminRootLayout10.tsx

@@ -0,0 +1,157 @@
+/**
+ * 后台根布局10
+ * @type Page
+ * @screen 1400w
+ * @frames web
+ */
+import React from 'react';
+import { AtIcon, Page, View } from '@appthen/react';
+import { ProConfigProvider, ProLayout } from '@appthen/antd-pro';
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 菜单数据 */
+  menu?: any;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {};
+
+  /**
+   * 页面加载后执行
+   */
+  componentDidMount() {
+    const globalMenu = this.utils.getGlobalData('ADMIN_MENU');
+    if (globalMenu) {
+      const menu = JSON.parse(JSON.stringify(globalMenu));
+      // 转换图标
+      menu.routes = this.transformMenus(menu.routes);
+      this.setState(
+        {
+          menu,
+        },
+        () => {
+          console.log(
+            111,
+            this.history?.location?.pathname ||
+              this.state.menu?.routes[0]?.routes?.[0]?.path ||
+              this.state.menu?.routes[0]?.path
+          );
+        }
+      );
+    }
+  }
+
+  /**
+   * 菜单转换
+   */
+  transformMenus(routes) {
+    return routes.map(menu => {
+      if (menu.icon && menu.icon.includes('<svg')) {
+        menu.icon = React.createElement('div', {
+          style: {
+            width: '14px',
+            height: '14px',
+            lineHeight: 1,
+          },
+          dangerouslySetInnerHTML: {
+            __html: menu.icon,
+          },
+        });
+      }
+      menu.routes =
+        menu.route?.length > 0 ? this.transformMenus(menu.routes) : [];
+      return menu;
+    });
+  }
+
+  render() {
+    return (
+      <Page>
+        <ProConfigProvider
+          autoClearCache={false}
+          needDeps={false}
+          dark={false}
+          hashed={false}
+        >
+          <ProLayout
+            avatarProps={{
+              src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+              size: 'small',
+              title: 'Nickname',
+            }}
+            devops={false}
+            route={this.state.menu}
+            location={{
+              pathname:
+                this.history?.location?.pathname ||
+                this.state.menu?.routes[0]?.routes?.[0]?.path ||
+                this.state.menu?.routes[0]?.path,
+            }}
+            title="后台管理系统"
+            links={[]}
+            menu={{
+              locale: false,
+              defaultOpenAll: false,
+              ignoreFlatMenu: false,
+              loading: false,
+              params: {},
+              type: 'sub',
+            }}
+            siderWidth={280}
+            contentWidth="Fluid"
+            token={{}}
+            layout="mix"
+            content={
+              <View
+                inlineStyle={[
+                  {
+                    enable: this.props.__designMode === 'design',
+                    name: '开发模式',
+                    style: { height: '100%', backgroundColor: '#f5f5f5' },
+                  },
+                ]}
+                __hidePh={true}
+              >
+                {this.props.children}
+              </View>
+            }
+            key={this.state.menu?.routes?.length}
+            _unsafe_MixedSetter_key_select="VariableSetter"
+            contentStyle={{
+              paddingTop: '0px',
+              paddingRight: '0px',
+              paddingBottom: '0px',
+              paddingLeft: '0px',
+            }}
+            onPageChange={location => {
+              if (location?.pathname) {
+                this.history.push(location?.pathname);
+              }
+            }}
+            _unsafe_extendAttr={[{ key: 'splitMenus', value: true }]}
+            splitMenus={true}
+            logo={
+              <View>
+                <AtIcon
+                  color="#5281ff"
+                  size={30}
+                  svg="&#60;svg t=&#34;1754273789163&#34; class=&#34;icon&#34; viewBox=&#34;0 0 1024 1024&#34; version=&#34;1.1&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; p-id=&#34;5352&#34; width=&#34;100%&#34; height=&#34;100%&#34;&#62;&#60;path d=&#34;M832.8 289L543.2 120.6c-19.4-11.4-43.3-11.4-62.4 0L191.2 289c-19.4 11.4-31.2 31.8-31.2 54.6v336.8c0 22.4 11.7 43.2 31.2 54.6l289.6 168.4c19.4 11.4 43.3 11.4 62.4 0L832.8 735c19.4-11.4 31.2-31.8 31.2-54.6V343.2c0-22.4-11.7-43.2-31.2-54.2zM731.5 406.4l-184.3 94.2v218.1c0 19.6-15.8 35.5-35.2 35.5-19.4 0-35.2-15.9-35.2-35.5V500.6l-184.3-94.2c-17.4-9-24.3-30.2-15.4-47.7 8.9-17.5 30-24.5 47.4-15.5L512 439.4l187.9-95.8c17.4-9 38.5-1.6 47.4 15.5 9 17.1 1.7 38.7-15.8 47.3z m0 0&#34; p-id=&#34;5353&#34; fill=&#34;currentColor&#34;/&#62;&#60;/path&#62;&#60;/svg&#62;"
+                />
+              </View>
+            }
+            _unsafe_MixedSetter_logo_select="SlotSetter"
+            className="min-h-screen"
+          />
+        </ProConfigProvider>
+      </Page>
+    );
+  }
+}
+
+export default Document;