修改完成

pages/profile/m03-security-settings.vue

@@ -1,5 +1,47 @@
-<!-- 页面编号：M-03；用途：账号与安全设置。 -->
-<template><ModulePage page-id="m03" /></template>
+<!-- 页面编号：M-03；用途：账号安全总览与安全功能入口。 -->
+<template>
+  <view class="security-page device-state--safe">
+    <ModulePageBackground module="profile" />
+    <view class="page-layer"><PageHeader title="账号与安全" /></view>
+    <view class="page-content page-layer">
+      <view class="security-summary">
+        <text>账号状态安全</text>
+        <text>手机号已绑定，最近登录设备未发现异常。</text>
+      </view>
+      <view class="security-list">
+        <view v-for="item in securityItems" :key="item.key" class="security-row" role="button" :aria-label="item.label" @click="openSecurityItem(item)">
+          <image :src="item.icon" mode="aspectFit" />
+          <view><text>{{ item.label }}</text><text>{{ item.note }}</text></view>
+          <image class="chevron" src="/static/assets/foundation/transparent/chevron-right.png" mode="aspectFit" />
+        </view>
+      </view>
+      <AppButton block type="secondary" label="检查账号安全" @click="checkSecurity" />
+    </view>
+    <AppToast :visible="toastVisible" :message="toastMessage" />
+  </view>
+</template>
+
 <script setup>
-import ModulePage from "@/components/ModulePage.vue";
+import { onUnmounted, ref } from "vue";
+import AppButton from "@/components/AppButton.vue";
+import AppToast from "@/components/AppToast.vue";
+import ModulePageBackground from "@/components/ModulePageBackground.vue";
+import PageHeader from "@/components/PageHeader.vue";
+
+const securityItems = [
+  { key: "password", label: "登录密码", note: "建议定期更新密码", icon: "/static/assets/modules/auth/transparent/a01-icon-lock-v1.png", url: "/pages/profile/m04-change-password" },
+  { key: "phone", label: "绑定手机号", note: "139****6421", icon: "/static/assets/modules/auth/transparent/a01-icon-phone-v1.png", url: "/pages/profile/m05-change-phone" },
+  { key: "device", label: "登录设备", note: "当前设备 · 今天登录", icon: "/static/assets/foundation/transparent/auth-login-outline.png" },
+];
+const toastVisible = ref(false);
+const toastMessage = ref("");
+let timer = null;
+const showToast = (message) => { toastMessage.value = message; toastVisible.value = true; clearTimeout(timer); timer = setTimeout(() => (toastVisible.value = false), 1800); };
+const openSecurityItem = (item) => item.url ? uni.navigateTo({ url: item.url }) : showToast("当前设备登录正常，未发现异常记录");
+const checkSecurity = () => showToast("安全检查完成，当前账号状态正常");
+onUnmounted(() => clearTimeout(timer));
 </script>
+
+<style scoped lang="scss">
+.security-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:28rpx 30rpx 72rpx}.security-summary{min-height:190rpx;padding:42rpx 48rpx;box-sizing:border-box;background:url("/static/assets/modules/profile/transparent/m01-profile-summary-card.png") center/100% 100% no-repeat;text-align:center}.security-summary text{display:block;overflow-wrap:anywhere}.security-summary text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:34rpx;font-weight:700}.security-summary text:last-child{margin-top:12rpx;color:$ink-muted;font-size:23rpx;line-height:1.55}.security-list{margin-top:22rpx}.security-row{display:grid;grid-template-columns:56rpx minmax(0,1fr) 34rpx;min-height:110rpx;align-items:center;gap:18rpx;padding:16rpx 26rpx;box-sizing:border-box;background:url("/static/assets/modules/profile/transparent/module-field-frame.png") center/100% 100% no-repeat}.security-row+ .security-row{margin-top:12rpx}.security-row>image{width:50rpx;height:50rpx}.security-row .chevron{width:30rpx;height:30rpx}.security-row view{min-width:0}.security-row text{display:block;overflow-wrap:anywhere}.security-row text:first-child{color:$ink;font-size:25rpx;font-weight:700}.security-row text:last-child{margin-top:6rpx;color:$ink-muted;font-size:21rpx}.page-content>.app-button{margin-top:28rpx}@media(max-width:340px){.page-content{padding-right:22rpx;padding-left:22rpx}}
+</style>