node-resource-utils 0.0.0-stage → 1.1.8

package/resources/src/app/(admin)/demo/files/page.tsx

@@ -0,0 +1,451 @@
+'use client';
+
+import { useState } from 'react';
+import { APP_NAME } from '@/lib/appInfo';
+import axios from 'axios';
+import {
+  App,
+  Alert,
+  Button,
+  Card,
+  Col,
+  Descriptions,
+  Empty,
+  Row,
+  Segmented,
+  Space,
+  Spin,
+  Tag,
+  Typography,
+  Upload,
+} from 'antd';
+import {
+  FileExcelOutlined,
+  FilePdfOutlined,
+  FileTextOutlined,
+  FileWordOutlined,
+  InboxOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons';
+import { fs, MILITARY } from '@/lib/theme';
+import { formatElapsed, useElapsed } from '@/components/feedback';
+
+const { Dragger } = Upload;
+const { Paragraph, Text, Title } = Typography;
+
+/**
+ * 文档处理演示页。
+ *
+ * 这是整个模板里技术含量最高的一个功能，所以界面上要把「过程」也讲清楚：
+ *   - 顶部一句话说明支持哪些格式、哪些格式需要 LibreOffice
+ *   - 解析结果分左右两栏：左边纯文本（机器可读的形态）、右边 HTML（还原排版）
+ *   - 底部反向演示「生成」：把解析出来的内容再变成 Word / PDF 下载走
+ * 一进一出闭环，评审一眼就能看懂这个模块解决了什么问题。
+ */
+
+type ParseResult = {
+  filename: string;
+  kind: 'word' | 'excel' | 'pdf' | 'text';
+  text: string;
+  html: string | null;
+  sheets: string[] | null;
+  meta: Record<string, unknown>;
+};
+
+type Section = {
+  heading?: string;
+  level?: number;
+  paragraphs?: string[];
+  table?: { headers: string[]; rows: string[][] };
+};
+
+const KIND_META: Record<string, { text: string; color: string }> = {
+  word: { text: 'Word 文档', color: 'blue' },
+  excel: { text: 'Excel 表格', color: 'green' },
+  pdf: { text: 'PDF', color: 'red' },
+  text: { text: '纯文本', color: 'default' },
+};
+
+/** 没上传文件时的示例内容，保证「生成」按钮任何时候都有东西可导 */
+const SAMPLE_SECTIONS: Section[] = [
+  {
+    heading: '一、模板说明',
+    level: 1,
+    paragraphs: [
+      `本文件由${APP_NAME}自动生成，用于演示服务端文档导出能力。`,
+      'Word 走 docx 库直接生成 OOXML；PDF 中文走 HTML + LibreOffice 转换，纯英文走 pdf-lib。',
+    ],
+  },
+  {
+    heading: '二、能力清单',
+    level: 1,
+    table: {
+      headers: ['能力', '依赖', '说明'],
+      rows: [
+        ['解析 Word', 'mammoth', '输出纯文本 + HTML 预览'],
+        ['解析 Excel', 'exceljs', '按工作表输出内容'],
+        ['解析 PDF', 'pdf-lib (+ pdf-parse)', '元信息必出，正文可选'],
+        ['生成 Word', 'docx', '标题层级 / 段落 / 表格'],
+        ['生成 PDF', 'LibreOffice 或 pdf-lib', '中文需 LibreOffice'],
+      ],
+    },
+  },
+];
+
+async function errMsg(e: unknown): Promise<string> {
+  if (axios.isAxiosError(e)) {
+    const d = e.response?.data;
+    // 错误响应是 blob 时（导出接口），要先把 Blob 读成文本
+    if (d instanceof Blob) {
+      try {
+        const j = JSON.parse(await d.text()) as { message?: string };
+        return j.message || '请求失败';
+      } catch {
+        return '请求失败';
+      }
+    }
+    return (d as { message?: string } | undefined)?.message || e.message;
+  }
+  return e instanceof Error ? e.message : String(e);
+}
+
+function downloadBlob(data: Blob, filename: string) {
+  const url = window.URL.createObjectURL(data);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.URL.revokeObjectURL(url);
+}
+
+export default function FilesDemoPage() {
+  const { message } = App.useApp();
+  const [parsing, setParsing] = useState(false);
+  const [result, setResult] = useState<ParseResult | null>(null);
+  const [exporting, setExporting] = useState<'' | 'docx' | 'pdf'>('');
+  const [view, setView] = useState<'text' | 'html'>('text');
+  /** 上传百分比（0~99）。到 99 就封顶 —— 之后是服务端解析，不再有百分比可报 */
+  const [uploadPct, setUploadPct] = useState(0);
+  const parseElapsed = useElapsed(parsing);
+
+  const parseFile = async (file: File) => {
+    const fd = new FormData();
+    fd.append('file', file);
+    setParsing(true);
+    setUploadPct(0);
+    try {
+      const { data } = await axios.post('/api/docs/parse', fd, {
+        // ★ 上传大文件时唯一的真实进度来源。
+        //   没有它，30MB 的文件在局域网也要几秒，用户只看到转圈会怀疑没传上去。
+        onUploadProgress: (evt) => {
+          if (evt.total) {
+            setUploadPct(Math.min(99, Math.round((evt.loaded / evt.total) * 100)));
+          }
+        },
+      });
+      if (!data || data.code !== 0) throw new Error(data?.message || '解析失败');
+      setResult(data.data as ParseResult);
+      setView('text');
+      message.success('解析完成');
+    } catch (e) {
+      message.error(await errMsg(e));
+    } finally {
+      setParsing(false);
+      setUploadPct(0);
+    }
+  };
+
+  /** 有解析结果就把结果做成文档，没有就用示例内容 —— 按钮永远可用 */
+  const buildSections = (): Section[] => {
+    if (!result) return SAMPLE_SECTIONS;
+
+    const lines = result.text.split(/\r?\n/).filter((l) => l.trim()).slice(0, 60);
+    const metaRows = Object.entries(result.meta).map(([k, v]) => [
+      k,
+      typeof v === 'string' ? v : JSON.stringify(v),
+    ]);
+
+    return [
+      {
+        heading: `来源文件：${result.filename}`,
+        level: 1,
+        paragraphs: lines.length ? lines : ['（文件内容为空）'],
+      },
+      {
+        heading: '解析元信息',
+        level: 1,
+        table: { headers: ['字段', '值'], rows: metaRows },
+      },
+    ];
+  };
+
+  const exportDoc = async (type: 'docx' | 'pdf') => {
+    setExporting(type);
+    try {
+      const res = await axios.post(
+        '/api/docs/export',
+        {
+          type,
+          title: result ? `文档解析报告 - ${result.filename}` : `${APP_NAME} - 文档导出示例`,
+          sections: buildSections(),
+        },
+        { responseType: 'blob' }
+      );
+      const ct = String(res.headers['content-type'] || '');
+      if (ct.includes('application/json')) {
+        const j = JSON.parse(await (res.data as Blob).text()) as { message?: string };
+        throw new Error(j.message || '生成失败');
+      }
+      downloadBlob(res.data as Blob, type === 'docx' ? '导出文档.docx' : '导出文档.pdf');
+      message.success(type === 'docx' ? 'Word 文档已生成' : 'PDF 已生成');
+    } catch (e) {
+      message.error(`生成失败：${await errMsg(e)}`);
+    } finally {
+      setExporting('');
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Alert
+        type="info"
+        showIcon
+        title="文档解析与生成"
+        description={
+          <span>
+            支持 <b>.docx / .xlsx / .pdf / .txt / .md / .csv</b> 直接解析；
+            <b>.doc / .xls</b> 属于老式二进制格式，需要本机安装 LibreOffice 才能转换。
+            生成中文 PDF 同样依赖 LibreOffice，纯英文可用内置字体直接生成。
+          </span>
+        }
+      />
+
+      <Card variant="borderless" style={{ boxShadow: MILITARY.shadowSm }}>
+        <Dragger
+          accept=".doc,.docx,.xls,.xlsx,.pdf,.txt,.md,.csv"
+          multiple={false}
+          showUploadList={false}
+          disabled={parsing}
+          beforeUpload={(file) => {
+            void parseFile(file as unknown as File);
+            return false; // 交给自定义逻辑处理，不走 antd 的自动上传
+          }}
+        >
+          <p className="ant-upload-drag-icon">
+            <InboxOutlined />
+          </p>
+          <p className="ant-upload-text">点击或拖拽文件到此处上传解析</p>
+          <p className="ant-upload-hint">
+            单个文件不超过 30MB。文档只在内存里解析，不会落盘保留。
+          </p>
+        </Dragger>
+      </Card>
+
+      {/*
+        两段式等待，是"耗时操作"最该讲清楚的一种：
+          第一段有真实百分比（浏览器知道上传了多少字节）
+          第二段没有百分比（服务端在解析，可能是 LibreOffice 在起进程）
+        所以第一段给确定进度条，第二段换成"不确定进度条 + 已等待秒数"。
+        明明不知道还剩多久，就不要假装知道 —— 这比一个假的 99% 更让人信服。
+      */}
+      {parsing ? (
+        <Card variant="borderless" style={{ boxShadow: MILITARY.shadowSm }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 10,
+              padding: '36px 16px',
+            }}
+          >
+            <Spin size="large" />
+            <div style={{ fontSize: fs(13.5), color: MILITARY.textSecondary }}>
+              {uploadPct > 0 && uploadPct < 99
+                ? `正在上传文件… ${uploadPct}%`
+                : '上传完成，正在解析文档…'}
+            </div>
+            <div style={{ fontSize: fs(12), color: MILITARY.textMuted, textAlign: 'center' }}>
+              {uploadPct > 0 && uploadPct < 99
+                ? '大文件传输中，请勿关闭页面'
+                : `已等待 ${formatElapsed(parseElapsed)} · 老式 .doc / .xls 需调用 LibreOffice，会慢一些`}
+            </div>
+
+            <div
+              style={{
+                width: 260,
+                height: 4,
+                borderRadius: 999,
+                background: MILITARY.soft,
+                overflow: 'hidden',
+                marginTop: 2,
+              }}
+            >
+              {uploadPct > 0 && uploadPct < 99 ? (
+                <div
+                  style={{
+                    width: `${uploadPct}%`,
+                    height: '100%',
+                    background: `linear-gradient(90deg, ${MILITARY.primary}, ${MILITARY.accent})`,
+                    transition: 'width .25s ease',
+                  }}
+                />
+              ) : (
+                <div
+                  className="wb-indeterminate-bar"
+                  style={{
+                    width: '38%',
+                    height: '100%',
+                    background: `linear-gradient(90deg, ${MILITARY.primaryHover}, ${MILITARY.accent})`,
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        </Card>
+      ) : null}
+
+      {result && !parsing ? (
+        <Card
+          variant="borderless"
+          style={{ boxShadow: MILITARY.shadowSm }}
+          title={
+            <Space size={8}>
+              <span>{result.filename}</span>
+              <Tag color={KIND_META[result.kind]?.color ?? 'default'}>
+                {KIND_META[result.kind]?.text ?? result.kind}
+              </Tag>
+              {result.sheets?.length ? (
+                <Tag icon={<FileExcelOutlined />}>{result.sheets.join(' / ')}</Tag>
+              ) : null}
+            </Space>
+          }
+          extra={
+            <Segmented
+              value={view}
+              onChange={(v) => setView(v as 'text' | 'html')}
+              options={[
+                { label: '纯文本', value: 'text' },
+                { label: 'HTML 预览', value: 'html' },
+              ]}
+            />
+          }
+        >
+          <Row gutter={16}>
+            {/* 左：纯文本，大屏才并排；小屏下 Segmented 决定看哪一栏 */}
+            <Col xs={24} lg={12} className={view === 'text' ? '' : 'hidden lg:block'}>
+              <Title level={5} style={{ marginTop: 0 }}>
+                <FileTextOutlined /> 提取的纯文本
+              </Title>
+              <pre
+                style={{
+                  margin: 0,
+                  padding: 12,
+                  // 用皮肤变量而不是写死的浅灰：炫酷皮肤是深底，
+                  // 写死 #f6f8fa 会让正文变成"浅底浅字"，整块读不出来
+                  background: MILITARY.soft,
+                  color: MILITARY.text,
+                  borderRadius: 6,
+                  height: 420,
+                  overflow: 'auto',
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                  fontSize: fs(13),
+                  lineHeight: 1.8,
+                }}
+              >
+                {result.text || '（空）'}
+              </pre>
+            </Col>
+
+            <Col xs={24} lg={12} className={view === 'html' ? '' : 'hidden lg:block'}>
+              <Title level={5} style={{ marginTop: 0 }}>
+                <FileWordOutlined /> 富文本预览
+              </Title>
+              <div
+                style={{
+                  padding: 12,
+                  border: `1px solid ${MILITARY.borderSoft}`,
+                  borderRadius: 6,
+                  height: 420,
+                  overflow: 'auto',
+                  background: MILITARY.card,
+                }}
+              >
+                {result.html ? (
+                  // 内容来自服务端 mammoth / 转义处理，这里直接渲染以还原原始排版
+                  <div dangerouslySetInnerHTML={{ __html: result.html }} />
+                ) : (
+                  <Empty
+                    image={Empty.PRESENTED_IMAGE_SIMPLE}
+                    description="该格式没有富文本形态（Excel / PDF 只提供结构化文本）"
+                  />
+                )}
+              </div>
+            </Col>
+          </Row>
+
+          <Descriptions
+            title="解析元信息"
+            size="small"
+            bordered
+            column={{ xs: 1, sm: 2, lg: 3 }}
+            style={{ marginTop: 20 }}
+          >
+            {Object.entries(result.meta).map(([k, v]) => (
+              <Descriptions.Item key={k} label={k}>
+                {typeof v === 'string' ? v : JSON.stringify(v)}
+              </Descriptions.Item>
+            ))}
+          </Descriptions>
+        </Card>
+      ) : null}
+
+      <Card
+        variant="borderless"
+        style={{ boxShadow: MILITARY.shadowSm }}
+        title="反向生成：把内容导出为文档"
+      >
+        <Paragraph type="secondary" style={{ marginTop: 0 }}>
+          没有上传文件时，会导出一份内置的示例文档；上传解析后，导出的就是这份解析报告，
+          包含正文与元信息表格。可以借此验证「读进来 → 写出去」的完整链路。
+        </Paragraph>
+        <Space wrap>
+          <Button
+            type="primary"
+            icon={<FileWordOutlined />}
+            loading={exporting === 'docx'}
+            onClick={() => exportDoc('docx')}
+          >
+            生成 Word 文档
+          </Button>
+          <Button
+            icon={<FilePdfOutlined />}
+            loading={exporting === 'pdf'}
+            onClick={() => exportDoc('pdf')}
+          >
+            生成 PDF
+          </Button>
+          {result ? (
+            <Button
+              icon={<ReloadOutlined />}
+              onClick={() => {
+                setResult(null);
+                setView('text');
+              }}
+            >
+              清空当前结果
+            </Button>
+          ) : null}
+        </Space>
+        <div style={{ marginTop: 12 }}>
+          <Text type="secondary" style={{ fontSize: fs(12) }}>
+            提示：中文 PDF 依赖 LibreOffice。若环境未安装，会退回生成一份英文占位 PDF，并在正文里说明原因。
+          </Text>
+        </div>
+      </Card>
+    </div>
+  );
+}