vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/CaptureScreen/index.vue

@@ -1,14 +1,14 @@
 <template>
   <view class="capture-screen-content">
     <view class="capture-screen-control">
-      <DevToolTitle> 截图列表 </DevToolTitle>
+      <DevToolTitle> {{ t('captureScreen.title') }} </DevToolTitle>
       <Tag
         style="margin-left: auto"
         customStyle="margin-left: auto"
         mode="clear"
         @click="emit('clear')"
       >
-        清空
+        {{ t('common.clear') }}
       </Tag>
     </view>
 
@@ -19,22 +19,28 @@
         :key="index"
       >
         <view class="capture-info-row">
-          类型：<Tag mode="primary">{{ item.type }}</Tag>
+          {{ t('captureScreen.type') }}：<Tag mode="primary">{{
+            item.type
+          }}</Tag>
         </view>
-        <view class="capture-info-row">页面：{{ item.position }}</view>
+        <view class="capture-info-row"
+          >{{ t('captureScreen.page') }}：{{ item.position }}</view
+        >
         <view
           class="capture-info-row-time"
           v-if="item.type === 'captureScreen'"
         >
-          <view>截图时间：{{ item.startTime }}</view>
+          <view
+            >{{ t('captureScreen.captureTime') }}：{{ item.startTime }}</view
+          >
           <!-- <view>结束时间：{{ item.endTime }}</view> -->
         </view>
         <view class="capture-info-row-time" v-else>
-          <view>开始时间：{{ item.startTime }}</view>
-          <view>结束时间：{{ item.endTime }}</view>
+          <view>{{ t('captureScreen.startTime') }}：{{ item.startTime }}</view>
+          <view>{{ t('captureScreen.endTime') }}：{{ item.endTime }}</view>
         </view>
         <view class="capture-info-row" v-if="item.path">
-          位置：{{ item.path }}
+          {{ t('captureScreen.path') }}：{{ item.path }}
         </view>
       </view>
 
