feat(applaunchpad): update UI framework to shadcn and tailwind css

frontend/.husky/pre-commit

@@ -1 +1,15 @@
-npx lint-staged
+#!/usr/bin/env sh
+
+# 加载用户的 shell 配置以获取完整的 PATH
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
+
+# 如果使用 Homebrew 安装的 Node.js
+if [ -d "/opt/homebrew/bin" ]; then
+  export PATH="/opt/homebrew/bin:$PATH"
+fi
+if [ -d "/usr/local/bin" ]; then
+  export PATH="/usr/local/bin:$PATH"
+fi
+
+npx lint-staged

frontend/.vscode/settings.json

@@ -18,7 +18,7 @@
     "i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
     "i18n-ally.extract.targetPickingStrategy": "most-similar-by-key",
     "[typescriptreact]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     },
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"

frontend/packages/shadcn-ui/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { ChevronRight } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
+  )
+);
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.ComponentPropsWithoutRef<'a'>>(
+  ({ className, ...props }, ref) => (
+    <a ref={ref} className={cn('transition-colors hover:text-foreground', className)} {...props} />
+  )
+);
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  )
+);
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:size-3.5', className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis
+};

frontend/packages/shadcn-ui/src/components/ui/popover.tsx

@@ -17,22 +17,33 @@ function PopoverContent({
   className,
   align = 'center',
   sideOffset = 4,
+  showArrow = false,
+  arrowPadding,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+  showArrow?: boolean;
+}) {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
         data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}
+        arrowPadding={arrowPadding}
         className={cn(
           'z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           className
         )}
         {...props}
       >
-        {/* TODO: we need to add arrow,but it's not working */}
-        {/* <PopoverPrimitive.Arrow className="fill-white" /> */}
+        {props.children}
+        {showArrow && (
+          <PopoverPrimitive.Arrow
+            className="z-50 -my-px border-none fill-white [filter:drop-shadow(0_2px_4px_rgba(0,0,0,0.08))]"
+            width={12}
+            height={7}
+          />
+        )}
       </PopoverPrimitive.Content>
     </PopoverPrimitive.Portal>
   );
@@ -42,4 +53,11 @@ function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitiv
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+function PopoverArrow({
+  className,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Arrow>) {
+  return <PopoverPrimitive.Arrow className={cn('fill-white', className)} {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow };

frontend/packages/shadcn-ui/src/index.ts

@@ -2,6 +2,7 @@ export * from './lib/utils';
 export * from './components/ui/alert';
 export * from './components/ui/alert-dialog';
 export * from './components/ui/badge';
+export * from './components/ui/breadcrumb';
 export * from './components/ui/skeleton';
 export * from './components/ui/separator';
 export * from './components/ui/loading';

frontend/packages/shadcn-ui/src/styles/shadcn.css

@@ -27,6 +27,7 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);

frontend/packages/shadcn-ui/src/styles/theme.css

@@ -15,6 +15,7 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.9705 0.0129 17.38);
   --border: #e4e4e4; /* zinc-200 */
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);

frontend/providers/applaunchpad/next.config.js

@@ -22,7 +22,7 @@ const nextConfig = {
     }
     return config;
   },
-  transpilePackages: ['@sealos/driver', '@sealos/ui'],
+  transpilePackages: ['@sealos/driver', '@sealos/ui', '@sealos/shadcn-ui', 'geist'],
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
     instrumentationHook: true

frontend/providers/applaunchpad/package.json

@@ -26,6 +26,7 @@
     "@scalar/api-reference-react": "^0.6.24",
     "@sealos/driver": "workspace:^",
     "@sealos/gtm": "workspace:^",
+    "@sealos/shadcn-ui": "workspace:^",
     "@sealos/shared": "workspace:^",
     "@sealos/ui": "workspace:^",
     "@tanstack/react-query": "^4.35.3",
@@ -58,21 +59,25 @@
     "nprogress": "^0.2.0",
     "prettier": "^2.8.8",
     "react": "18.3.1",
-    "react-day-picker": "^8.8.2",
+    "react-day-picker": "^9.11.1",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.46.2",
     "react-i18next": "^14.1.2",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
     "sass": "^1.68.0",
     "sealos-desktop-sdk": "workspace:*",
+    "sonner": "^2.0.0",
     "typescript": "^5.2.2",
     "zod": "^3.23.8",
     "zod-openapi": "^4.2.4",
     "zustand": "^4.4.1"
   },
   "devDependencies": {
     "@svgr/webpack": "^6.5.1",
+    "@tailwindcss/postcss": "^4.1.10",
+    "tailwindcss": "^4.1.10",
+    "geist": "^1.4.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^14.0.0",
     "@types/base64-stream": "^1.0.5",
@@ -96,4 +101,4 @@
     "vitest": "^4.0.12",
     "webpack-bundle-analyzer": "^4.9.1"
   }
-}
+}

frontend/providers/applaunchpad/postcss.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {}
+  }
+};
+
+export default config;
+