From 6a9970e27f0d3bce72c2f8b96aa49587f29ff06a Mon Sep 17 00:00:00 2001
From: zrll_ <46812903+zrll12@users.noreply.github.com>
Date: Mon, 9 Sep 2024 17:08:13 +0800
Subject: [PATCH] fix: style

---
 .../backstage/editor/[id]/DndTable.module.css |   4 +-
 .../editor/[id]/components/question.tsx       |  20 ++-
 app/(root)/backstage/editor/[id]/page.tsx     | 141 +++++++++---------
 3 files changed, 78 insertions(+), 87 deletions(-)

diff --git a/app/(root)/backstage/editor/[id]/DndTable.module.css b/app/(root)/backstage/editor/[id]/DndTable.module.css
index 619e3f7..534401f 100644
--- a/app/(root)/backstage/editor/[id]/DndTable.module.css
+++ b/app/(root)/backstage/editor/[id]/DndTable.module.css
@@ -5,7 +5,7 @@
 
 .item:hover {
     transform: scale(1.01);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4 px 10px rgba(0, 0, 0, 0.1);
 }
 
 .dragHandle {
@@ -21,4 +21,4 @@
 
 .dragHandle:hover {
     background-color: #f0f0f0;
-}
\ No newline at end of file
+}
diff --git a/app/(root)/backstage/editor/[id]/components/question.tsx b/app/(root)/backstage/editor/[id]/components/question.tsx
index d23ddea..2a3aa54 100644
--- a/app/(root)/backstage/editor/[id]/components/question.tsx
+++ b/app/(root)/backstage/editor/[id]/components/question.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { notifications } from '@mantine/notifications';
-import { Card, Stack } from '@mantine/core';
-import QuestionApi, { QuestionProps, StringifyQuestionProps } from '@/api/QuestionApi';
-import { PageQuestionProps } from '@/app/(root)/survey/[id]/components/question';
+import {useEffect, useState} from 'react';
+import {notifications} from '@mantine/notifications';
+import {Stack} from '@mantine/core';
+import QuestionApi, {QuestionProps, StringifyQuestionProps} from '@/api/QuestionApi';
+import {PageQuestionProps} from '@/app/(root)/survey/[id]/components/question';
 import EditCard from '@/app/(root)/backstage/editor/[id]/components/EditCard';
 
 export default function Question(props: PageQuestionProps) {
@@ -59,11 +59,9 @@ export default function Question(props: PageQuestionProps) {
     }, []);
 
     return (
-        <Card withBorder>
-            <Stack gap="xs">
-                {question ?
-                    <EditCard question={question} setQuestion={setQuestion} save={save} /> : null}
-            </Stack>
-        </Card>
+        <Stack gap="xs">
+            {question ?
+                <EditCard question={question} setQuestion={setQuestion} save={save}/> : null}
+        </Stack>
     );
 }
diff --git a/app/(root)/backstage/editor/[id]/page.tsx b/app/(root)/backstage/editor/[id]/page.tsx
index 05393a2..4c6b835 100644
--- a/app/(root)/backstage/editor/[id]/page.tsx
+++ b/app/(root)/backstage/editor/[id]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Center, Container, Stack, Text, Title, Button, Space, Group } from '@mantine/core';
+import { ActionIcon, Button, Card, Center, Container, Group, Space, Stack, Text, Title } from '@mantine/core';
 import React, { useEffect, useRef, useState } from 'react';
 import { notifications } from '@mantine/notifications';
 import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
