feat(admin-web): add Vue 3 admin console and deployment configs

- Add admin-web/ with Vite + Vue 3 + Element Plus + Vue Router
- Add 8 management pages: dashboard, channel subject/account, conversation,
  person, tag, send record (with test send), inbound flow
- Add API client modules for account/channel/crm/send/flow
- Add Dockerfile and nginx config for admin-web
- Add Dockerfile for mci-server
- Add docker-compose.app.yml for one-command app deployment
- Add K8s deployment manifests for backend/admin-web/channel-service
- Update scripts/local-up.sh with shared network and --with-apps option
This commit is contained in:
2026-07-07 12:42:17 +08:00
parent bd0ac464cf
commit 91d5c29f23
41 changed files with 2948 additions and 0 deletions

3
admin-web/src/App.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<router-view />
</template>

View File

@@ -0,0 +1,13 @@
import client from './client'
export function createTenant(data: { tenantCode: string; tenantName: string }) {
return client.post('/api/v1/account/tenant', data)
}
export function createUser(data: { username: string; password: string; realName?: string }) {
return client.post('/api/v1/account/user', data)
}
export function login(data: { tenantCode: string; username: string; password: string }) {
return client.post('/api/v1/account/login', data)
}

View File

@@ -0,0 +1,21 @@
import client from './client'
export function createChannelSubject(data: any) {
return client.post('/api/v1/channel-subject', data)
}
export function createChannelAccount(data: any) {
return client.post('/api/v1/channel-account', data)
}
export function createConversation(data: any) {
return client.post('/api/v1/conversation', data)
}
export function bindConversationAccount(conversationId: number, data: any) {
return client.post(`/api/v1/conversation/${conversationId}/bind-account`, data)
}
export function bindConversationTags(conversationId: number, data: any) {
return client.post(`/api/v1/conversation/${conversationId}/bind-tags`, data)
}

View File

@@ -0,0 +1,25 @@
import axios from 'axios'
const client = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL || '/msg-platform',
timeout: 30000,
headers: {
'Content-Type': 'application/json',
},
})
client.interceptors.request.use((config) => {
const tenantCode = localStorage.getItem('mci-tenant-code') || 'default'
config.headers['X-Tenant-Code'] = tenantCode
return config
})
client.interceptors.response.use(
(response) => response.data,
(error) => {
const message = error.response?.data?.message || error.message || '请求失败'
return Promise.reject(new Error(message))
}
)
export default client

13
admin-web/src/api/crm.ts Normal file
View File

@@ -0,0 +1,13 @@
import client from './client'
export function createPerson(data: any) {
return client.post('/api/v1/person', data)
}
export function listTags() {
return client.get('/api/v1/tag/list')
}
export function createTag(data: any) {
return client.post('/api/v1/tag', data)
}

View File

@@ -0,0 +1,9 @@
import client from './client'
export function createFlowDefinition(data: any) {
return client.post('/api/v1/flow/definition', data)
}
export function listFlowDefinitions() {
return client.get('/api/v1/flow/definition/list')
}

13
admin-web/src/api/send.ts Normal file
View File

