feat: 添加主题配置支持并优化 UI 组件页面的暗黑模式样式

src/App.vue

@@ -1,5 +1,23 @@
+<script setup lang="ts">
+import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
+
+import { theme } from 'ant-design-vue';
+
+import { useLayout } from './layouts/sakai-vue/composables/layout';
+
+const { isDarkTheme } = useLayout();
+
+const themeConfig = computed(() => {
+  return {
+    algorithm: isDarkTheme.value ? theme.darkAlgorithm : theme.defaultAlgorithm,
+  } satisfies ThemeConfig;
+});
+</script>
+
 <template>
-  <RouterView />
+  <a-config-provider :theme="themeConfig">
+    <RouterView />
+  </a-config-provider>
 
   <DynamicDialog /> <ConfirmDialog /> <Toast />
 </template>

src/pages/UI-components/Components/index.page.vue

@@ -4,7 +4,7 @@ import { Input as ShaInput } from '@/shadcn/components/ui/input';
 </script>
 
 <template>
-  <div class="flex flex-col items-start justify-center gap-4 bg-white p-4">
+  <div class="flex flex-col items-start justify-center gap-4 bg-white p-4 dark:bg-gray-900">
     <div class="demo-block">
       <div class="demo-block">
         <a-button type="primary">Primary Button</a-button>
@@ -38,6 +38,6 @@ import { Input as ShaInput } from '@/shadcn/components/ui/input';
 
 <style scoped>
 .demo-block {
-  @apply flex flex-wrap gap-4 b b-solid b-red-500 p-4;
+  @apply flex flex-wrap gap-4 b b-solid b-red-500 p-4 dark:bg-gray-800;
 }
 </style>

src/pages/UI-components/ShadcnVue/index.page.vue

@@ -8,7 +8,7 @@ const onClick = () => {
 
 <template>
   <div>
-    <ShadcnButton variant="link" :onClick>s</ShadcnButton>
+    <ShadcnButton :onClick>ShadcnButton</ShadcnButton>
   </div>
 </template>