增加设备列表

src/assets/native-plugin.ts

@@ -10,7 +10,10 @@ import {
   NLayoutSider,
   NMenu,
   NInput,
-  NCheckbox
+  NCheckbox,
+  NUpload,
+  NImage,
+  NFormItem
 } from 'naive-ui'
 
 const naive = create({
@@ -25,8 +28,10 @@ const naive = create({
     NLayoutFooter,
     NMenu,
     NInput,
-    NCheckbox
-
+    NCheckbox,
+    NUpload,
+    NImage,
+    NFormItem
   ]
 })
 

src/pages/device/index.vue

@@ -1,8 +1,151 @@
 <template>
-  <div>device</div>
+  <div class="device">
+    <div class="device-title">
+      设备：{{ deviceList.length }}
+    </div>
+    <div class="device-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"
+        >
+          <n-image
+            width="50"
+            height="50"
+            src="./img/1.png"
+          />
+          <div>
+            <p>智能灯智能灯智能灯智能灯智能灯智能灯智能灯智能灯智能灯</p>
+            <p>未连接</p>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div
+      v-if="showBar"
+      class="device-bar"
+    >
+      <span>添加设备</span>
+      <n-button
+        type="warning"
+        @click="change"
+      >
+        完成
+      </n-button>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
+import useStore from '@/store'
+import { computed, onMounted, ref } from 'vue'
+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 }
+])
+const showBar = computed(() => router.options.history.state.back === '/create')
+
+function change() {
+  console.log('跳转到设备list')
+  router.push('/list')
+  store.setRoomData(null)
+}
+
+onMounted(() => {
+  console.log(123, store.newRoomData)
+})
 </script>
 <style lang="scss" scoped>
+.device {
+  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% - 86px);
+    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 {
+        scale: 1.01;
+      }
+
+      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:last-child {
+          font-size: 13px;
+        }
+      }
+
+    }
+
+    .active {
+      background: rgba(99, 226, 183, 0.15);
+      color: #63e2b7;
+    }
+  }
+
+  &-bar {
+    width: 100%;
+    height: 40px;
+    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/index.vue

@@ -102,7 +102,7 @@ const menuOptions = [
   }
 ]
 const route = useRoute()
-const selectedKey = ref(route.name)
+const selectedKey = ref((route.name as string || '').split('/')[0])
 
 function changeTrigger() {
   isTrigger.value = document.documentElement.clientWidth < 550

src/pages/room/create.vue

@@ -1,12 +1,89 @@
 <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-item label="取个好名字先">
+        <n-input
+          v-model:value="data.name"
+          placeholder="输入房间名称"
+        />
+      </n-form-item>
+    </div>
+    <div class="roomCreate-bar">
+      <span>给房间取个名</span>
+      <n-button
+        type="warning"
+        @click="change"
+      >
+        继续
+      </n-button>
+    </div>
   </div>
 </template>
 
 <script setup lang='ts'>
+import useStore from '@/store'
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
+const store = useStore()
+const data = reactive({
+  erUrl: new URL('./img/2.png', import.meta.url).href,
+  name: ''
+})
+
+function change() {
+  router.push('/device')
+  store.setRoomData({ name: 'test', id: 1 })
+}
 </script>
 <style lang="scss" scoped>
+.roomCreate {
+  padding: 40px 4% 0 4%;
+  min-width: 327px;
+  height: 100%;
+
+  &-content {
+    height: calc(100% - 40px);
+    text-align: center;
+    padding: 0 5%;
+
+    :deep(.n-upload-trigger) {
+      width: 100%;
+      max-width: 400px;
+
+      &>div {
+        width: 100%;
+        cursor: pointer;
+      }
+    }
+
+  }
+
+  &-bar {
+    width: 100%;
+    height: 40px;
+    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/room/index.vue

@@ -80,7 +80,6 @@ function change(url:string) {
     &-item {
       /* 增长1 不缩小 基础宽度200px */
       flex: 1 0 286px;
-      max-width: 100%;
       height: 180px;
       padding: 10px 20px;
       background: radial-gradient(circle at right, #40464d00, #40464d75 35%), url(./img/1.png) no-repeat right;

src/pages/room/route.ts

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

src/store/index.ts

@@ -6,22 +6,26 @@ export interface UserInfo {
   opmId: number,
   satoken: string
 }
+export interface RoomData {
+  id: number,
+  name: string
+}
 
 // id必填，且需要唯一
 const useStore = defineStore('index', {
   state: () => ({
     userInfro: {} as UserInfo,
     token: '',
-    isCheckPermission: false,
-    loading: false
+    loading: false,
+    newRoomData: null as RoomData | null
   }),
   actions: {
     setUserInfo(data: UserInfo) {
       this.userInfro = data
       this.token = data.satoken || ''
     },
-    setCheckPermission(data: boolean) {
-      this.isCheckPermission = data
+    setRoomData(data: RoomData | null) {
+      this.newRoomData = data
     }
   },
   persist: {