wui-components-v2 1.1.4 → 1.1.6

package/components/wui-auto-update-component/wui-auto-update-component.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, defineEmits, onBeforeMount, ref } from 'vue'
+import WuiUpdateComponent from '../wui-update-component/wui-update-component.vue'
+
+defineOptions({
+  name: 'WuiAutoUpdateComponent',
+})
+const prop = defineProps({
+  hydrocarbonProgramToken: {
+    type: String,
+    default: '',
+  },
+  baseUrl: {
+    type: String,
+    default: '',
+  },
+  sourceId: {
+    type: String,
+    default: '',
+  },
+  appId: {
+    type: String,
+    default: '',
+  },
+})
+const entities = ref([])
+// 弹窗开关
+const show = ref(false)
+
+const isUpdate = ref(0)
+// 当前版本
+const currentVersion = ref('')
+
+// 最新版本
+const latestVersion = ref('')
+
+// 弹框进入时检查更新
+async function beforeEnter() {
+  // 获取当前应用版本号
+  const v1 = await new Promise<string>((resolve, reject) => {
+    plus.runtime.getProperty(plus.runtime.appid || '', (widgetInfo) => {
+      resolve(widgetInfo.version || '')
+    })
+    console.log(reject)
+  })
+  currentVersion.value = v1
+  // 获取接口最新版本号
+  uni.request({
+    url:
+      `${prop.baseUrl
+      }/v3/mstruc/data?sourceId=${prop.sourceId}&depth=1&sortColIds=创建时间_DESC&pageNo=1&pageSize=1&c_app编码_equals=${prop.appId}&c_标记删除_equals=否`,
+    method: 'GET',
+    header: {
+      'hydrocarbon-program-token': prop.hydrocarbonProgramToken,
+    },
+    success: (res: any) => {
+      if (res.statusCode === 200) {
+        if (res.data.entities.length > 0) {
+          latestVersion.value = res.data.entities[0]['版本号'] // 最新版本号
+          isUpdate.value = compareVersions(currentVersion.value, latestVersion.value) // 比较版本号
+          if (isUpdate.value !== 0) {
+            show.value = true// 显示弹窗
+          }
+          entities.value = res.data.entities // 获取接口数据
+        }
+      }
+    },
+    fail: (err) => {
+      console.log('接口版本err：', err)
+    },
+  })
+}
+
+onBeforeMount(() => {
+  // #ifdef APP-PLUS
+  beforeEnter()
+  // #endif
+})
+
+// 版本号比对 1:大于当前版本，-1：小于当前版本，0：版本号相同
+function compareVersions(v1: string, v2: string) {
+  // 接口版本
+  const v2Parts = v2.split('.').map(Number)
+  // 本地版本
+  const v1Parts = v1.split('.').map(Number)
+  for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
+    const part1 = v1Parts[i] || 0
+    const part2 = v2Parts[i] || 0
+    if (part1 !== part2)
+      return part1 < part2 ? 1 : -1
+  }
+  return 0
+}
+</script>
+
+<template>
+  <WuiUpdateComponent
+    :show="show" :app-id="prop.appId" :hydrocarbon-program-token="prop.hydrocarbonProgramToken"
+    :base-url="prop.baseUrl" :source-id="prop.sourceId"
+  />
+</template>
+
+<style lang="scss" scoped>
+.updateBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 600rpx;
+  min-height: 200rpx;
+  padding: 32rpx;
+  background-color: #fff;
+  border-radius: 32rpx;
+
+  .calc {
+    width: 550rpx;
+    margin-top: 40rpx;
+    text-align: center;
+  }
+}
+
+.loadingBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 600rpx;
+  height: 200rpx;
+  padding: 32rpx;
+  background-color: #fff;
+  border-radius: 32rpx;
+}
+</style>

package/components/wui-login/wui-login.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defineOptions, defineProps } from 'vue'
 import LoginForm from '../login-form/login-form.vue'
