添加 ProLayout

README-zh_CN.md

@@ -39,13 +39,12 @@ app.mount('#app')
 ```
 ## 办事列表
 
-- [ ] 添加 ProLayout
+- [X] 添加 ProLayout
 - [ ] 添加 ProBreadcrumb
 - [ ] 添加 ProRadio
 - [ ] 添加 ProCheckbox
 - [X] 添加 ProForm base
 - [X] 添加 ProForm steps
-- [ ] 添加 ProForm tabs
 - [X] 添加 ProForm query
 - [ ] 添加 ProDataTable
 - [ ] 添加 ProCrud

README.md

@@ -38,13 +38,12 @@ app.mount('#app')
 ```
 ## List of things to do
 
-- [ ] Add a ProLayout
+- [X] Add a ProLayout
 - [ ] Add a ProBreadcrumb
 - [ ] Add a ProRadio
 - [ ] Add a ProCheckbox
 - [X] Add a ProForm base
 - [X] Add a ProForm steps
-- [ ] Add a ProForm tabs
 - [X] Add a ProForm query
 - [ ] Add a ProDataTable
 - [ ] Add a ProCrud

docs/.vitepress/locales/cn.ts

@@ -19,11 +19,20 @@ export const cnConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
             },
             {
                 text: '组件',
-                link: '/cn/form/index.md',
-                activeMatch: '/cn/form/index.md'
+                link: '/cn/layout/index.md',
+                activeMatch: '/cn/layout/index.md'
             }
         ],
         sidebar: [
+            {
+                text: '表单组件',
+                items: [
+                    {
+                        text: 'ProLayout',
+                        link: '/cn/layout/index.md'
+                    },
+                ]
+            },
             {
                 text: '表单组件',
                 items: [
@@ -41,7 +50,6 @@ export const cnConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                     },
                 ]
             },
-
         ],
     },
 

docs/cn/layout/index.md

