合约信息拆分为品种和合约两个展示字段

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/frontend/src/components/ScoreDetailDrawer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { getScore, type Score } from '@/api/scores'
+import { parseTsCode } from '@/utils/contract'
 
 const props = defineProps<{ scoreId: number | null }>()
 const emit = defineEmits<{ (e: 'close'): void }>()
@@ -36,7 +37,8 @@ watch(
   <el-drawer v-model="visible" title="打分明细" size="640px" destroy-on-close>
     <div v-loading="loading" v-if="score">
       <el-descriptions :column="2" border>
-        <el-descriptions-item label="合约">{{ score.ts_code }}</el-descriptions-item>
+        <el-descriptions-item label="品种">{{ parseTsCode(score.ts_code).symbol }}</el-descriptions-item>
+        <el-descriptions-item label="合约">{{ parseTsCode(score.ts_code).contract }}</el-descriptions-item>
         <el-descriptions-item label="日期">{{ score.trade_date }}</el-descriptions-item>
         <el-descriptions-item label="收盘">{{ score.close }}</el-descriptions-item>
         <el-descriptions-item label="持仓">{{ score.oi }}</el-descriptions-item>

web/frontend/src/utils/contract.ts

@@ -0,0 +1,7 @@
+export function parseTsCode(tsCode: string): { symbol: string; contract: string } {
+  const m = tsCode.match(/^([A-Za-z]+)(\d{4})\.[A-Z]+$/)
+  if (!m) {
+    return { symbol: tsCode, contract: '' }
+  }
+  return { symbol: m[1], contract: m[2] }
+}

web/frontend/src/views/RunView.vue

@@ -3,6 +3,7 @@ import { onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { listContracts } from '@/api/scores'
 import { runPipeline, type RunResponse } from '@/api/run'
+import { parseTsCode } from '@/utils/contract'
 
 const SYMBOLS = ['FG', 'SA', 'RB', 'MA', 'CF', 'M']
 
@@ -112,7 +113,8 @@ onMounted(async () => {
         <span>打分结果</span>
       </template>
       <el-descriptions :column="2" border>
-        <el-descriptions-item label="合约">{{ result.ts_code }}</el-descriptions-item>
+        <el-descriptions-item label="品种">{{ parseTsCode(result.ts_code).symbol }}</el-descriptions-item>
+        <el-descriptions-item label="合约">{{ parseTsCode(result.ts_code).contract }}</el-descriptions-item>
         <el-descriptions-item label="日期">{{ result.trade_date }}</el-descriptions-item>
         <el-descriptions-item label="收盘">{{ result.close }}</el-descriptions-item>
         <el-descriptions-item label="持仓">{{ result.oi }}</el-descriptions-item>

web/frontend/src/views/ScoresView.vue

@@ -2,6 +2,7 @@
 import { onMounted, reactive, ref } from 'vue'
 import { listContracts, listScores, type Score } from '@/api/scores'
 import ScoreDetailDrawer from '@/components/ScoreDetailDrawer.vue'
+import { parseTsCode } from '@/utils/contract'
 
 const filter = reactive<{ ts_code?: string; range: [string, string] | []; limit: number }>({
   ts_code: undefined,
@@ -79,7 +80,16 @@ onMounted(async () => {
 
     <el-table :data="rows" v-loading="loading" stripe class="score-table">
       <el-table-column prop="trade_date" label="日期" width="100" />
-      <el-table-column prop="ts_code" label="合约" width="140" />
+      <el-table-column label="品种" width="80">
+        <template #default="{ row }">
+          {{ parseTsCode(row.ts_code).symbol }}
+        </template>
+      </el-table-column>
+      <el-table-column label="合约" width="80">
+        <template #default="{ row }">
+          {{ parseTsCode(row.ts_code).contract }}
+        </template>
+      </el-table-column>
       <el-table-column prop="close" label="收盘" width="90" />
       <el-table-column prop="oi" label="持仓" width="100" />
       <el-table-column prop="oi_chg" label="持仓变化" width="100" />