@tplc/wot 0.1.12 → 0.1.13

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.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/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,14 +1,9 @@
 <template>
   <view :class="rootClass" @click="handleClick" :style="rootStyle">
-    <image
-      :class="`wd-img__image ${customImage}`"
-      :style="status !== 'success' ? 'width: 0;height: 0;' : ''"
-      :src="src"
-      :mode="mode"
-      :lazy-load="lazyLoad"
-      @load="handleLoad"
-      @error="handleError"
-    />
+    <image :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" />
     <slot v-if="status === 'loading'" name="loading"></slot>
     <slot v-if="status === 'error'" name="error"></slot>
   </view>
@@ -22,6 +17,7 @@ export default {
     styleIsolation: 'shared',
   },
 }
+//:style="`${status !== 'success' ? 'width: 0;height: 0;' : ''}`"
 </script>
 
 <script lang="ts" setup>
@@ -69,8 +65,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,9 +1,10 @@
 import type { ExtractPropTypes } from 'vue'
-import { baseProps, makeRequiredProp } from '../common/props'
+import { baseProps, makeRequiredProp, makeStringProp } from '../common/props'
 
 export const indexAnchorProps = {
   ...baseProps,
   index: makeRequiredProp([String, Number]),
+  hint: makeStringProp(''),
 }
 
 export type IndexAnchorProps = ExtractPropTypes<typeof indexAnchorProps>

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

@@ -8,7 +8,7 @@
       :id="indexAnchorId"
     >
       <slot>
-        {{ index }}
+        {{ hint || index }}
       </slot>
     </view>
     <!-- #ifdef MP-DINGTALK -->
@@ -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,20 @@ 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()
 })
+
+defineExpose({
+  top,
+})
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

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

@@ -21,7 +21,7 @@
         <view
           class="wd-index-bar__index"
           :class="{ 'is-active': item.index === state.activeIndex }"
-          v-for="item in state.anchorList"
+          v-for="item in children"
           :key="item.index"
         >
           {{ item.index }}
@@ -34,9 +34,9 @@
 </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'
 
@@ -48,13 +48,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 +87,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),
@@ -96,16 +109,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 +128,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 +142,13 @@ function handleTouchMove(e: TouchEvent) {
     return
   }
   state.activeIndex = getAnchorByPageY(clientY).index
-  setScrollTop(getAnchorByPageY(clientY).top - offsetTop)
+  setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
 }
 
 function handleTouchEnd(e: TouchEvent) {
   const clientY = e.changedTouches[0].pageY
   state.activeIndex = getAnchorByPageY(clientY).index
-  setScrollTop(getAnchorByPageY(clientY).top - offsetTop)
+  setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
   requestAnimationFrame(() => {
     scrollState.touching = false
   })

package/package.json

@@ -1,7 +1,7 @@
 {
   "id": "@tplc/wot",
   "name": "@tplc/wot",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "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/type.d.ts

@@ -4,6 +4,10 @@ export declare const indexAnchorProps: {
     type: (NumberConstructor | StringConstructor)[]
     required: true
   }
+  hint: {
+    type: import('vue').PropType<string>
+    default: string
+  }
   customStyle: {
     type: import('vue').PropType<string>
     default: string

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

@@ -7,6 +7,10 @@ declare const __VLS_component: import('vue').DefineComponent<
       type: (NumberConstructor | StringConstructor)[]
       required: true
     }
+    hint: {
+      type: import('vue').PropType<string>
+      default: string
+    }
     customStyle: {
       type: import('vue').PropType<string>
       default: string
@@ -16,7 +20,9 @@ declare const __VLS_component: import('vue').DefineComponent<
       default: string
     }
   },
-  {},
+  {
+    top: import('vue').Ref<number>
+  },
   unknown,
   {},
   {},
@@ -31,6 +37,10 @@ declare const __VLS_component: import('vue').DefineComponent<
         type: (NumberConstructor | StringConstructor)[]
         required: true
       }
+      hint: {
+        type: import('vue').PropType<string>
+        default: string
+      }
       customStyle: {
         type: import('vue').PropType<string>
         default: string
@@ -44,6 +54,7 @@ declare const __VLS_component: import('vue').DefineComponent<
   {
     customStyle: string
     customClass: string
+    hint: string
   },
   {}
 >

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
   }
 }