@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/DemoForOperator/LongChatBox/App.vue

@@ -0,0 +1,36 @@
+<script setup>
+import LongChat from "./LongChat.vue";
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#666',
+    }"
+  >
+    <div :style="{
+      width: 1280,
+      height: 30,
+      left: 50,
+      top: 10,
+      backgroundColor: '#666',
+      fontSize: 20,
+      color: '#fff',
+    }">
+      按ok键添加对话框，按上下键滚动
+    </div>
+    <div
+      :style="{
+        top: 70,
+        left: 50,
+        width: 1280,
+        height: 600,
+        overflow: 'hidden',
+      }"
+    >
+      <LongChat />
+    </div>
+  </div>
+</template>

package/DemoForOperator/LongChatBox/Bubble.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    :style="{
+      top: -markdownTop,
+      width: visibleRect.width,
+      height: markdownHeight,
+      backgroundColor: backgroundColor,
+    }"
+  ></div>
+  <Markdown
+    ref="markdownRef"
+    :visibleRect="{ width: visibleRect.width, height: visibleRect.height }"
+    :content="''"
+    :enableLatex="false"
+    @sizechange="onSizeChange"
+  />
+</template>
+
+<script setup>
+import { ref, shallowRef, onBeforeUnmount, onMounted } from "vue";
+import { Markdown } from "@shijiu/jsview-vue-plus";
+
+const text = ref("")
+
+const emit = defineEmits(["sizechange"]);
+const props = defineProps({
+  messages: Array,
+  onDone: Function,
+  left: Number,
+  visibleRect: Object,
+  backgroundColor: String,
+});
+
+//fake data generator
+const generateList = props.messages;
+
+function* testMessageGenerator() {
+  for (const chunk of generateList) {
+    yield chunk;
+  }
+}
+const messageGen = testMessageGenerator();
+
+const addText = () => {
+  const result = messageGen.next();
+  if (result.done) {
+    console.log("所有文本已写入完成");
+    markdownRef.value.writeDone();
+    props.onDone?.();
+    return false;
+  }
+
+  text.value += result.value;
+
+  const chunk =
+    typeof result.value === "string"
+      ? result.value
+      : String(result.value ?? "");
+  markdownRef.value.write(chunk);
+  return true;
+};
+
+let timeoutHandle = -1;
+const startTestMessage = () => {
+  const tick = () => {
+    if (!addText()) {
+      timeoutHandle = -1;
+      return;
+    }
+    timeoutHandle = setTimeout(() => {
+      tick();
+    }, 80);
+  };
+  tick();
+};
+
+const stopTestMessage = () => {
+  clearTimeout(timeoutHandle);
+  timeoutHandle = -1;
+};
+
+const markdownRef = shallowRef();
+const markdownHeight = ref(0);
+const markdownTop = ref(0);
+let autoSlide = true;
+const onSizeChange = (width, height) => {
+  emit("sizechange", height);
+  markdownHeight.value = height;
+};
+
+onBeforeUnmount(() => {
+  stopTestMessage();
+});
+
+onMounted(() => {
+  startTestMessage();
+});
+
+function show() {
+  markdownRef.value?.show();
+}
+
+function hide() {
+  markdownRef.value?.hide();
+}
+
+function setVisibleRectStart(distance) {
+  markdownRef.value?.setVisibleStart(distance);
+}
+
+defineExpose({
+  show,
+  hide,
+  setVisibleRectStart,
+});
+</script>

package/DemoForOperator/LongChatBox/LongChat.vue

