You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
6.0 KiB
189 lines
6.0 KiB
# 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
|
|
- 添加用户认证功能
|
|
- 增强社区互动功能
|
|
- 添加多语言内容管理系统
|