docs: 调整文档
This commit is contained in:
parent
88944bcc95
commit
6ff3bf46f8
40
README.md
40
README.md
|
@ -41,35 +41,11 @@ npm run ts:app
|
||||||
npm run ts:app login
|
npm run ts:app login
|
||||||
```
|
```
|
||||||
|
|
||||||
> [开发相关](./DEV.md)
|
## 开发者
|
||||||
|
|
||||||
## 环境补充
|
> [开发相关](./md/developer.md)
|
||||||
|
|
||||||
### Centos
|
## Unknown file ".ts"
|
||||||
|
|
||||||
```sh
|
|
||||||
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y
|
|
||||||
```
|
|
||||||
|
|
||||||
- 字体
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yum groupinstall fonts -y
|
|
||||||
```
|
|
||||||
|
|
||||||
- libstdc
|
|
||||||
|
|
||||||
下载 [libstdc++.so.6.0.29.zip](https://baiyin1314.lanzouq.com/i8Nr21ig8hyf)
|
|
||||||
|
|
||||||
将 **解压缩后** 的文件放在/usr/lib64/中
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cd /usr/lib64/
|
|
||||||
sudo mv libstdc++.so.6 libstdc++.so.6.bak
|
|
||||||
sudo ln -s libstdc++.so.6.0.29 libstdc++.so.6
|
|
||||||
```
|
|
||||||
|
|
||||||
# Unknown file ".ts"
|
|
||||||
|
|
||||||
node >= 20.0.0
|
node >= 20.0.0
|
||||||
|
|
||||||
|
@ -84,13 +60,3 @@ npm run latest:app
|
||||||
```sh
|
```sh
|
||||||
npm run latest:app login
|
npm run latest:app login
|
||||||
```
|
```
|
||||||
|
|
||||||
## 致谢
|
|
||||||
|
|
||||||
| Nickname | Contribution |
|
|
||||||
| :-----------------------------------------------------------: | -------------------- |
|
|
||||||
| [Yunzai v3.0](https://gitee.com/le-niao/Yunzai-Bot) | 乐神的Yunzai-Bot V3 |
|
|
||||||
| [GardenHamster](https://github.com/GardenHamster/GenshinPray) | 模拟抽卡背景素材来源 |
|
|
||||||
| [西风驿站](https://bbs.mihoyo.com/ys/collection/839181) | 角色攻略图来源 |
|
|
||||||
| [米游社友人A](https://bbs.mihoyo.com/ys/collection/428421) | 角色突破素材图来源 |
|
|
||||||
| [icqq](https://github.com/icqqjs/icqq) | ICQQ |
|
|
||||||
|
|
|
@ -106,72 +106,4 @@ src/utils
|
||||||
|
|
||||||
## 新开发示例
|
## 新开发示例
|
||||||
|
|
||||||
- 图片组件
|
> [开发示例](./example.md)
|
||||||
|
|
||||||
```tsx
|
|
||||||
import React from 'react'
|
|
||||||
export default function App() {
|
|
||||||
return (
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="../css/output.css"></link>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root">
|
|
||||||
<div className="text-red-500 p-2 text-xl">Hello, world!</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import React from 'react'
|
|
||||||
import { renderToString } from 'react-dom/server'
|
|
||||||
import { mkdirSync, writeFileSync } from 'fs'
|
|
||||||
import { join } from 'path'
|
|
||||||
// puppeteer
|
|
||||||
import { Puppeteer } from './puppeteer.ts'
|
|
||||||
// component
|
|
||||||
import HelloComponent from './hello.tsx'
|
|
||||||
//
|
|
||||||
class Component {
|
|
||||||
puppeteer: typeof Puppeteer.prototype
|
|
||||||
#dir = ''
|
|
||||||
constructor(dir: string) {
|
|
||||||
this.puppeteer = new Puppeteer()
|
|
||||||
this.#dir = dir
|
|
||||||
mkdirSync(this.#dir, {
|
|
||||||
recursive: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 渲染字符串
|
|
||||||
* @param element
|
|
||||||
* @param name
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
create(element: React.ReactNode, dirs: string, name: string) {
|
|
||||||
const html = renderToString(element)
|
|
||||||
const dir = join(this.#dir, dirs)
|
|
||||||
mkdirSync(dir, {
|
|
||||||
recursive: true
|
|
||||||
})
|
|
||||||
const address = join(dir, name)
|
|
||||||
writeFileSync(address, `<!DOCTYPE html>${html}`)
|
|
||||||
return address
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* hello
|
|
||||||
* @param _
|
|
||||||
* @param name
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
hello() {
|
|
||||||
return this.puppeteer.render(
|
|
||||||
this.create(<HelloComponent />, 'hello', 'help.html')
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
|
@ -0,0 +1,71 @@
|
||||||
|
## 新开发示例
|
||||||
|
|
||||||
|
- 图片组件
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import React from 'react'
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="../css/output.css"></link>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root">
|
||||||
|
<div className="text-red-500 p-2 text-xl">Hello, world!</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import React from 'react'
|
||||||
|
import { renderToString } from 'react-dom/server'
|
||||||
|
import { mkdirSync, writeFileSync } from 'fs'
|
||||||
|
import { join } from 'path'
|
||||||
|
// puppeteer
|
||||||
|
import { Puppeteer } from './puppeteer.ts'
|
||||||
|
// component
|
||||||
|
import HelloComponent from './hello.tsx'
|
||||||
|
//
|
||||||
|
class Component {
|
||||||
|
puppeteer: typeof Puppeteer.prototype
|
||||||
|
#dir = ''
|
||||||
|
constructor(dir: string) {
|
||||||
|
this.puppeteer = new Puppeteer()
|
||||||
|
this.#dir = dir
|
||||||
|
mkdirSync(this.#dir, {
|
||||||
|
recursive: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 渲染字符串
|
||||||
|
* @param element
|
||||||
|
* @param name
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
create(element: React.ReactNode, dirs: string, name: string) {
|
||||||
|
const html = renderToString(element)
|
||||||
|
const dir = join(this.#dir, dirs)
|
||||||
|
mkdirSync(dir, {
|
||||||
|
recursive: true
|
||||||
|
})
|
||||||
|
const address = join(dir, name)
|
||||||
|
writeFileSync(address, `<!DOCTYPE html>${html}`)
|
||||||
|
return address
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* hello
|
||||||
|
* @param _
|
||||||
|
* @param name
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
hello() {
|
||||||
|
return this.puppeteer.render(
|
||||||
|
this.create(<HelloComponent />, 'hello', 'help.html')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
Loading…
Reference in New Issue