Feat: all - support multiple platforms

.env.development

@@ -1,3 +1,4 @@
-VITE_API_URL=http://localhost:8080
+VITE_PLATFORM=DESKTOP
+VITE_API_URL=${DEV_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
-VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

.env.production

@@ -1,3 +1,4 @@
+VITE_PLATFORM=DESKTOP
 VITE_API_URL=${PRODUCT_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
-VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

.env.testing

@@ -1,4 +1,5 @@
 NODE_ENV=development
+VITE_PLATFORM=DESKTOP
 VITE_API_URL=${TEST_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
-VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

src/renderer/src/assets/css/pages/system/tools/base.scss

@@ -19,7 +19,7 @@
     > *:nth-child(2) {
       position: sticky;
       top: 20px;
-      height: calc(100vh - 60px);
+      height: calc(100vh - 40px);
     }
 
     .close-editor-btn {

src/renderer/src/assets/css/pages/tools/create.scss

@@ -43,6 +43,18 @@
           }
         }
       }
+
+      .preview {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .no-preview {
+          font-weight: bolder;
+          color: constants.$font-secondary-color;
+          font-size: 1.4em;
+        }
+      }
     }
   }
 }

src/renderer/src/assets/css/pages/tools/index.scss

@@ -28,7 +28,7 @@
           position: absolute;
           top: 10px;
           left: 10px;
