@swj_ld/ld-component-library 1.0.3

package/README.md

@@ -0,0 +1,62 @@
+# @swj_ld/ld-component-library
+
+> 一套专为 **uni-app** 打造的轻量级 Vue 3 组件库，支持 **H5、微信小程序、支付宝小程序等全平台**，开箱即用。
+
+[![](https://img.shields.io/npm/v/@swj_ld/ld-component-library?color=green)](https://www.npmjs.com/package/@swj_ld/ld-component-library)
+[![](https://img.shields.io/npm/l/@swj_ld/ld-component-library)](LICENSE)
+[![](https://img.shields.io/bundlephobia/minzip/@swj_ld/ld-component-library?label=minzipped)](https://bundlephobia.com/result?p=@swj_ld/ld-component-library)
+
+## ✨ 特性
+
+- ✅ **uni-app 原生兼容**：所有组件使用 `<view>`、`<text>` 等标准标签，无 DOM 操作
+- ✅ **多端一致**：H5 / 微信小程序 / 支付宝小程序 渲染效果一致
+- ✅ **按需引入**：支持 Tree-shaking，不增加无用代码
+- ✅ **TypeScript 友好**：自带类型提示，开发体验流畅
+- ✅ **零构建依赖**：发布源码（`.vue`），由用户项目编译，避免兼容问题
+
+## 📦 安装
+
+```bash
+npm install @swj_ld/ld-component-library
+# 或
+yarn add @swj_ld/ld-component-library
+
+
+本组件库采用 源码发布模式：
+
+所有组件以 .vue 源文件形式发布
+不经过任何打包或编译
+由用户的 uni-app 项目负责最终编译为各端代码
+因此，请确保：
+
+用户项目使用 Vite + Vue 3 + uni-app v3+
+不要对组件进行二次包装（否则可能导致小程序白屏）
+
+
+
+🚀 使用方式
+方式一：按需引入（推荐）——已测-正常
+<template>
+  <SwjEmpty description="暂无数据" />
+</template>
+
+<script setup lang="ts">
+import SwjEmpty from '@swj_ld/ld-component-library/SwjEmpty'
+</script>
+
+方式二：整体引入——已测-非正常
+import { SwjEmpty, SwjButton } from '@swj_ld/ld-component-library'
+
+方式三：全局注册（适合大量使用）——目前用file本地link的方式无法正常加载
+// main.ts 或 main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import LdComponentLibrary from '@swj_ld/ld-component-library'
+
+const app = createApp(App)
+app.use(LdComponentLibrary) // 自动注册所有组件
+app.mount('#app')
+
+<template>
+  <SwjEmpty />
+</template>

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@swj_ld/ld-component-library",
+  "version": "1.0.3",
+  "description": "A set of custom components for uni-app",
+  "author": "Joy",
+  "license": "MIT",
+  "keywords": ["uni-app", "vue3", "components"],
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    },
+    "./SwjEmpty": "./src/components/SwjEmpty/SwjEmpty.vue"
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "@dcloudio/uni-app": "3.0.0-4070620250821001",
+    "sard-uniapp": "^1.25.2",
+    "vue": "^3.4.21"
+  },
+  "peerDependenciesMeta": {
+    "sard-uniapp": {
+      "optional": false
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/SwjEmpty/SwjEmpty.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+interface Props {
+  description?: string
+  top?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  description: '暂无数据',
+  top: '46%',
+})
+</script>
+
+<template>
+  <view class="empty-wrap" :style="{ top }">
+    <sar-empty
+      :description="description"
+      :root-style="{
+        '--sar-empty-description-margin-top': 0,
+        '--sar-empty-description-font-size': '28rpx',
+        '--sar-empty-description-font-weight': '300',
+        '--sar-empty-description-color': '#151515',
+        '--sar-empty-extra-margin-top': 0,
+      }"
+    >
+      <template #icon>
+        <image src="../../../assets/images/nodata.png" class="image-box" />
+      </template>
+      <template #default>
+        <slot />
+      </template>
+    </sar-empty>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.empty-wrap {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  .image-box {
+    margin-bottom: 28rpx;
+    width: 200rpx;
+    height: 200rpx;
+  }
+}
+</style>

package/src/index.ts

@@ -0,0 +1,17 @@
+export { default as SwjEmpty } from './components/SwjEmpty/SwjEmpty.vue'
+// 可选：提供插件形式（用于 app.use()）
+import SwjEmpty from './components/SwjEmpty/SwjEmpty.vue'
+
+const getComponent = (comp: any) => comp.default || comp
+
+const components = {
+  SwjEmpty: getComponent(SwjEmpty),
+}
+
+export default {
+  install(app: any) {
+    for (const [name, component] of Object.entries(components)) {
+      app.component(name, component)
+    }
+  }
+}

package/src/vue.d.ts

@@ -0,0 +1,6 @@
+// types/vue.d.ts
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}