feat: improve playground style

apps/playground/assets/tailwind.css

@@ -1,15 +1,13 @@
 @import '@ant-design-vue/tailwind-config';
+@import '@ant-design-vue/tailwind-config/themes';
 @source '../index.html';
 @source '../src/**/*.{vue,ts}';
+
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--color-base-300) transparent;
 }
+
 *:focus-visible {
   outline: none;
 }
-
-.shiki.github-dark,
-.dark-scrollbar {
-  scrollbar-color: rgba(121, 121, 121, 0.4) transparent;
-}

apps/playground/src/App.vue

@@ -1,15 +1,10 @@
 <template>
-  <button @click="toggleTheme" class="fixed top-2 right-2">toggle {{ appearance }}</button>
+  <the-header /> 
   <a-theme :appearance="appearance">
     <RouterView />
   </a-theme>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import TheHeader from '@/components/TheHeader.vue';
-
+import { appearance } from '@/composables/appearance';
-const appearance = ref('light')
-
-const toggleTheme = () => {
-  appearance.value = appearance.value === 'light' ? 'dark' : 'light'
-}
 </script>

apps/playground/src/components/BasicLayout.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex h-screen" :class="pageClass">
+  <div class="flex h-[calc(100vh-72px)] bg-base-100/90" :class="pageClass">
     <TheNavbar v-if="!hideNavbar" :items="navs"></TheNavbar>
-    <div class="flex-1 justify-center px-4 py-16" :class="contentClass">
+    <div class="flex-1 justify-center p-4 overflow-scroll" :class="contentClass">
       <RouterView></RouterView>
     </div>
   </div>

apps/playground/src/components/TheBreadcrumbs.vue

@@ -5,7 +5,7 @@
         <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"
+              class="ml-2 mr-3 block size-1.5 rotate-45 transform border-r border-base-content/70 bg-transparent"
             ></span>
           </template>
           <template v-if="item.path !== route.path">

apps/playground/src/components/TheHeader.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import logoSrc from '~/logo.png?inline';
+import { appearance } from '@/composables/appearance';
+import { MoonIcon, SunIcon } from "@heroicons/vue/20/solid"
+
+const toggleTheme = () => {
+  appearance.value = appearance.value === 'light' ? 'dark' : 'light'
+}
+</script>
+
+<template>
+  <header class="px-8 py-2 border-b flex justify-between items-center bg-base-100/90 text-base-content border-base-content/10 h-18">
+    <div class="flex items-center">
+      <img :src="logoSrc" alt="Logo" class="h-8 inline-block mr-3" />
+      <h3 class="font-semibold text-xl">Playground</h3>
+    </div>
+
+    <div>
+      <button @click="toggleTheme" class="cursor-pointer p-2 rounded hover:bg-base-content/10 transition">
+        <MoonIcon class="size-4" v-if="appearance === 'light'" />
+        <SunIcon class="size-4" v-else />
+      </button>
+    </div>
+  </header>
+</template>

apps/playground/src/components/TheNavbar.vue

@@ -1,18 +1,17 @@
 <template>
-  <div class="bg-base-100/90 text-base-content border-base-content/10 border-r">
+  <div class="text-base-content border-base-content/10 border-r">
-    <div class="flex min-h-16 w-full items-center p-2">
+    <div class="flex min-h-16 w-full p-2 pr-0 h-[calc(100vh-72px)] overflow-scroll">
       <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"
+            class="z-1 mt-3 flex w-54 origin-top scale-95 flex-col rounded-lg p-2 text-sm capitalize"
           >
-            <li v-for="item in items" :key="item.name">
+            <li v-for="item in items" :key="item.name" class="mb-2">
               <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 font-semibold text-lg"
-                class="hover:bg-base-content/10 flex cursor-pointer flex-col rounded-lg px-3 py-2 transition duration-200"
               >
                 {{ item.name }} 
               </RouterLink>
@@ -20,8 +19,7 @@
                 <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 text-[16px]"
-                    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>

apps/playground/src/composables/appearance.ts

@@ -0,0 +1,3 @@
+import { ref } from "vue";
+
+export const appearance = ref<"light" | "dark">("light");