@@ -0,0 +1,134 @@
+# ProLayout
+
+> 高级布局用于快速构建Admin视图
+
+## 基础用法
+
+:::demo
+```vue
+<script setup lang="ts">
+  import { h, ref } from 'vue'
+  import { Icon } from '@iconify/vue'
+
+  function renderIcon (icon: string) {
+    return () => h(Icon, {icon: icon})
+  }
+
+  const menuOptions = [
+    {
+      label: '且听风吟',
+      key: 'hear-the-wind-sing',
+      icon: renderIcon('ion:chevron-up-outline')
+    },
+    {
+      label: '1973年的弹珠玩具',
+      key: 'pinball-1973',
+      icon: renderIcon('ion:chevron-up-outline'),
+      disabled: true,
+      children: [
+        {
+          label: '鼠',
+          key: 'rat'
+        }
+      ]
+    },
+    {
+      label: '寻羊冒险记',
+      key: 'a-wild-sheep-chase',
+      disabled: true,
+      icon: renderIcon('ion:chevron-up-outline'),
+    },
+    {
+      label: '舞，舞，舞',
+      key: 'dance-dance-dance',
+      icon: renderIcon('ion:chevron-up-outline'),
+      children: [
+        {
+          type: 'group',
+          label: '人物',
+          key: 'people',
+          children: [
+            {
+              label: '叙事者',
+              key: 'narrator',
+              icon: renderIcon('ion:chevron-up-outline'),
+
+            },
+            {
+              label: '羊男',
+              key: 'sheep-man',
+
+            }
+          ]
+        },
+        {
+          label: '饮品',
+          key: 'beverage',
+          icon: renderIcon('ion:chevron-up-outline'),
+          children: [
+            {
+              label: '威士忌',
+              key: 'whisky'
+            }
+          ]
+        },
+        {
+          label: '食物',
+          key: 'food',
+          children: [
+            {
+              label: '三明治',
+              key: 'sandwich'
+            }
+          ]
+        },
+        {
+          label: '过去增多，未来减少',
+          key: 'the-past-increases-the-future-recedes'
+        }
+      ]
+    }
+  ]
+
+  const collapsed = ref(true)
+</script>
+
+<template>
+  <ProLayout :menus="menuOptions" v-model:collapsed="collapsed">
+    <template #actions>
+      <n-button>功能1</n-button>
+      <n-button>功能2</n-button>
+      <n-button>功能3</n-button>
+    </template>
+    <template #footer>
+      © 2024 Your Company. All rights reserved.
+    </template>
+    我是内容
+  </ProLayout>
+</template>
+```
+:::
+
+
+## Props
+
+| 参数                | 类型                                                          | 可选值 | 默认值 | 说明 |
+|-------------------|-------------------------------------------------------------|-----|-----|----|
+| title             | `string`                                                    | -   | -   |    |
+| isMobile          | `boolean`                                                   | -   | -   |    |
+| headerHeight      | `number`                                                    | -   | -   |    |
+| isFooter          | `boolean`                                                   | -   |     |    |
+| logo              | `string`                                                    | -   | -   |    |
+| logoSize          | `number`                                                    | -   |     |    |
+| menus             | `Array<MenuOption \| MenuDividerOption \| MenuGroupOption>` | -   |     |    |
+| accordion         | `boolean`                                                   | -   |     |    |
+| showTrigger       | `boolean \| 'bar' \| 'arrow-circle'`                        | -   |     |    |
+| collapsed         | `boolean`                                                   |     |     |    |
+| collapsedWidth    | `number`                                                    |     |     |    |
+| collapsedIconSize | `number`                                                    |     |     |    |
+| inverted          | `boolean`                                                   |     |     |    |
+| indent            | `number`                                                    |     |     |    |
+| openKeys          | `Array<string>`                                             |     |     |    |
+| selectedKey       | `string \| null`                                            |     |     |    |
+| clickMenuItem     | `(key: string, item: MenuOption) => void`                   |     |     |    |
+| updateOpenKeys    | `(keys: string[]) => void`                                  |     |     |    |

env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

example/components/DemoLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { h } from 'vue'
+import { h, ref } from 'vue'
 import { Icon } from '@iconify/vue'
 
 function renderIcon (icon: string) {
@@ -81,12 +81,20 @@ const menuOptions = [
     ]
   }
 ]
+
+const collapsed = ref(true)
 </script>
 
 <template>
-  <ProLayout :options="menuOptions"/>
-</template>
-
-<style scoped>
-
-</style>
+  <ProLayout :menus="menuOptions" v-model:collapsed="collapsed">
+    <template #actions>
+      <n-button>功能1</n-button>
+      <n-button>功能2</n-button>
+      <n-button>功能3</n-button>
+    </template>
+    <template #footer>
+      © 2024 Your Company. All rights reserved.
+    </template>
+    我是内容
+  </ProLayout>
+</template>

packages/components.d.ts

