feat(web): 对齐 Alright 主题视觉规范（配色/字体/图标/背景/动效），并补充设计规范文档
This commit is contained in:
+23
-1
@@ -1,2 +1,24 @@
|
||||
# ---------- Rust ----------
|
||||
/target
|
||||
.idea
|
||||
|
||||
# ---------- 前端 ----------
|
||||
# 依赖与构建产物：dist 由 npm run build 生成，再被 build.rs 内嵌进二进制
|
||||
node_modules/
|
||||
stash-web/dist/
|
||||
stash-web/dist-ssr/
|
||||
*.tsbuildinfo
|
||||
.vite/
|
||||
|
||||
# ---------- 生成的代码快照 ----------
|
||||
repomix-output.xml
|
||||
|
||||
# ---------- IDE / 编辑器 ----------
|
||||
/.idea
|
||||
*.iml
|
||||
.vscode/
|
||||
|
||||
# ---------- 日志与系统文件 ----------
|
||||
*.log
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
*.local
|
||||
|
||||
@@ -0,0 +1,325 @@
|
||||
# Alright 主题设计规范（Stash 前端）
|
||||
|
||||
本文件记录 Stash 控制台在视觉上对齐 [Alright 主题](https://alright.demo.nicetheme.xyz/) 的各项标准，
|
||||
用于后续新增组件、调整样式时保持一致。
|
||||
|
||||
- 参考站点：<https://alright.demo.nicetheme.xyz/>
|
||||
- 生效范围：`stash-web/`（React 控制台）
|
||||
- 令牌定义处：[`stash-web/src/index.css`](stash-web/src/index.css)
|
||||
- 组件样式：[`stash-web/src/App.css`](stash-web/src/App.css)
|
||||
|
||||
> 所有色值、字号、圆角均取自主题的 `:root` 设计变量，不是肉眼取色。
|
||||
|
||||
---
|
||||
|
||||
## 1. 设计令牌
|
||||
|
||||
### 1.1 灰阶
|
||||
|
||||
| 令牌 | 值 | 用途 |
|
||||
| --- | --- | --- |
|
||||
| `--gray-1` | `#f7f8fa` | 页面背景、浅底块 |
|
||||
| `--gray-2` | `#f6f6f6` | 边框、次级浅底 |
|
||||
| `--gray-3` | `#eeeeee` | hover 底色 |
|
||||
| `--gray-4` | `#c9cdd4` | 分隔线、禁用态 |
|
||||
| `--gray-5` | `#86909c` | 说明文字 |
|
||||
| `--gray-6` | `#4e5969` | 次级文字 |
|
||||
| `--gray-7` | `#2c343c` | 强调文字 |
|
||||
| `--gray-8` | `#1d2129` | 主文字 |
|
||||
|
||||
### 1.2 语义色
|
||||
|
||||
| 令牌 | 值 | 用途 |
|
||||
| --- | --- | --- |
|
||||
| `--color-primary` | `#3858f6` | 主色：链接、选中态、色条、图标 |
|
||||
| `--color-primary` 10% | `rgba(56, 88, 246, 0.1)` | 主色浅底（`--primary-soft`） |
|
||||
| `--color-danger` | `#ff3e3e` | 数量角标、错误提示 |
|
||||
| `--color-warning` | `#ffba3a` | 橙色强调（CES 色条） |
|
||||
| `--color-success` | `#4abd86` | 在线状态 |
|
||||
| 渐变红 | `linear-gradient(to right, #ff6034, #ff3e3e)` | 热门标记 |
|
||||
| HOT 渐变 | `#ff7b51 → #ff0e0e` | HOT 图形徽标 |
|
||||
| 认证渐变 | `#ffb74a → #fd900f` | 头像认证角标 |
|
||||
|
||||
### 1.3 圆角
|
||||
|
||||
| 令牌 | 值 | 用途 |
|
||||
| --- | --- | --- |
|
||||
| `--radius-xs` | `4px` | 小标签、徽标 |
|
||||
| `--radius-sm` | `6px` | 小组件 |
|
||||
| `--radius-main`(md) | `12px` | 卡片、面板 |
|
||||
| `--radius-lg` | `24px` | 大容器 |
|
||||
| `max` | `999px` | 胶囊、圆形 |
|
||||
|
||||
### 1.4 阴影
|
||||
|
||||
主题的阴影非常克制，只有两层：
|
||||
|
||||
```css
|
||||
--shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02); /* 常态 */
|
||||
--shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06); /* 悬停 */
|
||||
```
|
||||
|
||||
**注意**：应用条目、作者列表这类「行」不应该有阴影或描边。
|
||||
|
||||
### 1.5 字号阶梯
|
||||
|
||||
| 令牌 | 字号 | 行高 | 用途 |
|
||||
| --- | --- | --- | --- |
|
||||
| `xs` | 10px | 14px | 角标 |
|
||||
| `sm` | 12px | 16px | 描述、元信息、HOT 旁注 |
|
||||
| `md` | 14px | 20px | 正文、按钮、导航 |
|
||||
| `lg` | 16px | 24px | 分区标题、条目标题 |
|
||||
| `xl` | 24px | — | 详情页大标题 |
|
||||
|
||||
字重：主题的「加粗」是 `500`，不是 700。
|
||||
|
||||
### 1.6 动效时长
|
||||
|
||||
| 令牌 | 值 | 用途 |
|
||||
| --- | --- | --- |
|
||||
| `base` | 0.3s | 展开/收起、淡入淡出 |
|
||||
| `fast` | 0.2s | 颜色、背景变化 |
|
||||
| enter | `ease-out` | 出现 |
|
||||
| leave | `ease-in` | 消失 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 字体
|
||||
|
||||
| 角色 | 字体 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| 正文 | **LXGW WenKai（霞鹜文楷）** | 与演示站同一份 webfont，`cdn.staticfile.net` |
|
||||
| 回退 | `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif` | 字体加载失败时 |
|
||||
| 数字（主题） | `Outfit-Medium` | 仅主题的 `font-price` / `font-number` 使用，Stash 未引入 |
|
||||
| 等宽 | `ui-monospace, Consolas, monospace` | 路由地址等路径文本 |
|
||||
|
||||
引入位置：[`stash-web/index.html`](stash-web/index.html) 的 `<link>`，
|
||||
CSS 变量 `--font-sans` / `--font-mono` 定义在 `index.css`。
|
||||
|
||||
---
|
||||
|
||||
## 3. 图标
|
||||
|
||||
### 3.1 图标字体
|
||||
|
||||
主题使用自建 iconfont（线性风格，Project id 4809463）。
|
||||
Stash 自托管了一份 **只含所需字形** 的子集：
|
||||
|
||||
- 字体文件：[`stash-web/src/assets/iconfont.woff2`](stash-web/src/assets/iconfont.woff2)
|
||||
- 样式：[`stash-web/src/iconfont.css`](stash-web/src/iconfont.css)
|
||||
- 组件封装：[`stash-web/src/components/common/Icon.tsx`](stash-web/src/components/common/Icon.tsx)
|
||||
|
||||
| 用途 | 主题字形 | 码点 | Stash 类名 |
|
||||
| --- | --- | --- | --- |
|
||||
| 搜索 | `search_3_line` | `\e942` | `.icon-search` |
|
||||
| 用户 / 登录 | `user_3_line` | `\e966` | `.icon-user` |
|
||||
| 重新扫描 | `refresh_3_line` | `\e93d` | `.icon-refresh` |
|
||||
| 查看接口 | `link_line` | `\ea37` | `.icon-link` |
|
||||
| 跳转 | `arrow_right_up_line` | `\e8be` | `.icon-external` |
|
||||
| 浏览量 | `eye_line` | `\e8fd` | `.icon-eye` |
|
||||
| 点赞 | `thumb_up_2_line` | `\e957` | `.icon-thumb-up` |
|
||||
| 分享 | `share_3_line` | `\e946` | `.icon-share` |
|
||||
| 清空搜索 | `close_line` | `\e8e4` | `.icon-close` |
|
||||
| 分区更多 | `more_3_line` | `\e91f` | `.icon-more` |
|
||||
| 回到顶部 | `arrow_to_up_line` | `\e8c1` | `.icon-arrow-up` |
|
||||
| 返回 | `arrow_left_line` | `\e8b5` | `.icon-arrow-left` |
|
||||
| 导航展开 | `arrow_down_line` | `\e8b7` | `.icon-arrow-down`（未使用，见下） |
|
||||
|
||||
用法：`<i className="iconfont icon-search" />`，尺寸用 `font-size`、颜色用 `color` 控制。
|
||||
|
||||
### 3.2 CSS 绘制的箭头
|
||||
|
||||
主题的**导航折叠箭头不是图标字体**，而是一个 6×6 的描边方块旋转而成：
|
||||
|
||||
```css
|
||||
.nav-link.has-children::after {
|
||||
content: '';
|
||||
width: 6px; height: 6px;
|
||||
border-left: 1px solid currentColor;
|
||||
border-bottom: 1px solid currentColor;
|
||||
transform: rotate(315deg); /* 展开时 135deg */
|
||||
opacity: 0.4;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 布局
|
||||
|
||||
### 4.1 整体结构
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ SiteHeader（固定 60px，白底、底部 1px 分隔） │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ 搜索框（固定，480×44，居中） │
|
||||
│ ┌──────────┬─────────────────────────────┐ │
|
||||
│ │ Sidebar │ 内容区（内部滚动） │ │
|
||||
│ │ 240px │ 分区卡片 / 明细页 │ │
|
||||
│ └──────────┴─────────────────────────────┘ │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
| 项 | 值 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| 版心宽度 | `1380px` | `--layout-max-width`，超宽屏居中 |
|
||||
| 顶栏高度 | `60px` | `--top-nav-height` |
|
||||
| 侧栏宽度 | `240px` | `--sidebar-width`（主题为 260px，Stash 收窄） |
|
||||
| 栅格间距 | `20px` | 侧栏与内容区之间 |
|
||||
| 内容区顶部让位 | `52px` | `--content-top-offset`，给悬浮搜索框 |
|
||||
| 搜索框 | `480 × 44`，距顶 `76px` | 相对整页居中 |
|
||||
|
||||
### 4.2 页面背景
|
||||
|
||||
主题在 body 上叠了一层固定背景图：
|
||||
|
||||
```css
|
||||
.site-background {
|
||||
position: fixed; inset: 0 auto auto 0;
|
||||
width: 100%; height: 65vh;
|
||||
background: url('./assets/site-bg.jpg') top center / cover no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
.site-background::after { /* 底部 80% 渐隐到页面底色 */
|
||||
content: ''; position: absolute; inset: auto 0 0 0; height: 80%;
|
||||
background-image: linear-gradient(0deg, var(--bg-color) 0%, transparent 100%);
|
||||
}
|
||||
```
|
||||
|
||||
滚动时背景不动，形成轻微视差。
|
||||
|
||||
---
|
||||
|
||||
## 5. 组件规范
|
||||
|
||||
### 5.1 分区卡片（首页每一块）
|
||||
|
||||
| 属性 | 值 |
|
||||
| --- | --- |
|
||||
| 容器 | 白底、`1px solid var(--border-color)`、圆角 12、内边距 20、`var(--shadow-card)` |
|
||||
| 标题色条 | `4 × 16px`，圆角 2，分类色（本地/推荐 `#3858f6`、电影 `#ff6034`、CES `#ffba3a`） |
|
||||
| 标题 | 16px / 500 |
|
||||
| 数量角标 | 红色 `#ff3e3e`、10px 字号、圆角 8、贴在标题右上角（`top:-8px; right:-18px`） |
|
||||
| 更多按钮 | `.icon-more`，16px，右对齐 |
|
||||
|
||||
### 5.2 应用条目（对齐主题「推荐作者」）
|
||||
|
||||
对应标记：
|
||||
|
||||
```html
|
||||
<a class="item">
|
||||
<div class="flex-avatar">
|
||||
<img class="avatar-48">
|
||||
<span class="avatar-badge badge_5 w-10"></span>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<h3 class="font-title text-md">名字 <span class="item-badge hot"></span></h3>
|
||||
<div class="text-xs text-muted h-1x">描述</div>
|
||||
</div>
|
||||
</a>
|
||||
```
|
||||
|
||||
| 元素 | 规格 |
|
||||
| --- | --- |
|
||||
| 行 | `display:flex; gap:15px`，**无底色、无描边、无阴影** |
|
||||
| 头像 | 48×48，`border-radius:100%`，图片 `object-fit:cover` |
|
||||
| 认证角标 | 10×10，绝对定位右下角，内联 `badge_5` 的 SVG |
|
||||
| 名字 | 16px / 行高 24px / 500 |
|
||||
| HOT 徽标 | 24×16 的**图片**（内联主题 `--hot-icon` SVG），不是文字 |
|
||||
| 描述 | 12px / 行高 16px / `--text-muted`，单行省略 |
|
||||
| 悬停 | 名字变主色，不加阴影 |
|
||||
|
||||
> HOT 与认证角标只出现在 `hot: true` 的条目上，不是每个都有。
|
||||
|
||||
### 5.3 海报 / 图文
|
||||
|
||||
| 网格 | 列数 | 间距 | 比例 |
|
||||
| --- | --- | --- | --- |
|
||||
| 应用 | 4（≤1100px 变 2） | 12px | — |
|
||||
| 电影海报 | 6（≤1100px 变 3） | 12px | 2:3 |
|
||||
| 首页图文 | 4（≤1100px 变 2） | 12px | 4:3 |
|
||||
| 明细页图文白卡 | 4（≤1100px 变 2） | 16px | 封面 16:10 |
|
||||
|
||||
封面下方统一用「黑色渐变 → 透明」遮罩压住白色标题：
|
||||
|
||||
```css
|
||||
background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
|
||||
```
|
||||
|
||||
### 5.4 侧栏
|
||||
|
||||
| 模块 | 规格 |
|
||||
| --- | --- |
|
||||
| 用户卡 | 64px 圆形头像 + 认证角标、14px 名字、11–12px 角色/简介/属地 |
|
||||
| 本地服务面板 | 标题 14px、状态胶囊、两行统计（`dt` 12px / `dd` 12px 等宽）、两个操作按钮 |
|
||||
| 分类导航 | 行高 `9px 12px` 内边距、圆角 8、14px；子项 12px、缩进 12px |
|
||||
|
||||
### 5.5 返回顶部
|
||||
|
||||
对应主题 `.scroll-toolbar .totop-button`：
|
||||
|
||||
```css
|
||||
.back-to-top {
|
||||
position: fixed; top: 50%; right: 30px;
|
||||
width: 42px; height: 42px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--border-color);
|
||||
color: var(--text-sub);
|
||||
opacity: 0; visibility: hidden; /* 默认隐藏 */
|
||||
transform: translateY(-50%) translateY(15px);
|
||||
transition: opacity .3s, visibility .3s, transform .3s;
|
||||
}
|
||||
.back-to-top.is-visible {
|
||||
opacity: 1; visibility: visible;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
```
|
||||
|
||||
滚动超过 4px 才出现，回到顶部后自动隐藏；窄屏改为 `right:15px; bottom:30%`。
|
||||
|
||||
---
|
||||
|
||||
## 6. 动效
|
||||
|
||||
| 效果 | 实现 |
|
||||
| --- | --- |
|
||||
| 视图切换（首页 ↔ 明细 ↔ 条目） | `view-in`：0.22s 淡入 + 上移 6px |
|
||||
| 侧栏子菜单展开 | `grid-template-rows: 0fr → 1fr`，0.28s，全程 `overflow:hidden`（不产生滚动条） |
|
||||
| 导航箭头 | `rotate(315deg) → 135deg`，0.3s |
|
||||
| 分区卡片 / 海报 / 图文悬停 | `translateY(-2px)`，0.2s |
|
||||
| 应用条目悬停 | 仅名字改为主色 |
|
||||
| 回到顶部 | 淡入 + 上移 15px，0.3s |
|
||||
| 刷新按钮加载 | `spin 0.9s linear infinite` |
|
||||
| 内容区顶部遮罩 | 滚动后 0.2s 淡入 |
|
||||
|
||||
---
|
||||
|
||||
## 7. 与演示站的有意差异
|
||||
|
||||
| 项 | 主题 | Stash | 原因 |
|
||||
| --- | --- | --- | --- |
|
||||
| 侧栏宽度 | 260px | 240px | 控制台信息密度略高 |
|
||||
| 深色模式 | 支持 | 未实现 | 当前只做浅色主题 |
|
||||
| 数字字体 | Outfit-Medium | 未引入 | 少一个外部字体请求 |
|
||||
| 图标集 | 全量 446 个 | 13 个子集 | 控制体积（woff2 52KB） |
|
||||
| 导航箭头位置 | 紧贴文字右侧 | 行末右对齐 | 视觉上更整齐 |
|
||||
|
||||
---
|
||||
|
||||
## 8. 扩展指引
|
||||
|
||||
| 需求 | 改动位置 |
|
||||
| --- | --- |
|
||||
| 改主色 / 灰阶 / 圆角 | [`stash-web/src/index.css`](stash-web/src/index.css) 的 `:root` |
|
||||
| 新增图标 | 把 codepoint 加进 [`stash-web/src/iconfont.css`](stash-web/src/iconfont.css)，在 `Icon.tsx` 包一个组件 |
|
||||
| 新增分类 | [`stash-web/src/data/catalog.ts`](stash-web/src/data/catalog.ts) 加一条 `Category`，首页与明细页自动适配 |
|
||||
| 新增卡片类型 | 在 `data/types.ts` 增加 kind，`HomeView` / `DetailView` 各加一个分支 |
|
||||
| 调整分区样式 | [`stash-web/src/App.css`](stash-web/src/App.css) 的「分区卡片」段落 |
|
||||
| 换背景图 | 替换 `stash-web/src/assets/site-bg.jpg` |
|
||||
|
||||
---
|
||||
|
||||
## 9. 变更记录
|
||||
|
||||
- 2026-10-22：按本规范完成整体换肤（配色、字体、图标、背景、应用条目、返回顶部），
|
||||
并将侧栏导航箭头改为与主题一致的 CSS 箭头。
|
||||
@@ -1,151 +1,112 @@
|
||||
# Stash
|
||||
|
||||
Stash 是一个基于 Rust、Tokio 和 Axum 实现的本地静态页面托管工具。它既可以直接托管一个静态站点，也可以扫描托管目录下的多个前端项目，并通过内置导航页统一访问。
|
||||
Stash 是一个用 Rust 编写的本地静态页面托管工具。编译后的 React 控制台会被内嵌进二进制，
|
||||
所以发布物只有一个 `stash` 可执行文件，不需要额外部署前端静态资源。
|
||||
|
||||
## 核心功能
|
||||
|
||||
### 单站点托管
|
||||
|
||||
当托管根目录中存在 `index.html` 时，访问 `/` 会直接返回该页面。页面依赖的 JavaScript、CSS、图片、字体等资源继续通过静态文件服务加载，因此可以直接运行常见的纯静态前端项目。
|
||||
|
||||
### 多项目导航
|
||||
|
||||
当根目录没有 `index.html` 时，Stash 会扫描根目录下的一级子目录，并将包含 `index.html` 或 `index.htm` 的目录识别为前端项目。
|
||||
|
||||
- 自动排除以 `.` 开头的隐藏目录。
|
||||
- 项目按名称进行不区分大小写的升序排列。
|
||||
- 每个项目生成一个卡片链接，地址格式为 `/<项目目录名>/`。
|
||||
- 项目名称首字符会作为圆形标记显示。
|
||||
- 没有识别到项目时显示空状态提示。
|
||||
- 导航页采用 4 列、2 列、1 列的响应式布局，分别适配桌面、平板和手机。
|
||||
- 项目和目录列表在每次请求时重新扫描，新增项目通常无需重启服务。
|
||||
- 文件监听会在项目快照发生变化后主动通知已打开的导航页，无需手动刷新。
|
||||
|
||||
### 静态文件服务
|
||||
|
||||
Stash 使用 `tower-http` 的 `ServeDir` 托管根目录内容：
|
||||
|
||||
- 自动为目录追加 `index.html`。
|
||||
- 根据文件扩展名返回对应的 MIME 类型。
|
||||
- 未找到的路径会返回内置的中文 404 页面，并显示请求路径。
|
||||
- 每次 HTTP 请求都会经过 Trace 层，可通过调整日志级别观察请求日志。
|
||||
- 内置控制台资源通过保留路径 `/__stash__/` 提供，避免与用户托管的项目文件冲突。
|
||||
|
||||
### 内置控制台
|
||||
|
||||
- 使用 Askama 在编译期渲染项目导航页和 404 页面。
|
||||
- 页面 HTML、CSS 和 JavaScript 分别维护，不再使用字符串替换拼接卡片。
|
||||
- 项目名称和请求路径由模板引擎自动进行 HTML 转义。
|
||||
- 项目目录名会进行 URL 路径段编码，再生成项目访问地址。
|
||||
- 少量 JavaScript 通过 SSE 订阅项目变化，并在不刷新整个页面的情况下更新卡片；脚本不可用时，服务端渲染的导航和手动 API 仍可正常使用。
|
||||
|
||||
### 同源 API
|
||||
|
||||
服务提供两个只读 JSON 接口和一个 SSE 推送接口，可供导航页或同源前端调用。
|
||||
|
||||
### CORS
|
||||
|
||||
默认允许任意来源、任意请求方法和任意请求头访问服务，适合本地联调。通过 `--no-cors` 可以关闭 CORS 标头注入。
|
||||
|
||||
### 服务管理
|
||||
|
||||
- 默认监听 `127.0.0.1:8080`。
|
||||
- 支持自定义绑定地址、端口和托管目录。
|
||||
- 默认托管目录 `./public` 不存在时会自动创建。
|
||||
- 用户显式指定的托管目录不存在时，会输出错误并退出。
|
||||
- 端口绑定失败、目录无效等错误会以清晰的错误信息返回。
|
||||
- 支持分别通过 `Ctrl+C` 以及 Unix 系统的 `SIGTERM` 触发优雅停机。
|
||||
|
||||
### 可复用核心库
|
||||
|
||||
`stash-core` 同时作为库导出 `Config`、`StashError`、`start`、`ServerHandle`、`scan_projects` 和 `AppProject`，既可由 `stash-cli` 使用，也可以被其他 Rust 程序嵌入或复用。
|
||||
它能做两件事：托管目录下的多个静态前端项目、给控制台提供同源 JSON / SSE 接口。
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 环境要求
|
||||
```bash
|
||||
# 1. 先构建前端（dist 会被内嵌，缺了它 cargo build 会直接失败）
|
||||
cd stash-web
|
||||
npm install
|
||||
npm run build
|
||||
cd ..
|
||||
|
||||
- Rust 工具链，需支持 Rust 2024 Edition。
|
||||
- Cargo。
|
||||
# 2. 编译并运行
|
||||
cargo run # 托管 ./public，监听 127.0.0.1:8080
|
||||
|
||||
### 启动示例
|
||||
# 自定义目录 / 端口 / 对外暴露
|
||||
cargo run -- --root ./sites --port 3000
|
||||
cargo run -- --root ./sites --host 0.0.0.0 --port 3000
|
||||
```
|
||||
|
||||
启动后打开终端里打印的地址即可，例如 `http://127.0.0.1:8080/`。
|
||||
默认托管目录 `./public` 不存在时会自动创建。
|
||||
|
||||
环境要求：
|
||||
|
||||
- Rust 工具链（2024 Edition）
|
||||
- Node.js 24，推荐用 [Volta](https://volta.sh/) 管理；`stash-web/package.json` 里已用 `volta` 字段固定版本
|
||||
|
||||
## 工作方式
|
||||
|
||||
请求按下面的顺序命中：
|
||||
|
||||
| 路径 | 处理方式 |
|
||||
| --- | --- |
|
||||
| `/api/*` | JSON / SSE 接口 |
|
||||
| `/`、`/index.html` | 内嵌前端的 `index.html`（`no-cache`） |
|
||||
| `/assets/**` | 内嵌前端的静态资源（文件名带 hash，长缓存） |
|
||||
| `/favicon.svg` | 内嵌前端根目录文件 |
|
||||
| 其他路径 | `ServeDir` 托管 `--root` 目录，目录自动补 `index.html` |
|
||||
| 仍未命中 | 内置 404 页面（显示请求路径） |
|
||||
|
||||
托管目录下的每个一级子目录，只要包含 `index.html` 或 `index.htm`，就会被识别为一个项目，
|
||||
通过 `/<目录名>/` 访问。目录名会做 URL 路径段编码。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```text
|
||||
.
|
||||
├── Cargo.toml # 单 crate（lib + bin），依赖清单
|
||||
├── Cargo.lock
|
||||
├── build.rs # 把 stash-web/dist 同步到 $OUT_DIR/web
|
||||
├── src/ # Rust 后端
|
||||
│ ├── main.rs # CLI 参数、启动横幅、停机信号
|
||||
│ ├── lib.rs # 库导出
|
||||
│ ├── config.rs # 服务配置
|
||||
│ ├── error.rs # 错误类型与 JSON 错误响应
|
||||
│ ├── server.rs # 路由、内嵌静态资源、SSE、生命周期
|
||||
│ ├── listing.rs # 托管目录扫描
|
||||
│ └── watcher.rs # 文件监听、防抖、快照广播
|
||||
├── stash-web/ # React + Vite + TypeScript 控制台
|
||||
│ ├── package.json # 含 volta 版本固定
|
||||
│ ├── vite.config.ts # 开发期 /api 代理到 127.0.0.1:8080
|
||||
│ └── src/
|
||||
└── public/ # 默认托管目录（可放多个前端项目）
|
||||
```
|
||||
|
||||
`templates/` 与 `assets/` 是上一版 Askama 控制台留下的文件，当前已无任何代码引用，
|
||||
可以直接删除。
|
||||
|
||||
## 前端怎么被内嵌
|
||||
|
||||
1. `npm run build` 产出 `stash-web/dist`；
|
||||
2. `build.rs` 在编译 Rust 之前把 `dist` 复制到 `$OUT_DIR/web`（先清空，避免旧 hash 文件残留）；
|
||||
3. `src/server.rs` 用 `include_dir!("$OUT_DIR/web")` 在编译期把整棵目录树嵌进二进制；
|
||||
4. 二进制运行时不再读取任何前端文件。
|
||||
|
||||
构建顺序不能颠倒：`dist` 不存在时 `build.rs` 会带着提示信息直接失败，而不是产出一个没有界面的二进制。
|
||||
|
||||
`build.rs` 声明了 `rerun-if-changed`，改动 `dist` 后重新 `cargo build` 会自动重新嵌入。
|
||||
|
||||
## 前端开发
|
||||
|
||||
```bash
|
||||
# 托管默认目录 ./public，监听 127.0.0.1:8080
|
||||
cargo run -p stash-cli
|
||||
|
||||
# 托管指定目录并修改端口
|
||||
cargo run -p stash-cli -- --root ./sites --port 3000
|
||||
|
||||
# 允许局域网设备访问
|
||||
cargo run -p stash-cli -- --root ./sites --host 0.0.0.0 --port 3000
|
||||
|
||||
# 关闭 CORS
|
||||
cargo run -p stash-cli -- --root ./sites --no-cors
|
||||
cd stash-web
|
||||
npm install
|
||||
npm run dev # http://127.0.0.1:5173，/api 自动代理到后端 8080
|
||||
npm run build # 产物输出到 stash-web/dist
|
||||
npm run lint # oxlint
|
||||
```
|
||||
|
||||
启动成功后访问终端中显示的地址即可，例如：
|
||||
|
||||
```text
|
||||
http://127.0.0.1:8080/
|
||||
```
|
||||
|
||||
### 构建发布版本
|
||||
|
||||
```bash
|
||||
cargo build --release -p stash-cli
|
||||
```
|
||||
|
||||
构建产物为 `target/release/stash`；Windows 下为 `target/release/stash.exe`。
|
||||
|
||||
## 托管目录示例
|
||||
|
||||
### 单个静态站点
|
||||
|
||||
```text
|
||||
public/
|
||||
├── index.html
|
||||
├── assets/
|
||||
│ ├── app.js
|
||||
│ └── style.css
|
||||
└── images/
|
||||
└── logo.png
|
||||
```
|
||||
|
||||
此时访问 `/` 会直接展示 `public/index.html`。
|
||||
|
||||
### 多个前端项目
|
||||
|
||||
```text
|
||||
public/
|
||||
├── admin-console/
|
||||
│ └── index.html
|
||||
├── docs/
|
||||
│ └── index.html
|
||||
└── landing-page/
|
||||
└── index.html
|
||||
```
|
||||
|
||||
由于根目录没有 `index.html`，访问 `/` 时会展示项目导航页。对应访问地址为：
|
||||
|
||||
```text
|
||||
/admin-console/
|
||||
/docs/
|
||||
/landing-page/
|
||||
```
|
||||
开发时前后端分开跑：一个终端 `cargo run`，另一个终端 `npm run dev`。
|
||||
控制台的用户资料目前是占位数据（见 `stash-web/src/profile.ts`），后端尚未提供鉴权接口。
|
||||
|
||||
## 命令行参数
|
||||
|
||||
| 参数 | 默认值 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| `-r, --root <DIR>` | `./public` | 静态页面托管根目录，支持相对路径和绝对路径 |
|
||||
| `-p, --port <PORT>` | `8080` | HTTP 服务监听端口 |
|
||||
| `--host <HOST>` | `127.0.0.1` | 监听地址；使用 `0.0.0.0` 可供局域网访问 |
|
||||
| `--no-listing` | 关闭 | 设计用于关闭根目录项目导航页 |
|
||||
| `-r, --root <DIR>` | `./public` | 静态页面托管根目录 |
|
||||
| `-p, --port <PORT>` | `8080` | 监听端口 |
|
||||
| `--host <HOST>` | `127.0.0.1` | 监听地址，`0.0.0.0` 供局域网访问 |
|
||||
| `--no-cors` | 关闭 | 关闭全局 CORS 标头注入 |
|
||||
| `-h, --help` | - | 查看命令行帮助 |
|
||||
| `-V, --version` | - | 查看程序版本 |
|
||||
| `-h, --help` | - | 帮助 |
|
||||
| `-V, --version` | - | 版本 |
|
||||
|
||||
注意：`--no-listing` 当前已由命令行解析并写入 `Config.directory_listing`，但根路径处理器尚未读取该配置。因此根目录没有 `index.html` 时，导航页目前仍会显示。
|
||||
`--no-listing` 参数目前仍能被解析，但由于控制台已改为内嵌前端，它不再影响任何行为。
|
||||
|
||||
## HTTP API
|
||||
|
||||
@@ -155,40 +116,25 @@ public/
|
||||
GET /api/health
|
||||
```
|
||||
|
||||
响应：
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "ok",
|
||||
"service": "stash"
|
||||
}
|
||||
{ "status": "ok", "service": "stash" }
|
||||
```
|
||||
|
||||
### 获取项目列表
|
||||
### 项目列表
|
||||
|
||||
```http
|
||||
GET /api/projects
|
||||
```
|
||||
|
||||
响应示例：
|
||||
|
||||
```json
|
||||
{
|
||||
"projects": [
|
||||
{
|
||||
"name": "admin-console",
|
||||
"route_path": "/admin-console/"
|
||||
},
|
||||
{
|
||||
"name": "docs",
|
||||
"route_path": "/docs/"
|
||||
}
|
||||
{ "name": "admin-console", "route_path": "/admin-console/" },
|
||||
{ "name": "docs", "route_path": "/docs/" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
该接口与导航页使用相同的项目扫描规则。即使托管根目录包含 `index.html`，接口仍会返回当前根目录下可识别的项目列表。
|
||||
|
||||
### 订阅项目变化
|
||||
|
||||
```http
|
||||
@@ -196,60 +142,29 @@ GET /api/projects/events
|
||||
Accept: text/event-stream
|
||||
```
|
||||
|
||||
连接建立后，服务会立即发送当前项目快照，随后在文件监听检测到项目列表变化时推送新快照：
|
||||
连接建立后立即推送一次当前快照，之后在项目列表变化时推送：
|
||||
|
||||
```text
|
||||
event: projects
|
||||
data: {"projects":[{"name":"docs","route_path":"/docs/"}]}
|
||||
```
|
||||
|
||||
服务端会递归监听托管目录，将短时间内的连续文件事件合并为一次扫描，并且只在项目名称或访问路径实际变化时广播。SSE 连接每 15 秒发送一次保活消息，浏览器断开后会自动重连。
|
||||
|
||||
## 项目结构
|
||||
|
||||
```text
|
||||
.
|
||||
├── Cargo.toml # Rust workspace 配置
|
||||
├── Cargo.lock # 依赖锁定文件
|
||||
├── README.md
|
||||
├── stash-cli/
|
||||
│ ├── Cargo.toml
|
||||
│ └── src/
|
||||
│ └── main.rs # CLI 参数解析、启动信息和停机信号
|
||||
└── stash-core/
|
||||
├── Cargo.toml
|
||||
├── assets/
|
||||
│ ├── dashboard.css # 控制台与 404 页面样式
|
||||
│ └── dashboard.js # 项目列表刷新增强
|
||||
├── src/
|
||||
│ ├── config.rs # 服务配置
|
||||
│ ├── error.rs # 错误类型与 HTTP 错误响应
|
||||
│ ├── lib.rs # 核心库导出
|
||||
│ ├── listing.rs # 项目扫描与页面渲染
|
||||
│ ├── server.rs # Axum 路由、SSE、静态托管与服务器生命周期
|
||||
│ └── watcher.rs # 文件监听、事件防抖和项目快照广播
|
||||
└── templates/
|
||||
├── index.html # Askama 多项目导航页模板
|
||||
└── 404.html # Askama 404 页面模板
|
||||
```
|
||||
服务端递归监听托管目录，把短时间内的连续事件合并成一次扫描，只在项目名称或访问路径真正变化时广播；
|
||||
每 15 秒发送一次保活消息，浏览器断开后自动重连。
|
||||
|
||||
## 测试
|
||||
|
||||
运行核心库测试：
|
||||
|
||||
```bash
|
||||
cargo test -p stash-core
|
||||
cargo test # 目录扫描、隐藏目录过滤、排序、路径编码、文件监听广播
|
||||
cd stash-web && npm run build # tsc -b + vite build，同时做类型检查
|
||||
```
|
||||
|
||||
当前测试覆盖项目目录扫描、隐藏目录过滤、一级目录限制、项目排序、项目路径编码、空状态渲染、项目内容 HTML 转义、404 页面渲染与路径转义，以及新增项目后的文件监听广播。
|
||||
|
||||
## 已知限制
|
||||
|
||||
- 项目扫描只检查托管根目录的一级子目录，不递归查找更深层项目。
|
||||
- 根目录存在 `index.html` 时会优先进入单站点模式，不再展示项目导航页。
|
||||
- 静态服务只为目录自动追加 `index.html`；导航扫描虽然也识别 `index.htm`，但建议项目统一使用 `index.html`。
|
||||
- 未配置 SPA History API 回退。刷新前端路由等不存在的物理路径时，会返回 404 页面。
|
||||
- SSE 仅用于服务端向浏览器推送项目快照，不提供浏览器向服务端发送命令的双向通道。
|
||||
- 文件事件会经过约 150ms 防抖后再扫描，因此项目出现在导航页中可能有短暂延迟。
|
||||
- 启动横幅中显示的接口地址为 `/api/pages`，实际实现的项目列表接口是 `/api/projects`。
|
||||
- 服务没有身份认证机制，默认仅建议绑定 `127.0.0.1`。使用 `0.0.0.0` 暴露到局域网前，应确认目录内容适合被其他设备访问。
|
||||
- 控制台是单页应用但没有客户端路由，因此没有 SPA history 回退；刷新不存在的物理路径会返回 404。
|
||||
- 内嵌资源占用了 `/assets/` 前缀，托管目录下如果存在同名目录会被遮蔽。
|
||||
- `/` 固定由控制台占用，上一版「根目录有 `index.html` 就直接当单站点展示」的行为已取消；
|
||||
托管目录里的项目统一走 `/<目录名>/`。
|
||||
- 项目扫描只检查一级子目录，不递归查找更深层项目。
|
||||
- 文件事件经过约 150ms 防抖，新项目出现在控制台可能有短暂延迟。
|
||||
- 没有身份认证，默认只建议绑定 `127.0.0.1`；使用 `0.0.0.0` 暴露到局域网前请确认目录内容适合被其他设备访问。
|
||||
|
||||
@@ -5,6 +5,12 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="color-scheme" content="light" />
|
||||
<!-- 与 Alright 主题一致的正文字体：霞鹜文楷 -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.staticfile.net/lxgw-wenkai-webfont/1.7.0/style.min.css"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<title>Stash · 本地应用工作区</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+1099
-386
File diff suppressed because it is too large
Load Diff
+205
-97
@@ -1,119 +1,178 @@
|
||||
import { useMemo, useRef, useState } from 'react'
|
||||
import { BackToTop } from './components/BackToTop'
|
||||
import { SearchBar } from './components/SearchBar'
|
||||
import { Sidebar } from './components/Sidebar'
|
||||
import { SiteCard } from './components/SiteCard'
|
||||
import { TopBar } from './components/TopBar'
|
||||
import { MOCK_SECTIONS, type CatalogCard, type CatalogSection } from './catalog'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { BackToTop } from './components/common/BackToTop'
|
||||
import { ArticleDetailView } from './components/content/ArticleDetailView'
|
||||
import { DetailView } from './components/content/DetailView'
|
||||
import { HomeView } from './components/content/HomeView'
|
||||
import { ItemDetailView } from './components/content/ItemDetailView'
|
||||
import { SiteHeader } from './components/header/SiteHeader'
|
||||
import { SearchBar } from './components/search/SearchBar'
|
||||
import { Sidebar } from './components/sidebar/Sidebar'
|
||||
import { buildCategories } from './data/catalog'
|
||||
import {
|
||||
appDetailModel,
|
||||
posterDetailModel,
|
||||
posterToRelatedItem,
|
||||
toRelatedItem,
|
||||
} from './data/detail'
|
||||
import { filterCategories } from './data/filter'
|
||||
import type { NavTarget } from './data/nav'
|
||||
import {
|
||||
findAppItem,
|
||||
findArticleItem,
|
||||
findPosterItem,
|
||||
relatedAppItems,
|
||||
relatedPosterItems,
|
||||
} from './data/types'
|
||||
import { useProjects } from './useProjects'
|
||||
import './App.css'
|
||||
|
||||
function initialOf(name: string): string {
|
||||
const [first] = Array.from(name.trim())
|
||||
return first ? first.toUpperCase() : '#'
|
||||
}
|
||||
/**
|
||||
* 当前展示的视图：
|
||||
* - home：首页分区卡片流
|
||||
* - detail：某个分类（可指定分组）的明细
|
||||
* - item：单个条目（应用或电影）的详情，returnTo 记录返回目标
|
||||
*/
|
||||
type View =
|
||||
| { type: 'home' }
|
||||
| { type: 'detail'; categoryId: string; groupId?: string }
|
||||
| { type: 'item'; categoryId: string; itemId: string; returnTo: View }
|
||||
|
||||
export default function App() {
|
||||
const { status, projects, error, live, refreshing, refresh } = useProjects()
|
||||
const [keyword, setKeyword] = useState('')
|
||||
const [view, setView] = useState<View>({ type: 'home' })
|
||||
const [scrolled, setScrolled] = useState(false)
|
||||
const searchRef = useRef<HTMLInputElement>(null)
|
||||
const scrollRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// 真实项目放最前面，占位分类跟在后面
|
||||
const sections = useMemo<CatalogSection[]>(() => {
|
||||
const localCards: CatalogCard[] = projects.map((project) => ({
|
||||
id: project.route_path,
|
||||
title: project.name,
|
||||
desc: project.route_path,
|
||||
href: project.route_path,
|
||||
initial: initialOf(project.name),
|
||||
mono: true,
|
||||
}))
|
||||
const categories = useMemo(() => buildCategories(projects), [projects])
|
||||
const visibleCategories = useMemo(
|
||||
() => filterCategories(categories, keyword),
|
||||
[categories, keyword],
|
||||
)
|
||||
|
||||
return [{ id: 'local', title: '本地服务', cards: localCards }, ...MOCK_SECTIONS]
|
||||
}, [projects])
|
||||
const detailView = view.type === 'detail' ? view : undefined
|
||||
const itemView = view.type === 'item' ? view : undefined
|
||||
|
||||
const query = keyword.trim().toLowerCase()
|
||||
const searching = query !== ''
|
||||
const detailCategory =
|
||||
detailView !== undefined
|
||||
? categories.find((category) => category.id === detailView.categoryId)
|
||||
: undefined
|
||||
|
||||
// 搜索时过滤卡片，并丢掉没有命中的分区
|
||||
const sectionsToRender = useMemo(() => {
|
||||
if (!searching) return sections
|
||||
const itemCategory =
|
||||
itemView !== undefined
|
||||
? categories.find((category) => category.id === itemView.categoryId)
|
||||
: undefined
|
||||
|
||||
return sections
|
||||
.map((section) => ({
|
||||
...section,
|
||||
cards: section.cards.filter(
|
||||
(card) =>
|
||||
card.title.toLowerCase().includes(query) ||
|
||||
card.desc.toLowerCase().includes(query),
|
||||
),
|
||||
}))
|
||||
.filter((section) => section.cards.length > 0)
|
||||
}, [sections, searching, query])
|
||||
// 应用与电影共用一个详情模型，这里按分类类型做映射
|
||||
const detailModel = useMemo(() => {
|
||||
if (itemView === undefined || itemCategory === undefined) return undefined
|
||||
|
||||
const noMatch = searching && sectionsToRender.length === 0
|
||||
if (itemCategory.kind === 'apps') {
|
||||
const item = findAppItem(itemCategory, itemView.itemId)
|
||||
return item !== undefined ? appDetailModel(item) : undefined
|
||||
}
|
||||
|
||||
if (itemCategory.kind === 'posters') {
|
||||
const poster = findPosterItem(itemCategory, itemView.itemId)
|
||||
return poster !== undefined ? posterDetailModel(poster) : undefined
|
||||
}
|
||||
|
||||
return undefined
|
||||
}, [itemView, itemCategory])
|
||||
|
||||
const relatedItems = useMemo(() => {
|
||||
if (itemView === undefined || itemCategory === undefined) return []
|
||||
|
||||
if (itemCategory.kind === 'apps') {
|
||||
return relatedAppItems(itemCategory, itemView.itemId, 4).map(toRelatedItem)
|
||||
}
|
||||
|
||||
if (itemCategory.kind === 'posters') {
|
||||
return relatedPosterItems(itemCategory, itemView.itemId, 4).map(posterToRelatedItem)
|
||||
}
|
||||
|
||||
return []
|
||||
}, [itemView, itemCategory])
|
||||
|
||||
// 切换视图时把内容区滚回顶部
|
||||
useEffect(() => {
|
||||
scrollRef.current?.scrollTo({ top: 0 })
|
||||
}, [view])
|
||||
|
||||
// 桌面端滚动作在内容容器里，窄屏滚的是窗口：
|
||||
// 两处都要驱动「已滚动」状态（顶部渐隐层 + 返回顶部按钮共用）
|
||||
useEffect(() => {
|
||||
const sync = () => {
|
||||
const inner = scrollRef.current?.scrollTop ?? 0
|
||||
const next = Math.max(inner, window.scrollY) > 4
|
||||
setScrolled((current) => (current === next ? current : next))
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', sync, { passive: true })
|
||||
return () => window.removeEventListener('scroll', sync)
|
||||
}, [])
|
||||
|
||||
const openDetail = (categoryId: string) => setView({ type: 'detail', categoryId })
|
||||
|
||||
const openItem = (categoryId: string, itemId: string, returnTo: View) =>
|
||||
setView({ type: 'item', categoryId, itemId, returnTo })
|
||||
|
||||
const navigate = (target: NavTarget) =>
|
||||
setView({ type: 'detail', categoryId: target.categoryId, groupId: target.groupId })
|
||||
|
||||
const goHome = () => setView({ type: 'home' })
|
||||
|
||||
const searching = keyword.trim() !== ''
|
||||
|
||||
/**
|
||||
* 条目详情按分类类型分流：
|
||||
* 图文走长文版式，应用 / 电影走通用的条目版式。
|
||||
*/
|
||||
function renderItemView() {
|
||||
if (itemView === undefined) return null
|
||||
if (itemCategory === undefined) {
|
||||
return <p className="section-empty">分类不存在</p>
|
||||
}
|
||||
|
||||
if (itemCategory.kind === 'articles') {
|
||||
const article = findArticleItem(itemCategory, itemView.itemId)
|
||||
if (article === undefined) {
|
||||
return <p className="section-empty">条目不存在</p>
|
||||
}
|
||||
|
||||
function renderLocalPlaceholder() {
|
||||
if (status === 'error') {
|
||||
return (
|
||||
<div className="notice notice-error" role="alert">
|
||||
<strong>连不上 Stash 服务</strong>
|
||||
<p>{error}</p>
|
||||
<p>
|
||||
请确认后端已启动（默认 <code>127.0.0.1:8080</code>），开发时 Vite 会把{' '}
|
||||
<code>/api</code> 代理到后端。
|
||||
</p>
|
||||
<button type="button" className="notice-action" onClick={refresh}>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
<ArticleDetailView
|
||||
article={article}
|
||||
categoryTitle={itemCategory.title}
|
||||
onBack={() => setView(itemView.returnTo)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="notice">
|
||||
<strong>正在读取项目列表…</strong>
|
||||
<p>首次加载会扫描一次托管目录。</p>
|
||||
</div>
|
||||
)
|
||||
if (detailModel === undefined) {
|
||||
return <p className="section-empty">条目不存在</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="notice">
|
||||
<strong>这里还没有项目</strong>
|
||||
<p>
|
||||
在托管根目录下创建子目录并放入 <code>index.html</code>，刷新后即可在这里看到它。
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function renderSection(section: CatalogSection) {
|
||||
return (
|
||||
<section className="section-group" id={section.id} key={section.id}>
|
||||
<div className="section-heading">
|
||||
<h2 className="section-title">{section.title}</h2>
|
||||
<span className="section-badge">{section.cards.length}</span>
|
||||
</div>
|
||||
|
||||
{section.cards.length > 0 ? (
|
||||
<div className="grid">
|
||||
{section.cards.map((card, index) => (
|
||||
<SiteCard key={card.id} card={card} index={index} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
renderLocalPlaceholder()
|
||||
)}
|
||||
</section>
|
||||
<ItemDetailView
|
||||
breadcrumb={`${itemCategory.title} / ${detailModel.title}`}
|
||||
model={detailModel}
|
||||
related={relatedItems}
|
||||
onBack={() => setView(itemView.returnTo)}
|
||||
onOpenItem={(itemId) => setView({ ...itemView, itemId })}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<TopBar
|
||||
projects={projects}
|
||||
{/* 主题的顶部背景图：固定 65vh，底部渐隐到页面底色 */}
|
||||
<div className="site-background" aria-hidden="true" />
|
||||
|
||||
<SiteHeader
|
||||
projectCount={projects.length}
|
||||
sampleProject={projects[0]?.name}
|
||||
live={live}
|
||||
onFocusSearch={() => searchRef.current?.focus()}
|
||||
/>
|
||||
@@ -128,25 +187,74 @@ export default function App() {
|
||||
live={live}
|
||||
refreshing={refreshing}
|
||||
onRefresh={refresh}
|
||||
activeCategoryId={detailView?.categoryId ?? itemView?.categoryId}
|
||||
activeGroupId={detailView?.groupId}
|
||||
onNavigate={navigate}
|
||||
/>
|
||||
|
||||
<main className="content">
|
||||
<div className="content-scroll" id="content-scroll">
|
||||
{/* 滚动后才淡入的顶部遮罩，避免内容在容器顶边被硬切 */}
|
||||
<div className={`content-veil${scrolled ? ' is-visible' : ''}`} aria-hidden="true" />
|
||||
|
||||
<div
|
||||
className="content-scroll"
|
||||
id="content-scroll"
|
||||
ref={scrollRef}
|
||||
onScroll={(event) => {
|
||||
const next = event.currentTarget.scrollTop > 4
|
||||
setScrolled((current) => (current === next ? current : next))
|
||||
}}
|
||||
>
|
||||
<h1 className="sr-only">Stash 本地应用工作区</h1>
|
||||
|
||||
{sectionsToRender.map(renderSection)}
|
||||
|
||||
{noMatch && (
|
||||
<div className="notice">
|
||||
<strong>没有匹配「{keyword.trim()}」的内容</strong>
|
||||
<p>换个关键字试试，或清空搜索查看全部。</p>
|
||||
{status === 'error' && (
|
||||
<div className="notice notice-error" role="alert">
|
||||
<strong>连不上 Stash 服务</strong>
|
||||
<p>{error}</p>
|
||||
<button type="button" className="notice-action" onClick={refresh}>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{detailView === undefined && itemView === undefined && (
|
||||
<>
|
||||
<HomeView
|
||||
categories={visibleCategories}
|
||||
onOpenDetail={openDetail}
|
||||
onOpenItem={(categoryId, itemId) =>
|
||||
openItem(categoryId, itemId, { type: 'home' })
|
||||
}
|
||||
/>
|
||||
|
||||
{searching && visibleCategories.length === 0 && (
|
||||
<div className="notice">
|
||||
<strong>没有匹配「{keyword.trim()}」的内容</strong>
|
||||
<p>换个关键字试试，或清空搜索查看全部。</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{detailView !== undefined && detailCategory !== undefined && (
|
||||
<DetailView
|
||||
category={detailCategory}
|
||||
groupId={detailView.groupId}
|
||||
onBack={goHome}
|
||||
onOpenItem={(itemId) => openItem(detailCategory.id, itemId, detailView)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{detailView !== undefined && detailCategory === undefined && (
|
||||
<p className="section-empty">分类不存在</p>
|
||||
)}
|
||||
|
||||
{itemView !== undefined && renderItemView()}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<BackToTop />
|
||||
<BackToTop visible={scrolled} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -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',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -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 (
|
||||
<button
|
||||
type="button"
|
||||
className="back-to-top"
|
||||
title="回到顶部"
|
||||
aria-label="回到顶部"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<line x1="5" y1="4" x2="19" y2="4" />
|
||||
<path d="M12 20V8M6 14l6-6 6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -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<string[]>([])
|
||||
const [activeId, setActiveId] = useState('common')
|
||||
|
||||
const toggle = (id: string) => {
|
||||
setOpenGroups((previous) =>
|
||||
previous.includes(id) ? previous.filter((item) => item !== id) : [...previous, id],
|
||||
)
|
||||
}
|
||||
|
||||
const isOpen = (id: string) => openGroups.includes(id)
|
||||
|
||||
return (
|
||||
<aside className="sidebar">
|
||||
<ProfileCard />
|
||||
|
||||
<ServicePanel
|
||||
projects={projects}
|
||||
live={live}
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
|
||||
<nav className="nav-card card-box" aria-label="站点分类">
|
||||
<ul className="nav-group">
|
||||
{MOCK_NAV_PRIMARY.map((link) => (
|
||||
<li className="nav-item" key={link.id}>
|
||||
<a
|
||||
className={`nav-link${activeId === link.id ? ' active' : ''}`}
|
||||
href={`#${link.id}`}
|
||||
onClick={() => setActiveId(link.id)}
|
||||
>
|
||||
<span>{link.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
|
||||
{MOCK_NAV_GROUPS.map((group) => (
|
||||
<li className={`nav-item${isOpen(group.id) ? ' open' : ''}`} key={group.id}>
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link"
|
||||
aria-expanded={isOpen(group.id)}
|
||||
onClick={() => toggle(group.id)}
|
||||
>
|
||||
<span>{group.label}</span>
|
||||
<span className="nav-arrow" aria-hidden="true">
|
||||
›
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<ul className="submenu">
|
||||
{group.links.map((link) => (
|
||||
<li key={link.id}>
|
||||
<a
|
||||
className={`nav-link${activeId === link.id ? ' active' : ''}`}
|
||||
href={`#${link.id}`}
|
||||
onClick={() => setActiveId(link.id)}
|
||||
>
|
||||
<span>{link.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import type { CatalogCard } from '../catalog'
|
||||
|
||||
type SiteCardProps = {
|
||||
card: CatalogCard
|
||||
index: number
|
||||
}
|
||||
|
||||
export function SiteCard({ card, index }: SiteCardProps) {
|
||||
return (
|
||||
<a
|
||||
className="card"
|
||||
href={card.href}
|
||||
title={card.title}
|
||||
// 轻微错峰入场，最多延迟 12 个卡片
|
||||
style={{ animationDelay: `${Math.min(index, 12) * 24}ms` }}
|
||||
>
|
||||
<span className="card-icon" aria-hidden="true">
|
||||
{card.initial}
|
||||
</span>
|
||||
<span className="card-body">
|
||||
<span className="card-title">{card.title}</span>
|
||||
<span className={`card-desc${card.mono ? ' is-mono' : ''}`}>{card.desc}</span>
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import { useMemo } from 'react'
|
||||
import type { Project } from '../api'
|
||||
import { LoginIcon, SearchIcon } from './icons'
|
||||
|
||||
type TopBarProps = {
|
||||
projects: Project[]
|
||||
live: boolean
|
||||
onFocusSearch: () => void
|
||||
}
|
||||
|
||||
type TickerItem = {
|
||||
tag: string
|
||||
text: string
|
||||
}
|
||||
|
||||
export function TopBar({ projects, live, onFocusSearch }: TopBarProps) {
|
||||
return (
|
||||
<header className="topbar">
|
||||
<div className="topbar-inner">
|
||||
<a className="brand" href="/" aria-label="Stash 首页">
|
||||
<span className="brand-mark" aria-hidden="true">
|
||||
S
|
||||
</span>
|
||||
<span className="brand-name">STASH</span>
|
||||
</a>
|
||||
|
||||
<Ticker projects={projects} live={live} />
|
||||
|
||||
<div className="top-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="icon-button"
|
||||
title="搜索（Ctrl+K）"
|
||||
aria-label="聚焦搜索框"
|
||||
onClick={onFocusSearch}
|
||||
>
|
||||
<SearchIcon />
|
||||
</button>
|
||||
{/* TODO(auth): 后端登录接口就绪后接上，目前仅作入口占位 */}
|
||||
<button type="button" className="icon-button" title="登录" aria-label="登录">
|
||||
<LoginIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
/** 顶栏跑马灯：展示连接状态、项目数量与前几个项目名。 */
|
||||
function Ticker({ projects, live }: { projects: Project[]; live: boolean }) {
|
||||
const items = useMemo(() => buildTickerItems(projects, live), [projects, live])
|
||||
|
||||
// 复制一份实现无缝循环，动画位移为 -50%
|
||||
const loop = [...items, ...items]
|
||||
|
||||
return (
|
||||
<div className="ticker" aria-hidden="true">
|
||||
<div className="ticker-track">
|
||||
{loop.map((item, index) => (
|
||||
<span className="ticker-item" key={`${item.tag}-${item.text}-${index}`}>
|
||||
<span className="ticker-tag">{item.tag}</span>
|
||||
{item.text}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function buildTickerItems(projects: Project[], live: boolean): TickerItem[] {
|
||||
const items: TickerItem[] = [
|
||||
{ tag: '状态', text: live ? '实时同步已连接' : '等待服务连接' },
|
||||
{ tag: '项目', text: `共 ${projects.length} 个本地应用` },
|
||||
]
|
||||
|
||||
if (projects.length === 0) {
|
||||
items.push({
|
||||
tag: '提示',
|
||||
text: '把静态站点放进托管目录，并保留 index.html，就会出现在这里',
|
||||
})
|
||||
return items
|
||||
}
|
||||
|
||||
for (const project of projects.slice(0, 6)) {
|
||||
items.push({ tag: '本地', text: project.name })
|
||||
}
|
||||
|
||||
return items
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { ArrowUpIcon } from './Icon'
|
||||
|
||||
/**
|
||||
* 回到顶部：复刻 Alright 主题的 .scroll-toolbar .totop-button。
|
||||
*
|
||||
* - 42px 圆形、浅灰底，固定在右侧（bottom: 50%）
|
||||
* - 默认隐藏，只有内容区滚动后才淡入，回到顶部后再淡出
|
||||
*/
|
||||
type BackToTopProps = {
|
||||
/** 内容区是否已滚动（由 App 传入） */
|
||||
visible: boolean
|
||||
}
|
||||
|
||||
export function BackToTop({ visible }: BackToTopProps) {
|
||||
const handleClick = () => {
|
||||
// 桌面端滚动的是内容容器，窄屏滚动的是窗口，两处都滚一遍
|
||||
document.getElementById('content-scroll')?.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`back-to-top${visible ? ' is-visible' : ''}`}
|
||||
title="回到顶部"
|
||||
aria-label="回到顶部"
|
||||
tabIndex={visible ? 0 : -1}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<ArrowUpIcon />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* 数量角标：贴在分区标题右上角的小红标。
|
||||
* 纯展示组件，只接收数字，宽度由内容撑开（两位数不会变形）。
|
||||
*/
|
||||
type CountBadgeProps = {
|
||||
count: number
|
||||
}
|
||||
|
||||
export function CountBadge({ count }: CountBadgeProps) {
|
||||
return <span className="count-badge">{count}</span>
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* 通用图标组件。
|
||||
*
|
||||
* 全部使用 Alright 主题的 iconfont 线性图标（见 src/iconfont.css），
|
||||
* 尺寸与颜色由使用处的 CSS 控制（font-size / color），
|
||||
* 因此同一套图标可以复用在按钮、统计条、导航等不同位置。
|
||||
*/
|
||||
|
||||
type IconProps = {
|
||||
/** 附加类名，便于局部覆盖字号或颜色 */
|
||||
className?: string
|
||||
}
|
||||
|
||||
const base = (name: string, className?: string) =>
|
||||
`iconfont icon-${name}${className !== undefined ? ` ${className}` : ''}`
|
||||
|
||||
export function SearchIcon({ className }: IconProps) {
|
||||
return <i className={base('search', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function UserIcon({ className }: IconProps) {
|
||||
return <i className={base('user', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function RefreshIcon({ className }: IconProps) {
|
||||
return <i className={base('refresh', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function LinkIcon({ className }: IconProps) {
|
||||
return <i className={base('link', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function ExternalIcon({ className }: IconProps) {
|
||||
return <i className={base('external', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function EyeIcon({ className }: IconProps) {
|
||||
return <i className={base('eye', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function ThumbUpIcon({ className }: IconProps) {
|
||||
return <i className={base('thumb-up', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function ShareIcon({ className }: IconProps) {
|
||||
return <i className={base('share', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function CloseIcon({ className }: IconProps) {
|
||||
return <i className={base('close', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function MoreIcon({ className }: IconProps) {
|
||||
return <i className={base('more', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function ArrowUpIcon({ className }: IconProps) {
|
||||
return <i className={base('arrow-up', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function ArrowLeftIcon({ className }: IconProps) {
|
||||
return <i className={base('arrow-left', className)} aria-hidden="true" />
|
||||
}
|
||||
|
||||
export function ArrowDownIcon({ className }: IconProps) {
|
||||
return <i className={base('arrow-down', className)} aria-hidden="true" />
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import type { AppItem } from '../../data/types'
|
||||
|
||||
/**
|
||||
* 应用卡片：逐项复刻 Alright 主题「推荐作者」条目的结构。
|
||||
*
|
||||
* 对应主题的：
|
||||
* .flex-avatar > img.avatar-48 + span.avatar-badge.badge_5
|
||||
* .item-content > h3.font-title.text-md（名字 + span.item-badge.hot）
|
||||
* + div.text-xs.text-muted.h-1x（单行描述）
|
||||
*
|
||||
* 热门条目才会同时出现头像角标和 HOT 徽标，普通条目两者都没有。
|
||||
*/
|
||||
type AppCardProps = {
|
||||
item: AppItem
|
||||
onOpen?: (itemId: string) => void
|
||||
}
|
||||
|
||||
export function AppCard({ item, onOpen }: AppCardProps) {
|
||||
return (
|
||||
<a
|
||||
className="app-card"
|
||||
href={item.href}
|
||||
title={item.name}
|
||||
onClick={(event) => {
|
||||
if (onOpen === undefined) return
|
||||
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
|
||||
event.preventDefault()
|
||||
onOpen(item.id)
|
||||
}}
|
||||
>
|
||||
<span className="app-card-avatar" aria-hidden="true">
|
||||
{item.cover !== undefined ? (
|
||||
<img src={item.cover} alt="" loading="lazy" />
|
||||
) : (
|
||||
<span className="app-card-letter">{item.icon}</span>
|
||||
)}
|
||||
{item.hot === true && <span className="app-card-verify" />}
|
||||
</span>
|
||||
|
||||
<span className="app-card-info">
|
||||
<span className="app-card-title">
|
||||
<span className="app-card-name">{item.name}</span>
|
||||
{item.hot === true && <span className="app-card-badge" />}
|
||||
</span>
|
||||
<span className="app-card-desc">{item.desc}</span>
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { AppItem } from '../../data/types'
|
||||
import { AppCard } from './AppCard'
|
||||
|
||||
/**
|
||||
* 应用网格：默认 4 列，窄屏退化为 2 列。
|
||||
* 首页预览与明细页共用，靠 modifier 调整间距。
|
||||
*/
|
||||
type AppGridProps = {
|
||||
items: AppItem[]
|
||||
/** 明细页使用更宽松的间距 */
|
||||
variant?: 'home' | 'detail'
|
||||
/** 点击卡片打开条目详情 */
|
||||
onOpen?: (itemId: string) => void
|
||||
}
|
||||
|
||||
export function AppGrid({ items, variant = 'home', onOpen }: AppGridProps) {
|
||||
return (
|
||||
<div className={`app-grid${variant === 'detail' ? ' app-grid--detail' : ''}`}>
|
||||
{items.map((item) => (
|
||||
<AppCard key={item.id} item={item} onOpen={onOpen} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 = (
|
||||
<>
|
||||
<img className="article-cover" src={item.cover} alt={item.title} loading="lazy" />
|
||||
<span className="article-caption">
|
||||
<span className="article-title">{item.title}</span>
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
|
||||
if (onOpen === undefined) {
|
||||
return <figure className="article-card">{content}</figure>
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="article-card"
|
||||
title={item.title}
|
||||
onClick={() => onOpen(item.id)}
|
||||
>
|
||||
{content}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import type { ArticleItem } from '../../data/types'
|
||||
import { ArrowLeftIcon } from '../common/Icon'
|
||||
|
||||
/**
|
||||
* 文章详情页（对应模板图二）：
|
||||
* 大标题 + [编辑] + 元信息行 + 白色正文卡（段落 / 小标题 / 配图混排）。
|
||||
*
|
||||
* 正文是 block 数组，后端以后可以直接把富文本结构映射过来，
|
||||
* 不用再改渲染层。
|
||||
*/
|
||||
type ArticleDetailViewProps = {
|
||||
article: ArticleItem
|
||||
categoryTitle: string
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function ArticleDetailView({ article, categoryTitle, onBack }: ArticleDetailViewProps) {
|
||||
const meta = article.meta ?? ['2 年前', categoryTitle]
|
||||
|
||||
return (
|
||||
<div className="detail-view article-view">
|
||||
<div className="detail-nav card-box">
|
||||
<button type="button" className="detail-back" onClick={onBack}>
|
||||
<ArrowLeftIcon />
|
||||
返回
|
||||
</button>
|
||||
<span className="detail-breadcrumb">{categoryTitle} / 文章</span>
|
||||
</div>
|
||||
|
||||
<header className="article-head">
|
||||
<h2 className="article-heading">
|
||||
{article.title}
|
||||
<button type="button" className="item-edit" disabled title="编辑功能待接入">
|
||||
[编辑]
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div className="article-meta">
|
||||
{meta.map((text, index) => (
|
||||
<span className="article-meta-item" key={text}>
|
||||
{index > 0 && <i className="article-meta-dot" aria-hidden="true" />}
|
||||
{text}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article className="article-body card-box">
|
||||
{(article.blocks ?? []).map((block, index) => {
|
||||
if (block.type === 'heading') {
|
||||
return (
|
||||
<h3 className="article-body-heading" key={index}>
|
||||
{block.text}
|
||||
</h3>
|
||||
)
|
||||
}
|
||||
|
||||
if (block.type === 'image') {
|
||||
return (
|
||||
<img
|
||||
className="article-body-image"
|
||||
key={index}
|
||||
src={block.src}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<p className="article-body-text" key={index}>
|
||||
{block.text}
|
||||
</p>
|
||||
)
|
||||
})}
|
||||
</article>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="article-grid">
|
||||
{items.map((item) => (
|
||||
<ArticleCard key={item.id} item={item} onOpen={onOpen} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 = (
|
||||
<>
|
||||
<img className="ces-cover" src={item.cover} alt={item.title} loading="lazy" />
|
||||
<span className="ces-body">
|
||||
<span className="ces-title">{item.title}</span>
|
||||
<span className="ces-desc">{item.desc}</span>
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
|
||||
if (onOpen === undefined) {
|
||||
return <article className="ces-card">{content}</article>
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="ces-card"
|
||||
title={item.title}
|
||||
onClick={() => onOpen(item.id)}
|
||||
>
|
||||
{content}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { ArticleItem } from '../../data/types'
|
||||
import { CesCard } from './CesCard'
|
||||
|
||||
/** 明细页图文网格：4 列白卡，窄屏 2 列 */
|
||||
type CesCardGridProps = {
|
||||
items: ArticleItem[]
|
||||
/** 点击卡片打开文章详情 */
|
||||
onOpen?: (itemId: string) => void
|
||||
}
|
||||
|
||||
export function CesCardGrid({ items, onOpen }: CesCardGridProps) {
|
||||
return (
|
||||
<div className="ces-grid">
|
||||
{items.map((item) => (
|
||||
<CesCard key={item.id} item={item} onOpen={onOpen} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 <PosterGrid items={category.items} variant="detail" onOpen={onOpenItem} />
|
||||
}
|
||||
|
||||
if (category.kind === 'articles') {
|
||||
return <CesCardGrid items={category.items} onOpen={onOpenItem} />
|
||||
}
|
||||
|
||||
if (activeGroup !== undefined) {
|
||||
return <AppGrid items={activeGroup.items} variant="detail" onOpen={onOpenItem} />
|
||||
}
|
||||
|
||||
if (category.groups.length === 1) {
|
||||
return <AppGrid items={category.groups[0].items} variant="detail" onOpen={onOpenItem} />
|
||||
}
|
||||
|
||||
if (category.groups.length === 0) {
|
||||
return <p className="section-empty">{category.emptyText ?? '暂无内容'}</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{category.groups.map((group) => (
|
||||
<GroupBlock key={group.id} group={group} onOpen={onOpenItem} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="detail-view">
|
||||
<div className="detail-nav card-box">
|
||||
<button type="button" className="detail-back" onClick={onBack}>
|
||||
<ArrowLeftIcon />
|
||||
返回首页
|
||||
</button>
|
||||
<span className="detail-breadcrumb">{breadcrumb}</span>
|
||||
</div>
|
||||
|
||||
<div className="detail-hero">
|
||||
<span className="detail-hero-icon" aria-hidden="true">
|
||||
{category.icon}
|
||||
</span>
|
||||
<h2 className="detail-hero-title">{title}</h2>
|
||||
<span className="detail-hero-count">[{count}]</span>
|
||||
</div>
|
||||
|
||||
{renderBody()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<section className="group-block">
|
||||
<h3 className="group-title">{group.name}</h3>
|
||||
<AppGrid items={group.items} variant="detail" onOpen={onOpen} />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { categoryCount, flattenAppItems, type Category } from '../../data/types'
|
||||
import { AppGrid } from './AppGrid'
|
||||
import { ArticleGrid } from './ArticleGrid'
|
||||
import { PosterGrid } from './PosterGrid'
|
||||
import { SectionCard } from './SectionCard'
|
||||
|
||||
/**
|
||||
* 首页：把每个分类渲染成一张分区卡片。
|
||||
*
|
||||
* 每个分区只展示前若干条（由分类的 previewLimit 决定），
|
||||
* 右上角 ••• 进入该分类明细，点击卡片 / 海报则进入该条目的详情。
|
||||
*/
|
||||
type HomeViewProps = {
|
||||
categories: Category[]
|
||||
onOpenDetail: (categoryId: string) => void
|
||||
onOpenItem: (categoryId: string, itemId: string) => void
|
||||
}
|
||||
|
||||
export function HomeView({ categories, onOpenDetail, onOpenItem }: HomeViewProps) {
|
||||
return (
|
||||
<div className="home-view">
|
||||
{categories.map((category) => (
|
||||
<SectionCard
|
||||
key={category.id}
|
||||
title={category.title}
|
||||
count={categoryCount(category)}
|
||||
barColor={category.barColor}
|
||||
onMore={() => onOpenDetail(category.id)}
|
||||
>
|
||||
{renderPreview(category, onOpenItem)}
|
||||
</SectionCard>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 按分类类型输出对应的预览网格；应用类为空时给出提示文案 */
|
||||
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 <p className="section-empty">{category.emptyText ?? '暂无内容'}</p>
|
||||
}
|
||||
|
||||
return <AppGrid items={items} onOpen={(itemId) => onOpenItem(category.id, itemId)} />
|
||||
}
|
||||
|
||||
if (category.kind === 'posters') {
|
||||
return (
|
||||
<PosterGrid
|
||||
items={category.items.slice(0, category.previewLimit ?? 6)}
|
||||
onOpen={(itemId) => onOpenItem(category.id, itemId)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ArticleGrid
|
||||
items={category.items.slice(0, category.previewLimit ?? 4)}
|
||||
onOpen={(itemId) => onOpenItem(category.id, itemId)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import type { ItemDetailModel } from '../../data/detail'
|
||||
import type { RelatedItem } from '../../data/types'
|
||||
import { ExternalIcon, EyeIcon, ShareIcon, ThumbUpIcon } from '../common/Icon'
|
||||
import { ArrowLeftIcon } from '../common/Icon'
|
||||
import { RelatedList } from './RelatedList'
|
||||
|
||||
/**
|
||||
* 条目详情页：应用与电影共用。
|
||||
*
|
||||
* 版式：标题 + 主图（方形头像 / 竖版海报）+ 标签行 + 一句话评价 + 正文
|
||||
* + 操作条（浏览 / 点赞 / 分享 / 跳转）+ 可选横幅 + 「推荐阅读」。
|
||||
* 具体形态由 ItemDetailModel 决定，这里不判断条目类型。
|
||||
*/
|
||||
type ItemDetailViewProps = {
|
||||
breadcrumb: string
|
||||
model: ItemDetailModel
|
||||
related: RelatedItem[]
|
||||
onBack: () => void
|
||||
onOpenItem: (itemId: string) => void
|
||||
}
|
||||
|
||||
export function ItemDetailView({
|
||||
breadcrumb,
|
||||
model,
|
||||
related,
|
||||
onBack,
|
||||
onOpenItem,
|
||||
}: ItemDetailViewProps) {
|
||||
return (
|
||||
<div className="detail-view item-view">
|
||||
<div className="detail-nav card-box">
|
||||
<button type="button" className="detail-back" onClick={onBack}>
|
||||
<ArrowLeftIcon />
|
||||
返回
|
||||
</button>
|
||||
<span className="detail-breadcrumb">{breadcrumb}</span>
|
||||
</div>
|
||||
|
||||
<article className="item-card card-box">
|
||||
<h2 className="item-title">
|
||||
{model.title}
|
||||
<button type="button" className="item-edit" disabled title="编辑功能待接入">
|
||||
[编辑]
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div className={`item-cover item-cover--${model.shape}`}>
|
||||
{model.cover !== undefined ? (
|
||||
<img src={model.cover} alt={model.title} loading="lazy" />
|
||||
) : (
|
||||
<span className="item-cover-letter">{model.fallbackIcon ?? '•'}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{model.tags.length > 0 && (
|
||||
<div className="item-tags">
|
||||
{model.tags.map((tag) => (
|
||||
<span className="item-tag" key={tag}>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{model.comment !== undefined && (
|
||||
<div className="item-quote">
|
||||
<span className="item-quote-mark" aria-hidden="true">
|
||||
“
|
||||
</span>
|
||||
<p className="item-quote-text">{model.comment}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{model.paragraphs.map((paragraph, index) => (
|
||||
<p className="item-desc" key={`${index}-${paragraph.slice(0, 8)}`}>
|
||||
{paragraph}
|
||||
</p>
|
||||
))}
|
||||
|
||||
<div className="item-actions">
|
||||
<span className="item-stat" title="浏览量">
|
||||
<EyeIcon />
|
||||
<em>{model.views}</em>
|
||||
</span>
|
||||
|
||||
<span className="item-stat" title="点赞数">
|
||||
<ThumbUpIcon />
|
||||
<em>{model.likes}</em>
|
||||
</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="item-stat item-stat--icon"
|
||||
title="分享（待接入）"
|
||||
aria-label="分享"
|
||||
>
|
||||
<ShareIcon />
|
||||
</button>
|
||||
|
||||
{/* 占位数据没有真实地址时，按钮置灰而不是打开空白页 */}
|
||||
{model.href === '#' ? (
|
||||
<button type="button" className="item-jump" disabled title="暂无跳转地址">
|
||||
跳转到
|
||||
<ExternalIcon />
|
||||
</button>
|
||||
) : (
|
||||
<a className="item-jump" href={model.href} target="_blank" rel="noreferrer">
|
||||
跳转到
|
||||
<ExternalIcon />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{model.banner !== undefined && (
|
||||
<img className="item-banner" src={model.banner} alt="" loading="lazy" />
|
||||
)}
|
||||
</article>
|
||||
|
||||
<RelatedList items={related} onOpen={onOpenItem} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 = (
|
||||
<>
|
||||
<img className="poster-cover" src={item.cover} alt={item.title} loading="lazy" />
|
||||
<span className="poster-caption">
|
||||
<span className="poster-title">{item.title}</span>
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
|
||||
if (onOpen === undefined) {
|
||||
return <figure className="poster-card">{content}</figure>
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="poster-card"
|
||||
title={item.title}
|
||||
onClick={() => onOpen(item.id)}
|
||||
>
|
||||
{content}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { PosterItem } from '../../data/types'
|
||||
import { PosterCard } from './PosterCard'
|
||||
|
||||
/** 海报网格：首页 6 列，明细页同样 6 列但间距更大 */
|
||||
type PosterGridProps = {
|
||||
items: PosterItem[]
|
||||
variant?: 'home' | 'detail'
|
||||
/** 点击海报打开条目详情 */
|
||||
onOpen?: (itemId: string) => void
|
||||
}
|
||||
|
||||
export function PosterGrid({ items, variant = 'home', onOpen }: PosterGridProps) {
|
||||
return (
|
||||
<div className={`poster-grid${variant === 'detail' ? ' poster-grid--detail' : ''}`}>
|
||||
{items.map((item) => (
|
||||
<PosterCard key={item.id} item={item} onOpen={onOpen} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<section className="related-card card-box" aria-label="推荐阅读">
|
||||
<h3 className="related-title">
|
||||
<span className="related-title-icon" aria-hidden="true">
|
||||
📚
|
||||
</span>
|
||||
推荐阅读
|
||||
</h3>
|
||||
|
||||
<ul className="related-grid">
|
||||
{items.map((item) => (
|
||||
<li key={item.id}>
|
||||
<button type="button" className="related-item" onClick={() => onOpen(item.id)}>
|
||||
<span className="related-avatar" aria-hidden="true">
|
||||
{item.cover !== undefined ? (
|
||||
<img src={item.cover} alt="" loading="lazy" />
|
||||
) : (
|
||||
(item.icon ?? '•')
|
||||
)}
|
||||
</span>
|
||||
<span className="related-info">
|
||||
<span className="related-name">{item.name}</span>
|
||||
<span className="related-desc">{item.desc}</span>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import { CountBadge } from '../common/CountBadge'
|
||||
import { MoreIcon } from '../common/Icon'
|
||||
|
||||
/**
|
||||
* 首页分区卡片：白底圆角容器，组成「色条 + 标题 + 角标 + 更多按钮 + 内容」。
|
||||
* 内容由调用方传入，因此同一容器可以承载应用网格、海报网格或图文网格。
|
||||
*/
|
||||
type SectionCardProps = {
|
||||
title: string
|
||||
count: number
|
||||
/** 标题左侧色条颜色，不同分类用不同颜色区分 */
|
||||
barColor?: string
|
||||
/** 点击右上角 ••• 进入该分类的明细视图 */
|
||||
onMore?: () => void
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function SectionCard({ title, count, barColor, onMore, children }: SectionCardProps) {
|
||||
return (
|
||||
<section className="section-card">
|
||||
<header className="section-header">
|
||||
<div className="section-title-wrapper">
|
||||
<span className="section-bar" style={{ backgroundColor: barColor }} aria-hidden="true" />
|
||||
<span className="section-title-box">
|
||||
<h2 className="section-title">{title}</h2>
|
||||
<CountBadge count={count} />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{onMore !== undefined && (
|
||||
<button
|
||||
type="button"
|
||||
className="section-more"
|
||||
title={`查看${title}全部`}
|
||||
aria-label={`查看${title}全部`}
|
||||
onClick={onMore}
|
||||
>
|
||||
<MoreIcon />
|
||||
</button>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
/**
|
||||
* 顶栏中间的一条信息，形如「[标签] 文本」。
|
||||
* 标签带浅色底，用于区分「本地 / 状态」这类类型前缀。
|
||||
*/
|
||||
type HeaderInfoItemProps = {
|
||||
/** 可选的前缀标签 */
|
||||
tag?: string
|
||||
/** 标签配色：默认蓝色，状态类用绿色 */
|
||||
tone?: 'blue' | 'green'
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function HeaderInfoItem({ tag, tone = 'blue', children }: HeaderInfoItemProps) {
|
||||
return (
|
||||
<div className="header-info-item">
|
||||
{tag !== undefined && (
|
||||
<span className={`header-info-tag${tone === 'green' ? ' is-green' : ''}`}>{tag}</span>
|
||||
)}
|
||||
<span className="header-info-text">{children}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<header className="site-header">
|
||||
<div className="layout-container site-header-inner">
|
||||
<a className="site-brand" href="/" aria-label="Stash 首页">
|
||||
<span className="site-brand-mark" aria-hidden="true">
|
||||
S
|
||||
</span>
|
||||
<span className="site-brand-name">STASH</span>
|
||||
</a>
|
||||
|
||||
<div className="header-info">
|
||||
<HeaderInfoItem>共 {projectCount} 个本地应用</HeaderInfoItem>
|
||||
|
||||
{sampleProject !== undefined && (
|
||||
<HeaderInfoItem tag="本地">{sampleProject}</HeaderInfoItem>
|
||||
)}
|
||||
|
||||
<HeaderInfoItem tag="状态" tone={live ? 'green' : 'blue'}>
|
||||
{live ? '实时同步已连接' : '等待服务连接'}
|
||||
</HeaderInfoItem>
|
||||
</div>
|
||||
|
||||
<div className="header-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="header-icon-button"
|
||||
title="搜索（Ctrl+K）"
|
||||
aria-label="聚焦搜索框"
|
||||
onClick={onFocusSearch}
|
||||
>
|
||||
<SearchIcon />
|
||||
</button>
|
||||
{/* TODO(auth): 后端登录接口就绪后接上，目前仅作入口占位 */}
|
||||
<button type="button" className="header-icon-button" title="登录" aria-label="登录">
|
||||
<UserIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
/** 统一的小图标集合：只负责路径，尺寸与颜色由使用处的 CSS 决定。 */
|
||||
|
||||
export function RefreshIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 12a9 9 0 1 1-2.64-6.36" />
|
||||
<path d="M21 3v6h-6" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function SearchIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function LinkIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5" />
|
||||
<path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function LoginIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="8" r="3.6" />
|
||||
<path d="M4.8 20a7.2 7.2 0 0 1 14.4 0" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
+7
-7
@@ -1,5 +1,10 @@
|
||||
import { useEffect, type RefObject } from 'react'
|
||||
import { CloseIcon, SearchIcon } from '../common/Icon'
|
||||
|
||||
/**
|
||||
* 全局搜索框：固定悬浮在顶栏下方居中。
|
||||
* 支持 Ctrl/Cmd+K 聚焦、Esc 清空，输入内容由父组件接管过滤逻辑。
|
||||
*/
|
||||
type SearchBarProps = {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
@@ -22,10 +27,7 @@ export function SearchBar({ value, onChange, inputRef }: SearchBarProps) {
|
||||
|
||||
return (
|
||||
<div className="search-bar card-box">
|
||||
<svg className="search-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
</svg>
|
||||
<SearchIcon className="search-icon" />
|
||||
|
||||
<input
|
||||
ref={inputRef}
|
||||
@@ -48,9 +50,7 @@ export function SearchBar({ value, onChange, inputRef }: SearchBarProps) {
|
||||
aria-label="清空搜索"
|
||||
onClick={() => onChange('')}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M18 6 6 18M6 6l12 12" />
|
||||
</svg>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -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<string[]>([])
|
||||
|
||||
const toggle = (id: string) => {
|
||||
setOpenGroups((previous) =>
|
||||
previous.includes(id) ? previous.filter((item) => item !== id) : [...previous, id],
|
||||
)
|
||||
}
|
||||
|
||||
const isOpen = (id: string) => openGroups.includes(id)
|
||||
|
||||
return (
|
||||
<nav className="nav-card card-box" aria-label="站点分类">
|
||||
<ul className="nav-group">
|
||||
{NAV_TOP_LEVEL.map((leaf) => (
|
||||
<li className="nav-item" key={leaf.id}>
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link${
|
||||
activeCategoryId === leaf.target.categoryId && activeGroupId === undefined
|
||||
? ' active'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() => onNavigate(leaf.target)}
|
||||
>
|
||||
<span>{leaf.label}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
|
||||
{NAV_GROUPS.map((group) => (
|
||||
<li className={`nav-item${isOpen(group.id) ? ' open' : ''}`} key={group.id}>
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link has-children"
|
||||
aria-expanded={isOpen(group.id)}
|
||||
onClick={() => toggle(group.id)}
|
||||
>
|
||||
<span>{group.label}</span>
|
||||
</button>
|
||||
|
||||
{/* 用 grid-template-rows 做高度动画：不需要猜 max-height，
|
||||
也不会在过渡期间出现滚动条 */}
|
||||
<div className={`submenu-wrap${isOpen(group.id) ? ' is-open' : ''}`}>
|
||||
<ul className="submenu">
|
||||
{group.leaves.map((leaf) => (
|
||||
<li key={leaf.id}>
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link${activeGroupId === leaf.target.groupId ? ' active' : ''}`}
|
||||
onClick={() => onNavigate(leaf.target)}
|
||||
>
|
||||
<span>{leaf.label}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
+7
-6
@@ -1,16 +1,17 @@
|
||||
import { PLACEHOLDER_PROFILE } from '../profile'
|
||||
import { PLACEHOLDER_PROFILE } from '../../profile'
|
||||
import { UserIcon } from '../common/Icon'
|
||||
|
||||
/** 登录后展示的用户资料卡（数据为占位，见 profile.ts）。 */
|
||||
/**
|
||||
* 用户资料卡：头像、认证徽标、昵称、角色、简介、IP 属地。
|
||||
* 数据来自 profile.ts 的占位对象，后端接入鉴权后替换。
|
||||
*/
|
||||
export function ProfileCard() {
|
||||
const { name, role, bio, location } = PLACEHOLDER_PROFILE
|
||||
|
||||
return (
|
||||
<section className="profile-card card-box" aria-label="用户信息">
|
||||
<div className="profile-avatar" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="9" r="3.4" />
|
||||
<path d="M5.6 19.4a6.6 6.6 0 0 1 12.8 0" />
|
||||
</svg>
|
||||
<UserIcon />
|
||||
<span className="profile-badge">✓</span>
|
||||
</div>
|
||||
|
||||
+6
-6
@@ -1,6 +1,10 @@
|
||||
import type { Project } from '../api'
|
||||
import { LinkIcon, RefreshIcon } from './icons'
|
||||
import type { Project } from '../../api'
|
||||
import { LinkIcon, RefreshIcon } from '../common/Icon'
|
||||
|
||||
/**
|
||||
* 本地服务面板：连接状态、项目数、访问地址，以及两个操作入口。
|
||||
* 只读展示 + 触发刷新，不负责导航。
|
||||
*/
|
||||
type ServicePanelProps = {
|
||||
projects: Project[]
|
||||
live: boolean
|
||||
@@ -8,10 +12,6 @@ type ServicePanelProps = {
|
||||
onRefresh: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 本地服务面板：状态概览 + 操作入口。
|
||||
* 项目列表本身在右侧内容区以卡片呈现，这里不再展开。
|
||||
*/
|
||||
export function ServicePanel({ projects, live, refreshing, onRefresh }: ServicePanelProps) {
|
||||
const host = typeof window === 'undefined' ? '-' : window.location.host
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import type { Project } from '../../api'
|
||||
import type { NavTarget } from '../../data/nav'
|
||||
import { CategoryNav } from './CategoryNav'
|
||||
import { ProfileCard } from './ProfileCard'
|
||||
import { ServicePanel } from './ServicePanel'
|
||||
|
||||
/**
|
||||
* 左侧栏容器：用户资料 + 本地服务面板 + 分类导航。
|
||||
* 只负责布局与数据透传，具体内容由三个子组件分别渲染。
|
||||
*/
|
||||
type SidebarProps = {
|
||||
projects: Project[]
|
||||
live: boolean
|
||||
refreshing: boolean
|
||||
onRefresh: () => void
|
||||
activeCategoryId?: string
|
||||
activeGroupId?: string
|
||||
onNavigate: (target: NavTarget) => void
|
||||
}
|
||||
|
||||
export function Sidebar({
|
||||
projects,
|
||||
live,
|
||||
refreshing,
|
||||
onRefresh,
|
||||
activeCategoryId,
|
||||
activeGroupId,
|
||||
onNavigate,
|
||||
}: SidebarProps) {
|
||||
return (
|
||||
<aside className="sidebar">
|
||||
<ProfileCard />
|
||||
|
||||
<ServicePanel
|
||||
projects={projects}
|
||||
live={live}
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
|
||||
<CategoryNav
|
||||
activeCategoryId={activeCategoryId}
|
||||
activeGroupId={activeGroupId}
|
||||
onNavigate={onNavigate}
|
||||
/>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
import type {
|
||||
AppCategory,
|
||||
AppGroup,
|
||||
AppItem,
|
||||
ArticleBlock,
|
||||
ArticleCategory,
|
||||
Category,
|
||||
PosterCategory,
|
||||
} from './types'
|
||||
|
||||
/**
|
||||
* 占位内容：沿用 index4.html 模板里的示例数据。
|
||||
*
|
||||
* 除「本地服务」由后端项目列表动态生成外，其余分类都是静态占位，
|
||||
* 等后端提供分类 / 收藏接口后再替换。
|
||||
*/
|
||||
|
||||
/**
|
||||
* 详情页占位统计：按 id 生成稳定的数值，
|
||||
* 保证同一站点每次打开看到的是同一组数字，而不是随机跳变。
|
||||
*/
|
||||
function stat(seed: string, min: number, max: number): number {
|
||||
let hash = 0
|
||||
for (const char of seed) {
|
||||
hash = (hash * 31 + char.charCodeAt(0)) % 100_000
|
||||
}
|
||||
return min + (hash % (max - min + 1))
|
||||
}
|
||||
|
||||
/** 只有少数条目带 HOT 徽标 —— 主题里也不是每个作者都带 */
|
||||
const HOT_IDS = new Set(['github', 'bilibili', 'wallhaven'])
|
||||
|
||||
/** 生成一条占位站点，详情页需要的头像 / 横幅 / 评价也一并补齐 */
|
||||
const app = (id: string, name: string, desc: string, icon: string, href = '#'): AppItem => ({
|
||||
id,
|
||||
name,
|
||||
desc,
|
||||
icon,
|
||||
href,
|
||||
cover: `https://picsum.photos/seed/${id}/200/200`,
|
||||
banner: `https://picsum.photos/seed/${id}-banner/800/300`,
|
||||
comment: '收录在本地导航里的常用站点，点开就能直达。',
|
||||
badge: '推荐好站',
|
||||
hot: HOT_IDS.has(id),
|
||||
views: stat(id, 60, 980),
|
||||
likes: stat(`${id}-like`, 3, 88),
|
||||
})
|
||||
|
||||
/** 常用推荐：第一个分组是首页预览展示的四项 */
|
||||
const RECOMMEND_GROUPS: AppGroup[] = [
|
||||
{
|
||||
id: 'common',
|
||||
name: '常用站点',
|
||||
items: [
|
||||
app('github', 'GitHub', '代码托管与开源社区', 'G'),
|
||||
app('zhihu', '知乎', '深度内容问答社区', 'Z'),
|
||||
app('bilibili', '哔哩哔哩', '弹幕视频分享网站', 'B'),
|
||||
app('v2ex', 'V2EX', '创意工作者讨论社区', 'V'),
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'ui',
|
||||
name: 'UI 设计资源',
|
||||
items: [
|
||||
app('wallhaven', 'Wallhaven', 'WallBase 创办人失踪后推出的精选壁纸站', 'W'),
|
||||
app('500px', '500px', '有着世界上最好的照片分享社区', '5'),
|
||||
app('chuangyiren', '创意人', '去掉了形式主义描述的原创社区', 'C'),
|
||||
app('topys', '顶尖文案', '全球顶尖创意分享平台 OPEN YOUR EYES', 'T'),
|
||||
app('uichina', 'UI中国', '前身为 iconfans，国内专业的 UI 设计平台', 'U'),
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'vector',
|
||||
name: '矢量图标',
|
||||
items: [
|
||||
app('iconfont', 'Iconfont', '阿里妈妈矢量图标库', 'I'),
|
||||
app('feather', 'Feather Icons', '简单漂亮的开源图标库', 'F'),
|
||||
app('fontawesome', 'FontAwesome', '图标字体与 CSS 框架', 'A'),
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'wallpaper',
|
||||
name: '免费壁纸',
|
||||
items: [
|
||||
app('unsplash', 'Unsplash', '免费高清无版权摄影图片', 'U'),
|
||||
app('pexels', 'Pexels', '才华横溢的摄影师分享的素材', 'P'),
|
||||
app('pixabay', 'Pixabay', '超过 2.7 百万张优质图片和视频', 'X'),
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'dev',
|
||||
name: '开发工具',
|
||||
items: [
|
||||
app('codepen', 'CodePen', '前端在线代码演示和练习场', 'C'),
|
||||
app('stackoverflow', 'Stack Overflow', '全球程序员技术问答社区', 'S'),
|
||||
app('github-dev', 'GitHub', '代码托管与开源协作社区', 'G'),
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const RECOMMEND: AppCategory = {
|
||||
id: 'recommend',
|
||||
kind: 'apps',
|
||||
title: '常用推荐',
|
||||
barColor: '#3858f6',
|
||||
icon: '🔖',
|
||||
groups: RECOMMEND_GROUPS,
|
||||
}
|
||||
|
||||
/** 电影占位数据：标题 + 一句简介，简介同时用作详情页正文 */
|
||||
const MOVIE_SEEDS: [string, string][] = [
|
||||
[
|
||||
'千与千寻 千と千尋の神隠し (2001)',
|
||||
'少女千寻误入神灵世界，为救回变成猪的父母，在汤屋打工并逐渐学会担当。',
|
||||
],
|
||||
[
|
||||
'美丽人生 La vita è bella (1997)',
|
||||
'二战集中营里，父亲用一场「游戏」保护儿子，让他相信世界仍然美好。',
|
||||
],
|
||||
[
|
||||
'这个杀手不太冷 Léon (1994)',
|
||||
'孤独的职业杀手莱昂收留了邻居少女玛蒂尔达，两个边缘人相互依靠。',
|
||||
],
|
||||
[
|
||||
'阿甘正传 Forrest Gump (1994)',
|
||||
'智商不高的阿甘凭着一股单纯的执着，意外见证并参与了几十年美国历史。',
|
||||
],
|
||||
['霸王别姬 (1993)', '两位京剧伶人半个世纪的悲欢离合，与时代洪流交织在一起。'],
|
||||
[
|
||||
'肖申克的救赎 The Shawshank Redemption',
|
||||
'蒙冤入狱的银行家安迪，在漫长牢狱中守住希望并完成自救。',
|
||||
],
|
||||
[
|
||||
'泰坦尼克号 Titanic (1997)',
|
||||
'沉船之夜，来自不同阶层的杰克与露丝相爱，也被人性的选择所考验。',
|
||||
],
|
||||
['盗梦空间 Inception (2010)', '盗梦团队潜入层层梦境，试图在目标的潜意识里植入一个念头。'],
|
||||
[
|
||||
'星际穿越 Interstellar (2014)',
|
||||
'地球濒临枯竭，父亲穿越虫洞寻找新家园，与女儿跨越时间重逢。',
|
||||
],
|
||||
[
|
||||
'楚门的世界 The Truman Show (1998)',
|
||||
'楚门渐渐发现，自己的整个人生其实是一档被全世界围观的真人秀。',
|
||||
],
|
||||
['疯狂动物城 Zootopia (2016)', '兔子警官与狐狸搭档，在动物城里侦破一桩失踪案，也打破偏见。'],
|
||||
[
|
||||
'大话西游之大圣娶亲 (1995)',
|
||||
'至尊宝在爱情与宿命之间反复抉择，最终戴上金箍踏上取经路。',
|
||||
],
|
||||
]
|
||||
|
||||
const MOVIES: PosterCategory = {
|
||||
id: 'movie',
|
||||
kind: 'posters',
|
||||
title: '推荐电影',
|
||||
barColor: '#ff6034',
|
||||
icon: '🎬',
|
||||
items: MOVIE_SEEDS.map(([title, summary], index) => {
|
||||
const id = `movie-${index + 1}`
|
||||
return {
|
||||
id,
|
||||
title,
|
||||
cover: `https://picsum.photos/seed/m${index + 1}/300/450`,
|
||||
tags: ['推荐电影', '豆瓣电影 Top250'],
|
||||
comment: '收藏在本地片单里，闲下来就重看一遍。',
|
||||
summary,
|
||||
href: '#',
|
||||
views: stat(id, 300, 1500),
|
||||
likes: stat(`${id}-like`, 3, 60),
|
||||
}
|
||||
}),
|
||||
}
|
||||
|
||||
const ARTICLE_SEEDS = [
|
||||
['可塑性极强的玻璃，在设计师手里有了更多可能', '前沿科技'],
|
||||
['废旧共享单车如何变成微型共享书屋？', '环保设计'],
|
||||
['荧光灯管与混凝土块的组合，可以玩出多少花样？', '材料探索'],
|
||||
['混凝土做的模块化收纳框，还能改成搁架用', '家居模块'],
|
||||
['这个用拉伸材料做的头盔，还能帮你呼叫救护车', '智能穿戴'],
|
||||
['你如何选择字体，简单易读还是好看有趣？', '视觉体验'],
|
||||
['家里空间小？你需要几把可以悬挂在墙上的椅子', '空间收纳'],
|
||||
['宜家厨房家具又被改造了，色彩是亮点', '色彩灵感'],
|
||||
['这款诞生 50 年的扶手椅，推出了特别版配色', '经典产品'],
|
||||
['让家和办公室界限变得模糊的一组家具', '办公家具'],
|
||||
['这个酒店设计奖，挖掘过去一年体验最好的酒店', '空间建筑'],
|
||||
['一款可移动办公桌，挂墙上当作白板就能写写画画', '移动办公'],
|
||||
]
|
||||
|
||||
/** 生成演示用正文；接入真实数据后由后端提供 blocks */
|
||||
function buildArticleBlocks(title: string, desc: string, cover: string): ArticleBlock[] {
|
||||
return [
|
||||
{
|
||||
type: 'paragraph',
|
||||
text: `开放与明亮的氛围，在室内空间中尤为注重。这条以「${desc}」为主题的报道，围绕材料、结构与使用场景展开，我们挑了几个值得一看的案例。`,
|
||||
},
|
||||
{ type: 'heading', text: '设计细节' },
|
||||
{
|
||||
type: 'paragraph',
|
||||
text: `《${title}》之所以特别，不在于用了多昂贵的材料，而是把材料本身的特性放在了第一位：既没有沿用传统做法，也不是单纯的形式实验。`,
|
||||
},
|
||||
{
|
||||
type: 'paragraph',
|
||||
text: '在有限的空间里，它既保持了功能的完整性，也留出了呼吸感，适合日常使用。',
|
||||
},
|
||||
{ type: 'image', src: cover },
|
||||
{
|
||||
type: 'paragraph',
|
||||
text: '文字与图片均为本地演示用的占位内容，实际报道接入后由后端提供。',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
const CES: ArticleCategory = {
|
||||
id: 'ces',
|
||||
kind: 'articles',
|
||||
title: 'CES 现场报道',
|
||||
barColor: '#ffba3a',
|
||||
icon: '🏷️',
|
||||
items: ARTICLE_SEEDS.map(([title, desc], index) => {
|
||||
const cover = `https://picsum.photos/seed/a${index + 1}/400/250`
|
||||
|
||||
return {
|
||||
id: `ces-${index + 1}`,
|
||||
title: `${title} | 这个设计了不起`,
|
||||
desc,
|
||||
cover,
|
||||
meta: ['2 年前', 'CES 现场报道'],
|
||||
blocks: buildArticleBlocks(title, desc, cover),
|
||||
}
|
||||
}),
|
||||
}
|
||||
|
||||
/**
|
||||
* 把后端项目列表转成「本地服务」分类。
|
||||
* href 用真实路由，详情页的「跳转」按钮直接打开对应静态站点。
|
||||
*/
|
||||
function buildLocalCategory(items: AppItem[]): AppCategory {
|
||||
return {
|
||||
id: 'local',
|
||||
kind: 'apps',
|
||||
title: '本地服务',
|
||||
barColor: '#3858f6',
|
||||
icon: '🖥️',
|
||||
groups: items.length > 0 ? [{ id: 'local-all', name: '全部项目', items }] : [],
|
||||
previewLimit: 8,
|
||||
emptyText: '还没有项目：在托管目录下建一个子目录并放入 index.html，刷新后就会出现在这里。',
|
||||
}
|
||||
}
|
||||
|
||||
/** 组装首页 + 明细所需的全部分类，本地服务始终排第一 */
|
||||
export function buildCategories(projects: { name: string; route_path: string }[]): Category[] {
|
||||
const localItems: AppItem[] = projects.map((project) => ({
|
||||
id: project.route_path,
|
||||
name: project.name,
|
||||
desc: project.route_path,
|
||||
icon: project.name.slice(0, 1).toUpperCase(),
|
||||
href: project.route_path,
|
||||
// 本地项目没有封面图，详情页退化为字符头像
|
||||
comment: '本地静态站点，由 Stash 直接托管。',
|
||||
badge: '本地项目',
|
||||
views: 0,
|
||||
likes: 0,
|
||||
}))
|
||||
|
||||
return [buildLocalCategory(localItems), RECOMMEND, MOVIES, CES]
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import type { AppItem, PosterItem, RelatedItem } from './types'
|
||||
|
||||
/**
|
||||
* 条目详情页的通用视图模型。
|
||||
*
|
||||
* 应用（方形头像 + 横幅）和电影（竖版海报 + 多标签）共用同一套版式，
|
||||
* 差异通过 shape / tags / banner 这几个字段表达，避免维护两份几乎相同的页面。
|
||||
*/
|
||||
export type ItemDetailModel = {
|
||||
title: string
|
||||
/** 主图；缺失时用 fallbackIcon 显示字符块 */
|
||||
cover?: string
|
||||
/** 主图形态：应用用方形，电影用竖版海报 */
|
||||
shape: 'square' | 'portrait'
|
||||
/** 主图缺省时的字符 */
|
||||
fallbackIcon?: string
|
||||
/** 标签行（应用 1 个，电影 2 个） */
|
||||
tags: string[]
|
||||
/** 一句话评价 */
|
||||
comment?: string
|
||||
/** 正文段落 */
|
||||
paragraphs: string[]
|
||||
views: number
|
||||
likes: number
|
||||
href: string
|
||||
/** 应用详情页的横幅图 */
|
||||
banner?: string
|
||||
}
|
||||
|
||||
/** 把应用条目转成详情模型 */
|
||||
export function appDetailModel(item: AppItem): ItemDetailModel {
|
||||
return {
|
||||
title: item.name,
|
||||
cover: item.cover,
|
||||
shape: 'square',
|
||||
fallbackIcon: item.icon,
|
||||
tags: item.badge !== undefined ? [item.badge] : [],
|
||||
comment: item.comment,
|
||||
paragraphs: [item.desc],
|
||||
views: item.views ?? 0,
|
||||
likes: item.likes ?? 0,
|
||||
href: item.href,
|
||||
banner: item.banner,
|
||||
}
|
||||
}
|
||||
|
||||
/** 把电影海报转成详情模型 */
|
||||
export function posterDetailModel(item: PosterItem): ItemDetailModel {
|
||||
return {
|
||||
title: item.title,
|
||||
cover: item.cover,
|
||||
shape: 'portrait',
|
||||
tags: item.tags ?? [],
|
||||
comment: item.comment,
|
||||
paragraphs: item.summary !== undefined ? [item.summary] : [],
|
||||
views: item.views ?? 0,
|
||||
likes: item.likes ?? 0,
|
||||
href: item.href ?? '#',
|
||||
}
|
||||
}
|
||||
|
||||
/** 应用条目 → 推荐阅读条目 */
|
||||
export function toRelatedItem(item: AppItem): RelatedItem {
|
||||
return { id: item.id, name: item.name, desc: item.desc, cover: item.cover, icon: item.icon }
|
||||
}
|
||||
|
||||
/** 电影海报 → 推荐阅读条目 */
|
||||
export function posterToRelatedItem(item: PosterItem): RelatedItem {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.title,
|
||||
desc: item.tags?.join(' · ') ?? '推荐电影',
|
||||
cover: item.cover,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import type { Category } from './types'
|
||||
|
||||
/**
|
||||
* 按关键字过滤分类内容。
|
||||
*
|
||||
* 应用类分类会逐组过滤并丢掉空组，海报 / 图文类按标题或描述匹配；
|
||||
* 空关键字直接原样返回，避免无谓的对象重建。
|
||||
*/
|
||||
export function filterCategories(categories: Category[], keyword: string): Category[] {
|
||||
const query = keyword.trim().toLowerCase()
|
||||
if (query === '') return categories
|
||||
|
||||
const result: Category[] = []
|
||||
|
||||
for (const category of categories) {
|
||||
if (category.kind === 'apps') {
|
||||
const groups = category.groups
|
||||
.map((group) => ({
|
||||
...group,
|
||||
items: group.items.filter((item) => matches(query, item.name, item.desc)),
|
||||
}))
|
||||
.filter((group) => group.items.length > 0)
|
||||
|
||||
if (groups.length > 0) {
|
||||
result.push({ ...category, groups })
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
if (category.kind === 'posters') {
|
||||
const items = category.items.filter((item) => matches(query, item.title))
|
||||
if (items.length > 0) {
|
||||
result.push({ ...category, items })
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
const items = category.items.filter((item) => matches(query, item.title, item.desc))
|
||||
if (items.length > 0) {
|
||||
result.push({ ...category, items })
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
function matches(query: string, ...fields: string[]): boolean {
|
||||
return fields.some((field) => field.toLowerCase().includes(query))
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* 侧栏分类导航的数据定义。
|
||||
*
|
||||
* 叶子节点通过 target 指向「分类 + 可选分组」，点击后右侧切换到对应明细。
|
||||
* 标签保持与现有侧栏一致，避免改动已定稿的侧栏。
|
||||
*/
|
||||
|
||||
export type NavTarget = {
|
||||
categoryId: string
|
||||
/** 指定后明细页只展示该分组 */
|
||||
groupId?: string
|
||||
}
|
||||
|
||||
export type NavLeaf = {
|
||||
id: string
|
||||
label: string
|
||||
target: NavTarget
|
||||
}
|
||||
|
||||
export type NavGroupNode = {
|
||||
id: string
|
||||
label: string
|
||||
leaves: NavLeaf[]
|
||||
}
|
||||
|
||||
/** 顶层直达链接 */
|
||||
export const NAV_TOP_LEVEL: NavLeaf[] = [
|
||||
{ id: 'recommend', label: '常用推荐', target: { categoryId: 'recommend' } },
|
||||
]
|
||||
|
||||
/** 可折叠分组 */
|
||||
export const NAV_GROUPS: NavGroupNode[] = [
|
||||
{
|
||||
id: 'assets',
|
||||
label: '素材资源',
|
||||
leaves: [
|
||||
{ id: 'ui', label: 'UI 设计资源', target: { categoryId: 'recommend', groupId: 'ui' } },
|
||||
{ id: 'vector', label: '矢量图标', target: { categoryId: 'recommend', groupId: 'vector' } },
|
||||
{
|
||||
id: 'wallpaper',
|
||||
label: '免费壁纸',
|
||||
target: { categoryId: 'recommend', groupId: 'wallpaper' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'tools',
|
||||
label: '开发工具',
|
||||
leaves: [
|
||||
{ id: 'dev', label: '前端调试工具', target: { categoryId: 'recommend', groupId: 'dev' } },
|
||||
{ id: 'code', label: '在线编辑器', target: { categoryId: 'recommend', groupId: 'dev' } },
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,190 @@
|
||||
/**
|
||||
* 内容数据模型。
|
||||
*
|
||||
* 首页把每个「分类」渲染成一张卡片，明细页按分类的 kind 渲染不同网格，
|
||||
* 因此这里用可辨识联合把三种展示形态分开。
|
||||
*/
|
||||
|
||||
/** 一个可点击的应用 / 站点条目 */
|
||||
export type AppItem = {
|
||||
id: string
|
||||
name: string
|
||||
desc: string
|
||||
/** 卡片左侧的字符图标 */
|
||||
icon: string
|
||||
/** 跳转地址；本地项目为 /<目录名>/ */
|
||||
href: string
|
||||
/** 详情页头像 / 封面，缺省时退化为字符图标 */
|
||||
cover?: string
|
||||
/** 是否为热门条目：卡片名字后显示主题同款 HOT 徽标 */
|
||||
hot?: boolean
|
||||
/** 详情页的一句话评价 */
|
||||
comment?: string
|
||||
/** 详情页横幅图 */
|
||||
banner?: string
|
||||
/** 详情页头像下方的标签 */
|
||||
badge?: string
|
||||
/** 详情页浏览量（占位数据） */
|
||||
views?: number
|
||||
/** 详情页点赞数（占位数据） */
|
||||
likes?: number
|
||||
}
|
||||
|
||||
/** 应用分组：明细页按组展示，首页取所有分组的前几项做预览 */
|
||||
export type AppGroup = {
|
||||
id: string
|
||||
name: string
|
||||
items: AppItem[]
|
||||
}
|
||||
|
||||
/** 竖版海报条目（电影） */
|
||||
export type PosterItem = {
|
||||
id: string
|
||||
title: string
|
||||
cover: string
|
||||
/** 详情页标签行，如「推荐电影」「豆瓣电影 Top250」 */
|
||||
tags?: string[]
|
||||
/** 详情页一句话评价 */
|
||||
comment?: string
|
||||
/** 详情页正文段落 */
|
||||
summary?: string
|
||||
/** 跳转地址（占位数据暂无真实链接） */
|
||||
href?: string
|
||||
views?: number
|
||||
likes?: number
|
||||
}
|
||||
|
||||
/** 「推荐阅读」用的轻量条目，应用与电影都能映射过来 */
|
||||
export type RelatedItem = {
|
||||
id: string
|
||||
name: string
|
||||
desc: string
|
||||
cover?: string
|
||||
icon?: string
|
||||
}
|
||||
|
||||
/** 文章正文块：段落 / 小标题 / 配图 */
|
||||
export type ArticleBlock =
|
||||
| { type: 'paragraph'; text: string }
|
||||
| { type: 'heading'; text: string }
|
||||
| { type: 'image'; src: string }
|
||||
|
||||
/** 图文条目（报道） */
|
||||
export type ArticleItem = {
|
||||
id: string
|
||||
title: string
|
||||
desc: string
|
||||
cover: string
|
||||
/** 详情页标题下的元信息，如 ['2 年前', 'CES 现场报道'] */
|
||||
meta?: string[]
|
||||
/** 详情页正文 */
|
||||
blocks?: ArticleBlock[]
|
||||
}
|
||||
|
||||
/** 应用类分类：内部按分组组织 */
|
||||
export type AppCategory = {
|
||||
id: string
|
||||
kind: 'apps'
|
||||
title: string
|
||||
/** 标题左侧色条颜色，各分类用不同颜色区分 */
|
||||
barColor: string
|
||||
/** 明细页 hero 区的字符图标 */
|
||||
icon: string
|
||||
groups: AppGroup[]
|
||||
/** 首页预览条数，默认 4 */
|
||||
previewLimit?: number
|
||||
/** 首页预览为空时的提示文案 */
|
||||
emptyText?: string
|
||||
}
|
||||
|
||||
/** 海报类分类：竖版海报网格 */
|
||||
export type PosterCategory = {
|
||||
id: string
|
||||
kind: 'posters'
|
||||
title: string
|
||||
barColor: string
|
||||
icon: string
|
||||
items: PosterItem[]
|
||||
/** 首页预览条数，默认 6 */
|
||||
previewLimit?: number
|
||||
}
|
||||
|
||||
/** 图文类分类：上图下文卡片网格 */
|
||||
export type ArticleCategory = {
|
||||
id: string
|
||||
kind: 'articles'
|
||||
title: string
|
||||
barColor: string
|
||||
icon: string
|
||||
items: ArticleItem[]
|
||||
/** 首页预览条数，默认 4 */
|
||||
previewLimit?: number
|
||||
}
|
||||
|
||||
export type Category = AppCategory | PosterCategory | ArticleCategory
|
||||
|
||||
/** 分类内的条目总数，用于角标与明细页计数 */
|
||||
export function categoryCount(category: Category): number {
|
||||
if (category.kind === 'apps') {
|
||||
return category.groups.reduce((total, group) => total + group.items.length, 0)
|
||||
}
|
||||
return category.items.length
|
||||
}
|
||||
|
||||
/** 把应用类分类的分组拍平，首页预览用 */
|
||||
export function flattenAppItems(category: AppCategory): AppItem[] {
|
||||
return category.groups.flatMap((group) => group.items)
|
||||
}
|
||||
|
||||
/** 按 id 在分类里查找条目；详情页用 */
|
||||
export function findAppItem(category: Category, itemId: string): AppItem | undefined {
|
||||
if (category.kind !== 'apps') return undefined
|
||||
|
||||
for (const group of category.groups) {
|
||||
const found = group.items.find((item) => item.id === itemId)
|
||||
if (found !== undefined) return found
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
/** 取同分类下的其他条目，用于详情页的「推荐阅读」 */
|
||||
export function relatedAppItems(
|
||||
category: Category,
|
||||
excludeId: string | undefined,
|
||||
limit = 4,
|
||||
): AppItem[] {
|
||||
if (category.kind !== 'apps') return []
|
||||
|
||||
return flattenAppItems(category)
|
||||
.filter((item) => item.id !== excludeId)
|
||||
.slice(0, limit)
|
||||
}
|
||||
|
||||
/** 按 id 查找海报条目 */
|
||||
export function findPosterItem(
|
||||
category: Category,
|
||||
itemId: string,
|
||||
): PosterItem | undefined {
|
||||
if (category.kind !== 'posters') return undefined
|
||||
return category.items.find((item) => item.id === itemId)
|
||||
}
|
||||
|
||||
/** 取同分类下的其他海报，用于详情页的「推荐阅读」 */
|
||||
export function relatedPosterItems(
|
||||
category: Category,
|
||||
excludeId: string | undefined,
|
||||
limit = 4,
|
||||
): PosterItem[] {
|
||||
if (category.kind !== 'posters') return []
|
||||
|
||||
return category.items.filter((item) => item.id !== excludeId).slice(0, limit)
|
||||
}
|
||||
|
||||
/** 按 id 查找图文条目 */
|
||||
export function findArticleItem(
|
||||
category: Category,
|
||||
itemId: string,
|
||||
): ArticleItem | undefined {
|
||||
if (category.kind !== 'articles') return undefined
|
||||
return category.items.find((item) => item.id === itemId)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* 图标字体：取自 Alright 主题自带的 iconfont（Project id 4809463）。
|
||||
* 字体文件放在 public/fonts/iconfont.woff2，这里只保留项目用到的字形，
|
||||
* 避免把整份 500 多个图标的样式表打进包里。
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('./assets/iconfont.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
font-family: 'iconfont' !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
text-rendering: auto;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-search::before {
|
||||
content: '\e942';
|
||||
}
|
||||
|
||||
.icon-user::before {
|
||||
content: '\e966';
|
||||
}
|
||||
|
||||
.icon-refresh::before {
|
||||
content: '\e93d';
|
||||
}
|
||||
|
||||
.icon-link::before {
|
||||
content: '\ea37';
|
||||
}
|
||||
|
||||
.icon-external::before {
|
||||
content: '\e8be';
|
||||
}
|
||||
|
||||
.icon-eye::before {
|
||||
content: '\e8fd';
|
||||
}
|
||||
|
||||
.icon-thumb-up::before {
|
||||
content: '\e957';
|
||||
}
|
||||
|
||||
.icon-share::before {
|
||||
content: '\e946';
|
||||
}
|
||||
|
||||
.icon-close::before {
|
||||
content: '\e8e4';
|
||||
}
|
||||
|
||||
.icon-more::before {
|
||||
content: '\e91f';
|
||||
}
|
||||
|
||||
.icon-arrow-up::before {
|
||||
content: '\e8c1';
|
||||
}
|
||||
|
||||
.icon-arrow-left::before {
|
||||
content: '\e8b5';
|
||||
}
|
||||
|
||||
.icon-arrow-down::before {
|
||||
content: '\e8b7';
|
||||
}
|
||||
+25
-12
@@ -1,24 +1,37 @@
|
||||
:root {
|
||||
--bg-color: #f7f9fb;
|
||||
/* ---------- 颜色：取自 Alright 主题的设计变量 ---------- */
|
||||
--bg-color: #f7f8fa;
|
||||
--card-bg: #ffffff;
|
||||
--primary-color: #3b82f6;
|
||||
--primary-soft: #eff6ff;
|
||||
--text-main: #1e293b;
|
||||
--text-sub: #64748b;
|
||||
--text-muted: #94a3b8;
|
||||
--border-color: #e2e8f0;
|
||||
--primary-color: #3858f6;
|
||||
--primary-soft: rgba(56, 88, 246, 0.1);
|
||||
--text-main: #1d2129;
|
||||
--text-sub: #4e5969;
|
||||
--text-muted: #86909c;
|
||||
--border-color: #f6f6f6;
|
||||
--border-strong: #eeeeee;
|
||||
--danger: #ff3e3e;
|
||||
--orange: #ffba3a;
|
||||
--green: #4abd86;
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-main: 12px;
|
||||
--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
|
||||
--shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.03);
|
||||
--radius-lg: 24px;
|
||||
|
||||
/* 主题的阴影很轻：0 6px 16px rgba(27,26,49,2%) */
|
||||
--shadow-card: 0 6px 16px rgba(27, 26, 49, 0.02);
|
||||
--shadow-hover: 0 6px 16px rgba(27, 26, 49, 0.06);
|
||||
|
||||
--sidebar-width: 240px;
|
||||
--top-nav-height: 60px;
|
||||
/* 内容区最大宽度，宽屏时整体居中 */
|
||||
--layout-max-width: 1280px;
|
||||
--layout-max-width: 1380px;
|
||||
/* 内容列顶部让位高度（给悬浮搜索框），侧栏首卡与内容首卡都按它对齐 */
|
||||
--content-top-offset: 52px;
|
||||
|
||||
/* 主题正文用霞鹜文楷（与演示站同一份 webfont），缺失时回退系统字体 */
|
||||
--font-sans:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
|
||||
'LXGW WenKai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans CN', sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
|
||||
|
||||
font-family: var(--font-sans);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './iconfont.css'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
|
||||
@@ -0,0 +1,499 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>服务与推荐列表完整布局</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f5f6f8;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
padding: 24px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* 统一外框卡片（图二样式） */
|
||||
.section-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 顶部标题栏 */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 蓝色指示条/图标 */
|
||||
.title-bar {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #1677ff;
|
||||
border-radius: 2px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 标题容器，方便角标定位 */
|
||||
.title-text-container {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2329;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 右上角红色角标 */
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -18px;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
box-shadow: 0 1px 3px rgba(255, 77, 79, 0.3);
|
||||
}
|
||||
|
||||
/* 卡片右上角更多按钮 */
|
||||
.more-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.more-icon:hover {
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
/* ------------------- 样式 1：常规应用卡片网格 ------------------- */
|
||||
.app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
background-color: #f9f9fb;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f0f0;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-item:hover {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
border-color: #e6e6e6;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background-color: #e8f3ff;
|
||||
color: #1677ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ------------------- 样式 2：图四 推荐电影（竖版海报卡片） ------------------- */
|
||||
.movie-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.movie-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 2 / 3; /* 经典电影海报高宽比 */
|
||||
background-color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.movie-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.movie-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部文字渐变蒙层 */
|
||||
.movie-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px 8px 8px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.movie-title {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ------------------- 样式 3：图五 现场报道/文章（横版网格卡片） ------------------- */
|
||||
.article-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.article-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
.article-item {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4 / 3; /* 横版比例 */
|
||||
background-color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.article-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.article-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部文字渐变蒙层 */
|
||||
.article-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 16px 6px 6px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
opacity: 0.95;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- 1. 本地服务 -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-title-wrapper">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text-container">
|
||||
<span class="section-title">本地服务</span>
|
||||
<span class="badge">1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-icon">•••</div>
|
||||
</div>
|
||||
|
||||
<div class="app-grid">
|
||||
<div class="app-item">
|
||||
<div class="app-icon">G</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">git_helper</div>
|
||||
<div class="app-desc">/git_helper/</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 常用推荐 -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-title-wrapper">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text-container">
|
||||
<span class="section-title">常用推荐</span>
|
||||
<span class="badge">4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-icon">•••</div>
|
||||
</div>
|
||||
|
||||
<div class="app-grid">
|
||||
<div class="app-item">
|
||||
<div class="app-icon">G</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">GitHub</div>
|
||||
<div class="app-desc">代码托管与开源社区</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<div class="app-icon" style="background-color: #e6f7ff; color: #1890ff;">Z</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">知乎</div>
|
||||
<div class="app-desc">深度内容问答社区</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<div class="app-icon" style="background-color: #fff0f6; color: #eb2f96;">B</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">哔哩哔哩</div>
|
||||
<div class="app-desc">弹幕视频分享网站</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<div class="app-icon" style="background-color: #f6ffed; color: #52c41a;">V</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">V2EX</div>
|
||||
<div class="app-desc">创意工作者讨论社区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. 图四样式：推荐电影（竖版海报卡片） -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-title-wrapper">
|
||||
<div class="title-bar" style="background-color: #722ed1;"></div>
|
||||
<div class="title-text-container">
|
||||
<span class="section-title">推荐电影</span>
|
||||
<span class="badge">6</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-icon">•••</div>
|
||||
</div>
|
||||
|
||||
<div class="movie-grid">
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m1/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">千与千寻 千と千尋の神隠し (2001)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m2/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">美丽人生 La vita è bella (1997)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m3/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">这个杀手不太冷 Léon (1994)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m4/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">阿甘正传 Forrest Gump (1994)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m5/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">霸王别姬 (1993)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m6/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">肖申克的救赎 The Shawshank...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. 图五样式：CES 现场报道（横版图片两行网格） -->
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-title-wrapper">
|
||||
<div class="title-bar" style="background-color: #fa8c16;"></div>
|
||||
<div class="title-text-container">
|
||||
<span class="section-title">CES 现场报道</span>
|
||||
<span class="badge">12</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-icon">•••</div>
|
||||
</div>
|
||||
|
||||
<div class="article-grid">
|
||||
<!-- 第一行 -->
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a1/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">可塑性极强的玻璃，在设计师手里有了更多可能</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a2/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">废旧共享单车如何变成微型共享书屋？</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a3/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">荧光灯管与混凝土块的组合，可以玩出多少花样？</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a4/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">混凝土做的模块化收纳框，还能改成搁架用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a5/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">这个用拉伸材料做的头盔，还能帮你呼叫救护车</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a6/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">你如何选择字体，简单易读还是好看有趣？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a7/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">家里空间小？你需要几把可以悬挂在墙上的椅子</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a8/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">宜家厨房家具又被改造了，色彩是亮点</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a9/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">这款诞生50年的扶手椅，推出了特别版配色</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a10/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">让家和办公室界限变得模糊的一组家具</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a11/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">这个酒店设计奖，挖掘过去一年体验最好的酒店</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a12/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">一款可移动办公桌，挂墙上当作白板就能写写画画</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,920 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>STASH - 完整联动与版心对齐布局</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth; /* 启用原生平滑滚动 */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f5f6f8;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 统一版心最大宽度约束 */
|
||||
.layout-container {
|
||||
max-width: 1380px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* ------------------ 1. 顶部 Header 组件 (宽度对齐下方) ------------------ */
|
||||
.header-outer {
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #0f172a;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.header-center-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.info-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #e6f4ff;
|
||||
color: #1677ff;
|
||||
font-size: 12px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.header-icon-btn {
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.header-icon-btn:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
/* 搜索栏区域（宽度与下方卡片版心保持对齐） */
|
||||
.search-container {
|
||||
padding: 16px 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 16px 0 40px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background-color: #ffffff;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #1677ff;
|
||||
box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ------------------ 主体 Layout 布局 ------------------ */
|
||||
.main-layout {
|
||||
display: flex;
|
||||
margin: 20px auto 40px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* ------------------ 2. 左侧侧边栏组件 ------------------ */
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
position: sticky;
|
||||
top: 76px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 18px;
|
||||
border: 1px solid #f0f0f0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
/* 用户卡片 */
|
||||
.user-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background-color: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.verified-badge {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #f59e0b;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
background-color: #f1f5f9;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
margin: 6px 0 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.user-desc {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.user-ip {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* 本地服务状态卡片 */
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
background-color: #f1f5f9;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.status-pill::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #94a3b8;
|
||||
}
|
||||
|
||||
.status-info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.status-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 6px 0;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background-color: #fff;
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
border-color: #cbd5e1;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
/* 侧边分类导航菜单（对应右侧主标题） */
|
||||
.menu-card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.menu-group-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
padding: 6px 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #f8fafc;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background-color: #e6f4ff;
|
||||
color: #1677ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ------------------ 3. 右侧主内容区域 ------------------ */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 大框样式（图二规范） */
|
||||
.section-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
border: 1px solid #f0f0f0;
|
||||
scroll-margin-top: 80px; /* 留出顶部固定 Header 的高度避免遮挡 */
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #1677ff;
|
||||
border-radius: 2px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.title-text-container {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2329;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 角标相对于标题右上角定位 */
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -18px;
|
||||
background-color: #ff4d4f;
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
box-shadow: 0 1px 3px rgba(255, 77, 79, 0.3);
|
||||
}
|
||||
|
||||
.more-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 2px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.more-icon:hover {
|
||||
color: #595959;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 常规卡片网格 */
|
||||
.app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
background-color: #f9f9fb;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f0f0;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-item:hover {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
border-color: #e6e6e6;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background-color: #e8f3ff;
|
||||
color: #1677ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 推荐电影网格 */
|
||||
.movie-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.movie-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 2 / 3;
|
||||
background-color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.movie-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.movie-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.movie-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px 8px 8px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.movie-title {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* CES 现场报道网格 */
|
||||
.article-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.article-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
.article-item {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4 / 3;
|
||||
background-color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.article-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.article-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.article-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 16px 6px 6px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 1. 顶部 Header (固定顶部且与下方容器宽度一致) -->
|
||||
<header class="header-outer">
|
||||
<div class="layout-container header-inner">
|
||||
<div class="header-left">
|
||||
<div class="logo-icon">S</div>
|
||||
<span class="logo-text">STASH</span>
|
||||
</div>
|
||||
|
||||
<div class="header-center-info">
|
||||
<div class="info-item">
|
||||
<span>共 1 个本地应用</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-tag">本地</span>
|
||||
<span>git_helper</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-tag" style="background-color: #f0fdf4; color: #16a34a;">状态</span>
|
||||
<span>等待服务连接</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="header-icon-btn" title="搜索">🔍</div>
|
||||
<div class="header-icon-btn" title="个人账户">👤</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 搜索框区域 -->
|
||||
<div class="layout-container search-container">
|
||||
<div class="search-box">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input type="text" class="search-input" placeholder="搜索本地项目...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体布局 -->
|
||||
<div class="layout-container main-layout">
|
||||
|
||||
<!-- 2. 左侧侧边栏组件 -->
|
||||
<aside class="sidebar">
|
||||
|
||||
<!-- 用户信息卡片 -->
|
||||
<div class="sidebar-card user-card">
|
||||
<div class="avatar-wrapper">
|
||||
<div class="avatar">👤</div>
|
||||
<div class="verified-badge">✓</div>
|
||||
</div>
|
||||
<div class="user-name">本地管理员</div>
|
||||
<div class="user-role">管理员</div>
|
||||
<div class="user-desc">本地静态站点托管与预览，所有项目都运行在这台机器上。</div>
|
||||
<div class="user-ip">IP地址: 局域网</div>
|
||||
</div>
|
||||
|
||||
<!-- 本地服务状态卡片 -->
|
||||
<div class="sidebar-card">
|
||||
<div class="status-header">
|
||||
<span class="status-title">本地服务</span>
|
||||
<span class="status-pill">未连接</span>
|
||||
</div>
|
||||
<div class="status-info-row">
|
||||
<span class="status-label">项目数</span>
|
||||
<span class="status-value">1</span>
|
||||
</div>
|
||||
<div class="status-info-row">
|
||||
<span class="status-label">访问地址</span>
|
||||
<span class="status-value">127.0.0.1:8080</span>
|
||||
</div>
|
||||
<div class="status-actions">
|
||||
<button class="action-btn">🔄 重新扫描</button>
|
||||
<button class="action-btn">🔗 查看接口</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类导航菜单（与右侧主标题一致） -->
|
||||
<div class="sidebar-card menu-card">
|
||||
<div class="menu-group-title">快速导航</div>
|
||||
|
||||
<a href="#section-local" class="menu-item active" onclick="setActive(this)">
|
||||
<span>本地服务</span>
|
||||
<span style="font-size: 11px;">1</span>
|
||||
</a>
|
||||
<a href="#section-recommend" class="menu-item" onclick="setActive(this)">
|
||||
<span>常用推荐</span>
|
||||
<span style="font-size: 11px;">4</span>
|
||||
</a>
|
||||
<a href="#section-movie" class="menu-item" onclick="setActive(this)">
|
||||
<span>推荐电影</span>
|
||||
<span style="font-size: 11px;">6</span>
|
||||
</a>
|
||||
<a href="#section-ces" class="menu-item" onclick="setActive(this)">
|
||||
<span>CES 现场报道</span>
|
||||
<span style="font-size: 11px;">12</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- 3. 右侧主内容区域 -->
|
||||
<main class="content-area">
|
||||
|
||||
<!-- 1. 本地服务 -->
|
||||
<section id="section-local" class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-title-wrapper">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text-container">
|
||||
<span class="section-title">本地服务</span>
|
||||
<span class="badge">1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-icon" title="更多操作">•••</div>
|
||||
</div>
|
||||
|
||||
<div class="app-grid">
|
||||
<div class="app-item">
|
||||
<div class="app-icon">G</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">git_helper</div>
|
||||
<div class="app-desc">/git_helper/</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. 常用推荐 -->
|
||||
<section id="section-recommend" class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-title-wrapper">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text-container">
|
||||
<span class="section-title">常用推荐</span>
|
||||
<span class="badge">4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-icon" title="更多操作">•••</div>
|
||||
</div>
|
||||
|
||||
<div class="app-grid">
|
||||
<div class="app-item">
|
||||
<div class="app-icon">G</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">GitHub</div>
|
||||
<div class="app-desc">代码托管与开源社区</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<div class="app-icon" style="background-color: #e6f7ff; color: #1890ff;">Z</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">知乎</div>
|
||||
<div class="app-desc">深度内容问答社区</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<div class="app-icon" style="background-color: #fff0f6; color: #eb2f96;">B</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">哔哩哔哩</div>
|
||||
<div class="app-desc">弹幕视频分享网站</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<div class="app-icon" style="background-color: #f6ffed; color: #52c41a;">V</div>
|
||||
<div class="app-info">
|
||||
<div class="app-name">V2EX</div>
|
||||
<div class="app-desc">创意工作者讨论社区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. 推荐电影 -->
|
||||
<section id="section-movie" class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-title-wrapper">
|
||||
<div class="title-bar" style="background-color: #722ed1;"></div>
|
||||
<div class="title-text-container">
|
||||
<span class="section-title">推荐电影</span>
|
||||
<span class="badge">6</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-icon" title="更多操作">•••</div>
|
||||
</div>
|
||||
|
||||
<div class="movie-grid">
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m1/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">千与千寻 千と千尋の神隠し (2001)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m2/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">美丽人生 La vita è bella (1997)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m3/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">这个杀手不太冷 Léon (1994)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m4/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">阿甘正传 Forrest Gump (1994)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m5/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">霸王别姬 (1993)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-item">
|
||||
<img class="movie-cover" src="https://picsum.photos/seed/m6/300/450" alt="海报">
|
||||
<div class="movie-info">
|
||||
<div class="movie-title">肖申克的救赎 The Shawshank...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. CES 现场报道 -->
|
||||
<section id="section-ces" class="section-card">
|
||||
<div class="section-header">
|
||||
<div class="section-title-wrapper">
|
||||
<div class="title-bar" style="background-color: #fa8c16;"></div>
|
||||
<div class="title-text-container">
|
||||
<span class="section-title">CES 现场报道</span>
|
||||
<span class="badge">12</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more-icon" title="更多操作">•••</div>
|
||||
</div>
|
||||
|
||||
<div class="article-grid">
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a1/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">可塑性极强的玻璃，在设计师手里有了更多可能</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a2/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">废旧共享单车如何变成微型共享书屋？</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a3/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">荧光灯管与混凝土块的组合，可以玩出多少花样？</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a4/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">混凝土做的模块化收纳框，还能改成搁架用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a5/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">这个用拉伸材料做的头盔，还能帮你呼叫救护车</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-item">
|
||||
<img class="article-cover" src="https://picsum.photos/seed/a6/300/225" alt="文章图片">
|
||||
<div class="article-info">
|
||||
<div class="article-title">你如何选择字体，简单易读还是好看有趣？</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 切换左侧菜单激活高亮样式
|
||||
function setActive(element) {
|
||||
const items = document.querySelectorAll('.menu-item');
|
||||
items.forEach(item => item.classList.remove('active'));
|
||||
element.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user