@coze-arch/cli 0.0.1-alpha.de5a13 → 0.0.1-alpha.deaedf

package/lib/__templates__/taro/server/package.json

@@ -16,8 +16,10 @@
     "@nestjs/common": "^10.4.15",
     "@nestjs/core": "^10.4.15",
     "@nestjs/platform-express": "^10.4.15",
+    "@supabase/supabase-js": "2.95.3",
     "better-sqlite3": "^11.9.1",
-    "coze-coding-dev-sdk": "^0.7.15",
+    "coze-coding-dev-sdk": "^0.7.16",
+    "dotenv": "^17.2.3",
     "drizzle-kit": "^0.31.8",
     "drizzle-orm": "^0.45.1",
     "drizzle-zod": "^0.8.3",

package/lib/__templates__/taro/src/app.css

@@ -1,63 +1,156 @@
-@import url('tailwindcss');
-
-/*
- * H5 端 rem 适配：与小程序 rpx 缩放一致
- * 375px 屏幕：1rem = 16px，小程序 32rpx = 16px
- */
-html {
-  font-size: 4vw !important;
-}
+/* stylelint-disable selector-type-no-unknown */
+/* stylelint-disable at-rule-no-unknown */
+/* stylelint-disable number-max-precision */
+@import url('weapp-tailwindcss');
 
 /* 小程序页面容器高度设置，确保垂直居中生效 */
-/* stylelint-disable-next-line selector-type-no-unknown */
 page {
   height: 100%;
 }
 
