feat: Add GraalVM JavaScript engine to backend and update frontend dependencies.

This commit is contained in:
yyyhcyang
2026-03-18 15:13:26 +08:00
parent 807ad41f90
commit 93eb80294f
67 changed files with 2902 additions and 76 deletions
+24
View File
@@ -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?
+3
View File
@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}
+5
View File
@@ -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).
+13
View File
@@ -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>
+1694
View File
File diff suppressed because it is too large Load Diff
+22
View File
@@ -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"
}
}
+1
View File
@@ -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

+52
View File
@@ -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>
+37
View File
@@ -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
+1
View File
@@ -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

+43
View File
@@ -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>
+17
View File
@@ -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')
+39
View File
@@ -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
+117
View File
@@ -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;
}
+111
View File
@@ -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>
+116
View File
@@ -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>
+137
View File
@@ -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>
+108
View File
@@ -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) {&#10; const data = JSON.parse(rawJsonString);&#10; // 在这里编写清洗逻辑...&#10; return JSON.stringify(result);&#10;}"
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>
+15
View File
@@ -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,
}
}
}
})