m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-24 10:51:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #107 from wen-templari/feature/repair-system-updates

Browse source 
Add comprehensive repair system functionality
This commit is contained in:
clas 2025-09-30 00:00:12 +08:00 committed by GitHub
commit 9cf31ebcc7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 856 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/header/HeaderNavigation.tsx
View file

@ -83,6 +83,18 @@ export default function App() {
</Link>
</NavbarMenuItem>
))}
<NavbarItem>
<Link
color="foreground"
href="https://github.com/nbtca"
target="_blank"
rel="noopener noreferrer"
className="flex items-center"
>
Github
<img src="/src/pages/_assets/github-mark.svg" alt="GitHub" className="w-6 h-6" />
</Link>
</NavbarItem>
</NavbarMenu>
</Navbar>
)

4
src/components/header/RepairHeader.astro
View file

@ -27,7 +27,9 @@ makeLogtoClient().getIdTokenClaims().then((claims) => {
<div class="h-full flex items-center justify-between text-lg max-w-[1024px] mx-auto px-[22px]">
<span id="repair-header" class="font-semibold select-none cursor-default">维修</span>
<div class="flex items-center">
<div class="flex items-center gap-2 mr-4 text-xs text-gray-400">
<div class="flex items-center gap-4 mr-4 text-xs text-gray-400 mt-[1px]">
<a class="text-gray-500 hover:text-gray-700 appearance-none cursor-pointer" href="/repair/create-ticket" style="text-decoration:none">预约维修</a>
<a class="text-gray-500 hover:text-gray-700 appearance-none cursor-pointer" href="/repair/history" style="text-decoration:none">维修记录</a>
<a class="hidden text-gray-500 hover:text-gray-700 appearance-none cursor-pointer" id="repair-admin" href="/repair/admin" style="text-decoration:none">维修管理</a>
</div>
<NavigationUser client:load />

131
src/pages/repair/EditRepairModal.tsx Normal file
View file

@ -0,0 +1,131 @@
import { useState, useEffect } from "react"
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, Input, Textarea } from "@heroui/react"
import { saturdayClient } from "../../utils/client"
import { makeLogtoClient } from "../../utils/auth"
import type { components } from "../../types/saturday"
type PublicEvent = components["schemas"]["PublicEvent"]
type UpdateClientEventInputBody = components["schemas"]["UpdateClientEventInputBody"]
interface EditRepairModalProps {
isOpen: boolean
onClose: () => void
event: PublicEvent
onSaved: () => void
}
export default function EditRepairModal({ isOpen, onClose, event, onSaved }: EditRepairModalProps) {
const [loading, setLoading] = useState(false)
const [formData, setFormData] = useState<UpdateClientEventInputBody>({
problem: "",
model: "",
phone: "",
qq: "",
})
useEffect(() => {
if (event) {
setFormData({
problem: event.problem || "",
model: event.model || "",
phone: event.phone || "",
qq: event.qq || "",
})
}
}, [event])
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
setLoading(true)
try {
const logtoToken = await makeLogtoClient().getAccessToken()
const { error } = await saturdayClient.PATCH("/client/events/{EventId}", {
params: {
path: {
EventId: event.eventId,
},
},
headers: {
Authorization: `Bearer ${logtoToken}`,
},
body: formData,
})
if (error) {
throw new Error("Failed to update event")
}
onSaved()
}
catch (err) {
console.error("Error updating event:", err)
// Could add error handling/toast here
}
finally {
setLoading(false)
}
}
const handleClose = () => {
if (!loading) {
onClose()
}
}
return (
<Modal isOpen={isOpen} onClose={handleClose} size="2xl" scrollBehavior="inside">
<ModalContent>
<form onSubmit={handleSubmit}>
<ModalHeader className="flex flex-col gap-1">
编辑维修预约 #{event?.eventId}
</ModalHeader>
<ModalBody>
<div className="flex flex-col gap-4">
<Textarea
label="问题描述"
placeholder="告诉我们你遇到的问题"
isRequired
value={formData.problem}
onChange={e => setFormData({ ...formData, problem: e.target.value })}
/>
<Input
label="设备型号"
placeholder="你的设备型号"
value={formData.model || ""}
onChange={e => setFormData({ ...formData, model: e.target.value })}
/>
<Input
label="电话号码"
placeholder="必填"
isRequired
type="tel"
maxLength={11}
value={formData.phone}
onChange={e => setFormData({ ...formData, phone: e.target.value })}
/>
<Input
label="QQ号码"
placeholder="你的QQ号"
value={formData.qq || ""}
onChange={e => setFormData({ ...formData, qq: e.target.value })}
/>
</div>
</ModalBody>
<ModalFooter>
<Button variant="light" onPress={handleClose} isDisabled={loading}>
取消
</Button>
<Button color="primary" type="submit" isLoading={loading}>
保存更改
</Button>
</ModalFooter>
</form>
</ModalContent>
</Modal>
)
}

