第15章｜自定义地址怎么回填

这一章讲自定义地址怎么回填，核心是把输入框里的值真正写回到页面状态和历史记录里。

01 先清旧值

这一节不是只给一句结论，而是把"先清旧值"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：先清旧值不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 先清旧值
const step = '{01}';
const payload = {
  title: '01 先清旧值',
  ready: true,
};

这里的要点

先把 01 先清旧值讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

先清旧值这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

02 输入要 trim

这一节不是只给一句结论，而是把"输入要 trim"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：输入要 trim 不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 输入要 trim
const step = '{02}';
const payload = {
  title: '02 输入要 trim',
  ready: true,
};

这里的要点

先把 02 输入要 trim 讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

输入要 trim 这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

03 空值要拦截

这一节不是只给一句结论，而是把"空值要拦截"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：空值要拦截不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 空值要拦截
const fallbackAddress = this.manualLocation || this.gpsAddress || '未设置地点';
const fallbackTime = this.previewTime || '00:00';
this.previewAddress = fallbackAddress;
this.previewTime = fallbackTime;

这里的要点

空值不是报错，但必须有默认表现。
兜底值要统一，避免页面看起来断开。
默认状态要能解释给用户。

空值要拦截这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

04 保存要回填

这一节不是只给一句结论，而是把"保存要回填"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：保存要回填不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 保存要回填
private persistSettings(): void {
  PersistentStorage.persistProp('wmShowTime', this.showTime);
  PersistentStorage.persistProp('wmShowAddress', this.showAddress);
  PersistentStorage.persistProp('wmLocationHistory', JSON.stringify(this.historyList));
}

这里的要点

保存要覆盖用户真的会改的字段，不能只存一半。
恢复要容错，旧数据缺字段时也要能工作。
持久化写完后，重进页面要能读回原状态。

保存要回填这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

05 回填要更新预览

这一节不是只给一句结论，而是把"回填要更新预览"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要更新预览不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要更新预览
private refreshPreview(): void {
  const now = new Date();
  this.previewTime = now.getHours().toString().padStart(2, '0') + ':' +
    now.getMinutes().toString().padStart(2, '0');
  this.previewDate = now.getFullYear() + '.' + (now.getMonth() + 1).toString().padStart(2, '0');
}

这里的要点

预览必须随状态刷新，而不是等用户重新进入。
时间、日期和地点要一起更新，避免只改一半。
预览要和最终结果尽量一致，不能前后两套。

回填要更新预览这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

06 回填要写历史

这一节不是只给一句结论，而是把"回填要写历史"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要写历史不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要写历史
const nextHistory = [{
  address: this.previewAddress,
  time: new Date().toLocaleString(),
  source: this.manualLocation ? 'manual' : 'gps',
}, ...this.historyList];
this.historyList = dedupeHistory(nextHistory).slice(0, 10);

这里的要点

历史列表不能无限堆叠，要能去重和截断。
每条历史都要带来源和时间，方便回查。
列表恢复后要能继续选、继续改、继续保存。

回填要写历史这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

07 回填要可清除

这一节不是只给一句结论，而是把"回填要可清除"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要可清除不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要可清除
const step = '{07}';
const payload = {
  title: '07 回填要可清除',
  ready: true,
};

这里的要点

先把 07 回填要可清除讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

回填要可清除这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

08 清除要恢复默认

这一节不是只给一句结论，而是把"清除要恢复默认"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：清除要恢复默认不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 清除要恢复默认
const fallbackAddress = this.manualLocation || this.gpsAddress || '未设置地点';
const fallbackTime = this.previewTime || '00:00';
this.previewAddress = fallbackAddress;
this.previewTime = fallbackTime;

这里的要点

空值不是报错，但必须有默认表现。
兜底值要统一，避免页面看起来断开。
默认状态要能解释给用户。

清除要恢复默认这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

09 回填要持久化

这一节不是只给一句结论，而是把"回填要持久化"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要持久化不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要持久化
const step = '{09}';
const payload = {
  title: '09 回填要持久化',
  ready: true,
};

这里的要点

先把 09 回填要持久化讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

回填要持久化这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

10 回填要有提示

这一节不是只给一句结论，而是把"回填要有提示"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要有提示不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要有提示
const step = '{10}';
const payload = {
  title: '10 回填要有提示',
  ready: true,
};

这里的要点

先把 10 回填要有提示讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

