From 881f2c70f28160511bc8404edf7d9f4f7743c572 Mon Sep 17 00:00:00 2001
From: v_hwweng <v_hwweng@tencent.com>
Date: Tue, 5 Nov 2024 11:04:50 +0800
Subject: [PATCH 1/2] =?UTF-8?q?bug:=20=E6=A8=A1=E6=9D=BF=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?-=E6=A8=A1=E6=9D=BF=E7=9A=84=E5=88=A0=E9=99=A4=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E4=BC=9A=E8=A2=AB=E9=81=AE=E6=8C=A1=20#11056=20#=20Re?=
 =?UTF-8?q?viewed,=20transaction=20id:=2022847?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/template/extMenu.vue       | 208 ++++++++++++++++++
 .../src/components/template/templateTable.vue | 206 +++++------------
 2 files changed, 268 insertions(+), 146 deletions(-)
 create mode 100644 src/frontend/devops-pipeline/src/components/template/extMenu.vue

diff --git a/src/frontend/devops-pipeline/src/components/template/extMenu.vue b/src/frontend/devops-pipeline/src/components/template/extMenu.vue
new file mode 100644
index 00000000000..690e38cab84
--- /dev/null
+++ b/src/frontend/devops-pipeline/src/components/template/extMenu.vue
@@ -0,0 +1,208 @@
+<template>
+    <bk-popover
+        :disabled="config.length === 0"
+        placement="bottom"
+        ref="dotMenuRef"
+        theme="dot-menu light"
+        trigger="click"
+        class="template-ext-menu"
+        :transfer="true"
+        :tippy-options="{
+            arrow: false,
+            offset: '5, 1',
+            placement: 'bottom'
+        }"
+        :on-show="handleShowMenu"
+        :on-hide="handleHideMenu"
+    >
+        <div :class="`dot-menu-trigger ${extCls}`">
+            <span
+                :class="[{ 'has-show': hasShow }, 'show-more']"
+            >
+                {{ $t('more') }}
+            </span>
+        </div>
+        <ul
+            v-if="config.length > 0"
+            class="dot-menu-list"
+            slot="content"
+        >
+            <li
+                v-perm="item.permissionData ? {
+                    hasPermission: item.hasPermission,
+                    disablePermissionApi: item.disablePermissionApi,
+                    permissionData: item.permissionData
+                } : {}"
+                :class="[{ 'is-disable': item.disable, 'bk-permission-disable': !item.hasPermission }, 'dot-menu-item']"
+                v-for="(item, index) of config"
+                v-bk-tooltips="getTooltips(item)"
+                :key="index"
+                @click.stop="clickMenuItem(item)"
+            >
+                {{ item.text }}
+            </li>
+        </ul>
+    </bk-popover>
+</template>
+
+<script>
+    export default {
+        props: {
+            data: {
+                type: Object,
+                default: () => ({})
+            },
+            config: {
+                type: Array,
+                default: () => []
+            },
+            extCls: {
+                type: String,
+                default: ''
+            }
+        },
+        data () {
+            return {
+                hasShow: false
+            }
+        },
+        methods: {
+            getTooltips (item) {
+                return {
+                    content: item?.tooltips,
+                    disabled: !item?.tooltips,
+                    allowHTML: false
+                }
+            },
+            clickMenuItem (item) {
+                if (item.disable) return
+
+                this.$refs.dotMenuRef.hideHandler()
+                item.handler(this.data, item)
+            },
+            handleShowMenu () {
+                this.hasShow = true
+            },
+            handleHideMenu () {
+                this.hasShow = false
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+     @import '../../scss/conf';
+
+    .template-ext-menu {
+        height: 40px;
+        display: flex;
+    }
+
+    .ext-dot {
+        width: 3px;
+        height: 3px;
+        border-radius: 50%;
+        background-color: $fontWeightColor;
+        & + .ext-dot {
+            margin-top: 4px;
+        }
+    }
+
+    .dot-menu {
+        position: relative;
+        padding: 0 4px;
+        display: inline-flex;
+        cursor: pointer;
+        &:hover,
+        &.active {
+            .ext-dot {
+                background-color: $primaryColor;
+            }
+        }
+        > div {
+            height: 100%;
+        }
+    }
+
+    .task-card .dot-menu {
+        height: 100%;
+        border-left: 1px solid #dde4eb;
+        &:hover{
+            background-color: $bgHoverColor;
+        }
+    }
+
+    .tippy-tooltip.dot-menu-theme {
+        padding: 0 !important;
+    }
+    .dot-menu-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-size: 22px;
+        cursor: pointer;
+        border-radius: 50%;
+        &:hover {
+            color: $primaryColor;
+        }
+    }
+    .show-more {
+        position: relative;
+        padding-right: 20px;
+        font-size: 12px;
+        color: #7b7d8a;
+        margin-left: 10px;
+        &:after {
+            content: '';
+            position: absolute;
+            top: 23px;
+            right: 8px;
+            height: 8px;
+            width: 8px;
+            border-right: 1px solid $fontColor;
+            border-bottom: 1px solid $fontColor;
+            transition: transform 200ms;
+            transform: rotate(45deg);
+            transform-origin: 6px 6px;
+        }
+    }
+    
+    .has-show:after {
+        transform: rotate(225deg);
+    }
+
+    .dot-menu-list {
+        margin: 0;
+        padding: 0;
+        min-width: 100px;
+        list-style: none;
+        border: 1px solid $borderWeightColor;
+        border-radius: 2px;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
+        z-index: 3;
+        .dot-menu-item {
+            display: block;
+            width: 100%;
+            height: 32px;
+            line-height: 32px;
+            font-size: 12px;
+            padding: 0 20px;
+            color: $fontWeightColor;
+            background-color: #fff;
+            text-align: center;
+            cursor: pointer;
+            &:hover {
+                background-color: $primaryLightColor;
+                color: $primaryColor;
+            }
+        }
+        .is-disable {
+            cursor: not-allowed;
+            color: #c4c6cc;
+            &:hover {
+                color: #c4c6cc !important;
+            }
+        }
+    }
+</style>
diff --git a/src/frontend/devops-pipeline/src/components/template/templateTable.vue b/src/frontend/devops-pipeline/src/components/template/templateTable.vue
index 9143a19637f..6154f355e07 100755
--- a/src/frontend/devops-pipeline/src/components/template/templateTable.vue
+++ b/src/frontend/devops-pipeline/src/components/template/templateTable.vue
@@ -181,109 +181,10 @@
                         >
                             {{ $t('template.instantiate') }}
                         </span>
-                        <span
-                            @click.stop="showTools(row)"
-                            :class="[{ 'has-show': row.showMore }, 'show-more']"
-                            data-name="btns"
-                        >
-                            {{ $t('more') }}
-                            <template v-if="isEnabledPermission">
-                                <ul
-                                    v-show="row.showMore"
-                                    class="btn-more"
-                                >
-                                    <li
-                                        @click="copyTemplate(row)"
-                                        data-name="copy"
-                                        v-perm="{
-                                            hasPermission: hasCreatePermission,
-                                            disablePermissionApi: true,
-                                            permissionData: {
-                                                projectId: projectId,
-                                                resourceType: 'pipeline_template',
-                                                resourceCode: projectId,
-                                                action: TEMPLATE_RESOURCE_ACTION.CREATE
-                                            }
-                                        }"
-                                        key="cloneBtn"
-                                    >
-                                        {{ $t('clone') }}
-                                    </li>
-                                    <template v-if="!['constraint','CONSTRAINT'].includes(row.templateType)">
-                                        <li
-                                            v-if="['customize','CUSTOMIZE'].includes(row.templateType) && row.storeFlag"
-                                            data-name="stored"
-                                            class="is-disabled bk-permission-disable"
-                                            key="alreadyToStoreBtn"
-                                        >
-                                            {{ $t('template.alreadyToStore') }}
-                                        </li>
-                                        <li
-                                            v-else
-                                            @click="toRelativeStore(row)"
-                                            data-name="store"
-                                            v-perm="{
-                                                hasPermission: row.canEdit,
-                                                disablePermissionApi: true,
-                                                permissionData: {
-                                                    projectId: projectId,
-                                                    resourceType: 'pipeline_template',
-                                                    resourceCode: row.templateId,
-                                                    action: TEMPLATE_RESOURCE_ACTION.EDIT
-                                                }
-                                            }"
-                                            key="toStoreBtn"
-                                        >
-                                            {{ $t('template.toStore') }}
-                                        </li>
-                                    </template>
-                                    <li
-                                        @click="deleteTemplate(row)"
-                                        data-name="delete"
-                                        v-perm="{
-                                            hasPermission: row.canEdit,
-                                            disablePermissionApi: true,
-                                            permissionData: {
-                                                projectId: projectId,
-                                                resourceType: 'pipeline_template',
-                                                resourceCode: row.templateId,
-                                                action: TEMPLATE_RESOURCE_ACTION.EDIT
-                                            }
-                                        }"
-                                        key="deleteBtn"
-                                    >
-                                        {{ ['constraint','CONSTRAINT'].includes(row.templateType) ? $t('uninstall') : $t('delete') }}
-                                    </li>
-                                </ul>
-                            </template>
-                            <template v-else>
-                                <ul
-                                    v-show="row.showMore"
-                                    class="btn-more"
-                                >
-                                    <li
-                                        @click="copyTemplate(row)"
-                                        data-name="copy"
-                                    >{{ $t('clone') }}</li>
-                                    <template v-if="!['constraint','CONSTRAINT'].includes(row.templateType)">
-                                        <li
-                                            v-if="['customize','CUSTOMIZE'].includes(row.templateType) && row.storeFlag"
-                                            data-name="stored"
-                                            class="has-stored"
-                                        >{{ $t('template.alreadyToStore') }}</li>
-                                        <li
-                                            @click="toRelativeStore(row)"
-                                            v-else
-                                            data-name="store"
-                                        >{{ $t('template.toStore') }}</li>
-                                    </template>
-                                    <li
-                                        @click="deleteTemplate(row)"
-                                        data-name="delete"
-                                    >{{ ['constraint','CONSTRAINT'].includes(row.templateType) ? $t('uninstall') : $t('delete') }}</li>
-                                </ul>
-                            </template>
-                        </span>
+                        <ext-menu
+                            :data="row"
+                            :config="row.templateActions"
+                        />
                     </div>
                 </template>
             </bk-table-column>
