From 493335000b2e58119f3386ec4c47228faafaca9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=AD=E6=96=87=E5=AD=A6?= <1355729285@qq.com>
Date: Sun, 10 Oct 2021 16:17:07 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0layout=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/layout/index.ts           |  41 ++++
 devui/layout/src/aside.tsx      |   8 +
 devui/layout/src/content.scss   |   4 +
 devui/layout/src/content.tsx    |  10 +
 devui/layout/src/footer.scss    |   4 +
 devui/layout/src/footer.tsx     |  10 +
 devui/layout/src/header.scss    |   4 +
 devui/layout/src/header.tsx     |  10 +
 devui/layout/src/layout.scss    |   9 +
 devui/layout/src/layout.tsx     |  16 ++
 docs/components/layout/index.md | 382 ++++++++++++++++++++++++++++++++
 11 files changed, 498 insertions(+)
 create mode 100644 devui/layout/index.ts
 create mode 100644 devui/layout/src/aside.tsx
 create mode 100644 devui/layout/src/content.scss
 create mode 100644 devui/layout/src/content.tsx
 create mode 100644 devui/layout/src/footer.scss
 create mode 100644 devui/layout/src/footer.tsx
 create mode 100644 devui/layout/src/header.scss
 create mode 100644 devui/layout/src/header.tsx
 create mode 100644 devui/layout/src/layout.scss
 create mode 100644 devui/layout/src/layout.tsx
 create mode 100644 docs/components/layout/index.md

