Skip to content

Commit 312f82a

Browse files
tangjinzhoutangjinzhou
committed
refactor: remove React dependencies and streamline Vite configuration for Vue application
1 parent c49a9aa commit 312f82a

File tree

12 files changed

+250
-59
lines changed

12 files changed

+250
-59
lines changed

‎apps/playground/package.json

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@
2020
"@wdns/vue-code-block": "^2.3.3",
2121
"clsx": "^2.1.1",
2222
"cookies": "^0.9.1",
23-
"react": "18",
24-
"react-dom": "18",
2523
"uuid": "^10.0.0",
2624
"vue": "^3.4.34",
2725
"vue-router": "^4.4.0"
@@ -35,9 +33,6 @@
3533
"@tailwindcss/vite": "^4.1.3",
3634
"@types/cookies": "^0.9.0",
3735
"@types/node": "^20.0.0",
38-
"@types/react": "^18.3.3",
39-
"@types/react-dom": "^18.3.0",
40-
"@vitejs/plugin-react": "^4.3.1",
4136
"@vitejs/plugin-vue": "^5.1.3",
4237
"prettier-plugin-tailwindcss": "^0.6.11",
4338
"tailwindcss": "^4.1.3",

‎apps/playground/src/components/BasicLayout.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="flex h-screen" :class="pageClass">
3+
<TheNavbar v-if="!hideNavbar" :items="navs"></TheNavbar>
4+
<div class="flex-1 justify-center px-4 py-16" :class="contentClass">
5+
<RouterView></RouterView>
6+
</div>
7+
</div>
8+
</template>
9+
<script lang="ts" setup>
10+
import { provideLayoutOptions } from '@/composables/layout'
11+
import { computed, ref } from 'vue'
12+
import TheNavbar from './TheNavbar.vue'
13+
14+
const props = defineProps<{
15+
navs: { name: string; path: string }[]
16+
hideNavbar?: boolean
17+
hideBreadcrumbs?: boolean
18+
}>()
19+
20+
const pageClass = ref<string>()
21+
const contentClass = ref<string>()
22+
23+
provideLayoutOptions({
24+
pageClass,
25+
contentClass,
26+
hideNavbar: computed(() => props.hideNavbar),
27+
hideBreadcrumbs: computed(() => props.hideBreadcrumbs),
28+
})
29+
</script>

‎apps/playground/src/components/HomePage.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="flex flex-wrap gap-8 px-8">
3+
<RouterLink v-for="item in items" :key="item.path" :to="item.path">
4+
<div
5+
class="shadow-xs relative flex w-72 flex-col rounded-lg bg-primary capitalize text-primary-content transition-all hover:scale-105 hover:shadow-xl"
6+
>
7+
<div className="flex-col gap-2 flex flex-auto p-4 text-sm items-center text-center">
8+
<h2 className="font-semibold flex items-center gap-2 text-xl mb-1">
9+
{{ item.name }}
10+
</h2>
11+
<div className="flex flex-wrap items-start gap-2 justify-end">
12+
<ArrowRightIcon class="size-5" />
13+
</div>
14+
</div>
15+
</div>
16+
</RouterLink>
17+
</div>
18+
</template>
19+
<script lang="ts" setup>
20+
import { ArrowRightIcon } from '@heroicons/vue/20/solid'
21+
22+
defineProps<{
23+
items: { name: string; path: string }[]
24+
}>()
25+
</script>

‎apps/playground/src/components/TheBreadcrumbs.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="max-w-full select-none overflow-x-auto px-4 py-2 text-sm">
3+
<ul class="flex min-h-min items-center whitespace-nowrap capitalize">
4+
<template v-for="(item, i) in items" :key="item.path">
5+
<li class="flex items-center">
6+
<template v-if="i > 0">
7+
<span
8+
class="ml-2 mr-3 block size-1.5 rotate-45 transform border-r-[1px] border-t-[1px] border-base-content/70 bg-transparent"
9+
></span>
10+
</template>
11+
<template v-if="item.path !== route.path">
12+
<RouterLink class="flex items-center hover:underline" :to="item.path">
13+
{{ item.name }}
14+
</RouterLink>
15+
</template>
16+
<template v-else>
17+
<span class="text-base-content/70">{{ item.name }}</span>
18+
</template>
19+
</li>
20+
</template>
21+
</ul>
22+
</div>
23+
</template>
24+
<script lang="ts" setup>
25+
import { useRoute } from 'vue-router'
26+
27+
defineProps<{ items: { name: string; path: string }[] }>()
28+
const route = useRoute()
29+
</script>

