feat: add publish app
This commit is contained in:
74
src/routes/page/module/cache-file.ts
Normal file
74
src/routes/page/module/cache-file.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import { useFileStore } from '@abearxiong/use-file-store';
|
||||
import { PageModel } from '../models/index.ts';
|
||||
import { ContainerModel } from '@/routes/container/models/index.ts';
|
||||
import { Op } from 'sequelize';
|
||||
import { getContainerData } from './get-container.ts';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import { getHTML, getDataJs } from './file-template.ts';
|
||||
import { minioClient } from '@/app.ts';
|
||||
import { bucketName } from '@/modules/minio.ts';
|
||||
import { getContentType } from '@/utils/get-content-type.ts';
|
||||
export const cacheFile = useFileStore('cache-file', {
|
||||
needExists: true,
|
||||
});
|
||||
|
||||
export const getDeck = async (page: PageModel) => {
|
||||
const { data } = page;
|
||||
const { nodes = [], edges } = data;
|
||||
const containerList = nodes
|
||||
.map((item) => {
|
||||
const { data } = item;
|
||||
return data?.cid;
|
||||
})
|
||||
.filter((item) => item);
|
||||
const quchong = Array.from(new Set(containerList));
|
||||
const containers = await ContainerModel.findAll({
|
||||
where: {
|
||||
id: {
|
||||
[Op.in]: quchong,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const pageData = {
|
||||
page,
|
||||
containerList: containers,
|
||||
};
|
||||
return pageData;
|
||||
};
|
||||
|
||||
export const cachePage = async (page: PageModel, opts: { tokenUser: any; key; version }) => {
|
||||
const _result = await getDeck(page);
|
||||
const result = getContainerData(_result);
|
||||
const html = getHTML({ rootId: page.id, title: page?.publish?.key });
|
||||
const dataJs = getDataJs(result);
|
||||
const htmlPath = path.resolve(cacheFile, `${page.id}.html`);
|
||||
const dataJsPath = path.resolve(cacheFile, `${page.id}.js`);
|
||||
fs.writeFileSync(htmlPath, html);
|
||||
fs.writeFileSync(dataJsPath, dataJs);
|
||||
const minioHTML = await uploadMinio({ ...opts, path: `index.html`, filePath: htmlPath });
|
||||
const minioData = await uploadMinio({ ...opts, path: `data.js`, filePath: dataJsPath });
|
||||
return [
|
||||
{
|
||||
name: 'index.html',
|
||||
path: minioHTML,
|
||||
},
|
||||
{
|
||||
name: 'data.js',
|
||||
path: minioData,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
export const uploadMinio = async ({ tokenUser, key, version, path, filePath }) => {
|
||||
const minioPath = `${tokenUser.username}/${key}/${version}/${path}`;
|
||||
const isHTML = filePath.endsWith('.html');
|
||||
await minioClient.fPutObject(bucketName, minioPath, filePath, {
|
||||
'Content-Type': getContentType(filePath),
|
||||
'app-source': 'user-app',
|
||||
'Cache-Control': isHTML ? 'no-cache' : 'max-age=31536000, immutable', // 缓存一年
|
||||
});
|
||||
fs.unlinkSync(filePath); // 删除临时文件
|
||||
return minioPath;
|
||||
};
|
||||
46
src/routes/page/module/file-template.ts
Normal file
46
src/routes/page/module/file-template.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
type HTMLOptions = {
|
||||
title?: string;
|
||||
rootId: string;
|
||||
};
|
||||
export const getHTML = (opts: HTMLOptions) => {
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${opts.title || 'Kevisual'}</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module">
|
||||
import { Container } from 'https://kevisual.xiongxiao.me/root/container/index.js'
|
||||
import { data } from './data.js'
|
||||
const container = new Container({
|
||||
root: 'root',
|
||||
data: data
|
||||
});
|
||||
container.render('${opts.rootId}');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>`;
|
||||
};
|
||||
|
||||
export const getDataJs = (result: any) => {
|
||||
return 'export const data=' + JSON.stringify(result);
|
||||
};
|
||||
143
src/routes/page/module/get-container.ts
Normal file
143
src/routes/page/module/get-container.ts
Normal file
@@ -0,0 +1,143 @@
|
||||
// import { RenderData } from '@abearxiong/container';
|
||||
type RenderData = any;
|
||||
|
||||
type Page = {
|
||||
data: {
|
||||
edges: { id: string; source: string; target: string }[];
|
||||
nodes: { id: string; type: string; position: { x: number; y: number }; data: any }[];
|
||||
};
|
||||
id: string;
|
||||
type: string;
|
||||
[key: string]: any;
|
||||
};
|
||||
type Container = {
|
||||
code: string;
|
||||
id: string;
|
||||
[key: string]: any;
|
||||
};
|
||||
type PageEditData = {
|
||||
page: Page;
|
||||
containerList: Container[];
|
||||
};
|
||||
export const getContainerData = (pageEditData: any) => {
|
||||
const { page, containerList } = pageEditData;
|
||||
const containerObj = containerList.reduce((acc, container) => {
|
||||
acc[container.id] = container;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const { edges, nodes } = page.data;
|
||||
const nodesObj = nodes.reduce((acc, node) => {
|
||||
acc[node.id] = node;
|
||||
return acc;
|
||||
}, {});
|
||||
const treeArray = getTreeFromEdges(edges);
|
||||
const floatNodes = nodes.filter((node) => !treeArray.find((item) => item.id === node.id));
|
||||
const treeNodes = nodes.filter((node) => treeArray.find((item) => item.id === node.id));
|
||||
const renderData: RenderData[] = [];
|
||||
for (let tree of treeArray) {
|
||||
const node = nodesObj[tree.id];
|
||||
const container = containerObj[node.data?.cid];
|
||||
const style = node.data?.style ?? {
|
||||
position: 'absolute',
|
||||
width: 100,
|
||||
height: 100,
|
||||
};
|
||||
const data = {
|
||||
node: { ...node },
|
||||
container: { ...container },
|
||||
};
|
||||
renderData.push({
|
||||
id: node.id,
|
||||
children: tree.children,
|
||||
parents: tree.parents,
|
||||
code: container?.code || '',
|
||||
codeId: container?.id,
|
||||
data: data || {},
|
||||
className: node.data?.className,
|
||||
shadowRoot: node.data?.shadowRoot,
|
||||
showChild: node.data?.showChild,
|
||||
style,
|
||||
});
|
||||
}
|
||||
for (let node of floatNodes) {
|
||||
const container = containerObj[node.data?.cid];
|
||||
const style = node.data?.style ?? {
|
||||
position: 'absolute',
|
||||
width: 100,
|
||||
height: 100,
|
||||
};
|
||||
const data = {
|
||||
node: { ...node },
|
||||
container: { ...container },
|
||||
};
|
||||
renderData.push({
|
||||
id: node.id,
|
||||
children: [],
|
||||
parents: [],
|
||||
code: container?.code || '',
|
||||
codeId: container?.id,
|
||||
data: data || {},
|
||||
className: node.data?.className,
|
||||
shadowRoot: node.data?.shadowRoot,
|
||||
showChild: node.data?.showChild,
|
||||
style,
|
||||
});
|
||||
}
|
||||
return renderData;
|
||||
};
|
||||
const getTreeFromEdges = (
|
||||
edges: { id: string; source: string; target: string }[],
|
||||
): {
|
||||
id: string;
|
||||
parents: string[];
|
||||
children: string[];
|
||||
}[] => {
|
||||
// 构建树形结构
|
||||
function buildNodeTree(edges) {
|
||||
const nodeMap = {};
|
||||
|
||||
// 初始化每个节点的子节点列表和父节点列表
|
||||
edges.forEach((edge) => {
|
||||
if (!nodeMap[edge.source]) {
|
||||
nodeMap[edge.source] = { id: edge.source, parents: [], children: [] };
|
||||
}
|
||||
if (!nodeMap[edge.target]) {
|
||||
nodeMap[edge.target] = { id: edge.target, parents: [], children: [] };
|
||||
}
|
||||
|
||||
// 连接父节点和子节点
|
||||
nodeMap[edge.source].children.push(nodeMap[edge.target]);
|
||||
nodeMap[edge.target].parents.push(nodeMap[edge.source]);
|
||||
});
|
||||
|
||||
return nodeMap;
|
||||
}
|
||||
|
||||
const nodeTree = buildNodeTree(edges);
|
||||
|
||||
// 递归获取所有父节点，按顺序
|
||||
function getAllParents(node) {
|
||||
const parents: string[] = [];
|
||||
function traverseParents(currentNode) {
|
||||
if (currentNode.parents.length > 0) {
|
||||
currentNode.parents.forEach((parent: any) => {
|
||||
parents.push(parent.id);
|
||||
traverseParents(parent);
|
||||
});
|
||||
}
|
||||
}
|
||||
traverseParents(node);
|
||||
return parents.reverse(); // 确保顺序从最顶层到直接父节点
|
||||
}
|
||||
|
||||
function getNodeInfo(nodeMap) {
|
||||
return Object.values(nodeMap).map((node: any) => ({
|
||||
id: node.id,
|
||||
parents: getAllParents(node),
|
||||
children: node.children.map((child) => child.id),
|
||||
}));
|
||||
}
|
||||
const result = getNodeInfo(nodeTree);
|
||||
return result;
|
||||
};
|
||||
Reference in New Issue
Block a user