优化页面显示

src/views/DNSRecord.vue

@@ -1,30 +1,42 @@
 <template>
   <div class="dns-record-container">
+    <el-container class="main-layout">
+      <!-- 左侧服务器列表 -->
+      <el-aside width="250px" class="server-aside">
+        <el-card class="server-card">
+          <template #header>
+            <span>DNS 服务器</span>
+          </template>
+          <el-menu
+            :default-active="selectedServerId ? selectedServerId.toString() : ''"
+            class="server-menu"
+            @select="handleServerSelect"
+          >
+            <el-menu-item v-for="server in serverList" :key="server.ID.toString()" :index="server.ID.toString()">
+              <el-icon><ServerIcon /></el-icon>
+              <template #title>{{ server.name }}</template>
+            </el-menu-item>
+          </el-menu>
+        </el-card>
+      </el-aside>
+
+      <!-- 右侧内容区 -->
+      <el-main class="content-main">
         <el-card class="box-card">
           <template #header>
             <div class="card-header">
-          <span>DNS 记录管理</span>
+              <span>{{ selectedServerName || '请选择服务器' }}</span>
-          <el-button type="primary" size="small" @click="handleAdd">
+              <el-button type="primary" size="small" @click="handleAdd" :disabled="!selectedZoneId">
                 <el-icon><Plus /></el-icon>
                 添加记录
               </el-button>
             </div>
           </template>
 
-      <!-- 搜索筛选 -->
+          <!-- 区域选择 -->
           <el-form :inline="true" :model="searchForm" class="search-form">
-        <el-form-item label="DNS服务器">
-          <el-select v-model="searchForm.server_id" placeholder="请选择服务器" @change="handleServerChange">
-            <el-option
-              v-for="server in serverList"
-              :key="server.ID"
-              :label="server.name"
-              :value="server.ID"
-            />
-          </el-select>
-        </el-form-item>
             <el-form-item label="区域">
-          <el-select v-model="searchForm.zone_id" placeholder="请选择区域">
+              <el-select v-model="searchForm.zone_id" placeholder="请选择区域" @change="handleZoneChange">
                 <el-option
                   v-for="zone in filteredZoneList"
                   :key="zone.ID"
@@ -33,13 +45,9 @@
                 />
               </el-select>
             </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-        </el-form-item>
           </el-form>
 
           <el-table v-loading="loading" :data="recordList" style="width: 100%">
-        <el-table-column prop="server_name" label="服务器" width="150" />
             <el-table-column prop="zone_domain" label="区域" width="150" />
             <el-table-column prop="name" label="记录名称" width="120" />
             <el-table-column prop="type" label="记录类型" width="100">
@@ -87,20 +95,12 @@
             </el-table-column>
           </el-table>
         </el-card>
+      </el-main>
+    </el-container>
 
     <!-- 新增/编辑对话框 -->
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
       <el-form ref="recordFormRef" :model="recordForm" label-width="100px">
-        <el-form-item label="DNS服务器" prop="server_id">
-          <el-select v-model="formServerId" placeholder="请选择服务器" @change="handleFormServerChange">
-            <el-option
-              v-for="server in serverList"
-              :key="server.ID"
-              :label="server.name"
-              :value="server.ID"
-            />
-          </el-select>
-        </el-form-item>
         <el-form-item label="区域" prop="zone_id">
           <el-select v-model="recordForm.zone_id" placeholder="请选择区域">
             <el-option
