xlzw-card-list 0.1.0

package/README.md

@@ -0,0 +1,114 @@
+# xlzw-card-list
+
+基于 Vue 3 + ant-design-vue 的可复用卡片列表组件。卡片列配置由外部注入（请求函数或直接传配置），组件本身不绑定任何后端接口。
+
+## 安装
+
+```bash
+npm install xlzw-card-list
+```
+
+需要宿主项目自行提供（peerDependencies）：
+
+```bash
+npm install vue@^3.3.0 ant-design-vue@^4.0.0
+```
+
+## 引入
+
+```js
+import { createApp } from "vue";
+import CardList from "xlzw-card-list";
+import "xlzw-card-list/style.css";
+
+const app = createApp(App);
+app.use(CardList); // 全局注册为 <CardList />
+```
+
+或按需局部引入：
+
+```vue
+<script setup>
+import { CardList } from "xlzw-card-list";
+import "xlzw-card-list/style.css";
+</script>
+```
+
+## 用法一：外部注入请求函数（推荐）
+
+`fetchConfig(cardId)` 需返回 `Promise<{ propertys, width }>`：
+
+```vue
+<template>
+  <CardList
+    :card="orderList"
+    :card-id="cardId"
+    :fetch-config="fetchCardConfig"
+    @select-item="onSelect"
+    @scroll="onLoadMore"
+  >
+    <template #action="{ item }">
+      <a-button size="small" @click.stop="onDetail(item)">详情</a-button>
+    </template>
+  </CardList>
+</template>
+
+<script setup>
+import { getUiCardList } from "@/api/index";
+
+async function fetchCardConfig(cardId) {
+  const res = await getUiCardList(cardId);
+  return {
+    propertys: res.data.propertys,
+    width: res.data.card.width,
+  };
+}
+</script>
+```
+
+## 用法二：直接传入配置
+
+不传 `fetchConfig`、直接传 `propertys` + `width` 时，组件只做展示：
+
+```vue
+<CardList :card="list" :propertys="propertys" :width="320" />
+```
+
+## Props
+
+| 名称 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `card` | `Array` | `[]` | 卡片展示数据 |
+| `cardId` | `String \| Number` | `"0"` | 配置 id，配合 `fetchConfig` 使用 |
+| `fetchConfig` | `(cardId) => Promise<{ propertys, width }>` | `null` | 外部注入的配置请求函数 |
+| `propertys` | `Array` | `[]` | 直接传入的列配置，传入后优先于 `fetchConfig` |
+| `width` | `Number` | `0` | 卡片宽度（px），配合 `propertys` 使用 |
+
+## Events
+
+| 名称 | 参数 | 说明 |
+| --- | --- | --- |
+| `selectItem` | `item` | 点击某张卡片时触发 |
+| `scroll` | - | 列表滚动到底部时触发（用于加载更多） |
+
+## Slots
+
+| 名称 | 参数 | 说明 |
+| --- | --- | --- |
+| `action` | `{ item }` | 每张卡片的自定义操作区 |
+
+## Expose
+
+| 名称 | 说明 |
+| --- | --- |
+| `selectItem(item, field?)` | 手动选中卡片；传 `field` 时按该字段匹配 |
+
+## 本地开发 / 发布
+
+```bash
+cd packages/card-list
+npm install
+npm run build      # 产物在 dist/，含 card-list.js / card-list.umd.cjs / style.css
+npm pack           # 本地打包，检查 tarball 内容
+npm publish --access public   # scope 包首次发布需带 --access public
+```

package/dist/card-list.js