@@ -185,82 +185,75 @@ export default function SurveyPage({ params }: { params: { id: number } }) {
                     <Text size="md">加载中...</Text>
                 </Center>
             ) : (
-                <>
-                    <Container maw={1600} w="90%">
-                        <DragDropContext onDragEnd={handleDragEnd}>
-                            <Droppable droppableId="questions-list" direction="vertical">
-                                {(droppableProvided) => (
-                                    <Stack
-                                      {...droppableProvided.droppableProps}
-                                      ref={droppableProvided.innerRef}
-                                    >
-                                        {questions?.content.map((questionId, index) => (
-                                            <Draggable
-                                              key={questionId}
-                                              draggableId={questionId}
-                                              index={index}
-                                            >
-                                                {(draggableProvided, snapshot) => (
-                                                    <div
-                                                      ref={draggableProvided.innerRef}
-                                                      {...draggableProvided.draggableProps}
-                                                      className={cx(classes.item, {
-                                                            [classes.itemDragging]:
-                                                            snapshot.isDragging,
-                                                        })}
-                                                    >
-                                                        <Stack>
-                                                            <div
-                                                              {...draggableProvided.dragHandleProps}
-                                                              className={classes.dragHandle}
-                                                            >
-                                                                <IconGripHorizontal />
-                                                            </div>
-                                                            <Question
-                                                              id={questionId}
-                                                              value={getAnswerGetter(questionId)}
-                                                              setValue={getAnswerSetter(questionId)}
-                                                              setProps={getPropsSetter(questionId)}
-                                                              checkAccess={() => true}
-                                                            />
-                                                        </Stack>
-                                                    </div>
-                                                )}
-                                            </Draggable>
-                                        ))}
-                                        {droppableProvided.placeholder}
-                                    </Stack>
-                                )}
-                            </Droppable>
-                        </DragDropContext>
+                <Container maw={1600} w="90%">
+                    <DragDropContext onDragEnd={handleDragEnd}>
+                        <Droppable droppableId="questions-list" direction="vertical">
+                            {(droppableProvided) => (
+                                <Stack
+                                  {...droppableProvided.droppableProps}
+                                  ref={droppableProvided.innerRef}
+                                >
+                                    {questions?.content.map((questionId, index) => (
+                                        <Draggable
+                                          key={questionId}
+                                          draggableId={questionId}
+                                          index={index}
+                                        >
+                                            {(draggableProvided, snapshot) => (
+                                                <Card
+                                                  ref={draggableProvided.innerRef}
+                                                  {...draggableProvided.draggableProps}
+                                                  className={cx(classes.item, {
+                                                        [classes.itemDragging]:
+                                                        snapshot.isDragging,
+                                                    })}
+                                                  withBorder
+                                                  radius="md"
+                                                >
+                                                    <Stack>
+                                                        <ActionIcon {...draggableProvided.dragHandleProps} variant="subtle" color="gray">
+                                                            <IconGripHorizontal />
+                                                        </ActionIcon>
+                                                        <Question
+                                                          id={questionId}
+                                                          value={getAnswerGetter(questionId)}
+                                                          setValue={getAnswerSetter(questionId)}
+                                                          setProps={getPropsSetter(questionId)}
+                                                          checkAccess={() => true}
+                                                        />
+                                                    </Stack>
+                                                </Card>
+                                            )}
+                                        </Draggable>
+                                    ))}
+                                    {droppableProvided.placeholder}
+                                </Stack>
+                            )}
+                        </Droppable>
+                    </DragDropContext>
 
-                        <Space h={20} />
+                    <Space h={20} />
 
-                        <Group grow>
-                            <Button onClick={newQuestion}>新建问题</Button>
-                        </Group>
+                    <Group grow>
+                        <Button onClick={newQuestion}>新建问题</Button>
+                    </Group>
+                    <Space h={20} />
 
-                        {showNewQuestion && (
-                            <>
-                                <Space h={20} />
-                                <div
-                                  style={{
-                                        backgroundColor: 'rgba(185, 190, 185, 0.3)',
-                                        borderRadius: '10px',
-                                        padding: '10px',
-                                    }}
-                                >
-                                    <EditCard
-                                      question={newQuestionObject}
-                                      setQuestion={setNewQuestionObject}
-                                      cancel={() => setShowNewQuestion(false)}
-                                      save={saveNewQuestion}
-                                    />
-                                </div>
-                            </>
-                        )}
-                    </Container>
-                </>
+                    {showNewQuestion && (
+                        <Card
+                          style={{
+                                backgroundColor: 'rgba(185, 190, 185, 0.3)',
+                            }}
+                        >
+                            <EditCard
+                              question={newQuestionObject}
+                              setQuestion={setNewQuestionObject}
+                              cancel={() => setShowNewQuestion(false)}
+                              save={saveNewQuestion}
+                            />
+                        </Card>
+                    )}
+                </Container>
             )}
         </Stack>
     );