feat(frontend): Align admin and user API integration

frontend/video-frontend-web/src/views/user/settings.vue

@@ -1,21 +1,32 @@
 <template>
   <div class="settings-page">
-    <van-nav-bar title="设置" fixed placeholder left-arrow @click-left="router.back()" />
+    <div class="settings-shell">
+      <section class="settings-hero">
+        <h2>账号设置</h2>
+        <p>管理个人资料、隐私选项、通知偏好和应用信息。</p>
+      </section>
 
-    <van-cell-group inset>
-      <van-cell title="账号与安全" is-link to="/settings/profile" />
-      <van-cell title="隐私设置" is-link to="/settings/privacy" />
-      <van-cell title="通知设置" is-link to="/settings/notification" />
-    </van-cell-group>
+      <div class="settings-grid">
+        <div class="settings-column">
+          <van-cell-group inset>
+            <van-cell title="账号与安全" is-link to="/settings/profile" />
+            <van-cell title="隐私设置" is-link to="/settings/privacy" />
+            <van-cell title="通知设置" is-link to="/settings/notification" />
+          </van-cell-group>
+        </div>
 
-    <van-cell-group inset>
-      <van-cell title="清除缓存" :value="cacheSize" @click="clearCache" />
-      <van-cell title="关于我们" is-link to="/about" />
-      <van-cell title="版本号" value="1.0.0" />
-    </van-cell-group>
+        <div class="settings-column">
+          <van-cell-group inset>
+            <van-cell title="清除缓存" :value="cacheSize" @click="clearCache" />
+            <van-cell title="关于我们" is-link to="/about" />
+            <van-cell title="版本号" value="1.0.0" />
+          </van-cell-group>
 
-    <div class="logout-btn">
-      <van-button type="danger" block @click="handleLogout">退出登录</van-button>
+          <div class="logout-btn">
+            <van-button type="danger" block @click="handleLogout">退出登录</van-button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -54,15 +65,54 @@ const handleLogout = async () => {
 <style scoped lang="scss">
 .settings-page {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: #f6f7fb;
   padding-bottom: 60px;
+}
 
-  .van-cell-group {
-    margin: 12px;
+.settings-shell {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 20px 12px 28px;
+}
+
+.settings-hero {
+  padding: 24px 26px;
+  border-radius: 28px;
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  color: #fff;
+  margin-bottom: 18px;
+
+  h2 {
+    margin: 0 0 8px;
+    font-size: 28px;
   }
 
-  .logout-btn {
-    padding: 20px 16px;
+  p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.82);
+  }
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.settings-column :deep(.van-cell-group) {
+  margin: 0;
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
+}
+
+.logout-btn {
+  margin-top: 18px;
+}
+
+@media (max-width: 768px) {
+  .settings-grid {
+    grid-template-columns: 1fr;
   }
 }
 </style>