diff --git a/web-admin/src/views/oa-approval/apps/index.vue b/web-admin/src/views/oa-approval/apps/index.vue
index 29663600..cea781b6 100644
--- a/web-admin/src/views/oa-approval/apps/index.vue
+++ b/web-admin/src/views/oa-approval/apps/index.vue
@@ -68,9 +68,7 @@
           <div class="oa-apps__card-row">
             <div v-for="row in sec.apps" :key="row.id" class="oa-app-card">
               <div class="oa-app-card__main">
-                <span class="oa-app-card__icon">
-                  <img :src="resolveOaAppIconUrl(row.iconUrl)" alt="" />
-                </span>
+                <OaAppIcon :icon-url="row.iconUrl" size="sm" />
                 <span class="oa-app-card__body">
                   <span class="oa-app-card__name">{{ row.appName }}</span>
                   <span class="oa-app-card__tags">
@@ -155,29 +153,7 @@
         >
           <div class="form-grid-2">
             <el-form-item label="应用图标" class="form-col-span-2">
-              <div class="oa-icon-picker">
-                <span class="oa-icon-picker__preview">
-                  <img :src="resolveOaAppIconUrl(formData.iconUrl)" alt="" />
-                </span>
-                <div class="oa-icon-picker__actions">
-                  <el-upload
-                    :show-file-list="false"
-                    accept="image/*"
-                    :http-request="uploadIcon"
-                    :disabled="iconUploading"
-                  >
-                    <el-button class="btn-ghost" :loading="iconUploading">
-                      <el-icon><Upload /></el-icon>
-                      上传图片
-                    </el-button>
-                  </el-upload>
-                  <el-button class="btn-ghost" @click="randomizeIcon">
-                    <el-icon><Refresh /></el-icon>
-                    换底色
-                  </el-button>
-                </div>
-                <p class="oa-icon-picker__tip">中间图标固定，底色打开时随机；可换底色或上传自定义图片</p>
-              </div>
+              <OaAppIconPicker v-model="formData.iconUrl" />
             </el-form-item>
             <el-form-item label="应用名称" prop="appName">
               <el-input v-model="formData.appName" placeholder="不超过50字" maxlength="50" />
@@ -266,7 +242,6 @@
   import { computed, onActivated, onMounted, reactive, ref } from 'vue'
   import { useRouter } from 'vue-router'
   import { ElMessage, ElMessageBox } from 'element-plus'
-  import type { UploadRequestOptions } from 'element-plus'
   import {
     Plus,
     Close,
@@ -278,10 +253,10 @@
     Upload,
     Folder,
     Search,
-    Refresh,
     CopyDocument
   } from '@element-plus/icons-vue'
-  import { fetchUploadAttachment } from '@/api/business'
+  import OaAppIcon from '@/components/oa-approval/OaAppIcon.vue'
+  import OaAppIconPicker from '@/components/oa-approval/OaAppIconPicker.vue'
   import {
     fetchCopyOaApp,
     fetchCreateOaApp,
@@ -293,7 +268,7 @@
     fetchPublishOaApp,
     fetchUpdateOaApp
   } from '@/api/oaApproval'
-  import { pickRandomOaAppIconUrl, resolveOaAppIconUrl } from '@/utils/oa-app-icons'
+  import { pickRandomOaAppIconUrl } from '@/utils/oa-app-icons'
   import { watchDebounced } from '@vueuse/core'
 
   defineOptions({ name: 'OaApprovalApps' })
@@ -310,7 +285,6 @@
   const isEdit = ref(false)
   const editingId = ref<string | null>(null)
   const submitLoading = ref(false)
-  const iconUploading = ref(false)
   const formRef = ref()
   const formData = reactive({
     appName: '',
@@ -416,35 +390,6 @@
     formRef.value?.clearValidate?.()
   }
 
-  function randomizeIcon() {
-    formData.iconUrl = pickRandomOaAppIconUrl()
-  }
-
-  async function uploadIcon(options: UploadRequestOptions) {
-    const file = options.file as File
-    if (!file?.type?.startsWith('image/')) {
-      ElMessage.warning('请上传图片文件')
-      return
-    }
-    iconUploading.value = true
-    try {
-      const fd = new FormData()
-      fd.append('file', file)
-      const res: any = await fetchUploadAttachment(fd)
-      const url = res?.fileUrl || res?.data?.fileUrl
-      if (!url) {
-        ElMessage.error('上传失败，未返回地址')
-        return
-      }
-      formData.iconUrl = url
-      options.onSuccess?.(res)
-    } catch (e) {
-      options.onError?.(e as any)
-    } finally {
-      iconUploading.value = false
-    }
-  }
-
   async function handleSubmit() {
     await formRef.value?.validate?.()
     submitLoading.value = true
@@ -758,13 +703,6 @@
     height: 40px;
     overflow: hidden;
     border-radius: 10px;
-
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
   }
 
   .oa-app-card__icon--add {
@@ -821,42 +759,6 @@
     }
   }
 
-  .oa-icon-picker {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    align-items: center;
-  }
-
-  .oa-icon-picker__preview {
-    display: block;
-    width: 80px;
-    height: 80px;
-    overflow: hidden;
-    border-radius: 16px;
-    box-shadow: 0 1px 3px rgb(15 23 42 / 8%);
-
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  .oa-icon-picker__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .oa-icon-picker__tip {
-    flex-basis: 100%;
-    margin: 0;
-    color: var(--mint-text-muted, #94a3b8);
-    font-size: 12px;
-  }
-
   .oa-app-dialog-form {
     :deep(.el-form-item) {
       margin-bottom: 0;