feat:完成了创建用户，用户列表接口。

src/api/apiPaths.ts

@@ -69,3 +69,11 @@ export const statsApi = {
   removeStats: '/statsCollection/delete',
   clearAllStats: '/statsCollection/clearAll' // TODO 未实现
 } as const
+
+export const userApi = {
+  // 系统用户相关接口
+  userList: '/user/list',
+  addUser: '/user/insert',
+  updateUser: '/user/update',
+  deleteUser: '/user/delete',
+} as const
\ No newline at end of file

src/api/user.ts

 import { request, POST } from '@/utils/request'
-import type { ApiResponse, QueryParams } from '@/utils/request'
-import { authApi } from './apiPaths'
+import type { ApiResponse, UserQueryParams } from '@/utils/request'
+import { authApi,userApi } from './apiPaths'
 
 // 用户登录
 export function login(data: { username: string, password: string }): Promise<ApiResponse> {
@@ -32,3 +32,39 @@ export function logout(): Promise<ApiResponse> {
     method: POST
   }) as unknown as Promise<ApiResponse>
 }
+
+// 获取用户列表
+export function getUserList(data: UserQueryParams) {
+  return request({
+    url: userApi.userList,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 新建用户
+export function addUser(data: UserQueryParams) {
+  return request({
+    url: userApi.addUser,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 更新用户
+export function updateUser(data: UserQueryParams) {
+  return request({
+    url: userApi.updateUser,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 删除用户
+export function deleteUser(data: UserQueryParams) {
+  return request({
+    url: userApi.deleteUser,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
\ No newline at end of file

src/layout/components/Sidebar/index.vue

@@ -19,7 +19,7 @@ const routes = computed(() => {
   
   const filterHiddenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
     return routes.filter((route: any) => {
-      console.log(route,'每一项');
+      // console.log(route,'每一项');
       // 如果当前路由标记为 hidden，则过滤掉
       if (route.meta?.hidden || route.hidden) {
         return false;

src/utils/request.ts

@@ -98,3 +98,13 @@ export interface QueryParams {
 export const request = (config: RequestConfig) => {
   return instance(config);
 }
+
+export interface UserQueryParams {
+  page?: number
+  size?: number
+  username?: string
+  nickname?: string
+  password?: string
+  role?: number
+  status?: boolean
+}
\ No newline at end of file

src/views/os-spiderManager/index.vue

@@ -91,7 +91,6 @@ const getData = () => {
 }
 
 onMounted(() => {
-	console.log('爬虫管理');
 })
 </script>
 

src/views/os-status/components/statusMonitor.vue

@@ -39,7 +39,6 @@ defineProps({
 })
 
 onMounted(() => {
-  console.log('状态监控');
 })
 </script>
 

src/views/os-system/components/addUserDialog.vue

 <template>
 	<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增用户' : '编辑用户'" width="610" center align-center
 		@close="handleClose" draggable>
-		<el-form :inline="true">
+		<div v-if="currentMode === '1'">
+			<el-form :inline="true" >
 			<el-form-item label="用户账号:">
-				<el-input v-model="userAccount" />
+				<el-input v-model="addNickName" />
 			</el-form-item>
-			<el-form-item label="用户名称:">
-				<el-input v-model="userName" />
+			<el-form-item label="用户名称:" >
+				<el-input v-model="addUserName" />
 			</el-form-item>
 		</el-form>
 		<div class="m-t-4" />
 		<el-form :inline="true">
-			<el-form-item label="用户备注:">
-				<el-input v-model="userRemark" />
+			<el-form-item label="用户状态:">
+				<el-select v-model="userStatusValue" placeholder=" " style="width: 180px;">
+					<el-option v-for="item in userStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
 			</el-form-item>
 			<el-form-item label="用户密码:">
 				<el-input v-model="userPassword" />
 			</el-form-item>
 		</el-form>
+		<div class="m-t-4" />
+		<el-form :inline="true">
+			<el-form-item label="用户角色:">
+				<el-select v-model="userRoleValue" placeholder=" " style="width: 180px;">
+					<el-option v-for="item in userRoleOptions" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</el-form-item>
+		</el-form>
+		</div>
 		<div class="m-t-4">
 		</div>
+		<div v-if="currentMode === '2'">
+			<el-form :inline="true" v-if="currentMode === '2'">
+			<el-form-item label="用户名称:" >
+				<el-input v-model="addNickName" />
+			</el-form-item>
+			<el-form-item label="用户角色:">
+				<el-select v-model="userRoleValue" placeholder=" " style="width: 180px;">
+					<el-option v-for="item in userRoleOptions" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</el-form-item>
+		</el-form>
+		<div class="m-t-4" />
+		<el-form :inline="true" v-if="currentMode === '2'">
+			<el-form-item label="用户状态:">
+				<el-select v-model="userStatusValue" placeholder=" " style="width: 180px;">
+					<el-option v-for="item in userStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</el-form-item>
+			<el-form-item label="用户密码:">
+				<el-input v-model="userPassword" />
+			</el-form-item>
+		</el-form>
+		</div>
+		<div class="m-t-4" />
 		<template #footer>
 			<div class="dialog-footer">
 				<el-button @click="handleClose">取消</el-button>
@@ -35,7 +71,30 @@
 import { onMounted, ref } from 'vue'
 import { defineProps } from 'vue';
 import { watch } from 'vue'
+import { getUserList, addUser, deleteUser, updateUser } from '@/api/user.ts'
 
+const userStatusValue = ref(true)
+const userRoleValue = ref(1)
+const userStatusOptions = [
+	{
+		value: true,
+		label: '启用'
+	},
+	{
+		value: '0',
+		label: '停用'
+	}
+]
+const userRoleOptions = [
+	{
+		value: false,
+		label: '管理员'
+	},
+	{
+		value: '0',
+		label: '普通用户'
+	}
+]
 const props = defineProps({
 	dialogVisible: {
 		type: Boolean,
@@ -45,7 +104,7 @@ const props = defineProps({
 		type: String,
 		default: 'add'
 	},
-	userCount: {
+	nickName: {
 		type: String,
 		default: ''
 	},
@@ -53,22 +112,30 @@ const props = defineProps({
 		type: String,
 		default: ''
 	},
-	userRemark: {
-		type: String,
+	id: {
+		type: Number,
 		default: false
 	},
 	userPassword: {
 		type: String,
 		default: ''
+	},
+	userStatus: {
+		type: Boolean,
+		default: ''
+	},
+	userRole: {
+		type: Number,
+		default: ''
 	}
 })
 // 向父组件传递dialog值
-const emit = defineEmits(['update:dialogVisible', 'confirm'])
+const emit = defineEmits(['update:dialogVisible', 'confirm','getUserList'])
 // 组件的状态
 const currentVisible = ref(props.dialogVisible)
 const currentMode = ref(props.mode)
-const userAccount = ref('')
-const userName = ref('')
+const addNickName = ref('')
+const addUserName = ref('')
 const userRemark = ref('')
 const userPassword = ref('')
 
@@ -78,9 +145,17 @@ const handleClose = () => {
 	currentVisible.value = false
 }
 // 确定的方法
-const handleConfirm = () => {
+const handleConfirm = async () => {
 	if (currentMode.value === '1') {
-
+		await addUser({
+			nickname: addNickName.value,
+			username: addUserName.value,
+			password: userPassword.value,
+			role: userRoleValue.value,
+			status: userStatusValue.value
+		})
+		console.log(addUserName.value);
+		emit('getUserList')
 	} else if (currentMode.value === '2') {
 
 	}
@@ -100,12 +175,32 @@ watch(() => currentVisible.value,
 		emit('update:dialogVisible', newVal)
 	}
 )
-
 watch(() => props.mode,
 	(newVal) => {
 		currentMode.value = newVal
 	}
 )
+
+watch(
+  // 监听需要同步的 props 集合
+  [() => props.dialogVisible, () => props.mode, () => props.nickName, () => props.userPassword, () => props.userStatus, () => props.userRole],
+  // 任一值变化时执行
+  ([newVisible, newMode, newNickName, newPwd, newStatus, newRole]) => {
+    if (newVisible && newMode === '2') {
+      addNickName.value = newNickName; 
+      userPassword.value = newPwd;    
+      userStatusValue.value = newStatus; 
+      userRoleValue.value = newRole;   
+    }
+    // 弹窗关闭时，清空表单
+    if (!newVisible) {
+      addNickName.value = '';
+      addUserName.value = '';
+      userPassword.value = '';
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <style>
@@ -120,6 +215,17 @@ watch(() => props.mode,
 	.el-dialog__title {
 		color: #ffffff;
 	}
+	.el-input__inner{
+		color: #ffffff;
+	}
+	.el-select__wrapper{
+		background-color:#1d5484 ;
+		box-shadow: 0,0,0,0;
+		border: none;
+		.el-select__placeholder{
+			color: #ffffff;
+		}
+	}
 }
 
 /* 修改表单样式 */
@@ -129,3 +235,7 @@ watch(() => props.mode,
 	}
 }
 </style>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/os-system/index.vue

@@ -13,12 +13,12 @@
 		<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
 			:cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }">
 			<el-table-column type="selection" width="40" />
-			<el-table-column property="number" label="序号" width="55" />
-			<el-table-column property="userCount" label="用户账号" show-overflow-tooltip />
-			<el-table-column property="userName" label="用户名称" show-overflow-tooltip />
-			<el-table-column property="userRemark" label="备注" show-overflow-tooltip />
-			<el-table-column property="userPassword" label="用户密码" show-overflow-tooltip />
-			<el-table-column property="createTime" label="创建时间" width="280" show-overflow-tooltip />
+			<el-table-column property="number" label="序号" width="55" type="index" />
+			<el-table-column property="username" label="用户账号" show-overflow-tooltip />
+			<el-table-column property="nickname" label="用户名称" show-overflow-tooltip />
+			<!-- <el-table-column property="userRemark" label="备注" show-overflow-tooltip /> -->
+			<!-- <el-table-column property="userPassword" label="用户密码" show-overflow-tooltip /> -->
+			<el-table-column property="create_time" label="创建时间" width="280" show-overflow-tooltip />
 			<el-table-column label="操作" width="220">
 				<template #default="scope">
 					<el-button type="primary" plain @click="handleEdit(scope.row)">
@@ -37,8 +37,8 @@
 		<!-- 删除弹窗组件 -->
 		<deleteDialog v-model:dialogVisible="showDeleteDialog" @mode="deleteMode" />
 		<!-- 创建用户弹窗组件 -->
-		<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName"
-			:user-remark="userRemark" :user-password="userPassword" />
+		<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :nick-name="nickName" :user-name="userName" :id="userId"
+			:user-role="userRole" :user-status="userStatus" :user-password="userPassword" @get-user-list="getUserListData" />
 	</div>
 </template>
 
@@ -47,73 +47,43 @@ import { ref, onMounted } from 'vue'
 import Pagination from '@/components/pagination/index.vue'
 import deleteDialog from '@/components/Delete/index.vue'
 import addUserDialog from './components/addUserDialog.vue'
+import { getUserList, addUser, deleteUser, updateUser } from '@/api/user.ts'
 
-const userCount = ref('')
+const userId = ref(0)
+const nickName = ref('')
 const userName = ref('')
-const userRemark = ref('')
+const userRole = ref(0)
+const userStatus = ref(true)
 const userPassword = ref('')
 const showDeleteDialog = ref(false)
 const deleteMode = ref('2')
 const dialogVisible = ref(false)
 const mode = ref('1')
-const tableData = ref([
-	{
-		number: '1',
-		userCount: 'admin',
-		userName: '管理员',
-		userRemark: '-',
-		userPassword: '123456',
-		createTime: '2025-01-01 00:00:00',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	},
-	{
-		name: '1',
-	}
-])
+const tableData = ref()
 const pageObj = ref({
-	total: 10,
+	total: 12,
 	pageSize: 10,
 	pageNo: 1
 })
-const handleEdit = (row: any) => {
+const handleEdit = async (row: any) => {
 	mode.value = '2'
-	// userCount.value = row.name
-	// userName.value = row.name
-	// userRemark.value = row.name
-	// userPassword.value = row.name
+	nickName.value = row.nickname
+	userName.value = row.username
+	userRole.value = row.role
+	userStatus.value = row.status
+	userPassword.value = row.password
 	dialogVisible.value = true
-	console.log(row);
+	// console.log(row);
 }
 
 const handleDelete = (row: any) => {
 	showDeleteDialog.value = true
 }
 
-const getData = () => {
-	console.log('getData');
+const getData = (number: number) => {
+	// console.log('getData');
+	console.log(number);
+
 }
 
 const handleDeleteConfirm = () => {
@@ -123,9 +93,17 @@ const openAddUserDialog = () => {
 	mode.value = '1'
 	dialogVisible.value = true
 }
+const getUserListData = async () => {
+	const userList = await getUserList({
+		page: 1,
+		size: 10
+	})
+	tableData.value = userList.data
+	console.log(tableData.value);
 
-onMounted(() => {
-	console.log('系统管理');
+}
+onMounted(async () => {
+	getUserListData()
 })
 </script>
 

src/views/os-taskInformation/index.vue

@@ -96,7 +96,6 @@ const goToTaskInformation = () => {
   router.push({ path: '/osSpiderManager/list' })
 }
 onMounted(() => {
-  console.log('任务信息');
 })
 </script>
 

src/views/os-taskRecord/index.vue

@@ -240,7 +240,6 @@ const getData = () => {
 }
 
 onMounted(() => {
-	console.log('任务执行记录');
 
 })
 </script>

vite.config.ts

@@ -30,7 +30,7 @@ export default defineConfig({
     proxy: {
       // 代理API请求，使用更精确的路径匹配
       '/api': {
-        target: 'http://127.0.0.1:5000/',
+        target: 'http://192.168.0.200:5001/',
         changeOrigin: true,
       },
     }