前端代码

2026-08-13 22:35:13 +08:00
parent 9044bafdff
commit f1a0b17bb0
412 changed files with 36769 additions and 6617 deletions
@@ -0,0 +1,98 @@
+<template>
+  <div class="search-component items-center">
+    <div
+      class="kraIcon kraIcon-refresh"
+      :class="[reload ? 'reloading' : '']"
+      @click="handleReload"
+    />
+    <Screenfull class="search-icon" />
+    <div class="kraIcon kraIcon-customer-service" @click="toService" />
+    <el-switch
+      v-model="isDark"
+      :active-action-icon="Moon"
+      :inactive-action-icon="Sunny"
+      @change="handleDarkSwitch"
+    />
+  </div>
+</template>
+
+<script setup>
+  import Screenfull from '@/view/layout/screenfull/index.vue'
+  import { emitter } from '@/utils/bus.js'
+  import { Sunny, Moon } from '@element-plus/icons-vue'
+  import { ref, watchEffect } from 'vue'
+
+  defineOptions({
+    name: 'BtnBox'
+  })
+  const isDark = ref(localStorage.getItem('isDark') === 'true' || true)
+
+  watchEffect(() => {
+    if (isDark.value) {
+      document.documentElement.classList.add('dark')
+      localStorage.setItem('isDark', true)
+    } else {
+      document.documentElement.classList.remove('dark')
+      localStorage.setItem('isDark', false)
+    }
+  })
+  const reload = ref(false)
+  const handleReload = () => {
+    reload.value = true
+    emitter.emit('reload')
+    setTimeout(() => {
+      reload.value = false
+    }, 500)
+  }
+  const toService = () => {
+    window.open('https://support.qq.com/product/371961')
+  }
+
+  const handleDarkSwitch = (e) => {
+    isDark.value = e
+  }
+</script>
+<style scoped lang="scss">
+  .search-component {
+    @apply inline-flex overflow-hidden text-center gap-5 mr-5 text-base-text;
+    div {
+      @apply cursor-pointer;
+    }
+    .el-input__inner {
+      @apply border-b border-solid border-border;
+    }
+    .el-dropdown-link {
+      @apply cursor-pointer;
+    }
+  }
+
+  .reload {
+    font-size: 18px;
+  }
+
+  .reloading {
+    animation: turn 0.5s linear infinite;
+  }
+
+  @keyframes turn {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    25% {
+      transform: rotate(90deg);
+    }
+
+    50% {
+      transform: rotate(180deg);
+    }
+
+    75% {
+      transform: rotate(270deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>