@@ -0,0 +1,13 @@
import client from './client'
export function sendMessage(data: any) {
return client.post('/api/v1/send', data)
}
export function testSendMessage(data: any) {
return client.post('/api/v1/send/test', data)
}
export function listSendRecords(taskId: string) {
return client.get(`/api/v1/send/${taskId}/records`)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -0,0 +1,72 @@
<template>
<el-container class="layout">
<el-aside width="200px" class="sidebar">
<div class="logo">Sino MCI</div>
<el-menu :default-active="$route.path" router>
<el-menu-item index="/dashboard">
<span>概览</span>
</el-menu-item>
<el-menu-item index="/channel-subject">
<span>渠道主体</span>
</el-menu-item>
<el-menu-item index="/channel-account">
<span>渠道账号</span>
</el-menu-item>
<el-menu-item index="/conversation">
<span>会话/群聊</span>
</el-menu-item>
<el-menu-item index="/person">
<span>联系人</span>
</el-menu-item>
<el-menu-item index="/tag">
<span>标签</span>
</el-menu-item>
<el-menu-item index="/send-record">
<span>发送记录</span>
</el-menu-item>
<el-menu-item index="/inbound-flow">
<span>入站流程</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header class="header">
<span>{{ $route.meta.title || '消息中台' }}</span>
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
</script>
<style scoped>
.layout {
height: 100vh;
}
.sidebar {
background: #fff;
border-right: 1px solid #e4e7ed;
}
.logo {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #e4e7ed;
}
.header {
background: #fff;
border-bottom: 1px solid #e4e7ed;
display: flex;
align-items: center;
font-weight: 500;
}
</style>

11
admin-web/src/main.ts Normal file
View File

@@ -0,0 +1,11 @@
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

View File

@@ -0,0 +1,35 @@
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '../components/Layout.vue'
import Dashboard from '../views/Dashboard.vue'
import ChannelSubject from '../views/ChannelSubject.vue'
import ChannelAccount from '../views/ChannelAccount.vue'
import Conversation from '../views/Conversation.vue'
import Person from '../views/Person.vue'
import Tag from '../views/Tag.vue'
import SendRecord from '../views/SendRecord.vue'
import InboundFlow from '../views/InboundFlow.vue'
const routes = [
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [
{ path: 'dashboard', component: Dashboard, meta: { title: '概览' } },
{ path: 'channel-subject', component: ChannelSubject, meta: { title: '渠道主体' } },
{ path: 'channel-account', component: ChannelAccount, meta: { title: '渠道账号' } },
{ path: 'conversation', component: Conversation, meta: { title: '会话/群聊' } },
{ path: 'person', component: Person, meta: { title: '联系人' } },
{ path: 'tag', component: Tag, meta: { title: '标签' } },
{ path: 'send-record', component: SendRecord, meta: { title: '发送记录' } },
{ path: 'inbound-flow', component: InboundFlow, meta: { title: '入站流程' } },
],
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router

17
admin-web/src/style.css Normal file
View File

@@ -0,0 +1,17 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#app {
width: 100%;
min-height: 100vh;
}
.mt-4 {
margin-top: 20px;
}

View File

@@ -0,0 +1,60 @@
<template>
<div>
<el-form :model="form" inline>
<el-form-item label="账号类型">
<el-select v-model="form.accountType" placeholder="类型">
<el-option label="企微内部账号" :value="1" />
<el-option label="企微应用" :value="2" />
<el-option label="pywechat 个人号" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="渠道">
<el-input v-model="form.channelType" placeholder="wecom" />
</el-form-item>
<el-form-item label="账号ID">
<el-input v-model="form.accountId" placeholder="账号唯一标识" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="form.accountName" placeholder="名称" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleCreate">创建</el-button>
</el-form-item>
</el-form>
<el-table :data="accounts" border>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="accountType" label="类型" />
<el-table-column prop="channelType" label="渠道" />
<el-table-column prop="accountId" label="账号ID" />
<el-table-column prop="accountName" label="名称" />
<el-table-column prop="loginStatus" label="登录状态" />
<el-table-column prop="onlineStatus" label="在线状态" />
</el-table>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { createChannelAccount } from '@/api/channel'
const form = reactive({
accountType: 1,
channelType: 'wecom',
accountId: '',
accountName: '',
})
const accounts = ref<any[]>([])
async function handleCreate() {
try {
const res: any = await createChannelAccount(form)
accounts.value.unshift(res.data)
ElMessage.success('创建成功')
} catch (e: any) {
ElMessage.error(e.message)
}
}
</script>

View File

@@ -0,0 +1,56 @@
<template>
<div>
<el-form :model="form" inline>
<el-form-item label="渠道">
<el-select v-model="form.channelType" placeholder="选择渠道">
<el-option label="企微" value="wecom" />
<el-option label="钉钉" value="dingtalk" />
<el-option label="飞书" value="feishu" />
</el-select>
</el-form-item>
<el-form-item label="主体编码">
<el-input v-model="form.subjectCode" placeholder="主体编码" />
</el-form-item>
<el-form-item label="主体名称">
<el-input v-model="form.subjectName" placeholder="主体名称" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleCreate">创建</el-button>
</el-form-item>
</el-form>
<el-table :data="subjects" border>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="channelType" label="渠道" />
<el-table-column prop="subjectCode" label="编码" />
<el-table-column prop="subjectName" label="名称" />
<el-table-column prop="corpId" label="CorpID" />
<el-table-column prop="status" label="状态" />
</el-table>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { createChannelSubject } from '@/api/channel'
const form = reactive({
channelType: 'wecom',
subjectCode: '',
subjectName: '',
corpId: '',
})
const subjects = ref<any[]>([])
async function handleCreate() {
try {
const res: any = await createChannelSubject(form)
subjects.value.unshift(res.data)
ElMessage.success('创建成功')
} catch (e: any) {
ElMessage.error(e.message)
}
}
</script>

View File

@@ -0,0 +1,58 @@
<template>
<div>
<el-form :model="form" inline>
<el-form-item label="会话类型">
<el-select v-model="form.conversationType" placeholder="类型">
<el-option label="单聊" :value="1" />
<el-option label="群聊" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="渠道">
<el-input v-model="form.channelType" placeholder="wecom" />
</el-form-item>
<el-form-item label="渠道会话ID">
<el-input v-model="form.channelConversationId" placeholder="roomid_xxx" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="form.conversationName" placeholder="群名称" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleCreate">创建</el-button>
</el-form-item>
</el-form>
<el-table :data="conversations" border>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="conversationType" label="类型" />
<el-table-column prop="channelType" label="渠道" />
<el-table-column prop="channelConversationId" label="渠道会话ID" />
<el-table-column prop="conversationName" label="名称" />
<el-table-column prop="status" label="状态" />
</el-table>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { createConversation } from '@/api/channel'
const form = reactive({
conversationType: 2,
channelType: 'wecom',
channelConversationId: '',
conversationName: '',
})
const conversations = ref<any[]>([])
async function handleCreate() {
try {
const res: any = await createConversation(form)
conversations.value.unshift(res.data)
ElMessage.success('创建成功')
} catch (e: any) {
ElMessage.error(e.message)
}
}
</script>

View File

@@ -0,0 +1,42 @@
<template>
<div>
<el-row :gutter="20">
<el-col :span="6">
<el-statistic title="渠道主体" :value="stats.subjects" />
</el-col>
<el-col :span="6">
<el-statistic title="渠道账号" :value="stats.accounts" />
</el-col>
<el-col :span="6">
<el-statistic title="会话/群聊" :value="stats.conversations" />
</el-col>
<el-col :span="6">
<el-statistic title="今日发送" :value="stats.sentToday" />
</el-col>
</el-row>
<el-card class="mt-4">
<template #header>使用说明</template>
<p>1. 先在渠道主体录入企微主体信息</p>
<p>2. 渠道账号添加发送/接收账号</p>
<p>3. 会话/群聊维护业务群并绑定发送账号</p>
<p>4. 发送记录查看业务系统调用发送 API 的结果</p>
</el-card>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const stats = reactive({
subjects: 0,
accounts: 0,
conversations: 0,
sentToday: 0,
})
</script>
<style scoped>
.mt-4 {
margin-top: 20px;
}
</style>

View File

@@ -0,0 +1,69 @@
<template>
<div>
<el-form :model="form" label-width="100px">
<el-form-item label="流程编码">
<el-input v-model="form.flowCode" placeholder="flow_code" />
</el-form-item>
<el-form-item label="流程名称">
<el-input v-model="form.flowName" placeholder="流程名称" />
</el-form-item>
<el-form-item label="节点配置">
<el-input v-model="nodesJson" type="textarea" :rows="8" placeholder='[{"nodeType":"receive"},{"nodeType":"intent","intent":"rescue_request"},{"nodeType":"webhook","webhookUrl":"http://..."}]' />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleCreate">保存流程</el-button>
</el-form-item>
</el-form>
<el-divider />
<el-table :data="flows" border>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="flowCode" label="流程编码" />
<el-table-column prop="flowName" label="名称" />
<el-table-column prop="status" label="状态" />
</el-table>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { createFlowDefinition, listFlowDefinitions } from '@/api/flow'
const form = reactive({
flowCode: '',
flowName: '',
nodes: [] as any[],
})
const nodesJson = computed({
get: () => JSON.stringify(form.nodes, null, 2),
set: (val) => {
try { form.nodes = JSON.parse(val) } catch {}
},
})
const flows = ref<any[]>([])
async function loadFlows() {
try {
const res: any = await listFlowDefinitions()
flows.value = res.data || []
} catch (e: any) {
ElMessage.error(e.message)
}
}
async function handleCreate() {
try {
const res: any = await createFlowDefinition(form)
flows.value.unshift(res.data)
ElMessage.success('保存成功')
} catch (e: any) {
ElMessage.error(e.message)
}
}
onMounted(loadFlows)
</script>

View File

@@ -0,0 +1,60 @@
<template>
<div>
<el-form :model="form" inline>
<el-form-item label="编码">
<el-input v-model="form.personCode" placeholder="人员编码" />
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="form.personName" placeholder="姓名" />
</el-form-item>
<el-form-item label="手机">
<el-input v-model="form.phone" placeholder="手机号" />
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.personType" placeholder="类型">
<el-option label="内部人员" :value="1" />
<el-option label="供应商人员" :value="2" />
<el-option label="客户" :value="3" />
<el-option label="司机" :value="4" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleCreate">创建</el-button>
</el-form-item>
</el-form>
<el-table :data="persons" border>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="personCode" label="编码" />
<el-table-column prop="personName" label="姓名" />
<el-table-column prop="phone" label="手机" />
<el-table-column prop="personType" label="类型" />
<el-table-column prop="status" label="状态" />
</el-table>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { createPerson } from '@/api/crm'
const form = reactive({
personCode: '',
personName: '',
phone: '',
personType: 3,
})
const persons = ref<any[]>([])
async function handleCreate() {
try {
const res: any = await createPerson(form)
persons.value.unshift(res.data)
ElMessage.success('创建成功')
} catch (e: any) {
ElMessage.error(e.message)
}
}
</script>

View File

@@ -0,0 +1,110 @@
<template>
<div>
<el-form :model="form" label-width="80px">
<el-form-item label="目标类型">
<el-select v-model="form.targetType" placeholder="选择目标类型">
<el-option label="会话" value="conversation" />
<el-option label="人员" value="person" />
<el-option label="人员列表" value="person_list" />
<el-option label="标签" value="tag" />
</el-select>
</el-form-item>
<el-form-item label="目标值">
<el-input v-model="targetValueJson" type="textarea" :rows="3" placeholder='{"conversation_id": 1}' />
</el-form-item>
<el-form-item label="内容类型">
<el-input v-model="form.contentType" placeholder="text" />
</el-form-item>
<el-form-item label="内容">
<el-input v-model="contentJson" type="textarea" :rows="3" placeholder='{"text": "hello"}' />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleTestSend">测试发送</el-button>
</el-form-item>
</el-form>
<el-divider />
<el-form :model="query" inline>
<el-form-item label="任务ID">
<el-input v-model="query.taskId" placeholder="任务ID" />
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">查询记录</el-button>
</el-form-item>
</el-form>
<el-table :data="records" border>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="taskId" label="任务ID" />
<el-table-column prop="targetType" label="目标类型" />
<el-table-column prop="channelType" label="渠道" />
<el-table-column prop="contentType" label="内容类型" />
<el-table-column prop="sendStatus" label="状态">
<template #default="scope">
<el-tag v-if="scope.row.sendStatus === 2" type="success">成功</el-tag>
<el-tag v-else-if="scope.row.sendStatus === 3" type="danger">失败</el-tag>
<el-tag v-else type="info">待发送</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" />
</el-table>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { testSendMessage, listSendRecords } from '@/api/send'
const form = reactive({
targetType: 'conversation',
targetValue: {} as any,
contentType: 'text',
content: {} as any,
})
const targetValueJson = computed({
get: () => JSON.stringify(form.targetValue, null, 2),
set: (val) => {
try { form.targetValue = JSON.parse(val) } catch {}
},
})
const contentJson = computed({
get: () => JSON.stringify(form.content, null, 2),
set: (val) => {
try { form.content = JSON.parse(val) } catch {}
},
})
const query = reactive({ taskId: '' })
const records = ref<any[]>([])
async function handleTestSend() {
try {
const res: any = await testSendMessage({
targetType: form.targetType,
targetValue: form.targetValue,
contentType: form.contentType,
content: form.content,
channelStrategy: { channel_type: 'wecom', strategy: 'primary' },
})
query.taskId = res.data.taskId
ElMessage.success('测试发送已提交')
await handleQuery()
} catch (e: any) {
ElMessage.error(e.message)
}
}
async function handleQuery() {
if (!query.taskId) return
try {
const res: any = await listSendRecords(query.taskId)
records.value = res.data || []
} catch (e: any) {
ElMessage.error(e.message)
}
}
</script>

View File

@@ -0,0 +1,57 @@
<template>
<div>
<el-form :model="form" inline>
<el-form-item label="标签名">
<el-input v-model="form.tagName" placeholder="标签名" />
</el-form-item>
<el-form-item label="父标签ID">
<el-input-number v-model="form.parentId" :min="0" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleCreate">创建</el-button>
</el-form-item>
</el-form>
<el-table :data="tags" border>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="tagName" label="名称" />
<el-table-column prop="tagPath" label="路径" />
<el-table-column prop="level" label="层级" />
<el-table-column prop="status" label="状态" />
</el-table>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { createTag, listTags } from '@/api/crm'
const form = reactive({
tagName: '',
parentId: 0,
})
const tags = ref<any[]>([])
async function loadTags() {
try {
const res: any = await listTags()
tags.value = res.data || []
} catch (e: any) {
ElMessage.error(e.message)
}
}
async function handleCreate() {
try {
const res: any = await createTag(form)
tags.value.unshift(res.data)
ElMessage.success('创建成功')
} catch (e: any) {
ElMessage.error(e.message)
}
}
onMounted(loadTags)
</script>

8
admin-web/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1,8 @@
/// <reference types="vite/client" />
declare module '*.css'
declare module '*.scss'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.svg'