vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/DevToolWindow/index.vue

@@ -1,334 +1,420 @@
 <template>
-  <view
-    v-if="open"
-    :style="customStyle"
-    :class="['dev-tool-window', `dev-tool-window-${theme}`]"
-    @touchmove="onTouchMove"
-    @wheel="onWheel"
-  >
-    <view class="dev-tool-window-bg"></view>
-
-    <!--
-        你能想象，没有这条注释会报错？？？
-        我甚至都不知道错在哪里？？？
-        凸(艹皿艹 )
-        总有一些莫名其妙的错误
-        Uncaught TypeError: Cannot read property 'children' of null at uni-app-view.umd.js:7
-        Uncaught TypeError: Cannot read property '$' of undefined at uni-app-view.umd.js:7
-    -->
-
-    <Tabs
-      v-model="activeTab"
-      :items="tabItems"
-      :scroll-left="tabScrollLeft"
-      @close="onCloseWindow"
-      @scroll="debounceScrollTabs"
-      @change="onChangeTabs"
-    />
-
-    <swiper
-      class="dev-tool-window-container"
-      :current="activeTab"
-      @change="onChangeSwiper"
-    >
-      <!-- <swiper-item>
-        <InstanceDetail v-if="activeTab == 0" :contentHeight="contentHeight" />
-      </swiper-item> -->
-      <swiper-item>
-        <ConsoleList
-          v-if="swiperShow(tabIndex.Console)"
-          :currentConsoleType="currentConsoleType"
-          :consoleList="consoleList"
-          :sourceFileServers="sourceFileServers"
-          :mode="mode"
-          :useDevSource="useDevSource"
-          :zIndex="zIndex + 1"
-          :contentHeight="contentHeight"
-          v-model="searchConsole"
-          @choose="onConsoleChoose"
-          @search="onSearchConsole"
-          @run="onRunJS"
-          @openCode="onOpenCode"
-          @openJson="onOpenJson"
-        />
-      </swiper-item>
-      <swiper-item>
-        <NetworkList
-          v-if="swiperShow(tabIndex.Network)"
-          v-model="searchNetwork"
-          :mode="mode"
-          :zIndex="zIndex + 1"
-          :networkList="networkList"
-          :useDevSource="useDevSource"
-          :currentNetworkType="currentNetworkType"
-          :currentNetworkSort="currentNetworkSort"
-          :contentHeight="contentHeight"
-          @choose="onNetworkChoose"
-          @search="onSearchNetwork"
-          @sort="onSortNetwork"
-          @openCode="onOpenCode"
-          @openSend="onOpenNetworkSend"
-          @openDetail="onOpenNetworkDetail"
-          @openIntercept="onOpenNetworkIntercept"
-        />
-      </swiper-item>
-      <swiper-item>
-        <UploadList
-          v-if="swiperShow(tabIndex.Upload)"
-          :currentUploadType="currentUploadType"
-          :uploadList="uploadList"
-          :zIndex="zIndex + 1"
-          :mode="mode"
-          :useDevSource="useDevSource"
-          :contentHeight="contentHeight"
-          v-model="searchUpload"
-          @choose="onUploadChoose"
-          @search="onSearchUpload"
-          @openDetail="onOpenUploadDetail"
-          @openCode="onOpenCode"
-        />
-      </swiper-item>
-      <swiper-item>
-        <WebSocket
-          v-if="swiperShow(tabIndex.WebSocket)"
-          :wsList="wsList"
-          :currentWebSocketType="currentWebSocketType"
-          :zIndex="zIndex + 1"
-          :contentHeight="contentHeight"
-          v-model="searchWs"
-          @choose="onWebSocketChoose"
-          @search="onSearchWs"
-          @openDetail="onOpenWebSocketDetail"
-          @openCode="onOpenCode"
-        />
-      </swiper-item>
-      <swiper-item>
-        <RouteList
-          v-if="swiperShow(tabIndex.Route)"
-          :routeList="routeList"
-          :contentHeight="contentHeight"
-          v-model="searchRoute"
-          @search="onSearchRoute"
-          @routeRefresh="onRouteRefresh"
-        />
-      </swiper-item>
-      <swiper-item>
-        <ElEvent
-          v-if="swiperShow(tabIndex.ElEvent)"
-          :elEventList="elEventList"
-          :zIndex="zIndex + 1"
-          :contentHeight="contentHeight"
-          @clear="onElEventClear"
-          @openJson="onOpenJson"
-        />
-      </swiper-item>
-      <swiper-item>
-        <UniEvent
-          v-if="swiperShow(tabIndex.UniEvent)"
-          :mode="mode"
-          :uniEventList="uniEventList"
-          :eventCount="eventCount"
-          :zIndex="zIndex + 1"
-          :useDevSource="useDevSource"
-          :sourceFileServers="sourceFileServers"
-          :contentHeight="contentHeight"
-          @clear="onUniEventClear"
-          @openCode="onOpenCode"
-        />
-      </swiper-item>
-      <swiper-item>
-        <CaptureScreen
-          v-if="swiperShow(tabIndex.CaptureScreen)"
-          :screenList="screenList"
-          @clear="onCaptureScreenClear"
-        />
-      </swiper-item>
-      <swiper-item>
-        <ScanCodeList
-          v-if="swiperShow(tabIndex.ScanCode)"
-          :mode="mode"
-          :useDevSource="useDevSource"
-          :scanCodeList="scanCodeList"
-          :contentHeight="contentHeight"
-          @clear="onScanCodeListClear"
-          @openCode="onOpenCode"
-          @openJson="onOpenJson"
-        />
-      </swiper-item>
-      <swiper-item>
-        <NFCList
-          v-if="swiperShow(tabIndex.NFC)"
-          :mode="mode"
-          :useDevSource="useDevSource"
-          :nfcList="nfcList"
-          :contentHeight="contentHeight"
-          @clear="onNfcClear"
-          @openCode="onOpenCode"
-          @openJson="onOpenJson"
-          @openTool="onOpenNfcTool"
-        />
-      </swiper-item>
-      <swiper-item>
-        <StorageList
-          v-if="swiperShow(tabIndex.Storage)"
-          v-model:storage-list="storageList"
-          v-model="searchStorage"
-          :theme="theme"
-          @choose="onStorageChoose"
-          @remove="onStorageRemove"
-          @change="onChangeStorage"
-          @search="onSearchStorage"
-        />
-      </swiper-item>
-      <swiper-item>
-        <VuexList
-          v-if="swiperShow(tabIndex.Vuex)"
-          v-model:vuexList="vuexList"
-          :theme="theme"
-          :contentHeight="contentHeight"
-          @change="onChangeVuex"
-        />
-      </swiper-item>
-      <swiper-item>
-        <PiniaList
-          v-if="swiperShow(tabIndex.Pinia)"
-          v-model:pinia-list="piniaList"
-          :theme="theme"
-          :contentHeight="contentHeight"
-          @diff-value="onChangePinia"
-        />
-      </swiper-item>
-      <swiper-item>
-        <SettingList
-          v-if="swiperShow(tabIndex.Setting)"
-          :devToolVisible="devToolVisible"
-          :sizeFormat="sizeFormat"
-          :theme="theme"
-          :buildInfo="buildInfo"
-          :cacheInterceptConfig="cacheInterceptConfig"
-          :netWorkStatus="netWorkStatus"
-          @showDevButton="onShowDevButton"
-          @restartDevTool="onRestartDevTool"
-          @restartApp="onRestartApp"
-          @exportLog="onExportLog"
-          @screenshot="onScreenshot"
-          @clearCache="onClearCache"
-          @destroyDevTool="onDestroyDevTool"
-          @changeTheme="onChangeTheme"
-          @changeCacheInterceptConfig="onChangeCacheInterceptConfig"
-          @openJson="onOpenJson"
-        />
-      </swiper-item>
-    </swiper>
-
-    <!-- 源码查看 -->
-    <SourceCode
-      v-if="openCode"
-      :url="stack"
-      :mode="mode"
+  <AppTransition
+    :show="open"
+    name="reveal"
+    :duration="300"
+    :zIndex="zIndex"
+    :origin="origin"
+    :animated="useTransition"
+    @after-enter="onAfterEnter"
+    @after-leave="onAfterLeave">
+    <DraggableContainer
+      ref="draggableRef"
+      :x="windowX"
+      :y="windowY"
+      :width="windowWidth"
+      :height="windowHeight"
       :zIndex="zIndex"
