feat: unocss-preset-shadcn

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/shadcn/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/shadcn/components",
+    "composables": "@/shadcn/composables",
+    "utils": "@/shadcn/lib/utils",
+    "ui": "@/shadcn/components/ui",
+    "lib": "@/shadcn/lib"
+  },
+  "iconLibrary": "lucide"
+}

eslint.config.ts

@@ -22,6 +22,7 @@ configureVueProject({ scriptLangs: ['ts', 'tsx', 'js', 'jsx'] });
 export default defineConfigWithVueTs(
   includeIgnoreFile(gitignorePath), // oxlint . --fix -D correctness --ignore-path .gitignore
   { ignores: ['typed-router.d.ts'] },
+  { ignores: ['src/shadcn/**'] },
   {
     files: ['**/*.{ts,mts,tsx,vue}'],
     name: 'app/files-to-lint',

package.json

@@ -51,10 +51,13 @@
     "ant-design-vue": "~4.2.6",
     "axios": "^1.7.9",
     "cesium": "^1.127.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "consola": "^3.4.0",
     "dayjs": "^1.11.13",
     "deep-freeze-es6": "^4.0.0",
     "jsencrypt": "^3.3.2",
+    "lucide-vue-next": "^0.483.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "orbpro": "^1.126.0",
@@ -65,7 +68,10 @@
     "primelocale": "^2.0.0",
     "primevue": "^4.3.1",
     "radash": "^12.1.0",
+    "radix-vue": "^1.9.17",
+    "reka-ui": "^2.1.1",
     "satellite.js": "^5.0.0",
+    "tailwind-merge": "^3.0.2",
     "tdesign-icons-vue-next": "^0.3.4",
     "ts-enum-util": "^4.1.0",
     "utils4u": "^4.2.1",
@@ -118,7 +124,9 @@
     "terser": "^5.38.2",
     "typescript": "~5.8.2",
     "unocss": "^66.0.0",
+    "unocss-preset-animations": "^1.1.1",
     "unocss-preset-chinese": "^0.3.3",
+    "unocss-preset-shadcn": "^0.5.0",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-icons": "^22.0.0",
     "unplugin-vue-components": "^28.0.0",

src/pages/UI-components/ShadcnVue/index.page.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Button as ShadcnButton } from '@/shadcn/components/ui/button';
+
+const onClick = () => {
+  console.log('click');
+};
+</script>
+
+<template>
+  <div>
+    <ShadcnButton variant="link" :onClick>s</ShadcnButton>
+  </div>
+</template>
+
+<style scoped></style>

src/shadcn/README.md

@@ -0,0 +1,7 @@
+- https://www.shadcn-vue.com/docs/components/button.html
+- https://github.com/unocss-community/unocss-preset-shadcn?tab=readme-ov-file#usage
+- https://unocss-preset-shadcn.vercel.app/
+
+```
+npx shadcn-vue@latest add button
+```

src/shadcn/components/ui/button/Button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shadcn/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type ButtonVariants, buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

src/shadcn/components/ui/button/index.ts

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

src/shadcn/lib/utils.ts

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

src/styles/index.ts

@@ -1,5 +1,8 @@
 import 'nprogress/nprogress.css'; // <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/nprogress/nprogress.css" />
-import '@unocss/reset/tailwind-compat.css'; // https://unocss.dev/guide/style-reset#tailwind-compat // <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
+// https://unocss.dev/guide/style-reset#tailwind-compat
+// <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
+// import '@unocss/reset/tailwind.css';
+import '@unocss/reset/tailwind-compat.css';
 
 import './base.css';
 import './main.less';

tsconfig.json

@@ -1,11 +1,12 @@
 {
   "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    // https://www.shadcn-vue.com/docs/components-json.html#aliases
+    // A fallback to tsconfig.app.json if no paths were found in tsconfig.json
+    // 有问题？
+    "paths": {
+      "@/*": ["./src/*"]
     }
-  ]
+  }
 }

typed-router.d.ts

@@ -36,6 +36,7 @@ declare module 'vue-router/auto-routes' {
     'UIComponentsInfiniteLoading': RouteRecordInfo<'UIComponentsInfiniteLoading', '/UI-components/infinite-loading', Record<never, never>, Record<never, never>>,
     'UIComponentsInfiniteLoadingDetail': RouteRecordInfo<'UIComponentsInfiniteLoadingDetail', '/UI-components/infinite-loading/detail', Record<never, never>, Record<never, never>>,
     'UIComponentsPrimeVue': RouteRecordInfo<'UIComponentsPrimeVue', '/UI-components/PrimeVue', Record<never, never>, Record<never, never>>,
+    'UIComponentsShadcnVue': RouteRecordInfo<'UIComponentsShadcnVue', '/UI-components/ShadcnVue', Record<never, never>, Record<never, never>>,
     'VueMacrosDefineRender': RouteRecordInfo<'VueMacrosDefineRender', '/VueMacros/DefineRender', Record<never, never>, Record<never, never>>,
     'VueMacrosReactivityTransform': RouteRecordInfo<'VueMacrosReactivityTransform', '/VueMacros/ReactivityTransform', Record<never, never>, Record<never, never>>,
     'VueMacrosReusableTemplate': RouteRecordInfo<'VueMacrosReusableTemplate', '/VueMacros/ReusableTemplate', Record<never, never>, Record<never, never>>,

unocss.config.ts

@@ -1,8 +1,23 @@
 // https://github.dev/unocss/unocss/tree/main/examples/vite-vue3
+
 import { defineConfig, presetAttributify, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss';
+import presetAnimations from 'unocss-preset-animations';
 // import presetChinese, { chineseTypography } from 'unocss-preset-chinese';
+import { presetShadcn } from 'unocss-preset-shadcn';
 
 export default defineConfig({
+  // By default, `.ts` and `.js` files are NOT extracted.
+  // If you want to extract them, use the following configuration.
+  // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte.
+  content: {
+    pipeline: {
+      include: [
+        // the default
+        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+        'src/shadcn/components/**/*.{js,ts}',
+      ],
+    },
+  },
   presets: [
     presetWind3({
       /* prefix: "u-", */
@@ -10,6 +25,21 @@ export default defineConfig({
         dark: '.app-dark',
       },
     }),
+    presetAnimations(),
+    // https://github.com/unocss-community/unocss-preset-shadcn?tab=readme-ov-file#usage
+    // npx shadcn-vue@latest add button
+    presetShadcn(
+      {
+        color: 'zinc',
+        // With default setting for SolidUI, you need to set the darkSelector option.
+        darkSelector: '.app-dark',
+      },
+      {
+        // If you are using reka ui.
+        componentLibrary: 'reka',
+      },
+    ),
+
     // chineseTypography(),
     // presetChinese({
     //   chineseType: 'simplified', // 指定文本为简体中文