@lark-apaas/coding-templates 0.1.2 → 0.1.4

package/template-nextjs-static/scripts/build.sh

@@ -1,36 +0,0 @@
-#!/bin/bash
-set -e
-
-ROOT="$(cd "$(dirname "$0")/.." && pwd)"
-OUTPUT="$ROOT/dist/output"
-OUTPUT_STATIC="$ROOT/dist/output_static"
-OUTPUT_RESOURCE="$ROOT/dist/output_resource"
-
-# 清理
-rm -rf "$ROOT/dist"
-
-# 1. Next.js 构建 → out/
-npx next build
-
-# 2. HTML → dist/output/
-mkdir -p "$OUTPUT"
-find "$ROOT/out" -maxdepth 1 -name '*.html' -exec cp {} "$OUTPUT/" \;
-# 复制子目录（排除 _next）
-find "$ROOT/out" -mindepth 1 -maxdepth 1 -type d -not -name '_next' \
-  -exec cp -r {} "$OUTPUT/" \;
-
-# 生成 routes.json
-echo '{ "version": 1, "type": "nextjs-static", "fallback": "404.html" }' > "$OUTPUT/routes.json"
-
-# 3. _next/static/ → dist/output_resource/（JS/CSS/字体，上传到 CDN）
-if [ -d "$ROOT/out/_next/static" ]; then
-  mkdir -p "$OUTPUT_RESOURCE/_next"
-  cp -r "$ROOT/out/_next/static" "$OUTPUT_RESOURCE/_next/"
-fi
-
-# 4. 私有资源 → dist/output_static/（如有，按需补充）
-
-echo "Build complete"
-echo "  HTML     → dist/output/"
-[ -d "$OUTPUT_RESOURCE" ] && echo "  Resource → dist/output_resource/"
-[ -d "$OUTPUT_STATIC" ] && echo "  Static   → dist/output_static/"

package/template-nextjs-static/src/components/theme-provider.tsx

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-
-export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}

package/template-nextjs-static/src/components/ui/README.md

