From 312f82a5b6999587400670c0e3623e1982321186 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sun, 27 Jul 2025 15:30:36 +0800
Subject: [PATCH] refactor: remove React dependencies and streamline Vite
 configuration for Vue application

---
 apps/playground/package.json                  |  5 --
 .../playground/src/components/BasicLayout.vue | 29 ++++++++
 apps/playground/src/components/HomePage.vue   | 25 +++++++
 .../src/components/TheBreadcrumbs.vue         | 29 ++++++++
 apps/playground/src/components/TheNavbar.vue  | 44 ++++++++++++
 apps/playground/src/composables/layout.ts     | 22 ++++++
 apps/playground/src/pages/button/basic.vue    |  9 +++
 apps/playground/src/pages/button/block.vue    | 12 ++++
 apps/playground/src/routes.ts                 | 67 ++++++++++++++++++-
 apps/playground/tsconfig.json                 | 11 +++
 apps/playground/tsconfig.node.json            |  4 ++
 apps/playground/vite.config.ts                | 52 +-------------
 12 files changed, 250 insertions(+), 59 deletions(-)
 create mode 100644 apps/playground/src/components/BasicLayout.vue
 create mode 100644 apps/playground/src/components/HomePage.vue
 create mode 100644 apps/playground/src/components/TheBreadcrumbs.vue
 create mode 100644 apps/playground/src/components/TheNavbar.vue
 create mode 100644 apps/playground/src/composables/layout.ts
 create mode 100644 apps/playground/src/pages/button/basic.vue
 create mode 100644 apps/playground/src/pages/button/block.vue
 create mode 100644 apps/playground/tsconfig.json
 create mode 100644 apps/playground/tsconfig.node.json

diff --git a/apps/playground/package.json b/apps/playground/package.json
index 4768ae7c9..b4a35ad32 100644
--- a/apps/playground/package.json
+++ b/apps/playground/package.json
@@ -20,8 +20,6 @@
     "@wdns/vue-code-block": "^2.3.3",
     "clsx": "^2.1.1",
     "cookies": "^0.9.1",
-    "react": "18",
-    "react-dom": "18",
     "uuid": "^10.0.0",
     "vue": "^3.4.34",
     "vue-router": "^4.4.0"
@@ -35,9 +33,6 @@
     "@tailwindcss/vite": "^4.1.3",
     "@types/cookies": "^0.9.0",
     "@types/node": "^20.0.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-vue": "^5.1.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^4.1.3",
