@lark-apaas/coding-template-nestjs-react-fullstack 0.1.0-alpha.1

package/template/client/src/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-normal enabled:hover:bg-muted enabled:hover:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/20 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent enabled:hover:bg-accent enabled:hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/template/client/src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+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-foreground text-background 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 shadow-md",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/template/client/src/hooks/use-example.ts

@@ -0,0 +1,52 @@
+// import { useState, useEffect } from 'react';
+// import { axiosForBackend } from '@lark-apaas/client-toolkit/utils/getAxiosForBackend';
+// import { logger } from '@lark-apaas/client-toolkit/logger';
+
+// interface RecordData {
+//   title?: string,
+//   type?: string,
+//   creator?: string,
+//   speakDate?: string,
+// record: any;
+// loading: boolean;
+// error?: string;
+// }
+
+// export function useRecordData() {
+//   const [data, setData] = useState<RecordData>({
+//     record: {},
+//     loading: true,
+//     error: null,
+//   });
+
+//   useEffect(() => {
+//     fetchRecordData();
+//   }, []);
+
+//   const fetchRecordData = async () => {
+//     try {
+//       setData(prev => ({ ...prev, loading: true, error: null }));
+
+//       // 使用axios实例获取数据
+//       const response = await axiosForBackend.get('/api/hello');
+
+//       // 提取响应数据中的 data 字段
+//       const record = response.data.data;
+
+//       setData({
+//         record,
+//         loading: false,
+//         error: null,
+//       });
+//     } catch (error) {
+//       logger.error('获取数据失败', error);
+//       setData(prev => ({
+//         ...prev,
+//         loading: false,
+//         error: '获取数据失败，请稍后重试',
+//       }));
+//     }
+//   };
+
+//   return { ...data, refetch: fetchRecordData };
+// }

package/template/client/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/template/client/src/index.css

@@ -0,0 +1,7 @@
+@import '@lark-apaas/client-toolkit/lib/index.css';
+@import "tw-animate-css";
+@import "./tailwind-theme.css";
+@import "./typography.css";
+
+@source "../../node_modules/streamdown/dist/*.js";
+@config "../../tailwind.config.ts";

package/template/client/src/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import { AppContainer } from '@lark-apaas/client-toolkit/components/AppContainer';
+import { ErrorRender } from '@lark-apaas/client-toolkit/components/ErrorRender';
+
+import RoutesComponent from './app.tsx';
+import './index.css';
+import { createPortal } from 'react-dom';
+import { Toaster } from '@client/src/components/ui/sonner';
+
+const CLIENT_BASE_PATH = process.env.CLIENT_BASE_PATH || '/';
+
+const MainApp = () => {
+  return (
+    <BrowserRouter basename={CLIENT_BASE_PATH}>
+      <AppContainer defaultTheme="light">
+        <ErrorBoundary
+          fallbackRender={({ error, resetErrorBoundary }) => (
+            <ErrorRender
+              error={error as Error}
+              resetErrorBoundary={resetErrorBoundary}
+            />
+          )}
+        >
+          <RoutesComponent />
+          {createPortal(<Toaster />, document.body)}
+        </ErrorBoundary>
+      </AppContainer>
+    </BrowserRouter>
+  );
+};
+
+createRoot(document.getElementById('root')!).render(<MainApp />);

package/template/client/src/lib/shiki.ts

