From 49683ddc42e0c066d41b59b6a79e822801f7c56c Mon Sep 17 00:00:00 2001
From: Guan <821143943@qq.com>
Date: Wed, 3 Apr 2024 21:18:28 +0800
Subject: [PATCH 1/5] fix: page navigating when clicking buttons in item cards
 (#275)

Also updated the layout of OperationCard and OperationSetCard in list layout
---
 src/components/OperationCard.tsx              | 125 ++++++++-------
 src/components/OperationSetCard.tsx           | 144 +++++++++---------
 .../operation-set/AddToOperationSet.tsx       |   9 +-
 3 files changed, 137 insertions(+), 141 deletions(-)

diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx
index 45345c6..23dd3df 100644
--- a/src/components/OperationCard.tsx
+++ b/src/components/OperationCard.tsx
@@ -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'
@@ -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">
@@ -105,8 +105,10 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
             </Tooltip2>
           </div>
         </div>
-      </Card>
-    </ReLink>
+      </ReLink>
+
+      <CardActions className="absolute top-4 right-4" operation={operation} />
+    </Card>
   )
 }
 
@@ -114,11 +116,12 @@ 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">
@@ -126,7 +129,6 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
               <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
@@ -141,43 +143,40 @@ 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">
@@ -195,8 +194,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>
   )
 }
 