diff --git a/apps/playground/src/components/BasicLayout.vue b/apps/playground/src/components/BasicLayout.vue
new file mode 100644
index 000000000..af8c31db8
--- /dev/null
+++ b/apps/playground/src/components/BasicLayout.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex h-screen" :class="pageClass">
+    <TheNavbar v-if="!hideNavbar" :items="navs"></TheNavbar>
+    <div class="flex-1 justify-center px-4 py-16" :class="contentClass">
+      <RouterView></RouterView>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { provideLayoutOptions } from '@/composables/layout'
+import { computed, ref } from 'vue'
+import TheNavbar from './TheNavbar.vue'
+
+const props = defineProps<{
+  navs: { name: string; path: string }[]
+  hideNavbar?: boolean
+  hideBreadcrumbs?: boolean
+}>()
+
+const pageClass = ref<string>()
+const contentClass = ref<string>()
+
+provideLayoutOptions({
+  pageClass,
+  contentClass,
+  hideNavbar: computed(() => props.hideNavbar),
+  hideBreadcrumbs: computed(() => props.hideBreadcrumbs),
+})
+</script>
diff --git a/apps/playground/src/components/HomePage.vue b/apps/playground/src/components/HomePage.vue
new file mode 100644
index 000000000..521a0fb64
--- /dev/null
+++ b/apps/playground/src/components/HomePage.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="flex flex-wrap gap-8 px-8">
+    <RouterLink v-for="item in items" :key="item.path" :to="item.path">
+      <div
+        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"
+      >
+        <div className="flex-col gap-2 flex flex-auto p-4 text-sm items-center text-center">
+          <h2 className="font-semibold flex items-center gap-2 text-xl mb-1">
+            {{ item.name }}
+          </h2>
+          <div className="flex flex-wrap items-start gap-2 justify-end">
+            <ArrowRightIcon class="size-5" />
+          </div>
+        </div>
+      </div>
+    </RouterLink>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ArrowRightIcon } from '@heroicons/vue/20/solid'
+
+defineProps<{
+  items: { name: string; path: string }[]
+}>()
+</script>
diff --git a/apps/playground/src/components/TheBreadcrumbs.vue b/apps/playground/src/components/TheBreadcrumbs.vue
new file mode 100644
index 000000000..8e6fb5d91
--- /dev/null
+++ b/apps/playground/src/components/TheBreadcrumbs.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="max-w-full select-none overflow-x-auto px-4 py-2 text-sm">
+    <ul class="flex min-h-min items-center whitespace-nowrap capitalize">
+      <template v-for="(item, i) in items" :key="item.path">
+        <li class="flex items-center">
+          <template v-if="i > 0">
+            <span
+              class="ml-2 mr-3 block size-1.5 rotate-45 transform border-r-[1px] border-t-[1px] border-base-content/70 bg-transparent"
+            ></span>
+          </template>
+          <template v-if="item.path !== route.path">
+            <RouterLink class="flex items-center hover:underline" :to="item.path">
+              {{ item.name }}
+            </RouterLink>
+          </template>
+          <template v-else>
+            <span class="text-base-content/70">{{ item.name }}</span>
+          </template>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+
+defineProps<{ items: { name: string; path: string }[] }>()
+const route = useRoute()
+</script>
diff --git a/apps/playground/src/components/TheNavbar.vue b/apps/playground/src/components/TheNavbar.vue
new file mode 100644
index 000000000..a6de51b03
--- /dev/null
+++ b/apps/playground/src/components/TheNavbar.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="bg-base-100/90 text-base-content border-base-content/10 border-r">
+    <div class="flex min-h-16 w-full items-center p-2">
+      <div class="justify-start">
+        <div class="group relative inline-block">
+          <ul
+            tabindex="0"
+            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"
+          >
+            <li v-for="item in items" :key="item.name">
+              <RouterLink
+                :aria-disabled="item.path === route.path"
+                :to="item.path"
+                @click.stop="$event.currentTarget.blur()"
+                class="hover:bg-base-content/10 flex cursor-pointer flex-col rounded-lg px-3 py-2 transition duration-200"
+              >
+                {{ item.name }}
+              </RouterLink>
+              <ul v-if="item.children">
+                <li v-for="child in item.children" :key="child.name">
+                  <RouterLink
+                    :to="child.path"
+                    @click.stop="$event.currentTarget.blur()"
+                    class="hover:bg-base-content/10 flex cursor-pointer flex-col rounded-lg px-3 py-2 text-xs opacity-80 transition duration-200"
+                  >
+                    {{ child.name }}
+                  </RouterLink>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+
+defineProps<{
+  items: { name: string; path: string; children?: { name: string; path: string }[] }[]
+}>()
+const route = useRoute()
+</script>
diff --git a/apps/playground/src/composables/layout.ts b/apps/playground/src/composables/layout.ts
new file mode 100644
index 000000000..7e1c7fa93
--- /dev/null
+++ b/apps/playground/src/composables/layout.ts
@@ -0,0 +1,22 @@
+import { inject, InjectionKey, provide, Ref } from 'vue'
+
+export interface LayoutOptions {
+  pageClass: Ref<string | undefined>
+  contentClass: Ref<string | undefined>
+  hideNavbar: Ref<boolean>
+  hideBreadcrumbs: Ref<boolean>
+}
+
+const LayoutOptionsToken: InjectionKey<LayoutOptions> = Symbol()
+
+export function provideLayoutOptions(options: LayoutOptions) {
+  provide(LayoutOptionsToken, options)
+}
+
+export function injectLayoutOptions() {
+  const options = inject(LayoutOptionsToken)
+  if (!options) {
+    throw new Error('"injectLayoutOptions" must be called inside pages')
+  }
+  return options
+}
diff --git a/apps/playground/src/pages/button/basic.vue b/apps/playground/src/pages/button/basic.vue
new file mode 100644
index 000000000..ba6239acf
--- /dev/null
+++ b/apps/playground/src/pages/button/basic.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <button class="btn btn-primary">Primary Button</button>
+    <button class="btn btn-secondary">Default Button</button>
+    <button class="btn btn-error">Dashed Button</button>
+    <button class="btn btn-link">Text Button</button>
+    <button class="btn btn-link">Link Button</button>
+  </div>
+</template>
diff --git a/apps/playground/src/pages/button/block.vue b/apps/playground/src/pages/button/block.vue
new file mode 100644
index 000000000..4cdbbb9d0
--- /dev/null
+++ b/apps/playground/src/pages/button/block.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <button class="btn btn-primary">Primary</button>
+    <button class="btn btn-secondary">Default</button>
+    <button class="btn btn-error">Danger</button>
+    <button class="btn btn-link">Link</button>
+    <button class="btn btn-ghost">Ghost</button>
+    <button class="btn btn-link">Link</button>
+    <button class="btn btn-link">Link</button>
+    <button class="btn btn-link">Link</button>
+  </div>
+</template>
diff --git a/apps/playground/src/routes.ts b/apps/playground/src/routes.ts
index a10ca9034..48cf47560 100644
--- a/apps/playground/src/routes.ts
+++ b/apps/playground/src/routes.ts
@@ -1,4 +1,65 @@
-import { RouteRecordRaw } from 'vue-router'
+import { RouteRecordRaw, RouterView } from 'vue-router'
+import BasicLayout from './components/BasicLayout.vue'
+import { Fragment, h } from 'vue'
 
