feat: 优化拖动组件逻辑，加入tailwind支持，更新readme

src/class/VirtualPage.ts

@@ -42,6 +42,7 @@ export default class VirtualPage {
       this.color = getRandomWebSafeColor()
       this.exitConfirm = initObjects?.option?.exitConfirm ?? false
       this.allowCopy = initObjects?.option?.allowCopy ?? true
+      this.pageStorage = {}
    }
    // 页面使用的组件
    component: Component
@@ -53,6 +54,8 @@ export default class VirtualPage {
    currentDirectories: VirtualDirectory[]
    // 当前正在使用的文件
    currentFiles: VirtualFile[]
+   // 页面数据存储
+   pageStorage: { [key: string]: any }
    // 区分每一个页面的唯一id
    id: number
    // 当refreshKey改变时需要刷新页面，目前还没接入刷新

src/components/miaoDraggableDiv.vue

@@ -1,17 +1,20 @@
 <template>
-   <div ref="divRef" @dragstart="onDs" :draggable="isDraggable">
+   <div ref="divRef" @dragstart="onDs" :draggable="isDraggable ?? true">
       <slot></slot>
    </div>
 </template>
 
 <script setup lang="ts">
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
+import useDataBus from '@/hooks/useDataBus';
 import { onMounted, ref } from 'vue'
 // import Sortable from 'sortablejs'
 
 const props = defineProps<{
-   isDraggable: boolean
+   isDraggable?: boolean,
+   bindVirtualFiles?: VirtualFile[],
+   bindVirtualDirectories?: VirtualDirectory[]
 }>()
-props
 const emit = defineEmits<{
    onDragStart: [e: DragEvent]
 }>()
@@ -20,6 +23,15 @@ const divRef = ref<HTMLDivElement>()
 
 const onDs = (e: DragEvent) => {
    emit('onDragStart', e)
+   const dataBus = useDataBus()
+   props.bindVirtualFiles && dataBus.set(
+      'dragData_vFiles',
+      props.bindVirtualFiles
+   )
+   props.bindVirtualDirectories && dataBus.set(
+      'dragData_vDirectory',
+      props.bindVirtualDirectories
+   )
 }
 
 onMounted(() => {

src/components/miaoDropHandler.vue

@@ -1,6 +1,6 @@
 <template>
    <div
-      class="container"
+      class="miao-drop-container"
       @dragover="handleDragOver"
       @dragleave="handleDragLeave"
       @drop="handleDrop">
@@ -123,7 +123,7 @@ const handleDrop = async (event: DragEvent) => {
 </script>
 
 <style lang="scss" scoped>
-.container {
+.miao-drop-container {
    width: 100%;
    height: 100%;
    position: relative;

src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import 'drag-drop-touch'
+import '@/styles/tailwind.css'
 
 createApp(App).mount('#app')

src/plugins/browser_llm/browser_llm.vue

@@ -220,6 +220,12 @@ const sendMessage = async () => {
       (partialResult: string, done: boolean) => {
         // 累加部分结果并更新UI
         currentGeneratedText.value += partialResult;
+        const banStart = [',', '，']
+        for(const ban of banStart) {
+          if(currentGeneratedText.value.startsWith(ban)) {
+            currentGeneratedText.value = currentGeneratedText.value.slice(1)
+          } 
+        }
 
         // 滚动到底部以显示最新内容
         nextTick().then(scrollToBottom);

src/plugins/miaoDirectory/components/miaoDirectoryItem.vue

@@ -1,28 +1,13 @@
 <template>
-   <miao-draggable-div
-      class="miao-item"
-      :isDraggable="!draggable"
-      ref="itemRef"
-      @on-drag-start="handleDragStart">
-      <miaoContextMenu
-         :options="dropDownOptions ?? []"
-         :touch-time-out="500"
-         @select="handleDropdownSelect">
-         <div
-            class="item-main"
-            :class="selected ? 'item-main-selected' : ''"
-            ref="mainRef">
-            <div
-               class="item-main-front"
-               :style="{ backgroundColor: props.color }"></div>
+   <miao-draggable-div class="miao-item" :isDraggable="!draggable" ref="itemRef">
+      <miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
+         <div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
+            <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
             <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
             <div class="item-main-info">
                <div class="item-main-info-name">
-                  <Icon
-                     class="item-main-info-name-icon"
-                     v-if="clientWidth <= 250"></Icon>
-                  <n-ellipsis
-                     :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">
+                  <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
+                  <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">
                      {{ name }}
                   </n-ellipsis>
                </div>
@@ -30,9 +15,7 @@
                   {{ time }}
                </div>
             </div>
-            <miao-draggable-div
-               class="item-main-dragBtn"
-               :isDraggable="draggable">
+            <miao-draggable-div class="item-main-dragBtn" :isDraggable="draggable" @on-drag-start="handleDragStart">
                <ReorderFourOutline></ReorderFourOutline>
             </miao-draggable-div>
          </div>

src/plugins/miaoImages/miaoImages.vue

@@ -1,13 +1,9 @@
 <template>
-   <miao-drop-handler
-      @on-virtual-directory="handleDrop"
-      @on-virtual-files="handleDrop">
+   <miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
       <miao-message-provider ref="miaoMessageRef">
          <div class="miaoImage" ref="rootRef">
             <n-scrollbar ref="NScrollbarRef" style="max-height: 100%">
-               <div
-                  class="miaoImage-container"
-                  v-for="imageGroup in imageGroupList">
+               <div class="miaoImage-container" v-for="imageGroup in imageGroupList">
                   <div class="miaoImage-container-day">
                      <!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
                             <div class="miaoImage-container-divide-line"></div>
@@ -19,39 +15,22 @@
                             <div class="miaoImage-container-divide-line"></div>
                         </div> -->
                   </div>
-                  <div
-                     class="miaoImage-container-row"
-                     v-for="vFile in imageGroup.items"
-                     :key="vFile.id">
-                     <img
-                        :src="vFile.url"
-                        class="miaoImage-container-row-image"
-                        loading="lazy"
-                        :class="
-                           activeImage === vFile
+                  <div class="miaoImage-container-row" v-for="vFile in imageGroup.items" :key="vFile.id">
+                     <MiaoDraggableDiv :bind-virtual-files="[vFile]" class="size-full flex justify-center items-center">
+                        <img :src="vFile.url" class="miaoImage-container-row-image" loading="lazy" :class="activeImage === vFile
                               ? 'miaoImage-container-row-image-active'
                               : ''
-                        "
-                        @click="activeImage = vFile" />
+                           " @click="activeImage = vFile" />
+                     </MiaoDraggableDiv >
                   </div>
                </div>
             </n-scrollbar>
-            <miao-mask
-               :show="activeImage !== undefined"
-               @click="activeImage = undefined"
-               class="miaoImage-mask"
+            <miao-mask :show="activeImage !== undefined" @click="activeImage = undefined" class="miaoImage-mask"
                @wheel="handleWheel">
-               <ChevronBack
-                  class="miaoImage-mask-btn miaoImage-mask-btn-back"
-                  @click="handleActiveImageBack" />
-               <img
-                  :src="activeImage?.url"
-                  class="miaoImage-mask-active"
-                  @click="(e) => e.stopPropagation()"
-                  draggable="false"
-                  :style="{ transform: `scale(${imgViewScale})` }" />
-               <ChevronForward
-                  class="miaoImage-mask-btn miaoImage-mask-btn-forward"
+               <ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageBack" />
+               <img :src="activeImage?.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()"
+                  draggable="false" :style="{ transform: `scale(${imgViewScale})` }" />
+               <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
                   @click="handleActiveImageForward" />
             </miao-mask>
          </div>
@@ -167,7 +146,7 @@ const handleActiveImageBack = (e: any) => {
    const index = imageFileList.value.indexOf(activeImage.value)
    activeImage.value =
       imageFileList.value[
-         (index - 1 + imageFileList.value.length) % imageFileList.value.length
+      (index - 1 + imageFileList.value.length) % imageFileList.value.length
       ]
 }
 
@@ -179,7 +158,7 @@ const handleActiveImageForward = (e: any) => {
    const index = imageFileList.value.indexOf(activeImage.value)
    activeImage.value =
       imageFileList.value[
-         (index + 1 + imageFileList.value.length) % imageFileList.value.length
+      (index + 1 + imageFileList.value.length) % imageFileList.value.length
       ]
 }
 

src/styles/default.scss

@@ -1,7 +1,6 @@
 :root body {
    background-color: aliceblue;
 }
-
 // html,
 // body,
 // div,

src/styles/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";