github
/
ant-design-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: improve playground style

pull/8414/head
Konv Suu 2025-11-13 16:13:41 +08:00
parent a15bb9cfb8
commit 370dcb1b01
12 changed files with 115 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/playground/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

8
apps/playground/assets/tailwind.css
View File

@ -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;
}

11
apps/playground/src/App.vue
View File

@ -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'
const appearance = ref('light')
const toggleTheme = () => {
appearance.value = appearance.value === 'light' ? 'dark' : 'light'
}
import TheHeader from '@/components/TheHeader.vue';
import { appearance } from '@/composables/appearance';
</script>

4
apps/playground/src/components/BasicLayout.vue
View File

@ -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>

2
apps/playground/src/components/TheBreadcrumbs.vue
View File

@ -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">

25
apps/playground/src/components/TheHeader.vue Normal file
View File

@ -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>

16
apps/playground/src/components/TheNavbar.vue
View File

@ -1,27 +1,25 @@
<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="text-base-content border-base-content/10 border-r">
<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"
class="hover:bg-base-content/10 flex cursor-pointer flex-col rounded-lg px-3 py-2 transition duration-200 font-semibold text-lg"
>
{{ item.name }}
{{ 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"
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]"
>
{{ child.name }}
</RouterLink>

3
apps/playground/src/composables/appearance.ts Normal file
View File

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

2
apps/playground/src/pages/affix/basic.vue
View File

@ -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)

4
packages-config/tailwind-config/package.json
View File

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

68
packages-config/tailwind-config/themes.css Normal file
View File

@ -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);
}

22
packages-config/tailwind-config/themes/light.css
View File

@ -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;
}