1
上传流程：
2
1. 计算文件 hash（秒传/去重用）
3
2. 检查是否已上传（秒传命中直接返回）
4
3. 检查已上传分片（断点续传）
5
4. 切片并并发上传未上传的分片
6
5. 通知服务端合并

1
// 1. 文件切片
2
function createChunks(file, chunkSize = 5 * 1024 * 1024) {
3
  const chunks = [];
4
  for (let start = 0; start < file.size; start += chunkSize) {
5
    chunks.push(file.slice(start, start + chunkSize));
6
  }
7
  return chunks;
8
}
9

10
// 2. 计算文件 hash（增量 + Web Worker 避免卡顿）
11
// 大文件全量 hash 太慢，采用抽样 hash：
12
// - 首尾各 2MB 全量
13
// - 中间每隔 10MB 取 2MB 采样
14
async function calculateHash(file) {
15
  return new Promise(resolve => {
16
    const worker = new Worker('/hash-worker.js');
17
    worker.postMessage({ file });
18
    worker.onmessage = e => resolve(e.data.hash);
19
  });
20
}
21

22
// hash-worker.js（Web Worker 中计算，不阻塞主线程）
23
importScripts('/spark-md5.min.js');
24
self.onmessage = async ({ data: { file } }) => {
25
  const spark = new SparkMD5.ArrayBuffer();
26
  const chunks = createChunks(file);
27
  for (const chunk of chunks) {
28
    const buffer = await chunk.arrayBuffer();
29
    spark.append(buffer);
30
    self.postMessage({ progress: /* ... */ });   // 上报进度
31
  }
32
  self.postMessage({ hash: spark.end() });
33
};
34

35
// 3. 秒传 + 断点续传检查
36
const { uploadedChunks, uploaded } = await fetch('/api/upload/check', {
37
  method: 'POST',
38
  body: JSON.stringify({ hash, filename, total: chunks.length }),
39
}).then(r => r.json());
40

41
if (uploaded) return { url: existingUrl };      // 秒传命中
42

43
// 4. 并发上传（限制并发数 3）
44
const tasks = chunks
45
  .map((chunk, index) => ({ chunk, index }))
46
  .filter(({ index }) => !uploadedChunks.includes(index));
47

48
await asyncPool(3, tasks.map(({ chunk, index }) => async () => {
49
  const formData = new FormData();
50
  formData.append('chunk', chunk);
51
  formData.append('hash', fileHash);
52
  formData.append('index', index);
53
  return fetch('/api/upload/chunk', { method: 'POST', body: formData });
54
}));
55

56
// 5. 通知合并
57
await fetch('/api/upload/merge', {
58
  method: 'POST',
59
  body: JSON.stringify({ hash, filename, total: chunks.length }),
60
});

1
1. 路由权限：能不能访问某个页面
2
2. 按钮/操作权限：能不能看到/点击某个按钮
3
3. 数据权限：能看到哪些数据（部门/个人/全部）
4
4. 接口权限：后端接口鉴权（前端只做体验，安全靠后端）

1
// 路由 meta 声明所需角色
2
const routes = [
3
  { path: '/user', component: UserList, meta: { roles: ['admin', 'manager'] } },
4
  { path: '/audit', component: Audit, meta: { roles: ['admin'] } },
5
];
6

7
// 全局前置守卫
8
router.beforeEach((to, from, next) => {
9
  const userRoles = store.getters.roles;
10
  if (to.meta.roles && !to.meta.roles.some(r => userRoles.includes(r))) {
11
    next('/403');
12
  } else {
13
    next();
14
  }
15
});

1
// 1. 登录后拉取用户信息和权限
2
const { roles, permissions, menus } = await api.getUserInfo();
3

4
// 2. 根据后端菜单树过滤路由表
5
const asyncRoutes = [/* 所有可能的路由 */];
6
const accessibleRoutes = filterRoutes(asyncRoutes, menus);
7

