AI接入 v1.0

UI更新
This commit is contained in:
2026-09-24 14:27:12 +08:00
parent 90eeae51af
commit 2338ff5885
46 changed files with 2301 additions and 83 deletions
+124 -15
View File
@@ -9,20 +9,46 @@
</head>
<body>
<!-- ==================== 登录 ==================== -->
<!-- ==================== 登录 ====================
视觉对齐手机端登录页:暖橙渐变底 + 漂浮圆球 + 圆形熊头 + 金色装饰线标题
+ 毛玻璃卡片 + emoji 前缀输入框。改这里之前先看 App 的 login_page.dart。
-->
<div id="login-view">
<div class="login-box">
<h1>强宝小助手</h1>
<p class="sub">强宝管理小助手</p>
<div class="field">
<label>用户名</label>
<input id="login-username" autocomplete="username" placeholder="用户名">
<!-- 背景装饰圆球(手机端是带缓动的,这里用 CSS 动画近似) -->
<div class="login-balls" aria-hidden="true">
<span class="ball b1"></span>
<span class="ball b2"></span>
<span class="ball b3"></span>
</div>
<div class="login-wrap">
<div class="login-header">
<div class="login-logo">
<img src="/admin/logo.png" alt="强宝小助手">
</div>
<h1 class="login-title">
<i class="deco"></i><span>强宝小助手</span><i class="deco"></i>
</h1>
<p class="login-sub">智能记账,轻松管理</p>
</div>
<div class="field">
<label>密码</label>
<input id="login-password" type="password" autocomplete="current-password" placeholder="密码">
<div class="login-box">
<div class="login-field">
<span class="ico"><img class="ci" src="/admin/icons/user.svg" width="18" height="18" alt=""></span>
<input id="login-username" autocomplete="username" maxlength="20" placeholder="请输入用户名">
</div>
<div class="login-field">
<span class="ico"><img class="ci" src="/admin/icons/lock.svg" width="18" height="18" alt=""></span>
<input id="login-password" type="password" autocomplete="current-password" maxlength="20" placeholder="请输入密码">
<button type="button" class="eye" id="login-eye" title="显示密码">
<img class="ci" src="/admin/icons/eye.svg" width="18" height="18" alt="">
</button>
</div>
<button class="login-btn" id="login-btn">登 录</button>
</div>
<button class="primary" id="login-btn">登录</button>
</div>
</div>
@@ -35,7 +61,7 @@
<div id="app-view" style="display:none">
<header class="topbar">
<div class="brand"><span class="brand-icon">🐻</span>强宝小助手</div>
<div class="brand"><img class="brand-logo" src="/admin/logo.png" alt="">强宝小助手</div>
<div class="spacer"></div>
<span class="who" id="who"></span>
<button id="logout-btn">退出</button>
@@ -45,13 +71,23 @@
<nav class="module-nav">
<button class="module-item active" data-module="notes">
<span class="mi-icon">📝</span>
<span class="mi-icon"><img class="ci" src="/admin/icons/note.svg" width="18" height="18" alt=""></span>
<span class="mi-text">笔记管理</span>
</button>
<!-- 以后的模块(Agent、数据看板…)往这里加 -->
<button class="module-item" data-module="finance">
<span class="mi-icon"><img class="ci" src="/admin/icons/bill.svg" width="18" height="18" alt=""></span>
<span class="mi-text">财务管理</span>
</button>
<button class="module-item" data-module="ai">
<span class="mi-icon"><img class="ci" src="/admin/icons/assistant.svg" width="18" height="18" alt=""></span>
<span class="mi-text">AI 助手</span>
</button>
<!-- 以后的模块(数据看板…)往这里加:这里加一个 button,
下面加一个 data-module-panel 的 section,再在 admin.js 的
switchModule 里按需做初始化就行 -->
</nav>
<section class="module-panel">
<section class="module-panel" data-module-panel="notes">
<div class="toolbar">
<input id="search" placeholder="搜索标题和正文…">
@@ -93,6 +129,77 @@
</div>
</section>
<!-- ==================== 财务管理模块 ====================
纯展示:月度汇总 / 预算进度 / 分类占比 / 账单明细。
记账和改账在 App 上做,这里只读 —— 数据全部来自现成接口
(/statistics/monthly、/bills、/budget、/account)。 -->
<section class="module-panel" data-module-panel="finance" style="display:none">
<div class="toolbar">
<button class="icon-btn" id="fin-prev" title="上一月">‹</button>
<span class="fin-month" id="fin-month">—</span>
<button class="icon-btn" id="fin-next" title="下一月">›</button>
<div class="toolbar-sep"></div>
<select id="fin-type" title="按类型筛选">
<option value="">全部类型</option>
<option value="1">只看支出</option>
<option value="2">只看收入</option>
</select>
<select id="fin-cat" title="按分类筛选"><option value="">全部分类</option></select>
<div class="spacer"></div>
<span class="toolbar-note" id="fin-note"></span>
</div>
<div class="module-body">
<aside class="sidebar">
<div class="side-title">本月概览</div>
<div id="fin-summary"></div>
<div class="side-divider"></div>
<div class="side-title">分类(点一下筛选)</div>
<div id="fin-cats"></div>
</aside>
<main class="content">
<div id="fin-bills"></div>
</main>
</div>
</section>
<!-- ==================== AI 助手模块 ====================
和 App 端共用同一套后端接口(/api/ai/**),历史存在服务端的
chat_session / chat_message 里 —— 所以两边看到的会话是同一批。 -->
<section class="module-panel" data-module-panel="ai" style="display:none">
<div class="toolbar">
<span class="toolbar-title">AI 助手</span>
<span class="toolbar-note" id="ai-hint"></span>
<div class="spacer"></div>
<button id="ai-new">+ 新对话</button>
</div>
<div class="module-body">
<aside class="sidebar">
<div class="side-title">历史对话</div>
<div id="ai-session-list"></div>
</aside>
<main class="ai-main">
<div id="ai-messages" class="ai-messages"></div>
<!-- 工具调用提示(「正在查账单…」),没有在查东西时整行隐藏 -->
<div class="ai-status" id="ai-status" style="display:none"></div>
<div class="ai-composer">
<textarea id="ai-input" rows="1"
placeholder="问点什么,或者说一句…(Enter 发送,Shift+Enter 换行)"></textarea>
<button class="primary" id="ai-send">发送</button>
</div>
</main>
</div>
</section>
</div>
</div>
@@ -131,6 +238,8 @@
<!-- Vditor:本地托管,不依赖任何外部 CDN -->
<script src="/admin/vendor/vditor/dist/index.min.js"></script>
<!-- 图标名清单 + 兼容映射,由 qiangbao_accounting/tools/make_icons.py 生成 -->
<script src="/admin/icons.js"></script>
<script src="/admin/admin.js"></script>
</body>
</html>