feature: 4.10.1 (#5201)

* add dynamic inputRender (#5127) * dynamic input component * fix * fix * fix * perf: dynamic render input * update doc * perf: error catch * num input ui * fix form render (#5177) * perf: i18n check * add log * doc * Sync dataset (#5181) * perf: api dataset create (#5047) * Sync dataset (#5120) * add * wait * restructure dataset sync, update types and APIs, add sync hints, and remove legacy logic * feat: add function to retrieve real file ID from third-party doc library and rename team permission check function for clarity * fix come console * refactor: rename team dataset limit check functions for clarity, update API dataset sync limit usage, and rename root directory to "ROOT_FOLDER" * frat: update sync dataset login * fix delete.ts * feat: update pnpm-lock.yaml to include bullmq, fix comments in api.d.ts and type.d.ts, rename API file ID field, optimize dataset sync logic, and add website sync feature with related APIs * feat: update CollectionCard to support site dataset sync, add API root ID constant and init sync API * feat: add RootCollectionId constant to replace hardcoded root ID --------- Co-authored-by: dreamer6680 <146868355@qq.com> * perf: code * feat: update success message for dataset sync, revise related i18n texts, and optimize file selection logic (#5166) Co-authored-by: dreamer6680 <146868355@qq.com> * perf: select file * Sync dataset (#5180) * feat: update success message for dataset sync, revise related i18n texts, and optimize file selection logic * fix: make listfile function return rawid string --------- Co-authored-by: dreamer6680 <146868355@qq.com> * init sh * fix: ts --------- Co-authored-by: dreamer6680 <1468683855@qq.com> Co-authored-by: dreamer6680 <146868355@qq.com> * update doc * i18n --------- Co-authored-by: heheer <heheer@sealos.io> Co-authored-by: dreamer6680 <1468683855@qq.com> Co-authored-by: dreamer6680 <146868355@qq.com>
2025-12-11 02:04:59 +08:00 · 2025-07-11 17:02:48 +08:00
parent 2865419952
commit 3a5d725efd
92 changed files with 2336 additions and 2235 deletions
--- a/packages/web/components/common/MySelect/MultipleSelect.tsx
+++ b/packages/web/components/common/MySelect/MultipleSelect.tsx
@@ -192,7 +192,7 @@ const MultipleSelect = <T = any,>({
                        bg={'primary.100'}
                        color={'primary.700'}
                        type={'fill'}
-                        borderRadius={'full'}
+                        borderRadius={'lg'}
                        px={2}
                        py={0.5}
                        flexShrink={0}
--- a/packages/web/components/common/MySelect/index.tsx
+++ b/packages/web/components/common/MySelect/index.tsx
@@ -54,6 +54,9 @@ export type SelectProps<T = any> = Omit<ButtonProps, 'onChange'> & {
  ScrollData?: ReturnType<typeof useScrollPagination>['ScrollData'];
  customOnOpen?: () => void;
  customOnClose?: () => void;
+
+  isInvalid?: boolean;
+  isDisabled?: boolean;
 };

 export const menuItemStyles: MenuItemProps = {
@@ -82,6 +85,8 @@ const MySelect = <T = any,>(
    ScrollData,
    customOnOpen,
    customOnClose,
+    isInvalid,
+    isDisabled,
    ...props
  }: SelectProps<T>,
  ref: ForwardedRef<{
@@ -213,16 +218,31 @@ const MySelect = <T = any,>(
          h={'auto'}
          whiteSpace={'pre-wrap'}
          wordBreak={'break-word'}
+          transition={'border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out'}
+          isDisabled={isDisabled}
          _active={{
            transform: 'none'
          }}
-          {...(isOpen
-            ? {
-                boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)',
-                borderColor: 'primary.600',
-                color: 'primary.700'
-              }
-            : {})}
+          color={isOpen ? 'primary.700' : 'myGray.700'}
+          borderColor={isInvalid ? 'red.500' : isOpen ? 'primary.300' : 'myGray.200'}
+          boxShadow={
+            isOpen
+              ? isInvalid
+                ? '0px 0px 0px 2.4px rgba(255, 0, 0, 0.15)'
+                : '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)'
+              : 'none'
+          }
+          _hover={
+            isInvalid
+              ? {
+                  borderColor: 'red.400',
+                  boxShadow: '0px 0px 0px 2.4px rgba(255, 0, 0, 0.15)'
+                }
+              : {
+                  borderColor: 'primary.300',
+                  boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)'
+                }
+          }
          {...props}
        >
          <Flex alignItems={'center'} justifyContent="space-between" w="100%">
--- a/packages/web/components/common/Textarea/JsonEditor/index.tsx
+++ b/packages/web/components/common/Textarea/JsonEditor/index.tsx
@@ -230,12 +230,24 @@ const JSONEditor = ({

  return (
    <Box
-      borderWidth={isInvalid ? '2px' : '1px'}
-      borderRadius={'md'}
+      borderWidth={'1px'}
+      borderRadius={'sm'}
      borderColor={isInvalid ? 'red.500' : 'myGray.200'}
      py={2}
      height={height}
      position={'relative'}
+      transition={'border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out'}
+      _focusWithin={
+        isInvalid
+          ? {
+              borderColor: 'red.500',
+              boxShadow: '0px 0px 0px 2.4px rgba(244, 69, 46, 0.15)'
+            }
+          : {
+              borderColor: 'primary.600',
+              boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)'
+            }
+      }
      {...props}
    >
      {resize && (
@@ -291,6 +303,19 @@ const JSONEditor = ({
      >
        {placeholder}
      </Box>
+      {isDisabled && (
+        <Box
+          position="absolute"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          bg="rgba(255, 255, 255, 0.4)"
+          borderRadius="sm"
+          zIndex={1}
+          cursor="not-allowed"
+        />
+      )}
    </Box>
  );
 };
--- a/packages/web/components/common/Textarea/PromptEditor/Editor.tsx
+++ b/packages/web/components/common/Textarea/PromptEditor/Editor.tsx
@@ -21,6 +21,7 @@ import { VariableNode } from './plugins/VariablePlugin/node';
 import type { EditorState, LexicalEditor } from 'lexical';
 import OnBlurPlugin from './plugins/OnBlurPlugin';
 import MyIcon from '../../Icon';
+import type { FormPropsType } from './type.d';
 import { type EditorVariableLabelPickerType, type EditorVariablePickerType } from './type.d';
 import { getNanoid } from '@fastgpt/global/common/string/tools';
 import FocusPlugin from './plugins/FocusPlugin';
@@ -43,7 +44,9 @@ export default function Editor({
  onBlur,
  value,
  placeholder = '',
-  bg = 'white'
+  bg = 'white',
+
+  isInvalid
 }: {
  minH?: number;
  maxH?: number;
@@ -56,8 +59,9 @@ export default function Editor({
  onBlur?: (editor: LexicalEditor) => void;
  value?: string;
  placeholder?: string;
-  bg?: string;
-}) {
+
+  isInvalid?: boolean;
+} & FormPropsType) {
  const [key, setKey] = useState(getNanoid(6));
  const [_, startSts] = useTransition();
  const [focus, setFocus] = useState(false);
@@ -91,7 +95,7 @@ export default function Editor({
        <PlainTextPlugin
          contentEditable={
            <ContentEditable
-              className={styles.contentEditable}
+              className={isInvalid ? styles.contentEditable_invalid : styles.contentEditable}
              style={{
                minHeight: `${minH}px`,
                maxHeight: `${maxH}px`
--- a/packages/web/components/common/Textarea/PromptEditor/index.module.scss
+++ b/packages/web/components/common/Textarea/PromptEditor/index.module.scss
@@ -3,13 +3,17 @@
  height: 100%;
  width: 100%;
  border: 1px solid rgb(232, 235, 240);
-  border-radius: var(--chakra-radii-md);
+  border-radius: var(--chakra-radii-sm);
  padding: 8px 12px;
  // background: #fff;

  font-size: var(--chakra-fontSizes-sm);
  overflow-y: auto;

+  transition:
+    border-color 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out;
+
  &:hover {
    border-color: var(--chakra-colors-primary-300);
  }
@@ -32,6 +36,42 @@
  box-shadow: 0px 0px 0px 2.4px rgba(51, 112, 255, 0.15);
 }

+.contentEditable_invalid {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border: 1px solid rgb(232, 235, 240);
+  border-radius: var(--chakra-radii-sm);
+  padding: 8px 12px;
+
+  font-size: var(--chakra-fontSizes-sm);
+  overflow-y: auto;
+
+  transition:
+    border-color 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out;
+
+  &::-webkit-scrollbar {
+    color: var(--chakra-colors-myGray-100);
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--chakra-colors-myGray-200) !important;
+    cursor: pointer;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--chakra-colors-myGray-250) !important;
+  }
+
+  border-color: var(--chakra-colors-red-500);
+}
+
+.contentEditable_invalid:focus {
+  outline: none;
+  border: 1px solid;
+  border-color: var(--chakra-colors-red-600);
+  box-shadow: 0px 0px 0px 2.4px rgba(244, 69, 46, 0.15);
+}
+
 .variable {
  color: var(--chakra-colors-primary-600);
  padding: 0 2px;
--- a/packages/web/components/common/Textarea/PromptEditor/index.tsx
+++ b/packages/web/components/common/Textarea/PromptEditor/index.tsx
@@ -1,10 +1,12 @@
-import { Button, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react';
+import type { BoxProps } from '@chakra-ui/react';
+import { Box, Button, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 import { editorStateToText } from './utils';
 import Editor from './Editor';
 import MyModal from '../../MyModal';
 import { useTranslation } from 'next-i18next';
 import type { EditorState, LexicalEditor } from 'lexical';
+import type { FormPropsType } from './type.d';
 import { type EditorVariableLabelPickerType, type EditorVariablePickerType } from './type.d';
 import { useCallback } from 'react';

@@ -20,7 +22,9 @@ const PromptEditor = ({
  maxLength,
  placeholder,
  title,
-  bg = 'white'
+  isInvalid,
+  isDisabled,
+  ...props
 }: {
  showOpenModal?: boolean;
  variables?: EditorVariablePickerType[];
@@ -33,8 +37,10 @@ const PromptEditor = ({
  maxLength?: number;
  placeholder?: string;
  title?: string;
-  bg?: string;
-}) => {
+
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+} & FormPropsType) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const { t } = useTranslation();

@@ -55,20 +61,36 @@ const PromptEditor = ({

  return (
    <>
-      <Editor
-        showOpenModal={showOpenModal}
-        onOpenModal={onOpen}
-        variables={variables}
-        variableLabels={variableLabels}
-        minH={minH}
-        maxH={maxH}
-        maxLength={maxLength}
-        value={value}
-        onChange={onChangeInput}
-        onBlur={onBlurInput}
-        placeholder={placeholder}
-        bg={bg}
-      />
+      <Box position="relative">
+        <Editor
+          showOpenModal={showOpenModal}
+          onOpenModal={onOpen}
+          variables={variables}
+          variableLabels={variableLabels}
+          minH={minH}
+          maxH={maxH}
+          maxLength={maxLength}
+          value={value}
+          onChange={onChangeInput}
+          onBlur={onBlurInput}
+          placeholder={placeholder}
+          isInvalid={isInvalid}
+          {...props}
+        />
+        {isDisabled && (
+          <Box
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            bg="rgba(255, 255, 255, 0.4)"
+            borderRadius="md"
+            zIndex={1}
+            cursor="not-allowed"
+          />
+        )}
+      </Box>
      <MyModal isOpen={isOpen} onClose={onClose} iconSrc="modal/edit" title={title} w={'full'}>
        <ModalBody>
          <Editor
--- a/packages/web/components/common/Textarea/PromptEditor/type.d.ts
+++ b/packages/web/components/common/Textarea/PromptEditor/type.d.ts
@@ -21,3 +21,5 @@ export type EditorVariableLabelPickerType = {
    avatar?: string;
  };
 };
+
+export type FormPropsType = Omit<BoxProps, 'onChange' | 'onBlur'>;