feat: 全屏个股详情预览 + Tailwind 改版 + 账号鉴权

frontend/src/views/HomeView.vue

@@ -5,31 +5,42 @@ import { RouterLink } from 'vue-router';
 const features = [
   {
     to: '/screener',
-    icon: 'pi pi-sparkles',
+    icon: 'M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3z',
+    accent: 'bg-blue-50 text-blue-600',
     title: '智能选股',
-    desc: '用一句自然语言描述条件（如「这两天 KDJ 的 J 小于 10，市值 100~200 亿」），AI 解析后全市场筛选。',
-    tags: ['KDJ / RSI / MACD / 布林', '市值 · 市盈率 · 换手率', 'AI 条件解析'],
+    desc: '用自然语言描述选股条件，快速完成全市场筛选。',
   },
   {
     to: '/backtest',
-    icon: 'pi pi-chart-line',
+    icon: 'M3 17l6-6 4 4 8-8M21 7v6h-6',
+    accent: 'bg-emerald-50 text-emerald-600',
     title: '策略回测',
-    desc: '选标的、调参数，跑历史回测：K 线 + 指标 + 买卖点 + 净值曲线与绩效指标，A股真实成本建模。',
-    tags: ['MACD / 双均线 / 单均线', 'T+1 · 印花税 · 佣金', '净值与绩效'],
+    desc: '选择标的与策略参数，查看历史表现和关键绩效指标。',
   },
 ];
 </script>
 
 <template>
-  <div class="home-grid">
-    <RouterLink v-for="f in features" :key="f.to" :to="f.to" class="feature-card">
-      <div class="fc-icon"><i :class="f.icon"></i></div>
-      <div class="fc-title">{{ f.title }}</div>
-      <div class="fc-desc">{{ f.desc }}</div>
-      <div class="fc-tags">
-        <span v-for="t in f.tags" :key="t" class="fc-tag">{{ t }}</span>
-      </div>
-      <div class="fc-enter">进入 <i class="pi pi-arrow-right"></i></div>
-    </RouterLink>
+  <div class="w-full max-w-5xl">
+    <div class="grid gap-6 sm:grid-cols-2">
+      <RouterLink
+        v-for="f in features"
+        :key="f.to"
+        :to="f.to"
+        class="group flex min-h-72 flex-col rounded-lg border border-slate-200 bg-white p-8 transition-all hover:-translate-y-1 hover:border-slate-300 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-80 sm:p-10"
+      >
+        <span :class="['flex h-14 w-14 items-center justify-center rounded-lg', f.accent]">
+          <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path :d="f.icon" />
+          </svg>
+        </span>
+        <div class="mt-7 text-2xl font-semibold">{{ f.title }}</div>
+        <p class="mt-3 max-w-sm text-sm leading-6 text-slate-500">{{ f.desc }}</p>
+        <div class="mt-auto flex items-center gap-1.5 pt-8 text-sm font-medium text-blue-600">
+          进入
+          <svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+        </div>
+      </RouterLink>
+    </div>
   </div>
 </template>