style(supply-chain): 移除多处页面标题/说明块与冗余计数文本(工具条保持右对齐)

This commit is contained in:
WuYongJie 2026-10-07 17:58:42 +08:00
parent 5b8e1945af
commit 62f693223f
10 changed files with 60 additions and 93 deletions

View File

@ -4213,21 +4213,24 @@ export default function OaBoardClient({
</section>
) : null}
<header className="flex h-8 shrink-0 items-center justify-between px-1">
<h1 className="text-sm font-apple-semibold text-apple-label-primary">{activeTabLabel}</h1>
<span className="inline-flex items-center gap-2 text-[11px] text-apple-label-secondary">
<LoaderCircle className={`h-3.5 w-3.5 ${isPending ? 'animate-spin' : ''}`} />
{activeTab === 'summary'
? `${overviewItems.length} 条流程`
: showingDailyReport && dailyReport
? `${dailyReport.reportDate} 日报`
: showingMonthlyReport && monthlyReport
? `${monthlyReport.reportMonth} 月度分析`
: activeTab === 'brand-planning'
? 'SKU 维度'
: `${items.length} 条命中`}
</span>
</header>
{/* 供应链中心内嵌页(embeddedTab)不需要这行标题/统计条;独立的新品流程看板页保持原样 */}
{embeddedTab ? null : (
<header className="flex h-8 shrink-0 items-center justify-between px-1">
<h1 className="text-sm font-apple-semibold text-apple-label-primary">{activeTabLabel}</h1>
<span className="inline-flex items-center gap-2 text-[11px] text-apple-label-secondary">
<LoaderCircle className={`h-3.5 w-3.5 ${isPending ? 'animate-spin' : ''}`} />
{activeTab === 'summary'
? `${overviewItems.length} 条流程`
: showingDailyReport && dailyReport
? `${dailyReport.reportDate} 日报`
: showingMonthlyReport && monthlyReport
? `${monthlyReport.reportMonth} 月度分析`
: activeTab === 'brand-planning'
? 'SKU 维度'
: `${items.length} 条命中`}
</span>
</header>
)}
{showingDailyReport && dailyReport ? (
<DailyReportPanel report={dailyReport} onReportDateChange={changeReportDate} />

View File

@ -263,7 +263,28 @@ export function CategoryConfigPanel({ canEdit }: { canEdit: boolean }) {
return (
<div className="category-config-table-page">
<div className="category-table-actions">
<span className="category-table-meta">共 {pageInfo.total} 行</span>
<form className="category-table-filters" onSubmit={submitSearch}>
<label className="category-table-search">
<Search size={15} />
<input value={searchInput} onChange={(event) => setSearchInput(event.target.value)} placeholder="搜索一级/二级类目、分类或规模标签" />
</label>
<select value={groupFilter} onChange={(event) => { setPage(1); setGroupFilter(event.target.value) }} aria-label="分类筛选">
<option value="ALL">全部分类</option>
<option value="NONE">未分类</option>
{groups.map((group) => <option key={group} value={group}>{group}</option>)}
</select>
<select value={labelFilter} onChange={(event) => { setPage(1); setLabelFilter(event.target.value) }} aria-label="规模标签筛选">
<option value="ALL">全部规模标签</option>
{CATEGORY_GROUP_SCALE_LABELS.map((label) => <option key={label} value={label}>{label}</option>)}
</select>
<button type="submit" className="category-table-button">搜索</button>
<button type="button" className="category-table-button" title="清空搜索、分类、规模标签筛选" onClick={resetFilters}>
重置
</button>
<button type="button" className="category-table-icon-button" title="刷新" aria-label="刷新" onClick={() => void load()}>
<RefreshCw size={15} />
</button>
</form>
{canEdit ? (
<>
<button type="button" className="category-table-button" onClick={() => void downloadTemplate()}>
@ -298,29 +319,6 @@ export function CategoryConfigPanel({ canEdit }: { canEdit: boolean }) {
) : null}
</div>
<form className="category-table-filters" onSubmit={submitSearch}>
<label className="category-table-search">
<Search size={15} />
<input value={searchInput} onChange={(event) => setSearchInput(event.target.value)} placeholder="搜索一级/二级类目、分类或规模标签" />
</label>
<select value={groupFilter} onChange={(event) => { setPage(1); setGroupFilter(event.target.value) }} aria-label="分类筛选">
<option value="ALL">全部分类</option>
<option value="NONE">未分类</option>
{groups.map((group) => <option key={group} value={group}>{group}</option>)}
</select>
<select value={labelFilter} onChange={(event) => { setPage(1); setLabelFilter(event.target.value) }} aria-label="规模标签筛选">
<option value="ALL">全部规模标签</option>
{CATEGORY_GROUP_SCALE_LABELS.map((label) => <option key={label} value={label}>{label}</option>)}
</select>
<button type="submit" className="category-table-button">搜索</button>
<button type="button" className="category-table-button" title="清空搜索、分类、规模标签筛选" onClick={resetFilters}>
重置
</button>
<button type="button" className="category-table-icon-button" title="刷新" aria-label="刷新" onClick={() => void load()}>
<RefreshCw size={15} />
</button>
</form>
<div className="category-table-wrap">
<table className="category-table">
<thead>
@ -422,9 +420,10 @@ export function CategoryConfigPanel({ canEdit }: { canEdit: boolean }) {
<style jsx>{`
.category-config-table-page { position: relative; display: flex; flex: 1; min-height: 0; flex-direction: column; }
.category-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 28px 0; flex-wrap: wrap; }
.category-table-meta { margin-right: auto; color: #71717a; font-size: 12px; white-space: nowrap; }
.category-table-filters { display: flex; align-items: center; gap: 8px; padding: 12px 28px; flex-wrap: wrap; }
/* 筛选/按钮条与表头之间加灰色分割线,避免与 #f4f4f5 表头糊在一起 */
.category-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 28px; border-bottom: 1px solid #e4e4e7; flex-wrap: wrap; }
/* 筛选组靠左、右侧按钮组保持原间距整体靠右(margin-right:auto 把筛选推到最左) */
.category-table-filters { display: flex; align-items: center; gap: 8px; margin-right: auto; padding: 0; flex-wrap: wrap; }
.category-table-search { display: flex; height: 34px; width: min(340px, 36vw); align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #d4d4d8; border-radius: 5px; color: #71717a; background: #fff; }
.category-table-search input { width: 100%; border: 0; outline: 0; color: #27272a; font-size: 13px; background: transparent; }
select { height: 34px; padding: 0 28px 0 10px; border: 1px solid #d4d4d8; border-radius: 5px; background: #fff; color: #3f3f46; font-size: 13px; }
@ -478,7 +477,7 @@ export function CategoryConfigPanel({ canEdit }: { canEdit: boolean }) {
.category-table-modal-actions button { height: 34px; padding: 0 13px; border: 1px solid #d4d4d8; border-radius: 5px; background: #fff; color: #52525b; cursor: pointer; }
.category-table-modal-actions button.primary { border-color: #27272a; background: #27272a; color: #fff; }
.category-table-modal-actions button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 760px) { .category-table-actions { padding: 12px 18px 0; } .category-table-filters { padding: 12px 18px; } .category-table-search { width: 100%; } .category-table-wrap { padding: 0 18px 72px; } .category-table-pagination { bottom: 12px; gap: 6px; padding: 7px 10px; overflow-x: auto; } .category-table-page-total { display: none; } .category-table-modal-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .category-table-actions { padding: 12px 18px; } .category-table-search { width: 100%; } .category-table-wrap { padding: 0 18px 72px; } .category-table-pagination { bottom: 12px; gap: 6px; padding: 7px 10px; overflow-x: auto; } .category-table-page-total { display: none; } .category-table-modal-grid { grid-template-columns: 1fr; } }
`}</style>
</div>
)

View File

@ -6,15 +6,9 @@ import { CategoryConfigPanel } from './CategoryConfigPanel'
export function CategoryConfigView({ canEdit }: { canEdit: boolean }) {
return (
<div className="category-config-page">
<header className="category-config-toolbar">
<h1>产品全量档案-类目配置</h1>
</header>
<CategoryConfigPanel canEdit={canEdit} />
<style jsx>{`
.category-config-page { position: relative; display: flex; flex: 1; min-height: 0; flex-direction: column; background: #fafafa; color: #27272a; }
.category-config-toolbar { display: flex; align-items: center; padding: 18px 28px 14px; border-bottom: 1px solid #e4e4e7; background: #fff; }
h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: 0; }
@media (max-width: 760px) { .category-config-toolbar { padding: 16px 18px 12px; } }
`}</style>
<SupplyChainConfigThemeStyles />
</div>

File diff suppressed because one or more lines are too long

View File

@ -17,18 +17,6 @@
background: var(--sc-surface);
}
.filterTitle {
display: flex;
flex: 0 0 auto;
height: 34px;
align-items: center;
gap: 5px;
padding-right: 8px;
color: var(--sc-muted);
font-size: 12px;
white-space: nowrap;
}
.filters label {
display: flex;
flex-direction: column;

View File

@ -1,4 +1,4 @@
import { Filter, RefreshCw, Search } from 'lucide-react'
import { RefreshCw, Search } from 'lucide-react'
import { redirect } from 'next/navigation'
import { requireSession } from '@/lib/server-session'
import { supplyChainPermissionSettingsService } from '@/server/services/supply-chain-permission-settings.service'
@ -117,10 +117,6 @@ export default async function DropshipIssuesPage({
{selectedCreators.length > 0 && (
<input type="hidden" name="creators" value={selectedCreators.join(',')} />
)}
<div className={styles.filterTitle}>
<Filter size={15} />
<span>筛选</span>
</div>
<label className={styles.selectField}>
<span>业绩范围</span>
<select
@ -132,7 +128,6 @@ export default async function DropshipIssuesPage({
</select>
</label>
<label className={styles.keywordField}>
<span>商品检索</span>
<input
name="keyword"
type="search"

View File

@ -173,7 +173,6 @@ export function FinishedProductProgressClient({ initialData, currentUserName, ca
return <main className="finished-product-page">
<header className="finished-product-toolbar">
<div><h1>成品进度明细</h1><p>维护采购成品订单交期、送货数量、在途数量、备注和当前节点</p></div>
<div className="finished-product-actions">
<FinishedProductColumnSettings visibleKeys={columns.visibleKeySet} hiddenCount={columns.hiddenCount} onToggle={columns.toggle} onShowAll={columns.showAll} onHideAll={columns.hideAll} onReorder={columns.reorder} onResetDefault={columns.resetToDefault} />
{canEdit && <button type="button" disabled={selectedIds.size === 0} onClick={openContractGroupEditor} className="finished-control-button" title="批量修改已勾选的明细"><Layers3 size={15} />批量修改</button>}

View File

@ -1,6 +1,6 @@
export const finishedProductProgressStyles = String.raw`
.finished-product-page{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#f5f6f6;color:#27272a}
.finished-product-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid #e4e4e7;background:#fff}
.finished-product-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px;padding:18px 24px;border-bottom:1px solid #e4e4e7;background:#fff}
.finished-product-toolbar h1{margin:0;font-size:18px;font-weight:750;letter-spacing:0}.finished-product-toolbar p{margin:4px 0 0;color:#71717a;font-size:12px}
.finished-product-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.finished-control-button,.finished-primary-button,.finished-secondary-button,.finished-page-button,.finished-row-button,.finished-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d4d4d8;border-radius:5px;background:#fff;color:#3f3f46;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}

View File

@ -80,10 +80,6 @@ export function SupplierInformationView({
return (
<main className="supplier-information-page">
<header className="supplier-toolbar">
<div className="supplier-title-wrap">
<h1>供应商信息</h1>
<span>共 {pageInfo.total} 条</span>
</div>
<div className="supplier-toolbar-actions">
<a href="/api/supply-chain/supplier-information/template">
<Download size={14} /> 下载模板
@ -211,18 +207,11 @@ export function SupplierInformationView({
display: flex;
min-height: 54px;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
padding: 9px 18px;
border-bottom: 1px solid var(--sc-border);
background: var(--sc-surface);
}
.supplier-title-wrap {
display: flex;
align-items: baseline;
gap: 10px;
}
.supplier-title-wrap h1 { margin: 0; font-size: 17px; font-weight: 700; }
.supplier-title-wrap span { color: var(--sc-subtle); font-size: 12px; }
.supplier-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.supplier-toolbar-actions a,
.supplier-toolbar-actions button { display: inline-flex; height: 34px; align-items: center; gap: 5px; border: 1px solid var(--sc-border); border-radius: 5px; padding: 0 11px; background: var(--sc-surface); color: var(--sc-muted); font-size: 12px; text-decoration: none; cursor: pointer; }