hy-app 0.4.10 → 0.4.12

package/components/hy-card/hy-card.vue

@@ -12,37 +12,47 @@
       <!-- @slot 头部插槽 -->
       <slot v-if="$slots.header" name="header" />
       <view v-else class="hy-card--head__flex">
-        <view class="hy-card--head__left" v-if="title">
-          <image
-            :src="thumb"
-            class="hy-card--head__left__thumb"
-            mode="aspectFill"
+        <view class="hy-card--head__left">
+          <hy-icon
             v-if="thumb"
-            :style="{
-              height: addUnit(thumbWidth),
-              width: addUnit(thumbWidth),
-              borderRadius: thumbCircle ? '50px' : '4px',
-            }"
-          ></image>
-          <text
-            class="hy-card--head__left__title"
-            :style="{
-              fontSize: addUnit(titleSize),
-              color: titleColor,
-            }"
-          >
-            {{ title }}
-          </text>
+            :name="thumb"
+            custom-class="hy-card--head__left__thumb"
+            :height="thumbWidth"
+            :width="thumbWidth"
+            :round="thumbCircle ? '50%' : '4px'"
+          ></hy-icon>
+          <view>
+            <view
+              v-if="title"
+              class="hy-card--head__left__title"
+              :style="{
+                fontSize: addUnit(titleSize),
+                color: titleColor,
+              }"
+            >
+              {{ title }}
+            </view>
+            <text
+              v-if="subTitle"
+              class="hy-card--head__left__sub"
+              :style="{
+                fontSize: addUnit(subTitleSize),
+                color: subTitleColor,
+              }"
+            >
+              {{ subTitle }}
+            </text>
+          </view>
         </view>
-        <view class="hy-card--head__right hy-line-1" v-if="subTitle">
+        <view class="hy-card--head__right" v-if="subTitle">
           <text
-            class="hy-card--head__title__text"
+            class="hy-card--head__right__text"
             :style="{
-              fontSize: addUnit(subTitleSize),
-              color: subTitleColor,
+              fontSize: addUnit(rightTextSize),
+              color: rightTextColor,
             }"
           >
-            {{ subTitle }}
+            {{ rightText }}
           </text>
         </view>
       </view>
