vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/VuexList/index.vue

@@ -1,25 +1,34 @@
 <template>
   <view class="vuex-content">
-    <JsonPretty
-      editable
-      showLength
-      virtual
-      v-if="showJson"
-      :data="vuexList"
-      :theme="theme"
-      :height="contentHeight - 32 - 32"
-      :nodeSelectable="() => false"
-      :pathCollapsible="() => false"
-      @update:data="onUpdateData"
-      @nodeClick="onNodeClick"
-    />
-    <Empty v-else />
+    <view class="vuex-control">
+      <DevToolTitle>{{ t('vuex.title') }}</DevToolTitle>
+    </view>
+    <view class="vuex-json-wrapper">
+      <JsonPretty
+        editable
+        showLength
+        virtual
+        v-if="showJson"
+        :data="vuexList"
+        :theme="theme"
+        :height="contentHeight - 32 - 32"
+        :nodeSelectable="() => false"
+        :pathCollapsible="() => false"
+        @update:data="onUpdateData"
+        @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 DevToolTitle from '../DevToolTitle/index.vue';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 const props = defineProps<{
   vuexList: Record<string, any>;
   theme?: string;
@@ -36,7 +45,7 @@ const showJson = computed(() => {
       return false;
     }
     return true;
-  } catch (error) {
+  } catch (_error) {
     return false;
   }
 });