@@ -1,134 +0,0 @@
-# shadcn/ui 组件开发指南
-
-## 核心原则
-
-- 组件位置：`/client/src/components/ui/`
-- 图标库：必须使用 `lucide-react`，禁用 Emoji
-- 查阅源码实现：直接读取组件源码了解最新组件实现
-- 交互系统：Button、Badge 使用 elevate 遮罩系统处理 hover/active 状态（通过 `::after` 伪元素叠加 `--elevate-1` / `--elevate-2`）
-
-## 关键组件规范
-
-#### 1. Button 组件
-
-**导入路径**：`import { Button } from '@/components/ui/button'`
-
-**Props**：
-- `variant`: `"link" | "default" | "destructive" | "outline" | "secondary" | "ghost"` - 按钮样式变体
-
-```tsx
-// ✅ 使用变体
-<Button variant="secondary">标准按钮</Button>
-
-// ✅ 自定义颜色时必须配对前景色
-<Button className="bg-primary text-primary-foreground">自定义按钮</Button>
-```
-
-#### 2. Badge 组件
-
-**导入路径**：`import { Badge } from '@/components/ui/badge'`
-
-**Props**：
-- `variant`: `"default" | "destructive" | "outline" | "secondary"` - 样式变体
-
-```tsx
-// ✅ 使用变体
-<Badge>默认</Badge>
-<Badge variant="secondary">次要</Badge>
-<Badge variant="outline">边框</Badge>
-<Badge variant="destructive">危险</Badge>
-```
-
-#### 3. Alert 组件
-
-**导入路径**：`import { Alert, AlertTitle, AlertDescription, AlertAction } from '@/components/ui/alert'`
-
-**Props**：
-- `variant`: `"default" | "destructive" | "success" | "warning"` - 样式变体
-
-```tsx
-// ✅ default / destructive / success / warning 四种变体
-<Alert variant="success">
-  <CheckCircle className="size-4" />
-  <AlertTitle>操作成功</AlertTitle>
-  <AlertDescription>您的更改已保存</AlertDescription>
-</Alert>
-
-<Alert variant="warning">
-  <AlertTriangle className="size-4" />
-  <AlertTitle>警告</AlertTitle>
-  <AlertDescription>请注意检查</AlertDescription>
-</Alert>
-
-```
-
-#### 4. Empty 组件
-
-**导入路径**：`import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@/components/ui/empty'`
-
-**子组件 Props**：
-- `EmptyMedia` 组件的 `variant`: `"default" | "icon"` - 媒体展示方式
-
-```tsx
-// 标准结构：EmptyHeader 包含 EmptyMedia + EmptyTitle + EmptyDescription
-<Empty>
-  <EmptyHeader>
-    <EmptyMedia variant="icon">
-      <SearchIcon className="size-6" />
-    </EmptyMedia>
-    <EmptyTitle>暂无数据</EmptyTitle>
-    <EmptyDescription>当前没有找到相关内容</EmptyDescription>
-  </EmptyHeader>
-  <EmptyContent>
-    <Button>添加数据</Button>
-  </EmptyContent>
-</Empty>
-```
-
-#### 5. Card Padding 系统
-
-**导入路径**：`import { CardHeader, CardContent, CardFooter } from '@/components/ui/card'`
-
-- `CardHeader`: `p-6` (24px 全方向)
-- `CardContent`: `p-6 pt-0` (与 header 无缝衔接)
-- `CardFooter`: `p-6 pt-0` (与 content 无缝衔接)
-
-#### 6. Dialog 组件
-
-**导入路径**：`import { Dialog, DialogContent } from '@/components/ui/dialog'`
-
-Dialog 默认提供了右上角的close能力，同时也提供了自定义关闭按钮的能力，即通过设置showCloseButton为false来关闭默认的关闭按钮。所以当默认存在close时，禁止在内容区域提供自定义的关闭按钮。
-
-#### 7. Image 组件
-
-**导入路径**：`import { Image } from '@/components/ui/image'`
-
-**Props**：支持原生 `<img>` 标签所有属性。
-
-```typescript
-interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> 
-```
-
-**使用规范**：
-
-1. **响应式图片场景**：当图片尺寸需要根据视口宽度变化时，必须设置 `sizes` 属性
-2. **固定尺寸图片场景**：当图片有固定尺寸时，必须设置 `width` 属性（number 类型）
-3. **必须提供有意义的 `alt` 属性**
-
-```tsx
-// ✅ 响应式图片
-<Image
-  src="/path/to/image.jpg"
-  alt="描述文字"
-  sizes="(max-width: 768px) 100vw, 50vw"
-/>
-
-// ✅ 固定尺寸图片（width/height 使用 number）
-<Image
-  src="/path/to/image.jpg"
-  alt="描述文字"
-  width={300}
-  height={200}
-/>
-
-```

package/template-nextjs-static/src/components/ui/accordion.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/20 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none enabled:hover:underline focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/template-nextjs-static/src/components/ui/alert-dialog.tsx

@@ -1,157 +0,0 @@
-"use client"
-
-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-sm:max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 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,
-}

package/template-nextjs-static/src/components/ui/alert.tsx

@@ -1,71 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-        // 新增语义化 success/warning variant
-        success:
-          "bg-success text-success-foreground border-success/50 [&>svg]:text-success-foreground *:data-[slot=alert-description]:text-success-foreground/90",
-        warning:
-          "bg-warning text-warning-foreground border-warning/50 [&>svg]:text-warning-foreground *:data-[slot=alert-description]:text-warning-foreground/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription }

package/template-nextjs-static/src/components/ui/aspect-ratio.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-function AspectRatio({
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
-
-export { AspectRatio }

package/template-nextjs-static/src/components/ui/avatar.tsx

@@ -1,53 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }

package/template-nextjs-static/src/components/ui/badge.tsx

@@ -1,42 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  // Whitespace-nowrap: Badges should never wrap.
-  // hover-elevate: adds subtle dark overlay on hover for interactive feedback
-  "whitespace-nowrap inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold hover-elevate",
-  {
-    variants: {
-      variant: {
-        default:
-          // Primary badge with subtle shadow for elevation
-          "border-transparent bg-primary text-primary-foreground shadow-xs",
-        secondary:
-          // Subtle filled badge for secondary information
-          "border-transparent bg-secondary text-secondary-foreground",
-        destructive:
-          // Error/danger state with matching shadow
-          "border-transparent bg-destructive text-destructive-foreground shadow-xs",
-        // Outline uses badge-outline variable to blend with parent background
-        outline: "border [border-color:var(--badge-outline)] shadow-xs",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants }

package/template-nextjs-static/src/components/ui/breadcrumb.tsx

@@ -1,109 +0,0 @@
-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,
-}