回填要有提示这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

11 回填要可重复

这一节不是只给一句结论，而是把"回填要可重复"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要可重复不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要可重复
const step = '{11}';
const payload = {
  title: '11 回填要可重复',
  ready: true,
};

这里的要点

先把 11 回填要可重复讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

回填要可重复这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

12 回填要可复用

这一节不是只给一句结论，而是把"回填要可复用"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要可复用不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要可复用
const step = '{12}';
const payload = {
  title: '12 回填要可复用',
  ready: true,
};

这里的要点

先把 12 回填要可复用讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

回填要可复用这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

13 回填要和模板联动

这一节不是只给一句结论，而是把"回填要和模板联动"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要和模板联动不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要和模板联动
const templateId = this.watermarkTemplate;
const templateMap = new Map<number, string>([
  [0, 'classic'],
  [1, 'compact'],
  [2, 'stacked'],
]);
const activeTemplate = templateMap.get(templateId) ?? 'classic';

这里的要点

模板编号要能映射到明确样式。
切换模板时，预览和结果都要同步。
模板最好不要和其他状态混在一起。

回填要和模板联动这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

14 回填要和时间联动

这一节不是只给一句结论，而是把"回填要和时间联动"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要和时间联动不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要和时间联动
const now = new Date();
const timeText = now.getHours().toString().padStart(2, '0') + ':' +
  now.getMinutes().toString().padStart(2, '0');
const dateText = now.getFullYear() + '.' + (now.getMonth() + 1).toString().padStart(2, '0');

这里的要点

时间格式要统一，不能在不同页面里写成不同样式。
刷新时间时不要让 UI 产生跳动。
时间值要和保存逻辑对齐。

回填要和时间联动这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

15 回填要和历史联动

这一节不是只给一句结论，而是把"回填要和历史联动"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要和历史联动不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要和历史联动
const nextHistory = [{
  address: this.previewAddress,
  time: new Date().toLocaleString(),
  source: this.manualLocation ? 'manual' : 'gps',
}, ...this.historyList];
this.historyList = dedupeHistory(nextHistory).slice(0, 10);

这里的要点

历史列表不能无限堆叠，要能去重和截断。
每条历史都要带来源和时间，方便回查。
列表恢复后要能继续选、继续改、继续保存。

回填要和历史联动这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

16 回填要和结果联动

这一节不是只给一句结论，而是把"回填要和结果联动"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要和结果联动不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要和结果联动
const step = '{16}';
const payload = {
  title: '16 回填要和结果联动',
  ready: true,
};

这里的要点

先把 16 回填要和结果联动讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

回填要和结果联动这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

17 回填要允许修改

这一节不是只给一句结论，而是把"回填要允许修改"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要允许修改不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要允许修改
const step = '{17}';
const payload = {
  title: '17 回填要允许修改',
  ready: true,
};

这里的要点

先把 17 回填要允许修改讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

回填要允许修改这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

18 回填要避免脏数据

这一节不是只给一句结论，而是把"回填要避免脏数据"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要避免脏数据不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要避免脏数据
const step = '{18}';
const payload = {
  title: '18 回填要避免脏数据',
  ready: true,
};

这里的要点

先把 18 回填要避免脏数据讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

回填要避免脏数据这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

19 回填要易理解

这一节不是只给一句结论，而是把"回填要易理解"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：回填要易理解不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 回填要易理解
const step = '{19}';
const payload = {
  title: '19 回填要易理解',
  ready: true,
};

这里的要点

先把 19 回填要易理解讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

回填要易理解这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

20 本章结论

这一节不是只给一句结论，而是把"本章结论"放进整个第15章的链路里看。读者需要看到输入、处理和结果，所以这里会把实现边界也一起讲清。

这一节的落点是：本章结论不能只停在页面上看起来对，还要真的参与到保存、恢复和验证里。

代码演示

ts 复制代码

// 本章结论
const step = '{20}';
const payload = {
  title: '20 本章结论',
  ready: true,
};

这里的要点

先把 20 本章结论讲清楚，别只留一句结论。
再把它和状态、保存、恢复连起来。
最后用代码或流程图把闭环落实。

本章结论这一节的重点不是把内容写满，而是把这一点和整页链路接起来。

本章小结

这一章把一个点讲透以后，下一章才能继续往下接，不会停留在只会看结果的层面。

流程图