@@ -0,0 +1,92 @@
+import {
+  createBundledHighlighter,
+  createSingletonShorthands,
+} from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import type {
+  DynamicImportLanguageRegistration,
+  DynamicImportThemeRegistration,
+  HighlighterGeneric,
+} from 'shiki/types';
+
+type BundledLanguage =
+  | 'typescript'
+  | 'ts'
+  | 'cts'
+  | 'mts'
+  | 'javascript'
+  | 'js'
+  | 'cjs'
+  | 'mjs'
+  | 'jsx'
+  | 'tsx'
+  | 'html'
+  | 'css'
+  | 'json'
+  | 'jsonc'
+  | 'json5'
+  | 'markdown'
+  | 'md';
+type BundledTheme = 'github-light' | 'github-dark';
+type Highlighter = HighlighterGeneric<BundledLanguage, BundledTheme>;
+
+const bundledLanguages = {
+  typescript: () => import('@shikijs/langs/typescript'),
+  ts: () => import('@shikijs/langs/typescript'),
+  cts: () => import('@shikijs/langs/typescript'),
+  mts: () => import('@shikijs/langs/typescript'),
+  javascript: () => import('@shikijs/langs/javascript'),
+  js: () => import('@shikijs/langs/javascript'),
+  cjs: () => import('@shikijs/langs/javascript'),
+  mjs: () => import('@shikijs/langs/javascript'),
+  jsx: () => import('@shikijs/langs/jsx'),
+  tsx: () => import('@shikijs/langs/tsx'),
+  html: () => import('@shikijs/langs/html'),
+  css: () => import('@shikijs/langs/css'),
+  json: () => import('@shikijs/langs/json'),
+  jsonc: () => import('@shikijs/langs/jsonc'),
+  json5: () => import('@shikijs/langs/json5'),
+  markdown: () => import('@shikijs/langs/markdown'),
+  md: () => import('@shikijs/langs/markdown'),
+} as Record<BundledLanguage, DynamicImportLanguageRegistration>;
+
+const bundledThemes = {
+  'github-light': () => import('@shikijs/themes/github-light'),
+  'github-dark': () => import('@shikijs/themes/github-dark'),
+} as Record<BundledTheme, DynamicImportThemeRegistration>;
+
+const createHighlighter = /* @__PURE__ */ createBundledHighlighter<
+  BundledLanguage,
+  BundledTheme
+>({
+  langs: bundledLanguages,
+  themes: bundledThemes,
+  engine: () => createJavaScriptRegexEngine(),
+});
+
+const {
+  codeToHtml,
+  codeToHast,
+  codeToTokensBase,
+  codeToTokens,
+  codeToTokensWithThemes,
+  getSingletonHighlighter,
+  getLastGrammarState,
+} = /* @__PURE__ */ createSingletonShorthands<BundledLanguage, BundledTheme>(
+  createHighlighter,
+);
+
+export {
+  bundledLanguages,
+  bundledThemes,
+  codeToHast,
+  codeToHtml,
+  codeToTokens,
+  codeToTokensBase,
+  codeToTokensWithThemes,
+  createHighlighter,
+  getLastGrammarState,
+  getSingletonHighlighter,
+};
+
+export type { BundledLanguage, BundledTheme, Highlighter };

package/template/client/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/template/client/src/pages/ExamplePage/ExamplePage.tsx

@@ -0,0 +1,37 @@
+// import { useState } from 'react';
+// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+// import { Button } from '@/components/ui/button';
+// import { RefreshCw, TrendingUp, PieChart, Clock } from 'lucide-react';
+// import { Link } from 'react-router-dom';
+// import { useRecordData } from '@/hooks/use-example';
+
+// export default function ExamplePage() {
+//   const { record, loading, error, refetch } = useRecordData();
+//   const [dimension, setDimension] = useState<'month' | 'quarter' | 'year'>('month');
+
+//   if (loading) {
+//     return (
+//       <div className="flex items-center justify-center h-64">
+//         <div className="text-muted-foreground">加载中...</div>
+//       </div>
+//     );
+//   }
+
+//   if (error) {
+//     return (
+//       <div className="flex flex-col items-center justify-center h-64 space-y-4">
+//         <div className="text-destructive">{error}</div>
+//         <Button onClick={refetch} variant="outline" size="sm">
+//           <RefreshCw className="h-4 w-4 mr-2" />
+//           重试
+//         </Button>
+//       </div>
+//     );
+//   }
+
+//   return (
+//     <div className="space-y-6">
+//       {/* 页面内容 */}
+//     </div>
+//   );
+// }

package/template/client/src/pages/NotFound/NotFound.tsx

@@ -0,0 +1,11 @@
+import { NotFoundRender } from "@lark-apaas/client-toolkit/components/NotFoundRender";
+
+const NotFound = () => {
+  return (
+    <>
+      <NotFoundRender />
+    </>
+  );
+};
+
+export default NotFound;

package/template/client/src/tailwind-theme.css

