vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/SettingList/modules/SettingNetwork.vue

@@ -0,0 +1,120 @@
+<template>
+  <view class="setting-item">
+    <DevToolTitle>{{ t('setting.network.title') }}</DevToolTitle>
+    <view class="setting-item-content">
+      <view class="setting-row">
+        <view>{{ t('setting.network.ip') }}：</view>
+        <Tag
+          :mode="
+            netWorkStatus?.isConnected === undefined || netWorkStatus?.ip
+              ? 'info'
+              : netWorkStatus?.isConnected && netWorkStatus?.ip
+                ? 'success'
+                : 'error'
+          ">
+          {{
+            netWorkStatus?.isConnected === undefined
+              ? t('setting.network.unknown')
+              : netWorkStatus?.ip || t('setting.network.unknown')
+          }}
+        </Tag>
+      </view>
+      <view class="setting-tips">{{ t('setting.network.ipTip') }}</view>
+      <view class="setting-row">
+        <view>{{ t('setting.network.status') }}：</view>
+        <Tag
+          :mode="
+            netWorkStatus?.isConnected === undefined
+              ? 'info'
+              : netWorkStatus?.isConnected
+                ? 'success'
+                : 'error'
+          ">
+          {{
+            netWorkStatus?.isConnected === undefined
+              ? t('setting.network.unknown')
+              : netWorkStatus?.isConnected
+                ? t('setting.network.connected')
+                : t('setting.network.disconnected')
+          }}
+        </Tag>
+      </view>
+      <view class="setting-row">
+        <view>{{ t('setting.network.type') }}：</view>
+        <Tag mode="info">
+          {{ netWorkStatus?.networkType ?? t('setting.network.unknown') }}
+        </Tag>
+      </view>
+    </view>
+  </view>
+  <view class="setting-item">
+    <DevToolTitle>{{ t('setting.network.interceptRole') }}</DevToolTitle>
+    <view class="setting-item-content">
+      <checkbox-group @change="onToggleCacheIntercept">
+        <label class="setting-row">
+          <view>{{ t('setting.network.intercept') }}：</view>
+          <checkbox
+            :checked="cacheInterceptConfig"
+            value="true"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </label>
+      </checkbox-group>
+      <view class="setting-tips">{{ t('setting.network.interceptTip') }}</view>
+      <checkbox-group @change="onToggleCacheNetwork">
+        <label class="setting-row">
+          <view>{{ t('setting.network.cacheNetworkLog') }}：</view>
+          <checkbox
+            :checked="cacheNetworkLog"
+            value="true"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </label>
+      </checkbox-group>
+      <view class="setting-tips">
+        {{ t('setting.network.cacheNetworkLogTip') }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import DevToolTitle from '../../DevToolTitle/index.vue';
+import Tag from '../../Tag/index.vue';
+import { useI18n } from '../../../i18n';
+import { getThemeMainColor } from '../../styles/theme';
+
+const { t } = useI18n();
+const themeColor = computed(() => getThemeMainColor(props.theme));
+
+const props = defineProps<{
+  theme?: string;
+  cacheInterceptConfig?: boolean;
+  cacheNetworkLog?: boolean;
+  netWorkStatus: {
+    isConnected?: boolean;
+    networkType?: string;
+    ip?: string;
+  };
+}>();
+
+const emit = defineEmits<{
+  (e: 'change-cache-intercept-config', value: boolean): void;
+  (e: 'change-cache-network-log', value: boolean): void;
+}>();
+
+function onToggleCacheNetwork() {
+  const nextValue = !props.cacheNetworkLog;
+  emit('change-cache-network-log', nextValue);
+}
+
+function onToggleCacheIntercept() {
+  const nextValue = !props.cacheInterceptConfig;
+  emit('change-cache-intercept-config', nextValue);
+}
+</script>
+
+<style scoped>
+@import '../index.css';
+</style>

package/dist/v3/SettingList/modules/SettingTheme.vue

@@ -0,0 +1,312 @@
+<template>
+  <view class="setting-item">
+    <DevToolTitle>{{ t('setting.theme.title') }}</DevToolTitle>
+    <view class="setting-item-content">
+      <view class="theme-group">
+        <view class="theme-group-title">
+          {{ t('setting.theme.lightMode') }}
+        </view>
+        <view class="setting-theme">
+          <view
+            v-for="item in lightThemes"
+            :key="item.value"
+            :class="[
+              'setting-item-theme',
+              `setting-theme-${item.value}`,
+              { 'setting-theme-active': theme === item.value },
+            ]"
+            @click="emit('changeTheme', item.value)">
+            <view class="theme-label">{{ item.label }}</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="theme-group">
+        <view class="theme-group-title">
+          {{ t('setting.theme.darkMode') }}
+        </view>
+        <view class="setting-theme">
+          <view
+            v-for="item in darkThemes"
+            :key="item.value"
+            :class="[
+              'setting-item-theme',
+              `setting-theme-${item.value}`,
+              { 'setting-theme-active': theme === item.value },
+            ]"
+            @click="emit('changeTheme', item.value)">
+            <view class="theme-label">{{ item.label }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="setting-item-content">
+      <checkbox-group @change="onToggleTransition">
+        <view class="setting-row">
+          <view>{{ t('setting.theme.useTransition') }}：</view>
+          <checkbox
+            :checked="useTransition"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+      </checkbox-group>
+    </view>
+    <view class="setting-tips">
+      {{ t('setting.theme.useTransitionTip') }}
+    </view>
+
+    <view class="setting-item-content">
+      <view class="setting-row">
+        <view>{{ t('setting.theme.baseFontSize') }}：</view>
+        <input
+          :value="localBaseFontSize"
+          @input="onBaseFontSizeInput"
+          type="number"
+          class="setting-input" />
+      </view>
+      <view class="setting-row">
+        <view>{{ t('setting.theme.tagFontSize') }}：</view>
+        <input
+          :value="localTagFontSize"
+          @input="onTagFontSizeInput"
+          type="number"
+          class="setting-input" />
+      </view>
+      <view class="setting-row">
+        <view>{{ t('setting.theme.tipsFontSize') }}：</view>
+        <input
+          :value="localTipsFontSize"
+          @input="onTipsFontSizeInput"
+          type="number"
+          class="setting-input" />
+      </view>
+      <view class="setting-row">
+        <view>{{ t('setting.theme.fontFamily') }}：</view>
+        <Pick
+          v-model="localFontFamily"
+          :options="fontFamilyList"
+          custom-style="width: 150px" />
+      </view>
+      <view class="setting-row">
+        <view>{{ t('setting.theme.fontWeight') }}：</view>
+        <Pick
+          v-model="localFontWeight"
+          :options="fontWeightList"
+          custom-style="width: 150px" />
+      </view>
+      <SettingButton @click="onSave">
+        {{ t('setting.theme.save') }}
+      </SettingButton>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import DevToolTitle from '../../DevToolTitle/index.vue';
+import SettingButton from '../../SettingButton/index.vue';
+import Pick from '../../Pick/index.vue';
+import { useI18n } from '../../../i18n';
+import { getThemeMainColor } from '../../styles/theme';
+
+const { t } = useI18n();
+const themeColor = computed(() => getThemeMainColor(props.theme));
+
+const props = defineProps<{
+  theme?: string;
+  useTransition?: boolean;
+  baseFontSize?: number;
+  tagFontSize?: number;
+
+  tipsFontSize?: number;
+  fontFamily?: string;
+  fontWeight?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'changeTheme', value: string): void;
+  (e: 'changeUseTransition', value: boolean): void;
+  (
+    e: 'changeFont',
+    value: {
+      baseFontSize: number;
+      tagFontSize: number;
+      tipsFontSize: number;
+      fontFamily: string;
+      fontWeight: string;
+    },
+  ): void;
+  (e: 'restartApp'): void;
+}>();
+
+const lightThemes = computed(() => [
+  { label: t('setting.theme.themes.light'), value: 'light' },
+  { label: t('setting.theme.themes.eye'), value: 'eye' },
+  { label: t('setting.theme.themes.sakura'), value: 'sakura' },
+  { label: t('setting.theme.themes.frost'), value: 'frost' },
+  { label: t('setting.theme.themes.sunny'), value: 'sunny' },
+]);
+
+const darkThemes = computed(() => [
+  { label: t('setting.theme.themes.dark'), value: 'dark' },
+  { label: t('setting.theme.themes.midnight'), value: 'midnight' },
+  { label: t('setting.theme.themes.gulf'), value: 'gulf' },
+  { label: t('setting.theme.themes.lava'), value: 'lava' },
+  { label: t('setting.theme.themes.emerald'), value: 'emerald' },
+]);
+
+const localBaseFontSize = ref(props.baseFontSize || 12);
+const localTagFontSize = ref(props.tagFontSize || 10);
+
+const localTipsFontSize = ref(props.tipsFontSize || 10);
+const localFontFamily = ref(props.fontFamily || '');
+const localFontWeight = ref(props.fontWeight || 'normal');
+
+const fontWeightList = [
+  { label: 'Normal (400)', value: 'normal' },
+  { label: 'Medium (500)', value: '500' },
+  { label: 'SemiBold (600)', value: '600' },
+  { label: 'Bold (700)', value: 'bold' },
+];
+
+const fontFamilyList = computed(() => [
+  { label: t('setting.theme.fonts.default'), value: '' },
+  { label: 'Fira Code', value: '"Fira Code", monospace' },
+  { label: 'Monaco', value: 'Monaco, monospace' },
+  { label: 'Consolas', value: 'Consolas, monospace' },
+  { label: 'Courier New', value: '"Courier New", monospace' },
+  { label: 'Source Code Pro', value: '"Source Code Pro", monospace' },
+  { label: 'JetBrains Mono', value: '"JetBrains Mono", monospace' },
+  { label: 'Ubuntu Mono', value: '"Ubuntu Mono", monospace' },
+  { label: 'Menlo', value: 'Menlo, monospace' },
+  { label: 'Inconsolata', value: 'Inconsolata, monospace' },
+  { label: 'Droid Sans Mono', value: '"Droid Sans Mono", monospace' },
+  {
+    label: t('setting.theme.fonts.pingFangSC'),
+    value: '"PingFang SC", sans-serif',
+  },
+  {
+    label: t('setting.theme.fonts.microsoftYaHei'),
+    value: '"Microsoft YaHei", sans-serif',
+  },
+  { label: t('setting.theme.fonts.simHei'), value: 'SimHei, sans-serif' },
+  { label: t('setting.theme.fonts.simSun'), value: 'SimSun, serif' },
+  { label: t('setting.theme.fonts.kaiti'), value: 'KaiTi, serif' },
+  { label: t('setting.theme.fonts.fangSong'), value: 'FangSong, serif' },
+]);
+
+watch(
+  () => props.baseFontSize,
+  (v) => (localBaseFontSize.value = v || 12),
+);
+watch(
+  () => props.tagFontSize,
+  (v) => (localTagFontSize.value = v || 10),
+);
+watch(
+  () => props.tipsFontSize,
+  (v) => (localTipsFontSize.value = v || 10),
+);
+watch(
+  () => props.fontFamily,
+  (v) => (localFontFamily.value = v || ''),
+);
+watch(
+  () => props.fontWeight,
+  (v) => (localFontWeight.value = v || 'normal'),
+);
+
+function onToggleTransition() {
+  emit('changeUseTransition', !props.useTransition);
+}
+
+function onBaseFontSizeInput(e: any) {
+  localBaseFontSize.value = e.detail.value;
+}
+
+function onTagFontSizeInput(e: any) {
+  localTagFontSize.value = e.detail.value;
+}
+
+function onTipsFontSizeInput(e: any) {
+  localTipsFontSize.value = e.detail.value;
+}
+
+function onSave() {
+  emit('changeFont', {
+    baseFontSize: Number(localBaseFontSize.value),
+    tagFontSize: Number(localTagFontSize.value),
+
+    tipsFontSize: Number(localTipsFontSize.value),
+    fontFamily: localFontFamily.value,
+    fontWeight: localFontWeight.value,
+  });
+
+  uni.showToast({
+    title: t('setting.theme.saveTip'),
+    icon: 'none',
+    duration: 1500,
+  });
+
+  setTimeout(() => {
+    emit('restartApp');
+  }, 1500);
+}
+</script>
+
+<style scoped>
+@import '../index.css';
+
+.theme-group {
+  margin-bottom: 12px;
+}
+
+.theme-group-title {
+  font-size: 12px;
+  color: var(--dev-tool-text-color);
+  opacity: 0.6;
+  margin-bottom: 8px;
+  padding-left: 4px;
+}
+
+.setting-theme {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.setting-item-theme {
+  position: relative;
+  width: 48px;
+  height: 32px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--dev-tool-border-color);
+}
+
+.theme-label {
+  font-size: 10px;
+  color: #fff;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
+  pointer-events: none;
+}
+
+.setting-theme-light .theme-label,
+.setting-theme-eye .theme-label,
+.setting-theme-sakura .theme-label,
+.setting-theme-frost .theme-label,
+.setting-theme-sunny .theme-label {
+  color: #333;
+  text-shadow: none;
+}
+
+.setting-theme-active {
+  transform: scale(1.05);
+  box-shadow: 0 0 0 2px var(--dev-tool-main-color);
+}
+</style>

