V4.14.5.1 dev (#6290)

* chore: cherry pick some commits from v4.14.6-dev (#6287)

* fix: custom domain limitation (#6265)

* fix: system secret (#6259)

* fix: system secret

* chore: update docs

* chore: docs

* fix password variable & datetime picker (#6276)

* fix password variable & datetime picker

* doc

* chore: cherry pick some commits from v4.14.6-dev (#6287)

* fix: custom domain limitation (#6265)

* fix: system secret (#6259)

* fix: system secret

* chore: update docs

* chore: docs

* doc

* chore: docs

---------

Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
Co-authored-by: Finley Ge <finleyge@fastgpt.io>

* perf: extname computed (#6285)

* perf: extname computed

* chore: handle hash or query flags

---------

Co-authored-by: Finley Ge <finleyge@fastgpt.io>

* chore: docs (#6291)

---------

Co-authored-by: heheer <heheer@sealos.io>
Co-authored-by: Archer <545436317@qq.com>

packages/web/components/common/DateTimePicker/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useRef, useEffect } from 'react';
 import type { BoxProps } from '@chakra-ui/react';
-import { Box, Card, Flex, useOutsideClick } from '@chakra-ui/react';
+import { Box, Card, Flex, Portal, useOutsideClick } from '@chakra-ui/react';
 import { format } from 'date-fns';
 import type { Matcher } from 'react-day-picker';
 import { DayPicker } from 'react-day-picker';
@@ -22,33 +22,60 @@ const DateTimePicker = ({
   selectedDateTime?: Date;
   disabled?: Matcher[];
 } & Omit<BoxProps, 'onChange'>) => {
-  const OutRangeRef = useRef(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(
     selectedDateTime || defaultDate
   );
   const [showSelected, setShowSelected] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
 
   useEffect(() => {
     setSelectedDate(selectedDateTime);
   }, [selectedDateTime]);
 
+  useEffect(() => {
+    if (showSelected && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      if (popPosition === 'top') {
+        setPosition({
+          top: rect.top - 4,
+          left: rect.left
+        });
+      } else {
+        setPosition({
+          top: rect.bottom + 4,
+          left: rect.left
+        });
+      }
+    }
+  }, [showSelected, popPosition]);
+
+  // 点击外部关闭
+  useEffect(() => {
+    if (!showSelected) return;
+    const handleClick = (e: MouseEvent) => {
+      if (
+        containerRef.current?.contains(e.target as Node) ||
+        popoverRef.current?.contains(e.target as Node)
+      ) {
+        return;
+      }
+      setShowSelected(false);
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [showSelected]);
+
   const formatSelected = useMemo(() => {
     if (selectedDate) {
-      const dateStr = format(selectedDate, 'y/MM/dd');
-      return dateStr;
+      return format(selectedDate, 'y/MM/dd');
     }
     return '';
   }, [selectedDate]);
 
-  useOutsideClick({
-    ref: OutRangeRef,
-    handler: () => {
-      setShowSelected(false);
-    }
-  });
-
   return (
-    <Box position={'relative'} ref={OutRangeRef}>
+    <Box position={'relative'} ref={containerRef}>
       <Flex
         border={'base'}
         px={3}
@@ -68,32 +95,33 @@ const DateTimePicker = ({
         <MyIcon ml={2} name={'date'} w={'16px'} color={'myGray.600'} />
       </Flex>
       {showSelected && (
-        <Card
-          position={'absolute'}
-          zIndex={10}
-          css={{
-            '--rdp-background-color': '#d6e8ff',
-            '--rdp-accent-color': '#0000ff'
-          }}
-          {...(popPosition === 'top'
-            ? {
-                bottom: '40px'
-              }
-            : {})}
-        >
-          <DayPicker
-            locale={zhCN}
-            mode="single"
-            defaultMonth={selectedDate}
-            selected={selectedDate}
-            disabled={disabled}
-            onSelect={(date) => {
-              setSelectedDate(date);
-              onChange?.(date);
-              setShowSelected(false);
+        <Portal>
+          <Card
+            ref={popoverRef}
+            position={'fixed'}
+            top={popPosition === 'top' ? 'auto' : `${position.top}px`}
+            bottom={popPosition === 'top' ? `${window.innerHeight - position.top}px` : 'auto'}
+            left={`${position.left}px`}
+            zIndex={1500}
+            css={{
+              '--rdp-background-color': '#d6e8ff',
+              '--rdp-accent-color': '#0000ff'
             }}
-          />
-        </Card>
+          >
+            <DayPicker
+              locale={zhCN}
+              mode="single"
+              defaultMonth={selectedDate}
+              selected={selectedDate}
+              disabled={disabled}
+              onSelect={(date) => {
+                setSelectedDate(date);
+                onChange?.(date);
+                setShowSelected(false);
+              }}
+            />
+          </Card>
+        </Portal>
       )}
     </Box>
   );