App template market (#2337)

* feat: add app template market (#2012)

* feat: add app template market

* fix

* fix

* i18n

* fix

* perf: template market ux

* perf: simple mode app ui

* perf: tempalte modal ui

* perf: tempalte market ui

* perf: template position

* feat: create app modal

* regiter default app

* perf: icon

* change templates position (#2331)

* change templates position

* fix

* perf: template market ux

---------

Co-authored-by: heheer <heheer@sealos.io>

packages/web/components/common/Textarea/PromptEditor/Editor.tsx

@@ -35,7 +35,8 @@ export default function Editor({
   onBlur,
   value,
   placeholder = '',
-  isFlow
+  isFlow,
+  bg = 'white'
 }: {
   h?: number;
   maxLength?: number;
@@ -49,6 +50,7 @@ export default function Editor({
   value?: string;
   placeholder?: string;
   isFlow?: boolean;
+  bg?: string;
 }) {
   const [key, setKey] = useState(getNanoid(6));
   const [_, startSts] = useTransition();
@@ -95,6 +97,7 @@ export default function Editor({
       h={`${height}px`}
       cursor={'text'}
       color={'myGray.700'}
+      bg={focus ? 'white' : bg}
     >
       <LexicalComposer initialConfig={initialConfig} key={key}>
         <PlainTextPlugin

packages/web/components/common/Textarea/PromptEditor/index.module.scss

@@ -5,7 +5,7 @@
   border: 1px solid rgb(232, 235, 240);
   border-radius: var(--chakra-radii-md);
   padding: 8px 12px;
-  background: #fff;
+  // background: #fff;
 
   font-size: var(--chakra-fontSizes-sm);
   overflow-y: auto;
@@ -18,7 +18,7 @@
   border: 1px solid var(--chakra-colors-myGray-200);
   border-radius: var(--chakra-radii-sm);
   padding: 6px 8px;
-  background: #fff;
+  // background: #fff;
   font-size: var(--chakra-fontSizes-sm);
   overflow-y: auto;
 }

packages/web/components/common/Textarea/PromptEditor/index.tsx

@@ -1,4 +1,4 @@
-import { Button, ModalBody, ModalFooter, useDisclosure } 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';
@@ -20,7 +20,8 @@ const PromptEditor = ({
   maxLength,
   placeholder,
   title,
-  isFlow
+  isFlow,
+  bg = 'white'
 }: {
   showOpenModal?: boolean;
   showResize?: boolean;
@@ -34,6 +35,7 @@ const PromptEditor = ({
   placeholder?: string;
   title?: string;
   isFlow?: boolean;
+  bg?: string;
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
@@ -62,6 +64,7 @@ const PromptEditor = ({
         onBlur={onBlurInput}
         placeholder={placeholder}
         isFlow={isFlow}
+        bg={bg}
       />
       <MyModal isOpen={isOpen} onClose={onClose} iconSrc="modal/edit" title={title} w={'full'}>
         <ModalBody>