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)
|
||||
);
|
||||
})
|
||||
)
|
||||
);
|
||||
};
|
||||
286
小程序/LoginPage.jsx
Normal file
286
小程序/LoginPage.jsx
Normal file
@@ -0,0 +1,286 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
const LoginPage = function (props) {
|
||||
var onLoginSuccess = (props && props.onLoginSuccess) ? props.onLoginSuccess : null;
|
||||
var _React$useState = React.useState("");
|
||||
var account = _React$useState[0];
|
||||
var setAccount = _React$useState[1];
|
||||
|
||||
var _React$useState2 = React.useState("");
|
||||
var password = _React$useState2[0];
|
||||
var setPassword = _React$useState2[1];
|
||||
|
||||
var _React$useState3 = React.useState(false);
|
||||
var agreed = _React$useState3[0];
|
||||
var setAgreed = _React$useState3[1];
|
||||
|
||||
var handleAccountChange = function (e) {
|
||||
setAccount(e.target.value);
|
||||
};
|
||||
|
||||
var handlePasswordChange = function (e) {
|
||||
setPassword(e.target.value);
|
||||
};
|
||||
|
||||
var handleAgreedChange = function (e) {
|
||||
setAgreed(e.target.checked);
|
||||
};
|
||||
|
||||
var handleLogin = function () {
|
||||
if (!agreed) {
|
||||
alert("请先阅读并同意用户服务协议和隐私政策");
|
||||
return;
|
||||
}
|
||||
if (onLoginSuccess) {
|
||||
onLoginSuccess();
|
||||
} else {
|
||||
alert("登录功能演示");
|
||||
}
|
||||
};
|
||||
|
||||
var styles = {
|
||||
page: {
|
||||
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"
|
||||
},
|
||||
inputFocus: {
|
||||
borderColor: "#07c160"
|
||||
},
|
||||
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"
|
||||
}
|
||||
};
|
||||
|
||||
return React.createElement(
|
||||
"div",
|
||||
{ style: styles.page },
|
||||
React.createElement("style", null, "input::placeholder{color:#999;opacity:1;}"),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ style: styles.logo },
|
||||
"羚牛氢能"
|
||||
),
|
||||
React.createElement(
|
||||
"h1",
|
||||
{ style: styles.title },
|
||||
"\u6570\u5B57\u5316\u8D44\u4EA7ONE-OS\u8FD0\u7BA1\u5E73\u53F0"
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ style: styles.form },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ style: styles.inputGroup },
|
||||
React.createElement("input", {
|
||||
style: styles.input,
|
||||
type: "text",
|
||||
placeholder: "请输入账号信息",
|
||||
value: account,
|
||||
onChange: handleAccountChange
|
||||
})
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ style: styles.inputGroup },
|
||||
React.createElement("input", {
|
||||
style: styles.input,
|
||||
type: "password",
|
||||
placeholder: "请输入密码",
|
||||
value: password,
|
||||
onChange: handlePasswordChange
|
||||
})
|
||||
),
|
||||
React.createElement(
|
||||
"label",
|
||||
{ style: styles.checkboxRow },
|
||||
React.createElement("input", {
|
||||
style: styles.checkbox,
|
||||
type: "checkbox",
|
||||
checked: agreed,
|
||||
onChange: handleAgreedChange
|
||||
}),
|
||||
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
|
||||
},
|
||||
"\u767B\u5F55"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ style: styles.divider },
|
||||
React.createElement("div", { style: styles.dividerLine }),
|
||||
React.createElement(
|
||||
"span",
|
||||
{ style: styles.dividerText },
|
||||
"\u5176\u4ED6\u767B\u5F55\u65B9\u5F0F"
|
||||
),
|
||||
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 },
|
||||
"授权登录"
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// Axhub 要求必须定义 Component 变量
|
||||
var Component = LoginPage;
|
||||
232
小程序/WorkbenchPage.jsx
Normal file
232
小程序/WorkbenchPage.jsx
Normal file
@@ -0,0 +1,232 @@
|
||||
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;
|
||||
20
小程序/login-preview.html
Normal file
20
小程序/login-preview.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ONE-OS运管平台</title>
|
||||
<link rel="stylesheet" href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.6.22/weui.min.css">
|
||||
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
||||
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="text/babel" src="App.jsx"></script>
|
||||
<script type="text/babel">
|
||||
var root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(React.createElement(Component));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
20
小程序/workbench-preview.html
Normal file
20
小程序/workbench-preview.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>工作台 - 数字化资产ONE-OS运管平台</title>
|
||||
<link rel="stylesheet" href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.6.22/weui.min.css">
|
||||
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
||||
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="text/babel" src="WorkbenchPage.jsx"></script>
|
||||
<script type="text/babel">
|
||||
var root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(React.createElement(WorkbenchPage));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user