From 2f420c0fcdd9afbf0c8a39b83945075924bfa90e Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Thu, 31 Oct 2024 14:35:05 +0800
Subject: [PATCH] feat: added new painting functionality with mac device
 restriction

---
 .../src/pages/paintings/PaintingsList.tsx     | 38 +++++++++++++++++--
 .../src/pages/paintings/PaintingsPage.tsx     | 14 ++++---
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/pages/paintings/PaintingsList.tsx b/src/renderer/src/pages/paintings/PaintingsList.tsx
index 6a50f4d4ba..efc0d83e93 100644
--- a/src/renderer/src/pages/paintings/PaintingsList.tsx
+++ b/src/renderer/src/pages/paintings/PaintingsList.tsx
@@ -1,4 +1,4 @@
-import { DeleteOutlined } from '@ant-design/icons'
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'
 import DragableList from '@renderer/components/DragableList'
 import { usePaintings } from '@renderer/hooks/usePaintings'
 import FileManager from '@renderer/services/FileManager'
@@ -14,15 +14,22 @@ interface PaintingsListProps {
   selectedPainting: Painting
   onSelectPainting: (painting: Painting) => void
   onDeletePainting: (painting: Painting) => void
+  onNewPainting: () => void
 }
 
-const PaintingsList: FC<PaintingsListProps> = ({ paintings, selectedPainting, onSelectPainting, onDeletePainting }) => {
+const PaintingsList: FC<PaintingsListProps> = ({
+  paintings,
+  selectedPainting,
+  onSelectPainting,
+  onDeletePainting,
+  onNewPainting
+}) => {
   const { t } = useTranslation()
   const [dragging, setDragging] = useState(false)
   const { updatePaintings } = usePaintings()
 
   return (
-    <Container style={{ paddingBottom: dragging ? 30 : 0 }}>
+    <Container style={{ paddingBottom: dragging ? 80 : 0 }}>
       <DragableList
         list={paintings}
         onUpdate={updatePaintings}
@@ -47,6 +54,11 @@ const PaintingsList: FC<PaintingsListProps> = ({ paintings, selectedPainting, on
           </CanvasWrapper>
         )}
       </DragableList>
+      {!dragging && (
+        <NewPaintingButton onClick={onNewPainting}>
+          <PlusOutlined />
+        </NewPaintingButton>
+      )}
     </Container>
   )
 }
@@ -116,4 +128,24 @@ const DeleteButton = styled.div.attrs({ className: 'delete-button' })`
   justify-content: center;
 `
 
+const NewPaintingButton = styled.div`
+  width: 80px;
+  height: 80px;
+  margin-top: -10px;
+  background-color: var(--color-background-soft);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border: 1px dashed var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-2);
+
+  &:hover {
+    background-color: var(--color-background-mute);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+`
+
 export default PaintingsList
diff --git a/src/renderer/src/pages/paintings/PaintingsPage.tsx b/src/renderer/src/pages/paintings/PaintingsPage.tsx
index 068c2a2fba..d9c0719718 100644
--- a/src/renderer/src/pages/paintings/PaintingsPage.tsx
+++ b/src/renderer/src/pages/paintings/PaintingsPage.tsx
@@ -9,6 +9,7 @@ import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navb
 import { VStack } from '@renderer/components/Layout'
 import Scrollbar from '@renderer/components/Scrollbar'
 import TranslateButton from '@renderer/components/TranslateButton'
+import { isMac } from '@renderer/config/constant'
 import { TEXT_TO_IMAGES_MODELS } from '@renderer/config/models'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { usePaintings } from '@renderer/hooks/usePaintings'
@@ -252,11 +253,13 @@ const PaintingsPage: FC = () => {
     <Container>
       <Navbar>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('images.title')}</NavbarCenter>
-        <NavbarRight style={{ justifyContent: 'flex-end' }}>
-          <Button size="small" className="nodrag" icon={<PlusOutlined />} onClick={() => setPainting(addPainting())}>
-            {t('images.button.new.image')}
-          </Button>
-        </NavbarRight>
+        {isMac && (
+          <NavbarRight style={{ justifyContent: 'flex-end' }}>
+            <Button size="small" className="nodrag" icon={<PlusOutlined />} onClick={() => setPainting(addPainting())}>
+              {t('images.button.new.image')}
+            </Button>
+          </NavbarRight>
+        )}
       </Navbar>
       <ContentContainer id="content-container">
         <LeftContainer>
@@ -391,6 +394,7 @@ const PaintingsPage: FC = () => {
           selectedPainting={painting}
           onSelectPainting={onSelectPainting}
           onDeletePainting={onDeletePainting}
+          onNewPainting={() => setPainting(addPainting())}
         />
       </ContentContainer>
     </Container>