-/* H5 端组件默认样式修复 */
-taro-view-core {
-  display: block;
-}
-
-taro-text-core {
-  display: inline;
+:root,
+page,
+root-portal {
+  --background: lab(100% 0 0);
+  --foreground: lab(2.75381% 0 0);
+  --card: lab(100% 0 0);
+  --card-foreground: lab(2.75381% 0 0);
+  --popover: lab(100% 0 0);
+  --popover-foreground: lab(2.75381% 0 0);
+  --primary: lab(7.78201% -0.0000149012 0);
+  --primary-foreground: lab(98.26% 0 0);
+  --secondary: lab(96.52% -0.0000298023 0.0000119209);
+  --secondary-foreground: lab(7.78201% -0.0000149012 0);
+  --muted: lab(96.52% -0.0000298023 0.0000119209);
+  --muted-foreground: lab(48.496% 0 0);
+  --accent: lab(96.52% -0.0000298023 0.0000119209);
+  --accent-foreground: lab(7.78201% -0.0000149012 0);
+  --destructive: lab(48.4493% 77.4328 61.5452);
+  --destructive-foreground: lab(96.4152% 3.22586 1.14673);
+  --border: lab(90.952% 0 -0.0000119209);
+  --input: lab(90.952% 0 -0.0000119209);
+  --ring: lab(66.128% -0.0000298023 0.0000119209);
+  --sidebar: lab(98.26% 0 0);
+  --sidebar-foreground: lab(2.75381% 0 0);
+  --sidebar-primary: lab(7.78201% -0.0000149012 0);
+  --sidebar-primary-foreground: lab(98.26% 0 0);
+  --sidebar-accent: lab(96.52% -0.0000298023 0.0000119209);
+  --sidebar-accent-foreground: lab(7.78201% -0.0000149012 0);
+  --sidebar-border: lab(90.952% 0 -0.0000119209);
+  --sidebar-ring: lab(66.128% -0.0000298023 0.0000119209);
+  --surface: lab(97.68% -0.0000298023 0.0000119209);
+  --code: var(--surface);
+  --code-highlight: lab(95.36% 0 0);
+  --code-number: lab(48.96% 0 0);
+  --selection: lab(2.75381% 0 0);
+  --selection-foreground: lab(100% 0 0);
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-color: initial;
+  --tw-shadow-alpha: 100%;
+  --tw-inset-shadow: 0 0 #0000;
+  --tw-inset-shadow-color: initial;
+  --tw-inset-shadow-alpha: 100%;
+  --tw-ring-color: initial;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-inset-ring-color: initial;
+  --tw-inset-ring-shadow: 0 0 #0000;
+  --tw-ring-inset: initial;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-offset-shadow: 0 0 #0000;
 }
 
-taro-input-core {
-  display: block;
-  width: 100%;
+.dark {
+  --background: lab(2.75381% 0 0);
+  --foreground: lab(98.26% 0 0);
+  --card: lab(7.78201% -0.0000149012 0);
+  --card-foreground: lab(98.26% 0 0);
+  --popover: lab(7.78201% -0.0000149012 0);
+  --popover-foreground: lab(98.26% 0 0);
+  --primary: lab(90.952% 0 -0.0000119209);
+  --primary-foreground: lab(7.78201% -0.0000149012 0);
+  --secondary: lab(15.204% 0 -0.00000596046);
+  --secondary-foreground: lab(98.26% 0 0);
+  --muted: lab(15.204% 0 -0.00000596046);
+  --muted-foreground: lab(66.128% -0.0000298023 0.0000119209);
+  --accent: lab(27.036% 0 0);
+  --accent-foreground: lab(98.26% 0 0);
+  --destructive: lab(63.7053% 60.745 31.3109);
+  --destructive-foreground: lab(49.0747% 69.3434 49.6251);
+  --border: lab(100% 0 0 / 10%);
+  --input: lab(100% 0 0 / 15%);
+  --ring: lab(48.496% 0 0);
+  --sidebar: lab(7.78201% -0.0000149012 0);
+  --sidebar-foreground: lab(98.26% 0 0);
+  --sidebar-primary: lab(36.9089% 35.0961 -85.6872);
+  --sidebar-primary-foreground: lab(98.26% 0 0);
+  --sidebar-accent: lab(15.204% 0 -0.00000596046);
+  --sidebar-accent-foreground: lab(98.26% 0 0);
+  --sidebar-border: lab(100% 0 0 / 10%);
+  --sidebar-ring: lab(34.924% 0 0);
+  --surface: lab(7.22637% -0.0000149012 0);
+  --surface-foreground: lab(66.128% -0.0000298023 0.0000119209);
+  --code: var(--surface);
+  --code-highlight: lab(15.32% 0 0);
+  --code-number: lab(67.52% -0.0000298023 0);
+  --selection: lab(90.952% 0 -0.0000119209);
+  --selection-foreground: lab(7.78201% -0.0000149012 0);
 }
 
-taro-input-core input {
-  width: 100%;
-  background: transparent;
-  border: none;
-  outline: none;
-}
-
-/* 全局按钮样式重置 */
-taro-button-core,
-button {
-  margin: 0 !important;
-  padding: 0 !important;
-  line-height: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+@custom-variant dark (&:is(.dark *));
 
-taro-button-core::after,
-button::after {
-  border: none;
+@theme inline {
+  --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);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+  --color-code: var(--code);
+  --radius-full: 9999px;
 }
 
-/* Vite 错误覆盖层无法选择文本的问题 */
-vite-error-overlay {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-user-select: text !important;
+page,
+view,
+text,
+button,
+input,
+textarea,
+label,
+scroll-view,
+image {
+  border-color: var(--border);
 }
 
-vite-error-overlay::part(window) {
-  max-width: 90vw;
-  padding: 10px;
+::selection {
+  background-color: var(--selection);
+  color: var(--selection-foreground);
 }

package/lib/__templates__/taro/src/app.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import '@/app.css';
+import { Preset } from './presets';
+
+const App = ({ children }: PropsWithChildren) => {
+  return <Preset>{children}</Preset>;
+};
+
+export default App;

package/lib/__templates__/taro/src/components/ui/accordion.tsx

@@ -0,0 +1,159 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { ChevronsUpDown } from "lucide-react-taro"
+import { cn } from "@/lib/utils"
+
+const AccordionContext = React.createContext<{
+    value?: string | string[]
+    onValueChange?: (value: string | string[]) => void
+    type?: "single" | "multiple"
+} | null>(null)
+
+const Accordion = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & {
+        type?: "single" | "multiple"
+        value?: string | string[]
+        defaultValue?: string | string[]
+        onValueChange?: (value: string | string[]) => void
+        collapsible?: boolean
+    }
+>(({ className, type = "single", value: valueProp, defaultValue, onValueChange, collapsible = false, ...props }, ref) => {
+    const [valueState, setValueState] = React.useState<string | string[]>(
+        defaultValue || (type === "multiple" ? [] : "")
+    )
+    const value = valueProp !== undefined ? valueProp : valueState
+
+    const handleValueChange = (itemValue: string) => {
+        let newValue: string | string[]
+        if (type === "multiple") {
+            const current = Array.isArray(value) ? value : []
+            if (current.includes(itemValue)) {
+                newValue = current.filter(v => v !== itemValue)
+            } else {
+                newValue = [...current, itemValue]
+            }
+        } else {
+            if (value === itemValue && collapsible) {
+                newValue = ""
+            } else {
+                newValue = itemValue
+            }
+        }
+
+        if (valueProp === undefined) {
+            setValueState(newValue)
+        }
+        onValueChange?.(newValue)
+    }
+
+    return (
+        <AccordionContext.Provider value={{ value, onValueChange: handleValueChange, type }}>
+            <View ref={ref} className={className} {...props} />
+        </AccordionContext.Provider>
+    )
+})
+Accordion.displayName = "Accordion"
+
+const AccordionItem = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & { value: string }
+>(({ className, value, ...props }, ref) => (
+    <View ref={ref} className={cn("border-b", className)} {...props} data-value={value} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View>
+>(({ className, children, ...props }, ref) => {
+    // Need to find the parent AccordionItem's value. 
+    // In React Native/Taro we can't easily traverse up DOM. 
+    // So we assume AccordionItem passes context or we need to explicitly pass value?
+    // Radix does this via context nesting. 
+    // Let's create a context for Item.
+    return (
+        <AccordionItemContext.Consumer>
+            {(itemValue) => <AccordionTriggerInternal itemValue={itemValue} className={className} ref={ref} {...props}>{children}</AccordionTriggerInternal>}
+        </AccordionItemContext.Consumer>
+    )
+})
+AccordionTrigger.displayName = "AccordionTrigger"
+
+// Helper context for Item
+const AccordionItemContext = React.createContext<string>("")
+
+// Update AccordionItem to provide context
+const AccordionItemWithContext = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & { value: string }
+>(({ className, value, children, ...props }, ref) => (
+    <AccordionItemContext.Provider value={value}>
+        <View ref={ref} className={cn("border-b", className)} {...props}>
+            {children}
+        </View>
+    </AccordionItemContext.Provider>
+))
+AccordionItemWithContext.displayName = "AccordionItem"
+
+
+const AccordionTriggerInternal = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & { itemValue: string }
+>(({ className, children, itemValue, ...props }, ref) => {
+    const context = React.useContext(AccordionContext)
+    const isOpen = Array.isArray(context?.value) 
+        ? context?.value.includes(itemValue)
+        : context?.value === itemValue
+
+    return (
+        <View className="flex">
+            <View
+              ref={ref}
+              className={cn(
+                    "flex flex-1 items-center justify-between py-4 font-medium transition-all",
+                    className
+                )}
+              onClick={() => context?.onValueChange?.(itemValue)}
+              {...props}
+            >
+                {children}
+                <ChevronsUpDown className={cn("shrink-0 transition-transform duration-200", isOpen && "rotate-180")} size={16} />
+            </View>
+        </View>
+    )
+})
+
+const AccordionContent = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View>
+>(({ className, children, ...props }, ref) => (
+    <AccordionItemContext.Consumer>
+        {(itemValue) => <AccordionContentInternal itemValue={itemValue} className={className} ref={ref} {...props}>{children}</AccordionContentInternal>}
+    </AccordionItemContext.Consumer>
+))
+AccordionContent.displayName = "AccordionContent"
+
+const AccordionContentInternal = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & { itemValue: string }
+>(({ className, children, itemValue, ...props }, ref) => {
+    const context = React.useContext(AccordionContext)
+    const isOpen = Array.isArray(context?.value) 
+        ? context?.value.includes(itemValue)
+        : context?.value === itemValue
+
+    if (!isOpen) return null
+
+    return (
+        <View
+          ref={ref}
+          className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+          {...props}
+        >
+            <View className={cn("pb-4 pt-0", className)}>{children}</View>
+        </View>
+    )
+})
+
+export { Accordion, AccordionItemWithContext as AccordionItem, AccordionTrigger, AccordionContent }

package/lib/__templates__/taro/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,260 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import { Portal } from "@/components/ui/portal"
+import { useKeyboardOffset } from "@/lib/hooks/use-keyboard-offset"
+
+const AlertDialogContext = React.createContext<{
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+} | null>(null)
+
+const usePresence = (open: boolean | undefined, durationMs: number) => {
+  const [present, setPresent] = React.useState(!!open)
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  React.useEffect(() => {
+    if (open) {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+      setPresent(true)
+      return
+    }
+
+    timeoutRef.current = setTimeout(() => setPresent(false), durationMs)
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+  }, [open, durationMs])
+
+  return present
+}
+
+const AlertDialog = ({ 
+    children, 
+    open: openProp, 
+    defaultOpen = false, 
+    onOpenChange 
+}: { 
+    children: React.ReactNode, 
+    open?: boolean, 
+    defaultOpen?: boolean, 
+    onOpenChange?: (open: boolean) => void 
+}) => {
+    const [openState, setOpenState] = React.useState(defaultOpen || false)
+    const open = openProp !== undefined ? openProp : openState
+    
+    const handleOpenChange = (newOpen: boolean) => {
+        if (openProp === undefined) {
+            setOpenState(newOpen)
+        }
+        onOpenChange?.(newOpen)
+    }
+
+    return (
+        <AlertDialogContext.Provider value={{ open, onOpenChange: handleOpenChange }}>
+            {children}
+        </AlertDialogContext.Provider>
+    )
+}
+
+const AlertDialogTrigger = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View>
+>(({ className, children, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext)
+    return (
+        <View
+          ref={ref}
+          className={className}
+          onClick={(e) => {
+                e.stopPropagation()
+                context?.onOpenChange?.(true)
+            }}
+          {...props}
+        >
+            {children}
+        </View>
+    )
+})
+AlertDialogTrigger.displayName = "AlertDialogTrigger"
+
+const AlertDialogPortal = ({ children }) => {
+    const context = React.useContext(AlertDialogContext)
+    const present = usePresence(context?.open, 200)
+    if (!present) return null
+    return <Portal>{children}</Portal>
+}
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext)
+    const state = context?.open ? "open" : "closed"
+    return (
+        <View
+          ref={ref}
+          data-state={state}
+          className={cn(
+            "fixed inset-0 isolate z-50 bg-black bg-opacity-10 transition-opacity duration-100 supports-[backdrop-filter]:backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+            )}
+          onClick={(e) => {
+                e.stopPropagation()
+                // Unlike Dialog, AlertDialog typically forces explicit action/cancel. 
+                // But user might want it to close on overlay click.
+                // Standard shadcn/radix alert dialog usually does NOT close on overlay click? 
+                // Radix Alert Dialog does NOT close on overlay click by default.
+                // We will leave it as is (no close on click) or optional?
+                // For now, let's follow standard pattern: it blocks interaction.
+            }}
+          {...props}
+        />
+    )
+})
+AlertDialogOverlay.displayName = "AlertDialogOverlay"
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, children, style, ...props }, ref) => {
+  const context = React.useContext(AlertDialogContext)
+  const offset = useKeyboardOffset()
+  const state = context?.open ? "open" : "closed"
+  return (
+    <AlertDialogPortal>
+      <View className="fixed inset-0 z-50">
+        <AlertDialogOverlay />
+        <View
+          ref={ref}
+          data-state={state}
+          className={cn(
+             "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-xl",
+             className
+            )}
+          style={{
+              ...(style as object),
+              top: offset > 0 ? `calc(50% - ${offset / 2}px)` : undefined
+            }}
+          onClick={(e) => e.stopPropagation()}
+          {...props}
+        >
+            {children}
+        </View>
+      </View>
+    </AlertDialogPortal>
+  )
+})
+AlertDialogContent.displayName = "AlertDialogContent"
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = "AlertDialogTitle"
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName = "AlertDialogDescription"
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & VariantProps<typeof buttonVariants>
+>(({ className, variant, size, onClick, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext)
+    return (
+        <View
+          ref={ref}
+          className={cn(buttonVariants({ variant, size }), "w-full sm:w-auto", className)}
+          onClick={(e) => {
+                context?.onOpenChange?.(false)
+                onClick?.(e)
+            }}
+          {...props}
+        />
+    )
+})
+AlertDialogAction.displayName = "AlertDialogAction"
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & VariantProps<typeof buttonVariants>
+>(({ className, variant = "outline", size, onClick, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext)
+    return (
+        <View
+          ref={ref}
+          className={cn(
+            buttonVariants({ variant, size }),
+            "mt-2 sm:mt-0 w-full sm:w-auto",
+            className
+            )}
+          onClick={(e) => {
+                context?.onOpenChange?.(false)
+                onClick?.(e)
+            }}
+          {...props}
+        />
+    )
+})
+AlertDialogCancel.displayName = "AlertDialogCancel"
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}