SichuanDaily/src/views/topicNavigation/index.vue

<template>
  <div>
    <n-drawer
      v-model:show="active"
      :width="240"
      placement="right"
      :trap-focus="false"
      :block-scroll="false"
      :show-mask="false"
      :mask-closable="false"
      to="#drawer-target"
      style="--n-body-padding: 0px"
    >
      <n-drawer-content title="专题导航">
        <div class="drawerContent m-5"></div>
        <n-flex justify="center">
          <n-button type="primary" @click="handleAdd">+ 添加</n-button>
        </n-flex>

        <n-list
          hoverable
          clickable
          style="--n-color-modal: none; margin-top: 20px"
          :show-divider="false"
          @select="handleSelect"
        >
          <n-list-item v-for="(nav, index) in dataList" :key="index" style="">
            <n-flex justify="space-between">
              <n-flex align="center">
                <n-icon size="20">
                  <WalkSharp />
                </n-icon>
                {{ nav.title }}
              </n-flex>

              <n-dropdown trigger="hover" :options="fullOptions">
                <n-icon :size="20">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 32 32"
                  >
                    <circle cx="8" cy="16" r="2" fill="currentColor"></circle>
                    <circle cx="16" cy="16" r="2" fill="currentColor"></circle>
                    <circle cx="24" cy="16" r="2" fill="currentColor"></circle>
                  </svg>
                </n-icon>
              </n-dropdown>
            </n-flex>
          </n-list-item>
        </n-list>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { sdk, clearScreen } from '@/sdk'
import { onMounted, onUnmounted } from 'vue'
import {
  NRadio,
  NPopover,
  useDialog,
  useMessage,
  NDropdown,
  NList,
  NListItem
} from 'naive-ui'
import { WalkSharp, TrashOutline, EllipsisHorizontal } from '@vicons/ionicons5'

const panos = ref([])
const isEditing = ref({
  index: NaN
})

const dataList = ref<
  {
    title: string
    panos: string[]
  }[]
>([])

sdk.then((sdk) => {
  sdk.PanoCheckManager.on('changed', (list: any) => {
    panos.value = list
    console.log('panos', panos.value)
  })
})

const handleAdd = () => {
  sdk.then((sdk) => {
    sdk.Scene.whenLoaded(() => {
      sdk.PanoCheckManager.enter()
      clearScreen(true)
    })
  })
  if (panos.value.length === 0) {
    dataList.value.push({
      title: '新增路线',
      panos: []
    })
  } else {
    // message.warning('请先保存数据！')
  }
}

onMounted(() => {
  sdk.then((sdk) => {
    sdk.Scene.whenLoaded(() => {
      sdk.PanoCheckManager.enter()
      // debugger
      clearScreen(true)
    })
  })
})

onUnmounted(() => {
  sdk.then((sdk) => {
    sdk.PanoCheckManager.leave()
    clearScreen(false)
  })
})

defineProps<{ msg: string }>()

const dialog = useDialog()
const message = useMessage()

const active = ref(true)
// const show = ref(true)

const fullOptions = ref([
  {
    label: '编辑',
    key: '1'
  },
  {
    label: '删除',
    key: '2'
  }
])

const handleSelect = (key: string) => {
  switch (key) {
    case '1':
      break
    case '2':
      break
  }
}
</script>

<style lang="sass" scoped>
a
  color: #42b983

label
  margin: 0 0.5em
  font-weight: bold

code
  background-color: #eee
  padding: 2px 4px
  border-radius: 4px
  color: #304455
</style>