@@ -0,0 +1,257 @@
+:root {
+  --button-outline: rgba(0,0,0, .10);
+  --badge-outline: rgba(0,0,0, .05);
+
+  /* Automatic computation of border around primary / danger buttons */
+  --opaque-button-border-intensity: -8; /* In terms of percentages */
+
+  /* Backgrounds applied on top of other backgrounds when hovered/active */
+  --elevate-1: rgba(0,0,0, .03);
+  --elevate-2: rgba(0,0,0, .08);
+
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(220 14% 14%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(220 14% 14%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(220 14% 14%);
+  --primary: hsl(221 83% 53%);
+  --primary-foreground: hsl(220 14% 98%);
+  --secondary: hsl(220 14% 96%);
+  --secondary-foreground: hsl(220 14% 14%);
+  --muted: hsl(220 14% 96%);
+  --muted-foreground: hsl(218 7% 59%);
+  --accent: hsl(220 14% 96%);
+  --accent-foreground: hsl(220 14% 14%);
+  --info: hsl(221 83% 53%);
+  --info-foreground: hsl(230 100% 98%);
+  --destructive: hsl(2 84% 62%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --success: hsl(130 54% 42%);
+  --success-foreground: hsl(115 77% 97%);
+  --warning: hsl(26 90% 49%);
+  --warning-foreground: hsl(33 100% 96%);
+  --border: hsl(220 14% 89%);
+  --input: hsl(220 14% 89%);
+  --ring: hsl(221 83% 53%);
+  --chart-1: hsl(222 82% 56%);
+  --chart-2: hsl(174 77% 46%);
+  --chart-3: hsl(46 100% 52%);
+  --chart-4: hsl(27 92% 49%);
+  --chart-5: hsl(292 54% 76%);
+  --sidebar: hsl(220 14% 96%);
+  --sidebar-foreground: hsl(220 14% 14%);
+  --sidebar-primary: hsl(221 83% 53%);
+  --sidebar-primary-foreground: hsl(220 14% 98%);
+  --sidebar-accent: hsl(222 100% 94%);
+  --sidebar-accent-foreground: hsl(221 83% 53%);
+  --sidebar-border: hsl(220 14% 89%);
+  --sidebar-ring: hsl(221 83% 53%);
+
+  /* Computed borders using hsl relative color syntax */
+  --primary-border: hsl(from hsl(221 83% 53%) h s calc(l + var(--opaque-button-border-intensity)));
+  --secondary-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
+  --destructive-border: hsl(from hsl(2 84% 62%) h s calc(l + var(--opaque-button-border-intensity)));
+  --accent-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
+  --muted-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
+  --font-sans:
+    'LarkHackSafariFont', 'LarkEmojiFont', 'LarkChineseQuote', '-apple-system',
+    'BlinkMacSystemFont', 'Helvetica Neue', 'Tahoma', 'PingFang SC',
+    'Microsoft Yahei', 'Arial', 'Hiragino Sans GB', 'sans-serif',
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif:
+    'Geist', 'Geist Fallback', ui-serif, Georgia, Cambria, 'Times New Roman',
+    Times, serif;
+  --font-mono: Source Code Pro, monospace;
+  --radius: 0.5rem;
+  --shadow-x: 0px;
+  --shadow-y: 2px;
+  --shadow-blur: 12px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.02;
+  --shadow-color: #000000;
+  --shadow-2xs: 0px 2px 12px 0px hsl(0 0% 0% / 0.01);
+  --shadow-xs: 0px 2px 12px 0px hsl(0 0% 0% / 0.01);
+  --shadow-sm:
+    0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
+  --shadow:
+    0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
+  --shadow-md:
+    0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 2px 4px -1px hsl(0 0% 0% / 0.02);
+  --shadow-lg:
+    0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 4px 6px -1px hsl(0 0% 0% / 0.02);
+  --shadow-xl:
+    0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 8px 10px -1px hsl(0 0% 0% / 0.02);
+  --shadow-2xl: 0px 2px 12px 0px hsl(0 0% 0% / 0.05);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+}
+
+@theme inline {
+  --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-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --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);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}
+
+/**
+ * Using the elevate system.
+ * Automatic contrast adjustment.
+ *
+ * <element className="hover-elevate" />
+ * <element className="active-elevate-2" />
+ *
+ * // Using the tailwind utility when a data attribute is "on"
+ * <element className="toggle-elevate data-[state=on]:toggle-elevated" />
+ * // Or manually controlling the toggle state
+ * <element className="toggle-elevate toggle-elevated" />
+ *
+ * Elevation systems have to handle many states.
+ * - not-hovered, vs. hovered vs. active  (three mutually exclusive states)
+ * - toggled or not
+ * - focused or not (this is not handled with these utilities)
+ *
+ * Even without handling focused or not, this is six possible combinations that
+ * need to be distinguished from eachother visually.
+ */
+@layer utilities {
+  /* Hide ugly search cancel button in Chrome until we can style it properly */
+  input[type="search"]::-webkit-search-cancel-button {
+    @apply hidden;
+  }
+
+  /* Placeholder styling for contentEditable div */
+  [contenteditable][data-placeholder]:empty::before {
+    content: attr(data-placeholder);
+    color: var(--muted-foreground);
+    pointer-events: none;
+  }
+
+  /* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
+   * buttons/badges can remove the automatic brightness adjustment on interactions
+   * and program their own. */
+  .no-default-hover-elevate {}
+  .no-default-active-elevate {}
+
+
+  /**
+   * Toggleable backgrounds go behind the content. Hoverable/active goes on top.
+   * This way they can stack/compound. Both will overlap the parent's borders!
+   * So borders will be automatically adjusted both on toggle, and hover/active,
+   * and they will be compounded.
+   */
+  .toggle-elevate::before,
+  .toggle-elevate-2::before {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset: 0px;
+    /*border-radius: inherit;   match rounded corners */
+    border-radius: inherit;
+    z-index: -1;
+    /* sits behind content but above backdrop */
+  }
+
+  .toggle-elevate.toggle-elevated::before {
+    background-color: var(--elevate-2);
+  }
+
+  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
+  .border.toggle-elevate::before {
+    inset: -1px;
+  }
+
+  /* Does not work on elements with overflow:hidden! */
+  .hover-elevate:not(.no-default-hover-elevate),
+  .active-elevate:not(.no-default-active-elevate),
+  .hover-elevate-2:not(.no-default-hover-elevate),
+  .active-elevate-2:not(.no-default-active-elevate) {
+    position: relative;
+    z-index: 0;
+  }
+
+  .hover-elevate:not(.no-default-hover-elevate)::after,
+  .active-elevate:not(.no-default-active-elevate)::after,
+  .hover-elevate-2:not(.no-default-hover-elevate)::after,
+  .active-elevate-2:not(.no-default-active-elevate)::after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset: 0px;
+    /*border-radius: inherit;   match rounded corners */
+    border-radius: inherit;
+    z-index: 999;
+    /* sits in front of content */
+  }
+
+  .hover-elevate:hover:not(.no-default-hover-elevate)::after,
+  .active-elevate:active:not(.no-default-active-elevate)::after {
+    background-color: var(--elevate-1);
+  }
+
+  .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
+  .active-elevate-2:active:not(.no-default-active-elevate)::after {
+    background-color: var(--elevate-2);
+  }
+
+  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
+  .border.hover-elevate:not(.no-hover-interaction-elevate)::after,
+  .border.active-elevate:not(.no-active-interaction-elevate)::after,
+  .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
+  .border.active-elevate-2:not(.no-active-interaction-elevate)::after,
+  .border.hover-elevate:not(.no-hover-interaction-elevate)::after {
+    inset: -1px;
+  }
+}

package/template/client/src/types/common.ts

@@ -0,0 +1,34 @@
+/**
+ * 用户状态枚举
+ */
+enum IUserStatus {
+  active = 1,
+  inactive = 2,
+}
+/**
+ * 用户信息类型
+ */
+export type IUserProfile = {
+  user_id: string;
+  email: string;
+  name: string;
+  avatar: string;
+  status: IUserStatus;
+};
+
+
+
+/**
+ * 文件类型
+ */
+export type IFileAttachment = {
+  bucket_id: string;
+  file_path: string;
+};
+declare global {
+  interface Window {
+    userId?: string;
+    token?: string;
+    csrfToken?: string;
+  }
+}