apps/playground/src/pages/affix/basic.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-const top = ref<number>(10)
+const top = ref<number>(100)
 const bottom = ref<number>(10)
 const onChange = (lastAffix: boolean) => {
   console.log('onChange', lastAffix)

packages-config/tailwind-config/package.json

@@ -6,8 +6,8 @@
     ".": {
       "default": "./tailwind.css"
     },
-    "./themes/*": {
+    "./themes": {
-      "default": "./themes/*.css"
+      "default": "./themes.css"
     }
   },
   "devDependencies": {

packages-config/tailwind-config/themes.css

@@ -0,0 +1,68 @@
+:root {
+  --color-base-100: #ffffff;
+  --color-base-200: #f7f7f7;
+  --color-base-300: #ededed;
+  --color-base-content: #222222;
+  --color-primary: #151415;
+  --color-primary-content: #ffffff;
+  --color-secondary: #0d58fc;
+  --color-secondary-content: #ffffff;
+  --color-accent: #0289ff;
+  --color-accent-content: #ffffff;
+  --color-neutral: #666666;
+  --color-neutral-content: #ffffff;
+  --color-info: #0d58fc;
+  --color-info-content: #ffffff;
+  --color-success: #00c573;
+  --color-success-content: #ffffff;
+  --color-warning: #ff9900;
+  --color-warning-content: #ffffff;
+  --color-error: #ff3333;
+  --color-error-content: #ffffff;
+}
+
+:root.dark-theme {
+  --color-base-100: #1a1a1a;
+  --color-base-200: #262626;
+  --color-base-300: #333333;
+  --color-base-content: #e5e5e5;
+  --color-primary: #f5f5f5;
+  --color-primary-content: #1a1a1a;
+  --color-secondary: #3b82f6;
+  --color-secondary-content: #ffffff;
+  --color-accent: #38bdf8;
+  --color-accent-content: #1a1a1a;
+  --color-neutral: #a3a3a3;
+  --color-neutral-content: #1a1a1a;
+  --color-info: #3b82f6;
+  --color-info-content: #ffffff;
+  --color-success: #22c55e;
+  --color-success-content: #ffffff;
+  --color-warning: #f59e0b;
+  --color-warning-content: #1a1a1a;
+  --color-error: #ef4444;
+  --color-error-content: #ffffff;
+}
+
+@theme {
+  --color-base-100: var(--color-base-100);
+  --color-base-200: var(--color-base-200);
+  --color-base-300: var(--color-base-300);
+  --color-base-content: var(--color-base-content);
+  --color-primary: var(--color-primary);
+  --color-primary-content: var(--color-primary-content);
+  --color-secondary: var(--color-secondary);
+  --color-secondary-content: var(--color-secondary-content);
+  --color-accent: var(--color-accent);
+  --color-accent-content: var(--color-accent-content);
+  --color-neutral: var(--color-neutral);
+  --color-neutral-content: var(--color-neutral-content);
+  --color-info: var(--color-info);
+  --color-info-content: var(--color-info-content);
+  --color-success: var(--color-success);
+  --color-success-content: var(--color-success-content);
+  --color-warning: var(--color-warning);
+  --color-warning-content: var(--color-warning-content);
+  --color-error: var(--color-error);
+  --color-error-content: var(--color-error-content);
+}

packages-config/tailwind-config/themes/light.css

@@ -1,22 +0,0 @@
-@theme {
-  --color-base-100: #ffffff;
-  --color-base-200: #f7f7f7;
-  --color-base-300: #ededed;
-  --color-base-content: #222222;
-  --color-primary: #151415;
-  --color-primary-content: #ffffff;
-  --color-secondary: #0d58fc;
-  --color-secondary-content: #ffffff;
-  --color-accent: #0289ff;
-  --color-accent-content: #ffffff;
-  --color-neutral: #666666;
-  --color-neutral-content: #ffffff;
-  --color-info: #0d58fc;
-  --color-info-content: #ffffff;
-  --color-success: #00c573;
-  --color-success-content: #ffffff;
-  --color-warning: #ff9900;
-  --color-warning-content: #ffffff;
-  --color-error: #ff3333;
-  --color-error-content: #ffffff;
-}