# dev-ppt

**Repository Path**: xiak/dev-ppt

## Basic Information

- **Project Name**: dev-ppt
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-26
- **Last Updated**: 2026-10-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Showcase · 网页演讲框架

以白色、黑色和浅蓝为主的全屏产品演示，无顶部导航栏。每页只保留主标题、关键信息与大图，适合现场讲解。已放入「拾光 Moment」（Android）和「留白 Flow」（Web）两组可替换的概念样例，共 10 页。

## 本地运行

```bash
npm install
npm run dev
```

默认访问 http://localhost:5173 。`npm run build` 生成静态站点到 `dist/`；`npm run preview` 可预览构建结果。

## 替换产品内容

编辑 `src/data.ts`：

- `presentation`：开场标题、品牌、介绍文案。
- `products`：产品名称、简介、三项特性、项目故事、项目周期、个人角色、技术栈与统计数字。
- `screenshots`：每项设置 `title`、`subtitle`、`label`（简短的界面切换标题）。添加 `image: '/images/your-screen.png'` 即可使用真实截图，图片放进 `public/images/`。Android 默认展示手机示意界面；Web 默认展示大幅浏览器界面。截图可切换、放大，Web 大图会尽量占满演示区域。
- `platform`：`Android` 与 `Web` 均展示二维码、网址和对应体验按钮；Web 章节标记为「在线体验」。
- `downloadUrl`：安卓下载地址或 Web 体验网址。二维码、网址展示、复制链接与体验按钮会自动同步。
- 当前网址为占位示例，正式演讲前请替换 `downloadUrl`。
- `theme`：内置 `moment`（生活记录）和 `flow`（专注）两种界面样例。它只影响默认界面与图标，真实截图不受限制。

向 `products` 数组新增一项，将自动添加「产品介绍 → 项目信息 → 画面一览 → 下载体验」四页，并同步更新目录与页码。

## 演示交互

- 鼠标滚轮：每个滚动手势切换一页，含惯性滚动保护。
- `↓` / `→` / 空格 / `PageDown`：下一页。
- `↑` / `←` / `PageUp`：上一页。
- `Home` / `End`：开场 / 结尾。
- `F`：进入或退出全屏。
- `M`：打开演示目录。
- 页脚提供演示目录、全屏与翻页按钮。
- `?`：查看快捷键；`Esc`：关闭弹窗。
- 点击界面截图：打开大图，可使用左右箭头切换。
- 手机上下滑动：逐页切换。
- 每页都有独立 URL hash，刷新会保留当前页，也可直接分享某一页。

尊重系统「减少动态效果」偏好；弹窗包含焦点约束，非当前幻灯片不会被 Tab 聚焦。

## 图片

内置手机样例使用的两张自然风景图片来自 Unsplash，仅用于样例界面。可直接替换 `public/images/landscape.jpg` 和 `public/images/coast.jpg`。

界面使用 Google Fonts 的 DM Sans 与 Noto Sans SC；网络不可用时回退到系统字体。所有产品内容与二维码均在本地生成。