‎apps/playground/src/components/TheNavbar.vue

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="bg-base-100/90 text-base-content border-base-content/10 border-r">
3+
<div class="flex min-h-16 w-full items-center p-2">
4+
<div class="justify-start">
5+
<div class="group relative inline-block">
6+
<ul
7+
tabindex="0"
8+
class="bg-base-100 z-[1] mt-3 flex w-52 origin-top scale-95 flex-col flex-wrap rounded-lg p-2 text-sm capitalize"
9+
>
10+
<li v-for="item in items" :key="item.name">
11+
<RouterLink
12+
:aria-disabled="item.path === route.path"
13+
:to="item.path"
14+
@click.stop="$event.currentTarget.blur()"
15+
class="hover:bg-base-content/10 flex cursor-pointer flex-col rounded-lg px-3 py-2 transition duration-200"
16+
>
17+
{{ item.name }}
18+
</RouterLink>
19+
<ul v-if="item.children">
20+
<li v-for="child in item.children" :key="child.name">
21+
<RouterLink
22+
:to="child.path"
23+
@click.stop="$event.currentTarget.blur()"
24+
class="hover:bg-base-content/10 flex cursor-pointer flex-col rounded-lg px-3 py-2 text-xs opacity-80 transition duration-200"
25+
>
26+
{{ child.name }}
27+
</RouterLink>
28+
</li>
29+
</ul>
30+
</li>
31+
</ul>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
</template>
37+
<script lang="ts" setup>
38+
import { useRoute } from 'vue-router'
39+
40+
defineProps<{
41+
items: { name: string; path: string; children?: { name: string; path: string }[] }[]
42+
}>()
43+
const route = useRoute()
44+
</script>

‎apps/playground/src/composables/layout.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { inject, InjectionKey, provide, Ref } from 'vue'
2+
3+
export interface LayoutOptions {
4+
pageClass: Ref<string | undefined>
5+
contentClass: Ref<string | undefined>
6+
hideNavbar: Ref<boolean>
7+
hideBreadcrumbs: Ref<boolean>
8+
}
9+
10+
const LayoutOptionsToken: InjectionKey<LayoutOptions> = Symbol()
11+
12+
export function provideLayoutOptions(options: LayoutOptions) {
13+
provide(LayoutOptionsToken, options)
14+
}
15+
16+
export function injectLayoutOptions() {
17+
const options = inject(LayoutOptionsToken)
18+
if (!options) {
19+
throw new Error('"injectLayoutOptions" must be called inside pages')
20+
}
21+
return options
22+
}

‎apps/playground/src/pages/button/basic.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div class="flex flex-col gap-2">
3+
<button class="btn btn-primary">Primary Button</button>
4+
<button class="btn btn-secondary">Default Button</button>
5+
<button class="btn btn-error">Dashed Button</button>
6+
<button class="btn btn-link">Text Button</button>
7+
<button class="btn btn-link">Link Button</button>
8+
</div>
9+
</template>

‎apps/playground/src/pages/button/block.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div class="flex flex-col gap-2">
3+
<button class="btn btn-primary">Primary</button>
4+
<button class="btn btn-secondary">Default</button>
5+
<button class="btn btn-error">Danger</button>
6+
<button class="btn btn-link">Link</button>
7+
<button class="btn btn-ghost">Ghost</button>
8+
<button class="btn btn-link">Link</button>
9+
<button class="btn btn-link">Link</button>
10+
<button class="btn btn-link">Link</button>
11+
</div>
12+
</template>

‎apps/playground/src/routes.ts

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,65 @@
1-
import { RouteRecordRaw } from 'vue-router'
1+
import { RouteRecordRaw, RouterView } from 'vue-router'
2+
import BasicLayout from './components/BasicLayout.vue'
3+
import { Fragment, h } from 'vue'
24

3-
const items = import.meta.glob('./pages/*/index.ts', { import: 'default', eager: true })
4-
export default Object.values(items) as RouteRecordRaw[]
5+
// /pages/button/basic.vue
6+
const items = import.meta.glob('./pages/*/*.vue', { import: 'default', eager: true })
7+
8+
const categoryRoutes: Record<string, RouteRecordRaw[]> = {}
9+
10+
Object.keys(items).forEach(path => {
11+
const route = path.replace('./pages/', '').replace('.vue', '')
12+
const [category, demo] = route.split('/')
13+
14+
if (!categoryRoutes[category]) {
15+
categoryRoutes[category] = []
16+
}
17+
18+
categoryRoutes[category].push({
19+
path: demo,
20+
component: items[path],
21+
})
22+
})
23+
24+
const routes: RouteRecordRaw[] = Object.entries(categoryRoutes).map(([category, children]) => {
25+
const renderComponents = () =>
26+
h(
27+
'div',
28+
children.map(child => h(child.component)),
29+
)
30+
renderComponents.displayName = 'renderComponents'
31+
return {
32+
path: `/${category}`,
33+
component: RouterView,
34+
children: [
35+
...children,
36+
{
37+
path: ':demo*',
38+
component: renderComponents,
39+
},
40+
],
41+
}
42+
})
43+
44+
const navs = Object.keys(categoryRoutes).map(category => ({
45+
name: category,
46+
path: `/${category}`,
47+
children: categoryRoutes[category].map(child => ({
48+
name: child.path,
49+
path: `/${category}/${child.path}`,
50+
})),
51+
}))
52+
routes.push({
53+
path: '/:pathMatch(.*)*',
54+
component: h('div', 'demo not found'),
55+
})
56+
export default [
57+
{
58+
path: '/',
59+
component: BasicLayout,
60+
children: routes,
61+
props: {
62+
navs,
63+
},
64+
},
65+
]

‎apps/playground/tsconfig.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "@ant-design-vue/typescript-config/tsconfig.vue.json",
3+
"include": ["src/**/*.ts", "src/**/*.vue"],
4+
"references": [{ "path": "./tsconfig.node.json" }],
5+
"compilerOptions": {
6+
"paths": {
7+
"@/*": ["./src/*"],
8+
"~/*": ["./assets/*"]
9+
}
10+
}
11+
}

0 commit comments

Comments
 (0)