@appthen/cli 1.2.10 → 1.2.12

package/tests/test-app/src/pages/data_dashboard/blueLargeScreen.tsx

@@ -0,0 +1,138 @@
+/**
+ * 蓝色大屏
+ * @type Page
+ * @screen 1920x1080 #2c2c2c
+ * @frames web
+ */
+import React from 'react';
+import { Page, Text, View } from '@appthen/react';
+import BlueBrightGreenBorder from '/src/pages/border/BlueBrightGreenBorder';
+import FullScreenContainer from '/src/pages/screen/FullScreenContainer';
+import './blueLargeScreen.css';
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {}
+
+class Document extends React.Component<IProps, IState> {
+  state = {};
+
+  render() {
+    return (
+      <Page className="h-screen">
+        <FullScreenContainer
+          content={
+            <View className="h-full flex flex-col">
+              <View
+                key="header"
+                style={{
+                  height: '100px',
+                  backgroundImage:
+                    'url(https://cdn.appthen.com/Fu5bWQQXD0SVPRCq31hi3903u5xD)',
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
+                <View className="flex-1 flex flex-row">
+                  <View __hidePh={true} className="flex-1" />
+                  <View className="flex-1 flex flex-col justify-center items-center">
+                    <Text className="text-[44px] text-[#81d3fc] font-extrabold mt-[-10px]">
+                      蓝色科技风数据可视化大屏
+                    </Text>
+                  </View>
+                  <View __hidePh={true} className="flex-1" />
+                </View>
+              </View>
+              <View key="main" className="flex-1 flex flex-row mt-[-24px]">
+                <View className="flex-1 pl-[20px] pr-[10px] flex flex-col">
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <Text className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                          标题
+                        </Text>
+                        <View className="mt-[16px] grid grid-cols-1 gap-4" />
+                      </View>
+                    }
+                    className="flex flex-col h-[537px]"
+                  />
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <Text className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                          标题
+                        </Text>
+                        <View className="mt-[16px] grid grid-cols-1 gap-4" />
+                      </View>
+                    }
+                    className="flex flex-col flex-1"
+                  />
+                </View>
+                <View className="flex-1 flex flex-col pt-[66px] pl-[10px] pr-[10px]">
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <Text className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                          标题
+                        </Text>
+                        <View className="mt-[16px] grid grid-cols-1 gap-4" />
+                      </View>
+                    }
+                    className="flex flex-col h-[537px] flex-1"
+                  />
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <Text className="text-lg font-bold text-[#ffffff] mb-[16px]">
+                          标题
+                        </Text>
+                      </View>
+                    }
+                    className="h-[500px] flex flex-col"
+                  />
+                </View>
+                <View className="flex-1 pr-[20px] pl-[10px] flex flex-col">
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <Text className="text-xl font-bold text-[#ffffff] mb-[16px]">
+                          告警列表
+                        </Text>
+                      </View>
+                    }
+                    className="h-[534px] flex flex-col"
+                  />
+                  <BlueBrightGreenBorder
+                    content={
+                      <View className="p-[16px] flex flex-col h-full">
+                        <Text className="text-xl font-bold text-[#ffffff] mb-[16px]">
+                          预警列表
+                        </Text>
+                      </View>
+                    }
+                    className="flex flex-col flex-1"
+                  />
+                </View>
+              </View>
+              <View key="footer" className="bg-[#1a1b2f] p-[16px]">
+                <Text className="text-[#ffffff]">
+                  系统状态: 在线 | 最后更新:{new Date().toLocaleString()}
+                </Text>
+              </View>
+            </View>
+          }
+          baseWidth={2560}
+          baseHeight={1440}
+          className="h-screen bg-[#0f1129] flex flex-col"
+        />
+      </Page>
+    );
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/data_dashboard/component_library/BlueBrightGreenBorder.tsx

