Files
host_message/.trae/documents/增加内网资产应用及美化页面.md
2026-02-13 12:33:43 +08:00

46 lines
1.6 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 增加内网资产应用跳转及样式美化计划
我将在 `templates/index.html` 中添加一个新的“应用服务”板块包含您指定的6个应用跳转项并对弹出的内网资产页面二级页面进行样式美化。
## 1. 新增应用服务板块
在“台式机资源”下方新增一个 `<div class="asset-section">`,标题为“应用服务”,包含以下应用:
* **it-tools**: 端口 40116 (图标: `fa-toolbox`)
* **langflow**: 端口 7860 (图标: `fa-wind`)
* **n8n**: 端口 5678 (图标: `fa-project-diagram`)
* **certimate**: 端口 8090 (图标: `fa-certificate`)
* **ntfy**: 端口 40265 (图标: `fa-comment-dots`)
* **screego**: 端口 5050 (图标: `fa-desktop`)
* QR-code生成
地址统一为 `6.6.6.66`
## 2. 样式美化 (CSS)
我将更新 JavaScript 中动态注入的 CSS 样式,以美化弹出的二级页面:
* **整体容器**: 优化 `.internal-assets-container` 的滚动体验和间距。
* **列表项**: 增强 `.asset-item` 的视觉效果,添加更明显的悬停 (Hover) 效果和阴影。
* **凭证详情**: 美化 `.asset-credentials` 区域(虽然新应用暂无凭证,但优化现有凭证的展示):
* 添加展开动画 (`slideDown`)。
* 优化账号/密码显示框的样式,使其看起来更像代码块或卡片。
* 调整复制按钮的样式。
## 3. 实现步骤
1. 编辑 `templates/index.html`,在 `modalBody.innerHTML` 的模板字符串中插入新的 HTML 结构。
2. 在同一个文件的 `<style>` 标签内容中JS 字符串内)添加和更新 CSS 规则。