init 新范式

2025-05-24 09:11:30 +08:00
parent 3057ca121c
commit 7124382c5c
64 changed files with 4074 additions and 16 deletions
--- a/kevisual.json
+++ b/kevisual.json
@@ -1,4 +1,140 @@
 {
+  "$schema": "https://kevisual.xiongxiao.me/root/ai/kevisual/tools/kevisual-sync/schema.json?v=2",
+  "metadata": {
+    "share": "public"
+  },
+  "checkDir": {
+    "src/components": {
+      "url": "https://kevisual.xiongxiao.me/root/ai/code/registry/components",
+      "enabled": true
+    },
+    "src/modules": {
+      "url": "https://kevisual.xiongxiao.me/root/ai/code/registry/modules",
+      "enabled": true,
+      "replace": {
+        "src/": ""
+      }
+    },
+    "src/styles": {
+      "url": "https://kevisual.xiongxiao.me/root/ai/code/registry/styles",
+      "enabled": true,
+      "replace": {
+        "src/": ""
+      }
+    },
+    "src/query": {
+      "url": "https://kevisual.xiongxiao.me/root/ai/code/registry/query",
+      "enabled": true,
+      "replace": {
+        "src/": ""
+      }
+    },
+    "src/lib": {
+      "url": "https://kevisual.xiongxiao.me/root/ai/code/registry/lib",
+      "enabled": true,
+      "replace": {
+        "src/": ""
+      }
+    },
+    "src/astro": {
+      "url": "https://kevisual.xiongxiao.me/root/ai/code/registry/astro",
+      "enabled": true,
+      "replace": {
+        "src/": ""
+      }
+    },
+    "src/data/blogs": {
+      "url": "https://kevisual.xiongxiao.me/root/ai/blogs",
+      "enabled": true,
+      "replace": {
+        "src/data/": ""
+      }
+    }
+  },
+  "syncDirectory": [
+    {
+      "files": [
+        "src/components/**/*"
+      ],
+      "ignore": [],
+      "registry": "https://kevisual.xiongxiao.me/root/ai/code/registry",
+      "replace": {
+        "src/": ""
+      }
+    },
+    {
+      "files": [
+        "src/modules/**/*"
+      ],
+      "ignore": [],
+      "registry": "https://kevisual.xiongxiao.me/root/ai/code/registry",
+      "replace": {
+        "src/": ""
+      }
+    },
+    {
+      "files": [
+        "src/styles/**/*"
+      ],
+      "ignore": [],
+      "registry": "https://kevisual.xiongxiao.me/root/ai/code/registry",
+      "replace": {
+        "src/": ""
+      }
+    },
+    {
+      "files": [
+        "src/lib/**/*"
+      ],
+      "ignore": [],
+      "registry": "https://kevisual.xiongxiao.me/root/ai/code/registry",
+      "replace": {
+        "src/": ""
+      }
+    },
+    {
+      "files": [
+        "src/query/**/*"
+      ],
+      "ignore": [],
+      "registry": "https://kevisual.xiongxiao.me/root/ai/code/registry",
+      "replace": {
+        "src/": ""
+      }
+    },
+    {
+      "files": [
+        "src/store/**/*"
+      ],
+      "ignore": [],
+      "registry": "https://kevisual.xiongxiao.me/root/ai/code/registry",
+      "replace": {
+        "src/": ""
+      }
+    },
+    {
+      "files": [
+        "src/astro/**/*"
+      ],
+      "ignore": [],
+      "registry": "https://kevisual.xiongxiao.me/root/ai/code/registry",
+      "replace": {
+        "src/": ""
+      }
+    },
+    {
+      "files": [
+        "src/data/blogs/**/*"
+      ],
+      "registry": "https://kevisual.xiongxiao.me/root/ai",
+      "meta": {
+        "share": "public"
+      },
+      "replace": {
+        "src/data/": ""
+      }
+    }
+  ],
  "sync": {
    "./src/data/README.md": "https://kevisual.xiongxiao.me/root/ai/kevisual/README.md"
  }
--- a/package.json
+++ b/package.json
@@ -23,16 +23,25 @@
    "@kevisual/query": "^0.0.18",
    "@kevisual/query-login": "^0.0.5",
    "@kevisual/registry": "^0.0.1",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.7",
    "@tailwindcss/vite": "^4.1.7",
    "astro": "^5.7.13",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
    "dayjs": "^1.11.13",
    "lodash-es": "^4.17.21",
    "lucide-react": "^0.511.0",
    "nanoid": "^5.1.5",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
+    "react-hook-form": "^7.56.4",
    "react-toastify": "^11.0.5",
    "tailwind-merge": "^3.3.0",
    "zustand": "^5.0.4"
@@ -42,6 +51,7 @@
  },
  "devDependencies": {
    "@kevisual/query-awesome": "^0.0.2",
+    "@kevisual/router": "^0.0.21",
    "@kevisual/types": "^0.0.10",
    "@types/react": "^19.1.4",
    "@types/react-dom": "^19.1.5",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/astro/i18n/index.tsx
+++ b/src/astro/i18n/index.tsx
@@ -0,0 +1,27 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+// 导入你的翻译资源
+import enTranslation from './locales/en/translation.json';
+import zhTranslation from './locales/zh/translation.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: enTranslation,
+      },
+      zh: {
+        translation: zhTranslation,
+      },
+    },
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // React 已经处理了转义
+    },
+  });
+
+export default i18n;
--- a/src/astro/i18n/locales/en/translation.json
+++ b/src/astro/i18n/locales/en/translation.json
@@ -0,0 +1,4 @@
+{
+  "welcome": "Welcome to our site",
+  "about": "About us"
+}
--- a/src/astro/i18n/locales/zh/translation.json
+++ b/src/astro/i18n/locales/zh/translation.json
@@ -0,0 +1,4 @@
+{
+  "welcome": "欢迎来到我们的网站",
+  "about": "关于我们"
+}
--- a/src/astro/layouts/mdx/main.astro
+++ b/src/astro/layouts/mdx/main.astro
@@ -0,0 +1,36 @@
+---
+export interface Props {
+  children: any;
+}
+---
+
+<html lang='zh'>
+  <header>
+    <meta charset='UTF-8' />
+    <title>Docs</title>
+    <link
+      rel='stylesheet'
+      href='https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown-light.min.css'
+      integrity='sha512-X175XRJAO6PHAUi8AA7GP8uUF5Wiv+w9bOi64i02CHKDQBsO1yy0jLSKaUKg/NhRCDYBmOLQCfKaTaXiyZlLrw=='
+      crossorigin='anonymous'
+      referrerpolicy='no-referrer'
+    />
+  </header>
+  <body>
+    <header>
+      <slot name='header'>
+        <h1>My Site Header</h1>
+      </slot>
+    </header>
+    <main class='markdown-body' style='padding: 1rem'>
+      <slot />
+    </main>
+    <footer>
+      <slot name='footer'>
+        <p>Copyrignt &copy; 2025</p>
+      </slot>
+    </footer>
+  </body>
+
+
+</html>
--- a/src/components/Test.tsx
+++ b/src/components/Test.tsx
@@ -1,3 +0,0 @@
-export const Test = () => {
-  return <div>Test</div>;
-};
--- a/src/components/a/auto-complate.tsx
+++ b/src/components/a/auto-complate.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/a/button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+
+type Option = {
+  value?: string;
+  label: string;
+};
+
+type AutoComplateProps = {
+  options: Option[];
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  width?: string;
+};
+export function AutoComplate(props: AutoComplateProps) {
+  const [open, setOpen] = React.useState(false);
+  const [value, _setValue] = React.useState('');
+  const setValue = (value: string) => {
+    props?.onChange?.(value);
+    _setValue(value);
+  };
+  const showLabel = React.useMemo(() => {
+    const option = props.options.find((option) => option.value === value);
+    if (option) {
+      return option?.label;
+    }
+    if (props.value) return props.value;
+    if (value) return value;
+    return 'Select ...';
+  }, [value, props.value]);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant='outline' role='combobox' aria-expanded={open} className={cn(props.width ? props.width : 'w-[400px]', 'justify-between')}>
+          {showLabel}
+          <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className={cn(props.width ? props.width : 'w-[400px]', ' p-0')}>
+        <Command>
+          <CommandInput
+            placeholder={props.placeholder ?? 'Search options...'}
+            onKeyDown={(e: any) => {
+              if (e.key === 'Enter') {
+                setOpen(false);
+                const value = e.target?.value || '';
+                setValue(value.trim());
+              }
+            }}
+          />
+          <CommandList>
+            <CommandEmpty>No options found.</CommandEmpty>
+            <CommandGroup>
+              {props.options.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? '' : currentValue);
+                    setOpen(false);
+                  }}>
+                  <Check className={cn('mr-2 h-4 w-4', value === framework.value ? 'opacity-100' : 'opacity-0')} />
+                  {framework.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/src/components/a/button.tsx
+++ b/src/components/a/button.tsx
@@ -0,0 +1,18 @@
+import { Button as UiButton, ButtonProps } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+export const IconButton: typeof UiButton = (props) => {
+  return <UiButton variant='ghost' size='icon' {...props} className={cn('h-8 w-8 cursor-pointer', props?.className)} />;
+};
+
+export const Button: typeof UiButton = (props) => {
+  return <UiButton variant='ghost' {...props} className={cn('cursor-pointer', props?.className)} />;
+};
+
+export const ButtonTextIcon = (props: ButtonProps & { icon: React.ReactNode }) => {
+  return (
+    <UiButton variant={'outline'} size='sm' {...props} className={cn('cursor-pointer flex items-center gap-2', props?.className)}>
+      {props.icon}
+      {props.children}
+    </UiButton>
+  );
+};
--- a/src/components/a/confirm.tsx
+++ b/src/components/a/confirm.tsx
@@ -0,0 +1,100 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { useEffect, useMemo, useState } from 'react';
+
+type useConfirmOptions = {
+  confrimProps: ConfirmProps;
+};
+type Fn = () => void;
+export const useConfirm = (opts?: useConfirmOptions) => {
+  const [open, setOpen] = useState(false);
+  type ConfirmOptions = {
+    onOk?: Fn;
+    onCancel?: Fn;
+  };
+  const confirm = (opts?: ConfirmOptions) => {
+    setOpen(true);
+  };
+  const module = useMemo(() => {
+    return <Confirm {...opts?.confrimProps} hasTrigger={false} open={open} setOpen={setOpen} />;
+  }, [open]);
+  return {
+    module: module,
+    open,
+    setOpen,
+    confirm,
+  };
+};
+
+type ConfirmProps = {
+  children?: React.ReactNode;
+  tip?: React.ReactNode;
+  title?: string;
+  description?: string;
+  onOkText?: string;
+  onCancelText?: string;
+  onOk?: Fn;
+  onCancle?: Fn;
+  hasTrigger?: boolean;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  footer?: React.ReactNode;
+};
+export const Confirm = (props: ConfirmProps) => {
+  const [isOpen, setIsOpen] = useState(props.open);
+  const hasTrigger = props.hasTrigger ?? true;
+  useEffect(() => {
+    setIsOpen(props.open);
+  }, [props.open]);
+  return (
+    <AlertDialog
+      open={isOpen}
+      onOpenChange={(v) => {
+        setIsOpen(v);
+        props?.setOpen?.(v);
+      }}>
+      {hasTrigger && (
+        <>
+          {props?.children && <AlertDialogTrigger asChild>{props?.children ?? props?.tip ?? '提示'}</AlertDialogTrigger>}
+          {!props?.children && <AlertDialogTrigger>{props?.tip ?? '提示'}</AlertDialogTrigger>}
+        </>
+      )}
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{props?.title ?? '是否确认删除?'}</AlertDialogTitle>
+          <AlertDialogDescription>{props?.description ?? '此操作无法撤销，是否继续。'}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          {props?.footer && <div className='flex gap-2'>{props?.footer}</div>}
+          {!props?.footer && (
+            <>
+              <AlertDialogCancel
+                onClick={(e) => {
+                  props?.onCancle?.();
+                  e.stopPropagation();
+                }}>
+                {props?.onCancelText ?? '取消'}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={(e) => {
+                  props?.onOk?.();
+                  e.stopPropagation();
+                }}>
+                {props?.onOkText ?? '确定'}
+              </AlertDialogAction>{' '}
+            </>
+          )}
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
--- a/src/components/a/select.tsx
+++ b/src/components/a/select.tsx
@@ -0,0 +1,31 @@
+import { Select as UISelect, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+type Option = {
+  value: string;
+  label?: string;
+};
+type SelectProps = {
+  options?: Option[];
+  value?: string;
+  placeholder?: string;
+  onChange?: (value: string) => any;
+};
+export const Select = (props: SelectProps) => {
+  const options = props.options || [];
+  return (
+    <UISelect onValueChange={props.onChange} value={props.value}>
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder={props.placeholder || '请选择'} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((item, index) => {
+          return (
+            <SelectItem key={index} value={item.value}>
+              {item.label}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </UISelect>
+  );
+};
--- a/src/components/a/tooltip.tsx
+++ b/src/components/a/tooltip.tsx
@@ -0,0 +1,14 @@
+import { Tooltip as UITooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+export const Tooltip = (props: { children?: React.ReactNode; title?: string }) => {
+  return (
+    <TooltipProvider>
+      <UITooltip>
+        <TooltipTrigger asChild>{props.children}</TooltipTrigger>
+        <TooltipContent>
+          <p>{props.title}</p>
+        </TooltipContent>
+      </UITooltip>
+    </TooltipProvider>
+  );
+};
--- a/src/components/b/button/button.tsx
+++ b/src/components/b/button/button.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { twMerge } from 'tailwind-merge';
+
+const button = cva('button', {
+  variants: {
+    intent: {
+      primary: ['bg-blue-500', 'text-white', 'border-transparent'],
+      secondary: ['bg-white', 'text-gray-800', 'border-gray-400'],
+    },
+    size: {
+      small: ['text-sm', 'py-1', 'px-2'],
+      medium: ['text-base', 'py-2', 'px-4'],
+    },
+    disabled: {
+      false: null,
+      true: ['opacity-50', 'cursor-not-allowed'],
+    },
+  },
+  compoundVariants: [
+    {
+      intent: 'primary',
+      disabled: false,
+      class: 'hover:bg-blue-600',
+    },
+    {
+      intent: 'secondary',
+      disabled: false,
+      class: 'hover:bg-gray-100',
+    },
+    { intent: 'primary', size: 'medium', class: 'uppercase' },
+  ],
+  defaultVariants: {
+    disabled: false,
+    intent: 'primary',
+    size: 'medium',
+  },
+});
+
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, VariantProps<typeof button> {}
+
+export const Button: React.FC<ButtonProps> = ({ className, intent, size, disabled, ...props }) => (
+  <button className={twMerge('cursor-pointer', button({ intent, size, disabled, className }))} disabled={disabled || undefined} {...props} />
+);
--- a/src/components/b/card/card.tsx
+++ b/src/components/b/card/card.tsx
@@ -0,0 +1,56 @@
+// components/card.ts
+import type { VariantProps } from 'class-variance-authority';
+import { cva, cx } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+/**
+ * Box
+ */
+export type BoxProps = VariantProps<typeof box>;
+export const box = cva(['box', 'box-border'], {
+  variants: {
+    margin: { 0: 'm-0', 2: 'm-2', 4: 'm-4', 8: 'm-8' },
+    padding: { 0: 'p-0', 2: 'p-2', 4: 'p-4', 8: 'p-8' },
+  },
+  defaultVariants: {
+    margin: 0,
+    padding: 0,
+  },
+});
+
+/**
+ * Card
+ */
+type CardBaseProps = VariantProps<typeof cardBase>;
+const cardBase = cva(['card', 'border-solid', 'border-slate-300', 'rounded'], {
+  variants: {
+    shadow: {
+      md: 'drop-shadow-md',
+      lg: 'drop-shadow-lg',
+      xl: 'drop-shadow-xl',
+    },
+  },
+});
+
+export interface CardProps extends BoxProps, CardBaseProps {}
+export const card = ({ margin, padding, shadow }: CardProps = {}) => cx(box({ margin, padding }), cardBase({ shadow }));
+
+type CardBlankProps = {
+  number?: number;
+  className?: string;
+};
+
+/**
+ * CardBlank 空的卡片，用于占位
+ * @param props
+ * @returns
+ */
+export const CardBlank = (props: CardBlankProps) => {
+  const { number = 4, className } = props;
+  return (
+    <>
+      {new Array(number).fill(0).map((_, index) => {
+        return <div key={index} className={cn('w-[300px] shark-0', className)}></div>;
+      })}
+    </>
+  );
+};
--- a/src/components/b/i18n/index.tsx
+++ b/src/components/b/i18n/index.tsx
@@ -0,0 +1,74 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import Backend from 'i18next-http-backend'; // 引入 Backend 插件
+import { useLayoutEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+export { useTranslation };
+type I18NextProviderProps = {
+  children: React.ReactNode;
+  basename?: string;
+  noUse?: boolean;
+};
+
+export const initI18n = async (basename: string) => {
+  // 初始化 i18n
+  return new Promise((resolve) => {
+    i18n
+      .use(Backend) // 使用 Backend 插件
+      .use(initReactI18next)
+      .init(
+        {
+          backend: {
+            loadPath: `${basename}/locales/{{lng}}/{{ns}}.json`, // 指定 JSON 文件的路径
+          },
+          lng: 'zh', // 默认语言
+          fallbackLng: 'en', // 备用语言
+          interpolation: {
+            escapeValue: false, // react 已经安全地处理了转义
+          },
+        },
+        (e) => {
+          console.log('e', e);
+          resolve(true);
+        },
+      );
+  });
+};
+
+/**
+ * 国际化组件,初始化
+ * @param props
+ * @returns
+ */
+export const I18NextProvider = (props: I18NextProviderProps) => {
+  const { children, basename, noUse } = props;
+  if (noUse) {
+    return <>{children}</>;
+  }
+  const [init, setInit] = useState(false);
+  useLayoutEffect(() => {
+    initCheck();
+  }, []);
+  const initCheck = async () => {
+    let _currentBasename = '';
+    if (typeof basename === 'undefined') {
+      const local = localStorage.getItem('locale-basename');
+      if (local) {
+        _currentBasename = local;
+      } else {
+        _currentBasename = '';
+      }
+    } else {
+      _currentBasename = basename;
+    }
+    if (_currentBasename === '/') {
+      _currentBasename = '';
+    }
+    initI18n(_currentBasename);
+    setInit(true);
+  };
+  if (!init) {
+    return <></>;
+  }
+  return <>{children}</>;
+};
--- a/src/components/b/render/ReactRender.tsx
+++ b/src/components/b/render/ReactRender.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+export class ReactRenderer {
+  component: any;
+  element: HTMLElement;
+  ref: React.RefObject<any>;
+  props: any;
+  root: any;
+
+  constructor(component: any, { props }: any) {
+    this.component = component;
+    this.element = document.createElement('div');
+    this.ref = React.createRef();
+    this.props = {
+      ...props,
+      ref: this.ref,
+    };
+    this.root = createRoot(this.element);
+    this.render();
+  }
+
+  updateProps(props: any) {
+    this.props = {
+      ...this.props,
+      ...props,
+    };
+    this.render();
+  }
+
+  render() {
+    this.root.render(React.createElement(this.component, this.props));
+  }
+
+  destroy() {
+    this.root.unmount();
+  }
+}
+
+export default ReactRenderer;
--- a/src/components/html/blank.astro
+++ b/src/components/html/blank.astro
@@ -0,0 +1,13 @@
+---
+
+---
+
+<html lang='zh-CN'>
+  <head>
+    <meta charset='UTF-8' />
+    <title>AI Pages</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,155 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+export type ButtonProps = React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  };
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return <Comp data-slot='button' className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+}
+
+export { Button, buttonVariants };
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,175 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,133 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,165 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,183 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -0,0 +1,15 @@
+// @ts-ignore
+import { defineCollection, z } from 'astro:content';
+import { glob, file } from 'astro/loaders'; // 不适用于旧版 API
+
+const blog = defineCollection({
+  // loader: glob({ pattern: '**/*.md', base: './src/data/blogs' }),
+  loader: glob({ pattern: '**/[^_]*.md', base: './src/data/blogs' }),
+  schema: z.object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    // pubDate: z.coerce.date(),
+    // updatedDate: z.coerce.date().optional(),
+  }),
+});
+export const collections = { blog };
--- a/src/data/blogs/202502/20250217-20-think-frontend.md
+++ b/src/data/blogs/202502/20250217-20-think-frontend.md
@@ -0,0 +1,17 @@
+# think frontend
+
+我今天很多的时候都反复的想到一件事情。前端在ai的环境下，是否不能做了？
+
+如果 ai 盛行，那么创建一个页面的成本变低，反而每一个人都可能创建页面的情况下，所有的人都需要懂得一点的前端开发。
+
+
+### 平台
+
+所以对于大前端来说，如果想通过ai做一个小的网站的时候，为了更便捷把自己作出来的东西展现出来的话，需要有一个快速的平台。
+
+### ai-frontend
+
+如何从零开始迅速学会 `ai-frontend`.
+
+#### 如何快速做一个应用
+
--- a/src/data/blogs/202502/20250218-07-ai-avatar.md
+++ b/src/data/blogs/202502/20250218-07-ai-avatar.md
@@ -0,0 +1,10 @@
+# ai-avatar
+
+创建头像，自定义。
+
+## 根据会话生成一张图
+
+然后把资源上传到某一些地方
+
+- 比如自己的网站
+- 比如其他网站
--- a/src/data/blogs/202502/20250219-17-center.md
+++ b/src/data/blogs/202502/20250219-17-center.md
@@ -0,0 +1,5 @@
+# center
+
+今天讨论了一件事，关于ai，ai怎么帮助人来认清一个真实的情况。
+
+那就是中枢，中枢收集一切的数据，然后合拢到一起。
--- a/src/data/blogs/202502/20250219-17-project-tasks.md
+++ b/src/data/blogs/202502/20250219-17-project-tasks.md
@@ -0,0 +1,11 @@
+# project-tasks
+
+回忆去年做的task的任务项目书
+
+1. 找出想做什么
+2. 做这个的步骤是什么
+3. 分解步骤
+4. 生成task
+
+
+## 上传到其他地方
--- a/src/data/blogs/202502/20250223-16-srvice.md
+++ b/src/data/blogs/202502/20250223-16-srvice.md
@@ -0,0 +1,26 @@
+# srvice
+
+关于服务器构思分享。
+
+## 服务器价格
+
+轻量云  
+- 4h8g12m 一年大概600块， 10个人一个人60块（一个月6块）。共享一台服务器。 
+- 2h4g5m 200
+
+- 轻量服务器：适用于小型企业、个人开发者、学生等，可用于网站建设、开发测试、小型应用、知识效率管理、云端学习等轻负载应用场景。
+
+平台费按量收费：10或者5一个月，维护管理。
+
+数据迁移费用：
+
+## 服务器使用说明
+
+让服务器作为一个中转站，少量部署应用。
+
+- 博客
+- 小网站
+- 笔记同步
+- 小工具
+
+日历，书签
--- a/src/data/blogs/README.md
+++ b/src/data/blogs/README.md
@@ -0,0 +1,16 @@
+---
+title: blogs list
+description: 个人博客
+---
+
+合并一些功能模块，ai相关的，导航，文字转语音，语音转文字，对话等
+
+## 2025-02 
+具体时间的日志
+
+## code-logger
+关于code相关的
+
+## logger-life
+
+随笔
--- a/src/data/blogs/code-logger/0001-shadcn.md
+++ b/src/data/blogs/code-logger/0001-shadcn.md
@@ -0,0 +1,51 @@
+在 shadcn/ui 中，`Neutral`、`Gray`、`Zinc`、`Stone` 和 `Slate` 都是预设的灰色调色板（neutral color palettes），但它们的色调倾向和适用场景略有不同。以下是它们的区别和特点：
+
+---
+
+### 1. **`Neutral`**
+- **特点**：纯中性灰，几乎没有色相偏移（完全平衡的灰度）。
+- **适用场景**：需要绝对中性的背景或文本，适合极简设计或黑白风格。
+- **示例**：`bg-neutral-100`, `text-neutral-900`
+
+---
+
+### 2. **`Gray`**
+- **特点**：标准灰色，轻微冷调（略带蓝色底），但接近中性。
+- **适用场景**：通用场景，适合大多数界面（默认的灰色调）。
+- **示例**：`bg-gray-100`, `border-gray-200`
+
+---
+
+### 3. **`Zinc`**
+- **特点**：比 `Gray` 更暖一些，带有极轻微的黄色/绿色底。
+- **适用场景**：需要略微温暖的灰色，避免冷感。
+- **示例**：`bg-zinc-50`, `text-zinc-800`
+
+---
+
+### 4. **`Stone`**
+- **特点**：明显的暖灰色，类似石灰石的色调（黄色/棕色底）。
+- **适用场景**：复古、自然或温暖风格的设计。
+- **示例**：`bg-stone-200`, `border-stone-300`
+
+---
+
+### 5. **`Slate`**
+- **特点**：冷调灰色，带有蓝色/紫色底，比 `Gray` 更冷。
+- **适用场景**：科技感、现代感强的设计，或需要冷色调的界面。
+- **示例**：`bg-slate-100`, `text-slate-700`
+
+---
+
+### 如何选择？
+- **中性优先**：选 `Neutral` 或 `Gray`（最通用）。
+- **温暖感**：选 `Zinc` 或 `Stone`（`Stone` 最暖）。
+- **冷感/科技感**：选 `Slate`。
+- **一致性**：建议一个项目中只用一种灰色调色板，避免混用。
+
+---
+
+### 对比图（从冷到暖）：
+`Slate` → `Gray` → `Neutral` → `Zinc` → `Stone`
+
+如果需要更直观的对比，可以在 [shadcn/ui 官网](https://ui.shadcn.com/docs) 或 [Tailwind 调色板](https://tailwindcss.com/docs/customizing-colors) 查看色值示例。
--- a/src/data/blogs/code-logger/0002-query-prompt.md
+++ b/src/data/blogs/code-logger/0002-query-prompt.md
@@ -0,0 +1,26 @@
+```ts
+import { QueryUtil } from '@kevisual/router/define';
+
+export const q = QueryUtil.create({
+  getScript: {
+    path: 'script',
+    key: 'get',
+    description: '获取剧本信息',
+  },
+  updateScript: {
+    path: 'script',
+    key: 'update',
+    description: '更新剧本信息',
+  },
+  deleteScript: {
+    path: 'script',
+    key: 'delete',
+    description: '删除剧本信息',
+  },
+  listScripts: {
+    path: 'script',
+    key: 'list',
+    description: '列出所有剧本信息',
+  },
+});
+```
--- a/src/data/blogs/code-logger/0003-peer.md
+++ b/src/data/blogs/code-logger/0003-peer.md
@@ -0,0 +1,186 @@
+## Peerjs 能做什么？
+
+如果不是局域网，使用 **PeerJS** 和 WebRTC 技术仍然可以在互联网上实现点对点（P2P）消息发送，但需要满足以下条件：
+
+---
+
+### **1. 必须有一个信令服务器**
+- WebRTC 需要一个 **信令服务器** 用于初始连接的建立。
+- **PeerJS Server** 就是一个轻量级的信令服务器，它帮助两个设备（Peers）互相交换连接信息（如 SDP 和 ICE 候选信息）。
+- PeerJS Server 本身并不传输实际的数据，只负责建立连接。
+
+---
+
+### **2. 公网穿透问题**
+- WebRTC 需要设备之间直接通信（点对点），但在实际网络中，由于 **NAT（网络地址转换）** 和防火墙的限制，设备可能无法直接连接到对方。
+- 为了解决这个问题，需要使用 **STUN** 和 **TURN** 服务器：
+  1. **STUN 服务器**：帮助设备发现自己的公网 IP 和端口，用于尝试直接连接。
+  2. **TURN 服务器**：在无法直接连接时，充当中继服务器传输数据。
+
+PeerJS 支持自定义 STUN/TURN 服务器配置：
+
+```javascript
+const peer = new Peer({
+  config: {
+    iceServers: [
+      { url: "stun:stun.l.google.com:19302" }, // 免费的 Google STUN 服务器
+      {
+        url: "turn:your-turn-server.com",
+        username: "user",
+        credential: "password"
+      }
+    ]
+  }
+});
+```
+
+---
+
+### **3. 消息发送的实现**
+在非局域网环境中，只要能够建立 WebRTC 连接，消息仍然可以通过 P2P 方式直接发送，而无需依赖中间服务器。
+
+示例代码：
+
+#### 服务端（运行 PeerJS Server）：
+```bash
+npx peerjs --port 9000 --key myapp
+```
+
+#### 客户端 A：
+```javascript
+const peer = new Peer("peerA", { host: "your-server.com", port: 9000, key: "myapp" });
+
+peer.on("open", (id) => {
+  console.log("My peer ID is:", id);
+
+  // 连接到客户端 B
+  const conn = peer.connect("peerB");
+  conn.on("open", () => {
+    conn.send("Hello from peerA!");
+  });
+
+  conn.on("data", (data) => {
+    console.log("Received:", data);
+  });
+});
+```
+
+#### 客户端 B：
+```javascript
+const peer = new Peer("peerB", { host: "your-server.com", port: 9000, key: "myapp" });
+
+peer.on("connection", (conn) => {
+  conn.on("data", (data) => {
+    console.log("Received:", data);
+    conn.send("Hello back from peerB!");
+  });
+});
+```
+
+---
+
+### **注意事项**
+1. **需要一个稳定的信令服务器**：PeerJS Server 是建立连接的前提。
+   - 可以使用官方的 `peerjs` 服务，也可以自行托管。
+2. **STUN/TURN 服务是关键**：
+   - 公网环境中，推荐使用免费的 STUN 服务器，例如 Google STUN (`stun:stun.l.google.com:19302`)。
+   - 对于企业或大规模应用，建议搭建自己的 TURN 服务器，例如使用 [Coturn](https://github.com/coturn/coturn)。
+3. **网络质量和带宽**：
+   - P2P 消息的传输速度取决于两端的网络质量。
+   - 数据量较大时（如视频流），需要优化传输。
+
+---
+
+### **总结**
+在非局域网环境中，通过 **PeerJS** 和 WebRTC，配合信令服务器（PeerJS Server）和 STUN/TURN 服务器，你可以实现点对点消息传递。只要配置正确，消息和数据可以直接在设备之间传输，而不需要经过中间服务器。
+
+
+
+**PeerJS** 是一个用于构建 WebRTC 应用程序的 JavaScript 库，提供了简单的接口来创建点对点（P2P）连接。使用 PeerJS 以及它的服务器（PeerServer），你可以开发许多有趣的实时应用程序，以下是一些可能的项目想法：
+
+---
+
+### **1. 实时视频/语音聊天**
+- **应用场景**：创建类似 Zoom 或 Google Meet 的视频通话应用。
+- **功能**：
+  - 支持一对一或多对多的视频通话。
+  - 基于 WebRTC 的低延迟音视频传输。
+  - 使用 PeerJS Server 管理 Peer ID 和信令。
+
+---
+
+### **2. 文件共享应用**
+- **应用场景**：开发一个无需上传到服务器的点对点文件共享工具。
+- **功能**：
+  - 直接通过 P2P 传输文件（大文件可能需要分块传输）。
+  - 支持拖拽式文件发送。
+  - 使用加密保证传输安全性。
+
+---
+
+### **3. 实时协作工具**
+- **应用场景**：类似 Google Docs 的实时协作文档编辑器。
+- **功能**：
+  - 多人实时同步文本、图像、代码等内容。
+  - 点对点传输减少延迟，提高效率。
+  - 可结合 WebSocket 提供信令服务器。
+
+---
+
+### **4. 多人在线游戏**
+- **应用场景**：开发一个轻量级的多人在线游戏（如象棋、贪吃蛇）。
+- **功能**：
+  - 使用 PeerJS 建立玩家之间的 P2P 连接。
+  - 每个玩家充当主机同步游戏状态。
+  - 游戏状态通过 P2P 广播到所有玩家。
+
+---
+
+### **5. 局域网聊天工具**
+- **应用场景**：开发一个无需互联网的局域网聊天应用。
+- **功能**：
+  - 使用局域网 P2P 连接直接聊天。
+  - 支持群聊和私聊功能。
+  - 可选加密消息。
+
+---
+
+### **6. 实时屏幕共享**
+- **应用场景**：创建一个支持屏幕共享的在线演示工具。
+- **功能**：
+  - 基于 WebRTC 的屏幕共享功能。
+  - 观众通过 PeerJS 链接直接观看共享屏幕。
+  - 支持音频同步。
+
+---
+
+### **7. 分布式计算**
+- **应用场景**：开发一个利用用户设备的分布式计算工具。
+- **功能**：
+  - 点对点分享计算任务。
+  - 使用 PeerJS 传输计算任务和结果。
+  - 每个节点（Peer）负责部分计算。
+
+---
+
+### **8. 数据同步工具**
+- **应用场景**：开发类似 Resilio Sync 的文件同步工具。
+- **功能**：
+  - 文件夹之间的点对点同步。
+  - 断点续传功能。
+  - 使用信令服务器管理 Peer 之间的连接。
+
+---
+
+### **开发 PeerJS 应用需要的技术栈**
+1. **前端**：
+   - HTML/CSS/JavaScript
+   - PeerJS 客户端库
+2. **后端**（可选）：
+   - 使用 PeerJS Server 作为信令服务器。
+   - 结合 Node.js 实现 Peer ID 管理或其他功能。
+3. **基础设施**：
+   - 部署 PeerServer（例如：`peerjs --port 9000`）。
+   - 可选 WebSocket 或 STUN/TURN 服务支持。
+
+通过 PeerJS，你可以快速搭建小型实时 P2P 应用，无需复杂的后端开发。结合现有的浏览器 API（如 WebRTC、File API 等），还能实现更加创新的功能。
--- a/src/data/blogs/code-logger/0004-stun.md
+++ b/src/data/blogs/code-logger/0004-stun.md
@@ -0,0 +1,3 @@
+# STUN 服务介绍
+
+STUN (Session Traversal Utilities for NAT) 是一种网络协议，用于帮助客户端发现其公共IP地址和NAT类型，是WebRTC等实时通信技术中实现NAT穿透的关键组件。
--- a/src/data/blogs/logger-life/0001-记录一下kevisual.md
+++ b/src/data/blogs/logger-life/0001-记录一下kevisual.md
@@ -0,0 +1,26 @@
+---
+title: kevisual
+date: 2025-05-24 01:11:00
+---
+# kevisual
+
+可视化
+
+整体而言，是为了实现一个动态助手，方便可执行任务。
+
+包函的模块功能
+
+1. 基础设施，部署前端和后端的功能
+2. 根据ai，调用不同的类型的数据
+3. 动态显示内容
+
+
+## 已经实现的功能模块
+
+动态部署前端，不够简洁化，需要优化
+
+后端功能，只存在部分的部署方案。需要优化
+
+ai功能，还没有
+
+@kevisual/cli 版本 0.0.54
--- a/src/data/blogs/logger-life/0002-esm-sh.md
+++ b/src/data/blogs/logger-life/0002-esm-sh.md
@@ -0,0 +1,6 @@
+---
+title: esm-sh 是一个很好的前端工具
+
+---
+# esm-sh 是一个很好的前端工具
+
--- a/src/lib/player-stream.ts
+++ b/src/lib/player-stream.ts
@@ -0,0 +1,194 @@
+import { EventEmitter } from 'eventemitter3';
+type VideoStreamPlayerOptions = {
+  emitter?: EventEmitter;
+};
+export class VideoStreamPlayer {
+  emitter: EventEmitter;
+  audioContext: AudioContext;
+  audioBuffer: AudioBuffer | null = null;
+  audioQueue: Uint8Array[] = [];
+  decodedBuffers: AudioBuffer[] = []; // 存储已解码的音频缓冲区
+  currentSource: AudioBufferSourceNode | null = null;
+  audioElement: HTMLAudioElement;
+  processing: boolean = false;
+  canPlaying: boolean = false;
+  isPlaying: boolean = false;
+  bufferingThreshold: number = 3; // 预缓冲的音频块数量
+  decodePromises: Promise<void>[] = []; // 跟踪解码进程
+  nextPlayTime: number = 0; // 下一个音频片段的开始时间
+  playStatus: 'paused' | 'playing' | 'buffering' | 'ended' = 'paused';
+
+  constructor(opts?: VideoStreamPlayerOptions) {
+    this.emitter = opts?.emitter || new EventEmitter();
+    this.audioContext = new AudioContext();
+    this.audioElement = new Audio();
+    this.audioElement.autoplay = false;
+    // 确保在页面交互后恢复音频上下文（解决自动播放限制问题）
+    document.addEventListener(
+      'click',
+      () => {
+        if (this.audioContext.state === 'suspended') {
+          this.audioContext.resume();
+        }
+      },
+      { once: true },
+    );
+  }
+
+  // 处理收到的音频数据
+  async appendAudioChunk(chunk: ArrayBuffer | Uint8Array | string) {
+    let audioData: Uint8Array;
+
+    // 处理不同类型的输入数据
+    if (typeof chunk === 'string') {
+      // 如果是base64编码的数据
+      const binary = atob(chunk);
+      audioData = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) {
+        audioData[i] = binary.charCodeAt(i);
+      }
+    } else if (chunk instanceof ArrayBuffer) {
+      audioData = new Uint8Array(chunk);
+    } else {
+      audioData = chunk;
+    }
+
+    // 将音频数据加入队列
+    this.audioQueue.push(audioData);
+
+    // 开始解码音频，不等待前面的解码完成
+    this.decodeAudio();
+
+    // 如果当前没有在播放且可以播放，并且已有足够缓冲则开始播放
+    if (!this.isPlaying && this.canPlaying && this.decodedBuffers.length >= this.bufferingThreshold) {
+      this.startPlaying();
+    }
+  }
+
+  // 异步解码音频，不阻塞主线程
+  async decodeAudio() {
+    if (this.processing || this.audioQueue.length === 0) return;
+
+    this.processing = true;
+    const chunk = this.audioQueue.shift()!;
+
+    try {
+      // 解码音频数据
+      const decodePromise = this.audioContext
+        .decodeAudioData(chunk.buffer.slice(0))
+        .then((audioBuffer) => {
+          this.decodedBuffers.push(audioBuffer);
+
+          // 如果已经可以开始播放但尚未播放，开始播放
+          if (this.canPlaying && !this.isPlaying && this.decodedBuffers.length >= this.bufferingThreshold) {
+            this.startPlaying();
+          }
+
+          const index = this.decodePromises.indexOf(decodePromise as any);
+          if (index > -1) {
+            this.decodePromises.splice(index, 1);
+          }
+        })
+        .catch((error) => {
+          console.error('音频解码错误:', error);
+          const index = this.decodePromises.indexOf(decodePromise as any);
+          if (index > -1) {
+            this.decodePromises.splice(index, 1);
+          }
+        });
+
+      this.decodePromises.push(decodePromise as any);
+    } finally {
+      this.processing = false;
+
+      // 继续处理队列中的下一个
+      if (this.audioQueue.length > 0) {
+        this.decodeAudio();
+      }
+    }
+  }
+
+  // 开始播放
+  startPlaying() {
+    if (this.decodedBuffers.length === 0 || this.isPlaying) return;
+
+    this.isPlaying = true;
+    this.nextPlayTime = this.audioContext.currentTime;
+    this.scheduleNextBuffer();
+    this.emitter.emit('play-start');
+  }
+
+  // 安排播放下一个音频缓冲区
+  scheduleNextBuffer() {
+    if (this.decodedBuffers.length === 0) {
+      // 没有更多缓冲区时，如果队列中也没有待解码的数据，就标记为未播放状态
+      if (this.audioQueue.length === 0 && this.decodePromises.length === 0) {
+        this.isPlaying = false;
+        this.emitter.emit('play-end', true);
+      }
+      return;
+    }
+
+    const audioBuffer = this.decodedBuffers.shift()!;
+    const source = this.audioContext.createBufferSource();
+    this.currentSource = source;
+    source.buffer = audioBuffer;
+    source.connect(this.audioContext.destination);
+
+    // 在确切的时间安排播放，确保无缝连接
+    source.start(this.nextPlayTime);
+    this.nextPlayTime = parseFloat((this.nextPlayTime + audioBuffer.duration).toFixed(4));
+    // console.log('audioBuffer.duration start', audioBuffer.duration, this.nextPlayTime);
+    // 在音频播放结束前安排下一个缓冲区（提前一点安排可以减少间隙）
+    const safetyOffset = Math.min(0.05, audioBuffer.duration / 2); // 至少提前50ms或一半时长
+    setTimeout(() => {
+      this.scheduleNextBuffer();
+    }, (audioBuffer.duration - safetyOffset) * 1000);
+
+    // 发出事件通知
+    this.emitter.emit('playing', { duration: audioBuffer.duration });
+
+    // 如果缓冲区不足，继续解码
+    if (this.decodedBuffers.length < this.bufferingThreshold && this.audioQueue.length > 0 && !this.processing) {
+      this.decodeAudio();
+    }
+  }
+
+  // 处理WebSocket接收到的音频数据
+  handleWebSocketAudio(data: any) {
+    if (data && data.audio) {
+      this.appendAudioChunk(data.audio);
+    }
+  }
+
+  // 停止播放
+  stop() {
+    if (this.currentSource) {
+      try {
+        this.currentSource.stop();
+      } catch (e) {
+        // 可能已经停止，忽略错误
+      }
+      this.currentSource.disconnect();
+      this.currentSource = null;
+    }
+
+    this.audioQueue = [];
+    this.decodedBuffers = [];
+    this.decodePromises = [];
+    this.processing = false;
+    this.isPlaying = false;
+    this.canPlaying = false;
+    this.nextPlayTime = 0;
+    this.emitter.emit('stopped');
+  }
+
+  setCanPlaying(canPlaying = true) {
+    this.canPlaying = canPlaying;
+
+    // 如果设置为可播放，且有足够的解码缓冲区，则开始播放
+    if (canPlaying && !this.isPlaying && this.decodedBuffers.length >= this.bufferingThreshold) {
+      this.startPlaying();
+    }
+  }
+}
--- a/src/lib/player.ts
+++ b/src/lib/player.ts
@@ -0,0 +1,75 @@
+import { EventEmitter } from 'eventemitter3';
+type VideoPlayerOptions = {
+  url?: string;
+  emitter?: EventEmitter;
+};
+export class VideoPlayer {
+  url?: string;
+  isPlaying = false;
+  audio?: HTMLAudioElement;
+  emitter?: EventEmitter;
+  private endedHandler?: () => void;
+  constructor(opts?: VideoPlayerOptions) {
+    this.url = opts?.url;
+    this.emitter = opts?.emitter || new EventEmitter();
+  }
+  init() {
+    if (!this.emitter) {
+      this.emitter = new EventEmitter();
+    }
+    return this.emitter;
+  }
+  play(url?: string) {
+    if (this.isPlaying) {
+      return { code: 400 };
+    }
+    const playUrl = url || this.url;
+    if (!playUrl) {
+      return { code: 404 };
+    }
+    if (playUrl !== this.url) {
+      this.url = playUrl;
+    }
+    // 创建新的Audio对象前，确保清理之前的资源
+    if (this.audio && this.endedHandler) {
+      this.audio.removeEventListener('ended', this.endedHandler);
+    }
+
+    this.audio = new Audio(playUrl);
+    this.audio.play();
+    this.isPlaying = true;
+    this.emitter?.emit('start', { url: playUrl, status: 'start' });
+
+    // 保存引用以便于后续移除
+    this.endedHandler = () => {
+      this.audio = undefined;
+      this.isPlaying = false;
+      this.emitter?.emit('stop', this.url);
+    };
+
+    this.audio.addEventListener('ended', this.endedHandler);
+    return { code: 200 };
+  }
+  stop() {
+    if (this.isPlaying) {
+      // 移除事件监听器
+      if (this.audio && this.endedHandler) {
+        this.audio.removeEventListener('ended', this.endedHandler);
+      }
+      this.audio?.pause();
+      this.audio = undefined;
+      this.isPlaying = false;
+    }
+    this.emitter?.emit('stop', this.url);
+  }
+  onStop(callback: (url: string) => void) {
+    this.emitter?.on('stop', callback);
+    return () => {
+      this.emitter?.off('stop', callback);
+    };
+  }
+  close() {
+    this.emitter?.removeAllListeners();
+    this.emitter = undefined;
+  }
+}
--- a/src/lib/random.ts
+++ b/src/lib/random.ts
@@ -0,0 +1,21 @@
+import { customAlphabet } from 'nanoid';
+
+export const letter = 'abcdefghijklmnopqrstuvwxyz';
+export const number = '0123456789';
+const alphanumeric = `${letter}${number}`;
+export const alphanumericWithDash = `${alphanumeric}-`;
+export const uuid = customAlphabet(letter);
+
+export const nanoid = customAlphabet(alphanumeric, 10);
+
+export const nanoidWithDash = customAlphabet(alphanumericWithDash, 10);
+
+/**
+ * 创建一个随机的 id，以字母开头的字符串
+ * @param number
+ * @returns
+ */
+export const randomId = (number: number) => {
+  const _letter = uuid(1);
+  return `${_letter}${nanoid(number)}`;
+};
--- a/src/modules/basename.ts
+++ b/src/modules/basename.ts
@@ -0,0 +1,4 @@
+// @ts-ignore
+export const basename = BASE_NAME;
+
+console.log(basename);
--- a/src/modules/query.ts
+++ b/src/modules/query.ts
@@ -1,3 +1,5 @@
 import { Query } from '@kevisual/query';

 export const query = new Query();
+
+export const clientQuery = new Query({ url: '/client/router' });
--- a/src/modules/toast/Provider.tsx
+++ b/src/modules/toast/Provider.tsx
@@ -0,0 +1,13 @@
+import { ToastContainer } from 'react-toastify';
+
+type ToastProviderProps = {
+  children?: React.ReactNode;
+};
+export const ToastProvider = ({ children }: ToastProviderProps) => {
+  return (
+    <>
+      {children}
+      <ToastContainer />
+    </>
+  );
+};
--- a/src/modules/toast/ToastLogin.tsx
+++ b/src/modules/toast/ToastLogin.tsx
@@ -0,0 +1,52 @@
+import { toast } from 'react-toastify';
+// Custom message component
+const LoginMessage = (props: ToastLoginProps) => {
+  const lng = props.lng || 'zh';
+  const isZH = lng === 'zh';
+  const en = {
+    'Please login': 'Please login',
+    'Click here to go to the login page.': 'Click here to go to the login page.',
+  };
+  const zh = {
+    'Please login': '请登录',
+    'Click here to go to the login page.': '点击这里前往登录页面',
+  };
+  const t = isZH ? zh : en;
+  const handleClick = () => {
+    const currentUrl = window.location.href;
+    const redirect = encodeURIComponent(props?.redirectUrl || currentUrl);
+    const loginUrl = props?.loginUrl || '/user/login/';
+    const newUrl = location.origin + loginUrl + '?redirect=' + redirect;
+    window.open(newUrl, '_self');
+  };
+
+  return (
+    <div className='msg-container' onClick={handleClick} style={{ cursor: 'pointer' }}>
+      <p className='msg-title'>{t['Please login']}</p>
+      <p className='msg-description'>{t['Click here to go to the login page.']}</p>
+    </div>
+  );
+};
+type ToastLoginProps = {
+  /**
+   * 登录页面地址, /user/login
+   */
+  loginUrl?: string;
+  /**
+   * 登录成功后跳转的地址, 默认是当前页面
+   */
+  redirectUrl?: string;
+  lng?: 'en' | 'zh';
+};
+/**
+ * 登录提示
+ * @param props
+ * @example
+ *      toastLogin({
+ *        loginUrl: '/user/login/',
+ *        redirectUrl: window.location.href,
+ *      });
+ */
+export const toastLogin = (props: ToastLoginProps = {}) => {
+  toast.info(<LoginMessage {...props} />);
+};
--- a/src/pages/blogs/articles/[...id].astro
+++ b/src/pages/blogs/articles/[...id].astro
@@ -0,0 +1,23 @@
+---
+import { getCollection, render } from 'astro:content';
+import Main from '@/astro/layouts/mdx/main.astro';
+// 1. 为每个集合条目生成一个新路径
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map((post) => ({
+    params: { id: post.id },
+    props: { post },  
+  }));
+}
+type Post = {
+  data: { title: string };
+};
+// 2. 对于你的模板，你可以直接从 prop 获取条目
+const { post } = Astro.props as { post: Post };
+const { Content } = await render(post);
+---
+
+<Main>
+  <h1 slot={'header'}>{post.data.title}</h1>
+  <Content />
+</Main>
--- a/src/pages/blogs/articles/index.astro
+++ b/src/pages/blogs/articles/index.astro
@@ -0,0 +1,22 @@
+---
+import { getCollection } from 'astro:content';
+const posts = await getCollection('blog');
+console.log('post', posts);
+import { basename } from '@/modules/basename';
+import Blank from '@/components/html/blank.astro';
+  
+---
+
+<Blank>
+  <h1>My posts</h1>
+  <ul>
+    {
+      posts.map((post) => (
+        <li>
+          {/* <a href={`${basename}/demo/${post.id}`}>{post.data.title}</a> */}
+          <a href={`/blogs/articles/code-logger/${post.id}`}>{post.data.title}</a>
+        </li>
+      ))
+    }
+  </ul>
+</Blank>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,16 +1,8 @@
 ---
 import '../styles/global.css';
-import READ from '@/data/README.md'
-
+import Blank from '@/components/html/blank.astro';
 ---

-<html lang='zh-CN'>
-  <head>
-    <meta charset='UTF-8' />
-    <title>My Homepage</title>
-  </head>
-  <body>
-    合并一些功能模块，ai相关的，导航，文字转语音，语音转文字，对话等
-    <READ />
-  </body>
-</html>
+<Blank>
+  <div>sdf</div>
+</Blank>
--- a/src/query/index.ts
+++ b/src/query/index.ts
@@ -0,0 +1,7 @@
+import { Query } from '@kevisual/query';
+
+export const query = new Query();
+
+export const clientQuery = new Query({ url: '/client/router' });
+
+export { QueryUtil } from '@kevisual/router/define';
--- a/src/query/query-app/defines/index.ts
+++ b/src/query/query-app/defines/index.ts
@@ -0,0 +1,3 @@
+import { appDefine } from './user-app-list';
+import { userAppDefine } from './user-app';
+export { appDefine, userAppDefine };
--- a/src/query/query-app/defines/user-app-list.ts
+++ b/src/query/query-app/defines/user-app-list.ts
@@ -0,0 +1,62 @@
+import { QueryUtil } from '@/query/index.ts';
+
+export const appDefine = QueryUtil.create({
+  getApp: {
+    path: 'app',
+    key: 'get',
+    description: '获取应用信息',
+  },
+
+  updateApp: {
+    path: 'app',
+    key: 'update',
+    description: '更新应用信息',
+  },
+
+  deleteApp: {
+    path: 'app',
+    key: 'delete',
+    description: '删除应用信息',
+  },
+
+  listApps: {
+    path: 'app',
+    key: 'list',
+    description: '列出所有应用信息',
+  },
+
+  canUploadFiles: {
+    path: 'app',
+    key: 'canUploadFiles',
+    description: '检查是否可以上传文件',
+  },
+
+  uploadFiles: {
+    path: 'app',
+    key: 'uploadFiles',
+    description: '上传文件',
+  },
+
+  publishApp: {
+    path: 'app',
+    key: 'publish',
+    description: '发布应用',
+  },
+
+  getMinioList: {
+    path: 'app',
+    key: 'get-minio-list',
+    description: '获取 MinIO 文件列表',
+  },
+
+  detectVersionList: {
+    path: 'app',
+    key: 'detectVersionList',
+    description: '检测版本列表并同步 MinIO 数据',
+  },
+  publicList: {
+    path: 'app',
+    key: 'public-list',
+    description: '获取公开应用列表',
+  },
+});
--- a/src/query/query-app/defines/user-app.ts
+++ b/src/query/query-app/defines/user-app.ts
@@ -0,0 +1,33 @@
+import { QueryUtil } from '@/query/index.ts';
+
+export const userAppDefine = QueryUtil.create({
+  listUserApps: {
+    path: 'user-app',
+    key: 'list',
+    description: '列出当前用户的所有应用（不包含 data 字段）',
+  },
+
+  getUserApp: {
+    path: 'user-app',
+    key: 'get',
+    description: '获取用户应用信息，可以指定 id 或 key',
+  },
+
+  updateUserApp: {
+    path: 'user-app',
+    key: 'update',
+    description: '更新或创建用户应用',
+  },
+
+  deleteUserApp: {
+    path: 'user-app',
+    key: 'delete',
+    description: '删除用户应用及关联数据',
+  },
+
+  testUserApp: {
+    path: 'user-app',
+    key: 'test',
+    description: '对 user-app 的数据进行测试，获取版本信息',
+  },
+});
--- a/src/query/query-app/query-app-define.ts
+++ b/src/query/query-app/query-app-define.ts
@@ -0,0 +1 @@
+export * from './defines/index.ts';
--- a/src/query/query-app/query-app.ts
+++ b/src/query/query-app/query-app.ts
@@ -0,0 +1,18 @@
+import { appDefine, userAppDefine } from './defines/index.ts';
+
+import { BaseQuery, DataOpts, Query } from '@kevisual/query/query';
+
+export { appDefine, userAppDefine };
+
+export class QueryApp extends BaseQuery {
+  appDefine = appDefine;
+  userAppDefine = userAppDefine;
+  constructor(opts?: { query: Query }) {
+    super(opts!);
+    this.appDefine.query = this.query;
+    this.userAppDefine.query = this.query;
+  }
+  getList(data: any, opts?: DataOpts) {
+    return this.appDefine.queryChain('listApps').post(data, opts);
+  }
+}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,5 @@
@import 'tailwindcss';
@import "tw-animate-css";
-
@custom-variant dark (&:is(.dark *));

@theme inline {
--- a/src/styles/styles/global.css
+++ b/src/styles/styles/global.css
@@ -0,0 +1,119 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/src/styles/styles/styles/global.css
+++ b/src/styles/styles/styles/global.css
@@ -0,0 +1,119 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -0,0 +1,78 @@
+@import 'tailwindcss';
+
+@theme {
+  --color-primary: #ffc107;
+  --color-secondary: #ffa000;
+  --color-text-primary: #000000;
+  --color-text-secondary: #000000;
+  --color-success: #28a745;
+  --color-scrollbar-thumb: #999999;
+  --color-scrollbar-track: rgba(0, 0, 0, 0.1);
+  --color-scrollbar-thumb-hover: #666666;
+  --scrollbar-color: #ffc107; /* 滚动条颜色 */
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+}
+/* font-family */
+@utility font-family-mon {
+  font-family: 'Montserrat', sans-serif;
+}
+@utility font-family-rob {
+  font-family: 'Roboto', sans-serif;
+}
+@utility font-family-int {
+  font-family: 'Inter', sans-serif;
+}
+@utility font-family-orb {
+  font-family: 'Orbitron', sans-serif;
+}
+@utility font-family-din {
+  font-family: 'DIN', sans-serif;
+}
+
+@utility flex-row-center {
+  @apply flex flex-row items-center justify-center;
+}
+@utility flex-col-center {
+  @apply flex flex-col items-center justify-center;
+}
+
+@utility scrollbar {
+  overflow: auto;
+  /* 整个滚动条 */
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-track);
+  }
+  /* 滚动条有滑块的轨道部分 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+    border-radius: 1px;
+  }
+
+  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: var(--color-scrollbar-thumb);
+    border-radius: 5px;
+  }
+
+  /* 滚动条滑块hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-thumb-hover);
+  }
+
+  /* 同时有垂直和水平滚动条时交汇的部分 */
+  &::-webkit-scrollbar-corner {
+    display: block; /* 修复交汇时出现的白块 */
+  }
+}