Skip to content

Commit

Permalink
style: 打印配置按钮样式
Browse files Browse the repository at this point in the history
  • Loading branch information
@sj817
sj817 committed Feb 15, 2025
1 parent 99a06a8 commit ba5c088
Showing 1 changed file with 127 additions and 62 deletions.
189 changes: 127 additions & 62 deletions packages/web/src/components/plugin/config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { toast } from 'react-hot-toast'
import { Spinner } from '@heroui/spinner'
import { IoSettingsOutline } from 'react-icons/io5'
import { RiPlugLine } from 'react-icons/ri'
import { VscJson } from 'react-icons/vsc'
import { VscJson, VscCopy } from 'react-icons/vsc'
import { request } from '@/lib/request'
import { DynamicRender } from '../heroui/main'
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/modal'
Expand Down Expand Up @@ -58,6 +58,7 @@ const EmptyState = () => (
export const PluginConfig = memo(({ open, name, type, onClose }: PluginConfigProps) => {
const [loading, setLoading] = useState(false)
const [configs, setConfigs] = useState<ComponentConfig[]>([])
const [showJsonModal, setShowJsonModal] = useState(false)
const configDataRef = useRef<Record<string, any>>({})
const abortControllerRef = useRef<AbortController | null>(null)

Expand Down Expand Up @@ -118,6 +119,12 @@ export const PluginConfig = memo(({ open, name, type, onClose }: PluginConfigPro
}
}, [name, type])

const handleCopyConfig = useCallback(() => {
const config = JSON.stringify(configDataRef.current, null, 2)
navigator.clipboard.writeText(config)
toast.success('配置已复制到剪贴板')
}, [])

const renderContent = useMemo(() => {
if (!open) return null
if (loading) return <LoadingState />
Expand All @@ -139,69 +146,127 @@ export const PluginConfig = memo(({ open, name, type, onClose }: PluginConfigPro
if (!open) return null

return (
<Modal
isOpen={open}
onOpenChange={onClose}
size="4xl"
scrollBehavior="inside"
classNames={MODAL_CLASS_NAMES}
>
<ModalContent className="max-h-[85vh]">
<ModalHeader className="shrink-0">
<div className="flex items-center py-1 px-1">
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 flex items-center justify-center rounded-lg bg-blue-50/80 dark:bg-blue-900/20 transition-colors">
<IoSettingsOutline className="text-base text-blue-600/90 dark:text-blue-400" />
<>
<Modal
isOpen={open}
onOpenChange={onClose}
size="4xl"
scrollBehavior="inside"
classNames={MODAL_CLASS_NAMES}
>
<ModalContent className="max-h-[85vh]">
<ModalHeader className="shrink-0">
<div className="flex items-center py-1 px-1">
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 flex items-center justify-center rounded-lg bg-blue-50/80 dark:bg-blue-900/20 transition-colors">
<IoSettingsOutline className="text-base text-blue-600/90 dark:text-blue-400" />
</div>
<div>
<h2 className="text-[15px] font-medium text-gray-900 dark:text-gray-100 leading-[18px]">
{name}
</h2>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 leading-[14px]">
插件配置与管理
</p>
</div>
</div>
<div>
<h2 className="text-[15px] font-medium text-gray-900 dark:text-gray-100 leading-[18px]">
{name}
</h2>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 leading-[14px]">
插件配置与管理
</p>
</div>
</ModalHeader>
<ModalBody className="flex-1 overflow-auto">
<div className="h-[480px] py-5">{renderContent}</div>
</ModalBody>
<ModalFooter className="shrink-0 py-3">
<div className="flex justify-end gap-2">
<Button
color="default"
variant="bordered"
size="md"
onPress={() => setShowJsonModal(true)}
className={`${BUTTON_COMMON_STYLES} border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800`}
startContent={<VscJson className="text-lg" />}
>
打印配置
</Button>
<Button
color="default"
variant="bordered"
size="md"
onPress={onClose}
className={`${BUTTON_COMMON_STYLES} border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800`}
>
取消
</Button>
<Button
type="submit"
form="plugin-config-form"
color="primary"
variant="flat"
size="md"
isDisabled={!configs.length}
className={`${BUTTON_COMMON_STYLES} bg-blue-50 hover:bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:hover:bg-blue-900/30 dark:text-blue-400`}
>
保存
</Button>
</div>
</ModalFooter>
</ModalContent>
</Modal>

<Modal
isOpen={showJsonModal}
onOpenChange={() => setShowJsonModal(false)}
size="2xl"
scrollBehavior="inside"
classNames={MODAL_CLASS_NAMES}
>
<ModalContent>
<ModalHeader className="shrink-0">
<div className="flex items-center py-1 px-1">
<div className="flex items-center gap-2.5">
<div className="w-7 h-7 flex items-center justify-center rounded-lg bg-blue-50/80 dark:bg-blue-900/20 transition-colors">
<VscJson className="text-base text-blue-600/90 dark:text-blue-400" />
</div>
<div>
<h2 className="text-[15px] font-medium text-gray-900 dark:text-gray-100 leading-[18px]">
配置详情
</h2>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 leading-[14px]">
当前插件的配置信息
</p>
</div>
</div>
</div>
</div>
</ModalHeader>
<ModalBody className="flex-1 overflow-auto">
<div className="h-[480px] py-5">{renderContent}</div>
</ModalBody>
<ModalFooter className="shrink-0 py-3">
<div className="flex justify-end gap-2">
<Button
color="default"
variant="bordered"
size="md"
onPress={() => console.log('当前配置值:', getValues())}
className={`${BUTTON_COMMON_STYLES} border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800`}
startContent={<VscJson className="text-lg" />}
>
打印配置
</Button>
<Button
color="default"
variant="bordered"
size="md"
onPress={onClose}
className={`${BUTTON_COMMON_STYLES} border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800`}
>
取消
</Button>
<Button
type="submit"
form="plugin-config-form"
color="primary"
variant="flat"
size="md"
isDisabled={!configs.length}
className={`${BUTTON_COMMON_STYLES} bg-blue-50 hover:bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:hover:bg-blue-900/30 dark:text-blue-400`}
>
保存
</Button>
</div>
</ModalFooter>
</ModalContent>
</Modal>
</ModalHeader>
<ModalBody>
<pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg overflow-auto text-sm font-mono">
{JSON.stringify(configDataRef.current, null, 2)}
</pre>
</ModalBody>
<ModalFooter>
<div className="flex justify-end gap-2">
<Button
color="default"
variant="bordered"
size="md"
onPress={handleCopyConfig}
className={`${BUTTON_COMMON_STYLES} border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800`}
startContent={<VscCopy className="text-lg" />}
>
复制
</Button>
<Button
color="primary"
variant="flat"
size="md"
onPress={() => setShowJsonModal(false)}
className={`${BUTTON_COMMON_STYLES} bg-blue-50 hover:bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:hover:bg-blue-900/30 dark:text-blue-400`}
>
关闭
</Button>
</div>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}, (prev, next) => prev.open === next.open && prev.name === next.name && prev.type === next.type)

0 comments on commit ba5c088

Please sign in to comment.