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

package/FreeMoveChildAttract/App.vue

@@ -6,16 +6,16 @@
         :style="{
           top: 200,
           left: 400,
-          width: 500,
-          height: 350,
+          width: BOX_WIDTH,
+          height: BOX_HEIGHT,
           backgroundColor: '#00F00F',
         }"
       >
         <jsv-free-move-div
           ref="mActRef2"
           :style="{
-            width: 50,
-            height: 50,
+            width: MINI_BOX_WIDTH,
+            height: MINI_BOX_HEIGHT,
             backgroundColor: '#FF0000',
           }"
         />
@@ -29,6 +29,12 @@ import { JsvFreeMoveDiv, ForgeConst } from "jsview";
 import { shallowRef, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 
+const MINI_BOX_WIDTH = 50;
+const MINI_BOX_HEIGHT = 50;
+
+const BOX_WIDTH = 500;
+const BOX_HEIGHT = 350;
+
 const router = useRouter();
 const procKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
@@ -60,12 +66,16 @@ onMounted(() => {
         ForgeConst.DragFlags.TOUCH_RECV_LAST_END
     );
 
-  mActControl1.run([mActControl1.state().setTouchAttractChild(mActControl2)]);
+  mActControl1.run((cmds)=>[cmds.state().setTouchAttractChild(mActControl2)]);
 
   console.log(`OnMoved starting onMovement`);
-  mActControl2.run([
-    mActControl2
-      .condition(0, true) // 通过第二个参数设置回调为多次触发
+  mActControl2.run((cmds)=>[
+    cmds.condition({ multiTimes: true })
+     .boxPosition(0, 0, BOX_WIDTH - MINI_BOX_WIDTH, BOX_HEIGHT - MINI_BOX_HEIGHT)
+     .then([
+        cmds.action().stopMoving(true),
+      ]),
+    cmds.condition({ multiTimes: true }) // 通过第二个参数设置回调为多次触发
       .onMovement(12) // 设置x或y移动超过12时才触发回调，以此减少回调的频次，规避js的性能影响
       .then([
         (pointInfo) => {

package/FreeMoveLink/App.vue

@@ -5,51 +5,80 @@ import { FreeMoveFunc, ForgeConst } from "jsview";
 const div1 = ref();
 const div2 = ref();
 
+const AREA1_RECT = { left: 50, top: 100, width: 400, height: 400 };
+const ACTOR_SIZE = { width: 60, height: 60 };
+const AREA2_RECT = { left: 500, top: 100, width: 200, height: 200 };
+
 const control1 = new FreeMoveFunc.ActControlDebug();
 const control2 = new FreeMoveFunc.ActControlDebug();
 
 onMounted(() => {
-  const linkNexusId = FreeMoveFunc.newNexus();
+  const linkNexusNode = FreeMoveFunc.newNexus();
 
   let div1View = div1.value.jsvGetProxyView();
   control1.bindForgeView(div1View, true);
   div1View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
 
-  control1.run([
-    control1.state().startMovementSync(linkNexusId, -200, 200, -200, 200, 0b11),
+  control1.run((cmds)=> [
+    cmds.condition({ multiTimes: true })
+      .boxPosition(0, 0, AREA1_RECT.width - ACTOR_SIZE.width, AREA1_RECT.height - ACTOR_SIZE.height)
+      .then([cmds.action().stopMoving(true)]),
+    cmds.state().startMovementSync(linkNexusNode, 
+      0, AREA1_RECT.width - ACTOR_SIZE.width,
+      0, AREA1_RECT.height - ACTOR_SIZE.height, 
+      0b11),
   ]);
 
   let div2View = div2.value.jsvGetProxyView();
   control2.bindForgeView(div2View, true);
   div2View.DragEnables?.(ForgeConst.DragFlags.TOUCH_RECV_MOVE_BIT); // 只激活drag
-  control2.run([
-    control2
-      .condition()
-      .movementSync(linkNexusId)
-      .then([control2.action().ackMovementSync(-100, 100, -100, 100, 0b11, 1)]),
+  control2.run((cmds)=> [
+    // div2不设置boxPosition, 按照div1同步过来的坐标, 不应该会超过其尺寸为1/4的背景区域
+    cmds.condition({multiTimes: true})
+      .movementSync(linkNexusNode)
+      .then([cmds.action().ackMovementSync(
+        0, AREA2_RECT.width - ACTOR_SIZE.width, 
+        0, AREA2_RECT.height - ACTOR_SIZE.height, 
+        0b11, 1)]),
   ]);
 });
 </script>
 
 <template>
   <div
-    ref="div1"
     :style="{
-      left: 50,
-      top: 50,
-      width: 300,
-      height: 300,
-      backgroundColor: '#FF0000',
+      left: AREA1_RECT.left,
+      top: AREA1_RECT.top,
+      width: AREA1_RECT.width,
+      height: AREA1_RECT.height,
+      backgroundColor: '#552222FF',
     }"
-  ></div>
+  >
+    <div
+      ref="div1"
+      :style="{
+        width: ACTOR_SIZE.width,
+        height: ACTOR_SIZE.height,
+        backgroundColor: '#FF0000',
+      }"
+    />
+  </div>
   <div
-    ref="div2"
     :style="{
-      left: 550,
-      top: 50,
-      width: 100,
-      height: 100,
-      backgroundColor: '#00FF00',
+      left: AREA2_RECT.left,
+      top: AREA2_RECT.top,
+      width: AREA2_RECT.width,
+      height: AREA2_RECT.height,
+      backgroundColor: '#220055FF',
     }"
-  ></div>
+  >
+    <div
+      ref="div2"
+      :style="{
+        width: ACTOR_SIZE.width,
+        height: ACTOR_SIZE.height,
+        backgroundColor: '#00FF00',
+      }"
+    />
+  </div>
 </template>

package/Hover/App.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  >
+    <div
+      :style="{
+        left: 150,
+        top: 20,
+        width: 1000,
+        height: 30,
+        fontSize: 20,
+        backgroundColor: '#00000077',
+        color: '#ffffff',
+        textAlign: 'center',
+      }"
+    >
+      {{
+        `hover规则: 非父子关系的，只能有一个div是hover状态; 父子关系的，可以在父是hover状态时子也是hover`
+      }}
+    </div>
+    <div
+      :style="{
+        left: 150,
+        top: 150,
+        width: 300,
+        height: 300,
+        backgroundColor: '#990000',
+        transform: redHovered ? 'scale3d(1.2, 1.2, 1)' : 'scale3d(1, 1, 1)',
+        transition: 'transform 0.3s ease-in-out',
+        fontSize: 15,
+      }"
+      @mouseenter="redEnter"
+      @mouseleave="redOut"
+    >
+      父div
+      <div
+        :style="{
+          width: 100,
+          height: 100,
+          left: 100,
+          top: 100,
+          backgroundColor: '#009900',
+          transform: greenHovered ? 'scale3d(1.3, 1.3, 1)' : 'scale3d(1, 1, 1)',
+          transition: 'transform 0.3s ease-in-out',
+          fontSize: 15,
+        }"
+        @mouseenter="greenEnter"
+        @mouseleave="greenOut"
+      >
+        子div
+      </div>
+    </div>
+
+    <div
+      :style="{
+        left: 300,
+        top: 100,
+        width: 200,
+        height: 200,
+        backgroundColor: '#000099',
+        transform: blueHovered ? 'scale3d(1.2, 1.2, 1)' : 'scale3d(1, 1, 1)',
+        transition: 'transform 0.3s ease-in-out',
+      }"
+      @mouseenter="blueEnter"
+      @mouseleave="blueOut"
+    ></div>
+    <div
+      :style="{
+        left: 430,
+        top: 250,
+        width: 100,
+        height: 100,
+      }"
+      @mouseenter="emptyEnter"
+      @mouseleave="emptyOut"
+    >
+      <div
+        :style="{
+          width: 100,
+          height: 100,
+          backgroundColor: '#009900',
+          transform: emptyHovered ? 'scale3d(1.3, 1.3, 1)' : 'scale3d(1, 1, 1)',
+          transition: 'transform 0.3s ease-in-out',
+          fontSize: 15,
+        }"
+      >
+        空texture测试
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const greenHovered = ref(false);
+const blueHovered = ref(false);
+const redHovered = ref(false);
+const emptyHovered = ref(false);
+
+const blueEnter = () => {
+  console.log("blue enter");
+  blueHovered.value = true;
+};
+
+const blueOut = () => {
+  console.log("blue leave");
+  blueHovered.value = false;
+};
+
+const redEnter = () => {
+  console.log("red enter");
+  redHovered.value = true;
+};
+
+const redOut = () => {
+  console.log("red leave");
+  redHovered.value = false;
+};
+
+const greenEnter = () => {
+  greenHovered.value = true;
+  console.log("green enter");
+};
+
+const greenOut = () => {
+  greenHovered.value = false;
+  console.log("green leave");
+};
+
+const emptyEnter = () => {
+  emptyHovered.value = true;
+  console.log("empty enter");
+};
+
+const emptyOut = () => {
+  emptyHovered.value = false;
+  console.log("empty leave");
+};
+</script>

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"