@@ -0,0 +1,47 @@
+/**
+ * 蓝亮绿边框
+ * @type Component
+ * @screen 500x300 #0d0d21
+ * @frames web
+ */
+import React from 'react';
+import { Component, View } from '@appthen/react';
+
+
+class IProps {
+  /* 组件内容 */
+  @Form({
+    setter: "SlotSetter"
+  })
+  content: any;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {}
+
+class Document extends React.Component<IProps, IState> {
+  state = {};
+
+  render() {
+    return (
+      <React.Fragment fill={true}>
+        <View
+          className="blue-green-panel"
+          style={this.props.style}
+          _unsafe_classNameJson={[{ selector: 'blue-green-panel' }]}
+        >
+          <View
+            className="blue-green-panel-panel flex-1 flex flex-col"
+            _unsafe_classNameJson={[{ selector: 'blue-green-panel-panel' }]}
+          >
+            {this.props.content}
+          </View>
+        </View>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/data_dashboard/component_library/FullScreenContainer.tsx

@@ -0,0 +1,133 @@
+/**
+ * 全屏容器
+ * @type Component
+ * @screen 1400w
+ * @frames web
+ */
+import React from 'react';
+import { Component, View } from '@appthen/react';
+
+
+class IProps {
+  /* 窗口宽度 */
+  baseWidth: number;
+  /* 窗口高度 */
+  baseHeight: number;
+  /* 组件节点 */
+  @Form({
+    setter: "SlotSetter"
+  })
+  content: any;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 容器ID */
+  containerId: any;
+  baseWidth: number;
+  baseHeight: number;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    containerId: `fullscreen-container-${Math.random()
+      .toString(36)
+      .substr(2, 9)}`,
+    baseWidth: 1920,
+    baseHeight: 1080,
+  };
+
+  /**
+   * * * 页面加载后执行
+   */
+  componentDidMount() {
+    const { baseWidth = 1920, baseHeight = 1080 } = this.props;
+    this.setState(
+      {
+        baseWidth,
+        baseHeight,
+      },
+      () => {
+        this.initContainer();
+        window.addEventListener('resize', this.handleResize);
+        setTimeout(() => {
+          this.handleResize();
+        }, 500);
+      }
+    );
+  }
+
+  /**
+   * * * 组件卸载前执行
+   */
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  /**
+   * * * 初始化容器
+   */
+  initContainer() {
+    const container = (
+      window.AliLowCodeEngine?.project?.simulatorHost?.contentDocument ||
+      document
+    ).getElementById(this.state.containerId);
+    if (!container) {
+      if (!this.retry || this.retry < 2) {
+        this.retry = (this.retry || 0) + 1;
+        setTimeout(() => {
+          this.initContainer();
+        }, 500);
+      }
+      return;
+    }
+    const width = window.screen.width;
+    const height = window.screen.height;
+    container.style.width = `${width}px`;
+    container.style.height = `${height}px`;
+    container.style.transformOrigin = 'left top';
+    this.updateScale();
+  }
+
+  /**
+   * * * 处理窗口大小变化
+   */
+  handleResize() {
+    this.updateScale();
+  }
+
+  /**
+   * * * 更新缩放比例
+   */
+  updateScale() {
+    const _document =
+      window.AliLowCodeEngine?.project?.simulatorHost?.contentDocument ||
+      document;
+    const container = _document.getElementById(this.state.containerId);
+    if (!container) return;
+    const scaleX = _document.body.clientWidth / this.state.baseWidth;
+    const scaleY = _document.body.clientHeight / this.state.baseHeight;
+    const scale = Math.min(scaleX, scaleY);
+    container.style.width = `${this.state.baseWidth}px`;
+    container.style.height = `${this.state.baseHeight}px`;
+    container.style.transform = `scale(${scale})`;
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <View
+          id={this.state.containerId}
+          className="full-screen-container"
+          style={this.props.style}
+        >
+          {this.props.content}
+        </View>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/demo-error-page.tsx

@@ -0,0 +1,119 @@
+/**
+ * 演示错误页面
+ * @type Page
+ * @route /demo-error
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  pageTitle?: string;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  userList?: string[];
+  loading?: boolean;
+  selectedUser?: any;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = { userList: [], loading: false, selectedUser: null };
+
+  loadData() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+        userList: [
+          {
+            id: 1,
+            name: '张三',
+            email: 'zhangsan@example.com',
+            age: 25,
+          },
+          {
+            id: 2,
+            name: '李四',
+            email: 'lisi@example.com',
+            age: 30,
+          },
+          {
+            id: 3,
+            name: '王五',
+            email: 'wangwu@example.com',
+            age: 28,
+          },
+        ],
+      });
+    }, 1000);
+  }
+
+  selectUser(user) {
+    this.setState({
+      selectedUser: user,
+    });
+  }
+
+  render() {
+    return (
+      <Page className="p-[24px]">
+        <Card title="用户管理">
+          <Space direction="vertical" className="w-full">
+            <Button type="primary" onClick={() => this.loadData()}>
+              加载数据
+            </Button>
+            {!!this.state.loading && <View>加载中...</View>}
+            <Table
+              columns={[
+                {
+                  title: 'ID',
+                  dataIndex: 'id',
+                  render: id => <Text>#{id}</Text>,
+                },
+                {
+                  title: '姓名',
+                  dataIndex: 'name',
+                  render: name => <Text>{name}</Text>,
+                },
+                {
+                  title: '邮箱',
+                  dataIndex: 'email',
+                  render: email => <Text>{email}</Text>,
+                },
+              ]}
+              dataSource={this.state.userList}
+              loading={this.state.loading}
+            />
+            {this.state.userList.map((user, index) => (
+              <View key={user.id}>
+                <Text>{user.name}</Text>
+                <Text>{user.email}</Text>
+                <Text>{user.age}</Text>
+                <Button size="small" onClick={() => this.selectUser(user)}>
+                  选择
+                </Button>
+              </View>
+            ))}
+            {!!this.state.selectedUser && (
+              <Card title="已选用户">
+                <p>姓名:{this.state.selectedUser.name}</p>
+                <p>邮箱:{this.state.selectedUser.email}</p>
+                <p>年龄:{this.state.selectedUser.age}</p>
+              </Card>
+            )}
+          </Space>
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,183 @@
+/**
+ * 部门列表
+ * 查看和管理所有部门信息
+ *
+ * @type Page
+ * @route /departments
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  departments?: {
+    /* @example 1 */id?: number,
+    /* @example 技术部 */name?: string,
+    /* @example 张三 */manager?: string,
+    /* @example 25 */memberCount?: number,
+    /* @example enabled */status?: string,
+    /* @example 2024-01-15 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    departments: [
+      {
+        id: 1,
+        name: '技术部',
+        manager: '张三',
+        memberCount: 25,
+        status: 'enabled',
+        createTime: '2024-01-15',
+      },
+      {
+        id: 2,
+        name: '市场部',
+        manager: '李四',
+        memberCount: 18,
+        status: 'enabled',
+        createTime: '2024-02-20',
+      },
+      {
+        id: 3,
+        name: '人事部',
+        manager: '王五',
+        memberCount: 8,
+        status: 'enabled',
+        createTime: '2024-03-10',
+      },
+      {
+        id: 4,
+        name: '财务部',
+        manager: '赵六',
+        memberCount: 12,
+        status: 'enabled',
+        createTime: '2024-04-05',
+      },
+      {
+        id: 5,
+        name: '运营部',
+        manager: '钱七',
+        memberCount: 15,
+        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: 'manager', key: 'manager' },
+              {
+                title: '成员数量',
+                dataIndex: 'memberCount',
+                key: 'memberCount',
+              },
+              {
+                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.departments}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+          />
+        </Card>
+      </Page>
+    );
+  }
+}
+
+export default Document;

package/tests/test-app/src/pages/description_of_mock_interface.md

@@ -0,0 +1,32 @@
+# 数据大屏Mock接口说明
+
+## 接口权限验证
+
+JWT Header: Authorization
+Token
+```
+  eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc1JlZnJlc2giOmZhbHNlLCJpZCI6MSwidGVuYW50SWQiOm51bGwsImlhdCI6MTc1MDQwNDk0NCwiZXhwIjoyMDY1NzY0OTQ0fQ.ksKiI0bwJ9d1NaQu-kvVdmdot62myiAytuzpETjIgmI
+```
+
+## 获取故障统计信息
+
+URL: http://106.13.174.178:8001/app/phm-base/fault/statistics
+Method: GET
+
+## 获取故障列表
+
+URL: http://106.13.174.178:8001/app/phm-base/fault/page
+Method: POST
+
+参数说明:
+
+```js
+{
+  "productName":"hvac",
+  "carNo":"1",
+  "deviceNo":"1",
+  "startTime":"2025-07-15T11:49:27.000Z",
+  "endTime":"2025-07-15T11:51:27.000Z"
+}
+```
+// 所有参数都可选择不传或者传空字符串