CNWei/stash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): 首页卡片配置 + 页头开关验证 + 编辑按钮仅登录可见

Browse Source 
- settings.sections：显隐 / 顺序 / 标题覆盖 / 预览条数，HomeView 应用
- /admin 新增「首页卡片」Tab，卡片标题使用展示块标题（常用站点等）
- 详情页 [编辑] 仅在登录后渲染（canEdit）
- 测试：46 passed；页头禁用、卡片隐藏/改标题/限条数、编辑可见性均实测
- 文档：ADMIN-PLAN、README
This commit is contained in:
stash
2026-10-29 19:21:34 +08:00
parent 8f688885ed
commit 3c6c20e534
10 changed files with 251 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stash-web/src/components/admin/AdminPage.tsx
+116 -1
View File
@@ -20,6 +20,7 @@ import {
saveSettings,
TONE_OPTIONS,
type HeaderItem,
type SectionSettings,
type SettingsDocument,
type SettingsTone,
type SiteSettings,
@@ -31,7 +32,12 @@ import {
* 只做「全局配置」；条目内容仍在详情页就地编辑（P2）。
* 保存用 `version` 乐观锁，冲突时提示刷新。
*/
type CategorySummary = { id: string; title: string }
type CategorySummary = {
id: string
title: string
/** 首页卡片标题（配了展示块时用块的标题，如「常用站点」） */
block?: { title?: string } | null
}
const clone = (settings: SiteSettings): SiteSettings => structuredClone(settings)
@@ -137,6 +143,7 @@ export function AdminPage() {
<Tabs
items={[
{ key: 'header', label: '页头滚动信息' },
{ key: 'sections', label: '首页卡片' },
{ key: 'sidebar', label: '侧栏导航' },
{ key: 'system', label: '系统' },
]}
@@ -155,6 +162,12 @@ export function AdminPage() {
value={draft.header}
onChange={(header) => setDraft({ ...draft, header })}
/>
) : tab === 'sections' ? (
<SectionForm
categories={categories}
value={draft.sections}
onChange={(sections) => setDraft({ ...draft, sections })}
/>
) : tab === 'sidebar' ? (
<SidebarForm
categories={categories}
@@ -365,6 +378,108 @@ function SidebarForm({
)
}
// ---------- 首页卡片表单 ----------
function SectionForm({
categories,
value,
onChange,
}: {
categories: CategorySummary[]
value: SectionSettings
onChange: (sections: SectionSettings) => void
}) {
const cards = useMemo(() => {
const base = [
{ id: 'local', title: '本地服务' },
...categories
.filter((category) => category.id !== 'local')
.map((category) => ({
id: category.id,
title: category.block?.title ?? category.title,
})),
]
const ranks = new Map(value.order.map((id, index) => [id, index]))
return [...base].sort((a, b) => {
const left = ranks.get(a.id) ?? Number.MAX_SAFE_INTEGER
const right = ranks.get(b.id) ?? Number.MAX_SAFE_INTEGER
return left - right
})
}, [categories, value.order])
const setOrder = (ids: string[]) => onChange({ ...value, order: ids })
const move = (index: number, step: -1 | 1) => {
const target = index + step
if (target < 0 || target >= cards.length) return
const ids = cards.map((card) => card.id)
const [id] = ids.splice(index, 1)
ids.splice(target, 0, id)
setOrder(ids)
}
const toggle = (id: string, visible: boolean) => {
const hidden = visible
? value.hidden.filter((entry) => entry !== id)
: [...new Set([...value.hidden, id])]
onChange({ ...value, hidden, order: cards.map((card) => card.id) })
}
const setTitle = (id: string, title: string) => {
const titles = { ...value.titles }
if (title.trim() === '') delete titles[id]
else titles[id] = title
onChange({ ...value, titles })
}
const setLimit = (id: string, raw: string) => {
const limits = { ...value.limits }
const limit = Number(raw)
if (raw.trim() === '' || !Number.isFinite(limit) || limit <= 0) delete limits[id]
else limits[id] = Math.min(60, Math.round(limit))
onChange({ ...value, limits })
}
return (
<Space direction="column" gap="sm" align="stretch" className="admin-form">
<Text size="sm" tone="muted">
控制首页卡片：显示 / 隐藏、标题、每张卡预览条数与顺序。留空表示用内容库里的默认值。
</Text>
{cards.map((card, index) => (
<div className="admin-item-row admin-section-row" key={card.id}>
<Switch
checked={!value.hidden.includes(card.id)}
onChange={(next) => toggle(card.id, next)}
label={`显示 ${card.title}`}
/>
<Input
value={value.titles[card.id] ?? ''}
placeholder={card.title}
aria-label={`${card.title} 标题`}
onChange={(event) => setTitle(card.id, event.target.value)}
/>
<Input
type="number"
value={value.limits[card.id] === undefined ? '' : String(value.limits[card.id])}
placeholder="条数"
aria-label={`${card.title} 预览条数`}
onChange={(event) => setLimit(card.id, event.target.value)}
/>
<IconButtonGroup
onUp={() => move(index, -1)}
onDown={() => move(index, 1)}
onRemove={undefined}
/>
</div>
))}
{cards.length === 0 && <Text tone="muted">内容库还没有加载完成。</Text>}
</Space>
)
}
// ---------- 系统 ----------
function SystemPanel() {
stash-web/src/components/content/ArticleDetailView.tsx
+8 -3
View File
@@ -16,6 +16,8 @@ type ArticleDetailViewProps = {
categoryTitle: string
onNavigate: (href: string) => void
onEdit: () => void
/** 只有登录后才显示 [编辑] */
canEdit: boolean
}
export function ArticleDetailView({
@@ -24,6 +26,7 @@ export function ArticleDetailView({
categoryTitle,
onNavigate,
onEdit,
canEdit,
}: ArticleDetailViewProps) {
const meta = article.meta ?? ['2 年前', categoryTitle]
const crumbs = [
@@ -41,9 +44,11 @@ export function ArticleDetailView({
<header className="article-head">
<Title level={1} as="h2" className="article-heading">
{article.title}
<button type="button" className="item-edit" title="编辑文章" onClick={onEdit}>
[编辑]
</button>
{canEdit && (
<button type="button" className="item-edit" title="编辑文章" onClick={onEdit}>
[编辑]
</button>
)}
</Title>
<div className="article-meta">
stash-web/src/components/content/HomeView.tsx
+25 -10
View File
@@ -4,33 +4,46 @@ import { ArticleGrid } from './ArticleGrid'
import { Empty } from '@stash/ui'
import { PosterGrid } from './PosterGrid'
import { SectionCard } from './SectionCard'
import {
applySectionSettings,
sectionLimit,
sectionTitle,
type SectionSettings,
} from '../../settings'
/**
* 首页：把每个分类渲染成一张分区卡片。
*
* 每个分区只展示前若干条（由分类的 previewLimit 决定），
* 右上角 ••• 进入该分类明细，点击卡片 / 海报则进入该条目的详情。
* 每个分区只展示前若干条；标题、条数、顺序与显隐都可以在 `/admin`
* 的「首页卡片」里覆盖（见 settings.sections）。
*/
type HomeViewProps = {
categories: Category[]
sections: SectionSettings
onOpenDetail: (categoryId: string) => void
onOpenItem: (categoryId: string, itemId: string) => void
}
export function HomeView({ categories, onOpenDetail, onOpenItem }: HomeViewProps) {
export function HomeView({ categories, sections, onOpenDetail, onOpenItem }: HomeViewProps) {
const cards = applySectionSettings(categories, sections)
return (
<div className="home-view">
{categories.map((category) => (
{cards.map((category) => (
<SectionCard
key={category.id}
// 卡片标题跟着实际展示的内容走：配了展示块就用块标题（如「常用站点」），
// 没配（如「本地服务」）才用分类标题
title={category.block?.title ?? category.title}
// 没配（如「本地服务」）才用分类标题；设置里的覆盖值优先
title={sectionTitle(
category.id,
category.block?.title ?? category.title,
sections,
)}
count={cardCount(category)}
barColor={category.barColor}
onMore={() => onOpenDetail(category.id)}
>
{renderPreview(category, onOpenItem)}
{renderPreview(category, sections, onOpenItem)}
</SectionCard>
))}
</div>
@@ -55,6 +68,7 @@ function cardCount(category: Category): number {
/** 按分类类型输出对应的预览网格；应用类为空时给出提示文案 */
function renderPreview(
category: Category,
sections: SectionSettings,
onOpenItem: (categoryId: string, itemId: string) => void,
) {
if (category.kind === 'apps') {
@@ -65,7 +79,8 @@ function renderPreview(
: undefined
const source = category.block !== undefined ? (blockGroup?.items ?? []) : flattenAppItems(category)
const limit = category.block?.previewLimit ?? category.previewLimit ?? 4
const fallback = category.block?.previewLimit ?? category.previewLimit ?? 4
const limit = sectionLimit(category.id, fallback, sections)
const items = source.slice(0, limit)
if (items.length === 0) {
@@ -78,7 +93,7 @@ function renderPreview(
if (category.kind === 'posters') {
return (
<PosterGrid
items={category.items.slice(0, category.previewLimit ?? 6)}
items={category.items.slice(0, sectionLimit(category.id, category.previewLimit ?? 6, sections))}
onOpen={(itemId) => onOpenItem(category.id, itemId)}
/>
)
@@ -86,7 +101,7 @@ function renderPreview(
return (
<ArticleGrid
items={category.items.slice(0, category.previewLimit ?? 4)}
items={category.items.slice(0, sectionLimit(category.id, category.previewLimit ?? 4, sections))}
onOpen={(itemId) => onOpenItem(category.id, itemId)}
/>
)
stash-web/src/components/content/ItemDetailView.tsx
+8 -3
View File
@@ -29,6 +29,8 @@ type ItemDetailViewProps = {
onOpenItem: (itemId: string) => void
/** 打开编辑 Drawer */
onEdit: () => void
/** 只有登录后才显示 [编辑] */
canEdit: boolean
}
export function ItemDetailView({
@@ -38,6 +40,7 @@ export function ItemDetailView({
onNavigate,
onOpenItem,
onEdit,
canEdit,
}: ItemDetailViewProps) {
return (
<div className="detail-view item-view">
@@ -48,9 +51,11 @@ export function ItemDetailView({
<Card padding="none" className="item-card">
<Title level={1} as="h2" weight="semibold" className="item-title">
{model.title}
<button type="button" className="item-edit" title="编辑条目" onClick={onEdit}>
[编辑]
</button>
{canEdit && (
<button type="button" className="item-edit" title="编辑条目" onClick={onEdit}>
[编辑]
</button>
)}
</Title>
<div className={`item-cover item-cover--${model.shape}`}>