chore(release): 1.1.36 - 应用内流式直连下载、透明化直链与排队卡死彻底修复
TallyNote release / linux-x64 (push) Successful in 6m21s
TallyNote release / linux-x64 (push) Successful in 6m21s
This commit is contained in:
Qiufeng
@@ -0,0 +1,39 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export function BeamBar({
|
||||
className = "",
|
||||
width = 140,
|
||||
height = 4,
|
||||
}: {
|
||||
className?: string;
|
||||
width?: number | string;
|
||||
height?: number;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`tn-beam-bar ${className}`}
|
||||
style={{ width, height }}
|
||||
role="progressbar"
|
||||
aria-label="加载中"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function BeamLoading({
|
||||
text,
|
||||
className = "",
|
||||
width,
|
||||
}: {
|
||||
text?: ReactNode;
|
||||
className?: string;
|
||||
width?: number | string;
|
||||
}) {
|
||||
return (
|
||||
<div className={`tn-beam-loading ${className}`} role="status" aria-live="polite">
|
||||
<BeamBar width={width} />
|
||||
{text && <span className="tn-beam-text">{text}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BeamLoading;
|
||||
@@ -1,3 +1,4 @@
|
||||
import { BeamLoading } from "./components/BeamLoading";
|
||||
import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import "tdesign-react/es/_util/react-19-adapter";
|
||||
@@ -87,7 +88,7 @@ function App() {
|
||||
// Keep the login form mounted for those requests so the user sees the
|
||||
// button's busy state instead of losing the entire form to a bootstrap
|
||||
// spinner. `bootstrapRequestId` is only set by the initial session check.
|
||||
if (isSessionBootstrapping(session)) return <main className="tn-auth-shell" role="status" aria-live="polite"><Loading text="正在进入系统…" /></main>;
|
||||
if (isSessionBootstrapping(session)) return <main className="tn-auth-shell" role="status" aria-live="polite"><BeamLoading text="正在进入系统…" /></main>;
|
||||
if (session.status === "error") return <main className="tn-auth-shell"><div className="tn-auth-panel"><h1 className="tn-page-title">无法连接服务</h1><p className="tn-page-subtitle">{session.error || "服务暂时无法连接，请稍后重试或检查网络状态。"}</p><Button theme="primary" onClick={() => void dispatch(bootstrapSession())}>重新连接</Button></div></main>;
|
||||
if (!session.admin) return <LoginPage
|
||||
notice={session.initialized ? undefined : "系统尚未初始化管理员账号，请联系系统管理员完成初始配置后登录。"}
|
||||
@@ -104,7 +105,7 @@ function App() {
|
||||
: page === "audit" ? <AuditPage timezone={session.timezone} />
|
||||
: <UpdatePage timezone={session.timezone} notify={notify} />;
|
||||
|
||||
return <AppLayout activeId={page} adminName={session.admin.displayName} adminUsername={session.admin.username} onNavigate={onNavigate} onLogout={onLogout} onOpenPassword={() => { if (!passwordOpen) requestDiscard(() => setPasswordOpen(true)); }}><Suspense fallback={<main className="tn-page-loading" role="status" aria-live="polite"><Loading text="页面加载中…" /></main>}><div key={passwordOpen ? "password" : page} className="tn-page-transition">{content}</div></Suspense></AppLayout>;
|
||||
return <AppLayout activeId={page} adminName={session.admin.displayName} adminUsername={session.admin.username} onNavigate={onNavigate} onLogout={onLogout} onOpenPassword={() => { if (!passwordOpen) requestDiscard(() => setPasswordOpen(true)); }}><Suspense fallback={<main className="tn-page-loading" role="status" aria-live="polite"><BeamLoading text="页面加载中…" /></main>}><div key={passwordOpen ? "password" : page} className="tn-page-transition">{content}</div></Suspense></AppLayout>;
|
||||
}
|
||||
|
||||
function RouteErrorPage() {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { BeamLoading, BeamBar } from "../components/BeamLoading";
|
||||
import type { ReactNode } from "react";
|
||||
import { AlertCircle, Loader2 } from "lucide-react";
|
||||
import { Alert, Button, Card, Loading, Space, Tag } from "tdesign-react";
|
||||
@@ -26,10 +27,10 @@ export function AsyncState({ loading, error, empty, onRetry, children }: {
|
||||
onRetry?: () => void;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
if (loading && empty) return <div className="tn-empty" role="status" aria-live="polite"><Loading text="加载中…" /></div>;
|
||||
if (loading && empty) return <div className="tn-empty" role="status" aria-live="polite"><BeamLoading text="数据加载中…" /></div>;
|
||||
if (error && empty) return <div className="tn-empty" role="alert"><AlertCircle size={28} /><p>{error}</p>{onRetry && <Button variant="outline" onClick={onRetry}>重试</Button>}</div>;
|
||||
return <>
|
||||
{loading && <div className="tn-inline-loading" role="status"><Loader2 size={15} className="tn-spin" aria-hidden="true" />正在同步…</div>}
|
||||
{loading && <div className="tn-inline-loading" role="status"><BeamBar className="tn-beam-bar-sm" /> 正在同步…</div>}
|
||||
{error && <ErrorBanner message={error} onRetry={onRetry} />}
|
||||
{empty || children}
|
||||
</>;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { BeamLoading } from "../../components/BeamLoading";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { AlertCircle, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react";
|
||||
import { Alert, Button, Card, DatePicker, Empty, Loading, Space, Statistic, Table, Tag, Tooltip } from "tdesign-react";
|
||||
@@ -140,7 +141,7 @@ export default function DashboardPage({ timezone = "Asia/Shanghai", onNavigate }
|
||||
<div className="tn-page-actions"><div className="tn-dashboard-actions"><div className="tn-dashboard-month-control"><Tooltip content="上个月"><Button variant="outline" shape="square" onClick={() => shiftMonth(-1)} aria-label="上个月" icon={<ChevronLeft size={16} />} /></Tooltip><DatePicker className="tn-dashboard-month" mode="month" format="YYYY-MM" value={month} onChange={(value: any) => { const next = String(value || "").slice(0, 7); if (/^\d{4}-\d{2}$/.test(next)) setDashboardMonth(next); }} inputProps={{ "aria-label": "仪表盘月份" } as any} /><Tooltip content="下个月"><Button variant="outline" shape="square" onClick={() => shiftMonth(1)} aria-label="下个月" icon={<ChevronRight size={16} />} /></Tooltip></div><div className="tn-dashboard-secondary-actions"><Button className="tn-dashboard-refresh" variant="outline" onClick={() => void load()} disabled={loading} icon={<RefreshCw size={15} />}>刷新</Button><Button className="tn-dashboard-view" theme="primary" onClick={() => onNavigate?.("expenses", expensesSearch)}>查看账目</Button></div></div></div>
|
||||
</div>
|
||||
{error && hasCurrentSnapshot && <Alert theme="error" icon={<AlertCircle size={16} />} message={`刷新失败：${error}。当前展示的是本月最近一次成功加载的数据。`} />}
|
||||
{loading ? <div className="tn-empty" role="status" aria-live="polite"><Loading text="正在汇总本月数据…" /></div> : !hasCurrentSnapshot ? <div className="tn-empty" role="alert"><Alert theme="error" icon={<AlertCircle size={16} />} message={error || "暂时无法读取仪表盘数据"} /><Button variant="outline" onClick={() => void load()} icon={<RefreshCw size={15} />}>重新加载</Button></div> : <>
|
||||
{loading ? <div className="tn-empty" role="status" aria-live="polite"><BeamLoading text="正在汇总本月数据…" /></div> : !hasCurrentSnapshot ? <div className="tn-empty" role="alert"><Alert theme="error" icon={<AlertCircle size={16} />} message={error || "暂时无法读取仪表盘数据"} /><Button variant="outline" onClick={() => void load()} icon={<RefreshCw size={15} />}>重新加载</Button></div> : <>
|
||||
<div className="tn-dashboard-stats">
|
||||
<Card bordered className="tn-dashboard-stat tn-dashboard-stat-total"><Statistic title="本月总额" value={totalCents / 100} prefix="¥" decimalPlaces={2} /></Card>
|
||||
<Card bordered className="tn-dashboard-stat tn-dashboard-stat-count"><Statistic title="账目笔数" value={totalCount} suffix="笔" /></Card>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { BeamLoading } from "../../components/BeamLoading";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { AlertCircle, ArrowDownToLine, FileText, Image as ImageIcon, Loader2, Search, Settings, Trash2, X } from "lucide-react";
|
||||
import { Button, Dialog, Drawer, Loading, Space, Tag, Textarea, Tooltip } from "tdesign-react";
|
||||
@@ -57,7 +58,7 @@ export default function ExpenseDetail({ expense, timezone = "Asia/Shanghai", onC
|
||||
const remove = async () => { if (!removeTarget) return; const requires = removeTarget.kind === "invoice" && detail.invoiceCount <= 1 && !detail.invoiceMissingReason?.trim(); if (requires && !removeReason.trim()) { setRemoveError("请填写无发票原因"); return; } setBusy(true); setRemoveError(""); try { const body: { version: number; invoiceMissingReason?: string } = { version: detail.version }; if (requires) body.invoiceMissingReason = removeReason.trim(); const result = await api<{ expense: Expense }>(`/api/attachments/${removeTarget.id}`, { method: "DELETE", body: JSON.stringify(body) }); setDetail(result.expense); setRemoveTarget(null); notify?.("附件已删除", "success"); onUpdated(); } catch (caught) { if (!recoverConflict(caught, setRemoveError)) setRemoveError((caught as Error).message); } finally { setBusy(false); } };
|
||||
return <>
|
||||
<Drawer className="tn-content-drawer tn-detail-drawer" placement="right" size="520px" visible destroyOnClose header="账目详情" onClose={onClose} footer={<Space><Button onClick={() => setAction("status")} disabled={busy}>{detail.status === "reimbursed" ? "标记未报销" : "标记已报销"}</Button><Button theme="danger" onClick={() => setAction("trash")} disabled={busy}><Trash2 size={15} />移入回收站</Button></Space>}>
|
||||
{loading ? <div role="status" aria-live="polite"><Loading text="正在加载账目详情…" /></div> : error ? <div role="alert" className="expense-error"><AlertCircle size={16} />{error}<Button variant="text" onClick={load}>重试</Button></div> : <div className="expense-detail">
|
||||
{loading ? <div className="tn-drawer-loading-wrap" role="status" aria-live="polite"><BeamLoading text="正在加载账目详情…" /></div> : error ? <div role="alert" className="expense-error"><AlertCircle size={16} />{error}<Button variant="text" onClick={load}>重试</Button></div> : <div className="expense-detail">
|
||||
<div className="expense-detail-head"><strong>{money(detail.amountCents)}</strong><Button variant="outline" onClick={() => onRequestEdit(detail)}><Settings size={15} />编辑</Button></div>
|
||||
<dl><div><dt>支付时间</dt><dd>{dateText(detail.paidAt, timezone)}</dd></div><div><dt>发票</dt><dd>{detail.invoiceCount > 0 ? `${detail.invoiceCount} 张` : detail.invoiceMissingReason ? <><Tag theme="warning">无发票</Tag>：{detail.invoiceMissingReason}</> : <Tag theme="danger">未说明</Tag>}</dd></div><div><dt>状态</dt><dd><Tag theme={detail.status === "reimbursed" ? "success" : "warning"}>{detail.status === "reimbursed" ? "已报销" : "未报销"}</Tag></dd></div><div><dt>备注</dt><dd>{detail.note || "无"}</dd></div></dl>
|
||||
<h3>附件 <small>{detail.attachments?.length || 0}</small></h3><div className="expense-attachments">{(detail.attachments || []).map(a => { const protectsLastProof = a.kind === "payment_proof" && detail.paymentProofCount <= 1; return <div className="expense-attachment" key={a.id}><span title={a.originalName}>{a.mimeType.startsWith("image/") ? <ImageIcon size={16} /> : <FileText size={16} />} {a.originalName}<small>{formatBytes(a.sizeBytes)}</small></span><Space>{a.previewable && <Tooltip content="预览附件" placement="left"><Button variant="text" shape="circle" onClick={() => setPreview(a)} aria-label={`预览 ${a.originalName}`}><Search size={15} /></Button></Tooltip>}<Tooltip content="下载附件" placement="left"><Button variant="text" shape="circle" onClick={() => { window.location.href = `/api/attachments/${a.id}/content?download=1`; }} aria-label={`下载 ${a.originalName}`}><ArrowDownToLine size={15} /></Button></Tooltip><Tooltip content={protectsLastProof ? "至少保留一张付款凭证" : "删除附件"} placement="left"><Button variant="text" shape="circle" theme="danger" disabled={protectsLastProof} onClick={() => { setRemoveReason(""); setRemoveError(""); setRemoveTarget(a); }} aria-label={protectsLastProof ? `不可删除最后一张付款凭证 ${a.originalName}` : `删除 ${a.originalName}`}><Trash2 size={14} /></Button></Tooltip></Space></div>; })}</div>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { BeamLoading } from "../../components/BeamLoading";
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { AlertCircle, ChevronLeft, ChevronRight, ClipboardList, FileDown, FileText, Pencil, Plus, RefreshCw, Search, Trash2, X } from "lucide-react";
|
||||
import { Button, Checkbox, DatePicker, Dialog, Loading, Radio, Space, Table, Tag, Tooltip } from "tdesign-react";
|
||||
@@ -124,7 +125,7 @@ export default function ExpensesPage({ timezone: timezoneProp = "Asia/Shanghai",
|
||||
<div className="tn-summary expenses-summary"><span>{summary.count} 笔</span><strong>{money(summary.amountCents)}</strong>{selectedKeys.length > 0 && <><span>已选 {selectedKeys.length} 笔，共 {money(selectedTotal)}</span><Button variant="text" onClick={() => setSelectedKeys([])}>清除选择</Button></>}</div>
|
||||
{exportIssue && <div className="tn-export-status" role="status"><RefreshCw size={15} className="spin" /><span>{exportIssue}</span><Button variant="text" onClick={() => { setExportIssue(""); rememberExportJob(null); }}>关闭提示</Button></div>}
|
||||
{error && <div className="expense-error" role="alert"><AlertCircle size={16} />{error}<Button variant="text" onClick={() => void load()}>重试</Button></div>}
|
||||
{error ? null : !dataReady || (loading && !items.length) ? <div className="tn-empty" role="status" aria-live="polite"><Loading text="加载中…" /></div> : !items.length ? emptyState : <div className="tn-table-wrap" role="region" aria-label="账目列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} selectedRowKeys={selectedKeys} onSelectChange={(keys: any[]) => setSelectedKeys(keys as string[])} hover stripe /></div>}
|
||||
{error ? null : !dataReady || (loading && !items.length) ? <div className="tn-empty" role="status" aria-live="polite"><BeamLoading text="正在加载账目列表…" /></div> : !items.length ? emptyState : <div className="tn-table-wrap" role="region" aria-label="账目列表，可横向滚动查看更多列"><Table rowKey="id" data={items} columns={columns as any} selectedRowKeys={selectedKeys} onSelectChange={(keys: any[]) => setSelectedKeys(keys as string[])} hover stripe /></div>}
|
||||
{drawer === "new" && <ExpenseDrawer timezone={timezone} onClose={() => setDrawer(null)} onSaved={load} notify={notify} />}{drawer === "edit" && selected && <ExpenseDrawer timezone={timezone} expense={selected} onClose={() => setDrawer(null)} onSaved={load} notify={notify} />}{drawer === "detail" && selected && <ExpenseDetail timezone={timezone} expense={selected} onClose={() => setDrawer(null)} onUpdated={load} onRequestEdit={e => { setSelected(e); setDrawer("edit"); }} notify={notify} />}
|
||||
{trashTarget && <Dialog width="540px" visible header="移入回收站？" confirmBtn={{ content: "移入回收站", theme: "danger", loading: trashing, disabled: trashing }} cancelBtn="取消" onClose={() => { if (!trashing) setTrashTarget(null); }} onConfirm={() => void moveToTrash()} onCancel={() => { if (!trashing) setTrashTarget(null); }}>确认将“{trashTarget.note || `${dateText(trashTarget.paidAt, timezone)}的账目`}”移入回收站？移入后将不在正常列表中展示，关联附件将完整保留，可随时恢复。</Dialog>}
|
||||
</div>;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { BeamLoading, BeamBar } from "../../components/BeamLoading";
|
||||
import { useState, useEffect, useRef, useMemo, type ReactNode } from "react";
|
||||
import {
|
||||
RefreshCw,
|
||||
@@ -48,6 +49,8 @@ export interface UpdateJob {
|
||||
version: string;
|
||||
platform: string;
|
||||
assetName?: string | null;
|
||||
assetUrl?: string | null;
|
||||
releaseUrl?: string | null;
|
||||
sizeBytes?: number | null;
|
||||
downloadedBytes?: number | null;
|
||||
downloadStartedAt?: number | string | null;
|
||||
@@ -73,6 +76,8 @@ export interface LatestRelease {
|
||||
releaseNotes?: string;
|
||||
body?: string;
|
||||
releaseUrl?: string;
|
||||
metadataUrl?: string;
|
||||
assetUrl?: string;
|
||||
compatible: boolean;
|
||||
integrityReady: boolean;
|
||||
assetName: string;
|
||||
@@ -609,8 +614,7 @@ export default function UpdatePage({
|
||||
|
||||
{loading && !info ? (
|
||||
<Surface className="tn-update-loading-surface">
|
||||
<RefreshCw size={24} className="tn-spin text-primary" />
|
||||
<p>正在读取系统更新服务状态…</p>
|
||||
<BeamLoading text="正在读取系统更新服务状态…" />
|
||||
</Surface>
|
||||
) : !info ? (
|
||||
<Surface className="tn-empty-surface">
|
||||
@@ -662,7 +666,7 @@ export default function UpdatePage({
|
||||
{info.checkedAt ? dateText(info.checkedAt, timezone) : "未检查"}
|
||||
</div>
|
||||
<div className="tn-metric-foot">
|
||||
<small>数据源: 官方发布渠道</small>
|
||||
<small>源: git.awaioi.com (HTTPS)</small>
|
||||
</div>
|
||||
</Surface>
|
||||
</div>
|
||||
@@ -709,10 +713,32 @@ export default function UpdatePage({
|
||||
</div>
|
||||
<div className="tn-ascii-info-item">
|
||||
<span className="tn-ascii-info-label">下载策略:</span>
|
||||
<span className="tn-ascii-info-val">后台静默传输</span>
|
||||
<span className="tn-ascii-info-val">应用内流式直连 (零调度等待)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 14, padding: "10px 14px", background: "var(--tn-navy-50)", border: "1px solid var(--tn-navy-100)", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 8, fontSize: "12.5px" }}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 260, flex: 1 }}>
|
||||
<span style={{ color: "var(--tn-navy-800)", fontWeight: 500 }}>
|
||||
安装包下载直链 ({latest.assetName || "发布包"}):
|
||||
</span>
|
||||
<code style={{ fontSize: "11.5px", color: "var(--tn-navy-600)", wordBreak: "break-all" }}>
|
||||
{latest.assetUrl || `https://git.awaioi.com/awaioi/TallyNote/releases/download/v${latest.version}/${latest.assetName || `tallynote-${latest.version}-linux-x64-glibc.tar.gz`}`}
|
||||
</code>
|
||||
</div>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const url = latest.assetUrl || `https://git.awaioi.com/awaioi/TallyNote/releases/download/v${latest.version}/${latest.assetName || `tallynote-${latest.version}-linux-x64-glibc.tar.gz`}`;
|
||||
navigator.clipboard.writeText(url);
|
||||
notify?.("已复制安装包下载直链", "success");
|
||||
}}
|
||||
>
|
||||
复制直链
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="tn-ascii-release-actions">
|
||||
{canDownload && (
|
||||
<Button
|
||||
@@ -852,7 +878,10 @@ export default function UpdatePage({
|
||||
{/* 场景 A: 实时下载中态 (Exact ASCII) */}
|
||||
{job?.status === "downloading" && (
|
||||
<div className="tn-modal-card-box">
|
||||
<div className="tn-modal-card-title">正在从官方发布渠道下载更新包...</div>
|
||||
<div className="tn-modal-card-title">正在从官方源直接流式拉取更新包...</div>
|
||||
<div style={{ fontSize: "12px", color: "var(--tn-navy-600)", margin: "-4px 0 12px 0", wordBreak: "break-all" }}>
|
||||
请求地址: <code>{job.assetUrl || latest?.assetUrl || `https://git.awaioi.com/awaioi/TallyNote/releases/download/v${latest?.version || job.version}/${job.assetName || "release.tar.gz"}`}</code>
|
||||
</div>
|
||||
<div
|
||||
className="tn-progress-stream"
|
||||
role="progressbar"
|
||||
@@ -877,7 +906,7 @@ export default function UpdatePage({
|
||||
</div>
|
||||
|
||||
<div className="tn-modal-info-note">
|
||||
[i] 更新包在后台独立下载，数据经 TLS 加密传输，不影响当前系统的正常记账与导出操作。
|
||||
[i] 更新包由应用进程直接流式拉取并自动比对 SHA-256 校验和，0 秒秒级启动，无需等待外部系统守护进程调度。
|
||||
</div>
|
||||
|
||||
<div className="tn-modal-actions-bar">
|
||||
@@ -888,22 +917,18 @@ export default function UpdatePage({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 场景 B: 任务调度中 (queued) (Exact ASCII) */}
|
||||
{/* 场景 B: 建立连接中 (queued) (Exact ASCII) */}
|
||||
{job?.status === "queued" && (
|
||||
<div className="tn-modal-card-box">
|
||||
<div className="tn-modal-card-title">
|
||||
<RefreshCw size={15} className="tn-spin" style={{ display: "inline-block", marginRight: 8, verticalAlign: "middle" }} />
|
||||
正在等待后台系统守护进程认领任务...
|
||||
<div style={{ marginBottom: 12 }}><BeamBar width={160} /></div>正在建立与官方 Git 仓库的流式传输连接...
|
||||
</div>
|
||||
<div style={{ fontSize: "13.5px", color: "var(--tn-navy-900)", marginBottom: 8 }}>
|
||||
已等待: <strong>{queuedSeconds} 秒</strong> (超过 20 秒未响应将自动超时释放，避免系统死锁)
|
||||
<div style={{ fontSize: "12px", color: "var(--tn-navy-600)", margin: "4px 0 14px 0", wordBreak: "break-all" }}>
|
||||
目标地址: <code>{job.assetUrl || latest?.assetUrl || "https://git.awaioi.com"}</code>
|
||||
</div>
|
||||
<p className="text-secondary" style={{ fontSize: "13px", margin: "0 0 16px 0", lineHeight: 1.6 }}>
|
||||
若长时间未开始，通常为后台守护服务未激活，您可以点击下方按钮立即取消排队。
|
||||
</p>
|
||||
<div className="tn-modal-actions-bar">
|
||||
<Button theme="primary" variant="outline" onClick={() => void cancelJob()} loading={cancelling} disabled={cancelling}>
|
||||
主动取消排队
|
||||
<Button variant="outline" onClick={() => void cancelJob()} loading={cancelling} disabled={cancelling}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -941,8 +966,8 @@ export default function UpdatePage({
|
||||
{/* 场景 D: 数据快照备份中或服务重启中 (backing_up / applying) (Exact ASCII) */}
|
||||
{(job?.status === "backing_up" || job?.status === "applying") && (
|
||||
<div className="tn-modal-card-box">
|
||||
<div className="tn-modal-card-title" style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<RefreshCw size={18} className="tn-spin" />
|
||||
<div className="tn-modal-card-title">
|
||||
<div style={{ marginBottom: 12 }}><BeamBar width={180} /></div>
|
||||
服务正在平滑重启并执行健康检查...
|
||||
</div>
|
||||
<div style={{ fontSize: "14px", color: "var(--tn-navy-900)", margin: "10px 0 8px" }}>
|
||||
|
||||
+266
-10
@@ -100,11 +100,121 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
|
||||
.tn-route-error-panel { width: min(420px, 100%); padding: 30px; border: 1px solid var(--tn-border); border-radius: 4px; background: var(--tn-surface); box-shadow: 0 14px 36px rgba(11, 58, 136, .08); }
|
||||
.tn-route-error-panel h1 { margin: 0; color: var(--tn-text); font-size: 22px; }
|
||||
.tn-route-error-panel p { margin: 10px 0 20px; color: var(--tn-text-secondary); overflow-wrap: anywhere; }
|
||||
.t-notification { width: min(360px, calc(100vw - 32px)); max-width: calc(100vw - 32px); border: 1px solid var(--tn-border); border-left-width: 1px; border-radius: 4px; box-shadow: 0 10px 26px rgba(11, 58, 136, .14); }
|
||||
/* TDesign mounts this wrapper directly under body. Keep one viewport inset
|
||||
at every breakpoint so notices remain fully visible while the page resizes. */
|
||||
.t-notification__show--top-right { right: 16px; }
|
||||
.t-notification__content { color: var(--tn-text); }
|
||||
/* ============================================================
|
||||
Toast 样式四：柔和语义双层卡片 (Soft Tinted Card / 严格水平对齐)
|
||||
============================================================ */
|
||||
.t-notification {
|
||||
width: min(380px, calc(100vw - 32px)) !important;
|
||||
max-width: calc(100vw - 32px) !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 12px 16px !important;
|
||||
box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04) !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
box-sizing: border-box !important;
|
||||
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
|
||||
}
|
||||
.t-notification__show--top-right {
|
||||
right: 20px !important;
|
||||
}
|
||||
|
||||
/* 核心对齐修复：清除 TDesign 默认的 margin-top: 8px 导致的文字下沉不居中 */
|
||||
.t-notification__main {
|
||||
flex: 1 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.t-notification__content {
|
||||
color: inherit !important;
|
||||
font-size: 13.5px !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 1.4 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
display: block !important;
|
||||
word-break: break-word !important;
|
||||
}
|
||||
.t-notification__icon {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
flex-shrink: 0 !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
.t-notification__icon .t-icon {
|
||||
font-size: 18px !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
display: block !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.t-notification__close {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 0 0 auto !important;
|
||||
padding: 0 !important;
|
||||
height: 20px !important;
|
||||
width: 20px !important;
|
||||
line-height: 1 !important;
|
||||
color: inherit !important;
|
||||
opacity: 0.55 !important;
|
||||
cursor: pointer !important;
|
||||
transition: opacity 0.15s ease !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
.t-notification__close:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Success: 柔和薄荷浅绿 */
|
||||
.t-notification.t-is-success {
|
||||
background: #f0fdf4 !important;
|
||||
border: 1px solid #bbf7d0 !important;
|
||||
color: #166534 !important;
|
||||
}
|
||||
.t-notification.t-is-success .t-notification__icon {
|
||||
color: #16a34a !important;
|
||||
}
|
||||
|
||||
/* Info: 柔和天空浅蓝 */
|
||||
.t-notification.t-is-info {
|
||||
background: #eff6ff !important;
|
||||
border: 1px solid #bfdbfe !important;
|
||||
color: #1e40af !important;
|
||||
}
|
||||
.t-notification.t-is-info .t-notification__icon {
|
||||
color: #2563eb !important;
|
||||
}
|
||||
|
||||
/* Warning: 柔和金橙浅黄 */
|
||||
.t-notification.t-is-warning {
|
||||
background: #fffbeb !important;
|
||||
border: 1px solid #fde68a !important;
|
||||
color: #92400e !important;
|
||||
}
|
||||
.t-notification.t-is-warning .t-notification__icon {
|
||||
color: #d97706 !important;
|
||||
}
|
||||
|
||||
/* Error: 柔和玫瑰浅红 */
|
||||
.t-notification.t-is-error {
|
||||
background: #fef2f2 !important;
|
||||
border: 1px solid #fecaca !important;
|
||||
color: #991b1b !important;
|
||||
}
|
||||
.t-notification.t-is-error .t-notification__icon {
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
|
||||
.tn-layout { width: 100%; height: 100%; min-height: 100vh; display: flex; flex-direction: row !important; background: var(--tn-page); overflow: hidden; }
|
||||
.tn-desktop-menu { position: relative; top: 0; z-index: 30; display: block; width: 232px; height: 100%; flex: 0 0 232px; min-height: 100%; overflow: hidden; border-right: 1px solid var(--tn-border); background: var(--tn-surface); transition: width .22s ease, flex-basis .22s ease, opacity .22s ease; }
|
||||
@@ -201,7 +311,59 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
|
||||
.tn-action-group .t-button { color: var(--tn-text-secondary); }
|
||||
.tn-action-group .t-button:not(.t-button--theme-danger):hover { color: var(--tn-blue-700); background: var(--tn-blue-100); }
|
||||
.tn-action-group .t-button.t-button--theme-danger:hover { color: var(--tn-danger); background: #fff0f0; }
|
||||
.tn-empty { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 10px; padding: 48px 20px; color: var(--tn-text-muted); text-align: center; }
|
||||
/* Absolutely Centered Loading and Empty States */
|
||||
.tn-empty {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
min-height: max(380px, calc(100vh - 320px)) !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
flex: 1 !important;
|
||||
gap: 12px !important;
|
||||
padding: 40px 20px !important;
|
||||
color: var(--tn-text-muted) !important;
|
||||
text-align: center !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
.expenses-page .tn-empty,
|
||||
.tn-dashboard-page .tn-empty,
|
||||
.tn-audit-table .tn-empty {
|
||||
min-height: max(400px, calc(100vh - 300px)) !important;
|
||||
}
|
||||
.tn-detail-drawer .tn-empty,
|
||||
.tn-detail-drawer .t-drawer__body > div[role="status"] {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
min-height: calc(100vh - 180px) !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.tn-auth-shell {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
min-height: 100vh !important;
|
||||
height: 100% !important;
|
||||
padding: 24px !important;
|
||||
background: var(--tn-page) !important;
|
||||
}
|
||||
.tn-page-loading {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
min-height: calc(100vh - 120px) !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
padding: 32px 20px !important;
|
||||
color: var(--tn-text-muted) !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
.tn-page-loading { display: grid; min-width: 0; min-height: 100%; place-items: center; align-content: center; gap: 10px; padding: 32px 20px; color: var(--tn-text-muted); text-align: center; }
|
||||
.tn-empty p { margin: 0; color: var(--tn-text-secondary); }
|
||||
.tn-selection { display: flex; align-items: center; gap: 14px; padding: 10px 12px; margin: 10px 0; border-left: 3px solid var(--tn-success); background: #eff7f2; color: #24543f; }
|
||||
@@ -1421,10 +1583,18 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.tn-modal-card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--tn-navy-900);
|
||||
margin-bottom: 14px;
|
||||
font-size: 15px !important;
|
||||
font-weight: 600 !important;
|
||||
color: var(--tn-navy-900) !important;
|
||||
margin-bottom: 14px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
.tn-modal-card-title svg {
|
||||
flex-shrink: 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
.tn-modal-metrics-row {
|
||||
display: flex;
|
||||
@@ -1467,3 +1637,89 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================
|
||||
方案二：平滑极光光流条 (Beam Bar / Shimmer) 全局动效规范
|
||||
============================================================ */
|
||||
.tn-beam-loading {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 16px !important;
|
||||
padding: 40px 20px !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
flex: 1 !important;
|
||||
margin: auto !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
.tn-beam-bar {
|
||||
width: 140px;
|
||||
height: 4px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.tn-beam-bar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -60px;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, var(--tn-blue-600), transparent);
|
||||
border-radius: 4px;
|
||||
animation: tn-beam-flow 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
.tn-beam-bar-sm {
|
||||
width: 60px !important;
|
||||
height: 3px !important;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tn-beam-bar-sm::after {
|
||||
width: 30px;
|
||||
animation: tn-beam-flow-sm 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes tn-beam-flow {
|
||||
0% { left: -60px; }
|
||||
100% { left: 140px; }
|
||||
}
|
||||
|
||||
@keyframes tn-beam-flow-sm {
|
||||
0% { left: -30px; }
|
||||
100% { left: 60px; }
|
||||
}
|
||||
|
||||
.tn-beam-text {
|
||||
font-size: 13.5px;
|
||||
color: var(--tn-text-secondary);
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
/* 彻底隐去 TDesign 默认圆环旋转圈圈，统一切换为沉稳光流 */
|
||||
.t-loading__gradient {
|
||||
display: none !important;
|
||||
}
|
||||
.t-loading {
|
||||
display: inline-flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 12px !important;
|
||||
}
|
||||
|
||||
.tn-drawer-loading-wrap {
|
||||
min-height: max(420px, calc(100vh - 200px)) !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user