From 13a1d62e4acdad79e279cf961a6b70e6b03d0650 Mon Sep 17 00:00:00 2001
From: hbk01 <3243430237@qq.com>
Date: Thu, 23 Apr 2026 22:11:25 +0800
Subject: [PATCH] =?UTF-8?q?+=20=E8=BF=87=E6=9C=9F=E6=A3=80=E6=9F=A5?=
 =?UTF-8?q?=E4=B8=AD=E6=8F=90=E9=86=92=E5=86=85=E5=AE=B9=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E5=A4=9A=E8=A1=8C=E6=96=87=E6=9C=AC=20+=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=BF=87=E6=9C=9F=E5=86=85=E5=AE=B9=E4=B8=AD?=
 =?UTF-8?q?=E8=BF=87=E6=9C=9F=E9=A1=B9=E7=9A=84=E6=98=BE=E7=A4=BA=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 views/clock.html | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/views/clock.html b/views/clock.html
index 013dea6..78667e5 100644
--- a/views/clock.html
+++ b/views/clock.html
@@ -84,6 +84,7 @@
                         // TODO 在这里可以添加打开编辑对话框并填充数据的逻辑
                     },
 
+                    // 格式化日期 YYYY-MM-DD
                     formatDate(date) {
                         const year = date.getFullYear()
                         const month = String(date.getMonth() + 1).padStart(2, '0')
@@ -91,6 +92,7 @@
                         return `${year}-${month}-${day}`
                     },
 
+                    // 计算提醒日期 = 过期日期 - 提醒天数
                     subDate(date, day) {
                         r = new Date(date)
                         r.setDate(r.getDate() - day)
@@ -103,6 +105,8 @@
         }
 
         const URL = "https://solidaim.cn/clocks"
+        // for DEBUG
+        // const URL = "http://localhost:11223/clocks"
 
         function get() {
             return fetch(URL).then(response => response.json())
@@ -133,20 +137,17 @@
             height: 100vh;
         }
 
-        .el-table .green-row {
-            --el-table-tr-bg-color: var(--el-color-success-light-9);
-        }
-
         .el-table .yellow-row {
-            --el-table-tr-bg-color: var(--el-color-warning-light-9);
+            --el-table-tr-bg-color: var(--el-color-warning-light-7);
         }
 
         .el-table .red-row {
             --el-table-tr-bg-color: var(--el-color-error-light-7);
         }
 
-        .el-table .darkred-row {
-            --el-table-tr-bg-color: var(--el-color-error-light-5);
+        .descStyle {
+            white-space: pre-wrap;
+            word-wrap: break-word;
         }
     </style>
     <title>过期检查</title>
@@ -156,7 +157,7 @@
     <div id="app" width="100%" height="100vh">
         <el-table :data="records" style="width: 100%; height: 95vh;" :row-class-name="checkOutdate"
             @row-click="onRowClick" :default-sort="{ prop: 'expire_date', order: 'ascending' }">
-            <el-table-column prop="tag" label="标签" :filters="filters" :filter-method="filterTag" fixed
+            <el-table-column prop="tag" label="标签" :filters="filters" :filter-method="filterTag"
                 filter-placement="bottom-end">
                 <template #default="scope">
                     <el-tag :type="filters.find(f => f.value === scope.row.tag)?.color" disable-transitions>
@@ -164,7 +165,13 @@
                     </el-tag>
                 </template>
             </el-table-column>
-            <el-table-column prop="content" label="提醒内容" fixed min-width="200"></el-table-column>
+            <el-table-column prop="content" label="提醒内容" min-width="200">
+                <template #default="scope">
+                    <el-tooltip :content="scope.row.content" placement="top">
+                        <p class="descStyle">{{ scope.row.content }}</p>
+                    </el-tooltip>
+                </template>
+            </el-table-column>
             <el-table-column prop="expire_date" label="过期日期" sortable min-width="110"></el-table-column>
             <!-- <el-table-column prop="date" label="日期" min-width="100"></el-table-column> -->
             <!-- <el-table-column prop="comment" label="备注" :show-overflow-tooltip="true"></el-table-column> -->
@@ -179,7 +186,7 @@
 
             <el-form label-position="top" width="100%">
                 <el-form-item label="提醒内容*">
-                    <el-input v-model="formData.content" width="100%"></el-input>
+                    <el-input v-model="formData.content" type="textarea" :rows="3" width="100%"></el-input>
                 </el-form-item>
                 <el-form-item label="过期日期*" width="100%">
                     <div style="width: 100%;">
@@ -216,7 +223,8 @@
             :show-close="false">
             <el-form label-position="top" width="100%">
                 <el-form-item label="提醒内容">
-                    <el-input v-model="formData.content" width="100%" :disabled="true"></el-input>
+                    <el-input v-model="formData.content" type="textarea" :rows="3" width="100%"
+                        :disabled="true"></el-input>
                 </el-form-item>
                 <el-form-item label="过期日期" width="100%">
                     <div style="width: 100%;">
@@ -237,7 +245,8 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item label="备注">
-                    <el-input v-model="formData.remark" type="textarea" width="100%" :disabled="true"></el-input>
+                    <el-input v-model="formData.remark" type="textarea" :rows="3" width="100%"
+                        :disabled="true"></el-input>
                 </el-form-item>
                 <el-form-item label="创建日期" width="100%">
                     <div style="width: 100%;">