Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

帮助文档

This commit is contained in:
qsc 2023-07-03 13:08:51 +08:00
parent a24fca334a
commit e91507ef7f
35 changed files with 1917 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/components/article/detail2/index.d.ts vendored
View File

@ -1,4 +1,4 @@
/// <reference types="wechat-miniprogram" />
/// <reference types="react" />
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../general-app-domain").EntityDict, "article", true, WechatMiniprogram.Component.DataOption>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../general-app-domain").EntityDict, "article", false, WechatMiniprogram.Component.DataOption>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export default _default;

42
lib/components/article/detail2/index.js
View File

@ -1,9 +1,8 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
exports.default = OakComponent({
entity: 'article',
isList: true,
isList: false,
projection: {
id: 1,
name: 1,
@ -13,28 +12,25 @@ exports.default = OakComponent({
name: 1,
isArticle: 1,
isLeaf: 1,
}
},
},
formData: function (_a) {
var article = _a.data;
return {
content: article === null || article === void 0 ? void 0 : article.content,
name: article === null || article === void 0 ? void 0 : article.name,
};
},
methods: {
onRemoveArticle: function (id) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
this.removeItem(id);
return [4 /*yield*/, this.execute()];
case 1:
_a.sent();
return [2 /*return*/];
copy: function (articleId) {
var _this = this;
var url = "".concat(window.location.host, "/article/preview?oakId=").concat(articleId);
navigator.clipboard.writeText(url).then(function () {
_this.setMessage({
content: '复制链接成功',
type: 'success',
});
});
},
}
});
});
},
gotoArticleEdit: function (articleId) {
this.navigateTo({
url: '/article/upsert',
oakId: articleId
});
},
},
});

4
lib/components/article/detail2/web.d.ts vendored
View File

@ -2,9 +2,11 @@ import '@wangeditor/editor/dist/css/style.css';
import { EntityDict } from '../../../general-app-domain';
import { WebComponentProps } from 'oak-frontend-base';
export default function Render(props: WebComponentProps<EntityDict, 'article', false, {
articleId: string;
oakId: string;
content: string;
name: string;
}, {
gotoArticleEdit: (articleId: string) => void;
onRemoveArticle: (id: string) => void;
copy: (id: string) => void;
}>): import("react/jsx-runtime").JSX.Element;

17
lib/components/article/detail2/web.js
View File

@ -2,6 +2,7 @@
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var antd_1 = require("antd");
var confirm = antd_1.Modal.confirm;
require("@wangeditor/editor/dist/css/style.css"); // 引入 css
@ -9,15 +10,23 @@ var editor_for_react_1 = require("@wangeditor/editor-for-react");
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
function Render(props) {
var method = props.methods, data = props.data;
var _a = props.data, content = _a.content, articleId = _a.articleId;
var t = method.t, onRemoveArticle = method.onRemoveArticle, gotoArticleEdit = method.gotoArticleEdit;
var _a = props.data, content = _a.content, name = _a.name, oakId = _a.oakId;
var t = method.t, onRemoveArticle = method.onRemoveArticle, gotoArticleEdit = method.gotoArticleEdit, copy = method.copy;
var editorConfig = {
readOnly: true,
autoFocus: true,
scroll: false,
};
return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.rightContainer }, { children: (0, jsx_runtime_1.jsx)(antd_1.Row, { children: (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 16 }, { children: (0, jsx_runtime_1.jsx)(antd_1.Form, tslib_1.__assign({ colon: true, labelCol: { span: 4 }, wrapperCol: { span: 20 } }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(editor_for_react_1.Editor, { defaultConfig: editorConfig, value: content, mode: "default", style: {
var _b = tslib_1.__read((0, react_1.useState)(''), 2), value = _b[0], setValue = _b[1];
(0, react_1.useEffect)(function () {
if (content) {
setValue(content);
}
}, [content]);
return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.rightContainer }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { display: 'flex', justifyContent: 'flex-end' } }, { children: (0, jsx_runtime_1.jsx)(antd_1.Space, { children: (0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ onClick: function () {
copy(oakId);
} }, { children: "\u590D\u5236\u94FE\u63A5" })) }) })), (0, jsx_runtime_1.jsx)(antd_1.Row, { children: (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 16 }, { children: (0, jsx_runtime_1.jsx)(antd_1.Form, tslib_1.__assign({ colon: true, labelCol: { span: 4 }, wrapperCol: { span: 20 } }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(editor_for_react_1.Editor, { defaultConfig: editorConfig, value: value, mode: "default", style: {
width: 750
} }) }) }) }) })) })) }) })));
} }) }) }) }) })) })) })] })));
}
exports.default = Render;

4
lib/components/article/detail3/index.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
/// <reference types="wechat-miniprogram" />
/// <reference types="react" />
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../general-app-domain").EntityDict, "article", false, WechatMiniprogram.Component.DataOption>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export default _default;

36
lib/components/article/detail3/index.js Normal file
View File

@ -0,0 +1,36 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = OakComponent({
entity: 'article',
isList: false,
projection: {
id: 1,
name: 1,
content: 1,
articleMenu: {
id: 1,
name: 1,
isArticle: 1,
isLeaf: 1,
},
},
formData: function (_a) {
var article = _a.data;
return {
content: article === null || article === void 0 ? void 0 : article.content,
name: article === null || article === void 0 ? void 0 : article.name,
};
},
methods: {
copy: function (articleId) {
var _this = this;
var url = "".concat(window.location.host, "/article/preview?oakId=").concat(articleId);
navigator.clipboard.writeText(url).then(function () {
_this.setMessage({
content: '复制链接成功',
type: 'success',
});
});
},
}
});

12
lib/components/article/detail3/web.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
import '@wangeditor/editor/dist/css/style.css';
import { EntityDict } from '../../../general-app-domain';
import { WebComponentProps } from 'oak-frontend-base';
export default function Render(props: WebComponentProps<EntityDict, 'article', false, {
oakId: string;
content: string;
name: string;
}, {
gotoArticleEdit: (articleId: string) => void;
onRemoveArticle: (id: string) => void;
copy: (id: string) => void;
}>): import("react/jsx-runtime").JSX.Element;

30
lib/components/article/detail3/web.js Normal file
View File

@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var antd_1 = require("antd");
var confirm = antd_1.Modal.confirm;
require("@wangeditor/editor/dist/css/style.css"); // 引入 css
var editor_for_react_1 = require("@wangeditor/editor-for-react");
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
function Render(props) {
var method = props.methods, data = props.data;
var _a = props.data, content = _a.content, name = _a.name, oakId = _a.oakId;
var t = method.t, onRemoveArticle = method.onRemoveArticle, gotoArticleEdit = method.gotoArticleEdit, copy = method.copy;
var editorConfig = {
readOnly: true,
autoFocus: true,
scroll: false,
};
var _b = tslib_1.__read((0, react_1.useState)(''), 2), value = _b[0], setValue = _b[1];
(0, react_1.useEffect)(function () {
if (content) {
setValue(content);
}
}, [content]);
return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.rightContainer }, { children: (0, jsx_runtime_1.jsx)(antd_1.Row, { children: (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 16 }, { children: (0, jsx_runtime_1.jsx)(antd_1.Form, tslib_1.__assign({ colon: true, labelCol: { span: 4 }, wrapperCol: { span: 20 } }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(editor_for_react_1.Editor, { defaultConfig: editorConfig, value: value, mode: "default", style: {
width: 750
} }) }) }) }) })) })) }) })));
}
exports.default = Render;

3
lib/components/article/detail3/web.module.less Normal file
View File

@ -0,0 +1,3 @@
.container {
width: 950px;
}

4
lib/components/articleMenu/cell/web.js
View File

