wui-components-v2 1.1.65 → 1.1.66

package/components/wui-user/wui-user.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import {
-  useDialog,
-} from '@wot-ui/ui'
+import { computed, ref } from 'vue'
+import { useDialog } from '@wot-ui/ui'
 import { useUser } from '../../composables/useUser'
 import { generateGradientColor } from '../../utils'
 import { useManualTheme } from '../../composables/useManualTheme'
@@ -13,28 +11,38 @@ import { useGlobalToast } from '../../composables/useGlobalToast'
 defineOptions({
   name: 'WuiUser',
 })
-const props= defineProps({
-  loginPath:{
+const props = defineProps({
+  loginPath: {
     type: String,
     default: '/pages/login/index',
-  }
+  },
 })
-const {
-  currentThemeColor,
-} = useManualTheme()
+
+const { currentThemeColor, isDark } = useManualTheme()
+
+// Cell 暗黑样式 - 通过 custom-style 直接注入组件内联样式
+const cellStyle = computed(() => ({
+  backgroundColor: isDark.value ? '#161616' : '#fff',
+  borderBottom: isDark.value ? '1px solid rgba(255,255,255,0.04)' : 'none',
+}))
+
+// CellGroup 暗黑样式
+const cellGroupStyle = computed(() => ({
+  backgroundColor: isDark.value ? '#111111' : 'transparent',
+  borderRadius: isDark.value ? '10px' : '0',
+}))
 const user = useUser().getUserInfo()
 const dialog = useDialog()
 const toast = useGlobalToast()
 const userInfo = ref({
   name: user.name,
   nickName: user.nickName,
-  // viewPersonalInfoable: user.viewPersonalInfoable,
 })
+
 // 退出登录
 function quit() {
   dialog
     .confirm({
-      // msg: '提示文案',
       title: '退出登录',
     })
     .then(() => {
@@ -54,79 +62,85 @@ function setting() {
     url: '/pages/system-settings/index',
   })
 }
- async function clearCache() {
-  // uni.removeStorageSync('userInfo')
-  const res= await getUserConfig();
-  if(res.status=='success') {
+async function clearCache() {
+  const res = await getUserConfig()
+  if (res.status == 'success') {
     toast.success({ msg: '清除成功！' })
     uni.setStorageSync('userInfo', res.user)
   }
 }
-
-// 查看用户信息
-// function goUserInfo() {
-//   uni.navigateTo({
-//     url: `/pages/detail/index?sourceId=${uni.getStorageSync('userInfo').gtmplSourceId}&id=${uni.getStorageSync('userInfo').id}`,
-//   })
-// }
 </script>
 
 <template>
-  <!-- <scan/> -->
   <view class="user">
     <view class="top-box">
       <!-- 用户头部信息 -->
-      <view class="user-header" :style="{ background: generateGradientColor(currentThemeColor.primary, 135, 1, 0.7) }">
+      <view
+        class="user-header"
+        :style="{
+          background: isDark
+            ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
+            : generateGradientColor(currentThemeColor.primary, 135, 1, 0.7),
+          boxShadow: isDark
+            ? '0 2px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05)'
+            : '0 4px 12px rgba(74, 108, 247, 0.25)',
+          border: isDark ? '1px solid rgba(255,255,255,0.06)' : 'none',
+          borderRadius: '10px',
+        }"
+      >
         <view class="user-info">
-          <!-- <img src="user.avatar" class="avatar" alt="用户头像"> -->
-          <image class="avatar" src="./user-avatar-fill.png" />
+          <image
+            class="avatar"
+            src="./user-avatar-fill.png"
+            :style="{ borderColor: isDark ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.3)' }"
+          />
           <view class="user-text">
-            <view class="user-name">
-              {{ userInfo.name }}
-            </view>
-            <view class="user-nickname">
-              昵称：{{ userInfo.nickName }}
-            </view>
+            <view class="user-name">{{ userInfo.name }}</view>
+            <view class="user-nickname">昵称：{{ userInfo.nickName }}</view>
           </view>
         </view>
       </view>
     </view>
 
-    <wd-cell-group>
-      <!-- <wd-cell
-        v-if="userInfo.viewPersonalInfoable" title="个人信息" icon="user" :is-link="true" :clickable="true"
-        @click="goUserInfo"
-      /> -->
-      <!-- <wd-cell title="修改密码" icon="keywords" :is-link="true" :clickable="true"  /> -->
-      <wd-cell title="系统设置" icon="setting" :is-link="true" :clickable="true" @click="setting" />
-       <wd-cell title="清空缓存"  :is-link="true" :clickable="true" @click="clearCache" />
-      <wd-cell title="退出登录" icon="logout" :is-link="true" :clickable="true" @click="quit" />
-    </wd-cell-group>
+    <view class="mx-[15px] rounded-2">
+      <wd-cell-group :custom-style="cellGroupStyle">
+        <wd-cell
+          title="系统设置"
+          icon="setting"
+          :is-link="true"
+          :clickable="true"
+          :custom-style="cellStyle"
+          @click="setting"
+        />
+        <wd-cell title="清空缓存" :is-link="true" :clickable="true" :custom-style="cellStyle" @click="clearCache" />
+        <wd-cell
+          title="退出登录"
+          icon="logout"
+          :is-link="true"
+          :clickable="true"
+          :custom-style="cellStyle"
+          @click="quit"
+        />
+      </wd-cell-group>
+    </view>
     <wd-dialog />
   </view>
 </template>
 
 <style scoped lang="scss">
 .user {
-  // background-color: #f5f5f5;
-  // height: 100vh;
-
   .top-box {
     padding: 15px;
 
     .user-header {
-      border-radius: 10px;
-      margin: auto;
-      background: linear-gradient(135deg, #4a6cf7 0%, #2541b2 100%);
       color: white;
       padding: 30px 20px;
-      box-shadow: 0 4px 12px rgba(74, 108, 247, 0.2);
       position: relative;
       overflow: hidden;
     }
 
     .user-header::before {
-      content: "";
+      content: '';
       position: absolute;
       top: -50px;
       right: -50px;
@@ -137,7 +151,7 @@ function setting() {
     }
 
     .user-header::after {
-      content: "";
+      content: '';
       position: absolute;
       bottom: -80px;
       left: -30px;
@@ -155,13 +169,11 @@ function setting() {
     }
 
     .avatar {
-      width: 140rpx;
-      height: 140rpx;
+      width: 120rpx;
+      height: 120rpx;
       border-radius: 50%;
-      border: 3px solid rgba(255, 255, 255, 0.3);
       margin-right: 15px;
       object-fit: cover;
-      // background-color: #fff;
     }
 
     .user-text {
@@ -181,6 +193,5 @@ function setting() {
       align-items: center;
     }
   }
-
 }
 </style>

package/index.ts

@@ -1,4 +1,7 @@
 import type { App } from 'vue'
+// 暗黑模式样式 - 组件库入口加载（供打包后 app.use() 时生效）
+import './styles/dark-mode.scss'
+
 import WuiSystemSettings from './components/wui-system-settings/wui-system-settings.vue'
 import WuiMenus from './components/wui-menus/wui-menus.vue'
 import WuiMenus1 from './components/wui-menus1/wui-menus.vue'
@@ -24,7 +27,7 @@ import WuiUpdateComponent from './components/wui-update-component/wui-update-com
 import WuiScanBindingSensor from './components/wui-scan-binding-sensor/wui-scan-binding-sensor.vue'
 import WuiUser from './components/wui-user/wui-user.vue'
 import WuiAutoUpdateComponent from './components/wui-auto-update-component/wui-auto-update-component.vue'
-import iData from './utils/idata-scan'// PAD扫描
+import iData from './utils/idata-scan' // PAD扫描
 import wuiSearchHistoryBabbar from './components/wui-search-history-babbar/wui-search-history-babbar.vue'
 import wuienumeSelectControl from './components/wui-enume-select-control/wui-enume-select-control.vue'
 import './static/iconfont/iconfont.css'
@@ -54,7 +57,7 @@ const coms: Array<{ name: string }> = [
  * @param app Vue 应用实例
  */
 function install(app: App): void {
-  coms.forEach((component) => {
+  coms.forEach(component => {
     app.component(component.name, component)
   })
 }
@@ -75,7 +78,6 @@ export {
   iData, // PAD扫描
   // nfc, // nfc读取
   useLanguageStore, // 语言
-
 }
 
 export default install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wui-components-v2",
-  "version": "1.1.65",
+  "version": "1.1.66",
   "description": "wui 组件库",
   "author": "wgxshh",
   "license": "MIT",

package/store/manualThemeStore.ts

@@ -13,16 +13,16 @@ export const useManualThemeStore = defineStore('manualTheme', {
     currentThemeColor: themeColorOptions[0],
     Locale: LocaleOptions[0],
     themeVars: {
-      darkBackground: '#0f0f0f',
-      darkBackground2: '#1a1a1a',
-      darkBackground3: '#242424',
-      darkBackground4: '#2f2f2f',
-      darkBackground5: '#3d3d3d',
+      darkBackground: '#1B1B1E',
+      darkBackground2: '#141414',
+      darkBackground3: '#1c1c1c',
+      darkBackground4: '#262626',
+      darkBackground5: '#333333',
       darkBackground6: '#4a4a4a',
       darkBackground7: '#606060',
       darkColor: '#ffffff',
-      darkColor2: '#e0e0e0',
-      darkColor3: '#a0a0a0',
+      darkColor2: '#e8e8e8',
+      darkColor3: '#999999',
       colorTheme: themeColorOptions[0].primary,
       colorPrimary: themeColorOptions[0].primary, // 添加主色调变量，用于 tabbar 等组件
     },

package/styles/dark-mode.scss

@@ -0,0 +1,424 @@
+/**
+ * 暗黑模式全局样式覆盖
+ * 用于强制覆盖 wot-design-uni 组件内部样式（:deep() 无法穿透的场景）
+ *
+ * 注意：此文件不能使用 scoped，否则无法穿透第三方组件
+ *
+ * @package wui-components-v2
+ *
+ * 使用方式：在项目 main.ts 中 import 此文件
+ *   import 'wui-components-v2/styles/dark-mode'
+ */
+
+/* ====== CSS 变量定义（修正命名不匹配问题）====== */
+/* wot-design-uni 的 kebabCase 转换会把 darkBackground2 → --wot-dark-background-2 */
+/* 但项目中模板引用的是 --wot-dark-background2，需手动补齐 */
+:root,
+.wot-theme-dark {
+  --wot-dark-background: #1b1b1e;
+  --wot-dark-background2: #161616;
+  --wot-dark-background3: #1e1e1e;
+  --wot-dark-background4: #262626;
+  --wot-dark-background5: #333333;
+  --wot-dark-color: #ffffff;
+  --wot-dark-color2: #e8e8e8;
+  --wot-dark-color3: #999999;
+}
+
+/* ====== 暗黑模式下 wot-design-uni 组件内部文字颜色覆盖 ====== */
+.wot-theme-dark {
+  /* Cell 组件 */
+  .wd-cell__title {
+    color: #e8e8e8 !important;
+  }
+
+  .wd-cell__right {
+    color: #666666 !important;
+  }
+
+  .wd-cell__icon {
+    color: #666666 !important;
+  }
+
+  /* CellGroup */
+  .wd-cell-group {
+    background-color: #111111 !important;
+  }
+
+  .wd-cell {
+    background-color: #161616 !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
+
+    &:active {
+      background-color: #1b1b1e !important;
+    }
+  }
+
+  /* Switch 开关 */
+  .wd-switch__node {
+    background-color: #3d3d3d !important;
+  }
+
+  .wd-switch__node--checked {
+    background-color: var(--wot-color-primary, #2164f3) !important;
+  }
+
+  /* Input 输入框 */
+  .wd-input {
+    --wot-input-bg: #252530;
+    --wot-input-inner-color: #e8e8e8;
+    --wot-input-inner-placeholder-color: #fff;
+  }
+
+  /* 原生 input 元素 - 必须用 uni- 前缀类名才能在小程序中命中 */
+  .uni-input-input,
+  .wd-input__input,
+  .wd-input.is-compact .uni-input-input {
+    color: var(--wot-input-inner-color, #e8e8e8) !important;
+    caret-color: var(--wot-color-primary, #2164f3) !important;
+    background-color: transparent !important;
+  }
+
+  .uni-input-placeholder,
+  .wd-input__placeholder,
+  .wd-input.is-compact .uni-input-placeholder {
+    color: #fff !important;
+  }
+
+  /* Form 表单 */
+  .wd-form {
+    background-color: transparent;
+  }
+
+  .wd-form-item {
+    background-color: transparent !important;
+
+    .wd-cell {
+      background-color: transparent !important;
+    }
+  }
+
+  .wd-form-item__label,
+  .wd-form-item__title {
+    color: var(--wot-dark-color2, #e8e8e8) !important;
+  }
+
+  .wd-form-item__body {
+    background-color: transparent;
+  }
+
+  /* Button 按钮 */
+  .wd-button--primary {
+    --wd-button-primary-bg-color: var(--wot-color-primary, #2164f3) !important;
+  }
+
+  /* Popup 弹窗 */
+  .wd-popup {
+    background-color: transparent !important;
+  }
+
+  .wd-popup__container {
+    background-color: #161616 !important;
+  }
+
+  .wd-popup__body {
+    background-color: #1b1b1e !important;
+  }
+
+  /* ActionSheet */
+  .wd-action-sheet {
+    background-color: #161616 !important;
+  }
+
+  .wd-action-sheet__title {
+    color: var(--wot-dark-color, #fff) !important;
+  }
+
+  .wd-action-sheet__item {
+    color: var(--wot-dark-color2, #e0e0e0) !important;
+  }
+
+  /* SelectPicker 选择器弹窗 */
+  .wd-select-picker__wrapper {
+    background-color: #1b1b1e;
+  }
+
+  .wd-select-picker__popup {
+    background-color: #161616 !important;
+  }
+
+  .wd-select-picker__checkbox-label,
+  .wd-select-picker__radio-label {
+    color: var(--wot-dark-color2, #e8e8e8) !important;
+  }
+
+  .wd-select-picker__text-active {
+    color: var(--wot-color-primary, #2164f3) !important;
+  }
+
+  .wd-select-picker__footer {
+    background-color: #161616;
+  }
+
+  /* Calendar 日历选择器弹窗 */
+  .wd-calendar__wrapper {
+    background-color: #1b1b1e;
+  }
+
+  .wd-calendar__popup {
+    background-color: #161616 !important;
+  }
+
+  .wd-calendar__header {
+    color: var(--wot-dark-color, #fff);
+  }
+
+  /* Calendar 日历日期单元格暗黑适配（覆盖 wot-design-uni 内部变量）*/
+  .wd-calendar__view,
+  .wd-month-panel {
+    --wot-calendar-view-day-color: #e8e8e8;           /* 日期数字 */
+    --wot-calendar-view-week-color: #999999;          /* 星期头（日一二三四五六） */
+    --wot-calendar-view-panel-title-color: #ccc;       /* 面板标题（2026年6月） */
+    --wot-calendar-view-control-icon-color: #aaa;      /* 左右箭头图标 */
+    --wot-calendar-view-control-color-disabled: #444;  /* 禁用箭头 */
+    --wot-calendar-view-color-disabled: #555555;        /* 禁用/不可选日期 */
+    --wot-calendar-view-time-picker-color: #e8e8e8;     /* 时间选择器文字 */
+    --wot-calendar-view-time-picker-bg: #252530;       /* 时间选择器背景 */
+    --wot-calendar-view-range-color: #e8e8e8;          /* 区间模式文字色 */
+    background-color: transparent !important;
+  }
+
+  .wd-calendar__tabs {
+    color: var(--wot-dark-color3, #999999) !important;
+  }
+
+  .wd-calendar__shortcuts {
+    border-bottom-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .wd-calendar__view {
+    background-color: transparent;
+    color: var(--wot-dark-color2, #e8e8e8);
+  }
+
+  .wd-calendar__range-item.is-placeholder {
+    color: var(--wot-dark-color3, #666666) !important;
+  }
+
+  .wd-calendar__range-separator {
+    color: var(--wot-dark-color3, #666666) !important;
+  }
+
+  /* YearPanel 年份选择器 */
+  .wd-year-panel {
+    --wot-calendar-bg: #1b1b1e;
+    --wot-picker-view-bg: #1b1b1e;
+    background-color: #1b1b1e;
+  }
+
+  .wd-picker-view {
+    --wot-picker-view-bg: #1b1b1e;
+    --wot-picker-view-mask-start-color: rgba(0, 0, 0, 0.85);
+    --wot-picker-view-mask-end-color: rgba(0, 0, 0, 0.2);
+    --wot-picker-view-roller-bg: #2a2a30;
+    --wot-picker-view-column-item-color: #e8e8e8;
+    background-color: #1b1b1e;
+  }
+
+  /* picker-view 滚轮遮罩 - 暗黑模式下去掉白色渐变 */
+  .wd-picker-view__mask {
+    background-image:
+      linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.2)),
+      linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.2)) !important;
+  }
+
+  .wd-picker-view__roller {
+    background-color: #2a2a30 !important;
+  }
+
+  .wd-picker-view__column-item {
+    color: #e8e8e8 !important;
+  }
+
+  .wd-picker-view__column-item--active {
+    color: var(--wot-dark-color, #fff) !important;
+  }
+
+  .wd-year-panel__text {
+    color: var(--wot-dark-color2, #e8e8e8);
+  }
+
+  .wd-year-panel__item.is-active .wd-year-panel__text,
+  .wd-year-panel__item.is-active {
+    color: var(--wot-color-primary, #2164f3) !important;
+  }
+
+  /* DateTimePicker 时间选择器弹窗 */
+  .wd-datetime-picker__wrapper {
+    background-color: #1b1b1e;
+    color: var(--wot-dark-color2, #e8e8e8);
+  }
+
+  .wd-datetime-picker__popup {
+    background-color: #161616 !important;
+  }
+
+  &::after {
+    background-color: transparent !important;
+  }
+
+  /* Toast / Notify */
+  .wd-toast {
+    color: #fff !important;
+  }
+
+  /* Picker */
+  .wd-picker__title,
+  .wd-picker__toolbar {
+    color: var(--wot-dark-color2, #e0e0) !important;
+  }
+
+  /* Dialog */
+  .wd-dialog {
+    color: var(--wot-dark-color2, #e0e0e0) !important;
+  }
+
+  .wd-dialog__header {
+    color: var(--wot-dark-color, #fff) !important;
+  }
+
+  /* Loading */
+  .wd-loading-text {
+    color: var(--wot-dark-color3, #a0a0a0) !important;
+  }
+
+  /* Tag 标签 */
+  .wd-tag {
+    color: #fff !important;
+  }
+
+  /* Collapse 折叠面板 */
+  .wd-collapse {
+    background-color: transparent !important;
+  }
+
+  .wd-collapse-item__title {
+    color: var(--wot-dark-color2, #e0e0e0) !important;
+  }
+
+  /* Tabbar tab栏 */
+  .wd-tabbar {
+    background-color: #111111 !important;
+    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
+  }
+
+  /* 未选中：白色 */
+  .wd-tabbar-item {
+    color: #ffffff;
+  }
+  .wd-tabbar-item__body .is-inactive {
+    color: #ffffff !important;
+  }
+
+  /* 选中态：蓝色（同权重，后定义覆盖前） */
+  .wd-tabbar-item--active {
+    color: var(--wot-color-primary, #2164f3) !important;
+  }
+  .wd-tabbar-item--active .wd-icon,
+  .wd-tabbar-item--active .wd-tabbar-item__icon {
+    color: var(--wot-color-primary, #2164f3) !important;
+  }
+  .wd-tabbar-item--active .wd-tabbar-item__body-title {
+    color: var(--wot-color-primary, #2164f3) !important;
+  }
+
+  /* Navbar 导航栏 */
+  .wd-navbar {
+    background-color: #1b1b1e !important;
+  }
+
+  /* Cell 右侧箭头图标 */
+  .wd-cell__arrow {
+    color: #555555 !important;
+  }
+
+  /* Cell 左侧图标 */
+  .wd-cell__left-icon {
+    color: #e0e0e0 !important;
+  }
+
+  /* Card 卡片 - 菜单卡片暗黑背景 */
+  .wd-card {
+    background: linear-gradient(180deg, #1e1e23 0%, #19191e 100%) !important;
+    box-shadow:
+      0 8rpx 32rpx rgba(0, 0, 0, 0.25),
+      0 2rpx 8rpx rgba(0, 0, 0, 0.15) !important;
+    border-color: rgba(255, 255, 255, 0.06) !important;
+  }
+
+  .wd-card__title {
+    color: #f9fafb !important;
+  }
+
+  /* Grid 网格 */
+  .wd-grid-item__text,
+  .wd-grid-item__content text {
+    color: #e5e7eb !important;
+  }
+
+  /* Grid 图标区域 - 去掉白色背景 */
+  .wd-grid-item__wrapper,
+  .wd-grid-item__content {
+    background-color: transparent !important;
+  }
+
+  .wd-grid-item {
+    background-color: transparent !important;
+  }
+
+  /* 快速访问区域（section-menus） */
+  .recent-section {
+    background-color: #1e1e23 !important;
+    box-shadow:
+      0 4px 16px rgba(0, 0, 0, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid rgba(255, 255, 255, 0.06) !important;
+  }
+
+  .recent-label {
+    color: #d1d5db !important;
+  }
+
+  /* 非TabBar区域内的普通图标（排除tabbar避免干扰选中态） */
+  .wd-cell .wd-icon,
+  .wd-navbar .wd-icon,
+  .wd-button .wd-icon {
+    color: #e0e0e0 !important;
+
+    svg,
+    path {
+      fill: currentColor !important;
+      color: currentColor !important;
+    }
+  }
+
+  /* Search 搜索栏 */
+  .wd-search,
+  .wd-search.is-light,
+  .wd-search.is-plain {
+    background: transparent !important;
+    --wot-search-input-bg: #252530 !important;
+    --wot-search-cover-bg: #252530 !important;
+    --wot-search-placeholder-color: #666666 !important;
+    --wot-search-cancel-color: var(--wot-color-primary, #2164f3) !important;
+    --wot-search-icon-color: #888888 !important;
+
+    .wd-search__block {
+      background-color: #252530 !important;
+    }
+
+    .wd-search__cover {
+      background-color: #252530 !important;
+    }
+  }
+}