fuse-code/src/layout/scene-list/index.vue

<template>
  <List key="id" :data="list" class="scene-list">
    <template #action>
      <slot name="action" />
    </template>
    <template #atom="{ item }">
      <div v-if="item.raw === fuseModel" 
        @click="updateCurrent(item.raw)"
      >
        <ModelList
          class="scene-model-list"
          :class="{active: current === fuseModel}"
          :title="getModelTypeDesc(fuseModel as any)"
          :show-content="showModelList"
        >
          <template #action>
            <ui-icon 
              :type="`pull-${showModelList ? 'up' : 'down'}`" 
              @click="showModelList = !showModelList"
              ctrl 
            />
          </template>
        </ModelList>
      </div>
      <div 
        class="scene" 
        :class="{disabled: item.raw.status !== SceneStatus.SUCCESS}" 
        @click="updateCurrent(item.raw)" 
        v-else
      >
        <p>{{ item.raw.name }}</p>
        <p>{{ SceneTypeDesc[item.raw.type as SceneType] }}</p>
      </div>
    </template>
  </List>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref, watch } from 'vue'
import { scenes, SceneType, SceneTypeDesc, fuseModels, SceneStatus } from '@/store'
import List from '@/components/list/index.vue'
import ModelList from '../model-list/index.vue'
import { fuseModel, getModelTypeDesc } from '@/model'

import type { ModelType, FuseModelType } from '@/model'
import type { Scene } from '@/store'

const emit = defineEmits<{ (e: 'update:current', data: ModelType): void }>()
const props = defineProps<{ current: ModelType }>()
const showModelList = ref(true)

const list = computed(() => {
  const sceneList = scenes.value.map(scene => ({
    raw: scene,
    select: props.current !== fuseModel 
      && (props.current.num === scene.num )
      && props.current.type === scene.type
  }))
  if (fuseModels.value.length) {
    return [{ raw: fuseModel }, ...sceneList]
  } else {
    return sceneList
  }
})

const updateCurrent = (scene: FuseModelType | Scene) => {
  if (scene === fuseModel) {
    emit('update:current', scene)
  } else {
    emit('update:current', { type: scene.type, num: scene.num })
  }
}

const stopWatch = watch(list, () => {
  if (!list.value.some(model => model.raw === fuseModel)) {
    updateCurrent(list.value[0].raw as any)
    nextTick(() => stopWatch())
  }
}, { immediate: true })
</script>

<style lang="scss">
.scene-list > .content > li {
  padding: 0 !important;
}

.scene {
  padding: 0 20px;

  p {
    height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis
  }
}

.scene-model-list.list {
  margin-bottom: -20px;
  margin-top: -20px;

  .header {
    padding: 30px 20px 20px;
    h3 {
      font-size: 20px;
      font-weight: bold;
      color: #FFFFFF;
    }
  }

  &.active .header {
    background-color: rgba(0, 200, 175, 0.16);
  }

  .content li:last-child .atom-content {
    border: none;
  }
}
</style>