update: iter 1.5

added cosmic, added passcode
stage
2025-01-21 22:27:09 +08:00 · 2025-01-18 22:00:26 +08:00 · 2025-01-16 16:03:21 +08:00 · 2025-01-14 17:37:25 +08:00 · 2025-01-14 14:48:08 +08:00 · 2025-01-14 14:21:46 +08:00
243 changed files with 10138 additions and 304 deletions
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@ -8,7 +8,9 @@ export {}
 declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const authCode: typeof import('./src/composables/fetch')['authCode']
  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const baseFetch: typeof import('./src/composables/fetch')['baseFetch']
  const computed: typeof import('vue')['computed']
  const computedAsync: typeof import('@vueuse/core')['computedAsync']
  const computedEager: typeof import('@vueuse/core')['computedEager']
@ -38,6 +40,7 @@ declare global {
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
+  const hasConnection: typeof import('./src/composables/online')['hasConnection']
  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
  const inject: typeof import('vue')['inject']
  const injectLocal: typeof import('@vueuse/core')['injectLocal']
@ -307,7 +310,9 @@ declare module 'vue' {
  interface ComponentCustomProperties {
    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
+    readonly authCode: UnwrapRef<typeof import('./src/composables/fetch')['authCode']>
    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
+    readonly baseFetch: UnwrapRef<typeof import('./src/composables/fetch')['baseFetch']>
    readonly computed: UnwrapRef<typeof import('vue')['computed']>
    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
@ -335,6 +340,7 @@ declare module 'vue' {
    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly hasConnection: UnwrapRef<typeof import('./src/composables/online')['hasConnection']>
    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
    readonly inject: UnwrapRef<typeof import('vue')['inject']>
    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
--- a/components.d.ts
+++ b/components.d.ts
@ -7,10 +7,177 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
+    Accordion: typeof import('./src/components/ui/accordion/Accordion.vue')['default']
+    AccordionContent: typeof import('./src/components/ui/accordion/AccordionContent.vue')['default']
+    AccordionItem: typeof import('./src/components/ui/accordion/AccordionItem.vue')['default']
+    AccordionTrigger: typeof import('./src/components/ui/accordion/AccordionTrigger.vue')['default']
+    Alert: typeof import('./src/components/ui/alert/Alert.vue')['default']
+    AlertDescription: typeof import('./src/components/ui/alert/AlertDescription.vue')['default']
+    AlertTitle: typeof import('./src/components/ui/alert/AlertTitle.vue')['default']
+    AuthBlock: typeof import('./src/components/AuthBlock.vue')['default']
+    AutoForm: typeof import('./src/components/ui/auto-form/AutoForm.vue')['default']
+    AutoFormField: typeof import('./src/components/ui/auto-form/AutoFormField.vue')['default']
+    AutoFormFieldArray: typeof import('./src/components/ui/auto-form/AutoFormFieldArray.vue')['default']
+    AutoFormFieldBoolean: typeof import('./src/components/ui/auto-form/AutoFormFieldBoolean.vue')['default']
+    AutoFormFieldDate: typeof import('./src/components/ui/auto-form/AutoFormFieldDate.vue')['default']
+    AutoFormFieldEnum: typeof import('./src/components/ui/auto-form/AutoFormFieldEnum.vue')['default']
+    AutoFormFieldFile: typeof import('./src/components/ui/auto-form/AutoFormFieldFile.vue')['default']
+    AutoFormFieldInput: typeof import('./src/components/ui/auto-form/AutoFormFieldInput.vue')['default']
+    AutoFormFieldNumber: typeof import('./src/components/ui/auto-form/AutoFormFieldNumber.vue')['default']
+    AutoFormFieldObject: typeof import('./src/components/ui/auto-form/AutoFormFieldObject.vue')['default']
+    AutoFormLabel: typeof import('./src/components/ui/auto-form/AutoFormLabel.vue')['default']
+    Avatar: typeof import('./src/components/ui/avatar/Avatar.vue')['default']
+    AvatarFallback: typeof import('./src/components/ui/avatar/AvatarFallback.vue')['default']
+    AvatarImage: typeof import('./src/components/ui/avatar/AvatarImage.vue')['default']
+    Badge: typeof import('./src/components/ui/badge/Badge.vue')['default']
+    Breadcrumb: typeof import('./src/components/ui/breadcrumb/Breadcrumb.vue')['default']
+    BreadcrumbEllipsis: typeof import('./src/components/ui/breadcrumb/BreadcrumbEllipsis.vue')['default']
+    BreadcrumbItem: typeof import('./src/components/ui/breadcrumb/BreadcrumbItem.vue')['default']
+    BreadcrumbLink: typeof import('./src/components/ui/breadcrumb/BreadcrumbLink.vue')['default']
+    BreadcrumbList: typeof import('./src/components/ui/breadcrumb/BreadcrumbList.vue')['default']
+    BreadcrumbPage: typeof import('./src/components/ui/breadcrumb/BreadcrumbPage.vue')['default']
+    BreadcrumbSeparator: typeof import('./src/components/ui/breadcrumb/BreadcrumbSeparator.vue')['default']
+    Button: typeof import('./src/components/ui/button/Button.vue')['default']
+    Calendar: typeof import('./src/components/ui/calendar/Calendar.vue')['default']
+    CalendarCell: typeof import('./src/components/ui/calendar/CalendarCell.vue')['default']
+    CalendarCellTrigger: typeof import('./src/components/ui/calendar/CalendarCellTrigger.vue')['default']
+    CalendarGrid: typeof import('./src/components/ui/calendar/CalendarGrid.vue')['default']
+    CalendarGridBody: typeof import('./src/components/ui/calendar/CalendarGridBody.vue')['default']
+    CalendarGridHead: typeof import('./src/components/ui/calendar/CalendarGridHead.vue')['default']
+    CalendarGridRow: typeof import('./src/components/ui/calendar/CalendarGridRow.vue')['default']
+    CalendarHeadCell: typeof import('./src/components/ui/calendar/CalendarHeadCell.vue')['default']
+    CalendarHeader: typeof import('./src/components/ui/calendar/CalendarHeader.vue')['default']
+    CalendarHeading: typeof import('./src/components/ui/calendar/CalendarHeading.vue')['default']
+    CalendarNextButton: typeof import('./src/components/ui/calendar/CalendarNextButton.vue')['default']
+    CalendarPrevButton: typeof import('./src/components/ui/calendar/CalendarPrevButton.vue')['default']
+    Checkbox: typeof import('./src/components/ui/checkbox/Checkbox.vue')['default']
+    Collapsible: typeof import('./src/components/ui/collapsible/Collapsible.vue')['default']
+    CollapsibleContent: typeof import('./src/components/ui/collapsible/CollapsibleContent.vue')['default']
+    CollapsibleTrigger: typeof import('./src/components/ui/collapsible/CollapsibleTrigger.vue')['default']
+    CoolBack: typeof import('./src/components/CoolBack.vue')['default']
+    DenseFramework: typeof import('./src/components/DenseFramework.vue')['default']
+    DropdownMenu: typeof import('./src/components/ui/dropdown-menu/DropdownMenu.vue')['default']
+    DropdownMenuCheckboxItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue')['default']
+    DropdownMenuContent: typeof import('./src/components/ui/dropdown-menu/DropdownMenuContent.vue')['default']
+    DropdownMenuGroup: typeof import('./src/components/ui/dropdown-menu/DropdownMenuGroup.vue')['default']
+    DropdownMenuItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuItem.vue')['default']
+    DropdownMenuLabel: typeof import('./src/components/ui/dropdown-menu/DropdownMenuLabel.vue')['default']
+    DropdownMenuRadioGroup: typeof import('./src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue')['default']
+    DropdownMenuRadioItem: typeof import('./src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue')['default']
+    DropdownMenuSeparator: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSeparator.vue')['default']
+    DropdownMenuShortcut: typeof import('./src/components/ui/dropdown-menu/DropdownMenuShortcut.vue')['default']
+    DropdownMenuSub: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSub.vue')['default']
+    DropdownMenuSubContent: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSubContent.vue')['default']
+    DropdownMenuSubTrigger: typeof import('./src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue')['default']
+    DropdownMenuTrigger: typeof import('./src/components/ui/dropdown-menu/DropdownMenuTrigger.vue')['default']
+    FormControl: typeof import('./src/components/ui/form/FormControl.vue')['default']
+    FormDescription: typeof import('./src/components/ui/form/FormDescription.vue')['default']
+    FormItem: typeof import('./src/components/ui/form/FormItem.vue')['default']
+    FormLabel: typeof import('./src/components/ui/form/FormLabel.vue')['default']
+    FormMessage: typeof import('./src/components/ui/form/FormMessage.vue')['default']
+    Image: typeof import('./src/components/Image.vue')['default']
+    ImageContainer: typeof import('./src/components/ImageContainer.vue')['default']
+    Input: typeof import('./src/components/ui/input/Input.vue')['default']
+    Label: typeof import('./src/components/ui/label/Label.vue')['default']
+    Loading: typeof import('./src/components/Loading.vue')['default']
+    Menubar: typeof import('./src/components/ui/menubar/Menubar.vue')['default']
+    MenubarCheckboxItem: typeof import('./src/components/ui/menubar/MenubarCheckboxItem.vue')['default']
+    MenubarContent: typeof import('./src/components/ui/menubar/MenubarContent.vue')['default']
+    MenubarGroup: typeof import('./src/components/ui/menubar/MenubarGroup.vue')['default']
+    MenubarItem: typeof import('./src/components/ui/menubar/MenubarItem.vue')['default']
+    MenubarLabel: typeof import('./src/components/ui/menubar/MenubarLabel.vue')['default']
+    MenubarMenu: typeof import('./src/components/ui/menubar/MenubarMenu.vue')['default']
+    MenubarRadioGroup: typeof import('./src/components/ui/menubar/MenubarRadioGroup.vue')['default']
+    MenubarRadioItem: typeof import('./src/components/ui/menubar/MenubarRadioItem.vue')['default']
+    MenubarSeparator: typeof import('./src/components/ui/menubar/MenubarSeparator.vue')['default']
+    MenubarShortcut: typeof import('./src/components/ui/menubar/MenubarShortcut.vue')['default']
+    MenubarSub: typeof import('./src/components/ui/menubar/MenubarSub.vue')['default']
+    MenubarSubContent: typeof import('./src/components/ui/menubar/MenubarSubContent.vue')['default']
+    MenubarSubTrigger: typeof import('./src/components/ui/menubar/MenubarSubTrigger.vue')['default']
+    MenubarTrigger: typeof import('./src/components/ui/menubar/MenubarTrigger.vue')['default']
+    NavigationMenu: typeof import('./src/components/ui/navigation-menu/NavigationMenu.vue')['default']
+    NavigationMenuContent: typeof import('./src/components/ui/navigation-menu/NavigationMenuContent.vue')['default']
+    NavigationMenuIndicator: typeof import('./src/components/ui/navigation-menu/NavigationMenuIndicator.vue')['default']
+    NavigationMenuItem: typeof import('./src/components/ui/navigation-menu/NavigationMenuItem.vue')['default']
+    NavigationMenuLink: typeof import('./src/components/ui/navigation-menu/NavigationMenuLink.vue')['default']
+    NavigationMenuList: typeof import('./src/components/ui/navigation-menu/NavigationMenuList.vue')['default']
+    NavigationMenuListItem: typeof import('./src/components/NavigationMenuListItem.vue')['default']
+    NavigationMenuTrigger: typeof import('./src/components/ui/navigation-menu/NavigationMenuTrigger.vue')['default']
+    NavigationMenuViewport: typeof import('./src/components/ui/navigation-menu/NavigationMenuViewport.vue')['default']
+    NumberField: typeof import('./src/components/ui/number-field/NumberField.vue')['default']
+    NumberFieldContent: typeof import('./src/components/ui/number-field/NumberFieldContent.vue')['default']
+    NumberFieldDecrement: typeof import('./src/components/ui/number-field/NumberFieldDecrement.vue')['default']
+    NumberFieldIncrement: typeof import('./src/components/ui/number-field/NumberFieldIncrement.vue')['default']
+    NumberFieldInput: typeof import('./src/components/ui/number-field/NumberFieldInput.vue')['default']
+    Paper: typeof import('./src/components/Paper.vue')['default']
+    ParamsCard: typeof import('./src/components/ParamsCard.vue')['default']
+    Popover: typeof import('./src/components/ui/popover/Popover.vue')['default']
+    PopoverContent: typeof import('./src/components/ui/popover/PopoverContent.vue')['default']
+    PopoverTrigger: typeof import('./src/components/ui/popover/PopoverTrigger.vue')['default']
+    RadioGroup: typeof import('./src/components/ui/radio-group/RadioGroup.vue')['default']
+    RadioGroupItem: typeof import('./src/components/ui/radio-group/RadioGroupItem.vue')['default']
+    ResizableHandle: typeof import('./src/components/ui/resizable/ResizableHandle.vue')['default']
+    ResizablePanelGroup: typeof import('./src/components/ui/resizable/ResizablePanelGroup.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
-    TheCounter: typeof import('./src/components/TheCounter.vue')['default']
+    Select: typeof import('./src/components/ui/select/Select.vue')['default']
+    SelectContent: typeof import('./src/components/ui/select/SelectContent.vue')['default']
+    SelectGroup: typeof import('./src/components/ui/select/SelectGroup.vue')['default']
+    SelectItem: typeof import('./src/components/ui/select/SelectItem.vue')['default']
+    SelectItemText: typeof import('./src/components/ui/select/SelectItemText.vue')['default']
+    SelectLabel: typeof import('./src/components/ui/select/SelectLabel.vue')['default']
+    SelectScrollDownButton: typeof import('./src/components/ui/select/SelectScrollDownButton.vue')['default']
+    SelectScrollUpButton: typeof import('./src/components/ui/select/SelectScrollUpButton.vue')['default']
+    SelectSeparator: typeof import('./src/components/ui/select/SelectSeparator.vue')['default']
+    SelectTrigger: typeof import('./src/components/ui/select/SelectTrigger.vue')['default']
+    SelectValue: typeof import('./src/components/ui/select/SelectValue.vue')['default']
+    Separator: typeof import('./src/components/ui/separator/Separator.vue')['default']
+    Sheet: typeof import('./src/components/ui/sheet/Sheet.vue')['default']
+    SheetClose: typeof import('./src/components/ui/sheet/SheetClose.vue')['default']
+    SheetContent: typeof import('./src/components/ui/sheet/SheetContent.vue')['default']
+    SheetDescription: typeof import('./src/components/ui/sheet/SheetDescription.vue')['default']
+    SheetFooter: typeof import('./src/components/ui/sheet/SheetFooter.vue')['default']
+    SheetHeader: typeof import('./src/components/ui/sheet/SheetHeader.vue')['default']
+    SheetTitle: typeof import('./src/components/ui/sheet/SheetTitle.vue')['default']
+    SheetTrigger: typeof import('./src/components/ui/sheet/SheetTrigger.vue')['default']
+    Sidebar: typeof import('./src/components/ui/sidebar/Sidebar.vue')['default']
+    SidebarContent: typeof import('./src/components/ui/sidebar/SidebarContent.vue')['default']
+    SidebarFooter: typeof import('./src/components/ui/sidebar/SidebarFooter.vue')['default']
+    SidebarGroup: typeof import('./src/components/ui/sidebar/SidebarGroup.vue')['default']
+    SidebarGroupAction: typeof import('./src/components/ui/sidebar/SidebarGroupAction.vue')['default']
+    SidebarGroupContent: typeof import('./src/components/ui/sidebar/SidebarGroupContent.vue')['default']
+    SidebarGroupLabel: typeof import('./src/components/ui/sidebar/SidebarGroupLabel.vue')['default']
+    SidebarHeader: typeof import('./src/components/ui/sidebar/SidebarHeader.vue')['default']
+    SidebarInput: typeof import('./src/components/ui/sidebar/SidebarInput.vue')['default']
+    SidebarInset: typeof import('./src/components/ui/sidebar/SidebarInset.vue')['default']
+    SidebarMenu: typeof import('./src/components/ui/sidebar/SidebarMenu.vue')['default']
+    SidebarMenuAction: typeof import('./src/components/ui/sidebar/SidebarMenuAction.vue')['default']
+    SidebarMenuBadge: typeof import('./src/components/ui/sidebar/SidebarMenuBadge.vue')['default']
+    SidebarMenuButton: typeof import('./src/components/ui/sidebar/SidebarMenuButton.vue')['default']
+    SidebarMenuButtonChild: typeof import('./src/components/ui/sidebar/SidebarMenuButtonChild.vue')['default']
+    SidebarMenuItem: typeof import('./src/components/ui/sidebar/SidebarMenuItem.vue')['default']
+    SidebarMenuSkeleton: typeof import('./src/components/ui/sidebar/SidebarMenuSkeleton.vue')['default']
+    SidebarMenuSub: typeof import('./src/components/ui/sidebar/SidebarMenuSub.vue')['default']
+    SidebarMenuSubButton: typeof import('./src/components/ui/sidebar/SidebarMenuSubButton.vue')['default']
+    SidebarMenuSubItem: typeof import('./src/components/ui/sidebar/SidebarMenuSubItem.vue')['default']
+    SidebarProvider: typeof import('./src/components/ui/sidebar/SidebarProvider.vue')['default']
+    SidebarRail: typeof import('./src/components/ui/sidebar/SidebarRail.vue')['default']
+    SidebarSeparator: typeof import('./src/components/ui/sidebar/SidebarSeparator.vue')['default']
+    SidebarTrigger: typeof import('./src/components/ui/sidebar/SidebarTrigger.vue')['default']
+    Skeleton: typeof import('./src/components/ui/skeleton/Skeleton.vue')['default']
+    Switch: typeof import('./src/components/ui/switch/Switch.vue')['default']
+    Tabs: typeof import('./src/components/ui/tabs/Tabs.vue')['default']
+    TabsContent: typeof import('./src/components/ui/tabs/TabsContent.vue')['default']
+    TabsList: typeof import('./src/components/ui/tabs/TabsList.vue')['default']
+    TabsTrigger: typeof import('./src/components/ui/tabs/TabsTrigger.vue')['default']
+    TestHeader: typeof import('./src/components/TestHeader.vue')['default']
+    Textarea: typeof import('./src/components/ui/textarea/Textarea.vue')['default']
    TheFooter: typeof import('./src/components/TheFooter.vue')['default']
-    TheInput: typeof import('./src/components/TheInput.vue')['default']
+    TheHeader: typeof import('./src/components/TheHeader.vue')['default']
+    Tooltip: typeof import('./src/components/ui/tooltip/Tooltip.vue')['default']
+    TooltipContent: typeof import('./src/components/ui/tooltip/TooltipContent.vue')['default']
+    TooltipProvider: typeof import('./src/components/ui/tooltip/TooltipProvider.vue')['default']
+    TooltipTrigger: typeof import('./src/components/ui/tooltip/TooltipTrigger.vue')['default']
+    TopHeader: typeof import('./src/components/TopHeader.vue')['default']
  }
 }
--- a/components.json
+++ b/components.json
@ -0,0 +1,18 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tsConfigPath": "./tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/assets/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "framework": "vite",
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/lib/utils"
+  }
+}
--- a/cspell.config.yaml
+++ b/cspell.config.yaml
@ -0,0 +1,7 @@
+version: '0.2'
+ignorePaths: []
+dictionaryDefinitions: []
+dictionaries: []
+words: []
+ignoreWords: []
+import: []
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <title>Vitesse Lite</title>
+    <title>中高层大气波动解析识别技术系统</title>
    <meta name="description" content="Opinionated Vite Starter Template" />
  </head>
  <body class="font-sans dark:text-white dark:bg-hex-121212">
--- a/package.json
+++ b/package.json
@ -13,13 +13,28 @@
    "postinstall": "npx simple-git-hooks"
  },
  "dependencies": {
+    "@unocss/preset-icons": "^0.65.4",
+    "@vee-validate/zod": "^4.15.0",
    "@vueuse/core": "^12.0.0",
+    "@vueuse/motion": "^2.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.468.0",
+    "p5i": "^0.6.0",
+    "radix-vue": "^1.9.11",
+    "shadcn-vue": "^0.11.3",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
+    "vee-validate": "^4.15.0",
    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^3.12.0",
    "@iconify-json/carbon": "^1.2.4",
+    "@iconify/json": "^2.2.293",
+    "@iconify/vue": "^4.3.0",
    "@types/node": "^22.10.2",
    "@unocss/eslint-config": "^0.65.1",
    "@unocss/eslint-plugin": "^0.65.1",
@ -36,11 +51,14 @@
    "taze": "^0.18.0",
    "typescript": "~5.6.3",
    "unocss": "^0.65.1",
+    "unocss-preset-animations": "^1.1.0",
+    "unocss-preset-shadcn": "^0.3.1",
    "unplugin-auto-import": "^0.19.0",
    "unplugin-vue-components": "^0.28.0",
    "unplugin-vue-macros": "^2.13.6",
    "unplugin-vue-router": "^0.10.9",
    "vite": "^6.0.3",
+    "vite-plugin-vue-devtools": "^7.7.0",
    "vitest": "^2.1.8",
    "vue-tsc": "^2.1.10"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/pack.png
+++ b/public/pack.png
--- a/src/App.vue
+++ b/src/App.vue
@ -1,6 +1,287 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+import { ChevronRight, ChevronsUpDown } from 'lucide-vue-next'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '~/components/ui/breadcrumb'
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '~/components/ui/collapsible'
+import { Separator } from '~/components/ui/separator'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+} from '~/components/ui/sidebar'
+import { authCode } from './composables'
+
+const router = useRouter()
+
+function logout() {
+  localStorage.clear()
+  sessionStorage.clear()
+  authCode.value = ''
+  router.push('/auth')
+}
+
+onMounted(() => {
+  if (!authCode.value) {
+    router.push('/auth')
+  }
+})
+// This is sample data.
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  navMain: [
+    {
+      title: '流星雷达',
+      url: '#',
+      icon: 'ri-radar-fill',
+      isActive: true,
+      items: [
+        {
+          title: '潮汐波强度',
+          url: '/radar/v1',
+        },
+        {
+          title: '潮汐波时空变化',
+          url: '/radar/v2',
+        },
+      ],
+    },
+    {
+      title: 'SABER',
+      url: '#',
+      icon: 'game-icons:cracked-saber',
+      isActive: true,
+      items: [
+        {
+          title: '波动拟合图',
+          url: '/saber/plot_wave_fitting',
+        },
+        {
+          title: '日数据傅里叶变换分析',
+          url: '/saber/day_fft_ifft_plot',
+        },
+        {
+          title: '日周期波动能量分析',
+          url: '/saber/day_cycle_power_wave_plot',
+        },
+        {
+          title: '月度波动能量分析',
+          url: '/saber/month_power_wave_plot',
+        },
+      ],
+
+    },
+    {
+      title: '探空气球',
+      url: '#',
+      icon: 'bxs:balloon',
+      isActive: true,
+      items: [
+        {
+          title: '重力波单次',
+          url: '/balloon/single',
+        },
+        {
+          title: '重力波统计',
+          url: '/balloon/year',
+        },
+      ],
+    },
+    {
+      title: 'TIDI',
+      url: '#',
+      icon: 'mdi:telescope',
+      isActive: true,
+      items: [
+        {
+          title: '行星波月统计',
+          url: '/tidi/waves',
+        },
+      ],
+    },
+    {
+      title: 'COSMIC',
+      url: '#',
+      icon: 'mdi:telescope',
+      isActive: true,
+      items: [
+        {
+          title: '行星波月统计',
+          url: '/cosmic/stats',
+        },
+      ],
+    },
+  ],
+
+  关于: [
+    {
+      name: 'Design Engineering',
+      url: '#',
+      icon: 'Frame',
+    },
+
+  ],
+} as const
+</script>
+
 <template>
