日内方向分析详情改用抽屉面板展示，点击表格行查看完整逻辑与风险提示

web/frontend/src/views/DailyDirectionView.vue

@@ -14,6 +14,8 @@ const loading = ref(false)
 const running = ref(false)
 const runStep = ref('')
 const runResult = ref<DailyDirectionRunResponse | null>(null)
+const selectedRow = ref<DailyDirection | null>(null)
+const drawerOpen = ref(false)
 
 const symbolNames: Record<string, string> = {
   FG: '玻璃', SA: '纯碱', RB: '螺纹钢', MA: '甲醇', CF: '棉花', M: '豆粕',
@@ -46,6 +48,12 @@ const runSummary = computed(() => {
   return parts.join('  |  ')
 })
 
+const drawerTitle = computed(() => {
+  if (!selectedRow.value) return ''
+  const name = symbolNames[selectedRow.value.symbol] ?? selectedRow.value.symbol
+  return `${name}(${selectedRow.value.symbol}) · ${selectedRow.value.trade_date}`
+})
+
 async function fetchList() {
   loading.value = true
   try {
@@ -89,6 +97,11 @@ function formatLevels(json: string): string {
   }
 }
 
+function openDrawer(row: DailyDirection) {
+  selectedRow.value = row
+  drawerOpen.value = true
+}
+
 onMounted(fetchList)
 </script>
 
@@ -101,7 +114,6 @@ onMounted(fetchList)
       </el-button>
     </div>
 
-    <!-- 运行结果摘要 -->
     <el-alert
       v-if="runResult"
       :title="`${runResult.trade_date} 分析结果`"
@@ -112,8 +124,7 @@ onMounted(fetchList)
       style="margin-bottom: 16px"
     />
 
-    <!-- 表格 -->
+    <el-table :data="items" stripe v-loading="loading" empty-text="暂无数据，请先执行分析" highlight-current-row @row-click="openDrawer">
-    <el-table :data="items" stripe v-loading="loading" empty-text="暂无数据，请先执行分析">
       <el-table-column prop="symbol" label="品种" width="80">
         <template #default="{ row }">
           {{ symbolNames[row.symbol] ?? row.symbol }}
@@ -128,22 +139,65 @@ onMounted(fetchList)
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="confidence" label="置信度" width="90">
+      <el-table-column prop="confidence" label="置信度" width="90" align="center">
         <template #default="{ row }">
-          <span :style="{ color: row.confidence >= 70 ? '#67c23a' : row.confidence >= 50 ? '#e6a23c' : '#f56c6c' }">
+          <span :style="{ color: row.confidence >= 70 ? '#67c23a' : row.confidence >= 50 ? '#e6a23c' : '#f56c6c', fontWeight: 'bold' }">
             {{ row.confidence }}%
           </span>
         </template>
       </el-table-column>
-      <el-table-column label="支撑位" width="120">
+      <el-table-column label="支撑位" width="130">
         <template #default="{ row }">{{ formatLevels(row.support) }}</template>
       </el-table-column>
-      <el-table-column label="阻力位" width="120">
+      <el-table-column label="阻力位" width="130">
         <template #default="{ row }">{{ formatLevels(row.resistance) }}</template>
       </el-table-column>
-      <el-table-column prop="reasoning" label="分析逻辑" min-width="280" show-overflow-tooltip />
+      <el-table-column prop="reasoning" label="分析逻辑" min-width="200" show-overflow-tooltip />
-      <el-table-column prop="risk_note" label="风险提示" min-width="160" 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">
+      <template v-if="selectedRow">
+        <div class="drawer-section">
+          <div class="drawer-label">方向判断</div>
+          <el-tag :type="directionType(selectedRow.direction)" size="default">
+            {{ directionLabel(selectedRow.direction) }}
+          </el-tag>
+          <span class="drawer-confidence" :style="{ color: selectedRow.confidence >= 70 ? '#67c23a' : selectedRow.confidence >= 50 ? '#e6a23c' : '#f56c6c' }">
+            置信度 {{ selectedRow.confidence }}%
+          </span>
+        </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>
+            <div class="level-block resistance">
+              <span class="level-tag">阻力</span>
+              <span>{{ formatLevels(selectedRow.resistance) || '-' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="drawer-section">
+          <div class="drawer-label">分析逻辑</div>
+          <div class="drawer-text">{{ selectedRow.reasoning || '-' }}</div>
+        </div>
+
+        <div class="drawer-section">
+          <div class="drawer-label">风险提示</div>
+          <div class="drawer-text risk">{{ selectedRow.risk_note || '-' }}</div>
+        </div>
+
+        <div class="drawer-section meta">
+          <span>分析日期：{{ selectedRow.trade_date }}</span>
+          <span>目标交易日：{{ selectedRow.target_date }}</span>
+        </div>
+      </template>
+    </el-drawer>
   </div>
 </template>
 
@@ -161,4 +215,59 @@ onMounted(fetchList)
   margin: 0;
   font-size: 18px;
 }
+
+.drawer-section {
+  margin-bottom: 20px;
+}
+.drawer-label {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+  margin-bottom: 6px;
+}
+.drawer-confidence {
+  margin-left: 12px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.drawer-text {
+  font-size: 15px;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  color: var(--el-text-color-primary);
+}
+.drawer-text.risk {
+  color: var(--el-color-warning);
+}
+.drawer-levels {
+  display: flex;
+  gap: 24px;
+}
+.level-block {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.level-tag {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+.support .level-tag {
+  background: #ecf5ff;
+  color: #409eff;
+}
+.resistance .level-tag {
+  background: #fef0f0;
+  color: #f56c6c;
+}
+.drawer-section.meta {
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--el-border-color-light);
+  display: flex;
+  gap: 24px;
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
 </style>