feat(router): 添加历史足迹页面路由和视图组件

添加新的历史足迹页面路由'/recall'，并创建对应的视图组件Index.vue
组件包含用户头像、欢迎语、加入时间统计等信息
移除vite配置中未使用的postcss插件配置

@@ -97,6 +97,12 @@ export const routes = [
     meta: { title: '我的活动' },
     meta: { title: '我的活动' },
   },
   },
   {
   {
+    path: '/recall',
+    name: 'Recall',
+    component: () => import('../views/recall/Index.vue'),
+    meta: { title: '历史足迹' },
+  },
+  {
     path: '/checkout',
     path: '/checkout',
     name: 'CheckoutPage',
     name: 'CheckoutPage',
     component: () => import('../views/checkout/CheckoutPage.vue'),
     component: () => import('../views/checkout/CheckoutPage.vue'),

+<!--
+ * @Date: 2025-12-19 15:40:34
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-12-19 16:00:08
+ * @FilePath: /mlaj/src/views/recall/Index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="min-h-screen bg-[#F0FBF9] flex flex-col items-center pt-20 pb-10 px-6 relative overflow-hidden">
+    <!-- 头像 -->
+    <div class="relative mb-6">
+        <img
+            :src="userAvatar || defaultAvatar"
+            class="w-24 h-24 rounded-full border-4 border-white shadow-lg object-cover"
+            alt="User Avatar"
+        />
+    </div>
+
+    <!-- 欢迎语 -->
+    <h1 class="text-2xl font-bold text-[#1A3B34] mb-2">{{ userName }}</h1>
+    <h2 class="text-xl font-bold text-[#1A3B34] mb-4">欢迎回归美乐爱觉宇宙</h2>
+    <p class="text-slate-500 text-sm mb-12">您与Behalo的故事从这里开始</p>
+
+    <!-- 时间卡片 -->
+    <div class="bg-white rounded-3xl p-8 shadow-xl w-full max-w-sm text-center mb-auto relative z-10">
+      <p class="text-slate-500 mb-4">您加入Behalo的时间</p>
+      <div class="text-3xl font-bold text-[#1A3B34] mb-4 tracking-wide">{{ joinDateFormatted }}</div>
+      <div class="text-slate-500">
+        已有 <span class="text-[#1A3B34] font-bold text-lg">{{ durationString }}</span>
+      </div>
+    </div>
+
+    <!-- 底部引导 -->
+    <div class="flex flex-col items-center mt-12 animate-bounce cursor-pointer">
+      <ChevronDoubleDownIcon class="w-6 h-6 text-[#4ADE80] mb-2" />
+      <span class="text-[#4ADE80] font-medium text-sm">向上滑动，探索更多历程</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue';
+import { useAuth } from '@/contexts/auth';
+import { ChevronDoubleDownIcon } from '@heroicons/vue/24/solid';
+import dayjs from 'dayjs';
+
+// 状态
+const { currentUser } = useAuth();
+// 使用一个通用的默认头像URL，实际项目中应替换为本地资源或配置的默认图
+const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/default_avatar.png';
+
+const userAvatar = computed(() => {
+    let avatar = currentUser.value?.avatar;
+    if (avatar && avatar.includes('cdn.ipadbiz.cn')) {
+        avatar += '?imageMogr2/thumbnail/200x/strip/quality/70';
+    }
+    return avatar;
+});
+
+const userName = computed(() => currentUser.value?.name || '旅行者');
+
+// 加入时间逻辑
+// 优先使用 created_at，如果没有则尝试 reg_time，最后回退到当前时间（防止报错）
+const joinDate = computed(() => {
+    return currentUser.value?.created_at || currentUser.value?.reg_time || new Date();
+});
+
+const joinDateFormatted = computed(() => {
+    return dayjs(joinDate.value).format('YYYY年M月D日');
+});
+
+const durationString = computed(() => {
+    const start = dayjs(joinDate.value);
+    const now = dayjs();
+    const years = now.diff(start, 'year');
+    const months = now.diff(start, 'month') % 12;
+
+    // 如果不满一个月，显示天数
+    if (years === 0 && months === 0) {
+        const days = now.diff(start, 'day');
+        return `${days} 天`;
+    }
+
+    if (years > 0) {
+        return `${years} 年 ${months} 个月`;
+    } else {
+        return `${months} 个月`;
+    }
+});
+
+onMounted(() => {
+    // 调试用，确认用户信息字段
+    console.log('Recall Page - Current User:', currentUser.value);
+});
+</script>
+
+<style scoped>
+/* 针对不同屏幕尺寸的微调可以放在这里，或者直接使用 Tailwind */
+</style>

@@ -3,6 +3,7 @@ export default {
   content: [
   content: [
     "./index.html",
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
+    // Force refresh
   ],
   ],
   theme: {
   theme: {
     extend: {
     extend: {

 /*
 /*
  * @Date: 2025-03-20 19:53:12
  * @Date: 2025-03-20 19:53:12
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-25 17:58:03
+ * @LastEditTime: 2025-12-19 15:58:39
  * @FilePath: /mlaj/vite.config.js
  * @FilePath: /mlaj/vite.config.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -66,25 +66,6 @@ export default ({ command, mode }) => {
     },
     },
     css: {
     css: {
       modules: '', // 配置 CSS modules 的行为。选项将被传递给 postcss-modules。
       modules: '', // 配置 CSS modules 的行为。选项将被传递给 postcss-modules。
-      postcss: { // 内联的 PostCSS 配置（格式同 postcss.config.js），或者一个（默认基于项目根目录的）自定义的 PostCSS 配置路径。其路径搜索是通过 postcss-load-config 实现的。 注意，如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源。
-        plugins: [
-          // postcsspxtoviewport({
-          //   unitToConvert: 'px', // 要转化的单位
-          //   viewportWidth: 375, // UI设计稿的宽度
-          //   unitPrecision: 6, // 转换后的精度，即小数点位数
-          //   propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
-          //   viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
-          //   fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
-          //   selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
-          //   minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
-          //   mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
-          //   replace: true, // 是否转换后直接更换属性值
-          //   // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
-          //   exclude: [],
-          //   landscape: false // 是否处理横屏情况
-          // })
-        ]
-      },
       preprocessorOptions: {
       preprocessorOptions: {
         // less: {
         // less: {
         //   javascriptEnabled: true,
         //   javascriptEnabled: true,