@shijiu/jsview-vue-samples 2.3.0 → 3.0.0-next-vue.0

package/HttpRequestSSE/SSEReader.js

@@ -0,0 +1,200 @@
+class SSEReader {
+    constructor() {
+        this.url = null;
+        this.headers = null;
+        this.onNewData = null;
+        this.onError = null;
+        this.onDone = null;
+        this._proccessedLength = 0;
+        this._xhr = null; // 保存 XMLHttpRequest 实例，用于取消请求
+        this._isAborted = false; // 标记请求是否被主动取消
+        /** onprogress 可能收到截断的 SSE 行，与下一段拼接后再解析 */
+        this._sseLineCarry = '';
+    }
+
+    send(post_or_get, body_json_object) {
+        // 如果已有正在进行的请求，先取消它
+        if (this._xhr) {
+            this.abort();
+        }
+
+        this._proccessedLength = 0;
+        this._sseLineCarry = '';
+        this._isAborted = false; // 重置取消标记
+        this._startTime = Date.now();
+        let open_url = this.url;
+        let xhr = new XMLHttpRequest();
+        this._xhr = xhr; // 保存 xhr 实例
+        let _this = this;
+        xhr.open(post_or_get, open_url);
+        xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
+        xhr.setRequestHeader('Accept', 'text/event-stream');
+
+        // 激活JsView的分段式获取功能
+        xhr.setRequestHeader('Jsv-Enable-Stream', '1');
+
+        // 激活JsView的onProgress时传输内容只有增量而非整量功能，避免内存峰值
+        xhr.setRequestHeader('Jsv-Increment-Progress', '1');
+
+        // 用目标对象的header进行覆盖
+        console.log('this.headers', JSON.stringify(this.headers));
+        if (this.headers) {
+            for (let key in this.headers) {
+                const value = this.headers[key];
+                console.log('key', key, 'value', value);
+                xhr.setRequestHeader(key, value);
+            }
+        }
+
+        xhr.onerror = (e) => {
+            // 如果请求已被主动取消，不触发错误回调
+            if (_this._isAborted || _this._xhr === null) {
+                return;
+            }
+            const duration = _this._startTime ? Date.now() - _this._startTime : 0;
+            const urlName = _this._extractPathFromUrl(open_url);
+            console.log(`[接口耗时] ${urlName} ${duration}ms (失败)`);
+            _this.onError?.(xhr.status, xhr.statusText, e);
+            _this._xhr = null;
+        };
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState !== 4) {
+                return;
+            }
+            // 如果请求已被主动取消，不触发回调
+            if (_this._isAborted || _this._xhr === null) {
+                return;
+            }
+            const duration = _this._startTime ? Date.now() - _this._startTime : 0;
+            const urlName = _this._extractPathFromUrl(open_url);
+            if (xhr.status === 200) {
+                console.log(`[接口耗时] ${urlName} ${duration}ms`);
+                _this._flushSseCarry();
+                _this.onDone?.();
+            } else {
+                // status 为 0 通常是请求被取消，不触发错误回调
+                if (xhr.status === 0) {
+                    console.log('[SSEReader] 请求被取消，不触发错误回调');
+                    _this._xhr = null;
+                    return;
+                }
+                console.log(`[接口耗时] ${urlName} ${duration}ms (失败)`);
+                _this.onError?.(xhr.status, xhr.statusText, null);
+            }
+            // 请求完成后清除 xhr 引用
+            _this._xhr = null;
+        };
+
+        xhr.onprogress = function (ev) {
+            // 如果请求已被主动取消，不处理数据
+            if (_this._isAborted || _this._xhr === null) {
+                return;
+            }
+            let inc_data;
+            if (window.JsvCoreApi?.Platform != 'pc-wasm') {
+                inc_data = ev.target.responseText;
+                console.log('[SSEReader] xhr.onprogress', ev.target.responseText);
+                _this._parseSSEWithCarry(inc_data);
+            } else {
+                inc_data = ev.target.responseText.substring(_this._proccessedLength);
+                _this._proccessedLength = ev.target.responseText.length;
+                _this._parseSSEWithCarry(inc_data);
+            }
+        };
+
+        if (body_json_object) {
+            xhr.send(JSON.stringify(body_json_object));
+        } else {
+            xhr.send();
+        }
+    }
+
+    _extractPathFromUrl(url) {
+        if (!url || typeof url !== 'string') return '未知';
+        try {
+            const parts = url.split('/');
+            return parts.length >= 4 ? parts.slice(3).join('/').split('?')[0] : url;
+        } catch {
+            return '未知';
+        }
+    }
+
+    /**
+     * 将上一段未以换行结束的片段与本次数据拼接，仅对完整行派发 data:
+     */
+    _parseSSEWithCarry(chunk) {
+        if (this._isAborted || this._xhr === null) {
+            return;
+        }
+        const text = this._sseLineCarry + chunk;
+        const lines = text.split('\n');
+        let carry = '';
+        if (text.length > 0 && !text.endsWith('\n')) {
+            carry = lines.pop() ?? '';
+        }
+        this._sseLineCarry = carry;
+        for (let line of lines) {
+            if (line.startsWith('data:')) {
+                this.onNewData?.(line.substring(5));
+            }
+        }
+    }
+
+    _flushSseCarry() {
+        const c = this._sseLineCarry;
+        if (!c) {
+            return;
+        }
+        if (c.startsWith('data:')) {
+            this.onNewData?.(c.substring(5));
+        }
+        this._sseLineCarry = '';
+    }
+
+    /**
+     * 取消当前请求
+     */
+    abort() {
+        if (this._xhr) {
+            this._isAborted = true; // 标记为主动取消
+            try {
+                this._xhr.abort();
+                console.log('[SSEReader] 请求已取消');
+            } catch (error) {
+                console.warn('[SSEReader] 取消请求失败:', error);
+            }
+            this._xhr = null;
+        }
+        this._sseLineCarry = '';
+    }
+}
+
+/**
+ * 使用方法:
+ * 
+    const reader = new SSEReader();
+    reader.url = 'https://dify.ragehealth.cn/lcs-optimize-akb-test/ai_wenzheng';
+    reader.headers = {
+        'Cache-Control': 'no-cache', // 可选
+    };
+    reader.onNewData = (data) => {
+        console.log(data);
+    };
+    reader.onError = (status, statusText, error) => {
+        console.error(status, statusText, error);
+    };
+    reader.onDone = () => {
+        console.log('done');
+    };
+    reader.send('POST', {
+        'a': '123',
+        'b': '456',
+        'c': 1,
+    });
+    
+    // 取消请求
+    reader.abort();
+
+ */
+export default SSEReader;

