完善列表

src/assets/native-plugin.ts

@@ -10,10 +10,13 @@ import {
   NLayoutSider,
   NMenu,
   NInput,
-  NCheckbox,
   NUpload,
   NImage,
-  NFormItem
+  NForm,
+  NFormItem,
+  NBreadcrumb,
+  NBreadcrumbItem,
+  NSwitch
 } from 'naive-ui'
 
 const naive = create({
@@ -28,10 +31,14 @@ const naive = create({
     NLayoutFooter,
     NMenu,
     NInput,
-    NCheckbox,
     NUpload,
     NImage,
-    NFormItem
+    NForm,
+    NFormItem,
+    NBreadcrumb,
+    NBreadcrumbItem,
+    NSwitch
+
   ]
 })
 

src/pages/device/index.vue

@@ -16,7 +16,8 @@
           <n-image
             width="50"
             height="50"
-            src="./img/1.png"
+            :preview-disabled="true"
+            :src="item.url"
           />
           <div>
             <p>智能灯智能灯智能灯智能灯智能灯智能灯智能灯智能灯智能灯</p>
@@ -47,22 +48,22 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const store = useStore()
 const deviceList = ref([
-  { check: false },
-  { check: false },
-  { check: false },
-  { check: false },
-  { check: false },
-  { check: false },
-  { check: false },
-  { check: false },
-  { check: false },
-  { check: false }
+  { check: false, url: new URL('./img/1.png', import.meta.url).href },
+  { check: false, url: new URL('./img/1.png', import.meta.url).href },
+  { check: false, url: new URL('./img/1.png', import.meta.url).href },
+  { check: false, url: new URL('./img/1.png', import.meta.url).href },
+  { check: false, url: new URL('./img/1.png', import.meta.url).href },
+  { check: false, url: new URL('./img/1.png', import.meta.url).href },
+  { check: false, url: new URL('./img/1.png', import.meta.url).href },
+  { check: false, url: new URL('./img/1.png', import.meta.url).href },
+  { 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 showBar = computed(() => router.options.history.state.back === '/create')
 
 function change() {
   console.log('跳转到设备list')
-  router.push('/list')
+  router.push('/room')
   store.setRoomData(null)
 }
 
@@ -102,7 +103,7 @@ onMounted(() => {
       display: flex;
 
       &:hover {
-        scale: 1.01;
+        background-color: rgba(99, 226, 183, 0.15);
       }
 
       p {

src/pages/room/index.vue

@@ -53,7 +53,6 @@ const roomList = ref([
 ])
 
 function change(url:string) {
-  console.log('跳转到设备list')
   router.push(url)
 }
 </script>
@@ -102,7 +101,7 @@ function change(url:string) {
       }
 
       &:hover {
-        scale: 1.01;
+        background-color: rgba(99, 226, 183, 0.15);
       }
     }
 

src/pages/room/list.vue

@@ -1,11 +0,0 @@
-<template>
-  <div>设备列表</div>
-</template>
-
-<script setup lang='ts'>
-
-</script>
-
-<style>
-
-</style>

src/pages/room/create.vue → src/pages/room/room-create.vue

@@ -13,12 +13,14 @@
           :src="data.erUrl"
         />
       </n-upload>
-      <n-form-item label="取个好名字先">
-        <n-input
-          v-model:value="data.name"
-          placeholder="输入房间名称"
-        />
-      </n-form-item>
+      <n-form size="large">
+        <n-form-item label="取个好名字先">
+          <n-input
+            v-model:value="data.name"
+            placeholder="输入房间名称"
+          />
+        </n-form-item>
+      </n-form>
     </div>
     <div class="roomCreate-bar">
       <span>给房间取个名</span>
@@ -70,6 +72,10 @@ function change() {
       }
     }
 
+    :deep(.n-form) {
+      max-width: 80%;
+      margin: 0 auto;
+    }
   }
 
   &-bar {

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

@@ -0,0 +1,103 @@
+<template>
+  <div class="list">
+    <div class="list-title">
+      <n-breadcrumb>
+        <n-breadcrumb-item>
+          <RouterLink to="/room">
+            房间名称
+          </RouterLink>
+        </n-breadcrumb-item>
+        <n-breadcrumb-item>
+          <RouterLink to="/list">
+            设备列表
+          </RouterLink>
+        </n-breadcrumb-item>
+        <n-breadcrumb-item>
+          设备名称
+        </n-breadcrumb-item>
+      </n-breadcrumb>
+    </div>
+    <div class="list-content">
+      <div class="list-content-item">
+        <n-image
+          width="200"
+          height="200"
+          :preview-disabled="true"
+          :src="device.url"
+        />
+        <n-form size="large">
+          <n-form-item
+            label="状态"
+            label-placement="left"
+          >
+            <n-switch />
+          </n-form-item>
+          <n-form-item label="WIFI">
+            <n-input placeholder="输入WIFI" />
+          </n-form-item>
+          <n-form-item label="WIFI密码">
+            <n-input placeholder="输入WI-FI密码" />
+          </n-form-item>
+          <n-form-item>
+            <n-button
+              type="info"
+              block
+            >
+              保存
+            </n-button>
+          </n-form-item>
+        </n-form>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useRouter, RouterLink } from 'vue-router'
+
+const router = useRouter()
+const device = reactive({ check: false, url: new URL('./img/3.png', import.meta.url).href })
+</script>
+<style lang="scss" scoped>
+.list {
+  height: 100%;
+  padding: 40px 4% 0 4%;
+  min-width: 327px;
+
+  &-title {
+    font-size: 18px;
+  }
+
+  &-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-image) {
+        margin: 0 auto;
+      }
+
+      :deep(.n-form) {
+        max-width: 70%;
+        margin: 0 auto;
+      }
+    }
+
+  }
+}
+</style>

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

@@ -0,0 +1,113 @@
+<template>
+  <div class="list">
+    <div class="list-title">
+      <n-breadcrumb>
+        <n-breadcrumb-item>
+          <RouterLink to="/room">
+            房间
+          </RouterLink>
+        </n-breadcrumb-item>
+        <n-breadcrumb-item>
+          设备：{{ deviceList.length }}
+        </n-breadcrumb-item>
+      </n-breadcrumb>
+    </div>
+    <div class="list-content">
+      <template
+        v-for="(item, index) in deviceList"
+        :key="index"
+      >
+        <div
+          class="list-content-item"
+          @click="change"
+        >
+          <n-image
+            width="60"
+            height="60"
+            :preview-disabled="true"
+            :src="item.url"
+          />
+          <div>
+            <span>只能等</span>
+            <n-switch />
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter, RouterLink } from 'vue-router'
+
+const router = useRouter()
+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 },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { check: false, url: new URL('./img/3.png', import.meta.url).href },
+  { 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() {
+  router.push('/detail')
+}
+</script>
+<style lang="scss" scoped>
+.list {
+  height: 100%;
+  padding: 40px 4% 0 4%;
+  min-width: 327px;
+
+  &-title {
+    font-size: 18px;
+  }
+
+  &-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 {
+      /* 增长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;
+      }
+    }
+
+  }
+}
+</style>

src/pages/room/route.ts

@@ -17,12 +17,17 @@ export default {
     {
       path: '/create',
       name: 'room/create',
-      component: () => import('./create.vue')
+      component: () => import('./room-create.vue')
     },
     {
       path: '/list',
       name: 'room/list',
-      component: () => import('./list.vue')
+      component: () => import('./room-device-list.vue')
+    },
+    {
+      path: '/detail',
+      name: 'room/detail',
+      component: () => import('./room-device-detail.vue')
     }
   ]
 } as RouteRecordRaw