@@ -156,7 +156,7 @@
 <script setup>
 import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Setting as ServerIcon } from '@element-plus/icons-vue'
 import {
   createDNSRecord,
   getDNSRecordList,
@@ -170,13 +170,14 @@ const loading = ref(false)
 const recordList = ref([])
 const serverList = ref([])
 const zoneList = ref([])
+const selectedServerId = ref(null)
+const selectedZoneId = ref(null)
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const recordFormRef = ref()
 
 // 搜索表单
 const searchForm = reactive({
-  server_id: null,
   zone_id: null
 })
 
@@ -194,9 +195,6 @@ const recordForm = reactive({
   target: ''
 })
 
-// 临时存储服务器ID，用于前端展示
-const formServerId = ref(null)
-
 // 记录类型选项
 const recordTypeOptions = [
   { value: 1, label: 'A' },
@@ -209,20 +207,21 @@ const recordTypeOptions = [
   { value: 33, label: 'SRV' }
 ]
 
-// 筛选后的区域列表
+// 当前选中的服务器名称
+const selectedServerName = computed(() => {
+  const server = serverList.value.find(s => s.ID === selectedServerId.value)
+  return server ? server.name : ''
+})
+
+// 筛选后的区域列表（只显示选中服务器的区域）
 const filteredZoneList = computed(() => {
-  if (!searchForm.server_id) {
+  if (!selectedServerId.value) return []
-    return zoneList.value
+  return zoneList.value.filter(zone => zone.server_id === selectedServerId.value)
-  }
-  return zoneList.value.filter(zone => zone.server_id === searchForm.server_id)
 })
 
 // 表单区域列表
 const formZoneList = computed(() => {
-  if (!formServerId.value) {
+  return filteredZoneList.value
-    return []
-  }
-  return zoneList.value.filter(zone => zone.server_id === formServerId.value)
 })
 
 // 根据记录类型显示不同的字段
@@ -269,23 +268,25 @@ const fetchZoneList = async () => {
 
 // 获取记录列表
 const fetchRecordList = async () => {
+  if (!searchForm.zone_id) {
+    recordList.value = []
+    return
+  }
   loading.value = true
   try {
     const params = {
       record_id: 0,
-      zone_id: searchForm.zone_id || 0,
+      zone_id: searchForm.zone_id,
       get_type: 0
     }
 
     const res = await getDNSRecordList(params)
     if (res.code === 0) {
-      // 合并服务器和区域信息
+      // 合并区域信息
       const records = res.data.map(record => {
         const zone = zoneList.value.find(z => z.ID === record.zone_id)
-        const server = serverList.value.find(s => s.ID === (zone ? zone.server_id : null))
         return {
           ...record,
-          server_name: server ? server.name : '未知服务器',
           zone_domain: zone ? zone.domain : '未知区域'
         }
       })
@@ -304,22 +305,25 @@ const fetchRecordList = async () => {
   }
 }
 
-// 服务器选择变化
+// 服务器选择
-const handleServerChange = () => {
+const handleServerSelect = (index) => {
+  selectedServerId.value = parseInt(index)
   searchForm.zone_id = null
+  selectedZoneId.value = null
+  recordList.value = []
 }
 
-// 搜索
+// 区域选择变化
-const handleSearch = () => {
+const handleZoneChange = () => {
+  selectedZoneId.value = searchForm.zone_id
   fetchRecordList()
 }
 
 // 添加记录
 const handleAdd = () => {
   dialogTitle.value = '添加 DNS 记录'
-  // 重置表单，确保数字字段有默认值
   recordForm.record_id = null
-  recordForm.zone_id = null
+  recordForm.zone_id = searchForm.zone_id
   recordForm.name = ''
   recordForm.type = 1
   recordForm.value = ''
@@ -328,7 +332,6 @@ const handleAdd = () => {
   recordForm.weight = 0
   recordForm.port = 0
   recordForm.target = ''
-  formServerId.value = null
   dialogVisible.value = true
 }
 
@@ -337,27 +340,14 @@ const handleEdit = (row) => {
   dialogTitle.value = '编辑 DNS 记录'
   Object.assign(recordForm, row)
   recordForm.record_id = row.ID
-  
-  // 设置服务器ID
-  const zone = zoneList.value.find(z => z.ID === row.zone_id)
-  if (zone) {
-    formServerId.value = zone.server_id
-  }
-  
   dialogVisible.value = true
 }
 
-// 表单服务器选择变化
-const handleFormServerChange = () => {
-  recordForm.zone_id = null
-}
-
 // 提交表单
 const handleSubmit = async () => {
   await recordFormRef.value.validate()
 
   try {
-    // 准备发送到接口的参数，只包含接口需要的字段
     const submitData = {
       zone_id: recordForm.zone_id,
       name: recordForm.name,
@@ -444,15 +434,39 @@ const getRecordTypeColor = (type) => {
 }
 
 onMounted(() => {
-  Promise.all([fetchServerList(), fetchZoneList()]).then(() => {
+  Promise.all([fetchServerList(), fetchZoneList()])
-    fetchRecordList()
-  })
 })
 </script>
 
 <style scoped>
 .dns-record-container {
-  padding: 20px;
+  height: 100%;
+}
+
+.main-layout {
+  height: 100%;
+}
+
+.server-aside {
+  padding-right: 20px;
+}
+
+.server-card {
+  height: 100%;
+}
+
+.server-card :deep(.el-card__body) {
+  padding: 0;
+  height: calc(100% - 57px);
+  overflow-y: auto;
+}
+
+.server-menu {
+  border-right: none;
+}
+
+.content-main {
+  padding: 0;
 }
 
 .card-header {

src/views/DNSZone.vue

@@ -1,19 +1,40 @@
 <template>
   <div class="dns-zone-container">
+    <el-container class="main-layout">
+      <!-- 左侧服务器列表 -->
+      <el-aside width="250px" class="server-aside">
+        <el-card class="server-card">
+          <template #header>
+            <span>DNS 服务器</span>
+          </template>
+          <el-menu
+            :default-active="selectedServerId ? selectedServerId.toString() : ''"
+            class="server-menu"
+            @select="handleServerSelect"
+          >
+            <el-menu-item v-for="server in serverList" :key="server.ID.toString()" :index="server.ID.toString()">
+              <el-icon><ServerIcon /></el-icon>
+              <template #title>{{ server.name }}</template>
+            </el-menu-item>
+          </el-menu>
+        </el-card>
+      </el-aside>
+
+      <!-- 右侧内容区 -->
+      <el-main class="content-main">
         <el-card class="box-card">
           <template #header>
             <div class="card-header">
-          <span>DNS 区域管理</span>
+              <span>{{ selectedServerName || '请选择服务器' }}</span>
-          <el-button type="primary" size="small" @click="handleAdd">
+              <el-button type="primary" size="small" @click="handleAdd" :disabled="!selectedServerId">
                 <el-icon><Plus /></el-icon>
                 添加区域
               </el-button>
             </div>
           </template>
 
-      <el-table v-loading="loading" :data="zoneList" style="width: 100%">
+          <el-table v-loading="loading" :data="filteredZoneList" style="width: 100%">
             <el-table-column prop="domain" label="域名" width="200" />
-        <el-table-column prop="server_name" label="所属服务器" width="180" />
             <el-table-column prop="soa_mname" label="主域名服务器" width="180" />
             <el-table-column prop="soa_rname" label="管理员邮箱" width="180" />
             <el-table-column prop="ttl" label="默认TTL" width="100">
@@ -34,20 +55,12 @@
             </el-table-column>
           </el-table>
         </el-card>
+      </el-main>
+    </el-container>
 
     <!-- 新增/编辑对话框 -->
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
       <el-form ref="zoneFormRef" :model="zoneForm" label-width="120px">
-        <el-form-item label="DNS服务器" prop="server_id">
-          <el-select v-model="zoneForm.server_id" placeholder="请选择DNS服务器" style="width: 100%">
-            <el-option
-              v-for="server in serverList"
-              :key="server.ID"
-              :label="server.name"
-              :value="server.ID"
-            />
-          </el-select>
-        </el-form-item>
         <el-form-item label="域名" prop="domain">
           <el-input v-model="zoneForm.domain" placeholder="请输入域名，如 example.com" />
         </el-form-item>
@@ -75,9 +88,9 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Setting as ServerIcon } from '@element-plus/icons-vue'
 import {
   createDNSZone,
   getDNSZoneList,
@@ -89,6 +102,7 @@ import { getDNSServerList } from '@/api/dns.js'
 const loading = ref(false)
 const zoneList = ref([])
 const serverList = ref([])
+const selectedServerId = ref(null)
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const zoneFormRef = ref()
@@ -107,6 +121,18 @@ const zoneForm = reactive({
   description: ''
 })
 
+// 当前选中的服务器名称
+const selectedServerName = computed(() => {
+  const server = serverList.value.find(s => s.ID === selectedServerId.value)
+  return server ? server.name : ''
+})
+
+// 过滤后的区域列表（只显示选中服务器的区域）
+const filteredZoneList = computed(() => {
+  if (!selectedServerId.value) return []
+  return zoneList.value.filter(zone => zone.server_id === selectedServerId.value)
+})
+
 // 获取服务器列表
 const fetchServerList = async () => {
   try {
@@ -125,15 +151,7 @@ const fetchZoneList = async () => {
   try {
     const res = await getDNSZoneList({ zone_id: 0, get_type: 0 })
     if (res.code === 0) {
-      // 合并服务器名称
+      zoneList.value = res.data
-      const zones = res.data.map(zone => {
-        const server = serverList.value.find(s => s.ID === zone.server_id)
-        return {
-          ...zone,
-          server_name: server ? server.name : '未知服务器'
-        }
-      })
-      zoneList.value = zones
     }
   } catch (error) {
     ElMessage.error('获取区域列表失败')
@@ -142,6 +160,11 @@ const fetchZoneList = async () => {
   }
 }
 
+// 服务器选择
+const handleServerSelect = (index) => {
+  selectedServerId.value = parseInt(index)
+}
+
 // 添加区域
 const handleAdd = () => {
   dialogTitle.value = '添加 DNS 区域'
@@ -152,6 +175,7 @@ const handleAdd = () => {
       zoneForm[key] = ''
     }
   })
+  zoneForm.server_id = selectedServerId.value
   dialogVisible.value = true
 }
 
@@ -168,7 +192,6 @@ const handleSubmit = async () => {
   await zoneFormRef.value.validate()
 
   try {
-    // 准备发送到接口的参数，只包含接口需要的字段
     const submitData = {
       domain: zoneForm.domain,
       soa_mname: zoneForm.soa_mname,
@@ -235,7 +258,33 @@ onMounted(() => {
 
 <style scoped>
 .dns-zone-container {
-  padding: 20px;
+  height: 100%;
+}
+
+.main-layout {
+  height: 100%;
+}
+
+.server-aside {
+  padding-right: 20px;
+}
+
+.server-card {
+  height: 100%;
+}
+
+.server-card :deep(.el-card__body) {
+  padding: 0;
+  height: calc(100% - 57px);
+  overflow-y: auto;
+}
+
+.server-menu {
+  border-right: none;
+}
+
+.content-main {
+  padding: 0;
 }
 
 .card-header {

src/views/DeviceRealVPV2.vue

@@ -1,68 +1,145 @@
 <template>
-  <div>
+  <div class="video-container">
-    <img ref="imagePlayer" alt="实时图像" width="100%" height="100%"/>
+    <div v-if="loading" class="status-tip">连接中...</div>
+    <div v-else-if="error" class="status-tip error">{{ error }}</div>
+    <img
+      v-else
+      ref="imagePlayer"
+      alt="实时图像"
+      width="100%"
+      height="100%"
+    />
   </div>
 </template>
 
 <script>
 export default {
+  name: "DeviceRealVPV2",
   data() {
     return {
       imagePlayer: null,
       socket: null,
-      device_id: localStorage.getItem("realvp_device_id"),
+      device_id: "",
-      tokenData: {
+      token: "",
-        token: localStorage.getItem("token"),
+      loading: true,
-        ip: localStorage.getItem("ip"),
+      error: "",
-        userId: localStorage.getItem("userId"),
+      reconnectTimer: null,
-        username: localStorage.getItem("username"),
+      reconnectCount: 0,
-        to_user_id: this.to_user_id,
+      maxReconnectAttempts: 10,
-      },
+      currentObjectURL: null,
     };
   },
   mounted() {
     this.imagePlayer = this.$refs.imagePlayer;
+    this.loadFromStorage();
     this.initWebSocket();
   },
   methods: {
+    loadFromStorage() {
+      try {
+        this.device_id = localStorage.getItem("realvp_device_id") || "";
+        this.token = localStorage.getItem("token") || "";
+      } catch (e) {
+        console.warn("读取 localStorage 失败:", e);
+      }
+    },
     initWebSocket() {
-      let socketUrl =
+      if (!this.device_id || !this.token) {
-        "wss://gep.ljsea.top/device/get_real_time_image?device_id=" +   //wss://gep.ljsea.top/device/get_real_time_image?device_id=     wss://vps.ljsea.top/tool/video_real_time?device_id=
+        this.error = "缺少设备ID或认证信息";
-        this.device_id +
+        this.loading = false;
-        "&token=" +
+        return;
-        this.tokenData.token;
+      }
+      const socketUrl = `wss://gep.ljsea.top/device/get_real_time_image?device_id=${this.device_id}&token=${this.token}`;
       this.socket = new WebSocket(socketUrl);
-      this.socket.onopen = () => {
+      this.socket.onopen = this.handleOpen;
-        console.log('WebSocket连接成功');
+      this.socket.onmessage = this.handleMessage;
-      };
+      this.socket.onclose = this.handleClose;
-      this.socket.onmessage = (event) => {
+      this.socket.onerror = this.handleError;
-        const blob = new Blob([event.data], { type: 'image/jpeg' });
+    },
-        const objectURL = URL.createObjectURL(blob);
+    handleOpen() {
-        this.imagePlayer.src = objectURL;
+      console.log("WebSocket连接成功");
-      };
+      this.loading = false;
-      this.socket.onclose = () => {
+      this.error = "";
-        console.log('WebSocket连接关闭');
+      this.reconnectCount = 0;
+    },
+    handleMessage(event) {
+      this.revokeCurrentURL();
+      const blob = new Blob([event.data], { type: "image/jpeg" });
+      this.currentObjectURL = URL.createObjectURL(blob);
+      this.imagePlayer.src = this.currentObjectURL;
+    },
+    handleClose() {
+      console.log("WebSocket连接关闭");
+      this.revokeCurrentURL();
+      if (this.imagePlayer) {
         this.imagePlayer.src = "";
-      };
+      }
-      this.socket.onerror = (error) => {
+      this.scheduleReconnect();
-        console.error('WebSocket出现错误:', error);
+    },
-      };
+    handleError(error) {
+      console.error("WebSocket出现错误:", error);
+      this.error = "连接出错，请检查网络";
+      this.loading = false;
+    },
+    scheduleReconnect() {
+      if (this.reconnectCount >= this.maxReconnectAttempts) {
+        this.error = "连接已断开，重连次数达到上限";
+        return;
+      }
+      this.reconnectCount++;
+      const delay = Math.min(1000 * Math.pow(2, this.reconnectCount - 1), 10000);
+      console.log(`尝试第 ${this.reconnectCount} 次重连，${delay}ms 后...`);
+      this.reconnectTimer = setTimeout(() => {
+        this.initWebSocket();
+      }, delay);
+    },
+    revokeCurrentURL() {
+      if (this.currentObjectURL) {
+        URL.revokeObjectURL(this.currentObjectURL);
+        this.currentObjectURL = null;
+      }
     },
   },
   beforeUnmount() {
-    if (this.socket) {
+    if (this.reconnectTimer) {
-        this.socket.onmessage = null;
+      clearTimeout(this.reconnectTimer);
-        console.log('关闭WebSocket连接');
+      this.reconnectTimer = null;
-      this.socket.close();
-       window.location.reload();
     }
+    if (this.socket) {
+      this.socket.onopen = null;
+      this.socket.onmessage = null;
+      this.socket.onclose = null;
+      this.socket.onerror = null;
+      this.socket.close();
+      this.socket = null;
+    }
+    this.revokeCurrentURL();
   },
 };
 </script>
 
 <style scoped>
+.video-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
 img {
   width: 100%;
-  margin: 0 auto;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+.status-tip {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #666;
+}
+.status-tip.error {
+  color: #ff4d4f;
 }
 </style>

src/views/VideoPlayer.vue

@@ -1,103 +1,72 @@
 <template>
   <div class="video_wrap">
     <video
-      width="100%"
-      height="100%"
       ref="videoPlayer"
-      muted="muted"
       class="video-js video"
     ></video>
   </div>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, nextTick } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
 
 const videoPlayer = ref(null);
 const myPlayer = ref(null);
 
-const playVideoA = () => {
+const getVideoConfig = () => {
-  nextTick(() => {
+  const videoName = localStorage.getItem("video_name") || "";
-    myPlayer.value = videojs(videoPlayer.value, {
+  const videoType = videoName.split('.').pop() === "m3u8"
-      // poster: "//vjs.zencdn.net/v/oceans.png",//视频封面照片
+    ? "application/vnd.apple.mpegurl"
-      controls: true, //视频控件
+    : "video/mp4";
-      autoplay: true, //自动播放
+
-      sources: [
+  const videoSrc = new URL("https://gep.ljsea.top/video/mp4");
-        {
+  videoSrc.searchParams.set("filename", videoName);
-          src:
+  videoSrc.searchParams.set("id", localStorage.getItem("video_id") || "");
-            "https://gep.ljsea.top/video/mp4?filename=" +
+  videoSrc.searchParams.set("ip", localStorage.getItem("ip") || "");
-            localStorage.getItem("video_name") +
+  videoSrc.searchParams.set("userId", localStorage.getItem("userId") || "");
-            "&id=" +
+  videoSrc.searchParams.set("token", localStorage.getItem("token") || "");
-            localStorage.getItem("video_id") +
+
-            "&ip=" +
+  return {
-            localStorage.getItem("ip")+
+    controls: true,
-            "&userId=" +
+    autoplay: true,
-            localStorage.getItem("userId") +
+    sources: [{ src: videoSrc.toString(), type: videoType }],
-            "&token=" +
-            localStorage.getItem("token"), //视频地址
-          type: localStorage.getItem("video_name").split('.')[1]==="m3u8" ?"application/vnd.apple.mpegurl":"video/mp4",
-        },
-      ],
     controlBar: {
-        remainingTimeDisplay: {
+      remainingTimeDisplay: { displayNegative: false }
-          displayNegative: false,
-        }
     },
-      playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
+    playbackRates: [0.5, 1, 1.5, 2],
-    });
+  };
-  });
+};
+
+const initPlayer = () => {
+  myPlayer.value = videojs(videoPlayer.value, getVideoConfig());
 };
 
 onMounted(() => {
-  playVideoA();
+  initPlayer();
 });
 
 onUnmounted(() => {
   if (myPlayer.value) {
     myPlayer.value.dispose();
+    myPlayer.value = null;
   }
 });
 </script>
 
 <style lang="scss" scoped>
 .video_wrap {
-  width: "80%";
+  width: 80%;
-  height: "80%";
+  height: 80%;
   position: relative;
 
-  .backIndex {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 50px;
-    width: 100%;
-    line-height: 50px;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 99;
-    padding-left: 10px;
-    font-size: 20px;
-    font-weight: 400;
-    opacity: 0;
-    transition: all 0.3s;
-    color: white;
-
-    &:hover {
-      opacity: 1;
-    }
-    span {
-      cursor: pointer;
-    }
-  }
-
   .video {
-    height: 100%;
     width: 100%;
+    height: 100%;
   }
 
-  ::v-deep(.vjs-big-play-button) {
+  :deep(.vjs-big-play-button) {
     margin-left: 45%;
     margin-top: 20%;
   }