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

20260817172952

Browse Source
This commit is contained in:
oneao committed 2026-08-17 17:29:54 +08:00
1 parent 4ef678ba65
commit 5bbd3c88b4
1865 files changed
+2261 -901
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/fms-vue/layout-demo.html
+243
View File
@@ -0,0 +1,243 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FMS 布局 Demo v3 - 一体化平面</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
fms: {
bg: 'var(--fms-bg)',
card: 'var(--fms-card)',
sidebar: 'var(--fms-sidebar)',
secondary: 'var(--fms-secondary)',
'secondary-hover': 'var(--fms-secondary-hover)',
border: 'var(--fms-border)',
text: 'var(--fms-text)',
'text-secondary': 'var(--fms-text-secondary)',
primary: 'var(--fms-primary)',
'primary-text': 'var(--fms-primary-text)',
},
},
boxShadow: {
card: 'var(--fms-shadow)',
pop: '0 4px 16px rgba(0,0,0,0.08)',
},
borderRadius: {
card: '12px',
control: '8px',
},
},
},
}
</script>
<style>
:root {
--fms-bg: #f4f4f5;
--fms-card: #ffffff;
--fms-sidebar: #f4f4f5;
--fms-secondary: #f4f4f5;
--fms-secondary-hover: #e9e9ec;
--fms-border: #e4e4e7;
--fms-text: #18181b;
--fms-text-secondary: #71717a;
--fms-primary: #2563eb;
--fms-primary-text: #ffffff;
--fms-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.dark {
--fms-bg: #09090b;
--fms-card: #18181b;
--fms-sidebar: #131316;
--fms-secondary: #27272a;
--fms-secondary-hover: #3f3f46;
--fms-border: #3f3f46;
--fms-text: #fafafa;
--fms-text-secondary: #a1a1aa;
--fms-primary: #3b82f6;
--fms-primary-text: #ffffff;
--fms-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* 侧栏菜单项 */
.nav-item {
display: flex; align-items: center; gap: 10px;
height: 34px; padding: 0 10px;
border-radius: 8px; color: var(--fms-text-secondary);
font-size: 13.5px; cursor: pointer; transition: background .15s;
}
.nav-item:hover { background: var(--fms-secondary-hover); color: var(--fms-text); }
.nav-item.active { background: var(--fms-card); color: var(--fms-text); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
/* 胶囊式页签：圆角块，无边框；激活项浅底+主色，不靠分割线 */
.pill {
display: inline-flex; align-items: center;
height: 28px; padding: 0 10px;
border-radius: 7px;
font-size: 13px; color: var(--fms-text-secondary);
cursor: pointer; white-space: nowrap;
transition: background .15s, color .15s;
}
.pill:hover { background: var(--fms-secondary); color: var(--fms-text); }
.pill.active { background: var(--fms-secondary); color: var(--fms-primary); font-weight: 500; }
.pill .x { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; margin-left: 6px; margin-right: -4px; color: var(--fms-text-secondary); }
.pill .x:hover { background: var(--fms-secondary-hover); color: var(--fms-text); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="text-fms-text antialiased">
<div class="flex h-screen overflow-hidden">
<!-- ===== 侧栏：灰底，无色差边框 ===== -->
<aside class="flex w-[220px] shrink-0 flex-col bg-fms-sidebar">
<!-- 团队 -->
<div class="flex items-center gap-2 px-3 py-3">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-[10px] bg-fms-primary text-[15px] font-bold text-fms-primary-text">F</div>
<div class="min-w-0 flex-1">
<div class="truncate text-[14px] font-semibold leading-5">财务管理系统</div>
<div class="text-xs text-fms-text-secondary leading-4">企业版</div>
</div>
</div>
<!-- 菜单 -->
<div class="flex-1 overflow-y-auto px-2 pb-3 pt-1 space-y-0.5">
<div class="px-2 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wider text-fms-text-secondary/70">工作台</div>
<div class="nav-item active">🏠 工作台</div>
<div class="px-2 pb-1 pt-3 text-[11px] font-medium uppercase tracking-wider text-fms-text-secondary/70">业务</div>
<div class="nav-item">📄 订单管理</div>
<div class="nav-item">👥 客户管理</div>
<div class="nav-item">💰 应收账款</div>
<div class="nav-item">📦 库存管理</div>
<div class="px-2 pb-1 pt-3 text-[11px] font-medium uppercase tracking-wider text-fms-text-secondary/70">系统</div>
<div class="nav-item">⚙️ 系统设置</div>
<div class="nav-item">🔐 权限管理</div>
</div>
<!-- 底部用户 -->
<div class="border-t border-fms-border px-3 py-3">
<div class="flex items-center gap-2 rounded-control px-1.5 py-1 hover:bg-fms-secondary-hover cursor-pointer">
<span class="flex h-8 w-8 items-center justify-center rounded-lg bg-fms-primary/15 text-sm font-semibold text-fms-primary">张</span>
<div class="min-w-0 flex-1 leading-tight">
<div class="truncate text-[13px] font-medium">张三</div>
<div class="truncate text-xs text-fms-text-secondary">admin@fms.com</div>
</div>
</div>
</div>
</aside>
<!-- ===== 主区：一整块平面，无卡片、无边框 ===== -->
<div class="flex min-w-0 flex-1 flex-col bg-fms-card">
<!-- topbar：白底通栏，无底边框（与 tabs 一体） -->
<header class="flex h-12 shrink-0 items-center gap-2 px-3">
<button class="flex h-8 w-8 items-center justify-center rounded-control text-fms-text-secondary hover:bg-fms-secondary hover:text-fms-text">☰</button>
<span class="ml-1 text-[13px] text-fms-text-secondary">财务管理系统</span>
<div class="ml-auto flex items-center gap-0.5">
<button class="flex h-8 w-8 items-center justify-center rounded-control text-fms-text-secondary hover:bg-fms-secondary hover:text-fms-text" title="语言">🌐</button>
<button class="flex h-8 w-8 items-center justify-center rounded-control text-fms-text-secondary hover:bg-fms-secondary hover:text-fms-text" title="主题">🎨</button>
<button class="flex h-8 w-8 items-center justify-center rounded-control text-fms-text-secondary hover:bg-fms-secondary hover:text-fms-text" title="深浅色">◐</button>
<button class="flex h-8 w-8 items-center justify-center rounded-control text-fms-text-secondary hover:bg-fms-secondary hover:text-fms-text" title="通知">🔔</button>
<span class="mx-2 h-4 w-px bg-fms-border"></span>
<button class="flex items-center gap-2 rounded-control px-1.5 py-1 hover:bg-fms-secondary-hover">
<span class="flex h-7 w-7 items-center justify-center rounded-lg bg-fms-primary/15 text-sm font-semibold text-fms-primary">张</span>
</button>
</div>
</header>
<!-- tabs：胶囊式，白底一体，无边框；激活项浅灰底+主色字 -->
<div class="flex h-11 shrink-0 items-center gap-1.5 px-3">
<div class="no-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
<span class="pill active">工作台</span>
<span class="pill">订单管理 <span class="x">×</span></span>
<span class="pill">客户列表 <span class="x">×</span></span>
<span class="pill">财务报表 <span class="x">×</span></span>
</div>
</div>
<!-- content：直接铺开 -->
<main class="flex-1 overflow-y-auto px-6 py-5">
<!-- 页面标题 -->
<div class="flex items-center justify-between">
<h1 class="text-lg font-semibold">工作台</h1>
<div class="flex items-center gap-2">
<button class="flex h-8 items-center gap-1.5 rounded-control bg-fms-secondary px-3 text-[13px] hover:bg-fms-secondary-hover">📥 导出</button>
<button class="flex h-8 items-center gap-1.5 rounded-control bg-fms-primary px-3 text-[13px] font-medium text-fms-primary-text hover:opacity-90">＋ 新建</button>
</div>
</div>
<p class="mt-1 text-[13px] text-fms-text-secondary">早上好，张三。以下是最新的业务概览。</p>
<!-- 统计（内容自身的轻卡片，无边框） -->
<div class="mt-5 grid grid-cols-2 gap-3 md:grid-cols-4">
<div class="rounded-card bg-fms-secondary p-4">
<div class="text-xs text-fms-text-secondary">本月订单</div>
<div class="mt-1.5 text-2xl font-semibold">1,286</div>
<div class="mt-1 text-xs text-emerald-600">↑ 12.4%</div>
</div>
<div class="rounded-card bg-fms-secondary p-4">
<div class="text-xs text-fms-text-secondary">待审批</div>
<div class="mt-1.5 text-2xl font-semibold">23</div>
<div class="mt-1 text-xs text-amber-600">需处理</div>
</div>
<div class="rounded-card bg-fms-secondary p-4">
<div class="text-xs text-fms-text-secondary">本月回款</div>
<div class="mt-1.5 text-2xl font-semibold">¥86.5万</div>
<div class="mt-1 text-xs text-emerald-600">↑ 8.2%</div>
</div>
<div class="rounded-card bg-fms-secondary p-4">
<div class="text-xs text-fms-text-secondary">逾期应收</div>
<div class="mt-1.5 text-2xl font-semibold">¥12.3万</div>
<div class="mt-1 text-xs text-red-600">↓ 关注</div>
</div>
</div>
<!-- 简单表格（内容行线，非布局分割） -->
<div class="mt-6">
<div class="text-[14px] font-medium">最近订单</div>
<table class="mt-3 w-full text-left text-[13px]">
<thead>
<tr class="text-xs text-fms-text-secondary border-b border-fms-border">
<th class="py-2 pr-3 font-medium">订单号</th>
<th class="py-2 pr-3 font-medium">客户</th>
<th class="py-2 pr-3 font-medium">金额</th>
<th class="py-2 pr-3 font-medium">状态</th>
<th class="py-2 font-medium">日期</th>
</tr>
</thead>
<tbody class="text-fms-text">
<tr class="border-b border-fms-border/60 hover:bg-fms-secondary/50">
<td class="py-2.5 pr-3">SO-2026-0812-01</td>
<td class="py-2.5 pr-3">华信科技</td>
<td class="py-2.5 pr-3">¥12,800</td>
<td class="py-2.5 pr-3"><span class="rounded-md bg-emerald-500/10 px-2 py-0.5 text-xs text-emerald-600">已完成</span></td>
<td class="py-2.5">2026-08-12</td>
</tr>
<tr class="border-b border-fms-border/60 hover:bg-fms-secondary/50">
<td class="py-2.5 pr-3">SO-2026-0811-03</td>
<td class="py-2.5 pr-3">远大集团</td>
<td class="py-2.5 pr-3">¥8,450</td>
<td class="py-2.5 pr-3"><span class="rounded-md bg-blue-500/10 px-2 py-0.5 text-xs text-blue-600">审批中</span></td>
<td class="py-2.5">2026-08-11</td>
</tr>
<tr class="border-b border-fms-border/60 hover:bg-fms-secondary/50">
<td class="py-2.5 pr-3">SO-2026-0810-07</td>
<td class="py-2.5 pr-3">启明电子</td>
<td class="py-2.5 pr-3">¥32,100</td>
<td class="py-2.5 pr-3"><span class="rounded-md bg-amber-500/10 px-2 py-0.5 text-xs text-amber-600">待付款</span></td>
<td class="py-2.5">2026-08-10</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
</body>
</html>