✨ Add code blocks and rainbow bracket extensions

frontend/src/views/editor/extensions/codeblast/styles.css

@@ -0,0 +1,52 @@
+#code-blast-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  pointer-events: none;
+  background: transparent;
+}
+
+/* 确保编辑器在震动时不会影响布局 */
+.cm-editor {
+  transition: transform 0.1s ease-out;
+}
+
+/* 打字机效果的粒子样式 */
+.code-blast-particle {
+  position: absolute;
+  pointer-events: none;
+  border-radius: 50%;
+  animation: particle-fade 2s ease-out forwards;
+}
+
+@keyframes particle-fade {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+
+/* 震动效果的缓动 */
+.code-blast-shake {
+  animation: shake 0.3s ease-out;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translate(0, 0); }
+  10% { transform: translate(-2px, -1px); }
+  20% { transform: translate(2px, 1px); }
+  30% { transform: translate(-1px, 2px); }
+  40% { transform: translate(1px, -2px); }
+  50% { transform: translate(-2px, 1px); }
+  60% { transform: translate(2px, -1px); }
+  70% { transform: translate(-1px, -2px); }
+  80% { transform: translate(1px, 2px); }
+  90% { transform: translate(-2px, -1px); }
+}