好友
阅读权限25
听众
最后登录1970-1-1
|
本帖最后由 bdxs2019 于 2025-9-13 14:23 编辑
这套是基于自己用AI开发的经验总结后制作的一套辅助工具（目前市面还没有发现同类的工具，可能我没有找到），主要目的是帮助小白用户快速入门AI编程，可以开发出自己喜欢的工具/软件。
主要解决：经常用一句话或一段话表达开发需求，造成后续与AI“无限次”沟通的烦恼，甚至AI开发后不是自己的需求的功能等问题。每次开发后，都可以备份项目，可以积累和复用项目开发经验，比较实用。
一个完整的需求指令树，发给AI IDE可以快速开发出一套完整的系统/工具/软件，可大幅减少与AI沟通频次，同时解决需求与结果不匹配等问题，极大提升AI开发效率。
9月13日更新内容（新增一套模板附件：我自己用PHP+MySQL开发的网址导航指令树-初稿）：
1、新增右下角新增根节点飘浮按钮，方便添加父节点
2、新增了一套绿色护眼版，美化了图标
3、修复了已知问题
以下2套【仅颜色不一样】，功能完全一样：
1、Bate1.10紫色版：
AI开发指令树编辑器(紫色版).zip
(224.41 KB, 下载次数: 179)
2、Bate1.10绿色版：
AI开发指令树编辑器(绿色版).zip
(224.98 KB, 下载次数: 70)
注：测试版本，可能存在bug，不再匹配手机端，程序里的模板还是没有内置，请下载体验模板导入操作。
在线体验：https://www.qingqiqifu.com/aikf/
Bate1.0 旧版本：
AI开发指令树编辑器.zip
(194.19 KB, 下载次数: 66)
纯HTML代码，解压后，运行index.html，用本地浏览器打开即可运行，无需依赖任何网络，数据保存本地浏览器里，需自行“保存项目”，可再次导入。
零编程基础可下载以下4套体验模板（下载解压后，直接导入.json，做些节点需求修改即可复制Markdown格式发给Trae/Cursor开发）—— 起个举一反三作用
可以给AI具体的要求，如：活动的页面可以直接把优惠具体内容写入需求里，AI会自动排版，生成后不满意的模块，继续用指令让AI进行修改。
功能性网址导航系统（初稿）.zip
(5.4 KB, 下载次数: 40)
公司开业优惠活动海报.zip
(1.83 KB, 下载次数: 39)
公司峰会类页面开发AI指令树.zip
(1.92 KB, 下载次数: 28)
个人求职简历页面开发AI指令树.zip
(2.51 KB, 下载次数: 33)
体验模板的使用案例教程请看【置顶回复】
几张图欣赏：
AI开发指令树编辑器是一款专为开发者设计的智能项目规划工具，通过可视化的树状结构帮助开发者快速构建项目架构、梳理开发流程，并生成标准化的开发指令文档。
核心功能
1、配置模式 （目前只有 web HTML和在线简历这套模板可以体验）
适用场景：新手和快速开发场景
核心特性：
4步骤引导式配置流程
智能项目结构生成
实时配置进度跟踪
自动生成完整开发指令树
2、手动模式
适用场景：有经验的开发者和复杂项目需求
核心特性：
完全自由的节点创建、编辑、拖拽功能
支持自定义项目结构
精确控制每个开发环节和指令细节
灵活的树状结构管理
3、项目管理
新建项目：创建全新的项目配置
重置数据：清空当前所有配置和数据
导入项目：导入之前保存的JSON项目文件
保存项目：保存为JSON格式，支持重新导入编辑
复制Markdown：复制为Markdown文档格式
4、指令树管理
指令树制作器：可视化树状结构编辑器
创建根节点：构建指令树的起始节点
导出指令树：导出完整的指令树结构
导入指令树：导入已有的指令树配置
5、使用场景
①适合人群
新手开发者：通过配置模式快速上手项目开发
经验开发者：使用手动模式精确控制项目架构
项目经理：利用可视化工具进行项目规划和需求梳理
团队协作：标准化项目结构，提高团队开发效率
②应用场景
项目启动阶段：快速生成项目架构和开发计划
需求分析：可视化梳理项目功能模块和依赖关系
团队沟通：通过标准化文档提高沟通效率
知识管理：积累和复用项目开发经验
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI开发指令树编辑器</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="navbar-container">
<!-- 左侧Logo -->
<div class="navbar-brand">
<div class="logo">
<div class="logo-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
<circle cx="12" cy="7" r="2" fill="currentColor"/>
<circle cx="12" cy="12" r="2" fill="currentColor"/>
<circle cx="12" cy="17" r="2" fill="currentColor"/>
</svg>
</div>
<span class="logo-subtitle">AI开发指令树编辑器 Bate1.10</span>
</div>
</div>
<!-- 右侧导航菜单 -->
<div class="navbar-menu">
<a href="#" class="nav-item active">首页</a>
<a href="#" class="nav-item">模板库</a>
<a href="#" class="nav-item">帮助文档</a>
<a href="#" class="nav-item">关于我们</a>
</div>
</div>
</nav>
<!-- 横排模块区域 - 移动自中间栏 -->
<div class="horizontal-modules">
<!-- 配置进度模块 -->
<div class="guide-progress-horizontal">
<div class="progress-content">
<div class="progress-header-horizontal">
<span class="progress-title">配置进度（项目配置中心选择👇）</span>
<span class="progress-count" id="progressCount">0/4</span>
</div>
<!-- 横排步骤指引 -->
<div class="step-guide-horizontal">
<div class="step-item-horizontal active" data-step="1">
<span class="step-number">1</span>
<span class="step-text">选择项目类型</span>
<span class="step-status" id="step1Status">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
</div>
<div class="step-arrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="step-item-horizontal" data-step="2">
<span class="step-number">2</span>
<span class="step-text">选择开发语言</span>
<span class="step-status" id="step2Status">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
</div>
<div class="step-arrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="step-item-horizontal" data-step="3">
<span class="step-number">3</span>
<span class="step-text">选择数据库</span>
<span class="step-status" id="step3Status">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
</div>
<div class="step-arrow">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="step-item-horizontal" data-step="4">
<span class="step-number">4</span>
<span class="step-text">生成项目结构</span>
<span class="step-status" id="step4Status">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
</div>
</div>
<!-- 新手提示 -->
<div class="config-hint-small">
<span class="hint-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<circle cx="12" cy="17" r="1" fill="currentColor"/>
</svg>
</span> <strong>新手提示：</strong>按步骤选择配置，每完成一步会有<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: middle; margin: 0 2px;"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>标记。也可以跳过直接使用右侧"手动添加节点"。
</div>
</div>
</div>
<!-- 新手操作向导 -->
<div class="beginner-guide">
<div class="guide-options">
<div class="option-card recommended" id="configOption">
<div class="option-header">
<span class="option-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="2"/>
</svg>
</span>
<span class="option-title">配置模式</span>
<span class="recommended-badge">推荐</span>
</div>
<div class="option-desc">适合新手和快速开发场景，通过简单的步骤选择项目类型、开发语言、数据库等配置，系统将智能生成完整的项目结构和开发指令树，让您快速启动项目开发</div>
<div class="option-steps">
<span class="step-hint">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: middle; margin-right: 4px;">
<path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
请看左侧步骤指引
</span>
</div>
</div>
<div class="option-card" id="manualOption">
<div class="option-header">
<span class="option-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 20h9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="option-title">手动模式</span>
</div>
<div class="option-desc">适合有经验的开发者和复杂项目需求，提供完全自由的节点创建、编辑、拖拽功能，支持自定义项目结构，可精确控制每个开发环节和指令细节</div>
<button class="option-btn" id="addRootBtn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<line x1="12" y1="8" x2="12" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="8" y1="12" x2="16" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
开始手动创建
</button>
</div>
<div class="option-card" id="templateOption">
<div class="option-header">
<span class="option-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="option-title">示例模板</span>
</div>
<div class="option-desc">选择预设模板快速开始项目</div>
<div class="template-quick-list">
<div class="template-item-mini" data-template="web-app">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M2 12h20" stroke="currentColor" stroke-width="2"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke="currentColor" stroke-width="2"/>
</svg>
Web应用
</div>
<div class="template-item-mini" data-template="mobile-app">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="2" width="14" height="20" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
<line x1="12" y1="18" x2="12.01" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
移动应用
</div>
<div class="template-item-mini" data-template="api-service">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
API服务
</div>
<div class="template-item-mini" data-template="data-analysis">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3v18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
数据分析
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- 左侧栏 - 项目配置中心 -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="sidebar-title">项目配置中心</div>
<button class="collapse-btn" id="collapseBtn" title="折叠/展开">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<div class="sidebar-content">
<!-- 项目类型选择 -->
<div class="config-section">
<div class="section-title">1. 项目类型选择</div>
<div class="config-list" id="projectTypeList">
<div class="config-item active" data-value="web">Web应用</div>
<div class="config-item" data-value="miniprogram">小程序</div>
<div class="config-item" data-value="desktop">桌面应用</div>
<div class="config-item" data-value="mobile">移动App</div>
<div class="config-item" data-value="management">管理系统/ERP/CRM</div>
<div class="config-item" data-value="other">其他（自定义）</div>
</div>
</div>
<!-- 开发语言与运行环境 -->
<div class="config-section">
<div class="section-title">2. 开发语言与运行环境</div>
<div class="config-list" id="languageList">
<div class="config-item active" data-value="html">HTML + CSS + JS（静态网页）</div>
<div class="config-item" data-value="php">PHP</div>
<div class="config-item" data-value="python">Python</div>
<div class="config-item" data-value="java">Java</div>
<div class="config-item" data-value="nodejs">Node.js</div>
<div class="config-item" data-value="other">其他语言（用户自定义）</div>
</div>
</div>
<!-- 数据库选择 -->
<div class="config-section">
<div class="section-title">3. 数据库选择</div>
<div class="config-list" id="databaseList">
<div class="config-item active" data-value="none">无数据库（纯前端应用）</div>
<div class="config-item" data-value="mysql">MySQL</div>
<div class="config-item" data-value="sqlite">SQLite3</div>
<div class="config-item" data-value="postgresql">PostgreSQL</div>
<div class="config-item" data-value="mongodb">MongoDB</div>
<div class="config-item" data-value="other">其他（自定义）</div>
</div>
</div>
<!-- 应用模板市场 -->
<div class="config-section">
<div class="section-title">4. 应用模板市场（架构规范）</div>
<div class="template-list" id="templateList">
<!-- 基础展示型网站 -->
<div class="template-category">
<div class="category-title">基础展示型网站</div>
<div class="template-item" data-template="corporate">
<div class="template-name">企业官网</div>
<div class="template-desc">公司介绍、产品展示、联系方式</div>
</div>
<div class="template-item" data-template="blog">
<div class="template-name">个人博客</div>
<div class="template-desc">文章发布、分类管理、评论系统</div>
</div>
<div class="template-item" data-template="resume">
<div class="template-name">在线简历</div>
<div class="template-desc">个人信息、工作经历、技能展示</div>
</div>
</div>
<!-- 电商类 -->
<div class="template-category">
<div class="category-title">电商类</div>
<div class="template-item" data-template="product-display">
<div class="template-name">商品展示</div>
<div class="template-desc">商品列表、详情页、搜索筛选</div>
</div>
<div class="template-item" data-template="shopping-cart">
<div class="template-name">购物车</div>
<div class="template-desc">购物车管理、订单处理、库存管理</div>
</div>
<div class="template-item" data-template="payment">
<div class="template-name">支付集成</div>
<div class="template-desc">支付接口、订单状态、退款处理</div>
</div>
</div>
<!-- 管理系统类 -->
<div class="template-category">
<div class="category-title">管理系统类</div>
<div class="template-item" data-template="user-management">
<div class="template-name">用户管理</div>
<div class="template-desc">用户注册、登录、信息管理</div>
</div>
<div class="template-item" data-template="permission">
<div class="template-name">权限管理</div>
<div class="template-desc">角色分配、权限控制、访问限制</div>
</div>
<div class="template-item" data-template="reports">
<div class="template-name">数据报表</div>
<div class="template-desc">数据统计、图表展示、报表导出</div>
</div>
</div>
<!-- 社交类 -->
<div class="template-category">
<div class="category-title">社交类</div>
<div class="template-item" data-template="user-auth">
<div class="template-name">用户注册/登录</div>
<div class="template-desc">账号系统、第三方登录、密码找回</div>
</div>
<div class="template-item" data-template="social-feed">
<div class="template-name">朋友圈/动态</div>
<div class="template-desc">动态发布、时间线、好友关注</div>
</div>
<div class="template-item" data-template="comments">
<div class="template-name">评论/点赞</div>
<div class="template-desc">评论系统、点赞功能、互动通知</div>
</div>
</div>
<!-- 教育类 -->
<div class="template-category">
<div class="category-title">教育类</div>
<div class="template-item" data-template="question-bank">
<div class="template-name">在线题库</div>
<div class="template-desc">题目管理、在线答题、成绩统计</div>
</div>
<div class="template-item" data-template="video-course">
<div class="template-name">视频课程</div>
<div class="template-desc">课程播放、进度跟踪、学习记录</div>
</div>
<div class="template-item" data-template="homework">
<div class="template-name">作业管理</div>
<div class="template-desc">作业布置、提交批改、成绩管理</div>
</div>
</div>
<!-- 小程序模板 -->
<div class="template-category">
<div class="category-title">小程序模板</div>
<div class="template-item" data-template="mall-miniprogram">
<div class="template-name">商城小程序</div>
<div class="template-desc">商品展示、下单支付、订单管理</div>
</div>
<div class="template-item" data-template="food-miniprogram">
<div class="template-name">点餐小程序</div>
<div class="template-desc">菜单展示、在线点餐、配送跟踪</div>
</div>
<div class="template-item" data-template="booking-miniprogram">
<div class="template-name">预约小程序</div>
<div class="template-desc">服务预约、时间管理、通知提醒</div>
</div>
</div>
<!-- 移动App模板 -->
<div class="template-category">
<div class="category-title">移动App模板</div>
<div class="template-item" data-template="news-app">
<div class="template-name">资讯阅读</div>
<div class="template-desc">新闻列表、文章阅读、分类浏览</div>
</div>
<div class="template-item" data-template="tool-app">
<div class="template-name">工具类</div>
<div class="template-desc">实用工具、功能集合、便民服务</div>
</div>
<div class="template-item" data-template="social-app">
<div class="template-name">社交类</div>
<div class="template-desc">即时通讯、社交网络、用户互动</div>
</div>
</div>
</div>
<div class="config-actions">
<button class="config-btn" id="generateBtn">根据配置生成项目结构</button>
<div style="margin-top: 10px; font-size: 11px; color: #666; text-align: center;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: middle; margin-right: 4px;">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<circle cx="12" cy="17" r="1" fill="currentColor"/>
</svg>
提示：必须完成所有4个配置步骤，然后点击"根据配置生成项目结构"按钮生成指令树
</div>
</div>
</div>
</div>
</div>
<!-- 右栏 - 编辑框 -->
<div class="right-panel" id="rightPanel">
<!-- 数据管理工具 - 移至右侧上方并排显示 -->
<div class="tools-section-horizontal">
<button class="tool-btn-horizontal" id="newProjectBtn" title="创建新项目">
<span class="btn-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="12" y1="18" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="9" y1="15" x2="15" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
<span class="btn-text">新建项目</span>
</button>
<button class="tool-btn-horizontal" id="resetDataBtn" title="重置所有数据">
<span class="btn-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<polyline points="23,4 23,10 17,10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="1,20 1,14 7,14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="btn-text">重置数据</span>
</button>
<button class="tool-btn-horizontal" id="importProjectBtn" title="导入之前保存的JSON文件">
<span class="btn-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
<span class="btn-text">导入项目</span>
</button>
<button class="tool-btn-horizontal" id="saveProjectBtn" title="保存为JSON格式，可重新导入编辑">
<span class="btn-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="17,21 17,13 7,13 7,21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="7,3 7,8 15,8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="btn-text">保存项目</span>
</button>
<button class="tool-btn-horizontal" id="exportDocBtn" title="导出为Markdown文档格式">
<span class="btn-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="16" y1="13" x2="8" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="16" y1="17" x2="8" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<polyline points="10,9 9,9 8,9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
<span class="btn-text">复制Markdown</span>
</button>
</div>
<div class="right-content">
<div class="tree-canvas" id="treeCanvas">
<!-- 指令树制作器 -->
<div class="ai-tree-maker" id="aiTreeMaker" style="display: none;">
<div class="tree-container">
<div class="tree-header">
<h3>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: middle; margin-right: 8px;">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
<circle cx="12" cy="7" r="2" fill="currentColor"/>
<circle cx="12" cy="12" r="2" fill="currentColor"/>
<circle cx="12" cy="17" r="2" fill="currentColor"/>
</svg>
指令树制作器
</h3>
<button class="add-root-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<line x1="12" y1="8" x2="12" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="8" y1="12" x2="16" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
创建根节点
</button>
</div>
<div class="tree-nodes" id="treeNodes">
<div class="empty-tree">
<p style="text-align: center; color: #999; padding: 40px 20px; font-style: italic;">
暂无节点，点击"创建根节点"开始构建指令树
</p>
</div>
</div>
<div class="tree-actions" style="margin-top: 20px; display: flex; gap: 10px; justify-content: center;">
<button class="guide-action-btn secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="17,8 12,3 7,8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
导出指令树
</button>
<button class="guide-action-btn secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
导入指令树
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 隐藏的文件输入 -->
<input type="file" id="fileInput" accept=".json,.zip" style="display: none;">
<input type="file" id="jsonFileInput" accept=".json" style="display: none;">
<!-- 固定浮动的添加根节点按钮 -->
<div class="floating-add-root-btn" id="floatingAddRootBtn" title="新增根节点">
<div class="floating-btn-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<line x1="12" y1="8" x2="12" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="8" y1="12" x2="16" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<span class="floating-btn-text">新增根节点</span>
</div>
<script src="scripts.js"></script>
</body>
</html> |
免费评分
-
查看全部评分
|
发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。 |
|
|
|
|
|
|
[复制链接]
发表于 2025-9-6 19:21
|
发表于 2025-9-7 09:06
