feat: finish a slot component

src/base-ui/form/index.ts

@@ -0,0 +1,5 @@
+import KwForm from './src/form.vue'
+
+export * from './types'
+
+export default KwForm

src/base-ui/form/src/form.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="kw-form">
+    <el-form label-width="100px">
+      <el-row>
+        <template v-for="item in formItems" :key="item.label">
+          <el-col :span="8">
+            <el-form-item :label="item.label">
+              <!-- 使用动态组件、对传进来的组件进行动态展示 -->
+              <template v-if="item.type === 'el-password'">
+                <component
+                  :is="'el-input'"
+                  show-password
+                  :placeholder="item.placeholder"
+                  v-model="password"
+                />
+              </template>
+              <template v-else-if="item.type === 'el-select'">
+                <component
+                  :is="item.type"
+                  :placeholder="item.placeholder"
+                  clearable
+                >
+                  <el-option
+                    v-for="option in item.options"
+                    :key="option.label"
+                    :value="option.value"
+                    :label="option.label"
+                  >
+                  </el-option>
+                </component>
+              </template>
+              <template v-else-if="item.type === 'el-datepicker'">
+                <component :is="item.type" :placeholder="item.placeholder" />
+              </template>
+              <template v-else>
+                <component :is="item.type" :placeholder="item.placeholder" />
+              </template>
+              <!-- <el-input :placeholder="item.placeholder" /> -->
+            </el-form-item>
+          </el-col>
+        </template>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { IFormItem } from '../types/index'
+export default defineComponent({
+  props: {
+    formItems: {
+      type: Array as PropType<IFormItem[]>,
+      default: () => []
+    }
+  },
+  setup() {
+    const password = '123456'
+    return {
+      password
+    }
+  }
+})
+</script>
+
+<style scoped></style>

src/base-ui/form/types/index.ts

@@ -0,0 +1,11 @@
+type IFormType = 'el-input' | 'el-password' | 'el-select' | 'el-datepicker'
+
+export interface IFormItem {
+  type: IFormType
+  label: string
+  rules?: any[]
+  placeholder?: any
+  options?: any[]
+  start?: any
+  end?: any
+}

src/components/nav-header/src/cpns/user-info.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="user-info">
+    <el-dropdown>
+      <span class="el-dropdown-link">
+        <el-avatar
+          class="elavatar"
+          size="default"
+          src="https://avatars.githubusercontent.com/u/57137032?v=4"
+        ></el-avatar>
+        <span>{{ name }}</span>
+        <el-icon class="el-icon--right">
+          <arrow-down />
+        </el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item>用户信息</el-dropdown-item>
+          <el-dropdown-item>系统管理</el-dropdown-item>
+          <el-dropdown-item divided>退出登录</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const name = '铁头弗兰克'
+    return {
+      name
+    }
+  }
+})
+</script>
+
+<style scoped lang="less">
+.el-dropdown-link {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  .elavatar {
+    margin-right: 10px;
+  }
+}
+</style>

src/components/nav-header/src/nav-header.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="nav-header">
     <el-icon class="fold-menu" @click="handleFoldClick"><fold /></el-icon>
+    <div class="content">
+      <div>面包屑</div>
+      <user-info />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-
+import UserInfo from './cpns/user-info.vue'
 export default defineComponent({
+  components: {
+    UserInfo
+  },
   emits: ['foldChange'],
   setup(props, { emit }) {
     const isFold = ref(false)
@@ -22,9 +29,19 @@ export default defineComponent({
 
 <style scoped lang="less">
 .nav-header {
+  display: flex;
+  width: 100%;
   .fold-menu {
     font-size: 30px;
     cursor: pointer;
   }
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    padding: 0 20px;
+  }
 }
 </style>

src/views/main/main.vue

@@ -9,7 +9,9 @@
           <nav-header @foldChange="handleFoldChange" />
         </el-header>
         <el-main class="page-content">
-          <router-view></router-view>
+          <div class="page-info">
+            <router-view></router-view>
+          </div>
         </el-main>
       </el-container>
     </el-container>
@@ -54,6 +56,10 @@ export default defineComponent({
 
 .page-content {
   height: calc(100% - 48px);
+  .page-info {
+    background-color: #fff;
+    border-radius: 5px;
+  }
 }
 
 .el-header,

src/views/main/system/user/user.vue

@@ -1,16 +1,54 @@
 <template>
   <div class="user">
-    <h2>user</h2>
+    <div class="search">
+      <kw-form :formItems="formItems" />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-
+import KwForm, { IFormItem } from '@/base-ui/form'
 export default defineComponent({
+  components: {
+    KwForm
+  },
   name: 'user',
   setup() {
-    return {}
+    const formItems: IFormItem[] = [
+      {
+        type: 'el-input',
+        label: '用户名',
+        placeholder: '请输入用户名'
+      },
+      {
+        type: 'el-password',
+        label: '密码',
+        placeholder: '请输入密码'
+      },
+      {
+        type: 'el-select',
+        label: '体育',
+        placeholder: '请输入喜欢的体育运动',
+        options: [
+          { title: '篮球', value: 'basketball' },
+          { title: '足球', value: 'football' },
+          { title: '排球', value: 'baseball' },
+          { title: '棒球', value: 'abc' },
+          { title: '猴子', value: 'houzi' },
+          { title: '熊猫', value: 'panda' },
+          { title: '竹子', value: 'bamboo' }
+        ]
+      },
+      {
+        type: 'el-datepicker',
+        label: '创建时间',
+        placeholder: '请输入创建时间'
+      }
+    ]
+    return {
+      formItems
+    }
   }
 })
 </script>