@@ -47,6 +53,9 @@ import DevToolTitle from '../DevToolTitle/index.vue';
 import type { DevTool } from '../../type';
 import Empty from '../Empty/index.vue';
 import Tag from '../Tag/index.vue';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 
 defineProps<{
   screenList: DevTool.ScreenItem[];
@@ -82,6 +91,7 @@ const emit = defineEmits<{
   padding: 16px;
   border-bottom: 1px solid var(--dev-tool-border-color);
 }
+
 .capture-info-row {
   display: flex;
   align-items: center;
@@ -89,6 +99,7 @@ const emit = defineEmits<{
   line-height: 24px;
   word-break: break-all;
 }
+
 .capture-info-row-time {
   display: flex;
   justify-content: space-between;

package/dist/v3/CircularButton/index.vue

@@ -1,15 +1,45 @@
 <template>
-  <view class="circular-button" :style="customStyle" @click="onClick">
-    {{ text }}
+  <view
+    class="circular-button"
+    :style="[computedStyle, customStyle]"
+    @click="onClick">
+    <slot>{{ text }}</slot>
   </view>
 </template>
+
 <script lang="ts" setup>
-defineProps<{ text: string; customStyle?: string | Record<string, any> }>();
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    text?: string;
+    customStyle?: string | Record<string, any>;
+    size?: string | number;
+    type?: 'default' | 'primary' | 'warn' | 'error';
+  }>(),
+  {
+    text: '',
+    size: '22px',
+    type: 'default',
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent | TouchEvent): void;
+}>();
 
-const emit = defineEmits<{ (e: 'click'): void }>();
+const computedStyle = computed(() => {
+  const sizeValue =
+    typeof props.size === 'number' ? `${props.size}px` : props.size;
+  return {
+    width: sizeValue,
+    height: sizeValue,
+    fontSize: `calc(${sizeValue} * 0.6)`,
+  };
+});
 
-function onClick() {
-  emit('click');
+function onClick(e: MouseEvent | TouchEvent) {
+  emit('click', e);
 }
 </script>
 
@@ -19,15 +49,36 @@ function onClick() {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-left: auto;
   border-radius: 50%;
-  border: 1px solid var(--dev-tool-text-color);
+  border: 1px solid var(--dev-tool-border-color);
   box-sizing: border-box;
   color: var(--dev-tool-text-color);
-  transition:
-    border,
-    color 0.3s;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: auto;
+  background-color: transparent;
+  line-height: 1;
+}
+
+/* Hover state - using active bg color for consistency */
+@media (hover: hover) {
+  .circular-button:hover {
+    background-color: var(--dev-tool-active-bg-color);
+    border-color: var(--dev-tool-text-color);
+    opacity: 0.9;
+  }
+}
+
+.circular-button:active {
+  transform: scale(0.85);
+  background-color: var(--dev-tool-active-bg-color);
+  opacity: 1;
+}
+
+/* Different types if needed */
+.circular-button-primary {
+  color: var(--dev-tool-main-color);
+  border-color: var(--dev-tool-main-color);
 }
 </style>

package/dist/v3/ConsoleList/ConsoleItem.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-text-v-html-on-component -->
 <template>
   <view :id="id" :class="['console-item', `console-item-${consoleItem.type}`]">
     <view class="console-args">
@@ -5,9 +6,19 @@
         v-for="(item, index) in consoleItem.args"
         :key="index"
         :class="`console-arg console-arg-${item.type}`"
-        v-html="item.shortValue || item.value"
         @click="onClickArg(item)"
       >
+        <template v-if="item.type === 'image'">
+          <image
+            :src="item.value"
+            :title="item.value"
+            mode="aspectFit"
+            class="console-arg-image"
+          />
+          <view v-html="item.shortValue || item.value"></view>
+        </template>
+
+        <view v-else v-html="item.shortValue || item.value"></view>
       </view>
     </view>
     <view class="console-position">
@@ -27,9 +38,11 @@
       <view>
         <view class="console-time">{{ consoleItem.time }}</view>
         <view v-if="consoleItem.executionTime" class="console-time">
-          执行时长: {{ consoleItem?.executionTime }}ms
+          {{ t('common.executionTime') }}: {{ consoleItem?.executionTime }}ms
         </view>
+        <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
         <view class="console-other" v-html="consoleItem.position"></view>
+        <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
         <view
           v-if="consoleItem.stack"
           v-html="consoleItem.stack"
@@ -46,6 +59,9 @@ import { computed } from 'vue';
 import Tag from '../Tag/index.vue';
 import type { DevTool } from '../../type';
 import { isMockWX, openOutLink } from '../../utils';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 const props = defineProps<{
   consoleItem: DevTool.ConsoleItem;
   sourceFileServers?: string[];
@@ -57,7 +73,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'openCode', value: string): void;
-  (e: 'openJson', value: DevTool.Arg): void;
+  (e: 'openJson', value: { title?: string; data: Record<string, any> }): void;
 }>();
 
 const isUseDevSource = computed(() => {
@@ -70,9 +86,13 @@ const isUseDevSource = computed(() => {
 
 function onClickArg(item: DevTool.Arg) {
   if (item.type === 'object' || item.type === 'array') {
-    emit('openJson', item);
+    emit('openJson', { data: item.value });
   } else if (item.type === 'link') {
     openOutLink(item.value);
+  } else if (item.type === 'image') {
+    uni.previewImage({
+      urls: [item.value],
+    });
   }
 }
 </script>
@@ -82,18 +102,23 @@ function onClickArg(item: DevTool.Arg) {
   border-bottom: 1px solid var(--dev-tool-border-color);
   font-size: var(--dev-tool-base-font-size);
 }
+
 .console-args {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
+
   /* color: #000; */
+
   /* color: var(--dev-tool-text-color); */
 }
+
 .console-arg {
   margin-right: 4px;
   white-space: pre-line;
   word-break: break-all;
 }
+
 .console-position {
   display: flex;
   align-items: flex-start;
@@ -107,10 +132,12 @@ function onClickArg(item: DevTool.Arg) {
   display: flex;
   align-items: center;
 }
+
 .console-time {
   margin-right: auto;
   word-break: break-all;
 }
+
 .console-other {
   word-break: break-all;
 }
@@ -132,15 +159,19 @@ function onClickArg(item: DevTool.Arg) {
   border-radius: 50%;
   background-color: var(--dev-tool-success-color);
 }
+
 .console-item-info {
   color: var(--dev-tool-info-color);
 }
+
 .console-item-log {
   color: var(--dev-tool-info-color);
 }
+
 .console-item-warn {
   background-color: var(--dev-tool-warn-bg-color);
 }
+
 .console-item-error {
   background-color: var(--dev-tool-error-bg-color);
 }
@@ -148,26 +179,46 @@ function onClickArg(item: DevTool.Arg) {
 .console-arg-null {
   color: var(--dev-tool-nil-color);
 }
+
 .console-arg-undefined {
   color: var(--dev-tool-nil-color);
 }
+
 .console-arg-string {
   color: var(--dev-tool-nil-color);
 }
+
 .console-arg-number {
   color: var(--dev-tool-number-color);
 }
+
 .console-arg-boolean {
   color: var(--dev-tool-boolean-color);
 }
+
 .console-arg-symbol {
   color: var(--dev-tool-symbol-color);
 }
 
 .console-arg-object,
 .console-arg-array,
-.console-arg-link {
+.console-arg-link,
+.console-arg-image {
   text-decoration: underline;
   color: var(--dev-tool-attribute-color);
 }
+
+.console-arg-image {
+  display: flex;
+  align-items: center;
+}
+
+.console-arg-image > image {
+  width: 100px;
+  height: 88px;
+
+  /* border: 1px solid var(--dev-tool-border-color); */
+  border-radius: 4px;
+  margin-right: 12px;
+}
 </style>

package/dist/v3/ConsoleList/RunJSInput.vue

@@ -4,7 +4,7 @@
     <input
       :value="code"
       class="run-js-input"
-      placeholder="run..."
+      :placeholder="t('common.runPlaceholder')"
       @confirm="debounceConfirm"
       @input="onChange"
     />
@@ -30,6 +30,9 @@ import {
   type Tip,
 } from './staticTips';
 import { debounce } from '../../utils';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 
 const emit = defineEmits<{
   (e: 'run', value: string): void;
@@ -48,7 +51,7 @@ function onConfirm() {
 
   emit('run', value);
 }
-const debounceConfirm = debounce(onConfirm, 500, true);
+const debounceConfirm = debounce(onConfirm, 500, { leading: true });
 
 /**
  * 1.对象，方法，变量 在 ; ( , =,==,=== , + , - , * , / , && , || ??  之后 开始提示
@@ -141,7 +144,7 @@ function onChange(e: any) {
     }
   }
 }
-function onChoose(name: string) {
+function onChoose(_name: string) {
   // TODO 选择提示
   // const lastIndex = code.value.lastIndexOf(';');
   // const con =
@@ -224,10 +227,10 @@ function findFunction(fn: string) {
   max-height: 200px;
   padding: 0 16px 0 36px;
   box-sizing: border-box;
-  overflow-y: auto;
-  overflow-x: hidden;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden auto;
+  box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
 }
+
 .run-js-tips-item {
   display: flex;
   align-items: center;
@@ -239,6 +242,7 @@ function findFunction(fn: string) {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .run-js-tips-item-active {
   border: 1px solid var(--dev-tool-main-color);
 }

package/dist/v3/ConsoleList/index.vue

@@ -1,38 +1,35 @@
 <template>
   <view class="console-content">
     <view class="console-control">
-      <FilterInput
-        :modelValue="modelValue"
-        @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
-      <Tag
-        v-for="item in consoleFilterItems"
-        :mode="item.value"
-        :key="item.value"
-        :active="currentConsoleType === item.value"
-        @click="emit('choose', item.value)"
-      >
-        {{ item.label }}
+      <DevToolTitle>{{ t('common.console') }}</DevToolTitle>
+      <FilterInput v-model="modelValue" @search="emit('search', $event)" />
+      <Pick
+        v-model="currentConsoleType"
+        :options="filterOptions"
+        :readonly="true"
+        :placeholder="t('common.selectType')"
+        customStyle="width: 100px; flex: none;"
+        @change="onFilterChange" />
+      <Tag mode="clear" @click="emit('choose', 'clear')">
+        {{ t('common.clear') }}
       </Tag>
     </view>
 
-    <VirtualListPro
+    <VirtualList
       :data="consoleList"
       :pageSize="15"
       :scrollIntoView="scrollIntoView"
       :scrollWithAnimation="true"
       :height="contentHeight - 32 - 32 - 32"
-      className="console-list"
-    >
+      :dataChangeScrollToTop="false"
+      className="console-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">
           <ConsoleItem
             :consoleItem="item"
             :sourceFileServers="sourceFileServers"
@@ -41,12 +38,11 @@
             :id="`dev-console-${index}`"
             :zIndex="zIndex"
             @openCode="emit('openCode', $event)"
-            @openJson="emit('openJson', $event)"
-          />
+            @openJson="emit('openJson', $event)" />
         </AutoSize>
         <Empty v-if="!consoleList || consoleList.length === 0" />
       </template>
-    </VirtualListPro>
+    </VirtualList>
     <RunJSInput @run="emit('run', $event)" />
   </view>
 </template>
@@ -55,18 +51,21 @@ import ConsoleItem from './ConsoleItem.vue';
 import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
 import FilterInput from '../FilterInput/index.vue';
+import Pick from '../Pick/index.vue';
 import RunJSInput from './RunJSInput.vue';
 import type { DevTool } from '../../type';
-import { nextTick, onMounted, ref, watch } from 'vue';
+import { nextTick, onMounted, ref, computed } from 'vue';
 import { debounce } from '../../utils';
-import VirtualListPro from '../VirtualListPro/index.vue';
-import AutoSize from '../VirtualListPro/AutoSize.vue';
+import VirtualList from '../VirtualList/index.vue';
+import AutoSize from '../VirtualList/AutoSize.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 
 type ConsoleType = 'all' | 'log' | 'info' | 'warn' | 'error' | 'clear';
 const props = defineProps<{
   consoleList: DevTool.ConsoleItem[];
-  currentConsoleType: string;
-  modelValue: string;
   sourceFileServers?: string[];
   mode?: string;
   useDevSource?: boolean;
@@ -76,17 +75,24 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'choose', type: ConsoleType): void;
   (e: 'search', value: string): void;
-  (e: 'update:modelValue', value: string): void;
   (e: 'run', value: string): void;
   (e: 'openCode', value: string): void;
-  (e: 'openJson', value: DevTool.Arg): void;
+  (e: 'openJson', value: { title?: string; data: Record<string, any> }): void;
 }>();
-const consoleFilterItems: {
-  label: string;
-  value: ConsoleType;
-}[] = [
+
+const modelValue = defineModel<string>('modelValue', { required: true });
+const currentConsoleType = defineModel<string>('currentConsoleType', {
+  required: true,
+});
+
+const consoleFilterItems = computed<
+  {
+    label: string;
+    value: ConsoleType;
+  }[]
+>(() => [
   {
-    label: '全部',
+    label: t('common.all'),
     value: 'all',
   },
   {
@@ -106,10 +112,18 @@ const consoleFilterItems: {
     value: 'error',
   },
   {
-    label: '清除',
+    label: t('common.clear'),
     value: 'clear',
   },
-];
+]);
+
+const filterOptions = computed(() => {
+  return consoleFilterItems.value.filter((item) => item.value !== 'clear');
+});
+
+function onFilterChange(item: { label: string; value: any }) {
+  emit('choose', item.value);
+}
 
 const scrollIntoView = ref('');
 
@@ -128,9 +142,11 @@ onMounted(() => {
   height: 100%;
   font-size: var(--dev-tool-base-font-size);
 }
+
 .console-list {
   height: calc(100% - 32px - 32px);
 }
+
 .console-control {
   display: flex;
   align-items: center;

package/dist/v3/CustomSwiper/CustomSwiperItem.vue

@@ -0,0 +1,49 @@
+<template>
+  <view class="custom-swiper-item" :style="customStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true, // 开启虚拟节点，使组件标签不渲染，属性直接透传
+  },
+};
+</script>
+
+<script setup lang="ts">
+defineProps<{
+  customStyle?: string | Record<string, any>;
+}>();
+</script>
+
+<style scoped>
+.custom-swiper-item {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+
+  /* 解决模糊问题 */
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
+/* #ifdef H5 || APP-PLUS */
+.custom-swiper-item::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+
+.custom-swiper-item::-webkit-scrollbar-thumb {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+
+/* #endif */
+</style>