wui-components-v2 1.1.70 → 1.1.72

package/components/wui-menus1/components/quick-panel.vue

@@ -1,55 +1,55 @@
-<script lang="ts" setup>
-import { computed, defineOptions } from 'vue'
-import { RainbowColorGenerator } from '../../../utils'
-import { useSectionMenus } from '../../../composables/useSectionMenus'
-import { useLanguageStore } from '../../../store/language'
-
-defineOptions({
-  name: 'QuickPanel',
-})
-const { quickPanel } = useSectionMenus(true)
-const languageStore = useLanguageStore()
-const colorGenerator = new RainbowColorGenerator()
-const cstatistics = computed(() => {
-  return quickPanel.value.map((item) => {
-    const color = colorGenerator.getNextColor()
-    return {
-      ...item,
-      color,
-    }
-  })
-})
-</script>
-
-<template>
-  <view v-if="cstatistics.length > 0" class="pb-2">
-    <view>
-      <view class="mb-2 flex items-center gap-2 font-semibold dark:text-white text-gray-800">
-        {{ languageStore.t('数据统计') }}
-      </view>
-      <view class="grid grid-cols-2 gap-3">
-        <view v-for="(item) in cstatistics" :key="item.id" :style="{ '--wbg-color': item.color }" class="relative relative overflow-hidden rounded-2xl bg-white p-5 shadow-[0_4px_16px_rgba(99,102,241,0.1)] transition-250 before:absolute before:right-0 before:top-0 before:h-20 before:w-20 before:translate-x-30% before:rounded-full before:bg-[var(--wbg-color)] dark:bg-black before:opacity-10 before:content-[''] before:-translate-y-30%">
-          <view class="mb-3 flex items-center justify-between">
-            <view class="h-8 w-8 flex items-center justify-center rounded-2" :style="{ background: item.color }">
-              <svg class="h-4 w-4 text-white dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
-              </svg>
-            </view>
-          </view>
-          <view class="flex flex-col items-center justify-center">
-            <view class="text-size-2xl fw-800 dark:text-white text-gray-900">
-              {{ item.count }}
-            </view>
-            <view class="text-size-3 color-gray">
-              {{ languageStore.t(item.title) }}
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style scoped>
-
-</style>
+<script lang="ts" setup>
+import { computed, defineOptions } from 'vue'
+import { RainbowColorGenerator } from '../../../utils'
+import { useSectionMenus } from '../../../composables/useSectionMenus'
+import { useLanguageStore } from '../../../store/language'
+
+defineOptions({
+  name: 'QuickPanel',
+})
+const { quickPanel } = useSectionMenus(true)
+const languageStore = useLanguageStore()
+const colorGenerator = new RainbowColorGenerator()
+const cstatistics = computed(() => {
+  return quickPanel.value.map((item) => {
+    const color = colorGenerator.getNextColor()
+    return {
+      ...item,
+      color,
+    }
+  })
+})
+</script>
+
+<template>
+  <view v-if="cstatistics.length > 0" class="pb-2">
+    <view>
+      <view class="mb-2 flex items-center gap-2 font-semibold dark:text-white text-gray-800">
+        {{ languageStore.t('数据统计') }}
+      </view>
+      <view class="grid grid-cols-2 gap-3">
+        <view v-for="(item) in cstatistics" :key="item.id" :style="{ '--wbg-color': item.color }" class="relative relative overflow-hidden rounded-2xl bg-white p-5 shadow-[0_4px_16px_rgba(99,102,241,0.1)] transition-250 before:absolute before:right-0 before:top-0 before:h-20 before:w-20 before:translate-x-30% before:rounded-full before:bg-[var(--wbg-color)] dark:bg-black before:opacity-10 before:content-[''] before:-translate-y-30%">
+          <view class="mb-3 flex items-center justify-between">
+            <view class="h-8 w-8 flex items-center justify-center rounded-2" :style="{ background: item.color }">
+              <svg class="h-4 w-4 text-white dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+              </svg>
+            </view>
+          </view>
+          <view class="flex flex-col items-center justify-center">
+            <view class="text-size-2xl fw-800 dark:text-white text-gray-900">
+              {{ item.count }}
+            </view>
+            <view class="text-size-3 color-gray">
+              {{ languageStore.t(item.title) }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+
+</style>

package/components/wui-menus1/components/search-bar.vue

@@ -1,49 +1,49 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'uni-mini-router'
-
-const router = useRouter()
-const searchQuery = ref('')
-const isFocused = ref(false)
-
-function handleFocus() {
-  isFocused.value = true
-}
-
-function handleBlur() {
-  isFocused.value = false
-}
-
-// const handleSearch = () => {
-//   if (searchQuery.value.trim()) {
-//     console.log('Searching:', searchQuery.value)
-//   }
-// }
-
-function goToSearch() {
-  router.push('/pages/search-tabbar/index')
-}
-</script>
-
-<template>
-  <div
-    class="relative mt-4"
-  >
-    <div
-      class="h-12 flex items-center rounded-xl bg-white px-4 transition-all duration-200"
-      :class="isFocused ? 'ring-2 ring-indigo-500 shadow-lg' : 'shadow-md'"
-    >
-      <wd-icon name="search" class="h-5 w-5 flex-shrink-0 text-slate-400" size="22px" />
-      <input
-        v-model="searchQuery"
-        type="text"
-        placeholder="搜索菜单、功能..."
-        class="ml-3 flex-1 cursor-pointer bg-transparent text-base text-slate-800 outline-none placeholder:text-slate-400"
-        readonly
-        @click="goToSearch"
-        @focus="handleFocus"
-        @blur="handleBlur"
-      >
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'uni-mini-router'
+
+const router = useRouter()
+const searchQuery = ref('')
+const isFocused = ref(false)
+
+function handleFocus() {
+  isFocused.value = true
+}
+
+function handleBlur() {
+  isFocused.value = false
+}
+
+// const handleSearch = () => {
+//   if (searchQuery.value.trim()) {
+//     console.log('Searching:', searchQuery.value)
+//   }
+// }
+
+function goToSearch() {
+  router.push('/pages/search-tabbar/index')
+}
+</script>
+
+<template>
+  <div
+    class="relative mt-4"
+  >
+    <div
+      class="h-12 flex items-center rounded-xl bg-white px-4 transition-all duration-200"
+      :class="isFocused ? 'ring-2 ring-indigo-500 shadow-lg' : 'shadow-md'"
+    >
+      <wd-icon name="search" class="h-5 w-5 flex-shrink-0 text-slate-400" size="22px" />
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="搜索菜单、功能..."
+        class="ml-3 flex-1 cursor-pointer bg-transparent text-base text-slate-800 outline-none placeholder:text-slate-400"
+        readonly
+        @click="goToSearch"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      >
+    </div>
+  </div>
+</template>

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>