chore: 清理无引用的前端与旧模板资源
- 删除 13 个旧 App 时代的前端组件/数据层文件（无 import 可达）
- 删除 templates/ 6 个旧 Askama 原型页与 assets/dashboard.{css,js}
- README/设计文档同步当前路由与图标实现，移除失效引用
- stash-web 构建通过，cargo test 59 passed
This commit is contained in:
+10
-42
@@ -100,48 +100,16 @@ CSS 变量 `--font-sans` / `--font-mono` 定义在 `index.css`。
|
||||
|
||||
## 3. 图标
|
||||
|
||||
### 3.1 图标字体
|
||||
图标统一来自组件库 `@stash/ui`：
|
||||
|
||||
主题使用自建 iconfont（线性风格，Project id 4809463）。
|
||||
Stash 自托管了一份 **只含所需字形** 的子集：
|
||||
```tsx
|
||||
import { Icon } from '@stash/ui'
|
||||
|
||||
- 字体文件：[`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;
|
||||
}
|
||||
<Icon name="search_3_line" />
|
||||
```
|
||||
|
||||
可用名称见 `@stash/ui` 导出的 `ICON_NAMES`，尺寸与颜色分别由 `size` / CSS `color` 控制。`stash-web` 不再维护本地 iconfont 或 `Icon.tsx`。
|
||||
|
||||
---
|
||||
|
||||
## 4. 布局
|
||||
@@ -311,10 +279,10 @@ background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, tran
|
||||
| 需求 | 改动位置 |
|
||||
| --- | --- |
|
||||
| 改主色 / 灰阶 / 圆角 | [`stash-web/src/index.css`](stash-web/src/index.css) 的 `:root` |
|
||||
| 新增图标 | 把 codepoint 加进 [`stash-web/src/iconfont.css`](stash-web/src/iconfont.css)，在 `Icon.tsx` 包一个组件 |
|
||||
| 新增分类 | 内容库 `category` 表（首次启动前可改 [`src/db/seed.json`](src/db/seed.json)），首页与明细页自动适配 |
|
||||
| 调整侧栏导航 | 内容库 `nav_entry` 表，标签 / 层级 / 跳转目标都可在库里改 |
|
||||
| 新增卡片类型 | 在 `data/types.ts` 增加 kind，`HomeView` / `DetailView` 各加一个分支 |
|
||||
| 新增图标 | 在 `@stash/ui` 的 iconfont 中补图标，再通过 `<Icon name>` 使用 |
|
||||
| 新增分组 | 后台「分组管理」新建根分组 / 子分组，内容挂在分组上 |
|
||||
| 调整侧栏导航 | 后台「侧边栏」勾选要显示的卡片与分组 |
|
||||
| 新增卡片类型 | 在 `AppNext.tsx` 的 `renderEntries` / `renderCard` 增加分支 |
|
||||
| 调整分区样式 | [`stash-web/src/App.css`](stash-web/src/App.css) 的「分区卡片」段落 |
|
||||
| 换背景图 | 替换 `stash-web/src/assets/site-bg.jpg` |
|
||||
|
||||
|
||||
@@ -109,7 +109,7 @@ cargo run -- --root ./sites --host 0.0.0.0 --port 3000
|
||||
（`src/server.rs` 的 `SPA_PREFIXES` / `SPA_PAGES`），托管目录里写错的地址仍然是 404 页面——
|
||||
不做「所有未命中都返回 200」的万能回落，否则分不清是路由拼错还是文件真的不存在；
|
||||
- 地址转换规则在 [`stash-web/src/data/view.ts`](stash-web/src/data/view.ts)，
|
||||
与 history 打交道的部分在 [`stash-web/src/useViewRoute.ts`](stash-web/src/useViewRoute.ts)。
|
||||
实际解析与跳转在 [`stash-web/src/AppNext.tsx`](stash-web/src/AppNext.tsx) 的 `useRoute` / `navigate`。
|
||||
新增一类页面时两处都要改：前端加前缀，服务端把它加进 `SPA_PREFIXES` 或 `SPA_PAGES`；
|
||||
- 站内跳转统一走 `navigate()`（`AppNext.tsx`），不整页刷新；按住 Ctrl/Cmd 点卡片或链接仍可新标签打开。
|
||||
|
||||
@@ -153,12 +153,6 @@ cargo run -- --root ./sites --host 0.0.0.0 --port 3000
|
||||
../stash-ui/ # 同级目录：@stash/ui 组件库（令牌 / 组件 / 展示站）
|
||||
```
|
||||
|
||||
`templates/` 与 `assets/` 是上一版 Askama 控制台留下的文件，当前已无任何代码引用，
|
||||
可以直接删除。
|
||||
|
||||
`templates/` 与 `assets/` 是上一版 Askama 控制台留下的文件，当前已无任何代码引用，
|
||||
可以直接删除。
|
||||
|
||||
## 前端怎么被内嵌
|
||||
|
||||
1. `npm run build` 产出 `stash-web/dist`；
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,198 +0,0 @@
|
||||
(() => {
|
||||
"use strict";
|
||||
|
||||
const grid = document.querySelector("#project-grid");
|
||||
const refreshButton = document.querySelector("#refresh-projects");
|
||||
const status = document.querySelector("#refresh-status");
|
||||
const projectCounts = document.querySelectorAll("[data-project-count]");
|
||||
const liveStatus = document.querySelector("#live-status");
|
||||
const liveStatusLabel = document.querySelector("#live-status-label");
|
||||
|
||||
if (!grid || !refreshButton || !status || !liveStatus || !liveStatusLabel) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.body.classList.add("is-enhanced");
|
||||
|
||||
const createProjectCard = (project) => {
|
||||
if (
|
||||
typeof project.name !== "string" ||
|
||||
typeof project.route_path !== "string" ||
|
||||
!project.route_path.startsWith("/") ||
|
||||
project.route_path.startsWith("//")
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.className = "site-item";
|
||||
link.href = project.route_path;
|
||||
link.title = project.name;
|
||||
|
||||
const cardTop = document.createElement("div");
|
||||
cardTop.className = "site-card-top";
|
||||
|
||||
const avatar = document.createElement("span");
|
||||
avatar.className = "site-avatar";
|
||||
avatar.setAttribute("aria-hidden", "true");
|
||||
avatar.textContent = Array.from(project.name)[0]?.toUpperCase() || "A";
|
||||
|
||||
const open = document.createElement("span");
|
||||
open.className = "site-open";
|
||||
open.setAttribute("aria-hidden", "true");
|
||||
open.innerHTML = `
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M7 17 17 7M8 7h9v9"></path>
|
||||
</svg>
|
||||
`;
|
||||
cardTop.append(avatar, open);
|
||||
|
||||
const info = document.createElement("div");
|
||||
info.className = "site-info";
|
||||
|
||||
const name = document.createElement("h3");
|
||||
name.className = "site-name";
|
||||
name.textContent = project.name;
|
||||
|
||||
const description = document.createElement("span");
|
||||
description.className = "site-desc";
|
||||
description.textContent = "本地静态应用";
|
||||
info.append(name, description);
|
||||
|
||||
const footer = document.createElement("div");
|
||||
footer.className = "site-card-footer";
|
||||
|
||||
const path = document.createElement("span");
|
||||
path.className = "site-path";
|
||||
path.textContent = project.route_path;
|
||||
|
||||
const ready = document.createElement("span");
|
||||
ready.className = "site-ready";
|
||||
ready.textContent = "READY";
|
||||
|
||||
footer.append(path, ready);
|
||||
link.append(cardTop, info, footer);
|
||||
return link;
|
||||
};
|
||||
|
||||
let renderedSignature = JSON.stringify(
|
||||
Array.from(grid.querySelectorAll(".site-item")).map((link) => [
|
||||
link.title,
|
||||
link.getAttribute("href"),
|
||||
]),
|
||||
);
|
||||
|
||||
const projectsSignature = (projects) =>
|
||||
JSON.stringify(
|
||||
projects.map((project) => [project.name, project.route_path]),
|
||||
);
|
||||
|
||||
const renderProjects = (projects) => {
|
||||
const nextSignature = projectsSignature(projects);
|
||||
if (nextSignature === renderedSignature) {
|
||||
return false;
|
||||
}
|
||||
|
||||
grid.replaceChildren();
|
||||
|
||||
if (projects.length === 0) {
|
||||
const emptyState = document.createElement("div");
|
||||
emptyState.className = "empty-state";
|
||||
emptyState.innerHTML = `
|
||||
<span class="empty-visual" aria-hidden="true">
|
||||
<svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>
|
||||
<path d="M8 13h8M8 16h5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<h3>这里还没有项目</h3>
|
||||
<p>在托管根目录下创建子目录，并放入 <code>index.html</code>，刷新后即可在这里看到它。</p>
|
||||
`;
|
||||
grid.append(emptyState);
|
||||
renderedSignature = nextSignature;
|
||||
return true;
|
||||
}
|
||||
|
||||
const cards = projects.map(createProjectCard).filter(Boolean);
|
||||
grid.append(...cards);
|
||||
renderedSignature = nextSignature;
|
||||
return true;
|
||||
};
|
||||
|
||||
const updateProjectCounts = (count) => {
|
||||
projectCounts.forEach((element) => {
|
||||
element.textContent = String(count);
|
||||
});
|
||||
};
|
||||
|
||||
refreshButton.addEventListener("click", async () => {
|
||||
refreshButton.disabled = true;
|
||||
refreshButton.classList.add("is-loading");
|
||||
grid.setAttribute("aria-busy", "true");
|
||||
status.textContent = "正在重新扫描项目...";
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/projects", {
|
||||
cache: "no-store",
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const payload = await response.json();
|
||||
if (!Array.isArray(payload.projects)) {
|
||||
throw new Error("项目列表格式无效");
|
||||
}
|
||||
|
||||
const changed = renderProjects(payload.projects);
|
||||
updateProjectCounts(payload.projects.length);
|
||||
status.textContent = changed ? "项目列表已刷新" : "项目列表已是最新";
|
||||
} catch (error) {
|
||||
console.error("刷新项目列表失败", error);
|
||||
status.textContent = "刷新失败，请稍后重试";
|
||||
} finally {
|
||||
refreshButton.disabled = false;
|
||||
refreshButton.classList.remove("is-loading");
|
||||
grid.removeAttribute("aria-busy");
|
||||
}
|
||||
});
|
||||
|
||||
if (!("EventSource" in window)) {
|
||||
liveStatusLabel.textContent = "手动刷新";
|
||||
return;
|
||||
}
|
||||
|
||||
const eventSource = new EventSource("/api/projects/events");
|
||||
|
||||
eventSource.addEventListener("open", () => {
|
||||
liveStatusLabel.textContent = "实时同步";
|
||||
liveStatus.classList.add("is-live");
|
||||
liveStatus.classList.remove("is-reconnecting");
|
||||
});
|
||||
|
||||
eventSource.addEventListener("projects", (event) => {
|
||||
try {
|
||||
const payload = JSON.parse(event.data);
|
||||
if (!Array.isArray(payload.projects)) {
|
||||
throw new Error("项目列表格式无效");
|
||||
}
|
||||
|
||||
const changed = renderProjects(payload.projects);
|
||||
updateProjectCounts(payload.projects.length);
|
||||
if (changed) {
|
||||
status.textContent = "检测到目录变化，项目列表已自动更新";
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("处理项目更新事件失败", error);
|
||||
status.textContent = "收到项目更新，但无法解析";
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener("error", () => {
|
||||
liveStatusLabel.textContent = "同步重连中";
|
||||
liveStatus.classList.remove("is-live");
|
||||
liveStatus.classList.add("is-reconnecting");
|
||||
});
|
||||
})();
|
||||
@@ -1,13 +0,0 @@
|
||||
import { Badge } from '@stash/ui'
|
||||
|
||||
/**
|
||||
* 数量角标：贴在分区标题旁边的小红标。
|
||||
* 组件库的 Badge 已经处理了两位数和 99+ 的宽度，这里只做语义封装。
|
||||
*/
|
||||
type CountBadgeProps = {
|
||||
count: number
|
||||
}
|
||||
|
||||
export function CountBadge({ count }: CountBadgeProps) {
|
||||
return <Badge count={count} tone="danger" />
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import { Icon } from '@stash/ui'
|
||||
|
||||
/**
|
||||
* 语义图标：stash 内部一直按用途引用（SearchIcon / RefreshIcon…），
|
||||
* 这里统一映射到 @stash/ui 的 iconfont 字形，避免各页面记字形名。
|
||||
*/
|
||||
type IconProps = {
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function SearchIcon({ className }: IconProps) {
|
||||
return <Icon name="search_3_line" className={className} />
|
||||
}
|
||||
|
||||
export function UserIcon({ className }: IconProps) {
|
||||
return <Icon name="user_3_line" className={className} />
|
||||
}
|
||||
|
||||
export function RefreshIcon({ className }: IconProps) {
|
||||
return <Icon name="refresh_3_line" className={className} />
|
||||
}
|
||||
|
||||
export function LinkIcon({ className }: IconProps) {
|
||||
return <Icon name="link_3_line" className={className} />
|
||||
}
|
||||
|
||||
export function ExternalIcon({ className }: IconProps) {
|
||||
return <Icon name="a-external_link_line1" className={className} />
|
||||
}
|
||||
|
||||
export function EyeIcon({ className }: IconProps) {
|
||||
return <Icon name="eye_line" className={className} />
|
||||
}
|
||||
|
||||
export function ThumbUpIcon({ className }: IconProps) {
|
||||
return <Icon name="thumb_up_2_line" className={className} />
|
||||
}
|
||||
|
||||
export function ShareIcon({ className }: IconProps) {
|
||||
return <Icon name="share_3_line" className={className} />
|
||||
}
|
||||
|
||||
export function CloseIcon({ className }: IconProps) {
|
||||
return <Icon name="close_line" className={className} />
|
||||
}
|
||||
|
||||
export function MoreIcon({ className }: IconProps) {
|
||||
return <Icon name="more_1_line" className={className} />
|
||||
}
|
||||
|
||||
export function ArrowUpIcon({ className }: IconProps) {
|
||||
return <Icon name="arrow_up_line" className={className} />
|
||||
}
|
||||
|
||||
export function ArrowDownIcon({ className }: IconProps) {
|
||||
return <Icon name="arrow_down_line" className={className} />
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { Cover } from '@stash/ui'
|
||||
import type { ArticleItem } from '../../data/types'
|
||||
|
||||
/**
|
||||
* 首页图文卡：4:3 封面 + 底部渐变条上的标题。
|
||||
* 传入 onOpen 时整张卡变成按钮，点击进入文章详情。
|
||||
*/
|
||||
type ArticleCardProps = {
|
||||
item: ArticleItem
|
||||
onOpen?: (itemId: string) => void
|
||||
}
|
||||
|
||||
export function ArticleCard({ item, onOpen }: ArticleCardProps) {
|
||||
return (
|
||||
<Cover
|
||||
src={item.cover}
|
||||
alt={item.title}
|
||||
caption={item.title}
|
||||
ratio="article"
|
||||
onClick={onOpen === undefined ? undefined : () => onOpen(item.id)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Grid } from '@stash/ui'
|
||||
import type { ArticleItem } from '../../data/types'
|
||||
import { ArticleCard } from './ArticleCard'
|
||||
|
||||
/** 图文网格：桌面 4 列，平板 2 列，手机 1 列 */
|
||||
type ArticleGridProps = {
|
||||
items: ArticleItem[]
|
||||
/** 点击卡片打开文章详情 */
|
||||
onOpen?: (itemId: string) => void
|
||||
}
|
||||
|
||||
export function ArticleGrid({ items, onOpen }: ArticleGridProps) {
|
||||
return (
|
||||
<Grid columns={4} tabletColumns={2} mobileColumns={1} gap="md">
|
||||
{items.map((item) => (
|
||||
<ArticleCard key={item.id} item={item} onOpen={onOpen} />
|
||||
))}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
@@ -1,138 +0,0 @@
|
||||
import { Breadcrumb, Card, Empty, Space, Title } from '@stash/ui'
|
||||
import {
|
||||
categoryCount,
|
||||
type AppItem,
|
||||
type ArticleItem,
|
||||
type Category,
|
||||
type PosterItem,
|
||||
} from '../../data/types'
|
||||
import { viewPath } from '../../data/view'
|
||||
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
|
||||
/** 点击面包屑中间项（SPA 路由） */
|
||||
onNavigate: (href: string) => void
|
||||
/** 点击卡片 / 海报进入条目详情 */
|
||||
onOpenItem: (itemId: string) => void
|
||||
}
|
||||
|
||||
export function DetailView({ category, groupId, onNavigate, onOpenItem }: DetailViewProps) {
|
||||
// 三种类型共用「分区 → 分组 → 条目」结构；这里抹平联合类型，渲染时再按 kind 分派
|
||||
type RenderItem = AppItem | PosterItem | ArticleItem
|
||||
const groups = category.groups as {
|
||||
id: string
|
||||
name: string
|
||||
items: RenderItem[]
|
||||
}[]
|
||||
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 crumbs =
|
||||
activeGroup !== undefined
|
||||
? [
|
||||
{ label: '首页', href: '/' },
|
||||
{ label: category.title, href: viewPath({ type: 'detail', categoryId: category.id }) },
|
||||
{ label: activeGroup.name },
|
||||
]
|
||||
: [
|
||||
{ label: '首页', href: '/' },
|
||||
{ label: category.title, href: viewPath({ type: 'detail', categoryId: category.id }) },
|
||||
]
|
||||
|
||||
/** 按类型渲染一组条目 */
|
||||
function renderItems(items: RenderItem[]) {
|
||||
if (category.kind === 'posters') {
|
||||
return <PosterGrid items={items as PosterItem[]} variant="detail" onOpen={onOpenItem} />
|
||||
}
|
||||
|
||||
if (category.kind === 'articles') {
|
||||
return <CesCardGrid items={items as ArticleItem[]} onOpen={onOpenItem} />
|
||||
}
|
||||
|
||||
return <AppGrid items={items as AppItem[]} variant="detail" onOpen={onOpenItem} />
|
||||
}
|
||||
|
||||
function renderBody() {
|
||||
if (activeGroup !== undefined) {
|
||||
return renderItems(activeGroup.items)
|
||||
}
|
||||
|
||||
const direct = (category.items ?? []) as RenderItem[]
|
||||
// 空分组不占篇幅（管理后台仍然保留，之后可以往里加条目）
|
||||
const filledGroups = groups.filter((group) => group.items.length > 0)
|
||||
|
||||
if (filledGroups.length === 0) {
|
||||
return direct.length > 0 ? (
|
||||
renderItems(direct)
|
||||
) : (
|
||||
<Empty text={'emptyText' in category ? (category.emptyText ?? '暂无内容') : '暂无内容'} />
|
||||
)
|
||||
}
|
||||
|
||||
if (filledGroups.length === 1 && direct.length === 0) {
|
||||
return renderItems(filledGroups[0].items)
|
||||
}
|
||||
|
||||
return (
|
||||
<Space direction="column" gap="lg" align="stretch">
|
||||
{filledGroups.map((group) => (
|
||||
<GroupBlock
|
||||
key={group.id}
|
||||
name={group.name}
|
||||
barColor={category.barColor !== '' ? category.barColor : undefined}
|
||||
>
|
||||
{renderItems(group.items)}
|
||||
</GroupBlock>
|
||||
))}
|
||||
{direct.length > 0 && (
|
||||
<GroupBlock
|
||||
name="未分组"
|
||||
barColor={category.barColor !== '' ? category.barColor : undefined}
|
||||
>
|
||||
{renderItems(direct)}
|
||||
</GroupBlock>
|
||||
)}
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="detail-view">
|
||||
<Card padding="none" className="detail-nav">
|
||||
<Breadcrumb
|
||||
className="detail-breadcrumb"
|
||||
items={crumbs}
|
||||
onNavigate={onNavigate}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<div className="detail-hero">
|
||||
<span className="detail-hero-icon" aria-hidden="true">
|
||||
{category.icon}
|
||||
</span>
|
||||
<Title level={1} as="h2" weight="strong" className="detail-hero-title">
|
||||
{title}
|
||||
</Title>
|
||||
<span className="detail-hero-count">[{count}]</span>
|
||||
</div>
|
||||
|
||||
{renderBody()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { Space, Title } from '@stash/ui'
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
/**
|
||||
* 明细页的分组块：色条 + 小标题 + 该组的内容网格。
|
||||
*
|
||||
* 色条沿用分区的 `barColor`，与首页卡片标题保持同一套视觉语言；
|
||||
* 具体网格由调用方传入（应用 / 海报 / 图文共用同一层外壳）。
|
||||
*/
|
||||
type GroupBlockProps = {
|
||||
name: string
|
||||
/** 分区色条颜色；缺省用主题主色 */
|
||||
barColor?: string
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function GroupBlock({ name, barColor, children }: GroupBlockProps) {
|
||||
return (
|
||||
<Space direction="column" gap="sm" align="stretch" className="group-block">
|
||||
<div className="group-title">
|
||||
<span
|
||||
className="group-bar"
|
||||
style={barColor !== undefined ? { backgroundColor: barColor } : undefined}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Title level={4} as="h3">
|
||||
{name}
|
||||
</Title>
|
||||
</div>
|
||||
{children}
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
import { categoryCount, flattenAppItems, type Category } from '../../data/types'
|
||||
import { AppGrid } from './AppGrid'
|
||||
import { ArticleGrid } from './ArticleGrid'
|
||||
import { Empty } from '@stash/ui'
|
||||
import { PosterGrid } from './PosterGrid'
|
||||
import { SectionCard } from './SectionCard'
|
||||
import {
|
||||
applySectionSettings,
|
||||
sectionLimit,
|
||||
sectionTitle,
|
||||
type SectionSettings,
|
||||
} from '../../settings'
|
||||
|
||||
/**
|
||||
* 首页：把每个分类渲染成一张分区卡片。
|
||||
*
|
||||
* 每个分区只展示前若干条；标题、条数、顺序与显隐都可以在 `/admin`
|
||||
* 的「首页卡片」里覆盖（见 settings.sections）。
|
||||
*/
|
||||
type HomeViewProps = {
|
||||
categories: Category[]
|
||||
sections: SectionSettings
|
||||
onOpenDetail: (categoryId: string) => void
|
||||
onOpenItem: (categoryId: string, itemId: string) => void
|
||||
}
|
||||
|
||||
export function HomeView({ categories, sections, onOpenDetail, onOpenItem }: HomeViewProps) {
|
||||
const cards = applySectionSettings(categories, sections)
|
||||
|
||||
return (
|
||||
<div className="home-view">
|
||||
{cards.map((category) => (
|
||||
<SectionCard
|
||||
key={category.id}
|
||||
// 卡片标题跟着实际展示的内容走：配了展示块就用块标题（如「常用站点」），
|
||||
// 没配（如「本地服务」）才用分类标题；设置里的覆盖值优先
|
||||
title={sectionTitle(
|
||||
category.id,
|
||||
category.block?.title ?? category.title,
|
||||
sections,
|
||||
)}
|
||||
count={cardCount(category)}
|
||||
barColor={category.barColor}
|
||||
onMore={() => onOpenDetail(category.id)}
|
||||
>
|
||||
{renderPreview(category, sections, onOpenItem)}
|
||||
</SectionCard>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡片右上角的数量角标。
|
||||
*
|
||||
* 配了「分组展示块」时，卡片实际展示的是那个分组，所以数量也应该只数它；
|
||||
* 否则（电影 / 文章 / 本地服务）数整个分区。
|
||||
*/
|
||||
function cardCount(category: Category): number {
|
||||
if (category.block !== undefined) {
|
||||
const group = category.groups.find((item) => item.id === category.block?.nodeKey)
|
||||
if (group !== undefined) return group.items.length
|
||||
}
|
||||
|
||||
return categoryCount(category)
|
||||
}
|
||||
|
||||
/** 某个分区配的「首页预览分组」；没配或找不到返回 undefined */
|
||||
function blockGroup<T>(category: { block?: { nodeKey?: string }; groups: { id: string; items: T[] }[] }) {
|
||||
if (category.block?.nodeKey === undefined) return undefined
|
||||
return category.groups.find((group) => group.id === category.block?.nodeKey)
|
||||
}
|
||||
|
||||
/** 按分类类型输出对应的预览网格；应用类为空时给出提示文案 */
|
||||
function renderPreview(
|
||||
category: Category,
|
||||
sections: SectionSettings,
|
||||
onOpenItem: (categoryId: string, itemId: string) => void,
|
||||
) {
|
||||
if (category.kind === 'apps') {
|
||||
// 配了展示块且指向分组时只展示该组；展示块指向分区本身（「整个分区」）时展示全部条目
|
||||
const group = blockGroup(category)
|
||||
const source = group !== undefined ? group.items : flattenAppItems(category)
|
||||
const fallback = category.block?.previewLimit ?? category.previewLimit ?? 4
|
||||
const limit = sectionLimit(category.id, fallback, sections)
|
||||
const items = source.slice(0, limit)
|
||||
|
||||
if (items.length === 0) {
|
||||
return <Empty text={category.emptyText ?? '暂无内容'} />
|
||||
}
|
||||
|
||||
return <AppGrid items={items} onOpen={(itemId) => onOpenItem(category.id, itemId)} />
|
||||
}
|
||||
|
||||
if (category.kind === 'posters') {
|
||||
const group = blockGroup(category)
|
||||
const source = group
|
||||
? group.items
|
||||
: [...category.items, ...category.groups.flatMap((item) => item.items)]
|
||||
return (
|
||||
<PosterGrid
|
||||
items={source.slice(0, sectionLimit(category.id, category.previewLimit ?? 6, sections))}
|
||||
onOpen={(itemId) => onOpenItem(category.id, itemId)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const group = blockGroup(category)
|
||||
const source = group
|
||||
? group.items
|
||||
: [...category.items, ...category.groups.flatMap((item) => item.items)]
|
||||
return (
|
||||
<ArticleGrid
|
||||
items={source.slice(0, sectionLimit(category.id, category.previewLimit ?? 4, sections))}
|
||||
onOpen={(itemId) => onOpenItem(category.id, itemId)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
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))
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
import type { AppCategory, AppItem, Category } from './types'
|
||||
|
||||
/**
|
||||
* 「本地服务」分类的组装逻辑。
|
||||
*
|
||||
* 这一块不来自内容库：托管目录里有哪些项目是由文件系统决定的，
|
||||
* 后端每次扫描后通过 `/api/projects` 推送，所以本地分类始终在前端拼出来，
|
||||
* 内容库只负责其余的分类（常用推荐 / 推荐电影 / CES 现场报道）。
|
||||
*/
|
||||
|
||||
/** 后端 `/api/projects` 返回的项目结构 */
|
||||
export type HostedProject = {
|
||||
name: string
|
||||
route_path: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 把托管项目映射成应用条目。
|
||||
*
|
||||
* id 用项目名（就是目录名）：它在前端各处（首页卡片、明细、详情）唯一，
|
||||
* 又正好是可以直接放进地址栏的一段——条目详情地址是 `/c/local/<分组>/i/<项目名>`。
|
||||
* 访问地址仍然用 `route_path`（`/demo/`），两者不再混用。
|
||||
* 本地项目没有封面图，详情页会退化成字符头像。
|
||||
*/
|
||||
function toLocalItem(project: HostedProject): AppItem {
|
||||
return {
|
||||
id: project.name,
|
||||
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,
|
||||
}
|
||||
}
|
||||
|
||||
/** 生成「本地服务」分类；没有项目时给出一句引导文案 */
|
||||
export function buildLocalCategory(projects: HostedProject[]): AppCategory {
|
||||
const items = projects.map(toLocalItem)
|
||||
|
||||
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 withLocalCategory(
|
||||
projects: HostedProject[],
|
||||
categories: Category[],
|
||||
): Category[] {
|
||||
return [buildLocalCategory(projects), ...categories]
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
/**
|
||||
* 导航目标。
|
||||
*
|
||||
* 侧栏现在直接由内容树（分区 → 分组）派生，不再有独立的导航数据模型；
|
||||
* 这里只保留「点击后要去哪」的最小类型。
|
||||
*/
|
||||
|
||||
export type NavTarget = {
|
||||
categoryId: string
|
||||
/** 指定后明细页只展示该分组 */
|
||||
groupId?: string
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
/**
|
||||
* 登录后展示的用户模块数据。
|
||||
*
|
||||
* 后端目前没有鉴权 / 用户信息接口，这里先用占位数据，
|
||||
* 等类似 `/api/me` 的接口就绪后替换为真实数据即可。
|
||||
*/
|
||||
export type UserProfile = {
|
||||
name: string
|
||||
role: string
|
||||
bio: string
|
||||
location: string
|
||||
}
|
||||
|
||||
export const PLACEHOLDER_PROFILE: UserProfile = {
|
||||
name: '本地管理员',
|
||||
role: '管理员',
|
||||
bio: '本地静态站点托管与预览，所有项目都运行在这台机器上。',
|
||||
location: '局域网',
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { fetchCatalog, subscribeCatalog } from './api'
|
||||
import type { Category } from './data/types'
|
||||
|
||||
export type CatalogStatus = 'loading' | 'ready' | 'error'
|
||||
|
||||
export type CatalogState = {
|
||||
status: CatalogStatus
|
||||
categories: Category[]
|
||||
error: string | null
|
||||
}
|
||||
|
||||
export type CatalogController = CatalogState & {
|
||||
/** 手动重新拉取；内容库被外部修改后也会自动调用 */
|
||||
reload: () => void
|
||||
}
|
||||
|
||||
function toErrorMessage(error: unknown): string {
|
||||
return error instanceof Error ? error.message : String(error)
|
||||
}
|
||||
|
||||
/**
|
||||
* 内容目录：首屏拉取 + 监听服务端推送 + 手动重载。
|
||||
*
|
||||
* 与 `useProjects` 的区别是失败策略：项目列表失败会保留旧数据，
|
||||
* 内容目录同样保留旧数据 —— 用户正在改库时偶尔读到坏 JSON 不应该把页面清空。
|
||||
*/
|
||||
export function useCatalog(): CatalogController {
|
||||
const [state, setState] = useState<CatalogState>({
|
||||
status: 'loading',
|
||||
categories: [],
|
||||
error: null,
|
||||
})
|
||||
const controllerRef = useRef<AbortController | null>(null)
|
||||
|
||||
/**
|
||||
* 拉一次内容目录。
|
||||
*
|
||||
* 用 ref 保存当前的 AbortController：外部改动可能连续触发多次刷新，
|
||||
* 只保留最后一次请求，避免旧响应把新数据覆盖回去。
|
||||
*/
|
||||
const load = useCallback(() => {
|
||||
controllerRef.current?.abort()
|
||||
const controller = new AbortController()
|
||||
controllerRef.current = controller
|
||||
|
||||
fetchCatalog(controller.signal)
|
||||
.then((catalog) => {
|
||||
if (!controller.signal.aborted) {
|
||||
setState({
|
||||
status: 'ready',
|
||||
categories: catalog.categories,
|
||||
error: null,
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch((error: unknown) => {
|
||||
if (!controller.signal.aborted) {
|
||||
setState((previous) => ({
|
||||
// 已经有内容时只提示错误，不清空列表
|
||||
status: previous.categories.length > 0 ? 'ready' : 'error',
|
||||
categories: previous.categories,
|
||||
error: toErrorMessage(error),
|
||||
}))
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
// 首屏加载：setState 只发生在 Promise 回调里，避免 effect 内同步 setState
|
||||
useEffect(() => {
|
||||
load()
|
||||
return () => controllerRef.current?.abort()
|
||||
}, [load])
|
||||
|
||||
// 内容库被外部修改时，服务端推送一次「变了」，这里重新拉取
|
||||
useEffect(() => subscribeCatalog(load), [load])
|
||||
|
||||
return { ...state, reload: load }
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { parseViewPath, viewPath, type View } from './data/view'
|
||||
|
||||
/**
|
||||
* 视图 ↔ 地址同步。
|
||||
*
|
||||
* 三个入口都要覆盖：首屏（解析地址）、点击（写地址）、浏览器前进后退（popstate）。
|
||||
* 视图本身仍然放在 React state 里，地址只是它的镜像，避免每次渲染都去读 URL；
|
||||
* 地址与视图的换算规则收在 `data/view.ts`，这里只管 history。
|
||||
*/
|
||||
|
||||
/** 存在 history.state 里的键：当前这条记录是应用内第几页（0 = 没有上一页） */
|
||||
const HISTORY_INDEX_KEY = 'stashIndex'
|
||||
|
||||
type StashHistoryState = { [HISTORY_INDEX_KEY]?: number }
|
||||
|
||||
/** 读取当前历史深度；不是本应用写的记录一律当作 0 */
|
||||
function historyIndex(): number {
|
||||
const state = window.history.state as StashHistoryState | null
|
||||
const index = state === null ? undefined : state[HISTORY_INDEX_KEY]
|
||||
return typeof index === 'number' ? index : 0
|
||||
}
|
||||
|
||||
/** 当前 history.state 的副本，写入前先保留别人（如浏览器扩展）放的字段 */
|
||||
function currentHistoryState(): StashHistoryState {
|
||||
const state = window.history.state as StashHistoryState | null
|
||||
return state === null ? {} : { ...state }
|
||||
}
|
||||
|
||||
export type ViewRoute = {
|
||||
/** 当前视图，初值来自地址栏 */
|
||||
view: View
|
||||
/** 打开一个视图：默认压一条新历史，`replace` 表示替换当前这条 */
|
||||
go: (view: View, options?: { replace?: boolean }) => void
|
||||
/**
|
||||
* 返回。
|
||||
*
|
||||
* 应用内有上一页时交给浏览器（`history.back()`），
|
||||
* 直接打开条目地址（收藏 / 刷新后没有上一页）时退到 `fallback`，
|
||||
* 这时它替换当前记录，避免在历史里留下一条「自己指向自己」的条目。
|
||||
*/
|
||||
back: (fallback: View) => void
|
||||
}
|
||||
|
||||
export function useViewRoute(): ViewRoute {
|
||||
const [view, setView] = useState<View>(() => parseViewPath(window.location.pathname))
|
||||
|
||||
// 首屏把地址规范化：去掉多余的斜杠 / 尾部斜杠，未知地址归到首页，
|
||||
// 并补上历史深度（直接打开时是 0，说明应用内没有上一页）
|
||||
useEffect(() => {
|
||||
const canonical = viewPath(parseViewPath(window.location.pathname))
|
||||
const state = currentHistoryState()
|
||||
const recorded = state[HISTORY_INDEX_KEY] !== undefined
|
||||
|
||||
if (canonical === window.location.pathname && recorded) return
|
||||
|
||||
window.history.replaceState({ ...state, [HISTORY_INDEX_KEY]: historyIndex() }, '', canonical)
|
||||
}, [])
|
||||
|
||||
// 前进后退：地址变了，视图跟着变
|
||||
useEffect(() => {
|
||||
const handlePopState = () => setView(parseViewPath(window.location.pathname))
|
||||
window.addEventListener('popstate', handlePopState)
|
||||
return () => window.removeEventListener('popstate', handlePopState)
|
||||
}, [])
|
||||
|
||||
const go = useCallback((next: View, options?: { replace?: boolean }) => {
|
||||
const path = viewPath(next)
|
||||
const index = historyIndex()
|
||||
|
||||
// 已经在同一页（例如重复点同一个侧栏项）：不写历史，也不改深度
|
||||
if (path === window.location.pathname) {
|
||||
setView(next)
|
||||
return
|
||||
}
|
||||
|
||||
const replace = options?.replace === true
|
||||
const state: StashHistoryState = {
|
||||
...currentHistoryState(),
|
||||
[HISTORY_INDEX_KEY]: replace ? index : index + 1,
|
||||
}
|
||||
|
||||
if (replace) {
|
||||
window.history.replaceState(state, '', path)
|
||||
} else {
|
||||
window.history.pushState(state, '', path)
|
||||
}
|
||||
|
||||
setView(next)
|
||||
}, [])
|
||||
|
||||
const back = useCallback(
|
||||
(fallback: View) => {
|
||||
if (historyIndex() > 0) {
|
||||
window.history.back()
|
||||
return
|
||||
}
|
||||
|
||||
go(fallback, { replace: true })
|
||||
},
|
||||
[go],
|
||||
)
|
||||
|
||||
return { view, go, back }
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 - 资源未找到</title>
|
||||
<link rel="stylesheet" href="/__stash__/dashboard.css">
|
||||
</head>
|
||||
<body class="error-page">
|
||||
<main class="error-box">
|
||||
<div class="error-code">404</div>
|
||||
<h1>资源或页面不存在</h1>
|
||||
<p>请求的路径 <code>{{ path }}</code> 不存在或缺少 index.html</p>
|
||||
<a href="/public" class="button">返回应用大厅</a>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,120 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="light">
|
||||
<meta name="theme-color" content="#f7f8fa">
|
||||
<title>Stash · 本地应用工作区</title>
|
||||
<link rel="stylesheet" href="/__stash__/dashboard.css">
|
||||
<script src="/__stash__/dashboard.js" defer></script>
|
||||
</head>
|
||||
<body class="dashboard-page">
|
||||
<div class="ambient ambient-blue" aria-hidden="true"></div>
|
||||
<div class="ambient ambient-warm" aria-hidden="true"></div>
|
||||
|
||||
<div class="workspace">
|
||||
<aside class="sidebar">
|
||||
<header class="sidebar-header">
|
||||
<a class="brand" href="/public" aria-label="Stash 首页">
|
||||
<span class="brand-mark" aria-hidden="true">
|
||||
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="7" height="7" rx="2"></rect>
|
||||
<rect x="14" y="3" width="7" height="7" rx="2"></rect>
|
||||
<rect x="3" y="14" width="7" height="7" rx="2"></rect>
|
||||
<path d="M17.5 14v7M14 17.5h7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="brand-name">stash<span>.</span></span>
|
||||
</a>
|
||||
<span class="local-badge">LOCAL</span>
|
||||
</header>
|
||||
|
||||
<div class="sidebar-intro">
|
||||
<p class="eyebrow"><span class="eyebrow-dot"></span>YOUR WORKSPACE</p>
|
||||
<h1>把项目，<br>放在手边。</h1>
|
||||
<p class="sidebar-lead">Stash 正在整理当前目录下的静态前端应用，让每次预览都从一个清爽入口开始。</p>
|
||||
</div>
|
||||
|
||||
<section class="overview-card" aria-label="工作区概览">
|
||||
<div class="overview-label">项目概览</div>
|
||||
<div class="project-total">
|
||||
<strong data-project-count>{{ projects.len() }}</strong>
|
||||
<span>个应用</span>
|
||||
</div>
|
||||
<div class="service-status">
|
||||
<span class="status-dot"></span>
|
||||
<span>本地服务运行中</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="sidebar-actions">
|
||||
<button class="refresh-button js-only" id="refresh-projects" type="button" aria-label="重新扫描项目">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5"></path>
|
||||
<path d="M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5"></path>
|
||||
</svg>
|
||||
<span>重新扫描</span>
|
||||
</button>
|
||||
<p class="sidebar-hint">目录变化会自动同步，也可以手动重新扫描。</p>
|
||||
</div>
|
||||
|
||||
<footer class="sidebar-footer">
|
||||
<span>STATIC HOSTING</span>
|
||||
<span class="footer-ready"><i></i>READY</span>
|
||||
</footer>
|
||||
</aside>
|
||||
|
||||
<main class="content">
|
||||
<header class="content-header">
|
||||
<div class="content-heading">
|
||||
<p class="eyebrow">PROJECT LIBRARY</p>
|
||||
<h2>本地应用</h2>
|
||||
<p>一个入口，快速抵达每个正在开发或预览的页面。</p>
|
||||
</div>
|
||||
<div class="content-meta">
|
||||
<span class="live-pill" id="live-status"><i></i><span id="live-status-label">服务在线</span></span>
|
||||
<span class="count-pill"><strong data-project-count>{{ projects.len() }}</strong> 个项目</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="site-grid" id="project-grid" aria-live="polite">
|
||||
{% if projects.is_empty() %}
|
||||
<div class="empty-state">
|
||||
<span class="empty-visual" aria-hidden="true">
|
||||
<svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>
|
||||
<path d="M8 13h8M8 16h5"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<h3>这里还没有项目</h3>
|
||||
<p>在托管根目录下创建子目录，并放入 <code>index.html</code>，刷新后即可在这里看到它。</p>
|
||||
</div>
|
||||
{% else %}
|
||||
{% for project in projects %}
|
||||
<a class="site-item" href="{{ project.route_path }}" title="{{ project.name }}">
|
||||
<div class="site-card-top">
|
||||
<span class="site-avatar" aria-hidden="true">{{ project.initial() }}</span>
|
||||
<span class="site-open" aria-hidden="true">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M7 17 17 7M8 7h9v9"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="site-info">
|
||||
<h3 class="site-name">{{ project.name }}</h3>
|
||||
<span class="site-desc">本地静态应用</span>
|
||||
</div>
|
||||
<div class="site-card-footer">
|
||||
<span class="site-path">{{ project.route_path }}</span>
|
||||
<span class="site-ready">READY</span>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</section>
|
||||
<p class="refresh-status" id="refresh-status" role="status" aria-live="polite"></p>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,499 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,920 +0,0 @@
|
||||
<!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
@@ -1,741 +0,0 @@
|
||||
<!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>
|
||||
:root {
|
||||
--bg-color: #f7f9fb;
|
||||
--card-bg: #ffffff;
|
||||
--primary-color: #3b82f6;
|
||||
--text-main: #1e293b;
|
||||
--text-sub: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
--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);
|
||||
|
||||
--sidebar-width: 240px;
|
||||
--top-nav-height: 60px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 1. 锁死大窗口，禁止全局滚动 */
|
||||
html, body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* 通用卡片容器 */
|
||||
.card-box {
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-main);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* 2. 顶部直角导航栏 */
|
||||
.top-header-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: var(--top-nav-height);
|
||||
background-color: var(--card-bg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-radius: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
color: #0f172a;
|
||||
text-decoration: none;
|
||||
width: 180px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ticker-wrapper {
|
||||
flex: 1;
|
||||
max-width: 550px;
|
||||
height: 36px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
|
||||
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
|
||||
}
|
||||
|
||||
.ticker-content {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
white-space: nowrap;
|
||||
animation: ticker 18s linear infinite;
|
||||
}
|
||||
|
||||
.ticker-wrapper:hover .ticker-content {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.ticker-item {
|
||||
font-size: 13.5px;
|
||||
color: var(--text-sub);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ticker-tag {
|
||||
background-color: #eff6ff;
|
||||
color: var(--primary-color);
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@keyframes ticker {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #475569;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.action-btn svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
stroke-width: 2;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* ---------------- 搜索框：全局固定且全屏水平居中 ---------------- */
|
||||
.search-row {
|
||||
position: fixed;
|
||||
top: 76px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
width: 480px;
|
||||
height: 44px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.engine-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-sub);
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.engine-btn:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.engine-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke-width: 2;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
font-size: 13.5px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* ---------------- 3. 双列核心网格 ---------------- */
|
||||
.layout-grid {
|
||||
margin-top: var(--top-nav-height);
|
||||
height: calc(100vh - var(--top-nav-height));
|
||||
padding: 36px 24px 0 20px;
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) 1fr;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 68px;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding-top: 52px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
height: 52px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
background-color: #eff6ff;
|
||||
color: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.user-desc {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-sub);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.nav-card {
|
||||
padding: 8px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-item-wrapper {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 9px 12px;
|
||||
color: var(--text-sub);
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link.active {
|
||||
background-color: #eff6ff;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 13px;
|
||||
transition: transform 0.3s;
|
||||
color: #94a3b8;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-item-wrapper.open > .nav-link .arrow-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
list-style: none;
|
||||
padding-left: 12px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
|
||||
}
|
||||
|
||||
.nav-item-wrapper.open .sub-menu {
|
||||
max-height: 500px;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.sub-menu .nav-link {
|
||||
padding: 7px 12.5px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.submit-card {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 9px 12px;
|
||||
color: var(--text-sub);
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background-color: #eff6ff;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* 4. 右侧独立滚动区域 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 22px, black 100%);
|
||||
mask-image: linear-gradient(to bottom, transparent 0px, black 22px, black 100%);
|
||||
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.main-content::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.section-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
background-color: var(--primary-color);
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
box-shadow: var(--shadow-card);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background-color: #f1f5f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-sub);
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #e2e8f0;
|
||||
border-radius: 50%;
|
||||
color: #1e293b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-card);
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
background-color: #cbd5e1;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.back-to-top svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2.5;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 顶栏 -->
|
||||
<header class="top-header-bar">
|
||||
<a href="#" class="site-logo">
|
||||
<div class="logo-icon">S</div>
|
||||
<span>SUXING</span>
|
||||
</a>
|
||||
|
||||
<div class="ticker-wrapper">
|
||||
<div class="ticker-content">
|
||||
<a href="#" class="ticker-item"><span class="ticker-tag">公告</span> 欢迎使用最新版个人导航站！</a>
|
||||
<a href="#" class="ticker-item"><span class="ticker-tag">更新</span> WordPress 主题升级至 v3.2 版本</a>
|
||||
<a href="#" class="ticker-item"><span class="ticker-tag">推荐</span> 常用前端工具箱已更新资源</a>
|
||||
<a href="#" class="ticker-item"><span class="ticker-tag">公告</span> 欢迎使用最新版个人导航站！</a>
|
||||
<a href="#" class="ticker-item"><span class="ticker-tag">更新</span> WordPress 主题升级至 v3.2 版本</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-actions">
|
||||
<button class="action-btn" title="暗黑模式">
|
||||
<svg viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||
</button>
|
||||
<button class="action-btn" title="快捷方式">
|
||||
<svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
|
||||
</button>
|
||||
<button class="action-btn" title="全局搜索">
|
||||
<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 搜索框独立置于全屏水平居中位置 -->
|
||||
<div class="search-row">
|
||||
<div class="search-bar card-box">
|
||||
<button class="engine-btn" title="切换搜索引擎">
|
||||
<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
</button>
|
||||
<input type="text" class="search-input" placeholder="输入关键字搜索全网资源...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主布局网格 -->
|
||||
<div class="layout-grid">
|
||||
|
||||
<!-- 左侧固定边栏 -->
|
||||
<div class="left-column">
|
||||
<div class="user-card card-box">
|
||||
<div class="avatar">S</div>
|
||||
<div>
|
||||
<div class="user-name">Suxing Admin</div>
|
||||
<div class="user-desc">个人导航站</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-card card-box">
|
||||
<ul class="nav-group">
|
||||
<li class="nav-item-wrapper">
|
||||
<a href="#common" class="nav-link active">
|
||||
<span>常用推荐</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item-wrapper">
|
||||
<div class="nav-link has-sub">
|
||||
<span>素材资源</span>
|
||||
<span class="arrow-icon">›</span>
|
||||
</div>
|
||||
<ul class="sub-menu">
|
||||
<li><a href="#design" class="nav-link"><span>UI 设计资源</span></a></li>
|
||||
<li><a href="#icon" class="nav-link"><span>矢量图标</span></a></li>
|
||||
<li><a href="#photo" class="nav-link"><span>免费壁纸</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item-wrapper">
|
||||
<div class="nav-link has-sub">
|
||||
<span>开发工具</span>
|
||||
<span class="arrow-icon">›</span>
|
||||
</div>
|
||||
<ul class="sub-menu">
|
||||
<li><a href="#dev" class="nav-link"><span>前端调试工具</span></a></li>
|
||||
<li><a href="#code" class="nav-link"><span>在线编辑器</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="submit-card card-box">
|
||||
<a href="#submit" class="submit-btn">提交网站</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧区域 -->
|
||||
<div class="right-column">
|
||||
<!-- 右侧独立滚动内容 -->
|
||||
<main class="main-content" id="scrollContainer">
|
||||
<div id="common" class="section-group">
|
||||
<div class="section-title">常用推荐</div>
|
||||
<div class="grid">
|
||||
<a href="#" class="card">
|
||||
<div class="card-icon">G</div>
|
||||
<div>
|
||||
<div class="card-title">GitHub</div>
|
||||
<div class="card-desc">代码托管与开源社区</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="card">
|
||||
<div class="card-icon">Z</div>
|
||||
<div>
|
||||
<div class="card-title">知乎</div>
|
||||
<div class="card-desc">深度内容问答社区</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="card">
|
||||
<div class="card-icon">B</div>
|
||||
<div>
|
||||
<div class="card-title">哔哩哔哩</div>
|
||||
<div class="card-desc">弹幕视频分享网站</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="card">
|
||||
<div class="card-icon">V</div>
|
||||
<div>
|
||||
<div class="card-title">V2EX</div>
|
||||
<div class="card-desc">创意工作者讨论社区</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dev" class="section-group">
|
||||
<div class="section-title">前端调试工具 (开发工具)</div>
|
||||
<div class="grid">
|
||||
<a href="#" class="card">
|
||||
<div class="card-icon">S</div>
|
||||
<div>
|
||||
<div class="card-title">Stack Overflow</div>
|
||||
<div class="card-desc">程序员技术问答</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="card">
|
||||
<div class="card-icon">J</div>
|
||||
<div>
|
||||
<div class="card-title">掘金</div>
|
||||
<div class="card-desc">开发者技术社区</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="code" class="section-group">
|
||||
<div class="section-title">在线编辑器</div>
|
||||
<div class="grid">
|
||||
<a href="#" class="card">
|
||||
<div class="card-icon">C</div>
|
||||
<div>
|
||||
<div class="card-title">CodePen</div>
|
||||
<div class="card-desc">前端在线代码演练场</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="design" class="section-group">
|
||||
<div class="section-title">UI 设计资源</div>
|
||||
<div class="grid">
|
||||
<a href="#" class="card">
|
||||
<div class="card-icon">D</div>
|
||||
<div>
|
||||
<div class="card-title">Dribbble</div>
|
||||
<div class="card-desc">全球设计作品分享社区</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 回到顶部按钮 -->
|
||||
<a href="javascript:void(0)" class="back-to-top" id="backToTopBtn" title="回到顶部">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<line x1="5" y1="4" x2="19" y2="4"></line>
|
||||
<path d="M12 20V8M6 14l6-6 6 6"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.has-sub').forEach(trigger => {
|
||||
trigger.addEventListener('click', () => {
|
||||
trigger.closest('.nav-item-wrapper').classList.toggle('open');
|
||||
});
|
||||
});
|
||||
|
||||
const scrollContainer = document.getElementById('scrollContainer');
|
||||
const backToTopBtn = document.getElementById('backToTopBtn');
|
||||
|
||||
backToTopBtn.addEventListener('click', () => {
|
||||
scrollContainer.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('a.nav-link[href^="#"]').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
e.preventDefault();
|
||||
|
||||
const containerTop = scrollContainer.getBoundingClientRect().top;
|
||||
const elementTop = targetElement.getBoundingClientRect().top;
|
||||
const currentScroll = scrollContainer.scrollTop;
|
||||
const offsetPosition = currentScroll + (elementTop - containerTop) - 24;
|
||||
|
||||
scrollContainer.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user