admin/000-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 租户级企微配置改造
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- 新增 platform_tenant_wechat_apps 表（租户企微应用配置）
- platform_apps 增加 require_jssdk 字段
- platform_tenant_apps 增加 wechat_app_id 关联字段
- 新增企微应用管理 API 和页面
- 应用管理页面增加 JS-SDK 开关
- 应用配置页面增加企微应用选择
This commit is contained in:
111
2026-01-23 19:05:00 +08:00
parent f815b29c51
commit c4bd7c8251
13 changed files with 1198 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
frontend/src/router/index.js
View File

@@ -1,92 +1,98 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/login/index.vue'),
meta: { title: '登录', public: true }
},
{
path: '/',
component: () => import('@/components/Layout.vue'),
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index.vue'),
meta: { title: '仪表盘', icon: 'Odometer' }
},
{
path: 'tenants',
name: 'Tenants',
component: () => import('@/views/tenants/index.vue'),
meta: { title: '租户管理', icon: 'OfficeBuilding' }
},
{
path: 'tenants/:id',
name: 'TenantDetail',
component: () => import('@/views/tenants/detail.vue'),
meta: { title: '租户详情', hidden: true }
},
{
path: 'apps',
name: 'Apps',
component: () => import('@/views/apps/index.vue'),
meta: { title: '应用管理', icon: 'Grid' }
},
{
path: 'app-config',
name: 'AppConfig',
component: () => import('@/views/app-config/index.vue'),
meta: { title: '租户应用配置', icon: 'Setting' }
},
{
path: 'stats',
name: 'Stats',
component: () => import('@/views/stats/index.vue'),
meta: { title: '统计分析', icon: 'TrendCharts' }
},
{
path: 'logs',
name: 'Logs',
component: () => import('@/views/logs/index.vue'),
meta: { title: '日志查看', icon: 'Document' }
},
{
path: 'users',
name: 'Users',
component: () => import('@/views/users/index.vue'),
meta: { title: '用户管理', icon: 'User', role: 'admin' }
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
// 路由守卫
router.beforeEach((to, from, next) => {
// 设置页面标题
document.title = to.meta.title ? `${to.meta.title} - 平台管理` : '平台管理'
// 检查登录状态
const authStore = useAuthStore()
if (to.meta.public) {
next()
} else if (!authStore.isLoggedIn) {
next('/login')
} else if (to.meta.role && authStore.user?.role !== to.meta.role) {
next('/dashboard')
} else {
next()
}
})
export default router
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/login/index.vue'),
meta: { title: '登录', public: true }
},
{
path: '/',
component: () => import('@/components/Layout.vue'),
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index.vue'),
meta: { title: '仪表盘', icon: 'Odometer' }
},
{
path: 'tenants',
name: 'Tenants',
component: () => import('@/views/tenants/index.vue'),
meta: { title: '租户管理', icon: 'OfficeBuilding' }
},
{
path: 'tenants/:id',
name: 'TenantDetail',
component: () => import('@/views/tenants/detail.vue'),
meta: { title: '租户详情', hidden: true }
},
{
path: 'apps',
name: 'Apps',
component: () => import('@/views/apps/index.vue'),
meta: { title: '应用管理', icon: 'Grid' }
},
{
path: 'tenant-wechat-apps',
name: 'TenantWechatApps',
component: () => import('@/views/tenant-wechat-apps/index.vue'),
meta: { title: '企微应用', icon: 'ChatDotRound' }
},
{
path: 'app-config',
name: 'AppConfig',
component: () => import('@/views/app-config/index.vue'),
meta: { title: '租户应用配置', icon: 'Setting' }
},
{
path: 'stats',
name: 'Stats',
component: () => import('@/views/stats/index.vue'),
meta: { title: '统计分析', icon: 'TrendCharts' }
},
{
path: 'logs',
name: 'Logs',
component: () => import('@/views/logs/index.vue'),
meta: { title: '日志查看', icon: 'Document' }
},
{
path: 'users',
name: 'Users',
component: () => import('@/views/users/index.vue'),
meta: { title: '用户管理', icon: 'User', role: 'admin' }
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
// 路由守卫
router.beforeEach((to, from, next) => {
// 设置页面标题
document.title = to.meta.title ? `${to.meta.title} - 平台管理` : '平台管理'
// 检查登录状态
const authStore = useAuthStore()
if (to.meta.public) {
next()
} else if (!authStore.isLoggedIn) {
next('/login')
} else if (to.meta.role && authStore.user?.role !== to.meta.role) {
next('/dashboard')
} else {
next()
}
})
export default router

123
frontend/src/views/app-config/index.vue
View File

@@ -19,6 +19,10 @@ const query = reactive({
// 应用列表（从应用管理获取）
const appList = ref([])
const appToolsMap = ref({}) // app_code -> tools[]
const appRequireJssdk = ref({}) // app_code -> require_jssdk
// 企微应用列表（按租户）
const wechatAppList = ref([]) // 当前表单租户的企微应用列表
// 对话框
const dialogVisible = ref(false)
@@ -29,12 +33,15 @@ const form = reactive({
tenant_id: '',
app_code: 'tools',
app_name: '',
wechat_corp_id: '',
wechat_agent_id: '',
wechat_secret: '',
wechat_app_id: null, // 关联的企微应用ID
allowed_tools: []
})
// 当前选择的应用是否需要 JS-SDK
const currentAppRequireJssdk = computed(() => {
return appRequireJssdk.value[form.app_code] || false
})
// 根据选择的应用获取工具选项
const toolOptions = computed(() => {
const tools = appToolsMap.value[form.app_code] || []
@@ -66,11 +73,13 @@ const urlInfo = ref({})
async function fetchApps() {
try {
const res = await api.get('/api/apps/all')
appList.value = res.data || []
const res = await api.get('/api/apps', { params: { size: 100 } })
const apps = res.data.items || []
appList.value = apps.map(a => ({ app_code: a.app_code, app_name: a.app_name }))
// 获取每个应用的工具列表
for (const app of appList.value) {
// 获取每个应用的工具列表和 JS-SDK 要求
for (const app of apps) {
appRequireJssdk.value[app.app_code] = app.require_jssdk || false
try {
const toolsRes = await api.get(`/api/apps/${app.app_code}/tools`)
appToolsMap.value[app.app_code] = toolsRes.data || []
@@ -83,6 +92,19 @@ async function fetchApps() {
}
}
async function fetchWechatApps(tenantId) {
if (!tenantId) {
wechatAppList.value = []
return
}
try {
const res = await api.get(`/api/tenant-wechat-apps/by-tenant/${tenantId}`)
wechatAppList.value = res.data || []
} catch (e) {
wechatAppList.value = []
}
}
async function fetchList() {
loading.value = true
try {
@@ -113,37 +135,38 @@ function handleCreate() {
tenant_id: '',
app_code: 'tools',
app_name: '',
wechat_corp_id: '',
wechat_agent_id: '',
wechat_secret: '',
wechat_app_id: null,
allowed_tools: []
})
wechatAppList.value = []
dialogVisible.value = true
}
function handleEdit(row) {
async function handleEdit(row) {
editingId.value = row.id
dialogTitle.value = '编辑应用配置'
Object.assign(form, {
tenant_id: row.tenant_id,
app_code: row.app_code,
app_name: row.app_name || '',
wechat_corp_id: row.wechat_corp_id || '',
wechat_agent_id: row.wechat_agent_id || '',
wechat_secret: '', // 不回显密钥
wechat_app_id: row.wechat_app_id || null,
allowed_tools: row.allowed_tools || []
})
// 获取该租户的企微应用列表
await fetchWechatApps(row.tenant_id)
dialogVisible.value = true
}
// 租户ID变化时重新获取企微应用列表
async function handleTenantChange() {
form.wechat_app_id = null
await fetchWechatApps(form.tenant_id)
}
async function handleSubmit() {
await formRef.value.validate()
const data = { ...form }
// 如果没有输入新密钥，不传这个字段
if (!data.wechat_secret) {
delete data.wechat_secret
}
try {
if (editingId.value) {
@@ -188,21 +211,6 @@ async function handleRegenerateToken(row) {
}
}
async function handleViewSecret(row) {
try {
const res = await api.get(`/api/tenant-apps/${row.id}/wechat-secret`)
if (res.data.wechat_secret) {
ElMessageBox.alert(res.data.wechat_secret, '微信 Secret', {
confirmButtonText: '关闭'
})
} else {
ElMessage.info('未配置微信 Secret')
}
} catch (e) {
// 错误已在拦截器处理
}
}
// 生成链接功能
function handleShowUrl(row) {
currentRow.value = row
@@ -319,12 +327,12 @@ onMounted(() => {
<el-table-column prop="tenant_id" label="租户ID" width="120" />
<el-table-column prop="app_code" label="应用" width="100" />
<el-table-column prop="app_name" label="应用名称" width="150" />
<el-table-column prop="wechat_corp_id" label="企业ID" width="150" show-overflow-tooltip />
<el-table-column prop="wechat_agent_id" label="应用ID" width="100" />
<el-table-column label="微信密钥" width="100">
<el-table-column label="企微应用" width="180">
<template #default="{ row }">
<el-tag v-if="row.has_wechat_secret" type="success" size="small">已配置</el-tag>
<el-tag v-else type="info" size="small">未配置</el-tag>
<template v-if="row.wechat_app">
<el-tag type="success" size="small">{{ row.wechat_app.name }}</el-tag>
</template>
<el-tag v-else type="info" size="small">未关联</el-tag>
</template>
</el-table-column>
<el-table-column label="Access Token" width="120">
@@ -341,12 +349,11 @@ onMounted(() => {
<span v-if="(row.allowed_tools || []).length > 3">...</span>
</template>
</el-table-column>
<el-table-column label="操作" width="300" fixed="right">
<el-table-column label="操作" width="250" fixed="right">
<template #default="{ row }">
<el-button type="success" link size="small" @click="handleShowUrl(row)">生成链接</el-button>
<el-button v-if="authStore.isOperator" type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
<el-button v-if="authStore.isOperator" type="warning" link size="small" @click="handleViewSecret(row)">密钥</el-button>
<el-button v-if="authStore.isOperator" type="info" link size="small" @click="handleRegenerateToken(row)">重置</el-button>
<el-button v-if="authStore.isOperator" type="info" link size="small" @click="handleRegenerateToken(row)">重置Token</el-button>
<el-button v-if="authStore.isOperator" type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
@@ -367,7 +374,12 @@ onMounted(() => {
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="租户ID" prop="tenant_id">
<el-input v-model="form.tenant_id" :disabled="!!editingId" placeholder="如: tenant_001" />
<el-input
v-model="form.tenant_id"
:disabled="!!editingId"
placeholder="如: qiqi"
@blur="handleTenantChange"
/>
</el-form-item>
<el-form-item label="应用" prop="app_code">
<el-select v-model="form.app_code" :disabled="!!editingId" placeholder="选择应用" style="width: 100%">
@@ -379,16 +391,25 @@ onMounted(() => {
<el-input v-model="form.app_name" placeholder="显示名称（可选）" />
</el-form-item>
<el-divider content-position="left">企业微信配置</el-divider>
<el-divider v-if="currentAppRequireJssdk" content-position="left">企业微信关联</el-divider>
<el-form-item label="企业 ID">
<el-input v-model="form.wechat_corp_id" placeholder="ww开头的企业ID" />
</el-form-item>
<el-form-item label="应用 ID">
<el-input v-model="form.wechat_agent_id" placeholder="自建应用的 AgentId" />
</el-form-item>
<el-form-item label="应用 Secret">
<el-input v-model="form.wechat_secret" type="password" show-password :placeholder="editingId ? '留空则不修改' : '应用的 Secret'" />
<el-form-item v-if="currentAppRequireJssdk" label="关联企微应用">
<el-select
v-model="form.wechat_app_id"
placeholder="选择企微应用"
clearable
style="width: 100%"
>
<el-option
v-for="wa in wechatAppList"
:key="wa.id"
:label="`${wa.name} (${wa.corp_id})`"
:value="wa.id"
/>
</el-select>
<div v-if="wechatAppList.length === 0 && form.tenant_id" style="color: #909399; font-size: 12px; margin-top: 4px">
该租户暂无企微应用，请先在「企微应用」中配置
</div>
</el-form-item>
<el-divider content-position="left">权限配置</el-divider>

618
frontend/src/views/apps/index.vue
View File

@@ -1,302 +1,316 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const query = reactive({
page: 1,
size: 20
})
// 对话框
const dialogVisible = ref(false)
const dialogTitle = ref('')
const editingId = ref(null)
const formRef = ref(null)
const form = reactive({
app_code: '',
app_name: '',
base_url: '',
description: '',
tools: []
})
const rules = {
app_code: [{ required: true, message: '请输入应用代码', trigger: 'blur' }],
app_name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }]
}
// 工具编辑
const toolDialogVisible = ref(false)
const editingToolIndex = ref(-1)
const toolForm = reactive({
code: '',
name: '',
path: ''
})
async function fetchList() {
loading.value = true
try {
const res = await api.get('/api/apps', { params: query })
tableData.value = res.data.items || []
total.value = res.data.total || 0
} catch (e) {
console.error(e)
} finally {
loading.value = false
}
}
function handleSearch() {
query.page = 1
fetchList()
}
function handlePageChange(page) {
query.page = page
fetchList()
}
function handleCreate() {
editingId.value = null
dialogTitle.value = '新建应用'
Object.assign(form, {
app_code: '',
app_name: '',
base_url: '',
description: '',
tools: []
})
dialogVisible.value = true
}
function handleEdit(row) {
editingId.value = row.id
dialogTitle.value = '编辑应用'
Object.assign(form, {
app_code: row.app_code,
app_name: row.app_name,
base_url: row.base_url || '',
description: row.description || '',
tools: row.tools || []
})
dialogVisible.value = true
}
async function handleSubmit() {
await formRef.value.validate()
const data = { ...form }
try {
if (editingId.value) {
await api.put(`/api/apps/${editingId.value}`, data)
ElMessage.success('更新成功')
} else {
await api.post('/api/apps', data)
ElMessage.success('创建成功')
}
dialogVisible.value = false
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
async function handleDelete(row) {
await ElMessageBox.confirm(`确定删除应用 "${row.app_name}" 吗？`, '提示', {
type: 'warning'
})
try {
await api.delete(`/api/apps/${row.id}`)
ElMessage.success('删除成功')
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
async function handleToggleStatus(row) {
const newStatus = row.status === 1 ? 0 : 1
try {
await api.put(`/api/apps/${row.id}`, { status: newStatus })
ElMessage.success(newStatus === 1 ? '已启用' : '已禁用')
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
// 工具管理
function handleAddTool() {
editingToolIndex.value = -1
Object.assign(toolForm, { code: '', name: '', path: '' })
toolDialogVisible.value = true
}
function handleEditTool(index) {
editingToolIndex.value = index
const tool = form.tools[index]
Object.assign(toolForm, { ...tool })
toolDialogVisible.value = true
}
function handleDeleteTool(index) {
form.tools.splice(index, 1)
}
function handleSaveTool() {
if (!toolForm.code || !toolForm.name) {
ElMessage.warning('请填写工具代码和名称')
return
}
const tool = { ...toolForm }
if (editingToolIndex.value >= 0) {
form.tools[editingToolIndex.value] = tool
} else {
form.tools.push(tool)
}
toolDialogVisible.value = false
}
onMounted(() => {
fetchList()
})
</script>
<template>
<div class="page-container">
<div class="page-header">
<div class="title">应用管理</div>
<el-button v-if="authStore.isOperator" type="primary" @click="handleCreate">
<el-icon><Plus /></el-icon>
新建应用
</el-button>
</div>
<div class="page-tip">
<el-alert type="info" :closable="false">
应用管理：定义可供租户使用的应用，配置应用的基础URL和工具列表。
租户配置中选择应用后，即可生成带签名的访问链接。
</el-alert>
</div>
<!-- 表格 -->
<el-table v-loading="loading" :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" width="60" />
<el-table-column prop="app_code" label="应用代码" width="120" />
<el-table-column prop="app_name" label="应用名称" width="150" />
<el-table-column prop="base_url" label="基础URL" min-width="250" show-overflow-tooltip />
<el-table-column label="工具数量" width="100">
<template #default="{ row }">
<el-tag size="small">{{ (row.tools || []).length }} 个</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" width="80">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<template #default="{ row }">
<el-button v-if="authStore.isOperator" type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
<el-button v-if="authStore.isOperator" :type="row.status === 1 ? 'warning' : 'success'" link size="small" @click="handleToggleStatus(row)">
{{ row.status === 1 ? '禁用' : '启用' }}
</el-button>
<el-button v-if="authStore.isOperator" type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div style="margin-top: 20px; display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="query.page"
:page-size="query.size"
:total="total"
layout="total, prev, pager, next"
@current-change="handlePageChange"
/>
</div>
<!-- 编辑对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="应用代码" prop="app_code">
<el-input v-model="form.app_code" :disabled="!!editingId" placeholder="唯一标识，如: tools" />
</el-form-item>
<el-form-item label="应用名称" prop="app_name">
<el-input v-model="form.app_name" placeholder="显示名称" />
</el-form-item>
<el-form-item label="基础URL">
<el-input v-model="form.base_url" placeholder="如: https://tools.test.ai.ireborn.com.cn" />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="form.description" type="textarea" :rows="2" placeholder="应用描述" />
</el-form-item>
<el-divider content-position="left">工具列表</el-divider>
<el-form-item label="工具">
<div style="width: 100%">
<el-table :data="form.tools" size="small" border style="margin-bottom: 10px">
<el-table-column prop="code" label="代码" width="120" />
<el-table-column prop="name" label="名称" width="120" />
<el-table-column prop="path" label="路径" />
<el-table-column label="操作" width="120">
<template #default="{ $index }">
<el-button type="primary" link size="small" @click="handleEditTool($index)">编辑</el-button>
<el-button type="danger" link size="small" @click="handleDeleteTool($index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="primary" size="small" @click="handleAddTool">
<el-icon><Plus /></el-icon>
添加工具
</el-button>
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
<!-- 工具编辑对话框 -->
<el-dialog v-model="toolDialogVisible" :title="editingToolIndex >= 0 ? '编辑工具' : '添加工具'" width="400px">
<el-form :model="toolForm" label-width="80px">
<el-form-item label="代码">
<el-input v-model="toolForm.code" placeholder="如: brainstorm" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="toolForm.name" placeholder="如: 头脑风暴" />
</el-form-item>
<el-form-item label="路径">
<el-input v-model="toolForm.path" placeholder="如: /brainstorm" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="toolDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSaveTool">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<style scoped>
.page-tip {
margin-bottom: 16px;
}
</style>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const query = reactive({
page: 1,
size: 20
})
// 对话框
const dialogVisible = ref(false)
const dialogTitle = ref('')
const editingId = ref(null)
const formRef = ref(null)
const form = reactive({
app_code: '',
app_name: '',
base_url: '',
description: '',
require_jssdk: false,
tools: []
})
const rules = {
app_code: [{ required: true, message: '请输入应用代码', trigger: 'blur' }],
app_name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }]
}
// 工具编辑
const toolDialogVisible = ref(false)
const editingToolIndex = ref(-1)
const toolForm = reactive({
code: '',
name: '',
path: ''
})
async function fetchList() {
loading.value = true
try {
const res = await api.get('/api/apps', { params: query })
tableData.value = res.data.items || []
total.value = res.data.total || 0
} catch (e) {
console.error(e)
} finally {
loading.value = false
}
}
function handleSearch() {
query.page = 1
fetchList()
}
function handlePageChange(page) {
query.page = page
fetchList()
}
function handleCreate() {
editingId.value = null
dialogTitle.value = '新建应用'
Object.assign(form, {
app_code: '',
app_name: '',
base_url: '',
description: '',
require_jssdk: false,
tools: []
})
dialogVisible.value = true
}
function handleEdit(row) {
editingId.value = row.id
dialogTitle.value = '编辑应用'
Object.assign(form, {
app_code: row.app_code,
app_name: row.app_name,
base_url: row.base_url || '',
description: row.description || '',
require_jssdk: row.require_jssdk || false,
tools: row.tools || []
})
dialogVisible.value = true
}
async function handleSubmit() {
await formRef.value.validate()
const data = { ...form }
try {
if (editingId.value) {
await api.put(`/api/apps/${editingId.value}`, data)
ElMessage.success('更新成功')
} else {
await api.post('/api/apps', data)
ElMessage.success('创建成功')
}
dialogVisible.value = false
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
async function handleDelete(row) {
await ElMessageBox.confirm(`确定删除应用 "${row.app_name}" 吗？`, '提示', {
type: 'warning'
})
try {
await api.delete(`/api/apps/${row.id}`)
ElMessage.success('删除成功')
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
async function handleToggleStatus(row) {
const newStatus = row.status === 1 ? 0 : 1
try {
await api.put(`/api/apps/${row.id}`, { status: newStatus })
ElMessage.success(newStatus === 1 ? '已启用' : '已禁用')
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
// 工具管理
function handleAddTool() {
editingToolIndex.value = -1
Object.assign(toolForm, { code: '', name: '', path: '' })
toolDialogVisible.value = true
}
function handleEditTool(index) {
editingToolIndex.value = index
const tool = form.tools[index]
Object.assign(toolForm, { ...tool })
toolDialogVisible.value = true
}
function handleDeleteTool(index) {
form.tools.splice(index, 1)
}
function handleSaveTool() {
if (!toolForm.code || !toolForm.name) {
ElMessage.warning('请填写工具代码和名称')
return
}
const tool = { ...toolForm }
if (editingToolIndex.value >= 0) {
form.tools[editingToolIndex.value] = tool
} else {
form.tools.push(tool)
}
toolDialogVisible.value = false
}
onMounted(() => {
fetchList()
})
</script>
<template>
<div class="page-container">
<div class="page-header">
<div class="title">应用管理</div>
<el-button v-if="authStore.isOperator" type="primary" @click="handleCreate">
<el-icon><Plus /></el-icon>
新建应用
</el-button>
</div>
<div class="page-tip">
<el-alert type="info" :closable="false">
应用管理：定义可供租户使用的应用，配置应用的基础URL和工具列表。
租户配置中选择应用后，即可生成带签名的访问链接。
</el-alert>
</div>
<!-- 表格 -->
<el-table v-loading="loading" :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" width="60" />
<el-table-column prop="app_code" label="应用代码" width="120" />
<el-table-column prop="app_name" label="应用名称" width="150" />
<el-table-column prop="base_url" label="基础URL" min-width="250" show-overflow-tooltip />
<el-table-column label="工具数量" width="100">
<template #default="{ row }">
<el-tag size="small">{{ (row.tools || []).length }} 个</el-tag>
</template>
</el-table-column>
<el-table-column label="JS-SDK" width="90">
<template #default="{ row }">
<el-tag :type="row.require_jssdk ? 'warning' : 'info'" size="small">
{{ row.require_jssdk ? '需要' : '不需要' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" width="80">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<template #default="{ row }">
<el-button v-if="authStore.isOperator" type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
<el-button v-if="authStore.isOperator" :type="row.status === 1 ? 'warning' : 'success'" link size="small" @click="handleToggleStatus(row)">
{{ row.status === 1 ? '禁用' : '启用' }}
</el-button>
<el-button v-if="authStore.isOperator" type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div style="margin-top: 20px; display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="query.page"
:page-size="query.size"
:total="total"
layout="total, prev, pager, next"
@current-change="handlePageChange"
/>
</div>
<!-- 编辑对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="应用代码" prop="app_code">
<el-input v-model="form.app_code" :disabled="!!editingId" placeholder="唯一标识，如: tools" />
</el-form-item>
<el-form-item label="应用名称" prop="app_name">
<el-input v-model="form.app_name" placeholder="显示名称" />
</el-form-item>
<el-form-item label="基础URL">
<el-input v-model="form.base_url" placeholder="如: https://tools.test.ai.ireborn.com.cn" />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="form.description" type="textarea" :rows="2" placeholder="应用描述" />
</el-form-item>
<el-form-item label="企微JS-SDK">
<el-switch v-model="form.require_jssdk" />
<span style="margin-left: 12px; color: #909399; font-size: 12px">开启后租户需关联企微应用才能使用</span>
</el-form-item>
<el-divider content-position="left">工具列表</el-divider>
<el-form-item label="工具">
<div style="width: 100%">
<el-table :data="form.tools" size="small" border style="margin-bottom: 10px">
<el-table-column prop="code" label="代码" width="120" />
<el-table-column prop="name" label="名称" width="120" />
<el-table-column prop="path" label="路径" />
<el-table-column label="操作" width="120">
<template #default="{ $index }">
<el-button type="primary" link size="small" @click="handleEditTool($index)">编辑</el-button>
<el-button type="danger" link size="small" @click="handleDeleteTool($index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="primary" size="small" @click="handleAddTool">
<el-icon><Plus /></el-icon>
添加工具
</el-button>
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
<!-- 工具编辑对话框 -->
<el-dialog v-model="toolDialogVisible" :title="editingToolIndex >= 0 ? '编辑工具' : '添加工具'" width="400px">
<el-form :model="toolForm" label-width="80px">
<el-form-item label="代码">
<el-input v-model="toolForm.code" placeholder="如: brainstorm" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="toolForm.name" placeholder="如: 头脑风暴" />
</el-form-item>
<el-form-item label="路径">
<el-input v-model="toolForm.path" placeholder="如: /brainstorm" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="toolDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSaveTool">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<style scoped>
.page-tip {
margin-bottom: 16px;
}
</style>

238
frontend/src/views/tenant-wechat-apps/index.vue Normal file
View File

@@ -0,0 +1,238 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const query = reactive({
page: 1,
size: 20,
tenant_id: ''
})
// 对话框
const dialogVisible = ref(false)
const dialogTitle = ref('')
const editingId = ref(null)
const formRef = ref(null)
const form = reactive({
tenant_id: '',
name: '',
corp_id: '',
agent_id: '',
secret: ''
})
const rules = {
tenant_id: [{ required: true, message: '请输入租户ID', trigger: 'blur' }],
name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
corp_id: [{ required: true, message: '请输入企业ID', trigger: 'blur' }],
agent_id: [{ required: true, message: '请输入应用ID', trigger: 'blur' }]
}
async function fetchList() {
loading.value = true
try {
const res = await api.get('/api/tenant-wechat-apps', { params: query })
tableData.value = res.data.items || []
total.value = res.data.total || 0
} catch (e) {
console.error(e)
} finally {
loading.value = false
}
}
function handleSearch() {
query.page = 1
fetchList()
}
function handlePageChange(page) {
query.page = page
fetchList()
}
function handleCreate() {
editingId.value = null
dialogTitle.value = '新建企微应用'
Object.assign(form, {
tenant_id: query.tenant_id || '',
name: '',
corp_id: '',
agent_id: '',
secret: ''
})
dialogVisible.value = true
}
function handleEdit(row) {
editingId.value = row.id
dialogTitle.value = '编辑企微应用'
Object.assign(form, {
tenant_id: row.tenant_id,
name: row.name,
corp_id: row.corp_id,
agent_id: row.agent_id,
secret: '' // 不回显密钥
})
dialogVisible.value = true
}
async function handleSubmit() {
await formRef.value.validate()
const data = { ...form }
// 如果没有输入新密钥，不传这个字段
if (!data.secret) {
delete data.secret
}
try {
if (editingId.value) {
await api.put(`/api/tenant-wechat-apps/${editingId.value}`, data)
ElMessage.success('更新成功')
} else {
await api.post('/api/tenant-wechat-apps', data)
ElMessage.success('创建成功')
}
dialogVisible.value = false
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
async function handleDelete(row) {
await ElMessageBox.confirm(`确定删除企微应用「${row.name}」吗？`, '提示', {
type: 'warning'
})
try {
await api.delete(`/api/tenant-wechat-apps/${row.id}`)
ElMessage.success('删除成功')
fetchList()
} catch (e) {
// 错误已在拦截器处理
}
}
async function handleViewSecret(row) {
try {
const res = await api.get(`/api/tenant-wechat-apps/${row.id}/secret`)
if (res.data.secret) {
ElMessageBox.alert(res.data.secret, '应用 Secret', {
confirmButtonText: '关闭'
})
} else {
ElMessage.info('未配置 Secret')
}
} catch (e) {
// 错误已在拦截器处理
}
}
onMounted(() => {
fetchList()
})
</script>
<template>
<div class="page-container">
<div class="page-header">
<div class="title">企微应用管理</div>
<el-button v-if="authStore.isOperator" type="primary" @click="handleCreate">
<el-icon><Plus /></el-icon>
新建企微应用
</el-button>
</div>
<!-- 搜索栏 -->
<div class="search-bar">
<el-input
v-model="query.tenant_id"
placeholder="租户ID"
clearable
style="width: 200px"
@keyup.enter="handleSearch"
/>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</div>
<!-- 表格 -->
<el-table v-loading="loading" :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" width="60" />
<el-table-column prop="tenant_id" label="租户ID" width="120" />
<el-table-column prop="name" label="应用名称" width="180" />
<el-table-column prop="corp_id" label="企业ID" width="200" show-overflow-tooltip />
<el-table-column prop="agent_id" label="应用ID" width="120" />
<el-table-column label="Secret" width="100">
<template #default="{ row }">
<el-tag v-if="row.has_secret" type="success" size="small">已配置</el-tag>
<el-tag v-else type="info" size="small">未配置</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" width="80">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" width="180" />
<el-table-column label="操作" width="200" fixed="right">
<template #default="{ row }">
<el-button v-if="authStore.isOperator" type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
<el-button v-if="authStore.isOperator" type="warning" link size="small" @click="handleViewSecret(row)">查看密钥</el-button>
<el-button v-if="authStore.isOperator" type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div style="margin-top: 20px; display: flex; justify-content: flex-end">
<el-pagination
v-model:current-page="query.page"
:page-size="query.size"
:total="total"
layout="total, prev, pager, next"
@current-change="handlePageChange"
/>
</div>
<!-- 编辑对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="租户ID" prop="tenant_id">
<el-input v-model="form.tenant_id" :disabled="!!editingId" placeholder="如: qiqi" />
</el-form-item>
<el-form-item label="应用名称" prop="name">
<el-input v-model="form.name" placeholder="如: 工具集企微应用" />
</el-form-item>
<el-form-item label="企业ID" prop="corp_id">
<el-input v-model="form.corp_id" placeholder="ww开头的企业ID" />
</el-form-item>
<el-form-item label="应用ID" prop="agent_id">
<el-input v-model="form.agent_id" placeholder="自建应用的 AgentId" />
</el-form-item>
<el-form-item label="应用 Secret">
<el-input
v-model="form.secret"
type="password"
show-password
:placeholder="editingId ? '留空则不修改' : '应用的 Secret'"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</div>
</template>