@shijiu/jsview-vue-samples 2.3.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/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;
 });

package/DemoForOperator/Resize/App.vue

@@ -0,0 +1,157 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      left: 300,
+      top: 100,
+    }"
+  >
+    <Resize
+      name="resize"
+      :provideData="provideData"
+      :measures="measures"
+      :initFocusId="0"
+      :layout="widgetLayout"
+      :padding="padding"
+      :onEdge="onEdge"
+      :anim="anim"
+    >
+      <template #itemLarge="{ data }">
+        <div
+          :style="{
+            width: 400,
+            height: 120,
+            backgroundColor: '#0F0',
+            fontSize: 30,
+            transition,
+          }"
+        >
+          {{ "测试文字" + data.content + "测试文字" }}
+        </div>
+      </template>
+      <template #itemSmall="{ data, focused }">
+        <div
+          :style="{
+            width: focused ? 120 : 100,
+            height: focused ? 120 : 100,
+            backgroundColor: '#F00',
+            fontSize: 30,
+            transition,
+          }"
+        >
+          {{ data.content + (data.resizable ? "展开" : "不展开") }}
+        </div>
+      </template>
+      <template #itemLeftEdge>
+        <div
+          :style="{
+            width: 10,
+            height: 10,
+            backgroundColor: '#00F',
+          }"
+        ></div>
+      </template>
+      <template #itemRightEdge>
+        <div
+          :style="{
+            left: 90,
+            width: 10,
+            height: 10,
+            backgroundColor: '#00F',
+          }"
+        ></div>
+      </template>
+    </Resize>
+  </div>
+</template>
+
+<script setup>
+import Resize from "./Resize/Resize.vue";
+import { useFocusHub } from "jsview";
+import { onMounted } from "vue";
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const anim = {
+  duration: 200,
+  easing: "jsv-ease(0.2, 0.6, 2)",
+};
+
+const transition = `left ${anim.duration / 1000}s ${anim.easing}, top ${
+  anim.duration / 1000
+}s ${anim.easing}, width ${anim.duration / 1000}s ${anim.easing}, height ${
+  anim.duration / 1000
+}s ${anim.easing}`;
+
+const focusHub = useFocusHub();
+const dataLength = 15;
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < dataLength; ++i) {
+    data.push({
+      width: 100,
+      height: 100,
+      marginRight: 10,
+      color: randomColor(),
+      content: i,
+      resizable: i !== 5,
+      resizeDelay: 1000,
+      blurSize: {
+        w: 100,
+        h: 100,
+      },
+      focusSize: {
+        w: 120,
+        h: 120,
+      },
+      expandSize: {
+        w: 400,
+        h: 120,
+      },
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+const onEdge = (edgeInfo) => {
+  console.log("onEdge");
+};
+
+const widgetLayout = {
+  left: 0,
+  top: 0,
+  width: 700,
+  height: 200,
+};
+
+const padding = {
+  left: 80,
+  top: 50,
+  right: 80,
+  bottom: 50,
+};
+
+onMounted(() => {
+  focusHub.setFocus("resize");
+});
+</script>