Yunge Note Platform: Architecture, Design, and Implementation Practices

The Yunge Note platform was created to improve note‑taking, backup, and information sharing within the company, offering a PC client for quick work‑time actions, a mobile client for after‑hours reference, and a cloud‑collaboration service for multi‑person teamwork.

1. Ecosystem – The platform consists of three main components: cloud collaboration, PC client, and mobile client, each addressing specific usage scenarios such as rapid operation, quick lookup, and shared editing.

2. Project Management Practice – Agile development is applied with short‑cycle releases, feature prioritization, effort estimation, and flexible resource reallocation, including on‑the‑fly testing and bug fixing.

3. Design Philosophy – Emphasis on simplicity, low learning cost, clear information hierarchy, and visual comfort using concise UI language and appropriate typography.

4. Implementation Framework

Front‑end is built with React + Mobx + TypeScript. Each feature module has a Service for API encapsulation and a Store for data handling, shared between PC and mobile. UI components use the Yep‑React library and the Rocketact/jdwtool build tool.

5. SVG Handling

SVG icons are processed with a custom fdtsvgloader and fdt-svg-loader to output clean React components. Example webpack configuration:

// webpack.config.js
{ 
  test: /\.svg$/,
  use: [
    { loader: path.resolve(__dirname, "./fdtsvgloader") },
    "svg-loader"
  ],
  include: [path.resolve(opts.baseDir, "src")],
  exclude: [path.resolve(opts.baseDir, "src/svginline")]
}

Loader output transformation:

module.exports = {
  attributes: { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 1024 1024' },
  content: '<path d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"/>'
}

Usage in a component:

import PptIcon from '@/image/newppt.svg';
export default class Demo extends Component {
  render() {
    return <PptIcon width="18" height="18" viewBox="0 0 27 34" />;
  }
}

6. React Integration – The project prefers script‑based React loading for quick prototyping, while also supporting npm‑based imports via tsconfig.json path mapping, allowing shared dependencies to be resolved from the JDWTool scaffold.

7. Ant Design Icon Optimization – To avoid the 500 KB bundle cost of importing all icons, a custom icons.ts file re‑exports only needed icons and webpack aliasing redirects the default import path to this file.

8. Mobile Technical Challenges

Infinite scrolling with InfiniteLoader caused deep DOM hierarchies; the team evaluated row height measurement and batch loading strategies.

Preserving scroll position across page switches is achieved by storing scrollTop per route and restoring it on navigation.

Keyboard handling on iOS/Android required dynamic paddingBottom adjustments to keep editable content visible.

Sample code for scroll‑position storage:

// Write
setScrollTopByPager(page: string, top: number) { this.topHash[page] = top; }
// Read
getScrollTopByPage(page: string) { return this.topHash[page]; }
// Listen
scrollNode.addEventListener('scroll', () => {
  this.setScrollTopForRoutor(this.pageId, scrollNode.scrollTop);
});
// Restore
let top = this.getScrollTopByPage(pageId);
scrollNode.scrollTo(0, top);

9. Editor and File Preview – The PC/M mobile editors use braft‑editor for rich text and tui‑editor for markdown. PDF preview uses embed, Office files use iframe, but due to poor UX the team switched to downloading files and opening them with native viewers.

Download example:

axios({ method: "get", url: `downloadurl`, responseType: "blob", onDownloadProgress }).then(function(response) {
  var a = document.createElement("a");
  var url = window.URL.createObjectURL(response.data);
  a.href = url;
  a.download = name;
  a.click();
  window.URL.revokeObjectURL(url);
});

10. JD ME Integration – The platform integrates with the JD ME app for authentication, media capture, network checks, and sharing, using a custom Koa middleware ( @jd/koa-jdme-passport) to handle the JD ME token verification on Node.js.

11. Summary – Over the project lifecycle the team leveraged internal tools (REALY design platform, Yep‑React UI library, JDWTool scaffold), refined the front‑end architecture, solved SVG, icon, scrolling, and preview issues, and delivered a collaborative note‑taking solution that fills an internal gap and is ready for further iteration.