aldehyde 0.2.409 → 0.2.412

package/src/aldehyde/controls/html-editor/draft.tsx

@@ -1,29 +1,30 @@
 
-import * as React from 'react'
-import {Card} from "antd";
-import {VEControlProps} from "../../tmpl/interface";
+import * as React from 'react';
+import { Card } from "antd";
+import { VEControlProps } from "../../tmpl/interface";
 // 核心
-import { EditorState, ContentState } from 'draft-js'
-import { Editor } from 'react-draft-wysiwyg'
-import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+import { EditorState, ContentState } from 'draft-js';
+import { Editor } from 'react-draft-wysiwyg';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 // draft 转换为 html
-import draftToHtml from 'draftjs-to-html'
+import draftToHtml from 'draftjs-to-html';
 // html 转换为 draft
-import htmlToDraft from 'html-to-draftjs'
+import htmlToDraft from 'html-to-draftjs';
+import "./index.less";
 
 interface DraftProps extends VEControlProps {
-    getHtml?:any;
+    getHtml?: any;
 }
 
-interface DraftState  {
-    editorState?:boolean;
+interface DraftState {
+    editorState?: boolean;
 }
 
-export default class Draft extends React.PureComponent<DraftProps, DraftState>{
+export default class Draft extends React.PureComponent<DraftProps, DraftState> {
 
-   state={
-       editorState:EditorState.createEmpty(),
-   }
+    state = {
+        editorState: EditorState.createEmpty(),
+    }
 
     componentDidMount() {
         // 如果从后台读取接口存储的有值，读取过来转换为富文本格式默认显示
@@ -70,19 +71,17 @@ export default class Draft extends React.PureComponent<DraftProps, DraftState>{
         })
     }
 
-     changeValue = (value) => {
+    changeValue = (value) => {
 
     }
 
 
-    render(){
-        const {viewOrEdit,disabled} = this.props;
-
-        const {editorState}=this.state;
-        let entryControl = undefined;
+    render() {
+        const { viewOrEdit, disabled } = this.props;
+        const { editorState } = this.state;
 
         const toolbar = {
-            options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker','link', 'embedded', 'emoji', 'image', 'remove', 'history'],
+            options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove', 'history'],
             colorPicker: {
                 // 图标可以自定义，如果使用默认就注释掉
                 // icon: 'https://-------',
@@ -105,10 +104,10 @@ export default class Draft extends React.PureComponent<DraftProps, DraftState>{
                 urlEnabled: true,
                 uploadEnabled: true,
                 alignmentEnabled: true,
-                uploadCallback: ()=>{ console.log("123")
+                uploadCallback: () => {
                     return new Promise(
                         (resolve, reject) => {
-                            resolve({data:{link:'https://img0.baidu.com/it/u=3584251488,339638482&fm=253&fmt=auto&app=138&f=JPEG?w=722&h=500'}});
+                            resolve({ data: { link: 'https://img0.baidu.com/it/u=3584251488,339638482&fm=253&fmt=auto&app=138&f=JPEG?w=722&h=500' } });
                         });
                 },
                 previewImage: false,
@@ -119,12 +118,12 @@ export default class Draft extends React.PureComponent<DraftProps, DraftState>{
                     width: 'auto',
                 },
             }
-        }
+        };
 
-        entryControl= <Card style={{width:'100%'}} styles={{body:{padding:'2px',minHeight:'280px'}}}  size={'small'}>
+        return <Card className='html-card' style={{ width: '100%' }} styles={{ body: { padding: '2px', minHeight: '280px' } }} size={'small'}>
             <Editor
                 readOnly={disabled}
-                toolbarHidden={viewOrEdit=='view'? true: false}
+                toolbarHidden={viewOrEdit === 'view' ? true : false}
                 editorState={editorState}
                 wrapperClassName="contract-template-add-wrapper"
                 editorClassName="contract-template-editor"
@@ -132,9 +131,6 @@ export default class Draft extends React.PureComponent<DraftProps, DraftState>{
                 onChange={this.editorChange}
                 toolbar={toolbar}
             />
-        </Card>
-
-        return entryControl;
-
+        </Card>;
     }
 }

package/src/aldehyde/controls/html-editor/index.less

@@ -0,0 +1,68 @@
+.html-card {
+    border-color: var(--ant-color-border) !important;
+
+    .rdw-dropdown-optionwrapper {
+        background: var(--ant-color-bg-container) !important;
+        color: var(--ant-color-text) !important;
+        border: none;
+    }
+
+    .rdw-dropdownoption-active,
+    .rdw-dropdownoption-highlighted {
+        background: transparent !important;
+        color: var(--ant-color-primary) !important;
+    }
+
+    .rdw-dropdown-optionwrapper {
+        box-shadow: none !important;
+    }
+
+    .rdw-editor-toolbar {
+        background: transparent !important;
+        border-color: var(--ant-color-border) !important;
+    }
+
+    .rdw-option-wrapper,
+    .rdw-dropdown-wrapper {
+        background: var(--ant-button-default-bg) !important;
+        border-color: var(--ant-color-border) !important;
+        color: var(--ant-color-text) !important;
+    }
+
+    .rdw-option-wrapper:hover,
+    .rdw-dropdown-wrapper:hover {
+        box-shadow: 1px 1px 0px var(--ant-color-primary);
+    }
+
+    .rdw-option-active {
+        box-shadow: none !important;
+        background: var(--ant-color-primary) !important;
+    }
+
+    .rdw-colorpicker-modal,
+    .rdw-link-modal,
+    .rdw-embedded-modal,
+    .rdw-emoji-modal,
+    .rdw-image-modal {
+        background: var(--ant-color-bg-container) !important;
+        border-color: var(--ant-color-border) !important;
+        box-shadow: none !important;
+
+        input,
+        button {
+            background: var(--ant-color-bg-container) !important;
+            border-color: var(--ant-color-border) !important;
+        }
+
+        .rdw-embedded-modal-header-option {
+            width: 100%;
+            align-items: start;
+        }
+
+        .rdw-image-modal-header-label {
+            border-left: none;
+            border-right: none;
+            border-top: none;
+        }
+    }
+}

package/src/aldehyde/detail/edit/popover-edit-card.tsx

@@ -48,7 +48,7 @@ export default class PopoverEditCard extends React.PureComponent<
   static contextType = LocaleContext;
   context: React.ContextType<typeof LocaleContext>;
 
-  async componentDidMount() {}
+  async componentDidMount() { }
 
   async componentDidUpdate() {
     //this.reset();
@@ -135,9 +135,9 @@ export default class PopoverEditCard extends React.PureComponent<
 
     return (
       <Card
-        style={{ width: fieldGroupConfig&& fieldGroupConfig.addOrEditType=="doubleCol"?1000:600 }}
+        style={{ width: fieldGroupConfig && fieldGroupConfig.addOrEditType == "doubleCol" ? 1000 : 600 }}
         title={this.getTitle()}
-        styles={{body:{ overflow: "auto" }}}
+        styles={{ body: { overflow: "auto", maxHeight: "80vh" } }}
         extra={
           <>
             <Space size={[8, 0]}>

package/src/aldehyde/detail/edit/popover-editor.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import {Button, FormInstance, Popover, Tooltip} from 'antd'
-import {DtmplData, FieldGroupConfig} from "../../tmpl/interface";
+import { Button, FormInstance, Popover, Tooltip } from 'antd'
+import { DtmplData, FieldGroupConfig } from "../../tmpl/interface";
 import PopoverEditCard from './popover-edit-card'
 interface RowEditorProps {
-    serverKey?:string,
+    serverKey?: string,
     buttonTitle?: string,
     buttonIcon: React.ReactNode,
-    tooltipTitle?: React.ReactNode ;
+    tooltipTitle?: React.ReactNode;
     fieldGroupConfig: FieldGroupConfig;
     dtmplData?: DtmplData;
-    onOk:(value: DtmplData) => void,
-    buttonStyle?:object,
-    disabled?:boolean
+    onOk: (value: DtmplData) => void,
+    buttonStyle?: object,
+    disabled?: boolean
 }
 
 interface RowEditorState {
@@ -21,8 +21,8 @@ interface RowEditorState {
 export default class PopoverEditor extends React.PureComponent<RowEditorProps, RowEditorState> {
     formRef = React.createRef<FormInstance>();
     static defaultProps = {
-        buttonIcon:undefined,
-        disabled:false,
+        buttonIcon: undefined,
+        disabled: false,
     }
     state = {
         popoverOpen: false,
@@ -41,23 +41,21 @@ export default class PopoverEditor extends React.PureComponent<RowEditorProps, R
     //     }
     // }
 
-    onOk = (value,hidden:boolean=true) => {
-        if(hidden){
-            this.setState({popoverOpen:false});
+    onOk = (value, hidden: boolean = true) => {
+        if (hidden) {
+            this.setState({ popoverOpen: false });
         }
 
-       this.props.onOk(value);
+        this.props.onOk(value);
     }
 
 
     render() {
-        const {popoverOpen}=this.state;
-        const { disabled, buttonIcon, buttonTitle, tooltipTitle, fieldGroupConfig, dtmplData,buttonStyle,serverKey} = this.props;
-        return <Popover destroyOnHidden={true} placement="leftBottom" open={popoverOpen}
-                        content={<PopoverEditCard serverKey={serverKey} fieldGroupConfig={fieldGroupConfig} dtmplData={dtmplData}
-                                                  onCancel={()=>{
-                                                  this.setState({popoverOpen:false});}
-                                              } onOk={this.onOk}></PopoverEditCard>} trigger="click">
+        const { popoverOpen } = this.state;
+        const { disabled, buttonIcon, buttonTitle, tooltipTitle, fieldGroupConfig, dtmplData, buttonStyle, serverKey } = this.props;
+        return <Popover destroyOnHidden={true} placement="left" open={popoverOpen}
+            content={<PopoverEditCard serverKey={serverKey} fieldGroupConfig={fieldGroupConfig} dtmplData={dtmplData}
+                onCancel={() => this.setState({ popoverOpen: false })} onOk={this.onOk} />} trigger="click">
             <Tooltip placement="left" title={tooltipTitle}>
                 <Button
                     disabled={disabled}
@@ -65,9 +63,9 @@ export default class PopoverEditor extends React.PureComponent<RowEditorProps, R
                     icon={buttonIcon}
                     size="small"
                     onClick={() => {
-                        this.setState({popoverOpen:!popoverOpen});
+                        this.setState({ popoverOpen: !popoverOpen });
                     }}
-                >{buttonTitle?buttonTitle:""}</Button></Tooltip></Popover>
+                >{buttonTitle ? buttonTitle : ""}</Button></Tooltip></Popover>
     }
 
 }

package/src/aldehyde/index.tsx

@@ -2,8 +2,8 @@
 // import ViewControl from "./controls/view-control";
 import ProgramConfig from "./units";
 import HydrocarbonService from "./tmpl/hcservice-v3";
-import QuickEntrance from "./welcome/quick-entrance";
-import Workbench from "./welcome/workbench";
+import QuickEntrance from "./welcome/components/quick-entrance";
+import Workbench from "./welcome/components/workbench";
 import PopoverEntitySelect from "./controls/entity-select/popover-entity-select";
 
 import TmplDataSource from "./tmpl/hc-data-source";
@@ -145,6 +145,8 @@ import DtmplViewDrawer from './module/dtmpl-view-drawer';
 
 import SplitViewLtmplRoute from "./routable/splitview-ltmpl-route";
 
+import SsoLogin from "./sso-Login";
+
 export {
   ActTable,
   SelectTable,
@@ -202,5 +204,6 @@ export {
   ContextPage5,
   DtmplViewModal,
   DtmplViewDrawer,
-  SplitViewLtmplRoute
+  SplitViewLtmplRoute,
+  SsoLogin
 };

package/src/aldehyde/layout/menu/l2menu-message-bar.tsx

@@ -7,6 +7,8 @@ import HcserviceV3 from "../../tmpl/hcservice-v3";
 import { NavLink } from "react-router-dom";
 import HCDataSource from "../../tmpl/hc-data-source";
 import Units from "../../units";
+import "./message-bar.less";
+
 interface L2MenuMessageBarProps {
   backgroudColor?: string;
   style?: CSSProperties;
@@ -126,7 +128,7 @@ class L2MenuMessageBar extends React.PureComponent<
             }
             className="head-example"
           >
-            <Badge count={messageBar.count} overflowCount={99} offset={[8, -2]}>
+            <Badge size="small" count={messageBar.count} overflowCount={99} offset={[6, -2]} className="ripple-dot">
               <Button
                 icon={<BellOutlined />}
                 shape="default"
@@ -154,6 +156,7 @@ class L2MenuMessageBar extends React.PureComponent<
               size="small"
               overflowCount={99}
               offset={[6, 0]}
+              className="ripple-dot"
             >
               <Button
                 icon={<BellOutlined />}

package/src/aldehyde/layout/menu/message-bar.less

@@ -0,0 +1,69 @@
+.ripple-dot .ant-badge-count {
+    overflow: revert;
+    box-shadow: none;
+
+    .ant-scroll-number-only {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+
+    .ant-scroll-number-only-unit {
+        display: block;
+        height: 100%;
+        line-height: 12px;
+    }
+}
+
+.ripple-dot .ant-badge-count::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: radial-gradient(circle,
+            var(--ant-color-error-hover) 0%,
+            var(--ant-color-error-hover) 30%,
+            transparent 70%);
+    transform: scale(1);
+    opacity: 1;
+    animation: ping 1s cubic-bezier(0.1, 0.8, 0.2, 1) infinite;
+    will-change: transform, opacity;
+    z-index: -1;
+}
+
+.ripple-dot .ant-badge-count::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: radial-gradient(circle,
+            var(--ant-color-error-hover) 0%,
+            transparent 50%);
+    transform: scale(1);
+    opacity: 0.8;
+    animation: ping 1s 0.5s cubic-bezier(0.1, 0.8, 0.2, 1) infinite;
+    will-change: transform, opacity;
+    z-index: -1;
+}
+
+@keyframes ping {
+    0% {
+        transform: scale(1);
+        opacity: 0.9;
+    }
+
+    70% {
+        opacity: 0.6;
+    }
+
+    100% {
+        transform: scale(2.4);
+        opacity: 0.2;
+    }
+}

package/src/aldehyde/layout2/components/theme-button.tsx

@@ -15,13 +15,18 @@ const ThemeButton = (props: ButtonProps) => {
     const [version, setVersion] = useState<string>();
     const [themes, setThemes] = useState<{ label: string, value: string }[]>([]);
     const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
-    const themeKeys = ProgramConfig.themes();
+
+    const getThemeConfig = async () => {
+        const themeConfig = await ProgramConfig.getThemeConfig();
+        const themeKeys = themeConfig?.styleTheme?.split(",") || ProgramConfig.themes();
+        const temThemes = defThemes.filter(item => themeKeys?.includes(item.value));
+        setThemes(temThemes.length ? temThemes : [{ label: "默认", value: "v2" }]);
+    }
 
     useEffect(() => {
+        getThemeConfig();
         const version = localStorage.getItem("version") || "v2";
         setVersion(version);
-        const temThemes = defThemes.filter(item => themeKeys?.includes(item.value));
-        setThemes(temThemes.length ? temThemes : [{ label: "默认", value: "v2" }]);
     }, []);
 
     const onClick: MenuProps["onClick"] = ({ key }) => {
@@ -43,7 +48,7 @@ const ThemeButton = (props: ButtonProps) => {
     })), [themes]);
 
     return (
-        themes.length > 1 ? <Dropdown overlayClassName="themeButton" menu={{ items, onClick }}>
+        themes.length > 1 ? <Dropdown overlayClassName="themeButton" menu={{ items, onClick, selectedKeys: [version] }}>
             <Button type="text" icon={<AliIcon type="icon-theme" />} {...props} />
         </Dropdown> : undefined
     );

package/src/aldehyde/layout2/css/header.css

@@ -8,13 +8,13 @@
   border-color: #ffffff !important;
 } */
 
-.ant-menu-submenu > .ant-menu-submenu-selected {
+.ant-menu-submenu>.ant-menu-submenu-selected {
   /* background: #fff !important; */
   /* color: #53b572; */
   /* width: calc(100% - 8px); */
 }
 
-.ant-menu-submenu-selected > .ant-menu-submenu-title {
+.ant-menu-submenu-selected>.ant-menu-submenu-title {
   /*color: #fff !important;*/
 }
 
@@ -27,12 +27,16 @@
   width: 0;
 }
 
-.layout2-header-menu > li:nth-last-child(1)::after {
+.layout2-header-menu>li:nth-last-child(1)::after {
   width: 0;
 }
 
-.ant-menu-sub:has(.layout2-header-menu-item)
-  > .ant-menu-submenu-selected
-  > .ant-menu-submenu-title {
+.ant-menu-sub:has(.layout2-header-menu-item)>.ant-menu-submenu-selected>.ant-menu-submenu-title {
   background-color: var(--color-3) !important;
 }
+
+.v2-header .header-logo {
+  width: 24%;
+  max-width: 80px;
+  margin-right: 4%;
+}

package/src/aldehyde/layout2/css/tabs-layout.less

@@ -10,4 +10,10 @@
     .overflow-y-auto {
         height: 100%;
     }
+
+    .list-item {
+        .list-item-icon {
+            background: var(--ant-layout-body-bg);
+        }
+    }
 }

package/src/aldehyde/layout2/header.tsx

@@ -12,7 +12,6 @@ import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
 import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
 import LocaleButton from "../locale/LocaleButton";
 import UserButton from "./components/user-button";
-import homePng from "./imgs/home.png";
 import { MenuType } from "./type/layout-type";
 import { NavLink, useParams, useSearchParams } from "react-router-dom";
 import {
@@ -41,7 +40,7 @@ type HeaderPropsType = {
   systemName: string;
   menuList: MenuType[];
   style?: any;
-  logoImg?: React.ReactNode;
+  logoImg: string;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -163,6 +162,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style, logoIm
         color: "#FFFFFF",
         ...style,
       }}
+      className="v2-header"
     >
       <NavLink
         style={{
@@ -178,15 +178,11 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style, logoIm
         }}
         to={"/v2/home"}
       >
-        <img
-          src={logoImg || homePng}
+        {logoImg ? <img
+          className="header-logo"
+          src={logoImg}
           alt="home"
-          width={35}
-          height={35}
-          style={{
-            marginRight: 5,
-          }}
-        />
+        /> : ""}
         <Tooltip title={systemLabel}>
           <span
             style={{

package/src/aldehyde/layout2/page.tsx

@@ -18,13 +18,14 @@ import Units from '../units';
 import { useLocale } from "../locale/useLocale";
 import { useSessionStorageState } from "ahooks";
 import { KeepAliveTab } from "../hooks/use-tabs";
+import homePng from "./imgs/home.png";
 
 type PagePropsType = {
   children?: React.ReactNode;
-  logo?: React.ReactNode;
+  logo?: string;
 };
 
-const handleMenuItemUrl = (
+export const handleMenuItemUrl = (
   id: string,
   pageType: BlockType["pageType"],
   query: { [key: string]: string } = {},
@@ -117,7 +118,9 @@ const handleMenuRes = (menuList: MenuConfigAPIType["blocks"], version: string):
     defaultCriteriaValue,
     items,
     fullScreen,
-    icon
+    icon,
+    themeColor,
+    funcDescription
   } of menuList) {
     if (!(hiddenOnDisabled === true && disabled === true)) {
       const menu: MenuType = {
@@ -128,8 +131,11 @@ const handleMenuRes = (menuList: MenuConfigAPIType["blocks"], version: string):
         linkTarget,
         children: items?.length ? handleMenuRes(items, version) : [],
         icon,
+        themeColor,
+        funcDescription,
+        dragDropPageId,
+        customPath
       };
-
       retList.push(menu);
     }
   }
@@ -197,17 +203,22 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   }, []);
 
   const [systemName, setSystemName] = useState("");
+  const [systemLogo, setSystemLogo] = useState("");
 
   const [menu, SetMenu] = useState<MenuType[]>([]);
 
+  const getThemeConfigAndMenuConfig = async () => {
+    const themeConfig = await Units.getThemeConfig();
+    const menuConfig = await getMenuConfig();
+    setSystemName(themeConfig?.programName || menuConfig?.systemName);
+    setSystemLogo(themeConfig?.programIcon || homePng);
+    SetMenu(menuConfig?.menu);
+    updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
+  };
 
 
   useEffect(() => {
-    getMenuConfig().then(({ menu, systemName: name }) => {
-      setSystemName(name);
-      SetMenu(menu);
-      updateMenuItemIdToFirstFloorIdxMap(menu);
-    });
+    getThemeConfigAndMenuConfig();
   }, []);
 
   // page ref
@@ -232,7 +243,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
             algorithm: compactTheme ? [theme.compactAlgorithm] : [],
           }}>
           <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-            <Header logoImg={logo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
+            <Header logoImg={logo || systemLogo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
             <Layout>
               <Sider menuList={menu} collapsed={getSiderCollapsed()}></Sider>
               <Main>{props.children}</Main>

package/src/aldehyde/layout2/type/layout-type.ts

@@ -8,4 +8,8 @@ export type MenuType = {
   linkTarget?: HTMLAttributeAnchorTarget;
   icon?: string;
   children?: MenuType[]; // 子菜单
+  themeColor?: string;
+  funcDescription?: string;
+  dragDropPageId?: string;
+  customPath?: string;
 };

package/src/aldehyde/layout3/page.tsx

@@ -31,12 +31,16 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { getSiderCollapsed, compactTheme } = useLocale();
   const { token: { colorPrimary } } = useToken();
 
+  const getThemeConfigAndMenuConfig = async () => {
+    const themeConfig = await Units.getThemeConfig();
+    const menuConfig = await getMenuConfig("v3");
+    setSystemName(themeConfig?.programName || menuConfig?.systemName);
+    setMenu(menuConfig?.menu);
+    updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
+  };
+
   useEffect(() => {
-    getMenuConfig("v3").then(({ menu, systemName: name }) => {
-      setSystemName(name);
-      setMenu(menu);
-      updateMenuItemIdToFirstFloorIdxMap(menu);
-    });
+    getThemeConfigAndMenuConfig();
     useVarCssColor(generate(colorPrimary));
     localStorage.setItem("version", "v3");
     window.addEventListener('beforeunload', () => { setKeepAliveTabs([]); });

package/src/aldehyde/layout4/css/main.less

@@ -40,7 +40,7 @@
     }
 
     .ant-menu-submenu-selected a {
-      color: var(--ant-primary-color)
+      color: var(--ant-color-primary)
     }
   }