创建全局布局组件

src/components/Layout.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="layout">
+    <div
+      v-if="$slots.title"
+      class="layout-title"
+    >
+      <slot name="title" />
+    </div>
+    <div
+      class="layout-content"
+      :style="cssVar"
+    >
+      <slot name="content" />
+    </div>
+    <div
+      v-if="$slots.bottom"
+      class="layout-bottom"
+    >
+      <slot name="bottom" />
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { computed, useSlots } from 'vue'
+const slots = useSlots()
+const cssVar = computed(() => ({
+  '--autoHeigh': slots.title && slots.bottom ? 'calc(100% - 95px)' : !slots.title && slots.bottom ? 'calc(100% - 50px)' : slots.title && !slots.bottom ? 'calc(100% - 45px)' : '100%'
+}))
+</script>
+<style lang="scss" scoped>
+.layout {
+    height: 100%;
+    padding: 40px 4% 0 4%;
+    min-width: 327px;
+
+    &-title {
+        font-size: 18px;
+        height: 25px;
+        margin-bottom: 20px;
+    }
+
+    &-content {
+        text-align: center;
+        padding-bottom: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        height: var(--autoHeigh);
+        overflow-y: auto;
+        gap: 15px;
+    }
+
+    &-bottom {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        :deep(.n-button) {
+            --n-width: 30%;
+            max-width: 200px;
+            --n-border-radius: 10px;
+        }
+    }
+}
+</style>

src/pages/device/index.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="device">
-    <div class="device-title">
+  <Layout>
+    <template #title>
       设备：{{ deviceList.length }}
-    </div>
-    <div class="device-content">
+    </template>
+    <template #content>
       <template
         v-for="(item, index) in deviceList"
         :key="index"
       >
         <div
-          class="device-content-item"
-          :class="{active:item.check}"
-          @click="item.check= !item.check && showBar"
+          class="item"
+          :class="{ active: item.check }"
+          @click="item.check = !item.check && showBar"
         >
           <n-image
             width="50"
@@ -25,10 +25,10 @@
           </div>
         </div>
       </template>
-    </div>
-    <div
+    </template>
+    <template
       v-if="showBar"
-      class="device-bar"
+      #bottom
     >
       <span>添加设备</span>
       <n-button
@@ -37,10 +37,11 @@
       >
         完成
       </n-button>
-    </div>
-  </div>
+    </template>
+  </Layout>
 </template>
 <script setup lang="ts">
+import Layout from '@/components/Layout.vue'
 import useStore from '@/store'
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -59,7 +60,7 @@ const deviceList = ref([
   { check: false, url: new URL('./img/1.png', import.meta.url).href },
   { check: false, url: new URL('./img/1.png', import.meta.url).href }
 ])
