V4.12.3 features (#5595)

* refactor: remove ModelProviderIdType and update related types (#5549) * perf: model provider * fix eval create split (#5570) * git rebase --continuedoc * add more variable types (#5540) * variable types * password * time picker * internal var * file * fix-test * time select default value & range * password & type render * fix * fix build * fix * move method * split date select * icon * perf: variable code * prompt editor add markdown plugin (#5556) * editor markdown * fix build * pnpm lock * add props * update code * fix list * editor ui * fix variable reset (#5586) * perf: variables type code * customize lexical indent (#5588) * perf: multiple selector * perf: tab plugin * doc * refactor: update workflow constants to use ToolTypeEnum (#5491) * refactor: replace FlowNodeTemplateTypeEnum with string literals in workflow templates * perf: tool type --------- Co-authored-by: archer <545436317@qq.com> * update doc * fix: make table's row more natural while dragging it (#5596) * feat: add APIGetTemplate function and refactor template fetching logic (#5498) * feat: add APIGetTemplate function and refactor template fetching logic * chore: adjust the code * chore: update sdk --------- Co-authored-by: FinleyGe <m13203533462@163.com> * perf init system * doc * remove log * remove i18n * perf: variables render --------- Co-authored-by: Ctrlz <143257420+ctrlz526@users.noreply.github.com> Co-authored-by: heheer <heheer@sealos.io> Co-authored-by: 伍闲犬 <whoeverimf5@gmail.com> Co-authored-by: FinleyGe <m13203533462@163.com>
2025-10-20 10:45:52 +00:00 · 2025-09-07 14:41:48 +08:00
parent c747fc03ad
commit 3f9b0fa1d4
166 changed files with 3407 additions and 11604 deletions
--- a/packages/web/components/common/DateTimePicker/index.tsx
+++ b/packages/web/components/common/DateTimePicker/index.tsx
@@ -0,0 +1,106 @@
+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 { format } from 'date-fns';
+import type { Matcher } from 'react-day-picker';
+import { DayPicker } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+import zhCN from 'date-fns/locale/zh-CN';
+import MyIcon from '../Icon';
+
+const DateTimePicker = ({
+  onChange,
+  popPosition = 'bottom',
+  defaultDate = new Date(),
+  selectedDateTime,
+  disabled,
+  ...props
+}: {
+  onChange?: (dateTime: Date) => void;
+  popPosition?: 'bottom' | 'top';
+  defaultDate?: Date;
+  selectedDateTime?: Date;
+  disabled?: Matcher[];
+} & Omit<BoxProps, 'onChange'>) => {
+  const OutRangeRef = useRef(null);
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
+    selectedDateTime || defaultDate
+  );
+  const [showSelected, setShowSelected] = useState(false);
+
+  useEffect(() => {
+    if (selectedDateTime) {
+      setSelectedDate(selectedDateTime);
+    }
+  }, [selectedDateTime]);
+
+  const formatSelected = useMemo(() => {
+    if (selectedDate) {
+      const dateStr = format(selectedDate, 'y/MM/dd');
+      return dateStr;
+    }
+    return format(new Date(), 'y/MM/dd');
+  }, [selectedDate]);
+
+  useOutsideClick({
+    ref: OutRangeRef,
+    handler: () => {
+      setShowSelected(false);
+    }
+  });
+
+  return (
+    <Box position={'relative'} ref={OutRangeRef}>
+      <Flex
+        border={'base'}
+        px={3}
+        pr={3}
+        py={1}
+        borderRadius={'sm'}
+        cursor={'pointer'}
+        bg={'myGray.50'}
+        fontSize={'sm'}
+        onClick={() => setShowSelected(true)}
+        alignItems={'center'}
+        {...props}
+      >
+        <Box color={'myGray.600'} fontWeight={'400'} flex={1}>
+          {formatSelected}
+        </Box>
+        <MyIcon ml={2} name={'date'} w={'16px'} color={'myGray.600'} />
+      </Flex>
+      {showSelected && (
+        <Card
+          position={'absolute'}
+          zIndex={1}
+          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) => {
+              if (date) {
+                setSelectedDate(date);
+                onChange?.(date);
+                setShowSelected(false);
+              }
+            }}
+          />
+        </Card>
+      )}
+    </Box>
+  );
+};
+
+export default DateTimePicker;