{"_id":"@cimom/vben-core-layout-ui","_rev":"9-f4af4b5c882b9254b63d351d9ba8fab7","name":"@cimom/vben-core-layout-ui","dist-tags":{"latest":"5.6.8"},"versions":{"5.5.9":{"name":"@cimom/vben-core-layout-ui","version":"5.5.9","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-layout-ui@5.5.9","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"9469e4f06758599588b8a22e4c2ab2ce2063141c","tarball":"https://registry.npmjs.org/@cimom/vben-core-layout-ui/-/vben-core-layout-ui-5.5.9.tgz","fileCount":20,"integrity":"sha512-ECCUE4sC/NJJ/9hjG5K2MViXn0AioSZg0iftCWc9bjMLZc2C6Kw4znOwiFFfLEQ5K8wq/pTxnkH0euoefDpVfw==","signatures":[{"sig":"MEUCIQD3vBi9x7cpht0sLNPjf3WV4U+ZGyAejjyclRJ87/pMnQIgNKp7DIaHvVsYthTyq2hY7rcooVnjZHB7I+u9IwIWcf8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44939},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./dist/index.mjs","development":"./src/index.ts"}},"private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/layout-ui"},"_npmVersion":"10.5.1","description":"Layout UI 组件是一个基于 Vue 3 的高度可定制化布局组件，提供了多种布局模式，支持响应式设计、侧边栏折叠、头部固定等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"^5.5.9","@cimom/vben-core-shared":"^5.5.9","@cimom/vben-core-typings":"^5.5.9","@cimom/vben-core-shadcn-ui":"^5.5.9","@cimom/vben-core-composables":"^5.5.9"},"publishConfig":{"access":"public","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}}},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-layout-ui_5.5.9_1748415773513_0.12025950289186671","host":"s3://npm-registry-packages-npm-production"}},"5.5.12":{"name":"@cimom/vben-core-layout-ui","version":"5.5.12","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-layout-ui@5.5.12","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"cd88aed8e4f3e3d262cb614cd734170170dd1e87","tarball":"https://registry.npmjs.org/@cimom/vben-core-layout-ui/-/vben-core-layout-ui-5.5.12.tgz","fileCount":15,"integrity":"sha512-M0L9on5zrbrW6vWdDA7FYCTFbcyxoJ4pd3hLyE+F9E1js68/z4PV35YLBzgAkJfDd6sOPFKmrd8f5NYueqPJUw==","signatures":[{"sig":"MEUCIGbCcnNDsgweMh3aqJ/oNgEHKFwwg1pmSVqsVQy+o1rIAiEAh+rR5p3MF2s3SoJI7W1jKfpMjSV8VGOwOpnEoXDMI+I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43847},"main":"./src/index.ts","type":"module","module":"./src/index.ts","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"}},"gitHead":"3633a71e4d39ae0d85548e430d1b5e1e9caf19db","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/layout-ui"},"_npmVersion":"10.5.1","description":"Layout UI 组件是一个基于 Vue 3 的高度可定制化布局组件，提供了多种布局模式，支持响应式设计、侧边栏折叠、头部固定等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"^5.5.12","@cimom/vben-core-shared":"^5.5.15","@cimom/vben-core-typings":"^5.5.12","@cimom/vben-core-shadcn-ui":"^5.5.15","@cimom/vben-core-composables":"^5.5.12"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-layout-ui_5.5.12_1749105620951_0.25128661832419863","host":"s3://npm-registry-packages-npm-production"}},"5.5.14":{"name":"@cimom/vben-core-layout-ui","version":"5.5.14","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-layout-ui@5.5.14","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"992be0d448388c5d7510f2e92aec2fd2cb558ed9","tarball":"https://registry.npmjs.org/@cimom/vben-core-layout-ui/-/vben-core-layout-ui-5.5.14.tgz","fileCount":15,"integrity":"sha512-V8PvcP4h8vu/WtelHKX3R0XiEJyNs7zPm3s/BHewwV+HpS/ZaZILYKS4sfdqSx4IbmC6FllQXZgNo3G9OJXiTA==","signatures":[{"sig":"MEUCIQDKdHzs49OQU3VwaaVL/MbGJH2rz2mcKoOH2kzQ1ONiLgIgGqhZ/oVX5jK0tO6uRtaU2NtbKlC+ULmCjmD2Qn+f6ls=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43847},"main":"./src/index.ts","type":"module","module":"./src/index.ts","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"}},"gitHead":"3633a71e4d39ae0d85548e430d1b5e1e9caf19db","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/layout-ui"},"_npmVersion":"10.5.1","description":"Layout UI 组件是一个基于 Vue 3 的高度可定制化布局组件，提供了多种布局模式，支持响应式设计、侧边栏折叠、头部固定等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"^5.5.12","@cimom/vben-core-shared":"^5.5.15","@cimom/vben-core-typings":"^5.5.12","@cimom/vben-core-shadcn-ui":"^5.5.16","@cimom/vben-core-composables":"^5.5.12"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-layout-ui_5.5.14_1749133639696_0.3916586834592528","host":"s3://npm-registry-packages-npm-production"}},"5.6.0":{"name":"@cimom/vben-core-layout-ui","version":"5.6.0","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-layout-ui@5.6.0","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"6e0ba26827d01e90bc35109d2a8dde0707181b15","tarball":"https://registry.npmjs.org/@cimom/vben-core-layout-ui/-/vben-core-layout-ui-5.6.0.tgz","fileCount":19,"integrity":"sha512-SKwOJy1rirIPJE0iafpQtconX+76DNRiHBOGyXr48PH2kwoyMLhOTz0jHnBwl8OyxP3ubXaW5DNHg6HVPl/v0w==","signatures":[{"sig":"MEYCIQDO4MMksOG86GxaJQ+m13PQ/QgjiLTis1nj8AY0KSKclAIhAM1FVbatPpDVZedrgiZEUOBl2j9YaW9Ln+APuIoJsLKn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35103},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/layout-ui"},"_npmVersion":"10.5.1","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"^5.6.0","@cimom/vben-core-shared":"^5.6.1","@cimom/vben-core-typings":"^5.6.0","@cimom/vben-core-shadcn-ui":"^5.6.0","@cimom/vben-core-composables":"^5.6.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-layout-ui_5.6.0_1749435157633_0.6383432479723643","host":"s3://npm-registry-packages-npm-production"}},"5.6.1":{"name":"@cimom/vben-core-layout-ui","version":"5.6.1","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-layout-ui@5.6.1","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"901267e44c9c6453e44e8dd9d8e8b4e4918abf1a","tarball":"https://registry.npmjs.org/@cimom/vben-core-layout-ui/-/vben-core-layout-ui-5.6.1.tgz","fileCount":20,"integrity":"sha512-O4nlpkBy+W197uPQKlSipKr3ae5jKh5PUYU4dNuSeWP0cZtkqvnSeyiZxBs/zcZzKs5S7jv5w78lUCM7ctt5cA==","signatures":[{"sig":"MEUCIQCAr9SSEdR6VUNv2fTtgiA86QnWeuKewqlosiFzyO7ZYQIgZHqjRIL5trFzs/DpIbQRQs8uyKJJdw8QgRQmItVQoWI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44782},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/layout-ui"},"_npmVersion":"10.5.1","description":"Layout UI 组件是一个基于 Vue 3 的高度可定制化布局组件，提供了多种布局模式，支持响应式设计、侧边栏折叠、头部固定等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"^5.6.0","@cimom/vben-core-shared":"^5.6.1","@cimom/vben-core-typings":"^5.6.0","@cimom/vben-core-shadcn-ui":"^5.6.0","@cimom/vben-core-composables":"^5.6.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-layout-ui_5.6.1_1749440200822_0.5438388190847441","host":"s3://npm-registry-packages-npm-production"}},"5.6.2":{"name":"@cimom/vben-core-layout-ui","version":"5.6.2","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-layout-ui@5.6.2","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"3e05bb84d617bd627ada7408cad9b48624c2f095","tarball":"https://registry.npmjs.org/@cimom/vben-core-layout-ui/-/vben-core-layout-ui-5.6.2.tgz","fileCount":20,"integrity":"sha512-dLOnk7KgTK+xF+ATgl59lkhhC6P6Ep6FYc6GU2Rak77Esv8fT4fwFtHWTPmWTGj/j5bdv5DVbT2DJTP9qc0VVw==","signatures":[{"sig":"MEQCID1SiumWG5ji+cPzE3NWj/uHjLT1J/tonFN6qsHYU9XrAiB7Djjy5KuvyOPfodaih3L+sRojV3MxyJcH9dcpw4CS4w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44690},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/layout-ui"},"_npmVersion":"10.5.1","description":"Layout UI 组件是一个基于 Vue 3 的高度可定制化布局组件，提供了多种布局模式，支持响应式设计、侧边栏折叠、头部固定等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"*","@cimom/vben-core-shared":"*","@cimom/vben-core-typings":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-layout-ui_5.6.2_1749457018772_0.08849377816509585","host":"s3://npm-registry-packages-npm-production"}},"5.6.3":{"name":"@cimom/vben-core-layout-ui","version":"5.6.3","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-layout-ui@5.6.3","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"c59d8a84eab5c38644b66dff6aacf572211e98b9","tarball":"https://registry.npmjs.org/@cimom/vben-core-layout-ui/-/vben-core-layout-ui-5.6.3.tgz","fileCount":33,"integrity":"sha512-tLwFXHE0zd7MxSQzxlH/X1hRnvhXIX8Z5AxogPDGZzk+XQBV+WPq9xk35szWZselk+jjb+D+X8HTYIsRDhbafQ==","signatures":[{"sig":"MEQCIF0LBW08lHOknxGG3oWG36e/5JZn942H+hP4gpA9wPgdAiB51hFt8ehV1BRSOcPeNC+CI6JrLkh/z62H2zJkXnsQ3w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":78588},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"4658e451554fb07b03bcd870c1694010f7362c31","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/layout-ui"},"_npmVersion":"10.5.1","description":"Layout UI 组件是一个基于 Vue 3 的高度可定制化布局组件，提供了多种布局模式，支持响应式设计、侧边栏折叠、头部固定等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"*","@cimom/vben-core-shared":"*","@cimom/vben-core-typings":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-layout-ui_5.6.3_1749566900429_0.4821464985280144","host":"s3://npm-registry-packages-npm-production"}},"5.6.8":{"name":"@cimom/vben-core-layout-ui","version":"5.6.8","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-layout-ui@5.6.8","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"a85dea2970b7189f35101afae7d42d27cdf74730","tarball":"https://registry.npmjs.org/@cimom/vben-core-layout-ui/-/vben-core-layout-ui-5.6.8.tgz","fileCount":33,"integrity":"sha512-iCYJuIn+frhNyDj3DE3u1fsf5IhUBIhfF2uddD7Ds4d48nzPF/+w4ZAmfcOcX3Ao/RC2w6cCWZRjC39rRXewKQ==","signatures":[{"sig":"MEUCIQDZy2vIN+vV/7yTcMxHAyHNs/JMFjtKxiMlvP9csnqkCgIgEptQ6d1isPcpOEqHuWit9Dk4XY97UF02lkANALbZbLM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":78638},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"gitHead":"59e2231aeb00db23143220cc2a9229aabfdaceb4","private":false,"scripts":{"build":"pnpm unbuild","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/layout-ui"},"_npmVersion":"10.5.1","description":"Layout UI 组件是一个基于 Vue 3 的高度可定制化布局组件，提供了多种布局模式，支持响应式设计、侧边栏折叠、头部固定等功能。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","@vueuse/core":"^13.1.0","@cimom/vben-core-icons":"*","@cimom/vben-core-shared":"*","@cimom/vben-core-typings":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.5.13"},"_npmOperationalInternal":{"tmp":"tmp/vben-core-layout-ui_5.6.8_1749621023662_0.11555462771626623","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-05-28T07:02:53.436Z","modified":"2026-01-14T01:37:30.729Z","5.5.9":"2025-05-28T07:02:53.763Z","5.5.12":"2025-06-05T06:40:21.142Z","5.5.14":"2025-06-05T14:27:19.879Z","5.6.0":"2025-06-09T02:12:37.822Z","5.6.1":"2025-06-09T03:36:41.006Z","5.6.2":"2025-06-09T08:16:58.944Z","5.6.3":"2025-06-10T14:48:20.635Z","5.6.8":"2025-06-11T05:50:23.844Z"},"bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","homepage":"https://github.com/vbenjs/vue-vben-admin","repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/uikit/layout-ui"},"description":"Layout UI 组件是一个基于 Vue 3 的高度可定制化布局组件，提供了多种布局模式，支持响应式设计、侧边栏折叠、头部固定等功能。","maintainers":[{"email":"msj1370380114@gmail.com","name":"moushangjie"},{"email":"57237184@qq.com","name":"hdeqi2005"},{"email":"6983376@qq.com","name":"xxcazzy"}],"readme":"# Layout UI 组件\n\nLayout UI 组件是一个基于 Vue 3 的高度可定制化布局组件，提供了多种布局模式，支持响应式设计、侧边栏折叠、头部固定等功能。\n\n## 安装\n\n```bash\nnpm install @cimom/vben-core-ui-kit-layout-ui\n```\n\n## 基本使用\n\n```vue\n<script setup lang=\"ts\">\nimport { VbenLayout } from '@cimom/vben-core-ui-kit-layout-ui';\nimport { ref } from 'vue';\n\nconst sidebarCollapse = ref(false);\n</script>\n\n<template>\n  <VbenLayout v-model:sidebarCollapse=\"sidebarCollapse\" layout=\"sidebar-nav\">\n    <template #header>\n      <div>头部内容</div>\n    </template>\n    <template #sidebar>\n      <div>侧边栏内容</div>\n    </template>\n    <template #default>\n      <div>主要内容区域</div>\n    </template>\n    <template #footer>\n      <div>页脚内容</div>\n    </template>\n  </VbenLayout>\n</template>\n```\n\n## 组件属性\n\n### VbenLayout Props\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| layout | `string` | `'sidebar-nav'` | 布局模式 |\n| headerHeight | `number` | `50` | 头部高度 |\n| headerVisible | `boolean` | `true` | 头部是否可见 |\n| headerHidden | `boolean` | `false` | 头部是否隐藏 |\n| headerMode | `string` | `'fixed'` | 头部模式，可选值: 'fixed', 'static', 'auto', 'auto-scroll' |\n| headerToggleSidebarButton | `boolean` | `true` | 是否显示头部切换侧边栏按钮 |\n| sidebarWidth | `number` | `180` | 侧边栏宽度 |\n| sideCollapseWidth | `number` | `60` | 侧边栏折叠时的宽度 |\n| sidebarMixedWidth | `number` | `80` | 混合模式下侧边栏宽度 |\n| sidebarHidden | `boolean` | `false` | 侧边栏是否隐藏 |\n| sidebarCollapsedButton | `boolean` | `true` | 是否显示侧边栏折叠按钮 |\n| sidebarCollapseShowTitle | `boolean` | `false` | 侧边栏折叠时是否显示标题 |\n| sidebarFixedButton | `boolean` | `true` | 是否显示侧边栏固定按钮 |\n| sidebarTheme | `string` | `'dark'` | 侧边栏主题 |\n| sidebarExtraCollapsedWidth | `number` | `60` | 扩展侧边栏折叠时的宽度 |\n| footerEnable | `boolean` | `false` | 是否启用页脚 |\n| footerFixed | `boolean` | `true` | 页脚是否固定 |\n| footerHeight | `number` | `32` | 页脚高度 |\n| tabbarEnable | `boolean` | `true` | 是否启用标签栏 |\n| tabbarHeight | `number` | `40` | 标签栏高度 |\n| contentCompact | `string` | `'wide'` | 内容区域紧凑模式 |\n| contentCompactWidth | `number` | `1200` | 内容区域紧凑模式下的宽度 |\n| contentPadding | `number` | `0` | 内容区域内边距 |\n| contentPaddingTop | `number` | `0` | 内容区域上内边距 |\n| contentPaddingRight | `number` | `0` | 内容区域右内边距 |\n| contentPaddingBottom | `number` | `0` | 内容区域下内边距 |\n| contentPaddingLeft | `number` | `0` | 内容区域左内边距 |\n| isMobile | `boolean` | `false` | 是否为移动设备 |\n| zIndex | `number` | `200` | z-index 值 |\n\n### v-model 绑定属性\n\n| 属性名               | 类型      | 默认值  | 说明                   |\n| -------------------- | --------- | ------- | ---------------------- |\n| sidebarCollapse      | `boolean` | `false` | 侧边栏是否折叠         |\n| sidebarEnable        | `boolean` | `true`  | 侧边栏是否启用         |\n| sidebarExpandOnHover | `boolean` | `false` | 侧边栏是否在悬停时展开 |\n| sidebarExtraVisible  | `boolean` | -       | 扩展侧边栏是否可见     |\n| sidebarExtraCollapse | `boolean` | `false` | 扩展侧边栏是否折叠     |\n\n### 事件\n\n| 事件名         | 参数 | 说明                 |\n| -------------- | ---- | -------------------- |\n| sideMouseLeave | -    | 鼠标离开侧边栏时触发 |\n| toggleSidebar  | -    | 切换侧边栏时触发     |\n\n### 插槽\n\n| 插槽名       | 说明                       |\n| ------------ | -------------------------- |\n| default      | 默认插槽，用于放置主要内容 |\n| header       | 头部内容                   |\n| headerLeft   | 头部左侧内容               |\n| headerRight  | 头部右侧内容               |\n| sidebar      | 侧边栏内容                 |\n| sidebarExtra | 扩展侧边栏内容             |\n| tabbar       | 标签栏内容                 |\n| footer       | 页脚内容                   |\n\n## 布局模式\n\nLayout UI 组件支持多种布局模式：\n\n- `sidebar-nav`: 侧边栏导航模式\n- `header-nav`: 顶部导航模式\n- `mixed-nav`: 混合导航模式\n- `sidebar-mixed-nav`: 侧边栏混合导航模式\n- `header-mixed-nav`: 顶部混合导航模式\n- `header-sidebar-nav`: 顶部侧边栏导航模式\n- `full-content`: 全屏内容模式\n\n## 示例\n\n### 侧边栏导航模式\n\n```vue\n<template>\n  <VbenLayout\n    v-model:sidebarCollapse=\"sidebarCollapse\"\n    v-model:sidebarExpandOnHover=\"sidebarExpandOnHover\"\n    layout=\"sidebar-nav\"\n    :headerHeight=\"60\"\n    :sidebarWidth=\"200\"\n    :sideCollapseWidth=\"64\"\n  >\n    <template #header>\n      <div class=\"flex h-full items-center px-4\">\n        <h1 class=\"text-xl font-bold\">管理系统</h1>\n        <div class=\"flex-1\"></div>\n        <div class=\"flex items-center space-x-4\">\n          <span>用户名</span>\n          <button>退出</button>\n        </div>\n      </div>\n    </template>\n\n    <template #sidebar>\n      <div class=\"p-2\">\n        <div class=\"mb-2 rounded px-4 py-2 hover:bg-gray-100\">首页</div>\n        <div class=\"mb-2 rounded px-4 py-2 hover:bg-gray-100\">用户管理</div>\n        <div class=\"mb-2 rounded px-4 py-2 hover:bg-gray-100\">系统设置</div>\n      </div>\n    </template>\n\n    <template #default>\n      <div class=\"p-4\">\n        <h2 class=\"mb-4 text-lg font-bold\">内容区域</h2>\n        <p>这是主要内容区域</p>\n      </div>\n    </template>\n\n    <template #footer>\n      <div class=\"text-center text-sm text-gray-500\">© 2025 管理系统</div>\n    </template>\n  </VbenLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { VbenLayout } from '@cimom/vben-core-ui-kit-layout-ui';\nimport { ref } from 'vue';\n\nconst sidebarCollapse = ref(false);\nconst sidebarExpandOnHover = ref(true);\n</script>\n```\n\n### 混合导航模式\n\n```vue\n<template>\n  <VbenLayout\n    v-model:sidebarCollapse=\"sidebarCollapse\"\n    layout=\"mixed-nav\"\n    :headerHeight=\"60\"\n    :sidebarMixedWidth=\"80\"\n    :sidebarWidth=\"200\"\n  >\n    <template #header>\n      <div class=\"flex h-full items-center px-4\">\n        <h1 class=\"text-xl font-bold\">管理系统</h1>\n        <div class=\"flex-1\"></div>\n        <div class=\"flex items-center space-x-4\">\n          <span>用户名</span>\n          <button>退出</button>\n        </div>\n      </div>\n    </template>\n\n    <template #sidebar>\n      <div class=\"flex flex-col items-center py-4\">\n        <div class=\"mb-4 cursor-pointer p-4\">\n          <svg\n            class=\"h-6 w-6\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\n            ></path>\n          </svg>\n          <div class=\"mt-1 text-xs\">首页</div>\n        </div>\n        <div class=\"mb-4 cursor-pointer p-4\">\n          <svg\n            class=\"h-6 w-6\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"\n            ></path>\n          </svg>\n          <div class=\"mt-1 text-xs\">用户</div>\n        </div>\n        <div class=\"cursor-pointer p-4\">\n          <svg\n            class=\"h-6 w-6\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\n            ></path>\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\n            ></path>\n          </svg>\n          <div class=\"mt-1 text-xs\">设置</div>\n        </div>\n      </div>\n    </template>\n\n    <template #sidebarExtra>\n      <div class=\"p-2\">\n        <div class=\"mb-2 rounded px-4 py-2 hover:bg-gray-100\">用户列表</div>\n        <div class=\"mb-2 rounded px-4 py-2 hover:bg-gray-100\">角色管理</div>\n        <div class=\"mb-2 rounded px-4 py-2 hover:bg-gray-100\">权限设置</div>\n      </div>\n    </template>\n\n    <template #default>\n      <div class=\"p-4\">\n        <h2 class=\"mb-4 text-lg font-bold\">用户管理</h2>\n        <p>这是用户管理页面的内容</p>\n      </div>\n    </template>\n  </VbenLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { VbenLayout } from '@cimom/vben-core-ui-kit-layout-ui';\nimport { ref } from 'vue';\n\nconst sidebarCollapse = ref(false);\n</script>\n```\n\n### 响应式布局\n\n```vue\n<template>\n  <VbenLayout\n    v-model:sidebarCollapse=\"sidebarCollapse\"\n    layout=\"sidebar-nav\"\n    :isMobile=\"isMobile\"\n    :headerHeight=\"60\"\n    :sidebarWidth=\"200\"\n    :sideCollapseWidth=\"64\"\n  >\n    <!-- 布局内容 -->\n  </VbenLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { VbenLayout } from '@cimom/vben-core-ui-kit-layout-ui';\nimport { ref, onMounted, onUnmounted } from 'vue';\n\nconst sidebarCollapse = ref(false);\nconst isMobile = ref(false);\n\nconst checkIsMobile = () => {\n  isMobile.value = window.innerWidth < 768;\n  if (isMobile.value) {\n    sidebarCollapse.value = true;\n  }\n};\n\nonMounted(() => {\n  checkIsMobile();\n  window.addEventListener('resize', checkIsMobile);\n});\n\nonUnmounted(() => {\n  window.removeEventListener('resize', checkIsMobile);\n});\n</script>\n```\n","readmeFilename":"README.md"}