hy-app 0.4.11 → 0.4.12

package/components/hy-folding-panel-item/hy-folding-panel-item.vue

@@ -0,0 +1,228 @@
+<template>
+  <view class="hy-folding-panel-item">
+    <HyCell
+      :title="title"
+      :value="value"
+      :icon="icon"
+      :border="border"
+      :size="size"
+      :disabled="disabled"
+      :clickable="!disabled"
+      @click="handleClick"
+    >
+      <template #icon="{ icon }">
+        <slot name="icon" :icon="icon"></slot>
+      </template>
+      <template #title="{ title }">
+        <slot name="title" :title="title">{{ title }}</slot>
+      </template>
+      <template #value="{ value }">
+        <slot name="value" :value="value">
+          <text v-if="value">{{ value }}</text>
+          <text v-else class="hy-folding-panel-item__arrow" :class="{ 'hy-folding-panel-item__arrow--up': spread }">
+            {{ spread ? '↑' : '↓' }}
+          </text>
+        </slot>
+      </template>
+      <template #bottom>
+        <transition name="hy-folding-panel-item__transition">
+          <view
+            v-show="spread"
+            class="hy-folding-panel-item__content"
+            :style="[
+              customStyle,
+              { height: contentHeight }
+            ]"
+          >
+            <slot />
+          </view>
+        </transition>
+        <HyLine v-if="spread && showBottomLine" />
+      </template>
+    </HyCell>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-folding-panel-item",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, inject } from "vue";
+import type { CSSProperties } from "vue";
+import { addUnit } from "../../libs";
+import HyCell from "../hy-cell/hy-cell.vue";
+import HyLine from "../hy-line/hy-line.vue";
+
+interface IProps {
+  /** 标题 */
+  title?: string;
+  /** 标题左侧的图标 */
+  icon?: string;
+  /** 右侧的值 */
+  value?: string;
+  /** 是否显示下边框 */
+  border?: boolean;
+  /** 单元的大小 */
+  size?: "large" | "medium" | "small";
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 内容面板高度 */
+  contentHeight?: string | number;
+  /** 是否默认展开 */
+  defaultOpen?: boolean;
+  /** 是否显示底部线条 */
+  showBottomLine?: boolean;
+  /** 定义需要用到的外部样式 */
+  customStyle?: CSSProperties;
+  /** 面板索引（由父组件提供） */
+  index?: number;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  title: "",
+  icon: "",
+  value: "",
+  border: true,
+  size: "medium",
+  disabled: false,
+  contentHeight: 120,
+  defaultOpen: false,
+  showBottomLine: true,
+  customStyle: () => ({}),
+  index: -1,
+});
+
+const emit = defineEmits<{
+  (e: "click", value: boolean): void;
+  (e: "open"): void;
+  (e: "close"): void;
+  // 用于手风琴模式的特殊事件
+  (e: "child-click", index: number, isOpen: boolean): void;
+}>();
+
+// 尝试从父组件注入手风琴模式配置
+const accordion = inject<boolean>('hy-folding-panel-accordion', false);
+
+const spread = ref(props.defaultOpen);
+const contentHeight = computed(() => {
+  return typeof props.contentHeight === 'number' 
+    ? `${props.contentHeight}px` 
+    : props.contentHeight;
+});
+
+// 监听默认展开状态
+watch(
+  () => props.defaultOpen,
+  (newValue) => {
+    spread.value = newValue;
+  },
+  { immediate: true }
+);
+
+// 处理点击事件
+const handleClick = () => {
+  if (props.disabled) return;
+  
+  spread.value = !spread.value;
+  emit("click", spread.value);
+  
+  // 向父组件通知子组件点击事件（用于手风琴模式）
+  if (props.index >= 0) {
+    emit('child-click', props.index, spread.value);
+  }
+  
+  if (spread.value) {
+    emit("open");
+  } else {
+    emit("close");
+  }
+};
+
+// 提供给父组件控制展开/收起的方法
+defineExpose({
+  open: () => {
+    if (!props.disabled && !spread.value) {
+      spread.value = true;
+      emit("click", true);
+      emit("open");
+      
+      // 通知父组件
+      if (props.index >= 0) {
+        emit('child-click', props.index, true);
+      }
+    }
+  },
+  close: () => {
+    if (!props.disabled && spread.value) {
+      spread.value = false;
+      emit("click", false);
+      emit("close");
+      
+      // 通知父组件
+      if (props.index >= 0) {
+        emit('child-click', props.index, false);
+      }
+    }
+  },
+  toggle: () => {
+    handleClick();
+  },
+  getSpread: () => spread.value,
+});
+
+// 组件挂载时，如果是手风琴模式且默认打开，通知父组件
+onMounted(() => {
+  if (spread.value && accordion && props.index >= 0) {
+    emit('child-click', props.index, true);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+
+.hy-folding-panel-item {
+  &__arrow {
+    font-size: 16px;
+    color: #999;
+    transition: transform 0.3s;
+    
+    &--up {
+      transform: rotate(0deg);
+    }
+  }
+  
+  &__content {
+    padding: 12px 16px;
+    box-sizing: border-box;
+    overflow: hidden;
+    background-color: #f8f8f8;
+  }
+  
+  &__transition-enter-active,
+  &__transition-leave-active {
+    transition: all 0.3s ease;
+    overflow: hidden;
+  }
+  
+  &__transition-enter-from,
+  &__transition-leave-to {
+    opacity: 0;
+    max-height: 0;
+  }
+  
+  &__transition-enter-to,
+  &__transition-leave-from {
+    opacity: 1;
+    max-height: 1000px; /* 足够大的值，确保内容能完全展开 */
+  }
+}
+</style>

package/components/hy-watermark/hy-watermark.vue

@@ -220,6 +220,7 @@ function doInit() {
     image,
     imageHeight,
     imageWidth,
+    title
   } = props;
 
   // 创建水印
@@ -238,6 +239,7 @@ function doInit() {
     image,
     imageHeight,
     imageWidth,
+    title
   );
 }
 
@@ -257,6 +259,7 @@ function doInit() {
  * @param image canvas图片
  * @param imageHeight canvas图片高度
  * @param imageWidth canvas图片宽度
+ * @param title 标题
  */
 function createWaterMark(
   width: number,
@@ -273,6 +276,7 @@ function createWaterMark(
   image: string,
   imageHeight: number,
   imageWidth: number,
+  title: string,
 ) {
   const canvasHeight = (height + gutterY) * pixelRatio.value;
   const canvasWidth = (width + gutterX) * pixelRatio.value;
@@ -299,7 +303,7 @@ function createWaterMark(
       image,
       imageHeight,
       imageWidth,
-      props.title,
+      title,
       titleFontSize
     );
   } else {
@@ -313,7 +317,7 @@ function createWaterMark(
       image,
       imageHeight,
       imageWidth,
-      props.title,
+      title,
       titleFontSize
     );
   }
@@ -334,7 +338,7 @@ function createWaterMark(
     image,
     imageHeight,
     imageWidth,
-    props.title,
+    title,
     titleFontSize
   );
   // #endif

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.4.11",
-  "description": "feat: 水印图片和文字同时存在并且加上title字段",
+  "version": "0.4.12",
+  "description": "fix: 卡片副标题",
   "main": "./index.ts",
   "private": false,
   "scripts": {},