SSH 按钮添加

参数	说明	示例
用户名	通常为 `root`，以实际为准	`root`
服务器 IP	魔方财务所在服务器的公网或内网 IP	`192.168.101.15`
端口	SSH 端口，默认 `22`	`22`

ssh root@192.168.101.15 -p 22

2.3 输入密码并连接

按 Enter 后，终端会提示输入服务器密码。
输入密码时界面不会显示字符，这是正常现象，输入完成后按 Enter。
连接成功后，左侧远程资源管理器会显示该服务器。

连接失败排查

确认 IP、端口、用户名是否正确。
确认服务器防火墙已放行 SSH 端口。
若使用密钥登录，需在 Trae 中配置 SSH 私钥路径。

第三步：定位会员中心模板文件

3.1 打开远程文件夹

SSH 连接成功后，点击 打开文件夹（Open Folder）。
在路径输入框中，导航至魔方财务站点根目录。

3.2 找到 servicedetail 目录

按以下路径层级依次打开（路径因部署方式略有不同，请根据实际情况调整）：

/www/wwwroot/你的域名/public/themes/clientarea/你所使用的会员中心主题/servicedetail/

路径说明：

路径片段	含义
`/www/wwwroot/你的域名/`	宝塔默认网站根目录
`public/themes/clientarea/`	会员中心主题根目录
`你所使用的会员中心主题/`	当前启用的主题文件夹名称
`servicedetail/`	服务详情页模板目录

如何确认当前使用的主题？

在魔方财务后台 → 设置 → 会员中心主题 中查看当前启用的主题名称，对应 clientarea 下的文件夹名。

3.3 确定要修改的 TPL 文件

进入 servicedetail 目录后，找到渲染「服务详情 / 登录信息」区域的 TPL 文件。常见文件名可能包含 detail、service 等，具体以你的主题为准。

如果不确定改哪个文件，可以：

在 Trae 中全局搜索 登录信息 或 dedicatedip 等关键字。
或使用 Trae / Cursor 的 AI 助手，发送主题目录路径让其帮你定位。

第四步：添加按钮与脚本

4.1 修改 SSH_URL（必做）

在下方脚本中，找到这一行：

var SSH_URL='请在这个位置填写自己的URL';

将其替换为你实际部署的 SSH 网页端地址，不要遗漏协议头，并且不要在URL末尾添加多一个/：

var SSH_URL='https://ssh.你的域名.com';

4.2 发送给 AI 的完整提示词

将以下提示词复制到 Trae / Cursor 的 AI 对话框中，并根据实际情况替换 SSH_URL 和文件路径：

请帮我在魔方财务会员中心的服务详情页中添加「SSH 快速连接」按钮。

要求：
1. 优先在「登录信息」这类 box（卡片区域）中的合适空位插入以下 HTML：

<li class="instanceInformation-itme">
    <div class="instance-itme-name">快速连接</div>
    <div class="instance-itme-desc ">
        <button type="button" class="btn btn-info btn-sm" id="ssh-btn-1">SSH快速连接</button>
    </div>
</li>

2. 在该 TPL 文件最底部（</body> 前或文件末尾）插入以下 script：

<script>
(function(){
var b1=document.getElementById('ssh-btn-1');
if(!b1)return;
var host='{$Detail.host_data.dedicatedip}',natAcl='{$Detail.dcimcloud.nat_acl}',natWeb='{$Detail.dcimcloud.nat_web}',port=('{$Detail.host_data.port}').trim(),user='{$Detail.host_data.username}',pass='{$Detail.host_data.password}';
var SSH_URL='请在这个位置修改成自己的URL';
function go(){
var h=host.trim();if(!h)h=natAcl.trim();if(!h)h=natWeb.trim();
var p=port;
if(p==='0'||p===''||p==='undefined')p='22';
if(h&&h.indexOf(':')>0){var a=h.split(':');var last=a[a.length-1];if(/^\d+$/.test(last)){p=last;h=h.substring(0,h.lastIndexOf(':'))}}
if(!h||!user||!pass){alert('连接信息不完整');return;}
var u=SSH_URL+'/direct/connect?host='+encodeURIComponent(h)+'&port='+encodeURIComponent(p)+'&username='+encodeURIComponent(user)+'&password='+encodeURIComponent(pass);
window.open(u,'_blank');
}
b1.onclick=go;
})();
</script>

3. 请确保按钮样式与现有登录信息列表项保持一致，不要破坏原有布局。
4. 修改完成后告诉我改了哪个文件。

4.3 脚本工作原理

变量	来源	说明
`host`	`{$Detail.host_data.dedicatedip}`	主 IP 地址
`natAcl` / `natWeb`	DCIM 云相关字段	IP 为空时的备用地址
`port`	`{$Detail.host_data.port}`	SSH 端口，空或 0 时默认 22
`user` / `pass`	主机账号密码	用于自动填充连接
`SSH_URL`	手动配置	你的 SSH 网页端站点地址

点击按钮后，脚本会拼接 URL 并新窗口打开：然后变成安全连接

{SSH_URL}/direct/connect?host=...&port=...&username=...&password=...

第五步：保存并验证

5.1 保存文件

AI 或手动修改完成后，在 Trae 中 保存所有文件（Ctrl + S / Cmd + S）。

5.2 清除缓存（如需要）

若修改后页面没有变化，可在魔方财务后台或浏览器中：

清除网站模板缓存（如有）。
浏览器强制刷新（Ctrl + F5）。

5.3 功能验证清单

会员中心 → 我的产品 → 进入某台 Linux 服务器 的服务详情页
「登录信息」区域出现 SSH 快速连接 按钮
点击按钮后，新窗口打开 SSH 网页端
连接信息（IP、端口、用户名）已自动填充
能正常进入终端界面

测试建议

建议先用一台测试服务器验证，确认无误后再在生产环境推广。NAT 机器、Windows 系统等特殊类型需确认 host_data 字段是否有值。

常见问题

点击按钮无反应

检查浏览器控制台（F12）是否有 JavaScript 报错。
确认按钮 id="ssh-btn-1" 与脚本中 getElementById 一致。
确认 script 标签已正确插入且未被主题其他脚本覆盖。

提示「连接信息不完整」

说明模板变量未取到主机 IP、用户名或密码。可能原因：

当前产品类型不是标准云主机（如无 host_data 字段）。
服务尚未开通或信息未同步，稍后再试。
模板变量名与当前魔方版本 / 主题不匹配，需对照实际 $Detail 结构调整。

跳转后 SSH 页面报错

确认 SSH_URL 填写正确，且 SSH 站点可正常访问。
确认 SSH 插件已安装完成，反向代理已配置（参见安装指南）。
检查 SSH 站点是否已授权当前域名。

按钮样式与主题不协调

可让 AI 根据现有 <li class="instanceInformation-itme"> 的结构微调 class 名称，或直接复用主题中已有的按钮样式类名。