@ -16,7 +16,7 @@ function render(props) {
gotoEditByParentId(oakId);
} }, { children: "\u6DFB\u52A0\u5B50\u8282\u70B9" }))), (isArticle || !isLeaf) && ((0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ onClick: function () {
gotoArticleEditByArticleMenuId(oakId);
} }, { children: "\u6DFB\u52A0\u6587\u7AE0" }))), (0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ type: "link", onClick: function () {
} }, { children: "\u6DFB\u52A0\u6587\u7AE0" }))), (isArticle || isLeaf) ? ('') : ((0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ type: "link", onClick: function () {
var modal = antd_1.Modal.confirm({
title: '确定删除该文章分类吗？',
content: '删除后不可恢复',
@ -27,6 +27,6 @@ function render(props) {
modal.destroy();
},
});
} }, { children: "\u5220\u9664" }))] }) }))] })) })));
} }, { children: "\u5220\u9664" })))] }) }))] })) })));
}
exports.default = render;

5
lib/pages/article/detail/index.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
/// <reference types="wechat-miniprogram" />
/// <reference types="react" />
import { EntityDict } from '../../../general-app-domain';
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<EntityDict, "articleMenu", true, WechatMiniprogram.Component.DataOption>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export default _default;

486
lib/pages/article/detail/index.js Normal file
View File

@ -0,0 +1,486 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
exports.default = OakComponent({
entity: 'articleMenu',
projection: {
id: 1,
name: 1,
isArticle: 1,
isLeaf: 1,
parent: {
id: 1,
name: 1,
isArticle: 1,
isLeaf: 1,
},
extraFile$entity: {
$entity: 'extraFile',
data: {
id: 1,
tag1: 1,
origin: 1,
bucket: 1,
objectId: 1,
filename: 1,
extra1: 1,
extension: 1,
type: 1,
entity: 1,
entityId: 1,
},
filter: {
tag1: {
$in: ['logo', 'introduce'],
},
},
},
},
isList: true,
formData: function (_a) {
var articleMenu = _a.data;
return {
articleMenu: articleMenu,
};
},
filters: [],
lifetimes: {
ready: function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var articles, articleMenus, newArticleMenus, newArticles, arr, rootNodes, treeData;
var _this = this;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.features.cache.refresh('article', {
data: {
id: 1,
name: 1,
content: 1,
articleMenuId: 1,
},
})];
case 1:
articles = (_a.sent()).data;
return [4 /*yield*/, this.features.cache.refresh('articleMenu', {
data: {
id: 1,
name: 1,
isArticle: 1,
isLeaf: 1,
parent: {
id: 1,
name: 1,
isArticle: 1,
isLeaf: 1,
},
extraFile$entity: {
$entity: 'extraFile',
data: {
id: 1,
tag1: 1,
origin: 1,
bucket: 1,
objectId: 1,
filename: 1,
extra1: 1,
extension: 1,
type: 1,
entity: 1,
entityId: 1,
},
filter: {
tag1: {
$in: ['logo'],
},
},
},
},
sorter: [
{
$attr: {
$$createAt$$: 1,
},
$direction: 'asc',
},
],
})];
case 2:
articleMenus = (_a.sent()).data;
newArticleMenus = articleMenus === null || articleMenus === void 0 ? void 0 : articleMenus.map(function (ele) {
var _a;
return tslib_1.__assign(tslib_1.__assign({}, ele), { logo: _this.features.extraFile.getUrl((_a = ele === null || ele === void 0 ? void 0 : ele.extraFile$entity) === null || _a === void 0 ? void 0 : _a.find(function (ele) { return ele.tag1 === 'logo'; })) });
});
newArticles = articles === null || articles === void 0 ? void 0 : articles.map(function (ele) { return ({
id: ele === null || ele === void 0 ? void 0 : ele.id,
name: ele === null || ele === void 0 ? void 0 : ele.name,
parent: ele === null || ele === void 0 ? void 0 : ele.articleMenuId,
parentId: ele === null || ele === void 0 ? void 0 : ele.articleMenuId,
isArticle: true,
content: ele === null || ele === void 0 ? void 0 : ele.content,
logo: null,
}); });
arr = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(newArticleMenus), false), tslib_1.__read(newArticles), false);
rootNodes = arr === null || arr === void 0 ? void 0 : arr.filter(function (node) { return !node.parent; });
treeData = rootNodes === null || rootNodes === void 0 ? void 0 : rootNodes.map(function (rootNode) {
var _a;
return {
label: rootNode.name,
title: rootNode.name,
key: (_a = rootNode.id) === null || _a === void 0 ? void 0 : _a.toString(),
isArticle: rootNode.isArticle,
logo: rootNode === null || rootNode === void 0 ? void 0 : rootNode.logo,
children: _this.buildTreeData(arr, rootNode.id),
};
});
this.setState({
treeData: treeData,
});
return [2 /*return*/];
}
});
});
},
},
data: {
selectedArticleId: '',
openKeys: [],
selectedKeys: [],
treeData: [],
parentId: '',
articleMenuId: '',
id: '',
name: '',
isArticle: false,
isChildren: false,
logo: '',
},
methods: {
getOpenKeys: function (targetKey, treeData, openKeys) {
var _this = this;
if (openKeys === void 0) { openKeys = []; }
var selectedKeys = [];
var toggleOpenKeys = function (nodes, parentOpen) {
var e_1, _a;
var _loop_1 = function (node) {
if (node.key === targetKey) {
var isOpen = openKeys.includes(node.key);
if (isOpen) {
// 当前子菜单已展开，收起当前子菜单及其所有子菜单
openKeys = openKeys.filter(function (key) {
return key !== node.key &&
!key.startsWith("".concat(node.key, "-"));
});
}
else {
// 当前子菜单已收起，展开当前子菜单及其所有子菜单
openKeys.push(node.key);
openKeys.push.apply(openKeys, tslib_1.__spreadArray([], tslib_1.__read(getAllChildKeys(node)), false));
var leafNode = findLeafNode(node);
if (leafNode) {
var parentKeys = getParentKeys(leafNode);
selectedKeys.push.apply(selectedKeys, tslib_1.__spreadArray([], tslib_1.__read(parentKeys), false));
_this.gotoArticleUpsert(leafNode.key);
}
}
// 存储第一个没有子节点的节点及其全部父节点到 selectedKeys
}
else if (node.children) {
toggleOpenKeys(node.children, openKeys.includes(node.key) || parentOpen); // 递归处理子菜单的展开和收起
}
};
try {
for (var nodes_1 = tslib_1.__values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
var node = nodes_1_1.value;
_loop_1(node);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (nodes_1_1 && !nodes_1_1.done && (_a = nodes_1.return)) _a.call(nodes_1);
}
finally { if (e_1) throw e_1.error; }
}
};
var getAllChildKeys = function (node) {
var e_2, _a;
var childKeys = [];
if (node.children) {
try {
for (var _b = tslib_1.__values(node.children), _c = _b.next(); !_c.done; _c = _b.next()) {
var child = _c.value;
childKeys.push(child.key);
childKeys.push.apply(childKeys, tslib_1.__spreadArray([], tslib_1.__read(getAllChildKeys(child)), false));
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
}
return childKeys;
};
var findLeafNode = function (node) {
var e_3, _a;
if (!node.children || node.children.length === 0) {
return node;
}
try {
for (var _b = tslib_1.__values(node.children), _c = _b.next(); !_c.done; _c = _b.next()) {
var child = _c.value;
var leafNode = findLeafNode(child);
if (leafNode) {
return leafNode;
}
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_3) throw e_3.error; }
}
return undefined;
};
var getParentKeys = function (node) {
var parentKeys = [];
var currentNode = node;
while (currentNode) {
parentKeys.unshift(currentNode.key);
currentNode = findParentNode(currentNode);
}
return parentKeys;
};
var findParentNode = function (node) {
if (!node.parentKey) {
return undefined;
}
var parentNode = treeData.find(function (ele) { return ele.key === node.parentKey; });
return parentNode;
};
toggleOpenKeys(treeData, false);
this.setState({
openKeys: tslib_1.__spreadArray([], tslib_1.__read(new Set(openKeys)), false),
selectedKeys: tslib_1.__spreadArray([], tslib_1.__read(new Set(selectedKeys)), false), // 去重并更新 selectedKeys
});
return openKeys;
},
buildTreeData: function (nodes, parentId) {
var e_4, _a;
var children = [];
try {
for (var nodes_2 = tslib_1.__values(nodes), nodes_2_1 = nodes_2.next(); !nodes_2_1.done; nodes_2_1 = nodes_2.next()) {
var node = nodes_2_1.value;
if (node.parentId === parentId) {
var treeNode = {
label: node.name,
title: node.name,
key: node.id.toString(),
isArticle: node.isArticle,
isLeaf: node.isLeaf,
logo: node.logo,
};
var nestedChildren = this.buildTreeData(nodes, node.id);
if (nestedChildren.length > 0) {
treeNode.children = nestedChildren;
}
children.push(treeNode);
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (nodes_2_1 && !nodes_2_1.done && (_a = nodes_2.return)) _a.call(nodes_2);
}
finally { if (e_4) throw e_4.error; }
}
return children;
},
gotoUpsert: function (parentId) {
this.setState({
parentId: parentId,
id: '',
articleMenuId: '',
});
},
gotoUpsertById: function (id) {
var _a, _b, _c, _d;
return tslib_1.__awaiter(this, void 0, void 0, function () {
var articleMenu;
return tslib_1.__generator(this, function (_e) {
switch (_e.label) {
case 0:
if (!id) return [3 /*break*/, 2];
return [4 /*yield*/, this.features.cache.refresh('articleMenu', {
data: {
id: 1,
name: 1,
isArticle: 1,
parentId: 1,
extraFile$entity: {
$entity: 'extraFile',
data: {
id: 1,
tag1: 1,
origin: 1,
bucket: 1,
objectId: 1,
filename: 1,
extra1: 1,
extension: 1,
type: 1,
entity: 1,
entityId: 1,
},
filter: {
tag1: {
$in: ['logo'],
},
},
},
},
filter: {
$or: [
{
id: id,
},
{
parentId: id,
},
],
},
})];
case 1:
articleMenu = (_e.sent()).data;
if (articleMenu && (articleMenu === null || articleMenu === void 0 ? void 0 : articleMenu.length) > 1) {
this.setState({
id: articleMenu[0].id,
name: articleMenu[0].name,
parentId: '',
articleMenuId: '',
isArticle: articleMenu[0].isArticle,
isChildren: true,
logo: this.features.extraFile.getUrl((_b = (_a = articleMenu[0]) === null || _a === void 0 ? void 0 : _a.extraFile$entity) === null || _b === void 0 ? void 0 : _b.find(function (ele) { return ele.tag1 === 'logo'; })),
});
}
if (articleMenu && (articleMenu === null || articleMenu === void 0 ? void 0 : articleMenu.length) === 1) {
this.setState({
id: articleMenu[0].id,
name: articleMenu[0].name,
parentId: '',
articleMenuId: '',
isArticle: articleMenu[0].isArticle,
isChildren: false,
logo: this.features.extraFile.getUrl((_d = (_c = articleMenu[0]) === null || _c === void 0 ? void 0 : _c.extraFile$entity) === null || _d === void 0 ? void 0 : _d.find(function (ele) { return ele.tag1 === 'logo'; })),
});
}
_e.label = 2;
case 2: return [2 /*return*/];
}
});
});
},
gotoArticleUpsert: function (articleId, selectedKeys) {
if (selectedKeys === void 0) { selectedKeys = []; }
return tslib_1.__awaiter(this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
if (selectedKeys.includes(articleId)) {
}
else {
this.setState({
selectedKeys: [articleId],
selectedArticleId: articleId,
id: '',
parentId: '',
});
}
return [2 /*return*/];
});
});
},
gotoEdit: function (id) {
if (id) {
this.navigateTo({
url: '/articleMenu/upsert',
oakId: id,
});
}
else {
this.navigateTo({
url: '/articleMenu/upsert',
});
}
},
gotoEditByParentId: function (parentId) {
this.navigateTo({
url: '/articleMenu/upsert',
parentId: parentId,
});
},
gotoArticleEdit: function (articleId) {
this.navigateTo({
url: '/article/upsert',
oakId: articleId,
});
},
gotoArticleEditByArticleMenuId: function (articleMenuId) {
this.navigateTo({
url: '/article/upsert',
articleMenuId: articleMenuId,
});
},
onRemoveArticleMenu: function (id) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
this.removeItem(id);
return [4 /*yield*/, this.execute()];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
},
onRemoveArticle: function (id) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
this.removeItem(id);
return [4 /*yield*/, this.execute()];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
},
check: function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!this.state.name) {
this.setMessage({
type: 'error',
content: '请输入文章分类名称',
});
return [2 /*return*/];
}
return [4 /*yield*/, this.execute()];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
},
},
});

