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

20260819173221

Browse Source
This commit is contained in:
oneao committed 2026-08-19 17:32:25 +08:00
1 parent 1ffc8e1ac9
commit a0a4273f4c
326 files changed
+301646 -2314
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/fms-vue/index.html
+176 -72
View File
@@ -5,6 +5,18 @@
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FMS - 数字化管理系统</title>
<script>
// 首帧前同步应用的暗色偏好（pinia-plugin-persistedstate 以 store id 持久化到 localStorage），
// 让加载屏与用户选择的主题一致，避免暗色用户先看到浅色闪屏
try {
var persisted = JSON.parse(localStorage.getItem('app') || '{}')
if (persisted && persisted.darkMode) {
document.documentElement.classList.add('boot-dark')
}
} catch (e) {
/* 忽略：无持久化数据时按浅色默认渲染 */
}
</script>
<style>
* {
box-sizing: border-box;
@@ -17,11 +29,13 @@
height: 100%;
}
/* ===== 开屏加载屏（对齐 cool-admin：深色底 + 旋转 spinner + 文字淡入，全合成层友好） ===== */
/* ===== 开屏加载屏 =====
配色对齐 src/theme/tokens.css 浅色主题（默认）：背景 #f5f6f8 / 文字 #1f2329 /
次级文字 #86909c / 主色 #0f172b / 边框 #e5e6eb；
深色（html.boot-dark，由上方脚本按持久化偏好写入）对齐 .dark 覆盖值。 */
.app-boot {
display: flex;
flex-direction: column;
background-color: #2f3447;
background-color: #f5f6f8;
position: fixed;
left: 0;
top: 0;
@@ -36,72 +50,95 @@
"Microsoft YaHei", sans-serif;
}
.boot-dark .app-boot {
background-color: #0f1115;
}
.app-boot--hide {
opacity: 0;
}
/* 加载失败态：浅红渐变背景 + 错误提示；错误时需要可交互（重试按钮可点击） */
.app-boot--error {
background: radial-gradient(circle at 50% 50%, #fef2f2 0%, #fee2e2 100%);
color: #b91c1c;
pointer-events: auto;
}
.boot-dark .app-boot--error {
background: radial-gradient(circle at 50% 50%, #2a1215 0%, #1c0e10 100%);
color: #f87171;
}
.app-boot__container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
flex-grow: 1;
user-select: none;
-webkit-user-select: none;
flex-grow: 1;
}
/* 品牌区：对齐登录页 login-logo 的版式（48px 圆角方块 + 主色底 + 白图标） */
.app-boot__logo {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 16px;
border-radius: 12px;
background: #0f172b;
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.app-boot__logo svg {
width: 26px;
height: 26px;
}
.app-boot__name {
font-size: 30px;
color: #fff;
letter-spacing: 5px;
font-weight: bold;
margin-bottom: 24px;
min-height: 50px;
white-space: nowrap;
line-height: 1.2;
font-size: 24px;
font-weight: 600;
line-height: 32px;
color: #1f2329;
}
.boot-dark .app-boot__name {
color: #e6e8eb;
}
.app-boot__sub-title {
color: #ababab;
font-size: 12px;
min-height: 20px;
margin-top: 16px;
margin-top: 4px;
font-size: 14px;
color: #86909c;
}
.app-boot__name,
.app-boot__title,
.app-boot__sub-title {
animation: app-boot-fade 0.5s ease-in;
.boot-dark .app-boot__sub-title,
.boot-dark .app-boot__hint {
color: #9aa3af;
}
@keyframes app-boot-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 旋转加载圈：transform 旋转 + color 渐变，均合成/轻量，不掉帧 */
/* 加载圈：浅色轨道 + 主色弧，旋转为合成属性，不掉帧 */
.app-boot__loading {
height: 44px;
width: 44px;
border-radius: 30px;
border: 7px solid currentColor;
border-bottom-color: #2f3447;
position: relative;
color: #689cc5;
transform: rotate(0deg);
width: 22px;
height: 22px;
margin-top: 32px;
border-radius: 50%;
border: 2px solid #e5e6eb;
border-top-color: #0f172b;
opacity: 0;
animation:
app-boot-spin 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67),
app-boot-color 2s infinite ease-in;
app-boot-fade 0.45s ease-out 0.15s forwards,
app-boot-spin 0.9s linear infinite;
}
.boot-dark .app-boot__loading {
border-color: #2a2f3a;
border-top-color: #e6e8eb;
}
@keyframes app-boot-spin {
@@ -113,46 +150,95 @@
}
}
.app-boot__loading::after,
.app-boot__loading::before {
content: '';
display: inline-block;
position: absolute;
bottom: -2px;
height: 7px;
width: 7px;
border-radius: 10px;
background-color: currentColor;
.app-boot__hint {
margin-top: 12px;
font-size: 12px;
color: #86909c;
}
.app-boot__loading::after {
left: -1px;
/* 内容入场：轻微上浮 + 淡入，逐项错开，避免生硬 */
.app-boot__logo,
.app-boot__name,
.app-boot__sub-title,
.app-boot__hint {
opacity: 0;
animation: app-boot-rise 0.45s ease-out forwards;
}
.app-boot__loading::before {
right: -1px;
.app-boot__name {
animation-delay: 0.05s;
}
@keyframes app-boot-color {
0% {
color: #689cc5;
.app-boot__sub-title {
animation-delay: 0.1s;
}
.app-boot__hint {
animation-delay: 0.2s;
}
@keyframes app-boot-rise {
from {
opacity: 0;
transform: translateY(6px);
}
25% {
color: #b3b7e2;
to {
opacity: 1;
transform: translateY(0);
}
50% {
color: #93dbe9;
}
@keyframes app-boot-fade {
from {
opacity: 0;
}
75% {
color: #abbd81;
}
100% {
color: #689cc5;
to {
opacity: 1;
}
}
/* 错误态：隐藏正常加载内容，展示提示与重试按钮 */
.app-boot--error .app-boot__logo,
.app-boot--error .app-boot__name,
.app-boot--error .app-boot__sub-title,
.app-boot--error .app-boot__loading,
.app-boot--error .app-boot__hint {
display: none;
}
.app-boot__message {
font-size: 14px;
font-weight: 600;
}
.app-boot__retry {
margin-top: 16px;
padding: 6px 18px;
border: 1px solid currentColor;
border-radius: 6px;
background: transparent;
color: inherit;
font-size: 14px;
font-family: inherit;
cursor: pointer;
transition: background 150ms ease;
}
.app-boot__retry:hover {
background: rgba(185, 28, 28, 0.08);
}
.boot-dark .app-boot__retry:hover {
background: rgba(248, 113, 113, 0.1);
}
@media (prefers-reduced-motion: reduce) {
.app-boot__logo,
.app-boot__name,
.app-boot__sub-title,
.app-boot__hint,
.app-boot__loading {
opacity: 1;
animation: none;
}
}
@@ -167,7 +253,7 @@
const app = document.getElementById('app')
if (app) {
app.innerHTML =
'<div id="app-boot-error" class="app-boot app-boot--error" style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-family:sans-serif">' +
'<div id="app-boot-error" class="app-boot app-boot--error" style="position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-family:sans-serif">' +
'<div style="font-size:20px;font-weight:bold">加载失败</div>' +
'<div style="font-size:14px">请通过本地开发服务器访问（如 npm run dev），不要直接以 file:// 方式打开本文件。</div>' +
(e && e.message ? '<div style="font-size:12px;opacity:.7">' + e.message + '</div>' : '') +
@@ -177,11 +263,29 @@
</script>
</div>
<div id="app-boot" class="app-boot">
<div id="app-boot" class="app-boot" role="status" aria-busy="true">
<div class="app-boot__container">
<div class="app-boot__logo" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M7 2h10" />
<path d="M5 6h14" />
<rect width="18" height="12" x="3" y="10" rx="2" />
</svg>
</div>
<div class="app-boot__name">FMS</div>
<div class="app-boot__loading"></div>
<div class="app-boot__sub-title">正在加载，请稍候…</div>
<div class="app-boot__sub-title">数字化管理系统</div>
<div class="app-boot__loading" aria-hidden="true"></div>
<div class="app-boot__hint">正在加载，请稍候…</div>
<div class="app-boot__message" id="app-boot-message" hidden></div>
<button class="app-boot__retry" id="app-boot-retry" type="button" hidden>重新加载</button>
</div>
</div>