✨feat(ui): Enhance edit history display with file diff visualization

smsb-plus-ui/src/api/smsb/source/item_type.ts

@@ -1,4 +1,4 @@
-export interface SplitEditHistoryVo {
+export interface EditHistoryVo {
   operName: string;
   operParam: string;
   operTime: string;

smsb-plus-ui/src/views/smsb/item/index.vue

@@ -90,29 +90,34 @@
         <el-table-column label="创建时间" header-align="left" prop="createTime" width="160" />
         <el-table-column label="更新时间" header-align="left" prop="updateTime" width="160" />
         <el-table-column label="操作" header-align="center" class-name="small-padding fixed-width" width="180">
-  <template #default="scope">
-    <el-tooltip content="修改" placement="top">
-      <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
-        v-hasPermi="['source:item:edit']"></el-button>
-    </el-tooltip>
-    <el-tooltip content="删除" placement="top">
-      <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
-        v-hasPermi="['source:item:remove']"></el-button>
-    </el-tooltip>
-    <el-tooltip content="编辑历史" placement="top">
-      <el-button link type="primary" icon="Clock" @click="onShowEditHistory(scope.row)"></el-button>
-    </el-tooltip>
-  </template>
-</el-table-column>
-
-<!-- 编辑历史弹窗 -->
-<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 prop="operParam" label="操作参数" />
-    <el-table-column prop="operTime" label="操作时间" width="180" />
-  </el-table>
-</el-dialog>
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['source:item:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+                v-hasPermi="['source:item:remove']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="编辑历史" placement="top">
+              <el-button link type="primary" icon="Clock" @click="onShowEditHistory(scope.row)"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+
+        <!-- 编辑历史弹窗 -->
+        <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="操作">
+              <template #default="scope">
+                <div 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>
+        </el-dialog>
       </el-table>
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
@@ -307,12 +312,13 @@
 import draggable from 'vuedraggable';
 import { onActivated, reactive } from 'vue';
 import { getEditHistory } from '@/api/smsb/source/item';
-import type { SplitEditHistoryVo, ItemVO, ItemQuery, ItemForm } from '@/api/smsb/source/item_type';
+import type { EditHistoryVo, ItemVO, ItemForm } from '@/api/smsb/source/item_type';
 
 // 编辑历史弹窗数据
 const editHistoryDialog = reactive({
   visible: false,
-  list: [] as SplitEditHistoryVo[],
+  list: [] as EditHistoryVo[],
+  type: 1 as 1 | 2
 });
 
 /**
@@ -324,12 +330,63 @@ function onShowEditHistory(row: ItemVO) {
   editHistoryDialog.list = [];
   // type: 1=轮播组, 2=分屏组
   const type = row.itemType === 1 ? 1 : 2;
-  getEditHistory(row.id, type).then(res => {
+  editHistoryDialog.type = type;
+  getEditHistory(row.id, type).then((res) => {
     console.log('编辑历史数据：', res.data);
     editHistoryDialog.list = res.data || [];
   });
 }
 
+function getFileNameSet(selectedFiles?: any[]): Set<string> {
+  if (!Array.isArray(selectedFiles)) return new Set();
+  return new Set(selectedFiles.map((f) => f.name));
+}
+
+function diffSelectedFiles(prev: any, curr: any, key: string) {
+  const prevSet = getFileNameSet(prev?.[key]);
+  const currSet = getFileNameSet(curr?.[key]);
+  const added = [...currSet].filter((x) => !prevSet.has(x));
+  const removed = [...prevSet].filter((x) => !currSet.has(x));
+  let result = '';
+  if (added.length) result += `新增：${added.join('，')}`;
+  if (removed.length) result += `${added.length ? ' ' : ''}减少：${removed.join('，')}`;
+  return result || '无变化';
+}
+
+function renderOperParam(row: EditHistoryVo, index: number, list: EditHistoryVo[], type: 1 | 2) {
+  if (type === 1) {
+    return row.operParam;
+  }
+  // 分屏组
+  let curr, prev;
+  try {
+    curr = JSON.parse(row.operParam || '{}');
+  } catch {
+    curr = {};
+  }
+  try {
+    prev = index > 0 ? JSON.parse(list[index - 1].operParam || '{}') : {};
+  } catch {
+    prev = {};
+  }
+  const screenNames = ['第一屏', '第二屏', '第三屏', '第四屏'];
+  if (index === 0) {
+    // 第一条记录，全部按“创建”显示
+    return '创建';
+  }
+  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}`;
+      }
+      return '';
+    })
+    .filter(Boolean);
+  return diffs.length ? diffs.join('<br/>') : '';
+}
+
 import { listItem, getItem, delItem, addItem, updateItem, itemStatistics } from '@/api/smsb/source/item';
 import { MinioDataQuery, MinioDataVO } from '@/api/smsb/source/minioData_type';
 import { listMinioData } from '@/api/smsb/source/minioData';