-  <main font-sans p="x-4 y-10" text="center gray-700 dark:gray-200">
-    <RouterView />
-    <TheFooter />
-  </main>
+  <div>
+    <div v-if="$route.path === '/auth'">
+      <RouterView />
+    </div>
+    <div v-else>
+      <SidebarProvider>
+        <Sidebar collapsible="icon">
+          <SidebarHeader>
+            <Alert>
+              <AlertTitle>服务状态正常</AlertTitle>
+            </Alert>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>模型</SidebarGroupLabel>
+              <SidebarMenu>
+                <Collapsible
+                  v-for="item in data.navMain"
+                  :key="item.title"
+                  as-child
+                  :default-open="item.isActive"
+                  class="group/collapsible"
+                >
+                  <SidebarMenuItem>
+                    <CollapsibleTrigger as-child>
+                      <SidebarMenuButton :tooltip="item.title">
+                        <Icon :icon="item.icon" />
+                        <span>{{ item.title }}</span>
+                        <ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                      </SidebarMenuButton>
+                    </CollapsibleTrigger>
+
+                    <CollapsibleContent>
+                      <SidebarMenuSub>
+                        <SidebarMenuSubItem
+                          v-for="subItem in item.items"
+                          :key="subItem.title"
+                          class="hover:bg-gray-100"
+                        >
+                          <SidebarMenuSubButton as-child>
+                            <RouterLink
+                              :to="subItem.url"
+                              active-class="bg-accent-foreground text-accent"
+                            >
+                              <span>&nbsp;</span>
+                              <span>{{ subItem.title }}</span>
+                            </RouterLink>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  </SidebarMenuItem>
+                </Collapsible>
+              </SidebarMenu>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter>
+            <SidebarMenu>
+              <SidebarMenuItem flex="~ row items-center gap-2">
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <SidebarMenuButton
+                      size="lg"
+                      class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                    >
+                      <div class="grid flex-1 text-left text-sm leading-tight">
+                        <span class="truncate font-semibold">操作员</span>
+                        <span class="truncate text-xs">已授权</span>
+                      </div>
+                      <ChevronsUpDown class="ml-auto size-4" />
+                    </SidebarMenuButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    class="min-w-56 w-[--radix-dropdown-menu-trigger-width] rounded-lg" side="bottom" align="end"
+                    :side-offset="4"
+                  >
+                    <div @click="logout">
+                      <DropdownMenuItem>
+                        <Icon icon="heroicons-solid:logout" class="h-4 w-4" />
+                        退出系统
+                      </DropdownMenuItem>
+                    </div>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                <Button variant="outline" size="icon" class="ml-auto h-8 w-8">
+                  <Icon icon="icon-park-outline:setting" class="h-4 w-4" />
+                  <span class="sr-only">设置</span>
+                </Button>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarFooter>
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset>
+          <header class="group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 h-16 flex shrink-0 items-center justify-between gap-2 transition-[width,height] ease-linear">
+            <div class="flex items-center gap-2 px-4">
+              <Icon icon="heroicons-solid:home" class="h-4 w-4" />
+              <Separator orientation="vertical" class="mr-2 h-4" />
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink href="/">
+                      中高层大气波动解析识别技术系统
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator class="hidden md:block" />
+
+                  <BreadcrumbItem class="hidden md:block">
+                    <BreadcrumbLink href="#">
+                      {{ $route.meta.group }}
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator class="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>{{ $route.meta.item_name }}</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+            <div px-7>
+              <Alert variant="default">
+                <Icon icon="el:ok-circle" class="h-4 w-4 text-green!" />
+                <AlertTitle>服务状态正常</AlertTitle>
+              </Alert>
+            </div>
+          </header>
+          <RouterView class="h-full overflow-hidden" />
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  </div>
 </template>