46
lib/pages/article/detail/web.d.ts vendored Normal file
View File

@ -0,0 +1,46 @@
import { WebComponentProps } from "oak-frontend-base";
import { EntityDict } from "../../../general-app-domain";
interface DataNode {
label: string;
title: string;
key: string;
isArticle?: boolean;
children?: DataNode[];
}
export default function render(props: WebComponentProps<EntityDict, "articleMenu", true, {
articleMenu: EntityDict["articleMenu"]["Schema"][];
articles: EntityDict["article"]["Schema"][];
treeData: DataNode[];
content: string;
arr: {
id: string | undefined;
name: string | undefined;
parent: string | undefined;
parentId: string | undefined;
isArticle: boolean;
isLeaf: boolean;
}[];
id: string;
parentId: string;
articleId: string;
name: string;
isArticle: boolean;
isChildren: boolean;
logo: string;
openKeys: string[];
selectedKeys: string[];
selectedArticleId: string;
}, {
gotoUpsert: (id?: string) => void;
gotoUpsertById: (id: string) => void;
gotoArticleUpsert: (articleId: string, selectedKeys?: string[]) => void;
check: () => void;
onRemoveArticleMenu: (id: string) => void;
gotoEdit: (id?: string) => void;
gotoEditByParentId: (parentId: string) => void;
gotoArticleEdit: (articleId: string) => void;
onRemoveArticle: (id: string) => void;
gotoArticleEditByArticleMenuId: (articleMenuId: string) => void;
getOpenKeys: (targetKey: string, treeData: DataNode[], openKeys: string[]) => void;
}>): import("react/jsx-runtime").JSX.Element;
export {};

30
lib/pages/article/detail/web.js Normal file
View File

