vite-uni-dev-tool 1.1.0 → 1.2.1

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

@@ -1,304 +1,320 @@
-<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>
+<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">
+          <view class="setting-label">{{ t('common.barrageAllowDrag') }}</view>
+          <switch
+            :checked="barrageAllowDrag"
+            @change="onBarrageAllowDragChange"
+            color="var(--dev-tool-main-color)"
+            style="transform: scale(0.7)" />
+        </view>
+
+        <!-- 轨道数量 -->
+        <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;
+  barrageAllowDrag?: boolean;
+  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-allow-drag', value: boolean): 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 onBarrageAllowDragChange(e: any) {
+  emit('change-barrage-allow-drag', !!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>