@@ -54,10 +63,22 @@ function onNodeClick(node: any) {
 </script>
 <style scoped>
 .vuex-content {
-  padding: 16px;
   font-size: var(--dev-tool-base-font-size);
   height: 100%;
   box-sizing: border-box;
-  overflow: auto;
+  overflow: hidden;
+}
+
+.vuex-control {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.vuex-json-wrapper {
+  padding: 0 16px;
 }
 </style>

package/dist/v3/WebSocket/WebSocketDetail.vue

@@ -1,45 +1,48 @@
 <template>
   <view class="web-socket-list-container" :style="customStyle">
     <view class="web-socket-detail-control">
-      <DevToolTitle customStyle="margin-right: 16px"> 套接字详情 </DevToolTitle>
+      <DevToolTitle customStyle="margin-right: 16px">
+        {{ t('websocket.detailTitle') }}
+      </DevToolTitle>
       <Tag
         mode="info"
-        v-for="item in selectItems"
+        v-for="item in translatedSelectItems"
         :active="item.value === currentSelect"
         :key="item.value"
         customStyle="margin-right: 16px"
-        @click="onSelect(item)"
-      >
+        @click="onSelect(item)">
         {{ item.label }}
       </Tag>
       <CircularButton
         style="margin-left: auto"
         customStyle="margin-left: auto"
         text="×"
-        @click="onClose"
-      />
+        @click="onClose" />
     </view>
 
     <view class="web-socket-data" v-if="currentSelect === 'base'">
-      <DevToolTitle> 常规 </DevToolTitle>
+      <DevToolTitle>{{ t('network.general') }}</DevToolTitle>
       <view class="web-socket-detail-item">
-        <view>请求地址:</view>
+        <view class="web-socket-detail-item-key">
+          {{ t('network.requestUrl') }}:
+        </view>
         <view>{{ ws?.url }}</view>
       </view>
 
       <view class="web-socket-detail-item">
-        <view>请求方法:</view>
+        <view class="web-socket-detail-item-key">
+          {{ t('network.method') }}:
+        </view>
         <Tag mode="info">{{ ws?.method }}</Tag>
       </view>
 
-      <DevToolTitle>请求头</DevToolTitle>
+      <DevToolTitle>{{ t('network.requestHeaders') }}</DevToolTitle>
       <template v-if="ws?.headers && ws.headers?.length > 0">
         <view
           class="web-socket-detail-item"
           v-for="item in ws.headers"
-          :key="item.key"
-        >
-          <view class="web-socket-detail-item-key">{{ item.key }}: </view>
+          :key="item.key">
+          <view class="web-socket-detail-item-key">{{ item.key }}:</view>
           {{ item.value }}
         </view>
       </template>
@@ -47,87 +50,125 @@
     </view>
     <template v-if="currentSelect === 'message'">
       <view class="web-socket-detail-control">
-        <DevToolTitle>消息列表</DevToolTitle>
+        <DevToolTitle>{{ t('websocket.messageList') }}</DevToolTitle>
         <Tag
           mode="clear"
           style="margin-left: auto"
           customStyle="margin-left: auto"
-          @click="emit('clear', ws!)"
-        >
-          清除
+          @click="emit('clear', ws!)">
+          {{ t('common.clear') }}
         </Tag>
       </view>
 
       <view class="web-socket-data-list">
-        <template v-if="ws?.message && ws.message.length > 0">
-          <view
-            v-for="item in ws.message"
-            :key="item.time"
-            :class="`web-socket-data-item web-socket-data-item-${item.status}`"
-            @click="onClick(item)"
-          >
-            <view class="web-socket-data-time">
-              {{ item.type === 'send' ? '↑' : '↓' }}
-              {{ formatDate(item.time, 'HH:mm:ss') }}
-            </view>
-            <view
-              :class="[
-                'web-socket-data-content',
-                `web-socket-data-${item.valueType}`,
-              ]"
-              @click.stop="onClickValue(item)"
-            >
-              {{ item.shortValue || item.value }}
-            </view>
-          </view>
-        </template>
-        <Empty v-else text="暂无消息" />
+        <VirtualList
+          v-if="ws?.message && ws.message.length > 0"
+          :data="ws.message"
+          :itemHeight="32"
+          :dataChangeScrollToTop="false"
+          :showBackTop="false"
+          :scrollIntoView="scrollIntoView"
+          :scrollWithAnimation="true">
+          <template #default="{ list, onSizeChange, itemsHeight, start }">
+            <AutoSize
+              v-for="(msg, index) in list as DevTool.Message[]"
+              :key="msg.time"
+              :index="index + start"
+              :itemsHeight="itemsHeight"
+              :onSizeChange="onSizeChange">
+              <view
+                :id="`ws-msg-${index + start}`"
+                :class="`web-socket-data-item web-socket-data-item-${msg.status}`"
+                @click="onClick(msg)">
+                <view class="web-socket-data-time">
+                  {{ msg.type === 'send' ? '↑' : '↓' }}
+                  {{ formatDate(msg.time, 'HH:mm:ss') }}
+                </view>
+                <view
+                  :class="[
+                    'web-socket-data-content',
+                    `web-socket-data-${msg.valueType}`,
+                  ]"
+                  @click.stop="onClickValue(msg)">
+                  {{ msg.shortValue || msg.value }}
+                </view>
+              </view>
+            </AutoSize>
+          </template>
+        </VirtualList>
+        <Empty v-else :text="t('websocket.noMessage')" />
       </view>
 
-      <!-- <textarea
-        :value="sendText"
-        class="web-socket-textarea"
-        placeholder="请输入消息"
-        placeholderStyle="font-size: 12px"
-        @change="onChangeText"
-      />
-      <button class="web-socket-send-button" size="mini">发送</button> -->
+      <view class="web-socket-send-container">
+        <textarea
+          class="web-socket-textarea"
+          :value="sendText"
+          @input="onInputText"
+          :placeholder="t('websocket.sendPlaceholder')" />
+        <SettingButton customStyle="margin-top: 12px" @click="onSendMessage">
+          {{ t('websocket.send') }}
+        </SettingButton>
+      </view>
     </template>
   </view>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed, watch } from 'vue';
 import Tag from '../Tag/index.vue';
 import CircularButton from '../CircularButton/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
 import Empty from '../Empty/index.vue';
 import { formatDate } from '../../utils/index';
 import type { DevTool } from '../../type';
