style(出题页): 左边写的地方放大、右边「学生看到的样子」缩小，右边能收起来专心写

编程题、SQL 题两张出题页一起改：两栏 3 : 2，右栏头上「收起 ›」，收起后剩一条竖着的「学生看到的样子」点了再展开；收没收记在本机

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/admin/problem/components/CodePreview.vue

@@ -39,7 +39,7 @@ const props = defineProps<{
 }>()
 
 const tab = defineModel<PreviewTab>("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))
           流程图
         </n-radio-button>
       </n-radio-group>
+      <n-button size="small" quaternary title="收起，专心写左边" @click="emit('collapse')">
+        收起 ›
+      </n-button>
     </div>
 
     <!-- 题面 -->

apps/web/src/admin/problem/components/PreviewStrip.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useThemeVars } from "naive-ui"
+
+/**
+ * 出题页右栏「学生看到的样子」收起来之后剩下的那一条：竖着贴在右边，点一下展开。
+ * 收不收记在本机（usePreviewCollapsed），下次打开出题页照旧
+ */
+defineEmits<{ expand: [] }>()
+
+const theme = useThemeVars()
+</script>
+
+<template>
+  <button class="strip" title="展开「学生看到的样子」" @click="$emit('expand')">
+    <span class="arrow">‹</span>
+    <span class="text">学生看到的样子</span>
+  </button>
+</template>
+
+<style scoped>
+.strip {
+  position: sticky;
+  top: 12px;
+  height: 220px;
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 6px;
+  background: v-bind("theme.cardColor");
+  color: v-bind("theme.textColor2");
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.strip:hover {
+  color: v-bind("theme.primaryColor");
+  border-color: v-bind("theme.primaryColor");
+}
+
+.arrow {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.text {
+  writing-mode: vertical-rl;
+  letter-spacing: 2px;
+}
+
+/* 窄屏预览本来就在下面，收起后是横着的一条 */
+@media (max-width: 1180px) {
+  .strip {
+    position: static;
+    height: 40px;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .arrow {
+    transform: rotate(-90deg);
+  }
+
+  .text {
+    writing-mode: horizontal-tb;
+  }
+}
+</style>

apps/web/src/admin/problem/components/previewCollapse.ts

@@ -0,0 +1,7 @@
+/**
+ * 出题页右栏「学生看到的样子」收没收起来。两张出题页（编程题、SQL 题）共用一个开关，
+ * 记在本机：老师想专心写的时候收起来，下次打开还是收着的
+ */
+export function usePreviewCollapsed() {
+  return useStorage("oj2:admin-problem-preview-collapsed", false)
+}