feat: 应用对话显示应用图标

feat: 应用对话显示应用图标

ui/src/views/application-workflow/index.vue

@@ -58,9 +58,29 @@
       >
         <div class="workflow-debug-header" :class="!isDefaultTheme ? 'custom-header' : ''">
           <div class="flex-between">
-            <h4 class="ml-24">
+            <div class="flex align-center">
+              <div class="mr-12 ml-24">
+                <AppAvatar
+                  v-if="isAppIcon(detail?.icon)"
+                  shape="square"
+                  :size="32"
+                  style="background: none"
+                >
+                  <img :src="detail?.icon" alt="" />
+                </AppAvatar>
+                <AppAvatar
+                  v-else-if="detail?.name"
+                  :name="detail?.name"
+                  pinyinColor
+                  shape="square"
+                  :size="32"
+                />
+              </div>
+
+              <h4>
                 {{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
               </h4>
+            </div>
             <div class="mr-16">
               <el-button link @click="enlarge = !enlarge">
                 <AppIcon
@@ -89,6 +109,7 @@ import Workflow from '@/workflow/index.vue'
 import { menuNodes } from '@/workflow/common/data'
 import { iconComponent } from '@/workflow/icons/utils'
 import applicationApi from '@/api/application'
+import { isAppIcon } from '@/utils/application'
 import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
 import { datetimeFormat } from '@/utils/time'
 import useStore from '@/stores'

ui/src/views/application/ApplicationSetting.vue

@@ -273,11 +273,31 @@
           {{ $t('views.application.applicationForm.form.apptest') }}
         </h4>
         <div class="dialog-bg">
-          <h4 class="p-24">
+          <div class="flex align-center p-24">
+            <div class="mr-12">
+              <AppAvatar
+                v-if="isAppIcon(applicationForm?.icon)"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="applicationForm?.icon" alt="" />
+              </AppAvatar>
+              <AppAvatar
+                v-else-if="applicationForm?.name"
+                :name="applicationForm?.name"
+                pinyinColor
+                shape="square"
+                :size="32"
+              />
+            </div>
+
+            <h4>
               {{
                 applicationForm?.name || $t('views.application.applicationForm.form.appName.label')
               }}
             </h4>
+          </div>
           <div class="scrollbar-height">
             <AiChat :data="applicationForm"></AiChat>
           </div>
@@ -312,6 +332,7 @@ import AddDatasetDialog from './component/AddDatasetDialog.vue'
 import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
 import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
 import applicationApi from '@/api/application'
+import { isAppIcon } from '@/utils/application'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ApplicationFormType } from '@/api/type/application'
 import type { Provider } from '@/api/type/model'

ui/src/views/chat/base/index.vue

@@ -1,8 +1,26 @@
 <template>
   <div class="chat layout-bg" v-loading="loading">
     <div class="chat__header" :class="!isDefaultTheme ? 'custom-header' : ''">
-      <div class="chat-width">
+      <div class="chat-width flex align-center">
-        <h2 class="ml-24">{{ applicationDetail?.name }}</h2>
+        <div class="mr-12 ml-24">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h2>{{ applicationDetail?.name }}</h2>
       </div>
     </div>
     <div class="chat__main chat-width">
@@ -18,6 +36,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { isAppIcon } from '@/utils/application'
 import useStore from '@/stores'
 const route = useRoute()
 const {

ui/src/views/chat/embed/index.vue

@@ -1,8 +1,26 @@
 <template>
   <div class="chat-embed layout-bg" v-loading="loading">
     <div class="chat-embed__header" :class="!isDefaultTheme ? 'custom-header' : ''">
-      <div class="chat-width">
+      <div class="chat-width flex align-center">
-        <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
+        <div class="mr-12 ml-24">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h4>{{ applicationDetail?.name }}</h4>
       </div>
     </div>
     <div class="chat-embed__main">
@@ -81,6 +99,7 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { isAppIcon } from '@/utils/application'
 import useStore from '@/stores'
 const route = useRoute()
 const {

ui/src/views/chat/pc/index.vue

@@ -1,7 +1,27 @@
 <template>
   <div class="chat-pc layout-bg" :class="classObj" v-loading="loading">
     <div class="chat-pc__header" :class="!isDefaultTheme ? 'custom-header' : ''">
-      <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
+      <div class="flex align-center">
+        <div class="mr-12 ml-24">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h4>{{ applicationDetail?.name }}</h4>
+      </div>
     </div>
     <div class="flex">
       <div class="chat-pc__left border-r">
@@ -108,6 +128,7 @@ import { reactive, ref, onMounted, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { marked } from 'marked'
 import { saveAs } from 'file-saver'
+import { isAppIcon } from '@/utils/application'
 import useStore from '@/stores'
 
 import useResize from '@/layout/hooks/useResize'
@@ -207,7 +228,6 @@ function getAppProfile() {
       if (res.data?.show_history) {
         getChatLog(applicationDetail.value.id)
       }
-
     })
     .catch(() => {
       applicationAvailable.value = false