diff --git a/public/index.html b/public/index.html
index 3e5a139..db0e9de 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>墨思留痕</title>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 1e4fadf..ca7f971 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-   <main>
+     <main>
     <router-view />
     <trigger></trigger>
    </main>
@@ -13,8 +13,13 @@
 <script>
 import trigger from '@/components/trigger.vue'
 import basePage from './components/base.vue'
-export default {
 
+export default {
+  data () {
+    return {
+
+    }
+  },
   components: {
     trigger,
     basePage
@@ -23,22 +28,5 @@ export default {
 </script>
 
 <style lang="less">
-*{
-  box-sizing: border-box;
-}
-/* 针对 WebKit 浏览器 */
-::-webkit-scrollbar {
-  width: 5px; /* 滚动条宽度 */
-}
-
-::-webkit-scrollbar-thumb {
-  background: #2ee600; /* 滑块颜色 */
-  border-radius: 10px; /* 滑块圆角 */
-}
-
-::-webkit-scrollbar-track {
-  background: #f1f1f1ef; /* 轨道颜色 */
-  border-radius: 10px; /* 轨道圆角 */
-}
 
 </style>
diff --git a/src/api/interlinkage.js b/src/api/interlinkage.js
new file mode 100644
index 0000000..93ae10b
--- /dev/null
+++ b/src/api/interlinkage.js
@@ -0,0 +1,9 @@
+import request from '../utils/request'
+
+export function interList (data) {
+  return request({
+    url: '/interList',
+    method: 'get',
+    data
+  })
+}
diff --git a/src/api/login.js b/src/api/login.js
index 0b42161..9491871 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -7,3 +7,11 @@ export function login (data) {
     data
   })
 }
+
+export function autoLogin (token) {
+  return request({
+    url: '/auto-login',
+    method: 'post',
+    data: { token }
+  })
+}
diff --git a/src/assets/logo.png b/src/assets/logo.png
index f3d2503..f04260d 100644
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index fdaecce..380cef2 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -1,14 +1,35 @@
-*{
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-  
-  body{
-    background-color: #eeeeee;
-  }
-  
-  a {
-    text-decoration: inherit;
-    color: inherit;
-  }
\ No newline at end of file
+* {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  box-sizing: border-box;
+}
+
+/* 针对 WebKit 浏览器 */
+::-webkit-scrollbar {
+  width: 5px;
+  /* 滚动条宽度 */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #2ee600;
+  /* 滑块颜色 */
+  border-radius: 10px;
+  /* 滑块圆角 */
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1ef;
+  /* 轨道颜色 */
+  border-radius: 10px;
+  /* 轨道圆角 */
+}
+
+body {
+  background-color: #eeeeee;
+}
+
+a {
+  text-decoration: inherit;
+  color: inherit;
+}
\ No newline at end of file
diff --git a/src/components/music.vue b/src/components/music.vue
index b8b2b46..e777c7d 100644
--- a/src/components/music.vue
+++ b/src/components/music.vue
@@ -80,6 +80,13 @@ export default {
       return this.playlist[this.currentSongIndex]
     }
   },
+  mounted () {
+    // 检查 localStorage 中的锁定状态
+    const savedLockState = localStorage.getItem('isLocked')
+    if (savedLockState !== null) {
+      this.isLocked = JSON.parse(savedLockState)
+    }
+  },
   methods: {
     searchMusic () {
       // 实现音乐搜索功能
@@ -93,8 +100,7 @@ export default {
     },
     prevSong () {
       this.currentSongIndex =
-        (this.currentSongIndex - 1 + this.playlist.length) %
-        this.playlist.length
+        (this.currentSongIndex - 1 + this.playlist.length) % this.playlist.length
       this.isPlaying = true // 切换歌曲时自动播放
     },
     nextSong () {
@@ -104,6 +110,8 @@ export default {
     },
     toggleLock () {
       this.isLocked = !this.isLocked
+      // 将锁定状态保存到 localStorage
+      localStorage.setItem('isLocked', JSON.stringify(this.isLocked))
     }
   }
 }
diff --git a/src/components/navigationBar.vue b/src/components/navigationBar.vue
index 8591c37..ebefede 100644
--- a/src/components/navigationBar.vue
+++ b/src/components/navigationBar.vue
@@ -102,9 +102,10 @@ export default {
     },
     // 退出
     handleOut () {
-      this.$router.push({ path: '/login' })
+      localStorage.removeItem('token')
+      this.$router.push('/login')
       this.$message({
-        message: '退出成功',
+        message: '您已退出',
         type: 'success'
       })
     },
diff --git a/src/components/quillEditor.vue b/src/components/quillEditor.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/main.js b/src/main.js
index 97b0229..8bf3dff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,8 @@ Vue.use(ElementUI)
 Vue.component('navigationBar', navigationBar)
 Vue.component('musIc', music)
 
+document.title = '墨思留痕'
+
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/src/utils/request.js b/src/utils/request.js
index d805cbb..ee0678c 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,4 +1,6 @@
 import axios from 'axios'
+import { Message } from 'element-ui'
+import router from '../router'
 
 // 创建一个 axios 实例
 const service = axios.create({
@@ -9,27 +11,29 @@ const service = axios.create({
 // 请求拦截器
 service.interceptors.request.use(
   config => {
-    // 从 localStorage 中获取 token
-    const token = localStorage.getItem('user-token')
+    const token = localStorage.getItem('token')
     if (token) {
-      // 将 token 添加到请求头中
       config.headers.Authorization = `Bearer ${token}`
     }
     return config
   },
   error => {
-    // 对请求错误做些什么
     return Promise.reject(error)
   }
 )
 
-// 响应拦截器
 service.interceptors.response.use(
   response => {
-    // 对响应数据做点什么
     return response
   },
   error => {
+    if (error.response && error.response.status === 401) {
+      Message.error('认证已过期，请重新登录')
+      localStorage.removeItem('token')
+      router.push('/login')
+    } else {
+      Message.error(error.message)
+    }
     return Promise.reject(error)
   }
 )
diff --git a/src/views/AboutUs.vue b/src/views/AboutUs.vue
index 9172c1c..5d7d18c 100644
--- a/src/views/AboutUs.vue
+++ b/src/views/AboutUs.vue
@@ -3,7 +3,6 @@
     <navigationBar />
     <div class="box">
       <el-tabs type="border-card">
-
         <el-tab-pane label="个人信息">
           <div class="AboutUs-left">
             <div class="AboutUs-img">
@@ -117,8 +116,27 @@
             </div>
           </div>
         </el-tab-pane>
-
       </el-tabs>
+
+      <!-- 头像上传 -->
+      <el-dialog title="更换头像" :visible.sync="dialogVisible" width="30%">
+        <el-upload
+          class="avatar-uploader"
+          action="https://jsonplaceholder.typicode.com/posts/"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleAddAvatar"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
     </div>
 
     <musIc />
@@ -139,6 +157,8 @@ export default {
       birthday: '',
       region: '',
       city: '',
+      dialogVisible: false,
+      imageUrl: '',
       avatar: require('@/assets/images/789.jpg'), // 默认头像地址
       users: [
         {
@@ -163,10 +183,6 @@ export default {
       // 保存用户信息的逻辑
       this.$message.success('保存成功')
     },
-    changeAvatar () {
-      // 更换头像的逻辑
-      this.$message.success('更换成功')
-    },
     // 添加按钮
     handleAdd () {
       if (this.newTodo.trim() !== '') {
@@ -190,6 +206,32 @@ export default {
       } else {
         this.$message.error('请选择要删除的待办事项')
       }
+    },
+    changeAvatar () {
+      // 更换头像的逻辑
+      this.dialogVisible = true
+    },
+    handleAvatarSuccess (res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw)
+    },
+    beforeAvatarUpload (file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+    handleAddAvatar () {
+      this.$message({
+        message: '上传成功',
+        type: 'success'
+      })
+      this.dialogVisible = false
     }
   }
 }
@@ -197,7 +239,7 @@ export default {
 
 <style lang="less" scoped>
 .wtbDone {
-  width: 400px;
+  width: 700px;
   height: 500px;
   border: 1px solid black;
   margin: auto;
@@ -207,7 +249,7 @@ export default {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
   input {
-    width: 300px;
+    width: 550px;
     height: 40px;
     padding: 5px;
     margin-top: 20px;
@@ -219,61 +261,61 @@ export default {
       border: 1px solid #007bff;
     }
   }
-  }
+}
 
-  ul {
-    list-style: none;
-    padding: 0;
-    width: 350px;
-    height: 310px;
-    margin: 20px auto;
-    overflow-y: scroll;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+ul {
+  list-style: none;
+  padding: 0;
+  width: 600px;
+  height: 310px;
+  margin: 20px auto;
+  overflow-y: scroll;
+  border: 1px solid #ddd;
+  border-radius: 4px;
 
-    li {
-      width: 100%;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      background-color: #f5f5f5;
-      border-bottom: 1px solid #ddd;
-      cursor: pointer;
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: #e6e6e6;
-      }
-
-      &.selected {
-        background-color: #d3e5ff;
-      }
-    }
-  }
-
-  .wtbDone-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 20px;
-    padding: 10px;
-  }
-
-  button {
-    width: 70px;
+  li {
+    width: 100%;
     height: 40px;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    margin-left: 5px;
+    line-height: 40px;
+    text-align: center;
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #ddd;
     cursor: pointer;
     transition: background-color 0.3s;
 
     &:hover {
-      background-color: #0056b3;
+      background-color: #e6e6e6;
+    }
+
+    &.selected {
+      background-color: #d3e5ff;
     }
   }
+}
+
+.wtbDone-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+button {
+  width: 120px;
+  height: 40px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  margin-left: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+}
 
 .box {
   background-color: #f5f5f5;
@@ -445,4 +487,28 @@ hr {
     background-color: #218838;
   }
 }
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
 </style>
diff --git a/src/views/interlinkage.vue b/src/views/interlinkage.vue
index fdd8cbf..94ea181 100644
--- a/src/views/interlinkage.vue
+++ b/src/views/interlinkage.vue
@@ -17,65 +17,23 @@
 </template>
 
 <script>
+import { interList } from '@/api/interlinkage'
 export default {
   name: 'interLinkage',
   data () {
     return {
-      contentList: [
-        {
-          img: require('@/assets/images/kecheng/C.jpg'),
-          name: '百度一下，你就知道',
-          url: 'http://www.baidu.com'
-        },
-        {
-          img: require('@/assets/images/kecheng/C.jpg'),
-          name: '4399小游戏',
-          url: 'http://www.4399.com'
-        },
-        {
-          img: require('@/assets/images/kecheng/C.jpg'),
-          name: '百度一下，你就知道',
-          url: 'http://www.baidu.com'
-        },
-        {
-          img: require('@/assets/images/kecheng/C.jpg'),
-          name: '4399小游戏',
-          url: 'http://www.4399.com'
-        },
-        {
-          img: require('@/assets/images/kecheng/C.jpg'),
-          name: '百度一下，你就知道',
-          url: 'http://www.baidu.com'
-        },
-        {
-          img: require('@/assets/images/kecheng/C.jpg'),
-          name: '4399小游戏',
-          url: 'http://www.4399.com'
-        },
-        {
-          img: require('@/assets/images/kecheng/C.jpg'),
-          name: '百度一下，你就知道',
-          url: 'http://www.baidu.com'
-        },
-        {
-          img: require('@/assets/images/kecheng/C.jpg'),
-          name: '4399小游戏',
-          url: 'http://www.4399.com'
-        },
-        {
-          img: require('@/assets/images/kecheng/C.jpg'),
-          name: '百度一下，你就知道',
-          url: 'http://www.baidu.com'
-        },
-        {
-          img: require('@/assets/images/kecheng/C.jpg'),
-          name: '4399小游戏',
-          url: 'http://www.4399.com'
-        }
-      ]
+      contentList: []
     }
   },
+  created () {
+    this.getList()
+  },
   methods: {
+    getList () {
+      interList().then(res => {
+        this.contentList = res.data
+      })
+    },
     goLink (url) {
       window.open(url)
     }
diff --git a/src/views/labelPage.vue b/src/views/labelPage.vue
index 5ccd82a..a3548a4 100644
--- a/src/views/labelPage.vue
+++ b/src/views/labelPage.vue
@@ -10,8 +10,9 @@
         </header>
         <div class="box-bd">
           <ul class="clearfix">
-            <li v-for="(item, index) in items" :key="index" >
-              <router-link :to="`/paiListPage/${index + 1}`"> <!-- 这里的index + 1对应着表的序号 -->
+            <li v-for="(item, index) in items" :key="index">
+              <router-link :to="`/paiListPage/${index + 1}`">
+                <!-- 这里的index + 1对应着表的序号 -->
                 <img :src="item.url" :alt="item.title" />
                 <h4>{{ item.title }}</h4>
               </router-link>
@@ -25,7 +26,19 @@
       <button @click="openDialog">添加笔记</button>
     </div>
 
-    <!-- 其他代码 -->
+    <!-- 添加笔记弹窗 -->
+    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
+      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+        <el-form-item label="笔记标题" prop="addContent">
+          <el-input v-model="form.addContent"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleAdd">确 定</el-button>
+      </span>
+    </el-dialog>
     <musIc />
   </div>
 </template>
@@ -35,14 +48,11 @@ import { getTags } from '@/api/tags'
 export default {
   data () {
     return {
-      items: [
-
-      ],
-      drawer: false,
-      direction: 'ltr',
+      items: [],
       dialogVisible: false,
-      form: {},
-      addContent: '',
+      form: {
+        addContent: ''
+      },
       rules: {
         addContent: [
           { required: true, message: '请输入标题', trigger: 'blur' }
@@ -55,7 +65,7 @@ export default {
   },
   methods: {
     fetchTags () {
-      getTags().then(res => {
+      getTags().then((res) => {
         this.items = res.data
       })
     },
@@ -63,17 +73,12 @@ export default {
       this.dialogVisible = true
     },
     handleAdd () {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.$message({
-            message: '添加成功',
-            type: 'success'
-          })
-          this.dialogVisible = false
-        } else {
-          this.$message.error('请检查输入项')
-        }
+      this.dialogVisible = false
+      this.$message({
+        message: '添加成功',
+        type: 'success'
       })
+      this.form.addContent = ''
     }
   }
 }
diff --git a/src/views/login.vue b/src/views/login.vue
index 0940ffa..fe911d3 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -35,7 +35,7 @@
       </div>
       <div class="tool">
         <div>
-          <el-checkbox v-model="checked" @change="remenber" v-if="!create"
+          <el-checkbox v-model="checked" @change="remember" v-if="!create"
             >记住密码</el-checkbox
           >
         </div>
@@ -56,7 +56,7 @@
 </template>
 
 <script>
-import { login } from '@/api/login' // 导入登录请求的方法
+import { login, autoLogin } from '@/api/login'
 import dayjs from 'dayjs'
 
 export default {
@@ -91,33 +91,110 @@ export default {
     setInterval(() => {
       this.postDate = dayjs().format('HH : mm : ss')
     }, 1000)
+
+    this.loadRememberedCredentials()
+
+    // 尝试自动登录
+    const token = localStorage.getItem('token')
+    if (token) {
+      this.autoLogin(token)
+    }
   },
   methods: {
-    login () {
-      // 调用后端登录接口
-      login(this.form).then(response => {
-        // 登录成功的处理逻辑
-        console.log(response) // 假设登录成功后返回的数据中包含用户信息
-        this.$router.push('/')
+    loadRememberedCredentials () {
+      const rememberedUsername = localStorage.getItem('rememberedUsername')
+      const rememberedPassword = localStorage.getItem('rememberedPassword')
+      const rememberMeChecked = localStorage.getItem('rememberMeChecked')
+
+      if (rememberedUsername && rememberedPassword && rememberMeChecked) {
+        this.form.username = rememberedUsername
+        this.form.password = rememberedPassword
+        this.checked = JSON.parse(rememberMeChecked)
+      }
+    },
+    autoLogin (token) {
+      autoLogin(token).then(response => {
+        console.log(response)
+        if (this.$route.path !== '/') {
+          this.$router.push('/')
+        }
         this.$message({
-          message: '登陆成功',
+          message: '自动登录成功',
           type: 'success'
         })
       }).catch(error => {
-        // 登录失败的处理逻辑
-        console.error('登录失败:', error)
+        console.error('自动登录失败:', error)
+        localStorage.removeItem('token')
         this.$message({
-          message: '登录失败，请检查账号或密码',
+          message: '自动登录失败，请重新登录',
           type: 'error'
         })
       })
     },
-    remenber (data) {
-      this.checked = data
-      if (this.checked) {
-        localStorage.setItem('news', JSON.stringify(this.form))
+    login () {
+      if (this.form.username === '' || this.form.password === '') {
+        this.$message({
+          message: '账号或密码不能为空',
+          type: 'error'
+        })
+        return
+      }
+      // 登录验证
+      if (!this.create) {
+        login({ ...this.form }).then(response => {
+          console.log(response)
+          localStorage.setItem('token', response.data.token)
+          if (this.checked) {
+            localStorage.setItem('rememberedUsername', this.form.username)
+            localStorage.setItem('rememberedPassword', this.form.password)
+            localStorage.setItem('rememberMeChecked', true)
+          } else {
+            localStorage.removeItem('rememberedUsername')
+            localStorage.removeItem('rememberedPassword')
+            localStorage.removeItem('rememberMeChecked')
+          }
+          if (this.$route.path !== '/') {
+            this.$router.push('/')
+          }
+          this.$message({
+            message: '登陆成功',
+            type: 'success'
+          })
+        }).catch(error => {
+          console.error('登录失败:', error)
+          if (error.response && error.response.status === 401) {
+            this.$message({
+              message: '账号或密码错误',
+              type: 'error'
+            })
+          } else {
+            this.$message({
+              message: '服务器错误，请稍后再试',
+              type: 'error'
+            })
+          }
+        })
       } else {
-        localStorage.removeItem('news')
+        this.$message({
+          message: '暂未开放注册,请联系管理员',
+          type: 'warning'
+        })
+      }
+    },
+    remember () {
+      if (this.checked) {
+        this.$message({
+          message: '将会记住您的登录信息',
+          type: 'info'
+        })
+      } else {
+        localStorage.removeItem('rememberedUsername')
+        localStorage.removeItem('rememberedPassword')
+        localStorage.removeItem('rememberMeChecked')
+        this.$message({
+          message: '已取消记住密码',
+          type: 'info'
+        })
       }
     },
     forgetpas () {
@@ -128,22 +205,19 @@ export default {
     },
     register () {
       if (this.create) {
-        window.location.reload()
-      } else if (
-        this.form.username ||
-        this.form.password ||
-        this.form.repassword
-      ) {
-        // 从登录切换到注册清空表单内容
+        // 从注册页面返回登录页面时保留内容
+        this.create = false
+        this.loadRememberedCredentials()
+      } else {
+        // 从登录页面进入注册页面时清空内容
+        this.create = true
         this.form.username = ''
         this.form.password = ''
         this.form.repassword = ''
+        this.$refs.form.clearValidate('username')
+        this.$refs.form.clearValidate('password')
+        this.$refs.form.clearValidate('repassword')
       }
-      this.create = !this.create
-      // 清除字段的验证错误
-      this.$refs.form.clearValidate('username')
-      this.$refs.form.clearValidate('password')
-      this.$refs.form.clearValidate('repassword')
     }
   }
 }
@@ -180,7 +254,7 @@ export default {
       /* 左侧阴影 */ 5px -5px 10px rgba(0, 0, 0, 0.1),
       /* 下部阴影 */ -5px -5px 10px rgba(0, 0, 0, 0.1); /* 上部阴影 */
     width: 400px;
-    height: 300px;
+    height: 350px;
     padding: 30px;
     border-radius: 10px;
     transform: translate(-50%);
diff --git a/src/views/photoGallery.vue b/src/views/photoGallery.vue
index 79827c7..dae73cd 100644
--- a/src/views/photoGallery.vue
+++ b/src/views/photoGallery.vue
@@ -23,16 +23,26 @@
       </div>
     </div>
     <div class="gallery">
+      <div class="pointer" :style="pointerStyle"></div>
       <div
         class="gallery-item"
         v-for="(item, index) in photos"
         :key="index"
         :class="item.sizeClass"
+        @mouseover="onMouseOver($event, item.sizeClass)"
+        @mouseleave="onMouseLeave"
+        @click="openImageViewer(item.src)"
         ref="photoItems"
       >
         <img :data-src="item.src" :alt="item.alt" class="lazy" />
       </div>
     </div>
+    <div v-if="showImageViewer" class="image-viewer" @click.self="closeImageViewer">
+      <div class="image-viewer-content">
+        <span class="close" @click="closeImageViewer">&times;</span>
+        <img :src="currentImage" />
+      </div>
+    </div>
     <musIc />
   </div>
 </template>
@@ -42,6 +52,7 @@ export default {
   name: 'photoGallery',
   data () {
     return {
+      // 初始照片列表
       photos: [
         { src: require('@/assets/images/789.jpg'), alt: 'Photo 1', sizeClass: 'medium' },
         { src: require('@/assets/images/789.jpg'), alt: 'Photo 2', sizeClass: 'large' },
@@ -72,42 +83,56 @@ export default {
         { src: require('@/assets/images/789.jpg'), alt: 'Photo 27', sizeClass: 'small' }
       ],
       newPhoto: {
-        src: '',
-        alt: ''
+        src: '', // 新照片的URL
+        alt: '' // 新照片的描述
       },
-      newPhotoFile: null,
-      showModal: false
+      newPhotoFile: null, // 新照片的文件对象
+      showModal: false, // 控制上传照片模态框的显示
+      showImageViewer: false, // 控制图片查看器的显示
+      currentImage: '', // 当前显示的大图的URL
+      pointerStyle: {
+        display: 'none', // 控制边框指示器的显示
+        top: '0px',
+        left: '0px',
+        width: '0px',
+        height: '0px',
+        borderColor: '' // 边框指示器的颜色
+      }
     }
   },
   methods: {
+    // 加载图片方法
     loadImages () {
-      const images = this.$refs.photoItems
+      const images = this.$refs.photoItems // 获取所有照片项的引用
       const options = {
         root: null,
         rootMargin: '0px',
-        threshold: 0.1
+        threshold: 0.1 // 触发观察器的阈值
       }
 
+      // 创建IntersectionObserver对象
       const observer = new IntersectionObserver((entries, observer) => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
             const img = entry.target.querySelector('img')
-            img.src = img.getAttribute('data-src')
-            observer.unobserve(entry.target)
+            img.src = img.getAttribute('data-src') // 加载图片
+            observer.unobserve(entry.target) // 停止观察已加载的图片
           }
         })
       }, options)
 
       images.forEach(image => {
-        observer.observe(image)
+        observer.observe(image) // 观察每个图片项
       })
     },
+    // 处理文件变化
     onFileChange (e) {
       const file = e.target.files[0]
       if (file) {
-        this.newPhotoFile = URL.createObjectURL(file)
+        this.newPhotoFile = URL.createObjectURL(file) // 创建文件的临时URL
       }
     },
+    // 添加新照片
     addPhoto () {
       if (this.newPhotoFile && this.newPhoto.alt) {
         const sizeClasses = ['small', 'medium', 'large']
@@ -117,24 +142,61 @@ export default {
           alt: this.newPhoto.alt,
           sizeClass: sizeClass
         })
-        this.newPhotoFile = null
-        this.newPhoto.alt = ''
-        this.showModal = false
-        document.body.classList.remove('no-scroll')
+        this.newPhotoFile = null // 清空文件对象
+        this.newPhoto.alt = '' // 清空描述
+        this.showModal = false // 关闭模态框
+        document.body.classList.remove('no-scroll') // 恢复页面滚动
         this.$nextTick(() => {
-          this.loadImages()
+          this.loadImages() // 重新加载图片
         })
       }
     },
+    // 打开模态框
     openModal () {
       this.showModal = true
-      document.body.classList.add('no-scroll')
+      document.body.classList.add('no-scroll') // 禁用页面滚动
     },
+    // 关闭模态框
     closeModal () {
       this.showModal = false
-      document.body.classList.remove('no-scroll')
+      document.body.classList.remove('no-scroll') // 恢复页面滚动
+    },
+    // 打开图片查看器
+    openImageViewer (src) {
+      this.currentImage = src
+      this.showImageViewer = true
+      document.body.classList.add('no-scroll') // 禁用页面滚动
+    },
+    // 关闭图片查看器
+    closeImageViewer () {
+      this.showImageViewer = false
+      document.body.classList.remove('no-scroll') // 恢复页面滚动
+    },
+    // 鼠标悬停时显示边框指示器
+    onMouseOver (event, sizeClass) {
+      const galleryItem = event.currentTarget
+      const rect = galleryItem.getBoundingClientRect()
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+
+      // 生成随机颜色
+      const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16)
+
+      this.pointerStyle = {
+        display: 'block',
+        top: `${rect.top + scrollTop - 85}px`,
+        left: `${rect.left + scrollLeft - 205}px`,
+        width: `${rect.width + 30}px`,
+        height: `${rect.height + 30}px`,
+        borderColor: randomColor // 设置随机颜色
+      }
+    },
+    // 鼠标离开时隐藏边框指示器
+    onMouseLeave () {
+      this.pointerStyle.display = 'none'
     }
   },
+  // 组件挂载后加载图片
   mounted () {
     this.loadImages()
   }
@@ -184,6 +246,7 @@ header {
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 10000; /* Ensure modal is on top */
 }
 
 .modal-content {
@@ -194,6 +257,7 @@ header {
   width: 400px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   animation: fadeIn 0.3s;
+  z-index: 10001; /* Ensure modal content is on top */
 }
 
 @keyframes fadeIn {
@@ -257,6 +321,12 @@ button:hover {
 .gallery {
   column-count: 4;
   column-gap: 16px;
+  position: relative;
+}
+
+.pointer {
+  position: absolute;
+  border: 2px solid;
 }
 
 .gallery-item {
@@ -270,7 +340,7 @@ button:hover {
 }
 
 .gallery-item:hover {
-  transform: translateY(-5px);
+  transform: scale(1.05);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
@@ -291,4 +361,39 @@ button:hover {
 .gallery-item.large img {
   height: 250px;
 }
+
+.image-viewer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+}
+
+.image-viewer-content {
+  position: relative;
+  max-width: 95%;
+  max-height: 95%;
+  z-index: 10001;
+}
+
+.image-viewer img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.image-viewer .close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  color: white;
+  cursor: pointer;
+}
 </style>
diff --git a/src/views/subject/listPage.vue b/src/views/subject/listPage.vue
index 0530176..68055b3 100644
--- a/src/views/subject/listPage.vue
+++ b/src/views/subject/listPage.vue
@@ -9,9 +9,7 @@
         </path>
       </svg>
       <div class="ana">
-        <p>
-          {{ user }}
-        </p>
+        <p>{{ user }}</p>
       </div>
     </div>
     <div class="article" v-for="(item, index) in articleS" :key="index">
@@ -27,15 +25,14 @@
       </div>
     </div>
     <el-pagination
-        background
-        layout="prev, pager, next"
-        :total="total"
-        style="margin: 10px auto; width: 80%; text-align: center"
-        prev-text="上一页"
-        next-text="下一页"
-        hide-on-single-page
-      />
-
+      background
+      layout="prev, pager, next"
+      :total="total"
+      style="margin: 10px auto; width: 80%; text-align: center"
+      prev-text="上一页"
+      next-text="下一页"
+      hide-on-single-page
+    />
     <musIc />
   </div>
 </template>
@@ -45,40 +42,66 @@ import { getSubject } from '@/api/subject'
 import { fetchUser } from '@/api/dailySentence'
 
 export default {
-  name: 'subJect',
+  name: 'Subject',
   data () {
     return {
       articleS: [],
       total: 0,
-      user: ''
+      user: '',
+      lastUpdateTime: localStorage.getItem('lastUpdateTime') || null
     }
   },
   created () {
-    this.getList()
-    // 页面加载时，从本地存储获取用户内容
-    this.user = localStorage.getItem('userContent') || ''
+    this.checkAndFetchUser() // 检查并获取用户内容
+    this.getList() // 获取文章列表
+
     // 每天早上8点获取用户内容
-    setInterval(() => {
-      this.fetchUser()
-    }, 1000 * 60 * 60 * 24) // 每24小时重复执行一次
+    const now = new Date()
+    const nextUpdate = new Date()
+    nextUpdate.setHours(8, 0, 0, 0) // 设置到今天8点
+    if (now > nextUpdate) {
+      nextUpdate.setDate(nextUpdate.getDate() + 1) // 如果现在已经过了8点，设置到明天8点
+    }
+    const timeToNextUpdate = nextUpdate - now
+
+    setTimeout(() => {
+      this.fetchUser() // 立即获取一次用户内容
+      setInterval(() => {
+        this.fetchUser()
+      }, 1000 * 60 * 60 * 24) // 每24小时重复执行一次
+    }, timeToNextUpdate)
   },
   methods: {
     getList () {
       getSubject().then(res => {
         this.articleS = res.data
         this.total = res.data.length
+      }).catch(error => {
+        console.error('获取文章列表失败:', error)
       })
     },
     fetchUser () {
       fetchUser()
         .then(response => {
           this.user = response.data.result.content
-          // 将用户内容存储在本地存储中
+          // 将用户内容和更新时间存储在本地存储中
           localStorage.setItem('userContent', this.user)
+          localStorage.setItem('lastUpdateTime', new Date().toISOString())
         })
         .catch(error => {
-          console.log(error)
+          console.error('获取用户内容失败:', error)
         })
+    },
+    checkAndFetchUser () {
+      const lastUpdate = new Date(this.lastUpdateTime)
+      const now = new Date()
+      const oneDay = 1000 * 60 * 60 * 24
+
+      if (!this.lastUpdateTime || (now - lastUpdate > oneDay)) {
+        this.fetchUser()
+      } else {
+        this.user = localStorage.getItem('userContent') || ''
+      }
     }
   }
 }
@@ -130,10 +153,10 @@ export default {
   background-color: #e5e5f7;
   opacity: 0.7;
   background-image: linear-gradient(-45deg,
-      #e5e5f7,
-      #e5e5f7 50%,
-      #d6d7e5 50%,
-      #d6d7e5);
+    #e5e5f7,
+    #e5e5f7 50%,
+    #d6d7e5 50%,
+    #d6d7e5);
   background-size: 8px 8px;
 
   img {
@@ -186,7 +209,7 @@ export default {
       color: rgb(143, 143, 143);
       margin-top: 10px;
 
-      .content{
+      .content {
         font-size: 16px;
         font-weight: 400;
         font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
