feat: Add GraalVM JavaScript engine to backend and update frontend dependencies.
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1694
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"axios": "^1.13.6",
|
||||
"element-plus": "^2.13.5",
|
||||
"vue": "^3.5.12",
|
||||
"vue-router": "^4.6.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<span class="logo-icon">⚡</span>
|
||||
<h1>AI Gateway</h1>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
router
|
||||
text-color="#ffffffb3"
|
||||
active-text-color="#409eff"
|
||||
background-color="transparent"
|
||||
>
|
||||
<el-menu-item
|
||||
v-for="route in menuRoutes"
|
||||
:key="route.path"
|
||||
:index="route.path"
|
||||
>
|
||||
<el-icon><component :is="route.meta.icon" /></el-icon>
|
||||
<span>{{ route.meta.title }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</aside>
|
||||
|
||||
<div class="main-area">
|
||||
<header class="top-header">
|
||||
<span class="page-title">{{ currentTitle }}</span>
|
||||
<div class="header-right">
|
||||
<el-tag type="success" size="small" effect="plain">v1.0.0</el-tag>
|
||||
<span>Admin</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="content-area">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const menuRoutes = router.getRoutes().filter(r => r.meta && r.meta.title)
|
||||
|
||||
const activeMenu = computed(() => route.path)
|
||||
const currentTitle = computed(() => route.meta?.title || 'Dashboard')
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api/v1',
|
||||
timeout: 15000,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
|
||||
// ========== Tenant ==========
|
||||
export const tenantApi = {
|
||||
list: () => api.get('/admin/tenant'),
|
||||
create: (data) => api.post('/admin/tenant', data),
|
||||
update: (id, data) => api.put(`/admin/tenant/${id}`, data),
|
||||
delete: (id) => api.delete(`/admin/tenant/${id}`)
|
||||
}
|
||||
|
||||
// ========== Tool Registry ==========
|
||||
export const toolApi = {
|
||||
list: () => api.get('/admin/tool'),
|
||||
create: (data) => api.post('/admin/tool', data),
|
||||
update: (id, data) => api.put(`/admin/tool/${id}`, data),
|
||||
delete: (id) => api.delete(`/admin/tool/${id}`)
|
||||
}
|
||||
|
||||
// ========== Wash Script ==========
|
||||
export const washScriptApi = {
|
||||
getByToolId: (toolId) => api.get(`/admin/wash-script/${toolId}`),
|
||||
save: (data) => api.post('/admin/wash-script', data),
|
||||
testScript: (data) => api.post('/admin/wash-script/test', data)
|
||||
}
|
||||
|
||||
// ========== Audit Log ==========
|
||||
export const auditApi = {
|
||||
list: (params) => api.get('/admin/audit-log', { params })
|
||||
}
|
||||
|
||||
export default api
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,17 @@
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './style.css'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
app.use(router)
|
||||
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,39 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/tenant'
|
||||
},
|
||||
{
|
||||
path: '/tenant',
|
||||
name: 'TenantManage',
|
||||
component: () => import('../views/TenantManage.vue'),
|
||||
meta: { title: '租户管理', icon: 'User' }
|
||||
},
|
||||
{
|
||||
path: '/tool',
|
||||
name: 'ToolRegistry',
|
||||
component: () => import('../views/ToolRegistry.vue'),
|
||||
meta: { title: '工具注册', icon: 'SetUp' }
|
||||
},
|
||||
{
|
||||
path: '/wash-script',
|
||||
name: 'WashScript',
|
||||
component: () => import('../views/WashScript.vue'),
|
||||
meta: { title: '清洗脚本', icon: 'MagicStick' }
|
||||
},
|
||||
{
|
||||
path: '/audit-log',
|
||||
name: 'AuditLog',
|
||||
component: () => import('../views/AuditLog.vue'),
|
||||
meta: { title: '审计日志', icon: 'Document' }
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,117 @@
|
||||
:root {
|
||||
--sidebar-bg: #1d1e2c;
|
||||
--sidebar-active: #409eff;
|
||||
--header-bg: #ffffff;
|
||||
--body-bg: #f0f2f5;
|
||||
--card-bg: #ffffff;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
background: var(--body-bg);
|
||||
color: #303133;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 220px;
|
||||
background: var(--sidebar-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 2px 0 8px rgba(0,0,0,0.15);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
.sidebar-logo h1 {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.sidebar-logo .logo-icon {
|
||||
font-size: 22px;
|
||||
margin-right: 8px;
|
||||
background: linear-gradient(135deg, #409eff, #67c23a);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.sidebar .el-menu {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.main-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-header {
|
||||
height: 56px;
|
||||
background: var(--header-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.top-header .page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1d1e2c;
|
||||
}
|
||||
|
||||
.top-header .header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.page-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.page-card .toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-card .toolbar-left {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<el-input v-model="searchTraceId" placeholder="Trace ID" clearable style="width: 240px" />
|
||||
<el-input v-model="searchToolName" placeholder="工具名称" clearable style="width: 160px" />
|
||||
<el-button type="primary" :icon="Search" @click="fetchLogs">查询</el-button>
|
||||
</div>
|
||||
<el-tag type="info">共 {{ list.length }} 条记录</el-tag>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" stripe border style="width: 100%" max-height="600">
|
||||
<el-table-column prop="id" label="ID" width="70" />
|
||||
<el-table-column prop="traceId" label="Trace ID" min-width="240">
|
||||
<template #default="{ row }">
|
||||
<el-text type="info" size="small" style="font-family: monospace">{{ row.traceId }}</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tenantId" label="租户ID" width="80" align="center" />
|
||||
<el-table-column prop="toolName" label="工具名称" width="140">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" effect="plain">{{ row.toolName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="costTimeMs" label="耗时(ms)" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.costTimeMs > 1000 ? 'danger' : row.costTimeMs > 500 ? 'warning' : 'success'" size="small">
|
||||
{{ row.costTimeMs }}ms
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="时间" width="170" />
|
||||
<el-table-column label="详情" width="120" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="showDetail(row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="detailVisible" title="审计详情" width="800px" destroy-on-close>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="Trace ID">{{ detail.traceId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工具名称">{{ detail.toolName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="耗时">{{ detail.costTimeMs }}ms</el-descriptions-item>
|
||||
<el-descriptions-item label="请求时间">{{ detail.createTime }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-divider />
|
||||
<el-tabs>
|
||||
<el-tab-pane label="原始请求">
|
||||
<pre class="json-block">{{ formatJson(detail.rawrequest) }}</pre>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="原始响应">
|
||||
<pre class="json-block">{{ formatJson(detail.rawResponse) }}</pre>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="清洗结果">
|
||||
<pre class="json-block">{{ formatJson(detail.washedResponse) }}</pre>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { auditApi } from '../api'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const list = ref([])
|
||||
const searchTraceId = ref('')
|
||||
const searchToolName = ref('')
|
||||
const detailVisible = ref(false)
|
||||
const detail = ref({})
|
||||
|
||||
const fetchLogs = async () => {
|
||||
try {
|
||||
const params = {}
|
||||
if (searchTraceId.value) params.traceId = searchTraceId.value
|
||||
if (searchToolName.value) params.toolName = searchToolName.value
|
||||
const { data } = await auditApi.list(params)
|
||||
list.value = data
|
||||
} catch { ElMessage.error('加载审计日志失败') }
|
||||
}
|
||||
|
||||
const showDetail = (row) => {
|
||||
detail.value = row
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
const formatJson = (str) => {
|
||||
if (!str) return '(空)'
|
||||
try { return JSON.stringify(JSON.parse(str), null, 2) } catch { return str }
|
||||
}
|
||||
|
||||
onMounted(fetchLogs)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.json-block {
|
||||
background: #1e1e2e;
|
||||
color: #a6e3a1;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
font-family: 'Fira Code', 'Consolas', monospace;
|
||||
font-size: 12px;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<el-input v-model="searchKey" placeholder="搜索租户名/AppKey" clearable style="width: 260px" :prefix-icon="Search" />
|
||||
</div>
|
||||
<el-button type="primary" :icon="Plus" @click="openDialog()">新增租户</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="filteredList" stripe border style="width: 100%">
|
||||
<el-table-column prop="id" label="ID" width="70" />
|
||||
<el-table-column prop="tenantName" label="租户名称" min-width="140" />
|
||||
<el-table-column prop="appKey" label="App Key" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" type="info">{{ row.appKey }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="appSecret" label="App Secret" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<span style="filter: blur(3px); cursor: pointer" @click="$event.target.style.filter = 'none'">{{ row.appSecret }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="rateLimitQps" label="QPS限制" width="100" align="center" />
|
||||
<el-table-column prop="status" label="状态" width="90" align="center">
|
||||
<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 label="操作" width="160" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="openDialog(row)">编辑</el-button>
|
||||
<el-popconfirm title="确定要删除吗?" @confirm="handleDelete(row.id)">
|
||||
<template #reference>
|
||||
<el-button link type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑租户' : '新增租户'" width="520px" destroy-on-close>
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-form-item label="租户名称"><el-input v-model="form.tenantName" /></el-form-item>
|
||||
<el-form-item label="App Key"><el-input v-model="form.appKey" :disabled="isEdit" /></el-form-item>
|
||||
<el-form-item label="App Secret"><el-input v-model="form.appSecret" /></el-form-item>
|
||||
<el-form-item label="QPS 限制"><el-input-number v-model="form.rateLimitQps" :min="1" :max="10000" /></el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { Search, Plus } from '@element-plus/icons-vue'
|
||||
import { tenantApi } from '../api'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const list = ref([])
|
||||
const searchKey = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const submitting = ref(false)
|
||||
const form = ref({ tenantName: '', appKey: '', appSecret: '', rateLimitQps: 100, status: 1 })
|
||||
|
||||
const filteredList = computed(() => {
|
||||
if (!searchKey.value) return list.value
|
||||
const key = searchKey.value.toLowerCase()
|
||||
return list.value.filter(t => t.tenantName?.toLowerCase().includes(key) || t.appKey?.toLowerCase().includes(key))
|
||||
})
|
||||
|
||||
const fetchList = async () => {
|
||||
try {
|
||||
const { data } = await tenantApi.list()
|
||||
list.value = data
|
||||
} catch { ElMessage.error('加载失败') }
|
||||
}
|
||||
|
||||
const openDialog = (row) => {
|
||||
isEdit.value = !!row
|
||||
form.value = row ? { ...row } : { tenantName: '', appKey: '', appSecret: '', rateLimitQps: 100, status: 1 }
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
submitting.value = true
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await tenantApi.update(form.value.id, form.value)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await tenantApi.create(form.value)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
await fetchList()
|
||||
} catch { ElMessage.error('操作失败') }
|
||||
submitting.value = false
|
||||
}
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await tenantApi.delete(id)
|
||||
ElMessage.success('删除成功')
|
||||
await fetchList()
|
||||
} catch { ElMessage.error('删除失败') }
|
||||
}
|
||||
|
||||
onMounted(fetchList)
|
||||
</script>
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<el-input v-model="searchKey" placeholder="搜索工具名/描述" clearable style="width: 260px" :prefix-icon="Search" />
|
||||
</div>
|
||||
<el-button type="primary" :icon="Plus" @click="openDialog()">注册工具</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="filteredList" stripe border style="width: 100%">
|
||||
<el-table-column prop="id" label="ID" width="70" />
|
||||
<el-table-column prop="toolName" label="工具标识" min-width="140">
|
||||
<template #default="{ row }">
|
||||
<el-tag effect="plain">{{ row.toolName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="executionProtocol" label="协议" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.executionProtocol === 'HTTP' ? '' : 'warning'" size="small">{{ row.executionProtocol || 'HTTP' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="targetUrl" label="目标地址" min-width="240" show-overflow-tooltip />
|
||||
<el-table-column prop="httpMethod" label="HTTP方法" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.httpMethod === 'GET' ? 'success' : 'primary'" size="small">{{ row.httpMethod }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="actionType" label="动作类型" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.actionType === 'WRITE' ? 'danger' : 'info'" size="small">{{ row.actionType }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="openDialog(row)">编辑</el-button>
|
||||
<el-popconfirm title="确定要删除吗?" @confirm="handleDelete(row.id)">
|
||||
<template #reference>
|
||||
<el-button link type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑工具' : '注册工具'" width="600px" destroy-on-close>
|
||||
<el-form :model="form" label-width="110px">
|
||||
<el-form-item label="工具标识"><el-input v-model="form.toolName" placeholder="英文下划线命名,如 get_stock_price" :disabled="isEdit" /></el-form-item>
|
||||
<el-form-item label="描述"><el-input v-model="form.description" type="textarea" :rows="3" placeholder="LLM将据此決定是否调用该工具" /></el-form-item>
|
||||
<el-form-item label="执行协议">
|
||||
<el-select v-model="form.executionProtocol" style="width: 100%">
|
||||
<el-option label="HTTP" value="HTTP" />
|
||||
<el-option label="DUBBO (预留)" value="DUBBO" disabled />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="目标 URL"><el-input v-model="form.targetUrl" placeholder="http://internal-service/api/..." /></el-form-item>
|
||||
<el-form-item label="HTTP 方法">
|
||||
<el-radio-group v-model="form.httpMethod">
|
||||
<el-radio value="GET">GET</el-radio>
|
||||
<el-radio value="POST">POST</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="动作类型">
|
||||
<el-radio-group v-model="form.actionType">
|
||||
<el-radio value="READ">READ (免审批)</el-radio>
|
||||
<el-radio value="WRITE">WRITE (需审批)</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求 Schema"><el-input v-model="form.requestSchema" type="textarea" :rows="4" placeholder="标准 JSON Schema (可选)" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { Search, Plus } from '@element-plus/icons-vue'
|
||||
import { toolApi } from '../api'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const list = ref([])
|
||||
const searchKey = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const submitting = ref(false)
|
||||
const defaultForm = { toolName: '', description: '', executionProtocol: 'HTTP', targetUrl: '', httpMethod: 'GET', actionType: 'READ', requestSchema: '' }
|
||||
const form = ref({ ...defaultForm })
|
||||
|
||||
const filteredList = computed(() => {
|
||||
if (!searchKey.value) return list.value
|
||||
const key = searchKey.value.toLowerCase()
|
||||
return list.value.filter(t => t.toolName?.toLowerCase().includes(key) || t.description?.toLowerCase().includes(key))
|
||||
})
|
||||
|
||||
const fetchList = async () => {
|
||||
try {
|
||||
const { data } = await toolApi.list()
|
||||
list.value = data
|
||||
} catch { ElMessage.error('加载失败') }
|
||||
}
|
||||
|
||||
const openDialog = (row) => {
|
||||
isEdit.value = !!row
|
||||
form.value = row ? { ...row } : { ...defaultForm }
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
submitting.value = true
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await toolApi.update(form.value.id, form.value)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await toolApi.create(form.value)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
await fetchList()
|
||||
} catch { ElMessage.error('操作失败') }
|
||||
submitting.value = false
|
||||
}
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await toolApi.delete(id)
|
||||
ElMessage.success('删除成功')
|
||||
await fetchList()
|
||||
} catch { ElMessage.error('删除失败') }
|
||||
}
|
||||
|
||||
onMounted(fetchList)
|
||||
</script>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<el-select v-model="selectedToolId" placeholder="选择关联工具" style="width: 280px" filterable @change="loadScript">
|
||||
<el-option v-for="tool in toolList" :key="tool.id" :label="`${tool.toolName} — ${tool.description?.substring(0, 30)}`" :value="tool.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px">
|
||||
<el-button type="success" :icon="MagicStick" @click="aiGenerate" :loading="aiLoading">AI 生成脚本</el-button>
|
||||
<el-button type="primary" @click="handleSave" :loading="saving" :disabled="!selectedToolId">保存脚本</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<div style="margin-bottom: 8px; font-weight: 600; color: #606266;">📝 JavaScript 清洗脚本</div>
|
||||
<el-input
|
||||
v-model="jsScript"
|
||||
type="textarea"
|
||||
:rows="20"
|
||||
placeholder="function wash(rawJsonString) { const data = JSON.parse(rawJsonString); // 在这里编写清洗逻辑... return JSON.stringify(result); }"
|
||||
style="font-family: 'Fira Code', 'Consolas', monospace; font-size: 13px;"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div style="margin-bottom: 8px; font-weight: 600; color: #606266;">🧪 测试面板</div>
|
||||
<el-input
|
||||
v-model="testInput"
|
||||
type="textarea"
|
||||
:rows="8"
|
||||
placeholder='粘贴原始 JSON 样例...'
|
||||
style="font-family: monospace; font-size: 13px; margin-bottom: 8px;"
|
||||
/>
|
||||
<el-button type="warning" size="small" @click="runTest" :loading="testing" style="margin-bottom: 8px">执行测试</el-button>
|
||||
<el-input
|
||||
v-model="testOutput"
|
||||
type="textarea"
|
||||
:rows="8"
|
||||
placeholder="清洗结果将在此展示..."
|
||||
readonly
|
||||
style="font-family: monospace; font-size: 13px; background: #fafafa;"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { MagicStick } from '@element-plus/icons-vue'
|
||||
import { toolApi, washScriptApi } from '../api'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const toolList = ref([])
|
||||
const selectedToolId = ref(null)
|
||||
const jsScript = ref('')
|
||||
const testInput = ref('')
|
||||
const testOutput = ref('')
|
||||
const saving = ref(false)
|
||||
const testing = ref(false)
|
||||
const aiLoading = ref(false)
|
||||
|
||||
const fetchTools = async () => {
|
||||
try {
|
||||
const { data } = await toolApi.list()
|
||||
toolList.value = data
|
||||
} catch { ElMessage.error('加载工具列表失败') }
|
||||
}
|
||||
|
||||
const loadScript = async (toolId) => {
|
||||
try {
|
||||
const { data } = await washScriptApi.getByToolId(toolId)
|
||||
jsScript.value = data?.jsScript || ''
|
||||
} catch {
|
||||
jsScript.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!selectedToolId.value) return
|
||||
saving.value = true
|
||||
try {
|
||||
await washScriptApi.save({ toolId: selectedToolId.value, jsScript: jsScript.value })
|
||||
ElMessage.success('脚本保存成功')
|
||||
} catch { ElMessage.error('保存失败') }
|
||||
saving.value = false
|
||||
}
|
||||
|
||||
const runTest = async () => {
|
||||
testing.value = true
|
||||
try {
|
||||
const { data } = await washScriptApi.testScript({ jsScript: jsScript.value, rawJson: testInput.value })
|
||||
testOutput.value = typeof data === 'string' ? data : JSON.stringify(data, null, 2)
|
||||
} catch (e) {
|
||||
testOutput.value = 'ERROR: ' + (e.response?.data?.error || e.message)
|
||||
}
|
||||
testing.value = false
|
||||
}
|
||||
|
||||
const aiGenerate = () => {
|
||||
aiLoading.value = true
|
||||
ElMessage.info('AI 脚本生成功能将在 Phase 2 中接入大模型 API')
|
||||
setTimeout(() => { aiLoading.value = false }, 1000)
|
||||
}
|
||||
|
||||
onMounted(fetchTools)
|
||||
</script>
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user