diff --git a/stash-web/src/App.css b/stash-web/src/App.css index 6a7d9a9..3477ded 100644 --- a/stash-web/src/App.css +++ b/stash-web/src/App.css @@ -298,70 +298,9 @@ background-color: var(--su-color-primary); } -/* ---------- 应用条目 ---------- */ +/* ---------- 应用条目 / 图文白卡 ---------- */ -.app-card { - display: flex; - align-items: center; - gap: var(--su-space-4); - padding: var(--su-space-2) 0; - border-radius: var(--su-radius-sm); -} - -.app-card:hover .app-card-name { - color: var(--su-color-primary); -} - -.app-card-info { - display: flex; - flex-direction: column; - gap: var(--su-space-1); - min-width: 0; -} - -/* 旧版应用头像是 48px 圆形,右下角是 10px 小认证标 */ -.app-card-avatar { - width: 48px; - height: 48px; - font-size: var(--su-font-size-lg); -} - -.app-card-avatar > span + span { - width: 10px; - height: 10px; - border-width: 1px; - /* 6px 不是文字尺寸:这是 10px 圆标里的一枚「✓」字形,按图标对待; - 设计系统的字阶(12 起)不覆盖这种装饰字形 */ - font-size: 6px; -} - -/* ---------- 图文白卡 ---------- */ - -.ces-card { - overflow: hidden; - transition: transform var(--su-duration-fast) var(--su-ease-in-out); -} - -.ces-card:hover { - transform: translateY(-2px); -} - -.ces-body { - display: flex; - flex-direction: column; - gap: var(--su-space-1); - padding: var(--su-space-3); - text-align: left; -} - -.ces-body--button { - width: 100%; - cursor: pointer; -} - -.ces-body--button:hover { - background-color: var(--su-bg-subtle); -} +/* 条目行的版式在 @stash/ui 的 EntryRow,图文卡在 EntryTile,这里不再有手写卡片外壳 */ /* ---------- 详情 ---------- */ @@ -860,7 +799,6 @@ } @media (prefers-reduced-motion: reduce) { - .app-card, .related-item, .link-button { transition: none; diff --git a/stash-web/src/components/admin/AdminNext.tsx b/stash-web/src/components/admin/AdminNext.tsx index be85e2f..69ea500 100644 --- a/stash-web/src/components/admin/AdminNext.tsx +++ b/stash-web/src/components/admin/AdminNext.tsx @@ -178,6 +178,28 @@ export function AdminNext() { toast.success('侧边栏已保存') } + /** 页头的明暗切换:写回 site.theme,前后台一起变 */ + const themeSetting = draft?.site.theme ?? document?.settings.site.theme ?? 'auto' + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches + const isDark = themeSetting === 'dark' || (themeSetting === 'auto' && prefersDark) + + const toggleTheme = async () => { + if (document === null || draft === null) return + const next = isDark ? 'light' : 'dark' + setSaving(true) + const result = await saveSettings(document.version, { + ...draft, + site: { ...draft.site, theme: next }, + }) + setSaving(false) + if (!result.ok) { + toast.error(result.error) + return + } + setDocument(result.document) + setDraft(clone(result.document.settings)) + } + const confirmDelete = async () => { if (pending === null) return setDeleting(true) @@ -209,6 +231,12 @@ export function AdminNext() {
+ } + onClick={() => void toggleTheme()} + disabled={!authenticated || saving} + /> } diff --git a/stash-web/src/components/content/AppCard.tsx b/stash-web/src/components/content/AppCard.tsx index 794c52e..3dc9f78 100644 --- a/stash-web/src/components/content/AppCard.tsx +++ b/stash-web/src/components/content/AppCard.tsx @@ -1,9 +1,9 @@ -import { Avatar, ItemBadge, Space, Text } from '@stash/ui' +import { EntryRow, ItemBadge } from '@stash/ui' import type { AppItem } from '../../data/types' /** * 应用卡片:头像 + 名称(热门带 HOT 角标)+ 单行描述。 - * 点击进入条目详情;按住修饰键时保持浏览器默认行为(新标签打开原始链接)。 + * 版式与点击语义都在库里的 EntryRow,这里只做数据映射。 */ type AppCardProps = { item: AppItem @@ -12,37 +12,15 @@ type AppCardProps = { export function AppCard({ item, onOpen }: AppCardProps) { return ( - { - if (onOpen === undefined) return - if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return - event.preventDefault() - onOpen(item.id) - }} - > - - -
- - - {item.name} - - {item.hot === true && HOT} - - - {item.desc} - -
-
+ description={item.desc} + href={item.href} + avatar={item.cover} + fallback={item.icon} + verified={item.hot === true} + badge={item.hot === true ? HOT : undefined} + onOpen={onOpen === undefined ? undefined : () => onOpen(item.id)} + /> ) } diff --git a/stash-web/src/components/content/CesCard.tsx b/stash-web/src/components/content/CesCard.tsx index ef17506..f5c41cc 100644 --- a/stash-web/src/components/content/CesCard.tsx +++ b/stash-web/src/components/content/CesCard.tsx @@ -1,9 +1,9 @@ -import { Card, Cover, Space, Text } from '@stash/ui' +import { EntryTile } from '@stash/ui' import type { ArticleItem } from '../../data/types' /** * 明细页图文卡:上图下文的白卡。 - * 传入 onOpen 时整张卡变成按钮,点击进入文章详情。 + * 版式与点击语义都在库里的 EntryTile,这里只做数据映射。 */ type CesCardProps = { item: ArticleItem @@ -11,38 +11,12 @@ type CesCardProps = { } export function CesCard({ item, onOpen }: CesCardProps) { - const body = ( - - - {item.title} - - - {item.desc} - - - ) - return ( - - onOpen(item.id)} - /> - {onOpen === undefined ? ( -
{body}
- ) : ( - - )} -
+ onOpen(item.id)} + /> ) }