适配h5

2026-09-29 07:56:37 +08:00 · 2025-06-19 11:28:04 +08:00
parent 6df61832b9
commit bd799d3f07
13 changed files with 2410 additions and 470 deletions
@@ -136,5 +136,6 @@ func main() {
 	}
 }

-// GOOS=linux GOARCH=amd64 go build
+// GOOS=linux GOARCH=amd64 go build -ldflags="-s -w" -o gost
 // GOOS=windows GOARCH=amd64 go build -o your_app.exe
+// upx --best --lzma gost
@@ -1,5 +1,6 @@
 package com.admin.common.utils;

+import com.admin.common.dto.GostConfigDto;
 import com.admin.common.dto.GostDto;
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
@@ -16,10 +17,35 @@ public class GostUtil {
    public static GostDto SaveConfig(String addr, String secret) {
        JSONObject data = new JSONObject();
        data.put("format", "json");
+
+        if (!addr.contains("[") && addr.indexOf(':') != addr.lastIndexOf(':')) {
+            // 这是IPv6地址，找到最后一个冒号（端口分隔符）
+            int lastColonIndex = addr.lastIndexOf(':');
+            String ipPart = addr.substring(0, lastColonIndex);
+            String portPart = addr.substring(lastColonIndex);
+            addr = "[" + ipPart + "]" + portPart;
+        }
+
        String url = "https://" + addr + "/api/config?format=json";
        return HttpUtils.post(url, data, secret);
    }

+    public static GostConfigDto GetConfig(String addr, String secret) {
+        JSONObject data = new JSONObject();
+        data.put("format", "json");
+
+        if (!addr.contains("[") && addr.indexOf(':') != addr.lastIndexOf(':')) {
+            // 这是IPv6地址，找到最后一个冒号（端口分隔符）
+            int lastColonIndex = addr.lastIndexOf(':');
+            String ipPart = addr.substring(0, lastColonIndex);
+            String portPart = addr.substring(lastColonIndex);
+            addr = "[" + ipPart + "]" + portPart;
+        }
+
+        String url = "https://" + addr + "/api/config?format=json";
+        return HttpUtils.get(url, secret);
+    }
+

    /**
     * 添加限流器配置
@@ -1,5 +1,6 @@
 package com.admin.common.utils;

+import com.admin.common.dto.GostConfigDto;
 import com.admin.common.dto.GostDto;
 import com.admin.common.task.SaveConfigAsync;
 import com.admin.config.RestTemplateConfig;
@@ -145,6 +146,32 @@ public class HttpUtils implements ApplicationContextAware {
        return restTemplate;
    }

+
+    @SneakyThrows
+    public static GostConfigDto get(String url, String secret) {
+        HttpHeaders headers = new HttpHeaders();
+        headers.setContentType(MediaType.APPLICATION_JSON);
+        headers.setAccept(Collections.singletonList(MediaType.APPLICATION_JSON));
+        String auth = secret + ":" + secret;
+        String encodedAuth = Base64.getEncoder().encodeToString(auth.getBytes(StandardCharsets.UTF_8));
+        headers.set("Authorization", "Basic " + encodedAuth);
+        RestTemplate restTemplate = createRestTemplateWithTimeout();
+        HttpEntity<Object> entity = new HttpEntity<>("", headers);
+        try {
+            ResponseEntity<GostConfigDto> response = restTemplate.exchange(
+                    url,
+                    HttpMethod.GET,
+                    entity,
+                    GostConfigDto.class
+            );
+            return response.getBody();
+        } catch (Exception e) {
+            e.printStackTrace();
+            GostConfigDto gostDto = new GostConfigDto();
+            return gostDto;
+        }
+    }
+
    @SneakyThrows
    public static GostDto post(String url, Object requestBody, String secret) {
        HttpHeaders headers = new HttpHeaders();
@@ -99,6 +99,7 @@ public class ForwardServiceImpl extends ServiceImpl<ForwardMapper, Forward> impl

        // 6. 调用Gost服务创建转发
        R gostResult = createGostServices(forward, tunnel, permissionResult.getLimiter());
+
        if (gostResult.getCode() != 0) {
            this.removeById(forward.getId());
            return gostResult;
@@ -538,13 +539,11 @@ public class ForwardServiceImpl extends ServiceImpl<ForwardMapper, Forward> impl
        if (tunnel.getType() == TUNNEL_TYPE_TUNNEL_FORWARD) {
            R chainResult = createChainService(inNode, serviceName, tunnel.getOutIp(), forward.getOutPort(), tunnel.getProtocol());
            if (chainResult.getCode() != 0) {
-                updateForwardStatusToError(forward);
                return chainResult;
            }

            R remoteResult = createRemoteService(tunnel.getOutNodeId().intValue(), serviceName, forward, tunnel.getProtocol());
            if (remoteResult.getCode() != 0) {
-                updateForwardStatusToError(forward);
                return remoteResult;
            }

@@ -553,7 +552,6 @@ public class ForwardServiceImpl extends ServiceImpl<ForwardMapper, Forward> impl
        // 创建主服务
        R serviceResult = createMainService(inNode, serviceName, forward, limiter, tunnel.getType());
        if (serviceResult.getCode() != 0) {
-            updateForwardStatusToError(forward);
            return serviceResult;
        }
        return R.ok();
@@ -187,14 +187,12 @@ public class SpeedLimitServiceImpl extends ServiceImpl<SpeedLimitMapper, SpeedLi
        // 3. 获取隧道信息
        Tunnel tunnel = tunnelService.getById(speedLimit.getTunnelId());
        if (tunnel == null) {
-            return R.err(ERROR_TUNNEL_NOT_EXISTS);
+            this.removeById(id);
+            return R.ok();
        }

        // 4. 调用Gost API删除限速器
-        R gostResult = deleteGostLimiter(id, tunnel);
-        if (gostResult.getCode() != 0) {
-            return gostResult;
-        }
+        deleteGostLimiter(id, tunnel);

        // 5. 删除限速规则
        boolean result = this.removeById(id);
@@ -1,8 +1,30 @@
 package com.admin;

+import com.admin.common.dto.ConfigItem;
+import com.admin.common.dto.GostConfigDto;
+import com.admin.common.dto.GostDto;
+import com.admin.common.utils.GostUtil;
+import com.admin.entity.Forward;
+import com.admin.entity.Node;
+import com.admin.entity.SpeedLimit;
+import com.admin.service.ForwardService;
+import com.admin.service.NodeService;
+import com.admin.service.SpeedLimitService;
+import com.alibaba.fastjson.JSONObject;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import org.junit.jupiter.api.Test;
 import org.springframework.boot.test.context.SpringBootTest;
+import org.xmlunit.util.Nodes;
+
+import javax.annotation.Resource;
+import java.util.List;
+import java.util.Objects;

@SpringBootTest
 class AdminApplicationTests {

+
+
+
+
 }
@@ -1,36 +1,24 @@
 <template>
  <div class="forward-container">
-    <!-- 页面头部 -->
-    <div class="page-header">
-      <h1 class="page-title">转发管理</h1>
-      <div class="header-actions">
-        <!-- 搜索框 -->
-        <el-input
-          v-model="searchKeyword"
-          placeholder="搜索转发名称或远程地址"
-          prefix-icon="el-icon-search"
-          @keyup.enter.native="handleSearch"
-          clearable
-          style="width: 250px; margin-right: 15px;"
-        >
-          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
-        </el-input>
-        
-        <el-button 
-          type="primary" 
-          icon="el-icon-plus" 
-          @click="handleAdd"
-          class="add-btn"
-        >
-          新增转发
-        </el-button>
-      </div>
+    <!-- 简化的页面头部 -->
+    <div class="action-buttons" style="margin-bottom: 10px;">
+
+      
+      <el-button 
+        type="primary" 
+        icon="el-icon-plus" 
+        @click="handleAdd"
+        class="add-btn"
+      >
+        {{ isMobile ? '添加' : '新增转发' }}
+      </el-button>
    </div>

    <!-- 转发列表 -->
    <div class="table-container">
      <div v-loading="loading" class="cards-container">
-        <div v-if="forwardList.length === 0 && !loading" class="empty-state">
+        <!-- 空状态 -->
+        <div v-if="forwardList.length === 0 && !loading" class="empty-state" style="margin-top: 10px;">
          <el-empty description="暂无转发配置"></el-empty>
        </div>
        
@@ -42,7 +30,7 @@
          <div class="card-header">
            <div class="card-title">
              <i class="el-icon-connection"></i>
-              {{ forward.name }}
+              <span class="title-text">{{ forward.name }}</span>
            </div>
            <div class="card-actions">
              <!-- 服务开关 -->
@@ -130,7 +118,7 @@
                  </div>
                  <div class="address-value">
                    <span class="value address-text" :title="forward.remoteAddr">
-                      {{ forward.remoteAddr}}
+                      {{ forward.remoteAddr }}
                    </span>
                  </div>
                </div>
@@ -176,7 +164,7 @@
    <el-dialog 
      :title="dialogTitle" 
      :visible.sync="dialogVisible" 
-      width="600px"
+      :width="isMobile ? '90%' : '600px'"
      @close="resetForm"
    >
      <el-form 
@@ -263,6 +251,7 @@ export default {
      forwardList: [],
      tunnelList: [],
      selectedTunnel: null,
+      isMobile: false,
      
      // 对话框状态
      dialogVisible: false,
@@ -324,10 +313,24 @@ export default {
  },
  
  created() {
+    this.checkMobile();
    this.loadForwardList();
  },
+
+  mounted() {
+    window.addEventListener('resize', this.checkMobile);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.checkMobile);
+  },
  
  methods: {
+    // 检查是否为移动端
+    checkMobile() {
+      this.isMobile = window.innerWidth <= 768;
+    },
+
    // 加载转发列表
    async loadForwardList() {
      try {
@@ -721,27 +724,35 @@ export default {
  min-height: 100vh;
 }

-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding: 20px;
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+/* 移动端优化 */
+@media (max-width: 768px) {
+  .forward-container {
+    padding: 10px;
+  }
 }

-.page-title {
-  margin: 0;
-  color: #303133;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.header-actions {
+.action-buttons {
  display: flex;
  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* 移动端行为按钮样式 */
+@media (max-width: 768px) {
+  .action-buttons {
+    flex-direction: row;
+    align-items: stretch;
+  }
+  
+  .action-buttons .el-input {
+    min-width: 0;
+  }
+  
+  .add-btn {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
 }

 .add-btn {
@@ -750,7 +761,9 @@ export default {
 }

 .table-container {
-  padding: 20px;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
 }

 .form-hint {
@@ -768,10 +781,6 @@ export default {
 }

 /* Element UI 样式调整 */
-.el-table {
-  border-radius: 8px;
-}
-
 .el-dialog {
  border-radius: 12px;
 }
@@ -794,6 +803,42 @@ export default {
  color: #606266;
 }

+/* 移动端对话框优化 */
+@media (max-width: 768px) {
+  .el-dialog {
+    border-radius: 8px;
+    margin: 20px;
+  }
+  
+  .el-dialog__header {
+    padding: 15px 20px 10px;
+  }
+  
+  .el-dialog__body {
+    padding: 10px 20px;
+  }
+  
+  .el-dialog__footer {
+    padding: 10px 20px 15px;
+  }
+  
+  .el-dialog__title {
+    font-size: 16px;
+  }
+  
+  .el-form-item__label {
+    font-size: 14px;
+  }
+  
+  .dialog-footer {
+    text-align: center;
+  }
+  
+  .dialog-footer .el-button {
+    min-width: 80px;
+  }
+}
+
 .cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
@@ -801,6 +846,18 @@ export default {
  padding: 10px 0;
 }

+/* 移动端卡片容器 */
+@media (max-width: 768px) {
+  .cards-container {
+    grid-template-columns: 1fr;
+    gap: 15px;
+    padding: 0;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+  }
+}
+
 .forward-card {
  background-color: white;
  border-radius: 12px;
@@ -808,11 +865,29 @@ export default {
  padding: 24px;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
+  overflow: hidden; /* 防止内容撑大容器 */
 }

-.forward-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+/* 移动端卡片样式 */
+@media (max-width: 768px) {
+  .forward-card {
+    padding: 16px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  }
+  
+  .forward-card:hover {
+    transform: none;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  }
+}
+
+/* 桌面端悬停效果 */
+@media (min-width: 769px) {
+  .forward-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  }
 }

 .card-header {
@@ -824,27 +899,76 @@ export default {
  border-bottom: 1px solid #f0f0f0;
 }

+/* 移动端卡片头部 */
+@media (max-width: 768px) {
+  .card-header {
+    margin-bottom: 16px;
+    padding-bottom: 10px;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+}
+
 .card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 移动端卡片标题 */
+@media (max-width: 768px) {
+  .card-title {
+    font-size: 15px;
+  }
+  
+  .title-text {
+    max-width: calc(100% - 60px); /* 为操作按钮留出空间 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }

 .card-title i {
  margin-right: 8px;
  color: #409EFF;
+  flex-shrink: 0;
+}
+
+.title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
 }

 .card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* 移动端卡片操作 */
+@media (max-width: 768px) {
+  .card-actions {
+    gap: 6px;
+  }
+  
+  .card-actions .el-button--mini {
+    padding: 6px;
+  }
 }

 .card-body {
  margin-top: 16px;
+  overflow: hidden; /* 防止内容撑大容器 */
 }

 .info-row {
@@ -857,22 +981,45 @@ export default {
  margin-bottom: 0;
 }

+/* 移动端信息行 */
+@media (max-width: 768px) {
+  .info-row {
+    margin-bottom: 14px;
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+
 .info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* 确保flex子元素可以收缩 */
+  overflow: hidden; /* 防止内容撑大容器 */
 }

 .info-item.full-width {
  flex: 1;
  min-width: 0; /* 确保flex子元素可以收缩 */
+  overflow: hidden; /* 防止内容撑大容器 */
 }

 .info-item:not(:last-child) {
  margin-right: 20px;
 }

+/* 移动端信息项 */
+@media (max-width: 768px) {
+  .info-item:not(:last-child) {
+    margin-right: 0;
+    margin-bottom: 8px;
+  }
+  
+  .info-item:last-child {
+    margin-bottom: 0;
+  }
+}
+
 .label {
  font-size: 12px;
  color: #909399;
@@ -886,6 +1033,18 @@ export default {
  font-weight: 500;
 }

+/* 移动端字体优化 */
+@media (max-width: 768px) {
+  .label {
+    font-size: 11px;
+    margin-bottom: 3px;
+  }
+  
+  .value {
+    font-size: 13px;
+  }
+}
+
 .empty-state {
  grid-column: 1 / -1;
  display: flex;
@@ -897,12 +1056,28 @@ export default {
 .flow-stats-mini {
  display: flex;
  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* 移动端流量统计 */
+@media (max-width: 768px) {
+  .flow-stats-mini {
+    gap: 6px;
+  }
 }

 .flow-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
+  min-width: 60px;
+}
+
+/* 移动端流量统计项 */
+@media (max-width: 480px) {
+  .flow-stat-item {
+    min-width: 50px;
+  }
 }

 .flow-stat-label {
@@ -918,6 +1093,18 @@ export default {
  font-weight: 500;
 }

+/* 移动端流量统计字体 */
+@media (max-width: 768px) {
+  .flow-stat-label {
+    font-size: 11px;
+    margin-bottom: 3px;
+  }
+  
+  .flow-stat-value {
+    font-size: 12px;
+  }
+}
+
 .flow-stat-value.in {
  color: #67C23A;
 }
@@ -963,6 +1150,7 @@ export default {
  flex-direction: column;
  width: 100%;
  min-width: 0; /* 确保flex子元素可以收缩 */
+  overflow: hidden; /* 防止内容撑大容器 */
 }

 .label-with-copy {
@@ -975,6 +1163,7 @@ export default {
 .address-value {
  width: 100%;
  min-width: 0; /* 确保flex子元素可以收缩 */
+  overflow: hidden; /* 确保容器支持省略号 */
 }

 .address-text {
@@ -1011,6 +1200,23 @@ export default {
  opacity: 1;
 }

+/* 移动端复制按钮 */
+@media (max-width: 768px) {
+  .copy-btn {
+    opacity: 0.8;
+    height: 18px !important;
+    padding: 1px 4px !important;
+  }
+  
+  .copy-btn .el-icon-copy-document {
+    font-size: 11px;
+  }
+  
+  .address-item:hover .copy-btn {
+    opacity: 1;
+  }
+}
+
 /* 复制对话框样式 */
 ::v-deep .copy-dialog .el-message-box__content {
  word-break: break-all;
@@ -1032,5 +1238,75 @@ export default {
  -webkit-user-select: text;
 }

+/* 移动端全局优化 */
+@media (max-width: 768px) {
+  /* 确保内容不会水平滚动 */
+  .forward-container * {
+    box-sizing: border-box;
+    max-width: 100%;
+  }
+  
+  /* 强制约束容器宽度 */
+  .forward-card,
+  .card-body,
+  .info-row,
+  .info-item,
+  .address-item,
+  .address-value {
+    max-width: 100%;
+    overflow: hidden;
+  }
+  
+  /* 优化长文本显示 - 保持省略号不换行 */
+  .address-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+  
+  /* 标题文本约束 */
+  .title-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+  
+  /* 移动端空状态调整 */
+  .empty-state {
+    padding: 40px 20px;
+  }
+  
+  /* 移动端form hint */
+  .form-hint {
+    font-size: 11px;
+    line-height: 1.4;
+  }
+}
+
+/* 超小屏幕优化 */
+@media (max-width: 480px) {
+  .forward-container {
+    padding: 8px;
+  }
+  
+  .action-buttons {
+    gap: 8px;
+  }
+  
+  .forward-card {
+    padding: 12px;
+  }
+  
+  .card-header {
+    margin-bottom: 12px;
+  }
+  
+  .info-row {
+    margin-bottom: 10px;
+  }
+}
+

 </style>
@@ -1,7 +1,16 @@
 <template>
  <el-container>
    <el-header style="height: 50px;">
-      <span style="line-height: 50px">管理后台</span>
+      <div class="header-left">
+        <!-- 移动端菜单按钮 -->
+        <el-button 
+          icon="el-icon-menu" 
+          class="mobile-menu-btn"
+          @click="toggleMobileMenu"
+          type="text">
+        </el-button>
+        <span style="line-height: 50px">管理后台</span>
+      </div>
      <div class="header-avatar">
        <el-avatar style="margin-right: 10px" size="medium" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <el-dropdown>
@@ -22,13 +31,19 @@
    </el-header>

    <el-container>
-      <el-aside width="200px">
+      <!-- 移动端遮罩层 -->
+      <div v-if="mobileMenuVisible" class="mobile-overlay" @click="hideMobileMenu"></div>
+      
+      <el-aside 
+        :width="isMobile ? '250px' : '200px'" 
+        :class="['main-aside', { 'mobile-aside': isMobile, 'mobile-hidden': isMobile && !mobileMenuVisible }]">
        <el-menu
            :default-active="path"
-            class="el-menu-vertical-demo">
+            class="el-menu-vertical-demo"
+            :collapse="false">

          <router-link to="/index">
-            <el-menu-item index="/index" @click="save('/index')">
+            <el-menu-item index="/index" @click="handleMenuClick('/index')">
              <template slot="title">
                <i class="el-icon-box"></i>
                <span slot="title">首页</span>
@@ -37,7 +52,7 @@
          </router-link>

          <router-link to="/limit" v-admin>
-            <el-menu-item index="/limit" @click="save('/limit')">
+            <el-menu-item index="/limit" @click="handleMenuClick('/limit')">
              <template slot="title">
                <i class="el-icon-box"></i>
                <span slot="title">限速管理</span>
@@ -46,7 +61,7 @@
          </router-link>

          <router-link to="/forward">
-          <el-menu-item index="/forward" @click="save('/forward')">
+          <el-menu-item index="/forward" @click="handleMenuClick('/forward')">
            <template slot="title">
              <i class="el-icon-postcard"></i>
              <span slot="title">转发管理</span>
@@ -55,7 +70,7 @@
        </router-link>

          <router-link to="/tunnel" v-admin>
-            <el-menu-item index="/tunnel" @click="save('/tunnel')">
+            <el-menu-item index="/tunnel" @click="handleMenuClick('/tunnel')">
              <template slot="title">
                <i class="el-icon-postcard"></i>
                <span slot="title">隧道管理</span>
@@ -64,7 +79,7 @@
          </router-link>

          <router-link to="/node" v-admin>
-            <el-menu-item index="/node" @click="save('/node')">
+            <el-menu-item index="/node" @click="handleMenuClick('/node')">
              <template slot="title">
                <i class="el-icon-postcard"></i>
                <span slot="title">节点监控</span>
@@ -73,7 +88,7 @@
          </router-link>

          <router-link to="/user" v-admin>
-            <el-menu-item index="/user" @click="save('/user')">
+            <el-menu-item index="/user" @click="handleMenuClick('/user')">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span slot="title">用户管理</span>
@@ -83,11 +98,11 @@

        </el-menu>
      </el-aside>
-      <el-main>
-        <div style="margin: 15px 15px;">
+      <el-main :class="['main-content', { 'mobile-main': isMobile }]">
+        <div :style="mainContentStyle">
          <router-view/>

-          <div style="background-color: white; height: 50px; position: absolute; bottom: 0;left: 199px;right: 0;line-height: 50px; padding-left: 30px;font-size: 12px;color:#58666e;">
+          <div :class="['footer', { 'mobile-footer': isMobile }]">
            © 2023 Copyright.
          </div>
        </div>
@@ -95,7 +110,11 @@
    </el-container>

    <!-- 修改密码弹窗 -->
-    <el-dialog title="修改密码" :visible.sync="passwordDialogVisible" width="400px" :before-close="handlePasswordDialogClose">
+    <el-dialog 
+      title="修改密码" 
+      :visible.sync="passwordDialogVisible" 
+      :width="isMobile ? '90%' : '400px'" 
+      :before-close="handlePasswordDialogClose">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input v-model="passwordForm.currentPassword" type="password" placeholder="请输入当前密码" show-password clearable></el-input>
@@ -126,6 +145,8 @@ export default {
    return{
      path:'',
      name: '',
+      isMobile: false,
+      mobileMenuVisible: false,
      // 修改密码相关数据
      passwordDialogVisible: false,
      passwordLoading: false,
@@ -151,11 +172,42 @@ export default {
      }
    }
  },
+  computed: {
+    mainContentStyle() {
+      return {
+        margin: this.isMobile ? '10px' : '15px 15px'
+      }
+    }
+  },
  created() {
    this.path = localStorage.getItem('e')
    this.name = localStorage.getItem("name")
+    this.checkMobile()
+    window.addEventListener('resize', this.checkMobile)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.checkMobile)
  },
  methods:{
+    checkMobile() {
+      this.isMobile = window.innerWidth <= 768
+      if (!this.isMobile) {
+        this.mobileMenuVisible = false
+      }
+    },
+    toggleMobileMenu() {
+      this.mobileMenuVisible = !this.mobileMenuVisible
+    },
+    hideMobileMenu() {
+      this.mobileMenuVisible = false
+    },
+    handleMenuClick(path) {
+      this.save(path)
+      // 移动端点击菜单后隐藏菜单
+      if (this.isMobile) {
+        this.hideMobileMenu()
+      }
+    },
    save(e){
      localStorage.setItem('e',e)
      this.path = e
@@ -242,8 +294,29 @@ export default {
  height: 100%;
 }

+.el-header {
+  background-color: #2F54EB;
+  color: white;
+  line-height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.mobile-menu-btn {
+  display: none;
+  color: white;
+  font-size: 18px;
+  margin-right: 10px;
+  padding: 0;
+}
+
 .header-avatar {
-  float: right;
  display: flex;
  justify-content: space-around;
  align-items: center;
@@ -253,25 +326,68 @@ export default {
  cursor: pointer;
 }

-.el-header {
-  background-color: #2F54EB;
+.main-aside {
  color: white;
-  line-height: 50px;
+  transition: transform 0.3s ease;
+  position: relative;
+  z-index: 1000;
 }

-.el-aside {
-  color: white;
-  line-height: 200px;
+.mobile-aside {
+  position: fixed;
+  top: 50px;
+  left: 0;
+  height: calc(100vh - 50px);
+  z-index: 1001;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
 }

-.el-main {
+.mobile-hidden {
+  transform: translateX(-100%);
+}
+
+.mobile-overlay {
+  position: fixed;
+  top: 50px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.main-content {
  padding: 0;
  height: calc(100vh - 100px);
+  transition: margin-left 0.3s ease;
+}
+
+.mobile-main {
+  margin-left: 0 !important;
+}
+
+.footer {
+  background-color: white; 
+  height: 50px; 
+  position: absolute; 
+  bottom: 0;
+  left: 199px;
+  right: 0;
+  line-height: 50px; 
+  padding-left: 30px;
+  font-size: 12px;
+  color: #58666e;
+}
+
+.mobile-footer {
+  left: 0;
+  padding-left: 15px;
 }

 a {
  text-decoration: none;
 }
+
 .el-menu-vertical-demo {
  height: 100%;
 }
@@ -288,4 +404,19 @@ a {
 .el-form-item {
  margin-bottom: 22px;
 }
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .mobile-menu-btn {
+    display: inline-block;
+  }
+  
+  .header-avatar .el-avatar {
+    margin-right: 5px;
+  }
+  
+  .el-dropdown-link {
+    font-size: 14px;
+  }
+}
 </style>
@@ -838,6 +838,7 @@ export default {
  white-space: nowrap;        /* 不换行 */
  overflow: hidden;           /* 超出隐藏 */
  text-overflow: ellipsis;    /* 超出显示省略号 */
+  word-break: break-all;      /* 移动端强制换行 */
 }

 .address-source {
@@ -912,44 +913,267 @@ export default {
 /* 响应式设计 */
@media (max-width: 768px) {
  .package-container {
-    padding: 10px;
+    padding: 8px;
+    background-color: #f5f5f5;
  }

-  .page-header {
+  .overview-card {
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+
+  .card-header {
    flex-direction: column;
-    gap: 15px;
-    align-items: stretch;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .card-header h3 {
+    font-size: 18px;
  }

  .overview-stats {
    grid-template-columns: 1fr;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .stat-item {
+    padding: 12px;
+  }
+
+  .stat-icon {
+    width: 40px;
+    height: 40px;
+    margin-right: 12px;
+  }
+
+  .stat-icon i {
+    font-size: 20px;
+  }
+
+  .stat-value {
+    font-size: 18px;
+  }
+
+  .stat-label {
+    font-size: 13px;
  }

  .progress-section {
    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .progress-item {
+    padding: 12px;
+  }
+
+  .section-title {
+    font-size: 16px;
+    margin-bottom: 12px;
+    padding: 0 4px;
  }

  .tunnels-grid {
    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .tunnel-card {
+    padding: 16px;
+    margin-bottom: 8px;
+  }
+
+  .tunnel-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .tunnel-name {
+    font-size: 15px;
+    width: 100%;
+  }
+
+  .tunnel-status {
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .tunnel-stat-row {
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 6px;
+  }
+
+  .tunnel-stat-item {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 6px 8px;
+    background: #f8f9fa;
+    border-radius: 4px;
+    margin-right: 0;
+  }
+
+  .tunnel-stat-item:first-child {
+    margin-right: 0;
+  }
+
+  .progress-mini-header {
+    font-size: 11px;
+  }
+
+  .tunnel-footer {
+    margin-top: 12px;
+    padding-top: 8px;
+  }
+
+  .reset-time {
+    font-size: 11px;
+  }
+
+  .forwards-container {
+    padding: 16px;
+    margin: 0 -4px;
+  }
+
+  .forward-group {
+    margin-bottom: 16px;
+  }
+
+  .group-header {
+    margin-bottom: 8px;
+    padding-bottom: 6px;
+  }
+
+  .group-header h4 {
+    font-size: 15px;
  }

  .forward-list {
    grid-template-columns: 1fr;
-  }
-
-  .forward-item {
-    flex-direction: column;
-    align-items: flex-start;
    gap: 8px;
  }

-  .forward-info {
-    width: 100%;
-    margin-bottom: 8px;
+  .forward-item {
+    padding: 12px;
+    border-left-width: 3px;
+  }
+
+  .forward-item:hover {
+    transform: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .forward-name {
+    font-size: 15px;
+    margin-bottom: 6px;
+  }
+
+  .forward-address {
+    gap: 2px;
+    padding: 6px;
+    margin-bottom: 6px;
+  }
+
+  .address-source,
+  .address-target {
+    font-size: 13px;
+    padding: 3px 8px;
+    min-width: 100px;
+    max-width: 100%;
+    white-space: normal;      /* 移动端允许换行 */
+    word-break: break-all;    /* 强制换行 */
+    text-overflow: inherit;   /* 取消省略号 */
+    overflow: visible;        /* 显示完整内容 */
+  }
+
+  .address-arrow {
+    font-size: 16px;
+    margin: 1px 0;
  }

  .forward-traffic {
-    width: 100%;
+    padding: 6px;
+    flex-direction: column;
+    gap: 4px;
  }
-}
+
+  .traffic-item {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
+  }
+
+  .traffic-label {
+    font-size: 11px;
+    margin-bottom: 0;
+    margin-right: 8px;
+  }
+
+  .traffic-value {
+    font-size: 13px;
+    padding: 1px 4px;
+  }
+
+  .empty-state {
+    height: 150px;
+  }
+
+  .empty-state .el-empty {
+    padding: 20px 0;
+  }
+
+  /* 移动端进度条调整 */
+  .el-progress {
+    margin: 4px 0;
+  }
+
+  .el-progress-bar__outer {
+    height: 6px !important;
+  }
+
+     .el-progress-bar__inner {
+     height: 6px !important;
+   }
+
+   /* 移动端标签样式优化 */
+   .el-tag {
+     font-size: 11px !important;
+     padding: 0 6px !important;
+     height: 20px !important;
+     line-height: 18px !important;
+   }
+
+   /* 移动端卡片阴影减少 */
+   .overview-card,
+   .tunnel-card,
+   .forwards-container {
+     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
+   }
+
+   /* 移动端触摸友好的按钮间距 */
+   .tunnel-status .el-tag {
+     margin: 2px 4px 2px 0 !important;
+   }
+
+   /* 移动端图标调整 */
+   .tunnel-name i,
+   .reset-time i {
+     font-size: 14px;
+   }
+
+   /* 避免移动端横向滚动 */
+   .package-container,
+   .overview-card,
+   .tunnel-card,
+   .forwards-container,
+   .forward-item {
+     overflow-x: hidden;
+   }
+ }
 </style>
@@ -1,116 +1,154 @@
 <template>
  <div class="speed-limit-container">
-    <!-- 页面头部 -->
-    <div class="page-header">
-      <h1 class="page-title">
-        <i class="el-icon-odometer"></i>
-        限速管理
-      </h1>
-      <div class="header-actions">
-        <!-- 搜索框 -->
-        <el-input
-          v-model="searchKeyword"
-          placeholder="搜索规则名称"
-          prefix-icon="el-icon-search"
-          @keyup.enter.native="handleSearch"
-          clearable
-          style="width: 250px; margin-right: 15px;"
-        >
-          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
-        </el-input>
+    <div class="action-buttons" style="margin-bottom: 10px;">
+          <el-button
+            type="primary" 
+            icon="el-icon-plus" 
+            @click="handleAdd"
+            class="add-btn"
+          >
+            新增限速
+          </el-button>
+        </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-state">
+      <div class="loading-spinner"></div>
+      <p>加载中...</p>
+    </div>
+
+    <!-- 限速规则列表 - 桌面端表格 -->
+    <div v-else-if="!isMobile && !loading && filteredSpeedLimitList.length !== 0" class="table-container">
+      <div class="custom-table">
+        <div class="table-header">
+          <div class="th">ID</div>
+          <div class="th">规则名称</div>
+          <div class="th">速度限制</div>
+          <div class="th">状态</div>
+          <div class="th">绑定隧道</div>
+          <div class="th">创建时间</div>
+          <div class="th">更新时间</div>
+          <div class="th">操作</div>
+        </div>
        
-        <el-button
-          type="primary" 
-          icon="el-icon-plus" 
-          @click="handleAdd"
-          class="add-btn"
-        >
-          新增限速规则
-        </el-button>
-        
-        <el-button 
-          type="success" 
-          icon="el-icon-refresh" 
-          @click="loadSpeedLimits"
-          :loading="loading"
-        >
-          刷新
-        </el-button>
+        <div v-for="rule in filteredSpeedLimitList" :key="rule.id" class="table-row">
+          <div class="td">{{ rule.id }}</div>
+          <div class="td">{{ rule.name }}</div>
+          <div class="td">
+            <el-tag type="info">{{ rule.speed }} Mbps</el-tag>
+          </div>
+          <div class="td">
+            <el-tag :type="rule.status === 1 ? 'success' : 'danger'">
+              {{ rule.status === 1 ? '运行' : '异常' }}
+            </el-tag>
+          </div>
+          <div class="td">
+            <el-tag v-if="rule.tunnelName" type="success">{{ rule.tunnelName }}</el-tag>
+            <span v-else class="text-muted">未绑定</span>
+          </div>
+          <div class="td">{{ rule.createdTime | dateFormat }}</div>
+          <div class="td">{{ rule.updatedTime | dateFormat }}</div>
+          <div class="td">
+            <div class="action-buttons-inline">
+              <el-button 
+                size="mini" 
+                type="primary" 
+                icon="el-icon-edit"
+                @click="handleEdit(rule)"
+                circle
+              ></el-button>
+              <el-button 
+                size="mini" 
+                type="danger" 
+                icon="el-icon-delete"
+                @click="handleDelete(rule)"
+                circle
+              ></el-button>
+            </div>
+          </div>
+        </div>
      </div>
    </div>

-    <!-- 限速规则列表 -->
-    <div class="table-container">
-      <el-table 
-        :data="speedLimitList" 
-        v-loading="loading"
-        stripe
-        border
-        style="width: 100%"
+    <!-- 限速规则列表 - 移动端卡片 -->
+    <div v-else class="cards-container" v-loading="loading">
+      <div
+        v-for="rule in filteredSpeedLimitList"
+        :key="rule.id"
+        class="rule-card"
      >
-        <el-table-column prop="id" label="ID" width="80"></el-table-column>
-        <el-table-column prop="name" label="规则名称" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="speed" label="速度限制" >
-          <template slot-scope="scope">
-            <el-tag type="info">{{ scope.row.speed }} Mbps</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="status" label="状态" width="100">
-          <template slot-scope="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-              {{ scope.row.status === 1 ? '运行' : '异常' }}
+        <div class="card-header">
+          <div class="card-title">
+            <i class="el-icon-odometer"></i>
+            {{ rule.name }}
+          </div>
+          <div class="card-status">
+            <el-tag :type="rule.status === 1 ? 'success' : 'danger'" size="mini">
+              {{ rule.status === 1 ? '运行' : '异常' }}
            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="tunnelName" label="绑定隧道" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-tag type="success" v-if="scope.row.tunnelName">{{ scope.row.tunnelName }}</el-tag>
-            <span v-else class="text-muted">未绑定</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createdTime" label="创建时间" >
-          <template slot-scope="scope">
-            {{ scope.row.createdTime | dateFormat }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="updatedTime" label="更新时间" >
-          <template slot-scope="scope">
-            {{ scope.row.updatedTime | dateFormat }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作"  fixed="right">
-          <template slot-scope="scope">
-            <el-button 
-              size="mini" 
-              type="primary" 
-              icon="el-icon-edit"
-              @click="handleEdit(scope.row)"
-            >
-            </el-button>
-            <el-button 
-              size="mini" 
-              type="danger" 
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-            >
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      
-      <!-- 空状态 -->
-      <div v-if="!loading && speedLimitList.length === 0" class="empty-state">
-        <el-empty description="暂无限速规则">
-          <el-button type="primary" @click="handleAdd">创建第一个限速规则</el-button>
-        </el-empty>
+          </div>
+        </div>
+
+        <div class="card-content">
+          <div class="info-row">
+            <span class="info-label">ID:</span>
+            <span class="info-value">{{ rule.id }}</span>
+          </div>
+          <div class="info-row">
+            <span class="info-label">速度限制:</span>
+            <span class="info-value speed-value">{{ rule.speed }} Mbps</span>
+          </div>
+          <div class="info-row">
+            <span class="info-label">绑定隧道:</span>
+            <span class="info-value tunnel-value">
+              {{ rule.tunnelName || '未绑定' }}
+            </span>
+          </div>
+          <div class="info-row">
+            <span class="info-label">创建时间:</span>
+            <span class="info-value">{{ rule.createdTime | dateFormat }}</span>
+          </div>
+          <div class="info-row">
+            <span class="info-label">更新时间:</span>
+            <span class="info-value">{{ rule.updatedTime | dateFormat }}</span>
+          </div>
+        </div>
+
+        <div class="card-actions">
+          <el-button 
+            @click="handleEdit(rule)"
+            type="primary"
+            size="small"
+            icon="el-icon-edit"
+            plain
+          >
+            编辑
+          </el-button>
+          <el-button 
+            @click="handleDelete(rule)"
+            type="danger"
+            size="small"
+            icon="el-icon-delete"
+            plain
+          >
+            删除
+          </el-button>
+        </div>
      </div>
    </div>
+      
+    <!-- 空状态 -->
+    <div v-if="!loading && filteredSpeedLimitList.length === 0" class="empty-state" style="margin-top: 10px;">
+      <el-empty description="暂无限速规则">
+        
+      </el-empty>
+    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible" 
-      width="500px"
+      :width="isMobile ? '90%' : '500px'"
      @close="resetForm"
    >
      <el-form 
@@ -136,12 +174,10 @@
            style="width: 100%;"
          ></el-input-number>
          <div class="form-hint">
-            单位：Mbps
+            单位：Mbps，范围：1-1000000
          </div>
        </el-form-item>
        
-
-        
        <el-form-item label="绑定隧道" prop="tunnelId">
          <el-select 
            v-model="speedLimitForm.tunnelId" 
@@ -192,6 +228,7 @@ export default {
      isEdit: false,
      submitLoading: false,
      searchKeyword: '',
+      isMobile: false,
      
      // 表单数据
      speedLimitForm: {
@@ -220,12 +257,33 @@ export default {
    };
  },
  
+  computed: {
+    filteredSpeedLimitList() {
+      if (!this.searchKeyword.trim()) {
+        return this.speedLimitList;
+      }
+      return this.speedLimitList.filter(item => 
+        item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
+      );
+    }
+  },
+  
  mounted() {
+    this.checkMobile();
    this.loadSpeedLimits();
    this.loadTunnels();
+    window.addEventListener('resize', this.checkMobile);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.checkMobile);
  },
  
  methods: {
+    checkMobile() {
+      this.isMobile = window.innerWidth <= 768;
+    },
+
    // 加载限速规则列表
    async loadSpeedLimits() {
      try {
@@ -260,20 +318,7 @@ export default {
    
    // 搜索功能
    handleSearch() {
-      if (!this.searchKeyword.trim()) {
-        this.loadSpeedLimits();
-        return;
-      }
-      
-      // 实现本地搜索过滤
-      this.loading = true;
-      setTimeout(() => {
-        const filtered = this.speedLimitList.filter(item => 
-          item.name.includes(this.searchKeyword)
-        );
-        this.speedLimitList = filtered;
-        this.loading = false;
-      }, 300);
+      // 通过 computed 属性实现实时搜索
    },
    
    // 处理隧道选择变化
@@ -400,14 +445,15 @@ export default {
 }

 .page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+}
+
+.header-top {
+  margin-bottom: 20px;
 }

 .page-title {
@@ -427,9 +473,15 @@ export default {

 .header-actions {
  display: flex;
+  gap: 15px;
  align-items: center;
 }

+.action-buttons {
+  display: flex;
+  gap: 10px;
+}
+
 .add-btn {
  border-radius: 6px;
  font-weight: 500;
@@ -437,9 +489,154 @@ export default {

 .table-container {
  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  padding: 20px;
+  overflow-x: auto;
+}
+
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  display: table;
+}
+
+.table-header {
+  display: table-row;
+  background: #f8f9fa;
+  font-weight: 600;
+}
+
+.table-row {
+  display: table-row;
+  border-bottom: 1px solid #ebeef5;
+  transition: background-color 0.3s;
+}
+
+.table-row:hover {
+  background-color: #f5f7fa;
+}
+
+.th, .td {
+  display: table-cell;
+  padding: 12px 15px;
+  text-align: left;
+  vertical-align: middle;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.th {
+  background: #f8f9fa;
+  color: #909399;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.td {
+  font-size: 14px;
+  color: #606266;
+}
+
+.action-buttons-inline {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.cards-container {
+  display: grid;
+  gap: 15px;
+}
+
+.rule-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.rule-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 20px 15px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  display: flex;
+  align-items: center;
+}
+
+.card-title i {
+  margin-right: 8px;
+  color: #409EFF;
+}
+
+.card-content {
+  padding: 15px 20px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 14px;
+  color: #909399;
+  font-weight: 500;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #303133;
+  text-align: right;
+  max-width: 60%;
+  word-break: break-all;
+}
+
+.speed-value {
+  color: #409EFF;
+  font-weight: 600;
+}
+
+.tunnel-value {
+  color: #67C23A;
+}
+
+.card-actions {
+  display: flex;
+  padding: 15px 20px 20px;
+  gap: 10px;
+}
+
+.card-actions .el-button {
+  flex: 1;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
 }

 .form-hint {
@@ -452,16 +649,12 @@ export default {
  text-align: right;
 }

-.empty-state {
-  text-align: center;
-  padding: 40px;
+.text-muted {
+  color: #909399;
+  font-style: italic;
 }

 /* Element UI 样式调整 */
-.el-table {
-  border-radius: 8px;
-}
-
 .el-dialog {
  border-radius: 12px;
 }
@@ -478,11 +671,6 @@ export default {
  border-radius: 4px;
 }

-.text-muted {
-  color: #909399;
-  font-style: italic;
-}
-
 /* 响应式设计 */
@media (max-width: 768px) {
  .speed-limit-container {
@@ -490,18 +678,83 @@ export default {
  }
  
  .page-header {
-    flex-direction: column;
-    gap: 15px;
-    align-items: stretch;
+    padding: 15px;
+  }
+  
+  .page-title {
+    font-size: 20px;
+    margin-bottom: 15px;
  }
  
  .header-actions {
    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+  }
+  
+  .action-buttons {
+    justify-content: space-between;
+  }
+  
+  .action-buttons .el-button {
+    flex: 1;
+  }
+  
+  .card-actions {
+    padding: 15px;
+  }
+  
+  .card-header {
+    padding: 15px;
+    flex-direction: column;
+    align-items: flex-start;
    gap: 10px;
  }
  
+  .card-content {
+    padding: 10px 15px;
+  }
+  
+  .info-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    padding: 10px 0;
+  }
+  
+  .info-value {
+    max-width: 100%;
+    text-align: left;
+  }
+
+  .table-container {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .speed-limit-container {
+    padding: 8px;
+  }
+  
+  .page-header {
+    padding: 12px;
+  }
+  
  .page-title {
-    text-align: center;
+    font-size: 18px;
+  }
+  
+  .page-title i {
+    font-size: 22px;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+  }
+  
+  .empty-state {
+    padding: 40px 15px;
  }
 }
 </style> 
@@ -1,13 +1,6 @@
 <template>
  <div class="tunnel-container">
-    <!-- 页面头部 -->
-    <div class="page-header">
-      <h1 class="page-title">
-        <i class="el-icon-connection"></i>
-        隧道管理
-      </h1>
-      <div class="header-actions">
-        <el-button 
+    <el-button 
          type="primary" 
          icon="el-icon-plus" 
          @click="handleAdd"
@@ -15,20 +8,9 @@
        >
          新增隧道
        </el-button>
-        
-        <el-button 
-          type="success" 
-          icon="el-icon-refresh" 
-          @click="loadTunnels"
-          :loading="loading"
-        >
-          刷新
-        </el-button>
-      </div>
-    </div>

    <!-- 隧道卡片展示 -->
-    <div class="cards-container" v-loading="loading">
+    <div class="cards-container" v-loading="loading" style="margin-top: 10px;">
      <div class="cards-grid">
        <div 
          v-for="tunnel in tunnelList" 
@@ -52,6 +34,17 @@
              <el-tag v-if="tunnel.flow === 1" type="success" size="mini">单向计算</el-tag>
              <el-tag v-else type="info" size="mini">双向计算</el-tag>
            </div>
+
+
+            <el-button 
+            style="margin-left: 10px;"
+              size="small" 
+              type="danger" 
+              icon="el-icon-delete"
+              @click="handleDelete(tunnel)"
+            >
+              删除
+            </el-button>
          </div>

          <!-- 流程图 -->
@@ -61,7 +54,9 @@
              <div class="flow-icon">
                <i class="el-icon-monitor"></i>
              </div>
-              <div class="flow-label">客户端</div>
+              <div class="flow-content">
+                <div class="flow-label">客户端</div>
+              </div>
            </div>

            <!-- 箭头 -->
@@ -74,15 +69,17 @@
              <div class="flow-icon">
                <i class="el-icon-upload"></i>
              </div>
-              <div class="flow-label">入口</div>
-              <div class="flow-detail">
-                <div class="detail-item">
-                  <span class="label">IP:</span>
-                  <span class="value">{{ tunnel.inIp }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="label">端口:</span>
-                  <span class="value">{{ tunnel.inPortSta === tunnel.inPortEnd ? tunnel.inPortSta : `${tunnel.inPortSta}-${tunnel.inPortEnd}` }}</span>
+              <div class="flow-content">
+                <div class="flow-label">入口</div>
+                <div class="flow-detail">
+                  <div class="detail-item">
+                    <span class="label">IP:</span>
+                    <span class="value" :title="tunnel.inIp">{{ tunnel.inIp }}</span>
+                  </div>
+                  <div class="detail-item">
+                    <span class="label">端口:</span>
+                    <span class="value">{{ tunnel.inPortSta === tunnel.inPortEnd ? tunnel.inPortSta : `${tunnel.inPortSta}-${tunnel.inPortEnd}` }}</span>
+                  </div>
                </div>
              </div>
            </div>
@@ -97,15 +94,19 @@
              <div class="flow-icon">
                <i class="el-icon-download"></i>
              </div>
-              <div class="flow-label">出口</div>
-              <div class="flow-detail">
-                <div class="detail-item">
-                  <span class="label">IP:</span>
-                  <span class="value">{{ tunnel.outIp }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="label">端口:</span>
-                  <span class="value">{{ tunnel.outIpSta === tunnel.outIpEnd ? tunnel.outIpSta : `${tunnel.outIpSta}-${tunnel.outIpEnd}` }}</span>
+              <div class="flow-content">
+                <div class="flow-label" >出口</div>
+                <div class="flow-detail">
+                  
+                  <div class="detail-item">
+                    <span class="label">IP:</span>
+                    <span class="value" :title="tunnel.outIp">{{ tunnel.outIp }}</span>
+                  </div>
+
+                  <div class="detail-item">
+                    <span class="label">端口:</span>
+                    <span class="value">{{ tunnel.outIpSta === tunnel.outIpEnd ? tunnel.outIpSta : `${tunnel.outIpSta}-${tunnel.outIpEnd}` }}</span>
+                  </div>
                </div>
              </div>
            </div>
@@ -120,10 +121,12 @@
              <div class="flow-icon">
                <i class="el-icon-position"></i>
              </div>
-              <div class="flow-label">目标</div>
-              <div class="flow-detail">
-                <div class="detail-item">
-                  <span class="label">目标服务</span>
+              <div class="flow-content">
+                <div class="flow-label">目标</div>
+                <div class="flow-detail">
+                  <div class="detail-item">
+                    <span class="label">目标服务</span>
+                  </div>
                </div>
              </div>
            </div>
@@ -136,18 +139,6 @@
              <span>{{ tunnel.createdTime | dateFormat }}</span>
            </div>
          </div>
-
-          <!-- 操作按钮 -->
-          <div class="tunnel-actions">
-            <el-button 
-              size="small" 
-              type="danger" 
-              icon="el-icon-delete"
-              @click="handleDelete(tunnel)"
-            >
-              删除
-            </el-button>
-          </div>
        </div>
      </div>

@@ -155,7 +146,6 @@
      <div v-if="!loading && tunnelList.length === 0" class="empty-state">
        <i class="el-icon-connection"></i>
        <p>暂无隧道数据</p>
-        <el-button type="primary" @click="handleAdd">创建第一个隧道</el-button>
      </div>
    </div>

@@ -763,6 +753,7 @@ export default {
  font-weight: 500;
  color: #606266;
  margin-bottom: 8px;
+  text-align: center;
 }

 .flow-detail {
@@ -844,38 +835,386 @@ export default {
  margin-bottom: 20px;
 }

-/* 响应式设计 */
-@media (max-width: 768px) {
+/* 中等屏幕优化 (768px - 1024px) */
+@media (max-width: 1024px) {
  .cards-grid {
-    grid-template-columns: 1fr;
-    gap: 15px;
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  }
-  
-  .tunnel-flow {
-    flex-direction: column;
-    gap: 15px;
+}
+
+/* 平板优化 (480px - 768px) */
+@media (max-width: 768px) {
+  .tunnel-container {
+    padding: 15px;
  }
-  
-  .flow-arrow {
-    transform: rotate(90deg);
-  }
-  
+
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+  
+  .page-title {
+    font-size: 22px;
+    text-align: center;
  }
  
  .header-actions {
    justify-content: center;
  }
+
+  .cards-grid {
+    grid-template-columns: 1fr;
+    gap: 15px;
+  }
  
  .tunnel-card {
-    padding: 15px;
+    padding: 20px;
+    min-height: auto;
+    border-radius: 10px;
+  }
+  
+  .tunnel-header {
+    margin-bottom: 15px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
  }
  
  .tunnel-name {
-    margin-right: 80px;
+    font-size: 17px;
+    margin: 0;
+    width: 100%;
+  }
+  
+  .tunnel-badges {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  
+  /* 平板端流程图优化 */
+  .tunnel-flow {
+    padding: 18px 15px;
+    margin-bottom: 18px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .flow-item {
+    min-width: 90px;
+    flex-shrink: 0;
+  }
+  
+  .flow-icon {
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
+    margin-bottom: 6px;
+  }
+  
+  .flow-label {
+    font-size: 13px;
+    margin-bottom: 6px;
+  }
+  
+     .detail-item {
+     font-size: 11px;
+     margin-bottom: 2px;
+     line-height: 1.3;
+   }
+   
+   .detail-item .value {
+     font-size: 12px;
+     display: inline-block;
+     max-width: 140px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     vertical-align: top;
+   }
+  
+  .flow-arrow {
+    font-size: 14px;
+    margin: 0 8px;
+  }
+  
+  .tunnel-meta {
+    margin-bottom: 12px;
+    font-size: 11px;
+    justify-content: center;
+  }
+}
+
+/* 手机端优化 (最大 480px) */
+@media (max-width: 480px) {
+  .tunnel-container {
+    padding: 10px;
+  }
+  
+  .page-header {
+    padding: 15px;
+    margin-bottom: 15px;
+    border-radius: 6px;
+  }
+  
+  .page-title {
+    font-size: 18px;
+  }
+  
+  .header-actions {
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+  }
+  
+  .header-actions .el-button {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .tunnel-card {
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 10px;
+  }
+  
+  .tunnel-header {
+    margin-bottom: 12px;
+    gap: 10px;
+  }
+  
+  .tunnel-name {
+    font-size: 16px;
+  }
+  
+  .tunnel-badges {
+    gap: 4px;
+  }
+  
+  .tunnel-badges .el-tag {
+    font-size: 10px;
+    padding: 2px 6px;
+    height: auto;
+    line-height: 1.3;
+    border-radius: 3px;
+  }
+  
+  /* 手机端流程图 - 垂直布局 */
+  .tunnel-flow {
+    padding: 12px 8px;
+    margin-bottom: 12px;
+    flex-direction: column;
+    gap: 10px;
+    align-items: stretch;
+  }
+  
+  .flow-item {
+    min-width: auto;
+    width: 100%;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 8px 12px;
+    background: white;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+  
+  .flow-icon {
+    width: 32px;
+    height: 32px;
+    font-size: 14px;
+    margin-bottom: 0;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+  
+  .flow-content {
+    flex: 1;
+    text-align: left;
+  }
+  
+     .flow-label {
+     font-size: 12px;
+     font-weight: 600;
+     margin-bottom: 4px;
+     color: #303133;
+     text-align: left;
+   }
+  
+  .flow-detail {
+    text-align: left;
+  }
+  
+     .detail-item {
+     display: block;
+     font-size: 10px;
+     margin-bottom: 3px;
+     line-height: 1.4;
+   }
+   
+   .detail-item .label {
+     display: inline;
+     margin-right: 4px;
+     color: #666;
+   }
+   
+   .detail-item .value {
+     font-size: 11px;
+     font-weight: 500;
+     color: #409eff;
+     display: inline-block;
+     max-width: 120px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     vertical-align: top;
+     cursor: help;
+     border-bottom: 1px dotted transparent;
+     transition: border-color 0.2s;
+   }
+   
+   .detail-item .value:hover {
+     border-bottom-color: #409eff;
+   }
+  
+  .flow-arrow {
+    display: none; /* 垂直布局时隐藏箭头 */
+  }
+  
+  /* 删除按钮优化 */
+  .tunnel-header .el-button {
+    padding: 6px 12px;
+    font-size: 12px;
+    border-radius: 4px;
+    margin-left: 0;
+    margin-top: 8px;
+    align-self: flex-start;
+  }
+  
+  .tunnel-meta {
+    margin-bottom: 8px;
+    font-size: 10px;
+    justify-content: flex-start;
+  }
+  
+  .meta-item {
+    margin-right: 15px;
+  }
+  
+  .meta-item i {
+    margin-right: 3px;
+  }
+  
+  /* 空状态手机端优化 */
+  .empty-state {
+    padding: 30px 15px;
+  }
+  
+  .empty-state i {
+    font-size: 40px;
+    margin-bottom: 12px;
+  }
+  
+  .empty-state p {
+    font-size: 14px;
+    margin-bottom: 12px;
+  }
+}
+
+/* 超小屏幕优化 (最大 360px) */
+@media (max-width: 360px) {
+  .tunnel-container {
+    padding: 8px;
+  }
+  
+  .page-header {
+    padding: 12px;
+  }
+  
+  .tunnel-card {
+    padding: 12px;
+  }
+  
+  .tunnel-name {
+    font-size: 15px;
+  }
+  
+  .tunnel-badges .el-tag {
+    font-size: 9px;
+    padding: 1px 4px;
+  }
+  
+  .flow-item {
+    padding: 6px 10px;
+  }
+  
+  .flow-icon {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .flow-label {
+    font-size: 11px;
+    margin-bottom: 2px;
+  }
+  
+     .detail-item {
+     font-size: 9px;
+     margin-bottom: 2px;
+     line-height: 1.3;
+   }
+   
+   .detail-item .value {
+     font-size: 10px;
+     display: inline-block;
+     max-width: 100px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     vertical-align: top;
+   }
+}
+
+/* 横屏模式优化 */
+@media (max-width: 768px) and (orientation: landscape) {
+  .tunnel-flow {
+    flex-direction: row;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 12px;
+  }
+  
+  .flow-item {
+    flex-direction: column;
+    min-width: 80px;
+    width: auto;
+    padding: 8px;
+    margin-right: 8px;
+  }
+  
+  .flow-icon {
+    margin-right: 0;
+    margin-bottom: 4px;
+  }
+  
+  .flow-content {
+    text-align: center;
+  }
+  
+  .flow-detail {
+    text-align: center;
+  }
+  
+  .flow-arrow {
+    display: flex;
+    margin: 0 4px;
  }
 }
 </style>
@@ -28,98 +28,185 @@
    </div>

    <!-- 用户列表 -->
-    <div class="table-container">
-      <el-table 
-        :data="userList" 
-        v-loading="loading"
-        stripe
-        border
-        style="width: 100%"
-      >
-        <el-table-column prop="id" label="ID"></el-table-column>
-        <el-table-column prop="name" label="姓名"></el-table-column>
-        <el-table-column prop="user" label="用户名"></el-table-column>
-        <el-table-column label="流量统计" width="220">
-          <template slot-scope="scope">
-            <div class="flow-stats">
-              <div class="flow-item">
-                <span class="flow-label">总流量:</span>
-                <span class="flow-value">{{ formatFlow(scope.row.flow, 'gb') }}</span>
+    <div class="list-container">
+      <!-- 桌面端表格视图 -->
+      <div class="desktop-view">
+        <el-table 
+          :data="userList" 
+          v-loading="loading"
+          stripe
+          border
+          style="width: 100%"
+        >
+          <el-table-column prop="id" label="ID" width="60"></el-table-column>
+          <el-table-column prop="name" label="姓名" min-width="100"></el-table-column>
+          <el-table-column prop="user" label="用户名" min-width="120"></el-table-column>
+          <el-table-column label="流量统计" width="200">
+            <template slot-scope="scope">
+              <div class="flow-stats">
+                <div class="flow-item">
+                  <span class="flow-label">总量:</span>
+                  <span class="flow-value">{{ formatFlow(scope.row.flow, 'gb') }}</span>
+                </div>
+                <div class="flow-item">
+                  <span class="flow-label">已用:</span>
+                  <span class="flow-value used">{{ formatFlow(calculateUserTotalUsedFlow(scope.row)) }}</span>
+                </div>
              </div>
-              <div class="flow-item">
-                <span class="flow-label">已用:</span>
-                <span class="flow-value used">{{ formatFlow(calculateUserTotalUsedFlow(scope.row)) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="num" label="转发数量" width="100"></el-table-column>
+          <el-table-column prop="status" label="状态" width="80">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
+                {{ scope.row.status === 1 ? '正常' : '禁用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="expTime" label="过期时间" width="180">
+            <template slot-scope="scope">
+              <span v-if="scope.row.expTime" :class="getExpTimeClass(scope.row.expTime)">
+                {{ scope.row.expTime | dateFormat }}
+              </span>
+              <span v-else class="no-exptime">永久</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="240">
+            <template slot-scope="scope">
+              <el-button 
+                size="mini" 
+                type="primary" 
+                icon="el-icon-edit"
+                @click="handleEdit(scope.row)"
+              >
+                编辑
+              </el-button>
+              <el-button 
+                size="mini" 
+                type="success" 
+                icon="el-icon-s-tools"
+                @click="handleAssignTunnel(scope.row)"
+              >
+                分配
+              </el-button>
+              <el-button 
+                size="mini" 
+                type="danger" 
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 移动端卡片视图 -->
+      <div class="mobile-view" v-loading="loading">
+        <div v-if="userList.length === 0 && !loading" class="empty-state">
+          <el-empty description="暂无用户数据"></el-empty>
+        </div>
+        
+        <div v-for="user in userList" :key="user.id" class="user-card">
+          <!-- 卡片头部 -->
+          <div class="card-header">
+            <div class="user-info">
+              <div class="user-name">{{ user.name }}</div>
+              <div class="user-account">@{{ user.user }}</div>
+            </div>
+            <div class="user-status">
+              <el-tag :type="user.status === 1 ? 'success' : 'danger'" size="small">
+                {{ user.status === 1 ? '正常' : '禁用' }}
+              </el-tag>
+            </div>
+          </div>
+
+          <!-- 卡片内容 -->
+          <div class="card-content">
+            <!-- 流量信息 -->
+            <div class="info-section">
+              <div class="section-title">流量统计</div>
+              <div class="flow-info">
+                <div class="flow-item">
+                  <span class="label">总流量</span>
+                  <span class="value primary">{{ formatFlow(user.flow, 'gb') }}</span>
+                </div>
+                <div class="flow-item">
+                  <span class="label">已使用</span>
+                  <span class="value danger">{{ formatFlow(calculateUserTotalUsedFlow(user)) }}</span>
+                </div>
+                <div class="flow-item">
+                  <span class="label">转发数量</span>
+                  <span class="value">{{ user.num }}</span>
+                </div>
              </div>
            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="num" label="转发数量" width="100"></el-table-column>
-        <el-table-column prop="status" label="状态">
-          <template slot-scope="scope">
-            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
-              {{ scope.row.status === 1 ? '正常' : '禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="flowResetTime" label="流量重置日期" width="130">
-          <template slot-scope="scope">
-            <span v-if="scope.row.flowResetTime">
-              每月{{ scope.row.flowResetTime }}号
-            </span>
-            <span v-else class="no-reset-time">未设置</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="expTime" label="过期时间" width="180">
-          <template slot-scope="scope">
-            <span v-if="scope.row.expTime" :class="getExpTimeClass(scope.row.expTime)">
-              {{ scope.row.expTime | dateFormat }}
-            </span>
-            <span v-else class="no-exptime">永久</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createdTime" label="创建时间">
-          <template slot-scope="scope">
-            {{ scope.row.createdTime | dateFormat }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="updatedTime" label="更新时间">
-          <template slot-scope="scope">
-            {{ scope.row.updatedTime | dateFormat }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="280">
-          <template slot-scope="scope">
+
+            <!-- 时间信息 -->
+            <div class="info-section">
+              <div class="section-title">时间信息</div>
+              <div class="time-info">
+                <div class="time-item">
+                  <span class="label">过期时间</span>
+                  <span v-if="user.expTime" :class="['value', getExpTimeClass(user.expTime)]">
+                    {{ user.expTime | dateFormat }}
+                  </span>
+                  <span v-else class="value no-exptime">永久</span>
+                </div>
+                <div class="time-item">
+                  <span class="label">流量重置</span>
+                  <span class="value">
+                    <span v-if="user.flowResetTime">每月{{ user.flowResetTime }}号</span>
+                    <span v-else class="no-reset-time">未设置</span>
+                  </span>
+                </div>
+                <div class="time-item">
+                  <span class="label">创建时间</span>
+                  <span class="value">{{ user.createdTime | dateFormat }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="card-actions">
            <el-button 
-              size="mini" 
+              size="small" 
              type="primary" 
              icon="el-icon-edit"
-              @click="handleEdit(scope.row)"
+              @click="handleEdit(user)"
+              plain
            >
              编辑
            </el-button>
            <el-button 
-              size="mini" 
+              size="small" 
              type="success" 
              icon="el-icon-s-tools"
-              @click="handleAssignTunnel(scope.row)"
+              @click="handleAssignTunnel(user)"
+              plain
            >
-              分配
+              分配权限
            </el-button>
            <el-button 
-              size="mini" 
+              size="small" 
              type="danger" 
              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
+              @click="handleDelete(user)"
+              plain
            >
              删除
            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+          </div>
+        </div>
+      </div>
      
      <!-- 分页组件 -->
      <div class="pagination-container">
+        <!-- 桌面端分页 -->
        <el-pagination
+          class="desktop-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
@@ -129,6 +216,20 @@
          :total="pagination.total"
        >
        </el-pagination>
+        
+        <!-- 移动端分页 -->
+        <el-pagination
+          class="mobile-pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.current"
+          :page-sizes="[10, 20, 50]"
+          :page-size="pagination.size"
+          layout="prev, pager, next"
+          :total="pagination.total"
+          small
+        >
+        </el-pagination>
      </div>
    </div>

@@ -170,10 +271,7 @@
            show-password
          ></el-input>
        </el-form-item>
-        
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="流量(GB)" prop="flow">
+        <el-form-item label="流量(GB)" prop="flow">
              <el-input-number 
                v-model="userForm.flow" 
                :min="0" 
@@ -182,8 +280,7 @@
                style="width: 100%;"
              ></el-input-number>
            </el-form-item>
-          </el-col>
-          <el-col :span="12">
+        
            <el-form-item label="转发数量" prop="num">
              <el-input-number 
                v-model="userForm.num" 
@@ -193,8 +290,6 @@
                style="width: 100%;"
              ></el-input-number>
            </el-form-item>
-          </el-col>
-        </el-row>
        
        <el-form-item label="过期时间" prop="expTime">
          <el-date-picker
@@ -377,73 +472,147 @@
      <!-- 已有隧道权限列表 -->
      <div class="permission-list-section">
        <h4>已有隧道权限</h4>
-        <el-table 
-          :data="userTunnelList" 
-          v-loading="tunnelListLoading"
-          border
-          style="width: 100%"
-        >
-          <el-table-column prop="tunnelName" label="隧道名称"></el-table-column>
-          <el-table-column label="状态" width="80">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
-                {{ scope.row.status === 1 ? '正常' : '禁用' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="流量统计" width="180">
-            <template slot-scope="scope">
-              <div class="tunnel-flow-stats">
-                <div class="tunnel-flow-item">
-                  <span class="tunnel-flow-label">限制:</span>
-                  <span class="tunnel-flow-value">{{ formatFlow(scope.row.flow, 'gb') }}</span>
+        
+        <!-- 桌面端表格视图 -->
+        <div class="desktop-view">
+          <el-table 
+            :data="userTunnelList" 
+            v-loading="tunnelListLoading"
+            border
+            style="width: 100%"
+          >
+            <el-table-column prop="tunnelName" label="隧道名称" min-width="120"></el-table-column>
+            <el-table-column label="状态" width="80">
+              <template slot-scope="scope">
+                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
+                  {{ scope.row.status === 1 ? '正常' : '禁用' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="流量统计" width="180">
+              <template slot-scope="scope">
+                <div class="tunnel-flow-stats">
+                  <div class="tunnel-flow-item">
+                    <span class="tunnel-flow-label">限制:</span>
+                    <span class="tunnel-flow-value">{{ formatFlow(scope.row.flow, 'gb') }}</span>
+                  </div>
+                  <div class="tunnel-flow-item">
+                    <span class="tunnel-flow-label">已用:</span>
+                    <span class="tunnel-flow-value used">{{ formatFlow(calculateTunnelUsedFlow(scope.row)) }}</span>
+                  </div>
                </div>
-                <div class="tunnel-flow-item">
-                  <span class="tunnel-flow-label">已用:</span>
-                  <span class="tunnel-flow-value used">{{ formatFlow(calculateTunnelUsedFlow(scope.row)) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="num" label="转发数量" width="100"></el-table-column>
+            <el-table-column prop="speedLimitName" label="限速规则" width="120">
+              <template slot-scope="scope">
+                <el-tag v-if="scope.row.speedLimitName" type="warning" size="small">
+                  {{ scope.row.speedLimitName }}
+                </el-tag>
+                <el-tag v-else type="success" size="small">不限速</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="expTime" label="到期时间" width="150">
+              <template slot-scope="scope">
+                {{ scope.row.expTime | dateFormat }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="120">
+              <template slot-scope="scope">
+                <el-button 
+                  size="mini" 
+                  type="primary" 
+                  icon="el-icon-edit"
+                  @click="handleEditTunnelPermission(scope.row)"
+                >
+                </el-button>
+                <el-button 
+                  size="mini" 
+                  type="danger" 
+                  icon="el-icon-delete"
+                  @click="handleRemoveTunnelPermission(scope.row)"
+                >
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <!-- 移动端卡片视图 -->
+        <div class="mobile-view" v-loading="tunnelListLoading">
+          <div v-if="userTunnelList.length === 0 && !tunnelListLoading" class="empty-state">
+            <el-empty description="暂无隧道权限" :image-size="100"></el-empty>
+          </div>
+          
+          <div v-for="tunnel in userTunnelList" :key="tunnel.id" class="tunnel-card">
+            <!-- 卡片头部 -->
+            <div class="card-header">
+              <div class="tunnel-info">
+                <div class="tunnel-name">{{ tunnel.tunnelName }}</div>
+                <div class="tunnel-meta">
+                  <el-tag :type="tunnel.status === 1 ? 'success' : 'danger'" size="mini">
+                    {{ tunnel.status === 1 ? '正常' : '禁用' }}
+                  </el-tag>
+                  <el-tag v-if="tunnel.speedLimitName" type="warning" size="mini" style="margin-left: 5px;">
+                    {{ tunnel.speedLimitName }}
+                  </el-tag>
+                  <el-tag v-else type="success" size="mini" style="margin-left: 5px;">不限速</el-tag>
                </div>
-              
              </div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="num" label="转发数量" width="100"></el-table-column>
-          <el-table-column prop="speedLimitName" label="限速规则" width="150">
-            <template slot-scope="scope">
-              <el-tag v-if="scope.row.speedLimitName" type="warning">
-                {{ scope.row.speedLimitName }}
-              </el-tag>
-              <el-tag v-else type="success">不限速</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column prop="flowResetTime" label="流量重置日期" width="130">
-            <template slot-scope="scope">
-              每月{{ scope.row.flowResetTime }}号
-            </template>
-          </el-table-column>
-          <el-table-column prop="expTime" label="到期时间" width="180">
-            <template slot-scope="scope">
-              {{ scope.row.expTime | dateFormat }}
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="150">
-            <template slot-scope="scope">
+            </div>
+
+            <!-- 卡片内容 -->
+            <div class="card-content">
+              <div class="tunnel-stats">
+                <div class="stat-item">
+                  <div class="stat-label">流量限制</div>
+                  <div class="stat-value primary">{{ formatFlow(tunnel.flow, 'gb') }}</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-label">已使用</div>
+                  <div class="stat-value danger">{{ formatFlow(calculateTunnelUsedFlow(tunnel)) }}</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-label">转发数量</div>
+                  <div class="stat-value">{{ tunnel.num }}</div>
+                </div>
+              </div>
+              
+              <div class="tunnel-details">
+                <div class="detail-item">
+                  <span class="detail-label">流量重置</span>
+                  <span class="detail-value">每月{{ tunnel.flowResetTime }}号</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">到期时间</span>
+                  <span class="detail-value">{{ tunnel.expTime | dateFormat }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 操作按钮 -->
+            <div class="card-actions">
              <el-button 
-                size="mini" 
+                size="small" 
                type="primary" 
                icon="el-icon-edit"
-                @click="handleEditTunnelPermission(scope.row)"
+                @click="handleEditTunnelPermission(tunnel)"
+                plain
              >
+                编辑
              </el-button>
              <el-button 
-                size="mini" 
+                size="small" 
                type="danger" 
                icon="el-icon-delete"
-                @click="handleRemoveTunnelPermission(scope.row)"
+                @click="handleRemoveTunnelPermission(tunnel)"
+                plain
              >
+                删除
              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+            </div>
+          </div>
+        </div>
      </div>
      
      <span slot="footer" class="dialog-footer">
@@ -1188,18 +1357,36 @@ export default {
  border-radius: 6px;
 }

-.table-container {
+.list-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
 }

+/* 响应式视图控制 */
+.desktop-view {
+  display: block;
+}
+
+.mobile-view {
+  display: none;
+}
+
 .pagination-container {
  margin-top: 20px;
  text-align: right;
 }

+/* 分页组件响应式控制 */
+.desktop-pagination {
+  display: block;
+}
+
+.mobile-pagination {
+  display: none;
+}
+
 /* 对话框样式调整 */
 .dialog-footer {
  text-align: right;
@@ -1221,6 +1408,197 @@ export default {
  margin-top: 20px;
 }

+/* 移动端卡片样式 */
+.user-card, .tunnel-card {
+  background: white;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.user-card:hover, .tunnel-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.card-header {
+  padding: 16px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #e6e6e6;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.user-info, .tunnel-info {
+  flex: 1;
+}
+
+.user-name, .tunnel-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.user-account {
+  font-size: 14px;
+  color: #666;
+}
+
+.tunnel-meta {
+  margin-top: 8px;
+}
+
+.user-status {
+  display: flex;
+  align-items: center;
+}
+
+.card-content {
+  padding: 16px;
+}
+
+.info-section {
+  margin-bottom: 16px;
+}
+
+.info-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.flow-info, .time-info {
+  display: grid;
+  gap: 8px;
+}
+
+.flow-item, .time-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+
+.label {
+  font-size: 13px;
+  color: #666;
+  font-weight: 500;
+}
+
+.value {
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+}
+
+.value.primary {
+  color: #409eff;
+}
+
+.value.danger {
+  color: #f56c6c;
+}
+
+.value.success {
+  color: #67c23a;
+}
+
+.card-actions {
+  padding: 12px 16px;
+  background: #f8f9fa;
+  border-top: 1px solid #e6e6e6;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.card-actions .el-button {
+  flex: 1;
+  margin: 0;
+  min-width: 80px;
+}
+
+/* 隧道卡片特有样式 */
+.tunnel-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 12px 8px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e6e6e6;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.stat-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.stat-value.primary {
+  color: #409eff;
+}
+
+.stat-value.danger {
+  color: #f56c6c;
+}
+
+.tunnel-details {
+  display: grid;
+  gap: 8px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+
+.detail-label {
+  font-size: 13px;
+  color: #666;
+  font-weight: 500;
+}
+
+.detail-value {
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+}
+
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .user-container {
@@ -1231,6 +1609,7 @@ export default {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
+    padding: 16px;
  }
  
  .header-actions {
@@ -1240,20 +1619,175 @@ export default {
  
  .page-title {
    text-align: center;
+    font-size: 20px;
+  }
+  
+  .list-container {
+    padding: 16px;
  }
  
  .pagination-container {
    text-align: center;
+    margin-top: 16px;
+    overflow-x: auto;
+    padding: 0 10px;
  }
+  
+  /* 切换到移动端视图 */
+  .desktop-view {
+    display: none;
+  }
+  
+  .mobile-view {
+    display: block;
+  }
+  
+  /* 分页组件移动端切换 */
+  .desktop-pagination {
+    display: none;
+  }
+  
+  .mobile-pagination {
+    display: block;
+  }
+  
+  /* 移动端搜索框优化 */
+  .header-actions .el-input {
+    width: 100% !important;
+    margin-right: 0 !important;
+    margin-bottom: 10px;
+  }
+  
+  /* 移动端分页优化 */
+  .mobile-pagination {
+    justify-content: center;
+  }
+  
+  .mobile-pagination >>> .el-pager {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .mobile-pagination >>> .el-pager li {
+    min-width: 30px;
+    height: 30px;
+    line-height: 30px;
+    margin: 0 2px;
+  }
+  
+  .mobile-pagination >>> .btn-prev,
+  .mobile-pagination >>> .btn-next {
+    min-width: 30px;
+    height: 30px;
+    line-height: 30px;
+  }
+  
+  /* 移动端对话框优化 */
+  .el-dialog {
+    width: 95% !important;
+    margin-top: 5vh !important;
+  }
+  
+  .assign-section h4,
+  .permission-list-section h4 {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+  
+  /* 移动端表单布局优化 - 分配新隧道权限部分 */
+  .assign-section .el-row {
+    flex-direction: column !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  
+  .assign-section .el-col {
+    width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin-bottom: 15px;
+  }
+  
+  .assign-section .el-col:last-child {
+    margin-bottom: 0;
+  }
+  
+  /* 移动端编辑隧道权限表单布局优化 */
+  .el-dialog .el-row {
+    flex-direction: column !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  
+  .el-dialog .el-col {
+    width: 100% !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin-bottom: 15px;
+  }
+  
+  .el-dialog .el-col:last-child {
+    margin-bottom: 0;
+  }
+  
+      /* 隧道统计在小屏幕上的优化 */
+    @media (max-width: 480px) {
+      .tunnel-stats {
+        grid-template-columns: 1fr;
+        gap: 8px;
+      }
+      
+      .stat-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        text-align: left;
+        padding: 12px;
+      }
+      
+      .stat-label {
+        margin-bottom: 0;
+      }
+      
+      .card-actions {
+        flex-direction: column;
+      }
+      
+      .card-actions .el-button {
+        width: 100%;
+      }
+      
+      /* 超小屏幕分页优化 */
+      .mobile-pagination >>> .el-pager li {
+        min-width: 25px;
+        height: 25px;
+        line-height: 25px;
+        margin: 0 1px;
+        font-size: 12px;
+      }
+      
+      .mobile-pagination >>> .btn-prev,
+      .mobile-pagination >>> .btn-next {
+        min-width: 25px;
+        height: 25px;
+        line-height: 25px;
+        font-size: 12px;
+      }
+      
+      .pagination-container {
+        padding: 0 5px;
+      }
+    }
 }

 /* 表格样式优化 */
-.table-container >>> .el-table th {
+.list-container >>> .el-table th {
  background-color: #fafafa;
 }

-.table-container >>> .el-table--border td,
-.table-container >>> .el-table--border th {
+.list-container >>> .el-table--border td,
+.list-container >>> .el-table--border th {
  border-right: 1px solid #ebeef5;
 }

@@ -1266,7 +1800,7 @@ export default {
 }

 /* 按钮样式调整 */
-.table-container >>> .el-button--mini {
+.list-container >>> .el-button--mini {
  padding: 5px 10px;
  margin: 0 2px;
 }
@@ -1,13 +1,6 @@
 <template>
  <div class="node-container">
-    <!-- 页面头部 -->
-    <div class="page-header">
-      <h1 class="page-title">
-        <i class="el-icon-s-platform"></i>
-        节点管理
-      </h1>
-      <div class="header-actions">
-        <el-button
+    <el-button
          type="primary" 
          icon="el-icon-plus" 
          @click="handleAdd"
@@ -15,21 +8,9 @@
        >
          新增节点
        </el-button>
-        
-        <el-button 
-          type="success" 
-          icon="el-icon-refresh" 
-          @click="loadNodes"
-          :loading="loading"
-        >
-          刷新
-        </el-button>
-
-      </div>
-    </div>

    <!-- 节点卡片展示 -->
-    <div class="cards-container" v-loading="loading">
+    <div class="cards-container" v-loading="loading" style="margin-top: 10px;">
      <div class="cards-grid">
        <div 
          v-for="node in nodeList" 
@@ -63,7 +44,7 @@
                  <div class="chart-wrapper">
                    <v-chart 
                      :option="getCpuChartOption(node.connectionStatus === 'online' ? (node.systemInfo?.cpuUsage || 0) : 0, node.connectionStatus !== 'online')"
-                      style="height: 120px; width: 100%;"
+                      :style="chartStyle"
                    />
                  </div>
                </div>
@@ -73,7 +54,7 @@
                  <div class="chart-wrapper">
                    <v-chart 
                      :option="getMemoryChartOption(node.connectionStatus === 'online' ? (node.systemInfo?.memoryUsage || 0) : 0, node.connectionStatus !== 'online')"
-                      style="height: 120px; width: 100%;"
+                      :style="chartStyle"
                    />
                  </div>
                </div>
@@ -340,6 +321,21 @@ export default {
    };
  },
  
+  computed: {
+    // 动态图表样式
+    chartStyle() {
+      return {
+        height: this.isMobile ? '80px' : '120px',
+        width: '100%'
+      };
+    },
+    
+    // 检查是否为移动端
+    isMobile() {
+      return window.innerWidth <= 768;
+    }
+  },
+  
  filters: {
    dateFormat(timestamp) {
      if (!timestamp) return '-';
@@ -351,6 +347,8 @@ export default {
  mounted() {
    this.loadNodes();
    this.initWebSocket();
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.handleResize);
  },
  
  // 组件激活时（如果使用keep-alive）
@@ -369,6 +367,8 @@ export default {
  // 组件销毁前
  beforeDestroy() {
    this.closeWebSocket();
+    // 移除窗口大小变化监听
+    window.removeEventListener('resize', this.handleResize);
  },
  
  // 路由离开守卫
@@ -870,6 +870,12 @@ export default {
      const i = Math.floor(Math.log(bytesPerSecond) / Math.log(k));
      
      return parseFloat((bytesPerSecond / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    },
+    
+    // 处理窗口大小变化
+    handleResize() {
+      // 触发计算属性重新计算
+      this.$forceUpdate();
    }
  }
 };
@@ -877,7 +883,7 @@ export default {

 <style scoped>
 .node-container {
-  padding: 20px;
+  padding: 5px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
 }
@@ -1177,23 +1183,32 @@ export default {

 /* 响应式设计 */
@media (max-width: 768px) {
+  .node-container {
+    padding: 5px;
+  }
+  
  .cards-grid {
    grid-template-columns: 1fr;
-    gap: 15px;
+    gap: 10px;
  }
  
  .charts-container {
    grid-template-columns: 1fr;
+    gap: 8px;
+    margin-bottom: 12px;
  }
  
  .traffic-stats {
    grid-template-columns: 1fr;
+    gap: 6px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: stretch;
-    gap: 15px;
+    gap: 10px;
+    padding: 15px 20px;
+    margin-bottom: 15px;
  }
  
  .header-actions {
@@ -1201,7 +1216,55 @@ export default {
  }
  
  .node-card {
-    padding: 15px;
+    padding: 12px;
+  }
+  
+  .node-header {
+    margin-bottom: 10px;
+  }
+  
+  .node-name {
+    font-size: 16px;
+  }
+  
+  .status-indicator {
+    margin-bottom: 10px;
+  }
+  
+  .chart-wrapper {
+    padding: 6px;
+  }
+  
+  .chart-title {
+    font-size: 12px;
+    margin-bottom: 4px;
+  }
+  
+  .stat-item {
+    padding: 6px;
+    min-height: 45px;
+  }
+  
+  .stat-header {
+    font-size: 11px;
+    margin-bottom: 4px;
+  }
+  
+  .traffic-value {
+    font-size: 12px;
+  }
+  
+  .speed-value {
+    font-size: 10px;
+  }
+  
+  .ip-value {
+    font-size: 11px;
+  }
+  
+  .node-actions {
+    padding-top: 10px;
+    gap: 6px;
  }
 }

@@ -1216,13 +1279,61 @@ export default {
 }

@media (max-width: 480px) {
+  .node-container {
+    padding: 3px;
+  }
+  
+  .cards-grid {
+    gap: 8px;
+  }
+  
+  .node-card {
+    padding: 10px;
+  }
+  
+  .charts-container {
+    gap: 6px;
+    margin-bottom: 10px;
+  }
+  
+  .traffic-stats {
+    gap: 4px;
+  }
+  
+  .stat-item {
+    padding: 5px;
+    min-height: 40px;
+  }
+  
+  .chart-wrapper {
+    padding: 4px;
+  }
+  
  .node-actions {
    justify-content: center;
+    flex-direction: column;
+    gap: 5px;
  }
  
  .node-actions .el-button {
+    font-size: 11px;
+    padding: 5px 10px;
+    width: 100%;
+    margin: 0;
+  }
+  
+  .add-btn {
    font-size: 12px;
-    padding: 7px 12px;
+    padding: 8px 15px;
+  }
+  
+  .page-header {
+    padding: 10px 15px;
+    margin-bottom: 10px;
+  }
+  
+  .page-title {
+    font-size: 20px;
  }
 }