@@ -0,0 +1,204 @@
+<script setup>
+import { ref, reactive } from "vue";
+import {
+  data1,
+  data2,
+  data3,
+} from "./testData.js";
+import Bubble from "./Bubble.vue";
+
+//可视范围的位置
+let visibleStart = ref(0);
+
+//聊天泡泡的消息列表
+let messageList = [];
+let renderList = reactive([]);
+let totalHeight = 0;
+let generating = false;
+
+function createMessageItem(
+  key,
+  data,
+  left,
+  top,
+  width,
+  height,
+  backgroundColor
+) {
+  let item = {
+    key,
+    data,
+    left: ref(left),
+    top: ref(top),
+    width: ref(width ?? 0),
+    height: ref(height ?? 0),
+    ref: null,
+    backgroundColor: backgroundColor,
+    onDone() {
+      generating = false;
+      console.log("onDone");
+    },
+    onSizeChange(height) {
+      this.height.value = height;
+      arrangeLayout();
+      updateRenderList();
+    },
+    onRef(ref) {
+      this.ref = ref;
+    },
+    show() {
+      this.ref?.show();
+    },
+    hide() {
+      this.ref?.hide();
+    },
+  };
+  item.onDone = item.onDone.bind(item);
+  item.onSizeChange = item.onSizeChange.bind(item);
+  item.onRef = item.onRef.bind(item);
+  item.show = item.show.bind(item);
+  item.hide = item.hide.bind(item);
+  return item;
+}
+
+function arrangeLayout() {
+  //更新item的布局
+  totalHeight = 0;
+  for (let i = 0; i < messageList.length; i++) {
+    const item = messageList[i];
+    item.top.value = totalHeight;
+    totalHeight += item.height.value;
+  }
+}
+const viewWidth = 400;
+const viewHeight = 600;
+
+function updateRenderList() {
+  renderList.length = 0;
+  if (autoSlideMode) {
+    //自动保持一行模式, 根据总高度和可视范围的高度, 计算出可视范围的开始位置
+    visibleStart.value =
+      totalHeight > viewHeight ? totalHeight - viewHeight : 0;
+  }
+  for (let i = 0; i < messageList.length; i++) {
+    const item = messageList[i];
+    renderList.push(item);
+    if (
+      item.top.value + item.height.value >= visibleStart.value &&
+      item.top.value <= visibleStart.value + viewHeight
+    ) {
+      //可见的泡泡, 显示
+      item.show();
+      //此处要设置虚拟列表的可视范围的开始位置, 注意是转化为相对这个item的偏移量
+      item.ref?.setVisibleRectStart(visibleStart.value - item.top.value);
+    } else {
+      //不可见的泡泡, 隐藏
+      item.hide();
+    }
+  }
+}
+
+const messages = [data1, data2, data3];
+function addData(message) {
+  const lastItem = messageList[messageList.length - 1];
+  const item = createMessageItem(
+    messageList.length,
+    message,
+    messageList.length % 2 == 0 ? 0 : 400,
+    lastItem ? lastItem.top.value + lastItem.height.value : 0,
+    800,
+    100,
+    messageList.length % 2 ? "#339933" : "#993333"
+  );
+  messageList.push(item);
+  updateRenderList();
+  generating = true;
+}
+
+function normalizeSlidePos(pos) {
+  return Math.max(Math.min(pos, totalHeight - viewHeight), 0);
+}
+
+let autoSlideMode = true;
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 38:
+      autoSlideMode = false;
+      visibleStart.value = normalizeSlidePos(visibleStart.value - 100);
+      updateRenderList();
+      return true;
+    case 40:
+      visibleStart.value = normalizeSlidePos(visibleStart.value + 100);
+      if (visibleStart.value != totalHeight - viewHeight) {
+        autoSlideMode = false;
+      } else {
+        autoSlideMode = true;
+      }
+      updateRenderList();
+      return true;
+    case 49:
+      if (!generating) {
+        addData(messages[0]);
+      }
+      return true;
+    case 50:
+      if (!generating) {
+        addData(messages[1]);
+      }
+      return true;
+    case 51:
+      if (!generating) {
+        addData(messages[2]);
+      }
+      return true;
+  }
+  return false;
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+  ></jsv-focus-block>
+  <div
+    :style="{
+      top: -visibleStart,
+    }"
+  >
+    <template v-for="item in renderList">
+      <div
+        :style="{
+          left: item.left,
+          top: item.top,
+          width: item.width,
+          height: item.height,
+          // backgroundColor: '#99999999',
+        }"
+      >
+        <bubble
+          :messages="item.data"
+          :onDone="item.onDone"
+          :left="0"
+          :backgroundColor="item.backgroundColor"
+          :visibleRect="{
+            width: viewWidth,
+            height: viewHeight,
+          }"
+          @sizechange="item.onSizeChange"
+          :ref="item.onRef"
+        ></bubble>
+      </div>
+    </template>
+  </div>
+  <div :style="{
+    top: 10,
+    left: 900,
+    width: 250,
+    height: 300,
+    color: '#fff',
+    fontSize: 20,
+  }">{{ "1键: 长文本\n2键: 中文本\n3键: 短文本" }}</div>
+</template>

