适配移动端展示

web/frontend/src/views/ChartView.vue

@@ -4,6 +4,9 @@ import { ElMessage } from 'element-plus'
 import { listContracts } from '@/api/scores'
 import { listCandles, type Candle } from '@/api/candles'
 import KLineChart from '@/components/KLineChart.vue'
+import { useMobile } from '@/composables/useMobile'
+
+const { isMobile } = useMobile()
 
 const filter = reactive<{ ts_code: string; range: [string, string] | [] }>({
   ts_code: '',
@@ -40,13 +43,13 @@ onMounted(async () => {
 <template>
   <div class="page">
     <el-card shadow="never" class="filter-card">
-      <el-form :inline="true">
+      <el-form :inline="!isMobile">
         <el-form-item label="合约">
           <el-select
             v-model="filter.ts_code"
             placeholder="选择合约"
             filterable
-            style="width: 200px"
+            :style="{ width: isMobile ? '100%' : '200px' }"
           >
             <el-option v-for="c in contracts" :key="c" :label="c" :value="c" />
           </el-select>
@@ -59,6 +62,7 @@ onMounted(async () => {
             range-separator="→"
             start-placeholder="起"
             end-placeholder="止"
+            :style="{ width: isMobile ? '100%' : 'auto' }"
           />
         </el-form-item>
         <el-form-item>