Skip to content

Commit

Permalink
Merge pull request #276 from MaaAssistantArknights/dev
Browse files Browse the repository at this point in the history 
Release
  • Loading branch information
@martinwang2002
martinwang2002 authored Apr 5, 2024
2 parents 6165655 + 6172b1d commit 5f34b64
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 151 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
## 2024-04-03

- 修复了因部分作业缺少动作列表而渲染失败的问题
- 修复了点击作业（集）卡片上的按钮时会跳转到详情页的问题
- 修复了作业集编辑器的保存按钮失效的问题
- 优化了一些界面布局

## 2024-04-01

Expand Down
126 changes: 61 additions & 65 deletions src/components/OperationCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Button, Card, Elevation, H4, H5, Icon, Tag } from '@blueprintjs/core'
import { Tooltip2 } from '@blueprintjs/popover2'

import clsx from 'clsx'
import { handleCopyShortCode, handleDownloadJSON } from 'services/operation'

import { ReLink } from 'components/ReLink'
Expand All @@ -19,22 +20,21 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
const { data: levels } = useLevels()

return (
<ReLink search={{ op: operation.id }} className="no-underline">
<Card
interactive={true}
elevation={Elevation.TWO}
className="flex flex-col gap-2"
>
<Card
interactive={true}
elevation={Elevation.TWO}
className="relative flex flex-col gap-2"
>
<ReLink search={{ op: operation.id }} className="block no-underline">
<div className="flex">
<Tooltip2
content={operation.parsedContent.doc.title}
className="grow flex-1 whitespace-nowrap overflow-hidden text-ellipsis"
>
<H4 className="p-0 m-0 whitespace-nowrap overflow-hidden text-ellipsis">
<H4 className="p-0 m-0 mr-20 whitespace-nowrap overflow-hidden text-ellipsis">
{operation.parsedContent.doc.title}
</H4>
</Tooltip2>
<CardActions operation={operation} />
</div>
<div className="flex items-center text-slate-900">
<div className="flex flex-wrap">
Expand Down Expand Up @@ -105,28 +105,30 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
</Tooltip2>
</div>
</div>
</Card>
</ReLink>
</ReLink>

<CardActions className="absolute top-4 right-4" operation={operation} />
</Card>
)
}

export const OperationCard = ({ operation }: { operation: Operation }) => {
const { data: levels } = useLevels()

return (
<ReLink
search={{ op: operation.id }}
className="block mb-4 sm:mb-2 last:mb-0 no-underline"
<Card
interactive={true}
elevation={Elevation.TWO}
className="relative mb-4 sm:mb-2 last:mb-0"
>
<Card interactive={true} elevation={Elevation.TWO}>
<ReLink search={{ op: operation.id }} className="block no-underline">
<div className="flex flex-wrap mb-4 sm:mb-2">
{/* title */}
<div className="flex flex-col gap-3">
<div className="flex gap-2">
<H4 className="inline-block pb-1 border-b-2 border-zinc-200 border-solid mb-2">
{operation.parsedContent.doc.title}
</H4>
<CardActions operation={operation} />
</div>
<H5 className="flex items-center text-slate-900 -mt-3">
<EDifficultyLevel
Expand All @@ -141,48 +143,44 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
</H5>
</div>

<div className="lg:flex-1 hidden" />
<div className="grow basis-full xl:basis-0" />

{/* meta */}
<div className="flex flex-col flex-1 gap-y-1.5 gap-x-4">
<div className="flex flex-wrap sm:justify-end items-center gap-x-4 gap-y-1 text-zinc-500">
<div className="flex items-center gap-1.5">
<Icon icon="star" />
<OperationRating
className="text-sm"
operation={operation}
layout="horizontal"
/>
<div className="flex flex-wrap items-start gap-x-4 gap-y-1 text-zinc-500">
<div className="flex items-center gap-1.5">
<Icon icon="star" />
<OperationRating
className="text-sm"
operation={operation}
layout="horizontal"
/>
</div>

<Tooltip2 placement="top" content={`访问量：${operation.views}`}>
<div>
<Icon icon="eye-open" className="mr-1.5" />
<span>{operation.views}</span>
</div>
</Tooltip2>

<Tooltip2 placement="top" content={`访问量：${operation.views}`}>
<div>
<Icon icon="eye-open" className="mr-1.5" />
<span>{operation.views}</span>
</div>
</Tooltip2>
<div>
<Icon icon="time" className="mr-1.5" />
<RelativeTime
Tooltip2Props={{ placement: 'top' }}
moment={operation.uploadTime}
/>
</div>

<Tooltip2 placement="top" content={`作者：${operation.uploader}`}>
<div>
<Icon icon="time" className="mr-1.5" />
<RelativeTime
Tooltip2Props={{ placement: 'top' }}
moment={operation.uploadTime}
/>
<Icon icon="user" className="mr-1.5" />
<span>{operation.uploader}</span>
</div>
</div>
<div className="text-zinc-500 self-end">
<Tooltip2 placement="top" content={`作者：${operation.uploader}`}>
<div>
<Icon icon="user" className="mr-1.5" />
<span>{operation.uploader}</span>
</div>
</Tooltip2>
</div>
</Tooltip2>
</div>
</div>
<div className="flex md:flex-row flex-col gap-4">
<div className="text-gray-700 leading-normal md:w-1/2">
{/* <div className="text-sm text-zinc-600 mb-2 font-bold">作业描述</div> */}
<Paragraphs
content={operation.parsedContent.doc.details}
limitHeight={21 * 13.5} // 13 lines, 21px per line; the extra 0.5 line is intentional so the `mask` effect is obvious
Expand All @@ -195,8 +193,13 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
<OperatorTags operation={operation} />
</div>
</div>
</Card>
</ReLink>
</ReLink>

<CardActions
className="absolute top-4 xl:top-12 right-[18px]"
operation={operation}
/>
</Card>
)
}

Expand Down Expand Up @@ -230,16 +233,15 @@ const OperatorTags = ({ operation }: { operation: Operation }) => {
)
}

const CardActions = ({ operation }: { operation: Operation }) => {
const CardActions = ({
className,
operation,
}: {
className?: string
operation: Operation
}) => {
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div
className="flex gap-1"
onClick={(e) => {
// 避免点击按钮时触发卡片的链接跳转
e.stopPropagation()
}}
>
<div className={clsx('flex gap-1', className)}>
<Tooltip2
placement="bottom"
content={
Expand All @@ -249,10 +251,7 @@ const CardActions = ({ operation }: { operation: Operation }) => {
<Button
small
icon="download"
onClick={(e) => {
e.stopPropagation()
handleDownloadJSON(operation.parsedContent)
}}
onClick={() => handleDownloadJSON(operation.parsedContent)}
/>
</Tooltip2>
<Tooltip2
Expand All @@ -264,10 +263,7 @@ const CardActions = ({ operation }: { operation: Operation }) => {
<Button
small
icon="clipboard"
onClick={(e) => {
e.stopPropagation()
handleCopyShortCode(operation)
}}
onClick={() => handleCopyShortCode(operation)}
/>
</Tooltip2>
<Tooltip2
Expand Down
Loading

0 comments on commit 5f34b64

Please sign in to comment.