xiadongliang/SortMeow
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stage

Browse Source
This commit is contained in:
夏东亮
2026-07-23 16:03:29 +08:00
parent 9f313a54b1
commit 44a7e48c60
12 changed files with 194 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/History.tsx
+16 -6
View File
@@ -1,10 +1,10 @@
import { useState, useEffect } from 'preact/hooks'
import { message } from '../utils/toast'
import Pagination from './Pagination'
import Modal from './Modal'
import ImagePreview from './ImagePreview'
import { message } from '../utils/toast'
import type { HistoryItem } from '../preact'
const formatDate = (timestamp: number) => {
const date = new Date(timestamp * 1000)
return date.toLocaleString('zh-CN', {
@@ -104,7 +104,7 @@ const History = () => {
{historyList.map((item: HistoryItem) =>
<div key={item.id} class="history-card">
<div class="card-left">
<img src="/images/0012.jpg" alt="" />
<ImagePreview filename={item.img} />
</div>
<div class="card-right">
<div class="right-top">
@@ -122,9 +122,19 @@ const History = () => {
</div>
</div>)
}
<div class="history-pagination">
<Pagination page={page} pagesize={pageSize} total={total} onChange={handlePageChange} />
</div>
{historyList.length ?
<div class="history-pagination">
<Pagination page={page} pagesize={pageSize} total={total} onChange={handlePageChange} />
</div> : null
}
{!historyList.length ?
<div class="history-none">
<svg viewBox="0 0 24 24" fill="none" stroke="#c0c0c0" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"/>
</svg>
<p>暂无记录</p>
</div> : null
}
</div>
<Modal open={showDelete} title="信息" onClick={handleDeleteOk} onClose={handleDeleteClose}>
<p>确定要删除当前记录？</p>
frontend/src/components/ImagePreview.tsx
+27
View File
@@ -0,0 +1,27 @@
import { useState, useEffect } from 'preact/hooks'
interface Props {
filename: string
class?: string
id?: string
}
const ImagePreview = ({ filename, ...props }: Props) => {
const [src, setSrc] = useState<string>('')
useEffect(() => {
const loadImage = async () => {
const result = await (window as any).go.main.App.GetImage(filename)
if (result.code === 0) {
setSrc(result.data)
}
}
loadImage()
}, [filename])
if (!src) return <div {...props} />
return <img src={src} {...props} />
}
export default ImagePreview
frontend/src/components/Main.tsx
+45 -6
View File
@@ -1,7 +1,7 @@
import { useState, useRef } from 'preact/hooks'
import { message } from '../utils/toast'
import type { DetectResult } from '../preact'
import ImagePreview from './ImagePreview'
import { message } from '../utils/toast'
const Main = () => {
const fileInputRef = useRef<HTMLInputElement>(null)
@@ -11,14 +11,53 @@ const Main = () => {
const handleUploadClick = () => fileInputRef.current?.click()
function loadImage(file: File): Promise<HTMLImageElement> {
return new Promise((resolve) => {
const img = new Image()
img.onload = () => resolve(img)
img.src = URL.createObjectURL(file)
})
}
const resizeImage = async(file: File, maxWidth = 224): Promise<File> => {
const img = await loadImage(file)
if (img.width <= maxWidth) {
return file
}
const canvas = document.createElement('canvas')
const ratio = maxWidth / img.width
canvas.width = maxWidth
canvas.height = Math.round(img.height * ratio)
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
ctx.imageSmoothingEnabled = true
ctx.imageSmoothingQuality = 'high'
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
return new Promise((resolve) => {
canvas.toBlob((blob: Blob | null) => {
if (!blob) {
resolve(file)
return
}
resolve(new File([blob], file.name, { type: file.type }))
}, file.type, 0.9)
})
}
const handleFileChange = (e: Event) => {
console.log('handleFileChange')
const target = e.target as HTMLInputElement
const file = target.files?.[0]
if (file) {
console.log('文件大小:', file.size / 1024)
const reader = new FileReader()
reader.onload = async function() {
const arrayBuffer = reader.result as ArrayBuffer
const processedFile = await resizeImage(file, 224)
const arrayBuffer = await processedFile.arrayBuffer()
const uint8Array = new Uint8Array(arrayBuffer)
const result = await (window as any).go.main.App.UploadImage(
@@ -94,7 +133,7 @@ const Main = () => {
>
{fileSrc.length > 0 && step == 1 ?
<div id="previewContent">
<img src={`/images/${fileSrc}`} id="previewImage" />
<ImagePreview filename={fileSrc} id="previewImage" />
<button onClick={handleRemovePhoto}>
❌ 移除照片
</button>
@@ -147,13 +186,13 @@ const Main = () => {
</div>
<div class={`result${step != 3 ? ' hidden' : ''}`}>
<div class="result-complete">
<svg viewBox="0 0 24 24" fill="currentColor">
<svg viewBox="0 0 24 24" fill="#00b740ff">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
<h2>完成！</h2>
</div>
<div class="result-main">
<img />
<ImagePreview filename={fileSrc} />
<div class="result-word">
<div>
<h3>{detectResult?.name}</h3>
frontend/src/components/Navbar.tsx
+18 -6
View File
@@ -1,23 +1,35 @@
export const Navbar = () => {
const Navbar = () => {
const svgPath = "M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-4.5 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm9 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-9.5 3.5c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5zm11 0c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5zM12 18c-2.21 0-4 1.79-4 4h8c0-2.21-1.79-4-4-4z"
const handleClick = () => window.open('https://git.leonstack.com/owner/Collage-Images', '_blank')
const handleNavColor = (e: Event) => {
const current = e.currentTarget as HTMLElement
const parent = current.parentElement
if (parent) {
parent.querySelectorAll('a').forEach(a => a.classList.remove('active'))
}
current.classList.add('active')
}
return (
<nav class="app-navbar animate-fade-in">
<nav class="app-navbar">
<div class="navbar-container">
<div class="container-left">
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
<path d={svgPath} />
</svg>
<span class="font-heading font-semibold text-xl text-text">分类喵</span>
<span>分类<span>喵</span></span>
</div>
<div class="container-right">
<a href="/">主页</a>
<a href="/history">历史记录</a>
<a href="/" onClick={handleNavColor}>主页</a>
<a href="/history" onClick={handleNavColor}>历史记录</a>
<button onClick={handleClick}>查看代码</button>
</div>
</div>
</nav>
)
}
}
export default Navbar