@hlw-uni/mp-vue 1.0.3 → 1.0.5

package/src/components/hlw-avatar/index.vue

@@ -1,4 +1,65 @@
-<script lang="ts">
-import Avatar from './index';
-export default Avatar;
+<template>
+    <view :class="`hlw-avatar hlw-avatar--${size ?? 'medium'}`">
+        <image
+            v-if="src && !loadError"
+            class="hlw-avatar__image"
+            :src="src"
+            mode="aspectFill"
+            @error="loadError = true"
+        />
+        <view v-else class="hlw-avatar__placeholder">
+            <text class="hlw-avatar__initial">{{ initial }}</text>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+    src?: string;
+    name?: string;
+    size?: 'small' | 'medium' | 'large';
+}>();
+
+const loadError = ref(false);
+const initial = computed(() => {
+    if (!props.name) return '?';
+    return props.name.charAt(0).toUpperCase();
+});
 </script>
+
+<style scoped>
+.hlw-avatar {
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.hlw-avatar--small  { width: 56rpx;  height: 56rpx; }
+.hlw-avatar--medium { width: 80rpx;  height: 80rpx; }
+.hlw-avatar--large  { width: 120rpx; height: 120rpx; }
+
+.hlw-avatar__image {
+    width: 100%;
+    height: 100%;
+}
+
+.hlw-avatar__placeholder {
+    width: 100%;
+    height: 100%;
+    background: #07c160;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hlw-avatar__initial {
+    color: #fff;
+    font-weight: bold;
+}
+
+.hlw-avatar--small  .hlw-avatar__initial { font-size: 22rpx; }
+.hlw-avatar--medium .hlw-avatar__initial { font-size: 30rpx; }
+.hlw-avatar--large  .hlw-avatar__initial { font-size: 46rpx; }
+</style>

package/src/components/hlw-card/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="hlw-card">
+    <view
+      v-if="$slots.header || title || icon || $slots['header-left'] || $slots['header-right']"
+      class="hlw-card-header"
+    >
+      <slot name="header">
+        <view class="flex items-center justify-between px-5 py-4 border-0 border-b border-dashed border-slate-200 bg-slate-50/30">
+          <view v-if="$slots['header-left'] || title || icon">
+            <slot name="header-left">
+              <view class="text-sm font-bold text-slate-800 flex items-center gap-2 tracking-wide">
+                <text v-if="icon" :class="[icon, iconColor]"></text>
+                <text>{{ title }}</text>
+              </view>
+            </slot>
+          </view>
+          <view v-if="$slots['header-right'] || extra">
+            <slot name="header-right">
+              <text
+                v-if="extra"
+                class="text-[10px] text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100 tracking-wide"
+              >{{ extra }}</text>
+            </slot>
+          </view>
+        </view>
+      </slot>
+    </view>
+    <view class="hlw-card-body">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  icon?: string;
+  iconColor?: string;
+  extra?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  icon: '',
+  iconColor: '',
+  extra: '',
+});
+
+defineOptions({
+  options: {
+    styleIsolation: 'shared',
+    virtualHost: true,
+  },
+});
+</script>
+
+<style scoped>
+.hlw-card {
+  @apply bg-white rounded-xl border border-solid border-slate-200 overflow-hidden w-full;
+}
+</style>

package/src/components/hlw-empty/index.vue

@@ -1,4 +1,41 @@
-<script lang="ts">
-import Empty from './index';
-export default Empty;
+<template>
+    <view class="hlw-empty">
+        <image v-if="image" class="hlw-empty__image" :src="image" mode="aspectFit" />
+        <text v-else class="hlw-empty__icon">📦</text>
+        <text class="hlw-empty__text">{{ text || '暂无数据' }}</text>
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    text?: string;
+    image?: string;
+}>();
 </script>
