aldehyde 0.2.412 → 0.2.413

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aldehyde",
-  "version": "0.2.412",
+  "version": "0.2.413",
   "author": "cosmicparticle",
   "main": "lib/index.js",
   "module": "src/aldehyde/index.txs",

package/src/aldehyde/controls/color-picker/index.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { ColorPicker } from "antd";
 
+const presets = [{ label: "预设颜色", colors: ["#52c41a", "#faad14", "#ff4d4f", "#1677ff", "#21d5ed", "#af57db"] }];
+
 export interface Props {
   disabled?: boolean;
   value?: string;
@@ -13,7 +15,7 @@ const Index: React.FC<Props> = (props) => {
   const { onChange, disabled, value, id, viewOrEdit } = props;
 
   return (
-    <ColorPicker allowClear showText key={id} disabled={viewOrEdit === "view" || disabled} value={value} onClear={() => onChange(undefined)} onChange={(val) => onChange(val.toHexString())} />
+    <ColorPicker presets={presets} allowClear showText key={id} disabled={viewOrEdit === "view" || disabled} value={value} onClear={() => onChange(undefined)} onChange={(val) => onChange(val.toHexString())} />
   )
 };
 

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

@@ -10,7 +10,13 @@ const { useToken } = theme;
 const regex = /#\/v\d+\/(.*)/;
 const defThemes = [{ label: "默认", value: "v2" }, { label: "科技风一", value: "v3" }, { label: "科技风二", value: "v4" }, { label: "侧边布局", value: "v5" }];
 
-const ThemeButton = (props: ButtonProps) => {
+interface Props extends ButtonProps {
+    children?: React.ReactNode,
+    placement?: "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight" | "top" | "bottom",
+}
+
+const ThemeButton = (props: Props) => {
+    const { children, placement, ...otherProps } = props;
     const { token } = useToken();
     const [version, setVersion] = useState<string>();
     const [themes, setThemes] = useState<{ label: string, value: string }[]>([]);
@@ -48,8 +54,8 @@ const ThemeButton = (props: ButtonProps) => {
     })), [themes]);
 
     return (
-        themes.length > 1 ? <Dropdown overlayClassName="themeButton" menu={{ items, onClick, selectedKeys: [version] }}>
-            <Button type="text" icon={<AliIcon type="icon-theme" />} {...props} />
+        themes.length > 1 ? <Dropdown arrow={{ pointAtCenter: true }} placement={placement} overlayStyle={{ minWidth: "105px" }} overlayClassName="themeButton" menu={{ items, onClick, selectedKeys: [version] }}>
+            {children || <Button type="text" icon={<AliIcon type="icon-theme" />} {...otherProps} />}
         </Dropdown> : undefined
     );
 };

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

@@ -7,7 +7,7 @@ import {
   SettingOutlined,
   UnlockOutlined,
   UserOutlined,
-  CompressOutlined
+  CompressOutlined, GlobalOutlined
 } from "@ant-design/icons";
 import { Button, ButtonProps, Dropdown, GetProp, MenuProps } from "antd";
 import HcserviceV3 from "../../tmpl/hcservice-v3";
@@ -20,6 +20,9 @@ import HCDataSource from "../../tmpl/hc-data-source";
 import { useSessionStorageState } from 'ahooks';
 import { KeepAliveTab } from "../../hooks/use-tabs";
 import Units from "../../units";
+import ThemeButton from "./theme-button";
+import LocaleButton from "../../locale/LocaleButton";
+import AliIcon from "../../icon/aliIcon";
 
 type DropDownMenuType = {
   label: string | number | ReactNode;
@@ -143,16 +146,28 @@ const UserButton: React.FC<Props> = (props) => {
       },
     },
     {
-      label: <span onClick={() => changeCompactTheme()}>{compactTheme ? "默认主题" : "紧凑主题"}</span>,
+      label: <span onClick={() => changeCompactTheme()}>{translate(compactTheme ? "${默认主题}" : "${紧凑主题}")}</span>,
       key: "compactTheme",
       icon: <CompressOutlined />,
       show: () => isLogin,
     },
