ele-HeiXiu/src/pages/settings/blocks/UpdateSetting.tsx

// ============================================================
// UpdateSetting — 版本更新区块
// ============================================================

import { useState } from 'react';
import { Card, Button, Typography, Progress, Tag, Modal, Divider } from 'antd';
import {
   SyncOutlined,
   CheckCircleOutlined,
   ExclamationCircleOutlined,
   RocketOutlined,
   DownloadOutlined,
   FileTextOutlined,
} from '@ant-design/icons';
import { useUpdater } from '@/hooks/use-updater';
import { isDev } from '@/utils/platform';

const { Text, Title } = Typography;

/** 简单渲染 changelog（Markdown → JSX），支持 ## / -  / --- */
function renderChangelog(markdown: string) {
   const lines = markdown.split('\n');
   const elements: React.ReactNode[] = [];

   for (let i = 0; i < lines.length; i++) {
      const line = lines[i];
      const key = `cl-${i}`;

      if (line.startsWith('## ')) {
         elements.push(
            <Title key={key} level={5} className="!mt-3! !mb-1!">
               {line.slice(3)}
            </Title>,
         );
         continue;
      }

      if (/^-{3,}$/.test(line.trim())) {
         elements.push(<Divider key={key} className="!my-2!" />);
         continue;
      }

      if (line.trim().startsWith('- ')) {
         elements.push(
            <Text key={key} className="block pl-3 text-sm leading-relaxed">
               • {line.trim().slice(2)}
            </Text>,
         );
         continue;
      }

      if (line.trim() === '') {
         elements.push(<div key={key} className="h-2" />);
         continue;
      }

      elements.push(
         <Text key={key} className="block text-sm leading-relaxed">
            {line}
         </Text>,
      );
   }

   return elements.length > 0 ? elements : <Text type="secondary">暂无更新详情</Text>;
}

export function UpdateSetting() {
   const { status, info, progress, error, checkForUpdates, downloadUpdate, installUpdate } =
      useUpdater();

   const [detailOpen, setDetailOpen] = useState(false);

   return (
      <Card size="small" title="版本更新" className="rounded-md!">
         <div className="flex flex-col gap-3">
            {/* ---- idle ---- */}
            {status === 'idle' && (
               <Text type="secondary" className="text-sm">
                  点击下方按钮检查是否有新版本
               </Text>
            )}

            {/* ---- checking ---- */}
            {status === 'checking' && (
               <div className="flex items-center gap-2">
                  <SyncOutlined spin style={{ color: 'var(--color-primary, #4F46E5)' }} />
                  <Text type="secondary">正在检查更新...</Text>
               </div>
            )}

            {/* ---- no-update ---- */}
            {status === 'no-update' && (
               <div className="flex items-center gap-2">
                  <CheckCircleOutlined style={{ color: 'var(--color-success, #52c41a)' }} />
                  <Text style={{ color: 'var(--color-success, #52c41a)' }}>已是最新版本</Text>
               </div>
            )}

            {/* ---- error ---- */}
            {status === 'error' && (
               <div className="flex items-center gap-2">
                  <ExclamationCircleOutlined style={{ color: 'var(--color-error, #ff4d4f)' }} />
                  <Text type="danger">{error?.message || '检查更新失败'}</Text>
               </div>
            )}

            {/* ---- 发现新版本（等待用户决定）---- */}
            {status === 'available' && (
               <>
                  <div className="flex items-center gap-2">
                     <RocketOutlined style={{ color: 'var(--color-primary, #4F46E5)' }} />
                     <Text strong>发现新版本：{info?.version}</Text>
                     {info?.forceUpdate && <Tag color="red">强制更新</Tag>}
                  </div>
                  {info?.releaseNotes && (
                     <div className="flex items-start gap-2">
                        <Text
                           type="secondary"
                           className="text-xs whitespace-pre-line line-clamp-2 flex-1"
                        >
                           {info.releaseNotes
                              .replace(/^## .+?\n\n?/, '')
                              .replace(/\n---\n?[\s\S]*$/, '')
                              .trim()}
                        </Text>
                        <Button
                           type="link"
                           size="small"
                           icon={<FileTextOutlined />}
                           onClick={() => setDetailOpen(true)}
                           className="!px-1! flex-shrink-0"
                        >
                           查看详情
                        </Button>
                     </div>
                  )}
                  <Button
                     type="primary"
                     size="small"
                     icon={<DownloadOutlined />}
                     onClick={downloadUpdate}
                     className="self-start"
                  >
                     下载更新
                  </Button>
               </>
            )}

            {/* ---- 下载中 ---- */}
            {status === 'downloading' && (
               <>
                  <div className="flex items-center gap-2">
                     <DownloadOutlined style={{ color: 'var(--color-primary, #4F46E5)' }} />
                     <Text>正在下载 v{info?.version}...</Text>
                  </div>
                  <Progress
                     percent={progress.percent}
                     strokeColor={{ '0%': '#4F46E5', '100%': '#7C3AED' }}
                     size="small"
                  />
               </>
            )}

            {/* ---- 下载完成 ---- */}
            {status === 'downloaded' && (
               <>
                  <div className="flex items-center gap-2">
                     <CheckCircleOutlined style={{ color: 'var(--color-success, #52c41a)' }} />
                     <Text>更新已下载完毕，点击安装并重启</Text>
                  </div>
                  <Button
                     type="primary"
                     icon={<DownloadOutlined />}
                     onClick={installUpdate}
                     size="small"
                     className="self-start"
                  >
                     安装更新
                  </Button>
               </>
            )}

            {/* ---- 操作按钮 ---- */}
            <div className="flex items-center gap-3">
               <Button
                  size="small"
                  icon={<SyncOutlined spin={status === 'checking'} />}
                  onClick={checkForUpdates}
                  disabled={status === 'checking' || status === 'downloading'}
               >
                  检查更新
               </Button>
               {isDev() && (
                  <Text type="secondary" className="text-xs">
                     生产环境启动 5 秒后自动检查
                  </Text>
               )}
            </div>
         </div>

         {/* ---- 更新详情弹窗 ---- */}
         <Modal
            title={`更新详情 — v${info?.version || ''}`}
            open={detailOpen}
            onCancel={() => setDetailOpen(false)}
            footer={<Button onClick={() => setDetailOpen(false)}>关闭</Button>}
            width={520}
         >
            <div className="max-h-96 overflow-y-auto py-2">
               {info?.releaseNotes ? (
                  renderChangelog(info.releaseNotes)
               ) : (
                  <Text type="secondary">暂无更新详情</Text>
               )}
            </div>
         </Modal>
      </Card>
   );
}