aldehyde 0.2.98 → 0.2.100

package/src/aldehyde/layout/header/index.tsx

@@ -1,62 +1,68 @@
-import React, {CSSProperties} from 'react'
-import {Col, Layout, Row, theme} from 'antd'
-import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons';
-import "./index.css"
-import Block, {BlockProps} from "../menu/block";
-import L2MenuMessageBar from '../menu/l2menu-message-bar';
-import L2MenuQuickBar from '../menu/l2menu-quick-bar';
-import UserBar from '../menu/user-bar';
+import React, { CSSProperties } from "react";
+import { Col, Layout, Menu, Row, theme } from "antd";
+import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
+import "./index.css";
+import Block, { BlockProps } from "../menu/block";
+import L2MenuMessageBar from "../menu/l2menu-message-bar";
+import L2MenuQuickBar from "../menu/l2menu-quick-bar";
+import UserBar from "../menu/user-bar";
+import LocaleButton from "../../locale/LocaleButton";
 
-const {Header: AntdHeader,} = Layout;
+const { Header: AntdHeader } = Layout;
 
 interface HeaderProps extends BlockProps {
-    toggle: any;
-    collapsed: boolean;
+  toggle: any;
+  collapsed: boolean;
 }
 
-interface HeaderState {
+interface HeaderState {}
 
-}
-
-const {useToken} = theme;
+const { useToken } = theme;
 const Header: React.FC<HeaderProps> = (props) => {
-    const {token} = useToken();
-    let {collapsed} = props;
-    const syyy:CSSProperties={'--antd-color-primary': token.colorPrimary} as CSSProperties;
-    return (
-        <AntdHeader style={{padding: 0, height: 'auto'}}>
-            {/*<Row  justify="space-around" align="middle" style={{'background':'#0f4da1',height:'100px'}}>*/}
-            {/*      <Col span={12}>*/}
-            {/*          <img style={{height:'80px'}} src={Logo}></img>*/}
-            {/*      </Col>*/}
-            {/*      <Col  span={4}>*/}
+  const { token } = useToken();
+  let { collapsed } = props;
+  const syyy: CSSProperties = {
+    "--antd-color-primary": token.colorPrimary,
+  } as CSSProperties;
+  return (
+    <AntdHeader style={{ padding: 0, height: "auto", minWidth: "1000px" }}>
+      {/*<Row  justify="space-around" align="middle" style={{'background':'#0f4da1',height:'100px'}}>*/}
+      {/*      <Col span={12}>*/}
+      {/*          <img style={{height:'80px'}} src={Logo}></img>*/}
+      {/*      </Col>*/}
+      {/*      <Col  span={4}>*/}
 
-            {/*      </Col>*/}
-            {/*  </Row>*/}
-            <Row className="header-top" style={syyy} wrap={false}>
-                <Col span={20} className="header-col">
-                    <div style={{float: 'left'}}>
-                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
-                            className: 'trigger',
-                            onClick: () => {
-                                props.toggle();
-                            },
-                        })}
-                    </div>
-                    <Block {...props} activeColor={token.colorPrimary} />
-                </Col>
-                <Col span={1} style={{width: '100%'}}>
-                    <L2MenuQuickBar backgroudColor={token.colorPrimary} ></L2MenuQuickBar>
-                </Col>
-                <Col span={1} style={{width: '100%'}}>
-                    <L2MenuMessageBar backgroudColor={token.colorPrimary}></L2MenuMessageBar>
-                </Col>
-                <Col span={2}>
-                    <UserBar backgroudColor={token.colorPrimary}></UserBar>
-                </Col>
-            </Row>
-        </AntdHeader>
-    )
-}
+      {/*      </Col>*/}
+      {/*  </Row>*/}
+      <Row className="header-top" style={syyy} wrap={false}>
+        <Col span={20} className="header-col">
+          <div style={{ float: "left" }}>
+            {React.createElement(
+              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
+              {
+                className: "trigger",
+                onClick: () => {
+                  props.toggle();
+                },
+              }
+            )}
+          </div>
+          <Block {...props} activeColor={token.colorPrimary} />
+        </Col>
+        <Col span={1} style={{ width: "100%" }}>
+          <L2MenuQuickBar backgroudColor={token.colorPrimary}></L2MenuQuickBar>
+        </Col>
+        <Col span={1} style={{ width: "100%" }}>
+          <L2MenuMessageBar
+            backgroudColor={token.colorPrimary}
+          ></L2MenuMessageBar>
+        </Col>
+        <Col span={2}>
+          <UserBar backgroudColor={token.colorPrimary}></UserBar>
+        </Col>
+      </Row>
+    </AntdHeader>
+  );
+};
 
