vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/RouteList/index.vue

@@ -1,17 +1,19 @@
 <template>
+  <!-- eslint-disable vue/no-v-html, vue/no-v-text-v-html-on-component -->
   <view class="route-content">
     <view class="route-control">
+      <DevToolTitle>{{ t('route.title') }}</DevToolTitle>
       <FilterInput
         style="width: 100%"
-        placeholder="搜索name/path"
+        :placeholder="t('common.searchNamePath')"
         :modelValue="modelValue"
         @search="emit('search', $event)"
         @update:modelValue="emit('update:modelValue', $event)"
       />
-      <Tag mode="clear" @click="onRefresh">刷新</Tag>
+      <Tag mode="clear" @click="onRefresh">{{ t('common.refresh') }}</Tag>
     </view>
 
-    <VirtualListPro
+    <VirtualList
       :data="routeList"
       :pageSize="15"
       :height="contentHeight - 32 - 32"
@@ -30,19 +32,21 @@
               <view v-html="item.name" />
               <Tag v-if="item.type" mode="info">{{ item.type }}</Tag>
               <Tag mode="primary" v-if="item.index === 4 || item.index === 2">
-                启动页
+                {{ t('route.startPage') }}
               </Tag>
               <Tag mode="warn" v-if="item.index === 4 || item.index === 3">
-                当前页
+                {{ t('route.currentPage') }}
               </Tag>
-              <view> 进入次数: {{ item?.visitTimes ?? 0 }} </view>
+              <view>
+                {{ t('route.visitTimes') }}: {{ item?.visitTimes ?? 0 }}
+              </view>
               <Tag
                 mode="main"
                 style="margin-left: auto"
                 customStyle="margin-left: auto"
                 @click="onGoTo(item)"
               >
-                跳转
+                {{ t('common.navigate') }}
               </Tag>
             </view>
 
@@ -50,7 +54,7 @@
 
             <view class="route-item-info">
               <view>
-                最近进入时间:
+                {{ t('route.lastEnterTime') }}:
                 {{
                   item.inTime
                     ? formatDate(item.inTime, 'HH:mm:ss:SS')
@@ -58,7 +62,7 @@
                 }}
               </view>
               <view>