@@ -0,0 +1,262 @@
+import { ref as k, computed as O, watch as $, resolveComponent as W, openBlock as d, createElementBlock as i, normalizeStyle as f, Fragment as A, renderList as M, createBlock as b, normalizeClass as q, withCtx as o, withDirectives as G, createCommentVNode as m, toDisplayString as y, createVNode as p, createElementVNode as w, vShow as J, renderSlot as P } from "vue";
+function V(s) {
+  return s < 10 ? "0" + s : s;
+}
+function R(s) {
+  var h = new Date(s), _ = h.getFullYear(), u = h.getMonth() + 1, l = h.getDate(), v = _ + "/" + V(u) + "/" + V(l);
+  return v;
+}
+const T = (s, h) => {
+  const _ = s.__vccOpts || s;
+  for (const [u, l] of h)
+    _[u] = l;
+  return _;
+}, j = {
+  key: 0,
+  class: "box__header"
+}, K = ["src"], Q = {
+  key: 1,
+  class: "box__row"
+}, U = {
+  key: 2,
+  class: "box__row"
+}, X = {
+  key: 3,
+  class: "box__row"
+}, L = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map(), S = /* @__PURE__ */ new Map(), Z = {
+  __name: "CardList",
+  props: {
+    card: {
+      type: Array,
+      default: () => []
+    },
+    cardId: {
+      type: [String, Number],
+      default: () => "0"
+    },
+    // 外部注入的配置请求函数：(cardId) => Promise<{ propertys, width }>
+    fetchConfig: {
+      type: Function,
+      default: null
+    },
+    // 不走请求时，可直接传入的配置（优先级高于 fetchConfig）
+    propertys: {
+      type: Array,
+      default: () => []
+    },
+    // 配合 propertys 使用的卡片宽度
+    width: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ["selectItem", "scroll"],
+  setup(s, { expose: h, emit: _ }) {
+    const u = _, l = s, v = k("0"), C = k([]), D = k(0);
+    function F(t) {
+      if (t == null || t === "") return t;
+      if (S.has(t)) return S.get(t);
+      const a = R(t);
+      return S.set(t, a), a;
+    }
+    function Y(t) {
+      return Array.isArray(t) ? t.map((a) => {
+        if (a.fieldName === "state" && !a.parsedData && typeof a.data == "string")
+          try {
+            return { ...a, parsedData: JSON.parse(a.data) };
+          } catch {
+            return { ...a, parsedData: {} };
+          }
+        return a;
+      }) : t;
+    }
+    const z = O(() => C.value);
+    function N(t) {
+      C.value = Y(t.propertys) || [], D.value = t.width || 0;
+    }
+    const I = (t, a) => {
+      if (a) {
+        v.value = t[a];
+        return;
+      }
+      v.value = t.id, u("selectItem", t);
+    }, E = (t) => {
+      const { scrollHeight: a, scrollTop: n, clientHeight: r } = t.target;
+      n + r >= a && u("scroll");
+    };
+    return h({
+      selectItem: I
+    }), $(
+      () => [l.cardId, l.fetchConfig, l.propertys, l.width],
+      () => {
+        if (Array.isArray(l.propertys) && l.propertys.length > 0) {
+          N({ propertys: l.propertys, width: l.width });
+          return;
+        }
+        if (typeof l.fetchConfig != "function")
+          return;
+        const t = l.cardId;
+        if (t == "0")
+          return;
+        const a = L.get(t);
+        if (a) {
+          N(a);
+          return;
+        }
+        let n = x.get(t);
+        n || (n = Promise.resolve().then(() => l.fetchConfig(t)).then((r) => {
+          const c = {
+            // 预处理：state 字段 JSON 只解析一次，缓存后所有实例复用
+            propertys: r.propertys,
+            width: r.width
+          };
+          return L.set(t, c), x.delete(t), c;
+        }).catch((r) => {
+          throw x.delete(t), r;
+        }), x.set(t, n)), n.then((r) => {
+          N(r);
+        }).catch(() => {
+          C.value = [];
+        });
+      },
+      { immediate: !0 }
+    ), (t, a) => {
+      const n = W("a-col"), r = W("a-row");
+      return d(), i("div", {
+        class: "card-list",
+        onScroll: E,
+        style: f([{ width: D.value + "px" }, { height: "100%" }])
+      }, [
+        (d(!0), i(A, null, M(s.card, (c) => (d(), b(r, {
+          key: c.id,
+          class: q(["boxCard", { active: c.id == v.value }]),
+          onClick: (e) => I(c),
+          gutter: 24
+        }, {
+          default: o(() => [
+            (d(!0), i(A, null, M(z.value, (e, H) => G((d(), b(n, {
+              span: e.span,
+              key: H
+            }, {
+              default: o(() => [
+                e.type === "image" || e.fieldName === "name" ? (d(), i("div", j, [
+                  e.type === "image" ? (d(), i("img", {
+                    key: 0,
+                    src: c[e.fieldName] == null ? e.defaultValue : c[e.fieldName],
+                    width: "16px",
+                    height: "16px"
+                  }, null, 8, K)) : m("", !0),
+                  e.type === "text" && e.fieldName === "name" ? (d(), i("span", {
+                    key: 1,
+                    class: "box__title",
+                    style: f({ fontWeight: e.bold === 1 ? 500 : 400 })
+                  }, y(c[e.fieldName]), 5)) : m("", !0)
+                ])) : m("", !0),
+                e.type === "text" && e.fieldName !== "name" ? (d(), i("div", Q, [
+                  p(r, null, {
+                    default: o(() => [
+                      p(n, {
+                        span: e.labelSpan
+                      }, {
+                        default: o(() => [
+                          w("span", {
+                            style: f({ fontWeight: e.bold === 1 ? 500 : 400 })
+                          }, y(e.label) + ": ", 5)
+                        ]),
+                        _: 2
+                      }, 1032, ["span"]),
+                      e.fieldName == "state" ? (d(), b(n, {
+                        key: 0,
+                        span: e.wrapperSpan
+                      }, {
+                        default: o(() => [
+                          w("span", {
+                            style: f({ fontWeight: e.bold === 1 ? 500 : 400 })
+                          }, y(e.parsedData[c[e.fieldName]]), 5)
+                        ]),
+                        _: 2
+                      }, 1032, ["span"])) : (d(), b(n, {
+                        key: 1,
+                        span: e.wrapperSpan,
+                        class: "box__txt"
+                      }, {
+                        default: o(() => [
+                          w("span", {
+                            style: f({ fontWeight: e.bold === 1 ? 500 : 400 })
+                          }, y(c[e.fieldName]), 5)
+                        ]),
+                        _: 2
+                      }, 1032, ["span"]))
+                    ]),
+                    _: 2
+                  }, 1024)
+                ])) : m("", !0),
+                e.type === "date" ? (d(), i("div", U, [
+                  p(r, null, {
+                    default: o(() => [
+                      p(n, {
+                        span: e.labelSpan
+                      }, {
+                        default: o(() => [
+                          w("span", {
+                            style: f({ fontWeight: e.bold === 1 ? 500 : 400 })
+                          }, y(e.label) + ": ", 5)
+                        ]),
+                        _: 2
+                      }, 1032, ["span"]),
+                      p(n, {
+                        span: e.wrapperSpan,
+                        class: "box__txt"
+                      }, {
+                        default: o(() => [
+                          w("span", {
+                            style: f({ fontWeight: e.bold === 1 ? 500 : 400 })
+                          }, y(F(c[e.fieldName])), 5)
+                        ]),
+                        _: 2
+                      }, 1032, ["span"])
+                    ]),
+                    _: 2
+                  }, 1024)
+                ])) : m("", !0),
+                e.type === "progress" ? (d(), i("div", X, [
+                  p(r, null, {
+                    default: o(() => [
+                      p(n, {
+                        span: e.labelSpan
+                      }, {
+                        default: o(() => [
+                          w("span", {
+                            style: f({ fontWeight: e.bold === 1 ? 500 : 400 })
+                          }, y(e.label) + ": ", 5)
+                        ]),
+                        _: 2
+                      }, 1032, ["span"]),
+                      p(n, {
+                        span: e.wrapperSpan,
+                        class: "box__txt"
+                      }, null, 8, ["span"])
+                    ]),
+                    _: 2
+                  }, 1024)
+                ])) : m("", !0)
+              ]),
+              _: 2
+            }, 1032, ["span"])), [
+              [J, e.show == "1"]
+            ])), 128)),
+            P(t.$slots, "action", { item: c }, void 0, !0)
+          ]),
+          _: 2
+        }, 1032, ["onClick", "class"]))), 128))
+      ], 36);
+    };
+  }
+}, B = /* @__PURE__ */ T(Z, [["__scopeId", "data-v-6bcb7c73"]]);
+B.install = (s) => {
+  s.component("CardList", B);
+};
+export {
+  B as CardList,
+  B as default
+};

package/dist/card-list.umd.cjs

@@ -0,0 +1 @@
+(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.CardList={},i.Vue))})(this,(function(i,e){"use strict";function C(r){return r<10?"0"+r:r}function b(r){var d=new Date(r),f=d.getFullYear(),p=d.getMonth()+1,o=d.getDate(),m=f+"/"+C(p)+"/"+C(o);return m}const B=(r,d)=>{const f=r.__vccOpts||r;for(const[p,o]of d)f[p]=o;return f},V={key:0,class:"box__header"},D=["src"],E={key:1,class:"box__row"},I={key:2,class:"box__row"},z={key:3,class:"box__row"},N=new Map,y=new Map,_=new Map,h=B({__name:"CardList",props:{card:{type:Array,default:()=>[]},cardId:{type:[String,Number],default:()=>"0"},fetchConfig:{type:Function,default:null},propertys:{type:Array,default:()=>[]},width:{type:Number,default:0}},emits:["selectItem","scroll"],setup(r,{expose:d,emit:f}){const p=f,o=r,m=e.ref("0"),w=e.ref([]),x=e.ref(0);function M(a){if(a==null||a==="")return a;if(_.has(a))return _.get(a);const n=b(a);return _.set(a,n),n}function W(a){return Array.isArray(a)?a.map(n=>{if(n.fieldName==="state"&&!n.parsedData&&typeof n.data=="string")try{return{...n,parsedData:JSON.parse(n.data)}}catch{return{...n,parsedData:{}}}return n}):a}const L=e.computed(()=>w.value);function k(a){w.value=W(a.propertys)||[],x.value=a.width||0}const S=(a,n)=>{if(n){m.value=a[n];return}m.value=a.id,p("selectItem",a)},A=a=>{const{scrollHeight:n,scrollTop:l,clientHeight:c}=a.target;l+c>=n&&p("scroll")};return d({selectItem:S}),e.watch(()=>[o.cardId,o.fetchConfig,o.propertys,o.width],()=>{if(Array.isArray(o.propertys)&&o.propertys.length>0){k({propertys:o.propertys,width:o.width});return}if(typeof o.fetchConfig!="function")return;const a=o.cardId;if(a=="0")return;const n=N.get(a);if(n){k(n);return}let l=y.get(a);l||(l=Promise.resolve().then(()=>o.fetchConfig(a)).then(c=>{const s={propertys:c.propertys,width:c.width};return N.set(a,s),y.delete(a),s}).catch(c=>{throw y.delete(a),c}),y.set(a,l)),l.then(c=>{k(c)}).catch(()=>{w.value=[]})},{immediate:!0}),(a,n)=>{const l=e.resolveComponent("a-col"),c=e.resolveComponent("a-row");return e.openBlock(),e.createElementBlock("div",{class:"card-list",onScroll:A,style:e.normalizeStyle([{width:x.value+"px"},{height:"100%"}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.card,s=>(e.openBlock(),e.createBlock(c,{key:s.id,class:e.normalizeClass(["boxCard",{active:s.id==m.value}]),onClick:t=>S(s),gutter:24},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(L.value,(t,g)=>e.withDirectives((e.openBlock(),e.createBlock(l,{span:t.span,key:g},{default:e.withCtx(()=>[t.type==="image"||t.fieldName==="name"?(e.openBlock(),e.createElementBlock("div",V,[t.type==="image"?(e.openBlock(),e.createElementBlock("img",{key:0,src:s[t.fieldName]==null?t.defaultValue:s[t.fieldName],width:"16px",height:"16px"},null,8,D)):e.createCommentVNode("",!0),t.type==="text"&&t.fieldName==="name"?(e.openBlock(),e.createElementBlock("span",{key:1,class:"box__title",style:e.normalizeStyle({fontWeight:t.bold===1?500:400})},e.toDisplayString(s[t.fieldName]),5)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),t.type==="text"&&t.fieldName!=="name"?(e.openBlock(),e.createElementBlock("div",E,[e.createVNode(c,null,{default:e.withCtx(()=>[e.createVNode(l,{span:t.labelSpan},{default:e.withCtx(()=>[e.createElementVNode("span",{style:e.normalizeStyle({fontWeight:t.bold===1?500:400})},e.toDisplayString(t.label)+": ",5)]),_:2},1032,["span"]),t.fieldName=="state"?(e.openBlock(),e.createBlock(l,{key:0,span:t.wrapperSpan},{default:e.withCtx(()=>[e.createElementVNode("span",{style:e.normalizeStyle({fontWeight:t.bold===1?500:400})},e.toDisplayString(t.parsedData[s[t.fieldName]]),5)]),_:2},1032,["span"])):(e.openBlock(),e.createBlock(l,{key:1,span:t.wrapperSpan,class:"box__txt"},{default:e.withCtx(()=>[e.createElementVNode("span",{style:e.normalizeStyle({fontWeight:t.bold===1?500:400})},e.toDisplayString(s[t.fieldName]),5)]),_:2},1032,["span"]))]),_:2},1024)])):e.createCommentVNode("",!0),t.type==="date"?(e.openBlock(),e.createElementBlock("div",I,[e.createVNode(c,null,{default:e.withCtx(()=>[e.createVNode(l,{span:t.labelSpan},{default:e.withCtx(()=>[e.createElementVNode("span",{style:e.normalizeStyle({fontWeight:t.bold===1?500:400})},e.toDisplayString(t.label)+": ",5)]),_:2},1032,["span"]),e.createVNode(l,{span:t.wrapperSpan,class:"box__txt"},{default:e.withCtx(()=>[e.createElementVNode("span",{style:e.normalizeStyle({fontWeight:t.bold===1?500:400})},e.toDisplayString(M(s[t.fieldName])),5)]),_:2},1032,["span"])]),_:2},1024)])):e.createCommentVNode("",!0),t.type==="progress"?(e.openBlock(),e.createElementBlock("div",z,[e.createVNode(c,null,{default:e.withCtx(()=>[e.createVNode(l,{span:t.labelSpan},{default:e.withCtx(()=>[e.createElementVNode("span",{style:e.normalizeStyle({fontWeight:t.bold===1?500:400})},e.toDisplayString(t.label)+": ",5)]),_:2},1032,["span"]),e.createVNode(l,{span:t.wrapperSpan,class:"box__txt"},null,8,["span"])]),_:2},1024)])):e.createCommentVNode("",!0)]),_:2},1032,["span"])),[[e.vShow,t.show=="1"]])),128)),e.renderSlot(a.$slots,"action",{item:s},void 0,!0)]),_:2},1032,["onClick","class"]))),128))],36)}}},[["__scopeId","data-v-6bcb7c73"]]);h.install=r=>{r.component("CardList",h)},i.CardList=h,i.default=h,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/style.css

