fix: resolve build issues and finalize fixes

Complete Toaster and Skeleton components, add loading.tsx
Update development docs for changes and progress.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

components/ui/skeleton.tsx

@@ -1,15 +1,7 @@
+import * as React from "react"
 import { cn } from "@/lib/utils"
 
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
+export function Skeleton(props: React.HTMLAttributes<HTMLDivElement>) {
+  const { className, ...rest } = props
+  return <div className={cn("animate-pulse rounded-md bg-muted/40", className)} {...rest} />
 }
-
-export { Skeleton }

components/ui/toast.tsx

@@ -4,7 +4,6 @@ import * as React from "react"
 import * as ToastPrimitives from "@radix-ui/react-toast"
 import { cva, type VariantProps } from "class-variance-authority"
 import { X } from 'lucide-react'
-
 import { cn } from "@/lib/utils"
 
 const ToastProvider = ToastPrimitives.Provider
@@ -42,9 +41,9 @@ const toastVariants = cva(
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
-})
+>(({ className, variant, ...props }, ref) => (
+  <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
+))
 Toast.displayName = ToastPrimitives.Root.displayName
 
 const ToastAction = React.forwardRef<
@@ -96,13 +95,10 @@ const ToastDescription = React.forwardRef<
 ))
 ToastDescription.displayName = ToastPrimitives.Description.displayName
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+export type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+export type ToastActionElement = React.ReactElement<typeof ToastAction>
 
 export {
-  type ToastProps,
-  type ToastActionElement,
   ToastProvider,
   ToastViewport,
   Toast,
@@ -111,11 +107,3 @@ export {
   ToastClose,
   ToastAction,
 }
-
-export function Toaster() {
-  return (
-    <ToastProvider>
-      <ToastViewport />
-    </ToastProvider>
-  )
-}

components/ui/toaster.tsx

@@ -1,7 +1,9 @@
 "use client"
 
+import { useEffect } from "react"
 import {
   Toast,
+  ToastAction,
   ToastClose,
   ToastDescription,
   ToastProvider,
@@ -13,6 +15,14 @@ import { useToast } from "@/components/ui/use-toast"
 export function Toaster() {
   const { toasts } = useToast()
 
+  // 可选：在开发环境输出调试信息
+  useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      // eslint-disable-next-line no-console
+      console.debug("[Toaster] toasts", toasts)
+    }
+  }, [toasts])
+
   return (
     <ToastProvider>
       {toasts.map(function ({ id, title, description, action, ...props }) {
@@ -32,4 +42,4 @@ export function Toaster() {
   )
 }
 
-export default Toaster
+export { ToastAction }