package/DemoForOperator/LongChatBox/testData.js

@@ -0,0 +1,14 @@
+export  let data1 = [
+  "<think>", "\n", "嗯", "，", "用户", "</think>",
+  "\n\n", "五一", "假期", "来", "广州", "游玩", "，", "可以", "结合", "城市", "特色", "和", "季节", "特点", "安排", "行程", "。", "以下是", "精心", "整理的", "推荐", "，", "涵盖", "不同", "主题", "和", "人群", "需求", "：\n\n", "###", " ", "一", "、", "城市", "地", "标", "与", "自然", "景观", "\n", "1", ".", " **", "广州", "塔", "+", "珠江", "夜", "游", "**", "（", "夜景", "必", "打卡", "）\n", "-", " ", "推荐", "玩法", "：", "下午", "登", "塔", "体验", "云端", "观", "景", "（", "488", "米", "观", "景", "台", "），", "傍晚", "在", "塔", "顶", "摩", "天", "轮", "看", "日落", "，", "晚上", "搭配", "珠江", "夜", "游", "（", "建议", "选", "露天", "顶层", "座位", "）。\n", "-", " ", "贴", "士", "：", "提前", "2", "天", "预约", "夜", "游", "船", "票", "，", "海", "心", "沙", "码头", "人", "流量", "较少", "。\n\n", "2", ".", " **", "白云", "山", "轻", "徒步", "**", "（", "避开", "人", "潮", "路线", "）\n", "-", " ", "小众", "路线", "：", "西门", "进", "→", "明珠", "楼", "→", "黄", "婆", "洞", "水库", "→", "摩", "星", "岭", "（", "看", "城市", "天际", "线", "），", "下山", "可", "坐", "缆", "车", "。\n", "-", " ", "特色", "体验", "：", "山", "脚", "云", "台", "花园", "的", "玫瑰", "园", "正值", "花期", "，", "适合", "拍照", "。\n\n", "###", " ", "二", "、", "文化", "深度", "体验", "\n", "1", ".", " **", "永", "庆", "坊", "+", "粤", "剧", "艺术", "博物馆", "**", "（", "西", "关", "风情", "）\n", "-", " ", "新", "玩法", "：", "参加", "非遗", "工作", "坊", "（", "广", "彩", "、", "榄", "雕", "体验", "），", "晚上", "在", "月亮", "桥", "拍", "倒", "影", "，", "周末", "有", "创意", "市", "集", "。\n", "-", " ", "隐藏", "景点", "：", "李", "小龙", "祖", "居", "的", "互动", "展览", "适合", "带孩子", "体验", "。\n\n", "2", ".", " **", "沙", "面", "岛", "+", "沿", "江西", "路", "**", "（", "复古", "摄影", "路线", "）\n", "-", " ", "拍摄", "点", "：", "沙", "面", "薄荷", "色", "洋", "房", "群", "、", "人民", "桥", "日落", "、", "爱", "群", "大厦", "复古", "街", "拍", "。\n", "-", "[DONE]",
+  "<think>", "\n", "嗯", "，", "用户", "问", "的是", "广州", "五一", "有什么", "好", "玩的", "。", "首先", "，", "我需要", "考虑", "用户", "可能的", "背景", "。", "五一", "假期", "通常是", "三天", "，", "加上", "调", "休", "可能有", "五天", "，", "所以", "用户", "可能有", "短", "途", "旅", "行的", "计划", "，", "或者", "想", "留在", "广州", "本地", "游玩", "。", "用户", "可能是", "本地", "居民", "，", "也可能是", "外地", "游客", "，", "但", "问题", "里", "提到", "广州", "，", "所以", "更", "可能是", "来", "广州", "旅游", "的人", "，", "或者", "本地", "人", "想", "找", "活动", "。", "\n\n", "接下来", "，", "我需要", "确定", "用户", "的需求", "。", "他们", "可能", "想要", "知道", "五一", "期间", "广州", "的特色", "活动", "、", "景点", "推荐", "、", "美食", "地点", "或者", "适合", "家庭", "、", "情侣", "的不同", "去处", "。", "需要", "涵盖", "自然", "景观", "、", "文化", "景点", "、", "美食", "体验", "、", "亲子", "活动", "等", "不同", "方面", "，", "以满足", "不同", "人群", "的需求", "。\n\n", "然后", "，", "考虑", "五一", "假", "期的", "特点", "。", "五一", "期间", "人", "流量", "大", "，", "热门", "景点", "可能会", "比较", "拥挤", "，", "所以", "可能需要", "推荐", "一些", "相对", "人", "少", "但", "有趣", "的地方", "，", "或者", "提醒", "用户", "提前", "预约", "。", "另外", "，", "五一", "期间", "广州", "的", "天气", "已经开始", "热", "了", "，", "建议", "用户", "注意", "防晒", "和", "补水", "。\n\n", "用户", "可能", "没有", "明确", "说明", "他们的", "兴趣", "点", "，", "所以", "需要", "全面", "覆盖", "。", "比如", "，", "喜欢", "自然的", "可以去", "白云", "山", "、", "越", "秀", "公园", "；", "喜欢", "文化的", "可以去", "陈家", "祠", "、", "沙", "面", "岛", "；", "带", "孩子的", "可以考虑", "长", "隆", "旅游", "度假", "区", "；", "喜欢", "购", "物的", "可以去", "北京", "路", "、", "天河", "城", "；", "对", "历史", "感兴趣的", "可以", "参观", "黄埔", "军校", "旧址", "等", "。\n\n", "还要", "考虑", "五一", "期间", "是否有", "特别", "的活动", "，", "比如", "展览", "、", "市", "集", "、", "灯光", "秀", "等", "。", "例如", "，", "广州", "塔", "可能有", "灯光", "秀", "，", "永", "庆", "坊", "有", "非遗", "体验", "，", "这些", "信息", "需要", "更新", "到", "最新", "，", "确保", "准确性", "。\n\n", "另外", "，", "美食", "是", "广州", "的一大", "特色", "，", "用户", "可能", "想", "体验", "地", "道的", "早", "茶", "、", "小吃", "，", "所以", "推荐", "一些", "老", "字", "号的", "餐厅", "，", "如", "陶", "陶", "居", "、", "点", "都", "德", "，", "以及", "上下", "九", "、", "西", "华", "路", "等", "美食", "街", "。\n\n", "最后", "，", "需要", "提醒", "用户", "注意", "出行", "安全", "，", "提前", "预约", "，", "避开", "高峰", "时段", "，", "以及", "疫情防控", "措施", "，", "如果有", "的话", "。", "但", "根据", "当前", "情况", "，", "可能", "不需要", "特别", "强调", "疫情", "，", "但", "还是要", "提醒", "注意", "安全", "。\n\n", "总结", "下来", "，", "回答", "需要", "结构", "清晰", "，", "分", "门", "别", "类", "，", "涵盖", "景点", "、", "活动", "、", "美食", "、", "亲子", "、", "文化", "等", "，", "同时", "提供", "实用", "建议", "，", "帮助", "用户", "规划", "行程", "。\n", "</think>",
+  "\n\n", "五一", "假期", "来", "广州", "游玩", "，", "可以", "结合", "城市", "特色", "和", "季节", "特点", "安排", "行程", "。", "以下是", "精心", "整理的", "推荐", "，", "涵盖", "不同", "主题", "和", "人群", "需求", "：\n\n", "###", " ", "一", "、", "城市", "地", "标", "与", "自然", "景观", "\n", "1", ".", " **", "广州", "塔", "+", "珠江", "夜", "游", "**", "（", "夜景", "必", "打卡", "）\n", "-", " ", "推荐", "玩法", "：", "下午", "登", "塔", "体验", "云端", "观", "景", "（", "488", "米", "观", "景", "台", "），", "傍晚", "在", "塔", "顶", "摩", "天", "轮", "看", "日落", "，", "晚上", "搭配", "珠江", "夜", "游", "（", "建议", "选", "露天", "顶层", "座位", "）。\n", "-", " ", "贴", "士", "：", "提前", "2", "天", "预约", "夜", "游", "船", "票", "，", "海", "心", "沙", "码头", "人", "流量", "较少", "。\n\n", "2", ".", " **", "白云", "山", "轻", "徒步", "**", "（", "避开", "人", "潮", "路线", "）\n", "-", " ", "小众", "路线", "：", "西门", "进", "→", "明珠", "楼", "→", "黄", "婆", "洞", "水库", "→", "摩", "星", "岭", "（", "看", "城市", "天际", "线", "），", "下山", "可", "坐", "缆", "车", "。\n", "-", " ", "特色", "体验", "：", "山", "脚", "云", "台", "花园", "的", "玫瑰", "园", "正值", "花期", "，", "适合", "拍照", "。\n\n", "###", " ", "二", "、", "文化", "深度", "体验", "\n", "1", ".", " **", "永", "庆", "坊", "+", "粤", "剧", "艺术", "博物馆", "**", "（", "西", "关", "风情", "）\n", "-", " ", "新", "玩法", "：", "参加", "非遗", "工作", "坊", "（", "广", "彩", "、", "榄", "雕", "体验", "），", "晚上", "在", "月亮", "桥", "拍", "倒", "影", "，", "周末", "有", "创意", "市", "集", "。\n", "-", " ", "隐藏", "景点", "：", "李", "小龙", "祖", "居", "的", "互动", "展览", "适合", "带孩子", "体验", "。\n\n", "2", ".", " **", "沙", "面", "岛", "+", "沿", "江西", "路", "**", "（", "复古", "摄影", "路线", "）\n", "-", " ", "拍摄", "点", "：", "沙", "面", "薄荷", "色", "洋", "房", "群", "、", "人民", "桥", "日落", "、", "爱", "群", "大厦", "复古", "街", "拍", "。\n", "-", "[DONE]",
+];
+
+export const data2 = ["中国","航天","事业","是新中国成立以来最具","代表性的科技成就","之一，它不仅","体现了国家综合实力的","提升，也承载","着中华民族探索宇宙","的梦想。从无","到有、从小","到大，中国","航天在几代","人的努力下取得了","举世瞩目的","辉煌成就。\n\n###"," **起步阶段：","艰难中的希望**\n","1956","年，中国航天","事业正式起步。","当时，在百废","待兴的情况下，","一批以钱学","森为代表的科学家毅然","回国，为新","中国的航天发展奠定了","基础。19","70年4","月24日","，中国第一颗","人造卫星“东方","红一号”成功","发射升空，","这标志着中国成为","世界上第五个能够","独立研制并发射","人造卫星的国家","。“东方红一号","”的成功拉开了","中国航天探索的新","篇章。\n\n### **","载人航天：","迈向星辰大海**\n","进入21世纪","后，中国航天","进入了快速发展的新时期","。200","3年10","月15日","，神舟五","号飞船成功将","中国首位航天员","杨利伟送","入太空，使","中国成为继苏联","和美国之后第三个","实现载人航天","飞行的国家。","此后，中国陆续","开展了多次载人","航天任务，包括","空间出舱活动","（神舟七","号）、天宫","系列目标飞行器","对接实验以及长期","驻留任务（","天宫二号","与神舟十一","号）。这些任务","为中国建设自己的空间","站积累了宝贵经验","。\n\n### **探","月工程：“嫦","娥”奔月","**\n除了载人","航天外，中国的","深空探测同样","取得了重大突破。","自200","7年起，“嫦","娥工程”正式启动","，旨在实现对","月球的全面","探测。嫦娥","一号和嫦娥","二号完成了绕","月探测任务；","嫦娥三号","实现了中国首次月","面软着陆","；而嫦娥","四号则开创","性地降落在","月球背面，","这是人类历史上第一次","。此外，嫦","娥五号成功","带回了约1",".7公斤的","月壤样本，","标志着中国具备了","从其他天体","采集样本的能力。\n\n",
+  
+  "### **火星探测","：走向更远","的未知**\n2","021年","5月15","日，天问","一号探测器成功","着陆于火星","乌托邦平原","南部预选着","陆区，成为中国","首个成功登陆火星","的探测器。","祝融号火星","车随后开始巡视","探测工作，拍摄","大量珍贵照片，并","获取了丰富的科学","数据。这次任务","不仅彰显了中国","在行星际探测","领域的实力，也为","未来进一步探索太阳","系奠定了坚实基础","。\n\n### **北斗","导航：服务全球","**\n北斗卫星导航","系统是中国自主研发的","全球卫星定位系统","。经过二十多年的","建设与发展，北斗","三号全球组","网于20","20年7","月全面建成并开通","服务。如今，","北斗系统已广泛","应用于交通运输、农业","、林业、渔业","等多个领域，同时","向世界提供高","精度定位服务，","成为与GPS并","驾齐驱的重要","基础设施。\n\n### **","未来展望：星辰","大海永不止步","**\n当前，中国","正在稳步推进新一代重型","运载火箭研发","工作，并计划实施","更多深空探测","项目，如小","行星采样返回","、木星系","探测等。同时","，中国空间站","天宫号即将","全面建成，将成为国际","上最重要的近地","轨道科研平台之一","。可以预见，在","不远的将来，","中国航天将继续书写","属于自己的传奇故事","，为全人类","认识宇宙贡献智慧","与力量。\n\n中国","航天的发展历程是一部","充满挑战与荣耀","的历史，它凝聚","了几代航天人的","智慧与汗水，","同时也激励着无数","年轻人投身科技创新的伟大","事业中。\n\n","\n","为","您","推","荐","这","些","好","看","的","影","视"]
+  
+export let data3= [
+  "五一", "假期", "来", "广州", "游玩", "，", "可以", "结合", "城市", "特色", "和", "季节", "特点", "安排", "行程", "。", "以下是", "精心", "整理的", "推荐", "，", "涵盖", "不同", "主题", "和", "人群", "需求", "：\n\n", "###", " ", "一", "、", "城市", "地", "标", "与", "自然", "景观"
+]

