update at 2026-02-13 22:26:53

miniapp/pages/index/index.wxml

@@ -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" />