@@ -230,16 +234,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={
@@ -249,10 +252,7 @@ const CardActions = ({ operation }: { operation: Operation }) => {
         <Button
           small
           icon="download"
-          onClick={(e) => {
-            e.stopPropagation()
-            handleDownloadJSON(operation.parsedContent)
-          }}
+          onClick={() => handleDownloadJSON(operation.parsedContent)}
         />
       </Tooltip2>
       <Tooltip2
@@ -264,10 +264,7 @@ const CardActions = ({ operation }: { operation: Operation }) => {
         <Button
           small
           icon="clipboard"
-          onClick={(e) => {
-            e.stopPropagation()
-            handleCopyShortCode(operation)
-          }}
+          onClick={() => handleCopyShortCode(operation)}
         />
       </Tooltip2>
       <Tooltip2
diff --git a/src/components/OperationSetCard.tsx b/src/components/OperationSetCard.tsx
index aa58de2..1073e3e 100644
--- a/src/components/OperationSetCard.tsx
+++ b/src/components/OperationSetCard.tsx
@@ -15,11 +15,14 @@ export const NeoOperationSetCard = ({
   operationSet: OperationSetListItem
 }) => {
   return (
-    <ReLink search={{ opset: operationSet.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={{ opset: operationSet.id }}
+        className="block no-underline"
       >
         {/* title */}
         <div className="flex gap-1">
@@ -27,28 +30,13 @@ export const NeoOperationSetCard = ({
             content={operationSet.name}
             className="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">
               {operationSet.status === 'PRIVATE' && (
                 <Tag className="mr-1">私有</Tag>
               )}
               {operationSet.name}
             </H4>
           </Tooltip2>
-          <Tooltip2
-            placement="bottom"
-            content={
-              <div className="max-w-sm dark:text-slate-900">复制神秘代码</div>
-            }
-          >
-            <Button
-              small
-              icon="clipboard"
-              onClick={(e) => {
-                e.stopPropagation()
-                handleCopyShortCode(operationSet)
-              }}
-            />
-          </Tooltip2>
         </div>
         <div className="flex-1 flex flex-col gap-2 justify-center">
           <div className="text-gray-700 leading-normal">
@@ -80,8 +68,13 @@ export const NeoOperationSetCard = ({
             </Tooltip2>
           </div>
         </div>
-      </Card>
-    </ReLink>
+      </ReLink>
+
+      <CardActions
+        className="absolute top-4 right-4"
+        operationSet={operationSet}
+      />
+    </Card>
   )
 }
 
@@ -91,11 +84,15 @@ export const OperationSetCard = ({
   operationSet: OperationSetListItem
 }) => {
   return (
-    <ReLink
-      search={{ opset: operationSet.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={{ opset: operationSet.id }}
+        className="block no-underline"
+      >
         <div className="flex flex-wrap mb-4 sm:mb-2">
           {/* title */}
           <div className="flex flex-col gap-3">
@@ -103,53 +100,29 @@ export const OperationSetCard = ({
               <H4 className="inline-block pb-1 border-b-2 border-zinc-200 border-solid mb-2">
                 {operationSet.name}
               </H4>
-              <Tooltip2
-                placement="bottom"
-                content={
-                  <div className="max-w-sm dark:text-slate-900">
-                    复制神秘代码
-                  </div>
-                }
-              >
-                <Button
-                  small
-                  icon="clipboard"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    handleCopyShortCode(operationSet)
-                  }}
-                />
-              </Tooltip2>
             </div>
           </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 text-zinc-500">
-                <Icon icon="document" className="mr-1" />
-                <span>{operationSet.copilotIds.length}份作业</span>
+          <div className="flex flex-wrap items-start gap-x-4 gap-y-1 text-zinc-500">
+            <div className="flex items-center">
+              <Icon icon="document" className="mr-1" />
+              <span>{operationSet.copilotIds.length}份作业</span>
 
-                <Icon icon="time" className="ml-4 mr-1" />
-                <RelativeTime
-                  Tooltip2Props={{ placement: 'top' }}
-                  moment={operationSet.createTime}
-                />
-              </div>
-            </div>
-            <div className="text-zinc-500 self-end">
-              <Tooltip2
-                placement="top"
-                content={`作者：${operationSet.creator}`}
-              >
-                <div>
-                  <Icon icon="user" className="mr-1.5" />
-                  <span>{operationSet.creator}</span>
-                </div>
-              </Tooltip2>
+              <Icon icon="time" className="ml-4 mr-1" />
+              <RelativeTime
+                Tooltip2Props={{ placement: 'top' }}
+                moment={operationSet.createTime}
+              />
             </div>
+            <Tooltip2 placement="top" content={`作者：${operationSet.creator}`}>
+              <div>
+                <Icon icon="user" className="mr-1.5" />
+                <span>{operationSet.creator}</span>
+              </div>
+            </Tooltip2>
           </div>
         </div>
         <div className="flex md:flex-row flex-col gap-4">
@@ -161,7 +134,40 @@ export const OperationSetCard = ({
             />
           </div>
         </div>
-      </Card>
-    </ReLink>
+      </ReLink>
+
+      <CardActions
+        className="absolute top-4 xl:top-12 right-[18px]"
+        operationSet={operationSet}
+      />
+    </Card>
+  )
+}
+
+const CardActions = ({
+  className,
+  operationSet,
+}: {
+  className?: string
+  operationSet: OperationSetListItem
+}) => {
+  return (
+    <div className={className}>
+      <Tooltip2
+        placement="bottom"
+        content={
+          <div className="max-w-sm dark:text-slate-900">复制神秘代码</div>
+        }
+      >
+        <Button
+          small
+          icon="clipboard"
+          onClick={(e) => {
+            e.stopPropagation()
+            handleCopyShortCode(operationSet)
+          }}
+        />
+      </Tooltip2>
+    </div>
   )
 }
diff --git a/src/components/operation-set/AddToOperationSet.tsx b/src/components/operation-set/AddToOperationSet.tsx
index fe840c9..0eeb202 100644
--- a/src/components/operation-set/AddToOperationSet.tsx
+++ b/src/components/operation-set/AddToOperationSet.tsx
@@ -33,14 +33,7 @@ export function AddToOperationSetButton({
 
   return (
     <>
-      <Button
-        {...props}
-        onClick={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          setIsOpen(true)
-        }}
-      />
+      <Button {...props} onClick={() => setIsOpen(true)} />
       <Dialog
         title="添加到作业集"
         icon="user"

From 7ada3232c5874e0b7421212970aaf272807b1173 Mon Sep 17 00:00:00 2001
From: Guan <821143943@qq.com>
Date: Wed, 3 Apr 2024 21:28:47 +0800
Subject: [PATCH 2/5] feat: restrict width of operation list in operation set
 viewer

---
 src/components/viewer/OperationSetViewer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/viewer/OperationSetViewer.tsx b/src/components/viewer/OperationSetViewer.tsx
index 942acc5..46fa7c0 100644
--- a/src/components/viewer/OperationSetViewer.tsx
+++ b/src/components/viewer/OperationSetViewer.tsx
@@ -259,7 +259,7 @@ function OperationSetViewerInnerDetails({
       <H5 className="mb-4 text-slate-600">
         作业列表({operationSet.copilotIds.length})
       </H5>
-      <div className="flex flex-col mb-4">
+      <div className="flex flex-col mb-4 max-w-screen-2xl">
         <OperationList operationIds={operationSet.copilotIds} />
       </div>
     </div>

From 9aa260548a35e1970dc0a5ffb30d3b97fcdc6008 Mon Sep 17 00:00:00 2001
From: Guan <821143943@qq.com>
Date: Wed, 3 Apr 2024 21:33:38 +0800
Subject: [PATCH 3/5] feat: better layout for operation set card

---
 src/components/OperationCard.tsx    | 1 -
 src/components/OperationSetCard.tsx | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx
index 23dd3df..8c8b290 100644
--- a/src/components/OperationCard.tsx
+++ b/src/components/OperationCard.tsx
@@ -181,7 +181,6 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
         </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
diff --git a/src/components/OperationSetCard.tsx b/src/components/OperationSetCard.tsx
index 1073e3e..a760169 100644
--- a/src/components/OperationSetCard.tsx
+++ b/src/components/OperationSetCard.tsx
@@ -38,7 +38,7 @@ export const NeoOperationSetCard = ({
             </H4>
           </Tooltip2>
         </div>
-        <div className="flex-1 flex flex-col gap-2 justify-center">
+        <div className="flex-1 flex flex-col my-3 gap-2 justify-center">
           <div className="text-gray-700 leading-normal">
             <Paragraphs
               content={operationSet.description}
@@ -127,7 +127,6 @@ export const OperationSetCard = ({
         </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={operationSet.description}
               limitHeight={21 * 13.5} // 13 lines, 21px per line; the extra 0.5 line is intentional so the `mask` effect is obvious

From 542cc25231ae96c33a4a64a0b0394c668a95f7a1 Mon Sep 17 00:00:00 2001
From: Guan <821143943@qq.com>
Date: Wed, 3 Apr 2024 22:02:30 +0800
Subject: [PATCH 4/5] fix: unable to submit in operation set editor

---
 .../operation-set/OperationSetEditor.tsx          | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/operation-set/OperationSetEditor.tsx b/src/components/operation-set/OperationSetEditor.tsx
index abe26e0..4a79b38 100644
--- a/src/components/operation-set/OperationSetEditor.tsx
+++ b/src/components/operation-set/OperationSetEditor.tsx
@@ -180,7 +180,7 @@ function OperationSetForm({ operationSet, onSubmit }: FormProps) {
     control,
     handleSubmit,
     setError,
-    formState: { errors, isDirty, isSubmitting },
+    formState: { errors, isSubmitting },
   } = useForm<FormValues>({
     defaultValues: operationSet || {
       name: '',
@@ -220,7 +220,7 @@ function OperationSetForm({ operationSet, onSubmit }: FormProps) {
                 <div className="grow">
                   <OperationSelector
                     operationSet={operationSet}
-                    ref={operationSelectorRef}
+                    selectorRef={operationSelectorRef}
                   />
                 </div>
               </>
@@ -302,7 +302,7 @@ function OperationSetForm({ operationSet, onSubmit }: FormProps) {
         )}
 
         <Button
-          disabled={!isDirty || isSubmitting}
+          disabled={isSubmitting}
           intent="primary"
           loading={isSubmitting}
           type="submit"
@@ -326,14 +326,17 @@ interface OperationSelectorProps {
   operationSet: OperationSet
 
   // 这个组件做成受控组件的话，输入输出比较难处理，所以做成非受控组件，用 ref 获取值
-  ref: Ref<OperationSelectorRef>
+  selectorRef: Ref<OperationSelectorRef>
 }
 
 interface OperationSelectorRef {
   getValues(): { idsToAdd: number[]; idsToRemove: number[] }
 }
 
-function OperationSelector({ operationSet, ref }: OperationSelectorProps) {
+function OperationSelector({
+  operationSet,
+  selectorRef,
+}: OperationSelectorProps) {
   const { operations, error } = useOperations({
     operationIds: operationSet.copilotIds,
   })
@@ -348,7 +351,7 @@ function OperationSelector({ operationSet, ref }: OperationSelectorProps) {
   )
 
   useImperativeHandle(
-    ref,
+    selectorRef,
     () => ({
       getValues() {
         const idsToAdd: number[] = []

From 6172b1d63408957c6eaefd15c6d4280364c97d39 Mon Sep 17 00:00:00 2001
From: Guan <821143943@qq.com>
Date: Wed, 3 Apr 2024 22:58:21 +0800
Subject: [PATCH 5/5] docs: update changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a78a53f..0a2ea04 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
 ## 2024-04-03
 
 - 修复了因部分作业缺少动作列表而渲染失败的问题
+- 修复了点击作业（集）卡片上的按钮时会跳转到详情页的问题
+- 修复了作业集编辑器的保存按钮失效的问题
+- 优化了一些界面布局
 
 ## 2024-04-01