diff --git a/src/assets/pictures/space/more.png b/src/assets/pictures/space/more.png
index bab1305f..d90bd252 100644
Binary files a/src/assets/pictures/space/more.png and b/src/assets/pictures/space/more.png differ
diff --git a/src/recommend/PreferenceForm.vue b/src/recommend/PreferenceForm.vue
index 5ae8ada2..7b199999 100644
--- a/src/recommend/PreferenceForm.vue
+++ b/src/recommend/PreferenceForm.vue
@@ -10,7 +10,7 @@
       </div>
 
       <!-- 内容 -->
-      <h1>填写你的恋爱偏好</h1>
+      <h1 style="color: rgba(87, 87, 87, 1);">填写你的恋爱偏好</h1>
       <div class="card-container">
         <el-card class="card" v-for="card in cards" :key="card.title">
           <div class="card-image">
@@ -24,7 +24,7 @@
   </div>
   <el-form class="form" ref="form" :model="formData" :rules="rules">
     <fieldset>
-      <legend style="color: #ff77a9">- 基本属性 -</legend>
+      <legend style="color: #ff77a9;">- 基本属性 -</legend>
       <el-form-item label="匹配的性别" prop="gender">
         <el-radio-group v-model="formData.gender">
           <el-radio label="男">男</el-radio>
@@ -202,6 +202,7 @@
 </template>
 
 <script>
+import axios from '../utils/axiosConfig';
 export default {
   name: "PreferenceForm",
   data() {
@@ -258,12 +259,12 @@ export default {
         { validator: this.checkAgeRange, trigger: 'change' }
       ],
         distance: [{ required: true, message: '请选择距离范围', trigger: 'change' }],
-        heightRange: [
-        { validator: this.checkHeightRange, trigger: 'change' }
-      ],
-        weightRange: [
-        { validator: this.checkWeightRange, trigger: 'change' }
-      ],
+      //   heightRange: [
+      //   { validator: this.checkHeightRange, trigger: 'change' }
+      // ],
+      //   weightRange: [
+      //   { validator: this.checkWeightRange, trigger: 'change' }
+      // ],
         education: [{ required: true, message: '请选择最低教育水平', trigger: 'change' }],
         smoker: [{ required: true, message: '请选择抽烟情况', trigger: 'change' }],
         drinker: [{ required: true, message: '请选择喝酒情况', trigger: 'change' }],
@@ -273,7 +274,7 @@ export default {
         musicTypes: [{ required: true, message: '请选择喜欢的音乐类型', trigger: 'change' }],
         movieTypes: [{ required: true, message: '请选择喜欢的电影类型', trigger: 'change' }],
         lifeValue: [{ required: true, message: '请选择生活价值观', trigger: 'change' }],
-        religion: [{ required: true, message: '请选���教信仰', trigger: 'change' }],
+        religion: [{ required: true, message: '请选择宗教信仰', trigger: 'change' }],
         relationshipType: [{ required: true, message: '请选择关系类型', trigger: 'change' }],
         maritalStatus: [{ required: true, message: '请选择婚姻状况', trigger: 'change' }],
         minIncome: [{ required: true, message: '请选择最低收入', trigger: 'change' }],
@@ -325,28 +326,32 @@ export default {
     }
   },
     // 提交表单
-    handleSubmit() {
-      
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          // 在这里发送表单数据到后端
-          this.submitData(this.formData);
-          // 修改跳转路径到 Recommenduser 页面
-          this.$router.push('/main/recommend/recommenduser');
+    async handleSubmit() {
+      try {
+        const isValid = await this.$refs.form.validate();
+        if (isValid) {
+          // 发送表单数据到后端
+          const response = await axios.post('/auth/login', {
+              formData:this.formData
+          })
+          if (response.code === 200) {
+            // 跳转到 Recommenduser 页面
+            this.$router.push('/main/recommend/recommenduser');
+            this.$message({
+              type: "success",
+              message: "偏好已生成",
+            });
+          }
         } else {
+          // 如果表单验证失败，显示错误消息
           this.$message.error("请检查表单填写是否正确");
         }
-      });
+      } catch (error) {
+        // 处理可能的错误
+        console.error("表单提交失败:", error);
+        this.$message.error("表单提交失败，请稍后再试");
+      }
     },
-    // 提交数据
-    submitData(data) {
-      // 发送数据到后端接口
-      console.log("表单数据:", data);
-      this.$message({
-        type: "success",
-        message: "偏好已生成",
-      });
-    }
   },
   
 };
@@ -367,6 +372,7 @@ fieldset {
   align-items: center;
   width: 100%;
   max-width: 600px;
+  margin-top: 50px;
   margin: auto;
 }
 
