feat: v0.2.2 体验打磨 - 拖拽处处可用、手动粘贴对比、仅限文本文件、报告与可读性增强

docs/应用开发与版本迭代规范.md

@@ -57,7 +57,8 @@ z = 补丁版本号（Patch）
 0.1.0   ← 初始版本（已发布）
 0.1.1   ← 体验打磨补丁（已发布）：拖拽编码识别 · 行级右键菜单 · 尾部换行显示修正
 0.2.0   ← 导出差异报告（已发布）：HTML / 纯文本 / Markdown 三种格式
-0.2.1   ← 建立测试体系（当前）：Vitest 单元+组件测试 · 测试策略文档
+0.2.1   ← 建立测试体系（已发布）：Vitest 单元+组件测试 · 测试策略文档
+0.2.2   ← 体验打磨（当前）：拖拽处处可用 · 手动粘贴对比 · 导出后一键定位 · 报告/可读性增强 · 仅限文本文件
 0.3.0   ← 新增功能
 ...
 0.y.z   ← 长期停留，永不进入 1.x

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "DiffLens",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "DiffLens",
-      "version": "0.2.1",
+      "version": "0.2.2",
       "license": "MIT",
       "dependencies": {
         "@electron-toolkit/preload": "^3.0.1",
@@ -3471,7 +3471,7 @@
       }
     },
     "node_modules/chromium-pickle-js": {
-      "version": "0.2.1",
+      "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/chromium-pickle-js/-/chromium-pickle-js-0.2.0.tgz",
       "integrity": "sha512-1R5Fho+jBq0DDydt+/vHWj5KJNJCKdARKOCwZUen84I5BreWoLqRLANH1U87eJy1tiASPtMnGqJJq0ZsLoRPOw==",
       "dev": true,
@@ -4229,7 +4229,7 @@
       }
     },
     "node_modules/eastasianwidth": {
-      "version": "0.2.1",
+      "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true,
@@ -5481,7 +5481,7 @@
       "license": "MIT"
     },
     "node_modules/is-unicode-supported": {
-      "version": "0.2.1",
+      "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
       "dev": true,
@@ -6369,7 +6369,7 @@
       "optional": true
     },
     "node_modules/node-api-version": {
-      "version": "0.2.1",
+      "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/node-api-version/-/node-api-version-0.2.1.tgz",
       "integrity": "sha512-2xP/IGGMmmSQpI1+O/k72jF/ykvZ89JeuKX3TLJAYPDVLUalrshrLHkeVcCCZqG/eEa635cr8IBYzgnDvM2O8Q==",
       "dev": true,
@@ -8405,7 +8405,7 @@
       }
     },
     "node_modules/yocto-queue": {
-      "version": "0.2.1",
+      "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "DiffLens",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "DiffLens — 精美酷炫的文本对比桌面应用",
   "author": "thzxx",
   "license": "MIT",

src/main/index.ts

@@ -71,8 +71,7 @@ ipcMain.handle('file:open', async (_event, side: 'left' | 'right' | null) => {
     title: `选择${side === 'left' ? '左侧' : side === 'right' ? '右侧' : ''}文本文件`,
     properties: ['openFile'],
     filters: [
-      { name: '文本文件', extensions: ['txt', 'md', 'json', 'js', 'ts', 'tsx', 'jsx', 'css', 'html', 'xml', 'yml', 'yaml', 'py', 'java', 'go', 'rs', 'c', 'cpp', 'h', 'log', 'csv', 'sql'] },
+      { name: '文本文件', extensions: ['txt', 'md', 'json', 'js', 'mjs', 'cjs', 'ts', 'tsx', 'jsx', 'css', 'scss', 'less', 'html', 'htm', 'xml', 'yml', 'yaml', 'toml', 'ini', 'cfg', 'conf', 'properties', 'env', 'py', 'java', 'go', 'rs', 'c', 'h', 'cpp', 'hpp', 'cs', 'swift', 'kt', 'rb', 'php', 'sh', 'bat', 'ps1', 'log', 'csv', 'sql', 'vue', 'graphql', 'gradle'] }
-      { name: '所有文件', extensions: ['*'] }
     ]
   })
   if (result.canceled || result.filePaths.length === 0) return null

src/renderer/src/App.tsx

@@ -11,7 +11,9 @@ import type { DiffResult, DiffSummary } from './diff/diffEngine'
 import DiffView from './components/DiffView'
 import Toolbar from './components/Toolbar'
 import ContextMenu, { type ContextMenuItem } from './components/ContextMenu'
+import TextInputModal from './components/TextInputModal'
 import { buildReport, REPORT_EXT, type ReportFormat, type ReportContext } from './diff/report'
+import { isTextFile } from './diff/textUtils'
 import type { PaneMeta } from './components/DiffView'
 import type { SideCell } from './diff/diffEngine'
 
@@ -90,12 +92,17 @@ export default function App(): ReactElement {
   const [activeRowId, setActiveRowId] = useState<string | null>(null)
   const [navIndex, setNavIndex] = useState(0)
   const [menu, setMenu] = useState<{ x: number; y: number; items: ContextMenuItem[] } | null>(null)
-  const [toast, setToast] = useState<string | null>(null)
+  const [toast, setToast] = useState<{ text: string; action?: { label: string; onClick: () => void } } | null>(null)
+  const [pasteSide, setPasteSide] = useState<'left' | 'right' | null>(null)
+  const [pasteOpen, setPasteOpen] = useState(false)
 
-  const showToast = useCallback((text: string) => {
+  const showToast = useCallback(
-    setToast(text)
+    (text: string, action?: { label: string; onClick: () => void }) => {
+      setToast({ text, action })
       window.setTimeout(() => setToast(null), 3600)
-  }, [])
+    },
+    []
+  )
 
   const openPane = useCallback(async (side: 'left' | 'right') => {
     const data = await window.api.openFile(side)
@@ -105,7 +112,12 @@ export default function App(): ReactElement {
     else setPaneR(pane)
   }, [])
 
-  const dropPane = useCallback(async (side: 'left' | 'right', file: File) => {
+  const dropPane = useCallback(
+    async (side: 'left' | 'right', file: File) => {
+      if (!isTextFile(file.name)) {
+        showToast(`仅支持文本文件：${file.name}`)
+        return
+      }
       let text = ''
       let encoding = 'UTF-8'
       try {
@@ -119,7 +131,9 @@ export default function App(): ReactElement {
       const pane: PaneState = { meta: { name: file.name, encoding }, path: '', text }
       if (side === 'left') setPaneL(pane)
       else setPaneR(pane)
-  }, [])
+    },
+    [showToast]
+  )
 
   const diff: DiffResult = useMemo(() => {
     return computeDiff(paneL?.text ?? '', paneR?.text ?? '', options)
@@ -181,18 +195,33 @@ export default function App(): ReactElement {
         leftName: paneL?.meta.name ?? '',
         rightName: paneR?.meta.name ?? '',
         leftEncoding: paneL?.meta.encoding ?? '',
-        rightEncoding: paneR?.meta.encoding ?? ''
+        rightEncoding: paneR?.meta.encoding ?? '',
+        leftPath: paneL?.path || undefined,
+        rightPath: paneR?.path || undefined
       }
       const content = buildReport(diff.rows, ctx, summary, fmt)
       const defaultName = `DiffLens-report-${stamp()}.${REPORT_EXT[fmt]}`
       const res = await window.api.saveReport(content, defaultName)
-      if (res.ok && res.path) showToast(`报告已保存：${res.path}`)
+      if (res.ok && res.path) {
+        const p = res.path
+        showToast(`报告已保存：${p}`, {
+          label: '打开文件夹',
+          onClick: () => void window.api.showInFolder(p)
+        })
+      }
     },
     [diff, paneL, paneR, summary, showToast]
   )
 
   const anyPane = paneL !== null || paneR !== null
 
+  const confirmPaste = useCallback((side: 'left' | 'right', text: string) => {
+    const pane: PaneState = { meta: { name: '手动文本', encoding: '文本' }, path: '', text }
+    if (side === 'left') setPaneL(pane)
+    else setPaneR(pane)
+    setPasteSide(null)
+  }, [])
+
   const leftMeta = paneL?.meta ?? null
   const rightMeta = paneR?.meta ?? null
 
@@ -215,6 +244,33 @@ export default function App(): ReactElement {
         <button className="btn ghost" onClick={() => void openPane('right')}>
           打开右侧
         </button>
+        <div className="tool-group export-wrap">
+          <button className="btn ghost" onClick={() => setPasteOpen((o) => !o)}>
+            粘贴文本
+          </button>
+          {pasteOpen && (
+            <div className="export-menu">
+              <button
+                className="ctx-item"
+                onClick={() => {
+                  setPasteOpen(false)
+                  setPasteSide('left')
+                }}
+              >
+                粘贴到左侧
+              </button>
+              <button
+                className="ctx-item"
+                onClick={() => {
+                  setPasteOpen(false)
+                  setPasteSide('right')
+                }}
+              >
+                粘贴到右侧
+              </button>
+            </div>
+          )}
+        </div>
         <button
           className="btn ghost"
           onClick={() => {
@@ -235,6 +291,7 @@ export default function App(): ReactElement {
             activeRowId={activeRowId}
             onOpen={(s) => void openPane(s)}
             onRowContext={onRowContext}
+            onDropFile={(s, f) => void dropPane(s, f)}
           />
           <Toolbar
             options={options}
@@ -269,7 +326,7 @@ export default function App(): ReactElement {
         <div className="status-spacer" />
         <div className="status-right">
           {summary.changedLines === 0 ? (
-            <span className="eq-badge same">内容一致</span>
+            <span className="eq-badge same">两文件内容完全一致</span>
           ) : (
             <span className="eq-badge diff">有差异</span>
           )}
@@ -277,7 +334,29 @@ export default function App(): ReactElement {
       </footer>
 
       {menu && <ContextMenu x={menu.x} y={menu.y} items={menu.items} onClose={() => setMenu(null)} />}
-      {toast && <div className="toast">{toast}</div>}
+      {pasteSide && (
+        <TextInputModal
+          title={`粘贴${pasteSide === 'left' ? '左侧' : '右侧'}文本`}
+          onCancel={() => setPasteSide(null)}
+          onConfirm={(t) => confirmPaste(pasteSide, t)}
+        />
+      )}
+      {toast && (
+        <div className="toast">
+          <span className="toast-text">{toast.text}</span>
+          {toast.action && (
+            <button
+              className="toast-btn"
+              onClick={() => {
+                toast.action!.onClick()
+                setToast(null)
+              }}
+            >
+              {toast.action.label}
+            </button>
+          )}
+        </div>
+      )}
     </div>
   )
 }

src/renderer/src/__tests__/App.test.tsx

@@ -69,9 +69,11 @@ describe('App - 加载文件后的非空态', () => {
 })
 
 describe('App - 导出报告交互', () => {
-  it('导出 HTML 成功后弹出保存提示（覆盖 exportReport 成功分支）', async () => {
+  it('导出 HTML 成功后弹保存提示，可一键打开文件夹', async () => {
+    const showInFolder = vi.fn(async () => true)
     window.api = mockApi({
-      saveReport: async () => ({ ok: true, path: 'C:/docs/DiffLens-report.html' })
+      saveReport: async () => ({ ok: true, path: 'C:/docs/DiffLens-report.html' }),
+      showInFolder
     })
     render(<App />)
     fireEvent.click(screen.getByText('打开左侧'))
@@ -79,6 +81,8 @@ describe('App - 导出报告交互', () => {
     fireEvent.click(screen.getByText('导出报告'))
     fireEvent.click(screen.getByText('HTML 报告'))
     expect(await screen.findByText(/报告已保存/)).toBeInTheDocument()
+    fireEvent.click(screen.getByText('打开文件夹'))
+    expect(showInFolder).toHaveBeenCalledWith('C:/docs/DiffLens-report.html')
   })
 })
 
@@ -210,4 +214,38 @@ describe('App - 右侧面板交互', () => {
     fireEvent.drop(pane, { dataTransfer: { files: [file] } })
     expect(await screen.findByText('导出报告')).toBeInTheDocument()
   })
+
+  it('拖放非文本文件被拒绝并提示', async () => {
+    render(<App />)
+    const file = new File(['fake'], 'img.png', { type: 'image/png' })
+    const pane = screen.getByText(/选择左侧文件/).closest('.pane-empty') as Element
+    fireEvent.drop(pane, { dataTransfer: { files: [file] } })
+    expect(await screen.findByText(/仅支持文本文件/)).toBeInTheDocument()
+    expect(screen.queryByText('导出报告')).not.toBeInTheDocument()
+  })
+})
+
+describe('App - 手动粘贴文本', () => {
+  it('粘贴文本到左侧并开始对比', async () => {
+    render(<App />)
+    fireEvent.click(screen.getByText('粘贴文本'))
+    fireEvent.click(screen.getByText('粘贴到左侧'))
+    const ta = screen.getByPlaceholderText(/粘贴或输入/)
+    fireEvent.change(ta, { target: { value: 'alpha\nbeta' } })
+    fireEvent.click(screen.getByText('开始对比'))
+    expect(await screen.findByText('导出报告')).toBeInTheDocument()
+    expect(screen.getAllByText('手动文本').length).toBeGreaterThan(0)
+  })
+
+  it('粘贴到右侧入口可用', async () => {
+    render(<App />)
+    fireEvent.click(screen.getByText('粘贴文本'))
+    fireEvent.click(screen.getByText('粘贴到右侧'))
+    expect(screen.getByText('粘贴右侧文本')).toBeInTheDocument()
+    fireEvent.change(screen.getByPlaceholderText(/粘贴或输入/), {
+      target: { value: 'x' }
+    })
+    fireEvent.click(screen.getByText('开始对比'))
+    expect(await screen.findByText('导出报告')).toBeInTheDocument()
+  })
 })

src/renderer/src/components/DiffView.test.tsx

@@ -25,6 +25,7 @@ function renderDiff(rows: DiffRow[], activeRowId: string | null = null) {
       activeRowId={activeRowId}
       onOpen={vi.fn()}
       onRowContext={vi.fn()}
+      onDropFile={vi.fn()}
     />
   )
 }
@@ -127,6 +128,7 @@ describe('DiffView', () => {
         activeRowId={null}
         onOpen={vi.fn()}
         onRowContext={onRowContext}
+        onDropFile={vi.fn()}
       />
     )
     fireEvent.contextMenu(screen.getAllByText('hello')[0])
@@ -146,9 +148,47 @@ describe('DiffView', () => {
         activeRowId={null}
         onOpen={onOpen}
         onRowContext={vi.fn()}
+        onDropFile={vi.fn()}
       />
     )
     fireEvent.click(screen.getAllByText('重新选择')[0])
     expect(onOpen).toHaveBeenCalledWith('left')
   })
+
+  it('渲染行尾空白可视标注', () => {
+    const row: DiffRow = {
+      id: 'w0',
+      rowKind: 'unchanged',
+      isChanged: false,
+      left: { lineNo: 1, text: 'pad  ', segs: null },
+      right: { lineNo: 1, text: 'pad  ', segs: null }
+    }
+    const { container } = renderDiff([row])
+    expect(container.querySelector('.ws')).toBeTruthy()
+  })
+
+  it('拖放文件到面板触发 onDropFile', () => {
+    const onDropFile = vi.fn()
+    const { container } = (() => {
+      const utils = render(
+        <DiffView
+          diff={{
+            rows: baseRows,
+            summary: { changedLines: 1, inserted: 1, deleted: 0, modified: 0 }
+          }}
+          leftMeta={{ name: 'a.txt', encoding: 'UTF-8' }}
+          rightMeta={{ name: 'b.txt', encoding: 'GBK' }}
+          activeRowId={null}
+          onOpen={vi.fn()}
+          onRowContext={vi.fn()}
+          onDropFile={onDropFile}
+        />
+      )
+      return utils
+    })()
+    const panes = container.querySelectorAll('.pane')
+    const file = new File(['x'], 'c.txt', { type: 'text/plain' })
+    fireEvent.drop(panes[0] as Element, { dataTransfer: { files: [file] } })
+    expect(onDropFile).toHaveBeenCalledWith('left', file)
+  })
 })

src/renderer/src/components/DiffView.tsx

@@ -20,6 +20,20 @@ interface DiffViewProps {
   activeRowId: string | null
   onOpen: (side: 'left' | 'right') => void
   onRowContext: (e: ReactMouseEvent, side: 'left' | 'right', cell: SideCell) => void
+  onDropFile: (side: 'left' | 'right', file: File) => void
+}
+
+/** 把行尾空白用淡色高亮显示，便于识别被忽略/忽略差异 */
+function renderWithWs(text: string): ReactNode[] {
+  const m = /(\s+)$/.exec(text)
+  if (!m || m[1].length === 0) return [text]
+  const body = text.slice(0, text.length - m[1].length)
+  return [
+    body,
+    <span className="ws" key="ws">
+      {m[1]}
+    </span>
+  ]
 }
 
 function renderCellText(cell: SideCell): ReactNode {
@@ -33,7 +47,7 @@ function renderCellText(cell: SideCell): ReactNode {
   if (cell.text === null) {
     return <span className="plain-empty">&#8203;</span>
   }
-  return <span className="plain">{cell.text}</span>
+  return <span className="plain">{renderWithWs(cell.text)}</span>
 }
 
 function SidePanel({
@@ -42,6 +56,7 @@ function SidePanel({
   meta,
   onOpen,
   onRowContext,
+  onDropFile,
   scrollRef,
   onScroll,
   activeRowId
@@ -51,12 +66,21 @@ function SidePanel({
   meta: PaneMeta | null
   onOpen: (side: 'left' | 'right') => void
   onRowContext: (e: ReactMouseEvent, side: 'left' | 'right', cell: SideCell) => void
+  onDropFile: (side: 'left' | 'right', file: File) => void
   scrollRef: RefObject<HTMLDivElement>
   onScroll: () => void
   activeRowId: string | null
 }): ReactElement {
   return (
-    <div className={'pane pane-mid pane-' + side}>
+    <div
+      className={'pane pane-mid pane-' + side}
+      onDragOver={(e) => e.preventDefault()}
+      onDrop={(e) => {
+        e.preventDefault()
+        const f = e.dataTransfer.files[0]
+        if (f) onDropFile(side, f)
+      }}
+    >
       <div className="panel-head">
         <span className={'pane-dot ' + side} />
         <span className="pane-file">{meta ? meta.name : '（未选择）'}</span>
@@ -97,7 +121,8 @@ export default function DiffView({
   rightMeta,
   activeRowId,
   onOpen,
-  onRowContext
+  onRowContext,
+  onDropFile
 }: DiffViewProps): ReactElement {
   const leftRef = useRef<HTMLDivElement>(null)
   const rightRef = useRef<HTMLDivElement>(null)
@@ -132,6 +157,7 @@ export default function DiffView({
           meta={leftMeta}
           onOpen={onOpen}
           onRowContext={onRowContext}
+          onDropFile={onDropFile}
           scrollRef={leftRef}
           onScroll={makeScrollSync('left')}
           activeRowId={activeRowId}
@@ -142,6 +168,7 @@ export default function DiffView({
           meta={rightMeta}
           onOpen={onOpen}
           onRowContext={onRowContext}
+          onDropFile={onDropFile}
           scrollRef={rightRef}
           onScroll={makeScrollSync('right')}
           activeRowId={activeRowId}

src/renderer/src/components/TextInputModal.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import TextInputModal from './TextInputModal'
+
+describe('TextInputModal', () => {
+  it('输入文本并确认提交', () => {
+    const onConfirm = vi.fn()
+    const onCancel = vi.fn()
+    render(<TextInputModal title="粘贴左侧文本" onCancel={onCancel} onConfirm={onConfirm} />)
+    const ta = screen.getByPlaceholderText(/粘贴或输入/)
+    fireEvent.change(ta, { target: { value: 'hello\nworld' } })
+    fireEvent.click(screen.getByText('开始对比'))
+    expect(onConfirm).toHaveBeenCalledWith('hello\nworld')
+  })
+
+  it('点击取消触发 onCancel', () => {
+    const onCancel = vi.fn()
+    render(
+      <TextInputModal title="粘贴左侧文本" onCancel={onCancel} onConfirm={vi.fn()} />
+    )
+    fireEvent.click(screen.getByText('取消'))
+    expect(onCancel).toHaveBeenCalled()
+  })
+})

src/renderer/src/components/TextInputModal.tsx

@@ -0,0 +1,46 @@
+import { useState, type ReactElement } from 'react'
+
+interface TextInputModalProps {
+  title: string
+  onCancel: () => void
+  onConfirm: (text: string) => void
+}
+
+export default function TextInputModal({
+  title,
+  onCancel,
+  onConfirm
+}: TextInputModalProps): ReactElement {
+  const [text, setText] = useState('')
+
+  return (
+    <div
+      className="modal-backdrop"
+      onMouseDown={onCancel}
+      onContextMenu={(e) => {
+        e.preventDefault()
+        onCancel()
+      }}
+    >
+      <div className="text-modal" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="text-modal-head">{title}</div>
+        <textarea
+          className="text-modal-input"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          autoFocus
+          placeholder="在此粘贴或输入文本，然后点击“开始对比”…"
+          spellCheck={false}
+        />
+        <div className="text-modal-actions">
+          <button className="btn" onClick={onCancel}>
+            取消
+          </button>
+          <button className="btn primary" onClick={() => onConfirm(text)}>
+            开始对比
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/renderer/src/diff/report.ts

@@ -11,6 +11,10 @@ export interface ReportContext {
   leftEncoding: string
   /** 右侧编码标注 */
   rightEncoding: string
+  /** 左侧文件完整路径（可选） */
+  leftPath?: string
+  /** 右侧文件完整路径（可选） */
+  rightPath?: string
 }
 
 const esc = (s: string): string =>
@@ -43,8 +47,12 @@ const headLines = (
   title: string
 ): string[] => [
   title,
-  `对比：${ctx.leftName || '（未选择）'}${ctx.leftEncoding ? ` (${ctx.leftEncoding})` : ''}  →  ${ctx.rightName || '（未选择）'}${ctx.rightEncoding ? ` (${ctx.rightEncoding})` : ''}`,
+  `对比：${ctx.leftName || '（未选择）'}${ctx.leftEncoding ? ` (${ctx.leftEncoding})` : ''}${
-  `生成时间:${new Date().toLocaleString('zh-CN')}`,
+    ctx.leftPath ? ` [${ctx.leftPath}]` : ''
+  }  →  ${ctx.rightName || '（未选择）'}${ctx.rightEncoding ? ` (${ctx.rightEncoding})` : ''}${
+    ctx.rightPath ? ` [${ctx.rightPath}]` : ''
+  }`,
+  `对比时间：${new Date().toLocaleString('zh-CN')}`,
   `变更统计：新增 ${summary.inserted} ｜ 删除 ${summary.deleted} ｜ 修改 ${summary.modified}`
 ]
 

src/renderer/src/diff/textUtils.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest'
+import { TEXT_EXTENSIONS, isTextFile } from './textUtils'
+
+describe('textUtils', () => {
+  it('常见文本扩展名放行', () => {
+    expect(isTextFile('a.json')).toBe(true)
+    expect(isTextFile('b.ts')).toBe(true)
+    expect(isTextFile('c.md')).toBe(true)
+    expect(isTextFile('d.log')).toBe(true)
+  })
+
+  it('无扩展名文件按文本放行', () => {
+    expect(isTextFile('README')).toBe(true)
+    expect(isTextFile('Makefile')).toBe(true)
+  })
+
+  it('非文本扩展名拒绝', () => {
+    expect(isTextFile('img.png')).toBe(false)
+    expect(isTextFile('a.exe')).toBe(false)
+    expect(isTextFile('b.zip')).toBe(false)
+    expect(isTextFile('c.jpg')).toBe(false)
+  })
+
+  it('扩展名大小写不敏感', () => {
+    expect(isTextFile('A.TXT')).toBe(true)
+    expect(isTextFile('CODE.MD')).toBe(true)
+  })
+
+  it('文本扩展名清单非空', () => {
+    expect(TEXT_EXTENSIONS.length).toBeGreaterThan(0)
+    expect(TEXT_EXTENSIONS).toContain('txt')
+  })
+})

src/renderer/src/diff/textUtils.ts

@@ -0,0 +1,74 @@
+/** 允许打开/拖拽的文本类扩展名（小写，不含点） */
+export const TEXT_EXTENSIONS: string[] = [
+  'txt',
+  'text',
+  'md',
+  'markdown',
+  'json',
+  'js',
+  'mjs',
+  'cjs',
+  'ts',
+  'mts',
+  'cts',
+  'tsx',
+  'jsx',
+  'css',
+  'scss',
+  'less',
+  'html',
+  'htm',
+  'xml',
+  'yml',
+  'yaml',
+  'toml',
+  'ini',
+  'cfg',
+  'conf',
+  'config',
+  'properties',
+  'env',
+  'py',
+  'java',
+  'go',
+  'rs',
+  'c',
+  'h',
+  'cpp',
+  'hpp',
+  'cc',
+  'cs',
+  'swift',
+  'kt',
+  'rb',
+  'php',
+  'pl',
+  'sh',
+  'zsh',
+  'bash',
+  'fish',
+  'bat',
+  'cmd',
+  'ps1',
+  'log',
+  'csv',
+  'tsv',
+  'sql',
+  'vue',
+  'svelte',
+  'graphql',
+  'gql',
+  'gradle',
+  'lock'
+]
+
+/**
+ * 判断文件名是否为允许的文本文件。
+ * 无扩展名的文件按文本尝试放行；有扩展名但不在文本列表内则视为非文本。
+ */
+export function isTextFile(name: string): boolean {
+  const dot = name.lastIndexOf('.')
+  if (dot < 0) return true
+  const ext = name.slice(dot + 1).toLowerCase()
+  return TEXT_EXTENSIONS.includes(ext)
+}

src/renderer/src/styles/global.css

@@ -597,6 +597,78 @@ button:disabled {
   }
 }
 
+/* ============ 行尾空白可视标注 ============ */
+.ws {
+  background: rgba(34, 211, 238, 0.22);
+  border-radius: 2px;
+  box-shadow: inset 0 -1px 0 rgba(34, 211, 238, 0.5);
+}
+
+/* ============ toast 动作按钮 ============ */
+.toast-text {
+  margin-right: 10px;
+}
+.toast-btn {
+  padding: 4px 12px;
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), #6a4dff);
+  box-shadow: 0 0 12px rgba(124, 108, 255, 0.4);
+}
+.toast-btn:hover {
+  filter: brightness(1.08);
+}
+
+/* ============ 粘贴文本弹窗 ============ */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  background: rgba(4, 7, 12, 0.55);
+  backdrop-filter: blur(3px);
+}
+.text-modal {
+  width: min(620px, 90vw);
+  background: rgba(16, 22, 34, 0.98);
+  border: 1px solid var(--border-strong);
+  border-radius: 14px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(124, 108, 255, 0.2);
+  overflow: hidden;
+  z-index: 1001;
+}
+.text-modal-head {
+  padding: 12px 16px;
+  font-weight: 700;
+  font-size: 14px;
+  border-bottom: 1px solid var(--border);
+  background: linear-gradient(180deg, rgba(124, 108, 255, 0.12), transparent);
+}
+.text-modal-input {
+  display: block;
+  width: 100%;
+  min-height: 220px;
+  padding: 12px 14px;
+  background: rgba(0, 0, 0, 0.25);
+  border: none;
+  outline: none;
+  resize: vertical;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.6;
+}
+.text-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+}
+
 /* ============ 状态栏 ============ */
 .status-bar {
   flex: 0 0 auto;