wui-components-v2 1.1.69 → 1.1.70

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

@@ -1,564 +1,564 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import { defineOptions, defineProps, ref } from 'vue'
-import DemoCard from '../demo-card/demo-card.vue'
-import { useMenus } from '../../composables/useMenus'
-import type { Icon } from '../../composables/useMenus'
-import wuiNotifyInfo from '../wui-notify-info/wui-notify-info.vue'
-import { useLanguageStore } from '../../store/language'
-import sectionMenus from './components/section-menus.vue'
-import navbar from './components/navbar.vue'
-import quickPanel from './components/quick-panel.vue'
-import bannerCarousel from './components/banner-carousel.vue'
-import searchBar from './components/search-bar.vue'
-import '../../static/iconfont/iconfont.css'
-import { getThemeConfig } from '../../api/sys'
-import { onMounted } from 'vue'
-
-defineOptions({
-  name: 'WuiMenus1',
-})
-const props = defineProps({
-  icons: {
-    type: Array as PropType<Icon[]>,
-    default: () => [],
-  },
-  load: {
-    type: Function as PropType<() => void>,
-    default: () => {},
-  },
-  menuTopType: {
-    type: String,
-    default: '',
-  },
-})
-const languageStore = useLanguageStore()
-const themeConfig = ref<any>({})
-const pagingRef = ref(null)
-const {
-  queryList,
-  menuList,
-  currentThemeColor,
-  filtermenu,
-  gotoPage,
-  sheetShow,
-  actions,
-  title,
-  sheetGotoPage,
-  navTitle,
-} = useMenus(props, pagingRef)
-onMounted(() => {
-  getThemeConfig().then(res => {
-    if (res.status == 'success') {
-      themeConfig.value = res.themeConfig
-    }
-  })
-})
-</script>
-
-<template>
-  <z-paging
-    ref="pagingRef"
-    v-model="menuList"
-    :loading-more-enabled="false"
-    @query="queryList"
-    @on-refresh="props?.load"
-  >
-    <template #top>
-      <navbar :nav-title="navTitle" />
-      <slot name="top" :style="{ background: currentThemeColor.primary }" />
-      <view v-if="props.menuTopType === '自定义'" class="p-2" />
-    </template>
-    <view class="px-3 pb-4">
-      <!-- 菜单搜索 -->
-      <searchBar v-if="themeConfig.showHomePage" />
-      <!-- 轮播图 -->
-      <bannerCarousel v-if="themeConfig.showHomePage" />
-      <!-- 快捷菜单 -->
-      <sectionMenus v-if="themeConfig.showHomePage" />
-      <!-- 统计 -->
-      <quickPanel v-if="themeConfig.showHomePage" />
-      <!-- 消息 -->
-      <!-- <wuiNotifyInfo /> -->
-
-      <!-- 菜单卡片列表 -->
-      <view class="menu-section">
-        <view class="section-header" v-if="themeConfig.showHomePage">
-          <view class="section-title-wrapper">
-            <!-- <view class="section-icon primary">
-              <text class="i-carbon:apps text-sm" />
-            </view> -->
-            <text class="section-title dark:text-white text-gray-800">
-              {{ languageStore.t('全部功能') }}
-            </text>
-          </view>
-          <view class="section-tag">
-            <text class="tag-text">{{ filtermenu.length }} {{ languageStore.t('个分类') }}</text>
-          </view>
-        </view>
-        <view v-else class="py-3"></view>
-
-        <DemoCard
-          v-for="(item, index) in filtermenu"
-          :key="index"
-          :title="languageStore.t(item.title)"
-          class="menu-card"
-          :style="{ animationDelay: `${(index as number) * 0.1}s` }"
-        >
-          <template #content>
-            <view class="menu-grid-container">
-              <wd-grid :column="4" clickable class="menu-grid">
-                <wd-grid-item
-                  v-for="(subItem, subIndex) in item.items"
-                  :key="subIndex"
-                  use-text-slot
-                  use-icon-slot
-                  class="menu-grid-item"
-                  @click="gotoPage(subItem)"
-                >
-                  <template #icon>
-                    <view
-                      class="menu-icon-wrapper flex items-center justify-center"
-                      :style="{ background: subItem.color }"
-                    >
-                      <text class="menu-icon !text-xl iconfont" :class="[subItem.appIcon || 'i-carbon:grid']" />
-                      <view class="icon-shine" />
-                    </view>
-                  </template>
-                  <template #text>
-                    <view class="menu-text-wrapper">
-                      <view class="menu-title text-ellipsis dark:text-white text-gray-800">
-                        {{ languageStore.t(subItem.title) }}
-                      </view>
-                      <!-- <view class="menu-badge" v-if="subIndex === 0">
-                        <text class="badge-dot" />
-                      </view> -->
-                    </view>
-                  </template>
-                </wd-grid-item>
-              </wd-grid>
-            </view>
-          </template>
-        </DemoCard>
-      </view>
-
-      <!-- 底部信息 -->
-      <view class="footer-section">
-        <view class="footer-line" />
-        <text class="footer-text">已经到底了</text>
-        <view class="footer-line" />
-      </view>
-
-      <slot name="listBottom" />
-    </view>
-
-    <template #bottom>
-      <slot name="bottom" />
-    </template>
-  </z-paging>
-  <wd-action-sheet
-    v-model="sheetShow"
-    :z-index="9999"
-    :actions="actions"
-    :title="title"
-    @select="
-      ({ item }) => {
-        sheetGotoPage(item)
-      }
-    "
-  />
-</template>
-
-<style scoped lang="scss">
-// 菜单区域
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20rpx;
-  padding: 0 8rpx;
-}
-.section-title-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-}
-.section-title {
-  font-size: 30rpx;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-}
-.tag-text {
-  font-size: 20rpx;
-  color: #16a34a;
-  font-weight: 600;
-}
-.section-tag {
-  display: flex;
-  align-items: center;
-  padding: 6rpx 14rpx;
-  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
-  border-radius: 20rpx;
-  border: 1rpx solid rgba(34, 197, 94, 0.2);
-}
-.menu-section {
-  animation: fadeInUp 0.5s ease-out 0.2s backwards;
-}
-.section-icon {
-  width: 44rpx;
-  height: 44rpx;
-  border-radius: 12rpx;
-  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #6b7280;
-
-  &.primary {
-    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-    color: #3b82f6;
-  }
-}
-
-// 菜单卡片容器
-.menu-card {
-  animation: slideUp 0.5s ease-out backwards;
-  margin: 0 !important;
-  margin-bottom: 20rpx !important;
-  :deep(.wd-card) {
-    border-radius: 28rpx;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 1) 100%);
-    box-shadow:
-      0 8rpx 32rpx rgba(0, 0, 0, 0.06),
-      0 2rpx 8rpx rgba(0, 0, 0, 0.04),
-      inset 0 1rpx 0 rgba(255, 255, 255, 1);
-    border: 1rpx solid rgba(0, 0, 0, 0.04);
-    overflow: hidden;
-    transition: all 0.3s ease;
-    &:active {
-      transform: translateY(-2rpx);
-      box-shadow:
-        0 12rpx 40rpx rgba(0, 0, 0, 0.08),
-        0 4rpx 12rpx rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  :deep(.wd-card__title) {
-    // padding: 28rpx 28rpx 20rpx;
-    font-weight: 700;
-    font-size: 30rpx;
-    // color: #1f2937;
-    display: flex;
-    align-items: center;
-    gap: 12rpx;
-  }
-
-  :deep(.wd-card__content) {
-    padding: 12rpx 16rpx 28rpx;
-  }
-}
-
-// 网格容器样式
-.menu-grid-container {
-  // background: rgba(249, 250, 251, 0.5);
-  border-radius: 20rpx;
-  // padding: 20rpx 12rpx;
-  transition: all 0.3s ease;
-}
-
-// 网格项样式
-.menu-grid {
-  // grid-auto-rows: 100px !important;
-  :deep(.wd-grid-item) {
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-
-    &:active {
-      transform: scale(0.95);
-    }
-  }
-
-  :deep(.wd-grid-item__wrapper) {
-    padding: 20rpx 10rpx !important;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-// 图标容器
-.menu-icon-wrapper {
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 28rpx;
-  // box-shadow:
-  //   0 8rpx 24rpx rgba(0, 0, 0, 0.12),
-  //   0 2rpx 8rpx rgba(0, 0, 0, 0.06),
-  //   inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 50%;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
-    border-radius: 28rpx 28rpx 0 0;
-  }
-
-  &:active {
-    transform: scale(0.92);
-    box-shadow:
-      0 4rpx 16rpx rgba(0, 0, 0, 0.1),
-      0 1rpx 4rpx rgba(0, 0, 0, 0.05);
-  }
-}
-
-// 图标光泽效果
-.icon-shine {
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%);
-  animation: shine 15s ease-in-out infinite;
-  pointer-events: none;
-}
-
-// 图标样式
-.menu-icon {
-  color: rgba(255, 255, 255, 0.95);
-  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
-  z-index: 1;
-}
-
-// 文本容器
-.menu-text-wrapper {
-  padding-top: 16rpx;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6rpx;
-}
-
-// 菜单标题
-.menu-title {
-  font-size: 24rpx;
-  font-weight: 600;
-  // color: #374151;
-  line-height: 1.3;
-  letter-spacing: 0.02em;
-  width: 100%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-// 菜单徽章
-.menu-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.badge-dot {
-  width: 16rpx;
-  height: 16rpx;
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-  border-radius: 50%;
-  box-shadow: 0 2rpx 6rpx rgba(239, 68, 68, 0.4);
-  animation: pulseDot 2s ease-in-out infinite;
-}
-
-// 底部信息
-.footer-section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20rpx;
-  padding: 40rpx 0;
-  animation: fadeIn 0.5s ease-out 0.5s backwards;
-}
-
-.footer-line {
-  flex: 1;
-  height: 1rpx;
-  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
-  max-width: 120rpx;
-}
-
-.footer-text {
-  font-size: 22rpx;
-  color: #9ca3af;
-  font-weight: 500;
-}
-
-// 动画定义
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20rpx);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeInScale {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(30rpx);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes shine {
-  0%,
-  100% {
-    transform: translateX(-100%) rotate(45deg);
-  }
-  50% {
-    transform: translateX(100%) rotate(45deg);
-  }
-}
-
-@keyframes pulseDot {
-  0%,
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.1);
-    opacity: 0.8;
-  }
-}
-
-// 暗黑模式适配
-:global(.wot-theme-dark) {
-  .section-title {
-    color: #f9fafb;
-  }
-
-  .section-icon {
-    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
-    color: #9ca3af;
-
-    &.primary {
-      background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
-      color: #60a5fa;
-    }
-  }
-
-  .section-tag {
-    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.1) 100%);
-    border-color: rgba(34, 197, 94, 0.3);
-  }
-
-  .tag-text {
-    color: #4ade80;
-  }
-
-  .more-text {
-    color: #9ca3af;
-  }
-
-  .section-more {
-    background: rgba(255, 255, 255, 0.05);
-
-    &:active {
-      background: rgba(255, 255, 255, 0.08);
-    }
-  }
-
-  .recent-label {
-    color: #d1d5db;
-  }
-
-  .menu-card {
-    :deep(.wd-card) {
-      background: linear-gradient(180deg, rgba(30, 30, 35, 0.98) 0%, rgba(25, 25, 30, 1) 100%);
-      box-shadow:
-        0 8rpx 32rpx rgba(0, 0, 0, 0.25),
-        0 2rpx 8rpx rgba(0, 0, 0, 0.15),
-        inset 0 1rpx 0 rgba(255, 255, 255, 0.05);
-      border-color: rgba(255, 255, 255, 0.06);
-    }
-
-    :deep(.wd-card__title) {
-      color: #f9fafb;
-    }
-  }
-
-  .menu-grid-container {
-    background: rgba(30, 30, 35, 0.5);
-  }
-
-  .menu-title {
-    color: #e5e7eb;
-  }
-
-  .footer-line {
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-  }
-
-  .footer-text {
-    color: #6b7280;
-  }
-
-  .recent-icon {
-    &-1 {
-      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.2);
-    }
-
-    &-2 {
-      background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
-      box-shadow: 0 4rpx 16rpx rgba(245, 158, 11, 0.2);
-    }
-
-    &-3 {
-      background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
-      box-shadow: 0 4rpx 16rpx rgba(34, 197, 94, 0.2);
-    }
-
-    &-4 {
-      background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(219, 39, 119, 0.15) 100%);
-      box-shadow: 0 4rpx 16rpx rgba(236, 72, 153, 0.2);
-    }
-  }
-}
-.menu-grid-container :deep(.wd-grid-item__content) {
-  align-items: normal;
-}
-</style>
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineOptions, defineProps, ref } from 'vue'
+import DemoCard from '../demo-card/demo-card.vue'
+import { useMenus } from '../../composables/useMenus'
+import type { Icon } from '../../composables/useMenus'
+import wuiNotifyInfo from '../wui-notify-info/wui-notify-info.vue'
+import { useLanguageStore } from '../../store/language'
+import sectionMenus from './components/section-menus.vue'
+import navbar from './components/navbar.vue'
+import quickPanel from './components/quick-panel.vue'
+import bannerCarousel from './components/banner-carousel.vue'
+import searchBar from './components/search-bar.vue'
+import '../../static/iconfont/iconfont.css'
+import { getThemeConfig } from '../../api/sys'
+import { onMounted } from 'vue'
+
+defineOptions({
+  name: 'WuiMenus1',
+})
+const props = defineProps({
+  icons: {
+    type: Array as PropType<Icon[]>,
+    default: () => [],
+  },
+  load: {
+    type: Function as PropType<() => void>,
+    default: () => {},
+  },
+  menuTopType: {
+    type: String,
+    default: '',
+  },
+})
+const languageStore = useLanguageStore()
+const themeConfig = ref<any>({})
+const pagingRef = ref(null)
+const {
+  queryList,
+  menuList,
+  currentThemeColor,
+  filtermenu,
+  gotoPage,
+  sheetShow,
+  actions,
+  title,
+  sheetGotoPage,
+  navTitle,
+} = useMenus(props, pagingRef)
+onMounted(() => {
+  getThemeConfig().then(res => {
+    if (res.status == 'success') {
+      themeConfig.value = res.themeConfig
+    }
+  })
+})
+</script>
+
+<template>
+  <z-paging
+    ref="pagingRef"
+    v-model="menuList"
+    :loading-more-enabled="false"
+    @query="queryList"
+    @on-refresh="props?.load"
+  >
+    <template #top>
+      <navbar :nav-title="navTitle" />
+      <slot name="top" :style="{ background: currentThemeColor.primary }" />
+      <view v-if="props.menuTopType === '自定义'" class="p-2" />
+    </template>
+    <view class="px-3 pb-4">
+      <!-- 菜单搜索 -->
+      <searchBar v-if="themeConfig.showHomePage" />
+      <!-- 轮播图 -->
+      <bannerCarousel v-if="themeConfig.showHomePage" />
+      <!-- 快捷菜单 -->
+      <sectionMenus v-if="themeConfig.showHomePage" />
+      <!-- 统计 -->
+      <quickPanel v-if="themeConfig.showHomePage" />
+      <!-- 消息 -->
+      <!-- <wuiNotifyInfo /> -->
+
+      <!-- 菜单卡片列表 -->
+      <view class="menu-section">
+        <view class="section-header" v-if="themeConfig.showHomePage">
+          <view class="section-title-wrapper">
+            <!-- <view class="section-icon primary">
+              <text class="i-carbon:apps text-sm" />
+            </view> -->
+            <text class="section-title dark:text-white text-gray-800">
+              {{ languageStore.t('全部功能') }}
+            </text>
+          </view>
+          <view class="section-tag">
+            <text class="tag-text">{{ filtermenu.length }} {{ languageStore.t('个分类') }}</text>
+          </view>
+        </view>
+        <view v-else class="py-3"></view>
+
+        <DemoCard
+          v-for="(item, index) in filtermenu"
+          :key="index"
+          :title="languageStore.t(item.title)"
+          class="menu-card"
+          :style="{ animationDelay: `${(index as number) * 0.1}s` }"
+        >
+          <template #content>
+            <view class="menu-grid-container">
+              <wd-grid :column="4" clickable class="menu-grid">
+                <wd-grid-item
+                  v-for="(subItem, subIndex) in item.items"
+                  :key="subIndex"
+                  use-text-slot
+                  use-icon-slot
+                  class="menu-grid-item"
+                  @click="gotoPage(subItem)"
+                >
+                  <template #icon>
+                    <view
+                      class="menu-icon-wrapper flex items-center justify-center"
+                      :style="{ background: subItem.color }"
+                    >
+                      <text class="menu-icon !text-xl iconfont" :class="[subItem.appIcon || 'i-carbon:grid']" />
+                      <view class="icon-shine" />
+                    </view>
+                  </template>
+                  <template #text>
+                    <view class="menu-text-wrapper">
+                      <view class="menu-title text-ellipsis dark:text-white text-gray-800">
+                        {{ languageStore.t(subItem.title) }}
+                      </view>
+                      <!-- <view class="menu-badge" v-if="subIndex === 0">
+                        <text class="badge-dot" />
+                      </view> -->
+                    </view>
+                  </template>
+                </wd-grid-item>
+              </wd-grid>
+            </view>
+          </template>
+        </DemoCard>
+      </view>
+
+      <!-- 底部信息 -->
+      <view class="footer-section">
+        <view class="footer-line" />
+        <text class="footer-text">已经到底了</text>
+        <view class="footer-line" />
+      </view>
+
+      <slot name="listBottom" />
+    </view>
+
+    <template #bottom>
+      <slot name="bottom" />
+    </template>
+  </z-paging>
+  <wd-action-sheet
+    v-model="sheetShow"
+    :z-index="9999"
+    :actions="actions"
+    :title="title"
+    @select="
+      ({ item }) => {
+        sheetGotoPage(item)
+      }
+    "
+  />
+</template>
+
+<style scoped lang="scss">
+// 菜单区域
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+  padding: 0 8rpx;
+}
+.section-title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+.section-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+.tag-text {
+  font-size: 20rpx;
+  color: #16a34a;
+  font-weight: 600;
+}
+.section-tag {
+  display: flex;
+  align-items: center;
+  padding: 6rpx 14rpx;
+  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(34, 197, 94, 0.2);
+}
+.menu-section {
+  animation: fadeInUp 0.5s ease-out 0.2s backwards;
+}
+.section-icon {
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 12rpx;
+  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b7280;
+
+  &.primary {
+    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+    color: #3b82f6;
+  }
+}
+
+// 菜单卡片容器
+.menu-card {
+  animation: slideUp 0.5s ease-out backwards;
+  margin: 0 !important;
+  margin-bottom: 20rpx !important;
+  :deep(.wd-card) {
+    border-radius: 28rpx;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 1) 100%);
+    box-shadow:
+      0 8rpx 32rpx rgba(0, 0, 0, 0.06),
+      0 2rpx 8rpx rgba(0, 0, 0, 0.04),
+      inset 0 1rpx 0 rgba(255, 255, 255, 1);
+    border: 1rpx solid rgba(0, 0, 0, 0.04);
+    overflow: hidden;
+    transition: all 0.3s ease;
+    &:active {
+      transform: translateY(-2rpx);
+      box-shadow:
+        0 12rpx 40rpx rgba(0, 0, 0, 0.08),
+        0 4rpx 12rpx rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  :deep(.wd-card__title) {
+    // padding: 28rpx 28rpx 20rpx;
+    font-weight: 700;
+    font-size: 30rpx;
+    // color: #1f2937;
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+  }
+
+  :deep(.wd-card__content) {
+    padding: 12rpx 16rpx 28rpx;
+  }
+}
+
+// 网格容器样式
+.menu-grid-container {
+  // background: rgba(249, 250, 251, 0.5);
+  border-radius: 20rpx;
+  // padding: 20rpx 12rpx;
+  transition: all 0.3s ease;
+}
+
+// 网格项样式
+.menu-grid {
+  // grid-auto-rows: 100px !important;
+  :deep(.wd-grid-item) {
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  :deep(.wd-grid-item__wrapper) {
+    padding: 20rpx 10rpx !important;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+// 图标容器
+.menu-icon-wrapper {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 28rpx;
+  // box-shadow:
+  //   0 8rpx 24rpx rgba(0, 0, 0, 0.12),
+  //   0 2rpx 8rpx rgba(0, 0, 0, 0.06),
+  //   inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50%;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
+    border-radius: 28rpx 28rpx 0 0;
+  }
+
+  &:active {
+    transform: scale(0.92);
+    box-shadow:
+      0 4rpx 16rpx rgba(0, 0, 0, 0.1),
+      0 1rpx 4rpx rgba(0, 0, 0, 0.05);
+  }
+}
+
+// 图标光泽效果
+.icon-shine {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%);
+  animation: shine 15s ease-in-out infinite;
+  pointer-events: none;
+}
+
+// 图标样式
+.menu-icon {
+  color: rgba(255, 255, 255, 0.95);
+  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
+  z-index: 1;
+}
+
+// 文本容器
+.menu-text-wrapper {
+  padding-top: 16rpx;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rpx;
+}
+
+// 菜单标题
+.menu-title {
+  font-size: 24rpx;
+  font-weight: 600;
+  // color: #374151;
+  line-height: 1.3;
+  letter-spacing: 0.02em;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// 菜单徽章
+.menu-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.badge-dot {
+  width: 16rpx;
+  height: 16rpx;
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  border-radius: 50%;
+  box-shadow: 0 2rpx 6rpx rgba(239, 68, 68, 0.4);
+  animation: pulseDot 2s ease-in-out infinite;
+}
+
+// 底部信息
+.footer-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20rpx;
+  padding: 40rpx 0;
+  animation: fadeIn 0.5s ease-out 0.5s backwards;
+}
+
+.footer-line {
+  flex: 1;
+  height: 1rpx;
+  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
+  max-width: 120rpx;
+}
+
+.footer-text {
+  font-size: 22rpx;
+  color: #9ca3af;
+  font-weight: 500;
+}
+
+// 动画定义
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes shine {
+  0%,
+  100% {
+    transform: translateX(-100%) rotate(45deg);
+  }
+  50% {
+    transform: translateX(100%) rotate(45deg);
+  }
+}
+
+@keyframes pulseDot {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+}
+
+// 暗黑模式适配
+:global(.wot-theme-dark) {
+  .section-title {
+    color: #f9fafb;
+  }
+
+  .section-icon {
+    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
+    color: #9ca3af;
+
+    &.primary {
+      background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
+      color: #60a5fa;
+    }
+  }
+
+  .section-tag {
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.1) 100%);
+    border-color: rgba(34, 197, 94, 0.3);
+  }
+
+  .tag-text {
+    color: #4ade80;
+  }
+
+  .more-text {
+    color: #9ca3af;
+  }
+
+  .section-more {
+    background: rgba(255, 255, 255, 0.05);
+
+    &:active {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .recent-label {
+    color: #d1d5db;
+  }
+
+  .menu-card {
+    :deep(.wd-card) {
+      background: linear-gradient(180deg, rgba(30, 30, 35, 0.98) 0%, rgba(25, 25, 30, 1) 100%);
+      box-shadow:
+        0 8rpx 32rpx rgba(0, 0, 0, 0.25),
+        0 2rpx 8rpx rgba(0, 0, 0, 0.15),
+        inset 0 1rpx 0 rgba(255, 255, 255, 0.05);
+      border-color: rgba(255, 255, 255, 0.06);
+    }
+
+    :deep(.wd-card__title) {
+      color: #f9fafb;
+    }
+  }
+
+  .menu-grid-container {
+    background: rgba(30, 30, 35, 0.5);
+  }
+
+  .menu-title {
+    color: #e5e7eb;
+  }
+
+  .footer-line {
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  }
+
+  .footer-text {
+    color: #6b7280;
+  }
+
+  .recent-icon {
+    &-1 {
+      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.2);
+    }
+
+    &-2 {
+      background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
+      box-shadow: 0 4rpx 16rpx rgba(245, 158, 11, 0.2);
+    }
+
+    &-3 {
+      background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
+      box-shadow: 0 4rpx 16rpx rgba(34, 197, 94, 0.2);
+    }
+
+    &-4 {
+      background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(219, 39, 119, 0.15) 100%);
+      box-shadow: 0 4rpx 16rpx rgba(236, 72, 153, 0.2);
+    }
+  }
+}
+.menu-grid-container :deep(.wd-grid-item__content) {
+  align-items: normal;
+}
+</style>