From 47032dd19d3db42289c25f9e1f31a25012010cef Mon Sep 17 00:00:00 2001
From: lijun <lijun.lj@foxmail.com>
Date: Fri, 17 Apr 2026 20:42:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json       |   41 +-
 package.json            |    3 +-
 src/views/CIDLog.vue    |  375 ++++++----
 src/views/Chat.vue      | 1444 ++++++++++++++++++++++++---------------
 src/views/FileList.vue  |  557 +++++++--------
 src/views/Im.vue        |  430 +++++++-----
 src/views/ShellList.vue |  754 +++++++++-----------
 7 files changed, 1980 insertions(+), 1624 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 60da3cc..cccebee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,8 @@
         "vue": "^3.3.11",
         "vue-cookies": "^1.8.3",
         "vue-qr": "^4.0.9",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vue-virtual-scroller": "^2.0.0-beta.8"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.6.2",
@@ -1687,6 +1688,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==",
+      "license": "MIT"
+    },
     "node_modules/mpd-parser": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.0.tgz",
@@ -2269,6 +2276,15 @@
       "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz",
       "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
     },
+    "node_modules/vue-observe-visibility": {
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-qr": {
       "version": "4.0.9",
       "resolved": "https://registry.npmjs.org/vue-qr/-/vue-qr-4.0.9.tgz",
@@ -2280,6 +2296,15 @@
         "string-split-by": "^1.0.0"
       }
     },
