vite-uni-dev-tool 1.0.0 → 1.2.0

package/dist/v3/DevTool/components/SettingList/modules/SettingBarrage.vue

@@ -0,0 +1,304 @@
+<template>
+  <view class="setting-item" :class="theme">
+    <DevToolTitle>{{ t('common.barrage') }}</DevToolTitle>
+    <view class="setting-item-content">
+      <!-- 开启弹幕 -->
+      <view class="setting-row">
+        <view class="setting-label">{{ t('common.enableBarrage') }}</view>
+        <switch
+          :checked="barrageVisible"
+          @change="onBarrageChange"
+          color="var(--dev-tool-main-color)"
+          style="transform: scale(0.7)" />
+      </view>
+
+      <!-- 主窗口打开时显示 -->
+      <view v-if="barrageVisible" class="setting-row">
+        <view class="setting-label">{{ t('common.barrageShowWhenOpen') }}</view>
+        <switch
+          :checked="barrageShowWhenOpen"
+          @change="onBarrageShowWhenOpenChange"
+          color="var(--dev-tool-main-color)"
+          style="transform: scale(0.7)" />
+      </view>
+
+      <view v-if="barrageVisible" class="barrage-advanced">
+        <!-- 轨道数量 -->
+        <view class="setting-row-group">
+          <view class="setting-row-header">
+            <view class="setting-label">
+              {{ t('common.barrageMaxTracks') }}
+            </view>
+            <view class="setting-value">{{ barrageMaxTracks }}</view>
+          </view>
+          <slider
+            class="barrage-slider"
+            :value="barrageMaxTracks"
+            min="1"
+            max="20"
+            step="1"
+            activeColor="var(--dev-tool-main-color)"
+            backgroundColor="var(--dev-tool-border-color)"
+            block-size="16"
+            @change="onMaxTracksChange" />
+        </view>
+
+        <!-- 轨道高度 -->
+        <view class="setting-row-group">
+          <view class="setting-row-header">
+            <view class="setting-label">
+              {{ t('common.barrageTrackHeight') }}
+            </view>
+            <view class="setting-value">{{ barrageTrackHeight }}px</view>
+          </view>
+          <slider
+            class="barrage-slider"
+            :value="barrageTrackHeight"
+            min="20"
+            max="60"
+            step="2"
+            activeColor="var(--dev-tool-main-color)"
+            backgroundColor="var(--dev-tool-border-color)"
+            block-size="16"
+            @change="onTrackHeightChange" />
+        </view>
+
+        <!-- 起始高度 -->
+        <view class="setting-row-group">
+          <view class="setting-row-header">
+            <view class="setting-label">{{ t('common.barrageStartTop') }}</view>
+            <view class="setting-value">{{ barrageStartTop }}px</view>
+          </view>
+          <slider
+            class="barrage-slider"
+            :value="barrageStartTop"
+            min="0"
+            max="200"
+            step="5"
+            activeColor="var(--dev-tool-main-color)"
+            backgroundColor="var(--dev-tool-border-color)"
+            block-size="16"
+            @change="onStartTopChange" />
+        </view>
+
+        <!-- 弹幕停留时长 -->
+        <view class="setting-row-group">
+          <view class="setting-row-header">
+            <view class="setting-label">{{ t('common.barrageDuration') }}</view>
+            <view class="setting-value">{{ barrageDuration }}s</view>
+          </view>
+          <slider
+            class="barrage-slider"
+            :value="barrageDuration"
+            min="3"
+            max="20"
+            step="1"
+            activeColor="var(--dev-tool-main-color)"
+            backgroundColor="var(--dev-tool-border-color)"
+            block-size="16"
+            @change="onDurationChange" />
+        </view>
+
+        <!-- 弹幕文字截断长度 -->
+        <view class="setting-row-group">
+          <view class="setting-row-header">
+            <view class="setting-label">
+              {{ t('common.barrageMaxLength') }}
+            </view>
+            <view class="setting-value">{{ barrageMaxLength }}</view>
+          </view>
+          <slider
+            class="barrage-slider"
+            :value="barrageMaxLength"
+            min="10"
+            max="500"
+            step="10"
+            activeColor="var(--dev-tool-main-color)"
+            backgroundColor="var(--dev-tool-border-color)"
+            block-size="16"
+            @change="onMaxLengthChange" />
+        </view>
+
+        <!-- 显示类型 -->
+        <view class="setting-row-group">
+          <view class="setting-row-header">
+            <view class="setting-label">{{ t('common.barrageTypes') }}</view>
+          </view>
+          <checkbox-group class="type-checkbox-group" @change="onTypesChange">
+            <label
+              v-for="item in allTypes"
+              :key="item"
+              class="type-checkbox-item">
+              <checkbox
+                :value="item"
+                :checked="(barrageTypes || []).includes(item)"
+                color="var(--dev-tool-main-color)"
+                style="transform: scale(0.8)" />
+              <text class="type-checkbox-label">{{ item }}</text>
+            </label>
+          </checkbox-group>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from '../../../../../i18n';
+import DevToolTitle from '../../DevToolTitle/index.vue';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  theme?: string;
+  barrageVisible?: boolean;
+  barrageMaxTracks?: number;
+  barrageTrackHeight?: number;
+  barrageStartTop?: number;
+  barrageDuration?: number;
+  barrageMaxLength?: number;
+  barrageTypes?: string[];
+  barrageShowWhenOpen?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (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;
+}>();
+
+const allTypes = [
+  'log',
+  'info',
+  'warn',
+  'error',
+  'network',
+  'transfer',
+  'websocket',
+];
+
+function onBarrageChange(e: any) {
+  emit('change-barrage', e.detail.value);
+}
+
+function onBarrageShowWhenOpenChange(e: any) {
+  emit('change-barrage-show-when-open', !!e.detail.value);
+}
+
+function onMaxTracksChange(e: any) {
+  emit('change-barrage-max-tracks', e.detail.value);
+}
+
+function onTrackHeightChange(e: any) {
+  emit('change-barrage-track-height', e.detail.value);
+}
+
+function onStartTopChange(e: any) {
+  emit('change-barrage-start-top', e.detail.value);
+}
+
+function onDurationChange(e: any) {
+  emit('change-barrage-duration', e.detail.value);
+}
+
+function onMaxLengthChange(e: any) {
+  emit('change-barrage-max-length', e.detail.value);
+}
+
+function onTypesChange(e: any) {
+  let values = e.detail.value;
+  // 如果全部取消，至少保留一个之前的
+  if (
+    values.length === 0 &&
+    props.barrageTypes &&
+    props.barrageTypes.length > 0
+  ) {
+    // 这里可以根据需求决定是否强制保留，暂时跟随用户操作
+  }
+  emit('change-barrage-types', values);
+}
+</script>
+
+<style scoped>
+.setting-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
+
+.setting-item-header {
+  margin-bottom: 12px;
+}
+
+.setting-item-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--dev-tool-text-color);
+}
+
+.barrage-advanced {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--dev-tool-border-color);
+}
+
+.setting-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 36px;
+}
+
+.setting-row-group {
+  margin-top: 12px;
+}
+
+.setting-row-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.setting-label {
+  font-size: 12px;
+  color: var(--dev-tool-text-color-secondary);
+}
+
+.setting-value {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dev-tool-main-color);
+  background: rgb(0 122 255 / 10%);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.barrage-slider {
+  margin: 0;
+  padding: 8px 0;
+}
+
+.type-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.type-checkbox-item {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+
+.type-checkbox-label {
+  font-size: 12px;
+  color: var(--dev-tool-text-color);
+  margin-left: -4px;
+}
+</style>

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

@@ -106,11 +106,14 @@
 import { onMounted, ref, computed } from 'vue';
 import DevToolTitle from '../../DevToolTitle/index.vue';
 import SettingButton from '../../SettingButton/index.vue';
-import { openOutLink } from '../../../utils';
-import { useI18n } from '../../../i18n';
+import { openOutLink } from '../../../../../utils';
+import { useI18n } from '../../../../../i18n';
 import { getTabItems } from '../../DevToolWindow/const';
-import { getDevToolInfo, setDevToolInfo } from '../../../modules/devToolInfo';
-import { getThemeMainColor } from '../../styles/theme';
+import {
+  getDevToolInfo,
+  setDevToolInfo,
+} from '../../../../../modules/devToolInfo';
+import { getThemeMainColor } from '../../../../styles/theme';
 
 const { t } = useI18n();
 
@@ -169,6 +172,7 @@ onMounted(() => {
     'CaptureScreen',
     'ScanCode',
     'NFC',
+    'Bluetooth',
     'ElEvent',
     'UniEvent',
   ];

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

@@ -2,6 +2,40 @@
   <view class="setting-item">
     <DevToolTitle>{{ t('setting.info.title') }}</DevToolTitle>
     <view class="setting-item-content">
+      <template v-if="systemInfoBase">
+        <view class="setting-row">
+          <view>{{ t('setting.info.systemEnv') }}：</view>
+          <view>
+            {{ systemInfoBase.osName }} {{ systemInfoBase.osVersion }}
+          </view>
+        </view>
+        <view class="setting-row">
+          <view>{{ t('setting.info.deviceBrand') }}：</view>
+          <view>
+            {{ systemInfoBase.deviceBrand }} {{ systemInfoBase.deviceModel }}
+          </view>
+        </view>
+        <view class="setting-row">
+          <view>{{ t('setting.info.hostVersion') }}：</view>
+          <view>
+            {{ systemInfoBase.hostName }} {{ systemInfoBase.hostVersion }}
+          </view>
+        </view>
+        <view class="setting-row">
+          <view>{{ t('setting.info.sdkVersion') }}：</view>
+          <view>{{ systemInfoBase.hostSDKVersion || 'N/A' }}</view>
+        </view>
+        <view class="setting-row">
+          <view>{{ t('setting.info.platform') }}：</view>
+          <view>{{ systemInfoBase.uniPlatform }}</view>
+        </view>
+        <view class="setting-row">
+          <SettingButton @click="onLookSystemInfo">
+            {{ t('setting.info.viewSystem') }}
+          </SettingButton>
+        </view>
+      </template>
+
       <view class="setting-row">{{ t('setting.info.viewWindow') }}：</view>
       <view class="setting-tips">
         {{ t('setting.info.viewWindowTip') }}
@@ -18,14 +52,6 @@
         {{ t('setting.info.viewDevice') }}
       </SettingButton>
 
-      <view class="setting-row">{{ t('setting.info.viewSystem') }}：</view>
-      <view class="setting-tips">
-        {{ t('setting.info.viewSystemTip') }}
-      </view>
-      <SettingButton @click="onLookSystemInfo">
-        {{ t('setting.info.viewSystem') }}
-      </SettingButton>
-
       <view class="setting-row">{{ t('setting.info.viewAppInfo') }}：</view>
       <view class="setting-tips">
         {{ t('setting.info.viewAppInfoTip') }}
@@ -40,9 +66,21 @@
 <script setup lang="ts">
 import DevToolTitle from '../../DevToolTitle/index.vue';
 import SettingButton from '../../SettingButton/index.vue';
-import { useI18n } from '../../../i18n';
+import { useI18n } from '../../../../../i18n';
+import { onMounted, ref } from 'vue';
 
 const { t } = useI18n();
+const systemInfoBase = ref<any>(null);
+
+onMounted(() => {
+  if (uni.getSystemInfoSync) {
+    try {
+      systemInfoBase.value = uni.getSystemInfoSync();
+    } catch (_e) {
+      // ignore
+    }
+  }
+});
 
 defineProps<{
   theme?: string;

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

@@ -21,9 +21,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import DevToolTitle from '../../DevToolTitle/index.vue';
-import Pick from '../../Pick/index.vue';
+import Pick from '../../../../components/Pick/index.vue';
 import SettingButton from '../../SettingButton/index.vue';
-import { useI18n } from '../../../i18n';
+import { useI18n } from '../../../../../i18n';
 
 const { t, locale, setLocale } = useI18n();
 

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

@@ -161,8 +161,8 @@
 import { computed, reactive } from 'vue';
 import DevToolTitle from '../../DevToolTitle/index.vue';
 import SettingButton from '../../SettingButton/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/{SettingList → DevTool/components/SettingList}/modules/SettingNetwork.vue

@@ -81,9 +81,9 @@
 <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';
+import Tag from '../../../../components/Tag/index.vue';
+import { useI18n } from '../../../../../i18n';
+import { getThemeMainColor } from '../../../../styles/theme';
 
 const { t } = useI18n();
 const themeColor = computed(() => getThemeMainColor(props.theme));

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

@@ -94,9 +94,20 @@
           :options="fontWeightList"
           custom-style="width: 150px" />
       </view>
-      <SettingButton @click="onSave">
+      <SettingButton @click="onSave" style="margin-bottom: 8px">
         {{ t('setting.theme.save') }}
       </SettingButton>
+
+      <SettingButton @click="onToggleSafeArea" style="margin-bottom: 8px">
+        {{
+          showingSafeArea
+            ? t('setting.theme.hideSafeArea')
+            : t('setting.theme.showSafeArea')
+        }}
+      </SettingButton>
+      <view class="setting-tips" style="margin-bottom: 12px">
+        {{ t('setting.theme.showSafeAreaTip') }}
+      </view>
     </view>
   </view>
 </template>
@@ -105,9 +116,14 @@
 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';
+import Pick from '../../../../components/Pick/index.vue';
+import { useI18n } from '../../../../../i18n';
+import { getThemeMainColor } from '../../../../styles/theme';
+import { DEV_UI_MESSAGE } from '../../../../../const';
+import {
+  getDevToolInfo,
+  setDevToolInfo,
+} from '../../../../../modules/devToolInfo';
 
 const { t } = useI18n();
 const themeColor = computed(() => getThemeMainColor(props.theme));
@@ -162,6 +178,17 @@ const localTipsFontSize = ref(props.tipsFontSize || 10);
 const localFontFamily = ref(props.fontFamily || '');
 const localFontWeight = ref(props.fontWeight || 'normal');
 
+const showingSafeArea = ref(getDevToolInfo()?.showingSafeArea || false);
+
+function onToggleSafeArea() {
+  showingSafeArea.value = !showingSafeArea.value;
+  setDevToolInfo({ showingSafeArea: showingSafeArea.value });
+  uni.$emit(DEV_UI_MESSAGE, {
+    type: 'TOGGLE_SAFE_AREA',
+    data: showingSafeArea.value,
+  });
+}
+
 const fontWeightList = [
   { label: 'Normal (400)', value: 'normal' },
   { label: 'Medium (500)', value: '500' },
@@ -220,16 +247,19 @@ function onToggleTransition() {
   emit('changeUseTransition', !props.useTransition);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function onBaseFontSizeInput(e: any) {
-  localBaseFontSize.value = e.detail.value;
+  localBaseFontSize.value = Number(e.detail.value);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function onTagFontSizeInput(e: any) {
-  localTagFontSize.value = e.detail.value;
+  localTagFontSize.value = Number(e.detail.value);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function onTipsFontSizeInput(e: any) {
-  localTipsFontSize.value = e.detail.value;
+  localTipsFontSize.value = Number(e.detail.value);
 }
 
 function onSave() {

package/dist/v3/{SourceCode → DevTool/components/SourceCode}/Line.vue

@@ -1,15 +1,13 @@
 <template>
   <view
     :class="['source-code-line', active ? 'source-code-line-active' : '']"
-    :id="id"
-  >
+    :id="id">
     <view class="source-code-line-num" v-if="showNum">{{ num }}</view>
     <view :class="['source-code-line-content', line.class]">
       <view
         v-for="(item, index) in line.words"
         :key="index"
-        :class="['source-code-line-word', item.class]"
-      >
+        :class="['source-code-line-word', item.class]">
         {{ item.word }}
       </view>
     </view>
@@ -37,6 +35,8 @@ const _props = withDefaults(
   display: flex;
   align-items: center;
   height: 20px;
+  font-family: Consolas, Monaco, 'Courier New', monospace;
+  position: relative;
 }
 
 .source-code-line-active {
@@ -47,10 +47,14 @@ const _props = withDefaults(
 }
 
 .source-code-line-num {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background-color: var(--dev-tool-bg3-color);
   flex-shrink: 0;
   width: 30px;
   padding: 0 6px;
-  margin-right: 6px;
+  margin-right: 15px;
   text-align: right;
   height: 20px;
   border-right: 1px solid var(--dev-tool-border-color);
@@ -58,20 +62,27 @@ const _props = withDefaults(
 
 .source-code-line-content {
   display: flex;
-  white-space: nowrap;
+  white-space: pre;
   height: 20px;
+  user-select: text; /* 方便后续选取或直接开启 contenteditable 编辑 */
 }
 
 .source-code-line-word {
-  white-space: nowrap;
+  white-space: pre;
+  box-sizing: border-box;
 }
 
-.source-code-pre-note {
-  color: var(--dev-tool-note-color);
+.source-code-pre-space {
+  border-left: 1px dashed var(--dev-tool-border-color);
+
+  /* The color can be made softer if default border is too prominent */
+  border-left-color: rgb(146 84 222 / 15%); /* matching theme slightly */
+  margin-left: -1px; /* collapse border so spaces stay aligned perfectly */
+  padding-left: 1px;
 }
 
-.source-code-pre-space {
-  width: 8px;
+.source-code-pre-note {
+  color: var(--dev-tool-note-color);
 }
 
 .source-code-pre-keyword {

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

@@ -32,14 +32,14 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { computed, ref, onMounted } from 'vue';
-// import FilterInput from '../FilterInput/index.vue';
-import CircularButton from '../CircularButton/index.vue';
-import VirtualList from '../VirtualList/index.vue';
-import Empty from '../Empty/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
+import { computed, ref, shallowRef, onMounted } from 'vue';
+// import FilterInput from '../../../components/FilterInput/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
 import Line from './Line.vue';
-import { isAndroid, parseStock } from '../../utils';
+import { isAndroid, parseStock } from '../../../../utils';
 import { parseCode, type LineInfo } from './parseCode';
 const props = defineProps<{
   url: string;
@@ -63,7 +63,7 @@ const _scrollIntoView = ref('');
 
 // let backupCodes: string[] = [];
 
-const codes = ref<LineInfo[]>([]);
+const codes = shallowRef<LineInfo[]>([]);
 // const defaultCurrent = ref(1);
 const pageSize = 50;