update at 2026-02-13 22:26:53
@@ -1,10 +1,21 @@
|
||||
# 小程序端骨架
|
||||
# 小程序端(当前可用范围)
|
||||
|
||||
当前目录提供了与 Figma `node-id=584:64` 对齐的页面骨架:
|
||||
当前目录已从骨架升级为可用版,支持以下能力:
|
||||
|
||||
- 顶部 Logo/主题/上传/导出区域
|
||||
- 效果预览区域
|
||||
- 源数据与目标数据列选择区域
|
||||
- 主题底部选择器(底部弹层)
|
||||
- 顶部 Logo / 主题 / 上传 / 导出区域
|
||||
- 文件上传与解析:`csv / xls / xlsx`
|
||||
- 默认列映射:
|
||||
- 源数据列优先匹配 `data/value/数据/值`
|
||||
- 源描述列优先匹配 `source/源`
|
||||
- 目标描述列优先匹配 `target/目标`
|
||||
- 若无显式数值表头,则回退到第二行首个数字列
|
||||
- 源/目标列选择交互与聚合统计
|
||||
- 信息日志(解析信息 / 告警 / 错误)
|
||||
- 原生 canvas 桑基图预览
|
||||
- 导出能力:
|
||||
- `PNG`:保存到系统相册
|
||||
- `SVG`:生成 `.svg` 文件写入用户目录,优先尝试打开,失败时复制路径
|
||||
|
||||
后续接入时建议直接复用 `src/core` 的解析与聚合逻辑,保持 Web 与小程序一致的数据行为。
|
||||
注意事项:
|
||||
- `xlsx` 解析依赖 npm 包,若在微信开发者工具中提示模块缺失,请先执行“工具 -> 构建 npm”。
|
||||
- SVG 文件导出后是否可直接预览,取决于当前系统与微信版本对 SVG 文档的支持。
|
||||
|
||||
5
miniapp/assets/icons/Button.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="88" fill="none" viewBox="0 0 34 88">
|
||||
<rect width="33" height="87" x=".5" y=".5" fill="#2420A8" rx="7.5"/>
|
||||
<rect width="33" height="87" x=".5" y=".5" stroke="#2420A8" rx="7.5"/>
|
||||
<path fill="#fff" d="M8.72 35.978h10.8v-.81h1.89v.81h3.852v1.836H21.41v3.33c0 1.188-.648 1.782-1.944 1.782h-2.25l-.432-1.836c.72.072 1.386.126 2.034.126.468 0 .702-.18.702-.54v-2.862H8.72v-1.836Zm13.95-9.198v4.662H12.392v.774c0 .486.252.738.792.738h9.306c.27-.018.45-.108.558-.288.072-.126.144-.54.234-1.242l1.782.594c-.126.828-.252 1.404-.378 1.764-.216.576-.756.864-1.584.9H12.428c-1.296 0-1.926-.576-1.926-1.71V26.78H22.67Zm-10.278 2.97h8.388v-1.278h-8.388v1.278Zm.954 8.154c1.152.9 2.142 1.8 2.934 2.7l-1.404 1.404c-.684-.864-1.638-1.8-2.88-2.808l1.35-1.296Zm8.208 12.384v-4.734h1.89v6.534h-5.472v6.048h4.482v-4.698h1.89v7.308h-1.89v-.792H9.656v-6.516h1.89v4.698h4.482v-6.048h-5.472v-6.534h1.89v4.734h3.582v-6.084h1.944v6.084h3.582Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 989 B |
3
miniapp/assets/icons/checkbox-no.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
|
||||
<rect x="1" y="1" width="18" height="18" rx="4" stroke="#8552A1" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 189 B |
4
miniapp/assets/icons/checkbox.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
|
||||
<path fill="#8552A1" d="M15.5 0h-11A4.5 4.5 0 0 0 0 4.5v11A4.5 4.5 0 0 0 4.5 20h11a4.5 4.5 0 0 0 4.5-4.5v-11A4.5 4.5 0 0 0 15.5 0Zm1.394 6.902-7.445 7.444-.03.028-.033.028-.037.028-.035.025-.039.024-.036.021-.042.02-.037.018-.044.016-.037.014-.045.01-.038.01-.047.007H8.74l-.048-.006h-.035l-.05-.011-.033-.01-.049-.015-.032-.012-.048-.022-.031-.015-.047-.028-.03-.016c-.017-.011-.033-.024-.05-.036l-.022-.016a.887.887 0 0 1-.067-.06l-3.949-3.95a.883.883 0 0 1 .01-1.26.904.904 0 0 1 1.261.033l3.304 3.303 6.82-6.82a.884.884 0 1 1 1.25 1.25l-.001-.002Z"/>
|
||||
<path fill="#fff" d="m15.645 5.654-6.82 6.82L5.523 9.17a.904.904 0 0 0-1.263-.03.883.883 0 0 0-.011 1.259l3.95 3.948a.866.866 0 0 0 .068.06l.022.016a.711.711 0 0 0 .05.037l.029.016.047.027.031.015.048.023.033.011.048.017.034.008.049.011h.035l.048.007h.208l.048-.008.037-.008.045-.012.037-.014.044-.016.038-.017.041-.02.036-.022.039-.023.035-.025.037-.028.033-.028.03-.028 7.444-7.444a.886.886 0 0 0 0-1.25.885.885 0 0 0-1.25 0l.001.003Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
21
miniapp/assets/icons/choose-color.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="none" viewBox="0 0 36 36">
|
||||
<path fill="#FCFCFC" d="M22.774 13.238a6.734 6.734 0 1 1-4.77-1.98 6.702 6.702 0 0 1 4.77 1.98Z"/>
|
||||
<path fill="#00E8CF" d="M18.005 6.76v4.498a6.703 6.703 0 0 0-4.769 1.98L10.05 10.05a11.238 11.238 0 0 1 7.955-3.292Z"/>
|
||||
<path fill="#70FFEF" d="M18.005.761V6.76a11.239 11.239 0 0 0-7.955 3.292L5.813 5.815A17.162 17.162 0 0 1 18.005.76Z"/>
|
||||
<path fill="#0064B5" d="m10.05 10.051 3.186 3.187a6.702 6.702 0 0 0-1.98 4.768H6.759a11.239 11.239 0 0 1 3.292-7.955Z"/>
|
||||
<path fill="#0091FF" d="M10.05 10.051a11.238 11.238 0 0 0-3.292 7.955H.76A17.162 17.162 0 0 1 5.813 5.815l4.237 4.236Z"/>
|
||||
<path fill="#31C4FF" d="M11.257 18.006a6.7 6.7 0 0 0 1.98 4.769l-3.187 3.187a11.24 11.24 0 0 1-3.292-7.956h4.499Z"/>
|
||||
<path fill="#9EEBFF" d="M6.758 18.006a11.24 11.24 0 0 0 3.292 7.956l-4.237 4.236A17.162 17.162 0 0 1 .76 18.006h5.998Z"/>
|
||||
<path fill="#5F4A9E" d="M18.005 24.754v4.5a11.239 11.239 0 0 1-7.955-3.292l3.186-3.187a6.702 6.702 0 0 0 4.769 1.98Z"/>
|
||||
<path fill="#9D87E0" d="M10.05 25.962a11.24 11.24 0 0 0 7.955 3.291v5.998a17.16 17.16 0 0 1-12.192-5.053l4.237-4.236Z"/>
|
||||
<path fill="#FF468C" d="M25.96 25.962a11.241 11.241 0 0 1-7.955 3.291v-4.499a6.7 6.7 0 0 0 4.769-1.98l3.186 3.188Z"/>
|
||||
<path fill="#FFA1C8" d="m25.96 25.962 4.236 4.236a17.162 17.162 0 0 1-12.191 5.053v-5.998a11.239 11.239 0 0 0 7.955-3.291Z"/>
|
||||
<path fill="#F03049" d="M24.753 18.006h4.499a11.241 11.241 0 0 1-3.292 7.956l-3.186-3.187a6.7 6.7 0 0 0 1.979-4.769Z"/>
|
||||
<path fill="#FF636E" d="M29.252 18.006h5.998a17.163 17.163 0 0 1-5.053 12.192l-4.237-4.236a11.241 11.241 0 0 0 3.292-7.956Z"/>
|
||||
<path fill="#FE8205" d="M25.96 10.051a11.24 11.24 0 0 1 3.292 7.955h-4.499a6.701 6.701 0 0 0-1.98-4.768l3.187-3.187Z"/>
|
||||
<path fill="#FFA426" d="M35.25 18.006h-5.998a11.24 11.24 0 0 0-3.292-7.955l4.236-4.236a17.163 17.163 0 0 1 5.054 12.191Z"/>
|
||||
<path fill="#FFC247" d="m25.96 10.051-3.186 3.187a6.702 6.702 0 0 0-4.77-1.98V6.76a11.24 11.24 0 0 1 7.956 3.292Z"/>
|
||||
<path fill="#FFFD78" d="M30.197 5.815 25.96 10.05a11.24 11.24 0 0 0-7.955-3.292V.761a17.162 17.162 0 0 1 12.192 5.054Z"/>
|
||||
<path fill="#000" d="m32.863 10.832 1.35-.653a19.376 19.376 0 0 0-.854-1.56L32.08 9.4c.286.467.546.948.783 1.432Z"/>
|
||||
<path fill="#000" d="m34.88 11.743-1.406.525c.589 1.601.924 3.284.993 4.988H29.97a11.883 11.883 0 0 0-2.967-7.186l3.186-3.185c.317.347.62.707.905 1.08l1.19-.914a17.995 17.995 0 0 0-29.629 20.35l1.277-.786a16.459 16.459 0 0 1-2.405-7.859H6.03a11.882 11.882 0 0 0 2.985 7.18l-3.188 3.187a16.61 16.61 0 0 1-.91-1.075l-1.19.914A18 18 0 0 0 34.88 11.744ZM5.822 6.883l3.185 3.187a11.883 11.883 0 0 0-2.965 7.186H1.543a16.345 16.345 0 0 1 4.28-10.372Zm16.424 15.365a5.998 5.998 0 1 1 1.757-4.242 5.96 5.96 0 0 1-1.757 4.242ZM12.2 13.26a7.424 7.424 0 0 0-1.652 3.995H7.545a10.39 10.39 0 0 1 2.533-6.116l2.121 2.12Zm10.55-1.06a7.423 7.423 0 0 0-3.995-1.651V7.546a10.39 10.39 0 0 1 6.117 2.533L22.75 12.2Zm-5.495-1.655a7.422 7.422 0 0 0-3.993 1.658l-2.124-2.123a10.39 10.39 0 0 1 6.117-2.534v3Zm-6.711 8.211A7.423 7.423 0 0 0 12.2 22.75l-2.123 2.124a10.39 10.39 0 0 1-2.533-6.117h2.999Zm2.715 5.057a7.423 7.423 0 0 0 3.996 1.65v3.004a10.39 10.39 0 0 1-6.117-2.534l2.121-2.12Zm5.496 1.654a7.423 7.423 0 0 0 3.993-1.657l2.123 2.123a10.39 10.39 0 0 1-6.116 2.534v-3Zm7.177-.594-2.121-2.121a7.423 7.423 0 0 0 1.651-3.996h3.003a10.39 10.39 0 0 1-2.533 6.117Zm2.533-7.617h-2.999a7.423 7.423 0 0 0-1.658-3.993l2.124-2.123a10.39 10.39 0 0 1 2.533 6.116Zm-9.71-15.729a16.358 16.358 0 0 1 10.36 4.31l-3.181 3.18a11.89 11.89 0 0 0-7.18-2.985V1.527Zm-1.5.018v4.5a11.89 11.89 0 0 0-7.187 2.964L6.882 5.824a16.345 16.345 0 0 1 10.373-4.279Zm-7.187 25.459a11.89 11.89 0 0 0 7.187 2.965v4.499a16.354 16.354 0 0 1-10.373-4.28l3.186-3.184Zm8.687 7.481V29.98a11.898 11.898 0 0 0 7.186-2.976l3.186 3.186a16.37 16.37 0 0 1-10.372 4.295Zm11.42-5.37-3.18-3.18a11.882 11.882 0 0 0 2.983-7.179h4.506a16.352 16.352 0 0 1-4.31 10.36Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
4
miniapp/assets/icons/content.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="36" fill="none" viewBox="0 0 23 36">
|
||||
<path fill="#3EE4C3" d="M3.42 4.593v13.353H0V2.27h9.135V0h3.52v2.271h9.26v13.354a2.15 2.15 0 0 1-.662 1.597c-.44.433-.977.649-1.61.649h-4.168l.749-2.047h1.747a.57.57 0 0 0 .4-.162.537.537 0 0 0 .174-.412l.025-10.657h-5.915v.524l-.624 1.248h2.72l2.87 8.111h-3.519l-2.52-7.188-3.57 7.188H4.493l4.642-9.36v-.523H3.42Z"/>
|
||||
<path fill="#3EE4C3" d="M3.47 21.224v1.348H0v-3.82h9.01l-.374-.873h3.769l.4.874h6.564a2.716 2.716 0 0 1 1.947.799 2.735 2.735 0 0 1 .798 1.947v1.073h-3.47v-.574c0-.217-.074-.4-.224-.55a.747.747 0 0 0-.549-.224H3.47ZM1.272 29.46h19.494v3.793a2.716 2.716 0 0 1-.798 1.947 2.735 2.735 0 0 1-1.948.8H1.273v-6.539Zm15.05 2.146H5.717v2.221h9.434c.333 0 .612-.112.837-.336a1.14 1.14 0 0 0 .337-.837v-1.048Zm-5.191-5.965-5.167 3.195H.05l8.286-4.967h5.666l-2.645 1.647h5.116l5.491 3.32H16.15l-5.017-3.195Zm1.473-3.47h4.917l4.268 2.621h-4.892l-4.293-2.62ZM5.49 24.793H.6l4.293-2.62h4.892l-4.293 2.62Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1019 B |
6
miniapp/assets/icons/data-select.svg
Normal file
|
After Width: | Height: | Size: 8.1 KiB |
3
miniapp/assets/icons/data.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="none" viewBox="0 0 19 19">
|
||||
<path fill="#FF7B15" d="M2.499 15.435a2.105 2.105 0 0 1-2.105-2.104V6.314a2.105 2.105 0 0 1 4.21 0v7.017a2.105 2.105 0 0 1-2.105 2.104Zm6.548 0a2.105 2.105 0 0 1-2.105-2.104V2.104a2.105 2.105 0 0 1 4.21 0V13.33a2.105 2.105 0 0 1-2.105 2.104Zm6.548 0a2.105 2.105 0 0 1-2.105-2.104v-2.807a2.105 2.105 0 1 1 4.21 0v2.807a2.105 2.105 0 0 1-2.105 2.104Zm2.105 2.616H.394a.394.394 0 0 1 0-.788H17.7a.394.394 0 0 1 0 .788Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 524 B |
6
miniapp/assets/icons/description.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18">
|
||||
<path fill="#F9D11F" d="M11.327 18.005H2.1a2.043 2.043 0 0 1-1.485-.651A2.291 2.291 0 0 1 0 15.78V2.224C0 1.634.221 1.068.615.65A2.043 2.043 0 0 1 2.1 0h9.227a2 2 0 0 1 .803.17c.255.111.487.275.682.481.195.207.35.452.455.722.106.27.16.559.16.85v13.558c0 .292-.054.581-.16.851-.105.27-.26.515-.455.721a2.1 2.1 0 0 1-.681.482 2 2 0 0 1-.804.17Z"/>
|
||||
<path fill="#4C86C6" d="m12.187 14.972 5.097-5.396A2.776 2.776 0 0 0 18 7.682a2.772 2.772 0 0 0-.745-1.88 2.473 2.473 0 0 0-1.777-.788 2.469 2.469 0 0 0-1.788.758l-5.096 5.396v3.804h3.593Z"/>
|
||||
<path fill="#fff" d="M2.506 14.971h6.087v-1.705H2.506v1.705Zm0-10.801h8.415V2.464H2.506V4.17Zm2.328 2.842h3.938V5.306H4.834v1.706Z"/>
|
||||
<path fill="#1565B2" d="m8.594 11.168-.001 3.803 3.594.001 1.24-1.313V6.051l-4.833 5.117Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 876 B |
3
miniapp/assets/icons/download.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
|
||||
<path fill="#000" d="M8.31 6H6.818V4.364a.273.273 0 0 0-.273-.273h-1.09a.273.273 0 0 0-.273.273v1.639l-1.506.007a.123.123 0 0 0-.114.074l-.001.002c-.003.008-.004.017-.006.026-.001.008-.003.016-.003.025v.005c0 .005.002.01.003.014.002.01.005.021.01.032l.008.014c.005.008.008.016.014.023l2.254 2.518c.004.006.01.009.016.013.003.003.004.007.008.01.003.002.007.002.01.005a.139.139 0 0 0 .028.012l.01.004c.038.011.08.008.11-.017.008-.006.012-.014.017-.022.004-.003.009-.005.012-.009l2.346-2.515c.007-.008.01-.017.016-.026l.007-.011a.123.123 0 0 0 .01-.032c0-.004.004-.008.004-.013v-.013A.121.121 0 0 0 8.31 6ZM5.455 3.818h1.09a.272.272 0 0 0 .273-.272v-.273A.273.273 0 0 0 6.545 3h-1.09a.273.273 0 0 0-.273.273v.273c0 .15.122.272.273.272ZM6 0a6 6 0 1 0 0 12A6 6 0 0 0 6 0Zm0 10.91a4.909 4.909 0 1 1 0-9.82 4.909 4.909 0 0 1 0 9.818Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 935 B |
3
miniapp/assets/icons/expand.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 15 15">
|
||||
<path fill="#000" d="M7.5 0a7.5 7.5 0 0 0 0 15 7.5 7.5 0 0 0 0-15Zm4.242 6.567L8.03 10.28a.751.751 0 0 1-1.062 0l-3.71-3.713A.751.751 0 0 1 4.32 5.505L7.5 8.688l3.183-3.18a.75.75 0 1 1 1.06 1.06Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 304 B |
4
miniapp/assets/icons/export-png-s.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="12" fill="none" viewBox="0 0 25 12">
|
||||
<rect width="25" height="11.908" fill="#FFE4BA" rx="4"/>
|
||||
<path fill="#1D2129" d="M3 9.908V2h2.762c.535 0 .94.033 1.216.1.275.067.539.199.79.396.685.535 1.027 1.357 1.027 2.466 0 .842-.252 1.523-.755 2.042a2.27 2.27 0 0 1-.868.567c-.326.118-.726.177-1.198.177H4.582v2.16H3Zm2.656-6.68H4.582V6.52h.967c.512 0 .886-.11 1.122-.33.33-.291.495-.74.495-1.346 0-.519-.13-.918-.39-1.198-.259-.279-.633-.419-1.12-.419Zm4.296 4.52V2h3.045c.456 0 .805.033 1.044.1.24.067.459.187.655.36.402.37.602.952.602 1.747v3.54h-1.581V4.03c0-.283-.063-.488-.189-.614s-.334-.189-.626-.189h-1.369v4.52H9.952ZM19.335 2h2.95v5.713c0 .322-.037.61-.111.861a1.802 1.802 0 0 1-.325.638c-.181.22-.4.371-.655.454-.256.083-.628.124-1.116.124h-3.15V8.562h2.938c.346 0 .573-.053.679-.159.106-.106.16-.325.16-.655h-1.453c-.464 0-.848-.05-1.15-.148a2.173 2.173 0 0 1-.82-.49c-.575-.542-.862-1.29-.862-2.242 0-1.086.35-1.877 1.05-2.372a2.44 2.44 0 0 1 .797-.384c.28-.075.635-.112 1.068-.112Zm1.37 4.52V3.229h-1.311c-.913 0-1.37.55-1.37 1.652 0 .535.125.942.373 1.221.248.28.608.42 1.08.42h1.227Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
5
miniapp/assets/icons/export-png.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="24" r="24" fill="#2420A8" opacity=".2"/>
|
||||
<circle cx="24" cy="24" r="18" fill="#2420A8"/>
|
||||
<path fill="#F3EDF7" d="M9 31.301v-12.3h4.296c.833 0 1.463.051 1.891.155.429.104.839.31 1.23.615 1.065.832 1.598 2.112 1.598 3.837 0 1.31-.392 2.369-1.175 3.177a3.537 3.537 0 0 1-1.35.88c-.508.184-1.129.276-1.863.276H11.46v3.36H9Zm4.131-10.391h-1.67v5.122h1.505c.795 0 1.377-.172 1.744-.514.514-.453.771-1.15.771-2.093 0-.808-.202-1.43-.606-1.864-.404-.434-.985-.651-1.744-.651Zm6.683 7.031v-8.94h4.737c.71 0 1.251.051 1.625.155.373.104.713.29 1.019.56.624.575.936 1.481.936 2.717v5.508h-2.46v-5.783c0-.44-.098-.759-.294-.955-.196-.196-.52-.293-.973-.293h-2.13v7.031h-2.46ZM34.41 19H39v8.886c0 .502-.058.949-.174 1.34a2.807 2.807 0 0 1-.505.992 2.161 2.161 0 0 1-1.02.707c-.397.128-.975.193-1.734.193h-4.902v-1.91h4.571c.539 0 .89-.082 1.056-.248.165-.165.248-.505.248-1.019h-2.258c-.723 0-1.32-.076-1.79-.23a3.381 3.381 0 0 1-1.277-.761c-.893-.845-1.34-2.008-1.34-3.488 0-1.69.545-2.92 1.634-3.69a3.806 3.806 0 0 1 1.24-.598c.434-.116.988-.174 1.661-.174Zm2.13 7.032V20.91h-2.038c-1.42 0-2.13.856-2.13 2.57 0 .832.193 1.466.578 1.9.386.435.946.652 1.68.652h1.91Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
4
miniapp/assets/icons/export-svg-s.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="12" fill="none" viewBox="0 0 25 12">
|
||||
<rect width="25" height="11.921" fill="#E3D6EE" rx="4"/>
|
||||
<path fill="#1D2129" d="M4.968 2H8.4v1.248H5.556c-.328 0-.536.016-.624.048-.184.064-.276.22-.276.468 0 .208.088.368.264.48.096.064.356.096.78.096h.948c.608 0 1.088.128 1.44.384.392.288.588.712.588 1.272 0 .424-.12.812-.36 1.164-.176.28-.39.464-.642.552-.252.088-.674.132-1.266.132H3.084V6.596h2.868c.352 0 .592-.004.72-.012.288-.032.432-.196.432-.492 0-.24-.096-.404-.288-.492-.096-.048-.328-.072-.696-.072h-.972c-.384 0-.678-.024-.882-.072a1.575 1.575 0 0 1-.57-.264 1.542 1.542 0 0 1-.51-.63A2.019 2.019 0 0 1 3 3.704c0-.584.212-1.048.636-1.392.256-.208.7-.312 1.332-.312Zm5.995 0 1.488 4.02L14.083 2h1.704l-2.52 5.844h-1.728L9.21 2h1.752Zm8.322 0h3v5.808c0 .328-.037.62-.113.876a1.834 1.834 0 0 1-.33.648 1.412 1.412 0 0 1-.666.462c-.26.084-.638.126-1.134.126h-3.205V8.672h2.989c.351 0 .581-.054.69-.162.108-.108.162-.33.162-.666H19.2c-.472 0-.862-.05-1.17-.15a2.21 2.21 0 0 1-.834-.498c-.584-.552-.876-1.312-.876-2.28 0-1.104.356-1.908 1.068-2.412.256-.184.526-.314.81-.39.284-.076.646-.114 1.086-.114Zm1.392 4.596V3.248h-1.331c-.929 0-1.393.56-1.393 1.68 0 .544.126.958.378 1.242.252.284.618.426 1.099.426h1.247Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
5
miniapp/assets/icons/export-svg.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="24" r="24" fill="#8552A1" opacity=".2"/>
|
||||
<circle cx="24" cy="24" r="18" fill="#8552A1"/>
|
||||
<path fill="#F3EDF7" d="M12.062 18.99H17.4v1.942h-4.425c-.51 0-.834.025-.97.074-.287.1-.43.343-.43.728 0 .324.137.573.41.747.15.1.555.15 1.214.15h1.475c.946 0 1.692.199 2.24.597.61.448.915 1.107.915 1.979 0 .66-.187 1.263-.56 1.81-.274.436-.607.722-.999.86-.392.136-1.048.204-1.97.204H9.13V26.14h4.461c.548 0 .921-.006 1.12-.019.448-.05.672-.305.672-.765 0-.373-.149-.629-.448-.765-.149-.075-.51-.112-1.082-.112h-1.512c-.598 0-1.055-.038-1.373-.112a2.451 2.451 0 0 1-.886-.411 2.399 2.399 0 0 1-.794-.98A3.14 3.14 0 0 1 9 21.64c0-.908.33-1.63.99-2.165.398-.324 1.088-.486 2.072-.486Zm9.325 0 2.314 6.254 2.54-6.254h2.65l-3.92 9.091h-2.688l-3.622-9.09h2.726Zm12.946 0H39v9.036c0 .51-.06.964-.177 1.362-.118.398-.29.734-.514 1.008a2.196 2.196 0 0 1-1.036.719c-.404.13-.992.196-1.764.196h-4.984V29.37h4.648c.548 0 .905-.084 1.073-.252.168-.168.252-.514.252-1.037h-2.296c-.734 0-1.34-.077-1.82-.233a3.438 3.438 0 0 1-1.297-.774c-.909-.86-1.363-2.042-1.363-3.547 0-1.718.554-2.969 1.662-3.753a3.86 3.86 0 0 1 1.26-.606c.442-.119 1.005-.178 1.69-.178Zm2.166 7.15v-5.208h-2.073c-1.443 0-2.165.871-2.165 2.613 0 .847.196 1.49.588 1.932.392.442.961.663 1.708.663h1.941Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
miniapp/assets/icons/export.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="42" fill="none" viewBox="0 0 18 42">
|
||||
<path fill="#00E8CF" d="M12.723 5.08H3.775v.442c0 .513.14.917.42 1.212.263.28.652.42 1.164.42h7.2c.56 0 .987-.125 1.282-.373.264-.233.42-.59.466-1.072l.07-.955a.771.771 0 0 1 .268-.56.882.882 0 0 1 .594-.21.794.794 0 0 1 .571.28.81.81 0 0 1 .198.606l-.07.955c-.078.948-.42 1.678-1.025 2.19-.606.529-1.39.793-2.354.793h-7.2c-.947 0-1.732-.303-2.353-.909-.606-.606-.909-1.398-.909-2.377V.816c0-.218.082-.408.245-.571A.809.809 0 0 1 2.936 0h9.787c.217 0 .411.082.582.245a.764.764 0 0 1 .256.57v3.45a.754.754 0 0 1-.256.582.842.842 0 0 1-.582.233ZM.839 11.068h10.043v-.979a.78.78 0 0 1 .244-.57.809.809 0 0 1 .595-.245c.217 0 .407.082.57.245a.782.782 0 0 1 .245.57v.98h3.659c.217 0 .407.08.57.244a.782.782 0 0 1 .245.57.808.808 0 0 1-.245.595.782.782 0 0 1-.57.245h-3.659v7.572a.809.809 0 0 1-.245.595.782.782 0 0 1-.57.244.81.81 0 0 1-.595-.244.809.809 0 0 1-.244-.595v-7.572H.839a.809.809 0 0 1-.594-.245.809.809 0 0 1-.245-.594c0-.218.082-.408.245-.571a.809.809 0 0 1 .594-.245Zm11.045-9.414h-8.11V3.45h8.11V1.654ZM6.198 14.866v2.866a.809.809 0 0 1-.245.595.782.782 0 0 1-.57.244.809.809 0 0 1-.595-.244.809.809 0 0 1-.244-.595v-2.866a.81.81 0 0 1 .244-.594.809.809 0 0 1 .595-.245c.217 0 .407.082.57.245a.81.81 0 0 1 .245.594ZM1.266 41.161v-7.456c0-.233.081-.431.244-.594a.809.809 0 0 1 .595-.245c.233 0 .427.081.582.245a.83.83 0 0 1 .233.594v6.64h4.66v-9.6H2.99a.83.83 0 0 1-.594-.233.771.771 0 0 1-.245-.582v-6.268c0-.218.082-.408.245-.571a.809.809 0 0 1 .594-.245c.218 0 .408.082.571.245a.782.782 0 0 1 .245.57v5.453H7.58v-7.2a.81.81 0 0 1 .245-.594.809.809 0 0 1 .594-.245c.218 0 .408.082.571.245a.809.809 0 0 1 .245.594v7.2h3.775v-5.569a.78.78 0 0 1 .244-.57.809.809 0 0 1 .595-.245.78.78 0 0 1 .57.244.782.782 0 0 1 .245.571v6.385a.771.771 0 0 1-.245.582.801.801 0 0 1-.57.233H9.235v9.6h4.66v-6.757a.81.81 0 0 1 .245-.594.782.782 0 0 1 .57-.245.81.81 0 0 1 .595.245.81.81 0 0 1 .245.594v7.573a.809.809 0 0 1-.245.594.81.81 0 0 1-.594.245H2.105a.809.809 0 0 1-.595-.245.809.809 0 0 1-.244-.594Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
3
miniapp/assets/icons/favorite-red.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="10" fill="none" viewBox="0 0 11 10">
|
||||
<path fill="#FF0D0D" d="M7.549 0C6.645 0 5.807.455 5.25 1.203 4.7.455 3.855 0 2.951 0 1.323 0 0 1.449 0 3.227c0 1.06.473 1.807.856 2.406 1.108 1.742 3.897 3.903 4.017 3.993a.603.603 0 0 0 .754 0c.12-.09 2.904-2.257 4.017-3.993.383-.599.856-1.347.856-2.406C10.5 1.449 9.177 0 7.549 0Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 392 B |
3
miniapp/assets/icons/favorite.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" fill="none" viewBox="0 0 18 17">
|
||||
<path fill="#fff" stroke="#8552A1" stroke-width=".855" d="M12.94.428c2.52 0 4.632 2.255 4.632 5.103 0 1.68-.743 2.87-1.4 3.895-.92 1.437-2.554 3.077-4.008 4.394a49.45 49.45 0 0 1-2.774 2.34l-.008.006a.607.607 0 0 1-.673.06l-.09-.06-.009-.007-.27-.21a51.872 51.872 0 0 1-2.508-2.125c-1.455-1.316-3.088-2.955-4.004-4.396v-.001l-.249-.394C.997 8.096.428 7.001.428 5.531.428 2.683 2.54.428 5.06.428c1.402 0 2.725.706 3.595 1.888l.343.465.345-.463c.882-1.185 2.196-1.89 3.597-1.89Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 585 B |
4
miniapp/assets/icons/font-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10">
|
||||
<path fill="#0079F5" d="M7.432 9.596H2.164A2.165 2.165 0 0 1 0 7.432V2.164C0 .97.97 0 2.164 0h5.268c1.195 0 2.164.97 2.164 2.164v5.268c0 1.195-.97 2.164-2.164 2.164Z"/>
|
||||
<path fill="#fff" d="M6.24 2.982a.36.36 0 0 0-.662 0l-1.272 2.98a.24.24 0 1 0 .444.186l.147-.352a.813.813 0 0 1 .75-.501h.524c.328 0 .624.198.75.5l.147.353a.24.24 0 1 0 .444-.187L6.24 2.982Zm.058 1.312a.42.42 0 1 1-.776.324.42.42 0 0 1 .776-.324Zm-3.01-.587a.253.253 0 0 0-.465 0l-.774 1.814a.18.18 0 1 0 .333.14l.08-.194a.495.495 0 0 1 .457-.305h.273c.2 0 .38.12.457.305l.08.194a.18.18 0 1 0 .333-.14l-.774-1.814ZM3.055 4.84a.222.222 0 1 1 0-.443.222.222 0 0 1 0 .443Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
3
miniapp/assets/icons/font-size-decrease.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
|
||||
<path fill="#5C5C66" d="M10.333 14.667a.333.333 0 0 1-.31-.213L8.55 10.667H2.784L1.31 14.454a.333.333 0 1 1-.622-.242l4.667-12a.333.333 0 0 1 .621 0l4.667 12a.335.335 0 0 1-.155.416.334.334 0 0 1-.156.039ZM3.043 10H8.29L5.667 3.253 3.043 10ZM15 4h-4a.333.333 0 1 1 0-.667h4A.333.333 0 1 1 15 4Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 403 B |
3
miniapp/assets/icons/font-size-increase.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||
<path fill="#5C5C66" d="M15.5 22a.5.5 0 0 1-.466-.319L12.824 16H4.176l-2.21 5.681a.5.5 0 1 1-.93-.362l7-18a.5.5 0 0 1 .93 0l7 18A.5.5 0 0 1 15.5 22ZM4.564 15h7.872L8.5 4.88 4.564 15ZM19.5 9a.5.5 0 0 1-.5-.5V6h-2.5a.5.5 0 0 1 0-1H19V2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H20v2.5a.5.5 0 0 1-.5.5Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 404 B |
3
miniapp/assets/icons/gap.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" fill="none" viewBox="0 0 24 23">
|
||||
<path fill="#8552A1" d="M.858 2.656V0H24v2.656H.858Zm9.919 7.034V7.034h13.202V9.69H10.777Zm.02 5.464v-2.656h13.165v2.656H10.794h.003ZM.91 22.085v-2.656h23.015v2.656H.91ZM0 9.621l4.109-4.18 4.106 4.182H0V9.62Zm.045 3.601h8.208L4.15 17.356.045 13.222Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 358 B |
4
miniapp/assets/icons/information.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="186" height="24" fill="none" viewBox="0 0 186 24">
|
||||
<path fill="#CE7A7A" d="M1.5 18.355v.954c0 1.434.592 3.191 2.033 3.191h16.944c1.43 0 2.023-1.756 2.023-3.19v-.954c0 1.43-.901 1.81-2.334 1.81H3.834c-1.442 0-2.334-.378-2.334-1.81Zm0-14.832v11.969c0 1.431.893 2.341 2.334 2.341h16.334c1.432 0 2.334-.91 2.334-2.341V3.523C22.5 2.092 21.907 1.5 20.477 1.5h-1.794v2.166a1.908 1.908 0 0 1-.954 3.563c-1.05 0-1.91-.859-1.91-1.912 0-.706.381-1.315.954-1.651V1.5H7.227v2.166c.571.336.954.945.954 1.651 0 1.052-.86 1.912-1.91 1.912a1.915 1.915 0 0 1-1.909-1.912c0-.706.381-1.315.954-1.651V1.5H3.531C2.092 1.5 1.5 2.091 1.5 3.523Z"/>
|
||||
<path fill="#606060" d="M37.365 1.11h9.837v.02c0 .446-.191 1.186-.574 2.22a11.62 11.62 0 0 1-1.187 2.047c-.268.357-.606.766-1.014 1.225h.402v1.359c0 2.807-.007 6.399-.02 10.775l.498 1.167h-7.521l.478-1.186v-8.268c-1.659.523-3.253.785-4.785.785v-.02c.013-1.046.02-1.626.02-1.741a7.038 7.038 0 0 0 1.454-.594c.434-.216.989-.644 1.665-1.282.651-.753 1.091-1.384 1.32-1.895.588-1.199.881-2.303.881-3.31v-.039l.02-.096h-1.474V1.11Zm16.306.02h5.646c.025 0 .038.012.038.037.013.843.02 1.455.02 1.838l.018.019h2.68c.064 0 1.365-.268 3.904-.804l4.21 1.818v.02c-.012 0-.452.248-1.32.746H46.8c-.025 0-.038-.013-.038-.038V3.024h7.847l.038-.02a3.83 3.83 0 0 1-.02-.286V2.22h-.956V1.13Zm11.35 4.286a530.051 530.051 0 0 0 4.229 1.818c-.038.051-.37.243-.995.575-.192.127-.307.19-.345.19H47.432V6.221h13.741c.115 0 1.397-.268 3.847-.804Zm.018 3.196 4.21 1.819v.019c-.88.485-1.332.727-1.358.727h-20.46v-1.76h13.704c.191-.026 1.493-.294 3.904-.805Zm.517 2.929a2721.37 2721.37 0 0 1 4.21 1.818v.038c-.842.447-1.269.683-1.282.708v5.818c0 .026-.012.039-.038.039h-6.488v-.345h-8.306v.345h-6.507c-.013 0-.02-.013-.02-.039V12h6.527v.325h8.076c.039 0 1.314-.261 3.828-.784Zm-11.904 2.602v3.675c0 .013.006.02.019.02h8.249c.025 0 .038-.007.038-.02v-3.675c0-.025-.013-.038-.038-.038h-8.25c-.012 0-.018.013-.018.038ZM86.092.21h7.426c.025.013.038.026.038.039.013.97.02 1.614.02 1.933 0 .038.006.134.018.287h3.426c.051 0 1.531-.447 4.44-1.34 3.28 1.544 4.989 2.348 5.13 2.412-.893.638-1.366.963-1.417.976v7.904H99.24v-.287c0-.013-.006-.02-.019-.02H80.714v.307H74.8V2.22h5.914v.23h6.335c-.013-.268-.02-.466-.02-.594v-.268c0-.063-.005-.159-.018-.287h-.957V.25c.013-.026.025-.039.038-.039Zm-5.378 4.326v.88H99.24v-.88H80.714Zm0 2.335v.861H99.24v-.861H80.714Zm0 2.335v.86h18.507c.013 0 .02-.012.02-.037v-.823H80.713Zm12.842 3.292 2.354 2.43c-1.2.638-2.686.957-4.46.957-1.964 0-3.495-.408-4.592-1.225l-.096-.095c1.097-1.29 1.652-1.933 1.665-1.933 1.059.331 1.914.497 2.565.497.778 0 1.633-.21 2.564-.631Zm11.388.114c.076.651.325 1.264.746 1.838.396.459.734.746 1.014.861.575.306 1.142.46 1.704.46.025 0 .038.006.038.018v2.91c-2.947 0-4.944-.485-5.99-1.455-.064 0-.319-.255-.766-.766a7.21 7.21 0 0 1-.785-1.263 8.234 8.234 0 0 1-.344-.804c.013 0 1.474-.6 4.383-1.799Zm-25.417.192h6.125c.025 0 .038.012.038.038v2.01c0 .561.6 1.008 1.8 1.34.994.255 2.245.382 3.75.382 2.157 0 4.14-.242 5.953-.727.65-.204 1.122-.415 1.416-.632 0-.012.038-.044.115-.095a3.974 3.974 0 0 1-.21-.479c.777-.37 1.18-.555 1.205-.555l1.741 4.02c-.446.28-1.199.58-2.258.899-2.475.638-5.212.957-8.21.957-4.096 0-7.254-.6-9.474-1.8-1.327-.79-1.99-1.754-1.99-2.89v-2.468Zm-4.689.287 4.211 1.722v.02a9.03 9.03 0 0 1-1.053 2.01c-.42.51-.778.854-1.071 1.032a5.1 5.1 0 0 1-1.436.67c-.944.268-2.182.402-3.713.402v-2.832c.498-.128 1.104-.542 1.818-1.244.37-.434.67-.836.9-1.206 0-.025.115-.217.344-.574Zm64.364-11.943 4.919 2.45c-.039.051-.453.35-1.244.9-.09.076-.16.114-.211.114v15.311c0 .026-.013.039-.038.039h-6.469c-.026 0-.038-.013-.038-.039v-.574h-15.369v.574c0 .026-.012.039-.038.039h-6.488V1.837h6.526v.708h13.991a505.53 505.53 0 0 0 4.172-1.32 1.05 1.05 0 0 1 .287-.077Zm-18.45 3.464V9.99h15.369V4.612h-15.369Zm0 7.407v5.301h15.369v-5.3h-15.369ZM166.36 0c2.845 1.174 4.287 1.76 4.325 1.76v.04c-.472.498-.727.772-.765.823v2.373h5.741c.039 0 1.512-.465 4.421-1.397a674.83 674.83 0 0 1 4.919 2.488l-1.435.995H169.92v2.374h3.77c.026 0 1.499-.466 4.421-1.398.459.243 2.099 1.066 4.919 2.47 0 .025-.472.363-1.417 1.014h-29.799c-.012 0-.019-.013-.019-.039v-2.01c0-.025.007-.037.019-.037h11.599V7.08h-15.082V4.995h15.082V1.033A289.299 289.299 0 0 1 166.36 0Zm-.44 11.77c1.276.804 2.462 1.206 3.56 1.206.446 0 .937-.057 1.473-.172 0 .025.574.995 1.723 2.909-.511.153-1.11.23-1.799.23h-.115c-1.876 0-3.675-.453-5.397-1.36-.358-.19-.734-.478-1.13-.86a4.307 4.307 0 0 1-.363-.44c.14-.115.823-.62 2.048-1.513Zm15.579.9h.019v.019c0 .255.134.67.402 1.244a3.433 3.433 0 0 0 1.952 1.684c.319.102.702.166 1.148.192v2.928h-.019c-2.641 0-4.504-.39-5.588-1.168-.97-.638-1.723-1.677-2.259-3.12a569.36 569.36 0 0 1 4.345-1.78Zm-25.091.172h6.43c.026 0 .039.013.039.038v2.03c0 .548.58.994 1.741 1.339.97.23 2.15.344 3.541.344 2.36 0 4.427-.3 6.201-.9.485-.216.797-.401.938-.554a3.73 3.73 0 0 1-.211-.479h.019l1.187-.555c1.161 2.667 1.742 4.013 1.742 4.038-.447.281-1.193.581-2.24.9-2.437.638-5.129.957-8.076.957-4.058 0-7.165-.593-9.321-1.78-1.327-.804-1.99-1.78-1.99-2.928v-2.45Zm-4.689.287 4.21 1.723v.038a8.71 8.71 0 0 1-1.052 1.933c-.498.561-.874.906-1.13 1.034-1.046.752-2.851 1.129-5.416 1.129V16.19c0-.012.204-.108.613-.287 1.046-.587 1.971-1.512 2.775-2.775Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
3
miniapp/assets/icons/list.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="9" fill="none" viewBox="0 0 10 9">
|
||||
<path fill="#606060" d="m9.755 2.404-3.19 4.904c-.696 1.068-2.434 1.068-3.13 0L.246 2.404C-.451 1.336.419 0 1.809 0h6.382c1.39 0 2.26 1.336 1.564 2.404Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
4
miniapp/assets/icons/padding.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||
<path fill="#C9CDD4" d="M5.6 18.4h12.8V5.6H5.6v12.8ZM24 20.8a3.2 3.2 0 0 1-2.874 3.184L20.8 24H3.2l-.326-.016a3.2 3.2 0 0 1-2.856-2.858L0 20.8V3.2A3.2 3.2 0 0 1 3.2 0h17.6A3.2 3.2 0 0 1 24 3.2v17.6Z"/>
|
||||
<path fill="#8552A1" d="M17.4 21.6a1.2 1.2 0 1 1 0 2.4H6.6a1.2 1.2 0 1 1 0-2.4h10.8ZM0 17.4V6.6a1.2 1.2 0 1 1 2.4 0v10.8a1.2 1.2 0 1 1-2.4 0Zm21.6 0V6.6a1.2 1.2 0 1 1 2.4 0v10.8a1.2 1.2 0 1 1-2.4 0ZM17.4 0a1.2 1.2 0 1 1 0 2.4H6.6a1.2 1.2 0 0 1 0-2.4h10.8Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 568 B |
3
miniapp/assets/icons/radiobutton-no.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
|
||||
<rect width="9.917" height="9.917" x=".875" y=".875" stroke="#C9CDD4" stroke-width=".583" rx="4.958"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 208 B |
10
miniapp/assets/icons/radiobutton.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18">
|
||||
<g clip-path="url(#a)">
|
||||
<path fill="#8552A1" d="M9 0a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9Zm5.934 6.21L8.16 12.988a.843.843 0 0 1-.599.247.844.844 0 0 1-.6-.247L3.066 9.09a.846.846 0 1 1 1.198-1.197L7.56 11.19l6.177-6.177a.847.847 0 1 1 1.197 1.198Z"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h18v18H0z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 488 B |
8
miniapp/assets/icons/sankeyview.svg
Normal file
|
After Width: | Height: | Size: 9.9 KiB |
4
miniapp/assets/icons/search.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" fill="#8552A1" rx="10" transform="matrix(-1 0 0 1 32 0)"/>
|
||||
<path fill="#FEFDFE" d="m24.845 22.204-5.101-5.105-2.64 2.64 5.105 5.104a1.085 1.085 0 0 0 1.527 0l1.108-1.108a1.09 1.09 0 0 0 0-1.531ZM17.22 18.6l1.382-1.382-1.576-1.576a5.512 5.512 0 0 0-.63-7.032 5.51 5.51 0 0 0-7.785 0c-2.15 2.146-2.146 5.635 0 7.785a5.512 5.512 0 0 0 7.033.63l1.575 1.576Zm-7.541-3.288a3.983 3.983 0 0 1 0-5.635 3.983 3.983 0 0 1 5.635 0 3.983 3.983 0 0 1 0 5.635 3.983 3.983 0 0 1-5.635 0Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 611 B |
6
miniapp/assets/icons/select.svg
Normal file
|
After Width: | Height: | Size: 8.1 KiB |
6
miniapp/assets/icons/selectall.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
|
||||
<path fill="#8552A1" d="M15.608 15.302a.717.717 0 0 1 .218.524.712.712 0 0 1-.218.524.729.729 0 0 1-.525.218H4.326a1.78 1.78 0 0 1-1.303-.542 1.78 1.78 0 0 1-.543-1.303V3.963c0-.207.073-.383.218-.525a.728.728 0 0 1 .525-.218c.203 0 .382.072.524.218a.728.728 0 0 1 .218.524v10.015c0 .303.11.56.327.78.219.217.473.326.776.326h10.015c.206 0 .38.073.525.219Zm-2.97 2.227a.717.717 0 0 1 .218.524.712.712 0 0 1-.218.524.729.729 0 0 1-.524.218H2.098a1.78 1.78 0 0 1-1.303-.542 1.785 1.785 0 0 1-.545-1.306V6.932c0-.206.073-.382.218-.524a.728.728 0 0 1 .524-.219c.203 0 .382.073.525.219a.728.728 0 0 1 .218.524v9.272c0 .304.109.561.327.78.218.217.476.327.779.327h9.273c.203 0 .378.072.524.218ZM18.153.892c.427.43.643.952.643 1.567v9.67c0 .615-.216 1.14-.643 1.566a2.136 2.136 0 0 1-1.567.643H6.914c-.616 0-1.14-.215-1.567-.643a2.129 2.129 0 0 1-.642-1.563V2.459c0-.615.215-1.14.642-1.567A2.136 2.136 0 0 1 6.914.25h9.67c.617 0 1.139.215 1.569.642Zm-.842 2.164c0-.364-.13-.673-.388-.933a1.263 1.263 0 0 0-.934-.388H7.514c-.364 0-.673.13-.934.388a1.27 1.27 0 0 0-.39.933v8.476c0 .364.13.672.387.933.258.26.57.388.934.388h8.475c.364 0 .673-.13.934-.388.26-.257.388-.57.388-.933V3.056h.003Z"/>
|
||||
<path fill="#8552A1" d="M10.114 9.583 7.966 7.61l-.716.658 2.864 2.633L16.25 5.26l-.716-.659-5.42 4.983Z"/>
|
||||
<path stroke="#8552A1" stroke-width=".5" d="M15.608 15.302a.717.717 0 0 1 .218.524.712.712 0 0 1-.218.524.729.729 0 0 1-.525.218H4.326a1.78 1.78 0 0 1-1.303-.542 1.78 1.78 0 0 1-.543-1.303V3.963c0-.207.073-.383.218-.525a.728.728 0 0 1 .525-.218c.203 0 .382.072.524.218a.728.728 0 0 1 .218.524v10.015c0 .303.11.56.327.78.219.217.473.326.776.326h10.015c.206 0 .38.073.525.219Zm-2.97 2.227a.717.717 0 0 1 .218.524.712.712 0 0 1-.218.524.729.729 0 0 1-.524.218H2.098a1.78 1.78 0 0 1-1.303-.542 1.785 1.785 0 0 1-.545-1.306V6.932c0-.206.073-.382.218-.524a.728.728 0 0 1 .524-.219c.203 0 .382.073.525.219a.728.728 0 0 1 .218.524v9.272c0 .304.109.561.327.78.218.217.476.327.779.327h9.273c.203 0 .378.072.524.218ZM18.153.892c.427.43.643.952.643 1.567v9.67c0 .615-.216 1.14-.643 1.566a2.136 2.136 0 0 1-1.567.643H6.914c-.616 0-1.14-.215-1.567-.643a2.129 2.129 0 0 1-.642-1.563V2.459c0-.615.215-1.14.642-1.567A2.136 2.136 0 0 1 6.914.25h9.67c.617 0 1.139.215 1.569.642Zm-.842 2.164c0-.364-.13-.673-.388-.933a1.263 1.263 0 0 0-.934-.388H7.514c-.364 0-.673.13-.934.388a1.27 1.27 0 0 0-.39.933v8.476c0 .364.13.672.387.933.258.26.57.388.934.388h8.475c.364 0 .673-.13.934-.388.26-.257.388-.57.388-.933V3.056h.003Z"/>
|
||||
<path stroke="#8552A1" stroke-width=".5" d="M10.114 9.583 7.966 7.61l-.716.658 2.864 2.633L16.25 5.26l-.716-.659-5.42 4.983Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
6
miniapp/assets/icons/unselectall.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
|
||||
<path fill="#8552A1" d="M15.608 15.302a.717.717 0 0 1 .218.524.712.712 0 0 1-.218.524.729.729 0 0 1-.525.218H4.326a1.78 1.78 0 0 1-1.303-.542 1.78 1.78 0 0 1-.543-1.303V3.963c0-.207.073-.383.218-.525a.728.728 0 0 1 .525-.218c.203 0 .382.072.524.218a.728.728 0 0 1 .218.524v10.015c0 .303.11.56.327.78.219.217.473.326.776.326h10.015c.206 0 .38.073.525.219Zm-2.97 2.227a.717.717 0 0 1 .218.524.712.712 0 0 1-.218.524.729.729 0 0 1-.524.218H2.098a1.78 1.78 0 0 1-1.303-.542 1.785 1.785 0 0 1-.545-1.306V6.932c0-.206.073-.382.218-.524a.728.728 0 0 1 .524-.219c.203 0 .382.073.525.219a.728.728 0 0 1 .218.524v9.272c0 .304.109.561.327.78.218.217.476.327.779.327h9.273c.203 0 .378.072.524.218ZM18.153.892c.427.43.643.952.643 1.567v9.67c0 .615-.216 1.14-.643 1.566a2.136 2.136 0 0 1-1.567.643H6.914c-.616 0-1.14-.215-1.567-.643a2.129 2.129 0 0 1-.642-1.563V2.459c0-.615.215-1.14.642-1.567A2.136 2.136 0 0 1 6.914.25h9.67c.617 0 1.139.215 1.569.642Zm-.842 2.164c0-.364-.13-.673-.388-.933a1.263 1.263 0 0 0-.934-.388H7.514c-.364 0-.673.13-.934.388a1.27 1.27 0 0 0-.39.933v8.476c0 .364.13.672.387.933.258.26.57.388.934.388h8.475c.364 0 .673-.13.934-.388.26-.257.388-.57.388-.933V3.056h.003Z"/>
|
||||
<path fill="#8552A1" d="m15.523 4.546-.806-.705-3.194 2.795L8.328 3.84l-.805.705 3.194 2.795-3.194 2.795.805.705 3.195-2.795 3.194 2.795.806-.705-3.195-2.795 3.195-2.795Z"/>
|
||||
<path stroke="#8552A1" stroke-width=".5" d="M15.608 15.302a.717.717 0 0 1 .218.524.712.712 0 0 1-.218.524.729.729 0 0 1-.525.218H4.326a1.78 1.78 0 0 1-1.303-.542 1.78 1.78 0 0 1-.543-1.303V3.963c0-.207.073-.383.218-.525a.728.728 0 0 1 .525-.218c.203 0 .382.072.524.218a.728.728 0 0 1 .218.524v10.015c0 .303.11.56.327.78.219.217.473.326.776.326h10.015c.206 0 .38.073.525.219Zm-2.97 2.227a.717.717 0 0 1 .218.524.712.712 0 0 1-.218.524.729.729 0 0 1-.524.218H2.098a1.78 1.78 0 0 1-1.303-.542 1.785 1.785 0 0 1-.545-1.306V6.932c0-.206.073-.382.218-.524a.728.728 0 0 1 .524-.219c.203 0 .382.073.525.219a.728.728 0 0 1 .218.524v9.272c0 .304.109.561.327.78.218.217.476.327.779.327h9.273c.203 0 .378.072.524.218ZM18.153.892c.427.43.643.952.643 1.567v9.67c0 .615-.216 1.14-.643 1.566a2.136 2.136 0 0 1-1.567.643H6.914c-.616 0-1.14-.215-1.567-.643a2.129 2.129 0 0 1-.642-1.563V2.459c0-.615.215-1.14.642-1.567A2.136 2.136 0 0 1 6.914.25h9.67c.617 0 1.139.215 1.569.642Zm-.842 2.164c0-.364-.13-.673-.388-.933a1.263 1.263 0 0 0-.934-.388H7.514c-.364 0-.673.13-.934.388a1.27 1.27 0 0 0-.39.933v8.476c0 .364.13.672.387.933.258.26.57.388.934.388h8.475c.364 0 .673-.13.934-.388.26-.257.388-.57.388-.933V3.056h.003Z"/>
|
||||
<path stroke="#8552A1" stroke-width=".5" d="m15.523 4.546-.806-.705-3.194 2.795L8.328 3.84l-.805.705 3.194 2.795-3.194 2.795.805.705 3.195-2.795 3.194 2.795.806-.705-3.195-2.795 3.195-2.795Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
3
miniapp/assets/icons/upload.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none" viewBox="0 0 40 31">
|
||||
<path fill="#2420A8" d="M40 24.68a5.17 5.17 0 0 1-.34 1.88 5.179 5.179 0 0 1-.96 1.58c-.413.467-.893.86-1.44 1.18-.547.32-1.14.533-1.78.64l.04.04H8.12c-.133.027-.347.04-.64.04-1.04 0-2.013-.2-2.92-.6-.907-.4-1.7-.94-2.38-1.62a7.48 7.48 0 0 1-1.6-2.38A7.365 7.365 0 0 1 0 22.52c0-1.04.193-2.013.58-2.92a7.48 7.48 0 0 1 1.6-2.38 7.763 7.763 0 0 1 2.38-1.62c.907-.4 1.88-.6 2.92-.6h.04a4.85 4.85 0 0 1-.04-.6v-.64c0-1.893.36-3.68 1.08-5.36.72-1.68 1.707-3.14 2.96-4.38a14.132 14.132 0 0 1 4.38-2.94C17.567.36 19.347 0 21.24 0c1.893 0 3.68.36 5.36 1.08 1.68.72 3.147 1.7 4.4 2.94 1.253 1.24 2.24 2.7 2.96 4.38.72 1.68 1.08 3.467 1.08 5.36 0 .987-.107 1.953-.32 2.9a14.878 14.878 0 0 1-.88 2.7 4.66 4.66 0 0 1 .84-.08c.72 0 1.407.14 2.06.42.653.28 1.22.667 1.7 1.16.48.493.86 1.067 1.14 1.72.28.653.42 1.353.42 2.1Zm-14-4.76c.533 0 .88-.06 1.04-.18.16-.12.053-.407-.32-.86-.373-.48-.787-1.107-1.24-1.88-.453-.773-.927-1.56-1.42-2.36-.493-.8-.993-1.547-1.5-2.24-.507-.693-1-1.2-1.48-1.52-.48-.347-.833-.533-1.06-.56-.227-.027-.553.133-.98.48-.48.4-.947.907-1.4 1.52a54.547 54.547 0 0 0-1.38 1.96c-.467.693-.933 1.373-1.4 2.04a15.38 15.38 0 0 1-1.42 1.76c-.48.48-.653.907-.52 1.28s.467.56 1 .56h.64c.24 0 .5.007.78.02.28.013.553.02.82.02h.68c.373.027.613.153.72.38.107.227.16.54.16.94 0 .453-.007.853-.02 1.2-.013.347-.02.68-.02 1 0 .32-.007.653-.02 1-.013.347-.02.747-.02 1.2 0 .187.02.387.06.6.04.213.113.413.22.6s.267.34.48.46c.213.12.493.18.84.18h.92c.24 0 .6.013 1.08.04.64 0 1.007-.16 1.1-.48.093-.32.14-.827.14-1.52 0-.613.007-1.167.02-1.66.013-.493.02-1.167.02-2.02 0-.613.06-1.087.18-1.42.12-.333.38-.5.78-.5.293 0 .713-.007 1.26-.02.547-.013.967-.02 1.26-.02Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
BIN
miniapp/assets/icons/webicon.png
Normal file
|
After Width: | Height: | Size: 9.0 KiB |
4
miniapp/assets/icons/zhedie.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 15 15">
|
||||
<path fill="#000" d="M15 7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z"/>
|
||||
<path fill="#fff" d="M3 7.75A.75.75 0 0 1 3.75 7h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 7.75Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 279 B |
10
miniapp/assets/icons/星程字体转换.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="33" fill="none" viewBox="0 0 360 33">
|
||||
<g clip-path="url(#a)">
|
||||
<path fill="#8552A1" d="M7.305 15.333h7.898l-.856 1.51h8.49l.593-2.883H5.594L7.832 2.7 5.857.87h50.874L54.1 13.96H36.724l-.592 2.883h17.572l-.856 4.12H35.276l-.395 1.968h17.507l-.79 3.936H34.09l-.263 1.373h20.468l-.79 3.89H0l.79-3.89h19.744l.263-1.373H4.87l.79-3.936h15.927l.395-1.968h-9.938l-.724 1.373H3.16l4.145-7.003ZM20.007 5.63H43.24l.33-1.373H20.336l-.329 1.373Zm22.311 4.668.263-1.327H19.35l-.263 1.327h23.232Zm51.795 10.894.527-2.793h-9.872l.79-3.982h31.327l-.79 3.982h-10.004l-.526 2.793h8.753l-.855 4.165h-8.754l-.724 3.432h10.465l-.856 4.028H81.477l.856-4.028h10.2l.725-3.433H84.57l.856-4.165h8.687ZM85.36 4.622l-4.804.321-.856 4.303h5.66l-.855 4.21H78.12l-3.95 19.498h-8.687l3.95-19.498H62.72l.856-4.21h5.989l.79-3.662-5.66.366.855-4.21L86.216.411l-.856 4.21ZM89.572.87h29.09l-2.369 11.762h-29.09L89.573.87ZM59.101 31.307l4.212-16.111h5.594l-4.212 16.11H59.1Zm16.65 0 2.37-16.111h5.594l-2.37 16.11h-5.594ZM107.21 8.65l.724-3.8h-9.345l-.724 3.8h9.345Zm35.276 11.031.395-1.785 14.545-3.112h-28.958l.921-4.44h43.766l-1.053 5.31-17.111 4.027h21.258l-.856 4.44h-21.324l-1.118 5.72c-.176.886-.757 1.626-1.744 2.22-.988.596-2.117.893-3.39.893h-12.965l5.857-4.302.922-4.531h-21.258l.856-4.44h21.257ZM163.81 6.957h-25.009l-.461 2.472h-13.755l1.382-6.82h19.942l.197-.915L144.066 0h15.927l-.593 2.61h19.086l-1.382 6.82h-13.755l.461-2.472Zm48.044 2.197-4.41 13.044h2.962l2.896-14.371h-11.847l.856-4.348h11.846l.395-1.74L212.446 0h14.413l-.724 3.479h11.847l-.856 4.348H225.28l-2.962 14.371h3.028l.855-13.044h8.161l-1.58 23.022h-8.095l.329-5.63h-3.553l-1.317 6.408h-11.912l1.25-6.407h-3.488l-1.908 5.63h-8.161l7.766-23.023h8.161Zm-12.176-4.806-.197.961-5.594 27.645h-11.913l5.266-25.951-3.818.503 1.053-5.217L200.534.092l-.856 4.256Zm79.503 19.361 1.514 1.053 5.396-3.021H268.98l3.554-6.088h-4.081l.856-4.302h5.726l1.974-3.387h-4.607l.856-4.21h6.186l1.514-2.61L279.313 0h12.504l-2.04 3.753h9.872l-.856 4.211h-11.32l-1.776 3.387h14.018l-.856 4.302h-15.532l-1.119 2.106h14.216l-1.185 5.446-9.148 5.264 6.516 4.44h-11.846l-12.702-9.2h11.122Zm-33.565-9.566 3.751-6.545h-3.356l.856-4.257h4.936l1.118-1.922-1.316-1.373h9.346l-1.909 3.295h11.846l-.855 4.257h-13.426l-3.883 6.82h2.962l1.118-5.31h8.161l-1.053 5.31h3.686l-.79 4.073h-3.751l-.724 3.524 4.936-.457-.922 4.577-4.936.457-1.25 6.27h-9.872l1.053-5.309-9.938.916.921-4.577 9.938-.915.922-4.486h-8.424l.855-4.348Zm78.252 5.127 2.041-9.933h16.914l3.422-3.25h-6.581l-2.304 1.831h-11.122l8.687-6.82-1.25-1.052h13.623l-2.633 2.06h13.69l-.79 4.119-3.357 3.112h5.66l-2.04 9.932H360l-.856 4.12h-12.702L356.907 33h-10.596l-6.845-6.957-9.016 6.774h-11.715l13.097-9.429h-10.991l.856-4.119h2.171ZM311.956 5.446l.856-4.165L311.232 0h12.505l-1.119 5.447h2.567l-.856 4.348h-2.632l-.856 4.394 2.698-.55-.987 4.76-2.698.55-2.172 10.847c-.176.855-.735 1.572-1.678 2.151-.944.58-2.052.87-3.324.87h-10.53l5.133-4.12 1.514-7.46-4.278.87.987-4.806 4.212-.87 1.383-6.636h-4.147l.856-4.348h4.146Zm34.75 7.231-1.317 6.5h4.081l1.316-6.5h-4.08Zm-13.097.138-1.316 6.453h4.014l1.316-6.453h-4.014Z"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h360v33H0z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
3
miniapp/assets/icons/星程桑基图.svg
Normal file
|
After Width: | Height: | Size: 7.2 KiB |
@@ -1,12 +1,419 @@
|
||||
const { parseTableByFileName, buildSankeyData } = require('../../utils/sankey');
|
||||
|
||||
/**
|
||||
* 将表头标准化,便于做中英文别名匹配。
|
||||
*/
|
||||
function normalizeHeaderName(header) {
|
||||
return String(header || '')
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[\s_-]+/g, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据候选别名查找列索引。
|
||||
*/
|
||||
function findHeaderIndex(headers, aliases) {
|
||||
const aliasSet = {};
|
||||
aliases.forEach((item) => {
|
||||
aliasSet[normalizeHeaderName(item)] = true;
|
||||
});
|
||||
for (let i = 0; i < headers.length; i += 1) {
|
||||
if (aliasSet[normalizeHeaderName(headers[i])]) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断文本是否可作为数值。
|
||||
*/
|
||||
function isNumericCell(text) {
|
||||
const normalized = String(text || '')
|
||||
.replace(/,/g, '')
|
||||
.trim();
|
||||
if (!normalized) {
|
||||
return false;
|
||||
}
|
||||
return !Number.isNaN(Number(normalized));
|
||||
}
|
||||
|
||||
/**
|
||||
* 取第二行中的首个数字列索引。
|
||||
*/
|
||||
function findNumericColumnFromSecondRow(rows) {
|
||||
const secondRow = rows[0] || [];
|
||||
for (let i = 0; i < secondRow.length; i += 1) {
|
||||
if (isNumericCell(secondRow[i])) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从文件名中提取后缀(不含点)。
|
||||
*/
|
||||
function getFileExtension(fileName) {
|
||||
const lowerName = String(fileName || '').toLowerCase();
|
||||
const lastDotIndex = lowerName.lastIndexOf('.');
|
||||
if (lastDotIndex < 0) {
|
||||
return '';
|
||||
}
|
||||
return lowerName.slice(lastDotIndex + 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* 节点配色:与当前画布渲染保持一致,双色交替。
|
||||
*/
|
||||
function getNodeColor(index) {
|
||||
return index % 2 === 0 ? '#9b6bc2' : '#7e95f7';
|
||||
}
|
||||
|
||||
/**
|
||||
* 标签纵向位置:小节点也能保持可读,不贴边。
|
||||
*/
|
||||
function getNodeLabelCenterY(nodeHeight) {
|
||||
return Math.min(12, Math.max(8, nodeHeight / 2));
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建导出文件时间戳,格式与 Web 保持一致。
|
||||
*/
|
||||
function formatFileTimestamp() {
|
||||
const now = new Date();
|
||||
const pad = (value) => String(value).padStart(2, '0');
|
||||
return `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}_${pad(now.getHours())}${pad(
|
||||
now.getMinutes()
|
||||
)}${pad(now.getSeconds())}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* SVG 文本转义,避免标签名包含特殊字符导致 XML 非法。
|
||||
*/
|
||||
function escapeSvgText(text) {
|
||||
return String(text || '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
/**
|
||||
* SVG 数值输出做轻量格式化,避免太长小数。
|
||||
*/
|
||||
function formatSvgNumber(value) {
|
||||
const normalized = Number(value || 0);
|
||||
if (!Number.isFinite(normalized)) {
|
||||
return '0';
|
||||
}
|
||||
return String(Number(normalized.toFixed(2)));
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉选项:与 Web 手机端保持一致。
|
||||
*/
|
||||
const GAP_OPTIONS = [0, 5, 10, 15, 20, 25, 30];
|
||||
const PADDING_OPTIONS = [0, 10, 20, 30, 40, 50, 60, 70, 80];
|
||||
const LABEL_POSITION_OPTIONS = [
|
||||
{ value: 'inner', label: '内' },
|
||||
{ value: 'outer', label: '外' },
|
||||
{ value: 'left', label: '左' },
|
||||
{ value: 'right', label: '右' }
|
||||
];
|
||||
const TARGET_ALIGN_OPTIONS = [
|
||||
{ value: 'between', label: '两端' },
|
||||
{ value: 'middle', label: '中间' },
|
||||
{ value: 'top', label: '顶部' },
|
||||
{ value: 'bottom', label: '底部' }
|
||||
];
|
||||
|
||||
/**
|
||||
* 数值限制,避免 UI 参数导致布局异常。
|
||||
*/
|
||||
function clampNumber(value, min, max, fallback) {
|
||||
const normalized = Number(value);
|
||||
if (!Number.isFinite(normalized)) {
|
||||
return fallback;
|
||||
}
|
||||
return Math.min(max, Math.max(min, normalized));
|
||||
}
|
||||
|
||||
/**
|
||||
* 方向切换:target->source 时对连线做镜像翻转。
|
||||
*/
|
||||
function applyDirection(links, direction) {
|
||||
if (!Array.isArray(links)) {
|
||||
return [];
|
||||
}
|
||||
if (direction !== 'target-to-source') {
|
||||
return links;
|
||||
}
|
||||
return links.map((link) => ({
|
||||
source: link.target,
|
||||
target: link.source,
|
||||
value: link.value
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据标签位置模式返回 Canvas 文本绘制参数。
|
||||
*/
|
||||
function getCanvasLabelPlacement(layout, isSource, labelPositionMode) {
|
||||
const sourceInnerX = layout.leftX + layout.nodeWidth + 4;
|
||||
const sourceOuterX = Math.max(2, layout.leftX - 4);
|
||||
const targetInnerX = Math.max(2, layout.rightX - 4);
|
||||
const targetOuterX = layout.rightX + layout.nodeWidth + 4;
|
||||
|
||||
if (labelPositionMode === 'outer') {
|
||||
return isSource
|
||||
? { x: sourceOuterX, textAlign: 'right' }
|
||||
: { x: targetOuterX, textAlign: 'left' };
|
||||
}
|
||||
if (labelPositionMode === 'left') {
|
||||
return isSource
|
||||
? { x: sourceOuterX, textAlign: 'right' }
|
||||
: { x: targetInnerX, textAlign: 'right' };
|
||||
}
|
||||
if (labelPositionMode === 'right') {
|
||||
return isSource
|
||||
? { x: sourceInnerX, textAlign: 'left' }
|
||||
: { x: targetOuterX, textAlign: 'left' };
|
||||
}
|
||||
return isSource
|
||||
? { x: sourceInnerX, textAlign: 'left' }
|
||||
: { x: targetInnerX, textAlign: 'right' };
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据标签位置模式返回 SVG 文本锚点参数。
|
||||
*/
|
||||
function getSvgLabelPlacement(layout, isSource, labelPositionMode) {
|
||||
const canvasPlacement = getCanvasLabelPlacement(layout, isSource, labelPositionMode);
|
||||
return {
|
||||
x: canvasPlacement.x,
|
||||
textAnchor: canvasPlacement.textAlign === 'right' ? 'end' : 'start'
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一生成桑基图布局数据,供 canvas 渲染与 SVG 导出共用。
|
||||
*/
|
||||
function buildSankeyLayout(links, width, height, renderOptions) {
|
||||
if (!Array.isArray(links) || links.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nodeGap = clampNumber(renderOptions && renderOptions.nodeGap, 0, 60, 8);
|
||||
const padding = clampNumber(renderOptions && renderOptions.chartPadding, 0, 120, 16);
|
||||
const targetAlignMode = (renderOptions && renderOptions.targetAlignMode) || 'between';
|
||||
const nodeWidth = 10;
|
||||
const leftX = padding;
|
||||
const rightX = Math.max(padding + nodeWidth + 80, width - padding - nodeWidth);
|
||||
|
||||
const sourceValueMap = {};
|
||||
const targetValueMap = {};
|
||||
links.forEach((link) => {
|
||||
sourceValueMap[link.source] = (sourceValueMap[link.source] || 0) + Number(link.value || 0);
|
||||
targetValueMap[link.target] = (targetValueMap[link.target] || 0) + Number(link.value || 0);
|
||||
});
|
||||
|
||||
const sourceNames = Object.keys(sourceValueMap);
|
||||
const targetNames = Object.keys(targetValueMap);
|
||||
const totalValue = sourceNames.reduce((sum, name) => sum + sourceValueMap[name], 0);
|
||||
if (totalValue <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const sourceGapCount = Math.max(0, sourceNames.length - 1);
|
||||
const sourceContentHeight = Math.max(10, height - padding * 2 - sourceGapCount * nodeGap);
|
||||
const sourceUnitHeight = sourceContentHeight / totalValue;
|
||||
|
||||
const sourcePos = {};
|
||||
let sourceCursorY = padding;
|
||||
sourceNames.forEach((name) => {
|
||||
const nodeHeight = Math.max(2, sourceValueMap[name] * sourceUnitHeight);
|
||||
sourcePos[name] = { y: sourceCursorY, h: nodeHeight };
|
||||
sourceCursorY += nodeHeight + nodeGap;
|
||||
});
|
||||
|
||||
const targetGapCount = Math.max(0, targetNames.length - 1);
|
||||
const targetTotalValue = targetNames.reduce((sum, name) => sum + targetValueMap[name], 0);
|
||||
const targetUnitHeight = targetTotalValue > 0 ? sourceUnitHeight : 0;
|
||||
const targetTotalNodeHeight = targetTotalValue * targetUnitHeight;
|
||||
const targetBlockHeight = targetTotalNodeHeight + targetGapCount * nodeGap;
|
||||
const layoutHeight = Math.max(10, height - padding * 2);
|
||||
let targetStartY = padding;
|
||||
if (targetAlignMode === 'middle') {
|
||||
targetStartY = padding + Math.max(0, (layoutHeight - targetBlockHeight) / 2);
|
||||
} else if (targetAlignMode === 'bottom') {
|
||||
targetStartY = padding + Math.max(0, layoutHeight - targetBlockHeight);
|
||||
} else if (targetAlignMode === 'top') {
|
||||
targetStartY = padding;
|
||||
}
|
||||
|
||||
const targetPos = {};
|
||||
let targetCursorY = targetStartY;
|
||||
targetNames.forEach((name) => {
|
||||
const nodeHeight = Math.max(2, targetValueMap[name] * targetUnitHeight);
|
||||
targetPos[name] = { y: targetCursorY, h: nodeHeight };
|
||||
targetCursorY += nodeHeight + nodeGap;
|
||||
});
|
||||
|
||||
const sourceOffset = {};
|
||||
const targetOffset = {};
|
||||
sourceNames.forEach((name) => {
|
||||
sourceOffset[name] = 0;
|
||||
});
|
||||
targetNames.forEach((name) => {
|
||||
targetOffset[name] = 0;
|
||||
});
|
||||
|
||||
const linkSegments = [];
|
||||
links.forEach((link) => {
|
||||
const sourceNode = sourcePos[link.source];
|
||||
const targetNode = targetPos[link.target];
|
||||
if (!sourceNode || !targetNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
const linkHeight = Math.max(1, Number(link.value || 0) * sourceUnitHeight);
|
||||
const sy = sourceNode.y + sourceOffset[link.source] + linkHeight / 2;
|
||||
const ty = targetNode.y + targetOffset[link.target] + linkHeight / 2;
|
||||
sourceOffset[link.source] += linkHeight;
|
||||
targetOffset[link.target] += linkHeight;
|
||||
|
||||
const startX = leftX + nodeWidth;
|
||||
const endX = rightX;
|
||||
const controlX = (startX + endX) / 2;
|
||||
|
||||
linkSegments.push({
|
||||
startX,
|
||||
endX,
|
||||
controlX,
|
||||
sy,
|
||||
ty,
|
||||
linkHeight
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
leftX,
|
||||
rightX,
|
||||
nodeWidth,
|
||||
sourceNames,
|
||||
targetNames,
|
||||
sourcePos,
|
||||
targetPos,
|
||||
linkSegments
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 基于布局结果构建可下载的 SVG 字符串。
|
||||
*/
|
||||
function buildSankeySvgText(links, width, height, renderOptions) {
|
||||
const layout = buildSankeyLayout(links, width, height, renderOptions);
|
||||
if (!layout) {
|
||||
return '';
|
||||
}
|
||||
const labelPositionMode = (renderOptions && renderOptions.labelPositionMode) || 'inner';
|
||||
|
||||
const segments = [];
|
||||
segments.push(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="${formatSvgNumber(width)}" height="${formatSvgNumber(
|
||||
height
|
||||
)}" viewBox="0 0 ${formatSvgNumber(width)} ${formatSvgNumber(height)}">`
|
||||
);
|
||||
segments.push(
|
||||
`<rect x="0" y="0" width="${formatSvgNumber(width)}" height="${formatSvgNumber(height)}" fill="#f7f8fa" />`
|
||||
);
|
||||
|
||||
layout.linkSegments.forEach((segment) => {
|
||||
const pathData = `M ${formatSvgNumber(segment.startX)} ${formatSvgNumber(segment.sy)} C ${formatSvgNumber(
|
||||
segment.controlX
|
||||
)} ${formatSvgNumber(segment.sy)} ${formatSvgNumber(segment.controlX)} ${formatSvgNumber(segment.ty)} ${formatSvgNumber(
|
||||
segment.endX
|
||||
)} ${formatSvgNumber(segment.ty)}`;
|
||||
segments.push(
|
||||
`<path d="${pathData}" fill="none" stroke="#9b6bc2" stroke-opacity="0.35" stroke-width="${formatSvgNumber(
|
||||
segment.linkHeight
|
||||
)}" stroke-linecap="round" />`
|
||||
);
|
||||
});
|
||||
|
||||
layout.sourceNames.forEach((name, index) => {
|
||||
const node = layout.sourcePos[name];
|
||||
const textY = node.y + getNodeLabelCenterY(node.h);
|
||||
const textPlacement = getSvgLabelPlacement(layout, true, labelPositionMode);
|
||||
segments.push(
|
||||
`<rect x="${formatSvgNumber(layout.leftX)}" y="${formatSvgNumber(node.y)}" width="${formatSvgNumber(
|
||||
layout.nodeWidth
|
||||
)}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index)}" />`
|
||||
);
|
||||
segments.push(
|
||||
`<text x="${formatSvgNumber(textPlacement.x)}" y="${formatSvgNumber(textY)}" fill="#4e5969" font-size="10" text-anchor="${
|
||||
textPlacement.textAnchor
|
||||
}" dominant-baseline="middle">${escapeSvgText(name)}</text>`
|
||||
);
|
||||
});
|
||||
|
||||
layout.targetNames.forEach((name, index) => {
|
||||
const node = layout.targetPos[name];
|
||||
const textY = node.y + getNodeLabelCenterY(node.h);
|
||||
const textPlacement = getSvgLabelPlacement(layout, false, labelPositionMode);
|
||||
segments.push(
|
||||
`<rect x="${formatSvgNumber(layout.rightX)}" y="${formatSvgNumber(node.y)}" width="${formatSvgNumber(
|
||||
layout.nodeWidth
|
||||
)}" height="${formatSvgNumber(node.h)}" fill="${getNodeColor(index)}" />`
|
||||
);
|
||||
segments.push(
|
||||
`<text x="${formatSvgNumber(textPlacement.x)}" y="${formatSvgNumber(textY)}" fill="#4e5969" font-size="10" text-anchor="${
|
||||
textPlacement.textAnchor
|
||||
}" dominant-baseline="middle">${escapeSvgText(name)}</text>`
|
||||
);
|
||||
});
|
||||
|
||||
segments.push('</svg>');
|
||||
return segments.join('\n');
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
selectedThemeIndex: 1,
|
||||
sourceColumns: ['列1', '列2'],
|
||||
targetColumns: ['列1', '列2'],
|
||||
sourceDataIndex: 1,
|
||||
sourceDescChecked: [1],
|
||||
targetDescChecked: [1],
|
||||
showThemeSheet: false
|
||||
showThemeSheet: false,
|
||||
uploadMessage: '点击上传或将csv/xls文件拖到这里上传',
|
||||
parseError: '',
|
||||
buildError: '',
|
||||
columnHeaders: ['列1', '列2', '列3'],
|
||||
tableRows: [],
|
||||
sourceDataColumn: null,
|
||||
sourceDescriptionColumns: [],
|
||||
targetDescriptionColumns: [],
|
||||
nodesCount: 0,
|
||||
linksCount: 0,
|
||||
droppedRows: 0,
|
||||
buildWarnings: [],
|
||||
infoLogs: ['解析信息: 尚未加载数据文件'],
|
||||
sankeyLinks: [],
|
||||
sankeyNodes: [],
|
||||
gapOptions: GAP_OPTIONS,
|
||||
gapOptionIndex: 1,
|
||||
nodeGap: GAP_OPTIONS[1],
|
||||
paddingOptions: PADDING_OPTIONS,
|
||||
paddingOptionIndex: 2,
|
||||
chartPadding: PADDING_OPTIONS[2],
|
||||
direction: 'source-to-target',
|
||||
labelPositionOptionLabels: LABEL_POSITION_OPTIONS.map((item) => item.label),
|
||||
labelPositionValues: LABEL_POSITION_OPTIONS.map((item) => item.value),
|
||||
labelPositionIndex: 0,
|
||||
labelPositionMode: LABEL_POSITION_OPTIONS[0].value,
|
||||
targetAlignOptionLabels: TARGET_ALIGN_OPTIONS.map((item) => item.label),
|
||||
targetAlignValues: TARGET_ALIGN_OPTIONS.map((item) => item.value),
|
||||
targetAlignIndex: 0,
|
||||
targetAlignMode: TARGET_ALIGN_OPTIONS[0].value
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -21,5 +428,538 @@ Page({
|
||||
*/
|
||||
onCloseThemeSheet() {
|
||||
this.setData({ showThemeSheet: false });
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新“节点间距”下拉值并立即重绘。
|
||||
*/
|
||||
onChangeGap(e) {
|
||||
const pickedIndex = Number(e.detail && e.detail.value);
|
||||
const safeIndex = Number.isFinite(pickedIndex) ? pickedIndex : 0;
|
||||
const nextValue = this.data.gapOptions[safeIndex];
|
||||
this.setData(
|
||||
{
|
||||
gapOptionIndex: safeIndex,
|
||||
nodeGap: Number.isFinite(nextValue) ? nextValue : this.data.nodeGap
|
||||
},
|
||||
() => {
|
||||
this.drawSankey();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新“预览边距”下拉值并立即重绘。
|
||||
*/
|
||||
onChangePadding(e) {
|
||||
const pickedIndex = Number(e.detail && e.detail.value);
|
||||
const safeIndex = Number.isFinite(pickedIndex) ? pickedIndex : 0;
|
||||
const nextValue = this.data.paddingOptions[safeIndex];
|
||||
this.setData(
|
||||
{
|
||||
paddingOptionIndex: safeIndex,
|
||||
chartPadding: Number.isFinite(nextValue) ? nextValue : this.data.chartPadding
|
||||
},
|
||||
() => {
|
||||
this.drawSankey();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换连线方向(source->target / target->source)。
|
||||
*/
|
||||
onToggleDirection() {
|
||||
this.setData(
|
||||
{
|
||||
direction:
|
||||
this.data.direction === 'source-to-target' ? 'target-to-source' : 'source-to-target'
|
||||
},
|
||||
() => {
|
||||
this.drawSankey();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新标签位置模式并重绘。
|
||||
*/
|
||||
onChangeLabelPosition(e) {
|
||||
const pickedIndex = Number(e.detail && e.detail.value);
|
||||
const safeIndex = Number.isFinite(pickedIndex) ? pickedIndex : 0;
|
||||
const nextMode = this.data.labelPositionValues[safeIndex];
|
||||
this.setData(
|
||||
{
|
||||
labelPositionIndex: safeIndex,
|
||||
labelPositionMode: nextMode || 'inner'
|
||||
},
|
||||
() => {
|
||||
this.drawSankey();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新汇聚对齐模式并重绘。
|
||||
*/
|
||||
onChangeTargetAlign(e) {
|
||||
const pickedIndex = Number(e.detail && e.detail.value);
|
||||
const safeIndex = Number.isFinite(pickedIndex) ? pickedIndex : 0;
|
||||
const nextMode = this.data.targetAlignValues[safeIndex];
|
||||
this.setData(
|
||||
{
|
||||
targetAlignIndex: safeIndex,
|
||||
targetAlignMode: nextMode || 'between'
|
||||
},
|
||||
() => {
|
||||
this.drawSankey();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面 ready 后绘制一次空白画布,避免首次显示延迟。
|
||||
*/
|
||||
onReady() {
|
||||
this.drawSankey();
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传数据文件并解析为表头与数据行。
|
||||
*/
|
||||
onChooseFile() {
|
||||
const that = this;
|
||||
wx.chooseMessageFile({
|
||||
count: 1,
|
||||
type: 'file',
|
||||
extension: ['csv', 'xls', 'xlsx'],
|
||||
success(res) {
|
||||
const picked = res.tempFiles && res.tempFiles[0];
|
||||
if (!picked) {
|
||||
return;
|
||||
}
|
||||
const filePath = picked.path;
|
||||
const fileName = picked.name || 'unknown.csv';
|
||||
const extension = getFileExtension(fileName);
|
||||
const isCsvFile = extension === 'csv';
|
||||
const readOptions = {
|
||||
filePath,
|
||||
success(readRes) {
|
||||
try {
|
||||
const filePayload = isCsvFile ? String(readRes.data || '') : readRes.data;
|
||||
const table = parseTableByFileName(fileName, filePayload);
|
||||
that.applyParsedTable(table, fileName);
|
||||
} catch (error) {
|
||||
that.setData({
|
||||
parseError: error && error.message ? error.message : '文件解析失败'
|
||||
});
|
||||
that.refreshInfoLogs();
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
that.setData({
|
||||
parseError: `读取文件失败: ${err && err.errMsg ? err.errMsg : '未知错误'}`
|
||||
});
|
||||
that.refreshInfoLogs();
|
||||
}
|
||||
};
|
||||
if (isCsvFile) {
|
||||
readOptions.encoding = 'utf8';
|
||||
}
|
||||
wx.getFileSystemManager().readFile(readOptions);
|
||||
},
|
||||
fail(err) {
|
||||
if (err && String(err.errMsg || '').indexOf('cancel') >= 0) {
|
||||
return;
|
||||
}
|
||||
that.setData({
|
||||
parseError: `选择文件失败: ${err && err.errMsg ? err.errMsg : '未知错误'}`
|
||||
});
|
||||
that.refreshInfoLogs();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 应用解析结果,并按 Web 规则设置默认映射后触发重建。
|
||||
*/
|
||||
applyParsedTable(table, fileName) {
|
||||
const headers = table.headers || [];
|
||||
const rows = table.rows || [];
|
||||
const sourceByName = findHeaderIndex(headers, ['data', 'value', '数据', '值']);
|
||||
const sourceBySecondRow = findNumericColumnFromSecondRow(rows);
|
||||
const sourceDescByName = findHeaderIndex(headers, ['source', '源']);
|
||||
const targetDescByName = findHeaderIndex(headers, ['target', '目标']);
|
||||
|
||||
const sourceDataColumn =
|
||||
sourceByName >= 0 ? sourceByName : sourceBySecondRow >= 0 ? sourceBySecondRow : null;
|
||||
const sourceDescriptionColumns = sourceDescByName >= 0 ? [sourceDescByName] : [];
|
||||
const targetDescriptionColumns = targetDescByName >= 0 ? [targetDescByName] : [];
|
||||
|
||||
this.setData(
|
||||
{
|
||||
uploadMessage: `已加载: ${fileName}(${rows.length} 行)`,
|
||||
parseError: '',
|
||||
buildError: '',
|
||||
columnHeaders: headers.length > 0 ? headers : ['列1', '列2', '列3'],
|
||||
tableRows: rows,
|
||||
sourceDataColumn,
|
||||
sourceDescriptionColumns,
|
||||
targetDescriptionColumns
|
||||
},
|
||||
() => {
|
||||
this.rebuildSankey();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
onSelectSourceData(e) {
|
||||
const index = Number(e.currentTarget.dataset.index);
|
||||
this.setData(
|
||||
{
|
||||
sourceDataColumn: Number.isNaN(index) ? null : index
|
||||
},
|
||||
() => {
|
||||
this.rebuildSankey();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
onToggleSourceDesc(e) {
|
||||
const index = Number(e.currentTarget.dataset.index);
|
||||
if (Number.isNaN(index)) {
|
||||
return;
|
||||
}
|
||||
const current = this.data.sourceDescriptionColumns || [];
|
||||
const exists = current.indexOf(index) >= 0;
|
||||
const next = exists
|
||||
? current.filter((item) => item !== index)
|
||||
: current.concat(index).sort((a, b) => a - b);
|
||||
this.setData(
|
||||
{
|
||||
sourceDescriptionColumns: next
|
||||
},
|
||||
() => {
|
||||
this.rebuildSankey();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
onToggleTargetDesc(e) {
|
||||
const index = Number(e.currentTarget.dataset.index);
|
||||
if (Number.isNaN(index)) {
|
||||
return;
|
||||
}
|
||||
const current = this.data.targetDescriptionColumns || [];
|
||||
const exists = current.indexOf(index) >= 0;
|
||||
const next = exists
|
||||
? current.filter((item) => item !== index)
|
||||
: current.concat(index).sort((a, b) => a - b);
|
||||
this.setData(
|
||||
{
|
||||
targetDescriptionColumns: next
|
||||
},
|
||||
() => {
|
||||
this.rebuildSankey();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据当前映射重建聚合结果,输出统计与告警。
|
||||
*/
|
||||
rebuildSankey() {
|
||||
const headers = this.data.columnHeaders || [];
|
||||
const rows = this.data.tableRows || [];
|
||||
if (rows.length === 0) {
|
||||
this.setData({
|
||||
nodesCount: 0,
|
||||
linksCount: 0,
|
||||
droppedRows: 0,
|
||||
buildWarnings: [],
|
||||
buildError: '',
|
||||
sankeyLinks: [],
|
||||
sankeyNodes: []
|
||||
});
|
||||
this.refreshInfoLogs();
|
||||
this.drawSankey();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = buildSankeyData(
|
||||
{
|
||||
headers,
|
||||
rows
|
||||
},
|
||||
{
|
||||
sourceDataColumn: this.data.sourceDataColumn,
|
||||
sourceDescriptionColumns: this.data.sourceDescriptionColumns || [],
|
||||
targetDescriptionColumns: this.data.targetDescriptionColumns || [],
|
||||
delimiter: '-'
|
||||
}
|
||||
);
|
||||
|
||||
this.setData({
|
||||
nodesCount: result.nodes.length,
|
||||
linksCount: result.links.length,
|
||||
droppedRows: result.meta.droppedRows,
|
||||
buildWarnings: (result.meta.warnings || []).slice(0, 8),
|
||||
buildError: '',
|
||||
sankeyLinks: result.links || [],
|
||||
sankeyNodes: result.nodes || []
|
||||
});
|
||||
} catch (error) {
|
||||
this.setData({
|
||||
nodesCount: 0,
|
||||
linksCount: 0,
|
||||
droppedRows: 0,
|
||||
buildWarnings: [],
|
||||
buildError: error && error.message ? error.message : '聚合失败',
|
||||
sankeyLinks: [],
|
||||
sankeyNodes: []
|
||||
});
|
||||
}
|
||||
|
||||
this.refreshInfoLogs();
|
||||
this.drawSankey();
|
||||
},
|
||||
|
||||
/**
|
||||
* 汇总日志到“信息日志”区域。
|
||||
*/
|
||||
refreshInfoLogs() {
|
||||
const logs = [];
|
||||
const rows = this.data.tableRows || [];
|
||||
const headers = this.data.columnHeaders || [];
|
||||
if (rows.length > 0) {
|
||||
logs.push(`解析信息: 已加载 ${rows.length} 行,${headers.length} 列`);
|
||||
logs.push(`解析信息: 已生成 ${this.data.nodesCount} 个节点,${this.data.linksCount} 条连线`);
|
||||
} else {
|
||||
logs.push('解析信息: 尚未加载数据文件');
|
||||
}
|
||||
|
||||
if (this.data.parseError) {
|
||||
logs.push(`错误: ${this.data.parseError}`);
|
||||
}
|
||||
if (this.data.buildError) {
|
||||
logs.push(`错误: ${this.data.buildError}`);
|
||||
}
|
||||
if (this.data.droppedRows > 0) {
|
||||
logs.push(`告警: 已跳过 ${this.data.droppedRows} 行异常数据`);
|
||||
}
|
||||
|
||||
(this.data.buildWarnings || []).forEach((warning) => {
|
||||
logs.push(`告警: ${warning}`);
|
||||
});
|
||||
|
||||
this.setData({
|
||||
infoLogs: logs.length > 0 ? logs : ['暂无日志']
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 在小程序 canvas 上绘制简化版桑基图。
|
||||
* 说明:
|
||||
* - 不依赖第三方图表库,保证小程序端零额外依赖可运行
|
||||
* - 布局规则尽量对齐 Web:左 source、右 target、按值缩放高度
|
||||
*/
|
||||
drawSankey() {
|
||||
const rawLinks = this.data.sankeyLinks || [];
|
||||
const links = applyDirection(rawLinks, this.data.direction);
|
||||
const query = wx.createSelectorQuery().in(this);
|
||||
query.select('#sankeyCanvas').boundingClientRect();
|
||||
query.exec((res) => {
|
||||
const rect = res && res[0];
|
||||
if (!rect || !rect.width || !rect.height) {
|
||||
return;
|
||||
}
|
||||
|
||||
const width = rect.width;
|
||||
const height = rect.height;
|
||||
const ctx = wx.createCanvasContext('sankeyCanvas', this);
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
ctx.setFillStyle('#f7f8fa');
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
const layout = buildSankeyLayout(links, width, height, {
|
||||
nodeGap: this.data.nodeGap,
|
||||
chartPadding: this.data.chartPadding,
|
||||
targetAlignMode: this.data.targetAlignMode
|
||||
});
|
||||
if (!layout) {
|
||||
ctx.setFillStyle('#86909c');
|
||||
ctx.setFontSize(12);
|
||||
ctx.fillText('暂无可预览数据', 12, 24);
|
||||
ctx.draw();
|
||||
return;
|
||||
}
|
||||
|
||||
layout.linkSegments.forEach((segment) => {
|
||||
ctx.setStrokeStyle('rgba(155,107,194,0.35)');
|
||||
ctx.setLineWidth(segment.linkHeight);
|
||||
ctx.setLineCap('round');
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(segment.startX, segment.sy);
|
||||
ctx.bezierCurveTo(
|
||||
segment.controlX,
|
||||
segment.sy,
|
||||
segment.controlX,
|
||||
segment.ty,
|
||||
segment.endX,
|
||||
segment.ty
|
||||
);
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
layout.sourceNames.forEach((name, index) => {
|
||||
const node = layout.sourcePos[name];
|
||||
const labelPlacement = getCanvasLabelPlacement(layout, true, this.data.labelPositionMode);
|
||||
ctx.setFillStyle(getNodeColor(index));
|
||||
ctx.fillRect(layout.leftX, node.y, layout.nodeWidth, node.h);
|
||||
ctx.setFillStyle('#4e5969');
|
||||
ctx.setFontSize(10);
|
||||
ctx.setTextAlign(labelPlacement.textAlign);
|
||||
ctx.setTextBaseline('middle');
|
||||
ctx.fillText(name, labelPlacement.x, node.y + getNodeLabelCenterY(node.h));
|
||||
});
|
||||
|
||||
layout.targetNames.forEach((name, index) => {
|
||||
const node = layout.targetPos[name];
|
||||
const labelPlacement = getCanvasLabelPlacement(layout, false, this.data.labelPositionMode);
|
||||
ctx.setFillStyle(getNodeColor(index));
|
||||
ctx.fillRect(layout.rightX, node.y, layout.nodeWidth, node.h);
|
||||
ctx.setFillStyle('#4e5969');
|
||||
ctx.setFontSize(10);
|
||||
ctx.setTextAlign(labelPlacement.textAlign);
|
||||
ctx.setTextBaseline('middle');
|
||||
ctx.fillText(name, labelPlacement.x, node.y + getNodeLabelCenterY(node.h));
|
||||
});
|
||||
|
||||
ctx.draw();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 小程序端目前仅支持 PNG 导出(保存到相册)。
|
||||
*/
|
||||
onExportPng() {
|
||||
const that = this;
|
||||
wx.canvasToTempFilePath(
|
||||
{
|
||||
canvasId: 'sankeyCanvas',
|
||||
fileType: 'png',
|
||||
success(res) {
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success() {
|
||||
wx.showToast({
|
||||
title: 'PNG 已保存到相册',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail(err) {
|
||||
wx.showToast({
|
||||
title: err && err.errMsg ? '保存失败,请检查相册权限' : '保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail() {
|
||||
wx.showToast({
|
||||
title: '导出 PNG 失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
that
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 小程序 SVG 导出:
|
||||
* - 使用与画布一致的布局算法生成 SVG 字符串
|
||||
* - 写入用户数据目录,支持后续转发/分享
|
||||
*/
|
||||
onExportSvg() {
|
||||
const rawLinks = this.data.sankeyLinks || [];
|
||||
const links = applyDirection(rawLinks, this.data.direction);
|
||||
if (!Array.isArray(links) || links.length === 0) {
|
||||
wx.showToast({
|
||||
title: '暂无可导出的数据',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const query = wx.createSelectorQuery().in(this);
|
||||
query.select('#sankeyCanvas').boundingClientRect();
|
||||
query.exec((res) => {
|
||||
const rect = res && res[0];
|
||||
if (!rect || !rect.width || !rect.height) {
|
||||
wx.showToast({
|
||||
title: '导出 SVG 失败:画布尺寸无效',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const svgText = buildSankeySvgText(links, rect.width, rect.height, {
|
||||
nodeGap: this.data.nodeGap,
|
||||
chartPadding: this.data.chartPadding,
|
||||
labelPositionMode: this.data.labelPositionMode,
|
||||
targetAlignMode: this.data.targetAlignMode
|
||||
});
|
||||
if (!svgText) {
|
||||
wx.showToast({
|
||||
title: '暂无可导出的数据',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const svgFilePath = `${wx.env.USER_DATA_PATH}/sankey_${formatFileTimestamp()}.svg`;
|
||||
wx.getFileSystemManager().writeFile({
|
||||
filePath: svgFilePath,
|
||||
data: svgText,
|
||||
encoding: 'utf8',
|
||||
success() {
|
||||
wx.openDocument({
|
||||
filePath: svgFilePath,
|
||||
showMenu: true,
|
||||
success() {
|
||||
wx.showToast({
|
||||
title: 'SVG 已导出',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail() {
|
||||
wx.setClipboardData({
|
||||
data: svgFilePath,
|
||||
success() {
|
||||
wx.showToast({
|
||||
title: 'SVG 已导出,路径已复制',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
fail() {
|
||||
wx.showToast({
|
||||
title: 'SVG 已导出',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail(err) {
|
||||
wx.showToast({
|
||||
title: `导出 SVG 失败: ${err && err.errMsg ? err.errMsg : '未知错误'}`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,85 +1,149 @@
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<image class="logo" src="/assets/icons/webicon.png" mode="aspectFill" />
|
||||
<image class="title" src="/assets/icons/星程桑基图.svg" mode="widthFix" />
|
||||
<image class="logo" src="../../assets/icons/webicon.png" mode="aspectFill" />
|
||||
<image class="title" src="../../assets/icons/星程桑基图.svg" mode="widthFix" />
|
||||
</view>
|
||||
|
||||
<view class="toolbar">
|
||||
<view class="tool-item" bindtap="onToggleThemeSheet">
|
||||
<text>选择主题</text>
|
||||
<image class="tool-icon" src="/assets/icons/choose-color.svg" mode="aspectFit" />
|
||||
<image class="tool-icon" src="../../assets/icons/choose-color.svg" mode="aspectFit" bindtap="onToggleThemeSheet" />
|
||||
<image class="tool-icon upload-trigger" src="../../assets/icons/upload.svg" mode="aspectFit" bindtap="onChooseFile" />
|
||||
|
||||
<view class="upload-box" bindtap="onChooseFile">
|
||||
<text class="upload-text">{{uploadMessage}}</text>
|
||||
</view>
|
||||
|
||||
<view class="tool-item">
|
||||
<image class="tiny-icon" src="/assets/icons/content.svg" mode="aspectFit" />
|
||||
<text>文件上传</text>
|
||||
<image class="tool-icon" src="/assets/icons/upload.svg" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="toolbar-spacer" />
|
||||
|
||||
<view class="export-box">
|
||||
<image class="export-main" src="/assets/icons/export.svg" mode="aspectFit" />
|
||||
<image class="export-icon" src="/assets/icons/export-svg.svg" mode="aspectFit" />
|
||||
<image class="export-icon" src="/assets/icons/export-png.svg" mode="aspectFit" />
|
||||
<image class="export-main" src="../../assets/icons/export.svg" mode="aspectFit" />
|
||||
<image class="export-icon" src="../../assets/icons/export-svg.svg" mode="aspectFit" bindtap="onExportSvg" />
|
||||
<image class="export-icon" src="../../assets/icons/export-png.svg" mode="aspectFit" bindtap="onExportPng" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="preview-block">
|
||||
<text class="block-title">效果预览</text>
|
||||
<view class="preview-canvas" />
|
||||
</view>
|
||||
<view class="preview-panel">
|
||||
<view class="preview-head">
|
||||
<image class="preview-title" src="../../assets/icons/sankeyview.svg" mode="widthFix" />
|
||||
|
||||
<view class="bottom-grid">
|
||||
<view class="block">
|
||||
<text class="block-title">源数据</text>
|
||||
<view class="field">
|
||||
<view class="field-title">
|
||||
<image src="/assets/icons/expand.svg" mode="aspectFit" />
|
||||
<text>数据列</text>
|
||||
<view class="preview-controls">
|
||||
<view class="control-item">
|
||||
<image class="control-icon" src="../../assets/icons/gap.svg" mode="aspectFit" />
|
||||
<picker mode="selector" range="{{gapOptions}}" value="{{gapOptionIndex}}" bindchange="onChangeGap">
|
||||
<view class="select-pill">
|
||||
<text>{{gapOptions[gapOptionIndex]}}</text>
|
||||
<image class="select-arrow" src="../../assets/icons/list.svg" mode="aspectFit" />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="row" wx:for="{{sourceColumns}}" wx:key="*this">
|
||||
<image src="/assets/icons/data.svg" mode="aspectFit" />
|
||||
<view class="control-item">
|
||||
<image class="control-icon" src="../../assets/icons/padding.svg" mode="aspectFit" />
|
||||
<picker mode="selector" range="{{paddingOptions}}" value="{{paddingOptionIndex}}" bindchange="onChangePadding">
|
||||
<view class="select-pill">
|
||||
<text>{{paddingOptions[paddingOptionIndex]}}</text>
|
||||
<image class="select-arrow" src="../../assets/icons/list.svg" mode="aspectFit" />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="direction-item" bindtap="onToggleDirection">
|
||||
<view class="vertical-label">
|
||||
<text>方</text>
|
||||
<text>向</text>
|
||||
</view>
|
||||
<view class="direction-switch {{direction === 'source-to-target' ? 'on' : ''}}">
|
||||
<text class="direction-text">{{direction === 'source-to-target' ? 'source' : 'target'}}</text>
|
||||
<view class="direction-thumb" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="picker-item">
|
||||
<view class="vertical-label">
|
||||
<text>位</text>
|
||||
<text>置</text>
|
||||
</view>
|
||||
<picker mode="selector" range="{{labelPositionOptionLabels}}" value="{{labelPositionIndex}}" bindchange="onChangeLabelPosition">
|
||||
<view class="select-pill">
|
||||
<text>{{labelPositionOptionLabels[labelPositionIndex]}}</text>
|
||||
<image class="select-arrow" src="../../assets/icons/list.svg" mode="aspectFit" />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="picker-item">
|
||||
<view class="vertical-label">
|
||||
<text>对</text>
|
||||
<text>齐</text>
|
||||
</view>
|
||||
<picker mode="selector" range="{{targetAlignOptionLabels}}" value="{{targetAlignIndex}}" bindchange="onChangeTargetAlign">
|
||||
<view class="select-pill wide">
|
||||
<text>{{targetAlignOptionLabels[targetAlignIndex]}}</text>
|
||||
<image class="select-arrow" src="../../assets/icons/list.svg" mode="aspectFit" />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text wx:if="{{buildError}}" class="error-text">{{buildError}}</text>
|
||||
<text wx:if="{{parseError}}" class="error-text">{{parseError}}</text>
|
||||
<canvas class="preview-canvas" canvas-id="sankeyCanvas" id="sankeyCanvas" />
|
||||
</view>
|
||||
|
||||
<view class="bottom-panels">
|
||||
<view class="panel data-panel">
|
||||
<image class="panel-title" src="../../assets/icons/data-select.svg" mode="widthFix" />
|
||||
|
||||
<view class="field-group">
|
||||
<view class="field-title">
|
||||
<image src="../../assets/icons/expand.svg" mode="aspectFit" />
|
||||
<text>源数据(link value)</text>
|
||||
</view>
|
||||
<view class="row" wx:for="{{columnHeaders}}" wx:key="*this" data-index="{{index}}" bindtap="onSelectSourceData">
|
||||
<image src="../../assets/icons/data.svg" mode="aspectFit" />
|
||||
<text class="label">{{item}}</text>
|
||||
<image
|
||||
src="{{sourceDataIndex === index ? '/assets/icons/radiobutton.svg' : '/assets/icons/radiobutton-no.svg'}}"
|
||||
src="{{sourceDataColumn === index ? '../../assets/icons/radiobutton.svg' : '../../assets/icons/radiobutton-no.svg'}}"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="field">
|
||||
<view class="field-group">
|
||||
<view class="field-title">
|
||||
<image src="/assets/icons/expand.svg" mode="aspectFit" />
|
||||
<text>描述列</text>
|
||||
<image src="../../assets/icons/expand.svg" mode="aspectFit" />
|
||||
<text>源标签(Source label)</text>
|
||||
</view>
|
||||
|
||||
<view class="row" wx:for="{{sourceColumns}}" wx:key="*this">
|
||||
<image src="/assets/icons/description.svg" mode="aspectFit" />
|
||||
<view class="row" wx:for="{{columnHeaders}}" wx:key="*this" data-index="{{index}}" bindtap="onToggleSourceDesc">
|
||||
<image src="../../assets/icons/description.svg" mode="aspectFit" />
|
||||
<text class="label">{{item}}</text>
|
||||
<image
|
||||
src="{{sourceDescChecked.indexOf(index) > -1 ? '/assets/icons/checkbox.svg' : '/assets/icons/checkbox-no.svg'}}"
|
||||
src="{{sourceDescriptionColumns.indexOf(index) > -1 ? '../../assets/icons/checkbox.svg' : '../../assets/icons/checkbox-no.svg'}}"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="field-group">
|
||||
<view class="field-title">
|
||||
<image src="../../assets/icons/expand.svg" mode="aspectFit" />
|
||||
<text>目标标签(target label)</text>
|
||||
</view>
|
||||
<view class="row" wx:for="{{columnHeaders}}" wx:key="*this" data-index="{{index}}" bindtap="onToggleTargetDesc">
|
||||
<image src="../../assets/icons/description.svg" mode="aspectFit" />
|
||||
<text class="label">{{item}}</text>
|
||||
<image
|
||||
src="{{targetDescriptionColumns.indexOf(index) > -1 ? '../../assets/icons/checkbox.svg' : '../../assets/icons/checkbox-no.svg'}}"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="block">
|
||||
<text class="block-title">目标数据</text>
|
||||
<view class="field">
|
||||
<view class="field-title">
|
||||
<image src="/assets/icons/expand.svg" mode="aspectFit" />
|
||||
<text>描述列</text>
|
||||
</view>
|
||||
|
||||
<view class="row" wx:for="{{targetColumns}}" wx:key="*this">
|
||||
<image src="/assets/icons/description.svg" mode="aspectFit" />
|
||||
<text class="label">{{item}}</text>
|
||||
<image
|
||||
src="{{targetDescChecked.indexOf(index) > -1 ? '/assets/icons/checkbox.svg' : '/assets/icons/checkbox-no.svg'}}"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<view class="panel log-panel">
|
||||
<image class="panel-title panel-title-log" src="../../assets/icons/information.svg" mode="widthFix" />
|
||||
<view class="log-list">
|
||||
<text class="log-item" wx:for="{{infoLogs}}" wx:key="index">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -91,7 +155,7 @@
|
||||
<text class="theme-title">选择配色主题</text>
|
||||
<view class="theme-row" wx:for="{{4}}" wx:key="index">
|
||||
<image
|
||||
src="{{selectedThemeIndex === index ? '/assets/icons/radiobutton.svg' : '/assets/icons/radiobutton-no.svg'}}"
|
||||
src="{{selectedThemeIndex === index ? '../../assets/icons/radiobutton.svg' : '../../assets/icons/radiobutton-no.svg'}}"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="theme-bar" />
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
padding: 8px;
|
||||
background: #f3f4f6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -13,50 +16,77 @@
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 160px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin-top: 8px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tool-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-size: 12px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tiny-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
.upload-trigger {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
border: 0.5px solid #4e5969;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
width: 100%;
|
||||
color: #4e5969;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.toolbar-spacer {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.export-box {
|
||||
margin-left: auto;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e6eb;
|
||||
border: 0.5px solid #e5e6eb;
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.export-main {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
width: 9px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.export-icon {
|
||||
@@ -64,44 +94,193 @@
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.preview-block,
|
||||
.block {
|
||||
.preview-panel {
|
||||
margin-top: 8px;
|
||||
border: 1px solid #fbaca3;
|
||||
border-radius: 8px;
|
||||
border: 0.4px solid #f99595;
|
||||
border-radius: 6.4px;
|
||||
background: #fff;
|
||||
padding: 4px;
|
||||
padding: 3.2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
font-size: 16px;
|
||||
.preview-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
width: 166px;
|
||||
height: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-controls {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.preview-controls::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control-item,
|
||||
.picker-item,
|
||||
.direction-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.control-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.select-pill {
|
||||
height: 14px;
|
||||
border: 0.5px solid #c9aee0;
|
||||
border-radius: 4px;
|
||||
padding: 0 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: #606060;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.select-pill.wide {
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.select-arrow {
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.vertical-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.direction-switch {
|
||||
min-width: 43px;
|
||||
height: 14px;
|
||||
border-radius: 58px;
|
||||
background: #c9cdd4;
|
||||
padding: 1px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.direction-switch.on {
|
||||
background: #9b6bc2;
|
||||
}
|
||||
|
||||
.direction-text {
|
||||
color: #4e5969;
|
||||
font-size: 8px;
|
||||
line-height: 1;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.direction-switch.on .direction-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.direction-thumb {
|
||||
width: 11.67px;
|
||||
height: 11.67px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.direction-switch.on .direction-thumb {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.direction-switch:not(.on) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
margin-top: 4px;
|
||||
color: #cb272d;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.preview-canvas {
|
||||
margin-top: 4px;
|
||||
min-height: 300px;
|
||||
background: #f7f8fa;
|
||||
margin-top: 3px;
|
||||
width: 100%;
|
||||
height: 371px;
|
||||
border-radius: 4px;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.bottom-grid {
|
||||
.bottom-panels {
|
||||
margin-top: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-top: 8px;
|
||||
.panel {
|
||||
border: 1px solid #f7e0e0;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.data-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.log-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
width: 128px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.panel-title-log {
|
||||
width: 123px;
|
||||
}
|
||||
|
||||
.field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.field-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.field-title image {
|
||||
@@ -114,32 +293,54 @@
|
||||
border-bottom: 1px solid #c9cdd4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding-bottom: 6px;
|
||||
margin-top: 4px;
|
||||
gap: 8px;
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row image {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: #86909c;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.log-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
color: #1d2129;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 8px;
|
||||
margin-top: 6px;
|
||||
color: #86909c;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.theme-sheet-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.theme-sheet {
|
||||
@@ -150,6 +351,7 @@
|
||||
background: #fff;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 12px;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.theme-title {
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
{
|
||||
"desc": "星程桑基图小程序",
|
||||
"rules": []
|
||||
"rules": [
|
||||
{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
320
miniapp/utils/sankey.js
Normal file
@@ -0,0 +1,320 @@
|
||||
/**
|
||||
* 统一清洗文本,避免空格导致节点重复。
|
||||
*/
|
||||
function normalizeText(value) {
|
||||
return String(value || '').trim();
|
||||
}
|
||||
|
||||
/**
|
||||
* 尝试懒加载 xlsx 解析库。
|
||||
* 说明:
|
||||
* - 小程序若未完成 npm 构建,此处会拿不到模块
|
||||
* - 使用缓存避免每次解析都重复 require
|
||||
*/
|
||||
let cachedXlsxModule;
|
||||
function getXlsxModule() {
|
||||
if (cachedXlsxModule !== undefined) {
|
||||
return cachedXlsxModule;
|
||||
}
|
||||
try {
|
||||
cachedXlsxModule = require('xlsx');
|
||||
} catch (error) {
|
||||
cachedXlsxModule = null;
|
||||
}
|
||||
return cachedXlsxModule;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将二维数组统一整理为 headers + rows 结构。
|
||||
* 约定第一行为表头,后续行为数据行。
|
||||
*/
|
||||
function toRawTable(rows) {
|
||||
if (!Array.isArray(rows) || rows.length === 0) {
|
||||
return { headers: [], rows: [] };
|
||||
}
|
||||
|
||||
const firstRow = Array.isArray(rows[0]) ? rows[0] : [];
|
||||
const maxColumns = rows.reduce((max, row) => {
|
||||
const length = Array.isArray(row) ? row.length : 0;
|
||||
return Math.max(max, length);
|
||||
}, firstRow.length);
|
||||
|
||||
const headers = Array.from({ length: maxColumns }, (_, index) => {
|
||||
const header = normalizeText(firstRow[index] || '');
|
||||
return header || `列${index + 1}`;
|
||||
});
|
||||
|
||||
const dataRows = rows.slice(1).map((row) => {
|
||||
const safeRow = Array.isArray(row) ? row : [];
|
||||
return Array.from({ length: maxColumns }, (_, index) => normalizeText(safeRow[index] || ''));
|
||||
});
|
||||
|
||||
return { headers, rows: dataRows };
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析数字,支持千分位。
|
||||
*/
|
||||
function parseNumericValue(text) {
|
||||
const normalized = normalizeText(text).replace(/,/g, '');
|
||||
if (!normalized) {
|
||||
return null;
|
||||
}
|
||||
const parsed = Number(normalized);
|
||||
if (Number.isNaN(parsed)) {
|
||||
return null;
|
||||
}
|
||||
return parsed;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将单元格值格式化为日志可读文本。
|
||||
*/
|
||||
function formatCellValueForWarning(value) {
|
||||
const text = String(value || '');
|
||||
return text.length > 0 ? text : '(空)';
|
||||
}
|
||||
|
||||
/**
|
||||
* 组装“列位置 + 列名 + 原始值”的调试文本。
|
||||
*/
|
||||
function buildColumnDebugText(row, headers, columns) {
|
||||
if (!Array.isArray(columns) || columns.length === 0) {
|
||||
return '未选择列';
|
||||
}
|
||||
return columns
|
||||
.map((columnIndex) => {
|
||||
const headerName = headers[columnIndex] || `列${columnIndex + 1}`;
|
||||
const rawValue = row[columnIndex] || '';
|
||||
return `第 ${columnIndex + 1} 列(${headerName})="${formatCellValueForWarning(rawValue)}"`;
|
||||
})
|
||||
.join(',');
|
||||
}
|
||||
|
||||
/**
|
||||
* 简单 CSV 解析(支持双引号与双引号转义)。
|
||||
*/
|
||||
function parseCsvText(csvText) {
|
||||
const text = String(csvText || '').replace(/^\uFEFF/, '');
|
||||
const rows = [];
|
||||
let row = [];
|
||||
let cell = '';
|
||||
let inQuotes = false;
|
||||
|
||||
for (let i = 0; i < text.length; i += 1) {
|
||||
const ch = text[i];
|
||||
const next = text[i + 1];
|
||||
if (ch === '"') {
|
||||
if (inQuotes && next === '"') {
|
||||
cell += '"';
|
||||
i += 1;
|
||||
} else {
|
||||
inQuotes = !inQuotes;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!inQuotes && ch === ',') {
|
||||
row.push(cell);
|
||||
cell = '';
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!inQuotes && (ch === '\n' || ch === '\r')) {
|
||||
if (ch === '\r' && next === '\n') {
|
||||
i += 1;
|
||||
}
|
||||
row.push(cell);
|
||||
cell = '';
|
||||
rows.push(row);
|
||||
row = [];
|
||||
continue;
|
||||
}
|
||||
|
||||
cell += ch;
|
||||
}
|
||||
|
||||
row.push(cell);
|
||||
rows.push(row);
|
||||
|
||||
const normalizedRows = rows
|
||||
.map((items) => items.map((item) => normalizeText(item)))
|
||||
.filter((items) => items.some((item) => item.length > 0));
|
||||
|
||||
return toRawTable(normalizedRows);
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 xls/xlsx 二进制内容。
|
||||
*/
|
||||
function parseXlsxBuffer(buffer) {
|
||||
const xlsx = getXlsxModule();
|
||||
if (!xlsx) {
|
||||
throw new Error('当前环境未启用 xlsx 解析,请先在开发者工具执行“构建 npm”');
|
||||
}
|
||||
|
||||
const workbook = xlsx.read(buffer, { type: 'array' });
|
||||
const firstSheetName = workbook.SheetNames[0];
|
||||
if (!firstSheetName) {
|
||||
throw new Error('Excel 文件中没有工作表');
|
||||
}
|
||||
|
||||
const sheet = workbook.Sheets[firstSheetName];
|
||||
const rows = xlsx.utils.sheet_to_json(sheet, {
|
||||
header: 1,
|
||||
raw: false,
|
||||
defval: ''
|
||||
});
|
||||
return toRawTable(rows);
|
||||
}
|
||||
|
||||
/**
|
||||
* 按文件名后缀自动分流解析器。
|
||||
*/
|
||||
function parseTableByFileName(fileName, payload) {
|
||||
const lowerName = String(fileName || '').toLowerCase();
|
||||
if (lowerName.endsWith('.csv')) {
|
||||
return parseCsvText(String(payload || ''));
|
||||
}
|
||||
if (lowerName.endsWith('.xlsx') || lowerName.endsWith('.xls')) {
|
||||
return parseXlsxBuffer(payload);
|
||||
}
|
||||
throw new Error('仅支持 .csv / .xlsx / .xls 文件');
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建 source 名称。
|
||||
*/
|
||||
function buildSourceName(row, config) {
|
||||
if (!Array.isArray(config.sourceDescriptionColumns) || config.sourceDescriptionColumns.length === 0) {
|
||||
return normalizeText(row[config.sourceDataColumn] || '');
|
||||
}
|
||||
const parts = config.sourceDescriptionColumns
|
||||
.map((column) => normalizeText(row[column] || ''))
|
||||
.filter((item) => item.length > 0);
|
||||
return parts.join(config.delimiter || '-');
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建 target 名称,支持向下补全。
|
||||
*/
|
||||
function buildTargetName(row, config, lastNonEmptyTargetValueByColumn) {
|
||||
const parts = (config.targetDescriptionColumns || [])
|
||||
.map((column) => {
|
||||
const raw = normalizeText(row[column] || '');
|
||||
if (raw.length > 0) {
|
||||
lastNonEmptyTargetValueByColumn[column] = raw;
|
||||
return raw;
|
||||
}
|
||||
return lastNonEmptyTargetValueByColumn[column] || '';
|
||||
})
|
||||
.filter((item) => item.length > 0);
|
||||
return parts.join(config.delimiter || '-');
|
||||
}
|
||||
|
||||
/**
|
||||
* 与 Web 端保持一致的聚合规则。
|
||||
*/
|
||||
function buildSankeyData(table, config) {
|
||||
if (config.sourceDataColumn === null || config.sourceDataColumn === undefined) {
|
||||
throw new Error('必须选择源数据列');
|
||||
}
|
||||
if (!Array.isArray(config.targetDescriptionColumns) || config.targetDescriptionColumns.length === 0) {
|
||||
throw new Error('必须至少选择一个目标描述列');
|
||||
}
|
||||
|
||||
const sourceDataColumnIndex = config.sourceDataColumn;
|
||||
const sourceDataColumnName = table.headers[sourceDataColumnIndex] || `列${sourceDataColumnIndex + 1}`;
|
||||
const linkValueMap = {};
|
||||
const warnings = [];
|
||||
let droppedRows = 0;
|
||||
const lastNonEmptyTargetValueByColumn = {};
|
||||
|
||||
(table.rows || []).forEach((row, rowIndex) => {
|
||||
const excelRow = rowIndex + 2;
|
||||
const sourceCellRaw = row[sourceDataColumnIndex] || '';
|
||||
const sourceValue = parseNumericValue(sourceCellRaw);
|
||||
|
||||
if (sourceValue === null) {
|
||||
warnings.push(
|
||||
`第 ${excelRow} 行, 第 ${sourceDataColumnIndex + 1} 列(${sourceDataColumnName}): 源数据不是有效数字,原始值="${formatCellValueForWarning(sourceCellRaw)}",已跳过`
|
||||
);
|
||||
droppedRows += 1;
|
||||
return;
|
||||
}
|
||||
|
||||
const sourceName = buildSourceName(row, config);
|
||||
if (!sourceName) {
|
||||
warnings.push(
|
||||
`第 ${excelRow} 行: 源描述为空,字段=${buildColumnDebugText(
|
||||
row,
|
||||
table.headers || [],
|
||||
config.sourceDescriptionColumns || []
|
||||
)},已跳过`
|
||||
);
|
||||
droppedRows += 1;
|
||||
return;
|
||||
}
|
||||
|
||||
const targetName = buildTargetName(row, config, lastNonEmptyTargetValueByColumn);
|
||||
if (!targetName) {
|
||||
warnings.push(
|
||||
`第 ${excelRow} 行: 目标描述为空,字段=${buildColumnDebugText(
|
||||
row,
|
||||
table.headers || [],
|
||||
config.targetDescriptionColumns || []
|
||||
)},且无可继承的上方值,已跳过`
|
||||
);
|
||||
droppedRows += 1;
|
||||
return;
|
||||
}
|
||||
|
||||
const key = `${sourceName}@@${targetName}`;
|
||||
linkValueMap[key] = (linkValueMap[key] || 0) + sourceValue;
|
||||
});
|
||||
|
||||
const links = [];
|
||||
const sourceSet = {};
|
||||
const targetSet = {};
|
||||
Object.keys(linkValueMap).forEach((key) => {
|
||||
const pair = key.split('@@');
|
||||
const source = pair[0];
|
||||
const target = pair[1];
|
||||
if (!source || !target) {
|
||||
return;
|
||||
}
|
||||
sourceSet[source] = true;
|
||||
targetSet[target] = true;
|
||||
links.push({
|
||||
source,
|
||||
target,
|
||||
value: linkValueMap[key]
|
||||
});
|
||||
});
|
||||
|
||||
const nodes = [];
|
||||
Object.keys(sourceSet).forEach((name) => {
|
||||
nodes.push({ name, kind: 'source' });
|
||||
});
|
||||
Object.keys(targetSet).forEach((name) => {
|
||||
if (!sourceSet[name]) {
|
||||
nodes.push({ name, kind: 'target' });
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
nodes,
|
||||
links,
|
||||
meta: {
|
||||
droppedRows,
|
||||
warnings
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
parseCsvText,
|
||||
parseXlsxBuffer,
|
||||
parseTableByFileName,
|
||||
buildSankeyData
|
||||
};
|
||||