+
+<style scoped>
+.hlw-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 80rpx 40rpx;
+}
+
+.hlw-empty__image {
+    width: 200rpx;
+    height: 200rpx;
+    margin-bottom: 24rpx;
+}
+
+.hlw-empty__icon {
+    font-size: 100rpx;
+    margin-bottom: 20rpx;
+}
+
+.hlw-empty__text {
+    font-size: 28rpx;
+    color: #bbb;
+}
+</style>

package/src/components/hlw-header/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <view class="hlw-header" :style="{ height: totalNavBarHeight + 'px' }">
+    <view class="header-bg-layer" :class="hasBgSlot ? '' : props.bgClass">
+      <slot v-if="!props.isBack" name="bg"></slot>
+    </view>
+    <view class="status-bar-spacer" :style="{ height: statusBarHeight + 'px' }"></view>
+    <view class="header-content-area" :style="{ height: NAV_BAR_CONTENT_HEIGHT + 'px' }">
+      <template v-if="props.isBack">
+        <view class="header-back" @click="handleBack">
+          <text class="iconfont icon-back"></text>
+        </view>
+        <view class="header-title">{{ props.title }}</view>
+        <view class="header-placeholder"></view>
+      </template>
+      <slot v-else>
+        <view v-if="props.title" class="header-title">{{ props.title }}</view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useSlots } from 'vue';
+
+const getNavBarContentHeight = (): number => {
+  try {
+    const menuInfo = uni.getMenuButtonBoundingClientRect?.();
+    if (!menuInfo) return 44;
+    const systemInfo = uni.getSystemInfoSync();
+    return (menuInfo.top - systemInfo.statusBarHeight!) * 2 + menuInfo.height;
+  } catch {
+    return 44;
+  }
+};
+
+const getStatusBarHeight = (): number => {
+  try {
+    const systemInfo = uni.getSystemInfoSync();
+    return systemInfo.statusBarHeight || 20;
+  } catch {
+    return 20;
+  }
+};
+
+const NAV_BAR_CONTENT_HEIGHT = getNavBarContentHeight();
+
+interface Props {
+  extraHeight?: number;
+  bgClass?: string;
+  isBack?: boolean;
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  extraHeight: 0,
+  bgClass: '',
+  isBack: false,
+  title: '',
+});
+
+const emit = defineEmits<{
+  back: [];
+}>();
+
+const handleBack = () => {
+  emit('back');
+  uni.navigateBack({ delta: 1 });
+};
+
+const slots = useSlots();
+const hasBgSlot = computed(() => !props.isBack && !!slots.bg);
+const statusBarHeight = ref(getStatusBarHeight());
+const totalNavBarHeight = computed(() => statusBarHeight.value + NAV_BAR_CONTENT_HEIGHT + props.extraHeight);
+</script>
+
+<style lang="scss" scoped>
+.hlw-header {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header-bg-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
+.status-bar-spacer {
+  flex-shrink: 0;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+.header-content-area {
+  flex-shrink: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+
+.header-back {
+  width: 88rpx;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  .iconfont {
+    font-size: 40rpx;
+  }
+}
+
+.header-title {
+  flex: 1;
+  text-align: center;
+  font-size: 28rpx;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.header-placeholder {
+  width: 88rpx;
+  flex-shrink: 0;
+}
+</style>

package/src/components/hlw-loading/index.vue

@@ -1,4 +1,41 @@
-<script lang="ts">
-import Loading from './index';
-export default Loading;
+<template>
+    <view class="hlw-loading">
+        <view class="hlw-loading__spinner" />
+        <text v-if="text" class="hlw-loading__text">{{ text }}</text>
+    </view>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    text?: string;
+}>();
 </script>
+
+<style scoped>
+.hlw-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24rpx;
+}
+
+.hlw-loading__spinner {
+    width: 56rpx;
+    height: 56rpx;
+    border: 6rpx solid #e8e8e8;
+    border-top-color: #07c160;
+    border-radius: 50%;
+    animation: hlw-spin 0.8s linear infinite;
+}
+
+@keyframes hlw-spin {
+    to { transform: rotate(360deg); }
+}
+
+.hlw-loading__text {
+    margin-top: 16rpx;
+    font-size: 26rpx;
+    color: #999;
+}
+</style>

package/src/components/hlw-menu-list/index.vue

@@ -1,4 +1,94 @@
-<script lang="ts">
-import MenuList from './index';
-export default MenuList;
+<template>
+    <view class="hlw-menu-list">
+        <view
+            v-for="item in items"
+            :key="item.key"
+            class="hlw-menu-list__item"
+            @tap="onTap(item)"
+        >
+            <view class="hlw-menu-list__left">
+                <text v-if="item.icon" class="hlw-menu-list__icon">{{ item.icon }}</text>
+                <text class="hlw-menu-list__label">{{ item.label }}</text>
+            </view>
+            <view class="hlw-menu-list__right">
+                <text v-if="item.value" class="hlw-menu-list__value">{{ item.value }}</text>
+                <text class="hlw-menu-list__arrow">›</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from './types';
+
+const props = defineProps<{
+    items: MenuItem[];
+}>();
+
+const emit = defineEmits<{
+    (e: 'click', item: MenuItem): void;
+}>();
+
+function onTap(item: MenuItem) {
+    if (item.url) {
+        uni.navigateTo({ url: item.url });
+    } else if (item.action) {
+        item.action();
+    }
+    emit('click', item);
+}
 </script>
+
+<style scoped>
+.hlw-menu-list {
+    background: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+}
+
+.hlw-menu-list__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 28rpx 32rpx;
+    border-bottom: 1rpx solid #f5f5f5;
+}
+
+.hlw-menu-list__item:last-child {
+    border-bottom: none;
+}
+
+.hlw-menu-list__left {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.hlw-menu-list__icon {
+    font-size: 36rpx;
+    width: 44rpx;
+    text-align: center;
+}
+
+.hlw-menu-list__label {
+    font-size: 30rpx;
+    color: #333;
+}
+
+.hlw-menu-list__right {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+}
+
+.hlw-menu-list__value {
+    font-size: 28rpx;
+    color: #999;
+}
+
+.hlw-menu-list__arrow {
+    font-size: 36rpx;
+    color: #ccc;
+    line-height: 1;
+}
+</style>

package/src/components/hlw-menu-list/types.ts

@@ -0,0 +1,8 @@
+export interface MenuItem {
+    key: string;
+    label: string;
+    icon?: string;
+    value?: string;
+    url?: string;
+    action?: () => void;
+}

package/src/components/hlw-page/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <view class="hlw-page">
+    <view class="hlw-page-header">
+      <slot name="header">
+        <hlw-header
+          v-if="title || isBack"
+          :title="title"
+          :is-back="isBack"
+          :bg-class="bgClass"
+        />
+      </slot>
+    </view>
+    <scroll-view
+      class="hlw-page-content"
+      :scroll-y="true"
+      :enable-flex="true"
+      :enhanced="true"
+      :show-scrollbar="true"
+    >
+      <slot></slot>
+    </scroll-view>
+    <view class="hlw-page-footer">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  isBack?: boolean;
+  bgClass?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+  isBack: false,
+  bgClass: '',
+});
+</script>
+
+<style lang="scss" scoped>
+.hlw-page {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.hlw-page-header {
+  flex-shrink: 0;
+}
+
+.hlw-page-content {
+  flex: 1;
+  height: 0;
+  width: 100%;
+}
+
+.hlw-page-footer {
+  flex-shrink: 0;
+}
+</style>

package/src/index.ts

@@ -3,7 +3,11 @@
  */
 
 export { default as HlwAd } from './components/hlw-ad/index.vue';
-export { default as HlwAvatar } from './components/hlw-avatar/index';
-export { default as HlwEmpty } from './components/hlw-empty/index';
-export { default as HlwLoading } from './components/hlw-loading/index';
-export { default as HlwMenuList, type MenuItem } from './components/hlw-menu-list/index';
+export { default as HlwAvatar } from './components/hlw-avatar/index.vue';
+export { default as HlwCard } from './components/hlw-card/index.vue';
+export { default as HlwEmpty } from './components/hlw-empty/index.vue';
+export { default as HlwHeader } from './components/hlw-header/index.vue';
+export { default as HlwLoading } from './components/hlw-loading/index.vue';
+export { default as HlwMenuList } from './components/hlw-menu-list/index.vue';
+export { default as HlwPage } from './components/hlw-page/index.vue';
+export type { MenuItem } from './components/hlw-menu-list/types';

package/dist/components/hlw-avatar/index.d.ts

@@ -1,7 +0,0 @@
-export interface AvatarProps {
-    src?: string;
-    name?: string;
-    size?: 'small' | 'medium' | 'large';
-}
-declare const _default: any;
-export default _default;

package/dist/components/hlw-empty/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/dist/components/hlw-loading/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/src/components/hlw-avatar/index.ts

@@ -1,52 +0,0 @@
-import { defineComponent, ref, computed } from 'vue';
-
-export interface AvatarProps {
-  src?: string;
-  name?: string;
-  size?: 'small' | 'medium' | 'large';
-}
-
-export default defineComponent({
-  name: 'Avatar',
-  props: {
-    src: { type: String },
-    name: { type: String },
-    size: { type: String as () => 'small' | 'medium' | 'large', default: 'medium' },
-  },
-  setup(props) {
-    const loadError = ref(false);
-
-    const initial = computed(() => {
-      if (!props.name) return '?';
-      return props.name.charAt(0).toUpperCase();
-    });
-
-    function onError() { loadError.value = true; }
-
-    return () => {
-      const sizeClass = `hlw-avatar--${props.size}`;
-      return (
-        // @ts-ignore - uni app nodes
-        h('view', { class: `hlw-avatar ${sizeClass}` }, [
-          props.src && !loadError.value
-            ? (
-              // @ts-ignore
-              h('image', {
-                class: 'hlw-avatar__image',
-                src: props.src,
-                mode: 'aspectFill',
-                onError,
-              })
-            )
-            : (
-              // @ts-ignore
-              h('view', { class: 'hlw-avatar__placeholder' }, [
-                // @ts-ignore
-                h('text', { class: 'hlw-avatar__initial' }, initial.value),
-              ])
-            ),
-        ])
-      );
-    };
-  },
-});

package/src/components/hlw-empty/index.ts

@@ -1,34 +0,0 @@
-import { defineComponent, useSlots } from 'vue';
-
-export default defineComponent({
-  name: 'Empty',
-  props: {
-    text: { type: String },
-    image: { type: String },
-  },
-  setup(props) {
-    const slots = useSlots();
-    return () => {
-      return (
-        // @ts-ignore
-        h('view', { class: 'hlw-empty' }, [
-          props.image
-            ? (
-              // @ts-ignore
-              h('image', { class: 'hlw-empty__image', src: props.image, mode: 'aspectFit' })
-            )
-            : (
-              // @ts-ignore
-              h('view', { class: 'hlw-empty__icon' }, [
-                // @ts-ignore
-                h('text', '📦'),
-              ])
-            ),
-          // @ts-ignore
-          h('text', { class: 'hlw-empty__text' }, props.text || '暂无数据'),
-          slots.default?.(),
-        ])
-      );
-    };
-  },
-});

package/src/components/hlw-loading/index.ts

@@ -1,29 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'Loading',
-  props: {
-    text: { type: String },
-  },
-  setup(props) {
-    return () => {
-      const dots = Array.from({ length: 12 }, (_, i) =>
-        // @ts-ignore
-        h('view', { key: i + 1, class: 'hlw-loading__dot' }),
-      );
-      return (
-        // @ts-ignore
-        h('view', { class: 'hlw-loading' }, [
-          // @ts-ignore
-          h('view', { class: 'hlw-loading__spinner' }, dots),
-          props.text
-            ? (
-              // @ts-ignore
-              h('text', { class: 'hlw-loading__text' }, props.text)
-            )
-            : null,
-        ])
-      );
-    };
-  },
-});