element UI

npm i -D unplugin-auto-import unplugin-vue-components unplugin-element-plus  # 升级自动导入相关插件  # 中文注释
npm i @element-plus/icons-vue@latest -S  # 升级图标包  # 中文注释
npm i element-plus@latest -S             # 升级组件库本体  # 中文注释

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn' // 中文
import 'element-plus/dist/index.css' //导入element样式
import 'element-plus/theme-chalk/dark/css-vars.css' //导入element黑暗样式
import './style.css' //导入自定义样式
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 ,locale: zhCn}) // 全局引入

@import "tailwindcss" important; //添加important

<!-- 行容器 -->
<el-row>
	<!-- 列容器 md屏幕以上一半屏幕 xs可改为sm或不设置-->
    <el-col :xs="24" :md="12">
	</el-col>
	<el-col :xs="24" :md="12">
	</el-col>
</el-row>

import { ElMessage } from 'element-plus'
// 假设这是某函数中：
ElMessage.success('成功，绿色')
ElMessage.warning('警告，黄色')
ElMessage.error('遇到错误，红色警告')

/**
 * - 状态持久化到 localStorage
 * - 首次初始化时，若无偏好则跟随系统
 */
import { defineStore } from 'pinia'

export type Theme = 'light' | 'dark'

export const useThemeStore = defineStore('theme', {
  state: () => ({
    theme: 'light' as Theme
  }),

  actions: {
    /** 初始化主题（读取本地或跟随系统） */
    initThemeStore() {
      const saved = localStorage.getItem('theme') as Theme | null
      if (saved === 'light' || saved === 'dark') {
        this.theme = saved
      } else if (typeof window !== 'undefined') {
        this.theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
        localStorage.setItem('theme', this.theme)
      }
    },

    /** 设置主题并持久化 */
    setTheme(theme: Theme) {
      this.theme = theme
      localStorage.setItem('theme', theme)
    }
  }
})

/**
 * - 负责把主题写到 DOM（切换 html.dark）
 * - 对外暴露 theme、toggleTheme 和 getThemeLabel
 */
import { computed, onMounted } from 'vue'
import { useThemeStore } from './storage'

export type Theme = 'light' | 'dark'

export function useTheme() {
  const store = useThemeStore()
  const theme = computed(() => store.theme)

  /** 应用主题到 DOM：加/删 html.dark */
  const applyTheme = (t: Theme) => {
    const html = document.documentElement
    t === 'dark' ? html.classList.add('dark') : html.classList.remove('dark')
  }

  /** 切换主题 */
  const toggleTheme = () => {
    const next = theme.value === 'light' ? 'dark' : 'light'
    store.setTheme(next)
    applyTheme(next)
  }

  /** 文案 */
  const getThemeLabel = (t: Theme) => (t === 'light' ? '明亮模式' : '黑暗模式')

  // 首次挂载时初始化 + 应用
  onMounted(() => {
    store.initThemeStore()
    applyTheme(theme.value)
  })

  return { theme, toggleTheme, getThemeLabel }
}

import 'element-plus/dist/index.css' //导入element样式
import 'element-plus/theme-chalk/dark/css-vars.css' //导入element黑暗样式
import './style.css' //导入自定义样式

/* 设置tailwind更高优先级 */
@import "tailwindcss" important;

/* 设置默认主题的颜色，暗黑主题保持相同颜色，也可以单独写html.dark*/
html.dark,:root {
  /* 核心 primary 颜色 */
  --el-color-primary: #01c465;
  --el-color-primary-light-3: #8dffc4;   /* 悬停状态 */
  --el-color-primary-light-5: #cdfee0;   /* 浅色状态 */
  --el-color-primary-light-9: rgba(255, 255, 255, 0);   /* 浅色状态透明背景 */
  --el-color-primary-dark-1: #03c266;    /* 按下状态 */
  --el-color-primary-dark-2: #00a759;    /* 深度按下 */
  /* 边角圆度设置 - 统一设置更高的圆角 */
  --el-border-radius-base: 8px;         /* 基础圆角 (默认4px) */
  --el-border-radius-small: 4px;         /* 小圆角 (默认2px) */
}

<template>
  <el-button
    @click="toggleTheme"
    :icon="theme === 'light' ? Moon : Sunny"
    circle
    :title="getThemeLabel(theme)"
  />
</template>

<script setup lang="ts">
// 使用主题组合函数
import { useTheme } from '../utils/useTheme'
import { Moon, Sunny } from '@element-plus/icons-vue'

const { theme, toggleTheme, getThemeLabel } = useTheme()
</script>

<style scoped>
:deep(.sidebar-tw .el-button + .el-button) {
  margin-left: 0 !important;          /* 清除相邻左外边距，保留 Tailwind 的 gap      */  /* 中文注释 */
}
</style>

import type { Directive } from 'vue' //防抖引用
// 按钮防重复点击，调用方法<el-button v-load="2000" />
const loadingDirective: Directive = {
    mounted(el, binding) {
      el.addEventListener('click', () => {
        // 添加禁用状态
        el.disabled = true
        el.classList.add('is-disabled')
        
        // 指定时间后恢复
        setTimeout(() => {

        el.disabled = false
        el.classList.remove('is-disabled')
        }, binding.value || 2000)
      })
    }
  }