diff --git a/devui/layout/index.ts b/devui/layout/index.ts
new file mode 100644
index 00000000..c05aba47
--- /dev/null
+++ b/devui/layout/index.ts
@@ -0,0 +1,41 @@
+import type { App } from 'vue'
+import Layout from './src/layout'
+import Content from './src/content'
+import Header from './src/header'
+import Footer from './src/footer'
+import Aside from './src/aside'
+
+Layout.install = function(app: App): void {
+  app.component(Layout.name, Layout)
+}
+
+Content.install = function(app: App): void {
+  app.component(Content.name, Content)
+}
+
+Header.install = function(app: App): void {
+  app.component(Header.name, Header)
+}
+
+Footer.install = function(app: App): void {
+  app.component(Footer.name, Footer)
+}
+
+Aside.install = function(app: App): void {
+  app.component(Aside.name, Aside)
+}
+
+export { Layout, Content, Header, Footer, Aside }
+
+export default {
+  title: 'Layout 布局',
+  category: '布局',
+  status: '已完成', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  install(app: App): void {
+    app.use(Layout as any)
+    app.use(Content as any)
+    app.use(Header as any)
+    app.use(Footer as any)
+    app.use(Aside as any)
+  }
+}
diff --git a/devui/layout/src/aside.tsx b/devui/layout/src/aside.tsx
new file mode 100644
index 00000000..4be86a0d
--- /dev/null
+++ b/devui/layout/src/aside.tsx
@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'DAside',
+    setup (props, { slots }) {
+        return () => <div class="d-aside">{ slots.default?.() }</div>
+    }
+})
\ No newline at end of file
diff --git a/devui/layout/src/content.scss b/devui/layout/src/content.scss
new file mode 100644
index 00000000..3069db2f
--- /dev/null
+++ b/devui/layout/src/content.scss
@@ -0,0 +1,4 @@
+.d-content {
+  flex: auto;
+  min-height: 0;
+}
diff --git a/devui/layout/src/content.tsx b/devui/layout/src/content.tsx
new file mode 100644
index 00000000..d3198153
--- /dev/null
+++ b/devui/layout/src/content.tsx
@@ -0,0 +1,10 @@
+import './content.scss'
+
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'DContent',
+    setup (props, { slots }) {
+        return () => <div class="d-content">{slots.default?.()}</div>
+    }
+})
\ No newline at end of file
diff --git a/devui/layout/src/footer.scss b/devui/layout/src/footer.scss
new file mode 100644
index 00000000..dcd0b694
--- /dev/null
+++ b/devui/layout/src/footer.scss
@@ -0,0 +1,4 @@
+.d-footer {
+  text-align: center;
+  line-height: 1.5;
+}
diff --git a/devui/layout/src/footer.tsx b/devui/layout/src/footer.tsx
new file mode 100644
index 00000000..7931501f
--- /dev/null
+++ b/devui/layout/src/footer.tsx
@@ -0,0 +1,10 @@
+import './footer.scss'
+
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'DFooter',
+    setup (props, { slots }) {
+        return () => <div class="d-footer">{ slots.default?.() }</div>
+    }
+})
\ No newline at end of file
diff --git a/devui/layout/src/header.scss b/devui/layout/src/header.scss
new file mode 100644
index 00000000..e42abf58
--- /dev/null
+++ b/devui/layout/src/header.scss
@@ -0,0 +1,4 @@
+.d-header {
+  min-height: 40px;
+  flex: auto;
+}
diff --git a/devui/layout/src/header.tsx b/devui/layout/src/header.tsx
new file mode 100644
index 00000000..881cd89b
--- /dev/null
+++ b/devui/layout/src/header.tsx
@@ -0,0 +1,10 @@
+import './header.scss'
+
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'DHeader',
+    setup (props, { slots }) {
+        return () => <div class="d-header">{ slots.default?.() }</div>
+    }
+})
\ No newline at end of file
diff --git a/devui/layout/src/layout.scss b/devui/layout/src/layout.scss
new file mode 100644
index 00000000..a3176ee0
--- /dev/null
+++ b/devui/layout/src/layout.scss
@@ -0,0 +1,9 @@
+.d-layout {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+
+  &-aside {
+    flex-direction: row;
+  }
+}
diff --git a/devui/layout/src/layout.tsx b/devui/layout/src/layout.tsx
new file mode 100644
index 00000000..2509f56e
--- /dev/null
+++ b/devui/layout/src/layout.tsx
@@ -0,0 +1,16 @@
+import './layout.scss'
+
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'DLayout',
+  emits: [],
+  setup(props, { slots }) {
+    return () => {
+      const slotDefault = slots.default?.()
+      const isAside = slotDefault.some(item => (item.type as any).name === 'DAside')
+      const classNames = `${isAside ? 'd-layout-aside ': ''}d-layout`
+      return <div class={classNames}>{ slotDefault }</div>
+    }
+  }
+})
diff --git a/docs/components/layout/index.md b/docs/components/layout/index.md
new file mode 100644
index 00000000..cccf1a83
--- /dev/null
+++ b/docs/components/layout/index.md
@@ -0,0 +1,382 @@
+# Layout 布局
+
+页面的布局方式。
+
+### 何时使用
+
+当用户需要直接使用一些既有布局时。
+
+### 基本用法
+
+::: demo
+
+```vue
+<template>
+  <d-layout>
+    <d-header class="dheader">Header</d-header>
+    <d-content>Content</d-content>
+    <d-footer class="dfooter">Footer</d-footer>
+  </d-layout>
+</template>
+
+<style>
+    .dheader, .dfooter {
+        background: #333854;
+        color: #fff;
+        text-align: center;
+        line-height: 40px;
+    }
+</style>
+```
+
+:::
+
+:::demo
+
+```vue
+<template>
+  <d-layout>
+    <d-header class="dheader">Header</d-header>
+    <d-layout>
+      <d-aside class="daside">Aside</d-aside>
+      <d-content class="main-content">Content</d-content>
+    </d-layout>
+    <d-footer class="dfooter">Footer</d-footer>
+  </d-layout>
+</template>
+
+<style>
+    .dheader, .dfooter {
+        background: #333854;
+        color: #fff;
+        text-align: center;
+        line-height: 40px;
+    }
+    .daside {
+        background: #f8f8f8;
+        width: 100px;
+        min-height: 200px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
+```
+
+::: 
+
+:::demo
+
+```vue
+<template>
+  <d-layout>
+    <d-header class="dheader">Header</d-header>
+    <d-layout>
+      <d-content class="main-content">Content</d-content>
+      <d-aside class="daside">Aside</d-aside>
+    </d-layout>
+    <d-footer class="dfooter">Footer</d-footer>
+  </d-layout>
+</template>
+
+<style>
+    .dheader, .dfooter {
+        background: #333854;
+        color: #fff;
+        text-align: center;
+        line-height: 40px;
+    }
+</style>
+```
+
+::: 
+
+:::demo
+
+```vue
+<template>
+  <d-layout>
+    <d-aside class="daside">Aside</d-aside>
+    <d-layout>
+      <d-header class="dheader">Header</d-header>
+      <d-content class="main-content">Content</d-content>
+      <d-footer class="dfooter">Footer</d-footer>
+    </d-layout>
+  </d-layout>
+</template>
+
+<style>
+    .daside {
+        background: #f8f8f8;
+        width: 100px;
+        min-height: 200px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .dheader, .dfooter {
+        background: #333854;
+        color: #fff;
+        text-align: center;
+        line-height: 40px;
+        min-height: 40px;
+    }
+    .main-content {
+        line-height: 200px;
+        text-align: center;
+    }
+</style>
+```
+
+::: 
+
+### 应用场景1
+
+常用上中下布局。
+
+:::demo
+
+```vue
+<template>
+    <d-layout>
+        <d-header class="dheader-1">
+            <div class="logo">
+                <span class="logo-devui">
+                    <img src="https://devui.design/components/assets/logo.svg" width="26" height="26" />
+                </span>
+                <span class="text">DevUI</span>
+            </div>
+        </d-header>
+        <d-content class="dcontent-1">
+            <d-breadcrumb class="dbreadcrumb">
+                <d-breadcrumb-item>
+                    <span>DevUI</span>
+                </d-breadcrumb-item>
+                <d-breadcrumb-item>
+                    <span>面包屑</span>
+                </d-breadcrumb-item>
+            </d-breadcrumb>
+            <div class="inner-content"></div>
+        </d-content>
+        <d-footer class="dfooter-1">footer</d-footer>
+    </d-layout>
+</template>
+
+<style>
+    .dheader-1 {
+        text-align: left;
+        position: relative;
+        height: 40px;
+        background-color: #333854;
+        color: #fff;
+    }
+    .dheader-1 .logo {
+        position: absolute;
+        left: 0;
+        margin-left: 40px;
+        height: 40px;
+        width: 120px;
+        color: #fff;
+        font-size: 16px;
+        line-height: 40px;
+    }
+    .dheader-1 .logo .logo-devui {
+        margin-top: 8px;
+    }
+
+    .dheader-1 .logo .logo-devui,
+    .dheader-1 .logo .text {
+        display: inline-block;
+        vertical-align: top;
+    }
+    .dcontent-1 {
+        padding: 0 40px;
+        height: 300px;
+        background-color: #f3f6f8;
+    }
+    .dcontent-1 .dbreadcrumb {
+        margin: 8px 0;
+    }
+    .dcontent-1 .inner-content {
+        background-color: #fff;
+        height: 100%;
+    }
+    .dfooter-1 {
+        background: #333854;
+        color: #fff;
+        text-align: center;
+        line-height: 40px;
+        min-height: 40px;
+    }
+</style>
+
+```
+
+:::
+
+### 应用场景2
+
+常用上中下布局及侧边栏布局。
+
+:::demo
+
+```vue
+<template>
+    <d-layout class="dlayout-2">
+        <d-header class="dheader-2">
+            <div class="logo">
+            <span class="logo-devui">
+                <img src="https://devui.design/components/assets/logo.svg" width="26px" height="26px" />
+            </span>
+            <span class="text">DevUI</span>
+            </div>
+        </d-header>
+        <d-layout>
+            <d-aside class="daside-2">
+                <d-accordion :data="menu" class="menu"></d-accordion>
+            </d-aside>
+            <d-content class="dcontent-2">
+                <d-breadcrumb class="dbreadcrumb">
+                    <d-breadcrumb-item>
+                        <span>DevUI</span>
+                    </d-breadcrumb-item>
+                    <d-breadcrumb-item>
+                        <span>面包屑</span>
+                    </d-breadcrumb-item>
+                </d-breadcrumb>
+                <div class="inner-content"></div>
+            </d-content>
+        </d-layout>
+        <d-footer class="dfooter-2">footer</d-footer>
+    </d-layout>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+    setup() {
+        const menu = ref([
+            {
+                title: '内容一',
+                open: true,
+                children: [{ title: '子内容1' }, { title: '子内容2' }, { title: '子内容3' }],
+            },
+            {
+                title: '内容二',
+                children: [{ title: '子内容1' }, { title: '子内容2' }, { title: '子内容3' }],
+            },
+            {
+                title: '内容三（默认展开）',
+                open: true,
+                children: [{ title: '子内容1(禁用)', disabled: true }, { title: '子内容2(默认激活)', active: true }, { title: '子内容3' }],
+            },
+        ])
+        return {
+            menu
+        }
+    }
+})
+
+</script>
+
+<style>
+    .dlayout-2 {
+        background-color: #fff;
+    }
+    .dlayout-2 li {
+        list-style: none;
+    }
+
+    .daside-2 {
+        border-left: 1px solid transparent;
+    }
+
+    .dheader-2 {
+        text-align: left;
+        height: 40px;
+        background-color: #333854;
+        position: relative;
+        
+    }
+    .dheader-2 .search {
+        color: #fff;
+        margin-right: 40px;
+        position: absolute;
+        right: 0;
+    }
+
+    .dheader-2 .logo {
+        position: absolute;
+        left: 0;
+        margin-left: 20px;
+        height: 40px;
+        width: 120px;
+        color: #fff;
+        font-size: 16px;
+        line-height: 40px;
+    }
+    .dheader-2 .logo .logo-devui {
+        margin-top: 8px;
+    }
+    .dheader-2 .logo .logo-devui,
+    .dheader-2 .logo .text {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .dcontent-2 {
+        padding: 0 40px;
+        background-color: #f3f6f8;
+    }
+    .dcontent-2 .inner-content {
+        background-color: #fff;
+        padding: 16px;
+        height: 100%;
+    }
+    .dcontent-2 .dbreadcrumb {
+        margin-top: 8px;
+    }
+    .dfooter-2 {
+        color: #fff;
+        background-color: #333854;
+        padding: 8px 24px;
+    }
+    
+</style>
+
+```
+
+:::
+
+### API
+
+在页面中使用：
+
+```html
+<d-layout>
+  <d-header></d-header>
+  <d-content></d-content>
+  <d-footer></d-footer>
+</d-layout>
+```
+
+### d-layout
+
+布局容器，可以与<code>d-header</code>, <code>d-content</code>, <code>d-footer</code>, <code>d-aside</code>组合实现布局； <code>d-layout</code>下可嵌套元素：<code>d-header</code>, <code>d-content</code>, <code>d-aside</code>, <code>d-layout</code>。
+
+### d-header
+
+顶部布局，只能放在<code>d-layout</code>容器中，作为<code>d-layout</code>容器的顶部实现。 默认高度：40px。
+
+### d-footer
+
+底部布局，只能放在<code>d-layout</code>容器中，作为<code>d-layout</code>容器的底部实现。
+
+### d-content
+
+内容容器，只能放在<code>d-layout</code>容器中，作为<code>d-layout</code>容器<code>d-header</code>与<code>d-footer</code>之间的内容。
+
+### d-aside
+
+侧边栏，只能放在<code>d-layout</code>容器中，作为<code>d-layout</code>容器的侧边栏部分。
\ No newline at end of file
-- 
Gitee


