修改一些细节

slince-zero · Apr 28, 2024 · bc13ec3 · bc13ec3
1 parent 096644b
commit bc13ec3
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 27 deletions.
diff --git a/src/context/index.tsx b/src/context/index.tsx
@@ -62,7 +62,7 @@ export default function ImgContextProvider({
   const [boardTool, setBoardTool] = useState('pen')
 
   // 设置铅笔大小
-  const [penSize, setPenSize] = useState<number>(1)
+  const [penSize, setPenSize] = useState<number>(2)
 
   // 设置铅笔颜色
   const [board_pen_color, setBoardPenColor] = useState('#e23922')

diff --git a/src/page/right/index.tsx b/src/page/right/index.tsx
@@ -26,7 +26,13 @@ import { useContext } from 'react'
 import { ImgContext } from '@/context'
 import { CirclePicker } from 'react-color'
 import { ImageDownloadContext } from '@/context/imageDownload'
-
+import {
+  PenLogo,
+  RubberLogo,
+  PenSizeLogo,
+  PenColorLogo,
+  WhiteBoardLogo,
+} from './write-logo'
 export default function RightBoard() {
   const {
     authorValue,
@@ -47,6 +53,7 @@ export default function RightBoard() {
     handleProportionValue,
     boardTool,
     setBoardTool,
+    penSize,
     handlePenSize,
     board_pen_color,
     handleChangeBoardPenColor,
@@ -319,11 +326,7 @@ export default function RightBoard() {
 
         <Card className='w-full mt-2'>
           <CardHeader className='flex'>
-            <img
-              src='/src/assets/images/whiteBoard.svg'
-              alt='shouxiebi'
-              className='w-6 h-6'
-            />
+            <WhiteBoardLogo />
             <p className='text-md ml-2'>写字板</p>
           </CardHeader>
           <CardBody className='py-2 flex'>
@@ -334,11 +337,7 @@ export default function RightBoard() {
                 style={{ marginLeft: '0.5rem' }}
                 className={boardTool === 'pen' ? ' bg-gray-400' : ''}
                 onClick={() => setBoardTool('pen')}>
-                <img
-                  src='/src/assets/images/pen.svg'
-                  alt='shouxiebi'
-                  className='w-6 h-6'
-                />
+                <PenLogo />
               </Button>
 
               {/* 橡皮擦 */}
@@ -347,11 +346,7 @@ export default function RightBoard() {
                 style={{ marginLeft: '0.5rem' }}
                 className={boardTool === 'rubber' ? ' bg-gray-400' : ''}
                 onClick={() => setBoardTool('rubber')}>
-                <img
-                  src='/src/assets/images/rubber.svg'
-                  alt='rubber'
-                  className='w-6 h-6'
-                />
+                <RubberLogo />
               </Button>
 
               {/* 画笔宽度 */}
@@ -360,18 +355,15 @@ export default function RightBoard() {
                   <Button
                     isIconOnly
                     className='ml-2'>
-                    <img
-                      src='/src/assets/images/penSize.svg'
-                      alt='rubber'
-                      className='w-6 h-6'
-                    />
+                    <PenSizeLogo />
                   </Button>
                 </DropdownTrigger>
                 <DropdownMenu
                   aria-label='Select a penSize'
                   variant='shadow'
                   disallowEmptySelection
                   selectionMode='single'
+                  selectedKeys={penSize !== '2' ? ['2'] : [penSize]}
                   onSelectionChange={handlePenSize}>
                   {board_pen_size.map((item) => (
                     <DropdownItem
@@ -390,11 +382,7 @@ export default function RightBoard() {
                     isIconOnly
                     className='ml-2'
                     style={{ backgroundColor: board_pen_color }}>
-                    <img
-                      src='/src/assets/images/penColor.svg'
-                      alt='rubber'
-                      className='w-6 h-6'
-                    />
+                    <PenColorLogo />
                   </Button>
                 </DropdownTrigger>
                 <DropdownMenu

diff --git a/src/page/right/write-logo.tsx b/src/page/right/write-logo.tsx
@@ -0,0 +1,74 @@
+export const PenLogo = () => (
+  <svg
+    className='icon'
+    width='24px'
+    height='24px'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fill='#ffffff'
+      d='M732.736 741.184c2.112 17.984 2.88 15.488-13.888 65.6a241.28 241.28 0 0 0-8.384 29.952c-9.6 48.768 31.616 66.432 242.112 24.64a40.768 40.768 0 0 1 15.872 80c-257.984 51.2-362.816 6.208-337.984-120.32 1.792-9.344 4.16-18.304 7.488-28.864l3.136-9.792-2.816 8.576-1.344 0.64c-57.344 26.048-162.944 85.12-340.864 190.976l-20.864 12.416a40.768 40.768 0 0 1-41.728-70.016c152.896-91.136 255.36-149.952 323.968-185.088L576 730.432a515.84 515.84 0 0 1 68.544-29.376c44.352-14.08 82.624-5.76 88.128 40.128zM589.376 149.76l151.488 151.424a40.768 40.768 0 0 1 0 57.6l-459.008 459.072a40.768 40.768 0 0 1-22.144 11.392l-181.696 30.208a40.768 40.768 0 0 1-46.848-46.848l30.144-181.696a40.768 40.768 0 0 1 11.392-22.144L531.84 149.76a40.768 40.768 0 0 1 57.6 0z m-28.8 86.4l-420.928 420.928-18.752 112.64 112.64-18.816 420.928-420.928-93.888-93.888zM700.288 38.72l151.424 151.488a40.768 40.768 0 0 1-57.6 57.6L642.56 96.512a40.768 40.768 0 0 1 57.6-57.6z'
+    />
+  </svg>
+)
+
+export const RubberLogo = () => (
+  <svg
+    className='icon'
+    width='24px'
+    height='24px'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fill='#ffffff'
+      d='M554.3 850.7L981 424c12.5-12.5 12.5-32.8 0-45.3L636.7 34.6c-12.5-12.5-32.8-12.5-45.3 0L90.5 535.5c-50 50-50 131 0 181l272.1 270.3c24 23.8 56.4 37.2 90.2 37.2H864c17.7 0 32-14.3 32-32s-14.3-32-32-32H599.5c-57 0-85.6-68.9-45.2-109.3z m71.1-736.9l276.4 276.4c6.2 6.2 6.2 16.4 0 22.6L607.9 706.6l-299-299 293.8-293.9c6.3-6.2 16.4-6.2 22.7 0.1zM135.8 580.7l127.9-127.9 299 299-127.9 127.9c-25 25-65.5 25-90.5 0L135.8 671.3c-25-25-25-65.6 0-90.6z'
+    />
+  </svg>
+)
+
+export const PenSizeLogo = () => (
+  <svg
+    className='icon'
+    width='24px'
+    height='24px'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fill='#ffffff'
+      d='M113.777 819.198 113.777 204.8c0-50.267 40.75-91.022 91.02-91.022l614.376 0c50.29 0 91.045 40.755 91.045 91.022l0 614.398c0 50.27-40.755 91.02-91.045 91.02L204.797 910.218C154.527 910.218 113.777 869.468 113.777 819.198zM796.438 841.953c25.125 0 45.51-20.385 45.51-45.51L841.948 227.554c0-25.122-20.385-45.51-45.505-45.51L227.552 182.044c-25.125 0-45.535 20.387-45.535 45.51l0 568.889c0 25.125 20.39 45.51 45.535 45.51L796.438 841.953zM623.043 603.269l57.115-57.14L344.357 546.129l55.5 55.505c13.31 13.335 13.335 34.93 0 48.265-13.335 13.33-34.95 13.33-48.29 0l-105.765-105.77c-3.415-1.615-6.78-3.525-9.625-6.37-7.08-7.1-10.1-16.475-9.67-25.76-0.46-9.262 2.59-18.66 9.69-25.76 2.85-2.842 6.15-4.8 9.58-6.348l105.79-105.79c13.34-13.335 34.955-13.335 48.29 0 13.31 13.332 13.335 34.927 0 48.262l-55.5 55.502 335.802 0-57.115-57.117c-13.355-13.335-13.335-34.952 0-48.287s34.93-13.335 48.265 0l115.37 115.395c13.335 13.332 13.36 34.927 0 48.262l-115.37 115.395c-13.335 13.335-34.95 13.335-48.265 0C609.708 638.198 609.708 616.583 623.043 603.269z'
+    />
+  </svg>
+)
+
+export const PenColorLogo = () => (
+  <svg
+    className='icon'
+    width='24px'
+    height='24px'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fill='#ffffff'
+      d='M204.4 524.9c-14.5 1.5-26.2 13.2-27.7 27.7-2.1 19.9 14.6 36.7 34.6 34.6 14.5-1.5 26.2-13.2 27.8-27.8 2-19.9-14.8-36.6-34.7-34.5zM265.4 473.7c21.8-1.9 39.4-19.5 41.4-41.4 2.5-28.5-21.2-52.3-49.7-49.7-21.8 1.9-39.4 19.5-41.4 41.4-2.6 28.4 21.2 52.2 49.7 49.7zM415.8 266.9c-28.5 1.8-51.6 24.9-53.4 53.4-2.2 34.5 26.4 63.1 60.9 60.9 28.5-1.8 51.6-24.9 53.4-53.4 2.1-34.6-26.4-63.1-60.9-60.9zM621.9 253.8c-35.1 2.2-63.4 30.6-65.6 65.6-2.7 42.4 32.4 77.6 74.8 74.8 35.1-2.2 63.4-30.6 65.6-65.6 2.8-42.4-32.3-77.5-74.8-74.8zM966.5 276.4c-0.5-7.6-4-14.6-9.8-19.6l-0.7-0.6c-5.2-4.5-11.9-7-18.8-7-8.3 0-16.2 3.6-21.6 9.9L574 652.4l-43.5 85.5 1.1 0.9-4.9 11.3 11.1-5.9 1.5 1.3 78-54.3 342.3-394c5-5.8 7.4-13.2 6.9-20.8zM897.8 476.3c-13.8-1.4-26.7 7.4-30.4 20.7-6.9 24.6-19.3 64.5-35.1 97.8C809.5 643 767.4 710.1 696.7 756c-72.2 46.9-142.7 56.7-189.2 56.7-37 0-72.2-6.1-101.7-17.7-26.9-10.5-46.4-24.6-54.9-39.7-3.4-6.1-7.2-12.9-11.2-20.2-17.2-31.1-36.6-66.5-49.7-77.4-15.9-13.2-39.1-15-59.8-15-8.1 0-40.8 1.3-48.5 1.3-33.1 0-49.4-6.5-56.1-22.4-17.8-42.3-7.3-114.3 26.8-183.4C205.2 331.4 300 253.3 412.6 224c40-10.6 81.2-18.9 121.3-18.9 85.6 0 187.8 32.8 252.5 77.2 11.4 7.8 26.9 5.8 35.7-4.9 10.4-12.6 7.1-31.4-6.8-39.8-23.3-14-57.9-34-86.3-47.1-60.3-27.9-123.7-41.9-189.2-41.9-68.1 0-148.8 16.4-217.2 47.2-78.1 35-135.2 85-179.4 147.5-36.4 51.4-67.8 111.1-80.1 168.7-7.5 35.1-6.8 57.4-2.4 87.8 4.2 29.2 13.4 52.5 26.9 67.5 22.4 25.1 51.5 37.4 89 37.4 13.9 0 56.3-5 63.1-5 7.4 0 12.2 1.2 14.4 3.8 6.4 7.4 14.4 22.4 23.7 39.9 7.5 14.1 15.9 30.1 25.4 45.3 12.1 19.5 36.9 40.4 66.5 55.9 27 14.1 71.9 31 132.2 31 72 0 148.3-23.6 226.7-70.1 74.9-44.4 123-118.9 150.2-173.6 19-38.3 34.7-87.2 43.8-119.1 4.8-17.3-7-34.7-24.8-36.5z'
+    />
+  </svg>
+)
+
+export const WhiteBoardLogo = () => (
+  <svg
+    className='icon'
+    width='24px'
+    height='24px'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fill='#ffffff'
+      d='M932.736 805.184h-29.568c17.728-24 28.608-53.44 28.608-85.568V305.856a145.024 145.024 0 0 0-144.768-144.896h-547.84a144.96 144.96 0 0 0-144.768 144.896v413.76c0 32.128 10.88 61.568 28.672 85.568h-29.44a31.744 31.744 0 1 0 0 63.488h839.104a31.744 31.744 0 1 0 0-63.488zM158.464 305.856c0-44.608 36.224-80.896 80.768-80.896h547.84c44.48 0 80.768 36.288 80.768 80.896v413.76c0 44.48-36.224 80.704-80.768 80.704H447.744c0.192-1.408 0.832-2.688 0.832-4.096v-0.768a32.064 32.064 0 0 0-32-31.936H287.68c-17.6 0-32 14.4-32 31.936v0.768c0 1.408 0.64 2.688 0.832 4.096h-17.28a80.768 80.768 0 0 1-80.768-80.704V305.856z'
+    />
+  </svg>
+)