aldehyde 0.2.97 → 0.2.99

package/src/aldehyde/layout/menu/user-bar.tsx

@@ -1,165 +1,234 @@
-import React, {CSSProperties} from 'react'
-import {Avatar, Col, Dropdown, Menu, MenuProps, Row, Tooltip} from 'antd';
-import {LoginOutlined, LogoutOutlined, UserOutlined} from '@ant-design/icons';
-import {UserInfo} from "../../tmpl/interface";
-import HcserviceV3 from '../../tmpl/hcservice-v3';
+import React, { CSSProperties } from "react";
+import { Avatar, Col, Dropdown, Menu, MenuProps, Row, Tooltip } from "antd";
+import { LoginOutlined, LogoutOutlined, UserOutlined } from "@ant-design/icons";
+import { UserInfo } from "../../tmpl/interface";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
 import HCDataSource from "../../tmpl/hc-data-source";
-import UserInfoBar from "./userinfo-bar"
+import UserInfoBar from "./userinfo-bar";
 import ResetPassword from "./reset-password";
+import { LocaleContext } from "../../locale/LocaleProvider";
 
 //const confirm = Modal.confirm;
 
 interface UserBarProps {
-    backgroudColor?: string,
-    showUserInfo?: boolean,
-    showChangePassword?: boolean,
-    menu?: MenuProps
+  backgroudColor?: string;
+  showUserInfo?: boolean;
+  showChangePassword?: boolean;
+  menu?: MenuProps;
 }
 
-
 interface UserBarState extends UserInfo {
-    context: Array<object>,
+  context: Array<object>;
 }
 
