frontend finishded

frontend/src/components/History.tsx

@@ -1,6 +1,9 @@
 import { useState, useEffect } from 'preact/hooks'
 import { message } from '../utils/toast'
 import Pagination from './Pagination'
+import Modal from './Modal'
+import type { HistoryItem } from '../preact'
+
 
 const formatDate = (timestamp: number) => {
     const date = new Date(timestamp * 1000)
@@ -14,20 +17,14 @@ const formatDate = (timestamp: number) => {
     })
 }
 
-interface IHistoryItem {
-    id: number
-    img: string
-    breed: number
-    date: number
-    name: string
-    brief: string
-}
-
 const History = () => {
     const [page, setPage] = useState<number>(1)
     const pageSize = 5
     const [total, setTotal] = useState<number>(50)
-    const [historyList, setHistoryList] = useState<IHistoryItem[]>([])
+    const [historyList, setHistoryList] = useState<HistoryItem[]>([])
+    const [showDelete, setShowDelete] = useState<boolean>(false)
+    const [currentId, setCurrentId] = useState<number | null>(null)
+    const [showClear, setShowClear] = useState<boolean>(false)
 
     useEffect(() => {
         if (!(window as any).go?.main?.App?.GetHistory) {
@@ -52,46 +49,90 @@ const History = () => {
         fetchData(page)
     }
 
-    const handleDelete = async(id: number) => {
-        const result = await (window as any).go.main.App.DeleteOneHistory(id)
+    const handleShowDelete = (id: number) => {
+        setCurrentId(id)
+        setShowDelete(true)
+    }
+
+    const handleDeleteOk = async() => {
+        setShowDelete(false)
+        if (!currentId) {
+            message.error('currentId为空')
+            return
+        }
+        const result = await (window as any).go.main.App.DeleteOneHistory(currentId)
         if (result.code === 0) {
             message.success('删除成功')
+            setCurrentId(null)
             fetchData(page)
         } else if (result.code === 1) {
             message.error(result.message)
         }
     }
 
+    const handleDeleteClose = () => {
+        setShowDelete(false)
+        setCurrentId(null)
+    }
+
+    const handleShowModal = () => setShowClear(true)
+
+    const handleClearOk = async() => {
+        setShowClear(false)
+        const result = await (window as any).go.main.App.ClearHistory()
+        if (result.code === 0) {
+            message.success('已清空历史')
+            setCurrentId(null)
+            fetchData(page)
+        } else if (result.code === 1) {
+            message.error(result.message)
+        }
+    }
+
+    const handleClearClose = () => setShowClear(false)
+
     return (
-        <div class="app-history">
-            <div class="history-clear">
-                <a>清除全部</a>
-            </div>
-            {historyList.map((item: IHistoryItem) =>
-                <div key={item.id} class="history-card">
-                    <div class="card-left">
-                        <img src="../assets/images/0012.jpg" />
-                    </div>
-                    <div class="card-right">
-                        <div class="right-top">
-                            <h3>{item.name}</h3>
-                            <div class="card-actions">
-                                <span>{formatDate(item.date)}</span>
-                                <button onClick={() => handleDelete(item.id)} title="删除">
-                                    ×
-                                </button>
+        <>
+            <div class="app-history">
+                <div class="history-clear">
+                    <button onClick={handleShowModal} title="清空历史">
+                        <svg class="icon" viewBox="0 0 24 24" fill="#616569ff" width="16" height="16">
+                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+                        </svg>
+                    </button>
+                </div>
+                {historyList.map((item: HistoryItem) =>
+                    <div key={item.id} class="history-card">
+                        <div class="card-left">
+                            <img src="/images/0012.jpg" alt="" />
+                        </div>
+                        <div class="card-right">
+                            <div class="right-top">
+                                <h3>{item.name}</h3>
+                                <div class="card-actions">
+                                    <span>{formatDate(item.date)}</span>
+                                    <button onClick={() => handleShowDelete(item.id)} title="删除">
+                                        ×
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="right-overview">
+                                {item.brief}
                             </div>
                         </div>
-                        <div class="right-overview">
-                            {item.brief}
-                        </div>
-                    </div>
-                </div>)
-            }
-            <div class="history-pagination">
-                <Pagination page={page} pagesize={pageSize} total={total} onChange={handlePageChange} />
+                    </div>)
+                }
+                <div class="history-pagination">
+                    <Pagination page={page} pagesize={pageSize} total={total} onChange={handlePageChange} />
+                </div>
             </div>
-        </div>
+            <Modal open={showDelete} title="信息" onClick={handleDeleteOk} onClose={handleDeleteClose}>
+                <p>确定要删除当前记录？</p>
+            </Modal>
+            <Modal open={showClear} title="信息" onClick={handleClearOk} onClose={handleClearClose}>
+                <p>确定要删除全部记录？</p>
+            </Modal>
+        </>
     )
 }
 

frontend/src/components/Main.tsx

@@ -1,24 +1,18 @@
 import { useState, useRef } from 'preact/hooks'
 import { message } from '../utils/toast'
+import type { DetectResult } from '../preact'
 
-interface IDetectResult {
-    id: number
-    code: string
-    name: number
-    brief: string
-    confidence_level: number
-}
 
 const Main = () => {
     const fileInputRef = useRef<HTMLInputElement>(null)
-    const [fileName, setFileName] = useState<string>('')
     const [fileSrc, setFileSrc] = useState<string>('')
     const [step, setStep] = useState<number>(0)
-    const [detectResult, setDetectResult] = useState<IDetectResult | null>(null)
+    const [detectResult, setDetectResult] = useState<DetectResult | null>(null)
 
     const handleUploadClick = () => fileInputRef.current?.click()
 
     const handleFileChange = (e: Event) => {
+        console.log('handleFileChange')
         const target = e.target as HTMLInputElement
         const file = target.files?.[0]
         if (file) {
@@ -31,15 +25,11 @@ const Main = () => {
                     Array.from(uint8Array),
                     file.name
                 )
-
                 if (result.code === 0) {
-                    setFileName(result.data)
-
-                    const imgResult = await (window as any).go.main.App.GetImage(result.data)
-                    if (imgResult.code === 0) {
-                        setFileSrc(imgResult.data)
-                        setStep(1)
-                    }
+                    setFileSrc(result.data)
+                    setStep(1)
+                } else if (result.code === 1) {
+                    message.error(result.message)
                 }
             }
             reader.readAsArrayBuffer(file)
@@ -63,7 +53,7 @@ const Main = () => {
         setStep(2)
 
         setTimeout(async() => {
-            const result = await (window as any).go.main.App.Detect(fileName)
+            const result = await (window as any).go.main.App.Detect(fileSrc)
             if (result.code === 0) {
                 setDetectResult(result.data)
                 setStep(3)
@@ -104,7 +94,7 @@ const Main = () => {
                     >
                         {fileSrc.length > 0 && step == 1 ?
                             <div id="previewContent">
-                                <img src={fileSrc} id="previewImage" />
+                                <img src={`/images/${fileSrc}`} id="previewImage" />
                                 <button onClick={handleRemovePhoto}>
                                     ❌ 移除照片
                                 </button>

frontend/src/components/Modal.tsx

@@ -0,0 +1,41 @@
+import type { ModalProps } from '../preact'
+
+const Modal = ({ open, title, onClick, onClose, children }: ModalProps) => {
+    const handleClose = () => {
+        onClose?.()
+    }
+
+    const handleConfirm = () => {
+        onClick?.()
+        handleClose()
+    }
+
+    const handleMaskClick = (e: MouseEvent) => {
+        if (e.target === e.currentTarget) {
+            handleClose()
+        }
+    }
+
+    return (
+        <>
+            {open ? 
+                <>
+                    <div class="app-modal" onClick={handleMaskClick}>
+                        <div class="title">
+                            <h3>{title}</h3>
+                            <span onClick={handleClose}>×</span>
+                        </div>
+                        {children}
+                        <div class="bottom">
+                            <button onClick={handleClose}>取消</button>
+                            <button onClick={handleConfirm}>确定</button>
+                        </div>
+                    </div>
+                    <div class="app-mask" onClick={handleMaskClick}></div>
+                </> : null
+            }
+        </>
+    )
+}
+
+export default Modal

frontend/src/components/Pagination.tsx

@@ -1,18 +1,13 @@
 import { useState, useEffect } from 'preact/hooks'
+import type { PaginationProps } from '../preact' 
 
-interface IPagination {
-    total: number
-    onChange: (page: number) => void
-    page: number
-    pagesize: number
-}
 
 const Pagination = ({
     total,
     onChange,
     page,
     pagesize,
-}: IPagination) => {
+}: PaginationProps) => {
     const [value, setValue] = useState<string>('1')
     const [num, setNum] = useState<number>(1)
     const [seqNums, setSeqNums] = useState<[number, number][]>([])