87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
/**
|
||
* @author https://gitee.com/wfeng0/luckysheet-crdt
|
||
* @description Luckysheet CRDT 协同全功能实现 - Web App
|
||
* @license Apache 2.0
|
||
* @copyright Copyright (c) 2025 https://gitee.com/wfeng0/luckysheet-crdt
|
||
* @time 2024年12月05日
|
||
*/
|
||
|
||
import "./style/index.css";
|
||
import { API_getWorkerBook } from "./axios";
|
||
import { defaultSheetData, WS_SERVER_URL } from "./config";
|
||
import { uploadImage, imageUrlHandle, getRandom, getLoadUrl, registerPlugins } from "./utils";
|
||
|
||
window.onload = initLuckysheet;
|
||
|
||
const luckysheet = Reflect.get(window, "luckysheet");
|
||
|
||
/**
|
||
* 需要监听刷新、退出浏览器事件，关闭socket 连接，避免协同异常
|
||
*/
|
||
window.onbeforeunload = () => luckysheet && luckysheet.closeWebSocket();
|
||
|
||
/**
|
||
* 初始化前台 Luckysheet
|
||
* 请注意，目前前台仅为展示，并无其他能力，因此加载的是默认协同演示 worker books 数据，gridkey = gridkey_demo
|
||
* 常理来说，当前工作簿的数据，都应该通过 fileid （gridkey） 请求得来
|
||
*/
|
||
async function initLuckysheet() {
|
||
const id = getRandom();
|
||
const username = encodeURIComponent(`用户_${id}`);
|
||
const gridKey = "gridkey_demo"; // 请注意大小写哈~
|
||
|
||
const options = {
|
||
lang: "zh",
|
||
title: "Luckysheet",
|
||
container: "luckysheetContainer",
|
||
// showinfobar: false, // 隐藏顶部的信息栏
|
||
// showlogo: false, // 隐藏顶部的 logo
|
||
allowUpdate: false, // 配置协同功能
|
||
loadUrl: "",
|
||
updateUrl: "", // 协同服务转发服务
|
||
plugins: registerPlugins(),
|
||
menuHandler: {
|
||
customs: [
|
||
{
|
||
label: "测试",
|
||
value: "demo",
|
||
},
|
||
],
|
||
},
|
||
};
|
||
|
||
// 是否开启协同模式
|
||
const isCollaboration = true;
|
||
if (!isCollaboration) return luckysheet.create(options);
|
||
|
||
try {
|
||
// 根据 gridkey 请求当前 workerbook 数据
|
||
const { data } = await API_getWorkerBook(gridKey);
|
||
|
||
// 定义请求是否成功
|
||
const isSuccess = data.code === 200;
|
||
|
||
/**
|
||
* 兼容无数据库服务场景
|
||
* 1. 如果请求成功，则使用数据库配置的 workerbook 数据
|
||
* 2. 如果请求失败，则使用默认配置的 workerbook 数据
|
||
*/
|
||
options.lang = isSuccess ? data.data.lang : "zh";
|
||
options.title = isSuccess ? data.data.title : "未命名工作簿";
|
||
|
||
// 协同场景下，才进行图片优化
|
||
Reflect.set(options, "uploadImage", uploadImage);
|
||
Reflect.set(options, "imageUrlHandle", imageUrlHandle);
|
||
|
||
options.allowUpdate = true;
|
||
options.loadUrl = getLoadUrl(gridKey);
|
||
options.updateUrl = `${WS_SERVER_URL}?type=luckysheet&userid=${id}&username=${username}&gridkey=${gridKey}`;
|
||
luckysheet.create(options);
|
||
} catch (error) {
|
||
console.error("==> 协同服务异常", error);
|
||
// 不然初始化普通模式，避免页面空白
|
||
Reflect.set(options, "data", defaultSheetData);
|
||
luckysheet.create(options);
|
||
}
|
||
}
|