From dc4cc34f11e7ebb20774a979cdf4cce905157f83 Mon Sep 17 00:00:00 2001
From: LYFxiaoan <lyfxinchen@163.com>
Date: Wed, 23 Jul 2025 15:06:42 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E6=B5=8B=E9=A1=B5=E9=9D=A2UI=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=B8=8E=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/prediction/GlobalPredictionView.vue |  31 ++++++++--------
 .../prediction/ProductPredictionView.vue      |  33 +++++++++---------
 .../views/prediction/StorePredictionView.vue  |  31 ++++++++--------
 lyf开发日志记录文档.md                        |  21 +++++++++++
 prediction_history.db                         | Bin 282624 -> 286720 bytes
 5 files changed, 67 insertions(+), 49 deletions(-)

diff --git a/UI/src/views/prediction/GlobalPredictionView.vue b/UI/src/views/prediction/GlobalPredictionView.vue
index 0ba7436..f7cb75d 100644
--- a/UI/src/views/prediction/GlobalPredictionView.vue
+++ b/UI/src/views/prediction/GlobalPredictionView.vue
@@ -74,33 +74,23 @@
       <div v-if="availableVersions.length > 0" class="versions-list-section">
         <h4>📦 可用模型版本</h4>
         <el-table :data="availableVersions" style="width: 100%" v-loading="versionsLoading">
-          <el-table-column prop="aggregation_method" label="聚合方法" width="180">
+          <el-table-column prop="aggregation_method" label="聚合方法">
             <template #default="{ row }">
               {{ row.aggregation_method || 'N/A' }}
             </template>
           </el-table-column>
-          <el-table-column prop="version" label="版本号" width="180"></el-table-column>
-          <el-table-column prop="created_at" label="创建时间" width="200">
+          <el-table-column prop="version" label="版本号"></el-table-column>
+          <el-table-column prop="created_at" label="创建时间">
              <template #default="{ row }">
               {{ new Date(row.created_at).toLocaleString() }}
             </template>
           </el-table-column>
-          <el-table-column prop="metrics.mae" label="MAE">
+          <el-table-column prop="model_type" label="算法类型">
             <template #default="{ row }">
-              {{ row.metrics && row.metrics.mae ? row.metrics.mae.toFixed(4) : 'N/A' }}
+              {{ getModelTypeName(row.model_type) }}
             </template>
           </el-table-column>
-          <el-table-column prop="metrics.rmse" label="RMSE">
-             <template #default="{ row }">
-              {{ row.metrics && row.metrics.rmse ? row.metrics.rmse.toFixed(4) : 'N/A' }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="metrics.mape" label="MAPE (%)">
-             <template #default="{ row }">
-              {{ row.metrics && row.metrics.mape ? (row.metrics.mape * 100).toFixed(2) : 'N/A' }}
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="150">
+          <el-table-column label="操作">
             <template #default="{ row }">
               <el-button
                 type="primary"
@@ -166,6 +156,11 @@ const fetchModelTypes = async () => {
   }
 }
 
