vite-uni-dev-tool 0.0.48 → 1.0.0

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

@@ -0,0 +1,208 @@
+<template>
+  <view class="setting-item">
+    <DevToolTitle>{{ t('setting.devTool.title') }}</DevToolTitle>
+    <view class="setting-item-content">
+      <view class="setting-row">
+        <view>
+          {{ t('setting.devTool.currentVersion') }}：{{
+            buildInfo?.devToolVersion
+          }}
+        </view>
+        <view>
+          {{ t('setting.devTool.buildTime') }}：{{
+            buildInfo?.devToolBuildTime
+          }}
+        </view>
+      </view>
+      <view class="setting-row">
+        {{ t('setting.devTool.feedbackUrl') }}：
+        <text class="setting-link" @click="onOpenLink">
+          {{ buildInfo?.devToolGit }}
+        </text>
+      </view>
+      <view class="setting-tips">
+        {{ t('setting.devTool.slogan') }}
+      </view>
+      <view class="setting-row">
+        <view>{{ t('setting.devTool.tabsConfig') }}：</view>
+      </view>
+      <view class="setting-tips">
+        {{ t('setting.devTool.tabsConfigTip') }}
+      </view>
+      <checkbox-group class="setting-checkbox-group" @change="onCheckboxChange">
+        <label
+          v-for="item in allTabs"
+          :key="item.key"
+          class="setting-checkbox-item">
+          <checkbox
+            :value="item.key"
+            :checked="!hiddenTabs.includes(item.key)"
+            :color="themeColor"
+            style="transform: scale(0.8)" />
+          <text>{{ item.label }}</text>
+        </label>
+      </checkbox-group>
+      <SettingButton @click="onSaveAndRestart">
+        {{ t('setting.devTool.saveAndRestart') }}
+      </SettingButton>
+
+      <view class="setting-row">
+        <view>{{ t('setting.devTool.showHideButton') }}：</view>
+      </view>
+      <view class="setting-tips">
+        {{ t('setting.devTool.hideButtonTip') }}
+      </view>
+      <SettingButton @click="onToggleDevButton">
+        {{
+          devToolVisible
+            ? t('setting.devTool.hideButton')
+            : t('setting.devTool.showButton')
+        }}
+      </SettingButton>
+      <view class="setting-row">
+        <view>{{ t('setting.devTool.restartDevTool') }}：</view>
+      </view>
+
+      <view class="setting-tips">
+        {{ t('setting.devTool.restartDevToolTip') }}
+      </view>
+      <SettingButton @click="onRestartDevTool">
+        {{ t('setting.devTool.restartDevToolButton') }}
+      </SettingButton>
+
+      <view class="setting-row">
+        <view>{{ t('setting.devTool.destroyDevTool') }}：</view>
+      </view>
+
+      <view class="setting-tips">
+        {{ t('setting.devTool.destroyDevToolTip') }}
+      </view>
+      <SettingButton @click="onDestroyDevTool">
+        {{ t('setting.devTool.destroyDevToolButton') }}
+      </SettingButton>
+
+      <view class="setting-row">
+        <view>{{ t('setting.devTool.restartApp') }}：</view>
+      </view>
+      <view class="setting-tips">{{ t('setting.devTool.restartAppTip') }}</view>
+      <SettingButton @click="onRestartApp">
+        {{ t('setting.devTool.restartAppButton') }}
+      </SettingButton>
+
+      <view class="setting-row">
+        <view>{{ t('setting.devTool.storageUsage') }}：{{ sizeFormat }}</view>
+      </view>
+      <view class="setting-tips">
+        {{ t('setting.devTool.storageUsageTip') }}
+      </view>
+      <SettingButton @click="onClearCache">
+        {{ t('setting.devTool.clearCache') }}
+      </SettingButton>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+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 { getTabItems } from '../../DevToolWindow/const';
+import { getDevToolInfo, setDevToolInfo } from '../../../modules/devToolInfo';
+import { getThemeMainColor } from '../../styles/theme';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  theme?: string;
+  devToolVisible?: boolean;
+  sizeFormat?: string;
+  buildInfo?: {
+    devToolVersion?: string;
+    devToolBuildTime?: string;
+    devToolGit?: string;
+  };
+}>();
+
+const themeColor = computed(() => getThemeMainColor(props.theme));
+
+const emit = defineEmits<{
+  (e: 'showDevButton', show: boolean): void;
+  (e: 'restartDevTool'): void;
+  (e: 'restartApp'): void;
+  (e: 'clearCache'): void;
+  (e: 'destroyDevTool'): void;
+}>();
+
+function onOpenLink() {
+  openOutLink(props.buildInfo?.devToolGit);
+}
+
+function onToggleDevButton() {
+  emit('showDevButton', !props.devToolVisible);
+}
+
+function onRestartDevTool() {
+  emit('restartDevTool');
+}
+
+function onDestroyDevTool() {
+  emit('destroyDevTool');
+}
+
+function onRestartApp() {
+  emit('restartApp');
+}
+
+function onClearCache() {
+  emit('clearCache');
+}
+
+const allTabs = getTabItems(t).filter((item) => item.key !== 'Setting');
+const hiddenTabs = ref<string[]>([]);
+
+onMounted(() => {
+  const info = getDevToolInfo();
+  hiddenTabs.value = info.hiddenTabs || [
+    'Performance',
+    'CaptureScreen',
+    'ScanCode',
+    'NFC',
+    'ElEvent',
+    'UniEvent',
+  ];
+});
+
+function onCheckboxChange(e: any) {
+  const checkedKeys = e.detail.value;
+  hiddenTabs.value = allTabs
+    .map((item) => item.key)
+    .filter((key) => !checkedKeys.includes(key));
+}
+
+function onSaveAndRestart() {
+  setDevToolInfo({
+    hiddenTabs: hiddenTabs.value,
+  });
+  // 重启应用使配置生效
+  emit('restartApp');
+}
+</script>
+
+<style scoped>
+@import '../index.css';
+
+.setting-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.setting-checkbox-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+  min-width: 33.33%;
+}
+</style>

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

