vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{SourceCode → DevTool/components/SourceCode}/Line.vue

@@ -1,116 +1,127 @@
-<template>
-  <view
-    :class="['source-code-line', active ? 'source-code-line-active' : '']"
-    :id="id"
-  >
-    <view class="source-code-line-num" v-if="showNum">{{ num }}</view>
-    <view :class="['source-code-line-content', line.class]">
-      <view
-        v-for="(item, index) in line.words"
-        :key="index"
-        :class="['source-code-line-word', item.class]"
-      >
-        {{ item.word }}
-      </view>
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import type { LineInfo } from './parseCode';
-
-const _props = withDefaults(
-  defineProps<{
-    line: LineInfo;
-
-    id: string;
-    active?: boolean;
-    num?: number;
-    showNum?: boolean;
-  }>(),
-  {
-    showNum: true,
-  },
-);
-</script>
-<style lang="scss" scoped>
-.source-code-line {
-  display: flex;
-  align-items: center;
-  height: 20px;
-}
-
-.source-code-line-active {
-  color: #fff;
-
-  /* background-color: var(--dev-tool-main-color); */
-  background-color: rgb(146 84 222 / 50%);
-}
-
-.source-code-line-num {
-  flex-shrink: 0;
-  width: 30px;
-  padding: 0 6px;
-  margin-right: 6px;
-  text-align: right;
-  height: 20px;
-  border-right: 1px solid var(--dev-tool-border-color);
-}
-
-.source-code-line-content {
-  display: flex;
-  white-space: nowrap;
-  height: 20px;
-}
-
-.source-code-line-word {
-  white-space: nowrap;
-}
-
-.source-code-pre-note {
-  color: var(--dev-tool-note-color);
-}
-
-.source-code-pre-space {
-  width: 8px;
-}
-
-.source-code-pre-keyword {
-  color: var(--dev-tool-keyword-color);
-}
-
-.source-code-pre-bracket {
-  color: var(--dev-tool-bracket-color);
-}
-
-.source-code-pre-quotation {
-  color: var(--dev-tool-quotation-color);
-}
-
-.source-code-pre-string {
-  color: var(--dev-tool-string-color);
-}
-
-.source-code-pre-function {
-  color: var(--dev-tool-function-color);
-}
-
-.source-code-pre-attribute {
-  color: var(--dev-tool-attribute-color);
-}
-
-.source-code-pre-operator {
-  color: var(--dev-tool-operator-color);
-}
-
-.source-code-pre-number {
-  color: var(--dev-tool-number-color);
-}
-
-.source-code-pre-builtin {
-  color: var(--dev-tool-builtin-color, var(--dev-tool-keyword-color));
-}
-
-.source-code-pre-symbol {
-  color: var(--dev-tool-symbol-color, var(--dev-tool-text-color));
-}
-</style>
+<template>
+  <view
+    :class="['source-code-line', active ? 'source-code-line-active' : '']"
+    :id="id">
+    <view class="source-code-line-num" v-if="showNum">{{ num }}</view>
+    <view :class="['source-code-line-content', line.class]">
+      <view
+        v-for="(item, index) in line.words"
+        :key="index"
+        :class="['source-code-line-word', item.class]">
+        {{ item.word }}
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import type { LineInfo } from './parseCode';
+
+const _props = withDefaults(
+  defineProps<{
+    line: LineInfo;
+
+    id: string;
+    active?: boolean;
+    num?: number;
+    showNum?: boolean;
+  }>(),
+  {
+    showNum: true,
+  },
+);
+</script>
+<style lang="scss" scoped>
+.source-code-line {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  font-family: Consolas, Monaco, 'Courier New', monospace;
+  position: relative;
+}
+
+.source-code-line-active {
+  color: #fff;
+
+  /* background-color: var(--dev-tool-main-color); */
+  background-color: rgb(146 84 222 / 50%);
+}
+
+.source-code-line-num {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background-color: var(--dev-tool-bg3-color);
+  flex-shrink: 0;
+  width: 30px;
+  padding: 0 6px;
+  margin-right: 15px;
+  text-align: right;
+  height: 20px;
+  border-right: 1px solid var(--dev-tool-border-color);
+}
+
+.source-code-line-content {
+  display: flex;
+  white-space: pre;
+  height: 20px;
+  user-select: text; /* 方便后续选取或直接开启 contenteditable 编辑 */
+}
+
+.source-code-line-word {
+  white-space: pre;
+  box-sizing: border-box;
+}
+
+.source-code-pre-space {
+  border-left: 1px dashed var(--dev-tool-border-color);
+
+  /* The color can be made softer if default border is too prominent */
+  border-left-color: rgb(146 84 222 / 15%); /* matching theme slightly */
+  margin-left: -1px; /* collapse border so spaces stay aligned perfectly */
+  padding-left: 1px;
+}
+
+.source-code-pre-note {
+  color: var(--dev-tool-note-color);
+}
+
+.source-code-pre-keyword {
+  color: var(--dev-tool-keyword-color);
+}
+
+.source-code-pre-bracket {
+  color: var(--dev-tool-bracket-color);
+}
+
+.source-code-pre-quotation {
+  color: var(--dev-tool-quotation-color);
+}
+
+.source-code-pre-string {
+  color: var(--dev-tool-string-color);
+}
+
+.source-code-pre-function {
+  color: var(--dev-tool-function-color);
+}
+
+.source-code-pre-attribute {
+  color: var(--dev-tool-attribute-color);
+}
+
+.source-code-pre-operator {
+  color: var(--dev-tool-operator-color);
+}
+
+.source-code-pre-number {
+  color: var(--dev-tool-number-color);
+}
+
+.source-code-pre-builtin {
+  color: var(--dev-tool-builtin-color, var(--dev-tool-keyword-color));
+}
+
+.source-code-pre-symbol {
+  color: var(--dev-tool-symbol-color, var(--dev-tool-text-color));
+}
+</style>

package/dist/v3/{SourceCode → DevTool/components/SourceCode}/index.vue

@@ -32,14 +32,14 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { computed, ref, onMounted } from 'vue';
-// import FilterInput from '../FilterInput/index.vue';
-import CircularButton from '../CircularButton/index.vue';
-import VirtualList from '../VirtualList/index.vue';
-import Empty from '../Empty/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
+import { computed, ref, shallowRef, onMounted } from 'vue';
+// import FilterInput from '../../../components/FilterInput/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
 import Line from './Line.vue';
-import { isAndroid, parseStock } from '../../utils';
+import { isAndroid, parseStock } from '../../../../utils';
 import { parseCode, type LineInfo } from './parseCode';
 const props = defineProps<{
   url: string;
@@ -63,7 +63,7 @@ const _scrollIntoView = ref('');
 
 // let backupCodes: string[] = [];
 
-const codes = ref<LineInfo[]>([]);
+const codes = shallowRef<LineInfo[]>([]);
 // const defaultCurrent = ref(1);
 const pageSize = 50;