2025/2/8第一次更新

dist/dev/mp-weixin/components/custom/MyGraphicCard/MyGraphicCard.js

@@ -0,0 +1,260 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const components_custom_MyGraphicCard_types = require("./types.js");
+const components_custom_MyGraphicCard_composables_graphicCardCustom = require("./composables/graphic-card-custom.js");
+const components_custom_MyGraphicCard_composables_useGraphicCard = require("./composables/use-graphic-card.js");
+if (!Math) {
+  (TnAvatar + TnIcon + TnLazyLoad + TnPhotoAlbum + TnAvatarGroup)();
+}
+const TnIcon = () => "../../../node-modules/@tuniao/tnui-vue3-uniapp/components/icon/src/icon.js";
+const TnPhotoAlbum = () => "../../../node-modules/@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album.js";
+const TnAvatar = () => "../../../node-modules/@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar.js";
+const TnAvatarGroup = () => "../../../node-modules/@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar-group.js";
+const TnLazyLoad = () => "../../../node-modules/@tuniao/tnui-vue3-uniapp/components/lazy-load/src/lazy-load.js";
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  __name: "MyGraphicCard",
+  props: components_custom_MyGraphicCard_types.graphicCardProps,
+  emits: components_custom_MyGraphicCard_types.graphicCardEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      viewUserAvatars,
+      viewUserCount,
+      imageCount,
+      previewImageHandle,
+      cardClickEvent,
+      handleAvatarClick,
+      handleMoreClick,
+      handleCommentClick,
+      handleHotClick,
+      handleLikeClick
+    } = components_custom_MyGraphicCard_composables_useGraphicCard.useGraphicCard(props, emits);
+    const {
+      ns,
+      tagClass,
+      tagStyle,
+      hotClass,
+      hotStyle,
+      commentClass,
+      commentStyle,
+      likeClass,
+      likeStyle
+    } = components_custom_MyGraphicCard_composables_graphicCardCustom.useGraphicCardCustomStyle(props);
+    function linkType(url) {
+      if (typeof url !== "string")
+        return 2;
+      const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp)$/i;
+      const videoExtensions = /\.(mp4|avi|mov|mkv|flv|wmv)$/i;
+      if (imageExtensions.test(url))
+        return 0;
+      if (videoExtensions.test(url))
+        return 1;
+      return 2;
+    }
+    return (_ctx, _cache) => {
+      var _a;
+      return common_vendor.e({
+        a: _ctx.avatar
+      }, _ctx.avatar ? {
+        b: common_vendor.p({
+          url: _ctx.avatar
+        })
+      } : {
+        c: common_vendor.t((_a = _ctx.username) == null ? void 0 : _a.slice(0, 1)),
+        d: common_vendor.p({
+          size: 80
+        })
+      }, {
+        e: common_vendor.n(common_vendor.unref(ns).e("brief-info__avatar")),
+        f: common_vendor.o(
+          //@ts-ignore
+          (...args) => common_vendor.unref(handleAvatarClick) && common_vendor.unref(handleAvatarClick)(...args)
+        ),
+        g: common_vendor.t(_ctx.title),
+        h: _ctx.description
+      }, _ctx.description ? {
+        i: common_vendor.t(_ctx.description)
+      } : {}, {
+        j: common_vendor.n(common_vendor.unref(ns).e("brief-info__data")),
+        k: common_vendor.n(common_vendor.unref(ns).e("brief-info__content")),
+        l: _ctx.showMore
+      }, _ctx.showMore ? {
+        m: common_vendor.p({
+          name: "more-vertical"
+        }),
+        n: common_vendor.n(common_vendor.unref(ns).em("brief-info__operation", "more")),
+        o: common_vendor.o(
+          //@ts-ignore
+          (...args) => common_vendor.unref(handleMoreClick) && common_vendor.unref(handleMoreClick)(...args)
+        ),
+        p: common_vendor.n(common_vendor.unref(ns).e("brief-info__operation"))
+      } : {}, {
+        q: common_vendor.n(common_vendor.unref(ns).e("brief-info")),
+        r: common_vendor.f(_ctx.tags, (tagItem, tagIndex, i0) => {
+          return {
+            a: "1bacfa93-3-" + i0,
+            b: common_vendor.t(tagItem),
+            c: tagIndex
+          };
+        }),
+        s: common_vendor.p({
+          name: "topics-fill"
+        }),
+        t: common_vendor.n(common_vendor.unref(tagClass)),
+        v: common_vendor.s(common_vendor.unref(tagStyle)),
+        w: common_vendor.n(common_vendor.unref(ns).e("content__tags")),
+        x: common_vendor.t(_ctx.content),
+        y: common_vendor.n(common_vendor.unref(ns).e("content__data")),
+        z: common_vendor.n(common_vendor.unref(ns).e("content")),
+        A: linkType(_ctx.images.slice(-1)[0]) == 0
+      }, linkType(_ctx.images.slice(-1)[0]) == 0 ? common_vendor.e({
+        B: !!common_vendor.unref(imageCount)
+      }, !!common_vendor.unref(imageCount) ? common_vendor.e({
+        C: common_vendor.unref(imageCount) === 1
+      }, common_vendor.unref(imageCount) === 1 ? {
+        D: common_vendor.p({
+          mode: "aspectFit",
+          src: _ctx.images[0]
+        }),
+        E: common_vendor.n(common_vendor.unref(ns).em("images", "item")),
+        F: common_vendor.n(common_vendor.unref(ns).is("one")),
+        G: common_vendor.o(($event) => common_vendor.unref(previewImageHandle)(0))
+      } : {}, {
+        H: common_vendor.unref(imageCount) === 2
+      }, common_vendor.unref(imageCount) === 2 ? {
+        I: common_vendor.p({
+          data: _ctx.images,
+          column: 2
+        }),
+        J: common_vendor.n(common_vendor.unref(ns).em("images", "item")),
+        K: common_vendor.n(common_vendor.unref(ns).is("two"))
+      } : {}, {
+        L: common_vendor.unref(imageCount) === 3
+      }, common_vendor.unref(imageCount) === 3 ? {
+        M: common_vendor.p({
+          mode: "aspectFit",
+          src: _ctx.images[0]
+        }),
+        N: common_vendor.o(($event) => common_vendor.unref(previewImageHandle)(0)),
+        O: common_vendor.p({
+          src: _ctx.images[1]
+        }),
+        P: common_vendor.o(($event) => common_vendor.unref(previewImageHandle)(1)),
+        Q: common_vendor.p({
+          src: _ctx.images[2]
+        }),
+        R: common_vendor.o(($event) => common_vendor.unref(previewImageHandle)(2)),
+        S: common_vendor.n(common_vendor.unref(ns).em("images", "item")),
+        T: common_vendor.n(common_vendor.unref(ns).is("three"))
+      } : {}, {
+        U: common_vendor.unref(imageCount) === 4
+      }, common_vendor.unref(imageCount) === 4 ? {
+        V: common_vendor.p({
+          data: _ctx.images,
+          column: 2
+        }),
+        W: common_vendor.n(common_vendor.unref(ns).em("images", "item")),
+        X: common_vendor.n(common_vendor.unref(ns).is("four"))
+      } : {}, {
+        Y: common_vendor.unref(imageCount) >= 5
+      }, common_vendor.unref(imageCount) >= 5 ? {
+        Z: common_vendor.p({
+          data: _ctx.images
+        })
+      } : {}, {
+        aa: common_vendor.n(common_vendor.unref(ns).e("images"))
+      }) : {}) : {}, {
+        ab: common_vendor.n(common_vendor.unref(ns).e("container")),
+        ac: linkType(_ctx.images.slice(-1)[0]) == 1
+      }, linkType(_ctx.images.slice(-1)[0]) == 1 ? common_vendor.e({
+        ad: !!common_vendor.unref(imageCount)
+      }, !!common_vendor.unref(imageCount) ? common_vendor.e({
+        ae: common_vendor.unref(imageCount) === 1
+      }, common_vendor.unref(imageCount) === 1 ? {
+        af: common_vendor.f(_ctx.images, (item, index, i0) => {
+          return {
+            a: _ctx.images[index],
+            b: index
+          };
+        }),
+        ag: common_vendor.n(common_vendor.unref(ns).em("images", "item")),
+        ah: common_vendor.n(common_vendor.unref(ns).is("one"))
+      } : {
+        ai: _ctx.images.slice(-1)[0]
+      }, {
+        aj: common_vendor.n(common_vendor.unref(ns).e("images"))
+      }) : {}) : {}, {
+        ak: _ctx.showHot
+      }, _ctx.showHot ? {
+        al: common_vendor.p({
+          name: _ctx.activeHot ? _ctx.activeHotIcon : _ctx.hotIcon
+        }),
+        am: common_vendor.t(_ctx.hotCount),
+        an: common_vendor.n(common_vendor.unref(hotClass)),
+        ao: common_vendor.s(common_vendor.unref(hotStyle)),
+        ap: common_vendor.o(
+          //@ts-ignore
+          (...args) => common_vendor.unref(handleHotClick) && common_vendor.unref(handleHotClick)(...args)
+        )
+      } : {}, {
+        aq: _ctx.showComment
+      }, _ctx.showComment ? {
+        ar: common_vendor.p({
+          name: _ctx.activeComment ? _ctx.activeCommentIcon : _ctx.commentIcon
+        }),
+        as: common_vendor.t(_ctx.commentCount),
+        at: common_vendor.n(common_vendor.unref(commentClass)),
+        av: common_vendor.s(common_vendor.unref(commentStyle)),
+        aw: common_vendor.o(
+          //@ts-ignore
+          (...args) => common_vendor.unref(handleCommentClick) && common_vendor.unref(handleCommentClick)(...args)
+        )
+      } : {}, {
+        ax: _ctx.showLike
+      }, _ctx.showLike ? {
+        ay: common_vendor.p({
+          name: _ctx.activeLike ? _ctx.activeLikeIcon : _ctx.likeIcon
+        }),
+        az: common_vendor.t(_ctx.likeCount),
+        aA: common_vendor.n(common_vendor.unref(likeClass)),
+        aB: common_vendor.s(common_vendor.unref(likeStyle)),
+        aC: common_vendor.o(
+          //@ts-ignore
+          (...args) => common_vendor.unref(handleLikeClick) && common_vendor.unref(handleLikeClick)(...args)
+        )
+      } : {}, {
+        aD: common_vendor.n(common_vendor.unref(ns).e("bottom-info__left")),
+        aE: _ctx.showViewUser && common_vendor.unref(viewUserAvatars).length || _ctx.$slots.bottomRight
+      }, _ctx.showViewUser && common_vendor.unref(viewUserAvatars).length || _ctx.$slots.bottomRight ? {
+        aF: common_vendor.f(common_vendor.unref(viewUserAvatars), (viewUserAvatar, viewUserIndex, i0) => {
+          return {
+            a: viewUserIndex,
+            b: "1bacfa93-15-" + i0 + ",1bacfa93-14",
+            c: common_vendor.p({
+              url: viewUserAvatar
+            })
+          };
+        }),
+        aG: common_vendor.p({
+          border: true,
+          size: "sm"
+        }),
+        aH: common_vendor.n(common_vendor.unref(ns).e("view-user-list")),
+        aI: common_vendor.t(_ctx.viewCount !== void 0 ? _ctx.viewCount : common_vendor.unref(viewUserCount)),
+        aJ: common_vendor.n(common_vendor.unref(ns).e("view-user-count")),
+        aK: common_vendor.n(common_vendor.unref(ns).e("bottom-info__right"))
+      } : {}, {
+        aL: common_vendor.n(common_vendor.unref(ns).e("bottom-info")),
+        aM: common_vendor.n(common_vendor.unref(ns).is("no-content", !!_ctx.$slots.bottomRight)),
+        aN: common_vendor.n(common_vendor.unref(ns).b()),
+        aO: common_vendor.o(
+          //@ts-ignore
+          (...args) => common_vendor.unref(cardClickEvent) && common_vendor.unref(cardClickEvent)(...args)
+        )
+      });
+    };
+  }
+});
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1bacfa93"]]);
+wx.createComponent(Component);

