AI接入 v1.0
UI更新
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user