8
function filterRoutes(routes, menus) {
9
  return routes.filter(route => {
10
    if (route.meta?.permission) {
11
      return menus.some(m => m.code === route.meta.permission);
12
    }
13
    if (route.children) {
14
      route.children = filterRoutes(route.children, menus);
15
    }
16
    return true;
17
  });
18
}
19

20
// 3. 动态注册
21
accessibleRoutes.forEach(r => router.addRoute(r));
22

23
// 4. 侧边栏菜单用同一份 menus 数据渲染（保持一致）

1
// v-permission 指令
2
app.directive('permission', {
3
  mounted(el, binding) {
4
    const required = binding.value;
5
    const userPerms = store.getters.permissions;
6
    const hasPermission = Array.isArray(required)
7
      ? required.some(p => userPerms.includes(p))
8
      : userPerms.includes(required);
9
    if (!hasPermission) el.remove();
10
  },
11
});
12

13
// 使用
14
<el-button v-permission="'user:delete'">删除</el-button>
15
<el-button v-permission="['user:edit', 'admin']">编辑</el-button>
16

17
// 函数式（更灵活，可控制 loading/disabled 而不是删除）
18
<button :disabled="!hasPermission('user:delete')">删除</button>

1
// 前端只传"数据范围"参数（如：全部/本部门/本人）
2
// 后端根据用户角色和数据权限规则过滤 SQL
3
// 参考 RuoYi 的 @DataScope 注解：
4
// SELECT * FROM users ${dataScope}
5
// dataScope 由 AOP 根据角色注入：AND dept_id IN (...)

1
整体架构：
2

3
浏览器 SDK → 上报网关 → Kafka → 消费服务 → 存储（ClickHouse/ES）→ 告警 + 看板
4

5
SDK 采集内容：
6
1. JS 错误：window.onerror / unhandledrejection
7
2. 资源加载错误：img/script/css 加载失败
8
3. 接口错误：拦截 fetch/XHR，记录 4xx/5xx/超时
9
4. 框架错误：Vue.config.errorHandler / React ErrorBoundary
10
5. 用户行为轨迹：点击、路由跳转、输入（脱敏）
11
6. 性能指标：LCP/FID/CLS + 长任务
12
7. 自定义错误：业务主动上报

1
class Monitor {
2
  constructor(config) {
3
    this.config = { appId, userId, sampleRate: 1, ...config };
4
    this.buffer = [];
5
    this.init();
6
  }
7

8
  init() {
9
    this.hookError();
10
    this.hookPromise();
11
    this.hookResource();
12
    this.hookXHR();
13
    this.hookFetch();
14
    this.hookBehavior();
15
    this.startReport();
16
  }
17

18
  hookError() {
19
    window.addEventListener('error', (e) => {
20
      // 区分 JS 错误和资源错误
21
      if (e.target !== window) return this.reportResource(e);
22
      this.report({
23
        type: 'js_error',
24
        message: e.message,
25
        filename: e.filename,
26
        lineno: e.lineno,
27
        colno: e.colno,
28
        stack: e.error?.stack,
29
      });
30
    }, true);   // 捕获阶段才能拿到资源错误
31
  }
32

33
  hookPromise() {
34
    window.addEventListener('unhandledrejection', (e) => {
35
      this.report({ type: 'promise_error', reason: String(e.reason) });
36
    });
37
  }
38

39
  hookXHR() {
40
    const originalOpen = XMLHttpRequest.prototype.open;
41
    const originalSend = XMLHttpRequest.prototype.send;
42
    const self = this;
43

44
    XMLHttpRequest.prototype.open = function (method, url) {
45
      this._meta = { method, url, startTime: Date.now() };
46
      originalOpen.apply(this, arguments);
47
    };
48
    XMLHttpRequest.prototype.send = function () {
49
      this.addEventListener('loadend', () => {
50
        const { method, url, startTime } = this._meta;
51
        self.report({
52
          type: 'api',
53
          method, url,
54
          status: this.status,
55
          duration: Date.now() - startTime,
56
          success: this.status >= 200 && this.status < 300,
57
        });
58
      });
59
      originalSend.apply(this, arguments);
60
    };
61
  }
62

63
  hookBehavior() {
64
    // 用户行为轨迹（面包屑），保留最近 20 条
65
    this.breadcrumbs = [];
66
    document.addEventListener('click', e => {
67
      this.pushBreadcrumb({
68
        type: 'click',
69
        target: getXPath(e.target),
70
        text: e.target.innerText?.slice(0, 50),
71
      });
72
    }, true);
73
    // 路由变化
74
    const originalPush = history.pushState;
75
    history.pushState = (...args) => {
76
      this.pushBreadcrumb({ type: 'route', to: args[2] });
77
      originalPush.apply(history, args);
78
    };
79
  }
80

81
  report(data) {
82
    if (Math.random() > this.config.sampleRate) return;    // 采样
83
    this.buffer.push({
84
      ...data,
85
      ...this.config,
86
      timestamp: Date.now(),
87
      url: location.href,
88
      ua: navigator.userAgent,
89
      breadcrumbs: this.breadcrumbs.slice(-20),
90
    });
91
  }
92

93
  startReport() {
94
    // 批量 + 节流上报
95
    setInterval(() => this.flush(), 5000);
96
    // 页面卸载时用 sendBeacon
97
    window.addEventListener('beforeunload', () => {
98
      if (this.buffer.length) {
99
        navigator.sendBeacon('/api/monitor', JSON.stringify(this.buffer));
100
      }
101
    });
102
    // 空闲时上报
103
    if ('requestIdleCallback' in window) {
104
      requestIdleCallback(() => this.flush());
105
    }
106
  }
107

108
  flush() {
109
    if (!this.buffer.length) return;
110
    const batch = this.buffer.splice(0, 50);
111
    navigator.sendBeacon('/api/monitor', JSON.stringify(batch));
112
  }
113
}
114

