vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/SettingList/index.vue

@@ -1,339 +1,68 @@
 <template>
-  <scroll-view class="setting-content" scroll-y>
-    <view class="setting-item">
-      <DevToolTitle> DevTool </DevToolTitle>
-      <view class="setting-item-content">
-        <view class="setting-row">
-          <view>当前版本：{{ buildInfo?.devToolVersion }}</view>
-          <view>构建时间：{{ buildInfo?.devToolBuildTime }}</view>
-        </view>
-        <view class="setting-row">
-          反馈地址：
-          <text class="setting-link" @click="onOpenLink">
-            {{ buildInfo?.devToolGit }}
-          </text>
-        </view>
-        <view class="setting-tips">
-          一处编写，到处调试 😂 ，如有问题请前往反馈
-        </view>
-        <view class="setting-row">
-          <view>显示/隐藏调试按钮：</view>
-        </view>
-        <view class="setting-tips"> 取消后将不在展示调试按钮 </view>
-        <button
-          class="setting-button"
-          @click="onChangeShowDevButton(!devToolVisible)"
-        >
-          {{ devToolVisible ? '隐藏调试按钮' : '显示调试按钮' }}
-        </button>
-        <view class="setting-row">
-          <view>重启调试器：</view>
-        </view>
-
-        <view class="setting-tips">点击后将会重启调试器</view>
-        <button class="setting-button" @click="onRestartDevTool(true)">
-          重启调试器
-        </button>
-
-        <view class="setting-row">
-          <view>销毁调试器：</view>
-        </view>
-
-        <view class="setting-tips">
-          点击后将会销毁调试器，销毁后不再接收调试信息，需要通过 createDevTool()
-          重新创建
-        </view>
-        <button class="setting-button" @click="onDestructionDevTool">
-          销毁调试器
-        </button>
-
-        <view class="setting-row">
-          <view>重启APP：</view>
-        </view>
-        <view class="setting-tips">点击后将会重启APP</view>
-        <button class="setting-button" @click="onRestartApp(true)">
-          重启APP
-        </button>
-        <view class="setting-row">
-          <view>占用存储空间：{{ sizeFormat }}</view>
-        </view>
-        <view class="setting-tips">
-          当前所有信息占用的存储空间,只会清除 Console, Network, Upload,
-          Websocket, UniEvent
-        </view>
-        <button class="setting-button" @click="onClearCache">清除缓存</button>
-      </view>
-    </view>
-    <view class="setting-item">
-      <DevToolTitle>网络</DevToolTitle>
-      <view class="setting-item-content">
-        <view class="setting-row">
-          <view>IP地址：</view>
-          <Tag
-            :mode="
-              netWorkStatus?.isConnected === undefined || netWorkStatus?.ip
-                ? 'info'
-                : netWorkStatus?.isConnected && netWorkStatus?.ip
-                  ? 'success'
-                  : 'error'
-            "
-          >
-            {{
-              netWorkStatus?.isConnected === undefined
-                ? '未获取'
-                : netWorkStatus?.ip || '未获取'
-            }}
-          </Tag>
-        </view>
-        <view class="setting-tips"> 部分平台无法获取 ip 地址 </view>
-        <view class="setting-row">
-          <view>连接状态：</view>
-          <Tag
-            :mode="
-              netWorkStatus?.isConnected === undefined
-                ? 'info'
-                : netWorkStatus?.isConnected
-                  ? 'success'
-                  : 'error'
-            "
-          >
-            {{
-              netWorkStatus?.isConnected === undefined
-                ? '未获取'
-                : netWorkStatus?.isConnected
-                  ? '已连接'
-                  : '已断开'
-            }}
-          </Tag>
-        </view>
-        <view class="setting-row">
-          <view>网络类型：</view>
-          <Tag mode="info">{{ netWorkStatus?.networkType ?? '未获取' }}</Tag>
-        </view>
-      </view>
-    </view>
-    <view class="setting-item">
-      <DevToolTitle>请求拦截规则</DevToolTitle>
-      <view class="setting-item-content">
-        <view class="setting-row">
-          <view>缓存拦截规则到本地：</view>
-          <checkbox
-            :checked="cacheInterceptConfig"
-            color="#9254de"
-            style="transform: scale(0.8)"
-            @change="onCacheInterceptNetworkConfig"
-          />
-        </view>
-        <view class="setting-tips">勾选后将会把 network 拦截缓存到本地</view>
-      </view>
-    </view>
-    <view class="setting-item">
-      <DevToolTitle>主题</DevToolTitle>
-      <view class="setting-item-content">
-        <view class="setting-theme">
-          <view
-            class="setting-item-theme setting-theme-light"
-            :class="{
-              'setting-theme-active': theme === 'light',
-            }"
-            @click="emit('changeTheme', 'light')"
-          ></view>
-          <view
-            class="setting-item-theme setting-theme-dark"
-            :class="{
-              'setting-theme-active': theme === 'dark',
-            }"
-            @click="emit('changeTheme', 'dark')"
-          ></view>
-        </view>
-      </view>
-    </view>
-    <view class="setting-item">
-      <DevToolTitle>主题</DevToolTitle>
-      <view class="setting-item-content">
-        <view class="setting-row">查看 Window：</view>
-        <view class="setting-tips">
-          通过 uni.getWindowInfo 查看window info,部分平台可能不支持
-        </view>
-        <button class="setting-button" @click="onLookWindowInfo">
-          查看 Window
-        </button>
-
-        <view class="setting-row">查看 Device：</view>
-        <view class="setting-tips">
-          通过 uni.getDeviceInfo 查看 device info,部分平台可能不支持
-        </view>
-        <button class="setting-button" @click="onLookDeviceInfo">
-          查看 Device
-        </button>
-
-        <view class="setting-row">查看 System：</view>
-        <view class="setting-tips">
-          通过 uni.getSystemInfoSync 查看 system info,部分平台可能不支持
-        </view>
-        <button class="setting-button" @click="onLookSystemInfo">
-          查看 System
-        </button>
-
-        <view class="setting-row">查看 AppInfo：</view>
-        <view class="setting-tips">
-          通过 uni.getAppBaseInfo 查看 app info,部分平台可能不支持
-        </view>
-        <button class="setting-button" @click="onLookAppInfo">
-          查看 AppInfo
-        </button>
-      </view>
-    </view>
-    <view class="setting-item" style="padding-bottom: 16px">
-      <DevToolTitle>Log</DevToolTitle>
-      <checkbox-group @change="onChangeSetting">
-        <view class="setting-item-content">
-          <view class="setting-row">
-            <view>导出当前日志信息：</view>
-            <checkbox
-              :checked="setting.exportLog"
-              color="#9254de"
-              value="exportLog"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的Log</view>
-          <view class="setting-row">
-            <view>导出当前网络信息：</view>
-            <checkbox
-              :checked="setting.exportNetwork"
-              value="exportNetwork"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的Network</view>
-          <view class="setting-row">
-            <view>导出当前上传信息：</view>
-            <checkbox
-              :checked="setting.exportUpload"
-              value="exportUpload"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的Upload</view>
-          <view class="setting-row">
-            <view>导出当前套接字信息：</view>
-            <checkbox
-              :checked="setting.exportWebsocket"
-              value="exportWebsocket"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的Websocket</view>
-          <view class="setting-row">
-            <view>导出当前缓存信息：</view>
-            <checkbox
-              :checked="setting.exportStorage"
-              value="exportStorage"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">
-            勾选后将会导出当前的Storage, Vuex, Pinia
-          </view>
-          <view class="setting-row">
-            <view>导出当前窗口信息：</view>
-            <checkbox
-              :checked="setting.exportWindow"
-              value="exportWindow"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的Window</view>
-
-          <view class="setting-row">
-            <view>导出当前设备信息：</view>
-            <checkbox
-              :checked="setting.exportDevice"
-              value="exportDevice"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的Device</view>
-
-          <view class="setting-row">
-            <view>导出当前系统信息：</view>
-            <checkbox
-              :checked="setting.exportSystem"
-              value="exportSystem"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的System</view>
-
-          <view class="setting-row">
-            <view>导出当前Uni事件：</view>
-            <checkbox
-              :checked="setting.exportUniEvent"
-              value="exportUniEvent"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的Uni事件</view>
-
-          <view class="setting-row">
-            <view>导出当前El事件：</view>
-            <checkbox
-              :checked="setting.exportElEvent"
-              value="exportElEvent"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的El事件</view>
-
-          <view class="setting-row">
-            <view>导出当前ScanCode：</view>
-            <checkbox
-              :checked="setting.exportScanCodeList"
-              value="exportScanCodeList"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的ScanCode</view>
-
-          <view class="setting-row">
-            <view>导出当前NFC列表：</view>
-            <checkbox
-              :checked="setting.exportNfcList"
-              value="exportNfcList"
-              color="#9254de"
-              style="transform: scale(0.8)"
-            />
-          </view>
-          <view class="setting-tips">勾选后将会导出当前的NFC列表</view>
-
-          <button class="setting-button" @click="onExportLog">导出</button>
-        </view>
-      </checkbox-group>
-    </view>
+  <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 { reactive } from 'vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import { openOutLink } from '../../utils';
-import Tag from '../Tag/index.vue';
 