From 38b7701e319fa4d7ac8739dd352f96097003691d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=AD=E6=96=87=E5=AD=A6?= <1355729285@qq.com>
Date: Sun, 10 Oct 2021 22:03:07 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4TODO=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A=EF=BC=8C=E4=BF=AE=E6=94=B9class=E5=89=8D=E7=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/layout/index.ts         | 2 +-
 devui/layout/src/aside.tsx    | 2 +-
 devui/layout/src/content.scss | 2 +-
 devui/layout/src/content.tsx  | 2 +-
 devui/layout/src/footer.scss  | 2 +-
 devui/layout/src/footer.tsx   | 2 +-
 devui/layout/src/header.scss  | 2 +-
 devui/layout/src/header.tsx   | 2 +-
 devui/layout/src/layout.scss  | 2 +-
 devui/layout/src/layout.tsx   | 2 +-
 10 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/devui/layout/index.ts b/devui/layout/index.ts
index c05aba47..8f6ec9b6 100644
--- a/devui/layout/index.ts
+++ b/devui/layout/index.ts
@@ -30,7 +30,7 @@ export { Layout, Content, Header, Footer, Aside }
 export default {
   title: 'Layout 布局',
   category: '布局',
-  status: '已完成', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '已完成',
   install(app: App): void {
     app.use(Layout as any)
     app.use(Content as any)
diff --git a/devui/layout/src/aside.tsx b/devui/layout/src/aside.tsx
index 4be86a0d..ca650fdc 100644
--- a/devui/layout/src/aside.tsx
+++ b/devui/layout/src/aside.tsx
@@ -3,6 +3,6 @@ import { defineComponent } from 'vue'
 export default defineComponent({
     name: 'DAside',
     setup (props, { slots }) {
-        return () => <div class="d-aside">{ slots.default?.() }</div>
+        return () => <div>{ slots.default?.() }</div>
     }
 })
\ No newline at end of file
diff --git a/devui/layout/src/content.scss b/devui/layout/src/content.scss
index 3069db2f..3314b4c4 100644
--- a/devui/layout/src/content.scss
+++ b/devui/layout/src/content.scss
@@ -1,4 +1,4 @@
-.d-content {
+.devui-content {
   flex: auto;
   min-height: 0;
 }
diff --git a/devui/layout/src/content.tsx b/devui/layout/src/content.tsx
index d3198153..d2caaecd 100644
--- a/devui/layout/src/content.tsx
+++ b/devui/layout/src/content.tsx
@@ -5,6 +5,6 @@ import { defineComponent } from 'vue'
 export default defineComponent({
     name: 'DContent',
     setup (props, { slots }) {
-        return () => <div class="d-content">{slots.default?.()}</div>
+        return () => <div class="devui-content">{slots.default?.()}</div>
     }
 })
\ No newline at end of file
diff --git a/devui/layout/src/footer.scss b/devui/layout/src/footer.scss
index dcd0b694..eeec0154 100644
--- a/devui/layout/src/footer.scss
+++ b/devui/layout/src/footer.scss
@@ -1,4 +1,4 @@
-.d-footer {
+.devui-footer {
   text-align: center;
   line-height: 1.5;
 }
diff --git a/devui/layout/src/footer.tsx b/devui/layout/src/footer.tsx
index 7931501f..457ae984 100644
--- a/devui/layout/src/footer.tsx
+++ b/devui/layout/src/footer.tsx
@@ -5,6 +5,6 @@ import { defineComponent } from 'vue'
 export default defineComponent({
     name: 'DFooter',
     setup (props, { slots }) {
-        return () => <div class="d-footer">{ slots.default?.() }</div>
+        return () => <div class="devui-footer">{ slots.default?.() }</div>
     }
 })
\ No newline at end of file
diff --git a/devui/layout/src/header.scss b/devui/layout/src/header.scss
index e42abf58..ada90cec 100644
--- a/devui/layout/src/header.scss
+++ b/devui/layout/src/header.scss
@@ -1,4 +1,4 @@
-.d-header {
+.devui-header {
   min-height: 40px;
   flex: auto;
 }
diff --git a/devui/layout/src/header.tsx b/devui/layout/src/header.tsx
index 881cd89b..e723aff3 100644
--- a/devui/layout/src/header.tsx
+++ b/devui/layout/src/header.tsx
@@ -5,6 +5,6 @@ import { defineComponent } from 'vue'
 export default defineComponent({
     name: 'DHeader',
     setup (props, { slots }) {
-        return () => <div class="d-header">{ slots.default?.() }</div>
+        return () => <div class="devui-header">{ slots.default?.() }</div>
     }
 })
\ No newline at end of file
diff --git a/devui/layout/src/layout.scss b/devui/layout/src/layout.scss
index a3176ee0..a513015a 100644
--- a/devui/layout/src/layout.scss
+++ b/devui/layout/src/layout.scss
@@ -1,4 +1,4 @@
-.d-layout {
+.devui-layout {
   display: flex;
   flex-direction: column;
   flex: auto;
diff --git a/devui/layout/src/layout.tsx b/devui/layout/src/layout.tsx
index 2509f56e..da930645 100644
--- a/devui/layout/src/layout.tsx
+++ b/devui/layout/src/layout.tsx
@@ -9,7 +9,7 @@ export default defineComponent({
     return () => {
       const slotDefault = slots.default?.()
       const isAside = slotDefault.some(item => (item.type as any).name === 'DAside')
-      const classNames = `${isAside ? 'd-layout-aside ': ''}d-layout`
+      const classNames = `${isAside ? 'devui-layout-aside ': ''}devui-layout`
       return <div class={classNames}>{ slotDefault }</div>
     }
   }
-- 
Gitee