hlw-uniapp 1.0.0

package/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "hlw-uniapp",
+    "version": "1.0.0",
+    "description": "UniApp Vue 3 通用组件库",
+    "type": "module",
+    "main": "./src/index.ts",
+    "module": "./src/index.ts",
+    "types": "./src/types.ts",
+    "exports": {
+        ".": {
+            "import": "./src/index.ts",
+            "types": "./src/types.ts"
+        },
+        "./src/components/*": "./src/components/*",
+        "./core": {
+            "import": "./src/core/index.ts",
+            "types": "./src/core/index.ts"
+        }
+    },
+    "files": [
+        "src"
+    ],
+    "sideEffects": [
+        "**/*.vue",
+        "**/*.scss"
+    ],
+    "peerDependencies": {
+        "vue": "^3.4.0"
+    },
+    "keywords": [
+        "uniapp",
+        "vue3",
+        "components",
+        "weixin",
+        "miniprogram"
+    ],
+    "author": "",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": ""
+    }
+}

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

@@ -0,0 +1,90 @@
+<template>
+    <view class="hlw-header" :style="{ height: totalNavBarHeight + 'px' }">
+        <view class="header-bg-layer" :class="hasBgSlot ? '' : props.bgClass">
+            <slot 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' }">
+            <slot></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;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    extraHeight: 0,
+    bgClass: ''
+});
+
+const slots = useSlots();
+const hasBgSlot = computed(() => !!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;
+}
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+    <view class="hlw-page">
+        <view class="hlw-page-header">
+            <slot name="header"></slot>
+        </view>
+
+        <scroll-view
+            class="hlw-page-content"
+            :scroll-y="true"
+            :enable-flex="true"
+            :enhanced="true"
+            :show-scrollbar="true"
+        >
+            <slot></slot>
+        </scroll-view>
+    </view>
+</template>
+
+<script setup lang="ts">
+</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%;
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as HlwHeader } from './hlw-header/index.vue'
+export { default as HlwPage } from './hlw-page/index.vue'

package/src/core/index.ts

@@ -0,0 +1,2 @@
+export * from './refs'
+export type { UseRefsReturn } from './refs'

package/src/core/refs/index.ts

@@ -0,0 +1,20 @@
+import { onBeforeUpdate, ref, type Ref } from 'vue'
+
+export interface UseRefsReturn {
+  refs: Ref<Record<string, any>>
+  setRefs: (index: string) => (el: any) => void
+}
+
+export function useRefs(): UseRefsReturn {
+  const refs = ref<Record<string, any>>({})
+
+  onBeforeUpdate(() => {
+    refs.value = {}
+  })
+
+  const setRefs = (index: string) => (el: any) => {
+    refs.value[index] = el
+  }
+
+  return { refs, setRefs }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+// Components
+export { HlwHeader, HlwPage } from './components'
+
+// Composables
+export { useRefs } from './core'
+export type { UseRefsReturn } from './core'

package/src/types.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue'
+
+// HlwHeader Props
+export interface HlwHeaderProps {
+  extraHeight?: number
+  bgClass?: string
+}
+
+// useRefs return type
+export interface UseRefsReturn {
+  refs: Ref<Record<string, any>>
+  setRefs: (index: string) => (el: any) => void
+}
+
+// Re-export
+export { useRefs } from './core'
+export { HlwHeader, HlwPage } from './components'