vite-uni-dev-tool 1.0.0 → 1.1.0

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

@@ -1,230 +1,230 @@
-<template>
-  <view class="setting-item" style="padding-bottom: 16px">
-    <DevToolTitle>{{ t('setting.log.title') }}</DevToolTitle>
-    <view class="setting-item-content">
-      <checkbox-group @change="onToggleCacheConsole">
-        <label class="setting-row">
-          <view>{{ t('setting.log.cacheConsoleLog') }}：</view>
-          <checkbox
-            :checked="cacheConsoleLog"
-            value="true"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </label>
-      </checkbox-group>
-      <view class="setting-tips">
-        {{ t('setting.log.cacheConsoleLogTip') }}
-      </view>
-    </view>
-    <checkbox-group @change="onChangeSetting">
-      <view class="setting-item-content">
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportLog') }}：</view>
-          <checkbox
-            :checked="setting.exportLog"
-            :color="themeColor"
-            value="exportLog"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">{{ t('setting.log.exportLogTip') }}</view>
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportNetwork') }}：</view>
-          <checkbox
-            :checked="setting.exportNetwork"
-            value="exportNetwork"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">
-          {{ t('setting.log.exportNetworkTip') }}
-        </view>
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportTransfer') }}：</view>
-          <checkbox
-            :checked="setting.exportTransfer"
-            value="exportTransfer"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">
-          {{ t('setting.log.exportTransferTip') }}
-        </view>
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportWebsocket') }}：</view>
-          <checkbox
-            :checked="setting.exportWebsocket"
-            value="exportWebsocket"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">
-          {{ t('setting.log.exportWebsocketTip') }}
-        </view>
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportStorage') }}：</view>
-          <checkbox
-            :checked="setting.exportStorage"
-            value="exportStorage"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">
-          {{ t('setting.log.exportStorageTip') }}
-        </view>
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportWindow') }}：</view>
-          <checkbox
-            :checked="setting.exportWindow"
-            value="exportWindow"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">{{ t('setting.log.exportWindowTip') }}</view>
-
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportDevice') }}：</view>
-          <checkbox
-            :checked="setting.exportDevice"
-            value="exportDevice"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">{{ t('setting.log.exportDeviceTip') }}</view>
-
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportSystem') }}：</view>
-          <checkbox
-            :checked="setting.exportSystem"
-            value="exportSystem"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">{{ t('setting.log.exportSystemTip') }}</view>
-
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportUniEvent') }}：</view>
-          <checkbox
-            :checked="setting.exportUniEvent"
-            value="exportUniEvent"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">
-          {{ t('setting.log.exportUniEventTip') }}
-        </view>
-
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportElEvent') }}：</view>
-          <checkbox
-            :checked="setting.exportElEvent"
-            value="exportElEvent"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">
-          {{ t('setting.log.exportElEventTip') }}
-        </view>
-
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportScanCodeList') }}：</view>
-          <checkbox
-            :checked="setting.exportScanCodeList"
-            value="exportScanCodeList"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">
-          {{ t('setting.log.exportScanCodeListTip') }}
-        </view>
-
-        <view class="setting-row">
-          <view>{{ t('setting.log.exportNfcList') }}：</view>
-          <checkbox
-            :checked="setting.exportNfcList"
-            value="exportNfcList"
-            :color="themeColor"
-            style="transform: scale(0.8)" />
-        </view>
-        <view class="setting-tips">
-          {{ t('setting.log.exportNfcListTip') }}
-        </view>
-
-        <SettingButton @click="onExportLog">
-          {{ t('setting.log.export') }}
-        </SettingButton>
-      </view>
-    </checkbox-group>
-  </view>
-</template>
-
-<script setup lang="ts">
-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';
-
-const { t } = useI18n();
-const themeColor = computed(() => getThemeMainColor(props.theme));
-
-const setting = reactive({
-  exportLog: false,
-  exportNetwork: false,
-  exportTransfer: false,
-  exportStorage: false,
-  exportWebsocket: false,
-  exportWindow: false,
-  exportDevice: false,
-  exportSystem: false,
-  exportUniEvent: false,
-  exportElEvent: false,
-  exportScanCodeList: false,
-  exportNfcList: false,
-});
-
-const props = defineProps<{
-  theme?: string;
-  cacheConsoleLog?: boolean;
-}>();
-
-const emit = defineEmits<{
-  (e: 'exportLog', params: any): void;
-  (e: 'change-cache-console-log', value: boolean): void;
-}>();
-
-function onToggleCacheConsole() {
-  emit('change-cache-console-log', !props.cacheConsoleLog);
-}
-
-function onExportLog() {
-  if (
-    setting.exportLog ||
-    setting.exportNetwork ||
-    setting.exportStorage ||
-    setting.exportTransfer
-  ) {
-    emit('exportLog', { ...setting });
-  }
-}
-
-function onChangeSetting(e: any) {
-  const value = e.detail?.value ?? [];
-
-  setting.exportLog = value.includes('exportLog');
-  setting.exportNetwork = value.includes('exportNetwork');
-  setting.exportStorage = value.includes('exportStorage');
-  setting.exportWebsocket = value.includes('exportWebsocket');
-  setting.exportTransfer = value.includes('exportTransfer');
-  setting.exportWindow = value.includes('exportWindow');
-  setting.exportDevice = value.includes('exportDevice');
-  setting.exportSystem = value.includes('exportSystem');
-  setting.exportUniEvent = value.includes('exportUniEvent');
-  setting.exportElEvent = value.includes('exportElEvent');
-  setting.exportScanCodeList = value.includes('exportScanCodeList');
-  setting.exportNfcList = value.includes('exportNfcList');
-}
-</script>
-
-<style scoped>
-@import '../index.css';
-</style>
+<template>
+  <view class="setting-item" style="padding-bottom: 16px">
+    <DevToolTitle>{{ t('setting.log.title') }}</DevToolTitle>
+    <view class="setting-item-content">
+      <checkbox-group @change="onToggleCacheConsole">
+        <label class="setting-row">
+          <view>{{ t('setting.log.cacheConsoleLog') }}：</view>
+          <checkbox
+            :checked="cacheConsoleLog"
+            value="true"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </label>
+      </checkbox-group>
+      <view class="setting-tips">
+        {{ t('setting.log.cacheConsoleLogTip') }}
+      </view>
+    </view>
+    <checkbox-group @change="onChangeSetting">
+      <view class="setting-item-content">
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportLog') }}：</view>
+          <checkbox
+            :checked="setting.exportLog"
+            :color="themeColor"
+            value="exportLog"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">{{ t('setting.log.exportLogTip') }}</view>
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportNetwork') }}：</view>
+          <checkbox
+            :checked="setting.exportNetwork"
+            value="exportNetwork"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">
+          {{ t('setting.log.exportNetworkTip') }}
+        </view>
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportTransfer') }}：</view>
+          <checkbox
+            :checked="setting.exportTransfer"
+            value="exportTransfer"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">
+          {{ t('setting.log.exportTransferTip') }}
+        </view>
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportWebsocket') }}：</view>
+          <checkbox
+            :checked="setting.exportWebsocket"
+            value="exportWebsocket"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">
+          {{ t('setting.log.exportWebsocketTip') }}
+        </view>
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportStorage') }}：</view>
+          <checkbox
+            :checked="setting.exportStorage"
+            value="exportStorage"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">
+          {{ t('setting.log.exportStorageTip') }}
+        </view>
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportWindow') }}：</view>
+          <checkbox
+            :checked="setting.exportWindow"
+            value="exportWindow"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">{{ t('setting.log.exportWindowTip') }}</view>
+
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportDevice') }}：</view>
+          <checkbox
+            :checked="setting.exportDevice"
+            value="exportDevice"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">{{ t('setting.log.exportDeviceTip') }}</view>
+
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportSystem') }}：</view>
+          <checkbox
+            :checked="setting.exportSystem"
+            value="exportSystem"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">{{ t('setting.log.exportSystemTip') }}</view>
+
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportUniEvent') }}：</view>
+          <checkbox
+            :checked="setting.exportUniEvent"
+            value="exportUniEvent"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">
+          {{ t('setting.log.exportUniEventTip') }}
+        </view>
+
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportElEvent') }}：</view>
+          <checkbox
+            :checked="setting.exportElEvent"
+            value="exportElEvent"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">
+          {{ t('setting.log.exportElEventTip') }}
+        </view>
+
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportScanCodeList') }}：</view>
+          <checkbox
+            :checked="setting.exportScanCodeList"
+            value="exportScanCodeList"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">
+          {{ t('setting.log.exportScanCodeListTip') }}
+        </view>
+
+        <view class="setting-row">
+          <view>{{ t('setting.log.exportNfcList') }}：</view>
+          <checkbox
+            :checked="setting.exportNfcList"
+            value="exportNfcList"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+        </view>
+        <view class="setting-tips">
+          {{ t('setting.log.exportNfcListTip') }}
+        </view>
+
+        <SettingButton @click="onExportLog">
+          {{ t('setting.log.export') }}
+        </SettingButton>
+      </view>
+    </checkbox-group>
+  </view>
+</template>
+
+<script setup lang="ts">
+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';
+
+const { t } = useI18n();
+const themeColor = computed(() => getThemeMainColor(props.theme));
+
+const setting = reactive({
+  exportLog: false,
+  exportNetwork: false,
+  exportTransfer: false,
+  exportStorage: false,
+  exportWebsocket: false,
+  exportWindow: false,
+  exportDevice: false,
+  exportSystem: false,
+  exportUniEvent: false,
+  exportElEvent: false,
+  exportScanCodeList: false,
+  exportNfcList: false,
+});
+
+const props = defineProps<{
+  theme?: string;
+  cacheConsoleLog?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'exportLog', params: any): void;
+  (e: 'change-cache-console-log', value: boolean): void;
+}>();
+
+function onToggleCacheConsole() {
+  emit('change-cache-console-log', !props.cacheConsoleLog);
+}
+
+function onExportLog() {
+  if (
+    setting.exportLog ||
+    setting.exportNetwork ||
+    setting.exportStorage ||
+    setting.exportTransfer
+  ) {
+    emit('exportLog', { ...setting });
+  }
+}
+
+function onChangeSetting(e: any) {
+  const value = e.detail?.value ?? [];
+
+  setting.exportLog = value.includes('exportLog');
+  setting.exportNetwork = value.includes('exportNetwork');
+  setting.exportStorage = value.includes('exportStorage');
+  setting.exportWebsocket = value.includes('exportWebsocket');
+  setting.exportTransfer = value.includes('exportTransfer');
+  setting.exportWindow = value.includes('exportWindow');
+  setting.exportDevice = value.includes('exportDevice');
+  setting.exportSystem = value.includes('exportSystem');
+  setting.exportUniEvent = value.includes('exportUniEvent');
+  setting.exportElEvent = value.includes('exportElEvent');
+  setting.exportScanCodeList = value.includes('exportScanCodeList');
+  setting.exportNfcList = value.includes('exportNfcList');
+}
+</script>
+
+<style scoped>
+@import '../index.css';
+</style>

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/{SettingList → DevTool/components/SettingList}/typing.d.ts

@@ -1,2 +1,2 @@
-// 插件版本号
-declare const __VERSION__: string;
+// 插件版本号
+declare const __VERSION__: string;