+      :resizable="true"
+      :isFullScreen="isFullScreen"
+      :maxWidth="100"
+      handle=".drag-handle"
+      @update:x="onUpdateWindowX"
+      @update:y="onUpdateWindowY"
+      @update:width="onUpdateWindowWidth"
+      @update:height="onUpdateWindowHeight"
+      @change="onWindowChange">
+      <view
+        :style="dynamicWindowStyle"
+        :class="[
+          'dev-tool-window',
+          isFullScreen ? 'is-full-screen' : 'is-window',
+        ]">
+        <view class="dev-tool-window-bg"></view>
+
+        <view
+          class="window-header drag-handle"
+          data-drag-handle="1"
+          @touchstart="onInitDrag"
+          @mousedown="onInitDrag">
+          <view
+            class="drag-indicator"
+            v-if="!isFullScreen"
+            data-drag-handle="1"></view>
+
+          <!--
+            你能想象，没有这条注释会报错？？？
+            我甚至都不知道错在哪里？？？
+            凸(艹皿艹 )
+            总有一些莫名其妙的错误
+            Uncaught TypeError: Cannot read property 'children' of null at uni-app-view.umd.js:7
+            Uncaught TypeError: Cannot read property '$' of undefined at uni-app-view.umd.js:7
+          -->
+
+          <Tabs
+            data-drag-handle="1"
+            :model-value="activeTab"
+            :items="tabItems"
+            :scroll-left="tabScrollLeft"
+            @close="onCloseWindow"
+            @scroll="debounceScrollTabs"
+            @change="onChangeTabs">
+            <template #extra>
+              <CircularButton
+                :text="isFullScreen ? '❐' : '⛶'"
+                @click="toggleFullScreen" />
+            </template>
+          </Tabs>
+        </view>
+
+        <CustomSwiper
+          v-if="isReady"
+          :model-value="activeTab"
+          :item-count="tabItems.length"
+          class="dev-tool-window-container"
+          @change="onChangeTabs">
+          <!-- Console -->
+          <CustomSwiperItem
+            v-if="isTabVisible('Console')"
+            :key="tabIndex.Console"
+            style="width: 100%; height: 100%">
+            <ConsoleList
+              v-if="swiperShow(tabIndex.Console)"
+              :contentHeight="dynamicContentHeight"
+              :currentConsoleType="currentConsoleType"
+              :consoleList="consoleList"
+              :sourceFileServers="sourceFileServers"
+              :mode="mode"
+              :useDevSource="useDevSource"
+              :zIndex="zIndex + 1"
+              :model-value="searchConsole"
+              @choose="onConsoleChoose"
+              @search="onSearchConsole"
+              @run="onRunJS"
+              @openCode="overlay.handlers.onOpenCode"
+              @openJson="overlay.handlers.onOpenJson"
+              @update:model-value="onUpdateSearchConsole" />
+          </CustomSwiperItem>
+
+          <!-- Network -->
+          <CustomSwiperItem
+            v-if="isTabVisible('Network')"
+            :key="tabIndex.Network"
+            style="width: 100%; height: 100%">
+            <NetworkList
+              v-if="swiperShow(tabIndex.Network)"
+              :contentHeight="dynamicContentHeight"
+              :model-value="searchNetwork"
+              :mode="mode"
+              :zIndex="zIndex + 1"
+              :networkList="networkList"
+              :useDevSource="useDevSource"
+              :currentNetworkType="currentNetworkType"
+              :currentNetworkSort="currentNetworkSort"
+              @search="onSearchNetwork"
+              @choose="onNetworkChoose"
+              @sort="onSortNetwork"
+              @openCode="overlay.handlers.onOpenCode"
+              @openSend="overlay.handlers.onOpenNetworkSend"
+              @openDetail="overlay.handlers.onOpenNetworkDetail"
+              @openIntercept="overlay.handlers.onOpenNetworkIntercept"
+              @update:model-value="onUpdateSearchNetwork" />
+          </CustomSwiperItem>
+
+          <!-- Transfer -->
+          <CustomSwiperItem
+            v-if="isTabVisible('Transfer')"
+            :key="tabIndex.Transfer"
+            style="width: 100%; height: 100%">
+            <TransferList
+              v-if="swiperShow(tabIndex.Transfer)"
+              :contentHeight="dynamicContentHeight"
+              :currentType="currentTransferType"
+              :currentCategory="currentTransferCategory"
+              :list="transferList"
+              :type="'upload'"
+              :zIndex="zIndex + 1"
+              :mode="mode"
+              :useDevSource="useDevSource"
+              :model-value="searchTransfer"
+              @choose="onTransferChoose"
+              @chooseCategory="handlers.onTransferCategoryChoose"
+              @search="onSearchTransfer"
+              @openDetail="overlay.handlers.onOpenTransferDetail"
+              @openCode="overlay.handlers.onOpenCode"
+              @update:model-value="onUpdateSearchTransfer" />
+          </CustomSwiperItem>
+
+          <!-- WebSocket -->
+          <CustomSwiperItem
+            v-if="isTabVisible('WebSocket')"
+            :key="tabIndex.WebSocket"
+            style="width: 100%; height: 100%">
+            <WebSocket
+              v-if="swiperShow(tabIndex.WebSocket)"
+              :contentHeight="dynamicContentHeight"
+              :wsList="wsList"
+              :currentWebSocketType="currentWebSocketType"
+              :zIndex="zIndex + 1"
+              :model-value="searchWs"
+              @search="onSearchWs"
+              @choose="onWebSocketChoose"
+              @openDetail="
+                overlay.handlers.onOpenWebSocketDetail($event, currentWebSocket)
+              "
+              @openCode="overlay.handlers.onOpenCode"
+              @update:model-value="onUpdateSearchWs" />
+          </CustomSwiperItem>
+
+          <!-- Route -->
+          <CustomSwiperItem
+            v-if="isTabVisible('Route')"
+            :key="tabIndex.Route"
+            style="width: 100%; height: 100%">
+            <RouteList
+              v-if="swiperShow(tabIndex.Route)"
+              :contentHeight="dynamicContentHeight"
+              :routeList="routeList"
+              :model-value="searchRoute"
+              @search="onSearchRoute"
+              @routeRefresh="onRouteRefresh"
+              @update:model-value="onUpdateSearchRoute" />
+          </CustomSwiperItem>
+
+          <!-- Instance -->
+          <CustomSwiperItem
+            v-if="isTabVisible('Instance')"
+            :key="tabIndex.Instance"
+            style="width: 100%; height: 100%">
+            <InstanceDetail
+              v-if="swiperShow(tabIndex.Instance)"
+              :contentHeight="dynamicContentHeight"
+              :theme="theme"
+              @openCode="overlay.handlers.onOpenCode"
+              @openJson="overlay.handlers.onOpenJson" />
+          </CustomSwiperItem>
+
+          <!-- ElEvent -->
+          <CustomSwiperItem
+            v-if="isTabVisible('ElEvent')"
+            :key="tabIndex.ElEvent"
+            style="width: 100%; height: 100%">
+            <ElEvent
+              v-if="swiperShow(tabIndex.ElEvent)"
+              :contentHeight="dynamicContentHeight"
+              :elEventList="elEventList"
+              :zIndex="zIndex + 1"
+              @clear="onElEventClear"
+              @openJson="overlay.handlers.onOpenJson" />
+          </CustomSwiperItem>
+
+          <!-- UniEvent -->
+          <CustomSwiperItem
+            v-if="isTabVisible('UniEvent')"
+            :key="tabIndex.UniEvent"
+            style="width: 100%; height: 100%">
+            <UniEvent
+              v-if="swiperShow(tabIndex.UniEvent)"
+              :contentHeight="dynamicContentHeight"
+              :mode="mode"
+              :uniEventList="uniEventList"
+              :eventCount="eventCount"
+              :zIndex="zIndex + 1"
+              :useDevSource="useDevSource"
+              :sourceFileServers="sourceFileServers"
+              @clear="onUniEventClear"
+              @openCode="overlay.handlers.onOpenCode" />
+          </CustomSwiperItem>
+
+          <!-- Performance -->
+          <CustomSwiperItem
+            v-if="isTabVisible('Performance')"
+            :key="tabIndex.Performance"
+            style="width: 100%; height: 100%">
+            <Performance
+              v-if="swiperShow(tabIndex.Performance)"
+              :contentHeight="dynamicContentHeight"
+              :theme="theme"
+              :mode="'tab'" />
+          </CustomSwiperItem>
+
+          <!-- CaptureScreen -->
+          <CustomSwiperItem
+            v-if="isTabVisible('CaptureScreen')"
+            :key="tabIndex.CaptureScreen"
+            style="width: 100%; height: 100%">
+            <CaptureScreen
+              v-if="swiperShow(tabIndex.CaptureScreen)"
+              :screenList="screenList"
+              @clear="onCaptureScreenClear" />
+          </CustomSwiperItem>
+
+          <!-- ScanCode -->
+          <CustomSwiperItem
+            v-if="isTabVisible('ScanCode')"
+            :key="tabIndex.ScanCode"
+            style="width: 100%; height: 100%">
+            <ScanCodeList
+              v-if="swiperShow(tabIndex.ScanCode)"
+              :contentHeight="dynamicContentHeight"
+              :mode="mode"
+              :useDevSource="useDevSource"
+              :scanCodeList="scanCodeList"
+              @clear="onScanCodeListClear"
+              @openCode="overlay.handlers.onOpenCode"
+              @openJson="overlay.handlers.onOpenJson" />
+          </CustomSwiperItem>
+
+          <!-- NFC -->
+          <CustomSwiperItem
+            v-if="isTabVisible('NFC')"
+            :key="tabIndex.NFC"
+            style="width: 100%; height: 100%">
+            <NFCList
+              v-if="swiperShow(tabIndex.NFC)"
+              :contentHeight="dynamicContentHeight"
+              :mode="mode"
+              :useDevSource="useDevSource"
+              :nfcList="nfcList"
+              @clear="onNfcClear"
+              @openCode="overlay.handlers.onOpenCode"
+              @openJson="overlay.handlers.onOpenJson"
+              @openTool="overlay.handlers.onOpenNfcTool" />
+          </CustomSwiperItem>
+
+          <!-- Storage -->
+          <CustomSwiperItem
+            v-if="isTabVisible('Storage')"
+            :key="tabIndex.Storage"
+            style="width: 100%; height: 100%">
+            <StorageList
+              v-if="swiperShow(tabIndex.Storage)"
+              :theme="theme"
+              :storageList="storageList"
+              :model-value="searchStorage"
+              @choose="onStorageChoose"
+              @remove="onStorageRemove"
+              @change="onChangeStorage"
+              @search="onSearchStorage"
+              @update:storageList="onUpdateStorageList"
+              @update:model-value="onUpdateSearchStorage" />
+          </CustomSwiperItem>
+
+          <!-- Vuex -->
+          <CustomSwiperItem
+            v-if="isTabVisible('Vuex')"
+            :key="tabIndex.Vuex"
+            style="width: 100%; height: 100%">
+            <VuexList
+              v-if="swiperShow(tabIndex.Vuex)"
+              :contentHeight="dynamicContentHeight"
+              :theme="theme"
+              :vuexList="vuexList"
+              @change="onChangeVuex"
+              @update:vuexList="onUpdateVuexList" />
+          </CustomSwiperItem>
+
+          <!-- Pinia -->
+          <CustomSwiperItem
+            v-if="isTabVisible('Pinia')"
+            :key="tabIndex.Pinia"
+            style="width: 100%; height: 100%">
+            <PiniaList
+              v-if="swiperShow(tabIndex.Pinia)"
+              :contentHeight="dynamicContentHeight"
+              :theme="theme"
+              :piniaList="piniaList"
+              @diff-value="onChangePinia"
+              @update:piniaList="onUpdatePiniaList" />
+          </CustomSwiperItem>
+
+          <!-- Setting -->
+          <CustomSwiperItem
+            v-if="isTabVisible('Setting')"
+            :key="tabIndex.Setting"
+            style="width: 100%; height: 100%">
+            <SettingList
+              v-if="swiperShow(tabIndex.Setting)"
+              :contentHeight="dynamicContentHeight"
+              :theme="theme"
+              :devToolVisible="devToolVisible"
+              :performanceVisible="performanceVisible"
+              :performanceShowFps="performanceShowFps"
+              :performanceShowCpu="performanceShowCpu"
+              :sizeFormat="sizeFormat"
+              :buildInfo="buildInfo"
+              :cache-intercept-config="cacheInterceptConfig"
+              :cache-network-log="cacheNetworkLog"
+              :cache-console-log="cacheConsoleLog"
+              :use-transition="useTransition"
+              :base-font-size="baseFontSize"
+              :tag-font-size="tagFontSize"
+              :tips-font-size="tipsFontSize"
+              :font-family="fontFamily"
+              :font-weight="fontWeight"
+              :net-work-status="netWorkStatus"
+              @showDevButton="onShowDevButton"
+              @showPerformance="onChangePerformance"
+              @restartDevTool="onRestartDevTool"
+              @restartApp="onRestartApp"
+              @exportLog="onExportLog"
+              @screenshot="onScreenshot"
+              @clearCache="onClearCache"
+              @destroyDevTool="onDestroyDevTool"
+              @change-theme="onChangeTheme"
+              @change-cache-intercept-config="onChangeCacheInterceptConfig"
+              @change-cache-network-log="onChangeCacheNetworkLog"
+              @change-cache-console-log="onChangeCacheConsoleLog"
+              @change-use-transition="onChangeUseTransition"
+              @changeFont="onChangeFontSize"
+              @onChangePerformanceShowFps="onChangePerformanceShowFps"
+              @onChangePerformanceShowCpu="onChangePerformanceShowCpu"
+              @openJson="overlay.handlers.onOpenJson" />
+          </CustomSwiperItem>
+        </CustomSwiper>
+      </view>
+    </DraggableContainer>
+    <DevToolOverlay
+      v-if="isReady"
+      :overlayState="overlay.state"
+      :overlayHandlers="overlay.handlers"
+      :mode="mode"
+      :zIndex="zIndex + 10"
       :sourceFileServers="sourceFileServers"
       :contentHeight="contentHeight"
       :customStyle="customStyle"
