style: 添加预设样式

packages/backend/html-presets/静态中心光影渐变.html

@@ -0,0 +1,11 @@
+<style>
+    #radial-focus {
+      width: 100%;
+      height: 100%;
+      background-color: #121b24;
+      background-image:
+        radial-gradient(circle at center, rgba(0,100,200,0.07) 0%, transparent 80%);
+    }
+    </style>
+    <div id="radial-focus"></div>
+    

packages/backend/html-presets/静态几何背景.html

@@ -0,0 +1,25 @@
+<style>
+  #static-geometric-pattern {
+    width: 100%;
+    height: 100%;
+    background-color: #2c3340; /* 深灰蓝 */
+
+
+
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='69.28' viewBox='0 0 60 69.28'%3E%3Cdefs%3E%3Cstyle%3E.hex { stroke: rgba(180,190,210,0.07); stroke-width: 0.5px; fill: none; }%3C/style%3E%3C/defs%3E%3Cpath class='hex' d='M30 0 L60 17.32 L60 51.96 L30 69.28 L0 51.96 L0 17.32 Z M0 17.32 L30 34.64 M30 0 L30 34.64 M60 17.32 L30 34.64 M0 51.96 L30 34.64 M30 69.28 L30 34.64 M60 51.96 L30 34.64'/%3E%3C/svg%3E");
+    background-size: 60px 69.28px; 
+    background-repeat: repeat;
+
+  }
+  #static-geometric-pattern::after { 
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, transparent 70%);
+    opacity: 0.5;
+    pointer-events: none;
+  }
+</style>
+<div id="static-geometric-pattern">
+
+</div>

packages/backend/html-presets/静态暗色科技风.html

@@ -0,0 +1,17 @@
+<style>
+    #dark-tech-background {
+      background-color: #1a1a2e;
+      background-image:
+        linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 0, 0, 0.4) 1px, transparent 1px);
+      background-size: 20px 20px; 
+      min-height: 100vh;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  </style>
+  
+  <div id="dark-tech-background">
+    </div>

packages/backend/html-presets/静态深色折纸风

@@ -0,0 +1,13 @@
+<style>
+    #origami-folds {
+      width: 100%;
+      height: 100%;
+      background-color: #1c1f24;
+      background-image: 
+        linear-gradient(135deg, rgba(255,255,255,0.03) 25%, transparent 25%),
+        linear-gradient(225deg, rgba(255,255,255,0.03) 25%, transparent 25%);
+      background-size: 60px 60px;
+    }
+    </style>
+    <div id="origami-folds"></div>
+    

packages/backend/html-presets/静态玻璃浮雕.html

@@ -0,0 +1,14 @@
+<style>
+    #frosted-tile-background {
+      width: 100%;
+      height: 100%;
+      background-color: #1c242f;
+      background-image: 
+        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px),
+        linear-gradient(180deg, rgba(255,255,255,0.015) 1px, transparent 1px),
+        linear-gradient(135deg, rgba(100,150,200,0.03) 25%, transparent 25%);
+      background-size: 60px 60px, 60px 60px, 120px 120px;
+    }
+    </style>
+    <div id="frosted-tile-background"></div>
+