xuyue/blockly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

demo

Browse Source
This commit is contained in:
yuetsh
2026-01-14 20:32:28 +08:00
commit d2cf646974
41 changed files with 2519 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@@ -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?

3
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

5
README.md Normal file
View File

@@ -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).

13
index.html Normal file
View File

@@ -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>

1733
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

27
package.json Normal file
View File

@@ -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"
}
}

BIN
public/blockly-media/1x1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 B

BIN
public/blockly-media/click.mp3 Normal file
View File

Binary file not shown.

BIN
public/blockly-media/click.ogg Normal file
View File

Binary file not shown.

BIN
public/blockly-media/click.wav Normal file
View File

Binary file not shown.

1
public/blockly-media/delete-icon.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

BIN
public/blockly-media/delete.mp3 Normal file
View File

Binary file not shown.

BIN
public/blockly-media/delete.ogg Normal file
View File

Binary file not shown.

BIN
public/blockly-media/delete.wav Normal file
View File

Binary file not shown.

BIN
public/blockly-media/disconnect.mp3 Normal file
View File

Binary file not shown.

BIN
public/blockly-media/disconnect.ogg Normal file
View File

Binary file not shown.

BIN
public/blockly-media/disconnect.wav Normal file
View File

Binary file not shown.

1
public/blockly-media/dropdown-arrow.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 569 B

1
public/blockly-media/foldout-icon.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 150 B

BIN
public/blockly-media/handclosed.cur Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 326 B

BIN
public/blockly-media/handdelete.cur Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 B

BIN
public/blockly-media/handopen.cur Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 B

BIN
public/blockly-media/pilcrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1010 B

BIN
public/blockly-media/quote0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 771 B

BIN
public/blockly-media/quote1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 738 B

3
public/blockly-media/resize-handle.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 218 B

BIN
public/blockly-media/sprites.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

74
public/blockly-media/sprites.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
public/vite.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

198
src/App.vue Normal file
View File

@@ -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>

1
src/assets/vue.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

24
src/blockly/blocks.ts Normal file
View File

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

6
src/blockly/locale.ts Normal file
View File

@@ -0,0 +1,6 @@
import * as Blockly from 'blockly'
import * as zhHans from 'blockly/msg/zh-hans'
export const setBlocklyLocale = () => {
Blockly.setLocale(zhHans)
}

19
src/blockly/pythonGenerator.ts Normal file
View File

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

88
src/blockly/toolbox.ts Normal file
View File

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

5
src/main.ts Normal file
View File

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

236
src/style.css Normal file
View File

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

16
tsconfig.app.json Normal file
View File

@@ -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"]
}

7
tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

26
tsconfig.node.json Normal file
View File

@@ -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"]
}

7
vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
})