--- a/src/CONSTANT.ts
+++ b/src/CONSTANT.ts
@ -0,0 +1,3 @@
+// export const API_BASE_URL = 'http://localhost:5000'
+// export const API_BASE_URL = 'http://localhost:18200'
+export const API_BASE_URL = 'https://gca-api.dustella.net:8443'
--- a/src/assets/index.css
+++ b/src/assets/index.css
@ -0,0 +1,100 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/src/assets/map.avif
+++ b/src/assets/map.avif
--- a/src/components/AuthBlock.vue
+++ b/src/components/AuthBlock.vue
@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { Label } from '~/components/ui/label'
+import { authCode } from '~/composables'
+import { API_BASE_URL } from '~/CONSTANT'
+import manba from '../../public/pack.png'
+
+const code = ref('')
+const router = useRouter()
+const remember = ref(false)
+
+function auth() {
+  authCode.value = code.value
+  const resp = baseFetch(`${API_BASE_URL}/ping`, {
+  })
+  if (!resp.error.value) {
+    if (remember.value) {
+      localStorage.setItem('authCode', code.value)
+    }
+    else {
+      sessionStorage.setItem('authCode', code.value)
+    }
+    router.push('/')
+    return
+  }
+  // eslint-disable-next-line no-alert
+  alert('认证失败')
+}
+</script>
+
+<template>
+  <div class="w-full lg:grid lg:grid-cols-2 lg:min-h-[600px] xl:min-h-[800px]">
+    <div class="hidden p-30 lg:block">
+      <img
+        :src="manba"
+        alt="Image"
+        class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+      >
+    </div>
+    <div class="flex items-center justify-center bg-muted py-12">
+      <div class="grid mx-auto w-[350px] gap-6">
+        <div class="grid gap-2 text-center">
+          <h1 class="text-3xl font-bold">
+            系统认证
+          </h1>
+          <p class="text-balance text-muted-foreground">
+            本系统仅供内部使用
+          </p>
+        </div>
+        <div class="grid gap-4">
+          <div class="grid gap-2">
+            <div class="flex items-center">
+              <Label for="password">口令</Label>
+            </div>
+            <Input id="password" v-model="code" type="password" required />
+          </div>
+          <div flex="~ items-center gap-2">
+            <Checkbox id="remember" v-model="remember" />
+            <Label for="remember" class="flex items-center">
+              记住我
+            </Label>
+          </div>
+          <Button type="submit" class="w-full" @click.prevent="auth">
+            认证
+          </Button>
+        </div>
+        <div class="mt-4 text-center text-sm">
+          丢失密码？请前往后端重置
+          <!-- <a href="#" class="underline">
+            Sign up
+          </a> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/src/components/CoolBack.vue
+++ b/src/components/CoolBack.vue
@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { P5I } from 'p5i'
+import { p5i } from 'p5i'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const el = ref<HTMLCanvasElement | null>(null)
+
+const {
+  mount,
+  unmount,
+  createCanvas,
+  background,
+  noFill,
+  stroke,
+  noise,
+  noiseSeed,
+  resizeCanvas,
+  cos,
+  sin,
+  TWO_PI,
+} = p5i()
+
+let w = window.innerWidth
+let h = window.innerHeight
+const offsetY = window.scrollY
+
+const SCALE = 200
+const LENGTH = 10
+const SPACING = 15
+
+function getForceOnPoint(x: number, y: number, z: number) {
+  // https://p5js.org/reference/#/p5/noise
+  return (noise(x / SCALE, y / SCALE, z) - 0.5) * 2 * TWO_PI
+}
+
+const existingPoints = new Set<string>()
+const points: { x: number, y: number, opacity: number }[] = []
+
+function addPoints() {
+  for (let x = -SPACING / 2; x < w + SPACING; x += SPACING) {
+    for (let y = -SPACING / 2; y < h + offsetY + SPACING; y += SPACING) {
+      const id = `${x}-${y}`
+      if (existingPoints.has(id))
+        continue
+      existingPoints.add(id)
+      points.push({ x, y, opacity: Math.random() * 0.5 + 0.5 })
+    }
+  }
+}
+
+function setup() {
+  createCanvas(w, h)
+  background('#ffffff')
+  stroke('#ccc')
+  noFill()
+
+  noiseSeed(+new Date())
+
+  addPoints()
+}
+
+function draw({ circle }: P5I) {
+  background('#ffffff')
+  const t = +new Date() / 10000
+
+  for (const p of points) {
+    const { x, y } = p
+    const rad = getForceOnPoint(x, y, t)
+    const length = (noise(x / SCALE, y / SCALE, t * 2) + 0.5) * LENGTH
+    const nx = x + cos(rad) * length
+    const ny = y + sin(rad) * length
+    stroke(180, 180, 180, (Math.abs(cos(rad)) * 0.5 + 0.5) * p.opacity * 255)
+    circle(nx, ny - offsetY, 1)
+  }
+}
+
+function restart() {
+  if (el.value)
+    mount(el.value, { setup, draw })
+}
+
+onMounted(() => {
+  restart()
+
+  useEventListener('resize', () => {
+    w = window.innerWidth
+    h = window.innerHeight
+    resizeCanvas(w, h)
+    addPoints()
+  })
+
+  // Uncomment to enable scroll-based animation
+  // Tho there is some lag when scrolling, not sure if it's solvable
+  // useEventListener('scroll', () => {
+  //   offsetY = window.scrollY
+  //   addPoints()
+  // }, { passive: true })
+})
+
+onUnmounted(() => {
+  unmount()
+})
+</script>
+
+<template>
+  <!-- <Paper> -->
+  <div relative h-100 class="overflow-hidden">
+    <div ref="el" pointer-events-none overflow-hidden />
+  </div>
+  <!-- </Paper> -->
+</template>
--- a/src/components/DenseFramework.vue
+++ b/src/components/DenseFramework.vue
@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { ImageResult } from './ImageContainer.vue'
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '~/components/ui/resizable'
+
+defineProps<{
+  imageResult: ImageResult
+}>()
+
+defineEmits(['submit'])
+</script>
+
+<template>
+  <div flex="~ row h-full items-begin justify-stretch gap-3 p-8 w-full">
+    <ResizablePanelGroup
+      id="demo-group-1"
+      direction="horizontal"
+      class="w-full border rounded-lg"
+    >
+      <ResizablePanel id="demo-panel-1" :default-size="200" py-5>
+        <ParamsCard
+          @submit="$emit('submit')"
+        >
+          <slot />
+        </ParamsCard>
+      </ResizablePanel>
+      <ResizableHandle id="demo-handle-1" />
+      <ResizablePanel id="demo-panel-2" :default-size="500">
+        <ImageContainer :image-result="imageResult" />
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+</template>
--- a/src/components/Image.vue
+++ b/src/components/Image.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+  imageUrl: string
+}>()
+</script>
+
+<template>
+  <div>
+    <img id="image_" :src="imageUrl">
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/ImageContainer.vue
+++ b/src/components/ImageContainer.vue
@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue/dist/iconify.js'
+
+export interface ImageResult {
+  result: 'success' | 'error' | 'pending' | 'idle'
+  imageUrl: string
+  message?: string
+}
+
+const props = defineProps<{
+  imageResult: ImageResult
+}>()
+
+function download() {
+  if (props.imageResult.result === 'success') {
+    const a = document.createElement('a')
+    a.href = props.imageResult.imageUrl
+    a.download = 'image.png'
+    a.click()
+  }
+}
+</script>
+
+<template>
+  <div class="relative h-full min-h-[50vh] w-full flex flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
+    <Badge variant="outline" class="absolute left-3 top-3">
+      图片输出
+    </Badge>
+    <div v-if="imageResult.result === 'pending'" class="flex flex-1 items-center justify-center text-xl">
+      <Icon icon="akar-icons:loading" class="mr-2 animate-spin" />
+      <span>正在加载图片</span>
+    </div>
+    <Image v-else-if="imageResult.result === 'success'" class="flex flex-1 items-center justify-center text-xl" :image-url="imageResult.imageUrl" />
+    <div v-else class="flex flex-1 items-center justify-center text-xl">
+      {{ imageResult.message }}
+    </div>
+
+    <Button type="submit" size="sm" class="ml-auto gap-1.5" @click.prevent="download">
+      下载图片
+      <CornerDownLeft class="size-3.5" />
+    </Button>
+  </div>
+</template>
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div h-full w-full flex="~ col items-center justify-center">
+    <Skeleton class="h-50 w-3/5" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/NavigationMenuListItem.vue
+++ b/src/components/NavigationMenuListItem.vue
@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { NavigationMenuLink } from 'radix-vue'
+
+const props = defineProps({
+  title: String,
+})
+</script>
+
+<template>
+  <li>
+    <NavigationMenuLink as-child>
+      <a
+        v-bind="$attrs"
+        class="hover:bg-mauve3 block select-none rounded-[6px] p-3 text-[15px] leading-none no-underline outline-none transition-colors focus:shadow-[0_0_0_2px] focus:shadow-green7"
+      >
+        <div class="text-green12 mb-[5px] font-medium leading-[1.2]">
+          {{ props.title }}
+        </div>
+        <p class="text-mauve11 my-0 leading-[1.4]">
+          <slot />
+        </p>
+      </a>
+    </NavigationMenuLink>
+  </li>
+</template>
--- a/src/components/Paper.vue
+++ b/src/components/Paper.vue
@ -0,0 +1,79 @@
+<script setup lang='ts'>
+import { useEventListener, useFullscreen } from '@vueuse/core'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const fullscreen = useFullscreen(ref(document.querySelector('html')))
+
+// const isDark = useDark()
+
+useEventListener('keydown', (e) => {
+  if (document.activeElement === document.body) {
+    if (e.key === 'f') {
+      if (fullscreen.isFullscreen.value)
+        fullscreen.exit()
+      else
+        fullscreen.enter()
+    }
+  }
+})
+
+let no = route.path.slice(1)
+if (no.startsWith('x'))
+  no = no.slice(1)
+
+const shot = Boolean(route.query.shot)
+const hideFrame = Boolean(route.query.hideFrame !== undefined || route.query.full !== undefined)
+</script>
+
+<template>
+  <div class="paper" :class="{ shot }">
+    <div v-if="!shot && !hideFrame" class="nav font-mono">
+      <router-link to="/" class="link block pt-1 text-xl">
+        <carbon-chevron-left />
+      </router-link>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 12px;
+}
+
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px 12px;
+}
+
+.shot .nav {
+  padding: 24px;
+}
+
+.shot .bottom-nav {
+  padding: 20px 24px;
+}
+
+.nav-links .next,
+.nav-links .prev {
+  opacity: 0;
+  transition: 0.3s all ease-in-out;
+  margin-top: -1.5em;
+  display: block;
+}
+
+.nav-links:hover .next,
+.nav-links:hover .prev {
+  opacity: 1;
+  margin-top: 0;
+}
+</style>
--- a/src/components/ParamsCard.vue
+++ b/src/components/ParamsCard.vue
@ -0,0 +1,32 @@
+<script lang="ts" setup>
+defineEmits(['submit'])
+</script>
+
+<template>
+  <Drawer>
+    <DrawerTrigger as-child class="min-w-[20rem]">
+      <Button variant="ghost" size="icon" class="md:hidden">
+        <Settings class="size-4" />
+        <span class="sr-only">参数设置</span>
+      </Button>
+    </DrawerTrigger>
+    <DrawerContent class="max-h-[80vh]">
+      <DrawerHeader>
+        <DrawerTitle />
+      </DrawerHeader>
+      <form class="grid min-w-[20rem] w-full items-start gap-6 overflow-auto p-4 pt-0">
+        <fieldset class="grid gap-6 border rounded-lg p-4">
+          <legend class="px-1 text-sm font-medium -ml-1">
+            参数设置
+          </legend>
+          <div class="grid gap-3">
+            <slot />
+            <Button type="submit" class="mt-5 w-full" @click.prevent="$emit('submit')">
+              绘制
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </DrawerContent>
+  </Drawer>
+</template>
--- a/src/components/README.md
+++ b/src/components/README.md
@ -1,9 +0,0 @@
-## Components
-
-Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
-
-### Icons
-
-You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
-
-It will only bundle the icons you use. Check out [`unplugin-icons`](https://github.com/antfu/unplugin-icons) for more details.
--- a/src/components/TestHeader.vue
+++ b/src/components/TestHeader.vue
@ -0,0 +1,150 @@
+<script setup lang="ts">
+import {
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from 'radix-vue'
+import { ref } from 'vue'
+import NavigationMenuListItem from './NavigationMenuListItem.vue'
+
+const currentTrigger = ref('')
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-model="currentTrigger"
+    class="relative z-[1] mx-auto flex justify-center"
+  >
+    <NavigationMenuList class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
+      <NavigationMenuItem>
+        <NavigationMenuTrigger
+          class="group text-grass11 flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-green7"
+        >
+          Learn
+          <Icon
+            icon="radix-icons:caret-down"
+            class="text-green10 relative top-[1px] transition-transform duration-[250ms] ease-in group-data-[state=open]:-rotate-180"
+          />
+        </NavigationMenuTrigger>
+        <NavigationMenuContent
+          class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute left-0 top-0 w-full sm:w-auto"
+        >
+          <ul class="one grid m-0 list-none gap-x-[10px] p-[22px] sm:grid-cols-[0.75fr_1fr] sm:w-[500px]">
+            <li class="grid row-span-3">
+              <NavigationMenuLink as-child>
+                <a
+                  class="h-full w-full flex flex-col select-none justify-end rounded-[6px] from-green9 to-teal9 bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px] focus:shadow-green7"
+                  href="/"
+                >
+                  <img
+                    class="w-16"
+                    src="https://www.radix-vue.com/logo.svg"
+                  >
+                  <div class="mb-[7px] mt-4 text-[18px] text-white font-medium leading-[1.2]">Radix Primitives</div>
+                  <p class="text-mauve4 text-[14px] leading-[1.3]">Unstyled, accessible components for Vue.</p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+
+            <NavigationMenuListItem
+              href="https://stitches.dev/"
+              title="Stitches"
+            >
+              CSS-in-JS with best-in-class developer experience.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem
+              href="/colors"
+              title="Colors"
+            >
+              Beautiful, thought-out palettes with auto dark mode.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem
+              href="https://icons.radix-ui.com/"
+              title="Icons"
+            >
+              A crisp set of 15x15 icons, balanced and consistent.
+            </NavigationMenuListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem>
+        <NavigationMenuTrigger
+          class="text-grass11 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-green7"
+        >
+          Overview
+          <Icon
+            icon="radix-icons:caret-down"
+            class="text-green10 relative top-[1px] transition-transform duration-[250ms] ease-in group-data-[state=open]:-rotate-180"
+          />
+        </NavigationMenuTrigger>
+        <NavigationMenuContent class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute left-0 top-0 w-full sm:w-auto">
+          <ul class="grid m-0 list-none gap-x-[10px] p-[22px] sm:grid-flow-col sm:grid-rows-3 sm:w-[600px]">
+            <NavigationMenuListItem
+              title="Introduction"
+              href="/docs/primitives/overview/introduction"
+            >
+              Build high-quality, accessible design systems and web apps.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem
+              title="Getting started"
+              href="/docs/primitives/overview/getting-started"
+            >
+              A quick tutorial to get you up and running with Radix Primitives.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem
+              title="Styling"
+              href="/docs/primitives/guides/styling"
+            >
+              Unstyled and compatible with any styling solution.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem
+              title="Animation"
+              href="/docs/primitives/guides/animation"
+            >
+              Use CSS keyframes or any animation library of your choice.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem
+              title="Accessibility"
+              href="/docs/primitives/overview/accessibility"
+            >
+              Tested in a range of browsers and assistive technologies.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem
+              title="Releases"
+              href="/docs/primitives/overview/releases"
+            >
+              Radix Primitives releases and their changelogs.
+            </NavigationMenuListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem>
+        <NavigationMenuLink
+          class="text-grass11 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-green7"
+          href="https://github.com/unovue/radix-vue"
+        >
+          Github
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+
+      <NavigationMenuIndicator
+        class="transition-[all,transform_250ms_ease] data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] h-[10px] flex items-end justify-center overflow-hidden duration-200 data-[state=hidden]:opacity-0"
+      >
+        <div class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
+      </NavigationMenuIndicator>
+    </NavigationMenuList>
+
+    <div class="absolute left-0 top-full w-full flex perspective-[2000px] justify-center">
+      <NavigationMenuViewport
+        class="transition-[width,_height] data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[10px] bg-white duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
+      />
+    </div>
+  </NavigationMenuRoot>
+</template>
--- a/src/components/TheCounter.vue
+++ b/src/components/TheCounter.vue
@ -1,19 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  initial: number
-}>()
-
-const { count, inc, dec } = useCounter(props.initial)
-</script>
-
-<template>
-  <div>
-    {{ count }}
-    <button class="inc" @click="inc()">
-      +
-    </button>
-    <button class="dec" @click="dec()">
-      -
-    </button>
-  </div>
-</template>
--- a/src/components/TheFooter.vue
+++ b/src/components/TheFooter.vue
@ -1,15 +1,3 @@
 <template>
-  <nav mt-6 inline-flex gap-2 text-xl>
-    <button icon-btn @click="toggleDark()">
-      <div i-carbon-sun dark:i-carbon-moon />
-    </button>
-
-    <a
-      i-carbon-logo-github icon-btn
-      rel="noreferrer"
-      href="https://github.com/antfu-collective/vitesse-lite"
-      target="_blank"
-      title="GitHub"
-    />
-  </nav>
+  <div />
 </template>
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from './ui/navigation-menu'
+
+const header_data: Record<string, { title: string, href: string }[]> = {
+  探空气球: [{
+    title: '重力波单次',
+    href: '/balloon/single',
+  }, {
+    title: '重力波统计',
+    href: '/balloon/year',
+  }],
+  流星雷达: [{
+    title: '潮汐波强度',
+    href: '/radar/v1',
+  }, {
+    title: '潮汐波时空变化',
+    href: '/radar/v2',
+  }],
+  Saber: [
+    {
+      title: '波动拟合图',
+      href: '/saber/plot_wave_fitting',
+    },
+    {
+      title: '日数据傅里叶变换分析',
+      href: '/saber/day_fft_ifft_plot',
+    },
+    {
+      title: '日周期波动能量分析',
+      href: '/saber/day_cycle_power_wave_plot',
+    },
+    {
+      // month_power_wave_plot
+      title: ' 月度波动能量分析',
+      href: '/saber/month_power_wave_plot',
+    },
+  ],
+}
+</script>
+
+<template>
+  <NavigationMenu class="mx-auto">
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuLink href="/" :class="navigationMenuTriggerStyle()">
+          主页
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+      <NavigationMenuItem v-for="(thisHeader, headers) in header_data" :key="headers">
+        <NavigationMenuTrigger>{{ headers }}</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul class="w-60 flex flex-col gap-3 p-6">
+            <li v-for="header in thisHeader" :key="header.href" class="row-span-3">
+              <NavigationMenuLink as-child>
+                <a
+                  class="block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors space-y-1 focus:bg-accent hover:bg-accent focus:text-accent-foreground hover:text-accent-foreground"
+                  :href="header.href"
+                >
+                  <div class="text-sm font-medium leading-none">
+                    {{ header.title }}
+                  </div>
+                </a>
+              </NavigationMenuLink>
+            </li>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+</template>
--- a/src/components/TheInput.vue
+++ b/src/components/TheInput.vue
@ -1,18 +0,0 @@
-<script setup lang="ts">
-const modelValue = defineModel()
-</script>
-
-<template>
-  <input
-    id="input"
-    v-model="modelValue"
-    type="text"
-    v-bind="$attrs"
-    p="x-4 y-2"
-    w="250px"
-    text="center"
-    bg="transparent"
-    border="~ rounded gray-200 dark:gray-700"
-    outline="none active:none"
-  >
-</template>
--- a/src/components/TopHeader.vue
+++ b/src/components/TopHeader.vue
@ -0,0 +1,123 @@
+<script setup lang="ts">
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from '~/components/ui/menubar'
+</script>
+
+<template>
+  <Menubar>
+    <MenubarMenu>
+      <MenubarTrigger>File</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem>
+          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem>
+          New Window <MenubarShortcut>⌘N</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem disabled>
+          New Incognito Window
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarSub>
+          <MenubarSubTrigger>Share</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItem>Email link</MenubarItem>
+            <MenubarItem>Messages</MenubarItem>
+            <MenubarItem>Notes</MenubarItem>
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarSeparator />
+        <MenubarItem>
+          Print... <MenubarShortcut>⌘P</MenubarShortcut>
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>Edit</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem>
+          Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem>
+          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarSub>
+          <MenubarSubTrigger>Find</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItem>Search the web</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>Find...</MenubarItem>
+            <MenubarItem>Find Next</MenubarItem>
+            <MenubarItem>Find Previous</MenubarItem>
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarSeparator />
+        <MenubarItem>Cut</MenubarItem>
+        <MenubarItem>Copy</MenubarItem>
+        <MenubarItem>Paste</MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>View</MenubarTrigger>
+      <MenubarContent>
+        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+        <MenubarCheckboxItem checked>
+          Always Show Full URLs
+        </MenubarCheckboxItem>
+        <MenubarSeparator />
+        <MenubarItem inset>
+          Reload <MenubarShortcut>⌘R</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem disabled inset>
+          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem inset>
+          Toggle Fullscreen
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem inset>
+          Hide Sidebar
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>Profiles</MenubarTrigger>
+      <MenubarContent>
+        <MenubarRadioGroup value="benoit">
+          <MenubarRadioItem value="andy">
+            Andy
+          </MenubarRadioItem>
+          <MenubarRadioItem value="benoit">
+            Benoit
+          </MenubarRadioItem>
+          <MenubarRadioItem value="Luis">
+            Luis
+          </MenubarRadioItem>
+        </MenubarRadioGroup>
+        <MenubarSeparator />
+        <MenubarItem inset>
+          Edit...
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem inset>
+          Add Profile...
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+  </Menubar>
+</template>
--- a/src/components/ui/accordion/Accordion.vue
+++ b/src/components/ui/accordion/Accordion.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  AccordionRoot,
+  type AccordionRootEmits,
+  type AccordionRootProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>
--- a/src/components/ui/accordion/AccordionContent.vue
+++ b/src/components/ui/accordion/AccordionContent.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm transition-all data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>
--- a/src/components/ui/accordion/AccordionItem.vue
+++ b/src/components/ui/accordion/AccordionItem.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>
--- a/src/components/ui/accordion/AccordionTrigger.vue
+++ b/src/components/ui/accordion/AccordionTrigger.vue
@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ChevronDown } from 'lucide-vue-next'
+import {
+  AccordionHeader,
+  AccordionTrigger,
+  type AccordionTriggerProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="h-4 w-4 shrink-0 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
--- a/src/components/ui/accordion/index.ts
+++ b/src/components/ui/accordion/index.ts
@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
--- a/src/components/ui/alert/Alert.vue
+++ b/src/components/ui/alert/Alert.vue
@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+import { type AlertVariants, alertVariants } from '.'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/alert/AlertDescription.vue
+++ b/src/components/ui/alert/AlertDescription.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/alert/AlertTitle.vue
+++ b/src/components/ui/alert/AlertTitle.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
--- a/src/components/ui/alert/index.ts
+++ b/src/components/ui/alert/index.ts
@ -0,0 +1,23 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
--- a/src/components/ui/auto-form/AutoForm.vue
+++ b/src/components/ui/auto-form/AutoForm.vue
@ -0,0 +1,105 @@
+<script setup lang="ts" generic="T extends ZodObjectOrWrapped">
+import type { FormContext, GenericObject } from 'vee-validate'
+import type { z, ZodAny } from 'zod'
+import type { Config, ConfigItem, Dependency, Shape } from './interface'
+import { toTypedSchema } from '@vee-validate/zod'
+import { computed, toRefs } from 'vue'
+import { Form } from '~/components/ui/form'
+import AutoFormField from './AutoFormField.vue'
+import { provideDependencies } from './dependencies'
+import { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema, type ZodObjectOrWrapped } from './utils'
+
+const props = defineProps<{
+  schema: T
+  form?: FormContext<GenericObject>
+  fieldConfig?: Config<z.infer<T>>
+  dependencies?: Dependency<z.infer<T>>[]
+}>()
+
+const emits = defineEmits<{
+  submit: [event: z.infer<T>]
+}>()
+
+const { dependencies } = toRefs(props)
+provideDependencies(dependencies)
+
+const shapes = computed(() => {
+  // @ts-expect-error ignore {} not assignable to object
+  const val: { [key in keyof T]: Shape } = {}
+  const baseSchema = getObjectFormSchema(props.schema)
+  const shape = baseSchema.shape
+  Object.keys(shape).forEach((name) => {
+    const item = shape[name] as ZodAny
+    const baseItem = getBaseSchema(item) as ZodAny
+    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined
+    if (!Array.isArray(options) && typeof options === 'object')
+      options = Object.values(options)
+
+    val[name as keyof T] = {
+      type: getBaseType(item),
+      default: getDefaultValueInZodStack(item),
+      options,
+      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
+      schema: baseItem,
+    }
+  })
+  return val
+})
+
+const fields = computed(() => {
+  // @ts-expect-error ignore {} not assignable to object
+  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}
+  for (const key in shapes.value) {
+    const shape = shapes.value[key]
+    val[key as keyof z.infer<T>] = {
+      shape,
+      config: props.fieldConfig?.[key] as ConfigItem,
+      fieldName: key,
+    }
+  }
+  return val
+})
+
+const formComponent = computed(() => props.form ? 'form' : Form)
+const formComponentProps = computed(() => {
+  if (props.form) {
+    return {
+      onSubmit: props.form.handleSubmit(val => emits('submit', val)),
+    }
+  }
+  else {
+    const formSchema = toTypedSchema(props.schema)
+    return {
+      keepValues: true,
+      validationSchema: formSchema,
+      onSubmit: (val: GenericObject) => emits('submit', val),
+    }
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="formComponent"
+    v-bind="formComponentProps"
+  >
+    <slot name="customAutoForm" :fields="fields">
+      <template v-for="(shape, key) of shapes" :key="key">
+        <slot
+          :shape="shape"
+          :name="key.toString() as keyof z.infer<T>"
+          :field-name="key.toString()"
+          :config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
+        >
+          <AutoFormField
+            :config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
+            :field-name="key.toString()"
+            :shape="shape"
+          />
+        </slot>
+      </template>
+    </slot>
+
+    <slot :shapes="shapes" />
+  </component>
+</template>
--- a/src/components/ui/auto-form/AutoFormField.vue
+++ b/src/components/ui/auto-form/AutoFormField.vue
@ -0,0 +1,45 @@
+<script setup lang="ts" generic="U extends ZodAny">
+import type { ZodAny } from 'zod'
+import type { Config, ConfigItem, Shape } from './interface'
+import { computed } from 'vue'
+import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'
+import useDependencies from './dependencies'
+
+const props = defineProps<{
+  fieldName: string
+  shape: Shape
+  config?: ConfigItem | Config<U>
+}>()
+
+function isValidConfig(config: any): config is ConfigItem {
+  return !!config?.component
+}
+
+const delegatedProps = computed(() => {
+  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))
+    return { schema: props.shape?.schema }
+  return undefined
+})
+
+const { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)
+</script>
+
+<template>
+  <component
+    :is="isValidConfig(config)
+      ? typeof config.component === 'string'
+        ? INPUT_COMPONENTS[config.component!]
+        : config.component
+      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] "
+    v-if="!isHidden"
+    :field-name="fieldName"
+    :label="shape.schema?.description"
+    :required="isRequired || shape.required"
+    :options="overrideOptions || shape.options"
+    :disabled="isDisabled"
+    :config="config"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </component>
+</template>
--- a/src/components/ui/auto-form/AutoFormFieldArray.vue
+++ b/src/components/ui/auto-form/AutoFormFieldArray.vue
@ -0,0 +1,110 @@
+<script setup lang="ts" generic="T extends z.ZodAny">
+import type { Config, ConfigItem } from './interface'
+import { PlusIcon, TrashIcon } from 'lucide-vue-next'
+import { FieldArray, FieldContextKey, useField } from 'vee-validate'
+import { computed, provide } from 'vue'
+import * as z from 'zod'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/ui/accordion'
+import { Button } from '~/components/ui/button'
+import { FormItem, FormMessage } from '~/components/ui/form'
+import { Separator } from '~/components/ui/separator'
+import AutoFormField from './AutoFormField.vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName, getBaseType } from './utils'
+
+const props = defineProps<{
+  fieldName: string
+  required?: boolean
+  config?: Config<T>
+  schema?: z.ZodArray<T>
+  disabled?: boolean
+}>()
+
+function isZodArray(
+  item: z.ZodArray<any> | z.ZodDefault<any>,
+): item is z.ZodArray<any> {
+  return item instanceof z.ZodArray
+}
+
+function isZodDefault(
+  item: z.ZodArray<any> | z.ZodDefault<any>,
+): item is z.ZodDefault<any> {
+  return item instanceof z.ZodDefault
+}
+
+const itemShape = computed(() => {
+  if (!props.schema)
+    return
+
+  const schema: z.ZodAny = isZodArray(props.schema)
+    ? props.schema._def.type
+    : isZodDefault(props.schema)
+    // @ts-expect-error missing schema
+      ? props.schema._def.innerType._def.type
+      : null
+
+  return {
+    type: getBaseType(schema),
+    schema,
+  }
+})
+
+const fieldContext = useField(props.fieldName)
+// @ts-expect-error ignore missing `id`
+provide(FieldContextKey, fieldContext)
+</script>
+
+<template>
+  <FieldArray v-slot="{ fields, remove, push }" as="section" :name="fieldName">
+    <slot v-bind="props">
+      <Accordion type="multiple" class="w-full" :disabled="disabled" as-child collapsible>
+        <FormItem>
+          <AccordionItem :value="fieldName" class="border-none">
+            <AccordionTrigger>
+              <AutoFormLabel class="text-base" :required="required">
+                {{ schema?.description || beautifyObjectName(fieldName) }}
+              </AutoFormLabel>
+            </AccordionTrigger>
+
+            <AccordionContent>
+              <template v-for="(field, index) of fields" :key="field.key">
+                <div class="mb-4 p-1">
+                  <AutoFormField
+                    :field-name="`${fieldName}[${index}]`"
+                    :label="fieldName"
+                    :shape="itemShape!"
+                    :config="config as ConfigItem"
+                  />
+
+                  <div class="flex justify-end !my-4">
+                    <Button
+                      type="button"
+                      size="icon"
+                      variant="secondary"
+                      @click="remove(index)"
+                    >
+                      <TrashIcon :size="16" />
+                    </Button>
+                  </div>
+                  <Separator v-if="!field.isLast" />
+                </div>
+              </template>
+
+              <Button
+                type="button"
+                variant="secondary"
+                class="mt-4 flex items-center"
+                @click="push(null)"
+              >
+                <PlusIcon class="mr-2" :size="16" />
+                Add
+              </Button>
+            </AccordionContent>
+
+            <FormMessage />
+          </AccordionItem>
+        </FormItem>
+      </Accordion>
+    </slot>
+  </FieldArray>
+</template>
--- a/src/components/ui/auto-form/AutoFormFieldBoolean.vue
+++ b/src/components/ui/auto-form/AutoFormFieldBoolean.vue
@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { FieldProps } from './interface'
+import { computed } from 'vue'
+import { Checkbox } from '~/components/ui/checkbox'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Switch } from '~/components/ui/switch'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
+
+const props = defineProps<FieldProps>()
+
+const booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)
+</script>
+
+<template>
+  <FormField v-slot="slotProps" :name="fieldName">
+    <FormItem>
+      <div class="mb-3 flex items-center gap-3 space-y-0">
+        <FormControl>
+          <slot v-bind="slotProps">
+            <component
+              :is="booleanComponent"
+              v-bind="{ ...slotProps.componentField }"
+              :disabled="disabled"
+              :checked="slotProps.componentField.modelValue"
+              @update:checked="slotProps.componentField['onUpdate:modelValue']"
+            />
+          </slot>
+        </FormControl>
+        <AutoFormLabel v-if="!config?.hideLabel" :required="required">
+          {{ config?.label || beautifyObjectName(label ?? fieldName) }}
+        </AutoFormLabel>
+      </div>
+
+      <FormDescription v-if="config?.description">
+        {{ config.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>
--- a/src/components/ui/auto-form/AutoFormFieldDate.vue
+++ b/src/components/ui/auto-form/AutoFormFieldDate.vue
@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { FieldProps } from './interface'
+import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { CalendarIcon } from 'lucide-vue-next'
+import { Button } from '~/components/ui/button'
+import { Calendar } from '~/components/ui/calendar'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover'
+import { cn } from '~/lib/utils'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
+
+defineProps<FieldProps>()
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long',
+})
+</script>
+
+<template>
+  <FormField v-slot="slotProps" :name="fieldName">
+    <FormItem>
+      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
+        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
+      </AutoFormLabel>
+      <FormControl>
+        <slot v-bind="slotProps">
+          <div>
+            <Popover>
+              <PopoverTrigger as-child :disabled="disabled">
+                <Button
+                  variant="outline"
+                  :class="cn(
+                    'w-full justify-start text-left font-normal',
+                    !slotProps.componentField.modelValue && 'text-muted-foreground',
+                  )"
+                >
+                  <CalendarIcon class="mr-2 h-4 w-4" :size="16" />
+                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent class="w-auto p-0">
+                <Calendar initial-focus v-bind="slotProps.componentField" />
+              </PopoverContent>
+            </Popover>
+          </div>
+        </slot>
+      </FormControl>
+
+      <FormDescription v-if="config?.description">
+        {{ config.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>
--- a/src/components/ui/auto-form/AutoFormFieldEnum.vue
+++ b/src/components/ui/auto-form/AutoFormFieldEnum.vue
@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { FieldProps } from './interface'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Label } from '~/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/ui/radio-group'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
+
+defineProps<FieldProps & {
+  options?: string[]
+}>()
+</script>
+
+<template>
+  <FormField v-slot="slotProps" :name="fieldName">
+    <FormItem>
+      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
+        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
+      </AutoFormLabel>
+      <FormControl>
+        <slot v-bind="slotProps">
+          <RadioGroup v-if="config?.component === 'radio'" :disabled="disabled" orientation="vertical" v-bind="{ ...slotProps.componentField }">
+            <div v-for="(option, index) in options" :key="option" class="mb-2 flex items-center gap-3 space-y-0">
+              <RadioGroupItem :id="`${option}-${index}`" :value="option" />
+              <Label :for="`${option}-${index}`">{{ beautifyObjectName(option) }}</Label>
+            </div>
+          </RadioGroup>
+
+          <Select v-else :disabled="disabled" v-bind="{ ...slotProps.componentField }">
+            <SelectTrigger class="w-full">
+              <SelectValue :placeholder="config?.inputProps?.placeholder" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="option in options" :key="option" :value="option">
+                {{ beautifyObjectName(option) }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </slot>
+      </FormControl>
+
+      <FormDescription v-if="config?.description">
+        {{ config.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>
--- a/src/components/ui/auto-form/AutoFormFieldFile.vue
+++ b/src/components/ui/auto-form/AutoFormFieldFile.vue
@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { FieldProps } from './interface'
+import { TrashIcon } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { Button } from '~/components/ui/button'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Input } from '~/components/ui/input'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
+
+defineProps<FieldProps>()
+
+const inputFile = ref<File>()
+async function parseFileAsString(file: File | undefined): Promise<string> {
+  return new Promise((resolve, reject) => {
+    if (file) {
+      const reader = new FileReader()
+      reader.onloadend = () => {
+        resolve(reader.result as string)
+      }
+      reader.onerror = (err) => {
+        reject(err)
+      }
+      reader.readAsDataURL(file)
+    }
+  })
+}
+</script>
+
+<template>
+  <FormField v-slot="slotProps" :name="fieldName">
+    <FormItem v-bind="$attrs">
+      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
+        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
+      </AutoFormLabel>
+      <FormControl>
+        <slot v-bind="slotProps">
+          <Input
+            v-if="!inputFile"
+            type="file"
+            v-bind="{ ...config?.inputProps }"
+            :disabled="disabled"
+            @change="async (ev: InputEvent) => {
+              const file = (ev.target as HTMLInputElement).files?.[0]
+              inputFile = file
+              const parsed = await parseFileAsString(file)
+              slotProps.componentField.onInput(parsed)
+            }"
+          />
+          <div v-else class="h-10 w-full flex items-center justify-between border border-input rounded-md bg-transparent py-1 pl-3 pr-1 text-sm shadow-sm transition-colors">
+            <p>{{ inputFile?.name }}</p>
+            <Button
+              size="icon"
+              variant="ghost"
+              class="h-[26px] w-[26px]"
+              aria-label="Remove file"
+              type="button"
+              @click="() => {
+                inputFile = undefined
+                slotProps.componentField.onInput(undefined)
+              }"
+            >
+              <TrashIcon :size="16" />
+            </Button>
+          </div>
+        </slot>
+      </FormControl>
+      <FormDescription v-if="config?.description">
+        {{ config.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>
--- a/src/components/ui/auto-form/AutoFormFieldInput.vue
+++ b/src/components/ui/auto-form/AutoFormFieldInput.vue
@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { FieldProps } from './interface'
+import { computed } from 'vue'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Input } from '~/components/ui/input'
+import { Textarea } from '~/components/ui/textarea'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
+
+const props = defineProps<FieldProps>()
+const inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)
+</script>
+
+<template>
+  <FormField v-slot="slotProps" :name="fieldName">
+    <FormItem v-bind="$attrs">
+      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
+        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
+      </AutoFormLabel>
+      <FormControl>
+        <slot v-bind="slotProps">
+          <component
+            :is="inputComponent"
+            type="text"
+            v-bind="{ ...slotProps.componentField, ...config?.inputProps }"
+            :disabled="disabled"
+          />
+        </slot>
+      </FormControl>
+      <FormDescription v-if="config?.description">
+        {{ config.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>
--- a/src/components/ui/auto-form/AutoFormFieldNumber.vue
+++ b/src/components/ui/auto-form/AutoFormFieldNumber.vue
@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { FieldProps } from './interface'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '~/components/ui/form'
+import { Input } from '~/components/ui/input'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<FieldProps>()
+</script>
+
+<template>
+  <FormField v-slot="slotProps" :name="fieldName">
+    <FormItem>
+      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
+        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
+      </AutoFormLabel>
+      <FormControl>
+        <slot v-bind="slotProps">
+          <Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" :disabled="disabled" />
+        </slot>
+      </FormControl>
+      <FormDescription v-if="config?.description">
+        {{ config.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>
--- a/src/components/ui/auto-form/AutoFormFieldObject.vue
+++ b/src/components/ui/auto-form/AutoFormFieldObject.vue
@ -0,0 +1,78 @@
+<script setup lang="ts" generic="T extends ZodRawShape">
+import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
+import type { Config, ConfigItem, Shape } from './interface'
+import { FieldContextKey, useField } from 'vee-validate'
+import { computed, provide } from 'vue'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/ui/accordion'
+import { FormItem } from '~/components/ui/form'
+import AutoFormField from './AutoFormField.vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
+
+const props = defineProps<{
+  fieldName: string
+  required?: boolean
+  config?: Config<T>
+  schema?: ZodObject<T>
+  disabled?: boolean
+}>()
+
+const shapes = computed(() => {
+  // @ts-expect-error ignore {} not assignable to object
+  const val: { [key in keyof T]: Shape } = {}
+
+  if (!props.schema)
+    return
+  const shape = getBaseSchema(props.schema)?.shape
+  if (!shape)
+    return
+  Object.keys(shape).forEach((name) => {
+    const item = shape[name] as ZodAny
+    const baseItem = getBaseSchema(item) as ZodAny
+    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined
+    if (!Array.isArray(options) && typeof options === 'object')
+      options = Object.values(options)
+
+    val[name as keyof T] = {
+      type: getBaseType(item),
+      default: getDefaultValueInZodStack(item),
+      options,
+      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
+      schema: item,
+    }
+  })
+  return val
+})
+
+const fieldContext = useField(props.fieldName)
+// @ts-expect-error ignore missing `id`
+provide(FieldContextKey, fieldContext)
+</script>
+
+<template>
+  <section>
+    <slot v-bind="props">
+      <Accordion type="single" as-child class="w-full" collapsible :disabled="disabled">
+        <FormItem>
+          <AccordionItem :value="fieldName" class="border-none">
+            <AccordionTrigger>
+              <AutoFormLabel class="text-base" :required="required">
+                {{ schema?.description || beautifyObjectName(fieldName) }}
+              </AutoFormLabel>
+            </AccordionTrigger>
+            <AccordionContent class="p-1 space-y-5">
+              <template v-for="(shape, key) in shapes" :key="key">
+                <AutoFormField
+                  :config="config?.[key as keyof typeof config] as ConfigItem"
+                  :field-name="`${fieldName}.${key.toString()}`"
+                  :label="key.toString()"
+                  :shape="shape"
+                />
+              </template>
+            </AccordionContent>
+          </AccordionItem>
+        </FormItem>
+      </Accordion>
+    </slot>
+  </section>
+</template>
--- a/src/components/ui/auto-form/AutoFormLabel.vue
+++ b/src/components/ui/auto-form/AutoFormLabel.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { FormLabel } from '~/components/ui/form'
+
+defineProps<{
+  required?: boolean
+}>()
+</script>
+
+<template>
+  <FormLabel>
+    <slot />
+    <span v-if="required" class="text-destructive"> *</span>
+  </FormLabel>
+</template>
--- a/src/components/ui/auto-form/constant.ts
+++ b/src/components/ui/auto-form/constant.ts
@ -0,0 +1,40 @@
+import type { InputComponents } from './interface'
+import AutoFormFieldArray from './AutoFormFieldArray.vue'
+import AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'
+import AutoFormFieldDate from './AutoFormFieldDate.vue'
+import AutoFormFieldEnum from './AutoFormFieldEnum.vue'
+import AutoFormFieldFile from './AutoFormFieldFile.vue'
+import AutoFormFieldInput from './AutoFormFieldInput.vue'
+import AutoFormFieldNumber from './AutoFormFieldNumber.vue'
+import AutoFormFieldObject from './AutoFormFieldObject.vue'
+
+export const INPUT_COMPONENTS: InputComponents = {
+  date: AutoFormFieldDate,
+  select: AutoFormFieldEnum,
+  radio: AutoFormFieldEnum,
+  checkbox: AutoFormFieldBoolean,
+  switch: AutoFormFieldBoolean,
+  textarea: AutoFormFieldInput,
+  number: AutoFormFieldNumber,
+  string: AutoFormFieldInput,
+  file: AutoFormFieldFile,
+  array: AutoFormFieldArray,
+  object: AutoFormFieldObject,
+}
+
+/**
+ * Define handlers for specific Zod types.
+ * You can expand this object to support more types.
+ */
+export const DEFAULT_ZOD_HANDLERS: {
+  [key: string]: keyof typeof INPUT_COMPONENTS
+} = {
+  ZodString: 'string',
+  ZodBoolean: 'checkbox',
+  ZodDate: 'date',
+  ZodEnum: 'select',
+  ZodNativeEnum: 'select',
+  ZodNumber: 'number',
+  ZodArray: 'array',
+  ZodObject: 'object',
+}
--- a/src/components/ui/auto-form/dependencies.ts
+++ b/src/components/ui/auto-form/dependencies.ts
@ -0,0 +1,92 @@
+import type { Ref } from 'vue'
+import type * as z from 'zod'
+import { createContext } from 'radix-vue'
+import { useFieldValue, useFormValues } from 'vee-validate'
+import { computed, ref, watch } from 'vue'
+import { type Dependency, DependencyType, type EnumValues } from './interface'
+import { getFromPath, getIndexIfArray } from './utils'
+
+export const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')
+
+export default function useDependencies(
+  fieldName: string,
+) {
+  const form = useFormValues()
+  // parsed test[0].age => test.age
+  const currentFieldName = fieldName.replace(/\[\d+\]/g, '')
+  const currentFieldValue = useFieldValue<any>(fieldName)
+
+  if (!form)
+    throw new Error('useDependencies should be used within <AutoForm>')
+
+  const dependencies = injectDependencies()
+  const isDisabled = ref(false)
+  const isHidden = ref(false)
+  const isRequired = ref(false)
+  const overrideOptions = ref<EnumValues | undefined>()
+
+  const currentFieldDependencies = computed(() => dependencies.value?.filter(
+    dependency => dependency.targetField === currentFieldName,
+  ))
+
+  function getSourceValue(dep: Dependency<any>) {
+    const source = dep.sourceField as string
+    const index = getIndexIfArray(fieldName) ?? -1
+    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()
+    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()
+
+    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {
+      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()
+      return getFromPath(form.value, currentInitial.join('.') + sourceLast)
+    }
+
+    return getFromPath(form.value, source)
+  }
+
+  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))
+
+  const resetConditionState = () => {
+    isDisabled.value = false
+    isHidden.value = false
+    isRequired.value = false
+    overrideOptions.value = undefined
+  }
+
+  watch([sourceFieldValues, dependencies], () => {
+    resetConditionState()
+    currentFieldDependencies.value?.forEach((dep) => {
+      const sourceValue = getSourceValue(dep)
+      const conditionMet = dep.when(sourceValue, currentFieldValue.value)
+
+      switch (dep.type) {
+        case DependencyType.DISABLES:
+          if (conditionMet)
+            isDisabled.value = true
+
+          break
+        case DependencyType.REQUIRES:
+          if (conditionMet)
+            isRequired.value = true
+
+          break
+        case DependencyType.HIDES:
+          if (conditionMet)
+            isHidden.value = true
+
+          break
+        case DependencyType.SETS_OPTIONS:
+          if (conditionMet)
+            overrideOptions.value = dep.options
+
+          break
+      }
+    })
+  }, { immediate: true, deep: true })
+
+  return {
+    isDisabled,
+    isHidden,
+    isRequired,
+    overrideOptions,
+  }
+}
--- a/src/components/ui/auto-form/index.ts
+++ b/src/components/ui/auto-form/index.ts
@ -0,0 +1,15 @@
+export { default as AutoForm } from './AutoForm.vue'
+export { default as AutoFormField } from './AutoFormField.vue'
+
+export { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'
+export { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'
+export { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'
+
+export { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'
+export { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'
+export { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'
+export { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'
+export { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'
+export { default as AutoFormLabel } from './AutoFormLabel.vue'
+export type { Config, ConfigItem, FieldProps } from './interface'
+export { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'
--- a/src/components/ui/auto-form/interface.ts
+++ b/src/components/ui/auto-form/interface.ts
@ -0,0 +1,95 @@
+import type { Component, InputHTMLAttributes } from 'vue'
+import type { z, ZodAny } from 'zod'
+import type { INPUT_COMPONENTS } from './constant'
+
+export interface FieldProps {
+  fieldName: string
+  label?: string
+  required?: boolean
+  config?: ConfigItem
+  disabled?: boolean
+}
+
+export interface Shape {
+  type: string
+  default?: any
+  required?: boolean
+  options?: string[]
+  schema?: ZodAny
+}
+
+export interface InputComponents {
+  date: Component
+  select: Component
+  radio: Component
+  checkbox: Component
+  switch: Component
+  textarea: Component
+  number: Component
+  string: Component
+  file: Component
+  array: Component
+  object: Component
+}
+
+export interface ConfigItem {
+  /** Value for the `FormLabel` */
+  label?: string
+  /** Value for the `FormDescription` */
+  description?: string
+  /** Pick which component to be rendered. */
+  component?: keyof typeof INPUT_COMPONENTS | Component
+  /** Hide `FormLabel`. */
+  hideLabel?: boolean
+  inputProps?: InputHTMLAttributes
+}
+
+// Define a type to unwrap an array
+type UnwrapArray<T> = T extends (infer U)[] ? U : never
+
+export type Config<SchemaType extends object> = {
+  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem
+  [Key in keyof SchemaType]?:
+  SchemaType[Key] extends any[]
+    ? UnwrapArray<Config<SchemaType[Key]>>
+    : SchemaType[Key] extends object
+      ? Config<SchemaType[Key]>
+      : ConfigItem;
+}
+
+export enum DependencyType {
+  DISABLES,
+  REQUIRES,
+  HIDES,
+  SETS_OPTIONS,
+}
+
+interface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {
+  sourceField: keyof SchemaType
+  type: DependencyType
+  targetField: keyof SchemaType
+  when: (sourceFieldValue: any, targetFieldValue: any) => boolean
+}
+
+export type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
+  BaseDependency<SchemaType> & {
+    type:
+      | DependencyType.DISABLES
+      | DependencyType.REQUIRES
+      | DependencyType.HIDES
+  }
+
+export type EnumValues = readonly [string, ...string[]]
+
+export type OptionsDependency<
+  SchemaType extends z.infer<z.ZodObject<any, any>>,
+> = BaseDependency<SchemaType> & {
+  type: DependencyType.SETS_OPTIONS
+
+  // Partial array of values from sourceField that will trigger the dependency
+  options: EnumValues
+}
+
+export type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
+  | ValueDependency<SchemaType>
+  | OptionsDependency<SchemaType>
--- a/src/components/ui/auto-form/utils.ts
+++ b/src/components/ui/auto-form/utils.ts
@ -0,0 +1,171 @@
+import type { z } from 'zod'
+
+// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.
+export type ZodObjectOrWrapped =
+  | z.ZodObject<any, any>
+  | z.ZodEffects<z.ZodObject<any, any>>
+
+/**
+ * Beautify a camelCase string.
+ * e.g. "myString" -> "My String"
+ */
+export function beautifyObjectName(string: string) {
+  // Remove bracketed indices
+  // if numbers only return the string
+  let output = string.replace(/\[\d+\]/g, '').replace(/([A-Z])/g, ' $1')
+  output = output.charAt(0).toUpperCase() + output.slice(1)
+  return output
+}
+
+/**
+ * Parse string and extract the index
+ * @param string
+ * @returns index or undefined
+ */
+export function getIndexIfArray(string: string) {
+  const indexRegex = /\[(\d+)\]/
+  // Match the index
+  const match = string.match(indexRegex)
+  // Extract the index (number)
+  const index = match ? Number.parseInt(match[1]) : undefined
+  return index
+}
+
+/**
+ * Get the lowest level Zod type.
+ * This will unpack optionals, refinements, etc.
+ */
+export function getBaseSchema<
+  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,
+>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {
+  if (!schema)
+    return null
+  if ('innerType' in schema._def)
+    return getBaseSchema(schema._def.innerType as ChildType)
+
+  if ('schema' in schema._def)
+    return getBaseSchema(schema._def.schema as ChildType)
+
+  return schema as ChildType
+}
+
+/**
+ * Get the type name of the lowest level Zod type.
+ * This will unpack optionals, refinements, etc.
+ */
+export function getBaseType(schema: z.ZodAny) {
+  const baseSchema = getBaseSchema(schema)
+  return baseSchema ? baseSchema._def.typeName : ''
+}
+
+/**
+ * Search for a "ZodDefault" in the Zod stack and return its value.
+ */
+export function getDefaultValueInZodStack(schema: z.ZodAny): any {
+  const typedSchema = schema as unknown as z.ZodDefault<
+    z.ZodNumber | z.ZodString
+  >
+
+  if (typedSchema._def.typeName === 'ZodDefault')
+    return typedSchema._def.defaultValue()
+
+  if ('innerType' in typedSchema._def) {
+    return getDefaultValueInZodStack(
+      typedSchema._def.innerType as unknown as z.ZodAny,
+    )
+  }
+  if ('schema' in typedSchema._def) {
+    return getDefaultValueInZodStack(
+      (typedSchema._def as any).schema as z.ZodAny,
+    )
+  }
+
+  return undefined
+}
+
+export function getObjectFormSchema(
+  schema: ZodObjectOrWrapped,
+): z.ZodObject<any, any> {
+  if (schema?._def.typeName === 'ZodEffects') {
+    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>
+    return getObjectFormSchema(typedSchema._def.schema)
+  }
+  return schema as z.ZodObject<any, any>
+}
+
+function isIndex(value: unknown): value is number {
+  return Number(value) >= 0
+}
+/**
+ * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax
+ */
+export function normalizeFormPath(path: string): string {
+  const pathArr = path.split('.')
+  if (!pathArr.length)
+    return ''
+
+  let fullPath = String(pathArr[0])
+  for (let i = 1; i < pathArr.length; i++) {
+    if (isIndex(pathArr[i])) {
+      fullPath += `[${pathArr[i]}]`
+      continue
+    }
+
+    fullPath += `.${pathArr[i]}`
+  }
+
+  return fullPath
+}
+
+type NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }
+/**
+ * Checks if the path opted out of nested fields using `[fieldName]` syntax
+ */
+export function isNotNestedPath(path: string) {
+  return /^\[.+\]$/.test(path)
+}
+function isObject(obj: unknown): obj is Record<string, unknown> {
+  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
+}
+function isContainerValue(value: unknown): value is Record<string, unknown> {
+  return isObject(value) || Array.isArray(value)
+}
+function cleanupNonNestedPath(path: string) {
+  if (isNotNestedPath(path))
+    return path.replace(/\[|\]/g, '')
+
+  return path
+}
+
+/**
+ * Gets a nested property value from an object
+ */
+export function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined
+export function getFromPath<TValue = unknown, TFallback = TValue>(
+  object: NestedRecord | undefined,
+  path: string,
+  fallback?: TFallback,
+): TValue | TFallback
+export function getFromPath<TValue = unknown, TFallback = TValue>(
+  object: NestedRecord | undefined,
+  path: string,
+  fallback?: TFallback,
+): TValue | TFallback | undefined {
+  if (!object)
+    return fallback
+
+  if (isNotNestedPath(path))
+    return object[cleanupNonNestedPath(path)] as TValue | undefined
+
+  const resolvedValue = (path || '')
+    .split(/\.|\[(\d+)\]/)
+    .filter(Boolean)
+    .reduce((acc, propKey) => {
+      if (isContainerValue(acc) && propKey in acc)
+        return acc[propKey]
+
+      return fallback
+    }, object as unknown)
+
+  return resolvedValue as TValue | undefined
+}
--- a/src/components/ui/avatar/Avatar.vue
+++ b/src/components/ui/avatar/Avatar.vue
@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AvatarRoot } from 'radix-vue'
+import { cn } from '~/lib/utils'
+import { avatarVariant, type AvatarVariants } from '.'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+})
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
--- a/src/components/ui/avatar/AvatarFallback.vue
+++ b/src/components/ui/avatar/AvatarFallback.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+
+const props = defineProps<AvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
--- a/src/components/ui/avatar/AvatarImage.vue
+++ b/src/components/ui/avatar/AvatarImage.vue
@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>
--- a/src/components/ui/avatar/index.ts
+++ b/src/components/ui/avatar/index.ts
@ -0,0 +1,24 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>
--- a/src/components/ui/badge/Badge.vue
+++ b/src/components/ui/badge/Badge.vue
@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+import { type BadgeVariants, badgeVariants } from '.'
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/badge/index.ts
+++ b/src/components/ui/badge/index.ts
@ -0,0 +1,25 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
--- a/src/components/ui/breadcrumb/Breadcrumb.vue
+++ b/src/components/ui/breadcrumb/Breadcrumb.vue
@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
--- a/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
--- a/src/components/ui/breadcrumb/BreadcrumbItem.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbItem.vue
@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
--- a/src/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbLink.vue
@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'a',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/src/components/ui/breadcrumb/BreadcrumbList.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbList.vue
@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
--- a/src/components/ui/breadcrumb/BreadcrumbPage.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbPage.vue
@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
--- a/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
--- a/src/components/ui/breadcrumb/index.ts
+++ b/src/components/ui/breadcrumb/index.ts
@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
--- a/src/components/ui/button/Button.vue
+++ b/src/components/ui/button/Button.vue
@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { cn } from '~/lib/utils'
+import { type ButtonVariants, buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@ -0,0 +1,35 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
--- a/src/components/ui/calendar/Calendar.vue
+++ b/src/components/ui/calendar/Calendar.vue
@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
--- a/src/components/ui/calendar/CalendarCell.vue
+++ b/src/components/ui/calendar/CalendarCell.vue
@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
--- a/src/components/ui/calendar/CalendarCellTrigger.vue
+++ b/src/components/ui/calendar/CalendarCellTrigger.vue
@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { buttonVariants } from '~/components/ui/button'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
--- a/src/components/ui/calendar/CalendarGrid.vue
+++ b/src/components/ui/calendar/CalendarGrid.vue
@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
--- a/src/components/ui/calendar/CalendarGridBody.vue
+++ b/src/components/ui/calendar/CalendarGridBody.vue
@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
--- a/src/components/ui/calendar/CalendarGridHead.vue
+++ b/src/components/ui/calendar/CalendarGridHead.vue
@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridHeadProps>()
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
--- a/src/components/ui/calendar/CalendarGridRow.vue
+++ b/src/components/ui/calendar/CalendarGridRow.vue
@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
--- a/src/components/ui/calendar/CalendarHeadCell.vue
+++ b/src/components/ui/calendar/CalendarHeadCell.vue
@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>
--- a/src/components/ui/calendar/CalendarHeader.vue
+++ b/src/components/ui/calendar/CalendarHeader.vue
@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>
--- a/src/components/ui/calendar/CalendarHeading.vue
+++ b/src/components/ui/calendar/CalendarHeading.vue
@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
--- a/src/components/ui/calendar/CalendarNextButton.vue
+++ b/src/components/ui/calendar/CalendarNextButton.vue
@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { ChevronRight } from 'lucide-vue-next'
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { buttonVariants } from '~/components/ui/button'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>
--- a/src/components/ui/calendar/CalendarPrevButton.vue
+++ b/src/components/ui/calendar/CalendarPrevButton.vue
@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { ChevronLeft } from 'lucide-vue-next'
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { buttonVariants } from '~/components/ui/button'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</template>
--- a/src/components/ui/calendar/index.ts
+++ b/src/components/ui/calendar/index.ts
@ -0,0 +1,12 @@
+export { default as Calendar } from './Calendar.vue'
+export { default as CalendarCell } from './CalendarCell.vue'
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
+export { default as CalendarGrid } from './CalendarGrid.vue'
+export { default as CalendarGridBody } from './CalendarGridBody.vue'
+export { default as CalendarGridHead } from './CalendarGridHead.vue'
+export { default as CalendarGridRow } from './CalendarGridRow.vue'
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
+export { default as CalendarHeader } from './CalendarHeader.vue'
+export { default as CalendarHeading } from './CalendarHeading.vue'
+export { default as CalendarNextButton } from './CalendarNextButton.vue'
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
--- a/src/components/ui/checkbox/Checkbox.vue
+++ b/src/components/ui/checkbox/Checkbox.vue
@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import { Check } from 'lucide-vue-next'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="h-full w-full flex items-center justify-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
--- a/src/components/ui/checkbox/index.ts
+++ b/src/components/ui/checkbox/index.ts
@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'
--- a/src/components/ui/collapsible/Collapsible.vue
+++ b/src/components/ui/collapsible/Collapsible.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
--- a/src/components/ui/collapsible/CollapsibleContent.vue
+++ b/src/components/ui/collapsible/CollapsibleContent.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
+    <slot />
+  </CollapsibleContent>
+</template>
--- a/src/components/ui/collapsible/CollapsibleTrigger.vue
+++ b/src/components/ui/collapsible/CollapsibleTrigger.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
--- a/src/components/ui/collapsible/index.ts
+++ b/src/components/ui/collapsible/index.ts
@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
--- a/src/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenu.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Check } from 'lucide-vue-next'
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class=" cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50  [&>svg]:size-4 [&>svg]:shrink-0',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRadioGroup,
+  type DropdownMenuRadioGroupEmits,
+  type DropdownMenuRadioGroupProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { Circle } from 'lucide-vue-next'
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  type DropdownMenuRadioItemEmits,
+  type DropdownMenuRadioItemProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@ -0,0 +1,22 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSub.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSub,
+  type DropdownMenuSubEmits,
+  type DropdownMenuSubProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
--- a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Dustella	b8e4e63cf1	update: iter 1.5 Some checks are pending Test / build (lts/, ubuntu-latest) (push) Waiting to run Details Test / build (lts/, windows-latest) (push) Waiting to run Details	2025-01-21 22:27:09 +08:00
Dustella	7783049690	added cosmic, added passcode	2025-01-18 22:00:26 +08:00
Dustella	e070d22a07	stage	2025-01-16 16:03:21 +08:00
Dustella	4e536ae514	feat: fix heatmap	2025-01-14 17:37:25 +08:00
Dustella	55d62618da	newui: saber	2025-01-14 14:48:08 +08:00
Dustella	fc9279cab0	newui: ballon	2025-01-14 14:21:46 +08:00
Dustella	ada14aa1cf	feat: new ui	2025-01-09 01:53:07 +08:00
Dustella	b5a160ccc4	stage: bump	2025-01-09 00:09:46 +08:00
Dustella	ca390f7289	staging: v1	2025-01-08 14:13:16 +08:00
Dustella	663270d9af	2	2024-12-25 16:21:36 +08:00
				`@ -0,0 +1 @@`
				`export { default as Checkbox } from './Checkbox.vue'`