-const items = import.meta.glob('./pages/*/index.ts', { import: 'default', eager: true })
-export default Object.values(items) as RouteRecordRaw[]
+// /pages/button/basic.vue
+const items = import.meta.glob('./pages/*/*.vue', { import: 'default', eager: true })
+
+const categoryRoutes: Record<string, RouteRecordRaw[]> = {}
+
+Object.keys(items).forEach(path => {
+  const route = path.replace('./pages/', '').replace('.vue', '')
+  const [category, demo] = route.split('/')
+
+  if (!categoryRoutes[category]) {
+    categoryRoutes[category] = []
+  }
+
+  categoryRoutes[category].push({
+    path: demo,
+    component: items[path],
+  })
+})
+
+const routes: RouteRecordRaw[] = Object.entries(categoryRoutes).map(([category, children]) => {
+  const renderComponents = () =>
+    h(
+      'div',
+      children.map(child => h(child.component)),
+    )
+  renderComponents.displayName = 'renderComponents'
+  return {
+    path: `/${category}`,
+    component: RouterView,
+    children: [
+      ...children,
+      {
+        path: ':demo*',
+        component: renderComponents,
+      },
+    ],
+  }
+})
+
+const navs = Object.keys(categoryRoutes).map(category => ({
+  name: category,
+  path: `/${category}`,
+  children: categoryRoutes[category].map(child => ({
+    name: child.path,
+    path: `/${category}/${child.path}`,
+  })),
+}))
+routes.push({
+  path: '/:pathMatch(.*)*',
+  component: h('div', 'demo not found'),
+})
+export default [
+  {
+    path: '/',
+    component: BasicLayout,
+    children: routes,
+    props: {
+      navs,
+    },
+  },
+]
diff --git a/apps/playground/tsconfig.json b/apps/playground/tsconfig.json
new file mode 100644
index 000000000..0ce414b2b
--- /dev/null
+++ b/apps/playground/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@ant-design-vue/typescript-config/tsconfig.vue.json",
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"],
+      "~/*": ["./assets/*"]
+    }
+  }
+}
diff --git a/apps/playground/tsconfig.node.json b/apps/playground/tsconfig.node.json
new file mode 100644
index 000000000..0ae8edbee
--- /dev/null
+++ b/apps/playground/tsconfig.node.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@ant-design-vue/typescript-config/tsconfig.node.json",
+  "include": ["vite.config.*"]
+}
diff --git a/apps/playground/vite.config.ts b/apps/playground/vite.config.ts
index c4b7c00ef..fe34ba97a 100644
--- a/apps/playground/vite.config.ts
+++ b/apps/playground/vite.config.ts
@@ -1,24 +1,11 @@
 import tailwindcss from '@tailwindcss/vite'
-import react from '@vitejs/plugin-react'
 import vue from '@vitejs/plugin-vue'
 import { resolve } from 'node:path'
 import { defineConfig, Plugin } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  appType: 'mpa',
-  plugins: [
-    vue(),
-    react(),
-    tailwindcss(),
-  ],
-  build: {
-    rollupOptions: {
-      input: {
-        main: resolve(__dirname, './index.html'),
-      },
-    },
-  },
+  plugins: [vue(), tailwindcss()],
   server: {
     watch: {
       ignored: ['!**/node_modules/@ant-design-vue/**'],
@@ -31,40 +18,3 @@ export default defineConfig({
     },
   },
 })
-
-interface ImportmapOptions {
-  imports: Record<string, string>
-}
-function importmapPlugin(options: ImportmapOptions): Plugin {
-  return {
-    name: 'vite-plugin-importmap',
-    apply: 'build',
-    config() {
-      return {
-        build: {
-          rollupOptions: {
-            external: Object.keys(options.imports),
-          },
-        },
-      }
-    },
-    transformIndexHtml: {
-      order: 'pre',
-      handler(html) {
-        return {
-          html,
-          tags: [
-            {
-              tag: 'script',
-              attrs: {
-                type: 'importmap',
-              },
-              children: JSON.stringify(options),
-              injectTo: 'head-prepend',
-            },
-          ],
-        }
-      },
-    },
-  }
-}