-const backRoute:{[key:string]:string} = { '/list': '/list', '/create': '/room' }
+const backRoute: { [key: string]: string } = { '/list': '/list', '/create': '/room' }
 const showBar = computed(() => !!(backRoute[router.options.history.state.back as string]))
 
 function change() {
@@ -72,81 +73,46 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
-.device {
-  height: 100%;
-  padding: 40px 4% 0 4%;
-  min-width: 327px;
+.item {
+  /* 增长1 不缩小 基础宽度200px */
+  flex: 1 0 160px;
+  padding: 10px 15px;
+  background: #383d43;
+  box-shadow: 0px 4px 20px -2px rgba(50, 50, 71, 0.02), 0px 0px 5px 0px rgba(12, 26, 75, 0.04);
+  border-radius: 12px;
+  cursor: pointer;
+  overflow: hidden;
+  display: flex;
 
-  &-title {
-    font-size: 18px;
+  &:hover {
+    background-color: rgba(99, 226, 183, 0.15);
   }
 
-  &-content {
-    margin-top: 20px;
-    padding-bottom: 20px;
-    display: flex;
-    flex-wrap: wrap;
-    align-content: flex-start;
-    height: calc(100% - 96px);
-    overflow-y: auto;
-    gap: 15px;
-
-    &-item {
-      /* 增长1 不缩小 基础宽度200px */
-      flex: 1 0 160px;
-      padding: 10px 15px;
-      background: #383d43;
-      box-shadow: 0px 4px 20px -2px rgba(50, 50, 71, 0.02), 0px 0px 5px 0px rgba(12, 26, 75, 0.04);
-      border-radius: 12px;
-      cursor: pointer;
-      overflow: hidden;
-      display: flex;
-
-      &:hover {
-        background-color: rgba(99, 226, 183, 0.15);
-      }
-
-      p {
-        margin: 0;
-      }
-
-      &>div:last-child {
-        margin-left: 10px;
-        font-size: 15px;
-        width: calc(100% - 60px);
-
-        &>p:first-child {
-          max-width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
+  p {
+    margin: 0;
+  }
 
-        &>p:last-child {
-          font-size: 13px;
-        }
-      }
+  &>div:last-child {
+    margin-left: 10px;
+    font-size: 15px;
+    width: calc(100% - 60px);
 
+    &>p:first-child {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .active {
-      background: rgba(99, 226, 183, 0.15);
-      color: #63e2b7;
+    &>p:last-child {
+      font-size: 13px;
     }
   }
 
-  &-bar {
-    width: 100%;
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+}
 
-    :deep(.n-button) {
-      --n-width: 30%;
-      max-width: 200px;
-      --n-border-radius: 10px;
-    }
-  }
+.active {
+  background: rgba(99, 226, 183, 0.15);
+  color: #63e2b7;
 }
 </style>

src/pages/room/index.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="room">
-    <div class="room-title">
+  <Layout>
+    <template #title>
       你的房间: 4
-    </div>
-    <div class="room-content">
+    </template>
+    <template #content>
       <template
         v-for="(item, index) in roomList"
         :key="index"
       >
         <div
-          class="room-content-item"
+          class="item"
           @click="change('/list')"
         >
           <div>
@@ -24,8 +24,8 @@
           </div>
         </div>
       </template>
-    </div>
-    <div class="room-bar">
+    </template>
+    <template #bottom>
       <span>创建你的房间</span>
       <n-button
         type="warning"
@@ -33,12 +33,13 @@
       >
         创建
       </n-button>
-    </div>
-  </div>
+    </template>
+  </Layout>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import Layout from '@/components/Layout.vue'
 
 const router = useRouter()
 const roomList = ref([
@@ -52,73 +53,38 @@ const roomList = ref([
   { 1: 1 }
 ])
 
-function change(url:string) {
+function change(url: string) {
   router.push(url)
 }
 </script>
-<style lang="scss" scoped>
-.room {
-  height: 100%;
-  padding: 40px 4% 0 4%;
-  min-width: 327px;
 
-  &-title {
-    font-size: 18px;
-  }
+<style lang="scss" scoped>
+.item {
+  /* 增长1 不缩小 基础宽度200px */
+  flex: 1 0 286px;
+  height: 180px;
+  padding: 10px 20px;
+  background: radial-gradient(circle at right, #40464d00, #40464d75 35%), url(./img/1.png) no-repeat right;
+  background-size: contain;
+  background-blend-mode: overlay;
+  box-shadow: 0px 4px 20px -2px rgba(50, 50, 71, 0.02), 0px 0px 5px 0px rgba(12, 26, 75, 0.04);
+  border-radius: 12px;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
 
-  &-content {
-    margin-top: 20px;
-    padding-bottom: 20px;
+  &>div>div {
     display: flex;
-    flex-wrap: wrap;
-    align-content: flex-start;
-    height: calc(100% - 96px);
-    overflow-y: auto;
-    gap: 15px;
-
-    &-item {
-      /* 增长1 不缩小 基础宽度200px */
-      flex: 1 0 286px;
-      height: 180px;
-      padding: 10px 20px;
-      background: radial-gradient(circle at right, #40464d00, #40464d75 35%), url(./img/1.png) no-repeat right;
-      background-size: contain;
-      background-blend-mode: overlay;
-      box-shadow: 0px 4px 20px -2px rgba(50, 50, 71, 0.02), 0px 0px 5px 0px rgba(12, 26, 75, 0.04);
-      border-radius: 12px;
-      cursor: pointer;
-      overflow: hidden;
-      position: relative;
-
-      &>div>div {
-        display: flex;
-        align-items: center;
-
-        svg {
-          margin-right: 5px;
-          color: var(--n-text-color);
-        }
-      }
+    align-items: center;
 
-      &:hover {
-        background-color: rgba(99, 226, 183, 0.15);
-      }
+    svg {
+      margin-right: 5px;
+      color: var(--n-text-color);
     }
-
   }
 
-  &-bar {
-    width: 100%;
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    :deep(.n-button) {
-      --n-width: 30%;
-      max-width: 200px;
-      --n-border-radius: 10px;
-    }
+  &:hover {
+    background-color: rgba(99, 226, 183, 0.15);
   }
 }
 </style>

src/pages/room/room-create.vue

@@ -1,28 +1,30 @@
 <template>
-  <div class="roomCreate">
-    <div class="roomCreate-content">
-      <n-upload
-        action="#"
-        :max="1"
-        :show-file-list="false"
-      >
-        <n-image
-          width="100%"
-          height="200px"
-          :preview-disabled="true"
-          :src="data.erUrl"
-        />
-      </n-upload>
-      <n-form>
-        <n-form-item label="取个好名字">
-          <n-input
-            v-model:value="data.name"
-            placeholder="输入房间名称"
+  <Layout>
+    <template #content>
+      <div class="item">
+        <n-upload
+          action="#"
+          :max="1"
+          :show-file-list="false"
+        >
+          <n-image
+            width="100%"
+            height="200px"
+            :preview-disabled="true"
+            :src="data.erUrl"
           />
-        </n-form-item>
-      </n-form>
-    </div>
-    <div class="roomCreate-bar">
+        </n-upload>
+        <n-form>
+          <n-form-item label="取个好名字">
+            <n-input
+              v-model:value="data.name"
+              placeholder="输入房间名称"
+            />
+          </n-form-item>
+        </n-form>
+      </div>
+    </template>
+    <template #bottom>
       <span>给房间取个名</span>
       <n-button
         type="warning"
@@ -30,14 +32,15 @@
       >
         继续
       </n-button>
-    </div>
-  </div>
+    </template>
+  </Layout>
 </template>
 
 <script setup lang='ts'>
+import Layout from '@/components/Layout.vue'
+import { useRouter } from 'vue-router'
 import useStore from '@/store'
 import { reactive } from 'vue'
-import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const store = useStore()
@@ -52,44 +55,28 @@ function change() {
 }
 </script>
 <style lang="scss" scoped>
-.roomCreate {
-  padding: 40px 4% 0 4%;
-  min-width: 327px;
+.item {
   height: 100%;
+  flex: 1 0 160px;
+  padding: 40px 0;
 
-  &-content {
-    height: calc(100% - 50px);
-    text-align: center;
-    padding: 0 5%;
+  :deep(.n-upload-trigger) {
+    cursor: pointer;
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 330px;
 
-    :deep(.n-upload-trigger) {
+    &>div {
       width: 100%;
-      max-width: 400px;
-
-      &>div {
-        width: 100%;
-        cursor: pointer;
-      }
-    }
-    :deep(.n-form) {
-      min-width: 300px;
-      max-width: 50%;
-      margin: 0 auto;
+      cursor: pointer;
     }
   }
 
-  &-bar {
-    width: 100%;
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    :deep(.n-button) {
-      --n-width: 30%;
-      max-width: 200px;
-      --n-border-radius: 10px;
-    }
+  :deep(.n-form) {
+    min-width: 330px;
+    max-width: 50%;
+    margin: 0 auto;
   }
 }
 </style>

src/pages/room/room-device-detail.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="list">
-    <div class="list-title">
+  <Layout>
+    <template #title>
       <n-breadcrumb>
         <n-breadcrumb-item>
           <RouterLink to="/room">
@@ -16,9 +16,9 @@
           设备名称
         </n-breadcrumb-item>
       </n-breadcrumb>
-    </div>
-    <div class="list-content">
-      <div class="list-content-item">
+    </template>
+    <template #content>
+      <div class="item">
         <n-upload
           action="#"
           :max="1"
@@ -54,57 +54,31 @@
           </n-form-item>
         </n-form>
       </div>
-    </div>
-  </div>
+    </template>
+  </Layout>
 </template>
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { useRouter, RouterLink } from 'vue-router'
+import Layout from '@/components/Layout.vue'
 
 const router = useRouter()
 const device = reactive({ check: false, url: new URL('./img/3.png', import.meta.url).href })
 </script>
 <style lang="scss" scoped>
-.list {
+.item {
   height: 100%;
-  padding: 40px 4% 0 4%;
-  min-width: 327px;
+  flex: 1 0 160px;
+  padding: 40px 0;
 
-  &-title {
-    font-size: 18px;
+  :deep(.n-upload-trigger) {
+    cursor: pointer;
   }
 
-  &-content {
-    margin-top: 20px;
-    padding-bottom: 20px;
-    display: flex;
-    flex-wrap: wrap;
-    align-content: flex-start;
-    height: calc(100% - 47px);
-    overflow-y: auto;
-    gap: 15px;
-
-    &-item {
-      height: 100%;
-      flex: 1 0 160px;
-      padding: 40px 5%;
-      background: #383d43;
-      box-shadow: 0px 4px 20px -2px rgba(50, 50, 71, 0.02), 0px 0px 5px 0px rgba(12, 26, 75, 0.04);
-      border-radius: 12px;
-      overflow: hidden;
-      text-align: center;
-
-      :deep(.n-upload-trigger) {
-        cursor: pointer;
-      }
-
-      :deep(.n-form) {
-        min-width: 300px;
-        max-width: 50%;
-        margin: 0 auto;
-      }
-    }
-
+  :deep(.n-form) {
+    min-width: 300px;
+    max-width: 50%;
+    margin: 0 auto;
   }
 }
 </style>

src/pages/room/room-device-list.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="list">
-    <div class="list-title">
+  <Layout>
+    <template #title>
       <n-breadcrumb>
         <n-breadcrumb-item>
           <RouterLink to="/room">
@@ -11,14 +11,14 @@
           设备：{{ deviceList.length }}
         </n-breadcrumb-item>
       </n-breadcrumb>
-    </div>
-    <div class="list-content">
+    </template>
+    <template #content>
       <template
         v-for="(item, index) in deviceList"
         :key="index"
       >
         <div
-          class="list-content-item"
+          class="item"
           @click="change('/detail')"
         >
           <n-image
@@ -33,8 +33,8 @@
           </div>
         </div>
       </template>
-    </div>
-    <div class="list-bar">
+    </template>
+    <template #bottom>
       <span>缺个设备？</span>
       <n-button
         type="warning"
@@ -42,12 +42,13 @@
       >
         继续
       </n-button>
-    </div>
-  </div>
+    </template>
+  </Layout>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter, RouterLink } from 'vue-router'
+import Layout from '@/components/Layout.vue'
 
 const router = useRouter()
 const deviceList = ref([
@@ -71,66 +72,30 @@ const deviceList = ref([
   { check: false, url: new URL('./img/3.png', import.meta.url).href },
   { check: false, url: new URL('./img/3.png', import.meta.url).href }
 ])
-function change(url:string) {
+function change(url: string) {
   router.push(url)
 }
 </script>
 <style lang="scss" scoped>
-.list {
-  height: 100%;
-  padding: 40px 4% 0 4%;
-  min-width: 327px;
+.item {
+  /* 增长1 不缩小 基础宽度200px */
+  flex: 1 0 160px;
+  padding: 10px 15px;
+  background: #383d43;
+  box-shadow: 0px 4px 20px -2px rgba(50, 50, 71, 0.02), 0px 0px 5px 0px rgba(12, 26, 75, 0.04);
+  border-radius: 12px;
+  cursor: pointer;
+  overflow: hidden;
 
-  &-title {
-    font-size: 18px;
+  &:hover {
+    background-color: rgba(99, 226, 183, 0.15);
   }
 
-  &-content {
-    margin-top: 20px;
-    padding-bottom: 20px;
-    display: flex;
-    flex-wrap: wrap;
-    align-content: flex-start;
-    height: calc(100% - 97px);
-    overflow-y: auto;
-    gap: 15px;
-
-    &-item {
-      /* 增长1 不缩小 基础宽度200px */
-      flex: 1 0 160px;
-      padding: 10px 15px;
-      background: #383d43;
-      box-shadow: 0px 4px 20px -2px rgba(50, 50, 71, 0.02), 0px 0px 5px 0px rgba(12, 26, 75, 0.04);
-      border-radius: 12px;
-      cursor: pointer;
-      overflow: hidden;
-
-      &:hover {
-        background-color: rgba(99, 226, 183, 0.15);
-      }
-
-      &>div:last-child {
-        margin-top: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-    }
-
-  }
-
-  &-bar {
-    width: 100%;
-    height: 50px;
+  &>div:last-child {
+    margin-top: 5px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-
-    :deep(.n-button) {
-      --n-width: 30%;
-      max-width: 200px;
-      --n-border-radius: 10px;
-    }
   }
 }
 </style>

src/pages/seting/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="seting">
+  <!-- <div class="seting">
     <div class="seting-title">
       个人资料
     </div>
@@ -58,10 +58,71 @@
         更新
       </n-button>
     </div>
-  </div>
+  </div> -->
+  <Layout>
+    <template #title>
+      个人资料
+    </template>
+    <template #content>
+      <n-tabs
+        type="line"
+        animated
+        justify-content="center"
+      >
+        <n-tab-pane
+          name="user"
+          tab="账户信息"
+        >
+          <n-upload
+            action="#"
+            :max="1"
+            :show-file-list="false"
+          >
+            <n-image
+              width="100%"
+              height="200px"
+              :preview-disabled="true"
+              :src="userData.url"
+            />
+          </n-upload>
+          <n-form>
+            <n-form-item label="名称">
+              <n-input
+                v-model:value="userData.name"
+                placeholder="称呼"
+              />
+            </n-form-item>
+          </n-form>
+        </n-tab-pane>
+        <n-tab-pane
+          name="pass"
+          tab="更改密码"
+        >
+          <n-form>
+            <n-form-item label="原密码">
+              <n-input />
+            </n-form-item>
+            <n-form-item label="新密码">
+              <n-input />
+            </n-form-item>
+            <n-form-item label="重复新密码">
+              <n-input />
+            </n-form-item>
+          </n-form>
+        </n-tab-pane>
+      </n-tabs>
+    </template>
+    <template #bottom>
+      <span>编辑你的账号信息</span>
+      <n-button type="warning">
+        更新
+      </n-button>
+    </template>
+  </Layout>
 </template>
 
 <script setup lang='ts'>
+import Layout from '@/components/Layout.vue'
 import { ref } from 'vue'
 
 const userData = ref({
@@ -70,48 +131,18 @@ const userData = ref({
 })
 </script>
 <style lang="scss" scoped>
-.seting {
-  padding: 40px 4% 0 4%;
-  min-width: 327px;
-  height: 100%;
-
-  &-title {
-    font-size: 18px;
-  }
-
-  &-content {
-    height: calc(100% - 75px);
-    text-align: center;
-    padding: 0 5%;
-
-    :deep(.n-tabs) {
-      --n-pane-padding-top: 20px;
-    }
-
-    :deep(.n-tabs-tab) {
-      padding-left: 20px;
-      padding-right: 20px;
-    }
-
-    :deep(.n-form) {
-      min-width: 300px;
-      max-width: 50%;
-      margin: 0 auto;
-    }
-  }
+:deep(.n-tabs) {
+  --n-pane-padding-top: 20px;
+}
 
-  &-bar {
-    width: 100%;
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+:deep(.n-tabs-tab) {
+  padding-left: 20px;
+  padding-right: 20px;
+}
 
-    :deep(.n-button) {
-      --n-width: 30%;
-      max-width: 200px;
-      --n-border-radius: 10px;
-    }
-  }
+:deep(.n-form) {
+  min-width: 300px;
+  max-width: 50%;
+  margin: 0 auto;
 }
 </style>