2
src/pages/repair/EventDetail.tsx
View file

@ -199,7 +199,7 @@ const EventDetail = forwardRef<EventDetailRef, {
</div>
</div>
<div>
{props.children(event)}
{props.children && props.children(event)}
</div>
</section>
)

54
src/pages/repair/RepairHistoryCard.tsx Normal file
View file

@ -0,0 +1,54 @@
import { Card, CardBody, Chip } from "@heroui/react"
import { EventStatusChip } from "./EventDetail"
import dayjs from "dayjs"
import type { components } from "../../types/saturday"
type PublicEvent = components["schemas"]["PublicEvent"]
interface RepairHistoryCardProps {
event: PublicEvent
onViewDetail: (event: PublicEvent) => void
}
export default function RepairHistoryCard({ event, onViewDetail }: RepairHistoryCardProps) {
const handleCardClick = () => {
onViewDetail(event)
}
return (
<Card
className="w-full cursor-pointer hover:bg-gray-50 transition shadow"
isPressable
onPress={handleCardClick}
>
<CardBody className="pb-2">
<div className="flex justify-between items-start mb-2">
<div className="flex items-center gap-2">
<span className="text-sm text-gray-500">#{event.eventId}</span>
<EventStatusChip status={event.status} size="sm" />
{event.size && <Chip size="sm">{event.size}</Chip>}
</div>
<span className="text-xs text-gray-400">
{dayjs(event.gmtCreate).format("YYYY-MM-DD")}
</span>
</div>
<div className="mb-2">
<p className="text-sm font-medium line-clamp-2">{event.problem}</p>
{event.model && (
<p className="text-xs text-gray-500 mt-1">型号: {event.model}</p>
)}
</div>
<div className="text-xs text-gray-400">
创建于 {dayjs(event.gmtCreate).format("YYYY-MM-DD HH:mm")}
{event.gmtModified !== event.gmtCreate && (
<span className="ml-2">
更新于 {dayjs(event.gmtModified).format("MM-DD HH:mm")}
</span>
)}
</div>
</CardBody>
</Card>
)
}

84
src/pages/repair/RepairHistoryPage.tsx Normal file
View file

@ -0,0 +1,84 @@
import { useState, useEffect } from "react"
import { Button, Spinner } from "@heroui/react"
import { makeLogtoClient } from "../../utils/auth"
import UserRepairHistory from "./UserRepairHistory"
import type { UserInfoResponse } from "@logto/browser"
export default function RepairHistoryPage() {
const [userInfo, setUserInfo] = useState<UserInfoResponse | null>(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
checkAuthStatus()
}, [])
const checkAuthStatus = async () => {
try {
const logtoClient = makeLogtoClient()
const authenticated = await logtoClient.isAuthenticated()
if (authenticated) {
const claims = await logtoClient.getIdTokenClaims()
setUserInfo(claims)
}
else {
// Redirect to login if not authenticated
window.location.href = "/repair/login-hint?redirectUrl=/repair/history"
}
}
catch (error) {
console.error("Error checking auth status:", error)
// Redirect to login on error
window.location.href = "/repair/login-hint?redirectUrl=/repair/history"
}
finally {
setLoading(false)
}
}
const handleLogin = () => {
makeLogtoClient().signIn({
redirectUri: import.meta.env.PUBLIC_LOGTO_CALLBACK_URL,
postRedirectUri: "/repair/history",
})
}
const handleCreateNew = () => {
window.location.href = "/repair/create-ticket"
}
if (loading) {
return (
<div className="container mx-auto pt-16 pb-20">
<div className="flex flex-col items-center justify-center">
<Spinner size="lg" />
</div>
</div>
)
}
if (!userInfo) {
return (
<div className="container mx-auto pt-16 pb-20">
<div className="flex flex-col items-center justify-center">
<p className="text-gray-500 mb-4">请先登录以查看维修历史</p>
<Button color="primary" onPress={handleLogin}>
登录
</Button>
</div>
</div>
)
}
return (
<div className="container mx-auto pt-6 pb-20">
{/* History content */}
<div className="section-content">
<UserRepairHistory
onLogin={handleLogin}
onCreateNew={handleCreateNew}
/>
</div>
</div>
)
}