115
new Monitor({ appId: 'my-app', sampleRate: 0.1 });   // 10% 采样

1
三种技术路线：
2

3
1. contenteditable（老方案）
4
   - 浏览器原生 API，兼容性最好
5
   - 但各浏览器行为不一致，坑极多
6
   - 代表：早期的 UEditor、KindEditor
7

8
2. 自绘 + 隐藏输入框（现代方案）
9
   - 完全自己绘制内容（Canvas 或 DOM）
10
   - 用一个隐藏 input/textarea 接收键盘事件
11
   - 好处：完全控制渲染，跨浏览器一致
12
   - 代表：Google Docs、飞书文档、Figma
13

14
3. 基于成熟框架（推荐）
15
   - Slate.js（React，可扩展性极强）
16
   - ProseMirror（框架无关，插件化）
17
   - Tiptap（基于 ProseMirror，Vue 友好）
18
   - Quill（老牌，API 简单）
19
   - Lexical（Meta 出品，2022 年）

1
// 文档 = 树形结构，每个节点有类型、属性、子节点
2
{
3
  type: 'doc',
4
  content: [
5
    {
6
      type: 'paragraph',
7
      content: [
8
        { type: 'text', text: 'Hello ' },
9
        { type: 'text', text: 'world', marks: [{ type: 'bold' }] },
10
      ],
11
    },
12
    {
13
      type: 'heading',
14
      attrs: { level: 2 },
15
      content: [{ type: 'text', text: 'Title' }],
16
    },
17
    {
18
      type: 'image',
19
      attrs: { src: 'xxx.jpg', alt: 'desc' },
20
    },
21
  ],
22
}
23

24
// 编辑器三大核心：
25
// 1. Schema：定义允许的节点和标记（约束文档结构）
26
// 2. Transaction：所有修改都是不可变的 op，可撤销重做
27
// 3. Plugin：装饰、快捷键、协同编辑都是插件

1
1. XSS（跨站脚本）防护
2
   - 类型：存储型（评论注入）、反射型（URL 参数）、DOM 型（innerHTML）
3
   - 防御：
4
     * 输出转义：Vue {{ }}、React JSX 自动转义
5
     * 避免 v-html / dangerouslySetInnerHTML
6
     * 必须使用时用 DOMPurify 消毒
7
     * CSP 内容安全策略（限制脚本来源）
