diff --git a/Yi.Bbs.Vue3/src/apis/auth.js b/Yi.Bbs.Vue3/src/apis/auth.js
index 37e2524b..8fcec5a6 100644
--- a/Yi.Bbs.Vue3/src/apis/auth.js
+++ b/Yi.Bbs.Vue3/src/apis/auth.js
@@ -63,3 +63,13 @@ export function getCodePhone(data) {
     data,
   });
 }
+
+/**
+ *  获取登录验证码
+ */
+export function getLoginCode() {
+  return request({
+    url: `/account/captcha-image`,
+    method: "get",
+  });
+}
diff --git a/Yi.Bbs.Vue3/src/layout/AppBody.vue b/Yi.Bbs.Vue3/src/layout/AppBody.vue
index 47f5ca73..5cc8df80 100644
--- a/Yi.Bbs.Vue3/src/layout/AppBody.vue
+++ b/Yi.Bbs.Vue3/src/layout/AppBody.vue
@@ -1,24 +1,20 @@
-
-<template class="back-color"> 
- 
-      <div class="content-main">
-      <RouterView />
-     </div>
-   
+<template class="back-color">
+  <div class="content-main">
+    <RouterView />
+  </div>
 </template>
 
 <style scoped>
-
-.body-main{
-min-height: 10rem;
-min-width: 10rem;
-background-color:#F0F2F5;
-
+.body-main {
+  min-height: 10rem;
+  min-width: 10rem;
+  background-color: #f0f2f5;
 }
-.content-main{
-   margin: 0 auto;
-   display: flex;
-   justify-content: center;
-   min-height: 1150px;
+.content-main {
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  width: 1300px;
+  min-height: 1150px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/Yi.Bbs.Vue3/src/layout/AppHeader.vue b/Yi.Bbs.Vue3/src/layout/AppHeader.vue
index 7e0fcdfd..e679ef15 100644
--- a/Yi.Bbs.Vue3/src/layout/AppHeader.vue
+++ b/Yi.Bbs.Vue3/src/layout/AppHeader.vue
@@ -123,7 +123,7 @@ const isLogin = getToken("AccessToken") ? true : false;
 <style scoped lang="scss">
 .header {
   padding: 0 100px;
-  width: 1200px;
+  width: 1300px;
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/Yi.Bbs.Vue3/src/stores/user.js b/Yi.Bbs.Vue3/src/stores/user.js
index 566d34f2..428db43f 100644
--- a/Yi.Bbs.Vue3/src/stores/user.js
+++ b/Yi.Bbs.Vue3/src/stores/user.js
@@ -14,6 +14,7 @@ const useUserStore = defineStore("user", {
     icon: null,
     roles: [],
     permissions: [],
+    hasPermissions: false,
   }),
   getters: {},
   actions: {
@@ -42,18 +43,22 @@ const useUserStore = defineStore("user", {
         getUserDetailInfo()
           .then((response) => {
             const res = response.data;
-
             const user = res.user;
-            console.log(user, "user");
             const avatar =
               user.icon == "" || user.icon == null
                 ? "/favicon.ico"
                 : import.meta.env.VITE_APP_BASEAPI + "/file/" + user.icon;
-            console.log(avatar, "avatar");
+            const all_permission = "*:*:*";
             if (res.roleCodes && res.roleCodes.length > 0) {
               // 验证返回的roles是否是一个非空数组
               this.roles = res.roleCodes;
               this.permissions = res.permissionCodes;
+              this.hasPermissions = res.permissionCodes.some((permission) => {
+                return (
+                  all_permission === permission ||
+                  permissionFlag.includes(permission)
+                );
+              });
               // this.roles = ["admin"];
               // this.permissions=["*:*:*"]
             } else {
diff --git a/Yi.Bbs.Vue3/src/views/Article.vue b/Yi.Bbs.Vue3/src/views/Article.vue
index 47aa07d9..fe8e3b8d 100644
--- a/Yi.Bbs.Vue3/src/views/Article.vue
+++ b/Yi.Bbs.Vue3/src/views/Article.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 90%; min-width: 1200px">
+  <div class="article-box">
     <!-- <div style="width: 1200px;"> -->
     <el-row :gutter="20" class="top-div">
       <el-col :span="5">
@@ -383,88 +383,92 @@ watch(
 );
 </script>
 <style scoped>
-.comment {
-  min-height: 40rem;
-}
-
-.art-info-left .el-col {
-  margin-bottom: 1rem;
-}
-
-.art-info-ul span {
-  margin-left: 1rem;
-}
-
-.art-info-ul .el-tag {
-  margin-left: 1rem;
-}
-
-.art-info-ul {
-  padding: 0;
-  margin: 0;
-}
-
-li {
-  list-style: none;
-  margin-bottom: 0.5rem;
-}
-
-.art-info-right {
+.article-box {
+  width: 100%;
   height: 100%;
-}
+  .comment {
+    min-height: 40rem;
+  }
 
-.left-div .el-col {
-  background-color: #ffffff;
-  min-height: 12rem;
-  margin-bottom: 1rem;
-}
+  .art-info-left .el-col {
+    margin-bottom: 1rem;
+  }
 
-.right-div .el-col {
-  background-color: #ffffff;
-  min-height: 10rem;
-  margin-bottom: 1rem;
-}
+  .art-info-ul span {
+    margin-left: 1rem;
+  }
 
-.left-top-div .el-col {
-  min-height: 2rem;
-  background-color: #fafafa;
-  margin-bottom: 1rem;
-  margin-left: 10px;
-}
+  .art-info-ul .el-tag {
+    margin-left: 1rem;
+  }
 
-.top-div {
-  padding-top: 1rem;
-}
+  .art-info-ul {
+    padding: 0;
+    margin: 0;
+  }
 
-.left-top-div {
-  font-size: small;
-  text-align: center;
-  line-height: 2rem;
-}
+  li {
+    list-style: none;
+    margin-bottom: 0.5rem;
+  }
 
-h2 {
-  margin-bottom: 0.5em;
-  color: rgba(0, 0, 0, 0.85);
-  font-weight: 600;
-  font-size: 30px;
-  line-height: 1.35;
-}
+  .art-info-right {
+    height: 100%;
+  }
 
-.left-div .el-col {
-  padding: 1.4rem 1.4rem 0.5rem 1.4rem;
-}
+  .left-div .el-col {
+    background-color: #ffffff;
+    min-height: 12rem;
+    margin-bottom: 1rem;
+  }
 
-.el-space {
-  display: flex;
-  vertical-align: top;
-  justify-content: space-evenly;
-}
+  .right-div .el-col {
+    background-color: #ffffff;
+    min-height: 10rem;
+    margin-bottom: 1rem;
+  }
 
-.tab-divider {
-  margin-bottom: 0.5rem;
-}
+  .left-top-div .el-col {
+    min-height: 2rem;
+    background-color: #fafafa;
+    margin-bottom: 1rem;
+    margin-left: 10px;
+  }
 
-.breadcrumb {
-  margin-bottom: 10px;
+  .top-div {
+    padding-top: 1rem;
+  }
+
+  .left-top-div {
+    font-size: small;
+    text-align: center;
+    line-height: 2rem;
+  }
+
+  h2 {
+    margin-bottom: 0.5em;
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 600;
+    font-size: 30px;
+    line-height: 1.35;
+  }
+
+  .left-div .el-col {
+    padding: 1.4rem 1.4rem 0.5rem 1.4rem;
+  }
+
+  .el-space {
+    display: flex;
+    vertical-align: top;
+    justify-content: space-evenly;
+  }
+
+  .tab-divider {
+    margin-bottom: 0.5rem;
+  }
+
+  .breadcrumb {
+    margin-bottom: 10px;
+  }
 }
 </style>
diff --git a/Yi.Bbs.Vue3/src/views/Discuss.vue b/Yi.Bbs.Vue3/src/views/Discuss.vue
index 803acc68..367ff6a7 100644
--- a/Yi.Bbs.Vue3/src/views/Discuss.vue
+++ b/Yi.Bbs.Vue3/src/views/Discuss.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 1200px" class="body-div">
+  <div class="discuss-box">
     <div class="header">
       <el-form :inline="true">
         <el-form-item label="标题：">
@@ -20,11 +20,8 @@
             "
             >查询</el-button
           >
-          <el-button
-            @click="enterEditArticle"
-            type="primary"
-            v-hasPer="['bbs:discuss:add']"
-            >分享</el-button
+          <el-button @click="enterEditArticle" type="primary"
+            >发布主题</el-button
           >
           <el-dropdown>
             <span class="el-dropdown-link">
@@ -183,65 +180,69 @@ watch(
   { immediate: true }
 );
 </script>
-<style scoped>
-.el-pagination {
-  margin: 2rem 0rem 2rem 0rem;
-  justify-content: right;
-}
-.body-div {
+<style scoped lang="scss">
+.discuss-box {
+  width: 100%;
+  height: 100%;
+  .el-pagination {
+    margin: 2rem 0rem 2rem 0rem;
+    justify-content: right;
+  }
+  /* .body-div {
   min-height: 1000px;
-}
-.el-dropdown-link {
-  cursor: pointer;
-  color: var(--el-color-primary);
-  display: flex;
-  align-items: center;
-}
-.header {
-  background-color: #ffffff;
-  padding: 1rem;
-  margin: 1rem 0rem;
-}
-.collapse-top {
-  padding-left: 2rem;
-}
-.header .el-input {
-}
-.el-tabs {
-  background-color: #ffffff;
-  padding-left: 2rem;
-}
-.el-tabs >>> .el-tabs__header {
-  margin-bottom: 0;
-}
-.div-item {
-  margin-bottom: 1rem;
-}
+} */
+  .el-dropdown-link {
+    cursor: pointer;
+    color: var(--el-color-primary);
+    display: flex;
+    align-items: center;
+  }
+  .header {
+    background-color: #ffffff;
+    padding: 1rem;
+    margin: 1rem 0rem;
+  }
+  .collapse-top {
+    padding-left: 2rem;
+  }
+  .header .el-input {
+  }
+  .el-tabs {
+    background-color: #ffffff;
+    padding-left: 2rem;
+  }
+  .el-tabs >>> .el-tabs__header {
+    margin-bottom: 0;
+  }
+  .div-item {
+    margin-bottom: 1rem;
+  }
 
-.el-form {
-  --el-form-label-font-size: var(--el-font-size-base);
-  display: flex;
-  align-items: center;
-}
-.el-form-item {
-  padding-top: 0.8rem;
-}
-.form-right {
-  align-items: center;
-  display: flex;
-  margin-left: auto;
-}
-.form-right .el-button {
-  margin-right: 0.6rem;
-}
-.header .el-input {
-  width: 20rem;
-}
-.collapse-list >>> .el-collapse-item__header {
-  border-bottom-color: #f0f2f5 !important;
-}
+  .el-form {
+    --el-form-label-font-size: var(--el-font-size-base);
+    display: flex;
+    align-items: center;
+  }
+  .el-form-item {
+    padding-top: 0.8rem;
+  }
+  .form-right {
+    align-items: center;
+    display: flex;
+    margin-left: auto;
+  }
+  .form-right .el-button {
+    margin-right: 0.6rem;
+  }
+  .header .el-input {
+    width: 20rem;
+  }
+  .collapse-list >>> .el-collapse-item__header {
+    border-bottom-color: #f0f2f5 !important;
+  }
 
-.el-divider {
-  margin: 0.5rem 0;
+  .el-divider {
+    margin: 0.5rem 0;
+  }
 }
 </style>
diff --git a/Yi.Bbs.Vue3/src/views/Login.vue b/Yi.Bbs.Vue3/src/views/Login.vue
index 62fd3aba..bf13c31a 100644
--- a/Yi.Bbs.Vue3/src/views/Login.vue
+++ b/Yi.Bbs.Vue3/src/views/Login.vue
@@ -44,12 +44,6 @@
       </div>
     </div>
   </div>
-  <!-- <h2> 登录-欢迎</h2>
-    <el-input v-model="loginForm.userName" placeholder="用户名" />
-    <el-input v-model="loginForm.password" placeholder="密码" show-password />
-    <el-button class="login-btn" type="primary" @click="login">登录</el-button>
-    <br>
-    <el-button class="login-btn" type="primary" @click="guestlogin">游客临时登录</el-button> -->
 </template>
 <script setup>
 import { ref, reactive } from "vue";
diff --git a/Yi.Bbs.Vue3/src/views/home/Index.vue b/Yi.Bbs.Vue3/src/views/home/Index.vue
index 066894a6..b95050d2 100644
--- a/Yi.Bbs.Vue3/src/views/home/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 1200px">
+  <div class="home-box">
     <el-row :gutter="20" class="top-div">
       <el-col :span="17">
         <div class="scrollbar">
@@ -157,48 +157,52 @@ const statisOptions = computed(() => {
   };
 });
 </script>
-<style scoped>
-.introduce {
-  color: rgba(0, 0, 0, 0.45);
-  font-size: small;
-}
-
-.plate {
-  background: transparent !important;
-}
-
-.left-div .el-col {
-  background-color: #ffffff;
-
-  margin-bottom: 1rem;
-}
-
-.right-div .el-col {
-  background-color: #ffffff;
-  margin-bottom: 1rem;
-}
-
-.carousel-font {
-  position: absolute;
-  z-index: 1;
-  top: 10%;
-  left: 10%;
-}
-
-.top-div {
-  padding-top: 0.5rem;
-}
-
-.scrollbar {
-  display: block;
-  margin-bottom: 0.5rem;
-}
-.VisitsLineChart >>> .el-card__body {
-  padding: 0.5rem;
-}
-
-.statisChart {
+<style scoped lang="scss">
+.home-box {
   width: 100%;
-  height: 300px;
+  height: 100%;
+  .introduce {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: small;
+  }
+
+  .plate {
+    background: transparent !important;
+  }
+
+  .left-div .el-col {
+    background-color: #ffffff;
+
+    margin-bottom: 1rem;
+  }
+
+  .right-div .el-col {
+    background-color: #ffffff;
+    margin-bottom: 1rem;
+  }
+
+  .carousel-font {
+    position: absolute;
+    z-index: 1;
+    top: 10%;
+    left: 10%;
+  }
+
+  .top-div {
+    padding-top: 0.5rem;
+  }
+
+  .scrollbar {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+  .VisitsLineChart >>> .el-card__body {
+    padding: 0.5rem;
+  }
+
+  .statisChart {
+    width: 100%;
+    height: 300px;
+  }
 }
 </style>
diff --git a/Yi.Bbs.Vue3/src/views/login/index.vue b/Yi.Bbs.Vue3/src/views/login/index.vue
index 81d2ff1e..723598d9 100644
--- a/Yi.Bbs.Vue3/src/views/login/index.vue
+++ b/Yi.Bbs.Vue3/src/views/login/index.vue
@@ -40,6 +40,25 @@
                   show-password
                 />
               </el-form-item>
+              <el-form-item label="验证码" class="title-item"></el-form-item>
+              <div class="flex-between">
+                <el-col :span="18">
+                  <el-form-item prop="phone">
+                    <el-input
+                      size="large"
+                      type="text"
+                      v-model.trim="loginForm.code"
+                      placeholder="请输入验证码"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-image
+                  @click="handleGetCode"
+                  style="width: 120px; height: 40px; cursor: pointer"
+                  :src="codeImageURL"
+                  :fit="fit"
+                />
+              </div>
             </el-form>
             <el-form
               class="registerForm"
@@ -136,10 +155,11 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import useAuths from "@/hooks/useAuths";
 import { getCodePhone } from "@/apis/accountApi";
+import { getLoginCode } from "@/apis/auth";
 
 const { loginFun, registerFun } = useAuths();
 const router = useRouter();
@@ -175,6 +195,11 @@ const login = async (formEl) => {
     }
   });
 };
+// 获取图片验证码
+const codeImageURL = ref("");
+const handleGetCode = () => {
+  getImageCode();
+};
 
 // 注册逻辑
 const isRegister = ref(true);
@@ -238,6 +263,15 @@ const captcha = async () => {
 const handleSignInNow = () => {
   isRegister.value = !isRegister.value;
 };
+
+const getImageCode = async () => {
+  const { data } = await getLoginCode();
+  codeImageURL.value = "data:image/jpg;base64," + data.img;
+  loginForm.uuid = data.uuid;
+};
+onMounted(async () => {
+  await getImageCode();
+});
 </script>
 <style scoped lang="scss">
 .login {