# MOSE Web 网站结构文档

## 1. 整体架构

MOSE Web 是一个基于 Vue 3 + TypeScript 构建的多语言网站，展示全球隐私跨链基础设施的官方网站。项目使用了以下技术栈：

- **前端框架**：Vue 3 + TypeScript
- **样式**：Tailwind CSS
- **动画**：animate.css, wow.js
- **国际化**：vue-i18n (支持中文、英文、日语)
- **路由**：Vue Router
- **媒体**：视频播放器

## 2. 页面结构

### 2.1 首页 (Home.vue)
- **英雄区**：展示主标题、副标题和行动号召按钮
- **视频区**：播放 MOSEVideo.mp4，自定义播放器控件
- **里程碑模块**：展示项目发展里程碑，包括2026年7月的平台扩展计划
- **活动计划模块**：展示即将举行的活动和会议
- **奖励机制模块**：展示注册空投和代币销毁机制
- **收益制度模块**：展示V4和V5两种激励机制
- **市场数据模块**：展示交易规模、年增长率和安全事件数据
- **行动号召区**：引导用户探索生态系统

### 2.2 生态系统页面 (Ecosystem.vue)
- **英雄区**：展示生态系统标题和描述
- **十大生态卡片**：展示MOSE的十大生态系统组件
- **十大分公司布局**：展示全球公司分布和详情
- **特色项目**：展示精选的生态系统项目
- **所有项目**：按类别展示所有项目，支持筛选
- **合作伙伴**：展示战略合作伙伴
- **行动号召区**：鼓励加入生态系统

### 2.3 关于我们页面 (About.vue)
- **英雄区**：展示关于我们的标题和描述
- **我们的故事**：介绍MOSE的历史和使命
- **团队介绍**：展示核心团队成员
- **发展历程**：展示项目的重要里程碑

### 2.4 资源页面 (Resources.vue)
- **英雄区**：展示资源标题和描述
- **资源分类**：按类别展示各种资源
- **资源项目**：展示文档、教程、SDK等资源
- **订阅区**：允许用户订阅通讯

### 2.5 社区页面 (Community.vue)
- **英雄区**：展示社区标题和描述
- **社区渠道**：展示Discord、Telegram等社区渠道
- **社区活动**：展示即将举行和过去的活动
- **社区贡献者**：展示社区贡献者

### 2.6 常见问题页面 (FAQ.vue)
- **英雄区**：展示FAQ标题和描述
- **搜索区**：允许用户搜索问题
- **问题分类**：按类别展示常见问题
- **问题列表**：展示问题和答案

### 2.7 联系我们页面 (Contact.vue)
- **英雄区**：展示联系我们的标题和描述
- **联系表单**：允许用户发送消息
- **联系信息**：展示地址、电话、工作时间等
- **社交媒体**：展示社交媒体链接

### 2.8 404页面 (NotFound.vue)
- 当访问不存在的路径时显示的页面

## 3. 组件结构

### 3.1 布局组件
- **NavBar.vue**：顶部导航栏，包含菜单和语言切换
- **Footer.vue**：页脚，包含版权信息和链接

### 3.2 首页组件
- **MilestoneModule.vue**：展示发展里程碑，包括2026年7月的平台扩展计划
- **EventsModule.vue**：展示活动计划，包括新加坡共识大会等
- **CoreValuesModule.vue**：展示核心价值主张（隐私保护、跨链互操作、合规安全）
- **ProjectIntroModule.vue**：展示项目简介
- **PartnersModule.vue**：展示合作伙伴LOGO墙
- **NewsModule.vue**：展示最新动态

### 3.3 生态系统组件
- **EcosystemCard.vue**：展示十大生态系统，包括MOSE L1链、闪兑盒子等
- **CompanyCard.vue**：展示全球公司布局，包括新加坡总部等

### 3.4 奖励组件
- **RewardModule.vue**：展示奖励机制和代币销毁机制
- **IncentiveModule.vue**：展示收益制度和部分市场数据
- **MarketDataModule.vue**：展示市场数据，包括交易规模、增长率等

### 3.5 通用组件
- **HelloWorld.vue**：基础组件示例

## 4. 数据需求

### 4.1 里程碑数据
- 日期、标题、描述、完成状态

### 4.2 活动计划数据
- 日期、标题、描述、位置、链接、图标

### 4.3 生态系统数据
- 名称、描述、图标、链接

### 4.4 公司布局数据
- 名称、描述、业务重点、团队规模、位置、国旗、地图位置

### 4.5 奖励机制数据
- 空投数据：总地址数、符合条件地址、每地址奖励、规则
- 代币销毁数据：已销毁数量、目标销毁数量、销毁比例、停止阈值、机制描述

### 4.6 激励模型数据
- 名称、金额、特点、颜色、激活状态

### 4.7 市场数据
- 交易规模、增长率、安全事件数据

### 4.8 项目数据
- ID、名称、描述、类别、图片、URL、是否特色

### 4.9 合作伙伴数据
- ID、名称、Logo、URL

### 4.10 核心价值主张数据
- 图标、标题、描述

### 4.11 项目简介数据
- 文本内容

### 4.12 最新动态数据
- 标题、日期、内容

## 5. 国际化支持

项目支持三种语言：
- 中文 (zh.json)
- 英文 (en.json)
- 日语 (ja.json)

每个语言文件包含所有页面和组件的文本内容，按照层次结构组织。

## 6. 路由配置

路由配置在 router/index.ts 中定义，支持以下路由：
- / - 首页
- /ecosystem - 生态系统
- /about - 关于我们
- /resources - 资源
- /community - 社区
- /faq - 常见问题
- /contact - 联系我们
- /* - 404页面

## 7. 样式主题

网站使用深色主题，主要颜色包括：
- 主色：#1D4ED8 (蓝色)
- 背景色：深色背景
- 文本色：白色/灰色
- 强调色：根据不同组件有不同的强调色

样式使用 Tailwind CSS 实现，包括响应式设计，适配不同屏幕尺寸：
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px

## 8. 动画效果

网站使用 animate.css 和 wow.js 实现动画效果，包括：
- 淡入淡出
- 滑动
- 脉冲
- 缩放
- 悬浮

## 9. 性能优化

- 图片优化：使用适当大小的图片
- 延迟加载：非关键资源延迟加载
- 组件复用：避免重复组件和代码
- 条件渲染：根据需要渲染组件

## 10. 未来扩展

- 集成实时数据API
- 添加用户认证功能
- 增强社区互动功能
- 添加多语言内容管理系统