vite-uni-dev-tool 1.0.0 → 1.2.0

package/dist/v3/{NetworkList → DevTool/components/NetworkList}/NetworkSend.vue

@@ -57,10 +57,7 @@
               :placeholder="t('network.placeholderHeaderValue')"
               :value="item.value"
               @input="onChangeHeader($event, 'value', index)" />
-            <CircularButton
-              style="margin-left: 6px"
-              text="一"
-              @click="onDeleteHeader(item)" />
+            <CircularButton text="一" @click="onDeleteHeader(item)" />
           </view>
         </checkbox-group>
 
@@ -107,10 +104,7 @@
               :placeholder="t('network.placeholderParamValue')"
               :value="item.value"
               @input="onChangeQuery($event, 'value', index)" />
-            <CircularButton
-              text="一"
-              style="margin-left: 6px"
-              @click="onDeleteQuery(item)" />
+            <CircularButton text="一" @click="onDeleteQuery(item)" />
           </view>
         </checkbox-group>
 
@@ -150,11 +144,11 @@
 </template>
 <script lang="ts" setup>
 import { computed, ref, reactive, onMounted } from 'vue';
-import CircularButton from '../CircularButton/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import type { DevTool } from '../../type';
-import { useI18n } from '../../i18n';
-import { getThemeMainColor } from '../styles/theme';
+import type { DevTool } from '../../../../type';
+import { useI18n } from '../../../../i18n';
+import { getThemeMainColor } from '../../../styles/theme';
 const { t } = useI18n();
 const themeColor = computed(() => getThemeMainColor(props.theme));
 
