wui-components-v2 1.1.70 → 1.1.72

package/components/wui-menus1/wui-menus-top.vue

@@ -1,718 +1,718 @@
-<script setup lang="ts">
-import { computed, defineOptions } from 'vue'
-import { useManualTheme } from '../../composables/useManualTheme'
-import { useUser } from '../../composables/useUser'
-import { formatChineseDate } from '../../utils'
-import { useSectionMenus } from '../../composables/useSectionMenus'
-
-defineOptions({
-  name: 'WuiMenusTop',
-})
-
-const user = useUser().getUserInfo()
-
-const {
-  currentThemeColor,
-} = useManualTheme()
-
-const { messageBar, quickPanel } = useSectionMenus()
-const quickPanelcomputed = computed(() => {
-  return quickPanel.value.slice(0, 2)
-})
-</script>
-
-<template>
-  <view class="header-container position-relative">
-    <!-- 背景层 -->
-    <view
-      class="header-background"
-      :style="{ background: `linear-gradient(160deg, ${currentThemeColor.primary} 0%, ${currentThemeColor.primary}dd 50%, ${currentThemeColor.primary}aa 100%)` }"
-    >
-      <!-- 装饰背景元素 -->
-      <view class="header-bg-pattern" />
-      <view class="header-bg-dots" />
-      <view class="header-bg-glow" />
-
-      <!-- 用户信息区域 -->
-      <view class="user-section">
-        <view class="user-info">
-          <view class="avatar-wrapper">
-            <image class="user-avatar" src="../../static/hader.png" mode="aspectFill" />
-            <!-- <view class="avatar-status" /> -->
-            <view class="avatar-ring" />
-          </view>
-          <view class="user-details">
-            <view class="greeting-text">
-              <text class="greeting-label">
-                欢迎回来,
-              </text>
-              <text class="user-name">
-                {{ user.name }}
-              </text>
-            </view>
-            <view class="date-badge">
-              <text class="i-carbon:calendar text-sm" />
-              <text class="date-text">
-                {{ formatChineseDate() }}
-              </text>
-              <!-- <view class="date-divider" />
-              <text class="i-carbon:time text-sm" />
-              <text class="work-status">
-                工作中
-              </text> -->
-            </view>
-          </view>
-        </view>
-      </view>
-
-      <!-- 统计卡片区域 -->
-      <view class="stats-section">
-        <view class="stats-card">
-          <view class="stat-item">
-            <view class="stat-icon-wrapper blue">
-              <text class="i-carbon:notification text-lg" />
-            </view>
-            <view class="stat-info">
-              <text class="stat-value">
-                {{ messageBar?.count }}
-              </text>
-              <text class="stat-label">
-                新消息
-              </text>
-            </view>
-          </view>
-          <!-- <view class="stat-divider" v-if="quickPanelcomputed.length > 0" /> -->
-          <view v-for="item in quickPanelcomputed" :key="item.id" class="stat-item">
-            <view class="stat-icon-wrapper orange">
-              <text class="i-carbon:document text-lg" />
-            </view>
-            <view class="stat-info">
-              <text class="stat-value">
-                {{ item.count }}
-              </text>
-              <text class="stat-label">
-                {{ item.title }}
-              </text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 装饰元素 -->
-    <view class="dashboard-illustration">
-      <view class="illustration-circle circle-1" />
-      <view class="illustration-circle circle-2" />
-      <view class="illustration-circle circle-3" />
-      <view class="illustration-hexagon" />
-      <view class="illustration-line line-1" />
-      <view class="illustration-line line-2" />
-    </view>
-
-    <!-- 快捷入口区域 -->
-    <!-- <view class="quick-actions">
-      <view class="quick-action-item" style="animation-delay: 0.1s">
-        <view class="blue quick-icon">
-          <text class="i-carbon:add text-xl" />
-        </view>
-        <text class="quick-label">
-          新建
-        </text>
-      </view>
-      <view class="quick-action-item" style="animation-delay: 0.2s">
-        <view class="quick-icon purple">
-          <text class="i-carbon:search text-xl" />
-        </view>
-        <text class="quick-label">
-          查询
-        </text>
-      </view>
-      <view class="quick-action-item" style="animation-delay: 0.3s">
-        <view class="quick-icon teal">
-          <text class="i-carbon:chart-pie text-xl" />
-        </view>
-        <text class="quick-label">
-          报表
-        </text>
-      </view>
-      <view class="quick-action-item" style="animation-delay: 0.4s">
-        <view class="quick-icon rose">
-          <text class="i-carbon:settings text-xl" />
-        </view>
-        <text class="quick-label">
-          设置
-        </text>
-      </view>
-    </view> -->
-  </view>
-</template>
-
-<style lang="scss" scoped>
-// 头部容器
-.header-container {
-  position: relative;
-  overflow: hidden;
-  padding-bottom: 24rpx;
-}
-
-// 背景层
-.header-background {
-  position: relative;
-  z-index: 0;
-  // min-height: 380rpx;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 48rpx 32rpx;
-  border-radius: 0 0 48rpx 48rpx;
-  //  box-shadow:
-  //    0 12rpx 40rpx rgba(0, 0, 0, 0.12),
-  //    0 4rpx 12rpx rgba(0, 0, 0, 0.08),
-  //    inset 0 1rpx 0 rgba(255, 255, 255, 0.25);
-  overflow: hidden;
-}
-
-// 背景纹理 - 网格点阵
-.header-bg-pattern {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image:
-    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
-    radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.08) 0%, transparent 30%);
-  pointer-events: none;
-}
-
-// 点阵装饰
-.header-bg-dots {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1rpx, transparent 1rpx);
-  background-size: 24rpx 24rpx;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-// 光晕效果
-.header-bg-glow {
-  position: absolute;
-  top: -100rpx;
-  right: -100rpx;
-  width: 400rpx;
-  height: 400rpx;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
-  pointer-events: none;
-}
-
-// 用户信息区域
-.user-section {
-  position: relative;
-  z-index: 1;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 28rpx;
-}
-
-// 头像包装器
-.avatar-wrapper {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.user-avatar {
-  width: 108rpx;
-  height: 108rpx;
-  border-radius: 50%;
-  border: 4rpx solid rgba(255, 255, 255, 0.95);
-  box-shadow:
-    0 8rpx 24rpx rgba(0, 0, 0, 0.2),
-    0 0 0 6rpx rgba(255, 255, 255, 0.15),
-    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3);
-  object-fit: cover;
-  transition: transform 0.3s ease;
-}
-
-.avatar-status {
-  position: absolute;
-  bottom: 4rpx;
-  right: 4rpx;
-  width: 24rpx;
-  height: 24rpx;
-  background: linear-gradient(135deg, #10b981, #059669);
-  border-radius: 50%;
-  border: 3rpx solid rgba(255, 255, 255, 0.95);
-  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
-  z-index: 2;
-}
-
-.avatar-ring {
-  position: absolute;
-  top: -7rpx;
-  left: -7rpx;
-  right: -7rpx;
-  bottom: -7rpx;
-  border-radius: 50%;
-  border: 2rpx solid rgba(255, 255, 255, 0.25);
-  animation: pulse 3s ease-in-out infinite;
-}
-
-// 用户详情
-.user-details {
-  display: flex;
-  flex-direction: column;
-  gap: 16rpx;
-}
-
-.greeting-text {
-  display: flex;
-  align-items: baseline;
-  gap: 12rpx;
-  flex-wrap: wrap;
-}
-
-.greeting-label {
-  font-size: 26rpx;
-  color: rgba(255, 255, 255, 0.8);
-  font-weight: 400;
-  letter-spacing: 0.02em;
-}
-
-.user-name {
-  font-size: 40rpx;
-  color: #fff;
-  font-weight: 700;
-  text-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15);
-  letter-spacing: 0.02em;
-}
-
-// 日期徽章
-.date-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 10rpx;
-  padding: 10rpx 20rpx;
-  background: rgba(255, 255, 255, 0.18);
-  backdrop-filter: blur(12rpx);
-  -webkit-backdrop-filter: blur(12rpx);
-  border-radius: 32rpx;
-  border: 1rpx solid rgba(255, 255, 255, 0.25);
-  color: rgba(255, 255, 255, 0.95);
-}
-
-.date-text {
-  font-size: 22rpx;
-  font-weight: 500;
-}
-
-.date-divider {
-  width: 1rpx;
-  height: 20rpx;
-  background: rgba(255, 255, 255, 0.4);
-  margin: 0 4rpx;
-}
-
-.work-status {
-  font-size: 22rpx;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.95);
-}
-
-// 统计卡片区域
-.stats-section {
-  // position: absolute;
-  // bottom: 30rpx;
-  // left: 32rpx;
-  // right: 32rpx;
-  padding-top: 32rpx ;
-  z-index: 10;
-}
-
-.stats-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: rgba(255, 255, 255, 0.98);
-  border-radius: 24rpx;
-  padding: 28rpx 20rpx;
-  box-shadow:
-    0 8rpx 32rpx rgba(0, 0, 0, 0.1),
-    0 2rpx 8rpx rgba(0, 0, 0, 0.06),
-    inset 0 1rpx 0 rgba(255, 255, 255, 1);
-  backdrop-filter: blur(20rpx);
-  -webkit-backdrop-filter: blur(20rpx);
-  border: 1rpx solid rgba(255, 255, 255, 0.8);
-  animation: slideUp 0.6s ease-out 0.3s both;
-}
-
-.stat-item {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 16rpx;
-  padding: 0 16rpx;
-}
-
-.stat-icon-wrapper {
-  width: 72rpx;
-  height: 72rpx;
-  border-radius: 18rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: transform 0.2s ease;
-
-  &.blue {
-    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-    color: #fff;
-    box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.35);
-  }
-
-  &.orange {
-    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-    color: #fff;
-    box-shadow: 0 4rpx 16rpx rgba(245, 158, 11, 0.35);
-  }
-
-  &.green {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-    color: #fff;
-    box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.35);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-}
-
-.stat-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4rpx;
-}
-
-.stat-value {
-  font-size: 36rpx;
-  font-weight: 700;
-  color: #1f2937;
-  line-height: 1;
-}
-
-.stat-label {
-  font-size: 22rpx;
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.stat-divider {
-  width: 1rpx;
-  height: 60rpx;
-  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1), transparent);
-}
-
-// 快捷入口区域
-.quick-actions {
-  display: flex;
-  justify-content: space-between;
-  padding: 40rpx 40rpx 24rpx;
-  gap: 20rpx;
-}
-
-.quick-action-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12rpx;
-  animation: fadeInScale 0.5s ease-out backwards;
-  transition: transform 0.2s ease;
-
-  &:active {
-    transform: scale(0.95);
-  }
-}
-
-.quick-icon {
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 28rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-
-  &.blue {
-    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-    color: #3b82f6;
-    box-shadow:
-      0 4rpx 16rpx rgba(59, 130, 246, 0.2),
-      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
-  }
-
-  &.purple {
-    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
-    color: #8b5cf6;
-    box-shadow:
-      0 4rpx 16rpx rgba(139, 92, 246, 0.2),
-      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
-  }
-
-  &.teal {
-    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
-    color: #14b8a6;
-    box-shadow:
-      0 4rpx 16rpx rgba(20, 184, 166, 0.2),
-      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
-  }
-
-  &.rose {
-    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
-    color: #f43f5e;
-    box-shadow:
-      0 4rpx 16rpx rgba(244, 63, 94, 0.2),
-      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
-  }
-
-  &:active {
-    transform: scale(0.92);
-  }
-}
-
-.quick-label {
-  font-size: 24rpx;
-  color: #4b5563;
-  font-weight: 500;
-}
-
-// 装饰插图区域
-.dashboard-illustration {
-  position: absolute;
-  right: 32rpx;
-  top: 48rpx;
-  width: 200rpx;
-  height: 200rpx;
-  opacity: 0.6;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.illustration-circle {
-  position: absolute;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.12);
-  backdrop-filter: blur(4rpx);
-  border: 1rpx solid rgba(255, 255, 255, 0.15);
-}
-
-.circle-1 {
-  width: 140rpx;
-  height: 140rpx;
-  right: 0;
-  top: 0;
-  animation: float 6s ease-in-out infinite;
-}
-
-.circle-2 {
-  width: 70rpx;
-  height: 70rpx;
-  left: 0;
-  bottom: 30rpx;
-  background: rgba(255, 255, 255, 0.18);
-  animation: float 4s ease-in-out infinite reverse;
-}
-
-.circle-3 {
-  width: 36rpx;
-  height: 36rpx;
-  right: 50rpx;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.22);
-  animation: float 5s ease-in-out infinite 1s;
-}
-
-.illustration-hexagon {
-  position: absolute;
-  top: 40rpx;
-  left: 40rpx;
-  width: 70rpx;
-  height: 70rpx;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
-  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
-  animation: floatHex 10s ease-in-out infinite;
-}
-
-.illustration-line {
-  position: absolute;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 2rpx;
-}
-
-.line-1 {
-  width: 60rpx;
-  height: 4rpx;
-  top: 80rpx;
-  right: 20rpx;
-  animation: slideLine 3s ease-in-out infinite;
-}
-
-.line-2 {
-  width: 40rpx;
-  height: 4rpx;
-  top: 100rpx;
-  right: 40rpx;
-  animation: slideLine 3s ease-in-out infinite 0.5s;
-}
-
-// 动画定义
-@keyframes pulse {
-
-  0%,
-  100% {
-    transform: scale(1);
-    opacity: 0.4;
-  }
-
-  50% {
-    transform: scale(1.08);
-    opacity: 0.7;
-  }
-}
-
-@keyframes float {
-
-  0%,
-  100% {
-    transform: translateY(0) scale(1);
-  }
-
-  50% {
-    transform: translateY(-20rpx) scale(1.03);
-  }
-}
-
-@keyframes floatHex {
-
-  0%,
-  100% {
-    transform: translateY(0) rotate(0deg);
-  }
-
-  33% {
-    transform: translateY(-16rpx) rotate(6deg);
-  }
-
-  66% {
-    transform: translateY(-8rpx) rotate(-4deg);
-  }
-}
-
-@keyframes slideLine {
-
-  0%,
-  100% {
-    transform: translateX(0);
-    opacity: 0.3;
-  }
-
-  50% {
-    transform: translateX(10rpx);
-    opacity: 0.6;
-  }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(30rpx);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeInScale {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-// 暗黑模式适配
-:global(.wot-theme-dark) {
-  .header-background {
-    box-shadow:
-      0 12rpx 40rpx rgba(0, 0, 0, 0.3),
-      0 4rpx 12rpx rgba(0, 0, 0, 0.2),
-      inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
-  }
-
-  .stats-card {
-    background: rgba(30, 30, 35, 0.98);
-    border-color: rgba(255, 255, 255, 0.08);
-    box-shadow:
-      0 8rpx 32rpx rgba(0, 0, 0, 0.3),
-      0 2rpx 8rpx rgba(0, 0, 0, 0.2);
-  }
-
-  .stat-value {
-    color: #f3f4f6;
-  }
-
-  .stat-label {
-    color: #9ca3af;
-  }
-
-  .quick-icon {
-    &.blue {
-      background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
-      box-shadow:
-        0 4rpx 16rpx rgba(59, 130, 246, 0.25),
-        inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
-    }
-
-    &.purple {
-      background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(124, 58, 237, 0.15) 100%);
-      box-shadow:
-        0 4rpx 16rpx rgba(139, 92, 246, 0.25),
-        inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
-    }
-
-    &.teal {
-      background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(13, 148, 136, 0.15) 100%);
-      box-shadow:
-        0 4rpx 16rpx rgba(20, 184, 166, 0.25),
-        inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
-    }
-
-    &.rose {
-      background: linear-gradient(135deg, rgba(244, 63, 94, 0.2) 0%, rgba(225, 29, 72, 0.15) 100%);
-      box-shadow:
-        0 4rpx 16rpx rgba(244, 63, 94, 0.25),
-        inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
-    }
-  }
-
-  .quick-label {
-    color: #d1d5db;
-  }
-
-  .stat-divider {
-    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed, defineOptions } from 'vue'
+import { useManualTheme } from '../../composables/useManualTheme'
+import { useUser } from '../../composables/useUser'
+import { formatChineseDate } from '../../utils'
+import { useSectionMenus } from '../../composables/useSectionMenus'
+
+defineOptions({
+  name: 'WuiMenusTop',
+})
+
+const user = useUser().getUserInfo()
+
+const {
+  currentThemeColor,
+} = useManualTheme()
+
+const { messageBar, quickPanel } = useSectionMenus()
+const quickPanelcomputed = computed(() => {
+  return quickPanel.value.slice(0, 2)
+})
+</script>
+
+<template>
+  <view class="header-container position-relative">
+    <!-- 背景层 -->
+    <view
+      class="header-background"
+      :style="{ background: `linear-gradient(160deg, ${currentThemeColor.primary} 0%, ${currentThemeColor.primary}dd 50%, ${currentThemeColor.primary}aa 100%)` }"
+    >
+      <!-- 装饰背景元素 -->
+      <view class="header-bg-pattern" />
+      <view class="header-bg-dots" />
+      <view class="header-bg-glow" />
+
+      <!-- 用户信息区域 -->
+      <view class="user-section">
+        <view class="user-info">
+          <view class="avatar-wrapper">
+            <image class="user-avatar" src="../../static/hader.png" mode="aspectFill" />
+            <!-- <view class="avatar-status" /> -->
+            <view class="avatar-ring" />
+          </view>
+          <view class="user-details">
+            <view class="greeting-text">
+              <text class="greeting-label">
+                欢迎回来,
+              </text>
+              <text class="user-name">
+                {{ user.name }}
+              </text>
+            </view>
+            <view class="date-badge">
+              <text class="i-carbon:calendar text-sm" />
+              <text class="date-text">
+                {{ formatChineseDate() }}
+              </text>
+              <!-- <view class="date-divider" />
+              <text class="i-carbon:time text-sm" />
+              <text class="work-status">
+                工作中
+              </text> -->
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 统计卡片区域 -->
+      <view class="stats-section">
+        <view class="stats-card">
+          <view class="stat-item">
+            <view class="stat-icon-wrapper blue">
+              <text class="i-carbon:notification text-lg" />
+            </view>
+            <view class="stat-info">
+              <text class="stat-value">
+                {{ messageBar?.count }}
+              </text>
+              <text class="stat-label">
+                新消息
+              </text>
+            </view>
+          </view>
+          <!-- <view class="stat-divider" v-if="quickPanelcomputed.length > 0" /> -->
+          <view v-for="item in quickPanelcomputed" :key="item.id" class="stat-item">
+            <view class="stat-icon-wrapper orange">
+              <text class="i-carbon:document text-lg" />
+            </view>
+            <view class="stat-info">
+              <text class="stat-value">
+                {{ item.count }}
+              </text>
+              <text class="stat-label">
+                {{ item.title }}
+              </text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 装饰元素 -->
+    <view class="dashboard-illustration">
+      <view class="illustration-circle circle-1" />
+      <view class="illustration-circle circle-2" />
+      <view class="illustration-circle circle-3" />
+      <view class="illustration-hexagon" />
+      <view class="illustration-line line-1" />
+      <view class="illustration-line line-2" />
+    </view>
+
+    <!-- 快捷入口区域 -->
+    <!-- <view class="quick-actions">
+      <view class="quick-action-item" style="animation-delay: 0.1s">
+        <view class="blue quick-icon">
+          <text class="i-carbon:add text-xl" />
+        </view>
+        <text class="quick-label">
+          新建
+        </text>
+      </view>
+      <view class="quick-action-item" style="animation-delay: 0.2s">
+        <view class="quick-icon purple">
+          <text class="i-carbon:search text-xl" />
+        </view>
+        <text class="quick-label">
+          查询
+        </text>
+      </view>
+      <view class="quick-action-item" style="animation-delay: 0.3s">
+        <view class="quick-icon teal">
+          <text class="i-carbon:chart-pie text-xl" />
+        </view>
+        <text class="quick-label">
+          报表
+        </text>
+      </view>
+      <view class="quick-action-item" style="animation-delay: 0.4s">
+        <view class="quick-icon rose">
+          <text class="i-carbon:settings text-xl" />
+        </view>
+        <text class="quick-label">
+          设置
+        </text>
+      </view>
+    </view> -->
+  </view>
+</template>
+
+<style lang="scss" scoped>
+// 头部容器
+.header-container {
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 24rpx;
+}
+
+// 背景层
+.header-background {
+  position: relative;
+  z-index: 0;
+  // min-height: 380rpx;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 48rpx 32rpx;
+  border-radius: 0 0 48rpx 48rpx;
+  //  box-shadow:
+  //    0 12rpx 40rpx rgba(0, 0, 0, 0.12),
+  //    0 4rpx 12rpx rgba(0, 0, 0, 0.08),
+  //    inset 0 1rpx 0 rgba(255, 255, 255, 0.25);
+  overflow: hidden;
+}
+
+// 背景纹理 - 网格点阵
+.header-bg-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image:
+    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
+    radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.08) 0%, transparent 30%);
+  pointer-events: none;
+}
+
+// 点阵装饰
+.header-bg-dots {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1rpx, transparent 1rpx);
+  background-size: 24rpx 24rpx;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+// 光晕效果
+.header-bg-glow {
+  position: absolute;
+  top: -100rpx;
+  right: -100rpx;
+  width: 400rpx;
+  height: 400rpx;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+// 用户信息区域
+.user-section {
+  position: relative;
+  z-index: 1;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 28rpx;
+}
+
+// 头像包装器
+.avatar-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.user-avatar {
+  width: 108rpx;
+  height: 108rpx;
+  border-radius: 50%;
+  border: 4rpx solid rgba(255, 255, 255, 0.95);
+  box-shadow:
+    0 8rpx 24rpx rgba(0, 0, 0, 0.2),
+    0 0 0 6rpx rgba(255, 255, 255, 0.15),
+    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3);
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.avatar-status {
+  position: absolute;
+  bottom: 4rpx;
+  right: 4rpx;
+  width: 24rpx;
+  height: 24rpx;
+  background: linear-gradient(135deg, #10b981, #059669);
+  border-radius: 50%;
+  border: 3rpx solid rgba(255, 255, 255, 0.95);
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
+  z-index: 2;
+}
+
+.avatar-ring {
+  position: absolute;
+  top: -7rpx;
+  left: -7rpx;
+  right: -7rpx;
+  bottom: -7rpx;
+  border-radius: 50%;
+  border: 2rpx solid rgba(255, 255, 255, 0.25);
+  animation: pulse 3s ease-in-out infinite;
+}
+
+// 用户详情
+.user-details {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.greeting-text {
+  display: flex;
+  align-items: baseline;
+  gap: 12rpx;
+  flex-wrap: wrap;
+}
+
+.greeting-label {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 400;
+  letter-spacing: 0.02em;
+}
+
+.user-name {
+  font-size: 40rpx;
+  color: #fff;
+  font-weight: 700;
+  text-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15);
+  letter-spacing: 0.02em;
+}
+
+// 日期徽章
+.date-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 10rpx;
+  padding: 10rpx 20rpx;
+  background: rgba(255, 255, 255, 0.18);
+  backdrop-filter: blur(12rpx);
+  -webkit-backdrop-filter: blur(12rpx);
+  border-radius: 32rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.25);
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.date-text {
+  font-size: 22rpx;
+  font-weight: 500;
+}
+
+.date-divider {
+  width: 1rpx;
+  height: 20rpx;
+  background: rgba(255, 255, 255, 0.4);
+  margin: 0 4rpx;
+}
+
+.work-status {
+  font-size: 22rpx;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.95);
+}
+
+// 统计卡片区域
+.stats-section {
+  // position: absolute;
+  // bottom: 30rpx;
+  // left: 32rpx;
+  // right: 32rpx;
+  padding-top: 32rpx ;
+  z-index: 10;
+}
+
+.stats-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 24rpx;
+  padding: 28rpx 20rpx;
+  box-shadow:
+    0 8rpx 32rpx rgba(0, 0, 0, 0.1),
+    0 2rpx 8rpx rgba(0, 0, 0, 0.06),
+    inset 0 1rpx 0 rgba(255, 255, 255, 1);
+  backdrop-filter: blur(20rpx);
+  -webkit-backdrop-filter: blur(20rpx);
+  border: 1rpx solid rgba(255, 255, 255, 0.8);
+  animation: slideUp 0.6s ease-out 0.3s both;
+}
+
+.stat-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 0 16rpx;
+}
+
+.stat-icon-wrapper {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+
+  &.blue {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    color: #fff;
+    box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.35);
+  }
+
+  &.orange {
+    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+    color: #fff;
+    box-shadow: 0 4rpx 16rpx rgba(245, 158, 11, 0.35);
+  }
+
+  &.green {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    color: #fff;
+    box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.35);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.stat-value {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #1f2937;
+  line-height: 1;
+}
+
+.stat-label {
+  font-size: 22rpx;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.stat-divider {
+  width: 1rpx;
+  height: 60rpx;
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1), transparent);
+}
+
+// 快捷入口区域
+.quick-actions {
+  display: flex;
+  justify-content: space-between;
+  padding: 40rpx 40rpx 24rpx;
+  gap: 20rpx;
+}
+
+.quick-action-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+  animation: fadeInScale 0.5s ease-out backwards;
+  transition: transform 0.2s ease;
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.quick-icon {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+
+  &.blue {
+    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+    color: #3b82f6;
+    box-shadow:
+      0 4rpx 16rpx rgba(59, 130, 246, 0.2),
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+  }
+
+  &.purple {
+    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
+    color: #8b5cf6;
+    box-shadow:
+      0 4rpx 16rpx rgba(139, 92, 246, 0.2),
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+  }
+
+  &.teal {
+    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
+    color: #14b8a6;
+    box-shadow:
+      0 4rpx 16rpx rgba(20, 184, 166, 0.2),
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+  }
+
+  &.rose {
+    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
+    color: #f43f5e;
+    box-shadow:
+      0 4rpx 16rpx rgba(244, 63, 94, 0.2),
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+  }
+
+  &:active {
+    transform: scale(0.92);
+  }
+}
+
+.quick-label {
+  font-size: 24rpx;
+  color: #4b5563;
+  font-weight: 500;
+}
+
+// 装饰插图区域
+.dashboard-illustration {
+  position: absolute;
+  right: 32rpx;
+  top: 48rpx;
+  width: 200rpx;
+  height: 200rpx;
+  opacity: 0.6;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.illustration-circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(4rpx);
+  border: 1rpx solid rgba(255, 255, 255, 0.15);
+}
+
+.circle-1 {
+  width: 140rpx;
+  height: 140rpx;
+  right: 0;
+  top: 0;
+  animation: float 6s ease-in-out infinite;
+}
+
+.circle-2 {
+  width: 70rpx;
+  height: 70rpx;
+  left: 0;
+  bottom: 30rpx;
+  background: rgba(255, 255, 255, 0.18);
+  animation: float 4s ease-in-out infinite reverse;
+}
+
+.circle-3 {
+  width: 36rpx;
+  height: 36rpx;
+  right: 50rpx;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.22);
+  animation: float 5s ease-in-out infinite 1s;
+}
+
+.illustration-hexagon {
+  position: absolute;
+  top: 40rpx;
+  left: 40rpx;
+  width: 70rpx;
+  height: 70rpx;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+  animation: floatHex 10s ease-in-out infinite;
+}
+
+.illustration-line {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2rpx;
+}
+
+.line-1 {
+  width: 60rpx;
+  height: 4rpx;
+  top: 80rpx;
+  right: 20rpx;
+  animation: slideLine 3s ease-in-out infinite;
+}
+
+.line-2 {
+  width: 40rpx;
+  height: 4rpx;
+  top: 100rpx;
+  right: 40rpx;
+  animation: slideLine 3s ease-in-out infinite 0.5s;
+}
+
+// 动画定义
+@keyframes pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.4;
+  }
+
+  50% {
+    transform: scale(1.08);
+    opacity: 0.7;
+  }
+}
+
+@keyframes float {
+
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+
+  50% {
+    transform: translateY(-20rpx) scale(1.03);
+  }
+}
+
+@keyframes floatHex {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+
+  33% {
+    transform: translateY(-16rpx) rotate(6deg);
+  }
+
+  66% {
+    transform: translateY(-8rpx) rotate(-4deg);
+  }
+}
+
+@keyframes slideLine {
+
+  0%,
+  100% {
+    transform: translateX(0);
+    opacity: 0.3;
+  }
+
+  50% {
+    transform: translateX(10rpx);
+    opacity: 0.6;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30rpx);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// 暗黑模式适配
+:global(.wot-theme-dark) {
+  .header-background {
+    box-shadow:
+      0 12rpx 40rpx rgba(0, 0, 0, 0.3),
+      0 4rpx 12rpx rgba(0, 0, 0, 0.2),
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
+  }
+
+  .stats-card {
+    background: rgba(30, 30, 35, 0.98);
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow:
+      0 8rpx 32rpx rgba(0, 0, 0, 0.3),
+      0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+  }
+
+  .stat-value {
+    color: #f3f4f6;
+  }
+
+  .stat-label {
+    color: #9ca3af;
+  }
+
+  .quick-icon {
+    &.blue {
+      background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
+      box-shadow:
+        0 4rpx 16rpx rgba(59, 130, 246, 0.25),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
+    }
+
+    &.purple {
+      background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(124, 58, 237, 0.15) 100%);
+      box-shadow:
+        0 4rpx 16rpx rgba(139, 92, 246, 0.25),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
+    }
+
+    &.teal {
+      background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(13, 148, 136, 0.15) 100%);
+      box-shadow:
+        0 4rpx 16rpx rgba(20, 184, 166, 0.25),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
+    }
+
+    &.rose {
+      background: linear-gradient(135deg, rgba(244, 63, 94, 0.2) 0%, rgba(225, 29, 72, 0.15) 100%);
+      box-shadow:
+        0 4rpx 16rpx rgba(244, 63, 94, 0.25),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .quick-label {
+    color: #d1d5db;
+  }
+
+  .stat-divider {
+    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  }
+}
+</style>