// 默認使用淺色主題
:root{
  --bg-color:#ffffff;
  --text-color: #333333;
}
 
// 深色主題
.theme-dark{
  --bg-color:#333333;
  --text-color: #ffffff;
}
 
// 自定義主題
.theme-custom{ 
  --bg-color: red;
  --text-color: #333333;
}
 
// 全局應(yīng)用背景色
body{
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.5s ease-in-out; // 添加過渡效果，平滑過渡
}

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/styles/theme.scss'; // 導入全局主題樣式：確保主題變量全局可訪問
 
const app = createApp(App)
 
app.use(createPinia())
app.use(router)
 
app.mount('#app')

<script lang="ts" setup>
import router from '@/router';
import { ref, onMounted, watchEffect, computed, onUnmounted } from 'vue'
import type { Ref } from 'vue'
import { getUserInfo } from '@/api/home';
import { useUserStore } from '@/stores/user';
import { useTheme } from '@/composables/useTheme';
 
const { currentTheme, changeTheme } = useTheme();
 
const userStore = useUserStore()
 
interface IUserInfo {
  adminid: string,
  adminname: string,
  checkedKeys: any[],
  role: number
}
const userInfo: Ref<IUserInfo> = ref({
  adminid: '',
  adminname: '',
  checkedKeys: [],
  role: -1
})
 
// 1.使用 ref 創(chuàng)建一個響應(yīng)式的當前時間  toLocaleString()是格式化日期和時間的方法
const currentTime = ref(new Date().toLocaleString())
// 2.定義一個函數(shù)來更新時間
function updateTime(){
  currentTime.value = new Date().toLocaleString()
}
 
onMounted(async () => {
  // 3.設(shè)置一個定時器，每一秒更新一遍時間
  const time = setInterval(updateTime,1000)
 
  onUnmounted(()=>{
    // 4.在組件卸載時清除定時器，避免內(nèi)存泄漏
    clearInterval(time)
  })
 
  const res = await getUserInfo({
    adminname: userStore.userInfo.adminname
  })
  userInfo.value = res.data.data[0]
})
 
const logout = (() => {
  localStorage.removeItem('userInfo')
  router.replace('/login')
})
</script>
<template>
  <div class="header-manage">
    <h1>HEADER</h1>
    <div class="admin-manage">
      <div class="theme-switch">
        <button @click="changeTheme('light')">淺色主題</button>
        <button @click="changeTheme('dark')">深色主題</button>
        <button @click="changeTheme('custom')">自定義主題</button>
        <p class="theme-text">當前主題：{{ currentTheme }}</p>
      </div>
      <div class="admin-con">
        <el-icon>
          <i-ep-Stopwatch />
        </el-icon>
        <span>{{ currentTime }}</span>
      </div>
      <div class="admin-con">
        <el-icon>
          <i-ep-User />
        </el-icon>
        <span>{{ userStore.userInfo.adminname }}</span>
      </div>
      <div class="admin-con" style="cursor: pointer;">
        <el-icon>
          <i-ep-SwitchButton />
        </el-icon>
        <span @click="logout">退出登錄</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.header-manage {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color:var(--text-primary-color) //全局主題顏色
}
 
.admin-manage {
  display: flex;
 
  .theme-switch { 
 
    .theme-text{
      color: var(--text-secondary-color);
    }
  }
}
 
.admin-con {
  margin-left: 30px;
  display: flex;
  align-items: center;
 
  span {
    font-size: 14px;
    margin-left: 8px;
  }
}
</style>

// 主題配置接口（添加索引簽名）
interface ThemeConfig {
  "--bg-color": string;
  "--text-primary-color": string;
  "--text-secondary-color": string;
  "--text-tertiary-color": string;
  "--text-disabled-color": string;
  "--button-bg-color": string;
  "--button-text-color": string;
  // 索引簽名：允許用字符串鍵訪問（關(guān)鍵！）
  [key: string]: string;
}
 
// 主題類型定義
export type ThemeType = 'light' | 'dark' | 'custom'
 
// 主題配置
export const themeConfig: Record<ThemeType, ThemeConfig> = {
  light:{
    "--bg-color":'#ffffff', // 背景色
    "--text-primary-color": '#333333',// 主要文字色
    "--text-secondary-color":'#666666', // 次要文字色
    "--text-tertiary-color":'#999999', // 三級文字色
    "--text-disabled-color":'#cccccc', // 禁用文字色
    "--button-bg-color":'#42b983', // 按鈕背景色
    "--button-text-color":'#ffffff', // 按鈕文字色
  },
  dark:{
    "--bg-color":'#333333', // 背景色
    "--text-primary-color":'#ffffff', // 主要文字色
    "--text-secondary-color":'#cccccc', // 次要文字色
    "--text-tertiary-color":'#999999', // 三級文字色
    "--text-disabled-color":'#666666', // 禁用文字色
    "--button-bg-color":'#42b983', // 按鈕背景色
    "--button-text-color":'#ffffff', // 按鈕文字色
  },
  custom:{
     "--bg-color":'skyblue', // 背景色
    "--text-primary-color":'#333333', // 主要文字色
    "--text-secondary-color":'skyblue', // 次要文字色
    "--text-tertiary-color":'#999999', // 三級文字色
    "--text-disabled-color":'#cccccc', // 禁用文字色
    "--button-bg-color":'#42b983', // 按鈕背景色
    "--button-text-color":'#ffffff', // 按鈕文字色
  }
}
 
// 默認主題
export const defaultTheme: ThemeType = 'light';

import type { ThemeType } from '@/theme'
import { themeConfig, defaultTheme } from '@/theme'
import { onMounted, ref } from 'vue'
 
export function useTheme() { 
  // 當前主題，響應(yīng)式
  const currentTheme = ref<ThemeType>(defaultTheme)
 
  // 初始化：從localStorage中獲取保存的主題
  onMounted(() => {
    const theme = localStorage.getItem('app-theme') as ThemeType
    if (theme && Object.keys(themeConfig).includes(theme)) {
      currentTheme.value = theme
      applyTheme(theme) //應(yīng)用主題
    }
  })
 
  // 應(yīng)用主題（核心：給html加主題類名，觸發(fā)css變量切換）
  const applyTheme = (theme: ThemeType) => {
    // 先移除所有主題類
    document.documentElement.classList.remove('theme-light','theme-dark','theme-custom')
    // 添加當前主題類（如果不是默認主題）
    // if(theme !== 'light'){
    //   document.documentElement.classList.add(`theme-${theme}`)
    // }
 
    Object.keys(themeConfig[theme]).forEach(key => {
      document.documentElement.style.setProperty(`${key}`, themeConfig[theme][key]);
    });
 
    // document.documentElement.style.setProperty('--bg-color', themeConfig[theme].backgroundColor);
 
    // 存儲當前主題
    localStorage.setItem('app-theme', theme)
  }
 
  // 切換主題
  const changeTheme = (theme: ThemeType) => {
    if(themeConfig[theme]){
      currentTheme.value = theme
      applyTheme(theme)
    }
  }
 
  return { currentTheme, changeTheme }
}