diff --git a/apps/src/views/app-system/components/emoji-resource-panel.vue b/apps/src/views/app-system/components/emoji-resource-panel.vue
index 13e5451..ff34bf3 100644
--- a/apps/src/views/app-system/components/emoji-resource-panel.vue
+++ b/apps/src/views/app-system/components/emoji-resource-panel.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 
 import { useAccessStore } from '@vben/stores';
 
@@ -35,7 +35,6 @@ import {
   Modal,
   Pagination,
   Select,
-  SelectOption,
   Switch,
   Table,
   message,
@@ -56,6 +55,24 @@ const coverInputRef = ref<HTMLInputElement>();
 const sourceInputRef = ref<HTMLInputElement>();
 
 const sysOriginOptions = getAllowedSysOrigins(accessStore.accessCodes || []);
+const groupOptions = computed(() =>
+  groupList.value.map((item) => ({
+    label: item.groupName,
+    value: item.id,
+  })),
+);
+const emojiTypeOptions = EMOJI_TYPE_OPTIONS.map((item) => ({
+  label: item.name,
+  value: item.value,
+}));
+const emojiSourceTypeOptions = EMOJI_SOURCE_TYPE_OPTIONS.map((item) => ({
+  label: item.name,
+  value: item.value,
+}));
+const shelfStatusOptions = PRODUCT_SHOWCASE_OPTIONS.map((item) => ({
+  label: item.name,
+  value: item.value as any,
+}));
 
 const query = reactive<Record<string, any>>({
   cursor: 1,
@@ -289,56 +306,32 @@ loadData(true);
         <Select
           v-model:value="query.groupId"
           :loading="groupLoading"
+          :options="groupOptions"
           allow-clear
-          option-label-prop="label"
           placeholder="分组"
           style="width: 160px"
           @change="loadData(true)"
-        >
-          <SelectOption
-            v-for="item in groupList"
-            :key="item.id"
-            :value="item.id"
-           :label="`${item.groupName}`">
-            {{ item.groupName }}
-          </SelectOption>
-        </Select>
+        />
       </InlineFilterField>
       <InlineFilterField label="类型">
         <Select
           v-model:value="query.type"
+          :options="emojiTypeOptions"
           allow-clear
-          option-label-prop="label"
           placeholder="类型"
           style="width: 140px"
           @change="loadData(true)"
-        >
-          <SelectOption
-            v-for="item in EMOJI_TYPE_OPTIONS"
-            :key="item.value"
-            :value="item.value"
-           :label="`${item.name}`">
-            {{ item.name }}
-          </SelectOption>
-        </Select>
+        />
       </InlineFilterField>
       <InlineFilterField label="状态">
         <Select
           v-model:value="query.shelfStatus"
+          :options="shelfStatusOptions"
           allow-clear
-          option-label-prop="label"
           placeholder="状态"
           style="width: 140px"
           @change="loadData(true)"
-        >
-          <SelectOption
-            v-for="item in PRODUCT_SHOWCASE_OPTIONS"
-            :key="String(item.value)"
-            :value="item.value"
-             :label="`${item.name}`">
-              {{ item.name }}
-            </SelectOption>
-          </Select>
+        />
       </InlineFilterField>
       <Button :loading="loading" type="primary" @click="loadData(true)">
         搜索
@@ -417,32 +410,21 @@ loadData(true);
       <div class="form-grid">
         <div class="form-item">
           <label class="form-label">分组</label>
-          <Select option-label-prop="label"
+          <Select
             v-model:value="form.groupId"
             :loading="groupLoading"
+            :options="groupOptions"
             placeholder="请选择分组"
-          >
-            <SelectOption
-              v-for="item in groupList"
-              :key="item.id"
-              :value="item.id"
-             :label="`${item.groupName}`">
-              {{ item.groupName }}
-            </SelectOption>
-          </Select>
+          />
         </div>
 
         <div class="form-item">
           <label class="form-label">资源类型</label>
-          <Select option-label-prop="label" v-model:value="form.sourceType" placeholder="资源类型">
-            <SelectOption
-              v-for="item in EMOJI_SOURCE_TYPE_OPTIONS"
-              :key="item.value"
-              :value="item.value"
-             :label="`${item.name}`">
-              {{ item.name }}
-            </SelectOption>
-          </Select>
+          <Select
+            v-model:value="form.sourceType"
+            :options="emojiSourceTypeOptions"
+            placeholder="资源类型"
+          />
         </div>
 
         <div class="form-item">
@@ -492,28 +474,20 @@ loadData(true);
 
         <div class="form-item">
           <label class="form-label">类型</label>
-          <Select option-label-prop="label" v-model:value="form.type" placeholder="类型">
-            <SelectOption
-              v-for="item in EMOJI_TYPE_OPTIONS"
-              :key="item.value"
-              :value="item.value"
-             :label="`${item.name}`">
-              {{ item.name }}
-            </SelectOption>
-          </Select>
+          <Select
+            v-model:value="form.type"
+            :options="emojiTypeOptions"
+            placeholder="类型"
+          />
         </div>
 
         <div class="form-item">
           <label class="form-label">上架</label>
-          <Select option-label-prop="label" v-model:value="form.shelfStatus" placeholder="上架">
-            <SelectOption
-              v-for="item in PRODUCT_SHOWCASE_OPTIONS"
-              :key="String(item.value)"
-              :value="item.value"
-             :label="`${item.name}`">
-              {{ item.name }}
-            </SelectOption>
-          </Select>
+          <Select
+            v-model:value="form.shelfStatus"
+            :options="shelfStatusOptions"
+            placeholder="上架"
+          />
         </div>
 
         <div class="form-item">