{"_id":"@cimom/vben-effects-layouts","_rev":"12-8a11a0fc6bd72eac24088ba0fe47ba23","name":"@cimom/vben-effects-layouts","dist-tags":{"latest":"5.6.13"},"versions":{"5.5.9":{"name":"@cimom/vben-effects-layouts","version":"5.5.9","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@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":"dd0b292dfe69f896ba0a8f1ef1161551559f435b","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.5.9.tgz","fileCount":123,"integrity":"sha512-Zj40CIwBcj7aAgOU//1tUpa4l0cOkTRsyKVK1us4ioQypLPg7RCIjTn9wh5GytR7tAC/m9M4ItpFrcprZwacAA==","signatures":[{"sig":"MEUCIQCyMok47BM/aUB6jg9QImRpP4SKcvPjzrYh872HuaAwaQIgSR4xSODNWlngsy6wps91zU8zqXT/NtglfrdpNFN7xVg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":372404},"type":"module","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"}},"private":false,"scripts":{"build":"pnpm unbuild"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"^5.5.9","@cimom/vben-types":"^5.5.9","@cimom/vben-utils":"^5.5.9","@cimom/vben-stores":"^5.5.9","@cimom/vben-locales":"^5.5.9","@cimom/vben-constants":"^5.5.9","@cimom/vben-core-shared":"^5.5.9","@cimom/vben-preferences":"^5.5.9","@cimom/vben-core-form-ui":"^5.5.9","@cimom/vben-core-menu-ui":"^5.5.9","@cimom/vben-core-tabs-ui":"^5.5.9","@cimom/vben-core-popup-ui":"^5.5.9","@cimom/vben-effects-hooks":"^5.5.9","@cimom/vben-core-layout-ui":"^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-effects-layouts_5.5.9_1748417608392_0.2389557355782188","host":"s3://npm-registry-packages-npm-production"}},"5.6.1":{"name":"@cimom/vben-effects-layouts","version":"5.6.1","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@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":"8d2b5744eab4bccd3c2eabb4a745e574eabe6027","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.6.1.tgz","fileCount":123,"integrity":"sha512-AFK/HaY71FKbRYIqPOAjlL5rLUcCJvgJ0bOtmrn7XGSZaiW1iM43Lx7vsEi542z1ThRy0Vdqov69+yRFoPdiAQ==","signatures":[{"sig":"MEUCIQDZRbBMBk3SHO+aOQNZfY+ntRRNXg3RXDiKPlMYsXDqxAIgLAsXD42lZXJTkmhmRdHfbC4uc7zpLrxaaD8RX5DYw7s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":372390},"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/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"^5.6.1","@cimom/vben-types":"^5.6.1","@cimom/vben-utils":"^5.6.1","@cimom/vben-stores":"^5.6.1","@cimom/vben-locales":"^5.6.2","@cimom/vben-constants":"^5.6.0","@cimom/vben-core-shared":"^5.6.1","@cimom/vben-preferences":"^5.6.1","@cimom/vben-core-form-ui":"^5.6.1","@cimom/vben-core-menu-ui":"^5.6.1","@cimom/vben-core-tabs-ui":"^5.6.1","@cimom/vben-core-popup-ui":"^5.6.1","@cimom/vben-effects-hooks":"^5.6.0","@cimom/vben-core-layout-ui":"^5.6.1","@cimom/vben-core-shadcn-ui":"^5.6.0","@cimom/vben-core-composables":"^5.6.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-effects-layouts_5.6.1_1749447441236_0.758274259936135","host":"s3://npm-registry-packages-npm-production"}},"5.6.3":{"name":"@cimom/vben-effects-layouts","version":"5.6.3","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@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":"e9fb66b0c49e3e697210e0368da739917fac50b1","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.6.3.tgz","fileCount":123,"integrity":"sha512-GcNV5/KTvxwFemS5rT9ZoWdIAOWArcVnxNoMwq9xIqh6/90nZ4zAghNDNqScuXNpt8zTQbkDIFbHVeBcxtUxyg==","signatures":[{"sig":"MEUCIQC8qRacrUD0TcvOSy/PLg8PBidRyDBM+cIUYWcgrPOGjgIgU2lUQYIKGgaDaN+8tUux8gz+OVaFLSTVB2G9TDAJ7/k=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":372342},"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/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-core-shared":"*","@cimom/vben-preferences":"*","@cimom/vben-core-form-ui":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-core-tabs-ui":"*","@cimom/vben-core-popup-ui":"*","@cimom/vben-effects-hooks":"*","@cimom/vben-core-layout-ui":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-effects-layouts_5.6.3_1749457709229_0.37065970718500263","host":"s3://npm-registry-packages-npm-production"}},"5.6.4":{"name":"@cimom/vben-effects-layouts","version":"5.6.4","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@5.6.4","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":"3d891e17137fb0e4977071b8abf9d9d48850631c","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.6.4.tgz","fileCount":217,"integrity":"sha512-wJQc5UDMFOGjaeIs7ygvjjO1bZk0dzFqauiAmUsy5+SkrsBvANE/2UXW6k1OVGzesGiGnsosN817Zhkwfo7JaQ==","signatures":[{"sig":"MEUCIQCz26eJVc2j8/MM1xgE3iDZZ5nsZ4nD2zRbaZhLoOZFawIgESHzOeb9BHpAuYwk6CBgqI93qJm7wOxay3fVMODOSBY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":726101},"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/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-core-shared":"*","@cimom/vben-preferences":"*","@cimom/vben-core-form-ui":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-core-tabs-ui":"*","@cimom/vben-core-popup-ui":"*","@cimom/vben-effects-hooks":"*","@cimom/vben-core-layout-ui":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-effects-layouts_5.6.4_1749567178412_0.4847036970904728","host":"s3://npm-registry-packages-npm-production"}},"5.6.5":{"name":"@cimom/vben-effects-layouts","version":"5.6.5","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@5.6.5","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":"21dcb52b73573ad9e7e2c5b51bc6316f2ef7a4d0","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.6.5.tgz","fileCount":217,"integrity":"sha512-iBvvDtktEl7ZRyQWLG0ipodz95aCufT3lEkZfSLRDThfpMMUfqJvQJAdyms3fUbarZE19ha4HuI1TAlEGxlwUQ==","signatures":[{"sig":"MEUCIHoXzzRrhcZVjvbke3TrGyHm5Fjeiqliu4br4PSdP7YmAiEA+N29WUcI0QODYn9uj797IvG7vQJjlVEtFECD1JGODlY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":726096},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"}},"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/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-core-shared":"*","@cimom/vben-preferences":"*","@cimom/vben-core-form-ui":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-core-tabs-ui":"*","@cimom/vben-core-popup-ui":"*","@cimom/vben-effects-hooks":"*","@cimom/vben-core-layout-ui":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-effects-layouts_5.6.5_1749567678443_0.18462434496949998","host":"s3://npm-registry-packages-npm-production"}},"5.6.8":{"name":"@cimom/vben-effects-layouts","version":"5.6.8","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@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":"583c5dd8abee54901cf4b52744bccb3b6b464eba","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.6.8.tgz","fileCount":217,"integrity":"sha512-Rco1WrGoTFd1J/dyWu0psDK3Lz0tgUfYSmNI3As4HmUayzjl8zPZaPOeMBW+GT3Pib+17+ZidrtWMatyvqsMgQ==","signatures":[{"sig":"MEQCIBTCrm3gAxZNR5+UVaPVNXmjY/MMVV2N6Wmrivz1PmLCAiAV0tiIDRxR+Ry3m6EXHQuOgp+x7iahHTLSuceH3ZLefw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":726750},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"}},"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/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-core-shared":"*","@cimom/vben-preferences":"*","@cimom/vben-core-form-ui":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-core-tabs-ui":"*","@cimom/vben-core-popup-ui":"*","@cimom/vben-effects-hooks":"*","@cimom/vben-core-layout-ui":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-effects-layouts_5.6.8_1749568883036_0.5371874645674763","host":"s3://npm-registry-packages-npm-production"}},"5.6.9":{"name":"@cimom/vben-effects-layouts","version":"5.6.9","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@5.6.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":"b80e0fe3fff81257c462a6c7f6fc3850e66aba3a","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.6.9.tgz","fileCount":217,"integrity":"sha512-tfJU4IZ7xDzwSTSLw0tMviQtYmt5RqV8rT8q+dFmlUAYK4XPK93p3VI7JVv4xaAcKdXZLUGPnPCFp9xzVoojOw==","signatures":[{"sig":"MEUCIQCdibF62yL1BAy95TY7IzINUOrJjl/eL1hZVf1hH8sezwIgEwOxZRd8mdwSjUaDYqIb5l8zvWPH7erwiF0rKjnIn3c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":727076},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"}},"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/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-core-shared":"*","@cimom/vben-preferences":"*","@cimom/vben-core-form-ui":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-core-tabs-ui":"*","@cimom/vben-core-popup-ui":"*","@cimom/vben-effects-hooks":"*","@cimom/vben-core-layout-ui":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-preferences":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-effects-hooks":"*"},"_npmOperationalInternal":{"tmp":"tmp/vben-effects-layouts_5.6.9_1749606451922_0.5703767850759742","host":"s3://npm-registry-packages-npm-production"}},"5.6.10":{"name":"@cimom/vben-effects-layouts","version":"5.6.10","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@5.6.10","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":"13494e7e6fe228083c97272b1a3826e15c465ed0","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.6.10.tgz","fileCount":217,"integrity":"sha512-Cx2ug4s1nwKrT1pyPE2jAYFUe/hNr0bEfR+qJyRpDUplEa0oiKCmMVZFBxNLhgGzjMSaH2s2Fg5HhkAm3sNvRQ==","signatures":[{"sig":"MEUCIQD46z8H7ba/E1QLq0xtJq3sbusRRLxE111OKINml/flWQIgWSFdrZwm4hkA7GWAy3crgMLcGcPT+V6czBwCul9Rfbs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":727005},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"}},"gitHead":"b29642e86aa164ee8f7b25f06929356491389266","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/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-core-shared":"*","@cimom/vben-preferences":"*","@cimom/vben-core-form-ui":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-core-tabs-ui":"*","@cimom/vben-core-popup-ui":"*","@cimom/vben-effects-hooks":"*","@cimom/vben-core-layout-ui":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-preferences":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-effects-hooks":"*"},"_npmOperationalInternal":{"tmp":"tmp/vben-effects-layouts_5.6.10_1749609864489_0.6693116423674195","host":"s3://npm-registry-packages-npm-production"}},"5.6.11":{"name":"@cimom/vben-effects-layouts","version":"5.6.11","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@5.6.11","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":"b2118b6efc8f0a7f480b0c87e6df35b2fdb7aab5","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.6.11.tgz","fileCount":217,"integrity":"sha512-3mbDw7GcSiS+gfIlh01nSnsmSRBOJPrKS5WLzElaanMVQ5//Pmrzq0OX9FtbUSIuqc8xfxx+BpdWS7/uZACMWQ==","signatures":[{"sig":"MEQCIA5aofsk9Doh629tCMVLfKiyR3GaCwnNxY3KW/1tUmWLAiBcV/N5vc7X5o08Wsh9f1SXo0aPduO2M08RTz59DrqP/Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":730809},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"}},"gitHead":"b29642e86aa164ee8f7b25f06929356491389266","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/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-core-shared":"*","@cimom/vben-preferences":"*","@cimom/vben-core-form-ui":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-core-tabs-ui":"*","@cimom/vben-core-popup-ui":"*","@cimom/vben-effects-hooks":"*","@cimom/vben-core-layout-ui":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-preferences":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-effects-hooks":"*"},"_npmOperationalInternal":{"tmp":"tmp/vben-effects-layouts_5.6.11_1749611029121_0.09627462781386664","host":"s3://npm-registry-packages-npm-production"}},"5.6.12":{"name":"@cimom/vben-effects-layouts","version":"5.6.12","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@5.6.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":"1393bf299f9724f6f737a4a89406e2fc7128b739","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.6.12.tgz","fileCount":217,"integrity":"sha512-DcZeJHlvpTmKVpDgFPmw+lcqVRgrOjoYOpETq1VcTLf4dhCfZkpuTvw/2rWFW+y8Zc7wj5nvTq2fn3kDw030Og==","signatures":[{"sig":"MEYCIQCQ2VyFZoaEcesOIvsFpXYadL11hetPJmvtaULoar5KRwIhAMmM7q/CHX0GeV8628F0q1A1ZIVp9K0T0d+esjDJfv5o","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":730814},"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/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-core-shared":"*","@cimom/vben-preferences":"*","@cimom/vben-core-form-ui":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-core-tabs-ui":"*","@cimom/vben-core-popup-ui":"*","@cimom/vben-effects-hooks":"*","@cimom/vben-core-layout-ui":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-preferences":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-effects-hooks":"*"},"_npmOperationalInternal":{"tmp":"tmp/vben-effects-layouts_5.6.12_1749624525760_0.7490955720626682","host":"s3://npm-registry-packages-npm-production"}},"5.6.13":{"name":"@cimom/vben-effects-layouts","version":"5.6.13","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-effects-layouts@5.6.13","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":"f5c3211fa034b92c9ab0a819a0c6c0312628915c","tarball":"https://registry.npmjs.org/@cimom/vben-effects-layouts/-/vben-effects-layouts-5.6.13.tgz","fileCount":217,"integrity":"sha512-PPQeUUFDSpYe3W/U/WHexCPTQiltidYi+3n686KUnPSFnG02OkNZBH+uap9JHyoSYYadbEzDUKlsjakpInSx2Q==","signatures":[{"sig":"MEUCIQCfxneD4bbGhduhiRh4SGuNT/LJoleT8CH7vWnCwDpTUAIgDsLpht8gTcihC1ShngLYb14jJ6xVz5rE8v2lrky3x8I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":732218},"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/effects/layouts"},"_npmVersion":"10.5.1","description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.0.0","dependencies":{"vue":"^3.5.13","vue-router":"^4.5.1","@vueuse/core":"^13.1.0","@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-core-shared":"*","@cimom/vben-preferences":"*","@cimom/vben-core-form-ui":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-core-tabs-ui":"*","@cimom/vben-core-popup-ui":"*","@cimom/vben-effects-hooks":"*","@cimom/vben-core-layout-ui":"*","@cimom/vben-core-shadcn-ui":"*","@cimom/vben-core-composables":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@cimom/vben-icons":"*","@cimom/vben-types":"*","@cimom/vben-utils":"*","@cimom/vben-stores":"*","@cimom/vben-locales":"*","@cimom/vben-constants":"*","@cimom/vben-preferences":"*","@cimom/vben-core-menu-ui":"*","@cimom/vben-effects-hooks":"*"},"_npmOperationalInternal":{"tmp":"tmp/vben-effects-layouts_5.6.13_1749626932812_0.36704101040019377","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-05-28T07:33:28.311Z","modified":"2026-01-14T01:37:37.344Z","5.5.9":"2025-05-28T07:33:28.566Z","5.6.1":"2025-06-09T05:37:21.462Z","5.6.3":"2025-06-09T08:28:29.452Z","5.6.4":"2025-06-10T14:52:58.622Z","5.6.5":"2025-06-10T15:01:18.655Z","5.6.8":"2025-06-10T15:21:23.262Z","5.6.9":"2025-06-11T01:47:32.173Z","5.6.10":"2025-06-11T02:44:24.667Z","5.6.11":"2025-06-11T03:03:49.295Z","5.6.12":"2025-06-11T06:48:45.958Z","5.6.13":"2025-06-11T07:28:53.000Z"},"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/effects/layouts"},"description":"提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。","maintainers":[{"email":"msj1370380114@gmail.com","name":"moushangjie"},{"email":"57237184@qq.com","name":"hdeqi2005"},{"email":"6983376@qq.com","name":"xxcazzy"}],"readme":"# @cimom/vben-effects-layouts\n\n提供多种布局组件和布局系统，用于构建管理系统的整体页面结构。该包继承了核心布局组件的能力，并扩展了更多业务场景下的布局方案。\n\n## 安装\n\n```bash\n# 进入目标应用目录，例如 apps/xxxx-app\n# cd apps/xxxx-app\npnpm add @cimom/vben-effects-layouts\n```\n\n## 基本使用\n\n```ts\n// 导入布局组件\nimport {\n  BasicLayout,\n  AuthenticationLayout,\n  IframeLayout,\n} from '@cimom/vben-effects-layouts';\n\n// 导入布局小部件\nimport {\n  HeaderLogo,\n  HeaderMenu,\n  SideMenu,\n  TabBar,\n} from '@cimom/vben-effects-layouts';\n```\n\n## 布局类型\n\n### BasicLayout 基础布局\n\n提供标准的管理系统布局，包含顶部导航栏、侧边菜单、标签页和内容区域。\n\n```vue\n<template>\n  <BasicLayout>\n    <template #header-left-1>\n      <HeaderLogo />\n    </template>\n    <template #header-left-2>\n      <HeaderMenu />\n    </template>\n    <template #header-right-1>\n      <ThemeToggle />\n    </template>\n    <template #header-right-2>\n      <UserDropdown />\n    </template>\n\n    <!-- 路由视图 -->\n    <router-view />\n  </BasicLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  BasicLayout,\n  HeaderLogo,\n  HeaderMenu,\n  ThemeToggle,\n  UserDropdown,\n} from '@cimom/vben-effects-layouts';\n</script>\n```\n\n#### 插槽说明\n\nBasicLayout 提供了丰富的插槽，用于自定义布局的各个部分：\n\n- **header-left-n**: 顶部导航栏左侧插槽，n 为 0-19 的数字，breadcrumb 为 21-x\n- **header-right-n**: 顶部导航栏右侧插槽，n 为 0-49，其他特定组件有固定范围：\n  - global-search: 50\n  - theme-toggle: 51-59\n  - language-toggle: 61-69\n  - fullscreen: 71-79\n  - notification: 81-89\n  - user-dropdown: 91-149\n  - 其他自定义组件: 151-x\n- **menu**: 自定义整个菜单区域\n- **footer**: 自定义页脚区域\n- **content**: 自定义内容区域\n- **tabbar**: 自定义标签页区域\n\n#### 属性说明\n\n| 属性 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `showLogo` | `boolean` | `true` | 是否显示 Logo |\n| `showFooter` | `boolean` | `true` | 是否显示页脚 |\n| `showBreadcrumb` | `boolean` | `true` | 是否显示面包屑 |\n| `showTabs` | `boolean` | `true` | 是否显示标签页 |\n| `showSidebar` | `boolean` | `true` | 是否显示侧边栏 |\n| `showHeader` | `boolean` | `true` | 是否显示顶部导航栏 |\n| `fixedHeader` | `boolean` | `true` | 是否固定顶部导航栏 |\n| `fixedSidebar` | `boolean` | `true` | 是否固定侧边栏 |\n| `contentMode` | `'full' \\| 'fixed'` | `'fixed'` | 内容区域模式 |\n| `menuMode` | `'vertical' \\| 'horizontal' \\| 'inline'` | `'vertical'` | 菜单模式 |\n| `menuTheme` | `'light' \\| 'dark'` | `'light'` | 菜单主题 |\n| `menuWidth` | `number` | `210` | 菜单宽度 |\n| `collapsedWidth` | `number` | `48` | 菜单折叠时的宽度 |\n| `collapsed` | `boolean` | `false` | 是否折叠菜单 |\n\n### AuthenticationLayout 认证布局\n\n提供登录、注册、找回密码等认证页面的布局。\n\n```vue\n<template>\n  <AuthenticationLayout\n    :title=\"title\"\n    :desc=\"desc\"\n    :backgroundUrl=\"backgroundUrl\"\n  >\n    <LoginForm @login=\"handleLogin\" />\n  </AuthenticationLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { AuthenticationLayout } from '@cimom/vben-effects-layouts';\nimport { LoginForm } from '@/components/login-form';\n\nconst title = ref('系统登录');\nconst desc = ref('欢迎使用管理系统');\nconst backgroundUrl = ref('/images/login-bg.jpg');\n\nconst handleLogin = (formData) => {\n  // 处理登录逻辑\n};\n</script>\n```\n\n#### 属性说明\n\n| 属性                 | 类型      | 默认值 | 说明             |\n| -------------------- | --------- | ------ | ---------------- |\n| `title`              | `string`  | `''`   | 标题             |\n| `desc`               | `string`  | `''`   | 描述文本         |\n| `backgroundUrl`      | `string`  | `''`   | 背景图片 URL     |\n| `logoUrl`            | `string`  | `''`   | Logo URL         |\n| `showLanguageToggle` | `boolean` | `true` | 是否显示语言切换 |\n| `showThemeToggle`    | `boolean` | `true` | 是否显示主题切换 |\n\n### IframeLayout Iframe 布局\n\n提供嵌入外部网页的布局。\n\n```vue\n<template>\n  <IframeLayout :src=\"iframeSrc\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { IframeLayout } from '@cimom/vben-effects-layouts';\n\nconst iframeSrc = ref('https://example.com');\n</script>\n```\n\n#### 属性说明\n\n| 属性      | 类型               | 默认值   | 说明               |\n| --------- | ------------------ | -------- | ------------------ |\n| `src`     | `string`           | `''`     | iframe 的 src 属性 |\n| `loading` | `boolean`          | `false`  | 是否显示加载状态   |\n| `height`  | `string \\| number` | `'100%'` | iframe 高度        |\n| `width`   | `string \\| number` | `'100%'` | iframe 宽度        |\n\n## 布局小部件\n\n### 顶部导航栏组件\n\n#### HeaderLogo 顶部 Logo\n\n```vue\n<template>\n  <HeaderLogo :showTitle=\"true\" :logo=\"logoUrl\" :title=\"title\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { HeaderLogo } from '@cimom/vben-effects-layouts';\n\nconst logoUrl = '/logo.png';\nconst title = '管理系统';\n</script>\n```\n\n#### HeaderMenu 顶部菜单\n\n```vue\n<template>\n  <HeaderMenu :menus=\"menus\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { HeaderMenu } from '@cimom/vben-effects-layouts';\n\nconst menus = [\n  {\n    path: '/dashboard',\n    title: '仪表盘',\n    icon: 'dashboard',\n  },\n  {\n    path: '/system',\n    title: '系统管理',\n    icon: 'setting',\n    children: [\n      {\n        path: '/system/user',\n        title: '用户管理',\n      },\n      {\n        path: '/system/role',\n        title: '角色管理',\n      },\n    ],\n  },\n];\n</script>\n```\n\n#### Breadcrumb 面包屑\n\n```vue\n<template>\n  <Breadcrumb :items=\"breadcrumbItems\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { Breadcrumb } from '@cimom/vben-effects-layouts';\n\nconst breadcrumbItems = [\n  { title: '首页', path: '/' },\n  { title: '系统管理', path: '/system' },\n  { title: '用户管理', path: '/system/user' },\n];\n</script>\n```\n\n### 侧边栏组件\n\n#### SideMenu 侧边菜单\n\n```vue\n<template>\n  <SideMenu\n    :menus=\"menus\"\n    :collapsed=\"collapsed\"\n    :theme=\"menuTheme\"\n    @select=\"handleMenuSelect\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SideMenu } from '@cimom/vben-effects-layouts';\n\nconst collapsed = ref(false);\nconst menuTheme = ref('light');\n\nconst menus = [\n  // 菜单数据...\n];\n\nconst handleMenuSelect = (key) => {\n  console.log('Selected menu:', key);\n};\n</script>\n```\n\n### 标签页组件\n\n#### TabBar 标签页\n\n```vue\n<template>\n  <TabBar\n    :tabs=\"tabs\"\n    :activeKey=\"activeTabKey\"\n    @change=\"handleTabChange\"\n    @close=\"handleTabClose\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { TabBar } from '@cimom/vben-effects-layouts';\n\nconst tabs = ref([\n  { key: '/dashboard', title: '仪表盘' },\n  { key: '/system/user', title: '用户管理' },\n]);\nconst activeTabKey = ref('/dashboard');\n\nconst handleTabChange = (key) => {\n  activeTabKey.value = key;\n};\n\nconst handleTabClose = (key) => {\n  tabs.value = tabs.value.filter((tab) => tab.key !== key);\n};\n</script>\n```\n\n### 其他组件\n\n#### ThemeToggle 主题切换\n\n```vue\n<template>\n  <ThemeToggle />\n</template>\n\n<script setup lang=\"ts\">\nimport { ThemeToggle } from '@cimom/vben-effects-layouts';\n</script>\n```\n\n#### LanguageToggle 语言切换\n\n```vue\n<template>\n  <LanguageToggle />\n</template>\n\n<script setup lang=\"ts\">\nimport { LanguageToggle } from '@cimom/vben-effects-layouts';\n</script>\n```\n\n#### FullscreenToggle 全屏切换\n\n```vue\n<template>\n  <FullscreenToggle />\n</template>\n\n<script setup lang=\"ts\">\nimport { FullscreenToggle } from '@cimom/vben-effects-layouts';\n</script>\n```\n\n#### UserDropdown 用户下拉菜单\n\n```vue\n<template>\n  <UserDropdown :user=\"user\" @logout=\"handleLogout\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { UserDropdown } from '@cimom/vben-effects-layouts';\n\nconst user = {\n  name: 'Admin',\n  avatar: '/avatar.jpg',\n};\n\nconst handleLogout = () => {\n  // 处理登出逻辑\n};\n</script>\n```\n\n## 高级用法\n\n### 自定义布局\n\n通过组合使用布局组件和小部件，可以创建自定义的布局：\n\n```vue\n<template>\n  <BasicLayout\n    :menuMode=\"menuMode\"\n    :collapsed=\"collapsed\"\n    :showTabs=\"showTabs\"\n    :showFooter=\"showFooter\"\n  >\n    <!-- 自定义顶部左侧区域 -->\n    <template #header-left-1>\n      <HeaderLogo :showTitle=\"!collapsed\" />\n    </template>\n    <template #header-left-2>\n      <Breadcrumb v-if=\"menuMode === 'vertical'\" />\n      <HeaderMenu v-else :menus=\"menus\" />\n    </template>\n\n    <!-- 自定义顶部右侧区域 -->\n    <template #header-right-1>\n      <FullscreenToggle />\n    </template>\n    <template #header-right-2>\n      <ThemeToggle />\n    </template>\n    <template #header-right-3>\n      <LanguageToggle />\n    </template>\n    <template #header-right-4>\n      <UserDropdown :user=\"user\" @logout=\"handleLogout\" />\n    </template>\n\n    <!-- 自定义页脚 -->\n    <template #footer>\n      <div class=\"custom-footer\">\n        © {{ new Date().getFullYear() }} My Company\n      </div>\n    </template>\n\n    <!-- 路由视图 -->\n    <router-view v-slot=\"{ Component }\">\n      <transition name=\"fade\" mode=\"out-in\">\n        <component :is=\"Component\" />\n      </transition>\n    </router-view>\n  </BasicLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport {\n  BasicLayout,\n  HeaderLogo,\n  Breadcrumb,\n  HeaderMenu,\n  FullscreenToggle,\n  ThemeToggle,\n  LanguageToggle,\n  UserDropdown,\n} from '@cimom/vben-effects-layouts';\n\nconst menuMode = ref('vertical');\nconst collapsed = ref(false);\nconst showTabs = ref(true);\nconst showFooter = ref(true);\nconst menus = [\n  /* 菜单数据 */\n];\nconst user = { name: 'Admin', avatar: '/avatar.jpg' };\n\nconst handleLogout = () => {\n  // 处理登出逻辑\n};\n</script>\n\n<style scoped>\n.custom-footer {\n  text-align: center;\n  padding: 16px;\n}\n\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.3s;\n}\n\n.fade-enter-from,\n.fade-leave-to {\n  opacity: 0;\n}\n</style>\n```\n\n### 响应式布局\n\n布局组件支持响应式设计，可以根据屏幕尺寸自动调整：\n\n```vue\n<template>\n  <BasicLayout\n    :menuMode=\"isMobile ? 'vertical' : menuMode\"\n    :collapsed=\"isMobile || collapsed\"\n    :showTabs=\"!isMobile && showTabs\"\n  >\n    <!-- 布局内容 -->\n  </BasicLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { BasicLayout } from '@cimom/vben-effects-layouts';\nimport { useIsMobile } from '@cimom/vben-effects-hooks';\n\nconst menuMode = ref('horizontal');\nconst collapsed = ref(false);\nconst showTabs = ref(true);\nconst { isMobile } = useIsMobile();\n</script>\n```\n\n### 动态切换布局\n\n可以根据路由或用户偏好动态切换布局：\n\n```vue\n<template>\n  <component :is=\"layoutComponent\">\n    <router-view />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { useRoute } from 'vue-router';\nimport {\n  BasicLayout,\n  AuthenticationLayout,\n  IframeLayout,\n} from '@cimom/vben-effects-layouts';\n\nconst route = useRoute();\n\nconst layoutComponent = computed(() => {\n  const layoutType = route.meta.layout;\n\n  switch (layoutType) {\n    case 'auth':\n      return AuthenticationLayout;\n    case 'iframe':\n      return IframeLayout;\n    default:\n      return BasicLayout;\n  }\n});\n</script>\n```\n\n## 与其他包的集成\n\n### 与 @cimom/vben-stores 集成\n\n```vue\n<script setup lang=\"ts\">\nimport { BasicLayout } from '@cimom/vben-effects-layouts';\nimport { useUserStore, useMenuStore, useTabStore } from '@cimom/vben-stores';\n\nconst userStore = useUserStore();\nconst menuStore = useMenuStore();\nconst tabStore = useTabStore();\n\n// 使用 store 中的数据\nconst menus = menuStore.menus;\nconst tabs = tabStore.tabs;\nconst user = userStore.userInfo;\n</script>\n```\n\n### 与 @cimom/vben-preferences 集成\n\n```vue\n<script setup lang=\"ts\">\nimport { BasicLayout } from '@cimom/vben-effects-layouts';\nimport { usePreferences } from '@cimom/vben-preferences';\n\nconst { preferences, updatePreferences } = usePreferences();\n\n// 根据用户偏好设置布局\nconst menuMode = computed(() => preferences.menuMode || 'vertical');\nconst menuTheme = computed(() => preferences.menuTheme || 'light');\nconst collapsed = computed(() => preferences.collapsed || false);\n\n// 更新用户偏好\nconst toggleCollapsed = () => {\n  updatePreferences({\n    collapsed: !collapsed.value,\n  });\n};\n</script>\n```\n\n## 注意事项\n\n1. 布局组件依赖于多个核心组件包，确保它们已正确安装。\n2. 使用 `BasicLayout` 时，建议在路由配置中设置相应的元数据，以便自动生成面包屑和标签页。\n3. 响应式布局需要配合 `@cimom/vben-effects-hooks` 中的 `useIsMobile` 等钩子使用。\n4. 自定义插槽时，注意插槽名称的命名规则，特别是顶部导航栏的左右侧插槽。\n\n## 常见问题\n\n### 布局组件不显示或样式错乱\n\n确保已正确导入样式文件，可以在入口文件中全局导入：\n\n```ts\n// main.ts\nimport '@cimom/vben-effects-layouts/dist/style.css';\n```\n\n### 菜单项不显示\n\n检查菜单数据格式是否正确，以及是否与路由配置匹配：\n\n```ts\n// 正确的菜单数据格式\nconst menus = [\n  {\n    path: '/dashboard',\n    title: '仪表盘',\n    icon: 'dashboard',\n  },\n  {\n    path: '/system',\n    title: '系统管理',\n    icon: 'setting',\n    children: [\n      {\n        path: '/system/user',\n        title: '用户管理',\n      },\n    ],\n  },\n];\n```\n\n### 标签页不自动生成\n\n确保路由配置中包含正确的元数据：\n\n```ts\n// router.ts\nconst routes = [\n  {\n    path: '/dashboard',\n    component: () => import('./views/dashboard/index.vue'),\n    meta: {\n      title: '仪表盘',\n      icon: 'dashboard',\n      affix: true, // 固定标签页\n    },\n  },\n];\n```\n","readmeFilename":"README.md"}