diff --git a/bizyui/js/menus.js b/bizyui/js/menus.js
index da19b91b..d7780c74 100644
--- a/bizyui/js/menus.js
+++ b/bizyui/js/menus.js
@@ -7,7 +7,7 @@ class FloatingButton {
         this.show_cases = show_cases
         this.button = $el("div.bizyair-comfy-floating-button", {
             parent: document.body,
-            style: { top: app.menu.element.style.display === 'none' ? '': '60px' },
+            style: { top: app.menu.element.style.display === 'none' ? '': '100px' },
             onmousedown: (e) => this.startDrag(e),
             id: 'bizyair-menu-item',
         }, [
diff --git a/src/components/community/Sidebar.vue b/src/components/community/Sidebar.vue
index f199c7ce..470ee891 100644
--- a/src/components/community/Sidebar.vue
+++ b/src/components/community/Sidebar.vue
@@ -48,7 +48,7 @@
 </script>
 
 <template>
-  <div class="w-64 bg-[#353535] h-full fixed left-0 top-0 border-r border-[#6E6E6E80]">
+  <div class="w-64 bg-[#353535] h-full absolute left-0 top-0 border-r border-[#6E6E6E80]">
     <div class="flex flex-col p-2 pl-8 pr-2 h-full">
       <div class="flex-1">
         <h3 class="pt-2 pb-4 text-[#F9FAFB] font-['Inter'] text-[14px] font-medium leading-[14px]">
diff --git a/src/components/community/detail/Index.vue b/src/components/community/detail/Index.vue
index 3c2d5d96..301dc975 100644
--- a/src/components/community/detail/Index.vue
+++ b/src/components/community/detail/Index.vue
@@ -1170,15 +1170,15 @@
               </div>
             </div>
 
-            <div className="flex w-full">
+            <div className="flex w-full overflow-auto">
               <div className="w-[100px] bg-[#4E4E4E80] p-4  border-b border-[rgba(78,78,78,0.50)]">
                 {{ t('community.detail.hash') }}
               </div>
               <div
-                className="flex-1 p-4 border-b border-[rgba(78,78,78,0.50)] flex items-center gap-2"
+                className="flex-1 p-4 flex items-center overflow-auto border-b border-[rgba(78,78,78,0.50)] gap-2"
               >
-                <span>
-                  {{ currentVersion?.sign ? sliceString(currentVersion?.sign, 15) : '' }}
+                <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+                  {{ currentVersion?.sign }}
                 </span>
                 <vTooltips :tips="t('community.detail.copy')">
                   <svg
@@ -1338,9 +1338,9 @@
             <div
               class="flex px-[8px] py-4 items-center self-stretch text-[#F9FAFB] font-inter text-xs font-medium leading-5"
             >
-              {{ currentVersion?.file_name ? sliceString(currentVersion?.file_name, 20) : '' }} ({{
-                formatSize(currentVersion?.file_size)
-              }})
+              <span class="text-ellipsis overflow-hidden whitespace-nowrap"
+                >{{ currentVersion?.file_name }} ({{ formatSize(currentVersion?.file_size) }})</span
+              >
               <span
                 v-if="model?.type === 'Workflow'"
                 class="cursor-pointer ml-2 hover:opacity-80"
diff --git a/src/components/model-select/detail/Index.vue b/src/components/model-select/detail/Index.vue
index 7f6a75ea..a09ba7ab 100644
--- a/src/components/model-select/detail/Index.vue
+++ b/src/components/model-select/detail/Index.vue
@@ -954,10 +954,10 @@
                 {{ t('community.detail.hash') }}
               </div>
               <div
-                className="flex-1 p-4 border-b border-[rgba(78,78,78,0.50)] flex items-center gap-2"
+                className="flex-1 p-4 border-b border-[rgba(78,78,78,0.50)] flex items-center gap-2 w-full"
               >
-                <span>
-                  {{ currentVersion?.sign ? sliceString(currentVersion?.sign, 15) : '' }}
+                <span class="text-ellipsis overflow-hidden whitespace-nowrap">
+                  {{ currentVersion?.sign }}
                 </span>
                 <vTooltips :tips="currentVersion?.sign ? t('community.detail.copy') : ''">
                   <svg
@@ -1115,11 +1115,9 @@
               {{ t('community.detail.file') }}
             </div>
             <div
-              class="flex px-[8px] py-4 items-center self-stretch text-[#F9FAFB] font-inter text-xs font-medium leading-5"
+              class="px-[8px] py-4 items-center self-stretch text-[#F9FAFB] font-inter text-xs font-medium leading-5 w-full text-ellipsis overflow-hidden whitespace-nowrap"
             >
-              {{ currentVersion?.file_name ? sliceString(currentVersion?.file_name, 20) : '' }} ({{
-                formatSize(currentVersion?.file_size)
-              }})
+              {{ currentVersion?.file_name }} ({{ formatSize(currentVersion?.file_size) }})
             </div>
           </div>
         </div>
diff --git a/src/components/modules/vDefaultPic.vue b/src/components/modules/vDefaultPic.vue
index 3cf14c27..6689c732 100644
--- a/src/components/modules/vDefaultPic.vue
+++ b/src/components/modules/vDefaultPic.vue
@@ -6,7 +6,7 @@
 <template>
   <div :class="`w-full h-full relative overflow-hidden`">
     <img
-      class="w-14 h-12 absolute left-1/2 top-1/2 -translate-x-1/2 -mt-24"
+      class="w-14 h-12 absolute left-1/2 top-1/2 -ml-7 -mt-24"
       src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAACdCAYAAAAZm4LxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDQxRjFGRUNDNjc3MTFFRkFDQzVBOTMyREU3M0E3Q0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDQxRjFGRURDNjc3MTFFRkFDQzVBOTMyREU3M0E3Q0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NDFGMUZFQUM2NzcxMUVGQUNDNUE5MzJERTczQTdDQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NDFGMUZFQkM2NzcxMUVGQUNDNUE5MzJERTczQTdDQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pi6QE7UAAA2MSURBVHja7J17kFPV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"
       alt=""
     />
diff --git a/src/components/modules/vDialog.vue b/src/components/modules/vDialog.vue
index 554b202c..5623c434 100644
--- a/src/components/modules/vDialog.vue
+++ b/src/components/modules/vDialog.vue
@@ -73,49 +73,50 @@
       <DialogOverlay
         :class="
           cn(
-            'fixed shadcn-root inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'fixed shadcn-root inset-0 z-50 bg-black/80 flex justify-center items-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
             props.layoutClass
           )
         "
-      />
-      <DialogContent
-        v-bind="forwarded"
-        @interact-outside="
-          (event: any) => {
-            const target = event.target as HTMLElement
-            if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()
-          }
-        "
-        :class="
-          cn(
-            'shadcn-root max-w-[900px] bg-[#222] fixed left-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-            props.class
-          )
-        "
       >
-        <DialogHeader>
-          <DialogTitle>
-            <slot name="title" />
-          </DialogTitle>
-          <DialogDescription>
-            <slot name="description" />
-          </DialogDescription>
-        </DialogHeader>
-        <div :class="props.contentClass">
-          <slot />
-        </div>
-        <DialogFooter>
-          <slot name="foot" />
-        </DialogFooter>
-        <DialogClose
-          v-if="showClose"
-          class="absolute bg-transparent right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-          @click="closeDialog"
+        <DialogContent
+          v-bind="forwarded"
+          :class="
+            cn(
+              'shadcn-root max-w-[900px]  relative bg-[#222] grid w-full gap-4 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+              props.class
+            )
+          "
+          @interact-outside="
+            (event: any) => {
+              const target = event.target as HTMLElement
+              if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()
+            }
+          "
         >
-          <X class="w-4 h-4" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              <slot name="title" />
+            </DialogTitle>
+            <DialogDescription>
+              <slot name="description" />
+            </DialogDescription>
+          </DialogHeader>
+          <div :class="props.contentClass">
+            <slot />
+          </div>
+          <DialogFooter>
+            <slot name="foot" />
+          </DialogFooter>
+          <DialogClose
+            v-if="showClose"
+            class="absolute bg-transparent right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+            @click="closeDialog"
+          >
+            <X class="w-4 h-4" />
+            <span class="sr-only">Close</span>
+          </DialogClose>
+        </DialogContent>
+      </DialogOverlay>
     </DialogPortal>
   </Dialog>
 </template>
diff --git a/src/components/modules/vImage.vue b/src/components/modules/vImage.vue
index 2ee22493..c2509b46 100644
--- a/src/components/modules/vImage.vue
+++ b/src/components/modules/vImage.vue
@@ -19,11 +19,13 @@
 </script>
 
 <template>
-  <div :class="`w-full h-full relative ${src ? 'bg-black' : ''} overflow-hidden image-box`">
+  <div
+    :class="`w-full h-full relative ${src ? 'bg-black' : ''} overflow-hidden image-box flex justify-center items-center`"
+  >
     <img
       :src="src"
       :alt="alt"
-      :class="`absolute ${aspectRatio ? 'w-[100%] h-auto' : 'w-auto h-[100%]'} left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all hover:scale-125`"
+      :class="`${aspectRatio ? 'w-[100%] h-auto' : 'w-auto h-[100%]'} transition-all hover:scale-125`"
     />
   </div>
 </template>
diff --git a/src/components/modules/vShadet/index.vue b/src/components/modules/vShadet/index.vue
index 8c63b293..06eb0814 100644
--- a/src/components/modules/vShadet/index.vue
+++ b/src/components/modules/vShadet/index.vue
@@ -9,11 +9,18 @@
   const emit = defineEmits(['update:open'])
 </script>
 <template>
-  <div :class="cn('w-[100vw] h-[100vh] fixed inset-0 z-50 bg-black/80', props.z)">
+  <div
+    :class="
+      cn(
+        'w-[100vw] h-[100vh] fixed inset-0 z-50 bg-black/80 flex justify-center items-center',
+        props.z
+      )
+    "
+  >
     <div
       :class="
         cn(
-          'flex p-10 overflow-hidden max-w-[500px] bg-[#222] fixed left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 gap-2 border shadow-lg sm:rounded-lg',
+          'flex p-10 overflow-hidden max-w-[500px] bg-[#222]  w-full gap-2 border shadow-lg sm:rounded-lg',
           props.class
         )
       "
diff --git a/src/components/modules/vUpload/vUploadImage.vue b/src/components/modules/vUpload/vUploadImage.vue
index 5a96a550..20777d95 100644
--- a/src/components/modules/vUpload/vUploadImage.vue
+++ b/src/components/modules/vUpload/vUploadImage.vue
@@ -143,10 +143,10 @@
       <!-- 视频预览 -->
       <video
         v-if="isVideo && mediaSrc"
+        ref="videoRef"
         :src="mediaSrc"
         class="block object-cover w-full h-full rounded-lg absolute left-0 top-0 z-10"
         muted
-        ref="videoRef"
         @load="handleVideoLoad"
       />
 
@@ -159,22 +159,25 @@
 
       <!-- 占位符 -->
       <div v-if="!mediaSrc">
-        <div
-          class="w-[64%] h-1 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-slate-400 rounded-md"
-        ></div>
-        <div
-          class="w-1 h-[64%] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-slate-400 rounded-md"
-        ></div>
+        <div class="w-full h-full absolute left-0 top-0 flex justify-center items-center">
+          <div class="w-[64%] h-1 bg-slate-400 rounded-md"></div>
+        </div>
+        <div class="w-full h-full absolute left-0 top-0 flex justify-center items-center">
+          <div class="w-1 h-[64%] bg-slate-400 rounded-md"></div>
+        </div>
       </div>
 
       <Trash2
-        class="absolute right-2 top-2 z-30 cursor-pointer text-white bg-black/50 rounded p-1"
         v-if="mediaSrc"
+        class="absolute right-2 top-2 z-30 cursor-pointer text-white bg-black/50 rounded p-1"
         @click="clearVal"
       />
     </div>
-    <div v-if="showLoading" class="fixed w-[100vw] h-[100vh] left-0 top-0 bg-black/40 z-13000">
-      <div class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+    <div
+      v-if="showLoading"
+      class="fixed w-[100vw] h-[100vh] left-0 top-0 bg-black/40 z-13000 flex justify-center items-center flex-col"
+    >
+      <div class="pb-2">
         <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24">
           <circle cx="12" cy="2" r="0" fill="currentColor">
             <animate
@@ -266,7 +269,7 @@
           </circle>
         </svg>
       </div>
-      <div class="fixed left-1/2 top-[60%] -translate-x-1/2 text-white">
+      <div class="text-white">
         {{ $t('vUpload.loading') }}
       </div>
     </div>