8
     * HttpOnly Cookie（JS 读不到，防窃取）
9

10
   import DOMPurify from 'dompurify';
11
   element.innerHTML = DOMPurify.sanitize(userInput);
12

13
   // CSP 响应头
14
   Content-Security-Policy: default-src 'self';
15
                            script-src 'self' https://cdn.example.com;
16
                            object-src 'none';
17

18
2. CSRF（跨站请求伪造）防护
19
   - 类型：GET 型（img src）、POST 型（自动提交表单）
20
   - 防御：
21
     * SameSite Cookie：Strict / Lax（默认，禁止跨站携带）
22
     * CSRF Token：表单加隐藏字段，后端校验
23
     * 双重 Cookie：请求头带 X-CSRF-Token = Cookie 中的 token
24
     * 验证 Origin/Referer 头
25

26
3. 点击劫持
27
   - 防御：X-Frame-Options: DENY / SAMEORIGIN
28
   - 或 CSP frame-ancestors
29

30
4. MIME 嗅探
31
   - 防御：X-Content-Type-Options: nosniff
32

33
5. HTTPS 强制
34
   - HSTS：Strict-Transport-Security: max-age=31536000
35

36
6. 敏感数据处理
37
   - 前端不存明文密码（用一次性 token）
38
   - localStorage 慎用（XSS 可读），敏感用 HttpOnly Cookie
39
   - 打印日志脱敏（手机号、身份证）
40

41
7. 第三方脚本管控
42
   - SRI（Subresource Integrity）：hash 校验 CDN 脚本
43
   <script src="https://cdn/x.js"
44
           integrity="sha384-xxx" crossorigin="anonymous"></script>
45

46
8. 供应链安全
47
   - 依赖审计：npm audit / snyk
48
   - lock 文件提交（package-lock.json）
49
   - CI 检查依赖漏洞

1
核心思路：虚拟滚动 + 分片计算 + 增量渲染
2

3
架构：
4
┌──────────────────────────────────────┐
5
│  数据层（Web Worker + IndexedDB）    │
6
│  - 原始数据 10 万行放 Worker 内存     │
7
│  - 大文件用 IndexedDB 分片存储        │
8
│  - 计算（排序/过滤/公式）在 Worker    │
9
├──────────────────────────────────────┤
10
│  渲染层（Canvas 或 DOM 虚拟列表）     │
11
│  - Canvas：>5000 单元格推荐           │
12
│  - DOM：编辑交互友好，<1000 行足够    │
13
├──────────────────────────────────────┤
14
│  交互层（键盘/鼠标/剪贴板）           │
15
│  - 隐藏 textarea 接收键盘输入         │
16
│  - 复制粘贴解析 TSV/HTML              │
17
└──────────────────────────────────────┘
18

19
关键实现：
20

21
1. Canvas 渲染（性能最优）
22
   - 只绘制可视区（20x50 单元格 = 1000 个）
23
   - requestAnimationFrame 节流重绘
24
   - 分层 Canvas：背景层 + 数据层 + 选中层高亮
25

26
2. 数据分片加载
27
   - 首次只加载前 1000 行，滚动时按需加载
28
   - Worker 中预处理（排序、过滤）
29

30
3. 编辑交互
31
   - 单元格激活时创建浮动 input 定位到该格
32
   - 编辑完成写回 Worker 数据源，重绘该行
33

34
4. 现成方案
35
   - AG Grid（企业级，功能全，收费）
36
   - Handsontable（Excel-like，商用收费）
37
   - Luckysheet / Univer（国产开源）
38
   - RevoGrid（Web Component，轻量）

1
方案对比：
2

3
方案 A：CDN 多版本共存
4
dist/
5
├── v1.0.0/         # 老版本
6
├── v1.1.0/         # 新版本
7
└── index.html      # 入口，根据用户 ID 决定加载哪个版本
8

9
灰度逻辑（Node 网关 or Nginx Lua）：
10
if (hash(userId) % 100 < grayPercent) {
11
  serve('v1.1.0/index.html');
12
} else {
13
  serve('v1.0.0/index.html');
14
}
15

