143 lines
3.7 KiB
HTML
143 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>分类共享交互演示</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; padding: 20px; }
|
|
h2 { margin-top: 20px; }
|
|
ul { list-style: none; padding-left: 0; }
|
|
li { padding: 5px 10px; margin: 3px 0; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
|
|
.system { background-color: #d0ebff; }
|
|
.family { background-color: #ffe5d0; }
|
|
.user { background-color: #d0ffd8; }
|
|
.hidden { display: none; }
|
|
button { margin-left: 5px; }
|
|
.container { display: flex; gap: 50px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>记账分类共享交互演示</h1>
|
|
|
|
<div class="container">
|
|
<div>
|
|
<h2>用户 A 视图</h2>
|
|
<ul id="userAList"></ul>
|
|
</div>
|
|
<div>
|
|
<h2>用户 B 视图</h2>
|
|
<ul id="userBList"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>操作区（模拟修改）</h2>
|
|
<p>选择用户修改系统分类或隐藏/重命名：</p>
|
|
<select id="selectUser">
|
|
<option value="A">用户 A</option>
|
|
<option value="B">用户 B</option>
|
|
</select>
|
|
|
|
<select id="selectCategory">
|
|
</select>
|
|
|
|
<input type="text" id="newName" placeholder="新名字">
|
|
<button id="updateName">修改名字</button>
|
|
<button id="hideCategory">隐藏分类</button>
|
|
|
|
<script>
|
|
// 系统默认分类
|
|
const systemCategories = [
|
|
{ id: 1, name: "餐饮" },
|
|
{ id: 2, name: "交通" },
|
|
{ id: 3, name: "购物" },
|
|
{ id: 4, name: "工资" }
|
|
];
|
|
|
|
// 家庭组 overlay（共享修改）
|
|
const familyCategoryStatus = {
|
|
// category_id: name
|
|
};
|
|
|
|
// 用户个人状态
|
|
const userStatus = {
|
|
A: { hidden: [], customName: {} },
|
|
B: { hidden: [], customName: {} }
|
|
};
|
|
|
|
// 填充选择分类下拉
|
|
const selectCategory = document.getElementById("selectCategory");
|
|
systemCategories.forEach(cat => {
|
|
const opt = document.createElement("option");
|
|
opt.value = cat.id;
|
|
opt.textContent = cat.name;
|
|
selectCategory.appendChild(opt);
|
|
});
|
|
|
|
// 渲染函数
|
|
function render() {
|
|
["A","B"].forEach(user => {
|
|
const listEl = document.getElementById(`user${user}List`);
|
|
listEl.innerHTML = "";
|
|
|
|
systemCategories.forEach(cat => {
|
|
let displayName = cat.name;
|
|
let cssClass = "system";
|
|
|
|
// 家庭共享修改覆盖
|
|
if (familyCategoryStatus[cat.id]) {
|
|
displayName = familyCategoryStatus[cat.id];
|
|
cssClass = "family";
|
|
}
|
|
|
|
// 用户个人自定义
|
|
if (userStatus[user].customName[cat.id]) {
|
|
displayName = userStatus[user].customName[cat.id];
|
|
cssClass = "user";
|
|
}
|
|
|
|
// 用户隐藏
|
|
if (userStatus[user].hidden.includes(cat.id)) {
|
|
cssClass += " hidden";
|
|
}
|
|
|
|
const li = document.createElement("li");
|
|
li.textContent = displayName;
|
|
li.className = cssClass;
|
|
listEl.appendChild(li);
|
|
});
|
|
});
|
|
}
|
|
|
|
render();
|
|
|
|
// 修改名字
|
|
document.getElementById("updateName").onclick = () => {
|
|
const user = document.getElementById("selectUser").value;
|
|
const catId = parseInt(selectCategory.value);
|
|
const newName = document.getElementById("newName").value.trim();
|
|
if(!newName) return alert("请输入新名字");
|
|
|
|
if(user === "A") {
|
|
// 用户 A 修改 → 家庭共享
|
|
familyCategoryStatus[catId] = newName;
|
|
} else {
|
|
// 用户 B 修改 → 家庭共享
|
|
familyCategoryStatus[catId] = newName;
|
|
}
|
|
render();
|
|
document.getElementById("newName").value = "";
|
|
};
|
|
|
|
// 隐藏分类
|
|
document.getElementById("hideCategory").onclick = () => {
|
|
const user = document.getElementById("selectUser").value;
|
|
const catId = parseInt(selectCategory.value);
|
|
userStatus[user].hidden.push(catId);
|
|
render();
|
|
};
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|