+    {
+      label: <ThemeButton placement="bottomRight"><div style={{ width: "100%" }}>{translate("${主题切换}")}</div></ThemeButton>,
+      key: "changeTheme",
+      icon: <AliIcon type="icon-theme" />,
+      show: () => isLogin,
+    },
+    {
+      label: <LocaleButton placement="bottomRight"><div style={{ width: "100%" }}>{translate("${语言}")}</div></LocaleButton>,
+      key: "changeLocale",
+      icon: <GlobalOutlined />,
+      show: () => isLogin,
+    },
     {
       label: (
         <span onClick={() => changeSiderCollapsed()}>
-          {getSiderCollapsed() ? translate("${显示侧边栏}") : translate("${隐藏侧边栏}")}
-        </span>
+          {getSiderCollapsed() ? translate("${显示侧边栏}") : translate("${ 隐藏侧边栏 }")}
+        </span >
       ),
       key: "collapseSider",
       icon: <span>{getSiderCollapsed() ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</span>,

package/src/aldehyde/layout2/header.tsx

@@ -10,7 +10,7 @@ import React, { useEffect, useState, CSSProperties } from "react";
 import "./css/header.css";
 import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
 import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
-import LocaleButton from "../locale/LocaleButton";
+// import LocaleButton from "../locale/LocaleButton";
 import UserButton from "./components/user-button";
 import { MenuType } from "./type/layout-type";
 import { NavLink, useParams, useSearchParams } from "react-router-dom";
@@ -21,7 +21,7 @@ import {
 import { useLocale } from "../locale/useLocale";
 import { generate } from "@ant-design/colors";
 import { useLayoutContext } from "./layout-context";
-import ThemeButton from "./components/theme-button";
+// import ThemeButton from "./components/theme-button";
 import IconFont from "./components/icon-font";
 import SearchMenu from "./components/search-menu";
 import ScreenfullButton from "./components/screenfull-button";
@@ -249,7 +249,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style, logoIm
             <SearchMenu menuList={menuList} />
             <L2MenuQuickBar style={{ color: "#fff" }} />
             <L2MenuMessageBar version="v2" style={{ color: "#fff" }} />
-            <LocaleButton
+            {/* <LocaleButton
               shape="default"
               size="large"
               type="link"
@@ -259,7 +259,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style, logoIm
               size="large"
               type="link"
               style={toolbarStyle}
-            />
+            /> */}
             <UserButton style={{ padding: 0, marginRight: "15px", color: "#ffffff" }} />
           </Space>
         </div>

package/src/aldehyde/layout2/main.tsx

@@ -10,7 +10,7 @@ type MainPropsType = {
 
 const Main: React.FC<MainPropsType> = ({ style, children }) => {
   return (
-    <Layout.Content style={{ background: "#fff", overflow: "auto", ...style }}>
+    <Layout.Content style={{ background: "#fff", overflow: "auto", paddingBottom: 10, ...style }}>
       <div
         style={{
           width: "100%",
@@ -19,7 +19,7 @@ const Main: React.FC<MainPropsType> = ({ style, children }) => {
           padding: 10,
         }}
       >
-        {children ? children :<TabsLayout/>}
+        {children ? children : <TabsLayout />}
       </div>
     </Layout.Content>
   );

package/src/aldehyde/layout3/header.tsx

@@ -4,8 +4,8 @@ import { NavLink, useParams, useSearchParams } from "react-router-dom";
 import { HomeFilled } from '@ant-design/icons';
 import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
 import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
-import LocaleButton from "../locale/LocaleButton";
-import ThemeButton from "../layout2/components/theme-button";
+// import LocaleButton from "../locale/LocaleButton";
+// import ThemeButton from "../layout2/components/theme-button";
 import { getLeftMostRouteInfo, handlePropsMenuToAntdMenu } from "../layout2/util/menu-util";
 import { MenuType } from "../layout2/type/layout-type";
 import { useLocale } from "../locale/useLocale";
@@ -143,7 +143,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
             <SearchMenu menuList={menuList} style={toolbarStyle} />
             <L2MenuQuickBar style={{ color: "#009BFF" }} />
             <L2MenuMessageBar version="v3" style={{ color: "#009BFF" }} />
-            <LocaleButton
+            {/* <LocaleButton
               shape="default"
               size="large"
               type="link"
@@ -154,7 +154,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
               size="large"
               type="link"
               style={toolbarStyle}
-            />
+            /> */}
             <div className="header-user"><UserButton logoutUrl="/login3" style={{ padding: 0, color: "#fff" }} /></div>
           </Space>
         </div>

package/src/aldehyde/layout4/header.tsx

@@ -3,8 +3,8 @@ import React, { useEffect, useState, CSSProperties } from "react";
 import { NavLink, useParams, useSearchParams } from "react-router-dom";
 import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
 import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
-import LocaleButton from "../locale/LocaleButton";
-import ThemeButton from "../layout2/components/theme-button";
+// import LocaleButton from "../locale/LocaleButton";
+// import ThemeButton from "../layout2/components/theme-button";
 import { getLeftMostRouteInfo, handlePropsMenuToAntdMenu } from "../layout2/util/menu-util";
 import { MenuType } from "../layout2/type/layout-type";
 import { useLocale } from "../locale/useLocale";
@@ -158,7 +158,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg }) =>
             <SearchMenu menuList={menuList} style={toolbarStyle} />
             <L2MenuQuickBar style={{ color: colorPrimary, fontSize: "20px" }} />
             <L2MenuMessageBar version="v4" style={{ color: colorPrimary, fontSize: "20px" }} />
-            <LocaleButton
+            {/* <LocaleButton
               shape="default"
               size="large"
               type="link"
@@ -169,7 +169,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg }) =>
               size="large"
               type="link"
               style={toolbarStyle}
-            />
+            /> */}
             <div className="header-user">
               <UserButton logoutUrl="/login4" style={{ padding: 0, color: "#fff" }} customRender={<img src={userImg} alt="" className="userButton" />} />
             </div>

package/src/aldehyde/layout5/header.tsx

@@ -4,8 +4,8 @@ import { NavLink, useParams, useSearchParams, useLocation } from "react-router-d
 import { LeftOutlined, RightOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
 import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
-import LocaleButton from "../locale/LocaleButton";
-import ThemeButton from "../layout2/components/theme-button";
+// import LocaleButton from "../locale/LocaleButton";
+// import ThemeButton from "../layout2/components/theme-button";
 import UserButton from "../layout2/components/user-button";
 import SearchMenu from "../layout2/components/search-menu";
 import ScreenfullButton from "../layout2/components/screenfull-button";
@@ -177,7 +177,7 @@ const Header: React.FC<HeaderPropsType> = ({ menuList }) => {
         }
         <L2MenuQuickBar style={{ color: colorPrimary }} />
         <L2MenuMessageBar version="v5" style={{ color: colorPrimary }} />
-        <LocaleButton
+        {/* <LocaleButton
           shape="default"
           size="large"
           type="link"
@@ -188,7 +188,7 @@ const Header: React.FC<HeaderPropsType> = ({ menuList }) => {
           size="large"
           type="link"
           style={toolbarStyle}
-        />
+        /> */}
         <UserButton logoutUrl="/login2" style={{ padding: 0, color: "#000" }} />
       </Space>
     </Layout.Header>

package/src/aldehyde/list/vertical-list/index.less

@@ -175,10 +175,19 @@
             padding: 12px 12px 0;
             animation: slide-down .3s ease-out;
 
-            .ant-descriptions-item-content {
-                .infoStyle {
-                    overflow: hidden;
+            .detail-content-item {
+                display: flex;
+                align-items: center;
+                justify-content: start;
+
+                .title {
+                    white-space: nowrap;
+                    color: var(--ant-color-text-secondary);
+                }
+
+                .element {
                     text-overflow: ellipsis;
+                    overflow: hidden;
                     white-space: nowrap;
                 }
             }

package/src/aldehyde/list/vertical-list/item.tsx

@@ -23,29 +23,29 @@ const Index = (props: Props) => {
     const { translate } = useLocale();
 
     const initViewList = () => {
-        const formItemList = [];
+        const itemList = [];
         if (detailColumn.length > 0) {
             detailColumn.forEach((item, index) => {
                 let fieldValue = current ? current[item.id] : undefined;
                 //fieldValue 没有值时不能为null 要为 undefined。antd input所限制
                 fieldValue = fieldValue ? fieldValue : item.defaultValue ? item.defaultValue : undefined;
-                const formItem = (
-                    <Descriptions.Item
-                        label={translate("${" + item.title + "}")}
-                        key={index}
-                    >
-                        <ViewControl
-                            serverKey={serverKey}
-                            holderType={"table"}
-                            value={fieldValue}
-                            fieldConfig={item}
-                        />
-                    </Descriptions.Item>
+                const domItem = (
+                    <div className="detail-content-item" key={index}>
+                        <div className="title">{translate("${" + item.title + "}")}：</div>
+                        <div className="element">
+                            <ViewControl
+                                serverKey={serverKey}
+                                holderType={"table"}
+                                value={fieldValue}
+                                fieldConfig={item}
+                            />
+                        </div>
+                    </div>
                 );
-                formItemList.push(formItem);
+                itemList.push(domItem);
             });
         }
-        return formItemList;
+        return itemList;
     };
 
     const handleData = (item, type: string) => {
@@ -124,9 +124,9 @@ const Index = (props: Props) => {
                 </div>
                 {detailOpen ?
                     <div className="detail-content">
-                        <Descriptions column={4}>
+                        <Space size="middle" wrap={true}>
                             {initViewList()}
-                        </Descriptions>
+                        </Space>
                     </div> : ""}
             </div>
         </div>

package/src/aldehyde/locale/LocaleButton.tsx

@@ -6,7 +6,13 @@ import React from "react";
 
 const { useToken } = theme;
 
-const LocaleButton = (props: ButtonProps) => {
+interface Props extends ButtonProps {
+  children?: React.ReactNode,
+  placement?: "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight" | "top" | "bottom",
+}
+
+const LocaleButton = (props: Props) => {
+  const { children, placement, ...otherProps } = props;
   const { token } = useToken();
   const { getLocale, setLocale, availableLang } = useLocale();
 
@@ -14,11 +20,10 @@ const LocaleButton = (props: ButtonProps) => {
     setLocale(key as LocaleType);
   };
 
-  console.log(availableLang);
   const items: MenuProps["items"] = availableLang.map((lang) => ({
     label: (
       <span style={getLocale() === lang ? { color: token.colorPrimary } : {}}>
-        { lang }
+        {lang}
       </span>
     ),
     key: lang,
@@ -32,14 +37,10 @@ const LocaleButton = (props: ButtonProps) => {
     ),
     key: "zh",
   });
+
   return (
-    <Dropdown overlayClassName="localeButton" menu={{ items, onClick }}>
-      <Button
-        type="primary"
-        shape="circle"
-        icon={<GlobalOutlined />}
-        {...props}
-      />
+    <Dropdown arrow={{ pointAtCenter: true }} placement={placement} overlayStyle={{ minWidth: "105px" }} overlayClassName="localeButton" menu={{ items, onClick }}>
+      {children || <Button type="primary" shape="circle" icon={<GlobalOutlined />}  {...otherProps} />}
     </Dropdown>
   );
 };