@@ -0,0 +1,119 @@
+<template>
+  <view class="setting-item">
+    <DevToolTitle>{{ t('setting.info.title') }}</DevToolTitle>
+    <view class="setting-item-content">
+      <view class="setting-row">{{ t('setting.info.viewWindow') }}：</view>
+      <view class="setting-tips">
+        {{ t('setting.info.viewWindowTip') }}
+      </view>
+      <SettingButton @click="onLookWindowInfo">
+        {{ t('setting.info.viewWindow') }}
+      </SettingButton>
+
+      <view class="setting-row">{{ t('setting.info.viewDevice') }}：</view>
+      <view class="setting-tips">
+        {{ t('setting.info.viewDeviceTip') }}
+      </view>
+      <SettingButton @click="onLookDeviceInfo">
+        {{ 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') }}
+      </view>
+      <SettingButton @click="onLookAppInfo">
+        {{ t('setting.info.viewAppInfo') }}
+      </SettingButton>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import DevToolTitle from '../../DevToolTitle/index.vue';
+import SettingButton from '../../SettingButton/index.vue';
+import { useI18n } from '../../../i18n';
+
+const { t } = useI18n();
+
+defineProps<{
+  theme?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'openJson', data: { title: string; data: any }): void;
+}>();
+
+function onLookWindowInfo() {
+  if (uni.getWindowInfo) {
+    const windowInfo = uni.getWindowInfo();
+    emit('openJson', {
+      title: 'windowInfo',
+      data: windowInfo,
+    });
+  } else {
+    uni.showToast({
+      title: `${t('setting.info.notSupported')} uni.getWindowInfo`,
+    });
+  }
+}
+function onLookDeviceInfo() {
+  if (uni.getDeviceInfo) {
+    const deviceInfo = uni.getDeviceInfo();
+    emit('openJson', {
+      title: 'deviceInfo',
+      data: deviceInfo,
+    });
+  } else {
+    uni.showToast({
+      title: `${t('setting.info.notSupported')} uni.getDeviceInfo`,
+    });
+  }
+}
+async function onLookSystemInfo() {
+  if (uni.getSystemInfo) {
+    const systemInfo = await uni.getSystemInfo();
+    emit('openJson', {
+      title: 'systemInfo',
+      data: systemInfo,
+    });
+  } else {
+    uni.showToast({
+      title: `${t('setting.info.notSupported')} uni.getSystemInfo`,
+    });
+  }
+}
+function onLookAppInfo() {
+  if (uni.getAppBaseInfo) {
+    let appInfo = uni.getAppBaseInfo();
+
+    if (uni.getAppAuthorizeSetting) {
+      appInfo = {
+        ...appInfo,
+        ...uni.getAppAuthorizeSetting(),
+      };
+    }
+
+    emit('openJson', {
+      title: 'appInfo',
+      data: appInfo,
+    });
+  } else {
+    uni.showToast({
+      title: `${t('setting.info.notSupported')} uni.getAppInfo`,
+    });
+  }
+}
+</script>
+
+<style scoped>
+@import '../index.css';
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+  <view class="setting-item">
+    <DevToolTitle>{{ t('setting.devTool.language') }}</DevToolTitle>
+    <view class="setting-item-content">
+      <view class="setting-row">
+        <view>{{ t('setting.devTool.languageTip') }}：</view>
+        <Pick
+          :modelValue="selectedLanguage"
+          :options="languageOptions"
+          :readonly="true"
+          customStyle="width: 100px; flex: none;"
+          @change="onLanguageChange" />
+      </view>
+      <SettingButton @click="onConfirm" style="margin-top: 10px">
+        {{ t('setting.devTool.confirmLanguage') }}
+      </SettingButton>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import DevToolTitle from '../../DevToolTitle/index.vue';
+import Pick from '../../Pick/index.vue';
+import SettingButton from '../../SettingButton/index.vue';
+import { useI18n } from '../../../i18n';
+
+const { t, locale, setLocale } = useI18n();
+
+defineProps<{
+  theme?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'restartApp'): void;
+}>();
+
+const selectedLanguage = ref(locale.value);
+
+const languageOptions = computed(() => [
+  {
+    label: '中文',
+    value: 'zh-Hans',
+  },
+  {
+    label: 'English',
+    value: 'en',
+  },
+]);
+
+function onLanguageChange(item: { label: string; value: any }) {
+  selectedLanguage.value = item.value;
+}
+
+function onConfirm() {
+  if (selectedLanguage.value === locale.value) return;
+
+  setLocale(selectedLanguage.value);
+
+  uni.showToast({
+    title: t('setting.devTool.confirmLanguageTip'),
+    icon: 'none',
+    duration: 1500,
+  });
+
+  setTimeout(() => {
+    emit('restartApp');
+  }, 1500);
+}
+</script>
+
+<style scoped>
+@import '../index.css';
+</style>

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

@@ -0,0 +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>