vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{ConsoleList → DevTool/components/ConsoleList}/ConsoleItem.vue

@@ -1,224 +1,225 @@
-<!-- eslint-disable vue/no-v-text-v-html-on-component -->
-<template>
-  <view :id="id" :class="['console-item', `console-item-${consoleItem.type}`]">
-    <view class="console-args">
-      <view
-        v-for="(item, index) in consoleItem.args"
-        :key="index"
-        :class="`console-arg console-arg-${item.type}`"
-        @click="onClickArg(item)"
-      >
-        <template v-if="item.type === 'image'">
-          <image
-            :src="item.value"
-            :title="item.value"
-            mode="aspectFit"
-            class="console-arg-image"
-          />
-          <view v-html="item.shortValue || item.value"></view>
-        </template>
-
-        <view v-else v-html="item.shortValue || item.value"></view>
-      </view>
-    </view>
-    <view class="console-position">
-      <view class="console-tags">
-        <Tag
-          v-if="consoleItem.mode"
-          mode="log"
-          style="margin-right: 6px; justify-content: center"
-        >
-          {{ consoleItem.mode }}
-        </Tag>
-        <!-- <Tag :mode="consoleItem.type">
-          {{ consoleItem.type }}
-        </Tag> -->
-      </view>
-
-      <view>
-        <view class="console-time">{{ consoleItem.time }}</view>
-        <view v-if="consoleItem.executionTime" class="console-time">
-          {{ t('common.executionTime') }}: {{ consoleItem?.executionTime }}ms
-        </view>
-        <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
-        <view class="console-other" v-html="consoleItem.position"></view>
-        <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
-        <view
-          v-if="consoleItem.stack"
-          v-html="consoleItem.stack"
-          :class="`console-other ${isUseDevSource ? 'console-stack' : ''}`"
-          @click="emit('openCode', consoleItem.stack)"
-        ></view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import Tag from '../Tag/index.vue';
-import type { DevTool } from '../../type';
-import { isMockWX, openOutLink } from '../../utils';
-import { useI18n } from '../../i18n';
-
-const { t } = useI18n();
-const props = defineProps<{
-  consoleItem: DevTool.ConsoleItem;
-  sourceFileServers?: string[];
-  mode?: string;
-  useDevSource?: boolean;
-  zIndex?: number;
-  id: string;
-}>();
-
-const emit = defineEmits<{
-  (e: 'openCode', value: string): void;
-  (e: 'openJson', value: { title?: string; data: Record<string, any> }): void;
-}>();
-
-const isUseDevSource = computed(() => {
-  return (
-    !isMockWX(props?.consoleItem?.stack ?? '') &&
-    props.mode === 'development' &&
-    props.useDevSource
-  );
-});
-
-function onClickArg(item: DevTool.Arg) {
-  if (item.type === 'object' || item.type === 'array') {
-    emit('openJson', { data: item.value });
-  } else if (item.type === 'link') {
-    openOutLink(item.value);
-  } else if (item.type === 'image') {
-    uni.previewImage({
-      urls: [item.value],
-    });
-  }
-}
-</script>
-<style scoped>
-.console-item {
-  padding: 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  font-size: var(--dev-tool-base-font-size);
-}
-
-.console-args {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-
-  /* color: #000; */
-
-  /* color: var(--dev-tool-text-color); */
-}
-
-.console-arg {
-  margin-right: 4px;
-  white-space: pre-line;
-  word-break: break-all;
-}
-
-.console-position {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-top: 4px;
-  text-align: right;
-  color: var(--dev-tool-text-color);
-}
-
-.console-tags {
-  display: flex;
-  align-items: center;
-}
-
-.console-time {
-  margin-right: auto;
-  word-break: break-all;
-}
-
-.console-other {
-  word-break: break-all;
-}
-
-.console-stack {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.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: var(--dev-tool-info-color);
-}
-
-.console-item-log {
-  color: var(--dev-tool-info-color);
-}
-
-.console-item-warn {
-  background-color: var(--dev-tool-warn-bg-color);
-}
-
-.console-item-error {
-  background-color: var(--dev-tool-error-bg-color);
-}
-
-.console-arg-null {
-  color: var(--dev-tool-nil-color);
-}
-
-.console-arg-undefined {
-  color: var(--dev-tool-nil-color);
-}
-
-.console-arg-string {
-  color: var(--dev-tool-nil-color);
-}
-
-.console-arg-number {
-  color: var(--dev-tool-number-color);
-}
-
-.console-arg-boolean {
-  color: var(--dev-tool-boolean-color);
-}
-
-.console-arg-symbol {
-  color: var(--dev-tool-symbol-color);
-}
-
-.console-arg-object,
-.console-arg-array,
-.console-arg-link,
-.console-arg-image {
-  text-decoration: underline;
-  color: var(--dev-tool-attribute-color);
-}
-
-.console-arg-image {
-  display: flex;
-  align-items: center;
-}
-
-.console-arg-image > image {
-  width: 100px;
-  height: 88px;
-
-  /* border: 1px solid var(--dev-tool-border-color); */
-  border-radius: 4px;
-  margin-right: 12px;
-}
-</style>
+<!-- eslint-disable vue/no-v-text-v-html-on-component -->
+<template>
+  <view :id="id" :class="['console-item', `console-item-${consoleItem.type}`]">
+    <view class="console-args">
+      <view
+        v-for="(item, index) in consoleItem.args"
+        :key="index"
+        :class="`console-arg console-arg-${item.type}`"
+        @click="onClickArg(item)">
+        <template v-if="item.type === 'image'">
+          <image
+            :src="item.value"
+            :title="item.value"
+            mode="aspectFit"
+            class="console-arg-image" />
+          <view v-html="item.shortValue || item.value"></view>
+        </template>
+
+        <view v-else v-html="item.shortValue || item.value"></view>
+      </view>
+    </view>
+    <view class="console-position">
+      <view class="console-tags">
+        <Tag
+          v-if="consoleItem.mode"
+          mode="log"
+          style="margin-right: 6px; justify-content: center">
+          {{ consoleItem.mode }}
+        </Tag>
+        <!-- <Tag :mode="consoleItem.type">
+          {{ consoleItem.type }}
+        </Tag> -->
+      </view>
+
+      <view>
+        <view class="console-time">{{ consoleItem.time }}</view>
+        <view v-if="consoleItem.executionTime" class="console-time">
+          {{ t('common.executionTime') }}: {{ consoleItem?.executionTime }}ms
+        </view>
+        <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
+        <view class="console-other" v-html="consoleItem.position"></view>
+        <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
+        <view
+          v-if="consoleItem.stack"
+          v-html="consoleItem.stack"
+          :class="`console-other ${isUseDevSource ? 'console-stack' : ''}`"
+          @click="emit('openCode', consoleItem.stack)"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import Tag from '../../../components/Tag/index.vue';
+import type { DevTool } from '../../../../type';
+
+import { useI18n } from '../../../../i18n';
+import { isMockWX, openOutLink } from '../../../../utils';
+
+const { t } = useI18n();
+const props = defineProps<{
+  consoleItem: DevTool.ConsoleItem;
+  sourceFileServers?: string[];
+  mode?: string;
+  useDevSource?: boolean;
+  zIndex?: number;
+  id: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'openCode', value: string): void;
+  (e: 'openJson', value: { title?: string; data: Record<string, any> }): void;
+}>();
+
+const isUseDevSource = computed(() => {
+  return (
+    !isMockWX(props?.consoleItem?.stack ?? '') &&
+    props.mode === 'development' &&
+    props.useDevSource
+  );
+});
+
+function onClickArg(item: DevTool.Arg) {
+  if (item.type === 'object' || item.type === 'array') {
+    emit('openJson', { data: item.value });
+  } else if (item.type === 'link') {
+    openOutLink(item.value);
+  } else if (item.type === 'image') {
+    uni.previewImage({
+      urls: [item.value],
+    });
+  }
+}
+</script>
+<style scoped>
+.console-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.console-args {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+
+  /* color: #000; */
+
+  /* color: var(--dev-tool-text-color); */
+}
+
+.console-arg {
+  margin-right: 4px;
+  white-space: pre-line;
+  word-break: break-all;
+}
+
+.console-position {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-top: 4px;
+  text-align: right;
+  color: var(--dev-tool-text-color);
+}
+
+.console-tags {
+  display: flex;
+  align-items: center;
+}
+
+.console-time {
+  margin-right: auto;
+  word-break: break-all;
+}
+
+.console-other {
+  word-break: break-all;
+}
+
+.console-stack {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.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: var(--dev-tool-info-color);
+}
+
+.console-item-debug {
+  color: var(--dev-tool-info-color);
+}
+
+.console-item-log {
+  color: var(--dev-tool-info-color);
+}
+
+.console-item-warn {
+  background-color: var(--dev-tool-warn-bg-color);
+}
+
+.console-item-error {
+  background-color: var(--dev-tool-error-bg-color);
+}
+
+.console-arg-null {
+  color: var(--dev-tool-nil-color);
+}
+
+.console-arg-undefined {
+  color: var(--dev-tool-nil-color);
+}
+
+.console-arg-string {
+  color: var(--dev-tool-nil-color);
+}
+
+.console-arg-number {
+  color: var(--dev-tool-number-color);
+}
+
+.console-arg-boolean {
+  color: var(--dev-tool-boolean-color);
+}
+
+.console-arg-symbol {
+  color: var(--dev-tool-symbol-color);
+}
+
+.console-arg-object,
+.console-arg-array,
+.console-arg-link,
+.console-arg-image {
+  text-decoration: underline;
+  color: var(--dev-tool-attribute-color);
+}
+
+.console-arg-image {
+  display: flex;
+  align-items: center;
+}
+
+.console-arg-image > image {
+  width: 100px;
+  height: 88px;
+
+  /* border: 1px solid var(--dev-tool-border-color); */
+  border-radius: 4px;
+  margin-right: 12px;
+}
+</style>