install.md

README.md

@@ -33,6 +33,8 @@
 </p>
 
 #### 项目介绍
+[官网](http://wlcn.wu-framework.cn/)
+[体验地址](http://demo-wlcn.wu-framework.cn/wlcn/index.html#/login)
 
 wu-lazy-cloud-network
 是一款基于（[wu-framework-parent](https://gitee.com/wujiawei1207537021/wu-framework-parent)）孵化出的项目，内部使用Lazy
@@ -51,6 +53,7 @@ ORM操作数据库，使用环境JDK24 Spring Boot 3.5.0。的网络穿透、渗
 
 [UI](https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network-server-ui)
 
+
 ### 内网穿透
 
 | 模块                                   | 所属层级 | 描述                           | 快照版本                                                                                                                                                                                                                                                                                                           | 发布版本                                                                                                                                                                                                                                                         |
@@ -89,8 +92,8 @@ ORM操作数据库，使用环境JDK24 Spring Boot 3.5.0。的网络穿透、渗
 
 ### 项目结构
 
-| 模块                                                                                                         | 版本                   | 描述                           |
-|------------------------------------------------------------------------------------------------------------|----------------------|------------------------------| 
+| 模块                                                                                                         | 版本          | 描述                           |
+|------------------------------------------------------------------------------------------------------------|-------------|------------------------------| 
 | [wu-lazy-cloud-heartbeat-common](wu-lazy-cloud-heartbeat-common)                                           | 1.3.1-JDK24 | 内网穿透公共模块（声明接口、枚举、常量、适配器、解析器） |
 | [wu-lazy-cloud-heartbeat-client](wu-lazy-cloud-heartbeat-client)                                           | 1.3.1-JDK24 | 客户端（支持二次开发）                  |
 | [wu-lazy-cloud-heartbeat-server](wu-lazy-cloud-heartbeat-server)                                           | 1.3.1-JDK24 | 服务端（支持二次开发）                  |
@@ -99,19 +102,19 @@ ORM操作数据库，使用环境JDK24 Spring Boot 3.5.0。的网络穿透、渗
 
 ### 使用技术
 
-| 框架                                                                                                                                                                          | 版本                   | 描述           |
-|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------|--------------| 
-| spring-boot                                                                                                                                                                 | 3.0.7                | springboot框架 |
+| 框架                                                                                                                                                                          | 版本          | 描述           |
+|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|--------------| 
+| spring-boot                                                                                                                                                                 | 3.0.7       | springboot框架 |
 | [wu-framework-web](https://gitee.com/wujiawei1207537021/wu-framework-parent/tree/master/wu-framework-web)                                                                   | 1.3.1-JDK24 | web容器        |
 | [Lazy -ORM](https://gitee.com/wujiawei1207537021/wu-framework-parent/tree/master/wu-inner-intergration/wu-database-parent)                                                  | 1.3.1-JDK24 | ORM          |
-| mysql-connector-j                                                                                                                                                           | 8.0.33               | mysql驱动      |
+| mysql-connector-j                                                                                                                                                           | 8.0.33      | mysql驱动      |
 | [wu-authorization-server-platform-starter](https://gitee.com/wujiawei1207537021/wu-framework-parent/tree/master/wu-smart-platform/wu-authorization-server-platform-starter) | 1.3.1-JDK24 | 用户授权体系       |
 
 ### 使用环境
 
     IDEA
     Mac、Windows
-    JAVA >=13
+    JAVA >=17
     MAVEN
 
 ### 启动[install.md](install.md)

install.md

@@ -1,4 +1,5 @@
 #### docker环境安装wlcn
+
 ##### 启动服务端
 - 6001端口 webui
 - 7001端口 tcp连接端口
@@ -7,11 +8,13 @@
 - 1001端口 自定义需要代理到客户端端口
 - 打开浏览器访问界面 http://127.0.0.1:6001/netty-server-ui/index.html
 
+
 ```shell
 
 docker run  -d -it -p 6001:6001  -p 7001:7001  -p 8001:8001  -p 9001:9001  --name wlcn-s registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.1-JDK24
 
 ```
+
 ##### 启动客户端
 
 - 6004端口 webui
@@ -25,4 +28,4 @@ docker run  -d -it -p 6001:6001  -p 7001:7001  -p 8001:8001  -p 9001:9001  --nam
 
 ```shell
 docker run -d -it --privileged -p 6004:6004 --name wlcn-c --restart=always -e spring.lazy.netty.client.inet-host=192.168.xx.xx -e spring.lazy.netty.client.inet-port=7001 -e spring.lazy.netty.client.client-id="wlcn-c" registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24
-```
+```

pom.xml

@@ -8,12 +8,12 @@
     <parent>
         <artifactId>wu-framework-parent</artifactId>
         <groupId>top.wu2020</groupId>
-        <version>1.3.2-JDK24</version>
+        <version>1.3.4-JDK24-SNAPSHOT</version>
     </parent>
 
     <artifactId>wu-lazy-cloud-network</artifactId>
     <packaging>pom</packaging>
-    <version>1.3.2-JDK24</version>
+    <version>1.3.4-JDK24-SNAPSHOT</version>
     <description>云上云下</description>
     <name>wlcn项目</name>
     <url>https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network</url>
@@ -93,7 +93,7 @@
             <dependency>
                 <groupId>top.wu2020</groupId>
                 <artifactId>wu-framework-dependencies</artifactId>
-                <version>1.3.2-JDK24</version>
+                <version>1.3.4-JDK24-SNAPSHOT</version>
                 <type>pom</type>
                 <scope>import</scope>
             </dependency>

version.md

@@ -40,8 +40,12 @@
     [add] 新增代理流量监控
     [add] docker仓库上架dockerhub，搜索https://hub.docker.com/search?q=wlcn
 
-#### 1.3.1-JDK24
-    [add] 新增代理流量监控
+#### 1.3.2-JDK24
+    [add] 新增代理请求日志、代理返回日志 通过配置：spring.lazy.netty.protocol.proxy.enableProxyLog=true
     [add] 升级使用jdk24、springboot 3.5.0
-    [add]  添加socks授权验证
+    [add]  添加socks授权验证。通过配置：spring.lazy.netty.protocol.proxy.authentication=true
+
+#### 1.3.3-JDK24
+    [fix] 优化代理日志记录性能影响，支持自定义spring.lazy.netty.protocol.proxy.sendMsgQueue、sendMsgQueue
+    [add] 服务上架dockerhub
 #### 下一版本计划

website/BuildDocker.md

@@ -0,0 +1,12 @@
+### 构建docker镜像
+
+
+```shell
+
+#docker login --username=1207537021@qq.com registry.cn-hangzhou.aliyuncs.com
+
+
+docker build -t registry.cn-hangzhou.aliyuncs.com/wu-lazy/wlcn-website:1.3.1-JDK24 .
+docker push registry.cn-hangzhou.aliyuncs.com/wu-lazy/wlcn-website:1.3.1-JDK24
+
+```

website/Dockerfile

@@ -0,0 +1,2 @@
+FROM registry.cn-hangzhou.aliyuncs.com/wu-library/nginx:1.13.0-alpine
+COPY  dist /usr/share/nginx/html/

website/README.md

@@ -0,0 +1,241 @@
+# Wu-Lazy-Cloud-Network 官方网站
+
+这是 Wu-Lazy-Cloud-Network 项目的官方网站，基于 Vue 3 + Element Plus 构建。
+
+## 🚀 快速开始
+
+### 环境要求
+
+- Node.js 16.0+
+- npm 8.0+ 或 yarn 1.22+
+
+### 安装依赖
+
+```bash
+# 使用 npm
+npm install
+
+# 或使用 yarn
+yarn install
+```
+
+### 开发模式
+
+```bash
+# 启动开发服务器
+npm run dev
+
+# 或使用 yarn
+yarn dev
+```
+
+开发服务器将在 `http://localhost:3000` 启动。
+
+### 构建生产版本
+
+```bash
+# 构建生产版本
+npm run build
+
+# 或使用 yarn
+yarn build
+```
+
+构建文件将输出到 `dist` 目录。
+
+### 预览生产版本
+
+```bash
+# 预览生产版本
+npm run preview
+
+# 或使用 yarn
+yarn preview
+```
+
+## 📁 项目结构
+
+```
+website/
+├── public/                 # 静态资源
+├── src/
+│   ├── assets/            # 资源文件
+│   │   ├── images/        # 图片资源
+│   │   └── styles/        # 样式文件
+│   ├── components/        # 公共组件
+│   │   ├── Header.vue     # 头部导航
+│   │   └── Footer.vue     # 底部组件
+│   ├── router/            # 路由配置
+│   │   └── index.js
+│   ├── stores/            # 状态管理
+│   ├── utils/             # 工具函数
+│   │   └── index.js
+│   ├── views/             # 页面组件
+│   │   ├── Home.vue       # 首页
+│   │   ├── Features.vue   # 功能特性
+│   │   ├── Architecture.vue # 系统架构
+│   │   ├── Docs.vue       # 使用文档
+│   │   ├── Download.vue   # 下载安装
+│   │   └── About.vue      # 关于我们
+│   ├── App.vue            # 根组件
+│   └── main.js            # 入口文件
+├── index.html             # HTML 模板
+├── package.json           # 项目配置
+├── vite.config.js         # Vite 配置
+└── README.md              # 项目说明
+```
+
+## 🎨 页面说明
+
+### 首页 (Home.vue)
+- 项目介绍和核心功能展示
+- 技术栈和快速开始指南
+- 统计数据展示
+
+### 功能特性 (Features.vue)
+- 详细的功能介绍
+- 内网穿透、网络代理、流量监控等功能说明
+- 安全特性展示
+
+### 系统架构 (Architecture.vue)
+- 整体架构图
+- 模块架构说明
+- 数据流架构
+- 技术栈介绍
+
+### 使用文档 (Docs.vue)
+- 快速开始指南
+- 安装部署说明
+- 配置参数详解
+- 使用指南和故障排除
+
+### 下载安装 (Download.vue)
+- 版本信息
+- 多种下载方式
+- 部署指南
+- 系统要求
+
+### 关于我们 (About.vue)
+- 项目背景和核心价值
+- 开发团队介绍
+- 技术栈详情
+- 发展路线图
+- 联系方式
+
+## 🛠️ 技术栈
+
+- **Vue 3**: 渐进式 JavaScript 框架
+- **Vue Router**: 官方路由管理器
+- **Pinia**: 状态管理库
+- **Element Plus**: Vue 3 组件库
+- **Vite**: 下一代前端构建工具
+- **SCSS**: CSS 预处理器
+- **Prism.js**: 代码高亮
+- **Marked**: Markdown 解析器
+
+## 🎯 主要功能
+
+### 响应式设计
+- 支持桌面端和移动端
+- 自适应布局
+- 触摸友好的交互
+
+### 代码高亮
+- 支持多种编程语言
+- 语法高亮显示
+- 复制代码功能
+
+### 性能优化
+- 路由懒加载
+- 组件按需加载
+- 图片懒加载
+- 代码分割
+
+### SEO 友好
+- 语义化 HTML
+- Meta 标签优化
+- 结构化数据
+
+## 🔧 开发指南
+
+### 添加新页面
+
+1. 在 `src/views/` 目录下创建新的 Vue 组件
+2. 在 `src/router/index.js` 中添加路由配置
+3. 在 `src/components/Header.vue` 中添加导航链接
+
+### 添加新组件
+
+1. 在 `src/components/` 目录下创建组件
+2. 在需要使用的页面中导入并使用
+
+### 样式开发
+
+- 使用 SCSS 编写样式
+- 遵循 BEM 命名规范
+- 使用 CSS 变量管理主题色彩
+- 响应式设计使用媒体查询
+
+### 代码规范
+
+- 使用 ESLint 进行代码检查
+- 使用 Prettier 进行代码格式化
+- 遵循 Vue 3 组合式 API 规范
+- 组件命名使用 PascalCase
+- 文件名使用 kebab-case
+
+## 📦 构建部署
+
+### 构建生产版本
+
+```bash
+npm run build
+```
+
+### 部署到静态服务器
+
+构建完成后，将 `dist` 目录的内容部署到 Web 服务器即可。
+
+### Docker 部署
+
+```dockerfile
+# 使用 nginx 镜像
+FROM nginx:alpine
+
+# 复制构建文件
+COPY dist/ /usr/share/nginx/html/
+
+# 复制 nginx 配置
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# 暴露端口
+EXPOSE 80
+
+# 启动 nginx
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+## 🤝 贡献指南
+
+1. Fork 本仓库
+2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 打开 Pull Request
+
+## 📄 许可证
+
+本项目采用 [Apache License 2.0](LICENSE) 许可证。
+
+## 📞 联系我们
+
+- **邮箱**: 1207537021@qq.com
+- **项目地址**: 
+  - [Gitee](https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network)
+  - [GitHub](https://github.com/wujiawei1207537021/wu-lazy-cloud-network)
+
+---
+
+**版本**: 1.0.0  
+**更新时间**: 2024年12月  
+**维护者**: 吴佳伟 

website/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Wu-Lazy-Cloud-Network 是一款基于 Spring Boot 3.5.0 和 JDK 24 开发的高性能网络穿透和代理工具，支持 TCP、HTTP、SOCKS 协议。" />
+    <meta name="keywords" content="内网穿透,网络代理,Spring Boot,Netty,Vue3" />
+    <meta name="author" content="吴佳伟" />
+    <title>Wu-Lazy-Cloud-Network - 高性能网络穿透和代理工具</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html> 

website/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "wu-lazy-cloud-network-website",
+  "version": "1.3.1",
+  "description": "Wu-Lazy-Cloud-Network 官方网站",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "@vueuse/core": "^10.7.0",
+    "element-plus": "^2.4.4",
+    "marked": "^9.1.6",
+    "pinia": "^2.1.7",
+    "prismjs": "^1.29.0",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.19.2",
+    "prettier": "^3.1.1",
+    "sass": "^1.69.5",
+    "vite": "^5.0.8",
+    "vite-plugin-compression": "^0.5.1"
+  },
+  "keywords": [
+    "vue3",
+    "vite",
+    "element-plus",
+    "wu-lazy-cloud-network",
+    "内网穿透",
+    "网络代理"
+  ],
+  "author": "吴佳伟 <1207537021@qq.com>",
+  "license": "Apache-2.0"
+}

website/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="#409eff"/><path d="M8 16l6 6 10-10" stroke="white" stroke-width="2" fill="none"/></svg>

website/src/App.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+onMounted(() => {
+  // 页面加载完成后的初始化逻辑
+  console.log('Wu-Lazy-Cloud-Network 官网已加载')
+})
+</script>
+
+<style lang="scss">
+#app {
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  margin: 0;
+  padding: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style> 

website/src/assets/styles/components.scss

@@ -0,0 +1,417 @@
+// 组件样式
+
+// 按钮样式
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  
+  &:hover {
+    transform: translateY(-1px);
+  }
+  
+  &.btn-primary {
+    background: var(--primary-color);
+    color: white;
+    
+    &:hover {
+      background: #337ecc;
+      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
+    }
+  }
+  
+  &.btn-outline {
+    background: transparent;
+    color: var(--primary-color);
+    border: 2px solid var(--primary-color);
+    
+    &:hover {
+      background: var(--primary-color);
+      color: white;
+    }
+  }
+  
+  &.btn-large {
+    padding: 16px 32px;
+    font-size: 16px;
+  }
+  
+  &.btn-small {
+    padding: 8px 16px;
+    font-size: 12px;
+  }
+}
+
+// 卡片样式
+.card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: var(--shadow-light);
+  transition: all 0.3s ease;
+  
+  &.card-hover {
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: var(--shadow-dark);
+    }
+  }
+}
+
+// 代码块样式
+.code-block {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 16px 0;
+  overflow-x: auto;
+  
+  pre {
+    margin: 0;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    
+    code {
+      background: none;
+      padding: 0;
+      border-radius: 0;
+      font-size: inherit;
+    }
+  }
+}
+
+// 容器样式
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  
+  @media (max-width: 768px) {
+    padding: 0 16px;
+  }
+}
+
+// 网格布局
+.grid {
+  display: grid;
+  gap: 20px;
+  
+  &.grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+    
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+    }
+  }
+  
+  &.grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+    
+    @media (max-width: 1024px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+    }
+  }
+  
+  &.grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+    
+    @media (max-width: 1024px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+// 弹性布局
+.flex {
+  display: flex;
+  
+  &.flex-center {
+    align-items: center;
+    justify-content: center;
+  }
+  
+  &.flex-between {
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  &.flex-column {
+    flex-direction: column;
+  }
+  
+  &.flex-wrap {
+    flex-wrap: wrap;
+  }
+  
+  &.flex-1 {
+    flex: 1;
+  }
+}
+
+// 间距工具类
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: 8px; }
+.mt-2 { margin-top: 16px; }
+.mt-3 { margin-top: 24px; }
+.mt-4 { margin-top: 32px; }
+.mt-5 { margin-top: 40px; }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: 8px; }
+.mb-2 { margin-bottom: 16px; }
+.mb-3 { margin-bottom: 24px; }
+.mb-4 { margin-bottom: 32px; }
+.mb-5 { margin-bottom: 40px; }
+
+.ml-0 { margin-left: 0; }
+.ml-1 { margin-left: 8px; }
+.ml-2 { margin-left: 16px; }
+.ml-3 { margin-left: 24px; }
+.ml-4 { margin-left: 32px; }
+.ml-5 { margin-left: 40px; }
+
+.mr-0 { margin-right: 0; }
+.mr-1 { margin-right: 8px; }
+.mr-2 { margin-right: 16px; }
+.mr-3 { margin-right: 24px; }
+.mr-4 { margin-right: 32px; }
+.mr-5 { margin-right: 40px; }
+
+.pt-0 { padding-top: 0; }
+.pt-1 { padding-top: 8px; }
+.pt-2 { padding-top: 16px; }
+.pt-3 { padding-top: 24px; }
+.pt-4 { padding-top: 32px; }
+.pt-5 { padding-top: 40px; }
+
+.pb-0 { padding-bottom: 0; }
+.pb-1 { padding-bottom: 8px; }
+.pb-2 { padding-bottom: 16px; }
+.pb-3 { padding-bottom: 24px; }
+.pb-4 { padding-bottom: 32px; }
+.pb-5 { padding-bottom: 40px; }
+
+.pl-0 { padding-left: 0; }
+.pl-1 { padding-left: 8px; }
+.pl-2 { padding-left: 16px; }
+.pl-3 { padding-left: 24px; }
+.pl-4 { padding-left: 32px; }
+.pl-5 { padding-left: 40px; }
+
+.pr-0 { padding-right: 0; }
+.pr-1 { padding-right: 8px; }
+.pr-2 { padding-right: 16px; }
+.pr-3 { padding-right: 24px; }
+.pr-4 { padding-right: 32px; }
+.pr-5 { padding-right: 40px; }
+
+// 文本工具类
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.text-primary { color: var(--text-primary); }
+.text-regular { color: var(--text-regular); }
+.text-secondary { color: var(--text-secondary); }
+.text-placeholder { color: var(--text-placeholder); }
+
+.text-success { color: var(--success-color); }
+.text-warning { color: var(--warning-color); }
+.text-danger { color: var(--danger-color); }
+.text-info { color: var(--info-color); }
+
+.font-bold { font-weight: bold; }
+.font-normal { font-weight: normal; }
+.font-light { font-weight: 300; }
+
+.text-sm { font-size: 12px; }
+.text-base { font-size: 14px; }
+.text-lg { font-size: 16px; }
+.text-xl { font-size: 18px; }
+.text-2xl { font-size: 20px; }
+.text-3xl { font-size: 24px; }
+.text-4xl { font-size: 28px; }
+
+// 显示工具类
+.d-none { display: none; }
+.d-block { display: block; }
+.d-inline { display: inline; }
+.d-inline-block { display: inline-block; }
+.d-flex { display: flex; }
+.d-grid { display: grid; }
+
+// 响应式工具类
+@media (max-width: 768px) {
+  .d-md-none { display: none; }
+  .d-md-block { display: block; }
+  .d-md-flex { display: flex; }
+  .d-md-grid { display: grid; }
+}
+
+@media (max-width: 1024px) {
+  .d-lg-none { display: none; }
+  .d-lg-block { display: block; }
+  .d-lg-flex { display: flex; }
+  .d-lg-grid { display: grid; }
+}
+
+// 动画工具类
+.fade-in {
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+.slide-up {
+  animation: slideUp 0.5s ease-out;
+}
+
+.slide-down {
+  animation: slideDown 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// 加载动画
+.loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// 徽章样式
+.badge {
+  display: inline-block;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+  text-align: center;
+  
+  &.badge-primary {
+    background: var(--primary-color);
+    color: white;
+  }
+  
+  &.badge-success {
+    background: var(--success-color);
+    color: white;
+  }
+  
+  &.badge-warning {
+    background: var(--warning-color);
+    color: white;
+  }
+  
+  &.badge-danger {
+    background: var(--danger-color);
+    color: white;
+  }
+  
+  &.badge-info {
+    background: var(--info-color);
+    color: white;
+  }
+}
+
+// 标签样式
+.tag {
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 16px;
+  background: var(--background-light);
+  color: var(--text-regular);
+  margin: 2px;
+  
+  &:hover {
+    background: var(--primary-color);
+    color: white;
+  }
+}
+
+// 分割线
+.divider {
+  height: 1px;
+  background: var(--border-light);
+  margin: 20px 0;
+}
+
+// 空状态
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--text-secondary);
+  
+  .empty-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+  
+  .empty-title {
+    font-size: 18px;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+  
+  .empty-description {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+} 

website/src/assets/styles/index.scss

@@ -0,0 +1,232 @@
+// 引入组件样式
+//@import './components.scss';
+
+// 全局样式变量
+:root {
+  --primary-color: #409eff;
+  --success-color: #67c23a;
+  --warning-color: #e6a23c;
+  --danger-color: #f56c6c;
+  --info-color: #909399;
+  
+  --text-primary: #303133;
+  --text-regular: #606266;
+  --text-secondary: #909399;
+  --text-placeholder: #c0c4cc;
+  
+  --border-color: #dcdfe6;
+  --border-light: #e4e7ed;
+  --border-lighter: #ebeef5;
+  --border-extra-light: #f2f6fc;
+  
+  --background-color: #ffffff;
+  --background-light: #f5f7fa;
+  
+  --shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  --shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+}
+
+// 全局样式
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--text-primary);
+  background-color: var(--background-color);
+}
+
+// 通用工具类
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+// 按钮样式
+.btn {
+  display: inline-block;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  
+  &.btn-primary {
+    background-color: var(--primary-color);
+    color: white;
+    
+    &:hover {
+      background-color: #66b1ff;
+    }
+  }
+  
+  &.btn-outline {
+    background-color: transparent;
+    border: 2px solid var(--primary-color);
+    color: var(--primary-color);
+    
+    &:hover {
+      background-color: var(--primary-color);
+      color: white;
+    }
+  }
+  
+  &.btn-large {
+    padding: 16px 32px;
+    font-size: 16px;
+  }
+}
+
+// 卡片样式
+.card {
+  background: white;
+  border-radius: 8px;
+  box-shadow: var(--shadow-light);
+  padding: 24px;
+  margin-bottom: 20px;
+  
+  &.card-hover {
+    transition: all 0.3s ease;
+    
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: var(--shadow-dark);
+    }
+  }
+}
+
+// 标题样式
+.title {
+  font-weight: 600;
+  margin-bottom: 16px;
+  
+  &.title-large {
+    font-size: 32px;
+    line-height: 1.2;
+  }
+  
+  &.title-medium {
+    font-size: 24px;
+    line-height: 1.3;
+  }
+  
+  &.title-small {
+    font-size: 18px;
+    line-height: 1.4;
+  }
+}
+
+// 段落样式
+.paragraph {
+  line-height: 1.6;
+  color: var(--text-regular);
+  margin-bottom: 16px;
+}
+
+// 代码块样式
+.code-block {
+  background-color: #f6f8fa;
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  padding: 16px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-x: auto;
+  
+  &.code-block-dark {
+    background-color: #2d3748;
+    color: #e2e8f0;
+    border-color: #4a5568;
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .container {
+    padding: 0 16px;
+  }
+  
+  .title-large {
+    font-size: 24px !important;
+  }
+  
+  .title-medium {
+    font-size: 20px !important;
+  }
+  
+  .btn-large {
+    padding: 12px 24px !important;
+    font-size: 14px !important;
+  }
+}
+
+// 动画效果
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-up-enter-from {
+  transform: translateY(30px);
+  opacity: 0;
+}
+
+.slide-up-leave-to {
+  transform: translateY(-30px);
+  opacity: 0;
+} 

website/src/components/Footer.vue

@@ -0,0 +1,189 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h3 class="footer-title">Wu-Lazy-Cloud-Network</h3>
+          <p class="footer-description">
+            基于 Spring Boot 3.5.0 和 JDK 24 开发的高性能网络穿透和代理工具，
+            支持 TCP、HTTP、SOCKS 协议，提供完整的内网穿透、网络代理、流量监控等功能。
+          </p>
+          <div class="footer-social">
+            <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="social-link">
+              <el-icon><Platform /></el-icon>
+            </a>
+            <a href="https://github.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="social-link">
+              <el-icon><Platform /></el-icon>
+            </a>
+            <a href="mailto:1207537021@qq.com" class="social-link">
+              <el-icon><Message /></el-icon>
+            </a>
+          </div>
+        </div>
+        
+        <div class="footer-section">
+          <h4 class="footer-subtitle">功能特性</h4>
+          <ul class="footer-links">
+            <li><router-link to="/features#penetration">内网穿透</router-link></li>
+            <li><router-link to="/features#proxy">网络代理</router-link></li>
+            <li><router-link to="/features#monitor">流量监控</router-link></li>
+            <li><router-link to="/features#route">路由管理</router-link></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h4 class="footer-subtitle">技术文档</h4>
+          <ul class="footer-links">
+            <li><router-link to="/docs">使用文档</router-link></li>
+            <li><router-link to="/architecture">系统架构</router-link></li>
+            <li><router-link to="/download">下载安装</router-link></li>
+            <li><a href="https://gitee.com/wujiawei1207537021/wu-framework-parent" target="_blank">Lazy ORM</a></li>
+          </ul>
+        </div>
+        
+        <div class="footer-section">
+          <h4 class="footer-subtitle">技术支持</h4>
+          <ul class="footer-links">
+            <li><a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network/issues" target="_blank">问题反馈</a></li>
+            <li><a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network/pulls" target="_blank">贡献代码</a></li>
+            <li><a href="mailto:1207537021@qq.com">联系我们</a></li>
+            <li><router-link to="/about">关于我们</router-link></li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <div class="footer-copyright">
+          <p>&copy; 2024 Wu-Lazy-Cloud-Network. All rights reserved.</p>
+          <p>由 <a href="mailto:1207537021@qq.com">吴佳伟</a> 开发和维护</p>
+        </div>
+        <div class="footer-license">
+          <p>基于 <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License 2.0</a> 开源协议</p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import { Platform, Message } from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  background: var(--background-light);
+  border-top: 1px solid var(--border-light);
+  padding: 60px 0 20px;
+  margin-top: 80px;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 40px;
+  margin-bottom: 40px;
+  
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+}
+
+.footer-section {
+  .footer-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+  }
+  
+  .footer-description {
+    color: var(--text-regular);
+    line-height: 1.6;
+    margin-bottom: 20px;
+  }
+  
+  .footer-subtitle {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+  }
+}
+
+.footer-social {
+  display: flex;
+  gap: 12px;
+  
+  .social-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 6px;
+    background: white;
+    color: var(--text-regular);
+    text-decoration: none;
+    transition: all 0.3s ease;
+    border: 1px solid var(--border-light);
+    
+    &:hover {
+      color: var(--primary-color);
+      border-color: var(--primary-color);
+      transform: translateY(-2px);
+    }
+    
+    .el-icon {
+      font-size: 18px;
+    }
+  }
+}
+
+.footer-links {
+  list-style: none;
+  
+  li {
+    margin-bottom: 8px;
+    
+    a {
+      color: var(--text-regular);
+      text-decoration: none;
+      transition: color 0.3s ease;
+      
+      &:hover {
+        color: var(--primary-color);
+      }
+    }
+  }
+}
+
+.footer-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 20px;
+  border-top: 1px solid var(--border-light);
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+  }
+  
+  p {
+    color: var(--text-secondary);
+    font-size: 14px;
+    margin: 0;
+    
+    a {
+      color: var(--primary-color);
+      text-decoration: none;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style> 

website/src/components/Header.vue

@@ -0,0 +1,215 @@
+<template>
+  <header class="header" :class="{ 'header-scrolled': isScrolled }">
+    <div class="container">
+      <div class="header-content">
+        <div class="logo">
+          <router-link to="/" class="logo-link">
+            <el-icon class="logo-icon"><Connection /></el-icon>
+            <span class="logo-text">Wu-Lazy-Cloud-Network</span>
+          </router-link>
+        </div>
+        
+        <nav class="nav" :class="{ 'nav-mobile': isMobileMenuOpen }">
+          <router-link to="/" class="nav-link" @click="closeMobileMenu">首页</router-link>
+          <router-link to="/features" class="nav-link" @click="closeMobileMenu">功能特性</router-link>
+          <router-link to="/architecture" class="nav-link" @click="closeMobileMenu">系统架构</router-link>
+          <router-link to="/docs" class="nav-link" @click="closeMobileMenu">使用文档</router-link>
+          <router-link to="/download" class="nav-link" @click="closeMobileMenu">下载安装</router-link>
+          <router-link to="/about" class="nav-link" @click="closeMobileMenu">关于我们</router-link>
+        </nav>
+        
+        <div class="header-actions">
+          <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="btn btn-outline">
+            <el-icon><Platform /></el-icon>
+            Gitee
+          </a>
+          <a href="https://github.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="btn btn-outline">
+            <el-icon><Platform /></el-icon>
+            GitHub
+          </a>
+        </div>
+        
+        <div class="mobile-menu-toggle" @click="toggleMobileMenu">
+          <el-icon><Menu /></el-icon>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { Connection, Platform, Menu } from '@element-plus/icons-vue'
+
+const isScrolled = ref(false)
+const isMobileMenuOpen = ref(false)
+
+const handleScroll = () => {
+  isScrolled.value = window.scrollY > 50
+}
+
+const toggleMobileMenu = () => {
+  isMobileMenuOpen.value = !isMobileMenuOpen.value
+}
+
+const closeMobileMenu = () => {
+  isMobileMenuOpen.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style lang="scss" scoped>
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border-light);
+  transition: all 0.3s ease;
+  
+  &.header-scrolled {
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: var(--shadow-light);
+  }
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 70px;
+}
+
+.logo {
+  .logo-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: var(--text-primary);
+    font-weight: 600;
+    font-size: 18px;
+    
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+  
+  .logo-icon {
+    font-size: 24px;
+    color: var(--primary-color);
+    margin-right: 8px;
+  }
+  
+  .logo-text {
+    @media (max-width: 768px) {
+      display: none;
+    }
+  }
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  
+  .nav-link {
+    text-decoration: none;
+    color: var(--text-regular);
+    font-weight: 500;
+    transition: color 0.3s ease;
+    position: relative;
+    
+    &:hover,
+    &.router-link-active {
+      color: var(--primary-color);
+    }
+    
+    &.router-link-active::after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: var(--primary-color);
+      border-radius: 1px;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    position: fixed;
+    top: 70px;
+    left: 0;
+    right: 0;
+    background: white;
+    flex-direction: column;
+    padding: 20px;
+    gap: 16px;
+    border-bottom: 1px solid var(--border-light);
+    transform: translateY(-100%);
+    opacity: 0;
+    transition: all 0.3s ease;
+    
+    &.nav-mobile {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  
+  .btn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 16px;
+    font-size: 14px;
+    
+    .el-icon {
+      font-size: 16px;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    display: none;
+  }
+}
+
+.mobile-menu-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.3s ease;
+  
+  &:hover {
+    background-color: var(--background-light);
+  }
+  
+  .el-icon {
+    font-size: 20px;
+    color: var(--text-regular);
+  }
+  
+  @media (max-width: 768px) {
+    display: flex;
+  }
+}
+</style> 

website/src/main.js

@@ -0,0 +1,22 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import 'element-plus/dist/index.css'
+
+import App from './App.vue'
+import router from './router'
+import './assets/styles/index.scss'
+
+const app = createApp(App)
+
+// 注册 Element Plus 图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(createPinia())
+app.use(router)
+app.use(ElementPlus)
+
+app.mount('#app') 

website/src/router/index.js

@@ -0,0 +1,63 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('@/views/Home.vue'),
+    meta: { title: '首页' }
+  },
+  {
+    path: '/features',
+    name: 'Features',
+    component: () => import('@/views/Features.vue'),
+    meta: { title: '功能特性' }
+  },
+  {
+    path: '/architecture',
+    name: 'Architecture',
+    component: () => import('@/views/Architecture.vue'),
+    meta: { title: '系统架构' }
+  },
+  {
+    path: '/docs',
+    name: 'Docs',
+    component: () => import('@/views/Docs.vue'),
+    meta: { title: '使用文档' }
+  },
+  {
+    path: '/download',
+    name: 'Download',
+    component: () => import('@/views/Download.vue'),
+    meta: { title: '下载安装' }
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: () => import('@/views/About.vue'),
+    meta: { title: '关于我们' }
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0 }
+    }
+  }
+})
+
+// 路由守卫
+router.beforeEach((to, from, next) => {
+  // 设置页面标题
+  if (to.meta.title) {
+    document.title = `${to.meta.title} - Wu-Lazy-Cloud-Network`
+  }
+  next()
+})
+
+export default router 

website/src/utils/index.js

@@ -0,0 +1,227 @@
+// 工具函数集合
+
+/**
+ * 格式化文件大小
+ * @param {number} bytes 字节数
+ * @returns {string} 格式化后的文件大小
+ */
+export function formatFileSize(bytes) {
+  if (bytes === 0) return '0 B'
+  
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+/**
+ * 格式化时间
+ * @param {Date|string|number} date 日期
+ * @returns {string} 格式化后的时间
+ */
+export function formatDate(date) {
+  const d = new Date(date)
+  return d.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+/**
+ * 防抖函数
+ * @param {Function} func 要防抖的函数
+ * @param {number} wait 等待时间
+ * @returns {Function} 防抖后的函数
+ */
+export function debounce(func, wait) {
+  let timeout
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout)
+      func(...args)
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
+}
+
+/**
+ * 节流函数
+ * @param {Function} func 要节流的函数
+ * @param {number} limit 限制时间
+ * @returns {Function} 节流后的函数
+ */
+export function throttle(func, limit) {
+  let inThrottle
+  return function() {
+    const args = arguments
+    const context = this
+    if (!inThrottle) {
+      func.apply(context, args)
+      inThrottle = true
+      setTimeout(() => inThrottle = false, limit)
+    }
+  }
+}
+
+/**
+ * 复制文本到剪贴板
+ * @param {string} text 要复制的文本
+ * @returns {Promise<boolean>} 是否复制成功
+ */
+export async function copyToClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch (err) {
+    // 降级方案
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    document.body.appendChild(textArea)
+    textArea.focus()
+    textArea.select()
+    try {
+      document.execCommand('copy')
+      document.body.removeChild(textArea)
+      return true
+    } catch (err) {
+      document.body.removeChild(textArea)
+      return false
+    }
+  }
+}
+
+/**
+ * 生成随机ID
+ * @param {number} length ID长度
+ * @returns {string} 随机ID
+ */
+export function generateId(length = 8) {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let result = ''
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return result
+}
+
+/**
+ * 检查是否为移动设备
+ * @returns {boolean} 是否为移动设备
+ */
+export function isMobile() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+}
+
+/**
+ * 获取浏览器信息
+ * @returns {object} 浏览器信息
+ */
+export function getBrowserInfo() {
+  const ua = navigator.userAgent
+  let browser = 'Unknown'
+  let version = 'Unknown'
+  
+  if (ua.includes('Chrome')) {
+    browser = 'Chrome'
+    version = ua.match(/Chrome\/(\d+)/)?.[1] || 'Unknown'
+  } else if (ua.includes('Firefox')) {
+    browser = 'Firefox'
+    version = ua.match(/Firefox\/(\d+)/)?.[1] || 'Unknown'
+  } else if (ua.includes('Safari')) {
+    browser = 'Safari'
+    version = ua.match(/Version\/(\d+)/)?.[1] || 'Unknown'
+  } else if (ua.includes('Edge')) {
+    browser = 'Edge'
+    version = ua.match(/Edge\/(\d+)/)?.[1] || 'Unknown'
+  }
+  
+  return { browser, version }
+}
+
+/**
+ * 获取操作系统信息
+ * @returns {string} 操作系统名称
+ */
+export function getOS() {
+  const ua = navigator.userAgent
+  if (ua.includes('Windows')) return 'Windows'
+  if (ua.includes('Mac')) return 'macOS'
+  if (ua.includes('Linux')) return 'Linux'
+  if (ua.includes('Android')) return 'Android'
+  if (ua.includes('iOS')) return 'iOS'
+  return 'Unknown'
+}
+
+/**
+ * 格式化数字
+ * @param {number} num 数字
+ * @param {number} digits 小数位数
+ * @returns {string} 格式化后的数字
+ */
+export function formatNumber(num, digits = 2) {
+  return Number(num).toLocaleString('zh-CN', {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits
+  })
+}
+
+/**
+ * 验证邮箱格式
+ * @param {string} email 邮箱地址
+ * @returns {boolean} 是否为有效邮箱
+ */
+export function isValidEmail(email) {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+/**
+ * 验证URL格式
+ * @param {string} url URL地址
+ * @returns {boolean} 是否为有效URL
+ */
+export function isValidURL(url) {
+  try {
+    new URL(url)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * 获取URL参数
+ * @param {string} name 参数名
+ * @returns {string|null} 参数值
+ */
+export function getUrlParam(name) {
+  const urlParams = new URLSearchParams(window.location.search)
+  return urlParams.get(name)
+}
+
+/**
+ * 设置URL参数
+ * @param {string} name 参数名
+ * @param {string} value 参数值
+ */
+export function setUrlParam(name, value) {
+  const url = new URL(window.location)
+  url.searchParams.set(name, value)
+  window.history.replaceState({}, '', url)
+}
+
+/**
+ * 移除URL参数
+ * @param {string} name 参数名
+ */
+export function removeUrlParam(name) {
+  const url = new URL(window.location)
+  url.searchParams.delete(name)
+  window.history.replaceState({}, '', url)
+} 

website/src/views/About.vue

@@ -0,0 +1,863 @@
+<template>
+  <div class="about-page">
+    <Header />
+    
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="container">
+        <div class="hero-content">
+          <h1 class="hero-title">关于我们</h1>
+          <p class="hero-subtitle">
+            了解 Wu-Lazy-Cloud-Network 项目的背景、团队和愿景
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Project Introduction -->
+    <section class="project-intro">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">项目介绍</h2>
+          <p class="section-subtitle">基于现代化技术栈的高性能网络穿透和代理工具</p>
+        </div>
+        
+        <div class="intro-content">
+          <div class="intro-text">
+            <h3>项目背景</h3>
+            <p>
+              Wu-Lazy-Cloud-Network 是一个基于 Spring Boot 3.5.0 和 JDK 24 开发的高性能网络穿透和代理工具。
+              项目起源于对现有网络穿透工具的不足之处的思考，旨在提供一个更加稳定、高效、易用的解决方案。
+            </p>
+            
+            <h3>核心价值</h3>
+            <ul>
+              <li><strong>高性能</strong>: 基于 Netty 异步网络框架，支持高并发连接处理</li>
+              <li><strong>易用性</strong>: 提供 Web 管理界面，支持一键部署和配置</li>
+              <li><strong>稳定性</strong>: 采用心跳机制和连接池管理，确保服务稳定运行</li>
+              <li><strong>扩展性</strong>: 模块化设计，支持自定义协议和过滤器</li>
+              <li><strong>安全性</strong>: 支持多种认证机制和加密传输</li>
+            </ul>
+            
+            <h3>技术特色</h3>
+            <ul>
+              <li>基于最新的 JDK 24 和 Spring Boot 3.5.0</li>
+              <li>采用 Netty 高性能网络框架</li>
+              <li>支持多种协议：TCP、HTTP、SOCKS</li>
+              <li>提供完整的流量监控和统计功能</li>
+              <li>支持集群部署和负载均衡</li>
+            </ul>
+          </div>
+          
+          <div class="intro-stats">
+            <div class="stat-item">
+              <div class="stat-number">1.3.1</div>
+              <div class="stat-label">当前版本</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">10K+</div>
+              <div class="stat-label">并发连接</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">99.9%</div>
+              <div class="stat-label">可用性</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">&lt; 10ms</div>
+              <div class="stat-label">响应时间</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Team -->
+    <section class="team">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">开发团队</h2>
+          <p class="section-subtitle">专业的开发团队，致力于提供优质的网络解决方案</p>
+        </div>
+        
+        <div class="team-content">
+          <div class="team-member">
+            <div class="member-avatar">
+              <el-icon><User /></el-icon>
+            </div>
+            <div class="member-info">
+              <h3>吴佳伟 (Jia Wei Wu)</h3>
+              <p class="member-title">项目负责人 & 主要开发者</p>
+              <p class="member-description">
+                拥有多年 Java 开发经验，专注于高性能网络应用开发。
+                负责项目的整体架构设计、核心功能开发和性能优化。
+              </p>
+              <div class="member-skills">
+                <span class="skill-tag">Java</span>
+                <span class="skill-tag">Spring Boot</span>
+                <span class="skill-tag">Netty</span>
+                <span class="skill-tag">网络编程</span>
+                <span class="skill-tag">系统架构</span>
+              </div>
+              <div class="member-contact">
+                <a href="mailto:1207537021@qq.com" class="contact-link">
+                  <el-icon><Message /></el-icon>
+                  1207537021@qq.com
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Technology Stack -->
+    <section class="technology-stack">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">技术栈</h2>
+          <p class="section-subtitle">采用现代化的技术栈，确保高性能和可靠性</p>
+        </div>
+        
+        <div class="tech-categories">
+          <div class="tech-category">
+            <h3>后端框架</h3>
+            <div class="tech-items">
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Monitor /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Spring Boot 3.5.0</h4>
+                  <p>现代化的应用框架，提供快速开发和部署能力</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Connection /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Netty</h4>
+                  <p>高性能异步网络框架，支持高并发连接处理</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Cpu /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>JDK 24</h4>
+                  <p>最新的 Java 开发工具包，提供优秀的性能表现</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="tech-category">
+            <h3>数据存储</h3>
+            <div class="tech-items">
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><DataBase /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>MySQL 8.0</h4>
+                  <p>主数据库，存储配置和监控数据</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><DataBase /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>H2</h4>
+                  <p>开发环境数据库，轻量级嵌入式数据库</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><DataBase /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Lazy ORM</h4>
+                  <p>轻量级 ORM 框架，提供类型安全的数据库操作</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="tech-category">
+            <h3>部署运维</h3>
+            <div class="tech-items">
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Box /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Docker</h4>
+                  <p>容器化部署，提供一致的运行环境</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Setting /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Maven</h4>
+                  <p>构建自动化工具，管理项目依赖</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Monitor /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Spring Boot Actuator</h4>
+                  <p>应用监控和管理，提供健康检查和指标</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Roadmap -->
+    <section class="roadmap">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">发展路线</h2>
+          <p class="section-subtitle">项目的未来发展规划和功能演进</p>
+        </div>
+        
+        <div class="roadmap-timeline">
+          <div class="timeline-item completed">
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <h3>v1.3.1 (当前版本)</h3>
+              <p class="timeline-date">2024年12月</p>
+              <ul>
+                <li>升级到 JDK 24 和 Spring Boot 3.5.0</li>
+                <li>优化网络性能和稳定性</li>
+                <li>增强安全性和认证机制</li>
+                <li>完善文档和部署指南</li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="timeline-item current">
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <h3>v1.4.0 (开发中)</h3>
+              <p class="timeline-date">2025年Q1</p>
+              <ul>
+                <li>支持 WebSocket 协议</li>
+                <li>增强集群管理功能</li>
+                <li>提供 RESTful API</li>
+                <li>优化用户界面体验</li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="timeline-item planned">
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <h3>v2.0.0 (规划中)</h3>
+              <p class="timeline-date">2025年Q2</p>
+              <ul>
+                <li>微服务架构重构</li>
+                <li>支持 Kubernetes 部署</li>
+                <li>提供 SDK 和插件机制</li>
+                <li>增强监控和告警功能</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Contact -->
+    <section class="contact">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">联系我们</h2>
+          <p class="section-subtitle">欢迎反馈建议、报告问题或参与项目贡献</p>
+        </div>
+        
+        <div class="contact-content">
+          <div class="contact-methods">
+            <div class="contact-method">
+              <div class="method-icon">
+                <el-icon><Message /></el-icon>
+              </div>
+              <h3>邮箱联系</h3>
+              <p>通过邮件与我们联系，我们会在24小时内回复</p>
+              <a href="mailto:1207537021@qq.com" class="contact-link">
+                1207537021@qq.com
+              </a>
+            </div>
+            
+            <div class="contact-method">
+              <div class="method-icon">
+                <el-icon><Platform /></el-icon>
+              </div>
+              <h3>项目地址</h3>
+              <p>访问项目仓库，查看源码、提交问题或参与贡献</p>
+              <div class="project-links">
+                <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="contact-link">
+                  <el-icon><Platform /></el-icon>
+                  Gitee
+                </a>
+                <a href="https://github.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="contact-link">
+                  <el-icon><Platform /></el-icon>
+                  GitHub
+                </a>
+              </div>
+            </div>
+            
+            <div class="contact-method">
+              <div class="method-icon">
+                <el-icon><Document /></el-icon>
+              </div>
+              <h3>文档支持</h3>
+              <p>查看详细的使用文档、API 文档和开发指南</p>
+              <router-link to="/docs" class="contact-link">
+                <el-icon><Document /></el-icon>
+                查看文档
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- License -->
+    <section class="license">
+      <div class="container">
+        <div class="license-content">
+          <h2>开源许可证</h2>
+          <p>
+            本项目采用 <strong>Apache License 2.0</strong> 开源许可证。
+            您可以自由使用、修改和分发本软件，但需要遵守许可证条款。
+          </p>
+          <div class="license-actions">
+            <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank" class="btn btn-outline">
+              <el-icon><Document /></el-icon>
+              查看许可证
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
+import { 
+  User, 
+  Message, 
+  Platform, 
+  Document,
+  Monitor,
+  Connection,
+  Cpu,
+  // DataBase,
+  Box,
+  Setting
+} from '@element-plus/icons-vue'
+
+onMounted(() => {
+  // 页面初始化逻辑
+})
+</script>
+
+<style lang="scss" scoped>
+.about-page {
+  min-height: 100vh;
+}
+
+// Hero Section
+.hero {
+  padding: 120px 0 60px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  
+  .hero-title {
+    font-size: 48px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 32px;
+    }
+  }
+  
+  .hero-subtitle {
+    font-size: 18px;
+    opacity: 0.9;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+// Section Header
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+  
+  .section-title {
+    font-size: 36px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 28px;
+    }
+  }
+  
+  .section-subtitle {
+    font-size: 18px;
+    color: var(--text-regular);
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+// Project Introduction
+.project-intro {
+  padding: 80px 0;
+  background: var(--background-color);
+}
+
+.intro-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 60px;
+  align-items: start;
+  
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+}
+
+.intro-text {
+  h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+  }
+  
+  p {
+    color: var(--text-regular);
+    line-height: 1.6;
+    margin-bottom: 20px;
+  }
+  
+  ul {
+    list-style: none;
+    margin-bottom: 20px;
+    
+    li {
+      color: var(--text-regular);
+      margin-bottom: 8px;
+      position: relative;
+      padding-left: 16px;
+      
+      &::before {
+        content: '•';
+        position: absolute;
+        left: 0;
+        color: var(--primary-color);
+      }
+    }
+  }
+}
+
+.intro-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  
+  .stat-item {
+    text-align: center;
+    padding: 20px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: var(--shadow-light);
+    
+    .stat-number {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--primary-color);
+      margin-bottom: 8px;
+    }
+    
+    .stat-label {
+      color: var(--text-regular);
+      font-size: 14px;
+    }
+  }
+}
+
+// Team
+.team {
+  padding: 80px 0;
+  background: var(--background-light);
+}
+
+.team-content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.team-member {
+  display: flex;
+  gap: 30px;
+  align-items: start;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .member-avatar {
+    width: 100px;
+    height: 100px;
+    background: var(--primary-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    
+    .el-icon {
+      font-size: 40px;
+      color: white;
+    }
+  }
+  
+  .member-info {
+    flex: 1;
+    
+    h3 {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 8px;
+    }
+    
+    .member-title {
+      color: var(--primary-color);
+      font-weight: 500;
+      margin-bottom: 12px;
+    }
+    
+    .member-description {
+      color: var(--text-regular);
+      line-height: 1.6;
+      margin-bottom: 16px;
+    }
+    
+    .member-skills {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 16px;
+      
+      .skill-tag {
+        background: var(--background-light);
+        color: var(--text-regular);
+        padding: 4px 12px;
+        border-radius: 16px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+    }
+    
+    .member-contact {
+      .contact-link {
+        color: var(--primary-color);
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+
+// Technology Stack
+.technology-stack {
+  padding: 80px 0;
+  background: var(--background-color);
+}
+
+.tech-categories {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.tech-category {
+  margin-bottom: 60px;
+  
+  h3 {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 30px;
+    text-align: center;
+  }
+}
+
+.tech-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 20px;
+}
+
+.tech-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: var(--shadow-light);
+  
+  .tech-icon {
+    width: 50px;
+    height: 50px;
+    background: var(--primary-color);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    
+    .el-icon {
+      font-size: 24px;
+      color: white;
+    }
+  }
+  
+  .tech-info {
+    h4 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 4px;
+    }
+    
+    p {
+      font-size: 14px;
+      color: var(--text-regular);
+      line-height: 1.4;
+    }
+  }
+}
+
+// Roadmap
+.roadmap {
+  padding: 80px 0;
+  background: var(--background-light);
+}
+
+.roadmap-timeline {
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 20px;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--border-light);
+  }
+}
+
+.timeline-item {
+  position: relative;
+  margin-bottom: 40px;
+  padding-left: 60px;
+  
+  .timeline-marker {
+    position: absolute;
+    left: 11px;
+    top: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 3px solid white;
+  }
+  
+  &.completed .timeline-marker {
+    background: var(--success-color);
+  }
+  
+  &.current .timeline-marker {
+    background: var(--primary-color);
+  }
+  
+  &.planned .timeline-marker {
+    background: var(--warning-color);
+  }
+  
+  .timeline-content {
+    background: white;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: var(--shadow-light);
+    
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 8px;
+    }
+    
+    .timeline-date {
+      color: var(--text-regular);
+      font-size: 14px;
+      margin-bottom: 12px;
+    }
+    
+    ul {
+      list-style: none;
+      
+      li {
+        color: var(--text-regular);
+        margin-bottom: 6px;
+        position: relative;
+        padding-left: 16px;
+        
+        &::before {
+          content: '•';
+          position: absolute;
+          left: 0;
+          color: var(--primary-color);
+        }
+      }
+    }
+  }
+}
+
+// Contact
+.contact {
+  padding: 80px 0;
+  background: var(--background-color);
+}
+
+.contact-methods {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+}
+
+.contact-method {
+  text-align: center;
+  padding: 30px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: var(--shadow-light);
+  
+  .method-icon {
+    width: 60px;
+    height: 60px;
+    background: var(--primary-color);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 20px;
+    
+    .el-icon {
+      font-size: 28px;
+      color: white;
+    }
+  }
+  
+  h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+  }
+  
+  p {
+    color: var(--text-regular);
+    line-height: 1.6;
+    margin-bottom: 16px;
+  }
+  
+  .contact-link {
+    color: var(--primary-color);
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 500;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  
+  .project-links {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+  }
+}
+
+// License
+.license {
+  padding: 60px 0;
+  background: var(--background-light);
+  text-align: center;
+  
+  .license-content {
+    max-width: 600px;
+    margin: 0 auto;
+    
+    h2 {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 16px;
+    }
+    
+    p {
+      color: var(--text-regular);
+      line-height: 1.6;
+      margin-bottom: 20px;
+    }
+    
+    .license-actions {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style> 

website/src/views/Architecture.vue

@@ -0,0 +1,798 @@
+<template>
+  <div class="architecture-page">
+    <Header />
+    
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="container">
+        <div class="hero-content">
+          <h1 class="hero-title">系统架构</h1>
+          <p class="hero-subtitle">
+            基于现代化的技术栈，采用模块化设计，提供高性能和可靠性
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Architecture Overview -->
+    <section class="architecture-overview">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">整体架构</h2>
+          <p class="section-subtitle">采用分层架构设计，各模块职责清晰，便于维护和扩展</p>
+        </div>
+        
+        <div class="architecture-diagram">
+          <div class="layer application-layer">
+            <h3>应用层</h3>
+            <div class="components">
+              <div class="component">Web UI</div>
+              <div class="component">REST API</div>
+              <div class="component">WebSocket</div>
+            </div>
+          </div>
+          
+          <div class="layer business-layer">
+            <h3>业务层</h3>
+            <div class="components">
+              <div class="component">内网穿透</div>
+              <div class="component">网络代理</div>
+              <div class="component">流量监控</div>
+              <div class="component">路由管理</div>
+            </div>
+          </div>
+          
+          <div class="layer protocol-layer">
+            <h3>协议层</h3>
+            <div class="components">
+              <div class="component">HTTP 代理</div>
+              <div class="component">SOCKS 代理</div>
+              <div class="component">TCP 协议</div>
+              <div class="component">自定义协议</div>
+            </div>
+          </div>
+          
+          <div class="layer communication-layer">
+            <h3>通信层</h3>
+            <div class="components">
+              <div class="component">Netty 框架</div>
+              <div class="component">心跳机制</div>
+              <div class="component">连接池</div>
+              <div class="component">过滤器链</div>
+            </div>
+          </div>
+          
+          <div class="layer data-layer">
+            <h3>数据层</h3>
+            <div class="components">
+              <div class="component">MySQL</div>
+              <div class="component">H2</div>
+              <div class="component">Lazy ORM</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Module Architecture -->
+    <section class="module-architecture">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">模块架构</h2>
+          <p class="section-subtitle">松耦合的模块化设计，支持独立开发和部署</p>
+        </div>
+        
+        <div class="modules-grid">
+          <div class="module-card">
+            <div class="module-header">
+              <div class="module-icon">
+                <el-icon><Connection /></el-icon>
+              </div>
+              <h3>wu-lazy-cloud-heartbeat-common</h3>
+            </div>
+            <p class="module-description">公共基础模块，提供接口定义、枚举常量、适配器等</p>
+            <div class="module-components">
+              <h4>核心组件</h4>
+              <ul>
+                <li>NettyMsg - 网络消息基类</li>
+                <li>ChannelContext - 通道上下文</li>
+                <li>ProtocolAdapter - 协议适配器</li>
+                <li>NettyUtils - 工具类</li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="module-card">
+            <div class="module-header">
+              <div class="module-icon">
+                <el-icon><Server /></el-icon>
+              </div>
+              <h3>wu-lazy-cloud-heartbeat-server</h3>
+            </div>
+            <p class="module-description">服务端核心模块，提供网络服务、客户端管理、端口映射等功能</p>
+            <div class="module-components">
+              <h4>核心组件</h4>
+              <ul>
+                <li>NettyTcpServerSocketApplicationListener</li>
+                <li>LazyServerPermeateServerMappingApplication</li>
+                <li>NettyServerVirtualRouteApplication</li>
+                <li>InitServerSocket</li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="module-card">
+            <div class="module-header">
+              <div class="module-icon">
+                <el-icon><Monitor /></el-icon>
+              </div>
+              <h3>wu-lazy-cloud-heartbeat-client</h3>
+            </div>
+            <p class="module-description">客户端核心模块，提供连接管理、本地服务、端口转发等功能</p>
+            <div class="module-components">
+              <h4>核心组件</h4>
+              <ul>
+                <li>NettyClientSocketApplicationListener</li>
+                <li>LazyClientPermeateClientMappingApplication</li>
+                <li>NettyClientVirtualRouteApplication</li>
+                <li>LazyNettyClientApplication</li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="module-card">
+            <div class="module-header">
+              <div class="module-icon">
+                <el-icon><Share /></el-icon>
+              </div>
+              <h3>wu-lazy-cloud-heartbeat-protocol-proxy</h3>
+            </div>
+            <p class="module-description">代理协议模块，提供 HTTP 和 SOCKS 代理服务</p>
+            <div class="module-components">
+              <h4>核心组件</h4>
+              <ul>
+                <li>NettyHttpProxySocketApplicationListener</li>
+                <li>NettySocketProxySocketApplicationListener</li>
+                <li>NettyTcpProxyFilter</li>
+                <li>HttpProxyHandler</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Data Flow -->
+    <section class="data-flow">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">数据流架构</h2>
+          <p class="section-subtitle">清晰的数据流向，支持高效的数据传输和处理</p>
+        </div>
+        
+        <div class="flow-diagrams">
+          <div class="flow-diagram">
+            <h3>内网穿透数据流</h3>
+            <div class="flow-steps">
+              <div class="flow-step">
+                <div class="step-icon">
+                  <el-icon><User /></el-icon>
+                </div>
+                <div class="step-content">
+                  <h4>访客请求</h4>
+                  <p>外部用户连接到服务端访客端口</p>
+                </div>
+              </div>
+              
+              <div class="flow-arrow">→</div>
+              
+              <div class="flow-step">
+                <div class="step-icon">
+                  <el-icon><Server /></el-icon>
+                </div>
+                <div class="step-content">
+                  <h4>服务端处理</h4>
+                  <p>服务端创建访客通道，通过心跳通道转发数据</p>
+                </div>
+              </div>
+              
+              <div class="flow-arrow">→</div>
+              
+              <div class="flow-step">
+                <div class="step-icon">
+                  <el-icon><Monitor /></el-icon>
+                </div>
+                <div class="step-content">
+                  <h4>客户端转发</h4>
+                  <p>客户端接收数据并转发给本地服务</p>
+                </div>
+              </div>
+              
+              <div class="flow-arrow">→</div>
+              
+              <div class="flow-step">
+                <div class="step-icon">
+                  <el-icon><Connection /></el-icon>
+                </div>
+                <div class="step-content">
+                  <h4>响应返回</h4>
+                  <p>本地服务响应数据，通过心跳通道返回给访客</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="flow-diagram">
+            <h3>代理数据流</h3>
+            <div class="flow-steps">
+              <div class="flow-step">
+                <div class="step-icon">
+                  <el-icon><Monitor /></el-icon>
+                </div>
+                <div class="step-content">
+                  <h4>客户端应用</h4>
+                  <p>应用程序发起代理请求</p>
+                </div>
+              </div>
+              
+              <div class="flow-arrow">→</div>
+              
+              <div class="flow-step">
+                <div class="step-icon">
+                  <el-icon><Share /></el-icon>
+                </div>
+                <div class="step-content">
+                  <h4>代理客户端</h4>
+                  <p>代理客户端接收请求并转发</p>
+                </div>
+              </div>
+              
+              <div class="flow-arrow">→</div>
+              
+              <div class="flow-step">
+                <div class="step-icon">
+                  <el-icon><Server /></el-icon>
+                </div>
+                <div class="step-content">
+                  <h4>代理服务端</h4>
+                  <p>代理服务端处理请求并访问目标服务器</p>
+                </div>
+              </div>
+              
+              <div class="flow-arrow">→</div>
+              
+              <div class="flow-step">
+                <div class="step-icon">
+                  <el-icon><Globe /></el-icon>
+                </div>
+                <div class="step-content">
+                  <h4>目标服务器</h4>
+                  <p>目标服务器处理请求并返回响应</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Technology Stack -->
+    <section class="technology-stack">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">技术栈</h2>
+          <p class="section-subtitle">采用现代化的技术栈，确保高性能和可靠性</p>
+        </div>
+        
+        <div class="tech-categories">
+          <div class="tech-category">
+            <h3>核心框架</h3>
+            <div class="tech-items">
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Monitor /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Spring Boot 3.5.0</h4>
+                  <p>现代化的应用框架，提供快速开发和部署能力</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Connection /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Netty</h4>
+                  <p>高性能异步网络框架，支持高并发连接处理</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Cpu /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>JDK 24</h4>
+                  <p>最新的 Java 开发工具包，提供优秀的性能表现</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="tech-category">
+            <h3>数据存储</h3>
+            <div class="tech-items">
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><DataBase /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>MySQL 8.0</h4>
+                  <p>主数据库，存储配置和监控数据</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><DataBase /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>H2</h4>
+                  <p>开发环境数据库，轻量级嵌入式数据库</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><DataBase /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Lazy ORM</h4>
+                  <p>轻量级 ORM 框架，提供类型安全的数据库操作</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="tech-category">
+            <h3>部署运维</h3>
+            <div class="tech-items">
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Box /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Docker</h4>
+                  <p>容器化部署，提供一致的运行环境</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Setting /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Maven</h4>
+                  <p>构建自动化工具，管理项目依赖</p>
+                </div>
+              </div>
+              
+              <div class="tech-item">
+                <div class="tech-icon">
+                  <el-icon><Monitor /></el-icon>
+                </div>
+                <div class="tech-info">
+                  <h4>Spring Boot Actuator</h4>
+                  <p>应用监控和管理，提供健康检查和指标</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
+import { 
+  Connection, 
+  // Server,
+  Monitor, 
+  Share,
+  User,
+  // Globe,
+  Cpu,
+  // DataBase,
+  Box,
+  Setting
+} from '@element-plus/icons-vue'
+
+onMounted(() => {
+  // 页面初始化逻辑
+})
+</script>
+
+<style lang="scss" scoped>
+.architecture-page {
+  min-height: 100vh;
+}
+
+// Hero Section
+.hero {
+  padding: 120px 0 60px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  
+  .hero-title {
+    font-size: 48px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 32px;
+    }
+  }
+  
+  .hero-subtitle {
+    font-size: 18px;
+    opacity: 0.9;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+// Section Header
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+  
+  .section-title {
+    font-size: 36px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 28px;
+    }
+  }
+  
+  .section-subtitle {
+    font-size: 18px;
+    color: var(--text-regular);
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+// Architecture Overview
+.architecture-overview {
+  padding: 80px 0;
+  background: var(--background-color);
+}
+
+.architecture-diagram {
+  max-width: 1000px;
+  margin: 0 auto;
+  
+  .layer {
+    margin-bottom: 30px;
+    padding: 20px;
+    border-radius: 12px;
+    background: var(--background-light);
+    
+    h3 {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 16px;
+      text-align: center;
+    }
+    
+    .components {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      justify-content: center;
+      
+      .component {
+        padding: 8px 16px;
+        background: var(--primary-color);
+        color: white;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+  }
+  
+  .application-layer {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    
+    .component {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+  
+  .business-layer {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    color: white;
+    
+    .component {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+  
+  .protocol-layer {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    color: white;
+    
+    .component {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+  
+  .communication-layer {
+    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+    color: white;
+    
+    .component {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+  
+  .data-layer {
+    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+    color: white;
+    
+    .component {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+
+// Module Architecture
+.module-architecture {
+  padding: 80px 0;
+  background: var(--background-light);
+}
+
+.modules-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 30px;
+}
+
+.module-card {
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: var(--shadow-light);
+  transition: transform 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-4px);
+  }
+  
+  .module-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 20px;
+    
+    .module-icon {
+      width: 50px;
+      height: 50px;
+      background: var(--primary-color);
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      .el-icon {
+        font-size: 24px;
+        color: white;
+      }
+    }
+    
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+  }
+  
+  .module-description {
+    color: var(--text-regular);
+    line-height: 1.6;
+    margin-bottom: 20px;
+  }
+  
+  .module-components {
+    h4 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 12px;
+    }
+    
+    ul {
+      list-style: none;
+      
+      li {
+        color: var(--text-regular);
+        margin-bottom: 6px;
+        position: relative;
+        padding-left: 16px;
+        
+        &::before {
+          content: '•';
+          position: absolute;
+          left: 0;
+          color: var(--primary-color);
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+// Data Flow
+.data-flow {
+  padding: 80px 0;
+  background: var(--background-color);
+}
+
+.flow-diagrams {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.flow-diagram {
+  margin-bottom: 60px;
+  
+  h3 {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 30px;
+    text-align: center;
+  }
+}
+
+.flow-steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  
+  .flow-step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 200px;
+    
+    .step-icon {
+      width: 60px;
+      height: 60px;
+      background: var(--primary-color);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 12px;
+      
+      .el-icon {
+        font-size: 24px;
+        color: white;
+      }
+    }
+    
+    .step-content {
+      h4 {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--text-primary);
+        margin-bottom: 8px;
+      }
+      
+      p {
+        font-size: 14px;
+        color: var(--text-regular);
+        line-height: 1.4;
+      }
+    }
+  }
+  
+  .flow-arrow {
+    font-size: 24px;
+    color: var(--primary-color);
+    font-weight: bold;
+    
+    @media (max-width: 768px) {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+// Technology Stack
+.technology-stack {
+  padding: 80px 0;
+  background: var(--background-light);
+}
+
+.tech-categories {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.tech-category {
+  margin-bottom: 60px;
+  
+  h3 {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 30px;
+    text-align: center;
+  }
+}
+
+.tech-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 20px;
+}
+
+.tech-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: var(--shadow-light);
+  
+  .tech-icon {
+    width: 50px;
+    height: 50px;
+    background: var(--primary-color);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    
+    .el-icon {
+      font-size: 24px;
+      color: white;
+    }
+  }
+  
+  .tech-info {
+    h4 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 4px;
+    }
+    
+    p {
+      font-size: 14px;
+      color: var(--text-regular);
+      line-height: 1.4;
+    }
+  }
+}
+</style> 

website/src/views/Docs.vue

@@ -0,0 +1,967 @@
+<template>
+  <div class="docs-page">
+    <Header />
+    
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="container">
+        <div class="hero-content">
+          <h1 class="hero-title">使用文档</h1>
+          <p class="hero-subtitle">
+            详细的使用指南和配置说明，帮助您快速上手 Wu-Lazy-Cloud-Network
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Docs Navigation -->
+    <section class="docs-navigation">
+      <div class="container">
+        <div class="docs-nav">
+          <div class="nav-item" @click="scrollToSection('quick-start')">
+            <el-icon><Timer /></el-icon>
+            <span>快速开始</span>
+          </div>
+          <div class="nav-item" @click="scrollToSection('installation')">
+            <el-icon><Download /></el-icon>
+            <span>安装部署</span>
+          </div>
+          <div class="nav-item" @click="scrollToSection('configuration')">
+            <el-icon><Setting /></el-icon>
+            <span>配置说明</span>
+          </div>
+          <div class="nav-item" @click="scrollToSection('usage')">
+            <el-icon><Document /></el-icon>
+            <span>使用指南</span>
+          </div>
+          <div class="nav-item" @click="scrollToSection('troubleshooting')">
+            <el-icon><Tools /></el-icon>
+            <span>故障排除</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Quick Start -->
+    <section class="docs-section" id="quick-start">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">快速开始</h2>
+          <p class="section-subtitle">几分钟内完成部署和配置</p>
+        </div>
+        
+        <div class="docs-content">
+          <div class="step-guide">
+            <div class="step">
+              <div class="step-number">1</div>
+              <div class="step-content">
+                <h3>启动服务端</h3>
+                <p>使用 Docker 快速启动服务端</p>
+                <div class="code-block">
+                  <pre><code class="language-bash">docker run -d -it -p 6001:6001 -p 7001:7001 -p 8001:8001 -p 9001:9001 \
+  --name wlcn-server \
+  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.1-JDK24</code></pre>
+                </div>
+                <div class="step-notes">
+                  <h4>端口说明</h4>
+                  <ul>
+                    <li><strong>6001</strong>: Web 管理界面</li>
+                    <li><strong>7001</strong>: TCP 连接端口</li>
+                    <li><strong>8001</strong>: HTTP 代理端口</li>
+                    <li><strong>9001</strong>: SOCKS 代理端口</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            
+            <div class="step">
+              <div class="step-number">2</div>
+              <div class="step-content">
+                <h3>启动客户端</h3>
+                <p>配置客户端连接到服务端</p>
+                <div class="code-block">
+                  <pre><code class="language-bash">docker run -d -it --privileged -p 6004:6004 \
+  --name wlcn-client \
+  --restart=always \
+  -e spring.lazy.netty.client.inet-host=YOUR_SERVER_IP \
+  -e spring.lazy.netty.client.inet-port=7001 \
+  -e spring.lazy.netty.client.client-id="your-client-id" \
+  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24</code></pre>
+                </div>
+                <div class="step-notes">
+                  <h4>环境变量说明</h4>
+                  <ul>
+                    <li><strong>inet-host</strong>: 服务端 IP 地址</li>
+                    <li><strong>inet-port</strong>: 服务端 TCP 端口</li>
+                    <li><strong>client-id</strong>: 客户端唯一标识</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            
+            <div class="step">
+              <div class="step-number">3</div>
+              <div class="step-content">
+                <h3>访问管理界面</h3>
+                <p>通过 Web 界面进行配置和管理</p>
+                <div class="code-block">
+                  <pre><code class="language-bash"># 服务端管理界面
+http://127.0.0.1:6001/netty-server-ui/index.html
+
+# 客户端管理界面
+http://127.0.0.1:6004/netty-client-local-ui/index.html</code></pre>
+                </div>
+                <div class="step-notes">
+                  <h4>默认登录信息</h4>
+                  <ul>
+                    <li><strong>用户名</strong>: admin</li>
+                    <li><strong>密码</strong>: admin</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Installation -->
+    <section class="docs-section" id="installation">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">安装部署</h2>
+          <p class="section-subtitle">支持多种部署方式，满足不同环境需求</p>
+        </div>
+        
+        <div class="docs-content">
+          <div class="deployment-methods">
+            <div class="method-card">
+              <div class="method-header">
+                <el-icon><Box /></el-icon>
+                <h3>Docker 部署</h3>
+              </div>
+              <p>推荐使用 Docker 进行部署，简单快速</p>
+              <div class="method-steps">
+                <h4>服务端部署</h4>
+                <div class="code-block">
+                  <pre><code class="language-bash"># 拉取镜像
+docker pull registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.1-JDK24
+
+# 启动容器
+docker run -d -it -p 6001:6001 -p 7001:7001 -p 8001:8001 -p 9001:9001 \
+  --name wlcn-server \
+  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.1-JDK24</code></pre>
+                </div>
+                
+                <h4>客户端部署</h4>
+                <div class="code-block">
+                  <pre><code class="language-bash"># 拉取镜像
+docker pull registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24
+
+# 启动容器
+docker run -d -it --privileged -p 6004:6004 \
+  --name wlcn-client \
+  --restart=always \
+  -e spring.lazy.netty.client.inet-host=YOUR_SERVER_IP \
+  -e spring.lazy.netty.client.inet-port=7001 \
+  -e spring.lazy.netty.client.client-id="your-client-id" \
+  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24</code></pre>
+                </div>
+              </div>
+            </div>
+            
+            <div class="method-card">
+              <div class="method-header">
+                <el-icon><Download /></el-icon>
+                <h3>源码部署</h3>
+              </div>
+              <p>从源码编译部署，适合开发环境</p>
+              <div class="method-steps">
+                <h4>环境要求</h4>
+                <ul>
+                  <li>JDK 24 或 JDK 17+</li>
+                  <li>Maven 3.6+</li>
+                  <li>MySQL 8.0+ (可选)</li>
+                </ul>
+                
+                <h4>编译部署</h4>
+                <div class="code-block">
+                  <pre><code class="language-bash"># 克隆项目
+git clone https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network.git
+cd wu-lazy-cloud-network
+
+# 编译项目
+mvn clean package -DskipTests
+
+# 启动服务端
+cd wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-server-start
+java -jar target/wu-lazy-cloud-heartbeat-server-start-1.3.1-JDK24.jar
+
+# 启动客户端
+cd ../wu-lazy-cloud-heartbeat-client-start
+java -jar target/wu-lazy-cloud-heartbeat-client-start-1.3.1-JDK24.jar</code></pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Configuration -->
+    <section class="docs-section" id="configuration">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">配置说明</h2>
+          <p class="section-subtitle">详细的配置参数说明和使用示例</p>
+        </div>
+        
+        <div class="docs-content">
+          <div class="config-tabs">
+            <el-tabs v-model="activeConfigTab">
+              <el-tab-pane label="服务端配置" name="server">
+                <div class="config-content">
+                  <h3>服务端配置</h3>
+                  <div class="code-block">
+                    <pre><code class="language-yaml">spring:
+  lazy:
+    netty:
+      server:
+        mode: standalone  # 模式：standalone/cluster
+        node-id: default  # 节点ID
+        node-host: 127.0.0.1  # 节点主机
+        node-port: 7001  # 节点端口
+        enable-flow-control: true  # 启用流量控制
+        enable-token-verification: false  # 启用Token验证
+        tcp:
+          port: 7001  # TCP端口
+        udp:
+          port: 7001  # UDP端口</code></pre>
+                  </div>
+                  
+                  <h4>配置参数说明</h4>
+                  <div class="param-table">
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>参数</th>
+                          <th>说明</th>
+                          <th>默认值</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>mode</td>
+                          <td>运行模式，支持 standalone 和 cluster</td>
+                          <td>standalone</td>
+                        </tr>
+                        <tr>
+                          <td>node-id</td>
+                          <td>节点唯一标识</td>
+                          <td>default</td>
+                        </tr>
+                        <tr>
+                          <td>node-host</td>
+                          <td>节点主机地址</td>
+                          <td>127.0.0.1</td>
+                        </tr>
+                        <tr>
+                          <td>node-port</td>
+                          <td>节点监听端口</td>
+                          <td>7001</td>
+                        </tr>
+                        <tr>
+                          <td>enable-flow-control</td>
+                          <td>是否启用流量控制</td>
+                          <td>true</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </el-tab-pane>
+              
+              <el-tab-pane label="客户端配置" name="client">
+                <div class="config-content">
+                  <h3>客户端配置</h3>
+                  <div class="code-block">
+                    <pre><code class="language-yaml">spring:
+  lazy:
+    netty:
+      client:
+        client-id: your-client-id  # 客户端ID
+        inet-host: 127.0.0.1  # 服务端地址
+        inet-port: 7001  # 服务端端口
+        enable: true  # 启用客户端连接</code></pre>
+                  </div>
+                  
+                  <h4>配置参数说明</h4>
+                  <div class="param-table">
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>参数</th>
+                          <th>说明</th>
+                          <th>默认值</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>client-id</td>
+                          <td>客户端唯一标识</td>
+                          <td>-</td>
+                        </tr>
+                        <tr>
+                          <td>inet-host</td>
+                          <td>服务端 IP 地址</td>
+                          <td>127.0.0.1</td>
+                        </tr>
+                        <tr>
+                          <td>inet-port</td>
+                          <td>服务端 TCP 端口</td>
+                          <td>7001</td>
+                        </tr>
+                        <tr>
+                          <td>enable</td>
+                          <td>是否启用客户端连接</td>
+                          <td>true</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </el-tab-pane>
+              
+              <el-tab-pane label="代理配置" name="proxy">
+                <div class="config-content">
+                  <h3>代理配置</h3>
+                  <div class="code-block">
+                    <pre><code class="language-yaml">spring:
+  lazy:
+    netty:
+      protocol:
+        proxy:
+          authentication: true  # 启用代理认证
+          enable-proxy-log: false  # 启用代理日志
+          socket-protocol-proxy:
+            port: 9001  # SOCKS代理端口
+          http-protocol-proxy:
+            port: 8001  # HTTP代理端口</code></pre>
+                  </div>
+                  
+                  <h4>配置参数说明</h4>
+                  <div class="param-table">
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>参数</th>
+                          <th>说明</th>
+                          <th>默认值</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>authentication</td>
+                          <td>是否启用代理认证</td>
+                          <td>true</td>
+                        </tr>
+                        <tr>
+                          <td>enable-proxy-log</td>
+                          <td>是否启用代理日志</td>
+                          <td>false</td>
+                        </tr>
+                        <tr>
+                          <td>socket-protocol-proxy.port</td>
+                          <td>SOCKS 代理端口</td>
+                          <td>9001</td>
+                        </tr>
+                        <tr>
+                          <td>http-protocol-proxy.port</td>
+                          <td>HTTP 代理端口</td>
+                          <td>8001</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Usage Globe -->
+    <section class="docs-section" id="usage">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">使用指南</h2>
+          <p class="section-subtitle">详细的功能使用说明和最佳实践</p>
+        </div>
+        
+        <div class="docs-content">
+          <div class="usage-guides">
+            <div class="guide-card">
+              <h3>内网穿透配置</h3>
+              <div class="guide-content">
+                <h4>服务端渗透客户端</h4>
+                <ol>
+                  <li>在服务端管理界面配置端口池</li>
+                  <li>设置访客端口与客户端真实端口的映射关系</li>
+                  <li>例如：访客端口 19080 → 客户端本地端口 18080</li>
+                  <li>通过 <code>http://服务端IP:19080</code> 访问客户端本地 18080 端口</li>
+                </ol>
+                
+                <h4>客户端渗透服务端</h4>
+                <ol>
+                  <li>在客户端管理界面配置本地端口池</li>
+                  <li>设置本地端口到远程端口的映射关系</li>
+                  <li>例如：本地端口 13306 → 远程端口 3306</li>
+                  <li>通过 <code>localhost:13306</code> 访问远程 3306 端口</li>
+                </ol>
+              </div>
+            </div>
+            
+            <div class="guide-card">
+              <h3>代理功能使用</h3>
+              <div class="guide-content">
+                <h4>HTTP 代理</h4>
+                <ul>
+                  <li><strong>服务端代理</strong>: 127.0.0.1:8001</li>
+                  <li><strong>客户端代理</strong>: 127.0.0.1:8002</li>
+                </ul>
+                
+                <h4>SOCKS 代理</h4>
+                <ul>
+                  <li><strong>服务端代理</strong>: 127.0.0.1:9001</li>
+                  <li><strong>客户端代理</strong>: 127.0.0.1:9002</li>
+                </ul>
+                
+                <h4>代理配置示例</h4>
+                <div class="code-block">
+                  <pre><code class="language-bash"># 系统代理设置 (Mac)
+networksetup -setwebproxy "Wi-Fi" 127.0.0.1 8001
+networksetup -setsecurewebproxy "Wi-Fi" 127.0.0.1 8001
+
+# 使用 curl 测试代理
+curl -x http://127.0.0.1:8001 http://httpbin.org/ip</code></pre>
+                </div>
+              </div>
+            </div>
+            
+            <div class="guide-card">
+              <h3>流量监控</h3>
+              <div class="guide-content">
+                <h4>监控功能</h4>
+                <ul>
+                  <li>实时监控每个客户端的流量使用情况</li>
+                  <li>按端口统计流量数据</li>
+                  <li>提供流量趋势图表</li>
+                  <li>支持流量告警设置</li>
+                </ul>
+                
+                <h4>报表功能</h4>
+                <ul>
+                  <li>日流量统计报表</li>
+                  <li>客户端流量排行</li>
+                  <li>端口使用情况分析</li>
+                  <li>历史数据查询</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Troubleshooting -->
+    <section class="docs-section" id="troubleshooting">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">故障排除</h2>
+          <p class="section-subtitle">常见问题解决方案和调试技巧</p>
+        </div>
+        
+        <div class="docs-content">
+          <div class="troubleshooting-list">
+            <div class="trouble-item">
+              <h3>客户端连接失败</h3>
+              <div class="trouble-content">
+                <h4>检查项</h4>
+                <ul>
+                  <li>服务端 IP 和端口是否正确</li>
+                  <li>网络连接是否正常</li>
+                  <li>防火墙是否阻止连接</li>
+                </ul>
+                
+                <h4>解决方案</h4>
+                <div class="code-block">
+                  <pre><code class="language-bash"># 检查网络连接
+ping YOUR_SERVER_IP
+
+# 检查端口是否开放
+telnet YOUR_SERVER_IP 7001
+
+# 查看客户端日志
+docker logs wlcn-client</code></pre>
+                </div>
+              </div>
+            </div>
+            
+            <div class="trouble-item">
+              <h3>内网穿透不工作</h3>
+              <div class="trouble-content">
+                <h4>检查项</h4>
+                <ul>
+                  <li>端口映射配置是否正确</li>
+                  <li>目标服务是否正在运行</li>
+                  <li>防火墙规则是否允许</li>
+                </ul>
+                
+                <h4>解决方案</h4>
+                <ul>
+                  <li>确认映射配置: 访客端口 → 客户端端口</li>
+                  <li>检查目标服务状态</li>
+                  <li>测试本地端口访问</li>
+                </ul>
+              </div>
+            </div>
+            
+            <div class="trouble-item">
+              <h3>代理连接失败</h3>
+              <div class="trouble-content">
+                <h4>检查项</h4>
+                <ul>
+                  <li>代理地址和端口是否正确</li>
+                  <li>代理认证信息是否正确</li>
+                  <li>网络连接是否正常</li>
+                </ul>
+                
+                <h4>解决方案</h4>
+                <ul>
+                  <li>验证代理配置信息</li>
+                  <li>检查认证设置</li>
+                  <li>测试网络连接</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
+import { 
+  Timer, 
+  Download, 
+  Setting, 
+  Document, 
+  Tools,
+  Box
+} from '@element-plus/icons-vue'
+
+const activeConfigTab = ref('server')
+
+const scrollToSection = (sectionId) => {
+  const element = document.getElementById(sectionId)
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth' })
+  }
+}
+
+onMounted(() => {
+  // 高亮代码块
+  if (window.Prism) {
+    window.Prism.highlightAll()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.docs-page {
+  min-height: 100vh;
+}
+
+// Hero Section
+.hero {
+  padding: 120px 0 60px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  
+  .hero-title {
+    font-size: 48px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 32px;
+    }
+  }
+  
+  .hero-subtitle {
+    font-size: 18px;
+    opacity: 0.9;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+// Docs Navigation
+.docs-navigation {
+  background: white;
+  border-bottom: 1px solid var(--border-light);
+  padding: 20px 0;
+  position: sticky;
+  top: 70px;
+  z-index: 100;
+}
+
+.docs-nav {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+  flex-wrap: wrap;
+  
+  .nav-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: var(--text-regular);
+    
+    &:hover {
+      background: var(--background-light);
+      color: var(--primary-color);
+    }
+    
+    .el-icon {
+      font-size: 18px;
+    }
+    
+    span {
+      font-weight: 500;
+    }
+  }
+}
+
+// Section Header
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+  
+  .section-title {
+    font-size: 36px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 28px;
+    }
+  }
+  
+  .section-subtitle {
+    font-size: 18px;
+    color: var(--text-regular);
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+// Docs Section
+.docs-section {
+  padding: 80px 0;
+  
+  &:nth-child(even) {
+    background: var(--background-light);
+  }
+}
+
+.docs-content {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+// Step Globe
+.step-guide {
+  .step {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 40px;
+    
+    .step-number {
+      width: 40px;
+      height: 40px;
+      background: var(--primary-color);
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+    
+    .step-content {
+      flex: 1;
+      
+      h3 {
+        font-size: 20px;
+        font-weight: 600;
+        color: var(--text-primary);
+        margin-bottom: 8px;
+      }
+      
+      p {
+        color: var(--text-regular);
+        margin-bottom: 16px;
+      }
+      
+      .step-notes {
+        margin-top: 16px;
+        
+        h4 {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--text-primary);
+          margin-bottom: 8px;
+        }
+        
+        ul {
+          list-style: none;
+          
+          li {
+            color: var(--text-regular);
+            margin-bottom: 4px;
+            position: relative;
+            padding-left: 16px;
+            
+            &::before {
+              content: '•';
+              position: absolute;
+              left: 0;
+              color: var(--primary-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Deployment Methods
+.deployment-methods {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 30px;
+}
+
+.method-card {
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: var(--shadow-light);
+  
+  .method-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+    
+    .el-icon {
+      font-size: 24px;
+      color: var(--primary-color);
+    }
+    
+    h3 {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+  }
+  
+  p {
+    color: var(--text-regular);
+    margin-bottom: 20px;
+  }
+  
+  .method-steps {
+    h4 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 12px;
+    }
+    
+    ul {
+      list-style: none;
+      margin-bottom: 16px;
+      
+      li {
+        color: var(--text-regular);
+        margin-bottom: 6px;
+        position: relative;
+        padding-left: 16px;
+        
+        &::before {
+          content: '•';
+          position: absolute;
+          left: 0;
+          color: var(--primary-color);
+        }
+      }
+    }
+  }
+}
+
+// Config Tabs
+.config-tabs {
+  .config-content {
+    h3 {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 16px;
+    }
+    
+    h4 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin: 20px 0 12px;
+    }
+  }
+}
+
+// Parameter Table
+.param-table {
+  margin-top: 20px;
+  
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    
+    th, td {
+      padding: 12px;
+      text-align: left;
+      border-bottom: 1px solid var(--border-light);
+    }
+    
+    th {
+      background: var(--background-light);
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    
+    td {
+      color: var(--text-regular);
+    }
+  }
+}
+
+// Usage Globes
+.usage-guides {
+  display: grid;
+  gap: 30px;
+}
+
+.guide-card {
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: var(--shadow-light);
+  
+  h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 20px;
+  }
+  
+  .guide-content {
+    h4 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin: 16px 0 8px;
+    }
+    
+    ol, ul {
+      color: var(--text-regular);
+      margin-bottom: 16px;
+      
+      li {
+        margin-bottom: 6px;
+        line-height: 1.5;
+      }
+    }
+    
+    code {
+      background: var(--background-light);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: 14px;
+    }
+  }
+}
+
+// Troubleshooting
+.troubleshooting-list {
+  display: grid;
+  gap: 30px;
+}
+
+.trouble-item {
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: var(--shadow-light);
+  
+  h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 20px;
+  }
+  
+  .trouble-content {
+    h4 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin: 16px 0 8px;
+    }
+    
+    ul {
+      list-style: none;
+      margin-bottom: 16px;
+      
+      li {
+        color: var(--text-regular);
+        margin-bottom: 6px;
+        position: relative;
+        padding-left: 16px;
+        
+        &::before {
+          content: '•';
+          position: absolute;
+          left: 0;
+          color: var(--primary-color);
+        }
+      }
+    }
+  }
+}
+</style> 

website/src/views/Download.vue

@@ -0,0 +1,773 @@
+<template>
+  <div class="download-page">
+    <Header />
+    
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="container">
+        <div class="hero-content">
+          <h1 class="hero-title">下载安装</h1>
+          <p class="hero-subtitle">
+            选择适合您的部署方式，快速开始使用 Wu-Lazy-Cloud-Network
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Version Info -->
+    <section class="version-info">
+      <div class="container">
+        <div class="version-card">
+          <div class="version-header">
+            <h2>当前版本</h2>
+            <div class="version-badge">v1.3.1-JDK24</div>
+          </div>
+          <div class="version-details">
+            <div class="detail-item">
+              <span class="label">发布日期</span>
+              <span class="value">2024年12月</span>
+            </div>
+            <div class="detail-item">
+              <span class="label">JDK 版本</span>
+              <span class="value">JDK 24</span>
+            </div>
+            <div class="detail-item">
+              <span class="label">Spring Boot</span>
+              <span class="value">3.5.0</span>
+            </div>
+            <div class="detail-item">
+              <span class="label">许可证</span>
+              <span class="value">Apache License 2.0</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Download Options -->
+    <section class="download-options">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">下载方式</h2>
+          <p class="section-subtitle">支持多种部署方式，满足不同环境需求</p>
+        </div>
+        
+        <div class="options-grid">
+          <div class="option-card">
+            <div class="option-header">
+              <div class="option-icon">
+                <el-icon><Box /></el-icon>
+              </div>
+              <h3>Docker 镜像</h3>
+              <p>推荐使用，简单快速部署</p>
+            </div>
+            
+            <div class="option-content">
+              <h4>服务端镜像</h4>
+              <div class="code-block">
+                <pre><code class="language-bash"># 拉取镜像
+docker pull registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.1-JDK24
+
+# 启动容器
+docker run -d -it -p 6001:6001 -p 7001:7001 -p 8001:8001 -p 9001:9001 \
+  --name wlcn-server \
+  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.1-JDK24</code></pre>
+              </div>
+              
+              <h4>客户端镜像</h4>
+              <div class="code-block">
+                <pre><code class="language-bash"># 拉取镜像
+docker pull registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24
+
+# 启动容器
+docker run -d -it --privileged -p 6004:6004 \
+  --name wlcn-client \
+  --restart=always \
+  -e spring.lazy.netty.client.inet-host=YOUR_SERVER_IP \
+  -e spring.lazy.netty.client.inet-port=7001 \
+  -e spring.lazy.netty.client.client-id="your-client-id" \
+  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24</code></pre>
+              </div>
+              
+              <div class="option-actions">
+                <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="btn btn-primary">
+                  <el-icon><Platform /></el-icon>
+                  查看源码
+                </a>
+              </div>
+            </div>
+          </div>
+          
+          <div class="option-card">
+            <div class="option-header">
+              <div class="option-icon">
+                <el-icon><Download /></el-icon>
+              </div>
+              <h3>源码编译</h3>
+              <p>从源码编译，适合开发环境</p>
+            </div>
+            
+            <div class="option-content">
+              <h4>环境要求</h4>
+              <ul>
+                <li>JDK 24 或 JDK 17+</li>
+                <li>Maven 3.6+</li>
+                <li>MySQL 8.0+ (可选)</li>
+                <li>Git 2.30+</li>
+              </ul>
+              
+              <h4>编译步骤</h4>
+              <div class="code-block">
+                <pre><code class="language-bash"># 克隆项目
+git clone https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network.git
+cd wu-lazy-cloud-network
+
+# 编译项目
+mvn clean package -DskipTests
+
+# 启动服务端
+cd wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-server-start
+java -jar target/wu-lazy-cloud-heartbeat-server-start-1.3.1-JDK24.jar
+
+# 启动客户端
+cd ../wu-lazy-cloud-heartbeat-client-start
+java -jar target/wu-lazy-cloud-heartbeat-client-start-1.3.1-JDK24.jar</code></pre>
+              </div>
+              
+              <div class="option-actions">
+                <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="btn btn-outline">
+                  <el-icon><Platform /></el-icon>
+                  下载源码
+                </a>
+              </div>
+            </div>
+          </div>
+          
+          <div class="option-card">
+            <div class="option-header">
+              <div class="option-icon">
+                <el-icon><Setting /></el-icon>
+              </div>
+              <h3>预编译包</h3>
+              <p>直接下载预编译的 JAR 包</p>
+            </div>
+            
+            <div class="option-content">
+              <h4>下载链接</h4>
+              <div class="download-links">
+                <div class="download-link">
+                  <span class="link-label">服务端</span>
+                  <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network/releases" target="_blank" class="link-url">
+                    wu-lazy-cloud-heartbeat-server-start-1.3.1-JDK24.jar
+                  </a>
+                </div>
+                <div class="download-link">
+                  <span class="link-label">客户端</span>
+                  <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network/releases" target="_blank" class="link-url">
+                    wu-lazy-cloud-heartbeat-client-start-1.3.1-JDK24.jar
+                  </a>
+                </div>
+                <div class="download-link">
+                  <span class="link-label">集群版</span>
+                  <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network/releases" target="_blank" class="link-url">
+                    wu-lazy-cloud-heartbeat-server-cluster-start-1.3.1-JDK24.jar
+                  </a>
+                </div>
+              </div>
+              
+              <h4>启动命令</h4>
+              <div class="code-block">
+                <pre><code class="language-bash"># 服务端启动
+java -jar wu-lazy-cloud-heartbeat-server-start-1.3.1-JDK24.jar
+
+# 客户端启动
+java -jar wu-lazy-cloud-heartbeat-client-start-1.3.1-JDK24.jar</code></pre>
+              </div>
+              
+              <div class="option-actions">
+                <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network/releases" target="_blank" class="btn btn-outline">
+                  <el-icon><Download /></el-icon>
+                  下载 JAR 包
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Deployment Globe -->
+    <section class="deployment-guide">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">部署指南</h2>
+          <p class="section-subtitle">详细的部署说明和最佳实践</p>
+        </div>
+        
+        <div class="guide-content">
+          <div class="guide-tabs">
+            <el-tabs v-model="activeGlobeTab">
+              <el-tab-pane label="Docker 部署" name="docker">
+                <div class="guide-section">
+                  <h3>Docker 部署指南</h3>
+                  
+                  <h4>1. 环境准备</h4>
+                  <ul>
+                    <li>安装 Docker 20.10+</li>
+                    <li>确保 Docker 服务正在运行</li>
+                    <li>准备公网 IP 地址（服务端）</li>
+                  </ul>
+                  
+                  <h4>2. 启动服务端</h4>
+                  <div class="code-block">
+                    <pre><code class="language-bash"># 拉取镜像
+docker pull registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.1-JDK24
+
+# 启动容器
+docker run -d -it -p 6001:6001 -p 7001:7001 -p 8001:8001 -p 9001:9001 \
+  --name wlcn-server \
+  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.1-JDK24</code></pre>
+                  </div>
+                  
+                  <h4>3. 启动客户端</h4>
+                  <div class="code-block">
+                    <pre><code class="language-bash"># 拉取镜像
+docker pull registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24
+
+# 启动容器（替换 YOUR_SERVER_IP 为实际服务端 IP）
+docker run -d -it --privileged -p 6004:6004 \
+  --name wlcn-client \
+  --restart=always \
+  -e spring.lazy.netty.client.inet-host=YOUR_SERVER_IP \
+  -e spring.lazy.netty.client.inet-port=7001 \
+  -e spring.lazy.netty.client.client-id="your-client-id" \
+  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24</code></pre>
+                  </div>
+                  
+                  <h4>4. 验证部署</h4>
+                  <ul>
+                    <li>访问服务端管理界面: <code>http://服务端IP:6001/netty-server-ui/index.html</code></li>
+                    <li>访问客户端管理界面: <code>http://客户端IP:6004/netty-client-local-ui/index.html</code></li>
+                    <li>默认登录信息: admin/admin</li>
+                  </ul>
+                </div>
+              </el-tab-pane>
+              
+              <el-tab-pane label="源码部署" name="source">
+                <div class="guide-section">
+                  <h3>源码部署指南</h3>
+                  
+                  <h4>1. 环境准备</h4>
+                  <ul>
+                    <li>安装 JDK 24 或 JDK 17+</li>
+                    <li>安装 Maven 3.6+</li>
+                    <li>安装 Git 2.30+</li>
+                    <li>准备 MySQL 8.0+ (可选)</li>
+                  </ul>
+                  
+                  <h4>2. 获取源码</h4>
+                  <div class="code-block">
+                    <pre><code class="language-bash"># 克隆项目
+git clone https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network.git
+cd wu-lazy-cloud-network
+
+# 切换到稳定版本
+git checkout v1.3.1-JDK24</code></pre>
+                  </div>
+                  
+                  <h4>3. 编译项目</h4>
+                  <div class="code-block">
+                    <pre><code class="language-bash"># 编译所有模块
+mvn clean package -DskipTests
+
+# 或者编译特定模块
+mvn clean package -pl wu-lazy-cloud-heartbeat-server-start -am -DskipTests
+mvn clean package -pl wu-lazy-cloud-heartbeat-client-start -am -DskipTests</code></pre>
+                  </div>
+                  
+                  <h4>4. 启动应用</h4>
+                  <div class="code-block">
+                    <pre><code class="language-bash"># 启动服务端
+cd wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-server-start
+java -jar target/wu-lazy-cloud-heartbeat-server-start-1.3.1-JDK24.jar
+
+# 启动客户端
+cd ../wu-lazy-cloud-heartbeat-client-start
+java -jar target/wu-lazy-cloud-heartbeat-client-start-1.3.1-JDK24.jar</code></pre>
+                  </div>
+                </div>
+              </el-tab-pane>
+              
+              <el-tab-pane label="集群部署" name="cluster">
+                <div class="guide-section">
+                  <h3>集群部署指南</h3>
+                  
+                  <h4>1. 集群架构</h4>
+                  <p>支持多节点集群部署，提供高可用性和负载均衡</p>
+                  
+                  <h4>2. 节点配置</h4>
+                  <div class="code-block">
+                    <pre><code class="language-yaml">spring:
+  lazy:
+    netty:
+      server:
+        mode: cluster
+        node-id: node-1
+        node-host: 192.168.1.100
+        node-port: 7001</code></pre>
+                  </div>
+                  
+                  <h4>3. 启动集群节点</h4>
+                  <div class="code-block">
+                    <pre><code class="language-bash"># 启动集群服务端
+cd wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-server-cluster-start
+java -jar target/wu-lazy-cloud-heartbeat-server-cluster-start-1.3.1-JDK24.jar</code></pre>
+                  </div>
+                  
+                  <h4>4. 负载均衡</h4>
+                  <ul>
+                    <li>使用 Nginx 进行负载均衡</li>
+                    <li>配置健康检查和故障转移</li>
+                    <li>支持会话保持</li>
+                  </ul>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- System Requirements -->
+    <section class="system-requirements">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">系统要求</h2>
+          <p class="section-subtitle">确保您的环境满足运行要求</p>
+        </div>
+        
+        <div class="requirements-grid">
+          <div class="requirement-card">
+            <div class="requirement-header">
+              <el-icon><Monitor /></el-icon>
+              <h3>操作系统</h3>
+            </div>
+            <ul>
+              <li>Linux (Ubuntu 18.04+, CentOS 7+)</li>
+              <li>Windows 10+</li>
+              <li>macOS 10.15+</li>
+            </ul>
+          </div>
+          
+          <div class="requirement-card">
+            <div class="requirement-header">
+              <el-icon><Cpu /></el-icon>
+              <h3>Java 环境</h3>
+            </div>
+            <ul>
+              <li>JDK 24 (推荐)</li>
+              <li>JDK 17+ (最低要求)</li>
+              <li>JVM 内存: 512MB+</li>
+            </ul>
+          </div>
+          
+          <div class="requirement-card">
+            <div class="requirement-header">
+              <el-icon><DataBase /></el-icon>
+              <h3>数据库</h3>
+            </div>
+            <ul>
+              <li>MySQL 8.0+ (生产环境)</li>
+              <li>H2 2.1+ (开发环境)</li>
+              <li>支持自动初始化</li>
+            </ul>
+          </div>
+          
+          <div class="requirement-card">
+            <div class="requirement-header">
+              <el-icon><Connection /></el-icon>
+              <h3>网络要求</h3>
+            </div>
+            <ul>
+              <li>服务端需要公网 IP</li>
+              <li>端口 6001, 7001, 8001, 9001</li>
+              <li>客户端端口 6004, 8002, 9002</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
+import { 
+  Box, 
+  Download, 
+  Setting, 
+  Platform,
+  Monitor,
+  Cpu,
+  // DataBase,   // 替换 DataBase
+  Connection,
+  // Server,    // 替换 Server
+  // Globe       // 替换 Globe
+} from '@element-plus/icons-vue'
+
+const activeGlobeTab = ref('docker')
+
+onMounted(() => {
+  // 高亮代码块
+  if (window.Prism) {
+    window.Prism.highlightAll()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.download-page {
+  min-height: 100vh;
+}
+
+// Hero Section
+.hero {
+  padding: 120px 0 60px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  
+  .hero-title {
+    font-size: 48px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 32px;
+    }
+  }
+  
+  .hero-subtitle {
+    font-size: 18px;
+    opacity: 0.9;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+// Version Info
+.version-info {
+  padding: 60px 0;
+  background: var(--background-color);
+}
+
+.version-card {
+  max-width: 600px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 12px;
+  padding: 40px;
+  box-shadow: var(--shadow-light);
+  text-align: center;
+  
+  .version-header {
+    margin-bottom: 30px;
+    
+    h2 {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 16px;
+    }
+    
+    .version-badge {
+      display: inline-block;
+      background: var(--primary-color);
+      color: white;
+      padding: 8px 16px;
+      border-radius: 6px;
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
+  
+  .version-details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    
+    .detail-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--border-light);
+      
+      .label {
+        color: var(--text-regular);
+        font-weight: 500;
+      }
+      
+      .value {
+        color: var(--text-primary);
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+// Section Header
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+  
+  .section-title {
+    font-size: 36px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 28px;
+    }
+  }
+  
+  .section-subtitle {
+    font-size: 18px;
+    color: var(--text-regular);
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+// Download Options
+.download-options {
+  padding: 80px 0;
+  background: var(--background-light);
+}
+
+.options-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 30px;
+}
+
+.option-card {
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: var(--shadow-light);
+  transition: transform 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-4px);
+  }
+  
+  .option-header {
+    text-align: center;
+    margin-bottom: 30px;
+    
+    .option-icon {
+      width: 60px;
+      height: 60px;
+      background: var(--primary-color);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 16px;
+      
+      .el-icon {
+        font-size: 28px;
+        color: white;
+      }
+    }
+    
+    h3 {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 8px;
+    }
+    
+    p {
+      color: var(--text-regular);
+      font-size: 14px;
+    }
+  }
+  
+  .option-content {
+    h4 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 12px;
+    }
+    
+    ul {
+      list-style: none;
+      margin-bottom: 20px;
+      
+      li {
+        color: var(--text-regular);
+        margin-bottom: 6px;
+        position: relative;
+        padding-left: 16px;
+        
+        &::before {
+          content: '•';
+          position: absolute;
+          left: 0;
+          color: var(--primary-color);
+        }
+      }
+    }
+    
+    .download-links {
+      margin-bottom: 20px;
+      
+      .download-link {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 0;
+        border-bottom: 1px solid var(--border-light);
+        
+        .link-label {
+          font-weight: 500;
+          color: var(--text-primary);
+        }
+        
+        .link-url {
+          color: var(--primary-color);
+          text-decoration: none;
+          font-size: 14px;
+          
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+    
+    .option-actions {
+      text-align: center;
+      margin-top: 20px;
+    }
+  }
+}
+
+// Deployment Globe
+.deployment-guide {
+  padding: 80px 0;
+  background: var(--background-color);
+}
+
+.guide-content {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.guide-section {
+  h3 {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 20px;
+  }
+  
+  h4 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 20px 0 12px;
+  }
+  
+  ul {
+    list-style: none;
+    margin-bottom: 20px;
+    
+    li {
+      color: var(--text-regular);
+      margin-bottom: 6px;
+      position: relative;
+      padding-left: 16px;
+      
+      &::before {
+        content: '•';
+        position: absolute;
+        left: 0;
+        color: var(--primary-color);
+      }
+    }
+  }
+  
+  code {
+    background: var(--background-light);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 14px;
+  }
+}
+
+// System Requirements
+.system-requirements {
+  padding: 80px 0;
+  background: var(--background-light);
+}
+
+.requirements-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+}
+
+.requirement-card {
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: var(--shadow-light);
+  
+  .requirement-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+    
+    .el-icon {
+      font-size: 24px;
+      color: var(--primary-color);
+    }
+    
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+  }
+  
+  ul {
+    list-style: none;
+    
+    li {
+      color: var(--text-regular);
+      margin-bottom: 8px;
+      position: relative;
+      padding-left: 16px;
+      
+      &::before {
+        content: '✓';
+        position: absolute;
+        left: 0;
+        color: var(--success-color);
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style> 

website/src/views/Features.vue

@@ -0,0 +1,641 @@
+<template>
+  <div class="features-page">
+    <Header />
+    
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="container">
+        <div class="hero-content">
+          <h1 class="hero-title">功能特性</h1>
+          <p class="hero-subtitle">
+            提供完整的内网穿透和网络代理解决方案，支持多种协议和部署模式
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features Overview -->
+    <section class="features-overview">
+      <div class="container">
+        <div class="features-grid">
+          <div class="feature-item" id="penetration">
+            <div class="feature-header">
+              <div class="feature-icon">
+                <el-icon><Connection /></el-icon>
+              </div>
+              <h2 class="feature-title">内网穿透</h2>
+            </div>
+            <p class="feature-description">
+              支持多种穿透模式，将内网服务安全地暴露到公网，实现远程访问和调试。
+            </p>
+            
+            <div class="feature-details">
+              <h3>穿透模式</h3>
+              <div class="mode-grid">
+                <div class="mode-card">
+                  <h4>服务端渗透客户端</h4>
+                  <p>将内网服务映射到公网，实现远程访问</p>
+                  <div class="code-block">
+                    <pre><code class="language-yaml"># 配置示例
+visitor_port: 19080
+real_host: 192.168.1.100
+real_port: 18080</code></pre>
+                  </div>
+                </div>
+                
+                <div class="mode-card">
+                  <h4>客户端渗透服务端</h4>
+                  <p>本地端口映射到远程服务端端口</p>
+                  <div class="code-block">
+                    <pre><code class="language-yaml"># 配置示例
+local_port: 13306
+remote_port: 3306</code></pre>
+                  </div>
+                </div>
+                
+                <div class="mode-card">
+                  <h4>客户端渗透客户端</h4>
+                  <p>不同网络间的端口映射，实现异地组网</p>
+                  <div class="code-block">
+                    <pre><code class="language-yaml"># 配置示例
+client_a_port: 8080
+client_b_port: 9090</code></pre>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="feature-item" id="proxy">
+            <div class="feature-header">
+              <div class="feature-icon">
+                <el-icon><Share /></el-icon>
+              </div>
+              <h2 class="feature-title">网络代理</h2>
+            </div>
+            <p class="feature-description">
+              提供 HTTP 和 SOCKS 代理服务，支持异地组网和网络加速。
+            </p>
+            
+            <div class="feature-details">
+              <h3>代理类型</h3>
+              <div class="proxy-types">
+                <div class="proxy-type">
+                  <h4>HTTP 代理</h4>
+                  <ul>
+                    <li>支持 HTTP/HTTPS 协议</li>
+                    <li>可配置代理认证</li>
+                    <li>支持流量监控</li>
+                    <li>端口：服务端 8001，客户端 8002</li>
+                  </ul>
+                </div>
+                
+                <div class="proxy-type">
+                  <h4>SOCKS 代理</h4>
+                  <ul>
+                    <li>支持 SOCKS4/SOCKS5 协议</li>
+                    <li>支持 TCP/UDP 代理</li>
+                    <li>可配置认证机制</li>
+                    <li>端口：服务端 9001，客户端 9002</li>
+                  </ul>
+                </div>
+              </div>
+              
+              <div class="proxy-config">
+                <h4>代理配置示例</h4>
+                <div class="code-block">
+                  <pre><code class="language-yaml">spring:
+  lazy:
+    netty:
+      protocol:
+        proxy:
+          authentication: true
+          enable-proxy-log: false
+          socket-protocol-proxy:
+            port: 9001
+          http-protocol-proxy:
+            port: 8001</code></pre>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="feature-item" id="monitor">
+            <div class="feature-header">
+              <div class="feature-icon">
+                <el-icon><DataAnalysis /></el-icon>
+              </div>
+              <h2 class="feature-title">流量监控</h2>
+            </div>
+            <p class="feature-description">
+              实时监控网络流量使用情况，提供详细的统计报表和分析。
+            </p>
+            
+            <div class="feature-details">
+              <h3>监控功能</h3>
+              <div class="monitor-features">
+                <div class="monitor-feature">
+                  <h4>实时监控</h4>
+                  <ul>
+                    <li>监控每个客户端的实时流量</li>
+                    <li>按端口统计流量使用情况</li>
+                    <li>提供流量趋势图表</li>
+                    <li>支持流量告警设置</li>
+                  </ul>
+                </div>
+                
+                <div class="monitor-feature">
+                  <h4>报表功能</h4>
+                  <ul>
+                    <li>日流量统计报表</li>
+                    <li>客户端流量排行</li>
+                    <li>端口使用情况分析</li>
+                    <li>历史数据查询</li>
+                  </ul>
+                </div>
+              </div>
+              
+              <div class="monitor-stats">
+                <h4>监控指标</h4>
+                <div class="stats-grid">
+                  <div class="stat-card">
+                    <div class="stat-value">10,000+</div>
+                    <div class="stat-label">并发连接</div>
+                  </div>
+                  <div class="stat-card">
+                    <div class="stat-value">&lt; 10ms</div>
+                    <div class="stat-label">平均响应时间</div>
+                  </div>
+                  <div class="stat-card">
+                    <div class="stat-value">99.9%</div>
+                    <div class="stat-label">系统可用性</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="feature-item" id="route">
+            <div class="feature-header">
+              <div class="feature-icon">
+                <el-icon><Setting /></el-icon>
+              </div>
+              <h2 class="feature-title">路由管理</h2>
+            </div>
+            <p class="feature-description">
+              支持虚拟路由和流量转发，实现灵活的网络配置。
+            </p>
+            
+            <div class="feature-details">
+              <h3>路由功能</h3>
+              <div class="route-features">
+                <div class="route-feature">
+                  <h4>虚拟 IP 路由</h4>
+                  <p>创建虚拟 IP 地址，将流量代理到目标地址</p>
+                  <div class="code-block">
+                    <pre><code class="language-yaml"># 虚拟路由配置
+virtual_ip: 10.0.0.100
+target_host: 192.168.1.100
+target_port: 8080</code></pre>
+                  </div>
+                </div>
+                
+                <div class="route-feature">
+                  <h4>流量转发规则</h4>
+                  <ul>
+                    <li>支持基于端口的转发</li>
+                    <li>支持基于协议的转发</li>
+                    <li>支持负载均衡</li>
+                    <li>支持故障转移</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Security Features -->
+    <section class="security-features">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">安全特性</h2>
+          <p class="section-subtitle">多重安全机制，保障数据传输和访问安全</p>
+        </div>
+        
+        <div class="security-grid">
+          <div class="security-card">
+            <div class="security-icon">
+              <el-icon><Lock /></el-icon>
+            </div>
+            <h3>认证机制</h3>
+            <ul>
+              <li>Token 认证</li>
+              <li>AppKey/AppSecret 认证</li>
+              <li>代理认证</li>
+              <li>动态密钥管理</li>
+            </ul>
+          </div>
+          
+          <div class="security-card">
+            <div class="security-icon">
+              <el-icon><Key /></el-icon>
+            </div>
+            <h3>加密传输</h3>
+            <ul>
+              <li>SSL/TLS 加密</li>
+              <li>流量加密传输</li>
+              <li>敏感信息加密存储</li>
+              <li>支持自定义加密算法</li>
+            </ul>
+          </div>
+          
+          <div class="security-card">
+            <div class="security-icon">
+              <el-icon><User /></el-icon>
+            </div>
+            <h3>访问控制</h3>
+            <ul>
+              <li>基于角色的权限控制</li>
+              <li>细粒度权限管理</li>
+              <li>操作审计日志</li>
+              <li>访问白名单</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
+import { 
+  Connection, 
+  Share, 
+  DataAnalysis, 
+  Setting,
+  Lock,
+  Key,
+  User
+} from '@element-plus/icons-vue'
+
+onMounted(() => {
+  // 高亮代码块
+  if (window.Prism) {
+    window.Prism.highlightAll()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.features-page {
+  min-height: 100vh;
+}
+
+// Hero Section
+.hero {
+  padding: 120px 0 60px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  
+  .hero-title {
+    font-size: 48px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 32px;
+    }
+  }
+  
+  .hero-subtitle {
+    font-size: 18px;
+    opacity: 0.9;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+// Features Overview
+.features-overview {
+  padding: 80px 0;
+  background: var(--background-color);
+}
+
+.features-grid {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.feature-item {
+  margin-bottom: 80px;
+  
+  .feature-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 20px;
+    
+    .feature-icon {
+      width: 60px;
+      height: 60px;
+      background: var(--primary-color);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      .el-icon {
+        font-size: 28px;
+        color: white;
+      }
+    }
+    
+    .feature-title {
+      font-size: 32px;
+      font-weight: 700;
+      color: var(--text-primary);
+      
+      @media (max-width: 768px) {
+        font-size: 24px;
+      }
+    }
+  }
+  
+  .feature-description {
+    font-size: 18px;
+    color: var(--text-regular);
+    line-height: 1.6;
+    margin-bottom: 30px;
+  }
+}
+
+.feature-details {
+  h3 {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 20px;
+  }
+}
+
+// Mode Grid
+.mode-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.mode-card {
+  background: var(--background-light);
+  border-radius: 8px;
+  padding: 20px;
+  
+  h4 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+  }
+  
+  p {
+    color: var(--text-regular);
+    margin-bottom: 12px;
+  }
+}
+
+// Proxy Types
+.proxy-types {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+  margin-bottom: 30px;
+}
+
+.proxy-type {
+  h4 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+  }
+  
+  ul {
+    list-style: none;
+    
+    li {
+      color: var(--text-regular);
+      margin-bottom: 6px;
+      position: relative;
+      padding-left: 16px;
+      
+      &::before {
+        content: '✓';
+        position: absolute;
+        left: 0;
+        color: var(--success-color);
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+// Monitor Features
+.monitor-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+  margin-bottom: 30px;
+}
+
+.monitor-feature {
+  h4 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+  }
+  
+  ul {
+    list-style: none;
+    
+    li {
+      color: var(--text-regular);
+      margin-bottom: 6px;
+      position: relative;
+      padding-left: 16px;
+      
+      &::before {
+        content: '✓';
+        position: absolute;
+        left: 0;
+        color: var(--success-color);
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+// Stats Grid
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.stat-card {
+  text-align: center;
+  padding: 20px;
+  background: var(--background-light);
+  border-radius: 8px;
+  
+  .stat-value {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 8px;
+  }
+  
+  .stat-label {
+    color: var(--text-regular);
+    font-size: 14px;
+  }
+}
+
+// Route Features
+.route-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+}
+
+.route-feature {
+  h4 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+  }
+  
+  p {
+    color: var(--text-regular);
+    margin-bottom: 12px;
+  }
+  
+  ul {
+    list-style: none;
+    
+    li {
+      color: var(--text-regular);
+      margin-bottom: 6px;
+      position: relative;
+      padding-left: 16px;
+      
+      &::before {
+        content: '✓';
+        position: absolute;
+        left: 0;
+        color: var(--success-color);
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+// Security Features
+.security-features {
+  padding: 80px 0;
+  background: var(--background-light);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+  
+  .section-title {
+    font-size: 36px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 28px;
+    }
+  }
+  
+  .section-subtitle {
+    font-size: 18px;
+    color: var(--text-regular);
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+.security-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+}
+
+.security-card {
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: var(--shadow-light);
+  transition: transform 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-4px);
+  }
+  
+  .security-icon {
+    width: 60px;
+    height: 60px;
+    background: var(--primary-color);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    
+    .el-icon {
+      font-size: 28px;
+      color: white;
+    }
+  }
+  
+  h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+  }
+  
+  ul {
+    list-style: none;
+    
+    li {
+      color: var(--text-regular);
+      margin-bottom: 8px;
+      position: relative;
+      padding-left: 16px;
+      
+      &::before {
+        content: '✓';
+        position: absolute;
+        left: 0;
+        color: var(--success-color);
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style> 

website/src/views/Home.vue

@@ -0,0 +1,649 @@
+<template>
+  <div class="home">
+    <Header />
+    
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="container">
+        <div class="hero-content">
+          <div class="hero-text">
+            <h1 class="hero-title">
+              高性能网络穿透和代理工具
+            </h1>
+            <p class="hero-subtitle">
+              基于 Spring Boot 3.5.0 和 JDK 24 开发，支持 TCP、HTTP、SOCKS 协议，
+              提供完整的内网穿透、网络代理、流量监控等功能。
+            </p>
+            <div class="hero-actions">
+              <router-link to="/download" class="btn btn-primary btn-large">
+                <el-icon><Download /></el-icon>
+                立即下载
+              </router-link>
+              <router-link to="/docs" class="btn btn-outline btn-large">
+                <el-icon><Document /></el-icon>
+                查看文档
+              </router-link>
+            </div>
+            <div class="hero-stats">
+              <div class="stat-item">
+                <div class="stat-number">1.3.1</div>
+                <div class="stat-label">当前版本</div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-number">JDK 24</div>
+                <div class="stat-label">技术栈</div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-number">10K+</div>
+                <div class="stat-label">并发连接</div>
+              </div>
+            </div>
+          </div>
+          <div class="hero-visual">
+            <div class="network-diagram">
+              <div class="client-node">
+                <el-icon><Monitor /></el-icon>
+                <span>客户端</span>
+              </div>
+              <div class="connection-line"></div>
+              <div class="server-node">
+                <el-icon><Server /></el-icon>
+                <span>服务端</span>
+              </div>
+              <div class="connection-line"></div>
+              <div class="internet-node">
+                <el-icon><Globe /></el-icon>
+                <span>公网</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="features">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">核心功能</h2>
+          <p class="section-subtitle">提供完整的内网穿透和网络代理解决方案</p>
+        </div>
+        
+        <div class="features-grid">
+          <div class="feature-card card card-hover">
+            <div class="feature-icon">
+              <el-icon><Connection /></el-icon>
+            </div>
+            <h3 class="feature-title">内网穿透</h3>
+            <p class="feature-description">
+              支持多种穿透模式，将内网服务安全地暴露到公网，实现远程访问和调试。
+            </p>
+            <ul class="feature-list">
+              <li>服务端渗透客户端</li>
+              <li>客户端渗透服务端</li>
+              <li>客户端渗透客户端</li>
+              <li>支持 TCP/HTTP 协议</li>
+            </ul>
+          </div>
+          
+          <div class="feature-card card card-hover">
+            <div class="feature-icon">
+              <el-icon><Share /></el-icon>
+            </div>
+            <h3 class="feature-title">网络代理</h3>
+            <p class="feature-description">
+              提供 HTTP 和 SOCKS 代理服务，支持异地组网和网络加速。
+            </p>
+            <ul class="feature-list">
+              <li>HTTP/HTTPS 代理</li>
+              <li>SOCKS4/SOCKS5 代理</li>
+              <li>代理认证支持</li>
+              <li>流量加密传输</li>
+            </ul>
+          </div>
+          
+          <div class="feature-card card card-hover">
+            <div class="feature-icon">
+              <el-icon><DataAnalysis /></el-icon>
+            </div>
+            <h3 class="feature-title">流量监控</h3>
+            <p class="feature-description">
+              实时监控网络流量使用情况，提供详细的统计报表和分析。
+            </p>
+            <ul class="feature-list">
+              <li>实时流量统计</li>
+              <li>客户端流量排行</li>
+              <li>端口使用分析</li>
+              <li>流量趋势图表</li>
+            </ul>
+          </div>
+          
+          <div class="feature-card card card-hover">
+            <div class="feature-icon">
+              <el-icon><Setting /></el-icon>
+            </div>
+            <h3 class="feature-title">路由管理</h3>
+            <p class="feature-description">
+              支持虚拟路由和流量转发，实现灵活的网络配置。
+            </p>
+            <ul class="feature-list">
+              <li>虚拟 IP 路由</li>
+              <li>流量转发规则</li>
+              <li>智能路由选择</li>
+              <li>负载均衡支持</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Technology Section -->
+    <section class="technology">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">技术架构</h2>
+          <p class="section-subtitle">基于现代化的技术栈，提供高性能和可靠性</p>
+        </div>
+        
+        <div class="tech-grid">
+          <div class="tech-item">
+            <div class="tech-icon">
+              <el-icon><Monitor /></el-icon>
+            </div>
+            <h4>Spring Boot 3.5.0</h4>
+            <p>现代化的应用框架，提供快速开发和部署能力</p>
+          </div>
+          
+          <div class="tech-item">
+            <div class="tech-icon">
+              <el-icon><Connection /></el-icon>
+            </div>
+            <h4>Netty</h4>
+            <p>高性能异步网络框架，支持高并发连接处理</p>
+          </div>
+          
+          <div class="tech-item">
+            <div class="tech-icon">
+              <el-icon><DataBase /></el-icon>
+            </div>
+            <h4>Lazy ORM</h4>
+            <p>轻量级 ORM 框架，提供类型安全的数据库操作</p>
+          </div>
+          
+          <div class="tech-item">
+            <div class="tech-icon">
+              <el-icon><Cpu /></el-icon>
+            </div>
+            <h4>JDK 24</h4>
+            <p>最新的 Java 开发工具包，提供优秀的性能表现</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Quick Start Section -->
+    <section class="quick-start">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">快速开始</h2>
+          <p class="section-subtitle">几分钟内完成部署和配置</p>
+        </div>
+        
+        <div class="start-steps">
+          <div class="step-item">
+            <div class="step-number">1</div>
+            <div class="step-content">
+              <h4>启动服务端</h4>
+              <div class="code-block">
+                <pre><code class="language-bash">docker run -d -it -p 6001:6001 -p 7001:7001 -p 8001:8001 -p 9001:9001 \
+  --name wlcn-server \
+  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.1-JDK24</code></pre>
+              </div>
+            </div>
+          </div>
+          
+          <div class="step-item">
+            <div class="step-number">2</div>
+            <div class="step-content">
+              <h4>启动客户端</h4>
+              <div class="code-block">
+                <pre><code class="language-bash">docker run -d -it --privileged -p 6004:6004 \
+  --name wlcn-client \
+  --restart=always \
+  -e spring.lazy.netty.client.inet-host=YOUR_SERVER_IP \
+  -e spring.lazy.netty.client.inet-port=7001 \
+  -e spring.lazy.netty.client.client-id="your-client-id" \
+  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24</code></pre>
+              </div>
+            </div>
+          </div>
+          
+          <div class="step-item">
+            <div class="step-number">3</div>
+            <div class="step-content">
+              <h4>访问管理界面</h4>
+              <div class="code-block">
+                <pre><code class="language-bash"># 服务端管理界面
+http://127.0.0.1:6001/netty-server-ui/index.html
+
+# 客户端管理界面
+http://127.0.0.1:6004/netty-client-local-ui/index.html</code></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="start-actions">
+          <router-link to="/docs" class="btn btn-primary btn-large">
+            <el-icon><Document /></el-icon>
+            查看详细文档
+          </router-link>
+          <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="btn btn-outline btn-large">
+            <el-icon><Platform /></el-icon>
+            访问 GitHub
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta">
+      <div class="container">
+        <div class="cta-content">
+          <h2 class="cta-title">开始使用 Wu-Lazy-Cloud-Network</h2>
+          <p class="cta-subtitle">
+            加入数千名开发者，体验高性能的网络穿透和代理服务
+          </p>
+          <div class="cta-actions">
+            <router-link to="/download" class="btn btn-primary btn-large">
+              <el-icon><Download /></el-icon>
+              立即下载
+            </router-link>
+            <router-link to="/docs" class="btn btn-outline btn-large">
+              <el-icon><Document /></el-icon>
+              查看文档
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
+import { 
+  Download, 
+  Document, 
+  Connection, 
+  Share, 
+  DataAnalysis, 
+  Setting,
+  Monitor,
+  // Server,
+  // Globe,
+  // DataBase,
+  Cpu,
+  Platform
+} from '@element-plus/icons-vue'
+
+onMounted(() => {
+  // 高亮代码块
+  if (window.Prism) {
+    window.Prism.highlightAll()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.home {
+  min-height: 100vh;
+}
+
+// Hero Section
+.hero {
+  padding: 120px 0 80px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  
+  .hero-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+    
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+      gap: 40px;
+    }
+  }
+  
+  .hero-title {
+    font-size: 48px;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 24px;
+    
+    @media (max-width: 768px) {
+      font-size: 32px;
+    }
+  }
+  
+  .hero-subtitle {
+    font-size: 18px;
+    line-height: 1.6;
+    margin-bottom: 32px;
+    opacity: 0.9;
+  }
+  
+  .hero-actions {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 40px;
+    
+    @media (max-width: 768px) {
+      flex-direction: column;
+    }
+  }
+  
+  .hero-stats {
+    display: flex;
+    gap: 40px;
+    
+    @media (max-width: 768px) {
+      gap: 20px;
+    }
+    
+    .stat-item {
+      text-align: center;
+      
+      .stat-number {
+        font-size: 24px;
+        font-weight: 700;
+        margin-bottom: 4px;
+      }
+      
+      .stat-label {
+        font-size: 14px;
+        opacity: 0.8;
+      }
+    }
+  }
+  
+  .hero-visual {
+    .network-diagram {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 20px;
+      
+      .client-node,
+      .server-node,
+      .internet-node {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+        padding: 20px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 12px;
+        backdrop-filter: blur(10px);
+        
+        .el-icon {
+          font-size: 32px;
+        }
+        
+        span {
+          font-size: 14px;
+          font-weight: 500;
+        }
+      }
+      
+      .connection-line {
+        width: 40px;
+        height: 2px;
+        background: rgba(255, 255, 255, 0.3);
+        position: relative;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          right: 0;
+          top: -3px;
+          width: 0;
+          height: 0;
+          border-left: 6px solid rgba(255, 255, 255, 0.3);
+          border-top: 4px solid transparent;
+          border-bottom: 4px solid transparent;
+        }
+      }
+    }
+  }
+}
+
+// Features Section
+.features {
+  padding: 80px 0;
+  background: var(--background-color);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+  
+  .section-title {
+    font-size: 36px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 28px;
+    }
+  }
+  
+  .section-subtitle {
+    font-size: 18px;
+    color: var(--text-regular);
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 30px;
+}
+
+.feature-card {
+  .feature-icon {
+    width: 60px;
+    height: 60px;
+    background: var(--primary-color);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    
+    .el-icon {
+      font-size: 28px;
+      color: white;
+    }
+  }
+  
+  .feature-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+  }
+  
+  .feature-description {
+    color: var(--text-regular);
+    line-height: 1.6;
+    margin-bottom: 16px;
+  }
+  
+  .feature-list {
+    list-style: none;
+    
+    li {
+      color: var(--text-regular);
+      margin-bottom: 6px;
+      position: relative;
+      padding-left: 16px;
+      
+      &::before {
+        content: '✓';
+        position: absolute;
+        left: 0;
+        color: var(--success-color);
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+// Technology Section
+.technology {
+  padding: 80px 0;
+  background: var(--background-light);
+}
+
+.tech-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+}
+
+.tech-item {
+  text-align: center;
+  padding: 30px;
+  
+  .tech-icon {
+    width: 80px;
+    height: 80px;
+    background: white;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 20px;
+    box-shadow: var(--shadow-light);
+    
+    .el-icon {
+      font-size: 36px;
+      color: var(--primary-color);
+    }
+  }
+  
+  h4 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+  }
+  
+  p {
+    color: var(--text-regular);
+    line-height: 1.6;
+  }
+}
+
+// Quick Start Section
+.quick-start {
+  padding: 80px 0;
+  background: var(--background-color);
+}
+
+.start-steps {
+  max-width: 800px;
+  margin: 0 auto 40px;
+}
+
+.step-item {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 40px;
+  
+  .step-number {
+    width: 40px;
+    height: 40px;
+    background: var(--primary-color);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+  
+  .step-content {
+    flex: 1;
+    
+    h4 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 12px;
+    }
+  }
+}
+
+.start-actions {
+  text-align: center;
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+// CTA Section
+.cta {
+  padding: 80px 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  
+  .cta-title {
+    font-size: 36px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    
+    @media (max-width: 768px) {
+      font-size: 28px;
+    }
+  }
+  
+  .cta-subtitle {
+    font-size: 18px;
+    opacity: 0.9;
+    margin-bottom: 32px;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .cta-actions {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+    
+    @media (max-width: 768px) {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+</style> 

website/vite.config.js

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import viteCompression from 'vite-plugin-compression'
+
+export default defineConfig({
+  plugins: [vue(), viteCompression()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    port: 3000,
+    open: true
+  },
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    sourcemap: false,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['vue', 'vue-router', 'pinia'],
+          elementPlus: ['element-plus', '@element-plus/icons-vue']
+        }
+      }
+    }
+  }
+}) 

wu-lazy-cloud-heartbeat-client/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <groupId>top.wu2020</groupId>
         <artifactId>wu-lazy-cloud-network</artifactId>
-        <version>1.3.2-JDK24</version>
+        <version>1.3.4-JDK24-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 

wu-lazy-cloud-heartbeat-common/pom.xml

@@ -6,7 +6,7 @@
     <parent>
         <groupId>top.wu2020</groupId>
         <artifactId>wu-lazy-cloud-network</artifactId>
-        <version>1.3.2-JDK24</version>
+        <version>1.3.4-JDK24-SNAPSHOT</version>
     </parent>
 
     <artifactId>wu-lazy-cloud-heartbeat-common</artifactId>
@@ -56,7 +56,7 @@
         <dependency>
             <groupId>top.wu2020</groupId>
             <artifactId>wu-framework-queue</artifactId>
-            <version>1.3.2-JDK24</version>
+            <version>1.3.4-JDK24-SNAPSHOT</version>
         </dependency>
     </dependencies>
 

wu-lazy-cloud-heartbeat-dns/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <groupId>top.wu2020</groupId>
         <artifactId>wu-lazy-cloud-network</artifactId>
-        <version>1.3.2-JDK24</version>
+        <version>1.3.4-JDK24-SNAPSHOT</version>
     </parent>
 
     <modelVersion>4.0.0</modelVersion>

wu-lazy-cloud-heartbeat-protocol-proxy/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <groupId>top.wu2020</groupId>
         <artifactId>wu-lazy-cloud-network</artifactId>
-        <version>1.3.2-JDK24</version>
+        <version>1.3.4-JDK24-SNAPSHOT</version>
     </parent>
 
     <modelVersion>4.0.0</modelVersion>
@@ -81,7 +81,7 @@
         <dependency>
             <groupId>top.wu2020</groupId>
             <artifactId>wu-framework-queue</artifactId>
-            <version>1.3.2-JDK24</version>
+            <version>1.3.4-JDK24-SNAPSHOT</version>
         </dependency>
     </dependencies>
 

wu-lazy-cloud-heartbeat-server-cluster/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <groupId>top.wu2020</groupId>
         <artifactId>wu-lazy-cloud-network</artifactId>
-        <version>1.3.2-JDK24</version>
+        <version>1.3.4-JDK24-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 

wu-lazy-cloud-heartbeat-server/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <groupId>top.wu2020</groupId>
         <artifactId>wu-lazy-cloud-network</artifactId>
-        <version>1.3.2-JDK24</version>
+        <version>1.3.4-JDK24-SNAPSHOT</version>
     </parent>
 
     <modelVersion>4.0.0</modelVersion>

wu-lazy-cloud-heartbeat-start/pom.xml

@@ -5,7 +5,7 @@
 	<parent>
 		<groupId>top.wu2020</groupId>
 		<artifactId>wu-lazy-cloud-network</artifactId>
-		<version>1.3.2-JDK24</version>
+		<version>1.3.4-JDK24-SNAPSHOT</version>
 	</parent>
 
 	<artifactId>wu-lazy-cloud-heartbeat-start</artifactId>

wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-client-start/README.md

@@ -55,11 +55,6 @@ docker run -d -it --privileged --name client -p 6004:6004 registry.cn-hangzhou.a
 
 ```shell
 docker run -d -it --privileged --name windows-client --restart=always -e spring.lazy.netty.client.inet-host=124.222.152.160 -e spring.lazy.netty.client.inet-port=30560 -e spring.lazy.netty.client.client-id="windows-11" docker.io/library/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24
-```
-```shell
-
-docker run -d -it --privileged --name windows-client --restart=always -e spring.lazy.netty.client.inet-host=124.222.152.160 -e spring.lazy.netty.client.inet-port=30560 -e spring.lazy.netty.client.client-id="wfh" registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.1-JDK24-SNAPSHOT
-
 ```
 
 ```yaml

wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-client-start/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <groupId>top.wu2020</groupId>
         <artifactId>wu-lazy-cloud-heartbeat-start</artifactId>
-        <version>1.3.2-JDK24</version>
+        <version>1.3.4-JDK24-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 

wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-client-start/src/main/resources/application-dev.yml

@@ -5,13 +5,13 @@ spring:
 #        inet-host: 124.222.48.62
 #        inet-port: 30676
 #        inet-host: 124.222.152.160
-#        inet-port: 30560
+        inet-port: 30560
 #        inet-host: 192.168.15.121
 #        inet-port: 7001
 #        inet-host: 127.0.0.1
 #        inet-port: 7001
-        inet-host: "[2409:8a28:c00:f054:294a:4a5e:7769:d059]"
-        inet-port: 7001
+        inet-host: 124.222.152.160
+#        inet-port: 31560
         inet-path: wu-lazy-cloud-heartbeat-server
         client-id: socks-local-proxy # 客户端ID
         app-key: a4bf4415-25aa-4007-914b-31ec77d1292f

wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-client-start/src/main/resources/application.yml

@@ -29,7 +29,7 @@ spring:
       protocol:
         proxy:
           authentication: true
-          enable-proxy-log: false
+          enable-proxy-log: true
           socket-protocol-proxy:
             port: 9002
           http-protocol-proxy:

wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-server-cluster-start/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <groupId>top.wu2020</groupId>
         <artifactId>wu-lazy-cloud-heartbeat-start</artifactId>
-        <version>1.3.2-JDK24</version>
+        <version>1.3.4-JDK24-SNAPSHOT</version>
     </parent>
 
     <modelVersion>4.0.0</modelVersion>

wu-lazy-cloud-heartbeat-start/wu-lazy-cloud-heartbeat-server-start/pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <groupId>top.wu2020</groupId>
         <artifactId>wu-lazy-cloud-heartbeat-start</artifactId>
-        <version>1.3.2-JDK24</version>
+        <version>1.3.4-JDK24-SNAPSHOT</version>
     </parent>
 
     <modelVersion>4.0.0</modelVersion>