-          width: 8em;
+          width: 9em;
         }
 
         .upgrade-bt {

src/renderer/src/constants/urls.constants.ts

@@ -30,6 +30,7 @@ export const URL_SYS_STATISTICS_ACTIVE = `${URL_SYS_STATISTICS}/active`
 export const URL_SYS_TOOL = '/system/tool'
 export const URL_SYS_TOOL_CATEGORY = `${URL_SYS_TOOL}/category`
 export const URL_SYS_TOOL_BASE = `${URL_SYS_TOOL}/base`
+export const URL_SYS_TOOL_BASE_LIST = `${URL_SYS_TOOL_BASE}/list`
 export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
 
 export const URL_TOOL = '/tool'

src/renderer/src/global.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="vite/client" />
 /// <reference types="./ant-design" />
 
+type Platform = 'WEB' | 'DESKTOP' | 'ANDROID'
+
 interface ImportMetaEnv {
+    readonly VITE_PLATFORM: Platform
     readonly VITE_API_URL: string
     readonly VITE_API_TOKEN_URL: string
     readonly VITE_TURNSTILE_SITE_KEY: string
@@ -545,6 +548,7 @@ interface ToolBaseVo {
     name: string
     source: ToolDataVo
     dist: ToolDataVo
+    platform: Platform
     compiled: boolean
     createTime: string
     updateTime: string
@@ -555,6 +559,7 @@ interface ToolBaseAddEditParam {
     name?: string
     source?: string
     dist?: string
+    platform?: Platform
 }
 
 interface ToolTemplateVo {
@@ -562,6 +567,7 @@ interface ToolTemplateVo {
     name: string
     baseId: string
     source: ToolDataVo
+    platform: Platform
     entryPoint: string
     enable: boolean
     createTime: string
@@ -574,6 +580,7 @@ interface ToolTemplateAddEditParam {
     name?: string
     baseId?: string
     source?: string
+    platform?: Platform
     entryPoint?: string
     enable?: boolean
 }
@@ -583,6 +590,7 @@ interface ToolVo {
     name: string
     toolId: string
     icon: string
+    platform: Platform
     description: string
     base: ToolBaseVo
     author: UserWithInfoVo
@@ -602,6 +610,7 @@ interface ToolCreateParam {
     name: string
     toolId: string
     icon: string
+    platform: Platform
     description: string
     ver: string
     templateId: string
@@ -612,6 +621,7 @@ interface ToolCreateParam {
 interface ToolUpgradeParam {
     toolId: string
     ver: string
+    platform: Platform
 }
 
 interface ToolUpdateParam {

src/renderer/src/pages/System/Tools/Base.tsx

@@ -41,6 +41,17 @@ const Base = () => {
             currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
     )
     const [modal, contextHolder] = AntdModal.useModal()
+    const [tableParams, setTableParams] = useState<TableParam>({
+        pagination: {
+            current: 1,
+            pageSize: 20,
+            position: ['bottomCenter'],
+            showTotal: (total, range) =>
+                `第 ${
+                    range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
+                } 项 共 ${total} 项`
+        }
+    })
     const [form] = AntdForm.useForm<ToolBaseAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
     const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
@@ -62,6 +73,32 @@ const Base = () => {
     const [compiling, setCompiling] = useState(false)
     const [compileForm] = AntdForm.useForm<{ entryFileName: string }>()
 
+    const handleOnTableChange = (
+        pagination: _TablePaginationConfig,
+        filters: Record<string, _FilterValue | null>,
+        sorter: _SorterResult<ToolBaseVo> | _SorterResult<ToolBaseVo>[]
+    ) => {
+        pagination = { ...tableParams.pagination, ...pagination }
+        if (Array.isArray(sorter)) {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.map((value) => value.field).join(',')
+            })
+        } else {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.field,
+                sortOrder: sorter.order
+            })
+        }
+
+        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+            setBaseData([])
+        }
+    }
+
     useBeforeUnload(
         useCallback(
             (event) => {
@@ -78,8 +115,9 @@ const Base = () => {
     const handleOnAddBtnClick = () => {
         setIsDrawerEdit(false)
         setIsDrawerOpen(true)
-        form.setFieldValue('id', undefined)
+        form.setFieldValue('id', null)
         form.setFieldValue('name', newFormValues?.name)
+        form.setFieldValue('platform', newFormValues?.platform)
     }
 
     const baseColumns: _ColumnsType<ToolBaseVo> = [
@@ -91,6 +129,16 @@ const Base = () => {
                 </span>
             )
         },
+        {
+            title: '平台',
+            dataIndex: 'platform',
+            render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
+            filters: [
+                { text: 'Web', value: 'WEB' },
+                { text: 'Desktop', value: 'DESKTOP' },
+                { text: 'Android', value: 'ANDROID' }
+            ]
+        },
         {
             title: '创建时间',
             dataIndex: 'createTime',
@@ -371,6 +419,7 @@ const Base = () => {
             setIsDrawerOpen(true)
             form.setFieldValue('id', value.id)
             form.setFieldValue('name', value.name)
+            form.setFieldValue('platform', value.platform)
             void form.validateFields()
         }
     }
@@ -478,11 +527,28 @@ const Base = () => {
         }
         setIsLoading(true)
 
-        void r_sys_tool_base_get()
+        void r_sys_tool_base_get({
+            currentPage: tableParams.pagination?.current,
+            pageSize: tableParams.pagination?.pageSize,
+            sortField:
+                tableParams.sortField && tableParams.sortOrder
+                    ? (tableParams.sortField as string)
+                    : undefined,
+            sortOrder:
+                tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            ...tableParams.filters
+        })
             .then((res) => {
                 const response = res.data
                 if (response.code === DATABASE_SELECT_SUCCESS) {
-                    setBaseData(response.data!)
+                    setBaseData(response.data!.records)
+                    setTableParams({
+                        ...tableParams,
+                        pagination: {
+                            ...tableParams.pagination,
+                            total: response.data!.total
+                        }
+                    })
                 } else {
                     void message.error('获取失败，请稍后重试')
                 }
@@ -940,14 +1006,21 @@ const Base = () => {
 
         if (!isDrawerEdit && formValues) {
             setNewFormValues({
-                name: formValues.name
+                name: formValues.name,
+                platform: formValues.platform
             })
         }
     }, [formValues])
 
     useEffect(() => {
         getBase()
-    }, [])
+    }, [
+        JSON.stringify(tableParams.filters),
+        JSON.stringify(tableParams.sortField),
+        JSON.stringify(tableParams.sortOrder),
+        JSON.stringify(tableParams.pagination?.pageSize),
+        JSON.stringify(tableParams.pagination?.current)
+    ])
 
     const drawerToolbar = (
         <AntdSpace>
@@ -977,6 +1050,18 @@ const Base = () => {
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
+            <AntdForm.Item
+                name={'platform'}
+                label={'平台'}
+                rules={[{ required: true }]}
+                hidden={isDrawerEdit}
+            >
+                <AntdSelect>
+                    <AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
+                    <AntdSelect.Option key={'DESKTOP'}>Desktop</AntdSelect.Option>
+                    <AntdSelect.Option key={'ANDROID'}>Android</AntdSelect.Option>
+                </AntdSelect>
+            </AntdForm.Item>
         </AntdForm>
     )
 
@@ -990,12 +1075,13 @@ const Base = () => {
                                 dataSource={baseData}
                                 columns={baseColumns}
                                 rowKey={(record) => record.id}
+                                pagination={tableParams.pagination}
                                 loading={isLoading}
-                                pagination={false}
                                 expandable={{
                                     expandedRowRender,
                                     onExpand: handleOnExpand
                                 }}
+                                onChange={handleOnTableChange}
                             />
                         </Card>
                         {editingFileName && (

src/renderer/src/pages/System/Tools/Code.tsx

@@ -2,6 +2,7 @@ import Draggable from 'react-draggable'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/tools/code.scss'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { checkDesktop } from '@/util/common'
 import { r_sys_tool_get_one } from '@/services/system'
 import { IFiles } from '@/components/Playground/shared'
 import { base64ToFiles } from '@/components/Playground/files'
@@ -15,15 +16,21 @@ const Code = () => {
     const [loading, setLoading] = useState(false)
     const [files, setFiles] = useState<IFiles>({})
     const [selectedFileName, setSelectedFileName] = useState('')
+    const [platform, setPlatform] = useState<Platform>('WEB')
 
     const handleOnRunTool = () => {
-        navigate(`/system/tools/execute/${id}`)
+        if (checkDesktop() || platform !== 'DESKTOP') {
+            navigate(`/system/tools/execute/${id}`)
+        } else {
+            void message.warning('此应用需要桌面端环境，请在桌面端运行')
+        }
     }
 
     const render = (toolVo: ToolVo) => {
         try {
             setFiles(base64ToFiles(toolVo.source.data!))
             setSelectedFileName(toolVo.entryPoint)
+            setPlatform(toolVo.platform)
         } catch (e) {
             void message.error('载入工具失败')
         }
@@ -46,7 +53,7 @@ const Code = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:

src/renderer/src/pages/System/Tools/Execute.tsx

@@ -51,7 +51,7 @@ const Execute = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:

src/renderer/src/pages/System/Tools/Template.tsx

@@ -16,7 +16,7 @@ import {
     r_sys_tool_template_add,
     r_sys_tool_template_get,
     r_sys_tool_template_get_one,
-    r_sys_tool_base_get
+    r_sys_tool_base_get_list
 } from '@/services/system'
 import { IFile, IFiles, ITsconfig } from '@/components/Playground/shared'
 import {
@@ -39,6 +39,17 @@ const Template = () => {
             currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
     )
     const [modal, contextHolder] = AntdModal.useModal()
+    const [tableParams, setTableParams] = useState<TableParam>({
+        pagination: {
+            current: 1,
+            pageSize: 20,
+            position: ['bottomCenter'],
+            showTotal: (total, range) =>
+                `第 ${
+                    range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
+                } 项 共 ${total} 项`
+        }
+    })
     const [form] = AntdForm.useForm<ToolTemplateAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
     const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
@@ -60,6 +71,32 @@ const Template = () => {
     const [templateDetailLoading, setTemplateDetailLoading] = useState<Record<string, boolean>>({})
     const [tsconfig, setTsconfig] = useState<ITsconfig>()
 
+    const handleOnTableChange = (
+        pagination: _TablePaginationConfig,
+        filters: Record<string, _FilterValue | null>,
+        sorter: _SorterResult<ToolTemplateVo> | _SorterResult<ToolTemplateVo>[]
+    ) => {
+        pagination = { ...tableParams.pagination, ...pagination }
+        if (Array.isArray(sorter)) {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.map((value) => value.field).join(',')
+            })
+        } else {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.field,
+                sortOrder: sorter.order
+            })
+        }
+
+        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+            setBaseData([])
+        }
+    }
+
     useBeforeUnload(
         useCallback(
             (event) => {
@@ -95,6 +132,16 @@ const Template = () => {
                 </span>
             )
         },
+        {
+            title: '平台',
+            dataIndex: 'platform',
+            render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
+            filters: [
+                { text: 'Web', value: 'WEB' },
+                { text: 'Desktop', value: 'DESKTOP' },
+                { text: 'Android', value: 'ANDROID' }
+            ]
+        },
         {
             title: '基板',
             dataIndex: ['base', 'name']
@@ -264,9 +311,6 @@ const Template = () => {
         }
     }
 
-    const filterOption = (input: string, option?: { label: string; value: string }) =>
-        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
-
     const handleOnSubmit = () => {
         if (isSubmitting) {
             return
@@ -294,7 +338,12 @@ const Template = () => {
                     setIsSubmitting(false)
                 })
         } else {
-            void r_sys_tool_template_add(formValues)
+            void r_sys_tool_template_add({
+                ...formValues,
+                baseId: formValues.baseId
+                    ? (formValues.baseId as unknown as string[])[1]
+                    : undefined
+            })
                 .then((res) => {
                     const response = res.data
                     switch (response.code) {
@@ -331,11 +380,28 @@ const Template = () => {
         }
         setIsLoading(true)
 
-        void r_sys_tool_template_get()
+        void r_sys_tool_template_get({
+            currentPage: tableParams.pagination?.current,
+            pageSize: tableParams.pagination?.pageSize,
+            sortField:
+                tableParams.sortField && tableParams.sortOrder
+                    ? (tableParams.sortField as string)
+                    : undefined,
+            sortOrder:
+                tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            ...tableParams.filters
+        })
             .then((res) => {
                 const response = res.data
                 if (response.code === DATABASE_SELECT_SUCCESS) {
-                    setTemplateData(response.data!)
+                    setTemplateData(response.data!.records)
+                    setTableParams({
+                        ...tableParams,
+                        pagination: {
+                            ...tableParams.pagination,
+                            total: response.data!.total
+                        }
+                    })
                 } else {
                     void message.error('获取失败，请稍后重试')
                 }
@@ -786,7 +852,7 @@ const Template = () => {
         }
         setIsLoadingBaseData(true)
 
-        void r_sys_tool_base_get()
+        void r_sys_tool_base_get_list()
             .then((res) => {
                 const response = res.data
                 switch (response.code) {
@@ -831,9 +897,64 @@ const Template = () => {
         }
     }, [formValues])
 
+    const baseDataGroupByPlatform = () => {
+        interface Node {
+            label: string
+            value: string
+            children?: Node[]
+        }
+        const temp: Node[] = []
+        baseData.forEach((value) => {
+            if (!temp.length) {
+                temp.push({
+                    label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
+                    value: value.platform,
+                    children: [
+                        {
+                            label: value.name,
+                            value: value.id
+                        }
+                    ]
+                })
+            } else {
+                if (
+                    !temp.some((platform, platformIndex) => {
+                        if (platform.value === value.platform) {
+                            temp[platformIndex].children!.push({
+                                label: value.name,
+                                value: value.id
+                            })
+                            return true
+                        }
+                        return false
+                    })
+                ) {
+                    temp.push({
+                        label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
+                        value: value.platform,
+                        children: [
+                            {
+                                label: value.name,
+                                value: value.id
+                            }
+                        ]
+                    })
+                }
+            }
+        })
+
+        return temp
+    }
+
     useEffect(() => {
         getTemplate()
-    }, [])
+    }, [
+        JSON.stringify(tableParams.filters),
+        JSON.stringify(tableParams.sortField),
+        JSON.stringify(tableParams.sortOrder),
+        JSON.stringify(tableParams.pagination?.pageSize),
+        JSON.stringify(tableParams.pagination?.current)
+    ])
 
     const drawerToolbar = (
         <AntdSpace>
@@ -868,15 +989,13 @@ const Template = () => {
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
-            <AntdForm.Item name={'baseId'} label={'基板'} rules={[{ required: true }]}>
+            <AntdForm.Item
-                <AntdSelect
+                hidden={isDrawerEdit}
-                    showSearch
+                name={'baseId'}
-                    filterOption={filterOption}
+                label={'基板'}
-                    options={baseData.map((value) => ({
+                rules={[{ required: true }]}
-                        value: value.id,
+            >
-                        label: value.name
+                <AntdCascader showSearch allowClear={false} options={baseDataGroupByPlatform()} />
-                    }))}
-                />
             </AntdForm.Item>
             <AntdForm.Item name={'entryPoint'} label={'入口'} rules={[{ required: true }]}>
                 <AntdInput allowClear />
@@ -897,13 +1016,14 @@ const Template = () => {
                                 dataSource={templateData}
                                 columns={templateColumns}
                                 rowKey={(record) => record.id}
+                                pagination={tableParams.pagination}
                                 loading={isLoading}
-                                pagination={false}
                                 scroll={{ x: true }}
                                 expandable={{
                                     expandedRowRender,
                                     onExpand: handleOnExpand
                                 }}
+                                onChange={handleOnTableChange}
                             />
                         </Card>
                         {editingFileName && (

src/renderer/src/pages/System/Tools/index.tsx

@@ -75,6 +75,16 @@ const Tools = () => {
         },
         { dataIndex: 'toolId', title: '工具 ID' },
         { dataIndex: 'ver', title: '版本' },
+        {
+            title: '平台',
+            dataIndex: 'platform',
+            render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
+            filters: [
+                { text: 'Web', value: 'WEB' },
+                { text: 'Desktop', value: 'DESKTOP' },
+                { text: 'Android', value: 'ANDROID' }
+            ]
+        },
         {
             title: '作者',
             render: (_, record) => `${record.author.userInfo.nickname}(${record.author.username})`
@@ -381,7 +391,7 @@ const Tools = () => {
                 .confirm({
                     title: '确定删除',
                     maskClosable: true,
-                    content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？`
+                    content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}:${value.ver} 吗？`
                 })
                 .then(
                     (confirmed) => {

src/renderer/src/pages/Tools/Create.tsx

@@ -42,9 +42,11 @@ const Create = () => {
                 switch (response.code) {
                     case DATABASE_INSERT_SUCCESS:
                         void message.success(
-                            `创建工具 ${response.data!.name}<${response.data!.toolId}>:${response.data!.ver} 成功`
+                            `创建工具 ${response.data!.name}<${response.data!.toolId}:${response.data!.platform.slice(0, 1)}${response.data!.platform.slice(1).toLowerCase()}:${response.data!.ver}> 成功`
+                        )
+                        navigate(
+                            `/edit/${response.data!.toolId}${response.data!.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${response.data!.platform}` : ''}`
                         )
-                        navigate(`/edit/${response.data!.toolId}`)
                         break
                     case DATABASE_DUPLICATE_KEY:
                         void message.warning('已存在相同 ID 的应用')
@@ -82,6 +84,30 @@ const Create = () => {
         return false
     }
 
+    const handleOnPlatformChange = (value: string) => {
+        setLoadingTemplate(true)
+        void r_tool_template_get({
+            platform: value
+        })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setTemplateData(response.data!)
+                        response.data?.length
+                            ? form.setFieldValue('templateId', response.data?.[0].id)
+                            : form.setFieldValue('templateId', null)
+                        response.data?.length && handleOnTemplateChange(response.data?.[0].id)
+                        break
+                    default:
+                        void message.error('获取模板列表失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoadingTemplate(false)
+            })
+    }
+
     const handleOnTemplateChange = (value: string) => {
         setPreviewTemplate(value)
         if (templateDetailData[value]) {
@@ -110,6 +136,7 @@ const Create = () => {
         if (!template) {
             return
         }
+        setCompiledCode('')
         try {
             const baseDist = base64ToStr(template.base.dist.data!)
             const files = base64ToFiles(template.source.data!)
@@ -123,6 +150,7 @@ const Create = () => {
                 })
                 .catch((reason) => {
                     void message.error(`编译失败：${reason}`)
+                    setCompiledCode(baseDist)
                 })
         } catch (e) {
             void message.error(`载入模板 ${templateDetailData[previewTemplate].name} 失败`)
@@ -140,22 +168,7 @@ const Create = () => {
     }, [form, formValues?.keywords])
 
     useEffect(() => {
-        setLoadingTemplate(true)
         setLoadingCategory(true)
-        void r_tool_template_get()
-            .then((res) => {
-                const response = res.data
-                switch (response.code) {
-                    case DATABASE_SELECT_SUCCESS:
-                        setTemplateData(response.data!)
-                        break
-                    default:
-                        void message.error('获取模板列表失败，请稍后重试')
-                }
-            })
-            .finally(() => {
-                setLoadingTemplate(false)
-            })
         void r_tool_category_get()
             .then((res) => {
                 const response = res.data
@@ -254,6 +267,24 @@ const Create = () => {
                                             placeholder={'请输入工具 ID'}
                                         />
                                     </AntdForm.Item>
+                                    <AntdForm.Item
+                                        label={'平台'}
+                                        name={'platform'}
+                                        rules={[{ required: true }]}
+                                    >
+                                        <AntdSelect
+                                            placeholder={'请选择平台'}
+                                            onChange={handleOnPlatformChange}
+                                        >
+                                            <AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
+                                            <AntdSelect.Option key={'DESKTOP'}>
+                                                Desktop
+                                            </AntdSelect.Option>
+                                            <AntdSelect.Option key={'ANDROID'}>
+                                                Android
+                                            </AntdSelect.Option>
+                                        </AntdSelect>
+                                    </AntdForm.Item>
                                     <AntdForm.Item label={'简介'} name={'description'}>
                                         <AntdInput.TextArea
                                             autoSize={{ minRows: 6, maxRows: 6 }}
@@ -344,11 +375,13 @@ const Create = () => {
                         <FlexBox>预览</FlexBox>
                     </Card>
                     <Card className={'preview'}>
-                        {compiledCode && (
+                        {compiledCode ? (
                             <Playground.Output.Preview.Render
                                 iframeKey={previewTemplate}
                                 compiledCode={compiledCode}
                             />
+                        ) : (
+                            <span className={'no-preview'}>暂无预览</span>
                         )}
                     </Card>
                 </FlexBox>

src/renderer/src/pages/Tools/Edit.tsx

@@ -26,6 +26,9 @@ import Card from '@/components/common/Card'
 const Edit = () => {
     const navigate = useNavigate()
     const { toolId } = useParams()
+    const [searchParams] = useSearchParams({
+        platform: import.meta.env.VITE_PLATFORM
+    })
     const [form] = AntdForm.useForm<ToolUpdateParam>()
     const formValues = AntdForm.useWatch([], form)
     const [loading, setLoading] = useState(false)
@@ -98,13 +101,13 @@ const Edit = () => {
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
@@ -164,13 +167,13 @@ const Edit = () => {
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
@@ -211,7 +214,7 @@ const Edit = () => {
         setLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
-        void r_tool_detail('!', toolId!, 'latest')
+        void r_tool_detail('!', toolId!, 'latest', searchParams.get('platform') as Platform)
             .then((res) => {
                 const response = res.data
                 switch (response.code) {
@@ -225,20 +228,20 @@ const Edit = () => {
                             case 'PROCESSING':
                                 void message.warning('工具审核中，请勿修改')
                                 setTimeout(() => {
-                                    navigate(-1)
+                                    navigate('/')
                                 }, 3000)
                                 break
                             default:
                                 void message.warning('请先创建新版本后编辑工具')
                                 setTimeout(() => {
-                                    navigate(-1)
+                                    navigate('/')
                                 }, 3000)
                         }
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
@@ -301,6 +304,10 @@ const Edit = () => {
     }, [formValues])
 
     useEffect(() => {
+        if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
+            navigate('/')
+            return
+        }
         getTool()
     }, [])
 

src/renderer/src/pages/Tools/Source.tsx

@@ -11,6 +11,9 @@ import { getLoginStatus } from '@/util/auth'
 const Source = () => {
     const navigate = useNavigate()
     const { username, toolId, ver } = useParams()
+    const [searchParams] = useSearchParams({
+        platform: import.meta.env.VITE_PLATFORM
+    })
     const [loading, setLoading] = useState(false)
     const [files, setFiles] = useState<IFiles>({})
     const [selectedFileName, setSelectedFileName] = useState('')
@@ -31,7 +34,12 @@ const Source = () => {
         setLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
-        void r_tool_detail(username!, toolId!, ver || 'latest')
+        void r_tool_detail(
+            username!,
+            toolId!,
+            ver || 'latest',
+            searchParams.get('platform') as Platform
+        )
             .then((res) => {
                 const response = res.data
                 switch (response.code) {
@@ -41,7 +49,7 @@ const Source = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
@@ -57,7 +65,7 @@ const Source = () => {
     useEffect(() => {
         if (username === '!' && !getLoginStatus()) {
             setTimeout(() => {
-                navigate(-1)
+                navigate('/')
             }, 3000)
             return
         }
@@ -69,6 +77,10 @@ const Source = () => {
             navigate(`/source/!/${toolId}/latest`)
             return
         }
+        if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
+            navigate('/')
+            return
+        }
         getTool()
     }, [])
 

src/renderer/src/pages/Tools/User.tsx

@@ -159,7 +159,7 @@ const User = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.warning('用户不存在')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:

src/renderer/src/pages/Tools/View.tsx

@@ -12,6 +12,9 @@ import Card from '@/components/common/Card'
 const View = () => {
     const navigate = useNavigate()
     const { username, toolId, ver } = useParams()
+    const [searchParams] = useSearchParams({
+        platform: import.meta.env.VITE_PLATFORM
+    })
     const [loading, setLoading] = useState(false)
     const [compiledCode, setCompiledCode] = useState('')
 
@@ -52,7 +55,12 @@ const View = () => {
         setLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
-        void r_tool_detail(username!, toolId!, ver || 'latest')
+        void r_tool_detail(
+            username!,
+            toolId!,
+            ver || 'latest',
+            searchParams.get('platform') as Platform
+        )
             .then((res) => {
                 const response = res.data
                 switch (response.code) {
@@ -62,7 +70,7 @@ const View = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
@@ -78,7 +86,7 @@ const View = () => {
     useEffect(() => {
         if (username === '!' && !getLoginStatus()) {
             setTimeout(() => {
-                navigate(-1)
+                navigate('/')
             }, 3000)
             return
         }
@@ -90,6 +98,10 @@ const View = () => {
             navigate(`/view/!/${toolId}/latest`)
             return
         }
+        if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
+            navigate('/')
+            return
+        }
         getTool()
     }, [])
 

src/renderer/src/pages/Tools/index.tsx

@@ -14,6 +14,7 @@ import {
     TOOL_SUBMIT_SUCCESS,
     TOOL_UNDER_REVIEW
 } from '@/constants/common.constants'
+import { checkDesktop } from '@/util/common'
 import { getLoginStatus } from '@/util/auth'
 import {
     r_tool_cancel,
@@ -138,18 +139,30 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
     const navigate = useNavigate()
     const [selectedTool, setSelectedTool] = useState(tools[0])
 
-    const handleOnVersionChange = (value: string) => {
+    const handleOnVersionChange = (value: (string | number)[]) => {
-        setSelectedTool(tools.find((item) => item.id === value)!)
+        setSelectedTool(tools.find((item) => item.id === value[1])!)
     }
 
     const handleOnOpenTool = () => {
-        navigate(`/view/!/${selectedTool.toolId}/${selectedTool.ver}`)
+        if (checkDesktop() || selectedTool.platform !== 'DESKTOP') {
+            navigate(
+                `/view/!/${selectedTool.toolId}/${selectedTool.ver}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
+            )
+        } else {
+            void message.warning('此应用需要桌面端环境，请在桌面端打开')
+        }
     }
 
     const handleOnEditTool = () => {
         if (['NONE', 'REJECT'].includes(selectedTool.review)) {
             return () => {
-                navigate(`/edit/${tools[0].toolId}`)
+                if (checkDesktop() || selectedTool.platform !== 'DESKTOP') {
+                    navigate(
+                        `/edit/${selectedTool.toolId}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
+                    )
+                } else {
+                    void message.warning('此应用需要桌面端环境，请在桌面端编辑')
+                }
             }
         }
         return undefined
@@ -158,7 +171,9 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
     const handleOnSourceTool = () => {
         if (selectedTool.review === 'PASS') {
             return () => {
-                navigate(`/source/!/${selectedTool.toolId}/${selectedTool.ver}`)
+                navigate(
+                    `/source/!/${selectedTool.toolId}/${selectedTool.ver}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
+                )
             }
         }
         return undefined
@@ -190,6 +205,55 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
         onUpgrade?.(selectedTool)
     }
 
+    const toolsGroupByPlatform = (tools: ToolVo[]) => {
+        interface Node {
+            label: string
+            value: string
+            children?: Node[]
+        }
+        const temp: Node[] = []
+        tools.forEach((value) => {
+            if (!temp.length) {
+                temp.push({
+                    label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
+                    value: value.platform,
+                    children: [
+                        {
+                            label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
+                            value: value.id
+                        }
+                    ]
+                })
+            } else {
+                if (
+                    !temp.some((platform, platformIndex) => {
+                        if (platform.value === value.platform) {
+                            temp[platformIndex].children!.push({
+                                label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
+                                value: value.id
+                            })
+                            return true
+                        }
+                        return false
+                    })
+                ) {
+                    temp.push({
+                        label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
+                        value: value.platform,
+                        children: [
+                            {
+                                label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
+                                value: value.id
+                            }
+                        ]
+                    })
+                }
+            }
+        })
+
+        return temp
+    }
+
     return (
         <CommonCard
             icon={<img src={`data:image/svg+xml;base64,${selectedTool.icon}`} alt={'Icon'} />}
@@ -202,15 +266,17 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
             onCancelReview={handleOnCancelReview()}
             onDelete={handleOnDeleteTool}
         >
-            <AntdSelect
+            <AntdCascader
                 className={'version-select'}
                 size={'small'}
-                value={selectedTool.id}
+                allowClear={false}
+                value={[
+                    tools.find((value) => value.id === selectedTool.id)!.platform,
+                    selectedTool.id
+                ]}
+                displayRender={(label: string[]) => `${label[0].slice(0, 1)}-${label[1]}`}
                 onChange={handleOnVersionChange}
-                options={tools.map((value) => ({
+                options={toolsGroupByPlatform(tools)}
-                    value: value.id,
-                    label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`
-                }))}
             />
             {tools.every((value) => value.review === 'PASS') && (
                 <AntdTooltip title={'更新'}>
@@ -237,7 +303,7 @@ const Tools = () => {
             .confirm({
                 title: '删除',
                 maskClosable: true,
-                content: `确定删除工具 ${tool.name}:${tool.ver} 吗？`
+                content: `确定删除工具 ${tool.toolId}:${tool.platform.slice(0, 1)}${tool.platform.slice(1).toLowerCase()}:${tool.ver} 吗？`
             })
             .then(
                 (confirmed) => {
@@ -313,14 +379,22 @@ const Tools = () => {
                     () => {
                         return new Promise<void>((resolve, reject) => {
                             void r_tool_upgrade({
-                                toolId: upgradeForm.getFieldValue('toolId') as string,
+                                toolId: tool.toolId,
-                                ver: upgradeForm.getFieldValue('ver') as string
+                                ver: upgradeForm.getFieldValue('ver') as string,
+                                platform: tool.platform
                             }).then((res) => {
                                 const response = res.data
                                 switch (response.code) {
                                     case DATABASE_UPDATE_SUCCESS:
                                         void message.success('创建新版本成功')
-                                        navigate(`/edit/${response.data!.toolId}`)
+                                        if (
+                                            checkDesktop() ||
+                                            response.data!.platform !== 'DESKTOP'
+                                        ) {
+                                            navigate(
+                                                `/edit/${response.data!.toolId}${response.data!.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${response.data!.platform}` : ''}`
+                                            )
+                                        }
                                         resolve()
                                         break
                                     case TOOL_ILLEGAL_VERSION:

src/renderer/src/services/system.tsx

@@ -21,7 +21,8 @@ import {
     URL_SYS_TOOL_BASE,
     URL_SYS_TOOL_TEMPLATE,
     URL_SYS_TOOL,
-    URL_SYS_SETTINGS_TWO_FACTOR
+    URL_SYS_SETTINGS_TWO_FACTOR,
+    URL_SYS_TOOL_BASE_LIST
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -145,7 +146,10 @@ export const r_sys_tool_category_update = (param: ToolCategoryAddEditParam) =>
 export const r_sys_tool_category_delete = (id: string) =>
     request.delete(`${URL_SYS_TOOL_CATEGORY}/${id}`)
 
-export const r_sys_tool_base_get = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE)
+export const r_sys_tool_base_get = (param: PageParam) =>
+    request.get<PageVo<ToolBaseVo>>(URL_SYS_TOOL_BASE, param)
+
+export const r_sys_tool_base_get_list = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE_LIST)
 
 export const r_sys_tool_base_get_one = (id: string) =>
     request.get<ToolBaseVo>(`${URL_SYS_TOOL_BASE}/${id}`)
@@ -158,7 +162,8 @@ export const r_sys_tool_base_update = (param: ToolBaseAddEditParam) =>
 
 export const r_sys_tool_base_delete = (id: string) => request.delete(`${URL_SYS_TOOL_BASE}/${id}`)
 
-export const r_sys_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_SYS_TOOL_TEMPLATE)
+export const r_sys_tool_template_get = (param: PageParam) =>
+    request.get<PageVo<ToolTemplateVo>>(URL_SYS_TOOL_TEMPLATE, param)
 
 export const r_sys_tool_template_get_one = (id: string) =>
     request.get<ToolTemplateVo>(`${URL_SYS_TOOL_TEMPLATE}/${id}`)

src/renderer/src/services/tool.tsx

@@ -7,7 +7,8 @@ import {
     URL_TOOL_TEMPLATE
 } from '@/constants/urls.constants'
 
-export const r_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_TOOL_TEMPLATE)
+export const r_tool_template_get = (param: { platform: string }) =>
+    request.get<ToolTemplateVo[]>(URL_TOOL_TEMPLATE, param)
 
 export const r_tool_template_get_one = (id: string) =>
     request.get<ToolTemplateVo>(`${URL_TOOL_TEMPLATE}/${id}`)
@@ -20,8 +21,8 @@ export const r_tool_upgrade = (param: ToolUpgradeParam) => request.patch<ToolVo>
 
 export const r_tool_get = () => request.get<ToolVo[]>(URL_TOOL)
 
-export const r_tool_detail = (username: string, toolId: string, ver: string) =>
+export const r_tool_detail = (username: string, toolId: string, ver: string, platform: Platform) =>
-    request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`)
+    request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`, { platform })
 
 export const r_tool_update = (param: ToolUpdateParam) => request.put<ToolVo>(URL_TOOL, param)
 

src/renderer/src/util/common.tsx

@@ -118,7 +118,7 @@ export const formatByteSize = (byteSize: number): string => {
 }
 
 const formatByte = (size: number, unit: ByteUnit): string => {
-    let precision
+    let precision: number
     if ((size * 1000) % 10 > 0) {
         precision = 3
     } else if ((size * 100) % 10 > 0) {
@@ -131,3 +131,5 @@ const formatByte = (size: number, unit: ByteUnit): string => {
 
     return `${size.toFixed(precision)}${unit}`
 }
+
+export const checkDesktop = () => import.meta.env.VITE_PLATFORM === 'DESKTOP'