vite-uni-dev-tool 0.0.1

package/README.md

@@ -0,0 +1,120 @@
+# vite-uni-dev-tool
+
+用于 vue3 + ts + uni-app 的开发调试插件
+
+## 安装
+
+```cmd
+# 使用 npm 安装
+npm i vite-uni-dev-tool
+
+# 使用 pnpm 安装
+pnpm i vite-uni-dev-tool
+
+# 使用 yarn 安装
+yarn add vite-uni-dev-tool
+```
+
+## 使用方法
+
+```ts
+import { defineConfig } from 'vite';
+import uni from '@dcloudio/vite-plugin-uni';
+
+import uniDevTool from 'vite-uni-dev-tool';
+import pages from './src/pages.json';
+import * as path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    // 一定要在 uni() 之前调用 否则微信小程序将无法解组件
+    uniDevTool({
+      pages,
+    }),
+    uni(),
+  ],
+  server: {
+    host: true,
+    port: 10088,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+});
+```
+
+### 注意事项
+
+### 兼容性说明
+
+| vue2 | vue3 |
+| ---- | ---- |
+| x    | √    |
+
+| 微信小程序 | 安卓 | 其他 |
+| ---------- | ---- | ---- |
+| √          | √    | x    |
+
+### 预览
+
+- 支持 console 日志
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/console.jpg)
+
+- 支持 network 监控
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/network1.jpg)
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/network2.jpg)
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/network3.jpg)
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/network4.jpg)
+
+- 支持 upload 监控
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/upload1.jpg)
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/upload2.jpg)
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/upload3.jpg)
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/upload4.jpg)
+
+- 支持 websocket 监控
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/websocket1.jpg)
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/websocket2.jpg)
+
+- 支持 connection 网络状态查看
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/connection.jpg)
+
+- 支持 route 查看，跳转
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/route.jpg)
+
+- 支持 storage 监控，编辑
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/storage.jpg)
+
+- 支持 vuex 监控，编辑
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/vuex.jpg)
+
+- 支持 pinia 监控，编辑
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/pinia.jpg)
+
+- 支持查看 window 信息
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/window.jpg)
+
+- 支持查看 device 信息
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/device.jpg)
+
+- 支持查看 system 信息
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/system.jpg)
+
+- setting 页，支持重启，导出日志（h5,app）
+
+![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/core/public/setting.jpg)

package/dev/components/Button/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <view class="button" :style="style" @click="onClick">
+    <slot></slot>
+  </view>
+</template>
+<script lang="ts" setup>
+defineProps<{ style?: any }>();
+const emit = defineEmits<{ (e: 'click', event?: MouseEvent): void }>();
+const onClick = (e: MouseEvent) => {
+  emit('click', e);
+};
+</script>
+<style scoped>
+.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;
+}
+
+.button:active {
+  background-color: darken(#9254de, 10%);
+}
+</style>

package/dev/components/Checkbox/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <view
+    :class="`checkbox ${modelValue ? 'checkbox-active' : ''}`"
+    @click="onClickCheckbox"
+  >
+    {{ modelValue ? '√' : '' }}
+  </view>
+</template>
+<script lang="ts" setup>
+const props = defineProps<{
+  modelValue?: boolean;
+}>();
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'change', value: boolean): void;
+}>();
+
+function onClickCheckbox() {
+  const value = !props.modelValue;
+  emit('update:modelValue', value);
+  emit('change', value);
+}
+</script>
+<style scoped>
+.checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1px solid var(--dev-tool-main-color);
+  transition: all 0.3s;
+  color: #fff;
+  box-sizing: border-box;
+}
+.checkbox-active {
+  background-color: var(--dev-tool-main-color);
+}
+</style>

package/dev/components/CloseButton/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <view class="close-button" @click="onClick"> × </view>
+</template>
+<script lang="ts" setup>
+const emit = defineEmits<{ (e: 'click'): void }>();
+
+function onClick() {
+  emit('click');
+}
+</script>
+
+<style scoped>
+.close-button {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  border-radius: 50%;
+  border: 1px solid #000;
+  box-sizing: border-box;
+}
+</style>

