refactor: 优化多个页面UI样式与举报弹窗功能

.trae/rules/git-commit-message.md

+---
+alwaysApply: true
+scene: git_message
+---
+
+在此处编写规则，自定义 AI 生成提交信息的风格。
+必须简洁明了，一眼能看出完成或修改或优化的内容，不要写详细描述，不要超过两行。
\ No newline at end of file

src/components/textEditor.vue

@@ -2,6 +2,7 @@
     <!-- 简单版的图文编辑器 可以上传 截图上传图片 能实现简单的图文编辑功能 -->
     <div class="textEditor">
       <div
+        v-if="showViewImage"
         class="rowFlex columnCenter textEditorTitle"
         @click.stop="watchImage"
       >
@@ -34,7 +35,9 @@
         title="查看大图"
         append-to-body
         center
-         top="80%"
+        width="600px"
+        top="0"
+        custom-class="watchImageDialog"
         :visible.sync="showScoleImage"
       >
         <div class="showScoleImageContent columnFlex allCenter" v-html="remark"></div>
@@ -46,7 +49,24 @@
   import { base64toFile } from '@/utils/index'
   export default {
     name: 'textEditor',
-    props: ['remark', 'contenteditable', 'domid'], // remark 原来的图文内容 contenteditable 是否可编辑  domid  编辑器的 DomId resultReamrk 方法吐出最后的编辑好的内容
+    props: {
+      remark: {
+        type: String,
+        default: ''
+      },
+      contenteditable: {
+        type: Boolean,
+        default: false
+      },
+      domid: {
+        type: String,
+        default: ''
+      },
+      showViewImage: {
+        type: Boolean,
+        default: true
+      }
+    }, // remark 原来的图文内容 contenteditable 是否可编辑  domid  编辑器的 DomId resultReamrk 方法吐出最后的编辑好的内容
     data() {
       return {
         srcList: [],
@@ -59,7 +79,9 @@
     mounted() {
       this.$nextTick(() => {
         this.chatMessage = document.getElementById(`${this.domid}`)
-        this.remark && this.remark.length > 0 && this.contenteditable ? this.chatMessage.innerHTML = this.remark : ''
+        if (this.remark && this.remark.length > 0 && this.contenteditable && this.chatMessage) {
+          this.chatMessage.innerHTML = this.remark
+        }
       })
     },
     methods: {
@@ -71,9 +93,17 @@
       },
       async watchImage() {
         if (this.remark.trim().length > 0) {
+          if (!this.chatMessage) {
+            this.chatMessage = document.getElementById(`${this.domid}`)
+          }
+          if (this.chatMessage) {
             this.chatMessage.innerHTML = this.remark
+          }
           this.srcList = []
-          const imgList = this.chatMessage.querySelectorAll('img')
+          // 使用临时 div 来解析图片，而不依赖 DOM 元素
+          const tempDiv = document.createElement('div')
+          tempDiv.innerHTML = this.remark
+          const imgList = tempDiv.querySelectorAll('img')
           if (imgList && imgList.length > 0) {
             for (let index = 0; index < imgList.length; index++) {
               this.srcList.push(imgList[index].src)
@@ -171,6 +201,18 @@
     margin-top:10px;
     margin-right: 10px;
   }
+  .watchImageDialog {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: 0 !important;
+    transform: translate(-50%, -50%);
+    max-width: 90vw;
+  }
+  .watchImageDialog .el-dialog__body {
+    max-height: 70vh;
+    overflow-y: auto;
+  }
   .showScoleImageContent{
     width: 100%;
     overflow: auto;
@@ -178,7 +220,7 @@
 
   }
   .showScoleImageContent img{
-      max-width: 80%;
+      max-width: 100%;
       margin-bottom: 20px;
     }
   </style>

src/views/ViolationRecord.vue

 <template>
   <div class="violationRecord">
     <el-form v-loading="loading" class="violationRecordContent" label-width="90px">
+    <div class="flex justify-end">
         <el-button type="primary" size="small" @click="reportPopupShow = true">举报</el-button>
+    </div>
       <div v-if="violationList.length > 0">
         <div v-for="(item, index) in violationList" :key="index" class="contentItem">
           <el-form-item label="违规时间:">
@@ -206,7 +208,7 @@ export default {
 
   .violationRecordContent {
     width: 100%;
-    padding: 20px;
+    padding: 0 20px;
     height: auto;
   }
 

src/views/popup/reportPopup/index.vue

@@ -129,12 +129,21 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="详情" prop="remark" class="detail-form-item">
+            <el-form-item prop="remark" class="detail-form-item">
+              <div slot="label" class="detail-label">
+                <span>详情</span>
+                <span class="view-image-btn" @mousedown.stop.prevent="handleViewImage">
+                  <i class="el-icon-view"></i>
+                  <span>查看大图</span>
+                </span>
+              </div>
               <textEditor
+                ref="textEditorRef"
                 :remark.sync="reportForm.remark"
                 domid="report_content"
                 class="report-editor"
                 :contenteditable="true"
+                :show-view-image="false"
                 @resultReamrk="resultReamrk"
               />
             </el-form-item>
@@ -579,6 +588,15 @@
       resultReamrk(text) {
         // console.log(text, '最后编辑器的内容')
       },
+      handleViewImage() {
+        console.log('handleViewImage clicked')
+        console.log('textEditorRef:', this.$refs.textEditorRef)
+        if (this.$refs.textEditorRef && this.$refs.textEditorRef.watchImage) {
+          this.$refs.textEditorRef.watchImage()
+        } else {
+          console.log('textEditorRef or watchImage not found')
+        }
+      },
       /**
        * 根据 eco_user_list 同步提交字段 eco_user（全部姓名用顿号拼接）
        */
@@ -1007,9 +1025,39 @@
     }
   }
 
+  .detail-form-item {
+    position: relative;
+  }
+
   ::v-deep .detail-form-item {
     .el-form-item__label {
       padding-bottom: 8px;
+      width: 100%;
+    }
+  }
+
+  .detail-label {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    gap: 12px;
+  }
+
+  .view-image-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    color: #00bf8a;
+    font-family: PingFang SC, sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 22px;
+    user-select: none;
+
+    .el-icon-view {
+      font-size: 14px;
     }
   }
   

src/views/roleInfo.vue

@@ -68,30 +68,69 @@ export default {
     height: 100%;
 
     .el-tabs__header {
-      margin: 0;
-      padding: 0 15px;
+      margin: 0px 15px 10px 15px !important;
+      padding: 2px !important;
+      background: #F5F6F7 !important;
+      border-radius: 4px !important;
+      box-sizing: border-box !important;
+      height: auto !important;
+      overflow: visible !important;
+      border: none !important;
+    }
+
+    .el-tabs__nav-wrap {
+      overflow: visible !important;
+      height: auto !important;
+      padding: 0 !important;
+      margin: 0 !important;
+
+      &::after {
+        display: none !important;
+      }
+    }
+
+    .el-tabs__nav {
+      width: 100% !important;
+      display: flex !important;
+      border: none !important;
+      height: auto !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      gap: 2px !important;
     }
 
     .el-tabs__item {
-      height: 40px;
-      line-height: 40px;
-      font-size: 16px;
-      color: #333333;
+      flex: 1 !important;
+      height: 22px !important;
+      line-height: 22px !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      font-family: 'PingFang SC', sans-serif !important;
+      font-size: 13px !important;
+      font-weight: 400 !important;
+      color: #6D7176 !important;
+      text-align: center !important;
+      border-radius: 2px !important;
+      border: none !important;
+      transition: all 0.2s !important;
+      white-space: nowrap !important;
+      overflow: visible !important;
+      text-overflow: unset !important;
 
       &.is-active {
-        color: #3491fa;
-      }
+        background: #FFFFFF !important;
+        color: #131920 !important;
+        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05) !important;
       }
 
-    .el-tabs__active-bar {
-      background-color: #3491fa;
-      height: 3px;
-      border-radius: 1.5px;
+      &:first-child,
+      &:last-child {
+        margin: 0 !important;
+      }
     }
 
-    .el-tabs__nav-wrap::after {
-      height: 1px;
-      background-color: #e4e7ed;
+    .el-tabs__active-bar {
+      display: none !important;
     }
 
     .el-tab-pane {
@@ -100,8 +139,8 @@ export default {
     }
 
     .el-tabs__content {
-      height: calc(100% - 40px);
-      padding: 0 5px 5px;
+      height: calc(100% - 46px);
+      padding: 0;
     }
   }
 }