From 01ceef269471c6bbf9beadca3c8f56fca5f32047 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Mon, 6 Jul 2026 14:04:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E5=8F=AF=E8=BF=90=E8=A1=8C?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=9D=97=E6=A8=A1=E6=80=81=E6=A1=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=20+=20runnable=20=E5=9D=97=E7=BB=BF=E8=89=B2=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

模态框复用 Catppuccin Latte/Mocha 配色;编辑器内含 runnable 标记的
代码块加左侧绿色边框(与 Code Runner 运行按钮主色一致)。
---
 libs/tiptap-editor/src/style.css | 168 +++++++++++++++++++++++++++++++
 1 file changed, 168 insertions(+)

diff --git a/libs/tiptap-editor/src/style.css b/libs/tiptap-editor/src/style.css
index 63045bf..ea18bb9 100644
--- a/libs/tiptap-editor/src/style.css
+++ b/libs/tiptap-editor/src/style.css
@@ -652,3 +652,171 @@
   /* Mocha overlay0 */
   color: #6c7086;
 }
+
+/* ========== Runnable Code Block Modal ========== */
+.tiptap-runnable-modal-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.tiptap-runnable-modal {
+  /* Latte mantle —— 复用 .slash-command 配色 */
+  background: #e6e9ef;
+  border: 1px solid #bcc0cc;
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  padding: 16px;
+  min-width: 320px;
+  max-width: 90vw;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.tiptap-runnable-modal-title {
+  font-size: 15px;
+  font-weight: 600;
+  /* Latte text */
+  color: #4c4f69;
+  margin-bottom: 12px;
+}
+
+.tiptap-runnable-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 13px;
+  /* Latte subtext0 */
+  color: #6c6f85;
+}
+
+.tiptap-runnable-field input[type='number'],
+.tiptap-runnable-field select {
+  flex: 1;
+  padding: 4px 8px;
+  border: 1px solid #bcc0cc;
+  border-radius: 4px;
+  background: #fff;
+  /* Latte text */
+  color: #4c4f69;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.tiptap-runnable-field input[type='checkbox'] {
+  accent-color: #40a02b;
+}
+
+.tiptap-runnable-preview {
+  margin: 12px 0;
+  padding: 8px;
+  /* Latte surface0 */
+  background: #ccd0da;
+  border-radius: 4px;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+  font-size: 12px;
+  /* Latte subtext1 */
+  color: #5c5f77;
+  word-break: break-all;
+}
+
+.tiptap-runnable-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.tiptap-runnable-actions button {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.tiptap-runnable-actions .cancel {
+  /* Latte surface0 */
+  background: #ccd0da;
+  /* Latte text */
+  color: #4c4f69;
+}
+
+.tiptap-runnable-actions .insert {
+  /* Catppuccin green —— 与 Code Runner 运行按钮主色一致 */
+  background: #40a02b;
+  color: #fff;
+}
+
+.tiptap-runnable-actions .insert:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 编辑器内 runnable 代码块视觉提示:左侧绿色边框 */
+.tiptap-editor pre:has(code[class*='runnable']) {
+  border-left: 3px solid #40a02b;
+  padding-left: 12px;
+}
+
+/* ========== Dark Theme: Runnable Modal (Mocha) ========== */
+.dark .tiptap-runnable-modal {
+  /* Mocha mantle */
+  background: #181825;
+  border-color: #45475a;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+}
+
+.dark .tiptap-runnable-modal-title {
+  /* Mocha text */
+  color: #cdd6f4;
+}
+
+.dark .tiptap-runnable-field {
+  /* Mocha subtext0 */
+  color: #a6adc8;
+}
+
+.dark .tiptap-runnable-field input[type='number'],
+.dark .tiptap-runnable-field select {
+  border-color: #45475a;
+  /* Mocha base */
+  background: #1e1e2e;
+  /* Mocha text */
+  color: #cdd6f4;
+}
+
+.dark .tiptap-runnable-field input[type='checkbox'] {
+  /* Mocha green */
+  accent-color: #a6e3a1;
+}
+
+.dark .tiptap-runnable-preview {
+  /* Mocha surface0 */
+  background: #313244;
+  /* Mocha subtext1 */
+  color: #bac2de;
+}
+
+.dark .tiptap-runnable-actions .cancel {
+  /* Mocha surface0 */
+  background: #313244;
+  /* Mocha text */
+  color: #cdd6f4;
+}
+
+.dark .tiptap-runnable-actions .insert {
+  /* Mocha green */
+  background: #a6e3a1;
+  /* Mocha base */
+  color: #1e1e2e;
+}
+
+.dark .tiptap-editor pre:has(code[class*='runnable']) {
+  border-left-color: #a6e3a1;
+}