diff --git a/miniapp/pages/index/index.js b/miniapp/pages/index/index.js index d86cc20..4c9dc84 100644 --- a/miniapp/pages/index/index.js +++ b/miniapp/pages/index/index.js @@ -75,6 +75,18 @@ function getBaseNameFromPath(filePath) { return segments[segments.length - 1] || ''; } +/** + * 上传框文案只显示文件名,不展示路径和统计信息。 + * 详细信息统一放到“信息日志”区域,避免主界面过长文本挤压。 + */ +function buildUploadMessage(fileName, sourceType) { + const baseName = getBaseNameFromPath(fileName) || '未知文件'; + if (sourceType === 'default') { + return `默认加载:${baseName}`; + } + return `已加载:${baseName}`; +} + const FALLBACK_THEME_COLORS = ['#9b6bc2', '#7e95f7', '#4cc9f0', '#f4a261']; /** @@ -755,7 +767,7 @@ Page({ DEFAULT_THEME_INDEX, Array.isArray(themePresets) ? themePresets.length : 0 ), - uploadMessage: '默认加载 data/sankey.xlsx 中...', + uploadMessage: buildUploadMessage(DEFAULT_SANKEY_FILE_NAME, 'default'), parseError: '', buildError: '', columnHeaders: [], @@ -778,6 +790,12 @@ Page({ infoLogs: ['解析信息: 正在加载默认数据文件 data/sankey.xlsx'], sankeyLinks: [], sankeyNodes: [], + loadedFileName: '', + loadedFilePath: '', + loadedFileSourceType: '', + // 同步 canvas 逻辑分辨率,避免默认 300x150 被拉伸后出现裁剪。 + previewCanvasWidth: 300, + previewCanvasHeight: 150, gapOptions: GAP_OPTIONS, gapOptionIndex: 1, nodeGap: GAP_OPTIONS[1], @@ -1051,7 +1069,10 @@ Page({ success(readRes) { try { const table = parseTableByFileName(fileName, readRes.data); - that.applyParsedTable(table, fileName); + that.applyParsedTable(table, fileName, { + sourceType: 'upload', + fullPath: filePath + }); } catch (error) { that.setData({ parseError: toFriendlyParseError(error, '文件解析失败') @@ -1093,7 +1114,10 @@ Page({ return; } - that.applyParsedTable(defaultSankeyTable, `${DEFAULT_SANKEY_FILE_NAME}(内置回退)`); + that.applyParsedTable(defaultSankeyTable, DEFAULT_SANKEY_FILE_NAME, { + sourceType: 'default', + fullPath: 'miniapp/data/sankey.default.js(内置回退)' + }); }; const tryReadByIndex = (index, lastErrorMessage) => { @@ -1108,7 +1132,10 @@ Page({ success(readRes) { try { const table = parseTableByFileName(DEFAULT_SANKEY_FILE_NAME, readRes.data); - that.applyParsedTable(table, DEFAULT_SANKEY_FILE_NAME); + that.applyParsedTable(table, DEFAULT_SANKEY_FILE_NAME, { + sourceType: 'default', + fullPath: candidatePath + }); } catch (error) { that.setData({ uploadMessage: '点击上传或将csv/xls文件拖到这里上传', @@ -1164,9 +1191,14 @@ Page({ /** * 应用解析结果,并按 Web 规则设置默认映射后触发重建。 */ - applyParsedTable(table, fileName) { + applyParsedTable(table, fileName, options) { const headers = table.headers || []; const rows = table.rows || []; + const sourceType = options && options.sourceType === 'default' ? 'default' : 'upload'; + const fullPath = + options && typeof options.fullPath === 'string' && options.fullPath + ? options.fullPath + : ''; const sourceByName = findHeaderIndex(headers, ['data', 'value', '数据', '值']); const sourceBySecondRow = findNumericColumnFromSecondRow(rows); const sourceDescByName = findHeaderIndex(headers, ['source', '源']); @@ -1179,9 +1211,12 @@ Page({ this.setData( { - uploadMessage: `已加载: ${fileName}(${rows.length} 行)`, + uploadMessage: buildUploadMessage(fileName, sourceType), parseError: '', buildError: '', + loadedFileName: getBaseNameFromPath(fileName) || fileName || '', + loadedFilePath: fullPath, + loadedFileSourceType: sourceType, columnHeaders: headers.length > 0 ? headers : [], tableRows: rows, sourceDataColumn, @@ -1344,6 +1379,20 @@ Page({ const logs = []; const rows = this.data.tableRows || []; const headers = this.data.columnHeaders || []; + const loadedFileName = this.data.loadedFileName || ''; + const loadedFilePath = this.data.loadedFilePath || ''; + const loadedFileSourceType = this.data.loadedFileSourceType || ''; + + if (loadedFileName) { + logs.push(`解析信息: 当前文件 ${loadedFileName}`); + } + if (loadedFileSourceType) { + logs.push(`解析信息: 数据来源 ${loadedFileSourceType === 'default' ? '默认文件' : '用户上传'}`); + } + if (loadedFilePath) { + logs.push(`解析信息: 文件路径 ${loadedFilePath}`); + } + if (rows.length > 0) { logs.push(`解析信息: 已加载 ${rows.length} 行,${headers.length} 列`); logs.push(`解析信息: 已生成 ${this.data.nodesCount} 个节点,${this.data.linksCount} 条连线`); @@ -1388,8 +1437,25 @@ Page({ return; } - const width = rect.width; - const height = rect.height; + const width = Math.max(1, Math.round(rect.width)); + const height = Math.max(1, Math.round(rect.height)); + + // 小程序 canvas 默认逻辑尺寸是 300x150。 + // 若不把逻辑尺寸同步到容器尺寸,超过 300/150 的坐标会被裁剪, + // 视觉上会出现“节点明明应在最右侧,却停在约 2/3 位置”的问题。 + if (this.data.previewCanvasWidth !== width || this.data.previewCanvasHeight !== height) { + this.setData( + { + previewCanvasWidth: width, + previewCanvasHeight: height + }, + () => { + this.drawSankey(); + } + ); + return; + } + const ctx = wx.createCanvasContext('sankeyCanvas', this); ctx.clearRect(0, 0, width, height); ctx.setFillStyle('#f7f8fa'); diff --git a/miniapp/pages/index/index.wxml b/miniapp/pages/index/index.wxml index 9e3e540..d6bf849 100644 --- a/miniapp/pages/index/index.wxml +++ b/miniapp/pages/index/index.wxml @@ -76,7 +76,13 @@ {{buildError}} {{parseError}} - +