229
src/pages/repair/RepairLandingSection.tsx Normal file
View file

@ -0,0 +1,229 @@
import { useState, useEffect } from "react"
import { Button, Spinner, Card, CardBody, CardFooter } from "@heroui/react"
import { makeLogtoClient } from "../../utils/auth"
import { saturdayClient } from "../../utils/client"
import RepairHistoryCard from "./RepairHistoryCard"
import EditRepairModal from "./EditRepairModal"
import type { UserInfoResponse } from "@logto/browser"
import type { components } from "../../types/saturday"
// eslint-disable-next-line @cspell/spellchecker
import hayasaka from "../_assets/hayasaka.jpg"
type PublicEvent = components["schemas"]["PublicEvent"]
export default function RepairLandingSection() {
const [userInfo, setUserInfo] = useState<UserInfoResponse | null>(null)
const [loading, setLoading] = useState(true)
const [recentEvents, setRecentEvents] = useState<PublicEvent[]>([])
const [selectedEvent, setSelectedEvent] = useState<PublicEvent | null>(null)
const [isEditOpen, setIsEditOpen] = useState(false)
useEffect(() => {
checkAuthStatusAndFetchEvents()
}, [])
const checkAuthStatusAndFetchEvents = async () => {
try {
const logtoClient = makeLogtoClient()
const authenticated = await logtoClient.isAuthenticated()
if (authenticated) {
const claims = await logtoClient.getIdTokenClaims()
setUserInfo(claims)
await fetchRecentEvents()
}
}
catch (error) {
console.error("Error checking auth status:", error)
}
finally {
setLoading(false)
}
}
const fetchRecentEvents = async () => {
try {
const logtoToken = await makeLogtoClient().getAccessToken()
const { data } = await saturdayClient.GET("/client/events", {
headers: {
Authorization: `Bearer ${logtoToken}`,
},
params: {
query: {
limit: 10,
offset: 0,
},
},
})
if (data) {
// Filter for unfinished events and take only the first 3
const unfinishedEvents = (data as unknown as PublicEvent[]).slice(0, 3)
setRecentEvents(unfinishedEvents)
}
}
catch (error) {
console.error("Error fetching recent events:", error)
}
}
const handleCreateTicketClick = async () => {
const logtoClient = makeLogtoClient()
const createRepairPath = "/repair/create-ticket"
const authenticated = await logtoClient.isAuthenticated()
if (!authenticated) {
window.location.href = `/repair/login-hint?redirectUrl=${createRepairPath}`
return
}
window.location.href = createRepairPath
}
const handleEdit = (event: PublicEvent) => {
setSelectedEvent(event)
setIsEditOpen(true)
}
const handleCancel = async (event: PublicEvent) => {
try {
const logtoToken = await makeLogtoClient().getAccessToken()
await saturdayClient.DELETE("/client/events/{EventId}", {
params: {
path: {
EventId: event.eventId,
},
},
headers: {
Authorization: `Bearer ${logtoToken}`,
},
})
await fetchRecentEvents()
}
catch (error) {
console.error("Error cancelling event:", error)
}
}
const handleViewDetail = (event: PublicEvent) => {
window.location.href = `/repair/ticket-detail?eventId=${event.eventId}`
}
const handleEditSaved = () => {
fetchRecentEvents()
setIsEditOpen(false)
setSelectedEvent(null)
}
const handleViewAllHistory = () => {
window.location.href = "/repair/history"
}
if (loading) {
return (
<div className="container mx-auto pt-16 pb-20">
<div className="flex flex-col items-center justify-center">
<Spinner size="lg" />
</div>
</div>
)
}
return (
<div className="container mx-auto pt-16 pb-20">
{/* Main service section - always shown */}
<div className="flex flex-col items-center justify-center">
{/* eslint-disable-next-line @cspell/spellchecker */}
<img src={hayasaka.src} alt="" className="h-48 md:h-auto md:w-1/2 object-cover" />
<div className="mt-12 text-lg lg:text-2xl font-bold">我们提供免费的电脑维修服务</div>
<div className="mt-4 text-gray-500 text-center lg:text-lg">
<div>
从<strong>清理磁盘</strong>到<strong>加装硬件</strong>再到<strong>环境配置</strong>，
</div>
<div>
我们都帮你搞定。
</div>
</div>
<div className="mt-6">
<Button
className="bg-blue-500 text-white"
radius="full"
onPress={handleCreateTicketClick}
>
进行预约
</Button>
</div>
</div>
{/* Recent events section - only for authenticated users */}
{userInfo && (
<div className="mt-16 section-content">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold">最近的维修</h2>
<Button
color="primary"
variant="flat"
size="sm"
onPress={handleViewAllHistory}
>
查看全部历史
</Button>
</div>
{recentEvents.length > 0
? (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{recentEvents.map(event => (
<RepairHistoryCard
key={event.eventId}
event={event}
onEdit={handleEdit}
onCancel={handleCancel}
onViewDetail={handleViewDetail}
/>
))}
</div>
)
: (
<Card className="w-full">
<CardBody className="text-center py-8">
<p className="text-gray-500">暂无进行中的维修预约</p>
</CardBody>
<CardFooter className="justify-center">
<Button color="primary" onPress={handleCreateTicketClick}>
创建新预约
</Button>
</CardFooter>
</Card>
)}
</div>
)}
{/* Login suggestion for unauthenticated users */}
{/* {!userInfo && (
<div className="mt-16 flex justify-center">
<Alert
className="items-center max-w-md"
endContent={(
<Button color="primary" size="sm" variant="flat" onPress={handleLogin}>
登入
</Button>
)}
>
登入账号来查看和管理你的维修记录
</Alert>
</div>
)} */}
{/* Edit Modal */}
{selectedEvent && (
<EditRepairModal
isOpen={isEditOpen}
onClose={() => setIsEditOpen(false)}
event={selectedEvent}
onSaved={handleEditSaved}
/>
)}
</div>
)
}

