From 8f6127002859b088679372111749729f68feac54 Mon Sep 17 00:00:00 2001 From: qsc <3153284618@qq.com> Date: Mon, 3 Jul 2023 20:45:51 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B8=AE=E5=8A=A9=E6=96=87=E6=A1=A3=E6=89=8B?= =?UTF-8?q?=E6=9C=BA=E7=AB=AF=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../article/detail2/web.module.less | 4 +- lib/components/article/detail3/web.d.ts | 1 + lib/components/article/detail3/web.js | 8 ++-- .../article/detail3/web.module.less | 5 ++- lib/pages/article/doc/web.d.ts | 2 +- lib/pages/article/doc/web.js | 31 ++++++++++++---- lib/pages/article/doc/web.module.less | 37 ++++++++++++------- src/pages/article/doc/web.tsx | 2 +- 8 files changed, 61 insertions(+), 29 deletions(-) diff --git a/lib/components/article/detail2/web.module.less b/lib/components/article/detail2/web.module.less index a55d2523a..e32677a16 100644 --- a/lib/components/article/detail2/web.module.less +++ b/lib/components/article/detail2/web.module.less @@ -1,3 +1,5 @@ .container { - width: 950px; + display: flex; + flex-direction: column; + flex: 1; } \ No newline at end of file diff --git a/lib/components/article/detail3/web.d.ts b/lib/components/article/detail3/web.d.ts index 01c0f31f2..f5b2aa2d9 100644 --- a/lib/components/article/detail3/web.d.ts +++ b/lib/components/article/detail3/web.d.ts @@ -5,6 +5,7 @@ export default function Render(props: WebComponentProps void; onRemoveArticle: (id: string) => void; diff --git a/lib/components/article/detail3/web.js b/lib/components/article/detail3/web.js index 01e39647a..7207f4101 100644 --- a/lib/components/article/detail3/web.js +++ b/lib/components/article/detail3/web.js @@ -10,7 +10,7 @@ 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 _a = props.data, content = _a.content, name = _a.name, oakId = _a.oakId, width = _a.width; var t = method.t, onRemoveArticle = method.onRemoveArticle, gotoArticleEdit = method.gotoArticleEdit, copy = method.copy; var editorConfig = { readOnly: true, @@ -23,8 +23,8 @@ function Render(props) { 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 - } }) }) }) }) })) })) }) }))); + return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { 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)(editor_for_react_1.Editor, { defaultConfig: editorConfig, value: value, mode: "default", style: { + width: width === 'xs' ? '100vw' : 750, + } }) })) }) }))); } exports.default = Render; diff --git a/lib/components/article/detail3/web.module.less b/lib/components/article/detail3/web.module.less index a55d2523a..756b05c6b 100644 --- a/lib/components/article/detail3/web.module.less +++ b/lib/components/article/detail3/web.module.less @@ -1,3 +1,6 @@ .container { - width: 950px; + // display: flex; + // flex-direction: column; + // flex: 1; + width: 100%; } \ No newline at end of file diff --git a/lib/pages/article/doc/web.d.ts b/lib/pages/article/doc/web.d.ts index 4599d3d49..0dc38fd31 100644 --- a/lib/pages/article/doc/web.d.ts +++ b/lib/pages/article/doc/web.d.ts @@ -25,11 +25,11 @@ export default function render(props: WebComponentProps void; gotoUpsertById: (id: string) => void; diff --git a/lib/pages/article/doc/web.js b/lib/pages/article/doc/web.js index 5d985adf5..e3a3b3b5e 100644 --- a/lib/pages/article/doc/web.js +++ b/lib/pages/article/doc/web.js @@ -4,29 +4,46 @@ 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 react_1 = require("react"); 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, Content = antd_1.Layout.Content; 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 _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, logo = _a.logo, openKeys = _a.openKeys, selectedKeys = _a.selectedKeys, selectedArticleId = _a.selectedArticleId, width = _a.width; + var _b = props.methods, t = _b.t, gotoArticleUpsert = _b.gotoArticleUpsert, getOpenKeys = _b.getOpenKeys; var features = (0, useFeatures_1.default)(); - var renderMenuItems = function (data) { + var _c = tslib_1.__read((0, react_1.useState)(false), 2), open = _c[0], setOpen = _c[1]; + var renderMenuItems = function (data, callback) { 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)); + } }, { children: renderMenuItems(menuItem.children, callback) }), menuItem.key)); } return ((0, jsx_runtime_1.jsx)(antd_1.Menu.Item, tslib_1.__assign({ onClick: function (e) { gotoArticleUpsert(e.key, selectedKeys); + if (typeof callback === 'function') { + callback(); + } } }, { 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: 275, 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, style: { - marginLeft: 300 - } }, { 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 }))] }))) }))); + if ((treeData === null || treeData === void 0 ? void 0 : treeData.length) === 0) { + return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: (0, jsx_runtime_1.jsx)(antd_1.Empty, { image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE }) }))); + } + if (width === 'xs') { + return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: web_module_less_1.default.article_v }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.menu, onClick: function () { + setOpen(true); + } }, { children: "\u5E2E\u52A9\u6587\u6863" })), (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 }))] })), (0, jsx_runtime_1.jsx)(antd_1.Drawer, tslib_1.__assign({ className: web_module_less_1.default.drawerPanel, open: open, onClose: function () { + setOpen(false); + }, width: 256 }, { 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, function () { + setOpen(false); + }) })) })) }))] }))); + } + return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: web_module_less_1.default.container }, { children: (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: 275, 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, style: { + marginLeft: 300, + } }, { 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; diff --git a/lib/pages/article/doc/web.module.less b/lib/pages/article/doc/web.module.less index fb37a4a51..8c12929d6 100644 --- a/lib/pages/article/doc/web.module.less +++ b/lib/pages/article/doc/web.module.less @@ -1,9 +1,6 @@ .container { background: var(--oak-bg-color-container); -// box-shadow: 0 2px 3px #0000001a; -// border-radius: 3px; -// padding: 30px 32px; -// min-height: 450px; + min-height: 100vh; .article { display: flex; @@ -15,13 +12,21 @@ .editor { display: flex; - margin-left: 20px; - - .rightContainer { - width: 950px; - } } } + + .article_v { + display: flex; + flex-direction: column; + + .menu { + display: flex; + } + + .editor { + display: flex; + } + } } @@ -37,6 +42,7 @@ } } } + .siderPanel { flex-shrink: 0; height: 100%; @@ -55,10 +61,13 @@ height: 100%; overflow-y: auto; } - .ant-layout-sider-trigger { - // text-align: left; - // padding-left: 16px; - // border-right: 1px solid var(--oak-border-color); - } } +} + +.drawerPanel { + :global { + .ant-drawer-body { + padding: 0 !important; + } + } } \ No newline at end of file diff --git a/src/pages/article/doc/web.tsx b/src/pages/article/doc/web.tsx index b63395c55..3eb4aa268 100644 --- a/src/pages/article/doc/web.tsx +++ b/src/pages/article/doc/web.tsx @@ -13,7 +13,7 @@ import { Drawer, } from 'antd'; const { confirm } = Modal; -import type { MenuProps } from "antd"; +import type { MenuProps } from "antd"; import React, { useState, useEffect, useCallback } from "react"; import classNames from "classnames"; import Style from "./web.module.less";