@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var antd_1 = require("antd");
var confirm = antd_1.Modal.confirm;
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
var useFeatures_1 = tslib_1.__importDefault(require("../../../hooks/useFeatures"));
var detail3_1 = tslib_1.__importDefault(require("../../../components/article/detail3"));
var SubMenu = antd_1.Menu.SubMenu;
var Sider = antd_1.Layout.Sider;
function render(props) {
var _a = props.data, arr = _a.arr, treeData = _a.treeData, id = _a.id, parentId = _a.parentId, articleId = _a.articleId, name = _a.name, content = _a.content, oakFullpath = _a.oakFullpath, isArticle = _a.isArticle, isChildren = _a.isChildren, logo = _a.logo, openKeys = _a.openKeys, selectedKeys = _a.selectedKeys, selectedArticleId = _a.selectedArticleId;
var _b = props.methods, t = _b.t, gotoUpsert = _b.gotoUpsert, gotoUpsertById = _b.gotoUpsertById, gotoArticleUpsert = _b.gotoArticleUpsert, onRemoveArticleMenu = _b.onRemoveArticleMenu, gotoEdit = _b.gotoEdit, gotoEditByParentId = _b.gotoEditByParentId, gotoArticleEdit = _b.gotoArticleEdit, onRemoveArticle = _b.onRemoveArticle, gotoArticleEditByArticleMenuId = _b.gotoArticleEditByArticleMenuId, getOpenKeys = _b.getOpenKeys;
var features = (0, useFeatures_1.default)();
var renderMenuItems = function (data) {
return data === null || data === void 0 ? void 0 : data.map(function (menuItem) {
if (menuItem.children || menuItem.isLeaf) {
return ((0, jsx_runtime_1.jsx)(antd_1.Menu.SubMenu, tslib_1.__assign({ icon: menuItem.logo ? ((0, jsx_runtime_1.jsx)(antd_1.Image, { height: 26, width: 26, src: menuItem.logo, preview: false })) : null, title: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginLeft: 8 } }, { children: menuItem.title })), onTitleClick: function (e) {
getOpenKeys(e.key, treeData, openKeys);
} }, { children: renderMenuItems(menuItem.children) }), menuItem.key));
}
return ((0, jsx_runtime_1.jsx)(antd_1.Menu.Item, tslib_1.__assign({ onClick: function (e) {
gotoArticleUpsert(e.key, selectedKeys);
} }, { children: menuItem.label }), menuItem.key));
});
};
return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: (treeData === null || treeData === void 0 ? void 0 : treeData.length) === 0 ? ((0, jsx_runtime_1.jsx)(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE })) : ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.article }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.menu }, { children: (0, jsx_runtime_1.jsx)(Sider, tslib_1.__assign({ theme: "light", width: 256, className: web_module_less_1.default.siderPanel }, { children: (0, jsx_runtime_1.jsx)(antd_1.Menu, tslib_1.__assign({ openKeys: openKeys, selectedKeys: selectedKeys, style: { width: 256 }, mode: "inline" }, { children: renderMenuItems(treeData) })) })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.editor }, { children: (selectedArticleId === null || selectedArticleId === void 0 ? void 0 : selectedArticleId.length) > 0 ? ((0, jsx_runtime_1.jsx)(detail3_1.default, { oakAutoUnmount: true, oakId: selectedArticleId, oakPath: "$article-detail2-".concat(selectedArticleId) })) : null }))] }))) })));
}
exports.default = render;

62
lib/pages/article/detail/web.module.less Normal file
View File

@ -0,0 +1,62 @@
.container {
background: var(--oak-bg-color-container);
// box-shadow: 0 2px 3px #0000001a;
// border-radius: 3px;
// padding: 30px 32px;
// min-height: 450px;
.article {
display: flex;
flex-direction: row;
.menu {
display: flex;
}
.editor {
display: flex;
margin-left: 20px;
.rightContainer {
width: 950px;
}
}
}
}
.space {
margin-bottom: 15px;
}
.tree {
:global {
.ant-tree-title {
display: flex;
flex: 1;
}
}
}
.siderPanel {
flex-shrink: 0;
height: 100%;
// border-right: 1px solid var(--oak-border-color);
overflow-y: hidden;
overflow-x: hidden;
.icon {
font-size: 20px;
}
:global {
.ant-layout-sider-children {
height: calc(100% - 48px);
overflow-y: auto;
}
.ant-layout-sider-trigger {
// text-align: left;
// padding-left: 16px;
// border-right: 1px solid var(--oak-border-color);
}
}
}

48
lib/pages/article/list/index.js
View File

@ -133,7 +133,6 @@ exports.default = OakComponent({
};
});
this.setState({
arr: arr,
treeData: treeData,
});
return [2 /*return*/];
@ -142,6 +141,19 @@ exports.default = OakComponent({
});
},
},
data: {
selectedArticleId: '',
openKeys: [],
selectedKeys: [],
treeData: [],
parentId: '',
articleMenuId: '',
id: '',
name: '',
isArticle: false,
isChildren: false,
logo: '',
},
methods: {
getOpenKeys: function (targetKey, treeData, openKeys) {
var _this = this;
@ -374,42 +386,20 @@ exports.default = OakComponent({
});
},
gotoArticleUpsert: function (articleId, selectedKeys) {
var _a;
if (selectedKeys === void 0) { selectedKeys = []; }
return tslib_1.__awaiter(this, void 0, void 0, function () {
var article;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
if (!selectedKeys.includes(articleId)) return [3 /*break*/, 1];
return [3 /*break*/, 3];
case 1:
if (!articleId) return [3 /*break*/, 3];
return [4 /*yield*/, this.features.cache.refresh('article', {
data: {
id: 1,
name: 1,
content: 1,
articleMenuId: 1,
},
filter: {
id: articleId,
},
})];
case 2:
article = (_b.sent()).data;
if (article) {
return tslib_1.__generator(this, function (_a) {
if (selectedKeys.includes(articleId)) {
}
else {
this.setState({
selectedKeys: [articleId],
content: (_a = article[0]) === null || _a === void 0 ? void 0 : _a.content,
articleId: articleId,
selectedArticleId: articleId,
id: '',
parentId: '',
});
}
_b.label = 3;
case 3: return [2 /*return*/];
}
return [2 /*return*/];
});
});
},

11
lib/pages/article/list/web.d.ts vendored
View File

@ -1,5 +1,5 @@
import { WebComponentProps } from 'oak-frontend-base';
import { EntityDict } from '../../../general-app-domain';
import { WebComponentProps } from "oak-frontend-base";
import { EntityDict } from "../../../general-app-domain";
interface DataNode {
label: string;
title: string;
@ -7,9 +7,9 @@ interface DataNode {
isArticle?: boolean;
children?: DataNode[];
}
export default function render(props: WebComponentProps<EntityDict, 'articleMenu', true, {
articleMenu: EntityDict['articleMenu']['Schema'][];
articles: EntityDict['article']['Schema'][];
export default function render(props: WebComponentProps<EntityDict, "articleMenu", true, {
articleMenu: EntityDict["articleMenu"]["Schema"][];
articles: EntityDict["article"]["Schema"][];
treeData: DataNode[];
content: string;
arr: {
@ -29,6 +29,7 @@ export default function render(props: WebComponentProps<EntityDict, 'articleMenu
logo: string;
openKeys: string[];
selectedKeys: string[];
selectedArticleId: string;
}, {
gotoUpsert: (id?: string) => void;
gotoUpsertById: (id: string) => void;

4
lib/pages/article/list/web.js
View File

@ -10,7 +10,7 @@ var pageHeader_1 = tslib_1.__importDefault(require("../../../components/common/p
var detail2_1 = tslib_1.__importDefault(require("../../../components/article/detail2"));
var SubMenu = antd_1.Menu.SubMenu;
function render(props) {
var _a = props.data, arr = _a.arr, treeData = _a.treeData, id = _a.id, parentId = _a.parentId, articleId = _a.articleId, name = _a.name, content = _a.content, oakFullpath = _a.oakFullpath, isArticle = _a.isArticle, isChildren = _a.isChildren, logo = _a.logo, openKeys = _a.openKeys, selectedKeys = _a.selectedKeys;
var _a = props.data, arr = _a.arr, treeData = _a.treeData, id = _a.id, parentId = _a.parentId, articleId = _a.articleId, name = _a.name, content = _a.content, oakFullpath = _a.oakFullpath, isArticle = _a.isArticle, isChildren = _a.isChildren, logo = _a.logo, openKeys = _a.openKeys, selectedKeys = _a.selectedKeys, selectedArticleId = _a.selectedArticleId;
var _b = props.methods, t = _b.t, gotoUpsert = _b.gotoUpsert, gotoUpsertById = _b.gotoUpsertById, gotoArticleUpsert = _b.gotoArticleUpsert, onRemoveArticleMenu = _b.onRemoveArticleMenu, gotoEdit = _b.gotoEdit, gotoEditByParentId = _b.gotoEditByParentId, gotoArticleEdit = _b.gotoArticleEdit, onRemoveArticle = _b.onRemoveArticle, gotoArticleEditByArticleMenuId = _b.gotoArticleEditByArticleMenuId, getOpenKeys = _b.getOpenKeys;
var features = (0, useFeatures_1.default)();
var renderMenuItems = function (data) {
@ -25,6 +25,6 @@ function render(props) {
} }, { children: menuItem.label }), menuItem.key));
});
};
return ((0, jsx_runtime_1.jsx)(pageHeader_1.default, tslib_1.__assign({ title: "\u5E2E\u52A9\u6587\u6863" }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: (treeData === null || treeData === void 0 ? void 0 : treeData.length) === 0 ? ((0, jsx_runtime_1.jsx)(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE })) : ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.article }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.menu }, { children: (0, jsx_runtime_1.jsx)(antd_1.Menu, tslib_1.__assign({ openKeys: openKeys, selectedKeys: selectedKeys, style: { width: 256 }, mode: "inline" }, { children: renderMenuItems(treeData) })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.editor }, { children: (articleId === null || articleId === void 0 ? void 0 : articleId.length) > 0 ? ((0, jsx_runtime_1.jsx)(detail2_1.default, { oakAutoUnmount: true, content: content, articleId: articleId, oakPath: "$article-detail-".concat(articleId) })) : null }))] }))) })) })));
return ((0, jsx_runtime_1.jsx)(pageHeader_1.default, tslib_1.__assign({ title: "\u5E2E\u52A9\u6587\u6863" }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: (treeData === null || treeData === void 0 ? void 0 : treeData.length) === 0 ? ((0, jsx_runtime_1.jsx)(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE })) : ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.article }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.menu }, { children: (0, jsx_runtime_1.jsx)(antd_1.Menu, tslib_1.__assign({ openKeys: openKeys, selectedKeys: selectedKeys, style: { width: 256 }, mode: "inline" }, { children: renderMenuItems(treeData) })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.editor }, { children: (selectedArticleId === null || selectedArticleId === void 0 ? void 0 : selectedArticleId.length) > 0 ? ((0, jsx_runtime_1.jsx)(detail2_1.default, { oakAutoUnmount: true, oakId: selectedArticleId, oakPath: "$article-detail2-".concat(selectedArticleId) })) : null }))] }))) })) })));
}
exports.default = render;