-                最近离开时间:
+                {{ t('route.lastLeaveTime') }}:
                 {{
                   item.outTime
                     ? formatDate(item.outTime, 'HH:mm:ss:SS')
@@ -67,14 +71,20 @@
               </view>
             </view>
             <view class="route-item-info">
-              <view>最近停留时长: {{ formatDuration(item.duration) }}</view>
-              <view>总停留时长: {{ formatDuration(item.totalDuration) }}</view>
+              <view
+                >{{ t('route.lastDuration') }}:
+                {{ formatDuration(item.duration) }}</view
+              >
+              <view
+                >{{ t('route.totalDuration') }}:
+                {{ formatDuration(item.totalDuration) }}</view
+              >
             </view>
           </view>
         </AutoSize>
         <Empty v-if="!routeList || routeList.length === 0" />
       </template>
-    </VirtualListPro>
+    </VirtualList>
   </view>
 </template>
 <script lang="ts" setup>
@@ -82,9 +92,13 @@ import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
 import FilterInput from '../FilterInput/index.vue';
 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 { formatDate, formatDuration } from '../../utils';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 
 defineProps<{
   routeList: DevTool.Page[];
@@ -117,7 +131,6 @@ function onRefresh() {
 <style scoped>
 .route-content {
   height: 100%;
-
   font-size: var(--dev-tool-base-font-size);
 }
 
@@ -136,10 +149,12 @@ function onRefresh() {
   height: calc(100% - 32px);
   overflow: auto;
 }
+
 .route-item {
   padding: 16px;
   border-bottom: 1px solid var(--dev-tool-border-color);
 }
+
 .route-item-name {
   display: flex;
   align-items: center;
@@ -152,10 +167,12 @@ function onRefresh() {
   word-break: break-all;
   min-height: 24px;
 }
+
 /* #ifdef APP-PLUS */
 .route-item-path :deep(.tag) {
   margin-left: 16px;
 }
+
 /* #endif */
 
 .route-item-info {

package/dist/v3/RunJS/index.vue

@@ -1,13 +1,13 @@
 <template>
+  <!-- eslint-disable vue/no-v-html, vue/no-v-text-v-html-on-component -->
   <view class="run-js">
     <view class="run-js-control">
       <FilterInput
         :modelValue="modelValue"
         placeholder="查询"
-        @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
-      <Tag mode="clear" @click="emit('clear')">清空</Tag>
+        @search="onSearch"
+        @update:modelValue="onUpdateModelValue" />
+      <Tag mode="clear" @click="onClear">清空</Tag>
     </view>
     <view class="run-js-list">
       <view class="run-js-item" v-for="item in runJSList" :key="item.timer">
@@ -15,16 +15,19 @@
         <view class="run-js-item-duration" v-if="item.mode === 'output'">
           {{ item.duration }}ms
         </view>
+        <!-- eslint-disable-next-line vue/no-v-html, vue/no-v-text-v-html-on-component -->
         <view
           class="run-js-item-content"
-          v-html="item.mode === 'input' ? item.code : item.result"
-        >
-        </view>
+          v-html="item.mode === 'input' ? item.code : item.result"></view>
       </view>
       <view class="run-js-item">
-        <view class="run-js-item-icon run-js-item-input"> </view>
+        <view class="run-js-item-icon run-js-item-input"></view>
 
-        <input v-model="code" class="run-js-input" @confirm="onConfirm" />
+        <input
+          :value="code"
+          class="run-js-input"
+          @input="onInput"
+          @confirm="onConfirm" />
       </view>
     </view>
   </view>
@@ -44,6 +47,22 @@ const emit = defineEmits<{
   (e: 'run', value: string): void;
 }>();
 const code = ref('');
+
+function onSearch(value: string) {
+  emit('search', value);
+}
+
+function onUpdateModelValue(value: string) {
+  emit('update:modelValue', value);
+}
+
+function onClear() {
+  emit('clear');
+}
+
+function onInput(e: any) {
+  code.value = e.detail.value;
+}
 function onConfirm() {
   const value = code.value;
   if (!value) return;
@@ -58,6 +77,7 @@ function onConfirm() {
   height: 100%;
   font-size: var(--dev-tool-base-font-size);
 }
+
 .run-js-control {
   display: flex;
   align-items: center;
@@ -98,7 +118,7 @@ function onConfirm() {
 }
 
 .run-js-item-output {
-  margin: 10px -4px 10px 0px;
+  margin: 10px -4px 10px 0;
   transform: rotate(-135deg);
 }
 

package/dist/v3/ScanCodeList/ScanCodeItem.vue

@@ -76,6 +76,7 @@ function onOpenJson() {
   text-align: right;
   word-break: break-all;
 }
+
 .link {
   cursor: pointer;
   text-decoration: underline;
@@ -90,16 +91,8 @@ function onOpenJson() {
   align-items: center;
   min-height: 24px;
 }
+
 .scan-code-item-position > view {
   width: 25%;
 }
-
-.scan-code-item-right {
-  text-align: right;
-  word-break: break-all;
-}
-.link {
-  cursor: pointer;
-  text-decoration: underline;
-}
 </style>

package/dist/v3/ScanCodeList/index.vue

@@ -1,20 +1,19 @@
 <template>
   <view class="scan-code-content">
     <view class="scan-code-control">
-      <DevToolTitle> 扫描列表 </DevToolTitle>
-
+      <DevToolTitle> {{ t('scanCode.title') }} </DevToolTitle>
       <Tag
         mode="clear"
         style="margin: 0 16px 0 auto"
         customStyle="margin:0 16px 0 auto"
         @click="onClickScanCode"
       >
-        扫描
+        {{ t('common.scan') }}
       </Tag>
-      <Tag mode="clear" @click="emit('clear')"> 清空 </Tag>
+      <Tag mode="clear" @click="emit('clear')"> {{ t('common.clear') }} </Tag>
     </view>
 
-    <VirtualListPro
+    <VirtualList
       v-if="scanCodeList && scanCodeList?.length > 0"
       class="scan-code-list"
       :pageSize="20"
@@ -40,7 +39,7 @@
           />
         </AutoSize>
       </template>
-    </VirtualListPro>
+    </VirtualList>
 
     <Empty v-else />
   </view>
@@ -50,11 +49,14 @@ import DevToolTitle from '../DevToolTitle/index.vue';
 import ScanCodeItem from './ScanCodeItem.vue';
 import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
-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 type { DevTool } from '../../type';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 
-const props = defineProps<{
+const _props = defineProps<{
   scanCodeList?: DevTool.ScanCodeItem[];
   zIndex?: number;
   contentHeight: number;
@@ -87,6 +89,7 @@ function onClickScanCode() {
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   /* gap: 8px; */
   padding: 0 16px;
   height: 32px;

package/dist/v3/SettingButton/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <button class="setting-button" :style="customStyle" @click="onClick">
+    <slot></slot>
+  </button>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  customStyle?: Record<string, any> | string;
+}>();
+const emit = defineEmits<{ (e: 'click'): void }>();
+
+function onClick() {
+  emit('click');
+}
+</script>
+
+<style scoped>
+.setting-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 32px;
+  border-radius: 4px;
+  color: #fff;
+  outline: none;
+  border: 1px solid transparent;
+  background-color: var(--dev-tool-main-color);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: var(--dev-tool-base-font-size);
+  padding: 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.setting-button:hover {
+  opacity: 0.9;
+}
+
+.setting-button:active {
+  transform: scale(0.98);
+  opacity: 0.8;
+}
+</style>

package/dist/v3/SettingList/index.css

@@ -0,0 +1,120 @@
+.setting-content {
+  height: 100%;
+  overflow: auto;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.setting-item {
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 8px 0;
+  min-height: 18px;
+}
+
+.setting-tips {
+  color: #616161;
+  font-size: var(--dev-tool-tips-font-size);
+  margin-bottom: 8px;
+}
+
+.setting-link {
+  color: var(--dev-tool-main-color);
+  text-decoration: underline;
+}
+
+.setting-web-view {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  overflow: auto;
+}
+
+.setting-theme {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.setting-item-theme {
+  margin-top: 16px;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  border: 1px solid #fff;
+}
+
+.setting-theme-light {
+  background-color: #fff;
+}
+
+.setting-theme-dark {
+  background-color: rgb(0 0 0 / 80%);
+}
+
+.setting-theme-eye {
+  background-color: #faf9de;
+}
+
+.setting-theme-sakura {
+  background-color: #fff0f5;
+}
+
+.setting-theme-frost {
+  background-color: #f0f9ff;
+}
+
+.setting-theme-sunny {
+  background-color: #fffbeb;
+}
+
+.setting-theme-midnight {
+  background-color: #0f111a;
+}
+
+.setting-theme-gulf {
+  background-color: #0a1b35;
+}
+
+.setting-theme-lava {
+  background-color: #3d0d0d;
+}
+
+.setting-theme-emerald {
+  background-color: #021a12;
+}
+
+.setting-theme-active {
+  border: 1px solid var(--dev-tool-main-color);
+}
+
+.setting-input {
+  width: 150px;
+  height: 24px;
+  border: 1px solid var(--dev-tool-border-color);
+  padding: 0 4px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.setting-btn {
+  background-color: var(--dev-tool-main-color);
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: center;
+  margin-top: 8px;
+}
+
+.setting-btn:active {
+  opacity: 0.8;
+}