完成管理页面雏形

src/views/ManagePage.vue

@@ -1,11 +1,57 @@
 <template>
+  <div class="manage-page">
+    <el-button 
+      type="danger" 
+      class="logout-btn"
+      @click="handleLogout"
+    >
+      登出
+    </el-button>
 
+    <UserTable/>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { userStore as store } from '@/store/userStore'
+import { userService } from '@/api/userService'
+import type { UserResponse } from '@/api/types'
+import UserTable from '@/components/UserTable.vue'
 
+const router = useRouter()
+const userStore = store()
+
+const userList = ref<UserResponse[]>([])
+
+const fetchUserList = async () => {
+  try {
+    const data = await userService.getUsers()
+    userList.value = data
+  } catch (error) {
+    ElMessage.error('获取用户列表失败')
+  }
+}
+
+const handleLogout = () => {
+  userStore.logout()
+  router.push({ name: 'login' })
+}
+
+onMounted(() => {
+  fetchUserList()
+})
 </script>
 
 <style scoped>
+.manage-page {
+  padding: 20px;
+}
 
+.logout-btn {
+  margin-bottom: 20px;
+  float: right;
+}
 </style>