韫珠科技内部导航页面

一个简洁明了的内部导航系统，专为老年人友好设计。

功能特点

✅ 使用 JSON 配置文件，易于维护
✅ 分组管理，支持排序
✅ 每个链接支持图标、背景图、简介
✅ 多种样式主题，可随时切换（modern、card、list、minimal、tv）
✅ 大字体、高对比度设计，适合老年人使用
✅ 响应式布局，支持各种屏幕尺寸
✅ 使用 Vue 3 最新框架

项目结构

simple_navigation/
├── src/
│   ├── components/
│   │   └── Navigation.vue    # 导航组件
│   ├── data/
│   │   └── navigation.json   # 导航配置数据
│   ├── App.vue               # 主应用组件
│   ├── main.js               # 入口文件
│   └── style.css             # 全局样式
├── index.html                # HTML 入口
├── package.json              # 项目配置
└── vite.config.js           # Vite 配置

安装和运行

安装依赖：
```
npm install
```
1. 启动开发服务器： bash npm run dev
构建生产版本：
```
npm run build
```
构建完成后，生产文件将输出到 dist 目录。
1. 预览生产版本（本地测试）： bash npm run preview

部署说明

方式一：静态网站托管服务（推荐）

1. Vercel 部署

安装 Vercel CLI：
```
npm i -g vercel
```
1. 在项目根目录执行： bash vercel
按照提示完成部署，或访问 vercel.com 通过网页界面部署。

2. Netlify 部署

安装 Netlify CLI：
```
npm i -g netlify-cli
```
1. 在项目根目录执行： bash netlify deploy --prod
或访问 netlify.com 通过网页界面拖拽 dist 文件夹部署。

3. GitHub Pages 部署

在 vite.config.js 中添加 base 配置：

export default defineConfig({
base: '/your-repo-name/',  // 替换为你的仓库名
plugins: [vue()],
// ...
})

构建项目： bash npm run build

使用 GitHub Actions 自动部署，或手动将 dist 目录内容推送到 gh-pages 分支。

4. 其他静态托管服务

Cloudflare Pages：连接 GitHub 仓库自动部署
阿里云 OSS：上传 dist 目录内容到 OSS 并开启静态网站托管
腾讯云 COS：上传 dist 目录内容到 COS 并开启静态网站托管

方式二：传统 Web 服务器部署

使用 Nginx

构建项目：
```
npm run build
```
1. 将 dist 目录内容复制到 Nginx 网站根目录（如 /usr/share/nginx/html）： bash cp -r dist/* /usr/share/nginx/html/

Nginx 配置示例（/etc/nginx/sites-available/default）：

server {
listen 80;
server_name your-domain.com;
root /usr/share/nginx/html;
index index.html;

location / {
    try_files $uri $uri/ /index.html;
}
}

重启 Nginx： bash sudo systemctl restart nginx

使用 Apache

构建项目：
```
npm run build
```
1. 将 dist 目录内容复制到 Apache 网站根目录（如 /var/www/html）： bash cp -r dist/* /var/www/html/

在网站根目录创建 .htaccess 文件：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

使用 Node.js 简单服务器（开发/测试用）

安装 serve： bash npm i -g serve

构建并启动服务器：
```
npm run build
serve -s dist -l 3000
```
方式三：Docker 部署
1. 在项目根目录创建 Dockerfile： ```dockerfile
  
  构建阶段
  
  FROM node:18-alpine as build WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build
运行阶段

FROM nginx:alpine COPY --from=build /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ```

创建 nginx.conf：

server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;

location / {
    try_files $uri $uri/ /index.html;
}
}

构建并运行 Docker 容器： bash docker build -t navigation-app . docker run -d -p 80:80 navigation-app

部署注意事项

路由配置：如果使用客户端路由，确保服务器配置了回退到 index.html 的规则（见上述 Nginx/Apache 配置）。
环境变量：如果项目需要环境变量，在构建前设置好，或使用各平台的环境变量配置功能。
HTTPS：生产环境建议启用 HTTPS，大多数托管服务都提供免费 SSL 证书。
CDN 加速：对于静态资源，建议使用 CDN 加速访问。
缓存策略：配置适当的缓存策略，提升用户体验。

JSON 配置说明

全局配置

style: 页面样式主题（可选，默认：modern）
- modern: 现代风格 - 渐变背景、大卡片、丰富动画效果
- card: 卡片风格 - 简洁卡片布局、紧凑设计
- list: 列表风格 - 横向列表布局、清晰简洁
- minimal: 极简风格 - 最小化设计、专注内容
- tv: 电视风格 - 顶部标签栏切换分组，下方网格显示应用模块（类似智能电视界面）

分组字段

name: 组名（必填）
sort: 排序值，数字越小越靠前（可选）
icon: 图标地址（可选）
description: 简介（可选）
links: 链接数组（必填）

链接字段

name: 链接名称（必填）
url: 链接地址（必填）
sort: 排序值，数字越小越靠前（可选）
icon: 图标地址（可选）
background: 背景图地址（可选，仅在 modern 样式下生效）
description: 简介（可选）

设计特点

大字体：标题 36-48px，链接名称 24-26px
高对比度：白色卡片配深色文字，清晰易读
大按钮区域：链接卡片最小高度 180-200px，易于点击
简洁布局：清晰的间距和分组，避免信息过载
渐变背景：美观的紫色渐变背景

修改配置

编辑 src/data/navigation.json 文件即可修改导航内容，无需修改代码。

切换样式主题

在 navigation.json 文件的顶部修改 style 字段即可切换不同的页面样式：

{
  "style": "modern",  // 可选值: "modern", "card", "list", "minimal", "tv"
  "groups": [...]
}

样式说明：

modern（现代风格）：适合需要丰富视觉效果和动画的场景
card（卡片风格）：适合需要清晰分类和详细信息的场景
list（列表风格）：适合需要快速浏览和简洁展示的场景
minimal（极简风格）：适合需要最小化干扰、专注内容的场景
tv（电视风格）：适合大屏显示，顶部标签栏切换分组，下方网格展示应用模块

README.md 7.0 KB Geçmiş Ham