npm - rwz-dev-proxy - Versions diffs - 1.0.0 - Mend

rwz-dev-proxy 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

package/public/manage.html ADDED Viewed

@@ -0,0 +1,750 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>路由接口管理</title>
+  <link rel="stylesheet" href="/cdn/element-plus/dist/index.css" />
+  <!-- 导入 Vue 3 -->
+  <script src="/cdn/vue/vue.global.js"></script>
+  <!-- 导入组件库 -->
+  <script src="/cdn/element-plus/dist/index.full.js"></script>
+  <style>
+    html,
+    body {
+      height: 100%;
+      margin: 0;
+    }
+    #app {
+      height: 100%;
+    }
+    .container {
+      padding: 16px;
+    }
+    .toolbar {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-bottom: 12px;
+    }
+    .toolbar-right {
+      margin-left: auto;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+    .muted {
+      color: rgba(0, 0, 0, .55);
+      font-size: 12px;
+    }
+    .code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <el-container style="height: 100%; display: flex; flex-direction: column;" v-loading="loadingRoute">
+      <el-header style="display:flex;align-items:center;gap:12px;border-bottom:1px solid #eee;">
+        <div style="font-weight:600;">{{ routeInfo ? routeInfo.name + ' (' + routeInfo.routePrefix + ')' : '加载中...' }} 接口管理</div>
+        <div class="toolbar-right">
+             <el-button @click="fetchInterfaces" :disabled="!routeId">刷新</el-button>
+        </div>
+      </el-header>
+      <el-container style="flex:1;overflow:hidden;">
+        <el-aside width="350px" style="border-right:1px solid #eee;display:flex;flex-direction:column;background:#fff;">
+          <div style="padding:10px;border-bottom:1px solid #eee;">
+            <el-input v-model="interfaceSearch" placeholder="搜索接口" clearable />
+          </div>
+          <el-scrollbar>
+            <div v-if="loadingInterfaces" style="padding:20px;text-align:center;color:#999;">加载中...</div>
+            <div v-else-if="filteredInterfaces.length===0" style="padding:20px;text-align:center;color:#999;">暂无数据</div>
+            <div v-for="item in filteredInterfaces" :key="item.id" @click="selectInterface(item)"
+              :style="{padding:'10px', cursor:'pointer', borderBottom:'1px solid #f5f5f5', background: activeInterface?.id===item.id?'#ecf5ff':''}"
+              class="interface-item">
+              <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
+                <el-tag size="small" :type="methodColor(item.method)">{{ item.method }}</el-tag>
+                <span class="muted" style="font-size:10px;">{{ formatTime(item.updatedAt) }}</span>
+              </div>
+              <div class="code" style="font-size:12px;word-break:break-all;line-height:1.4;">{{ item.pathname }}</div>
+              <div v-if="item.description" class="muted" style="font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ item.description }}</div>
+            </div>
+          </el-scrollbar>
+        </el-aside>
+        <el-main style="padding:0;display:flex;flex-direction:column;overflow:hidden;">
+          <div v-if="!activeInterface" style="display:flex;height:100%;align-items:center;justify-content:center;color:#999;">
+            请选择左侧接口
+          </div>
+          <div v-else style="padding:20px;height:100%;overflow:auto;box-sizing:border-box;">
+            <el-form label-position="top">
+              <el-form-item label="请求路径">
+                <el-input :model-value="activeInterface.pathname" readonly>
+                  <template #prepend>{{ activeInterface.method }}</template>
+                  <template #append>
+                     <el-button @click="sendRequest" :loading="sending">发送</el-button>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="描述">
+                <el-input v-model="activeInterface.description" type="textarea" :rows="2" placeholder="添加描述"
+                  @change="updateInterface(activeInterface)" />
+              </el-form-item>
+              <el-form-item label="处理模式">
+                <el-radio-group v-model="activeInterface.mode">
+                  <el-radio label="proxy">代理数据</el-radio>
+                  <el-radio label="static">静态数据</el-radio>
+                  <el-radio label="mock">Mock数据</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-tabs>
+                <el-tab-pane label="Header参数">
+                  <div style="margin-bottom:8px;">
+                      <el-button size="small" @click="addHeader">添加Header</el-button>
+                  </div>
+                  <el-table :data="localHeaders" style="width: 100%" height="460">
+                    <el-table-column prop="key" label="Key" width="200">
+                        <template #default="scope">
+                            <el-input v-model="scope.row.key" placeholder="Key" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="value" label="Value">
+                        <template #default="scope">
+                            <el-input v-model="scope.row.value" placeholder="Value" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="80">
+                        <template #default="scope">
+                            <el-button type="danger" link @click="removeHeader(scope.$index)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                  </el-table>
+                </el-tab-pane>
+                <el-tab-pane label="Query参数">
+                  <div style="margin-bottom:8px;">
+                      <el-button size="small" @click="addQuery">添加Query</el-button>
+                  </div>
+                  <el-table :data="localQuery" style="width: 100%" height="460">
+                    <el-table-column prop="key" label="Key" width="200">
+                        <template #default="scope">
+                            <el-input v-model="scope.row.key" placeholder="Key" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="value" label="Value">
+                        <template #default="scope">
+                            <el-input v-model="scope.row.value" placeholder="Value" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="80">
+                        <template #default="scope">
+                            <el-button type="danger" link @click="removeQuery(scope.$index)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                  </el-table>
+                </el-tab-pane>
+                <el-tab-pane label="Body参数">
+                  <monaco-editor
+                    :model-value="formatJson(activeInterface.reqBody)"
+                    @update:model-value="val => activeInterface.reqBody = val"
+                    language="json"
+                    height="500px"
+                  />
+                </el-tab-pane>
+                <el-tab-pane label="代理结果">
+                  <div style="margin-bottom:5px;">Status: <el-tag size="small" :type="activeInterface.statusCode>=200&&activeInterface.statusCode<300?'success':'danger'">{{ activeInterface.statusCode }}</el-tag></div>
+                  <monaco-editor
+                    :model-value="formatJson(activeInterface.resBody)"
+                    @update:model-value="val => activeInterface.resBody = val"
+                    language="json"
+                    height="500px"
+                  />
+                </el-tab-pane>
+                <el-tab-pane label="静态结果">
+                  <monaco-editor
+                    :model-value="formatJson(activeInterface.staticData)"
+                    @update:model-value="val => activeInterface.staticData = val"
+                    language="json"
+                    height="500px"
+                  />
+                </el-tab-pane>
+                <el-tab-pane label="Mock数据">
+                  <div style="display: flex; gap: 10px; height: 500px;">
+                    <div style="flex: 1; display: flex; flex-direction: column;">
+                      <div style="margin-bottom:8px; display: flex; gap: 8px; align-items: center;">
+                         <span style="font-weight: bold;">Mock 模板</span>
+                         <el-button size="small" @click="generateMockTemplate">根据代理结果生成模板</el-button>
+                      </div>
+                      <monaco-editor
+                        :model-value="formatJson(activeInterface.mockData)"
+                        @update:model-value="val => activeInterface.mockData = val"
+                        language="json"
+                        height="100%"
+                      />
+                    </div>
+                    <div style="flex: 1; display: flex; flex-direction: column;">
+                      <div style="margin-bottom:8px; display: flex; gap: 8px; align-items: center;">
+                         <span style="font-weight: bold;">Mock 结果</span>
+                         <el-button size="small" @click="generateMockResult">生成Mock数据</el-button>
+                      </div>
+                      <monaco-editor
+                        :model-value="formatJson(activeInterface.mockResult)"
+                        @update:model-value="val => activeInterface.mockResult = val"
+                        language="json"
+                        height="100%"
+                      />
+                    </div>
+                  </div>
+                </el-tab-pane>
+                <el-tab-pane label="JS钩子">
+                  <div style="margin-bottom:8px;">
+                     <el-button size="small" @click="generateMockScript">生成示例脚本</el-button>
+                  </div>
+                  <monaco-editor
+                    :model-value="activeInterface.mockScript || ''"
+                    @update:model-value="val => activeInterface.mockScript = val"
+                    language="javascript"
+                    height="500px"
+                  />
+                  <div class="muted" style="margin-top:5px;">
+                    定义 <code>onRequest</code> 和 <code>onResponse</code> 函数来拦截和处理请求。<br/>
+                    例如: <code>module.exports = { onRequest: async ({req, res}) => { ... }, onResponse: async ({body, req, res}) => { return body } }</code>
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
+              <div style="margin-top:20px;display:flex;gap:12px;">
+                <el-button type="primary" @click="saveInterface">保存当前接口</el-button>
+                <el-button type="danger" plain @click="deleteInterface(activeInterface)">删除此接口记录</el-button>
+              </div>
+            </el-form>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+  <script src="/cdn/mockjs/dist/mock-min.js"></script>
+  <script src="/cdn/axios/dist/axios.min.js"></script>
+  <script>
+    const { ElMessage, ElMessageBox } = ElementPlus
+    const MonacoEditor = {
+      props: ['modelValue', 'language', 'readonly', 'height'],
+      template: `
+        <div :style="{border: '1px solid #dcdfe6', borderRadius: '4px', overflow: 'hidden', height: height || '300px'}">
+          <iframe
+            ref="iframe"
+            src="monaco-editor.html"
+            style="width: 100%; height: 100%; border: none;"
+          ></iframe>
+        </div>
+      `,
+      setup(props, { emit }) {
+        const iframe = Vue.ref(null)
+        const isReady = Vue.ref(false)
+        function sendMessage(data) {
+            if (iframe.value && iframe.value.contentWindow) {
+                iframe.value.contentWindow.postMessage(data, '*')
+            }
+        }
+        Vue.watch(() => props.modelValue, (val) => {
+            if (isReady.value) {
+                 sendMessage({ type: 'setValue', value: val })
+            }
+        })
+        Vue.watch(() => props.language, (val) => {
+            if (isReady.value) {
+                sendMessage({ type: 'setLanguage', language: val })
+            }
+        })
+        Vue.watch(() => props.readonly, (val) => {
+             if (isReady.value) {
+                sendMessage({ type: 'setReadOnly', readOnly: val })
+             }
+        })
+        const onMessage = (event) => {
+            if (iframe.value && event.source === iframe.value.contentWindow) {
+                if (event.data.type === 'editorReady') {
+                    isReady.value = true
+                    sendMessage({ type: 'setValue', value: props.modelValue })
+                    sendMessage({ type: 'setLanguage', language: props.language || 'json' })
+                    sendMessage({ type: 'setReadOnly', readOnly: props.readonly })
+                } else if (event.data.type === 'contentChanged') {
+                    emit('update:modelValue', event.data.value)
+                }
+            }
+        }
+        Vue.onMounted(() => {
+            window.addEventListener('message', onMessage)
+        })
+        Vue.onUnmounted(() => {
+            window.removeEventListener('message', onMessage)
+        })
+        return { iframe }
+      }
+    }
+    const api = axios.create({
+      baseURL: '',
+      timeout: 15000,
+      headers: { 'Content-Type': 'application/json' }
+    })
+    const App = {
+      components: { MonacoEditor },
+      setup() {
+        const routeId = Vue.ref(null)
+        const routeInfo = Vue.ref(null)
+        const loadingRoute = Vue.ref(false)
+        const interfaces = Vue.ref([])
+        const loadingInterfaces = Vue.ref(false)
+        const activeInterface = Vue.ref(null)
+        const interfaceSearch = Vue.ref('')
+        const sending = Vue.ref(false)
+        const filteredInterfaces = Vue.computed(() => {
+          if (!interfaceSearch.value) return interfaces.value
+          const q = interfaceSearch.value.toLowerCase()
+          return interfaces.value.filter(i =>
+             (i.pathname && i.pathname.toLowerCase().includes(q)) ||
+             (i.description && i.description.toLowerCase().includes(q))
+          )
+        })
+        const localHeaders = Vue.ref([])
+        const localQuery = Vue.ref([])
+        Vue.watch(activeInterface, (newVal) => {
+           if (newVal) {
+               if (!newVal.mode) newVal.mode = 'proxy'
+               // Logic to detect script mode
+               if (newVal.mode === 'mock' && newVal.mockScript && newVal.mockScript.trim()) {
+                   newVal.mode = 'script'
+               }
+               // Migration helper: if static mode and no staticData, copy from resBody
+               if (newVal.mode === 'static' && !newVal.staticData && newVal.resBody) {
+                   newVal.staticData = newVal.resBody
+               }
+               // Headers
+               localHeaders.value = []
+               if (newVal.reqHeaders) {
+                   try {
+                       const headers = JSON.parse(newVal.reqHeaders)
+                       localHeaders.value = Object.keys(headers).map(key => ({ key, value: headers[key] }))
+                   } catch (e) {}
+               }
+               // Query
+               localQuery.value = []
+               if (newVal.reqQuery) {
+                   try {
+                        if (typeof newVal.reqQuery === 'string' && (newVal.reqQuery.startsWith('{') || newVal.reqQuery.startsWith('['))) {
+                             const query = JSON.parse(newVal.reqQuery)
+                             localQuery.value = Object.keys(query).map(key => ({ key, value: query[key] }))
+                        } else {
+                            const searchParams = new URLSearchParams(newVal.reqQuery)
+                            for (const [key, value] of searchParams) {
+                                localQuery.value.push({ key, value })
+                            }
+                        }
+                   } catch (e) {
+                        localQuery.value.push({ key: 'raw', value: newVal.reqQuery })
+                   }
+               }
+           } else {
+               localHeaders.value = []
+               localQuery.value = []
+           }
+        }, { immediate: true })
+        function addHeader() {
+            localHeaders.value.push({ key: '', value: '' })
+        }
+        function removeHeader(index) {
+            localHeaders.value.splice(index, 1)
+        }
+        function addQuery() {
+            localQuery.value.push({ key: '', value: '' })
+        }
+        function removeQuery(index) {
+            localQuery.value.splice(index, 1)
+        }
+        async function saveInterface() {
+            if (!activeInterface.value) return
+            const headersObj = {}
+            localHeaders.value.forEach(h => {
+                if (h.key) headersObj[h.key] = h.value
+            })
+            const queryObj = {}
+            localQuery.value.forEach(q => {
+                if (q.key && q.key !== 'raw') queryObj[q.key] = q.value
+            })
+            activeInterface.value.reqHeaders = JSON.stringify(headersObj)
+            activeInterface.value.reqQuery = JSON.stringify(queryObj)
+            // Prepare data for backend
+            let modeToSend = activeInterface.value.mode
+            let scriptToSend = activeInterface.value.mockScript
+            if (modeToSend === 'mock') {
+                // If user selected Mock (JSON) mode explicitly, do NOT clear script as it is now used for hooks
+                // But we need to ensure mockData is valid if they want to use it
+                // If mockData is empty, generate it
+                if (!activeInterface.value.mockData) {
+                   generateMock()
+                }
+            }
+            try {
+                await api.put(`/api/interfaces/${activeInterface.value.id}`, {
+                    description: activeInterface.value.description,
+                    reqHeaders: activeInterface.value.reqHeaders,
+                    reqQuery: activeInterface.value.reqQuery,
+                    reqBody: activeInterface.value.reqBody,
+                    resBody: activeInterface.value.resBody,
+                    staticData: activeInterface.value.staticData,
+                    mode: modeToSend,
+                    mockData: activeInterface.value.mockData,
+                    mockResult: activeInterface.value.mockResult,
+                    mockScript: scriptToSend
+                })
+                ElMessage.success('接口保存成功')
+                await fetchInterfaces()
+                // Update local model to match what was sent/saved (especially script clearing)
+                if (activeInterface.value.mode === 'mock') {
+                     activeInterface.value.mockScript = ''
+                }
+            } catch(e) {
+                ElMessage.error('保存失败')
+            }
+        }
+        function generateMockTemplate() {
+           if (!activeInterface.value) return
+           function createTemplate(obj) {
+              if (Array.isArray(obj)) {
+                  if (obj.length > 0) {
+                      // 数组生成规则: "list|1-10": [ ... ]
+                      return [createTemplate(obj[0])]
+                  }
+                  return []
+              } else if (typeof obj === 'object' && obj !== null) {
+                  const newObj = {}
+                  for (const k in obj) {
+                     const val = obj[k]
+                     if (typeof val === 'string') newObj[k] = '@string'
+                     else if (typeof val === 'number') newObj[k] = '@integer(0, 100)'
+                     else if (typeof val === 'boolean') newObj[k] = '@boolean'
+                     else newObj[k] = createTemplate(val)
+                  }
+                  return newObj
+              }
+              return obj
+           }
+           if (activeInterface.value.resBody) {
+               try {
+                   const json = JSON.parse(activeInterface.value.resBody)
+                   const template = createTemplate(json)
+                   activeInterface.value.mockData = JSON.stringify(template, null, 2)
+                   ElMessage.success('Mock模板生成成功')
+               } catch(e) {
+                   ElMessage.warning('代理结果不是有效的JSON，生成默认模板')
+                   useDefaultTemplate()
+               }
+           } else {
+               useDefaultTemplate()
+           }
+           function useDefaultTemplate() {
+               activeInterface.value.mockData = JSON.stringify({
+                  "string|1-10": "★",
+                  "number|1-100": 100,
+                  "boolean|1-2": true,
+                  "object|2": {
+                    "310000": "上海市",
+                    "320000": "江苏省",
+                    "330000": "浙江省",
+                    "340000": "安徽省"
+                  },
+                  "list|1-5": [{
+                      "id|+1": 1,
+                      "name": "@name"
+                  }]
+                }, null, 2)
+                ElMessage.success('已生成默认模板')
+           }
+        }
+        function generateMockResult() {
+            if (!activeInterface.value || !activeInterface.value.mockData) {
+                ElMessage.warning('请先填写Mock模板')
+                return
+            }
+            try {
+                // Remove comments if any (though JSON.parse doesn't support them, Monaco might mislead user)
+                const template = JSON.parse(activeInterface.value.mockData)
+                const data = Mock.mock(template)
+                activeInterface.value.mockResult = JSON.stringify(data, null, 2)
+                ElMessage.success('Mock数据生成成功')
+            } catch(e) {
+                ElMessage.error('生成失败: ' + e.message)
+            }
+        }
+        function generateMockScript() {
+            if (!activeInterface.value) return
+            if (activeInterface.value.mockScript) {
+                if (!confirm('确定要覆盖当前的脚本吗？')) return
+            }
+            activeInterface.value.mockScript = `/**
+ * JS 钩子脚本
+ * 支持 onRequest 和 onResponse 两个生命周期函数
+ */
+module.exports = {
+  /**
+   * 请求开始前触发
+   * 可以修改 req，或者直接发送响应阻断后续流程
+   */
+  onRequest: async function({ req, res, Mock }) {
+    // console.log('onRequest', req.path)
+    // 示例：阻断请求直接返回
+    // if (req.query.block) {
+    //   res.send({ msg: 'blocked by hook' })
+    //   return
+    // }
+  },
+  /**
+   * 响应返回前触发
+   * 可以修改响应内容
+   * @param {string|object} body - 原始响应内容
+   * @param {number} statusCode - 响应状态码
+   * @return {string|object} - 返回修改后的响应内容
+   */
+  onResponse: async function({ body, req, res, statusCode, Mock }) {
+    // console.log('onResponse', statusCode)
+    // 示例：修改返回数据
+    // if (typeof body === 'object') {
+    //   body._hooked = true
+    // }
+    return body
+  }
+}`
+        }
+        function methodColor(method) {
+           const m = (method || '').toUpperCase()
+           if (m === 'GET') return 'success'
+           if (m === 'POST') return 'primary'
+           if (m === 'PUT') return 'warning'
+           if (m === 'DELETE') return 'danger'
+           return 'info'
+        }
+        function formatJson(str) {
+           if (!str) return ''
+           try {
+              const obj = JSON.parse(str)
+              return JSON.stringify(obj, null, 2)
+           } catch(e) {
+              return str
+           }
+        }
+        function formatTime(value) {
+          if (!value) return ''
+          const d = new Date(value)
+          if (Number.isNaN(d.getTime())) return String(value)
+          const pad = (n) => String(n).padStart(2, '0')
+          return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+        }
+        async function fetchRouteInfo() {
+            if (!routeId.value) return
+            loadingRoute.value = true
+            try {
+                const res = await api.get(`/api/routes/${routeId.value}`)
+                routeInfo.value = res.data.data
+            } catch (e) {
+                ElMessage.error('加载路由信息失败')
+            } finally {
+                loadingRoute.value = false
+            }
+        }
+        async function fetchInterfaces() {
+           if (!routeId.value) return
+           loadingInterfaces.value = true
+           try {
+              const res = await api.get(`/api/routes/${routeId.value}/interfaces`)
+              interfaces.value = res.data.data || []
+           } catch(e) {
+              ElMessage.error('加载接口失败')
+           } finally {
+              loadingInterfaces.value = false
+           }
+        }
+        function selectInterface(item) {
+           activeInterface.value = item
+        }
+        async function updateInterface(item) {
+           try {
+              await api.put(`/api/interfaces/${item.id}`, { description: item.description })
+              ElMessage.success('已保存描述')
+           } catch(e) {
+              ElMessage.error('保存失败')
+           }
+        }
+        async function sendRequest() {
+           if (!activeInterface.value) return
+           sending.value = true
+           try {
+              const method = activeInterface.value.method
+              const url = activeInterface.value.pathname
+              let params = {}
+              if (localQuery.value) {
+                  localQuery.value.forEach(item => {
+                      if (item.key && item.key !== 'raw') {
+                          params[item.key] = item.value
+                      }
+                  })
+              }
+              let headers = {}
+              if (localHeaders.value) {
+                  localHeaders.value.forEach(item => {
+                      headers[item.key] = item.value
+                  })
+              }
+              let data = null
+              if (activeInterface.value.reqBody) {
+                  try {
+                      data = JSON.parse(activeInterface.value.reqBody)
+                  } catch(e) {
+                      data = activeInterface.value.reqBody
+                  }
+              }
+              const res = await axios({
+                  method,
+                  url,
+                  params,
+                  headers,
+                  data
+              })
+              activeInterface.value.statusCode = res.status
+              activeInterface.value.resBody = typeof res.data === 'object' ? JSON.stringify(res.data, null, 2) : String(res.data)
+              ElMessage.success('请求发送成功')
+           } catch(e) {
+              console.error(e)
+              if (e.response) {
+                  activeInterface.value.statusCode = e.response.status
+                  activeInterface.value.resBody = typeof e.response.data === 'object' ? JSON.stringify(e.response.data, null, 2) : String(e.response.data)
+                  ElMessage.warning('请求返回错误状态: ' + e.response.status)
+              } else {
+                  ElMessage.error('请求发送失败: ' + e.message)
+              }
+           } finally {
+              sending.value = false
+           }
+        }
+        async function deleteInterface(item) {
+            try {
+               await ElMessageBox.confirm('确认删除此接口记录？', '提示')
+               await api.delete(`/api/interfaces/${item.id}`)
+               ElMessage.success('已删除')
+               activeInterface.value = null
+               await fetchInterfaces()
+            } catch(e) {}
+        }
+        Vue.onMounted(async () => {
+           const params = new URLSearchParams(window.location.search)
+           const id = params.get('routeId')
+           if (id) {
+               routeId.value = id
+               await fetchRouteInfo()
+               await fetchInterfaces()
+           } else {
+               ElMessage.error('缺少 routeId 参数')
+           }
+        })
+        return {
+          routeId,
+          routeInfo,
+          loadingRoute,
+          interfaces,
+          loadingInterfaces,
+          activeInterface,
+          interfaceSearch,
+          filteredInterfaces,
+          localHeaders,
+          localQuery,
+          addHeader,
+          removeHeader,
+          addQuery,
+          removeQuery,
+          saveInterface,
+          methodColor,
+          formatJson,
+          formatTime,
+          fetchInterfaces,
+          selectInterface,
+          updateInterface,
+          deleteInterface,
+          sending,
+          sendRequest,
+          generateMockTemplate,
+          generateMockResult,
+          generateMockScript
+        }
+      }
+    }
+    const app = Vue.createApp(App)
+    app.use(ElementPlus)
+    app.mount('#app')
+  </script>
+</body>
+</html>