新增二板日历详情数据按涨停时间升序排序

src/views/stock/SecondBoardCalendar.vue

@@ -140,11 +140,18 @@
 
       <el-tabs v-model="activeDetailTab" class="detail-tabs">
         <el-tab-pane :label="`涨停板(${limitStocks.length})`" name="limit">
-          <el-table :data="limitStocks" border stripe max-height="520">
+          <el-table :data="limitStocks" border stripe max-height="520" :default-sort="defaultDetailSort">
             <el-table-column prop="name" label="股票简称" min-width="120" sortable />
             <el-table-column prop="ts_code" label="股票代码" min-width="120" sortable />
             <el-table-column prop="industry" label="行业" min-width="120" sortable show-overflow-tooltip />
-            <el-table-column prop="first_limit_time" label="首次涨停时间" width="130" align="center" sortable>
+            <el-table-column
+              prop="first_limit_time"
+              label="首次涨停时间"
+              width="130"
+              align="center"
+              sortable
+              :sort-method="sortLimitTimeColumn"
+            >
               <template #default="{ row }">
                 {{ formatLimitTime(row.first_limit_time) }}
               </template>
@@ -176,11 +183,18 @@
           </el-table>
         </el-tab-pane>
         <el-tab-pane :label="`炸板(${breakStocks.length})`" name="break">
-          <el-table :data="breakStocks" border stripe max-height="520">
+          <el-table :data="breakStocks" border stripe max-height="520" :default-sort="defaultDetailSort">
             <el-table-column prop="name" label="股票简称" min-width="120" sortable />
             <el-table-column prop="ts_code" label="股票代码" min-width="120" sortable />
             <el-table-column prop="industry" label="行业" min-width="120" sortable show-overflow-tooltip />
-            <el-table-column prop="first_limit_time" label="首次涨停时间" width="130" align="center" sortable>
+            <el-table-column
+              prop="first_limit_time"
+              label="首次涨停时间"
+              width="130"
+              align="center"
+              sortable
+              :sort-method="sortLimitTimeColumn"
+            >
               <template #default="{ row }">
                 {{ formatLimitTime(row.first_limit_time) }}
               </template>
@@ -240,6 +254,7 @@ const calendarStats = ref([]);
 const detailVisible = ref(false);
 const selectedDay = ref(null);
 const activeDetailTab = ref("limit");
+const defaultDetailSort = { prop: "first_limit_time", order: "ascending" };
 
 const monthStart = computed(() =>
   selectedMonth.value
@@ -267,10 +282,14 @@ const detailStocks = computed(() =>
   Array.isArray(selectedDayStat.value?.stocks) ? selectedDayStat.value.stocks : [],
 );
 const limitStocks = computed(() =>
-  detailStocks.value.filter((stock) => stock?.status === "limit"),
+  sortStocksByLimitTime(
+    detailStocks.value.filter((stock) => stock?.status === "limit"),
+  ),
 );
 const breakStocks = computed(() =>
-  detailStocks.value.filter((stock) => stock?.status === "break"),
+  sortStocksByLimitTime(
+    detailStocks.value.filter((stock) => stock?.status === "break"),
+  ),
 );
 const statMap = computed(() => {
   const map = new Map();
@@ -379,6 +398,37 @@ const fetchMonthData = async (withLoading = true) => {
   }
 };
 
+const sortStocksByLimitTime = (stocks) =>
+  [...stocks].sort(
+    (left, right) =>
+      getLimitTimeSortValue(left?.first_limit_time) -
+      getLimitTimeSortValue(right?.first_limit_time),
+  );
+
+const sortLimitTimeColumn = (left, right) =>
+  getLimitTimeSortValue(left?.first_limit_time) -
+  getLimitTimeSortValue(right?.first_limit_time);
+
+const getLimitTimeSortValue = (value) => {
+  if (value === null || value === undefined || value === "") {
+    return Number.MAX_SAFE_INTEGER;
+  }
+
+  const text = String(value);
+  const timeMatch = text.match(/(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?/);
+  if (timeMatch) {
+    const [, hour, minute, second = "0"] = timeMatch;
+    return Number(hour) * 3600 + Number(minute) * 60 + Number(second);
+  }
+
+  const digits = text.replace(/\D/g, "");
+  if (!digits) return Number.MAX_SAFE_INTEGER;
+
+  const timeDigits = digits.length > 6 ? digits.slice(-6) : digits;
+  const number = Number(timeDigits);
+  return Number.isFinite(number) ? number : Number.MAX_SAFE_INTEGER;
+};
+
 const formatRate = (value) => {
   if (value === null || value === undefined || value === "") return "--";