Skip to content

Commit fc44840

Browse files
JamAnNaJamAnNa
committed
大AI时代，来临！
1 parent 7ffbd90 commit fc44840

7 files changed

Lines changed: 1395 additions & 556 deletions

File tree

‎iframe/main/index.html‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,53 @@
2222
<li><button id="setting-btn">切换主题</button></li>
2323
<li><button id="SaveinLeft-btn">保存到列表</button></li>
2424
<li><button id="Ext-btn">插件管理</button></li>
25-
<li><button id="ai-btn">AI辅助</button></li>
25+
<li><button id="ai-btn">AI编程</button></li>
2626
<!-- <li><button id="example-btn" style="display: none;">案例</button></li>
2727
<li><button id="about-btn" style="display: none;">关于</button></li> -->
2828
</ul>
2929
</div>
3030
<div id="editor-container">
3131
<div id="editor"></div>
3232
</div>
33+
<!-- 右侧 AI 聊天窗口 -->
34+
<div id="ai-chat">
35+
<!-- 1. 顶部标题栏：包含模型名称和设置齿轮 -->
36+
<div class="ai-chat-header">
37+
<span class="ai-chat-title" id="ai-model-name">GPT-4 Model</span>
38+
<!-- 设置齿轮图标 (使用 SVG 或 Unicode，这里用 SVG 更精致) -->
39+
<button class="ai-chat-settings-btn" id="ai-settings-trigger" title="聊天设置">
40+
<svg
41+
xmlns="http://www.w3.org/2000/svg"
42+
width="18"
43+
height="18"
44+
viewBox="0 0 24 24"
45+
fill="none"
46+
stroke="currentColor"
47+
stroke-width="2"
48+
stroke-linecap="round"
49+
stroke-linejoin="round"
50+
>
51+
<circle cx="12" cy="12" r="3"></circle>
52+
<path
53+
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"
54+
></path>
55+
</svg>
56+
</button>
57+
</div>
58+
<!-- 2. 中间消息列表区域 -->
59+
<div class="ai-chat-content" id="ai-chat-list">
60+
<!-- 示例消息：欢迎语 -->
61+
<div class="ai-message ai-message-system">
62+
<div class="ai-message-bubble">你好！我是你的 AI 编程助手。有什么可以帮你的吗？</div>
63+
</div>
64+
<!-- 动态消息会插入到这里 -->
65+
</div>
66+
<!-- 3. 底部输入框区域 -->
67+
<div class="ai-chat-footer">
68+
<textarea id="ai-input" placeholder="输入代码问题或指令... (Shift+Enter 换行)" rows="1"></textarea>
69+
<button id="ai-send-btn">发送</button>
70+
</div>
71+
</div>
3372
</div>
3473

3574
<!-- Ace 插件资源等 -->
@@ -50,7 +89,7 @@
5089
<script src="/iframe/script/Ace_Editor/theme-monokai.js"></script>
5190
<script src="/iframe/script/Ace_Editor/theme-github.js"></script>
5291
<!-- 一些编辑器支持 -->
53-
<script src="/iframe/script/User_config/message.js"></script>
92+
<script src="/iframe/script/User_config/Ai_Chat.js"></script>
5493
<script src="/iframe/script/eda_coder/EDA_Codes.js"></script>
5594
<script src="/iframe/script/User_config/ACE_Config.js"></script>
5695
<script src="/iframe/script/User_config/Code_Config.js"></script>

