FreeBe Meta Frontend

FreeBe Meta是一个基于Web3技术的社区平台，旨在为用户提供项目管理、社区互动、数字资产管理等功能。本仓库包含FreeBe Meta的前端代码。

技术栈

• 框架: Vue 2.6
• UI库: Element UI 2.15
• 路由: Vue Router 3.0
• 状态管理: Vuex 3.1
• 国际化: Vue I18n
• Web3集成: Web3.js 1.2.9
• 地图服务: 高德地图 (AMap)
• 图表: ECharts 5.3
• 编辑器: CKEditor 5, Toast UI Editor

主要功能模块

项目管理

• 项目列表与详情
• 项目思维导图
• 项目悬赏管理

社区互动

• 内容发布与管理
• 用户互动功能
• 徽章系统

数字资产

• FreeBe代币管理
• 交易记录查询
• MINT功能

用户中心

• 个人信息管理
• 角色权限配置

安装与运行

环境要求

• Node.js >= 8.9
• npm >= 3.0.0 或 pnpm >= 9.14.2

安装依赖

# 使用npm
npm install

# 或使用pnpm
pnpm install

开发环境运行

npm run dev
# 或
pnpm dev

生产环境构建

npm run build:prod
# 或
pnpm build:prod

国际化支持

项目支持中文(zh-CN)和英文(en)两种语言，国际化文件位于src/lang/locales目录下。

添加新的翻译

1. 在对应语言目录下创建或编辑JSON文件
2. 使用$t('key')方式在组件中引用翻译

主题定制

主题相关样式位于src/styles目录下，可通过修改Element UI的样式变量进行定制。

地图功能

项目集成了高德地图服务，相关配置和样式可在src/components/map/AMap.vue中修改。

Web3功能

FreeBe代币相关功能位于src/views/finance/FreeBe.vue，支持与Polygon网络交互。

开发指南

权限配置

• 角色权限配置位于src/views/people/role/index.vue
• 路由权限控制在src/router/index.js中定义

分页实现

完整的分页器实现可参考：

• src/views/people/organization/index.vue
• src/views/people/role/index.vue

脚本工具

项目包含多个实用脚本，位于scripts目录：

• find-remaining-chinese.js: 查找未国际化的中文字符串
• i18n-auto-extract.js: 自动提取国际化文本

许可证

MIT