update: 增加开发例子
This commit is contained in:
parent
bc706abfa2
commit
6bfe363bc3
|
@ -97,8 +97,7 @@ export class Restart extends Plugin {
|
|||
await redis.set(this.key, data, { EX: 120 })
|
||||
if (await isPortTaken(restart_port || 27881)) {
|
||||
try {
|
||||
let result = await fetch(`http://localhost:${restart_port || 27881}/restart`)
|
||||
result = await result.text()
|
||||
const result = await fetch(`http://localhost:${restart_port || 27881}/restart`).then(res=>res.text())
|
||||
if (result !== `OK`) {
|
||||
redis.del(this.key)
|
||||
this.e.reply(`操作失败!`)
|
||||
|
|
26
hello.tsx
26
hello.tsx
|
@ -1,26 +0,0 @@
|
|||
import React from 'react'
|
||||
import Nav from './component/Nav.tsx'
|
||||
import NavItem from './component/NavItem.tsx'
|
||||
import List from './component/List.tsx'
|
||||
import ListItem, { MovieType } from './component/ListItem.tsx'
|
||||
export type DataType = {
|
||||
name: string
|
||||
}
|
||||
export type PropsType = {
|
||||
data: DataType
|
||||
movies:MovieType[]
|
||||
}
|
||||
export default function App({ data, movies }: PropsType) {
|
||||
return (
|
||||
<div className="divide-y divide-slate-100 m-8 shadow-2xl">
|
||||
<Nav>
|
||||
<NavItem href="./new" >New {data.name}</NavItem>
|
||||
</Nav>
|
||||
<List>
|
||||
{movies.map((movie) => (
|
||||
<ListItem key={movie.id} movie={movie} />
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,41 @@
|
|||
import React from 'react'
|
||||
import { Component, Puppeteer } from 'yunzai/utils'
|
||||
import Hello, { PropsType } from './views/hello.tsx'
|
||||
// 初始化 组件渲染对象
|
||||
const Com = new Component()
|
||||
export class Image {
|
||||
Pup: typeof Puppeteer.prototype = null
|
||||
/**
|
||||
* 初始化运行Puppeteer
|
||||
*/
|
||||
constructor() {
|
||||
// init
|
||||
this.Pup = new Puppeteer()
|
||||
// start
|
||||
this.Pup.start()
|
||||
|
||||
this.Pup.setLaunch({
|
||||
defaultViewport: {
|
||||
width: 1280,
|
||||
height: 800
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 为指定用户生成html 生成指定数据下的html文件
|
||||
* @param uid 用户编号
|
||||
* @param Props 组件参数
|
||||
* @returns
|
||||
*/
|
||||
createHello(uid: number, Props: PropsType) {
|
||||
// 生成 html 地址 或 html字符串
|
||||
const Address = Com.create(<Hello {...Props} />, {
|
||||
// html/hello/uid.html
|
||||
join_dir: 'hello',
|
||||
html_name: `${uid}.html`,
|
||||
})
|
||||
return this.Pup.render(Address)
|
||||
}
|
||||
}
|
||||
// 初始化 图片生成对象
|
||||
export const imgae = new Image()
|
Binary file not shown.
After Width: | Height: | Size: 27 KiB |
26
routes.tsx
26
routes.tsx
|
@ -1,22 +1,13 @@
|
|||
import React from "react"
|
||||
import { type RouterType } from "yunzai/image/types"
|
||||
import Hello from "./hello.tsx"
|
||||
|
||||
import Hello from "./views/hello.tsx"
|
||||
import Music from "./views/music.tsx"
|
||||
import { createRequire } from 'yunzai/utils'
|
||||
const require = createRequire(import.meta.url)
|
||||
const movies = [
|
||||
{
|
||||
id: 0,
|
||||
image: 'https://t14.baidu.com/it/u=2426410956,1575157783&fm=58&app=83&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000',
|
||||
title: 'Prognosis Negative',
|
||||
starRating: '2.66',
|
||||
rating: 'PG-13',
|
||||
year: '2021',
|
||||
genre: 'Comedy',
|
||||
runtime: '1h 46m',
|
||||
cast: 'Simon Pegg, Zach Galifianakis '
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
image: 'https://t14.baidu.com/it/u=2426410956,1575157783&fm=58&app=83&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000',
|
||||
image: require('./resources/example.png'),
|
||||
title: 'Prognosis Negative',
|
||||
starRating: '2.66',
|
||||
rating: 'PG-13',
|
||||
|
@ -26,17 +17,14 @@ const movies = [
|
|||
cast: 'Simon Pegg, Zach Galifianakis '
|
||||
}
|
||||
]
|
||||
|
||||
const Config: RouterType = [
|
||||
{
|
||||
url: "/",
|
||||
element: <Hello data={{ name: "word" }} movies={movies} />
|
||||
},
|
||||
{
|
||||
url: "/new",
|
||||
element: <div>
|
||||
hello Word !
|
||||
</div>
|
||||
url: "/music",
|
||||
element: <Music />
|
||||
}
|
||||
]
|
||||
export default Config
|
|
@ -0,0 +1,33 @@
|
|||
import React from 'react'
|
||||
import Nav from '../component/Nav.tsx'
|
||||
import NavItem from '../component/NavItem.tsx'
|
||||
import List from '../component/List.tsx'
|
||||
import ListItem, { MovieType } from '../component/ListItem.tsx'
|
||||
export type DataType = {
|
||||
name: string
|
||||
}
|
||||
export type PropsType = {
|
||||
data: DataType
|
||||
movies:MovieType[]
|
||||
}
|
||||
import { createRequire } from 'yunzai/utils'
|
||||
const require = createRequire(import.meta.url)
|
||||
export default function App({ data, movies }: PropsType) {
|
||||
const url = require('../resources/example.png')
|
||||
return (
|
||||
<div className="divide-y divide-slate-100 m-8 shadow-2xl">
|
||||
<img className='h-40 w-40' src={url}></img>
|
||||
<Nav>
|
||||
{
|
||||
// 前往 / music路由
|
||||
}
|
||||
<NavItem href="./music" >New {data.name}</NavItem>
|
||||
</Nav>
|
||||
<List>
|
||||
{movies.map((movie) => (
|
||||
<ListItem key={movie.id} movie={movie} />
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,82 @@
|
|||
import React from "react";
|
||||
import { createRequire } from 'yunzai/utils'
|
||||
const require = createRequire(import.meta.url)
|
||||
export default function App() {
|
||||
const url = require('../resources/example.png')
|
||||
return <>
|
||||
<div className="bg-white border-slate-100 dark:bg-slate-800 dark:border-slate-500 border-b rounded-t-xl p-4 pb-6 sm:p-10 sm:pb-8 lg:p-6 xl:p-10 xl:pb-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8">
|
||||
<div className="flex items-center space-x-4">
|
||||
<img src={url} alt="" width="88" height="88" className="flex-none rounded-lg bg-slate-100" loading="lazy" />
|
||||
<div className="min-w-0 flex-auto space-y-1 font-semibold">
|
||||
<p className="text-cyan-500 dark:text-cyan-400 text-sm leading-6">
|
||||
<abbr title="Episode">Ep.</abbr> 128
|
||||
</p>
|
||||
<h2 className="text-slate-500 dark:text-slate-400 text-sm leading-6 truncate">
|
||||
Scaling CSS at Heroku with Utility Classes
|
||||
</h2>
|
||||
<p className="text-slate-900 dark:text-slate-50 text-lg">
|
||||
Full Stack Radio
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="relative">
|
||||
<div className="bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
|
||||
<div className="bg-cyan-500 dark:bg-cyan-400 w-1/2 h-2" role="progressbar" ></div>
|
||||
</div>
|
||||
<div className="ring-cyan-500 dark:ring-cyan-400 ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow">
|
||||
<div className="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm leading-6 font-medium tabular-nums">
|
||||
<div className="text-cyan-500 dark:text-slate-100">24:16</div>
|
||||
<div className="text-slate-500 dark:text-slate-400">75:50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-slate-50 text-slate-500 dark:bg-slate-600 dark:text-slate-200 rounded-b-xl flex items-center">
|
||||
<div className="flex-auto flex items-center justify-evenly">
|
||||
<button type="button" aria-label="Add to favorites">
|
||||
<svg width="24" height="24">
|
||||
<path d="M7 6.931C7 5.865 7.853 5 8.905 5h6.19C16.147 5 17 5.865 17 6.931V19l-5-4-5 4V6.931Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" className="hidden sm:block lg:hidden xl:block" aria-label="Previous">
|
||||
<svg width="24" height="24" fill="none">
|
||||
<path d="m10 12 8-6v12l-8-6Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M6 6v12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" aria-label="Rewind 10 seconds">
|
||||
<svg width="24" height="24" fill="none">
|
||||
<path d="M6.492 16.95c2.861 2.733 7.5 2.733 10.362 0 2.861-2.734 2.861-7.166 0-9.9-2.862-2.733-7.501-2.733-10.362 0A7.096 7.096 0 0 0 5.5 8.226" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M5 5v3.111c0 .491.398.889.889.889H9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" className="bg-white text-slate-900 dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center" aria-label="Pause">
|
||||
<svg width="30" height="32" fill="currentColor">
|
||||
<rect x="6" y="4" width="4" height="24" rx="2" />
|
||||
<rect x="20" y="4" width="4" height="24" rx="2" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="flex-auto flex items-center justify-evenly">
|
||||
<button type="button" aria-label="Skip 10 seconds">
|
||||
<svg width="24" height="24" fill="none">
|
||||
<path d="M17.509 16.95c-2.862 2.733-7.501 2.733-10.363 0-2.861-2.734-2.861-7.166 0-9.9 2.862-2.733 7.501-2.733 10.363 0 .38.365.711.759.991 1.176" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M19 5v3.111c0 .491-.398.889-.889.889H15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" className="hidden sm:block lg:hidden xl:block" aria-label="Next">
|
||||
<svg width="24" height="24" fill="none">
|
||||
<path d="M14 12 6 6v12l8-6Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M18 6v12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" className="rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500 dark:text-slate-100 dark:ring-0 dark:bg-slate-500">
|
||||
1x
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
Loading…
Reference in New Issue