feat: 单击链接不再跳转，转为添加到剪贴板

src/components/ProjectCard.vue

@@ -4,15 +4,17 @@
       <span>{{name}}</span>
     </template>
     <div>描述：{{description}}</div>
-    <el-tooltip class="item" effect="dark" :content="gitRemoteUrl + ' 点击复制'" placement="top">
-      <div class="link" @click.stop="AddToClipboard(gitRemoteUrl)">链接：{{gitRemoteUrl}}</div>
-    </el-tooltip>
+    <ElTooltip class="item" effect="dark" :content="gitRemoteUrl" placement="top">
+      <div class="link">链接：<ElLink class="url" @click.stop.prevent="copy(gitRemoteUrl)">{{gitRemoteUrl}}</ElLink></div>
+    </ElTooltip>
   </ElCard>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { copy } from '@/utils/clipboard';
+
 export default defineComponent({
   props: {
     id: Number,
@@ -22,23 +24,7 @@ export default defineComponent({
     groupId: Number,
   },
   methods: {
-    AddToClipboard(text: string) {
-      const textarea = document.createElement('textarea');
-      textarea.innerHTML = text;
-      textarea.value = text;
-      document.body.appendChild(textarea);
-      textarea.select();
-      try {
-        if (document.execCommand('Copy')) {
-          alert('复制成功！');
-        } else {
-          alert('复制失败！');
-        }
-      } catch (err) {
-        alert('复制失败！');
-      }
-      document.body.removeChild(textarea);
-    },
+    copy,
   },
 });
 </script>

src/utils/clipboard.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
+/**
+ * 请注意，此处引用了外部的this，因此在Vue实例中导入并使用该方法，否则将出现错误
+ */
+export function copy(content: string) {
+  try {
+    navigator.clipboard.writeText(content).then(
+      // @ts-ignore
+      this.$message({
+        type: 'success',
+        message: '成功复制到剪贴板',
+      }),
+    );
+  } catch {
+    // @ts-ignore
+    this.$message({
+      type: 'error',
+      message: '复制到剪贴板失败',
+    });
+  }
+}

src/views/Project/Invite.vue

@@ -5,7 +5,7 @@
   </el-row>
   <div class="row-item">
     <span>邀请码：</span>
-    <span>{{relateCode}}</span>
+    <span @click="copy(relateCode)">{{relateCode}}</span>
   </div>
   <div class="row-item">
     <span>
@@ -40,6 +40,8 @@
 import { ProjectAPI } from '@/api';
 import { ElMessage } from 'element-plus';
 
+import { copy } from '@/utils/clipboard';
+
 export default {
   data() {
     return {
@@ -48,6 +50,7 @@ export default {
     };
   },
   methods: {
+    copy,
     async generateRelateCode() {
       this.relateCode = await ProjectAPI.generateRelateCode(this.$store.state.workspace.currentProjectId);
       ElMessage.success('邀请码将在5分钟后失效，请及时完成操作！');

src/views/Project/Pipeline.vue

@@ -286,12 +286,11 @@
           prop="pipelineId"
           label="流水线ID"
           align="center"
-          width="60"
+          width="100"
         ></ElTableColumn>
         <ElTableColumn
           label="部署时间"
           align="center"
-          width="320"
           :formatter="(row) => formatter(row.deployedTime)"
         ></ElTableColumn>
         <ElTableColumn
@@ -300,7 +299,7 @@
         >
           <template #default="scope">
             <ElTooltip effect="dark" :content="scope.row.accessUrl" placement="top-start">
-              <ElButton type="text" @click="open(scope.row.accessUrl, '_blank')">
+              <ElButton type="text" @click="() => copy(scope.row.accessUrl)">
                 {{scope.row.accessUrl}}
               </ElButton>
             </ElTooltip>
@@ -349,6 +348,7 @@
 import { APITestAPI, PipelineAPI } from '@/api';
 
 import { formatter } from '@/utils/time';
+import { copy } from '@/utils/clipboard';
 
 export default {
   data() {
@@ -411,6 +411,7 @@ export default {
   },
   methods: {
     formatter,
+    copy,
     async handleClick(action, id) {
       switch (action) {
         case 'create': {

src/views/Project/Schedule.vue

@@ -8,7 +8,13 @@
         <div class="description-card-text" style="font-size: 18px;font-weight: bold">{{selectedProject.name}}</div>
         <div class="description-card-text">项目地址:
           <span>
-            <el-link target="_blank" type="primary" :href="selectedProject.gitRemoteUrl">{{selectedProject.gitRemoteUrl}}</el-link>
+            <el-link
+              target="_blank"
+              type="primary"
+              @click.prevent="copy(selectedProject.gitRemoteUrl)"
+            >
+              {{selectedProject.gitRemoteUrl}}
+            </el-link>
           </span>
         </div>
         <div class="description-card-text">项目介绍:
@@ -32,9 +38,6 @@
   </el-card>
   <el-row  style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;color: #333333">
     <h4>项目规划</h4>
-    <el-tooltip class="item" effect="dark" :content="scheduleGuide" placement="right-end">
-      <i class="el-icon-question"></i>
-    </el-tooltip>
   </el-row>
   <Tree
     :data="requirements"
@@ -56,9 +59,9 @@ import Tree from '@/components/Tree.vue';
 import * as echarts from 'echarts';
 import { BugListAPI, RequirementAPI } from '@/api';
 import RequirementDrawer from '@/components/RequirementDrawer.vue';
+import { copy } from '@/utils/clipboard';
 import { useProjectList } from '../../composable/useProject';
 
-const scheduleGuide = '项目规划用于asdsadsadda';
 export default {
   name: 'Schedule',
   components: { RequirementDrawer, Tree },
@@ -70,7 +73,6 @@ export default {
   },
   data() {
     return {
-      scheduleGuide,
       loading: false,
       requirements: [],
       showRequirementDrawer: false,
@@ -96,6 +98,7 @@ export default {
     },
   },
   methods: {
+    copy,
     async getTreeData() {
       this.loading = true;
       try {