dist/dev/mp-weixin/components/custom/MyGraphicCard/MyGraphicCard.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "tn-icon": "../../../node-modules/@tuniao/tnui-vue3-uniapp/components/icon/src/icon",
+    "tn-photo-album": "../../../node-modules/@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album",
+    "tn-avatar": "../../../node-modules/@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar",
+    "tn-avatar-group": "../../../node-modules/@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar-group",
+    "tn-lazy-load": "../../../node-modules/@tuniao/tnui-vue3-uniapp/components/lazy-load/src/lazy-load"
+  }
+}

dist/dev/mp-weixin/components/custom/MyGraphicCard/MyGraphicCard.wxss

@@ -0,0 +1,216 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.tn-graphic-card.data-v-1bacfa93 {
+  position: relative;
+  width: 100%;
+  padding: 30rpx;
+  background-color: transparent;
+  /* 简要信息 start */
+  /* 简要信息 end */
+  /* 内容 start */
+  /* 图片列表 start */
+  /* 图片列表 end */
+  /* 内容 end */
+  /* 底部信息 start */
+  /* 底部信息 end */
+}
+.tn-graphic-card__brief-info.data-v-1bacfa93 {
+  display: flex;
+  align-items: center;
+  /* 简要内容 start */
+  /* 简要内容 end */
+  /* 操作按钮 start */
+  /* 操作按钮 end */
+}
+.tn-graphic-card__brief-info__content.data-v-1bacfa93 {
+  flex-grow: 1;
+  display: flex;
+}
+.tn-graphic-card__brief-info__avatar.data-v-1bacfa93 {
+  flex-shrink: 0;
+  width: 90rpx;
+  height: 90rpx;
+  border-radius: 50%;
+  background-color: var(--tn-color-gray--disabled);
+}
+.tn-graphic-card__brief-info__avatar .image.data-v-1bacfa93 {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+.tn-graphic-card__brief-info__data.data-v-1bacfa93 {
+  flex-grow: 1;
+  margin-left: 24rpx;
+  color: var(--tn-text-color-primary);
+  line-height: 1;
+  padding-top: 6rpx;
+}
+.tn-graphic-card__brief-info__data .title.data-v-1bacfa93 {
+  font-size: 30rpx;
+}
+.tn-graphic-card__brief-info__data .desc.data-v-1bacfa93 {
+  margin-top: 16rpx;
+  font-size: 24rpx;
+  color: var(--tn-color-gray);
+}
+.tn-graphic-card__brief-info__operation.data-v-1bacfa93 {
+  flex-grow: 0;
+}
+.tn-graphic-card__brief-info__operation--more.data-v-1bacfa93 {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: var(--tn-color-gray-disabled);
+  padding-left: 20rpx;
+}
+.tn-graphic-card__container.data-v-1bacfa93 {
+  margin-top: 20rpx;
+}
+.tn-graphic-card__content.data-v-1bacfa93 {
+  /* 内容标签 start */
+  /* 内容标签 end */
+  /* 内容数据 start */
+  /* 内容数据 end */
+}
+.tn-graphic-card__content__tags.data-v-1bacfa93 {
+  display: flex;
+  float: left;
+  align-items: center;
+  margin-top: 4rpx;
+}
+.tn-graphic-card__content__tags .tag-item.data-v-1bacfa93 {
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 8rpx 16rpx;
+  border-radius: 6rpx;
+  margin-right: 16rpx;
+  font-size: 24rpx;
+  line-height: 1;
+}
+.tn-graphic-card__content__data.data-v-1bacfa93 {
+  font-size: 28rpx;
+  line-height: 1.8em;
+  color: var(--tn-text-color-primary);
+  text-align: justify;
+}
+.tn-graphic-card__images.data-v-1bacfa93 {
+  width: 100%;
+  margin-top: 20rpx;
+}
+.tn-graphic-card__images--item.data-v-1bacfa93 {
+  /* 一张图片 start */
+  /* 一张图片 end */
+  /* 两张图片 start */
+  /* 两张图片 end */
+  /* 三张图片 start */
+  /* 三张图片 end */
+  /* 四张图片 start */
+  /* 四张图片 end */
+}
+.tn-graphic-card__images--item.is-one.data-v-1bacfa93 {
+  width: 70%;
+  height: 300rpx;
+  border-radius: 15rpx;
+}
+.tn-graphic-card__images--item.is-two.data-v-1bacfa93 {
+  width: 80%;
+}
+.tn-graphic-card__images--item.is-three.data-v-1bacfa93 {
+  position: relative;
+  width: 100%;
+  height: 332rpx;
+  display: flex;
+  align-items: center;
+  /* 左边单图 start */
+  /* 左边单图 end */
+  /* 右边双图 start */
+  /* 右边双图 end */
+}
+.tn-graphic-card__images--item.is-three .image-wrapper-left.data-v-1bacfa93 {
+  position: relative;
+  width: 50%;
+  height: 100%;
+}
+.tn-graphic-card__images--item.is-three .image-wrapper-left .image-container.data-v-1bacfa93 {
+  width: 100%;
+  height: 100%;
+  border-radius: 15rpx;
+}
+.tn-graphic-card__images--item.is-three .image-wrapper-right.data-v-1bacfa93 {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  margin-left: 28rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.tn-graphic-card__images--item.is-three .image-wrapper-right .image-container.data-v-1bacfa93 {
+  flex: 1;
+  width: 100%;
+  border-radius: 15rpx;
+}
+.tn-graphic-card__images--item.is-three .image-wrapper-right .image-container + .image-container.data-v-1bacfa93 {
+  margin-top: 28rpx;
+}
+.tn-graphic-card__images--item.is-four.data-v-1bacfa93 {
+  width: 80%;
+}
+.tn-graphic-card__bottom-info.data-v-1bacfa93 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16rpx;
+  /* 左边查看数据 start */
+  /* 左边查看数据 end */
+  /* 右边查看用户头像数据 start */
+  /* 右边查看用户头像数据 end */
+}
+.tn-graphic-card__bottom-info__left.data-v-1bacfa93 {
+  display: flex;
+  align-items: center;
+}
+.tn-graphic-card__bottom-info__left .count-item-data.data-v-1bacfa93 {
+  display: flex;
+  align-items: center;
+  margin-right: 20rpx;
+}
+.tn-graphic-card__bottom-info__left .count-item-data .count.data-v-1bacfa93 {
+  margin-left: 6rpx;
+}
+.tn-graphic-card__bottom-info__right.data-v-1bacfa93 {
+  display: flex;
+  align-items: center;
+}
+.tn-graphic-card__bottom-info.is-no-content.data-v-1bacfa93 {
+  margin-top: 24rpx;
+}
+.tn-graphic-card__view-user-count.data-v-1bacfa93 {
+  margin-left: 8rpx;
+  font-size: 26rpx;
+  color: var(--tn-color-gray);
+}

dist/dev/mp-weixin/components/custom/MyGraphicCard/composables/graphic-card-custom.js

@@ -0,0 +1,141 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const useGraphicCardCustomStyle = (props) => {
+  const ns = common_vendor.useNamespace("graphic-card");
+  const [tagBgColorClass, tagBgColorStyle] = common_vendor.useComponentColor(
+    common_vendor.toRef(props, "tagBgColor"),
+    "bg"
+  );
+  const [tagTextColorClass, tagTextColorStyle] = common_vendor.useComponentColor(
+    common_vendor.toRef(props, "tagTextColor"),
+    "text"
+  );
+  const [hotColorClass, hotColorStyle] = common_vendor.useComponentColor(
+    common_vendor.toRef(props, "hotColor"),
+    "text"
+  );
+  const [activeHotColorClass, activeHotColorStyle] = common_vendor.useComponentColor(
+    common_vendor.toRef(props, "activeHotColor"),
+    "text"
+  );
+  const [commentColorClass, commentColorStyle] = common_vendor.useComponentColor(
+    common_vendor.toRef(props, "commentColor"),
+    "text"
+  );
+  const [activeCommentColorClass, activeCommentColorStyle] = common_vendor.useComponentColor(
+    common_vendor.toRef(props, "activeCommentColor"),
+    "text"
+  );
+  const [likeColorClass, likeColorStyle] = common_vendor.useComponentColor(
+    common_vendor.toRef(props, "likeColor"),
+    "text"
+  );
+  const [activeLikeColorClass, activeLikeColorStyle] = common_vendor.useComponentColor(
+    common_vendor.toRef(props, "activeLikeColor"),
+    "text"
+  );
+  const tagClass = common_vendor.computed(() => {
+    const cls = [];
+    if (tagBgColorClass.value)
+      cls.push(tagBgColorClass.value);
+    if (tagTextColorClass.value)
+      cls.push(tagTextColorClass.value);
+    return cls.join(" ");
+  });
+  const tagStyle = common_vendor.computed(() => {
+    const style = {};
+    if (!tagBgColorClass.value) {
+      style.backgroundColor = tagBgColorStyle.value || "var(--tn-color-gray-disabled)";
+    }
+    if (tagTextColorStyle.value) {
+      style.color = tagTextColorStyle.value;
+    } else if (!tagTextColorClass.value && !tagBgColorClass.value) {
+      style.color = "var(--tn-text-color-primary)";
+    }
+    return style;
+  });
+  const hotClass = common_vendor.computed(() => {
+    const cls = [ns.e("hot")];
+    if (props.activeHot) {
+      if (activeHotColorClass.value)
+        cls.push(activeHotColorClass.value);
+    } else {
+      if (hotColorClass.value)
+        cls.push(hotColorClass.value);
+    }
+    return cls.join(" ");
+  });
+  const hotStyle = common_vendor.computed(() => {
+    const style = {};
+    if (props.activeHot) {
+      if (!activeHotColorClass.value) {
+        style.color = activeHotColorStyle.value || "var(--tn-color-primary)";
+      }
+    } else {
+      if (!hotColorClass.value) {
+        style.color = hotColorStyle.value || "var(--tn-color-gray)";
+      }
+    }
+    return style;
+  });
+  const commentClass = common_vendor.computed(() => {
+    const cls = [ns.e("comment")];
+    if (props.activeComment) {
+      if (activeCommentColorClass.value)
+        cls.push(activeCommentColorClass.value);
+    } else {
+      if (commentColorClass.value)
+        cls.push(commentColorClass.value);
+    }
+    return cls.join(" ");
+  });
+  const commentStyle = common_vendor.computed(() => {
+    const style = {};
+    if (props.activeComment) {
+      if (!activeCommentColorClass.value) {
+        style.color = activeCommentColorStyle.value || "var(--tn-color-primary)";
+      }
+    } else {
+      if (!commentColorClass.value) {
+        style.color = commentColorStyle.value || "var(--tn-color-gray)";
+      }
+    }
+    return style;
+  });
+  const likeClass = common_vendor.computed(() => {
+    const cls = [ns.e("like")];
+    if (props.activeLike) {
+      if (activeLikeColorClass.value)
+        cls.push(activeLikeColorClass.value);
+    } else {
+      if (likeColorClass.value)
+        cls.push(likeColorClass.value);
+    }
+    return cls.join(" ");
+  });
+  const likeStyle = common_vendor.computed(() => {
+    const style = {};
+    if (props.activeLike) {
+      if (!activeLikeColorClass.value) {
+        style.color = activeLikeColorStyle.value || "var(--tn-color-red)";
+      }
+    } else {
+      if (!likeColorClass.value) {
+        style.color = likeColorStyle.value || "var(--tn-color-gray)";
+      }
+    }
+    return style;
+  });
+  return {
+    ns,
+    tagClass,
+    tagStyle,
+    hotClass,
+    hotStyle,
+    commentClass,
+    commentStyle,
+    likeClass,
+    likeStyle
+  };
+};
+exports.useGraphicCardCustomStyle = useGraphicCardCustomStyle;

dist/dev/mp-weixin/components/custom/MyGraphicCard/composables/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("../../../../common/vendor.js");

dist/dev/mp-weixin/components/custom/MyGraphicCard/composables/use-graphic-card.js

@@ -0,0 +1,56 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const useGraphicCard = (props, emits) => {
+  const viewUserAvatars = common_vendor.ref([]);
+  const viewUserCount = common_vendor.ref(0);
+  if (props.showViewUser) {
+    viewUserAvatars.value = props.viewUserAvatars.slice(
+      0,
+      props.maxViewUserAvatarCount
+    );
+    viewUserCount.value = props.viewUserAvatars.length;
+  }
+  const imageCount = common_vendor.computed(
+    () => {
+      var _a;
+      return common_vendor.isEmptyVariableInDefault((_a = props == null ? void 0 : props.images) == null ? void 0 : _a.length, 0);
+    }
+  );
+  const previewImageHandle = (index) => {
+    common_vendor.index.previewImage({
+      urls: props.images,
+      current: index
+    });
+  };
+  const cardClickEvent = () => {
+    emits("click");
+  };
+  const handleAvatarClick = () => {
+    emits("avatar-view-click");
+  };
+  const handleMoreClick = () => {
+    emits("more-click");
+  };
+  const handleHotClick = () => {
+    emits("hot-click");
+  };
+  const handleCommentClick = () => {
+    emits("comment-click");
+  };
+  const handleLikeClick = () => {
+    emits("like-click");
+  };
+  return {
+    viewUserAvatars,
+    viewUserCount,
+    imageCount,
+    previewImageHandle,
+    cardClickEvent,
+    handleAvatarClick,
+    handleMoreClick,
+    handleHotClick,
+    handleCommentClick,
+    handleLikeClick
+  };
+};
+exports.useGraphicCard = useGraphicCard;

dist/dev/mp-weixin/components/custom/MyGraphicCard/types.js

@@ -0,0 +1,241 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const graphicCardProps = common_vendor.buildProps({
+  /**
+   * @description 头像地址
+   */
+  avatar: {
+    type: String,
+    required: true
+  },
+  /**
+   * @description 用户名
+   */
+  username: {
+    type: String,
+    required: false
+  },
+  /**
+   * @description 标题
+   */
+  title: {
+    type: String,
+    required: true
+  },
+  /**
+   * @description 描述
+   */
+  description: {
+    type: String,
+    required: true
+  },
+  /**
+   * @description 标签
+   */
+  tags: {
+    type: common_vendor.definePropType(Array),
+    default: () => []
+  },
+  /**
+   * @description 标签背景颜色，以tn开头使用图鸟内置的颜色
+   */
+  tagBgColor: String,
+  /**
+   * @description 标签文字颜色，以tn开头使用图鸟内置的颜色
+   */
+  tagTextColor: String,
+  /**
+   * @description 内容
+   */
+  content: String,
+  /**
+   * @description 图片列表
+   */
+  images: {
+    type: common_vendor.definePropType(Array),
+    default: () => []
+  },
+  /**
+   * @description 是否显示更多(是否显示顶部右边操作区域)
+   */
+  showMore: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 显示热度数量
+   */
+  showHot: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 是否激活热度
+   */
+  activeHot: Boolean,
+  /**
+   * @description 热度数量数据
+   */
+  hotCount: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @description 热度数量图标
+   */
+  hotIcon: {
+    type: String,
+    default: "rocket"
+  },
+  /**
+   * @description 激活时热度数量图标
+   */
+  activeHotIcon: {
+    type: String,
+    default: "rocket-fill"
+  },
+  /**
+   * @description 热度数量图标颜色
+   */
+  hotColor: String,
+  /**
+   * @description 激活时热度数量图标颜色
+   */
+  activeHotColor: String,
+  /**
+   * @description 显示评论数量
+   */
+  showComment: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 是否激活评论
+   */
+  activeComment: Boolean,
+  /**
+   * @description 评论数量数据
+   */
+  commentCount: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @description 评论数量图标
+   */
+  commentIcon: {
+    type: String,
+    default: "message"
+  },
+  /**
+   * @description 激活时评论数量图标
+   */
+  activeCommentIcon: {
+    type: String,
+    default: "message-fill"
+  },
+  /**
+   * @description 评论数量图标颜色
+   */
+  commentColor: String,
+  /**
+   * @description 激活时评论数量图标颜色
+   */
+  activeCommentColor: String,
+  /**
+   * @description 显示点赞数量
+   */
+  showLike: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 是否激活点赞
+   */
+  activeLike: Boolean,
+  /**
+   * @description 点赞数量数据
+   */
+  likeCount: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @description 点赞数量图标
+   */
+  likeIcon: {
+    type: String,
+    default: "like-lack"
+  },
+  /**
+   * @description 激活时点赞数量图标
+   */
+  activeLikeIcon: {
+    type: String,
+    default: "like-fill"
+  },
+  /**
+   * @description 点赞数量图标颜色
+   */
+  likeColor: String,
+  /**
+   * @description 激活时点赞数量图标颜色
+   */
+  activeLikeColor: String,
+  /**
+   * @description 显示查看用户信息
+   */
+  showViewUser: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 实际查看数量数据
+   */
+  viewCount: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @description 查看用户头像列表
+   */
+  viewUserAvatars: {
+    type: common_vendor.definePropType(Array),
+    default: () => []
+  },
+  /**
+   * @description 最大显示用户头像数量
+   */
+  maxViewUserAvatarCount: {
+    type: Number,
+    default: 4
+  }
+});
+const graphicCardEmits = {
+  /**
+   * @description 点击图文卡片
+   */
+  click: () => true,
+  /**
+   * @description 点击用户头像和浏览数量
+   */
+  "avatar-view-click": () => true,
+  /**
+   * @description 更多按钮点击
+   */
+  "more-click": () => true,
+  /**
+   * @description 点击热度数量
+   */
+  "hot-click": () => true,
+  /**
+   * @description 点击评论数量
+   */
+  "comment-click": () => true,
+  /**
+   * @description 点击点赞数量
+   */
+  "like-click": () => true
+};
+exports.graphicCardEmits = graphicCardEmits;
+exports.graphicCardProps = graphicCardProps;