+import { useManualTheme } from '../../composables/useManualTheme'
 
 defineOptions({
   name: 'WuiLogin',
@@ -8,10 +9,13 @@ defineOptions({
 defineProps<{
   loginlog: any
 }>()
+const {
+  currentThemeColor,
+} = useManualTheme()
 </script>
 
 <template>
-  <view class="h-[calc(100vh-44px)] flex flex-col bg-#4E7FFF .dark:bg-[--wot-dark-background9]">
+  <view class="h-[calc(100vh-44px)] flex flex-col .dark:bg-[--wot-dark-background9]" :style="{ backgroundColor: currentThemeColor.primary }">
     <!-- <view class="flex flex-col items-center justify-center pa-3 pb-5">
       <wd-img :width="100" :height="100" round :src="loginlog" />
       <view class="text-center">

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

@@ -7,6 +7,8 @@ import { menu } from '../../api/menu'
 import DemoCard from '../demo-card/demo-card.vue'
 import { useManualTheme } from '../../composables/useManualTheme'
 import { useGlobalToast } from '../../composables/useGlobalToast'
+import { useUser } from '../../composables/useUser'
+import { formatChineseDate, generateGradientColor } from '../../utils'
 
 defineOptions({
   name: 'WuiMenus',
@@ -21,6 +23,7 @@ const props = defineProps({
     default: () => { },
   },
 })
+const user = useUser().getUserInfo()
 const router = useRouter()
 const toast = useGlobalToast()
 interface Icon {
@@ -166,10 +169,32 @@ function queryList() {
 <template>
   <z-paging ref="paging" v-model="menuList" :loading-more-enabled="false" @query="queryList" @on-refresh="props.load">
     <template #top>
-      <slot name="top" />
+      <slot name="top" :style="{ background: currentThemeColor.primary }" />
     </template>
-    <view>
-      <view class="h-3" />
+    <view class="position-relative">
+      <view style="box-sizing: border-box; padding: 20px; position: absolute;z-index: -1; height: 350rpx;width: 100%; background: linear-gradient( 180deg, #2094FF 0%, rgba(32,148,255,0.3) 100%);" :style="{ background: generateGradientColor(currentThemeColor.primary) }">
+        <view class="flex items-center gap-2 color-white">
+          <image
+            class="h-10 w-10 border-rd-100%"
+            style="border:2px solid #fff;"
+            src="../../static/hader.png"
+            mode="scaleToFill"
+          />
+          <view>
+            <view>你好,{{ user.name }}</view>
+          </view>
+        </view>
+        <view style="padding: 20rpx 0;" class="color-white">
+          {{ formatChineseDate() }}
+        </view>
+      </view>
+      <image
+        class="h-30 w-50"
+        style="position: absolute;z-index: -1;top: 0; right: 0;"
+        src="../../static/home.png"
+        mode="scaleToFill"
+      />
+      <view class="h-3 p-12" />
       <DemoCard v-for="(item, index) in filtermenu" :key="index" :title="item.title">
         <template #content>
           <view class="border-rd-2 bg-white pa-1 dark:bg-[var(--wot-dark-background2)]">

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

@@ -4,11 +4,15 @@ import {
   useMessage,
 } from 'wot-design-uni'
 import { useUser } from '../../composables/useUser'
+import { generateGradientColor } from '../../utils'
+import { useManualTheme } from '../../composables/useManualTheme'
 
 defineOptions({
   name: 'WuiUser',
 })
-
+const {
+  currentThemeColor,
+} = useManualTheme()
 const user = useUser().getUserInfo()
 const message = useMessage()
 const userInfo = ref({
@@ -53,7 +57,7 @@ function setting() {
   <view class="user">
     <view class="top-box">
       <!-- 用户头部信息 -->
-      <view class="user-header">
+      <view class="user-header" :style="{ background: generateGradientColor(currentThemeColor.primary, 135, 1, 0.7) }">
         <view class="user-info">
           <!-- <img src="user.avatar" class="avatar" alt="用户头像"> -->
           <image class="avatar" src="./user-avatar-fill.png" />

package/index.ts

@@ -20,6 +20,7 @@ import WuidetailsPage from './components/wui-details-page/wui-details-page.vue'
 import WuiUpdateComponent from './components/wui-update-component/wui-update-component.vue'
 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'
 // 组件列表
 const coms: Array<{ name: string }> = [
   WuiSystemSettings,
@@ -34,6 +35,7 @@ const coms: Array<{ name: string }> = [
   WuiUpdateComponent,
   WuiScanBindingSensor,
   WuiUser,
+  wuiAutoUpdateComponent,
 ]
 
 /**

package/package.json

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

package/utils/index.ts

@@ -309,3 +309,98 @@ function toArray(value: string) {
   }
   return val
 }
+
+/**
+ * 根据目标颜色生成渐变色字符串
+ * @param color - 目标颜色，可以是十六进制颜色或RGB颜色
+ * @param angle - 渐变角度，默认为180deg
+ * @param startOpacity - 起始透明度，默认为1(不透明)
+ * @param endOpacity - 结束透明度，默认为0.3
+ * @returns 渐变色字符串
+ */
+export function generateGradientColor(
+  color: string,
+  angle: number = 180,
+  startOpacity: number = 1,
+  endOpacity: number = 0.3,
+): string {
+  // 处理十六进制颜色转换为RGB
+  const hexToRgb = (hex: string): { r: number, g: number, b: number } | null => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return result
+      ? {
+          r: Number.parseInt(result[1], 16),
+          g: Number.parseInt(result[2], 16),
+          b: Number.parseInt(result[3], 16),
+        }
+      : null
+  }
+
+  // 将RGB颜色转换为rgba格式
+  const toRgba = (color: string, opacity: number): string => {
+    if (color.startsWith('#')) {
+      const rgb = hexToRgb(color)
+      if (rgb) {
+        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`
+      }
+    }
+    else if (color.startsWith('rgb(')) {
+      // 处理rgb()格式
+      const rgbValues = color.match(/\d+/g)
+      if (rgbValues && rgbValues.length === 3) {
+        return `rgba(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]}, ${opacity})`
+      }
+    }
+    // 如果已经是rgba或其他格式，直接返回带透明度的版本
+    return color.replace(/rgb\(/, 'rgba(').replace(/\)/, `, ${opacity})`)
+  }
+
+  // 生成渐变色字符串
+  const startColor = color.startsWith('rgba') ? color : toRgba(color, startOpacity)
+  const endColor = toRgba(color, endOpacity)
+
+  return `linear-gradient(${angle}deg, ${startColor} 0%, ${endColor} 100%)`
+}
+
+// 使用示例
+// console.log(generateGradientColor('#2094FF'));
+// 输出: linear-gradient(180deg, rgba(32,148,255,1) 0%, rgba(32,148,255,0.3) 100%)
+
+// console.log(generateGradientColor('#2094FF', 90, 0.8, 0.1));
+// 输出: linear-gradient(90deg, rgba(32,148,255,0.8) 0%, rgba(32,148,255,0.1) 100%)
+
+/**
+ * 格式化日期显示
+ * @param date - 要格式化的日期，默认为当前日期
+ * @returns 格式化后的日期字符串，如"2025年9月25日 周四 下午"
+ */
+export function formatChineseDate(date: Date = new Date()): string {
+  // 年份
+  const year = date.getFullYear()
+
+  // 月份（月份从0开始，需要+1）
+  const month = date.getMonth() + 1
+
+  // 日期
+  const day = date.getDate()
+
+  // 星期几
+  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  const weekday = weekdays[date.getDay()]
+
+  // 上午/下午判断
+  const hour = date.getHours()
+  const period = hour < 12 ? '上午' : '下午'
+
+  return `${year}年${month}月${day}日 ${weekday} ${period}`
+}
+
+// 使用示例
+// console.log(formatChineseDate(new Date(2025, 8, 25)));
+// 输出: 2025年9月25日 周四 下午
+
+// console.log(formatChineseDate(new Date(2025, 8, 25, 10, 30)));
+// 输出: 2025年9月25日 周四 上午
+
+// console.log(formatChineseDate());
+// 输出当前日期的格式化结果