diff --git a/src/layouts/Content.vue b/src/layouts/Content.vue
new file mode 100644
index 0000000..c81e4f7
--- /dev/null
+++ b/src/layouts/Content.vue
@@ -0,0 +1,19 @@
+<template>
+    <RouterView>
+        <template #default="{ Component }">
+            <transition name="fade-slide" mode="out-in">
+                <component :is="Component" />
+            </transition>
+        </template>
+    </RouterView>
+</template>
+<script>
+import { defineComponent, unref } from 'vue'
+import { RouterView } from 'vue-router'
+export default defineComponent({
+    name: 'Content',
+    components: {
+        RouterView,
+    }
+})
+</script>
diff --git a/src/layouts/Footer.vue b/src/layouts/Footer.vue
new file mode 100644
index 0000000..b506963
--- /dev/null
+++ b/src/layouts/Footer.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="footer">
+        <div class="logo">海兔LOGO</div>
+        <div class="info">
+            <p>集团介绍 广州市xx有限公司,总部设在广州市番禺区,经过10多年的发展与改革,构成以房地产、矿业开发、国际贸易、装备制造、物流</p>
+        </div>
+        <div class="qrcode"><img src="" alt=""></div>
+        <div class="contactInfo">
+            <p>联系电话：600-8374623</p>
+            <p>邮箱：23423423@qq.com</p>
+            <p>联系地址：重庆市沙坪坝区三峡广场130号</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.footer{
+    width: 100%;
+    padding: .45rem;
+    border-top: .01rem solid #CCC;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    font-size: .22rem;
+    .logo{
+        padding: .2rem;
+    }
+    .info{
+        font-size: .22rem;
+        color: #CCC;
+        padding: .1rem;
+    }
+    .qrcode{
+        width: 2.9rem;
+        height: 2.9rem;
+        background: #FFF;
+        overflow: hidden;
+        margin: .1rem auto;
+        img{
+            width: 100%;
+        }
+    }
+    .contactInfo{
+        color: #CCC;
+        font-size: .22rem;
+        padding: .1rem;
+        p{
+            line-height: 1.5;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
new file mode 100644
index 0000000..039d047
--- /dev/null
+++ b/src/layouts/Header.vue
@@ -0,0 +1,224 @@
+<template>
+    <div class="header">
+        <div class="logo">logo</div>
+        <div class="title">首页</div>
+        <div class="nav">
+            <div class="navBtn" @click="toggleMenu"><van-icon name="wap-nav" size=".37rem" /></div>
+            <div class="menuBox" v-if="showMenu">
+                <template v-if="isLogin">
+                    <div class="menuHeader">
+                        <div class="userInfo">
+                            <div class="avatar"><img src="" alt=""></div>
+                            <div class="name">大王叫我来巡山大王叫我来巡山</div>
+                        </div>
+                        <div class="navIcon" @click="toggleMenu"><van-icon name="wap-nav" size=".37rem" /></div>
+                    </div>
+                    <ul class="menu">
+                        <li :class="{ active: route.meta.group === 'home' }">首页</li>
+                        <li>AI助理</li>
+                        <li>AI商情</li>
+                        <li>AI传播</li>
+                        <li>AI献策</li>
+                        <li :class="{ active: route.meta.group === 'vip' }">会员服务</li>
+                        <li :class="{ active: route.meta.group === 'ucenter' }">个人中心</li>
+                        <li @click="onLogout">退出登录</li>
+                    </ul>
+                </template>
+                <template v-else>
+                    <div class="menuHeader">
+                        <div class="userInfo">
+                            <div class="avatar"><img src="" alt=""></div>
+                            <div class="name">大王叫我来巡山大王叫我来巡山</div>
+                        </div>
+                        <div class="navIcon" @click="toggleMenu"><van-icon name="wap-nav" size=".37rem" /></div>
+                    </div>
+                    <ul class="menu">
+                        <li @click="onLogin">登录</li>
+                        <li @click="onRegister">注册</li>
+                    </ul>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useUserInfo } from '@/stores/userInfo';
+import { localCache } from '@/io/cache';
+import http from '@/io/http';
+import { useRouter, useRoute } from 'vue-router';
+import { showToast } from 'vant';
+
+
+const userInfo = useUserInfo();
+const router = useRouter();
+const route = useRoute();
+
+const isLogin = ref(false);
+const showMenu = ref(false);
+
+const toggleMenu = ()=>{
+    console.log(showMenu.value);
+    showMenu.value = !showMenu.value;
+};
+
+
+const onLogin = ()=>{
+    
+};
+
+const onRegister = ()=>{
+
+};
+
+const onLogout = ()=>{
+    http('/api/auth/logout').then(res => {
+        localCache.remove('userInfo');
+        localCache.remove('auth');
+        showToast('已退出登录！');
+        isLogin.value = false;
+        window.location.replace('/');
+    }).catch(err => {
+        showToast(err.message);
+    })
+};
+</script>
+
+<style lang="scss" scoped>
+.header{
+    width: 100%;
+    height: .9rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: .05rem solid #3662FE;
+    background: #161718;
+    color: #FFF;
+    padding: .1rem;
+    box-sizing: border-box;
+    .logo{
+        width: 2.3rem;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+    .title{
+        width: 2.3rem;
+        height: .7rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: .28rem;
+        font-weight: bold;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .nav{
+        width: 2.3rem;
+        height: .7rem;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        position: relative;
+        .navBtn{
+            width: .68rem;
+            height: .68rem;
+            background-color: #3662FE;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #FFF;
+        }
+    }
+    .menuBox{
+        width: 4rem;
+        background: #242527;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        right: 0rem;
+        z-index: 5;
+        .menuHeader{
+            height: .7rem;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .userInfo{
+                flex: 1;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                padding-left: .3rem;
+                overflow: hidden;
+                .avatar{
+                    width: .5rem;
+                    height: .5rem;
+                    border-radius: 50%;
+                    overflow: hidden;
+                    background: #E9E9E9;
+                    img{
+                        width: 100%;
+                        object-fit: contain;
+                    }
+                }
+                .name{
+                    flex: 1;
+                    height: .7rem;
+                    line-height: .7rem;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    font-size: .23rem;
+                    margin-left: .15rem;
+                    font-weight: bold;
+                }
+            }
+            .navIcon{
+                width: .68rem;
+                height: .68rem;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+        .menu{
+            padding-bottom: .3rem;
+            li{
+                height: .5rem;
+                line-height: .5rem;
+                flex: 1;
+                margin-top: .3rem;
+                font-size: .28rem;
+                color: #ccc;
+                padding-left: .3rem;
+                position: relative;
+                &::before{
+                    content: '';
+                    width: .07rem;
+                    height: .3rem;
+                    background-color: #3662FE;
+                    transform: translateX(-.3rem);
+                    position: absolute;
+                    left: 0;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    display: none;
+                }
+                &:active,
+                &.active{
+                    color: #FFF;
+                    &::before{
+                        display: block;
+                    }
+                }
+                &:active{
+                    background-color: rgb(255, 255, 255, .1);
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
new file mode 100644
index 0000000..f37387d
--- /dev/null
+++ b/src/layouts/index.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="layout">
+        <Header />
+        <div class="layoutContent">
+            <Content />
+            <Footer />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Header from './Header.vue';
+import Content from './Content.vue';
+import Footer from './Footer.vue';
+
+</script>
+
+<style lang="scss" scoped>
+.layout{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .layoutContent{
+        flex: 1;
+        width: 100%;
+        overflow-y: auto;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index e7d7acf..7c716d3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,22 +1,46 @@
 import { createRouter, createWebHistory } from "vue-router";
+import Layout from '@/layouts/index.vue';
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: "/",
-      name: "Layout",
-      redirect: "/home",
-      children: [{
-        path: "home",
-        name: "Home",
-        mate: {
-          title: "首页-AI助理",
-        },
-        component: () => import("@/views/home/index.vue"),
-      }]
-    }
-  ],
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: "/",
+            name: "Layout",
+            component: Layout,
+            children: [
+                {
+                    path: "",
+                    name: "Home",
+                    meta: {
+                        title: "首页",  // 页面标题
+                        group: 'home',  // 导航归属
+                    },
+                    component: () => import("@/views/home/index.vue"),
+                },
+                {
+                    path: "ucenter",
+                    name: "ucenter",
+                    meta: {
+                        title: "个人中心",
+                        group: 'ucenter'
+                    },
+                    component: () => import("@/views/ucenter/index.vue"),
+                    children: [
+                        {
+                            path: 'userinfo',
+                            name: 'userInfo',
+                            meta: {
+                                title: '个人信息',
+                                group: 'ucenter'
+                            },
+                            component: () => import("@/views/ucenter/userInfo.vue"),
+                        }
+                    ]
+                },
+            ]
+        }
+    ],
 });
 
 export default router;
diff --git a/src/views/ucenter/index.vue b/src/views/ucenter/index.vue
new file mode 100644
index 0000000..90464d7
--- /dev/null
+++ b/src/views/ucenter/index.vue
@@ -0,0 +1,156 @@
+<template>
+    <div class="ucenterContainer">
+        <div class="navBox">
+            <div class="nameCard">
+                <div class="avatar">
+                    <img :src="userInfo.userData.avatar || defaultAvatar">
+                    <div class="uploadBtn">
+                        <a-upload name="file" accept=".jpg,.jpeg,.png" :action="uploadAPI" @success="avatarUploadSuccess">
+                            修改
+                        </a-upload>
+                    </div>
+                </div>
+                <div class="name">{{ userInfo.userData.name || userInfo.userData.phone || userInfo.userData.email }}</div>
+            </div>
+            <ul class="nav">
+                <li :class="{ active: route.name == 'userInfo' }" @click="jump('/ucenter/userinfo')">
+                    <strong>个人中心</strong>
+                    <span class="enDesc">INFORMATION</span>
+                    <van-icon name="arrow" class="icon" />
+                </li>
+                <li :class="{ active: route.name == 'order' }" @click="jump('/ucenter/order')">
+                    <strong>我的订单</strong>
+                    <span class="enDesc">MYORDER</span>
+                    <van-icon name="arrow" class="icon" />
+                </li>
+            </ul>
+        </div>
+        <RouterView />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { RouterView } from "vue-router";
+import { useRouter, useRoute } from 'vue-router';
+import hostAPI from '@/config/host.config.js';
+import { showToast } from 'vant';
+import { localCache } from '@/io/cache';
+import defaultAvatar from '@/assets/img/avatar@2x.png';
+import { useUserInfo } from '@/stores/userInfo';
+import http from '@/io/http';
+
+const router = useRouter();
+const route = useRoute();
+const userInfo = useUserInfo();
+
+const uploadAPI = hostAPI + '/api/web/upload';
+
+
+const jump = (path) => {
+    router.push(path);
+};
+
+
+</script>
+
+<style lang="scss" scoped>
+.ucenterContainer {
+    padding: 35px 0;
+    max-width: 1280px;
+    margin: 0 auto;
+    display: flex;
+    color: #FFF;
+
+    .navBox {
+        width: 248px;
+
+        .nameCard {
+            display: flex;
+            height: 83px;
+            align-items: center;
+
+            .avatar {
+                width: 83px;
+                height: 83px;
+                border-radius: 50%;
+                overflow: hidden;
+                position: relative;
+
+                img {
+                    width: 100%;
+                    object-fit: contain;
+                }
+
+                .uploadBtn {
+                    width: 100%;
+                    height: 20px;
+                    background: rgba($color: #000000, $alpha: 0.5);
+                    line-height: 20px;
+                    text-align: center;
+                    position: absolute;
+                    bottom: 0;
+
+                    span {
+                        color: #FFF;
+                        font-size: 12px;
+                    }
+                }
+            }
+
+            .name {
+                font-size: 18px;
+                margin-left: 10px;
+            }
+        }
+
+        .nav {
+            padding-top: 26px;
+
+            li {
+                width: 248px;
+                height: 38px;
+                border: 2px solid #FFFFFF;
+                opacity: 0.4;
+                border-radius: 4px;
+                font-size: 14px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                cursor: pointer;
+                margin-bottom: 22px;
+
+                strong {
+                    padding: 0 30px;
+                }
+
+                .enDesc {
+                    flex: 1;
+                    text-align: left;
+                }
+
+                .icon {
+                    margin-right: 10px;
+                    color: #FFF;
+                }
+
+                &:hover,
+                &.active {
+                    opacity: 1;
+                    background: #3662FE;
+                    border-radius: 4px;
+
+                    span {
+                        opacity: 0.4;
+                    }
+
+                    .icon {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ucenter/userInfo.vue b/src/views/ucenter/userInfo.vue
new file mode 100644
index 0000000..3daab35
--- /dev/null
+++ b/src/views/ucenter/userInfo.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+        个人中心
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file