Hugging Face's logo

Spaces:
sgch2023
/
ide-ui
Running

App Files Community
sgch2023 commited on
Commit
1cfe155
·
verified ·
1 Parent(s): ce574bd

<svg viewBox="0 0 1400 900" xmlns="http://www.w3.org/2000/svg"> <!-- 定义样式 --> <defs> <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"> <feDropShadow dx="0" dy="1" stdDeviation="1" flood-color="#000000" flood-opacity="0.2"/> </filter> </defs> <!-- 背景 --> <rect width="1400" height="900" fill="#1e1e1e"/> <!-- 顶部标题栏 --> <rect x="0" y="0" width="1400" height="35" fill="#323233"/> <!-- 应用图标和标题 --> <rect x="8" y="8" width="19" height="19" rx="2" fill="#007acc"/> <text x="11" y="20" font-family="Segoe UI, Arial, sans-serif" font-size="12" font-weight="bold" fill="#ffffff">S</text> <text x="35" y="22" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#cccccc">Smart IDE - ecommerce-app</text> <!-- 窗口控制按钮 --> <rect x="1320" y="8" width="19" height="19" fill="transparent"/> <text x="1327" y="20" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#cccccc">—</text> <rect x="1345" y="8" width="19" height="19" fill="transparent"/> <text x="1351" y="20" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#cccccc">□</text> <rect x="1370" y="8" width="19" height="19" fill="transparent"/> <text x="1376" y="20" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#cccccc">×</text> <!-- 菜单栏 --> <rect x="0" y="35" width="1400" height="25" fill="#2d2d30"/> <text x="15" y="50" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#cccccc">文件</text> <text x="50" y="50" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#cccccc">编辑</text> <text x="85" y="50" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#cccccc">选择</text> <text x="120" y="50" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#cccccc">视图</text> <text x="155" y="50" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#cccccc">转到</text> <text x="190" y="50" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#cccccc">运行</text> <text x="225" y="50" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#cccccc">终端</text> <text x="260" y="50" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#cccccc">帮助</text> <!-- 活动栏 (左侧图标栏) --> <rect x="0" y="60" width="50" height="840" fill="#333333"/> <!-- 活动栏图标 --> <g transform="translate(0, 60)"> <!-- 资源管理器 - 激活状态 --> <rect x="0" y="0" width="50" height="50" fill="#094771"/> <rect x="0" y="0" width="2" height="50" fill="#007acc"/> <text x="25" y="30" font-family="Segoe UI, Arial, sans-serif" font-size="16" text-anchor="middle" fill="#ffffff">📁</text> <!-- 搜索 --> <rect x="0" y="50" width="50" height="50" fill="transparent"/> <text x="25" y="80" font-family="Segoe UI, Arial, sans-serif" font-size="16" text-anchor="middle" fill="#cccccc">🔍</text> <!-- 源代码管理 --> <rect x="0" y="100" width="50" height="50" fill="transparent"/> <text x="25" y="130" font-family="Segoe UI, Arial, sans-serif" font-size="16" text-anchor="middle" fill="#cccccc">🔗</text> <!-- 运行和调试 --> <rect x="0" y="150" width="50" height="50" fill="transparent"/> <text x="25" y="180" font-family="Segoe UI, Arial, sans-serif" font-size="16" text-anchor="middle" fill="#cccccc">▶️</text> <!-- 扩展 --> <rect x="0" y="200" width="50" height="50" fill="transparent"/> <text x="25" y="230" font-family="Segoe UI, Arial, sans-serif" font-size="16" text-anchor="middle" fill="#cccccc">⬜</text> <!-- AI助手 --> <rect x="0" y="250" width="50" height="50" fill="transparent"/> <text x="25" y="280" font-family="Segoe UI, Arial, sans-serif" font-size="16" text-anchor="middle" fill="#cccccc">🤖</text> </g> <!-- 侧边栏 --> <rect x="50" y="60" width="300" height="840" fill="#252526"/> <!-- 侧边栏标题 --> <rect x="50" y="60" width="300" height="35" fill="#2d2d30"/> <text x="65" y="80" font-family="Segoe UI, Arial, sans-serif" font-size="13" font-weight="bold" fill="#cccccc">资源管理器</text> <!-- 项目快速创建区域 --> <rect x="65" y="105" width="270" height="120" fill="#1e1e1e" stroke="#3c3c3c" stroke-width="1"/> <text x="75" y="125" font-family="Segoe UI, Arial, sans-serif" font-size="12" font-weight="bold" fill="#ffffff">快速创建项目</text> <!-- 前端模板 --> <text x="75" y="145" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">前端框架</text> <rect x="75" y="150" width="50" height="22" rx="2" fill="#42b883" opacity="0.2" stroke="#42b883" stroke-width="1"/> <text x="78" y="163" font-family="Segoe UI, Arial, sans-serif" font-size="10" fill="#42b883">Vue.js</text> <rect x="135" y="150" width="50" height="22" rx="2" fill="#61dafb" opacity="0.2" stroke="#61dafb" stroke-width="1"/> <text x="138" y="163" font-family="Segoe UI, Arial, sans-serif" font-size="10" fill="#61dafb">React</text> <!-- 后端模板 --> <text x="75" y="185" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">后端框架</text> <rect x="75" y="190" width="70" height="22" rx="2" fill="#6db33f" opacity="0.2" stroke="#6db33f" stroke-width="1"/> <text x="78" y="203" font-family="Segoe UI, Arial, sans-serif" font-size="10" fill="#6db33f">Spring Boot</text> <rect x="155" y="190" width="60" height="22" rx="2" fill="#68a063" opacity="0.2" stroke="#68a063" stroke-width="1"/> <text x="158" y="203" font-family="Segoe UI, Arial, sans-serif" font-size="10" fill="#68a063">Node.js</text> <!-- 文件夹结构 --> <g transform="translate(65, 245)"> <text x="0" y="15" font-family="Segoe UI, Arial, sans-serif" font-size="13" font-weight="bold" fill="#cccccc">ECOMMERCE-APP</text> <!-- 展开的文件夹 --> <g transform="translate(0, 25)"> <text x="0" y="15" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#cccccc">▼ 📁 frontend</text> <text x="20" y="35" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">📁 src</text> <text x="40" y="50" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#42b883">📄 App.vue</text> <text x="40" y="65" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#f7df1e">📄 main.js</text> <text x="40" y="80" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">📄 index.html</text> <text x="20" y="100" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">📄 package.json</text> <text x="0" y="125" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#cccccc">▼ 📁 backend</text> <text x="20" y="145" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">📁 src</text> <text x="40" y="160" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#6db33f">📄 UserController.java</text> <text x="40" y="175" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#6db33f">📄 UserService.java</text> <text x="40" y="190" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#6db33f">📄 Application.java</text> <text x="20" y="210" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">📄 pom.xml</text> <text x="0" y="235" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#cccccc">► 📁 docker</text> <text x="0" y="255" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#cccccc">📄 README.md</text> </g> </g> <!-- 主编辑区域 --> <rect x="350" y="60" width="1050" height="700" fill="#1e1e1e"/> <!-- 标签栏 --> <rect x="350" y="60" width="1050" height="35" fill="#2d2d30"/> <!-- 活动标签 --> <rect x="350" y="60" width="180" height="35" fill="#1e1e1e" stroke="#007acc" stroke-width="0" stroke-dasharray="0,0,0,2"/> <rect x="350" y="92" width="180" height="2" fill="#007acc"/> <text x="365" y="80" font-family="Consolas, Monaco, monospace" font-size="12" fill="#ffffff">UserController.java</text> <text x="515" y="80" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#cccccc">×</text> <!-- 非活动标签 --> <rect x="530" y="60" width="120" height="35" fill="#2d2d30"/> <text x="545" y="80" font-family="Consolas, Monaco, monospace" font-size="12" fill="#cccccc">App.vue</text> <text x="645" y="80" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#cccccc">×</text> <!-- 编辑器内容 --> <g transform="translate(350, 95)"> <!-- 行号区域 --> <rect x="0" y="0" width="50" height="665" fill="#1e1e1e"/> <line x1="50" y1="0" x2="50" y2="665" stroke="#3c3c3c" stroke-width="1"/> <!-- 行号 --> <text x="45" y="20" font-family="Consolas, Monaco, monospace" font-size="13" fill="#858585" text-anchor="end">1</text> <text x="45" y="40" font-family="Consolas, Monaco, monospace" font-size="13" fill="#858585" text-anchor="end">2</text> <text x="45" y="60" font-family="Consolas, Monaco, monospace" font-size="13" fill="#858585" text-anchor="end">3</text> <text x="45" y="80" font-family="Consolas, Monaco, monospace" font-size="13" fill="#858585" text-anchor="end">4</text> <text x="45" y="100" font-family="Consolas, Monaco, monospace" font-size="13" fill="#858585" text-anchor="end">5</text> <text x="45" y="120" font-family="Consolas, Monaco, monospace" font-size="13" fill="#858585" text-anchor="end">6</text> <text x="45" y="140" font-family="Consolas, Monaco, monospace" font-size="13" fill="#858585" text-anchor="end">7</text> <text x="45" y="160" font-family="Consolas, Monaco, monospace" font-size="13" fill="#858585" text-anchor="end">8</text> <text x="45" y="180" font-family="Consolas, Monaco, monospace" font-size="13" fill="#858585" text-anchor="end">9</text> <text x="45" y="200" font-family="Consolas, Monaco, monospace" font-size="13" fill="#858585" text-anchor="end">10</text> <!-- 代码内容 --> <text x="60" y="20" font-family="Consolas, Monaco, monospace" font-size="13" fill="#c586c0">package</text> <text x="125" y="20" font-family="Consolas, Monaco, monospace" font-size="13" fill="#ce9178"> com.example.controller;</text> <text x="60" y="60" font-family="Consolas, Monaco, monospace" font-size="13" fill="#c586c0">import</text> <text x="115" y="60" font-family="Consolas, Monaco, monospace" font-size="13" fill="#ce9178"> org.springframework.web.bind.annotation.*;</text> <text x="60" y="80" font-family="Consolas, Monaco, monospace" font-size="13" fill="#c586c0">import</text> <text x="115" y="80" font-family="Consolas, Monaco, monospace" font-size="13" fill="#ce9178"> org.springframework.beans.factory.annotation.Autowired;</text> <text x="60" y="120" font-family="Consolas, Monaco, monospace" font-size="13" fill="#9cdcfe">@RestController</text> <text x="60" y="140" font-family="Consolas, Monaco, monospace" font-size="13" fill="#9cdcfe">@RequestMapping</text> <text x="175" y="140" font-family="Consolas, Monaco, monospace" font-size="13" fill="#cccccc">(</text> <text x="185" y="140" font-family="Consolas, Monaco, monospace" font-size="13" fill="#ce9178">"/api/users"</text> <text x="270" y="140" font-family="Consolas, Monaco, monospace" font-size="13" fill="#cccccc">)</text> <text x="60" y="160" font-family="Consolas, Monaco, monospace" font-size="13" fill="#569cd6">public</text> <text x="115" y="160" font-family="Consolas, Monaco, monospace" font-size="13" fill="#569cd6"> class</text> <text x="165" y="160" font-family="Consolas, Monaco, monospace" font-size="13" fill="#4ec9b0"> UserController</text> <text x="275" y="160" font-family="Consolas, Monaco, monospace" font-size="13" fill="#cccccc"> {</text> <text x="80" y="200" font-family="Consolas, Monaco, monospace" font-size="13" fill="#9cdcfe">@Autowired</text> <text x="80" y="220" font-family="Consolas, Monaco, monospace" font-size="13" fill="#569cd6">private</text> <text x="140" y="220" font-family="Consolas, Monaco, monospace" font-size="13" fill="#4ec9b0"> UserService</text> <text x="230" y="220" font-family="Consolas, Monaco, monospace" font-size="13" fill="#9cdcfe"> userService</text> <text x="315" y="220" font-family="Consolas, Monaco, monospace" font-size="13" fill="#cccccc">;</text> <!-- 光标 --> <rect x="325" y="205" width="2" height="18" fill="#ffffff"> <animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/> </rect> </g> <!-- 底部面板 --> <rect x="350" y="760" width="1050" height="140" fill="#1e1e1e" stroke="#3c3c3c" stroke-width="1"/> <!-- 底部面板标签栏 --> <rect x="350" y="760" width="1050" height="30" fill="#2d2d30"/> <!-- DevOps工具标签 --> <g transform="translate(365, 760)"> <!-- 需求管理 --> <rect x="0" y="5" width="80" height="20" rx="2" fill="#007acc" opacity="0.8"/> <text x="5" y="17" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#ffffff">📋 需求</text> <!-- 架构设计 --> <rect x="90" y="5" width="80" height="20" rx="2" fill="transparent"/> <text x="95" y="17" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">🏗️ 架构</text> <!-- 测试用例 --> <rect x="180" y="5" width="80" height="20" rx="2" fill="transparent"/> <text x="185" y="17" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">🧪 测试</text> <!-- 代码评审 --> <rect x="270" y="5" width="80" height="20" rx="2" fill="transparent"/> <text x="275" y="17" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">👁️ 评审</text> <!-- 安全扫描 --> <rect x="360" y="5" width="80" height="20" rx="2" fill="transparent"/> <text x="365" y="17" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">🔒 安全</text> <!-- CI/CD --> <rect x="450" y="5" width="70" height="20" rx="2" fill="transparent"/> <text x="455" y="17" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">⚙️ CI/CD</text> <!-- 容器 --> <rect x="530" y="5" width="70" height="20" rx="2" fill="transparent"/> <text x="535" y="17" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">📦 容器</text> <!-- 部署 --> <rect x="610" y="5" width="70" height="20" rx="2" fill="transparent"/> <text x="615" y="17" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">☁️ 部署</text> <!-- 日志 --> <rect x="690" y="5" width="70" height="20" rx="2" fill="transparent"/> <text x="695" y="17" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">📊 日志</text> <!-- 监控 --> <rect x="770" y="5" width="70" height="20" rx="2" fill="transparent"/> <text x="775" y="17" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#cccccc">📈 监控</text> </g> <!-- 需求管理面板内容 --> <g transform="translate(365, 800)"> <text x="0" y="15" font-family="Segoe UI, Arial, sans-serif" font-size="13" font-weight="bold" fill="#ffffff">需求管理</text> <!-- 需求卡片 --> <rect x="0" y="25" width="200" height="60" rx="4" fill="#252526" stroke="#3c3c3c" stroke-width="1"/> <text x="10" y="40" font-family="Segoe UI, Arial, sans-serif" font-size="11" font-weight="bold" fill="#ffffff">用户登录功能</text> <text x="10" y="55" font-family="Segoe UI, Arial, sans-serif" font-size="10" fill="#cccccc">状态: 开发中</text> <text x="10" y="70" font-family="Segoe UI, Arial, sans-serif" font-size="10" fill="#cccccc">优先级: 高</text> <rect x="220" y="25" width="200" height="60" rx="4" fill="#252526" stroke="#3c3c3c" stroke-width="1"/> <text x="230" y="40" font-family="Segoe UI, Arial, sans-serif" font-size="11" font-weight="bold" fill="#ffffff">商品管理模块</text> <text x="230" y="55" font-family="Segoe UI, Arial, sans-serif" font-size="10" fill="#cccccc">状态: 待开发</text> <text x="230" y="70" font-family="Segoe UI, Arial, sans-serif" font-size="10" fill="#cccccc">优先级: 中</text> <!-- 快速操作按钮 --> <rect x="450" y="25" width="80" height="25" rx="2" fill="#007acc"/> <text x="455" y="40" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#ffffff">+ 新建需求</text> <rect x="540" y="25" width="80" height="25" rx="2" fill="#0e639c"/> <text x="545" y="40" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#ffffff">需求分析</text> </g> <!-- 状态栏 --> <rect x="0" y="880" width="1400" height="20" fill="#007acc"/> <text x="10" y="893" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#ffffff">🔗 main</text> <text x="80" y="893" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#ffffff">✓</text> <text x="100" y="893" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#ffffff">0 ⚠ 0 ❌</text> <text x="1200" y="893" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#ffffff">Ln 8, Col 24</text> <text x="1290" y="893" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#ffffff">UTF-8</text> <text x="1340" y="893" font-family="Segoe UI, Arial, sans-serif" font-size="11" fill="#ffffff">Java</text> </svg> 帮我修改一下上面的svg: 底部DevOps面板 ,高度可以高一点,需求页签可以展示用户的开发任务列表,支持用户故事一键拆解开发任务 , ECOMMERCE-APP改为金融领域的APP, 使用一些标注,说明可以基于脚手架创建项目、底部DevOps面板 , 集成了完整的研发过程各环节的工具链 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +393 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ide Ui
3
- emoji: 📈
4
- colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ide-ui
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,393 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Smart IDE - Financial App Development</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
10
+
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background-color: #1e1e1e;
14
+ color: #ffffff;
15
+ }
16
+
17
+ .code-font {
18
+ font-family: 'Consolas', 'Monaco', 'Andale Mono', monospace;
19
+ }
20
+
21
+ .blinking-cursor {
22
+ animation: blink 1s step-end infinite;
23
+ }
24
+
25
+ @keyframes blink {
26
+ from, to { opacity: 1; }
27
+ 50% { opacity: 0; }
28
+ }
29
+
30
+ .tab-active {
31
+ border-bottom: 2px solid #007acc;
32
+ background-color: #1e1e1e;
33
+ }
34
+
35
+ .user-story-card:hover {
36
+ transform: translateY(-2px);
37
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
38
+ }
39
+
40
+ .task-item:hover {
41
+ background-color: #2a2d2e;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="h-screen overflow-hidden">
46
+ <!-- Main IDE Container -->
47
+ <div class="flex flex-col h-full">
48
+ <!-- Title Bar -->
49
+ <div class="flex items-center justify-between bg-gray-800 px-4 py-2 border-b border-gray-700">
50
+ <div class="flex items-center space-x-2">
51
+ <div class="w-5 h-5 bg-blue-600 rounded-sm flex items-center justify-center">
52
+ <span class="text-xs font-bold text-white">S</span>
53
+ </div>
54
+ <span class="text-gray-300 text-sm">Smart IDE - financial-app</span>
55
+ </div>
56
+ <div class="flex items-center space-x-4">
57
+ <span class="text-gray-300 text-sm">−</span>
58
+ <span class="text-gray-300 text-sm">□</span>
59
+ <span class="text-gray-300 text-sm">×</span>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- Menu Bar -->
64
+ <div class="flex bg-gray-800 px-4 py-1 text-gray-300 text-sm space-x-6">
65
+ <span>文件</span>
66
+ <span>编辑</span>
67
+ <span>选择</span>
68
+ <span>视图</span>
69
+ <span>转到</span>
70
+ <span>运行</span>
71
+ <span>终端</span>
72
+ <span>帮助</span>
73
+ </div>
74
+
75
+ <!-- Main Content Area -->
76
+ <div class="flex flex-1 overflow-hidden">
77
+ <!-- Activity Bar -->
78
+ <div class="w-12 bg-gray-700 flex flex-col items-center py-4 space-y-6">
79
+ <div class="w-full bg-blue-900 bg-opacity-70 border-l-2 border-blue-500 py-2 flex justify-center">
80
+ <span class="text-lg">📁</span>
81
+ </div>
82
+ <div class="text-gray-400 text-lg cursor-pointer hover:text-white">🔍</div>
83
+ <div class="text-gray-400 text-lg cursor-pointer hover:text-white">🔗</div>
84
+ <div class="text-gray-400 text-lg cursor-pointer hover:text-white">▶️</div>
85
+ <div class="text-gray-400 text-lg cursor-pointer hover:text-white">⬜</div>
86
+ <div class="text-gray-400 text-lg cursor-pointer hover:text-white">🤖</div>
87
+ </div>
88
+
89
+ <!-- Sidebar -->
90
+ <div class="w-64 bg-gray-800 flex flex-col overflow-y-auto">
91
+ <div class="bg-gray-700 px-4 py-2 text-gray-300 font-medium">资源管理器</div>
92
+
93
+ <!-- Quick Project Setup -->
94
+ <div class="m-3 p-3 bg-gray-900 border border-gray-600 rounded">
95
+ <div class="font-bold text-white mb-2">快速创建金融项目</div>
96
+ <div class="text-xs text-gray-400 mb-2">选择模板快速开始</div>
97
+
98
+ <div class="text-xs text-gray-300 mb-1">前端框架</div>
99
+ <div class="flex space-x-2 mb-3">
100
+ <div class="px-2 py-1 text-xs border border-green-500 text-green-500 rounded cursor-pointer hover:bg-green-500 hover:bg-opacity-10">Vue.js</div>
101
+ <div class="px-2 py-1 text-xs border border-blue-400 text-blue-400 rounded cursor-pointer hover:bg-blue-400 hover:bg-opacity-10">React</div>
102
+ </div>
103
+
104
+ <div class="text-xs text-gray-300 mb-1">后端框架</div>
105
+ <div class="flex flex-wrap gap-2">
106
+ <div class="px-2 py-1 text-xs border border-green-600 text-green-600 rounded cursor-pointer hover:bg-green-600 hover:bg-opacity-10">Spring Boot</div>
107
+ <div class="px-2 py-1 text-xs border border-green-400 text-green-400 rounded cursor-pointer hover:bg-green-400 hover:bg-opacity-10">Node.js</div>
108
+ <div class="px-2 py-1 text-xs border border-blue-500 text-blue-500 rounded cursor-pointer hover:bg-blue-500 hover:bg-opacity-10">.NET Core</div>
109
+ <div class="px-2 py-1 text-xs border border-purple-500 text-purple-500 rounded cursor-pointer hover:bg-purple-500 hover:bg-opacity-10">Django</div>
110
+ </div>
111
+
112
+ <div class="mt-3">
113
+ <div class="text-xs text-yellow-400 mb-1">金融专用模板</div>
114
+ <div class="flex flex-wrap gap-2">
115
+ <div class="px-2 py-1 text-xs border border-yellow-500 text-yellow-500 rounded cursor-pointer hover:bg-yellow-500 hover:bg-opacity-10">支付系统</div>
116
+ <div class="px-2 py-1 text-xs border border-yellow-400 text-yellow-400 rounded cursor-pointer hover:bg-yellow-400 hover:bg-opacity-10">风控系统</div>
117
+ <div class="px-2 py-1 text-xs border border-yellow-300 text-yellow-300 rounded cursor-pointer hover:bg-yellow-300 hover:bg-opacity-10">账务系统</div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Project Structure -->
123
+ <div class="px-4 py-2">
124
+ <div class="font-bold text-gray-300 mb-2">FINANCIAL-APP</div>
125
+
126
+ <div class="text-sm text-gray-300 mb-1 flex items-center cursor-pointer">▼ 📁 frontend</div>
127
+ <div class="pl-4">
128
+ <div class="text-xs text-gray-400 mb-1 cursor-pointer">📁 src</div>
129
+ <div class="pl-4">
130
+ <div class="text-xs text-green-400 mb-1 cursor-pointer">📄 App.vue</div>
131
+ <div class="text-xs text-yellow-400 mb-1 cursor-pointer">📄 main.js</div>
132
+ <div class="text-xs text-gray-400 mb-1 cursor-pointer">📄 index.html</div>
133
+ </div>
134
+ <div class="text-xs text-gray-400 mb-1 cursor-pointer">📄 package.json</div>
135
+ </div>
136
+
137
+ <div class="text-sm text-gray-300 mb-1 flex items-center cursor-pointer">▼ 📁 backend</div>
138
+ <div class="pl-4">
139
+ <div class="text-xs text-gray-400 mb-1 cursor-pointer">📁 src</div>
140
+ <div class="pl-4">
141
+ <div class="text-xs text-green-600 mb-1 cursor-pointer">📄 AccountController.java</div>
142
+ <div class="text-xs text-green-600 mb-1 cursor-pointer">📄 TransactionService.java</div>
143
+ <div class="text-xs text-green-600 mb-1 cursor-pointer">📄 RiskAssessment.java</div>
144
+ </div>
145
+ <div class="text-xs text-gray-400 mb-1 cursor-pointer">📄 pom.xml</div>
146
+ </div>
147
+
148
+ <div class="text-sm text-gray-300 mb-1 flex items-center cursor-pointer">► 📁 docker</div>
149
+ <div class="text-sm text-gray-300 mb-1 flex items-center cursor-pointer">📄 README.md</div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Main Editor Area -->
154
+ <div class="flex-1 flex flex-col">
155
+ <!-- Editor Tabs -->
156
+ <div class="flex bg-gray-700 px-2">
157
+ <div class="flex items-center px-4 py-2 bg-gray-900 border-b-2 border-blue-500 text-white text-sm">
158
+ TransactionService.java
159
+ <span class="ml-2 text-gray-400 hover:text-white">×</span>
160
+ </div>
161
+ <div class="flex items-center px-4 py-2 text-gray-400 hover:text-white text-sm">
162
+ App.vue
163
+ <span class="ml-2 text-gray-400 hover:text-white">×</span>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Code Editor -->
168
+ <div class="flex-1 bg-gray-900 overflow-auto p-2 code-font">
169
+ <div class="flex">
170
+ <!-- Line Numbers -->
171
+ <div class="text-right pr-4 text-gray-500 select-none">
172
+ <div>1</div>
173
+ <div>2</div>
174
+ <div>3</div>
175
+ <div>4</div>
176
+ <div>5</div>
177
+ <div>6</div>
178
+ <div>7</div>
179
+ <div>8</div>
180
+ <div>9</div>
181
+ <div>10</div>
182
+ <div>11</div>
183
+ <div>12</div>
184
+ <div>13</div>
185
+ <div>14</div>
186
+ <div>15</div>
187
+ <div>16</div>
188
+ <div>17</div>
189
+ <div>18</div>
190
+ <div>19</div>
191
+ <div>20</div>
192
+ </div>
193
+
194
+ <!-- Code Content -->
195
+ <div class="flex-1">
196
+ <div><span class="text-purple-400">package</span> <span class="text-orange-400"> com.finance.service;</span></div>
197
+ <div class="h-4"></div>
198
+ <div><span class="text-purple-400">import</span> <span class="text-orange-400"> org.springframework.stereotype.Service;</span></div>
199
+ <div><span class="text-purple-400">import</span> <span class="text-orange-400"> org.springframework.transaction.annotation.Transactional;</span></div>
200
+ <div><span class="text-purple-400">import</span> <span class="text-orange-400"> java.math.BigDecimal;</span></div>
201
+ <div class="h-4"></div>
202
+ <div><span class="text-blue-300">@Service</span></div>
203
+ <div><span class="text-blue-600">public</span> <span class="text-blue-600">class</span> <span class="text-teal-300"> TransactionService</span> <span class="text-gray-300">{</span></div>
204
+ <div class="h-4"></div>
205
+ <div class="ml-4"><span class="text-blue-300">@Transactional</span></div>
206
+ <div class="ml-4"><span class="text-blue-600">public</span> <span class="text-blue-300">TransactionResponse</span> <span class="text-yellow-200">processPayment</span><span class="text-gray-300">(</span><span class="text-blue-300">PaymentRequest</span> <span class="text-gray-300">request</span><span class="text-gray-300">)</span> <span class="text-gray-300">{</span></div>
207
+ <div class="ml-8"><span class="text-blue-600">if</span> <span class="text-gray-300">(</span><span class="text-blue-300">riskService</span><span class="text-gray-300">.</span><span class="text-yellow-200">isHighRisk</span><span class="text-gray-300">(</span><span class="text-blue-300">request</span><span class="text-gray-300">))</span> <span class="text-gray-300">{</span></div>
208
+ <div class="ml-12"><span class="text-blue-600">throw</span> <span class="text-blue-600">new</span> <span class="text-blue-300">RiskValidationException</span><span class="text-gray-300">(</span><span class="text-orange-400">"Transaction flagged as high risk"</span><span class="text-gray-300">);</span></div>
209
+ <div class="ml-8"><span class="text-gray-300">}</span></div>
210
+ <div class="ml-8"><span class="text-blue-300">BigDecimal</span> <span class="text-gray-300">amount =</span> <span class="text-blue-300">request</span><span class="text-gray-300">.</span><span class="text-yellow-200">getAmount</span><span class="text-gray-300">();</span></div>
211
+ <div class="ml-8"><span class="text-gray-300">// Process transaction logic here</span></div>
212
+ <div class="ml-8"><span class="text-blue-600">return</span> <span class="text-blue-600">new</span> <span class="text-blue-300">TransactionResponse</span><span class="text-gray-300">(</span><span class="text-orange-400">"SUCCESS"</span><span class="text-gray-300">,</span> <span class="text-orange-400">"Transaction processed"</span><span class="text-gray-300">);</span></div>
213
+ <div class="ml-4"><span class="text-gray-300">}</span></div>
214
+ <div class="ml-4"><span class="text-blue-600">private</span> <span class="text-blue-300">void</span> <span class="text-yellow-200">logTransaction</span><span class="text-gray-300">(</span><span class="text-blue-300">String</span> <span class="text-gray-300">accountId,</span> <span class="text-blue-300">BigDecimal</span> <span class="text-gray-300">amount)</span> <span class="text-gray-300">{</span></div>
215
+ <div class="ml-8"><span class="text-gray-300">// Audit logging implementation</span></div>
216
+ <div class="ml-4"><span class="text-gray-300">}</span></div>
217
+ <div><span class="text-gray-300">}</span></div>
218
+ <div class="h-4"></div>
219
+ <div class="relative">
220
+ <span class="text-gray-300">// Cursor position</span>
221
+ <span class="absolute ml-8 w-2 h-5 bg-white blinking-cursor"></span>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Enhanced DevOps Panel -->
228
+ <div class="h-64 bg-gray-900 border-t border-gray-700 flex flex-col">
229
+ <!-- DevOps Tabs -->
230
+ <div class="flex bg-gray-800 px-4 py-2 space-x-4 overflow-x-auto">
231
+ <div class="px-3 py-1 bg-blue-600 rounded text-white text-xs flex items-center cursor-pointer">
232
+ 📋 需求管理
233
+ </div>
234
+ <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
235
+ 🏗️ 架构设计
236
+ </div>
237
+ <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
238
+ 🧪 测试用例
239
+ </div>
240
+ <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
241
+ 👁️ 代码评审
242
+ </div>
243
+ <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
244
+ 🔒 安全扫描
245
+ </div>
246
+ <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
247
+ ⚙️ CI/CD
248
+ </div>
249
+ <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
250
+ 📦 容器
251
+ </div>
252
+ <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
253
+ ☁️ 部署
254
+ </div>
255
+ <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
256
+ 📊 日志
257
+ </div>
258
+ <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
259
+ 📈 监控
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Requirements Management Content -->
264
+ <div class="flex-1 p-4 overflow-auto">
265
+ <div class="text-white font-medium mb-4">金融交易系统需求管理</div>
266
+
267
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
268
+ <!-- User Story Card 1 -->
269
+ <div class="user-story-card bg-gray-800 p-3 rounded border border-gray-600 cursor-pointer transition-all duration-200">
270
+ <div class="flex justify-between items-start">
271
+ <div class="font-medium text-white">用户故事: 支付处理流程</div>
272
+ <div class="text-xs px-2 py-1 bg-blue-600 rounded">高优先级</div>
273
+ </div>
274
+ <div class="text-xs text-gray-400 mt-1">作为用户，我希望能够安全地完成支付，以便完成交易</div>
275
+ <div class="flex justify-between items-center mt-3">
276
+ <div class="text-xs text-green-400">开发中</div>
277
+ <button class="text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded" onclick="breakdownTasks(this)">拆解任务</button>
278
+ </div>
279
+
280
+ <!-- Tasks (initially hidden) -->
281
+ <div class="task-list hidden mt-2 space-y-2">
282
+ <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center justify-between">
283
+ <span>实现支付接口</span>
284
+ <span class="text-green-400">✓</span>
285
+ </div>
286
+ <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center justify-between">
287
+ <span>集成风控检查</span>
288
+ <span class="text-yellow-400">🔄</span>
289
+ </div>
290
+ <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center">
291
+ <span>添加交易日志</span>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- User Story Card 2 -->
297
+ <div class="user-story-card bg-gray-800 p-3 rounded border border-gray-600 cursor-pointer transition-all duration-200">
298
+ <div class="flex justify-between items-start">
299
+ <div class="font-medium text-white">用户故事: 账户余额查询</div>
300
+ <div class="text-xs px-2 py-1 bg-yellow-600 rounded">中优先级</div>
301
+ </div>
302
+ <div class="text-xs text-gray-400 mt-1">作为用户，我希望能够实时查询我的账户余额，以便了解资金状况</div>
303
+ <div class="flex justify-between items-center mt-3">
304
+ <div class="text-xs text-yellow-400">待开发</div>
305
+ <button class="text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded" onclick="breakdownTasks(this)">拆解任务</button>
306
+ </div>
307
+
308
+ <!-- Tasks (initially hidden) -->
309
+ <div class="task-list hidden mt-2 space-y-2">
310
+ <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center">
311
+ <span>设计账户查询API</span>
312
+ </div>
313
+ <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center">
314
+ <span>实现数据库查询</span>
315
+ </div>
316
+ <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center">
317
+ <span>添加权限验证</span>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- User Story Card 3 -->
323
+ <div class="user-story-card bg-gray-800 p-3 rounded border border-gray-600 cursor-pointer transition-all duration-200">
324
+ <div class="flex justify-between items-start">
325
+ <div class="font-medium text-white">用户故事: 交易历史</div>
326
+ <div class="text-xs px-2 py-1 bg-purple-600 rounded">低优先级</div>
327
+ </div>
328
+ <div class="text-xs text-gray-400 mt-1">作为用户，我希望能够查看我的交易历史记录，以便进行财务对账</div>
329
+ <div class="flex justify-between items-center mt-3">
330
+ <div class="text-xs text-gray-400">待规划</div>
331
+ <button class="text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded" onclick="breakdownTasks(this)">拆解任务</button>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="flex space-x-3">
337
+ <button class="text-xs bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded flex items-center">
338
+ <span class="mr-1">+</span> 新建用户故事
339
+ </button>
340
+ <button class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded flex items-center">
341
+ <span class="mr-1">📊</span> 需求分析报告
342
+ </button>
343
+ <button class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded flex items-center">
344
+ <span class="mr-1">🔄</span> 同步JIRA
345
+ </button>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Status Bar -->
353
+ <div class="flex justify-between items-center bg-blue-600 px-4 py-1 text-xs text-white">
354
+ <div class="flex items-center space-x-4">
355
+ <span>🔗 main</span>
356
+ <span>✓</span>
357
+ <span>0 ⚠ 0 ❌</span>
358
+ </div>
359
+ <div class="flex items-center space-x-4">
360
+ <span>Ln 8, Col 24</span>
361
+ <span>UTF-8</span>
362
+ <span>Java</span>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <script>
368
+ // Function to toggle task breakdown visibility
369
+ function breakdownTasks(button) {
370
+ const card = button.closest('.user-story-card');
371
+ const taskList = card.querySelector('.task-list');
372
+ taskList.classList.toggle('hidden');
373
+
374
+ if (taskList.classList.contains('hidden')) {
375
+ button.textContent = '拆解任务';
376
+ } else {
377
+ button.textContent = '收起任务';
378
+ }
379
+ }
380
+
381
+ // Make user story cards clickable to toggle task breakdown
382
+ document.querySelectorAll('.user-story-card').forEach(card => {
383
+ card.addEventListener('click', (e) => {
384
+ // Don't trigger if clicking on the breakdown button
385
+ if (!e.target.closest('button')) {
386
+ const button = card.querySelector('button');
387
+ if (button) breakdownTasks(button);
388
+ }
389
+ });
390
+ });
391
+ </script>
392
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sgch2023/ide-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
393
+ </html>