webgl(ui): sidebar 加一组英文 demo 快捷例子

apps/webgl/frontend/src/App.vue

@@ -16,6 +16,15 @@ const EXAMPLES = [
   '一个跟着鼠标转的霓虹甜甜圈',
 ]
 
+const EXAMPLES_EN = [
+  'A colorful 3D cube you can drag to spin',
+  'A field of stars flying past, like hyperspace',
+  'Draw glowing neon lines with the mouse',
+  'Bouncing balls that spawn where you tap',
+  'A rainbow torus that follows the cursor',
+  'Ripples spreading out wherever you click',
+]
+
 const messages = ref<Msg[]>([])
 const input = ref('')
 const busy = ref(false)
@@ -195,6 +204,12 @@ function onKeydown(e: KeyboardEvent) {
               {{ ex }}
             </button>
           </div>
+          <p class="grouplabel">English demos</p>
+          <div class="chips">
+            <button v-for="ex in EXAMPLES_EN" :key="ex" class="chip en" :disabled="busy" @click="useExample(ex)">
+              {{ ex }}
+            </button>
+          </div>
         </div>
 
         <div v-for="(m, i) in messages" :key="i" :class="['bubble', m.role]">
@@ -313,7 +328,16 @@ function onKeydown(e: KeyboardEvent) {
 }
 .welcome { color: var(--fg-dim); font-size: 0.9rem; }
 .welcome p { margin-bottom: 12px; }
+.grouplabel {
+  margin-top: 16px;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--fg-dim);
+  opacity: 0.75;
+}
 .chips { display: flex; flex-direction: column; gap: 8px; }
+.chip.en { font-style: italic; }
 .chip {
   text-align: left;
   background: rgba(255, 255, 255, 0.04);