#mermaid-svg-Yu3dBTS5Ja9llbYy{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Yu3dBTS5Ja9llbYy .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Yu3dBTS5Ja9llbYy .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Yu3dBTS5Ja9llbYy .error-icon{fill:#552222;}#mermaid-svg-Yu3dBTS5Ja9llbYy .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Yu3dBTS5Ja9llbYy .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Yu3dBTS5Ja9llbYy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Yu3dBTS5Ja9llbYy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Yu3dBTS5Ja9llbYy .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Yu3dBTS5Ja9llbYy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Yu3dBTS5Ja9llbYy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Yu3dBTS5Ja9llbYy .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Yu3dBTS5Ja9llbYy .marker.cross{stroke:#333333;}#mermaid-svg-Yu3dBTS5Ja9llbYy svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Yu3dBTS5Ja9llbYy p{margin:0;}#mermaid-svg-Yu3dBTS5Ja9llbYy .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Yu3dBTS5Ja9llbYy .cluster-label text{fill:#333;}#mermaid-svg-Yu3dBTS5Ja9llbYy .cluster-label span{color:#333;}#mermaid-svg-Yu3dBTS5Ja9llbYy .cluster-label span p{background-color:transparent;}#mermaid-svg-Yu3dBTS5Ja9llbYy .label text,#mermaid-svg-Yu3dBTS5Ja9llbYy span{fill:#333;color:#333;}#mermaid-svg-Yu3dBTS5Ja9llbYy .node rect,#mermaid-svg-Yu3dBTS5Ja9llbYy .node circle,#mermaid-svg-Yu3dBTS5Ja9llbYy .node ellipse,#mermaid-svg-Yu3dBTS5Ja9llbYy .node polygon,#mermaid-svg-Yu3dBTS5Ja9llbYy .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Yu3dBTS5Ja9llbYy .rough-node .label text,#mermaid-svg-Yu3dBTS5Ja9llbYy .node .label text,#mermaid-svg-Yu3dBTS5Ja9llbYy .image-shape .label,#mermaid-svg-Yu3dBTS5Ja9llbYy .icon-shape .label{text-anchor:middle;}#mermaid-svg-Yu3dBTS5Ja9llbYy .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Yu3dBTS5Ja9llbYy .rough-node .label,#mermaid-svg-Yu3dBTS5Ja9llbYy .node .label,#mermaid-svg-Yu3dBTS5Ja9llbYy .image-shape .label,#mermaid-svg-Yu3dBTS5Ja9llbYy .icon-shape .label{text-align:center;}#mermaid-svg-Yu3dBTS5Ja9llbYy .node.clickable{cursor:pointer;}#mermaid-svg-Yu3dBTS5Ja9llbYy .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Yu3dBTS5Ja9llbYy .arrowheadPath{fill:#333333;}#mermaid-svg-Yu3dBTS5Ja9llbYy .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Yu3dBTS5Ja9llbYy .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Yu3dBTS5Ja9llbYy .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Yu3dBTS5Ja9llbYy .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Yu3dBTS5Ja9llbYy .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Yu3dBTS5Ja9llbYy .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Yu3dBTS5Ja9llbYy .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Yu3dBTS5Ja9llbYy .cluster text{fill:#333;}#mermaid-svg-Yu3dBTS5Ja9llbYy .cluster span{color:#333;}#mermaid-svg-Yu3dBTS5Ja9llbYy div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Yu3dBTS5Ja9llbYy .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Yu3dBTS5Ja9llbYy rect.text{fill:none;stroke-width:0;}#mermaid-svg-Yu3dBTS5Ja9llbYy .icon-shape,#mermaid-svg-Yu3dBTS5Ja9llbYy .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Yu3dBTS5Ja9llbYy .icon-shape p,#mermaid-svg-Yu3dBTS5Ja9llbYy .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Yu3dBTS5Ja9llbYy .icon-shape .label rect,#mermaid-svg-Yu3dBTS5Ja9llbYy .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Yu3dBTS5Ja9llbYy .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Yu3dBTS5Ja9llbYy .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Yu3dBTS5Ja9llbYy :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是
否
打开输入框
输入地址
是否为空
提示用户
回填主状态
刷新历史
更新预览

验证方式

先看每个小标题下面是不是都有正文和代码。
再看要点是不是围绕这个小标题本身展开。
最后看流程图能不能把这一章的链路串起来。