refactor(frontend): Rework home layout and user interactions

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

@@ -1,49 +1,144 @@
 <template>
   <div class="settings-subpage">
-    <van-nav-bar title="隐私设置" fixed placeholder left-arrow @click-left="router.back()" />
-    <van-cell-group inset>
-      <van-cell title="主页公开范围">
-        <template #right-icon>
-          <van-dropdown-menu>
-            <van-dropdown-item v-model="form.privacyLevel" :options="privacyOptions" />
-          </van-dropdown-menu>
-        </template>
-      </van-cell>
-      <van-cell title="个性签名可见" value="公开" />
-      <van-cell title="关注列表可见" value="仅自己可见" />
-    </van-cell-group>
-    <div class="submit">
-      <van-button type="primary" block @click="save">保存设置</van-button>
+    <div class="page-shell subpage-shell">
+      <div class="subpage-head">
+        <button
+          class="back-link"
+          @click="router.back()"
+        >
+          返回
+        </button>
+        <strong>隐私设置</strong>
+      </div>
+
+      <div class="panel-card">
+        <div class="status-row">
+          <span>当前可见范围</span>
+          <strong>{{ currentPrivacyLabel }}</strong>
+        </div>
+
+        <van-cell-group inset>
+          <van-cell title="主页公开范围">
+            <template #right-icon>
+              <van-dropdown-menu>
+                <van-dropdown-item
+                  v-model="form.privacyLevel"
+                  :options="privacyOptions"
+                />
+              </van-dropdown-menu>
+            </template>
+          </van-cell>
+        </van-cell-group>
+
+        <van-button
+          type="primary"
+          block
+          class="save-btn"
+          :loading="saving"
+          @click="save"
+        >
+          保存设置
+        </van-button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { showSuccessToast } from 'vant'
+import { showSuccessToast, showToast } from 'vant'
 import { userApi } from '@/api/user.ts'
 
 const router = useRouter()
 const form = reactive({ privacyLevel: 1 })
+const saving = ref(false)
 const privacyOptions = [
   { text: '公开', value: 1 },
   { text: '仅关注可见', value: 2 },
   { text: '仅自己可见', value: 3 }
 ]
+const currentPrivacyLabel = computed(() => privacyOptions.find((item) => item.value === form.privacyLevel)?.text || '未设置')
 
 const save = async () => {
-  await userApi.updateSettings({ privacyLevel: form.privacyLevel })
-  showSuccessToast('已保存')
+  saving.value = true
+  try {
+    await userApi.updateSettings({ privacyLevel: form.privacyLevel })
+    showSuccessToast('隐私设置已保存')
+  } catch (error: any) {
+    showToast(error?.message || '保存失败')
+  } finally {
+    saving.value = false
+  }
 }
 
 onMounted(async () => {
-  const settings = await userApi.getSettings()
-  form.privacyLevel = settings.privacyLevel
+  try {
+    const settings = await userApi.getSettings()
+    form.privacyLevel = settings.privacyLevel
+  } catch (error: any) {
+    showToast(error?.message || '加载失败')
+  }
 })
 </script>
 
 <style scoped lang="scss">
-.settings-subpage { min-height: 100vh; background: #f6f7fb; }
-.submit { padding: 20px 16px; }
+.settings-subpage {
+  min-height: 100vh;
+  background: #f4f5f7;
+  padding-bottom: 36px;
+}
+
+.subpage-shell {
+  padding-top: 18px;
+}
+
+.subpage-head,
+.panel-card {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: var(--shadow-sm);
+}
+
+.subpage-head {
+  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+
+  strong {
+    font-size: 20px;
+  }
+}
+
+.back-link {
+  color: var(--link-color);
+  font-size: 13px;
+}
+
+.panel-card {
+  padding: 18px;
+}
+
+.status-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+
+  span {
+    color: #9499a0;
+    font-size: 13px;
+  }
+
+  strong {
+    color: #18191c;
+  }
+}
+
+.save-btn {
+  margin-top: 16px;
+}
 </style>