ONE-OS/小程序/WorkbenchPage.jsx

const WorkbenchPage = function () {
	var _React$useState = React.useState(0);
	var activeTab = _React$useState[0];
	var setActiveTab = _React$useState[1];

	var todos = [
		{ id: 1, title: "审批设备巡检报告", status: "待处理", time: "今天" },
		{ id: 2, title: "处理加氢站异常告警", status: "进行中", time: "今天" },
		{ id: 3, title: "完成月度资产盘点", status: "待处理", time: "本周" }
	];

	var stats = [
		{ label: "待办任务", value: "8", color: "#07c160" },
		{ label: "本周完成", value: "23", color: "#576b95" },
		{ label: "告警待处理", value: "2", color: "#fa5151" }
	];

	var navItems = [
		{ key: 0, icon: "\uD83D\uDCCA", text: "工作台" },
		{ key: 1, icon: "\uD83D\uDCC4", text: "业务" },
		{ key: 2, icon: "\uD83D\uDC64", text: "我的" }
	];

	var handleNavClick = function (key) {
		setActiveTab(key);
	};

	var styles = {
		page: {
			minHeight: "100vh",
			backgroundColor: "#f7f7f7",
			paddingBottom: "70px",
			boxSizing: "border-box"
		},
		header: {
			backgroundColor: "#fff",
			padding: "24px 20px",
			marginBottom: "12px"
		},
		headerTitle: {
			fontSize: "22px",
			fontWeight: "600",
			color: "#333",
			marginBottom: "4px"
		},
		headerSub: {
			fontSize: "14px",
			color: "#999"
		},
		statsRow: {
			display: "flex",
			padding: "0 12px 12px",
			marginBottom: "12px"
		},
		statCard: {
			flex: 1,
			backgroundColor: "#fff",
			borderRadius: "8px",
			padding: "20px 12px",
			textAlign: "center",
			margin: "0 6px"
		},
		statValue: {
			fontSize: "24px",
			fontWeight: "600",
			marginBottom: "8px"
		},
		statLabel: {
			fontSize: "13px",
			color: "#999"
		},
		section: {
			backgroundColor: "#fff",
			padding: "20px",
			marginBottom: "12px"
		},
		sectionTitle: {
			fontSize: "17px",
			fontWeight: "600",
			color: "#333",
			marginBottom: "16px",
			display: "flex",
			justifyContent: "space-between",
			alignItems: "center"
		},
		sectionMore: {
			fontSize: "14px",
			color: "#07c160"
		},
		todoItem: {
			display: "flex",
			alignItems: "center",
			padding: "14px 0",
			borderBottom: "1px solid #f0f0f0"
		},
		todoItemLast: {
			borderBottom: "none"
		},
		todoLeft: {
			flex: 1
		},
		todoTitle: {
			fontSize: "15px",
			color: "#333",
			marginBottom: "4px"
		},
		todoMeta: {
			fontSize: "12px",
			color: "#999"
		},
		todoStatus: {
			fontSize: "12px",
			padding: "4px 10px",
			borderRadius: "4px",
			backgroundColor: "#e8f5e9",
			color: "#07c160"
		},
		todoStatusDoing: {
			fontSize: "12px",
			padding: "4px 10px",
			borderRadius: "4px",
			backgroundColor: "#fff3e0",
			color: "#ff9800"
		},
		bottomNav: {
			position: "fixed",
			bottom: 0,
			left: 0,
			right: 0,
			height: "60px",
			backgroundColor: "#fff",
			display: "flex",
			borderTop: "1px solid #e5e5e5",
			boxSizing: "border-box"
		},
		navItem: {
			flex: 1,
			display: "flex",
			flexDirection: "column",
			alignItems: "center",
			justifyContent: "center",
			cursor: "pointer"
		},
		navIcon: {
			fontSize: "24px",
			marginBottom: "4px"
		},
		navText: {
			fontSize: "11px",
			color: "#999"
		},
		navTextActive: {
			color: "#07c160"
		}
	};

	return React.createElement(
		"div",
		{ style: styles.page },
		React.createElement(
			"div",
			{ style: styles.header },
			React.createElement("div", { style: styles.headerTitle }, "工作台"),
			React.createElement("div", { style: styles.headerSub }, "欢迎使用 ONE-OS 运管平台")
		),
		React.createElement(
			"div",
			{ style: styles.statsRow },
			stats.map(function (stat, i) {
				var valueStyle = {
					fontSize: "24px",
					fontWeight: "600",
					marginBottom: "8px",
					color: stat.color
				};
				return React.createElement(
					"div",
					{ key: i, style: styles.statCard },
					React.createElement("div", { style: valueStyle }, stat.value),
					React.createElement("div", { style: styles.statLabel }, stat.label)
				);
			})
		),
		React.createElement(
			"div",
			{ style: styles.section },
			React.createElement(
				"div",
				{ style: styles.sectionTitle },
				React.createElement("span", null, "待办任务"),
				React.createElement("span", { style: styles.sectionMore }, "全部")
			),
			todos.map(function (todo, i) {
				var isLast = i === todos.length - 1;
				var statusStyle = todo.status === "进行中" ? styles.todoStatusDoing : styles.todoStatus;
				var itemStyle = isLast ? { display: "flex", alignItems: "center", padding: "14px 0", borderBottom: "none" } : styles.todoItem;
				return React.createElement(
					"div",
					{ key: todo.id, style: itemStyle },
					React.createElement(
						"div",
						{ style: styles.todoLeft },
						React.createElement("div", { style: styles.todoTitle }, todo.title),
						React.createElement("div", { style: styles.todoMeta }, todo.time)
					),
					React.createElement("span", { style: statusStyle }, todo.status)
				);
			})
		),
		React.createElement(
			"div",
			{ style: styles.bottomNav },
			navItems.map(function (item) {
				var isActive = activeTab === item.key;
				var textStyle = isActive ? { fontSize: "11px", color: "#07c160" } : styles.navText;
				return React.createElement(
					"div",
					{
						key: item.key,
						style: styles.navItem,
						onClick: function () { handleNavClick(item.key); }
					},
					React.createElement("div", { style: styles.navIcon }, item.icon),
					React.createElement("div", { style: textStyle }, item.text)
				);
			})
		)
	);
};

// Axhub 要求必须定义 Component 变量
var Component = WorkbenchPage;