package/dev/components/Connection/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <view class="connection-content">
+    <view class="connection-item">
+      <view class="connection-item-title">网络连接</view>
+      <view class="connection-item-content">
+        <view class="connection-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="connection-row">
+          <view>连接状态：</view>
+          <Tag
+            :mode="
+              netWorkStatus?.isConnected === undefined
+                ? 'info'
+                : netWorkStatus?.isConnected
+                ? 'success'
+                : 'error'
+            "
+          >
+            {{
+              netWorkStatus?.isConnected === undefined
+                ? '未获取'
+                : netWorkStatus?.isConnected
+                ? '已连接'
+                : '已断开'
+            }}
+          </Tag>
+        </view>
+        <view class="connection-row">
+          <view>网络类型：</view>
+          <Tag mode="info">{{ netWorkStatus?.networkType ?? '未获取' }}</Tag>
+        </view>
+        <!-- <view class="connection-row">
+          <view>上传速度：</view>
+          <view>0 B/s</view>
+        </view>
+        <view class="connection-row">
+          <view>下载速度：</view>
+          <view>0 B/s</view>
+        </view> -->
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import Tag from '../Tag/index.vue';
+defineProps<{
+  netWorkStatus: {
+    isConnected?: boolean;
+    networkType?: string;
+    ip?: string;
+  };
+}>();
+</script>
+<style scoped>
+.connection-content {
+  height: 100%;
+  overflow: auto;
+  font-size: var(--dev-tool-base-font-size);
+}
+.connection-content .connection-item {
+  padding: 16px 16px 0 16px;
+  box-sizing: border-box;
+}
+.connection-content .connection-item .connection-item-title {
+  display: flex;
+  align-items: center;
+}
+.connection-content .connection-item .connection-item-title::before {
+  content: '';
+  margin-right: 8px;
+  width: 2px;
+  height: 18px;
+  border-radius: 2px;
+  background-color: var(--dev-tool-main-color);
+}
+.connection-content .connection-item .connection-item-content .connection-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 8px 0;
+}
+</style>

package/dev/components/ConsoleList/ConsoleItem.vue

@@ -0,0 +1,89 @@
+<template>
+  <view :class="`console-item console-item-${consoleItem.type}`">
+    <view class="console-info">
+      <view class="console-args">
+        <view
+          class="console-arg"
+          v-for="(item, index) in consoleItem.args"
+          :key="index"
+          v-html="item"
+        >
+        </view>
+      </view>
+      <view class="console-position">
+        <Tag :mode="consoleItem.type" style="margin: 0 4px">
+          {{ consoleItem.type }}
+        </Tag>
+        <view>
+          <view class="console-time">{{ consoleItem.time }}</view>
+          <view class="console-other" v-html="consoleItem.position"></view>
+          <view
+            class="console-other"
+            v-if="consoleItem.stack"
+            v-html="consoleItem.stack"
+          ></view>
+        </view>
+      </view>
+    </view>
+    <!-- <view class="console-copy">C</view> -->
+  </view>
+</template>
+
+<script setup lang="ts">
+import Tag from '../Tag/index.vue';
+import type { DevTool } from '../../type';
+defineProps<{ consoleItem: DevTool.ConsoleItem }>();
+</script>
+<style scoped>
+.console-item {
+  display: flex;
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-size: var(--dev-tool-base-font-size);
+}
+.console-item .console-info {
+  flex: 1;
+}
+.console-item .console-info .console-args {
+  display: flex;
+  flex-wrap: wrap;
+  color: #000;
+}
+.console-item .console-info .console-args .console-arg {
+  margin-right: 4px;
+  word-break: break-all;
+}
+.console-item .console-info .console-position {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-top: 4px;
+  color: #616161;
+  text-align: right;
+}
+.console-item .console-info .console-position .console-time {
+  margin-right: auto;
+  word-break: break-all;
+}
+.console-item .console-info .console-position .console-other {
+  word-break: break-all;
+}
+.console-item .console-copy {
+  flex-shrink: 0;
+  margin-left: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #fff;
+  border-radius: 50%;
+  background-color: var(--dev-tool-success-color);
+}
+.console-item-info {
+  color: #9c9c9c;
+}
+.console-item-log {
+  color: #f9f9f9;
+}
+</style>

