src/ant-design.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType, ForwardRefExoticComponent, Key, SVGProps } from 'react'
 import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
-import { TablePaginationConfig } from 'antd/lib'
+import { GetProp, TablePaginationConfig, UploadProps } from 'antd/lib'
 import { ColumnsType, FilterValue, SorterResult, SortOrder } from 'antd/es/table/interface'
 import { CheckboxChangeEvent } from 'antd/es/checkbox'
 import type { DataNode } from 'antd/es/tree'
@@ -23,4 +23,7 @@ declare global {
         parentId?: number
         children?: _DataNode[]
     }
+
+    type _UploadProps = UploadProps
+    type _GetProp<T, PropName> = GetProp<T, PropName>
 }

src/global.d.ts

@@ -529,6 +529,7 @@ interface ToolVo {
     id: string
     name: string
     toolId: string
+    icon: string
     description: string
     baseId: string
     author: UserInfoVo
@@ -540,6 +541,7 @@ interface ToolVo {
     dist: ToolDataVo
     publish: boolean
     review: number
+    publishTime: string
     createTime: string
     updateTime: string
 }
@@ -547,6 +549,7 @@ interface ToolVo {
 interface ToolCreateParam {
     name: string
     toolId: string
+    icon: string
     description: string
     ver: string
     templateId: string

src/pages/Tools/Create.tsx

@@ -1,3 +1,4 @@
+import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/create.scss'
 import {
     DATABASE_DUPLICATE_KEY,
@@ -57,6 +58,27 @@ const Create = () => {
             })
     }
 
+    const handleOnIconBeforeUpload = (
+        file: Parameters<_GetProp<_UploadProps, 'beforeUpload'>>[0]
+    ) => {
+        if (file.type !== 'image/svg+xml') {
+            void message.error('仅支持 svg 文件')
+            return false
+        }
+        if (file.size / 1024 / 1024 > 2) {
+            void message.error('文件大小不能大于2MiB')
+        }
+
+        const reader = new FileReader()
+        reader.addEventListener('load', () => {
+            form.setFieldValue('icon', reader.result!.toString().split(',')[1])
+            void form.validateFields()
+        })
+        reader.readAsDataURL(file)
+
+        return false
+    }
+
     const handleOnTemplateChange = (value: string) => {
         setPreviewTemplate(value)
         if (templateDetailData[value]) {
@@ -163,6 +185,42 @@ const Create = () => {
                                     onFinish={handleOnFinish}
                                     disabled={creating}
                                 >
+                                    <AntdForm.Item
+                                        label={'图标'}
+                                        name={''}
+                                        rules={[
+                                            ({ getFieldValue }) => ({
+                                                validator() {
+                                                    if (!getFieldValue('icon')) {
+                                                        return Promise.reject(
+                                                            new Error('请选择图标')
+                                                        )
+                                                    }
+                                                    return Promise.resolve()
+                                                }
+                                            })
+                                        ]}
+                                    >
+                                        <AntdUpload
+                                            listType={'picture-card'}
+                                            showUploadList={false}
+                                            beforeUpload={handleOnIconBeforeUpload}
+                                            accept={'image/svg+xml'}
+                                        >
+                                            {formValues?.icon ? (
+                                                <img
+                                                    src={`data:image/svg+xml;base64,${formValues.icon}`}
+                                                    alt={'icon'}
+                                                    style={{ width: '100%' }}
+                                                />
+                                            ) : (
+                                                <Icon component={IconOxygenPlus} />
+                                            )}
+                                        </AntdUpload>
+                                    </AntdForm.Item>
+                                    <AntdForm.Item name={'icon'}>
+                                        <AntdInput />
+                                    </AntdForm.Item>
                                     <AntdForm.Item
                                         label={'名称'}
                                         name={'name'}