oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

y

Browse Source
This commit is contained in:
oneao committed 2026-04-26 21:00:34 +08:00
1 parent 04491e14a3
commit 85dfdd200e
11 files changed
+795 -438
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/app/app-rn4/text.html
+227 -235
View File
@@ -1,272 +1,264 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>家庭系统 Pro Demo</title>
<meta charset="UTF-8" />
<title>附件组件（最终版）</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
margin: 0;
font-family: Arial;
background: #f5f6f8;
}
<style>
.hidden {
display: none;
}
/* grid */
.grid {
padding: 12px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.toast {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px 14px;
border-radius: 10px;
font-size: 12px;
}
</style>
/* card */
.card {
position: relative;
background: #fff;
border-radius: 10px;
border: 1px solid transparent;
display: flex;
flex-direction: column;
cursor: pointer;
}
.card:hover {
border-color: #1677ff;
}
.card.selected {
background: #eaf2ff;
border-color: #1677ff;
}
/* checkbox（左上） */
.check {
position: absolute;
top: 6px;
left: 6px;
z-index: 5;
}
/* 状态（右上） */
.status {
position: absolute;
top: 6px;
right: 6px;
background: #ff4d4f;
color: #fff;
font-size: 10px;
padding: 2px 5px;
border-radius: 3px;
}
/* thumb */
.thumb {
height: 90px;
background: #f0f2f5;
display:flex;
align-items:center;
justify-content:center;
}
.thumb img {
width:100%;
height:100%;
object-fit:cover;
}
/* info */
.info {
padding: 8px;
}
.name {
font-size: 13px;
}
.meta {
font-size: 12px;
color: #888;
}
/* actions */
.actions {
display: flex;
border-top: 1px solid #eee;
}
.actions button {
flex: 1;
border: none;
background: #fff;
padding: 6px 0;
cursor: pointer;
font-size: 12px;
}
.actions button:hover {
background: #f5f6f8;
}
.danger {
color: #ff4d4f;
}
.more-menu {
position: absolute;
bottom: 35px;
right: 6px;
background: #fff;
border: 1px solid #eee;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: none;
}
.more-menu div {
padding: 6px 10px;
cursor: pointer;
}
.more-menu div:hover {
background: #f5f6f8;
}
</style>
</head>
<body class="bg-gray-100">
<body>
<div id="app" class="max-w-md mx-auto min-h-screen flex flex-col">
<div class="grid" id="grid"></div>
<!-- ================= LOGIN ================= -->
<div id="login" class="flex-1 flex items-center justify-center p-6">
<div class="bg-white p-6 rounded-2xl w-full shadow">
<script>
const files = [
{ id: 1, name: "合同.pdf", type: "doc", size: "800KB", date: "2026-04-25" },
{ id: 2, name: "设计图.png", type: "img", url: "https://picsum.photos/400/300?1", size: "1.2MB", date: "2026-04-24", status: "未上传" }
];
<h1 class="text-xl font-bold mb-1">欢迎回来</h1>
<p class="text-sm text-gray-400 mb-4">家庭系统登录</p>
let selected = new Set();
<input id="username" class="w-full border p-2 rounded mb-3" placeholder="请输入名字">
function render() {
const grid = document.getElementById("grid");
grid.innerHTML = "";
<button onclick="login()" class="w-full bg-blue-500 text-white py-2 rounded">
登录
</button>
files.forEach(f => {
const card = document.createElement("div");
card.className = "card" + (selected.has(f.id) ? " selected" : "");
</div>
</div>
card.onclick = () => toggleSelect(f.id);
<!-- ================= FAMILY ONBOARD ================= -->
<div id="onboard" class="hidden flex-1 p-6">
/* checkbox */
const check = document.createElement("input");
check.type = "checkbox";
check.className = "check";
check.checked = selected.has(f.id);
<div class="bg-white p-6 rounded-2xl shadow">
check.onclick = (e) => {
e.stopPropagation();
toggleSelect(f.id);
};
<h1 class="text-lg font-bold">创建你的家庭</h1>
<p class="text-sm text-gray-400 mb-4">你还没有加入任何家庭</p>
<input id="familyName" class="w-full border p-2 rounded mb-3" placeholder="家庭名称">
<button onclick="createFamily()" class="w-full bg-green-500 text-white py-2 rounded mb-2">
创建家庭
</button>
<button onclick="joinFamilyMock()" class="w-full bg-gray-200 py-2 rounded">
加入示例家庭
</button>
</div>
</div>
<!-- ================= MAIN ================= -->
<div id="main" class="hidden flex-1 flex flex-col">
<!-- CONTENT -->
<div class="flex-1 p-4 space-y-3">
<!-- 家庭卡 -->
<div class="bg-white p-4 rounded-2xl shadow">
<div class="flex justify-between">
<div>
<h2 class="font-bold text-lg">🏠 <span id="familyTitle"></span></h2>
<p class="text-xs text-gray-400">邀请码：ABC123 · 3人</p>
</div>
<button onclick="openSettings()" class="text-xs bg-gray-100 px-3 py-1 rounded-lg">
设置
</button>
</div>
</div>
<!-- 成员 -->
<div class="bg-white p-4 rounded-2xl shadow">
<div class="flex justify-between mb-3">
<div class="font-semibold">家庭成员</div>
<button class="text-blue-500 text-sm">邀请</button>
</div>
<div class="flex gap-4">
<div class="text-center">
<div class="w-10 h-10 bg-blue-200 rounded-full"></div>
<div class="text-xs mt-1">我</div>
</div>
<div class="text-center">
<div class="w-10 h-10 bg-pink-200 rounded-full"></div>
<div class="text-xs mt-1">妈妈</div>
</div>
<div class="text-center">
<div class="w-10 h-10 bg-yellow-200 rounded-full"></div>
<div class="text-xs mt-1">爸爸</div>
</div>
</div>
</div>
<!-- 子应用 -->
<div class="bg-white p-4 rounded-2xl shadow">
<div class="font-semibold mb-3">家庭工具</div>
<div class="grid grid-cols-3 gap-3">
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('记账')">
📒<div class="text-xs mt-1">记账</div>
</div>
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('清单')">
🛒<div class="text-xs mt-1">清单</div>
</div>
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('日程')">
📅<div class="text-xs mt-1">日程</div>
</div>
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('物品')">
📦<div class="text-xs mt-1">物品</div>
</div>
<div class="bg-gray-50 p-3 rounded-xl text-center" onclick="openApp('待办')">
📝<div class="text-xs mt-1">待办</div>
</div>
<div class="bg-gray-100 p-3 rounded-xl text-center text-gray-400">
➕<div class="text-xs mt-1">添加</div>
</div>
</div>
</div>
</div>
<!-- TABBAR -->
<div class="flex border-t bg-white">
<button class="flex-1 py-2" onclick="switchTab('home')">🏠</button>
<button class="flex-1 py-2" onclick="switchTab('apps')">🧩</button>
<button class="flex-1 py-2" onclick="switchTab('me')">👤</button>
</div>
</div>
<!-- ================= SETTINGS ================= -->
<div id="settings" class="hidden flex-1 p-4">
<div class="bg-white p-4 rounded-2xl shadow">
<h2 class="font-bold mb-3">家庭设置</h2>
<div class="space-y-2 text-sm">
<div class="p-2 bg-gray-100 rounded">修改家庭名称</div>
<div class="p-2 bg-gray-100 rounded">成员管理</div>
<div class="p-2 bg-gray-100 rounded text-red-500">退出家庭</div>
</div>
<button onclick="backHome()" class="mt-4 w-full bg-blue-500 text-white py-2 rounded">
返回
</button>
</div>
</div>
</div>
<!-- toast -->
<div id="toast" class="toast hidden"></div>
<script>
let state = {
user: null,
family: null
/* 状态 */
if (f.status) {
const st = document.createElement("div");
st.className = "status";
st.innerText = f.status;
card.appendChild(st);
}
function show(id) {
document.querySelectorAll('#app > div').forEach(v => v.classList.add('hidden'));
document.getElementById(id).classList.remove('hidden');
/* thumb */
const thumb = document.createElement("div");
thumb.className = "thumb";
if (f.type === "img") {
thumb.innerHTML = `<img src="${f.url}">`;
} else {
thumb.innerText = "📄";
}
function toast(msg) {
const t = document.getElementById('toast');
t.innerText = msg;
t.classList.remove('hidden');
/* info */
const info = document.createElement("div");
info.className = "info";
info.innerHTML = `
<div class="name">${f.name}</div>
<div class="meta">${f.date} · ${f.size}</div>
`;
setTimeout(() => {
t.classList.add('hidden');
}, 1500);
}
/* actions */
const actions = document.createElement("div");
actions.className = "actions";
/* ========== login ========== */
function login() {
const name = document.getElementById('username').value;
if (!name) return toast('请输入用户名');
const btnView = createBtn("预览", () => preview(f));
const btnDown = createBtn("下载", () => alert("下载 " + f.name));
const btnDelete = createBtn("删除", () => deleteFile(f.id), "danger");
state.user = name;
show('onboard');
}
/* 更多 */
const btnMore = document.createElement("button");
btnMore.innerText = "⋯";
/* ========== family ========== */
function createFamily() {
const name = document.getElementById('familyName').value;
if (!name) return toast('请输入家庭名称');
const menu = document.createElement("div");
menu.className = "more-menu";
state.family = name;
enterApp();
}
menu.innerHTML = `
<div>重命名</div>
<div>查看详情</div>
`;
function joinFamilyMock() {
state.family = "幸福家庭";
enterApp();
}
btnMore.onclick = (e) => {
e.stopPropagation();
menu.style.display = menu.style.display === "block" ? "none" : "block";
};
function enterApp() {
document.getElementById('familyTitle').innerText = state.family;
show('main');
switchTab('home');
}
document.addEventListener("click", () => {
menu.style.display = "none";
});
/* ========== tab ========== */
function switchTab(tab) {
document.querySelectorAll('#main > div:nth-child(1) > div').forEach(v => {
v.style.display = 'none';
});
actions.append(btnView, btnDown, btnDelete, btnMore);
toast("切换：" + tab);
}
card.append(check, thumb, info, actions, menu);
grid.appendChild(card);
});
}
function openApp(name) {
toast("进入：" + name);
}
function createBtn(text, fn, cls="") {
const btn = document.createElement("button");
btn.innerText = text;
btn.className = cls;
btn.onclick = (e) => {
e.stopPropagation();
fn();
};
return btn;
}
/* ========== settings ========== */
function openSettings() {
show('settings');
}
function toggleSelect(id) {
if (selected.has(id)) selected.delete(id);
else selected.add(id);
render();
}
function backHome() {
show('main');
}
function preview(f) {
alert("预览 " + f.name);
}
</script>
function deleteFile(id) {
if (!confirm("确定删除？")) return;
const i = files.findIndex(f => f.id === id);
if (i > -1) files.splice(i, 1);
selected.delete(id);
render();
}
render();
</script>
</body>
</html>