981 lines
34 KiB
TypeScript
981 lines
34 KiB
TypeScript
import {
|
||
Breadcrumb,
|
||
Card,
|
||
Empty,
|
||
EngineIcon,
|
||
Layout,
|
||
Menu,
|
||
Notice,
|
||
SearchField,
|
||
Space,
|
||
Toaster,
|
||
type EngineIconName,
|
||
type MenuItem,
|
||
} from '@stash/ui'
|
||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||
import { BackToTop } from './components/common/BackToTop'
|
||
import { ArticleDetailView } from './components/content/ArticleDetailView'
|
||
import { AppGrid } from './components/content/AppGrid'
|
||
import { CesCardGrid } from './components/content/CesCardGrid'
|
||
import { ItemDetailView } from './components/content/ItemDetailView'
|
||
import { ItemEditor } from './components/content/ItemEditor'
|
||
import { PosterGrid } from './components/content/PosterGrid'
|
||
import { SectionCard } from './components/content/SectionCard'
|
||
import { SiteHeader } from './components/header/SiteHeader'
|
||
import { ApiDocs } from './components/api/ApiDocs'
|
||
import { GroupMark } from './components/common/GroupMark'
|
||
import { LoginDialog } from './components/auth/LoginDialog'
|
||
import { ProfileCard } from './components/sidebar/ProfileCard'
|
||
import { ServicePanel } from './components/sidebar/ServicePanel'
|
||
import { useProjects } from './useProjects'
|
||
import { fetchSession, logout, type SessionState } from './auth'
|
||
import {
|
||
DEFAULT_SEARCH_ENGINES,
|
||
fetchSettings,
|
||
readCachedBackground,
|
||
writeCachedBackground,
|
||
type SettingsDocument,
|
||
type SiteSettings,
|
||
} from './settings'
|
||
import {
|
||
isDarkScheme,
|
||
readThemeOverride,
|
||
writeThemeOverride,
|
||
type ThemeChoice,
|
||
} from './theme'
|
||
import {
|
||
appDetailModel,
|
||
posterDetailModel,
|
||
posterToRelatedItem,
|
||
toRelatedItem,
|
||
type ItemDetailModel,
|
||
} from './data/detail'
|
||
import type { AppItem, ArticleItem, PosterItem, RelatedItem } from './data/types'
|
||
import { fetchManage, type CardItem, type GroupNode, type ManageData } from './manage'
|
||
import './App.css'
|
||
|
||
/**
|
||
* 新前台：分组树 + 卡片组合。
|
||
*
|
||
* 路由：
|
||
* / 首页（卡片按勾选分组渲染）
|
||
* /g/<分组 key> 分组页（自身条目 + 子分组）
|
||
* /g/<分组 key>/i/<条目> 条目详情
|
||
* 旧 /c/... 地址按第一个路径段当成分组 key，兼容老书签。
|
||
*/
|
||
type Route =
|
||
| { kind: 'home' }
|
||
| { kind: 'group'; key: string }
|
||
| { kind: 'item'; key: string; itemId: string }
|
||
| { kind: 'api' }
|
||
|
||
const INTERNAL_SEARCH = { id: 'internal', name: '站内搜索', url: '' } as const
|
||
|
||
const SEARCH_ENGINE_KEY = 'stash-search-engine'
|
||
|
||
/** 上次选的搜索引擎：只存在这台浏览器，刷新后仍用它；失效时回落到站点默认 */
|
||
function readSearchEngine(): string | null {
|
||
try {
|
||
return window.localStorage.getItem(SEARCH_ENGINE_KEY)
|
||
} catch {
|
||
return null
|
||
}
|
||
}
|
||
|
||
function writeSearchEngine(id: string): void {
|
||
try {
|
||
window.localStorage.setItem(SEARCH_ENGINE_KEY, id)
|
||
} catch {
|
||
// 隐私模式下 localStorage 不可写，忽略即可
|
||
}
|
||
}
|
||
|
||
function parseRoute(pathname: string): Route {
|
||
const segments = pathname.split('/').filter(Boolean)
|
||
if (segments[0] === 'interface') return { kind: 'api' }
|
||
if (
|
||
(segments[0] === 'g' || segments[0] === 'c') &&
|
||
segments[1] !== undefined
|
||
) {
|
||
if (segments[2] === 'i' && segments[3] !== undefined) {
|
||
return { kind: 'item', key: decodeURIComponent(segments[1]), itemId: decodeURIComponent(segments[3]) }
|
||
}
|
||
return { kind: 'group', key: decodeURIComponent(segments[1]) }
|
||
}
|
||
return { kind: 'home' }
|
||
}
|
||
|
||
function useRoute() {
|
||
const [route, setRoute] = useState<Route>(() => parseRoute(window.location.pathname))
|
||
|
||
useEffect(() => {
|
||
const sync = () => setRoute(parseRoute(window.location.pathname))
|
||
window.addEventListener('popstate', sync)
|
||
return () => window.removeEventListener('popstate', sync)
|
||
}, [])
|
||
|
||
const navigate = (path: string) => {
|
||
if (window.location.pathname === path) return
|
||
window.history.pushState({}, '', path)
|
||
setRoute(parseRoute(path))
|
||
document.getElementById('page-scroll')?.scrollTo({ top: 0 })
|
||
window.scrollTo({ top: 0 })
|
||
}
|
||
|
||
return { route, navigate }
|
||
}
|
||
|
||
function findGroup(groups: GroupNode[], key: string): GroupNode | undefined {
|
||
for (const group of groups) {
|
||
if (group.key === key) return group
|
||
const found = findGroup(group.children, key)
|
||
if (found !== undefined) return found
|
||
}
|
||
return undefined
|
||
}
|
||
|
||
function findPath(groups: GroupNode[], key: string, trail: GroupNode[] = []): GroupNode[] | undefined {
|
||
for (const group of groups) {
|
||
const next = [...trail, group]
|
||
if (group.key === key) return next
|
||
const found = findPath(group.children, key, next)
|
||
if (found !== undefined) return found
|
||
}
|
||
return undefined
|
||
}
|
||
|
||
function findEntryInGroup(
|
||
group: GroupNode,
|
||
entryId: string,
|
||
): { group: GroupNode; entry: Record<string, unknown> } | undefined {
|
||
const direct = group.entries.find((candidate) => candidate.id === entryId)
|
||
if (direct !== undefined) {
|
||
return { group, entry: direct as unknown as Record<string, unknown> }
|
||
}
|
||
for (const child of group.children) {
|
||
const found = findEntryInGroup(child, entryId)
|
||
if (found !== undefined) return found
|
||
}
|
||
return undefined
|
||
}
|
||
|
||
function findEntry(
|
||
groups: GroupNode[],
|
||
groupKey: string,
|
||
entryId: string,
|
||
): { group: GroupNode; entry: Record<string, unknown> } | undefined {
|
||
const group = findGroup(groups, groupKey)
|
||
if (group === undefined) return undefined
|
||
return findEntryInGroup(group, entryId)
|
||
}
|
||
|
||
function groupEntryCount(group: GroupNode): number {
|
||
const children = group.children.filter((child) => child.enabled !== false)
|
||
return group.entries.length + children.reduce((total, child) => total + groupEntryCount(child), 0)
|
||
}
|
||
|
||
/** 分组自身与所有祖先都启用时才可见：停用父级会连带停用整棵子树 */
|
||
function isGroupVisible(groups: GroupNode[], key: string): boolean {
|
||
const path = findPath(groups, key)
|
||
if (path === undefined) return false
|
||
return path.every((node) => node.enabled !== false)
|
||
}
|
||
|
||
/** 分组子树里的全部条目（格式沿根分组继承，所以可以放在同一个网格里） */
|
||
function collectEntries(group: GroupNode): Record<string, unknown>[] {
|
||
return [
|
||
...(group.entries as unknown as Record<string, unknown>[]),
|
||
...group.children
|
||
.filter((child) => child.enabled !== false)
|
||
.flatMap((child) => collectEntries(child)),
|
||
]
|
||
}
|
||
|
||
function defaultLimit(group: GroupNode): number {
|
||
return group.previewLimit ?? 6
|
||
}
|
||
|
||
function entryFormat(entry: Record<string, unknown>): 'apps' | 'posters' | 'articles' {
|
||
const value = entry.format
|
||
return value === 'posters' || value === 'articles' ? value : 'apps'
|
||
}
|
||
|
||
function matches(entry: Record<string, unknown>, keyword: string): boolean {
|
||
if (keyword === '') return true
|
||
const text = [entry.name, entry.title, entry.description, entry.desc]
|
||
.filter((value) => typeof value === 'string')
|
||
.join(' ')
|
||
.toLowerCase()
|
||
return text.includes(keyword)
|
||
}
|
||
|
||
/** 本地搜索回车时打开第一个匹配项；没有条目命中但分组名命中时打开分组 */
|
||
function findLocalTarget(
|
||
groups: GroupNode[],
|
||
keyword: string,
|
||
): { group: GroupNode; entry?: Record<string, unknown> } | undefined {
|
||
for (const group of groups) {
|
||
if (group.enabled === false) continue
|
||
if (group.title.toLowerCase().includes(keyword)) return { group }
|
||
const entry = (group.entries as unknown as Record<string, unknown>[]).find((item) =>
|
||
matches(item, keyword),
|
||
)
|
||
if (entry !== undefined) return { group, entry }
|
||
const child = findLocalTarget(group.children, keyword)
|
||
if (child !== undefined) return child
|
||
}
|
||
return undefined
|
||
}
|
||
|
||
export default function AppNext() {
|
||
const { status, projects, error, live, refreshing, refresh } = useProjects()
|
||
const { route, navigate } = useRoute()
|
||
const [manage, setManage] = useState<ManageData>({ groups: [], cards: [] })
|
||
const [loading, setLoading] = useState(true)
|
||
const [keyword, setKeyword] = useState('')
|
||
const [session, setSession] = useState<SessionState | null>(null)
|
||
const [settings, setSettings] = useState<SettingsDocument | null>(null)
|
||
/** 上次缓存的背景：设置回来之前先用它上屏，避免刷新时先闪内置背景 */
|
||
const [cachedBackground] = useState(readCachedBackground)
|
||
const [loginOpen, setLoginOpen] = useState(false)
|
||
const [editingKey, setEditingKey] = useState<string | null>(null)
|
||
const [scrolled, setScrolled] = useState(false)
|
||
const searchRef = useRef<HTMLInputElement>(null)
|
||
const [searchEngineId, setSearchEngineId] = useState<string | null>(readSearchEngine)
|
||
const [engineOpen, setEngineOpen] = useState(false)
|
||
const engineRef = useRef<HTMLDivElement>(null)
|
||
|
||
const load = () => {
|
||
void fetchManage().then((data) => {
|
||
setManage(data)
|
||
setLoading(false)
|
||
})
|
||
}
|
||
|
||
useEffect(() => {
|
||
load()
|
||
void fetchSession().then(setSession)
|
||
void fetchSettings().then(setSettings)
|
||
|
||
const source = new EventSource('/api/catalog/events')
|
||
// 服务端推的是具名事件 `catalog`（不是默认的 message），两种都接；
|
||
// 收到后连站点设置一起重拉，改完设置不用手动刷新页面。
|
||
const onCatalogChange = () => {
|
||
load()
|
||
void fetchSettings().then(setSettings)
|
||
}
|
||
source.onmessage = onCatalogChange
|
||
source.addEventListener('catalog', onCatalogChange)
|
||
return () => source.close()
|
||
}, [])
|
||
|
||
// 背景地址跟着设置存一份到本机：下次刷新首帧直接用它，不用等接口回来再换
|
||
useEffect(() => {
|
||
if (settings !== null) writeCachedBackground(settings.settings.background)
|
||
}, [settings])
|
||
|
||
useEffect(() => {
|
||
const content = document.getElementById('content-scroll')
|
||
const main = content?.parentElement
|
||
const body = main?.parentElement
|
||
if (
|
||
!(content instanceof HTMLElement) ||
|
||
!(main instanceof HTMLElement) ||
|
||
!(body instanceof HTMLElement)
|
||
) {
|
||
return
|
||
}
|
||
|
||
// 左右两栏放进同一个滚动容器：滚动区域从搜索条下方开始，两栏位移完全一致。
|
||
// 左栏的吸顶交给 CSS position: sticky（App.css 里 #page-scroll > aside）：
|
||
// 之前用 scroll 事件改 transform，主线程永远落后平滑滚动一帧，看起来就在抖。
|
||
// 注意别再给 aside 设内联 overflow，否则会盖掉 CSS 里的 overflow-y: auto，
|
||
// 侧栏比视口高时就没法在栏内滚动了。
|
||
body.id = 'page-scroll'
|
||
body.style.overflowY = 'auto'
|
||
body.style.overflowX = 'hidden'
|
||
content.style.overflow = 'visible'
|
||
content.style.marginTop = '0'
|
||
main.style.height = 'auto'
|
||
|
||
const onScroll = () => setScrolled(body.scrollTop > 4)
|
||
|
||
// 滚动容器只覆盖 1380 的两栏，窗口两侧的空白、页头与搜索条都在它外面，
|
||
// 滚轮落在这些地方时浏览器找不到可滚动元素。统一转发给内容区。
|
||
const forwardWheel = (event: WheelEvent) => {
|
||
if (event.target instanceof Node && body.contains(event.target)) return
|
||
// deltaMode 1 = 按行（Firefox 鼠标滚轮），换算成像素
|
||
body.scrollTop += event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY
|
||
event.preventDefault()
|
||
}
|
||
window.addEventListener('wheel', forwardWheel, { passive: false })
|
||
|
||
body.addEventListener('scroll', onScroll, { passive: true })
|
||
onScroll()
|
||
|
||
return () => {
|
||
body.removeEventListener('scroll', onScroll)
|
||
window.removeEventListener('wheel', forwardWheel)
|
||
body.id = ''
|
||
body.style.overflowY = ''
|
||
body.style.overflowX = ''
|
||
content.style.overflow = ''
|
||
content.style.marginTop = ''
|
||
main.style.height = ''
|
||
}
|
||
}, [])
|
||
|
||
const site: SiteSettings = settings?.settings ?? {
|
||
header: { enabled: true, speed: 24, gap: 26, items: [] },
|
||
sidebar: {
|
||
show_profile: true,
|
||
show_service: true,
|
||
show_nav: true,
|
||
},
|
||
background: cachedBackground ?? { light: '', dark: '' },
|
||
search: {
|
||
default: 'internal',
|
||
engines: DEFAULT_SEARCH_ENGINES.map((engine) => ({ ...engine })),
|
||
},
|
||
profile: {
|
||
name: '本地管理员',
|
||
role: '管理员',
|
||
description: '',
|
||
location: '',
|
||
avatar: '',
|
||
},
|
||
site: {
|
||
title: 'Stash · 本地应用工作区',
|
||
favicon: '',
|
||
theme: 'auto',
|
||
brand: { name: 'STASH', mark: 'S', logo: '' },
|
||
actions: { theme: true, refresh: true, settings: true, session: true },
|
||
},
|
||
}
|
||
|
||
const keywordLower = keyword.trim().toLowerCase()
|
||
|
||
const searchEngines = [
|
||
INTERNAL_SEARCH,
|
||
...site.search.engines
|
||
.filter((engine) => engine.enabled)
|
||
.map((engine) => ({ id: engine.id, name: engine.name, url: engine.url })),
|
||
]
|
||
const searchEngine =
|
||
searchEngines.find((engine) => engine.id === searchEngineId) ??
|
||
searchEngines.find((engine) => engine.id === site.search.default) ??
|
||
INTERNAL_SEARCH
|
||
/** 只有站内搜索模式才用输入内容过滤本地内容 */
|
||
const localKeyword = searchEngine.id === 'internal' ? keywordLower : ''
|
||
|
||
// 配色：本机偏好优先于站点默认，写在 <html data-scheme> 上，
|
||
// 深色由组件库的令牌块接管，页面与组件都不用改
|
||
const [themeOverride, setThemeOverride] = useState<ThemeChoice | null>(() =>
|
||
readThemeOverride(),
|
||
)
|
||
const effectiveTheme = themeOverride ?? site.site.theme
|
||
/** 当前实际是深色吗（auto 时按系统偏好算） */
|
||
const isDark = isDarkScheme(effectiveTheme)
|
||
const scheme = isDark ? 'dark' : 'light'
|
||
|
||
useEffect(() => {
|
||
const root = document.documentElement
|
||
if (root.dataset.scheme === scheme) return
|
||
|
||
const apply = () => {
|
||
root.dataset.scheme = scheme
|
||
}
|
||
const doc = document as Document & {
|
||
startViewTransition?: (callback: () => void) => unknown
|
||
}
|
||
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
||
|
||
if (!reduceMotion && typeof doc.startViewTransition === 'function') {
|
||
try {
|
||
doc.startViewTransition(apply)
|
||
return
|
||
} catch {
|
||
// 浏览器正在跑另一段过渡时退回 CSS 过渡
|
||
}
|
||
}
|
||
|
||
root.classList.add('theme-transition')
|
||
apply()
|
||
const timer = window.setTimeout(() => root.classList.remove('theme-transition'), 180)
|
||
return () => {
|
||
window.clearTimeout(timer)
|
||
root.classList.remove('theme-transition')
|
||
}
|
||
}, [scheme])
|
||
|
||
/** 页头的明暗切换：只写本机偏好，不需要登录；站点默认值在后台改 */
|
||
const toggleTheme = () => {
|
||
const next: ThemeChoice = isDark ? 'light' : 'dark'
|
||
setThemeOverride(next)
|
||
writeThemeOverride(next)
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (!engineOpen) return
|
||
const close = (event: PointerEvent) => {
|
||
if (engineRef.current !== null && !engineRef.current.contains(event.target as Node)) {
|
||
setEngineOpen(false)
|
||
}
|
||
}
|
||
document.addEventListener('pointerdown', close)
|
||
return () => document.removeEventListener('pointerdown', close)
|
||
}, [engineOpen])
|
||
|
||
// 回车用当前搜索引擎打开新标签页；输入时的本地过滤逻辑保持不变
|
||
useEffect(() => {
|
||
const input = searchRef.current
|
||
if (input === null) return
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
if (event.key === 'Escape') {
|
||
setEngineOpen(false)
|
||
return
|
||
}
|
||
if (event.key !== 'Enter' || keyword.trim() === '') return
|
||
event.preventDefault()
|
||
setEngineOpen(false)
|
||
|
||
if (searchEngine.id === 'internal') {
|
||
const target = findLocalTarget(manage.groups, keywordLower)
|
||
if (target !== undefined) {
|
||
navigate(
|
||
target.entry === undefined
|
||
? `/g/${encodeURIComponent(target.group.key)}`
|
||
: `/g/${encodeURIComponent(target.group.key)}/i/${encodeURIComponent(String(target.entry.id))}`,
|
||
)
|
||
}
|
||
return
|
||
}
|
||
|
||
const searchUrl = searchEngine.url.replaceAll(
|
||
'{query}',
|
||
encodeURIComponent(keyword.trim()),
|
||
)
|
||
window.open(searchUrl, '_blank', 'noopener,noreferrer')
|
||
}
|
||
input.addEventListener('keydown', handleKeyDown)
|
||
return () => input.removeEventListener('keydown', handleKeyDown)
|
||
}, [keyword, keywordLower, manage.groups, navigate, searchEngine])
|
||
|
||
const chooseEngine = (next: string) => {
|
||
setSearchEngineId(next)
|
||
writeSearchEngine(next)
|
||
setEngineOpen(false)
|
||
searchRef.current?.focus()
|
||
}
|
||
|
||
// 站点级设置：浏览器标签标题与 favicon（空值回落到内置）
|
||
useEffect(() => {
|
||
const title = site.site.title.trim()
|
||
if (title !== '') document.title = title
|
||
|
||
const href = site.site.favicon.trim() === '' ? '/favicon.svg' : site.site.favicon.trim()
|
||
let link = document.head.querySelector<HTMLLinkElement>('link[rel="icon"]')
|
||
if (link === null) {
|
||
link = document.createElement('link')
|
||
link.rel = 'icon'
|
||
document.head.appendChild(link)
|
||
}
|
||
link.href = href
|
||
link.type = href.endsWith('.svg') ? 'image/svg+xml' : ''
|
||
}, [site.site.title, site.site.favicon])
|
||
|
||
const sidebarItems: MenuItem[] = useMemo(() => {
|
||
// 侧边栏的显隐只认「分组管理 → 状态」：停用的分组整棵子树都不进导航，
|
||
// 顺序按分组自己的排序权重，不再有侧栏专属的隐藏/排序状态。
|
||
const build = (nodes: GroupNode[]): MenuItem[] =>
|
||
[...nodes]
|
||
.sort((a, b) => a.sort - b.sort)
|
||
.flatMap((node) => {
|
||
if (node.enabled === false) return []
|
||
const children = build(node.children)
|
||
return [
|
||
{
|
||
key: `g:${node.key}`,
|
||
label: node.title,
|
||
children: children.length > 0 ? children : undefined,
|
||
},
|
||
]
|
||
})
|
||
|
||
return [{ key: 'home', label: '首页' }, ...build(manage.groups)]
|
||
}, [manage.groups])
|
||
|
||
const activeKey =
|
||
route.kind === 'home' || route.kind === 'api'
|
||
? 'home'
|
||
: route.kind === 'group'
|
||
? `g:${route.key}`
|
||
: `g:${route.key}`
|
||
|
||
function renderEntries(
|
||
group: GroupNode,
|
||
entries: Record<string, unknown>[],
|
||
options: { detail?: boolean; limit?: number } = {},
|
||
) {
|
||
const filtered = entries.filter((entry) => matches(entry, localKeyword))
|
||
const limit = options.limit ?? filtered.length
|
||
const items = filtered.slice(0, limit)
|
||
const open = (itemId: string) => navigate(`/g/${encodeURIComponent(group.key)}/i/${encodeURIComponent(itemId)}`)
|
||
|
||
return (
|
||
<>
|
||
{(['apps', 'posters', 'articles'] as const).map((format) => {
|
||
const subset = items.filter((entry) => entryFormat(entry) === format)
|
||
if (subset.length === 0) return null
|
||
return (
|
||
<div className="mixed-format-block" key={format}>
|
||
{format === 'posters' ? (
|
||
<PosterGrid items={subset as unknown as PosterItem[]} onOpen={open} />
|
||
) : format === 'articles' ? (
|
||
<CesCardGrid items={subset as unknown as ArticleItem[]} onOpen={open} />
|
||
) : (
|
||
<AppGrid items={subset as unknown as AppItem[]} onOpen={open} />
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
</>
|
||
)
|
||
}
|
||
|
||
function renderGroupBlock(group: GroupNode, limit: number, showTitle: boolean) {
|
||
// 根分组（分区）只展示直接挂在它下面的条目，子分组各自成块，避免同一批内容出现两次
|
||
const rootGroup = group.parentKey === undefined || group.parentKey === null
|
||
const source = rootGroup
|
||
? (group.entries as unknown as Record<string, unknown>[])
|
||
: collectEntries(group)
|
||
const all = source.filter((entry) => matches(entry, localKeyword))
|
||
if (all.length === 0) return null
|
||
return (
|
||
<div key={group.key} className="card-group-block">
|
||
{showTitle && !rootGroup && <h3 className="card-group-title">{group.title}</h3>}
|
||
{renderEntries(group, all, { limit })}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function renderLocalService(card: CardItem) {
|
||
const items: AppItem[] = projects.map((project) => ({
|
||
id: project.name,
|
||
name: project.name,
|
||
desc: project.route_path,
|
||
icon: project.name.slice(0, 1).toUpperCase(),
|
||
href: project.route_path,
|
||
badge: '本地项目',
|
||
comment: '本地静态站点，由 Stash 直接托管。',
|
||
views: 0,
|
||
likes: 0,
|
||
}))
|
||
|
||
return (
|
||
<SectionCard key={card.id} title="本地服务" count={items.length} barColor="#3858f6">
|
||
{items.length > 0 ? (
|
||
<AppGrid items={items} />
|
||
) : (
|
||
<Empty text="还没有项目：在托管目录下建一个子目录并放入 index.html，刷新后就会出现在这里。" />
|
||
)}
|
||
</SectionCard>
|
||
)
|
||
}
|
||
|
||
function renderCard(card: CardItem) {
|
||
const resolved = card.groups
|
||
.map((ref) => ({ ref, group: findGroup(manage.groups, ref.groupKey) }))
|
||
.filter(
|
||
(item): item is { ref: typeof item.ref; group: GroupNode } =>
|
||
item.group !== undefined && isGroupVisible(manage.groups, item.ref.groupKey),
|
||
)
|
||
|
||
const total = resolved.reduce((sum, item) => sum + groupEntryCount(item.group), 0)
|
||
const first = resolved[0]?.group
|
||
if (resolved.length === 0 || total === 0) return null
|
||
|
||
return (
|
||
<SectionCard
|
||
key={card.id}
|
||
title={card.title}
|
||
count={total}
|
||
barColor={first?.barColor}
|
||
>
|
||
{resolved.map(({ group, ref }) =>
|
||
renderGroupBlock(group, ref.previewLimit ?? defaultLimit(group), resolved.length > 1),
|
||
)}
|
||
</SectionCard>
|
||
)
|
||
}
|
||
|
||
function renderHome() {
|
||
const cards = manage.cards
|
||
return (
|
||
<div className="home-view">
|
||
{loading && <Empty text="正在读取内容库…" />}
|
||
{!loading && cards.length === 0 && <Empty text="后台还没有创建首页卡片" />}
|
||
{cards.map((card) =>
|
||
card.key === 'local-service' ? renderLocalService(card) : renderCard(card),
|
||
)}
|
||
{localKeyword !== '' && cards.length > 0 && (
|
||
<Notice title={`搜索结果：${keyword.trim()}`}>在卡片与分组内按标题过滤。</Notice>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function renderGroupPage(key: string) {
|
||
const group = findGroup(manage.groups, key)
|
||
if (group === undefined || !isGroupVisible(manage.groups, key)) {
|
||
return <Empty text={loading ? '正在读取内容库…' : '分组不存在'} />
|
||
}
|
||
|
||
const trail = findPath(manage.groups, key) ?? [group]
|
||
// 根分组页就是「这个分区的全部内容」：所有启用的子分组整段铺开，不再需要「查看全部」
|
||
const rootGroup = group.parentKey === undefined || group.parentKey === null
|
||
|
||
return (
|
||
<div className="detail-view">
|
||
<Card padding="none" className="detail-nav">
|
||
<Breadcrumb
|
||
className="detail-breadcrumb"
|
||
items={[
|
||
{ label: '首页', href: '/' },
|
||
...trail.map((node) => ({
|
||
label: node.title,
|
||
href: `/g/${encodeURIComponent(node.key)}`,
|
||
})),
|
||
]}
|
||
onNavigate={navigate}
|
||
/>
|
||
</Card>
|
||
|
||
<div className="detail-hero">
|
||
<span className="detail-hero-icon" aria-hidden="true">
|
||
<GroupMark icon={group.icon} fallback="•" />
|
||
</span>
|
||
<h2 className="detail-hero-title">{group.title}</h2>
|
||
<span className="detail-hero-count">[{groupEntryCount(group)}]</span>
|
||
</div>
|
||
|
||
{group.entries.length > 0 ? (
|
||
<Card padding="md" className="group-own-block">
|
||
{renderEntries(group, group.entries)}
|
||
</Card>
|
||
) : group.children.some((child) => groupEntryCount(child) > 0) ? null : (
|
||
<Empty text="这个分组还没有内容" />
|
||
)}
|
||
|
||
<Space direction="column" gap="lg" align="stretch">
|
||
{group.children
|
||
.filter((child) => child.enabled !== false)
|
||
.map((child) => (
|
||
<Card key={child.key} padding="md" className="group-child-block">
|
||
<div className="group-title">
|
||
<span
|
||
className="group-bar"
|
||
style={{ backgroundColor: child.barColor || undefined }}
|
||
aria-hidden="true"
|
||
/>
|
||
<h3>{child.title}</h3>
|
||
{!rootGroup && (
|
||
<button
|
||
type="button"
|
||
className="link-button"
|
||
onClick={() => navigate(`/g/${encodeURIComponent(child.key)}`)}
|
||
>
|
||
查看全部
|
||
</button>
|
||
)}
|
||
</div>
|
||
{child.entries.length > 0 ? (
|
||
renderEntries(child, child.entries, rootGroup ? {} : { limit: 12 })
|
||
) : (
|
||
<Empty text="暂无内容" />
|
||
)}
|
||
</Card>
|
||
))}
|
||
</Space>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function renderItemPage(key: string, itemId: string) {
|
||
const found = findEntry(manage.groups, key, itemId)
|
||
if (found === undefined || !isGroupVisible(manage.groups, found.group.key)) {
|
||
return <Empty text={loading ? '正在读取内容库…' : '条目不存在'} />
|
||
}
|
||
|
||
const { group, entry } = found
|
||
const trail = findPath(manage.groups, group.key) ?? [group]
|
||
const crumbs = [
|
||
{ label: '首页', href: '/' },
|
||
...trail.map((node) => ({
|
||
label: node.title,
|
||
href: `/g/${encodeURIComponent(node.key)}`,
|
||
})),
|
||
{ label: String(entry.name ?? entry.title ?? entry.id) },
|
||
]
|
||
|
||
const format = entryFormat(entry)
|
||
|
||
if (format === 'articles') {
|
||
const article = entry as unknown as ArticleItem
|
||
return (
|
||
<ArticleDetailView
|
||
article={article}
|
||
categoryId={group.key}
|
||
categoryTitle={group.title}
|
||
onNavigate={navigate}
|
||
onEdit={() => setEditingKey(String(entry.id))}
|
||
canEdit={session?.authenticated === true}
|
||
/>
|
||
)
|
||
}
|
||
|
||
const model: ItemDetailModel =
|
||
format === 'posters'
|
||
? posterDetailModel(entry as unknown as PosterItem)
|
||
: appDetailModel(entry as unknown as AppItem)
|
||
|
||
const related: RelatedItem[] =
|
||
format === 'posters'
|
||
? group.entries
|
||
.filter((item) => item.id !== entry.id && entryFormat(item as unknown as Record<string, unknown>) === format)
|
||
.slice(0, 4)
|
||
.map((item) => posterToRelatedItem(item as unknown as PosterItem))
|
||
: group.entries
|
||
.filter((item) => item.id !== entry.id && entryFormat(item as unknown as Record<string, unknown>) === format)
|
||
.slice(0, 4)
|
||
.map((item) => toRelatedItem(item as unknown as AppItem))
|
||
|
||
return (
|
||
<ItemDetailView
|
||
itemKey={String(entry.id)}
|
||
crumbs={crumbs}
|
||
model={model}
|
||
related={related}
|
||
onNavigate={navigate}
|
||
onOpenItem={(next) => navigate(`/g/${encodeURIComponent(group.key)}/i/${encodeURIComponent(next)}`)}
|
||
onEdit={() => setEditingKey(String(entry.id))}
|
||
canEdit={session?.authenticated === true}
|
||
/>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Toaster />
|
||
<LoginDialog
|
||
open={loginOpen}
|
||
hasAdmin={session?.has_admin ?? true}
|
||
onClose={() => setLoginOpen(false)}
|
||
onSuccess={(next) => {
|
||
setSession(next)
|
||
setLoginOpen(false)
|
||
}}
|
||
/>
|
||
|
||
<ItemEditor
|
||
open={editingKey !== null}
|
||
itemKey={editingKey}
|
||
onClose={() => setEditingKey(null)}
|
||
onSaved={() => {
|
||
setEditingKey(null)
|
||
load()
|
||
}}
|
||
/>
|
||
|
||
<div
|
||
className="site-background site-background-light"
|
||
style={
|
||
site.background.light.trim() === ''
|
||
? undefined
|
||
: { backgroundImage: `url(${JSON.stringify(site.background.light.trim())})` }
|
||
}
|
||
aria-hidden="true"
|
||
/>
|
||
<div
|
||
className="site-background site-background-dark"
|
||
style={
|
||
site.background.dark.trim() === ''
|
||
? undefined
|
||
: { backgroundImage: `url(${JSON.stringify(site.background.dark.trim())})` }
|
||
}
|
||
aria-hidden="true"
|
||
/>
|
||
|
||
<Layout
|
||
contained
|
||
maxWidth={1380}
|
||
gutter={20}
|
||
siderWidth={240}
|
||
gap={20}
|
||
headerHeight={60}
|
||
headerVariant="solid"
|
||
siderBordered={false}
|
||
contentPadding="none"
|
||
height="screen"
|
||
scrollable
|
||
hideScrollbar
|
||
contentId="content-scroll"
|
||
className="app"
|
||
header={
|
||
<SiteHeader
|
||
projectCount={projects.length}
|
||
sampleProject={projects[0]?.name}
|
||
live={live}
|
||
headerItems={site.header.items}
|
||
headerEnabled={site.header.enabled}
|
||
headerSpeed={site.header.speed}
|
||
headerGap={site.header.gap}
|
||
site={site.site}
|
||
ready={settings !== null}
|
||
authenticated={session?.authenticated === true}
|
||
username={session?.username ?? undefined}
|
||
refreshing={refreshing}
|
||
dark={isDark}
|
||
onToggleTheme={() => void toggleTheme()}
|
||
onRefresh={() => {
|
||
// 刷新 = 整页重载：项目扫描、内容库、设置、主题都重新走一遍
|
||
window.location.reload()
|
||
}}
|
||
onLogin={() => setLoginOpen(true)}
|
||
onLogout={() => {
|
||
void logout().then(() => setSession({ authenticated: false, has_admin: true }))
|
||
}}
|
||
onSettings={() => window.location.assign('/admin')}
|
||
/>
|
||
}
|
||
toolbar={
|
||
<div className="search-toolbar">
|
||
<div className="search-shell" ref={engineRef}>
|
||
<button
|
||
type="button"
|
||
className="engine-badge"
|
||
aria-haspopup="menu"
|
||
aria-expanded={engineOpen}
|
||
aria-label={`搜索引擎：${searchEngine.name}，点击切换`}
|
||
title={
|
||
searchEngine.id === 'internal'
|
||
? '当前：站内搜索；回车打开第一个匹配项'
|
||
: `当前：${searchEngine.name}；回车用该引擎搜索`
|
||
}
|
||
onClick={() => setEngineOpen((open) => !open)}
|
||
>
|
||
<EngineIcon name={searchEngine.id as EngineIconName} size={14} />
|
||
<span>{searchEngine.name}</span>
|
||
</button>
|
||
|
||
<SearchField
|
||
value={keyword}
|
||
onChange={setKeyword}
|
||
inputRef={searchRef}
|
||
maxWidth="100%"
|
||
placeholder={
|
||
searchEngine.id === 'internal'
|
||
? '搜索站内项目…'
|
||
: `使用 ${searchEngine.name} 搜索...`
|
||
}
|
||
label={
|
||
searchEngine.id === 'internal'
|
||
? '搜索站内项目，回车打开第一个匹配项'
|
||
: `使用 ${searchEngine.name} 搜索，回车打开新标签页`
|
||
}
|
||
variant="card"
|
||
hotkey="k"
|
||
/>
|
||
|
||
{engineOpen && (
|
||
<div className="engine-dropdown" role="menu" aria-label="选择搜索引擎">
|
||
<button
|
||
type="button"
|
||
role="menuitemradio"
|
||
aria-checked={searchEngine.id === 'internal'}
|
||
className={`engine-option${searchEngine.id === 'internal' ? ' is-active' : ''}`}
|
||
onClick={() => chooseEngine('internal')}
|
||
>
|
||
<EngineIcon name="internal" size={18} />
|
||
<span>站内搜索</span>
|
||
</button>
|
||
{searchEngines.length > 1 && (
|
||
<>
|
||
<div className="engine-divider" />
|
||
{searchEngines.slice(1).map((engine) => (
|
||
<button
|
||
key={engine.id}
|
||
type="button"
|
||
role="menuitemradio"
|
||
aria-checked={engine.id === searchEngine.id}
|
||
className={`engine-option${engine.id === searchEngine.id ? ' is-active' : ''}`}
|
||
onClick={() => chooseEngine(engine.id)}
|
||
>
|
||
<EngineIcon name={engine.id as EngineIconName} size={18} />
|
||
<span>{engine.name}</span>
|
||
</button>
|
||
))}
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
}
|
||
sider={
|
||
<div className="sidebar-wrap">
|
||
<div className="sidebar sidebar-home">
|
||
{settings !== null && site.sidebar.show_profile !== false && (
|
||
<ProfileCard profile={site.profile} />
|
||
)}
|
||
{settings !== null && site.sidebar.show_service !== false && (
|
||
<ServicePanel
|
||
projects={projects}
|
||
live={live}
|
||
refreshing={refreshing}
|
||
onRefresh={refresh}
|
||
onOpenApi={() => navigate('/interface')}
|
||
/>
|
||
)}
|
||
{settings !== null && !loading && site.sidebar.show_nav !== false && (
|
||
<div className="nav-card">
|
||
<Menu
|
||
items={sidebarItems}
|
||
activeKey={activeKey}
|
||
itemHeight={39}
|
||
onSelect={(key) => {
|
||
if (key === 'home') navigate('/')
|
||
else navigate(`/g/${encodeURIComponent(key.slice(2))}`)
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
}
|
||
>
|
||
<div className="content">
|
||
<h1 className="sr-only">Stash 本地应用工作区</h1>
|
||
|
||
{status === 'error' && (
|
||
<Notice
|
||
tone="error"
|
||
title="连不上 Stash 服务"
|
||
action={{ label: '重试', onClick: refresh }}
|
||
>
|
||
{error}
|
||
</Notice>
|
||
)}
|
||
|
||
{route.kind === 'home' && renderHome()}
|
||
{route.kind === 'api' && <ApiDocs />}
|
||
{route.kind === 'group' && renderGroupPage(route.key)}
|
||
{route.kind === 'item' && renderItemPage(route.key, route.itemId)}
|
||
</div>
|
||
</Layout>
|
||
|
||
<BackToTop visible={scrolled} targetId="page-scroll" />
|
||
</>
|
||
)
|
||
}
|