CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

TODO: 推翻整个项目重新建立根基

Browse Source
This commit is contained in:
CrescentLeaf
2025-12-06 00:18:10 +08:00
parent faf594b2f6
commit a549773eb2
79 changed files with 359 additions and 3589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/ui/preference/Preference.tsx
View File

@@ -1,16 +0,0 @@
import { ListItem } from "mdui"
interface Args extends React.HTMLAttributes<ListItem> {
title: string
description?: string
icon: string
disabled?: boolean
}
export default function Preference({ title, icon, disabled, description, ...props }: Args) {
// @ts-ignore: 为什么 ...props 要说参数不兼容呢?
return <mdui-list-item disabled={disabled ? true : undefined} rounded icon={icon} {...props}>
{title}
{description && <span slot="description">{description}</span>}
</mdui-list-item>
}

5
client/ui/preference/PreferenceHeader.tsx
View File

@@ -1,5 +0,0 @@
export default function PreferenceHeader({ title }: {
title: string
}) {
return <mdui-list-subheader>{title}</mdui-list-subheader>
}

8
client/ui/preference/PreferenceLayout.tsx
View File

@@ -1,8 +0,0 @@
export default function PreferenceLayout({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
return <mdui-list style={{
marginLeft: '15px',
marginRight: '15px',
}} {...props}>
{children}
</mdui-list>
}

27
client/ui/preference/PreferenceStore.ts
View File

@@ -1,27 +0,0 @@
import React from 'react'
export default class PreferenceStore<T extends object> {
declare onUpdate: (value: T, oldvalue: T) => void
declare state: T
declare setState: React.Dispatch<React.SetStateAction<T>>
constructor() {
const _ = React.useState({} as T)
this.state = _[0]
this.setState = _[1]
}
createUpdater() {
return (key: string, value: unknown) => {
const oldvalue = this.state
const newValue = {
...this.state,
[key]: value,
}
this.setState(newValue)
this.onUpdate?.(newValue, oldvalue)
}
}
setOnUpdate(onUpdate: (value: T, oldvalue: T) => void) {
this.onUpdate = onUpdate
}
}

6
client/ui/preference/PreferenceUpdater.ts
View File

@@ -1,6 +0,0 @@
import React from 'react'
// deno-lint-ignore no-explicit-any
const PreferenceUpdater = React.createContext<(key: string, value: unknown) => void>(null as any)
export default PreferenceUpdater

43
client/ui/preference/SelectPreference.tsx
View File

@@ -1,43 +0,0 @@
import React from 'react'
import { Dropdown } from 'mdui'
import useEventListener from '../useEventListener.ts'
import PreferenceUpdater from "./PreferenceUpdater.ts"
interface Args extends React.HTMLAttributes<HTMLElement> {
title: string
icon: string
id: string
disabled?: boolean
selections: { [id: string]: string }
state: string
}
export default function SelectPreference({ title, icon, id: preferenceId, selections, state, disabled }: Args) {
const updater = React.useContext(PreferenceUpdater)
const dropDownRef = React.useRef<Dropdown>(null)
const [isDropDownOpen, setDropDownOpen] = React.useState(false)
useEventListener(dropDownRef, 'closed', () => {
setDropDownOpen(false)
})
return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => setDropDownOpen(!isDropDownOpen)}>
<mdui-dropdown ref={dropDownRef} trigger="manual" open={isDropDownOpen}>
<span slot="trigger">{title}</span>
<mdui-menu onClick={(e) => {
e.stopPropagation()
setDropDownOpen(false)
}}>
{
Object.keys(selections).map((id) =>
// @ts-ignore: selected 确实存在, 但是并不对外公开使用
<mdui-menu-item key={id} selected={state == id ? true : undefined} onClick={() => {
updater(preferenceId, id)
}}>{selections[id]}</mdui-menu-item>
)
}
</mdui-menu>
</mdui-dropdown>
<span slot="description">{selections[state]}</span>
</mdui-list-item>
}

30
client/ui/preference/SwitchPreference.tsx
View File

@@ -1,30 +0,0 @@
import { Switch } from 'mdui'
import React from 'react'
import PreferenceUpdater from "./PreferenceUpdater.ts"
interface Args extends React.HTMLAttributes<HTMLElement> {
title: string
id: string
description?: string
icon: string
state: boolean
disabled?: boolean
}
export default function SwitchPreference({ title, icon, id, disabled, description, state }: Args) {
const updater = React.useContext(PreferenceUpdater)
const switchRef = React.useRef<Switch>(null)
React.useEffect(() => {
switchRef.current!.checked = state
}, [state])
return <mdui-list-item disabled={disabled ? true : undefined} rounded icon={icon} onClick={() => {
updater(id, !state)
}}>
{title}
{description && <span slot="description">{description}</span>}
<mdui-switch slot="end-icon" checked-icon="" ref={switchRef} onClick={(e) => e.preventDefault()}></mdui-switch>
</mdui-list-item>
}

37
client/ui/preference/TextFieldPreference.tsx
View File

@@ -1,37 +0,0 @@
import React from 'react'
import { prompt } from 'mdui'
import PreferenceUpdater from "./PreferenceUpdater.ts"
interface Args extends React.HTMLAttributes<HTMLElement> {
title: string
description?: string
icon: string
id: string
state: string
disabled?: boolean
}
export default function TextFieldPreference({ title, icon, description, id, state, disabled }: Args) {
const updater = React.useContext(PreferenceUpdater)
return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => {
prompt({
headline: title,
confirmText: "确定",
cancelText: "取消",
onConfirm: (value) => {
updater(id, value)
},
onCancel: () => { },
textFieldOptions: {
label: description,
value: state,
},
closeOnEsc: true,
closeOnOverlayClick: true,
})
}}>
{title}
{description && <span slot="description">{description}</span>}
</mdui-list-item>
}