初始化1

2026-07-16 13:03:11 +08:00
parent 0bdfcbc1c8
commit e6b0f287cc
100 changed files with 12184 additions and 0 deletions
--- a/nginx-manager-frontend/.env.development
+++ b/nginx-manager-frontend/.env.development
@@ -0,0 +1,5 @@
+# 开发环境 - 网关统一登录
+VITE_GATEWAY_URL = https://gw.server.zgitm.com
+VITE_LOGIN_URL   = https://login.user.zgitm.com
+VITE_SYSTEM_CODE = nginxServer
+VITE_APP_TITLE   = Nginx转发管理平台
--- a/nginx-manager-frontend/.env.production
+++ b/nginx-manager-frontend/.env.production
@@ -0,0 +1,5 @@
+# 生产环境 - 网关统一登录
+VITE_GATEWAY_URL = https://gw.server.zgitm.com
+VITE_LOGIN_URL   = https://login.user.zgitm.com
+VITE_SYSTEM_CODE = nginxServer
+VITE_APP_TITLE   = Nginx转发管理平台
--- a/nginx-manager-frontend/.gitignore
+++ b/nginx-manager-frontend/.gitignore
@@ -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?
--- a/nginx-manager-frontend/.vscode/extensions.json
+++ b/nginx-manager-frontend/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/nginx-manager-frontend/Dockerfile
+++ b/nginx-manager-frontend/Dockerfile
@@ -0,0 +1,4 @@
+FROM harbor.zgitm.com/library/nginx:alpine
+COPY dist/ /usr/share/nginx/html/
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
--- a/nginx-manager-frontend/README.md
+++ b/nginx-manager-frontend/README.md
@@ -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).
--- a/nginx-manager-frontend/index.html
+++ b/nginx-manager-frontend/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nginx域名转发管理平台</title>
+    <!-- Mokee UserChip Widget 样式 -->
+    <link rel="stylesheet" href="https://web.gw.zgitm.com/widgets/user-chip.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/nginx-manager-frontend/nginx/nginx.conf
+++ b/nginx-manager-frontend/nginx/nginx.conf
@@ -0,0 +1,52 @@
+# ==========================================
+# Vue 项目 Nginx 配置模板
+# 配合 Dockerfile.vue 使用
+# ==========================================
+
+server {
+    listen       80;
+    server_name  localhost;
+
+    # 日志格式
+    access_log  /var/log/nginx/access.log;
+    error_log   /var/log/nginx/error.log;
+
+    # 站点根目录
+    root         /usr/share/nginx/html;
+    index        index.html;
+
+    # 静态资源长期缓存
+    location /assets/ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Vue Router history 模式支持
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # API 代理（如果有后端代理需求，可在此配置）
+    # location /api/ {
+    #     proxy_pass http://backend-server:8080/;
+    #     proxy_set_header Host $host;
+    #     proxy_set_header X-Real-IP $remote_addr;
+    # }
+
+    # Gzip 压缩
+    gzip on;
+    gzip_vary on;
+    gzip_comp_level 6;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/json
+        application/javascript
+        application/xml+rss
+        application/x-javascript
+        image/svg+xml;
+    gzip_min_length 1024;
+    gzip_proxied any;
+}
--- a/nginx-manager-frontend/package-lock.json
+++ b/nginx-manager-frontend/package-lock.json
--- a/nginx-manager-frontend/package.json
+++ b/nginx-manager-frontend/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "nginx-manager-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.17.0",
+    "element-plus": "^2.14.1",
+    "vue": "^3.5.34",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.0",
+    "vite": "^5.4.0"
+  }
+}
--- a/nginx-manager-frontend/public/favicon.svg
+++ b/nginx-manager-frontend/public/favicon.svg
--- a/nginx-manager-frontend/public/icons.svg
+++ b/nginx-manager-frontend/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/nginx-manager-frontend/src/App.vue
+++ b/nginx-manager-frontend/src/App.vue
@@ -0,0 +1,59 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+// Nginx域名转发管理平台 - 根组件
+</script>
+
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html {
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', Arial, sans-serif;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  /* 安全区域适配刘海屏 */
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+/* ── 移动端全局优化 ── */
+@media (max-width: 768px) {
+  html { font-size: 14px; }
+
+  /* 对话框触摸友好 */
+  .el-dialog__headerbtn {
+    width: 40px; height: 40px;
+  }
+  .el-dialog__headerbtn .el-icon {
+    font-size: 18px;
+  }
+
+  /* 按钮增大触摸区域 */
+  .el-button--small { min-height: 32px; }
+
+  /* 分页器缩小间距 */
+  .el-pagination { justify-content: center; flex-wrap: wrap; }
+  .el-pagination button, .el-pagination .el-pager li {
+    min-width: 30px; height: 30px; line-height: 30px;
+  }
+
+  /* 表格在移动端被卡片替代，不再需要 */
+  .el-table { font-size: 13px; }
+
+  /* 消息提示缩小 */
+  .el-message { min-width: auto; max-width: 90vw; padding: 10px 16px; }
+
+  /* 确认框 */
+  .el-message-box { width: 90vw !important; }
+
+  /* 输入框/选择框不缩放 */
+  .el-input__inner, .el-select .el-input__inner { font-size: 16px; }
+
+  /* 标签缩小 */
+  .el-tag { font-size: 12px; }
+}
+</style>
--- a/nginx-manager-frontend/src/api/nginxApi.js
+++ b/nginx-manager-frontend/src/api/nginxApi.js
@@ -0,0 +1,134 @@
+/**
+ * Nginx转发管理 API 请求封装
+ *
+ * 所有请求经过 Mokee Gateway（非直连后端），网关根据 X-System-Code 头
+ * 自动识别并转发到对应业务后端。路径必须带 /api 前缀以匹配后端路由。
+ */
+import request from '../utils/request'
+
+// ═══════════════════════════════════════════════════════
+// 转发规则管理
+// ═══════════════════════════════════════════════════════
+
+export function getRules() {
+  return request.get('/api/rules')
+}
+
+export function getRule(id) {
+  return request.get(`/api/rules/${id}`)
+}
+
+/** 新增转发规则（HTTPS LE 签发需 60s+，超时设 5 分钟） */
+export function addRule(data) {
+  return request.post('/api/rules', data, { timeout: 300000 })
+}
+
+/** 修改转发规则 */
+export function updateRule(id, data) {
+  return request.put(`/api/rules/${id}`, data, { timeout: 300000 })
+}
+
+export function deleteRule(id) {
+  return request.delete(`/api/rules/${id}`)
+}
+
+export function reloadNginx() {
+  return request.post('/api/rules/reload')
+}
+
+export function getNginxStatus() {
+  return request.get('/api/rules/status')
+}
+
+/** 获取指定规则对应的 Nginx 配置文件原始内容 */
+export function getRuleConfig(id) {
+  return request.get(`/api/rules/${id}/config`)
+}
+
+/** 直接更新 Nginx 配置文件 */
+export function updateRuleConfig(id, content) {
+  return request.put(`/api/rules/${id}/config`, { content })
+}
+
+/** 获取 SSL 证书和密钥文件内容 */
+export function getRuleSslFiles(id) {
+  return request.get(`/api/rules/${id}/ssl`)
+}
+
+// ═══════════════════════════════════════════════════════
+// 内容压缩（gzip）
+// ═══════════════════════════════════════════════════════
+
+/** 获取规则的 gzip 压缩配置 */
+export function getRuleGzip(id) {
+  return request.get(`/api/rules/${id}/gzip`)
+}
+
+/** 更新规则的 gzip 压缩配置 */
+export function updateRuleGzip(id, data) {
+  return request.put(`/api/rules/${id}/gzip`, data)
+}
+
+// ═══════════════════════════════════════════════════════
+// 日志查看
+// ═══════════════════════════════════════════════════════
+
+/** 获取域名的 Nginx 响应日志和错误日志 */
+export function getRuleLogs(id, lines = 200) {
+  return request.get(`/api/rules/${id}/logs`, { params: { lines } })
+}
+
+// ═══════════════════════════════════════════════════════
+// 证书管理
+// ═══════════════════════════════════════════════════════
+
+export function getCertificates() {
+  return request.get('/api/certificates')
+}
+
+export function getCertificate(id) {
+  return request.get(`/api/certificates/${id}`)
+}
+
+/** 签发证书（LE 签发需 2min+，超时设 5 分钟） */
+export function issueCertificate(id) {
+  return request.post(`/api/certificates/${id}/issue`, null, { timeout: 300000 })
+}
+
+/** 续期证书 */
+export function renewCertificate(id) {
+  return request.post(`/api/certificates/${id}/renew`, null, { timeout: 300000 })
+}
+
+/** 更新通知配置 */
+export function updateCertNotifyConfig(id, data) {
+  return request.put(`/api/certificates/${id}/notify-config`, data)
+}
+
+// ═══════════════════════════════════════════════════════
+// DNS 解析管理
+// ═══════════════════════════════════════════════════════
+
+export function getDnsZones() {
+  return request.get('/api/dns/zones')
+}
+
+export function getDnsDefaultZone() {
+  return request.get('/api/dns/default-zone')
+}
+
+export function getDnsRecords(zone = 'zgitm.com') {
+  return request.get('/api/dns/records', { params: { zone } })
+}
+
+export function addDnsRecord(data) {
+  return request.post('/api/dns/records', data)
+}
+
+export function deleteDnsRecord(recordId) {
+  return request.delete(`/api/dns/records/${recordId}`)
+}
+
+export function updateDnsRecord(recordId, data) {
+  return request.put(`/api/dns/records/${recordId}`, data)
+}
--- a/nginx-manager-frontend/src/assets/hero.png
+++ b/nginx-manager-frontend/src/assets/hero.png
--- a/nginx-manager-frontend/src/assets/vite.svg
+++ b/nginx-manager-frontend/src/assets/vite.svg
--- a/nginx-manager-frontend/src/composables/useMobile.js
+++ b/nginx-manager-frontend/src/composables/useMobile.js
@@ -0,0 +1,27 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+/**
+ * 移动端检测 composable
+ * 统一管理响应式断点判断，避免各组件重复手写
+ *
+ * @param {number} breakpoint - 断点宽度，默认 768px
+ * @returns {{ isMobile: import('vue').Ref<boolean> }}
+ */
+export function useMobile(breakpoint = 768) {
+  const isMobile = ref(false)
+
+  function check() {
+    isMobile.value = window.innerWidth <= breakpoint
+  }
+
+  onMounted(() => {
+    check()
+    window.addEventListener('resize', check)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', check)
+  })
+
+  return { isMobile }
+}
--- a/nginx-manager-frontend/src/layout/MainLayout.vue
+++ b/nginx-manager-frontend/src/layout/MainLayout.vue
@@ -0,0 +1,196 @@
+<template>
+  <el-container class="layout-container">
+    <!-- 移动端遮罩 -->
+    <div
+      class="sidebar-overlay"
+      :class="{ 'is-visible': sidebarOpen }"
+      @click="sidebarOpen = false"
+    />
+
+    <!-- 左侧菜单 -->
+    <el-aside
+      width="220px"
+      class="layout-aside"
+      :class="{ 'is-open': sidebarOpen }"
+      @touchstart="onTouchStart"
+      @touchend="onTouchEnd"
+    >
+      <div class="logo">
+        <h2>Nginx 管理</h2>
+      </div>
+      <el-menu
+        :default-active="activeMenu"
+        router
+        background-color="#304156"
+        text-color="#bfcbd9"
+        active-text-color="#409EFF"
+        @select="onMenuSelect"
+      >
+        <!-- 直接用网关菜单树渲染（支持目录/子菜单层级） -->
+        <template v-for="item in menuTree" :key="item.id || item.path">
+          <!-- 有子节点 → el-sub-menu -->
+          <el-sub-menu
+            v-if="item.component === 'Layout' && item.children && item.children.length"
+            :index="item.path"
+          >
+            <template #title>
+              <el-icon v-if="item.meta?.icon || item.icon">
+                <component :is="resolveIcon(item.meta?.icon || item.icon)" />
+              </el-icon>
+              <span>{{ item.name }}</span>
+            </template>
+            <el-menu-item
+              v-for="child in item.children"
+              :key="child.id || child.path"
+              :index="child.path"
+            >
+              <el-icon v-if="child.meta?.icon || child.icon">
+                <component :is="resolveIcon(child.meta?.icon || child.icon)" />
+              </el-icon>
+              <span>{{ child.name }}</span>
+            </el-menu-item>
+          </el-sub-menu>
+          <!-- 无子节点 → 直接 el-menu-item -->
+          <el-menu-item v-else :index="item.path">
+            <el-icon v-if="item.meta?.icon || item.icon">
+              <component :is="resolveIcon(item.meta?.icon || item.icon)" />
+            </el-icon>
+            <span>{{ item.name }}</span>
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </el-aside>
+
+    <!-- 右侧内容区 -->
+    <el-container>
+      <el-header class="layout-header">
+        <div class="header-left">
+          <button
+            v-if="isMobile"
+            class="hamburger"
+            :class="{ 'is-active': sidebarOpen }"
+            @click="sidebarOpen = !sidebarOpen"
+          >
+            <span /><span /><span />
+          </button>
+          <span class="header-title">Nginx域名转发管理平台</span>
+        </div>
+        <!-- Mokee UserChip Widget 占位 -->
+        <div
+          id="mokee-user-chip"
+          data-api-base="https://gw.server.zgitm.com"
+          data-cookie-domain=".zgitm.com"
+        />
+      </el-header>
+
+      <el-main class="layout-main">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { menuTree } from '../router'
+import {
+  Connection, Key, Link,
+  Setting, Document, User, Avatar,
+  Tickets, Menu, Share, Star,
+  Picture, List, DataAnalysis, Monitor
+} from '@element-plus/icons-vue'
+import { useMobile } from '../composables/useMobile'
+
+const route = useRoute()
+const activeMenu = computed(() => route.path)
+const sidebarOpen = ref(false)
+const { isMobile } = useMobile()
+
+// 图标名称 → 组件映射
+const ICON_MAP = {
+  Connection, Key, Link,
+  Setting, Document, User, Avatar,
+  Tickets, Menu, Share, Star,
+  Picture, List, DataAnalysis, Monitor,
+}
+
+function resolveIcon(name) {
+  return ICON_MAP[name] || Menu
+}
+
+function onMenuSelect() {
+  if (isMobile.value) sidebarOpen.value = false
+}
+
+let touchStartX = 0
+function onTouchStart(e)  { touchStartX = e.touches[0].clientX }
+function onTouchEnd(e) {
+  if (e.changedTouches[0].clientX - touchStartX < -60 && sidebarOpen.value) {
+    sidebarOpen.value = false
+  }
+}
+</script>
+
+<style scoped>
+.layout-container { height: 100vh; }
+
+.layout-aside {
+  background-color: #304156;
+  overflow-y: auto;
+  display: flex; flex-direction: column;
+  transition: transform 0.25s ease; z-index: 1000;
+}
+.logo {
+  height: 60px;
+  display: flex; align-items: center; justify-content: center;
+  background-color: #2b3a4a; flex-shrink: 0;
+}
+.logo h2 { color: #fff; font-size: 18px; margin: 0; letter-spacing: 2px; }
+.el-menu { border-right: none; flex: 1; }
+
+.sidebar-overlay {
+  display: none; position: fixed; inset: 0;
+  background: rgba(0,0,0,0.4); z-index: 999;
+}
+.sidebar-overlay.is-visible { display: block; }
+
+.layout-header {
+  background: #fff;
+  display: flex; align-items: center; justify-content: space-between;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+  padding: 0 16px; height: 50px; flex-shrink: 0;
+}
+.header-left { display: flex; align-items: center; gap: 8px; }
+.header-title { font-size: 15px; color: #303133; font-weight: 500; }
+#mokee-user-chip { flex-shrink: 0; }
+
+.layout-main { background: #f0f2f5; padding: 16px; overflow-y: auto; }
+
+.hamburger {
+  display: none; width: 24px; height: 18px; position: relative;
+  background: none; border: none; cursor: pointer;
+  padding: 0; margin-right: 10px; flex-shrink: 0;
+}
+.hamburger span {
+  display: block; position: absolute; height: 2px; width: 100%;
+  background: #303133; border-radius: 2px; transition: all 0.25s ease;
+}
+.hamburger span:nth-child(1) { top: 0; }
+.hamburger span:nth-child(2) { top: 8px; }
+.hamburger span:nth-child(3) { top: 16px; }
+.hamburger.is-active span:nth-child(1) { top: 8px; transform: rotate(45deg); }
+.hamburger.is-active span:nth-child(2) { opacity: 0; }
+.hamburger.is-active span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
+
+@media (max-width: 768px) {
+  .hamburger { display: block; }
+  .layout-aside {
+    position: fixed; top: 0; left: 0; height: 100vh;
+    transform: translateX(-100%);
+  }
+  .layout-aside.is-open { transform: translateX(0); }
+  .header-title { font-size: 14px; }
+  .layout-main { padding: 10px; }
+}
+</style>
--- a/nginx-manager-frontend/src/main.js
+++ b/nginx-manager-frontend/src/main.js
@@ -0,0 +1,68 @@
+/**
+ * Nginx域名转发管理平台 — 启动入口
+ */
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+import router, { addDynamicRoutes } from './router'
+import request, { getToken } from './utils/request'
+
+const SYSTEM_CODE = import.meta.env.VITE_SYSTEM_CODE
+const LOGIN_URL   = import.meta.env.VITE_LOGIN_URL
+
+async function bootstrap() {
+  // 1. 检查 Token
+  const token = getToken()
+  if (!token) {
+    window.location.href = `${LOGIN_URL}?systemCode=${SYSTEM_CODE}`
+    return
+  }
+
+  // 2. 拉取网关动态菜单
+  try {
+    const res = await request.get(`/zgapi/v1/auth/menu/router?systemCode=${SYSTEM_CODE}`)
+    const raw = res.data
+    // 兼容新旧两种返回格式：
+    //   旧：data 直接是数组  [{...}, {...}]
+    //   新：data 是对象 { menu: [...], permission: [...] }
+    let menuData
+    if (Array.isArray(raw)) {
+      menuData = raw
+    } else if (raw && Array.isArray(raw.menu)) {
+      menuData = raw.menu
+    } else {
+      throw new Error('菜单数据格式错误')
+    }
+    addDynamicRoutes(menuData)
+  } catch (e) {
+    console.error('[Bootstrap] 获取网关菜单失败', e)
+    document.body.innerHTML = `
+      <div style="display:flex;align-items:center;justify-content:center;height:100vh;font-family:sans-serif;">
+        <div style="text-align:center;color:#F56C6C;">
+          <h2>⚠️ 菜单加载失败</h2>
+          <p style="color:#909399;">无法从网关获取系统菜单，请稍后重试。</p>
+          <p style="color:#C0C4CC;font-size:13px;">${e.message}</p>
+        </div>
+      </div>`
+    return
+  }
+
+  // 3. 挂载 Vue 应用
+  const app = createApp(App)
+  app.use(ElementPlus)
+  app.use(router)
+  app.mount('#app')
+
+  console.log('[Bootstrap] 应用启动完成')
+
+  // 4. Vue 渲染完成后，动态加载 Widget 脚本
+  //    - 加 process polyfill（Widget 内部引用了 process.env）
+  //    - 必须在 mount 之后加载，否则 Widget 找不到 #mokee-user-chip 元素
+  window.process = { env: {} }
+  const script = document.createElement('script')
+  script.src = 'https://web.gw.zgitm.com/widgets/user-chip.js'
+  document.body.appendChild(script)
+}
+
+bootstrap()
--- a/nginx-manager-frontend/src/router/index.js
+++ b/nginx-manager-frontend/src/router/index.js
@@ -0,0 +1,96 @@
+/**
+ * 路由配置 — 网关统一登录模式
+ *
+ * - beforeEach 守卫检查 Cookie token，无则跳登录页
+ * - 菜单从网关 /zgapi/v1/auth/menu/router 动态拉取
+ * - 页面路由全部扁平注册到 /，侧边栏层级由 menuTree 单独渲染
+ */
+import { createRouter, createWebHashHistory } from 'vue-router'
+import MainLayout from '../layout/MainLayout.vue'
+import { getToken } from '../utils/request'
+
+const SYSTEM_CODE = import.meta.env.VITE_SYSTEM_CODE
+const LOGIN_URL   = import.meta.env.VITE_LOGIN_URL
+
+// component 字符串 → 实际 Vue 组件映射
+const COMPONENT_MAP = {
+  'views/NginxForwarding.vue': () => import('../views/NginxForwarding.vue'),
+  'views/CertManagement.vue':  () => import('../views/CertManagement.vue'),
+  'views/DnsManagement.vue':   () => import('../views/DnsManagement.vue'),
+}
+
+/** 网关返回的原始菜单树（供 MainLayout 渲染侧边栏） */
+export let menuTree = []
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      component: MainLayout,
+      redirect: '/nginx-forwarding',
+      children: [] // 动态注入
+    }
+  ]
+})
+
+// 路由守卫
+router.beforeEach((_to, _from, next) => {
+  const token = getToken()
+  if (!token) {
+    window.location.href = `${LOGIN_URL}?systemCode=${SYSTEM_CODE}`
+    return
+  }
+  next()
+})
+
+/**
+ * 根据网关菜单树动态注册路由（全部扁平注册到 / 下）
+ */
+export function addDynamicRoutes(tree) {
+  if (!Array.isArray(tree)) return
+  menuTree = tree
+
+  function walk(menus) {
+    const routes = []
+    for (const m of menus) {
+      if (m.component === 'Layout' && Array.isArray(m.children) && m.children.length > 0) {
+        // 目录菜单：递归处理子菜单，不嵌套路由
+        routes.push(...walk(m.children))
+      } else if (m.component && m.component !== 'Layout') {
+        // 页面菜单：直接添加到根路由
+        const comp = COMPONENT_MAP[m.component]
+        if (comp) {
+          routes.push({
+            path: m.path,
+            name: m.name,
+            component: comp,
+            meta: { title: m.name, icon: m.meta?.icon || m.icon }
+          })
+          console.log(`[Router] 注册路由: ${m.path}`)
+        } else {
+          console.warn(`[Router] 未找到组件映射: ${m.component}`)
+        }
+      }
+    }
+    return routes
+  }
+
+  const flatRoutes = walk(tree)
+  for (const route of flatRoutes) {
+    router.addRoute('/', route)
+  }
+
+  // 更新默认重定向为第一个页面
+  if (flatRoutes.length > 0) {
+    router.removeRoute('/')
+    router.addRoute({
+      path: '/',
+      component: MainLayout,
+      redirect: flatRoutes[0].path,
+      children: flatRoutes
+    })
+  }
+}
+
+export default router
--- a/nginx-manager-frontend/src/utils/request.js
+++ b/nginx-manager-frontend/src/utils/request.js
@@ -0,0 +1,61 @@
+/**
+ * 网关统一登录 — Axios 请求实例
+ *
+ * baseURL → 网关地址（非业务后端）
+ * 网关根据 X-System-Code 头自动识别并转发到对应业务后端
+ */
+import axios from 'axios'
+
+const SYSTEM_CODE = import.meta.env.VITE_SYSTEM_CODE
+const LOGIN_URL   = import.meta.env.VITE_LOGIN_URL
+
+/**
+ * 从 Cookie 读取 Token（网关登录后写入 .zgitm.com 跨域 Cookie）
+ */
+export function getToken() {
+  const match = document.cookie.match(/(?:^|;\s*)token=([^;]*)/)
+  return match ? decodeURIComponent(match[1]) : null
+}
+
+const request = axios.create({
+  baseURL: import.meta.env.VITE_GATEWAY_URL,
+  timeout: 30000,
+})
+
+// ════════════════════════════════════════════
+// 请求拦截器：携带 Token + 系统编码
+// ════════════════════════════════════════════
+request.interceptors.request.use(config => {
+  const token = getToken()
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  // 关键：网关根据此头识别业务系统并转发
+  config.headers['X-System-Code'] = SYSTEM_CODE
+  return config
+})
+
+// ════════════════════════════════════════════
+// 响应拦截器
+// ════════════════════════════════════════════
+request.interceptors.response.use(
+  response => {
+    const data = response.data
+    // 网关自身 API 返回 code:200，业务后端返回 code:0，都算成功
+    if (data.code === 200 || data.code === 0) {
+      return data
+    }
+    return Promise.reject(data)
+  },
+  error => {
+    // 401 → Token 过期或无效 → 跳转统一登录页
+    if (error.response?.status === 401) {
+      window.location.href = `${LOGIN_URL}?systemCode=${SYSTEM_CODE}`
+    }
+    // 提取后端返回的实际错误消息，而非 axios 默认的 "Request failed with status code xxx"
+    const message = error.response?.data?.message || error.message || '网络错误'
+    return Promise.reject(new Error(message))
+  }
+)
+
+export default request
--- a/nginx-manager-frontend/src/views/CertManagement.vue
+++ b/nginx-manager-frontend/src/views/CertManagement.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="cert-management-container">
+    <!-- 顶部标题 -->
+    <div class="page-header">
+      <h1>SSL证书管理</h1>
+      <p class="subtitle">管理 Let's Encrypt 域名证书与到期邮件通知</p>
+    </div>
+
+    <!-- 操作栏 -->
+    <div class="toolbar">
+      <el-button @click="fetchCerts" :loading="loading">
+        <el-icon><Refresh /></el-icon> 刷新列表
+      </el-button>
+    </div>
+
+    <!-- 桌面端：表格视图 -->
+    <div v-if="!isMobile" class="table-container">
+      <el-table :data="certs" v-loading="loading" stripe border style="width: 100%">
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="domain" label="域名" min-width="180">
+          <template #default="{ row }">
+            <span class="domain-text">{{ row.domain }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="certType" label="证书类型" width="130" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.certType === 'letsencrypt' ? 'success' : 'info'" effect="light">
+              {{ row.certType === 'letsencrypt' ? 'Let\'s Encrypt' : '内部CA' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="expireDate" label="到期时间" width="170" align="center">
+          <template #default="{ row }">
+            <span v-if="row.expireDate">{{ formatDate(row.expireDate) }}</span>
+            <el-tag v-else type="info" size="small">未签发</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="剩余天数" width="110" align="center">
+          <template #default="{ row }">
+            <span v-if="row.daysLeft !== undefined && row.daysLeft !== null"
+                  :style="{ color: row.daysLeft <= 15 ? '#F56C6C' : row.daysLeft <= 30 ? '#E6A23C' : '#67C23A' }"
+                  class="days-text">
+              {{ row.daysLeft }} 天
+            </span>
+            <span v-else style="color: #C0C4CC">-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 'active' ? 'success' : 'danger'" effect="plain" size="small">
+              {{ row.status === 'active' ? '正常' : '异常' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="邮件通知" width="200" align="center">
+          <template #default="{ row }">
+            <template v-if="row.notifyEnabled && row.notifyEmail">
+              <el-tooltip :content="'收件人: ' + row.notifyEmail" placement="top">
+                <el-tag type="primary" effect="plain" size="small">
+                  <el-icon style="margin-right:4px"><Message /></el-icon>
+                  {{ row.notifyDaysBefore }}天前提醒
+                </el-tag>
+              </el-tooltip>
+            </template>
+            <span v-else style="color: #C0C4CC">未配置</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button type="warning" size="small" @click="showNotifyDialog(row)"
+                       v-if="row.certType === 'letsencrypt'">
+              <el-icon><Edit /></el-icon> 通知设置
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 移动端：卡片视图 -->
+    <div v-if="isMobile" class="mobile-card-list" v-loading="loading">
+      <div v-if="certs.length === 0" class="mobile-empty">暂无证书</div>
+      <div v-for="row in certs" :key="row.id" class="mobile-card">
+        <div class="card-top">
+          <span class="card-domain">{{ row.domain }}</span>
+          <el-tag :type="row.status === 'active' ? 'success' : 'danger'" size="small" effect="dark">
+            {{ row.status === 'active' ? '正常' : '异常' }}
+          </el-tag>
+        </div>
+        <div class="card-body">
+          <div class="card-row">
+            <span class="card-label">类型</span>
+            <el-tag :type="row.certType === 'letsencrypt' ? 'success' : 'info'" size="small" effect="plain">
+              {{ row.certType === 'letsencrypt' ? 'Let\'s Encrypt' : '内部CA' }}
+            </el-tag>
+          </div>
+          <div class="card-row">
+            <span class="card-label">到期</span>
+            <span v-if="row.expireDate" :style="{ color: row.daysLeft <= 15 ? '#F56C6C' : row.daysLeft <= 30 ? '#E6A23C' : '#67C23A' }"
+                  style="font-weight:bold;font-size:14px;">
+              {{ formatDate(row.expireDate) }} · 剩{{ row.daysLeft }}天
+            </span>
+            <span v-else style="color:#C0C4CC">未签发</span>
+          </div>
+          <div v-if="row.notifyEnabled && row.notifyEmail" class="card-row">
+            <span class="card-label">通知</span>
+            <span style="font-size:13px;color:#606266;">
+              📧 {{ row.notifyEmail }} · 提前{{ row.notifyDaysBefore }}天
+            </span>
+          </div>
+        </div>
+        <div class="card-actions" v-if="row.certType === 'letsencrypt'">
+          <el-button type="warning" size="small" @click="showNotifyDialog(row)">
+            通知设置
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 通知设置对话框 -->
+    <el-dialog v-model="notifyDialogVisible" title="通知设置" width="480px" destroy-on-close>
+      <el-form :model="notifyForm" label-width="110px">
+        <el-form-item label="域名">
+          <el-input :model-value="notifyTarget?.domain" disabled />
+        </el-form-item>
+        <el-form-item label="收件人邮箱" prop="notifyEmail">
+          <el-input v-model="notifyForm.notifyEmail" placeholder="例如：admin@mokee.com" clearable />
+        </el-form-item>
+        <el-form-item label="启用通知">
+          <el-switch v-model="notifyForm.notifyEnabled" />
+        </el-form-item>
+        <el-form-item label="提前通知天数">
+          <el-input-number v-model="notifyForm.notifyDaysBefore" :min="1" :max="30" :step="1" />
+          <span style="margin-left:8px;color:#909399;font-size:12px;">到期前开始连续提醒</span>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="notifyDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveNotifyConfig" :loading="savingNotify">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Refresh, Edit, Message } from '@element-plus/icons-vue'
+import { getCertificates, updateCertNotifyConfig } from '../api/nginxApi'
+import { useMobile } from '../composables/useMobile'
+
+const { isMobile } = useMobile()
+
+const loading = ref(false)
+const certs = ref([])
+
+// 通知设置对话框
+const notifyDialogVisible = ref(false)
+const savingNotify = ref(false)
+const notifyTarget = ref(null)
+const notifyForm = reactive({
+  notifyEmail: '',
+  notifyEnabled: true,
+  notifyDaysBefore: 15
+})
+
+/** 格式化日期 */
+function formatDate(dateStr) {
+  if (!dateStr) return '-'
+  return dateStr.replace('T', ' ').substring(0, 19)
+}
+
+/** 获取证书列表 */
+async function fetchCerts() {
+  loading.value = true
+  try {
+    const res = await getCertificates()
+    const data = res.data || []
+    // 计算剩余天数
+    certs.value = data.map(cert => ({
+      ...cert,
+      daysLeft: cert.expireDate
+        ? Math.ceil((new Date(cert.expireDate) - new Date()) / (1000 * 60 * 60 * 24))
+        : null
+    }))
+  } catch (e) {
+    ElMessage.error('获取证书列表失败：' + e.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 显示通知设置对话框 */
+function showNotifyDialog(row) {
+  notifyTarget.value = row
+  notifyForm.notifyEmail = row.notifyEmail || 'zg@zgitm.com'
+  notifyForm.notifyEnabled = row.notifyEnabled === 1
+  notifyForm.notifyDaysBefore = row.notifyDaysBefore || 15
+  notifyDialogVisible.value = true
+}
+
+/** 保存通知配置 */
+async function saveNotifyConfig() {
+  savingNotify.value = true
+  try {
+    await updateCertNotifyConfig(notifyTarget.value.id, {
+      notifyEmail: notifyForm.notifyEmail,
+      notifyEnabled: notifyForm.notifyEnabled ? 1 : 0,
+      notifyDaysBefore: notifyForm.notifyDaysBefore
+    })
+    ElMessage.success('通知配置已更新')
+    notifyDialogVisible.value = false
+    await fetchCerts()
+  } catch (e) {
+    ElMessage.error('保存失败：' + e.message)
+  } finally {
+    savingNotify.value = false
+  }
+}
+
+onMounted(() => {
+  fetchCerts()
+})
+</script>
+
+<style scoped>
+.cert-management-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
+.page-header { margin-bottom: 20px; }
+.page-header h1 { margin: 0; font-size: 24px; color: #303133; }
+.page-header .subtitle { margin: 4px 0 0; color: #909399; font-size: 14px; }
+.toolbar { margin-bottom: 16px; }
+
+.table-container {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.domain-text { font-weight: 500; color: #303133; }
+.days-text { font-weight: bold; font-size: 15px; }
+
+/* ════════════════════════════════════════════════ */
+/* 移动端 (≤768px) */
+/* ════════════════════════════════════════════════ */
+@media (max-width: 768px) {
+  .cert-management-container { padding: 8px; }
+  .page-header h1 { font-size: 18px; }
+  .page-header .subtitle { font-size: 12px; }
+  .toolbar { display: flex; flex-wrap: wrap; }
+
+  /* 隐藏桌面表格 */
+  .table-container { display: none; }
+
+  /* 移动端卡片列表 */
+  .mobile-card-list { display: flex; flex-direction: column; gap: 10px; }
+  .mobile-empty { text-align: center; color: #C0C4CC; padding: 40px 0; font-size: 14px; }
+
+  .mobile-card {
+    background: #fff; border-radius: 10px; padding: 14px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  }
+  .card-top {
+    display: flex; align-items: center; gap: 10px;
+    padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
+  }
+  .card-domain { font-size: 15px; font-weight: 600; color: #303133; flex:1; word-break: break-all; }
+  .card-body { padding: 10px 0; }
+  .card-row { display: flex; align-items: center; margin-bottom: 6px; gap: 8px; }
+  .card-label { color: #909399; font-size: 12px; width: 36px; flex-shrink: 0; }
+
+  .card-actions {
+    display: flex; gap: 8px; padding-top: 10px;
+    border-top: 1px solid #f0f0f0; justify-content: flex-end; flex-wrap: wrap;
+  }
+  .card-actions .el-button { min-height: 36px; }
+
+  :deep(.el-dialog) { width: 95% !important; margin: 2vh auto !important; }
+  :deep(.el-dialog__body) { padding: 12px 8px; }
+  :deep(.el-form-item__label) { width: 80px !important; font-size: 13px; }
+}
+</style>
--- a/nginx-manager-frontend/src/views/DnsManagement.vue
+++ b/nginx-manager-frontend/src/views/DnsManagement.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="dns-management-container">
+    <div class="page-header">
+      <h1>DNS 解析管理</h1>
+      <p class="subtitle">管理 zgitm.com 子域名解析记录，自动同步至阿里云 DNS</p>
+    </div>
+
+    <!-- 操作栏 -->
+    <div class="toolbar">
+      <div class="toolbar-left">
+        <el-tag type="success" size="large" effect="dark">
+          主域名: {{ zoneInfo.zone }}
+        </el-tag>
+        <el-tag type="info" size="large" style="margin-left:10px">
+          默认IP: {{ zoneInfo.defaultIp }}
+        </el-tag>
+      </div>
+      <div class="toolbar-right">
+        <el-button type="primary" @click="showAddDialog">
+          <el-icon><Plus /></el-icon> 添加子域名
+        </el-button>
+        <el-button @click="fetchRecords" :loading="loading">
+          <el-icon><Refresh /></el-icon> 刷新
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 桌面端：表格视图 -->
+    <div v-if="!isMobile" class="table-container">
+      <el-table :data="records" v-loading="loading" stripe border style="width: 100%">
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="full_domain" label="完整域名" min-width="220" />
+        <el-table-column prop="type" label="类型" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.type === 'A' ? '' : 'warning'" size="small">{{ row.type }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="value" label="记录值" min-width="180">
+          <template #default="{ row }">
+            <code class="record-value">{{ row.value }}</code>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ttl" label="TTL" width="80" align="center" />
+        <el-table-column prop="createdBy" label="创建人" width="100" align="center">
+          <template #default="{ row }">
+            <span>{{ row.createdBy || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" width="160" align="center">
+          <template #default="{ row }">
+            <span>{{ formatDate(row.createdAt) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link size="small" @click="showEditDialog(row)">
+              <el-icon><Edit /></el-icon> 修改
+            </el-button>
+            <el-button type="danger" link size="small" @click="handleDelete(row)">
+              <el-icon><Delete /></el-icon> 删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 移动端：卡片视图 -->
+    <div v-if="isMobile" class="mobile-card-list" v-loading="loading">
+      <div v-if="records.length === 0" class="mobile-empty">暂无 DNS 记录</div>
+      <div v-for="row in records" :key="row.record_id || row.full_domain" class="mobile-card">
+        <div class="card-top">
+          <el-tag :type="row.type === 'A' ? '' : 'warning'" size="small" effect="dark">{{ row.type }}</el-tag>
+          <span class="card-domain">{{ row.full_domain }}</span>
+        </div>
+        <div class="card-body">
+          <div class="card-row">
+            <span class="card-label">记录值</span>
+            <code class="card-value" style="color:#409EFF;background:#ecf5ff;">{{ row.value }}</code>
+          </div>
+          <div class="card-row">
+            <span class="card-label">TTL</span>
+            <span style="font-size:13px;color:#606266;">{{ row.ttl }}s</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">创建人</span>
+            <span style="font-size:13px;color:#606266;">{{ row.createdBy || '-' }}</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">创建时间</span>
+            <span style="font-size:12px;color:#909399;">{{ formatDate(row.createdAt) }}</span>
+          </div>
+        </div>
+        <div class="card-actions">
+          <el-button type="primary" size="small" @click="showEditDialog(row)">
+            <el-icon><Edit /></el-icon> 修改
+          </el-button>
+          <el-button type="danger" size="small" @click="handleDelete(row)">
+            <el-icon><Delete /></el-icon> 删除
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加/修改对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="isEditing ? '修改DNS记录' : '添加子域名'"
+      width="480px" destroy-on-close
+    >
+      <el-form ref="formRef" :model="formData" label-width="90px">
+        <el-form-item label="主域名">
+          <el-input :model-value="zoneInfo.zone" disabled>
+            <template #prefix>. </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="主机记录" prop="rr">
+          <el-input v-model="formData.rr" placeholder="例如：webssd 或 api.test">
+            <template #append>.{{ zoneInfo.zone }}</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="记录类型">
+          <el-select v-model="formData.type" style="width:100%">
+            <el-option label="A (IP地址)" value="A" />
+            <el-option label="CNAME (域名)" value="CNAME" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="记录值" prop="value">
+          <el-input v-model="formData.value"
+            :placeholder="formData.type === 'A' ? '例如：10.1.1.160' : '例如：other.zgitm.com'" />
+        </el-form-item>
+        <el-form-item label="TTL">
+          <el-select v-model="formData.ttl" style="width:100%">
+            <el-option label="600 (10分钟)" :value="600" />
+            <el-option label="1800 (30分钟)" :value="1800" />
+            <el-option label="3600 (1小时)" :value="3600" />
+            <el-option label="86400 (1天)" :value="86400" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm" :loading="submitting">
+          {{ isEditing ? '确认修改' : '确认添加' }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Refresh, Edit, Delete } from '@element-plus/icons-vue'
+import { getDnsDefaultZone, getDnsRecords, addDnsRecord, deleteDnsRecord, updateDnsRecord } from '../api/nginxApi'
+import { useMobile } from '../composables/useMobile'
+
+const { isMobile } = useMobile()
+
+const loading = ref(false)
+const submitting = ref(false)
+const dialogVisible = ref(false)
+const isEditing = ref(false)
+const editingId = ref(null)
+
+const zoneInfo = reactive({ zone: 'zgitm.com', defaultIp: '10.1.1.160' })
+const records = ref([])
+const formRef = ref(null)
+const formData = reactive({ rr: '', type: 'A', value: '', ttl: 600 })
+
+/** 格式化日期为本地字符串 */
+function formatDate(dateStr) {
+  if (!dateStr) return '-'
+  try {
+    return new Date(dateStr).toLocaleString('zh-CN', {
+      year: 'numeric', month: '2-digit', day: '2-digit',
+      hour: '2-digit', minute: '2-digit'
+    })
+  } catch {
+    return '-'
+  }
+}
+
+/** 获取 DNS 记录 */
+async function fetchRecords() {
+  loading.value = true
+  try {
+    const res = await getDnsRecords(zoneInfo.zone)
+    records.value = (res.data?.data || res.data || [])
+  } catch (e) {
+    ElMessage.error('获取DNS记录失败：' + e.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 加载默认配置 */
+async function loadZoneConfig() {
+  try {
+    const res = await getDnsDefaultZone()
+    if (res.data) {
+      zoneInfo.zone = res.data.zone || 'zgitm.com'
+      zoneInfo.defaultIp = res.data.defaultIp || '10.1.1.160'
+    }
+  } catch (e) {
+    // 用默认值
+  }
+}
+
+/** 显示添加对话框 */
+function showAddDialog() {
+  isEditing.value = false
+  editingId.value = null
+  formData.rr = ''
+  formData.type = 'A'
+  formData.value = zoneInfo.defaultIp
+  formData.ttl = 600
+  dialogVisible.value = true
+}
+
+/** 显示修改对话框 */
+function showEditDialog(row) {
+  isEditing.value = true
+  editingId.value = row.record_id
+  formData.rr = row.rr
+  formData.type = row.type
+  formData.value = row.value
+  formData.ttl = row.ttl
+  dialogVisible.value = true
+}
+
+/** 提交 */
+async function submitForm() {
+  if (!formData.rr.trim()) {
+    ElMessage.warning('请输入主机记录')
+    return
+  }
+  if (!formData.value.trim()) {
+    ElMessage.warning('请输入记录值')
+    return
+  }
+
+  submitting.value = true
+  try {
+    const body = {
+      zone: zoneInfo.zone,
+      rr: formData.rr.trim(),
+      type: formData.type,
+      value: formData.value.trim(),
+      ttl: formData.ttl
+    }
+
+    if (isEditing.value) {
+      await updateDnsRecord(editingId.value, body)
+      ElMessage.success('DNS记录已更新')
+    } else {
+      await addDnsRecord(body)
+      ElMessage.success('DNS记录已添加，阿里云同步生效')
+    }
+    dialogVisible.value = false
+    await fetchRecords()
+  } catch (e) {
+    ElMessage.error((isEditing.value ? '修改' : '添加') + '失败：' + e.message)
+  } finally {
+    submitting.value = false
+  }
+}
+
+/** 删除 */
+function handleDelete(row) {
+  ElMessageBox.confirm(
+    `确定要删除 <strong>${row.full_domain}</strong> 的 ${row.type} 记录吗？`,
+    '确认删除', { confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning', dangerouslyUseHTMLString: true }
+  ).then(async () => {
+    try {
+      await deleteDnsRecord(row.record_id)
+      ElMessage.success('DNS记录已删除')
+      await fetchRecords()
+    } catch (e) {
+      ElMessage.error('删除失败：' + e.message)
+    }
+  }).catch(() => {})
+}
+
+onMounted(async () => {
+  await loadZoneConfig()
+  await fetchRecords()
+})
+</script>
+
+<style scoped>
+.dns-management-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
+.page-header { margin-bottom: 20px; }
+.page-header h1 { margin: 0; font-size: 24px; color: #303133; }
+.page-header .subtitle { margin: 4px 0 0; color: #909399; font-size: 14px; }
+.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
+
+.table-container {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.record-value { background: #f5f7fa; padding: 2px 8px; border-radius: 4px; font-size: 13px; color: #409EFF; }
+
+/* ════════════════════════════════════════════════ */
+/* 移动端 (≤768px) */
+/* ════════════════════════════════════════════════ */
+@media (max-width: 768px) {
+  .dns-management-container { padding: 8px; }
+  .page-header h1 { font-size: 18px; }
+  .page-header .subtitle { font-size: 12px; }
+
+  .toolbar { flex-direction: column; align-items: stretch; }
+  .toolbar-left, .toolbar-right { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
+
+  /* 隐藏桌面表格 */
+  .table-container { display: none; }
+
+  /* 移动端卡片列表 */
+  .mobile-card-list { display: flex; flex-direction: column; gap: 10px; }
+  .mobile-empty { text-align: center; color: #C0C4CC; padding: 40px 0; font-size: 14px; }
+
+  .mobile-card {
+    background: #fff; border-radius: 10px; padding: 14px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  }
+  .card-top {
+    display: flex; align-items: center; gap: 10px;
+    padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
+  }
+  .card-domain { font-size: 15px; font-weight: 600; color: #303133; flex:1; word-break: break-all; }
+  .card-body { padding: 10px 0; }
+  .card-row { display: flex; align-items: center; margin-bottom: 6px; gap: 8px; }
+  .card-label { color: #909399; font-size: 12px; width: 48px; flex-shrink: 0; }
+  .card-value { font-size: 13px; padding: 2px 6px; border-radius: 4px; word-break: break-all; }
+
+  .card-actions {
+    display: flex; gap: 8px; padding-top: 10px;
+    border-top: 1px solid #f0f0f0; justify-content: flex-end;
+  }
+  .card-actions .el-button { min-height: 36px; }
+
+  :deep(.el-dialog) { width: 95% !important; margin: 2vh auto !important; }
+  :deep(.el-dialog__body) { padding: 12px 8px; }
+  :deep(.el-form-item__label) { width: 75px !important; font-size: 13px; }
+}
+</style>
--- a/nginx-manager-frontend/src/views/NginxForwarding.vue
+++ b/nginx-manager-frontend/src/views/NginxForwarding.vue
@@ -0,0 +1,400 @@
+<template>
+  <div class="nginx-forwarding-container">
+    <!-- 顶部标题栏 -->
+    <div class="page-header">
+      <h1>Nginx转发管理</h1>
+      <p class="subtitle">管理 Nginx 反向代理规则与 HTTPS 证书</p>
+    </div>
+
+    <!-- 操作区域 -->
+    <div class="toolbar">
+      <div class="toolbar-left">
+        <el-tag type="warning" size="large">
+          <el-icon style="margin-right: 4px"><InfoFilled /></el-icon>
+          新增/修改/删除请在宝塔面板上操作
+        </el-tag>
+      </div>
+      <div class="toolbar-right">
+        <el-input
+          v-model="searchKeyword"
+          placeholder="搜索域名..."
+          clearable
+          style="width: 240px"
+          :prefix-icon="Search"
+        />
+        <el-select v-model="protocolFilter" placeholder="协议筛选" clearable style="width: 120px; margin-left: 10px">
+          <el-option label="全部" value="" />
+          <el-option label="HTTP" value="http" />
+          <el-option label="HTTPS" value="https" />
+        </el-select>
+        <el-button @click="fetchRules" :loading="loading" style="margin-left: 10px">
+          <el-icon><Refresh /></el-icon>
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 桌面端：表格视图 -->
+    <div v-if="!isMobile" class="table-container">
+      <el-table
+        :data="filteredRules"
+        v-loading="loading"
+        stripe
+        border
+        style="width: 100%"
+        empty-text="暂无转发规则，点击 [新增规则] 添加"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="domain" label="域名" min-width="200">
+          <template #default="{ row }">
+            <span class="domain-text">{{ row.domain }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="protocol" label="协议类型" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.protocol === 'https' ? 'success' : 'info'" effect="light">
+              {{ row.protocol.toUpperCase() }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="target" label="转发目标地址" min-width="280">
+          <template #default="{ row }">
+            <code class="target-address">{{ row.target }}</code>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sslCert" label="SSL证书" min-width="120" align="center">
+          <template #default="{ row }">
+            <template v-if="row.sslCert">
+              <el-tooltip :content="row.sslCert" placement="top">
+                <el-tag type="warning" effect="plain" size="small">已配置</el-tag>
+              </el-tooltip>
+            </template>
+            <template v-else>
+              <span style="color: #c0c4cc">-</span>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdBy" label="创建人" width="100" align="center">
+          <template #default="{ row }">
+            <span>{{ row.createdBy || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdAt" label="创建时间" width="160" align="center">
+          <template #default="{ row }">
+            <span>{{ formatDate(row.createdAt) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="isSystemDomain(row.domain)">
+              <el-tag type="info" size="small">系统域名</el-tag>
+            </template>
+            <template v-else>
+              <el-button type="primary" link size="small" @click="showDetailDialog(row)">
+                <el-icon><View /></el-icon> 查看
+              </el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 移动端：卡片视图 -->
+    <div v-if="isMobile" class="mobile-card-list" v-loading="loading">
+      <div v-if="filteredRules.length === 0" class="mobile-empty">暂无转发规则</div>
+      <div v-for="row in filteredRules" :key="row.id" class="mobile-card">
+        <div class="card-top">
+          <el-tag :type="row.protocol === 'https' ? 'success' : 'info'" size="small" effect="dark">
+            {{ row.protocol.toUpperCase() }}
+          </el-tag>
+          <span class="card-domain">{{ row.domain }}</span>
+          <el-tag v-if="row.sslCert" type="warning" size="small" effect="plain">SSL</el-tag>
+        </div>
+        <div class="card-body">
+          <div class="card-row">
+            <span class="card-label">转发目标</span>
+            <code class="card-value">{{ row.target }}</code>
+          </div>
+          <div class="card-row">
+            <span class="card-label">创建人</span>
+            <span style="font-size:13px;color:#606266;">{{ row.createdBy || '-' }}</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">创建时间</span>
+            <span style="font-size:12px;color:#909399;">{{ formatDate(row.createdAt) }}</span>
+          </div>
+        </div>
+        <div class="card-actions">
+          <template v-if="!isSystemDomain(row.domain)">
+            <el-button type="primary" size="small" @click="showDetailDialog(row)">
+              <el-icon><View /></el-icon> 查看详情
+            </el-button>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- 详情查看对话框（只读） -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="'转发规则详情 — ' + detailData.domain"
+      width="900px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <div v-loading="detailLoading" style="min-height: 300px">
+        <!-- 基本信息 -->
+        <el-descriptions :column="2" border size="default" label-width="100px" style="margin-bottom: 16px">
+          <el-descriptions-item label="域名">
+            <span class="detail-domain">{{ detailData.domain }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="协议类型">
+            <el-tag :type="detailData.protocol === 'https' ? 'success' : 'info'" effect="light">
+              {{ detailData.protocol?.toUpperCase() }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="转发目标" :span="2">
+            <code class="target-address">{{ detailData.target }}</code>
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <!-- SSL证书信息 -->
+        <template v-if="detailData.protocol === 'https' || detailData.sslStatus">
+          <el-divider content-position="left">
+            <el-icon><Lock /></el-icon> SSL 证书
+          </el-divider>
+          <el-descriptions :column="2" border size="small" style="margin-bottom: 16px">
+            <el-descriptions-item label="证书状态">
+              <el-tag v-if="detailData.sslStatus === 'valid'" type="success" size="small">有效</el-tag>
+              <el-tag v-else-if="detailData.sslStatus === 'none'" type="info" size="small">未配置</el-tag>
+              <el-tag v-else-if="detailData.sslStatus === 'error'" type="danger" size="small">获取失败</el-tag>
+              <el-tag v-else type="warning" size="small">{{ detailData.sslStatus || '未知' }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="到期时间">
+              <span v-if="detailData.sslExpireDate">{{ formatDate(detailData.sslExpireDate) }}</span>
+              <span v-else style="color:#C0C4CC">-</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="剩余天数" v-if="detailData.sslDaysLeft !== undefined">
+              <span :style="{ color: detailData.sslDaysLeft <= 15 ? '#F56C6C' : detailData.sslDaysLeft <= 30 ? '#E6A23C' : '#67C23A', fontWeight: 'bold' }">
+                {{ detailData.sslDaysLeft }} 天
+              </span>
+            </el-descriptions-item>
+            <el-descriptions-item label="验证方式" v-if="detailData.sslAuthType">
+              <el-tag size="small" effect="plain">{{ detailData.sslAuthType?.toUpperCase() }}</el-tag>
+            </el-descriptions-item>
+          </el-descriptions>
+        </template>
+
+        <!-- Nginx 配置文件内容 -->
+        <el-divider content-position="left">
+          <el-icon><Document /></el-icon> 配置文件
+        </el-divider>
+        <el-input
+          :model-value="detailData.configContent || '加载中...'"
+          type="textarea"
+          :rows="16"
+          readonly
+          style="font-family: 'Consolas', 'Courier New', monospace; font-size: 13px;"
+        />
+      </div>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Refresh, View, InfoFilled, Lock, Document } from '@element-plus/icons-vue'
+import { getRules, getRuleConfig } from '../api/nginxApi'
+import { useMobile } from '../composables/useMobile'
+
+const { isMobile } = useMobile()
+
+// ─── 状态 ───────────────────────────────────
+const loading = ref(false)
+const dialogVisible = ref(false)
+const detailLoading = ref(false)
+
+const rules = ref([])
+const searchKeyword = ref('')
+const protocolFilter = ref('')
+
+const detailData = reactive({
+  domain: '',
+  protocol: '',
+  target: '',
+  configContent: '',
+  sslStatus: '',
+  sslExpireDate: '',
+  sslDaysLeft: null,
+  sslAuthType: ''
+})
+
+// ─── 域名判断 ────────────────────────────────
+const SYSTEM_DOMAINS = ['zgitm.com', 'www.zgitm.com']
+function isSystemDomain(domain) {
+  return SYSTEM_DOMAINS.includes(domain?.toLowerCase())
+}
+
+/** 格式化日期为本地字符串 */
+function formatDate(dateStr) {
+  if (!dateStr) return '-'
+  try {
+    // 处理 ISO 格式或时间戳
+    const d = new Date(dateStr)
+    if (isNaN(d.getTime())) return dateStr
+    return d.toLocaleString('zh-CN', {
+      year: 'numeric', month: '2-digit', day: '2-digit',
+      hour: '2-digit', minute: '2-digit'
+    })
+  } catch {
+    return dateStr || '-'
+  }
+}
+
+// ─── 计算属性 ────────────────────────────────
+const filteredRules = computed(() => {
+  let result = rules.value
+  if (searchKeyword.value) {
+    const keyword = searchKeyword.value.toLowerCase()
+    result = result.filter(r => r.domain.toLowerCase().includes(keyword))
+  }
+  if (protocolFilter.value) {
+    result = result.filter(r => r.protocol === protocolFilter.value)
+  }
+  return result
+})
+
+// ─── 方法 ───────────────────────────────────
+
+/** 获取规则列表 */
+async function fetchRules() {
+  loading.value = true
+  try {
+    const res = await getRules()
+    rules.value = res.data || []
+  } catch (e) {
+    ElMessage.error('获取规则列表失败：' + e.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 显示详情对话框 — 调用后端获取配置文件 + SSL信息 */
+async function showDetailDialog(row) {
+  dialogVisible.value = true
+  detailLoading.value = true
+
+  // 先填充基本信息
+  detailData.domain = row.domain
+  detailData.protocol = row.protocol
+  detailData.target = row.target
+  detailData.configContent = ''
+  detailData.sslStatus = ''
+  detailData.sslExpireDate = ''
+  detailData.sslDaysLeft = null
+  detailData.sslAuthType = ''
+
+  try {
+    const res = await getRuleConfig(row.id)
+    const data = res.data?.data || res.data
+    if (data) {
+      detailData.configContent = data.configContent || ''
+      detailData.sslStatus = data.sslStatus || ''
+      detailData.sslExpireDate = data.sslExpireDate || ''
+      detailData.sslDaysLeft = data.sslDaysLeft
+      detailData.sslAuthType = data.sslAuthType || ''
+    }
+  } catch (e) {
+    ElMessage.warning('获取详情失败：' + e.message)
+    detailData.configContent = '获取配置文件失败'
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+// ─── 生命周期 ────────────────────────────────
+onMounted(() => {
+  fetchRules()
+})
+</script>
+
+<style scoped>
+.nginx-forwarding-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
+.page-header { margin-bottom: 20px; }
+.page-header h1 { margin: 0; font-size: 24px; color: #303133; }
+.page-header .subtitle { margin: 4px 0 0; color: #909399; font-size: 14px; }
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+
+.table-container {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.domain-text { font-weight: 500; color: #303133; }
+.target-address { background: #f5f7fa; padding: 2px 8px; border-radius: 4px; font-size: 13px; color: #e6a23c; }
+
+.detail-domain { font-size: 16px; font-weight: 600; color: #303133; }
+
+/* ════════════════════════════════════════════════ */
+/* 移动端 (≤768px) */
+/* ════════════════════════════════════════════════ */
+@media (max-width: 768px) {
+  .nginx-forwarding-container { padding: 8px; }
+  .page-header h1 { font-size: 18px; }
+  .page-header .subtitle { font-size: 12px; }
+
+  .toolbar { flex-direction: column; align-items: stretch; }
+  .toolbar-left, .toolbar-right { width: 100%; }
+  .toolbar-right :deep(.el-input) { width: 100% !important; }
+  .toolbar-right :deep(.el-select) { width: 100% !important; margin-left: 0 !important; }
+
+  /* 隐藏桌面表格，改用卡片 */
+  .table-container { display: none; }
+
+  /* 移动端卡片列表 */
+  .mobile-card-list { display: flex; flex-direction: column; gap: 10px; }
+  .mobile-empty { text-align: center; color: #C0C4CC; padding: 40px 0; font-size: 14px; }
+
+  .mobile-card {
+    background: #fff; border-radius: 10px; padding: 14px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  }
+  .card-top {
+    display: flex; align-items: center; gap: 10px;
+    padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
+  }
+  .card-domain { font-size: 15px; font-weight: 600; color: #303133; flex:1; word-break: break-all; }
+  .card-body { padding: 10px 0; }
+  .card-row { display: flex; align-items: flex-start; margin-bottom: 6px; }
+  .card-label { color: #909399; font-size: 12px; width: 56px; flex-shrink: 0; padding-top: 1px; }
+  .card-value { font-size: 13px; color: #E6A23C; background: #fdf6ec; padding: 2px 6px; border-radius: 4px; word-break: break-all; }
+
+  .card-actions {
+    display: flex; gap: 8px; padding-top: 10px;
+    border-top: 1px solid #f0f0f0; justify-content: flex-end;
+  }
+  .card-actions .el-button { min-height: 36px; min-width: 64px; }
+
+  /* 对话框全屏 */
+  :deep(.el-dialog) { width: 95% !important; margin: 2vh auto !important; }
+  :deep(.el-dialog__body) { padding: 12px 8px; }
+  :deep(.el-form-item__label) { width: 70px !important; font-size: 13px; }
+}
+</style>
--- a/nginx-manager-frontend/vite.config.js
+++ b/nginx-manager-frontend/vite.config.js
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 31002
+  }
+})