diff --git a/apps/src/views/system/components/user-edit-drawer.vue b/apps/src/views/system/components/user-edit-drawer.vue
index ce8c4fe..4561aa3 100644
--- a/apps/src/views/system/components/user-edit-drawer.vue
+++ b/apps/src/views/system/components/user-edit-drawer.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { reactive, ref, watch } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 
 import type { LegacyUser } from '#/api/legacy/system';
 import { addUser, getRoles, updateUser } from '#/api/legacy/system';
@@ -11,7 +11,6 @@ import {
   FormItem,
   Input,
   Select,
-  SelectOption,
   Space,
   message,
 } from 'antdv-next';
@@ -29,6 +28,12 @@ const emit = defineEmits<{
 const loading = ref(false);
 const roleLoading = ref(false);
 const roles = ref<Array<Record<string, any>>>([]);
+const roleOptions = computed(() =>
+  roles.value.map((item) => ({
+    label: item.roleName,
+    value: item.id,
+  })),
+);
 
 const form = reactive<Record<string, any>>({
   email: '',
@@ -175,21 +180,14 @@ async function handleSubmit() {
         />
       </FormItem>
       <FormItem label="角色">
-        <Select option-label-prop="children"
+        <Select
           v-model:value="form.roleIds"
           :disabled="loading"
           :loading="roleLoading"
           mode="multiple"
+          :options="roleOptions"
           placeholder="请选择角色"
-        >
-          <SelectOption
-            v-for="item in roles"
-            :key="item.id"
-            :value="item.id"
-          >
-            {{ item.roleName }}
-          </SelectOption>
-        </Select>
+        />
       </FormItem>
     </Form>