Skip to content

Commit 4fca6f4

Browse files
LonggerererLonggererer
authored
Merge pull request #53 from JS-Encoder/feat-console_link
Feat console link
2 parents eeaeca9 + 2898b52 commit 4fca6f4

File tree

10 files changed

+87
-19
lines changed

10 files changed

+87
-19
lines changed

‎src/hooks/use-before-unload.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { onMounted, onUnmounted } from "vue"
2+
3+
const useBeforeUnload = (): void => {
4+
const handler = (event: BeforeUnloadEvent) => {
5+
event.preventDefault()
6+
}
7+
8+
onMounted(() => {
9+
window.addEventListener("beforeunload", handler)
10+
})
11+
12+
onUnmounted(() => {
13+
window.removeEventListener("beforeunload", handler)
14+
})
15+
}
16+
17+
export default useBeforeUnload

‎src/hooks/use-esc-close.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { onMounted, onUnmounted, ref, Ref } from "vue"
1+
import { onMounted, onUnmounted, Ref } from "vue"
22

33
/** 按下ESC关闭弹窗 */
44
const useEscClose = (canClose: Ref<boolean>, handler: () => void): void => {

‎src/styles/variable.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ $dark-colors: (
7979
console-element-name: rgb(192, 153, 255),
8080
console-element-suffix: rgb(93, 176, 215),
8181
console-attribute-value: rgb(195, 232, 141),
82+
console-link: rgb(192, 153, 255),
8283

8384
// console table
8485
console-table-header-bg: rgb(28, 28, 28),

‎src/type/console.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ILinkPos } from "@utils/tools"
2+
13
/** 日志类型 */
24
export const enum LogType {
35
/** 普通日志 */
@@ -82,4 +84,6 @@ export interface IConsoleValue {
8284
maxLength?: number
8385
/** 是否为链接，字符串类型可用 */
8486
isLink?: boolean
87+
/** 链接开始和结束位置 */
88+
linkPos?: ILinkPos[]
8589
}

‎src/utils/tools/console-value.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import { IConsoleValue } from "@type/console"
2-
import { getObjEntries, getType, isBaseData } from "."
2+
import { getObjEntries, getType, isBaseData, parseLink } from "."
33
import { isElement } from "./judge"
44

55
export const processConsoleValueList = (list: any[]) => {
66
return list.map((value, index) => {
77
const type = getType(value)
88
const result = formatConsoleValue(value)
9-
if (!index && type === "string") {
10-
result.value = value
9+
if (type === "string") {
10+
if (!index) {
11+
result.value = value
12+
}
13+
const linkPos = parseLink(result.value)
14+
if (linkPos.length) {
15+
result.isLink = true
16+
result.linkPos = linkPos
17+
}
1118
}
1219
return result
1320
})

‎src/utils/tools/index.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,4 +190,19 @@ export function JSONStringify(data: any): string {
190190
/** 获取数组交集 */
191191
export const getArrayIntersection = (arr1: any[], arr2: any[]): any[] => {
192192
return arr1.filter((item) => arr2.indexOf(item) > -1)
193+
}
194+
195+
export interface ILinkPos {
196+
start?: number
197+
end?: number
198+
}
199+
200+
const linkReg = /(?:[^\s()]+):\/\/[^\s()]+/gi
201+
/** 获取字符串中的链接位置 */
202+
export const parseLink = (text: string): ILinkPos[] => {
203+
const result = []
204+
for (const match of text.matchAll(linkReg)) {
205+
result.push({ start: match.index, end: match.index + match[0].length })
206+
}
207+
return result
193208
}

‎src/views/components/console/components/console-value/console-value.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,8 @@
4545
}
4646
.console-element-suffix {
4747
color: var(--color-console-element-suffix);
48+
}
49+
.console-link {
50+
text-decoration: underline;
51+
color: var(--color-console-link);
4852
}

‎src/views/components/console/components/console-value/console-value.vue‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
11
<template>
22
<div class="inline-flex flex-wrap console-common cursor-default">
33
<div v-if="basicTypes.includes(type)" :class="`console-${type}`">
4-
<span>{{ value }}</span>
4+
<template v-if="type === 'string' && isLink">
5+
<template v-for="(item, index) in linkPos" :key="index">
6+
<span class="break-all" v-if="!index">{{ value.slice(0, item.start) }}</span>
7+
<a
8+
class="console-link cursor-pointer break-all"
9+
:href="value.slice(item.start, item.end)"
10+
target="_blank"
11+
>{{ value.slice(item.start, item.end) }}</a>
12+
<span v-if="index < linkPos!.length - 1">{{ value.slice(item.end, linkPos![index + 1].start) }}</span>
13+
</template>
14+
</template>
15+
<template v-else>
16+
<span class="break-all fill-w">{{ value }}</span>
17+
</template>
518
</div>
619
<div v-else-if="type === 'Array'">
720
<!-- ▶ (6) [{...}, 1, "123", true, ƒ, Array(0)] -->
@@ -208,7 +221,7 @@ const foldMapData: IConsoleValueMapData[] = []
208221
/** 展示的键值对数据（展开） */
209222
const unfoldMapData: IConsoleValueMapData[] = []
210223
// eslint-disable-next-line max-lines-per-function
211-
const setData = () => {
224+
const setFoldData = () => {
212225
const { type, value, attrs = [], minLength, maxLength, size = 0 } = props
213226
switch(type) {
214227
case "Array": {
@@ -271,9 +284,15 @@ const setData = () => {
271284
}
272285
break
273286
}
287+
default: {}
274288
}
275289
}
276-
setData()
290+
291+
const initData = () => {
292+
setFoldData()
293+
}
294+
295+
initData()
277296
</script>
278297

279298
<style src="./console-value.scss" lang="scss" scoped></style>

‎src/views/instance/instance.vue‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import { onMounted, watch, onUnmounted } from "vue"
4545
import { getModulesHeight, getModulesWidth } from "./instance"
4646
import { useLayoutStore } from "@store/layout"
4747
import useWindowResize from "@hooks/use-window-resize"
48+
import useBeforeUnload from "@hooks/use-before-unload"
4849
import ModuleSizeService, { EDITOR_MIN_WIDTH, RESULT_MIN_WIDTH } from "@utils/services/module-size-service"
4950
import { storeToRefs } from "pinia"
5051
import { useCommonStore } from "@store/common"
@@ -75,6 +76,10 @@ const displayModalMap = {
7576
[ModalName.UPDATE_LOG]: UpdateLogsModal,
7677
}
7778
79+
if (import.meta.env.PROD) {
80+
useBeforeUnload()
81+
}
82+
7883
const moduleSizeService = new ModuleSizeService()
7984
onMounted(() => {
8085
// 设置初始模块尺寸
@@ -119,20 +124,13 @@ const handleResizeEditorAndResult = (e: MouseEvent): void => {
119124
})
120125
}
121126
122-
// 生产环境刷新页面时提示
123-
const beforeunload = (event: BeforeUnloadEvent) => {
124-
event.preventDefault()
125-
}
126-
if (import.meta.env.PROD) {
127-
window.addEventListener("beforeunload", beforeunload)
128-
}
129-
onUnmounted(() => {
130-
window.removeEventListener("beforeunload", beforeunload)
131-
})
132127
onBeforeRouteLeave(() => {
133128
if (import.meta.env.PROD) {
134-
window.confirm("你所做的更改可能未保存。")
129+
if (!window.confirm("你所做的更改可能未保存。")) {
130+
return false
131+
}
135132
}
133+
return true
136134
})
137135
</script>
138136

‎tests/console.test.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,7 @@ console.warn(123, { a: { b: { c: {} } } })
3333
console.error(123, { a: { b: { c: {} } } })
3434
console.info(123, { a: { b: { c: {} } } })
3535
console.log(window)
36-
console.log(console)
36+
console.log(console)
37+
console.log("Find me at http://www.example.com and also at http://stackoverflow.com")
38+
// eslint-disable-next-line max-len
39+
console.log("https://play.vuejs.org/#eNp9kUFLAzEQhf/KmMsq1C61nsq2oFJQDyoqeMmlbKfb1GwSkkktLPvfnaS09iCFHDLvvRm+YTpx59xwG1FMRBVqrxxBQIpuJo1qnfUEHXhcQQ8rb1soOFpII01tTSBoQwPT5F8Wj6i1hS/r9fKiuJKmKvfjeBAXhK3TC0KuAKr1aNZ1ubnvq5KrrCrjIsH2urVL1FMp2JcCSjar8qR/dDPmJwaCAkOsVDPcBGuYv0tTpKht65RG/+pIMaQUE8hO8hbM+POcNfIRBwe9XmP9/Y++CbukSfHmMaDfohRHjxa+Qdrb848X3PH/aPIOUXP6jPmOweqYGPex+2iWjH2Sy7RP+QrKNJ9hviM04bBUAk3JPuel4Ms8nFn9D3c8vM190vSi/wUJTKhh")

0 commit comments

Comments
 (0)