@@ -1,6 +1,13 @@
 import { ProForm, ProQueryForm, ProStepsForm } from './form'
 import { ProLayout } from './layout';
 
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+
 declare module 'vue' {
   export interface GlobalComponents {
     ProForm: typeof ProForm

packages/layout/layout.vue

@@ -1,22 +1,36 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { ProLayoutProps } from './props'
-import logoSvg from '../assets/logo.svg'
 import { Icon } from '@iconify/vue'
 
-defineOptions({ name: 'ProForm', inheritAttrs: false })
+defineOptions({ name: 'ProLayout', inheritAttrs: false })
 const props = withDefaults(defineProps<ProLayoutProps>(), {
-  collapsed: false,
-  isFooter: true,
+  title: 'Naive Pro',
+  isMobile: false,
   headerHeight: 60,
-  isMobile: true,
+  isFooter: true,
+  logoSize: 24,
+
+  accordion: false,
+  showTrigger: true,
+  collapsed: false,
+  collapsedWidth: 64,
+  collapsedIconSize: 20,
+  inverted: false,
+  indent: 32,
 })
+const modelCollapsed= defineModel('collapsed', {default: false})
+
+const menuDrawerActive = ref(false)
 const rightDrawerActive = ref(false)
 
 
 function handleRightDrawer() {
   rightDrawerActive.value = true
 }
+function handleMenuDrawer() {
+  menuDrawerActive.value = true
+}
 </script>
 
 <template>
@@ -27,7 +41,7 @@ function handleRightDrawer() {
       <slot name="header-start">
         <!-- apps -->
         <slot v-if="props.isMobile" name="apps">
-          <n-button quaternary >
+          <n-button quaternary @click="handleMenuDrawer" >
             <template #icon>
               <Icon icon="ion:apps-sharp"></Icon>
             </template>
@@ -36,8 +50,10 @@ function handleRightDrawer() {
         <!-- logo -->
         <slot name="logo">
           <div class="flex flex-row justify-center items-center space-x-2">
-            <n-image width="32" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"></n-image>
-            <span class="text-2xl"> Naive Pro</span>
+            <n-image
+              :width="props.logoSize" :height="props.logoSize"
+              :src="props.logo?  props.logo: 'https://www.naiveui.com/assets/naivelogo-BdDVTUmz.svg'" />
+            <span class="text-2xl"> {{ props.title }}</span>
           </div>
         </slot>
       </slot>
@@ -61,25 +77,53 @@ function handleRightDrawer() {
     </n-layout-header>
     <n-layout position="absolute" has-sider :style="`top: ${props.headerHeight}px;`">
       <!-- Sidebar -->
-      <n-layout-sider bordered>
-        <n-menu :options="props.options" />
+      <n-layout-sider  v-if="!props.isMobile"
+                       :show-trigger="props.showTrigger"
+                       collapse-mode="width"
+                       :collapsed="modelCollapsed"
+                       :collapsed-width="props.collapsedWidth"
+                       @update-collapsed="(UCollapsed: boolean) => modelCollapsed = UCollapsed"
+                       :native-scrollbar="false"
+                       bordered
+      >
+        <n-menu  :options="props.menus"
+                 :accordion="props.accordion"
+                 :collapsed="modelCollapsed"
+                 :collapsed-width="props.collapsedWidth"
+                 :collapsed-icon-size="props.collapsedIconSize"
+                 :indent="props.indent"
+                 :inverted="props.inverted"
+                 :expanded-keys="props.openKeys"
+                 :value="props.selectedKey"
+                 @update:value="props.clickMenuItem"
+                 @update:expanded-keys="props.updateOpenKeys" />
       </n-layout-sider>
-
-
+      <n-drawer v-else v-model:show="menuDrawerActive" placement="left">
+        <n-drawer-content>
+          <n-menu  :options="props.menus"
+                   :accordion="props.accordion"
+                   :collapsed="modelCollapsed"
+                   :collapsed-width="props.collapsedWidth"
+                   :collapsed-icon-size="props.collapsedIconSize"
+                   :indent="props.indent"
+                   :inverted="props.inverted"
+                   :expanded-keys="props.openKeys"
+                   :value="props.selectedKey"
+                   @update:value="props.clickMenuItem"
+                   @update:expanded-keys="props.updateOpenKeys" />
+        </n-drawer-content>
+      </n-drawer>
       <!-- Main Content -->
       <n-layout-content>
-        99999999999999999
+        <slot />
       </n-layout-content>
 
       <!-- Footer -->
       <n-layout-footer v-if="props.isFooter" position="absolute" bordered>
-        <n-space align="center" justify="center">
-          <span>© 2024 My Company. All rights reserved.</span>
-        </n-space>
+        <div class="flex justify-center items-center">
+          <slot name="footer" />
+        </div>
       </n-layout-footer>
     </n-layout>
-
   </n-layout>
-
-
 </template>