feature: prompts select

src/AIModels/SDXLLightning.module.less

@@ -17,9 +17,24 @@
 .sdxViewDemoBtn {
   width: 100%;
 }
+
 .popoverContainer{
   width: 300px;
   max-height: 80vh;
-  overflow: auto;
-  padding: 20px;
+
+  color: rgb(251, 251, 253) !important;
+  border-radius: 10px !important;
+  background: rgb(0, 0, 0) !important;
+  box-shadow: rgba(0, 0, 0, 0.8) 0px 4px 15px 0px;
+  border: 1px solid rgb(49, 49, 49);
+  padding: 24px 16px 16px;
+}
+
+.popoverHeader{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.closePopoverIcon{
+  cursor: pointer;
 }

src/AIModels/SDXLLightning.tsx

@@ -7,6 +7,7 @@ import Popover from "@mui/material/Popover";
 import styleCss from './SDXLLightning.module.less'
 import {PromptDemoComponent} from "../Layout/PromptDemoComponent.tsx";
 import {addPicture} from "../api/image.ts";
+import CloseIcon from "@mui/icons-material/Close";
 
 
 
@@ -70,6 +71,7 @@ export function SDXLLightning() {
 
       <Popover
         id={id}
+        classes={{paper:styleCss.popoverContainer}}
         open={open}
         anchorEl={anchorEl}
         onClose={handleClose}
@@ -81,8 +83,11 @@ export function SDXLLightning() {
           vertical: 'center',
           horizontal: 'left',
         }}>
-        <div
-          className={styleCss.popoverContainer}>
+        <div>
+          <div className={styleCss.popoverHeader}>
+            <p>提示词</p>
+            <CloseIcon className={styleCss.closePopoverIcon} onClick={handleClose}/>
+          </div>
           <PromptDemoComponent/>
         </div>
       </Popover>

src/Layout/leftSideComponent/PromptsItem.tsx

@@ -1,16 +1,20 @@
 import Button from '@mui/material/Button';
+import styleCss from './promptsItem.module.less'
 interface PromptsItemProps {
   prompt: string;
   onSelect: () => void;
 }
 export function PromptsItem(props:PromptsItemProps) {
   const {prompt, onSelect} = props;
   return (
-    <div>
-      <div>{prompt}</div>
-      <div>
-        <Button variant="contained" size={'small'} onClick={onSelect}>选择</Button>
-      </div>
+    <div className={styleCss.promptsItemContainer}>
+
+      <p className={styleCss.promptsItemText}>{prompt}</p>
+      <Button
+        className={styleCss.selectBtn}
+        variant="contained"
+        size={'small'}
+        onClick={onSelect}>选择</Button>
     </div>
   )
 }

src/Layout/leftSideComponent/promptsItem.module.less

@@ -0,0 +1,17 @@
+.promptsItemContainer{
+  background: rgb(31, 31, 31);
+  border-radius: 10px;
+  padding: 12px;
+  border: 1px solid rgb(49, 49, 49);
+  margin-bottom: 8px;
+
+}
+.selectBtn{
+  width: 100%;
+  margin-top: 8px !important;
+}
+.promptsItemText{
+  font-family: Inter, sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+}