+import { useI18n } from '../../i18n';
+import SettingButton from '../SettingButton/index.vue';
+import VirtualList from '../VirtualList/index.vue';
+import AutoSize from '../VirtualList/AutoSize.vue';
+
+const { t } = useI18n();
 
-defineProps<{
+const props = defineProps<{
   ws?: DevTool.WS;
   zIndex?: number;
   customStyle?: Record<string, any>;
 }>();
+
 const emit = defineEmits<{
   (e: 'close'): void;
   (e: 'clear', value: DevTool.WS): void;
+  (e: 'send', data: { url: string; message: any }): void;
   (e: 'openJson', value: { title?: string; data: Record<string, any> }): void;
 }>();
 
-const selectItems = [
+const translatedSelectItems = computed(() => [
   {
-    label: 'base',
+    label: t('common.base'),
     value: 'base',
   },
   {
-    label: 'message',
+    label: t('common.message'),
     value: 'message',
   },
-];
-const currentSelect = ref('base');
+]);
+const currentSelect = ref<string>('base');
+
+const sendText = ref<string>('');
 
-const sendText = ref('');
+const scrollIntoView = ref<string>('');
+
+watch(
+  () => props.ws?.message?.length,
+  (newLen) => {
+    const len = newLen || 0;
+    if (len > 0) {
+      // 延迟一点确保渲染完成
+      setTimeout(() => {
+        scrollIntoView.value = `ws-msg-${len - 1}`;
+      }, 100);
+    }
+  },
+  { immediate: true },
+);
 
 function onSelect(item: { label: string; value: string }) {
   currentSelect.value = item.value;
@@ -136,39 +177,50 @@ function onClose() {
   emit('close');
 }
 
-function onClick(item: {
-  status: 'success' | 'error';
-  value: string;
-  time: number;
-}) {
+function onClick(item: DevTool.Message) {
   uni.setClipboardData({
-    data: JSON.stringify(item),
+    data: JSON.stringify(item.value), // 只拷贝 value 可能更符合直觉，或者拷贝整个 item
     success() {
       uni.showToast({
-        title: '复制成功',
+        title: t('common.copySuccess'),
         icon: 'none',
       });
     },
     fail() {
       uni.showToast({
-        title: '复制失败',
+        title: t('common.copyFail'),
         icon: 'none',
       });
     },
   });
 }
 
-function onChangeText(e: any) {
-  sendText.value = e.detail.value;
-  console.log(' sendText.value: ', sendText.value);
-}
-
 function onClickValue(message: DevTool.Message) {
   emit('openJson', {
-    title: '消息详情',
+    title: t('websocket.messageDetail'),
     data: message.value,
   });
 }
+
+function onInputText(e: any) {
+  sendText.value = e.detail.value;
+}
+
+function onSendMessage() {
+  if (!sendText.value) return;
+  let message: any = sendText.value;
+  try {
+    const parsed = JSON.parse(sendText.value);
+    if (typeof parsed === 'object' && parsed !== null) {
+      message = parsed;
+    }
+  } catch (_e) {
+    //
+  }
+
+  emit('send', { url: props.ws?.url || '', message });
+  sendText.value = '';
+}
 </script>
 <style>
 .web-socket-list-container {
@@ -179,18 +231,20 @@ function onClickValue(message: DevTool.Message) {
   top: 0;
   left: 0;
   padding: 0 16px;
+
   /* #ifdef H5 || APP-PLUS */
   padding: 50px 16px;
+
   /* #endif */
 
   background-color: var(--dev-tool-bg3-color);
-
   box-sizing: border-box;
 }
 
 .web-socket-detail-control {
   display: flex;
   align-items: center;
+
   /* margin-bottom: 4px; */
   height: 32px;
   border-bottom: 1px solid transparent;
@@ -213,7 +267,6 @@ function onClickValue(message: DevTool.Message) {
   align-items: center;
   min-height: 28px;
   word-break: break-all;
-  font-size: 12px;
 }
 
 .web-socket-detail-item-key {
@@ -226,7 +279,6 @@ function onClickValue(message: DevTool.Message) {
   display: flex;
   align-items: center;
   min-height: 28px;
-
   white-space: wrap;
   word-break: break-all;
 }
@@ -235,20 +287,23 @@ function onClickValue(message: DevTool.Message) {
   display: flex;
   align-items: center;
   min-height: 28px;
-  font-size: 12px;
 }
+
 .web-socket-data-item-error {
-  background-color: var(--dev-tool-error-bg-color);
+  border-left: 2px solid var(--dev-tool-error-color);
 }
+
 .web-socket-data-item-success {
-  background-color: var(--dev-tool-success-bg-color);
+  border-left: 2px solid var(--dev-tool-success-color);
 }
+
 .web-socket-data-time {
   /* margin-right: 16px; */
   padding: 0 6px;
   flex-shrink: 0;
   color: var(--dev-tool-info-color);
 }
+
 .web-socket-data-content {
   padding: 6px;
   flex: 1;
@@ -264,19 +319,26 @@ function onClickValue(message: DevTool.Message) {
 }
 
 .web-socket-data-list {
-  /* height: calc(100% - 32px - 32px - 130px); */
-  height: calc(100% - 32px - 32px);
-  overflow: auto;
+  height: calc(100% - 32px - 32px - 140px);
+  overflow: hidden;
+}
+
+.web-socket-send-container {
+  height: 140px;
+  padding-top: 10px;
+  box-sizing: border-box;
 }
 
 .web-socket-textarea {
   padding: 6px;
   height: 80px;
   width: 100%;
-  font-size: 12px;
   border: 1px solid var(--dev-tool-border-color);
   box-sizing: border-box;
+  font-size: var(--dev-tool-base-font-size);
+  color: var(--dev-tool-text-color);
 }
+
 .web-socket-send-button {
   margin-top: 12px;
   width: 100%;

package/dist/v3/WebSocket/WebSocketItem.vue

@@ -1,25 +1,25 @@
 <template>
+  <!-- eslint-disable vue/no-v-html, vue/no-v-text-v-html-on-component -->
   <view class="websocket-item">
     <view class="websocket-url-row" @click="emit('openDetail', ws)">
       <Tag mode="info" v-if="ws.readyState === 'connection'">connection</Tag>
       <Tag mode="success" v-if="ws.readyState === 'open'">open</Tag>
       <Tag
         mode="warn"
-        v-if="ws.readyState === 'closing' || ws.readyState === 'closed'"
-      >
+        v-if="ws.readyState === 'closing' || ws.readyState === 'closed'">
         close
       </Tag>
 
       <Tag mode="error" v-if="ws.readyState === 'error'">error</Tag>
 
-      <view class="websocket-url" v-html="ws.url" />
+      <view class="websocket-url" v-html="ws._highlightUrl || ws.url" />
     </view>
     <view class="websocket-info">
       <view class="websocket-info-last">
         {{
           (ws?.message?.[ws.message.length - 1]?.shortValue ||
             ws?.message?.[ws.message.length - 1]?.value) ??
-          '暂无消息'
+          t('websocket.noMessage')
         }}
       </view>
 
@@ -40,6 +40,9 @@
 import Tag from '../Tag/index.vue';
 import { formatDate } from '../../utils';
 import type { DevTool } from '../../type';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 
 defineProps<{ ws: DevTool.WS; zIndex?: number }>();
 
@@ -52,6 +55,7 @@ const emit = defineEmits<{ (e: 'openDetail', value: DevTool.WS): void }>();
   border-bottom: 1px solid var(--dev-tool-border-color);
   font-size: var(--dev-tool-base-font-size);
 }
+
 .websocket-url-row {
   display: flex;
   align-items: center;
@@ -71,9 +75,11 @@ const emit = defineEmits<{ (e: 'openDetail', value: DevTool.WS): void }>();
   flex-shrink: 0;
   margin-left: auto;
 }
+
 .websocket-detail-active {
   transform: rotate(135deg);
 }
+
 .websocket-info {
   display: flex;
   align-items: center;

package/dist/v3/WebSocket/index.vue

@@ -1,73 +1,78 @@
 <template>
   <view class="websocket-content">
     <view class="websocket-control">
+      <DevToolTitle>{{ t('websocket.title') }}</DevToolTitle>
       <FilterInput
-        :modelValue="modelValue"
-        placeholder="查询url"
-        @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
-      <Tag
-        v-for="item in webSocketFilter"
-        :mode="item.mode"
-        :key="item.value"
-        :active="item.value === currentWebSocketType"
-        @click="onChoose(item.value)"
-      >
-        {{ item.label }}
+        v-model="modelValue"
+        :placeholder="t('websocket.searchUrl')"
+        @search="emit('search', $event)" />
+      <Pick
+        v-model="currentWebSocketType"
+        :options="filterOptions"
+        :readonly="true"
+        :placeholder="t('common.selectStatus')"
+        customStyle="width: 100px; flex: none;"
+        @change="onFilterChange" />
+      <Tag mode="clear" @click="onChoose('clear')">
+        {{ t('common.clear') }}
       </Tag>
     </view>
 
-    <VirtualListPro
+    <VirtualList
       :data="wsList"
       :pageSize="10"
       :height="contentHeight - 32 - 32"
-      className="websocket-list"
-    >
+      className="websocket-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">
           <WebSocketItem
             :ws="item"
             :zIndex="zIndex"
-            @openDetail="emit('openDetail', $event)"
-          />
+            @openDetail="emit('openDetail', $event)" />
         </AutoSize>
         <Empty v-if="!wsList || wsList.length === 0" />
       </template>
-    </VirtualListPro>
+    </VirtualList>
   </view>
 </template>
 <script lang="ts" setup>
+import { computed } from 'vue';
 import WebSocketItem from './WebSocketItem.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'; // Changed from FilterSelect to Pick
 import type { DevTool } from '../../type';
-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();
 
 defineProps<{
   wsList: DevTool.WS[];
-  currentWebSocketType: string;
-  modelValue: string;
   zIndex?: number;
   contentHeight: number;
 }>();
 const emit = defineEmits<{
   (e: 'choose', type: string): void;
-  (e: 'update:modelValue', value: string): void;
   (e: 'search', value: string): void;
   (e: 'openDetail', value: DevTool.WS): void;
 }>();
-const webSocketFilter = [
+
+const modelValue = defineModel<string>('modelValue', { required: true });
+const currentWebSocketType = defineModel<string>('currentWebSocketType', {
+  required: true,
+});
+const webSocketFilter = computed(() => [
   {
-    label: '全部',
+    label: t('common.all'),
     value: 'all',
     mode: 'all',
   },
@@ -92,15 +97,23 @@ const webSocketFilter = [
     mode: 'error',
   },
   {
-    label: '清除',
+    label: t('common.clear'),
     value: 'clear',
     mode: 'clear',
   },
-];
+]);
 
 function onChoose(type: string) {
   emit('choose', type);
 }
+
+const filterOptions = computed(() => {
+  return webSocketFilter.value.filter((item) => item.value !== 'clear');
+});
+
+function onFilterChange(item: { label: string; value: any }) {
+  emit('choose', item.value);
+}
 </script>
 <style scoped>
 .websocket-content {
@@ -118,6 +131,7 @@ function onChoose(type: string) {
   border-bottom: 1px solid var(--dev-tool-border-color);
   box-sizing: border-box;
 }
+
 .websocket-list {
   height: calc(100% - 32px);
   overflow: auto;