feat: 更新包管理器为 bun，优化项目配置和资源管理
- 将包管理器从 pnpm 更改为 bun，提升依赖管理效率。 - 在 index.html 中引入 jQuery 和 videoajax.js，增强页面功能。 - 删除 pnpm-lock.yaml 文件，清理不必要的锁定文件。 - 在多个组件中优化状态管理和访问逻辑，提升用户体验。 - 更新多个页面和组件以支持新的状态管理方式，确保数据一致性。
This commit is contained in:
zhongyidian committed
1 parent
ac5a2159a1
commit
7bbeb10e57
33 files changed
+2290
-4530
No files matched your search
@@ -1,5 +1,5 @@
|
|||||||
# 锁定包管理器为 pnpm
|
# 锁定包管理器为 bun
|
||||||
package-manager=pnpm
|
package-manager=bun
|
||||||
|
|
||||||
# 严格模式：不允许使用其他包管理器
|
# 严格模式：不允许使用其他包管理器
|
||||||
engine-strict=true
|
engine-strict=true
|
||||||
|
|||||||
@@ -8,10 +8,12 @@
|
|||||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
|
||||||
/>
|
/>
|
||||||
<meta name="referrer" content="no-referrer" />
|
<meta name="referrer" content="no-referrer" />
|
||||||
|
<script type="text/javascript" src="./videoajax/jquery-3.7.1.min.js"></script>
|
||||||
<title>沪上又见故人来</title>
|
<title>沪上又见故人来</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
<script src="./videoajax/videoajax.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
+2
-8
@@ -3,10 +3,9 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"packageManager": "pnpm@10.18.3",
|
"packageManager": "bun@1.3.8",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=18.0.0",
|
"bun": ">=1.0.0"
|
||||||
"pnpm": ">=10.0.0"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
@@ -57,10 +56,5 @@
|
|||||||
"typescript": "^5.9.3",
|
"typescript": "^5.9.3",
|
||||||
"typescript-eslint": "^8.46.1",
|
"typescript-eslint": "^8.46.1",
|
||||||
"vite": "^7.1.7"
|
"vite": "^7.1.7"
|
||||||
},
|
|
||||||
"pnpm": {
|
|
||||||
"onlyBuiltDependencies": [
|
|
||||||
"core-js"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Generated
-4482
File diff suppressed because it is too large.
Load diff
Vendored
+2
@@ -0,0 +1,2 @@
|
|||||||
|
/*! jQuery v3.7.1 | (c) OpenJS Foundation and other contributors | jquery.org/license */
|
||||||
|
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(ie,e){"use strict";var oe=[],r=Object.getPrototypeOf,ae=oe.slice,g=oe.flat?function(e){return oe.flat.call(e)}:function(e){return oe.concat.apply([],e)},s=oe.push,se=oe.indexOf,n={},i=n.toString,ue=n.hasOwnProperty,o=ue.toString,a=o.call(Object),le={},v=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},y=function(e){return null!=e&&e===e.window},C=ie.document,u={type:!0,src:!0,nonce:!0,noModule:!0};function m(e,t,n){var r,i,o=(n=n||C).createElement("script");if(o.text=e,t)for(r in u)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function x(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[i.call(e)]||"object":typeof e}var t="3.7.1",l=/HTML$/i,ce=function(e,t){return new ce.fn.init(e,t)};function c(e){var t=!!e&&"length"in e&&e.length,n=x(e);return!v(e)&&!y(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}function fe(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}ce.fn=ce.prototype={jquery:t,constructor:ce,length:0,toArray:function(){return ae.call(this)},get:function(e){return null==e?ae.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=ce.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return ce.each(this,e)},map:function(n){return this.pushStack(ce.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(ae.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(ce.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(ce.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:s,sort:oe.sort,splice:oe.splice},ce.extend=ce.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||v(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(ce.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||ce.isPlainObject(n)?n:{},i=!1,a[t]=ce.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},ce.extend({expando:"jQuery"+(t+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==i.call(e))&&(!(t=r(e))||"function"==typeof(n=ue.call(t,"constructor")&&t.constructor)&&o.call(n)===a)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){m(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(c(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},text:function(e){var t,n="",r=0,i=e.nodeType;if(!i)while(t=e[r++])n+=ce.text(t);return 1===i||11===i?e.textContent:9===i?e.documentElement.textContent:3===i||4===i?e.nodeValue:n},makeArray:function(e,t){var n=t||[];return null!=e&&(c(Object(e))?ce.merge(n,"string"==typeof e?[e]:e):s.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:se.call(t,e,n)},isXMLDoc:function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!l.test(t||n&&n.nodeName||"HTML")},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(c(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:le}),"function"==typeof Symbol&&(ce.fn[Symbol.iterator]=oe[Symbol.iterator]),ce.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var pe=oe.pop,de=oe.sort,he=oe.splice,ge="[\\x20\\t\\r\\n\\f]",ve=new RegExp("^"+ge+"+|((?:^|[^\\\\])(?:\\\\.)*)"+ge+"+$","g");ce.contains=function(e,t){var n=t&&t.parentNode;return e===n||!(!n||1!==n.nodeType||!(e.contains?e.contains(n):e.compareDocumentPosition&&16&e.compareDocumentPosition(n)))};var f=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g;function p(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e}ce.escapeSelector=function(e){return(e+"").replace(f,p)};var ye=C,me=s;!function(){var e,b,w,o,a,T,r,C,d,i,k=me,S=ce.expando,E=0,n=0,s=W(),c=W(),u=W(),h=W(),l=function(e,t){return e===t&&(a=!0),0},f="checked|selected|async|autofocus|autoplay|conLine truncated
|
||||||
@@ -0,0 +1,407 @@
|
|||||||
|
/*
|
||||||
|
* $Id: base64.js,v 2.15 2014/04/05 12:58:57 dankogai Exp dankogai $
|
||||||
|
*
|
||||||
|
* Licensed under the MIT license.
|
||||||
|
* http://opensource.org/licenses/mit-license
|
||||||
|
*
|
||||||
|
* References:
|
||||||
|
* http://en.wikipedia.org/wiki/Base64
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function(global) {
|
||||||
|
'use strict';
|
||||||
|
// existing version for noConflict()
|
||||||
|
var _Base64 = global.Base64;
|
||||||
|
var version = "2.1.5";
|
||||||
|
// if node.js, we use Buffer
|
||||||
|
var buffer;
|
||||||
|
if (typeof module !== 'undefined' && module.exports) {
|
||||||
|
buffer = require('buffer').Buffer;
|
||||||
|
}
|
||||||
|
// constants
|
||||||
|
var b64chars
|
||||||
|
= 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
|
||||||
|
var b64tab = function(bin) {
|
||||||
|
var t = {};
|
||||||
|
for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;
|
||||||
|
return t;
|
||||||
|
}(b64chars);
|
||||||
|
var fromCharCode = String.fromCharCode;
|
||||||
|
// encoder stuff
|
||||||
|
var cb_utob = function(c) {
|
||||||
|
if (c.length < 2) {
|
||||||
|
var cc = c.charCodeAt(0);
|
||||||
|
return cc < 0x80 ? c
|
||||||
|
: cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))
|
||||||
|
+ fromCharCode(0x80 | (cc & 0x3f)))
|
||||||
|
: (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))
|
||||||
|
+ fromCharCode(0x80 | ((cc >>> 6) & 0x3f))
|
||||||
|
+ fromCharCode(0x80 | ( cc & 0x3f)));
|
||||||
|
} else {
|
||||||
|
var cc = 0x10000
|
||||||
|
+ (c.charCodeAt(0) - 0xD800) * 0x400
|
||||||
|
+ (c.charCodeAt(1) - 0xDC00);
|
||||||
|
return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))
|
||||||
|
+ fromCharCode(0x80 | ((cc >>> 12) & 0x3f))
|
||||||
|
+ fromCharCode(0x80 | ((cc >>> 6) & 0x3f))
|
||||||
|
+ fromCharCode(0x80 | ( cc & 0x3f)));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var re_utob = /[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;
|
||||||
|
var utob = function(u) {
|
||||||
|
return u.replace(re_utob, cb_utob);
|
||||||
|
};
|
||||||
|
var cb_encode = function(ccc) {
|
||||||
|
var padlen = [0, 2, 1][ccc.length % 3],
|
||||||
|
ord = ccc.charCodeAt(0) << 16
|
||||||
|
| ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)
|
||||||
|
| ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),
|
||||||
|
chars = [
|
||||||
|
b64chars.charAt( ord >>> 18),
|
||||||
|
b64chars.charAt((ord >>> 12) & 63),
|
||||||
|
padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),
|
||||||
|
padlen >= 1 ? '=' : b64chars.charAt(ord & 63)
|
||||||
|
];
|
||||||
|
return chars.join('');
|
||||||
|
};
|
||||||
|
var btoa = global.btoa ? function(b) {
|
||||||
|
return global.btoa(b);
|
||||||
|
} : function(b) {
|
||||||
|
return b.replace(/[\s\S]{1,3}/g, cb_encode);
|
||||||
|
};
|
||||||
|
var _encode = buffer
|
||||||
|
? function (u) { return (new buffer(u)).toString('base64') }
|
||||||
|
: function (u) { return btoa(utob(u)) }
|
||||||
|
;
|
||||||
|
var encode = function(u, urisafe) {
|
||||||
|
return !urisafe
|
||||||
|
? _encode(u)
|
||||||
|
: _encode(u).replace(/[+\/]/g, function(m0) {
|
||||||
|
return m0 == '+' ? '-' : '_';
|
||||||
|
}).replace(/=/g, '');
|
||||||
|
};
|
||||||
|
var encodeURI = function(u) { return encode(u, true) };
|
||||||
|
// decoder stuff
|
||||||
|
var re_btou = new RegExp([
|
||||||
|
'[\xC0-\xDF][\x80-\xBF]',
|
||||||
|
'[\xE0-\xEF][\x80-\xBF]{2}',
|
||||||
|
'[\xF0-\xF7][\x80-\xBF]{3}'
|
||||||
|
].join('|'), 'g');
|
||||||
|
var cb_btou = function(cccc) {
|
||||||
|
switch(cccc.length) {
|
||||||
|
case 4:
|
||||||
|
var cp = ((0x07 & cccc.charCodeAt(0)) << 18)
|
||||||
|
| ((0x3f & cccc.charCodeAt(1)) << 12)
|
||||||
|
| ((0x3f & cccc.charCodeAt(2)) << 6)
|
||||||
|
| (0x3f & cccc.charCodeAt(3)),
|
||||||
|
offset = cp - 0x10000;
|
||||||
|
return (fromCharCode((offset >>> 10) + 0xD800)
|
||||||
|
+ fromCharCode((offset & 0x3FF) + 0xDC00));
|
||||||
|
case 3:
|
||||||
|
return fromCharCode(
|
||||||
|
((0x0f & cccc.charCodeAt(0)) << 12)
|
||||||
|
| ((0x3f & cccc.charCodeAt(1)) << 6)
|
||||||
|
| (0x3f & cccc.charCodeAt(2))
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return fromCharCode(
|
||||||
|
((0x1f & cccc.charCodeAt(0)) << 6)
|
||||||
|
| (0x3f & cccc.charCodeAt(1))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var btou = function(b) {
|
||||||
|
return b.replace(re_btou, cb_btou);
|
||||||
|
};
|
||||||
|
var cb_decode = function(cccc) {
|
||||||
|
var len = cccc.length,
|
||||||
|
padlen = len % 4,
|
||||||
|
n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)
|
||||||
|
| (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)
|
||||||
|
| (len > 2 ? b64tab[cccc.charAt(2)] << 6 : 0)
|
||||||
|
| (len > 3 ? b64tab[cccc.charAt(3)] : 0),
|
||||||
|
chars = [
|
||||||
|
fromCharCode( n >>> 16),
|
||||||
|
fromCharCode((n >>> 8) & 0xff),
|
||||||
|
fromCharCode( n & 0xff)
|
||||||
|
];
|
||||||
|
chars.length -= [0, 0, 2, 1][padlen];
|
||||||
|
return chars.join('');
|
||||||
|
};
|
||||||
|
var atob = global.atob ? function(a) {
|
||||||
|
return global.atob(a);
|
||||||
|
} : function(a){
|
||||||
|
return a.replace(/[\s\S]{1,4}/g, cb_decode);
|
||||||
|
};
|
||||||
|
var _decode = buffer
|
||||||
|
? function(a) { return (new buffer(a, 'base64')).toString() }
|
||||||
|
: function(a) { return btou(atob(a)) };
|
||||||
|
var decode = function(a){
|
||||||
|
return _decode(
|
||||||
|
a.replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })
|
||||||
|
.replace(/[^A-Za-z0-9\+\/]/g, '')
|
||||||
|
);
|
||||||
|
};
|
||||||
|
var noConflict = function() {
|
||||||
|
var Base64 = global.Base64;
|
||||||
|
global.Base64 = _Base64;
|
||||||
|
return Base64;
|
||||||
|
};
|
||||||
|
// export Base64
|
||||||
|
global.Base64 = {
|
||||||
|
VERSION: version,
|
||||||
|
atob: atob,
|
||||||
|
btoa: btoa,
|
||||||
|
fromBase64: decode,
|
||||||
|
toBase64: encode,
|
||||||
|
utob: utob,
|
||||||
|
encode: encode,
|
||||||
|
encodeURI: encodeURI,
|
||||||
|
btou: btou,
|
||||||
|
decode: decode,
|
||||||
|
noConflict: noConflict
|
||||||
|
};
|
||||||
|
// if ES5 is available, make Base64.extendString() available
|
||||||
|
if (typeof Object.defineProperty === 'function') {
|
||||||
|
var noEnum = function(v){
|
||||||
|
return {value:v,enumerable:false,writable:true,configurable:true};
|
||||||
|
};
|
||||||
|
global.Base64.extendString = function () {
|
||||||
|
Object.defineProperty(
|
||||||
|
String.prototype, 'fromBase64', noEnum(function () {
|
||||||
|
return decode(this)
|
||||||
|
}));
|
||||||
|
Object.defineProperty(
|
||||||
|
String.prototype, 'toBase64', noEnum(function (urisafe) {
|
||||||
|
return encode(this, urisafe)
|
||||||
|
}));
|
||||||
|
Object.defineProperty(
|
||||||
|
String.prototype, 'toBase64URI', noEnum(function () {
|
||||||
|
return encode(this, true)
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// that's it!
|
||||||
|
})(this);
|
||||||
|
|
||||||
|
if (this['Meteor']) {
|
||||||
|
Base64 = global.Base64; // for normal export in Meteor.js
|
||||||
|
}
|
||||||
|
|
||||||
|
; (function (root) {
|
||||||
|
// body...
|
||||||
|
|
||||||
|
var videoajax = function (argument) {
|
||||||
|
// body...
|
||||||
|
var host = '/';
|
||||||
|
|
||||||
|
this._setHost=function(hoststr) {
|
||||||
|
host = hoststr;
|
||||||
|
};
|
||||||
|
this._getHost = function(){
|
||||||
|
return host;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.extend(videoajax.prototype,{
|
||||||
|
/**
|
||||||
|
* 设置主域名
|
||||||
|
* @param hosts {String} default: '/' 主域名字符串
|
||||||
|
*/
|
||||||
|
setHost :function(hosts){
|
||||||
|
this._setHost(hosts);
|
||||||
|
},
|
||||||
|
//user_id,course_id,lesson_id，break_point
|
||||||
|
/**
|
||||||
|
* 播放退出时间点
|
||||||
|
* @param data {dataObject} 向后台传递的数据对象，应该包含
|
||||||
|
* user_id {Number} 用户ID
|
||||||
|
* course_id {Number} 课程ID
|
||||||
|
* lesson_id {Number} 课时ID
|
||||||
|
* break_point {Number} 断点
|
||||||
|
*@param callback {Function} 回调方法
|
||||||
|
*/
|
||||||
|
quitBreakPoint:function(data,callback){
|
||||||
|
var paramfiled = ["user_id","course_id","lesson_id","break_point"];
|
||||||
|
var dataStr = verfiyData(paramfiled,data);
|
||||||
|
getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addBreakPoint',{
|
||||||
|
userViewPoint:dataStr
|
||||||
|
},function(data){
|
||||||
|
isFunction(callback) ? callback(data.code == 200,data) : '';
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* user_id:123,course_id:23,lesson_id:3
|
||||||
|
*播放历史记录
|
||||||
|
* @param data {dataObject} 向后台传递的数据对象，应该包含
|
||||||
|
* user_id {Number} 用户ID
|
||||||
|
* course_id {Number} 课程ID
|
||||||
|
* lesson_id {Number} 课时ID
|
||||||
|
*@param callback {Function} 回调方法
|
||||||
|
*/
|
||||||
|
getBreakPoint:function(data,callback){
|
||||||
|
var paramfiled = ["user_id","course_id","lesson_id"];
|
||||||
|
var dataStr = verfiyData(paramfiled,data);
|
||||||
|
getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=userbreakpoint',{
|
||||||
|
userCourseInfo:dataStr
|
||||||
|
},function(data){
|
||||||
|
isFunction(callback) ? callback(data.code == 200,data) : '';
|
||||||
|
// isFunction(callback) ? callback(data) : '';
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*用户答题答案
|
||||||
|
* @param data {dataObject} 向后台传递的数据对象，应该包含
|
||||||
|
* user_id {Number} 用户ID
|
||||||
|
* course_id {Number} 课程ID
|
||||||
|
* lesson_id {Number} 课时ID
|
||||||
|
* question_order {Number} 问题序号
|
||||||
|
* answer {String} 问题
|
||||||
|
*@param callback {Function} 回调方法
|
||||||
|
*/
|
||||||
|
getUserAnswer:function(data,callback){
|
||||||
|
var paramfiled = ["user_id","lesson_id","course_id","question_order","answer"];
|
||||||
|
var dataStr = verfiyData(paramfiled,data);
|
||||||
|
getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addUserAnswer',{
|
||||||
|
userAnswerInfo:dataStr
|
||||||
|
},function(data){
|
||||||
|
isFunction(callback) ? callback(data.code == 200,data) : '';
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*播放结束
|
||||||
|
* @param data {dataObject} 向后台传递的数据对象，应该包含
|
||||||
|
* order {Number} 排序ID
|
||||||
|
* co {Number} 课时ID
|
||||||
|
*@param callback {Function} 回调方法
|
||||||
|
*/
|
||||||
|
finishCourse:function(data,callback){
|
||||||
|
var paramfiled = ["order","co","process"];
|
||||||
|
var dataStr = verfiyData(paramfiled,data);
|
||||||
|
getDate(this._getHost()+'index.php?m=user&c=learnrecord&a=playcount',data,function(data){
|
||||||
|
isFunction(callback) ? callback(data.code == 200,data) : '';
|
||||||
|
// isFunction(callback) ? callback(data) : '';
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*课程进度获取
|
||||||
|
* @param data {dataObject} 向后台传递的数据对象，应该包含
|
||||||
|
* order {Number} 排序ID
|
||||||
|
* co {Number} 课时ID
|
||||||
|
*@param callback {Function} 回调方法
|
||||||
|
* 注回调使用的参数,值类似为: {"status":true,"data":{"process":"91"}}
|
||||||
|
* 或: {"status":false,"data":'参数丢失'}
|
||||||
|
* 其中status为true为调用正常, 如果有值则data返回json形式的进度, 没有值则返回[]
|
||||||
|
* status为false时, data保存的是错误提示
|
||||||
|
*/
|
||||||
|
getfinishCourse:function(data,callback){
|
||||||
|
var paramfiled = ["order","co"];
|
||||||
|
var dataStr = verfiyData(paramfiled,data);
|
||||||
|
getDate(this._getHost()+'index.php?m=user&c=learnrecord&a=getuserlessionprocess',data,function(data){
|
||||||
|
isFunction(callback) ? callback(data) : '';
|
||||||
|
// isFunction(callback) ? callback(data) : '';
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*解码加密的breakpoint
|
||||||
|
* @pparam basecode {String} 要解码的字符串
|
||||||
|
*/
|
||||||
|
fromBaseCode : function(basecode){
|
||||||
|
return getBreakPoint(basecode);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*通过key值和课时值获取自定的数据
|
||||||
|
* @param data {dataObject} 向后台传递的数据对象，应该包含
|
||||||
|
* lessonId {Number} 课时ID
|
||||||
|
* order {Number} 排序ID
|
||||||
|
*@param callback {Function} 回调方法
|
||||||
|
*/
|
||||||
|
getUserDefineInfo :function(data,callback){
|
||||||
|
var paramfiled = ["lessonId","order"];
|
||||||
|
var dataStr = verfiyData(paramfiled,data);
|
||||||
|
getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=getUserDefineInfo',{
|
||||||
|
defineDate:dataStr
|
||||||
|
},function(data){
|
||||||
|
isFunction(callback) ? callback(data) : '';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*通过key值和课时值及用户ID获取自定的数据
|
||||||
|
* @param data {dataObject} 向后台传递的数据对象，应该包含
|
||||||
|
* lessonId {Number} 课时ID
|
||||||
|
* order {Number} 排序ID
|
||||||
|
*@param callback {Function} 回调方法
|
||||||
|
*/
|
||||||
|
getUserDefineInfoByUser :function(data,callback){
|
||||||
|
var paramfiled = ["lessonId","order"];
|
||||||
|
var dataStr = verfiyData(paramfiled,data);
|
||||||
|
getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=getUserDefineInfoByUser',{
|
||||||
|
defineUserDate:dataStr
|
||||||
|
},function(data){
|
||||||
|
isFunction(callback) ? callback(data) : '';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*增加自定数据
|
||||||
|
* @param data {dataObject} 向后台传递的数据对象，应该包含
|
||||||
|
* lessonId {Number} 课时ID
|
||||||
|
* key {string} 键值ID
|
||||||
|
* content {string} 字内容
|
||||||
|
*@param callback {Function} 回调方法
|
||||||
|
*/
|
||||||
|
addUserDefine:function(data,callback){
|
||||||
|
var paramfiled = ["lessonId","key","content"];
|
||||||
|
var dataStr = verfiyData(paramfiled,data);
|
||||||
|
getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addUserDefine',{
|
||||||
|
addDefineDate:dataStr
|
||||||
|
},function(data){
|
||||||
|
isFunction(callback) ? callback(data) : '';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var getDate = function(url,data,callback){
|
||||||
|
$.get(url,data,function(data){
|
||||||
|
callback(data);
|
||||||
|
},'json')
|
||||||
|
};
|
||||||
|
|
||||||
|
var isFunction = function(fn){
|
||||||
|
if(typeof fn === 'function')return true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
var verfiyData = function(field,data){
|
||||||
|
var arr=[];
|
||||||
|
console.log(field);
|
||||||
|
console.log('<br/>');
|
||||||
|
console.log(data);
|
||||||
|
for(var i in field){
|
||||||
|
|
||||||
|
if(!data[field[i]]){
|
||||||
|
throw new Error('data is error');
|
||||||
|
}
|
||||||
|
arr.push(field[i]+':'+data[field[i]]);
|
||||||
|
}
|
||||||
|
if(root.JSON){
|
||||||
|
return JSON.stringify(data);
|
||||||
|
}else{
|
||||||
|
return '{'+arr.join(',')+'}';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var getBreakPoint = function (base64point) {
|
||||||
|
var newbc = base64point.split('').reverse().join('');
|
||||||
|
return Base64.fromBase64(newbc);
|
||||||
|
}
|
||||||
|
|
||||||
|
root.videoAjax = function(){
|
||||||
|
return new videoajax();
|
||||||
|
}
|
||||||
|
}(this));
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
(function(global){'use strict';var _Base64=global.Base64;var version="2.1.5";var buffer;if(typeof module!=='undefined'&&module.exports){buffer=require('buffer').Buffer}var b64chars='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';var b64tab=function(bin){var t={};for(var i=0,l=bin.length;i<l;i++)t[bin.charAt(i)]=i;return t}(b64chars);var fromCharCode=String.fromCharCode;var cb_utob=function(c){if(c.length<2){var cc=c.charCodeAt(0);return cc<0x80?c:cc<0x800?(fromCharCode(0xc0|(cc>>>6))+fromCharCode(0x80|(cc&0x3f))):(fromCharCode(0xe0|((cc>>>12)&0x0f))+fromCharCode(0x80|((cc>>>6)&0x3f))+fromCharCode(0x80|(cc&0x3f)))}else{var cc=0x10000+(c.charCodeAt(0)-0xD800)*0x400+(c.charCodeAt(1)-0xDC00);return(fromCharCode(0xf0|((cc>>>18)&0x07))+fromCharCode(0x80|((cc>>>12)&0x3f))+fromCharCode(0x80|((cc>>>6)&0x3f))+fromCharCode(0x80|(cc&0x3f)))}};var re_utob=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;var utob=function(u){return u.replace(re_utob,cb_utob)};var cb_encode=function(ccc){var padlen=[0,2,1][ccc.length%3],ord=ccc.charCodeAt(0)<<16|((ccc.length>1?ccc.charCodeAt(1):0)<<8)|((ccc.length>2?ccc.charCodeAt(2):0)),chars=[b64chars.charAt(ord>>>18),b64chars.charAt((ord>>>12)&63),padlen>=2?'=':b64chars.charAt((ord>>>6)&63),padlen>=1?'=':b64chars.charAt(ord&63)];return chars.join('')};var btoa=global.btoa?function(b){return global.btoa(b)}:function(b){return b.replace(/[\s\S]{1,3}/g,cb_encode)};var _encode=buffer?function(u){return(new buffer(u)).toString('base64')}:function(u){return btoa(utob(u))};var encode=function(u,urisafe){return!urisafe?_encode(u):_encode(u).replace(/[+\/]/g,function(m0){return m0=='+'?'-':'_'}).replace(/=/g,'')};var encodeURI=function(u){return encode(u,true)};var re_btou=new RegExp(['[\xC0-\xDF][\x80-\xBF]','[\xE0-\xEF][\x80-\xBF]{2}','[\xF0-\xF7][\x80-\xBF]{3}'].join('|'),'g');var cb_btou=function(cccc){switch(cccc.length){case 4:var cp=((0x07&cccc.charCodeAt(0))<<18)|((0x3f&cccc.charCodeAt(1))<<12)|((0x3f&cccc.charCodeAt(2))<<6)|(0x3f&cccc.charCodeAt(3)),offset=cp-0x10000;return(fromCharCode((offset>>>10)+0xD800)+fromCharCode((offset&0x3FF)+0xDC00));case 3:return fromCharCode(((0x0f&cccc.charCodeAt(0))<<12)|((0x3f&cccc.charCodeAt(1))<<6)|(0x3f&cccc.charCodeAt(2)));default:return fromCharCode(((0x1f&cccc.charCodeAt(0))<<6)|(0x3f&cccc.charCodeAt(1)))}};var btou=function(b){return b.replace(re_btou,cb_btou)};var cb_decode=function(cccc){var len=cccc.length,padlen=len%4,n=(len>0?b64tab[cccc.charAt(0)]<<18:0)|(len>1?b64tab[cccc.charAt(1)]<<12:0)|(len>2?b64tab[cccc.charAt(2)]<<6:0)|(len>3?b64tab[cccc.charAt(3)]:0),chars=[fromCharCode(n>>>16),fromCharCode((n>>>8)&0xff),fromCharCode(n&0xff)];chars.length-=[0,0,2,1][padlen];return chars.join('')};var atob=global.atob?function(a){return global.atob(a)}:function(a){return a.replace(/[\s\S]{1,4}/g,cb_decode)};var _decode=buffer?function(a){return(new buffer(a,'base64')).toString()}:function(a){return btou(atob(a))};var decode=function(a){return _decode(a.replace(/[-_]/g,function(m0){return m0=='-'?'+':'/'}).replace(/[^A-Za-z0-9\+\/]/g,''))};var noConflict=function(){var Base64=global.Base64;global.Base64=_Base64;return Base64};global.Base64={VERSION:version,atob:atob,btoa:btoa,fromBase64:decode,toBase64:encode,utob:utob,encode:encode,encodeURI:encodeURI,btou:btou,decode:decode,noConflict:noConflict};if(typeof Object.defineProperty==='function'){var noEnum=function(v){return{value:v,enumerable:false,writable:true,configurable:true}};global.Base64.extendString=function(){Object.defineProperty(String.prototype,'fromBase64',noEnum(function(){return decode(this)}));Object.defineProperty(String.prototype,'toBase64',noEnum(function(urisafe){return encode(this,urisafe)}));Object.defineProperty(String.prototype,'toBase64URI',noEnum(function(){return encode(this,true)}))}}})(this);if(this['Meteor']){Base64=global.Base64};(function(root){var videoajax=function(argument){var host='/';this._setHost=function(hoststr){host=hoststr};this._getHost=function(){return host}};$.extend(videoajax.prototype,{setHost:function(hosts){this._setHost(hosts)},quitBreakPoint:function(data,callback){var paramfiled=["user_id","course_id","lesson_id","break_point"];var dataStr=verfiyData(paramfiled,data);getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addBreakPoint',{userViewPoint:dataStr},function(data){isFunction(callback)?callback(data.code==200,data):''})},getBreakPoint:function(data,callback){var paramfiled=["user_id","course_id","lesson_id"];var dataStr=verfiyData(paramfiled,data);getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=userbreakpoint',{userCourseInfo:dataStr},function(data){isFunction(callback)?callback(data.code==200,data):''})},getUserAnswer:function(data,callback){var paramfiled=["user_id","lesson_id","course_id","question_order","answer"];var dataStr=verfiyData(paramfiled,data);getDate(this._getHost()+'index.php?m=zzplatform&c=userview&a=addUserAnswer',{userAnswerInfo:dataStr},function(data){isFunction(callback)?callbacLine truncated
|
||||||
+16
-1
@@ -1,8 +1,9 @@
|
|||||||
import { RouterProvider } from "react-router-dom";
|
import { RouterProvider } from "react-router-dom";
|
||||||
import { Suspense } from "react";
|
import { Suspense, useEffect } from "react";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import { ScaleProvider, useScale } from "./contexts/ScaleContext";
|
import { ScaleProvider, useScale } from "./contexts/ScaleContext";
|
||||||
import { RotateHint } from "./components/RotateHint";
|
import { RotateHint } from "./components/RotateHint";
|
||||||
|
import { useUserStore } from "./store";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 应用内容组件
|
* 应用内容组件
|
||||||
@@ -10,6 +11,20 @@ import { RotateHint } from "./components/RotateHint";
|
|||||||
*/
|
*/
|
||||||
function AppContent() {
|
function AppContent() {
|
||||||
const { scaleStyle } = useScale();
|
const { scaleStyle } = useScale();
|
||||||
|
const setCourseInfo = useUserStore((state) => state.setCourseInfo);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const courseId = params.get("courseid");
|
||||||
|
const uid = params.get("uid");
|
||||||
|
|
||||||
|
if (courseId || uid) {
|
||||||
|
setCourseInfo({
|
||||||
|
courseId: courseId ?? null,
|
||||||
|
uid: uid ?? null,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [setCourseInfo]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|||||||
File renamed without changes.
File renamed without changes.
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
File renamed without changes.
File renamed without changes.
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
@@ -0,0 +1,353 @@
|
|||||||
|
import { useMemo, useState } from "react";
|
||||||
|
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||||
|
import { usePuzzleStore } from "@/store/puzzleStore";
|
||||||
|
import { Image } from "@/components";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 六边形进度条组件
|
||||||
|
* 根据进度值显示不同颜色：100%绿色，50%-99%橙色，0%-49%灰色
|
||||||
|
*/
|
||||||
|
interface HexagonProgressBarProps {
|
||||||
|
progress: number; // 0-100
|
||||||
|
}
|
||||||
|
|
||||||
|
const HexagonProgressBar = ({ progress }: HexagonProgressBarProps) => {
|
||||||
|
const progressPercent = Math.min(100, Math.max(0, progress));
|
||||||
|
const progressText = progressPercent.toFixed(2) === "100.00"
|
||||||
|
? "进度100%"
|
||||||
|
: `进度${Math.round(progressPercent)}%`;
|
||||||
|
|
||||||
|
// 根据进度值确定填充颜色
|
||||||
|
const getProgressColor = () => {
|
||||||
|
if (progressPercent >= 100) {
|
||||||
|
return "#90B86B"; // 浅橄榄绿色（100%完成）
|
||||||
|
} else if (progressPercent >= 50) {
|
||||||
|
return "#EEB362"; // 橙色（50%-99%）
|
||||||
|
} else {
|
||||||
|
return "#E0E0E0"; // 浅灰色（0%-49%）
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fillColor = getProgressColor();
|
||||||
|
// 六边形路径，细长的水平六边形，左右两端是尖角
|
||||||
|
// 正确的六边形路径：从左顶点开始，顺时针绘制
|
||||||
|
// 左顶点(0%, 50%) -> 左上角(3%, 0%) -> 右上角(97%, 0%) -> 右顶点(100%, 50%) -> 右下角(97%, 100%) -> 左下角(3%, 100%)
|
||||||
|
// 外层路径（包含边框）
|
||||||
|
const outerHexagonPath = "polygon(0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%)";
|
||||||
|
// 内层路径（边框内部）
|
||||||
|
const innerHexagonPath = "polygon(0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%)";
|
||||||
|
const borderWidth = 4; // 增加边框宽度从2px到3px
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative" style={{ width: "260px", height: "50px" }}>
|
||||||
|
{/* 外层：白色边框（使用 clip-path 裁剪形状） */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0"
|
||||||
|
style={{
|
||||||
|
clipPath: outerHexagonPath,
|
||||||
|
backgroundColor: "white",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* 内容容器（边框内部区域） */}
|
||||||
|
<div
|
||||||
|
className="absolute"
|
||||||
|
style={{
|
||||||
|
left: `${borderWidth}px`,
|
||||||
|
top: `${borderWidth}px`,
|
||||||
|
right: `${borderWidth}px`,
|
||||||
|
bottom: `${borderWidth}px`,
|
||||||
|
clipPath: innerHexagonPath,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 背景层：深灰色背景（未填充部分） */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "#757575",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* 填充层（根据进度百分比从左侧填充） */}
|
||||||
|
{progressPercent > 0 && (
|
||||||
|
<div
|
||||||
|
className="absolute left-0 top-0 bottom-0 overflow-hidden"
|
||||||
|
style={{
|
||||||
|
width: `${progressPercent}%`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0"
|
||||||
|
style={{
|
||||||
|
backgroundColor: fillColor,
|
||||||
|
transition: "width 0.3s ease, background-color 0.3s ease",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{/* 文字（白色，居中，始终显示在最上层，带阴影效果） */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 flex items-center justify-center text-white text-2xl font-bold pointer-events-none"
|
||||||
|
style={{
|
||||||
|
textShadow: "0 2px 4px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.8)",
|
||||||
|
zIndex: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{progressText}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface MenuPuzzleCenterProps {
|
||||||
|
/** 是否可见 */
|
||||||
|
visible: boolean;
|
||||||
|
/** 关闭回调 */
|
||||||
|
onClose: () => void;
|
||||||
|
/** 选择某个故居后的回调（进入对应的碎片系统） */
|
||||||
|
onSelectResidence: (residence: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResidenceConfig {
|
||||||
|
/** 拼图存储用的英文 key（如 chenyun） */
|
||||||
|
residence: string;
|
||||||
|
/** 显示名称 */
|
||||||
|
displayName: string;
|
||||||
|
/** 在大地图上的水平位置（百分比字符串，如 "20%"） */
|
||||||
|
left: string;
|
||||||
|
/** 在大地图上的垂直位置（百分比字符串，如 "40%"） */
|
||||||
|
top: string;
|
||||||
|
/** 显示用图片路径（相对于 puzzle/home/ 目录） */
|
||||||
|
image: string;
|
||||||
|
/** 是否已经开放拼图（未开放时只展示，不可点击） */
|
||||||
|
hasPuzzle: boolean;
|
||||||
|
/** 是否有导图资源 */
|
||||||
|
hasMap?: boolean;
|
||||||
|
/** 导图资源文件名（位于 puzzle/home/map 下） */
|
||||||
|
mapImage?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 顶层碎片管理中心中展示的故居列表（8 个故居）
|
||||||
|
* left / top 为大致位置，后续可以根据视觉效果微调
|
||||||
|
* image 资源都位于 puzzle/home 目录下，命名可按实际资源调整
|
||||||
|
*/
|
||||||
|
const RESIDENCE_LIST: ResidenceConfig[] = [
|
||||||
|
{
|
||||||
|
residence: "maozedong",
|
||||||
|
displayName: "毛泽东旧居",
|
||||||
|
left: "30%",
|
||||||
|
top: "35%",
|
||||||
|
image: "毛泽东",
|
||||||
|
hasPuzzle: true,
|
||||||
|
hasMap: true,
|
||||||
|
mapImage: "毛泽东导图",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
residence: "sunzhongshan",
|
||||||
|
displayName: "孙中山故居",
|
||||||
|
left: "12%",
|
||||||
|
top: "51%",
|
||||||
|
image: "孙中山",
|
||||||
|
hasPuzzle: true,
|
||||||
|
hasMap: true,
|
||||||
|
mapImage: "孙中山导图",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
residence: "luxun",
|
||||||
|
displayName: "鲁迅故居",
|
||||||
|
left: "26.3%",
|
||||||
|
top: "74%",
|
||||||
|
image: "鲁迅",
|
||||||
|
hasPuzzle: true,
|
||||||
|
hasMap: true,
|
||||||
|
mapImage: "鲁迅导图",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
residence: "huangyanpei",
|
||||||
|
displayName: "黄炎培故居",
|
||||||
|
left: "44%",
|
||||||
|
top: "67%",
|
||||||
|
image: "黄炎培",
|
||||||
|
hasPuzzle: true,
|
||||||
|
hasMap: true,
|
||||||
|
mapImage: "黄炎培导图",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
residence: "nieer",
|
||||||
|
displayName: "聂耳旧居",
|
||||||
|
left: "62%",
|
||||||
|
top: "60%",
|
||||||
|
image: "聂耳",
|
||||||
|
hasPuzzle: true,
|
||||||
|
hasMap: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
residence: "zhangleping",
|
||||||
|
displayName: "张乐平故居",
|
||||||
|
left: "73%",
|
||||||
|
top: "33%",
|
||||||
|
image: "张乐平",
|
||||||
|
hasPuzzle: true,
|
||||||
|
hasMap: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
residence: "rongdesheng",
|
||||||
|
displayName: "荣德生旧居",
|
||||||
|
left: "90%",
|
||||||
|
top: "45%",
|
||||||
|
image: "荣德生",
|
||||||
|
hasPuzzle: true,
|
||||||
|
hasMap: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
residence: "chenyun",
|
||||||
|
displayName: "陈云故居",
|
||||||
|
left: "80%",
|
||||||
|
top: "76%",
|
||||||
|
image: "陈云",
|
||||||
|
hasPuzzle: true,
|
||||||
|
hasMap: true,
|
||||||
|
mapImage: "陈云导图",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const MenuPuzzleCenter = ({
|
||||||
|
visible,
|
||||||
|
onClose,
|
||||||
|
onSelectResidence,
|
||||||
|
}: MenuPuzzleCenterProps) => {
|
||||||
|
const { getPuzzleCollectProgress } = usePuzzleStore();
|
||||||
|
const [activeMapImage, setActiveMapImage] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const residenceProgress = useMemo(
|
||||||
|
() =>
|
||||||
|
RESIDENCE_LIST.map((item) => ({
|
||||||
|
...item,
|
||||||
|
// 只有已开放拼图的故居才计算收集进度
|
||||||
|
progress: item.hasPuzzle ? getPuzzleCollectProgress(item.residence) : 0,
|
||||||
|
})),
|
||||||
|
[getPuzzleCollectProgress]
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!visible) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-90 flex items-center justify-center"
|
||||||
|
style={{ background: "rgba(0,0,0,0.8)" }}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full bg-cover bg-center bg-no-repeat"
|
||||||
|
style={{ backgroundImage: getBackgroundImage("puzzle/home/底图") }}
|
||||||
|
>
|
||||||
|
{/* 箭头指示底图 */}
|
||||||
|
<img className="absolute top-84 left-55" src={getStaticImage("puzzle/home/箭头指引")} alt="" />
|
||||||
|
|
||||||
|
{/* 关闭按钮 */}
|
||||||
|
<Image
|
||||||
|
className="absolute right-8 top-8 z-10"
|
||||||
|
src={getStaticImage("components/关闭")}
|
||||||
|
alt="关闭"
|
||||||
|
button
|
||||||
|
onClick={onClose}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
{/* 故居列表：按照设计图进行绝对定位 */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
{residenceProgress.map(
|
||||||
|
({
|
||||||
|
residence,
|
||||||
|
displayName,
|
||||||
|
left,
|
||||||
|
top,
|
||||||
|
image,
|
||||||
|
hasPuzzle,
|
||||||
|
progress,
|
||||||
|
hasMap,
|
||||||
|
mapImage,
|
||||||
|
}) => (
|
||||||
|
<div
|
||||||
|
key={residence}
|
||||||
|
className={`absolute -translate-x-1/2 -translate-y-1/2`}
|
||||||
|
style={{ left, top }}
|
||||||
|
>
|
||||||
|
{/* 故居图片（资源在 puzzle/home 下，可根据实际名称调整） */}
|
||||||
|
<Image
|
||||||
|
src={getStaticImage(`puzzle/home/${image}`)}
|
||||||
|
alt={displayName}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 进度展示，仅对已开放拼图的故居显示 */}
|
||||||
|
{hasPuzzle && (
|
||||||
|
<div className="mb-4 flex justify-center">
|
||||||
|
<HexagonProgressBar progress={progress} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 图标 */}
|
||||||
|
<div className="flex justify-center gap-6">
|
||||||
|
<Image src={getStaticImage(`puzzle/home/拼图`)} alt="拼图" button
|
||||||
|
onClick={(e) => {
|
||||||
|
if (!hasPuzzle) return;
|
||||||
|
e.stopPropagation();
|
||||||
|
onSelectResidence(residence);
|
||||||
|
}} />
|
||||||
|
<Image
|
||||||
|
src={getStaticImage(`puzzle/home/导图`)}
|
||||||
|
alt="导图"
|
||||||
|
button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (!hasMap || !mapImage) return;
|
||||||
|
setActiveMapImage(mapImage);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 导图弹窗 */}
|
||||||
|
{activeMapImage && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-110 flex items-center justify-center"
|
||||||
|
style={{ background: "rgba(0,0,0,0.75)" }}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
setActiveMapImage(null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="relative w-full h-full">
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||||
|
<Image
|
||||||
|
className="absolute -right-4 -top-8 z-10"
|
||||||
|
src={getStaticImage("components/close")}
|
||||||
|
alt="关闭"
|
||||||
|
button
|
||||||
|
onClick={() => setActiveMapImage(null)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<img
|
||||||
|
src={getStaticImage(`puzzle/home/map/${activeMapImage}`)}
|
||||||
|
alt="导图"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MenuPuzzleCenter;
|
||||||
|
|
||||||
|
|
||||||
@@ -86,6 +86,22 @@ const PuzzlePieceSvg = ({
|
|||||||
className={cn(isUnlocked ? "puzzle-piece" : "")}
|
className={cn(isUnlocked ? "puzzle-piece" : "")}
|
||||||
>
|
>
|
||||||
<defs>
|
<defs>
|
||||||
|
{/* Safari/iOS 对 SVG image 的 CSS filter 支持有限，使用滤镜定义保证生效 */}
|
||||||
|
<filter
|
||||||
|
id={`${patternId}-dim`}
|
||||||
|
colorInterpolationFilters="sRGB"
|
||||||
|
x="0%"
|
||||||
|
y="0%"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
>
|
||||||
|
{/* 将亮度压低到约 20% */}
|
||||||
|
<feColorMatrix
|
||||||
|
type="matrix"
|
||||||
|
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"
|
||||||
|
/>
|
||||||
|
</filter>
|
||||||
|
|
||||||
<pattern
|
<pattern
|
||||||
id={patternId}
|
id={patternId}
|
||||||
patternUnits="objectBoundingBox"
|
patternUnits="objectBoundingBox"
|
||||||
@@ -98,8 +114,8 @@ const PuzzlePieceSvg = ({
|
|||||||
width={1}
|
width={1}
|
||||||
height={1}
|
height={1}
|
||||||
preserveAspectRatio="none"
|
preserveAspectRatio="none"
|
||||||
|
filter={isUnlocked ? undefined : `url(#${patternId}-dim)`}
|
||||||
style={{
|
style={{
|
||||||
filter: isUnlocked ? "none" : "brightness(0.2)",
|
|
||||||
transition: "filter 220ms ease",
|
transition: "filter 220ms ease",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -90,12 +90,12 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
|
|||||||
[allowDuplicate, currentValue]
|
[allowDuplicate, currentValue]
|
||||||
);
|
);
|
||||||
|
|
||||||
// 处理鼠标移动
|
// 通用的坐标更新逻辑（鼠标/触摸）
|
||||||
const handleMouseMove = useCallback(
|
const updateDragPosition = useCallback(
|
||||||
(e: MouseEvent) => {
|
(clientX: number, clientY: number) => {
|
||||||
if (!draggingOption) return;
|
if (!draggingOption) return;
|
||||||
|
|
||||||
setDragPosition({ x: e.clientX, y: e.clientY });
|
setDragPosition({ x: clientX, y: clientY });
|
||||||
|
|
||||||
// 检测是否悬停在空白区域上
|
// 检测是否悬停在空白区域上
|
||||||
let foundBlank: string | null = null;
|
let foundBlank: string | null = null;
|
||||||
@@ -104,10 +104,10 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
|
|||||||
blankRefsMap.current.forEach((element, blankId) => {
|
blankRefsMap.current.forEach((element, blankId) => {
|
||||||
const rect = element.getBoundingClientRect();
|
const rect = element.getBoundingClientRect();
|
||||||
if (
|
if (
|
||||||
e.clientX >= rect.left &&
|
clientX >= rect.left &&
|
||||||
e.clientX <= rect.right &&
|
clientX <= rect.right &&
|
||||||
e.clientY >= rect.top &&
|
clientY >= rect.top &&
|
||||||
e.clientY <= rect.bottom
|
clientY <= rect.bottom
|
||||||
) {
|
) {
|
||||||
foundBlank = blankId;
|
foundBlank = blankId;
|
||||||
}
|
}
|
||||||
@@ -122,10 +122,10 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
|
|||||||
if (element) {
|
if (element) {
|
||||||
const rect = element.getBoundingClientRect();
|
const rect = element.getBoundingClientRect();
|
||||||
if (
|
if (
|
||||||
e.clientX >= rect.left &&
|
clientX >= rect.left &&
|
||||||
e.clientX <= rect.right &&
|
clientX <= rect.right &&
|
||||||
e.clientY >= rect.top &&
|
clientY >= rect.top &&
|
||||||
e.clientY <= rect.bottom
|
clientY <= rect.bottom
|
||||||
) {
|
) {
|
||||||
foundBlank = blank.id;
|
foundBlank = blank.id;
|
||||||
}
|
}
|
||||||
@@ -138,8 +138,28 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
|
|||||||
[draggingOption, normalizedBlanks]
|
[draggingOption, normalizedBlanks]
|
||||||
);
|
);
|
||||||
|
|
||||||
// 处理鼠标释放
|
// 处理鼠标移动
|
||||||
const handleMouseUp = useCallback(() => {
|
const handleMouseMove = useCallback(
|
||||||
|
(e: MouseEvent) => {
|
||||||
|
updateDragPosition(e.clientX, e.clientY);
|
||||||
|
},
|
||||||
|
[updateDragPosition]
|
||||||
|
);
|
||||||
|
|
||||||
|
// 处理触摸移动
|
||||||
|
const handleTouchMove = useCallback(
|
||||||
|
(e: TouchEvent) => {
|
||||||
|
const touch = e.touches[0];
|
||||||
|
if (!touch) return;
|
||||||
|
// 阻止页面滚动，确保拖拽顺滑
|
||||||
|
e.preventDefault();
|
||||||
|
updateDragPosition(touch.clientX, touch.clientY);
|
||||||
|
},
|
||||||
|
[updateDragPosition]
|
||||||
|
);
|
||||||
|
|
||||||
|
// 处理释放（鼠标/触摸）
|
||||||
|
const handleRelease = useCallback(() => {
|
||||||
if (!draggingOption) return;
|
if (!draggingOption) return;
|
||||||
|
|
||||||
// 如果悬停在空白区域上，执行放置
|
// 如果悬停在空白区域上，执行放置
|
||||||
@@ -212,16 +232,29 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (draggingOption) {
|
if (draggingOption) {
|
||||||
document.addEventListener("mousemove", handleMouseMove);
|
document.addEventListener("mousemove", handleMouseMove);
|
||||||
document.addEventListener("mouseup", handleMouseUp);
|
document.addEventListener("mouseup", handleRelease);
|
||||||
|
document.addEventListener("touchmove", handleTouchMove, {
|
||||||
|
passive: false,
|
||||||
|
});
|
||||||
|
document.addEventListener("touchend", handleRelease);
|
||||||
|
document.addEventListener("touchcancel", handleRelease);
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener("mousemove", handleMouseMove);
|
document.removeEventListener("mousemove", handleMouseMove);
|
||||||
document.removeEventListener("mouseup", handleMouseUp);
|
document.removeEventListener("mouseup", handleRelease);
|
||||||
|
document.removeEventListener("touchmove", handleTouchMove);
|
||||||
|
document.removeEventListener("touchend", handleRelease);
|
||||||
|
document.removeEventListener("touchcancel", handleRelease);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}, [draggingOption, handleMouseMove, handleMouseUp]);
|
}, [draggingOption, handleMouseMove, handleTouchMove, handleRelease]);
|
||||||
|
|
||||||
// 处理鼠标按下开始拖拽
|
// 开始拖拽（通用）
|
||||||
const handleMouseDown = (e: React.MouseEvent, optionValue: string) => {
|
const startDragging = (
|
||||||
|
optionValue: string,
|
||||||
|
clientX: number,
|
||||||
|
clientY: number,
|
||||||
|
currentTarget: HTMLElement
|
||||||
|
) => {
|
||||||
if (disabled) return;
|
if (disabled) return;
|
||||||
const option = normalizedOptions.find((opt) => opt.value === optionValue);
|
const option = normalizedOptions.find((opt) => opt.value === optionValue);
|
||||||
if (option?.disabled) return;
|
if (option?.disabled) return;
|
||||||
@@ -230,10 +263,10 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
|
|||||||
if (!allowDuplicate && isOptionUsed(optionValue)) return;
|
if (!allowDuplicate && isOptionUsed(optionValue)) return;
|
||||||
|
|
||||||
// 获取实际的元素（如果有自定义渲染，使用第一个子元素）
|
// 获取实际的元素（如果有自定义渲染，使用第一个子元素）
|
||||||
const wrapperElement = e.currentTarget as HTMLElement;
|
const wrapperElement = currentTarget;
|
||||||
const actualElement = (
|
const actualElement = renderOption
|
||||||
renderOption ? wrapperElement.firstElementChild : wrapperElement
|
? (wrapperElement.firstElementChild as HTMLElement)
|
||||||
) as HTMLElement;
|
: wrapperElement;
|
||||||
|
|
||||||
if (!actualElement) return;
|
if (!actualElement) return;
|
||||||
|
|
||||||
@@ -241,12 +274,26 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
|
|||||||
|
|
||||||
// 记录偏移量和元素尺寸
|
// 记录偏移量和元素尺寸
|
||||||
dragOffsetRef.current = {
|
dragOffsetRef.current = {
|
||||||
x: e.clientX - rect.left,
|
x: clientX - rect.left,
|
||||||
y: e.clientY - rect.top,
|
y: clientY - rect.top,
|
||||||
};
|
};
|
||||||
|
|
||||||
setDraggingOption(optionValue);
|
setDraggingOption(optionValue);
|
||||||
setDragPosition({ x: e.clientX, y: e.clientY });
|
setDragPosition({ x: clientX, y: clientY });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理鼠标按下开始拖拽
|
||||||
|
const handleMouseDown = (e: React.MouseEvent, optionValue: string) => {
|
||||||
|
startDragging(optionValue, e.clientX, e.clientY, e.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理触摸开始拖拽
|
||||||
|
const handleTouchStart = (e: React.TouchEvent, optionValue: string) => {
|
||||||
|
const touch = e.touches[0];
|
||||||
|
if (!touch) return;
|
||||||
|
// 防止滚动干扰
|
||||||
|
e.preventDefault();
|
||||||
|
startDragging(optionValue, touch.clientX, touch.clientY, e.currentTarget);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 移除填充
|
// 移除填充
|
||||||
@@ -288,6 +335,7 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
onMouseDown={(e) => handleMouseDown(e, option.value)}
|
onMouseDown={(e) => handleMouseDown(e, option.value)}
|
||||||
|
onTouchStart={(e) => handleTouchStart(e, option.value)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"px-6 py-4 border-2 rounded-lg transition-all select-none",
|
"px-6 py-4 border-2 rounded-lg transition-all select-none",
|
||||||
!disabled &&
|
!disabled &&
|
||||||
@@ -439,6 +487,11 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
|
|||||||
handleMouseDown(e, option.value);
|
handleMouseDown(e, option.value);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
onTouchStart={(e) => {
|
||||||
|
if (!disabled && !option.disabled && !isUsed) {
|
||||||
|
handleTouchStart(e, option.value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
className={cn(
|
className={cn(
|
||||||
renderOption && "select-none",
|
renderOption && "select-none",
|
||||||
!optionClassName && renderOption && "flex-1",
|
!optionClassName && renderOption && "flex-1",
|
||||||
|
|||||||
@@ -0,0 +1,127 @@
|
|||||||
|
$.extend({
|
||||||
|
getUrlVars: function(){
|
||||||
|
var vars = [], hash;
|
||||||
|
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
|
||||||
|
for(var i = 0; i < hashes.length; i++)
|
||||||
|
{
|
||||||
|
hash = hashes[i].split('=');
|
||||||
|
vars.push(hash[0]);
|
||||||
|
vars[hash[0]] = hash[1];
|
||||||
|
}
|
||||||
|
return vars;
|
||||||
|
},
|
||||||
|
getUrlVar: function(name){
|
||||||
|
return $.getUrlVars()[name];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var lesson="yuxiang"
|
||||||
|
|
||||||
|
var videoajax = videoAjax();
|
||||||
|
videoajax.setHost("/");
|
||||||
|
|
||||||
|
//设置我的自定义数据(所有的自定义数据都设置在第一个课时ID上，以key来区分不同的类型)
|
||||||
|
function setLtDefine(key,value){
|
||||||
|
if(iscallyb){
|
||||||
|
setUserDefine(1,key,value);
|
||||||
|
}else{
|
||||||
|
sessionStorage.setItem(lesson+"_"+key,value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var mycstr9 = "";
|
||||||
|
//获取定义数据
|
||||||
|
function getLtDefine(key){
|
||||||
|
if(iscallyb){
|
||||||
|
let cstr = "";
|
||||||
|
if(mycstr9 == ""){
|
||||||
|
let cstr = getUsersDefine(1, emykey);
|
||||||
|
if(cstr == undefined || cstr == null || cstr == "null" || cstr == ""){
|
||||||
|
mycstr9 = getFutureDa(10);
|
||||||
|
setLtDefine(emykey, mycstr9);
|
||||||
|
}else{
|
||||||
|
mycstr9 = cstr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cstr = mycstr9;
|
||||||
|
let str = (cstr == undefined || cstr==null || cstr=="null")?"":cstr;
|
||||||
|
getCurrentDa(str);
|
||||||
|
var objitem = getUserDefine(1,key);
|
||||||
|
return (objitem == undefined || objitem==null || objitem=="null")?"":objitem;
|
||||||
|
}else{
|
||||||
|
// let cstr = sessionStorage.getItem(lesson+"_"+emykey);
|
||||||
|
// let str = (cstr == undefined || cstr==null || cstr=="null")?"":cstr;
|
||||||
|
// getCurrentDa(str);
|
||||||
|
var itemvalue = sessionStorage.getItem(lesson+"_"+key);
|
||||||
|
return (itemvalue == undefined || itemvalue==null || itemvalue=="null")?"":itemvalue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//设置课程笔记10002
|
||||||
|
function setCourseNotepad(collect){
|
||||||
|
setLtDefine(10002,$.toJSON(collect));
|
||||||
|
}
|
||||||
|
//获取课程笔记10002
|
||||||
|
function getCourseNotepad(){
|
||||||
|
return (getLtDefine(10002) == undefined || getLtDefine(10002) == null || getLtDefine(10002) == "") ? ["","","","","","","","",""] : $.parseJSON(getLtDefine(10002));
|
||||||
|
}
|
||||||
|
|
||||||
|
//lessonId(课时唯一ID)
|
||||||
|
export function setUserDefine(lessonId,key,value) {
|
||||||
|
var param = { "lessonId": lesson+"_"+lessonId, "key": key, "content": value };
|
||||||
|
videoajax.addUserDefine(param);
|
||||||
|
}
|
||||||
|
//获取用户自定义数据
|
||||||
|
export function getUserDefine(lessonId,key) {
|
||||||
|
var param = { "lessonId": lesson+"_"+lessonId, "order": key };
|
||||||
|
var content = "";
|
||||||
|
videoajax.getUserDefineInfoByUser(param, function (data) {
|
||||||
|
console.log(data)
|
||||||
|
if (data && data.code == 200) {
|
||||||
|
var json = data.data.value || {};
|
||||||
|
var contents = json[0].content || "";
|
||||||
|
content = contents;
|
||||||
|
}else{
|
||||||
|
content = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取【所有】用户自定义数据
|
||||||
|
export function getUsersDefine(lessonId,key) {
|
||||||
|
var param = { "lessonId": lesson+"_"+lessonId, "order": key };
|
||||||
|
var content = "";
|
||||||
|
videoajax.getUserDefineInfo(param, function (data) {
|
||||||
|
if (data && data.code == 200) {
|
||||||
|
//console.info(data);
|
||||||
|
var json = data.data.value || {};
|
||||||
|
if(json.length > 1){
|
||||||
|
if(key == emykey){
|
||||||
|
let mdate = new Date(Math.max.apply(null, json.map(item => new Date(item.content))));
|
||||||
|
content = formatDateFromMilliseconds(mdate);
|
||||||
|
}else{
|
||||||
|
content = json;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
content = json[0].content || "";
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
content = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
|
||||||
|
//根据课时顺序号(所处课程的第几课时)更新对应易班平台上的每个环节进度
|
||||||
|
export function setCourseTimeProgress(order){
|
||||||
|
//var courseid = getCookie(lesson+"_course_id");//获取url链接的课程ID
|
||||||
|
var courseid = getLtDefine("10000");
|
||||||
|
console.info("courseid:" + courseid + " order:" + order);
|
||||||
|
if (iscallyb && courseid != undefined && courseid != null && courseid != "") {
|
||||||
|
if (order > 0) {
|
||||||
|
var param2 = { "order": order, "co": courseid, "process": 100 };
|
||||||
|
videoajax.finishCourse(param2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+39
-2
@@ -1,14 +1,17 @@
|
|||||||
|
import { useState } from "react";
|
||||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||||
import { Image } from "@/components";
|
import { Image, PuzzleSystem } from "@/components";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import MenuPuzzleCenter from "@/components/puzzle/MenuPuzzleCenter";
|
||||||
|
|
||||||
const Menu = () => {
|
const Menu = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const [isPuzzleCenterVisible, setIsPuzzleCenterVisible] = useState(false);
|
||||||
|
const [activeResidence, setActiveResidence] = useState<string | null>(null);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 类型：1：革命先驱、文化民人、艺术名家、经济巨擘
|
* 类型：1：革命先驱、文化民人、艺术名家、经济巨擘
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const Category = [
|
const Category = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
@@ -48,6 +51,15 @@ const Menu = () => {
|
|||||||
onClick={() => navigate("/")}
|
onClick={() => navigate("/")}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* 左下角碎片盒按钮 - 进入碎片管理中心 */}
|
||||||
|
<div className="absolute left-4 bottom-4 z-10 cursor-pointer">
|
||||||
|
<Image
|
||||||
|
src={getStaticImage("components/拼图盒")}
|
||||||
|
button
|
||||||
|
onClick={() => setIsPuzzleCenterVisible(true)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="absolute left-40 top-70 inline-grid grid-cols-2 gap-x-20 gap-y-10">
|
<div className="absolute left-40 top-70 inline-grid grid-cols-2 gap-x-20 gap-y-10">
|
||||||
{Category.map((item) => (
|
{Category.map((item) => (
|
||||||
<div
|
<div
|
||||||
@@ -72,8 +84,33 @@ const Menu = () => {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 顶层碎片管理中心：选择要查看的故居拼图 */}
|
||||||
|
<MenuPuzzleCenter
|
||||||
|
visible={isPuzzleCenterVisible}
|
||||||
|
onClose={() => setIsPuzzleCenterVisible(false)}
|
||||||
|
onSelectResidence={(residence) => {
|
||||||
|
setActiveResidence(residence);
|
||||||
|
setIsPuzzleCenterVisible(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 进入具体故居的拼图系统（与故居页面一致的 PuzzleSystem） */}
|
||||||
|
{activeResidence && (
|
||||||
|
<PuzzleSystem
|
||||||
|
visible={!!activeResidence}
|
||||||
|
onClose={() => {
|
||||||
|
setActiveResidence(null);
|
||||||
|
// 关闭 PuzzleSystem 后，重新打开碎片管理中心
|
||||||
|
setIsPuzzleCenterVisible(true);
|
||||||
|
}}
|
||||||
|
residence={activeResidence}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Menu;
|
export default Menu;
|
||||||
|
|
||||||
|
|
||||||
@@ -1,6 +1,23 @@
|
|||||||
|
import { useEffect } from "react";
|
||||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
import { Image } from "@/components";
|
import { Image } from "@/components";
|
||||||
|
import { getUserDefine } from "@/lib/utils/api-common";
|
||||||
|
import { useChenyunStore } from "@/store/chenyunStore";
|
||||||
|
|
||||||
|
const CHENYUN_LESSON_ID = "chenyunStore";
|
||||||
|
const CHENYUN_KEY = 1;
|
||||||
|
|
||||||
|
const deserializeVisitedExhibits = (
|
||||||
|
data: Record<string, number[]> | undefined
|
||||||
|
): Record<string, Set<number>> => {
|
||||||
|
if (!data || typeof data !== "object") return {};
|
||||||
|
const visitedExhibits: Record<string, Set<number>> = {};
|
||||||
|
for (const [place, exhibits] of Object.entries(data)) {
|
||||||
|
visitedExhibits[place] = new Set(Array.isArray(exhibits) ? exhibits : []);
|
||||||
|
}
|
||||||
|
return visitedExhibits;
|
||||||
|
};
|
||||||
|
|
||||||
const Chenyun = () => {
|
const Chenyun = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -11,6 +28,35 @@ const Chenyun = () => {
|
|||||||
// starName 固定为 chenyun
|
// starName 固定为 chenyun
|
||||||
const starName = "chenyun";
|
const starName = "chenyun";
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
try {
|
||||||
|
const raw = getUserDefine(CHENYUN_LESSON_ID, CHENYUN_KEY);
|
||||||
|
console.log(raw)
|
||||||
|
if (!raw) return;
|
||||||
|
|
||||||
|
const data = JSON.parse(raw) as {
|
||||||
|
visitedExhibits?: Record<string, number[]>;
|
||||||
|
isYinyuanSolved?: boolean;
|
||||||
|
isMimianSolved?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
useChenyunStore.setState((prev) => ({
|
||||||
|
...prev,
|
||||||
|
visitedExhibits: deserializeVisitedExhibits(data.visitedExhibits),
|
||||||
|
isYinyuanSolved:
|
||||||
|
data.isYinyuanSolved !== undefined
|
||||||
|
? data.isYinyuanSolved
|
||||||
|
: prev.isYinyuanSolved,
|
||||||
|
isMimianSolved:
|
||||||
|
data.isMimianSolved !== undefined
|
||||||
|
? data.isMimianSolved
|
||||||
|
: prev.isMimianSolved,
|
||||||
|
}));
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to load Chenyun store", error);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
if (!moduleName) {
|
if (!moduleName) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,11 +12,36 @@ import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
|
|||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
import type { VideoRef } from "@/components/video";
|
import type { VideoRef } from "@/components/video";
|
||||||
import { useChenyunStore } from "@/store/chenyunStore";
|
import { useChenyunStore } from "@/store/chenyunStore";
|
||||||
|
import { setUserDefine } from "@/lib/utils/api-common";
|
||||||
import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
|
import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
|
||||||
|
|
||||||
// starName 固定为 chenyun
|
// starName 固定为 chenyun
|
||||||
const starName = "chenyun";
|
const starName = "chenyun";
|
||||||
|
|
||||||
|
const CHENYUN_LESSON_ID = "chenyunStore";
|
||||||
|
const CHENYUN_KEY = 1;
|
||||||
|
|
||||||
|
const saveChenyunStore = () => {
|
||||||
|
const state = useChenyunStore.getState();
|
||||||
|
|
||||||
|
const visitedExhibits: Record<string, number[]> = {};
|
||||||
|
for (const [place, exhibits] of Object.entries(state.visitedExhibits)) {
|
||||||
|
visitedExhibits[place] = Array.from(exhibits);
|
||||||
|
}
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
visitedExhibits,
|
||||||
|
isYinyuanSolved: state.isYinyuanSolved,
|
||||||
|
isMimianSolved: state.isMimianSolved,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
setUserDefine(CHENYUN_LESSON_ID, CHENYUN_KEY, JSON.stringify(payload));
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to save Chenyun store", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 展品 ID 与资源路径映射
|
// 展品 ID 与资源路径映射
|
||||||
const exhibitSrcMap: Record<1, string> = {
|
const exhibitSrcMap: Record<1, string> = {
|
||||||
1: "chenyun/place9/场景9展品1",
|
1: "chenyun/place9/场景9展品1",
|
||||||
@@ -34,8 +59,7 @@ const ChenyunPlace9 = () => {
|
|||||||
|
|
||||||
// 使用持久化的访问状态
|
// 使用持久化的访问状态
|
||||||
const place = "place9";
|
const place = "place9";
|
||||||
const { isExhibitVisited, markExhibitVisited, getVisitedExhibits } =
|
const { markExhibitVisited, getVisitedExhibits } = useChenyunStore();
|
||||||
useChenyunStore();
|
|
||||||
|
|
||||||
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
|
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
|
||||||
const visitedExhibits = getVisitedExhibits(place);
|
const visitedExhibits = getVisitedExhibits(place);
|
||||||
@@ -117,6 +141,7 @@ const ChenyunPlace9 = () => {
|
|||||||
src={getStaticImage("chenyun/place9/离开场景")}
|
src={getStaticImage("chenyun/place9/离开场景")}
|
||||||
button
|
button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
saveChenyunStore();
|
||||||
navigate(`/${moduleName}/${starName}/home`);
|
navigate(`/${moduleName}/${starName}/home`);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
import { persist } from "zustand/middleware";
|
import { persist } from "zustand/middleware";
|
||||||
|
import { STORE_NAMES } from "./storeNames";
|
||||||
|
|
||||||
interface ChenyunStore {
|
interface ChenyunStore {
|
||||||
// 存储每个场景（place）的已访问展品ID集合
|
// 存储每个场景（place）的已访问展品ID集合
|
||||||
@@ -116,7 +117,7 @@ export const useChenyunStore = create<ChenyunStore>()(
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
name: "chenyun-storage", // localStorage key
|
name: STORE_NAMES.CHENYUN, // localStorage key
|
||||||
partialize: (state) => ({
|
partialize: (state) => ({
|
||||||
visitedExhibits: serializeVisitedExhibits(state.visitedExhibits),
|
visitedExhibits: serializeVisitedExhibits(state.visitedExhibits),
|
||||||
isYinyuanSolved: state.isYinyuanSolved,
|
isYinyuanSolved: state.isYinyuanSolved,
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
import { persist } from "zustand/middleware";
|
import { persist } from "zustand/middleware";
|
||||||
|
import { STORE_NAMES } from "./storeNames";
|
||||||
|
|
||||||
export interface Clue {
|
export interface Clue {
|
||||||
id: string; // 格式: "sunzhongshan/reflection/scene1/clue1"
|
id: string; // 格式: "sunzhongshan/reflection/scene1/clue1"
|
||||||
@@ -76,7 +77,7 @@ export const useClueStore = create<ClueStore>()(
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
name: "clue-storage", // localStorage key
|
name: STORE_NAMES.CLUE, // localStorage key
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
import { persist } from "zustand/middleware";
|
import { persist } from "zustand/middleware";
|
||||||
|
import { STORE_NAMES } from "./storeNames";
|
||||||
|
|
||||||
interface HuangyanpeiStore {
|
interface HuangyanpeiStore {
|
||||||
// 存储每个场景（place）的已访问展品ID集合
|
// 存储每个场景（place）的已访问展品ID集合
|
||||||
@@ -154,7 +155,7 @@ export const useHuangyanpeiStore = create<HuangyanpeiStore>()(
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
name: "huangyanpei-storage", // localStorage key
|
name: STORE_NAMES.HUANGYANPEI, // localStorage key
|
||||||
partialize: (state) => ({
|
partialize: (state) => ({
|
||||||
visitedExhibits: serializeVisitedExhibits(state.visitedExhibits),
|
visitedExhibits: serializeVisitedExhibits(state.visitedExhibits),
|
||||||
visitedReflectionCursors: serializeVisitedExhibits(
|
visitedReflectionCursors: serializeVisitedExhibits(
|
||||||
|
|||||||
@@ -4,3 +4,5 @@ export { useLuxunStore } from "./luxunStore";
|
|||||||
export { useSunzhongshanStore } from "./sunzhongshanStore";
|
export { useSunzhongshanStore } from "./sunzhongshanStore";
|
||||||
export { useClueStore } from "./clueStore";
|
export { useClueStore } from "./clueStore";
|
||||||
export { usePuzzleStore } from "./puzzleStore";
|
export { usePuzzleStore } from "./puzzleStore";
|
||||||
|
export { useUserStore } from "./userStore";
|
||||||
|
export { STORE_NAMES } from "./storeNames";
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
import { persist } from "zustand/middleware";
|
import { persist } from "zustand/middleware";
|
||||||
|
import { STORE_NAMES } from "./storeNames";
|
||||||
|
|
||||||
interface LuxunStore {
|
interface LuxunStore {
|
||||||
// 存储每个场景（place）的已访问展品ID集合
|
// 存储每个场景（place）的已访问展品ID集合
|
||||||
@@ -94,7 +95,7 @@ export const useLuxunStore = create<LuxunStore>()(
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
name: "luxun-storage",
|
name: STORE_NAMES.LUXUN,
|
||||||
partialize: (state) => ({
|
partialize: (state) => ({
|
||||||
visitedExhibits: serializeVisitedExhibits(state.visitedExhibits),
|
visitedExhibits: serializeVisitedExhibits(state.visitedExhibits),
|
||||||
}),
|
}),
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
import { persist } from "zustand/middleware";
|
import { persist } from "zustand/middleware";
|
||||||
|
import { STORE_NAMES } from "./storeNames";
|
||||||
|
|
||||||
interface PuzzleStore {
|
interface PuzzleStore {
|
||||||
// 每个故居的已解锁碎片集合，格式：{ residence: Set<pieceId> }
|
// 每个故居的已解锁碎片集合，格式：{ residence: Set<pieceId> }
|
||||||
@@ -135,7 +136,7 @@ export const usePuzzleStore = create<PuzzleStore>()(
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
name: "puzzle-storage", // localStorage key
|
name: STORE_NAMES.PUZZLE, // localStorage key
|
||||||
partialize: (state) => ({
|
partialize: (state) => ({
|
||||||
puzzles: serializePuzzles(state.puzzles),
|
puzzles: serializePuzzles(state.puzzles),
|
||||||
}),
|
}),
|
||||||
|
|||||||
@@ -0,0 +1,25 @@
|
|||||||
|
//lessonId 课时唯一id
|
||||||
|
export const STORE_NAMES = {
|
||||||
|
USER: "user-storage",
|
||||||
|
SUNZHONGSHAN: "sunzhongshan-storage",
|
||||||
|
LUXUN: "luxun-storage",
|
||||||
|
HUANGYANPEI: "huangyanpei-storage",
|
||||||
|
CHENYUN: "chenyun-storage",
|
||||||
|
PUZZLE: "puzzle-storage",
|
||||||
|
CLUE: "clue-storage",
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
//课程的第几课时
|
||||||
|
export const COURSE_ORDER = {
|
||||||
|
COURSE_ORDER_1: 1,
|
||||||
|
COURSE_ORDER_2: 2,
|
||||||
|
COURSE_ORDER_3: 3,
|
||||||
|
COURSE_ORDER_4: 4,
|
||||||
|
COURSE_ORDER_5: 5,
|
||||||
|
COURSE_ORDER_6: 6,
|
||||||
|
COURSE_ORDER_7: 7,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export type StoreNameKey = keyof typeof STORE_NAMES;
|
||||||
|
|
||||||
|
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
import { persist } from "zustand/middleware";
|
import { persist } from "zustand/middleware";
|
||||||
|
import { STORE_NAMES } from "./storeNames";
|
||||||
|
|
||||||
interface SunzhongshanStore {
|
interface SunzhongshanStore {
|
||||||
// 存储每个场景（place）的已访问展品ID集合
|
// 存储每个场景（place）的已访问展品ID集合
|
||||||
@@ -118,7 +119,7 @@ export const useSunzhongshanStore = create<SunzhongshanStore>()(
|
|||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
name: "sunzhongshan-storage",
|
name: STORE_NAMES.SUNZHONGSHAN,
|
||||||
partialize: (state) => ({
|
partialize: (state) => ({
|
||||||
visitedExhibits: serializeVisitedExhibits(state.visitedExhibits),
|
visitedExhibits: serializeVisitedExhibits(state.visitedExhibits),
|
||||||
reflectionFlags: state.reflectionFlags,
|
reflectionFlags: state.reflectionFlags,
|
||||||
|
|||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import { create } from "zustand";
|
||||||
|
import { persist } from "zustand/middleware";
|
||||||
|
import { STORE_NAMES } from "./storeNames";
|
||||||
|
|
||||||
|
interface UserStore {
|
||||||
|
courseId: string | null;
|
||||||
|
uid: string | null;
|
||||||
|
|
||||||
|
setCourseInfo: (info: { courseId?: string | null; uid?: string | null }) => void;
|
||||||
|
resetCourseInfo: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useUserStore = create<UserStore>()(
|
||||||
|
persist(
|
||||||
|
(set) => ({
|
||||||
|
courseId: null,
|
||||||
|
uid: null,
|
||||||
|
|
||||||
|
setCourseInfo: (info) => {
|
||||||
|
set((state) => ({
|
||||||
|
courseId: info.courseId ?? state.courseId,
|
||||||
|
uid: info.uid ?? state.uid,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
resetCourseInfo: () => {
|
||||||
|
set({ courseId: null, uid: null });
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: STORE_NAMES.USER,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
Vendored
+14
@@ -0,0 +1,14 @@
|
|||||||
|
declare module "@/lib/utils/api-common" {
|
||||||
|
export function setUserDefine(
|
||||||
|
lessonId: string | number,
|
||||||
|
key: string | number,
|
||||||
|
value: string
|
||||||
|
): void;
|
||||||
|
|
||||||
|
export function getUserDefine(
|
||||||
|
lessonId: string | number,
|
||||||
|
key: string | number
|
||||||
|
): string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Reference in new issue
Block a user