lckt-admin/src/view/layout/header/tools.vue

<!--
    @auther: bypanghu<bypanghu@163.com>
    @date: 2024/5/7
!-->

<template>
  <div class="flex items-center mx-4 gap-4">
    <el-tooltip class="" effect="dark" content="视频教程" placement="bottom">
      <el-dropdown @command="toDoc">
        <el-icon
          class="w-8 h-8 p-2 shadow rounded-full border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
        >
          <Film />
        </el-icon>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in videoList"
              :key="item.link"
              :command="item.link"
              >{{ item.title }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-tooltip>

    <el-tooltip class="" effect="dark" content="搜索" placement="bottom">
      <el-icon
        @click="handleCommand"
        class="w-8 h-8 p-2 shadow rounded-full border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
      >
        <Search />
      </el-icon>
    </el-tooltip>

    <el-tooltip class="" effect="dark" content="系统设置" placement="bottom">
      <el-icon
        class="w-8 h-8 p-2 shadow rounded-full border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
        @click="toggleSetting"
      >
        <Setting />
      </el-icon>
    </el-tooltip>

    <el-tooltip class="" effect="dark" content="刷新" placement="bottom">
      <el-icon
        class="w-8 h-8 p-2 shadow rounded-full border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
        :class="showRefreshAnmite ? 'animate-spin' : ''"
        @click="toggleRefresh"
      >
        <Refresh />
      </el-icon>
    </el-tooltip>
    <el-tooltip
      class=""
      effect="dark"
      content="切换主题"
      placement="bottom"
    >
      <el-icon
        v-if="appStore.isDark"
        class="w-8 h-8 p-2 shadow rounded-full border border-gray-600 cursor-pointer border-solid"
        @click="appStore.toggleTheme(false)"
      >
        <Sunny />
      </el-icon>
      <el-icon
        v-else
        class="w-8 h-8 p-2 shadow rounded-full border border-gray-200 cursor-pointer border-solid"
        @click="appStore.toggleTheme(true)"
      >
        <Moon />
      </el-icon>
    </el-tooltip>

    <gva-setting v-model:drawer="showSettingDrawer"></gva-setting>
    <command-menu ref="command" />
  </div>
</template>

<script setup>
  import { useAppStore } from '@/pinia'
  import GvaSetting from '@/view/layout/setting/index.vue'
  import { ref } from 'vue'
  import { emitter } from '@/utils/bus.js'
  import CommandMenu from '@/components/commandMenu/index.vue'
  import { toDoc } from '@/utils/doc'

  const appStore = useAppStore()
  const showSettingDrawer = ref(false)
  const showRefreshAnmite = ref(false)
  const toggleRefresh = () => {
    showRefreshAnmite.value = true
    emitter.emit('reload')
    setTimeout(() => {
      showRefreshAnmite.value = false
    }, 1000)
  }

  const toggleSetting = () => {
    showSettingDrawer.value = true
  }

  const first = ref('')
  const command = ref()

  const handleCommand = () => {
    command.value.open()
  }
  const initPage = () => {
    // 判断当前用户的操作系统
    if (window.localStorage.getItem('osType') === 'WIN') {
      first.value = 'Ctrl'
    } else {
      first.value = '⌘'
    }
    // 当用户同时按下ctrl和k键的时候
    const handleKeyDown = (e) => {
      if (e.ctrlKey && e.key === 'k') {
        // 阻止浏览器默认事件
        e.preventDefault()
        handleCommand()
      }
    }
    window.addEventListener('keydown', handleKeyDown)
  }

  initPage()

  const videoList = [
    {
      title: '1.clone项目和安装依赖',
      link: 'https://www.bilibili.com/video/BV1jx4y1s7xx'
    },
    {
      title: '2.初始化项目',
      link: 'https://www.bilibili.com/video/BV1sr421K7sv'
    },
    {
      title: '3.开启调试工具+创建初始化包',
      link: 'https://www.bilibili.com/video/BV1iH4y1c7Na'
    },
    {
      title: '4.手动使用自动化创建功能',
      link: 'https://www.bilibili.com/video/BV1UZ421T7fV'
    },
    {
      title: '5.使用已有表格创建业务',
      link: 'https://www.bilibili.com/video/BV1NE4m1977s'
    },
    {
      title: '6.使用AI创建业务和创建数据源模式的可选项',
      link: 'https://www.bilibili.com/video/BV17i421a7DE'
    },
    {
      title: '7.创建自己的后端方法',
      link: 'https://www.bilibili.com/video/BV1Yw4m1k7fg'
    },
    {
      title: '8.新增一个前端页面',
      link: 'https://www.bilibili.com/video/BV12y411i7oE'
    },
    {
      title: '9.配置一个前端二级页面',
      link: 'https://www.bilibili.com/video/BV1ZM4m1y7i3'
    },
    {
      title: '10.配置一个前端菜单参数',
      link: 'https://www.bilibili.com/video/BV1WS42197DZ'
    },
    {
      title: '11.菜单参数实战+动态菜单标题+菜单高亮配置',
      link: 'https://www.bilibili.com/video/BV1NE4m1979c'
    },
    {
      title: '12.增加菜单可控按钮',
      link: 'https://www.bilibili.com/video/BV1Sw4m1k746'
    },
    {
      title: '14.新增客户角色和其相关配置教学',
      link: 'https://www.bilibili.com/video/BV1Ki421a7X2'
    },
    {
      title: '15.发布项目上线',
      link: 'https://www.bilibili.com/video/BV1Lx4y1s77D'
    }
  ]
</script>

<style scoped lang="scss"></style>