From 7e166de4b140dbabf2b3b463b3db3462d7b16abc Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Thu, 6 Aug 2026 13:16:11 +0800
Subject: [PATCH] feat(web-admin): show ep pastel icons on start and designer.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/views/oa-approval/designer/index.vue  | 73 ++-----------------
 .../src/views/oa-approval/start/index.vue     | 23 +-----
 2 files changed, 7 insertions(+), 89 deletions(-)

diff --git a/web-admin/src/views/oa-approval/designer/index.vue b/web-admin/src/views/oa-approval/designer/index.vue
index 823b98ef..80bb705a 100644
--- a/web-admin/src/views/oa-approval/designer/index.vue
+++ b/web-admin/src/views/oa-approval/designer/index.vue
@@ -31,22 +31,7 @@
           <el-form label-position="top" class="oa-designer__form">
             <div class="form-grid-2">
               <el-form-item label="应用图标" class="form-col-span-2">
-                <div class="oa-designer__icon-row">
-                  <span class="oa-designer__icon-preview">
-                    <img :src="resolveOaAppIconUrl(basic.iconUrl)" alt="" />
-                  </span>
-                  <el-upload
-                    :show-file-list="false"
-                    accept="image/*"
-                    :http-request="uploadBasicIcon"
-                    :disabled="iconUploading"
-                  >
-                    <el-button class="btn-ghost" :loading="iconUploading">
-                      <el-icon><Upload /></el-icon>
-                      上传
-                    </el-button>
-                  </el-upload>
-                </div>
+                <OaAppIconPicker v-model="basic.iconUrl" />
               </el-form-item>
               <el-form-item label="应用名称">
                 <el-input v-model="basic.appName" maxlength="50" />
@@ -114,20 +99,19 @@
 <script setup lang="ts">
   import { computed, nextTick, onMounted, reactive, ref } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  import type { UploadRequestOptions } from 'element-plus'
+  import { ElMessageBox } from 'element-plus'
   import { ArrowLeft, Document, Upload } from '@element-plus/icons-vue'
-  import { fetchUploadAttachment } from '@/api/business'
   import { fetchOaAppDraft, fetchPublishOaApp, fetchSaveOaAppDraft } from '@/api/oaApproval'
   import FlowDesigner from '@/components/oa-approval/flow-tree/FlowDesigner.vue'
   import { createDefaultFlow, ensureFlowRoot } from '@/components/oa-approval/flow-tree/types'
+  import OaAppIconPicker from '@/components/oa-approval/OaAppIconPicker.vue'
   import OaFormDesignerEmbed from '@/components/oa-approval/OaFormDesignerEmbed.vue'
   import {
     collectFormConditionReferencedFields,
     listConditionCandidates,
     normalizeSchemaConditionRequired
   } from '@/components/oa-approval/oa-condition-fields'
-  import { resolveOaAppIconUrl } from '@/utils/oa-app-icons'
+  import { pickRandomOaAppIconUrl } from '@/utils/oa-app-icons'
 
   defineOptions({ name: 'OaApprovalDesigner' })
 
@@ -157,7 +141,6 @@
     groupId: '',
     iconUrl: ''
   })
-  const iconUploading = ref(false)
 
   const advanced = reactive({
     supervisorFallbackToDeptLeader: true,
@@ -198,31 +181,6 @@
     return normalized
   }
 
-  async function uploadBasicIcon(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
-      }
-      basic.iconUrl = url
-      options.onSuccess?.(res)
-    } catch (e) {
-      options.onError?.(e as any)
-    } finally {
-      iconUploading.value = false
-    }
-  }
-
   async function loadDraft() {
     if (!appId) return
     loading.value = true
@@ -235,6 +193,7 @@
       basic.status = b.status || '1'
       basic.groupId = b.groupId || ''
       basic.iconUrl = b.iconUrl || ''
+      if (!basic.iconUrl) basic.iconUrl = pickRandomOaAppIconUrl()
       const a = data?.advancedSettingsJson || {}
       advanced.supervisorFallbackToDeptLeader = a.supervisorFallbackToDeptLeader !== false
       advanced.allowWithdrawRunning = a.allowWithdrawRunning !== false
@@ -435,28 +394,6 @@
     max-width: 480px;
   }
 
-  .oa-designer__icon-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    align-items: center;
-  }
-
-  .oa-designer__icon-preview {
-    display: block;
-    width: 80px;
-    height: 80px;
-    overflow: hidden;
-    border-radius: 16px;
-
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
   .oa-designer__form-step {
     width: 100%;
   }
diff --git a/web-admin/src/views/oa-approval/start/index.vue b/web-admin/src/views/oa-approval/start/index.vue
index 41161a6d..f6ae6640 100644
--- a/web-admin/src/views/oa-approval/start/index.vue
+++ b/web-admin/src/views/oa-approval/start/index.vue
@@ -67,9 +67,7 @@
               @keydown.enter="onPick(row)"
             >
               <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__desc">{{ row.description || '点击发起审批' }}</span>
@@ -157,9 +155,9 @@
     fetchStartOaInstance,
     type OaFlowPreviewStep
   } from '@/api/oaApproval'
+  import OaAppIcon from '@/components/oa-approval/OaAppIcon.vue'
   import OaFlowPreview from '@/components/oa-approval/OaFlowPreview.vue'
   import { MAX_ADMIN_LIST_PAGE_SIZE } from '@/utils/fetch-paged-list'
-  import { resolveOaAppIconUrl } from '@/utils/oa-app-icons'
   import {
     OA_FC_DEFAULT_GUTTER,
     ensureOaUploadRuleProps
@@ -821,23 +819,6 @@
     min-width: 0;
   }
 
-  .oa-app-card__icon {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: 40px;
-    height: 40px;
-    overflow: hidden;
-    border-radius: 10px;
-
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
   .oa-app-card__body {
     flex: 1;
     min-width: 0;