@appthen/cli 1.2.10 → 1.2.11

package/tests/test-app/src/pages/component/WorkOrderCard.tsx

@@ -0,0 +1,140 @@
+/**
+ * 工单卡片
+ * @type Component
+ * @screen 375x194 #f5f5f5
+ * @frames app, web
+ */
+import React from 'react';
+import { AtIcon, Component, Text, View } from 'cross-ui';
+
+
+class IProps {
+  /* 工单状态 */
+  status: string;
+  /* 跳转详情函数 */
+  onGoDetail: Function;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {}
+
+class Document extends React.Component<IProps, IState> {
+  static defaultProps = { status: '' };
+  state = {};
+
+  render() {
+    return (
+      <React.Fragment>
+        <View className="pr-[1px] flex flex-row">
+          <View
+            __hidePh={true}
+            inlineStyle={[
+              {
+                enable: this.props.status == 'completed',
+                name: '动态样式1',
+                style: { backgroundColor: '#3b82f6' },
+              },
+            ]}
+            className="bottom-[0px] top-[0px] left-[0px] w-[17px] rounded-tl-[20px] rounded-bl-[20px] mr-[-11px]"
+          />
+          <View
+            __hidePh={true}
+            className="bg-[#ffffff] rounded-xl relative flex-1 pt-[10px] pb-[10px] pl-[10px] pr-[10px]"
+          >
+            <View className="flex flex-row items-center">
+              <View className="flex-1">
+                <Text className="text-sm text-[#666666]">WO-2023110001</Text>
+              </View>
+              <View className="bg-[#22c55e] pt-[6px] pr-[10px] pb-[6px] pl-[10px] rounded-[15px]">
+                <Text className="text-xs text-[#ffffff]">已完成</Text>
+              </View>
+            </View>
+            <View className="mt-[10px]">
+              <Text className="text-sm text-[#333] font-bold">
+                设备故障维修申请
+              </Text>
+            </View>
+            <View className="mt-[10px]">
+              <Text numberOfLines={1} className="text-xs text-[#333]">
+                3号生产线主轴电机出现异常噪音，需要紧急检修以比
+              </Text>
+            </View>
+            <View className="mt-[10px] flex flex-row items-center">
+              <View className="flex flex-row">
+                <AtIcon
+                  color="#666"
+                  size={20}
+                  svg="&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34; ?&#62;&#10;&#60;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; xmlns:xlink=&#34;http://www.w3.org/1999/xlink&#34; width=&#34;100%&#34; height=&#34;100%&#34; viewBox=&#34;0 0 12 12&#34;&#62;&#10;\t&#60;defs&#62;&#10;\t\t&#60;clipPath id=&#34;clipPath5115394031&#34;&#62;&#10;\t\t\t&#60;path d=&#34;M0 0L12 0L12 12L0 12L0 0Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0 0)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t\t&#60;/clipPath&#62;&#10;\t&#60;/defs&#62;&#10;\t&#60;g clip-path=&#34;url(#clipPath5115394031)&#34;&#62;&#10;\t\t&#60;path d=&#34;M1.67816 6.0308L1.67816 2.65931C1.67816 2.45221 1.51027 2.28431 1.30316 2.28431C1.09606 2.28431 0.928164 2.45221 0.928164 2.65931L0.928164 6.0308Q0.936713 6.57501 1.32039 6.95267Q1.70406 7.33034 2.24242 7.33034Q2.78078 7.33034 3.16446 6.95267Q3.54813 6.57501 3.55663 6.03672L3.55973 1.61191Q3.56967 0.794366 2.99203 0.209683Q2.4144 -0.375 1.5925 -0.375Q0.770602 -0.375 0.192968 0.209683Q-0.384667 0.794366 -0.374698 1.6162L-0.374726 6.06056Q-0.390517 7.14867 0.377193 7.92757Q1.1449 8.70648 2.23856 8.70648Q3.33221 8.70648 4.09992 7.92758Q4.86763 7.14867 4.8518 6.05513L4.85184 1.90322C4.85184 1.69611 4.68394 1.52822 4.47684 1.52822C4.26973 1.52822 4.10184 1.69611 4.10184 1.90322L4.10188 6.06599Q4.11316 6.84572 3.56576 7.4011Q3.01836 7.95648 2.23856 7.95648Q1.45875 7.95648 0.911348 7.4011Q0.363947 6.84572 0.375274 6.06056L0.375246 1.60711Q0.369078 1.09857 0.726504 0.736788Q1.08393 0.375 1.5925 0.375Q2.10107 0.375 2.4585 0.736788Q2.81592 1.09858 2.80973 1.6114L2.80673 6.02487Q2.80308 6.25601 2.63833 6.41817Q2.47359 6.58034 2.24242 6.58034Q2.01126 6.58034 1.84651 6.41817Q1.68177 6.25601 1.67816 6.0308Z&#34; fill-rule=&#34;evenodd&#34; transform=&#34;matrix(1 0 0 1 3.76121 1.84069)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t&#60;/g&#62;&#10;&#60;/svg&#62;&#10;"
+                />
+              </View>
+              <View className="ml-[5px]">
+                <Text className="text-xs text-[#666666]">2个附件</Text>
+              </View>
+            </View>
+            <View className="mt-[10px] flex flex-row">
+              <View className="flex flex-row items-center">
+                <View className="w-[28px] h-[28px] bg-[#add2ff] rounded-[15px] flex flex-col justify-center items-center">
+                  <Text className="text-sm text-[#3b82f6]">李</Text>
+                </View>
+                <View className="ml-[10px]">
+                  <Text className="text-sm text-[#666666]">李明</Text>
+                </View>
+              </View>
+              <View className="flex-row flex-1 flex justify-end">
+                <View
+                  __hidePh={true}
+                  onClick={e => {
+                    this.props.onGoDetail();
+                  }}
+                  className="bg-[#f3f4f6] w-[40px] h-[40px] rounded-[20px] flex flex-col justify-center items-center mr-[10px]"
+                >
+                  <AtIcon
+                    color="#666"
+                    size={20}
+                    svg="&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34; ?&#62;&#10;&#60;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; xmlns:xlink=&#34;http://www.w3.org/1999/xlink&#34; width=&#34;100%&#34; height=&#34;100%&#34; viewBox=&#34;0 0 20 20&#34;&#62;&#10;\t&#60;defs&#62;&#10;\t\t&#60;clipPath id=&#34;clipPath0894376390&#34;&#62;&#10;\t\t\t&#60;path d=&#34;M0 0L20 0L20 20L0 20L0 0Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0 0)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t\t&#60;/clipPath&#62;&#10;\t&#60;/defs&#62;&#10;\t&#60;g clip-path=&#34;url(#clipPath0894376390)&#34;&#62;&#10;\t\t&#60;circle cx=&#34;2.5&#34; cy=&#34;2.5&#34; r=&#34;2.5&#34; transform=&#34;matrix(1 0 0 1 7.5 7.5)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t\t&#60;path d=&#34;M18.5492 5.57031C17.5156 3.97188 16.1746 2.61406 14.6715 1.64336C13.0086 0.568359 11.1727 0 9.36252 0C7.70158 0 6.06837 0.474609 4.50822 1.41055C2.9172 2.36484 1.4758 3.75898 0.223843 5.55391C0.079313 5.76135 0.00477175 5.99146 0.000219643 6.24425C-0.00433246 6.49703 0.0618755 6.72968 0.198843 6.94219C1.23048 8.55664 2.55822 9.91641 4.03791 10.8738C5.70392 11.9531 7.49689 12.5 9.36252 12.5C11.1871 12.5 13.027 11.9363 14.6828 10.8703C16.1852 9.90273 17.5235 8.53984 18.5531 6.92812C18.6852 6.72088 18.7509 6.49438 18.7501 6.24865C18.7494 6.00291 18.6825 5.7768 18.5492 5.57031ZM9.3758 10C8.34026 10 7.45638 9.63388 6.72415 8.90165C5.99191 8.16942 5.6258 7.28553 5.6258 6.25C5.6258 5.21447 5.99191 4.33058 6.72415 3.59835C7.45638 2.86612 8.34026 2.5 9.3758 2.5C10.4113 2.5 11.2952 2.86612 12.0274 3.59835C12.7597 4.33058 13.1258 5.21447 13.1258 6.25C13.1246 7.28504 12.7581 8.16851 12.0262 8.90039C11.2943 9.63228 10.4108 9.99882 9.3758 10Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0.624204 3.75)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t&#60;/g&#62;&#10;&#60;/svg&#62;&#10;"
+                  />
+                </View>
+                <View
+                  __hidePh={true}
+                  className="bg-[#f3f4f6] w-[40px] h-[40px] rounded-[20px] flex flex-col justify-center items-center mr-[10px]"
+                >
+                  <AtIcon
+                    color="#666"
+                    size={20}
+                    svg="&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34; ?&#62;&#10;&#60;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; xmlns:xlink=&#34;http://www.w3.org/1999/xlink&#34; width=&#34;100%&#34; height=&#34;100%&#34; viewBox=&#34;0 0 20 20&#34;&#62;&#10;\t&#60;defs&#62;&#10;\t\t&#60;clipPath id=&#34;clipPath2557746411&#34;&#62;&#10;\t\t\t&#60;path d=&#34;M0 0L20 0L20 20L0 20L0 0Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0 0)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t\t&#60;/clipPath&#62;&#10;\t&#60;/defs&#62;&#10;\t&#60;g clip-path=&#34;url(#clipPath2557746411)&#34;&#62;&#10;\t\t&#60;path d=&#34;M12.7935 -0.418716L12.7938 -0.419009Q13.2343 -0.859375 13.8572 -0.859375Q14.4804 -0.859375 14.921 -0.418751L14.9505 -0.389229Q15.3907 0.0513004 15.3907 0.674075Q15.3907 1.29685 14.9502 1.7376L14.4897 2.19815Q14.4299 2.258 14.3595 2.30503Q14.2891 2.35205 14.2109 2.38444Q14.1327 2.41683 14.0497 2.43334Q13.9667 2.44986 13.882 2.44986Q13.7974 2.44986 13.7144 2.43334Q13.6314 2.41683 13.5532 2.38444Q13.475 2.35205 13.4046 2.30503Q13.3342 2.258 13.2744 2.19815L12.3327 1.25649Q12.2729 1.19661 12.2259 1.12621Q12.1789 1.05582 12.1465 0.977606Q12.1142 0.899394 12.0977 0.816373Q12.0812 0.733351 12.0812 0.64871Q12.0813 0.564069 12.0978 0.481061Q12.1144 0.398054 12.1468 0.319869Q12.1792 0.241685 12.2263 0.171328Q12.2733 0.100972 12.3332 0.0411472L12.7935 -0.418716ZM10.6665 1.70781L0.035724 12.3648Q-0.084919 12.4857 -0.150137 12.6436L-0.794278 14.203Q-0.826593 14.2812 -0.843025 14.3643Q-0.859457 14.4473 -0.859375 14.5319Q-0.859292 14.6166 -0.842699 14.6996Q-0.826106 14.7826 -0.793639 14.8607Q-0.761172 14.9389 -0.71408 15.0092Q-0.666988 15.0796 -0.607079 15.1394Q-0.547171 15.1992 -0.476749 15.2461Q-0.406327 15.2931 -0.328097 15.3254Q-0.170506 15.3905 7.45058e-09 15.3905Q0.170506 15.3905 0.328097 15.3254L1.88747 14.6812Q2.04536 14.616 2.1663 14.4954L12.8225 3.8653Q12.8825 3.80553 12.9296 3.73521Q12.9767 3.66489 13.0092 3.58673Q13.0417 3.50857 13.0583 3.42558Q13.0749 3.34259 13.075 3.25794Q13.0751 3.1733 13.0587 3.09027Q13.0423 3.00723 13.01 2.929Q12.9777 2.85076 12.9308 2.78032Q12.8838 2.70989 12.824 2.64997L11.8819 1.70781Q11.822 1.64796 11.7517 1.60094Q11.6813 1.55391 11.6031 1.52152Q11.5249 1.48913 11.4419 1.47262Q11.3589 1.45611 11.2742 1.45611Q11.1896 1.45611 11.1066 1.47262Q11.0235 1.48913 10.9453 1.52152Q10.8672 1.55391 10.7968 1.60094Q10.7264 1.64796 10.6665 1.70781Z&#34; fill-rule=&#34;evenodd&#34; transform=&#34;matrix(1 0 0 1 2.73438 2.73452)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t&#60;/g&#62;&#10;&#60;/svg&#62;&#10;"
+                  />
+                </View>
+                <View
+                  __hidePh={true}
+                  className="bg-[#f3f4f6] w-[40px] h-[40px] rounded-[20px] flex flex-col justify-center items-center"
+                >
+                  <AtIcon
+                    color="#666"
+                    size={20}
+                    svg="&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34; ?&#62;&#10;&#60;svg xmlns=&#34;http://www.w3.org/2000/svg&#34; xmlns:xlink=&#34;http://www.w3.org/1999/xlink&#34; width=&#34;100%&#34; height=&#34;100%&#34; viewBox=&#34;0 0 20 20&#34;&#62;&#10;\t&#60;defs&#62;&#10;\t\t&#60;clipPath id=&#34;clipPath0406936548&#34;&#62;&#10;\t\t\t&#60;path d=&#34;M0 0L20 0L20 20L0 20L0 0Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0 0)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t\t&#60;/clipPath&#62;&#10;\t&#60;/defs&#62;&#10;\t&#60;g clip-path=&#34;url(#clipPath0406936548)&#34;&#62;&#10;\t\t&#60;path d=&#34;M12.5003 6.875C11.6972 6.875 10.9206 6.51641 10.3128 5.86563C9.72178 5.23086 9.36084 4.38438 9.29717 3.48281C9.2292 2.52109 9.52256 1.63672 10.123 0.992188C10.7233 0.347657 11.5628 0 12.5003 0C13.4312 0 14.273 0.353906 14.8714 0.996875C15.4757 1.64609 15.7698 2.52891 15.7019 3.48242C15.6366 4.38516 15.2761 5.23125 14.6862 5.86523C14.08 6.51641 13.3038 6.875 12.5003 6.875ZM17.6499 13.75L7.35108 13.75C7.18329 13.7509 7.02391 13.7147 6.87293 13.6415C6.72196 13.5683 6.59488 13.4655 6.4917 13.3332C6.3823 13.1898 6.30957 13.0298 6.27353 12.853C6.23748 12.6763 6.24172 12.5006 6.28623 12.3258C6.61514 11.0051 7.42999 9.90976 8.64248 9.15859C9.71866 8.49219 11.0886 8.125 12.5003 8.125C13.9398 8.125 15.2737 8.47656 16.3562 9.14258C17.5714 9.88984 18.3874 10.9914 18.7148 12.3281C18.7587 12.503 18.7625 12.6788 18.726 12.8554C18.6896 13.032 18.6166 13.1919 18.5069 13.3352C18.4039 13.4669 18.2771 13.5691 18.1265 13.642C17.976 13.7149 17.8171 13.7509 17.6499 13.75ZM5.11749 7.03125C3.74288 7.03125 2.53428 5.75313 2.42217 4.18242C2.3667 3.37773 2.61749 2.63359 3.1253 2.08789C3.62764 1.54766 4.33624 1.25 5.11749 1.25C5.89874 1.25 6.60186 1.54922 7.10694 2.09258C7.61866 2.64258 7.86866 3.38516 7.81006 4.1832C7.69795 5.75352 6.48975 7.03125 5.11749 7.03125ZM7.68233 8.25977C6.99522 7.92383 6.10342 7.75586 5.11788 7.75586C3.96709 7.75586 2.84952 8.05586 1.97061 8.60039C0.974126 9.21875 0.303814 10.1191 0.0331106 11.2063C-0.00701755 11.3646 -0.010671 11.5239 0.0221504 11.6839C0.0549717 11.844 0.120995 11.9889 0.22022 12.1187C0.314407 12.2397 0.430431 12.3336 0.568293 12.4006C0.706154 12.4676 0.851718 12.5007 1.00499 12.5L5.34092 12.5C5.41644 12.5 5.48318 12.4758 5.54114 12.4274C5.59911 12.379 5.63485 12.3177 5.64834 12.2434C5.65264 12.2187 5.65811 12.1941 5.66436 12.1699C5.99561 10.8395 6.77178 9.71523 7.91866 8.8957C8.01024 8.82968 8.05338 8.74029 8.04808 8.62751C8.04277 8.51473 7.99143 8.42978 7.89405 8.37265C7.83272 8.33672 7.76241 8.29883 7.68233 8.25977Z&#34; fill-rule=&#34;nonzero&#34; transform=&#34;matrix(1 0 0 1 0.624702 3.125)&#34; fill=&#34;currentColor&#34;/&#62;&#10;\t&#60;/g&#62;&#10;&#60;/svg&#62;&#10;"
+                  />
+                </View>
+              </View>
+            </View>
+            <View className="mt-[10px] flex flex-row items-center justify-between">
+              <View>
+                <Text className="text-sm text-[#9b9b9b]">
+                  创建于 2023-11-05
+                </Text>
+              </View>
+              <View>
+                <Text className="text-sm text-[#ef4444]">
+                  期望完成：2023-11-08
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Document;

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

@@ -0,0 +1,42 @@
+/**
+ * 封面管理
+ * 封面列表与操作
+ *
+ * @type Page
+ * @screen 400x250
+ * @frames app, web
+ * @clients weapp
+ */
+import React from 'react';
+import { Page, Text, View } from '@appthen/react';
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  newField?: string;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {};
+
+  render() {
+    return (
+      <Page
+        statusBarMode="light"
+        backgroundImage="https://cdn.appthen.com/Fmk8IZVxeE9QYk9hKJM-D2L4Q52_"
+      >
+        <View className="h-[250px] bg-[rgba(58,58,58,0.74)] flex flex-col justify-center items-center">
+          <Text className="text-[40px] text-[#40a9ff] font-bold">
+            快速上手指南
+          </Text>
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;

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;