-      @close="onCloseCode"
-    />
-
-    <!-- 发起请求 -->
-    <NetworkSend
-      v-if="showNetworkSend"
-      :zIndex="zIndex"
-      :network="network"
+      :network="overlay.network"
+      :overlay="overlay"
+      :currentWebSocket="currentWebSocket"
       :interceptNetworkList="interceptNetworkList"
-      :customStyle="customStyle"
-      @close="onCloseNetworkSend"
-      @openDetail="onOpenNetworkDetail"
-    />
-
-    <!-- 拦截请求 -->
-    <NetworkIntercept
-      v-if="showNetworkIntercept"
-      :zIndex="zIndex"
-      :network="network"
-      :interceptNetworkList="interceptNetworkList"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="onCloseNetworkIntercept"
-      @remove="onRemoveInterceptConfig"
-      @openConfig="onOpenInterceptConfig"
-    />
-
-    <!-- 拦截配置 -->
-    <InterceptConfig
-      v-if="showInterceptConfig"
-      :zIndex="zIndex"
-      :network="network"
-      :customStyle="customStyle"
-      @close="onCloseInterceptConfig"
-      @confirm="onConfirmInterceptConfig"
-    />
-
-    <!-- 请求详情 -->
-    <NetworkDetail
-      v-if="showNetworkDetail"
-      :zIndex="zIndex"
-      :network="network"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="onCloseNetworkDetail"
-    />
-
-    <!-- 上传详情 -->
-    <UploadDetail
-      v-if="showUploadDetail"
-      :upload="upload"
-      :zIndex="zIndex"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="onCloseUploadDetail"
-    />
-    <!-- WebSocket详情 -->
-    <WebSocketDetail
-      v-if="showWebSocketDetail"
-      :ws="currentWebSocket"
-      :zIndex="zIndex"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="onCloseWebSocketDetail"
-      @clear="onClearWebSocketMessage"
-      @openJson="onOpenJson"
-    />
-
-    <!-- Json详情 -->
-    <JsonDetail
-      v-if="showJsonDetail"
-      :data="jsonData"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="onCloseJson"
-    />
-
-    <!-- NFC 工具 -->
-    <NFCTool
-      v-if="showNfcTool"
-      :contentHeight="contentHeight"
-      :customStyle="customStyle"
-      @close="onCloseNfcTool"
-    />
-  </view>
+      :onRemoveInterceptConfig="onRemoveInterceptConfig"
+      :onConfirmInterceptConfig="onConfirmInterceptConfig"
+      :onClearWebSocketMessage="onClearWebSocketMessage"
+      :onSendWebSocket="onSendWebSocket"
+      :onOpenJson="overlay.handlers.onOpenJson"
+      :useTransition="useTransition"
+      :theme="theme" />
+  </AppTransition>
 </template>
 
+<script lang="ts">
+export default {
+  __devTool: true,
+};
+</script>
+
 <script setup lang="ts">
 import { onShow, onTabItemTap } from '@dcloudio/uni-app';
 import {
-  ref,
-  shallowRef,
   onMounted,
-  reactive,
   computed,
   nextTick,
   onBeforeMount,
   onUnmounted,
+  ref,
+  watch,
 } from 'vue';
+import AppTransition from '../AppTransition/index.vue';
 import Tabs from '../Tabs/index.vue';
 import ConsoleList from '../ConsoleList/index.vue';
 import NetworkList from '../NetworkList/index.vue';
@@ -337,168 +423,32 @@ import RouteList from '../RouteList/index.vue';
 import SettingList from '../SettingList/index.vue';
 import VuexList from '../VuexList/index.vue';
 import PiniaList from '../PiniaList/index.vue';
+import Performance from '../Performance/index.vue';
 import WebSocket from '../WebSocket/index.vue';
-import UploadList from '../UploadList/index.vue';
+import TransferList from '../TransferList/index.vue';
 import ElEvent from '../ElEvent/index.vue';
 import UniEvent from '../UniEvent/index.vue';
-
 import CaptureScreen from '../CaptureScreen/index.vue';
-import SourceCode from '../SourceCode/index.vue';
 import ScanCodeList from '../ScanCodeList/index.vue';
 import NFCList from '../NFCList/index.vue';
-import NFCTool from '../NFCList/NFCTool.vue';
-
-import NetworkSend from '../NetworkList/NetworkSend.vue';
-import NetworkDetail from '../NetworkList/NetworkDetail.vue';
-import NetworkIntercept from '../NetworkList/NetworkIntercept.vue';
-import InterceptConfig from '../NetworkList/InterceptConfig.vue';
-
-import UploadDetail from '../UploadList/UploadDetail.vue';
-import WebSocketDetail from '../WebSocket/WebSocketDetail.vue';
-import JsonDetail from '../JsonDetail/index.vue';
-
-// import InstanceDetail from '../InstanceDetail/index.vue';
-
-import {
-  DEV_BUTTON_SHOW_OR_HIDE,
-  DEV_CONSOLE_CLEAR,
-  DEV_DESTROY,
-  DEV_EXPORT_LOG,
-  DEV_LOG_CACHE_CLEAR,
-  DEV_NETWORK_CLEAR,
-  DEV_PINIA_CHANGE,
-  DEV_RESTART_APP,
-  DEV_RESTART_DEBUGGER,
-  DEV_ROUTE_REFRESH,
-  DEV_STORAGE_ADD,
-  DEV_STORAGE_CLEAR,
-  DEV_STORAGE_REFRESH,
-  DEV_STORAGE_REMOVE,
-  DEV_STORAGE_UPDATE,
-  DEV_UPLOAD_CLEAR,
-  DEV_VUEX_CHANGE,
-  DEV_WEBSOCKET_CLEAR,
-  DEV_APP_MESSAGE,
-  DEV_UNI_EVENT_CLEAR,
-  DEV_RUN_JS,
-  DEV_CAPTURE_SCREEN_CLEAR,
-  DEV_INTERCEPT_NETWORK_UPDATE,
-  DEV_INTERCEPT_NETWORK_REMOVE,
-  DEV_CHANGE_CACHE_INTERCEPT_CONFIG,
-  DEV_WEBSOCKET_CLEAR_MESSAGE,
-  DEV_BOTTOM_TAB_CHANGE,
-  DEV_EL_EVENT_CLEAR,
-  DEV_SCAN_CODE_CLEAR,
-  DEV_NFC_CLEAR,
-} from '../../const';
-import {
-  debounce,
-  getCurrentPagePath,
-  hightLight,
-  isAndroid,
-  isMockWX,
-} from '../../utils/index';
+import InstanceDetail from '../InstanceDetail/index.vue';
+import DevToolOverlay from './DevToolOverlay.vue';
+import CustomSwiper from '../CustomSwiper/index.vue';
+import CustomSwiperItem from '../CustomSwiper/CustomSwiperItem.vue';
+import DraggableContainer from '../DraggableContainer/index.vue';
+import CircularButton from '../CircularButton/index.vue';
+import { useI18n } from '../../i18n';
+
+import { DEV_CORE_MESSAGE, MSG_TYPE, CMD_TYPE } from '../../const';
+import { getCurrentPagePath } from '../../utils/index';
 import type { DevTool } from '../../type';
