@appthen/cli 1.2.10 → 1.2.11

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

@@ -0,0 +1,181 @@
+:root {
+  --primary-color: #1a1b2f;
+  --secondary-color: #2a2b3f;
+  --accent-color: #81d3fc;
+  --text-color: #ffffff;
+  --warning-color: #ffcc00;
+  --danger-color: #ff4d4f;
+  --success-color: #52c41a;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Arial', sans-serif;
+  background-color: var(--primary-color);
+  color: var(--text-color);
+}
+
+.container {
+  width: 100%;
+  height: 100vh;
+  display: grid;
+  grid-template-rows: 80px 1fr;
+  grid-template-columns: 1fr;
+}
+
+.header {
+  background-color: var(--secondary-color);
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.header-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: var(--accent-color);
+}
+
+.header-status {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.status-dot.online {
+  background-color: var(--success-color);
+}
+
+.main-content {
+  display: grid;
+  grid-template-columns: 300px 1fr 300px;
+  gap: 20px;
+  padding: 20px;
+}
+
+.panel {
+  background-color: var(--secondary-color);
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.panel-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--accent-color);
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metro-map {
+  display: flex;
+  flex-direction: column;
+}
+
+.train-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.train-card {
+  background-color: rgba(42, 43, 63, 0.8);
+  border-radius: 6px;
+  padding: 15px;
+  border-left: 4px solid var(--accent-color);
+}
+
+.train-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.train-id {
+  font-weight: bold;
+  color: var(--accent-color);
+}
+
+.train-status {
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.status-normal {
+  background-color: var(--success-color);
+}
+
+.status-warning {
+  background-color: var(--warning-color);
+}
+
+.status-danger {
+  background-color: var(--danger-color);
+}
+
+.train-details {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.detail-item {
+  font-size: 14px;
+}
+
+.detail-label {
+  color: rgba(255, 255, 255, 0.7);
+  margin-right: 5px;
+}
+
+.alert-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.alert-item {
+  background-color: rgba(42, 43, 63, 0.8);
+  border-radius: 6px;
+  padding: 12px;
+  border-left: 4px solid var(--danger-color);
+}
+
+.alert-time {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.alert-message {
+  font-weight: bold;
+  margin: 5px 0;
+}
+
+.alert-train {
+  font-size: 12px;
+  color: var(--accent-color);
+}
+
+@media (max-width: 1200px) {
+  .main-content {
+    grid-template-columns: 1fr;
+  }
+}

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/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"
+}
+```
+// 所有参数都可选择不传或者传空字符串

package/tests/test-app/src/pages/digitalLargeScreen.css

@@ -0,0 +1,181 @@
+:root {
+  --primary-color: #1a1b2f;
+  --secondary-color: #2a2b3f;
+  --accent-color: #81d3fc;
+  --text-color: #ffffff;
+  --warning-color: #ffcc00;
+  --danger-color: #ff4d4f;
+  --success-color: #52c41a;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Arial', sans-serif;
+  background-color: var(--primary-color);
+  color: var(--text-color);
+}
+
+.container {
+  width: 100%;
+  height: 100vh;
+  display: grid;
+  grid-template-rows: 80px 1fr;
+  grid-template-columns: 1fr;
+}
+
+.header {
+  background-color: var(--secondary-color);
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.header-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: var(--accent-color);
+}
+
+.header-status {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.status-dot.online {
+  background-color: var(--success-color);
+}
+
+.main-content {
+  display: grid;
+  grid-template-columns: 300px 1fr 300px;
+  gap: 20px;
+  padding: 20px;
+}
+
+.panel {
+  background-color: var(--secondary-color);
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.panel-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--accent-color);
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metro-map {
+  display: flex;
+  flex-direction: column;
+}
+
+.train-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.train-card {
+  background-color: rgba(42, 43, 63, 0.8);
+  border-radius: 6px;
+  padding: 15px;
+  border-left: 4px solid var(--accent-color);
+}
+
+.train-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.train-id {
+  font-weight: bold;
+  color: var(--accent-color);
+}
+
+.train-status {
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.status-normal {
+  background-color: var(--success-color);
+}
+
+.status-warning {
+  background-color: var(--warning-color);
+}
+
+.status-danger {
+  background-color: var(--danger-color);
+}
+
+.train-details {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.detail-item {
+  font-size: 14px;
+}
+
+.detail-label {
+  color: rgba(255, 255, 255, 0.7);
+  margin-right: 5px;
+}
+
+.alert-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.alert-item {
+  background-color: rgba(42, 43, 63, 0.8);
+  border-radius: 6px;
+  padding: 12px;
+  border-left: 4px solid var(--danger-color);
+}
+
+.alert-time {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.alert-message {
+  font-weight: bold;
+  margin: 5px 0;
+}
+
+.alert-train {
+  font-size: 12px;
+  color: var(--accent-color);
+}
+
+@media (max-width: 1200px) {
+  .main-content {
+    grid-template-columns: 1fr;
+  }
+}