From 03274d9ee5a8fea639b6242f49fa5e0094970c02 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:04:25 +0800
Subject: [PATCH] feat: Update function setting style

---
 .../locales/lang/zh-CN/views/function-lib.ts  |  2 +-
 .../lang/zh-Hant/views/function-lib.ts        |  2 +-
 ui/src/utils/application.ts                   |  2 +-
 .../component/ParamSettingDialog.vue          | 49 +++++-----
 .../component/EditAvatarDialog.vue            |  2 +-
 .../component/FunctionFormDrawer.vue          | 91 ++++++++++---------
 .../component/PermissionDialog.vue            | 28 +++---
 ui/src/views/function-lib/index.vue           | 66 +++++++-------
 8 files changed, 123 insertions(+), 119 deletions(-)

diff --git a/ui/src/locales/lang/zh-CN/views/function-lib.ts b/ui/src/locales/lang/zh-CN/views/function-lib.ts
index ac6c00dce..b0767b644 100644
--- a/ui/src/locales/lang/zh-CN/views/function-lib.ts
+++ b/ui/src/locales/lang/zh-CN/views/function-lib.ts
@@ -30,7 +30,7 @@ export default {
     },
     form: {
       functionName: {
-        label: '函数名称',
+        label: '名称',
         placeholder: '请输入函数名称',
         requiredMessage: '请输入函数名称'
       },
diff --git a/ui/src/locales/lang/zh-Hant/views/function-lib.ts b/ui/src/locales/lang/zh-Hant/views/function-lib.ts
index 6b4a9b339..789cbf0ec 100644
--- a/ui/src/locales/lang/zh-Hant/views/function-lib.ts
+++ b/ui/src/locales/lang/zh-Hant/views/function-lib.ts
@@ -30,7 +30,7 @@ export default {
     },
     form: {
       functionName: {
-        label: '函數名稱',
+        label: '名稱',
         placeholder: '請輸入函數名稱',
         requiredMessage: '請輸入函數名稱'
       },
diff --git a/ui/src/utils/application.ts b/ui/src/utils/application.ts
index 4666da70b..fd7d0a201 100644
--- a/ui/src/utils/application.ts
+++ b/ui/src/utils/application.ts
@@ -1,7 +1,7 @@
 export const defaultIcon = '/ui/favicon.ico'
 
 // 是否显示字母 / icon
-export function isAppIcon(url: string | undefined) {
+export function isAppIcon(url: String | undefined) {
   return url === defaultIcon ? '' : url
 }
 
diff --git a/ui/src/views/application/component/ParamSettingDialog.vue b/ui/src/views/application/component/ParamSettingDialog.vue
index 69828a107..2d58be749 100644
--- a/ui/src/views/application/component/ParamSettingDialog.vue
+++ b/ui/src/views/application/component/ParamSettingDialog.vue
@@ -131,32 +131,29 @@
                   v-model="form.dataset_setting.no_references_setting.status"
                   class="radio-block"
                 >
-                  <div>
-                    <el-radio value="ai_questioning">
-                      <p>
-                        {{ $t('views.application.applicationForm.dialog.continueQuestioning') }}
-                      </p>
-                    </el-radio>
-                  </div>
-                  <div>
-                    <el-radio value="designated_answer">
-                      <p>{{ $t('views.application.applicationForm.dialog.provideAnswer') }}</p>
-                      <el-form-item
-                        v-if="
-                          form.dataset_setting.no_references_setting.status === 'designated_answer'
-                        "
-                        prop="designated_answer"
-                      >
-                        <el-input
-                          v-model="noReferencesform.designated_answer"
-                          :rows="2"
-                          type="textarea"
-                          maxlength="2048"
-                          :placeholder="defaultValue['designated_answer']"
-                        />
-                      </el-form-item>
-                    </el-radio>
-                  </div>
+                  <el-radio value="ai_questioning">
+                    <p>
+                      {{ $t('views.application.applicationForm.dialog.continueQuestioning') }}
+                    </p>
+                  </el-radio>
+
+                  <el-radio value="designated_answer">
+                    <p>{{ $t('views.application.applicationForm.dialog.provideAnswer') }}</p>
+                    <el-form-item
+                      v-if="
+                        form.dataset_setting.no_references_setting.status === 'designated_answer'
+                      "
+                      prop="designated_answer"
+                    >
+                      <el-input
+                        v-model="noReferencesform.designated_answer"
+                        :rows="2"
+                        type="textarea"
+                        maxlength="2048"
+                        :placeholder="defaultValue['designated_answer']"
+                      />
+                    </el-form-item>
+                  </el-radio>
                 </el-radio-group>
               </el-form>
             </el-form-item>
diff --git a/ui/src/views/function-lib/component/EditAvatarDialog.vue b/ui/src/views/function-lib/component/EditAvatarDialog.vue
index 21c96c4cd..8a1c4bec0 100644
--- a/ui/src/views/function-lib/component/EditAvatarDialog.vue
+++ b/ui/src/views/function-lib/component/EditAvatarDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-      :title="$t('views.applicationOverview.appInfo.EditAvatarDialog.title')"
+      :title="`Logo ${$t('common.setting')}`"
       v-model="dialogVisible"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
diff --git a/ui/src/views/function-lib/component/FunctionFormDrawer.vue b/ui/src/views/function-lib/component/FunctionFormDrawer.vue
index 0e075608a..367348278 100644
--- a/ui/src/views/function-lib/component/FunctionFormDrawer.vue
+++ b/ui/src/views/function-lib/component/FunctionFormDrawer.vue
@@ -20,47 +20,54 @@
           :label="$t('views.functionLib.functionForm.form.functionName.label')"
           prop="name"
         >
-          <div v-if="form.id"
-            class="edit-avatar mr-12"
-            @mouseenter="showEditIcon = true"
-            @mouseleave="showEditIcon = false"
-          >
-            <AppAvatar
-              v-if="isAppIcon(form.icon as string)"
-              :id="form.id"
-              shape="square"
-              :size="32"
-              style="background: none"
+          <div class="flex w-full">
+            <div
+              v-if="form.id"
+              class="edit-avatar mr-12"
+              @mouseenter="showEditIcon = true"
+              @mouseleave="showEditIcon = false"
             >
-              <img :src="form.icon as string" alt="" />
+              <AppAvatar
+                v-if="isAppIcon(form.icon)"
+                :id="form.id"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="String(form.icon)" alt="" />
+              </AppAvatar>
+              <AppAvatar
+                v-else-if="form.name"
+                :id="form.id"
+                :name="form.name"
+                pinyinColor
+                shape="square"
+                :size="32"
+              />
+              <AppAvatar
+                v-if="showEditIcon"
+                :id="form.id"
+                shape="square"
+                class="edit-mask"
+                :size="32"
+                @click="openEditAvatar"
+              >
+                <el-icon><EditPen /></el-icon>
+              </AppAvatar>
+            </div>
+            <AppAvatar shape="square" style="background: #34c724" class="mr-12" v-else>
+              <img src="@/assets/icon_function_outlined.svg" style="width: 75%" alt="" />
             </AppAvatar>
-            <AppAvatar
-              v-else-if="form.name"
-              :id="form.id"
-              :name="form.name"
-              pinyinColor
-              shape="square"
-              :size="32"
+            <el-input
+              v-model="form.name"
+              :placeholder="$t('views.functionLib.functionForm.form.functionName.placeholder')"
+              maxlength="64"
+              show-word-limit
+              @blur="form.name = form.name?.trim()"
             />
-            <AppAvatar
-              v-if="showEditIcon"
-              :id="form.id"
-              shape="square"
-              class="edit-mask"
-              :size="32"
-              @click="openEditAvatar"
-            >
-              <el-icon><EditPen /></el-icon>
-            </AppAvatar>
           </div>
-          <el-input
-            v-model="form.name"
-            :placeholder="$t('views.functionLib.functionForm.form.functionName.placeholder')"
-            maxlength="64"
-            show-word-limit
-            @blur="form.name = form.name?.trim()"
-          />
         </el-form-item>
+
         <el-form-item :label="$t('views.functionLib.functionForm.form.functionDescription.label')">
           <el-input
             v-model="form.desc"
@@ -72,7 +79,7 @@
             @blur="form.desc = form.desc?.trim()"
           />
         </el-form-item>
-<!--
+        <!--
         <el-form-item prop="permission_type">
           <template #label>
             <span>{{ $t('views.functionLib.functionForm.form.permission_type.label') }}</span>
@@ -110,7 +117,7 @@
         </el-button>
       </div>
       <el-table :data="form.init_field_list" class="mb-16">
-        <el-table-column prop="field" :label="$t('dynamicsForm.paramForm.field.label')" >
+        <el-table-column prop="field" :label="$t('dynamicsForm.paramForm.field.label')">
           <template #default="{ row }">
             <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
           </template>
@@ -266,7 +273,7 @@
 
     <FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
     <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
-    <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList"/>
+    <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList" />
     <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshFunctionLib" />
   </el-drawer>
 </template>
@@ -283,8 +290,8 @@ import { cloneDeep } from 'lodash'
 import { PermissionType, PermissionDesc } from '@/enums/model'
 import { t } from '@/locales'
 import UserFieldFormDialog from '@/workflow/nodes/base-node/component/UserFieldFormDialog.vue'
-import {isAppIcon} from "@/utils/application";
-import EditAvatarDialog from "./EditAvatarDialog.vue";
+import { isAppIcon } from '@/utils/application'
+import EditAvatarDialog from './EditAvatarDialog.vue'
 
 const props = defineProps({
   title: String
@@ -402,7 +409,6 @@ function refreshFieldList(data: any) {
   currentIndex.value = null
 }
 
-
 function openAddInitDialog(data?: any, index?: any) {
   if (typeof index !== 'undefined') {
     currentIndex.value = index
@@ -434,7 +440,6 @@ function openEditAvatar() {
   EditAvatarDialogRef.value.open(form.value)
 }
 
-
 const submit = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid: any) => {
diff --git a/ui/src/views/function-lib/component/PermissionDialog.vue b/ui/src/views/function-lib/component/PermissionDialog.vue
index ca9104e9a..910afc6cd 100644
--- a/ui/src/views/function-lib/component/PermissionDialog.vue
+++ b/ui/src/views/function-lib/component/PermissionDialog.vue
@@ -6,6 +6,7 @@
     :close-on-press-escape="false"
     :destroy-on-close="true"
     append-to-body
+    width="450"
   >
     <el-form
       label-position="top"
@@ -14,17 +15,20 @@
       :model="form"
       require-asterisk-position="right"
     >
-      <el-radio-group v-model="form.permission_type">
-        <el-radio value="PRIVATE">
+      <el-radio-group v-model="form.permission_type" class="radio-block">
+        <el-radio value="PRIVATE" size="large" class="mb-16">
           {{ $t('common.private') }}
-          {{ $t('views.template.templateForm.form.permissionType.privateDesc') }}
+          <el-text type="info">{{
+            $t('views.template.templateForm.form.permissionType.privateDesc')
+          }}</el-text>
         </el-radio>
-        <el-radio value="PUBLIC">
+        <el-radio value="PUBLIC" size="large">
           {{ $t('common.public') }}
-          {{ $t('views.template.templateForm.form.permissionType.publicDesc') }}
+          <el-text type="info">{{
+            $t('views.template.templateForm.form.permissionType.publicDesc')
+          }}</el-text>
         </el-radio>
       </el-radio-group>
-
     </el-form>
     <template #footer>
       <span class="dialog-footer">
@@ -44,7 +48,6 @@ import { t } from '@/locales'
 import functionLibApi from '@/api/function-lib'
 import { MsgSuccess } from '@/utils/message'
 
-
 const emit = defineEmits(['refresh'])
 
 const fieldFormRef = ref()
@@ -89,12 +92,11 @@ const submit = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid) => {
     if (valid) {
-      functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading)
-        .then((res) => {
-          MsgSuccess(t('common.editSuccess'))
-          emit('refresh')
-          dialogVisible.value = false
-        })
+      functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading).then((res) => {
+        MsgSuccess(t('common.editSuccess'))
+        emit('refresh')
+        dialogVisible.value = false
+      })
     }
   })
 }
diff --git a/ui/src/views/function-lib/index.vue b/ui/src/views/function-lib/index.vue
index d58165ebd..37a6a330c 100644
--- a/ui/src/views/function-lib/index.vue
+++ b/ui/src/views/function-lib/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="function-lib-list-container p-24" style="padding-top: 16px">
-    <el-tabs v-model="functionType" >
+    <el-tabs v-model="functionType">
       <el-tab-pane :label="$t('views.functionLib.title')" name="PUBLIC"></el-tab-pane>
       <el-tab-pane :label="$t('views.functionLib.internalTitle')" name="INTERNAL"></el-tab-pane>
     </el-tabs>
@@ -45,7 +45,15 @@
         :loading="loading"
       >
         <el-row :gutter="15">
-          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb-16" v-if="functionType === 'PUBLIC'">
+          <el-col
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="6"
+            class="mb-16"
+            v-if="functionType === 'PUBLIC'"
+          >
             <el-card shadow="hover" class="application-card-add" style="--el-card-padding: 8px">
               <div class="card-add-button flex align-center cursor p-8" @click="openCreateDialog()">
                 <AppIcon iconName="app-add-application" class="mr-8"></AppIcon>
@@ -132,13 +140,16 @@
               </div>
               <template #footer>
                 <div class="footer-content flex-between">
-                  <div><span v-if="item.template_id"> {{ $t('common.author') }}: MaxKB</span></div>
+                  <div>
+                    <span v-if="item.template_id"> {{ $t('common.author') }}: MaxKB</span>
+                  </div>
                   <div @click.stop>
                     <el-switch
                       :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
                       v-model="item.is_active"
                       @change="changeState($event, item)"
                       size="small"
+                      class="mr-4"
                     />
                     <el-dropdown trigger="click">
                       <el-button text @click.stop>
@@ -152,7 +163,7 @@
                             @click.stop="copyFunctionLib(item)"
                           >
                             <AppIcon iconName="app-copy"></AppIcon>
-                            {{$t('common.copy')}}
+                            {{ $t('common.copy') }}
                           </el-dropdown-item>
                           <el-dropdown-item
                             :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
@@ -165,7 +176,7 @@
                             :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
                             @click.stop="configPermission(item)"
                           >
-                            <AppIcon iconName="app-copy"></AppIcon>
+                            <el-icon><User /></el-icon>
                             {{ $t('views.functionLib.functionForm.form.permission_type.label') }}
                           </el-dropdown-item>
                           <el-dropdown-item
@@ -174,7 +185,7 @@
                             @click.stop="exportFunctionLib(item)"
                           >
                             <AppIcon iconName="app-export"></AppIcon>
-                            {{$t('common.export')}}
+                            {{ $t('common.export') }}
                           </el-dropdown-item>
                           <el-dropdown-item
                             :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
@@ -218,11 +229,7 @@
                 />
               </template>
               <div class="status-button">
-                <el-tag
-                  class="info-tag"
-                  v-if="item.added"
-                  style="height: 22px"
-                >
+                <el-tag class="info-tag" v-if="item.added" style="height: 22px">
                   {{ $t('views.functionLib.added') }}</el-tag
                 >
               </div>
@@ -230,11 +237,7 @@
                 <div class="footer-content flex-between">
                   <div>{{ $t('common.author') }}: MaxKB</div>
                   <div @click.stop v-if="!item.added">
-                    <el-button
-                      type="primary"
-                      link
-                      @click="addInternalFunction(item)"
-                    >
+                    <el-button type="primary" link @click="addInternalFunction(item)">
                       {{ $t('common.add') }}
                     </el-button>
                   </div>
@@ -339,26 +342,24 @@ function openCreateDialog(data?: any) {
 
 function getImageUrl(name: string) {
   if (name.startsWith('/src/assets/fx/')) {
-    return internalIcons[name]?.default;
+    return internalIcons[name]?.default
   }
   return name
 }
 
-
 function openDescDrawer(row: any) {
   const index = row.icon.replace('icon.png', 'index.vue')
   internalDescComponent.value = internalDesc[index].default
-  nextTick(()=> {
-    internalDescRef.value?.open(row);
+  nextTick(() => {
+    internalDescRef.value?.open(row)
   })
 }
 
 function addInternalFunction(data?: any) {
-  functionLibApi.addInternalFunction(data.id, changeStateloading)
-    .then((res) => {
-      MsgSuccess(t('common.submitSuccess'))
-      searchHandle()
-    })
+  functionLibApi.addInternalFunction(data.id, changeStateloading).then((res) => {
+    MsgSuccess(t('common.submitSuccess'))
+    searchHandle()
+  })
 }
 
 function searchHandle() {
@@ -433,14 +434,13 @@ function copyFunctionLib(row: any) {
 }
 
 function exportFunctionLib(row: any) {
-  functionLibApi.exportFunctionLib(row.id, row.name, loading)
-    .catch((e: any) => {
-      if (e.response.status !== 403) {
-        e.response.data.text().then((res: string) => {
-          MsgError(`${t('views.application.tip.ExportError')}:${JSON.parse(res).message}`)
-        })
-      }
-    })
+  functionLibApi.exportFunctionLib(row.id, row.name, loading).catch((e: any) => {
+    if (e.response.status !== 403) {
+      e.response.data.text().then((res: string) => {
+        MsgError(`${t('views.application.tip.ExportError')}:${JSON.parse(res).message}`)
+      })
+    }
+  })
 }
 
 function configPermission(item: any) {