feat: sync current progress (P0 hardening + P1 observability + deploy docs/systemd)
This commit is contained in:
OpenClaw Agent
134
web/static/app.js
Normal file
134
web/static/app.js
Normal file
@@ -0,0 +1,134 @@
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const msg = (t) => $("msg").textContent = typeof t === 'string' ? t : JSON.stringify(t, null, 2);
|
||||
const tokenKey = 'asset_tracker_token';
|
||||
let categories = [];
|
||||
|
||||
function token(){ return localStorage.getItem(tokenKey) || ''; }
|
||||
|
||||
async function api(path, method='GET', body){
|
||||
const headers = {};
|
||||
if(token()) headers['Authorization'] = `Bearer ${token()}`;
|
||||
if(body) headers['Content-Type'] = 'application/json';
|
||||
const res = await fetch(path, { method, headers, body: body ? JSON.stringify(body) : undefined });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if(!res.ok) throw new Error(data.error || `${res.status}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
async function doLogin(){
|
||||
try{
|
||||
const data = await api('/api/v1/auth/login', 'POST', {
|
||||
username: $('username').value.trim(),
|
||||
password: $('password').value
|
||||
});
|
||||
localStorage.setItem(tokenKey, data.access_token);
|
||||
$('login-section').classList.add('hidden');
|
||||
$('app-section').classList.remove('hidden');
|
||||
await reloadAll();
|
||||
msg('登录成功');
|
||||
}catch(e){ msg(`登录失败: ${e.message}`); }
|
||||
}
|
||||
|
||||
async function loadCategories(){
|
||||
const data = await api('/api/v1/categories');
|
||||
categories = data.data || [];
|
||||
$('category-list').innerHTML = categories.map(c => `<li>#${c.id} ${c.name} (${c.type})</li>`).join('') || '<li>暂无分类</li>';
|
||||
$('asset-category').innerHTML = categories.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
|
||||
}
|
||||
|
||||
async function addCategory(){
|
||||
try{
|
||||
await api('/api/v1/categories', 'POST', {
|
||||
name: $('cat-name').value.trim(),
|
||||
type: $('cat-type').value
|
||||
});
|
||||
$('cat-name').value='';
|
||||
await loadCategories();
|
||||
msg('分类创建成功');
|
||||
}catch(e){ msg(`分类创建失败: ${e.message}`); }
|
||||
}
|
||||
|
||||
function toRFC3339(localVal){
|
||||
if(!localVal) return '';
|
||||
const d = new Date(localVal);
|
||||
return d.toISOString();
|
||||
}
|
||||
|
||||
async function addAsset(){
|
||||
try{
|
||||
await api('/api/v1/assets', 'POST', {
|
||||
name: $('asset-name').value.trim(),
|
||||
category_id: Number($('asset-category').value),
|
||||
quantity: Number($('asset-quantity').value || 0),
|
||||
unit_price: Number($('asset-price').value || 0),
|
||||
currency: $('asset-currency').value.trim().toUpperCase(),
|
||||
expiry_date: toRFC3339($('asset-expiry').value)
|
||||
});
|
||||
$('asset-name').value='';
|
||||
await loadAssets();
|
||||
await loadDashboard();
|
||||
msg('资产创建成功');
|
||||
}catch(e){ msg(`资产创建失败: ${e.message}`); }
|
||||
}
|
||||
|
||||
async function loadAssets(){
|
||||
const data = await api('/api/v1/assets?page=1&page_size=100');
|
||||
const rows = data.data || [];
|
||||
const map = new Map(categories.map(c => [c.id, c.name]));
|
||||
$('asset-tbody').innerHTML = rows.map(a => `<tr>
|
||||
<td>${a.id}</td>
|
||||
<td>${a.name}</td>
|
||||
<td>${map.get(a.category_id) || a.category_id}</td>
|
||||
<td>${a.total_value} ${a.currency}</td>
|
||||
<td>${a.status}</td>
|
||||
<td>${a.expiry_date || '-'}</td>
|
||||
<td><button onclick="delAsset(${a.id})">删除</button></td>
|
||||
</tr>`).join('') || '<tr><td colspan="7">暂无资产</td></tr>';
|
||||
|
||||
$('asset-cards').innerHTML = rows.map(a => `<div class="asset-card">
|
||||
<div class="line"><b>#${a.id} ${a.name}</b><span>${a.status}</span></div>
|
||||
<div class="line"><span>分类</span><span>${map.get(a.category_id) || a.category_id}</span></div>
|
||||
<div class="line"><span>金额</span><span>${a.total_value} ${a.currency}</span></div>
|
||||
<div class="line"><span>到期</span><span>${a.expiry_date || '-'}</span></div>
|
||||
<div class="line"><button onclick="delAsset(${a.id})">删除</button></div>
|
||||
</div>`).join('') || '<div class="asset-card">暂无资产</div>';
|
||||
}
|
||||
|
||||
async function delAsset(id){
|
||||
try{
|
||||
await api(`/api/v1/assets/${id}`, 'DELETE');
|
||||
await loadAssets();
|
||||
await loadDashboard();
|
||||
msg(`已删除资产 #${id}`);
|
||||
}catch(e){ msg(`删除失败: ${e.message}`); }
|
||||
}
|
||||
window.delAsset = delAsset;
|
||||
|
||||
async function loadDashboard(){
|
||||
const d = await api('/api/v1/dashboard/summary');
|
||||
const byCat = (d.by_category || []).map(x => `${x.category_name}: ${x.total_value}`).join('<br>') || '无';
|
||||
$('dashboard').innerHTML = `
|
||||
<div class="kpi"><b>总资产</b><div>${d.total_assets_value}</div></div>
|
||||
<div class="kpi"><b>分类占比</b><div>${byCat}</div></div>
|
||||
<div class="kpi"><b>30天到期</b><div>${(d.expiring_in_30_days || []).length} 条</div></div>
|
||||
`;
|
||||
}
|
||||
|
||||
async function reloadAll(){
|
||||
await loadCategories();
|
||||
await loadAssets();
|
||||
await loadDashboard();
|
||||
}
|
||||
|
||||
$('login-btn').addEventListener('click', doLogin);
|
||||
$('add-cat').addEventListener('click', addCategory);
|
||||
$('add-asset').addEventListener('click', addAsset);
|
||||
$('refresh-dashboard').addEventListener('click', loadDashboard);
|
||||
|
||||
(async function init(){
|
||||
if(token()){
|
||||
$('login-section').classList.add('hidden');
|
||||
$('app-section').classList.remove('hidden');
|
||||
try{ await reloadAll(); }catch(e){ msg(`自动加载失败: ${e.message}`); }
|
||||
}
|
||||
})();
|
||||
33
web/static/public.js
Normal file
33
web/static/public.js
Normal file
@@ -0,0 +1,33 @@
|
||||
async function loadPublicRecords(){
|
||||
const res = await fetch('/public/records');
|
||||
const data = await res.json();
|
||||
|
||||
const s = data.summary || {};
|
||||
const by = s.by_category || {};
|
||||
document.getElementById('summary').innerHTML = `
|
||||
<div class="kpi"><b>用户ID</b><div>${s.user_id ?? '-'}</div></div>
|
||||
<div class="kpi"><b>活跃资产数</b><div>${s.active_asset_count ?? 0}</div></div>
|
||||
<div class="kpi"><b>总资产值</b><div>${s.total_assets_value ?? 0}</div></div>
|
||||
<div class="kpi" style="grid-column:1/-1"><b>分类汇总</b><div>${Object.keys(by).length ? Object.entries(by).map(([k,v])=>`${k||'未分类'}: ${v}`).join('<br>') : '暂无'}</div></div>
|
||||
`;
|
||||
|
||||
const rows = data.records || [];
|
||||
const box = document.getElementById('records');
|
||||
if(!rows.length){
|
||||
box.innerHTML = '<div class="empty">当前 0 条记录。可前往 <a href="/app">/app</a> 添加资产后回来查看。</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
box.innerHTML = rows.map(r => `
|
||||
<div class="record-card">
|
||||
<div class="line"><b>#${r.id} ${r.name || ''}</b><span>${r.status || '-'}</span></div>
|
||||
<div class="line"><span>分类</span><span>${r.category_name || '-'}</span></div>
|
||||
<div class="line"><span>金额</span><span>${r.total_value ?? 0} ${r.currency || ''}</span></div>
|
||||
<div class="line"><span>到期</span><span>${r.expiry_date || '-'}</span></div>
|
||||
<div class="line"><span>更新时间</span><span>${r.updated_at || '-'}</span></div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
document.getElementById('refresh-btn').addEventListener('click', loadPublicRecords);
|
||||
loadPublicRecords();
|
||||
33
web/static/style.css
Normal file
33
web/static/style.css
Normal file
@@ -0,0 +1,33 @@
|
||||
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f5f7fb;margin:0;color:#1f2937}
|
||||
.container{max-width:1100px;margin:20px auto;padding:0 12px}
|
||||
h1{margin:0 0 12px;font-size:26px}
|
||||
h2{margin:0 0 10px;font-size:18px}
|
||||
.card{background:#fff;border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,.06)}
|
||||
.row{display:flex;gap:8px;align-items:center}
|
||||
.row.wrap{flex-wrap:wrap}
|
||||
.row.between{justify-content:space-between}
|
||||
input,select,button{padding:10px;border:1px solid #d0d7e2;border-radius:10px;font-size:14px}
|
||||
button{background:#2b7cff;color:#fff;border:none;cursor:pointer}
|
||||
button:hover{opacity:.92}
|
||||
.hidden{display:none}
|
||||
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
|
||||
.kpi{background:#f0f5ff;padding:10px;border-radius:10px;line-height:1.5}
|
||||
.table-wrap{overflow:auto;border:1px solid #edf1f7;border-radius:10px}
|
||||
table{width:100%;border-collapse:collapse;min-width:760px;background:#fff}
|
||||
th,td{border-bottom:1px solid #eceff5;padding:8px;text-align:left;white-space:nowrap}
|
||||
.asset-cards{display:none}
|
||||
.asset-card{border:1px solid #edf1f7;border-radius:10px;padding:10px;margin-bottom:8px;background:#fff}
|
||||
.asset-card .line{display:flex;justify-content:space-between;margin:4px 0;font-size:13px}
|
||||
pre{white-space:pre-wrap;background:#0d1117;color:#9ecbff;padding:10px;border-radius:8px;min-height:28px}
|
||||
.hint{color:#666;font-size:12px}
|
||||
|
||||
@media (max-width: 768px){
|
||||
.container{padding:0 10px;margin:12px auto}
|
||||
h1{font-size:22px}
|
||||
.grid{grid-template-columns:1fr}
|
||||
.row{flex-wrap:wrap}
|
||||
.row > *{flex:1 1 calc(50% - 8px);min-width:120px}
|
||||
.row > button{flex:1 1 100%}
|
||||
.table-wrap{display:none}
|
||||
.asset-cards{display:block}
|
||||
}
|
||||
Reference in New Issue
Block a user