Skip to content

Commit

Permalink
feat: bot module, redux store and settings page
Browse files Browse the repository at this point in the history
  • Loading branch information
@BIYUEHU
BIYUEHU committed Jul 19, 2024
1 parent ff88eec commit 2abd7f0
Show file tree
Hide file tree
Showing 35 changed files with 1,269 additions and 489 deletions.
7 changes: 2 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,8 @@
"node": ">=17.9.0"
},
"nodemonConfig": {
"exec": "tsx packages/core/src",
"exec": "pnpm common build && tsx packages/core/src",
"ext": "ts",
"ignore": [
"packages/common",
"packages/client"
]
"ignore": ["packages/common", "packages/client"]
}
}
37 changes: 23 additions & 14 deletions packages/client/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/svg+xml"
href="https://biyuehu.github.io/images/avatar.png"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
<title>MoeHub</title>
<meta
name="description"
content="Your anime character collection gallery, easily build, freely share."
/>
<meta name="keywords" content="MoeHub,acg,ACG,GalGame,gal,GAL,galgame,anime,character,gallery,二次元,动漫,角色,二刺猿,游戏,视觉小说,avg,adv,漫画,动画,轻小说,acgn,ACGN" />
</head>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="https://biyuehu.github.io/images/avatar.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>MoeHub</title>
</head>

<body>
<div id="root">
</div>
<script type="module" src="/src/main.tsx"></script>
</body>

</html>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
3 changes: 3 additions & 0 deletions packages/client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,16 @@
"dependencies": {
"@ant-design/icons": "^5.3.7",
"@moehub/common": "workspace:^",
"@reduxjs/toolkit": "^2.2.6",
"antd": "^5.18.1",
"axios": "^1.7.2",
"dayjs": "^1.11.11",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^2.0.5",
"react-redux": "^9.1.2",
"react-router-dom": "^6.23.1",
"redux-persist": "^6.0.0",
"swr": "^2.2.5",
"tailwindcss": "^3.4.4"
},
Expand Down
6 changes: 3 additions & 3 deletions packages/client/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { HashRouter, Route, Routes } from 'react-router-dom'
import { HashRouter as Router, Route, Routes } from 'react-router-dom'
import Layout from '@/components/Layout'
import routes from './routes'

