From c9c9b88b89d2dfefad0fc1a63b48e6a58f205bd9 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 28 一月 2026 14:00:25 +0800
Subject: [PATCH] 危险源台账

---
 src/api/safeProduction/hazardSourceLedger.js          |   36 ++
 src/views/safeProduction/hazardSourceLedger/index.vue |  744 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 780 insertions(+), 0 deletions(-)

diff --git a/src/api/safeProduction/hazardSourceLedger.js b/src/api/safeProduction/hazardSourceLedger.js
new file mode 100644
index 0000000..546415c
--- /dev/null
+++ b/src/api/safeProduction/hazardSourceLedger.js
@@ -0,0 +1,36 @@
+// 鍙戣揣鍙拌处椤甸潰鎺ュ彛
+import request from "@/utils/request";
+
+// 鍒嗛〉鏌ヨ
+export function safeHazardListPage(query) {
+  return request({
+    url: "/safeHazard/page",
+    method: "get",
+    params: query,
+  });
+}
+
+// 鏂板鍗遍櫓婧愬彴璐�
+export function safeHazardAdd(query) {
+    return request({
+        url: '/safeHazard',
+        method: 'post',
+        data: query
+    })
+}
+// 淇敼鍗遍櫓婧愬彴璐�
+export function safeHazardUpdate(query) {
+    return request({
+        url: '/safeHazard',
+        method: 'put',
+        data: query
+    })
+}
+// 鍒犻櫎鍗遍櫓婧愬彴璐�
+export function safeHazardDel(ids) {
+    return request({
+        url: '/safeHazard/' + ids,
+        method: 'delete',
+        data: ids
+    })
+}
\ No newline at end of file
diff --git a/src/views/safeProduction/hazardSourceLedger/index.vue b/src/views/safeProduction/hazardSourceLedger/index.vue
new file mode 100644
index 0000000..a863c9e
--- /dev/null
+++ b/src/views/safeProduction/hazardSourceLedger/index.vue
@@ -0,0 +1,744 @@
+<template>
+  <div class="app-container">
+    <div class="search_form">
+      <div>
+        <span class="search_title">鍗遍櫓婧愬悕绉帮細</span>
+        <el-input v-model="searchForm.name"
+                  style="width: 240px"
+                  placeholder="璇疯緭鍏ュ嵄闄╂簮鍚嶇О鎼滅储"
+                  @change="handleQuery"
+                  clearable
+                  :prefix-icon="Search" />
+        <span class="search_title ml10">鍗遍櫓婧愮被鍨嬶細</span>
+        <el-select v-model="searchForm.type"
+                   clearable
+                   @change="handleQuery"
+                   style="width: 240px">
+          <el-option v-for="item in knowledgeTypeOptions"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value" />
+        </el-select>
+        <el-button type="primary"
+                   @click="handleQuery"
+                   style="margin-left: 10px">
+          鎼滅储
+        </el-button>
+      </div>
+      <div>
+        <el-button @click="handleExport"
+                   style="margin-right: 10px">瀵煎嚭</el-button>
+        <el-button type="primary"
+                   @click="openForm('add')">鏂板鍗遍櫓婧�</el-button>
+        <el-button type="danger"
+                   plain
+                   @click="handleDelete">鍒犻櫎</el-button>
+      </div>
+    </div>
+    <div class="table_list">
+      <PIMTable rowKey="id"
+                :column="tableColumn"
+                :tableData="tableData"
+                :page="page"
+                :isSelection="true"
+                @selection-change="handleSelectionChange"
+                :tableLoading="tableLoading"
+                @pagination="pagination"
+                :total="page.total"
+                :rowClassName="getRowClass"></PIMTable>
+    </div>
+    <!-- 鏂板/缂栬緫鐭ヨ瘑寮圭獥 -->
+    <el-dialog v-model="dialogVisible"
+               :title="dialogTitle"
+               width="800px"
+               :close-on-click-modal="false">
+      <el-form ref="formRef"
+               :model="form"
+               :rules="rules"
+               label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="鍗遍櫓婧愮紪鐮�"
+                          prop="code">
+              <el-input v-model="form.code"
+                        placeholder="璇疯緭鍏ュ嵄闄╂簮缂栫爜" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鍗遍櫓婧愬悕绉�"
+                          prop="name">
+              <el-input v-model="form.name"
+                        placeholder="璇疯緭鍏ュ嵄闄╂簮鍚嶇О" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="鎵�鍦ㄤ綅缃�"
+                          prop="location">
+              <el-input v-model="form.location"
+                        placeholder="璇疯緭鍏ユ墍鍦ㄤ綅缃�" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="绠℃帶鎺柦"
+                          prop="controlMeasures">
+              <el-input v-model="form.controlMeasures"
+                        placeholder="璇疯緭鍏ョ鎺ф帾鏂�" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="鍗遍櫓婧愮被鍨�"
+                          prop="type">
+              <el-select v-model="form.type"
+                         placeholder="璇烽�夋嫨鍗遍櫓婧愮被鍨�"
+                         style="width: 100%">
+                <el-option v-for="item in knowledgeTypeOptions"
+                           :key="item.value"
+                           :label="item.label"
+                           :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="搴撳瓨鏁伴噺"
+                          prop="stockQty">
+              <el-input v-model="form.stockQty"
+                        type="number"
+                        min="0"
+                        placeholder="璇疯緭鍏ュ簱瀛樻暟閲�" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="绠℃帶璐d换浜�"
+                          prop="principalUserId">
+              <el-select v-model="form.principalUserId"
+                         placeholder="璇烽�夋嫨绠℃帶璐d换浜�"
+                         @change="handleUserChange"
+                         clearable>
+                <el-option v-for="item in userList"
+                           :key="item.userId"
+                           :label="item.nickName"
+                           :value="item.userId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="璐d换浜鸿仈绯荤數璇�"
+                          prop="principalMobile">
+              <el-input v-model="form.principalMobile"
+                        readonly
+                        placeholder="鑷姩甯﹀嚭" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="椋庨櫓绛夌骇"
+                          prop="riskLevel">
+              <el-select v-model="form.riskLevel"
+                         placeholder="璇烽�夋嫨椋庨櫓绛夌骇"
+                         clearable>
+                <el-option v-for="item in riskLevelOptions"
+                           :key="item.value"
+                           :label="item.label"
+                           :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="瑙勬牸 / 椋庨櫓鎻忚堪"
+                      prop="specInfo">
+          <el-input v-model="form.specInfo"
+                    type="textarea"
+                    :rows="4"
+                    placeholder="璇疯緭鍏ヨ鏍� / 椋庨櫓鎻忚堪" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+          <el-button type="primary"
+                     @click="submitForm">纭畾</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 鏌ョ湅鐭ヨ瘑璇︽儏寮圭獥 -->
+    <el-dialog v-model="viewDialogVisible"
+               title="鐭ヨ瘑璇︽儏"
+               width="900px"
+               :close-on-click-modal="false">
+      <div class="knowledge-detail">
+        <el-descriptions :column="2"
+                         border>
+          <el-descriptions-item label="鍗遍櫓婧愬悕绉�"
+                                :span="2">
+            <span class="detail-title">{{ currentKnowledge.name }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="鍗遍櫓婧愮紪鐮�">
+            {{ currentKnowledge.code }}
+          </el-descriptions-item>
+          <el-descriptions-item label="鍗遍櫓婧愮被鍨�">
+            {{ getTypeLabel(currentKnowledge.type) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="鎵�鍦ㄤ綅缃�">
+            {{ currentKnowledge.location }}
+          </el-descriptions-item>
+          <el-descriptions-item label="绠℃帶鎺柦">
+            {{ currentKnowledge.controlMeasures }}
+          </el-descriptions-item>
+          <el-descriptions-item label="搴撳瓨鏁伴噺">
+            {{ currentKnowledge.stockQty }}
+          </el-descriptions-item>
+          <el-descriptions-item label="绠℃帶璐d换浜�">
+            {{ currentKnowledge.principalUserId }}
+          </el-descriptions-item>
+          <el-descriptions-item label="璐d换浜鸿仈绯荤數璇�">
+            {{ currentKnowledge.principalMobile }}
+          </el-descriptions-item>
+          <el-descriptions-item label="椋庨櫓绛夌骇">
+            <el-tag :type="getTypeTagType(currentKnowledge.riskLevel)">
+              {{ currentKnowledge.riskLevel }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="瑙勬牸 / 椋庨櫓鎻忚堪">
+            {{ currentKnowledge.specInfo }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="viewDialogVisible = false">鍏抽棴</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { Search } from "@element-plus/icons-vue";
+  import {
+    onMounted,
+    ref,
+    reactive,
+    toRefs,
+    getCurrentInstance,
+    computed,
+  } from "vue";
+  import { ElMessage, ElMessageBox } from "element-plus";
+  import PIMTable from "@/components/PIMTable/PIMTable.vue";
+  import { userListNoPage } from "@/api/system/user.js";
+  import {
+    listKnowledgeBase,
+    delKnowledgeBase,
+    addKnowledgeBase,
+    updateKnowledgeBase,
+  } from "@/api/collaborativeApproval/knowledgeBase.js";
+  import {
+    safeHazardListPage,
+    safeHazardAdd,
+    safeHazardUpdate,
+    safeHazardDel,
+  } from "@/api/safeProduction/hazardSourceLedger.js";
+
+  // 琛ㄥ崟楠岃瘉瑙勫垯
+  const rules = {
+    title: [{ required: true, message: "璇疯緭鍏ョ煡璇嗘爣棰�", trigger: "blur" }],
+    type: [{ required: true, message: "璇烽�夋嫨鐭ヨ瘑绫诲瀷", trigger: "change" }],
+    problem: [{ required: true, message: "璇锋弿杩伴亣鍒扮殑闂", trigger: "blur" }],
+    solution: [
+      { required: true, message: "璇疯缁嗘弿杩拌В鍐虫柟妗�", trigger: "blur" },
+    ],
+  };
+
+  // 鍝嶅簲寮忔暟鎹�
+  const data = reactive({
+    searchForm: {
+      name: "",
+      type: "",
+    },
+    tableLoading: false,
+    page: {
+      current: 1,
+      size: 20,
+      total: 0,
+    },
+    tableData: [],
+    selectedIds: [],
+    form: {
+      code: "",
+      name: "",
+      location: "",
+      controlMeasures: "",
+      riskLevel: "",
+      principalUser: "",
+      principalMobile: "",
+      specInfo: "",
+      principalUserId: "",
+      controlMeasures: "",
+      stockQty: "",
+      type: "",
+    },
+    dialogVisible: false,
+    dialogTitle: "",
+    dialogType: "add",
+    viewDialogVisible: false,
+    currentKnowledge: {},
+  });
+
+  const {
+    searchForm,
+    tableLoading,
+    page,
+    tableData,
+    selectedIds,
+    form,
+    dialogVisible,
+    dialogTitle,
+    dialogType,
+    viewDialogVisible,
+    currentKnowledge,
+  } = toRefs(data);
+
+  // 琛ㄥ崟寮曠敤
+  const formRef = ref();
+  const riskLevelOptions = ref([
+    { value: "浣庨闄�", label: "浣庨闄�" },
+    { value: "涓�鑸闄�", label: "涓�鑸闄�" },
+    { value: "杈冨ぇ椋庨櫓", label: "杈冨ぇ椋庨櫓" },
+    { value: "閲嶅ぇ椋庨櫓", label: "閲嶅ぇ椋庨櫓" },
+  ]);
+
+  // 琛ㄦ牸鍒楅厤缃�
+  const tableColumn = ref([
+    {
+      label: "鍗遍櫓婧愮紪鐮�",
+      prop: "code",
+      showOverflowTooltip: true,
+    },
+    {
+      label: "鍗遍櫓婧愬悕绉�",
+      prop: "name",
+      showOverflowTooltip: true,
+    },
+    {
+      label: "鍗遍櫓婧愮被鍨�",
+      prop: "type",
+      showOverflowTooltip: true,
+      formatData: params => {
+        return getTypeLabel(params);
+      },
+    },
+    {
+      label: "椋庨櫓绛夌骇",
+      prop: "riskLevel",
+      showOverflowTooltip: true,
+      dataType: "tag",
+      formatType: params => {
+        const typeMap = {
+          浣庨闄�: "info",
+          涓�鑸闄�: "info",
+          杈冨ぇ椋庨櫓: "warning",
+          閲嶅ぇ椋庨櫓: "danger",
+        };
+        return typeMap[params] || "info";
+      },
+    },
+    {
+      label: "鎵�鍦ㄤ綅缃�",
+      prop: "location",
+      showOverflowTooltip: true,
+    },
+    {
+      label: "绠℃帶鎺柦",
+      prop: "controlMeasures",
+      showOverflowTooltip: true,
+    },
+    {
+      label: "搴撳瓨鏁伴噺",
+      prop: "stockQty",
+      showOverflowTooltip: true,
+    },
+    {
+      label: "绠℃帶璐d换浜�",
+      prop: "principalUser",
+      showOverflowTooltip: true,
+    },
+    {
+      label: "璐d换浜鸿仈绯荤數璇�",
+      prop: "principalMobile",
+      showOverflowTooltip: true,
+    },
+    {
+      label: "瑙勬牸 / 椋庨櫓鎻忚堪",
+      prop: "specInfo",
+      showOverflowTooltip: true,
+    },
+    {
+      dataType: "action",
+      label: "鎿嶄綔",
+      align: "center",
+      fixed: "right",
+      width: 200,
+      operation: [
+        {
+          name: "缂栬緫",
+          type: "text",
+          clickFun: row => {
+            openForm("edit", row);
+          },
+        },
+        {
+          name: "鏌ョ湅",
+          type: "text",
+          clickFun: row => {
+            viewKnowledge(row);
+          },
+        },
+      ],
+    },
+  ]);
+  const userList = ref([]);
+  // 鐢熷懡鍛ㄦ湡
+  onMounted(() => {
+    getList();
+    startAutoRefresh();
+    userListNoPage().then(res => {
+      userList.value = res.data;
+    });
+  });
+
+  // 澶勭悊鐢ㄦ埛閫夋嫨鍙樺寲
+  const handleUserChange = userId => {
+    const selectedUser = userList.value.find(user => user.userId === userId);
+    if (selectedUser) {
+      form.value.principalUser = selectedUser.nickName;
+      form.value.principalMobile = selectedUser.phonenumber;
+    }
+  };
+
+  // 寮�濮嬭嚜鍔ㄥ埛鏂�
+  const startAutoRefresh = () => {
+    setInterval(() => {
+      getList();
+    }, 600000); // 10鍒嗛挓鍒锋柊涓�娆� (10 * 60 * 1000 = 600000ms)
+  };
+
+  // 鏌ヨ鏁版嵁
+  const handleQuery = () => {
+    page.value.current = 1;
+    getList();
+  };
+
+  const getList = () => {
+    tableLoading.value = true;
+    safeHazardListPage({ ...page.value, ...searchForm.value })
+      .then(res => {
+        tableLoading.value = false;
+        tableData.value = res.data.records;
+        page.value.total = res.data.total;
+      })
+      .catch(err => {
+        tableLoading.value = false;
+      });
+  };
+
+  // 鍒嗛〉澶勭悊
+  const pagination = obj => {
+    page.value.current = obj.page;
+    page.value.size = obj.limit;
+    handleQuery();
+  };
+
+  // 閫夋嫨鍙樺寲澶勭悊
+  const handleSelectionChange = selection => {
+    selectedIds.value = selection.map(item => item.id);
+  };
+
+  // 鎵撳紑琛ㄥ崟
+  const openForm = (type, row = null) => {
+    dialogType.value = type;
+    if (type === "add") {
+      dialogTitle.value = "鏂板鐭ヨ瘑";
+      // 閲嶇疆琛ㄥ崟
+      Object.assign(form.value, {
+        code: "",
+        name: "",
+        location: "",
+        controlMeasures: "",
+        riskLevel: "",
+        principalUser: "",
+        principalMobile: "",
+        specInfo: "",
+        principalUserId: "",
+        controlMeasures: "",
+        stockQty: "",
+        type: "",
+      });
+    } else if (type === "edit" && row) {
+      dialogTitle.value = "缂栬緫鐭ヨ瘑";
+      Object.assign(form.value, {
+        id: row.id,
+        code: row.code,
+        name: row.name,
+        location: row.location,
+        controlMeasures: row.controlMeasures,
+        riskLevel: row.riskLevel,
+        principalUser: row.principalUser,
+        principalMobile: row.principalMobile,
+        specInfo: row.specInfo,
+        principalUserId: row.principalUserId,
+        controlMeasures: row.controlMeasures,
+        stockQty: row.stockQty,
+        type: row.type,
+      });
+    }
+    dialogVisible.value = true;
+  };
+
+  // 鏌ョ湅鐭ヨ瘑璇︽儏
+  const viewKnowledge = row => {
+    currentKnowledge.value = { ...row };
+    viewDialogVisible.value = true;
+  };
+
+  // 鑾峰彇绫诲瀷鏍囩绫诲瀷
+  const getTypeTagType = type => {
+    const typeMap = {
+      杈冨ぇ椋庨櫓: "warning",
+      浣庨闄�: "info",
+      涓�鑸闄�: "info",
+      閲嶅ぇ椋庨櫓: "danger",
+    };
+    return typeMap[type] || "info";
+  };
+
+  // 鑾峰彇绫诲瀷鏍囩鏂囨湰
+  const getTypeLabel = type => {
+    return getKnowledgeTypeLabel(type);
+  };
+
+  // 鑾峰彇鏁堢巼鏍囩绫诲瀷
+  const getEfficiencyTagType = efficiency => {
+    const typeMap = {
+      high: "success",
+      medium: "warning",
+      low: "info",
+    };
+    return typeMap[efficiency] || "info";
+  };
+
+  // 鑾峰彇鏁堢巼鏍囩鏂囨湰
+  const getEfficiencyLabel = efficiency => {
+    const efficiencyMap = {
+      high: "鏄捐憲鎻愬崌",
+      medium: "涓�鑸彁鍗�",
+      low: "杞诲井鎻愬崌",
+    };
+    return efficiencyMap[efficiency] || efficiency;
+  };
+
+  // 鑾峰彇鏁堢巼鎻愬崌鐧惧垎姣�
+  const getEfficiencyScore = efficiency => {
+    const scoreMap = {
+      high: 40,
+      medium: 25,
+      low: 15,
+    };
+    return scoreMap[efficiency] || 0;
+  };
+
+  // 鑾峰彇骞冲潎鑺傜渷鏃堕棿
+  const getTimeSaved = efficiency => {
+    const timeMap = {
+      high: "2-3澶�",
+      medium: "1-2澶�",
+      low: "0.5-1澶�",
+    };
+    return timeMap[efficiency] || "鏈煡";
+  };
+
+  /**
+   * 鑾峰彇琛岀被鍚嶏紝鐢ㄤ簬鍒ゆ柇椋庨櫓绛夌骇鏄惁涓洪噸澶ч闄�
+   * @param row 琛屾暟鎹�
+   * @returns 绫诲悕
+   */
+  const getRowClass = ({ row }) => {
+    if (row.riskLevel === "閲嶅ぇ椋庨櫓") {
+      return "danger-row";
+    }
+    return "";
+  };
+
+  // 鎻愪氦鐭ヨ瘑琛ㄥ崟
+  const submitForm = async () => {
+    try {
+      await formRef.value.validate();
+      if (dialogType.value === "add") {
+        // 鏂板鍗遍櫓婧愬彴璐�
+        safeHazardAdd({ ...form.value })
+          .then(res => {
+            if (res.code == 200) {
+              ElMessage.success("娣诲姞鎴愬姛");
+              dialogVisible.value = false;
+              getList();
+            }
+          })
+          .catch(err => {
+            ElMessage.error(err.msg);
+          });
+      } else {
+        // 鏇存柊鍗遍櫓婧愬彴璐�
+        safeHazardUpdate({ ...form.value })
+          .then(res => {
+            if (res.code == 200) {
+              ElMessage.success("鏇存柊鎴愬姛");
+              dialogVisible.value = false;
+              getList();
+            }
+          })
+          .catch(err => {
+            ElMessage.error(err.msg);
+          });
+      }
+    } catch (error) {
+      console.error("琛ㄥ崟楠岃瘉澶辫触:", error);
+    }
+  };
+
+  // 鍒犻櫎鐭ヨ瘑
+  const handleDelete = () => {
+    if (selectedIds.value.length === 0) {
+      ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鐭ヨ瘑");
+      return;
+    }
+
+    ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎", {
+      confirmButtonText: "纭",
+      cancelButtonText: "鍙栨秷",
+      type: "warning",
+    })
+      .then(() => {
+        // console.log(selectedIds.value);
+        safeHazardDel(selectedIds.value).then(res => {
+          if (res.code == 200) {
+            ElMessage.success("鍒犻櫎鎴愬姛");
+            selectedIds.value = [];
+            getList();
+          }
+        });
+      })
+      .catch(() => {
+        // 鐢ㄦ埛鍙栨秷
+      });
+  };
+
+  // 瀵煎嚭
+  const { proxy } = getCurrentInstance();
+  const { hazard_source_type } = proxy.useDict("hazard_source_type");
+
+  // 瀛楀吀宸ュ叿
+  const knowledgeTypeOptions = computed(() => hazard_source_type?.value || []);
+  const getKnowledgeTypeLabel = val => {
+    const item = knowledgeTypeOptions.value.find(
+      i => String(i.value) === String(val)
+    );
+    return item ? item.label : val;
+  };
+  const getKnowledgeTypeTagType = val => {
+    const item = knowledgeTypeOptions.value.find(
+      i => String(i.value) === String(val)
+    );
+    return item?.elTagType || "info";
+  };
+  const handleExport = () => {
+    proxy.download(
+      "/knowledgeBase/export",
+      { ...searchForm.value },
+      "鐭ヨ瘑搴�.xlsx"
+    );
+  };
+</script>
+
+<style scoped>
+  .auto-refresh-info {
+    margin-bottom: 15px;
+  }
+
+  .auto-refresh-info .el-alert {
+    border-radius: 8px;
+  }
+
+  .dialog-footer {
+    text-align: right;
+  }
+
+  .knowledge-detail {
+    padding: 20px 0;
+  }
+
+  .detail-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #303133;
+  }
+
+  .detail-section {
+    margin-top: 24px;
+  }
+
+  .detail-section h4 {
+    margin: 0 0 12px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    border-left: 4px solid #409eff;
+    padding-left: 12px;
+  }
+
+  .detail-content {
+    background: #f8f9fa;
+    padding: 16px;
+    border-radius: 6px;
+    line-height: 1.6;
+    color: #606266;
+    white-space: pre-wrap;
+  }
+
+  .key-points {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .usage-stats {
+    margin-top: 16px;
+  }
+
+  .stat-item {
+    text-align: center;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 8px;
+  }
+
+  .stat-number {
+    font-size: 24px;
+    font-weight: bold;
+    color: #409eff;
+    margin-bottom: 8px;
+  }
+
+  .stat-label {
+    font-size: 14px;
+    color: #909399;
+  }
+
+  :deep(.danger-row td) {
+    color: #e95a66 !important;
+  }
+</style>

--
Gitblit v1.9.3