From 3f488d2e727ff6675df2a8e41943f5145b85f521 Mon Sep 17 00:00:00 2001
From: Lxq <19852720163@163.com>
Date: Wed, 27 May 2026 15:13:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=9B=91=E6=8E=A7=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E4=BF=AE=E5=A4=8D+=E5=AF=BC=E5=87=BA=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=97=A5=E5=BF=97+=E5=AF=BC=E5=87=BA=E5=BC=82?=
 =?UTF-8?q?=E5=B8=B8=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rc_autoplc_front/src/api/system/manage-log.ts |  11 +-
 rc_autoplc_front/src/api/tb/recordinfo.ts     |   9 +
 rc_autoplc_front/src/views/Layout.vue         |   2 +-
 .../src/views/manage-log/index.vue            |  76 +++++--
 .../src/views/recordinfo/index.vue            |  67 +++++-
 .../src/views/statusmonitor/index.vue         | 190 +++++++++++++++++-
 6 files changed, 327 insertions(+), 28 deletions(-)

diff --git a/rc_autoplc_front/src/api/system/manage-log.ts b/rc_autoplc_front/src/api/system/manage-log.ts
index 83611b4..d35f14e 100644
--- a/rc_autoplc_front/src/api/system/manage-log.ts
+++ b/rc_autoplc_front/src/api/system/manage-log.ts
@@ -36,4 +36,13 @@ export function managelogbyid(id: string | number) {
     url: `/manage-log/getById/${id}`,
     method: 'get',
   })
-}
\ No newline at end of file
+}
+
+export function managelogexport(params: any) {
+  return request({
+    url: '/manage-log/export',
+    method: 'get',
+    params,
+    responseType: 'blob',
+  })
+}
diff --git a/rc_autoplc_front/src/api/tb/recordinfo.ts b/rc_autoplc_front/src/api/tb/recordinfo.ts
index e85b6e2..d35ecd6 100644
--- a/rc_autoplc_front/src/api/tb/recordinfo.ts
+++ b/rc_autoplc_front/src/api/tb/recordinfo.ts
@@ -37,3 +37,12 @@ export function recordInfoupd(data: any) {
     data,
   })
 }
+
+export function recordInfoexport(params: any) {
+  return request({
+    url: '/recordInfo/export',
+    method: 'get',
+    params,
+    responseType: 'blob',
+  })
+}
diff --git a/rc_autoplc_front/src/views/Layout.vue b/rc_autoplc_front/src/views/Layout.vue
index 0ecd42f..cecb6dd 100644
--- a/rc_autoplc_front/src/views/Layout.vue
+++ b/rc_autoplc_front/src/views/Layout.vue
@@ -105,7 +105,7 @@
             </el-menu-item>
             <el-menu-item index="/status-monitor">
               <el-icon><component :is="getMenuIcon('监控')" /></el-icon>
-              <span>状态监控界面</span>
+              <span>状态监控</span>
             </el-menu-item>
             <el-menu-item v-if="hasPermission('tb:goodrecord')" index="/goods-info">
               <el-icon><component :is="getMenuIcon('样品管理')" /></el-icon>
diff --git a/rc_autoplc_front/src/views/manage-log/index.vue b/rc_autoplc_front/src/views/manage-log/index.vue
index f2f4620..8d9279c 100644
--- a/rc_autoplc_front/src/views/manage-log/index.vue
+++ b/rc_autoplc_front/src/views/manage-log/index.vue
@@ -59,6 +59,10 @@
             <el-button type="primary" @click="handleSearch">查询</el-button>
             <el-button @click="resetSearch">重置</el-button>
           </el-form-item>
+
+          <el-form-item style="margin-left: 84px">
+            <el-button v-permission="'sys:managelog:excel'" type="success" :loading="exportLoading" @click="handleExport">导出日志</el-button>
+          </el-form-item>
         </el-form>
       </div>
     </el-card>
