314 lines
16 KiB
HTML
314 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>PMAI工具</title>
|
||
<script src="libs/css/tailwind.css"></script>
|
||
<script src="libs/js/iconify-icon.min.js"></script>
|
||
<script src="libs/js/marked.min.js"></script>
|
||
<link rel="stylesheet" href="libs/css/inter-font.css">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body class="bg-gray-100 h-screen flex flex-col">
|
||
|
||
<!-- 顶部标题栏 -->
|
||
<header class="bg-gradient-to-r from-orange-500 to-pink-500 p-3 flex items-center justify-between border-b-4 border-black">
|
||
<div class="flex items-center space-x-2">
|
||
<iconify-icon icon="ph:lightning-fill" class="text-3xl text-white"></iconify-icon>
|
||
<h1 id="page-title" class="text-2xl font-black text-white tracking-tight">产品画布</h1>
|
||
|
||
<a target="_blank" href="https://github.com/shixixiyue/pmtools" class="translate-x-8">
|
||
<img src="https://img.shields.io/badge/开源地址-GitHub-informational">
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 右侧按钮组 -->
|
||
<div class="flex items-center gap-3">
|
||
<!-- API配置按钮 -->
|
||
<button id="settings-btn" class="settings-btn bg-white/20 text-white p-2 border-2 border-white hover:bg-white/30 transition-all" title="API配置">
|
||
API配置
|
||
<iconify-icon icon="ph:gear-six-fill" class="text-2xl"></iconify-icon>
|
||
</button>
|
||
|
||
<span class="text-white font-bold text-sm">点击切换模块</span>
|
||
<iconify-icon icon="ph:hand-pointing-fill" class="text-2xl text-yellow-300 wave-hand"></iconify-icon>
|
||
<div id="module-button-group" class="flex items-center gap-2"></div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="flex-1 min-h-0 grid grid-cols-1 md:grid-cols-3 gap-4 p-4 overflow-hidden">
|
||
|
||
<!-- 左侧对话面板 -->
|
||
<div class="md:col-span-1 bg-white wild-border border-cyan-500 flex flex-col min-h-0">
|
||
<!-- 对话历史顶部栏 -->
|
||
<div class="p-3 border-b-3 border-gray-300 bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<iconify-icon icon="ph:chats-circle-fill" class="text-2xl text-white"></iconify-icon>
|
||
<span class="font-black text-white">对话历史</span>
|
||
</div>
|
||
<button id="clear-history-btn" class="clear-history-btn bg-red-500 text-white px-3 py-1 border-2 border-black hover:bg-red-600 transition-all flex items-center gap-1 font-bold" title="清空对话历史">
|
||
<iconify-icon icon="ph:trash-bold" class="text-lg"></iconify-icon>
|
||
<span class="text-sm">清空</span>
|
||
</button>
|
||
</div>
|
||
<!-- 对话历史区 -->
|
||
<div id="chat-history" class="flex-1 p-4 overflow-y-auto space-y-3">
|
||
<!-- 欢迎消息 -->
|
||
<div class="flex justify-start">
|
||
<div class="chat-bubble-ai">
|
||
👋 欢迎使用产品画布/SWOT分析工具！请输入您的需求，我将为您生成专业的分析图表。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 输入区 -->
|
||
<div class="p-3 border-t-3 border-gray-300 bg-yellow-50">
|
||
<!-- 图片缩略图预览区 -->
|
||
<div id="image-preview-container" class="mb-2 flex flex-wrap gap-2 hidden">
|
||
<!-- 动态插入图片缩略图 -->
|
||
</div>
|
||
<div class="relative flex items-center gap-2">
|
||
<!-- 图片上传按钮 -->
|
||
<button id="image-upload-btn" class="image-upload-btn text-gray-500 hover:text-cyan-600 transition-colors p-2" title="上传图片 (支持粘贴)">
|
||
<iconify-icon icon="ph:image-bold" class="text-2xl"></iconify-icon>
|
||
</button>
|
||
<input type="file" id="image-file-input" accept="image/jpeg,image/png,image/webp,image/gif" multiple class="hidden" />
|
||
<textarea
|
||
id="chat-input"
|
||
placeholder="输入您的想法，按Enter发送，Shift+Enter换行，可粘贴图片..."
|
||
class="flex-1 auto-resize-input border-2 border-gray-800 focus:border-cyan-500 focus:outline-none transition-colors font-medium"
|
||
rows="1"
|
||
></textarea>
|
||
<button id="send-button" class="text-cyan-600 hover:text-cyan-700 transition-colors p-2 hover:scale-110 transform duration-200">
|
||
<iconify-icon icon="ph:paper-plane-tilt-fill" class="text-3xl"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<!-- 图片功能提示 -->
|
||
<div id="image-vision-disabled-tip" class="mt-1 text-xs text-gray-400 hidden">
|
||
<iconify-icon icon="ph:info" class="align-middle"></iconify-icon>
|
||
图片解析功能已禁用
|
||
</div>
|
||
<div id="chat-quick-actions" class="mt-2 flex flex-wrap gap-2 hidden"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧显示面板 -->
|
||
<div class="md:col-span-2 bg-white wild-border border-purple-600 flex flex-col min-h-0">
|
||
<div id="svg-viewer" class="flex-1 flex items-center justify-center p-4 bg-gradient-to-br from-purple-50 to-pink-50 overflow-auto">
|
||
<div id="svg-placeholder" class="text-center text-gray-400">
|
||
<iconify-icon icon="ph:image-square" class="text-6xl mx-auto text-purple-400"></iconify-icon>
|
||
<p class="mt-2 font-bold" id="placeholder-text">生成的产品画布将在此处显示</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<div class="p-3 border-t-3 border-gray-300 flex justify-end items-center gap-2 bg-gray-800">
|
||
<button id="zoom-out-btn" class="p-2 bg-white text-gray-700 border-2 border-black hover:bg-gray-200 transition-all" title="缩小">
|
||
<iconify-icon icon="ph:magnifying-glass-minus-bold" class="text-xl"></iconify-icon>
|
||
</button>
|
||
<button id="zoom-in-btn" class="p-2 bg-white text-gray-700 border-2 border-black hover:bg-gray-200 transition-all" title="放大">
|
||
<iconify-icon icon="ph:magnifying-glass-plus-bold" class="text-xl"></iconify-icon>
|
||
</button>
|
||
<button id="zoom-reset-btn" class="p-2 bg-white text-gray-700 border-2 border-black hover:bg-gray-200 transition-all" title="重置缩放">
|
||
<iconify-icon icon="ph:arrow-counter-clockwise-bold" class="text-xl"></iconify-icon>
|
||
</button>
|
||
<button id="download-svg-btn" class="p-2 bg-orange-500 text-white border-2 border-black hover:bg-orange-600 transition-all" title="下载SVG">
|
||
<iconify-icon icon="mdi:download-outline" class="text-xl"></iconify-icon>
|
||
</button>
|
||
<button id="copy-image-btn" class="p-2 bg-yellow-500 text-white border-2 border-black hover:bg-yellow-600 transition-all" title="复制图片到剪贴板">
|
||
<iconify-icon icon="ph:clipboard-bold" class="text-xl"></iconify-icon>
|
||
</button>
|
||
<button id="export-image-btn" class="p-2 bg-green-500 text-white border-2 border-black hover:bg-green-600 transition-all" title="导出为图片">
|
||
<iconify-icon icon="mdi:image-outline" class="text-xl"></iconify-icon>
|
||
</button>
|
||
<button id="open-page-btn" class="p-2 bg-cyan-500 text-white border-2 border-black hover:bg-cyan-600 transition-all" title="预览落地页">
|
||
<iconify-icon icon="ph:monitor-play-bold" class="text-xl"></iconify-icon>
|
||
</button>
|
||
<button id="view-code-btn" class="p-2 bg-blue-500 text-white border-2 border-black hover:bg-blue-600 transition-all" title="查看代码">
|
||
<iconify-icon icon="mdi:code-tags" class="text-xl"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<!-- API配置模态窗 -->
|
||
<div id="config-modal" class="modal-overlay">
|
||
<div class="modal-content">
|
||
<!-- 模态窗头部 -->
|
||
<div class="bg-gradient-to-r from-blue-600 to-purple-600 p-4 border-b-4 border-black flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<iconify-icon icon="ph:plugs-connected-fill" class="text-3xl text-white"></iconify-icon>
|
||
<h2 class="text-xl font-black text-white">API 配置</h2>
|
||
</div>
|
||
<button id="close-modal-btn" class="text-white hover:bg-white/20 p-2 transition-all">
|
||
<iconify-icon icon="ph:x-bold" class="text-2xl"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 模态窗内容 -->
|
||
<div class="p-6 space-y-4">
|
||
<!-- API URL -->
|
||
<div>
|
||
<label class="block font-bold text-gray-800 mb-2 flex items-center gap-2">
|
||
<iconify-icon icon="ph:link-bold" class="text-lg text-blue-600"></iconify-icon>
|
||
API URL
|
||
</label>
|
||
<input
|
||
id="api-url"
|
||
type="text"
|
||
placeholder="https://api.example.com/v1/chat/completions"
|
||
class="config-input"
|
||
value=""
|
||
/>
|
||
</div>
|
||
|
||
<!-- API Key -->
|
||
<div>
|
||
<label class="block font-bold text-gray-800 mb-2 flex items-center gap-2">
|
||
<iconify-icon icon="ph:key-bold" class="text-lg text-green-600"></iconify-icon>
|
||
API Key
|
||
</label>
|
||
<input
|
||
id="api-key"
|
||
type="password"
|
||
placeholder="sk-xxxxxxxxxxxxxxxx"
|
||
class="config-input"
|
||
value=""
|
||
/>
|
||
</div>
|
||
|
||
<!-- Model -->
|
||
<div>
|
||
<label class="block font-bold text-gray-800 mb-2 flex items-center gap-2">
|
||
<iconify-icon icon="ph:robot-bold" class="text-lg text-purple-600"></iconify-icon>
|
||
模型 (Model)
|
||
</label>
|
||
<input
|
||
id="api-model"
|
||
type="text"
|
||
placeholder="gpt-4-turbo"
|
||
class="config-input"
|
||
value=""
|
||
/>
|
||
</div>
|
||
|
||
<!-- 图片解析开关 -->
|
||
<div class="flex items-center justify-between py-3 border-t-2 border-gray-200 mt-2">
|
||
<div class="flex items-center gap-2">
|
||
<iconify-icon icon="ph:eye-bold" class="text-lg text-cyan-600"></iconify-icon>
|
||
<div>
|
||
<label class="block font-bold text-gray-800">启用图片解析</label>
|
||
<span class="text-xs text-gray-500">允许上传图片并由AI进行视觉理解</span>
|
||
</div>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" id="config-enable-vision" class="sr-only peer" checked>
|
||
<div class="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- 状态显示 -->
|
||
<div id="config-status" class="p-3 border-2 border-gray-300 bg-gray-50 text-sm text-gray-600 hidden">
|
||
<iconify-icon icon="ph:info" class="align-middle"></iconify-icon>
|
||
<span id="status-text">等待操作...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模态窗底部按钮 -->
|
||
<div class="p-4 border-t-3 border-gray-300 bg-gray-100 flex gap-3 justify-end">
|
||
<button id="test-api-btn" class="px-4 py-2 bg-yellow-500 text-white font-bold border-2 border-black hover:bg-yellow-600 transition-all flex items-center gap-2">
|
||
<iconify-icon icon="ph:flask-bold"></iconify-icon>
|
||
测试连接
|
||
</button>
|
||
<button id="save-config-btn" class="px-4 py-2 bg-green-500 text-white font-bold border-2 border-black hover:bg-green-600 transition-all flex items-center gap-2">
|
||
<iconify-icon icon="ph:floppy-disk-bold"></iconify-icon>
|
||
保存配置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 代码查看模态窗 -->
|
||
<div id="code-modal" class="modal-overlay">
|
||
<div class="modal-content code-modal-content">
|
||
<div class="bg-gradient-to-r from-indigo-600 to-purple-600 p-4 border-b-4 border-black flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<iconify-icon icon="ph:code-fill" class="text-3xl text-white"></iconify-icon>
|
||
<h2 class="text-xl font-black text-white">生成代码</h2>
|
||
</div>
|
||
<button id="close-code-modal-btn" class="text-white hover:bg-white/20 p-2 transition-all">
|
||
<iconify-icon icon="ph:x-bold" class="text-2xl"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div class="p-6 space-y-4">
|
||
<div class="flex items-center justify-between gap-3">
|
||
<p class="font-bold text-gray-700">以下为当前图表对应的代码，可复制后用于自定义编辑。</p>
|
||
<button id="copy-code-btn" class="px-4 py-2 bg-indigo-500 text-white font-bold border-2 border-black hover:bg-indigo-600 transition-all flex items-center gap-2">
|
||
<iconify-icon icon="ph:copy-bold"></iconify-icon>
|
||
复制代码
|
||
</button>
|
||
</div>
|
||
<pre id="code-content" class="code-viewer"></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 页面预览模态窗 -->
|
||
<div id="page-preview-modal" class="modal-overlay">
|
||
<div class="modal-content page-preview-modal">
|
||
<div class="bg-gradient-to-r from-teal-500 to-cyan-500 p-3 border-b-4 border-black flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<iconify-icon icon="ph:monitor-play-fill" class="text-2xl text-white"></iconify-icon>
|
||
<h2 class="text-lg md:text-xl font-black text-white">落地页全屏预览</h2>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button id="page-preview-newtab-btn" class="px-3 py-1 bg-white text-teal-600 border-2 border-black font-semibold hover:bg-teal-50 transition-all flex items-center gap-1">
|
||
<iconify-icon icon="ph:arrow-square-out-bold" class="text-lg"></iconify-icon>
|
||
新窗口打开
|
||
</button>
|
||
<button id="close-page-preview-btn" class="text-white hover:bg-white/20 p-2 transition-all">
|
||
<iconify-icon icon="ph:x-bold" class="text-2xl"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="page-preview-body">
|
||
<iframe id="page-preview-iframe" title="落地页全屏预览" sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock" class="page-preview-iframe"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片预览模态窗 -->
|
||
<div id="image-preview-modal" class="modal-overlay">
|
||
<div class="image-preview-modal-content">
|
||
<button id="close-image-preview-btn" class="absolute top-4 right-4 text-white hover:text-gray-300 transition-colors z-10">
|
||
<iconify-icon icon="ph:x-bold" class="text-3xl"></iconify-icon>
|
||
</button>
|
||
<img id="image-preview-full" src="" alt="图片预览" class="max-w-full max-h-full object-contain" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 引入JavaScript文件 -->
|
||
<script src="js/utils.js"></script>
|
||
<script src="js/services/storage-service.js"></script>
|
||
<script src="js/services/conversation-service.js"></script>
|
||
<script src="js/core/module-registry.js"></script>
|
||
<script src="js/modules/product-canvas.js"></script>
|
||
<script src="js/modules/swot.js"></script>
|
||
<script src="js/modules/thinksvg.js"></script>
|
||
<script src="js/modules/echarts.js"></script>
|
||
<script src="js/modules/mermaid.js"></script>
|
||
<script src="js/modules/onepage.js"></script>
|
||
<script src="libs/js/mermaid.min.js"></script>
|
||
<script src="libs/js/svg-pan-zoom.min.js"></script>
|
||
<script src="libs/js/pako.min.js"></script>
|
||
<script src="libs/js/echarts.min.js"></script>
|
||
<script src="js/core/module-runtime.js"></script>
|
||
<script src="js/core/app-shell.js"></script>
|
||
<script src="js/apiclient.js"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|