Skip to content

Commit

Permalink
feat: settings and pages layout change
Browse files Browse the repository at this point in the history
BIYUEHU committed Jul 17, 2024
1 parent 7ee84fe commit ff88eec
Showing 61 changed files with 1,584 additions and 2,447 deletions.
19 changes: 0 additions & 19 deletions .eslintrc

This file was deleted.

5 changes: 0 additions & 5 deletions .prettierrc

This file was deleted.

39 changes: 39 additions & 0 deletions biome.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
{
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 120,
"attributePosition": "auto"
},
"linter": {
"enabled": true,
"rules": {},
"ignore": ["**/*.js", "**/*.d.ts"]
},
"javascript": {
"formatter": {
"enabled": true,
"jsxQuoteStyle": "double",
"quoteProperties": "asNeeded",
"trailingCommas": "none",
"semicolons": "asNeeded",
"arrowParentheses": "always",
"bracketSpacing": true,
"bracketSameLine": false,
"quoteStyle": "single",
"attributePosition": "auto"
},
"parser": {
"unsafeParameterDecoratorsEnabled": true
}
},
"overrides": [
{
"include": ["*.ts", "*.tsx"]
}
]
}
12 changes: 5 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -4,8 +4,9 @@
"version": "1.0.0",
"private": true,
"license": "GPL-3.0",
"author": "Romi <biyuehuya@gmail.com>",
"author": "Romi <me@hotaru.icu>",
"scripts": {
"core": "pnpm --filter @moehub/core",
"client": "pnpm --filter @moehub/client",
"common": "pnpm --filter @moehub/common",
"dev:core": "nodemon --watch",
@@ -15,16 +16,13 @@
"version": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
},
"devDependencies": {
"@biomejs/biome": "^1.8.3",
"conventional-changelog-cli": "^4.1.0",
"eslint": "^8.57.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-typescript": "^3.0.0",
"nodemon": "^3.1.3",
"prettier": "^3.3.0",
"tsup": "^8.1.0",
"tsx": "^4.11.2",
"typescript": "^5.4.5"
"typescript": "5.5.3"
},
"packageManager": "pnpm@8.7.4+",
"engines": {
@@ -35,7 +33,7 @@
"ext": "ts",
"ignore": [
"packages/common",
"packages/client}"
"packages/client"
]
}
}
11 changes: 4 additions & 7 deletions packages/client/package.json
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "pnpm tsc && tsc && vite build",
"build": "pnpm --filter @moehub/common build && tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
@@ -17,19 +17,16 @@
"dayjs": "^1.11.11",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^2.0.5",
"react-router-dom": "^6.23.1",
"swr": "^2.2.5",
"tailwindcss": "^3.4.4"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"typescript": "^5.2.2",
"typescript": "^5.5.3",
"vite": "^5.2.0"
}
}
25 changes: 17 additions & 8 deletions packages/client/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,21 @@
import { useRoutes } from 'react-router-dom';
import Layout from './components/Layout';
import router from './router';
import { HashRouter, Route, Routes } from 'react-router-dom'
import Layout from '@/components/Layout'
import routes from './routes'

function App() {
const outlet = useRoutes(router);
document.title = 'MoeHub';

return <Layout outlet={outlet!} />;
return (
<HashRouter>
<Routes>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
element={<Layout title={route.title} outlet={route.component} isPrivate={route.isPrivate} />}
/>
))}
</Routes>
</HashRouter>
)
}

export default App;
export default App
135 changes: 135 additions & 0 deletions packages/client/src/components/CharacterForm/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import { Button, Collapse, DatePicker, Form, Input, InputNumber, Radio, Select, Space } from 'antd'
import type { MoehubDataCharacter } from '@moehub/common'
import dayjs from 'dayjs'
import { type getCharacter, getTags } from '@/http'
import useSWR from 'swr'
import { useEffect } from 'react'

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

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

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

const { data: tags } = useSWR('/api/tags', async () => {
return (await getTags()).data.map((tag) => ({ label: tag.name, value: tag.name }))
})

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>
</>
)
}
]}
/>
<br />
<Form.Item>
<Space>
<Button type="primary" htmlType="submit" className="cardButton">
提交
</Button>
</Space>
</Form.Item>
</Form>
)
}

export default CharacterForm
89 changes: 55 additions & 34 deletions packages/client/src/components/Layout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,59 @@
import { Flex, Layout as AntLayout, Avatar, Image } from 'antd';
import { LoginOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import styles from './styles.module.css';
import { Flex, Layout as AntLayout, Avatar, Image } from 'antd'
import { LoginOutlined } from '@ant-design/icons'
import { Link, useNavigate } from 'react-router-dom'
import styles from './styles.module.css'
import { useEffect } from 'react'
import Store from '@/store'

const { Header, Footer, Content } = AntLayout;
interface LayoutProps {
title: string
outlet: React.ReactElement
isPrivate?: boolean
}

const Layout: React.FC<{ outlet: React.ReactElement }> = ({ outlet }) => (
<>
<div className={styles.background}></div>
<Flex gap="middle" wrap>
<AntLayout className={styles.layout}>
<Header className={styles.header}>
<h1>
<Link className={styles.headerTitle} to="/">
<Avatar style={{ marginRight: 10 }} src={<Image src="https://biyuehu.github.io/images/avatar.png" />} />
Moe Hub
</Link>
</h1>
const Layout: React.FC<LayoutProps> = ({ title, outlet, isPrivate }) => {
document.title = title

if (isPrivate) {
const navigate = useNavigate()

<Link to="/admin">
<Avatar style={{ background: 'none', color: '#eee' }} icon={<LoginOutlined />} />
</Link>
</Header>
<Content className={styles.content}>{outlet}</Content>
<Footer className={styles.footer}>
Made with ❤ By{' '}
<a href="https://github.com/biyuehu" target="_blank">
Arimura Sena
</a>{' '}
In © 2024
</Footer>
</AntLayout>
</Flex>
</>
);
useEffect(() => {
if (Store.get('login') !== 'yes') navigate('./login', { replace: true })
}, [navigate])
}

return (
<>
<div className={styles.background} />
<Flex gap="middle" wrap>
<AntLayout className={styles.layout}>
<AntLayout.Header className={styles.header}>
<h1>
<Link className={styles.headerTitle} to="/">
<Avatar
onClick={() => {}}
style={{ marginRight: 10 }}
src="https://biyuehu.github.io/images/avatar.png"
/>
Moe Hub
</Link>
</h1>
<Link to="/admin">
<Avatar style={{ background: 'none', color: '#eee' }} icon={<LoginOutlined />} />
</Link>
</AntLayout.Header>
<AntLayout.Content className={styles.content}>{outlet}</AntLayout.Content>
<AntLayout.Footer className={styles.footer}>
Made with ❤ By{' '}
<a href="https://github.com/biyuehu" target="_blank" rel="noreferrer">
Arimura Sena
</a>{' '}
In © 2024
</AntLayout.Footer>
</AntLayout>
</Flex>
</>
)
}

export default Layout;
export default Layout
Loading

0 comments on commit ff88eec

Please sign in to comment.