# sansui_home_page

**Repository Path**: wyq517/sansui_home_page

## Basic Information

- **Project Name**: sansui_home_page
- **Description**: 个人主页/团队介绍/项目介绍等

VUE2项目
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-31
- **Last Updated**: 2024-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# sansui_home_page

#### Description
个人主页/团队介绍/项目介绍等

# 项目详细说明文档

## 目录
- [功能说明](#功能说明)
- [关键组件实现](#关键组件实现)
- [配置文件说明](#配置文件说明)
- [安装与使用指南](#安装与使用指南)

## 功能说明

### 1. 主题系统
- **动态主题切换**
  - 支持浅色/深色主题
  - 可跟随系统设置自动切换
  - 主题切换时的平滑过渡动画
  - 主题配置持久化存储

### 2. 国际化功能
- **多语言支持**
  - 中文/英文切换
  - 语言设置持久化
  - 路由标题自动翻译
  - 动态的语言切换不刷新页面

### 3. 响应式设计
- **多端适配**
  - 移动端自适应布局
  - 桌面端优化显示
  - 平滑的过渡动画
  - 触摸支持

### 4. 导航系统
- **智能导航栏**
  - 滚动时自动显示/隐藏
  - 移动端菜单
  - 路由激活状态显示
  - 平滑滚动效果


## 安装与使用指南

### 环境要求
- Node.js >= 12.x
- npm >= 6.x 或 yarn >= 1.22

### 安装步骤

1. **克隆项目**
bash
git clone https://gitee.com/your-username/sansui_home_page.git
cd sansui_home_page

2. **安装依赖**
bash
npm install
或
yarn install

3. **开发环境运行**
bash
npm run serve
或
yarn serve

4. **生产环境构建**
bash
npm run build
或
yarn build

### 开发指南

#### 添加新的语言
1. 在 `src/i18n/locales` 目录下创建新的语言文件
2. 在 `src/i18n/index.js` 中注册新语言
3. 在语言切换器中添加新语言选项

#### 自定义主题
1. 在 `src/styles/themes` 目录下创建新的主题文件
2. 定义主题变量
3. 在主题切换器中添加新主题选项

#### 添加新页面
1. 在 `src/views` 创建新的页面组件
2. 在 `src/router` 添加路由配置
3. 在导航菜单中添加新的导航项

### 部署说明

#### 静态服务器部署
1. 执行构建命令生成静态文件

bash
npm run build

2. 将 `dist` 目录下的文件部署到服务器

#### Docker 部署
1. 构建 Docker 镜像

bash
docker build -t sansui-homepage .

2. 运行容器

bash
docker run -d -p 80:80 sansui-homepage

## 常见问题

### 1. 主题切换不生效
- 检查 localStorage 中的主题设置
- 确认主题 CSS 变量是否正确加载
- 检查主题切换器组件的实现

### 2. 国际化翻译未显示
- 确认语言文件是否正确加载
- 检查翻译键值是否存在
- 验证 i18n 插件配置

### 3. 移动端适配问题
- 检查媒体查询断点设置
- 确认响应式样式是否正确加载
- 验证移动端菜单组件的实现

## 演示截图：
![输入图片说明](Snipaste_2024-12-31_09-55-49.png)

![输入图片说明](Snipaste_2024-12-31_10-14-58.png)