function App() {
return (
<HashRouter>
<Router>
<Routes>
{routes.map((route) => (
<Route
Expand All @@ -14,7 +14,7 @@ function App() {
/>
))}
</Routes>
</HashRouter>
</Router>
)
}

Expand Down
254 changes: 150 additions & 104 deletions packages/client/src/components/CharacterForm/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,162 @@
import { Button, Collapse, DatePicker, Form, Input, InputNumber, Radio, Select, Space } from 'antd'
import type { MoehubDataCharacter } from '@moehub/common'
import { Button, ColorPicker, DatePicker, Form, Input, InputNumber, Radio, Select, Space, Tabs } from 'antd'
import type { MoehubDataCharacter, MoehubDataCharacterSubmit } from '@moehub/common'
import dayjs from 'dayjs'
import { type getCharacter, getTags } from '@/http'
import { getTags } from '@/http'
import useSWR from 'swr'
import { useEffect } from 'react'
import ListForm from '../ListForm'

export type MoehubDataCharacterHandle = Omit<MoehubDataCharacterSubmit, 'birthday' | 'color'> & {
birthday?: dayjs.Dayjs
color?: { toHex(): string; cleared: false | string }
}

export function handleMoehubDataCharacter(values: MoehubDataCharacterHandle): MoehubDataCharacterSubmit {
console.log(values.color)
return {
...values,
color: values.color ? (values.color.cleared === false ? values.color.toHex() : '') : undefined,
birthday: values.birthday ? new Date(values.birthday.toString()).getTime() : undefined
}
}

interface CharacterFormProps {
onSubmit: (values: Omit<MoehubDataCharacter, 'birthday'> & { birthday: dayjs.Dayjs }) => void
data?: ReturnType<typeof getCharacter> extends Promise<infer U> ? U : never
onSubmit: (values: MoehubDataCharacterHandle) => void
data?: MoehubDataCharacter
}

const items = (isDisabled: boolean, tags?: { label: string; value: string }[]) => [
{
key: '1',
label: '基本信息',
children: (
<>
<Form.Item name="name" label="角色名" rules={[{ required: true }]}>
<Input disabled={isDisabled} />
</Form.Item>
<Form.Item name="romaji" label="罗马音" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="gender" label="性别" rules={[{ required: true }]}>
<Radio.Group>
<Radio.Button value="MALE">男性</Radio.Button>
<Radio.Button value="FEMALE">女性</Radio.Button>
<Radio.Button value="OTHER">其它/未知</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item name="series" label="作品名" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="seriesGenre" label="作品类型" rules={[{ required: true }]}>
<Radio.Group>
<Radio value="ANIME">动画</Radio>
<Radio value="COMIC">漫画</Radio>
<Radio value="GALGAME">Galgame</Radio>
<Radio value="GAME">游戏</Radio>
<Radio value="NOVEL">轻小说</Radio>
<Radio value="OTHER">其它</Radio>
</Radio.Group>
</Form.Item>
</>
)
},
{
key: '2',
label: '详细信息',
children: (
<>
<Form.Item name="alias" label="角色别名">
<Select mode="tags" />
</Form.Item>
<Form.Item label="相关图片">
<ListForm name="images" addButtonText="添加图片链接">
{(name) => (
<Form.Item name={name} rules={[{ required: true }]}>
<Input />
</Form.Item>
)}
</ListForm>
</Form.Item>
<Form.Item name="description" label="描述">
<Input.TextArea rows={3} />
</Form.Item>
<Form.Item name="hitokoto" label="一言">
<Input />
</Form.Item>
<Form.Item name="birthday" label="生日">
<DatePicker format="MM-DD" />
</Form.Item>
<Form.Item name="comment" label="评价">
<Input.TextArea rows={3} />
</Form.Item>
<Form.Item name="tags" label="萌点">
<Select mode="tags" options={tags ?? []} />
</Form.Item>
<Form.Item name="color" label="代表色">
<ColorPicker showText allowClear />
</Form.Item>
<Form.Item name="songId" label="主题曲">
<InputNumber placeholder="请输入网易云歌曲 ID，如：2077744392" min="1" />
</Form.Item>
</>
)
},
{
key: '3',
label: '其它信息',
children: (
<>
<Form.Item name="voice" label="声优">
<Input />
</Form.Item>
<Form.Item name="age" label="年龄" rules={[{ type: 'number' }]}>
<InputNumber min={1} />
</Form.Item>
<Form.Item name="height" label="身高" rules={[{ type: 'number' }]}>
<InputNumber min={1} />
</Form.Item>
<Form.Item name="weight" label="体重" rules={[{ type: 'number' }]}>
<InputNumber min={1} />
</Form.Item>
<Form.Item name="bust" label="胸围" rules={[{ type: 'number' }]}>
<InputNumber min={1} />
</Form.Item>
<Form.Item name="waist" label="腰围" rules={[{ type: 'number' }]}>
<InputNumber min={1} />
</Form.Item>
<Form.Item name="hip" label="臀围" rules={[{ type: 'number' }]}>
<InputNumber min={1} />
</Form.Item>
<Form.Item name="hairColor" label="发色">
<Input />
</Form.Item>
<Form.Item name="eyeColor" label="瞳色">
<Input />
</Form.Item>
<Form.Item name="bloodType" label="血型">
<Radio.Group>
<Radio value="A">A 型</Radio>
<Radio value="B">B 型</Radio>
<Radio value="AB">AB 型</Radio>
<Radio value="O">O 型</Radio>
</Radio.Group>
</Form.Item>
<Form.Item name="url" label="相关链接">
<Select mode="tags" />
</Form.Item>
</>
)
}
]

const CharacterForm: React.FC<CharacterFormProps> = ({ onSubmit, data }) => {
/* TODO: set type for useForm() */
const [form] = Form.useForm()
const [form] = Form.useForm<MoehubDataCharacterHandle>()

useEffect(() => {
if (data) form.setFieldsValue(data.birthday ? { ...data, birthday: dayjs(data.birthday) } : data)
if (data)
form.setFieldsValue(
(data.birthday ? { ...data, birthday: dayjs(data.birthday) } : data) as unknown as MoehubDataCharacterHandle
)
}, [form, data])

const { data: tags } = useSWR('/api/tags', async () => {
Expand All @@ -24,102 +165,7 @@ const CharacterForm: React.FC<CharacterFormProps> = ({ onSubmit, data }) => {

return (
<Form form={form} name="control-hooks" className="cardForm cleanAll" onFinish={onSubmit}>
<Form.Item name="name" label="角色名" rules={[{ required: true }]}>
<Input disabled={!!data} />
</Form.Item>
<Form.Item name="romaji" label="罗马音" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="gender" label="性别" rules={[{ required: true }]}>
<Radio.Group>
<Radio.Button value="MALE">男性</Radio.Button>
<Radio.Button value="FEMALE">女性</Radio.Button>
<Radio.Button value="OTHER">其它/未知</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item name="series" label="作品名" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="seriesGenre" label="作品类型" rules={[{ required: true }]}>
<Radio.Group>
<Radio value="ANIME">动画</Radio>
<Radio value="COMIC">漫画</Radio>
<Radio value="GALGAME">Galgame</Radio>
<Radio value="GAME">游戏</Radio>
<Radio value="NOVEL">轻小说</Radio>
<Radio value="OTHER">其它</Radio>
</Radio.Group>
</Form.Item>
<hr />
<Form.Item name="alias" label="角色别名">
<Select mode="tags" />
</Form.Item>
<Form.Item name="images" label="相关图片">
<Select mode="tags" />
</Form.Item>
<Form.Item name="description" label="描述">
<Input />
</Form.Item>
<Form.Item name="hitokoto" label="一言">
<Input />
</Form.Item>
<Form.Item name="birthday" label="生日">
<DatePicker format="MM-DD" />
</Form.Item>
<Form.Item name="comment" label="个人评价">
<Input />
</Form.Item>
<Form.Item name="tags" label="萌点">
<Select mode="tags" options={tags ?? []} />
</Form.Item>
<hr />
<Collapse
items={[
{
key: '1',
label: '其它信息',
children: (
<>
<Form.Item name="voice" label="声优">
<Input />
</Form.Item>
<Form.Item name="age" label="年龄" rules={[{ type: 'number' }]}>
<InputNumber />
</Form.Item>
<Form.Item name="height" label="身高" rules={[{ type: 'number' }]}>
<InputNumber />
</Form.Item>
<Form.Item name="bust" label="胸围" rules={[{ type: 'number' }]}>
<InputNumber />
</Form.Item>
<Form.Item name="waist" label="腰围" rules={[{ type: 'number' }]}>
<InputNumber />
</Form.Item>
<Form.Item name="hip" label="臀围" rules={[{ type: 'number' }]}>
<InputNumber />
</Form.Item>
<Form.Item name="hairColor" label="发色">
<Input />
</Form.Item>
<Form.Item name="eyeColor" label="瞳色">
<Input />
</Form.Item>
<Form.Item name="bloodType" label="血型">
<Radio.Group>
<Radio value="A">A 型</Radio>
<Radio value="B">B 型</Radio>
<Radio value="AB">AB 型</Radio>
<Radio value="O">O 型</Radio>
</Radio.Group>
</Form.Item>
<Form.Item name="url" label="相关链接">
<Select mode="tags" />
</Form.Item>
</>
)
}
]}
/>
<Tabs defaultActiveKey="1" items={items(!!data, tags)} />
<br />
<Form.Item>
<Space>
Expand Down
Loading

0 comments on commit 2abd7f0

Please sign in to comment.