init 新范式

2025-05-24 09:11:30 +08:00 · 2025-05-24 09:11:30 +08:00 · 7124382c5c
commit 7124382c5c
parent 3057ca121c
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'>
+<Blank>
-  <head>
+  <div>sdf</div>
-    <meta charset='UTF-8' />
+</Blank>
    <title>My Homepage</title>
  </head>
  <body>
    合并一些功能模块，ai相关的，导航，文字转语音，语音转文字，对话等
    <READ />
  </body>
 </html>
--- 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; /* 修复交汇时出现的白块 */
  }
 }
		`@ -0,0 +1,3 @@`
							`# STUN 服务介绍`

							`STUN (Session Traversal Utilities for NAT) 是一种网络协议，用于帮助客户端发现其公共IP地址和NAT类型，是WebRTC等实时通信技术中实现NAT穿透的关键组件。`