Merge branch 'UserInfo' of https://bdgit.educoder.net/fdzcxy212206231/bloggingplatform into UserInfo

Documents/HBuilderProjects/xm/src/router.js

@@ -2,6 +2,9 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Home from './views/Home.vue'
 import ArticleDetail from './components/ArticleDetail.vue';  // 假设你有一个显示文章详情的组件
 import UserInfo from './views/UserAccount.vue';
+import UserDetail from './views/UserDetail.vue';
+
+
 const routes = [
   { path: '/', component: Home },
   {
@@ -14,7 +17,12 @@ const routes = [
 	    path: '/userinfo',
 	    name: 'UserInfo',
 	    component: UserInfo,
-	  },
+	},
+	{
+	    path: '/user/:id',
+	    name: 'UserDetail',
+	    component: UserDetail
+	}
 ]
 
 const router = createRouter({

Documents/HBuilderProjects/xm/src/views/UserAccount.vue

@@ -1,6 +1,7 @@
 <template>
   <el-container>
     <el-header>
+      <el-button type="primary" @click="goBack">返回</el-button>
       <h1>知乎个人主页</h1>
     </el-header>
     <el-main>
@@ -24,12 +25,19 @@
                       <el-image :src="post.cover" class="post-cover"></el-image>
                     </el-col>
                     <el-col :span="18">
-                      <el-link :href="`/post/${post.id}`" target="_blank" class="post-title">{{ post.title }}</el-link>
+                      <router-link :to="`/post/${post.id}`" class="post-title">{{ post.title }}</router-link>
                       <p class="post-summary">{{ post.summary }}</p>
                       <div class="post-stats">
                         <span><i class="el-icon-thumb"></i> {{ post.likes }} 点赞</span>
                         <span><i class="el-icon-chat-dot-round"></i> {{ post.comments }} 评论</span>
                       </div>
+                      <div class="post-actions">
+                        <el-button type="text" @click="toggleEdit(post.id)">编辑</el-button>
+                        <div v-if="post.editing" class="edit-options">
+                          <el-button type="danger" size="small" @click="deletePost(post.id)">删除</el-button>
+                          <el-button type="primary" size="small" @click="rewritePost(post.id)">编辑</el-button>
+                        </div>
+                      </div>
                     </el-col>
                   </el-row>
                 </el-list-item>
@@ -43,12 +51,15 @@
                       <el-image :src="collection.cover" class="post-cover"></el-image>
                     </el-col>
                     <el-col :span="18">
-                      <el-link :href="`/post/${collection.id}`" target="_blank" class="post-title">{{ collection.title }}</el-link>
+                      <router-link :to="`/post/${collection.id}`" class="post-title">{{ collection.title }}</router-link>
                       <p class="post-summary">{{ collection.summary }}</p>
                       <div class="post-stats">
                         <span><i class="el-icon-thumb"></i> {{ collection.likes }} 点赞</span>
                         <span><i class="el-icon-chat-dot-round"></i> {{ collection.comments }} 评论</span>
                       </div>
+                      <div class="post-actions">
+                        <el-button type="danger" size="small" @click="deleteCollection(collection.id)">删除</el-button>
+                      </div>
                     </el-col>
                   </el-row>
                 </el-list-item>
@@ -59,10 +70,12 @@
                 <el-list-item v-for="follower in user.followers" :key="follower.id">
                   <el-row :gutter="10" align="middle">
                     <el-col :span="4">
-                      <el-avatar :src="follower.avatar" class="follower-avatar"></el-avatar>
+                      <router-link :to="`/user/${follower.id}`">
+                        <el-avatar :src="follower.avatar" class="follower-avatar"></el-avatar>
+                      </router-link>
                     </el-col>
                     <el-col :span="16">
-                      <el-link :href="`/user/${follower.id}`" target="_blank" class="follower-name">{{ follower.name }}</el-link>
+                      <router-link :to="`/user/${follower.id}`" class="follower-name">{{ follower.name }}</router-link>
                       <p class="follower-level">等级: {{ follower.level }}</p>
                     </el-col>
                     <el-col :span="4">
@@ -81,16 +94,18 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const tab = ref('posts')
 const user = ref({
   avatar: 'https://via.placeholder.com/150',
   name: '张三',
   bio: '这是一个个人简介，介绍我的兴趣爱好、职业背景等。',
   posts: [
-    { id: 1, title: '第一篇文章标题', summary: '这是第一篇文章的摘要', likes: 100, comments: 50, cover: 'https://via.placeholder.com/200x150' },
+    { id: 1, title: '第一篇文章标题', summary: '这是第一篇文章的摘要', likes: 100, comments: 50, cover: 'https://via.placeholder.com/200x150', editing: false },
-    { id: 2, title: '第二篇文章标题', summary: '这是第二篇文章的摘要', likes: 200, comments: 75, cover: 'https://via.placeholder.com/200x150' },
+    { id: 2, title: '第二篇文章标题', summary: '这是第二篇文章的摘要', likes: 200, comments: 75, cover: 'https://via.placeholder.com/200x150', editing: false },
-    { id: 3, title: '第三篇文章标题', summary: '这是第三篇文章的摘要', likes: 150, comments: 60, cover: 'https://via.placeholder.com/200x150' }
+    { id: 3, title: '第三篇文章标题', summary: '这是第三篇文章的摘要', likes: 150, comments: 60, cover: 'https://via.placeholder.com/200x150', editing: false }
   ],
   collections: [
     { id: 1, title: '收藏的第一篇文章', summary: '这是收藏的第一篇文章的摘要', likes: 80, comments: 30, cover: 'https://via.placeholder.com/200x150' },
@@ -112,9 +127,9 @@ onMounted(() => {
       name: '张三',
       bio: '这是一个个人简介，介绍我的兴趣爱好、职业背景等。',
       posts: [
-        { id: 1, title: '第一篇文章标题', summary: '这是第一篇文章的摘要', likes: 100, comments: 50, cover: 'https://via.placeholder.com/200x150' },
+        { id: 1, title: '第一篇文章标题', summary: '这是第一篇文章的摘要', likes: 100, comments: 50, cover: 'https://via.placeholder.com/200x150', editing: false },
-        { id: 2, title: '第二篇文章标题', summary: '这是第二篇文章的摘要', likes: 200, comments: 75, cover: 'https://via.placeholder.com/200x150' },
+        { id: 2, title: '第二篇文章标题', summary: '这是第二篇文章的摘要', likes: 200, comments: 75, cover: 'https://via.placeholder.com/200x150', editing: false },
-        { id: 3, title: '第三篇文章标题', summary: '这是第三篇文章的摘要', likes: 150, comments: 60, cover: 'https://via.placeholder.com/200x150' }
+        { id: 3, title: '第三篇文章标题', summary: '这是第三篇文章的摘要', likes: 150, comments: 60, cover: 'https://via.placeholder.com/200x150', editing: false }
       ],
       collections: [
         { id: 1, title: '收藏的第一篇文章', summary: '这是收藏的第一篇文章的摘要', likes: 80, comments: 30, cover: 'https://via.placeholder.com/200x150' },
@@ -134,6 +149,41 @@ onMounted(() => {
 const unfollow = (followerId) => {
   user.value.followers = user.value.followers.filter(follower => follower.id !== followerId)
 }
+
+// 返回按钮功能
+const goBack = () => {
+  router.back()
+}
+
+// 切换编辑状态
+const toggleEdit = (postId) => {
+  const post = user.value.posts.find(p => p.id === postId);
+  if (post) {
+    post.editing = !post.editing;
+  }
+}
+
+// 删除文章
+const deletePost = (postId) => {
+  user.value.posts = user.value.posts.filter(post => post.id !== postId);
+}
+
+// 改写文章
+const rewritePost = (postId) => {
+  // 这里可以添加改写文章的逻辑
+  console.log(`正在改写文章 ${postId}`);
+  const post = user.value.posts.find(p => p.id === postId);
+  if (post) {
+    post.title = `改写后的文章标题 ${postId}`;
+    post.summary = `改写后的文章摘要 ${postId}`;
+  }
+  toggleEdit(postId); // 关闭编辑状态
+}
+
+// 删除收藏的文章
+const deleteCollection = (collectionId) => {
+  user.value.collections = user.value.collections.filter(collection => collection.id !== collectionId);
+}
 </script>
 
 <style scoped>
@@ -211,6 +261,14 @@ const unfollow = (followerId) => {
   margin-right: 10px;
 }
 
+.post-actions {
+  margin-top: 5px;
+}
+
+.edit-options {
+  margin-top: 5px;
+}
+
 .follower-avatar {
   width: 50px;
   height: 50px;