Эх сурвалжийг харах

🎨 style(item): Improve edit history dialog styling and formatting

Shinohara Haruna 6 сар өмнө
parent
commit
5df96af725

+ 36 - 7
smsb-plus-ui/src/views/smsb/item/index.vue

@@ -108,14 +108,23 @@
         <!-- 编辑历史弹窗 -->
         <el-dialog title="编辑历史" v-model="editHistoryDialog.visible" width="600px" append-to-body>
           <el-table :data="editHistoryDialog.list" size="small" style="width: 100%">
-            <el-table-column prop="operName" label="操作人" width="120" />
-            <el-table-column label="操作">
+            <el-table-column prop="operName" label="操作人" width="120">
               <template #default="scope">
-                <div v-html="renderOperParam(scope.row, scope.$index, editHistoryDialog.list, editHistoryDialog.type)">
+                <span class="edit-history-user">{{ scope.row.operName }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作参数" min-width="260">
+              <template #default="scope">
+                <div class="edit-history-param"
+                  v-html="renderOperParam(scope.row, scope.$index, editHistoryDialog.list, editHistoryDialog.type)">
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="operTime" label="操作时间" width="180" />
+            <el-table-column prop="operTime" label="操作时间" width="180">
+              <template #default="scope">
+                <span class="edit-history-time">{{ scope.row.operTime }}</span>
+              </template>
+            </el-table-column>
           </el-table>
         </el-dialog>
       </el-table>
@@ -355,7 +364,7 @@ function diffSelectedFiles(prev: any, curr: any, key: string) {
 
 function renderOperParam(row: EditHistoryVo, index: number, list: EditHistoryVo[], type: 1 | 2) {
   if (type === 1) {
-    return row.operParam;
+    return `<span style='white-space:pre-line;'>${row.operParam}</span>`;
   }
   // 分屏组
   let curr, prev;
@@ -372,14 +381,18 @@ function renderOperParam(row: EditHistoryVo, index: number, list: EditHistoryVo[
   const screenNames = ['第一屏', '第二屏', '第三屏', '第四屏'];
   if (index === 0) {
     // 第一条记录,全部按“创建”显示
-    return '创建';
+    return `<span style='color:#409EFF;font-weight:bold;'>创建</span>`;
   }
   const keys = ['selectedFiles1', 'selectedFiles2', 'selectedFiles3', 'selectedFiles4'];
   const diffs = keys
     .map((key, idx) => {
       const diff = diffSelectedFiles(prev, curr, key);
       if (diff && diff !== '无变化') {
-        return `${screenNames[idx]}:${diff}`;
+        // 仅“新增”“减少”文字加色,文件名不加色
+        let styled = diff
+          .replace(/新增:/g, "<span style='color:#67C23A;font-weight:bold;'>新增:</span>")
+          .replace(/减少:/g, "<span style='color:#F56C6C;font-weight:bold;'>减少:</span>");
+        return `<span style='font-weight:bold;'>${screenNames[idx]}</span>:${styled}`;
       }
       return '';
     })
@@ -801,4 +814,20 @@ onActivated(() => {
   justify-content: center;
   align-items: center;
 }
+
+.edit-history-param {
+  line-height: 1.8;
+  font-size: 14px;
+  word-break: break-all;
+}
+
+.edit-history-user {
+  font-size: 18px;
+  color: #222;
+}
+
+.edit-history-time {
+  font-size: 14px;
+  color: #999;
+}
 </style>