‎iframe/script/User_config/ACE_Config.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -937,3 +937,104 @@ function formatEditorCode(editor) {
937937
// 移动光标到目标行末尾（Ace 的 gotoLine 行号是 1-based）
938938
editor.gotoLine(targetRow + 1, lineEndColumn, false);
939939
}
940+
941+
/**
942+
* 在页面右下角显示一条临时消息提示（Toast）
943+
*
944+
* @param {string} message - 要显示的消息文本，必填
945+
* @param {Object} [options] - 可选配置项
946+
* @param {number} [options.duration=3000] - 消息自动消失的毫秒数，默认 3000ms
947+
* @param {string} [options.type='info'] - 消息类型，可选 'info' | 'success' | 'warning' | 'error'
948+
* @param {boolean} [options.allowMultiple=false] - 是否允许多条消息同时存在
949+
* @returns {void}
950+
* @throws {TypeError} 当 message 不是字符串时抛出错误
951+
*/
952+
function showToast(message, options = {}) {
953+
// 参数校验
954+
if (typeof message !== 'string') {
955+
throw new TypeError('Parameter "message" must be a string.');
956+
}
957+
try {
958+
// 默认配置
959+
const config = {
960+
duration: 3000,
961+
type: 'info',
962+
allowMultiple: false,
963+
...options,
964+
};
965+
const validTypes = ['info', 'success', 'warning', 'error'];
966+
if (!validTypes.includes(config.type)) {
967+
console.warn(`不存在的消息类型"${config.type}"`);
968+
config.type = 'info';
969+
}
970+
let toastContainer = document.getElementById('__toast-container');
971+
if (!toastContainer) {
972+
toastContainer = document.createElement('div');
973+
toastContainer.id = '__toast-container';
974+
toastContainer.style.cssText = `
975+
position: fixed;
976+
bottom: 20px;
977+
right: 20px;
978+
z-index: 10000;
979+
max-width: 80vw;
980+
pointer-events: none;
981+
`;
982+
document.body.appendChild(toastContainer);
983+
}
984+
if (!config.allowMultiple) {
985+
toastContainer.innerHTML = '';
986+
}
987+
const toastEl = document.createElement('div');
988+
toastEl.textContent = message;
989+
toastEl.style.cssText = `
990+
background: ${
991+
config.type === 'success' ? '#4caf50' : config.type === 'warning' ? '#ff9800' : config.type === 'error' ? '#f44336' : '#333'
992+
};
993+
color: white;
994+
padding: 12px 16px;
995+
border-radius: 6px;
996+
margin-top: 8px;
997+
font-size: 14px;
998+
line-height: 1.4;
999+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
1000+
opacity: 0;
1001+
transform: translateY(20px);
1002+
transition: opacity 0.3s ease, transform 0.3s ease;
1003+
animation: __toast-fade-in 0.3s forwards;
1004+
pointer-events: auto;
1005+
word-break: break-word;
1006+
`;
1007+
if (!document.getElementById('__toast-styles')) {
1008+
const styleEl = document.createElement('style');
1009+
styleEl.id = '__toast-styles';
1010+
styleEl.textContent = `
1011+
@keyframes __toast-fade-in {
1012+
to { opacity: 1; transform: translateY(0); }
1013+
}
1014+
@keyframes __toast-fade-out {
1015+
to { opacity: 0; transform: translateY(20px); }
1016+
}
1017+
`;
1018+
document.head.appendChild(styleEl);
1019+
}
1020+
toastContainer.appendChild(toastEl);
1021+
requestAnimationFrame(() => {
1022+
toastEl.style.animation = '__toast-fade-in 0.3s forwards';
1023+
});
1024+
const removeToast = () => {
1025+
if (!toastEl.parentNode) return;
1026+
toastEl.style.animation = '__toast-fade-out 0.3s forwards';
1027+
setTimeout(() => {
1028+
if (toastEl.parentNode) {
1029+
toastEl.parentNode.removeChild(toastEl);
1030+
}
1031+
}, 300);
1032+
};
1033+
if (config.duration > 0) {
1034+
setTimeout(removeToast, config.duration);
1035+
}
1036+
toastEl.addEventListener('click', removeToast, { once: true });
1037+
} catch (error) {
1038+
console.error('显示消息异常', error);
1039+
}
1040+
}

0 commit comments

Comments
 (0)