From 2f643e3c1326a0408cb2c44cccd74d4bc4eac108 Mon Sep 17 00:00:00 2001
From: Quicy <1728550853@qq.com>
Date: Thu, 15 Jan 2026 14:33:24 +0800
Subject: [PATCH] refactor: change ui component.json

---
 packages/ui/components.json                   | 10 ++---
 .../src/components/breadcrumb/Breadcrumb.vue  | 17 ++++++++
 .../breadcrumb/BreadcrumbEllipsis.vue         | 23 ++++++++++
 .../components/breadcrumb/BreadcrumbItem.vue  | 17 ++++++++
 .../components/breadcrumb/BreadcrumbLink.vue  | 21 +++++++++
 .../components/breadcrumb/BreadcrumbList.vue  | 17 ++++++++
 .../components/breadcrumb/BreadcrumbPage.vue  | 20 +++++++++
 .../breadcrumb/BreadcrumbSeparator.vue        | 22 ++++++++++
 .../ui/src/components/breadcrumb/index.ts     |  7 +++
 packages/ui/src/index.ts                      |  1 +
 packages/ui/tsconfig.json                     |  1 -
 packages/ui/vite.config.ts                    | 16 +++++++
 .../src/components/MainContainer/index.vue    | 43 ++++++++++++++++---
 13 files changed, 204 insertions(+), 11 deletions(-)
 create mode 100644 packages/ui/src/components/breadcrumb/Breadcrumb.vue
 create mode 100644 packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
 create mode 100644 packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
 create mode 100644 packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
 create mode 100644 packages/ui/src/components/breadcrumb/BreadcrumbList.vue
 create mode 100644 packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
 create mode 100644 packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
 create mode 100644 packages/ui/src/components/breadcrumb/index.ts
 create mode 100644 packages/ui/vite.config.ts

diff --git a/packages/ui/components.json b/packages/ui/components.json
index 7ec80584..f5879d25 100644
--- a/packages/ui/components.json
+++ b/packages/ui/components.json
@@ -10,11 +10,11 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "src/components",
-    "composables": "src/composables",
-    "utils": "src/lib/utils",
-    "ui": "src/components",
-    "lib": "src/lib"
+    "components": "#/components",
+    "composables": "#/composables",
+    "utils": "#/lib/utils",
+    "ui": "#/components",
+    "lib": "#/lib"
   },
   "iconLibrary": "lucide"
 }
diff --git a/packages/ui/src/components/breadcrumb/Breadcrumb.vue b/packages/ui/src/components/breadcrumb/Breadcrumb.vue
new file mode 100644
index 00000000..c5be5f09
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <nav
+    aria-label="breadcrumb"
+    data-slot="breadcrumb"
+    :class="props.class"
+  >
+    <slot />
+  </nav>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue b/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 00000000..ed242c1b
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { MoreHorizontal } from "lucide-vue-next"
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue b/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 00000000..8852aa2f
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-item"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue b/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 00000000..40b8e8ef
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from '#/lib/utils'
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbList.vue b/packages/ui/src/components/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 00000000..d39fa1af
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ol
+    data-slot="breadcrumb-list"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue b/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 00000000..0307e669
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('text-foreground font-normal', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue b/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 00000000..3ec512ac
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { ChevronRight } from "lucide-vue-next"
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/index.ts b/packages/ui/src/components/breadcrumb/index.ts
new file mode 100644
index 00000000..f4eafdc0
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "./BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 73f1c672..6b33dce8 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,6 +1,7 @@
 export * from './components/alert/index'
 export * from './components/avatar/index'
 export * from './components/badge/index'
+export * from './components/breadcrumb/index'
 export * from './components/button/index'
 export * from './components/button-group/index'
 export * from './components/card/index'
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index f2075677..9bd6f253 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -4,7 +4,6 @@
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
     "baseUrl": ".",
     "paths": {
       "#/*": ["./src/*"]
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
new file mode 100644
index 00000000..6a793fc4
--- /dev/null
+++ b/packages/ui/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'node:path'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    tailwindcss()
+  ],
+  resolve: {
+    alias: {
+      '#': path.resolve(__dirname, './src')
+    }
+  }
+})
\ No newline at end of file
diff --git a/packages/web/src/components/MainContainer/index.vue b/packages/web/src/components/MainContainer/index.vue
index 966c6870..f95694ff 100644
--- a/packages/web/src/components/MainContainer/index.vue
+++ b/packages/web/src/components/MainContainer/index.vue
@@ -1,15 +1,48 @@
 <template>
   <SidebarInset>
-    <SidebarTrigger class="-ml-1" />
-    <h1 @click="open = !open">
-      <!-- 主体 -->
-    </h1>
+    <header
+      class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
+    >
+      <div class="flex items-center gap-2 px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator
+          orientation="vertical"
+          class="mr-2 data-[orientation=vertical]:h-4"
+        />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+    </header>
+    <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+      <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+        <div class="bg-muted/50 aspect-video rounded-xl" />
+        <div class="bg-muted/50 aspect-video rounded-xl" />
+        <div class="bg-muted/50 aspect-video rounded-xl" />
+      </div>
+      <div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+    </div>
   </SidebarInset>
 </template>
 
 <script setup lang="ts">
 import { inject } from 'vue'
-import { SidebarTrigger, SidebarInset } from '@memoh/ui'
+import { SidebarTrigger, SidebarInset, Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator, } from '@memoh/ui'
 
 const open = inject('sideBarIsOpen')
 </script>
\ No newline at end of file