Skip to content

Commit b2e4ea3

Browse files
yuyinwsyuyinws
committed
feat: client and launch logic
1 parent 737d0cd commit b2e4ea3

File tree

22 files changed

+554
-285
lines changed

22 files changed

+554
-285
lines changed

‎client/app/assets/main.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
11
@import "tailwindcss";
2+
@custom-variant dark (&:where(.dark-mode, .dark-mode *));
3+
@config "../tailwind.config.mjs";
4+
5+
:root {
6+
}
7+
8+
html.dark-mode .shiki,
9+
html.dark-mode .shiki span {
10+
color: var(--shiki-dark) !important;
11+
background-color: #091a28!important;
12+
/* Optional, if you also want font styles */
13+
font-style: var(--shiki-dark-font-style) !important;
14+
font-weight: var(--shiki-dark-font-weight) !important;
15+
text-decoration: var(--shiki-dark-text-decoration) !important;
16+
}
217

318
body {
419
background-color: #fff;

‎client/app/components/app-footer.vue‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎client/app/components/header-info.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup lang="ts">
2+
const colorMode = useColorMode()
3+
4+
function toggleDark() {
5+
colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
6+
}
7+
</script>
8+
9+
<template>
10+
<div class="rounded-full border border-gray-200 dark:border-gray-700 py-1 px-4 flex items-center gap-2">
11+
<div class="hover:bg-gray-200 dark:hover:bg-gray-700 rounded-full p-1 flex items-center justify-center cursor-pointer">
12+
<Icon
13+
name="uil:github" class="text-gray-500 dark:text-gray-400 text-[26px]"
14+
@click="navigateTo('https://github.com/unplugin/unplugin-turbo-console', { external: true, open: { target: '_blank' } })"
15+
/>
16+
</div>
17+
18+
<div class="hover:bg-gray-200 dark:hover:bg-gray-700 rounded-full p-1 flex items-center justify-center cursor-pointer">
19+
<Icon
20+
:name="colorMode.value === 'dark' ? 'uil:sun' : 'uil:moon'"
21+
class="text-gray-500 dark:text-gray-400 text-[26px]"
22+
@click="toggleDark()"
23+
/>
24+
</div>
25+
</div>
26+
</template>

‎client/app/components/shiki.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script setup lang="ts">
2+
import { createHighlighterCore } from 'shiki/core'
3+
import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
4+
5+
const props = defineProps<{
6+
code: string
7+
}>()
8+
9+
const highlighter = await createHighlighterCore({
10+
themes: [
11+
import('@shikijs/themes/vitesse-light'),
12+
import('@shikijs/themes/vitesse-dark'),
13+
],
14+
langs: [import('@shikijs/langs/typescript')],
15+
engine: createOnigurumaEngine(import('shiki/wasm')),
16+
})
17+
18+
const code = highlighter.codeToHtml(props.code, {
19+
lang: 'typescript',
20+
themes: {
21+
light: 'vitesse-light',
22+
dark: 'vitesse-dark',
23+
},
24+
})
25+
</script>
26+
27+
<template>
28+
<div v-html="code" />
29+
</template>

‎client/app/components/ui/collapsible.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
import { CollapsibleContent, CollapsibleRoot } from 'reka-ui'
3+
4+
const { fileName } = defineProps<{
5+
fileName: string
6+
}>()
7+
8+
const open = ref(false)
9+
</script>
10+
11+
<template>
12+
<CollapsibleRoot
13+
v-model:open="open"
14+
class="text-sm"
15+
:unmount-on-hide="false"
16+
>
17+
<CollapsibleTrigger
18+
class="w-full rounded-md mt-[10px] p-2 border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 flex items-center gap-1 cursor-pointer"
19+
:class="{ 'rounded-b-none border-b-0': open }"
20+
>
21+
<Icon name="uil:angle-right-b" class="text-gray-500 text-[16px] transition-transform duration-300" :class="{ 'rotate-90': open }" />
22+
<span class="text-gray-500 leading-[25px]">{{ fileName }}</span>
23+
</CollapsibleTrigger>
24+
25+
<CollapsibleContent>
26+
<div class="w-full border border-gray-200 dark:border-gray-700 rounded-t-none rounded-b-md border-t-0 p-4">
27+
<slot name="content" />
28+
</div>
29+
</CollapsibleContent>
30+
</CollapsibleRoot>
31+
</template>

‎client/app/layouts/default.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<template>
22
<main>
33
<slot />
4-
5-
<app-footer />
64
</main>
75
</template>

‎client/app/pages/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ init()
4545
</script>
4646

4747
<template>
48-
<main class="w-screen p-8">
48+
<div class="w-screen p-8">
4949
<div v-if="requestState.status === 'pending'" class="flex h-full justify-center">
5050
<div class="flex flex-col items-center gap-2">
5151
<Icon name="uil:spinner" class="text-2xl animate-spin" />
@@ -74,5 +74,5 @@ init()
7474
</div>
7575
</div>
7676
</div>
77-
</main>
77+
</div>
7878
</template>

‎client/app/pages/inspect.vue‎

Lines changed: 57 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,63 @@
11
<script setup lang="ts">
2-
const { data, error } = await useAsyncData(async () => {
3-
const raw = await fetch(`/filePathMap`)
4-
const response = await raw.json()
5-
return response
6-
})
2+
import type { ExpressionItem, ExpressionsMapResponse } from '~~/shared/types'
3+
4+
const { data, status, error } = useFetch<ExpressionsMapResponse>('/expressionsMap')
5+
6+
function handleLaunchEditor(path: string, item: ExpressionItem) {
7+
$fetch('/launchEditor', {
8+
query: {
9+
path: `${path}:${item.line}:${item.column}`,
10+
},
11+
})
12+
}
713
</script>
814

915
<template>
10-
<Suspense>
11-
<template #default>
12-
<div v-if="error" class="text-red-500">
13-
{{ data }}
14-
{{ error }}
16+
<div class="w-screen p-8">
17+
<div class="flex items-center justify-between flex-wrap gap-4">
18+
<div>
19+
<a class="text-3xl font-[300] cursor-pointer" href="https://github.com/unplugin/unplugin-turbo-console" target="_blank">
20+
Unplugin<span class="text-green-500"> Turbo Console</span> Inspector
21+
</a>
22+
23+
<a
24+
:href="`https://github.com/unplugin/unplugin-turbo-console/releases/tag/v${data?.version}`" target="_blank"
25+
class="-translate-y-[16px] font-mono text-[16px] text-gray-400 inline-block"
26+
>
27+
v{{ data?.version }}
28+
</a>
29+
</div>
30+
31+
<HeaderInfo />
32+
</div>
33+
34+
<div v-if="status === 'pending'" class="flex h-full justify-center">
35+
<div class="flex flex-col items-center gap-2">
36+
<Icon name="uil:spinner" class="text-2xl animate-spin" />
37+
<span class="text-gray-500 dark:text-gray-400">Loading...</span>
38+
</div>
39+
</div>
40+
41+
<div v-else-if="status === 'error'">
42+
<div class="text-red-500 dark:text-red-400 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 w-full">
43+
<div class="flex items-center gap-2 mb-2">
44+
<Icon name="uil:exclamation-triangle" class="text-xl" />
45+
<span class="font-medium">Error</span>
46+
{{ error }}
47+
</div>
48+
</div>
49+
</div>
50+
51+
<div v-else-if="status === 'success'">
52+
<div v-for="(items, key) in data?.expressionsMap" :key="key">
53+
<ui-collapsible :file-name="(key as string)">
54+
<template #content>
55+
<div v-for="item in items.expressions" :key="item.code" @click="handleLaunchEditor(items.filePath, item)">
56+
<shiki :code="`console.${item.method}(${item.code})`" />
57+
</div>
58+
</template>
59+
</ui-collapsible>
1560
</div>
16-
</template>
17-
<template #fallback>
18-
Loading...
19-
</template>
20-
</Suspense>
61+
</div>
62+
</div>
2163
</template>

‎client/app/tailwind.config.mjs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { blackA, grass, green, mauve } from '@radix-ui/colors'
2+
3+
/** @type {import('tailwindcss').Config} */
4+
module.exports = {
5+
content: ['./**/*.vue'],
6+
theme: {
7+
extend: {
8+
colors: {
9+
...blackA,
10+
...green,
11+
...grass,
12+
...mauve,
13+
},
14+
},
15+
},
16+
plugins: [],
17+
}

‎client/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@
1717
"@iconify/icons-uil": "^1.2.3",
1818
"@nuxt/icon": "^1.11.0",
1919
"@nuxtjs/color-mode": "^3.5.2",
20+
"@radix-ui/colors": "^3.0.0",
2021
"nuxt": "catalog:",
2122
"reka-ui": "^2.0.2",
23+
"shiki": "^3.2.1",
2224
"unplugin-turbo-console": "workspace:*"
2325
}
2426
}

0 commit comments

Comments
 (0)