wui-components-v2 1.1.33 → 1.1.34

package/api/sys.ts

@@ -0,0 +1,7 @@
+import req from './core/index'
+// 获取语言包
+export function language(language:string): Promise<any> {
+  return req({
+    url: `/v3/multilingual?language=${language}`,
+  })
+}

package/components/card-botom-buttons/card-botom-buttons.vue

@@ -238,9 +238,9 @@ function select({ item }) {
     <wd-button v-if="props.item.buttons.includes('singleDelete')" size="small" type="error" @click="del()">
       删除
     </wd-button>
-    <ActionPopup
-      v-model:show="actionItemShow" :enum-column="enumColumn" :zpaging="props.zpaging"
-      :field-group="actionItem" :code="props.code"
+    <ActionPopup
+      v-model:show="actionItemShow" :enum-column="props.enumColumn" :zpaging="props.zpaging"
+      :field-group="actionItem" :code="props.code"
     />
     <!-- 更多按钮 -->
     <wd-action-sheet v-model="showMoreButn" :actions="morebutns" @close="closeMoreButn" @select="select" />

package/components/fold-card/fold-card.vue

@@ -107,7 +107,7 @@ function toggleCollapse(contentId: string) {
       </view>
 
       <!-- 订单内容 -->
-      <view v-if="props.model === 'complex'" class="p-4">
+      <view v-if="props.model === 'complex'" class="p-4 pt-0">
         <!-- 商品列表 -->
         <view class="mb-3">
           <!-- 订单信息 -->

package/components/form-control/form-control.vue

@@ -238,7 +238,18 @@ defineExpose({
               filterable
             />
             <wd-calendar
-              v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'datetime' || ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'date'"
+              v-else-if=" ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'date'"
+              v-model="model[item.sourceId]"
+              type="date"
+              :label="item.title"
+              label-width="100px"
+              :prop="item.sourceId"
+              :readonly="item.disabled || item.rowEditType === 'readonly'"
+              :clearable="!item.disabled"
+              :placeholder="`请输入${item.title}`"
+            />
+            <wd-calendar
+              v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'datetime'"
               v-model="model[item.sourceId]"
               type="datetime"
               :label="item.title"

package/components/label-value/label-value.vue

@@ -6,7 +6,7 @@ import ControlTypeSupportor from '../../utils/control-type-supportor'
 import VideoPlay from '../video-play/video-play.vue'
 import AudioPlay from '../audio-play/audio-play.vue'
 import { useManualTheme } from '../../composables/useManualTheme'
-import openValueMore from './open-value-more.vue'
+import openValueMore from './open-value-more.vue'
 
 defineOptions({
   name: 'LabelValue',
@@ -51,8 +51,8 @@ function isControlType(item: Columns): string {
             :src="uitem.url"
           >
             <template #error>
-              <view class="flex items-center pt-4px">
-                暂无图片~
+              <view class="flex items-center pt-4px">
+                暂无图片~
               </view>
             </template>
             <template #loading>

package/components/wui-list/wui-list.vue

@@ -10,6 +10,7 @@ import CardBotomButtons from '../card-botom-buttons/card-botom-buttons.vue'
 import { generateHighResolutionID } from '../../utils/index'
 import productCard from '../product-card/product-card.vue'
 import tabSearch from '../tab-search/tab-search.vue'
+import ControlTypeSupportor from '../../utils/control-type-supportor'
 
 defineOptions({
   name: 'WuiList',
@@ -152,17 +153,17 @@ async function getEnums() {
       return [...acc, ...cur.writes]
     }, []) || []
     columns.forEach((item: any) => {
-      if (item.controlType === 'select' || item.controlType === 'multiselect') {
+      if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
         params.push(`mstrucIds=${item.mstrucId}`)
       }
     })
     criterias.forEach((item: any) => {
-      if (item.controlType === 'select' || item.controlType === 'multiselect') {
+      if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
         params.push(`mstrucIds=${item.mstrucId}`)
       }
     })
     writes.forEach((item: any) => {
-      if (item.controlType === 'select' || item.controlType === 'multiselect') {
+      if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
         params.push(`mstrucIds=${item.mstrucId}`)
       }
     })
@@ -191,7 +192,7 @@ function submitSearch(data: any) {
 function tabSearchClick(data: any) {
   if (searchData.value) {
     tabSearchData.value = `${searchData.value}&${data}`
-  }
+  }
   else {
     tabSearchData.value = data
   }
@@ -218,8 +219,8 @@ function tabSearchClick(data: any) {
           :page-title="pageTitle" :page-type="pageType"
         />
       </view>
-      <view v-if="config.split2TabCriterias">
-        <tabSearch :split2-tab-criterias="config.split2TabCriterias" :enums="enumColumn" @click="tabSearchClick" />
+      <view v-if="config.split2TabCriterias">
+        <tabSearch :split2-tab-criterias="config.split2TabCriterias" :enums="enumColumn" @click="tabSearchClick" />
       </view>
     </template>
     <view v-if="config.showType === 'cardList'">

package/components/wui-menus1/components/banner-carousel.vue

@@ -0,0 +1,320 @@
+<script setup lang="ts">
+/**
+ * BannerCarousel.vue
+ * 原生实现的 Banner 轮播组件
+ * 功能：自动播放、手动滑动切换、鼠标悬停暂停、分页器点击跳转
+ */
+import { onMounted, onUnmounted, ref } from 'vue'
+
+/** 从 mockData 获取轮播数据 */
+const banners: any = [
+  {
+    id: 1,
+    title: '欢迎使用企业门户',
+    subtitle: '高效协同，智慧办公',
+    bgColor: 'bg-gradient-to-r from-indigo-500 to-purple-600',
+    icon: 'building-office',
+  },
+  {
+    id: 2,
+    title: '本周会议安排',
+    subtitle: '3场会议待参加',
+    bgColor: 'bg-gradient-to-r from-emerald-500 to-teal-600',
+    icon: 'calendar',
+  },
+  {
+    id: 3,
+    title: '系统升级通知',
+    subtitle: 'v2.5.0 新功能上线',
+    bgColor: 'bg-gradient-to-r from-orange-500 to-amber-600',
+    icon: 'sparkles',
+  },
+]
+
+/**
+ * 图标映射表
+ * 根据 banner.icon 字段映射对应的 Heroicons 组件
+ */
+// const iconMap: Record<string, any> = {
+//   'building-office': BuildingOfficeIcon,
+//   'calendar': CalendarIcon,
+//   'sparkles': SparklesIcon
+// }
+
+/** 当前显示的轮播项索引 */
+const currentIndex = ref(0)
+
+/** 鼠标是否悬停在轮播区域 */
+const isHovered = ref(false)
+
+/** 是否正在拖动（手动滑动中） */
+const isDragging = ref(false)
+
+/** 拖动偏移量（px），用于实时跟随手指/鼠标移动 */
+const dragOffset = ref(0)
+
+/** 自动播放的定时器引用 */
+let autoplayTimer: ReturnType<typeof setInterval> | null = null
+
+/** 拖动开始时的 X 坐标 */
+let startX = 0
+
+/**
+ * 启动自动播放
+ * 每 3 秒切换到下一张，循环播放
+ */
+function startAutoplay() {
+  if (autoplayTimer)
+    clearInterval(autoplayTimer)
+  autoplayTimer = setInterval(() => {
+    currentIndex.value = (currentIndex.value + 1) % banners.length
+  }, 10000)
+}
+
+/**
+ * 停止自动播放
+ * 清除定时器并置空引用
+ */
+function stopAutoplay() {
+  if (autoplayTimer) {
+    clearInterval(autoplayTimer)
+    autoplayTimer = null
+  }
+}
+
+/**
+ * 跳转到指定索引的轮播项
+ * @param index 目标索引
+ */
+function goToSlide(index: number) {
+  currentIndex.value = index
+}
+
+/**
+ * 切换到下一张轮播项
+ * 使用取模实现循环（最后一张 -> 第一张）
+ */
+function nextSlide() {
+  currentIndex.value = (currentIndex.value + 1) % banners.length
+}
+
+/**
+ * 切换到上一张轮播项
+ * 使用取模实现循环（第一张 -> 最后一张）
+ */
+function prevSlide() {
+  currentIndex.value = (currentIndex.value - 1 + banners.length) % banners.length
+}
+
+/**
+ * 鼠标进入轮播区域
+ * 停止自动播放
+ */
+function onMouseEnter() {
+  isHovered.value = true
+  stopAutoplay()
+}
+
+/**
+ * 拖动开始
+ * 记录起始 X 坐标，重置拖动偏移量
+ * @param clientX 鼠标/触摸的 X 坐标
+ */
+function onDragStart(clientX: number) {
+  isDragging.value = true
+  startX = clientX
+  dragOffset.value = 0
+}
+
+/**
+ * 拖动中
+ * 实时更新 dragOffset，实现跟随效果
+ * @param clientX 鼠标/触摸的当前 X 坐标
+ */
+function onDragMove(clientX: number) {
+  if (!isDragging.value)
+    return
+  dragOffset.value = clientX - startX
+}
+
+/**
+ * 拖动结束
+ * 判断滑动方向和距离：
+ * - 左滑 > 50px：切换下一张
+ * - 右滑 > 50px：切换上一张
+ * - 否则：回弹到原位
+ * 拖动结束后恢复自动播放
+ */
+function onDragEnd() {
+  if (!isDragging.value)
+    return
+  isDragging.value = false
+
+  const threshold = 50
+  if (dragOffset.value < -threshold) {
+    nextSlide()
+  }
+  else if (dragOffset.value > threshold) {
+    prevSlide()
+  }
+
+  dragOffset.value = 0
+  startAutoplay()
+}
+
+/** 触摸开始事件（移动端） */
+function onTouchStart(e: TouchEvent) {
+  onDragStart(e.touches[0]?.clientX ?? 0)
+}
+
+/** 触摸移动事件（移动端） */
+function onTouchMove(e: TouchEvent) {
+  onDragMove(e.touches[0]?.clientX ?? 0)
+}
+
+/** 触摸结束事件（移动端） */
+function onTouchEnd() {
+  onDragEnd()
+}
+
+/** 鼠标按下事件（桌面端） */
+function onMouseDown(e: MouseEvent) {
+  onDragStart(e.clientX)
+}
+
+/** 鼠标移动事件（桌面端拖动中） */
+function onMouseMove(e: MouseEvent) {
+  onDragMove(e.clientX)
+}
+
+/** 鼠标释放事件（桌面端拖动结束） */
+function onMouseUp() {
+  onDragEnd()
+}
+
+/**
+ * 鼠标离开轮播区域
+ * 如果正在拖动中则触发拖动结束
+ * 恢复自动播放
+ */
+function onMouseLeave() {
+  if (isDragging.value) {
+    onDragEnd()
+  }
+  isHovered.value = false
+  startAutoplay()
+}
+
+/** 组件挂载时启动自动播放 */
+onMounted(() => {
+  startAutoplay()
+})
+
+/** 组件卸载时停止自动播放，防止内存泄漏 */
+onUnmounted(() => {
+  stopAutoplay()
+})
+</script>
+
+<template>
+  <!--
+    外层容器：
+    - select-none：防止拖动时选中文本
+    - 监听 mouseenter/mouseleave 用于悬停暂停
+  -->
+  <view
+    class="mt-6 select-none overflow-hidden rounded-2xl pb-2"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <!--
+      轮播内容区：
+      - overflow-hidden：裁剪只显示当前 slide
+      - cursor-grab/active：拖动时显示抓取手势
+      - 监听 mousedown/mousemove/mouseup（桌面端）
+      - 监听 touchstart/touchmove/touchend（移动端）
+    -->
+    <view
+      class="cursor-grab overflow-hidden active:cursor-grabbing"
+      @mousedown="onMouseDown"
+      @mousemove="onMouseMove"
+      @mouseup="onMouseUp"
+      @mouseleave="onMouseLeave"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+    >
+      <!--
+        轮播轨道：
+        - flex：水平排列所有 slide
+        - transition-transform：
+          - 拖动中：transition-none（实时跟随，无动画）
+          - 正常切换：transition-transform duration-[600ms] ease（600ms 动画）
+        - translateX 计算：
+          - 基准位置：-${currentIndex * 100}%
+          - 拖动偏移：+ ${dragOffset}px
+      -->
+      <view
+        class="flex"
+        :class="isDragging ? 'transition-none' : 'transition-transform duration-[600ms] ease'"
+        :style="{ transform: `translateX(calc(-${currentIndex * 100}% + ${dragOffset}px))` }"
+      >
+        <!--
+          单个轮播项：
+          - w-full flex-shrink-0：每个 slide 占满宽度且不压缩
+        -->
+        <view
+          v-for="banner in banners"
+          :key="banner.id"
+          class="w-full flex-shrink-0 cursor-pointer"
+        >
+          <!--
+            Banner 内容卡片：
+            - 动态背景色（bgColor）
+            - h-36：固定高度
+            - flex items-center：垂直居中
+            - px-6：水平内边距
+            - rounded-2xl：圆角
+          -->
+          <view
+            :class="banner.bgColor"
+            class="h-36 flex items-center rounded-2xl px-6"
+          >
+            <!-- 左侧文字区域 -->
+            <view class="flex-1">
+              <h3 class="text-lg text-white font-semibold">
+                {{ banner.title }}
+              </h3>
+              <p class="mt-1 text-sm text-white/80">
+                {{ banner.subtitle }}
+              </p>
+            </view>
+
+            <!-- 右侧图标区域 -->
+            <view class="h-14 w-14 flex items-center justify-center rounded-full bg-white/20">
+              <!-- <component :is="iconMap[banner.icon]" class="w-8 h-8 text-white" /> -->
+              <wd-icon name="calendar" size="26px" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!--
+      分页器：
+      - flex justify-center gap-2：水平居中，dot 之间 8px 间距
+      - mt-4：与轮播内容保持间距
+    -->
+    <view class="mt-4 flex justify-center gap-2">
+      <view
+        v-for="(_, index) in banners"
+        :key="index"
+        class="h-1 w-1 cursor-pointer rounded-full transition-all duration-300"
+        :class="index === currentIndex
+          ? 'bg-white opacity-100'
+          : 'bg-white/50'"
+        @click="goToSlide(Number(index))"
+      />
+    </view>
+  </view>
+</template>

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

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { defineOptions, defineProps } from 'vue'
+import { useManualTheme } from '../../../composables/useManualTheme'
+import { desaturateColor, getFirstChar } from '../../../utils'
+
+import { useUser } from '../../../composables/useUser'
+import { useMenus } from '../../../composables/useMenus'
+import { useSectionMenus } from '../../../composables/useSectionMenus'
+
+defineOptions({
+  name: 'Navbar',
+})
+defineProps<{
+  navTitle: string
+}>()
+const {
+  currentThemeColor,
+} = useManualTheme()
+const { messageBar } = useSectionMenus(true)
+const { gotoPage } = useMenus()
+const { nickName } = useUser()
+
+function messageAction() {
+  if (messageBar.value) {
+    gotoPage(messageBar.value)
+  }
+}
+</script>
+
+<template>
+  <view class="bg-#fff pa-3 backdrop-filter .dark:bg-#000">
+    <view class="mx-auto max-w-7xl p-x-1">
+      <view class="flex items-center justify-between">
+        <view
+          class="bg-clip-text font-size-5 text-transparent font-600 font-sans"
+          :style="{ color: currentThemeColor.primary }"
+        >
+          {{ navTitle }}
+        </view>
+        <view class="flex items-center gap-2">
+          <button
+            v-if="messageBar"
+            :style="{ background: `linear-gradient(135deg, ${desaturateColor(currentThemeColor.primary, 0.1)} 0%, ${desaturateColor(currentThemeColor.primary, 0.1)} 100%)` }"
+            class="relative h-10 w-10 flex cursor-pointer items-center justify-center rounded-full border-none transition-all duration-300"
+            @click="messageAction"
+          >
+            <wd-icon name="notification" size="40rpx" :color="currentThemeColor.primary" />
+            <span
+              v-if="messageBar.count"
+              class="absolute right-[6px] top-[6px] h-[10px] w-[10px] animate-pulse border-2 border-b-blue rounded-full bg-red-6"
+            />
+          </button>
+          <view
+            :style="{ background: `linear-gradient(135deg, ${currentThemeColor.primary} 0%, ${currentThemeColor.primary} 100%)` }"
+            class="h-9 w-9 flex cursor-pointer items-center justify-center rounded-full text-sm text-white font-semibold shadow-sm"
+          >
+            {{ getFirstChar(nickName || 'U') }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,54 @@
+<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 .light:color-#1f2937">
+        {{ 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 .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 .light:color-dark">
+              {{ 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

@@ -0,0 +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>