diff --git a/generated/core/OpenAPI.ts b/generated/core/OpenAPI.ts
index bb0dc7f..8a670f9 100644
--- a/generated/core/OpenAPI.ts
+++ b/generated/core/OpenAPI.ts
@@ -20,7 +20,7 @@ export type OpenAPIConfig = {
 };
 
 export const OpenAPI: OpenAPIConfig = {
-    BASE: 'http://oj.shuguangwl.com:8101',
+    BASE: 'http://localhost:8101',
     VERSION: '1.0',
     WITH_CREDENTIALS: true,
     CREDENTIALS: 'include',
diff --git a/src/components/GlobalHeader.vue b/src/components/GlobalHeader.vue
index 2092a0a..e15ee9c 100644
--- a/src/components/GlobalHeader.vue
+++ b/src/components/GlobalHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style=" background-color: var(--background-color);color: var(--text-color);">
+  <div style="background-color: var(--background-color); color: var(--text-color);">
     <a-row id="globalHeader" align="center" :wrap="false">
       <a-col flex="auto">
         <a-menu
@@ -14,165 +14,152 @@
           >
             <div class="title-bar">
               <img class="logo-m" src="../assets/logo.png" style="height: 35px" />
-              <div class="title" style='font-family: "楷体";color:black;font-size: 24px;'>Code Master</div>
+              <div class="title" style='font-family: "楷体"; color: black; font-size: 24px;'>Code Master</div>
             </div>
           </a-menu-item>
           <a-menu-item v-for="item in visRouters" :key="item.path">
-            <component :is="item.meta?.icon"> </component>{{ item.name }}
+            <component :is="item.meta?.icon"></component>{{ item.name }}
           </a-menu-item>
         </a-menu>
       </a-col>
-			<a-col flex="100px">
-			<a-space size="large" direction="vertical">
-				
-    <a-space size="large">
-			<a-dropdown>
-				<IconSun v-if="mode==1" @click="day()" style=" font-size: 20px;" />
-				<IconMoon v-if="mode==0" @click="drak()" style=" font-size: 20px;color:aliceblue"/>
-         <template #content>
-					<a-space size="large" direction="vertical" fill>
-					<a-row  @click="day()"> 
-						<a-button type="text"><IconSun @click="day()" style=" font-size: 20px;" />白天模式</a-button>	
-					</a-row>
-				</a-space>
-				<a-space size="large" direction="vertical" fill>
-          <a-row  @click="drak()">
-						<a-button type="text"><IconMoon style=" font-size: 20px;"/>黑夜模式</a-button>
-          
-				 </a-row>
-				</a-space>
-         </template>
-      </a-dropdown>
-			
-    </a-space>
-			
-    </a-space>
-	</a-col>
-  <a-col flex="100px">
-		
-<template v-if="loginState">
-	<a-space size="large" direction="vertical">
-    <a-space size="large">
-			<a-dropdown 
-			@select="handleSelect">
-			<!-- 用户头像预留 -->
-				<a-avatar 
-				:size="48">
-				<img src="https://img.pqblog.com/i/2024/07/13/215137.jpg" alt="">
-				<!-- <p>已登录</p> -->
-			 </a-avatar>
-         <template #content>
-          <a-doption @click="gotoCenter()">
-						<a-button type="text">
-							<icon-user style=" font-size: 20px;" />
-							个人中心
-						</a-button>	
-					</a-doption>
-          <a-doption @click="logout()">
-						<a-button type="text">
-							<icon-import style=" font-size: 20px;" />
-							退出登录
-						</a-button>	
-					</a-doption>
-         </template>
-      </a-dropdown>
-    </a-space>
-	</a-space>
-</template>
-<template v-else>
-	<a-space size="large" direction="vertical">
-    <a-space size="large">
-			<a-button type="primary" @click="login()">登陆</a-button>
-    </a-space>
-	</a-space>
-</template>
- </a-col>
+      <a-col flex="100px">
+        <a-space size="large" direction="vertical">
+          <a-space size="large">
+            <a-dropdown>
+              <!-- 切换主题的图标 -->
+              <IconSun v-if="mode == 1" @click="day()" style="font-size: 20px;" />
+              <IconMoon v-if="mode == 0" @click="drak()" style="font-size: 20px; color: aliceblue" />
+              <template #content>
+                <a-space size="large" direction="vertical" fill>
+                  <a-row @click="day()">
+                    <a-button type="text"><IconSun style="font-size: 20px;" />白天模式</a-button>
+                  </a-row>
+                </a-space>
+                <a-space size="large" direction="vertical" fill>
+                  <a-row @click="drak()">
+                    <a-button type="text"><IconMoon style="font-size: 20px;" />黑夜模式</a-button>
+                  </a-row>
+                </a-space>
+              </template>
+            </a-dropdown>
+          </a-space>
+        </a-space>
+      </a-col>
+      <a-col flex="100px">
+        <template v-if="loginState">
+          <a-space size="large" direction="vertical">
+            <a-space size="large">
+              <a-dropdown @select="handleSelect">
+                <!-- 用户头像 -->
+                <a-avatar :size="48">
+                  <img :src="store.state.user?.loginUser.userAvatar" alt="" />
+                </a-avatar>
+                <template #content>
+                  <a-doption @click="gotoCenter()">
+                    <a-button type="text">
+                      <icon-user style="font-size: 20px;" />
+                      个人中心
+                    </a-button>
+                  </a-doption>
+                  <a-doption @click="logout()">
+                    <a-button type="text">
+                      <icon-import style="font-size: 20px;" />
+                      退出登录
+                    </a-button>
+                  </a-doption>
+                </template>
+              </a-dropdown>
+            </a-space>
+          </a-space>
+        </template>
+        <template v-else>
+          <a-space size="large" direction="vertical">
+            <a-space size="large">
+              <a-button type="primary" @click="login()">登陆</a-button>
+            </a-space>
+          </a-space>
+        </template>
+      </a-col>
     </a-row>
   </div>
 </template>
 
 <script setup lang="ts">
-import { routes } from "@/router/routes";
-import { ref, computed } from "vue";
-import { useRouter,useRoute } from "vue-router";
-import { useStore } from "vuex";
-import { Message } from '@arco-design/web-vue';
-import accessCheck from "@/access/access_check";
-import ACCESS_ENMU from "@/access/ACCESS_ENUM";
-import { UserControllerService } from "../../generated";
+import { routes } from "@/router/routes"; // 路由配置
+import { ref, computed } from "vue"; // Vue 3 组合式 API
+import { useRouter, useRoute } from "vue-router"; // Vue Router
+import { useStore } from "vuex"; // Vuex 状态管理
+import { Message } from '@arco-design/web-vue'; // 消息提示组件
+import accessCheck from "@/access/access_check"; // 权限检查
+import ACCESS_ENMU from "@/access/ACCESS_ENUM"; // 权限枚举
+import { UserControllerService } from "../../generated"; // 用户服务
 
-const router = useRouter();
-const route = useRoute().matched[0].children;
-const store = useStore();
+const store = useStore(); // Vuex 存储实例
+const router = useRouter(); // 路由实例
+const route = useRoute().matched[0].children; // 获取当前路由的子路由
 
-let selectedKeys = ref(["/"]);
-const Loginuser = store.state.user?.loginUser;
-const loginState=computed(()=>{
-	return store.state.user?.loginUser && store.state.user.loginUser.userRole && store.state.user.loginUser.userRole !== 'notlogin';
-})
-console.log(Loginuser);
-router.afterEach((to, from, failure) => {
+let selectedKeys = ref(["/"]); // 选中的菜单项
+const loginState = computed(() => {
+  return store.state.user?.loginUser && store.state.user.loginUser.userRole && store.state.user.loginUser.userRole !== 'notlogin';
+}); // 计算属性，判断用户是否登录
+const visRouters = computed(() => {
+  return routes[1]?.children.filter((item) => {
+    // 过滤隐藏的路由和权限校验
+    if (item.meta?.hidden) return false;
+    if (!accessCheck(store.state.user?.loginUser, item.meta?.access as string)) return false;
+    return true;
+  });
+}); // 计算可见路由
+
+// 主题模式，1: 白天模式，0: 暗黑模式
+const mode = ref(1);
+
+// 切换到暗黑模式
+const drak = () => {
+  mode.value = 0;
+  document.body.setAttribute('arco-theme', 'dark');
+  document.body.classList.add('dark-theme'); // 添加暗色主题类
+};
+
+// 切换到白天模式
+const day = () => {
+  mode.value = 1;
+  document.body.classList.remove('dark-theme'); // 移除暗色主题类
+  document.body.removeAttribute('arco-theme');
+};
+
+// 退出登录
+const logout = async () => {
+  console.log("正在退出");
+  let res = await UserControllerService.userLogoutUsingPost();
+  if (res.code === 0) {
+    Message.success("退出成功");
+    store.commit('user/updateUser', {}); // 更新状态为空
+  }
+};
+
+// 计算属性来获取用户名
+const username = computed(() => store.state.user?.loginUser?.userName ?? "123");
+
+// 路由点击事件
+const doMenuClick = (key: string) => {
+  router.push({ path: key });
+};
+
+// 跳转到用户中心
+const gotoCenter = () => {
+  router.push('/user/center');
+};
+
+// 路由变化后更新选中的菜单项
+router.afterEach((to) => {
   selectedKeys.value = [to.path];
 });
-let mode=ref(1)
-const drak=()=>{
-mode.value=0
-document.body.setAttribute('arco-theme', 'dark')
-document.body.classList.add('dark-theme'); // 添加暗色主题类
 
-// // 恢复亮色主题
-// document.body.removeAttribute('arco-theme');
-}
-const day=()=>{
-mode.value=1
-// // 恢复亮色主题
-document.body.classList.remove('dark-theme'); // 移除暗色主题类
-document.body.removeAttribute('arco-theme');
-}
-const logout=async()=>{
-	console.log("正在退出")
-	console.log(store.state.user.loginUser)
-	let res=await UserControllerService.userLogoutUsingPost()
-	if(res.code===0){
-		Message.success("退出成功")
-		console.log(store.state.user.loginUser)
-		store.commit('user/updateUser', {}); // 更新状态为空
-	}
-}
-// 过滤隐藏的路由
-const visRouters = computed(() =>{
- return routes[1]?.children.filter((item) => {
-	// 过滤隐藏路由
-    if (item.meta?.hidden) {
-      return false;
-    }
-		// 过滤权限校验
-    if (!accessCheck(store.state.user?.loginUser, item.meta?.access as string)) {
-      return false;
-    }
-    return true;
-  })
-});
-console.log(visRouters)
-// 计算属性来获取用户名
-const username = computed(
-  () => store.state.user?.loginUser?.userName ?? "123"
-);
-const login=()=>{
-	router.push({
-		path:'/user/login'
-	})
-}
-// 点击事件
-const doMenuClick = (key: string) => {
-  router.push({
-    path: key,
-  });
+// 登录功能
+const login = () => {
+  router.push({ path: '/user/login' });
 };
-// 跳转到用户中心
-const gotoCenter=()=>{
-	router.push('/user/center')
-}
 </script>
 
 <style>
@@ -180,13 +167,7 @@ const gotoCenter=()=>{
   display: flex;
   align-items: center;
 }
-
-.user-info {
+.title-bar {
   display: flex;
-  flex-direction: row;
-  justify-content: end;
-}
-.title-bar{
-	display:flex;
 }
 </style>
diff --git a/src/components/User/UserInfo.vue b/src/components/User/UserInfo.vue
index ffe64b6..80e7921 100644
--- a/src/components/User/UserInfo.vue
+++ b/src/components/User/UserInfo.vue
@@ -1,47 +1,43 @@
 <template>
- <div class="info" style="align-items: center;">
-					<div class="avatar" style="display: flex;justify-content: center;align-items: center;width: 50%;">
-        
-					<a-avatar :size="100"  id="userAvatar" @click="onClcik" :style="{ backgroundColor: '#0A65CC' }">
-				 
-            <img v-if="form.userAvatar" class="avatar-image" alt="avatar" :src="form.userAvatar" />
-            <IconUser v-else />
-            <template #trigger-icon>
-              <IconEdit/>
-            </template>
-          </a-avatar>
-        </div>
-          <a-space
-            direction="vertical"
-            size="large"
-            :style="{ width: '600px' }"
-          >
-            <a-form :model="form" layout="vertical">
-              <a-form-item field="userName" label="昵称">
-                <a-input v-model="form.userName" placeholder="昵称（必填项）" />
-              </a-form-item>
-              <a-form-item field="email" label="邮箱">
-                <a-input v-model="form.email" placeholder="邮箱" />
-              </a-form-item>
-              <a-form-item field="phone" label="电话">
-                <a-input v-model="form.phone" placeholder="电话" />
-              </a-form-item>
-              <a-form-item field="userProfile" label="个人介绍">
-                <a-textarea
-                  v-model="form.userProfile"
-                  placeholder="关于你的个性、兴趣或者经验"
-                  :max-length="{ length: 100, errorOnly: true }"
-                  allow-clear
-                  show-word-limit
-                />
-              </a-form-item>
-              <a-button type="primary" class="save" @click="saveInfo"
-                >保存</a-button
-              >
-            </a-form>
-          </a-space>
-        </div>
+  <div class="info" style="align-items: center;">
+    <div class="avatar" style="display: flex; justify-content: center; flex-direction: column; align-items: center; width: 50%;">
+      <a-avatar :size="100" id="userAvatar" @click="triggerFileInput"> 
+        <img v-if="form.userAvatar"  alt="avatar" :src="form.userAvatar"  class="avatar-image"/>
+        <IconUser v-else />
+        <template #trigger-icon>
+          <IconEdit />
+        </template>
+      </a-avatar>
+      <!-- 隐藏的文件输入框 -->
+      <input type="file" @change="getfile" ref="fileInput" style="display: none;" />
+    </div>
+
+    <a-space direction="vertical" size="large" :style="{ width: '600px' }">
+      <a-form :model="form" layout="vertical">
+        <a-form-item field="userName" label="昵称">
+          <a-input v-model="form.userName" placeholder="昵称（必填项）" />
+        </a-form-item>
+        <a-form-item field="email" label="邮箱">
+          <a-input v-model="form.email" placeholder="邮箱" />
+        </a-form-item>
+        <a-form-item field="phone" label="电话">
+          <a-input v-model="form.phone" placeholder="电话" />
+        </a-form-item>
+        <a-form-item field="userProfile" label="个人介绍">
+          <a-textarea
+            v-model="form.userProfile"
+            placeholder="关于你的个性、兴趣或者经验"
+            :max-length="{ length: 100, errorOnly: true }"
+            allow-clear
+            show-word-limit
+          />
+        </a-form-item>
+        <a-button type="primary" class="save" @click="saveInfo">保存</a-button>
+      </a-form>
+    </a-space>
+  </div>
 </template>
+
 <script setup>
 import { IconUser, IconEdit } from "@arco-design/web-vue/es/icon";
 import { useStore } from "vuex";
@@ -49,13 +45,14 @@ import { computed, ref } from "vue";
 import { Message } from "@arco-design/web-vue";
 import { UserControllerService } from "../../../generated";
 import { useRouter } from "vue-router";
+import axios from 'axios';
+
 const store = useStore();
 const router = useRouter();
-
-// 获取相关信息
+const fileInput=ref(null)
+// 获取用户信息
 const loginUser = computed(() => store.state.user.loginUser);
-//console.log(loginUser);
-
+const selectedFile = ref(null);
 const form = ref({
   userName: loginUser.value.userName,
   userProfile: loginUser.value.userProfile,
@@ -63,39 +60,74 @@ const form = ref({
   email: loginUser.value.email,
   phone: loginUser.value.phone
 });
-// 上传头像功能
-// const file = ref();
 
-// const onChange = (_, currentFile) => {
-//   file.value = {
-//     ...currentFile,
-//     url: URL.createObjectURL(currentFile.file),
-//   };
-// };
-// const onProgress = (currentFile) => {
-//   file.value = currentFile;
-// };
+// 保存用户信息
 const saveInfo = async () => {
-  //console.log(form.value);
+  const uploadSuccess = await uploadFile();
+  if (!uploadSuccess) return; // 如果上传失败，停止执行保存
+
   const res = await UserControllerService.updateMyUserUsingPost(form.value);
   if (res.code === 0) {
     Message.success("修改个人信息成功");
     await store.dispatch("user/getLoginUser");
-    router.push({
-      path: "/about",
-      replace: true,
-    });
   } else {
-    Message.error("修改个人信息失败" + res.message);
+    Message.error("修改个人信息失败: " + res.message);
   }
 };
-const onClcik = () => {
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-  let result = 'https://api.multiavatar.com/';
-  for (let i = 0; i < 16; i++) {
-    result += characters.charAt(Math.floor(Math.random() * 52));
-  }
-  alert(result)
-  form.userAvatar= result
+
+// 触发文件输入框
+const triggerFileInput = () => {
+	console.log(fileInput.value)
+	fileInput.value.click()
+  // const fileInput = document.querySelector('input[type="file"]');
+  // fileInput.click(); // 触发点击事件，打开文件选择对话框
 };
-</script>
\ No newline at end of file
+
+// 获取文件
+const getfile = async (event) => {
+  const files = event.target.files;
+  selectedFile.value = files[0]; // 选择第一个文件
+  if (files.length > 0) {
+    console.log('选择的文件:', selectedFile.value);
+    await uploadFile(); // 上传文件
+  } else {
+    console.log('没有选择文件');
+  }
+};
+
+// 上传图片
+const uploadFile = async () => {
+  if (!selectedFile.value) {
+    alert('请先选择一个文件');
+    return false; // 上传未成功
+  }
+  
+  const formData = new FormData();
+  formData.append('image', selectedFile.value); // 将文件添加到 FormData
+  formData.append('token', 123); // 将 token 添加到 FormData（可以替换为实际的 token）
+
+  try {
+    const response = await axios.post('http://222.186.56.232:40061/api/index.php', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data', // 设置内容类型
+      },
+    });
+    form.value.userAvatar = response.data.url; // 更新头像 URL
+    console.log('文件上传成功:', response.data.url);
+    return true; // 上传成功
+  } catch (error) {
+    console.error('文件上传失败:', error.response ? error.response.data : error.message);
+    return false; // 上传未成功
+  }
+};
+</script>
+
+<style scoped>
+.avatar-image {
+  width: 100%;
+  border-radius: 50%;
+}
+#userAvatar {
+  position: relative;
+}
+</style>
diff --git a/src/reuqest/axios.ts b/src/reuqest/axios.ts
deleted file mode 100644
index b214efa..0000000
--- a/src/reuqest/axios.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// // src/axios.js
-// import axios from 'axios';
-// import { inject } from 'vue';
-
-// const loading = inject('loading');
-
-// const instance = axios.create({
-//   baseURL: 'http://127.0.0.1:8101',
-//   timeout: 10000,
-// });
-
-// instance.interceptors.request.use(
-//   (config) => {
-//     loading.value = true;
-//     return config;
-//   },
-//   (error) => {
-//     loading.value = false;
-//     return Promise.reject(error);
-//   }
-// );
-
-// instance.interceptors.response.use(
-//   (response) => {
-//     loading.value = false;
-//     return response;
-//   },
-//   (error) => {
-//     loading.value = false;
-//     return Promise.reject(error);
-//   }
-// );
-
-// export default instance;
diff --git a/src/views/forum/ForumPublish.vue b/src/views/forum/ForumPublish.vue
index 5833229..89a1edf 100644
--- a/src/views/forum/ForumPublish.vue
+++ b/src/views/forum/ForumPublish.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="forum-publish">
     <h1>发布新帖子</h1>
-    <a-form :model="form" layout="vertical" @submit="handleSubmit">
+    <a-form :model="form" layout="vertical" >
       <a-form-item
         label="标题"
         field="title"
@@ -22,7 +22,7 @@
         />
       </a-form-item>
 
-      <a-button type="primary" html-type="submit">发布</a-button>
+      <a-button type="primary" html-type="submit" @click="handleSubmit">发布</a-button>
     </a-form>
     
     <a-message v-if="message" :type="messageType" :content="message" />
@@ -31,11 +31,13 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { PostControllerService } from "../../../generated";
 import { Message } from '@arco-design/web-vue';
 
 const form = ref({
   title: '',
-  content: ''
+  content: '',
+	tags:["组队"]
 });
 
 const message = ref('');
@@ -54,15 +56,11 @@ const handleSubmit = async (event: Event) => {
   // 这里可以添加 API 调用
   try {
     // 假设这是一个异步操作，比如调用 API
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    
+    let res=await PostControllerService.addPostUsingPost(form.value)
     // 提交成功
-    message.value = '帖子发布成功！';
-    messageType.value = 'success';
-    
-    // 重置表单
-    form.value.title = '';
-    form.value.content = '';
+   if(res.code==0){
+		alert("发布成功")
+	 }
   } catch (error) {
     message.value = '发布帖子失败，请稍后重试';
     messageType.value = 'error';
diff --git a/src/views/forum/ForumView.vue b/src/views/forum/ForumView.vue
index ad034e3..11c1812 100644
--- a/src/views/forum/ForumView.vue
+++ b/src/views/forum/ForumView.vue
@@ -1,161 +1,204 @@
 <template>
-  <div class="forum-home">
-    <!-- 顶部导航栏 -->
-    <a-layout>
-     
+  <div class="forum-container">
+    <!-- 侧边栏 -->
+		<aside class="sidebar" style="color: var(--text-color);">
+  <h3 class="sidebar-title" style="color: var(--text-color);">分类</h3>
+  <ul class="category-list" style="color: var(--text-color);">
+    <li
+      v-for="category in categories"
+      :key="category.id"
+      @click="selectCategory(category)"
+      :class="{ active: selectedCategory && selectedCategory.id === category.id }"
+    >
+      {{ category.name }}
+    </li>
+  </ul>
+</aside>
 
-      <a-layout-content>
-        <div class="content">
-          <a-row gutter={24}>
-            <!-- 侧边栏 -->
-            <a-col span="6">
-              <a-card title="分类" class="sidebar">
-                <a-menu mode="inline" theme="light">
-                  <a-menu-item key="category1">分类 1</a-menu-item>
-                  <a-menu-item key="category2">分类 2</a-menu-item>
-                  <a-menu-item key="category3">分类 3</a-menu-item>
-                </a-menu>
-              </a-card>
-            </a-col>
 
-            <!-- 主内容区域 -->
-						<a-list
-    class="list-demo-action-layout"
-    :bordered="false"
-    :data="dataSource"
-    :pagination-props="paginationProps"
-  >
-    <template #item="{ item }">
-      <a-list-item class="list-demo-item" action-layout="vertical">
-        <template #actions>
-          <span><icon-heart />83</span>
-          <span><icon-star />{{ item.index }}</span>
-          <span><icon-message />Reply</span>
+    <!-- 主内容区域 -->
+    <main class="main-content">
+      <a-list
+        class="list-demo-action-layout"
+        :bordered="false"
+        :data="dataSource"
+        :pagination-props="paginationProps"
+      >
+        <template #item="{ item }">
+          <a-list-item class="list-demo-item" action-layout="vertical" style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
+           
+						<template #actions>
+              <span><icon-heart />{{ item.thumbNum }}</span>
+              <span><icon-star />{{ item.favourNum }}</span>
+              <span><icon-message />收藏</span>
+            </template>
+						<template #content>
+              <div class="content-area">
+               你好你好你好你好你好你好你好你好你好你好你好你好你好你好
+              </div>
+            </template>
+            <template #extra>
+              <div class="image-area">
+                <img alt="arco-design" :src="item.imageSrc || `https://api.miaomc.cn/image/get?${Math.random()}`" />
+
+              </div>
+            </template>
+            <a-list-item-meta :title="item.title" :description="item.content">
+              <template #avatar>
+                <a-avatar shape="square">
+                  <img alt="avatar" :src="item.user.userAvatar" />
+                </a-avatar>
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
         </template>
-        <template #extra>
-          <div className="image-area">
-            <img alt="arco-design" :src="item.imageSrc" />
-          </div>
-        </template>
-        <a-list-item-meta
-          :title="item.title"
-          :description="item.description"
-        >
-          <template #avatar>
-            <a-avatar shape="square">
-              <img alt="avatar" :src="item.avatar" />
-            </a-avatar>
-          </template>
-        </a-list-item-meta>
-      </a-list-item>
-    </template>
-  </a-list>
-          </a-row>
-        </div>
-      </a-layout-content>
-
-      
-    </a-layout>
+      </a-list>
+    </main>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref,reactive } from 'vue';
-import { useRouter } from 'vue-router';
-const names = ['Socrates', 'Balzac', 'Plato'];
-const avatarSrc = [
-  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
-  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
-  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp',
-];
-const imageSrc = [
-  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp',
-  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp',
-  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp',
-];
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { PostControllerService } from '../../../generated'; // 假设你有这个服务文件
 
-const dataSource = new Array(15).fill(null).map((_, index) => {
-  return {
-    index: index,
-    avatar: avatarSrc[index % avatarSrc.length],
-    title: names[index % names.length],
-    description:
-      'Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).',
-    imageSrc: imageSrc[index % imageSrc.length],
-  };
+// 请求返回的文章数据
+const article = ref([]); // 存放获取的文章数据
+
+// 存放分类信息
+const categories = ref([
+  { id: 1, name: "所有文章" },
+  { id: 2, name: "前端开发" },
+  { id: 3, name: "后端开发" },
+  { id: 4, name: "全栈开发" },
+]); // 这里是示例数据，替换为真实分类数据
+
+const selectedCategory = ref(null); // 当前选中的分类
+
+// 分页数据
+const paginationProps = reactive({
+  defaultPageSize: 3,
+  total: 0,
+  current: 1,
+  onChange: (page) => fetchData(page), // 页码变化时重新获取数据
 });
-const paginationProps=reactive({
-        defaultPageSize: 3,
-        total: dataSource.length
-      })
+const getRandomImg=()=>{return }
+// 获取文章列表数据
+const fetchData = async (page = 1) => {
+  try {
+    const res = await PostControllerService.listPostVoByPageUsingPost({
+      current: page,
+      pageSize: paginationProps.defaultPageSize,
+      categoryId: selectedCategory.value ? selectedCategory.value.id : null, // 如果有选中分类，则按分类过滤
+    });
+    if (res.code === 0) {
+      // 设置文章数据
+      article.value = res.data.records.map((item) => ({
+        ...item,
+        imageSrc: item.imageSrc || `https://api.miaomc.cn/image/get?${Math.random()}`,
+      }));
+      paginationProps.total = res.data.total; // 设置总条目数
+    }
+  } catch (error) {
+    console.error('数据获取失败:', error);
+  }
+};
+
+// 初始化时加载数据
+onMounted(() => {
+  fetchData();
+});
+
+// 切换分类
+const selectCategory = (category) => {
+  selectedCategory.value = category;
+  fetchData(); // 切换分类时重新获取数据
+};
+
+// dataSource 是要绑定到列表的数据
+const dataSource = article;
 </script>
 
 <style scoped>
-.forum-home {
-  /* background-color: #f0f2f5; 背景颜色 */
-}
-.list-demo-action-layout {
-  width: 60%;
-  
-  border-radius: 2px;
-  overflow: hidden;
-}
-.list-demo-action-layout .image-area {
-  width: 183px;
-  height: 119px;
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.list-demo-action-layout .list-demo-item {
-  padding: 20px 0;
-  border-bottom: 1px solid var(--color-fill-3);
-}
-
-.list-demo-action-layout .image-area img {
-  width: 100%;
-}
-
-.list-demo-action-layout .arco-list-item-action .arco-icon {
-  margin: 0 4px;
-}
-.header {
-	background-color: var(--background-color);
-  color: var(--text-color);
-  padding: 0 20px;
+/* 布局样式 */
+.forum-container {
   display: flex;
-  align-items: center;
-}
-
-.logo {
-  font-size: 24px;
-  font-weight: bold;
-  margin-right: 20px;
-}
-
-.nav-menu {
-  flex-grow: 1;
-}
-
-.content {
-  padding: 80px;
+  padding: 20px;
+  gap: 20px;
+	color:--text-color;
 }
 
+/* 侧边栏样式 */
 .sidebar {
-	background-color: var(--background-color);
-  color: var(--text-color);
+	
+  flex: 0 0 200px;
+  background-color: --background-color;
+  padding: 15px;
   border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	border: 0.5px solid #fff;
 }
 
-.post-list {
-	background-color: var(--background-color);
-  color: var(--text-color);
-  border-radius: 8px;
+.sidebar-title {
+	
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
 }
-.footer {
-  text-align: center;
-  padding: 10px;
-	background-color: var(--background-color);
-  color: var(--text-color);
+
+.category-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.category-list li {
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+}
+
+.category-list li:hover {
+  background-color: #d8d8d8;
+}
+
+.category-list li.active {
+  background-color: #1890ff;
+  color: white;
+}
+
+/* 主内容区域样式 */
+.main-content {
+  flex: 1;
+}
+
+.list-demo-action-layout {
+  background-color: --background-color;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.list-demo-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.image-area {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 150px;
+  height: 150px;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid #e5e5e5;
+  margin-left: 10px;
+}
+
+.image-area img {
+  max-width: 100%;
+  max-height: 100%;
 }
 </style>