vue3实现可视化原型图ui拖拽设计编辑器代码-html代码-BFW代码库

代码语言：html

代码描述：vue3实现可视化原型图ui拖拽设计编辑器代码，可拖拽组件，还可导出导入json数据，ai生成ui原型图，多页面管理。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业级可视化原型设计工具</title>

    <!-- Vue 3 CDN -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.prod.3.5.17.js"></script>
    <!-- Font Awesome 4.7 CDN -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- ECharts CDN -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.4.2.js"></script>

    <style>
        /* 全局样式与商务蓝主题 */
        :root {
            --primary-color: #0052cc;
            --primary-light-color: #e6f0ff;
            --primary-dark-color: #003e99;
            --bg-color: #f4f5f7;
            --panel-bg-color: #ffffff;
            --text-color: #172b4d;
            --border-color: #dfe1e6;
            --hover-bg-color: #f0f6ff;
            --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            --font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
        }

        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: var(--font-family);
            background-color: var(--bg-color);
            color: var(--text-color);
            overflow: hidden;
            font-size: 14px;
        }

        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        /* 头部 */
        .header {
            display: flex;
            align-items: center;
            padding: 0 20px;
            height: 60px;
            background-color: var(--panel-bg-color);
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
            box-shadow: var(--box-shadow);
            z-index: 10;
        }

        .header .logo {
            font-size: 20px;
            font-weight: 600;
            color: var(--primary-color);
        }

        .header .logo .fa {
            margin-right: 8px;
        }

        .header .actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* 按钮样式 */
        .btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .btn:hover {
            background-color: var(--primary-dark-color);
        }

        .btn.secondary {
            background-color: #f0f0f0;
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }

        .btn.secondary:hover {
            background-color: #e0e0e0;
        }
        
        .btn-group .btn {
            border-radius: 0;
        }
        .btn-group .btn:first-child {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        .btn-group .btn:last-child {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .btn-group .btn.active {
            background-color: var(--primary-dark-color);
            color: white;
        }

        /* 主体内容区 */
        .main-content {
            display: flex;
            flex-grow: 1;
            overflow: hidden;
        }

        /* 侧边面板通用样式 */
        .panel {
            background-color: var(--panel-bg-color);
            box-shadow: var(--box-shadow);
            display: flex;
            flex-direction: column;
        }
        .panel-header {
            padding: 15px;
            font-weight: 600;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        .panel-content {
            padding: 15px;
            overflow-y: auto;
        }

        /* 左侧面板 */
        .left-panel {
            width: 240px;
            flex-shrink: 0;
        }
        .page-list .page-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 5px;
        }
        .page-list .page-item:hover {
            background-color: var(--hover-bg-color);
        }
        .page-list .page-item.active {
            background-color: var(--primary-light-color);
            color: var(--primary-color);
            font-weight: 600;
        }
        .page-list .delete-page {
            color: #ccc;
            visibility: hidden;
        }
        .page-list .page-item:hover .delete-page {
            visibility: visible;
        }
        .page-list .delete-page:hover {
            color: #ff4d4f;
        }

        .component-library .component-item {
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            margin-bottom: 10px;
            cursor: grab;
            text-align: center;
            background-color: #fff;
            transition: all 0.2s;
        }
        .component-library .component-item:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            box-shadow: 0 2px 4px rgba(0, 82, 204, 0.2);
        }
        .component-library .component-item .fa {
            margin-right: 8px;
        }

        /* 中间画布区 */
        .canvas-area {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow: auto;
        }
        .canvas {
            position: relative;
            background-color: white;
            box-shadow: var(--box-shadow);
            transition: all 0.3s ease;
            overflow: hidden;
        }
        .canvas.pc {
            width: 100%;
            height: 100%;
            border: 1px dashed var(--border-color);
        }
        .canvas.mobile {
            width: 375px;
            height: 667px;
            border: 8px solid #333;
            border-radius: 30px;
        }

        .canvas-component {
            position: absolute;
            cursor: move;
            min-height: 20px;
            min-width: 20px;
        }
        .canvas-component.selected {
            outline: 2px solid var(--primary-color);
            z-index: 100;
        }
        .canvas-component:hover {
             outline: 2px dashed var(--primary-light-color);
        }

        /* 右侧属性面板 */
        .right-panel {
            width: 280px;
            flex-shrink: 0;
        }
        .prop-item {
            margin-bottom: 15px;
        }
        .prop-item label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        .prop-item input, .prop-item select, .prop-item textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            box-sizing: border-box;
        .........完整代码请登录后点击上方下载按钮下载查看