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:
60
admin-web/src/views/ChannelAccount.vue
Normal file
60
admin-web/src/views/ChannelAccount.vue
Normal 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>
|
||||
56
admin-web/src/views/ChannelSubject.vue
Normal file
56
admin-web/src/views/ChannelSubject.vue
Normal 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>
|
||||
58
admin-web/src/views/Conversation.vue
Normal file
58
admin-web/src/views/Conversation.vue
Normal 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>
|
||||
42
admin-web/src/views/Dashboard.vue
Normal file
42
admin-web/src/views/Dashboard.vue
Normal 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>
|
||||
69
admin-web/src/views/InboundFlow.vue
Normal file
69
admin-web/src/views/InboundFlow.vue
Normal 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>
|
||||
60
admin-web/src/views/Person.vue
Normal file
60
admin-web/src/views/Person.vue
Normal 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>
|
||||
110
admin-web/src/views/SendRecord.vue
Normal file
110
admin-web/src/views/SendRecord.vue
Normal 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>
|
||||
57
admin-web/src/views/Tag.vue
Normal file
57
admin-web/src/views/Tag.vue
Normal 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>
|
||||
Reference in New Issue
Block a user