From 5f1a7f46a8babd8ac17aa7584f285a2ad0f0447c Mon Sep 17 00:00:00 2001
From: yml <yml@yml.com>
Date: Fri, 22 May 2026 19:51:05 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF-=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=92=8C=E6=88=91=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                          |  20 +-
 frontend/src/main.ts                          |  18 +-
 frontend/src/router/index.ts                  |   8 +-
 frontend/src/views/mobile/MobileHomeView.vue  |   2 +-
 frontend/src/views/mobile/MobileLoginView.vue | 281 ++++++++++++++++++
 .../src/views/mobile/MobileProfileView.vue    | 130 ++++++++
 6 files changed, 442 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/views/mobile/MobileLoginView.vue
 create mode 100644 frontend/src/views/mobile/MobileProfileView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 098c538..5b70c61 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,13 +1,19 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { RouterView } from "vue-router";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
 
-import AdminLayout from './layouts/AdminLayout.vue'
-import AppLayout from './layouts/AppLayout.vue'
+import AdminLayout from "./layouts/AdminLayout.vue";
+import AppLayout from "./layouts/AppLayout.vue";
 
-const route = useRoute()
-const layout = computed(() => route.meta.layout || 'app')
+const route = useRoute();
+const layout = computed(() => {
+  if (route.path === "/m" || route.path.startsWith("/m/")) {
+    return "blank";
+  }
+
+  return route.meta.layout || "app";
+});
 </script>
 
 <template>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 3a64a0c..048a000 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,11 +1,13 @@
-import 'element-plus/dist/index.css'
-import './styles/base.css'
+import "element-plus/dist/index.css";
+import "./styles/base.css";
 
-import ElementPlus from 'element-plus'
-import { createPinia } from 'pinia'
-import { createApp } from 'vue'
+import ElementPlus from "element-plus";
+import { createPinia } from "pinia";
+import { createApp } from "vue";
 
-import App from './App.vue'
-import router from './router'
+import App from "./App.vue";
+import router from "./router";
 