-import { devToolEventBus } from '../../core';
-import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
-import { tabItems, emptyNetwork, tabIndex } from './const';
-
-const backup: {
-  consoleList: DevTool.ConsoleItem[];
-  networkList: DevTool.NetworkItem[];
-  storageList: DevTool.StorageItem[];
-  wsList: DevTool.WS[];
-  uploadList: DevTool.UploadItem[];
-  routeList: DevTool.Page[];
-  uniEventList: DevTool.UniEventItem[];
-  runJSList: DevTool.RunJSItem[];
-} = {
-  consoleList: [],
-  networkList: [],
-  storageList: [],
-  wsList: [],
-  uploadList: [],
-  routeList: [],
-  uniEventList: [],
-  runJSList: [],
-};
-const consoleList = shallowRef<DevTool.ConsoleItem[]>([]);
-const networkList = shallowRef<DevTool.NetworkItem[]>([]);
-const uploadList = shallowRef<DevTool.UploadItem[]>([]);
-const storageList = shallowRef<DevTool.StorageItem[]>([]);
-const routeList = shallowRef<DevTool.Page[]>([]);
-const wsList = shallowRef<DevTool.WS[]>([]);
-const vuexList = shallowRef<Record<string, any>>({});
-const piniaList = shallowRef<Record<string, any>>({});
-
-const elEventList = shallowRef<DevTool.ElEventItem[]>([]);
-const uniEventList = shallowRef<DevTool.UniEventItem[]>([]);
-const eventCount = shallowRef<DevTool.EventCount>();
-const screenList = shallowRef<DevTool.ScreenItem[]>([]);
-const interceptNetworkList = shallowRef<DevTool.NetworkItem[]>([]);
-const scanCodeList = shallowRef<DevTool.ScanCodeItem[]>([]);
-const nfcList = shallowRef<DevTool.NFCItem[]>([]);
-
-const netWorkStatus = ref<{
-  isConnected?: boolean;
-  networkType?: string;
-}>({});
-const sizeFormat = shallowRef('');
-
-const devToolVisible = shallowRef(true);
-
-const activeTab = shallowRef(1);
-const tabScrollLeft = shallowRef(0);
-const currentConsoleType = shallowRef('all');
-const currentNetworkType = shallowRef('all');
-const currentNetworkSort = shallowRef<1 | -1>(1);
-const currentUploadType = shallowRef('all');
-const currentWebSocketType = shallowRef('all');
-
-const searchConsole = shallowRef('');
-const searchNetwork = shallowRef('');
-const searchUpload = shallowRef('');
-const searchWs = shallowRef('');
-const searchRoute = shallowRef('');
-const searchStorage = shallowRef('');
-const theme = shallowRef('light');
-const openCode = shallowRef(false);
-const stack = shallowRef('');
-
-const network = reactive<DevTool.NetworkItem>({ ...emptyNetwork });
-
-const showNetworkSend = shallowRef(false);
-const showNetworkDetail = shallowRef(false);
-const showNetworkIntercept = shallowRef(false);
-const showInterceptConfig = shallowRef(false);
-const cacheInterceptConfig = shallowRef(true);
-
-const showJsonDetail = shallowRef(false);
-const jsonData = shallowRef({});
-const showNfcTool = shallowRef(false);
-
-const upload = reactive<DevTool.UploadItem>({
-  index: 0,
-  status: '',
-});
-const showUploadDetail = shallowRef(false);
-
-const webSocket = reactive<DevTool.WS>({
-  url: '',
-  message: [],
-});
-
-const currentWebSocket = computed(() => {
-  return wsList.value.find((item) => item.url === webSocket.url);
-});
-
-const showWebSocketDetail = shallowRef(false);
+import { getDevToolInfo, setDevToolInfo } from '../../modules/devToolInfo';
+import { getTabItems, tabIndex } from './const';
 
