fresh-mint-list-excel-select-demo.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Fresh Mint · 列表 Excel 选择复制 Demo</title>
  7. <link rel="preconnect" href="https://fonts.googleapis.com" />
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  9. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  10. <style>
  11. :root {
  12. --primary: #10b981;
  13. --primary-dark: #059669;
  14. --primary-bg: #ecfdf5;
  15. --text: #1e293b;
  16. --text-muted: #64748b;
  17. --border: #d9e8e2;
  18. --surface: #ffffff;
  19. --table-head: #f8fafc;
  20. --bg-page: #f8fafc;
  21. --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  22. --radius: 10px;
  23. --select-fill: rgba(16, 185, 129, 0.16);
  24. --select-border: #059669;
  25. }
  26. * { box-sizing: border-box; }
  27. body {
  28. margin: 0;
  29. min-height: 100vh;
  30. font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  31. font-size: 14px;
  32. line-height: 1.5;
  33. color: var(--text);
  34. background: var(--bg-page);
  35. }
  36. .demo-page { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; }
  37. .demo-head { margin-bottom: 20px; }
  38. .demo-head h1 {
  39. margin: 0 0 8px;
  40. font-size: 24px;
  41. font-weight: 700;
  42. letter-spacing: -0.02em;
  43. }
  44. .demo-head h1 span { color: var(--primary); }
  45. .demo-head p { margin: 0; color: var(--text-muted); max-width: 760px; }
  46. .panel {
  47. background: var(--surface);
  48. border: 1px solid var(--border);
  49. border-radius: var(--radius);
  50. box-shadow: var(--shadow);
  51. overflow: hidden;
  52. }
  53. .panel-top {
  54. display: flex;
  55. align-items: center;
  56. justify-content: space-between;
  57. gap: 16px;
  58. padding: 14px 16px;
  59. border-bottom: 1px solid var(--border);
  60. }
  61. .panel-top h3 {
  62. margin: 0;
  63. font-size: 15px;
  64. font-weight: 700;
  65. position: relative;
  66. padding-left: 10px;
  67. }
  68. .panel-top h3::before {
  69. content: "";
  70. position: absolute;
  71. left: 0;
  72. top: 2px;
  73. bottom: 2px;
  74. width: 3px;
  75. border-radius: 2px;
  76. background: var(--primary);
  77. }
  78. .list-toolbar-row { width: 100%; }
  79. .list-toolbar-end {
  80. display: inline-flex;
  81. align-items: center;
  82. gap: 8px;
  83. margin-left: auto;
  84. flex-shrink: 0;
  85. }
  86. .icon-btn {
  87. width: 36px;
  88. height: 36px;
  89. padding: 0;
  90. border: 0;
  91. border-radius: 8px;
  92. background: transparent;
  93. color: var(--text-muted);
  94. display: inline-flex;
  95. align-items: center;
  96. justify-content: center;
  97. cursor: pointer;
  98. }
  99. .icon-btn:hover { color: var(--primary-dark); background: var(--primary-bg); }
  100. .icon-btn.active {
  101. color: var(--primary-dark);
  102. background: var(--primary-bg);
  103. }
  104. .icon-btn svg { width: 16px; height: 16px; display: block; }
  105. .list-toolbar { background: var(--table-head); border-bottom: 1px solid var(--border); }
  106. .list-toolbar-row {
  107. display: flex;
  108. flex-wrap: wrap;
  109. align-items: center;
  110. gap: 8px;
  111. padding: 8px 16px;
  112. }
  113. .list-toolbar-selected {
  114. display: inline-flex;
  115. align-items: center;
  116. min-height: 36px;
  117. padding-right: 10px;
  118. margin-right: 4px;
  119. border-right: 1px solid var(--border);
  120. font-size: 12px;
  121. font-weight: 600;
  122. color: var(--text-muted);
  123. white-space: nowrap;
  124. }
  125. .sel-num { color: var(--primary-dark); font-weight: 700; margin: 0 2px; }
  126. .btn {
  127. display: inline-flex;
  128. align-items: center;
  129. justify-content: center;
  130. gap: 6px;
  131. height: 36px;
  132. padding: 0 14px;
  133. border-radius: 8px;
  134. border: 1px solid var(--border);
  135. background: var(--surface);
  136. color: var(--text);
  137. font-size: 14px;
  138. font-weight: 600;
  139. font-family: inherit;
  140. cursor: pointer;
  141. white-space: nowrap;
  142. }
  143. .btn:hover { border-color: #b7d5cb; background: #f8fafc; }
  144. .btn:disabled { opacity: .45; cursor: not-allowed; }
  145. .btn-main {
  146. background: var(--primary);
  147. border-color: var(--primary);
  148. color: #fff;
  149. }
  150. .btn-main:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
  151. .hint {
  152. padding: 8px 16px 10px;
  153. font-size: 12px;
  154. color: var(--text-muted);
  155. }
  156. .hint strong { color: var(--text); font-weight: 600; }
  157. .table-wrap { overflow: auto; }
  158. table {
  159. width: 100%;
  160. border-collapse: separate;
  161. border-spacing: 0;
  162. font-size: 14px;
  163. }
  164. th, td {
  165. border-bottom: 1px solid #eef4f1;
  166. padding: 0;
  167. text-align: left;
  168. vertical-align: middle;
  169. background: #fff;
  170. }
  171. thead th {
  172. background: var(--table-head);
  173. color: #475569;
  174. font-size: 13px;
  175. font-weight: 600;
  176. height: 42px;
  177. }
  178. tbody tr:nth-child(even) td { background: #fcfdfc; }
  179. .cell-pad { padding: 10px 12px; }
  180. .col-check { width: 52px; text-align: center; }
  181. .col-index { width: 64px; text-align: center; color: var(--text-muted); }
  182. .col-action { width: 88px; }
  183. .link {
  184. color: var(--primary-dark);
  185. font-weight: 600;
  186. cursor: pointer;
  187. text-decoration: none;
  188. }
  189. .link:hover { text-decoration: underline; }
  190. .tag {
  191. display: inline-flex;
  192. align-items: center;
  193. height: 22px;
  194. padding: 0 8px;
  195. border-radius: 4px;
  196. font-size: 12px;
  197. font-weight: 600;
  198. color: #fff;
  199. }
  200. .tag-success { background: #059669; }
  201. .tag-warning { background: #d97706; }
  202. .text-btn {
  203. border: 0;
  204. background: transparent;
  205. color: var(--primary-dark);
  206. font: inherit;
  207. font-weight: 600;
  208. cursor: pointer;
  209. padding: 0;
  210. }
  211. body.mode-excel .col-head,
  212. body.mode-excel .row-head {
  213. cursor: pointer;
  214. }
  215. body.mode-excel table { user-select: none; }
  216. .data-cell.selected {
  217. background: var(--select-fill) !important;
  218. box-shadow: inset 0 0 0 1px var(--select-border);
  219. }
  220. thead th.col-active { background: #d1fae5; color: var(--primary-dark); }
  221. td.row-active { background: #d1fae5 !important; color: var(--primary-dark); font-weight: 700; }
  222. body.mode-excel .link { color: var(--text); cursor: default; text-decoration: none; }
  223. body.mode-excel .text-btn,
  224. body.mode-excel .row-check { cursor: not-allowed; opacity: .4; }
  225. .below {
  226. display: grid;
  227. grid-template-columns: 1.1fr .9fr;
  228. gap: 16px;
  229. margin-top: 16px;
  230. }
  231. .card {
  232. background: var(--surface);
  233. border: 1px solid var(--border);
  234. border-radius: var(--radius);
  235. box-shadow: var(--shadow);
  236. padding: 14px 16px 16px;
  237. }
  238. .card h4 { margin: 0 0 8px; font-size: 14px; }
  239. .card p, .card li { margin: 0; color: var(--text-muted); font-size: 13px; }
  240. .card ol { margin: 0; padding-left: 18px; }
  241. .card li + li { margin-top: 4px; }
  242. textarea {
  243. width: 100%;
  244. min-height: 180px;
  245. margin-top: 8px;
  246. padding: 10px 12px;
  247. border: 1px solid var(--border);
  248. border-radius: 8px;
  249. resize: vertical;
  250. font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  251. font-size: 12px;
  252. line-height: 1.6;
  253. color: var(--text);
  254. background: #f8fafc;
  255. }
  256. .toast {
  257. position: fixed;
  258. left: 50%;
  259. bottom: 28px;
  260. transform: translateX(-50%) translateY(12px);
  261. opacity: 0;
  262. pointer-events: none;
  263. background: #1e293b;
  264. color: #fff;
  265. border-radius: 8px;
  266. padding: 10px 14px;
  267. font-size: 13px;
  268. transition: .2s ease;
  269. }
  270. .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  271. @media (max-width: 860px) {
  272. .below { grid-template-columns: 1fr; }
  273. }
  274. </style>
  275. </head>
  276. <body class="mode-list">
  277. <div class="demo-page">
  278. <header class="demo-head">
  279. <h1>Fresh Mint · <span>列表 / Excel 切换</span></h1>
  280. <p>Excel 入口在列表工具栏最右侧、刷新图标的左边。点一下进入选择复制,再点一下回到普通列表。</p>
  281. </header>
  282. <section class="panel">
  283. <div class="panel-top">
  284. <h3>客户列表</h3>
  285. </div>
  286. <div class="list-toolbar">
  287. <div class="list-toolbar-row">
  288. <div class="list-toolbar-selected">已选 <span class="sel-num" id="checked-count">0</span> 项</div>
  289. <button type="button" class="btn btn-main" id="btn-add">新增</button>
  290. <button type="button" class="btn" id="btn-copy" disabled>复制选区</button>
  291. <button type="button" class="btn" id="btn-clear" disabled>清空行列</button>
  292. <span class="list-toolbar-selected" id="range-label" style="border: 0; margin-left: 8px;">未选择行列</span>
  293. <div class="list-toolbar-end">
  294. <button type="button" class="icon-btn" id="mode-excel" title="Excel 复制" aria-label="Excel 复制" aria-pressed="false">
  295. <svg viewBox="0 0 16 16" aria-hidden="true">
  296. <rect x="1.5" y="2" width="13" height="12" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"/>
  297. <path d="M1.5 6.2h13M1.5 10h13M6.2 2v12M10.4 2v12" stroke="currentColor" stroke-width="1.1"/>
  298. </svg>
  299. </button>
  300. <button type="button" class="icon-btn" id="btn-refresh" title="刷新列表" aria-label="刷新列表">
  301. <svg viewBox="0 0 16 16" aria-hidden="true">
  302. <path d="M13.2 8a5.2 5.2 0 1 1-1.4-3.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
  303. <path d="M12.2 2.6v3.2H9" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
  304. </svg>
  305. </button>
  306. <button type="button" class="icon-btn" id="btn-columns" title="列设置" aria-label="列设置">
  307. <svg viewBox="0 0 16 16" aria-hidden="true">
  308. <circle cx="8" cy="8" r="2" fill="none" stroke="currentColor" stroke-width="1.4"/>
  309. <path d="M8 1.8v2.1M8 12.1v2.1M1.8 8h2.1M12.1 8h2.1M3.6 3.6l1.5 1.5M10.9 10.9l1.5 1.5M12.4 3.6l-1.5 1.5M5.1 10.9l-1.5 1.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
  310. </svg>
  311. </button>
  312. </div>
  313. </div>
  314. <div class="hint" id="hint"></div>
  315. </div>
  316. <div class="table-wrap">
  317. <table id="grid">
  318. <thead>
  319. <tr>
  320. <th class="col-check"></th>
  321. <th class="col-index">行号</th>
  322. <th class="col-head" data-col="0">客户名称</th>
  323. <th class="col-head" data-col="1">联系人</th>
  324. <th class="col-head" data-col="2">电话</th>
  325. <th class="col-head" data-col="3">地区</th>
  326. <th class="col-head" data-col="4">状态</th>
  327. <th class="col-action">操作</th>
  328. </tr>
  329. </thead>
  330. <tbody id="tbody"></tbody>
  331. </table>
  332. </div>
  333. </section>
  334. <div class="below">
  335. <div class="card">
  336. <h4>怎么试</h4>
  337. <ol>
  338. <li>先停在「列表」:点客户名称会提示打开查看,点勾选框会计入「已选 N 项」,点编辑会提示编辑。</li>
  339. <li>点刷新图标左侧的表格图标,进入 Excel 复制。图标变绿表示已打开,再点一次关闭。</li>
  340. <li>行号同样:单击多选行,Shift 连选一段行。列和行可以一起选,复制的是它们的交叉区域。</li>
  341. <li>只选了列时,复制这些列的全部行;只选了行时,复制这些行的全部数据列。然后 Ctrl/Cmd + C,或点「复制选区」。</li>
  342. </ol>
  343. </div>
  344. <div class="card">
  345. <h4>剪贴板预览</h4>
  346. <p>这就是剪贴板里的文本:列与列之间是制表符,行与行之间是换行。在 Excel 里 Ctrl/Cmd + V,会按行列落入单元格。第一行是表头。</p>
  347. <textarea id="preview" readonly placeholder="还没有复制"></textarea>
  348. </div>
  349. </div>
  350. </div>
  351. <div class="toast" id="toast"></div>
  352. <script>
  353. const COLS = ['客户名称', '联系人', '电话', '地区', '状态']
  354. const ROWS = [
  355. ['山峡化工', '张三', '13800001111', '重庆 / 长寿', '合作中'],
  356. ['华东贸易', '李四', '13900002222', '上海 / 浦东', '跟进中'],
  357. ['北港仓储', '王五', '13700003333', '天津 / 滨海', '合作中'],
  358. ['锦程物流', '赵六', '13600004444', '四川 / 成都', '跟进中'],
  359. ['清源新材', '陈七', '13500005555', '江苏 / 南京', '合作中'],
  360. ['泸州客户', '周八', '13400006666', '四川 / 泸州', '跟进中'],
  361. ['宜宾供应', '吴九', '13300007777', '四川 / 宜宾', '合作中'],
  362. ['万州门店', '郑十', '13200008888', '重庆 / 万州', '跟进中']
  363. ]
  364. const tbody = document.getElementById('tbody')
  365. const hint = document.getElementById('hint')
  366. const preview = document.getElementById('preview')
  367. const rangeLabel = document.getElementById('range-label')
  368. const checkedCount = document.getElementById('checked-count')
  369. const btnCopy = document.getElementById('btn-copy')
  370. const btnClear = document.getElementById('btn-clear')
  371. const toast = document.getElementById('toast')
  372. let mode = 'list'
  373. const selectedCols = new Set()
  374. const selectedRows = new Set()
  375. let lastCol = null
  376. let lastRow = null
  377. function showToast(text) {
  378. toast.textContent = text
  379. toast.classList.add('show')
  380. clearTimeout(showToast._t)
  381. showToast._t = setTimeout(() => toast.classList.remove('show'), 1600)
  382. }
  383. function statusTag(text) {
  384. const kind = text === '合作中' ? 'tag-success' : 'tag-warning'
  385. return '<span class="tag ' + kind + '">' + text + '</span>'
  386. }
  387. function renderRows() {
  388. tbody.innerHTML = ROWS.map((row, r) => {
  389. const cells = row.map((value, c) => {
  390. const inner = c === 0
  391. ? '<a class="link" href="#" data-name="' + value + '">' + value + '</a>'
  392. : c === 4
  393. ? statusTag(value)
  394. : value
  395. return '<td class="data-cell" data-row="' + r + '" data-col="' + c + '"><div class="cell-pad">' + inner + '</div></td>'
  396. }).join('')
  397. return '<tr>'
  398. + '<td class="col-check"><div class="cell-pad"><input class="row-check" type="checkbox" data-row="' + r + '" aria-label="选择第 ' + (r + 1) + ' 行"></div></td>'
  399. + '<td class="col-index row-head" data-row="' + r + '">' + (r + 1) + '</td>'
  400. + cells
  401. + '<td class="col-action"><div class="cell-pad"><button type="button" class="text-btn" data-edit="' + row[0] + '">编辑</button></div></td>'
  402. + '</tr>'
  403. }).join('')
  404. }
  405. function sortedIndexes(set) {
  406. return Array.from(set).sort((a, b) => a - b)
  407. }
  408. function copyAxes() {
  409. if (!selectedCols.size && !selectedRows.size) return null
  410. const cols = selectedCols.size ? sortedIndexes(selectedCols) : COLS.map((_, i) => i)
  411. const rows = selectedRows.size ? sortedIndexes(selectedRows) : ROWS.map((_, i) => i)
  412. return { cols, rows }
  413. }
  414. function toggleIndex(set, index, shift, last) {
  415. if (shift && last !== null) {
  416. const from = Math.min(last, index)
  417. const to = Math.max(last, index)
  418. for (let i = from; i <= to; i += 1) set.add(i)
  419. return index
  420. }
  421. if (set.has(index)) set.delete(index)
  422. else set.add(index)
  423. return index
  424. }
  425. function paint() {
  426. document.querySelectorAll('.data-cell').forEach((cell) => cell.classList.remove('selected'))
  427. document.querySelectorAll('.col-head').forEach((el) => el.classList.remove('col-active'))
  428. document.querySelectorAll('.row-head').forEach((el) => el.classList.remove('row-active'))
  429. const axes = mode === 'excel' ? copyAxes() : null
  430. const hasPick = selectedCols.size || selectedRows.size
  431. btnClear.disabled = mode !== 'excel' || !hasPick
  432. if (!axes) {
  433. rangeLabel.textContent = '未选择行列'
  434. btnCopy.disabled = true
  435. return
  436. }
  437. rangeLabel.innerHTML = '将复制 <span class="sel-num">' + axes.rows.length + '</span> 行 × <span class="sel-num">' + axes.cols.length + '</span> 列'
  438. btnCopy.disabled = false
  439. selectedCols.forEach((c) => {
  440. const head = document.querySelector('.col-head[data-col="' + c + '"]')
  441. if (head) head.classList.add('col-active')
  442. })
  443. selectedRows.forEach((r) => {
  444. const head = document.querySelector('.row-head[data-row="' + r + '"]')
  445. if (head) head.classList.add('row-active')
  446. })
  447. const colSet = new Set(axes.cols)
  448. const rowSet = new Set(axes.rows)
  449. document.querySelectorAll('.data-cell').forEach((cell) => {
  450. const r = Number(cell.dataset.row)
  451. const c = Number(cell.dataset.col)
  452. if (rowSet.has(r) && colSet.has(c)) cell.classList.add('selected')
  453. })
  454. }
  455. function clearAxes() {
  456. selectedCols.clear()
  457. selectedRows.clear()
  458. lastCol = null
  459. lastRow = null
  460. paint()
  461. }
  462. function setMode(next) {
  463. mode = next
  464. document.body.classList.toggle('mode-excel', mode === 'excel')
  465. document.body.classList.toggle('mode-list', mode === 'list')
  466. const excelBtn = document.getElementById('mode-excel')
  467. excelBtn.classList.toggle('active', mode === 'excel')
  468. excelBtn.setAttribute('aria-pressed', mode === 'excel' ? 'true' : 'false')
  469. excelBtn.title = mode === 'excel' ? '退出 Excel 复制' : 'Excel 复制'
  470. if (mode === 'list') {
  471. clearAxes()
  472. hint.innerHTML = '<strong>列表模式。</strong> 单击名称打开查看,勾选框用于批量操作,编辑按钮保持可用。'
  473. } else {
  474. hint.innerHTML = '<strong>Excel 模式。</strong> 点表头多选列,点行号多选行。Shift 可一次连选一段。只选列则复制这些列的全部行,只选行则复制这些行的全部列,两边都选则复制交叉区域。'
  475. paint()
  476. }
  477. }
  478. function excelCell(value) {
  479. return String(value ?? '').replace(/\t/g, ' ').replace(/\r?\n/g, ' ')
  480. }
  481. function selectionText() {
  482. const axes = copyAxes()
  483. if (!axes) return ''
  484. const lines = [axes.cols.map((c) => excelCell(COLS[c])).join('\t')]
  485. axes.rows.forEach((r) => {
  486. lines.push(axes.cols.map((c) => excelCell(ROWS[r][c])).join('\t'))
  487. })
  488. return lines.join('\r\n')
  489. }
  490. async function copySelection() {
  491. const text = selectionText()
  492. if (!text) return
  493. preview.value = text
  494. try {
  495. await navigator.clipboard.write([
  496. new ClipboardItem({
  497. 'text/plain': new Blob([text], { type: 'text/plain' })
  498. })
  499. ])
  500. showToast('已复制,到 Excel 中直接粘贴')
  501. } catch (err) {
  502. try {
  503. await navigator.clipboard.writeText(text)
  504. showToast('已复制,到 Excel 中直接粘贴')
  505. return
  506. } catch (err2) {
  507. /* 预览区仍保留文本 */
  508. }
  509. preview.focus()
  510. preview.select()
  511. showToast('浏览器未授权剪贴板,文本已放在右侧预览')
  512. }
  513. }
  514. function refreshChecked() {
  515. const n = document.querySelectorAll('.row-check:checked').length
  516. checkedCount.textContent = String(n)
  517. }
  518. renderRows()
  519. setMode('list')
  520. document.getElementById('mode-excel').addEventListener('click', () => {
  521. setMode(mode === 'excel' ? 'list' : 'excel')
  522. })
  523. document.getElementById('btn-refresh').addEventListener('click', () => showToast('刷新列表'))
  524. document.getElementById('btn-columns').addEventListener('click', () => showToast('列设置'))
  525. document.getElementById('btn-add').addEventListener('click', () => showToast('这里只是演示,不会新增'))
  526. btnCopy.addEventListener('click', copySelection)
  527. btnClear.addEventListener('click', clearAxes)
  528. document.getElementById('grid').addEventListener('click', (event) => {
  529. const edit = event.target.closest('[data-edit]')
  530. const link = event.target.closest('.link')
  531. const check = event.target.closest('.row-check')
  532. if (mode === 'list') {
  533. if (link) {
  534. event.preventDefault()
  535. showToast('打开查看:' + link.dataset.name)
  536. } else if (edit) {
  537. showToast('编辑:' + edit.dataset.edit)
  538. } else if (check) {
  539. refreshChecked()
  540. }
  541. return
  542. }
  543. if (link) event.preventDefault()
  544. if (check || edit) {
  545. event.preventDefault()
  546. if (check) check.checked = false
  547. showToast('Excel 模式下勾选和编辑已暂停')
  548. }
  549. })
  550. document.getElementById('grid').addEventListener('click', (event) => {
  551. if (mode !== 'excel') return
  552. const head = event.target.closest('.col-head')
  553. const rowHead = event.target.closest('.row-head')
  554. if (head) {
  555. lastCol = toggleIndex(selectedCols, Number(head.dataset.col), event.shiftKey, lastCol)
  556. paint()
  557. return
  558. }
  559. if (rowHead) {
  560. lastRow = toggleIndex(selectedRows, Number(rowHead.dataset.row), event.shiftKey, lastRow)
  561. paint()
  562. }
  563. })
  564. document.addEventListener('keydown', (event) => {
  565. if (mode !== 'excel') return
  566. if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'c') {
  567. if (!copyAxes()) return
  568. event.preventDefault()
  569. copySelection()
  570. }
  571. if (event.key === 'Escape') clearAxes()
  572. })
  573. </script>
  574. </body>
  575. </html>