@tplc/wot 0.1.12 → 0.1.14

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.14](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.28...v0.1.14) (2024-10-19)
+
+### [0.1.13](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.27...v0.1.13) (2024-10-10)
+
 ### [0.1.12](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.11...v0.1.12) (2024-09-27)
 
 ### [0.1.11](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.0.26...v0.1.11) (2024-09-27)

package/components/common/abstracts/variable.scss

@@ -43,7 +43,7 @@ $-color-aid: var(--wot-color-aid,
 $-color-tip: var(--wot-color-tip, #bfbfbf) !default; // 失效、默认提示文字 bfbfbf
 $-color-border: var(--wot-color-border, #d9d9d9) !default; // 控件边框线 d9d9d9
 $-color-border-light: var(--wot-color-border-light, #e8e8e8) !default; // 分割线颜色 e8e8e8
-$-color-bg: var(--wot-color-bg, #f5f5f5) !default; // 背景色、禁用填充色 f5f5f5
+$-color-bg: var(--wot-color-bg, #F4F5F7) !default; // 背景色、禁用填充色 f5f5f5
 /* 暗黑模式 */
 $-dark-background: var(--wot-dark-background, #131313) !default;
 $-dark-background2: var(--wot-dark-background2, #1b1b1b) !default;
@@ -58,7 +58,7 @@ $-dark-color3: var(--wot-dark-color3, rgba(232, 230, 227, 0.8)) !default;
 $-dark-color-gray: var(--wot-dark-color-gray, $-color-secondary) !default;
 $-dark-border-color: var(--wot-dark-border-color, #3a3a3c) !default;
 /* 图形颜色 */
-$-color-icon: var(--wot-color-icon, #d9d9d9) !default; // icon颜色
+$-color-icon: var(--wot-color-icon, #969696) !default; // icon颜色
 $-color-icon-active: var(--wot-color-icon-active, #eee) !default; // icon颜色hover
 $-color-icon-disabled: var(--wot-color-icon-disabled, #a7a7a7) !default; // icon颜色disabled
 /*----------------------------------------- Theme color. end -------------------------------------------*/
@@ -618,7 +618,7 @@ $-search-icon-color: var(--wot-search-icon-color, $-color-icon) !default; // 图
 $-search-icon-size: var(--wot-search-icon-size, 18px) !default; // 图标大小
 $-search-clear-icon-size: var(--wot-search-clear-icon-size, $-fs-title) !default; // 清除图标大小
 $-search-placeholder-color: var(--wot-search-placeholder-color,
-  #bfbfbf) !default; // placeholder 颜色
+  #969696) !default; // placeholder 颜色
 $-search-cancel-padding: var(--wot-search-cancel-padding,
   0 $-search-side-padding 0 10px) !default; // 取消按钮间距
 $-search-cancel-fs: var(--wot-search-cancel-fs, $-fs-title) !default; // 取消按钮字号

package/components/composables/useTranslate.ts

@@ -16,7 +16,7 @@ export const useTranslate = (name?: string) => {
   const translate = (key: string, ...args: unknown[]) => {
     const currentMessages = Locale.messages()
     const message = getPropByPath(currentMessages, prefix + key)
-    return isFunction(message) ? message(...args) : message
+    return (isFunction(message) ? message(...args) : message) || key
   }
 
   return { translate }

package/components/wd-img/types.ts

@@ -50,4 +50,6 @@ export const imgProps = {
    * 是否允许预览
    */
   enablePreview: makeBooleanProp(false),
-}
+
+  lazyPlaceWidth: numericProp,
+}

package/components/wd-img/wd-img.vue

@@ -1,10 +1,14 @@
 <template>
   <view :class="rootClass" @click="handleClick" :style="rootStyle">
     <image
-      :class="`wd-img__image ${customImage}`"
-      :style="status !== 'success' ? 'width: 0;height: 0;' : ''"
-      :src="src"
+      :class="`wd-img__image coverImg ${customImage}`"
+      :src="wrapPhoto({ photo: src, width, type: 2 })"
       :mode="mode"
+      :style="
+        status != 'success' && {
+          ...wrapPhoto({ photo: src, width: lazyPlaceWidth }),
+        }
+      "
       :lazy-load="lazyLoad"
       @load="handleLoad"
       @error="handleError"
@@ -22,6 +26,7 @@ export default {
     styleIsolation: 'shared',
   },
 }
+// :style="`${status !== 'success' ? 'width: 0;height: 0;' : ''}`"
 </script>
 
 <script lang="ts" setup>
@@ -69,8 +74,27 @@ function handleLoad(event: Event) {
   status.value = 'success'
   emit('load', event)
 }
+
+function wrapPhoto({ photo, width = 200, otherParams = {}, type = 1 }: any) {
+  const isctyun = photo?.indexOf('.ctyun') >= 0
+  const sym = photo?.indexOf('?') > 0 ? '&' : '?'
+  const suffix = isctyun
+    ? `${sym}x-amz-process=image/resize,w_${width},m_lfit`
+    : `${sym}x-oss-process=image/resize,m_mfit,w_${width}&imageView2/2/w/${width}`
+  const url = `${photo}${width > 0 ? suffix : ''}`
+  return type === 2
+    ? url
+    : photo
+      ? { backgroundImage: `url('${url}')`, ...otherParams }
+      : otherParams
+}
 </script>
 
 <style lang="scss" scoped>
 @import './index.scss';
+
+.coverImg {
+  background-repeat: no-repeat;
+  background-size: cover;
+}
 </style>

package/components/wd-index-anchor/type.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes } from 'vue'
-import { baseProps, makeRequiredProp } from '../common/props'
+import { baseProps, makeRequiredProp, makeStringProp } from '../common/props'
 
 export const indexAnchorProps = {
   ...baseProps,

package/components/wd-index-anchor/wd-index-anchor.vue

@@ -31,6 +31,8 @@ const indexAnchorId = ref<string>(`indexBar${uuid()}`)
 
 const { proxy } = getCurrentInstance()!
 
+const top = ref<number>(0)
+
 const isSticky = computed(() => {
   return indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === props.index
 })
@@ -38,20 +40,22 @@ const isSticky = computed(() => {
 function getInfo() {
   getRect(`#${indexAnchorId.value}`, false, proxy).then((res) => {
     if (isDef(indexBar)) {
-      const anchor = indexBar.anchorState.anchorList.find((v) => v.index === props.index)!
-      anchor.top = Math.floor(res.top!)
+      top.value = Math.floor(res.top!)
     }
   })
 }
 
 onMounted(() => {
-  if (isDef(indexBar)) {
-    indexBar.anchorState.anchorList.push({ top: 0, index: props.index })
-  }
-  getInfo()
+  setTimeout(() => {
+    getInfo()
+  }, 200)
+})
+
+defineExpose({
+  top,
 })
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-index-bar/index.scss

@@ -28,9 +28,9 @@
 
   @include e(index) {
     padding: 4px 6px;
-    font-size: 12px;
+    font-size: 20rpx;
     font-weight: $-fw-medium;
-    color: $-color-title;
+    color: $-color-theme;
 
     @include when(active) {
       color: $-color-theme;

package/components/wd-index-bar/type.ts

@@ -1,13 +1,8 @@
-import type { Ref, InjectionKey, ExtractPropTypes } from 'vue'
+import type { InjectionKey, ExtractPropTypes } from 'vue'
 import { makeBooleanProp } from '../common/props'
 
 export type AnchorIndex = number | string
 
-export interface AnchorItem {
-  top: number
-  index: AnchorIndex
-}
-
 export const indexBarProps = {
   /**
    * @description 索引是否吸顶
@@ -20,7 +15,6 @@ export type IndexBarProps = ExtractPropTypes<typeof indexBarProps>
 export type InderBarProvide = {
   props: { sticky?: boolean }
   anchorState: {
-    anchorList: AnchorItem[] // 锚点列表
     activeIndex: AnchorIndex | null // 当前激活的索引
   }
 }

package/components/wd-index-bar/wd-index-bar.vue

@@ -19,9 +19,9 @@
         @touchcancel.stop.prevent="handleTouchEnd"
       >
         <view
-          class="wd-index-bar__index"
+          class="wd-index-bar__index text-center"
           :class="{ 'is-active': item.index === state.activeIndex }"
-          v-for="item in state.anchorList"
+          v-for="item in children"
           :key="item.index"
         >
           {{ item.index }}
@@ -30,16 +30,18 @@
       <!-- #ifdef MP-DINGTALK -->
     </view>
     <!-- #endif -->
+    <wd-toast />
   </view>
 </template>
 
 <script setup lang="ts">
-import type { AnchorItem, AnchorIndex } from './type'
+import type { AnchorIndex } from './type'
 import { indexBarInjectionKey, indexBarProps } from './type'
-import { ref, getCurrentInstance, onMounted, reactive, nextTick } from 'vue'
+import { ref, getCurrentInstance, onMounted, reactive, nextTick, watch } from 'vue'
 import { getRect, isDef, uuid, requestAnimationFrame } from '../common/util'
 import { useChildren } from '../composables/useChildren'
-
+import { useToast } from '../wd-toast'
+const toast = useToast()
 const props = defineProps(indexBarProps)
 
 const indexBarId = ref<string>(`indexBar${uuid()}`)
@@ -48,13 +50,27 @@ const { proxy } = getCurrentInstance()!
 
 const state = reactive({
   activeIndex: null as AnchorIndex | null,
-  anchorList: [] as AnchorItem[],
 })
 
-const { linkChildren } = useChildren(indexBarInjectionKey)
+const { linkChildren, children } = useChildren(indexBarInjectionKey)
 
 linkChildren({ props, anchorState: state })
 
+watch(
+  () => children,
+  (newValue) => {
+    if (!newValue.length) {
+      state.activeIndex = null // 或者设置为一个默认值，如第一个子项的索引
+      return
+    }
+
+    if (!isDef(state.activeIndex) || !newValue.find((item) => item.index === state.activeIndex)) {
+      state.activeIndex = newValue[0].index
+    }
+  },
+  { deep: true, immediate: true },
+)
+
 const scrollState = reactive({
   scrollTop: 0, // 即将滚动到的位置
   prevScrollTop: 0, // 上次记录的位置
@@ -73,7 +89,6 @@ const sidebarInfo = {
 
 function init() {
   setTimeout(() => {
-    state.activeIndex = state.anchorList[0]?.index
     Promise.all([
       getRect(`#${indexBarId.value}`, false, proxy),
       getRect('.wd-index-bar__sidebar', false, proxy),
@@ -83,7 +98,7 @@ function init() {
       sidebarInfo.offsetTop = sidebar.top!
       sidebarInfo.indexHeight = index.height!
     })
-  }, 100)
+  }, 200)
 }
 
 onMounted(() => {
@@ -96,16 +111,16 @@ function hanleScroll(scrollEvent: any) {
   }
   const { detail } = scrollEvent
   const scrolltop = Math.floor(detail.scrollTop)
-  const anchor = state.anchorList.find((item, index) => {
-    if (!isDef(state.anchorList[index + 1])) return true
+  const anchor = children.find((item, index) => {
+    if (!isDef(children[index + 1])) return true
     if (
-      item.top - offsetTop <= scrolltop &&
-      state.anchorList[index + 1].top - offsetTop > scrolltop
+      item.$.exposed!.top.value - offsetTop <= scrolltop &&
+      children[index + 1].$.exposed!.top.value - offsetTop > scrolltop
     )
       return true
     return false
-  })!
-  if (state.activeIndex !== anchor.index) {
+  })
+  if (isDef(anchor) && state.activeIndex !== anchor.index) {
     state.activeIndex = anchor.index
   }
   scrollState.prevScrollTop = scrolltop
@@ -115,8 +130,8 @@ function getAnchorByPageY(pageY: number) {
   const y = pageY - sidebarInfo.offsetTop
   let idx = Math.floor(y / sidebarInfo.indexHeight)
   if (idx < 0) idx = 0
-  else if (idx > state.anchorList.length - 1) idx = state.anchorList.length - 1
-  return state.anchorList[idx]
+  else if (idx > children.length - 1) idx = children.length - 1
+  return children[idx]
 }
 
 function handleTouchStart() {
@@ -129,13 +144,21 @@ function handleTouchMove(e: TouchEvent) {
     return
   }
   state.activeIndex = getAnchorByPageY(clientY).index
-  setScrollTop(getAnchorByPageY(clientY).top - offsetTop)
+  setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
+}
+function showToast() {
+  if (state.activeIndex)
+    toast.show({
+      msg: `${state.activeIndex}`,
+      duration: 1500,
+    })
 }
 
 function handleTouchEnd(e: TouchEvent) {
   const clientY = e.changedTouches[0].pageY
   state.activeIndex = getAnchorByPageY(clientY).index
-  setScrollTop(getAnchorByPageY(clientY).top - offsetTop)
+  showToast()
+  setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
   requestAnimationFrame(() => {
     scrollState.touching = false
   })
@@ -151,6 +174,17 @@ function setScrollTop(top: number) {
     scrollState.scrollTop = top
   }
 }
+function scrollToIndex(index: AnchorIndex) {
+  const anchor = children.find((item) => item.index === index)
+  state.activeIndex = index
+  showToast()
+  if (anchor) {
+    setScrollTop(anchor.$.exposed!.top.value - offsetTop)
+  }
+}
+defineExpose({
+  scrollToIndex,
+})
 </script>
 
 <style lang="scss" scoped>

package/components/wd-status-tip/wd-status-tip.vue

@@ -44,25 +44,25 @@ const imgUrl = computed(() => {
   let img: string = ''
   switch (props.image) {
     case 'collect':
-      img = 'https://img.wot-design-uni.cn/wdu/collect.png'
+      img = 'https://qdll-lycs.oss-cn-nanjing.aliyuncs.com/staticSaas/basis/collect.png'
       break
     case 'comment':
-      img = 'https://img.wot-design-uni.cn/wdu/comment.png'
+      img = 'https://qdll-lycs.oss-cn-nanjing.aliyuncs.com/staticSaas/basis/comment.png'
       break
     case 'content':
-      img = 'https://img.wot-design-uni.cn/wdu/content.png'
+      img = 'https://qdll-lycs.oss-cn-nanjing.aliyuncs.com/staticSaas/basis/content.png'
       break
     case 'halo':
-      img = 'https://img.wot-design-uni.cn/wdu/halo.png'
+      img = 'https://qdll-lycs.oss-cn-nanjing.aliyuncs.com/staticSaas/basis/halo.png'
       break
     case 'message':
-      img = 'https://img.wot-design-uni.cn/wdu/message.png'
+      img = 'https://qdll-lycs.oss-cn-nanjing.aliyuncs.com/staticSaas/basis/message.png'
       break
     case 'network':
-      img = 'https://img.wot-design-uni.cn/wdu/network.png'
+      img = 'https://qdll-lycs.oss-cn-nanjing.aliyuncs.com/staticSaas/basis/network.png'
       break
     case 'search':
-      img = 'https://img.wot-design-uni.cn/wdu/search.png'
+      img = 'https://qdll-lycs.oss-cn-nanjing.aliyuncs.com/staticSaas/basis/search.png'
       break
     default:
       img = props.image

package/components/wd-toast/index.scss

@@ -49,7 +49,7 @@
     transform: translate3d(0, -40vh, 0);
   }
   @include m(middle) {
-    transform: translate3d(0%, -18.8vh, 0);
+    transform: translate3d(0%, -4vh, 0);
   }
   @include m(bottom) {
     transform: translate3d(0, 40vh, 0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "id": "@tplc/wot",
   "name": "@tplc/wot",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "keywords": [
     "wot-design-uni",
     "国际化",

package/types/components/wd-img/types.d.ts

@@ -62,6 +62,7 @@ export declare const imgProps: {
     type: BooleanConstructor
     default: boolean
   }
+  lazyPlaceWidth: (NumberConstructor | StringConstructor)[]
   customStyle: {
     type: import('vue').PropType<string>
     default: string

package/types/components/wd-img/wd-img.vue.d.ts

@@ -25,6 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<
         type: BooleanConstructor
         default: boolean
       }
+      lazyPlaceWidth: (NumberConstructor | StringConstructor)[]
       customStyle: {
         type: import('vue').PropType<string>
         default: string
@@ -73,6 +74,7 @@ declare const _default: __VLS_WithTemplateSlots<
           type: BooleanConstructor
           default: boolean
         }
+        lazyPlaceWidth: (NumberConstructor | StringConstructor)[]
         customStyle: {
           type: import('vue').PropType<string>
           default: string

package/types/components/wd-index-anchor/wd-index-anchor.vue.d.ts

@@ -16,7 +16,9 @@ declare const __VLS_component: import('vue').DefineComponent<
       default: string
     }
   },
-  {},
+  {
+    top: import('vue').Ref<number>
+  },
   unknown,
   {},
   {},

package/types/components/wd-index-bar/type.d.ts

@@ -1,9 +1,5 @@
 import type { InjectionKey, ExtractPropTypes } from 'vue'
 export type AnchorIndex = number | string
-export interface AnchorItem {
-  top: number
-  index: AnchorIndex
-}
 export declare const indexBarProps: {
   /**
    * @description 索引是否吸顶
@@ -19,7 +15,6 @@ export type InderBarProvide = {
     sticky?: boolean
   }
   anchorState: {
-    anchorList: AnchorItem[]
     activeIndex: AnchorIndex | null
   }
 }

package/types/components/wd-index-bar/wd-index-bar.vue.d.ts

@@ -1,3 +1,5 @@
+import type { AnchorIndex } from './type'
+declare function scrollToIndex(index: AnchorIndex): void
 declare function __VLS_template(): {
   default?(_: {}): any
 }
@@ -8,7 +10,9 @@ declare const __VLS_component: import('vue').DefineComponent<
       default: boolean
     }
   },
-  {},
+  {
+    scrollToIndex: typeof scrollToIndex
+  },
   unknown,
   {},
   {},