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/index.html ADDED Viewed

@@ -0,0 +1,429 @@
+<!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%">
+      <el-header style="display:flex;align-items:center;gap:12px;">
+        <div style="font-weight:600;">代理路由管理</div>
+        <div class="muted">同机部署，直接调用后端 /api</div>
+        <div class="toolbar-right">
+          <el-button type="primary" @click="openCreate">新增路由</el-button>
+          <el-button @click="activeTab==='routes'?fetchRoutes():fetchLogs()">刷新</el-button>
+        </div>
+      </el-header>
+      <el-main class="container">
+        <el-tabs v-model="activeTab">
+          <el-tab-pane label="路由映射" name="routes">
+            <el-table :data="filteredRoutes" stripe border v-loading="loadingRoutes" row-key="id">
+              <el-table-column prop="id" label="ID" width="70">
+                <template #default="{ row }"><span class="code">{{ row.id }}</span></template>
+              </el-table-column>
+              <el-table-column prop="name" min-width="140">
+                <template #header>
+                    <div style="display:flex;align-items:center;justify-content:space-between">
+                        <span>名称</span>
+                        <el-input v-model="searchName" size="small" placeholder="搜索" style="width:80px;font-weight:normal" clearable @click.stop />
+                    </div>
+                </template>
+                <template #default="{ row }"><span class="code">{{ row.name }}</span></template>
+              </el-table-column>
+              <el-table-column prop="routePrefix" min-width="160">
+                <template #header>
+                    <div style="display:flex;align-items:center;justify-content:space-between">
+                        <span>路由前缀</span>
+                        <el-input v-model="searchRoutePrefix" size="small" placeholder="搜索" style="width:100px;font-weight:normal" clearable @click.stop />
+                    </div>
+                </template>
+                <template #default="{ row }"><span class="code">{{ row.routePrefix }}</span></template>
+              </el-table-column>
+              <el-table-column prop="target" min-width="220">
+                <template #header>
+                    <div style="display:flex;align-items:center;justify-content:space-between">
+                        <span>Target</span>
+                        <el-input v-model="searchTarget" size="small" placeholder="搜索" style="width:140px;font-weight:normal" clearable @click.stop />
+                    </div>
+                </template>
+                <template #default="{ row }"><span class="code">{{ row.target }}</span></template>
+              </el-table-column>
+              <el-table-column prop="priority" label="优先级" width="90">
+                <template #default="{ row }"><span class="code">{{ row.priority }}</span></template>
+              </el-table-column>
+              <el-table-column label="启用" width="90">
+                <template #default="{ row }">
+                  <el-switch :model-value="!!row.enabled" @change="(v)=>toggleEnabled(row, v)" />
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="280" fixed="right">
+                <template #default="{ row }">
+                  <el-button size="small" type="primary" plain @click="openManage(row)">管理</el-button>
+                  <el-button size="small" @click="openEdit(row)">编辑</el-button>
+                  <el-button size="small" type="warning" @click="copyRoute(row)">复制</el-button>
+                  <el-button size="small" type="danger" @click="deleteRoute(row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="muted" style="margin-top:10px;">
+              匹配规则：请求路径以 routePrefix 开头即命中；优先级越高越先匹配
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="代理日志" name="logs">
+            <div class="toolbar">
+              <div class="muted">仅展示最近 50 条</div>
+              <div class="toolbar-right">
+                <el-button @click="fetchLogs">刷新日志</el-button>
+              </div>
+            </div>
+            <el-table :data="logs" stripe border row-key="id">
+              <el-table-column prop="id" label="ID" width="70">
+                <template #default="{ row }"><span class="code">{{ row.id }}</span></template>
+              </el-table-column>
+              <el-table-column prop="routeId" label="RouteId" width="90">
+                <template #default="{ row }"><span class="code">{{ row.routeId }}</span></template>
+              </el-table-column>
+              <el-table-column prop="method" label="Method" width="90">
+                <template #default="{ row }"><span class="code">{{ row.method }}</span></template>
+              </el-table-column>
+              <el-table-column prop="pathname" label="Pathname" min-width="200">
+                <template #default="{ row }"><span class="code">{{ row.pathname }}</span></template>
+              </el-table-column>
+              <el-table-column prop="statusCode" label="Status" width="90">
+                <template #default="{ row }"><span class="code">{{ row.statusCode }}</span></template>
+              </el-table-column>
+              <el-table-column prop="createdAt" label="时间" width="170">
+                <template #default="{ row }"><span class="code">{{ row.createdAt }}</span></template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+      </el-main>
+    </el-container>
+    <el-drawer v-model="drawerOpen" size="520px" :with-header="false">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
+        <div style="font-weight:600;">{{ form.id ? '编辑路由' : '新增路由' }}</div>
+        <div>
+          <el-button @click="drawerOpen=false">取消</el-button>
+          <el-button type="primary" :loading="saving" @click="saveRoute">保存</el-button>
+        </div>
+      </div>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="96px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="可选" />
+        </el-form-item>
+        <el-form-item label="启用">
+          <el-switch v-model="form.enabled" />
+        </el-form-item>
+        <el-form-item label="优先级" prop="priority">
+          <el-input-number v-model="form.priority" :min="-1000" :max="1000" />
+        </el-form-item>
+        <el-form-item label="路由前缀" prop="routePrefix">
+          <el-input v-model="form.routePrefix" placeholder="/jeecg-boot" />
+        </el-form-item>
+        <el-form-item label="Target" prop="target">
+          <el-input v-model="form.target" placeholder="http://1.1.1.1/jeecg-boot" />
+        </el-form-item>
+        <el-form-item label="changeOrigin">
+          <el-switch v-model="form.changeOrigin" />
+        </el-form-item>
+        <el-form-item label="pathRewrite">
+          <el-input v-model="form.pathRewrite" type="textarea" :rows="5" placeholder='{"^/jeecg-boot": ""}' />
+          <div class="muted" style="margin-top:6px;">
+            留空将自动生成：{{ defaultPathRewrite(form.routePrefix || '/') }}
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-drawer>
+  </div>
+  <script src="/cdn/axios/dist/axios.min.js"></script>
+  <script>
+    const { ElMessage, ElMessageBox } = ElementPlus
+    const api = axios.create({
+      baseURL: '',
+      timeout: 15000,
+      headers: { 'Content-Type': 'application/json' }
+    })
+    const App = {
+      setup() {
+        const activeTab = Vue.ref('routes')
+        const loadingRoutes = Vue.ref(false)
+        const routes = Vue.ref([])
+        const logs = Vue.ref([])
+        const drawerOpen = Vue.ref(false)
+        const saving = Vue.ref(false)
+        const searchName = Vue.ref('')
+        const searchRoutePrefix = Vue.ref('')
+        const searchTarget = Vue.ref('')
+        const filteredRoutes = Vue.computed(() => {
+          return routes.value.filter(item => {
+            const name = item.name ? item.name.toLowerCase() : ''
+            const prefix = item.routePrefix ? item.routePrefix.toLowerCase() : ''
+            const target = item.target ? item.target.toLowerCase() : ''
+            const matchName = !searchName.value || name.includes(searchName.value.toLowerCase())
+            const matchPrefix = !searchRoutePrefix.value || prefix.includes(searchRoutePrefix.value.toLowerCase())
+            const matchTarget = !searchTarget.value || target.includes(searchTarget.value.toLowerCase())
+            return matchName && matchPrefix && matchTarget
+          })
+        })
+        function openManage(row) {
+           window.open('/manage.html?routeId=' + row.id, '_blank')
+        }
+        const formRef = Vue.ref(null)
+        const form = Vue.reactive({
+          id: null,
+          name: '',
+          enabled: true,
+          priority: 0,
+          routePrefix: '',
+          target: '',
+          changeOrigin: true,
+          pathRewrite: ''
+        })
+        const rules = {
+          routePrefix: [
+            { required: true, message: '请输入路由前缀，例如 /jeecg-boot', trigger: 'blur' },
+            {
+              validator: (rule, value, callback) => {
+                if (!value || typeof value !== 'string') return callback(new Error('routePrefix 无效'))
+                if (value[0] !== '/') return callback(new Error('routePrefix 必须以 / 开头'))
+                callback()
+              },
+              trigger: 'blur'
+            }
+          ],
+          target: [
+            { required: true, message: '请输入 target，例如 http://1.1.1.1/jeecg-boot', trigger: 'blur' }
+          ]
+        }
+        function defaultPathRewrite(prefix) {
+          const key = '^' + prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+          return JSON.stringify({ [key]: '' })
+        }
+        async function fetchRoutes() {
+          loadingRoutes.value = true
+          try {
+            const res = await api.get('/api/routes')
+            routes.value = (res.data && res.data.data) || []
+          } catch (e) {
+            ElMessage.error(e?.response?.data?.message || e.message || '加载失败')
+          } finally {
+            loadingRoutes.value = false
+          }
+        }
+        async function fetchLogs() {
+          try {
+            const res = await api.get('/api/logs', { params: { limit: 50 } })
+            logs.value = (res.data && res.data.data) || []
+          } catch (e) {
+            ElMessage.error(e?.response?.data?.message || e.message || '加载失败')
+          }
+        }
+        function resetForm() {
+          form.id = null
+          form.name = ''
+          form.enabled = true
+          form.priority = 0
+          form.routePrefix = ''
+          form.target = ''
+          form.changeOrigin = true
+          form.pathRewrite = ''
+        }
+        function openCreate() {
+          resetForm()
+          drawerOpen.value = true
+        }
+        function openEdit(row) {
+          form.id = row.id
+          form.name = row.name || ''
+          form.enabled = !!row.enabled
+          form.priority = Number(row.priority || 0)
+          form.routePrefix = row.routePrefix || ''
+          form.target = row.target || ''
+          form.changeOrigin = row.changeOrigin !== false
+          form.pathRewrite = row.pathRewrite || ''
+          drawerOpen.value = true
+        }
+        function copyRoute(row) {
+          form.id = null
+          form.name = (row.name || '') + ' - 复制'
+          form.enabled = !!row.enabled
+          form.priority = Number(row.priority || 0)
+          form.routePrefix = row.routePrefix || ''
+          form.target = row.target || ''
+          form.changeOrigin = row.changeOrigin !== false
+          form.pathRewrite = row.pathRewrite || ''
+          drawerOpen.value = true
+        }
+        async function saveRoute() {
+          if (!formRef.value) return
+          await formRef.value.validate(async (valid) => {
+            if (!valid) return
+            saving.value = true
+            try {
+              const payload = {
+                name: form.name,
+                enabled: form.enabled,
+                priority: form.priority,
+                routePrefix: form.routePrefix,
+                target: form.target,
+                changeOrigin: form.changeOrigin,
+                pathRewrite: form.pathRewrite || defaultPathRewrite(form.routePrefix)
+              }
+              if (form.id) {
+                await api.put('/api/routes/' + form.id, payload)
+                ElMessage.success('已保存')
+              } else {
+                await api.post('/api/routes', payload)
+                ElMessage.success('已创建')
+              }
+              drawerOpen.value = false
+              await fetchRoutes()
+            } catch (e) {
+              ElMessage.error(e?.response?.data?.message || e.message || '保存失败')
+            } finally {
+              saving.value = false
+            }
+          })
+        }
+        async function deleteRoute(row) {
+          try {
+            await ElMessageBox.confirm('确认删除此路由？', '提示', { type: 'warning' })
+            await api.delete('/api/routes/' + row.id)
+            ElMessage.success('已删除')
+            await fetchRoutes()
+          } catch (e) {
+            if (e === 'cancel' || e === 'close') return
+            ElMessage.error(e?.response?.data?.message || e.message || '删除失败')
+          }
+        }
+        async function toggleEnabled(row, enabled) {
+          try {
+            await api.put('/api/routes/' + row.id, { enabled })
+            ElMessage.success('已更新')
+            await fetchRoutes()
+          } catch (e) {
+            ElMessage.error(e?.response?.data?.message || e.message || '更新失败')
+            await fetchRoutes()
+          }
+        }
+        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())}`
+        }
+        Vue.onMounted(async () => {
+          await fetchRoutes()
+          await fetchLogs()
+        })
+        return {
+          searchName,
+          searchRoutePrefix,
+          searchTarget,
+          filteredRoutes,
+          activeTab,
+          loadingRoutes,
+          routes,
+          logs,
+          drawerOpen,
+          saving,
+          formRef,
+          form,
+          rules,
+          fetchRoutes,
+          fetchLogs,
+          openCreate,
+          openEdit,
+          copyRoute,
+          openManage,
+          saveRoute,
+          deleteRoute,
+          toggleEnabled,
+          defaultPathRewrite,
+          formatTime
+        }
+      }
+    }
+    const app = Vue.createApp(App)
+    app.use(ElementPlus)
+    app.mount('#app')
+  </script>
+</body>
+</html>