@@ -468,7 +462,7 @@ onMounted(() => {
 }
 
 .network-send-form {
-  height: calc(100% - 32px - 42px);
+  height: calc(100% - 32px - 56px);
   overflow: auto;
 }
 
@@ -481,52 +475,93 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
+.network-send-control:first-child {
+  margin-top: 0;
+}
+
 .radio-group {
   display: flex;
   flex-wrap: wrap;
+  gap: 8px 0; /* Add gap between rows if wrapped */
 }
 
 .radio-group-item {
   display: flex;
   align-items: center;
   width: 25%;
-  margin-bottom: 6px;
+  font-size: 14px;
 }
 
 .network-input {
-  padding: 0 6px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 8px;
   height: 24px;
+  font-size: 14px;
+  border-radius: 4px;
   border: 1px solid var(--dev-tool-border-color);
+  background-color: transparent;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  color: var(--dev-tool-text-color, inherit);
+}
+
+.network-input:focus {
+  border-color: var(--dev-tool-primary-color, #9254de);
+  box-shadow: 0 0 0 2px rgb(146 84 222 / 10%);
 }
 
 .network-textarea {
-  padding: 6px;
+  padding: 8px;
   width: 100%;
   box-sizing: border-box;
-  font-size: 12px;
+  font-size: 14px;
+  border-radius: 4px;
   border: 1px solid var(--dev-tool-border-color);
+  background-color: transparent;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  color: var(--dev-tool-text-color, inherit);
+  min-height: 80px;
+}
+
+.network-textarea:focus {
+  border-color: var(--dev-tool-primary-color, #9254de);
+  box-shadow: 0 0 0 2px rgb(146 84 222 / 10%);
 }
 
 .form-error-message {
-  padding: 0 6px;
+  padding: 4px 6px;
   height: 24px;
   line-height: 24px;
-  color: red;
+  color: #ff4d4f; /* softer red */
+  font-size: 12px;
 }
 
-.network-header-item {
+.network-header-list,
+.network-param-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.network-header-item,
+.network-param-item {
   display: flex;
   align-items: center;
+  gap: 8px;
+}
+
+.network-header-item .network-input,
+.network-param-item .network-input {
+  flex: 1;
+  min-width: 0; /* Prevents flex item from overflowing */
 }
 
 .network-empty {
   color: var(--dev-tool-info-color);
   text-align: center;
-}
-
-.network-param-item {
-  display: flex;
-  align-items: center;
+  padding: 12px 0;
+  font-size: 13px;
 }
 
 .network-body-data-item {
@@ -538,19 +573,17 @@ onMounted(() => {
   position: sticky;
   display: flex;
   justify-content: space-between;
-
-  /* gap: 6px; */
+  gap: 12px;
   width: 100%;
-  margin-top: 12px;
+  margin-top: 16px;
+  padding-bottom: 16px;
   background-color: var(--dev-tool-bg3-color);
 }
 
-.network-send-button {
-  width: 100%;
-  margin-right: 6px;
-}
-
+.network-send-button,
 .network-send-button-last {
-  width: 100%;
+  flex: 1;
+  margin: 0 !important; /* override default margin */
+  border-radius: 6px;
 }
 </style>

package/dist/v3/{NetworkList → DevTool/components/NetworkList}/index.vue

@@ -58,18 +58,18 @@
   </view>
 </template>
 <script lang="ts" setup>
-import Tag from '../Tag/index.vue';
+import Tag from '../../../components/Tag/index.vue';
 import NetworkItem from './NetworkItem.vue';
-import Empty from '../Empty/index.vue';
-import FilterInput from '../FilterInput/index.vue';
-import Pick from '../Pick/index.vue';
-import type { DevTool } from '../../type';
-import VirtualList from '../VirtualList/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
+import Empty from '../../../components/Empty/index.vue';
+import FilterInput from '../../../components/FilterInput/index.vue';
+import Pick from '../../../components/Pick/index.vue';
+import type { DevTool } from '../../../../type';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
 
 import { sortMap } from './const';
-import { useI18n } from '../../i18n';
+import { useI18n } from '../../../../i18n';
 import { computed } from 'vue';
 
 const { t } = useI18n();

package/dist/v3/{Performance → DevTool/components/Performance}/index.vue

@@ -136,14 +136,17 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue';
-import { getDevToolInfo, setDevToolInfo } from '../../modules/devToolInfo';
+import {
+  getDevToolInfo,
+  setDevToolInfo,
+} from '../../../../modules/devToolInfo';
 import PerformanceMetrics from './modules/PerformanceMetrics.vue';
 import { usePerformanceData } from './modules/usePerformanceData';
 import { usePerformanceChart } from './modules/usePerformanceChart';
-import { MSG_TYPE, DEV_CORE_MESSAGE } from '../../const';
+import { MSG_TYPE, DEV_CORE_MESSAGE } from '../../../../const';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import { useI18n } from '../../i18n';
-import { getThemeMainColor } from '../styles/theme';
+import { useI18n } from '../../../../i18n';
+import { getThemeMainColor } from '../../../styles/theme';
 const { t } = useI18n();
 const themeColor = computed(() => getThemeMainColor(props.theme));
 

package/dist/v3/{Performance → DevTool/components/Performance}/modules/PerformanceWidget.vue

@@ -39,14 +39,17 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, getCurrentInstance, ref } from 'vue';
-import DraggableContainer from '../../DraggableContainer/index.vue';
+import DraggableContainer from '../../../../components/DraggableContainer/index.vue';
 import PerformanceMetrics from './PerformanceMetrics.vue';
 import { usePerformanceData } from './usePerformanceData';
 import { usePerformanceChart } from './usePerformanceChart';
-import CircularButton from '../../CircularButton/index.vue';
-import { MSG_TYPE, DEV_CORE_MESSAGE } from '../../../const';
-import { getDevToolInfo, setDevToolInfo } from '../../../modules/devToolInfo';
-import { debounce } from '../../../utils';
+import CircularButton from '../../../../components/CircularButton/index.vue';
+import { MSG_TYPE, DEV_CORE_MESSAGE } from '../../../../../const';
+import {
+  getDevToolInfo,
+  setDevToolInfo,
+} from '../../../../../modules/devToolInfo';
+import { debounce } from '../../../../../utils';
 
 const props = withDefaults(
   defineProps<{
@@ -179,12 +182,12 @@ const onMonitorChange = (enabled: boolean) => {
 onMounted(() => {
   const info = getDevToolInfo();
   if (info && info.performancePosition) {
-    x.value = info.performancePosition.left;
-    y.value = info.performancePosition.top;
+    x.value = Number(info.performancePosition.left) || 10;
+    y.value = Number(info.performancePosition.top) || 200;
     if (info.performancePosition.width)
-      width.value = info.performancePosition.width;
+      width.value = Number(info.performancePosition.width) || 240;
     if (info.performancePosition.height)
-      height.value = info.performancePosition.height;
+      height.value = Number(info.performancePosition.height) || 180;
   }
   loadSettings();
 

package/dist/v3/{Performance → DevTool/components/Performance}/modules/usePerformanceChart.ts

@@ -1,5 +1,5 @@
 import { ref, computed, nextTick } from 'vue';
-import { raf, caf } from '../../../utils';
+import { raf, caf } from '../../../../../utils';
 
 export function usePerformanceChart(opts: {
   theme: any;

package/dist/v3/{Performance → DevTool/components/Performance}/modules/usePerformanceData.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue';
-import { MSG_TYPE } from '../../../const';
-import { raf, caf } from '../../../utils';
+import { MSG_TYPE } from '../../../../../const';
+import { raf, caf } from '../../../../../utils';
 
 const fps = ref(0);
 const cpuLoad = ref(0);

package/dist/v3/{PiniaList → DevTool/components/PiniaList}/index.vue

@@ -15,19 +15,18 @@
         :nodeSelectable="() => false"
         :pathCollapsible="() => false"
         @update:data="onUpdateData"
-        @nodeClick="onNodeClick"
-      />
+        @nodeClick="onNodeClick" />
       <Empty v-else />
     </view>
   </view>
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue';
-import JsonPretty from '../JsonPretty/index.vue';
-import Empty from '../Empty/index.vue';
+import JsonPretty from '../../../components/JsonPretty/index.vue';
+import Empty from '../../../components/Empty/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import { getValueByPath } from '../../utils';
-import { useI18n } from '../../i18n';
+import { getValueByPath } from '../../../../utils';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 

package/dist/v3/{RouteList → DevTool/components/RouteList}/index.vue

@@ -8,8 +8,7 @@
         :placeholder="t('common.searchNamePath')"
         :modelValue="modelValue"
         @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
+        @update:modelValue="emit('update:modelValue', $event)" />
       <Tag mode="clear" @click="onRefresh">{{ t('common.refresh') }}</Tag>
     </view>
 
@@ -17,16 +16,15 @@
       :data="routeList"
       :pageSize="15"
       :height="contentHeight - 32 - 32"
-      className="route-list"
-    >
+      :dataChangeScrollToTop="false"
+      className="route-list">
       <template v-slot="{ list, start, itemsHeight, onSizeChange }">
         <AutoSize
           v-for="(item, index) in list"
           :index="start + index"
           :key="start + index"
           :itemsHeight="itemsHeight"
-          :onSizeChange="onSizeChange"
-        >
+          :onSizeChange="onSizeChange">
           <view class="route-item">
             <view class="route-item-name">
               <view v-html="item.name" />
@@ -44,8 +42,7 @@
                 mode="main"
                 style="margin-left: auto"
                 customStyle="margin-left: auto"
-                @click="onGoTo(item)"
-              >
+                @click="onGoTo(item)">
                 {{ t('common.navigate') }}
               </Tag>
             </view>
@@ -71,14 +68,14 @@
               </view>
             </view>
             <view class="route-item-info">
-              <view
-                >{{ t('route.lastDuration') }}:
-                {{ formatDuration(item.duration) }}</view
-              >
-              <view
-                >{{ t('route.totalDuration') }}:
-                {{ formatDuration(item.totalDuration) }}</view
-              >
+              <view>
+                {{ t('route.lastDuration') }}:
+                {{ formatDuration(item.duration) }}
+              </view>
+              <view>
+                {{ t('route.totalDuration') }}:
+                {{ formatDuration(item.totalDuration) }}
+              </view>
             </view>
           </view>
         </AutoSize>
@@ -88,15 +85,15 @@
   </view>
 </template>
 <script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import FilterInput from '../FilterInput/index.vue';
-import type { DevTool } from '../../type';
-import VirtualList from '../VirtualList/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
-import { formatDate, formatDuration } from '../../utils';
+import Tag from '../../../components/Tag/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import FilterInput from '../../../components/FilterInput/index.vue';
+import type { DevTool } from '../../../../type';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
+import { formatDate, formatDuration } from '../../../../utils';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import { useI18n } from '../../i18n';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 

package/dist/v3/{RunJS → DevTool/components/RunJS}/index.vue

@@ -34,9 +34,9 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
-import type { DevTool } from '../../type';
-import FilterInput from '../FilterInput/index.vue';
-import Tag from '../Tag/index.vue';
+import type { DevTool } from '../../../../type';
+import FilterInput from '../../../components/FilterInput/index.vue';
+import Tag from '../../../components/Tag/index.vue';
 
 defineProps<{ runJSList: DevTool.RunJSItem[]; modelValue: string }>();
 

package/dist/v3/{ScanCodeList → DevTool/components/ScanCodeList}/ScanCodeItem.vue

@@ -19,16 +19,15 @@
 
     <view
       :class="`scan-code-item-right ${isUseDevSource ? 'link' : ''}`"
-      @click="emit('openCode', scanCodeItem?.stack)"
-    >
+      @click="emit('openCode', scanCodeItem?.stack)">
       {{ scanCodeItem?.stack }}
     </view>
   </view>
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue';
-import type { DevTool } from '../../type';
-import { formatDate, isMockWX } from '../../utils';
+import type { DevTool } from '../../../../type';
+import { formatDate, isMockWX } from '../../../../utils';
 
 const props = defineProps<{
   scanCodeItem: DevTool.ScanCodeItem;

package/dist/v3/{ScanCodeList → DevTool/components/ScanCodeList}/index.vue

@@ -1,16 +1,15 @@
 <template>
   <view class="scan-code-content">
     <view class="scan-code-control">
-      <DevToolTitle> {{ t('scanCode.title') }} </DevToolTitle>
+      <DevToolTitle>{{ t('scanCode.title') }}</DevToolTitle>
       <Tag
         mode="clear"
         style="margin: 0 16px 0 auto"
         customStyle="margin:0 16px 0 auto"
-        @click="onClickScanCode"
-      >
+        @click="onClickScanCode">
         {{ t('common.scan') }}
       </Tag>
-      <Tag mode="clear" @click="emit('clear')"> {{ t('common.clear') }} </Tag>
+      <Tag mode="clear" @click="emit('clear')">{{ t('common.clear') }}</Tag>
     </view>
 
     <VirtualList
@@ -19,8 +18,7 @@
       :pageSize="20"
       :height="contentHeight - 32 * 2"
       :data="scanCodeList"
-      :scrollWithAnimation="true"
-    >
+      :scrollWithAnimation="true">
       <template #default="{ list, start, itemsHeight, onSizeChange }">
         <AutoSize
           v-for="(item, index) in list"
@@ -28,15 +26,13 @@
           :index="start + index"
           :id="`dev-scan-code${index}`"
           :itemsHeight="itemsHeight"
-          :onSizeChange="onSizeChange"
-        >
+          :onSizeChange="onSizeChange">
           <ScanCodeItem
             :scanCodeItem="item"
             :mode="mode"
             :useDevSource="useDevSource"
             @openJson="emit('openJson', $event)"
-            @openCode="emit('openCode', $event)"
-          />
+            @openCode="emit('openCode', $event)" />
         </AutoSize>
       </template>
     </VirtualList>
@@ -47,12 +43,12 @@
 <script lang="ts" setup>
 import DevToolTitle from '../DevToolTitle/index.vue';
 import ScanCodeItem from './ScanCodeItem.vue';
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import VirtualList from '../VirtualList/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
-import type { DevTool } from '../../type';
-import { useI18n } from '../../i18n';
+import Tag from '../../../components/Tag/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
+import type { DevTool } from '../../../../type';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 

package/dist/v3/{SettingList → DevTool/components/SettingList}/index.vue

@@ -39,6 +39,25 @@
       :cache-console-log="cacheConsoleLog"
       @export-log="onExportLog"
       @change-cache-console-log="onChangeCacheConsoleLog" />
+    <SettingBarrage
+      :theme="theme"
+      :barrage-visible="barrageVisible"
+      :barrage-max-tracks="barrageMaxTracks"
+      :barrage-track-height="barrageTrackHeight"
+      :barrage-start-top="barrageStartTop"
+      :barrage-duration="barrageDuration"
+      :barrage-max-length="barrageMaxLength"
+      :barrage-types="barrageTypes"
+      :barrage-show-when-open="barrageShowWhenOpen"
+      :sizeFormat="sizeFormat"
+      @change-barrage="onChangeBarrage"
+      @change-barrage-max-tracks="onChangeBarrageMaxTracks"
+      @change-barrage-track-height="onChangeBarrageTrackHeight"
+      @change-barrage-start-top="onChangeBarrageStartTop"
+      @change-barrage-duration="onChangeBarrageDuration"
+      @change-barrage-max-length="onChangeBarrageMaxLength"
+      @change-barrage-types="onChangeBarrageTypes"
+      @change-barrage-show-when-open="onChangeBarrageShowWhenOpen" />
   </scroll-view>
 </template>
 
@@ -49,6 +68,7 @@ import SettingNetwork from './modules/SettingNetwork.vue';
 import SettingTheme from './modules/SettingTheme.vue';
 import SettingInfo from './modules/SettingInfo.vue';
 import SettingLog from './modules/SettingLog.vue';
+import SettingBarrage from './modules/SettingBarrage.vue';
 
 defineProps<{
   theme?: string; // Added theme prop here as per instruction for SettingLanguage
@@ -57,12 +77,20 @@ defineProps<{
   cacheInterceptConfig?: boolean;
   cacheNetworkLog?: boolean;
   cacheConsoleLog?: boolean;
+  barrageVisible?: boolean;
   useTransition?: boolean;
   baseFontSize?: number;
   tagFontSize?: number;
   tipsFontSize?: number;
   fontFamily?: string;
   fontWeight?: string;
+  barrageMaxTracks?: number; // 新增
+  barrageTrackHeight?: number; // 新增
+  barrageStartTop?: number; // 新增
+  barrageDuration?: number; // 时长
+  barrageMaxLength?: number; // 长度
+  barrageTypes?: string[]; // 类型
+  barrageShowWhenOpen?: boolean;
   buildInfo?: {
     devToolVersion?: string;
     devToolBuildTime?: string;
@@ -87,6 +115,14 @@ const emit = defineEmits<{
   (e: 'change-cache-intercept-config', value: boolean): void;
   (e: 'change-cache-network-log', value: boolean): void;
   (e: 'change-cache-console-log', value: boolean): void;
+  (e: 'change-barrage', value: boolean): void;
+  (e: 'change-barrage-max-tracks', value: number): void;
+  (e: 'change-barrage-track-height', value: number): void;
+  (e: 'change-barrage-start-top', value: number): void;
+  (e: 'change-barrage-duration', value: number): void;
+  (e: 'change-barrage-max-length', value: number): void;
+  (e: 'change-barrage-types', value: string[]): void;
+  (e: 'change-barrage-show-when-open', value: boolean): void;
   (e: 'change-use-transition', value: boolean): void;
   (e: 'changeFont', data: any): void;
   (e: 'openJson', data: any): void;
@@ -124,6 +160,38 @@ function onChangeCacheConsoleLog(v: boolean) {
   emit('change-cache-console-log', v);
 }
 
+function onChangeBarrageDuration(v: number) {
+  emit('change-barrage-duration', v);
+}
+
+function onChangeBarrageMaxLength(v: number) {
+  emit('change-barrage-max-length', v);
+}
+
+function onChangeBarrageTypes(v: string[]) {
+  emit('change-barrage-types', v);
+}
+
+function onChangeBarrageShowWhenOpen(v: boolean) {
+  emit('change-barrage-show-when-open', v);
+}
+
+function onChangeBarrage(v: boolean) {
+  emit('change-barrage', v);
+}
+
+function onChangeBarrageMaxTracks(v: number) {
+  emit('change-barrage-max-tracks', v);
+}
+
+function onChangeBarrageTrackHeight(v: number) {
+  emit('change-barrage-track-height', v);
+}
+
+function onChangeBarrageStartTop(v: number) {
+  emit('change-barrage-start-top', v);
+}
+
 function onChangeTheme(v: string) {
   emit('changeTheme', v);
 }