diff --git a/config.ts b/config.ts
new file mode 100644
index 0000000..339b6a8
--- /dev/null
+++ b/config.ts
@@ -0,0 +1,15 @@
+export const AppConfig: {
+	[key:string]: {
+        ldapApiUrl: string,
+        ldapApiKey: string
+    }
+} = {
+	default:{
+		ldapApiUrl: 'https://test-api.hkchc.team',
+		ldapApiKey: 'MPCbsNa6l2RJ7D1Zo6D03qtVF1P93st3'
+	},
+	production:{
+		ldapApiUrl: 'https://test-api.hkchc.team',
+		ldapApiKey: 'MPCbsNa6l2RJ7D1Zo6D03qtVF1P93st3'
+	}
+}
\ No newline at end of file
diff --git a/src/hooks/useRemoteUserList.ts b/src/hooks/useRemoteUserList.ts
new file mode 100644
index 0000000..63acaf9
--- /dev/null
+++ b/src/hooks/useRemoteUserList.ts
@@ -0,0 +1,35 @@
+import {useEffect, useState} from "react";
+
+function getRemoteUserNameList() {
+	return new Promise<string[][]>((resolve, reject) => {
+		fetch(`${AppConfig.ldapApiUrl}/api/v1/hkchc/user/ldap/get_staff_list`, {
+			method: 'GET',
+			headers: {
+				Apikey: AppConfig.ldapApiKey
+			},
+			redirect: 'follow'
+		})
+			.then(response => response.json())
+			.then(ret => {
+				const result = ret as APIResponse<string[][]>;
+				if (result.code === 0) {
+					resolve(result.data!)
+				} else {
+					reject(result.message)
+				}
+			})
+			.catch(reject);
+	})
+}
+
+export function useRemoteUserList() {
+
+	const [usernameList, setUserList] = useState<string[]>([])
+
+	useEffect(()=>{
+		getRemoteUserNameList().then(data=>{
+            setUserList(data.flat())
+        })
+	},[])
+	return usernameList
+}
\ No newline at end of file
diff --git a/src/pages/auth/permission.tsx b/src/pages/auth/permission.tsx
index 40766ce..6e1c9fb 100644
--- a/src/pages/auth/permission.tsx
+++ b/src/pages/auth/permission.tsx
@@ -1,86 +1,96 @@
 import {Card} from "@/components/card";
 import {useSetState} from "ahooks";
-import {Button, Space, TagInput, Toast} from "@douyinfe/semi-ui";
+import {Button, Select, Space, Toast} from "@douyinfe/semi-ui";
 import {useTranslation} from "react-i18next";
-import {useEffect} from "react";
+import {useEffect, useMemo} from "react";
 import {getPermissionList, savePermissionList} from "@/service/api/user.ts";
+import {useRemoteUserList} from "@/hooks/useRemoteUserList.ts";
 
 const DEFAULT_ROLES = [
-	'root','ro','fo'
+	'root', 'ro', 'fo'
 ]
 
