demo

2026-01-14 20:32:28 +08:00
commit d2cf646974
41 changed files with 2519 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>中文Blockly Python代码生成平台</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "blockly",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@blockly/theme-modern": "^7.0.4",
+    "blockly": "^12.3.1",
+    "vue": "^3.5.26"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.8",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.3.1",
+    "vue-tsc": "^3.2.2"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.3.1"
+  }
+}
--- a/public/blockly-media/1x1.gif
+++ b/public/blockly-media/1x1.gif
--- a/public/blockly-media/click.mp3
+++ b/public/blockly-media/click.mp3
--- a/public/blockly-media/click.ogg
+++ b/public/blockly-media/click.ogg
--- a/public/blockly-media/click.wav
+++ b/public/blockly-media/click.wav
--- a/public/blockly-media/delete-icon.svg
+++ b/public/blockly-media/delete-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#041E49"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
--- a/public/blockly-media/delete.mp3
+++ b/public/blockly-media/delete.mp3
--- a/public/blockly-media/delete.ogg
+++ b/public/blockly-media/delete.ogg
--- a/public/blockly-media/delete.wav
+++ b/public/blockly-media/delete.wav
--- a/public/blockly-media/disconnect.mp3
+++ b/public/blockly-media/disconnect.mp3
--- a/public/blockly-media/disconnect.ogg
+++ b/public/blockly-media/disconnect.ogg
--- a/public/blockly-media/disconnect.wav
+++ b/public/blockly-media/disconnect.wav
--- a/public/blockly-media/dropdown-arrow.svg
+++ b/public/blockly-media/dropdown-arrow.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="12.71" height="8.79" viewBox="0 0 12.71 8.79"><title>dropdown-arrow</title><g opacity="0.1"><path d="M12.71,2.44A2.41,2.41,0,0,1,12,4.16L8.08,8.08a2.45,2.45,0,0,1-3.45,0L0.72,4.16A2.42,2.42,0,0,1,0,2.44,2.48,2.48,0,0,1,.71.71C1,0.47,1.43,0,6.36,0S11.75,0.46,12,.71A2.44,2.44,0,0,1,12.71,2.44Z" fill="#231f20"/></g><path d="M6.36,7.79a1.43,1.43,0,0,1-1-.42L1.42,3.45a1.44,1.44,0,0,1,0-2c0.56-.56,9.31-0.56,9.87,0a1.44,1.44,0,0,1,0,2L7.37,7.37A1.43,1.43,0,0,1,6.36,7.79Z" fill="#fff"/></svg>
--- a/public/blockly-media/foldout-icon.svg
+++ b/public/blockly-media/foldout-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#041E49"><path d="M480-360 280-560h400L480-360Z"/></svg>
--- a/public/blockly-media/handclosed.cur
+++ b/public/blockly-media/handclosed.cur
--- a/public/blockly-media/handdelete.cur
+++ b/public/blockly-media/handdelete.cur
--- a/public/blockly-media/handopen.cur
+++ b/public/blockly-media/handopen.cur
--- a/public/blockly-media/pilcrow.png
+++ b/public/blockly-media/pilcrow.png
--- a/public/blockly-media/quote0.png
+++ b/public/blockly-media/quote0.png
--- a/public/blockly-media/quote1.png
+++ b/public/blockly-media/quote1.png
--- a/public/blockly-media/resize-handle.svg
+++ b/public/blockly-media/resize-handle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="8" viewBox="0 0 8 8" width="8" fill="#041E49" stroke="#000">
+<g><line x1="2.67" y1="7" x2="7" y2="2.67"></line><line x1="5.33" y1="7" x2="7" y2="5.33"></line></g>
+</svg>
--- a/public/blockly-media/sprites.png
+++ b/public/blockly-media/sprites.png
--- a/public/blockly-media/sprites.svg
+++ b/public/blockly-media/sprites.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96px" height="124px">
+  <style type="text/css">
+#background {
+  fill: none;
+}
+.arrows {
+  fill: #000;
+  stroke: none;
+}
+.selected>.arrows {
+  fill: #fff;
+}
+.checkmark {
+  fill: #000;
+  font-family: sans-serif;
+  font-size: 10pt;
+  text-anchor: middle;
+}
+.trash {
+  fill: #888;
+}
+.zoom {
+  fill: none;
+  stroke: #888;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.zoom>.center {
+  fill: #888;
+  stroke-width: 0;
+}
+  </style>
+  <rect id="background" width="96" height="124" x="0" y="0" />
+
+  <g>
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+  <g class="selected" transform="translate(0, 16)">
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+
+  <text class="checkmark" x="55.5" y="28">&#10003;</text>
+
+  <g class="trash">
+    <path d="M 2,41 v 6 h 42 v -6 h -10.5 l -3,-3 h -15 l -3,3 z" />
+    <rect width="36" height="20" x="5" y="50" />
+    <rect width="36" height="42" x="5" y="50" rx="4" ry="4" />
+  </g>
+
+  <g class="zoom">
+    <circle r="11.5" cx="16" cy="108" />
+    <circle r="4.3" cx="16" cy="108" class="center" />
+    <path d="m 28,108 h3" />
+    <path d="m 1,108 h3" />
+    <path d="m 16,120 v3" />
+    <path d="m 16,93 v3" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="48" cy="108" />
+    <path d="m 48,101.6 v12.8" />
+    <path d="m 41.6,108 h12.8" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="80" cy="108" />
+    <path d="m 73.6,108 h12.8" />
+  </g>
+</svg>
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue"
+import * as Blockly from "blockly/core"
+import "blockly/blocks"
+import Theme from "@blockly/theme-modern"
+import { setBlocklyLocale } from "./blockly/locale"
+import { defineBlocks } from "./blockly/blocks"
+import { toolbox } from "./blockly/toolbox"
+import { initPythonGenerator } from "./blockly/pythonGenerator"
+
+const workspaceHost = ref<HTMLDivElement | null>(null)
+const codePreview = ref("")
+const statusText = ref("准备就绪")
+
+let workspace: Blockly.WorkspaceSvg | null = null
+const generator = initPythonGenerator()
+
+const updateCode = () => {
+  if (!workspace) return
+  const code = generator.workspaceToCode(workspace)
+  codePreview.value = code.trim() || "# 在左侧拖入方块生成Python代码"
+}
+
+// const platformTheme = Blockly.Theme.defineTheme('cnPlatform', {
+//   base: Blockly.Themes.Zelos,
+//   componentStyles: {
+//     workspaceBackgroundColour: '#f7f5ef',
+//     toolboxBackgroundColour: '#f2ebe2',
+//     toolboxForegroundColour: '#28343b',
+//     flyoutBackgroundColour: '#fffaf2',
+//     flyoutOpacity: 0.96,
+//     scrollbarColour: '#c3b7aa',
+//     scrollbarOpacity: 0.7,
+//   },
+//   fontStyle: {
+//     family: '"Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif',
+//     size: 13,
+//     weight: 500,
+//   },
+//   blockStyles: {
+//     logic_blocks: { colourPrimary: '#4f7a8f', colourSecondary: '#406574', colourTertiary: '#2f4b57' },
+//     loop_blocks: { colourPrimary: '#4f8f6d', colourSecondary: '#3f7458', colourTertiary: '#2e5944' },
+//     math_blocks: { colourPrimary: '#c6844a', colourSecondary: '#a96f3c', colourTertiary: '#8a592f' },
+//     text_blocks: { colourPrimary: '#b86a80', colourSecondary: '#9c5668', colourTertiary: '#7d4552' },
+//     list_blocks: { colourPrimary: '#6d6fb8', colourSecondary: '#595a99', colourTertiary: '#444575' },
+//     variable_blocks: { colourPrimary: '#aa5d7b', colourSecondary: '#8c4c64', colourTertiary: '#6f3b4e' },
+//     procedure_blocks: { colourPrimary: '#8b6d52', colourSecondary: '#705640', colourTertiary: '#54402f' },
+//   },
+//   categoryStyles: {
+//     logic_category: { colour: '#4f7a8f' },
+//     loop_category: { colour: '#4f8f6d' },
+//     math_category: { colour: '#c6844a' },
+//     text_category: { colour: '#b86a80' },
+//     list_category: { colour: '#6d6fb8' },
+//     variable_category: { colour: '#aa5d7b' },
+//     procedure_category: { colour: '#8b6d52' },
+//   },
+// })
+
+const handleResize = () => {
+  if (workspace) {
+    Blockly.svgResize(workspace)
+  }
+}
+
+const handleRun = () => {
+  statusText.value = "执行环境尚未接入，可先复制代码到Python环境运行"
+  window.setTimeout(() => {
+    statusText.value = "准备就绪"
+  }, 2200)
+}
+
+const handleCopy = async () => {
+  try {
+    await navigator.clipboard.writeText(codePreview.value)
+    statusText.value = "已复制到剪贴板"
+  } catch {
+    statusText.value = "复制失败，请手动选择代码"
+  } finally {
+    window.setTimeout(() => {
+      statusText.value = "准备就绪"
+    }, 1800)
+  }
+}
+
+const handleDownload = () => {
+  const blob = new Blob([codePreview.value], { type: "text/x-python" })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = "blockly_program.py"
+  link.click()
+  URL.revokeObjectURL(url)
+  statusText.value = "已导出为 .py 文件"
+  window.setTimeout(() => {
+    statusText.value = "准备就绪"
+  }, 1800)
+}
+
+onMounted(() => {
+  if (!workspaceHost.value) return
+  setBlocklyLocale()
+  defineBlocks()
+  workspace = Blockly.inject(workspaceHost.value, {
+    toolbox,
+    grid: { spacing: 20, length: 3, colour: "#dfe6e9", snap: true },
+    zoom: {
+      controls: true,
+      wheel: true,
+      startScale: 1.02,
+      maxScale: 2.2,
+      minScale: 0.5,
+    },
+    trashcan: true,
+    renderer: "geras",
+    theme: Theme,
+    media: "/blockly-media/",
+  })
+  workspace.addChangeListener(updateCode)
+  updateCode()
+  window.addEventListener("resize", handleResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleResize)
+  if (workspace) {
+    workspace.dispose()
+    workspace = null
+  }
+})
+</script>
+
+<template>
+  <div class="app-shell">
+    <header class="app-header">
+      <div class="brand">
+        <span class="brand-badge">Blockly</span>
+        <div>
+          <h1>中文Python可视化编程平台</h1>
+          <p>拖拽方块，实时生成可执行的Python代码</p>
+        </div>
+      </div>
+      <div class="header-actions">
+        <button class="btn ghost" type="button" @click="handleCopy">
+          复制代码
+        </button>
+        <button class="btn ghost" type="button" @click="handleDownload">
+          导出 .py
+        </button>
+        <button class="btn primary" type="button" @click="handleRun">
+          运行
+        </button>
+      </div>
+    </header>
+
+    <main class="app-main">
+      <section class="workspace-panel">
+        <div class="panel-head">
+          <div>
+            <h2>工作区</h2>
+            <p>通过分类工具箱选择方块，构建你的程序</p>
+          </div>
+          <div class="panel-tip">
+            <span>实时反馈</span>
+          </div>
+        </div>
+        <div class="workspace-stage" ref="workspaceHost"></div>
+      </section>
+
+      <aside class="side-panel">
+        <div class="panel-head">
+          <div>
+            <h2>Python代码</h2>
+            <p>符合PEP8风格，支持直接导出</p>
+          </div>
+          <div class="panel-tip">预览</div>
+        </div>
+        <pre class="code-preview"><code>{{ codePreview }}</code></pre>
+        <div class="status-bar">
+          <span>{{ statusText }}</span>
+          <div class="status-actions">
+            <button class="btn subtle" type="button" @click="handleCopy">
+              复制
+            </button>
+            <button class="btn subtle" type="button" @click="handleDownload">
+              导出
+            </button>
+          </div>
+        </div>
+      </aside>
+    </main>
+
+    <footer class="app-footer">
+      <div>提示：初学者可从“基础”和“逻辑”开始组合，再尝试循环与列表</div>
+      <div class="footer-pill">当前模式：基础Python语法</div>
+    </footer>
+  </div>
+</template>
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/blockly/blocks.ts
+++ b/src/blockly/blocks.ts
@@ -0,0 +1,24 @@
+import * as Blockly from 'blockly/core'
+
+export const defineBlocks = () => {
+  Blockly.Blocks['cn_print'] = {
+    init() {
+      this.appendValueInput('TEXT').setCheck(null).appendField('打印')
+      this.setPreviousStatement(true, null)
+      this.setNextStatement(true, null)
+      this.setColour('#4F6D7A')
+      this.setTooltip('在控制台输出文本或变量内容')
+      this.setHelpUrl('')
+    },
+  }
+
+  Blockly.Blocks['cn_input'] = {
+    init() {
+      this.appendValueInput('PROMPT').setCheck(null).appendField('获取用户输入')
+      this.setOutput(true, 'String')
+      this.setColour('#A65D7B')
+      this.setTooltip('读取用户输入的文本内容')
+      this.setHelpUrl('')
+    },
+  }
+}
--- a/src/blockly/locale.ts
+++ b/src/blockly/locale.ts
@@ -0,0 +1,6 @@
+import * as Blockly from 'blockly'
+import * as zhHans from 'blockly/msg/zh-hans'
+
+export const setBlocklyLocale = () => {
+  Blockly.setLocale(zhHans)
+}
--- a/src/blockly/pythonGenerator.ts
+++ b/src/blockly/pythonGenerator.ts
@@ -0,0 +1,19 @@
+import { pythonGenerator } from 'blockly/python'
+import type { Block } from 'blockly/core'
+
+export const initPythonGenerator = () => {
+  pythonGenerator.forBlock['cn_print'] = (block: Block, generator) => {
+    const text = generator.valueToCode(block, 'TEXT', generator.ORDER_NONE) || "''"
+    return `print(${text})\n`
+  }
+
+  pythonGenerator.forBlock['cn_input'] = (block: Block, generator) => {
+    const prompt = generator.valueToCode(block, 'PROMPT', generator.ORDER_NONE)
+    const code = prompt ? `input(${prompt})` : 'input()'
+    return [code, generator.ORDER_FUNCTION_CALL]
+  }
+
+  pythonGenerator.addReservedWords('input,print')
+
+  return pythonGenerator
+}
--- a/src/blockly/toolbox.ts
+++ b/src/blockly/toolbox.ts
@@ -0,0 +1,88 @@
+export const toolbox = {
+  kind: 'categoryToolbox',
+  contents: [
+    {
+      kind: 'category',
+      name: '基础',
+      colour: '#4F6D7A',
+      contents: [
+        { kind: 'block', type: 'cn_print' },
+        { kind: 'block', type: 'cn_input' },
+        { kind: 'block', type: 'text' },
+        { kind: 'block', type: 'math_number' },
+        { kind: 'block', type: 'variables_set' },
+        { kind: 'block', type: 'variables_get' },
+      ],
+    },
+    {
+      kind: 'category',
+      name: '逻辑',
+      colour: '#5B7C99',
+      contents: [
+        { kind: 'block', type: 'controls_if' },
+        { kind: 'block', type: 'logic_compare' },
+        { kind: 'block', type: 'logic_operation' },
+        { kind: 'block', type: 'logic_boolean' },
+        { kind: 'block', type: 'logic_null' },
+      ],
+    },
+    {
+      kind: 'category',
+      name: '循环',
+      colour: '#6C8F5C',
+      contents: [
+        { kind: 'block', type: 'controls_repeat_ext' },
+        { kind: 'block', type: 'controls_whileUntil' },
+        { kind: 'block', type: 'controls_for' },
+        { kind: 'block', type: 'controls_flow_statements' },
+      ],
+    },
+    {
+      kind: 'category',
+      name: '数学',
+      colour: '#C07B4E',
+      contents: [
+        { kind: 'block', type: 'math_number' },
+        { kind: 'block', type: 'math_arithmetic' },
+        { kind: 'block', type: 'math_single' },
+        { kind: 'block', type: 'math_random_int' },
+        { kind: 'block', type: 'math_round' },
+      ],
+    },
+    {
+      kind: 'category',
+      name: '文本',
+      colour: '#B56B7A',
+      contents: [
+        { kind: 'block', type: 'text' },
+        { kind: 'block', type: 'text_join' },
+        { kind: 'block', type: 'text_length' },
+        { kind: 'block', type: 'text_isEmpty' },
+        { kind: 'block', type: 'text_print' },
+      ],
+    },
+    {
+      kind: 'category',
+      name: '列表',
+      colour: '#7B6BB5',
+      contents: [
+        { kind: 'block', type: 'lists_create_with' },
+        { kind: 'block', type: 'lists_length' },
+        { kind: 'block', type: 'lists_getIndex' },
+        { kind: 'block', type: 'lists_setIndex' },
+      ],
+    },
+    {
+      kind: 'category',
+      name: '变量',
+      colour: '#A65D7B',
+      custom: 'VARIABLE',
+    },
+    {
+      kind: 'category',
+      name: '函数',
+      colour: '#8B6D52',
+      custom: 'PROCEDURE',
+    },
+  ],
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,236 @@
+:root {
+  font-family: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
+  color: #0c1a21;
+  background-color: #f1f4f6;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  --bg: #f1f4f6;
+  --card: #ffffff;
+  --ink: #0c1a21;
+  --muted: #5c6b73;
+  --accent: #1f7a8c;
+  --accent-strong: #0b4f5a;
+  --shadow: 0 22px 60px rgba(12, 26, 33, 0.12);
+  --border: rgba(12, 26, 33, 0.08);
+  --gradient: radial-gradient(circle at top left, #e6f1f6 0%, #f7efe3 45%, #f1f4f6 100%);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--gradient);
+}
+
+#app {
+  min-height: 100vh;
+}
+
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding: 32px 40px 24px;
+  gap: 24px;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.brand-badge {
+  background: #0b4f5a;
+  color: #f1f6f8;
+  padding: 12px 16px;
+  border-radius: 16px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.brand h1 {
+  margin: 0;
+  font-size: 26px;
+}
+
+.brand p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.app-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
+  gap: 20px;
+  align-items: stretch;
+}
+
+.workspace-panel,
+.side-panel {
+  background: var(--card);
+  border-radius: 24px;
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.panel-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 22px;
+  border-bottom: 1px solid var(--border);
+  background: linear-gradient(135deg, rgba(31, 122, 140, 0.08), rgba(255, 255, 255, 0.8));
+}
+
+.panel-head h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.panel-head p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.panel-tip {
+  background: rgba(31, 122, 140, 0.12);
+  color: var(--accent-strong);
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.workspace-stage {
+  flex: 1;
+  min-height: 520px;
+}
+
+.code-preview {
+  flex: 1;
+  margin: 0;
+  padding: 20px;
+  background: #0b1f24;
+  color: #d3f5ff;
+  font-family: "Source Code Pro", "JetBrains Mono", Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  overflow: auto;
+}
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: #0f2a31;
+  color: #c7dfe5;
+  font-size: 12px;
+}
+
+.status-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  border: 0;
+  border-radius: 999px;
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.btn.primary {
+  background: var(--accent);
+  color: #fefefe;
+  box-shadow: 0 12px 30px rgba(31, 122, 140, 0.25);
+}
+
+.btn.primary:hover {
+  transform: translateY(-1px);
+}
+
+.btn.ghost {
+  background: rgba(31, 122, 140, 0.1);
+  color: var(--accent-strong);
+}
+
+.btn.subtle {
+  background: rgba(255, 255, 255, 0.18);
+  color: #e3f4f8;
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.app-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--muted);
+  font-size: 13px;
+  padding: 0 4px;
+}
+
+.footer-pill {
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(31, 122, 140, 0.12);
+  color: var(--accent-strong);
+  font-weight: 600;
+}
+
+@media (max-width: 980px) {
+  .app-shell {
+    padding: 20px;
+  }
+
+  .app-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .header-actions {
+    flex-wrap: wrap;
+  }
+
+  .app-main {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-stage {
+    min-height: 420px;
+  }
+
+  .app-footer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#041E49"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>`
				`@@ -0,0 +1 @@`
				<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="12.71" height="8.79" viewBox="0 0 12.71 8.79"><title>dropdown-arrow</title><g opacity="0.1"><path d="M12.71,2.44A2.41,2.41,0,0,1,12,4.16L8.08,8.08a2.45,2.45,0,0,1-3.45,0L0.72,4.16A2.42,2.42,0,0,1,0,2.44,2.48,2.48,0,0,1,.71.71C1,0.47,1.43,0,6.36,0S11.75,0.46,12,.71A2.44,2.44,0,0,1,12.71,2.44Z" fill="#231f20"/></g><path d="M6.36,7.79a1.43,1.43,0,0,1-1-.42L1.42,3.45a1.44,1.44,0,0,1,0-2c0.56-.56,9.31-0.56,9.87,0a1.44,1.44,0,0,1,0,2L7.37,7.37A1.43,1.43,0,0,1,6.36,7.79Z" fill="#fff"/></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>