3 |
4 |
6 |
53 |
54 |
55 |
56 |
57 |
136 |
137 |
185 |
--------------------------------------------------------------------------------
/src/components/Editor.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
183 |
184 |
190 |
--------------------------------------------------------------------------------
/src/components/SettingContent.vue:
--------------------------------------------------------------------------------
1 |
2 | 控制台为空
5 |
18 |
19 |
25 | {{ formatTime(item.timeStamp).split(' ')[1] }}
26 |
27 |
28 |
35 | COPY
36 |
37 |
45 | JSON
46 |
47 |
48 |
52 |
49 | {{ getMessageContent(item.content) }}
50 |
51 |
3 |
5 |
7 |
9 |
10 |
11 |
23 |
--------------------------------------------------------------------------------
/src/components/ShortCut.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ title }}
4 |
3 | 重置
12 |
13 |
14 |
15 |
78 |
79 |
88 |
--------------------------------------------------------------------------------
/src/hooks/useEventBus.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @desc 统一管理 Eventbus 以约束类型 自动注册和移除事件
3 | */
4 |
5 | // @ts-ignore
6 | import emitter from 'tiny-emitter/instance'
7 | import { onUnmounted } from 'vue'
8 |
9 | export const $on = (event: symbol, ...args: any[]) => emitter.on(event, ...args)
10 | export const $emit = (event: symbol, ...args: any[]) => emitter.emit(event, ...args)
11 | export const $off = (event: symbol, ...args: any[]) => emitter.off(event, ...args)
12 | export const $once = (event: symbol, ...args: any[]) => emitter.once(event, ...args)
13 |
14 | export function useEventBus(type: symbol, listner: Function) {
15 | $on(type, listner)
16 |
17 | // 自动移除事件
18 | if (getCurrentInstance()) {
19 | onUnmounted(() => $off(type, listner))
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/hooks/useEventListener.ts:
--------------------------------------------------------------------------------
1 | export function useEventListener(
2 | target: EventTarget,
3 | type: string,
4 | listener: (event: any) => void,
5 | options?: boolean | AddEventListenerOptions
6 | ) {
7 | onMounted(() => {
8 | target.addEventListener(type, listener, options)
9 | })
10 |
11 | onUnmounted(() => {
12 | target.removeEventListener(type, listener, options)
13 | })
14 | }
15 |
--------------------------------------------------------------------------------
/src/hooks/useMedia.ts:
--------------------------------------------------------------------------------
1 | export function useMedia(query: string) {
2 | const matchList = window.matchMedia(query)
3 | const isMatch = ref(matchList.matches)
4 |
5 | const handler = (e: MediaQueryListEvent) => {
6 | isMatch.value = e.matches
7 | }
8 |
9 | matchList.addEventListener('change', handler)
10 |
11 | onUnmounted(() => {
12 | matchList.removeEventListener('change', handler)
13 | })
14 |
15 | return isMatch
16 | }
17 |
--------------------------------------------------------------------------------
/src/hooks/usePageBack.ts:
--------------------------------------------------------------------------------
1 | import { useEventListener } from '@/hooks/useEventListener'
2 | import { Button } from '@arco-design/web-vue'
3 | import { IconLeft } from '@arco-design/web-vue/es/icon'
4 |
5 | export function usePageBack() {
6 | const router = useRouter()
7 | const back = () => router.back()
8 |
9 | // 监听键盘事件 ESC执行返回
10 | useEventListener(document, 'keydown', (e: KeyboardEvent) => {
11 | if (e.key === 'Escape') {
12 | back()
13 | e.stopPropagation()
14 | }
15 | })
16 |
17 | // return a function cause we need to use it in setup
18 | // if directly return a component, it will be called in render
19 | // and it will cause an warning: Non-function value encountered for default slot.
20 | return {
21 | BackButton: () =>
22 | h(
23 | Button,
24 | {
25 | onClick: back,
26 | shape: 'circle',
27 | style: {
28 | position: 'fixed !important',
29 | top: '10px',
30 | left: '10px'
31 | }
32 | },
33 | () => h(IconLeft)
34 | )
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/hooks/usePrefersTheme.ts:
--------------------------------------------------------------------------------
1 | import type { Theme } from '@/store'
2 | import { useMedia } from '@/hooks/useMedia'
3 |
4 | export function usePrefersTheme(callback?: (theme: Theme) => void) {
5 | // MediaQuery theme
6 | const isDark = useMedia('(prefers-color-scheme: dark)')
7 | const isLight = useMedia('(prefers-color-scheme: light)')
8 |
9 | onMounted(() => setThemeMode(isDark.value ? 'dark' : 'light'))
10 |
11 | watch(isDark, (val) => {
12 | setThemeMode(val ? 'dark' : 'light')
13 | callback && callback(val ? 'dark' : 'light')
14 | })
15 |
16 | return [isDark, isLight]
17 | }
18 |
19 | export function setThemeMode(theme: Theme) {
20 | if (theme === 'dark') {
21 | document.body.classList.add('dark')
22 | document.body.setAttribute('arco-theme', 'dark')
23 | } else if (theme === 'light') {
24 | document.body.classList.remove('dark')
25 | document.body.removeAttribute('arco-theme')
26 | } else {
27 | const [isDark] = usePrefersTheme()
28 | setThemeMode(isDark.value ? 'dark' : 'light')
29 | }
30 | return null
31 | }
32 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import '@/style/index.less'
3 | import App from './App.vue'
4 | import router from './router'
5 | import { createPinia } from 'pinia'
6 | import { registerDirectives } from '@/common/directives'
7 | import { registerIcon } from '@/common/registerIcon'
8 | import { registerCallback } from '@/common/registerCallback'
9 | import { isElectron, SERVER_DEV } from './utils'
10 |
11 | try {
12 | createApp(App)
13 | .use(router)
14 | .use(createPinia())
15 | .use(registerDirectives)
16 | .use(registerIcon)
17 | .mount('#app')
18 |
19 | registerCallback()
20 | } catch (error) {
21 | console.error(error)
22 | if (isElectron) utools.showNotification('初始化失败: ' + error)
23 | }
24 |
--------------------------------------------------------------------------------
/src/preload/index.ts:
--------------------------------------------------------------------------------
1 | import type { Buffer as _Buffer } from 'buffer'
2 | import type _vm from 'vm'
3 |
4 | declare global {
5 | interface Window {
6 | preload: {
7 | electron: any
8 | Buffer: typeof _Buffer
9 | require: NodeRequire
10 | vm: typeof _vm
11 | }
12 | }
13 | }
14 |
15 | const empty = () => null
16 |
17 | export const electron = window?.preload?.electron || {}
18 | export const Buffer = window?.preload?.Buffer || {}
19 | export const require = window?.preload?.require || empty
20 | export const vm = window?.preload?.vm || {}
21 |
--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHashHistory } from 'vue-router'
2 |
3 | const router = createRouter({
4 | history: createWebHashHistory(),
5 | routes: [
6 | {
7 | path: '/',
8 | redirect: '/runner'
9 | },
10 | {
11 | path: '/runner',
12 | component: () => import('@/views/Runner.vue')
13 | },
14 | {
15 | path: '/setting',
16 | component: () => import('@/views/Setting.vue')
17 | },
18 | {
19 | path: '/about',
20 | component: () => import('@/views/About.vue')
21 | }
22 | ]
23 | })
24 |
25 | export default router
26 |
--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useCodeStore'
2 | export * from './useSettingStore'
3 | export * from './useScriptStore'
4 |
--------------------------------------------------------------------------------
/src/store/useCodeStore.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia'
2 | import { uniqueId } from 'lodash-es'
3 | import { Message } from '@arco-design/web-vue'
4 | import {
5 | getItem,
6 | setItem,
7 | removeItem,
8 | runCodeInSandbox,
9 | runCodeInBrowser,
10 | isElectron
11 | } from '@/utils'
12 | import { IMessage } from '@/components/Console.vue'
13 | import { useHistoryStore } from './useHistoryStore'
14 |
15 | export interface ICodeStoreState {
16 | /**
17 | * code id
18 | */
19 | id: number
20 | /**
21 | * code content
22 | */
23 | code: string
24 | /**
25 | * console messages
26 | */
27 | messages: IMessage[]
28 | /**
29 | * code running environment
30 | */
31 | env: 'node' | 'browser'
32 | /**
33 | * code running mode
34 | */
35 | mode: 'ontime' | 'manual'
36 | /**
37 | * code readonly
38 | */
39 | readonly: boolean
40 | /**
41 | * code is running
42 | */
43 | execState: boolean
44 | }
45 |
46 | export interface ICodeStore extends ReturnType
3 | 
4 | ZiuChen
6 |
14 |
15 |
17 |
18 |
19 |
36 |
37 |
78 |
--------------------------------------------------------------------------------
/src/views/Runner.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 | 超级JavaScript
5 |
3 |
22 |
23 |
37 | 清空控制台
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
122 |
123 |
142 |
--------------------------------------------------------------------------------
/src/views/Setting.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
7 |
10 | {{ store.currentEnv }}
14 |
15 | {{ store.currentMode }}
16 |
17 |
18 | 代码历史回溯 ({{ history.historys.length }})
19 |
20 |
21 |
3 |
5 |
9 | 0.3秒
10 | 0.5秒
11 | 1秒
12 |
13 |
14 |
15 |
19 | Space
20 | Tab
21 |
22 |
23 |
24 |
28 | 2
29 | 4
30 | 6
31 | 8
32 |
33 |
34 |
35 |
36 |
41 |
42 |
43 |
44 |
45 |
47 |
48 |
49 |
50 |
52 |
53 |
54 |
55 |
56 |
57 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
67 |
68 |
69 |
70 |
71 |
72 | 新建
73 |
74 |
75 |
76 |
77 | 跟随系统
78 | 深色模式
79 | 浅色模式
80 |
81 |
82 |
83 |
84 |
85 |
100 |
101 |
107 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///