按钮加跳转

src/views/withmind/index.vue

@@ -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;