| 1 | /** |
| 2 | * PluginModal - 插件状态主弹框组件 |
| 3 | * 根据插件状态显示不同内容：未安装、未授权、已就绪 |
| 4 | */ |
| 5 | |
| 6 | 'use client' |
| 7 | |
| 8 | import type { PublishTask } from '@/store/plugin/types/baseTypes' |
| 9 | import { useState } from 'react' |
| 10 | import { useTranslation } from 'react-i18next' |
| 11 | import { Modal } from '@/components/ui/modal' |
| 12 | import { useIsMobile } from '@/hooks/useIsMobile' |
| 13 | import { usePluginStore } from '@/store/plugin' |
| 14 | import { PluginStatus } from '@/store/plugin/types/baseTypes' |
| 15 | import { PluginNoPermission } from './PluginNoPermission' |
| 16 | import { PluginNotInstalled } from './PluginNotInstalled' |
| 17 | import { PluginReady } from './PluginReady' |
| 18 | import { PublishDetailModal } from './PublishDetailModal' |
| 19 | |
| 20 | /** |
| 21 | * 组件属性 |
| 22 | */ |
| 23 | export interface PluginModalProps { |
| 24 | /** 是否显示 */ |
| 25 | visible: boolean |
| 26 | /** 关闭回调 */ |
| 27 | onClose: () => void |
| 28 | /** 需要高亮的平台 */ |
| 29 | highlightPlatform?: string | null |
| 30 | } |
| 31 | |
| 32 | /** |
| 33 | * 插件状态主弹框组件 |
| 34 | */ |
| 35 | export function PluginModal({ visible, onClose, highlightPlatform }: PluginModalProps) { |
| 36 | const { t } = useTranslation('plugin') |
| 37 | const status = usePluginStore(state => state.status) |
| 38 | const isMobile = useIsMobile() |
| 39 | |
| 40 | const [showDetail, setShowDetail] = useState(false) |
| 41 | const [selectedTask, setSelectedTask] = useState<PublishTask | null>(null) |
| 42 | |
| 43 | // 状态判断 |
| 44 | const isReady = status === PluginStatus.READY |
| 45 | const isInstalledNoPermission = status === PluginStatus.INSTALLED_NO_PERMISSION |
| 46 | const isNotInstalled = status === PluginStatus.NOT_INSTALLED || status === PluginStatus.UNKNOWN |
| 47 | |
| 48 | /** |
| 49 | * 获取弹框标题 |
| 50 | */ |
| 51 | const getModalTitle = () => { |
| 52 | if (isMobile) |
| 53 | return t('mobile.title') |
| 54 | if (isReady) |
| 55 | return t('status.ready') |
| 56 | if (isInstalledNoPermission) |
| 57 | return t('status.installedNoPermission') |
| 58 | return t('status.notInstalled') |
| 59 | } |
| 60 | |
| 61 | /** |
| 62 | * 获取弹框宽度 |
| 63 | */ |
| 64 | const getModalWidth = () => { |
| 65 | if (isMobile) |
| 66 | return 480 |
| 67 | return isReady ? 680 : 480 |
| 68 | } |
| 69 | |
| 70 | /** |
| 71 | * 处理查看任务详情 |
| 72 | */ |
| 73 | const handleViewDetail = (task: PublishTask) => { |
| 74 | setSelectedTask(task) |
| 75 | setShowDetail(true) |
| 76 | } |
| 77 | |
| 78 | /** |
| 79 | * 渲染内容 |
| 80 | */ |
| 81 | const renderContent = () => { |
| 82 | // 移动端：无论插件状态如何，都显示移动端提示 |
| 83 | if (isMobile) { |
| 84 | return <PluginNotInstalled /> |
| 85 | } |
| 86 | |
| 87 | if (isReady) { |
| 88 | return <PluginReady highlightPlatform={highlightPlatform} onViewDetail={handleViewDetail} /> |
| 89 | } |
| 90 | |
| 91 | if (isInstalledNoPermission) { |
| 92 | return <PluginNoPermission /> |
| 93 | } |
| 94 | |
| 95 | return <PluginNotInstalled /> |
| 96 | } |
| 97 | |
| 98 | return ( |
| 99 | <> |
| 100 | <Modal |
| 101 | open={visible} |
| 102 | onCancel={onClose} |
| 103 | title={getModalTitle()} |
| 104 | footer={null} |
| 105 | width={getModalWidth()} |
| 106 | centered |
| 107 | > |
| 108 | {renderContent()} |
| 109 | </Modal> |
| 110 | |
| 111 | {/* 发布详情弹框 */} |
| 112 | <PublishDetailModal |
| 113 | visible={showDetail} |
| 114 | onClose={() => { |
| 115 | setShowDetail(false) |
| 116 | setSelectedTask(null) |
| 117 | }} |
| 118 | task={selectedTask || undefined} |
| 119 | /> |
| 120 | </> |
| 121 | ) |
| 122 | } |
| 123 |