This commit is contained in:
oneao committed 2026-04-27 17:29:30 +08:00
commit 6f4190422a
9 files changed
+269 -258

No files matched your search

+1 -1
View File
@@ -23,7 +23,7 @@ export type AppListItem = HeaderItem | GroupItem;
export const SUB_APPS: SubAppItem[] = [
{
id: "/money/home",
id: "/finance/home",
title: "记账",
icon: IconAppFinance,
group: "J",
+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>
+40 -21
View File
@@ -1,5 +1,5 @@
(function ($) {
'use strict';
"use strict";
// =====================
@@ -236,7 +236,7 @@
// 生成唯一ID
// =====================
generateUniqueId: function () {
return 'file_' + Math.random().toString(36).slice(2) + Date.now();
return "file_" + Math.random().toString(36).slice(2) + Date.now();
},
// =====================
@@ -1146,10 +1146,10 @@
// 判断是否为图片文件
// =====================
isImageFile: function (filename) {
if (!filename || typeof filename !== 'string') return false;
if (!filename || typeof filename !== "string") return false;
const ext = filename.slice(filename.lastIndexOf('.') + 1).toLowerCase();
const imageExts = new Set(['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']);
const ext = filename.slice(filename.lastIndexOf(".") + 1).toLowerCase();
const imageExts = new Set(["jpg", "jpeg", "png", "gif", "bmp", "webp"]);
return imageExts.has(ext);
},
@@ -1159,38 +1159,50 @@
// =====================
formatFileSize: function (bytes) {
if (bytes === null || bytes === undefined || isNaN(bytes) || bytes <= 0) {
return '-';
return "-";
}
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
var sizes = ["B", "KB", "MB", "GB", "TB"];
var i = Math.floor(Math.log(bytes) / Math.log(k));
i = Math.max(0, Math.min(i, sizes.length - 1));
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
},
// =====================
// 格式化日期
// =====================
formatDate: function (dateStr) {
if (!dateStr) return '-';
if (!dateStr) return "-";
var date = new Date(dateStr);
if (isNaN(date.getTime())) {
return '-';
return "-";
}
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);
var hours = ('0' + date.getHours()).slice(-2);
var minutes = ('0' + date.getMinutes()).slice(-2);
var seconds = ('0' + date.getSeconds()).slice(-2);
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
var hours = ("0" + date.getHours()).slice(-2);
var minutes = ("0" + date.getMinutes()).slice(-2);
var seconds = ("0" + date.getSeconds()).slice(-2);
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
return (
year +
"-" +
month +
"-" +
day +
" " +
hours +
":" +
minutes +
":" +
seconds
);
},
// =====================
@@ -1201,7 +1213,7 @@
const downloadDisabled = !this.hasPermission(file, 'download');
const deleteDisabled = !this.hasPermission(file, 'delete');
let content = '';
let content = "";
if (this.isImageFile(file.name)) {
content = `
@@ -1228,6 +1240,12 @@
</div>
`;
// 预览状态(使用class标识)
const isPreview = this.previewFiles.has(file._id);
// 选中状态
const isSelected = this.selectedFiles.has(file._id);
return `
<div class="g3-file-item" data-id="${file.id}">
<input type="checkbox" class="g3-file-checkbox" />
@@ -1492,10 +1510,11 @@
$.fn.G3File = function (options) {
var args = Array.prototype.slice.call(arguments, 1);
var instance;
var methodResult; // 存储方法调用结果
this.each(function () {
var $this = $(this);
instance = $this.data('G3File');
instance = $this.data("G3File");
if (!instance) {
instance = new G3File(this, options);
@@ -1503,12 +1522,12 @@
} else if (typeof options === 'string') {
var method = options;
if (instance[method]) {
instance[method].apply(instance, args);
// 保存方法调用结果
methodResult = instance[method].apply(instance, args);
}
}
});
return instance || this;
};
})(jQuery);
})(jQuery);
+1 -1
View File
@@ -202,4 +202,4 @@
</body>
</html>
</html>