Reed UI

Appearance

前端架构设计文档 ​

文档基础信息 ​

  • 适用项目：grove-ui/reed-ui系统
  • 核心用途：明确grove-ui/reed-ui系统整体架构设计方案、技术选型、模块划分、交互逻辑及部署架构。

架构设计总览 ​

技术架构选型 ​

结合项目业务需求、性能要求与团队技术栈，选用成熟稳定、生态完善的技术体系，核心技术选型如下，统一版本避免兼容性问题：

前端技术栈 ​

  • 核心框架：Vue3
  • UI组件库：ElementPlus
  • 构建工具：Vite
  • 其他：Router（路由管控）、Pinia（状态管理）

依赖版本开发阶段不定期更新到最新

基础组件Grove-UI ​

Grove-UI负责基础组件集成与开发，以及部分与Grove api交互的功能封装。

API请求 ​

  • Method：POST
  • ContentType：application/json

Token授权机制 ​

采用由前端自定义token的方式，默认使用32个字符的随机字符串。

多语言 ​

  • 启动时加入langpacks/*.json前端资源，方便前端开发阶段快速添加资源
  • 通过引入getMessage().get获得多语言资源

图标 ​

每个系统都可以引入自定义的图标，也支持在运行期动态添加图标以替换现有图标。

组件库 ​

主要封装常用组件，按需添加。

业务组件库Reed-UI ​

ai ​

实现ai对话功能（需求调整，已延后开发）

chatroom ​

聊天室，包含

  • 群组聊天
  • 客服
  • 好友聊天

guidline ​

显示玩法说明

luckywheel ​

幸运转盘组件

payments ​

c2c支付

prizewheel ​

转盘，已暂停

reedenveloperain ​

红包雨，已暂停

redpacketrain ​

红包雨

wallet ​

虚拟币钱包

启动页示例 ​

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import { init } from 'reed-ui'
import 'reed-ui/dist/index.css'
import './assets/main.css'

import App from './App.vue'
import router from './router'

const loadLangpacks = (): Record<string, Record<string, string>> | undefined => {
    const jsons = import.meta.glob<{ default: Record<string, string> }>('./langpacks/*.json', { eager: true })
    if (!jsons || Object.keys(jsons).length === 0) {
        return undefined
    }

    const langpacks: Record<string, Record<string, string>> = {}
    for (const path in jsons) {
        if (jsons[path] && Object.keys(jsons[path].default).length > 0) {
            langpacks[path.substring(12, path.length - 5)] = jsons[path].default
        }
    }

    return Object.keys(langpacks).length === 0 ? undefined : langpacks
}

const app = createApp(App)

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(ElementPlus)

init({ app, pinia, url: 'http://localhost:8080', langpacks: loadLangpacks() })

app.use(router)

app.mount('#app')

http://localhost:8080替换为实际的api地址。

启动项目 ​

bin目录下有相应的启动脚本

后台 ​

cd console
# npm install
npm run dev

示例 ​

cd examples
# npm install
npm run dev

客服 ​

cd customerservice
# npm install
npm run dev

文档 ​

cd docs
# npm install
npm run docs:dev

h5app ​

cd h5app
# npm install
npm run dev