## 目标 完成侧边栏布局  ### 调整布局样式 由于我们的侧边栏的布局颜色是白色，但是我们的背景也是白色，所以开发起来会不太方便，接下来我们先调整一下整个布局的颜色。 ### 创建样式文件夹 在assets目录下创建一个styles的文件用于存放我们的样式信息。 然后再styles中创建一个index.css文件作为样式的入口。 我们在定义一个vars.css用于存放我们的css-var的全局变量。 我们在var.css中来写公共变量如下： ```css html{ --pro-admin-layout-content-bg: #f0f2f5; } ``` 在index.css中导出 ```css @import "vars.css"; ``` 在main.ts导入 ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import '@unocss/reset/tailwind.css' + import '~/assets/styles/index.css' import 'uno.css' import router from '~/routes' // console.log(import.meta.env.VITE_APP_BASE) const pinia = createPinia() const meta = document.createElement('meta') meta.name = 'naive-ui-style' document.head.appendChild(meta) const app = createApp(App) app.use(router) app.use(pinia) app.mount('#app') ``` 在mix-layout/index.vue中，改造内容布局 ```html ``` ### 封装layout-content 后续我们增加其他布局的时候，我们也会用到n-layout-content所以我们不能每次都处理，我们处理一次后直接封装成一个组件，方便我们后续的使用。 我们在common目录下创建一个layout-content.vue的文件。 ```vue ``` ### 改造common 我们在common目录下增加一个index.ts文件，然后我们从index.ts中将我们组件进行导出，方便我们后续扩展组件引用。 ```typescript import Title from './title.vue' import Logo from './logo.vue' import LayoutContent from './layout-content.vue' export { Title, Logo, LayoutContent, } ``` 然后在mix-layout/index.vue中调整组件导入： 将 ```typescript import Logo from '~/layouts/common/logo.vue' import Title from '~/layouts/common/title.vue' ``` 改为： ```typescript import { Logo,LayoutContent,Title } from '~/layouts/common' ``` 然后我们将下面的n-layout-content替换成LayoutContent即可 ### 侧边栏开发 我们的侧边栏本身也会在多种布局中使用，所以我们也需要将它封装到我们的layouts的公共组件中。 在common中创建一个layout-sider.vue的文件。 ```vue ``` 替换mix-layout/index.vue中的n-layout-sider为LayoutSider ### 全局主题配置 接下来我们需要在全局配置一下默认情况下我们的侧边栏的宽度，以及收起的情况下我们侧边栏的宽度。 在config/layout-theme.ts中： ```typescript import logo from '~/assets/vue.svg' export interface LayoutTheme { title?: string layout: 'mix' | 'side' | 'top' headerHeight: number logo?: string siderWidth: number // 侧边栏宽度 siderCollapsedWidth: number // 侧边栏收起的宽度 showSiderTrigger: boolean | 'bar' | 'arrow-circle' // 侧边栏默认的触发方式 } export const layoutThemeConfig: LayoutTheme = { title: 'Naive Admin Pro', layout: 'mix', headerHeight: 48, logo, siderWidth: 240, siderCollapsedWidth: 48, showSiderTrigger: 'bar', } ``` 在mix-layout中定义属性接收 ```typescript const props = withDefaults(defineProps<{ headerHeight?: number logo?: string title?: string siderWidth?: number siderCollapsedWidth?: number showSiderTrigger?: boolean | 'bar' | 'arrow-circle' }>(), { headerHeight: 48, siderWidth: 240, siderCollapsedWidth: 48, }) ``` 然后传给我们的LayoutSider组件。 ```vue 海淀桥 ``` 最后我们在base-layout中配置查看效果： ```html 测试右侧插槽 ``` 最后我们发现，侧边栏收起默认情况下，没有改变实际的宽度，只是移动了它的位置，这不是我们想要的效果，所以我们在layout-sider.vue中更改collapse-mode属性为width，后测试效果，文字不会被收起看不到了。