-
 class UserBar extends React.PureComponent<UserBarProps, UserBarState> {
-    state = {
-        id: undefined,
-        name: undefined,
-        roles: [],
-        context: undefined,
-        cleanCachable: false,
-        gtmplSourceId: undefined,
-        changePasswordable: undefined,
-        changePersonalInfoable: undefined,
-        viewPersonalInfoable: undefined,
-    }
-
-    static defaultProps = {
-        backgroudColor: "#4a5f74",
-        showUserInfo: true,
-        showChangePassword: true,
-    }
-
-    async componentDidMount() {
-        let userInfo: UserInfo = await HcserviceV3.getUser();
-        //查询 上下文配置信息
-        let context = await HcserviceV3.getContextSourceValue();
-        // console.log('context', context);
-        this.setState({
-            context,
-            ...userInfo
-        });
-    }
-
-    cleanCache = () => {
-        let {roles} = this.state;
-        let loading = document.getElementById('ajaxLoading');
-        loading.style.display = "block";
-        HCDataSource.reload(roles);
-        loading.style.display = "none";
-    }
-
-    getContext = () => {
-        let {context} = this.state;
-        if (context) {
-            console.log('context', context);
-            return <>
-                {context.map((c) => {
-                    return <Row><Col>{c.label} : {c.content}</Col></Row>
-                })}
-            </>
-        }
-        return "无"
-
-    }
-    toSetContext = () => {
-        window.location.hash = "#/context-setter";
-    }
-
-    getTitle = () => {
-        const {name, context} = this.state;
-        return <>
-            <p>{name}</p>
-            {context ?
-                context.map((con) => {
-                    return <p>{con.label} : {con.content}</p>
-                }) : null
-            }
+  state = {
+    id: undefined,
+    name: undefined,
+    roles: [],
+    context: undefined,
+    cleanCachable: false,
+    gtmplSourceId: undefined,
+    changePasswordable: undefined,
+    changePersonalInfoable: undefined,
+    viewPersonalInfoable: undefined,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  static defaultProps = {
+    backgroudColor: "#4a5f74",
+    showUserInfo: true,
+    showChangePassword: true,
+  };
+
+  async componentDidMount() {
+    let userInfo: UserInfo = await HcserviceV3.getUser();
+    //查询 上下文配置信息
+    let context = await HcserviceV3.getContextSourceValue();
+    // console.log('context', context);
+    this.setState({
+      context,
+      ...userInfo,
+    });
+  }
+
+  cleanCache = () => {
+    let { roles } = this.state;
+    let loading = document.getElementById("ajaxLoading");
+    loading.style.display = "block";
+    HCDataSource.reload(roles);
+    loading.style.display = "none";
+  };
+
+  getContext = () => {
+    let { context } = this.state;
+    const { translate } = this.context;
+    if (context) {
+      console.log("context", context);
+      return (
+        <>
+          {context.map((c) => {
+            return (
+              <Row>
+                <Col>
+                  {c.label} : {c.content}
+                </Col>
+              </Row>
+            );
+          })}
         </>
+      );
     }
-
-    render() {
-        const {backgroudColor, showUserInfo, showChangePassword,menu} = this.props;
-        const {name, context, cleanCachable, gtmplSourceId, changePasswordable, changePersonalInfoable, viewPersonalInfoable, id} = this.state;
-        const syyy: CSSProperties = {'--message-bar-backgroupd': backgroudColor} as CSSProperties;
-
-        const items: MenuProps['items'] = [];
-        if (name) {
-            showUserInfo && viewPersonalInfoable ?
-                items.push({
-                    key: '1',
-                    label: (
-                        <UserInfoBar gtmplSourceId={gtmplSourceId} editable={changePersonalInfoable} userCode={id}/>
-                    ),
-                }) : null;
-            context && context.length > 0 ? items.push({
-                key: '2',
-                label: (
-                    <span onClick={this.toSetContext}>全局配置</span>
-                ),
-            }) : null;
-            showChangePassword && changePasswordable ? items.push({
-                key: '3',
-                label: (
-                    <ResetPassword></ResetPassword>
-                ),
-            }) : null;
-
-            cleanCachable ? items.push({
-                    key: '4',
-                    label: (
-                        <span onClick={this.cleanCache}>清空缓存</span>
-                    ),
-                }) : null;
-
-            items.push({
-                key: '5',
-                label: (
-                    <span onClick={HcserviceV3.logout}><LogoutOutlined/> 退出</span>
-                ),
-            });
-        } else {
-            items.push({
-                key: '2',
-                label: (
-                    <span onClick={HcserviceV3.logout}><LoginOutlined/> 登 录</span>
-                ),
+    return translate("${无}");
+  };
+  toSetContext = () => {
+    window.location.hash = "#/context-setter";
+  };
+
+  getTitle = () => {
+    const { name, context } = this.state;
+    return (
+      <>
+        <p>{name}</p>
+        {context
+          ? context.map((con) => {
+              return (
+                <p>
+                  {con.label} : {con.content}
+                </p>
+              );
             })
-        }
-
-
-        return (
-            <>
-                <Dropdown menu={menu?menu:{ items}} placement="bottom" trigger={['click']}>
-                    <div className="userLogin" style={syyy}>
-                        {/*<Tooltip placement={'right'} title={name} >*/}
-                        {/*<Avatar style={{ color:'#1890ff' }} shape="square" icon={<UserOutlined/>}  size={{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40, xxl: 48 }}>*/}
-                        {/*</Avatar>*/}
-                        {/*</Tooltip>*/}
-                        {/*<UserOutlined/>*/}
-                        <Tooltip placement="left" title={this.getTitle()}>
-                            <Avatar className={'loginAvatar'} icon={<UserOutlined/>} size="large">
-                                {/*{name ?name.substring(0,1).toUpperCase():null}*/}
-                            </Avatar>
-                            {/*<span>{name && name.length>=8?name.substring(0,5)+'...':name}</span>*/}
-                        </Tooltip>
-
-                    </div>
-                </Dropdown>
-            </>
-        );
+          : null}
+      </>
+    );
+  };
+
+  render() {
+    const {
+      backgroudColor,
+      showUserInfo,
+      showChangePassword,
+      menu,
+    } = this.props;
+    const {
+      name,
+      context,
+      cleanCachable,
+      gtmplSourceId,
+      changePasswordable,
+      changePersonalInfoable,
+      viewPersonalInfoable,
+      id,
+    } = this.state;
+    const { translate, changeLocale } = this.context;
+    const syyy: CSSProperties = {
+      "--message-bar-backgroupd": backgroudColor,
+    } as CSSProperties;
+
+    const items: MenuProps["items"] = [];
+
+    items.push({
+      key: "locale",
+      label: translate("${切换语言}"),
+      children: [
+        {
+          label: <span onClick={() => changeLocale("zh")}>中文</span>,
+          key: "locale-zh",
+        },
+        {
+          label: <span onClick={() => changeLocale("fr")}>fr</span>,
+          key: "locale-fr",
+        },
+      ],
+    });
+
+    if (name) {
+      showUserInfo && viewPersonalInfoable
+        ? items.push({
+            key: "1",
+            label: (
+              <UserInfoBar
+                gtmplSourceId={gtmplSourceId}
+                editable={changePersonalInfoable}
+                userCode={id}
+              />
+            ),
+          })
+        : null;
+      context && context.length > 0
+        ? items.push({
+            key: "2",
+            label: (
+              <span onClick={this.toSetContext}>
+                {translate("${全局配置}")}
+              </span>
+            ),
+          })
+        : null;
+      showChangePassword && changePasswordable
+        ? items.push({
+            key: "3",
+            label: <ResetPassword></ResetPassword>,
+          })
+        : null;
+
+      cleanCachable
+        ? items.push({
+            key: "4",
+            label: (
+              <span onClick={this.cleanCache}>{translate("${清空缓存}")}</span>
+            ),
+          })
+        : null;
+
+      items.push({
+        key: "5",
+        label: (
+          <span onClick={HcserviceV3.logout}>
+            <LogoutOutlined /> {translate("${退出}")}
+          </span>
+        ),
+      });
+    } else {
+      items.push({
+        key: "2",
+        label: (
+          <span onClick={HcserviceV3.logout}>
+            <LoginOutlined /> {translate("${登录}")}
+          </span>
+        ),
+      });
     }
+
+    return (
+      <>
+        <Dropdown
+          menu={menu ? menu : { items }}
+          placement="bottom"
+          trigger={["click"]}
+        >
+          <div className="userLogin" style={syyy}>
+            {/*<Tooltip placement={'right'} title={name} >*/}
+            {/*<Avatar style={{ color:'#1890ff' }} shape="square" icon={<UserOutlined/>}  size={{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40, xxl: 48 }}>*/}
+            {/*</Avatar>*/}
+            {/*</Tooltip>*/}
+            {/*<UserOutlined/>*/}
+            <Tooltip placement="left" title={this.getTitle()}>
+              <Avatar
+                className={"loginAvatar"}
+                icon={<UserOutlined />}
+                size="large"
+              >
+                {/*{name ?name.substring(0,1).toUpperCase():null}*/}
+              </Avatar>
+              {/*<span>{name && name.length>=8?name.substring(0,5)+'...':name}</span>*/}
+            </Tooltip>
+          </div>
+        </Dropdown>
+      </>
+    );
+  }
 }
 
-export default UserBar;
+export default UserBar;

package/src/aldehyde/layout/menu/userinfo-bar.tsx

@@ -1,52 +1,69 @@
-import React from 'react'
+import React from "react";
 import DtmplViewDrawer from "../../module/dtmpl-view-drawer";
+import { LocaleContext } from "../../locale/LocaleProvider";
 
 interface UserInfoBarProps {
-    gtmplSourceId:string,
-    userCode:string,
-    editable?:boolean,
+  gtmplSourceId: string;
+  userCode: string;
+  editable?: boolean;
 }
 
 interface UserInfoBarState {
-    showDraw?:boolean;
+  showDraw?: boolean;
 }
 
+class UserInfoBar extends React.PureComponent<
+  UserInfoBarProps,
+  UserInfoBarState
+> {
+  state = {
+    showDraw: false,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-class UserInfoBar extends React.PureComponent<UserInfoBarProps, UserInfoBarState> {
-    state={
-        showDraw:false,
-    }
-
-    static defaultProps={
-        editable:false
-    }
-
-    async componentDidMount() {
-
-    }
-    showDraw=()=>{
-        this.setState({
-            showDraw:true
-        })
-    }
-
-    closeDrawer=()=>{
-        this.setState({
-            showDraw:false
-        })
-    }
-
-    render() {
-        const {showDraw} = this.state;
-        const {gtmplSourceId,userCode,editable}=this.props;
-        return (
-            <>{userCode?
-                <>
-                <span onClick={this.showDraw}>个人信息</span>
-                {showDraw  ?<DtmplViewDrawer serverKey={null} editable={editable} title={'个人信息'}   sourceId={gtmplSourceId} open={showDraw} code={userCode} onClose={this.closeDrawer}></DtmplViewDrawer>:null}
-           </>:null } </>
-        );
-    }
+  static defaultProps = {
+    editable: false,
+  };
+
+  async componentDidMount() {}
+  showDraw = () => {
+    this.setState({
+      showDraw: true,
+    });
+  };
+
+  closeDrawer = () => {
+    this.setState({
+      showDraw: false,
+    });
+  };
+
+  render() {
+    const { showDraw } = this.state;
+    const { gtmplSourceId, userCode, editable } = this.props;
+    const { translate } = this.context;
+    return (
+      <>
+        {userCode ? (
+          <>
+            <span onClick={this.showDraw}>{translate("${个人信息}")}</span>
+            {showDraw ? (
+              <DtmplViewDrawer
+                serverKey={null}
+                editable={editable}
+                title={translate("${个人信息}")}
+                sourceId={gtmplSourceId}
+                open={showDraw}
+                code={userCode}
+                onClose={this.closeDrawer}
+              ></DtmplViewDrawer>
+            ) : null}
+          </>
+        ) : null}{" "}
+      </>
+    );
+  }
 }
 
-export default UserInfoBar;
+export default UserInfoBar;

package/src/aldehyde/layout/sidebar/index.css

@@ -26,16 +26,27 @@
 	color:#fff;
 	display: inline-block;
 	text-align: center;
-	vertical-align: middle;
+	/*vertical-align: middle;*/
 	width:100%;
 	margin:0;
 }
 
+.logonly h1{
+	font-size: 20px;
+	color:#fff;
+	display: inline-block;
+	text-align: center;
+	/*vertical-align: middle;*/
+	width:100%;
+	margin:0;
+	background: var(--logo-blue-background);
+}
+
 .logonly{
 	border-radius: 4px;
-	line-height: 38px;
-	height: 42px;
-	margin: 16px;
+	line-height: 58px;
+	height: 48px;
+	margin: 0px;
 	/*background: rgba(0, 0, 0, 0.8);*/
 	background: rgba(255, 255, 255, 0.8);
 }

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

@@ -1,43 +1,71 @@
-import React, {CSSProperties} from 'react'
-import './index.css'
-import Units from '../../units';
+import React, { CSSProperties } from "react";
+import "./index.css";
+import Units from "../../units";
 import Menu2layers from "../menu/menu-2layers";
-import {Menu2layersProps} from "../../tmpl/interface";
-import Scrollbars from 'react-custom-scrollbars';
-import {Image, theme} from 'antd';
-import logo from './logo.png';
+import { Menu2layersProps } from "../../tmpl/interface";
+import Scrollbars from "react-custom-scrollbars";
+import { Image, theme } from "antd";
+import logo from "./logo.png";
 interface SideBarProps extends Menu2layersProps {
-    title?:string,
-    logo?:any,
+  title?: string;
+  logo?: any;
 }
 
-interface SideBarState {
+interface SideBarState {}
+const { useToken } = theme;
+const SideBar: React.FC<SideBarProps> = (props) => {
+  const { token } = useToken();
+  let syyy = { "--logo-blue-background": token.colorPrimary } as CSSProperties;
+  let { collapsed } = props;
+  return (
+    <div>
+      <Scrollbars
+        style={{ height: "calc(100vh)" }}
+        autoHide
+        autoHideTimeout={1000}
+      >
+        <div className={collapsed ? "logonly" : "logo-blue"} style={syyy}>
+          <a href="#/home">
+            {collapsed ? (
+              props.logo ? (
+                <Image src={props.logo} />
+              ) : (
+                <h1
+                  style={{
+                    overflow: "hidden",
+                    height: "56px",
+                    paddingLeft: "-20px",
+                  }}
+                >
+                  M
+                </h1>
+              )
+            ) : (
+              <>
+                <h1
+                  style={{
+                    overflow: "hidden",
+                    height: "56px",
+                    paddingLeft: "-20px",
+                  }}
+                >
+                  <>
+                    {props.logo ? (
+                      <Image width={"30px"} src={props.logo} />
+                    ) : (
+                      <></>
+                    )}
+                    {props.title ? props.title : Units.programName_NavLeft()}
+                  </>
+                </h1>
+              </>
+            )}
+          </a>
+        </div>
+        <Menu2layers mode="inline" theme="light" {...props}></Menu2layers>
+      </Scrollbars>
+    </div>
+  );
+};
 
-}
-const {useToken} = theme;
-const SideBar :React.FC<SideBarProps> = (props) =>  {
-    const {token} = useToken();
-    let syyy={'--logo-blue-background': token.colorPrimary} as CSSProperties
-    let {collapsed} = props;
-        return (
-            <div>
-                <Scrollbars style={{height: 'calc(100vh)'}}  autoHide autoHideTimeout={1000}>
-                    <div className={collapsed?"logonly" :"logo-blue"} style={syyy}>
-                        <a href="#/home">
-                            {collapsed?<Image
-                                src={props.logo?props.logo:Units.programName_Logo()?Units.programName_Logo():logo}
-                            /> :<><h1 style={{overflow:'hidden',height:'58px',paddingLeft:'-20px'}}>
-                                <><Image width={'30px'}
-                                    src={props.logo?props.logo:Units.programName_Logo()?Units.programName_Logo():logo}
-                                /> {props.title?props.title:Units.programName_NavLeft()}</></h1></>}
-                        </a>
-                    </div>
-                    <Menu2layers  mode="inline"
-                                     theme="light" {...props}></Menu2layers>
-                </Scrollbars>
-            </div>
-
-        )
-}
-
-export default SideBar
+export default SideBar;

package/src/aldehyde/locale/LocaleButton.tsx

@@ -0,0 +1,31 @@
+import { GlobalOutlined } from "@ant-design/icons";
+import { Button, Dropdown, MenuProps } from "antd";
+import { useLocale } from "./useLocale";
+import { LocaleType } from "./langMp";
+import React from "react";
+
+const LocaleButton = () => {
+  const { setLocale } = useLocale();
+
+  const onClick: MenuProps["onClick"] = ({ key }) => {
+    setLocale(key as LocaleType);
+  };
+
+  const items: MenuProps["items"] = [
+    {
+      label: "中文",
+      key: "zh",
+    },
+    {
+      label: "fr",
+      key: "fr",
+    },
+  ];
+  return (
+    <Dropdown menu={{ items, onClick }}>
+      <Button type="primary" shape="circle" icon={<GlobalOutlined />} />
+    </Dropdown>
+  );
+};
+
+export default LocaleButton;