Zkit工具站

Zkit-C/src/App.vue

@@ -0,0 +1,168 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { RouterView } from 'vue-router'
+import AppHeader from './components/AppHeader.vue'
+import AppFooter from './components/AppFooter.vue'
+import LoginModal from './components/LoginModal.vue'
+import AnnouncementModal from './components/AnnouncementModal.vue' 
+
+// --- 主题切换逻辑 ---
+const isDark = ref(false)
+
+// 执行切换操作
+const applyTheme = (dark) => {
+  isDark.value = dark
+  if (dark) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+}
+
+// 按钮点击事件
+const toggleTheme = () => {
+  applyTheme(!isDark.value)
+}
+
+// --- 回到顶部逻辑 ---
+const showBackTop = ref(false)
+
+const handleScroll = () => {
+  showBackTop.value = window.scrollY > 200
+}
+
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  })
+}
+
+// 初始化：根据时间判断 (19:00 - 06:00为暗色)
+onMounted(() => {
+  const hour = new Date().getHours()
+  const isNight = hour >= 19 || hour < 6
+  applyTheme(isNight)
+  
+  // 添加滚动监听
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  // 移除滚动监听
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<template>
+  <AppHeader />
+  <!-- 路由出口 -->
+  <RouterView />
+  <AppFooter />
+  <LoginModal />
+  <AnnouncementModal />
+
+  <!-- 全局主题切换按钮 -->
+  <div class="theme-switch-btn" @click="toggleTheme" :title="isDark ? '切换到亮色' : '切换到暗色'">
+    <i v-if="isDark" class="fa-solid fa-moon"></i>
+    <i v-else class="fa-solid fa-sun"></i>
+  </div>
+
+  <!-- 全局回到顶部按钮 -->
+  <Transition name="fade">
+    <div 
+      v-show="showBackTop" 
+      class="back-to-top" 
+      @click="scrollToTop"
+      title="回到顶部"
+    >
+      <i class="fa-solid fa-arrow-up"></i>
+    </div>
+  </Transition>
+</template>
+
+<style>
+/* 引入修改后的main.css */
+@import './assets/main.css';
+
+/* 切换按钮样式 */
+.theme-switch-btn {
+  position: fixed;
+  bottom: 100px; /* 位于返回顶部按钮上方 */
+  right: 40px;
+  width: 50px;
+  height: 50px;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  color: var(--text-main);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  box-shadow: var(--shadow-md);
+  cursor: pointer;
+  z-index: 999;
+  transition: all 0.3s ease;
+}
+
+.theme-switch-btn:hover {
+  transform: rotate(15deg) scale(1.1);
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+/* 回到顶部按钮样式 */
+.back-to-top {
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  width: 50px;
+  height: 50px;
+  background-color: var(--primary);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
+  cursor: pointer;
+  z-index: 999;
+  transition: all 0.3s ease;
+}
+
+.back-to-top:hover {
+  transform: translateY(-5px);
+  background-color: var(--primary-dark);
+  box-shadow: 0 15px 20px -3px rgba(37, 99, 235, 0.4);
+}
+
+/* Vue 过渡动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+@media (max-width: 768px) {
+  .theme-switch-btn {
+    right: 20px;
+    bottom: 80px;
+    width: 45px;
+    height: 45px;
+  }
+  
+  .back-to-top {
+    bottom: 20px;
+    right: 20px;
+    width: 45px;
+    height: 45px;
+  }
+}
+</style>