208
src/pages/repair/TicketDetail.tsx Normal file
View file

@ -0,0 +1,208 @@
import { useState, useEffect } from "react"
import { Button, Spinner, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@heroui/react"
import { makeLogtoClient } from "../../utils/auth"
import { saturdayClient } from "../../utils/client"
import EventDetail from "./EventDetail"
import EditRepairModal from "./EditRepairModal"
import type { UserInfoResponse } from "@logto/browser"
import type { components } from "../../types/saturday"
type PublicEvent = components["schemas"]["PublicEvent"]
export default function TicketDetail() {
const [userInfo, setUserInfo] = useState<UserInfoResponse | null>(null)
const [loading, setLoading] = useState(true)
const [eventId, setEventId] = useState<number | null>(null)
const [event, setEvent] = useState<PublicEvent | null>(null)
const { isOpen: isEditOpen, onOpen: onEditOpen, onClose: onEditClose } = useDisclosure()
const { isOpen: isCancelOpen, onOpen: onCancelOpen, onClose: onCancelClose } = useDisclosure()
useEffect(() => {
// Get eventId from URL parameters
const urlParams = new URLSearchParams(window.location.search)
const eventIdParam = urlParams.get("eventId")
if (eventIdParam) {
setEventId(parseInt(eventIdParam, 10))
}
checkAuthStatus()
}, [])
const checkAuthStatus = async () => {
try {
const logtoClient = makeLogtoClient()
const authenticated = await logtoClient.isAuthenticated()
if (authenticated) {
const claims = await logtoClient.getIdTokenClaims()
setUserInfo(claims)
}
else {
// Redirect to login if not authenticated
const redirectUrl = `/repair/ticket-detail${window.location.search}`
window.location.href = `/repair/login-hint?redirectUrl=${encodeURIComponent(redirectUrl)}`
}
}
catch (error) {
console.error("Error checking auth status:", error)
// Redirect to login on error
const redirectUrl = `/repair/ticket-detail${window.location.search}`
window.location.href = `/repair/login-hint?redirectUrl=${encodeURIComponent(redirectUrl)}`
}
finally {
setLoading(false)
}
}
const handleBackToHome = () => {
window.location.href = "/repair"
}
const handleEdit = () => {
if (event) {
onEditOpen()
}
}
const handleCancel = () => {
if (event) {
onCancelOpen()
}
}
const confirmCancel = async () => {
if (!event) return
try {
const logtoToken = await makeLogtoClient().getAccessToken()
await saturdayClient.DELETE("/client/events/{EventId}", {
params: {
path: {
EventId: event.eventId,
},
},
headers: {
Authorization: `Bearer ${logtoToken}`,
},
})
// Navigate back to history after cancellation
onCancelClose()
window.location.href = "/repair/history"
}
catch (err) {
console.error("Error cancelling event:", err)
}
}
const handleEditSaved = () => {
onEditClose()
// Refresh the event data
window.location.reload()
}
if (loading) {
return (
<div className="container mx-auto pt-16 pb-20">
<div className="flex flex-col items-center justify-center">
<Spinner size="lg" />
</div>
</div>
)
}
if (!userInfo || !eventId) {
return (
<div className="container mx-auto pt-16 pb-20">
<div className="flex flex-col items-center justify-center">
<p className="text-gray-500 mb-4">
{!userInfo ? "请先登录以查看维修详情" : "无效的维修单ID"}
</p>
<Button color="primary" onPress={handleBackToHome}>
返回首页
</Button>
</div>
</div>
)
}
return (
<div className="container mx-auto pt-6 pb-20">
{/* Event detail content */}
<div className="section-content">
<EventDetail eventId={eventId}>
{(eventData: PublicEvent) => {
// Store the event data for actions
if (eventData && !event) {
setEvent(eventData)
}
const canModify = eventData.status !== "closed" && eventData.status !== "cancelled"
return (
<div className="mt-6 flex flex-col gap-4">
{/* Client Action Buttons */}
{canModify && (
<div className="flex gap-2">
<Button
color="primary"
variant="flat"
onPress={handleEdit}
>
编辑
</Button>
<Button
color="danger"
variant="flat"
onPress={handleCancel}
>
取消预约
</Button>
</div>
)}
</div>
)
}}
</EventDetail>
{/* Edit Modal */}
{event && (
<EditRepairModal
isOpen={isEditOpen}
onClose={onEditClose}
event={event}
onSaved={handleEditSaved}
/>
)}
{/* Cancel Confirmation Modal */}
<Modal isOpen={isCancelOpen} onClose={onCancelClose} size="sm">
<ModalContent>
<ModalHeader>确认取消维修预约</ModalHeader>
<ModalBody>
<p>你确定要取消这个维修预约吗？此操作无法撤销。</p>
{event && (
<div className="mt-2 p-2 bg-gray-50 rounded">
<p className="text-sm font-medium">#{event.eventId}</p>
<p className="text-sm text-gray-600 line-clamp-2">{event.problem}</p>
</div>
)}
</ModalBody>
<ModalFooter>
<Button variant="light" onPress={onCancelClose}>
保留
</Button>
<Button color="danger" onPress={confirmCancel}>
确认取消
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
</div>
)
}

91
src/pages/repair/TicketForm.tsx
View file

@ -1,12 +1,8 @@
import { SITE_URL } from "../../consts"
import { useEffect, useState } from "react"
import { makeLogtoClient } from "../../utils/auth"
import type { UserInfoResponse } from "@logto/browser"
import { Alert, Form, Input, Button, Textarea } from "@heroui/react"
import { saturdayClient } from "../../utils/client"
import type { components } from "../../types/saturday"
import QRCode from "qrcode"
import EventDetail from "./EventDetail"
type TicketFormData = {
model?: string
@ -142,57 +138,9 @@ function TicketForm(props: {
</section>
)
}
type PublicEvent = components["schemas"]["PublicEvent"]
function TicketFormCreated(props: {
event: PublicEvent
}) {
const [svg, setSvg] = useState<string>()
useEffect(() => {
const url = new URL(`/repair/ticket-detail`, SITE_URL)
url.searchParams.append("eventId", props.event.eventId.toString())
QRCode.toString(url.toString()).then((res) => {
setSvg(res)
})
})
return (
<section className="box-border w-full mt-8">
<div className="section-content mb-4">
<Alert hideIcon color="success" variant="faded">
<div className="flex items-center gap-8">
<div className="h-28 lg:h-40 aspect-square">
<div className="h-full" dangerouslySetInnerHTML={{ __html: svg }}></div>
</div>
<div>
<div className="flex items-center gap-2">
<div className="text-brand text-nowrap text-lg lg:text-2xl font-bold">
预约成功
</div>
</div>
<div className="mt-1 text-gray-600 lg:text-lg">
<div>
保存二维码
</div>
<div>
跟踪维修进度
</div>
</div>
</div>
</div>
</Alert>
</div>
<div className="section-content mb-4">
<EventDetail eventId={props.event?.eventId}>
{() => <></>}
</EventDetail>
</div>
</section>
)
}
export default function App() {
const [userInfo, setUserInfo] = useState<UserInfoResponse>()
const [event, setEvent] = useState<PublicEvent | undefined>()
useEffect(() => {
const check = async () => {
@ -206,31 +154,6 @@ export default function App() {
setUserInfo(res)
}
check()
// Check for eventId in URL query parameters
const urlParams = new URLSearchParams(window.location.search)
const eventId = urlParams.get("eventId")
if (eventId) {
// Fetch event data from the eventId
const fetchEvent = async () => {
try {
const { data } = await saturdayClient.GET("/events/{EventId}", {
params: {
path: {
EventId: parseInt(eventId, 10),
},
},
})
if (data) {
setEvent(data as PublicEvent)
}
}
catch (error) {
console.log("Error fetching event:", error)
}
}
fetchEvent()
}
}, [])
const onSubmit = async (formData: TicketFormData) => {
@ -247,13 +170,9 @@ export default function App() {
qq: formData.qq,
},
})
setEvent(data as unknown as PublicEvent)
// Update URL with eventId to persist the ticket status
if (data?.eventId) {
const currentUrl = new URL(window.location.href)
currentUrl.searchParams.set("eventId", data.eventId.toString())
window.history.pushState({}, "", currentUrl.toString())
window.location.href = `/repair/ticket-detail?eventId=${data.eventId}`
}
}
catch (error) {
@ -262,12 +181,6 @@ export default function App() {
}
return (
<>
{
event?.eventId
? <TicketFormCreated event={event}></TicketFormCreated>
: <TicketForm userInfo={userInfo} onSubmit={onSubmit}></TicketForm>
}
</>
<TicketForm userInfo={userInfo} onSubmit={onSubmit}></TicketForm>
)
}

109
src/pages/repair/UserRepairHistory.tsx Normal file
View file

@ -0,0 +1,109 @@
import { useState, useEffect } from "react"
import { Alert, Button, Spinner } from "@heroui/react"
import { saturdayClient } from "../../utils/client"
import { makeLogtoClient } from "../../utils/auth"
import RepairHistoryCard from "./RepairHistoryCard"
import type { components } from "../../types/saturday"
type PublicEvent = components["schemas"]["PublicEvent"]
interface UserRepairHistoryProps {
onCreateNew: () => void
}
export default function UserRepairHistory({ onCreateNew }: UserRepairHistoryProps) {
const [events, setEvents] = useState<PublicEvent[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string>("")
const fetchUserEvents = async () => {
try {
setLoading(true)
const logtoToken = await makeLogtoClient().getAccessToken()
const { data, error: apiError } = await saturdayClient.GET("/client/events", {
headers: {
Authorization: `Bearer ${logtoToken}`,
},
params: {
query: {
limit: 50,
offset: 0,
},
},
})
if (apiError || !data) {
throw new Error("Failed to fetch repair history")
}
setEvents(data || [])
}
catch (err) {
console.error("Error fetching user events:", err)
setError("获取维修记录失败")
}
finally {
setLoading(false)
}
}
useEffect(() => {
fetchUserEvents()
}, [])
const handleViewDetail = (event: PublicEvent) => {
window.location.href = `/repair/ticket-detail?eventId=${event.eventId}`
}
if (loading) {
return (
<div className="flex justify-center items-center py-8">
<Spinner size="lg" />
</div>
)
}
if (error) {
return (
<Alert color="danger" className="mb-4">
{error}
<Button size="sm" color="danger" variant="flat" onPress={fetchUserEvents}>
重试
</Button>
</Alert>
)
}
if (events.length === 0) {
return (
<div className="text-center py-8">
<p className="text-gray-500 mb-4">你还没有任何维修记录</p>
<Button color="primary" onPress={onCreateNew}>
创建第一个维修预约
</Button>
</div>
)
}
return (
<div className="w-full">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold">我的维修记录</h2>
<Button color="primary" onPress={onCreateNew}>
新建预约
</Button>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{events.map(event => (
<RepairHistoryCard
key={event.eventId}
event={event}
onViewDetail={handleViewDetail}
/>
))}
</div>
</div>
)
}

15
src/pages/repair/history.astro Normal file
View file

@ -0,0 +1,15 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro"
import RepairHeader from "../../components/header/RepairHeader.astro"
import RepairHistoryPage from "./RepairHistoryPage.tsx"
---
<BaseLayout primaryTitle="维修历史">
<section class="box-border">
<RepairHeader></RepairHeader>
<!-- Repair history page content -->
<RepairHistoryPage client:only="react"></RepairHistoryPage>
</section>
</BaseLayout>

58
src/pages/repair/index.astro
View file

@ -1,57 +1,18 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro"
import hayasaka from "../_assets/hayasaka.jpg"
import repairDayOnSite from "../_assets/repair_day_on_site.jpeg"
import { Button } from "@heroui/react"
import RepairHeader from "../../components/header/RepairHeader.astro"
import RepairLandingSection from "./RepairLandingSection.tsx"
---
<script>
// @ts-check
import { makeLogtoClient } from "../../utils/auth"
const button = document.getElementById("create-ticket-button")
button.addEventListener("click", async () => {
const logtoClient = makeLogtoClient()
const createRepairPath = "/repair/create-ticket"
const authenticated = await logtoClient.isAuthenticated()
logtoClient.getIdTokenClaims().then((res) => {
console.log(res)
})
if (!authenticated) {
window.location.href = `/repair/login-hint?redirectUrl=${createRepairPath}`
return
}
window.location.href = createRepairPath
})
</script>
<BaseLayout>
<section class="box-border">
<RepairHeader></RepairHeader>
<div class="container mx-auto pt-16 pb-20">
<div class="flex flex-col items-center justify-center">
<img src={hayasaka.src} alt="" class="h-48 md:h-auto md:w-1/2 object-cover" />
<div class="mt-12 text-lg lg:text-2xl font-bold">我们提供免费的电脑维修服务</div>
<div class="mt-4 text-gray-500 text-center lg:text-lg">
<div>
从<strong>清理磁盘</strong>到<strong>加装硬件</strong>再到<strong>环境配置</strong>，
</div>
<div>
我们都帮你搞定。
</div>
</div>
<div class="mt-6">
<Button
id="create-ticket-button"
className="bg-blue-500 text-white"
radius="full"
>进行预约
</Button>
</div>
</div>
</div>
<!-- Dynamic content based on authentication status -->
<RepairLandingSection client:only="react"></RepairLandingSection>
<div class="w-full bg-white pb-24 flex flex-col gap-12">
<div class="component">
<div class="relative h-[521px] sm:h-[396px] md:h-[561px] mt-4 w-full my-0 xs:rounded-2xl overflow-hidden">
@ -75,12 +36,3 @@ import RepairHeader from "../../components/header/RepairHeader.astro"
</div>
</section>
</BaseLayout>
<script>
// @ts-check
import { makeLogtoClient } from "../../utils/auth"
makeLogtoClient().getIdTokenClaims().then((res) => {
console.log(res)
})
</script>

8
src/pages/repair/ticket-detail.astro
View file

@ -1,12 +1,10 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro"
import RepairHeader from "../../components/header/RepairHeader.astro"
import EventDetail from "./EventDetail"
import TicketDetailComponent from "./TicketDetail.tsx"
---
<BaseLayout primaryTitle="Create Ticket">
<BaseLayout primaryTitle="维修详情">
<RepairHeader></RepairHeader>
<div class="section-content">
<EventDetail client:only="react"></EventDetail>
</div>
<TicketDetailComponent client:only="react"></TicketDetailComponent>
</BaseLayout>