删除 小程序/App.jsx
This commit is contained in:
176
小程序/App.jsx
176
小程序/App.jsx
@@ -1,176 +0,0 @@
|
|||||||
// 【重要】必须使用 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