vite-uni-dev-tool 1.0.0 → 1.1.0

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

@@ -1,150 +1,218 @@
-<template>
-  <scroll-view
-    class="setting-content"
-    scroll-y
-    :style="{ height: contentHeight - 32 + 'px' }">
-    <SettingLanguage :theme="theme" @restart-app="onRestartAppWithConfirm" />
-    <SettingDevTool
-      :theme="theme"
-      :dev-tool-visible="devToolVisible"
-      :size-format="sizeFormat"
-      :build-info="buildInfo"
-      @show-dev-button="onShowDevButton"
-      @restart-dev-tool="onRestartDevTool"
-      @restart-app="onRestartAppWithConfirm"
-      @clear-cache="onClearCache"
-      @destroy-dev-tool="onDestroyDevTool" />
-    <SettingNetwork
-      :theme="theme"
-      :net-work-status="netWorkStatus"
-      :cache-intercept-config="cacheInterceptConfig"
-      :cache-network-log="cacheNetworkLog"
-      @change-cache-intercept-config="onChangeCacheInterceptConfig"
-      @change-cache-network-log="onChangeCacheNetworkLog" />
-    <SettingTheme
-      :theme="theme"
-      :use-transition="useTransition"
-      :base-font-size="baseFontSize"
-      :tag-font-size="tagFontSize"
-      :tips-font-size="tipsFontSize"
-      :font-family="fontFamily"
-      :font-weight="fontWeight"
-      @change-theme="onChangeTheme"
-      @change-use-transition="onChangeUseTransition"
-      @change-font="onChangeFont"
-      @restart-app="onRestartAppWithConfirm" />
-    <SettingInfo :theme="theme" @open-json="onOpenJson" />
-    <SettingLog
-      :theme="theme"
-      :cache-console-log="cacheConsoleLog"
-      @export-log="onExportLog"
-      @change-cache-console-log="onChangeCacheConsoleLog" />
-  </scroll-view>
-</template>
-
-<script lang="ts" setup>
-import SettingLanguage from './modules/SettingLanguage.vue';
-import SettingDevTool from './modules/SettingDevTool.vue';
-import SettingNetwork from './modules/SettingNetwork.vue';
-import SettingTheme from './modules/SettingTheme.vue';
-import SettingInfo from './modules/SettingInfo.vue';
-import SettingLog from './modules/SettingLog.vue';
-
-defineProps<{
-  theme?: string; // Added theme prop here as per instruction for SettingLanguage
-  devToolVisible?: boolean;
-  sizeFormat?: string;
-  cacheInterceptConfig?: boolean;
-  cacheNetworkLog?: boolean;
-  cacheConsoleLog?: boolean;
-  useTransition?: boolean;
-  baseFontSize?: number;
-  tagFontSize?: number;
-  tipsFontSize?: number;
-  fontFamily?: string;
-  fontWeight?: string;
-  buildInfo?: {
-    devToolVersion?: string;
-    devToolBuildTime?: string;
-    devToolGit?: string;
-  };
-  netWorkStatus: {
-    isConnected?: boolean;
-    networkType?: string;
-    ip?: string;
-  };
-  contentHeight: number;
-}>();
-
-const emit = defineEmits<{
-  (e: 'showDevButton', show: boolean): void;
-  (e: 'restartDevTool'): void;
-  (e: 'restartApp', confirm?: boolean): void;
-  (e: 'exportLog', params: any): void;
-  (e: 'clearCache'): void;
-  (e: 'destroyDevTool'): void;
-  (e: 'changeTheme', theme: string): void;
-  (e: 'change-cache-intercept-config', value: boolean): void;
-  (e: 'change-cache-network-log', value: boolean): void;
-  (e: 'change-cache-console-log', value: boolean): void;
-  (e: 'change-use-transition', value: boolean): void;
-  (e: 'changeFont', data: any): void;
-  (e: 'openJson', data: any): void;
-}>();
-
-function onShowDevButton(v: boolean) {
-  emit('showDevButton', v);
-}
-
-function onRestartDevTool() {
-  emit('restartDevTool');
-}
-
-function onRestartAppWithConfirm() {
-  emit('restartApp', true);
-}
-
-function onClearCache() {
-  emit('clearCache');
-}
-
-function onDestroyDevTool() {
-  emit('destroyDevTool');
-}
-
-function onChangeCacheInterceptConfig(v: boolean) {
-  emit('change-cache-intercept-config', v);
-}
-
-function onChangeCacheNetworkLog(v: boolean) {
-  emit('change-cache-network-log', v);
-}
-
-function onChangeCacheConsoleLog(v: boolean) {
-  emit('change-cache-console-log', v);
-}
-
-function onChangeTheme(v: string) {
-  emit('changeTheme', v);
-}
-
-function onChangeUseTransition(v: boolean) {
-  emit('change-use-transition', v);
-}
-
-function onChangeFont(v: any) {
-  emit('changeFont', v);
-}
-
-function onOpenJson(v: any) {
-  emit('openJson', v);
-}
-
-function onExportLog(v: any) {
-  emit('exportLog', v);
-}
-</script>
-
-<style scoped>
-@import './index.css';
-</style>
+<template>
+  <scroll-view
+    class="setting-content"
+    scroll-y
+    :style="{ height: contentHeight - 32 + 'px' }">
+    <SettingLanguage :theme="theme" @restart-app="onRestartAppWithConfirm" />
+    <SettingDevTool
+      :theme="theme"
+      :dev-tool-visible="devToolVisible"
+      :size-format="sizeFormat"
+      :build-info="buildInfo"
+      @show-dev-button="onShowDevButton"
+      @restart-dev-tool="onRestartDevTool"
+      @restart-app="onRestartAppWithConfirm"
+      @clear-cache="onClearCache"
+      @destroy-dev-tool="onDestroyDevTool" />
+    <SettingNetwork
+      :theme="theme"
+      :net-work-status="netWorkStatus"
+      :cache-intercept-config="cacheInterceptConfig"
+      :cache-network-log="cacheNetworkLog"
+      @change-cache-intercept-config="onChangeCacheInterceptConfig"
+      @change-cache-network-log="onChangeCacheNetworkLog" />
+    <SettingTheme
+      :theme="theme"
+      :use-transition="useTransition"
+      :base-font-size="baseFontSize"
+      :tag-font-size="tagFontSize"
+      :tips-font-size="tipsFontSize"
+      :font-family="fontFamily"
+      :font-weight="fontWeight"
+      @change-theme="onChangeTheme"
+      @change-use-transition="onChangeUseTransition"
+      @change-font="onChangeFont"
+      @restart-app="onRestartAppWithConfirm" />
+    <SettingInfo :theme="theme" @open-json="onOpenJson" />
+    <SettingLog
+      :theme="theme"
+      :cache-console-log="cacheConsoleLog"
+      @export-log="onExportLog"
+      @change-cache-console-log="onChangeCacheConsoleLog" />
+    <SettingBarrage
+      :theme="theme"
+      :barrage-visible="barrageVisible"
+      :barrage-max-tracks="barrageMaxTracks"
+      :barrage-track-height="barrageTrackHeight"
+      :barrage-start-top="barrageStartTop"
+      :barrage-duration="barrageDuration"
+      :barrage-max-length="barrageMaxLength"
+      :barrage-types="barrageTypes"
+      :barrage-show-when-open="barrageShowWhenOpen"
+      :sizeFormat="sizeFormat"
+      @change-barrage="onChangeBarrage"
+      @change-barrage-max-tracks="onChangeBarrageMaxTracks"
+      @change-barrage-track-height="onChangeBarrageTrackHeight"
+      @change-barrage-start-top="onChangeBarrageStartTop"
+      @change-barrage-duration="onChangeBarrageDuration"
+      @change-barrage-max-length="onChangeBarrageMaxLength"
+      @change-barrage-types="onChangeBarrageTypes"
+      @change-barrage-show-when-open="onChangeBarrageShowWhenOpen" />
+  </scroll-view>
+</template>
+
+<script lang="ts" setup>
+import SettingLanguage from './modules/SettingLanguage.vue';
+import SettingDevTool from './modules/SettingDevTool.vue';
+import SettingNetwork from './modules/SettingNetwork.vue';
+import SettingTheme from './modules/SettingTheme.vue';
+import SettingInfo from './modules/SettingInfo.vue';
+import SettingLog from './modules/SettingLog.vue';
+import SettingBarrage from './modules/SettingBarrage.vue';
+
+defineProps<{
+  theme?: string; // Added theme prop here as per instruction for SettingLanguage
+  devToolVisible?: boolean;
+  sizeFormat?: string;
+  cacheInterceptConfig?: boolean;
+  cacheNetworkLog?: boolean;
+  cacheConsoleLog?: boolean;
+  barrageVisible?: boolean;
+  useTransition?: boolean;
+  baseFontSize?: number;
+  tagFontSize?: number;
+  tipsFontSize?: number;
+  fontFamily?: string;
+  fontWeight?: string;
+  barrageMaxTracks?: number; // 新增
+  barrageTrackHeight?: number; // 新增
+  barrageStartTop?: number; // 新增
+  barrageDuration?: number; // 时长
+  barrageMaxLength?: number; // 长度
+  barrageTypes?: string[]; // 类型
+  barrageShowWhenOpen?: boolean;
+  buildInfo?: {
+    devToolVersion?: string;
+    devToolBuildTime?: string;
+    devToolGit?: string;
+  };
+  netWorkStatus: {
+    isConnected?: boolean;
+    networkType?: string;
+    ip?: string;
+  };
+  contentHeight: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'showDevButton', show: boolean): void;
+  (e: 'restartDevTool'): void;
+  (e: 'restartApp', confirm?: boolean): void;
+  (e: 'exportLog', params: any): void;
+  (e: 'clearCache'): void;
+  (e: 'destroyDevTool'): void;
+  (e: 'changeTheme', theme: string): void;
+  (e: 'change-cache-intercept-config', value: boolean): void;
+  (e: 'change-cache-network-log', value: boolean): void;
+  (e: 'change-cache-console-log', value: boolean): void;
+  (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;
+  (e: 'change-use-transition', value: boolean): void;
+  (e: 'changeFont', data: any): void;
+  (e: 'openJson', data: any): void;
+}>();
+
+function onShowDevButton(v: boolean) {
+  emit('showDevButton', v);
+}
+
+function onRestartDevTool() {
+  emit('restartDevTool');
+}
+
+function onRestartAppWithConfirm() {
+  emit('restartApp', true);
+}
+
+function onClearCache() {
+  emit('clearCache');
+}
+
+function onDestroyDevTool() {
+  emit('destroyDevTool');
+}
+
+function onChangeCacheInterceptConfig(v: boolean) {
+  emit('change-cache-intercept-config', v);
+}
+
+function onChangeCacheNetworkLog(v: boolean) {
+  emit('change-cache-network-log', v);
+}
+
+function onChangeCacheConsoleLog(v: boolean) {
+  emit('change-cache-console-log', v);
+}
+
+function onChangeBarrageDuration(v: number) {
+  emit('change-barrage-duration', v);
+}
+
+function onChangeBarrageMaxLength(v: number) {
+  emit('change-barrage-max-length', v);
+}
+
+function onChangeBarrageTypes(v: string[]) {
+  emit('change-barrage-types', v);
+}
+
+function onChangeBarrageShowWhenOpen(v: boolean) {
+  emit('change-barrage-show-when-open', v);
+}
+
+function onChangeBarrage(v: boolean) {
+  emit('change-barrage', v);
+}
+
+function onChangeBarrageMaxTracks(v: number) {
+  emit('change-barrage-max-tracks', v);
+}
+
+function onChangeBarrageTrackHeight(v: number) {
+  emit('change-barrage-track-height', v);
+}
+
+function onChangeBarrageStartTop(v: number) {
+  emit('change-barrage-start-top', v);
+}
+
+function onChangeTheme(v: string) {
+  emit('changeTheme', v);
+}
+
+function onChangeUseTransition(v: boolean) {
+  emit('change-use-transition', v);
+}
+
+function onChangeFont(v: any) {
+  emit('changeFont', v);
+}
+
+function onOpenJson(v: any) {
+  emit('openJson', v);
+}
+
+function onExportLog(v: any) {
+  emit('exportLog', v);
+}
+</script>
+
+<style scoped>
+@import './index.css';
+</style>

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>