支撑位和阻力位列内容居中展示

web/frontend/src/views/DailyDirectionView.vue

@@ -88,15 +88,19 @@ async function handleRun() {
   }
 }
 
-function formatLevels(json: string): string {
+function parseLevels(json: string): number[] {
   try {
-    const arr = JSON.parse(json) as number[]
-    return arr.join(', ')
+    return JSON.parse(json) as number[]
   } catch {
-    return '-'
+    return []
   }
 }
 
+function levelAt(json: string, i: number): string {
+  const arr = parseLevels(json)
+  return arr[i] != null ? String(arr[i]) : '-'
+}
+
 function openDrawer(row: DailyDirection) {
   selectedRow.value = row
   drawerOpen.value = true
@@ -146,14 +150,23 @@ onMounted(fetchList)
           </span>
         </template>
       </el-table-column>
-      <el-table-column label="支撑位" width="130">
-        <template #default="{ row }">{{ formatLevels(row.support) }}</template>
+      <el-table-column label="支撑位一" width="100" align="center">
+        <template #default="{ row }">{{ levelAt(row.support, 0) }}</template>
       </el-table-column>
-      <el-table-column label="阻力位" width="130">
-        <template #default="{ row }">{{ formatLevels(row.resistance) }}</template>
+      <el-table-column label="支撑位二" width="100" align="center">
+        <template #default="{ row }">{{ levelAt(row.support, 1) }}</template>
+      </el-table-column>
+      <el-table-column label="阻力位一" width="100" align="center">
+        <template #default="{ row }">{{ levelAt(row.resistance, 0) }}</template>
+      </el-table-column>
+      <el-table-column label="阻力位二" width="100" align="center">
+        <template #default="{ row }">{{ levelAt(row.resistance, 1) }}</template>
+      </el-table-column>
+      <el-table-column label="明细" width="80" align="center">
+        <template #default="{ row }">
+          <el-button type="primary" link size="small" @click.stop="openDrawer(row)">查看</el-button>
+        </template>
       </el-table-column>
-      <el-table-column prop="reasoning" label="分析逻辑" min-width="200" show-overflow-tooltip />
-      <el-table-column prop="risk_note" label="风险提示" min-width="120" show-overflow-tooltip />
     </el-table>
 
     <el-drawer v-model="drawerOpen" :title="drawerTitle" size="480px" direction="rtl">
@@ -169,16 +182,24 @@ onMounted(fetchList)
         </div>
 
         <div class="drawer-section">
-          <div class="drawer-label">关键价位</div>
-          <div class="drawer-levels">
-            <div class="level-block support">
-              <span class="level-tag">支撑</span>
-              <span>{{ formatLevels(selectedRow.support) || '-' }}</span>
+          <div class="drawer-label">支撑位</div>
+          <div class="level-rows">
+            <div v-for="(v, i) in parseLevels(selectedRow.support)" :key="'ds'+i" class="level-row sup">
+              <span class="level-tag">支撑{{ i + 1 }}</span>
+              <span class="level-val">{{ v }}</span>
             </div>
-            <div class="level-block resistance">
-              <span class="level-tag">阻力</span>
-              <span>{{ formatLevels(selectedRow.resistance) || '-' }}</span>
+            <div v-if="!parseLevels(selectedRow.support).length" class="level-row">-</div>
+          </div>
+        </div>
+
+        <div class="drawer-section">
+          <div class="drawer-label">阻力位</div>
+          <div class="level-rows">
+            <div v-for="(v, i) in parseLevels(selectedRow.resistance)" :key="'dr'+i" class="level-row res">
+              <span class="level-tag">阻力{{ i + 1 }}</span>
+              <span class="level-val">{{ v }}</span>
             </div>
+            <div v-if="!parseLevels(selectedRow.resistance).length" class="level-row">-</div>
           </div>
         </div>
 
@@ -222,7 +243,7 @@ onMounted(fetchList)
 .drawer-label {
   font-size: 13px;
   color: var(--el-text-color-secondary);
-  margin-bottom: 6px;
+  margin-bottom: 8px;
 }
 .drawer-confidence {
   margin-left: 12px;
@@ -238,29 +259,39 @@ onMounted(fetchList)
 .drawer-text.risk {
   color: var(--el-color-warning);
 }
-.drawer-levels {
+
+.level-rows {
   display: flex;
-  gap: 24px;
+  flex-direction: column;
+  gap: 8px;
 }
-.level-block {
+.level-row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
 }
 .level-tag {
   font-size: 12px;
-  padding: 2px 8px;
+  padding: 2px 10px;
   border-radius: 4px;
   font-weight: 600;
+  min-width: 54px;
+  text-align: center;
 }
-.support .level-tag {
+.level-row.sup .level-tag {
   background: #ecf5ff;
   color: #409eff;
 }
-.resistance .level-tag {
+.level-row.res .level-tag {
   background: #fef0f0;
   color: #f56c6c;
 }
+.level-val {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+}
+
 .drawer-section.meta {
   margin-top: 24px;
   padding-top: 16px;