@@ -90,6 +100,9 @@ import type { CSSProperties, PropType } from "vue";
 import type { ICardEmits } from "./typing";
 import { addUnit, getPx } from "../../libs";
 
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+
 /**
  * 卡片组件一般用于多个列表条目，且风格统一的场景。
  * @displayName hy-card
@@ -98,7 +111,7 @@ defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
-  /** 卡片与屏幕两侧是否留空隙 */
+  /** 卡片与屏幕两侧是否留空隙,false-不留缝隙，true-有margin */
   full: {
     type: Boolean,
     default: false,
@@ -117,13 +130,28 @@ const props = defineProps({
   /** 副标题颜色 */
   subTitleColor: {
     type: String,
-    default: "#909399",
+    default: "",
   },
   /** 副标题字体大小 */
   subTitleSize: {
     type: [String, Number],
     default: 13,
   },
+  /** 右边内容 */
+  rightText: {
+    type: String,
+    default: "",
+  },
+  /** 右边内容颜色 */
+  rightTextColor: {
+    type: String,
+    default: "",
+  },
+  /** 右边内容字体大小 */
+  rightTextSize: {
+    type: [String, Number],
+    default: "",
+  },
   /** 是否显示边框 */
   border: {
     type: Boolean,

package/components/hy-card/index.scss

@@ -11,8 +11,8 @@
 
   @include m(full) {
     // 如果是与屏幕之间不留空隙，应该设置左右边距为0
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+    margin-left: $hy-border-margin-padding-base !important;
+    margin-right: $hy-border-margin-padding-base !important;
     width: 100%;
   }
 
@@ -31,20 +31,28 @@
 
     @include e(left) {
       display: flex;
+      align-items: center;
+      flex: 1;
 
       @include e(thumb) {
-        margin-right: 16rpx;
+        margin-right: $hy-border-margin-padding-base;
+        flex-shrink: 0
       }
 
       @include e(title) {
-        max-width: 400rpx;
+        max-width: 450rpx;
         @include lineEllipsis;
       }
+
+      @include e(sub) {
+        color: $hy-text-color--grey;
+        font-size: $hy-font-size-sm;
+      }
     }
 
     @include e(right) {
       color: $hy-text-color--grey;
-      margin-left: 6rpx;
+      margin-left: $hy-border-margin-padding-sm;
     }
   }
 }

package/components/hy-flex/hy-flex.vue

@@ -27,11 +27,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  /**
-   * 快捷设置 flex-direction
-   * @values row,row-reverse,column,column-reverse
-   * */
-  direction: String as PropType<FlexDirection>,
   /**
    * 设置元素在主轴方向上的对齐方式
    * @values flex-start,flex-end,space-between,space-around,space-evenly,center
@@ -108,4 +103,6 @@ const flexStyle = computed(() => {
 });
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

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

@@ -1,163 +1,397 @@
 <template>
   <view class="hy-folding-panel">
-    <HyCell
-      :title="title"
-      :titleBorder="titleBorder"
-      :border="border"
-      :showVertical="showVertical"
-      :verticalColor="verticalColor"
-      :size="size"
-      :disabled="disabled"
-      :list="lists"
-      @click="clickHandler"
-    >
-      <template #icon="{ icon }">
-        <slot name="icon" :icon="icon"></slot>
-      </template>
-      <template #title="{ title }">
-        <slot name="title" :title="title"></slot>
-      </template>
-      <template #value="{ record }">
-        <slot name="value" :record="record"></slot>
-      </template>
-      <template #bottom="{ record }">
-        <view
-          class="hy-folding-panel__main"
-          :style="[
-            customStyle,
-            {
-              height: record?.spread ? addUnit(contentHeight) : '0px',
-            },
-          ]"
-        >
-          <slot :record="record?.content" />
+    <!-- 容器模式 - 通过 slot 支持自定义内容 -->
+    <view class="hy-folding-panel__wrapper">
+      <!-- 头部标题 -->
+      <view v-if="title" class="hy-folding-panel__title">
+        <text class="hy-folding-panel__title-text">{{ title }}</text>
+      </view>
+      
+      <!-- 面板内容区域 -->
+      <view class="hy-folding-panel__body">
+        <!-- 列表模式 -->
+        <view v-if="list && list.length" class="hy-folding-panel__list">
+          <view
+            v-for="(item, index) in panelItems"
+            :key="index"
+            class="hy-folding-panel__item"
+            :class="{
+              'hy-folding-panel__item--disabled': disabled || item.disabled,
+              'hy-folding-panel__item--active': item.expanded,
+              'hy-folding-panel__item--border': border,
+              [`hy-folding-panel__item--${size}`]: true
+            }"
+          >
+            <!-- 面板头部 -->
+            <view class="hy-folding-panel__item-header" @click="toggleItem(index)">
+              <view class="hy-folding-panel__item-left">
+                <!-- 图标 -->
+                <view v-if="item.icon" class="hy-folding-panel__item-icon">
+                  <image :src="item.icon" mode="aspectFit" />
+                </view>
+                <!-- 标题 -->
+                <text class="hy-folding-panel__item-title">{{ item.title }}</text>
+              </view>
+              <view class="hy-folding-panel__item-right">
+                <!-- 右侧值 -->
+                <text v-if="item.value" class="hy-folding-panel__item-value">{{ item.value }}</text>
+                <!-- 箭头 -->
+                <view class="hy-folding-panel__item-arrow" :class="{ 'hy-folding-panel__item-arrow--up': item.expanded }">
+                  <text>{{ item.expanded ? '↑' : '↓' }}</text>
+                </view>
+              </view>
+            </view>
+            
+            <!-- 面板内容 -->
+            <view 
+              class="hy-folding-panel__item-content"
+              :style="[
+                customStyle,
+                {
+                  height: item.expanded ? (contentHeight ? addUnit(contentHeight) : 'auto') : '0px',
+                  overflow: 'hidden'
+                }
+              ]"
+            >
+              <slot name="item-content" :item="item" :index="index">
+                <text>{{ item.content || '' }}</text>
+              </slot>
+            </view>
+          </view>
         </view>
-        <HyLine v-if="record?.spread"></HyLine>
-      </template>
-    </HyCell>
+        
+        <!-- 自定义内容 -->
+        <slot v-else></slot>
+      </view>
+    </view>
   </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-folding-panel",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
+  name: "hy-folding-panel"
 };
 </script>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, computed, watch } from "vue";
 import type { CSSProperties, PropType } from "vue";
 import type { IFoldingPanel, PanelVo } from "./typing";
-import { ColorConfig, addUnit } from "../../libs";
-// 组件
-import HyCell from "../hy-cell/hy-cell.vue";
-import HyLine from "../hy-line/hy-line.vue";
+import { addUnit } from "../../libs";
 
 /**
- * 通过折叠面板收纳内容区域。
+ * 折叠面板组件
+ * 用于展示可展开/折叠的内容区域
  * @displayName hy-folding-panel
  */
-defineOptions({});
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
-  /** 数据集 */
+  /**
+   * 数据集
+   */
   list: {
     type: Array as PropType<PanelVo[]>,
-    default: [],
+    default: () => []
   },
-  /** 是否手风琴模式 */
+  /**
+   * 是否手风琴模式
+   */
   accordion: {
     type: Boolean,
-    default: false,
-  },
-  /** 头部标题 */
-  title: String,
-  /** 是否显示头部底部边框 */
-  titleBorder: {
-    type: Boolean,
-    default: false,
-  },
-  /** 是否显示cell下边框 */
-  border: {
-    type: Boolean,
-    default: true,
+    default: false
   },
-  /** 标题前缀竖线颜色 */
-  verticalColor: {
+  /**
+   * 面板标题
+   */
+  title: {
     type: String,
-    default: ColorConfig.primary,
+    default: ''
   },
-  /** 是否显示标题前缀竖线 */
-  showVertical: {
+  /**
+   * 是否显示边框
+   */
+  border: {
     type: Boolean,
-    default: true,
+    default: true
   },
-  /** 是否禁用 */
+  /**
+   * 是否禁用
+   */
   disabled: {
     type: Boolean,
-    default: false,
+    default: false
   },
   /**
-   * 单元的大小
-   * @values large,medium,small
-   * */
+   * 面板大小 large, medium, small
+   */
   size: {
-    type: String,
-    default: "medium",
+    type: String as PropType<'large' | 'medium' | 'small'>,
+    default: 'medium'
   },
-  /** 内容面板高度 */
+  /**
+   * 内容区域高度
+   */
   contentHeight: {
     type: [Number, String],
-    default: 120,
+    default: 150
   },
-  /** 定义需要用到的外部样式 */
+  /**
+   * 自定义样式
+   */
   customStyle: {
     type: Object as PropType<CSSProperties>,
-  },
+    default: () => ({})
+  }
 });
+
+// 事件定义
 const emit = defineEmits<IFoldingPanel>();
 
-const lists = ref<PanelVo[]>([]);
+// 内部面板状态
+interface PanelItem extends PanelVo {
+  expanded: boolean;
+}
 
-watch(
-  () => props.list,
-  (newValue: PanelVo[]) => {
-    lists.value = newValue.map((item) => ({
-      ...item,
-      arrowDirection: "down",
-      spread: false,
-    }));
-  },
-  { immediate: true },
-);
+// 计算的面板项，包含展开状态
+const panelItems = ref<PanelItem[]>([]);
 
-const clickHandler = (temp: PanelVo, index: number) => {
-  // if (temp?.disabled && temp?.animating) return;
-  lists.value = props.list.map((item, i) => {
-    if (props.accordion) {
-      // 判断是否是收起来
-      item.spread = i === index ? !item.spread : false;
-    } else {
-      if (i === index) {
-        item.spread = !item.spread;
-      }
-    }
+// 初始化面板数据
+const initializePanels = () => {
+  panelItems.value = props.list.map(item => ({
+    ...item,
+    expanded: !!item.spread
+  }));
+};
 
-    item.arrowDirection = item.spread ? "up" : "down";
-    return item;
-  });
-  const event: "open" | "close" = temp.spread ? "open" : "close";
-  emit("change", temp, index);
-  emit(event, temp, index);
+// 监听列表数据变化
+watch(() => props.list, () => {
+  initializePanels();
+}, { deep: true, immediate: true });
+
+// 切换面板展开状态
+const toggleItem = (index: number) => {
+  if (props.disabled || panelItems.value[index].disabled) {
+    return;
+  }
+  
+  const currentItem = panelItems.value[index];
+  const isCurrentlyExpanded = currentItem.expanded;
+  
+  // 手风琴模式下，关闭其他面板
+  if (props.accordion) {
+    panelItems.value.forEach((item, i) => {
+      if (i !== index) {
+        item.expanded = false;
+      }
+    });
+  }
+  
+  // 切换当前面板状态
+  currentItem.expanded = !isCurrentlyExpanded;
+  
+  // 触发事件
+  emit('change', currentItem, index);
+  emit(currentItem.expanded ? 'open' : 'close', currentItem, index);
 };
+
+// 对外暴露的方法
+defineExpose({
+  /**
+   * 打开指定索引的面板
+   */
+  open: (index: number) => {
+    if (index >= 0 && index < panelItems.value.length) {
+      if (props.accordion) {
+        panelItems.value.forEach((item, i) => {
+          item.expanded = i === index;
+        });
+      } else {
+        panelItems.value[index].expanded = true;
+      }
+      
+      const item = panelItems.value[index];
+      emit('change', item, index);
+      emit('open', item, index);
+    }
+  },
+  
+  /**
+   * 关闭指定索引的面板
+   */
+  close: (index: number) => {
+    if (index >= 0 && index < panelItems.value.length) {
+      panelItems.value[index].expanded = false;
+      
+      const item = panelItems.value[index];
+      emit('change', item, index);
+      emit('close', item, index);
+    }
+  },
+  
+  /**
+   * 切换指定索引的面板
+   */
+  toggle: (index: number) => {
+    toggleItem(index);
+  },
+  
+  /**
+   * 关闭所有面板
+   */
+  closeAll: () => {
+    panelItems.value.forEach((item, index) => {
+      item.expanded = false;
+      emit('change', item, index);
+      emit('close', item, index);
+    });
+  }
+});
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+.hy-folding-panel {
+  width: 100%;
+  
+  &__wrapper {
+    background-color: #ffffff;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  
+  &__title {
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333333;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  &__body {
+    // 主体容器样式
+  }
+  
+  &__list {
+    // 列表容器样式
+  }
+  
+  &__item {
+    position: relative;
+    
+    &--disabled {
+      opacity: 0.6;
+    }
+    
+    &--border {
+      border-bottom: 1px solid #f0f0f0;
+      
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+    
+    &--large {
+      .hy-folding-panel__item-header {
+        padding: 20px 16px;
+        
+        .hy-folding-panel__item-title {
+          font-size: 16px;
+        }
+        
+        .hy-folding-panel__item-value {
+          font-size: 14px;
+        }
+      }
+    }
+    
+    &--medium {
+      .hy-folding-panel__item-header {
+        padding: 16px;
+        
+        .hy-folding-panel__item-title {
+          font-size: 15px;
+        }
+        
+        .hy-folding-panel__item-value {
+          font-size: 13px;
+        }
+      }
+    }
+    
+    &--small {
+      .hy-folding-panel__item-header {
+        padding: 12px 16px;
+        
+        .hy-folding-panel__item-title {
+          font-size: 14px;
+        }
+        
+        .hy-folding-panel__item-value {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+  
+  &__item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #ffffff;
+    transition: background-color 0.3s;
+    
+    &:active {
+      background-color: #f5f5f5;
+    }
+  }
+  
+  &__item-left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+  
+  &__item-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  &__item-title {
+    font-size: 15px;
+    color: #333333;
+    flex: 1;
+  }
+  
+  &__item-right {
+    display: flex;
+    align-items: center;
+  }
+  
+  &__item-value {
+    font-size: 13px;
+    color: #999999;
+    margin-right: 8px;
+  }
+  
+  &__item-arrow {
+    font-size: 12px;
+    color: #cccccc;
+    transition: transform 0.3s;
+    
+    &--up {
+      transform: rotate(0deg);
+    }
+  }
+  
+  &__item-content {
+    background-color: #fafafa;
+    transition: height 0.3s ease;
+    box-sizing: border-box;
+  }
+}
 </style>