@superhot

我的项目架构 ( https://ppresume.com) 大概是这样的：

- ppresume
- packages/common
- packages/api
- packages/client

```sh
$ ls -l packages package.json pnpm-workspace.yaml pnpm-lock.yaml
-rw-r--r-- 1 hanyu staff 1485 Jan 14 21:09 package.json
-rw-r--r-- 1 hanyu staff 744184 Dec 30 10:49 pnpm-lock.yaml
-rw-r--r-- 1 hanyu staff 27 Jan 22 2024 pnpm-workspace.yaml

packages:
total 0
drwxr-xr-x 16 hanyu staff 512 Jan 14 21:09 api
drwxr-xr-x 24 hanyu staff 768 Jan 14 21:09 client
drwxr-xr-x 12 hanyu staff 384 Jan 14 21:09 common
```

- api: 后端 API
- client: 前端 next.js 实现
- common: 前后端共享的 data model/schema validation/utils 等等，不依赖 node.js 系统 API ，所以可以同时跑在两端上。

回复你的问题：

1. tsconfig 我没有特别配置过，common package 的 tsconfig:

```json
{
"compilerOptions": {
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"resolveJsonModule": true,

"declaration": true,
"declarationMap": true,
"sourceMap": true,
"types": ["node", "jest"],

"importHelpers": true,
"composite": true,
"target": "es5",

"rootDir": "src",
"outDir": "dist",

"baseUrl": "."
},

"include": ["**/*.ts", "**/*.json"]
}
```

2. 把 common package 当成一个单独的 npm/pnpm 包引入 api/client ，不需要用嵌套路径。npm/pnpm/yarn 都有相应的 workspace 特性，我最开始用的是 yarn ，后来转到了 pnpm ，参考： https://pnpm.io/workspaces

我的 pnpm-workspace 配置：

```
packages:
- 'packages/*'
```

顶层 `package.json` 配置：

```
{
"name": "ppresume",
"private": true,
"version": "0.7.0",
"dependencies": {
"concurrently": "^8.2.1",
"husky": "^8.0.2",
"lint-staged": "^13.1.0",
"prettier": "^2.8.1"
},
"devDependencies": {
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@trivago/prettier-plugin-sort-imports": "^4.0.0",
"commit-and-tag-version": "^12.4.0"
},
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
},
"resolutions": {
"jackspeak": "2.1.1"
},
"scripts": {
"api": "pnpm --filter api",
"common": "pnpm --filter common",
"coverage": "pnpm common build && concurrently --kill-others-on-fail \"pnpm common coverage\" \"pnpm client coverage\" \"pnpm api coverage\"",
"client": "pnpm --filter client",
"build": "pnpm common build && concurrently --kill-others-on-fail \"pnpm client build\" \"pnpm api build\"",
"dev": "pnpm common build && concurrently --kill-others-on-fail \"pnpm client dev\" \"pnpm api dev\"",
"start": "pnpm common build && concurrently --kill-others-on-fail \"pnpm client start\" \"pnpm api start\"",
"test": "pnpm common build && concurrently --kill-others-on-fail \"pnpm common test\" \"pnpm client test\" \"pnpm api test\"",
"release": "commit-and-tag-version --bumpFiles package.json packages/*/package.json",
"commitlint": "commitlint --edit"
},
"commit-and-tag-version": {
"writerOpts": {
"commitsSort": false
}
}
}
```

`common/package.json` 的配置：

```
{
"name": "common",
"version": "0.7.0",
"description": "common code shared by ppresume project",
"author": "Xiao Hanyu",
"private": true,
"devDependencies": {
"@types/jest": "^29.5.5",
"@types/lodash": "^4.14.202",
"@types/node": "^20.5.7",
"jest": "^29.7.0",
"ts-jest": "^29.1.1",
"typescript": "^5.2.2"
},
"main": "dist/index",
"types": "dist/index",
"scripts": {
"build": "tsc --build --force",
"coverage": "jest --coverage",
"test": "jest"
},
"dependencies": {
"escape-latex": "^1.2.0",
"tslib": "^2.6.2"
}
}
```

调用 `pnpm common build` 来完成 `common` package 的 build ，然后在 api/client 里直接 `import xxx from 'common'` 就可以了

3. mono-repo 有 mono-repo 的好处的，最大的好处是出了 regression 问题可以用 `git bisect` 找 bug ，commit log 的维护重点还是靠个人/团队守规则。

我个人项目的概况： https://x.com/hanyuxiao1988/status/1878625079829172510

以上

@sikex 收到收到，太感谢了，bug 报告很详细。

@anUglyDog 嗯，有时候颜值就是正义么，哈哈

@scienhub 嗯，仁兄是懂行的哈

@scienhub 排版引擎是 LaTeX 呢，具体来说是 XeLaTeX 引擎，前两个月写了篇关于排版引擎技术选型的文章： https://blog.ppresume.com/posts/zh-CN/on-typesetting-engines ，供参考哈。

中文排版也是完全支持的，而且支持简体中文、繁体中文（香港）和繁体中文（台湾）三种，具体可以看：

- blog: https://blog.ppresume.com/posts/multi-languagues-support
- doc: https://docs.ppresume.com/content/multi-languages

@wincatcher 加油加油

试验了下，挺不错的，是有打算做成类似于 similarweb 这样的工具平台么？有商业化计划么？

问一下，网站数据是从哪里分析出来的呀？

@realpg 你这人真是搞笑了咧，我哪里自说自话了？你怎么知道我没跟 paddle 的真人联系啊？为了开个户我还得订机票远涉重洋去找他们线下谈？你找他们线下谈他们就能接受么？

我邮件跟他们谈过几轮，贴几段原文：

```
Hi Hanyu,

I completely understand that you have registered your company recently and therefore you do not have the processing statements required.

However as a company, Paddle prioritises the safety and security of our valued customers, and this information is necessary for us to ensure a secure environment for all.

As we are unable to support your business at this time, I would recommend using an alternative payment provider until you are able to provide the requested processing statements.

I assure you that once you are able to resubmit your domain with the necessary information, our team will be more than happy to reassess the situation and provide a prompt response.

I appreciate your understanding.
```

```
Hi Hanyu,

I understand the challenge you're facing. To clarify, you will need to provide processing statements from a payment processor for at least the past three months. These statements help us assess your transaction history and ensure everything aligns with our requirements.

Yes, it typically means that you’ll need to integrate with another payment processor and generate some transaction history before applying for Paddle. Once you’re approved by Paddle, you can then migrate your customer data to our platform.

If you have any more questions or need further assistance during this process, please feel free to reach out.
```

人家已经写了：“Yes, it typically means that you’ll need to integrate with another payment processor and generate some transaction history before applying for Paddle. ”，但是这条规则就没在 paddle 的官网上明示过。

问题是，如果我已经集成了一个 payment processor ，我干嘛还要再费那个劲迁移到 paddle 啊？ MoR 的服务又不只 paddle 一家。

@realpg 不行的，我也是收到同样的真人回复邮件，就是需要 3 个月别家的 processing statements ，然后才能去注册 paddle ，非常坑

@rexue123 注册了

遇到了同样的问题： https://www.reddit.com/r/SaaS/comments/1ea3vol/rejected_by_paddle_with_a_chickenandegg_review/

最后用 stripe 了

@abc1310054026 #72

恰恰相反，我个人认为如果工程师要写出一个“不丑”的页面，最好不用用 tailwind 这种约束性比较弱的方案，还是找成型的更高级一些 UI 库比较好一些。

tailwind 太自由了，也就是比裸写 CSS 高了一小档，个人自由发挥很容易就写出“奔放”过头的页面和设计，当然不可否认，tailwind 确实是有很多优秀的 template 可以参考。

@PluginsWorld #65

对的，是这样的，看上去非常美好，但是如果你要统一尺寸的 unit ，或者 color pallete ，用 tailwind 这种 h-[xxxPx] 的写法，丢失了 TypeScript 中的类型信息，后续修改维护其实还是非常麻烦的。

我个人认为，tailwind 其实是给库的作者使用的，绝大多数人其实也没有用 tailwind 重新写一套组件库的必要。

普通产品开发，用一套成型的组件库，加上 tailwind 适当修饰一下，可能是一个比较好的折衷的办法。

@abc1310054026 #62

class name 这个，用 CSS in JS 其实可以缓解不少了。

tailwind 的主要问题在于，如果重度使用，完全从头自己写组件库，其实维护性是蛮的，一个 `div` 几十个 class ，debug 起来其实蛮烦的，比如这种官方的例子，很难说是维护性很好：

```
<div class="sm:col-span-3">
<label for="last-name" class="block text-sm/6 font-medium text-gray-900">Last name</label>
<div class="mt-2">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6">
</div>
</div>

<div class="sm:col-span-4">
<label for="email" class="block text-sm/6 font-medium text-gray-900">Email address</label>
<div class="mt-2">
<input id="email" name="email" type="email" autocomplete="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6">
</div>
</div>
```

@abc1310054026 #59

大部分 CSS 的 UI 库应试都是以 4px 为基础单位的吧？我有用过 taillwind ，但是觉得 tailwind 还是有一些别的问题，最终还是放弃了。

@PluginsWorld #47

其实大可不必自己去调试试验出一组颜色，网上有很多 color palette css generator ，选一个顺眼的克制使用，就行了。

Refactoring UI 是本不错的书。

我个人觉得，工程师做设计，太花哨的就不要想了，做到简洁、归整就是胜利，主要的要点还是要克制：

1. 不要用太多的颜色
2. 4px 做为一个基础的 unit ，所有的尺寸尽量以这个为基础，4px/8px/16px/24px/32px 这种
3. 网页上的元素，尽量对齐，善用 grid
4. 适当学习下字体、排版知识

我个人基本上就是按照以上几条从头到尾完成了自己产品的所有设计： https://ppresume.com ，供参考哈。

早年间 qingcloud 有个前端工程师的分享蛮不错的： https://speakerdeck.com/imdonkey01/qian-duan-gong-cheng-shi-ru-he-jian-gu-she-ji-gong-zuo

@gogogo1203 我实际上用的是 react-pdf-viewer 来显示的 PDF ，是支持自己指定 character map 的： https://github.com/react-pdf-viewer/react-pdf-viewer/issues/107#issuecomment-643749966 ，然后就可以显示 CJK 了。

但是 react-pdf-viewer 这个库也有一些问题，最近可能不怎么维护了，另外就是 bug 也有点多。