+const getModelTypeName = (typeId) => {
+  const model = modelTypes.value.find(m => m.id === typeId);
+  return model ? model.name : typeId;
+};
+
 const fetchAvailableVersions = async () => {
   if (!form.model_type) {
     availableVersions.value = []
@@ -366,10 +361,14 @@ watch(() => form.model_type, () => {
   margin-top: 20px;
   padding-top: 20px;
   border-top: 1px solid #ebeef5;
+  padding-bottom: 20px;
 }
 .versions-list-section h4 {
   margin-bottom: 16px;
 }
+.versions-list-section .el-table {
+  --el-table-bg-color: #19202e;
+}
 .prediction-chart {
   margin-top: 20px;
 }
diff --git a/UI/src/views/prediction/ProductPredictionView.vue b/UI/src/views/prediction/ProductPredictionView.vue
index acbe77f..44990fd 100644
--- a/UI/src/views/prediction/ProductPredictionView.vue
+++ b/UI/src/views/prediction/ProductPredictionView.vue
@@ -83,30 +83,20 @@
 
       <div v-if="availableVersions.length > 0" class="versions-list-section">
         <h4>📦 可用模型版本</h4>
-        <el-table :data="availableVersions" style="width: 100%" v-loading="versionsLoading">
-          <el-table-column prop="product_name" label="药品名称" width="220"></el-table-column>
-          <el-table-column prop="version" label="版本号" width="180"></el-table-column>
-          <el-table-column prop="created_at" label="创建时间" width="200">
+        <el-table :data="availableVersions" style="width: 100%;" v-loading="versionsLoading">
+          <el-table-column prop="product_name" label="药品名称"></el-table-column>
+          <el-table-column prop="version" label="版本号"></el-table-column>
+          <el-table-column prop="created_at" label="创建时间">
              <template #default="{ row }">
               {{ new Date(row.created_at).toLocaleString() }}
             </template>
           </el-table-column>
-          <el-table-column prop="metrics.mae" label="MAE">
+          <el-table-column prop="model_type" label="算法类型">
             <template #default="{ row }">
-              {{ row.metrics && row.metrics.mae ? row.metrics.mae.toFixed(4) : 'N/A' }}
+              {{ getModelTypeName(row.model_type) }}
             </template>
           </el-table-column>
-          <el-table-column prop="metrics.rmse" label="RMSE">
-             <template #default="{ row }">
-              {{ row.metrics && row.metrics.rmse ? row.metrics.rmse.toFixed(4) : 'N/A' }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="metrics.mape" label="MAPE (%)">
-             <template #default="{ row }">
-              {{ row.metrics && row.metrics.mape ? (row.metrics.mape * 100).toFixed(2) : 'N/A' }}
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="150">
+          <el-table-column label="操作">
             <template #default="{ row }">
               <el-button
                 type="primary"
@@ -175,6 +165,11 @@ const fetchModelTypes = async () => {
   }
 }
 
+const getModelTypeName = (typeId) => {
+  const model = modelTypes.value.find(m => m.id === typeId);
+  return model ? model.name : typeId;
+};
+
 const fetchAvailableVersions = async () => {
   if (!form.product_id || !form.model_type) {
     availableVersions.value = []
@@ -384,10 +379,14 @@ watch([() => form.product_id, () => form.model_type], () => {
   margin-top: 20px;
   padding-top: 20px;
   border-top: 1px solid #ebeef5;
+  padding-bottom: 20px;
 }
 .versions-list-section h4 {
   margin-bottom: 16px;
 }
+.versions-list-section .el-table {
+  --el-table-bg-color: #19202e;
+}
 .prediction-chart {
   margin-top: 20px;
 }
diff --git a/UI/src/views/prediction/StorePredictionView.vue b/UI/src/views/prediction/StorePredictionView.vue
index 2a960f8..b49f5f5 100644
--- a/UI/src/views/prediction/StorePredictionView.vue
+++ b/UI/src/views/prediction/StorePredictionView.vue
@@ -84,29 +84,19 @@
       <div v-if="availableVersions.length > 0" class="versions-list-section">
         <h4>📦 可用模型版本</h4>
         <el-table :data="availableVersions" style="width: 100%" v-loading="versionsLoading">
-          <el-table-column prop="store_name" label="店铺名称" width="220"></el-table-column>
-          <el-table-column prop="version" label="版本号" width="180"></el-table-column>
-          <el-table-column prop="created_at" label="创建时间" width="200">
+          <el-table-column prop="store_name" label="店铺名称"></el-table-column>
+          <el-table-column prop="version" label="版本号"></el-table-column>
+          <el-table-column prop="created_at" label="创建时间">
              <template #default="{ row }">
               {{ new Date(row.created_at).toLocaleString() }}
             </template>
           </el-table-column>
-          <el-table-column prop="metrics.mae" label="MAE">
+          <el-table-column prop="model_type" label="算法类型">
             <template #default="{ row }">
-              {{ row.metrics && row.metrics.mae ? row.metrics.mae.toFixed(4) : 'N/A' }}
+              {{ getModelTypeName(row.model_type) }}
             </template>
           </el-table-column>
-          <el-table-column prop="metrics.rmse" label="RMSE">
-             <template #default="{ row }">
-              {{ row.metrics && row.metrics.rmse ? row.metrics.rmse.toFixed(4) : 'N/A' }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="metrics.mape" label="MAPE (%)">
-             <template #default="{ row }">
-              {{ row.metrics && row.metrics.mape ? (row.metrics.mape * 100).toFixed(2) : 'N/A' }}
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="150">
+          <el-table-column label="操作">
             <template #default="{ row }">
               <el-button
                 type="primary"
@@ -174,6 +164,11 @@ const fetchModelTypes = async () => {
   }
 }
 
+const getModelTypeName = (typeId) => {
+  const model = modelTypes.value.find(m => m.id === typeId);
+  return model ? model.name : typeId;
+};
+
 const fetchAvailableVersions = async () => {
   if (!form.store_id || !form.model_type) {
     availableVersions.value = []
@@ -382,10 +377,14 @@ watch([() => form.store_id, () => form.model_type], () => {
   margin-top: 20px;
   padding-top: 20px;
   border-top: 1px solid #ebeef5;
+  padding-bottom: 20px;
 }
 .versions-list-section h4 {
   margin-bottom: 16px;
 }
+.versions-list-section .el-table {
+  --el-table-bg-color: #19202e;
+}
 .prediction-chart {
   margin-top: 20px;
 }
diff --git a/lyf开发日志记录文档.md b/lyf开发日志记录文档.md
index c4b8a1c..17d8144 100644
--- a/lyf开发日志记录文档.md
+++ b/lyf开发日志记录文档.md
@@ -355,3 +355,24 @@
 - **根本原因**: 模型训练后保存的评估指标 (`metrics`) 是NumPy的 `float32` 数据类型，标准的Flask JSON编码器无法处理。
 - **修复方案**: 在 `server/api.py` 的 `get_model_versions_api`, `get_store_model_versions_api`, 和 `get_global_model_versions_api` 三个接口中，增加了一个处理步骤。在返回JSON响应之前，显式地遍历 `metrics` 字典，将所有值从NumPy类型（如 `float32`）强制转换为标准的Python `float` 类型，从而彻底解决了该序列化问题。
 - **最终结论**: 至此，所有预测页面的UI重构和功能升级已全部完成，相关的数据链路和bug也已修复。系统现在能够为用户提供更加清晰、详细的模型版本信息，并支持基于这些信息直接发起预测。
+
+
+---
+
+## 2025-07-23：预测页面UI二次优化与同步
+**开发者**: lyf
+
+### 14:00 - 功能优化：简化模型版本列表
+- **任务目标**: 根据最新需求，对所有预测页面（“按药品”、“按店铺”、“全局模型”）的模型版本列表进行界面简化和美化，提升信息的可读性和界面的整洁度。
+- **实现方案**:
+    1.  **精简列信息**: 在 `ProductPredictionView.vue`, `StorePredictionView.vue`, 和 `GlobalPredictionView.vue` 三个文件中，统一移除了原有的 `MAE`, `RMSE`, `MAPE` 等性能指标列。
+    2.  **核心信息补充**: 新增了“算法类型”列，让用户能更直观地了解每个模型版本所使用的算法。
+    3.  **特殊化处理**: 针对“全局模型”页面的独特性，特别保留了“聚合方法”列，确保了其业务信息的完整性。
+
+### 14:30 - 样式美化：提升表格视觉体验
+- **任务目标**: 解决之前版本中表格样式存在的问题，包括宽度不匹配、边距过近以及背景色区分度不高等。
+- **实现方案**:
+    1.  **动态列宽**: 移除了所有 `el-table-column` 的固定 `width` 属性，使表格能够根据内容自动调整列宽，并完美地铺满其父容器。
+    2.  **优化间距**: 为包裹表格的 `.versions-list-section` 容器增加了 `padding-bottom` 样式，解决了表格底部边框线与后续内容紧贴的问题。
+    3.  **增强层次感**: 通过CSS变量 `--el-table-bg-color` 为 `el-table` 组件设置了独立的背景色，使其在深色主题下能与主背景形成微妙而有效的区分，提升了整体UI的质感。
+- **最终结论**: 本次优化后，所有预测页面的模型版本列表在信息呈现上更加简洁、核心，同时视觉样式也更加美观、专业，符合了最新的UI/UX要求。
diff --git a/prediction_history.db b/prediction_history.db
index ae93a12cc12689ab5568347975291d7fa48fc5dd..22c9cb4dbf840b9bbd63753b5f3461e0c2ad18b5 100644
GIT binary patch
delta 2266
zcma)7TWl0%6yDjHwzIq48&J1UT1pd1vHrt<zpNr?0x>2;Y9O=}+Ro1Gk^-fHA_jc`
zqs0d=(KO+YKA0*sJ{iQuRD%dnA52UP8Z`PMYNCmkm>^HQi2q(>34L&Ov&sBt&wTUE
zcfNDZ$+`T=OZk_(T7p<Cw)K_XO;&Jjd_L>mpSfZJv8}W1xnuFnm4!Uq-?H#m$FFXS
ziEbHL_`YYr3P)qtWA0#<#>4cd@fTZ{w>|6jr;_ny$q(XJ+Y+rWxldY$vfpKXcHYc<
zn3~C+ZM&IGwY_7zi9gbRw)~zV?N3?1S*z`TS{LnaV%M{$oG+|P>BEU0Ym0j(xgzmu
z`e94Y4)s2NqTk+W2`B>`1Ol*%j{z-J6exud0#0y+vw#N`ULLI`a>^(ymji%#1p*pY
zN}yB@APCB3Sw`GPEG+G<CQ1|rfnp&DRTuzTmI_Gb`yeDGj>?=ug2kR{;t7Ijh!LV7
zkf8ungar5%i~zzF30bI=WNM@a>B|yElmo_0HWd{NBsWZn3?N4pTta2IyP7BhKcq}D
zz$9mY28@D|??Vvskc9|Sj$t@lO=J~VdZbdO)Vwz=0m`WYJ~c-uE0R_eMMC;R)l4iT
zM<NJ;3RoGKxB?1s0z|;fLm-n<mUk`O*Y{bsHTvFWr?+p^y%5WOo_RepoY|Uo+OM_$
zkUEkYOZFswNqn8?Oor~4vwh<aB@+)M1`;jq-|p4faD02*y<p66qwPe_Sy{059h@rp
z2PY3sADtY{Io-=Gh|CvadcZ%lcbU^&u#hlE4rMK8&(hGy($MZ&sDVUkHx4h!>X;l_
z5}Vxh%;3axgA<nd#TN%B?1gV1YmN29(j&?9Zdc2A{E|7``pm2u$;WnfZ!3_s)`O>x
z=kpy;cSR|*zWBb~uX}~HR^M!MGHF(XxQLmDjm%R2M4WpUk0a-t<wpVY_D@e8n(5wM
zXR@KmL`HB@ok_0K0Syw+V~iuL2hUp_I(Nn@G?+vIt22?qRVLGgO-&|Itf~+9IXm_C
znRvRUNrn~~FCyw;YP>A;we9wb(>v_W#VdC^?^=Eo#D*|KON6Pm!T<F`Q<y3fRAkDd
zN+?8XOm0^u3R;88t|e5WbX=24nidHw65=t#1m0Pr^-;iTOcqDBId8=?X=7yDRk3uC
z{KQqJCkI?P(>iKMu0(Z9@2gol%G}gvH#!^E5ezW{PykGpH7|D{V{lR=)Dv7WRWD{$
z!p<aN)I$=Rv7`Odagrj0Nl!|K8PPvZ*j>6e5iev2;m{LUU_}*1`VH=^)V;%2A#MI3
zo|)EyA;mPBvT>49<VlE?kb3h+)@nWXgk5MgsKg`s>;bz+fBd#xMO4D$L|`Z&K{_X$
zd;BP`SubSI-fAHqT`sB?f4rtql$D_`zZPG=(ag2!qf<x9WB(1hF%ua(hMIcinwJgf
zkn+r6Mua!rm!d`!#wjNp&t9BgrRRpMRcXq(hd5RcOM*3=YAD!F1@br-+?1y#EY49O
z%<Tekg`}b;n!jOtc`CTa8O59vCMZTqqj?MDsKg$nP*F*x*_Kj&Rj>**CG$pn4@$-%
zl8~E?$Mw{_)$d2qqb}yEJ-2nmbWO}CYxP!FtX^X_8S1-3GhC$DQ&>POW-p%^SX_6P
Q{eq=CrPH@Q3VMy&zkU)!F8}}l

delta 210
zcmZoTAlR@#aDp^zGy?;J>qG^6#^{X+OZYjg`ECLQ7+fdw2$XFWG{|Ay{BG)Nj?Fja
zv>6q`n5-E%0{KmtQg{zD^|A@Gw{U21b8+opy3fwZ*2hsbSwlfijQJnicIK=6Z7ipG
z3pwRD7ITSk&gAu&oT1RYd4WI#<7R86BeINPn;cja<ia=u8Te1|&Et#YbK_;<`N(sR
zyNElUOOEp?=OwO`$!ZBslZz4pfUcO!(HxlB9+=4p#7x@*GnqGEV`JovX5ftmN(S<7
KkM?C*$^-y#cs#TK