-const Permission = ()=>{
+const Permission = () => {
 	const {t} = useTranslation()
-	const [state,setState] = useSetState<{
-		list:PermissionUserList[];
-		loading?:boolean;
+	const usernameList = useRemoteUserList();
+	const [state, setState] = useSetState<{
+		list: PermissionUserList[];
+		loading?: boolean;
 	}>({
-		list:[]
+		list: []
 	})
-	const onUsernameChange = (role_name:string,username_list: string[])=>{
-		const index = state.list.findIndex(it=>it.role_name == role_name)
-		if(index != -1){
+	const onUsernameChange = (role_name: string, username_list: string[]) => {
+		const index = state.list.findIndex(it => it.role_name == role_name)
+		if (index != -1) {
 			state.list[index] = {
-				role_name,username_list
+				role_name, username_list
 			};
 			setState({
-				list:state.list
+				list: state.list
 			})
 		}
 	}
-	const saveRoles = ()=>{
+	const saveRoles = () => {
 		setState({
-			loading:true
+			loading: true
 		})
-		savePermissionList(state.list).then(()=>{
-			Toast.success({content:`Save Success`,duration: 3,})
-		}).catch(e=>{
+		savePermissionList(state.list).then(() => {
+			Toast.success({content: `Save Success`, duration: 3,})
+		}).catch(e => {
 			Toast.error({
-				content:`Save Error:${e.message}`,
+				content: `Save Error:${e.message}`,
 				duration: 3,
 			})
-		}).finally(()=>{
-			setState({loading:false})
+		}).finally(() => {
+			setState({loading: false})
 		})
 	}
-	const loadAllPermission = ()=>{
+	const loadAllPermission = () => {
 		setState({
-			loading:true
+			loading: true
 		})
-		getPermissionList().then(list=>{
-			const roles:{
-				[key:string]:string[]
+		getPermissionList().then(list => {
+			const roles: {
+				[key: string]: string[]
 			} = {}
 			// array to object
-			list.forEach(it=>{
+			list.forEach(it => {
 				roles[it.role_name] = it.username_list
 			})
-			const permissionList:PermissionUserList[] = [];
-			DEFAULT_ROLES.forEach(role_name=>{
+			const permissionList: PermissionUserList[] = [];
+			DEFAULT_ROLES.forEach(role_name => {
 				permissionList.push({
-					role_name,username_list: roles[role_name]
+					role_name, username_list: roles[role_name]
 				})
 			})
-			setState({list:permissionList})
-		}).finally(()=>{
-			setState({loading:false})
+			setState({list: permissionList})
+		}).finally(() => {
+			setState({loading: false})
 		})
 	}
-	useEffect(loadAllPermission,[])
+	useEffect(loadAllPermission, [])
+	const optionList = useMemo(() => (usernameList.map(name => ({label: name, value: name}))), [usernameList])
 
 	return (<Card style={{marginBottom: 20}}>
-		{state.list.map(it=>(<div key={it.role_name} style={{marginBottom:20}}>
-			<div className="permission-title" style={{marginBottom:5}}>{it.role_name.toUpperCase()}</div>
-			<TagInput
-				defaultValue={it.username_list}
+		{state.list.map(it => (<div key={it.role_name} style={{marginBottom: 20}}>
+			<div className="permission-title" style={{marginBottom: 5}}>{it.role_name.toUpperCase()}</div>
+			<Select
+				style={{width: '100%', backgroundColor: 'var(--semi-color-fill-0)'}}
+				filter
+				multiple
 				size={'large'}
-				addOnBlur={true} allowDuplicates={false}
-				placeholder={t('base.please_enter')}
-				onChange={users => onUsernameChange(it.role_name,users)}
+				defaultValue={it.username_list}
+				optionList={optionList}
+				defaultActiveFirstOption
+				allowCreate={true}
+				placeholder={t('base.please_select')}
+				onChange={(users) => onUsernameChange(it.role_name, users as string[])}
 			/>
 		</div>))}
 		<Space>
-			<Button loading={state.loading} onClick={saveRoles} theme={'solid'}>{state.loading ? 'Loading' :t('base.save')}</Button>
+			<Button
+				loading={state.loading} onClick={saveRoles}
+				theme={'solid'}>{state.loading ? 'Loading' : t('base.save')}</Button>
 			{/*<div>{state.message||''}</div>*/}
 		</Space>
 	</Card>)
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index b4a9659..096c39d 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -18,8 +18,11 @@ declare const AppConfig: {
     SSO_AUTH_CLIENT_KEY: string;
     // 登录凭证 token key
     AUTH_TOKEN_KEY: string;
+    ldapApiUrl:string;
+    ldapApiKey: string;
 };
 declare const AppMode: 'test' | 'production' | 'development';
+declare const AppMode: 'test' | 'production' | 'development';
 
 declare type BasicComponentProps = {
     children?: React.ReactNode;
diff --git a/tsconfig.node.json b/tsconfig.node.json
index c7a071e..585c97e 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -8,6 +8,7 @@
     "strict": true
   },
   "include": [
-    "vite.config.ts"
+    "config.ts",
+    "vite.config.ts",
   ]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 3c7d82b..85c6c49 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,14 @@
 import {defineConfig} from 'vite'
 import react from '@vitejs/plugin-react'
 import {resolve} from "path";
+import {AppConfig} from './config'
 
 // https://vitejs.dev/config/
 export default defineConfig(({mode}) => {
-
+    let configs = AppConfig['default'];
+    if(AppConfig[mode]){
+        configs = {...configs,...AppConfig[mode]}
+    }
     return {
         plugins: [react()],
         base: mode == 'for-wm' ? './' : '/',
@@ -16,6 +20,7 @@ export default defineConfig(({mode}) => {
                 SSO_AUTH_URL: process.env.SSO_AUTH_URL || 'https://portal.chuhai.edu.hk',
                 SSO_AUTH_CLIENT_KEY: process.env.AUTH_CLIENT_KEY || 'payment',
                 AUTH_TOKEN_KEY: process.env.AUTH_TOKEN_KEY || 'payment-auth-token',
+                ...configs
             }),
             AppMode: JSON.stringify(mode)
         },