package/dist/v3/SourceCode/Line.vue

@@ -18,7 +18,7 @@
 <script lang="ts" setup>
 import type { LineInfo } from './parseCode';
 
-const props = withDefaults(
+const _props = withDefaults(
   defineProps<{
     line: LineInfo;
 
@@ -41,8 +41,9 @@ const props = withDefaults(
 
 .source-code-line-active {
   color: #fff;
+
   /* background-color: var(--dev-tool-main-color); */
-  background-color: rgba(#9254de, 0.5);
+  background-color: rgb(146 84 222 / 50%);
 }
 
 .source-code-line-num {
@@ -100,4 +101,16 @@ const props = withDefaults(
 .source-code-pre-operator {
   color: var(--dev-tool-operator-color);
 }
+
+.source-code-pre-number {
+  color: var(--dev-tool-number-color);
+}
+
+.source-code-pre-builtin {
+  color: var(--dev-tool-builtin-color, var(--dev-tool-keyword-color));
+}
+
+.source-code-pre-symbol {
+  color: var(--dev-tool-symbol-color, var(--dev-tool-text-color));
+}
 </style>

package/dist/v3/SourceCode/index.vue

@@ -1,41 +1,33 @@
 <template>
   <view class="dev-tool-code" :style="customStyle">
     <view class="dev-tool-code-control">
-      <!-- <FilterInput
-        v-model="modelValue"
-        style="width: 100%"
-        @search="onSearch"
-      /> -->
+      <!-- FilterInput removed to avoid v-model lint issues -->
       <view class="dev-tool-code-title">{{ fileName }}</view>
       <CircularButton style="margin-left: auto" text="×" @click="onClose" />
     </view>
 
-    <VirtualListPro
+    <VirtualList
       v-if="codes.length > 0"
       scrollX
-      virtual
       :pageSize="pageSize"
       :height="contentHeight - 32"
       :data="codes"
-      :scrollWithAnimation="true"
-    >
+      :scrollWithAnimation="true">
       <template #default="{ list, start, itemsHeight, onSizeChange }">
         <AutoSize
           v-for="(code, index) in list"
           :key="start + index"
           :index="start + index"
           :itemsHeight="itemsHeight"
-          :onSizeChange="onSizeChange"
-        >
+          :onSizeChange="onSizeChange">
           <Line
             :line="code"
             :id="`dev-code-${start + index}`"
             :num="start + index + 1"
-            :active="start + index === activeRowCol.row"
-          />
+            :active="start + index === activeRowCol.row" />
         </AutoSize>
       </template>
-    </VirtualListPro>
+    </VirtualList>
     <Empty v-if="!codes || codes.length === 0" />
   </view>
 </template>
@@ -43,9 +35,9 @@
 import { computed, ref, onMounted } from 'vue';
 // import FilterInput from '../FilterInput/index.vue';
 import CircularButton from '../CircularButton/index.vue';
-import VirtualListPro from '../VirtualListPro/index.vue';
+import VirtualList from '../VirtualList/index.vue';
 import Empty from '../Empty/index.vue';
-import AutoSize from '../VirtualListPro/AutoSize.vue';
+import AutoSize from '../VirtualList/AutoSize.vue';
 import Line from './Line.vue';
 import { isAndroid, parseStock } from '../../utils';
 import { parseCode, type LineInfo } from './parseCode';
@@ -67,7 +59,7 @@ const fileName = computed(() => {
 });
 
 const activeRowCol = ref({ row: -1, col: -1, activeRow: -1 });
-const scrollIntoView = ref('');
+const _scrollIntoView = ref('');
 
 // let backupCodes: string[] = [];
 
@@ -79,12 +71,13 @@ function onClose() {
   emit('close');
 }
 
-function onSearch(value: string) {
+function _onSearch(_value: string) {
   // codes.value = backupCodes.map((code) => {
-  //   return hightLight(code, value);
+  //   return hightLight(code, _value);
   // });
 }
 
+/*
 let timer: number;
 function startCounter({
   start,
@@ -113,6 +106,7 @@ function startCounter({
     onExecute(s);
   }, duration);
 }
+*/
 
 let index = 0;
 function getCode(url: string, i: number = 0) {
@@ -162,7 +156,7 @@ function getCode(url: string, i: number = 0) {
         // });
       }
     },
-    fail: (err) => {
+    fail: (_err) => {
       index++;
       getCode(url, index);
       uni.showToast({ icon: 'none', title: '正在重新尝试中...' });
@@ -176,8 +170,7 @@ function getCode(url: string, i: number = 0) {
 /** 开发环境获取源代码 */
 function getSourceCodeDev(url: string) {
   if (!url) {
-    uni.showToast({ icon: 'none', title: '[DevTool] url 处理异常' });
-    console?.error('[DevTool] url 处理异常');
+    // console?.error('[DevTool] url 处理异常');
     return;
   }
   index = 0;
@@ -186,6 +179,8 @@ function getSourceCodeDev(url: string) {
 }
 
 onMounted(() => {
+  if (!props.url) return;
+
   let url = props?.url;
 
   const { path, col, row } = parseStock(props?.url ?? '');
@@ -194,6 +189,8 @@ onMounted(() => {
     url = path;
   }
 
+  if (!url) return;
+
   activeRowCol.value.col = col;
   activeRowCol.value.row = row;
 
@@ -211,17 +208,21 @@ onMounted(() => {
   top: 0;
   left: 0;
   padding: 0 16px;
+
   /* #ifdef H5 */
   padding: 50px 16px;
+
   /* #endif */
 
   /* #ifdef MP-WEIXIN */
+
   /* padding-bottom:30px; */
+
   /* #endif */
 
   width: 100vw;
   height: 100vh;
-  font-size: 12px;
+  font-size: var(--dev-tool-base-font-size);
   color: var(--dev-tool-text-color);
   box-sizing: border-box;
   transition: color 0.3s;
@@ -233,7 +234,6 @@ onMounted(() => {
   align-items: center;
   gap: 12px;
   height: 32px;
-  box-sizing: border-box;
   border-bottom: 1px solid var(--dev-tool-border-color);
   box-sizing: border-box;
 }
@@ -242,6 +242,7 @@ onMounted(() => {
   height: 32px;
   line-height: 30px;
   margin-bottom: 4px;
+
   /* border-bottom: 1px solid var(--dev-tool-border-color); */
   box-sizing: border-box;
   white-space: nowrap;