-const props = defineProps<{
+<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;
-  theme?: string;
   cacheInterceptConfig?: boolean;
+  cacheNetworkLog?: boolean;
+  cacheConsoleLog?: boolean;
+  useTransition?: boolean;
+  baseFontSize?: number;
+  tagFontSize?: number;
+  tipsFontSize?: number;
+  fontFamily?: string;
+  fontWeight?: string;
   buildInfo?: {
     devToolVersion?: string;
     devToolBuildTime?: string;
@@ -344,248 +73,78 @@ const props = defineProps<{
     networkType?: string;
     ip?: string;
   };
+  contentHeight: number;
 }>();
-const setting = reactive({
-  restartDevTool: false,
-  restartApp: false,
-  exportLog: false,
-  exportNetwork: false,
-  exportUpload: false,
-  exportStorage: false,
-  exportWebsocket: false,
-  exportWindow: false,
-  exportDevice: false,
-  exportSystem: false,
-  exportUniEvent: false,
-  exportElEvent: false,
-  exportScanCodeList: false,
-  exportNfcList: false,
-});
 
 const emit = defineEmits<{
   (e: 'showDevButton', show: boolean): void;
-  (e: 'restartDevTool', restart?: boolean): void;
-  (e: 'restartApp', restart?: boolean): void;
-  (
-    e: 'exportLog',
-    params: {
-      exportLog: boolean;
-      exportNetwork: boolean;
-      exportStorage: boolean;
-      exportWebsocket: boolean;
-      exportUpload: boolean;
-      exportWindow: boolean;
-      exportDevice: boolean;
-      exportSystem: boolean;
-      exportNfcList: boolean;
-    },
-  ): void;
-  (e: 'screenshot'): void;
+  (e: 'restartDevTool'): void;
+  (e: 'restartApp', confirm?: boolean): void;
+  (e: 'exportLog', params: any): void;
   (e: 'clearCache'): void;
   (e: 'destroyDevTool'): void;
-  (e: 'changeTheme', value: string): void;
-  (e: 'changeCacheInterceptConfig', value: boolean): void;
-  (e: 'openJson', data: { title: string; data: any }): 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 onChangeShowDevButton(show: boolean) {
-  emit('showDevButton', show);
-}
-function onRestartDevTool(restart: boolean) {
-  restart && emit('restartDevTool');
+function onShowDevButton(v: boolean) {
+  emit('showDevButton', v);
 }
 
-function onDestructionDevTool() {
-  emit('destroyDevTool');
+function onRestartDevTool() {
+  emit('restartDevTool');
 }
 
-function onRestartApp(restart: boolean) {
-  restart && emit('restartApp');
-}
-function onExportLog() {
-  if (setting.exportLog || setting.exportNetwork || setting.exportStorage) {
-    emit('exportLog', {
-      exportLog: setting.exportLog,
-      exportNetwork: setting.exportNetwork,
-      exportStorage: setting.exportStorage,
-      exportWebsocket: setting.exportWebsocket,
-      exportUpload: setting.exportUpload,
-      exportWindow: setting.exportWindow,
-      exportDevice: setting.exportDevice,
-      exportSystem: setting.exportSystem,
-      exportNfcList: setting.exportNfcList,
-    });
-  }
+function onRestartAppWithConfirm() {
+  emit('restartApp', true);
 }
 
 function onClearCache() {
   emit('clearCache');
 }
 
-function onCacheInterceptNetworkConfig() {
-  emit('changeCacheInterceptConfig', !props.cacheInterceptConfig);
-}
-
-function onOpenLink() {
-  openOutLink(props.buildInfo?.devToolGit);
-}
-
-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.exportUpload = value.includes('exportUpload');
-  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');
-}
-
-function onLookWindowInfo() {
-  if (uni.getWindowInfo) {
-    const windowInfo = uni.getWindowInfo();
-    emit('openJson', {
-      title: 'windowInfo',
-      data: windowInfo,
-    });
-  } else {
-    uni.showToast({
-      title: '不支持 uni.getWindowInfo',
-    });
-  }
-}
-function onLookDeviceInfo() {
-  if (uni.getDeviceInfo) {
-    const deviceInfo = uni.getDeviceInfo();
-    emit('openJson', {
-      title: 'deviceInfo',
-      data: deviceInfo,
-    });
-  } else {
-    uni.showToast({
-      title: '不支持 uni.getDeviceInfo',
-    });
-  }
-}
-function onLookSystemInfo() {
-  if (uni.getSystemInfo) {
-    const systemInfo = uni.getSystemInfo();
-    emit('openJson', {
-      title: 'systemInfo',
-      data: systemInfo,
-    });
-  } else {
-    uni.showToast({
-      title: '不支持 uni.getSystemInfo',
-    });
-  }
+function onDestroyDevTool() {
+  emit('destroyDevTool');
 }
-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: '不支持 uni.getAppInfo',
-    });
-  }
-}
-</script>
-<style scoped>
-.setting-content {
-  height: 100%;
-  overflow: auto;
-  font-size: var(--dev-tool-base-font-size);
-}
-.setting-item {
-  padding: 0 16px;
-  box-sizing: border-box;
+function onChangeCacheInterceptConfig(v: boolean) {
+  emit('change-cache-intercept-config', v);
 }
 
-.setting-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 8px 0;
-  min-height: 18px;
-}
-.setting-tips {
-  color: #616161;
-  font-size: var(--dev-tool-tips-font-size);
-  margin-bottom: 8px;
+function onChangeCacheNetworkLog(v: boolean) {
+  emit('change-cache-network-log', v);
 }
 
-.setting-link {
-  color: var(--dev-tool-main-color);
-  text-decoration: underline;
+function onChangeCacheConsoleLog(v: boolean) {
+  emit('change-cache-console-log', v);
 }
 
-.setting-web-view {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100%;
-  overflow: auto;
+function onChangeTheme(v: string) {
+  emit('changeTheme', v);
 }
 
-.setting-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 32px;
-  border-radius: 4px;
-  color: #fff;
-  outline: none;
-  border: 1px solid transparent;
-  background-color: var(--dev-tool-main-color);
-  transform: all 0.3s;
-  font-size: var(--dev-tool-base-font-size);
-  padding: 0;
-  cursor: pointer;
+function onChangeUseTransition(v: boolean) {
+  emit('change-use-transition', v);
 }
 
-.setting-theme {
-  display: flex;
-  align-items: center;
-  gap: 16px;
+function onChangeFont(v: any) {
+  emit('changeFont', v);
 }
 
-.setting-item-theme {
-  margin-top: 16px;
-  width: 30px;
-  height: 30px;
-
-  border-radius: 4px;
-  border: 1px solid #fff;
+function onOpenJson(v: any) {
+  emit('openJson', v);
 }
 
-.setting-theme-light {
-  background-color: #fff;
-}
-.setting-theme-dark {
-  background-color: rgba(0, 0, 0, 0.8);
+function onExportLog(v: any) {
+  emit('exportLog', v);
 }
+</script>
 
-.setting-theme-active {
-  border: 1px solid var(--dev-tool-main-color);
-}
+<style scoped>
+@import './index.css';
 </style>