16
方案 B：客户端灰度配置
17
1. 前端启动时先拉 /api/gray-config（这个接口本身不能灰度）
18
2. 根据配置动态加载不同 JS bundle
19
3. 好处：粒度可到功能级（feature flag）
20

21
方案 C：Feature Flag（推荐）
22
if (featureFlag('new_checkout_flow')) {
23
  render(<NewCheckout />);
24
} else {
25
  render(<OldCheckout />);
26
}
27
- 无需发版即可切换
28
- 支持按用户/百分比/地域开关
29
- 工具：LaunchDarkly / Unleash / 自研
30

31
灰度维度：
32
- 内部用户（员工邮箱）→ 内测用户 → 1% → 10% → 50% → 100%
33
- 每阶段观察 24h，关键指标（错误率、转化率）达标才推进
34

35
监控与回滚：
36
- 关键指标：JS 错误率、白屏率、页面加载时长、业务转化
37
- 阈值：错误率上涨 > 20% 自动告警
38
- 回滚：配置中心一键切回旧版本，无需重新发版

1
JSBridge 三种通信方式：
2

3
1. URL Scheme 拦截（老方案，兼容性好）
4
   - H5 触发 iframe.src = 'jsbridge://methodName?params=xxx'
5
   - Native 拦截 URL，解析方法名和参数
6
   - 缺点：URL 长度限制、连续调用可能丢
7

8
2. 注入 API（现代方案）
9
   - Android：addJavascriptInterface(window.native, ...)
10
   - iOS：WKScriptMessageHandler
11
   - H5 直接调 window.native.methodName(params)
12
   - 缺点：Android 4.2 前有安全漏洞
13

14
3. prompt/console 拦截（备用）
15
   - Native 拦截 window.prompt / console.log
16
   - 兼容性最好，但性能差
17

18
统一封装：

1
class JSBridge {
2
  static callbacks = new Map();
3
  static callbackId = 0;
4

5
  static call(nativeMethod, params = {}) {
6
    return new Promise((resolve, reject) => {
7
      const cbId = `cb_${++this.callbackId}_${Date.now()}`;
8
      this.callbacks.set(cbId, { resolve, reject });
9

10
      const payload = JSON.stringify({
11
        method: nativeMethod,
12
        params,
13
        callbackId: cbId,
14
      });
15

16
      // 分平台调用
17
      if (window.webkit?.messageHandlers?.native) {
18
        window.webkit.messageHandlers.native.postMessage(payload);  // iOS
19
      } else if (window.native) {
20
        window.native.postMessage(payload);                          // Android
21
      } else {
22
        // 降级：URL Scheme
23
        const iframe = document.createElement('iframe');
24
        iframe.src = `jsbridge://${nativeMethod}?data=${encodeURIComponent(payload)}`;
25
        document.body.appendChild(iframe);
26
        setTimeout(() => iframe.remove(), 100);
27
      }
28

29
      // 超时
30
      setTimeout(() => {
31
        if (this.callbacks.has(cbId)) {
32
          this.callbacks.delete(cbId);
33
          reject(new Error('JSBridge timeout'));
34
        }
35
      }, 5000);
36
    });
37
  }
38

39
  // Native 调用此方法回传结果
40
  static handleCallback(callbackId, result) {
41
    const cb = this.callbacks.get(callbackId);
42
    if (cb) {
43
      cb.resolve(result);
44
      this.callbacks.delete(callbackId);
45
    }
46
  }
47
}
48
window.JSBridge = JSBridge;
49

50
// 使用
51
const userInfo = await JSBridge.call('getUserInfo');
52
await JSBridge.call('share', { title: 'xxx', url: 'yyy' });

1
方案对比：
2

3
| 方案 | 优点 | 缺点 |
4
|:--|:--|:--|
5
| JSON 语言包（vue-i18n / react-intl） | 简单、生态好 | 语言包体积大 |
6
| ICU MessageFormat | 复数、性别、日期灵活 | 学习成本高 |
7
| 服务端下发 | 支持热更新 | 首屏依赖接口 |
8

