Add landing page, referral system, usage quotas, search API management, and yearly pricing

- Separate workspace landing from login for better UX
- Referral system rewards both parties with Pro days
- Quota enforcement prevents abuse without breaking endpoints
- 7-day free trial with auto-downgrade on expiry
- Admin-managed search provider config (SearXNG, Bing)
- 15% discount on annual subscriptions
- MCP search server wrapping opencode search
- Fix discovery module field name mismatch causing 422

user-frontend/src/layouts/UserLayout.vue

@@ -1,16 +1,22 @@
 <template>
   <div class="user-layout">
-    <aside class="sidebar" :class="{ collapsed }">
+    <div class="sidebar-mask" v-if="showMobileMenu" @click="showMobileMenu = false" />
+
+    <aside class="sidebar" :class="{ collapsed, 'mobile-show': showMobileMenu }">
       <div class="sidebar-header">
-        <span class="logo">{{ collapsed ? 'TM' : 'TradeMate' }}</span>
+        <router-link to="/workspace" class="logo">{{ collapsed ? 'TM' : 'TradeMate' }}</router-link>
+        <el-button v-if="showMobileMenu" text style="color:#999;font-size:20px;margin-left:auto" @click="showMobileMenu = false">
+          <el-icon><Close /></el-icon>
+        </el-button>
       </div>
       <el-menu
         :default-active="route.path"
         :collapse="collapsed"
         router
         :collapse-transition="false"
+        @select="showMobileMenu = false"
       >
-        <el-menu-item index="/"><el-icon><Odometer /></el-icon><span>工作台</span></el-menu-item>
+        <el-menu-item index="/workspace"><el-icon><Odometer /></el-icon><span>工作台</span></el-menu-item>
         <el-menu-item index="/translate"><el-icon><ChatLineSquare /></el-icon><span>智能翻译</span></el-menu-item>
         <el-menu-item index="/customers"><el-icon><User /></el-icon><span>客户管理</span></el-menu-item>
         <el-menu-item index="/products"><el-icon><Goods /></el-icon><span>产品库</span></el-menu-item>
@@ -25,11 +31,11 @@
 
     <div class="main-area">
       <header class="topbar">
-        <el-button text @click="collapsed = !collapsed" style="font-size:18px;margin-right:12px">
-          <el-icon><Fold v-if="!collapsed" /><Expand v-else /></el-icon>
+        <el-button text class="menu-btn" @click="showMobileMenu = true">
+          <el-icon :size="20"><Expand /></el-icon>
         </el-button>
-        <el-breadcrumb separator="/">
-          <el-breadcrumb-item :to="'/'">工作台</el-breadcrumb-item>
+        <el-breadcrumb separator="/" class="breadcrumb">
+          <el-breadcrumb-item :to="'/workspace'">工作台</el-breadcrumb-item>
           <el-breadcrumb-item v-if="route.meta?.title" :to="route.path">{{ route.meta.title }}</el-breadcrumb-item>
         </el-breadcrumb>
         <div class="topbar-right">
@@ -41,7 +47,7 @@
           <el-dropdown trigger="click">
             <el-button text style="display:flex;align-items:center;gap:6px">
               <el-icon><User /></el-icon>
-              <span>{{ auth.user?.username || '用户' }}</span>
+              <span class="user-name">{{ auth.user?.username || '用户' }}</span>
               <el-icon><ArrowDown /></el-icon>
             </el-button>
             <template #dropdown>
@@ -60,14 +66,14 @@
       </main>
 
       <footer class="footer">
-        <span>TradeMate 外贸小助手 &copy; {{ new Date().getFullYear() }}</span>
+        <span>TradeMate &copy; {{ new Date().getFullYear() }}</span>
       </footer>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { getUnreadCount } from '@/api'
@@ -76,10 +82,10 @@ const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
 const collapsed = ref(false)
+const showMobileMenu = ref(false)
 const unread = ref(0)
 
 onMounted(async () => {
-  await auth.fetchUser()
   try {
     const res = await getUnreadCount()
     unread.value = res.count || res || 0
@@ -88,22 +94,37 @@ onMounted(async () => {
 
 function handleLogout() {
   auth.logout()
-  router.push('/login')
+  router.push('/')
 }
 </script>
 
 <style scoped>
 .user-layout { display: flex; height: 100vh; overflow: hidden; }
+.sidebar-mask { display: none; }
 .sidebar { width: 220px; background: #fff; border-right: 1px solid #e8e8e8; transition: width 0.25s; flex-shrink: 0; display: flex; flex-direction: column; }
 .sidebar.collapsed { width: 64px; }
-.sidebar-header { height: 60px; display: flex; align-items: center; justify-content: center; color: #1890ff; font-size: 18px; font-weight: 700; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
+.sidebar-header { height: 60px; display: flex; align-items: center; padding: 0 16px; color: #1890ff; font-size: 18px; font-weight: 700; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
 .sidebar :deep(.el-menu) { border-right: none; flex: 1; }
 .sidebar :deep(.el-menu-item) { margin: 2px 8px; border-radius: 8px; }
 .sidebar :deep(.el-menu-item.is-active) { background: #e6f7ff; color: #1890ff !important; font-weight: 500; }
 .main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-.topbar { height: 60px; background: #fff; border-bottom: 1px solid #e8e8e8; display: flex; align-items: center; padding: 0 24px; flex-shrink: 0; }
-.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+.topbar { height: 60px; background: #fff; border-bottom: 1px solid #e8e8e8; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; gap: 12px; }
+.menu-btn { display: none; font-size: 20px; }
+.breadcrumb { flex: 1; min-width: 0; }
+.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
 .notif-badge :deep(.el-badge__content) { top: 8px; right: 4px; }
 .content { flex: 1; padding: 24px; overflow-y: auto; background: #f5f5f5; }
 .footer { text-align: center; padding: 12px; color: #999; font-size: 12px; border-top: 1px solid #e8e8e8; background: #fff; flex-shrink: 0; }
+
+@media (max-width: 768px) {
+  .sidebar { position: fixed; left: -220px; top: 0; bottom: 0; z-index: 1000; transition: left 0.3s; }
+  .sidebar.mobile-show { left: 0; }
+  .sidebar.collapsed { width: 220px; }
+  .sidebar.collapsed.mobile-show { left: 0; }
+  .sidebar-mask { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
+  .sidebar-mask:has(+ .sidebar.mobile-show) { opacity: 1; pointer-events: auto; }
+  .menu-btn { display: inline-flex; }
+  .user-name { display: none; }
+  .content { padding: 16px; }
+}
 </style>