package/ImpactStop/App.vue

@@ -242,7 +242,7 @@ const procKeyDown = (ev) => {
         actorControl.run((cmds) => [
           cmds
             .action(0, 0, interactNexus)
-            .setSpdAndAccel(7.9, -24, undefined, 1, null, () => {}),
+            .setSpdAndAccel(7.88, -23, undefined, 1, null, () => {}),
           cmds
             .condition()
             .onNexusEvent(interactNexus, actEvents.SpeedRevertY)
@@ -256,7 +256,7 @@ const procKeyDown = (ev) => {
         actorControl.run((cmds) => [
           cmds
             .action(0, 0, interactNexus)
-            .setSpdAndAccel(-7.9, -24, undefined, 1, null, () => {}),
+            .setSpdAndAccel(-7.88, -23, undefined, 1, null, () => {}),
           cmds
             .condition()
             .onNexusEvent(interactNexus, actEvents.SpeedRevertY)

package/Input/FullKeyboard.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { VERTICAL, SimpleWidget } from "jsview";
+import { VERTICAL, MetroWidget } from "jsview";
 import KeyboardItem from "./KeyboardItem.vue";
 
 const props=defineProps({
@@ -53,7 +53,7 @@ const data=_initData()
 </script>
 
 <template>
-  <simple-widget
+  <metro-widget
     ref="sw"
     :name="props.name"
     :data="data"
@@ -73,5 +73,5 @@ const data=_initData()
         :onClick="props.onClick"
       />
     </template>
-  </simple-widget>
+  </metro-widget>
 </template>

package/Input/InputPanel.vue

@@ -8,7 +8,7 @@
 <script setup>
 import FullKeyboard from "./FullKeyboard.vue";
 import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
-import { shallowRef } from "vue";
+import { computed, shallowRef } from "vue";
 
 const blurColor = "#AAAAAA";
 const focusColor = "#FFFF00";
@@ -17,6 +17,8 @@ let input = shallowRef(null);
 let showCursor = shallowRef(false);
 const focusHub = useFocusHub();
 let cursorColor = shallowRef(blurColor);
+let imeAction = shallowRef(null);
+let imeActionColor = shallowRef("#ffffff");
 const props = defineProps({
   name: String,
   type: Number,
@@ -24,6 +26,44 @@ const props = defineProps({
   placeHolder: String,
   onEdge: Function,
 });
+const _randomHexColor = () => {
+  const r = Math.floor(Math.random() * 256)
+    .toString(16)
+    .padStart(2, "0");
+  const g = Math.floor(Math.random() * 256)
+    .toString(16)
+    .padStart(2, "0");
+  const b = Math.floor(Math.random() * 256)
+    .toString(16)
+    .padStart(2, "0");
+  return `#${r}${g}${b}`;
+};
+const _imeActionLabel = (action) => {
+  switch (action) {
+    case 0:
+      return "UNSPECIFIED";
+    case 1:
+      return "NONE";
+    case 2:
+      return "GO";
+    case 3:
+      return "SEARCH";
+    case 4:
+      return "SEND";
+    case 5:
+      return "NEXT";
+    case 6:
+      return "DONE";
+    case 7:
+      return "PREVIOUS";
+    default:
+      return "UNKNOWN";
+  }
+};
+const imeActionInfo = computed(() => {
+  if (imeAction.value === null || imeAction.value === undefined) return "-";
+  return `${imeAction.value} (${_imeActionLabel(imeAction.value)})`;
+});
 const _onFocus = () => {
   showCursor.value = true;
   cursorColor.value = blurColor;
@@ -58,7 +98,13 @@ const _onTextOverflow = () => {
   console.log(props.name + " text overflow.");
 };
 const _onBackKey = (isUp) => {
-  return true; // 无论是key-down还是key-up都consume，防止软键盘有时候返回会吐出导致界面回退的问题
+  // 无论是key-down还是key-up都consume，防止软键盘有时候用返回键关闭时引起界面退出的问题
+  return true;
+};
+const _onImeAction = (action) => {
+  imeAction.value = action;
+  imeActionColor.value = _randomHexColor();
+  console.log(props.name + " ime action:", action);
 };
 const _inputOnEdge = (edgeInfo) => {
   if (edgeInfo.direction === EdgeDirection.bottom) {
@@ -110,9 +156,23 @@ const _inputOnEdge = (edgeInfo) => {
       :onTextOverflow="_onTextOverflow"
       :cursorColor="cursorColor"
       :onBackKey="_onBackKey"
+      :onImeAction="_onImeAction"
     />
 
-    <div :style="{ top: 100 }">
+    <div
+      :style="{
+        left: 50,
+        top: 95,
+        width: 300,
+        height: 20,
+        color: imeActionColor,
+        fontSize: 16,
+      }"
+    >
+      IME action: {{ imeActionInfo }}
+    </div>
+
+    <div :style="{ top: 110 }">
       <full-keyboard
         :name="`${props.name}/keyboard`"
         :onClick="_keyboardOnClick"

package/JsvLine/App.vue

@@ -16,60 +16,75 @@
 </template>
 
 <script setup>
+import { shallowRef, onMounted, onBeforeUnmount } from "vue"
 import { JsvLine } from "jsview"
 import bg from "./bgimage.jpg"
 
-const startPos1={
-    x:340,
-    y:40
+const startPos1 = {
+    x: 340,
+    y: 40
 }
-const endPos1={
-    x:340,
-    y:160
+const endPos1 = {
+    x: 340,
+    y: 160
 }
 
-const startPos2={
-    x:840,
-    y:150
-}
-const endPos2={
-    x:1040,
-    y:50
-}
+// 修改为响应式并定时切换
+const states = [
+    { start: { x: 840, y: 150 }, end: { x: 1040, y: 50 } },
+    { start: { x: 840, y: 150 }, end: { x: 1140, y: 100 } }
+];
+const startPos2 = shallowRef({ ...states[0].start });
+const endPos2 = shallowRef({ ...states[0].end });
+
+let posIndex = 0;
+let timer = null;
+
+onMounted(() => {
+    timer = setInterval(() => {
+        posIndex = (posIndex + 1) % states.length;
+        startPos2.value = { ...states[posIndex].start };
+        endPos2.value = { ...states[posIndex].end };
+    }, 1500);
+});
+onBeforeUnmount(() => {
+    clearInterval(timer);
+});
 
-const startPos3={
-    x:340,
-    y:300
+// 其它样例保持不变
+const startPos3 = {
+    x: 340,
+    y: 300
 }
-const endPos3={
-    x:560,
-    y:400
+const endPos3 = {
+    x: 560,
+    y: 400
 }
 
-const startPos4={
-    x:760,
-    y:400
+const startPos4 = {
+    x: 760,
+    y: 400
 }
-const endPos4={
-    x:980,
-    y:300
+const endPos4 = {
+    x: 980,
+    y: 300
 }
 
-const startPos5={
-    x:240,
-    y:550
+const startPos5 = {
+    x: 240,
+    y: 550
 }
-const endPos5={
-    x:500,
-    y:520
+const endPos5 = {
+    x: 500,
+    y: 520
 }
-const startPos6={
-    x:840,
-    y:520
+const startPos6 = {
+    x: 840,
+    y: 520
 }
-const endPos6={
-    x:1100,
-    y:550
+const endPos6 = {
+    x: 1100,
+    y: 550
 }
 </script>
 

package/LatexDemo/App.vue

@@ -10,6 +10,8 @@ const baseStyle = {
 
 //TODO 此字符串直接写在双花括号内编译出错, 待调查
 const text = "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字";
+
+const testText = `测试\\textcolor{#FF0000}{{红色}试花括号{ 文字 }}文字`
 </script>
 
 <template>
@@ -19,7 +21,7 @@ const text = "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字";
     :style="{ top: 50, ...baseStyle }"
     class="textStyle"
   >
-    {{ "测试\\textcolor{#FF0000}{红色}文字" }}
+    {{ testText }}
   </jsv-text-box>
   <jsv-text-box
     :enableLatex="true"

package/LatexFormula/App.vue

@@ -78,8 +78,189 @@ const stringList = [
 
 这个角的正切值是 \\(0.75\\)，余切值是 \\(1.33333333\\)。`,
   },
+  {
+    width: 1100,
+    detail: '说明：超长的公式文本不会描画',
+    str: `
+    测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\
+  测试\\\\`,
+  },
 ];
 const dataIndex = ref(0);
+const testDetail = ref("");
 const width = computed(() => {
   return stringList[dataIndex.value].width;
 });
@@ -90,6 +271,10 @@ const latexStr = computed(() => {
   return processLatexStr(s);
 });
 
+const detail = computed(() => {
+  return stringList[dataIndex.value].detail || '';
+});
+
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
     case 37:
@@ -117,6 +302,17 @@ const onKeyDown = (ev) => {
       backgroundColor: '#007788',
     }"
   ></jsv-focus-block>
+  <div
+    :style="{
+      width: 320,
+      left: 1280 - 320,
+      top: 30,
+      height: 200,
+      fontSize: 20,
+    }"
+  >
+    {{ detail }}
+  </div>
   <jsv-latex
     :key="dataIndex"
     :latexStr="latexStr"

package/LongImage/App.vue

@@ -4,7 +4,7 @@
  * 带下拉条的长图片展示样例
  *
  * 【控件介绍】
- * SimpleWidget：见simpleMetrowidget
+ * MetroWidget：见MetroWidget.vue的头说明
  *
  * 【技巧说明】
  * Q: 如何让图片的高度自适应？