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

package/DemoForOperator/LongChatBox/utile.js

@@ -1,331 +0,0 @@
-//测试文本
-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/DivMetroPerformance/App.vue

@@ -1,157 +0,0 @@
-<script>
-import { Options, Vue } from "vue-class-component";
-import { data1, data2, data3 } from "./data";
-import GridPlate from "./utils/GridPlate.vue";
-import Item from "./components/ContentItem.vue";
-import MyTab from "./components/MyTab.vue";
-import { useFocusHub } from "jsview";
-
-@Options({
-  components: {
-    GridPlate,
-    Item,
-    MyTab,
-  },
-})
-class App extends Vue {
-  constructor(props) {
-    super(props);
-    this.focusNode = null;
-    this.contentData = data1;
-    this.myId = 0;
-    this.focusStyle = {};
-    this.requestDataTime = 0;
-
-    window.sStyleChangeCount = 0;
-    window.sStyleChangeCost = 0;
-    window.sStyleTextChangeCost = 0;
-
-    window.sStylePropCount = 0;
-    window.sStylePropCost = 0;
-
-    console.log("App created");
-  }
-
-  setup() {
-    return {
-      focusHub: useFocusHub()
-    }
-  }
-
-  onKeyDown(ev) {
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      return true;
-    }
-    return false;
-  }
-
-  getMeasures() {
-    return {
-      width: 227,
-      height: 351,
-      focusable: true,
-    };
-  }
-  onFocus() {
-    console.log("App onFocus", this.$refs.rootNode);
-  }
-  onItemFocus(id) {
-    if (this.requestDataTime != 0) {
-      clearTimeout(this.requestDataTime);
-      this.requestDataTime = 0;
-    }
-    // this.requestDataTime = setTimeout(()=>{
-    if (!window.JsvDebugTimeToken) {
-      window.JsvDebugTimeToken = {
-        start: 0,
-      };
-    }
-    window.JsvDebugTimeToken.start = Date.now();
-    console.log(
-      "JsvTestTime onItemFocus start time=" + window.JsvDebugTimeToken.start
-    );
-
-    window.sStyleChangeCount = 0;
-    window.sStyleChangeCost = 0;
-    window.sStyleTextChangeCost = 0;
-    window.sStylePropCount = 0;
-    window.sStylePropCost = 0;
-
-    switch (id) {
-      case 0:
-        this.contentData = data1;
-        break;
-      case 1:
-        this.contentData = data2;
-        break;
-      case 2:
-        this.contentData = data3;
-        break;
-    }
-    this.myId = id;
-    // }, 0);
-  }
-
-  beforeUnmount() {
-    if (this.requestDataTime != 0) {
-      clearTimeout(this.requestDataTime);
-      this.requestDataTime = 0;
-    }
-  }
-
-  mounted() {
-    this.focusHub.setFocus("tab");
-    window.jJsvRuntimeBridge?.notifyPageLoaded();
-  }
-}
-
-export default App;
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="rootNode"
-    autoFocus
-    :onKeyDown="onKeyDown"
-    :onFocus="onFocus"
-  >
-    <div class="rootSize">
-      <div :style="{ left: 50, top: 50 }">
-        <my-tab name="tab" :onItemFocus="onItemFocus" />
-      </div>
-
-      <div class="widgetPos">
-        <grid-plate
-          name="simpleWidget"
-          :key="myId"
-          :data="contentData"
-          :width="1253"
-          :height="600"
-          :measures="getMeasures"
-        >
-          <template #renderItem="{ data }">
-            <Item :data="data" />
-          </template>
-        </grid-plate>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.rootSize {
-  top: 0;
-}
-
-.widgetPos {
-  top: 120;
-  left: 50;
-}
-
-.focusPos {
-  top: 10;
-  left: 10;
-}
-</style>

package/DivMetroPerformance/Item.vue

@@ -1,58 +0,0 @@
-<script>
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  methods: {
-    onFocus() {
-      this.focus = true;
-    },
-    onBlur() {
-      this.focus = false;
-    },
-    onClick() {
-      console.log("item click");
-    },
-    getStyle() {
-      const width = this.focus
-        ? (this.data.blocks.w - 10) * (1 / 0.8)
-        : this.data.blocks.w - 10;
-      const height = this.focus
-        ? (this.data.blocks.h - 10) * (1 / 0.8)
-        : this.data.blocks.h - 10;
-      const posx = this.focus ? (this.data.blocks.w - 10 - width) / 2 : 0;
-      const posy = this.focus ? (this.data.blocks.h - 10 - height) / 2 : 0;
-      return {
-        left: posx,
-        top: posy,
-        width: width,
-        height: height,
-        color: "#FFFFFF",
-        backgroundColor: this.focus ? "#FF0000" : this.data.color,
-      };
-    },
-  },
-  data() {
-    return {
-      focus: false,
-      anim: null,
-    };
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <div :style="{ ...getStyle() }">
-    {{ data.content }}
-  </div>
-</template>
-
-<style scoped></style>