feat(recall): 添加身份证号查询页面和路由配置

新增身份证号查询页面组件(IDQueryPage.vue)并配置对应路由
添加相关静态资源图片用于页面展示

 /*
 /*
  * @Date: 2025-03-20 20:36:36
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-23 13:45:36
+ * @LastEditTime: 2025-12-23 14:27:58
  * @FilePath: /mlaj/src/router/routes.js
  * @FilePath: /mlaj/src/router/routes.js
  * @Description: 路由地址映射配置
  * @Description: 路由地址映射配置
  */
  */
@@ -121,6 +121,18 @@ export const routes = [
     meta: { title: '完善信息页' },
     meta: { title: '完善信息页' },
   },
   },
   {
   {
+    path: '/recall/id-query',
+    name: 'IDQuery',
+    component: () => import('../views/recall/IDQueryPage.vue'),
+    meta: { title: '身份证号查询信息页' },
+  },
+  {
+    path: '/recall/timeline',
+    name: 'Timeline',
+    component: () => import('../views/recall/timeline.vue'),
+    meta: { title: '加入时间/活动记录' },
+  },
+  {
     path: '/checkout',
     path: '/checkout',
     name: 'CheckoutPage',
     name: 'CheckoutPage',
     component: () => import('../views/checkout/CheckoutPage.vue'),
     component: () => import('../views/checkout/CheckoutPage.vue'),

+<template>
+  <div class="id-query-page w-full min-h-screen relative overflow-hidden flex flex-col items-center">
+    <!-- Starry Background -->
+    <StarryBackground :bg-image="bgImg" />
+
+    <!-- Main Content Card -->
+    <div class="w-full px-6 mt-20 z-10">
+      <FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
+        <!-- Illustration -->
+        <div class="flex justify-center mb-2">
+          <!-- Placeholder for the illustration -->
+          <img :src="emptyStateImg" class="w-32 h-32 object-contain" alt="No Data" />
+        </div>
+
+        <!-- Description Text -->
+        <p class="text-[#FFDD01] text-center text-sm mb-6 leading-relaxed tracking-wide">
+          时光机没有找到您的历史活动信息，<br />
+          试试输入活动报名时登记的身份证号吧~
+        </p>
+
+        <!-- Dashed Separator -->
+        <div class="w-full h-[1px] border-t border-dashed border-white/30 my-8"></div>
+
+        <!-- ID Card Input Section -->
+        <div class="space-y-4">
+          <label class="block text-white font-bold text-lg tracking-wide">身份证号</label>
+          <van-field
+            v-model="idCard"
+            placeholder="请输入您的身份证号"
+            class="custom-input rounded-lg !bg-white/10 !text-white !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)] !p-3"
+            :border="false"
+            clearable
+          />
+
+          <!-- Notes -->
+          <div class="space-y-4" style="margin-top: 2rem;">
+            <!-- Note 1 -->
+            <div class="flex items-start gap-2">
+              <img :src="starImg" class="w-3 h-3 mt-0.5 shrink-0" alt="star" />
+              <p class="text-xs text-white/90 leading-relaxed tracking-wide text-justify">
+                时光机为该身份证号找到的历史数据，收集到的星球币都将计入您的账号中，请谨慎如实填写
+              </p>
+            </div>
+            <!-- Note 2 -->
+            <div class="flex items-start gap-2">
+              <img :src="starImg" class="w-3 h-3 mt-0.5 shrink-0" alt="star" />
+              <p class="text-xs text-white/90 leading-relaxed tracking-wide text-justify">
+                时光机为每个身份证号找到的历史数据，只能参与一次（即一个账号的）星球币累积
+              </p>
+            </div>
+          </div>
+        </div>
+      </FrostedGlass>
+    </div>
+
+    <!-- Confirm Button -->
+    <div class="w-full px-6 mt-auto z-10 mb-8">
+      <van-button block
+        class="submit-btn !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]"
+        @click="handleConfirm">
+        确认
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useTitle } from '@vueuse/core'
+import { showToast } from 'vant'
+
+// Assets
+import bgImg from '@/assets/images/recall/bg01@2x.png'
+import starImg from '@/assets/images/recall/xing@2x.png'
+import emptyStateImg from '@/assets/images/recall/no@2x.png'
+
+const route = useRoute()
+const router = useRouter()
+useTitle('身份证号查询')
+
+const idCard = ref('')
+
+// ID Card Validation
+const validateIdCard = (id) => {
+  // 15 or 18 digit validation
+  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
+  return reg.test(id)
+}
+
+const handleConfirm = () => {
+  if (!idCard.value) {
+    showToast('请输入身份证号')
+    return
+  }
+
+  if (!validateIdCard(idCard.value)) {
+    showToast('请输入正确的身份证号')
+    return
+  }
+
+  // TODO: Submit logic
+  showToast('验证通过')
+  // router.push(...)
+}
+</script>
+
+<style lang="less" scoped>
+.custom-input {
+  ::v-deep(.van-field__control) {
+    color: #fff;
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+}
+</style>