-createApp(App).use(createPinia()).use(router).use(ElementPlus).mount('#app')
+const app = createApp(App);
+app.use(createPinia()).use(router).use(ElementPlus);
+router.isReady().then(() => app.mount("#app"));
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 15810f0..ac09f8a 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -27,7 +27,13 @@ const router = createRouter({
     {
       path: "/m/login",
       name: "mobile-login",
-      component: () => import("@/views/account/LoginView.vue"),
+      component: () => import("@/views/mobile/MobileLoginView.vue"),
+      meta: { layout: "blank" },
+    },
+    {
+      path: "/m/profile",
+      name: "mobile-profile",
+      component: () => import("@/views/mobile/MobileProfileView.vue"),
       meta: { layout: "blank" },
     },
     {
diff --git a/frontend/src/views/mobile/MobileHomeView.vue b/frontend/src/views/mobile/MobileHomeView.vue
index 7ea9d27..cb5562b 100644
--- a/frontend/src/views/mobile/MobileHomeView.vue
+++ b/frontend/src/views/mobile/MobileHomeView.vue
@@ -269,7 +269,7 @@ function formatRatio(item: Listing) {
         >发布</RouterLink
       >
       <RouterLink to="/m/orders" class="tab-item">订单</RouterLink>
-      <RouterLink to="/m/login" class="tab-item">我的</RouterLink>
+      <RouterLink to="/m/profile" class="tab-item">我的</RouterLink>
     </nav>
   </main>
 </template>
diff --git a/frontend/src/views/mobile/MobileLoginView.vue b/frontend/src/views/mobile/MobileLoginView.vue
new file mode 100644
index 0000000..0c6f576
--- /dev/null
+++ b/frontend/src/views/mobile/MobileLoginView.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+
+import { sendSmsCode } from "@/api/auth";
+import { useSessionStore } from "@/stores/session";
+
+const router = useRouter();
+const session = useSessionStore();
+const loading = ref(false);
+const sending = ref(false);
+const agreed = ref(false);
+const form = reactive({
+  phone: "",
+  code: "",
+});
+
+const maskedPhone = computed(() =>
+  form.phone.length >= 7
+    ? `${form.phone.slice(0, 3)}****${form.phone.slice(-4)}`
+    : "手机号"
+);
+
+async function handleSendCode() {
+  sending.value = true;
+  try {
+    await sendSmsCode(form.phone);
+    window.alert("验证码已发送，开发环境请查看后端日志");
+  } catch {
+    window.alert("验证码发送失败，请稍后重试");
+  } finally {
+    sending.value = false;
+  }
+}
+
+async function handleLogin() {
+  if (!agreed.value) {
+    window.alert("请先阅读并同意用户协议和隐私政策");
+    return;
+  }
+
+  loading.value = true;
+  try {
+    await session.login(form.phone, form.code);
+    await router.push("/m/profile");
+  } catch {
+    window.alert("登录失败，请检查手机号和验证码");
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <main class="mobile-login-shell">
+    <section class="login-brand-card">
+      <div class="monster-logo">锤</div>
+      <p>大锤商行</p>
+      <small>平台担保 · 安全租号</small>
+    </section>
+
+    <section class="login-panel">
+      <p class="login-eyebrow">SMS LOGIN</p>
+      <h1>登录</h1>
+      <p class="login-subtitle">使用手机号验证码登录，当前开发环境验证码会打印在后端日志。</p>
+
+      <label class="field-card">
+        <span>手机号</span>
+        <input v-model="form.phone" maxlength="11" inputmode="tel" placeholder="请输入手机号" />
+      </label>
+
+      <label class="field-card">
+        <span>验证码</span>
+        <div class="code-line">
+          <input v-model="form.code" maxlength="6" inputmode="numeric" placeholder="6 位验证码" />
+          <button type="button" :disabled="sending" @click="handleSendCode">
+            {{ sending ? "发送中" : "发送" }}
+          </button>
+        </div>
+      </label>
+
+      <div class="login-links">
+        <button type="button">忘记密码</button>
+        <span>当前输入：{{ maskedPhone }}</span>
+      </div>
+
+      <label class="agreement-row">
+        <input v-model="agreed" type="checkbox" />
+        <span>我已阅读并同意 <b>《用户协议》</b> 和 <b>《隐私政策》</b></span>
+      </label>
+
+      <button class="primary-login" type="button" :disabled="loading" @click="handleLogin">
+        {{ loading ? "登录中..." : "登录" }}
+      </button>
+
+      <button class="sms-login" type="button" @click="handleSendCode">
+        使用手机验证码登录
+      </button>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.mobile-login-shell {
+  min-height: 100vh;
+  background: radial-gradient(circle at 50% 0, #f0fffb 0, #f7fbff 34%, #ffffff 78%);
+  color: #151c28;
+  padding: 48px 26px 32px;
+}
+
+.login-brand-card {
+  display: grid;
+  place-items: center;
+  margin-bottom: 42px;
+  text-align: center;
+}
+
+.monster-logo {
+  display: grid;
+  width: 72px;
+  height: 72px;
+  place-items: center;
+  border-radius: 22px;
+  background: linear-gradient(145deg, #1777ff, #5fd4ff);
+  color: #ffffff;
+  font-size: 28px;
+  font-weight: 900;
+  box-shadow: 0 14px 36px rgba(23, 119, 255, 0.24);
+}
+
+.login-brand-card p {
+  margin: 12px 0 2px;
+  font-size: 24px;
+  font-weight: 900;
+}
+
+.login-brand-card small,
+.login-subtitle {
+  color: #667386;
+}
+
+.login-panel {
+  border-radius: 22px;
+}
+
+.login-eyebrow {
+  margin: 0 0 8px;
+  color: #02846e;
+  font-size: 13px;
+  font-weight: 900;
+  letter-spacing: 0.04em;
+}
+
+.login-panel h1 {
+  margin: 0;
+  font-size: 30px;
+  line-height: 1.2;
+}
+
+.login-subtitle {
+  margin: 12px 0 28px;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.field-card {
+  display: block;
+  margin-top: 14px;
+  border: 1px solid #e1e6ee;
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.88);
+  padding: 14px;
+}
+
+.field-card span {
+  display: block;
+  margin-bottom: 10px;
+  color: #5d6674;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.field-card input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 0;
+  outline: 0;
+  background: #eaf2ff;
+  color: #151c28;
+  padding: 11px 12px;
+  font-size: 16px;
+}
+
+.code-line {
+  display: grid;
+  grid-template-columns: 1fr 86px;
+  gap: 8px;
+}
+
+.code-line button,
+.sms-login,
+.primary-login,
+.login-links button {
+  border: 0;
+  background: none;
+  font-weight: 800;
+}
+
+.code-line button {
+  border-radius: 8px;
+  background: #ffffff;
+  color: #3f4652;
+  box-shadow: inset 0 0 0 1px #d6dce6;
+}
+
+.login-links,
+.agreement-row {
+  display: flex;
+  align-items: center;
+}
+
+.login-links {
+  justify-content: space-between;
+  margin: 18px 0 26px;
+  color: #566274;
+  font-size: 13px;
+}
+
+.login-links button {
+  color: #08b86f;
+}
+
+.agreement-row {
+  gap: 10px;
+  color: #333b48;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.agreement-row input {
+  width: 16px;
+  height: 16px;
+}
+
+.agreement-row b {
+  color: #e63145;
+  font-weight: 500;
+}
+
+.primary-login,
+.sms-login {
+  width: 100%;
+  height: 52px;
+  margin-top: 22px;
+  border-radius: 11px;
+  font-size: 16px;
+}
+
+.primary-login {
+  background: #050505;
+  color: #ffffff;
+}
+
+.primary-login:disabled {
+  opacity: 0.7;
+}
+
+.sms-login {
+  background: #ffffff;
+  color: #151c28;
+  box-shadow: inset 0 0 0 1px #e1e6ee;
+}
+
+@media (min-width: 520px) {
+  .mobile-login-shell {
+    max-width: 430px;
+    margin: 0 auto;
+    box-shadow: 0 0 0 1px rgba(23, 35, 61, 0.08);
+  }
+}
+</style>
diff --git a/frontend/src/views/mobile/MobileProfileView.vue b/frontend/src/views/mobile/MobileProfileView.vue
new file mode 100644
index 0000000..2415cdf
--- /dev/null
+++ b/frontend/src/views/mobile/MobileProfileView.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { useSessionStore } from "@/stores/session";
+
+const session = useSessionStore();
+const isLoggedIn = computed(() => Boolean(session.token));
+const displayName = computed(() => session.phone ? `用户${session.phone.slice(-6)}` : `用户${session.userId || 883099}`);
+const displayId = computed(() => session.userId || 138865);
+const maskedPhone = computed(() => session.phone ? `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}` : "登录后查看手机号");
+
+const sellerOrders = [
+  { label: "商品管理", icon: "🛍️", to: "/m/seller/listings/create" },
+  { label: "交易中", icon: "📦", to: "/m/orders" },
+  { label: "已完成", icon: "✈️", to: "/m/orders" },
+  { label: "退款/售后", icon: "💴", to: "/m/orders" },
+];
+const buyerOrders = [
+  { label: "未支付", icon: "💳", to: "/m/orders" },
+  { label: "交易中", icon: "🪙", to: "/m/orders" },
+  { label: "已完成", icon: "☑️", to: "/m/orders" },
+  { label: "退款/售后", icon: "🧾", to: "/m/orders" },
+];
+const serviceItems = ["收款账户", "余额明细", "提现记录", "商务合作", "我的代练", "我的代肝", "我的收藏", "我的打赏", "我的邀请"];
+const serviceIcons = ["👥", "🪙", "💸", "💼", "⚔️", "💎", "⭐", "💰", "🎁"];
+
+function logout() {
+  session.logout();
+}
+</script>
+
+<template>
+  <main class="mobile-profile-shell">
+    <template v-if="!isLoggedIn">
+      <section class="guest-card">
+        <div class="guest-logo">锤</div>
+        <h1>登录大锤商行</h1>
+        <p>登录后查看订单、管理发布、提现余额，并享受平台担保交易服务。</p>
+        <RouterLink to="/m/login" class="guest-login">立即登录</RouterLink>
+        <div class="guest-benefits"><span>担保交易</span><span>订单留痕</span><span>安全交接</span></div>
+      </section>
+    </template>
+
+    <template v-else>
+      <section class="profile-header">
+        <div class="avatar">👤</div>
+        <div class="profile-user">
+          <h1>{{ displayName }}<span>✎</span></h1>
+          <p>ID:{{ displayId }} · {{ maskedPhone }}</p>
+        </div>
+        <button class="setting-btn" type="button">⚙</button>
+      </section>
+
+      <section class="balance-card">
+        <div><span>账户余额(元)</span><strong>¥0.00</strong><button type="button">查看明细</button></div>
+        <button class="withdraw-btn" type="button">提现</button>
+      </section>
+    </template>
+
+    <section class="menu-card">
+      <h2>我的订单</h2>
+      <div class="icon-grid four">
+        <RouterLink v-for="item in sellerOrders" :key="item.label" :to="item.to"><span>{{ item.icon }}</span><em>{{ item.label }}</em></RouterLink>
+      </div>
+    </section>
+
+    <section class="menu-card">
+      <h2>我买的</h2>
+      <div class="icon-grid four">
+        <RouterLink v-for="item in buyerOrders" :key="item.label" :to="item.to"><span>{{ item.icon }}</span><em>{{ item.label }}</em></RouterLink>
+      </div>
+    </section>
+
+    <section class="menu-card service-card">
+      <div class="icon-grid service-grid">
+        <button v-for="(item, index) in serviceItems" :key="item" type="button"><span>{{ serviceIcons[index] }}</span><em>{{ item }}</em></button>
+      </div>
+    </section>
+
+    <button v-if="isLoggedIn" class="logout-btn" type="button" @click="logout">退出登录</button>
+
+    <nav class="profile-tabbar" aria-label="底部导航">
+      <RouterLink to="/m" class="tab-item">首页</RouterLink>
+      <RouterLink to="/m/listings" class="tab-item">租号</RouterLink>
+      <RouterLink to="/m/seller/listings/create" class="publish-tab">发布</RouterLink>
+      <RouterLink to="/m/orders" class="tab-item">订单</RouterLink>
+      <RouterLink to="/m/profile" class="tab-item active">我的</RouterLink>
+    </nav>
+  </main>
+</template>
+
+<style scoped>
+.mobile-profile-shell { min-height: 100vh; background: linear-gradient(180deg, #fbfaff 0, #fbfaff 210px, #f7f7f7 210px); color: #1a202c; padding: 28px 18px 96px; }
+.profile-header { display: flex; align-items: center; gap: 14px; min-height: 120px; }
+.avatar { display: grid; width: 62px; height: 62px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #fff; font-size: 32px; box-shadow: 0 10px 24px rgba(24,30,45,.08); }
+.profile-user { min-width: 0; flex: 1; }
+.profile-user h1 { overflow: hidden; margin: 0; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
+.profile-user h1 span { margin-left: 4px; color: #b7bcc6; font-size: 14px; }
+.profile-user p { margin: 7px 0 0; color: #666f7c; font-size: 13px; }
+.setting-btn { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; background: #fff; font-size: 20px; }
+.balance-card, .menu-card, .guest-card { border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgba(24,30,45,.06); }
+.balance-card { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 24px 28px; }
+.balance-card span, .balance-card strong { display: block; }
+.balance-card span { color: #8b8f99; font-weight: 700; }
+.balance-card strong { margin-top: 14px; font-size: 34px; line-height: 1; }
+.balance-card button { border: 0; border-radius: 6px; font-weight: 800; }
+.balance-card div button { margin-top: 14px; background: #fff5ee; color: #ff5f00; padding: 6px 8px; box-shadow: inset 0 0 0 1px #ff8a42; }
+.withdraw-btn { background: #050505; color: #fff; padding: 12px 18px; }
+.menu-card { margin-top: 12px; padding: 16px 14px; }
+.menu-card h2 { margin: 0 0 12px; font-size: 18px; }
+.icon-grid { display: grid; gap: 14px 8px; }
+.icon-grid.four, .service-grid { grid-template-columns: repeat(4, 1fr); }
+.icon-grid a, .icon-grid button { display: grid; gap: 7px; place-items: center; border: 0; background: none; color: #5f6671; text-align: center; }
+.icon-grid span { font-size: 25px; line-height: 1; }
+.icon-grid em { font-size: 13px; font-style: normal; font-weight: 700; }
+.service-card { padding-top: 18px; padding-bottom: 18px; }
+.guest-card { margin-top: 18px; padding: 34px 26px; text-align: center; }
+.guest-logo { display: grid; width: 74px; height: 74px; margin: 0 auto 18px; place-items: center; border-radius: 22px; background: linear-gradient(145deg, #1777ff, #5ed7ff); color: #fff; font-size: 30px; font-weight: 900; }
+.guest-card h1 { margin: 0; font-size: 24px; }
+.guest-card p { margin: 12px 0 22px; color: #667386; font-size: 14px; line-height: 1.7; }
+.guest-login { display: block; border-radius: 13px; background: #050505; color: #fff; padding: 14px; font-weight: 900; }
+.guest-benefits { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
+.guest-benefits span { border-radius: 999px; background: #eef6ff; color: #1777ff; padding: 6px 9px; font-size: 12px; font-weight: 800; }
+.logout-btn { width: 100%; margin-top: 14px; border: 0; border-radius: 14px; background: #fff; color: #ef4444; padding: 14px; font-weight: 900; box-shadow: 0 8px 26px rgba(24,30,45,.06); }
+.profile-tabbar { position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 20; display: flex; height: 60px; align-items: center; justify-content: space-around; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 16px 36px rgba(23,35,61,.16); backdrop-filter: blur(14px); }
+.tab-item { color: #708097; font-size: 12px; font-weight: 800; }
+.tab-item.active { color: #5b6ee1; }
+.publish-tab { display: grid; width: 58px; height: 58px; place-items: center; border: 5px solid #f7f7f7; border-radius: 50%; background: #536dc8; color: #fff; font-size: 13px; font-weight: 900; transform: translateY(-18px); box-shadow: 0 10px 24px rgba(83,109,200,.35); }
+@media (min-width: 520px) { .mobile-profile-shell { max-width: 430px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(23,35,61,.08); } .profile-tabbar { right: calc((100vw - 430px) / 2 + 12px); left: calc((100vw - 430px) / 2 + 12px); } }
+</style>