9
vue-i18n 使用：

1
方案 1：CSS 变量（推荐，运行时切换）
2
:root {
3
  --primary: #409eff;
4
  --bg: #fff;
5
  --text: #333;
6
}
7
[data-theme="dark"] {
8
  --primary: #66b1ff;
9
  --bg: #1a1a1a;
10
  --text: #eee;
11
}
12
.btn { background: var(--primary); }
13

14
// 切换：document.documentElement.dataset.theme = 'dark';
15
// 优势：无需重载 CSS，秒切
16
// 劣势：老浏览器不支持（IE），需要预置所有主题变量
17

18
方案 2：多份 CSS 文件（构建时生成）
19
- theme-light.css / theme-dark.css
20
- 切换时动态替换 <link href>
21
- 优势：兼容性好，CSS 静态优化
22
- 劣势：切换有闪烁，构建产物翻倍
23

24
方案 3：Sass/Less 变量（构建时）
25
- 用户下载不同主题包
26
- 只能构建时决定，无法运行时切换
27
- 适合组件库提供给用户定制
28

29
方案 4：CSS-in-JS（运行时）
30
- styled-components ThemeProvider
31
- 灵活但性能差
32

33
方案 5：Filter 反色（应急）
34
filter: invert(1) hue-rotate(180deg);
35
- 一行 CSS 实现暗色，图片再反色回来
36
- 只适合临时方案，颜色不准
37

38
推荐组合：
39
- 组件库：Sass 变量（构建时）+ CSS 变量（运行时）
40
- 业务应用：CSS 变量 + 预置主题配置
41
- 用户自定义：暴露关键 Token（--primary、--radius）

1
低代码平台四大核心模块：
2

3
1. 物料（组件库）
4
   - 基础组件：Button / Input / Table
5
   - 业务组件：UserCard / OrderList
6
   - 每个组件有 Schema 描述（props、slots、events）
7

8
2. 编排器（画布）
9
   - 拖拽组件到画布
10
   - 属性面板编辑 props
11
   - 事件绑定（点击 → 打开弹窗 / 调接口）
12
   - 大纲树（层级视图）
13

14
3. 数据源
15
   - 静态数据（JSON）
16
   - 接口数据（配置 URL、参数、响应映射）
17
   - 页面变量（响应式状态）
18

19
4. 出码 / 渲染
20
   - Schema → 运行时渲染（在线预览）
21
   - Schema → 源码出码（导出 Vue/React 项目）
22

23
核心 Schema 协议：

1
{
2
  "componentName": "Page",
3
  "props": { "title": "用户列表" },
4
  "children": [
5
    {
6
      "componentName": "Table",
7
      "props": {
8
        "columns": [...],
9
        "dataSource": {
10
          "type": "JSExpression",
11
          "value": "this.state.users"
12
        }
13
      },
14
      "events": {
15
        "onRowClick": {
16
          "type": "JSFunction",
17
          "value": "function(row) { this.openDetail(row.id); }"
18
        }
19
      }
20
    }
21
  ],
22
  "dataSource": {
23
    "list": [{
24
      "id": "users",
25
      "type": "fetch",
26
      "options": { "uri": "/api/users", "method": "GET" }
27
    }]
28
  },
29
  "lifeCycles": {
30
    "componentDidMount": { "type": "JSFunction", "value": "..." }
31
  }
32
}

1
function Renderer(schema) {
2
  const Component = componentMap[schema.componentName];   // 物料注册表
3
  const props = resolveProps(schema.props, context);       // 解析 JSExpression
4
  const children = schema.children?.map(Renderer);
5
  return <Component {...props}>{children}</Component>;
6
}
7

8
// 表达式解析（安全考虑不用 eval，用 new Function 或 vm）
9
function resolveProps(props, context) {
10
  return Object.fromEntries(
11
    Object.entries(props).map(([k, v]) => [
12
      k,
13
      v?.type === 'JSExpression'
14
        ? new Function('ctx', `with(ctx) return ${v.value}`)(context)
15
        : v,
16
    ])
17
  );
18
}