fix: UI 优化 · 门户无侧边栏 + 政策落地表格紧凑 + 结算/质量用表格布局
- index.html 已登录也不显示侧边栏(公开展示页) - 政策落地三栏表格精简为 3 列,加 word-break: keep-all 防止中文竖排 - 结算总览和质量与信用从 list 改为表格布局,更紧凑 - 智能体服务菜单移到「服务与政策」分组 - 门户"我要接订单"恢复为 login.html(先选角色) Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
+1
-1
@@ -25,7 +25,7 @@ const MENUS = [
|
|||||||
{ page: 'profile', label: '画像中心', href: 'profile.html', roles: ['operator', 'gov', 'enterprise'], group: '运营管理' },
|
{ page: 'profile', label: '画像中心', href: 'profile.html', roles: ['operator', 'gov', 'enterprise'], group: '运营管理' },
|
||||||
{ page: 'opc', label: 'OPC 工作台', href: 'opc.html', roles: ['opc'], group: '我的工作台' },
|
{ page: 'opc', label: 'OPC 工作台', href: 'opc.html', roles: ['opc'], group: '我的工作台' },
|
||||||
{ page: 'team', label: '组队协同', href: 'team.html', roles: ['opc', 'operator'], group: '我的工作台' },
|
{ page: 'team', label: '组队协同', href: 'team.html', roles: ['opc', 'operator'], group: '我的工作台' },
|
||||||
{ page: 'agent', label: '智能体服务', href: 'agent.html', roles: ['opc', 'enterprise', 'personal', 'operator'], group: '我的工作台' },
|
{ page: 'agent', label: '智能体服务', href: 'agent.html', roles: ['opc', 'enterprise', 'personal', 'operator'], group: '服务与政策' },
|
||||||
{ page: 'enterprise', label: '企业工作台', href: 'enterprise.html', roles: ['enterprise', 'personal'], labelMap: { personal: '个人工作台' }, group: '我的工作台' },
|
{ page: 'enterprise', label: '企业工作台', href: 'enterprise.html', roles: ['enterprise', 'personal'], labelMap: { personal: '个人工作台' }, group: '我的工作台' },
|
||||||
{ page: 'order', label: '订单与协同', href: 'order.html', roles: ['opc', 'enterprise', 'personal', 'operator'], group: '我的工作台' },
|
{ page: 'order', label: '订单与协同', href: 'order.html', roles: ['opc', 'enterprise', 'personal', 'operator'], group: '我的工作台' },
|
||||||
{ page: 'market', label: '橙果商城', href: 'market.html', roles: ['opc', 'enterprise', 'personal', 'learner', 'operator'], group: '我的工作台' },
|
{ page: 'market', label: '橙果商城', href: 'market.html', roles: ['opc', 'enterprise', 'personal', 'learner', 'operator'], group: '我的工作台' },
|
||||||
|
|||||||
@@ -154,9 +154,13 @@ body[data-page="login"], body[data-page="index"], body.screen { padding-left: 0;
|
|||||||
|
|
||||||
/* ===== 表格 ===== */
|
/* ===== 表格 ===== */
|
||||||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||||
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); }
|
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); word-break: keep-all; }
|
||||||
th { color: var(--text-2); font-weight: 600; font-size: 12px; background: var(--primary-50); }
|
th { color: var(--text-2); font-weight: 600; font-size: 12px; background: var(--primary-50); white-space: nowrap; }
|
||||||
tr:hover td { background: var(--primary-50); }
|
tr:hover td { background: var(--primary-50); }
|
||||||
|
/* 三栏卡片中的表格:紧凑布局 */
|
||||||
|
.three-col .card table, .two-col .card table { font-size: 12px; }
|
||||||
|
.three-col .card th, .three-col .card td,
|
||||||
|
.two-col .card th, .two-col .card td { padding: 6px 8px; }
|
||||||
|
|
||||||
/* ===== 按钮 ===== */
|
/* ===== 按钮 ===== */
|
||||||
.btn {
|
.btn {
|
||||||
|
|||||||
+15
-13
@@ -101,7 +101,7 @@
|
|||||||
<div class="two-col">
|
<div class="two-col">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3>结算总览</h3>
|
<h3>结算总览</h3>
|
||||||
<ul class="list" id="stl-summary"></ul>
|
<table id="stl-summary"></table>
|
||||||
<button class="btn sm" style="margin-top:10px" onclick="withdraw()">申请提现</button>
|
<button class="btn sm" style="margin-top:10px" onclick="withdraw()">申请提现</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
@@ -116,7 +116,7 @@
|
|||||||
<div class="two-col">
|
<div class="two-col">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3>质量与信用 <span class="req">REQ-023/050</span></h3>
|
<h3>质量与信用 <span class="req">REQ-023/050</span></h3>
|
||||||
<ul class="list" id="opc-quality"></ul>
|
<table id="opc-quality"></table>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3>最新客户评价 <span class="req">REQ-044</span></h3>
|
<h3>最新客户评价 <span class="req">REQ-044</span></h3>
|
||||||
@@ -165,12 +165,14 @@ function renderPage(DB) {
|
|||||||
renderGrab();
|
renderGrab();
|
||||||
renderPolicySupport();
|
renderPolicySupport();
|
||||||
renderFinance();
|
renderFinance();
|
||||||
document.getElementById('stl-summary').innerHTML = O.settlement.summary.map(s => LI(s[0], s[1])).join('');
|
document.getElementById('stl-summary').innerHTML = O.settlement.summary.map(s =>
|
||||||
|
`<tr><td>${s[0]}</td><td style="text-align:right;font-weight:600">${s[1]}</td></tr>`).join('');
|
||||||
document.getElementById('stl-tbl').innerHTML =
|
document.getElementById('stl-tbl').innerHTML =
|
||||||
`<tr><th>结算单</th><th>关联订单</th><th>金额</th><th>状态</th></tr>` +
|
`<tr><th>结算单</th><th>关联订单</th><th>金额</th><th>状态</th></tr>` +
|
||||||
O.settlement.rows.map(r => `<tr><td>${r.code}</td><td>${r.order}</td><td>${r.amount}</td><td>${B(r.status)}</td></tr>`).join('');
|
O.settlement.rows.map(r => `<tr><td>${r.code}</td><td>${r.order}</td><td>${r.amount}</td><td>${B(r.status)}</td></tr>`).join('');
|
||||||
|
|
||||||
document.getElementById('opc-quality').innerHTML = O.quality.map(q => LI(q[0], B(q[1]))).join('');
|
document.getElementById('opc-quality').innerHTML = O.quality.map(q =>
|
||||||
|
`<tr><td>${q[0]}</td><td style="text-align:right">${B(q[1])}</td></tr>`).join('');
|
||||||
document.getElementById('opc-reviews').innerHTML = O.reviews.map(r =>
|
document.getElementById('opc-reviews').innerHTML = O.reviews.map(r =>
|
||||||
`<li><span>${r[0]}</span><span class="badge ok">${r[1]}</span></li>`).join('');
|
`<li><span>${r[0]}</span><span class="badge ok">${r[1]}</span></li>`).join('');
|
||||||
}
|
}
|
||||||
@@ -327,19 +329,19 @@ function grabOrder(i) {
|
|||||||
function renderPolicySupport() {
|
function renderPolicySupport() {
|
||||||
const P = DB.opc.policySupport;
|
const P = DB.opc.policySupport;
|
||||||
if (!P) return;
|
if (!P) return;
|
||||||
// 算力券
|
// 算力券:3列紧凑
|
||||||
document.getElementById('vc-bal').textContent = `¥${P.compute.balance.toLocaleString()}`;
|
document.getElementById('vc-bal').textContent = `¥${P.compute.balance.toLocaleString()}`;
|
||||||
document.getElementById('vc-tbl').innerHTML =
|
document.getElementById('vc-tbl').innerHTML =
|
||||||
`<tr><th>券号</th><th>金额</th><th>关联</th><th>状态</th></tr>` +
|
`<tr><th>金额</th><th>关联订单</th><th>状态</th></tr>` +
|
||||||
P.compute.records.map(r => `<tr><td>${r.code}</td><td>${r.amount}</td><td class="muted">${r.target}</td><td>${B(r.status)}</td></tr>`).join('');
|
P.compute.records.map(r => `<tr><td>${r.amount}</td><td class="muted">${r.target.split(' ')[0]}</td><td>${B(r.status)}</td></tr>`).join('');
|
||||||
// 贷款
|
// 贷款:3列紧凑
|
||||||
document.getElementById('loan-tbl').innerHTML =
|
document.getElementById('loan-tbl').innerHTML =
|
||||||
`<tr><th>编号</th><th>类型</th><th>金额</th><th>利率</th><th>状态</th></tr>` +
|
`<tr><th>类型</th><th>金额</th><th>状态</th></tr>` +
|
||||||
P.loan.records.map(r => `<tr><td>${r.code}</td><td>${r.type}</td><td>${r.amount}</td><td>${r.rate}</td><td>${B(r.status)}</td></tr>`).join('');
|
P.loan.records.map(r => `<tr><td>${r.type}<br><small class="muted">${r.rate}</small></td><td>${r.amount}</td><td>${B(r.status)}</td></tr>`).join('');
|
||||||
// 租金
|
// 租金:3列紧凑
|
||||||
document.getElementById('rent-tbl').innerHTML =
|
document.getElementById('rent-tbl').innerHTML =
|
||||||
`<tr><th>编号</th><th>类型</th><th>金额</th><th>状态</th></tr>` +
|
`<tr><th>类型</th><th>金额</th><th>状态</th></tr>` +
|
||||||
P.rent.records.map(r => `<tr><td>${r.code}</td><td>${r.type}</td><td>${r.amount}</td><td>${B(r.status)}</td></tr>`).join('');
|
P.rent.records.map(r => `<tr><td>${r.type}</td><td>${r.amount}</td><td>${B(r.status)}</td></tr>`).join('');
|
||||||
}
|
}
|
||||||
function applyCompute() {
|
function applyCompute() {
|
||||||
confirmDlg('申领算力券', '按细则可申领 ≤¥10,000/年。当前余额 ¥8,000,可追加申领 ¥2,000。', '确认申领', () => {
|
confirmDlg('申领算力券', '按细则可申领 ≤¥10,000/年。当前余额 ¥8,000,可追加申领 ¥2,000。', '确认申领', () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user