7579782daf
范围变更：原计划是给 Streamlit 界面做视觉美化，用户中途要求换新框架完全重新实现。 最终方案：Vue 3 + Vite + Tailwind CSS v4，本地 npm run build 出静态文件，NAS 不装 Node.js，由 fam-core 的 Flask 直接提供（send_from_directory），原来独立跑在 :8501 的 Streamlit 进程整个退休，前端和 API 合并到 fam-core 的 :8000 一个进程。 fam-core 新增只读 API(ui_api.py)：全部包装 db_layer.py 里已有的查询函数，没有 新写查询逻辑（除了下面两处真实缺口）。新增 static_app.py 做 SPA 静态文件服务 (assets 直出 + 非 API 路径回退 index.html 供前端路由接管)，app.py 注册顺序上 必须排在其他 /api/* 蓝图之后。 顺带补的两个功能缺口（旧 Streamlit 版本自己绕开 db_layer 写了裸 SQL 才有的功能， db_layer 本身不支持）： - get_chat_history 补 offset 参数（分页） - 新增 get_attention_events（统计图表页"关注事件"表格） fam-ui 完全重写为 Vue 3 项目：7 个页面 1:1 迁移功能（事件时间轴/AI对话/对话历史/ 人物管理/统计图表/模型统计/服务状态），深色主题设计系统（Inter+JetBrains Mono 字体、蓝紫渐变强调色、语义色 token）。用本地 npm run dev 代理到真实 NAS 数据做 了完整联调，过程中发现并修了两个真 bug： - URLSearchParams 把 undefined 转成字符串 "undefined" 传给后端，导致日期筛选失效 - MariaDB SUM() 返回 Decimal，Flask 默认序列化成字符串，前端字符串拼接出乱码数字 （ui_api.py::_ser 统一转 int/float 修复） 移动端 H5 补了响应式：原来的固定宽度侧边栏 + flex-wrap 导航在手机宽度下会把每个 按钮挤到文字逐字换行；改成 lg 以上桌面侧边栏、lg 以下移动端顶栏 + 横向可滑动导航 胶囊；人物管理页命名表单（输入框+命名按钮+合并下拉）在窄屏下改为纵向堆叠。 已部署 NAS 并验证：curl 确认 index.html/assets/深层路由/API 路由全部 200； Browser 工具在桌面宽度和手机宽度下把 7 个页面点了一遍（含真实提问一次 AI 对话、 人物头像/事件缩略图加载、命名合并表单），旧 Streamlit 进程已停止。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
53 lines
1.6 KiB
CSS
53 lines
1.6 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-bg: #0a0d13;
|
|
--color-panel: #12161f;
|
|
--color-panel-2: #171c28;
|
|
--color-panel-3: #0d1119;
|
|
--color-border: #232a3a;
|
|
--color-border-hi: #384357;
|
|
|
|
--color-text: #e7ecf3;
|
|
--color-text-dim: #949fb3;
|
|
--color-text-mute: #67728a;
|
|
--color-text-faint: #454e60;
|
|
|
|
--color-accent: #5b8cff;
|
|
--color-accent-2: #8b6bff;
|
|
--color-accent-bright: #9db8ff;
|
|
|
|
--color-ok: #3ddc9b;
|
|
--color-warn: #f5b84e;
|
|
--color-danger: #ff7373;
|
|
--color-info: #4fd1e8;
|
|
--color-violet: #c893ff;
|
|
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
--shadow-card: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px -12px rgba(0,0,0,.5);
|
|
}
|
|
|
|
html, body, #app { height: 100%; }
|
|
|
|
body {
|
|
background:
|
|
radial-gradient(1200px 500px at 15% -10%, rgb(91 140 255 / .07), transparent),
|
|
radial-gradient(900px 500px at 100% 0%, rgb(139 107 255 / .05), transparent),
|
|
var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
::selection { background: rgb(91 140 255 / .2); }
|
|
|
|
/* 滚动条：深色主题下默认滚动条太亮，统一细一点、低调一点 */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--color-border-hi); border-radius: 999px; border: 2px solid var(--color-bg); }
|
|
|
|
.tabular { font-variant-numeric: tabular-nums; }
|