字体大小设置成功

ideas-design · Apr 25, 2024 · 509435b · 509435b
1 parent e63e583
commit 509435b
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 11 deletions.
diff --git a/src/context/index.tsx b/src/context/index.tsx
@@ -34,6 +34,9 @@ export default function ImgContextProvider({
   // 字体
   const [fontValue, setFontValue] = useState('font-dingtalk')
 
+  // 字体大小
+  const [fontSizeValue, setFontSizeValue] = useState('')
+
   // 获取图片
   async function getImage(searchText: string = '') {
     try {
@@ -95,6 +98,11 @@ export default function ImgContextProvider({
     setFontValue(e.target.value)
   }
 
+  // 设置字体大小
+  function handleChangeFontSize(value: string) {
+    setFontSizeValue(value)
+  }
+
   return (
     <ImgContext.Provider
       value={{
@@ -118,7 +126,9 @@ export default function ImgContextProvider({
         setTitleValue,
         fontValue,
         setFontValue,
-        handleChangeFont
+        handleChangeFont,
+        fontSizeValue,
+        handleChangeFontSize,
       }}>
       {children}
     </ImgContext.Provider>

diff --git a/src/page/center/index.tsx b/src/page/center/index.tsx
@@ -9,6 +9,7 @@ export default function CenterBoard() {
     authorValue,
     titleValue,
     fontValue,
+    fontSizeValue,
   } = useContext(ImgContext)
   const [isLoading, setIsLoading] = useState(false)
   // console.log(uploadCurrentImage)
@@ -55,7 +56,7 @@ export default function CenterBoard() {
       {/* 标题&文案显示在图片上 */}
       <div
         className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pt-4'
-        style={{ fontFamily: fontValue }}>
+        style={{ fontFamily: fontValue, fontSize: fontSizeValue }}>
         {titleValue}
       </div>
 

diff --git a/src/page/right/index.tsx b/src/page/right/index.tsx
@@ -37,7 +37,9 @@ export default function RightBoard() {
     titleValue,
     setTitleValue,
     fontValue,
+    fontSizeValue,
     handleChangeFont,
+    handleChangeFontSize,
   } = useContext(ImgContext)
 
   const [hexColor, setHexColor] = useState('')
@@ -66,23 +68,47 @@ export default function RightBoard() {
     {
       label: 'Font-DingTalk',
       value: 'font-dingtalk',
-      description: 'The largest land animal',
     },
     {
       label: 'Font-Alibaba',
       value: 'font-alibaba',
-      description: 'The largest land animal',
     },
 
     {
       label: 'Font-KingSoft',
       value: 'font-kingsoft',
-      description: 'The largest land animal',
     },
     {
       label: 'Font-XinYiGuanHei',
       value: 'font-xinyiguanhei',
-      description: 'The largest land animal',
+    },
+  ]
+
+  // 字体大小
+  const font_size = [
+    {
+      label: '12',
+      value: '12px',
+    },
+    {
+      label: '16',
+      value: '16px',
+    },
+    {
+      label: '20',
+      value: '20px',
+    },
+    {
+      label: '24',
+      value: '24px',
+    },
+    {
+      label: '28',
+      value: '28px',
+    },
+    {
+      label: '32',
+      value: '32px',
     },
   ]
 
@@ -230,12 +256,20 @@ export default function RightBoard() {
           </Select>
           <Dropdown>
             <DropdownTrigger>
-              <Button>大小</Button>
+              <Button>{fontSizeValue === '' ? '大小' : fontSizeValue}</Button>
             </DropdownTrigger>
-            <DropdownMenu>
-              <DropdownItem>1</DropdownItem>
-              <DropdownItem>1</DropdownItem>
-              <DropdownItem>1</DropdownItem>
+            <DropdownMenu
+              aria-label='Select a fontSize'
+              disallowEmptySelection
+              selectionMode='single'
+              onAction={handleChangeFontSize}>
+              {font_size.map((item) => (
+                <DropdownItem
+                  value={item.value}
+                  key={item.value}>
+                  {item.label}
+                </DropdownItem>
+              ))}
             </DropdownMenu>
           </Dropdown>
         </div>