wui-components-v2 1.1.64 → 1.1.66

package/components/wui-notify-info/wui-notify-info.vue

@@ -56,7 +56,7 @@ const rightSidebars = computed(() => {
   return data
 })
 const sources = computed(() => {
-  return rightSidebars.value.map((item) => {
+  return rightSidebars.value.map(item => {
     return {
       id: item.id,
       title: item.title,
@@ -69,41 +69,49 @@ async function getEnums(sourceId: string, config: Config) {
     const params: string[] = []
     const criterias = config?.criterias ?? []
     const columns = config?.columns ?? []
-    const writes = config?.rowActions?.reduce((acc: any, cur: any) => {
-      return [...acc, ...cur.writes]
-    }, []) || []
+    const writes =
+      config?.rowActions?.reduce((acc: any, cur: any) => {
+        return [...acc, ...cur.writes]
+      }, []) || []
     columns.forEach((item: any) => {
-      if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
+      if (
+        ControlTypeSupportor.getControlType(item) === 'select' ||
+        ControlTypeSupportor.getControlType(item) === 'multiselect'
+      ) {
         params.push(`mstrucIds=${item.mstrucId}`)
       }
     })
     criterias.forEach((item: any) => {
-      if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
+      if (
+        ControlTypeSupportor.getControlType(item) === 'select' ||
+        ControlTypeSupportor.getControlType(item) === 'multiselect'
+      ) {
         params.push(`mstrucIds=${item.mstrucId}`)
       }
     })
     writes.forEach((item: any) => {
-      if (ControlTypeSupportor.getControlType(item) === 'select' || ControlTypeSupportor.getControlType(item) === 'multiselect') {
+      if (
+        ControlTypeSupportor.getControlType(item) === 'select' ||
+        ControlTypeSupportor.getControlType(item) === 'multiselect'
+      ) {
         params.push(`mstrucIds=${item.mstrucId}`)
       }
     })
-    if (!params.length)
-      return
+    if (!params.length) return
     const res = await enums(params.join('&'))
     enumColumn.value[sourceId] = res.enumMap || {}
-  }
-  catch (error) {
+  } catch (error) {
     console.log('error:', error)
   }
 }
 // 获取数据
-async function queryList(source: { id: string, title: string }): Promise<Notification | null> {
+async function queryList(source: { id: string; title: string }): Promise<Notification | null> {
   try {
     const res = await pageConfig(source.id)
     dtmplConfig.value[source.id] = res.ltmplConfig
     getEnums(source.id, res.ltmplConfig)
-    const res1 = await pageKey(source.id, '', '')// 获取key
-    const data = await listData(res1.key, 1, 10)// 获取数据
+    const res1 = await pageKey(source.id, '', '') // 获取key
+    const data = await listData(res1.key, 1, 10) // 获取数据
     return {
       id: source.id,
       title: source.title,
@@ -125,8 +133,7 @@ async function queryList(source: { id: string, title: string }): Promise<Notific
         }
       }),
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
     return null
   }
@@ -148,10 +155,14 @@ watch(sources, () => {
 
 function getIconColor(type: string) {
   switch (type) {
-    case 'system': return 'bg-blue-500'
-    case 'department': return 'bg-amber-500'
-    case 'colleague': return 'bg-purple-500'
-    default: return 'bg-slate-500'
+    case 'system':
+      return 'bg-blue-500'
+    case 'department':
+      return 'bg-amber-500'
+    case 'colleague':
+      return 'bg-purple-500'
+    default:
+      return 'bg-slate-500'
   }
 }
 
@@ -190,22 +201,30 @@ function gotoDetailPage(item: Data) {
 <template>
   <view v-if="notifications && notifications.length > 0" class="mb-6 mt-6">
     <view class="mb-4 flex items-center justify-between">
-      <text class="text-base text-slate-800 font-semibold .dark:text-white">
+      <text class="text-base text-slate-800 font-semibold dark:text-white">
         {{ languageStore.t('最新消息') }}
       </text>
     </view>
 
     <view v-for="notification in notifications" :key="notification.id" class="space-y-3">
-      <view class="mt-2 flex justify-between text-size-3 color-gray .dark:text-white">
+      <view class="mt-2 flex justify-between text-size-3 color-gray dark:text-white">
         <view>{{ languageStore.t(notification.title) }}</view>
-        <view @click="() => { gotoPage(notification) }">
+        <view
+          @click="
+            () => {
+              gotoPage(notification)
+            }
+          "
+        >
           {{ languageStore.t('查看全部') }}
         </view>
       </view>
       <button
-        v-for="item in notification.data" :key="item.id"
-        class="w-full flex cursor-pointer items-start gap-3 rounded-xl bg-white p-4 text-left shadow-[0_4px_16px_rgba(99,102,241,0.1)] transition-all duration-200 .dark:bg-black hover:shadow-md"
-        :class="{ 'opacity-60': item.read }" @click="handleNotificationClick(item)"
+        v-for="item in notification.data"
+        :key="item.id"
+        class="w-full flex cursor-pointer items-start gap-3 rounded-xl bg-white p-4 text-left shadow-[0_4px_16px_rgba(99,102,241,0.1)] transition-all duration-200 dark:bg-black hover:shadow-md"
+        :class="{ 'opacity-60': item.read }"
+        @click="handleNotificationClick(item)"
       >
         <view
           :class="getIconColor(item.type)"
@@ -216,20 +235,31 @@ function gotoDetailPage(item: Data) {
 
         <view class="min-w-0 flex-1">
           <view class="flex justify-between gap-1">
-            <span class="text-sm text-slate-800 font-medium .dark:text-white">{{ formatItemData(item.primaryColumn,
-                                                                                                ControlTypeSupportor.getControlType(item.primaryColumnConfig)) }}</span>
-            <span class="whitespace-nowrap text-xs text-slate-400 .dark:text-white">{{
-              formatItemData(item.primaryColumnLabel,
-                             ControlTypeSupportor.getControlType(item.primaryColumnLabelConfig)) }}</span>
+            <span class="text-sm text-slate-800 font-medium dark:text-white">
+              {{ formatItemData(item.primaryColumn, ControlTypeSupportor.getControlType(item.primaryColumnConfig)) }}
+            </span>
+            <span class="whitespace-nowrap text-xs text-slate-400 dark:text-gray-300">
+              {{
+                formatItemData(
+                  item.primaryColumnLabel,
+                  ControlTypeSupportor.getControlType(item.primaryColumnLabelConfig)
+                )
+              }}
+            </span>
           </view>
-          <p class="line-clamp-2 mt-1 text-sm text-slate-500 .dark:text-white">
+          <p class="line-clamp-2 mt-1 text-sm text-slate-500 dark:text-gray-400">
             <text class="mr-1">
-              {{ formatItemData(item.secondColumn, ControlTypeSupportor.getControlType(item.secondColumnConfig || {}))
+              {{
+                formatItemData(item.secondColumn, ControlTypeSupportor.getControlType(item.secondColumnConfig || {}))
               }}
             </text>
             <text>
-              {{ formatItemData(item.secondColumnLabel,
-                                ControlTypeSupportor.getControlType(item.secondColumnLabelConfig || {})) }}
+              {{
+                formatItemData(
+                  item.secondColumnLabel,
+                  ControlTypeSupportor.getControlType(item.secondColumnLabelConfig || {})
+                )
+              }}
             </text>
           </p>
         </view>

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

@@ -298,7 +298,7 @@ onUnmounted(() => {
 
     <template #bottom>
       <slot name="bottom">
-        <view class="flex justify-between gap-1 p-2 .dark:bg-gray-900 .light:bg-white">
+        <view class="flex justify-between gap-1 p-2 bg-white dark:bg-[var(--wot-dark-background)]">
           <!-- <wd-button class="flex-1" type="info" @click="cancel">
             取消
           </wd-button> -->

package/components/wui-select-popup/wui-select-popup.vue

@@ -35,7 +35,7 @@ const props = withDefaults(
     defaultSelectFirst: false,
   }
 )
-
+console.log(props, '3333333333333333333')
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string | string[]): void
   (e: 'confirm', value: string | string[]): void
@@ -161,6 +161,8 @@ const formatAddress = (value: string) => {
 const isConfigLoaded = ref(false)
 // ★ 防止重复加载
 const isLoading = ref(false)
+// ★ 防止 z-paging 初始化时与手动 reload 重复请求
+const hasInitialized = ref(false)
 
 // ★ 是否已完成默认首项选中
 const hasDefaultSelected = ref(false)
@@ -217,8 +219,17 @@ async function getEnums() {
 
 // 查询列表数据（完整流程：config -> key -> data）
 async function queryList(pageNo: number, pageSize: number) {
-  // ★ 首次加载时防重复（分页加载不拦截，pageNo > 1 时放行）
+  // ★ 只防正在进行的重复请求（分页不拦截）
   if (pageNo === 1 && isLoading.value) return
+
+  // ★ z-paging 组件初始化时自动触发 @query，popup 未打开时跳过
+  // （只跳过第一次，后续打开 popup 后的查询正常放行）
+  if (!show.value && !hasInitialized.value) {
+    hasInitialized.value = true
+    Zpaging.value.complete([])
+    return
+  }
+
   if (pageNo === 1) isLoading.value = true
 
   try {
@@ -344,9 +355,10 @@ function openPopup(e?: any) {
 watch(show, async val => {
   console.log('[WuiSelectPopup] 📢 show 状态变化:', val)
   if (val) {
-    if (isLoading.value) return // ★ 防重复
-    isConfigLoaded.value = false
+    if (isLoading.value) return // ★ 防重复（正在请求中不重复触发）
     await nextTick()
+    // ★ 不重置 isConfigLoaded（配置只需加载一次）
+    hasInitialized.value = false // ★ 允许 reload 触发查询
     if (Zpaging.value) {
       Zpaging.value.reload()
     } else {
@@ -364,7 +376,8 @@ function handleRefresh(refreshSourceId: string) {
   if (refreshSourceId !== props.sourceId) return
   console.log('[WuiSelectPopup] 🔄 收到刷新信号，重新加载数据')
   if (show.value && Zpaging.value && !isLoading.value) {
-    isConfigLoaded.value = false
+    isConfigLoaded.value = false // ★ 刷新时重新加载配置
+    hasInitialized.value = false // ★ 允许 reload 触发
     Zpaging.value.reload()
   }
 }
@@ -391,18 +404,18 @@ defineExpose({
 </script>
 
 <template>
-  <view class="wui-select-popup-wrapper">
+  <view class="wui-select-popup-wrapper dark:bg-[var(--wot-dark-background)]">
     <!-- ★ 触发区域 - 原生表单样式（左标签 + 中内容 + 右箭头） -->
     <view v-if="!show" class="trigger-cell" @click="openPopup">
       <!-- 左侧标签 -->
-      <text v-if="label" class="cell-label">
+      <text v-if="label" class="cell-label dark:text-white">
         {{ label }}
       </text>
 
       <!-- 中间内容区 -->
-      <view class="cell-content">
-        <text v-if="displayValue" class="cell-value">
-          {{ displayValue }}
+      <view class="cell-content dark:text-white">
+        <text v-if="displayValue && displayValue !== 'null'" class="cell-value">
+          {{ displayValue || '' }}
         </text>
         <text v-else class="cell-placeholder">
           {{ placeholder || `请选择${title || label}` }}
@@ -422,6 +435,7 @@ defineExpose({
       position="bottom"
       :z-index="999999"
       custom-style="border-radius: 24rpx 24rpx 0 0; overflow: hidden;"
+      class="dark:bg-[#1b1b1e]"
       safe-area-inset-bottom
       @close="
         () => {
@@ -429,10 +443,10 @@ defineExpose({
         }
       "
     >
-      <view class="select-popup-container">
+      <view class="select-popup-container dark:bg-[#1b1b1e]">
         <!-- 标题栏 - 固定高度不参与滚动 -->
         <view
-          class="popup-header flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-white shrink-0"
+          class="popup-header flex items-center justify-between px-4 py-3 border-b border-gray-200 shrink-0 dark:text-white"
         >
           <text class="text-base font-bold">选择{{ title }}</text>
           <wd-icon name="close-circle" size="16px" @click="cancel" />
@@ -491,7 +505,7 @@ defineExpose({
             </foldCard>
 
             <template #bottom>
-              <view class="popup-footer flex justify-center gap-4 p-4 bg-white border-t border-gray-200">
+              <view class="popup-footer flex justify-center gap-4 p-4 border-t border-gray-200">
                 <wd-button plain custom-class="flex-1" @click="cancel">取消</wd-button>
                 <wd-button type="primary" custom-class="flex-1" @click="confirm">确定</wd-button>
               </view>
@@ -514,7 +528,6 @@ defineExpose({
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: #fff;
   cursor: pointer;
   position: relative;
   transition: background-color 0.2s;
@@ -526,7 +539,6 @@ defineExpose({
   // 左侧标签 - 固定宽度，不换行
   .cell-label {
     flex-shrink: 0;
-    color: #333;
     margin-right: 24rpx;
     white-space: nowrap;
   }
@@ -537,7 +549,6 @@ defineExpose({
     min-width: 0; // 允许文本溢出省略
 
     .cell-value {
-      color: #333;
       text-align: left;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -571,7 +582,6 @@ defineExpose({
   flex-direction: column;
   height: 75vh; // 固定高度
   max-height: 80vh; // 最大高度
-  background-color: #fff;
   overflow: hidden; // 防止内容溢出
 }
 

package/components/wui-system-settings/wui-system-settings.vue

@@ -36,6 +36,17 @@ const isDark = computed({
     toggleTheme()
   },
 })
+
+// Cell / CellGroup 暗黑内联样式
+const settingsCellStyle = computed(() => ({
+  backgroundColor: isDark.value ? '#161616' : '#fff',
+  borderBottom: isDark.value ? '1px solid rgba(255,255,255,0.04)' : 'none',
+}))
+
+const settingsGroupStyle = computed(() => ({
+  backgroundColor: isDark.value ? '#111111' : 'transparent',
+  borderRadius: isDark.value ? '10px' : '0',
+}))
 // 处理主题色选择
 function handleThemeColorSelect(option: ThemeColorOption) {
   selectThemeColor(option)
@@ -48,25 +59,31 @@ function handleLanguageSelect(option: LocaleOption) {
 </script>
 
 <template>
-  <view>
-    <!-- <view class="color-black">{{ languageStore.t('PC新增') }}</view> -->
+  <view class="settings-page" :style="{ backgroundColor: isDark ? '#1B1B1E' : '#F8F9FB' }">
     <demo-block :title="languageStore.t('系统设置')" transparent>
-      <wd-cell-group border custom-class="rounded-2! overflow-hidden">
-        <wd-cell :title="languageStore.t('暗黑模式')">
+      <wd-cell-group border custom-class="rounded-2! overflow-hidden" :custom-style="settingsGroupStyle">
+        <wd-cell :title="languageStore.t('暗黑模式')" :custom-style="settingsCellStyle">
           <wd-switch v-model="isDark" size="18px" />
         </wd-cell>
-        <wd-cell :title="languageStore.t('选择主题色')" is-link @click="openThemeColorPicker">
+        <wd-cell
+          :title="languageStore.t('选择主题色')"
+          is-link
+          @click="openThemeColorPicker"
+          :custom-style="settingsCellStyle"
+        >
           <view class="flex items-center justify-end gap-2">
-            <view
-              class="h-4 w-4 rounded-full"
-              :style="{ backgroundColor: currentThemeColor.primary }"
-            />
-            <text>{{ currentThemeColor.name }}</text>
+            <view class="h-4 w-4 rounded-full" :style="{ backgroundColor: currentThemeColor.primary }" />
+            <text :style="{ color: isDark ? '#e8e8e8' : '#333' }">{{ currentThemeColor.name }}</text>
           </view>
         </wd-cell>
-        <wd-cell :title="languageStore.t('选择语言')" is-link @click="openLanguagePicker">
+        <wd-cell
+          :title="languageStore.t('选择语言')"
+          is-link
+          @click="openLanguagePicker"
+          :custom-style="settingsCellStyle"
+        >
           <view class="flex items-center justify-end gap-2">
-            <text>{{ currentLocale.name }}</text>
+            <text :style="{ color: isDark ? '#e8e8e8' : '#333' }">{{ currentLocale.name }}</text>
           </view>
         </wd-cell>
       </wd-cell-group>
@@ -94,12 +111,7 @@ function handleLanguageSelect(option: LocaleOption) {
               {{ option.name }}
             </text>
           </view>
-          <wd-icon
-            v-if="currentThemeColor.value === option.value"
-            name="check"
-            :color="option.primary"
-            size="20px"
-          />
+          <wd-icon v-if="currentThemeColor.value === option.value" name="check" :color="option.primary" size="20px" />
         </view>
       </view>
       <wd-gap :height="50" />
@@ -123,12 +135,7 @@ function handleLanguageSelect(option: LocaleOption) {
               {{ option.name }}
             </text>
           </view>
-          <wd-icon
-            v-if="currentLocale.value === option.value"
-            name="check"
-            :color="primary"
-            size="20px"
-          />
+          <wd-icon v-if="currentLocale.value === option.value" name="check" :color="primary" size="20px" />
         </view>
       </view>
       <wd-gap :height="50" />

package/components/wui-tabbar/wui-tabbar.vue

@@ -55,13 +55,22 @@ export default {
   <wd-config-provider :theme-vars="themeVars" :custom-class="`page-wraper ${theme}`" :theme="theme">
     <slot />
     <wd-tabbar
-      :model-value="activeTabbar.name" bordered safe-area-inset-bottom placeholder fixed custom-class="z-14!"
+      :model-value="activeTabbar.name"
+      bordered
+      safe-area-inset-bottom
+      placeholder
+      fixed
+      custom-class="z-14!"
       :active-color="currentThemeColor.primary"
       @change="handleTabbarChange"
     >
       <wd-tabbar-item
-        v-for="(item, index) in tabbarList" :key="index" :name="item.name"
-        :value="getTabbarItemValue(item.name)" :title="item.title" :icon="item.icon"
+        v-for="(item, index) in tabbarList"
+        :key="index"
+        :name="item.name"
+        :value="getTabbarItemValue(item.name)"
+        :title="item.title"
+        :icon="item.icon"
       >
         <!-- 使用 icon 插槽自定义图标 -->
         <template v-if="item.activeIcon" #icon="{ active }">
@@ -84,11 +93,11 @@ export default {
 .page-wraper {
   min-height: calc(100vh - var(--window-top));
   box-sizing: border-box;
-  background: #F8F9FB;
+  background: #f8f9fb;
 }
 
 .wot-theme-dark.page-wraper {
-  background: #222;
+  background: #1b1b1e;
 }
 .custom-icon {
   width: 52rpx;

package/components/wui-tree-page/components/tree-item.vue

@@ -25,9 +25,7 @@ const props = defineProps({
   },
 })
 const emit = defineEmits(['addBranch', 'addLeaf', 'remove', 'update', 'toggleExpand'])
-const {
-  currentThemeColor,
-} = useManualTheme()
+const { currentThemeColor } = useManualTheme()
 interface TreeNode {
   id: string
   label: string
@@ -45,8 +43,7 @@ const hasChildren = computed(() => {
 
 // 计算是否需要高亮
 const isHighlight = computed(() => {
-  if (!props.searchKeyword)
-    return false
+  if (!props.searchKeyword) return false
   return props.node.label.toLowerCase().includes(props.searchKeyword.toLowerCase())
 })
 
@@ -92,20 +89,32 @@ function emitUpdate(e: TreeNode) {
 <template>
   <view class="tree-node">
     <!-- 节点内容行 -->
-    <view class="node-content bg-#fff .dark:bg-#222222" :style="{ paddingLeft: `${level * 30}rpx` }">
+    <view class="node-content bg-white dark:bg-[#1B1B1E]" :style="{ paddingLeft: `${level * 30}rpx` }">
       <!-- 展开/收起图标 -->
-      <view class="icon-area" @click.stop="() => { toggleExpand() }">
+      <view
+        class="icon-area"
+        @click.stop="
+          () => {
+            toggleExpand()
+          }
+        "
+      >
         <text v-if="node.type !== 'leaf'" class="arrow" :class="{ rotated: node.expanded }">
           <wd-loading v-if="node.loading" size="16" />
           <wd-icon v-else name="arrow-right" size="18px" />
         </text>
-        <text v-else class="dot .dark:color-#fff">
-          •
-        </text>
+        <text v-else class="dot dark:text-white">•</text>
       </view>
 
       <!-- 节点名称 (支持搜索高亮) -->
-      <view class="label-area color-#333 .dark:color-#fff" @click.stop="() => { toggleExpand() }">
+      <view
+        class="label-area text-gray-800 dark:text-white"
+        @click.stop="
+          () => {
+            toggleExpand()
+          }
+        "
+      >
         <text :class="{ highlight: isHighlight }">
           {{ node.label }}
         </text>
@@ -113,34 +122,46 @@ function emitUpdate(e: TreeNode) {
 
       <!-- 操作按钮区域 -->
       <view class="action-area">
-        <view v-if="(node.type === 'branch' || node.type === 'root') && leafRatmplId" class="btn" :style="{ backgroundColor: desaturateColor(currentThemeColor.primary) }" @click.stop="onAddLeaf">
-          <text
-            :style="{ color: currentThemeColor.primary }"
-          >
-            +
-          </text>
+        <view
+          v-if="(node.type === 'branch' || node.type === 'root') && leafRatmplId"
+          class="btn"
+          :style="{ backgroundColor: desaturateColor(currentThemeColor.primary) }"
+          @click.stop="onAddLeaf"
+        >
+          <text :style="{ color: currentThemeColor.primary }">+</text>
         </view>
-        <view v-if="node.type === 'branch' || node.type === 'root'" class="btn" :style="{ backgroundColor: desaturateColor(currentThemeColor.primary) }" @click.stop="onAddBranch">
-          <text
-            class="i-carbon:decision-tree text-3"
-            :style="{ color: currentThemeColor.primary }"
-          />
+        <view
+          v-if="node.type === 'branch' || node.type === 'root'"
+          class="btn"
+          :style="{ backgroundColor: desaturateColor(currentThemeColor.primary) }"
+          @click.stop="onAddBranch"
+        >
+          <text class="i-carbon:decision-tree text-3" :style="{ color: currentThemeColor.primary }" />
         </view>
         <wd-icon
-          class="btn" name="edit" size="28rpx"
-          :style="{ backgroundColor: desaturateColor(currentThemeColor.primary), color: currentThemeColor.primary }" @click.stop="handleEdit"
+          class="btn"
+          name="edit"
+          size="28rpx"
+          :style="{ backgroundColor: desaturateColor(currentThemeColor.primary), color: currentThemeColor.primary }"
+          @click.stop="handleEdit"
         />
-        <text class="btn del" @click.stop="onRemove">
-          －
-        </text>
+        <text class="btn del" @click.stop="onRemove">－</text>
       </view>
     </view>
 
     <!-- 递归渲染子节点 -->
     <view v-if="hasChildren && node.expanded" class="children-container">
       <tree-item
-        v-for="child in node.children" :key="child.id" :node="child" :level="level + 1" :leaf-ratmpl-id="props.leafRatmplId"
-        :search-keyword="searchKeyword" @add-leaf="emitAddLeaf" @add-branch="emitAddBranch" @remove="emitRemove" @update="emitUpdate"
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :level="level + 1"
+        :leaf-ratmpl-id="props.leafRatmplId"
+        :search-keyword="searchKeyword"
+        @add-leaf="emitAddLeaf"
+        @add-branch="emitAddBranch"
+        @remove="emitRemove"
+        @update="emitUpdate"
         @toggle-expand="toggleExpand"
       />
     </view>
@@ -179,7 +200,7 @@ function emitUpdate(e: TreeNode) {
 }
 
 .dot {
-  font-size:60rpx;
+  font-size: 60rpx;
   color: #ddd;
 }