快速开始
环境要求
- Node.js >= 18
- npm >= 9 或 pnpm >= 8
- Git
安装
克隆仓库
bash
git clone https://github.com/gitcoffee-os/navbook.git
cd navbook安装依赖
bash
npm install
# 或
pnpm install开发
启动开发服务器
bash
npm run dev
# 或
pnpm dev开发服务器启动后，访问 http://localhost:5174 即可预览。
构建生产版本
bash
npm run build
# 或
pnpm build构建产物将输出到 dist 目录。
项目结构
navbook/
├── public/ # 静态资源
│ ├── favicon.svg # 网站图标
│ └── logo.svg # Logo
├── src/ # 源代码
│ ├── locales/ # 国际化文件
│ │ ├── en/ # 英文
│ │ ├── zh/ # 简体中文
│ │ └── zh-TW/ # 繁体中文
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态管理
│ ├── views/ # 页面视图
│ │ ├── HomeView.vue # 首页
│ │ ├── UrlView.vue # 网址导航
│ │ ├── SocialMediaView.vue # 社交媒体导航
│ │ ├── QRCodeView.vue # 二维码导航
│ │ ├── WechatView.vue # 公众号导航
│ │ ├── BookmarkView.vue # 书签导航
│ │ ├── AIResourceView.vue # AI 导航
│ │ ├── MCPView.vue # MCP 导航
│ │ ├── CLIView.vue # CLI 导航
│ │ ├── SkillView.vue # Skill 导航
│ │ ├── AgentView.vue # Agent 导航
│ │ ├── SettingView.vue # 设置
│ │ └── NotFoundView.vue # 404
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
│ └── vite-env.d.ts # 类型声明
├── index.html # HTML 模板
├── package.json # 项目配置
├── tsconfig.json # TypeScript 配置
└── vite.config.ts # Vite 配置配置说明
基础配置
在项目根目录创建 .env 文件：
env
# 服务端地址
VITE_API_BASE_URL=http://localhost:8080
# 应用名称
VITE_APP_NAME=NavBook主题配置
NavBook 支持明暗主题切换，主题配置位于 src/App.vue 中：
- 亮色主题：主色调
#7c3aed（紫色） - 暗色主题：主色调
#a78bfa（浅紫色） - 自动模式：跟随系统偏好自动切换
国际化配置
NavBook 支持多语言，语言文件位于 src/locales/ 目录：
zh/- 简体中文zh-TW/- 繁体中文en/- 英文
路由说明
| 路径 | 页面 | 说明 |
|---|---|---|
/ | HomeView | 首页 |
/url | UrlView | 网址导航 |
/social | SocialMediaView | 社交媒体导航 |
/qrcode | QRCodeView | 二维码导航 |
/wechat | WechatView | 公众号导航 |
/bookmark | BookmarkView | 书签导航 |
/ai | AIResourceView | AI 导航 |
/mcp | MCPView | MCP 导航 |
/cli | CLIView | CLI 导航 |
/skill | SkillView | Skill 导航 |
/agent | AgentView | Agent 导航 |
/setting | SettingView | 设置 |
常见问题
Q: 如何切换开发环境？
A: 使用 .env.development、.env.production 等文件来配置不同环境。
Q: 如何添加新的导航类型？
A: 在 src/views/ 中创建新的视图组件，并在 src/router/index.ts 中注册路由。
Q: 如何自定义主题？
A: 修改 src/App.vue 中的 CSS 变量和 Ant Design Vue 主题配置。