4
lib/pages/article/preview/index.js
View File

@ -9,9 +9,7 @@ exports.default = OakComponent({
content: 1,
articleMenu: {
id: 1,
},
entity: 1,
entityId: 1,
}
},
formData: function (_a) {
var article = _a.data, features = _a.features;

2
lib/pages/article/upsert/index.js
View File

@ -73,7 +73,7 @@ exports.default = OakComponent({
})];
case 3:
_b = tslib_1.__read.apply(void 0, [(_c.sent()).data, 1]), articleMenu = _b[0];
if (articleMenuId && !articleMenu.isArticle) {
if (articleMenuId) {
this.update({
articleMenuId: articleMenuId,
});

5
lib/pages/article/upsert/web.js
View File

@ -8,6 +8,7 @@ var antd_1 = require("antd");
var confirm = antd_1.Modal.confirm;
require("@wangeditor/editor/dist/css/style.css"); // 引入 css
var editor_for_react_1 = require("@wangeditor/editor-for-react");
var pageHeader_1 = tslib_1.__importDefault(require("../../../components/common/pageHeader"));
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
var useFeatures_1 = tslib_1.__importDefault(require("../../../hooks/useFeatures"));
var icons_1 = require("@ant-design/icons");
@ -41,7 +42,7 @@ function Render(props) {
setArticleId(id);
}
}, [id]);
return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Affix, tslib_1.__assign({ offsetTop: 64 }, { children: (0, jsx_runtime_1.jsx)(editor_for_react_1.Toolbar, { editor: editor, defaultConfig: toolbarConfig, mode: "default" }) })), (0, jsx_runtime_1.jsxs)(antd_1.Row, { children: [(0, jsx_runtime_1.jsx)(antd_1.Col, { flex: 4 }), (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ flex: 16 }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.content }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.editorContainer }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.titleContainer }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { onChange: function (e) { return update({ name: e.target.value }); }, value: data.name, placeholder: "请输入文章标题", size: "large", maxLength: 64, suffix: "".concat(tslib_1.__spreadArray([], tslib_1.__read((data.name || "")), false).length, "/64"), className: web_module_less_1.default.titleInput }) })), data.contentTip && ((0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "info", message: t("tips.content"), closable: true, onClose: function () { return method.clearContentTip(); } })), (0, jsx_runtime_1.jsx)(editor_for_react_1.Editor, { defaultConfig: {
return ((0, jsx_runtime_1.jsx)(pageHeader_1.default, tslib_1.__assign({ showBack: true, title: "\u6DFB\u52A0\u6587\u7AE0" }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Affix, tslib_1.__assign({ offsetTop: 64 }, { children: (0, jsx_runtime_1.jsx)(editor_for_react_1.Toolbar, { editor: editor, defaultConfig: toolbarConfig, mode: "default" }) })), (0, jsx_runtime_1.jsxs)(antd_1.Row, { children: [(0, jsx_runtime_1.jsx)(antd_1.Col, { flex: 4 }), (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ flex: 16 }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.content }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.editorContainer }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.titleContainer }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { onChange: function (e) { return update({ name: e.target.value }); }, value: data.name, placeholder: "请输入文章标题", size: "large", maxLength: 64, suffix: "".concat(tslib_1.__spreadArray([], tslib_1.__read((data.name || "")), false).length, "/64"), className: web_module_less_1.default.titleInput }) })), data.contentTip && ((0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "info", message: t("tips.content"), closable: true, onClose: function () { return method.clearContentTip(); } })), (0, jsx_runtime_1.jsx)(editor_for_react_1.Editor, { defaultConfig: {
placeholder: "请输入文章内容...",
MENU_CONF: {
checkImage: customCheckImageFn,
@ -151,6 +152,6 @@ function Render(props) {
check();
} }, { children: "\u4FDD\u5B58" })), (0, jsx_runtime_1.jsxs)(antd_1.Button, tslib_1.__assign({ onClick: function () {
gotoPreview(content, data.name);
} }, { children: [(0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), "\u9884\u89C8"] }))] }) })) })) }))] })) })) })), (0, jsx_runtime_1.jsx)(antd_1.Col, { flex: 4 })] })] })));
} }, { children: [(0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), "\u9884\u89C8"] }))] }) })) })) }))] })) })) })), (0, jsx_runtime_1.jsx)(antd_1.Col, { flex: 4 })] })] })) })));
}
exports.default = Render;

2
src/components/article/detail/index.ts
View File