@@ -392,11 +398,12 @@ fieldset {
   background-color: #ff77a9;
   color: white;
   border: 2px solid #ff77a9;
-  padding: 12px 25px;
+  padding: 25px 40px;
   font-size: 18px;
   margin-top: 20px;
   border-radius: 25px;
   cursor: pointer;
+  margin-bottom: 50px;
 }
 
 .submit-button:hover {
@@ -409,6 +416,7 @@ fieldset {
   text-align: center;
   background: linear-gradient(to bottom, #fffacd, #ffe4e1);
   overflow: hidden; /* 确保背景图片不超出区域 */
+  margin-bottom: 50px;
 }
 .intro h1 {
   font-size: 28px;
@@ -432,6 +440,9 @@ fieldset {
   border-radius: 10px;
   background: #fff;
 }
+.card:hover {
+  transform: scale(1.1);
+}
 .card-image {
   height: 100px;
   width: 100px;
diff --git a/src/views/space/familyTree.vue b/src/views/space/familyTree.vue
index 2fe17dc0..c05ee5aa 100644
--- a/src/views/space/familyTree.vue
+++ b/src/views/space/familyTree.vue
@@ -17,7 +17,7 @@
         >
           <template #node="{ node }">
             <div class="custom-node" :class="{ 'current-user': node.isCurrentUser }">
-              <img :size="50" :src="node.avatar" />
+              <img :size="50" :src="node.image_url" class="node-avatar"/>
               <div class="node-info">
                 <span class="name">{{ node.name }}</span>
                 <span class="relation">{{ node.relation }}</span>
@@ -43,7 +43,7 @@
           <el-form-item label="头像">
             <div class="avatar-uploader">
               <div class="avatar-wrapper">
-                <img v-if="currentMember.avatar" :src="currentMember.avatar" class="avatar" >
+                <img v-if="currentMember.image_url" :src="currentMember.image_url" class="avatar" >
                 <el-icon v-else><Plus /></el-icon>     
                 <input
                   type="file"
@@ -158,7 +158,7 @@ export default {
       treeData :{
         id: '1',
         name: '爷爷',
-        avatar: 'https://via.placeholder.com/150',
+        image_url: require('@/assets/pictures/space/Inbase.png'),
         relation: 'grandfather',
         birthDate: '1940-01-01',
         phone: '13800138000',
@@ -166,7 +166,7 @@ export default {
           {
             id: '2',
             name: '父亲',
-            avatar: '../../assets/pictures/space/post1.png',
+            image_url: require('@/assets/pictures/space/Inbase.png'),
             relation: 'father',
             birthDate: '1965-01-01',
             phone: '13800138001',
@@ -174,7 +174,7 @@ export default {
               {
                 id: '3',
                 name: '我',
-                avatar: '/avatar/3.jpg',
+                image_url: require('@/assets/pictures/space/career.png'),
                 relation: 'self',
                 birthDate: '1990-01-01',
                 phone: '13800138002',
@@ -186,7 +186,7 @@ export default {
           {
             id: '2',
             name: '父亲',
-            avatar: '/avatar/2.jpg',
+            image_url: require('@/assets/pictures/space/career.png'),
             relation: 'father',
             birthDate: '1965-01-01',
             phone: '13800138001',
@@ -194,7 +194,7 @@ export default {
               {
                 id: '3',
                 name: '我',
-                avatar: '/avatar/3.jpg',
+                image_url: require('@/assets/pictures/space/career.png'),
                 relation: 'self',
                 birthDate: '1990-01-01',
                 phone: '13800138002',
@@ -212,7 +212,7 @@ export default {
       currentMember: {
         id: '',
         name: '',
-        avatar: '',
+        image_url: '',
         parentId: '',
         relation: '',
         birthDate: '',
@@ -304,8 +304,16 @@ export default {
       }
     },
     processTreeData(node) {
+      // 将 avatar 字段改为 image_url，并使用 require 处理图片路径
+      try {
+        // 如果后端返回的是完整的图片路径，则使用 require 处理
+        node.image_url = node.image_url ? require('@/assets/pictures/space/' + node.image_url) : require('@/assets/pictures/space/Inbase.png')
+      } catch (e) {
+        // 如果 require 失败，使用默认图片
+        node.image_url = require('@/assets/pictures/space/Inbase.png')
+      }
+
       // 设置默认值
-      node.avatar = node.avatar || '/default-avatar.png'
       node.relation = node.relation || '未知'
       node.birthDate = node.birthDate || '未知'
       node.phone = node.phone || '未知'
@@ -367,7 +375,7 @@ export default {
       // 使用 FileReader 预览图片
       const reader = new FileReader()
       reader.onload = (e) => {
-        this.currentMember.avatar = e.target.result
+        this.currentMember.image_url = e.target.result
       }
       reader.readAsDataURL(file)
 
diff --git a/src/views/space/familyTree1.vue b/src/views/space/familyTree1.vue
index 27a491ba..c73d4755 100644
--- a/src/views/space/familyTree1.vue
+++ b/src/views/space/familyTree1.vue
@@ -1,43 +1,21 @@
 <template>
-  <div class="family-tree">
-    <!-- 工具栏 -->
-    <div class="toolbar">
-      <el-button @click="zoomIn">放大</el-button>
-      <el-button @click="zoomOut">缩小</el-button>
-      <el-button @click="resetZoom">重置</el-button>
-    </div>
-    
-    <!-- 树图容器 -->
-    <div class="tree-wrapper" ref="treeWrapper">
-      <TreeChart 
-        :json="treeData"
-        :collapse-enabled="true"
-        :horizontal-gap="60"
-        :vertical-gap="60"
-        node-text="name"
-        class="tree-chart"
-      >
-        <template #node="{ node }">
-          <div 
-            class="custom-node" 
-            :class="{ 'is-current': node.isCurrentUser }"
-          >
-            <!-- 头像区域 -->
-            <div class="avatar-wrapper">
-              <el-avatar 
-                :size="50" 
-                :src="node.avatar"
-                @error="() => true"
-              />
-            </div>
-            
-            <!-- 信息区域 -->
-            <div class="info-wrapper">
+  <div class="background">
+    <div class="tree">
+      <TreeChart :json="treeData">
+        <template v-slot:node="{ node }">
+          <div class="node-info">
+            <img :src="node.image_url" alt="image" class="node-image" />
+            <div class="info">
               <div class="name">{{ node.name }}</div>
-              <div class="relation">{{ node.relation }}</div>
-              <div class="birth-date">{{ node.birthDate }}</div>
+              <button @click="toggleNode(node)">
+                {{ node.expanded ? '隐藏下一代' : '显示下一代' }}
+              </button>
             </div>
           </div>
+          <div v-if="node.expanded" class="children">
+            <!-- 子节点展示 -->
+            <TreeChart :json="node.children" v-if="node.children && node.children.length"/>
+          </div>
         </template>
       </TreeChart>
     </div>
@@ -45,134 +23,128 @@
 </template>
 
 <script>
-import TreeChart from 'vue-tree-chart-3'
-import { ref } from 'vue'
+import TreeChart from "vue-tree-chart-3";
 
 export default {
-  components: { TreeChart },
-  
-  setup() {
-    const treeWrapper = ref(null)
-    const scale = ref(1)
-    
-    // 缩放功能
-    const zoomIn = () => {
-      scale.value = Math.min(scale.value + 0.1, 2)
-      updateScale()
-    }
-    
-    const zoomOut = () => {
-      scale.value = Math.max(scale.value - 0.1, 0.5)
-      updateScale()
-    }
-    
-    const resetZoom = () => {
-      scale.value = 1
-      updateScale()
-    }
-    
-    const updateScale = () => {
-      if (treeWrapper.value) {
-        treeWrapper.value.style.transform = `scale(${scale.value})`
-      }
-    }
-    
-    return {
-      treeWrapper,
-      zoomIn,
-      zoomOut,
-      resetZoom
-    }
+  components: {
+    TreeChart
   },
-  
   data() {
     return {
       treeData: {
-        name: '爷爷',
-        avatar: '../../assets/pictures/space/post1.png',
-        relation: '祖父',
-        birthDate: '1940-01-01',
+        name: '爸爸',
+        image_url: require('@/assets/pictures/space/Inbase.png'),
+        expanded: true,  // 默认展开
         children: [
           {
-            name: '父亲',
-            avatar: 'https://via.placeholder.com/150',
-            relation: '父亲',
-            birthDate: '1965-01-01',
+            name: 'children1',
+            image_url: "https://static.refined-x.com/avat1.jpg",
+            expanded: true,
+          },
+          {
+            name: 'children2',
+            image_url: "https://static.refined-x.com/avat2.jpg",
+            expanded: true,
+            mate: [{
+              name: 'mate',
+              image_url: "https://static.refined-x.com/avat3.jpg"
+            }],
             children: [
               {
-                name: '我',
-                avatar: '/avatars/me.jpg',
-                relation: '本人',
-                birthDate: '1990-01-01',
-                isCurrentUser: true,
-                children: []
+                name: 'grandchild',
+                image_url: "https://static.refined-x.com/avat.jpg"
+              },
+              {
+                name: 'grandchild2',
+                image_url: "https://static.refined-x.com/avat1.jpg",
+                expanded: true,
+                children:[
+                  {
+                    name:'dd',
+                    image_url: "https://static.refined-x.com/avat1.jpg",
+                  }
+                ]
+              },
+              {
+                name: 'grandchild3',
+                image_url: "https://static.refined-x.com/avat2.jpg"
+              },
+              {
+                name:'hh',
+                image_url: "https://static.refined-x.com/avat2.jpg"
               }
             ]
+          },
+          {
+            name: 'children3',
+            image_url: "https://static.refined-x.com/avat.jpg"
           }
         ]
       }
+    };
+  },
+  methods: {
+    toggleNode(node) {
+      node.expanded = !node.expanded; // 切换展开/收起
     }
   }
-}
+};
 </script>
 
 <style scoped>
-.family-tree {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-
-.toolbar {
-  padding: 10px;
-  border-bottom: 1px solid #eee;
-}
-
-.tree-wrapper {
-  flex: 1;
-  overflow: auto;
-  padding: 20px;
-  transform-origin: center center;
-  transition: transform 0.3s;
-}
-
-.custom-node {
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  background: white;
-  min-width: 150px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.is-current {
-  border: 2px solid #409EFF;
-  background: #ecf5ff;
+.background {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  background-image: url("../../assets/pictures/space/Inbase3.png");
+  background-size: cover;
+  background-position: center top;
+  background-repeat: no-repeat;
+  height: 100vh;
+  width: 100%;
 }
-
-.avatar-wrapper {
-  margin-bottom: 8px;
-  text-align: center;
+.tree {
+  display: flex;
+  position: absolute;
+  background: rgba(255, 255, 255, 0.8);
+  width: 1100px;
+  height: 700px;
+  border-radius: 30px;
+  margin-top: 30px;
+  margin-left: 240px;
+  padding-top: 100px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-.info-wrapper {
+.node-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
 }
 
-.name {
-  font-weight: bold;
-  font-size: 16px;
-  margin-bottom: 4px;
+.node-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-bottom: 10px;
 }
 
-.relation {
-  color: #666;
+.info {
   font-size: 14px;
-  margin-bottom: 2px;
 }
 
-.birth-date {
-  color: #999;
-  font-size: 12px;
+.children {
+  margin-top: 20px;
+  padding-left: 20px;
+  display: flex;
+  flex-direction: column;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/space/space.vue b/src/views/space/space.vue
index 98724ce8..010bb1da 100644
--- a/src/views/space/space.vue
+++ b/src/views/space/space.vue
@@ -7,11 +7,11 @@
           <div class="avatar-container">
             <img :src="userInfo.avatar || defaultAvatar" alt="Avatar" class="avatar">
             <!-- 更多信息按钮 -->
-            <button @click="showMoreInfo" class="showMoreInfo-btn">
+            <button @click="editProfile" class="showFamilytree-btn" v-if="!this.userId">
               <img src="../../assets/pictures/space/more.png" alt="" style="width: 80px;">
             </button>
             <!-- 族谱树按钮 -->
-            <button @click="showFamilyTree" class="showFamilytree-btn">
+            <button @click="showFamilyTree" class="showMoreInfo-btn">
               <img src="../../assets/pictures/space/tree.png" alt="" style="width: 80px;">
             </button>
           </div>
@@ -59,8 +59,8 @@
 
         <!-- 操作按钮 -->
         <div class="actions">
-          <button @click="editProfile">编辑</button>
-          <button @click="privateChat">私聊</button>
+          <button @click="logout" v-if="!this.userId">退出登录</button>
+          <button @click="privateChat" v-if="this.userId">私聊</button>
         </div>
       </div>
 
@@ -106,11 +106,14 @@
   
   <script>
   import axios from '@/utils/axiosConfig'
+  import {getUserId} from '@/token/auth'
   export default {
+    props: ['userId'],
     name:'spaceIndex',
     data() {
       return {
         userId: 1,
+        myId: 0,
         userlikelist:[],
         // myfollows: [],
         userInfo: {
@@ -294,12 +297,16 @@
       },
       privateChat() {
         // Navigate to private chat page
+      },
+      logout() {
+        this.$router.push('/')
       }
     },
     mounted() {
       // 加载用户信息
       this.fetchUserInfo();
       this.fetchPostInfo();
+      this.myId = getUserId();
     },
   };
   </script>
@@ -376,7 +383,6 @@
   left: -130px; /* 在头像左侧 */
   top: 110px;
 }
-
 .showFamilytree-btn {
     right: -130px; /* 在头像右侧 */
     top: 110px;
@@ -436,17 +442,22 @@
     font-size: 14px;
     margin-left: 10px;
   }
+  .actions {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
   .actions button {
     color:white;
     font-size: 18px;
     background-color: #f077a8;
-    padding: 10px 20px;
+    padding: 12px 20px;
     margin-left: 55px;
     margin-right: 40px;
     margin-top: 30px;
     border: none;
     border-radius: 30px;
-    width: 100px;
+    width: 115px;
     cursor: pointer;
   }
   .post-container {