feat: 添加修改密码功能（当然整个账户功能目前仍然残缺）

pages/user/main/account.vue

@@ -1,24 +1,121 @@
 <template>
     <div class="account-main">
-        <el-button @click="handleLogout">登出</el-button>
+      <el-container>
+        <el-header>
+            <h1>账户设置</h1>
+        </el-header>
+        <el-main>
+            <el-divider content-position="left">
+                <h2>修改密码</h2>
+            </el-divider>
+            <p>请输入原密码和新密码以修改密码</p>
+            <el-row style="margin-bottom: 10px;">
+                <el-col :span="24">
+                    <el-input v-model="oldPassword" placeholder="原密码" type="password" show-password />
+                </el-col>
+            </el-row>
+            <el-row style="margin-bottom: 10px;">
+                <el-col :span="24">
+                    <el-input v-model="newPassword" placeholder="新密码" type="password" show-password />
+                </el-col>
+            </el-row>
+            <el-row style="margin-bottom: 10px;">
+                <el-col :span="24">
+                    <el-input v-model="newPasswordVerify" placeholder="再次输入新密码" type="password" show-password />
+                </el-col>
+            </el-row>
+            <el-row style="margin-bottom: 10px;">
+                <el-col :span="24">
+                    <el-button type="primary" @click="handleChangePassword" :disabled="disableChangingPassword">
+                        修改密码
+                    </el-button>
+                </el-col>
+            </el-row>
+            <el-divider content-position="left" style="margin: 40px 0;">
+                <h2>登出</h2>
+            </el-divider>
+            <el-row>
+                <!-- <el-col :span="4"></el-col> -->
+                <el-col :span="20">
+                    <el-button @click="handleLogout">
+                        登出
+                    </el-button>
+                </el-col>
+            </el-row>
+        </el-main>
+      </el-container>
     </div>
 </template>
 
 <script setup>
 import useUserStore from '~/hooks/pinia/useUserStore';
+import { useRouter } from 'vue-router';
+import { ref } from 'vue';
 
-const userStore = useUserStore()
-const router = useRouter()
+const userStore = useUserStore();
+const router = useRouter();
+
+const oldPassword = ref('');
+const newPassword = ref('');
+const newPasswordVerify = ref('');
+
+
+const disableChangingPassword = computed(() => {
+    return !oldPassword.value || !newPassword.value || !newPasswordVerify.value;
+});
+
+const handleChangePassword = async () => {
+    try {
+        if (newPassword.value !== newPasswordVerify.value) {
+            ElMessage.error('两次输入的新密码不一致');
+            return;
+        }
+        const response = await $fetch('/api/user/updatePassword', {
+            method: 'POST',
+            body: {
+                oldPassword: oldPassword.value,
+                newPassword: newPassword.value,
+            },
+            headers: {
+                Authorization: `Bearer ${userStore.token}`,
+            },
+        })
+        userStore.setToken(response.token);
+        userStore.setTokenExpireTime(response.expiresIn);
+        ElMessage.success('密码修改成功');
+    } catch (error) {
+        ElMessage.error('修改密码出错');
+        console.error('修改密码出错', error);
+    } finally {
+    }
+};
 
 const handleLogout = () => {
-    userStore.logout()
-    router.push('/user/login')
-}
-
+    userStore.logout();
+    router.push('/user/login');
+};
 </script>
 
 <style lang="scss" scoped>
 .account-main {
+    position: relative;
     padding: 10px 20px;
+    max-width: 800px;
+    margin: 0px auto;
+    h1 {
+        font-size: xx-large;
+    }
+    h2 {
+        font-size: larger;
+    }
+    p {
+        color: #595959;
+        // font-size: small;
+    }
+}
+
+.flex-end {
+    display: flex;
+    justify-content: flex-end;
 }
 </style>

pages/user/main/post.vue

@@ -1,5 +1,7 @@
 <template>
-    <nuxt-page></nuxt-page>
+    <div>
+        <nuxt-page></nuxt-page>
+    </div>
 </template>
 
 <script setup lang="ts">

pages/user/main/post/index.vue

@@ -6,7 +6,7 @@
         <div class="post-index-list">
             <el-card class="post-index-list-create" @click="handleNewPost">
                 <create class="post-index-list-create-icon"></create>
-                <div class="post-index-list-create-text">新建文章</div>
+                <div class="post-index-list-create-text">新文章</div>
             </el-card>
             <el-card class="post-index-list-card" v-for="post in postList" :key="post.id">
                 <template #header>
@@ -95,7 +95,7 @@ onMounted(async () => {
     &-list {
         width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
         gap: 1rem;
 
         &-create {
@@ -193,4 +193,12 @@ onMounted(async () => {
         // }
     }
 }
+
+@media screen and (max-width: 768px) {
+    .post-index {
+        &-list {
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        }
+    }
+}
 </style>

pages/user/main/server.vue

@@ -99,6 +99,8 @@ onMounted(() => {
 .user-server-config {
     position: relative;
     padding: 10px 20px;
+    max-width: 800px;
+    margin: 0px auto;
     .server-upload {
         border-radius: 6px;
         cursor: pointer;