From dd10e64b38a968291fce74e31b8aff1f89e67883 Mon Sep 17 00:00:00 2001 From: yuetsh <517252939@qq.com> Date: Fri, 9 Oct 2026 21:03:50 +0800 Subject: [PATCH] =?UTF-8?q?style(=E5=87=BA=E9=A2=98=E9=A1=B5):=20=E5=B7=A6?= =?UTF-8?q?=E8=BE=B9=E5=86=99=E7=9A=84=E5=9C=B0=E6=96=B9=E6=94=BE=E5=A4=A7?= =?UTF-8?q?=E3=80=81=E5=8F=B3=E8=BE=B9=E3=80=8C=E5=AD=A6=E7=94=9F=E7=9C=8B?= =?UTF-8?q?=E5=88=B0=E7=9A=84=E6=A0=B7=E5=AD=90=E3=80=8D=E7=BC=A9=E5=B0=8F?= =?UTF-8?q?=EF=BC=8C=E5=8F=B3=E8=BE=B9=E8=83=BD=E6=94=B6=E8=B5=B7=E6=9D=A5?= =?UTF-8?q?=E4=B8=93=E5=BF=83=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 编程题、SQL 题两张出题页一起改：两栏 3 : 2，右栏头上「收起 ›」，收起后剩一条竖着的「学生看到的样子」点了再展开；收没收记在本机 Co-Authored-By: Claude Opus 5.5 --- apps/web/src/admin/problem/SqlDetail.vue | 21 ++++-- .../admin/problem/components/CodePreview.vue | 5 +- .../admin/problem/components/PreviewStrip.vue | 71 +++++++++++++++++++ .../problem/components/previewCollapse.ts | 7 ++ apps/web/src/admin/problem/detail.vue | 19 ++++- 5 files changed, 115 insertions(+), 8 deletions(-) create mode 100644 apps/web/src/admin/problem/components/PreviewStrip.vue create mode 100644 apps/web/src/admin/problem/components/previewCollapse.ts diff --git a/apps/web/src/admin/problem/SqlDetail.vue b/apps/web/src/admin/problem/SqlDetail.vue index ccb00b4..e113574 100644 --- a/apps/web/src/admin/problem/SqlDetail.vue +++ b/apps/web/src/admin/problem/SqlDetail.vue @@ -14,6 +14,8 @@ import { errorCode, errorMessage, isApiError } from "utils/api" import { DIFFICULTY, STORAGE_KEY } from "utils/constants" import { createZipBlob, getTagColor, unique } from "utils/functions" import type { AdminProblem, BlankProblem, SqlConfig, Tag, Testcase } from "utils/types" +import PreviewStrip from "./components/PreviewStrip.vue" +import { usePreviewCollapsed } from "./components/previewCollapse" import { createContestProblem, createProblem, @@ -53,6 +55,7 @@ const props = defineProps<{ const message = useMessage() const router = useRouter() const theme = useThemeVars() +const previewCollapsed = usePreviewCollapsed() const isDark = useDark() const isCreate = computed(() => !props.problemID) @@ -445,7 +448,7 @@ onMounted(async () => { -
+
@@ -634,7 +637,7 @@ onMounted(async () => {
-
@@ -711,16 +718,22 @@ onMounted(async () => { font-size: 12px; } +/* 写的一边是主角，看的一边小一点（用户 2026-10-09：编辑区域要大）；右栏可以收起来 */ .sqlEditor { display: grid; - grid-template-columns: minmax(0, 560px) minmax(0, 1fr); + grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; } +.sqlEditor.collapsed { + grid-template-columns: minmax(0, 1fr) 36px; +} + /* 窄屏（老师的小笔记本）放不下两栏：预览挪到下面 */ @media (max-width: 1180px) { - .sqlEditor { + .sqlEditor, + .sqlEditor.collapsed { grid-template-columns: minmax(0, 1fr); } } diff --git a/apps/web/src/admin/problem/components/CodePreview.vue b/apps/web/src/admin/problem/components/CodePreview.vue index 4e70cdb..353413b 100644 --- a/apps/web/src/admin/problem/components/CodePreview.vue +++ b/apps/web/src/admin/problem/components/CodePreview.vue @@ -39,7 +39,7 @@ const props = defineProps<{ }>() const tab = defineModel("tab", { required: true }) -const emit = defineEmits<{ renderState: [ok: boolean] }>() +const emit = defineEmits<{ renderState: [ok: boolean]; collapse: [] }>() const theme = useThemeVars() const isDark = useDark() @@ -117,6 +117,9 @@ onMounted(() => nextTick(render)) 流程图 + + 收起 › +
diff --git a/apps/web/src/admin/problem/components/PreviewStrip.vue b/apps/web/src/admin/problem/components/PreviewStrip.vue new file mode 100644 index 0000000..15827f8 --- /dev/null +++ b/apps/web/src/admin/problem/components/PreviewStrip.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/apps/web/src/admin/problem/components/previewCollapse.ts b/apps/web/src/admin/problem/components/previewCollapse.ts new file mode 100644 index 0000000..8dfd385 --- /dev/null +++ b/apps/web/src/admin/problem/components/previewCollapse.ts @@ -0,0 +1,7 @@ +/** + * 出题页右栏「学生看到的样子」收没收起来。两张出题页（编程题、SQL 题）共用一个开关， + * 记在本机：老师想专心写的时候收起来，下次打开还是收着的 + */ +export function usePreviewCollapsed() { + return useStorage("oj2:admin-problem-preview-collapsed", false) +} diff --git a/apps/web/src/admin/problem/detail.vue b/apps/web/src/admin/problem/detail.vue index e365fec..24085e8 100644 --- a/apps/web/src/admin/problem/detail.vue +++ b/apps/web/src/admin/problem/detail.vue @@ -22,6 +22,8 @@ import { import AstRulesEditor from "./components/AstRulesEditor.vue" import CaseTable from "./components/CaseTable.vue" import CodePreview from "./components/CodePreview.vue" +import PreviewStrip from "./components/PreviewStrip.vue" +import { usePreviewCollapsed } from "./components/previewCollapse" import { caseFiles, caseStatus, @@ -458,6 +460,7 @@ const open = reactive({ more: false, }) const preview = ref("statement") +const previewCollapsed = usePreviewCollapsed() watch( () => open.write, @@ -842,7 +845,7 @@ onMounted(async () => { -
+
上次没保存的草稿已经恢复
@@ -1273,7 +1276,9 @@ onMounted(async () => {
+ { :mermaid-code="form.mermaidCode" :flowchart-hint="form.flowchartHint" @render-state="mermaidOk = $event" + @collapse="previewCollapsed = true" /> +
@@ -1314,16 +1321,22 @@ onMounted(async () => { font-size: 12px; } +/* 写的一边是主角，看的一边小一点（用户 2026-10-09：编辑区域要大）；右栏可以收起来 */ .codeEditor { display: grid; - grid-template-columns: minmax(0, 600px) minmax(0, 1fr); + grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; } +.codeEditor.collapsed { + grid-template-columns: minmax(0, 1fr) 36px; +} + /* 窄屏（老师的小笔记本）放不下两栏：预览挪到下面 */ @media (max-width: 1180px) { - .codeEditor { + .codeEditor, + .codeEditor.collapsed { grid-template-columns: minmax(0, 1fr); } }