@ -41,7 +41,7 @@ export default OakComponent({
window.open(`/article/preview?oakId=${articleId}`);
},
copy(articleId: string) {
const url = `${window.location.host}/article/preview?oakId=${articleId}`;
const url = `${window.location.host}/article/detail?oakId=${articleId}`;
navigator.clipboard.writeText(url).then(() => {
this.setMessage({
content: '复制链接成功',

12
src/components/article/detail2/index.ts
View File

@ -18,5 +18,15 @@ export default OakComponent({
name: article?.name,
};
},
methods: {}
methods: {
copy(articleId: string) {
const url = `${window.location.host}/article/detail?oakId=${articleId}`;
navigator.clipboard.writeText(url).then(() => {
this.setMessage({
content: '复制链接成功',
type: 'success',
});
});
},
}
});

15
src/components/article/detail2/web.tsx
View File

@ -24,15 +24,17 @@ export default function Render(
{
gotoArticleEdit: (articleId:string) => void;
onRemoveArticle: (id:string) => void;
copy: (id:string) => void;
}
>
) {
const { methods: method, data } = props;
const { content, name } = props.data;
const { content, name, oakId } = props.data;
const {
t,
onRemoveArticle,
gotoArticleEdit,
copy,
} = method;
const editorConfig: Partial<IEditorConfig> = {
readOnly: true,
@ -47,6 +49,17 @@ export default function Render(
},[content])
return (
<div className={Style.rightContainer}>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Space>
<Button
onClick={() => {
copy(oakId);
}}
>
复制链接
</Button>
</Space>
</div>
<Row>
<Col xs={24} sm={16}>
<Form

32
src/components/article/detail3/index.ts Normal file
View File

@ -0,0 +1,32 @@
export default OakComponent({
entity: 'article',
isList: false,
projection: {
id: 1,
name: 1,
content: 1,
articleMenu: {
id: 1,
name: 1,
isArticle: 1,
isLeaf: 1,
},
},
formData: function ({ data: article }) {
return {
content: article?.content,
name: article?.name,
};
},
methods: {
copy(articleId: string) {
const url = `${window.location.host}/article/preview?oakId=${articleId}`;
navigator.clipboard.writeText(url).then(() => {
this.setMessage({
content: '复制链接成功',
type: 'success',
});
});
},
}
});

3
src/components/article/detail3/web.module.less Normal file
View File

@ -0,0 +1,3 @@
.container {
width: 950px;
}

78
src/components/article/detail3/web.tsx Normal file
View File

@ -0,0 +1,78 @@
import { generateNewId } from 'oak-domain/lib/utils/uuid';
import { useState, useRef, useEffect } from 'react';
import { Alert, Card, Button, Row, Col, Space, Affix, Input, Form, Modal } from 'antd';
const { confirm } = Modal;
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor } from "@wangeditor/editor-for-react";
import { IEditorConfig } from "@wangeditor/editor";
import OakGallery from '../../extraFile/gallery';
import { EntityDict } from '../../../general-app-domain';
import { WebComponentProps } from 'oak-frontend-base';
import Style from './web.module.less';
export default function Render(
props: WebComponentProps<
EntityDict,
'article',
false,
{
oakId: string;
content: string;
name: string;
},
{
gotoArticleEdit: (articleId:string) => void;
onRemoveArticle: (id:string) => void;
copy: (id:string) => void;
}
>
) {
const { methods: method, data } = props;
const { content, name, oakId } = props.data;
const {
t,
onRemoveArticle,
gotoArticleEdit,
copy,
} = method;
const editorConfig: Partial<IEditorConfig> = {
readOnly: true,
autoFocus: true,
scroll: false,
};
const [value, setValue] = useState('');
useEffect(() => {
if(content) {
setValue(content);
}
},[content])
return (
<div className={Style.rightContainer}>
<Row>
<Col xs={24} sm={16}>
<Form
colon
labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }}
>
<>
<Form.Item>
<>
<Editor
defaultConfig={editorConfig}
value={value}
mode="default"
style={{
width: 750
}}
/>
</>
</Form.Item>
</>
</Form>
</Col>
</Row>
</div>
);
}

58
src/pages/article/detail/index.ts Normal file
View File

@ -0,0 +1,58 @@
export default OakComponent({
isList: false,
entity: 'article',
projection: {
id: 1,
name: 1,
content: 1,
articleMenu: {
id: 1,
}
},
formData: function ({ data: article, features }) {
return {
id: article?.id,
content: article?.content,
name: article?.name,
// entity: article?.entity,
// entityId: article?.entityId,
};
},
// listeners: {
// content(prev, next) {
// if(this.props.oakId) {
// } else {
// if (prev.content !== next.content) {
// const ac = window.document.getElementById('article-content');
// if (ac) {
// ac.innerHTML = next.content;
// }
// }
// }
// },
// },
data: {
content: '',
title: '',
author: '',
},
lifetimes: {
// attached() {
// const data = this.load('article_html') || '{}';
// const data2 = typeof data === 'string' ? JSON.parse(data) : data;
// this.setState({
// content: data2?.content,
// title: data2?.title,
// author: data2?.author,
// });
// },
// detached() {
// this.save('article_html', '{}');
// },
},
methods: {},
});

49
src/pages/article/detail/web.module.less Normal file
View File

@ -0,0 +1,49 @@
.container {
background-color: #f3f5f7;
padding: 30px 300px;
min-height: 100vh;
}
.content {
display: flex;
background-color: #f3f5f7;
width: 100%;
justify-content: center;
}
.editorContainer {
// width: 100%;
// margin: 30px auto 50px auto;
width: 100%;
display: flex;
flex-direction: column;
background: var(--oak-bg-color-container);
padding: 20px 50px 50px 50px;
box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}
.titleContainer {
display: flex;
justify-content: center;
padding: 5px 0 10px 0;
}
.authorContainer {
padding: 5px 0 10px 0;
}
.title {
font-size: 32px !important;
font-weight: bold !important;
}
.author {
color: var(--oak-text-color-brand);
font-size: 14px;
}
.abstract {
width: 100%;
border-top: 1px solid #e8e8e8;
}

66
src/pages/article/detail/web.tsx Normal file
View File

@ -0,0 +1,66 @@
import React from 'react';
import Style from './web.module.less';
import { WebComponentProps } from 'oak-frontend-base';
import { EntityDict } from '../../../general-app-domain';
import { Editor } from "@wangeditor/editor-for-react";
import { IEditorConfig } from "@wangeditor/editor";
import { useState, useEffect } from 'react';
export default function Render(
props: WebComponentProps<
EntityDict,
'article',
false,
{
id: string;
name: string;
editor: any;
title?: string;
// author?: string;
// abstract?: string;
content?: string;
html?: string;
origin?: string;
},
{}
>
) {
const { id, name, editor, title, content } = props.data;
console.log(title, content)
const editorConfig: Partial<IEditorConfig> = {
readOnly: true,
autoFocus: true,
scroll: false,
};
const [value, setValue] = useState('');
useEffect(() => {
if(content) {
setValue(content)
}
},[content]);
return (
<div className={Style.container}>
<div className={Style.content}>
<div className={Style.editorContainer}>
<div className={Style.titleContainer}>
<span className={Style.title}>{name}</span>
</div>
{/* <div className={Style.authorContainer}>
<span className={Style.author}>{author}</span>
</div> */}
<div id="article-content" style={{width:"100%"}}>
<Editor
defaultConfig={editorConfig}
value={value}
mode="default"
style={{
width: '100%'
}}
/>
</div>
</div>
</div>
</div>
);
}

439
src/pages/article/doc/index.ts Normal file
View File

@ -0,0 +1,439 @@
import { EntityDict } from '../../../general-app-domain';
interface DataNode {
label: string;
title: string;
key: string;
isArticle?: boolean;
isLeaf?: boolean;
logo?: string;
children?: DataNode[];
}
export default OakComponent({
entity: 'articleMenu',
projection: {
id: 1,
name: 1,
isArticle: 1,
isLeaf: 1,
parent: {
id: 1,
name: 1,
isArticle: 1,
isLeaf: 1,
},
extraFile$entity: {
$entity: 'extraFile',
data: {
id: 1,
tag1: 1,
origin: 1,
bucket: 1,
objectId: 1,
filename: 1,
extra1: 1,
extension: 1,
type: 1,
entity: 1,
entityId: 1,
},
filter: {
tag1: {
$in: ['logo', 'introduce'],
},
},
},
},
isList: true,
formData({ data: articleMenu }) {
return {
articleMenu,
};
},
filters: [],
lifetimes: {
async ready() {
const { data: articles } = await this.features.cache.refresh(
'article',
{
data: {
id: 1,
name: 1,
content: 1,
articleMenuId: 1,
},
}
);
const { data: articleMenus } = await this.features.cache.refresh(
'articleMenu',
{
data: {
id: 1,
name: 1,
isArticle: 1,
isLeaf: 1,
parent: {
id: 1,
name: 1,
isArticle: 1,
isLeaf: 1,
},
extraFile$entity: {
$entity: 'extraFile',
data: {
id: 1,
tag1: 1,
origin: 1,
bucket: 1,
objectId: 1,
filename: 1,
extra1: 1,
extension: 1,
type: 1,
entity: 1,
entityId: 1,
},
filter: {
tag1: {
$in: ['logo'],
},
},
},
},
sorter: [
{
$attr: {
$$createAt$$: 1,
},
$direction: 'asc',
},
],
}
);
const newArticleMenus = articleMenus?.map((ele) => {
return {
...ele,
logo: this.features.extraFile.getUrl(
ele?.extraFile$entity?.find(
(ele) => ele.tag1 === 'logo'
)
),
};
});
const newArticles = articles?.map((ele) => ({
id: ele?.id,
name: ele?.name,
parent: ele?.articleMenuId,
parentId: ele?.articleMenuId,
isArticle: true,
content: ele?.content,
logo: null,
}));
const arr: any[] = [...newArticleMenus, ...newArticles];
const rootNodes = arr?.filter((node) => !node.parent);
const treeData = rootNodes?.map((rootNode) => {
return {
label: rootNode.name,
title: rootNode.name,
key: rootNode.id?.toString(),
isArticle: rootNode.isArticle,
logo: rootNode?.logo,
children: this.buildTreeData(arr, rootNode.id),
};
});
this.setState({
treeData,
});
},
},
data: {
selectedArticleId: '',
openKeys: [] as string[],
selectedKeys: [] as string[],
treeData: [] as DataNode[],
parentId: '',
articleMenuId: '',
id: '',
name: '',
isArticle: false,
isChildren: false,
logo: '',
},
methods: {
getOpenKeys(
targetKey: string,
treeData: DataNode[],
openKeys: string[] = []
): string[] {
const selectedKeys: string[] = [];
const toggleOpenKeys = (nodes: DataNode[], parentOpen: boolean) => {
for (const node of nodes) {
if (node.key === targetKey) {
const isOpen = openKeys.includes(node.key);
if (isOpen) {
// 当前子菜单已展开，收起当前子菜单及其所有子菜单
openKeys = openKeys.filter(
(key) =>
key !== node.key &&
!key.startsWith(`${node.key}-`)
);
} else {
// 当前子菜单已收起，展开当前子菜单及其所有子菜单
openKeys.push(node.key);
openKeys.push(...getAllChildKeys(node));
const leafNode = findLeafNode(node);
if (leafNode) {
const parentKeys = getParentKeys(leafNode);
selectedKeys.push(...parentKeys);
this.gotoArticleUpsert(leafNode.key);
}
}
// 存储第一个没有子节点的节点及其全部父节点到 selectedKeys
} else if (node.children) {
toggleOpenKeys(
node.children,
openKeys.includes(node.key) || parentOpen
); // 递归处理子菜单的展开和收起
}
}
};
const getAllChildKeys = (node: DataNode): string[] => {
const childKeys: string[] = [];
if (node.children) {
for (const child of node.children) {
childKeys.push(child.key);
childKeys.push(...getAllChildKeys(child));
}
}
return childKeys;
};
const findLeafNode = (node: DataNode): DataNode | undefined => {
if (!node.children || node.children.length === 0) {
return node;
}
for (const child of node.children) {
const leafNode = findLeafNode(child);
if (leafNode) {
return leafNode;
}
}
return undefined;
};
const getParentKeys = (node: DataNode): string[] => {
const parentKeys: string[] = [];
let currentNode: DataNode | undefined = node;
while (currentNode) {
parentKeys.unshift(currentNode.key);
currentNode = findParentNode(currentNode);
}
return parentKeys;
};
const findParentNode = (
node: DataNode | any
): DataNode | undefined => {
if (!node.parentKey) {
return undefined;
}
const parentNode = treeData.find(
(ele) => ele.key === node.parentKey
);
return parentNode;
};
toggleOpenKeys(treeData, false);
this.setState({
openKeys: [...new Set(openKeys)], // 去重并更新 openKeys
selectedKeys: [...new Set(selectedKeys)], // 去重并更新 selectedKeys
});
return openKeys;
},
buildTreeData(
nodes: EntityDict['articleMenu']['Schema'][] | any[],
parentId: string | null
): DataNode[] {
const children: DataNode[] = [];
for (const node of nodes) {
if (node.parentId === parentId) {
const treeNode: DataNode = {
label: node.name,
title: node.name,
key: node.id.toString(),
isArticle: node.isArticle,
isLeaf: node.isLeaf,
logo: node.logo,
};
const nestedChildren = this.buildTreeData(nodes, node.id);
if (nestedChildren.length > 0) {
treeNode.children = nestedChildren;
}
children.push(treeNode);
}
}
return children;
},
gotoUpsert(parentId?: string) {
this.setState({
parentId,
id: '',
articleMenuId: '',
});
},
async gotoUpsertById(id: string) {
if (id) {
const { data: articleMenu } = await this.features.cache.refresh(
'articleMenu',
{
data: {
id: 1,
name: 1,
isArticle: 1,
parentId: 1,
extraFile$entity: {
$entity: 'extraFile',
data: {
id: 1,
tag1: 1,
origin: 1,
bucket: 1,
objectId: 1,
filename: 1,
extra1: 1,
extension: 1,
type: 1,
entity: 1,
entityId: 1,
},
filter: {
tag1: {
$in: ['logo'],
},
},
},
},
filter: {
$or: [
{
id,
},
{
parentId: id,
},
],
},
}
);
if (articleMenu && articleMenu?.length > 1) {
this.setState({
id: articleMenu[0].id,
name: articleMenu[0].name,
parentId: '',
articleMenuId: '',
isArticle: articleMenu[0].isArticle,
isChildren: true,
logo: this.features.extraFile.getUrl(
articleMenu[0]?.extraFile$entity?.find(
(ele) => ele.tag1 === 'logo'
)
),
});
}
if (articleMenu && articleMenu?.length === 1) {
this.setState({
id: articleMenu[0].id,
name: articleMenu[0].name,
parentId: '',
articleMenuId: '',
isArticle: articleMenu[0].isArticle,
isChildren: false,
logo: this.features.extraFile.getUrl(
articleMenu[0]?.extraFile$entity?.find(
(ele) => ele.tag1 === 'logo'
)
),
});
}
}
},
async gotoArticleUpsert(
articleId: string,
selectedKeys: string[] = []
) {
if (selectedKeys.includes(articleId)) {
} else {
this.setState({
selectedKeys: [articleId],
selectedArticleId: articleId,
id: '',
parentId: '',
});
}
},
gotoEdit(id?: string) {
if (id) {
this.navigateTo({
url: '/articleMenu/upsert',
oakId: id,
});
} else {
this.navigateTo({
url: '/articleMenu/upsert',
});
}
},
gotoEditByParentId(parentId?: string) {
this.navigateTo({
url: '/articleMenu/upsert',
parentId,
});
},
gotoArticleEdit(articleId: string) {
this.navigateTo({
url: '/article/upsert',
oakId: articleId,
});
},
gotoArticleEditByArticleMenuId(articleMenuId: string) {
this.navigateTo({
url: '/article/upsert',
articleMenuId,
});
},
async onRemoveArticleMenu(id: string) {
this.removeItem(id);
await this.execute();
},
async onRemoveArticle(id: string) {
this.removeItem(id);
await this.execute();
},
async check() {
if (!this.state.name) {
this.setMessage({
type: 'error',
content: '请输入文章分类名称',
});
return;
}
await this.execute();
},
},
});

63
src/pages/article/doc/web.module.less Normal file
View File

@ -0,0 +1,63 @@
.container {
background: var(--oak-bg-color-container);
// box-shadow: 0 2px 3px #0000001a;
// border-radius: 3px;
// padding: 30px 32px;
// min-height: 450px;
.article {
display: flex;
flex-direction: row;
.menu {
display: flex;
}
.editor {
display: flex;
margin-left: 20px;
.rightContainer {
width: 950px;
}
}
}
}
.space {
margin-bottom: 15px;
}
.tree {
:global {
.ant-tree-title {
display: flex;
flex: 1;
}
}
}
.siderPanel {
flex-shrink: 0;
height: 100%;
// border-right: 1px solid var(--oak-border-color);
overflow-y: hidden;
overflow-x: hidden;
position: fixed;
.icon {
font-size: 20px;
}
:global {
.ant-layout-sider-children {
height: calc(100% - 48px);
overflow-y: auto;
}
.ant-layout-sider-trigger {
// text-align: left;
// padding-left: 16px;
// border-right: 1px solid var(--oak-border-color);
}
}
}

190
src/pages/article/doc/web.tsx Normal file
View File

@ -0,0 +1,190 @@
import {
Form,
Tree,
Row,
Col,
Space,
Button,
Menu,
Modal,
Image,
Empty,
Layout,
} from "antd";
const { confirm } = Modal;
import type { MenuProps } from "antd";
import React, { useState, useEffect, useCallback } from "react";
import classNames from "classnames";
import Style from "./web.module.less";
import { WebComponentProps } from "oak-frontend-base";
import { EntityDict } from "../../../general-app-domain";
import useFeatures from "../../../hooks/useFeatures";
import PageHeader from "../../../components/common/pageHeader";
import { Editor } from "@wangeditor/editor-for-react";
import { IEditorConfig } from "@wangeditor/editor";
import ArticleUpsert from "../../../components/article/detail3";
const { SubMenu } = Menu;
const { Sider, Content } = Layout;
interface DataNode {
label: string;
title: string;
key: string;
isArticle?: boolean;
children?: DataNode[];
}
export default function render(
props: WebComponentProps<
EntityDict,
"articleMenu",
true,
{
articleMenu: EntityDict["articleMenu"]["Schema"][];
articles: EntityDict["article"]["Schema"][];
treeData: DataNode[];
content: string;
arr: {
id: string | undefined;
name: string | undefined;
parent: string | undefined;
parentId: string | undefined;
isArticle: boolean;
isLeaf: boolean;
}[];
id: string;
parentId: string;
articleId: string;
name: string;
isArticle: boolean;
isChildren: boolean;
logo: string;
openKeys: string[];
selectedKeys: string[];
selectedArticleId: string;
},
{
gotoUpsert: (id?: string) => void;
gotoUpsertById: (id: string) => void;
gotoArticleUpsert: (articleId: string, selectedKeys?: string[]) => void;
check: () => void;
onRemoveArticleMenu: (id: string) => void;
gotoEdit: (id?: string) => void;
gotoEditByParentId: (parentId: string) => void;
gotoArticleEdit: (articleId: string) => void;
onRemoveArticle: (id: string) => void;
gotoArticleEditByArticleMenuId: (articleMenuId: string) => void;
getOpenKeys: (
targetKey: string,
treeData: DataNode[],
openKeys: string[]
) => void;
}
>
) {
const {
arr,
treeData,
id,
parentId,
articleId,
name,
content,
oakFullpath,
isArticle,
isChildren,
logo,
openKeys,
selectedKeys,
selectedArticleId,
} = props.data;
const {
t,
gotoUpsert,
gotoUpsertById,
gotoArticleUpsert,
onRemoveArticleMenu,
gotoEdit,
gotoEditByParentId,
gotoArticleEdit,
onRemoveArticle,
gotoArticleEditByArticleMenuId,
getOpenKeys,
} = props.methods;
const features = useFeatures();
const renderMenuItems = (data: any) => {
return data?.map((menuItem: any) => {
if (menuItem.children || menuItem.isLeaf) {
return (
<Menu.SubMenu
icon={
menuItem.logo ? (
<Image
height={26}
width={26}
src={menuItem.logo}
preview={false}
/>
) : null
}
key={menuItem.key}
title={<div style={{ marginLeft: 8 }}>{menuItem.title}</div>}
onTitleClick={(e) => {
getOpenKeys(e.key, treeData, openKeys);
}}
>
{renderMenuItems(menuItem.children)}
</Menu.SubMenu>
);
}
return (
<Menu.Item
key={menuItem.key}
onClick={(e) => {
gotoArticleUpsert(e.key, selectedKeys);
}}
>
{menuItem.label}
</Menu.Item>
);
});
};
return (
<div className={Style.container}>
{treeData?.length === 0 ? (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
) : (
<div className={Style.article}>
<div className={Style.menu}>
<Sider
theme="light"
width={256}
className={Style.siderPanel}
>
<Menu
openKeys={openKeys}
selectedKeys={selectedKeys}
style={{ width: 256 }}
mode="inline"
>
{renderMenuItems(treeData)}
</Menu>
</Sider>
</div>
<div className={Style.editor} style={{
marginLeft: 300
}}>
{selectedArticleId?.length > 0 ? (
<ArticleUpsert
oakAutoUnmount={true}
oakId={selectedArticleId}
oakPath={`$article-detail2-${selectedArticleId}`}
/>
) : null}
</div>
</div>
)}
</div>
);
}

43
src/pages/article/list/web.tsx
View File

@ -9,19 +9,19 @@ import {
Modal,
Image,
Empty,
} from 'antd';
} from "antd";
const { confirm } = Modal;
import type { MenuProps } from 'antd';
import React, { useState, useEffect, useCallback } from 'react';
import classNames from 'classnames';
import Style from './web.module.less';
import { WebComponentProps } from 'oak-frontend-base';
import { EntityDict } from '../../../general-app-domain';
import useFeatures from '../../../hooks/useFeatures';
import PageHeader from '../../../components/common/pageHeader';
import { Editor } from '@wangeditor/editor-for-react';
import { IEditorConfig } from '@wangeditor/editor';
import ArticleUpsert from '../../../components/article/detail2';
import type { MenuProps } from "antd";
import React, { useState, useEffect, useCallback } from "react";
import classNames from "classnames";
import Style from "./web.module.less";
import { WebComponentProps } from "oak-frontend-base";
import { EntityDict } from "../../../general-app-domain";
import useFeatures from "../../../hooks/useFeatures";
import PageHeader from "../../../components/common/pageHeader";
import { Editor } from "@wangeditor/editor-for-react";
import { IEditorConfig } from "@wangeditor/editor";
import ArticleUpsert from "../../../components/article/detail2";
const { SubMenu } = Menu;
interface DataNode {
label: string;
@ -33,11 +33,11 @@ interface DataNode {
export default function render(
props: WebComponentProps<
EntityDict,
'articleMenu',
"articleMenu",
true,
{
articleMenu: EntityDict['articleMenu']['Schema'][];
articles: EntityDict['article']['Schema'][];
articleMenu: EntityDict["articleMenu"]["Schema"][];
articles: EntityDict["article"]["Schema"][];
treeData: DataNode[];
content: string;
arr: {
@ -62,10 +62,7 @@ export default function render(
{
gotoUpsert: (id?: string) => void;
gotoUpsertById: (id: string) => void;
gotoArticleUpsert: (
articleId: string,
selectedKeys?: string[]
) => void;
gotoArticleUpsert: (articleId: string, selectedKeys?: string[]) => void;
check: () => void;
onRemoveArticleMenu: (id: string) => void;
gotoEdit: (id?: string) => void;
@ -95,7 +92,7 @@ export default function render(
logo,
openKeys,
selectedKeys,
selectedArticleId
selectedArticleId,
} = props.data;
const {
t,
@ -128,11 +125,7 @@ export default function render(
) : null
}
key={menuItem.key}
title={
<div style={{ marginLeft: 8 }}>
{menuItem.title}
</div>
}
title={<div style={{ marginLeft: 8 }}>{menuItem.title}</div>}
onTitleClick={(e) => {
getOpenKeys(e.key, treeData, openKeys);
}}

1
src/pages/article/preview/web.tsx
View File

@ -27,6 +27,7 @@ export default function Render(
>
) {
const { id, name, editor, title, content } = props.data;
console.log(title, content)
const editorConfig: Partial<IEditorConfig> = {
readOnly: true,
autoFocus: true,