aldehyde 0.2.309 → 0.2.312

package/src/aldehyde/controls/view-control.tsx

@@ -15,6 +15,7 @@ import EllipsisText from "./text/ellipsis-text";
 import { ProgramConfig, useLocale } from "../index";
 import FieldHistory from "./field-history";
 import MultiFileView from "./file-view/multi-file-view";
+import DirectFileView from "./direct-file-view";
 
 
 // 暂时先这样, 异步组件国际化有问题
@@ -39,7 +40,7 @@ interface FieldViewControlProps {
   fieldConfig: FieldConfig;
   holderType: ControlHolderType;
   style?: any;
-  dataCode?:string;
+  dataCode?: string;
 }
 
 function renderControl(
@@ -68,12 +69,12 @@ function renderControl(
     : translate("${无需输入}");
   let disabled: boolean = fieldConfig.disabled;
 
-  let value = fieldValue || fieldValue==0
+  let value = fieldValue || fieldValue == 0
     ? fieldValue
     : fieldConfig.defaultValue &&
       !Units.isConfigDefaultValue(fieldConfig.defaultValue)
-    ? fieldConfig.defaultValue
-    : "";
+      ? fieldConfig.defaultValue
+      : "";
   let viewOrEdit: ViewOrEdit = "view";
 
   let controlProps = {
@@ -97,7 +98,7 @@ function renderControl(
     </span>
   );
 
-  if (value !=0 && (!value  || value == "null" || value.toString().includes("@R@null"))) {
+  if (value != 0 && (!value || value == "null" || value.toString().includes("@R@null"))) {
     viewControl = <></>;
   } else {
     switch (itemType) {
@@ -170,7 +171,7 @@ function renderControl(
             {value ? (
               <Badge
                 color={value == "是" || value == 1 ? "green" : "red"}
-                text={translate("${" + (value==0 ?"否":value) + "}")}
+                text={translate("${" + (value == 0 ? "否" : value) + "}")}
               />
             ) : null}
           </span>
@@ -214,6 +215,9 @@ function renderControl(
       case "video":
         viewControl = <FileView {...controlProps}></FileView>;
         break;
+      case "direct-file":
+        viewControl = <DirectFileView {...controlProps} />;
+        break;
       case "relfile":
         //只是配置了，内部未做开发
         viewControl = <MultiFileView {...controlProps}></MultiFileView>;

package/src/aldehyde/index.tsx

@@ -128,6 +128,7 @@ import LoginPage from "./login2/login-page";
 
 // v3 Layout
 import ContextPage3 from "./layout3/page";
+import LoginPage3 from "./login3/login-page";
 
 import LowcodeComponents from "./lowcode-components";
 
@@ -182,5 +183,6 @@ export {
   ContextPage,
   LoginPage,
   LowcodeComponents,
-  ContextPage3
+  ContextPage3,
+  LoginPage3
 };

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

@@ -17,7 +17,7 @@ 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 { KeepAliveTab } from "../../hooks/use-tabs";
 import Units from "../../units";
 
 type DropDownMenuType = {
@@ -27,9 +27,14 @@ type DropDownMenuType = {
   show?: () => boolean;
 };
 
-const UserButton: React.FC<ButtonProps> = (props) => {
+interface Props extends ButtonProps {
+  logoutUrl?: string;
+}
+
+const UserButton: React.FC<Props> = (props) => {
+  const { logoutUrl = "/login2" } = props;
   // translate
-  const { translate,changeSiderCollapsed,getSiderCollapsed } = useLocale();
+  const { translate, changeSiderCollapsed, getSiderCollapsed } = useLocale();
   const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
     defaultValue: [],
   });
@@ -45,7 +50,7 @@ const UserButton: React.FC<ButtonProps> = (props) => {
     const userInfo: UserInfo = await Units.getUserInfo();
     setUserConfig(userInfo);
   };
-  useEffect(() => {}, [userConfig]);
+  useEffect(() => { }, [userConfig]);
 
   // 上下文配置信息
   const [globalContext, setGlobalContext] = useState<any[]>();
@@ -72,19 +77,17 @@ const UserButton: React.FC<ButtonProps> = (props) => {
   const logout = async () => {
     setKeepAliveTabs([]);
     await HcserviceV3.logout2();
-    navigate("/login2");
+    navigate(logoutUrl);
   };
 
   // dropdown menu
-  const onClick: MenuProps["onClick"] = ({ key }) => {};
+  const onClick: MenuProps["onClick"] = ({ key }) => { };
   const dropdownMenuList: DropDownMenuType[] = [
     {
-      label: <NavLink to="/login2">{translate("${登录}")}</NavLink>,
+      label: <NavLink to={logoutUrl}>{translate("${登录}")}</NavLink>,
       key: "login",
       icon: <LoginOutlined />,
-      show: () => {
-        return !isLogin;
-      },
+      show: () => !isLogin,
     },
     {
       label: (
@@ -129,16 +132,16 @@ const UserButton: React.FC<ButtonProps> = (props) => {
       show: () => {
         return isLogin && userConfig.cleanCachable;
       },
-    },{
+    }, {
       label: (
-          <span onClick={() => changeSiderCollapsed()}>
-          {getSiderCollapsed()?translate("${显示侧边栏}"):translate("${隐藏侧边栏}")}
+        <span onClick={() => changeSiderCollapsed()}>
+          {getSiderCollapsed() ? translate("${显示侧边栏}") : translate("${隐藏侧边栏}")}
         </span>
       ),
       key: "collapseSider",
-      icon: <span>{getSiderCollapsed()? <MenuUnfoldOutlined /> :<MenuFoldOutlined /> }</span>,
+      icon: <span>{getSiderCollapsed() ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</span>,
       show: () => {
-        return isLogin ;
+        return isLogin;
       },
     },
     {

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

@@ -1,4 +1,4 @@
-.main{
+.v3-main{
   width: 100%;
   height: 100%;
   position: absolute;
@@ -15,4 +15,15 @@
         -webkit-text-fill-color: transparent; 
         font-size: 20px;
   }
+  .ant-drawer,.ant-modal-content {
+    .ant-drawer-content{
+        border: none !important;
+    }
+    .ant-card-head{
+        background: transparent !important;
+    }
+    .ant-layout{
+        background: #041B3B !important;
+    }
+}
 }

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

@@ -7,7 +7,4 @@
     .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

@@ -28,14 +28,3 @@
         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;
-    }
-}

package/src/aldehyde/layout3/header.tsx

@@ -151,7 +151,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
                 color: "#009BFF",
               }}
             />
-            <div className="header-user"><UserButton style={{ padding: 0, color: "#fff" }} /></div>
+            <div className="header-user"><UserButton logoutUrl="/login3" style={{ padding: 0, color: "#fff" }} /></div>
           </Space>
         </div>
       </div>

package/src/aldehyde/layout3/main.tsx

@@ -8,7 +8,6 @@ type MainPropsType = {
 };
 
 const Main: React.FC<MainPropsType> = ({ style, children }) => {
-  console.log("children", children);
   return (
     <Layout.Content style={{ overflow: "auto", ...style }}>
       <div

package/src/aldehyde/layout3/page.tsx

@@ -46,9 +46,10 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
     <DocumentTitle title={documentTitle}>
       <div
         ref={pageRef}
-        className="main"
+        className="v3-main"
       >
         <ConfigProvider
+          getPopupContainer={() => pageRef.current}
           theme={{
             algorithm: [theme.darkAlgorithm],
             token: { colorBgBase: "#041B3B" },

package/src/aldehyde/layout3/sider.tsx

@@ -68,7 +68,6 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
               width: "100%",
               height: "100%",
               display: "block",
-              textAlign: "center"
             }}
           >
             {translate("${" + label + "}")}
@@ -88,7 +87,6 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
                 display: "block",
                 textOverflow: "ellipsis",
                 overflow: "hidden",
-                textAlign: "center"
               }}
             >
               <Space size={"small"}>{Units.mapMenuIcon(id)}{translate("${" + label + "}")}</Space>

package/src/aldehyde/login2/login.tsx

@@ -1,34 +1,44 @@
-import {Button, Col, Form, Input, Row} from "antd";
+import { Button, Col, Form, Input, Row } from "antd";
 import React, { useEffect, useState } from "react";
 import HCserviceV3 from "../tmpl/hcservice-v3";
 import { useLocale } from "../locale/useLocale";
 import { useParams } from "react-router-dom";
 import Units from "../units";
-import {SafetyCertificateOutlined} from "@ant-design/icons";
+import { SafetyCertificateOutlined } from "@ant-design/icons";
 import { useSessionStorageState } from 'ahooks';
-import {KeepAliveTab} from "../hooks/use-tabs";
+import { KeepAliveTab } from "../hooks/use-tabs";
+
 type LoginPropType = {
   onFinish?: (token: string) => void;
   title?: any;
   programCode?: string;
   autoSaveUser?: boolean;
+  version?: string;
+  style?: { [key: string]: any };
 };
 
 type FormType = {
   username: string;
   password: string;
-  kaptchaText:string;
+  kaptchaText: string;
 };
 
+const defStyle = {
+  input: { borderRadius: "50px", background: "#EEF3FB" },
+  kaptcha: { borderRadius: "30px", background: "#EEF3FB" },
+  button: { shape: "round" }
+}
+
 const Login = (props: LoginPropType) => {
+  const { version = "v2", style = defStyle } = props;
   // locale
   const { translate } = useLocale();
   const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
-        defaultValue: [],
-    });
+    defaultValue: [],
+  });
 
   useEffect(() => {
-    localStorage.setItem("version", "v2");
+    localStorage.setItem("version", version);
   }, []);
 
   const { programCode: routeProgramCode } = useParams();
@@ -36,17 +46,17 @@ const Login = (props: LoginPropType) => {
     if (routeProgramCode === undefined) return;
     Units.setProgramCode(routeProgramCode);
   }, [routeProgramCode]);
-    const [loading, setLoading] = useState<boolean>(false);
-    const [needKaptcha, setNeedKaptcha] = useState<boolean>(false);
-    const [kaptchaImg, setKaptchaImg] = useState<string>(null);
-    const [kaptchaToken, setKaptchaToken] = useState<string>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [needKaptcha, setNeedKaptcha] = useState<boolean>(false);
+  const [kaptchaImg, setKaptchaImg] = useState<string>(null);
+  const [kaptchaToken, setKaptchaToken] = useState<string>(null);
 
-    // form
+  // form
   const [form] = Form.useForm<FormType>();
   const submit = async () => {
-      setKeepAliveTabs([]);
+    setKeepAliveTabs([]);
     try {
-      const { username, password,kaptchaText } = await form.validateFields();
+      const { username, password, kaptchaText } = await form.validateFields();
 
       setLoading(true);
       const { programCode, onFinish } = props;
@@ -56,16 +66,16 @@ const Login = (props: LoginPropType) => {
       );
       const res = await HCserviceV3.login(
         { username, password },
-          kaptchaToken,
-          kaptchaText,
+        kaptchaToken,
+        kaptchaText,
         pubkey,
         programCode ? programCode : routeProgramCode
       );
       if (res.status === "success") {
         onFinish(res.token);
-      }else if (res.status === "error") {
-          setNeedKaptcha(true);
-          await getKaptchaToken();
+      } else if (res.status === "error") {
+        setNeedKaptcha(true);
+        await getKaptchaToken();
       }
       setLoading(false);
     } catch (err) {
@@ -73,31 +83,31 @@ const Login = (props: LoginPropType) => {
     }
   };
 
-    const handleKeyDown = (event) => {
-        //按下enter键，触发login事件
-        switch (event.keyCode) {
-            case 13:
-                submit();
-                break;
-            default:
-                break;
-        }
-    };
+  const handleKeyDown = (event) => {
+    //按下enter键，触发login事件
+    switch (event.keyCode) {
+      case 13:
+        submit();
+        break;
+      default:
+        break;
+    }
+  };
 
-    const  getKaptchaToken = async () => {
+  const getKaptchaToken = async () => {
 
-        let res = await HCserviceV3.getKaptchaToken(routeProgramCode);
-        if (res) {
-            let kaptchaImg;
-            if (res.img && res.img.indexOf("data:") == 0) {
-                kaptchaImg = res.img;
-            } else {
-                kaptchaImg = `data:image/png;base64,${res.img}`;
-            }
-            setKaptchaImg(kaptchaImg);
-            setKaptchaToken(res.kaptchaToken);
-        }
-    };
+    let res = await HCserviceV3.getKaptchaToken(routeProgramCode);
+    if (res) {
+      let kaptchaImg;
+      if (res.img && res.img.indexOf("data:") == 0) {
+        kaptchaImg = res.img;
+      } else {
+        kaptchaImg = `data:image/png;base64,${res.img}`;
+      }
+      setKaptchaImg(kaptchaImg);
+      setKaptchaToken(res.kaptchaToken);
+    }
+  };
 
   // button
   return (
@@ -115,11 +125,10 @@ const Login = (props: LoginPropType) => {
         <Input
           placeholder={translate("请输入用户名")}
           style={{
-            borderRadius: "50px",
-            background: "#EEF3FB",
             height: "50px",
             fontSize: "15px",
             lineHeight: "15px",
+            ...style.input
           }}
         />
       </Form.Item>
@@ -132,70 +141,59 @@ const Login = (props: LoginPropType) => {
           placeholder={translate("请输入密码")}
           onKeyDown={handleKeyDown}
           style={{
-            borderRadius: "50px",
-            background: "#EEF3FB",
             height: "50px",
             fontSize: "15px",
             lineHeight: "15px",
+            ...style.input
           }}
         />
       </Form.Item>
       {needKaptcha ? (
-          <Row gutter={8}>
-            <Col span={16}>
-              <Form.Item
-                  style={{
-                      borderRadius: "50px",
-                      background: "#EEF3FB",
-                      height: "50px",
-                      fontSize: "15px",
-                      lineHeight: "15px",
-                  }}
-                  name="kaptchaText"
-                  rules={[
-                    {
-                      required: true,
-                      message: translate("${请输入}${验证码}!"),
-                    },
-                  ]}
-              >
-                <Input
-                    style={{
-                        borderRadius: "50px",
-                        background: "#EEF3FB",
-                        height: "50px",
-                        fontSize: "15px",
-                        lineHeight: "15px",
-                    }}
-                    onKeyDown={handleKeyDown}
-                    prefix={
-                      <SafetyCertificateOutlined className="site-form-item-icon" />
-                    }
-                    placeholder={translate("${验证码}")}
-                    //onKeyDown={this.handleKeyDown}
-                />
-              </Form.Item>
-            </Col>
-            <Col span={8}>
-              <img
-                  style={{
-                      borderRadius: "30px",
-                      background: "#EEF3FB",
-                      height: "50px",
-                      fontSize: "15px",
-                      lineHeight: "15px",
-                      cursor: "pointer"
-                  }}
-                  // height={50}
-                  width={110}
-                  title={translate("${点击刷新}")}
-                  onClick={getKaptchaToken}
-                  src={kaptchaImg}
-              ></img>
-            </Col>
-          </Row>
+        <Row gutter={8}>
+          <Col span={16}>
+            <Form.Item
+              name="kaptchaText"
+              rules={[
+                {
+                  required: true,
+                  message: translate("${请输入}${验证码}!"),
+                },
+              ]}
+            >
+              <Input
+                style={{
+                  height: "50px",
+                  fontSize: "15px",
+                  lineHeight: "15px",
+                  ...style.input
+                }}
+                onKeyDown={handleKeyDown}
+                prefix={
+                  <SafetyCertificateOutlined className="site-form-item-icon" />
+                }
+                placeholder={translate("${验证码}")}
+              //onKeyDown={this.handleKeyDown}
+              />
+            </Form.Item>
+          </Col>
+          <Col span={8}>
+            <img
+              style={{
+                height: "50px",
+                fontSize: "15px",
+                lineHeight: "15px",
+                cursor: "pointer",
+                width: "100%",
+                ...style.kaptcha
+              }}
+              title={translate("${点击刷新}")}
+              onClick={getKaptchaToken}
+              src={kaptchaImg}
+            />
+          </Col>
+        </Row>
       ) : (
-          ""
+        ""
       )}
 
       <Form.Item wrapperCol={{ span: 24 }}>
@@ -210,6 +208,7 @@ const Login = (props: LoginPropType) => {
             fontSize: "15px",
             lineHeight: "15px",
           }}
+          {...style.button}
         >
           {translate("登录")}
         </Button>

package/src/aldehyde/login3/index.less

@@ -0,0 +1,104 @@
+.login-page {
+    width: 100%;
+    height: 100%;
+    min-height: 640px;
+    position: relative;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+    align-items: center;
+
+    .login-logo-img {
+        position: absolute;
+        top: 20%;
+        left: 5%;
+        z-index: 1;
+        width: 40%;
+        min-width: 600px;
+        max-width: 1000px;
+    }
+
+    .login-content {
+        width: 500px;
+        background: linear-gradient(0deg, #FFFFFF 65%, #DFEDFF);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        margin-right: 5%;
+        z-index: 9;
+
+        .login-logo {
+            width: 100%;
+            padding: 0 40px;
+
+            .login-logo-text,
+            .login-logo-text-sub {
+                font-size: 28px;
+                padding: 12px 0 20px;
+                font-family: YouSheBiaoTiHei;
+                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 配合 */
+            }
+
+            .login-logo-text-sub {
+                font-size: 32px;
+                padding-top: 0;
+            }
+        }
+
+        .login-form {
+            padding: 40px;
+            min-height: 442px;
+            position: relative;
+
+            .ant-input::placeholder {
+                color: #9FCFF8;
+            }
+
+            .ant-input-password-icon {
+                color: #ffffff;
+            }
+
+            // 解决输入框自动填充时背景颜色变白的问题
+            input:-webkit-autofill,
+            input:-webkit-autofill:hover,
+            input:-webkit-autofill:focus,
+            input:-webkit-autofill:active {
+                transition: all 5000s ease-in-out 0s;
+                transition-property: background-color, color;
+            }
+
+            .reset-password {
+                width: 100%;
+                text-align: center;
+
+                .ant-btn-variant-link {
+                    color: #9FCFF8;
+                }
+            }
+
+            .login-copyright {
+                font-weight: 600;
+                font-size: 14px;
+                color: #ffffff;
+                position: absolute;
+                bottom: 40px;
+            }
+        }
+
+    }
+}