package/dev/components/ConsoleList/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <view class="console-content">
+    <view class="console-control">
+      <FilterInput
+        :modelValue="modelValue"
+        @search="emit('search', $event)"
+        @update:modelValue="emit('update:modelValue', $event)"
+      />
+      <Tag
+        v-for="item in consoleFilterItems"
+        :mode="item.value"
+        :key="item.value"
+        :active="currentConsoleType === item.value"
+        @click="onChoose(item.value)"
+        >{{ item.label }}</Tag
+      >
+    </view>
+    <view class="console-list">
+      <ConsoleItem
+        v-for="(item, index) in consoleList"
+        :consoleItem="item"
+        :key="index"
+      />
+      <Empty v-if="!consoleList || consoleList.length === 0" />
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import ConsoleItem from './ConsoleItem.vue';
+import Tag from '../Tag/index.vue';
+import Empty from '../Empty/index.vue';
+import FilterInput from '../FilterInput/index.vue';
+import type { DevTool } from '../../type';
+type ConsoleType = 'all' | 'log' | 'info' | 'warn' | 'error' | 'clear';
+defineProps<{
+  consoleList: DevTool.ConsoleItem[];
+  currentConsoleType: string;
+  modelValue: string;
+}>();
+const emit = defineEmits<{
+  (e: 'choose', type: ConsoleType): void;
+  (e: 'search', value: string): void;
+  (e: 'update:modelValue', value: string): void;
+}>();
+const consoleFilterItems: {
+  label: string;
+  value: ConsoleType;
+}[] = [
+  {
+    label: '全部',
+    value: 'all',
+  },
+  {
+    label: 'info',
+    value: 'info',
+  },
+  {
+    label: 'log',
+    value: 'log',
+  },
+  {
+    label: 'warn',
+    value: 'warn',
+  },
+  {
+    label: 'error',
+    value: 'error',
+  },
+  {
+    label: '清除',
+    value: 'clear',
+  },
+];
+
+function onChoose(type: ConsoleType) {
+  emit('choose', type);
+}
+</script>
+<style scoped>
+.console-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+.console-list {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+.console-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+</style>

package/dev/components/DevTool/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <view class="dev-tool">
+    <DevToolButton
+      v-if="devToolButtonVisible"
+      :buttonSize="buttonProps.buttonSize"
+      :buttonText="buttonProps.buttonText"
+      :buttonColor="buttonProps.buttonColor"
+      :buttonFontSize="buttonProps.buttonFontSize"
+      :buttonBackgroundColor="buttonProps.buttonBackgroundColor"
+      @click="onDevToolButtonClick"
+    />
+    <DevToolWindow
+      :open="devToolWindowVisible"
+      :data="windowData"
+      @close="onShowDevToolWindow(false)"
+      @sendMessage="onSendMessage"
+    />
+    <!-- <view class="devTool-canvas">
+      <canvas canvas-id="fullscreenCanvas" id="fullscreenCanvas" />
+    </view> -->
+  </view>
+</template>
+<script lang="ts" setup>
+import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
+import { reactive, ref, nextTick } from 'vue';
+import DevToolButton from '../DevToolButton/index.vue';
+import DevToolWindow from '../DevToolWindow/index.vue';
+
+import {
+  EVENT_DEV_BUTTON,
+  EVENT_DEV_WINDOW,
+  DEV_WINDOW_MESSAGE,
+  DEV_WINDOW_OPEN,
+  DEV_WINDOW_CLOSE,
+  DEV_OPTION_GET,
+  DEV_OPTION_SEND,
+} from '../../const';
+import type { DevTool } from '../../type';
+
+let isActive = false;
+
+const buttonProps = reactive({
+  buttonSize: 50,
+  buttonText: '🐜',
+  buttonColor: '#fff',
+  buttonFontSize: '16px',
+  buttonBackgroundColor: 'rgba(255, 255, 255, 0)',
+});
+
+const windowData = ref<DevTool.WindowData>({});
+
+const devToolWindowVisible = ref(false);
+const devToolButtonVisible = ref(false);
+function onDevToolButtonClick() {
+  onShowDevToolWindow(true);
+  onSendMessage({
+    type: DEV_WINDOW_OPEN,
+    data: {},
+  });
+}
+
+function onShowDevToolButton(show: boolean) {
+  if (!isActive) return;
+  devToolButtonVisible.value = show ?? uni.getStorageSync(EVENT_DEV_BUTTON);
+}
+
+async function onShowDevToolWindow(show: boolean) {
+  if (!isActive) return;
+
+  devToolWindowVisible.value = show;
+  uni.setStorageSync(EVENT_DEV_WINDOW, show);
+}
+
+function onSendMessage(param: { type: string; data: Record<string, any> }) {
+  uni.$emit(DEV_WINDOW_MESSAGE, param);
+}
+
+function onDevOptionSend(options: DevTool.DevToolOptions) {
+  if (options) {
+    buttonProps.buttonSize = options.buttonSize ?? 50;
+    buttonProps.buttonText = options.buttonText ?? '🐜';
+    buttonProps.buttonColor = options.buttonColor ?? '#fff';
+    buttonProps.buttonFontSize = options.buttonFontSize ?? '16px';
+    buttonProps.buttonBackgroundColor =
+      options.buttonBackgroundColor ?? 'rgba(255, 255, 255, 0)';
+  }
+}
+
+onLoad(() => {
+  // 共享状态
+
+  const show = uni.getStorageSync(EVENT_DEV_WINDOW) || false;
+
+  isActive = true;
+  devToolButtonVisible.value = uni.getStorageSync(EVENT_DEV_BUTTON) || false;
+  devToolWindowVisible.value = show;
+  uni.$on(EVENT_DEV_BUTTON, onShowDevToolButton);
+  uni.$on(EVENT_DEV_WINDOW, onShowDevToolWindow);
+  uni.$on(DEV_OPTION_SEND, onDevOptionSend);
+
+  nextTick(() => {
+    uni.$emit(DEV_WINDOW_MESSAGE, { type: DEV_OPTION_GET, data: {} });
+  });
+});
+
+onUnload(() => {
+  uni.$emit(DEV_WINDOW_MESSAGE, {
+    type: DEV_WINDOW_CLOSE,
+    data: {},
+  });
+  uni.$off(EVENT_DEV_BUTTON, onShowDevToolButton);
+  uni.$off(EVENT_DEV_WINDOW, onShowDevToolWindow);
+});
+
+onShow(() => {
+  isActive = true;
+  devToolWindowVisible.value = uni.getStorageSync(EVENT_DEV_WINDOW) || false;
+  devToolButtonVisible.value = uni.getStorageSync(EVENT_DEV_BUTTON) || false;
+  if (devToolWindowVisible.value) {
+    onSendMessage({
+      type: DEV_WINDOW_OPEN,
+      data: {},
+    });
+  }
+});
+onHide(() => {
+  isActive = false;
+  devToolWindowVisible.value = false;
+});
+</script>
+<style scoped>
+.dev-tool {
+  --dev-tool-main-color: #9254de;
+  --dev-tool-border-color: #f0f0f0;
+  --dev-tool-normal-bg-color: #f9f9f9;
+  --dev-tool-warn-color: #ffa940;
+  --dev-tool-warn-bg-color: #fff7e6;
+  --dev-tool-error-color: #ff4d4f;
+  --dev-tool-error-bg-color: #fff1f0;
+  --dev-tool-success-color: #bae637;
+  --dev-tool-success-bg-color: #fcffe6;
+
+  --dev-tool-base-font-size: 12px;
+  --dev-tool-tag-font-size: 10px;
+  --dev-tool-tips-font-size: 10px;
+  font-size: 12px;
+
+  -webkit-tap-highlight-color: transparent;
+}
+
+.dev-tool-canvas {
+  position: fixed;
+  z-index: -99999;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  opacity: 0;
+}
+
+#fullscreenCanvas {
+  width: 100vw;
+  height: 100vh;
+}
+</style>