46 lines
1.6 KiB
Markdown
46 lines
1.6 KiB
Markdown
# 增加内网资产应用跳转及样式美化计划
|
||
|
||
我将在 `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 规则。
|
||
|