@@ -365,6 +266,7 @@
 
 <script>
     import Logo from '@/components/Logo'
+    import ExtMenu from './extMenu'
     import { navConfirm } from '@/utils/util'
     import {
         RESOURCE_ACTION,
@@ -374,7 +276,8 @@
 
     export default {
         components: {
-            Logo
+            Logo,
+            ExtMenu
         },
         data () {
             return {
@@ -434,14 +337,9 @@
 
         mounted () {
             this.requestHasCreatePermission()
-            this.addClickListener()
             this.getListData()
         },
 
-        beforeDestroy () {
-            this.removeClickListener()
-        },
-
         methods: {
             pageCountChange (limit) {
                 this.pagingConfig.current = 1
@@ -452,13 +350,6 @@
                 this.pagingConfig.current = current
                 this.getListData()
             },
-            showTools (row) {
-                this.listData.forEach((data) => {
-                    if (data.templateId === row.templateId) row.showMore = true
-                    else data.showMore = false
-                })
-            },
-
             async requestHasCreatePermission () {
                 try {
                     this.canCreatePP = await this.$store.dispatch('pipelines/requestHasCreatePermission', {
@@ -476,8 +367,56 @@
                         this.isEnabledPermission = res.enableTemplatePermissionManage
                         this.isManagerUser = res.hasPermission
                         this.listData = (res.models || []).map(x => {
-                            x.showMore = false
                             x.updateTime = moment(x.updateTime).format('YYYY-MM-DD HH:mm:ss')
+                            x.templateActions = [
+                                {
+                                    text: this.$t('clone'),
+                                    handler: this.copyTemplate,
+                                    hasPermission: this.hasCreatePermission,
+                                    disablePermissionApi: true,
+                                    permissionData: {
+                                        projectId: this.projectId,
+                                        resourceType: 'pipeline_template',
+                                        resourceCode: this.projectId,
+                                        action: this.RESOURCE_ACTION.CREATE
+                                    }
+                                },
+                                ...(
+                                    !['constraint', 'CONSTRAINT'].includes(x.templateType)
+                                        ? [
+                                            ['customize', 'CUSTOMIZE'].includes(x.templateType) && x.storeFlag
+                                                ? {
+                                                    text: this.$t('template.alreadyToStore'),
+                                                    disable: true
+                                                }
+                                                : {
+                                                    text: this.$t('template.toStore'),
+                                                    handler: this.toRelativeStore,
+                                                    hasPermission: x.canEdit,
+                                                    disablePermissionApi: true,
+                                                    permissionData: {
+                                                        projectId: this.projectId,
+                                                        resourceType: 'pipeline_template',
+                                                        resourceCode: x.templateId,
+                                                        action: this.TEMPLATE_RESOURCE_ACTION.EDIT
+                                                    }
+                                                }
+                                        ]
+                                        : []
+                                ),
+                                {
+                                    text: ['constraint', 'CONSTRAINT'].includes(x.templateType) ? this.$t('uninstall') : this.$t('delete'),
+                                    handler: this.deleteTemplate,
+                                    hasPermission: x.canEdit,
+                                    disablePermissionApi: true,
+                                    permissionData: {
+                                        projectId: this.projectId,
+                                        resourceType: 'pipeline_template',
+                                        resourceCode: x.templateId,
+                                        action: this.TEMPLATE_RESOURCE_ACTION.EDIT
+                                    }
+                                }
+                            ]
                             return x
                         })
                         this.pagingConfig.count = res.count
@@ -618,14 +557,6 @@
                 }
             },
 
-            addClickListener () {
-                document.addEventListener('mouseup', this.closeShowMore)
-            },
-
-            removeClickListener () {
-                document.removeEventListener('mouseup', this.closeShowMore)
-            },
-
             handleSortChange ({ prop, order }) {
                 this.getListData({
                     orderBy: this.sortByMap[prop],
@@ -668,6 +599,9 @@
         .template-name {
             max-width: 192px;
             padding: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
             span {
                 cursor: pointer;
                 margin: 8px 13px;
@@ -710,6 +644,7 @@
         .handler-btn {
             overflow: visible;
             position: relative;
+            display: flex;
             .btn-more {
                 position: absolute;
                 top: 50px;
@@ -736,26 +671,6 @@
                     }
                 }
             }
-            .show-more {
-                position: relative;
-                padding-right: 20px;
-                &:after {
-                    content: '';
-                    position: absolute;
-                    top: 23px;
-                    right: 8px;
-                    height: 8px;
-                    width: 8px;
-                    border-right: 1px solid $fontColor;
-                    border-bottom: 1px solid $fontColor;
-                    transition: transform 200ms;
-                    transform: rotate(45deg);
-                    transform-origin: 6px 6px;
-                }
-            }
-            .has-show:after {
-                transform: rotate(225deg);
-            }
             span {
                 display: inline-block;
                 margin-left: 5px;
@@ -774,7 +689,6 @@
         ::v-deep .cell {
             height: 60px;
             line-height: 60px;
-            overflow: visible !important;
         }
     }
 

From 7ceafa0e1219837bae280822ca7d4307082c27f8 Mon Sep 17 00:00:00 2001
From: v_hwweng <v_hwweng@tencent.com>
Date: Tue, 5 Nov 2024 11:57:43 +0800
Subject: [PATCH 2/2] =?UTF-8?q?bug:=20=E6=A8=A1=E6=9D=BF=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?-=E6=A8=A1=E6=9D=BF=E7=9A=84=E5=88=A0=E9=99=A4=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E4=BC=9A=E8=A2=AB=E9=81=AE=E6=8C=A1=20#11056=20#=20Re?=
 =?UTF-8?q?viewed,=20transaction=20id:=2022867?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/template/extMenu.vue       | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/frontend/devops-pipeline/src/components/template/extMenu.vue b/src/frontend/devops-pipeline/src/components/template/extMenu.vue
index 690e38cab84..ef251bf2567 100644
--- a/src/frontend/devops-pipeline/src/components/template/extMenu.vue
+++ b/src/frontend/devops-pipeline/src/components/template/extMenu.vue
@@ -96,6 +96,19 @@
     .template-ext-menu {
         height: 40px;
         display: flex;
+        .dot-menu-trigger {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            font-size: 22px;
+            cursor: pointer;
+            border-radius: 50%;
+            &:hover {
+                background: rgba(0, 0, 0, 0) !important;
+                color: $primaryColor;
+            }
+        }
     }
 
     .ext-dot {
@@ -135,18 +148,7 @@
     .tippy-tooltip.dot-menu-theme {
         padding: 0 !important;
     }
-    .dot-menu-trigger {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        font-size: 22px;
-        cursor: pointer;
-        border-radius: 50%;
-        &:hover {
-            color: $primaryColor;
-        }
-    }
+    
     .show-more {
         position: relative;
         padding-right: 20px;