@@ -0,0 +1 @@
+[data-v-6bcb7c73]{font-family:思源黑体 CN-Normal,思源黑体 CN,sans-serif;font-weight:350;font-size:13px}.boxCard[data-v-6bcb7c73]{width:100%;color:#333;box-sizing:border-box;padding:18px 20px;cursor:pointer;text-align:left;background:#fff;border-top:1px solid #f0f0f0}.boxCard.active[data-v-6bcb7c73]{background-color:#ccc}.boxCard[data-v-6bcb7c73]:last-child{border-bottom:1px solid #f0f0f0}.box__title[data-v-6bcb7c73],.box__txt[data-v-6bcb7c73]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;display:inline-block;width:100%;box-sizing:border-box}.box__row[data-v-6bcb7c73]{margin-top:13px}.box__actions[data-v-6bcb7c73]{display:flex;justify-content:flex-end;color:#1084d0;margin-top:13px}.box__divider[data-v-6bcb7c73]{width:20px;text-align:center}.card-list[data-v-6bcb7c73]{overflow-y:auto}[data-v-6bcb7c73] .ant-row{margin:0!important}[data-v-6bcb7c73] .ant-col{padding:0!important}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "xlzw-card-list",
+  "version": "0.1.0",
+  "description": "可复用的卡片列表组件（基于 Vue 3 + ant-design-vue），支持外部注入配置请求",
+  "type": "module",
+  "main": "./dist/card-list.umd.cjs",
+  "module": "./dist/card-list.js",
+  "unpkg": "./dist/card-list.umd.cjs",
+  "exports": {
+    ".": {
+      "import": "./dist/card-list.js",
+      "require": "./dist/card-list.umd.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "vite build"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "ant-design-vue": "^4.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "less": "^4.2.0",
+    "vite": "^7.1.2",
+    "vue": "^3.5.18"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "card-list",
+    "ant-design-vue",
+    "component"
+  ],
+  "license": "MIT"
+}