Initial commit: ONE-OS project
Made-with: Cursor
This commit is contained in:
王冕
176
小程序/App.jsx
Normal file
176
小程序/App.jsx
Normal file
@@ -0,0 +1,176 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 集成登录页 + 工作台 于单页面
|
||||
const Component = function () {
|
||||
var _React$useState = React.useState("login");
|
||||
var page = _React$useState[0];
|
||||
var setPage = _React$useState[1];
|
||||
|
||||
// 登录页状态
|
||||
var _React$useState2 = React.useState("");
|
||||
var account = _React$useState2[0];
|
||||
var setAccount = _React$useState2[1];
|
||||
var _React$useState3 = React.useState("");
|
||||
var password = _React$useState3[0];
|
||||
var setPassword = _React$useState3[1];
|
||||
var _React$useState4 = React.useState(false);
|
||||
var agreed = _React$useState4[0];
|
||||
var setAgreed = _React$useState4[1];
|
||||
|
||||
// 工作台状态
|
||||
var _React$useState5 = React.useState(0);
|
||||
var activeTab = _React$useState5[0];
|
||||
var setActiveTab = _React$useState5[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 handleLogin = function () {
|
||||
if (!agreed) {
|
||||
alert("请先阅读并同意用户服务协议和隐私政策");
|
||||
return;
|
||||
}
|
||||
setPage("workbench");
|
||||
};
|
||||
|
||||
var styles = {
|
||||
loginPage: {
|
||||
minHeight: "100vh",
|
||||
backgroundColor: "#f7f7f7",
|
||||
padding: "40px 24px 24px",
|
||||
boxSizing: "border-box",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center"
|
||||
},
|
||||
logo: { width: "80px", height: "80px", backgroundColor: "#07c160", borderRadius: "16px", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "20px", color: "#fff", fontSize: "16px", fontWeight: "bold", textAlign: "center", lineHeight: "1.3" },
|
||||
title: { fontSize: "20px", fontWeight: "600", color: "#333", textAlign: "center", marginBottom: "40px", lineHeight: "1.5", maxWidth: "280px" },
|
||||
form: { width: "100%", maxWidth: "340px" },
|
||||
inputGroup: { marginBottom: "16px" },
|
||||
input: { width: "100%", height: "48px", padding: "0 16px", fontSize: "16px", border: "1px solid #e5e5e5", borderRadius: "8px", backgroundColor: "#fff", boxSizing: "border-box", outline: "none" },
|
||||
checkboxRow: { display: "flex", alignItems: "center", marginBottom: "24px", cursor: "pointer" },
|
||||
checkbox: { width: "18px", height: "18px", marginRight: "8px", accentColor: "#07c160", cursor: "pointer" },
|
||||
agreement: { fontSize: "14px", color: "#666", lineHeight: "1.5" },
|
||||
link: { color: "#07c160", textDecoration: "none" },
|
||||
loginBtn: { width: "100%", height: "48px", backgroundColor: "#07c160", color: "#fff", fontSize: "17px", fontWeight: "500", border: "none", borderRadius: "8px", cursor: "pointer", marginBottom: "32px" },
|
||||
loginBtnDisabled: { width: "100%", height: "48px", backgroundColor: "#b0b0b0", color: "#fff", fontSize: "17px", fontWeight: "500", border: "none", borderRadius: "8px", cursor: "not-allowed", marginBottom: "32px" },
|
||||
divider: { display: "flex", alignItems: "center", width: "100%", maxWidth: "340px", marginBottom: "24px" },
|
||||
dividerLine: { flex: 1, height: "1px", backgroundColor: "#e5e5e5" },
|
||||
dividerText: { padding: "0 16px", fontSize: "14px", color: "#999" },
|
||||
phoneLogin: { display: "flex", flexDirection: "column", alignItems: "center" },
|
||||
iconLabel: { fontSize: "14px", color: "#999", marginTop: "8px" },
|
||||
iconBtn: { width: "48px", height: "48px", borderRadius: "50%", backgroundColor: "#fff", border: "1px solid #e5e5e5", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: "24px" },
|
||||
workbenchPage: { 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" },
|
||||
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" }
|
||||
};
|
||||
|
||||
if (page === "login") {
|
||||
return React.createElement("div", { style: styles.loginPage },
|
||||
React.createElement("style", null, "input::placeholder{color:#999;opacity:1;}"),
|
||||
React.createElement("div", { style: styles.logo }, "羚牛氢能"),
|
||||
React.createElement("h1", { style: styles.title }, "数字化资产ONE-OS运管平台"),
|
||||
React.createElement("div", { style: styles.form },
|
||||
React.createElement("div", { style: styles.inputGroup },
|
||||
React.createElement("input", { style: styles.input, type: "text", placeholder: "请输入账号信息", value: account, onChange: function (e) { setAccount(e.target.value); } })
|
||||
),
|
||||
React.createElement("div", { style: styles.inputGroup },
|
||||
React.createElement("input", { style: styles.input, type: "password", placeholder: "请输入密码", value: password, onChange: function (e) { setPassword(e.target.value); } })
|
||||
),
|
||||
React.createElement("label", { style: styles.checkboxRow },
|
||||
React.createElement("input", { style: styles.checkbox, type: "checkbox", checked: agreed, onChange: function (e) { setAgreed(e.target.checked); } }),
|
||||
React.createElement("span", { style: styles.agreement },
|
||||
"阅读并同意",
|
||||
React.createElement("a", { href: "#", style: styles.link }, "《用户服务协议》"),
|
||||
"和",
|
||||
React.createElement("a", { href: "#", style: styles.link }, "《隐私政策》")
|
||||
)
|
||||
),
|
||||
React.createElement("button", { style: agreed ? styles.loginBtn : styles.loginBtnDisabled, onClick: handleLogin, disabled: !agreed }, "登录")
|
||||
),
|
||||
React.createElement("div", { style: styles.divider },
|
||||
React.createElement("div", { style: styles.dividerLine }),
|
||||
React.createElement("span", { style: styles.dividerText }, "其他登录方式"),
|
||||
React.createElement("div", { style: styles.dividerLine })
|
||||
),
|
||||
React.createElement("div", { style: styles.phoneLogin },
|
||||
React.createElement("div", { style: styles.iconBtn, title: "手机号登录" }, "\uD83D\uDCF1"),
|
||||
React.createElement("span", { style: styles.iconLabel }, "授权登录")
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return React.createElement("div", { style: styles.workbenchPage },
|
||||
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 () { setActiveTab(item.key); } },
|
||||
React.createElement("div", { style: styles.navIcon }, item.icon),
|
||||
React.createElement("div", { style: textStyle }, item.text)
|
||||
);
|
||||
})
|
||||
)
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user