-const buildInfo = reactive({
-  devToolVersion: '0.0.0',
-  devToolBuildTime: '',
-  devToolGit: '',
-});
+// 引入 Hooks
+import { useDevToolData } from './hooks/useDevToolData';
+import { useDevToolHandlers } from './hooks/useDevToolHandlers';
+import { useDevToolOverlay } from './hooks/useDevToolOverlay';
 
 const props = withDefaults(
   defineProps<{
@@ -510,6 +460,7 @@ const props = withDefaults(
     zIndex?: number;
     contentHeight: number;
     customStyle?: Record<string, any>;
+    origin?: { x: number; y: number };
   }>(),
   {
     zIndex: 1000,
@@ -519,1054 +470,468 @@ const props = withDefaults(
 const emits = defineEmits<{
   (e: 'close'): void;
   (e: 'sendMessage', data: { type: string; data: Record<string, any> }): void;
+  (e: 'changeTheme', theme: string): void;
 }>();
 
-function swiperShow(index: number) {
-  const show =
-    index == activeTab.value - 1 ||
-    index == activeTab.value ||
-    index == activeTab.value + 1;
-  return show;
-}
+const { t } = useI18n();
+const hiddenTabs = ref<string[]>([]);
+const tabItems = computed(() =>
+  getTabItems(t).filter((item) => !hiddenTabs.value.includes(item.key)),
+);
 
-const calcLineStartAndEnd = (
-  list: DevTool.NetworkItem[],
-): {
-  startTime: number;
-  endTime: number;
-} => {
-  const startTime = Math.min(...list.map((item) => item.startTime));
-  const endTime = Math.max(...list.map((item) => item?.endTime ?? Date.now()));
-
-  return { startTime, endTime };
-};
+// 初始化 Hooks
+const data = useDevToolData(props);
+const handlers = useDevToolHandlers(props, emits, data);
+const overlay = useDevToolOverlay(props);
+
+// 解构常用状态
+const {
+  activeTab,
+  tabScrollLeft,
+  theme,
+  consoleList,
+  networkList,
+  transferList,
+  storageList,
+  routeList,
+  wsList,
+  vuexList,
+  piniaList,
+  elEventList,
+  uniEventList,
+  eventCount,
+  screenList,
+  interceptNetworkList,
+  scanCodeList,
+  nfcList,
+  netWorkStatus,
+  sizeFormat,
+  devToolVisible,
+  buildInfo,
+  cacheInterceptConfig,
+  cacheNetworkLog,
+  cacheConsoleLog,
+  currentConsoleType,
+  currentNetworkType,
+  currentNetworkSort,
+  currentTransferType,
+  currentTransferCategory,
+  currentWebSocketType,
+  searchConsole,
+  searchNetwork,
+  searchTransfer,
+  searchWs,
+  searchRoute,
+  searchStorage,
+  useTransition,
+  baseFontSize,
+  tagFontSize,
+  tipsFontSize,
+  fontFamily,
+  fontWeight,
+  performanceVisible,
+  performanceShowFps,
+  performanceShowCpu,
+  isFullScreen,
+  windowX,
+  windowY,
+  windowWidth,
+  windowHeight,
+} = data;
+
+const draggableRef = ref();
 
 /**
- * 计算 时间轴
- * @param list
- * @param startTime
- * @param endTime
+ * 初始化拖拽
  */
-const calcNetworkTimeline = (
-  list: DevTool.NetworkItem[],
-  startTime: number,
-  endTime: number,
-): DevTool.NetworkItem[] => {
-  const total = endTime - startTime;
-
-  return (
-    list?.map((item) => {
-      const width =
-        (
-          (((item.endTime ?? Date.now()) - item.startTime) / total) *
-          100
-        ).toFixed(2) + '%';
-
-      const left =
-        (((item.startTime - startTime) / total) * 100).toFixed(2) + '%';
-
-      return {
-        ...item,
-        width,
-        left,
-      };
-    }) ?? []
-  );
-};
-/**
- * 禁止在该方法中 禁用调用已拦截的方法，防止递归调用
- * - 禁用 uni.setStorage
- * - 禁用 uni.request
- * - 禁用 uni.upload
- * - 禁用导入的 console
- */
-const listenPostMessage = (data: DevTool.WindowData) => {
-  if (!props.open) return;
-  if (!isActive) return;
-
-  devToolVisible.value = data.devToolVisible ?? false;
-
-  cacheInterceptConfig.value = data.cacheInterceptConfig ?? false;
-
-  if (data.consoleList) {
-    consoleList.value = [...(data.consoleList ?? [])]
-      .filter((item) => {
-        if (currentConsoleType.value === 'all') return item;
-        if (currentConsoleType.value !== 'clear') {
-          return item.type === currentConsoleType.value;
-        }
-        return item;
-      })
-      .filter((item) => {
-        return (
-          item.args?.some(
-            (arg) =>
-              arg.type === 'string' &&
-              arg.value?.includes?.(searchConsole.value),
-          ) ||
-          item.position.includes(searchConsole.value) ||
-          item?.stack?.includes(searchConsole.value)
-        );
-      })
-      ?.map((item) => {
-        return {
-          ...item,
-          position: hightLight(item.position, searchConsole.value),
-          stack: hightLight(item.stack, searchConsole.value),
-          args: item.args.map((arg) => {
-            if (arg.type === 'string') {
-              return {
-                type: 'string',
-                value: hightLight(arg.value, searchConsole.value),
-              };
-            }
-            return arg;
-          }),
-        };
-      });
-
-    backup.consoleList = [...data.consoleList];
-  }
-
-  if (data.networkList) {
-    const { startTime, endTime } = calcLineStartAndEnd(data.networkList);
-
-    const list = calcNetworkTimeline(data.networkList, startTime, endTime);
-
-    networkList.value = list
-      .filter((item) => {
-        if (currentNetworkType.value === 'all') return item;
-        if (currentNetworkType.value !== 'clear') {
-          return item.method === currentNetworkType.value;
-        }
-        return item;
-      })
-      ?.filter((item) => item?.url?.includes(searchNetwork.value))
-      ?.map((item) => {
-        return {
-          ...item,
-          url: hightLight(item.url, searchNetwork.value),
-        };
-      })
-      ?.sort((a, b) => {
-        if (currentNetworkSort.value === 1) {
-          return b.startTime - a.startTime;
-        } else {
-          return a.startTime - b.startTime;
-        }
-      });
-
-    backup.networkList = [...data.networkList];
-  }
-
-  if (data.uploadList) {
-    uploadList.value = [...(data.uploadList ?? [])]
-      .filter((item) => {
-        if (currentUploadType.value === 'all') return item;
-        if (currentUploadType.value !== 'clear') {
-          return item.status === currentUploadType.value;
-        }
-        return item;
-      })
-      .filter((item) => {
-        return item.url?.includes(searchUpload.value);
-      })
-      ?.map((item) => {
-        return {
-          ...item,
-          url: hightLight(item.url, searchUpload.value),
-        };
-      });
-    backup.uploadList = [...data.uploadList];
-  }
-
-  if (data.storageList) {
-    storageList.value = [...(data.storageList ?? [])]
-      ?.filter((item) => item._oldKey.includes(searchStorage.value))
-      ?.map((item) => {
-        return {
-          ...item,
-          _oldKey: hightLight(item._oldKey, searchStorage.value),
-        };
-      });
-    backup.storageList = [...data.storageList];
-  }
-
-  if (data.wsList) {
-    wsList.value = [...(data.wsList ?? [])]
-      .filter((item) => {
-        if (currentWebSocketType.value === 'all') return item;
-        return item.readyState === currentWebSocketType.value;
-      })
-      .filter((item) => item.url.includes(searchWs.value))
-      ?.map((item) => {
-        return {
-          ...item,
-          url: hightLight(item.url, searchWs.value),
-        };
-      });
-    backup.wsList = [...data.wsList];
-  }
-
-  if (data.routeList) {
-    routeList.value = [...(data.routeList ?? [])]
-      ?.filter(
-        (item) =>
-          item.path.includes(searchRoute.value) ||
-          item.name?.includes(searchRoute.value),
-      )
-      ?.map((item) => {
-        return {
-          ...item,
-          name: hightLight(item.name, searchRoute.value),
-          path: hightLight(item.path, searchRoute.value),
-        };
-      });
-    backup.routeList = [...data.routeList];
-  }
-
-  if (data.elEventList) {
-    elEventList.value = [...data.elEventList];
-  }
-
-  if (data.uniEventList) {
-    uniEventList.value = [...data.uniEventList];
-  }
-
-  if (data.eventCount) {
-    eventCount.value = { ...data.eventCount };
-  }
-
-  if (data.vuexList) {
-    vuexList.value = data.vuexList;
-  }
-
-  if (data.piniaList) {
-    piniaList.value = data.piniaList;
-  }
-
-  if (data.netWorkStatus) {
-    netWorkStatus.value = data.netWorkStatus;
-  }
-
-  if (data.sizeFormat) {
-    sizeFormat.value = data.sizeFormat;
-  }
-
-  if (data.screenList) {
-    screenList.value = [...data.screenList];
-  }
-
-  if (data.interceptNetworkMap) {
-    interceptNetworkList.value = Array.from(data.interceptNetworkMap.values());
-  }
-
-  if (data.devToolVersion || data.devToolBuildTime || data.devToolGit) {
-    Object.assign(buildInfo, {
-      devToolVersion: data.devToolVersion,
-      devToolBuildTime: data.devToolBuildTime,
-      devToolGit: data.devToolGit,
-    });
-  }
-
-  if (data.scanCodeList) {
-    scanCodeList.value = [...data.scanCodeList];
-  }
-
-  if (data.nfcList) {
-    nfcList.value = [...data.nfcList];
-  }
-};
-
-let isActive = false;
-onMounted(() => {
-  const devToolInfo = getDevToolInfo();
-
-  if (devToolInfo) {
-    currentConsoleType.value = devToolInfo?.currentConsoleType || 'all';
-    currentNetworkType.value = devToolInfo?.currentNetworkType || 'all';
-    tabScrollLeft.value = devToolInfo?.tabScrollLeft || 0;
-    theme.value = devToolInfo?.theme || 'light';
-
-    // 延迟设置，避免页面加载时
-    // TypeError: Cannot read properties of null (reading 'scrollHeight')
-    nextTick(() => {
-      activeTab.value = devToolInfo?.activeTab || 0;
-    });
-  }
-  if (props.data) {
-    listenPostMessage(props.data);
-  }
-
-  if (uni.onThemeChange) {
-    uni.onThemeChange((res) => {
-      theme.value = res.theme;
-    });
-  }
-});
-
-onBeforeMount(() => {
-  isActive = true;
-  devToolEventBus?.on(DEV_APP_MESSAGE, listenPostMessage);
-});
-onUnmounted(() => {
-  isActive = false;
-  devToolEventBus?.off(DEV_APP_MESSAGE, listenPostMessage);
-});
-
-onShow(() => {
-  isActive = true;
-
-  // H5 APP-PLUS 已经被uni.navigateBack 监听，所以这里只有微信用 onShow 模拟
-  // 微信小程序 onBackPress 不知道为什么不能触发，临时用 onShow 模拟
-  // #ifdef MP-WEIXIN
-  const path = getCurrentPagePath();
-  basicSendMessage({
-    type: DEV_BOTTOM_TAB_CHANGE,
-    data: { path },
-  });
-  // #endif
-});
-
-// H5 APP-PLUS 已经被uni.switchTab 监听，所以这里只有微信小程序 监听
-// 微信小程序，支付宝 小程序 底部tab切换  switchTab 无法监听到，需要实现该事件进行监听
-
-onTabItemTap((option) => {
-  isActive &&
-    basicSendMessage({
-      type: DEV_BOTTOM_TAB_CHANGE,
-      data: { path: option.pagePath },
-    });
-});
-
-// onHide(() => {
-//   isActive = false;
-
-//   setDevToolInfo({
-//     devToolWindowVisible: false,
-//   });
-// });
-
-/** 发送消息给 uniapp */
-function basicSendMessage(message: {
-  type: string;
-  data: Record<string, any>;
-}) {
-  emits('sendMessage', message);
+function onInitDrag(e: MouseEvent | TouchEvent) {
+  draggableRef.value?.initDrag(e);
 }
 
-function setWindowInfo() {
-  setDevToolInfo({
-    activeTab: activeTab.value,
-    currentConsoleType: currentConsoleType.value,
-    currentNetworkType: currentNetworkType.value,
-    currentWebSocketType: currentWebSocketType.value,
-    tabScrollLeft: tabScrollLeft.value,
-    cacheInterceptConfig: cacheInterceptConfig.value,
-    interceptNetworkList: interceptNetworkList.value,
-  });
+function toggleFullScreen() {
+  isFullScreen.value = !isFullScreen.value;
+  saveSettings();
 }
 
-const debounceSetWindowInfo = debounce(setWindowInfo, 200);
-
-function onCloseWindow() {
-  emits('close');
-  setWindowInfo();
-}
-function onChangeTabs() {
-  setWindowInfo();
-}
-
-function onChangeSwiper({
-  detail,
-}: {
-  detail: { current: number; source: any };
+function onWindowChange(detail: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
 }) {
-  activeTab.value = detail.current;
-  setWindowInfo();
-}
-
-function onScrollTabs(e: any) {
-  tabScrollLeft.value = e.detail.scrollLeft;
-  debounceSetWindowInfo();
-}
-
-const debounceScrollTabs = debounce(onScrollTabs, 200);
-
-function onConsoleChoose(
-  type: 'all' | 'log' | 'info' | 'warn' | 'error' | 'clear',
-) {
-  if (type === 'clear') {
-    consoleList.value = [];
-    backup.consoleList = [];
-    basicSendMessage({
-      type: DEV_CONSOLE_CLEAR,
-      data: {},
-    });
-    return;
-  } else if (type === 'all') {
-    currentConsoleType.value = type;
-    consoleList.value = backup.consoleList;
-  } else {
-    currentConsoleType.value = type;
-    consoleList.value = backup.consoleList.filter((item) => item.type === type);
-  }
-  setWindowInfo();
+  windowX.value = detail.x;
+  windowY.value = detail.y;
+  windowWidth.value = detail.width;
+  windowHeight.value = detail.height;
+  saveSettings();
 }
 
-function onRunJS(code: string) {
-  basicSendMessage({
-    type: DEV_RUN_JS,
-    data: {
-      code,
+function saveSettings() {
+  setDevToolInfo({
+    windowSettings: {
+      isFullScreen: isFullScreen.value,
+      x: windowX.value,
+      y: windowY.value,
+      width: windowWidth.value,
+      height: windowHeight.value,
     },
   });
 }
 
-function onSearchConsole(value: string) {
-  consoleList.value = backup.consoleList
-    .filter((item) => {
-      return (
-        item.args.some(
-          (arg) => arg.type === 'string' && arg.value.includes(value),
-        ) ||
-        item.position.includes(value) ||
-        item?.stack?.includes(value)
-      );
-    })
-    ?.map((item) => {
-      return {
-        ...item,
-        position: hightLight(item.position, searchConsole.value),
-        stack: hightLight(item.stack, searchConsole.value),
-        args: item.args.map((arg) => {
-          if (arg.type === 'string') {
-            return {
-              type: 'string',
-              value: hightLight(arg.value, value),
-            };
-          }
-          return arg;
-        }),
-      };
-    });
-}
-
-function onNetworkChoose(type: string) {
-  if (type === 'clear') {
-    networkList.value = [];
-    backup.networkList = [];
-    basicSendMessage({
-      type: DEV_NETWORK_CLEAR,
-      data: {},
-    });
-    return;
-  } else if (type === 'all') {
-    currentNetworkType.value = type;
-    networkList.value = backup.networkList;
-  } else if (type === 'error') {
-    currentNetworkType.value = type;
-    networkList.value = backup.networkList.filter((item) => {
-      return item.status === 'error' || /[4,5]\d{2,}/.test(item.status + '');
-    });
-  } else {
-    currentNetworkType.value = type;
-    networkList.value = backup.networkList.filter(
-      (item) => item.method === type,
-    );
-  }
+const dynamicContentHeight = computed(() => {
+  if (isFullScreen.value) return props.contentHeight;
+  return windowHeight.value - 32;
+});
 
-  setWindowInfo();
-}
+const dynamicWindowStyle = computed(() => {
+  if (isFullScreen.value) return props.customStyle;
+  return {
+    width: '100%',
+    height: '100%',
+    paddingTop: 0,
+    paddingBottom: 0,
+  };
+});
 
-function onSearchNetwork(value: string) {
-  networkList.value = backup.networkList
-    .filter((item) => {
-      if (currentNetworkType.value === 'all') return item;
-      if (currentNetworkType.value !== 'clear') {
-        return item.method === currentNetworkType.value;
-      }
-      return item;
-    })
-    ?.filter((item) => item?.url?.includes(value))
-    ?.map((item) => {
-      return {
-        ...item,
-        url: hightLight(item.url, value),
-      };
-    });
-}
+const {
+  onCloseWindow,
+  onChangeTabs,
+  debounceScrollTabs,
+  onConsoleChoose,
+  onRunJS,
+  onSearchConsole,
+  onNetworkChoose,
+  onSearchNetwork,
+  onSortNetwork,
+  onTransferChoose,
+  onSearchTransfer,
+  onWebSocketChoose,
+  onSearchWs,
+  onStorageChoose,
+  onStorageRemove,
+  onChangeStorage,
+  onSearchStorage,
+  onElEventClear,
+  onUniEventClear,
+  onCaptureScreenClear,
+  onScanCodeListClear,
+  onNfcClear,
+  onRouteRefresh,
+  onSearchRoute,
+  onShowDevButton,
+  onRestartDevTool,
+  onRestartApp,
+  onExportLog,
+  onScreenshot,
+  onClearCache,
+  onDestroyDevTool,
+  onChangeTheme,
+  onChangeCacheInterceptConfig,
+  onChangeCacheNetworkLog,
+  onChangeCacheConsoleLog,
+  onChangeVuex,
+  onChangePinia,
+  onClearWebSocketMessage,
+  onSendWebSocket,
+  onConfirmInterceptConfig,
+  onRemoveInterceptConfig,
+  onChangeUseTransition,
+  onChangeFontSize,
+  onChangePerformance,
+  onChangePerformanceShowFps,
+  onChangePerformanceShowCpu,
+  basicSendMessage,
+} = handlers;
 
 /**
- * 排序
- * @param sort -1 降序 1 升序
+ * 更新窗口 X 坐标
  */
-function onSortNetwork(sort: -1 | 1) {
-  currentNetworkSort.value = sort;
-
-  const list = networkList.value.sort((a, b) => {
-    if (sort === 1) {
-      return b.startTime - a.startTime;
-    } else {
-      return a.startTime - b.startTime;
-    }
-  });
-  networkList.value = [...list];
-}
-
-function onUploadChoose(type: string) {
-  if (type === 'clear') {
-    uploadList.value = [];
-    backup.uploadList = [];
-    basicSendMessage({
-      type: DEV_UPLOAD_CLEAR,
-      data: {},
-    });
-    return;
-  } else if (type === 'all') {
-    currentUploadType.value = type;
-    uploadList.value = backup.uploadList;
-  } else {
-    currentUploadType.value = type;
-    uploadList.value = backup.uploadList.filter((item) => item.status === type);
-  }
-}
-
-function onSearchUpload(value: string) {
-  uploadList.value = backup.uploadList
-    .filter((item) => {
-      if (currentUploadType.value === 'all') return item;
-      if (currentUploadType.value !== 'clear') {
-        return item.status === currentUploadType.value;
-      }
-      return item;
-    })
-    .filter((item) => {
-      return item.url?.includes(value);
-    })
-    ?.map((item) => {
-      return {
-        ...item,
-        url: hightLight(item.url, value),
-      };
-    });
-}
-
-function onWebSocketChoose(type: string) {
-  if (type === 'clear') {
-    wsList.value = [];
-    backup.wsList = [];
-    basicSendMessage({
-      type: DEV_WEBSOCKET_CLEAR,
-      data: {},
-    });
-    return;
-  } else if (type === 'all') {
-    currentWebSocketType.value = type;
-    wsList.value = backup.wsList;
-  } else {
-    currentWebSocketType.value = type;
-    wsList.value = backup.wsList.filter((item) => item.readyState === type);
-  }
-  setWindowInfo();
-}
-
-function onSearchWs(value: string) {
-  wsList.value = backup.wsList
-    .filter((item) => {
-      if (currentWebSocketType.value === 'all') return item;
-      return item.readyState === currentWebSocketType.value;
-    })
-    .filter((item) => item.url.includes(value))
-    ?.map((item) => {
-      return {
-        ...item,
-        url: hightLight(item.url, value),
-      };
-    });
+function onUpdateWindowX(val: number) {
+  windowX.value = val;
 }
 
-function onStorageChoose(type: string) {
-  if (type === 'clear') {
-    backup.storageList = [];
-    storageList.value = [];
-    basicSendMessage({
-      type: DEV_STORAGE_CLEAR,
-      data: {},
-    });
-  } else if (type === 'refresh') {
-    basicSendMessage({
-      type: DEV_STORAGE_REFRESH,
-      data: {},
-    });
-  } else if (type === 'add') {
-    const key = '_new_' + Date.now();
-    const newItem = {
-      key,
-      _oldKey: key,
-      value: JSON.stringify(''),
-    };
-    backup.storageList.unshift(newItem);
-    storageList.value.unshift(newItem);
-    basicSendMessage({
-      type: DEV_STORAGE_ADD,
-      data: {
-        key,
-        value: JSON.stringify(''),
-      },
-    });
-  }
-}
-
-function onStorageRemove(key: string) {
-  backup.storageList = backup.storageList.filter((item) => item.key !== key);
-  storageList.value = backup.storageList;
-  basicSendMessage({
-    type: DEV_STORAGE_REMOVE,
-    data: { key },
-  });
-}
-
-function onChangeStorage(data: DevTool.StorageItem) {
-  basicSendMessage({
-    type: DEV_STORAGE_UPDATE,
-    data,
-  });
-}
-
-function onSearchStorage(value: string) {
-  storageList.value = backup.storageList
-    .filter((item) => item._oldKey.includes(value))
-    ?.map((item) => {
-      return {
-        ...item,
-        _oldKey: hightLight(item._oldKey, value),
-      };
-    });
-}
-
-function onElEventClear() {
-  elEventList.value = [];
-  basicSendMessage({
-    type: DEV_EL_EVENT_CLEAR,
-    data: {},
-  });
+/**
+ * 更新窗口 Y 坐标
+ */
+function onUpdateWindowY(val: number) {
+  windowY.value = val;
 }
 
-function onUniEventClear() {
-  uniEventList.value = [];
-  eventCount.value = {
-    on: 0,
-    once: 0,
-    emit: 0,
-    off: 0,
-  };
-  basicSendMessage({
-    type: DEV_UNI_EVENT_CLEAR,
-    data: {},
-  });
+/**
+ * 更新窗口宽度
+ */
+function onUpdateWindowWidth(val: number) {
+  windowWidth.value = val;
 }
 
-function onCaptureScreenClear() {
-  screenList.value = [];
-  basicSendMessage({
-    type: DEV_CAPTURE_SCREEN_CLEAR,
-    data: {},
-  });
+/**
+ * 更新窗口高度
+ */
+function onUpdateWindowHeight(val: number) {
+  windowHeight.value = val;
 }
 
-function onScanCodeListClear() {
-  scanCodeList.value = [];
-  basicSendMessage({
-    type: DEV_SCAN_CODE_CLEAR,
-    data: {},
-  });
+/**
+ * 更新控制台搜索关键词
+ */
+function onUpdateSearchConsole(val: string) {
+  searchConsole.value = val;
 }
 
-function onNfcClear() {
-  scanCodeList.value = [];
-  basicSendMessage({
-    type: DEV_NFC_CLEAR,
-    data: {},
-  });
+/**
+ * 更新网络请求搜索关键词
+ */
+function onUpdateSearchNetwork(val: string) {
+  searchNetwork.value = val;
 }
 
-function onRouteRefresh() {
-  basicSendMessage({
-    type: DEV_ROUTE_REFRESH,
-    data: {},
-  });
+/**
+ * 更新文件传输搜索关键词
+ */
+function onUpdateSearchTransfer(val: string) {
+  searchTransfer.value = val;
 }
 
-function onSearchRoute(value: string) {
-  routeList.value = backup.routeList
-    ?.filter((item) => item.path.includes(value) || item.name?.includes(value))
-    ?.map((item) => {
-      return {
-        ...item,
-        name: hightLight(item.name, searchRoute.value),
-        path: hightLight(item.path, searchRoute.value),
-      };
-    });
+/**
+ * 更新 WebSocket 搜索关键词
+ */
+function onUpdateSearchWs(val: string) {
+  searchWs.value = val;
 }
 
-function onShowDevButton(show: boolean) {
-  basicSendMessage({
-    type: DEV_BUTTON_SHOW_OR_HIDE,
-    data: {
-      show,
-    },
-  });
+/**
+ * 更新路由搜索关键词
+ */
+function onUpdateSearchRoute(val: string) {
+  searchRoute.value = val;
 }
 
-function onRestartDevTool() {
-  basicSendMessage({
-    type: DEV_RESTART_DEBUGGER,
-    data: {},
-  });
+/**
+ * 更新本地存储搜索关键词
+ */
+function onUpdateSearchStorage(val: string) {
+  searchStorage.value = val;
 }
 
-function onRestartApp() {
-  basicSendMessage({
-    type: DEV_RESTART_APP,
-    data: {},
-  });
+/**
+ * 更新本地存储列表
+ */
+function onUpdateStorageList(val: DevTool.StorageItem[]) {
+  storageList.value = val;
 }
 
-function onExportLog(exports: {
-  exportLog: boolean;
-  exportNetwork: boolean;
-  exportStorage: boolean;
-}) {
-  basicSendMessage({
-    type: DEV_EXPORT_LOG,
-    data: {
-      ...exports,
-    },
-  });
+/**
+ * 更新 Vuex 数据
+ */
+function onUpdateVuexList(val: Record<string, any>) {
+  vuexList.value = val;
 }
 
-function onScreenshot() {
-  basicSendMessage({
-    type: 'dev-tool-hide-screenshot',
-    data: {},
-  });
+/**
+ * 更新 Pinia 数据
+ */
+function onUpdatePiniaList(val: Record<string, any>) {
+  piniaList.value = val;
 }
 
-function onClearCache() {
-  basicSendMessage({
-    type: DEV_LOG_CACHE_CLEAR,
-    data: {},
-  });
-}
+const currentWebSocket = computed(() => {
+  return wsList.value.find((item) => item.url === overlay.webSocket.url);
+});
 
-function onDestroyDevTool() {
-  basicSendMessage({
-    type: DEV_DESTROY,
-    data: {},
-  });
-}
+// 记录上一个 Tab，用于平滑卸载
+const lastActiveTab = ref(activeTab.value);
+const isReady = ref(props.open);
 
-function onChangeTheme(t: string) {
-  theme.value = t;
+watch(
+  () => props.open,
+  (val) => {
+    // 如果没有开启过渡动画，直接设置为 ready
+    if (val && !useTransition.value) {
+      isReady.value = true;
+    }
+    // 每次窗口打开时重新读取 hiddenTabs 配置
+    if (val) {
+      const devToolInfo = getDevToolInfo();
+      hiddenTabs.value = devToolInfo?.hiddenTabs || [];
+    }
+  },
+  { immediate: true },
+);
 
-  setDevToolInfo({
-    theme: t,
-  });
+function onAfterEnter() {
+  isReady.value = true;
 }
 
-function onChangeCacheInterceptConfig(value: boolean) {
-  setDevToolInfo({
-    cacheInterceptConfig: value,
-    interceptNetworkList: value ? interceptNetworkList.value : [],
-  });
-
-  basicSendMessage({
-    type: DEV_CHANGE_CACHE_INTERCEPT_CONFIG,
-    data: {
-      cacheInterceptConfig: value,
-    },
-  });
+function onAfterLeave() {
+  isReady.value = false;
 }
 
-function onChangeVuex(value: Record<string, any>) {
-  basicSendMessage({
-    type: DEV_VUEX_CHANGE,
-    data: value,
-  });
-}
+watch(activeTab, (val, oldVal) => {
+  if (val !== oldVal) {
+    lastActiveTab.value = oldVal;
+  }
+});
 
-function onChangePinia(value: Record<string, any>) {
-  basicSendMessage({
-    type: DEV_PINIA_CHANGE,
-    data: value,
-  });
+function isTabVisible(key: string) {
+  return !hiddenTabs.value.includes(key);
 }
 
-function onCloseCode() {
-  openCode.value = false;
-  stack.value = '';
+function swiperShow(index: number) {
+  if (!isReady.value) return false;
+  const currentTab = tabItems.value[activeTab.value];
+  return currentTab && currentTab.index === index;
 }
-function onOpenCode(value?: string) {
-  if (!value) return;
 
-  stack.value = value;
-
-  const isWXLink = isMockWX(value ?? '') || props.mode !== 'development';
-  const isUseDevSource = !isWXLink && props.useDevSource;
-
-  if (isWXLink) {
-    uni.showToast({
-      icon: 'none',
-      title: '[DevTool] 请在小程序真机调试模式下查看源码',
+onMounted(() => {
+  const devToolInfo = getDevToolInfo();
+  if (devToolInfo) {
+    currentConsoleType.value = devToolInfo?.currentConsoleType || 'all';
+    currentNetworkType.value = devToolInfo?.currentNetworkType || 'all';
+    theme.value = devToolInfo?.theme || 'light';
+    cacheInterceptConfig.value =
+      devToolInfo?.cacheInterceptConfig !== undefined
+        ? devToolInfo.cacheInterceptConfig
+        : true;
+    cacheNetworkLog.value = devToolInfo?.cacheNetworkLog || false;
+    cacheConsoleLog.value = devToolInfo?.cacheConsoleLog || false;
+    useTransition.value =
+      devToolInfo?.useTransition !== undefined
+        ? devToolInfo.useTransition
+        : true;
+    baseFontSize.value = devToolInfo?.baseFontSize || 12;
+    tagFontSize.value = devToolInfo?.tagFontSize || 10;
+    tipsFontSize.value = devToolInfo?.tipsFontSize || 10;
+    fontFamily.value = devToolInfo?.fontFamily || '';
+    fontWeight.value = devToolInfo?.fontWeight || 'normal';
+    hiddenTabs.value = devToolInfo?.hiddenTabs || [
+      'Performance',
+      'CaptureScreen',
+      'ScanCode',
+      'NFC',
+      'ElEvent',
+      'UniEvent',
+    ];
+
+    // 延迟恢复滚动位置，确保布局已渲染
+    setTimeout(() => {
+      tabScrollLeft.value = devToolInfo?.tabScrollLeft || 0;
+      nextTick(() => {
+        // 确保恢复的索引在当前可见 Tab 的范围内
+        const savedTab = devToolInfo?.activeTab || 0;
+        activeTab.value = savedTab < tabItems.value.length ? savedTab : 0;
+      });
+    }, 150);
+
+    if (devToolInfo.windowSettings) {
+      isFullScreen.value = devToolInfo.windowSettings.isFullScreen ?? true;
+      windowX.value = devToolInfo.windowSettings.x ?? 10;
+      windowY.value = devToolInfo.windowSettings.y ?? 100;
+      windowWidth.value = devToolInfo.windowSettings.width ?? 375;
+      windowHeight.value = devToolInfo.windowSettings.height ?? 450;
+    }
+  }
+  if (props.data) {
+    data.listenPostMessage(props.data);
+  }
+  if (uni.onThemeChange) {
+    uni.onThemeChange((res) => {
+      theme.value = res.theme;
     });
-    return;
   }
+});
 
-  if (!isUseDevSource) {
+/**
+ * 处理来自核心模块的消息
+ */
+function handleCoreMessage(msg: any) {
+  let type, msgData;
+  try {
+    const payload = typeof msg === 'string' ? JSON.parse(msg) : msg;
+    type = payload.type;
+    msgData = payload.data;
+  } catch (e) {
+    console.error('DevToolWindow parse error', e);
     return;
   }
 
-  if (isAndroid()) {
-    if (props.sourceFileServers && props.sourceFileServers?.length > 0) {
-      openCode.value = true;
-    } else {
-      uni.showToast({
-        icon: 'none',
-        title: '[DevTool] sourceFileServers 配置异常',
-      });
-      console?.warn('[DevTool] sourceFileServers 配置异常');
-    }
-  } else {
-    openCode.value = true;
+  if (type === MSG_TYPE.DATA_UPDATE) {
+    data.listenPostMessage(msgData);
   }
 }
 
-function onCloseJson() {
-  showJsonDetail.value = false;
-  jsonData.value = {};
-}
-function onOpenJson(data: { title: string; data: Record<string, any> }) {
-  showJsonDetail.value = true;
-  jsonData.value = data;
-}
-
-function onOpenNfcTool() {
-  showNfcTool.value = true;
-}
-function onCloseNfcTool() {
-  showNfcTool.value = false;
-}
-
-function onOpenNetworkDetail(ni?: DevTool.NetworkItem) {
-  Object.assign(network, emptyNetwork);
-  Object.assign(network, ni);
-  showNetworkDetail.value = true;
-}
-function onCloseNetworkDetail() {
-  showNetworkDetail.value = false;
-}
-
-function onOpenNetworkSend(ni?: DevTool.NetworkItem) {
-  Object.assign(network, emptyNetwork);
-  Object.assign(network, ni);
-  showNetworkSend.value = true;
-}
-function onCloseNetworkSend() {
-  showNetworkSend.value = false;
-}
-
-function onOpenNetworkIntercept() {
-  showNetworkIntercept.value = true;
-}
-function onCloseNetworkIntercept() {
-  showNetworkIntercept.value = false;
-}
-
-function onOpenInterceptConfig(ni?: DevTool.NetworkItem) {
-  Object.assign(network, emptyNetwork);
-
-  ni && Object.assign(network, ni);
-
-  showInterceptConfig.value = true;
-}
-
-function onCloseInterceptConfig() {
-  showInterceptConfig.value = false;
-}
-
-function onRemoveInterceptConfig(ni: DevTool.NetworkItem) {
-  basicSendMessage({
-    type: DEV_INTERCEPT_NETWORK_REMOVE,
-    data: ni,
-  });
-}
-
-function onConfirmInterceptConfig(ni: DevTool.NetworkItem) {
-  const index = interceptNetworkList.value.findIndex((item) => {
-    const key = `${item.method?.toUpperCase()}|${item.url?.split('?')[0]}`;
-    const niKey = `${ni.method?.toUpperCase()}|${ni.url?.split('?')[0]}`;
-    return key === niKey;
-  });
-  const list = [...interceptNetworkList.value];
+onBeforeMount(() => {
+  data.setIsActive(true);
+  uni.$on(DEV_CORE_MESSAGE, handleCoreMessage);
+});
 
-  if (index > -1) {
-    list[index] = ni;
-  } else {
-    list.unshift(ni);
-  }
+onUnmounted(() => {
+  uni.$off(DEV_CORE_MESSAGE, handleCoreMessage);
+});
 
-  setDevToolInfo({
-    cacheInterceptConfig: cacheInterceptConfig.value,
-    interceptNetworkList: cacheInterceptConfig.value ? list : [],
-  });
+onShow(() => {
+  // #ifdef MP-WEIXIN
   basicSendMessage({
-    type: DEV_INTERCEPT_NETWORK_UPDATE,
-    data: [ni],
-  });
-}
-
-function onOpenUploadDetail(up?: DevTool.UploadItem) {
-  Object.assign(upload, up);
-  showUploadDetail.value = true;
-}
-
-function onCloseUploadDetail() {
-  showUploadDetail.value = false;
-}
-
-function onOpenWebSocketDetail(ws?: DevTool.WS) {
-  Object.assign(webSocket, ws);
-
-  nextTick(() => {
-    if (currentWebSocket.value) {
-      showWebSocketDetail.value = true;
-    } else {
-      //
-    }
+    type: CMD_TYPE.TAB_CHANGE,
+    data: { path: getCurrentPagePath() },
   });
-}
-
-function onCloseWebSocketDetail() {
-  showWebSocketDetail.value = false;
-}
+  // #endif
+});
 
-function onClearWebSocketMessage(ws: DevTool.WS) {
+onTabItemTap((option) => {
   basicSendMessage({
-    type: DEV_WEBSOCKET_CLEAR_MESSAGE,
-    data: ws,
+    type: CMD_TYPE.TAB_CHANGE,
+    data: { path: option.pagePath },
   });
-}
-
-//  防止滚动穿透
-function onTouchMove(e: TouchEvent) {
-  /* #ifdef H5 */
-
-  // 为了防止滚动穿透 浏览器抛出错误
-  // [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
-  // 在需要滑动的容器上加入 @touchmove.stop
-  e.preventDefault();
-
-  e.stopPropagation();
-  /* #endif */
-}
-
-function onWheel(e: WheelEvent) {
-  /* #ifdef H5 */
-
-  e.preventDefault();
-
-  e.stopPropagation();
-  /* #endif */
-}
+});
 </script>
-
 <style scoped>
 .dev-tool-window {
-  --dev-tool-main-color: #9254de;
-
-  --dev-tool-warn-color: #ffa940;
-  --dev-tool-warn-bg-color: rgba(247, 214, 114, 0.2);
-  --dev-tool-error-color: #ff4d4f;
-  --dev-tool-error-bg-color: rgba(251, 183, 185, 0.2);
-  --dev-tool-success-color: #bae637;
-  --dev-tool-success-bg-color: #fcffe6;
-
-  --dev-tool-base-font-size: 12px;
-  --dev-tool-tag-font-size: 10px;
-  --dev-tool-tips-font-size: 10px;
-
-  --dev-tool-text-color-placeholder: #909090;
-
-  --dev-tool-active-bg-color: rgba(0, 0, 0, 0.05);
-
-  -webkit-tap-highlight-color: transparent;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 998;
-  /* #ifdef H5 || APP-PLUS */
-  /* padding: 50px 0; */
-  /* #endif */
-
-  width: 100vw;
-  height: 100vh;
-  font-size: 14px;
+  position: relative;
+  width: 100%;
+  height: 100%;
   color: var(--dev-tool-text-color);
   box-sizing: border-box;
-  transition: color 0.3s;
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  pointer-events: auto;
 }
 
-.dev-tool-window-light {
-  --dev-tool-bg-color: rgba(255, 255, 255, 0.8);
-  --dev-tool-bg2-color: rgba(255, 255, 255, 0.95);
-  --dev-tool-bg3-color: rgba(255, 255, 255, 0.999);
-
-  --dev-tool-text-color: #000;
-
-  --dev-tool-border-color: #f0f0f0;
-  --dev-tool-info-color: #9c9c9c;
-  --dev-tool-log-color: #f9f9f9;
-  --dev-tool-nil-color: #020201;
-  --dev-tool-number-color: #1d8ce0;
-  --dev-tool-boolean-color: #1d8ce0;
-  --dev-tool-symbol-color: bisque;
-  --dev-tool-active-bg-color: #f0f0f0;
-  --dev-tool-time-line-color: #9254de;
-
-  --dev-tool-note-color: #9c9c9c;
-
-  --dev-tool-keyword-color: #9254de;
-  --dev-tool-bracket-color: #9c9c9c;
-  --dev-tool-quotation-color: #91e76a;
-  --dev-tool-string-color: #91e76a;
-  --dev-tool-function-color: #1d8ce0;
-  --dev-tool-attribute-color: #ef66ba;
-  --dev-tool-operator-color: #50d3eb;
+.is-window {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
+  border: 1px solid var(--dev-tool-border-color);
 }
-.dev-tool-window-dark {
-  --dev-tool-bg-color: rgba(0, 0, 0, 0.8);
-  --dev-tool-bg2-color: rgba(43, 43, 43, 0.8);
-  --dev-tool-bg3-color: rgba(43, 43, 43, 0.999);
 
-  --dev-tool-text-color: #fff;
-  --dev-tool-border-color: #3d3d3d;
+.is-window .dev-tool-window-bg {
+  border-radius: 12px;
+}
 
-  --dev-tool-log-color: #f9f9f9;
-  --dev-tool-active-bg-color: #3d3d3d;
+.is-full-screen {
+  border-radius: 0;
+}
 
-  --dev-tool-time-line-color: #f9f9f9;
+.window-header {
+  width: 100%;
+  cursor: move;
+  display: flex;
+  flex-direction: column;
+}
 
-  --dev-tool-note-color: #9c9c9c;
+.drag-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 6px;
+  padding-top: 4px;
+}
 
-  --dev-tool-keyword-color: #9254de;
-  --dev-tool-bracket-color: #9c9c9c;
-  --dev-tool-quotation-color: #91e76a;
-  --dev-tool-string-color: #91e76a;
-  --dev-tool-function-color: #1d8ce0;
-  --dev-tool-attribute-color: #ef66ba;
-  --dev-tool-operator-color: #50d3eb;
+.drag-indicator::after {
+  content: '';
+  width: 32px;
+  height: 4px;
+  background-color: var(--dev-tool-text-color);
+  border-radius: 2px;
+  opacity: 0.15;
 }
 
 .dev-tool-window-bg {
@@ -1574,39 +939,24 @@ function onWheel(e: WheelEvent) {
   z-index: -1;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--dev-tool-bg-color);
+  width: 100%;
+  height: 100%;
+  background-color: var(--dev-tool-bg3-color);
   backdrop-filter: blur(6px);
-  transition: background-color 0.3s;
+  transition: all 0.3s;
 }
+
 .dev-tool-window-container {
   height: calc(100% - 32px);
-  overflow: auto;
+  overflow: hidden;
+  position: relative;
 }
 
-/* #ifdef H5 || APP-PLUS */
-.dev-tool-window-container ::-webkit-scrollbar {
-  display: none;
-  width: 0;
-  height: 0;
-  background-color: transparent;
-}
-
-.dev-tool-window-container ::-webkit-scrollbar-thumb {
-  width: 0;
-  height: 0;
-  background-color: transparent;
-}
-/* #endif  */
-
 .dev-tool-window::after {
   content: '';
 }
+
 .dev-tool-window ::-webkit-scrollbar {
   display: none;
-  width: 0;
-  height: 0;
-  color: transparent;
 }
 </style>