|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { Button, Flexbox, Icon } from '@lobehub/ui'; |
| 4 | +import { createStyles } from 'antd-style'; |
| 5 | +import { TriangleAlert, X } from 'lucide-react'; |
| 6 | +import { useState } from 'react'; |
| 7 | +import { useTranslation } from 'react-i18next'; |
| 8 | + |
| 9 | +import { MANUAL_UPGRADE_URL } from '@/const/url'; |
| 10 | +import { CURRENT_VERSION } from '@/const/version'; |
| 11 | +import { useElectronStore } from '@/store/electron'; |
| 12 | +import { electronSyncSelectors } from '@/store/electron/selectors'; |
| 13 | +import { useGlobalStore } from '@/store/global'; |
| 14 | + |
| 15 | +const useStyles = createStyles(({ css, token }) => ({ |
| 16 | + closeButton: css` |
| 17 | + cursor: pointer; |
| 18 | +
|
| 19 | + position: absolute; |
| 20 | + inset-block-start: 20px; |
| 21 | + inset-inline-end: 20px; |
| 22 | +
|
| 23 | + display: flex; |
| 24 | + align-items: center; |
| 25 | + justify-content: center; |
| 26 | +
|
| 27 | + width: 28px; |
| 28 | + height: 28px; |
| 29 | + border-radius: ${token.borderRadius}px; |
| 30 | +
|
| 31 | + color: ${token.colorTextSecondary}; |
| 32 | +
|
| 33 | + transition: all 0.2s; |
| 34 | +
|
| 35 | + &:hover { |
| 36 | + color: ${token.colorText}; |
| 37 | + background: ${token.colorFillSecondary}; |
| 38 | + } |
| 39 | + `, |
| 40 | + container: css` |
| 41 | + position: fixed; |
| 42 | + z-index: 9999; |
| 43 | + inset: 0; |
| 44 | +
|
| 45 | + display: flex; |
| 46 | + align-items: center; |
| 47 | + justify-content: center; |
| 48 | +
|
| 49 | + background: ${token.colorBgMask}; |
| 50 | + `, |
| 51 | + content: css` |
| 52 | + position: relative; |
| 53 | +
|
| 54 | + overflow: hidden; |
| 55 | +
|
| 56 | + max-width: 480px; |
| 57 | + padding: 24px; |
| 58 | + border: 1px solid ${token.yellowBorder}; |
| 59 | + border-radius: ${token.borderRadiusLG}px; |
| 60 | +
|
| 61 | + background: ${token.colorBgContainer}; |
| 62 | + box-shadow: ${token.boxShadowSecondary}; |
| 63 | + `, |
| 64 | + desc: css` |
| 65 | + line-height: 1.6; |
| 66 | + color: ${token.colorTextSecondary}; |
| 67 | + `, |
| 68 | + title: css` |
| 69 | + font-size: 16px; |
| 70 | + font-weight: bold; |
| 71 | + color: ${token.colorWarningText}; |
| 72 | + `, |
| 73 | + titleIcon: css` |
| 74 | + flex-shrink: 0; |
| 75 | + color: ${token.colorWarning}; |
| 76 | + `, |
| 77 | + warning: css` |
| 78 | + padding: 12px; |
| 79 | + border-radius: ${token.borderRadius}px; |
| 80 | + color: ${token.colorWarningText}; |
| 81 | + background: ${token.yellowBg}; |
| 82 | + `, |
| 83 | +})); |
| 84 | + |
| 85 | +const ServerVersionOutdatedAlert = () => { |
| 86 | + const { styles } = useStyles(); |
| 87 | + const { t } = useTranslation('common'); |
| 88 | + const [dismissed, setDismissed] = useState(false); |
| 89 | + const isServerVersionOutdated = useGlobalStore((s) => s.isServerVersionOutdated); |
| 90 | + const storageMode = useElectronStore(electronSyncSelectors.storageMode); |
| 91 | + |
| 92 | + // Only show alert when using self-hosted server, not cloud |
| 93 | + if (storageMode !== 'selfHost') return null; |
| 94 | + if (!isServerVersionOutdated || dismissed) return null; |
| 95 | + |
| 96 | + return ( |
| 97 | + <div className={styles.container}> |
| 98 | + <div className={styles.content}> |
| 99 | + <div className={styles.closeButton} onClick={() => setDismissed(true)}> |
| 100 | + <Icon icon={X} /> |
| 101 | + </div> |
| 102 | + |
| 103 | + <Flexbox gap={16}> |
| 104 | + <Flexbox align="center" gap={8} horizontal> |
| 105 | + <Icon className={styles.titleIcon} icon={TriangleAlert} /> |
| 106 | + <div className={styles.title}>{t('serverVersionOutdated.title')}</div> |
| 107 | + </Flexbox> |
| 108 | + |
| 109 | + <div className={styles.desc}> |
| 110 | + {t('serverVersionOutdated.desc', { version: CURRENT_VERSION })} |
| 111 | + </div> |
| 112 | + |
| 113 | + <div className={styles.warning}>{t('serverVersionOutdated.warning')}</div> |
| 114 | + |
| 115 | + <Flexbox gap={8} horizontal justify="flex-end" style={{ marginTop: 8 }}> |
| 116 | + <a href={MANUAL_UPGRADE_URL} rel="noreferrer" target="_blank"> |
| 117 | + <Button size="small" type="primary"> |
| 118 | + {t('serverVersionOutdated.upgrade')} |
| 119 | + </Button> |
| 120 | + </a> |
| 121 | + <Button onClick={() => setDismissed(true)} size="small"> |
| 122 | + {t('serverVersionOutdated.dismiss')} |
| 123 | + </Button> |
| 124 | + </Flexbox> |
| 125 | + </Flexbox> |
| 126 | + </div> |
| 127 | + </div> |
| 128 | + ); |
| 129 | +}; |
| 130 | + |
| 131 | +export default ServerVersionOutdatedAlert; |
0 commit comments