-export default Header
+export default Header;

package/src/aldehyde/layout/menu/block.less

@@ -0,0 +1,11 @@
+.menu-item > div {
+  color: var(--antd-color-primary) !important;
+}
+
+.ant-menu > .ant-menu-submenu-selected {
+  background-color: var(--antd-color-primary) !important;
+}
+
+.ant-menu > .ant-menu-submenu-selected > div {
+  color: rgb(255, 255, 255) !important;
+}

package/src/aldehyde/layout/menu/block.tsx

@@ -1,89 +1,149 @@
-import React, {CSSProperties} from "react";
-import { Dropdown, Menu} from 'antd';
-import {BlockMenu} from "../../tmpl/interface";
-import MenuRender from './menu-render';
-
-
-export interface BlockProps{
-    blocks:BlockMenu[];
-    currentBlockId?:string;
-    currentL2MenuId?:string;
-    activeColor?:string;
-}
-interface BlockState{
+import React, { CSSProperties } from "react";
+import { Dropdown, Menu, MenuProps } from "antd";
+import { BlockMenu } from "../../tmpl/interface";
+import MenuRender from "./menu-render";
+import { LocaleContext } from "../../locale/LocaleProvider";
+import "./block.less";
 
+export interface BlockProps {
+  blocks: BlockMenu[];
+  currentBlockId?: string;
+  currentL2MenuId?: string;
+  activeColor?: string;
 }
+interface BlockState {}
 
 class Block extends React.PureComponent<BlockProps, BlockState> {
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+  constructor(props) {
+    super(props);
+  }
 
-    constructor(props) {
-        super(props);
-    }
-
-    getSubMenu = (blockMenu:BlockMenu)=>{
-        return MenuRender.getMenu(blockMenu,null);
-    }
+  getSubMenu = (blockMenu: BlockMenu) => {
+    return MenuRender.getMenu(blockMenu, null);
+  };
 
-    findBlockId = (blocks:BlockMenu[],currentL2MenuId:string) => {
-        let blockId:string=undefined;
-        for(const block of blocks){
-            if(block.l1Menus){
-                for(const menul1 of block.l1Menus){
-                    for(const menul2 of menul1.l2Menus){
-                        if(menul2.id===currentL2MenuId){
-                            blockId=block.id;
-                            return blockId;
-                        }
-                    }
-                }
-            }else{
-                for(const menul1 of block.items){
-                    for(const menul2 of menul1.items){
-                        if(menul2.id===currentL2MenuId){
-                            blockId=block.id;
-                            return blockId;
-                        }
-                    }
-                }
+  findBlockId = (blocks: BlockMenu[], currentL2MenuId: string) => {
+    let blockId: string = undefined;
+    for (const block of blocks) {
+      if (block.l1Menus) {
+        for (const menul1 of block.l1Menus) {
+          for (const menul2 of menul1.l2Menus) {
+            if (menul2.id === currentL2MenuId) {
+              blockId = block.id;
+              return blockId;
             }
-
+          }
+        }
+      } else {
+        for (const menul1 of block.items) {
+          for (const menul2 of menul1.items) {
+            if (menul2.id === currentL2MenuId) {
+              blockId = block.id;
+              return blockId;
+            }
+          }
         }
-        return blockId;
+      }
     }
+    return blockId;
+  };
 
-    render(){
-        const {currentBlockId,blocks,currentL2MenuId,activeColor}=this.props;
+  get computedBlocks() {
+    const { translate } = this.context;
+    const blocks: BlockMenu[] = JSON.parse(JSON.stringify(this.props.blocks));
 
-        const syyy={'--header-block-active-bottom-color':activeColor?activeColor:"#1E90FF",'--header-top-active-background':activeColor?activeColor:"#1E90FF"} as CSSProperties
+    blocks &&
+      Array.isArray(blocks) &&
+      blocks.forEach((block) => {
+        block.title = translate("${" + block.title + "}");
 
-        if(!blocks || blocks.length<1){
-            return <></>;
-        }
-        let blockId=currentBlockId;
-        if(currentL2MenuId && !blockId){
-            blockId=this.findBlockId(blocks,currentL2MenuId);
-        }
-        if(!blockId){
-            blockId=blocks.at(0).id;
-        }
+        const dropdownMenu = block.items;
 
-        return (
-            blocks.map((item, index) => {
-                return <div key={index}
-                            className={`${item.id == blockId ? "active" : ""} header-block`}  style={syyy}>
-                    <Dropdown menu={{ items:this.getSubMenu(item) }}>
-                        <a  className="dropdown-link"
-                            style={item.id == blockId?{color:'#fff'}:{color:activeColor}}
-                            rel="noopener noreferrer"
-                        >
-                            {item.title}
-                        </a>
-                    </Dropdown>
-                </div>
-            })
-        );
+        dropdownMenu &&
+          Array.isArray(dropdownMenu) &&
+          dropdownMenu.forEach((menu) => {
+            menu.title = translate("${" + menu.title + "}");
+          });
+      });
+
+    return blocks;
+  }
+
+  get menuItems() {
+    const blocks = this.computedBlocks;
+    const items: MenuProps["items"] = [];
+
+    blocks.forEach((block) => {
+      const item: typeof items[0] = {
+        className: "menu-item",
+        label: block.title,
+        key: block.id,
+        children: this.getSubMenu(block),
+      };
+
+      items.push(item);
+    });
+
+    return items;
+  }
+
+  render() {
+    const { currentBlockId, blocks, currentL2MenuId, activeColor } = this.props;
+
+    const syyy = {
+      "--header-block-active-bottom-color": activeColor
+        ? activeColor
+        : "#1E90FF",
+      "--header-top-active-background": activeColor ? activeColor : "#1E90FF",
+    } as CSSProperties;
+
+    if (!blocks || blocks.length < 1) {
+      return <></>;
+    }
+    let blockId = currentBlockId;
+    if (currentL2MenuId && !blockId) {
+      blockId = this.findBlockId(blocks, currentL2MenuId);
     }
+    if (!blockId) {
+      blockId = blocks.at(0).id;
+    }
+
+    // return this.computedBlocks.map((item, index) => {
+    //   return (
+    //     <div
+    //       key={index}
+    //       className={`${item.id == blockId ? "active" : ""} header-block`}
+    //       style={syyy}
+    //     >
+    //       <Dropdown menu={{ items: this.getSubMenu(item) }}>
+    //         <a
+    //           className="dropdown-link"
+    //           style={
+    //             item.id == blockId ? { color: "#fff" } : { color: activeColor }
+    //           }
+    //           rel="noopener noreferrer"
+    //         >
+    //           {item.title}
+    //         </a>
+    //       </Dropdown>
+    //     </div>
+    //   );
+    // });
 
+    return (
+      <Menu
+        mode="horizontal"
+        defaultSelectedKeys={[currentBlockId, currentL2MenuId]}
+        items={this.menuItems}
+        style={{
+          flex: 1,
+          minWidth: 0,
+        }}
+      />
+    );
+  }
 }
 
-export default Block;
+export default Block;

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

@@ -1,140 +1,159 @@
-import React, {CSSProperties} from 'react'
-import { Dropdown, Menu, Drawer, Space,Button} from 'antd'
-import {AppstoreOutlined} from '@ant-design/icons';
-import 'antd/dist/reset.css';
-import {Level2Menu} from "../../tmpl/interface";
-import HCDataSource from '../../tmpl/hc-data-source'
+import React, { CSSProperties } from "react";
+import { Dropdown, Menu, Drawer, Space, Button } from "antd";
+import { AppstoreOutlined } from "@ant-design/icons";
+import "antd/dist/reset.css";
+import { Level2Menu } from "../../tmpl/interface";
+import HCDataSource from "../../tmpl/hc-data-source";
 import LtmplTable from "../../module/ltmpl-table";
+import { LocaleContext } from "../../locale/LocaleProvider";
 
 interface L2MenuQuickBarProps {
-    backgroudColor?:string;
+  backgroudColor?: string;
 }
 
 interface QuickBar {
-    l2Menu: Level2Menu;
-    count: number;
+  l2Menu: Level2Menu;
+  count: number;
 }
 
 interface L2MenuQuickBarState {
-    quickBars?: QuickBar[];
-    anyState?:boolean;
-    currentId?:string;
-    showDraw?:boolean;
+  quickBars?: QuickBar[];
+  anyState?: boolean;
+  currentId?: string;
+  showDraw?: boolean;
 }
 
+class L2MenuQuickBar extends React.PureComponent<
+  L2MenuQuickBarProps,
+  L2MenuQuickBarState
+> {
+  state = {
+    quickBars: undefined,
+    anyState: false,
+    currentId: undefined,
+    showDraw: false,
+  };
+  static defaultProps = {
+    backgroudColor: "#4a5f74",
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-class L2MenuQuickBar extends React.PureComponent<L2MenuQuickBarProps, L2MenuQuickBarState> {
-    state={
-        quickBars:undefined,
-        anyState:false,
-        currentId:undefined,
-        showDraw:false,
-    }
-    static  defaultProps={
-        backgroudColor:"#4a5f74"
-    }
-
-    async componentDidMount() {
-        let l2Menus = await HCDataSource.fastMenu('QuickQueryBar');
-        const quickBars:QuickBar[]= [];
-        if(l2Menus){
-            for (const item of l2Menus) {
-                if(item.disabled){
-                    continue;
-                }
-                const quickBar:QuickBar={
-                    l2Menu:item,
-                    count:0,
-                };
-                let that=this;
-                quickBars.push(quickBar);
-            }
+  async componentDidMount() {
+    let l2Menus = await HCDataSource.fastMenu("QuickQueryBar");
+    const quickBars: QuickBar[] = [];
+    if (l2Menus) {
+      for (const item of l2Menus) {
+        if (item.disabled) {
+          continue;
         }
-
-        this.setState({
-            quickBars,
-        });
-    }
-    showDraw=(currentId:string)=>{
-        // console.log("点击了L2MenuQuickBar",currentId);
-        this.setState({
-            currentId,
-            showDraw:true
-        })
-
+        const quickBar: QuickBar = {
+          l2Menu: item,
+          count: 0,
+        };
+        let that = this;
+        quickBars.push(quickBar);
+      }
     }
 
-    closeDrawer=()=>{
-        this.setState({
-            showDraw:false
-        })
-    }
+    this.setState({
+      quickBars,
+    });
+  }
+  showDraw = (currentId: string) => {
+    // console.log("点击了L2MenuQuickBar",currentId);
+    this.setState({
+      currentId,
+      showDraw: true,
+    });
+  };
 
-    renderQuickBar = (quickBars: QuickBar[]) => {
-        const {backgroudColor}=this.props
-        let  total:number=0;
-        const syyy:CSSProperties={'--message-bar-backgroupd':backgroudColor} as CSSProperties;
-        const menu = (
-            <Menu key={1}>
-                { quickBars.map((quickBar, index) => {
-                    if(quickBar.count){
-                        total=total+quickBar.count;
-                    }
-               return <Menu.Item key={index} >
-                   <span onClick={()=>this.showDraw(quickBar.l2Menu.id)}>
-                        {quickBar.l2Menu.title}
-                   </span>
+  closeDrawer = () => {
+    this.setState({
+      showDraw: false,
+    });
+  };
 
-                  </Menu.Item>
-            })}
-            </Menu>
-        );
+  renderQuickBar = (quickBars: QuickBar[]) => {
+    const { backgroudColor } = this.props;
+    let total: number = 0;
+    const syyy: CSSProperties = {
+      "--message-bar-backgroupd": backgroudColor,
+    } as CSSProperties;
+    const menu = (
+      <Menu key={1}>
+        {quickBars.map((quickBar, index) => {
+          if (quickBar.count) {
+            total = total + quickBar.count;
+          }
+          return (
+            <Menu.Item key={index}>
+              <span onClick={() => this.showDraw(quickBar.l2Menu.id)}>
+                {quickBar.l2Menu.title}
+              </span>
+            </Menu.Item>
+          );
+        })}
+      </Menu>
+    );
 
-        if(!quickBars || quickBars.length==0){
-            return;
-        }else if(quickBars.length==1){
-            let quickBar=quickBars[0];
-            const l2Menu = quickBar.l2Menu;
-            return (<div  className={'message-bar'}  style={syyy}  onClick={()=>this.showDraw(quickBar.l2Menu.id)}>
-                 <span  style={{ fontSize: '20px', color: '#08c' }} ><AppstoreOutlined /></span>
-            </div>)
-        }else{
-            return <Dropdown overlay={menu} placement="bottomCenter"   >
-                <div  className={'message-bar'}  style={syyy} >
-                   <span  style={{ fontSize: '20px', color: '#08c' }} ><AppstoreOutlined /></span>
-                </div>
-            </Dropdown>
-        }
+    if (!quickBars || quickBars.length == 0) {
+      return;
+    } else if (quickBars.length == 1) {
+      let quickBar = quickBars[0];
+      const l2Menu = quickBar.l2Menu;
+      return (
+        <div
+          className={"message-bar"}
+          style={syyy}
+          onClick={() => this.showDraw(quickBar.l2Menu.id)}
+        >
+          <span style={{ fontSize: "20px", color: "#08c" }}>
+            <AppstoreOutlined />
+          </span>
+        </div>
+      );
+    } else {
+      return (
+        <Dropdown overlay={menu} placement="bottomCenter">
+          <div className={"message-bar"} style={syyy}>
+            <span style={{ fontSize: "20px", color: "#08c" }}>
+              <AppstoreOutlined />
+            </span>
+          </div>
+        </Dropdown>
+      );
     }
+  };
 
-
-    render() {
-        const {quickBars,showDraw,currentId} = this.state;
-        return (
-            <>
-                {quickBars?this.renderQuickBar(quickBars):""}
-                <Drawer
-                    placement={'left'}
-                    title="快捷查询"
-                    closable={true}
-                    mask={false}
-                    onClose={this.closeDrawer}
-                    open={showDraw}
-                    width={'calc(100% - 280px)'}
-                    style={{
-                        maxWidth: 1960,
-                    }}
-                    extra={
-                        <Space>
-                            <Button onClick={this.closeDrawer}>关闭</Button>
-                        </Space>
-                    }
-                >
-                   <LtmplTable serverKey={null} sourceId={currentId}></LtmplTable>
-                </Drawer>
-            </>
-        );
-    }
+  render() {
+    const { quickBars, showDraw, currentId } = this.state;
+    const { translate } = this.context;
+    return (
+      <>
+        {quickBars ? this.renderQuickBar(quickBars) : ""}
+        <Drawer
+          placement={"left"}
+          title={translate("${快捷查询}")}
+          closable={true}
+          mask={false}
+          onClose={this.closeDrawer}
+          open={showDraw}
+          width={"calc(100% - 280px)"}
+          style={{
+            maxWidth: 1960,
+          }}
+          extra={
+            <Space>
+              <Button onClick={this.closeDrawer}>关闭</Button>
+            </Space>
+          }
+        >
+          <LtmplTable serverKey={null} sourceId={currentId}></LtmplTable>
+        </Drawer>
+      </>
+    );
+  }
 }
 
-export default L2MenuQuickBar;
+export default L2MenuQuickBar;