wui-components-v2 1.1.69 → 1.1.71

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

@@ -1,208 +1,208 @@
-<script lang="ts" setup>
-import { computed, defineOptions } from 'vue'
-import { useMenus } from '../../../composables/useMenus'
-import { RainbowColorGenerator } from '../../../utils/index'
-import { useLanguageStore } from '../../../store/language'
-
-defineOptions({
-  name: 'SectionMenus',
-})
-const {
-  gotoPage,
-  getSectionMenu,
-  filersectiomenus,
-  sectionmenu,
-} = useMenus()
-getSectionMenu()
-const languageStore = useLanguageStore()
-const colorGenerator = new RainbowColorGenerator()
-const sectionmenuColor = computed(() => {
-  return filersectiomenus.value.map((item) => {
-    const color = colorGenerator.getNextColor()
-    return {
-      ...item,
-      color,
-    }
-  })
-})
-</script>
-
-<template>
-  <view v-if="sectionmenu.length > 0" class="recent-section b-rd-lg p-5 shadow-[0_4px_16px_rgba(99,102,241,0.1)] dark:bg-[#1a1a1e] bg-white">
-    <view class="section-header">
-      <view class="section-title-wrapper">
-        <!-- <view class="section-icon">
-          <text class="i-carbon:recently-viewed text-sm" :style="{ color: currentThemeColor.primary }" />
-        </view> -->
-        <text class="section-title dark:text-white text-gray-800">
-          {{ languageStore.t('快速访问') }}
-        </text>
-      </view>
-      <!-- <view class="section-more">
-            <text class="more-text">
-              查看全部
-            </text>
-            <text class="i-carbon:chevron-right text-xs" />
-          </view> -->
-    </view>
-    <view class="recent-items">
-      <view v-for="(i) in sectionmenuColor" :key="i.id" class="recent-item" @click="gotoPage(i)">
-        <view class="recent-icon" :style="{ background: i.color }">
-          <text class="i-carbon:grid text-lg text-white dark:text-white" />
-        </view>
-        <text class="recent-label dark:text-white text-gray-500">
-          {{ languageStore.t(i.title) }}
-        </text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-// 最近使用区域
-.recent-section {
-  margin-bottom: 24rpx;
-  animation: fadeInUp 0.5s ease-out;
-}
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20rpx);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 30rpx;
-  padding: 0 8rpx;
-}
-
-.section-title-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-}
-
-.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;
-  }
-}
-
-.section-title {
-  font-size: 30rpx;
-  font-weight: 700;
-  // color: #1f2937;
-  letter-spacing: 0.02em;
-}
-
-.section-more {
-  display: flex;
-  align-items: center;
-  gap: 4rpx;
-  padding: 8rpx 12rpx;
-  background: rgba(0, 0, 0, 0.03);
-  border-radius: 20rpx;
-  transition: all 0.2s ease;
-
-  &:active {
-    background: rgba(0, 0, 0, 0.06);
-    transform: scale(0.96);
-  }
-}
-
-.more-text {
-  font-size: 22rpx;
-  color: #6b7280;
-  font-weight: 500;
-}
-
-.recent-items {
-  display: flex;
-  gap: 20rpx;
-  padding: 0 8rpx;
-}
-
-.recent-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12rpx;
-  flex: 1;
-  animation: fadeInScale 0.4s ease-out backwards;
-
-  @for $i from 1 through 4 {
-    &:nth-child(#{$i}) {
-      animation-delay: #{$i * 0.08}s;
-    }
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-}
-
-.recent-icon {
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 28rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-
-  &-1 {
-    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-    color: #3b82f6;
-    box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.2);
-  }
-
-  &-2 {
-    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-    color: #d97706;
-    box-shadow: 0 4rpx 16rpx rgba(245, 158, 11, 0.2);
-  }
-
-  &-3 {
-    background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
-    color: #16a34a;
-    box-shadow: 0 4rpx 16rpx rgba(34, 197, 94, 0.2);
-  }
-
-  &-4 {
-    background: linear-gradient(135deg, #fdf2f8 0%, #fbcfe8 100%);
-    color: #db2777;
-    box-shadow: 0 4rpx 16rpx rgba(236, 72, 153, 0.2);
-  }
-
-  &:active {
-    transform: scale(0.92);
-  }
-}
-
-.recent-label {
-  font-size: 24rpx;
-  // color: #4b5563;
-  font-weight: 500;
-  //出现省略号
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100rpx;
-}
-</style>
+<script lang="ts" setup>
+import { computed, defineOptions } from 'vue'
+import { useMenus } from '../../../composables/useMenus'
+import { RainbowColorGenerator } from '../../../utils/index'
+import { useLanguageStore } from '../../../store/language'
+
+defineOptions({
+  name: 'SectionMenus',
+})
+const {
+  gotoPage,
+  getSectionMenu,
+  filersectiomenus,
+  sectionmenu,
+} = useMenus()
+getSectionMenu()
+const languageStore = useLanguageStore()
+const colorGenerator = new RainbowColorGenerator()
+const sectionmenuColor = computed(() => {
+  return filersectiomenus.value.map((item) => {
+    const color = colorGenerator.getNextColor()
+    return {
+      ...item,
+      color,
+    }
+  })
+})
+</script>
+
+<template>
+  <view v-if="sectionmenu.length > 0" class="recent-section b-rd-lg p-5 shadow-[0_4px_16px_rgba(99,102,241,0.1)] dark:bg-[#1a1a1e] bg-white">
+    <view class="section-header">
+      <view class="section-title-wrapper">
+        <!-- <view class="section-icon">
+          <text class="i-carbon:recently-viewed text-sm" :style="{ color: currentThemeColor.primary }" />
+        </view> -->
+        <text class="section-title dark:text-white text-gray-800">
+          {{ languageStore.t('快速访问') }}
+        </text>
+      </view>
+      <!-- <view class="section-more">
+            <text class="more-text">
+              查看全部
+            </text>
+            <text class="i-carbon:chevron-right text-xs" />
+          </view> -->
+    </view>
+    <view class="recent-items">
+      <view v-for="(i) in sectionmenuColor" :key="i.id" class="recent-item" @click="gotoPage(i)">
+        <view class="recent-icon" :style="{ background: i.color }">
+          <text class="i-carbon:grid text-lg text-white dark:text-white" />
+        </view>
+        <text class="recent-label dark:text-white text-gray-500">
+          {{ languageStore.t(i.title) }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+// 最近使用区域
+.recent-section {
+  margin-bottom: 24rpx;
+  animation: fadeInUp 0.5s ease-out;
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 30rpx;
+  padding: 0 8rpx;
+}
+
+.section-title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.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;
+  }
+}
+
+.section-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  // color: #1f2937;
+  letter-spacing: 0.02em;
+}
+
+.section-more {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  padding: 8rpx 12rpx;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 20rpx;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: rgba(0, 0, 0, 0.06);
+    transform: scale(0.96);
+  }
+}
+
+.more-text {
+  font-size: 22rpx;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.recent-items {
+  display: flex;
+  gap: 20rpx;
+  padding: 0 8rpx;
+}
+
+.recent-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+  flex: 1;
+  animation: fadeInScale 0.4s ease-out backwards;
+
+  @for $i from 1 through 4 {
+    &:nth-child(#{$i}) {
+      animation-delay: #{$i * 0.08}s;
+    }
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.recent-icon {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+
+  &-1 {
+    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+    color: #3b82f6;
+    box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.2);
+  }
+
+  &-2 {
+    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+    color: #d97706;
+    box-shadow: 0 4rpx 16rpx rgba(245, 158, 11, 0.2);
+  }
+
+  &-3 {
+    background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
+    color: #16a34a;
+    box-shadow: 0 4rpx 16rpx rgba(34, 197, 94, 0.2);
+  }
+
+  &-4 {
+    background: linear-gradient(135deg, #fdf2f8 0%, #fbcfe8 100%);
+    color: #db2777;
+    box-shadow: 0 4rpx 16rpx rgba(236, 72, 153, 0.2);
+  }
+
+  &:active {
+    transform: scale(0.92);
+  }
+}
+
+.recent-label {
+  font-size: 24rpx;
+  // color: #4b5563;
+  font-weight: 500;
+  //出现省略号
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100rpx;
+}
+</style>