feat 搭建架构骨架

src/views/profile/index.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useProfileStore } from '@/stores/modules/profile'
+import ProfileSider from './cpns/ProfileSider.vue'
+import ProfileUserCard from './cpns/ProfileUserCard.vue'
+
+// 布局容器：顶部用户卡 + 左侧菜单 / 右侧子路由出口，数据只经 store
+const profileStore = useProfileStore()
+const { profile } = storeToRefs(profileStore)
+
+function onSaveNickname(name: string): void {
+  void profileStore.saveNickname(name)
+}
+
+onMounted(() => {
+  void profileStore.fetchProfile()
+})
+</script>
+
+<template>
+  <div class="profile">
+    <div class="profile__container">
+      <ProfileUserCard :profile="profile" @save-nickname="onSaveNickname" />
+
+      <div class="profile__body">
+        <aside class="profile__aside">
+          <ProfileSider />
+        </aside>
+        <main class="profile__main">
+          <RouterView />
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.profile {
+  padding-bottom: @spacing-xxl;
+  background: @bg-color;
+
+  &__container {
+    width: @container-width;
+    max-width: calc(100% - @spacing-xl);
+    margin: 0 auto;
+    padding-top: @spacing-xl;
+  }
+
+  &__body {
+    .flex(row, flex-start);
+    gap: @spacing-base;
+    margin-top: @spacing-base;
+    align-items: flex-start;
+  }
+
+  &__aside {
+    width: 220px;
+    flex-shrink: 0;
+    border-radius: @radius-lg;
+    background: @white;
+    box-shadow: @shadow-base;
+    overflow: hidden;
+  }
+
+  &__main {
+    flex: 1;
+    min-width: 0;
+    .flex(column, flex-start);
+    gap: @spacing-base;
+  }
+}
+</style>