@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.151-test.0

package/DemoForOperator/LongChatBox/utile.js

@@ -0,0 +1,331 @@
+//测试文本
+let string = "# 袁隆平\n\n- **姓名**：袁隆平\n- **出生日期**：1930年9月7日\n- **籍贯**：江西省九江市德安县\n- **职业**：农业科学家、杂交水稻育种专家\n- **主要成就**：成功研究出杂交水稻技术，被誉为“杂交水稻之父”\n- **荣誉**：获得共和国勋章等多项国内外荣誉\n\n袁隆平是中国著名的农业科学家，他致力于杂交水稻的研究，为解决世界粮食问题作出了巨大贡献。\n为您推荐这些好看的影视\n 测试 一级标题\n# 一级标题\n 测试---二级标题\n## 二级标题 \n测试---三级标题\n### 三级标题 \n测试---四级标题\n#### 四级标题 \n测试---五级标题\n##### 五级标题 \n测试---六级级标题\n###### 六级标题 \n 测试---水平线\n--- \n测试---无序列表\n- 无序列表项 1 \n- 无序列表项 2\n- 无序列表项 3\n- 无序列表项 4\n测试---有序列表\n1. 有序列表项 1\n2. 有序列表项 2\n3. 有序列表项 3\n测试---引用\n> 这是个引用\n测试---长段落\n`新华社`北京4月1日电　4月1日，国家主席习近平同印度总统穆尔穆互致贺电，庆祝两国建交75周年\n习近平指出，中国和印度同为文明古国、发展中大国、“全球南方”重要成员，都处在各自现代化建设的关键时期。中印关系发展历程表明，做相互成就的伙伴、实现“龙象共舞”是双方的正确选择，完全符合两国和两国人民根本利益。双方应坚持从战略高度和长远角度看待和处理中印关系，共谋相邻大国和平共处、互信互利、共同发展的相处之道，共同推进世界多极化和国际关系民主化。\n"
+
+
+function extractBracketsText(markdown) {
+    // 正则表达式：匹配 [文本](链接) 格式，捕获中括号内的文本
+    const regex = /$(.*?)$$(.*?)$/g;
+
+    const results = [];
+    let match;
+
+    // 循环提取所有匹配项的中括号内容
+    while ((match = regex.exec(markdown)) !== null) {
+        results.push(match); // 第一个捕获组（中括号内的文本）
+    }
+
+    return results; // 返回所有匹配的中括号文本数组
+}
+//api 
+//text
+//img
+//公式
+ export function TypeTransitionApi(string){
+        // img 图片
+        //gptText 文本
+        // div结构 水平线
+        if(/^-{3,}/gm.test(string)){
+            return 'horizontalLine'
+        }
+        return 'text' //默认
+
+
+ }
+// md格式 替换 latex  正则
+export function TextTransitionApi(string){
+    let tranSting = string
+        // 行内代码 、 代码块
+        // 水平线 
+        tranSting = tranSting.replace(/^-{3,}$/gm, ''); //去掉标识
+        //加粗
+        tranSting = tranSting.replace(/(\*\*|__)(.*?)\1/g, '\\textb{$2}')
+        //斜体
+        tranSting = tranSting.replace(/(\*|_)(.*?)\1/g, '\\texti{$2}')
+        // 删除线
+        tranSting = tranSting.replace(/~~(.*?)~~/g, '\\textdecoration{line-through}{$1}')
+        //链接这是个[链接](https://example.com)\n
+        tranSting = tranSting.replace((/$([^$]+)\]$([^)]+)$/g,'\\textdecoration{underline}{\\textcolor{#FF0000}{$1}}'))    
+        // tranSting = tranSting.replace(/$(.*?)$$(.*?)$/g, '\\textdecoration{underline}{\\textcolor{#FF0000}{$1}}')
+        // `` 行内代码块
+        tranSting = tranSting.replace(/`(.*?)`/g, '\\textcolor{#FF0000}{$1}')
+          
+          
+        // 行内代码
+        // .replace(/`(.*?)`/g, '<code>$1</code>')🚨
+        
+        // 图片
+        // .replace(/!$(.*?)$$(.*?)$/g, '<img src="$2" alt="$1">')🚨
+
+        //////////////////////
+        //匹配头部 处理
+       
+        // 标题:
+        if(/^######\s+(.+)/.test(string)){
+            tranSting = tranSting.replace(/^######\s+(.+)/g, '$1');
+        }else if(/^#####\s+(.+)/.test(string)){
+            tranSting = tranSting.replace(/^#####\s+(.+)/g, '$1');
+        }else if(/^####\s+(.+)/.test(string)){
+            tranSting = tranSting.replace(/^####\s+(.+)/g, '$1');
+        }else if(/^###\s+(.+)/.test(string)){
+            tranSting = tranSting.replace(/^###\s+(.+)/g, '$1');
+        }else if(/^##\s+(.+)/.test(string)){
+            tranSting = tranSting.replace(/^##\s+(.+)/g, '$1');
+        }else if(/^#\s+(.+)/.test(string)){
+            tranSting = tranSting.replace(/^#\s+(.+)/g, '$1');
+        }
+        else if (/^\s*[-*+]\s/.test(tranSting)) {
+            //无序列表 /●
+            // 无序列表
+            tranSting = tranSting.replace(/^\s*[-*+]\s+(.*)/, '● $1');
+        }else if (/^\s*\d+\.\s/.test(tranSting)) {
+            // 有序列表
+            tranSting = tranSting.replace(/^\s*(\d+)\.\s+(.*)/, '$1. $2');
+        }else if (tranSting.startsWith('> ')) {
+            // 引用块 ---- 引用 -- 两个空格
+            tranSting = tranSting.replace(/^> (.*)/, '▍ $1');
+        }else{
+            //段落   四个空格 //首行缩进
+            tranSting = '    ' + tranSting
+
+        }
+
+        return tranSting
+        
+        
+
+}
+// md格式 转 样式
+export function StyleTransitionApi(string){
+    //特殊的标签进行处理
+    const em = 28
+    const color = '#ffffff'
+    //标题 -- 加粗 、字号、行高
+    if(/^######\s+(.+)/.test(string)){
+        //h6
+        return{
+            fontSize: Math.floor(0.8 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.7*0.8 * em),
+            lineHeight:Math.floor(1.7*0.8 * em),
+            color:color,
+        }
+    }
+    if(/^#####\s+(.+)/.test(string)){
+        //h5
+        return{
+            fontSize: Math.floor(1 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.6*1 * em),
+            lineHeight:Math.floor(1.6*1 * em),
+            color:color,
+        }
+    }
+    if(/^####\s+(.+)/.test(string)){
+        //h4
+        return{
+            fontSize: Math.floor(1.2 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.5*1.2 * em),
+            lineHeight:Math.floor(1.5*1.2 * em),
+            color:color,
+        }
+    }
+    if(/^###\s+(.+)/.test(string)){
+        //h3
+        return{
+            fontSize: Math.floor(1.4 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.4*1.4 * em),
+            lineHeight:Math.floor(1.4*1.4 * em),
+            color:color,
+        }
+    }
+    if(/^##\s+(.+)/.test(string)){
+        //h2
+        return{
+            fontSize: Math.floor(1.7 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.3*1.7 * em),
+            lineHeight:Math.floor(1.3*1.7 * em),
+            color:color,
+        }
+    }
+    if(/^#\s+(.+)/.test(string)){
+        //h1
+        return{
+            fontSize: Math.floor(2 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.2*2 * em),
+            lineHeight:Math.floor(1.2*2 * em),
+            color:color,
+        }
+    }
+    // 引用块 ---- 引用 -- 加背景颜色
+    if (string.startsWith('> ')) {
+        return{
+            fontSize: em,
+            color:'#cccccc',
+            lineHeight:Math.floor(1.6* em),
+            //缩进四个字符
+        }
+    }
+    //水平线 --- <hr>
+    if(/^-{3,}$/gm.test(string)){
+        //父 margin 15 0  32
+        return {
+            top:18,
+            height:4,
+            borderRadius:2,
+            backgroundColor:color,
+        }
+    }
+
+    //默认格式
+    return{
+        fontSize: em,
+        color:color,
+        lineHeight:Math.floor(1.6* em),
+    }
+
+
+
+}
+
+export function StyleTransitionApi2(string){
+    //特殊的标签进行处理
+    const em = 28
+    const color = '#ffffff'
+    //标题 -- 加粗 、字号、行高
+    if(/^######\s?(.?)/.test(string)){
+        //h6
+        return{
+            fontSize: Math.floor(0.8 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.7*0.8 * em),
+            lineHeight:Math.floor(1.7*0.8 * em),
+            color:color,
+        }
+    }
+    if(/^#####\s?(.?)/.test(string)){
+        //h5
+        return{
+            fontSize: Math.floor(1 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.6*1 * em),
+            lineHeight:Math.floor(1.6*1 * em),
+            color:color,
+        }
+    }
+    if(/^####\s?(.?)/.test(string)){
+        //h4
+        return{
+            fontSize: Math.floor(1.2 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.5*1.2 * em),
+            lineHeight:Math.floor(1.5*1.2 * em),
+            color:color,
+        }
+    }
+    if(/^###\s?(.?)/.test(string)){
+        //h3
+        return{
+            fontSize: Math.floor(1.4 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.4*1.4 * em),
+            lineHeight:Math.floor(1.4*1.4 * em),
+            color:color,
+        }
+    }
+    if(/^##\s?(.?)/.test(string)){
+        //h2
+        return{
+            fontSize: Math.floor(1.7 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.3*1.7 * em),
+            lineHeight:Math.floor(1.3*1.7 * em),
+            color:color,
+        }
+    }
+    if(/^#\s?(.?)/.test(string)){
+        //h1
+        return{
+            fontSize: Math.floor(2 * em),
+            fontWeight:"bold",
+            height:Math.floor(1.2*2 * em),
+            lineHeight:Math.floor(1.2*2 * em),
+            color:color,
+        }
+    }
+    // 引用块 ---- 引用 -- 加背景颜色
+    if (string.startsWith('> ')) {
+        return{
+            fontSize: em,
+            color:'#cccccc',
+            lineHeight:Math.floor(1.6* em),
+            //缩进四个字符
+        }
+    }
+    //水平线 --- <hr>
+    if(/^-{3,}$/gm.test(string)){
+        //父 margin 15 0  32
+        return {
+            top:18,
+            height:4,
+            borderRadius:2,
+            backgroundColor:color,
+        }
+    }
+
+    //默认格式
+    return{
+        fontSize: em,
+        color:color,
+        lineHeight:Math.floor(1.6* em),
+    }
+
+
+
+}
+
+
+//api：未能开发：图片、表格 、代码块  、公式
+export function splitWithNewlines(str) {
+    // 匹配所有换行符类型（\r\n, \n, \r）并保留
+    return str.split(/(\r\n|\n|\r)/)
+      .reduce((acc, part, i, arr) => {
+        // 将换行符与前一个元素合并
+        if (i % 2 === 0) {
+          const newline = arr[i + 1] || '';
+          acc.push(part + newline);
+        }
+        return acc;
+      }, []);
+}
+
+//长文本 分块函数 
+export function splitStringByLength(str) {
+    const result = [];
+    const chunkSize = 112;
+    const minLastChunk = 10;
+  
+    // 遍历字符串按 150 长度分块
+    for (let i = 0; i < str.length; i += chunkSize) {
+      const chunk = str.slice(i, i + chunkSize);
+      result.push(chunk);
+    }
+  
+    // 处理最后一块的逻辑
+    if (result.length > 1) {
+      const lastChunk = result[result.length - 1];
+      if (lastChunk.length < minLastChunk) {
+        result.pop(); // 移除最后一块
+        result[result.length - 1] += lastChunk; // 合并到前一块
+      }
+    }
+  
+    return result;
+  }
+
+
+
+  

package/DemoForOperator/Particle/App.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#000000aa',
+    }"
+  ></div>
+  <div
+    :style="{
+      top: 50,
+      width: 1280,
+      height: 100,
+      fontSize: 30,
+      color: '#ffffff',
+      textAlign: 'center',
+    }"
+  >
+    按OK键爆炸效果
+  </div>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+  ></jsv-focus-block>
+  <DropParticle
+    :urlList="urlList"
+    :layout="{
+      width: 300,
+      height: 720,
+    }"
+    numLevel="high"
+    sprayLevel="middle"
+  />
+
+  <ExplodeParticle
+    ref="explodeRef"
+    :layout="{
+      left: 615,
+      top: 300,
+      width: 10,
+      height: 10,
+    }"
+    :urlList="urlList"
+    numLevel="high"
+  />
+</template>
+
+<script setup>
+import DropParticle from "./Drop/DropParticle.vue";
+import ExplodeParticle from "./Explode/ExplodeParticle.vue";
+import { shallowRef } from "vue";
+
+const star1 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/redStar.png";
+const star2 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/yellowStar.png";
+const star3 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/purpleStar.png";
+const urlList = [star1, star2, star3];
+
+const explodeRef = shallowRef();
+
+function onKeyDown(ev) {
+  if (ev.keyCode == 13) {
+    explodeRef.value?.start();
+    return true;
+  }
+  return false;
+}
+</script>

package/DemoForOperator/Particle/Drop/DropParticle.vue

@@ -0,0 +1,208 @@
+<template>
+  <div
+    v-if="show"
+    :style="{
+      left: layout.left,
+      top: layout.top,
+      width: layout.width,
+      height: layout.height,
+      overflow: 'hidden',
+    }"
+  >
+    <div
+      v-for="(item, index) in list1"
+      :key="`item_${index}`"
+      :style="{
+        top: item.pos,
+      }"
+    >
+      <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
+    </div>
+    <div v-if="showSceond">
+      <div
+        v-for="(item, index) in list2"
+        :key="`item_${index}`"
+        :style="{
+          top: item.pos,
+        }"
+      >
+        <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
+      </div>
+    </div>
+    <div v-if="showThird">
+      <div
+        v-for="(item, index) in list3"
+        :key="`item_${index}`"
+        :style="{
+          top: item.pos,
+        }"
+      >
+        <jsv-spray :pointRes="`url(${item.url})`" :sprayStyle="item.config" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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,
+  },
+  /**
+   * 粒子数量级别
+   * @type {'low'|'middle'|'high'}
+   * @default 'middle'
+   */
+  numLevel: {
+    type: String,
+    default: "middle",
+  },
+  /**
+   * 粒子生成速度级别
+   * @type {'low'|'middle'|'high'}
+   * @default 'middle'
+   */
+  sprayLevel: {
+    type: String,
+    default: "middle",
+  },
+});
+
+//获取一个随机顺序
+function getRandomOrder(numbers) {
+  let currentIndex = numbers.length,
+    temporaryValue,
+    randomIndex;
+  // 从数组的最后一个元素开始，向前遍历
+  while (currentIndex !== 0) {
+    // 选取一个随机索引
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+
+    // 交换当前索引和随机索引处的元素
+    temporaryValue = numbers[currentIndex];
+    numbers[currentIndex] = numbers[randomIndex];
+    numbers[randomIndex] = temporaryValue;
+  }
+
+  return numbers;
+}
+
+const levelToIndex = (level) => {
+  switch (level) {
+    case "low":
+      return 0;
+    case "high":
+      return 2;
+    default:
+      return 1;
+  }
+};
+const levelConfig = {
+  addSpeed: [0.001, 0.01, 0.1],
+  number: [10, 50, 100],
+};
+
+//目前版本的粒子生成有问题, 会在一开始就集中出现, 所以要随机拉开几个JsvSpray的位置
+const positionRange = [-50, -100];
+const step = (positionRange[1] - positionRange[0]) / props.urlList.length;
+const urls = getRandomOrder(props.urlList);
+const sprayInfos = [];
+for (let i = 0; i < urls.length; ++i) {
+  sprayInfos.push({
+    url: urls[i],
+    pos: positionRange[0] + step * i,
+    config: {
+      type: 1,
+      particleNum: Math.round(
+        levelConfig.number[levelToIndex(props.numLevel)] / props.urlList.length
+      ),
+      deltaAngle: 0,
+      deltaWidth: Math.round(props.layout.width / 2),
+      deltaHeight: 1,
+      pointSizeMin: 90,
+      pointSizeMax: 120,
+      speedMin: -10,
+      speedMax: -15,
+      lifeMin: 3500 + i * 200,
+      lifeMax: 4000 + i * 200,
+      accelerateX: 0,
+      accelerateY: 0,
+      particleAddSpeed: levelConfig.addSpeed[levelToIndex(props.sprayLevel)],
+      angularVelocityMin: 10,
+      angularVelocityMax: 15,
+      enableFade: false,
+      enableShrink: false,
+    },
+  });
+}
+
+//粒子数量少的时候, 添加有bug, 为了规避此处分成三拨开始
+let showSceond = ref(false);
+let showThird = ref(false);
+
+let list1 = sprayInfos.slice(0, 1);
+let list2 = sprayInfos.slice(1, 3);
+let list3 = sprayInfos.slice(3);
+
+let show = ref(false);
+let timeoutHandler = -1;
+/**
+ * 启动粒子动画
+ * @expose 通过defineExpose暴露给父组件调用
+ */
+function start() {
+  show.value = true;
+  timeoutHandler = setTimeout(() => {
+    showSceond.value = true;
+    timeoutHandler = setTimeout(() => {
+      showThird.value = true;
+    }, 700);
+  }, 700);
+}
+
+onMounted(() => {
+  if (props.autoStart) {
+    start();
+  }
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(timeoutHandler);
+});
+
+defineExpose({
+  start,
+});
+</script>