+ {block.text} +
+ ) + } + + if (block.type === 'image') { + return ( ++ {block.text} +
+ ) + })} +
+ {/* 滚动后才淡入的顶部遮罩，避免内容在容器顶边被硬切 */}
+
+
+
)
}
diff --git a/stash-web/src/assets/iconfont.woff2 b/stash-web/src/assets/iconfont.woff2
new file mode 100644
index 0000000..4ca9e6f
Binary files /dev/null and b/stash-web/src/assets/iconfont.woff2 differ
diff --git a/stash-web/src/assets/site-bg.jpg b/stash-web/src/assets/site-bg.jpg
new file mode 100644
index 0000000..44f1755
Binary files /dev/null and b/stash-web/src/assets/site-bg.jpg differ
diff --git a/stash-web/src/catalog.ts b/stash-web/src/catalog.ts
deleted file mode 100644
index 599966f..0000000
--- a/stash-web/src/catalog.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * 占位数据：沿用 index9 设计稿里的分类与卡片。
- *
- * 后端目前只提供扁平的项目列表，没有分类概念，
- * 所以这里的内容仅用于撑起界面结构，等接口支持分类后再替换。
- */
-
-export type CatalogCard = {
- id: string
- title: string
- desc: string
- href: string
- /** 卡片左侧的字符标记 */
- initial: string
- /** desc 是路径时用等宽字体 */
- mono?: boolean
-}
-
-export type CatalogSection = {
- id: string
- title: string
- cards: CatalogCard[]
-}
-
-export type NavLink = {
- id: string
- label: string
-}
-
-export type NavGroup = {
- id: string
- label: string
- links: NavLink[]
-}
-
-/** 侧栏顶层链接 */
-export const MOCK_NAV_PRIMARY: NavLink[] = [{ id: 'common', label: '常用推荐' }]
-
-/** 侧栏可折叠分组 */
-export const MOCK_NAV_GROUPS: NavGroup[] = [
- {
- id: 'assets',
- label: '素材资源',
- links: [
- { id: 'design', label: 'UI 设计资源' },
- { id: 'icon', label: '矢量图标' },
- { id: 'photo', label: '免费壁纸' },
- ],
- },
- {
- id: 'tools',
- label: '开发工具',
- links: [
- { id: 'dev', label: '前端调试工具' },
- { id: 'code', label: '在线编辑器' },
- ],
- },
-]
-
-/** 内容区占位分区，顺序与设计稿一致 */
-export const MOCK_SECTIONS: CatalogSection[] = [
- {
- id: 'common',
- title: '常用推荐',
- cards: [
- {
- id: 'github',
- title: 'GitHub',
- desc: '代码托管与开源社区',
- href: '#',
- initial: 'G',
- },
- { id: 'zhihu', title: '知乎', desc: '深度内容问答社区', href: '#', initial: 'Z' },
- {
- id: 'bilibili',
- title: '哔哩哔哩',
- desc: '弹幕视频分享网站',
- href: '#',
- initial: 'B',
- },
- {
- id: 'v2ex',
- title: 'V2EX',
- desc: '创意工作者讨论社区',
- href: '#',
- initial: 'V',
- },
- ],
- },
- {
- id: 'dev',
- title: '前端调试工具',
- cards: [
- {
- id: 'stackoverflow',
- title: 'Stack Overflow',
- desc: '程序员技术问答',
- href: '#',
- initial: 'S',
- },
- { id: 'juejin', title: '掘金', desc: '开发者技术社区', href: '#', initial: 'J' },
- ],
- },
- {
- id: 'code',
- title: '在线编辑器',
- cards: [
- {
- id: 'codepen',
- title: 'CodePen',
- desc: '前端在线代码演练场',
- href: '#',
- initial: 'C',
- },
- ],
- },
- {
- id: 'design',
- title: 'UI 设计资源',
- cards: [
- {
- id: 'dribbble',
- title: 'Dribbble',
- desc: '全球设计作品分享社区',
- href: '#',
- initial: 'D',
- },
- ],
- },
-]
diff --git a/stash-web/src/components/BackToTop.tsx b/stash-web/src/components/BackToTop.tsx
deleted file mode 100644
index e7b4d8f..0000000
--- a/stash-web/src/components/BackToTop.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-export function BackToTop() {
- const handleClick = () => {
- // 桌面端滚动的是内容容器，窄屏滚动的是窗口
- document.getElementById('content-scroll')?.scrollTo({ top: 0, behavior: 'smooth' })
- window.scrollTo({ top: 0, behavior: 'smooth' })
- }
-
- return (
-
- )
-}
diff --git a/stash-web/src/components/Sidebar.tsx b/stash-web/src/components/Sidebar.tsx
deleted file mode 100644
index 09dead0..0000000
--- a/stash-web/src/components/Sidebar.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useState } from 'react'
-import type { Project } from '../api'
-import { MOCK_NAV_GROUPS, MOCK_NAV_PRIMARY } from '../catalog'
-import { ProfileCard } from './ProfileCard'
-import { ServicePanel } from './ServicePanel'
-
-type SidebarProps = {
- projects: Project[]
- live: boolean
- refreshing: boolean
- onRefresh: () => void
-}
-
-export function Sidebar({ projects, live, refreshing, onRefresh }: SidebarProps) {
- const [openGroups, setOpenGroups] = useState {
+ const next = event.currentTarget.scrollTop > 4
+ setScrolled((current) => (current === next ? current : next))
+ }}
+ >
- Stash 本地应用工作区
- {sectionsToRender.map(renderSection)} - - {noMatch && ( -
- 没有匹配「{keyword.trim()}」的内容
-
+ openItem(categoryId, itemId, { type: 'home' })
+ }
+ />
+
+ {searching && visibleCategories.length === 0 && (
+ openItem(detailCategory.id, itemId, detailView)}
+ />
+ )}
+
+ {detailView !== undefined && detailCategory === undefined && (
+
换个关键字试试，或清空搜索查看全部。
+ {status === 'error' && ( +
+ 连不上 Stash 服务
+
)}
+
+ {detailView === undefined && itemView === undefined && (
+ <>
+ {error}
+
+ 没有匹配「{keyword.trim()}」的内容
+
+ )}
+
+ )}
+
+ {detailView !== undefined && detailCategory !== undefined && (
+ 换个关键字试试，或清空搜索查看全部。
+分类不存在
+ )} + + {itemView !== undefined && renderItemView()}
+ {items.map((item) => (
+
+ )
+}
diff --git a/stash-web/src/components/content/ArticleCard.tsx b/stash-web/src/components/content/ArticleCard.tsx
new file mode 100644
index 0000000..be972ec
--- /dev/null
+++ b/stash-web/src/components/content/ArticleCard.tsx
@@ -0,0 +1,36 @@
+import type { ArticleItem } from '../../data/types'
+
+/**
+ * 首页图文卡：4:3 封面 + 底部渐变条上的标题。
+ * 传入 onOpen 时整张卡变成按钮，点击进入文章详情。
+ */
+type ArticleCardProps = {
+ item: ArticleItem
+ onOpen?: (itemId: string) => void
+}
+
+export function ArticleCard({ item, onOpen }: ArticleCardProps) {
+ const content = (
+ <>
+
+
+
+
+
+ {(article.blocks ?? []).map((block, index) => {
+ if (block.type === 'heading') {
+ return (
+ 
+ )
+ }
+
+ return (
+
+
+ )
+}
diff --git a/stash-web/src/components/content/ArticleGrid.tsx b/stash-web/src/components/content/ArticleGrid.tsx
new file mode 100644
index 0000000..2d9c154
--- /dev/null
+++ b/stash-web/src/components/content/ArticleGrid.tsx
@@ -0,0 +1,19 @@
+import type { ArticleItem } from '../../data/types'
+import { ArticleCard } from './ArticleCard'
+
+/** 图文网格：首页 4 列，窄屏 2 列 */
+type ArticleGridProps = {
+ items: ArticleItem[]
+ /** 点击卡片打开文章详情 */
+ onOpen?: (itemId: string) => void
+}
+
+export function ArticleGrid({ items, onOpen }: ArticleGridProps) {
+ return (
+
+
+ {categoryTitle} / 文章
+
+
+ + {article.title} + +
+ +
+ {meta.map((text, index) => (
+
+ {index > 0 && }
+ {text}
+
+ ))}
+
+
+ {items.map((item) => (
+
+ )
+}
diff --git a/stash-web/src/components/content/CesCard.tsx b/stash-web/src/components/content/CesCard.tsx
new file mode 100644
index 0000000..318ec79
--- /dev/null
+++ b/stash-web/src/components/content/CesCard.tsx
@@ -0,0 +1,37 @@
+import type { ArticleItem } from '../../data/types'
+
+/**
+ * 明细页图文卡：上图下文的白卡。
+ * 传入 onOpen 时整张卡变成按钮，点击进入文章详情。
+ */
+type CesCardProps = {
+ item: ArticleItem
+ onOpen?: (itemId: string) => void
+}
+
+export function CesCard({ item, onOpen }: CesCardProps) {
+ const content = (
+ <>
+
+ {items.map((item) => (
+
+ )
+}
diff --git a/stash-web/src/components/content/DetailView.tsx b/stash-web/src/components/content/DetailView.tsx
new file mode 100644
index 0000000..69d9845
--- /dev/null
+++ b/stash-web/src/components/content/DetailView.tsx
@@ -0,0 +1,88 @@
+import { categoryCount, type Category } from '../../data/types'
+import { ArrowLeftIcon } from '../common/Icon'
+import { AppGrid } from './AppGrid'
+import { CesCardGrid } from './CesCardGrid'
+import { GroupBlock } from './GroupBlock'
+import { PosterGrid } from './PosterGrid'
+
+/**
+ * 分类明细视图：返回条 + 面包屑 + hero（图标 / 标题 / 数量）+ 内容区。
+ *
+ * 内容区按分类类型切换：
+ * - apps：指定分组时只渲染该组，否则单组扁平渲染、多组带小标题分组渲染；
+ * - posters：6 列海报；
+ * - articles：上图下文白卡网格。
+ */
+type DetailViewProps = {
+ category: Category
+ /** 从侧栏子菜单进入时指定的分组 */
+ groupId?: string
+ onBack: () => void
+ /** 点击卡片 / 海报进入条目详情 */
+ onOpenItem: (itemId: string) => void
+}
+
+export function DetailView({ category, groupId, onBack, onOpenItem }: DetailViewProps) {
+ const groups = category.kind === 'apps' ? category.groups : []
+ const activeGroup =
+ groupId !== undefined ? groups.find((group) => group.id === groupId) : undefined
+
+ const title = activeGroup?.name ?? category.title
+ const count = activeGroup !== undefined ? activeGroup.items.length : categoryCount(category)
+ const breadcrumb =
+ activeGroup !== undefined
+ ? `首页 / ${category.title} / ${activeGroup.name}`
+ : `首页 / ${category.title}`
+
+ function renderBody() {
+ if (category.kind === 'posters') {
+ return {category.emptyText ?? '暂无内容'}
+ } + + return ( + <> + {category.groups.map((group) => ( +
+
+ )
+}
diff --git a/stash-web/src/components/content/GroupBlock.tsx b/stash-web/src/components/content/GroupBlock.tsx
new file mode 100644
index 0000000..7a4c13f
--- /dev/null
+++ b/stash-web/src/components/content/GroupBlock.tsx
@@ -0,0 +1,20 @@
+import type { AppGroup } from '../../data/types'
+import { AppGrid } from './AppGrid'
+
+/**
+ * 明细页的分组块：小标题 + 该组的应用网格。
+ * 分类被拆成多个分组时重复使用，单个分组时明细页不渲染标题。
+ */
+type GroupBlockProps = {
+ group: AppGroup
+ onOpen?: (itemId: string) => void
+}
+
+export function GroupBlock({ group, onOpen }: GroupBlockProps) {
+ return (
+
+
+ {breadcrumb}
+
+
+
+
+
+
+ {renderBody()}
+ {title}
+ [{count}] +{group.name}
+
+ {categories.map((category) => (
+ onOpenDetail(category.id)}
+ >
+ {renderPreview(category, onOpenItem)}
+
+ ))}
+
+ )
+}
+
+/** 按分类类型输出对应的预览网格；应用类为空时给出提示文案 */
+function renderPreview(
+ category: Category,
+ onOpenItem: (categoryId: string, itemId: string) => void,
+) {
+ if (category.kind === 'apps') {
+ const items = flattenAppItems(category).slice(0, category.previewLimit ?? 4)
+
+ if (items.length === 0) {
+ return {category.emptyText ?? '暂无内容'}
+ } + + return
+
+ 
+ )}
+
+
+
+ )
+}
diff --git a/stash-web/src/components/content/PosterCard.tsx b/stash-web/src/components/content/PosterCard.tsx
new file mode 100644
index 0000000..c75febe
--- /dev/null
+++ b/stash-web/src/components/content/PosterCard.tsx
@@ -0,0 +1,36 @@
+import type { PosterItem } from '../../data/types'
+
+/**
+ * 竖版海报卡：2:3 封面 + 底部渐变遮罩上的标题。
+ * 传入 onOpen 时整张卡变成按钮，点击进入该电影的详情页。
+ */
+type PosterCardProps = {
+ item: PosterItem
+ onOpen?: (itemId: string) => void
+}
+
+export function PosterCard({ item, onOpen }: PosterCardProps) {
+ const content = (
+ <>
+
+
+ {breadcrumb}
+
+
+ + {model.title} + +
+ +
+ {model.cover !== undefined ? (
+ 
+ ) : (
+ {model.fallbackIcon ?? '•'}
+ )}
+
+
+ {model.tags.length > 0 && (
+
+ {model.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+ {model.comment !== undefined && (
+
+
+
+ )}
+
+ {model.paragraphs.map((paragraph, index) => (
+ {model.comment}
++ {paragraph} +
+ ))} + +
+
+
+
+ {model.banner !== undefined && (
+
+ {items.map((item) => (
+
+ )
+}
diff --git a/stash-web/src/components/content/RelatedList.tsx b/stash-web/src/components/content/RelatedList.tsx
new file mode 100644
index 0000000..07aadd1
--- /dev/null
+++ b/stash-web/src/components/content/RelatedList.tsx
@@ -0,0 +1,45 @@
+import type { RelatedItem } from '../../data/types'
+
+/**
+ * 详情页的「推荐阅读」：两列小卡片，头像 + 名称 + 截断描述。
+ * 点击任意一条会在同一视图内切换到对应条目的详情。
+ */
+type RelatedListProps = {
+ items: RelatedItem[]
+ onOpen: (itemId: string) => void
+}
+
+export function RelatedList({ items, onOpen }: RelatedListProps) {
+ if (items.length === 0) return null
+
+ return (
+ + + 推荐阅读 +
+ +-
+ {items.map((item) => (
+
- + + + ))} +
+
+
+
+
+ {onMore !== undefined && (
+
+ )}
+ {title}
+
+ {tag !== undefined && (
+ {tag}
+ )}
+ {children}
+
+ )
+}
diff --git a/stash-web/src/components/header/SiteHeader.tsx b/stash-web/src/components/header/SiteHeader.tsx
new file mode 100644
index 0000000..8ed96a6
--- /dev/null
+++ b/stash-web/src/components/header/SiteHeader.tsx
@@ -0,0 +1,58 @@
+import { SearchIcon, UserIcon } from '../common/Icon'
+import { HeaderInfoItem } from './HeaderInfoItem'
+
+/**
+ * 顶部栏：左品牌、中间运行信息、右侧操作图标。
+ * 信息区展示「共 N 个本地应用 / 第一个项目 / 连接状态」，
+ * 对应模板里的 header-center-info。
+ */
+type SiteHeaderProps = {
+ projectCount: number
+ /** 用于展示的第一个项目名，没有项目时留空 */
+ sampleProject?: string
+ live: boolean
+ onFocusSearch: () => void
+}
+
+export function SiteHeader({ projectCount, sampleProject, live, onFocusSearch }: SiteHeaderProps) {
+ return (
+
+
+
+ STASH
+
+
+
+
+ 共 {projectCount} 个本地应用
+
+ {sampleProject !== undefined && (
+ {sampleProject}
+ )}
+
+
+ {live ? '实时同步已连接' : '等待服务连接'}
+
+
+
+
+
+ {/* TODO(auth): 后端登录接口就绪后接上，目前仅作入口占位 */}
+
+
+
-
+
diff --git a/stash-web/src/components/sidebar/CategoryNav.tsx b/stash-web/src/components/sidebar/CategoryNav.tsx
new file mode 100644
index 0000000..9f27439
--- /dev/null
+++ b/stash-web/src/components/sidebar/CategoryNav.tsx
@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import { NAV_GROUPS, NAV_TOP_LEVEL, type NavTarget } from '../../data/nav'
+
+/**
+ * 分类导航树：顶层直达链接 + 可折叠分组。
+ * 点击叶子节点不跳转页面，而是把目标（分类 + 可选分组）交给父组件的 onNavigate，
+ * 由父组件切换右侧的明细视图。
+ */
+type CategoryNavProps = {
+ /** 当前明细视图的分类 / 分组，用于高亮 */
+ activeCategoryId?: string
+ activeGroupId?: string
+ onNavigate: (target: NavTarget) => void
+}
+
+export function CategoryNav({ activeCategoryId, activeGroupId, onNavigate }: CategoryNavProps) {
+ const [openGroups, setOpenGroups] = useState
+
+
+
+
+
+
\ No newline at end of file
diff --git a/templates/index3.html b/templates/index3.html
new file mode 100644
index 0000000..3caf41b
--- /dev/null
+++ b/templates/index3.html
@@ -0,0 +1,920 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 本地服务
+ 1
+
+
+
+
+
+
+
+
+ git_helper
+ /git_helper/
+
+
+
+
+
+
+
+
+
+
+
+
+ 常用推荐
+ 4
+
+
+
+
+
+
+
+
+ GitHub
+ 代码托管与开源社区
+
+
+
+
+
+ 知乎
+ 深度内容问答社区
+
+
+
+
+
+ 哔哩哔哩
+ 弹幕视频分享网站
+
+
+
+
+
+ V2EX
+ 创意工作者讨论社区
+
+
+
+
+
+
+
+
+
+
+
+
+ 推荐电影
+ 6
+
+
+
+
+ 
+
+
+
+ 千与千寻 千と千尋の神隠し (2001)
+
+ 
+
+
+
+ 美丽人生 La vita è bella (1997)
+
+ 
+
+
+
+ 这个杀手不太冷 Léon (1994)
+
+ 
+
+
+
+ 阿甘正传 Forrest Gump (1994)
+
+ 
+
+
+
+ 霸王别姬 (1993)
+
+ 
+
+
+
+ 肖申克的救赎 The Shawshank...
+
+
+
+
+
+
+
+
+
+
+
+ CES 现场报道
+ 12
+
+
+
+
+
+ 
+
+
+
+ 可塑性极强的玻璃，在设计师手里有了更多可能
+
+ 
+
+
+
+ 废旧共享单车如何变成微型共享书屋？
+
+ 
+
+
+
+ 荧光灯管与混凝土块的组合，可以玩出多少花样？
+
+ 
+
+
+
+ 混凝土做的模块化收纳框，还能改成搁架用
+
+ 
+
+
+
+ 这个用拉伸材料做的头盔，还能帮你呼叫救护车
+
+ 
+
+
+
+
+
+ 你如何选择字体，简单易读还是好看有趣？
+
+ 
+
+
+
+ 家里空间小？你需要几把可以悬挂在墙上的椅子
+
+ 
+
+
+
+ 宜家厨房家具又被改造了，色彩是亮点
+
+ 
+
+
+
+ 这款诞生50年的扶手椅，推出了特别版配色
+
+ 
+
+
+
+ 让家和办公室界限变得模糊的一组家具
+
+ 
+
+
+
+ 这个酒店设计奖，挖掘过去一年体验最好的酒店
+
+ 
+
+
+
+ 一款可移动办公桌，挂墙上当作白板就能写写画画
+
+
+
+
+ STASH
+
+
+
+
+
+
+ 共 1 个本地应用
+
+
+ 本地
+ git_helper
+
+
+ 状态
+ 等待服务连接
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/templates/index4.html b/templates/index4.html
new file mode 100644
index 0000000..0a21273
--- /dev/null
+++ b/templates/index4.html
@@ -0,0 +1,1378 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 本地服务
+ 1
+
+
+
+
+
+
+
+
+ git_helper
+ /git_helper/
+
+
+
+
+
+
+
+
+ 常用推荐
+ 4
+
+
+
+
+
+
+
+
+ GitHub
+ 代码托管与开源社区
+
+
+
+
+
+ 知乎
+ 深度内容问答社区
+
+
+
+
+
+ 哔哩哔哩
+ 弹幕视频分享网站
+
+
+
+
+
+ V2EX
+ 创意工作者讨论社区
+
+
+
+
+
+
+
+
+ 推荐电影
+ 6
+
+
+
+
+
+
+
+
+ 千与千寻 千と千尋の神隠し (2001)
+
+
+
+
+
+ 美丽人生 La vita è bella (1997)
+
+
+
+
+
+ 这个杀手不太冷 Léon (1994)
+
+
+
+
+
+ 阿甘正传 Forrest Gump (1994)
+
+
+
+
+
+ 霸王别姬 (1993)
+
+
+
+
+
+ 肖申克的救赎 The Shawshank...
+
+
+
+
+
+
+
+
+ CES 现场报道
+ 12
+
+
+
+
+
+
+
+
+ 可塑性极强的玻璃，在设计师手里有了更多可能
+
+
+
+
+
+ 废旧共享单车如何变成微型共享书屋？
+
+
+
+
+
+ 荧光灯管与混凝土块的组合，可以玩出多少花样？
+
+
+
+
+
+ 混凝土做的模块化收纳框，还能改成搁架用
+
+
+
+
+
+ 这个用拉伸材料做的头盔，还能帮你呼叫救护车
+
+
+
+
+
+ 你如何选择字体，简单易读还是好看有趣？
+
+
+
+
+ STASH
+
+
+
+
+
+
+ 共 1 个本地应用
+
+
+ 本地
+ git_helper
+
+
+ 状态
+ 等待服务连接
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 本地服务
+ 1
+
+
+
+
+
+
+
+
+ git_helper
+ /git_helper/
+
+
+
+
+
+
+
+ 常用推荐
+ 4
+
+
+
+
+
+
+
+
+ GitHub
+ 代码托管与开源社区
+
+
+
+
+
+ 知乎
+ 深度内容问答社区
+
+
+
+
+
+ 哔哩哔哩
+ 弹幕视频分享网站
+
+
+
+
+
+ V2EX
+ 创意工作者讨论社区
+
+
+
+
+
+
+
+ 推荐电影
+ 6
+
+
+
+
+
+
+
+ 千与千寻 (2001)
+
+
+
+ 美丽人生 (1997)
+
+
+
+ 这个杀手不太冷 (1994)
+
+
+
+ 阿甘正传 (1994)
+
+
+
+ 霸王别姬 (1993)
+
+
+
+ 肖申克的救赎
+
+
+
+
+
+
+ CES 现场报道
+ 4
+
+
+
+
+
+
+
+ 可塑性极强的玻璃设计
+
+
+
+ 废旧共享单车变微型书屋
+
+
+
+ 荧光灯管与混凝土块的组合
+
+
+
+ 混凝土模块化收纳框
+
+
+
+
+
+
+ ← 返回首页
+
+
+
+
+
+
+
+
+ 推荐好站
+[11]
+