package/DemoForOperator/Particle/Drop/DropParticle.vue

@@ -48,23 +48,51 @@ import { JsvSpray } from "jsview";
 import { ref, onBeforeUnmount, onMounted } from "vue";
 
 const props = defineProps({
+  /**
+   * 粒子图片资源URL列表
+   * @type {Array}
+   * @required
+   */
   urlList: {
     type: Array,
     required: true,
   },
+  /**
+   * 是否自动开始动画
+   * @type {Boolean}
+   * @default true
+   */
   autoStart: {
     type: Boolean,
     default: true,
   },
+  /**
+   * 粒子容器布局配置
+   * @type {Object}
+   * @required
+   * @property {string} left - CSS left值
+   * @property {string} top - CSS top值
+   * @property {string} width - 容器宽度
+   * @property {string} height - 容器高度
+   */
   layout: {
     type: Object,
     required: true,
   },
-  // low, middle, high
+  /**
+   * 粒子数量级别
+   * @type {'low'|'middle'|'high'}
+   * @default 'middle'
+   */
   numLevel: {
     type: String,
     default: "middle",
   },
+  /**
+   * 粒子生成速度级别
+   * @type {'low'|'middle'|'high'}
+   * @default 'middle'
+   */
   sprayLevel: {
     type: String,
     default: "middle",
@@ -150,6 +178,10 @@ let list3 = sprayInfos.slice(3);
 
 let show = ref(false);
 let timeoutHandler = -1;
+/**
+ * 启动粒子动画
+ * @expose 通过defineExpose暴露给父组件调用
+ */
 function start() {
   show.value = true;
   timeoutHandler = setTimeout(() => {

package/DemoForOperator/Particle/Explode/ExplodeParticle.vue

@@ -25,14 +25,31 @@ import { JsvSpray } from "jsview";
 import { shallowRef, computed } from "vue";
 
 const props = defineProps({
+  /**
+   * 粒子容器的布局配置
+   * @type {Object}
+   * @property {string} left - 左定位（带单位）
+   * @property {string} top - 上定位（带单位）
+   * @property {number} width - 容器宽度
+   * @property {number} height - 容器高度
+   */
   layout: {
     type: Object,
-    requreid: true,
+    required: true,
   },
+  /**
+   * 粒子图片URL列表
+   * @type {Array<string>}
+   */
   urlList: {
     type: Array,
     required: true,
   },
+  /**
+   * 粒子密度级别
+   * @type {'low'|'middle'|'high'}
+   * @default 'middle'
+   */
   numLevel: {
     type: String,
     default: "middle",
@@ -53,7 +70,7 @@ function getTotalParticleNum() {
     case "high":
       return 150;
     default:
-      400;
+      return 400;
   }
 }
 
@@ -92,6 +109,10 @@ let sprayStyle = {
 };
 
 defineExpose({
+  /**
+   * 触发粒子动画开始
+   * @description 通过改变token值强制重新渲染组件来启动动画
+   */
   start() {
     ++token.value;
   },

package/DemoForOperator/PosterAnim/PosterAnim.js

@@ -5,6 +5,27 @@ const scaleLevel = [1.03, 1.07, 1.1];
 const shaleLevel = [1, 3, 5];
 
 let styleSheet = null;
+
+/**
+ * 获取海报动画配置
+ * @param {string} type - 动画类型,可选值:
+ *                       'bounce-left' - 向左弹跳
+ *                       'bounce-bottom' - 向下弹跳  
+ *                       'bounce-right' - 向右弹跳
+ *                       'bounce-top' - 向上弹跳
+ *                       'shake' - 摇晃
+ *                       'scale' - 缩放
+ *                       'breath' - 呼吸效果
+ * @param {Object} params - 动画参数
+ * @param {'low'|'middle'|'high'} params.level - 动画幅度级别
+ * @param {number} [params.scale0] - scale动画的起始缩放值
+ * @param {number} [params.scale1] - scale动画的中间缩放值
+ * @param {number} [params.scale] - breath动画的缩放值
+ * @returns {Object} 动画配置对象
+ * @property {string} name - 动画名称
+ * @property {Function} release - 释放动画资源的函数
+ */
+
 export function getPosterAnim(type, params) {
   if (!styleSheet) {
     styleSheet = getKeyFramesGroup();

package/DemoForOperator/PosterOverflow/PosterOverflow.vue

@@ -7,16 +7,32 @@
 
 <script setup>
 import { ref, watchEffect, computed } from "vue";
+
 const props = defineProps({
+  /**
+   * 控制图片显示类型
+   * @type {'small' | 'large'}
+   */
   showType: {
     type: String,
   },
+  /**
+   * 大图位置样式配置对象
+   * @type {Object}
+   * @property {string} position - 定位方式
+   * @property {string} width - 宽度
+   * @property {string} height - 高度
+   * @property {string} left - 左侧位置
+   * @property {string} top - 顶部位置
+   */
   largePos: {
     type: Object,
   },
 });
 
 const imgType = ref("small");
+
+// 监听showType变化更新图片类型
 watchEffect(() => {
   imgType.value = props.showType;
 });