+    "node_modules/vue-resize": {
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
@@ -2294,6 +2319,20 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-virtual-scroller": {
+      "version": "2.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
+      "integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mitt": "^2.1.0",
+        "vue-observe-visibility": "^2.0.0-alpha.1",
+        "vue-resize": "^2.0.0-alpha.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/which-module": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
diff --git a/package.json b/package.json
index 877e862..00fe215 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "vue": "^3.3.11",
     "vue-cookies": "^1.8.3",
     "vue-qr": "^4.0.9",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
diff --git a/src/views/CIDLog.vue b/src/views/CIDLog.vue
index d26ef04..dbc09c9 100644
--- a/src/views/CIDLog.vue
+++ b/src/views/CIDLog.vue
@@ -1,6 +1,7 @@
 <script>
 import axios from "axios";
-import { inject } from "vue";
+import { ElMessage } from "element-plus";
+import { Refresh, Plus, Edit, Delete, View } from "@element-plus/icons-vue";
 import { getCIDLogListService } from "@/api/cid.js";
 import { runCIDService } from "@/api/cid.js";
 import { addCIDService } from "@/api/cid.js";
@@ -8,8 +9,14 @@ import { deleteCIDService } from "@/api/cid.js";
 import { updateCIDService } from "@/api/cid.js";
 import router from "@/router/index.js";
 
-
 export default {
+  components: {
+    Refresh,
+    Plus,
+    Edit,
+    Delete,
+    View
+  },
   data() {
     return {
       ip: "",
@@ -32,6 +39,7 @@ export default {
         script: "",
         end: "",
         error: "",
+        RunTime: ""
       },
     };
   },
@@ -50,9 +58,9 @@ export default {
       try {
         this.tokenData.id = parseInt(this.tokenData.id);
         result = await getCIDLogListService(this.tokenData);
-        this.loading = false;
       } catch (e) {
         console.log(e);
+      } finally {
         this.loading = false;
       }
       let data = result.data;
@@ -62,8 +70,7 @@ export default {
       this.tableData = data;
       for(let i = 0;i<this.tableData.length;i++) {
         this.tableData[i].UpdatedAt = this.formattedTime(this.tableData[i].UpdatedAt);
-        this.tableData[i].CreatedAt = this.formattedTime(this.tableData[i].CreatedAt)
-      //console.log('this.ConfigFileList:',this.ConfigFileList);
+        this.tableData[i].CreatedAt = this.formattedTime(this.tableData[i].CreatedAt);
       }
       this.handleCurrentChange(1);
     },
@@ -83,6 +90,7 @@ export default {
     },
     handleSizeChange(val) {
       this.pageSize = val;
+      this.handleCurrentChange(this.currentPage);
     },
     handleCurrentChange(val) {
       this.currentPage = val;
@@ -104,9 +112,9 @@ export default {
       try {
         var d_re = await runCIDService(run_data);
         if (d_re.code == 0) {
-          alert("操作成功");
+          ElMessage.success("操作成功");
         } else {
-          alert("操作失败");
+          ElMessage.error("操作失败");
         }
       } catch (e) {
         console.log(e);
@@ -122,11 +130,10 @@ export default {
       try {
         var d_re = await deleteCIDService(delete_data);
         if (d_re.code == 0) {
-          alert("删除成功");
-          //刷新页面
-          this.getDeviceList();
+          ElMessage.success("删除成功");
+          this.getCIDLogList();
         } else {
-          alert("操作失败");
+          ElMessage.error("操作失败");
         }
       } catch (e) {
         console.log(e);
@@ -134,12 +141,6 @@ export default {
     },
     async updateButtonLogCID(index) {
       this.updateDialogVisible = true;
-      // var id = this.tableData[index].ID;
-      // this.updateForm.create_time = this.tableData[index].CreatedAt;
-      // this.updateForm.script = this.tableData[index].Script;
-      // this.updateForm.end = this.tableData[index].Log;
-      // this.updateForm.error = this.tableData[index].Error;
-      // this.updateForm.RunTime = this.tableData[index].RunTime;
       var id = this.currentPageData[index].ID;
       this.updateForm.create_time = this.currentPageData[index].CreatedAt;
       this.updateForm.script = this.currentPageData[index].Script;
@@ -152,7 +153,6 @@ export default {
         const response = await axios.get("https://ipinfo.io/json");
         this.ip = response.data.ip;
         localStorage.setItem("ip", this.ip);
-        //console.log(response);
       } catch (error) {
         console.error(error);
       }
@@ -182,7 +182,6 @@ export default {
     if (localStorage.getItem("token") === null) {
       router.push("/login");
     }
-    // console.log("mounted");
     this.getIpClient();
     this.getCIDLogList();
   },
@@ -190,133 +189,76 @@ export default {
 </script>
 
 <template>
-  <div>
-    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
-        >集成部署项目日志{{ tokenData.id }}</el-header
-      >
-      <el-container>
-        <el-main>
-          <!-- 表单 -->
-          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
-            <el-form-item>
+  <div class="page-container">
+    <el-card class="page-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <span class="page-title">集成部署项目日志 {{ tokenData.id }}</span>
+          </div>
+          <div class="header-actions">
+            <el-button @click="getCIDLogList()" :icon="Refresh">
+              刷新
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <div class="table-wrapper">
+        <el-table
+          :data="currentPageData"
+          style="width: 100%"
+          v-loading="loading"
+          element-loading-text="数据加载中..."
+          element-loading-background="rgba(240, 242, 245, 0.8)"
+          stripe
+          :row-class-name="tableRowClassName"
+        >
+          <el-table-column prop="ID" label="ID" width="80"></el-table-column>
+          <el-table-column
+            prop="CreatedAt"
+            label="创建时间"
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            prop="Script"
+            label="执行脚本"
+            min-width="180"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            prop="Log"
+            label="运行日志"
+            min-width="180"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            prop="Error"
+            label="错误信息"
+            min-width="250"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            prop="RunTime"
+            label="运行时间(s)"
+            width="100"
+          ></el-table-column>
+          <el-table-column label="操作" width="120" fixed="right">
+            <template #default="scope">
               <el-button
-                class="el-button--danger"
                 type="primary"
-                @click="getCIDLogList()"
-                :disabled="loading"
-                >刷新</el-button
+                size="small"
+                @click.prevent="updateButtonLogCID(scope.$index)"
+                :icon="View"
               >
-            </el-form-item>
+                详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
 
-            <el-form-item>
-              <el-dialog
-                v-model="updateDialogVisible"
-                title="查看集成项目日志"
-                width="50%"
-                :before-close="handleClose"
-              >
-                <!-- 内容主体区域 -->
-                <el-form
-                  ref="addFormRef"
-                  :model="updateForm"
-                  :rules="updateFormRules"
-                  label-width="70px"
-                >
-                  <el-form-item label="创建时间" prop="create_time">
-                    <el-input
-                      v-model="updateForm.create_time"
-                      autocomplete="on"
-                      style="width: 600px" 
-                    ></el-input>
-                    
-                  </el-form-item>
-                  <el-col>
-                    <el-form-item label="执行时间" prop="run_time">
-                      <el-input
-                        v-model="updateForm.RunTime"
-                        autocomplete="on"
-                        style="width: 100px" 
-                      ></el-input>
-                    </el-form-item>
-                  </el-col>
-                  <el-form-item label="脚本内容" prop="script">
-                    <el-input type="textarea" v-model="updateForm.script" style="width: 700px" :autosize="{ minRows: 4, maxRows: 8 }" />
-                  </el-form-item>
-                  <el-form-item label="执行结果" prop="end">
-                    <el-input type="textarea" v-model="updateForm.end" style="width: 700px" :autosize="{ minRows: 4, maxRows: 8 }" />
-                  </el-form-item>
-                  <el-col>
-                    <el-form-item label="错误内容" prop="error">
-                    <el-input type="textarea" v-model="updateForm.error" style="width: 700px" :autosize="{ minRows: 4, maxRows: 8 }" />
-                  </el-form-item>
-                  </el-col>
-                  
-                </el-form>
-                <!-- 底部区域 -->
-                <template #footer>
-                  <span class="dialog-footer">
-                    <el-button @click="updateDialogVisible = false"
-                      >关闭</el-button
-                    >
-                  </span>
-                </template>
-              </el-dialog>
-            </el-form-item>
-          </el-form>
-
-          <!-- 表格  :row-style="this.tableRowClassName"-->
-          <el-table
-            :data="currentPageData"
-            width="100%" 
-            v-loading="loading"
-            element-loading-text="数据加载中..."
-          >
-            :row-style="this.tableRowClassName"
-            <el-table-column prop="ID" label="id" width="80"></el-table-column>
-            <el-table-column
-              prop="CreatedAt"
-              label="创建时间"
-              show-overflow-tooltip
-              width="200"
-            ></el-table-column>
-            <el-table-column
-              prop="Script"
-              label="执行脚本"
-              width="180"
-              show-overflow-tooltip
-            ></el-table-column>
-            <el-table-column
-              prop="Log"
-              label="运行日志"
-              width="180"
-              show-overflow-tooltip
-            ></el-table-column>
-            <el-table-column
-              prop="Error"
-              label="错误信息"
-              width="250"
-            ></el-table-column>
-            <el-table-column
-              prop="RunTime"
-              label="运行时间(s)"
-              width="80"
-            ></el-table-column>
-            <el-table-column label="操作" width="350">
-              <template #default="scope">
-                <el-button
-                  type="primary"
-                  size="mini"
-                  @click.prevent="updateButtonLogCID(scope.$index)"
-                  >详情</el-button
-                >
-                <!-- <el-button type="danger" size="mini">删除</el-button> -->
-              </template>
-            </el-table-column>
-          </el-table>
-          <br />
-
-          <!-- 分页条 -->
+        <div class="pagination-wrapper">
           <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
@@ -324,15 +266,148 @@ export default {
             :page-sizes="[10, 20, 50, 100]"
             :page-size="pageSize"
             layout="total, sizes, prev, pager, next, jumper"
-            :total="tableData.length">
+            :total="tableData.length"
+          >
           </el-pagination>
-        </el-main>
-      </el-container>
-    </el-container>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 查看日志对话框 -->
+    <el-dialog
+      v-model="updateDialogVisible"
+      title="查看集成项目日志"
+      width="70%"
+      :close-on-click-modal="false"
+      top="5vh"
+    >
+      <el-form
+        ref="addFormRef"
+        :model="updateForm"
+        label-width="100px"
+        class="form-dialog"
+      >
+        <el-row gutter="20">
+          <el-col :span="12">
+            <el-form-item label="创建时间">
+              <el-input
+                v-model="updateForm.create_time"
+                autocomplete="on"
+                disabled
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="执行时间">
+              <el-input
+                v-model="updateForm.RunTime"
+                autocomplete="on"
+                disabled
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="脚本内容">
+              <el-input type="textarea" v-model="updateForm.script" :rows="4" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="执行结果">
+              <el-input type="textarea" v-model="updateForm.end" :rows="4" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="错误内容">
+              <el-input type="textarea" v-model="updateForm.error" :rows="4" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <!-- 底部区域 -->
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="updateDialogVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
-<style>
-.blueRowbg {
-  background: "#488aff";
+
+<style scoped>
+.page-container {
+  width: 100%;
+  height: 100%;
 }
-</style>
\ No newline at end of file
+
+.page-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  border-radius: 8px;
+}
+
+.page-card :deep(.el-card__body) {
+  flex: 1;
+  overflow: hidden;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.page-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-wrapper :deep(.el-table) {
+  border-radius: 4px;
+}
+
+.pagination-wrapper {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.form-dialog {
+  padding: 10px 0;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>
diff --git a/src/views/Chat.vue b/src/views/Chat.vue
index c622c05..3cbecea 100644
--- a/src/views/Chat.vue
+++ b/src/views/Chat.vue
@@ -1,273 +1,263 @@
 <template>
-  <el-dialog
-    title="图片发送"
-    v-model="sendImgDialogVisible"
-    width="60%"
-    height="60%"
-    center
-  >
-    <!-- 图片输入 -->
-    <input type="file" @change="handleFileUpload" />
-    <el-button type="primary" size="default" @click="sendImageOrVideo"
-      >发送</el-button
-    >
-  </el-dialog>
-
-  <el-container
-    class="layout-container-demo"
-    style="height: 700px; width: 1000px"
-  >
-    <el-aside width="200px">
-      <el-input
-        placeholder="请输入用户姓名"
-        v-model="searchName"
-        @input="filterUsers"
-      ></el-input>
-      <el-scrollbar>
-        <el-menu :default-openeds="['1', '3']">
-          <el-sub-menu index="1">
-            <template #title>
-              <el-icon> <message /> </el-icon>联系人
-            </template>
-            <el-scrollbar height="300px">
-              <el-menu-item-group v-for="user in filteredUsers" :key="user.id">
-                <el-menu-item
-                  :index="String(user.id)"
-                  @click="handleGetMessage(user.id)"
-                  style="height: 40px"
-                >
-                <el-avatar style="float: left" :src="user.avatar"></el-avatar>
-                  {{ user.name }}
-                  
-                  <span v-if="hasUnreadMsg[user.id]" class="unread-dot"></span>
-                </el-menu-item>
-              </el-menu-item-group>
-            </el-scrollbar>
-          </el-sub-menu>
-          <el-sub-menu index="2">
-            <template #title>
-              <el-icon><icon-menu /></el-icon>
-              群组
-            </template>
-            <el-scrollbar height="250px">
-              <el-menu-item-group v-for="item in groupList" :key="item.ID">
-                <!-- <template #title>Group 1</template> -->
-                <el-menu-item
-                  :index="String(item.GroupName)"
-                  @click="handleGetGroupMessage(item.ID)"
-                  >{{ item.GroupName }}</el-menu-item
-                >
-                <span
-                  v-if="hasUnreadMsg[`g_${item.ID}`]"
-                  class="unread-dot"
-                ></span>
-                <!-- <el-menu-item index="2-2">Option 2</el-menu-item> -->
-              </el-menu-item-group>
-            </el-scrollbar>
-          </el-sub-menu>
-        </el-menu>
-      </el-scrollbar>
-    </el-aside>
-
-    <el-container width="800px">
-      <el-header style="text-align: right; font-size: 12px">
-        <div class="toolbar">
-          <el-button type="primary" size="mini" @click.prevent="getHistory()"
-            >历史消息</el-button
-          >
-          <el-button
-            type="primary"
-            size="mini"
-            @click.prevent="handleMenuSelect('/user')"
-            >返回</el-button
-          >
-          <el-text class="mx-1" type="primary"
-            >目前:{{ cur_user_name }}</el-text
-          >
-
-          <div>
-            <span style="margin-right: 10px; margin-left: 10px">{{
-              username
-            }}</span>
-            <el-avatar size="default" fit="fit" :src="tokenData.avatar"></el-avatar>
+  <div class="page-container">
+    <el-card class="page-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <span class="page-title">聊天中心</span>
+          </div>
+          <div class="header-actions">
+            <el-button type="primary" size="small" @click.prevent="handleMenuSelect('/user')" :icon="ArrowLeft">
+              返回用户列表
+            </el-button>
           </div>
         </div>
-      </el-header>
+      </template>
 
-      <el-main style="margin-top: 1px">
-        <el-scrollbar
-          class="chat-room"
-          id="chat-room"
-          ref="chatRoom"
-          height="600px"
-          style="margin-top: 1px"
-          always
-        >
-          <div
-            v-for="item in MsgList"
-            :key="item.ID"
-            style="margin-top: 10px; margin-bottom: 20px"
-          >
-            <!-- 左边 -->
-            <div
-              v-if="
-                uid == item.ToUserID &&
-                item.FromUserID == cur_user_id &&
-                cur_group_id == 0
-              "
-              style="margin-left: 10px; margin-bottom: 8px"
+      <div class="chat-container">
+        <!-- 左侧联系人列表 -->
+        <div class="chat-sidebar">
+          <div class="sidebar-header">
+            <el-input
+              placeholder="搜索联系人"
+              v-model="searchName"
+              @input="filterUsers"
+              clearable
             >
-              <el-row class="row-bg" type="flex" align="middle">
-                <!-- <el-avatar size="default" fit="fit">{{
-                  cur_user_name
-                }}</el-avatar> -->
-                <el-avatar size="default" :src="cur_user_avatar"></el-avatar>
-                <span style="margin-left: 10px"
-                  >{{ cur_user_name }} : {{ formatTime(item.CreatedAt) }}</span
-                >
-              </el-row>
+              <template #prefix>
+                <el-icon class="el-input__icon"><Search /></el-icon>
+              </template>
+            </el-input>
+          </div>
+          <el-scrollbar class="sidebar-scrollbar">
+            <el-menu :default-openeds="['1', '2']" class="sidebar-menu">
+              <!-- 联系人 -->
+              <el-sub-menu index="1">
+                <template #title>
+                  <el-icon class="menu-icon"><Message /></el-icon>
+                  <span>联系人</span>
+                </template>
+                <el-menu-item-group>
+                  <el-menu-item
+                    v-for="user in filteredUsers"
+                    :key="user.id"
+                    :index="String(user.id)"
+                    @click="handleGetMessage(user.id)"
+                    class="user-menu-item"
+                  >
+                    <el-avatar size="small" :src="user.avatar" class="user-avatar"></el-avatar>
+                    <span class="user-name">{{ user.name }}</span>
+                    <span v-if="hasUnreadMsg[user.id]" class="unread-dot"></span>
+                  </el-menu-item>
+                </el-menu-item-group>
+              </el-sub-menu>
+              <!-- 群组 -->
+              <el-sub-menu index="2">
+                <template #title>
+                  <el-icon class="menu-icon"><ChatLineSquare /></el-icon>
+                  <span>群组</span>
+                </template>
+                <el-menu-item-group>
+                  <el-menu-item
+                    v-for="item in groupList"
+                    :key="item.ID"
+                    :index="String(item.ID)"
+                    @click="handleGetGroupMessage(item.ID)"
+                    class="group-menu-item"
+                  >
+                    <span class="group-name">{{ item.GroupName }}</span>
+                    <span v-if="hasUnreadMsg[`g_${item.ID}`]" class="unread-dot"></span>
+                  </el-menu-item>
+                </el-menu-item-group>
+              </el-sub-menu>
+            </el-menu>
+          </el-scrollbar>
+        </div>
 
-              <el-row>
-                <el-col :span="1000" :offset="1" class="msg">
-                  <!-- {{ item.Msg }} -->
-                  <div v-html="renderMarkdown(item.Msg)"></div>
-                </el-col>
-              </el-row>
+        <!-- 右侧聊天窗口 -->
+        <div class="chat-main">
+          <!-- 聊天头部 -->
+          <div class="chat-header">
+            <div class="chat-header-info">
+              <el-avatar size="small" :src="cur_user_avatar" v-if="cur_user_avatar"></el-avatar>
+              <span class="chat-header-title">{{ cur_user_name || '选择联系人开始聊天' }}</span>
             </div>
-            <div
-              v-if="cur_group_id != 0 && uid != item.FromUserID"
-              style="margin-left: 10px; margin-bottom: 8px"
-            >
-              <el-row class="row-bg" type="flex" align="middle">
-                <el-avatar size="default" fit="fit">{{ item.name }}</el-avatar>
-                <span style="margin-left: 10px"
-                  >{{ item.name }} : {{ formatTime(item.CreatedAt) }}</span
-                >
-              </el-row>
-
-              <el-row>
-                <el-col
-                  :span="1000"
-                  :offset="1"
-                  class="msg"
-                  style="max-width: 50%"
-                >
-                  <!-- {{ item.Msg }} -->
-                  <div
-                    v-html="renderMarkdown(item.Msg)"
-                    style="max-width: 50%"
-                  ></div>
-                </el-col>
-              </el-row>
-            </div>
-            <!-- 右边 -->
-            <div
-              v-if="uid == item.FromUserID && item.ToUserID == cur_user_id"
-              style="margin-right: 10px; margin-bottom: 8px"
-            >
-              <el-row class="row-bg" type="flex" justify="end" align="middle">
-                <span style="margin-right: 10px">
-                  {{ tokenData.username }} :
-                  {{ formatTime(item.CreatedAt) }}</span
-                >
-                <el-avatar size="default" :src="tokenData.avatar"></el-avatar>
-              </el-row>
-
-              <el-row justify="end">
-                <el-col
-                  :span="1000"
-                  class="msg2"
-                  style="margin-right: 20px; max-width: 50%"
-                >
-                  <!-- {{ item.Msg }} -->
-                  <div
-                    v-html="renderMarkdown(item.Msg)"
-                    style="max-width: 50%"
-                  ></div>
-                </el-col>
-              </el-row>
+            <div class="chat-header-actions">
+              <el-button size="small" @click="getHistory()" :icon="ChatDotRound">
+                历史消息
+              </el-button>
+              <div class="user-info">
+                <span class="current-user">{{ tokenData.username }}</span>
+                <el-avatar size="small" :src="tokenData.avatar" class="current-user-avatar"></el-avatar>
+              </div>
             </div>
           </div>
-        </el-scrollbar>
-      </el-main>
-      <div></div>
-      <div>
-        <el-row
-          class="row-bg"
-          type="flex"
-          justify="space-around"
-          align="middle"
-        >
-          <el-button
-            type="primary"
-            size="default"
-            @click="SendImage"
-            class="send-image-button-bg"
-          >
-            文件发送
-          </el-button>
-          <el-col :span="20">
+
+          <!-- 消息区域 -->
+          <div class="chat-messages" id="chat-room" ref="chatRoom">
+            <!-- 加载动画 -->
+            <div v-if="loading" class="loading-container">
+              <div class="loading-spinner"></div>
+              <span class="loading-text">加载中...</span>
+            </div>
+            
+            <RecycleScroller
+              class="recycle-scroller"
+              :items="MsgList"
+              :item-size="80"
+              key-field="ID"
+              v-if="MsgList.length > 0 && !loading"
+            >
+              <template #default="{ item }">
+                <div class="message-item">
+                  <!-- 对方消息 -->
+                  <div
+                    v-if="
+                      (uid == item.ToUserID && item.FromUserID == cur_user_id && cur_group_id == 0) ||
+                      (cur_group_id != 0 && uid != item.FromUserID)
+                    "
+                    class="message-left animate-fade-in"
+                  >
+                    <el-avatar size="small" :src="item.FromUserID == cur_user_id ? cur_user_avatar : tokenData.avatar"></el-avatar>
+                    <div class="message-content-wrapper">
+                      <div class="message-header">
+                        <span class="message-sender">{{ item.FromUserID == cur_user_id ? cur_user_name : item.name || tokenData.username }}</span>
+                        <span class="message-time">{{ formatTime(item.CreatedAt) }}</span>
+                      </div>
+                      <div class="message-bubble message-bubble-left animate-slide-in-left">
+                        <div v-html="renderMarkdown(item.Msg)"></div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 自己的消息 -->
+                  <div
+                    v-if="uid == item.FromUserID && item.ToUserID == cur_user_id"
+                    class="message-right animate-fade-in"
+                  >
+                    <div class="message-content-wrapper">
+                      <div class="message-header message-header-right">
+                        <span class="message-time">{{ formatTime(item.CreatedAt) }}</span>
+                        <span class="message-sender">{{ tokenData.username }}</span>
+                      </div>
+                      <div class="message-bubble message-bubble-right animate-slide-in-right">
+                        <div v-html="renderMarkdown(item.Msg)"></div>
+                        <div class="message-status">
+                          <span v-if="item.status === 'sending'" class="status-sending">发送中...</span>
+                          <span v-else-if="item.status === 'failed'" class="status-failed" @click="retrySendMessage(item)">发送失败，点击重试</span>
+                          <span v-else-if="item.status === 'success'" class="status-success">
+                            已发送
+                            <span v-if="item.read" class="status-read">已读</span>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <el-avatar size="small" :src="tokenData.avatar"></el-avatar>
+                  </div>
+                </div>
+              </template>
+            </RecycleScroller>
+            <div v-else-if="!loading" class="empty-messages">
+              <p>暂无消息，开始聊天吧！</p>
+            </div>
+          </div>
+
+          <!-- 输入区域 -->
+          <div class="chat-input-area">
+            <div class="input-tools">
+              <el-button type="primary" @click="SendImage" :icon="PictureFilled">
+                发送文件
+              </el-button>
+            </div>
             <el-input
               type="textarea"
-              style="width: 100%"
-              rows="1"
-              autofocus
-              @keyup.enter="handleSendBtnClick"
-              placeholder="请输入消息按Enter发送"
               v-model="currentMsg"
+              placeholder="请输入消息，按Enter发送"
+              :rows="3"
+              resize="none"
+              @keyup.enter.ctrl="handleSendBtnClick"
             ></el-input>
-          </el-col>
-          <el-col :span="2">
-            <el-button
-              class="sendBtn"
-              @click="handleSendBtnClick"
-              type="primary"
-              size="default"
-            >
+            <div class="input-actions">
+              <el-button type="primary" @click="handleSendBtnClick" :icon="ChatLineSquare">
               发送
             </el-button>
-          </el-col>
-        </el-row>
+            </div>
+          </div>
+        </div>
       </div>
-    </el-container>
-  </el-container>
+    </el-card>
+
+    <!-- 图片发送对话框 -->
+    <el-dialog
+      title="发送文件"
+      v-model="sendImgDialogVisible"
+      width="500px"
+      center
+    >
+      <div class="file-upload-section">
+        <input type="file" @change="handleFileUpload" class="file-input" v-if="!uploading" />
+        <div v-if="file" class="file-info">
+          <el-icon class="file-icon"><Document /></el-icon>
+          <span>{{ file.name }}</span>
+          <span class="file-size">{{ (file.size / 1024).toFixed(2) }} KB</span>
+        </div>
+        <div v-if="uploading" class="upload-progress-section">
+          <el-progress :percentage="uploadProgress" :stroke-width="15" />
+          <span class="upload-progress-text">{{ uploadProgress }}%</span>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="sendImgDialogVisible = false" :disabled="uploading">取消</el-button>
+          <el-button type="primary" @click="sendImageOrVideo" :icon="Upload" :disabled="uploading || !file">
+            {{ uploading ? '上传中...' : '发送' }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import axios from "axios";
-import { inject } from "vue";
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
 import { getFriendListService } from "@/api/chat.js";
 import { getMessageService } from "@/api/chat.js";
 import { sendMessageService } from "@/api/chat.js";
 import { UploadFileService } from "@/api/tool.js";
 import { GetFileInfoByMd5Service } from "@/api/tool.js";
-
 import {
-  ElAvatar,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElIcon,
-  ElMenu,
-  ElMenuItem,
-  ElMenuItemGroup,
-  ElScrollbar,
-  ElRow,
-  ElCol,
-  ElButton,
-} from "element-plus";
-import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
+  ArrowLeft,
+  Search,
+  Message,
+  ChatLineSquare,
+  ChatDotRound,
+  PictureFilled,
+  Document,
+  Upload
+} from "@element-plus/icons-vue";
 import router from "@/router/index.js";
 import { ElMessage } from "element-plus";
 import MarkdownIt from "markdown-it";
 import CryptoJS from "crypto-js";
+import { RecycleScroller } from 'vue-virtual-scroller';
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default {
+  components: {
+    ArrowLeft,
+    Search,
+    Message,
+    ChatLineSquare,
+    ChatDotRound,
+    PictureFilled,
+    Document,
+    Upload,
+    RecycleScroller
+  },
   data() {
     return {
       ip: "",
-      tableData: [],
       sendImgDialogVisible: false,
       file: null,
       file_md5: "",
@@ -276,12 +266,8 @@ export default {
         ip: localStorage.getItem("ip"),
         userId: localStorage.getItem("userId"),
         username: localStorage.getItem("username"),
-        avatar:
-          localStorage.getItem("avatar") === ""
-            ? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg"
-            : localStorage.getItem("avatar"),
+        avatar: localStorage.getItem("avatar") || "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg",
       },
-      username: localStorage.getItem("username"),
       userList: [],
       filteredUsers: [], // 过滤后的用户列表
       to_user_id: 0,
@@ -291,7 +277,6 @@ export default {
       searchName: "", // 搜索框内容
       history_cnt: 1,
       md: new MarkdownIt(), //md解析器
-
       cur_user_name: "",
       cur_user_avatar: "",
       eventSource: null, // 事件源
@@ -300,6 +285,11 @@ export default {
       MsgList: [],
       groupList: [],
       hasUnreadMsg: {}, // 未读消息, key为用户id，value为true/false
+      socket: null,
+      sendingMessages: {}, // 存储正在发送的消息，key为临时ID，value为消息内容
+      loading: false, // 消息加载状态
+      uploadProgress: 0, // 上传进度
+      uploading: false, // 上传中状态
     };
   },
 
@@ -314,16 +304,17 @@ export default {
         console.log(e);
       }
       let data = result.data;
-      this.userList = data.friends;
-      for (let i = 0; i < data.friends.length; i++) {
-        this.userList[i].avatar = data.friends[i].avatar ===""?"https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg" : data.friends[i].avatar;
-        this.hasUnreadMsg[data.friends[i].id] = false;
+      if (data) {
+        this.userList = data.friends || [];
+        for (let i = 0; i < this.userList.length; i++) {
+          this.userList[i].avatar = this.userList[i].avatar || "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg";
+          this.hasUnreadMsg[this.userList[i].id] = false;
+        }
+        this.groupList = data.groups || [];
+        for (let i = 0; i < this.groupList.length; i++) {
+          this.hasUnreadMsg["g_" + this.groupList[i].ID] = false;
+        }
       }
-      console.log("avatar: " + this.userList[0].avatar);
-      for (let i = 0; i < data.groups.length; i++) {
-        this.hasUnreadMsg["g_" + data.groups[i].ID] = false;
-      }
-      this.groupList = data.groups;
     },
     filterUsers() {
       this.filteredUsers = this.userList.filter((user) => {
@@ -331,8 +322,17 @@ export default {
       });
     },
     getHistory() {
+      this.loading = true;
       this.history_cnt++;
-      this.handleGetMessage(this.cur_user_id);
+      if (this.cur_group_id > 0) {
+        this.handleGetGroupMessage(this.cur_group_id).finally(() => {
+          this.loading = false;
+        });
+      } else {
+        this.handleGetMessage(this.cur_user_id).finally(() => {
+          this.loading = false;
+        });
+      }
     },
     async handleGetGroupMessage(id) {
       this.cur_group_id = id;
@@ -340,44 +340,21 @@ export default {
       this.to_user_id = 0;
       this.msg_type = 2;
       this.hasUnreadMsg["g_" + id] = false;
-      let result = {};
-      try {
-        let req = {
-          token: localStorage.getItem("token"),
-          ip: localStorage.getItem("ip"),
-          userId: localStorage.getItem("userId"),
-          username: localStorage.getItem("username"),
-          group_id: id,
-          index: this.history_cnt,
-          type: 2,
-        };
-        result = await getMessageService(req);
-      } catch (e) {
-        console.log(e);
+      
+      // 更新群组名称
+      const group = this.groupList.find(g => g.ID === id);
+      if (group) {
+        this.cur_user_name = group.GroupName;
+        this.cur_user_avatar = "";
       }
-      let data = result.data;
-      if (data === undefined || data === null) {
-        ElMessage({
-          message: "无消息！",
-          type: "error",
-        });
-        this.MsgList = [];
-        return;
-      }
-      data.sort((a, b) => {
-        const dateA = new Date(a.CreatedAt);
-        const dateB = new Date(b.CreatedAt);
-
-        // 返回时间差，用于排序
-        return dateA - dateB;
+      
+      // 获取群组消息
+      await this.fetchMessages({
+        group_id: id,
+        type: 2
       });
-      this.MsgList = data;
-      if (this.history_cnt <= 2) {
-        this.scrollToBottom();
-      }
     },
     async handleGetMessage(id) {
-      let result = {};
       if (this.to_user_id != id) {
         this.history_cnt = 2;
       }
@@ -385,98 +362,75 @@ export default {
       this.cur_user_id = id;
       this.cur_group_id = 0;
       this.msg_type = 1;
-      console.log("uid:", this.uid, "\tcur_user_id:", this.cur_user_id);
-      for (let i = 0; i < this.userList.length; i++) {
-        if (this.userList[i].id === id) {
-          this.cur_user_name = this.userList[i].name;
-          this.cur_user_avatar =
-            this.userList[i].avatar === ""
-              ? "https://gep.ljsea.top/tool/file/9f29cc99-1054-4aff-ab37-e7c0016dd1b5.jpeg"
-              : this.userList[i].avatar;
-          break;
-        }
+      
+      // 更新用户信息
+      const user = this.userList.find(user => user.id === id);
+      if (user) {
+        this.cur_user_name = user.name;
+        this.cur_user_avatar = user.avatar;
       }
+      
       this.hasUnreadMsg[id] = false;
+      
+      // 获取用户消息
+      await this.fetchMessages({
+        from_user_id: id,
+        to_user_id: localStorage.getItem("userId"),
+        type: this.msg_type
+      });
+    },
+    async fetchMessages(params) {
       try {
         let req = {
-          token: localStorage.getItem("token"),
-          ip: localStorage.getItem("ip"),
-          userId: localStorage.getItem("userId"),
-          username: localStorage.getItem("username"),
-          from_user_id: id,
-          to_user_id: localStorage.getItem("userId"),
+          token: this.tokenData.token,
+          ip: this.tokenData.ip,
+          userId: this.tokenData.userId,
+          username: this.tokenData.username,
           index: this.history_cnt,
-          type: this.msg_type,
+          ...params
         };
-        result = await getMessageService(req);
+        const result = await getMessageService(req);
+        const data = result.data;
+        if (!data) {
+          ElMessage.error("无消息！");
+          this.MsgList = [];
+          return;
+        }
+        data.sort((a, b) => new Date(a.CreatedAt) - new Date(b.CreatedAt));
+        this.MsgList = data;
+        if (this.history_cnt <= 2) {
+          this.scrollToBottom();
+        }
       } catch (e) {
         console.log(e);
-      }
-      let data = result.data;
-      if (data === undefined) {
-        ElMessage({
-          message: "消息获取失败！",
-          type: "error",
-        });
-        return;
-      }
-      //data sort by created time
-      // for (let i = 0; i < data.length; i++) {
-      //   for (let j = i + 1; j < data.length; j++) {
-      //     if (data[i].CreatedAt > data[j].CreatedAt) {
-      //       let temp = data[i];
-      //       data[i] = data[j];
-      //       data[j] = temp;
-      //     }
-      //   }
-      // }
-      data.sort((a, b) => {
-        const dateA = new Date(a.CreatedAt);
-        const dateB = new Date(b.CreatedAt);
-
-        // 返回时间差，用于排序
-        return dateA - dateB;
-      });
-      this.MsgList = data;
-      if (this.history_cnt <= 2) {
-        this.scrollToBottom();
+        ElMessage.error("消息获取失败！");
       }
     },
     formatTime(time) {
       let date = new Date(time);
-      // 提取年、月、日、时、分、秒
       const year = date.getFullYear();
-      const month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1
+      const month = ("0" + (date.getMonth() + 1)).slice(-2);
       const day = ("0" + date.getDate()).slice(-2);
       const hour = ("0" + date.getHours()).slice(-2);
       const minute = ("0" + date.getMinutes()).slice(-2);
       const second = ("0" + date.getSeconds()).slice(-2);
-
-      // 重新组合并返回格式化的日期时间字符串
       return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
     },
     renderMarkdown(markdown) {
-      // 使用 MarkdownIt 解析 Markdown 字符串并返回 HTML
       return this.md.render(markdown);
     },
     SendImage() {
       this.sendImgDialogVisible = true;
     },
-
     connectWebSocket() {
       // 连接WebSocket
       let _this = this;
       if (typeof WebSocket == "undefined") {
         console.log("浏览器不支持WebSocket");
+        ElMessage.error("您的浏览器不支持WebSocket");
       } else {
         console.log("浏览器支持WebSocket");
-        let socketUrl =
-          "wss://tx.ljsea.top/im/ws_v2?to_user_id=" +
-          this.to_user_id +
-          "&token=" +
-          this.tokenData.token;
-
-        // console.log("socketUrl:", socketUrl);
+        let socketUrl = "wss://tx.ljsea.top/im/ws_v2?to_user_id=" + this.to_user_id + "&token=" + this.tokenData.token;
         if (this.socket != null) {
           this.socket.close();
           this.socket = null;
@@ -485,36 +439,20 @@ export default {
         this.socket = new WebSocket(socketUrl);
         //打开事件
         this.socket.onopen = function () {
-          this.loading = false;
-          //alert("连接成功");
-          ElMessage({
-            message: "连接成功",
-            type: "success",
-          });
+          ElMessage.success("连接成功");
         };
         this.socket.onerror = (error) => {
           console.error("WebSocket Error:", error);
+          ElMessage.error("连接出错");
         };
         //关闭事件
         this.socket.onclose = function () {
-          //alert("连接已关闭!");
-          ElMessage({
-            message: "连接已关闭",
-            type: "error",
-          });
+          ElMessage.error("连接已关闭");
         };
         //  浏览器端收消息，获得从服务端发送过来的文本消息
         this.socket.onmessage = async function (msg) {
-          //console.log("收到数据====" + msg.data);
-          let data = JSON.parse(msg.data); // 对收到的json数据进行解析， 类似这样的：
-          // console.log("收到数据====" + data);
-          // 如果服务器端发送过来的json数据
-          console.log("data.type:", data.type);
+          let data = JSON.parse(msg.data);
           if (data.type == "msg") {
-            // 如果是消息类型，解密消息内容
-            // console.log("收到数据====" + JSON.stringify(msg.data));
-            console.log("msg_:", data.data);
-            console.log("hasUnreadMsg:", _this.hasUnreadMsg);
             let msg_data = JSON.parse(data.data);
             _this.MsgList.push(msg_data);
             if (msg_data.GroupID === 0) {
@@ -526,8 +464,8 @@ export default {
                 for (let i = 0; i < _this.userList.length; i++) {
                   if (_this.userList[i].id === msg_data.FromUserID) {
                     let temp = _this.userList[i];
-                    _this.userList.splice(i, 1); //删除当前用户
-                    _this.userList.unshift(temp); //将当前用户移动到第一位
+                    _this.userList.splice(i, 1);
+                    _this.userList.unshift(temp);
                     break;
                   }
                 }
@@ -540,90 +478,60 @@ export default {
                 for (let i = 0; i < _this.groupList.length; i++) {
                   if (_this.groupList[i].ID === msg_data.GroupID) {
                     let temp = _this.groupList[i];
-                    _this.groupList.splice(i, 1); //删除当前用户
-                    _this.groupList.unshift(temp); //将当前用户移动到第一位
+                    _this.groupList.splice(i, 1);
+                    _this.groupList.unshift(temp);
                     break;
                   }
                 }
               }
             }
             _this.scrollToBottom();
-            //console.log("msglist:", _this.MsgList);
-            // 构建消息内容
-          } else if (data.type == "check") {
-            //alert("对方已下线");
-            //console.log(data.type);
           }
         };
       }
     },
-    async connectSSE() {
-      if (!!window.EventSource) {
-        this.eventSource = new EventSource(
-          "https://gep.ljsea.xyz/im/sse_msg?token=" + this.tokenData.token
-        );
-        let this_ = this;
-        this.eventSource.onopen = function (event) {
-          console.log("连接已建立！");
-        };
-        this.eventSource.onmessage = function (event) {
-          console.log(event.data);
-          let msg = JSON.parse(event.data);
-          if (msg.type !== "check") {
-            alert(msg);
-            this_.MsgList.push(msg);
-          }
-        };
-        this.eventSource.onerror = (error) => {
-          //重新连接
-          this.connectSSE();
-          if (this.eventSource.readyState === EventSource.CLOSED) {
-            //console.log('Connection was closed by the server.');
-            ElMessage({
-              message: "连接已关闭！:" + error,
-              type: "error",
-            });
-
-            // Optionally, try to reconnect
-          } else {
-            //console.error('EventSource failed:', error);
-            ElMessage({
-              message: "连接失败！服务器无法实时推送消息！",
-              type: "error",
-            });
-            // Handle error
-          }
-        };
-      } else {
-        ElMessage({
-          message: "您的浏览器不支持SSE！",
-          type: "error",
-        });
-      }
-    },
     scrollToBottom() {
-      this.$nextTick(() => {
-        const scrollbar = this.$refs.chatRoom.$el.querySelector(
-          ".el-scrollbar__wrap"
-        );
-        if (scrollbar) {
-          scrollbar.scrollTop = scrollbar.scrollHeight;
+      nextTick(() => {
+        const chatRoom = this.$refs.chatRoom;
+        if (chatRoom) {
+          chatRoom.scrollTop = chatRoom.scrollHeight;
         }
       });
     },
     async handleSendBtnClick() {
-      if (this.currentMsg == "" || this.currentMsg === null) {
+      if (!this.currentMsg) {
         ElMessage.error("消息不能为空！");
         return;
       }
+      if (!this.cur_user_id && !this.cur_group_id) {
+        ElMessage.error("请先选择联系人或群组！");
+        return;
+      }
+      // 生成临时ID
+      const tempId = 'temp_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
+      // 创建临时消息对象
+      const tempMsg = {
+        ID: tempId,
+        FromUserID: this.tokenData.userId,
+        ToUserID: this.to_user_id,
+        GroupID: this.cur_group_id,
+        Msg: this.currentMsg,
+        CreatedAt: new Date(),
+        status: 'sending' // 发送中状态
+      };
+      // 添加到消息列表和发送中列表
+      this.MsgList.push(tempMsg);
+      this.sendingMessages[tempId] = tempMsg;
+      this.scrollToBottom();
+      
       let result = {};
       try {
         let req = {
-          token: localStorage.getItem("token"),
-          ip: localStorage.getItem("ip"),
-          userId: localStorage.getItem("userId"),
-          username: localStorage.getItem("username"),
-          from_user_id: localStorage.getItem("userId"),
+          token: this.tokenData.token,
+          ip: this.tokenData.ip,
+          userId: this.tokenData.userId,
+          username: this.tokenData.username,
+          from_user_id: this.tokenData.userId,
           to_user_id: this.to_user_id,
           group_id: this.cur_group_id,
           msg: this.currentMsg,
@@ -631,56 +539,75 @@ export default {
         };
         result = await sendMessageService(req);
         if (result.code !== 0) {
-          ElMessage({
-            message: "消息发送失败！",
-            type: "error",
-          });
+          ElMessage.error("消息发送失败！");
+          // 更新消息状态为失败
+          const msgIndex = this.MsgList.findIndex(msg => msg.ID === tempId);
+          if (msgIndex !== -1) {
+            this.MsgList[msgIndex].status = 'failed';
+          }
+          delete this.sendingMessages[tempId];
+          return;
         }
-        let msg = {
-          ID: result.Data,
-          FromUserID: localStorage.getItem("userId"),
-          ToUserID: this.to_user_id,
-          GroupID: this.cur_group_id,
-          Msg: this.currentMsg,
-          CreatedAt: new Date(),
-        };
-        this.MsgList.push(msg);
-        this.scrollToBottom();
+        // 更新消息状态为成功，并替换为真实ID
+        const msgIndex = this.MsgList.findIndex(msg => msg.ID === tempId);
+        if (msgIndex !== -1) {
+          this.MsgList[msgIndex].ID = result.Data;
+          this.MsgList[msgIndex].status = 'success';
+        }
+        delete this.sendingMessages[tempId];
       } catch (e) {
         console.log(e);
+        ElMessage.error("发送失败，请稍后重试");
+        // 更新消息状态为失败
+        const msgIndex = this.MsgList.findIndex(msg => msg.ID === tempId);
+        if (msgIndex !== -1) {
+          this.MsgList[msgIndex].status = 'failed';
+        }
+        delete this.sendingMessages[tempId];
       }
       this.currentMsg = "";
     },
+    async retrySendMessage(item) {
+      // 更新消息状态为发送中
+      item.status = 'sending';
+      
+      let result = {};
+      try {
+        let req = {
+          token: this.tokenData.token,
+          ip: this.tokenData.ip,
+          userId: this.tokenData.userId,
+          username: this.tokenData.username,
+          from_user_id: this.tokenData.userId,
+          to_user_id: this.to_user_id,
+          group_id: this.cur_group_id,
+          msg: item.Msg,
+          type: this.msg_type,
+        };
+        result = await sendMessageService(req);
+        if (result.code !== 0) {
+          ElMessage.error("消息发送失败！");
+          item.status = 'failed';
+          return;
+        }
+        // 更新消息状态为成功，并替换为真实ID
+        item.ID = result.Data;
+        item.status = 'success';
+      } catch (e) {
+        console.log(e);
+        ElMessage.error("发送失败，请稍后重试");
+        item.status = 'failed';
+      }
+    },
     async getIpClient() {
       try {
         const response = await axios.get("https://ipinfo.io/json");
         this.ip = response.data.ip;
         localStorage.setItem("ip", this.ip);
-        //console.log(response);
       } catch (error) {
         console.error(error);
       }
     },
-    handleFileSelect() {
-      let mdt_ = "";
-      if (this.file) {
-        try {
-          const reader = new FileReader();
-          reader.onloadend = function (e) {
-            if (e.target.readyState === FileReader.DONE) {
-              const arrayBuffer = e.target.result;
-              const spark = new SparkMD5.ArrayBuffer();
-              spark.append(arrayBuffer);
-              md5Value.value = spark.end();
-            }
-          };
-          reader.readAsArrayBuffer(this.file);
-        } catch (error) {
-          console.error("计算MD5值出错:", error);
-        }
-      }
-    },
-
     handleMenuSelect(val) {
       router.push(val);
       //关闭websocket
@@ -699,7 +626,6 @@ export default {
           const wordArray = CryptoJS.lib.WordArray.create(event.target.result);
           const md5Hash = CryptoJS.MD5(wordArray);
           const md5Str = md5Hash.toString(CryptoJS.enc.Hex);
-          //console.log("onload: " + md5Str);
           this.file_md5 = md5Str;
           resolve(md5Str);
         };
@@ -710,16 +636,13 @@ export default {
       });
     },
     async sendImageOrVideo() {
-      if (this.file == null) {
-        alert("请先选择要上传的文件");
+      if (!this.file) {
+        ElMessage.error("请先选择要上传的文件");
         return;
       }
-      //查看文件是否是图片或视频
-
       try {
         let result = {};
-        this.file_md5 = await this.readFileAndCalculateMD5(this.file);
-        //console.log("md5:",this.file_md5);
+        this.file_md5 = await this.readFileAndCalculateMD5();
         let md5_result = await GetFileInfoByMd5Service({
           md5: this.file_md5,
           token: this.tokenData.token,
@@ -728,40 +651,61 @@ export default {
         if (md5_result.code === 0) {
           result = md5_result;
         } else {
+          this.uploading = true;
+          this.uploadProgress = 0;
           let formData = new FormData();
           formData.append("file", this.file);
-          //console.log("add file: " + this.file);
           formData.append("upload_type", "1");
           formData.append("md5", this.file_md5);
           formData.append("auth_type", "public");
-          //console.log("formData:",formData);
-
-          result = await UploadFileService(formData, this.tokenData.token);
+          // 自定义上传请求，添加上传进度
+          result = await new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', '/api/tool/uploadFile', true);
+            xhr.setRequestHeader('token', this.tokenData.token);
+            xhr.upload.addEventListener('progress', (event) => {
+              if (event.lengthComputable) {
+                this.uploadProgress = Math.round((event.loaded / event.total) * 100);
+              }
+            });
+            xhr.onload = () => {
+              if (xhr.status === 200) {
+                try {
+                  const response = JSON.parse(xhr.responseText);
+                  resolve(response);
+                } catch (e) {
+                  reject(new Error('Invalid response format'));
+                }
+              } else {
+                reject(new Error(`Upload failed with status ${xhr.status}`));
+              }
+            };
+            xhr.onerror = () => {
+              reject(new Error('Upload failed'));
+            };
+            xhr.send(formData);
+          });
           if (result.code !== 0) {
             ElMessage.error("上传文件失败，请稍后再试");
+            this.uploading = false;
             return;
           }
         }
         let resp_data = result.data;
-
-        //console.log("resp:",resp_data);
         let url = "https://gep.ljsea.top/tool/file/" + resp_data.FileStoreName;
         let msg_ = "";
-        //markdown 图片格式
-        let fileType = this.file.name.split(".")[1];
+        let fileType = this.file.name.split(".").pop().toLowerCase();
         if (!["jpg", "jpeg", "png", "gif", "mp4"].includes(fileType)) {
-          //alert('请选择正确的图片或视频格式');
           msg_ = `文件：[${resp_data.FileName}](${url})`;
         } else {
           msg_ = `![${resp_data.FileName}](${url})`;
         }
-
         let req = {
-          token: localStorage.getItem("token"),
-          ip: localStorage.getItem("ip"),
-          userId: localStorage.getItem("userId"),
-          username: localStorage.getItem("username"),
-          from_user_id: localStorage.getItem("userId"),
+          token: this.tokenData.token,
+          ip: this.tokenData.ip,
+          userId: this.tokenData.userId,
+          username: this.tokenData.username,
+          from_user_id: this.tokenData.userId,
           to_user_id: this.to_user_id,
           group_id: this.cur_group_id,
           msg: msg_,
@@ -769,10 +713,9 @@ export default {
         };
         result = await sendMessageService(req);
         if (result.code !== 0) {
-          ElMessage({
-            message: "消息发送失败！",
-            type: "error",
-          });
+          ElMessage.error("消息发送失败！");
+          this.uploading = false;
+          return;
         }
         let msg = {
           ID: result.data.id,
@@ -782,26 +725,17 @@ export default {
           Msg: msg_,
           CreatedAt: new Date(),
         };
-        console.log("msg:", msg);
         this.MsgList.push(msg);
         this.scrollToBottom();
         this.sendImgDialogVisible = false;
+        this.file = null;
+        this.uploading = false;
+        this.uploadProgress = 0;
       } catch (error) {
         ElMessage.error("上传文件时出现网络错误，请稍后再试");
         console.error(error);
-      }
-    },
-    toVideoList() {
-      router.push("/videoList");
-    },
-    // 修改条纹颜色
-    tableRowClassName({ row, rowIndex }) {
-      if (row.human === 1) {
-        return {
-          background: "#488aff",
-        };
-      } else {
-        return "";
+        this.uploading = false;
+        this.uploadProgress = 0;
       }
     },
   },
@@ -809,94 +743,488 @@ export default {
   // 生命周期钩子会在组件生命周期的各个不同阶段被调用
   // 例如这个函数就会在组件挂载完成后被调用
   async mounted() {
-    let now = new Date();
-    if (localStorage.getItem("token") === null) {
+    if (!localStorage.getItem("token")) {
       router.push("/login");
+      return;
     }
-    // console.log("mounted");
     await this.getIpClient();
     await this.handleSelectUser();
     this.filteredUsers = this.userList;
-    //await this.connectSSE();
     this.connectWebSocket();
-    this.handleGetMessage(this.userList[0].id);
+    if (this.userList.length > 0) {
+      this.handleGetMessage(this.userList[0].id);
+    }
   },
   onUnmounted() {
     if (this.eventSource) {
       this.eventSource.close();
     }
+    if (this.socket) {
+      this.socket.close();
+    }
     console.log("unmounted chat");
   },
 };
 </script>
 
 <style scoped>
-.layout-container-demo .el-header {
-  position: relative;
-  /* background-color: var(--el-color-primary-light-7); */
-  color: var(--el-text-color-primary);
+.page-container {
+  width: 100%;
+  height: 100%;
 }
 
-.layout-container-demo .el-aside {
-  color: var(--el-text-color-primary);
-  /* background: var(--el-color-primary-light-8); */
+.page-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  border-radius: 8px;
 }
 
-.layout-container-demo .el-menu {
+.page-card :deep(.el-card__body) {
+  flex: 1;
+  overflow: hidden;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.page-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chat-container {
+  flex: 1;
+  display: flex;
+  gap: 20px;
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* 左侧边栏 */
+.chat-sidebar {
+  width: 280px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.sidebar-scrollbar {
+  flex: 1;
+}
+
+.sidebar-menu {
   border-right: none;
 }
 
-.layout-container-demo .el-main {
-  padding: 0;
+.menu-icon {
+  margin-right: 8px;
 }
 
-.layout-container-demo .toolbar {
-  display: inline-flex;
+.user-menu-item,
+.group-menu-item {
+  position: relative;
+  height: 52px !important;
+  display: flex;
+  align-items: center;
+  padding: 0 20px !important;
+}
+
+.user-avatar {
+  margin-right: 12px;
+}
+
+.user-name,
+.group-name {
+  flex: 1;
+  font-size: 14px;
+  color: #303133;
+}
+
+.unread-dot {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 8px;
+  height: 8px;
+  background-color: #f56c6c;
+  border-radius: 50%;
+}
+
+/* 右侧聊天窗口 */
+.chat-main {
+  flex: 1;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 聊天头部 */
+.chat-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f5f7fa;
+}
+
+.chat-header-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chat-header-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.chat-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.current-user {
+  font-size: 14px;
+  color: #606266;
+}
+
+.current-user-avatar {
+  width: 32px;
+  height: 32px;
+}
+
+/* 消息区域 */
+.chat-messages {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  background: #f5f7fa;
+  position: relative;
+}
+
+.recycle-scroller {
+  width: 100%;
+  height: 100%;
+}
+
+.message-item {
+  margin-bottom: 20px;
+  min-height: 80px;
+}
+
+.empty-messages {
+  display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
-  right: 5px;
+  color: #909399;
+  font-size: 14px;
 }
 
-.msg {
-  background-color: #73d1f3;
-  /* box-shadow: rgba(18, 23, 45, 0.6) 0px 8px 24px; */
-  border-radius: 4px;
-  padding: 10px;
-  font-size: 18px;
-  line-height: 16px;
-  /* width: auto; */
-  /* max-width: 330px; */
-  margin-top: 20px;
-  color: white;
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 12px;
 }
 
-.msg2 {
-  background-color: #12b7f5;
-  /* box-shadow: rgba(18, 23, 45, 0.6) 0px 8px 24px; */
-  border-radius: 4px;
-  padding: 10px;
-  font-size: 18px;
-  line-height: 16px;
-  /* width: auto; */
-  /* max-width: 330px; */
-  margin-top: 20px;
-  color: white;
-}
-.unread-dot {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 8px;
-  height: 8px;
-  background-color: red;
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #409eff;
   border-radius: 50%;
-  transform: translate(50%, -50%);
+  animation: spin 1s linear infinite;
 }
 
-.send-image-button-bg {
-  background-image: url(../assets/img.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
+.loading-text {
+  color: #606266;
+  font-size: 14px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.message-left,
+.message-right {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.message-right {
+  flex-direction: row-reverse;
+}
+
+.message-content-wrapper {
+  flex: 1;
+  max-width: 70%;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.message-header-right {
+  flex-direction: row-reverse;
+}
+
+.message-sender {
+  font-weight: 500;
+  color: #606266;
+}
+
+.message-time {
+  color: #909399;
+}
+
+.message-bubble {
+  padding: 12px 16px;
+  border-radius: 18px;
+  word-wrap: break-word;
+  line-height: 1.5;
+}
+
+.message-bubble-left {
+  background: #ffffff;
+  border-bottom-left-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.message-bubble-right {
+  background: #409eff;
+  color: #ffffff;
+  border-bottom-right-radius: 4px;
+  box-shadow: 0 1px 2px rgba(64, 158, 255, 0.3);
+  position: relative;
+}
+
+.message-status {
+  font-size: 10px;
+  margin-top: 4px;
+  text-align: right;
+  opacity: 0.8;
+}
+
+.status-sending {
+  color: #f0f0f0;
+}
+
+.status-failed {
+  color: #f56c6c;
+  cursor: pointer;
+}
+
+.status-success {
+  color: #67c23a;
+}
+
+.status-read {
+  color: #409eff;
+  margin-left: 4px;
+  font-weight: 500;
+}
+
+/* 输入区域 */
+.chat-input-area {
+  padding: 16px;
+  border-top: 1px solid #e4e7ed;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.input-tools {
+  display: flex;
+  gap: 8px;
+}
+
+.input-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 文件上传对话框 */
+.file-upload-section {
+  padding: 20px 0;
+}
+
+.file-input {
+  margin-bottom: 16px;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.file-icon {
+  font-size: 24px;
+  color: #409eff;
+}
+
+.file-size {
+  margin-left: auto;
+  font-size: 12px;
+  color: #909399;
+}
+
+.upload-progress-section {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.upload-progress-text {
+  text-align: center;
+  font-size: 14px;
+  color: #606266;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+/* 滚动条样式 */
+.chat-messages::-webkit-scrollbar,
+.sidebar-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track,
+.sidebar-scrollbar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb,
+.sidebar-scrollbar::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover,
+.sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 动画效果 */
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft 0.3s ease-out;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .chat-container {
+    flex-direction: column;
+  }
+  
+  .chat-sidebar {
+    width: 100%;
+    height: 200px;
+  }
+  
+  .message-content-wrapper {
+    max-width: 85%;
+  }
 }
 </style>
diff --git a/src/views/FileList.vue b/src/views/FileList.vue
index d0767b9..e7ced8d 100644
--- a/src/views/FileList.vue
+++ b/src/views/FileList.vue
@@ -1,8 +1,8 @@
 <script>
 import router from "@/router/index.js";
-import { autoResizerProps, ElMessage } from "element-plus";
+import { ElMessage } from "element-plus";
 import CryptoJS from "crypto-js";
-
+import { Refresh, Plus, Edit, Delete, Document } from "@element-plus/icons-vue";
 
 import { getConfigFileListService } from "@/api/file.js";
 import { addConfigFileService } from "@/api/file.js";
@@ -10,6 +10,13 @@ import { deleteConfigFileService } from "@/api/file.js";
 import { updateConfigFileService } from "@/api/file.js";
 
 export default {
+  components: {
+    Refresh,
+    Plus,
+    Edit,
+    Delete,
+    Document
+  },
   data() {
     return {
       ip: "",
@@ -22,13 +29,13 @@ export default {
       ConfigFileCurrentPageData: [],
       pageSize: 10,
       currentPage: 1,
-      upload_file: null, //文件上传
-      file_md5: "", //文件上传的md5
+      upload_file: null,
+      file_md5: "",
       addForm: {
         file_name: "",
         file_path: "",
       },
-      loading: false, // 加载状态
+      loading: false,
       server_list: [
         { label: "js.ljsea.top", value: "js.ljsea.top" },
         { label: "tx.ljsea.top", value: "tx.ljsea.top" },
@@ -36,7 +43,6 @@ export default {
         { label: "as.ljsea.top", value: "as.ljsea.top" },
         { label: 'al.ljsea.top', value: "al.ljsea.top" }
       ],
-
       role: "",
       tokenData: {
         token: localStorage.getItem("token"),
@@ -50,14 +56,11 @@ export default {
     };
   },
 
-  // methods 是一些用来更改状态与触发更新的函数
-  // 它们可以在模板中作为事件处理器绑定
   methods: {
     async getConfigFileList() {
       this.loading = true;
       let result = {};
       try {
-        //判断search_id是字符串还是数字
         let req = {
           token: this.tokenData.token,
           type: "all",
@@ -67,7 +70,6 @@ export default {
         if (data !== undefined && data !== null) {
           this.tableData = data;
         }
-        
       } catch (e) {
         console.log(e);
         ElMessage.error("获取文件列表失败");
@@ -76,8 +78,7 @@ export default {
       }
       for(let i = 0;i<this.tableData.length;i++) {
         this.tableData[i].UpdatedAt = this.formattedTime(this.tableData[i].UpdatedAt);
-        this.tableData[i].CreatedAt = this.formattedTime(this.tableData[i].CreatedAt)
-      //console.log('this.ConfigFileList:',this.ConfigFileList);
+        this.tableData[i].CreatedAt = this.formattedTime(this.tableData[i].CreatedAt);
       }
       this.currentPageData();
     },
@@ -103,6 +104,10 @@ export default {
           ElMessage.success("添加成功");
           this.getConfigFileList();
           this.addConfigFileVisible = false;
+          this.addForm = {
+            file_name: "",
+            file_path: "",
+          };
         } else {
           ElMessage.error("添加失败");
         }
@@ -114,7 +119,6 @@ export default {
       }
     },
     async deleteConfigFile(index) {
-      // 是否删除
       let isDelete = confirm("是否删除?");
       if (!isDelete) {
         return;
@@ -156,33 +160,6 @@ export default {
       this.ConfigFileUpdateForm = data[0];
       this.updateDialogVisible = true;
     },
-    handleAvatarFileUpload(e) {
-      this.avatar_file = e.target.files[0];
-      //判断文件类型是否为图片
-      if (!this.avatar_file.type.startsWith("image/")) {
-        ElMessage.error("请选择图片文件");
-        this.avatar_file = null;
-        return;
-      }
-      this.uploadAvatarFile();
-    },
-    readFileAndCalculateMD5() {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = (event) => {
-          const wordArray = CryptoJS.lib.WordArray.create(event.target.result);
-          const md5Hash = CryptoJS.MD5(wordArray);
-          const md5Str = md5Hash.toString(CryptoJS.enc.Hex);
-          //console.log("onload: " + md5Str);
-          this.file_md5 = md5Str;
-          resolve(md5Str);
-        };
-        reader.onerror = (error) => {
-          reject(error);
-        };
-        reader.readAsArrayBuffer(this.avatar_file);
-      });
-    },
     formattedTime(isoTime) {
       const date = new Date(isoTime);
       const year = date.getFullYear();
@@ -194,51 +171,6 @@ export default {
 
       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     },
-    async uploadFile() {
-      if (this.avatar_file == null) {
-        alert("请先选择要上传的文件");
-        return;
-      }
-
-      try {
-        let result = {};
-        this.file_md5 = await this.readFileAndCalculateMD5(this.avatar_file);
-        //console.log("md5:",this.file_md5);
-        let md5_result = await GetFileInfoByMd5Service({
-          md5: this.file_md5,
-          token: this.tokenData.token,
-          type: 1,
-        });
-        if (md5_result.code === 0) {
-          result = md5_result;
-        } else {
-          let formData = new FormData();
-          formData.append("file", this.avatar_file);
-          //console.log("add file: " + this.file);
-          formData.append("upload_type", "1");
-          formData.append("md5", this.file_md5);
-          formData.append("auth_type", "public");
-          //console.log("formData:",formData);
-
-          result = await UploadFileService(formData, this.tokenData.token);
-          if (result.code !== 0) {
-            ElMessage.error("上传文件失败，请稍后再试");
-            return;
-          }
-        }
-        let resp_data = result.data;
-
-        //console.log("resp:",resp_data);
-        let url = "https://gep.ljsea.top/tool/file/" + resp_data.FileStoreName;
-
-        this.UserUpdateForm.avatar = url;
-        //更新用户信息
-        await this.updateUserInfo();
-      } catch (error) {
-        ElMessage.error("上传文件时出现网络错误，请稍后再试");
-        console.error(error);
-      }
-    },
     async updateConfigFileInfo() {
       this.loading = true;
       let result = {};
@@ -248,9 +180,6 @@ export default {
           id: this.ConfigFileUpdateForm.id,
           content: this.ConfigFileUpdateForm.content,
         };
-        for (var key in this.UserUpdateForm) {
-          req[key] = this.UserUpdateForm[key];
-        }
         result = await updateConfigFileService(req);
         if (result.code === 0) {
           ElMessage.success("更新成功");
@@ -265,7 +194,6 @@ export default {
         this.loading = false;
       }
     },
-
     onSubmit() {
       getConfigFileList();
     },
@@ -276,32 +204,19 @@ export default {
       );
     },
     handleSizeChange(val) {
-      //console.log(`每页 ${val} 条`);
       this.pageSize = val;
       this.currentPageData();
     },
     handleCurrentChange(val) {
-      //console.log(`当前页: ${val}`);
       this.currentPage = val;
       this.currentPageData();
     },
-
-    async displayMyInfo() {
-      await this.getMyUserInfo(this.tokenData.user_id);
-      this.updateDialogVisible = true;
-    },
-    async displayUserInfo(id) {
-      await this.getMyUserInfo(id);
-      this.updateDialogVisible = true;
-    },
-
     handleMenuSelect(val) {
       router.push(val);
     },
     toVideoList() {
       router.push("/videoList");
     },
-    // 修改条纹颜色
     tableRowClassName({ row, rowIndex }) {
       if (row.human === 1) {
         return {
@@ -313,244 +228,246 @@ export default {
     },
   },
 
-  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
-  // 例如这个函数就会在组件挂载完成后被调用
   async mounted() {
     let now = new Date();
     if (localStorage.getItem("token") === null) {
       router.push("/login");
     }
     await this.getConfigFileList();
-    //await this.getMyUserInfo(localStorage.getItem("userId"));
   },
 };
 </script>
 
 <template>
-  <div>
-    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-      <el-header style="font-size: 28px; font-weight: 500; background-color: #f5f7fa; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #e4e7ed;"
-        >配置文件管理</el-header
-      >
-      <el-container>
-        <el-main>
-          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
-            <el-form-item>
-              <el-dialog
-                v-model="updateDialogVisible"
-                title="编辑配置文件"
-                width="70%"
-                :before-close="handleClose"
-                top="3vh"
-                :close-on-click-modal="false"
-              >
-                <!-- 内容主体区域 -->
-                <el-form
-                  ref="updateFormRef"
-                  :model="ConfigFileUpdateForm"
-                  :rules="UserUpdateFormRules"
-                  label-width="90px"
-                >
-                  <!-- row -->
-                  <el-row gutter="20">
-                    <el-col :span="12">
-                      <el-form-item label="ID">
-                        <el-input
-                          v-model="ConfigFileUpdateForm.id"
-                          disabled
-                        ></el-input>
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                      <el-form-item label="文件名称">
-                        <el-input
-                          v-model="ConfigFileUpdateForm.file_name"
-                          disabled
-                        ></el-input>
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                  <el-row>
-                    <el-col :span="24">
-                      <el-form-item label="文件路径">
-                        <el-input
-                          v-model="ConfigFileUpdateForm.file_path"
-                          disabled
-                        ></el-input>
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                  <el-row>
-                    <el-col :span="24">
-                      <el-form-item label="文件内容" prop="device_status">
-                        <el-input
-                          type="textarea"
-                          v-model="ConfigFileUpdateForm.content"
-                          style="font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; line-height: 1.6; min-height: 650px; width: 800px;"
-                          :autosize="{ minRows: 20, maxRows: 60 }"
-                        />
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                </el-form>
-
-                <!-- 底部区域 -->
-                <template #footer>
-                  <span class="dialog-footer">
-                    <el-button @click="updateDialogVisible = false"
-                      >取消</el-button
-                    >
-                    <el-button type="primary" @click="updateConfigFileInfo()"
-                      >确定</el-button
-                    >
-                  </span>
-                </template>
-              </el-dialog>
-            </el-form-item>
-
-            <!-- 表单 -->
-            <el-form :inline="true" :model="tokenData" class="demo-form-inline">
-              <el-form-item>
-                <el-button
-                  type="primary"
-                  @click="getConfigFileList()"
-                  >刷新列表</el-button
-                >
-              </el-form-item>
-              <el-form-item>
-                <el-button
-                  type="success"
-                  @click="addConfigFileV()"
-                  >添加配置文件</el-button
-                >
-              </el-form-item>
-              <!-- 选择服务器 -->
-              <el-form-item>
-                <el-select
-                  v-model="tokenData.server"
-                  filterable allow-create
-                  @change="handleServerChange"
-                >
-                <el-option v-for="item in server_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-              </el-form-item>
-            </el-form>
-          </el-form>
-
-          <el-dialog
-            v-model="addConfigFileVisible"
-            title="添加配置文件"
-            width="600px"
-            :before-close="handleClose"
-            top="15vh"
-          >
-            <!-- 内容主体区域 -->
-            <el-form
-              ref="addFormRef"
-              :model="addForm"
-              :rules="addFormRules"
-              label-width="90px"
-              style="padding: 20px 10px;"
+  <div class="page-container">
+    <el-card class="page-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <span class="page-title">配置文件管理</span>
+          </div>
+          <div class="header-actions">
+            <el-select
+              v-model="tokenData.server"
+              filterable
+              allow-create
+              @change="handleServerChange"
+              style="width: 200px;"
+              placeholder="选择服务器"
             >
-              <el-form-item label="文件名称" prop="file_name">
-                <el-input
-                  v-model="addForm.file_name"
-                  autocomplete="on"
-                  placeholder="请输入文件名称"
-                ></el-input>
-              </el-form-item>
-              <el-form-item label="文件路径" prop="file_path">
-                <el-input
-                  v-model="addForm.file_path"
-                  autocomplete="on"
-                  placeholder="请输入文件完整路径"
-                ></el-input>
-              </el-form-item>
-            </el-form>
-            <!-- 底部区域 -->
-            <template #footer>
-              <span class="dialog-footer">
-                    <el-button @click="addConfigFileVisible = false"
-                      >取消</el-button
-                    >
-                    <el-button type="primary" @click="addConfigFile()"
-                      >确定</el-button
-                    >
-                  </span>
-            </template>
-          </el-dialog>
+              <el-option v-for="item in server_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+            <el-button type="primary" @click="addConfigFileV()" :icon="Plus">
+              添加配置文件
+            </el-button>
+            <el-button @click="getConfigFileList()" :icon="Refresh">
+              刷新列表
+            </el-button>
+          </div>
+        </div>
+      </template>
 
-          <!-- 表格  :row-style="this.tableRowClassName"-->
-          <el-table 
-            :data="ConfigFileCurrentPageData" 
-            width="100%" 
-            v-loading="loading"
-            element-loading-text="加载中..."
-            element-loading-background="rgba(240, 242, 245, 0.8)"
-            border
-            stripe
-            style="margin-top: 20px;"
-          >
-            :row-style="this.tableRowClassName"
-            <el-table-column prop="ID" label="id" width="80"></el-table-column>
-            <el-table-column
-              prop="FileName"
-              label="文件名称"
-              width="120"
-            ></el-table-column>
-            <el-table-column
-              prop="FilePath"
-              label="文件路径"
-              width="180"
-            ></el-table-column>
-            <el-table-column
-              prop="CreatedAt"
-              label="创建时间"
-              width="160"
-            ></el-table-column>
-            <el-table-column
-              prop="UpdatedAt"
-              label="上次更新"
-              width="160"
-            ></el-table-column>
-            <el-table-column
-              prop="AuthID"
-              label="创建用户ID"
-              width="100"
-            ></el-table-column>
-            <el-table-column label="操作" width="200">
-              <template #default="scope">
-                <el-button
-                  type="primary"
-                  size="mini"
-                  @click.prevent="updateConfigFile(scope.$index)"
-                  >编辑</el-button
-                >
-                <el-button
-                  type="primary"
-                  size="mini"
-                  @click.prevent="deleteConfigFile(scope.$index)"
-                  >删除</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-          <!-- 分页条 -->
-          <!-- Pagination 分页 -->
+      <div class="table-wrapper">
+        <el-table 
+          :data="ConfigFileCurrentPageData" 
+          style="width: 100%" 
+          v-loading="loading"
+          element-loading-text="加载中..."
+          element-loading-background="rgba(240, 242, 245, 0.8)"
+          stripe
+          :row-class-name="tableRowClassName"
+        >
+          <el-table-column prop="ID" label="ID" width="80"></el-table-column>
+          <el-table-column prop="FileName" label="文件名称" min-width="150"></el-table-column>
+          <el-table-column prop="FilePath" label="文件路径" min-width="200" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="CreatedAt" label="创建时间" min-width="160"></el-table-column>
+          <el-table-column prop="UpdatedAt" label="上次更新" min-width="160"></el-table-column>
+          <el-table-column prop="AuthID" label="创建用户ID" width="120"></el-table-column>
+          <el-table-column label="操作" width="200" fixed="right">
+            <template #default="scope">
+              <el-button type="primary" size="small" @click.prevent="updateConfigFile(scope.$index)" :icon="Edit">
+                编辑
+              </el-button>
+              <el-button type="danger" size="small" @click.prevent="deleteConfigFile(scope.$index)" :icon="Delete">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div class="pagination-wrapper">
           <el-pagination
             background
             layout="total,sizes, prev, pager, next, jumper"
+            :page-sizes="[10, 20, 50, 100]"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
-            :total="10"
+            :total="tableData.length"
           ></el-pagination>
-        </el-main>
-      </el-container>
-    </el-container>
+        </div>
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="addConfigFileVisible"
+      title="添加配置文件"
+      width="500px"
+      :close-on-click-modal="false"
+      top="15vh"
+    >
+      <el-form
+        ref="addFormRef"
+        :model="addForm"
+        label-width="90px"
+        class="form-dialog"
+      >
+        <el-form-item label="文件名称">
+          <el-input
+            v-model="addForm.file_name"
+            autocomplete="on"
+            placeholder="请输入文件名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="文件路径">
+          <el-input
+            v-model="addForm.file_path"
+            autocomplete="on"
+            placeholder="请输入文件完整路径"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="addConfigFileVisible = false">取消</el-button>
+          <el-button type="primary" @click="addConfigFile()">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="updateDialogVisible"
+      title="编辑配置文件"
+      width="70%"
+      top="3vh"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="updateFormRef"
+        :model="ConfigFileUpdateForm"
+        label-width="90px"
+        class="form-dialog"
+      >
+        <el-row gutter="20">
+          <el-col :span="12">
+            <el-form-item label="ID">
+              <el-input v-model="ConfigFileUpdateForm.id" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="文件名称">
+              <el-input v-model="ConfigFileUpdateForm.file_name" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="文件路径">
+              <el-input v-model="ConfigFileUpdateForm.file_path" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="文件内容">
+              <el-input
+                type="textarea"
+                v-model="ConfigFileUpdateForm.content"
+                style="font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; line-height: 1.6;"
+                :autosize="{ minRows: 20, maxRows: 40 }"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="updateDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="updateConfigFileInfo()">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
+
 <style scoped>
-.blueRowbg {
-  background: "#488aff";
+.page-container {
+  width: 100%;
+  height: 100%;
 }
-</style>
\ No newline at end of file
+
+.page-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  border-radius: 8px;
+}
+
+.page-card :deep(.el-card__body) {
+  flex: 1;
+  overflow: hidden;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.page-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-wrapper :deep(.el-table) {
+  border-radius: 4px;
+}
+
+.pagination-wrapper {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.form-dialog {
+  padding: 10px 0;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>
diff --git a/src/views/Im.vue b/src/views/Im.vue
index 75f45dc..d950a1b 100644
--- a/src/views/Im.vue
+++ b/src/views/Im.vue
@@ -1,82 +1,75 @@
 <template>
-  <div style="padding: 10px; margin-bottom: 50px">
-    <el-button
-      type="primary"
-      size="mini"
-      @click.prevent="handleMenuSelect('/User')"
-      >用户</el-button
-    >
-    <el-row v-loading="loading" element-loading-text="正在连接....">
-      <el-col :span="16">
-        <div
-          style="
-            width: 800px;
-            margin: 0 auto;
-            background-color: white;
-            border-radius: 5px;
-            box-shadow: 0 0 10px #ccc;
-          "
-        >
-          <div style="text-align: center; line-height: 50px">
-            （{{ chatUser }}）
+  <div class="page-container">
+    <el-card class="page-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <span class="page-title">聊天窗口 - {{ chatUser }}</span>
           </div>
-          <div
-            style="height: 350px; overflow: auto; border-top: 1px solid #ccc"
-            v-html="content"
-          ></div>
-          <div style="height: 200px">
-            <textarea
-              v-model="text"
-              style="
-                height: 160px;
-                width: 100%;
-                padding: 20px;
-                border: none;
-                border-top: 1px solid #ccc;
-                border-bottom: 1px solid #ccc;
-                outline: none;
-              "
-            ></textarea>
-            <div style="text-align: right; padding-right: 10px">
-              <el-button type="primary" size="mini" @click="send"
-                >发送</el-button
-              >
-            </div>
+          <div class="header-actions">
+            <el-button type="primary" size="small" @click.prevent="handleMenuSelect('/user')" :icon="User">
+              返回用户列表
+            </el-button>
           </div>
         </div>
-      </el-col>
-    </el-row>
+      </template>
+
+      <div class="chat-container" v-loading="loading" element-loading-text="正在连接...">
+        <div class="chat-header">
+          <div class="chat-user-info">
+            <el-avatar size="small" :src="circleUrl" style="margin-right: 8px;"></el-avatar>
+            <span class="chat-user-name">{{ chatUser }}</span>
+          </div>
+        </div>
+
+        <div class="chat-messages" v-html="content"></div>
+
+        <div class="chat-input-area">
+          <el-input
+            v-model="text"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入消息..."
+            resize="none"
+          ></el-input>
+          <div class="chat-actions">
+            <el-button type="primary" @click="send">
+              发送
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
+
 <script>
-import { ref, onMounted, inject, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
+import { User } from "@element-plus/icons-vue";
 import { getImKeyService } from "@/api/im.js";
 import router from "@/router/index.js";
-import * as crypto from "crypto";
 import CryptoJS from "crypto-js";
-import { ElLoading } from "element-plus";
 import { ElMessage } from 'element-plus';  
-import Cookies from "js-cookie";
+
 export default {
+  components: {
+    User
+  },
   data() {
     return {
-      circleUrl:
-        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
-      user: {},
-      isCollapse: false,
-      users: [{ username: "admin" }, { username: "zhang" }],
-      chatUser: "2002",
+      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+      chatUser: "",
       text: "",
       messages: [],
       session: "",
-      loading: ref(true),
+      loading: true,
       imKey: "testimkey",
       socket: null,
       content: "",
       to_user_id: 0,
       to_user_name: "",
       cnt: 0,
-      intervalId: null,
+      timerId: null, // 用于存储定时器的ID
       tokenData: {
         token: localStorage.getItem("token"),
         ip: localStorage.getItem("ip"),
@@ -84,31 +77,27 @@ export default {
         username: localStorage.getItem("username"),
         to_user_id: this.to_user_id,
       },
-      intervalId: ref(null),
-      timerId: null, // 用于存储定时器的ID
     };
   },
   methods: {
     async send() {
       if (!this.text) {
-        this.$message({ type: "warning", message: "请输入内容" });
+        ElMessage({ type: "warning", message: "请输入内容" });
       } else {
         if (typeof WebSocket == "undefined") {
           console.log("您的浏览器不支持WebSocket");
+          ElMessage.error("您的浏览器不支持WebSocket");
         } else {
           var aesEnc = await this.aesEncrypt(this.text, this.imKey, this.imKey);
-          let data =
-            '{"type":"msg","data":"' +
-            aesEnc +
-            '","to_user_id":' +
-            this.to_user_id +
-            ',"from_user_id":' +
-            this.tokenData.userId +
-            ',"session":"' +
-            this.session +
-            '"}';
-          this.socket.send(data); // 将组装好的json发送给服务端，由服务端进行转发
-          this.messages.push(JSON.parse(data));
+          let data = {
+            type: "msg",
+            data: aesEnc,
+            to_user_id: this.to_user_id,
+            from_user_id: this.tokenData.userId,
+            session: this.session
+          };
+          this.socket.send(JSON.stringify(data)); // 将组装好的json发送给服务端，由服务端进行转发
+          this.messages.push(data);
           // 构建消息内容，本人消息
           this.createContent(null, this.tokenData.username, this.text);
           this.text = "";
@@ -143,11 +132,7 @@ export default {
         if (this.cnt > 10) {
           //暂停定时器
           this.stopInterval();
-          //alert("连接失败，请重试！");
-          ElMessage({
-            message: "连接失败，请重试！",
-            type: "error",
-          })
+          ElMessage.error("连接失败，请重试！");
           router.push("/user");
         }
         return;
@@ -164,7 +149,7 @@ export default {
             data.expire
           );
           this.session = data.im_session;
-          this.loading=false
+          this.loading = false;
           //暂停定时器
           this.stopInterval();
           this.connectWebSocket();
@@ -173,7 +158,6 @@ export default {
           if (this.cnt > 30) {
             //暂停定时器
             this.stopInterval();
-            //confirm("连接失败，请重试！");
             ElMessage.error("连接失败，请重试！");
             router.push("/user");
           }
@@ -188,36 +172,40 @@ export default {
       // 当前用户消息
       if (nowUser) {
         // nowUser 表示是否显示当前用户发送的聊天消息，绿色气泡
-        html =
-          '<div class="el-row" style="padding: 5px 0">\n' +
-          '  <div class="el-col el-col-22" style="text-align: right; padding-right: 10px">\n' +
-          '    <div class="tip left">' +
-          text +
-          "</div>\n" +
-          "  </div>\n" +
-          '  <div class="el-col el-col-2">\n' +
-          '  <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">\n' +
-          '    <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;">\n' +
-          "  </span>\n" +
-          "  </div>\n" +
-          "</div>";
+        html = `
+          <div class="message-row message-row-right">
+            <div class="message-content message-content-right">
+              ${text}
+            </div>
+            <div class="message-avatar">
+              <img src="${this.circleUrl}" alt="Avatar">
+            </div>
+          </div>
+        `;
       } else if (remoteUser) {
         // remoteUser表示远程用户聊天消息，蓝色的气泡
-        html =
-          '<div class="el-row" style="padding: 5px 0">\n' +
-          '  <div class="el-col el-col-2" style="text-align: right">\n' +
-          '  <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;">\n' +
-          '    <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;">\n' +
-          "  </span>\n" +
-          "  </div>\n" +
-          '  <div class="el-col el-col-22" style="text-align: left; padding-left: 10px">\n' +
-          '    <div class="tip right">' +
-          text +
-          "</div>\n" +
-          "  </div>\n" +
-          "</div>";
+        html = `
+          <div class="message-row message-row-left">
+            <div class="message-avatar">
+              <img src="${this.circleUrl}" alt="Avatar">
+            </div>
+            <div class="message-content message-content-left">
+              ${text}
+            </div>
+          </div>
+        `;
       }
       this.content += html;
+      // 滚动到底部
+      this.scrollToBottom();
+    },
+    scrollToBottom() {
+      setTimeout(() => {
+        const chatMessages = document.querySelector('.chat-messages');
+        if (chatMessages) {
+          chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+      }, 100);
     },
     aesEncrypt(text, password, iv) {
       // CryptoJS使用WordArray而不是Buffer，所以我们需要将密码和IV转换为WordArray
@@ -246,9 +234,6 @@ export default {
       const ivData = CryptoJS.enc.Utf8.parse(iv);
 
       // Base64 解码加密数据
-      // 注意：CryptoJS.enc.Base64.parse 实际上是用于将WordArray转换为Base64字符串的，
-      // 对于从Base64字符串解码，应该使用 CryptoJS.enc.Base64.parse(CryptoJS.enc.Base64.stringify(someWordArray))，
-      // 但在这里我们直接使用字符串作为输入，因为encryptedData已经是Base64编码的字符串。
       try {
         const decrypted = CryptoJS.AES.decrypt(encryptedData, key, {
           iv: ivData,
@@ -275,15 +260,15 @@ export default {
       let _this = this;
       if (typeof WebSocket == "undefined") {
         console.log("浏览器不支持WebSocket");
+        ElMessage.error("浏览器不支持WebSocket");
       } else {
         console.log("浏览器支持WebSocket");
-        let socketUrl =
+        let socketUrl = 
           "wss://tx.ljsea.top/im/ws?to_user_id=" +
           this.to_user_id +
           "&token=" +
           this.tokenData.token;
 
-        // console.log("socketUrl:", socketUrl);
         if (this.socket != null) {
           this.socket.close();
           this.socket = null;
@@ -292,31 +277,22 @@ export default {
         this.socket = new WebSocket(socketUrl);
         //打开事件
         this.socket.onopen = function () {
-          this.loading=false
-          //alert("连接成功");
-          ElMessage({
-            message: "连接成功",
-            type: "success",
-          })
+          _this.loading = false;
+          ElMessage.success("连接成功");
         };
         this.socket.onerror = (error) => {
           console.error("WebSocket Error:", error);
+          _this.loading = false;
+          ElMessage.error("连接出错");
         };
         //关闭事件
         this.socket.onclose = function () {
-          //alert("连接已关闭!");
-          ElMessage({
-            message: "连接已关闭",
-            type: "error",
-          })
+          ElMessage.error("连接已关闭");
           router.push("/user");
         };
         //  浏览器端收消息，获得从服务端发送过来的文本消息
         this.socket.onmessage = async function (msg) {
-          //console.log("收到数据====" + msg.data);
-          let data = JSON.parse(msg.data); // 对收到的json数据进行解析， 类似这样的：
-          //console.log("收到数据====" + data);
-          // 如果服务器端发送过来的json数据
+          let data = JSON.parse(msg.data); // 对收到的json数据进行解析
           if (data.type == "msg") {  // 如果是消息类型，解密消息内容
             data.data = await _this.decryptAES(
               data.data,
@@ -324,15 +300,10 @@ export default {
               _this.imKey
             );
             _this.messages.push(data);
-            //console.log("收到数据====" + msg.data);
             // 构建消息内容
             _this.createContent(_this.to_user_name, null, data.data);
-          }else if (data.type == "offline"){
-            //alert("对方已下线");
-            ElMessage({
-              message: "对方已下线",
-              type: "error",
-            })
+          } else if (data.type == "offline") {
+            ElMessage.error("对方已下线");
             _this.socket.close();
             router.push("/user");
           }
@@ -344,38 +315,191 @@ export default {
   mounted() {
     this.to_user_id = localStorage.getItem("to_user_id");
     this.to_user_name = localStorage.getItem("to_user_name");
-    this.chatUser = this.to_user_name;
-    //console.log("to_user_id:", this.to_user_id, this.to_user_name);
+    this.chatUser = this.to_user_name || "未知用户";
     this.startInterval();
-
-    //setTimeout(() => this.loading=false, 3000);
-
-       //this.connectWebSocket();
   },
   // 生命周期钩子,在组件卸载之前被调用
   onUnmounted() {
     this.stopInterval();
-    this.socket.close();
+    if (this.socket) {
+      this.socket.close();
+    }
     this.loading = false;
   },
 };
 </script>
-  <style>
-.tip {
-  color: white;
-  text-align: center;
-  border-radius: 10px;
-  font-family: sans-serif;
-  padding: 10px;
-  width: auto;
-  display: inline-block !important;
-  display: inline;
+
+<style scoped>
+.page-container {
+  width: 100%;
+  height: 100%;
 }
-.right {
-  background-color: deepskyblue;
+
+.page-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  border-radius: 8px;
 }
-.left {
-  background-color: forestgreen;
+
+.page-card :deep(.el-card__body) {
+  flex: 1;
+  overflow: hidden;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.page-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chat-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #f5f7fa;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.chat-header {
+  background: #ffffff;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  align-items: center;
+}
+
+.chat-user-info {
+  display: flex;
+  align-items: center;
+}
+
+.chat-user-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.chat-messages {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.message-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.message-row-left {
+  justify-content: flex-start;
+}
+
+.message-row-right {
+  justify-content: flex-end;
+}
+
+.message-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.message-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.message-content {
+  max-width: 70%;
+  padding: 10px 14px;
+  border-radius: 18px;
+  word-wrap: break-word;
+  line-height: 1.4;
+}
+
+.message-content-left {
+  background: #ffffff;
+  border-bottom-left-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.message-content-right {
+  background: #409eff;
+  color: #ffffff;
+  border-bottom-right-radius: 4px;
+  box-shadow: 0 1px 2px rgba(64, 158, 255, 0.3);
+}
+
+.chat-input-area {
+  background: #ffffff;
+  padding: 16px;
+  border-top: 1px solid #e4e7ed;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chat-input-area :deep(.el-textarea) {
+  width: 100%;
+}
+
+.chat-input-area :deep(.el-textarea__inner) {
+  border-radius: 8px;
+  resize: none;
+}
+
+.chat-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 滚动条样式 */
+.chat-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 </style>
-  
\ No newline at end of file
diff --git a/src/views/ShellList.vue b/src/views/ShellList.vue
index 4a1ec0e..2771b41 100644
--- a/src/views/ShellList.vue
+++ b/src/views/ShellList.vue
@@ -1,7 +1,7 @@
 <script>
 import router from "@/router/index.js";
 import { ElMessage } from "element-plus";
-
+import { Refresh, Plus, Edit, Delete, Monitor, Operation } from "@element-plus/icons-vue";
 
 import { getConfigShellListService } from "@/api/shell.js";
 import { addConfigShellService } from "@/api/shell.js";
@@ -12,6 +12,14 @@ import { UpdateMonitorDeviceInfoService } from "@/api/tool.js";
 import { DelMonitorDeviceInfoService } from "@/api/tool.js";
 
 export default {
+  components: {
+    Refresh,
+    Plus,
+    Edit,
+    Delete,
+    Monitor,
+    Operation
+  },
   data() {
     return {
       ip: "",
@@ -26,8 +34,8 @@ export default {
       ConfigFileCurrentPageData: [],
       pageSize: 10,
       currentPage: 1,
-      upload_file: null, //文件上传
-      file_md5: "", //文件上传的md5
+      upload_file: null,
+      file_md5: "",
       addForm: {
         shell_name: "",
         shel_content: "",
@@ -36,7 +44,6 @@ export default {
       serverList: [
         { label: "家里服务器", value: "home_server" },
         { label: "腾讯服务器", value: "tx_vp_server" },
-        // { label: "阿里云服务器", value: "aliyun_vp_server" },
         { label:"azure服务器", value:"azure_vp_server" },
         { label: '阿里云成都服务器', value: "aliyun_chengdu_vp_server"}
       ],
@@ -44,7 +51,6 @@ export default {
       monitor_add_update_visible: false,
       monitor_update_add: {},
 
-
       role: "",
       tokenData: {
         token: localStorage.getItem("token"),
@@ -58,14 +64,11 @@ export default {
     };
   },
 
-  // methods 是一些用来更改状态与触发更新的函数
-  // 它们可以在模板中作为事件处理器绑定
   methods: {
     async getConfigFileList() {
       let result = {};
       this.loading = true;
       try {
-        //判断search_id是字符串还是数字
         let req = {
           token: this.tokenData.token,
           type: "all",
@@ -82,10 +85,8 @@ export default {
       }
       for(let i = 0;i<this.tableData.length;i++) {
         this.tableData[i].UpdatedAt = this.formattedTime(this.tableData[i].UpdatedAt);
-        this.tableData[i].CreatedAt = this.formattedTime(this.tableData[i].CreatedAt)
-      //console.log('this.ConfigFileList:',this.ConfigFileList);
+        this.tableData[i].CreatedAt = this.formattedTime(this.tableData[i].CreatedAt);
       }
-        
       this.currentPageData();
     },
     addConfigFileV() {
@@ -110,8 +111,12 @@ export default {
           ElMessage.success("添加成功");
           this.getConfigFileList();
           this.addConfigFileVisible = false;
+          this.addForm = {
+            shell_name: "",
+            shell_content: "",
+            server: ""
+          };
         } else {
-          //alert("添加失败");
           ElMessage.error("添加失败");
         }
       } catch (e) {
@@ -121,10 +126,6 @@ export default {
     async updateConfigShellInfo() {
       let result = {};
       try {
-        let d={}
-        // for (var key in this.ConfigShellUpdateForm) {
-        //   d[key] = this.ConfigShellUpdateForm[key];
-        // }
         let req = {
           token: this.tokenData.token,
           shells: [{"id":this.ConfigShellUpdateForm.ID,"shell_result":this.ConfigShellUpdateForm.ShellResult,"status":this.ConfigShellUpdateForm.Status}],
@@ -141,7 +142,6 @@ export default {
       }
     },
     async deleteConfigFile(index) {
-      // 是否删除
       let isDelete = confirm("是否删除?");
       if (!isDelete) {
         return;
@@ -153,7 +153,6 @@ export default {
           token: this.tokenData.token,
           shells: [{"id":this.ConfigFileCurrentPageData[index].ID}],
         };
-        console.log("req:", req);
         result = await deleteConfigShellService(req);
         if (result.code == 0) {
           ElMessage.success("删除成功");
@@ -177,16 +176,7 @@ export default {
       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     },
     async updateConfigShell(index) {
-      //console.log("index:", index);
       let cf = this.ConfigFileCurrentPageData[index];
-    //   console.log("cf:", cf);
-    //   let req = {
-    //     token: this.tokenData.token,
-    //     id: cf.ID,
-    //     type: "one",
-    //   };
-    //   let result = await getConfigShellListService(req);
-    //   let data = result.data;
       this.ConfigShellUpdateForm = cf;
       this.updateDialogVisible = true;
     },
@@ -201,9 +191,7 @@ export default {
       this.addForm.server = cf.Server;
 
       await this.addConfigFile();
-
     },
-
     onSubmit() {
       getConfigFileList();
     },
@@ -214,31 +202,13 @@ export default {
       );
     },
     handleSizeChange(val) {
-      //console.log(`每页 ${val} 条`);
       this.pageSize = val;
       this.currentPageData();
     },
     handleCurrentChange(val) {
-      //console.log(`当前页: ${val}`);
       this.currentPage = val;
       this.currentPageData();
     },
-
-    async displayMyInfo() {
-      await this.getMyUserInfo(this.tokenData.user_id);
-      this.updateDialogVisible = true;
-    },
-    async displayUserInfo(id) {
-      await this.getMyUserInfo(id);
-      this.updateDialogVisible = true;
-    },
-
-    handleMenuSelect(val) {
-      router.push(val);
-    },
-    toVideoList() {
-      router.push("/videoList");
-    },
     async getMonitorDeviceList(){
       try {
         let req = {
@@ -248,8 +218,7 @@ export default {
         let result = await GetMonitorDeviceInfoService(req);
         if (result.code === 0) {
           this.monitor_list = result.data;
-          console.log("monitor_list:", this.monitor_list);
-          this.dialogVisible = true; // 打开设备监控对话框
+          this.dialogVisible = true;
         } else {
           ElMessage.error("获取设备列表失败");
         }
@@ -259,15 +228,14 @@ export default {
     },
     updateMonitorShow(index) {
       this.monitor_add_update_visible = true;
-      this.monitor_update_add = { ...this.monitor_list[index] }; // 深拷贝，避免直接修改原数据
+      this.monitor_update_add = { ...this.monitor_list[index] };
     },
-    //确定添加或修改设备
     async addUpdateMonitor(){
       let req = {
         "token": this.tokenData.token,
         "devices": [this.monitor_update_add],
       };
-      req.devices[0].expire =parseInt(req.devices[0].expire);
+      req.devices[0].expire = parseInt(req.devices[0].expire);
       try{
         let result = await UpdateMonitorDeviceInfoService(req);
         if (result.code === 0) {
@@ -276,12 +244,10 @@ export default {
         } else {
           ElMessage.error("设备信息更新失败");
         }
-        
       }catch (e) {
         console.log(e);
       }
     },
-
     async DelMonitor(index) {
       let isDelete = confirm("是否删除?");
       if (!isDelete) {
@@ -292,7 +258,6 @@ export default {
         devices: [this.monitor_list[index]],
       };
       try {
- 
         let result = await DelMonitorDeviceInfoService(req);
         if (result.code === 0) {
           ElMessage.success("设备删除成功");
@@ -304,420 +269,327 @@ export default {
         console.log(e);
       }
     },
-
-
-    // 修改条纹颜色
     tableRowClassName({ row, rowIndex }) {
       switch (row.Status) {
-            case 0:
-            return 'rgba(243, 243, 248, 0.1)'; // 浅蓝色
-            case 1:
-            return 'rgba(0, 0, 255, 0.5)'; // 中等深度蓝色
-            case 2:
-            return 'rgba(0, 0, 255, 0.9)'; // 深蓝色
-            default:
-            return 'transparent'; // 默认透明
-        }
+        case 0:
+          return 'rgba(243, 243, 248, 0.1)';
+        case 1:
+          return 'rgba(0, 0, 255, 0.5)';
+        case 2:
+          return 'rgba(0, 0, 255, 0.9)';
+        default:
+          return 'transparent';
+      }
     },
   },
 
-  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
-  // 例如这个函数就会在组件挂载完成后被调用
   async mounted() {
     let now = new Date();
     if (localStorage.getItem("token") === null) {
       router.push("/login");
     }
     await this.getConfigFileList();
-    //await this.getMyUserInfo(localStorage.getItem("userId"));
   },
 };
 </script>
 
 <template>
-  <div>
-    <el-container style="min-height: calc(100vh - 40px); background: #fff; border-radius: 4px;">
-      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
-        >命令分发</el-header
-      >
-      <el-container>
-        <el-main>
-          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
-            <el-form-item>
-              <el-dialog
-                v-model="updateDialogVisible"
-                title="编辑配置"
-                width="60%"
-                :before-close="handleClose"
-              >
-                <!-- 内容主体区域 -->
-                <el-form
-                  ref="updateFormRef"
-                  :model="ConfigShellUpdateForm"
-                  :rules="UserUpdateFormRules"
-                  label-width="70px"
-                >
-                  <!-- row -->
-                  <el-row>
-                    <el-col :span="12">
-                      <el-form-item label="ID">
-                        <el-input
-                          v-model="ConfigShellUpdateForm.ID"
-                          disabled
-                        ></el-input>
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                      <el-form-item label="名称">
-                        <el-input
-                          v-model="ConfigShellUpdateForm.ShellName"
-                          disabled
-                        ></el-input>
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="32">
-                      <el-form-item label="内容">
-                        <el-input
-                          v-model="ConfigShellUpdateForm.ShellContent"
-                          disabled
-                          type="textarea"
-                          style="width: 512px"
-                        ></el-input>
-                      </el-form-item>
-                    </el-col>
-                    <el-col>
-                      <el-form-item label="运行结果" prop="shell_result">
-                        <el-input
-                          type="textarea"
-                          v-model="ConfigShellUpdateForm.ShellResult"
-                          style="width: 600px"
-                          :autosize="{ minRows: 4, maxRows: 8 }"
-                        />
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                </el-form>
+  <div class="page-container">
+    <el-card class="page-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <span class="page-title">命令分发</span>
+          </div>
+          <div class="header-actions">
+            <el-button type="primary" @click="addConfigFileV()" :icon="Plus">
+              创建命令
+            </el-button>
+            <el-button type="primary" @click="getMonitorDeviceList()" :icon="Monitor">
+              设备监控
+            </el-button>
+            <el-button @click="getConfigFileList()" :icon="Refresh">
+              刷新
+            </el-button>
+          </div>
+        </div>
+      </template>
 
-                <!-- 底部区域 -->
-                <template #footer>
-                  <span class="dialog-footer">
-                    <el-button @click="updateDialogVisible = false"
-                      >取消</el-button
-                    >
-                    <el-button type="primary" @click="updateConfigShellInfo()"
-                      >确定</el-button
-                    >
-                  </span>
-                </template>
-              </el-dialog>
-            </el-form-item>
-
-            <!-- 表单 -->
-            <el-form :inline="true" :model="tokenData" class="demo-form-inline">
-              <el-form-item>
-                <el-button
-                  class="el-button--danger"
-                  type="primary"
-                  :disabled="loading"
-                  @click="getConfigFileList()"
-                  >查询</el-button
-                >
-              </el-form-item>
-              <el-form-item>
-                <el-button
-                  class="el-button--danger"
-                  type="primary"
-                  @click="addConfigFileV()"
-                  >创建命令</el-button
-                >
-              </el-form-item>
-              <el-form-item>
-                <el-button
-                  class="el-button--danger"
-                  type="primary"
-                  @click="getMonitorDeviceList()"
-                  >设备监控</el-button
-                >
-              </el-form-item>
-            </el-form>
-          </el-form>
-
-          <el-dialog
-            v-model="addConfigFileVisible"
-            title="创建命令"
-            width="50%"
-            :before-close="handleClose"
-          >
-            <!-- 内容主体区域 -->
-            <el-form
-              ref="addFormRef"
-              :model="addForm"
-              :rules="addFormRules"
-              label-width="70px"
-            >
-              <el-row>
-                <el-form-item label="名称" prop="shell_name">
-                  <el-input
-                    v-model="addForm.shell_name"
-                    autocomplete="on"
-                  ></el-input>
-                </el-form-item>
-              </el-row>
-              <el-row>
-                <el-form-item label="内容" prop="file_path">
-                  <el-input
-                    type="textarea"
-                    v-model="addForm.shell_content"
-                    autocomplete="on"
-                    style="width: 600px"
-                    :autosize="{ minRows: 4, maxRows: 8 }"
-                  ></el-input>
-                </el-form-item>
-              </el-row>
-              <el-row>
-                <el-form-item label="服务器" prop="server">
-                  <el-select v-model="addForm.server" filterable allow-create>
-                      <el-option
-                        v-for="item in serverList"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      ></el-option>
-                    </el-select>
-                </el-form-item>
-              </el-row>
-            </el-form>
-            <!-- 底部区域 -->
-            <template #footer>
-              <span class="dialog-footer">
-                <el-button @click="addConfigFileVisible = false"
-                  >取消</el-button
-                >
-                <el-button type="primary" @click="addConfigFile()"
-                  >确定</el-button
-                >
-              </span>
-            </template>
-          </el-dialog>
-          
-
-          <el-dialog
-            v-model="monitor_add_update_visible"
-            title="编辑监控"
-            width="50%"
-            @close="handleClose">
-
-            <el-form
-              ref="monitorUpdateFormRef"
-              :model="monitor_update_add"
-              :rules="UserUpdateFormRules"
-              label-width="70px"  
-              >
-            
-              <el-row>
-                <el-form-item label="设备" prop="id">
-                  <el-input
-                    v-model="monitor_update_add.id"
-                  ></el-input>
-                  </el-form-item>
-             </el-row>
-             <el-row>
-                <el-form-item label="状态" prop="status">
-                  <el-select v-model="monitor_update_add.status">
-                    <el-option label="在线" value="1"></el-option>
-                    <el-option label="离线" value="0"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-row>
-              <el-row>
-                <el-form-item label="过期时间" prop="expire">
-                  <el-input 
-                    v-model="monitor_update_add.expire"
-                    oninput="this.value = this.value.replace(/[^0-9]/g, '')"
-                  ></el-input>
-                </el-form-item>
-              </el-row>
-            </el-form>
-            <!-- 底部区域 -->
-             <template #footer>
- 
-              <span class="dialog-footer">
-                <el-button @click="monitor_add_update_visible = false"
-                  >取消</el-button
-                >
-                <el-button type="primary" @click="addUpdateMonitor()"
-                  >确定</el-button
-                >
-              </span>
-              </template> 
-          </el-dialog>
-
-
-          <el-dialog
-            v-model="dialogVisible"
-            title="设备状态监控"
-            width="50%"
-            @close="handleClose"
-          >
-          <el-button type="primary" @click="monitor_add_update_visible = true">添加</el-button>
-              <el-table
-                :data="monitor_list"
-                stripe
-                width="90%"
-                fit
-              >
-                <el-table-column prop="id" label="设备" width="150"></el-table-column>
-                <el-table-column prop="status" label="状态" width="150">
-                  <template #default="scope">
-                    <el-tag
-                      :type="scope.row.status === '1' ? 'success' : 'danger'"
-                      >{{ scope.row.status === "1" ? '在线' : '离线' }}</el-tag
-                    >
-                  </template>
-                </el-table-column>
-                <el-table-column prop="expire" label="过期时间" width="150">
-                </el-table-column>  
-                            <el-table-column label="操作" width="270">
-              <template #default="scope">
-                <el-button
-                  type="primary"
-                  size="mini"
-                  @click.prevent="updateMonitorShow(scope.$index)"
-                  >编辑</el-button
-                >
-                <el-button
-                  type="primary"
-                  size="mini"
-                  @click.prevent="DelMonitor(scope.$index)"
-                  >删除</el-button
-                >
-              </template>
-            </el-table-column>
-              </el-table>
-            <template #footer>
-              <el-button @click="dialogVisible = false">取消</el-button>
-            </template>
-          </el-dialog>
-
-          <!-- 表格  :row-style="this.tableRowClassName"-->
-          <el-table :data="ConfigFileCurrentPageData" width="100%" v-loading="loading">
-            :row-style="tableRowClassName"
-            <el-table-column prop="ID" label="id" width="80"></el-table-column>
-            <el-table-column
-              prop="ShellName"
-              label="命令名称"
-              width="120"
-            ></el-table-column>
-            <el-table-column
-              prop="ShellContent"
-              label="命令内容"
-              show-overflow-tooltip
-              width="120"
-            ></el-table-column>
-            <el-table-column
-              prop="Status"
-              label="状态"
-              width="100"
-            >
-              <template #default="scope">
-                  <el-tag
-                    v-if="scope.row.Status === 0"
-                    >任务提交</el-tag
-                  >
-                  <el-tag
-                    v-if="scope.row.Status === 1"
-                    type="warning"
-                  >正在运行</el-tag>
-                  <el-tag
-                    v-if="scope.row.Status === 2"
-                    type="success"
-                    >执行成功</el-tag>
-                    <el-tag
-                    v-if="scope.row.Status === 3"
-                    type="danger"
-                    >执行出错</el-tag>
-              </template>
-          </el-table-column>
-          <el-table-column
-              prop="ShellRuntime"
-              label="SR"
-              width="50"
-            >
-            <template #default="scope"> 
-              <!-- 转为秒两位小数-->
-                {{ Math.round(scope.row.ShellRuntime * 100) / 100 }}
+      <div class="table-wrapper">
+        <el-table :data="ConfigFileCurrentPageData" style="width: 100%" v-loading="loading"
+          element-loading-text="加载中..."
+          element-loading-background="rgba(240, 242, 245, 0.8)"
+          stripe
+          :row-class-name="tableRowClassName">
+          <el-table-column prop="ID" label="ID" width="80"></el-table-column>
+          <el-table-column prop="ShellName" label="命令名称" min-width="150" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="ShellContent" label="命令内容" min-width="200" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="Status" label="状态" width="100">
+            <template #default="scope">
+              <el-tag :type="scope.row.Status === 0 ? 'info' : scope.row.Status === 1 ? 'warning' : 'success'">
+                {{ scope.row.Status === 0 ? '待执行' : scope.row.Status === 1 ? '执行中' : '已完成' }}
+              </el-tag>
             </template>
           </el-table-column>
-             <el-table-column
-              prop="ShellDuration"
-              label="SD"
-              width="50"
-            >
-            <template #default="scope"> 
-              <!-- 转为秒两位小数-->
-                {{ Math.round(scope.row.ShellDuration * 100) / 100 }}
+          <el-table-column prop="CreatedAt" label="创建时间" min-width="160"></el-table-column>
+          <el-table-column prop="UpdatedAt" label="更新时间" min-width="160"></el-table-column>
+          <el-table-column label="操作" width="250" fixed="right">
+            <template #default="scope">
+              <el-button type="primary" size="small" @click.prevent="updateConfigShell(scope.$index)" :icon="Edit">
+                编辑
+              </el-button>
+              <el-button type="danger" size="small" @click.prevent="deleteConfigFile(scope.$index)" :icon="Delete">
+                删除
+              </el-button>
+              <el-button type="success" size="small" @click.prevent="createAgain(scope.$index)" :icon="Operation">
+                再次执行
+              </el-button>
             </template>
           </el-table-column>
-            
-            <el-table-column
-              prop="Server"
-              label="服务器"
-              width="100"
-            ></el-table-column>
-            <el-table-column
-              prop="CreatedAt"
-              label="创建时间"
-              width="160"
-            ></el-table-column>
-            <el-table-column
-              prop="UpdatedAt"
-              label="上次更新"
-              width="160"
-            ></el-table-column>
-            <!-- <el-table-column
-              prop="AuthID"
-              label="创建用户ID"
-              width="40"
-            ></el-table-column> -->
-            <el-table-column label="操作" width="270">
-              <template #default="scope">
-                <el-button
-                  type="primary"
-                  size="mini"
-                  @click.prevent="updateConfigShell(scope.$index)"
-                  >编辑</el-button
-                >
-                <el-button
-                  type="primary"
-                  size="mini"
-                  @click.prevent="deleteConfigFile(scope.$index)"
-                  >删除</el-button
-                >
-                <el-button
-                  type="primary"
-                  size="mini"
-                  @click.prevent="createAgain(scope.$index)"
-                  >再次执行</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-          <!-- 分页条 -->
-          <!-- Pagination 分页 -->
+        </el-table>
+
+        <div class="pagination-wrapper">
           <el-pagination
             background
             layout="total,sizes, prev, pager, next, jumper"
+            :page-sizes="[10, 20, 50, 100]"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :total="tableData.length"
           ></el-pagination>
-        </el-main>
-      </el-container>
-    </el-container>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 编辑命令对话框 -->
+    <el-dialog
+      v-model="updateDialogVisible"
+      title="编辑配置"
+      width="60%"
+      :close-on-click-modal="false"
+      top="5vh"
+    >
+      <el-form
+        ref="updateFormRef"
+        :model="ConfigShellUpdateForm"
+        :rules="UserUpdateFormRules"
+        label-width="80px"
+        class="form-dialog"
+      >
+        <el-row gutter="20">
+          <el-col :span="12">
+            <el-form-item label="ID">
+              <el-input v-model="ConfigShellUpdateForm.ID" disabled></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称">
+              <el-input v-model="ConfigShellUpdateForm.ShellName" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="内容">
+              <el-input v-model="ConfigShellUpdateForm.ShellContent" disabled type="textarea" :rows="3"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="运行结果">
+              <el-input type="textarea" v-model="ConfigShellUpdateForm.ShellResult" :rows="6"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="updateDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="updateConfigShellInfo()">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 创建命令对话框 -->
+    <el-dialog
+      v-model="addConfigFileVisible"
+      title="创建命令"
+      width="50%"
+      :close-on-click-modal="false"
+      top="5vh"
+    >
+      <el-form
+        ref="addFormRef"
+        :model="addForm"
+        :rules="addFormRules"
+        label-width="80px"
+        class="form-dialog"
+      >
+        <el-form-item label="名称">
+          <el-input v-model="addForm.shell_name" placeholder="请输入命令名称"></el-input>
+        </el-form-item>
+        <el-form-item label="内容">
+          <el-input type="textarea" v-model="addForm.shell_content" placeholder="请输入命令内容" :rows="4"></el-input>
+        </el-form-item>
+        <el-form-item label="服务器">
+          <el-select v-model="addForm.server" filterable allow-create placeholder="选择服务器">
+            <el-option v-for="item in serverList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="addConfigFileVisible = false">取消</el-button>
+          <el-button type="primary" @click="addConfigFile()">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 设备监控对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      title="设备状态监控"
+      width="70%"
+      @close="handleClose"
+      top="5vh"
+    >
+      <el-button type="primary" @click="monitor_add_update_visible = true" style="margin-bottom: 16px;">
+        添加设备
+      </el-button>
+      <el-table :data="monitor_list" stripe style="width: 100%">
+        <el-table-column prop="id" label="设备" width="150"></el-table-column>
+        <el-table-column prop="status" label="状态" width="150">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
+              {{ scope.row.status === '1' ? '在线' : '离线' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="expire" label="过期时间" width="150"></el-table-column>
+        <el-table-column label="操作" width="180" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" size="small" @click.prevent="updateMonitorShow(scope.$index)" :icon="Edit">
+              编辑
+            </el-button>
+            <el-button type="danger" size="small" @click.prevent="DelMonitor(scope.$index)" :icon="Delete">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <el-button @click="dialogVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 添加/编辑设备监控对话框 -->
+    <el-dialog
+      v-model="monitor_add_update_visible"
+      title="添加/编辑设备监控"
+      width="50%"
+      @close="handleClose"
+      top="5vh"
+    >
+      <el-form
+        ref="monitorUpdateFormRef"
+        :model="monitor_update_add"
+        :rules="UserUpdateFormRules"
+        label-width="80px"
+        class="form-dialog"
+      >
+        <el-form-item label="设备">
+          <el-input v-model="monitor_update_add.id" placeholder="设备ID"></el-input>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="monitor_update_add.status">
+            <el-option label="在线" value="1"></el-option>
+            <el-option label="离线" value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="过期时间">
+          <el-input v-model="monitor_update_add.expire" placeholder="过期时间" oninput="this.value = this.value.replace(/[^0-9]/g, '')"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="monitor_add_update_visible = false">取消</el-button>
+          <el-button type="primary" @click="addUpdateMonitor()">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
-<style>
-.blueRowbg {
-  background: "#488aff";
+
+<style scoped>
+.page-container {
+  width: 100%;
+  height: 100%;
 }
-</style>
\ No newline at end of file
+
+.page-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  border-radius: 8px;
+}
+
+.page-card :deep(.el-card__body) {
+  flex: 1;
+  overflow: hidden;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.page-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-wrapper :deep(.el-table) {
+  border-radius: 4px;
+}
+
+.pagination-wrapper {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.form-dialog {
+  padding: 10px 0;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>