azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决账户中心的问题

Browse Source
This commit is contained in:
Azmat@qq.com
2026-09-07 14:36:23 +08:00
parent dde0a67b1c
commit 0d56fdb299
6 changed files with 107 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/account-page.css
+23 -7
View File
@@ -228,12 +228,12 @@
flex: 0 0 auto;
}
.billing-month-picker .custom-select-shell,
.billing-month-picker .custom-select-trigger {
.billing-month-picker .rs-select,
.billing-month-picker .rs-select-btn {
width: 100%;
}
.billing-month-picker .custom-select-trigger {
.billing-month-picker .rs-select-btn {
height: 36px;
padding: 0 10px 0 12px;
border-color: rgba(255, 255, 255, 0.2) !important;
@@ -244,8 +244,8 @@
font-weight: 600;
}
.billing-month-picker .custom-select-trigger:hover,
.billing-month-picker .custom-select-shell.open .custom-select-trigger {
.billing-month-picker .rs-select-btn:hover,
.billing-month-picker .rs-select.open .rs-select-btn {
border-color: rgba(138, 171, 255, 0.72) !important;
color: #fff !important;
background: #323743 !important;
@@ -545,12 +545,12 @@
}
.billing-ledger-toolbar .billing-ledger-filter,
.billing-ledger-toolbar .custom-select-shell {
.billing-ledger-toolbar .rs-select {
width: 136px;
flex: 0 0 136px;
}
.billing-ledger-toolbar .custom-select-trigger {
.billing-ledger-toolbar .rs-select-btn {
height: 38px;
padding: 0 11px;
border-radius: 9px;
@@ -869,3 +869,19 @@
color: #161a22;
font-weight: 650;
}
/* 月份下拉选中态:门户菜单在 body,用全局覆盖热区里误显成黑色的选中项 */
body .rs-select-menu-portal .rs-select-option.selected {
background: rgba(0, 47, 167, 0.08) !important;
color: #002fa7 !important;
font-weight: 600 !important;
}
body .rs-select-menu-portal .rs-select-option.selected .rs-select-option-label {
color: #002fa7 !important;
}
.billing-month-picker .rs-select-btn .rs-select-label {
color: #fff !important;
}
.billing-month-picker .rs-select-btn svg {
color: rgba(255, 255, 255, 0.72);
}
core/frontend/src/api.ts
+3 -2
View File
@@ -936,11 +936,12 @@ export const api = {
billingSummary() {
return request<BillingSummary>("/api/billing/summary/");
},
ledgers(page = 1, pageSize = 10, filters?: { ledger_type?: string; user?: string }) {
// 类型/成员筛选传参给后端做全量过滤(count/总页数随筛选变化 · R70)
ledgers(page = 1, pageSize = 10, filters?: { ledger_type?: string; user?: string; month?: string }) {
// 类型/成员/月份筛选传参给后端做全量过滤(count/总页数随筛选变化)
const q = new URLSearchParams({ page: String(page), page_size: String(pageSize) });
if (filters?.ledger_type) q.set("ledger_type", filters.ledger_type);
if (filters?.user) q.set("user", filters.user);
if (filters?.month) q.set("month", filters.month);
return request<{ count: number; page: number; page_size: number; results: Ledger[] }>(`/api/billing/ledgers/?${q.toString()}`);
},
billingTrend(range?: "day" | "week" | "month", month?: string) {
core/frontend/src/routes/account.tsx
+50 -15
View File
@@ -60,6 +60,11 @@ function FeatureIcon({ name }: { name: string }) {
}
function featureIconForLedger(ledger: Ledger): string {
const tt = (ledger.task_type || "").toLowerCase();
if (tt.includes("image") || tt.includes("triview") || tt.includes("product_image") || tt.includes("person_image") || tt.includes("scene_image")) return "image";
if (tt.includes("digest") || tt.includes("video_digest")) return "scan";
if (tt.includes("free_video") || tt.includes("film") || tt.includes("video_segment") || tt.includes("voiceover") || tt.includes("export")) return "film";
if (tt.includes("storyboard")) return "clapperboard";
const text = `${ledger.ledger_type} ${ledger.reason}`.toLowerCase();
if (text.includes("image") || text.includes("图片")) return "image";
if (text.includes("digest") || text.includes("提示词") || text.includes("提炼")) return "scan";
@@ -69,6 +74,17 @@ function featureIconForLedger(ledger: Ledger): string {
return "clapperboard";
}
function ledgerFeatureLabel(ledger: Ledger): string {
if (ledger.task_type) return taskTypeLabel(ledger.task_type);
return ledgerTypeLabel(ledger.ledger_type);
}
function ledgerLocationLabel(ledger: Ledger): string {
if (ledger.project_title) return ledger.project_title;
if (ledger.ledger_type === "recharge") return "账户充值";
return ledgerReasonLabel(ledger.reason);
}
function formatMonthLabel(ym: string) {
const [y, m] = ym.split("-");
return `${y}年${Number(m)}月`;
@@ -183,13 +199,14 @@ export function AccountPage({ billing, projects: _projects, team, onRecharge: _o
setLedgersLoading(true);
api.ledgers(billPage, BILLS_PER_PAGE, {
ledger_type: billType === "all" ? undefined : billType,
month: ledgerMonth || undefined,
}).then((data) => {
if (!alive) return;
setLedgerRows(data.results);
setLedgerCount(data.count);
}).catch(() => {}).finally(() => { if (alive) setLedgersLoading(false); });
return () => { alive = false; };
}, [billPage, billType, reloadFlag]);
}, [billPage, billType, ledgerMonth, reloadFlag]);
const [billJump, setBillJump] = useState("");
@@ -253,10 +270,8 @@ export function AccountPage({ billing, projects: _projects, team, onRecharge: _o
setBillPage(1);
}, [featureFilter]);
const visibleLedgers = useMemo(() => {
if (!ledgerMonth) return ledgerRows;
return ledgerRows.filter((l) => (l.created_at || "").startsWith(ledgerMonth));
}, [ledgerRows, ledgerMonth]);
// 月份/类型已在服务端过滤,当前页结果直接展示
const visibleLedgers = ledgerRows;
const billTotalPages = Math.max(1, Math.ceil(ledgerCount / BILLS_PER_PAGE));
const safeBillPage = Math.min(billPage, billTotalPages);
@@ -266,20 +281,40 @@ export function AccountPage({ billing, projects: _projects, team, onRecharge: _o
setBillJump("");
}
function exportLedgers() {
if (visibleLedgers.length === 0) {
async function exportLedgers() {
const pageSize = 100;
const all: Ledger[] = [];
let page = 1;
let total = Infinity;
try {
while (all.length < total) {
const data = await api.ledgers(page, pageSize, {
ledger_type: billType === "all" ? undefined : billType,
month: ledgerMonth || undefined,
});
total = data.count;
all.push(...data.results);
if (data.results.length === 0) break;
page += 1;
if (page > 500) break; // 安全上限
}
} catch {
onNotify("error", "导出失败，请稍后重试");
return;
}
if (all.length === 0) {
onNotify("info", "当前没有可导出的流水");
return;
}
const header = ["功能", "消耗位置", "成员", "时间", "消耗积分"];
const lines = visibleLedgers.map((l) => {
const lines = all.map((l) => {
const amt = Number(l.amount);
const signed = (amt > 0 && l.ledger_type === "recharge") || l.ledger_type === "release" || l.ledger_type === "refund"
? `+${pts(Math.abs(amt))}`
: `-${pts(Math.abs(amt))}`;
return [
ledgerTypeLabel(l.ledger_type),
ledgerReasonLabel(l.reason).replace(/,/g, "，"),
ledgerFeatureLabel(l),
ledgerLocationLabel(l).replace(/,/g, "，"),
l.user_label || "系统",
formatLedgerTime(l.created_at),
signed,
@@ -292,7 +327,7 @@ export function AccountPage({ billing, projects: _projects, team, onRecharge: _o
a.download = `积分消耗流水-${ledgerMonth || "all"}.csv`;
a.click();
URL.revokeObjectURL(url);
onNotify("success", "已导出积分消耗流水");
onNotify("success", `已导出 ${all.length} 条积分消耗流水`);
}
const monthUsageDisplay = trend?.month_charged != null ? Number(trend.month_charged) : (selectedMonth === months[0]?.value ? used : null);
@@ -456,7 +491,7 @@ export function AccountPage({ billing, projects: _projects, team, onRecharge: _o
onChange={(v) => { setLedgerMonth(v); setBillPage(1); }}
options={months.map((m) => ({ value: m.value, label: m.label }))}
/>
<button className="compact-action billing-ledger-export" type="button" onClick={exportLedgers}>
<button className="compact-action billing-ledger-export" type="button" onClick={() => void exportLedgers()}>
<Download size={16} strokeWidth={2} />
导出流水
</button>
@@ -491,11 +526,11 @@ export function AccountPage({ billing, projects: _projects, team, onRecharge: _o
<div className="billing-ledger-row" key={l.id} data-ledger-month={(l.created_at || "").slice(0, 7)} data-ledger-feature={l.ledger_type}>
<div className="billing-ledger-feature">
<span className="billing-ledger-icon"><FeatureIcon name={featureIconForLedger(l)} /></span>
<strong>{ledgerTypeLabel(l.ledger_type)}</strong>
<strong title={ledgerFeatureLabel(l)}>{ledgerFeatureLabel(l)}</strong>
</div>
<div className="billing-ledger-copy">
<strong title={ledgerReasonLabel(l.reason)}>{ledgerReasonLabel(l.reason)}</strong>
<span>{l.ledger_type === "recharge" ? "账户充值" : "积分变动 · 可追溯流水"}</span>
<strong title={ledgerLocationLabel(l)}>{ledgerLocationLabel(l)}</strong>
<span>{ledgerTypeLabel(l.ledger_type)}{l.reason ? ` · ${ledgerReasonLabel(l.reason)}` : ""}</span>
</div>
<div className="billing-ledger-meta">
<strong>{l.user_label || "系统"}</strong>
core/frontend/src/types.ts
+4
View File
@@ -554,6 +554,10 @@ export type Ledger = {
reason: string;
created_at: string;
user_label?: string;
task?: string | null;
task_type?: string;
project?: string | null;
project_title?: string;
};
export type UserPreference = {