@@ -131,7 +135,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import { managelogbyid, manageloglist } from '@/api/system/manage-log'
+import { managelogbyid, managelogexport, manageloglist } from '@/api/system/manage-log'
 import { userselect } from '@/api/system/user'
 
 interface LogItem {
@@ -153,6 +157,7 @@ interface UserOption {
 }
 
 const loading = ref(false)
+const exportLoading = ref(false)
 const tableData = ref<LogItem[]>([])
 const total = ref(0)
 const userOptions = ref<UserOption[]>([])
@@ -236,6 +241,22 @@ const normalizeDateTimeParam = (value?: string | Date) => {
   return raw
 }
 
+const buildQueryParams = () => {
+  const params: Record<string, any> = {
+    pageNum: pagination.pageNum,
+    pageSize: pagination.pageSize,
+  }
+
+  if (queryForm.logType) params.logType = queryForm.logType
+  if (queryForm.createId !== '' && queryForm.createId !== null) params.createId = queryForm.createId
+  if (queryForm.logWritetimeRange?.length === 2) {
+    params.logWritetimeStart = normalizeDateTimeParam(queryForm.logWritetimeRange[0])
+    params.logWritetimeEnd = normalizeDateTimeParam(queryForm.logWritetimeRange[1])
+  }
+
+  return params
+}
+
 const loadUserOptions = async () => {
   try {
     const res: any = await userselect({})
@@ -272,19 +293,7 @@ const loadUserOptions = async () => {
 const loadList = async () => {
   loading.value = true
   try {
-    const params: any = {
-      pageNum: pagination.pageNum,
-      pageSize: pagination.pageSize,
-    }
-
-    if (queryForm.logType) params.logType = queryForm.logType
-    if (queryForm.createId !== '' && queryForm.createId !== null) params.createId = queryForm.createId
-    if (queryForm.logWritetimeRange?.length === 2) {
-      params.logWritetimeStart = normalizeDateTimeParam(queryForm.logWritetimeRange[0])
-      params.logWritetimeEnd = normalizeDateTimeParam(queryForm.logWritetimeRange[1])
-    }
-
-    const res: any = await manageloglist(params)
+    const res: any = await manageloglist(buildQueryParams())
     const data = res?.data ?? res ?? {}
 
     const recordsFromData =
@@ -353,6 +362,45 @@ const openDetailDialog = async (row: LogItem) => {
   }
 }
 
+const getFileNameFromDisposition = (contentDisposition?: string) => {
+  if (!contentDisposition) return ''
+  const utf8Match = contentDisposition.match(/filename\*=UTF-8''([^;]+)/i)
+  if (utf8Match?.[1]) return decodeURIComponent(utf8Match[1])
+
+  const standardMatch = contentDisposition.match(/filename=([^;]+)/i)
+  if (standardMatch?.[1]) {
+    return standardMatch[1].replace(/['"]/g, '').trim()
+  }
+  return ''
+}
+
+const downloadBlobFile = (blob: Blob, fileName: string) => {
+  const downloadUrl = window.URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = downloadUrl
+  link.download = fileName
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  window.URL.revokeObjectURL(downloadUrl)
+}
+
+const handleExport = async () => {
+  exportLoading.value = true
+  try {
+    const res: any = await managelogexport(buildQueryParams())
+    const blob = res instanceof Blob ? res : new Blob([res as BlobPart], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
+    const fileName = getFileNameFromDisposition((res as any)?.headers?.['content-disposition']) || '操作日志.xlsx'
+    downloadBlobFile(blob, fileName)
+    ElMessage.success('导出成功')
+  } catch (error) {
+    console.error('export log error', error)
+    ElMessage.error('导出失败')
+  } finally {
+    exportLoading.value = false
+  }
+}
+
 onMounted(async () => {
   await loadUserOptions()
   loadList()
diff --git a/rc_autoplc_front/src/views/recordinfo/index.vue b/rc_autoplc_front/src/views/recordinfo/index.vue
index c48e56c..13a1c6e 100644
--- a/rc_autoplc_front/src/views/recordinfo/index.vue
+++ b/rc_autoplc_front/src/views/recordinfo/index.vue
@@ -29,6 +29,9 @@
             <el-button type="primary" @click="handleSearch">查询</el-button>
             <el-button @click="resetSearch">重置</el-button>
           </el-form-item>
+          <el-form-item style="margin-left: 276px" >
+            <el-button v-permission="'tb:exceptionrecord:excel'" type="success" :loading="exportLoading" @click="handleExport">导出记录</el-button>
+          </el-form-item>
         </el-form>
       </div>
     </el-card>
@@ -173,7 +176,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { islandInfolist } from '@/api/tb/islandinfo'
 import { devselect } from '@/api/tb/devinfo'
-import { recordInfoupd, recordInfolist } from '@/api/tb/recordinfo'
+import { recordInfoexport, recordInfoupd, recordInfolist } from '@/api/tb/recordinfo'
 import { recordDealadd, recordDealupd, recordDeallistByRecordId, recordDeallist } from '@/api/tb/recorddeal'
 
 interface RecordInfoItem {
@@ -210,6 +213,7 @@ interface ActionItem {
 }
 
 const loading = ref(false)
+const exportLoading = ref(false)
 const tableData = ref<RecordInfoItem[]>([])
 const total = ref(0)
 const detailVisible = ref(false)
@@ -304,14 +308,7 @@ const loadLookups = async () => {
 const loadTableData = async () => {
   loading.value = true
   try {
-    const params = {
-      pageNum: pagination.pageNum,
-      pageSize: pagination.pageSize,
-      recordName: queryForm.recordName || undefined,
-      recordType: queryForm.recordType === '' ? undefined : queryForm.recordType,
-      recordStatus: queryForm.recordStatus === '' ? undefined : queryForm.recordStatus,
-    }
-    const res = await recordInfolist(params)
+    const res = await recordInfolist(buildListParams())
     tableData.value = getListFromResponse(res)
     total.value = getTotalFromResponse(res)
   } catch (error: any) {
@@ -393,6 +390,43 @@ const initDealDialog = async (row: RecordInfoItem) => {
   }
 }
 
+const buildListParams = () => ({
+  pageNum: pagination.pageNum,
+  pageSize: pagination.pageSize,
+  recordName: queryForm.recordName || undefined,
+  recordType: queryForm.recordType === '' ? undefined : queryForm.recordType,
+  recordStatus: queryForm.recordStatus === '' ? undefined : queryForm.recordStatus,
+})
+
+const buildExportParams = () => ({
+  recordName: queryForm.recordName || undefined,
+  recordType: queryForm.recordType === '' ? undefined : queryForm.recordType,
+  recordStatus: queryForm.recordStatus === '' ? undefined : queryForm.recordStatus,
+})
+
+const getFileNameFromDisposition = (disposition?: string) => {
+  if (!disposition) return '异常记录.xlsx'
+  const match = disposition.match(/filename\*=UTF-8''([^;]+)|filename=\"?([^\";]+)\"?/i)
+  const encodedName = match?.[1] || match?.[2]
+  if (!encodedName) return '异常记录.xlsx'
+  try {
+    return decodeURIComponent(encodedName)
+  } catch {
+    return encodedName
+  }
+}
+
+const downloadBlob = (blob: Blob, fileName: string) => {
+  const url = window.URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = fileName
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  window.URL.revokeObjectURL(url)
+}
+
 const handleSearch = () => {
   pagination.pageNum = 1
   loadTableData()
@@ -417,6 +451,21 @@ const handleSizeChange = (size: number) => {
   loadTableData()
 }
 
+const handleExport = async () => {
+  exportLoading.value = true
+  try {
+    const res: any = await recordInfoexport(buildExportParams())
+    const blob = new Blob([res?.data ?? res], { type: 'application/vnd.ms-excel' })
+    const disposition = res?.headers?.['content-disposition'] || res?.headers?.['Content-Disposition']
+    downloadBlob(blob, getFileNameFromDisposition(disposition))
+    ElMessage.success('导出成功')
+  } catch (error: any) {
+    ElMessage.error(error?.message || '导出异常记录失败')
+  } finally {
+    exportLoading.value = false
+  }
+}
+
 const handleView = (row: RecordInfoItem) => {
   detailData.value = { ...row }
   detailVisible.value = true
diff --git a/rc_autoplc_front/src/views/statusmonitor/index.vue b/rc_autoplc_front/src/views/statusmonitor/index.vue
index 4876849..c1c2875 100644
--- a/rc_autoplc_front/src/views/statusmonitor/index.vue
+++ b/rc_autoplc_front/src/views/statusmonitor/index.vue
@@ -3,7 +3,7 @@
     <el-breadcrumb separator="/" class="page-breadcrumb">
       <el-breadcrumb-item><router-link to="/home">首页</router-link></el-breadcrumb-item>
       <el-breadcrumb-item>业务流程控制</el-breadcrumb-item>
-      <el-breadcrumb-item>状态监控界面</el-breadcrumb-item>
+      <el-breadcrumb-item>状态监控</el-breadcrumb-item>
     </el-breadcrumb>
 
     <div class="monitor-layout">
@@ -36,6 +36,7 @@
               <el-tag class="island-status-tag" :type="getStatusTag(getIslandStatus(item))" size="small" effect="light">
                 {{ getStatusText(getIslandStatus(item)) }}
               </el-tag>
+              <div v-if="getIslandRecordCount(item) > 0" class="record-dot island-list-record-dot">{{ getIslandRecordCount(item) }}</div>
 
               <div class="action-badges" v-if="getIslandActionList(item).length > 0">
                 <div
@@ -83,6 +84,7 @@
                 <el-tag :type="getStatusTag(getIslandStatus(selectedIsland))" effect="light" size="small">
                   {{ getStatusText(getIslandStatus(selectedIsland)) }}
                 </el-tag>
+                <div v-if="getIslandRecordCount(selectedIsland) > 0" class="record-dot island-detail-record-dot">{{ getIslandRecordCount(selectedIsland) }}</div>
               </div>
             </div>
 
@@ -104,6 +106,7 @@
                     </div>
                     <el-tag :type="getStatusTag(getActionStatus(group.action))" effect="light" size="small">
                       {{ getStatusText(getActionStatus(group.action)) }}</el-tag>
+                    <div v-if="getActionRecordCount(group.action) > 0" class="record-dot action-record-dot">{{ getActionRecordCount(group.action) }}</div>
                   </div>
 
                   <div class="arrow-down" aria-hidden="true">
@@ -145,12 +148,37 @@
         </el-descriptions-item>
         <el-descriptions-item label="功能岛描述">{{ getIslandDesc(dialogIsland) }}</el-descriptions-item>
       </el-descriptions>
+
+      <div class="record-section">
+        <div class="record-section-title">待处理异常记录</div>
+        <div v-if="dialogIslandRecords.length === 0" class="record-empty-text">当前功能岛暂无待处理异常记录</div>
+        <el-scrollbar v-else max-height="220px">
+          <div class="record-list">
+            <div v-for="record in dialogIslandRecords" :key="record.id" class="record-item">
+              <div class="record-item-header">
+                <span class="record-item-name">{{ record.recordName || '未命名异常' }}</span>
+                <el-tag type="warning" size="small">待处理</el-tag>
+              </div>
+              <div class="record-item-content">{{ record.recordContent || '暂无异常内容' }}</div>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer-actions">
+          <el-button @click="islandDialogVisible = false">关闭</el-button>
+          <el-button v-if="dialogIslandRecords.length > 0" type="warning" @click="goToExceptionRecords">
+            异常处理
+          </el-button>
+        </div>
+      </template>
     </el-dialog>
 
     <el-dialog v-model="actionDialogVisible" title="动作状态详情" width="640px" destroy-on-close>
       <el-descriptions :column="1" border>
         <el-descriptions-item label="动作名称">{{ getActionName(dialogAction) }}</el-descriptions-item>
-        <el-descriptions-item label="所属功能岛">{{ getIslandName(selectedIsland) }}</el-descriptions-item>
+        <el-descriptions-item label="所属功能岛">{{ getIslandName(selectedIsland) }}</el-descriptions-item>    
         <el-descriptions-item label="动作状态">
           <el-tag :type="getStatusTag(getActionStatus(dialogAction))" effect="light">
             {{ getStatusText(getActionStatus(dialogAction)) }}
@@ -158,17 +186,44 @@
         </el-descriptions-item>
         <el-descriptions-item label="动作描述">{{ getActionDesc(dialogAction) }}</el-descriptions-item>
       </el-descriptions>
+
+      <div class="record-section"> 
+        <div class="record-section-title">待处理异常记录</div>
+        <div v-if="dialogActionRecords.length === 0" class="record-empty-text">当前动作暂无待处理异常记录</div>
+        <el-scrollbar v-else max-height="220px">
+          <div class="record-list">
+            <div v-for="record in dialogActionRecords" :key="record.id" class="record-item">
+              <div class="record-item-header">
+                <span class="record-item-name">{{ record.recordName || '未命名异常' }}</span>
+                <el-tag type="warning" size="small">待处理</el-tag>
+              </div>
+              <div class="record-item-content">{{ record.recordContent || '暂无异常内容' }}</div>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer-actions">
+          <el-button @click="actionDialogVisible = false">关闭</el-button>
+          <el-button v-if="dialogActionRecords.length > 0" type="warning" @click="goToExceptionRecords">
+            异常处理
+          </el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Bottom } from '@element-plus/icons-vue'
 import { islandInfolist } from '@/api/tb/islandinfo'
 import { devInfolist } from '@/api/tb/devinfo'
 import { devparamselect } from '@/api/tb/devparam'
+import { recordInfolist } from '@/api/tb/recordinfo'
 
 interface AnyItem {
   id?: string | number
@@ -193,14 +248,19 @@ interface AnyItem {
   status?: number | string
   state?: number | string
   onlineStatus?: number | string
+  recordName?: string
+  recordContent?: string
+  recordStatus?: boolean | number | string
   [key: string]: any
 }
 
+const router = useRouter()
 const islandLoading = ref(false)
 const detailLoading = ref(false)
 const islands = ref<AnyItem[]>([])
 const actions = ref<AnyItem[]>([])
 const params = ref<AnyItem[]>([])
+const abnormalRecords = ref<AnyItem[]>([])
 
 const selectedIslandId = ref<string | number | ''>('')
 const selectedActionId = ref<string | number | ''>('')
@@ -218,6 +278,11 @@ const getResponseList = (res: any) => {
   return data.records || data.list || data.rows || data.items || data.data || []
 }
 
+const isUnprocessedRecord = (item: AnyItem) => {
+  const value = item?.recordStatus ?? item?.status ?? item?.dealStatus
+  return value === false || value === 0 || value === '0' || value === '待处理' || value === 'false'
+}
+
 const getItemId = (item: AnyItem) => item?.id ?? item?.islandId ?? item?.devId ?? item?.paramId ?? ''
 const getIslandName = (item?: AnyItem | null) => item?.islandName || item?.name || '未命名功能岛'
 const getIslandDesc = (item?: AnyItem | null) => item?.desc || item?.islandDesc || '暂无描述'
@@ -269,15 +334,17 @@ const loadData = async () => {
   islandLoading.value = true
   detailLoading.value = true
   try {
-    const [islandRes, actionRes, paramRes] = await Promise.all([
+    const [islandRes, actionRes, paramRes, recordRes] = await Promise.all([
       islandInfolist({ pageNum: 1, pageSize: 1000 }),
       devInfolist({ pageNum: 1, pageSize: 1000, devModelNot: 'PLC' }),
       devparamselect({ pageNum: 1, pageSize: 5000 }),
+      recordInfolist({ pageNum: 1, pageSize: 5000 }),
     ])
 
     islands.value = getResponseList(islandRes)
     actions.value = getResponseList(actionRes)
     params.value = getResponseList(paramRes)
+    abnormalRecords.value = getResponseList(recordRes).filter((item: AnyItem) => isUnprocessedRecord(item))
 
     const firstIsland = islands.value[0]
     if (firstIsland) {
@@ -322,6 +389,21 @@ const getParamsForAction = (action: AnyItem) => {
   })
 }
 
+const getAbnormalRecordsByIsland = (item?: AnyItem | null) => {
+  const islandId = String(getItemId(item ?? {}))
+  if (!islandId) return []
+  return abnormalRecords.value.filter(record => String(record.islandId ?? record.functionIslandId ?? record.island_id ?? '') === islandId)
+}
+
+const getAbnormalRecordsByAction = (item?: AnyItem | null) => {
+  const actionId = String(getItemId(item ?? {}))
+  if (!actionId) return []
+  return abnormalRecords.value.filter(record => String(record.devId ?? record.actionId ?? record.dev_id ?? '') === actionId)
+}
+
+const getIslandRecordCount = (item?: AnyItem | null) => getAbnormalRecordsByIsland(item).length
+const getActionRecordCount = (item?: AnyItem | null) => getAbnormalRecordsByAction(item).length
+
 const openIslandDialog = (item: AnyItem) => {
   dialogIsland.value = item
   activeDialogType.value = 'island'
@@ -335,11 +417,25 @@ const openActionDialog = (item: AnyItem) => {
   actionDialogVisible.value = true
 }
 
+const goToExceptionRecords = () => {
+  const query: Record<string, string> = {}
+  if (activeDialogType.value === 'island' && dialogIsland.value) {
+    query.islandId = String(getItemId(dialogIsland.value))
+  }
+  if (activeDialogType.value === 'action' && dialogAction.value) {
+    query.devId = String(getItemId(dialogAction.value))
+  }
+  router.push({ path: '/record-info', query })
+}
+
 const actionsToRender = computed(() => getIslandRelatedActions(selectedIslandId.value).map(action => ({
   action,
   params: getParamsForAction(action),
 })))
 
+const dialogIslandRecords = computed(() => getAbnormalRecordsByIsland(dialogIsland.value))
+const dialogActionRecords = computed(() => getAbnormalRecordsByAction(dialogAction.value))
+
 onMounted(loadData)
 </script>
 
@@ -427,6 +523,37 @@ onMounted(loadData)
   right: 12px;
 }
 
+.record-dot {
+  position: absolute;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: #f56c6c;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  text-align: center;
+  box-shadow: 0 0 0 2px #fff;
+  pointer-events: none;
+}
+
+.action-record-dot {
+  top: 10px;
+  right: 10px;
+}
+
+.island-list-record-dot {
+  bottom: 10px;
+  right: 10px;
+}
+
+.island-detail-record-dot {
+  top: 10px;
+  right: 10px;
+}
+
 .island-card-main {
   padding-right: 80px;
 }
@@ -622,6 +749,63 @@ onMounted(loadData)
   color: var(--el-text-color-secondary);
 }
 
+.record-section {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #ebeef5;
+}
+
+.record-section-title {
+  margin-bottom: 10px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+}
+
+.record-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.record-empty-text {
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.record-item {
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: #fafcff;
+  border: 1px solid #ebeef5;
+}
+
+.record-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.record-item-name {
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.record-item-content {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.5;
+}
+
+.dialog-footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
 @media (min-width: 1201px) {
   .actions-row {
     grid-template-columns: repeat(var(--actions-count), minmax(340px, 1fr));