aldehyde 0.2.304 → 0.2.305

package/src/aldehyde/detail/dtmpl.css

@@ -30,6 +30,10 @@
   margin-bottom: 10px;
 }
 
+.detailPage {
+  position: relative;
+}
+
 .detailPage h3 {
   font-size: 18px;
 }

package/src/aldehyde/form/dtmpl-form.tsx

@@ -143,6 +143,7 @@ export default class DtmplForm extends React.PureComponent<
   ) => {
     const { currentDtmplData } = this.state;
     currentDtmplData["arrayMap"][fieldGroupConfig.id] = selectdDatas;
+    debugger
     let currentDtmplData_1 = { ...currentDtmplData };
     this.setState({
       currentDtmplData: currentDtmplData_1,
@@ -372,6 +373,7 @@ export default class DtmplForm extends React.PureComponent<
           if (dtmplData) {
             data = dtmplData.arrayMap[item.id];
           }
+          debugger
           return (
             <RelationTable
               showRightNav={showRightNav}
@@ -404,6 +406,11 @@ export default class DtmplForm extends React.PureComponent<
             loading={loading}
             styles={{body:{ padding: "6px" },header:{ background: "#f2f4f5" }}}
           >
+            {item.readOnly?<FieldViewGroup fields={item ? item.fields : undefined}
+                                           dataCode={dtmplData ? dtmplData.code:null}
+                                           serverKey={serverKey}
+                                           valueMap={dtmplData ? dtmplData.fieldMap : undefined}
+                />:
             <FormItemGroup layout={HcserviceV3.isForeignLanguageMode()?"vertical":"horizontal"}
               serverKey={serverKey}
               formRef={formRef}
@@ -412,7 +419,7 @@ export default class DtmplForm extends React.PureComponent<
               fields={item ? item.fields : undefined}
               dataCode={dtmplData ? dtmplData.code : undefined}
               valueMap={dtmplData ? dtmplData.fieldMap : undefined}
-            ></FormItemGroup>
+            ></FormItemGroup>}
           </CollapseCard>
         );
       }

package/src/aldehyde/index.tsx

@@ -126,6 +126,9 @@ import ContextPage from "./layout2/page";
 import LoginPage from "./login2/login-page";
 // import { LoginPage } from "./login2";
 
+// v3 Layout
+import ContextPage3 from "./layout3/page";
+
 import LowcodeComponents from "./lowcode-components";
 
 export {
@@ -178,5 +181,6 @@ export {
   TmplConfigAnalysis,
   ContextPage,
   LoginPage,
-  LowcodeComponents
+  LowcodeComponents,
+  ContextPage3
 };

package/src/aldehyde/layout2/page.tsx

@@ -30,10 +30,11 @@ const handleMenuItemUrl = (
   customPath?: string,
   dragDropPageId?: string,
   fullScreen?: boolean,
+  version?: string, // 版本路由 v2/v3
 ) => {
-  if (customPath) return `${fullScreen ? "" : "v2/"}page/${id}/${customPath}?menuId=${id}`;
+  if (customPath) return `${fullScreen ? "" : `${version}/`}page/${id}/${customPath}?menuId=${id}`;
   if (dragDropPageId) {
-    return `${fullScreen ? "" : "v2/"}ddpage/${id}/${dragDropPageId}?menuId=${id}`;
+    return `${fullScreen ? "" : `${version}/`}ddpage/${id}/${dragDropPageId}?menuId=${id}`;
   }
 
   const queryParam = { ...query };
@@ -76,12 +77,12 @@ const handleMenuItemUrl = (
   }
 
   if (operator !== "") queryParam["codeSource"] = operator;
-  return `v2/${id}/${routePath}?${Object.entries(queryParam)
+  return `${version}/${id}/${routePath}?${Object.entries(queryParam)
     .map(([key, val]) => `${key}=${val}`)
     .join("&")}`;
 };
 
-const handleMenuRes = (menuList: MenuConfigAPIType["blocks"]): MenuType[] => {
+const handleMenuRes = (menuList: MenuConfigAPIType["blocks"], version: string): MenuType[] => {
   const retList: MenuType[] = [];
 
   menuList.sort((a, b) => {
@@ -109,9 +110,9 @@ const handleMenuRes = (menuList: MenuConfigAPIType["blocks"]): MenuType[] => {
         id,
         label: title,
         disabled: disabled === undefined ? false : disabled,
-        url: handleMenuItemUrl(id, pageType, defaultCriteriaValue, customPath, dragDropPageId, fullScreen),
+        url: handleMenuItemUrl(id, pageType, defaultCriteriaValue, customPath, dragDropPageId, fullScreen, version),
         linkTarget,
-        children: items?.length ? handleMenuRes(items) : [],
+        children: items?.length ? handleMenuRes(items, version) : [],
       };
 
       retList.push(menu);
@@ -123,7 +124,7 @@ const handleMenuRes = (menuList: MenuConfigAPIType["blocks"]): MenuType[] => {
 
 
 
-export const getMenuConfig = async (): Promise<{
+export const getMenuConfig = async (version = "v2"): Promise<{
   systemName: string;
   menu: MenuType[];
 }> => {
@@ -131,7 +132,7 @@ export const getMenuConfig = async (): Promise<{
   const res = await HcserviceV3.requestBlocks("", "");
   let menuList: MenuType[] = [];
   if (res?.blocks) {
-    menuList = handleMenuRes(res.blocks);
+    menuList = handleMenuRes(res.blocks, version);
   }
   let tmp = {};
   menuList.forEach((menu: MenuType) => {

package/src/aldehyde/layout3/components/tabs-layout.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback, useMemo } from "react";
+import { Dropdown, Tabs } from 'antd';
+import { MenuItemType } from 'antd/es/menu/interface';
+import { KeepAliveTabContext } from '../../layout2/tabs/tabs-context';
+import { KeepAliveTab, useTabs } from "../../hooks/use-tabs";
+import antdIcons from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import Units from '../../units';
+import { useLocale } from "../../locale/useLocale";
+import "../css/tabs-layout.css";
+
+const getIcon = (icon?: string): React.ReactElement | undefined => {
+  return icon && antdIcons[icon] && React.createElement(antdIcons[icon]);
+}
+
+const TabsLayout: React.FC = () => {
+  const { translate } = useLocale();
+  const navigate = useNavigate();
+  const { activeTabRoutePath, tabs = [], closeTab, refreshTab, closeOtherTab } = useTabs();
+
+  const menuItems: MenuItemType[] = useMemo(
+    () => tabs.length <= 1 ? [] : [
+      { label: translate("${关闭}"), key: "close" },
+      { label: translate("${关闭其他}"), key: "other" },
+    ],
+    [tabs]);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const menuClick = useCallback(({ key, domEvent }: any, tab: KeepAliveTab) => {
+    domEvent.stopPropagation();
+    if (key === 'refresh') {
+      refreshTab(tab.routePath);
+    } else if (key === "close") {
+      closeTab(tab.routePath);
+    } else if (key === "other") {
+      closeOtherTab(tab.routePath);
+    }
+  }, [closeOtherTab, closeTab, refreshTab]);
+
+  const renderTabTitle = useCallback((tab: KeepAliveTab) => {
+    let label = Units.mapMenu(tab.title) ? Units.mapMenu(tab.title) : tab.title;
+    label = translate("${" + label + "}");
+    return (
+      <Dropdown
+        menu={{
+          items: menuItems,
+          onClick: (e) => menuClick(e, tab),
+        }}
+        trigger={['contextMenu']}
+        onOpenChange={open => open && navigate(tab.pathname)}
+      >
+        <div className='flex gap-[6px]'>
+          {getIcon(tab.icon)}
+          {label}
+        </div>
+      </Dropdown >
+    )
+  }, [menuItems]);
+
+  const tabItems = useMemo(() => {
+    return tabs.map(tab => ({
+      key: tab.routePath,
+      label: renderTabTitle(tab),
+      children: (
+        <div key={tab.key} className="overflow-y-auto tabs-children">
+          {tab.children}
+        </div>
+      ),
+      closable: tabs.length > 1, // 剩最后一个就不能删除了
+    }))
+  }, [tabs]);
+
+  const onTabsChange = useCallback((tabKey: string) => {
+    const tab = tabs.find(r => r.routePath === tabKey);
+    if (tab) {
+      navigate(tab.pathname);
+    }
+  }, [tabs]);
+
+  const keepAliveContextValue = useMemo(
+    () => ({
+      closeTab,
+      closeOtherTab,
+      refreshTab,
+    }),
+    [closeTab, closeOtherTab, refreshTab]
+  );
+
+  return (
+    <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+      <Tabs
+        className="tabs-layout"
+        activeKey={activeTabRoutePath}
+        items={tabItems}
+        type="editable-card"
+        onChange={onTabsChange}
+        hideAdd
+        onEdit={(e) => closeTab(e.toString())}
+        size="small"
+      // tabBarGutter={10}
+      />
+    </KeepAliveTabContext.Provider>
+  )
+}
+
+export default TabsLayout;

package/src/aldehyde/layout3/components/time.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react";
+import dayjs from "dayjs";
+
+type Props = {
+    format?: string;
+};
+
+const Index = (props: Props) => {
+    const { format = "YYYY年MM月DD日" } = props;
+    const [time, setTime] = useState<string>();
+
+    useEffect(() => {
+        setTime(dayjs().format(format));
+        const timeInterval = setInterval(() => {
+            setTime(dayjs().format(format));
+        }, 1000);
+        return () => {
+            clearInterval(timeInterval);
+        }
+    }, []);
+
+    return (<span>{time}</span>);
+};
+
+export default Index;

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

@@ -0,0 +1,189 @@
+import React, { ReactNode, useEffect, useState } from "react";
+import {
+  CaretDownOutlined,
+  ClearOutlined,
+  LoginOutlined,
+  LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined,
+  SettingOutlined,
+  UnlockOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { Button, ButtonProps, Dropdown, GetProp, MenuProps } from "antd";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import { UserInfo } from "../../tmpl/interface";
+import UserInfoBar from "../../layout/menu/userinfo-bar";
+import { useLocale } from "../../locale/useLocale";
+import { NavLink, useNavigate } from "react-router-dom";
+import ResetPassword from "../../layout/menu/reset-password";
+import HCDataSource from "../../tmpl/hc-data-source";
+import { useSessionStorageState } from 'ahooks';
+import {KeepAliveTab} from "../../hooks/use-tabs";
+import Units from "../../units";
+
+type DropDownMenuType = {
+  label: string | number | ReactNode;
+  key: string;
+  icon?: ReactNode;
+  show?: () => boolean;
+};
+
+const UserButton: React.FC<ButtonProps> = (props) => {
+  // translate
+  const { translate,changeSiderCollapsed,getSiderCollapsed } = useLocale();
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
+    defaultValue: [],
+  });
+  // navigation
+  const navigate = useNavigate();
+
+  // 用户配置信息
+  const [userConfig, setUserConfig] = useState<UserInfo>({
+    id: undefined,
+    name: undefined,
+  });
+  const initUserConfig = async () => {
+    const userInfo: UserInfo = await Units.getUserInfo();
+    setUserConfig(userInfo);
+  };
+  useEffect(() => {}, [userConfig]);
+
+  // 上下文配置信息
+  const [globalContext, setGlobalContext] = useState<any[]>();
+  const initContext = async () => {
+    let context = await HcserviceV3.getContextSourceValue();
+    setGlobalContext(context);
+  };
+  useEffect(() => {
+    initContext();
+  }, []);
+
+  // 用户是否登录
+  const [isLogin, setIsLogin] = useState<boolean>(false);
+  useEffect(() => {
+    if (userConfig?.name !== undefined && userConfig?.name !== null)
+      setIsLogin(true);
+    else setIsLogin(false);
+  }, [userConfig]);
+  useEffect(() => {
+    initUserConfig();
+  }, []);
+
+  // logout
+  const logout = async () => {
+    setKeepAliveTabs([]);
+    await HcserviceV3.logout2();
+    navigate("/login2");
+  };
+
+  // dropdown menu
+  const onClick: MenuProps["onClick"] = ({ key }) => {};
+  const dropdownMenuList: DropDownMenuType[] = [
+    {
+      label: <NavLink to="/login2">{translate("${登录}")}</NavLink>,
+      key: "login",
+      icon: <LoginOutlined />,
+      show: () => {
+        return !isLogin;
+      },
+    },
+    {
+      label: (
+        <UserInfoBar
+          gtmplSourceId={userConfig?.gtmplSourceId}
+          editable={userConfig?.changePersonalInfoable}
+          userCode={userConfig?.id}
+        />
+      ),
+      key: "userInfo",
+      icon: <UserOutlined />,
+      show: () => {
+        return isLogin && userConfig?.viewPersonalInfoable;
+      },
+    },
+    {
+      label: <NavLink to="/context-setter">{translate("${全局配置}")}</NavLink>,
+      key: "globalContext",
+      icon: <SettingOutlined />,
+      show: () => {
+        return (
+          isLogin && Array.isArray(globalContext) && globalContext.length > 0
+        );
+      },
+    },
+    {
+      label: <ResetPassword></ResetPassword>,
+      key: "resetPwd",
+      icon: <UnlockOutlined />,
+      show: () => {
+        return isLogin && userConfig.changePasswordable;
+      },
+    },
+    {
+      label: (
+        <span onClick={() => HCDataSource.reload([])}>
+          {translate("${清空缓存}")}
+        </span>
+      ),
+      key: "cleanCache",
+      icon: <ClearOutlined />,
+      show: () => {
+        return isLogin && userConfig.cleanCachable;
+      },
+    },{
+      label: (
+          <span onClick={() => changeSiderCollapsed()}>
+          {getSiderCollapsed()?translate("${显示侧边栏}"):translate("${隐藏侧边栏}")}
+        </span>
+      ),
+      key: "collapseSider",
+      icon: <span>{getSiderCollapsed()? <MenuUnfoldOutlined /> :<MenuFoldOutlined /> }</span>,
+      show: () => {
+        return isLogin ;
+      },
+    },
+    {
+      label: <span onClick={logout}>{translate("${退出}")}</span>,
+      key: "logout",
+      icon: <LogoutOutlined />,
+      show: () => {
+        return isLogin;
+      },
+    },
+
+  ];
+  const cleanDropdownMenuList: GetProp<MenuProps, "items"> = dropdownMenuList
+    .filter((item) => {
+      if (!item.show) return true;
+      return item.show();
+    })
+    .map(({ label, key, icon }) => {
+      return {
+        label,
+        key,
+        icon,
+      };
+    });
+
+  return (
+    <Dropdown
+      overlayClassName="localeButton"
+      menu={{ items: cleanDropdownMenuList, onClick }}
+    >
+      <Button
+        type="text"
+        icon={<CaretDownOutlined />}
+        style={{
+          width: "100%",
+          height: "100%",
+          borderRadius: 0,
+          color: "#fff",
+        }}
+        {...props}
+      >
+        {isLogin ? userConfig?.name : translate("${请登录}")}
+      </Button>
+    </Dropdown>
+  );
+};
+
+export default UserButton;

package/src/aldehyde/layout3/css/header.css

@@ -0,0 +1,156 @@
+.layout-header{
+    padding: 0;
+    color:#ffffff;
+    position: relative;
+    height: auto;
+    background:#041B3B ;
+    .header-top{
+      background-size: 100% 100%; 
+      background-repeat: no-repeat;
+      background-position: center; 
+      width: 100%;
+      height: 103px;
+      display: flex;
+      justify-content: center;
+      background-color: #041B3B;
+      border: none;
+      .header-title{
+        font-family: YouSheBiaoTiHei;
+        font-size: 48px;
+        line-height: 62px;
+        text-align: justify;
+        font-style: normal;
+        text-transform: none;
+        background-image: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);/* 可以调整方向和颜色 */
+        /* 2. 关键: 将背景裁剪到文字形状 */
+        -webkit-background-clip: text; /* 对于 Webkit 内核浏览器 (如 Safari, 老版Chrome) */
+        background-clip: text; /* 标准属性 */
+        /* 3. 关键: 将文字颜色设置为透明，以显示背景渐变 */
+        -webkit-text-fill-color: transparent; /* 对于 Webkit 内核浏览器 */
+        color: transparent; /* 标准属性，但注意某些环境下可能需 -webkit-text-fill-color 配合 */
+      }
+      .header-time{
+        font-size: 18px;
+        line-height: 24px;
+        letter-spacing: 1px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        background-image: linear-gradient(180deg, #FFFFFF 36%, #008BFD 100%);
+        -webkit-background-clip: text; 
+        background-clip: text; 
+        -webkit-text-fill-color: transparent; 
+        color: transparent; 
+        position: absolute;
+        top: 46px;
+        left: 33px;
+        font-weight: 500;
+      }
+    }
+    .header-right{
+      position: absolute;
+      right: 28px;
+      top: 52px;
+      line-height: normal;
+      .message-bar{
+        min-width: 0;
+        svg{
+           color:#009BFF
+        }
+      }
+      .message-bar:hover{
+        background: transparent;
+      }
+      .header-user{
+        button .ant-btn-icon{
+          margin-top: 4px;
+        }
+      }
+    }
+    .header-nav{
+      margin: 0 0 16px 0;
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      line-height: normal;
+      .header-home-page{
+        width: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 4px 0 4px 24px;
+        margin-right: 12px;
+        cursor: pointer;
+        background-size: 100% 100%; 
+        background-repeat: no-repeat;
+        background-position: center; 
+      }
+      .home-page-icon{
+        color: #90DEFF;
+        font-size: 18px;
+      }
+      .home-page-title{
+        margin-left: 10px;
+        font-family: YouSheBiaoTiHei;
+        background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
+        -webkit-background-clip: text; 
+        background-clip: text; 
+        -webkit-text-fill-color: transparent; 
+        font-size: 20px;
+      }
+      .ant-menu-submenu-selected::after,
+      .ant-menu-submenu:hover::after,
+      .ant-menu-submenu-open::after,
+      .ant-menu-submenu::after{
+        border-bottom: none !important;
+      }
+      .menu-disabled{
+        cursor: not-allowed;
+      } 
+      .menu-item {
+        position: relative;
+        width: 126px;
+        height: 42px;
+        line-height: normal;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient( 180deg, rgba(124,208,255,0.3) 0%, rgba(0,41,147,0) 100%), linear-gradient( 360deg, rgba(0,133,255,0.5) 0%, rgba(0,163,255,0.15) 22%, rgba(0,163,255,0) 100%), rgba(0,0,0,0.75);
+        border-radius: 120px 120px 120px 120px;
+        border: 1px solid;
+        background-clip: padding-box;
+        color: #009BFF;
+        font-weight: 500;
+        z-index: 1;
+        .menu-item-border,.menu-item-border-sel{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 118px;
+          height: 40px;
+          border-radius: 120px 120px 120px 120px;
+          border: 1px solid;
+          background-clip: padding-box;
+          background: linear-gradient(180deg, #203c51, #02243e); 
+        }
+        .menu-item-border-sel{
+          background: rgba(0,142,255,0.56);
+          box-shadow: inset 0px 0px 20px 5px #000C27;
+          color:#C4E8FF !important;
+          font-weight: 700 !important;
+        }
+      }
+      .menu-item::before {
+        content: '';
+        position: absolute;
+        top: 0; 
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin-bottom: -2px;
+        background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0, 102, 255, 0.3), rgba(0, 102, 255, 1), rgba(0, 102, 255, 0.3),rgba(0,0,0,0)); 
+        border-radius: inherit;
+        z-index: -1;
+      }
+    }
+}

package/src/aldehyde/layout3/css/main.css

@@ -0,0 +1,18 @@
+.main{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  min-width: 1280px;
+  overflow-x: auto;
+  .ant-layout{
+    background: #041B3B !important;
+  }
+  .act-table-title{
+        font-family: YouSheBiaoTiHei;
+        background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
+        -webkit-background-clip: text; 
+        background-clip: text; 
+        -webkit-text-fill-color: transparent; 
+        font-size: 20px;
+  }
+}

package/src/aldehyde/layout3/css/sider.css

@@ -0,0 +1,13 @@
+.layout-sider{
+    margin-bottom: 12px;
+    overflow: auto;
+    background: linear-gradient( 180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), radial-gradient( 188% 188% at -139% 100%, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%), radial-gradient( 488% 488% at -439% 100%, rgba(39,115,255,0.2) 0%, rgba(39,115,255,0) 100%), radial-gradient( 716% 716% at -667% 100%, rgba(39,115,255,0.5) 0%, rgba(39,115,255,0) 100%);
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(39, 95, 180, 0.3), rgba(68, 118, 235, 1)) 1 1;
+    .ant-menu-item-selected{
+        background: linear-gradient(90deg,#88EFFF00,rgba(163,194,255,0.2),#88EFFF00);
+    }
+    .ant-menu-item{
+        padding: 0 !important;
+    }
+}

package/src/aldehyde/layout3/css/tabs-layout.css

@@ -0,0 +1,41 @@
+.tabs-layout {
+    height: 100%;
+    .ant-tabs-nav {
+        margin-bottom: 0;
+    }
+    .ant-tabs-tab {
+        min-width: 110px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .ant-tabs-content,.ant-tabs-tabpane {
+        height: 100%;
+    }
+
+    .tabs-children {
+        height: 100%;
+        overflow: auto;
+        border: 1px solid;
+        border-image: linear-gradient(180deg, rgba(39, 95, 180, 0.3), rgba(68, 118, 235, 1)) 1 1;
+        padding: 3px 12px 12px;
+        border-top: 0;
+    }
+
+    /* 组件样式异常覆盖 */
+    .ant-card-head{
+        background: transparent !important;
+    }
+}
+.ant-drawer,.ant-modal-content {
+    .ant-drawer-content{
+        border: none !important;
+    }
+    .ant-card-head{
+        background: transparent !important;
+    }
+    .ant-layout{
+        background: #041B3B !important;
+    }
+}