优化移动模式下体验

This commit is contained in:
tianyaxiang 2025-02-01 16:57:26 +08:00
parent 57ebc424c4
commit d228a65286

View File

@ -15,7 +15,7 @@ import { MarkdownToolbar } from './components/MarkdownToolbar'
import { type PreviewSize } from './constants' import { type PreviewSize } from './constants'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { WechatStylePicker } from '@/components/template/WechatStylePicker' import { WechatStylePicker } from '@/components/template/WechatStylePicker'
import { Copy, Clock, Type } from 'lucide-react' import { Copy, Clock, Type, Trash2 } from 'lucide-react'
// 计算阅读时间假设每分钟阅读300字 // 计算阅读时间假设每分钟阅读300字
const calculateReadingTime = (text: string): string => { const calculateReadingTime = (text: string): string => {
@ -395,6 +395,19 @@ export default function WechatEditor() {
const isScrolling = useRef<boolean>(false) const isScrolling = useRef<boolean>(false)
// 清除编辑器内容
const handleClear = useCallback(() => {
if (window.confirm('确定要清除所有内容吗?')) {
setValue('')
handleEditorChange('')
toast({
title: "已清除",
description: "编辑器内容已清除",
duration: 2000
})
}
}, [handleEditorChange, toast])
return ( return (
<div className="h-screen flex flex-col overflow-hidden"> <div className="h-screen flex flex-col overflow-hidden">
<div className="hidden sm:block"> <div className="hidden sm:block">
@ -426,13 +439,23 @@ export default function WechatEditor() {
onSelect={handleTemplateSelect} onSelect={handleTemplateSelect}
/> />
</div> </div>
<button <div className="flex items-center gap-2">
onClick={handleCopy} <button
className="flex items-center justify-center gap-1 px-2 py-1 rounded-md text-xs text-primary hover:bg-muted transition-colors" onClick={handleClear}
> className="flex items-center justify-center gap-1 px-2 py-1 rounded-md text-xs text-destructive hover:bg-muted transition-colors"
<Copy className="h-3.5 w-3.5" /> title="清除内容"
>
</button> <Trash2 className="h-3.5 w-3.5" />
</button>
<button
onClick={handleCopy}
className="flex items-center justify-center gap-1 px-2 py-1 rounded-md text-xs text-primary hover:bg-muted transition-colors"
>
<Copy className="h-3.5 w-3.5" />
</button>
</div>
</div> </div>
<Tabs defaultValue="editor" className="flex-1 flex flex-col"> <Tabs defaultValue="editor" className="flex-1 flex flex-col">
<TabsList className="grid w-full grid-cols-2"> <TabsList className="grid w-full grid-cols-2">