demo

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>

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>

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('')
+    },
+  }
+}

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)
+}

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
+}

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',
+    },
+  ],
+}

src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

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;
+  }
+}