@appthen/cli 1.2.10 → 1.2.12

package/tests/test-app/src/pages/data_dashboard/blueBrightGreenTechnologyWind.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/blueBrightGreenTechnologyWind.tsx

@@ -0,0 +1,225 @@
+/**
+ * 蓝亮绿科技风
+ * @type Page
+ * @screen 1440w #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 './blueBrightGreenTechnologyWind.css';
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {}
+
+class Document extends React.Component<IProps, IState> {
+  state = {};
+
+  getDoorChartOption() {
+    return {
+      tooltip: {
+        trigger: 'item',
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['50%', '70%'],
+          data: [
+            {
+              value: 120,
+              name: '正常车门',
+            },
+            {
+              value: 30,
+              name: '预警车门',
+            },
+            {
+              value: 15,
+              name: '故障车门',
+            },
+          ],
+          color: ['#60AE46', '#FF9900', '#D94746'],
+        },
+      ],
+    };
+  }
+
+  getAirConditionChartOption() {
+    return {
+      tooltip: {
+        trigger: 'item',
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['50%', '70%'],
+          data: [
+            {
+              value: 85,
+              name: '正常空调',
+            },
+            {
+              value: 45,
+              name: '预警空调',
+            },
+            {
+              value: 20,
+              name: '故障空调',
+            },
+          ],
+          color: ['#60AE46', '#FF9900', '#D94746'],
+        },
+      ],
+    };
+  }
+
+  getBrakeChartOption() {
+    return {
+      tooltip: {
+        trigger: 'item',
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['50%', '70%'],
+          data: [
+            {
+              value: 150,
+              name: '正常制动',
+            },
+            {
+              value: 25,
+              name: '预警制动',
+            },
+            {
+              value: 10,
+              name: '故障制动',
+            },
+          ],
+          color: ['#60AE46', '#FF9900', '#D94746'],
+        },
+      ],
+    };
+  }
+
+  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-lg 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-lg 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/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;
+  }
+}