按钮加跳转
This commit is contained in:
jack
@@ -298,6 +298,11 @@
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- 复制成功提示(toast,右下角,2 秒淡出) -->
|
||||
<transition name="toast">
|
||||
<div v-if="copyTipVisible" class="copy-tip">{{ copyTipText }}</div>
|
||||
</transition>
|
||||
|
||||
<div class="group_15 flex-row" id="gateway">
|
||||
<div class="group_16 flex-col">
|
||||
<div class="group_17 flex-col">
|
||||
@@ -320,13 +325,13 @@
|
||||
<div class="block_6 flex-row">
|
||||
<span class="text_25">http://localhost:3001</span>
|
||||
<span class="text_26">/v1/responses</span>
|
||||
<div class="box_6 flex-col">
|
||||
<div class="box_6 flex-col" title="复制 URL" @click="copyUrl">
|
||||
<div class="group_19 flex-col"><div class="section_9 flex-col"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block_7 flex-row justify-between">
|
||||
<div class="box_7 flex-row">
|
||||
<div class="box_7 flex-row" @click="openCanvas" title="前往 Canvas 获取秘钥">
|
||||
<div class="image-text_5 flex-row justify-between">
|
||||
<div class="image-wrapper_8 flex-col">
|
||||
<img
|
||||
@@ -338,7 +343,7 @@
|
||||
<span class="text-group_6">获取秘钥</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_8 flex-row">
|
||||
<div class="box_8 flex-row" @click="openDocs" title="前往 GenMind 文档">
|
||||
<div class="image-text_6 flex-row justify-between">
|
||||
<div class="image-wrapper_9 flex-col">
|
||||
<img
|
||||
@@ -620,7 +625,10 @@ export default {
|
||||
scrollLocked: false,
|
||||
videoModalOpen: false,
|
||||
videoModalSrc: '',
|
||||
videoModalKey: ''
|
||||
videoModalKey: '',
|
||||
// 复制 URL 提示(toast)
|
||||
copyTipText: '',
|
||||
copyTipVisible: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -687,6 +695,67 @@ export default {
|
||||
}
|
||||
setTimeout(() => this.scrollTo('about'), 200);
|
||||
},
|
||||
// 复制模型网关 URL 到剪贴板。优先用 navigator.clipboard(现代浏览器),
|
||||
// 不支持时降级到临时 textarea + document.execCommand('copy')(老浏览器 / 非 https)
|
||||
copyUrl() {
|
||||
const url = 'http://localhost:3001/v1/responses';
|
||||
const showTip = () => this.showCopyTip('已复制: ' + url);
|
||||
const fallback = () => {
|
||||
try {
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = url;
|
||||
ta.setAttribute('readonly', '');
|
||||
ta.style.position = 'fixed';
|
||||
ta.style.opacity = '0';
|
||||
ta.style.left = '-9999px';
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
const ok = document.execCommand('copy');
|
||||
document.body.removeChild(ta);
|
||||
this.showCopyTip(ok ? '已复制: ' + url : '复制失败,请手动复制');
|
||||
} catch (e) {
|
||||
this.showCopyTip('复制失败,请手动复制');
|
||||
}
|
||||
};
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(url).then(showTip).catch(fallback);
|
||||
} else {
|
||||
fallback();
|
||||
}
|
||||
// 视觉反馈:复制按钮闪一下
|
||||
const btn = document.querySelector('.box_6');
|
||||
if (btn) {
|
||||
btn.classList.add('btn-flash');
|
||||
setTimeout(() => btn.classList.remove('btn-flash'), 300);
|
||||
}
|
||||
},
|
||||
// 跳转 Canvas(获取秘钥页),新窗口打开
|
||||
openCanvas() {
|
||||
const btn = document.querySelector('.box_7');
|
||||
if (btn) {
|
||||
btn.classList.add('btn-flash');
|
||||
setTimeout(() => btn.classList.remove('btn-flash'), 300);
|
||||
}
|
||||
window.open('https://118.178.253.27/canvas', '_blank', 'noopener,noreferrer');
|
||||
},
|
||||
// 跳转 GenMind 文档,新窗口打开
|
||||
openDocs() {
|
||||
const btn = document.querySelector('.box_8');
|
||||
if (btn) {
|
||||
btn.classList.add('btn-flash');
|
||||
setTimeout(() => btn.classList.remove('btn-flash'), 300);
|
||||
}
|
||||
window.open('https://118.178.253.27/genmind/login', '_blank', 'noopener,noreferrer');
|
||||
},
|
||||
// 显示复制成功提示(toast),2 秒淡出
|
||||
showCopyTip(text) {
|
||||
this.copyTipText = text;
|
||||
this.copyTipVisible = true;
|
||||
clearTimeout(this._copyTipTimer);
|
||||
this._copyTipTimer = setTimeout(() => {
|
||||
this.copyTipVisible = false;
|
||||
}, 2000);
|
||||
},
|
||||
openVideo(key) {
|
||||
// 视频文件与封面映射集中放这里,以后加视频就在这加分支
|
||||
const map = {
|
||||
@@ -1178,6 +1247,61 @@ export default {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* ============ 模型网关段三个按钮交互 ============ */
|
||||
/* 复制按钮:hover 浅一下 + cursor pointer,跟"了解我"按钮交互一致 */
|
||||
.box_6,
|
||||
.box_7,
|
||||
.box_8 {
|
||||
cursor: pointer !important;
|
||||
transition: background-color 0.2s, transform 0.15s;
|
||||
}
|
||||
.box_6:hover,
|
||||
.box_7:hover,
|
||||
.box_8:hover {
|
||||
background-color: rgba(40, 40, 40, 1) !important;
|
||||
}
|
||||
/* box_7/box_8 用 flex 真居中:图标+文字水平垂直都居中,
|
||||
不依赖原来硬算的 margin(在某些字体渲染下会偏移)。
|
||||
原 .image-text_5/.image-text_6 的 margin 保留以兼容旧布局 */
|
||||
.box_7,
|
||||
.box_8 {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
.box_7 .image-text_5,
|
||||
.box_8 .image-text_6 {
|
||||
margin: 0 !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
/* 复制的 toast:右下角浮动提示,2 秒淡出 */
|
||||
.copy-tip {
|
||||
position: fixed;
|
||||
right: 1.6rem;
|
||||
bottom: 1.6rem;
|
||||
z-index: 10000;
|
||||
padding: 0.32rem 0.64rem;
|
||||
background: rgba(0, 0, 0, 0.82);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 0.4rem;
|
||||
font-family: Source Han Sans CN-Regular, "PingFang SC", -apple-system, sans-serif;
|
||||
border-radius: 0.16rem;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||||
pointer-events: none;
|
||||
max-width: 12rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
.toast-enter-active,
|
||||
.toast-leave-active {
|
||||
transition: opacity 0.22s ease, transform 0.22s ease;
|
||||
}
|
||||
.toast-enter,
|
||||
.toast-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(0.32rem);
|
||||
}
|
||||
|
||||
/* ============ footer 应用实践列 ============ */
|
||||
.practice_footer_col {
|
||||
width: 1.92rem;
|
||||
|
||||
Reference in New Issue
Block a user