From 7fd854160a0e2f097463add2fd022d316f8b5af4 Mon Sep 17 00:00:00 2001
From: GONGONGONG <506419689@qq.com>
Date: Wed, 21 Feb 2024 14:48:26 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:Agent=E5=8C=85=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91--story=3D119532566=20Agent=E5=8C=85=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/modules/pkg_manage.js        |  33 +
 frontend/src/common/demand-import.ts          |   4 +-
 frontend/src/common/util.ts                   |  22 +
 .../src/components/common/flexible-tag.vue    | 214 +++--
 frontend/src/components/common/navigation.vue |  49 +-
 frontend/src/components/common/tag.vue        | 458 +++++++++++
 frontend/src/components/common/upload.vue     |  20 +-
 .../setup-table/install-input-type.vue        |  33 +-
 .../components/setup-table/install-table.vue  |  67 +-
 .../components/setup-table/table-header.vue   |  58 +-
 .../src/components/setup-table/upload.vue     |  18 +-
 frontend/src/css/app.css                      |  20 +-
 frontend/src/css/install-table.css            |   5 +
 frontend/src/css/variable.css                 |   2 +
 frontend/src/i18n/en.js                       |  78 +-
 frontend/src/i18n/zh.js                       |  76 +-
 frontend/src/router/modules/agent-manager.ts  |  15 +
 frontend/src/router/navigation-config.ts      |   8 +-
 frontend/src/setup/index.ts                   |   8 +-
 frontend/src/store/modules/agent.ts           |  98 ++-
 frontend/src/store/modules/cloud.ts           |   2 +-
 frontend/src/store/modules/main.ts            |  20 +-
 frontend/src/types/agent/agent-type.ts        |   2 +
 frontend/src/types/agent/pkg-manage.ts        | 102 +++
 frontend/src/types/index.ts                   |  15 +-
 frontend/src/views/agent/agent-list.vue       | 106 ++-
 .../views/agent/agent-setup/agent-import.vue  | 149 +++-
 .../views/agent/agent-setup/agent-setup.vue   | 268 ++++++-
 .../agent/components/choose-pkg-dialog.vue    | 516 +++++++++++++
 .../views/agent/components/create-excel.ts    |   1 +
 .../agent/components/setup-pkg-table.vue      | 204 +++++
 .../src/views/agent/config/editTableConfig.ts |  46 +-
 .../views/agent/config/importTableConfig.js   |  13 +
 frontend/src/views/agent/package/PkgThead.vue | 345 +++++++++
 frontend/src/views/agent/package/index.vue    | 728 ++++++++++++++++++
 .../src/views/agent/package/package-cols.vue  | 401 ++++++++++
 .../views/agent/package/package-upload.vue    | 479 ++++++++++++
 .../cloud-manager-add/cloud-manager-setup.vue |  99 ++-
 .../cloud-detail-slider.vue                   |  12 +-
 .../cloud-detail-table.vue                    |  93 ++-
 frontend/src/views/cloud/cloud-manager.vue    |   2 +-
 .../components/sideslider-content-edit.vue    | 249 +++++-
 .../cloud/components/sideslider-content.vue   |   8 +-
 .../src/views/cloud/config/netTableConfig.ts  |  19 +
 .../views/cloud/config/proxy-detail-config.js |   7 +
 .../plugin/plugin-list/plugin-list-table.vue  |   2 +-
 .../plugin-package/plugin-package-table.vue   |   2 +-
 .../plugin-rule-list/plugin-rule-table.vue    |   4 +-
 frontend/src/views/task/task-detail-table.vue |   2 +-
 frontend/src/views/task/task-list-table.vue   |   2 +-
 frontend/src/vue-proto.d.ts                   |   8 +-
 support-files/bkpkg/bk_nodeman.yaml           |   2 +-
 support-files/bkpkg/bknodeman.yaml            |   1 -
 53 files changed, 4982 insertions(+), 213 deletions(-)
 create mode 100644 frontend/src/api/modules/pkg_manage.js
 create mode 100644 frontend/src/components/common/tag.vue
 create mode 100644 frontend/src/types/agent/pkg-manage.ts
 create mode 100644 frontend/src/views/agent/components/choose-pkg-dialog.vue
 create mode 100644 frontend/src/views/agent/components/setup-pkg-table.vue
 create mode 100644 frontend/src/views/agent/package/PkgThead.vue
 create mode 100644 frontend/src/views/agent/package/index.vue
 create mode 100644 frontend/src/views/agent/package/package-cols.vue
 create mode 100644 frontend/src/views/agent/package/package-upload.vue

diff --git a/frontend/src/api/modules/pkg_manage.js b/frontend/src/api/modules/pkg_manage.js
new file mode 100644
index 000000000..bd493304e
--- /dev/null
+++ b/frontend/src/api/modules/pkg_manage.js
@@ -0,0 +1,33 @@
+import { request } from '../base';
+
+export const listPackage = request('GET', 'api/agent/package/');
+export const listPackageNew = request('POST', 'api/agent/package/search/{{pk}}');
+export const updatePackage = request('PUT', 'api/agent/package/{{pk}}/');
+export const deletePackage = request('DELETE', 'api/agent/package/{{pk}}/');
+export const quickSearchCondition = request('GET', 'api/agent/package/quick_search_condition/');
+export const uploadPackage = request('POST', 'api/agent/package/upload/');
+export const parsePackage = request('POST', 'api/agent/package/parse/');
+export const createAgentRegisterTask = request('POST', 'api/agent/package/create_register_task/');
+export const queryAgentRegisterTask = request('GET', 'api/agent/package/query_register_task/');
+export const getTags = request('GET', 'api/agent/package/tags/');
+export const getVersion = request('POST', 'api/agent/package/version/');
+export const getDeployedHostsCount = request('POST', 'api/agent/package/deployed_hosts_count/');
+export const createAgentTags = request('POST', 'api/agent/package/create_agent_tags/');
+export const versionCompare = request('POST', 'api/agent/package/version_compare/');
+
+export default {
+  listPackage,
+  updatePackage,
+  listPackageNew,
+  deletePackage,
+  quickSearchCondition,
+  uploadPackage,
+  parsePackage,
+  createAgentRegisterTask,
+  queryAgentRegisterTask,
+  getTags,
+  getVersion,
+  getDeployedHostsCount,
+  createAgentTags,
+  versionCompare,
+};
diff --git a/frontend/src/common/demand-import.ts b/frontend/src/common/demand-import.ts
index 6760bd3bc..e1852cc1b 100644
--- a/frontend/src/common/demand-import.ts
+++ b/frontend/src/common/demand-import.ts
@@ -4,7 +4,8 @@ import Vue from 'vue';
 
 import {
   bkBadge, bkButton, bkCheckbox, bkCheckboxGroup, bkCol, bkCollapse, bkCollapseItem, bkContainer, bkDatePicker,
-  bkDialog, bkDropdownMenu, bkException, bkForm, bkFormItem, bkInfoBox, bkInput, bkLoading, bkMessage,
+  bkDialog, bkDropdownMenu, bkException, bkForm, bkFormItem, bkComposeFormItem,
+  bkInfoBox, bkInput, bkLoading, bkMessage,
   bkNavigation, bkNavigationMenu, bkNavigationMenuItem, bkNotify, bkOption, bkOptionGroup, bkPagination,
   bkPopover, bkProcess, bkProgress, bkRadio, bkRadioGroup, bkRoundProgress, bkRow, bkSearchSelect, bkSelect,
   bkSideslider, bkSlider, bkSteps, bkSwitcher, bkTab, bkTabPanel, bkTable, bkTableColumn, bkTagInput, bkTimePicker,
@@ -31,6 +32,7 @@ Vue.use(bkDropdownMenu);
 Vue.use(bkException);
 Vue.use(bkForm);
 Vue.use(bkFormItem);
+Vue.use(bkComposeFormItem);
 Vue.use(bkInput);
 Vue.use(bkNavigation);
 Vue.use(bkNavigationMenu);
diff --git a/frontend/src/common/util.ts b/frontend/src/common/util.ts
index 4ad20d4c0..acfa1f657 100644
--- a/frontend/src/common/util.ts
+++ b/frontend/src/common/util.ts
@@ -588,6 +588,28 @@ export const sort = (arr: any[], key: string) => {
     return (`${pre}`).toString().localeCompare((`${next}`));
   });
 };
+/**
+ * 单个函数用于解析和比较版本号
+ * 排序规则：1. 数字
+ */
+export const compareVersions = (a: string, b: string) => {
+  if (a === b) return 0;
+  if (!a || !b) return a ? 1 : -1;
+  // 解析版本号字符串，返回数字数组
+  const parseVersion = (version: string) => version?.match(/\d+/g)?.map(Number);
+
+  // 获取版本号的数字数组
+  const versionA = parseVersion(a) || [];
+  const versionB = parseVersion(b) || [];
+
+  // 比较主版本号、次版本号、补丁号和附加编号
+  for (let i = 0; i < versionA.length; i++) {
+    const diff = versionA[i] - versionB[i];
+    if (diff !== 0) return diff;
+  }
+
+  return 0; // 全部相同
+}
 /**
  * 对象深拷贝
  * @param {*} obj
diff --git a/frontend/src/components/common/flexible-tag.vue b/frontend/src/components/common/flexible-tag.vue
index ace9eb8cb..20c49672a 100644
--- a/frontend/src/components/common/flexible-tag.vue
+++ b/frontend/src/components/common/flexible-tag.vue
@@ -5,103 +5,155 @@
       content: allTagContext
     }">
     <div
-      class="tag-item flexible-tag text-ellipsis"
+      v-for="(item, index) in flexTags"
+      :key="index"
+      :class="['tag-item flexible-tag text-ellipsis', item.className]"
       :style="{
         maxWidth: `${maxWidth}px`
       }"
-      v-for="(item, index) in list"
-      :key="index">
-      {{ idKey ? item[idKey] : item }}
+      v-bind="item">
+      {{ item.tagDisplay }}
     </div>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { defineComponent, ref, getCurrentInstance, toRefs, PropType, watch } from 'vue';
 
-@Component({ name: 'flexible-tag' })
+export default defineComponent({
+  props: {
+    list: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    labelKey: {
+      type: String,
+      default: 'name',
+    },
+    maxWidth: {
+      type: Number,
+      default: 140,
+    },
+    deleteAble: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const { proxy } = (getCurrentInstance() || {});
 
-export default class BkBizSelect extends Vue {
-  @Prop({ type: Array, default: () => [] }) private readonly list!: any[];
-  @Prop({ type: String, default: '' }) private readonly idKey!: string;
-  @Prop({ type: Number, default: 140 }) private readonly maxWidth!: number;
+    const numTagNode = ref();
+    const overflowTagIndex = ref(-4);
 
-  private numTagNode: any = null;
-  private overflowTagIndex = -1;
+    const flexTags = ref<any[]>([]);
+    const allTagContext = ref('');
 
-  private get allTagContext() {
-    return this.list.map(item => (this.idKey ? item[this.idKey] : item)).join(', ');
-  }
-
-  private mounted() {
-    this.reCalcOverflow();
-  }
+    const removeOverflowTagNode = () => {
+      if (proxy?.$el && (numTagNode.value?.parentNode === proxy?.$el)) {
+        proxy?.$el.removeChild(numTagNode.value);
+      }
+    };
+    const getTagDOM = (index?: number) => {
+      const tags = [].slice.call(proxy?.$el.querySelectorAll('.tag-item'));
+      return typeof index === 'number' ? tags[index] : tags;
+    };
+    // 创建/获取溢出数字节点
+    const getNumTag = () => {
+      if (numTagNode.value) {
+        return numTagNode.value;
+      }
+      const nodeNum = document.createElement('span');
+      nodeNum.className = 'num-tag';
+      numTagNode.value = nodeNum;
+      return nodeNum;
+    };
 
-  private reCalcOverflow() {
-    this.removeOverflowTagNode();
-    if (this.list.length < 2) {
-      return false;
-    }
-    setTimeout(() => {
-      const tags: any[] = this.getTagDOM();
-      const tagIndexInSecondRow = tags.findIndex((tagItem, index) => {
-        if (!index) {
-          return false;
+    const reCalcOverflow = () => {
+      removeOverflowTagNode();
+      if (props.list.length < 2) {
+        return false;
+      }
+      setTimeout(() => {
+        const tags: any[] = getTagDOM();
+        const tagIndexInSecondRow = tags.findIndex((tagItem, index) => {
+          if (!index) {
+            return false;
+          }
+          const previousTag = tags[index - 1];
+          return previousTag.offsetTop !== tagItem.offsetTop;
+        });
+        if (tagIndexInSecondRow > -1) {
+          overflowTagIndex.value = tagIndexInSecondRow;
+        } else {
+          overflowTagIndex.value = -1;
         }
-        const previousTag = tags[index - 1];
-        return previousTag.offsetTop !== tagItem.offsetTop;
+        if (proxy?.$el) {
+          proxy.$el.scrollTop = 0;
+        }
+        insertOverflowTag();
       });
-      if (tagIndexInSecondRow > -1) {
-        this.overflowTagIndex = tagIndexInSecondRow;
+    };
+    const insertOverflowTag = () => {
+      if (overflowTagIndex.value < 0) {
+        return;
+      }
+      const overflowTagNode = getNumTag();
+      const referenceTag: any = getTagDOM(overflowTagIndex.value);
+      if (referenceTag) {
+        setOverflowTagContent();
+        proxy?.$el.insertBefore(overflowTagNode, referenceTag);
       } else {
-        this.overflowTagIndex = -1;
+        overflowTagIndex.value = -1;
+        return;
       }
-      this.$el.scrollTop = 0;
-      this.insertOverflowTag();
-    });
-  }
-  private insertOverflowTag() {
-    if (this.overflowTagIndex < 0) {
-      return;
-    }
-    const overflowTagNode = this.getNumTag();
-    const referenceTag: any = this.getTagDOM(this.overflowTagIndex);
-    if (referenceTag) {
-      this.setOverflowTagContent();
-      this.$el.insertBefore(overflowTagNode, referenceTag);
-    } else {
-      this.overflowTagIndex = -1;
-      return;
-    }
-    setTimeout(() => {
-      const previousTag: any = this.getTagDOM(this.overflowTagIndex - 1);
-      if (overflowTagNode.offsetTop !== previousTag.offsetTop) {
-        this.overflowTagIndex -= 1;
-        this.$el.insertBefore(overflowTagNode, overflowTagNode.previousSibling);
-        this.setOverflowTagContent();
+      setTimeout(() => {
+        const previousTag: any = getTagDOM(overflowTagIndex.value - 1);
+        if (overflowTagNode.offsetTop !== previousTag.offsetTop) {
+          overflowTagIndex.value -= 1;
+          proxy?.$el.insertBefore(overflowTagNode, overflowTagNode.previousSibling);
+          setOverflowTagContent();
+        }
+      });
+    };
+    const setOverflowTagContent = () => {
+      numTagNode.value.textContent = `+${props.list.length - overflowTagIndex.value}`;
+    };
+
+    const updateTags = () => {
+      try {
+        const isStr = props.list.length ? typeof props.list[0] === 'string' : false;
+        const tags = isStr
+          ? props.list.map(text => ({
+            tagDisplay: text,
+            deleteAble: props.deleteAble,
+          }))
+          : props.list.map(item => ({
+            ...item,
+            tagDisplay: item[props.labelKey || 'name'],
+            deleteAble: item.readonly ? false : props.deleteAble,
+          }));
+        flexTags.value.splice(0, flexTags.value.length, ...tags);
+        allTagContext.value = tags.map(item => item.tagDisplay).join(', ');
+      } catch (_) {
+        flexTags.value.splice(0, flexTags.value.length);
+        allTagContext.value = '';
       }
+    };
+
+    watch(() => props.list, () => {
+      updateTags();
+      reCalcOverflow();
+    }, {
+      deep: true,
+      immediate: true,
     });
-  }
-  private setOverflowTagContent() {
-    this.numTagNode.textContent = `+${this.list.length - this.overflowTagIndex}`;
-  }
-  private getTagDOM(index?: number) {
-    const tags = [].slice.call(this.$el.querySelectorAll('.tag-item'));
-    return typeof index === 'number' ? tags[index] : tags;
-  }
-  // 创建/获取溢出数字节点
-  private getNumTag() {
-    if (this.numTagNode) {
-      return this.numTagNode;
-    }
-    const numTagNode = document.createElement('span');
-    numTagNode.className = 'num-tag';
-    this.numTagNode = numTagNode;
-    return numTagNode;
-  }
-  private removeOverflowTagNode() {
-    if (this.numTagNode && this.numTagNode.parentNode === this.$el) {
-      this.$el.removeChild(this.numTagNode);
-    }
-  }
-}
+
+    return {
+      ...toRefs(props),
+      flexTags,
+      allTagContext,
+    };
+  },
+});
+
+
 </script>
diff --git a/frontend/src/components/common/navigation.vue b/frontend/src/components/common/navigation.vue
index 055c8151f..18d8aba7b 100644
--- a/frontend/src/components/common/navigation.vue
+++ b/frontend/src/components/common/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <article>
+  <article class="nodeman-wrapper">
     <!--导航-->
     <bk-navigation
       ref="navigation"
@@ -131,8 +131,8 @@ import MixinsControlDropdown from '@/components/common/MixinsControlDropdown.vue
 import ExceptionPage from '@/components/exception/exception-page.vue';
 import routerBackMixin from '@/common/router-back-mixin';
 import { bus } from '@/common/bus';
-import { INavConfig } from '@/types';
 import logoSrc from '@/images/logoIcon.png';
+import { INavConfig, ISideMenuConfig } from '@/types';
 
 interface IUserItem {
   id: string
@@ -238,10 +238,29 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
     if (this.activeIndex === -1) return false;
     return !!this.navList[this.activeIndex as number].children?.length;
   }
+  // 根据开关隐藏Agent包管理菜单
+  private get navListHideAgentPkg() {
+    // 深拷贝侧边栏菜单列表
+    const navList = JSON.parse(JSON.stringify(this.navList[this.activeIndex].children || [])) as ISideMenuConfig[];
+    // 过滤隐藏Agent包管理菜单
+    navList?.forEach((item) => {
+      if (item.name === 'nav_Agent') {
+        item.children = item.children?.filter((child: { name: string; }) => child.name !== 'agentPackage');
+      }
+    });
+    return navList;
+  }
+  private async created() {
+    // 获取开关状态
+    await this.getAgentPackageUI();
+  }
   // 左侧导航list
   private get sideMenuList() {
     if (this.activeIndex === -1) return [];
-    return this.navList[this.activeIndex].children || [];
+    // 根据开关状态过滤agent包管理菜单
+    const agentSwitch = MainStore.ENABLE_AGENT_PACKAGE_UI;
+    const menuList = !agentSwitch ? this.navListHideAgentPkg : this.navList[this.activeIndex].children;
+    return menuList || [];
   }
   // 子菜单默认激活项
   private get currentActive() {
@@ -410,15 +429,20 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
   public handleBizChange(newBizIds: number[]) {
     MainStore.setSelectedBiz(newBizIds);
   }
+  public async getAgentPackageUI() {
+    await MainStore.getAgentPackageUI();
+  }
 }
 </script>
-<style lang="postcss" scoped>
-  @import "@/css/mixins/nodeman.css";
-  @import "@/css/variable.css";
+<style lang="postcss">
+@import "@/css/mixins/nodeman.css";
+@import "@/css/variable.css";
+
+$navColor: #96a2b9;
+$navHoverColor: #d3d9e4;
+$headerColor: #313238;
 
-  $navColor: #96a2b9;
-  $navHoverColor: #d3d9e4;
-  $headerColor: #313238;
+.nodeman-wrapper {
 
   .menu-biz-shrink-text {
     opacity: 0;
@@ -485,6 +509,12 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
       }
     }
   }
+  .nav-content-wrapper {
+    height: 100%;
+    & > div {
+      height: 100%;
+    }
+  }
   .nodeman-main-loading {
     /* stylelint-disable-next-line declaration-no-important */
     position: absolute !important;
@@ -604,4 +634,5 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
       display: none;
     }
   }
+}
 </style>
diff --git a/frontend/src/components/common/tag.vue b/frontend/src/components/common/tag.vue
new file mode 100644
index 000000000..2163046c7
--- /dev/null
+++ b/frontend/src/components/common/tag.vue
@@ -0,0 +1,458 @@
+<template>
+    <div
+        class="edit-tag"
+        :class="{ shortcut }"
+        @click.stop="">
+        <div
+            v-if="!isEditing"
+            class="render-value-box"
+            @click.stop="handleTextClick">
+            <div
+                ref="content"
+                v-bk-overflow-tips
+                class="value-text"
+                tag-edit-tag>
+                <slot>
+                    <template v-if="flexibleTags.length">
+                        <FlexibleTag :list="flexibleTags" />
+                    </template>
+                    <span v-else>--</span>
+                </slot>
+            </div>
+            <template v-if="!isLoading">
+                <div
+                    v-if="shortcut"
+                    class="tag-shortcut-box"
+                    @click.stop="">
+                    <div class="shortcut-action-btn">
+                        <i
+                            v-bk-tooltips="$t('复制')"
+                            class="option-icon nodeman-icon nc-windows"
+                            @click="handleCopy">
+                        </i>
+                        <i
+                            v-bk-tooltips="$t('粘贴')"
+                            class="option-icon nodeman-icon nc-windows"
+                            @click="handlePaste" >
+                        </i>
+                    </div>
+                </div>
+            </template>
+            <icon v-if="isLoading"  class="tag-edit-loading" type="loading-circle" />
+        </div>
+        <div v-else class="edit-value-box">
+            <bk-tag-input
+                ref="tagInputRef"
+                searchable
+                has-delete-icon
+                use-group
+                trigger="focus"
+                :list="options"
+                :placeholder="$t('请输入或选择')"
+                :tag-tpl="tagTpl"
+                v-model="localValue"
+                :collapse-tags="true"
+                :filter-callback="filterData"
+                @blur="handleBlur"
+                @change="handleChange"
+                @inputchange="handleInputchange" />
+                <div class="create-tag-pop" v-if="popShow"  @click="createTag">
+                    <div class="create-tag-box">
+                        <i18n path="新建标签" class="create-tag">
+                            <span>{{ tag }}</span>
+                        </i18n>
+                    </div>
+                </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+interface Tag {
+    name: string,
+    description: string,
+    className: string
+}
+import i18n from '@/setup';
+import { computed, defineComponent, getCurrentInstance, ref, toRefs, reactive, watch, PropType, onMounted, nextTick } from 'vue';
+import FlexibleTag from '@/components/common/flexible-tag.vue';
+import { IPkgTagOpt, PkgType} from '@/types/agent/pkg-manage';
+import { AgentStore } from '@/store';
+
+const copyMemo = ref([]);
+export default defineComponent ({
+    name: 'EditTag',
+    components: {
+        FlexibleTag,
+    },
+    props: {
+        field: {
+            type: String,
+            required: true,
+        },
+        value: {
+            type: Array,
+            default: () => [],
+        },
+        // 显示复制粘贴按钮
+        shortcut: {
+            type: Boolean,
+            default: false,
+        },
+        remoteHander: {
+            type: Function,
+            default: () => Promise.resolve(),
+        },
+        rules: {
+            type: Array,
+            default: () => [],
+        },
+        // 下拉框数据源
+        options: {
+            type: Array,
+            default: () => ([]),
+        },
+        active: {
+            type: String as PropType<PkgType>,
+            default: 'gse_agent',
+        }
+    },
+    emits: ['paste', 'editTag'],
+    setup(props, { emit }) {
+        const { proxy } = (getCurrentInstance() || {});
+        const isEditing = ref(false);
+        const isLoading = ref(false);
+        const localValue = ref<string[]>(props.value.map((item :any) => item.className === '' ? item.name : item.className));
+        const flexibleTags = computed(() => props.value); //用于展示的标签列表，带有className
+        watch(()=> props.value, (val) => {
+            localValue.value = val.map((item :any) => item.className === '' ? item.name : item.className)
+        });
+        const tag = ref<any>();
+        
+        const state = reactive<{
+            value: string[];
+            popShow: boolean; // 输入未匹配标签时候展示
+        }>({
+            value: [],
+            popShow: false,
+        });
+
+        const tagTpl = (opt: IPkgTagOpt) => proxy?.$createElement('div', {
+            class: `tag ${opt.className}`,
+        }, [
+            proxy?.$createElement('span', { class: 'text' }, opt.name),
+        ]);
+        onMounted(() => {
+            document.body.addEventListener('click', hideEdit);
+        });
+        const hideEdit = (event: any) => {
+            if (!isEditing.value) return;
+                const eventPath = event.composedPath();
+                for (let i = 0; i < eventPath.length; i++) {
+                const target = eventPath[i];
+                if (/tippy-popper/.test(target.className)
+                    || /bk-info-box/.test(target.className)) {
+                    return;
+                }
+            }
+            isEditing.value = false;
+            isLoading.value = true;
+
+            if(HaveSameElements(localValue.value))return;
+            emit('editTag', localValue.value);
+        }
+        const HaveSameElements = (compare: Array<any>) => {
+            // 将数组转换为集合
+            const set1 = new Set(props.value.map((item :any) => item.className === '' ? item.name : item.className));
+            const set2 = new Set(compare);
+
+            // 如果集合的大小不相等，则数组不相同
+            if (set1.size !== set2.size) {
+                return false;
+            }
+
+            // 检查每个元素是否都存在于另一个集合中
+            for (let element of set1) {
+                if (!set2.has(element)) {
+                    return false;
+                }
+            }
+
+            return true;
+
+        }
+        const handleEdit = () => {
+            // 关闭其他弹框
+            document.body.click();
+            isEditing.value = true;
+        };
+
+        const handleTextClick = () => {
+            // if (!props.shortcut) {
+            //     return;
+            // }
+            handleEdit();
+            nextTick(() => {
+                // 获取所有带有 stable 类的元素
+                const stableAllElements = document.querySelectorAll('.stable');
+                stableAllElements?.forEach(el => {
+                    const nextSiblingElement = el.nextElementSibling  as HTMLElement;
+                    if(nextSiblingElement?.classList?.contains('remove-key')) {
+                        nextSiblingElement.style.display = 'none';
+                    }
+                });
+            });
+        };
+
+        const handleCopy = () => {
+            if (localValue.value.length < 1) {
+                proxy?.$bkMessage({
+                    theme: 'warning',
+                    message: i18n.t('标签为空'),
+                });
+                return;
+            }
+            copyMemo.value = JSON.parse(JSON.stringify(localValue.value));
+            copyMemo.value.every((item:any) => !!item.name) && proxy?.$bkMessage({
+                theme: 'success',
+                message: i18n.t('复制成功'),
+            });
+        };
+
+        const handlePaste = () => {
+            if (copyMemo.value.length < 1) {
+                proxy?.$bkMessage({
+                    theme: 'warning',
+                    message: i18n.t('请先复制标签'),
+                });
+                return;
+            }
+            localValue.value = [...new Set([...copyMemo.value])];
+            emit('paste', { ...props.value, ...localValue.value });
+        };
+
+        // 处理输入值更改时候的option效果
+        const handleInputchange = (value: string) => {
+            value = value.trim();
+            const index = props.options.findIndex((item: any) => (
+                item.children.some((child: any) => child.name === value || child.id === value)
+            ));
+                        if (index === -1 && value && !localValue.value.includes(value)) {
+                state.popShow = true;
+                tag.value = value;
+            } else {
+                state.popShow = false;
+                tag.value = '';
+            }
+        };
+        // 输入框失去焦点
+        const handleBlur = () => {
+            state.popShow = false;
+            tag.value = '';
+        }
+        const handleChange = (tags: string[]) => {
+        }
+
+        const filterData = (filterVal :string, filterKey :string, data: []) => {
+            return data.filter((item: Record<string,any>) => item.id.includes(filterVal?.trim()) || item.name.includes(filterVal?.trim()));
+        }
+
+        // 新建标签
+        const createTag = async () => {
+            const backup = tag.value;
+            tag.value = '';
+            state.popShow = false;
+            const customLabels: any= props.options.find((item: any) => item.id === 'custom');
+            customLabels?.children.push({
+                id: backup,
+                name: backup,
+                className: '',
+            });
+            // 标签输入框更新标签
+            
+            !localValue.value.includes(backup) && localValue.value.push(backup);
+            const res = await AgentStore.apiPkgCreateTags({ project: props.active, tag_descriptions: [backup] as string[] });
+        }
+        
+        return {
+            ...toRefs(state),
+            isEditing,
+            isLoading,
+            localValue,
+            flexibleTags,
+            tag,
+            tagTpl,
+            
+            handleEdit,
+            handleTextClick,
+            handleCopy,
+            handlePaste,
+            handleBlur,
+            handleChange,
+            filterData,
+            handleInputchange,
+            createTag,
+        };
+    }
+});
+</script>
+<style lang="postcss" scoped>
+@import "@/css/variable.css";
+
+    .bk-search-select {
+        &.is-focus {
+            z-index: 9;
+        }
+    }
+    
+    .create-tag-pop {
+        position: relative;
+        cursor: pointer;
+        width: 100%;
+        margin-top: 4px;
+        transition-duration: 325ms;
+        height: 40px;
+        background: #fff;
+        border: 1px solid #DCDEE5;
+        box-shadow: 0 2px 6px 0 #0000001a;
+        border-radius: 2px;
+        z-index: 999;
+        .create-tag-box {
+            width: 100%;
+            height: 32px;
+            margin: 4px 0;
+            line-height: 32px;
+            background: #F5F7FA;
+            .create-tag {
+                color: #63656E;
+                margin-left: 24px;
+                font-size: 12px;
+                span {
+                    color: #3A84FF;
+                }
+            }
+        }
+    }
+    .pkg-manage-table {
+        .flexible-tag-group {
+            height: 30px;
+        }
+        .flexible-tag-group .tag-item, .tag-list .tag {
+            &.stable {
+                color: #14a568;
+                background-color: #e4faf0;
+            }
+            &.latest {
+                color: $primaryFontColor;
+                background-color: #edf4ff;
+            }
+            &.test {
+                color: #fe9c00;
+                background-color: #fff1db;
+            }
+        }
+    }
+    
+    @keyframes tag-edit-loading {
+        to {
+            transform: rotateZ(360deg);
+        }
+    }
+  
+    .edit-tag {
+        position: relative;
+        height: 30px;
+        cursor: pointer;
+        border-radius: 2px;
+        &:hover {
+            background: #e1e2e6;
+        }
+        &.shortcut {
+            .render-value-box {
+                padding-left: 4px;
+            }
+            &:hover {
+                .shortcut-action-btn {
+                    display: flex;
+                }
+            }
+        }
+    
+        &:hover {
+            .tag-normal-box,
+            .tag-shortcut-box {
+                display: flex;
+                opacity: 100%;
+                transform: scale(1);
+            }
+        }
+  
+        .render-value-box {
+            display: flex;
+            height: 30px;
+            line-height: 30px;
+            align-items: center;
+        }
+    
+        .value-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: normal;
+        }
+    
+        .tag-normal-box,
+        .tag-shortcut-box {
+            display: none;
+            height: 30px;
+            min-width: 24px;
+            color: #979ba5;
+            opacity: 0%;
+            align-items: center;
+        }
+  
+        .tag-shortcut-box {
+            padding-right: 6px;
+            margin-left: auto;
+            font-size: 16px;
+            flex: 0 0 42px;
+    
+            .paste-btn {
+                margin-left: 4px;
+            }
+    
+            .shortcut-action-btn {
+                align-items: center;
+        
+                i:hover {
+                    color: #3a84ff;
+                }
+            }
+        }
+  
+        .tag-normal-box {
+            font-size: 16px;
+            transform: scale(0);
+            transition: 0.15s;
+            transform-origin: left center;
+    
+            .edit-action {
+                padding: 6px 15px 6px 2px;
+                cursor: pointer;
+        
+                &:hover {
+                    color: #3a84ff;
+                }
+            }
+        }
+  
+        .tag-edit-loading {
+            position: absolute;
+            top: 9px;
+            right: 10px;
+            animation: "tag-edit-loading" 1s linear infinite;
+        }
+  
+        .edit-value-box {
+            width: 100%;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/common/upload.vue b/frontend/src/components/common/upload.vue
index c6c0b5770..cf8e34ddc 100644
--- a/frontend/src/components/common/upload.vue
+++ b/frontend/src/components/common/upload.vue
@@ -43,13 +43,17 @@
               <div class="progress" v-if="file.status === 'uploading'">
                 <div class="progress-bar" :style="{ width: file.percentage }"></div>
               </div>
-              <div class="parsing-success" v-else-if="file.status === 'success'">
-                <i class="nodeman-icon nc-check-small"></i>
-                {{ $t('上传成功') }}
-              </div>
-              <div class="parsing-error" v-else-if="file.status === 'error'">
-                {{ file.errorMsg }}
-              </div>
+              <slot name="success" v-else-if="file.status === 'success'">
+                <div class="parsing-success">
+                  <i class="nodeman-icon nc-check-small"></i>
+                  {{ $t('上传成功') }}
+                </div>
+              </slot>
+              <slot name="error" v-else-if="file.status === 'error'">
+                <div class="parsing-error">
+                  {{ file.errorMsg }}
+                </div>
+              </slot>
             </div>
           </div>
           <div class="file-right" v-if="file.status === 'error'">
@@ -60,7 +64,7 @@
       </div>
     </div>
     <div class="upload-accept">
-      {{ $t('版本包文件类型') }}
+      {{ acceptDesc }}
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/setup-table/install-input-type.vue b/frontend/src/components/setup-table/install-input-type.vue
index 9690964df..1ccdc4cb6 100644
--- a/frontend/src/components/setup-table/install-input-type.vue
+++ b/frontend/src/components/setup-table/install-input-type.vue
@@ -164,6 +164,14 @@
       :value="inputValue"
       @change="handleChange">
     </bk-switcher>
+    <div
+      v-else-if="type === 'choose'"
+      :ref="type"
+      class="bk-form-input input-choose"
+      :data-placeholder="inputValue ? '' : placeholder"
+      @click="handleEmitChoose">
+      <slot name="choose">{{ inputValue }}</slot>
+    </div>
     <span v-else>--</span>
   </div>
 </template>
@@ -260,7 +268,11 @@ export default class InputType extends Mixins(emitter) {
   }
 
   @Watch('inputValue')
-  public handleValueChange() {
+  public handleValueChange(val: IValue) {
+    // 当类型为 choose 时是直接改变原始数据，从而出发change事件进行rules校验
+    if (this.type === 'choose') {
+      this.handleChange(val);
+    }
     this.$nextTick(this.setRows);
   }
 
@@ -277,6 +289,8 @@ export default class InputType extends Mixins(emitter) {
       } else if (['select', 'biz'].includes(this.type)) {
         // select框类型focus（展示下拉列表）
         this.inputRef && this.inputRef.show();
+      } else if (this.type === 'choose') {
+        this.inputRef?.click?.();
       }
     }
   }
@@ -300,6 +314,10 @@ export default class InputType extends Mixins(emitter) {
   public handleEmitUpload(value: IFileInfo) {
     return value;
   }
+  @Emit('choose')
+  public handleEmitChoose(event?: Event) {
+    return { instance: this, event };
+  }
   public handleInput(newValue: IValue, oldValue: IValue) {
     this.$emit('input', newValue, oldValue);
   }
@@ -500,5 +518,18 @@ export default class InputType extends Mixins(emitter) {
     .group-text {
       padding: 0 4px;
     }
+
+    .input-choose {
+      cursor: pointer;
+      &:before {
+        display: inline-flex;
+        align-items: center;
+        position: absolute;
+        top: 0;
+        content: attr(data-placeholder);
+        font-size: 12px;
+        color: #c4c6cc;
+      }
+    }
   }
 </style>
diff --git a/frontend/src/components/setup-table/install-table.vue b/frontend/src/components/setup-table/install-table.vue
index 8e55403cc..3af74749b 100644
--- a/frontend/src/components/setup-table/install-table.vue
+++ b/frontend/src/components/setup-table/install-table.vue
@@ -44,7 +44,7 @@
                       batch: config.getBatch ? config.getBatch.call(_self) : config.batch,
                       isBatchIconShow: !!table.data.length
                         && (config.getBatch ? config.getBatch.call(_self) : config.batch),
-                      type: config.type,
+                      type: getHeadType({}, config),
                       subTitle: config.subTitle,
                       options: getCellInputOptions({}, config),
                       multiple: !!config.multiple,
@@ -53,8 +53,10 @@
                       appendSlot: config.appendSlot,
                       parentProp: config.parentProp,
                       parentTip: config.parentTip,
-                      focusRow: focusRow
+                      focusRow: focusRow,
+                      extraInfo: config.extraInfo || {}
                     }"
+                    @chooseVersion="handleChooseVersion"
                     @confirm="handleBatchConfirm(arguments, config)">
                   </TableHeader>
                 </div>
@@ -163,6 +165,7 @@
                     @focus="handleCellFocus(arguments, { row, config, rowIndex, colIndex })"
                     @blur="handleCellBlur(arguments, { row, config, rowIndex, colIndex })"
                     @input="handleCellValueInput(arguments, row, config)"
+                    @choose="handleCellChoose(arguments, { row, config, rowIndex, colIndex })"
                     @change="handleCellValueChange(row, config)"
                     @upload-change="handleCellUploadChange($event, row)">
                   </InstallInputType>
@@ -245,6 +248,7 @@ export default class SetupTable extends Vue {
   @Prop({ type: Array }) private readonly aps!: IAp[];
   @Prop({ type: Array }) private readonly clouds!: ICloudSource[];
   @Prop() private readonly arbitrary!: any; // 可以是任意值, 用来在config文件里做为必要的一些参数
+  @Prop({ type: String, default: '' }) private readonly type!: string;
 
   @Ref('tableBody') private readonly tableBody!: any;
   @Ref('scrollPlace') private readonly scrollPlace!: any;
@@ -266,7 +270,7 @@ export default class SetupTable extends Vue {
   // 滚动节流
   private handleScroll!: Function;
   // 处于编辑态的数据
-  private editData: {  id: number, prop: string }[] = [];
+  public editData: {  id: number, prop: string }[] = [];
   private hasScroll= false;
   private listenResize!: Function;
   private focusRow: any = {};
@@ -280,6 +284,28 @@ export default class SetupTable extends Vue {
   private get apList() {
     return this.aps || AgentStore.apList;
   }
+  private pkgVersionList: any = [];
+  // 获取agent包版本
+  private async getPkgVersions() {
+    const {
+      pkg_info,
+    } = await AgentStore.apiGetPkgVersion({
+      project: 'gse_agent',
+      os: '',
+      cpu_arch: ''
+    });
+    const builtinTags = ['stable', 'latest', 'test'];
+    this.pkgVersionList.splice(0, this.pkgVersionList.length, ...pkg_info.map(item => ({
+      ...item,
+      id: item.version,
+      name: item.version,
+      tags: item.tags.filter(tag => builtinTags.includes(tag.name)).map(tag => ({
+        className: tag.name,
+        description: tag.description,
+        name: tag.description,
+      })),
+    })));
+  }
   private get channelList() {
     return AgentStore.channelList;
   }
@@ -312,9 +338,11 @@ export default class SetupTable extends Vue {
 
   private created() {
     this.handleInit();
+    
   }
   private mounted() {
     this.handleScroll();
+    this.getPkgVersions();
     window.addEventListener('resize', this.initTableHead);
   }
   private beforeDestroy() {
@@ -398,6 +426,17 @@ export default class SetupTable extends Vue {
     }
     row.validator = {};
   }
+  /**
+   * 获取表头类型
+   * @param {Object} row 当前行
+   * @param {Object} config 当前配置项
+   */
+  private getHeadType(row: ISetupRow, config: ISetupHead): string {
+    if (config.prop === 'version' && config.batch) {
+      return 'version';
+    }
+    return config.type;
+  }
   /**
    * 获取select框的options数据
    * @param {Object} row 当前行
@@ -411,6 +450,8 @@ export default class SetupTable extends Vue {
       }));
     } if (config.type === 'select') {
       return config.getOptions ? config.getOptions.call(this, row) : config.options;
+    } if (config.prop === 'version') {
+      return this.pkgVersionList;
     }
     return [];
   }
@@ -462,7 +503,7 @@ export default class SetupTable extends Vue {
     const [newValue] = arg;
     const prop = config.prop as IKeysMatch<ISetupRow, string>;
     const sync = config.sync as IKeysMatch<ISetupRow, string>;
-    const syncSource = typeof row[prop] === 'undefined' ? '' : row[prop].trim();
+    const syncSource = typeof row[prop] === 'undefined' ? '' : row[prop]?.trim();
     const syncTarget = typeof row[sync] === 'undefined' ? '' : row[sync].trim();
     if (sync && syncSource === syncTarget) {
       row[sync] = newValue;
@@ -478,7 +519,7 @@ export default class SetupTable extends Vue {
     MainStore.updateEdited(true);
     const prop = config.prop as IKeysMatch<ISetupRow, string>;
     if (config.type !== 'textarea' && row[prop] && typeof row[prop] === 'string') {
-      row[prop] = row[prop].trim();
+      row[prop] = row[prop]?.trim();
     }
     if (config.handleValueChange) {
       config.handleValueChange.call(this, row);
@@ -497,6 +538,12 @@ export default class SetupTable extends Vue {
     }
     return '';
   }
+  @Emit('choose')
+  private handleCellChoose(arg: any[], bb: { row: ISetupRow }) {
+    const [param] = arg;
+    const { row } = bb;
+    return { instance: param.instance, row };
+  }
   private rootScroll() {
     if (!this.virtualScroll) return;
 
@@ -575,7 +622,7 @@ export default class SetupTable extends Vue {
     }
     const ipRepeat = this.table.data.some((row: ISetupRow | any) => {
       if (row.id === rowId) return false;
-      let targetValue = !isEmpty(row[prop]) ? row[prop].trim() : '';
+      let targetValue = !isEmpty(row[prop]) ? row[prop]?.trim() : '';
       // 1. 处理多值的情况
       // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
       if (splitCode && splitCode.length) {
@@ -858,6 +905,14 @@ export default class SetupTable extends Vue {
     }
     return [];
   }
+  /**
+   * 单独处理agent版本选择
+   */
+  private handleChooseVersion(version: string) {
+    this.table.data.forEach((row) => {
+      row.version = version;
+    });
+  }
   /**
    * 批量编辑确定事件
    */
diff --git a/frontend/src/components/setup-table/table-header.vue b/frontend/src/components/setup-table/table-header.vue
index 75b02422d..ddc289c5e 100644
--- a/frontend/src/components/setup-table/table-header.vue
+++ b/frontend/src/components/setup-table/table-header.vue
@@ -16,9 +16,31 @@
       <span :title="$t(label)">{{ $t(label) }}</span>
       <!-- <div v-bk-overflow-tips><span>{{ $t(label) }}</span></div> -->
     </div>
+    <!-- agent包版本 -->
+    <template v-if="prop === 'version'">
+      <span
+        v-bk-tooltips.top="{
+          'content': $t('批量编辑', { title: '' }),
+          'delay': [300, 0]
+        }"
+        class="batch-icon nodeman-icon nc-bulk-edit"
+        :class="{ 'active': isActive }"
+        @click="handleChooseClick"
+        v-show="isBatchIconShow">
+      </span>
+      <ChoosePkgDialog
+        v-model="versionsDialog.show"
+        :project="versionsDialog.project"
+        :type="versionsDialog.type"
+        :title="versionsDialog.title"
+        :versions="versionsDialog.versions"
+        :operate="versionsDialog.operate"
+        @confirm="versionConfirm"
+        @cancel="handleBatchCancel"/>
+    </template>
     <bk-popover
       class="batch-btn"
-      v-if="batch"
+      v-else-if="batch"
       theme="light batch-edit"
       trigger="manual"
       placement="bottom"
@@ -100,12 +122,14 @@ import InstallInputType from './install-input-type.vue';
 import { IFileInfo, ISetupRow } from '@/types';
 import TableHeaderTip from './table-header-tip.vue';
 import { getConfigRemark } from '@/config/config';
+import ChoosePkgDialog from '@/views/agent/components/choose-pkg-dialog.vue';
 
 @Component({
   name: 'table-header',
   components: {
     InstallInputType,
     TableHeaderTip,
+    ChoosePkgDialog,
   },
 })
 
@@ -127,6 +151,7 @@ export default class TableHeader extends Vue {
   @Prop({ type: String, default: '' }) private readonly appendSlot!: string;
   @Prop({ type: Object, default: () => ({}) }) private readonly focusRow!: ISetupRow;
   @Prop({ type: String, default: 'light setup-tips' }) private readonly tipTheme!: string;
+  @Prop({ type: Object, default: () => ({}) }) private readonly extraInfo!: any;
 
   @Ref('batch') private readonly batchRef!: any;
   @Ref('tipSpan') private readonly tipSpan!: any;
@@ -139,7 +164,21 @@ export default class TableHeader extends Vue {
   private popoverInstance: any = null;
   // 切换Popover的触发方式, 规避无法切换导致的问题 (setProps函数的替代方案, 低版tippy本无此方法)
   private tipsTrigger: 'mouseenter' | 'manual' = 'mouseenter';
-
+  private chooseVersion = '';
+  private versionsDialog = {
+    project: 'gse_agent',
+    show: false,
+    type: 'unified',
+    operate: 'reinstall_batch',
+    title: this.$t('选择 Agent 版本'),
+    versions: [] as string[],
+  };
+  @Emit('chooseVersion')
+  public versionConfirm(info: { version: string; }) {
+    this.chooseVersion = info.version;
+    return info.version;
+  }
+ 
   private get remark() {
     return getConfigRemark(`${this.prop}__description`, this.focusRow.os_type);
   }
@@ -179,6 +218,21 @@ export default class TableHeader extends Vue {
       bus.$emit('batch-btn-click', this);
     }
   }
+  public handleChooseClick() {
+    if (this.isActive) {
+      this.versionsDialog.show = false;
+    } else {
+      if (this.extraInfo.pkgType === 'gse_proxy') {
+        this.versionsDialog.project = 'gse_proxy';
+        this.versionsDialog.title = this.$t('选择Proxy版本');
+        this.versionsDialog.operate = 'Install Proxy';
+      }
+      this.versionsDialog.show = true;
+      this.versionsDialog.versions = this.chooseVersion ? [this.chooseVersion] : [];
+      this.isActive = true;
+      bus.$emit('batch-btn-click', this);
+    }
+  }
   @Emit('confirm')
   public handleBatchConfirm() {
     this.handleBatchCancel();
diff --git a/frontend/src/components/setup-table/upload.vue b/frontend/src/components/setup-table/upload.vue
index d84c0a221..9752139f8 100644
--- a/frontend/src/components/setup-table/upload.vue
+++ b/frontend/src/components/setup-table/upload.vue
@@ -47,6 +47,7 @@
 import { Vue, Component, Model, Prop, Emit, Ref, Watch } from 'vue-property-decorator';
 import { IFileInfo } from '@/types';
 import { OutgoingHttpHeaders } from 'http';
+import i18n from '@/setup';
 
 interface IObject {
   [key: string]: any
@@ -59,10 +60,11 @@ export default class Upload extends Vue {
 
   @Prop({ type: String, default: 'file_data' }) private readonly name!: string; // 上传至服务器的名称
   @Prop({ type: String, default: '' }) private readonly accept!: string; // mime类型
-  @Prop({ type: String, default: window.i18n.t('文件类型不符') }) private readonly acceptTips!: string; // 接受类型提示信息
+  @Prop({ type: String, default: i18n.t('版本包文件类型') }) public readonly acceptDesc!: string; // mime类型提示
+  @Prop({ type: String, default: i18n.t('文件类型不符') }) private readonly acceptTips!: string; // 类型错误提示信息
   @Prop({ type: String, default: '' }) private readonly action!: string; // URL
   @Prop({ type: Number, default: 500 }) private readonly maxSize!: number; // 最大文件大小,单位M
-  @Prop({ type: String, default: 'MB', validator(v) {
+  @Prop({ type: String, default: 'MB', validator(v: string) {
     return ['KB', 'MB'].includes(v);
   } }) private readonly unit!: string;
   @Prop({ type: [Array, Object], default: () => ([]) }) private readonly headers!: OutgoingHttpHeaders; // 请求头
@@ -77,6 +79,7 @@ export default class Upload extends Vue {
   @Prop({ type: Boolean, default: false }) private readonly parseText!: boolean; // 是否前端解析
   @Prop({ type: Boolean, default: false }) private readonly disableHoverCls!: boolean; // 禁用文件框悬浮样式
   @Prop({ type: Object, default: () => ({}) }) private readonly fileInfo!: IFileInfo; // 回显文件信息
+  @Prop({ type: Object, default: () => ({}) }) private readonly attached!: Dictionary; // 附带的参数
 
   @Ref('uploadel') private readonly uploadel: any;
 
@@ -243,13 +246,22 @@ export default class Upload extends Vue {
 
     const formData = new FormData();
     formData.append(option.filename, option.file, option.file.name);
+    try {
+      if (typeof this.attached === 'object') {
+        Object.keys(this.attached).forEach((key) => {
+          formData.append(key, this.attached[key]);
+        });
+      }
+    } catch (_) {}
     xhr.onerror = (e) => {
       option.onError(e);
     };
 
     const { action } = option;
     xhr.onload = () => {
-      if (xhr.status < 200 || xhr.status >= 300 || !JSON.parse(xhr.response).result) {
+      const { result, code } = JSON.parse(xhr.response);
+      // 3800002 包管理 - 包名重复
+      if (xhr.status < 200 || xhr.status >= 300 || (!result && code !== 3800002)) {
         return option.onError(this.onError(action, xhr));
       }
       option.onSuccess(this.onSuccess(xhr));
diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
index 2467d700a..570fd407b 100644
--- a/frontend/src/css/app.css
+++ b/frontend/src/css/app.css
@@ -318,11 +318,9 @@ body {
         .tag-yellow {
             background: #ffefd6;
         }
-        .flexible-tag-group {
-            .flexible-tag,
-            .num-tag {
-                background: #DCDEE5;
-            }
+        .flexible-tag,
+        .flexible-tag-group .num-tag {
+            background: #DCDEE5;
         }
         .pointer-row {
             cursor: pointer;
@@ -630,9 +628,19 @@ body {
             flex-direction: column;
             width: 280px;
             &-title {
+                padding: 8px 15px;
+                line-height: 24px;
                 font-size: 14px;
+                color: #313238;
+                &.pb0 {
+                    padding-bottom: 0;
+                }
+            }
+            &-sub-title {
+                line-height: 20px;
+                padding: 6px 15px;
+                font-size: 12px;
                 color: #63656E;
-                padding: 10px 15px;
             }
             &-content {
                 flex: 1;
diff --git a/frontend/src/css/install-table.css b/frontend/src/css/install-table.css
index a97355876..4aa75be17 100644
--- a/frontend/src/css/install-table.css
+++ b/frontend/src/css/install-table.css
@@ -150,6 +150,7 @@
   /* form-item-ghost */
   .ghost-wrapper {
     width: 100%;
+    z-index: 1;
     &.is-disabled {
       background-color: #fafbfd;
       cursor: not-allowed;
@@ -307,6 +308,10 @@
       z-index: 2;
     }
   }
+  .input-choose {
+    line-height: 42px;
+    white-space: nowrap;
+  }
   .upload-btn {
     height: 42px;
     border: 0;
diff --git a/frontend/src/css/variable.css b/frontend/src/css/variable.css
index 252597e68..e328d1e9b 100644
--- a/frontend/src/css/variable.css
+++ b/frontend/src/css/variable.css
@@ -16,6 +16,7 @@ $defaultFontColor: #63656e;
 $primaryFontColor: #3a84ff;
 $fontColor: #7b7d8a;
 $fontWeightColor: #737987;
+$fontTitleColor: #313238;
 
 /* 主体 icon 颜色 */
 $iconPrimaryColor: #3c96ff;
@@ -47,6 +48,7 @@ $bgWarning: #ff9c01;
 $bgSuccess: #2dcb56;
 $bgFailed: #ea3636;
 $titleColor: #313238;
+$bgOptHover: #e1ecff;
 
 /* 白色 */
 $whiteColor: #fff;
diff --git a/frontend/src/i18n/en.js b/frontend/src/i18n/en.js
index fb9326624..44562f7c0 100644
--- a/frontend/src/i18n/en.js
+++ b/frontend/src/i18n/en.js
@@ -13,15 +13,17 @@ export const dedicated = {
 export const nav = {
   // Agent
   nav_节点管理: 'Node Management',
-  nav_Agent状态: 'Agent Status',
+  nav_Agent: 'Agent',
+  nav_Agent状态: 'Agent Management',
+  nav_Agent包管理: 'Agent Package',
   nav_Excel导入安装: 'Excel Import',
   nav_重装Agent: 'Reinstall Agent',
   nav_重载Agent配置: 'Reload Agent Config',
   nav_卸载Agent: 'Uninstall Agent',
 
-  nav_插件管理: 'Plugin Management',
-  nav_插件状态: 'Plugin Status',
-  nav_插件部署: 'Plugin Deployment',
+  nav_插件管理: 'Plugin',
+  nav_插件状态: 'Plugin Management',
+  nav_插件部署: 'Deployment Strategy',
   nav_新建策略: 'New Strategy',
   nav_编辑策略: 'Edit Strategy',
   nav_已有策略: 'Existing Strategy',
@@ -152,15 +154,25 @@ export default {
   内网网卡IP: 'LAN IP',
   外网网卡IP: 'WAN IP',
   登录IP: 'Login IP',
+  Agent包版本: 'Agent package version',
+  Proxy包版本: 'Proxy package version',
+  选择Proxy版本: 'Select Proxy version',
+  '选择 Agent 版本': 'Select Agent version',
   数据IP: 'Data IP',
   数据IP提示: 'IP address for Agent data collection, which is bound to the LAN IP by default, it can be developed separately if any special needs ',
   确定: 'OK',
   批量编辑: 'Multi-Edit {title}',
+  批量编辑Agent: 'Based on the system range included in the bulk edit, the currently available versions support {0} simultaneously',
   安装Agent: 'Install agent',
   卸载: 'Uninstall',
   正在重装: 'Reinstalling',
   正在升级: 'Upgrading',
   复制: 'Copy',
+  已选IP: 'Selected {0} IP addresses',
+  升级IP: '{0} upgrades',
+  回退IP: '{0} rollbacks',
+  已是目标版本Ip: '{0} already the target version',
+  全部: 'All',
   复制IPv4: 'Copy IPv4',
   复制IPv6: 'Copy IPv6',
   复制ProxyIP: 'Copy Proxy IP',
@@ -286,6 +298,7 @@ export default {
   自动发现: 'Automatic discovery',
   管控区域详情: 'BK-Net details',
   升级: 'Upgrade',
+  升级回退: 'Upgrade/Rollback',
   升级Agent: 'Upgrade Agent',
   确定升级选择的主机: 'Are you sure to upgrade the selected hosts?',
   请确认是否批量重启: 'Please confirm whether to restart in batch',
@@ -296,6 +309,8 @@ export default {
   卸载lower: 'uninstall',
   升级lower: 'upgrade',
   移除lower: 'remove',
+  确认Agent目标版本: 'Confirm Agent Target Version',
+  Agent版本: 'Agent version',
   请确认是否操作: 'Please confirm whether to {type}?',
   请确认是否批量操作: 'Please confirm whether to {type} in batch?',
   单条确认操作提示: '{type} {ip} Agent{suffix}',
@@ -359,8 +374,14 @@ export default {
   批量高级设置: 'Batch advanced settings',
   BT节点探测: 'BT accelerate',
   BT节点探测提示: 'After BT accelerate is enable, the transmission efficiency of the Agent\'s file distribution through the file pipeline can be greatly improved, and at the same time, the execution speed of the agent installation task can be correspondingly improved.\n\nNote: The cross-VPC network environment may occupy the dedicated line bandwidth, it is recommended to turn off BT transmission in this scenario',
-  启用: 'Enable',
-  停用: 'Disable',
+  启用: 'enabled',
+  停用: 'disabled',
+  启用状态: 'Enabled',
+  停用状态: 'Disabled',
+  启用操作: 'Enable',
+  停用操作: 'Disable',
+  稳定版本不可删除: 'Stable version cannot be deleted',
+  稳定版本不可停用: 'Stable version cannot be disabled',
   无法查看完整Agent信息: 'There are unauthorized businesses in this "BK-Net", so the Agent information cannot be viewed completely.',
   临时文件目录: 'Temp file path',
   供proxy文件分发临时使用后台定期进行清理建议预留至少磁盘空间: 'It is used temporarily for the distribution of proxy files, and is cleaned up regularly in the background. It is recommended to reserve at least 1G disk space',
@@ -416,6 +437,7 @@ export default {
   动态: 'Dynamic',
   静态: 'Static',
   接入点互斥: 'The host is on a GSE{0} access point, and the {1} access point is disabled',
+  pkg的详细信息: 'Details of version {0}',
 
   // 安装通道
   安装通道: 'Install channel',
@@ -629,6 +651,7 @@ export default {
   重装PROXY: 'Reinstall Proxy',
   重装AGENT: 'Reinstall Agent',
   升级PROXY: 'Upgrade Proxy',
+  确认Proxy目标版本: 'Confirm Proxy Target Version',
   升级Agent: 'Upgrade Agent',
   已忽略IP无日志详情: 'Ignored IP no log details',
   已忽略信息提示: '{ip} and other {num} IPs have been automatically ignored by the system, and can be viewed by filtering in the execution status',
@@ -937,6 +960,8 @@ export default {
   操作策略成功: '{0} strategy successfully',
   不能低于当前版本: 'Cannot be lower than the current version',
   版本未处于正式状态: 'Version is not in official state',
+  已是目标版本: 'The current version is already up to date; no upgrade is necessary.',
+  当前版本: 'The current version is up to date; no upgrade needed.',
   部分目标机器已被部署策略管控无法进行操作如需操作请调整对应的部署策略: 'Some target machines have been controlled by deployment strategy and cannot be operated; if you need to operate, please adjust the corresponding deployment strategy',
   停用策略dialogTitle: 'Disable strategy: {0}',
   停用策略dialogContentOnly: 'Only disable the strategy, keep the plugin {0}',
@@ -1114,6 +1139,47 @@ export default {
   在目标主机通过: 'To {1} from the {0} on the target host:',
   操作方式: '{0} method',
 
+  // agent包管理
+  统一填充: 'Fill in uniformly',
+  包上传: 'Package upload',
+  '默认升级安装版本': 'Default Version',
+  '通过修改稳定版本标签来指定': 'Default upgrade/install version. Specify by modifying the "stable version" tag',
+  快捷筛选: 'Quick filter',
+  维度: 'Dimension',
+  '版本号、操作系统/架构、标签、上传用户、状态': 'Version, operating system/architecture, tags, upload user, status',
+  版本号: 'Version number',
+  '操作系统/架构': 'System/Arch',
+  上传用户: 'Upload user',
+  上传时间: 'Upload time',
+  已部署主机: 'Deployed hosts',
+  启用成功: 'Enable success',
+  停用成功: 'Disable success',
+  确认停用该Agent包: 'Confirm to disable this agent package?',
+  确认停用该Agent包Tip1: 'Disable target: {0}',
+  确认停用该Agent包Tip2: 'After disabling, agent installation, reinstallation, and upgrade cannot be selected',
+  确认删除该Agent包: 'Confirm to delete this agent package?',
+  确认删除该Agent包Tip1: 'Delete target: {0}',
+  确认删除该Agent包Tip2: 'After deletion, it cannot be recovered. Please operate with caution!',
+  '存在同名Agent包，是否覆盖上传？': 'An agent package with the same name exists. Do you want to overwrite it?',
+  '包覆盖包名：': 'Package name: {0}',
+  '包覆盖MD5：': 'MD5: {0}',
+  '继续上传，将会覆盖当前平台同名的 Agent 包': 'Continuing the upload will overwrite the agent package with the same name on the current platform.',
+  覆盖上传: 'Overwrite upload',
+  取消上传: 'Cancel upload',
+  '上传成功（存在同名 Agent 包，确认覆盖上传）': 'Upload successful (an agent package with the same name exists. Confirm to overwrite it)',
+  '存在同名 Agent 包': 'An agent package with the same name exists',
+  '支持 tgz、tar、gz 扩展名格式文件': 'Supports tgz, tar, gz format files',
+  结果预览: 'Result preview',
+  解析字段不可修改: 'The parsed field cannot be modified',
+  包名: 'Package name',
+  操作系统架构: 'Operating system architecture',
+  包类型: 'Package type',
+  标签信息: 'Tag information',
+  描述: 'Description',
+  解析错误: 'Parsing error',
+  '从包中解析的描述文本，不可修改': 'Description text parsed from the package, cannot be modified',
+  请先上传包文件: 'Please upload the package file first',
+
   // form-check
   正常输入内容校验: 'Chinese and English, numbers, hyphens and underscores with a length not exceeding {0}',
   字符串长度校验: 'The length cannot be greater than {0} Chinese or {1} English letters',
diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
index 6a1b0f2b0..8cb9d3675 100644
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -13,15 +13,17 @@ export const dedicated = {
 export const nav = {
   // Agent
   nav_节点管理: '节点管理',
-  nav_Agent状态: 'Agent状态',
+  nav_Agent: 'Agent',
+  nav_Agent状态: 'Agent 管理',
+  nav_Agent包管理: 'Agent 包',
   nav_Excel导入安装: 'Excel 导入安装',
   nav_重装Agent: '重装 Agent',
   nav_重载Agent配置: '重载 Agent 配置',
   nav_卸载Agent: '卸载 Agent',
 
-  nav_插件管理: '插件管理',
-  nav_插件状态: '插件状态',
-  nav_插件部署: '插件部署',
+  nav_插件管理: '插件',
+  nav_插件状态: '插件管理',
+  nav_插件部署: '部署策略',
   nav_新建策略: '新建策略',
   nav_编辑策略: '编辑策略',
   nav_已有策略: '已有策略',
@@ -152,15 +154,25 @@ export default {
   内网网卡IP: '内网网卡IP',
   外网网卡IP: '外网网卡IP',
   登录IP: '登录IP',
+  Agent包版本: 'Agent 包版本',
+  Proxy包版本: 'Proxy 包版本',
+  '选择 Agent 版本': '选择 Agent 版本',
+  选择Proxy版本: '选择Proxy版本',
   数据IP: '数据IP',
   数据IP提示: 'Agent采集数据的IP地址， 默认绑定到内网网卡所在的IP， 如有特殊需求可单独制定',
   确定: '确定',
   批量编辑: '批量编辑{title}',
+  批量编辑Agent: '根据批量编辑所包含的系统范围,当前可选的版本为同时支持{0}',
   安装Agent: '安装 Agent',
   卸载: '卸载',
   正在重装: '正在重装',
   正在升级: '正在升级',
   复制: '复制',
+  已选IP: '已选{0}个IP',
+  升级IP: '{0}个升级',
+  回退IP: '{0}个回退',
+  已是目标版本Ip: '{0}个已是目标版本',
+  全部: '全部',
   复制IPv4: '复制 IPv4',
   复制IPv6: '复制 IPv6',
   复制ProxyIP: '复制 Proxy IP',
@@ -234,6 +246,7 @@ export default {
   可选: '（可选）',
   正在运行: '正在运行',
   自动选择: '自动选择',
+  未分配: '未分配',
   服务状态: '服务状态',
   监听端口: '监听端口',
   TCP连接数: 'TCP 连接数',
@@ -286,6 +299,7 @@ export default {
   自动发现: '自动发现',
   管控区域详情: '管控区域详情',
   升级: '升级',
+  升级回退: '升级/回退',
   升级Agent: '升级 Agent',
   确定升级选择的主机: '确定升级选择的主机？',
   请确认是否批量重启: '请确认是否批量重启',
@@ -296,6 +310,8 @@ export default {
   卸载lower: '卸载',
   升级lower: '升级',
   移除lower: '移除',
+  确认Agent目标版本: '确认 Agent 目标版本',
+  Agent版本: 'Agent 版本',
   请确认是否操作: '请确认是否{type}？',
   请确认是否批量操作: '请确认是否批量{type}？',
   单条确认操作提示: '{type} {ip} 的Agent{suffix}',
@@ -361,6 +377,12 @@ export default {
   BT节点探测提示: '开启 BT 传输后可大大提升 Agent通过文件管道进行文件分发的传输效率， 同时相应提高agent安装任务的执行速度。\n\n注：跨 VPC 网络环境可能会占用专线带宽，建议此场景下关闭 BT 传输',
   启用: '启用',
   停用: '停用',
+  启用状态: '启用',
+  停用状态: '停用',
+  启用操作:'启用',
+  停用操作:'停用',
+  稳定版本不可删除: '稳定版本不可删除',
+  稳定版本不可停用: '稳定版本不可停用',
   无法查看完整Agent信息: '该「管控区域」存在无权限业务，故无法完整查看 Agent 信息。',
   临时文件目录: '临时文件目录',
   供proxy文件分发临时使用后台定期进行清理建议预留至少磁盘空间: '供 proxy 文件分发临时使用，后台定期进行清理。建议预留至少 1G 磁盘空间',
@@ -416,6 +438,7 @@ export default {
   动态: '动态',
   静态: '静态',
   接入点互斥: '主机处于 GSE{0}接入点，{1} 的接入点禁用',
+  pkg的详细信息: '{0} 的详细信息',
 
   // 安装通道
   安装通道: '安装通道',
@@ -462,6 +485,7 @@ export default {
   复制成功: '复制成功',
   没有需要复制的内容: '没有需要复制的内容',
   查看任务详情: '查看任务详情',
+  新建标签: '新建 ”{0}“ 标签',
 
   // 全局配置 - GSE-环境管理
   默认: '默认',
@@ -629,6 +653,7 @@ export default {
   重装PROXY: '重装 Proxy',
   重装AGENT: '重装 Agent',
   升级PROXY: '升级 Proxy',
+  确认Proxy目标版本: '确认Proxy目标版本',
   升级AGENT: '升级 Agent',
   已忽略IP无日志详情: '已忽略IP无日志详情',
   已忽略信息提示: '{ip} 等 {num} 个 IP 已被系统自动忽略，可在执行状态筛选查看',
@@ -937,6 +962,8 @@ export default {
   操作策略成功: '{0}策略成功！',
   不能低于当前版本: '不能低于当前版本',
   版本未处于正式状态: '版本未处于正式状态',
+  已是目标版本: '已是目标版本，无需升级',
+  当前版本: '当前版本，无需升级',
   部分目标机器已被部署策略管控无法进行操作如需操作请调整对应的部署策略: '部分目标机器已被部署略管控，无法进行操作；如需操作请调整对应的部署策略',
   停用策略dialogTitle: '停用策略：{0}',
   停用策略dialogContentOnly: '仅停用策略，保留插件 {0}',
@@ -1114,6 +1141,47 @@ export default {
   在目标主机通过: '在目标主机通过 {0} {1}：',
   操作方式: '{0}方式',
 
+  // agent包管理
+  统一填充: '统一填充',
+  包上传: '包上传',
+  '默认升级安装版本': '默认版本',
+  '通过修改稳定版本标签来指定': '默认的升级/安装版本，通过修改“稳定版本”标签来指定',
+  快捷筛选: '快捷筛选',
+  维度: '维度',
+  '版本号、操作系统/架构、标签、上传用户、状态': '版本号、操作系统/架构、标签、上传用户、状态',
+  版本号: '版本号',
+  '操作系统/架构': '操作系统/架构',
+  上传用户: '上传用户',
+  上传时间: '上传时间',
+  已部署主机: '已部署主机',
+  启用成功: '启用成功',
+  停用成功: '停用成功',
+  确认停用该Agent包: '确认停用该 Agent 包？',
+  确认停用该Agent包Tip1: '停用目标：{0}',
+  确认停用该Agent包Tip2: '停用后，Agent 安装、重装、升级时，不可选择',
+  确认删除该Agent包: '确认删除该 Agent 包？',
+  确认删除该Agent包Tip1: '删除目标：{0}',
+  确认删除该Agent包Tip2: '删除后不可恢复，请谨慎操作！',
+  '存在同名Agent包，是否覆盖上传？': '存在同名Agent包，是否覆盖上传？',
+  '包覆盖包名：': '包名：{0}',
+  '包覆盖MD5：': 'MD5：{0}',
+  '继续上传，将会覆盖当前平台同名的 Agent 包': '继续上传，将会覆盖当前平台同名的 Agent 包',
+  覆盖上传: '覆盖上传',
+  取消上传: '取消上传',
+  '上传成功（存在同名 Agent 包，确认覆盖上传）': '上传成功（存在同名 Agent 包，确认覆盖上传）',
+  '存在同名 Agent 包': '存在同名 Agent 包',
+  '支持 tgz、tar、gz 扩展名格式文件': '支持 tgz、tar、gz 扩展名格式文件',
+  结果预览: '结果预览',
+  解析字段不可修改: '解析字段不可修改',
+  包名: '包名',
+  操作系统架构: '操作系统架构',
+  包类型: '包类型',
+  标签信息: '标签信息',
+  描述: '描述',
+  解析错误: '解析错误',
+  '从包中解析的描述文本，不可修改': '从包中解析的描述文本，不可修改',
+  请先上传包文件: '请先上传包文件',
+
   // form-check
   正常输入内容校验: '长度不超过{0}的中英文、数字、连字符和下划线',
   字符串长度校验: '长度不能大于{0}个中文或{1}个英文字母',
diff --git a/frontend/src/router/modules/agent-manager.ts b/frontend/src/router/modules/agent-manager.ts
index c054cebfb..cea7a0ca6 100644
--- a/frontend/src/router/modules/agent-manager.ts
+++ b/frontend/src/router/modules/agent-manager.ts
@@ -3,6 +3,7 @@ import { AGENT_VIEW, AGENT_OPERATE } from '../action-map';
 const AgentStatus = () => import(/* webpackChunkName: 'AgentStatus' */'@/views/agent/agent-list.vue');
 const AgentSetup = () => import(/* webpackChunkName: 'AgentSetup' */'@/views/agent/agent-setup/agent-setup.vue');
 const AgentImport = () => import(/* webpackChunkName: 'AgentImport' */'@/views/agent/agent-setup/agent-import.vue');
+const AgentPackage = () => import(/* webpackChunkName: 'AgentPackage' */'@/views/agent/package/index.vue');
 
 export default [
   {
@@ -70,4 +71,18 @@ export default [
       },
     },
   },
+  {
+    path: '/agent-manager/package',
+    name: 'agentPackage',
+    component: AgentPackage,
+    meta: {
+      navId: 'nodeManage',
+      title: 'nav_Agent包管理',
+      customContent: true,
+      authority: {
+        page: AGENT_VIEW,
+        operate: AGENT_OPERATE,
+      },
+    },
+  },
 ] as RouteConfig[];
diff --git a/frontend/src/router/navigation-config.ts b/frontend/src/router/navigation-config.ts
index cb75bbbe6..2731b6d63 100644
--- a/frontend/src/router/navigation-config.ts
+++ b/frontend/src/router/navigation-config.ts
@@ -7,7 +7,7 @@ export const navConfig: INavConfig[] = [
     defaultActive: 'agentStatus',
     children: [
       {
-        name: 'nav_Agent状态',
+        name: 'nav_Agent',
         children: [
           {
             title: 'nav_Agent状态',
@@ -15,6 +15,12 @@ export const navConfig: INavConfig[] = [
             path: 'agent-manager/status',
             name: 'agentStatus',
           },
+          {
+            title: 'nav_Agent包管理',
+            icon: 'nc-package-2',
+            path: '/agent-manager/package',
+            name: 'agentPackage',
+          },
         ],
       },
       {
diff --git a/frontend/src/setup/index.ts b/frontend/src/setup/index.ts
index ab3b16a88..78b5089c2 100644
--- a/frontend/src/setup/index.ts
+++ b/frontend/src/setup/index.ts
@@ -7,7 +7,7 @@ import './filters';
 import NmSafety from './safety';
 import { textTool } from './text-tool';
 import { setIpProp, initIpProp } from './ipv6';
-import './mixins';
+// import './mixins';
 
 Vue.prototype.$filters = function (filterName: string, value: any) {
   return this._f(filterName)(value);
@@ -16,5 +16,11 @@ Vue.prototype.$safety = new NmSafety();
 Vue.prototype.$textTool = textTool;
 Vue.prototype.$setIpProp = setIpProp;
 Vue.prototype.$initIpProp = initIpProp;
+Vue.prototype.emptySearchClear = function () {
+  this.$emit('empty-clear');
+};
+Vue.prototype.emptyRefresh = function () {
+  this.$emit('empty-refresh');
+};
 
 export default i18n;
diff --git a/frontend/src/store/modules/agent.ts b/frontend/src/store/modules/agent.ts
index 54b6fd388..2d7608acc 100644
--- a/frontend/src/store/modules/agent.ts
+++ b/frontend/src/store/modules/agent.ts
@@ -6,11 +6,17 @@ import { listAp } from '@/api/modules/ap';
 import { listCloud } from '@/api/modules/cloud';
 import { getFilterCondition } from '@/api/modules/meta';
 import { fetchPwd } from '@/api/modules/tjj';
+import {
+  createAgentRegisterTask, createAgentTags, versionCompare, deletePackage,
+  getDeployedHostsCount, getTags, getVersion, listPackageNew, parsePackage,
+  queryAgentRegisterTask, quickSearchCondition, updatePackage,
+} from '@/api/modules/pkg_manage';
 import { sort } from '@/common/util';
-import { ISearchChild, ISearchItem } from '@/types';
+import { Mixin, ISearchChild, ISearchItem } from '@/types';
 import { IAgentSearch, IAgentSearchIp, IAgentJob, IAgentHost } from '@/types/agent/agent-type';
 import { IAp } from '@/types/config/config';
 import { IChannel, ICloudSource } from '@/types/cloud/cloud';
+import { IPkgDelpyNumber, IPkgDimension, IPkgInfo, IPkgTagList, IPkgParseInfo, PkgType, IPkgVersion, IPkgParams } from '@/types/agent/pkg-manage';
 
 export const SET_AP_LIST = 'setApList';
 export const SET_CLOUD_LIST = 'setCloudList';
@@ -64,7 +70,7 @@ export default class AgentStore extends VuexModule {
         ...extraOther,
         ...item,
         status: item.status ? item.status.toLowerCase() : 'unknown',
-        version: item.version ? item.version : '--',
+        version: item.version ? item.version : '',
         job_result: item.job_result ? item.job_result : {} as any,
         topology: item.topology && item.topology.length ? item.topology : [],
         bt_speed_limit: btSpeedLimit || '',
@@ -237,4 +243,92 @@ export default class AgentStore extends VuexModule {
     }
     this[UPDATE_AP_URL](apUrl);
   }
+
+  // agent包管理
+  @Action
+  public apiPkgList(param: IPkgParams): Promise<{ total: number; list: IPkgInfo[] }> {
+    return listPackageNew(`?page=${param.page}&pagesize=${param.pagesize}`,param).catch(() => ({}));
+  }
+  @Action
+  public apiPkgFilterCondtion(param: { category: 'agent_pkg_manage'; project?: PkgType }): Promise<ISearchItem[]> {
+    return getFilterCondition(param).catch(() => []);
+  }
+  @Action
+  public apiPkgQuickSearch(param): Promise<IPkgDimension[]> {
+    return quickSearchCondition(param).catch(() => []);
+  }
+  @Action
+  public apiPkgUpdateStatus({ id, is_ready, tags }: { id: string|number; is_ready: boolean; tags?: any[] }): Promise<IPkgInfo> {
+    return updatePackage(id, { is_ready, tags }).catch(() => {});
+  }
+  @Action
+  public apiPkgDelete(id: number): Promise<boolean> {
+    return deletePackage(`${id}`).catch(() => false);
+  }
+  @Action
+  public async apiPkgParse(param: { file_name: string }): Promise<{
+    packages: IPkgParseInfo[];
+    description: string;
+  } | string> {
+    try {
+      const result = await parsePackage(param);
+      return result;
+    } catch (error: any) {
+      // 假设 error 对象包含 message 属性
+      const errorMessage = error.message || 'An error occurred';
+      return errorMessage;
+    }
+  }
+  @Action
+  public apiPkgRegister(param: {
+    project: PkgType;
+    file_name: string;
+    tag_descriptions: string[];
+  }): Promise<{ task_id: string }> {
+    return createAgentRegisterTask(param).catch(() => false);
+  }
+  /**
+   * 查询注册任务状态
+   */
+  @Action
+  public apiPkgRegisterQuery(param: { task_id: string, version?: string}): Promise<{ status: 'PENDING'|'SUCCESS'|'FAILURE'; task_id: string }> {
+    return queryAgentRegisterTask(param).catch(() => ({ status: 'FAILURE' }));
+  }
+  @Action
+  public apiPkgHostsCount(param: {
+    project: PkgType,
+    items: IPkgDelpyNumber[]
+  }): Promise<Mixin<IPkgDelpyNumber, { count: number }>[]> {
+    return getDeployedHostsCount(param).catch(() => []);
+  }
+  @Action
+  public apiPkgGetTags(param: { project: PkgType; tag_description?: string; }): Promise<IPkgTagList[]> {
+    return getTags(param).catch(() => []);
+  }
+  @Action
+  public apiPkgCreateTags(param: {
+    project: PkgType;
+    tag_descriptions: string[];
+  }): Promise<IPkgTag[] | false> {
+    return createAgentTags(param).catch(() => false);
+  }
+  
+  @Action
+  public apiGetPkgVersion(param: { project: PkgType; os: string; cpu_arch: string; versions?: string[] }): Promise<{
+    default_version: string;
+    machine_latest_version: string;
+    package_latest_version: string;
+    is_visible: Boolean;
+    pkg_info: IPkgVersion[];
+  }> {
+    return getVersion(param).catch(() => ({ default_version: '', machine_latest_version: '', pkg_info: [], is_visible: false, package_latest_version: '' }));
+  }
+
+  @Action
+  public apiVersionCompare(param: {
+    current_version: string;
+    version_to_compares: string[];
+  }): Promise<{upgrade_count: 0,downgrade_count: 0, no_change_count: 0}> {
+    return versionCompare(param).catch(() => false);
+  }
 }
diff --git a/frontend/src/store/modules/cloud.ts b/frontend/src/store/modules/cloud.ts
index fda128c89..148cf05c6 100644
--- a/frontend/src/store/modules/cloud.ts
+++ b/frontend/src/store/modules/cloud.ts
@@ -181,7 +181,7 @@ export default class CloudStore extends VuexModule {
    * @param {*} params
    */
   @Action
-  public async operateJob(params: { 'job_type': string, 'bk_host_id': number[] }): Promise<{ 'job_id'?: number }> {
+  public async operateJob(params: { 'job_type': string, 'bk_host_id': number[], agent_setup_info?: {} }): Promise<{ 'job_id'?: number }> {
     const data = await operateJob(params).catch(() => false);
     return data;
   }
diff --git a/frontend/src/store/modules/main.ts b/frontend/src/store/modules/main.ts
index 3f7848fd7..700a91c60 100644
--- a/frontend/src/store/modules/main.ts
+++ b/frontend/src/store/modules/main.ts
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import http from '@/api';
 import navList from '@/router/navigation-config';
 import { retrieveBiz, fetchTopo } from '@/api/modules/cmdb';
-import { retrieveGlobalSettings, getFilterCondition } from '@/api/modules/meta';
+import { retrieveGlobalSettings, getFilterCondition, getAgentPackageUI } from '@/api/modules/meta';
 import { fetchPublicKeys } from '@/api/modules/rsa';
 import {
   fetchPermission,
@@ -72,6 +72,16 @@ export default class Main extends VuexModule {
   public noticeShow = false;
   public AUTO_SELECT_INSTALL_CHANNEL = -1;
 
+  // agent_package 显示开关
+  public ENABLE_AGENT_PACKAGE_UI = false;
+  /**
+   * 更新状态
+   *
+   */
+  @Mutation
+  public setAgentPackageUI(switchStatus: boolean) {
+    this.ENABLE_AGENT_PACKAGE_UI = switchStatus;
+  }
   /**
    * 设置全局可视区域的 loading 是否显示
    *
@@ -439,4 +449,12 @@ export default class Main extends VuexModule {
     const dataValue = data.AUTO_SELECT_INSTALL_CHANNEL_ONLY_DIRECT_AREA === undefined ? -1 : Number(data.AUTO_SELECT_INSTALL_CHANNEL_ONLY_DIRECT_AREA);
     this.setAutoJudge(dataValue);
   }
+  /**
+   * agent_package 相关的显示开关配置
+   */
+  @Action
+  public async getAgentPackageUI() {
+    const { ENABLE_AGENT_PACKAGE_UI = false } = await retrieveGlobalSettings({ key: 'ENABLE_AGENT_PACKAGE_UI' }).catch(() => ({}));
+    this.setAgentPackageUI(ENABLE_AGENT_PACKAGE_UI);
+  }
 }
diff --git a/frontend/src/types/agent/agent-type.ts b/frontend/src/types/agent/agent-type.ts
index 5fe6b56c5..aca92ab00 100644
--- a/frontend/src/types/agent/agent-type.ts
+++ b/frontend/src/types/agent/agent-type.ts
@@ -24,6 +24,7 @@ export interface IAgentHost {
   bk_biz_id: number
   bk_biz_name: string
   bk_cloud_id: number
+  is_unassigned?: boolean
   bk_cloud_name: string
   bk_host_name: string
   is_manual: boolean
@@ -85,6 +86,7 @@ export interface IAgentJob {
   is_proxy?: boolean
   hosts?: IAgentHost[]
   exclude_hosts?: IAgentHost[]
+  bk_host_id?: number[]
 }
 
 export interface IOperateItem {
diff --git a/frontend/src/types/agent/pkg-manage.ts b/frontend/src/types/agent/pkg-manage.ts
new file mode 100644
index 000000000..cc07057c8
--- /dev/null
+++ b/frontend/src/types/agent/pkg-manage.ts
@@ -0,0 +1,102 @@
+import { TranslateResult } from 'vue-i18n';
+
+// import { TranslateResult } from 'vue-i18n'
+export type PkgType = 'gse_agent' | 'gse_proxy';
+export type PkgTagType = 'builtin' | 'custom';
+
+// tag相关的参数 都是使用原本的name字段, 原本的description用于展示
+export interface IPkgTag {
+  // 标签id名
+  tag_name?: string,
+  id?: number;
+  name:  string;
+  description: string;
+  // 附加的
+  className?: string
+}
+export interface IPkgTagOpt extends IPkgTag {
+  id: string;
+  description?: string;
+};
+
+export interface IPkgTagList {
+  name: PkgTagType;
+  description: string;
+  children: IPkgTag[];
+}
+
+export interface IPkgParams {
+  project: PkgType;
+  page: number;
+  pagesize: number;
+  tags?: string; // ,分隔
+  os?: string; // 操作系统
+  cpu_arch?: string; // 架构
+  created_by?: string; // ,分隔
+  is_ready?: string; // true,false
+  version?: string; // ,分隔
+  created_time_before?: string; // 2022-10-01T00:00:00
+  created_time_after?: string;
+  ordering?: string;
+  condition?: any[];
+}
+
+export interface IPkgQuickOpt {
+  id: string;
+  name: string | TranslateResult;
+  count: number;
+  icon?: string;
+  tips?: boolean;
+  isAll?: boolean;
+}
+
+export interface IPkgDimension {
+  id: string;
+  name: string;
+  children: IPkgQuickOpt[]
+}
+
+
+export interface IPkgInfo {
+  id: number;
+  pkg_name: string; // 包名称
+  version: string; // 版本号
+  os: string; // 操作系统
+  cpu_arch: string; // 架构
+  created_by: string; // 上传用户
+  created_time: string; // 上传时间
+  is_ready: boolean; // 状态
+  tags: IPkgTagList[];
+}
+
+export interface IPkgRow extends IPkgInfo {
+  hostNumber: string | number;
+  formatTags: IPkgTag[];
+}
+
+export interface IPkgDelpyNumber {
+  count?: number;
+  cpu_arch: string;
+  os_type: string;
+  version: string;
+}
+
+export interface IPkgParseInfo {
+  project: PkgType;
+  os: string;
+  cpu_arch: string;
+  pkg_name: string;
+  version: string;
+  config_templates: any[];
+}
+
+export interface IPkgVersion {
+  project: PkgType;
+  version: string;
+  packages: {
+    pkg_name: string;
+    tags: IPkgTag[];
+  }[];
+  tags: IPkgTag[];
+  description: string;
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 1ab95f957..cf44c253a 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -2,6 +2,8 @@ import RequestQueue from '@/api/request-queue';
 import CachedPromise from '@/api/cached-promise';
 import { CancelToken, Canceler } from 'axios';
 
+export type Mixin<T, X> = T & X;
+
 export type IKeysMatch<T, V> = {[K in keyof T]-?: T[K] extends V ? K : never}[keyof T]; // 根据value类型找key
 
 export type IAgentStatus = 'running' | 'terminated' | 'not_installed'; // 正常 异常 未安装
@@ -90,9 +92,14 @@ export interface INavConfig {
   currentActive?: string // 当前二级导航选中项
   defaultActive?: string // 当前二级导航初始化选中项
   disabled?: boolean // 是否禁用一级导航
-  children?: ISubNavConfig[] // 二级导航配置
+  children?: ISideMenuConfig[] // 二级导航配置
 }
 
+// 侧边栏菜单配置
+export interface ISideMenuConfig {
+  name: string // 侧边栏菜单分类名称
+  children?: ISubNavConfig[] // 子菜单配置
+}
 export interface ISubNavConfig {
   title: string // 二级导航标题
   icon: string // 二级导航icon
@@ -151,7 +158,7 @@ export interface IIsp {
 export interface ISearchChild {
   id: string
   name: string
-  checked: boolean
+  checked?: boolean
 }
 
 // searchselect item
@@ -227,6 +234,7 @@ export interface ISetupValidator {
 // 集合了agent 安装&导入、proxy安装
 export interface ISetupRow {
   id: number
+  is_unassigned?: boolean
   is_manual?: boolean
   inner_ip?: string
   outer_ip?: string
@@ -256,6 +264,8 @@ export interface ISetupRow {
   install_channel_id: string | number | null
   bk_addressing: 'static' | 'dynamic'
   gse_version?: 'V1'|'V2' // 前端添加 用于操作主机仅能选择对应版本的接入点
+  bk_host_id?: number;
+  version?: string;
 }
 
 export interface ISetupParent {
@@ -306,6 +316,7 @@ export interface ISetupHead {
   getDefaultValue?: Function
   handleValueChange?: Function
   handleBlur?: Function
+  extraInfo?: any
 }
 
 // 文件导入配置
diff --git a/frontend/src/views/agent/agent-list.vue b/frontend/src/views/agent/agent-list.vue
index f8a159717..92c3b076f 100644
--- a/frontend/src/views/agent/agent-list.vue
+++ b/frontend/src/views/agent/agent-list.vue
@@ -351,6 +351,9 @@
           :min-width="columnMinWidth['agent_version']"
           :render-header="renderFilterHeader"
           v-if="filter['agent_version'].mockChecked">
+          <template #default="{ row }">
+            {{ row.version | filterEmpty }}
+          </template>
         </NmColumn>
         <NmColumn
           key="is_manual"
@@ -594,6 +597,16 @@
         @limit-change="handlePageLimitChange">
       </bk-pagination>
     </section>
+    <!-- agent包版本 -->
+    <ChoosePkgDialog
+      v-model="versionsDialog.show"
+      :type="versionsDialog.type"
+      :title="versionsDialog.title"
+      :versions="versionsDialog.versions"
+      :os-type="versionsDialog.os_type"
+      :cpu-arch="versionsDialog.cpu_arch"
+      :operate="versionsDialog.operate"
+      @confirm="updateAgentVersion" />
     <bk-footer></bk-footer>
   </section>
 </template>
@@ -618,12 +631,16 @@ import { debounce, getFilterChildBySelected, searchSelectPaste } from '@/common/
 import { bus } from '@/common/bus';
 import { STORAGE_KEY_COL } from '@/config/storage-key';
 import { getDefaultConfig, DHCP_FILTER_KEYS } from '@/config/config';
+import ChoosePkgDialog from './components/choose-pkg-dialog.vue';
+
+type VerionType = 'unified' | 'by_system_arch';
 
 @Component({
   name: 'agent-list',
   components: {
     BkFooter,
     CopyDropdown,
+    ChoosePkgDialog,
   },
 })
 export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, authorityMixin())<IAgent> {
@@ -652,6 +669,15 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth
       limitList: [50, 100, 200],
     },
   };
+  public versionsDialog = {
+    show: false,
+    type: 'unified',
+    title: '',
+    versions: [] as string[],
+    os_type: '',
+    cpu_arch: '',
+    operate: 'UPGRADE_AGENT',
+  };
   private sortData: ISortData = {
     head: '',
     sort_type: '',
@@ -837,15 +863,16 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth
   };
   // 批量操作
   private operate: IOperateItem[] = [
-    {
-      id: 'reinstall',
-      name: window.i18n.t('安装重装'),
-      disabled: false,
-      show: false,
-    },
+    // 勾选数据后点击安装Agent也是进入安装重装，此处重复
+    // {
+    //   id: 'reinstall',
+    //   name: window.i18n.t('安装重装'),
+    //   disabled: false,
+    //   show: false,
+    // },
     {
       id: 'upgrade',
-      name: window.i18n.t('升级'),
+      name: window.i18n.t('升级回退'),
       disabled: false,
       show: true,
     },
@@ -934,6 +961,35 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth
       .sort((a, b) => b - a);
     return ipv6SortRows.length ? Math.ceil(ipv6SortRows[0] * 6.9) : 90;
   }
+
+  // 升级Agent版本
+  public async updateAgentVersion(info: { version: string }) {
+    const data = this.isSelectedAllPages ? this.markDeleteArr : this.selection;
+    this.loading = true;
+    const params = this.getOperateHostCondition(data, 'UPGRADE_AGENT') as IAgentJob;
+    const versionList: { bk_host_id: number; version: string; }[] = [];
+    data.forEach(item => {
+      if (item.version !== info.version) {
+        versionList.push({
+          bk_host_id: item.bk_host_id as number,
+          version: info.version as string,
+        });
+      }
+    });
+    params.bk_host_id = versionList.map(item => item.bk_host_id);
+    Object.assign(params, {
+      agent_setup_info: {
+        choice_version_type: 'by_host',
+        version_map_list: versionList,
+      }
+    });
+    const result = await AgentStore.operateJob(params);
+    this.loading = false;
+    if (result.job_id) {
+      this.$router.push({ name: 'taskDetail', params: { taskId: result.job_id, routerBackName: 'taskList' } });
+    }
+  }
+
   // 可操作的数据
   private get datasheets() {
     return this.table.data.filter(item => item.job_result.status !== 'RUNNING' && item.operate_permission);
@@ -1112,8 +1168,9 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth
   private initRouterQuery() {
     // this.search.biz = this.bk_biz_id.length ? [...this.bk_biz_id] : this.selectedBiz;
     const searchParams: ISearchItem[] = [];
-    const { cloud } = this.$route.params;
+    const { cloud, os_type, version } = this.$route.params;
     this.getFilterCondition().then((data) => {
+      this.filterData = data;
       if (cloud) {
         searchParams.push({
           name: this.filter.bk_cloud_id.name,
@@ -1147,6 +1204,26 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth
           });
         }
       }
+      if (os_type) {
+        const child = data.find(item => item.id === 'os_type');
+        if (child) {
+          searchParams.push({
+            id: child.id,
+            name: child.name,
+            values: [{ checked: true, id: os_type.toUpperCase(), name: os_type }],
+          });
+        }
+      }
+      if (version) {
+        const child = data.find(item => item.id === 'version');
+        if (child) {
+          searchParams.push({
+            id: child.id,
+            name: child.name,
+            values: [{ checked: true, id: version, name: version }],
+          });
+        }
+      }
       if (searchParams.length) {
         this.searchSelectValue.push(...searchParams);
         this.searchInputKey += 1;
@@ -1761,11 +1838,12 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth
       },
     });
   }
+ 
   /**
    * 重启Host
    * @param {Array} data
    */
-  private handleOperatetHost(data: IAgentHost[], batch: boolean, operateType: string) {
+  private async handleOperatetHost(data: IAgentHost[], batch: boolean, operateType: string) {
     const titleObj = {
       firstIp: batch ? this.selection[0].inner_ip : data[0].inner_ip,
       num: batch ? this.selectionCount : data.length,
@@ -1793,6 +1871,16 @@ export default class AgentList extends Mixins(pollMixin, TableHeaderMixins, auth
         type = window.i18n.t('移除lower');
         break;
     }
+    
+    if (operateType === 'UPGRADE_AGENT') {
+      const versions:string[] = data.filter(item => !!item.version).map(item => item.version) || [];
+      this.versionsDialog.show = true;
+      this.versionsDialog.versions = versions;
+      this.versionsDialog.title = `${this.$t('确认Agent目标版本')}`;
+      this.versionsDialog.type = 'unified';
+      this.versionsDialog.operate = 'UPGRADE_AGENT';
+      return;
+    }
     this.$bkInfo({
       title: batch
         ? this.$t('请确认是否批量操作', { type })
diff --git a/frontend/src/views/agent/agent-setup/agent-import.vue b/frontend/src/views/agent/agent-setup/agent-import.vue
index a9432ccb3..2a70314a7 100644
--- a/frontend/src/views/agent/agent-setup/agent-import.vue
+++ b/frontend/src/views/agent/agent-setup/agent-import.vue
@@ -34,6 +34,7 @@
         <bk-form-item class="mt0 form-item-vertical">
           <InstallTable
             ref="setupTable"
+            :type="type"
             :local-mark="`agent${isManual ? '_manual' : '' }_${type}`"
             :setup-info="setupInfo"
             :is-manual="isManual"
@@ -43,7 +44,9 @@
             :virtual-scroll="true"
             :extra-params="extraParams"
             auto-sort
-            @delete="handleItemDelete">
+            @delete="handleItemDelete"
+            @choose="handleChoose"
+            @change="handleValueChange">
             <template #empty>
               <parser-excel v-model="importDialog" @uploading="handleUploading"></parser-excel>
             </template>
@@ -89,6 +92,16 @@
     </section>
     <!--过滤ip信息-->
     <FilterDialog v-model="showFilterDialog" :list="filterList" :title="$t('忽略详情')"></FilterDialog>
+    <!-- agent包版本 -->
+    <ChoosePkgDialog
+      v-model="versionsDialog.show"
+      :type="versionsDialog.type"
+      :title="versionsDialog.title"
+      :versions="versionsDialog.versions"
+      :os-type="versionsDialog.os_type"
+      :cpu-arch="versionsDialog.cpu_arch"
+      @confirm="versionConfirm"
+      @cancel="versionCancel" />
   </section>
 </template>
 <script lang="ts">
@@ -103,6 +116,7 @@ import mixin from '@/components/common/filter-ip-mixin';
 import FilterDialog from '@/components/common/filter-dialog.vue';
 import ParserExcel from '../components/parser-excel.vue';
 // import getTipsTemplate from '../config/tips-template'
+import ChoosePkgDialog from '../components/choose-pkg-dialog.vue';
 import { tableConfig, parentHead } from '../config/importTableConfig';
 import { editConfig } from '../config/editTableConfig';
 import { addListener, removeListener } from 'resize-detector';
@@ -121,6 +135,7 @@ import { ISetupHead, ISetupRow, ISetupParent } from '@/types';
     FilterDialog,
     Tips,
     FilterIpTips,
+    ChoosePkgDialog,
   },
 })
 
@@ -170,12 +185,26 @@ export default class AgentImport extends Mixins(mixin) {
   private height = 0;
   // 安装信息加载状态
   private loading = false;
+  // 默认版本
+  private defaultVersion = '';
+  // 版本列表
+  private agentVersionList = [] as string[];
   // 编辑head
   private editTableHead: { editConfig: ISetupHead[], editManualConfig: ISetupHead[]  } = {
     editConfig: [],
     editManualConfig: [],
   };
   private isInstallType = ['INSTALL_AGENT', 'REINSTALL_AGENT'].includes(this.type);
+  public versionsDialog = {
+    show: false,
+    type: 'by_system_arch',
+    title: this.$t('选择 Agent 版本'),
+    versions: [] as string[],
+    os_type: '',
+    cpu_arch: '',
+    row: null as any,
+    instance: null as any,
+  };
 
   // 导入按钮禁用状态
   private get disabledImport() {
@@ -215,11 +244,15 @@ export default class AgentImport extends Mixins(mixin) {
   }
   // 是否是编辑态
   private get isEdit() {
-    return !!(this.tableData && this.tableData.length) || this.isSelectedAllPages;
+    return !!(this.tableData?.length) || this.isSelectedAllPages;
   }
   private get isNotAutoSelect() {
     return AgentStore.apList.length === 1;
   }
+  // 判断当前接入点是v2版本
+  private isApV2(ap_id: number = -1): Boolean {
+    return AgentStore.apList.find(data => data.id === ap_id)?.gse_version === 'V2';
+  }
   // 最小安装信息数目
   private get minItems() {
     if (this.isEdit) return 1;
@@ -341,6 +374,10 @@ export default class AgentImport extends Mixins(mixin) {
         if (!item.install_channel_id) {
           item.install_channel_id = 'default';
         }
+        // 未分配管控区域,bk_cloud_id改为-1
+        if (item.is_unassigned) {
+          item.bk_cloud_id = -1;
+        }
         const prove: { [key: string]: string } = {};
         const copyRow = Object.assign({}, item, item.identity_info, apDefault, prove);
         // 不同版本的GSE不能混用对应版本的接入点
@@ -353,6 +390,10 @@ export default class AgentImport extends Mixins(mixin) {
     } else {
       defaultAp = { ap_id: apDefault };
       const formatData = this.tableData.map((item) => {
+        // 未分配管控区域,bk_cloud_id改为-1
+        if (item.is_unassigned) {
+          item.bk_cloud_id = -1;
+        }
         const copyRow = { ...item };
         if (this.isNotAutoSelect && item.ap_id === -1) {
           Object.assign(copyRow, defaultAp);
@@ -375,6 +416,23 @@ export default class AgentImport extends Mixins(mixin) {
       }
     });
     const filterData = data.filter(item => item.bk_cloud_id === 0);
+    // agent开关打开时，显示agent版本，处理相关逻辑
+    if (this.AgentPkgShow) {
+      // 获取agent默认版本
+      await this.getDefaultVersion();
+      // version无值时候，接入点v2则默认为稳定版本,非v2则默认为stable,表头对象中agent版本的getReadonly方法会对version为stable的返回true从而设置不可编辑状态
+      data.map((item) => {
+        if (!this.isApV2(item.ap_id)) {
+          item.version = 'stable';
+        } else {
+          // 无agent版本信息或者agent版本是被禁用的，则设置为默认版本（稳定版本）
+          if (!item.version || !this.agentVersionList.includes(item.version)) {
+            item.version = this.defaultVersion;
+          }
+        }
+        return item;
+      });
+    }
     // 将原始的数据备份；切换安装方式时，接入点的数据变更后的回退操作时需要用到
     this.tableDataBackup = data;
     this.setupInfo.data = deepClone(data);
@@ -385,6 +443,39 @@ export default class AgentImport extends Mixins(mixin) {
     this.setupTable.handleInit();
     this.setupTable.handleScroll();
   }
+  /**
+   * 获取agent默认版本数据
+   * @param {ISetupRow[]} data - 设置行数据
+   * @returns {Promise<ISetupRow[]>} - 包含默认版本的数据
+   */
+  private async getDefaultVersion() {
+    const { default_version, pkg_info } = await AgentStore.apiGetPkgVersion({
+      project: 'gse_agent',
+      os: '',
+      cpu_arch: ''
+    });
+    this.defaultVersion = default_version;
+    this.agentVersionList = pkg_info.map(item => item.version);
+  };
+  // agent包管理开关是否打开
+  private get AgentPkgShow(): Boolean {
+    return MainStore.ENABLE_AGENT_PACKAGE_UI;
+  }
+  /**
+    * 修改接入点数据时候要调整agent版本
+    * @param data - {row:ISetupRow,config: ISetupHead}
+    * @param config - row
+  */
+  private handleValueChange(data: any, config: any) {
+    // 如果是接入点的改动，则相应调整agent版本
+    if (data.config.prop === 'ap_id') {
+      this.isApV2(config.ap_id)
+        ? (config.version === 'stable' && (data.row.version = this.defaultVersion)) // 非v2变v2,把version从stable改为默认版本
+        : (config.version !== 'stable' && (data.row.version = 'stable')); // v2变非v2,把version改为stable
+      // version改为stable时，agent编辑态表格变为只读模式，所以从editData（可编辑列表数据）过滤掉当前行数据
+      data.row.version === 'stable' && (this.setupTable.editData = this.setupTable.editData?.filter(item => item.id === config.id && item.prop === config.prop));
+    }
+  }
   /**
    * 监听界面滚动
    */
@@ -415,6 +506,7 @@ export default class AgentImport extends Mixins(mixin) {
       this.loadingSetupBtn = true;
       this.showFilterTips = false;
       let hosts = this.setupTable.getData();
+      const versionList: { bk_host_id: number; version: string; }[] = [];
       hosts.forEach((item: ISetupRow) => {
         if (isEmpty(item.login_ip)) {
           delete item.login_ip;
@@ -432,6 +524,10 @@ export default class AgentImport extends Mixins(mixin) {
         if (item[authType]) {
           item[authType] = this.$safety.encrypt(item[authType] as string);
         }
+        versionList.push({
+          bk_host_id: item.bk_host_id as number,
+          version: item.version as string,
+        });
       });
       // 安装agent或pagent时，需要设置初始的安装类型
       if (['INSTALL_AGENT', 'REINSTALL_AGENT'].includes(this.type)) {
@@ -442,6 +538,15 @@ export default class AgentImport extends Mixins(mixin) {
         job_type: this.type,
         hosts,
       };
+      // 重装类型因为能拿到bk_host_id,按统一版本,打开agent开关传agent信息
+      if (this.type === 'REINSTALL_AGENT' && this.AgentPkgShow) {
+        Object.assign(params, {
+          agent_setup_info: {
+            choice_version_type: 'by_host',
+            version_map_list: versionList,
+          }
+        });
+      }
       const res = await AgentStore.installAgentJob({
         params,
         config: {
@@ -541,7 +646,11 @@ export default class AgentImport extends Mixins(mixin) {
     const data: ISetupRow[] = deepClone(this.tableDataBackup);
     let apList: IApExpand[] = deepClone(AgentStore.apList);
     if (this.isManual) {
-      this.setupInfo.header = this.isEdit ? getManualConfig(editConfig) : getManualConfig(tableConfig);
+      const configData = this.isEdit ? editConfig : tableConfig;
+      // 重装时表格增加agent版本信息
+      this.setupInfo.header = this.type === 'REINSTALL_AGENT'
+        ? configData.filter(item => item.manualProp || (this.AgentPkgShow && item.prop === 'version'))
+        : getManualConfig(configData);
       // 手动安装无自动选择
       apList = apList.filter(item => item.id !== -1);
       // 自动接入点改默认接入点
@@ -564,6 +673,8 @@ export default class AgentImport extends Mixins(mixin) {
         apList.unshift(obj as IApExpand);
       }
       this.setupInfo.header = this.isEdit ? editConfig : tableConfig;
+      // agent开关打开则显示agent版本
+      this.setupInfo.header = this.setupInfo.header.filter(item => this.AgentPkgShow || item.prop !== 'version');
       data.forEach((item, index: number) => {
         item.ap_id = this.tableDataBackup[index].ap_id;
       });
@@ -594,14 +705,42 @@ export default class AgentImport extends Mixins(mixin) {
       this.editTableHead.editManualConfig = getManualConfig(editConfig)
         .map(item => Object.assign({ ...item }, { show: true }));
     } else {
-      this.editTableHead.editConfig = editConfig;
-      this.editTableHead.editManualConfig = getManualConfig(editConfig);
+      this.editTableHead.editConfig = editConfig.filter(item => this.AgentPkgShow || item.prop !== 'version');
+      // 重装时表格增加agent版本信息
+      this.editTableHead.editManualConfig = (this.type === 'REINSTALL_AGENT')
+        ? editConfig.filter(item => item.manualProp || (this.AgentPkgShow && item.prop === 'version'))
+        : getManualConfig(editConfig);
     }
   }
   private handleShowPanel() {
     this.setupInfo.data = deepClone(this.setupTable.getData());
     this.showRightPanel = true;
   }
+  private osMap = {
+    'LINUX': 'linux',
+    'WINDOWS': 'windows',
+    'AIX': 'aix',
+  };
+  // 选择agent版本
+  public handleChoose({ row, instance }: { row: ISetupRow; instance: any; }) {
+    const { version = '', os_type = '' } = row; // , cpu_arch = ''
+    this.versionsDialog.show = true;
+    this.versionsDialog.versions = version ? [version] : [];
+    this.versionsDialog.os_type = this.osMap[os_type] || os_type;
+    this.versionsDialog.row = row;
+    this.$nextTick(() => {
+      this.versionsDialog.instance = instance;
+      instance.handleFocus?.();
+    });
+    // this.versionsDialog.cpu_arch = cpu_arch;
+  }
+  public versionConfirm(info: { version: string; }) {
+    this.versionsDialog.row.version = info.version;
+    this.versionCancel();
+  }
+  public versionCancel() {
+    this.versionsDialog.instance?.handleBlur?.();
+  }
 }
 </script>
 <style lang="postcss" scoped>
diff --git a/frontend/src/views/agent/agent-setup/agent-setup.vue b/frontend/src/views/agent/agent-setup/agent-setup.vue
index 667f121b0..c5d12c823 100644
--- a/frontend/src/views/agent/agent-setup/agent-setup.vue
+++ b/frontend/src/views/agent/agent-setup/agent-setup.vue
@@ -14,6 +14,7 @@
       <div class="setup-form">
         <bk-form ref="form" class="mb30" :model="formData" :rules="rules" v-test="'formSetup'">
           <install-method :is-manual="isManual" required @change="installMethodHandle"></install-method>
+
           <bk-form-item error-display-type="normal" property="bk_biz_id" :label="$t('安装到业务')" required>
             <bk-biz-select
               class="content-basic"
@@ -25,6 +26,7 @@
               @change="handleBizChange">
             </bk-biz-select>
           </bk-form-item>
+
           <bk-form-item error-display-type="normal" :label="$t('管控区域')" property="bk_cloud_id" required>
             <permission-select
               :class="['content-basic', { 'is-error': ['no_proxy', 'overdue'].includes(proxyStatus) }]"
@@ -54,6 +56,7 @@
               </span>
             </i18n>
           </bk-form-item>
+
           <bk-form-item
             property="install_channel_id"
             error-display-type="normal"
@@ -70,11 +73,8 @@
               <bk-option v-for="item in filterChannelList" :key="item.id" :id="item.id" :name="item.name"></bk-option>
             </bk-select>
           </bk-form-item>
-          <bk-form-item
-            error-display-type="normal"
-            property="ap_id"
-            :label="$t('接入点')"
-            required>
+
+          <bk-form-item error-display-type="normal" property="ap_id" :label="$t('接入点')" required>
             <bk-select
               class="content-basic"
               v-model="formData.ap_id"
@@ -96,6 +96,51 @@
                 :disabled="item.id === -1 && formData.install_channel_id !== 'default'" />
             </bk-select>
           </bk-form-item>
+
+          <bk-form-item
+            v-show="isShowAgentPkg"
+            :required="isShowAgentPkg"
+            error-display-type="normal"
+            property="choice_version_type"
+            :label="$t('agent版本')">
+            <div style="display: flex; flex-wrap: wrap; max-width: 600px;">
+              <bk-select
+                style="width: 150px; height: 32px;"
+                :clearable="false"
+                v-model="formData.choice_version_type">
+                <bk-option id="unified" :name="$t('统一版本')" />
+                <bk-option id="by_system_arch" :name="$t('按操作系统选版本')" />
+              </bk-select>
+              <bk-form-item
+                v-if="formData.choice_version_type === 'unified'"
+                class="version-type"
+                error-display-type="normal"
+                property="agent_version">
+                <div
+                  :class="['versions-choose-btn flex', { 'versions-choose-detail': formData.agent_version }]"
+                  @click="() => chooseAgentVersion({ type: 'unified', version: formData.agent_version })">
+                  <template v-if="formData.agent_version" class="versions-choose-detail">
+                    <div class="prefix-area">
+                      <i class="nodeman-icon nc-package-2" />
+                    </div>
+                    <div class="version-text">{{ formData.agent_version }}</div>
+                    <i class="nodeman-icon nc-icon-edit-2 versions-choose-icon" />
+                  </template>
+                  <template v-else>
+                    <i class="nodeman-icon nc-plus-line" />
+                    {{ $t('选择版本') }}
+                  </template>
+                </div>
+              </bk-form-item>
+              <div v-if="formData.choice_version_type === 'by_system_arch'" style="margin-top: 8px;width: 600px;">
+                <SetupPkgTable
+                  ref="setupPkgTableRef"
+                  :table-data="formData.osVersions"
+                  @choose="chooseAgentVersion">
+                </SetupPkgTable>
+              </div>
+            </div>
+          </bk-form-item>
           <bk-form-item :label="$t('安装信息')" required>
             <filter-ip-tips
               class="filter-tips"
@@ -103,6 +148,7 @@
               @click="handleShowDetail">
             </filter-ip-tips>
           </bk-form-item>
+
           <bk-form-item class="form-item-vertical" :class="['mt0', { 'mb30': isScroll }]">
             <InstallTable
               :class="{ 'agent-setup-table': isManual }"
@@ -118,6 +164,7 @@
             </InstallTable>
           </bk-form-item>
         </bk-form>
+
         <div class="form-btn" :class="{ 'fixed': isScroll, 'shrink': isScroll && showRightPanel }">
           <bk-button
             theme="primary"
@@ -134,13 +181,27 @@
         </div>
       </div>
     </section>
+
     <!--右侧提示信息-->
     <section class="agent-setup-right" :class="{ 'right-panel': showRightPanel }">
       <right-panel v-model="showRightPanel" :host-type="hostType" :host-list="hostList"></right-panel>
       <!-- <right-panel v-model="showRightPanel" :list="tipsList" :title="$t('安装要求')"></right-panel> -->
     </section>
+
     <!--过滤ip信息-->
     <filter-dialog v-model="showFilterDialog" :list="filterList" :title="$t('忽略详情')"></filter-dialog>
+
+    <!-- agent包版本 -->
+    <ChoosePkgDialog
+      v-model="versionsDialog.show"
+      :type="versionsDialog.type"
+      :show-os="versionsDialog.type === 'by_system_arch'"
+      :title="versionsDialog.title"
+      :versions="versionsDialog.versions"
+      :os-type="versionsDialog.os_type"
+      :cpu-arch="versionsDialog.cpu_arch"
+      :os-versions="formData.osVersions"
+      @confirm="updateAgentVersion" />
   </article>
 </template>
 <script lang="ts">
@@ -155,6 +216,8 @@ import mixin from '@/components/common/filter-ip-mixin';
 import formLabelMixin from '@/common/form-label-mixin';
 import FilterDialog from '@/components/common/filter-dialog.vue';
 import PermissionSelect from '@/components/common/permission-select.vue';
+import SetupPkgTable from '../components/setup-pkg-table.vue';
+import ChoosePkgDialog from '../components/choose-pkg-dialog.vue';
 import getTipsTemplate from '../config/tips-template';
 import { setupTableConfig, parentHead, setupDiffConfigs } from '../config/setupTableConfig';
 import { addListener, removeListener } from 'resize-detector';
@@ -165,6 +228,22 @@ import { ISetupHead, ISetupRow, ISetupParent } from '@/types';
 import { regIPv6 } from '@/common/regexp';
 import { reguRequired } from '@/common/form-check';
 import { getDefaultConfig } from '@/config/config';
+import { IPkgTag } from '@/types/agent/pkg-manage';
+
+type VerionType = 'unified' | 'by_system_arch';
+
+interface IForm extends IAgent {
+  choice_version_type: VerionType;
+  agent_version: string;
+  osVersions: {
+    id: string;
+    name: string;
+    os_type: string;
+    cpu_arch: string;
+    version: string;
+    tags: IPkgTag[]
+  }[];
+}
 
 @Component({
   name: 'agent-setup',
@@ -176,27 +255,48 @@ import { getDefaultConfig } from '@/config/config';
     FilterIpTips,
     FilterDialog,
     PermissionSelect,
+    SetupPkgTable,
+    ChoosePkgDialog,
   },
 })
 
 export default class AgentSetup extends Mixins(mixin, formLabelMixin) {
   @Ref('form') private readonly form!: any;
   @Ref('installTable') private readonly installTable!: any;
+  @Ref('setupPkgTableRef') private readonly setupPkgTableRef!: any;
 
   // 是否为安装方式
   private isManual = false;
   // 表单数据
-  private formData: IAgent = {
+  private formData: IForm = {
     bk_biz_id: MainStore.selectedBiz.length === 1 ? MainStore.selectedBiz[0] : '',
     bk_cloud_id: '',
     install_channel_id: '',
     ap_id: '',
+    choice_version_type: 'unified' as VerionType,
+    agent_version: '',
+    osVersions: [],
+  };
+  // 根据agent开关和接入点的gse_version是不是v2版本来显示agent版本选择是否显示（必填）、隐藏（非必填）
+  private get isShowAgentPkg() {
+    // 判断接入点版本是否为V2版本
+    const isApVersion2 = this.curApList.length > 0 && !isEmpty(this.formData.ap_id)
+      && this.curApList.find(item => item.id === this.formData.ap_id)?.gse_version === 'V2';
+    return MainStore.ENABLE_AGENT_PACKAGE_UI && isApVersion2;
   };
-  private rules = {
-    bk_biz_id: [reguRequired],
-    bk_cloud_id: [reguRequired],
-    install_channel_id: [reguRequired],
-    ap_id: [reguRequired],
+  private get rules() {
+    const commonRules = {
+      bk_biz_id: [reguRequired],
+      bk_cloud_id: [reguRequired],
+      install_channel_id: [reguRequired],
+      ap_id: [reguRequired],
+      agent_version: [{
+        required: this.isShowAgentPkg,
+        message: window.i18n.t('必填项'),
+        trigger: 'blur',
+      }],
+    };
+    return commonRules;
   };
   // 右侧提示面板是否显示
   private showRightPanel = false;
@@ -227,6 +327,14 @@ export default class AgentSetup extends Mixins(mixin, formLabelMixin) {
   private proxyStatus = '';
   // Proxy所在管控区域ID
   private proxyCloudId: undefined | number = undefined;
+  public versionsDialog = {
+    show: false,
+    type: 'unified' as VerionType,
+    title: '',
+    versions: [] as string[],
+    os_type: '',
+    cpu_arch: '',
+  };
 
   private get permissionSwitch() {
     return MainStore.permissionSwitch;
@@ -297,6 +405,8 @@ export default class AgentSetup extends Mixins(mixin, formLabelMixin) {
   @Watch('formData.ap_id')
   public handleApIdChange(val: number) {
     let urlType = '';
+    // 根据接入点选择的ap_id是否是v2版本 来设置布尔值
+    
     if (isEmpty(this.formData.bk_cloud_id)) {
       urlType = '';
     } else if (this.isDefaultCloud) {
@@ -327,6 +437,7 @@ export default class AgentSetup extends Mixins(mixin, formLabelMixin) {
     this.initApList();
     this.initCloudList();
     this.initChannelList();
+    this.getOsAndPkg();
   }
   public async initApList() {
     this.loadingApList = true;
@@ -369,12 +480,26 @@ export default class AgentSetup extends Mixins(mixin, formLabelMixin) {
    */
   public handleSetup() {
     const setupTableValidate = this.installTable.validate();
+    const setupPkgTableValidate = this.setupPkgTableRef ? this.setupPkgTableRef.validate() : true;
     this.form.validate().then(async () => {
-      if (setupTableValidate) {
-        this.loadingSetupBtn = true;
+      if (setupTableValidate && setupPkgTableValidate) {
+        // this.loadingSetupBtn = true;
         this.showFilterTips = false;
+        const { choice_version_type, agent_version, osVersions  } = this.formData;
+        const isUnified = choice_version_type === 'unified';
+        const agent_setup_info = {
+          choice_version_type,
+          [isUnified ? 'version' : 'version_map_list']: isUnified
+            ? agent_version
+            : osVersions.map(item => ({
+              os_cpu_arch: item.id,
+              version: item.version,
+            })),
+        };
         const params = {
           job_type: 'INSTALL_AGENT',
+          // v2版本接入点传agent_setup_info，非v2不传
+          ...(this.isShowAgentPkg && { agent_setup_info }),
           hosts: this.getFormData().map(({ prove, ...item }: ISetupRow) => {
             if (isEmpty(item.login_ip)) {
               delete item.login_ip;
@@ -567,10 +692,57 @@ export default class AgentSetup extends Mixins(mixin, formLabelMixin) {
   public handleShowSetting() {
     this.installTable.handleToggleSetting(true);
   }
+
+  public async getOsAndPkg() {
+    const list = await AgentStore.apiPkgQuickSearch({ project: 'gse_agent' });
+    this.formData.osVersions = (list.find(item => item.id === 'os_cpu_arch')?.children || []).map((item) => {
+      const [os, ...other] = item.id.split('_');
+      return {
+        id: item.id,
+        name: item.name as string,
+        os_type: os,
+        cpu_arch: other.join('_') || '',
+        version: '',
+        tags: [],
+      };
+    });
+  }
+  // 选择agent版本
+  public chooseAgentVersion(info: {
+    type: VerionType;
+    version?: string;
+    os_type?: string;
+    cpu_arch?: string;
+  }) {
+    const { type = 'unified', version = '', os_type = '', cpu_arch = '' } = info;
+    this.versionsDialog.show = true;
+    this.versionsDialog.type = type;
+    this.versionsDialog.versions = version ? [version] : [];
+    this.versionsDialog.os_type = os_type;
+    this.versionsDialog.cpu_arch = cpu_arch;
+    this.versionsDialog.title = type === 'unified' ? this.$t('选择统一的 Agent 版本') : this.$t('按操作系统选版本 ');
+  }
+
+  public updateAgentVersion(info) {
+    const { type, os_type, cpu_arch } = this.versionsDialog;
+    if (type === 'unified') {
+      this.formData.agent_version = info.version;
+    } else {
+      const index = this.formData.osVersions.findIndex(v => v.os_type === os_type && v.cpu_arch === cpu_arch);
+      if (index > -1) {
+        this.formData.osVersions.splice(index, 1, {
+          ...this.formData.osVersions[index],
+          version: info.version,
+          tags: info.tags,
+        });
+      }
+    }
+  }
 }
 </script>
 <style lang="postcss" scoped>
 @import "@/css/mixins/nodeman.css";
+@import "@/css/variable.css";
 
 >>> .bk-select {
   background-color: #fff;
@@ -591,6 +763,7 @@ export default class AgentSetup extends Mixins(mixin, formLabelMixin) {
     /* >>> .agent-setup-table {
       max-width: 1200px;
     } */
+    padding-bottom: 40px;
     >>> .install-table-body {
       overflow: visible;
     }
@@ -600,6 +773,73 @@ export default class AgentSetup extends Mixins(mixin, formLabelMixin) {
         border-color: #ff5656;
       }
     }
+
+    .version-type {
+      width: 322px;
+      margin-left: 8px;
+      >>> .bk-form-content {
+        margin-left: 0!important;
+      }
+      &.is-error .versions-choose-btn:not(:hover) {
+        border-color: #ff5656;
+      }
+    }
+    .versions-choose-btn {
+      width: 100%;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      border: 1px dashed #c4c6cc;
+      border-radius: 2px;
+      background-color: #fafbfd;
+      cursor: pointer;
+      .nc-plus-line {
+        margin-right: 6px;
+      }
+      .nodeman-icon {
+        color: #979ba5;
+      }
+      &:hover {
+        color: $primaryFontColor;
+        border-color: $primaryFontColor;
+      }
+      &:hover .nodeman-icon {
+        color: $primaryFontColor;
+      }
+    }
+    .versions-choose-detail {
+      border-style: solid;
+      .prefix-area {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 30px;
+        border-right: 1px solid #c4c6cc;
+        background-color: #fafbfd;
+      }
+      .version-text {
+        padding: 0 8px;
+        flex: 1;
+        color: #63656e;
+        background-color: #fff;
+      }
+      .versions-choose-icon {
+        position: absolute;
+        right: 8px;
+        top: 8px;
+        display: none;
+      }
+      &:hover {
+        .prefix-area {
+          background-color: #e1ecff;
+          border-color: $primaryFontColor;
+        }
+        .versions-choose-icon {
+          display: inline-block;
+        }
+      }
+    }
     .item-error-tips .btn {
       color: #3a84ff;
       cursor: pointer;
@@ -635,7 +875,7 @@ export default class AgentSetup extends Mixins(mixin, formLabelMixin) {
       &.fixed {
         position: fixed;
         height: 54px;
-        left: 60px;
+        left: 0;
         bottom: 0;
         right: 0;
         background: #fff;
diff --git a/frontend/src/views/agent/components/choose-pkg-dialog.vue b/frontend/src/views/agent/components/choose-pkg-dialog.vue
new file mode 100644
index 000000000..379a4cfb1
--- /dev/null
+++ b/frontend/src/views/agent/components/choose-pkg-dialog.vue
@@ -0,0 +1,516 @@
+<template>
+  <bk-dialog
+    ext-cls="pkg-dialog"
+    :value="value"
+    :width="showOs ? 1048 : 960"
+    :position="{ top: 100 }"
+    :draggable="$props.operate === 'UPGRADE_AGENT'"
+    :mask-close="false"
+    :title="title"
+    header-position="left"
+    @cancel="handleCancel">
+    <template slot="header">
+      <span class="header">{{ title }}</span>
+      <span v-if="operate === 'UPGRADE_AGENT'" class="subTitle">
+        <i18n path="已选IP" class="IP-selection">
+          <span class="selection-num">{{ num }}</span>
+        </i18n>
+        <template v-if="selectedVersion">
+          <i18n path="升级IP" class="IP-selection">
+            <span class="selection-num">，{{ upgrades }}</span>
+          </i18n>
+          <i18n path="回退IP" class="IP-selection">
+            <span class="selection-num">，{{ rollbacks }}</span>
+          </i18n>
+          <i18n path="已是目标版本Ip" class="IP-selection">
+            <span class="selection-num">，{{ nochanges }}</span>
+          </i18n>
+        </template>
+      </span>
+      <span v-if="operate === 'reinstall_batch'">
+        <i18n path="批量编辑Agent" class="batchEdit">
+          <span class="batchSupportOs">{{ allOsVersions }}</span>
+        </i18n>
+      </span>
+    </template>
+    <div class="pkg-version-wrapper">
+      <ul class="os-list" v-if="showOs">
+        <li
+          :class="['os-item', { active: `${osType}_${cpuArch}` === os.id }]"
+          v-for="os in osVersions" :key="os.os_type">
+          <div class="os-info">
+            <i :class="`os-icon nodeman-icon nc-${os.os_type}`" />
+            <span>{{ os.name }}</span>
+          </div>
+          <span class="nm-tag os-version" v-if="os.version">{{ os.version }}</span>
+        </li>
+      </ul>
+      <div class="pkg-wrapper" v-bkloading="{ isLoading: loading }">
+        <div class="pkg-table-wrapper">
+          <bk-table
+            class="pkg-table"
+            height="100%"
+            :data="tableData"
+            :outer-border="false"
+            :row-class-name="handleRowClass"
+            @sort-change="handleSortChange"
+            @row-click="handleRowClick">
+            <bk-table-column width="34">
+              <template #default="{ row }">
+                <bk-radio
+                  :ref="selectedVersion === row.version ? 'selectedRowRef' : ''"
+                  :disabled="row.disabled"
+                  :value="selectedVersion === row.version"
+                  width="90"
+                  v-bk-tooltips.left="{
+                    content: $props.operate === 'UPGRADE_AGENT'
+                      ? row.isLatestVersion ? $t('已是目标版本') : $t('当前版本')
+                      : row.isBelowVersion ? $t('版本未处于正式状态') : $t('不能低于当前版本'),
+                    disabled: !row.disabled
+                  }">
+                </bk-radio>
+              </template>
+            </bk-table-column>
+            <NmColumn :label="$t('Agent版本')" sortable="custom" prop="version" :show-overflow-tooltip="false">
+              <template #default="{ row }">
+                <span class="version">{{ row.version || '--' }}</span>
+                <FlexibleTag v-if="row.tags.length" :list="row.tags" />
+              </template>
+            </NmColumn>
+            <NmColumn width="20" resizable>
+              <template #default="{ row }">
+                <i class="bk-icon icon-right-shape active-arrow" v-show="selectedVersion === row.version"></i>
+              </template>
+            </NmColumn>
+          </bk-table>
+        </div>
+        <div class="pkg-desc" :style="{ flex: showOs ? 'initial' : 2 }">
+          <p class="title">{{ selectedRow ? $t('pkg的详细信息', [selectedRow.version]) : $t('版本详情') }}</p>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <pre class="content" v-html="markdown" />
+        </div>
+      </div>
+    </div>
+    <template slot="footer">
+      <bk-button theme="primary" :disabled="disabledClick" @click="handleConfirm">{{ $t('确定') }}</bk-button>
+      <bk-button class="ml10" @click="handleCancel">{{ $t('取消') }}</bk-button>
+    </template>
+  </bk-dialog>
+</template>
+<script lang="ts">
+import { defineComponent, nextTick, ref, toRefs, watch, PropType, computed } from 'vue';
+import { AgentStore } from '@/store';
+import FlexibleTag from '@/components/common/flexible-tag.vue';
+import { IPkgVersion, PkgType } from '@/types/agent/pkg-manage';
+import { compareVersions } from '@/common/util';
+
+export default defineComponent({
+  name: 'ChoosePkgDialog',
+  components: {
+    FlexibleTag,
+  },
+  props: {
+    value: {
+      default: false,
+      type: Boolean,
+    },
+    type: {
+      type: String,
+      default: '',
+    },
+    showOs: {
+      type: Boolean,
+      default: false,
+    },
+    versions: {
+      type: Array as () => string[],
+      default: () => [],
+    },
+    osType: {
+      type: String,
+      default: '',
+    },
+    cpuArch: {
+      type: String,
+      default: '',
+    },
+    osVersions: {
+      type: Array,
+      default: () => [],
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    operate: {
+      type: String,
+      default: '',
+    },
+    project: {
+      type: String as PropType<PkgType>,
+      default: 'gse_agent',
+    },
+  },
+
+  emits: ['input', 'confirm', 'cancel'],
+  setup(props, { emit }) {
+    const selectedRowRef = ref<any>();
+
+    const loading = ref(false);
+    const tableData = ref<any[]>([]);
+    const selectedVersion = ref('');
+    const selectedRow = ref<IPkgVersion|null>(null);
+    const markdown = ref('');
+    const lastOs = ref('');
+    const defaultVersion = ref('');
+    // 当前传入的最高版本
+    const currentLatestVersion = ref('');
+    
+    const num = ref(0);
+    const upgrades = ref(0);
+    const rollbacks = ref(0);
+    const nochanges = ref(0);
+    const getPkgVersions = async () => {
+      const {
+        default_version,
+        package_latest_version,
+        machine_latest_version,
+        pkg_info,
+      } = await AgentStore.apiGetPkgVersion({
+        // 新增加project的传入
+        project: props.project,
+        os: props.osType,
+        cpu_arch: props.cpuArch,
+        versions:props.versions,
+              });
+      defaultVersion.value = default_version;
+      currentLatestVersion.value = machine_latest_version;
+      const builtinTags = ['stable', 'latest', 'test'];
+      tableData.value.splice(0, tableData.value.length, ...pkg_info.map(item => ({
+        ...item,
+        disabled: item.disabled || item.version === machine_latest_version,
+        isLatestVersion: machine_latest_version === package_latest_version,
+        tags: item.tags.filter(tag => builtinTags.includes(tag.name)).map(tag => ({
+          className: tag.name,
+          description: tag.description,
+          name: tag.description,
+        })),
+      })));
+      loading.value = false;
+    };
+    const disabledClick = computed(() => {
+      return !selectedVersion || (nochanges.value === props.versions.length && props.type === 'upgrade');
+    });
+    const handleConfirm = () => {
+      emit('confirm', {
+        osType: props.osType,
+        cpuArch: props.cpuArch,
+        ...selectedRow.value,
+      });
+      emit('input', false);
+    };
+    const handleCancel = () => {
+      selectedRow.value = null;
+      emit('input', false);
+      emit('cancel');
+    };
+
+    // 参考 部署策略 - 选择插件版本
+    const handleRowClass = ({ row }: {row: IPkgVersion}) => {
+      if (row.disabled) {
+        return 'row-disabled';
+      }
+      if (row.version === selectedVersion.value) {
+        return 'row-active';
+      }
+    };
+    // 版本排序
+    const handleSortChange = async ({ prop, order }: { prop: string, order: string }) => {
+      if (prop === 'version') {
+        tableData.value = tableData.value.sort((a, b) => {
+          return order === 'ascending'
+            ? compareVersions(a.version,b.version)
+            : compareVersions(b.version,a.version);
+        });
+      }
+    }
+    const handleRowClick = async (row: IPkgVersion) => {
+      if (!row.disabled) {
+        selectedRow.value = row;
+        selectedVersion.value = row.version as string;
+        markdown.value = row.description;
+        await getCompareVersion(row.version);
+      }
+    };
+    const allOsVersions = ref('');
+    const getOs = async () => {
+      const list = await AgentStore.apiPkgQuickSearch({ project: 'gse_agent' });
+      const osVersions = (list.find(item => item.id === 'os_cpu_arch')?.children || []).reduce((acc, item) => {
+        const [os] = item.id.split('_');
+        const system = os.charAt(0).toUpperCase() + os.slice(1);
+        !acc.includes(system) && acc.push(system);
+        return acc;
+      }, [] as string[]);
+      allOsVersions.value = osVersions.join('、');
+    }
+
+    const getCompareVersion = async (version: string) => {
+      if(props.operate !== 'UPGRADE_AGENT') return;
+      const {
+        upgrade_count,
+        downgrade_count,
+        no_change_count
+      } = await AgentStore.apiVersionCompare({
+        current_version: version,
+        version_to_compares: props.versions,
+      });
+      upgrades.value = upgrade_count || 0;
+      rollbacks.value = downgrade_count || 0;
+      nochanges.value = no_change_count || 0;
+    }
+  
+    watch(() => props.value, async (val: boolean) => {
+      // val dialog显示隐藏
+      if (val) {
+        props.operate === 'reinstall_batch' && await getOs();
+        num.value = props.versions.length;
+        if (lastOs.value !== `${props.osType}_${props.cpuArch}`) {
+          loading.value = true;
+          selectedRow.value = null;
+          await getPkgVersions();
+        }
+        const selected = props.versions.length >= 1 ? tableData.value.find(row => row.version === props.versions[0]) || null : null;
+        if(selected) {
+          handleRowClick(selected);
+        } else {
+          selectedVersion.value = '';
+          selectedRow.value = null;
+        }
+        // 默认选中default_version,已经选过有props.version的就不默认了
+        props.versions.length === 0 && defaultVersion && tableData.value.forEach(row=>{
+          row.version === defaultVersion.value && handleRowClick(row)
+        });
+        props.operate === 'UPGRADE_AGENT' && tableData.value.forEach(row=>{
+          row.version === currentLatestVersion.value && handleRowClick(row)
+        });
+      } else {
+        lastOs.value = `${props.osType}_${props.cpuArch}`;
+        selectedVersion.value = props.versions[0] || '';
+        selectedRow.value = tableData.value.find(row => row.version === props.versions[0]) || null;
+        if (selectedRow.value) {
+          nextTick(() => {
+            selectedRowRef.value?.$el.scrollIntoView();
+          });
+        }
+      }
+    });
+
+    return {
+      ...toRefs(props),
+      disabledClick,
+      num,
+      upgrades,
+      rollbacks,
+      nochanges,
+      selectedRowRef,
+      loading,
+      tableData,
+      selectedVersion,
+      selectedRow,
+      markdown,
+      allOsVersions,
+      handleConfirm,
+      handleSortChange,
+      handleCancel,
+      handleRowClass,
+      handleRowClick,
+    };
+  },
+});
+</script>
+<style lang="postcss">
+@import "@/css/variable.css";
+.header {
+  font-size: 20px;
+  color: #313238;
+}
+span.subTitle:before {
+  content: "|";
+  margin: 0 13px 0 10px;
+  color: #DCDEE5;
+}
+.IP-selection {
+  font-size: 14px;
+  color: #63656E;
+  letter-spacing: 0;
+  .selection-num {
+    color: #3A84FF;
+    margin: 0 3px;
+  }
+}
+.batchEdit {
+  color: #979BA5;
+  font-size: 14px;
+  margin-left: 29px;
+  letter-spacing: 0.5px;
+}
+.pkg-version-wrapper {
+  display: flex;
+  height: 490px;
+  /* left */
+  .os-list {
+    margin-right: 12px;
+    padding: 8px 0;
+    width: 274px;
+    flex-shrink: 0;
+    background: #f5f7fa;
+    border-radius: 2px 2px 0 0;
+    overflow-y: auto;
+    .os-item {
+      position: relative;
+      padding: 0 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 36px;
+      &.active {
+        color: #3a84ff;
+        background-color: #e1ecff;
+        .os-version {
+          background-color: #3a84ff;
+        }
+      }
+    }
+    .os-info {
+      display: flex;
+      align-items: center;
+    }
+    .os-icon {
+      margin-right: 4px;
+    }
+    .os-version {
+      padding: 0 4px;
+      min-width: 44px;
+      height: 16px;
+      line-height: 16px;
+      text-align: center;
+      background-color: #979ba5;
+      color: #fff;
+    }
+  }
+
+  .pkg-wrapper {
+    flex: 1;
+    display: flex;
+    width: 714px;
+    border: 1px solid #dcdee5;
+    border-bottom: 0;
+  }
+
+  /* center */
+  .pkg-table-wrapper {
+    flex: 1;
+    width: 285px;
+  }
+  .pkg-table {
+    width: 100%;
+    .active-arrow {
+      color: #979ba5;
+    }
+  }
+
+  /* right */
+  .pkg-desc {
+    width: 425px;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid #dcdee5;
+    z-index: 0;
+    .title {
+      height: 43px;
+      line-height: 43px;
+      padding-left: 22px;
+      background: #fafbfd;
+      border-bottom: 1px solid #dcdee5;
+      font-size: 14px;
+      color: #313238;
+    }
+    .content {
+      border: 0;
+      height: 100%;
+      margin: 0;
+      padding: 16px;
+      font-size: 12px;
+      line-height: 24px;
+      white-space: pre-line;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+  .flexible-tag-group {
+    margin-left: 2px;
+    .tag-item {
+      &.stable {
+        color: #14a568;
+        background-color: #e4faf0;
+      }
+      &.latest {
+        color: $primaryFontColor;
+        background-color: #edf4ff;
+      }
+      &.test {
+        color: #fe9c00;
+        background-color: #fff1db;
+      }
+    }
+  }
+
+  .bk-table-header {
+    th {
+      background-color: #fafbfd;
+    }
+  }
+  .bk-table-body {
+    tr {
+      cursor: pointer;
+      &.row-disabled {
+        cursor: not-allowed;
+      }
+    }
+    tr:hover {
+      background-color: #f0f1f5 !important;
+    }
+    tr:hover>td {
+      background-color: #f0f1f5 !important;
+    }
+    .row-active {
+      background-color: #f0f1f5;
+      .tag-enable {
+        background: #d6e7da;
+      }
+    }
+    td .cell {
+      padding: 0 13px;
+      display: flex;
+      line-height: 22px;
+      .version{
+        min-width: fit-content;
+      }
+    }
+    td:first-child .cell {
+      padding-right: 0;
+    }
+    td.is-last .cell {
+      padding: 0;
+    }
+    .tag-yellow {
+      height: 18px;
+      line-height: 18px;
+    }
+  }
+}
+.pkg-dialog .bk-dialog-body {
+  padding: 0 24px;
+}
+
+</style>
diff --git a/frontend/src/views/agent/components/create-excel.ts b/frontend/src/views/agent/components/create-excel.ts
index ca7c7a3c3..f26b5d2aa 100644
--- a/frontend/src/views/agent/components/create-excel.ts
+++ b/frontend/src/views/agent/components/create-excel.ts
@@ -20,6 +20,7 @@ const config: IHead[] = [
   { name: window.i18n.t('密码/密钥'), prop: 'prove' },
   { name: window.i18n.t('外网IP'), prop: 'outer_ip', colOptional: true, optional: true, width: 150 },
   { name: window.i18n.t('登录IP'), prop: 'login_ip', optional: true, width: 150 },
+  { name: window.i18n.t('Agent包版本'), prop: 'version' },
   { name: window.i18n.t('业务'), prop: 'bk_biz_id', optional: true },
   { name: window.i18n.t('管控区域'), prop: 'bk_cloud_id', optional: true },
   { name: window.i18n.t('接入点'), prop: 'ap_id', optional: true },
diff --git a/frontend/src/views/agent/components/setup-pkg-table.vue b/frontend/src/views/agent/components/setup-pkg-table.vue
new file mode 100644
index 000000000..997a69c0f
--- /dev/null
+++ b/frontend/src/views/agent/components/setup-pkg-table.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="setup-pkg-table install-table-wrapper ">
+    <!-- 表头 -->
+    <section class="install-table-header">
+      <div class="table-header">
+        <table class="form-table">
+          <colgroup>
+            <col width="auto">
+            <col width="400">
+          </colgroup>
+
+          <thead>
+            <tr>
+              <th>
+                <div class="cell">{{ $t('操作系统') }}</div>
+              </th>
+              <th>
+                <div class="cell">
+                  <TableHeader
+                    required
+                    batch
+                    algin="left"
+                    is-batchicon-show
+                    :label="$t('包版本')"
+                    :options="options"
+                    type="select"
+                    parent-prop="xx"
+                    @confirm="handleBatchConfirm">
+                  </TableHeader>
+                </div>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody class="table-body">
+            <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
+              <td>
+                <div class="os-td">{{ row.name }}</div>
+              </td>
+              <td>
+                <VerifyInput
+                  required
+                  position="right"
+                  error-mode="mask"
+                  prop="version"
+                  :id="row.id"
+                  :icon-offset="10"
+                  :ref="(el) => verifyRefs[rowIndex] = el"
+                  :default-validator="getDefaultValidator(row)">
+                  <InstallInputType
+                    v-model="row.version"
+                    v-bind="{
+                      clearable: false,
+                      prop: 'version',
+                      type: 'choose',
+                      wrapperBorder: true,
+                      placeholder: $t('请选择')
+                    }"
+                    @choose="() => handleChoose(row)"
+                    @change="() => handleChange(rowIndex)">
+                    <div slot="choose" style="display: flex; align-items: center; height: 100%;">
+                      {{ row.version }}
+                      <FlexibleTag v-if="row.tags.length" :list="row.tags" style="margin-left: 6px;" />
+                    </div>
+                  </InstallInputType>
+                </VerifyInput>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, toRefs } from 'vue';
+import VerifyInput from '@/components/common/verify-input.vue';
+import TableHeader from '@/components/setup-table/table-header.vue';
+import InstallInputType from '@/components/setup-table/install-input-type.vue';
+import FlexibleTag from '@/components/common/flexible-tag.vue';
+import { AgentStore } from '@/store';
+import i18n from '@/setup';
+
+export default defineComponent({
+  name: 'SetupPkgTable',
+  components: {
+    VerifyInput,
+    TableHeader,
+    InstallInputType,
+    FlexibleTag,
+  },
+  props: {
+    tableData: {
+      type: Array,
+      default: () => ([]),
+    },
+  },
+  emits: ['choose'],
+  setup(props, { emit }) {
+    const verifyRefs = ref<any[]>([]);
+    const options = ref<any[]>([]);
+    const loaded = ref(false);
+    const handleBatchConfirm = payload => {
+        //包版本批量选择
+        const { value } = payload;
+        const selectVersionInfo = options.value.find(val=>val.id === value)
+        props.tableData.forEach(item=>{
+          item['version'] = selectVersionInfo.version;
+          item['tags'] = [...selectVersionInfo.tags]
+        })
+    };
+    const getPkgVersions = async () => {
+      const {
+        pkg_info,
+      } = await AgentStore.apiGetPkgVersion({
+        project: 'gse_agent',
+        os: '',
+        cpu_arch: ''
+      });
+      const builtinTags = ['stable', 'latest', 'test'];
+      options.value.splice(0, options.value.length, ...pkg_info.map(item => ({
+        ...item,
+        id: item.version,
+        name: item.version,
+        tags: item.tags.filter(tag => builtinTags.includes(tag.name)).map(tag => ({
+          className: tag.name,
+          description: tag.description,
+          name: tag.description,
+        })),
+      })));
+    };
+    const getDefaultValidator = row => ({
+      show: loaded.value ? !row.version : false,
+      message: i18n.t('必填项'),
+    });
+    const handleChoose = (row) => {
+      emit('choose', { type: 'by_system_arch', ...row });
+    };
+    const handleChange = (index: number) => {
+      verifyRefs.value[index]?.handleUpdateDefaultValidator();
+    };
+
+    const validate = () => {
+      const isValidate = props.tableData.every(row => row.version);
+      verifyRefs.value.forEach((verifyInputRef) => {
+        verifyInputRef.handleUpdateDefaultValidator?.();
+      });
+      return isValidate;
+    };
+    
+    onMounted(() => {
+      loaded.value = true;
+      getPkgVersions()
+    });
+
+    return {
+      ...toRefs(props),
+      verifyRefs,
+      options,
+      handleBatchConfirm,
+      handleChoose,
+      handleChange,
+      getDefaultValidator,
+      validate,
+    };
+  },
+});
+</script>
+
+<style lang="postcss">
+@import "@/css/variable.css";
+
+.setup-pkg-table {
+  border-bottom: 1px solid #dcdee5;
+  th {
+    padding-left: 8px!important;
+    text-align: left;
+  }
+  line-height: 42px;
+  td:first-child {
+    padding: 0 8px;
+    background-color: #fafbfd;
+  }
+
+  .flexible-tag-group {
+    display: inline-flex;
+    .tag-item {
+      &.stable {
+        color: #14a568;
+        background-color: #e4faf0;
+      }
+      &.latest {
+        color: $primaryFontColor;
+        background-color: #edf4ff;
+      }
+      &.test {
+        color: #fe9c00;
+        background-color: #fff1db;
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/agent/config/editTableConfig.ts b/frontend/src/views/agent/config/editTableConfig.ts
index 6eb72a0b3..6c7124fcf 100644
--- a/frontend/src/views/agent/config/editTableConfig.ts
+++ b/frontend/src/views/agent/config/editTableConfig.ts
@@ -22,21 +22,44 @@ export const config: ISetupHead[] = [
     prop: 'bk_cloud_id',
     type: 'select',
     required: true,
+    // 管控区域可以批量编辑
+    batch: true,
     popoverMinWidth: 160,
     noRequiredMark: false,
     parentProp: 'cloud_attr',
     placeholder: window.i18n.t('请选择'),
     manualProp: true,
+    // 管控区域校验，是未分配时提示必填
+    rules: [
+      {
+        trigger: 'blur',
+        message: window.i18n.t('请选择管控区域'),
+        validator(v: number, id: number) {
+          if (typeof v === 'undefined' || v === null || v === -1) return false;
+          const row = this.table.data.find(item => item.id === id);
+          if (!row) return;
+          return row.bk_cloud_id !== -1;
+        },
+      },
+    ],
     getOptions() {
-      return this.cloudList.map((item: ICloudSource) => ({
+      const options = [{
+        name: window.i18n.t('未分配'),
+        id: -1,
+        disabled: true,
+      }];
+      return options.concat(this.cloudList.map((item: ICloudSource) => ({
         name: item.bk_cloud_name,
         id: item.bk_cloud_id,
-      }));
+      })));
     },
     getProxyStatus(row: ISetupRow) {
       return row.proxyStatus;
     },
-    readonly: true,
+    // 未分配允许修改
+    getReadonly(row: ISetupRow) {
+      return !row.is_unassigned;
+    },
   },
   {
     label: '安装通道',
@@ -270,6 +293,23 @@ export const config: ISetupHead[] = [
     manualProp: true,
     rules: [reguIPMixins],
   },
+  {
+    label: 'Agent包版本',
+    prop: 'version',
+    type: 'choose',
+    required: true,
+    readonly: false,
+    noRequiredMark: false,
+    placeholder: window.i18n.t('请选择'),
+    batch: true,
+    default: '',
+    width: 100,
+    parentProp: 'install_info',
+    getReadonly(row: ISetupRow) {
+      return this.type === 'UNINSTALL_AGENT' || row.version === 'stable';
+    },
+    // rules: [reguPort],
+  },
   // {
   //   label: 'BT节点探测',
   //   prop: 'peer_exchange_switch_for_agent',
diff --git a/frontend/src/views/agent/config/importTableConfig.js b/frontend/src/views/agent/config/importTableConfig.js
index d13d29422..3fd1c40f6 100644
--- a/frontend/src/views/agent/config/importTableConfig.js
+++ b/frontend/src/views/agent/config/importTableConfig.js
@@ -7,6 +7,7 @@ export const parentHead = [
   { label: '主机IPTip', prop: 'host_ip', type: 'text', colspan: 0, required: true, tips: 'agentSetupHostIp' },
   { label: '主机属性', prop: 'host_attr', type: 'text', colspan: 0 },
   { label: '登录信息', prop: 'login_info', type: 'text', tips: 'agentSetupLoginInfo', colspan: 0 },
+  { label: '安装信息', prop: 'install_info', type: 'text', colspan: 0 },
   { label: '传输信息', prop: 'trans_info', type: 'text', colspan: 0 },
   { label: '', prop: '', type: 'operate' },
 ];
@@ -297,6 +298,18 @@ const config = [
       },
     ],
   },
+  {
+    label: 'Agent包版本',
+    prop: 'version',
+    type: 'choose',
+    required: true,
+    noRequiredMark: false,
+    placeholder: window.i18n.t('请选择'),
+    batch: false,
+    default: '',
+    width: 100,
+    parentProp: 'install_info',
+  },
   // {
   //   label: 'BT节点探测',
   //   prop: 'peer_exchange_switch_for_agent',
diff --git a/frontend/src/views/agent/package/PkgThead.vue b/frontend/src/views/agent/package/PkgThead.vue
new file mode 100644
index 000000000..6bac1ec4d
--- /dev/null
+++ b/frontend/src/views/agent/package/PkgThead.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="setup-header batch-able">
+    <div ref="tipSpanRef" class="'header-label">
+      <span :title="label">{{ label }}</span>
+    </div>
+    <bk-popover
+      v-if="batch"
+      class="batch-btn"
+      ref="batchRef"
+      theme="light batch-edit pkg-batch"
+      trigger="manual"
+      placement="bottom"
+      :tippy-options="{ 'hideOnClick': false }"
+      :on-show="handleOnShow"
+      :on-hide="handleOnHide">
+      <span
+        :class="['batch-icon nodeman-icon nc-bulk-edit', { 'active': isActive }]"
+        v-bk-tooltips.top="{
+          'content': $t('批量编辑', { title: '' }),
+          'delay': [300, 0]
+        }"
+        @click="handleBatchClick">
+      </span>
+      <template #content>
+        <div class="batch-edit">
+          <div class="batch-edit-title pb0">{{ $t('批量编辑', { title: label }) }}</div>
+          <div class="batch-edit-sub-title">{{ $t('统一填充') }}</div>
+          <div class="batch-edit-content" v-if="isShow">
+            <bk-tag-input
+              searchable
+              has-delete-icon
+              use-group
+              trigger="focus"
+              :list="options"
+              :placeholder="$t('请输入或选择')"
+              :tag-tpl="tagTpl"
+              v-model="value"
+              :collapse-tags="true"
+              @blur="handleBlur"
+              @inputchange="handleInputchange" />
+            <div class="create-tag-pop" v-if="popShow" @click="createTag">
+              <div class="create-tag-box">
+                <i18n path="新建标签" class="create-tag">
+                  <span>{{ tag }}</span>
+                </i18n>
+              </div>
+            </div>
+          </div>
+          <div class="footer">
+            <bk-button theme="primary" size="small" @click="handleBatchConfirm">{{ $t('确定') }}</bk-button>
+            <bk-button size="small" @click="handleBatchCancel">{{ $t('取消') }}</bk-button>
+          </div>
+        </div>
+      </template>
+    </bk-popover>
+  </div>
+</template>
+<script lang="ts">
+import { IPkgTagOpt, PkgType} from '@/types/agent/pkg-manage';
+import { AgentStore } from '@/store';
+import { ref, defineComponent, reactive, getCurrentInstance, toRefs, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'PkgThead',
+  props: {
+    moduleValue: {
+      type: Array as PropType<string[]>,
+      default: [],
+    },
+    label: {
+      type: String,
+      default: '',
+    }, // 表头label
+    batch: {
+      type: Boolean,
+      default: false,
+    }, // 是否有批量编辑框
+    isBatchIconShow: {
+      type: Boolean,
+      default: true,
+    }, // 是否显示批量编辑图标
+    options: {
+      type: Array,
+      default: () => ([]),
+    }, // 下拉框数据源
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    active: {
+      type: String as PropType<PkgType>,
+      default: 'gse_agent',
+    }
+  },
+  emits: ['confirm'],
+  setup(props, { emit }) {
+    const proxy = getCurrentInstance()?.proxy;
+
+    const batchRef = ref<any>();
+    const tipSpanRef = ref<any>();
+    const tipRef = ref<any>();
+    const tag = ref<any>();
+
+    const state = reactive<{
+      isActive: boolean;
+      value: string[];
+      isShow: boolean;
+      popShow: boolean; // 输入未匹配标签时候展示
+    }>({
+      isActive: false, // 当前批量编辑icon是否激活
+      value: [],
+      isShow: false,
+      popShow: false,
+    });
+
+    const handleBatchClick = () => {
+      if (state.isActive) {
+        handleBatchCancel();
+      } else {
+        batchRef.value?.instance.show();
+        state.isActive = true;
+      }
+    };
+    const handleBatchConfirm = () => {
+      handleBatchCancel();
+      emit('confirm',  { value: state.value });
+    };
+    const handleBatch = (value: any) => {
+      state.value = value;
+      handleBatchConfirm();
+    };
+    const handleBatchCancel = () => {
+      state.isActive = false;
+      batchRef.value?.instance.hide();
+    };
+    const handleOnShow = () => {
+      state.value.splice(0, state.value.length, ...props.moduleValue);
+      state.isShow = true;
+    };
+    const handleOnHide = () => {
+      state.isShow = false;
+    };
+    const hidePopover = (instance: any) => {
+      if (instance === proxy) return;
+      handleBatchCancel();
+    };
+
+    const tagTpl = (opt: IPkgTagOpt) => proxy?.$createElement('div', {
+      class: `tag ${opt.className}`,
+    }, [
+        proxy?.$createElement('span', { class: 'text' }, opt.name),
+    ]);
+
+    // 处理输入值更改时候的option效果
+    const handleInputchange = (value: string) => {
+      const index = props.options.findIndex((item: any) => item.children.find((child: any) => child.name === value)) || -1;
+      if (index === -1 && value && !state.value.includes(value)) {
+        state.popShow = true;
+        tag.value = value;
+      } else {
+        state.popShow = false;
+        tag.value = '';
+      }
+    };
+    // 输入框失去焦点
+    const handleBlur = () => {
+      state.popShow = false;
+      tag.value = '';
+    }
+
+    // 新建标签
+    const createTag = async () => {
+      const backup = tag.value;
+      tag.value = '';
+      state.popShow = false;
+      const customLabels: any= props.options.find((item: any) => item.id === 'custom');
+      customLabels?.children.push({
+        id: backup,
+        name: backup,
+        className: '',
+      });
+      
+      state.value.push(backup);
+      await AgentStore.apiPkgCreateTags({ project: props.active, tag_descriptions: state.value });
+    }
+
+    return {
+      ...toRefs(props),
+      ...toRefs(state),
+
+      batchRef,
+      tipSpanRef,
+      tipRef,
+      tag,
+
+      handleBatchClick,
+      handleBatchConfirm,
+      handleBatch,
+      handleBatchCancel,
+      handleOnShow,
+      handleOnHide,
+      hidePopover,
+      tagTpl,
+      handleInputchange,
+      handleBlur,
+      createTag,
+    };
+  },
+});
+</script>
+<style lang="postcss">
+  @import "@/css/variable.css";
+
+  .setup-header {
+    display: inline-flex;
+    align-items: center;
+    font-weight: normal;
+    text-align: left;
+    width: 100%;
+    overflow: hidden;
+    &.is-center {
+      justify-content: center;
+    }
+    .header-label {
+      position: relative;
+      display: inline-block;
+      line-height: 16px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      &-required {
+        padding-right: 6px;
+        &::after {
+          content: "*";
+          color: #ff5656;
+          position: absolute;
+          top: 2px;
+          right: 0;
+        }
+      }
+      &-tips {
+        border-bottom: 1px dashed #c4c6cc;
+        cursor: default;
+      }
+    }
+    .batch-btn {
+      flex-shrink: 0;
+    }
+    .batch-icon {
+      margin-left: 6px;
+      font-size: 16px;
+      color: #979ba5;
+      cursor: pointer;
+      outline: 0;
+      &:hover {
+        color: #3a84ff;
+      }
+      &.active {
+        color: #3a84ff;
+      }
+    }
+  }
+
+  .batch-edit-content {
+    display: flex;
+    flex-direction: column;
+    .create-tag-pop {
+      cursor: pointer;
+      width: 100%;
+      margin-top: 4px;
+      transition-duration: 325ms;
+      height: 40px;
+      background: #fff;
+      border: 1px solid #DCDEE5;
+      box-shadow: 0 2px 6px 0 #0000001a;
+      border-radius: 2px;
+      .create-tag-box {
+        width: 100%;
+        height: 32px;
+        margin: 4px 0;
+        line-height: 32px;
+        background: #F5F7FA;
+        .create-tag {
+          color: #63656E;
+          margin-left: 24px;
+          font-size: 12px;
+          span {
+            color: #3A84FF;
+          }
+        }
+      }
+    }
+  }
+
+  .pkg-batch-theme {
+    .batch-edit {
+      padding-top: 6px;
+    }
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+      padding: 4px 15px 16px;
+      .bk-button + .bk-button {
+        margin-left: 8px;
+      }
+    }
+    .bk-tag-input .key-node {
+      border: 1px solid transparent!important;
+      background: transparent!important;
+
+      .tag {
+        &.stable {
+          color: #14a568;
+          background-color: #e4faf0;
+          & + .remove-key {
+            background-color: #e4faf0;
+          }
+        }
+        &.latest {
+          color: $primaryFontColor;
+          background-color: #edf4ff;
+          & + .remove-key {
+            background-color: #edf4ff;
+          }
+        }
+        &.test {
+          color: #fe9c00;
+          background-color: #fff1db;
+          & + .remove-key {
+            background-color: #fff1db;
+          }
+        }
+      }
+      .remove-key {
+        right: 1px;
+        top: 0;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        color: #979ba5;
+        background-color: #f0f1f5;
+      }
+    }
+  }
+</style>
diff --git a/frontend/src/views/agent/package/index.vue b/frontend/src/views/agent/package/index.vue
new file mode 100644
index 000000000..5e796f678
--- /dev/null
+++ b/frontend/src/views/agent/package/index.vue
@@ -0,0 +1,728 @@
+<template>
+  <section class="package-manage">
+
+    <section class="package-manage-head">
+      <p class="package-manage-title">{{ $t('nav_Agent包管理') }}</p>
+      <bk-tab :active="active" type="unborder-card" label-height="40" @tab-change="updateTabActive">
+        <bk-tab-panel v-for="(panel, index) in panels" :key="index" v-bind="panel" />
+      </bk-tab>
+      <bk-button class="upload-btn" theme="primary" @click="toggleUploadShow">{{ $t('包上传') }}</bk-button>
+    </section>
+
+    <section class="package-manage-body">
+      <div class="package-manage-header">
+        <div class="default_version" v-bk-tooltips="$t('通过修改稳定版本标签来指定')">
+          <span class="title">{{ $t('默认升级安装版本') }}</span>：
+          <span class="version">{{ defaultVersion }}</span>
+        </div>
+        <bk-search-select
+          ref="searchSelect"
+          ext-cls="package-search-select"
+          :data="searchData"
+          v-model="searchSelectValue"
+          :show-condition="false"
+          :placeholder="$t('版本号、操作系统/架构、标签、上传用户、状态')"
+          v-test="'search'"
+          @change="handleSearchSelectValueChange">
+          <!-- @paste.native.capture.prevent="handlePaste"
+          :key="searchInputKey" -->
+        </bk-search-select>
+      </div>
+
+      <section class="package-search-content">
+        <div class="package-select-quick">
+          <div class="select-quick-head">
+            <p class="select-quick-title mb10">{{ $t('快捷筛选') }}</p>
+            <bk-compose-form-item style="display: flex; width: 100%;">
+              <div class="bk-select" style="padding: 0 8px;background-color: #fafbfd;">
+                {{ $t('维度') }}
+              </div>
+              <bk-select :value="dimension" style="flex: 1;" :clearable="false" @selected="updateOptionalList">
+                <bk-option v-for="opt in dimensionList" :key="opt.id" :id="opt.id" :name="$t(opt.name)" />
+              </bk-select>
+            </bk-compose-form-item>
+          </div>
+          <div class="optional-wrapper">
+            <ul class="optional-list ">
+              <li
+                v-for="(optItem, index) in dimensionOptionalList"
+                :class="['optional-item', { 'is-all': !index, selected: optItem.id === dimensionOptional }]"
+                :key="optItem.id"
+                @click="selectDimensionOptional(optItem, 'click')">
+                <span v-if="optItem.isAll" class="option-icon all">All</span>
+                <i v-if="optItem.icon" :class="['option-icon nodeman-icon', optItem.icon]" />
+                <!-- <img class="option-icon-image" :src="icon" /> -->
+                <span class="option-name">{{ optItem.name }}</span>
+                <span class="option-tag">{{ optItem.count }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="package-select-result" v-bkloading="{ isLoading }">
+          <PackageCols
+            :rows="tableData"
+            :max-height="tableHeight"
+            :pagetion="pagetion"
+            :options="tagGroup"
+            :search-select-data="searchSelectData"
+            @pagetion="pagetionChange"
+            @tagChange="tagChange"
+            @orderChange="orderChange"
+            @filter-confirm="handleFilterHeaderConfirm"
+            @filter-reset="handleFilterHeaderReset" />
+          <bk-pagination
+            ext-cls="pagination"
+            size="small"
+            :limit="pagetion.limit"
+            :count="pagetion.count"
+            :current="pagetion.current"
+            :limit-list="pagetion.limitList"
+            align="right"
+            show-total-count
+            @change="handlePageChange"
+            @limit-change="handlePageLimitChange">
+          </bk-pagination>
+        </div>
+      </section>
+    </section>
+    <PackageUpload
+      :show="uploadShow"
+      :active="active"
+      @toggle="toggleUploadShow"
+      @submit="() => updateTabActive(active)" />
+  </section>
+</template>
+<script lang="ts">
+import i18n from '@/setup';
+import { AgentStore } from '@/store';
+import { computed, defineComponent, provide, reactive, ref, toRefs, watch } from 'vue';
+import PackageCols from './package-cols.vue';
+import PackageUpload from './package-upload.vue';
+import { IPagination, ISearchItem, ISearchChild } from '@/types';
+import { MainStore } from '@/store/index';
+import {
+  IPkgParams, IPkgTag, IPkgTagOpt, PkgType,
+  IPkgQuickOpt, IPkgDimension, IPkgRow,
+} from '@/types/agent/pkg-manage';
+import { toLine, getFilterChildBySelected } from '@/common/util';
+
+type PkgQuickType = 'os_cpu_arch' | 'version';
+// 排序类型
+type PkgOrderType = 'version' | '-version';
+
+export default defineComponent({
+  components: {
+    PackageCols,
+    PackageUpload,
+  },
+  setup() {
+    const state = reactive<{
+      isLoading: boolean;
+      panels: { name: PkgType; label: string; }[];
+      active: PkgType;
+      dimension: PkgQuickType;
+      dimensionOptional: string;
+      uploadShow: boolean;
+      pagetion: IPagination;
+      ordering: PkgOrderType | '';
+    }>({
+      isLoading: true,
+      panels: [
+        { name: 'gse_agent', label: 'Agent' },
+        { name: 'gse_proxy', label: 'Proxy' },
+      ],
+      active: 'gse_agent',
+      // 维度
+      dimension: 'os_cpu_arch',
+      dimensionOptional: 'all',
+      pagetion: {
+        current: 1,
+        limit: 50,
+        count: 0,
+        limitList: [20, 50, 100, 200],
+      },
+      uploadShow: false,
+      ordering: '',
+    });
+
+    // 可选维度
+    // Sort：默认 A-Z
+    // Sort: 默认倒序，最新的版本号在最上面
+    const dimensionList = ref<IPkgDimension[]>([]);
+    const dimensionOptionalList = ref<IPkgQuickOpt[]>([]);
+    const searchSelectData = ref<ISearchItem[]>([]);
+    const searchSelectValue = ref<ISearchItem[]>([]);
+    const tableData = ref<IPkgRow[]>([]);
+    const tagList = ref<IPkgTagOpt[]>([]);
+    const tagGroup = ref<ISearchItem[]>([]);
+    const multipleKey = ['version', 'tags', 'tag_names'];
+
+
+    const tagsMap = computed(() => tagList.value.reduce((nameMap: { [k: string]: string }, item) => {
+      Object.assign(nameMap, {
+        [item.id]: item.name,
+        [`${item.id}_class`]: item.className,
+      });
+      return nameMap;
+    }, {}));
+
+    // 表头筛选变更
+    const handleFilterHeaderConfirm = ({ prop, list }: { prop: string, list: ISearchChild[] }) => {
+      const index = searchSelectValue.value.findIndex(item => item.id === prop || item.id === toLine(prop));
+      const values = list.reduce((pre: ISearchChild[], item) => {
+        if (item.checked) {
+          pre.push({
+            id: item.id,
+            name: item.name,
+            checked: true,
+          });
+        }
+        return pre;
+      }, []);
+      if (index > -1) {
+        // 已经存在就覆盖
+        searchSelectValue.value[index].values = values;
+      } else {
+        const data = searchSelectData.value.find(data => data.id === prop || data.id === toLine(prop));
+        // 不存在就添加
+        searchSelectValue.value.push({
+          id: prop,
+          name: data ? data.name : '',
+          values,
+        });
+      }
+      // 更新快捷筛选
+      updateQuickSearch(searchSelectValue.value);
+      handlePageChange(1);
+    };
+
+    // 表头筛选重置
+    const handleFilterHeaderReset = ({ prop }: {prop: string}) => {
+      const index = searchSelectValue.value.findIndex(item => item.id === prop);
+      if (index > -1) {
+        // 清除搜索栏对应表头筛选项
+        searchSelectValue.value.splice(index, 1);
+        // 更新快捷筛选
+        updateQuickSearch(searchSelectValue.value);
+        handlePageChange(1);
+      }
+    };
+
+    // 升级后的组件应该是 onlyRecommendChildren属性来代替此数据
+    const searchData = computed(() => searchSelectData.value
+      .filter(item => !searchSelectValue.value.find(opt => opt.id === item.id)));
+
+    provide('tagGroup', tagGroup);
+    provide('tagsMap', tagsMap);
+
+    const toggleUploadShow = () => {
+      state.uploadShow = !state.uploadShow;
+    };
+
+    const defaultVersion = ref<string>('');
+    const getDefaultVersion = async (type: PkgType = 'gse_agent') => {
+      const { default_version } = await AgentStore.apiGetPkgVersion({
+        project: type,
+        os: '',
+        cpu_arch: ''
+      });
+      defaultVersion.value = default_version;
+    };
+    // 更新快捷筛选列表
+    const getOptionalList = (id: PkgQuickType = 'os_cpu_arch',isTabChange:boolean = false) => {
+      // 维度不变且不是第一次获取快捷筛选列表则无需更新且不是切换tab
+      if(state.dimension === id && dimensionOptionalList.value.length > 0 && !isTabChange) return;
+      state.dimension = id;
+      const { children = [] } = dimensionList.value.find(item => item.id === id) || {};
+      
+      dimensionOptionalList.value.splice(0, dimensionOptionalList.value.length, ...children);
+    };
+
+    // 快捷筛选数据更新，同步到搜索栏，防止操作冲突
+    const updateQuickOptToSearch = () => {
+      if (state.dimensionOptional === 'all') {
+        searchSelectValue.value = searchSelectValue.value.filter(item => item.id !== state.dimension);
+        // 搜索栏变更同步到表头筛选勾选状态
+        updateCheckStatus(searchSelectValue.value);
+        return;
+      }
+      const data = searchSelectValue.value.find(item => item.id === state.dimension);
+      const child = data?.values?.find(item => item.id === state.dimensionOptional);
+      if (!child) {
+        const item = {
+          id: state.dimensionOptional,
+          name: state.dimensionOptional,
+          checked: true,
+        };
+        if (data) {
+          data.values = [item];
+        } else {
+          searchSelectValue.value = [{
+            id: state.dimension,
+            name: dimensionList.value.find(item => item.id === state.dimension)?.name || '',
+            values: [item],
+          }];
+        }
+        // 搜索栏变更同步到表头筛选勾选状态
+        updateCheckStatus(searchSelectValue.value);
+      }
+    };
+
+    // 更新快捷筛选 维度
+    const updateOptionalList = (id: PkgQuickType = 'os_cpu_arch', isTabChange:boolean = false) => {
+      // 获取当前维度的optionList
+      getOptionalList(id, isTabChange);
+      // 此处只需要id，但是传的类型是IPkgQuickOpt，所以设置count为0
+      const allOpt = { id: 'all', name: i18n.t('全部'), isAll: true, count: 0 };
+      selectDimensionOptional(allOpt);
+    };
+
+    // 维度nav click
+    const selectDimensionOptional = (opt: IPkgQuickOpt, type?: string) => {
+      if (type === 'click' && opt.id === state.dimensionOptional) return;
+      state.dimensionOptional = opt.id;
+      updateQuickOptToSearch();
+      getTableData();
+    };
+
+    // 所有pkg标签
+    const getPkgTags = async () => {
+      const res = await AgentStore.apiPkgGetTags({ project: state.active });
+      const standardGroupData: ISearchItem[] = [];
+      const opts: IPkgTagOpt[] = [];
+      res.forEach((item) => {
+        const children = item.children.map(child => ({
+          id: child.name,
+          name: child.description,
+          className: item.name === 'builtin' ? child.name : '',
+        }));
+        standardGroupData.push({
+          id: item.name,
+          name: item.description,
+          children: children.map(child => (child.className ? child : { ...child, id: child.name })),
+        });
+        opts.push(...children);
+      });
+      tagList.value.splice(0, tagList.value.length, ...opts);
+      tagGroup.value.splice(0, tagGroup.value.length, ...standardGroupData);
+    };
+
+    // 上传新包之后需要更新搜索条件
+    const updateSearchData = async () => {
+      const list = await AgentStore.apiPkgFilterCondtion({
+        category: 'agent_pkg_manage',
+        project: state.active,
+      });
+
+      searchSelectData.value.splice(0, searchSelectData.value.length, ...list.map(item => ({
+        ...item,
+        multiable: multipleKey.includes(item.id), // multiple
+        onlyRecommendChildren: true,
+      })));
+      getPkgTags();
+    };
+
+    const getParams = () => {
+      const params: IPkgParams = {
+        project: state.active,
+        page: state.pagetion.current,
+        pagesize: state.pagetion.limit,
+        ordering: state.ordering,
+        condition: [],
+      };
+      if (state.dimensionOptional !== 'all') {
+        if (state.dimension === 'os_cpu_arch') {
+          const [os, ...cpuArch] = state.dimensionOptional.split('_');
+          params.os = os;
+          params.cpu_arch = cpuArch.join('_');
+        } else {
+          params[state.dimension] = state.dimensionOptional;
+        }
+      }
+      searchSelectValue.value.forEach((item) => {
+        if (Array.isArray(item.values)) {
+          const value: string[] = [];
+          item.values.forEach((child) => {
+            value.push(...getFilterChildBySelected(item.id, child.name, searchSelectData.value).map(item => item.id));
+          });
+          params.condition?.push({ key: item.id, value: value.join(',') });
+        } else {
+          params.condition?.push({ key: 'query', value: item.name });
+        }
+        Object.assign(params, {
+          [item.id]: item.values?.map(child => `${child.id}`).join(','),
+        });
+      });
+      return params;
+    };
+    const getTableData = async () => {
+      state.isLoading = true;
+      const { list = [], total = 0 } = await AgentStore.apiPkgList(getParams());
+      state.pagetion.count = total;
+      tableData.value.splice(0, tableData.value.length, ...list.map(row => ({
+        ...row,
+        hostNumber: '',
+        formatTags: row.tags.reduce((arr: IPkgTag[], item) => {
+          arr.push(...item.children.map(child => ({
+            ...child,
+            tag_name: child.name,
+            name: child.description,
+            className: item.name === 'builtin' ? child.name : '',
+          })));
+          return arr;
+        }, []),
+      })));
+      if (total) {
+        getHostNumber();
+      }
+      state.isLoading = false;
+    };
+    const getHostNumber = async () => {
+      const params = {
+        project: state.active,
+        items: tableData.value.map(({ os, cpu_arch, version }) => ({
+          os_type: os,
+          cpu_arch,
+          version,
+        })),
+      };
+      const list = await AgentStore.apiPkgHostsCount(params);
+      list.forEach((item) => {
+        const child = tableData.value.find(row => row.os === item.os_type
+          && row.version === item.version && row.cpu_arch === item.cpu_arch);
+        if (child) {
+          child.hostNumber = item.count;
+        }
+      });
+    };
+    const tableHeight = computed(() =>{
+      return MainStore.windowHeight - 337 - (MainStore.noticeShow ? 40 : 0);
+    });
+    const handlePageChange = (page?: number) => {
+      state.pagetion.current = page || 1;
+      getTableData();
+    };
+    const handlePageLimitChange = (limit: number) => {
+      state.pagetion.current = 1;
+      state.pagetion.limit = limit;
+      getTableData();
+    };
+    const pagetionChange = (pagetion: { page?: number; pagesize?: number } = {}) => {
+      const { page, pagesize } = pagetion;
+      Object.assign(state.pagetion, {
+        current: page || 1,
+        limit: pagesize || state.pagetion.limit,
+        count: 0,
+      });
+      getTableData();
+    };
+    const tagChange = async() => {
+      await getDefaultVersion(state.active);
+      pagetionChange();
+    }
+    const orderChange = (type: PkgOrderType) => {
+      state.ordering = type;
+      getTableData();
+    };
+
+    // 同步到表头筛选勾选状态
+    const updateCheckStatus = (list: ISearchItem[]) => {
+      searchSelectData.value.forEach((data) => {
+        const item = list.find(item => item.id === data.id);
+        if (data.children) {
+          data.children = data.children.map((child) => {
+            if (!item) {
+              child.checked = false;
+            } else {
+              child.checked = item.values ? item.values.some(value => value.id === child.id) : false;
+            }
+            return child;
+          });
+        }
+      });
+    };
+
+    // 同步到快捷筛选, searchSelectValue.value等同于list
+    const updateQuickSearch = (list: ISearchItem[]) => {
+      if (list.length === 0) {
+        state.dimensionOptional = 'all';
+        return;
+      }
+      // 只更新最新项
+      const item: any = list[list.length - 1];
+      const dimension = ['version', 'os_cpu_arch'];
+      if (dimension.includes(item.id)) {
+        // 获取当前维度的快捷筛选的optionList
+        getOptionalList(item.id as PkgQuickType);
+        // 更新active项
+        if (!!item.values?.[1]) { // 多条时
+          state.dimensionOptional = 'all';
+        } else {
+          state.dimensionOptional = item.values?.[0].id || '';
+        }
+      }
+    }
+    // 搜索值变更
+    const handleSearchSelectValueChange = (list: ISearchItem[]) => {
+      // 清除非法选项
+      if (list.length >= 1 && list[list.length - 1].id === undefined) {
+        searchSelectValue.value.splice(list.length - 1, 1);
+        return;
+      }
+      const filterList = list.filter((item) => {
+        return !!searchSelectData.value.find((data) => data.id === item.id);
+      });
+
+      // 同步到快捷筛选
+      updateQuickSearch(filterList);
+      
+      // 同步到表头筛选
+      updateCheckStatus(filterList);
+      pagetionChange();
+    };
+
+    // 快捷筛选的数据更新时，给搜索栏增加操作系统搜索
+    const insertSysData = () => {
+      const sysData = dimensionList.value.find(item => item.id === 'os_cpu_arch');
+      const sysSearchData: ISearchItem = JSON.parse(JSON.stringify(sysData));
+      sysSearchData.children = sysSearchData.children?.filter(item => item.id !== 'all')
+      sysSearchData.children?.[0] && searchSelectData.value.splice(1, 0, sysSearchData); // 操作系统下拉有值才增加
+      searchSelectData.value?.forEach((item: ISearchItem) => item.children?.forEach((child: ISearchChild) => {
+        child.checked = false;
+      }));
+    };
+
+    const updateTabActive = async (type: PkgType = 'gse_agent') => {
+      await getDefaultVersion(type);
+      const isTabChange = state.active !== type;
+      if (type !== state.active) {
+        searchSelectValue.value.splice(0, searchSelectValue.value.length);
+      }
+      state.active = type;
+      // 此处加await等待搜索数据请求，防止insertSysData失效
+      await updateSearchData();
+      const list = await AgentStore.apiPkgQuickSearch({ project: type });
+      dimensionList.value.splice(0, dimensionList.value.length, ...list.map(item => {
+        if (item.children.length) {
+          
+          let count = 0;
+          item.children.forEach((child) => {
+            if (item.id === 'version') {
+              child.icon = `nc-${child.id.split('_')[0]}`;
+            }
+            count += child.count || 0;
+          });
+          const allOpt = { id: 'all', name: i18n.t('全部'), isAll: true, count };
+          item.children.unshift(allOpt);
+        };
+        return item;
+      }));
+      insertSysData();
+      updateOptionalList('version', isTabChange);
+    };
+
+    const created = async () => {
+      updateTabActive();
+    };
+    created();
+
+    return {
+      ...toRefs(state),
+      dimensionList,
+      dimensionOptionalList,
+      searchSelectData,
+      searchSelectValue,
+      tableData,
+      searchData,
+      tableHeight,
+      tagGroup,
+      defaultVersion,
+
+      handleFilterHeaderConfirm,
+      handleFilterHeaderReset,
+      toggleUploadShow,
+      updateOptionalList,
+      selectDimensionOptional,
+      updateTabActive,
+      getTableData,
+      pagetionChange,
+      tagChange,
+      orderChange,
+      handlePageChange,
+      handlePageLimitChange,
+      handleSearchSelectValueChange,
+    };
+  },
+});
+</script>
+<style lang="postcss">
+@import "@/css/variable.css";
+
+.package-manage {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.package-manage-head {
+  position: relative;
+  background-color: #fff;
+  box-shadow: 0 3px 4px 0 #0000000a;
+
+  .package-manage-title {
+    padding: 14px 24px 9px 24px;
+    line-height: 24px;
+    font-size: 16px;
+    color: $fontTitleColor;
+  }
+
+  .upload-btn {
+    position: absolute;
+    right: 24px;
+    bottom: 12px;
+  }
+
+  .bk-tab-section {
+    display: none;
+  }
+}
+
+.package-manage-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 24px 0;
+  overflow: hidden;
+
+  .package-manage-header {
+    display: flex;
+    .default_version {
+      width: 240px;
+      margin-right: 18px;
+      height: 32px;
+      line-height: 32px;
+      background: #F0F5FF;
+      border: 1px solid #A3C5FD;
+      border-radius: 2px;
+      font-size: 12px;
+      cursor: pointer;
+      padding-left: 12px;
+    }
+  }
+  
+  .package-search-select {
+    flex: 1;
+    flex-shrink: 0;
+    margin-bottom: 18px;
+    background-color: $whiteColor;
+  }
+
+  .package-search-content {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
+  /* 快捷筛选 */
+  .package-select-quick {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    width: 240px;
+    margin-right: 18px;
+    /* padding: 10px 16px; */
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(25, 25, 41, 0.05);
+    border-radius: 2px;
+  }
+  .select-quick-head {
+    padding: 10px 16px 8px 16px;
+  }
+  .optional-wrapper {
+    flex: 1;
+    padding-bottom: 10px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .optional-item {
+    display: flex;
+    align-items: center;
+    height: 36px;
+    padding: 0 16px 0 18px;
+    cursor: pointer;
+    position: relative;
+    &:hover {
+      background-color: #F5F7FA;
+    }
+    &.selected {
+      color: $primaryFontColor;
+      background-color: $bgOptHover;
+      .option-icon {
+        color: $primaryFontColor;
+      }
+      .option-tag {
+        color: $whiteColor;
+        background-color: #a3c5fd;
+       }
+    }
+    /* 全选 行内容区域下划线 */
+    &.is-all::after {
+      content: '';                        /* 伪元素内容为空 */
+      position: absolute;                 /* 绝对定位 */
+      bottom: 0;                          /* 定位到盒子的底部 */
+      left: 18px;                         /* 左边距为内边距宽度 */
+      right: 16px;                        /* 右边距为内边距宽度 */
+      height: 1px;                        /* 边框高度 */
+      background-color: #EAEBF0;      /* 边框颜色 */
+    }
+  }
+
+  .option-icon-image {
+    margin-right: 6px;
+    flex-basis: 0;
+    /* width: 16px; */
+    height: 20px;
+  }
+  .option-icon {
+    margin-right: 4px;
+    font-size: 16px;
+    color: #979ba5;
+    &.all {
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+  .option-name {
+    flex: 1;
+  }
+  .option-tag {
+    line-height: 16px;
+    padding: 0 8px;
+    background-color: #eaebf0;
+    border-radius: 2px;
+    color: #979ba5;
+  }
+  /* 表格 */
+  .package-select-result {
+    flex: 1;
+    overflow: hidden;
+  }
+  .pagination {
+    margin-top: -1px;
+    padding: 14px 16px;
+    height: 60px;
+    border: 1px solid #dcdee5;
+    background: #fff;
+    >>> .bk-page-total-count {
+      color: #63656e;
+    }
+    >>> .bk-page-count {
+      margin-top: -1px;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/agent/package/package-cols.vue b/frontend/src/views/agent/package/package-cols.vue
new file mode 100644
index 000000000..1e80218a0
--- /dev/null
+++ b/frontend/src/views/agent/package/package-cols.vue
@@ -0,0 +1,401 @@
+<template>
+  <!-- :max-height="windowHeight - 220" -->
+  <bk-table
+    :class="`pkg-manage-table ${fontSize}`"
+    :data="tableData"
+    :max-height="maxHeight"
+    @sort-change="handleSortChange">
+    <NmColumn :label="$t('包名称')" prop="pkg_name" min-width="210" fixed />
+    <NmColumn
+      key="version"
+      v-if="filter['version'].mockChecked"
+      :label="$t('版本号')"
+      prop="version"
+      min-width="120"
+      :render-header="renderFilterHeader"
+      sortable="custom"/>
+    <NmColumn
+      key="os_cpu_arch"
+      v-if="filter['os_cpu_arch'].mockChecked"
+      :label="$t('操作系统/架构')"
+      prop="os_cpu_arch"
+      min-width="120"
+      :render-header="renderFilterHeader">
+      <template #default="{ row }">
+        {{ `${row.os}_${row.cpu_arch}` }}
+      </template>
+    </NmColumn>
+    <NmColumn
+      key="tag_names"
+      :label="$t('标签信息')"
+      prop="tag_names"
+      min-width="200"
+      :show-overflow-tooltip="false"
+      :render-header="renderFilterHeader"
+      class-name="edit-tag-column">
+      <template #default="{ row }">
+        <edit-tag
+          :key="row.id"
+          field="tags"
+          @editTag="(val) => handleEditTags(row, val)"
+          :options="options"
+          :value="row.formatTags" />
+      </template>
+    </NmColumn>
+    <NmColumn
+      key="created_by"
+      :label="$t('上传用户')"
+      prop="created_by"
+      min-width="120"
+      :render-header="renderFilterHeader" />
+    <NmColumn
+      key="created_time"
+      v-if="filter['created_time'].mockChecked"
+      :label="$t('上传时间')"
+      prop="created_time"
+      class-name="config-cell"
+      min-width="150"
+      sortable />
+    <NmColumn
+      key="hostNumber"
+      v-if="filter['hostNumber'].mockChecked"
+      :label="$t('已部署主机')"
+      prop="hostNumber"
+      min-width="120"
+      align="right"
+      sortable>
+      <template #default="{ row }">
+        <span v-if="row.hostNumber" class="nm-link" @click="goAgentStatus(row)">{{ row.hostNumber }}</span>
+        <span v-else>0</span>
+      </template>
+    </NmColumn>
+    <NmColumn
+      key="is_ready"
+      v-if="filter['is_ready'].mockChecked"
+      :label="$t('状态')"
+      prop="is_ready"
+      min-width="90"
+      align="center"
+      :render-header="renderFilterHeader">
+      <template #default="{ row }">
+        <span :class="['tag-switch', { 'tag-enable': row.is_ready }]">
+          {{ row.is_ready ? $t('启用状态') : $t('停用状态')}}
+        </span>
+      </template>
+    </NmColumn>
+    <NmColumn key="message" :label="$t('操作')" prop="message" min-width="115" fixed="right">
+      <template #default="{ row }">
+        <bk-button v-if="!row.is_ready" text theme="primary" :disabled="btnLoading[row.id]" @click="switchPkgStatus(row)">
+          {{ $t('启用操作')}}
+        </bk-button>
+        <bk-popconfirm
+          width="320"
+          trigger="click"
+          :confirm-text="$t('停用操作')"
+          @confirm="switchPkgStatus(row)">
+          <div slot="content">
+            <div class="title">{{ $t('确认停用该Agent包') }}</div>
+            <p>{{ $t('确认停用该Agent包Tip1', [row.pkg_name]) }}</p>
+            <p>{{ $t('确认停用该Agent包Tip2') }}</p>
+          </div>
+          <div
+            v-bk-tooltips="{
+              content: $t('稳定版本不可停用'),
+              disabled: !getDisable(row),
+              placement: 'left'
+            }">
+            <bk-button
+              v-if="row.is_ready" text
+              theme="primary"
+              :disabled="btnLoading[row.id] || getDisable(row)">
+              {{ $t('停用操作') }}
+            </bk-button>
+          </div>
+          
+        </bk-popconfirm>
+        <bk-popconfirm
+          width="320"
+          trigger="click"
+          :confirm-text="$t('删除')"
+          @confirm="detelePkg(row)">
+          <div slot="content">
+            <div class="title">{{ $t('确认删除该Agent包') }}</div>
+            <p>{{ $t('确认删除该Agent包Tip1', [row.pkg_name]) }}</p>
+            <p>{{ $t('确认删除该Agent包Tip2') }}</p>
+          </div>
+          <div
+            v-bk-tooltips="{
+              content: $t('稳定版本不可删除'),
+              disabled: !getDisable(row),
+              placement: 'left'
+            }">
+            <bk-button
+              v-if="!row.is_ready"
+              class="ml10"
+              text
+              theme="primary"
+              :disabled="btnLoading[row.id] || getDisable(row)">
+              {{ $t('删除') }}
+            </bk-button>
+          </div>
+        </bk-popconfirm>
+      </template>
+    </NmColumn>
+    <!--表格设置-->
+    <NmColumn
+      key="setting"
+      prop="colspaSetting"
+      :render-header="renderHeader"
+      width="42"
+      :resizable="false"
+      fixed="right">
+    </NmColumn>
+  </bk-table>
+</template>
+<script lang="ts">
+import { Mixins, Emit, Component, Prop, Watch } from 'vue-property-decorator';
+import i18n from '@/setup';
+import { AgentStore } from '@/store';
+import ColumnSetting from '@/components/common/column-setting.vue';
+import { ISearchItem, ITabelFliter } from '@/types';
+import { PropType, defineComponent, getCurrentInstance, reactive, toRefs, CreateElement } from 'vue';
+import FlexibleTag from '@/components/common/flexible-tag.vue';
+import { IPkgRow } from '@/types/agent/pkg-manage';
+import HeaderRenderMixin from '@/components/common/header-render-mixins';
+import EditTag from '@/components/common/tag.vue';
+import { MainStore } from '@/store/index';
+
+@Component({
+  components: {
+    FlexibleTag,
+    EditTag,
+  },
+})
+export default class PackageCols extends Mixins(HeaderRenderMixin) {
+  @Prop({ type: Array, default: () => [] }) rows!: IPkgRow[];
+  @Prop({ type: Number, default: 0 }) maxHeight!: number;
+  @Prop({ type: Array, default: () => [] }) options!: ISearchItem[];
+  @Prop({ default: () => ([]), type: Array }) private readonly searchSelectData!: ISearchItem[];
+
+  @Watch('searchSelectData', { deep: true, immediate: true })
+  private handleSearchSelectDataChange(data: ISearchItem[]) {
+    this.filterData = JSON.parse(JSON.stringify(data));
+  }
+  private tableData: IPkgRow[] = [];
+  @Watch('rows', { deep: true, immediate: true })
+  private updateTableData(data: IPkgRow[]) {
+    this.tableData = data;
+  }
+
+  private created() {
+    this.filterData.splice(0, this.filterData.length, ...JSON.parse(JSON.stringify(this.searchSelectData)));
+  }
+
+  private getDisable(row: IPkgRow) {
+    return row.formatTags.some((item: any) => item.name === '稳定版本' || item.name === 'stable version')
+  }
+  filter = reactive<{ [key: string]: ITabelFliter }>({
+    pkg_name: {
+      checked: true,
+      disabled: true,
+      mockChecked: true,
+      name: window.i18n.t('包名称'),
+      id: 'pkg_name',
+    },
+    version: {
+      checked: true,
+      disabled: false,
+      mockChecked: true,
+      name: window.i18n.t('版本号'),
+      id: 'version',
+    },
+    os_cpu_arch: {
+      checked: true,
+      disabled: false,
+      mockChecked: true,
+      name: window.i18n.t('操作系统/架构'),
+      id: 'os_cpu_arch',
+    },
+    tag_names: {
+      checked: true,
+      disabled: true,
+      mockChecked: true,
+      name: window.i18n.t('标签信息'),
+      id: 'tag_names',
+    },
+    created_by: {
+      checked: true,
+      disabled: true,
+      mockChecked: true,
+      name: window.i18n.t('上传用户'),
+      id: 'created_by',
+    },
+    created_time: {
+      checked: true,
+      disabled: false,
+      mockChecked: true,
+      name: window.i18n.t('上传时间'),
+      id: 'created_time',
+    },
+    hostNumber: {
+      checked: true,
+      disabled: false,
+      mockChecked: true,
+      name: window.i18n.t('已部署主机'),
+      id: 'hostNumber',
+    },
+    is_ready: {
+      checked: true,
+      disabled: false,
+      mockChecked: true,
+      name: window.i18n.t('状态'),
+      id: 'is_ready',
+    },
+  });
+
+  activeRow = reactive<Pick<IPkgRow, 'id' | 'is_ready'>>({
+    id: -1,
+    is_ready: false,
+  });
+
+  btnLoading = reactive<{ [id: string]: boolean }>({});
+
+  get localMark() {
+    return 'agent_package';
+  }
+
+  private get fontSize() {
+    return MainStore.fontSize;
+  }
+
+  renderHeader(h: CreateElement) {
+    return h(ColumnSetting, {
+      props: {
+        'filter-head': true,
+        localMark: this.localMark,
+        value: this.filter,
+      },
+      on: {
+        update: (data: { [key: string]: ITabelFliter }) => this.handleColumnUpdate(data),
+      },
+    });
+  }
+
+  @Emit('tagChange')
+  async handleEditTags(row: IPkgRow, tags: string[]) {
+    // 给表格对应行数据设置标签
+    await AgentStore.apiPkgUpdateStatus({ id: row.id, is_ready: row.is_ready, tags });
+  }
+
+  handleColumnUpdate(data: { [key: string]: ITabelFliter }) {
+    this.filter = Object.assign({}, this.filter, data);
+    // 更新列显示时，标签列宽度改变，手动更新表格数据触发响应式，解决标签组件不能及时识别当前宽度和计算numTag问题
+    this.tableData = [...this.tableData]
+  }
+
+  @Emit('orderChange')
+  handleEmitOrderSort({ prop, ordering }: { prop: string, ordering: string }) {
+    return ordering;
+  }
+  handleSortChange({ prop, order }: { prop: string, order: string }) {
+    if (prop === 'version') {
+      const ordering = order === 'ascending' ? 'version' : '-version';
+      this.handleEmitOrderSort({ prop, ordering });
+    }
+  }
+
+  async switchPkgStatus(row: IPkgRow) {
+    this.activeRow = row;
+    const isReady = !this.activeRow.is_ready;
+    const res = await AgentStore.apiPkgUpdateStatus({ id: this.activeRow.id, is_ready: isReady });
+    if (res?.id) {
+      this.activeRow.is_ready = isReady;
+      this.$bkMessage({
+        theme: 'success',
+        message: isReady ? window.i18n.t('启用成功') : window.i18n.t('停用成功'),
+      });
+      this.$forceUpdate();
+    }
+  }
+  @Emit('pagetion')
+  async detelePkg(row: IPkgRow) {
+    this.activeRow = row;
+    const res = await AgentStore.apiPkgDelete(this.activeRow.id);
+    if (res) {
+      this.$bkMessage({
+        theme: 'success',
+        message: window.i18n.t('删除成功'),
+      });
+      this.$forceUpdate();
+      return;
+    }
+  }
+
+
+  goAgentStatus(row: IPkgRow) {
+    this.$router.push({
+      name: 'agentStatus',
+      params: {
+        os_type: row.os,
+        version: row.version,
+      },
+    });
+  }
+};
+</script>
+<style lang="postcss">
+@import "@/css/variable.css";
+.edit-tag-column {
+  .cell {
+    overflow: initial;
+    line-height: 18px;
+    text-overflow: initial;
+    word-break: break-all;
+    -webkit-line-clamp: unset;
+
+    .edit-tag {
+      margin-left: -4px;
+    }
+  }
+}
+.pkg-manage-table {
+  .flexible-tag-group .tag-item {
+    &.stable {
+      color: #14a568;
+      background-color: #e4faf0;
+    }
+    &.latest {
+      color: $primaryFontColor;
+      background-color: #edf4ff;
+    }
+    &.test {
+      color: #fe9c00;
+      background-color: #fff1db;
+    }
+  }
+}
+.bk-popconfirm-content.popconfirm-more  {
+  .popconfirm-content {
+    .title {
+      font-size: 16px;
+      color: #313238;
+      letter-spacing: 0;
+      line-height: 24px;
+      padding-bottom: 10px;
+    }
+    p {
+      color: #63656E;
+      padding-bottom: 5px;
+    }
+  }
+  .popconfirm-operate {
+    padding-top: 18px;
+    .default-operate-button {
+      width: 64px;
+      margin-left: 8px;
+      padding: 0;
+    }
+  }
+}
+
+</style>
diff --git a/frontend/src/views/agent/package/package-upload.vue b/frontend/src/views/agent/package/package-upload.vue
new file mode 100644
index 000000000..080731cf6
--- /dev/null
+++ b/frontend/src/views/agent/package/package-upload.vue
@@ -0,0 +1,479 @@
+<template>
+  <bk-sideslider
+    transfer
+    :is-show="show"
+    :width="960"
+    :title="$t('包上传')"
+    :before-close="handleToggle">
+    <template #content>
+      <section class="package-upload">
+        <div class="upload-component">
+          <!--
+            tar: application/x-tar
+            tgz: application/x-compressed
+            gz: application/x-gzip; application/gzip
+          -->
+          <Upload
+            ref="pkgUploadRef"
+            name="package_file"
+            accept="application/x-compressed,application/x-gzip,application/gzip"
+            :accept-desc="$t('支持 tgz、tar、gz 扩展名格式文件')"
+            :action="`${baseUrl}api/agent/package/upload/`"
+            :headers="uploadHeader"
+            :attached="pckWarning === 'before' ? { overload: true } : {}"
+            :on-upload-success="handleUploadSuccess"
+            :on-upload-error="handleUploadError"
+            :on-upload-progress="handleUploadProgress">
+            <template v-if="pckWarning" #success>
+              <bk-popover
+                v-if="pckWarning === 'before'"
+                ext-cls="upload-conflict-popover"
+                theme="light"
+                placement="bottom-start"
+                :always="true">
+                <div class="upload-conflict">
+                  <i class="bk-icon icon-exclamation-circle" />
+                  <span>{{ $t('存在同名 Agent 包') }}</span>
+                </div>
+                <div slot="content">
+                  <p class="upload-conflict-title">{{ $t('存在同名Agent包，是否覆盖上传？') }}</p>
+                  <p class="upload-conflict-line">{{ $t('包覆盖包名：', [pkgFileName]) }}</p>
+                  <p class="upload-conflict-line">{{ $t('包覆盖MD5：', [pkgFileMd5]) }}</p>
+                  <p class="upload-conflict-line">{{ $t('继续上传，将会覆盖当前平台同名的 Agent 包') }}</p>
+                  <div class="upload-conflict-footer">
+                    <bk-button theme="primary" :loading="pkgLoading" size="small" @click="uploadCover">
+                      {{ $t('覆盖上传') }}
+                    </bk-button>
+                    <bk-button size="small" @click="handleToggle">{{ $t('取消上传') }}</bk-button>
+                  </div>
+                </div>
+              </bk-popover>
+              <div v-else class="upload-conflict success">
+                <!-- <div v-else class="upload-conflict success"> -->
+                <i class="bk-icon icon-check-1" />
+                <span>{{ $t('上传成功（存在同名 Agent 包，确认覆盖上传）') }}</span>
+              </div>
+            </template>
+          </Upload>
+        </div>
+        <div class="parseLoading" v-bkloading="{ isLoading: parseLoading }" v-show="parseLoading"></div>
+        <template v-if="pkgParseSucc">
+          <div class="upload-result">
+            <p class="upload-item-title">{{ $t('结果预览') }}</p>
+            <bk-table class="pkg-manage-table pkg-parse-table" col-border :data="tableData">
+              <NmColumn :label="$t('包名')" prop="pkg_name" width="260">
+                <template #default="{ row }">
+                  <span class="disabled" v-bk-tooltips="$t('解析字段不可修改')">{{ row.pkg_name }}</span>
+                </template>
+              </NmColumn>
+              <NmColumn :label="$t('操作系统架构')" prop="sys" width="160" >
+                <template #default="{ row }">
+                  <span class="disabled" v-bk-tooltips="$t('解析字段不可修改')">{{ `${row.os}_${row.cpu_arch}` }}</span>
+                </template>
+              </NmColumn>
+              <NmColumn :label="$t('包类型')" prop="project" width="120">
+                <template #default="{ row }">
+                  <span class="disabled" v-bk-tooltips="$t('解析字段不可修改')">{{ pkgType[row.project] }}</span>
+                </template>
+              </NmColumn>
+              <NmColumn :label="$t('标签信息')" prop="tags" :show-overflow-tooltip="false" :render-header="editTheadRender">
+                <FlexibleTag :list="tagsDisplay" />
+              </NmColumn>
+            </bk-table>
+          </div>
+          <div class="upload-table">
+            <p class="upload-item-title">{{ $t('描述') }}</p>
+            <!-- 文本和标签不要换行 -->
+            <pre class="upload-package-desc" v-bk-tooltips="$t('从包中解析的描述文本，不可修改')">{{ pkgDesc }}</pre>
+          </div>
+        </template>
+        <div v-else-if="pkgDesc" class="upload-table">
+          <p class="upload-item-title">{{ $t('解析错误') }}</p>
+          <p class="upload-parse-err">{{ pkgDesc }}</p>
+        </div>
+
+      </section>
+      <div class="upload-footer mt32">
+        <bk-popover :disabled="pkgUploaded" :content="$t('请先上传包文件')">
+          <bk-button :disabled="!pkgParseSucc" :loading="submitLoading" theme="primary" @click="registerPkg">
+            {{ $t('提交') }}
+          </bk-button>
+        </bk-popover>
+        <bk-button @click="handleToggle">{{ $t('取消') }}</bk-button>
+      </div>
+    </template>
+  </bk-sideslider>
+</template>
+<script lang="ts">
+import i18n from '@/setup';
+import { AgentStore } from '@/store';
+import { defineComponent, getCurrentInstance, reactive, ref, Ref, toRefs, watch, inject, CreateElement, PropType, computed } from 'vue';
+import cookie from 'cookie';
+import Upload from '@/components/common/upload.vue';
+import FlexibleTag from '@/components/common/flexible-tag.vue';
+import PkgThead from './PkgThead.vue';
+import { IPkgParseInfo, PkgType, IPkgTagOpt } from '@/types/agent/pkg-manage';
+import { IBkColumn, ISearchItem } from '@/types';
+
+
+interface IUploadInfo {
+  id: number;
+  name: string;
+  pkg_size: string;
+  file_name: string;
+  md5: string;
+}
+
+export default defineComponent({
+  components: {
+    Upload,
+    FlexibleTag,
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    active: {
+      type: String as PropType<PkgType>,
+      default: 'gse_agent',
+    },
+  },
+  emits: ['toggle', 'submit'],
+  setup(props, { emit }) {
+    const { proxy } = (getCurrentInstance() || {});
+    const pkgUploadRef = ref<any>();
+
+    const isActiveId = ref<Number>(-1);
+    const tagGroup = inject<Ref<ISearchItem[]>>('tagGroup');
+    const tagsMap = inject<Ref<{ [k: string]: string }>>('tagsMap');
+
+    const tagsList = computed(() => tagGroup?.value || []);
+    const state = reactive({
+      baseUrl: `${window.PROJECT_CONFIG.SITE_URL}${AJAX_URL_PREFIX}`,
+      uploadHeader: [
+        { name: 'X-REQUESTED-WITH', value: 'XMLHttpRequest' },
+        { name: 'X-CSRFToken', value: cookie.parse(document.cookie)[`${window.PROJECT_CONFIG.APP_CODE}_csrftoken`] },
+      ],
+      pkgType: {
+        gse_agent: 'Agent',
+        gse_proxy: 'Proxy',
+      },
+      submitLoading: false,
+      pkgLoading: false,
+      pkgUploaded: false,
+      pkgParseSucc: false,
+      parseLoading: false,
+      pkgFileName: '',
+      pkgFileMd5: '',
+      pkgDesc: '',
+      pckWarning: '', // before, after
+    });
+    const taskState = reactive<{
+      taskTimer: null | number;
+      taskId: string;
+    }>({
+      taskTimer: null,
+      taskId: '',
+    });
+
+    // 小包标的签一致; 内置标签不能删除; 仅能调整自定义标签;
+    const tableData = ref<IPkgParseInfo[]>([]);
+    const selectedTags = ref<string[]>([]);
+    const tagsDisplay = ref<{ id: string; name: string; }[]>([]);
+
+    const handleToggle = () => {
+      emit('toggle');
+    };
+
+    const handleUploadSuccess = (res: { code: number; result?: boolean; data: IUploadInfo }) => {
+      state.pkgLoading = false;
+      if (res.code === 3800002) { // result === false
+        state.pkgFileName = res.data.file_name;    // 同名包 包名
+        state.pkgFileMd5 = res.data.md5; //同名包 MD5
+        state.pckWarning = 'before';
+        return;
+      }
+      state.parseLoading = true
+      if (res.result) {
+        state.pkgFileName = res.data.name;
+        state.pkgFileMd5 = res.data.pkg_size;
+        state.pckWarning =  state.pckWarning === 'before' ? 'after' : '';
+        if (state.pckWarning !== 'before') {
+          parsePkg();
+          state.pkgUploaded = true;
+        }
+      }
+    };
+    const handleUploadError = () => {
+      state.pkgLoading = false;
+    };
+    const handleUploadProgress = () => {
+      state.pkgLoading = true;
+    };
+
+    // 包解析
+    const parsePkg = async () => {
+      const res = await AgentStore.apiPkgParse({ file_name: state.pkgFileName });
+      if (typeof res !== 'string') {
+        const {
+          packages = [],
+          description = '',
+        } = res;
+        state.pkgParseSucc = true;
+        state.pkgDesc = description;
+        tableData.value.splice(0, tableData.value.length, ...packages);
+      } else if (typeof res === 'string'){
+        state.pkgDesc = res;
+      }
+      state.parseLoading = false;
+    };
+    const pollRegisterTask = () => {
+      if (!taskState.taskId) {
+        taskState.taskTimer && clearTimeout(taskState.taskTimer);
+        return;
+      }
+      taskState.taskTimer = window.setTimeout(async () => {
+        const { status } = await AgentStore.apiPkgRegisterQuery({ task_id: taskState.taskId, version: tableData.value[0].version});
+        if (status === 'PENDING') {
+          pollRegisterTask();
+        } else {
+          state.submitLoading = false;
+          taskState.taskId = '';
+          const isSucc = status === 'SUCCESS';
+          proxy?.$bkMessage({
+            theme: isSucc ? 'success' : 'error',
+            message: isSucc ? i18n.t('注册成功') : i18n.t('注册失败'),
+          });
+          if (isSucc) {
+            emit('toggle');
+            emit('submit');
+          }
+        }
+      }, 3000);
+    };
+
+    // 包注册任务
+    const registerPkg = async () => {
+      state.submitLoading = true;
+      // 注册之前需要把新增的标签通过接口生成，然后拿到name给注册接口使用;
+      // const copyNameMap = { ...tagsMap?.value };
+      // const tags = selectedTags.value.filter(tag => !!copyNameMap[tag]);
+      // let createTagsRes = !tags.length; // 创建标签的结果
+      // // 生成新标签
+      // if (tags.length) {
+      //   const list = await AgentStore.apiPkgCreateTags({ project: props.active, tag_descriptions: tags });
+      //   if (list) {
+      //     createTagsRes = true;
+      //     // 把创建好的标签合并至 copyNameMap
+      //     Object.assign(copyNameMap, list.reduce((obj: { [k: string]: string }, item) => {
+      //       Object.assign(obj, { [item.description]: item.name });
+      //       return obj;
+      //     }, {}));
+      //   }
+      // }
+      // // 注册操作- 确认不需要生成 tags 或 生成tags成功之后进行
+      // if (createTagsRes) {
+      const res = await AgentStore.apiPkgRegister({
+        project: props.active,
+        file_name: state.pkgFileName,
+        tag_descriptions: selectedTags.value, // 无需单独调用创建标签的接口
+        // tags: selectedTags.value.map(tag => copyNameMap[tag]), // tag的name
+      });
+        // 注册之后需要轮询这个任务
+      if (res.task_id) {
+        taskState.taskId = res.task_id;
+        pollRegisterTask();
+      } else {
+        state.submitLoading = true;
+      }
+      // }
+    };
+
+    // 覆盖之前的上传 - overload
+    const uploadCover = () => pkgUploadRef.value?.handleRetry?.();
+
+
+    const editTheadRender = (h: CreateElement, { column }: { column: IBkColumn }) => {
+      const { label } = column;
+      return h(PkgThead, {
+        props: {
+          label,
+          type: '',
+          batch: true,
+          active: props.active,
+          options: tagGroup?.value || [],
+          moduleValue: selectedTags.value,
+        },
+        on: {
+          confirm: ({ value }: { value: string[] }) => {
+            deelTags(value);
+          },
+        },
+      });
+    };
+
+    const deelTags = (value: string[]) => {
+      selectedTags.value.splice(0, selectedTags.value.length, ...value);
+      tagsDisplay.value.splice(0, tagsDisplay.value.length, ...value
+        .map(id =>  ({
+          id,
+          name: tagsMap?.value[id] || id,
+          className: tagsMap?.value[`${id}_class`],
+        })));
+    };
+
+    watch(() => props.show, (isShow) => {
+      if (!isShow) {
+        taskState.taskTimer && clearTimeout(taskState.taskTimer);
+        state.submitLoading = false;
+        state.pkgLoading = false;
+        state.pkgUploaded = false;
+        state.pkgParseSucc = false;
+        state.parseLoading = false;
+        state.pckWarning = '';
+        state.pkgDesc = '';
+        taskState.taskId = '';
+        selectedTags.value.splice(0, selectedTags.value.length);
+        tagsDisplay.value.splice(0, tagsDisplay.value.length);
+      }
+    });
+
+    // tesing;
+    // state.pckWarning = '';
+    // state.pkgUploaded = true;
+    // parsePkg();
+    const tagTpl = (opt: IPkgTagOpt) => proxy?.$createElement('div', {
+      class: `tag ${opt.className}`,
+    }, [
+        proxy?.$createElement('span', { class: 'text' }, opt.name),
+    ]);
+
+    return {
+      pkgUploadRef,
+      tagsMap,
+      ...toRefs(props),
+      ...toRefs(state),
+      ...toRefs(taskState),
+      tableData,
+      selectedTags,
+      tagsDisplay,
+      tagTpl,
+      tagsList,
+      isActiveId,
+
+      handleToggle,
+      handleUploadSuccess,
+      handleUploadError,
+      handleUploadProgress,
+      uploadCover,
+      registerPkg,
+      editTheadRender,
+    };
+  },
+});
+</script>
+<style lang="postcss">
+@import "@/css/variable.css";
+
+.package-upload {
+  max-height: calc(100vh - 108px); /* 设置最大高度,让底部按钮跟随*/
+  padding: 30px 40px;
+  overflow-y: auto;
+
+  .upload-result {
+    margin-top: 24px;
+  }
+
+  .parseLoading {
+    height: 100px; /* 加载动画,相对定位,只需要设置100高度*/
+  }
+
+  .upload-conflict {
+    display: flex;
+    color: $bgWarning;
+    .bk-icon {
+      margin-right: 6px;
+    }
+    &.success {
+      color: $bgSuccess;
+    }
+  }
+
+  .upload-item-title {
+    margin-top: 24px;
+    margin-bottom: 8px;
+
+  }
+
+  .upload-parse-err{
+    margin-bottom: 8px;
+    color: #FF5656;
+    background-color: #fafbfd;
+    border: 1px solid #c4c6cc;
+    border-radius: 2px;
+    padding: 6px 10px;
+    line-height: 20px;
+  }
+
+  .upload-package-desc {
+    margin: 0;
+    padding: 6px 10px;
+    line-height: 20px;
+    min-height: 40px;
+    border: 1px solid #c4c6cc;
+    border-radius: 2px;
+    cursor: not-allowed;
+    background-color: #fafbfd;
+  }
+
+  .pkg-parse-table {
+    th {
+      background-color: #f0f1f5;
+    }
+    td {
+      background-color: #fafbfd;
+      &.noEmpty{
+        background-color: #fff;
+      }
+    }
+  }
+
+  .disabled{
+    cursor: not-allowed;
+  }
+}
+
+.upload-footer {
+  display: flex;
+  padding: 12px 40px;
+  background-color: #fff;
+  .bk-button {
+    margin-right: 8px;
+    min-width: 88px;
+  }
+}
+
+.upload-conflict-popover {
+  padding: 10px;
+  .upload-conflict-title {
+    margin-bottom: 8px;
+    line-height: 24px;
+    font-size: 16px;
+    color: #313238;
+  }
+  .upload-conflict-line {
+    line-height: 24px;
+    font-size: 12px;
+    color: #63656e;
+  }
+  .upload-conflict-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
+    .bk-button {
+      margin-left: 8px;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/cloud/cloud-manager-add/cloud-manager-setup.vue b/frontend/src/views/cloud/cloud-manager-add/cloud-manager-setup.vue
index 57af406e0..2909b1eab 100644
--- a/frontend/src/views/cloud/cloud-manager-add/cloud-manager-setup.vue
+++ b/frontend/src/views/cloud/cloud-manager-add/cloud-manager-setup.vue
@@ -39,7 +39,8 @@
               :setup-info="formData.bkCloudSetupInfo"
               :key="net.active"
               :before-delete="handleBeforeDeleteRow"
-              @change="handleSetupTableChange">
+              @change="handleSetupTableChange"
+              @choose="handleChoose">
             </InstallTable>
           </bk-form-item>
           <bk-form-item error-display-type="normal" :label="$t('密码/密钥')" required>
@@ -99,11 +100,22 @@
     </div>
     <!--过滤ip信息-->
     <filter-dialog v-model="showFilterDialog" :list="filterList" :title="$t('忽略详情')"></filter-dialog>
+    <!-- agent包版本 -->
+    <ChoosePkgDialog
+      v-model="versionsDialog.show"
+      :type="versionsDialog.type"
+      :title="versionsDialog.title"
+      :versions="versionsDialog.versions"
+      :os-type="versionsDialog.os_type"
+      :cpu-arch="versionsDialog.cpu_arch"
+      :project="versionsDialog.project"
+      @confirm="versionConfirm"
+      @cancel="versionCancel" />
   </section>
 </template>
 <script lang="ts">
 import { Component, Prop, Ref, Mixins } from 'vue-property-decorator';
-import { MainStore, CloudStore } from '@/store/index';
+import { MainStore, CloudStore, AgentStore } from '@/store/index';
 import InstallTable from '@/components/setup-table/install-table.vue';
 import InstallMethod from '@/components/common/install-method.vue';
 import RightPanel from '@/components/common/right-panel-tips.vue';
@@ -119,6 +131,7 @@ import { defaultPort, getDefaultConfig } from '@/config/config';
 import { ISetupHead, ISetupRow, IProxyIpKeys, ISetupParent } from '@/types';
 import { reguPort, reguRequired } from '@/common/form-check';
 import { getManualConfig } from '@/common/util';
+import ChoosePkgDialog from '../../agent/components/choose-pkg-dialog.vue';
 
 @Component({
   name: 'cloud-manager-setup',
@@ -129,6 +142,7 @@ import { getManualConfig } from '@/common/util';
     Tips,
     FilterIpTips,
     FilterDialog,
+    ChoosePkgDialog,
   },
 })
 
@@ -183,7 +197,53 @@ export default class CloudManagerSetup extends Mixins(formLabelMixin, FilterIpMi
   private apId = 0;
   private marginLeft = 108;
   private cloudName = '';
+  private gse_version = '';
 
+  // agent版本弹框显示参数
+  public versionsDialog = {
+    show: false,
+    type: 'by_system_arch',
+    title: this.$t('选择 Agent 版本'),
+    versions: [] as string[],
+    os_type: 'linux',
+    cpu_arch: '',
+    project: 'gse_proxy',
+    row: null as any,
+    instance: null as any,
+  };
+  /**
+   * 获取agent默认版本数据
+   * @param {ISetupRow[]} data - 设置行数据
+   * @returns {Promise<ISetupRow[]>} - 包含默认版本的数据
+   */
+  private defaultVersion = '';
+  private async getDefaultVersion() {
+    const { default_version } = await AgentStore.apiGetPkgVersion({
+      project: 'gse_proxy',
+      os: 'linux',
+      cpu_arch: ''
+    });
+    this.defaultVersion = default_version;
+  };
+
+  // 选择agent版本
+  public handleChoose({ row, instance }: { row: ISetupRow; instance: any; }) {
+    const { version = '' } = row;
+    this.versionsDialog.show = true;
+    this.versionsDialog.versions = version ? [version] : [];
+    this.versionsDialog.row = row;
+    this.$nextTick(() => {
+      this.versionsDialog.instance = instance;
+      instance.handleFocus?.();
+    });
+  }
+  public versionConfirm(info: { version: string; }) {
+    this.versionsDialog.row.version = info.version;
+    this.versionCancel();
+  }
+  public versionCancel() {
+    this.versionsDialog.instance?.handleBlur?.();
+  }
   private get apList() {
     return CloudStore.apList;
   }
@@ -216,6 +276,8 @@ export default class CloudManagerSetup extends Mixins(formLabelMixin, FilterIpMi
   }
 
   private async handleInit() {
+    // 获取默认版本
+    await this.getDefaultVersion();
     this.loading = true;
     switch (this.type) {
       case 'create':
@@ -234,7 +296,16 @@ export default class CloudManagerSetup extends Mixins(formLabelMixin, FilterIpMi
     CloudStore.setApUrl({ id: this.apId });
     this.loading = false;
   }
+  // 是否显示agent包版本
+  private get AgentPkgShow(): Boolean {
+    // agent包开关开启并且接入点是v2版本时候显示agent包版本
+    return MainStore.ENABLE_AGENT_PACKAGE_UI && this.isApV2;
+  }
   private initForm() {
+    // agent包开关关闭或者不是接入点v2版本时候不显示agent包版本
+    if (!this.AgentPkgShow) {
+      this.setupConfig.header = this.setupConfig.header?.filter(item => item.prop !== 'version');
+    }
     this.formData = {
       bkCloudSetupInfo: this.setupConfig,
       retention: -1,
@@ -244,11 +315,17 @@ export default class CloudManagerSetup extends Mixins(formLabelMixin, FilterIpMi
       bkBizId: '',
     };
   }
+  // 判断当前接入点是v2版本
+  private get isApV2(): Boolean {
+    return this.apList.find(data => data.id === this.apId)?.gse_version === 'V2';
+  }
   /**
    * 重试回填数据
    */
   private initTableData() {
     const defaultAp = this.apList.find(item => item.is_default);
+    // 设置默认版本
+    const version = this.AgentPkgShow ? this.defaultVersion : '';
     const table = [];
     const initRow = {
       inner_ip: '',
@@ -258,6 +335,7 @@ export default class CloudManagerSetup extends Mixins(formLabelMixin, FilterIpMi
       prove: '',
       retention: -1,
       data_path: defaultAp?.file_cache_dirs || '',
+      version,
     };
     // 默认给两行数据
     table.push({ ...initRow });
@@ -333,6 +411,7 @@ export default class CloudManagerSetup extends Mixins(formLabelMixin, FilterIpMi
   private async handleCreateOrReplace(data: ISetupRow[], type = 'INSTALL_PROXY') {
     this.loadingSetup = true;
     const ipKeys: IProxyIpKeys[] = ['inner_ip', 'outer_ip', 'login_ip'];
+    const versionList: { bk_host_id: number; version: string; }[] = [];
     const hosts = data.map((item: ISetupRow) => {
       const { inner_ip, outer_ip, login_ip, ...other } = item;
       const host: ISetupRow = {
@@ -341,9 +420,22 @@ export default class CloudManagerSetup extends Mixins(formLabelMixin, FilterIpMi
       ipKeys.forEach((key) => {
         Object.assign(host, this.$setIpProp(key, item));
       });
+      versionList.push({
+        bk_host_id: item.bk_host_id as number,
+        version: item.version || '',
+      });
       return host;
     });
     const params: Dictionary = { job_type: type, hosts };
+    // 显示agent包版本，传agent信息
+    if (this.AgentPkgShow) {
+      Object.assign(params, {
+        agent_setup_info: {
+          choice_version_type: 'by_host',
+          version_map_list: versionList,
+        },
+      });
+    }
     if (type === 'REPLACE_PROXY') {
       params.replace_host_id = this.replaceHostId;
     }
@@ -397,6 +489,9 @@ export default class CloudManagerSetup extends Mixins(formLabelMixin, FilterIpMi
     } else {
       this.setupConfig.header = setupInfo;
     }
+    if (!this.AgentPkgShow) {
+      this.setupConfig.header = this.setupConfig.header?.filter(item => item.prop !== 'version');
+    }
     this.setupTable.handleInit();
     this.setupTable.handleScroll();
   }
diff --git a/frontend/src/views/cloud/cloud-manager-detail/cloud-detail-slider.vue b/frontend/src/views/cloud/cloud-manager-detail/cloud-detail-slider.vue
index 7475075fc..0a4e4ecb1 100644
--- a/frontend/src/views/cloud/cloud-manager-detail/cloud-detail-slider.vue
+++ b/frontend/src/views/cloud/cloud-manager-detail/cloud-detail-slider.vue
@@ -11,6 +11,7 @@
       <SidesliderContentEdit
         v-if="edit"
         :basic="basicInfo"
+        :edit-type="editType"
         @update-edited="(isEdited) => edited = !!isEdited"
         @close="handleToggle(false)"
         @change="handleSave">
@@ -35,13 +36,22 @@ import SidesliderContentEdit from '../components/sideslider-content-edit.vue';
 export default class CloudDetailSlider extends Vue {
   @Prop({ type: Object, default: () => ({}) }) private readonly row!: Dictionary;
   @Prop({ type: Boolean, default: false }) private readonly edit!: boolean;
+  @Prop({ type: String, default: '' }) private readonly editType!: string;
   @ModelSync('value', 'change', { default: false, type: Boolean }) private show!: boolean;
 
   private basicInfo: Dictionary = {};
   private edited = false;
 
   private get title() {
-    return this.edit ? this.$t('修改登录信息') : this.row.inner_ip;
+    // return this.edit ? this.$t('修改登录信息') : this.row.inner_ip;
+    return this.edit ?  this.text : this.row.inner_ip;
+  }
+  private get text() {
+    const messages: Dictionary = {
+      reinstall: '重装',
+      reload: '重载',
+    };
+    return messages[this.editType] || '修改登录信息';
   }
   private get width() {
     return this.edit ? 600 : 780;
diff --git a/frontend/src/views/cloud/cloud-manager-detail/cloud-detail-table.vue b/frontend/src/views/cloud/cloud-manager-detail/cloud-detail-table.vue
index 8087adfd8..4f47b0dd2 100644
--- a/frontend/src/views/cloud/cloud-manager-detail/cloud-detail-table.vue
+++ b/frontend/src/views/cloud/cloud-manager-detail/cloud-detail-table.vue
@@ -228,7 +228,7 @@
                         v-test="'reinstall'"
                         text
                         :disabled="row.re_certification || disabled"
-                        @click="handleConfirmOperate($t('确定重装选择的主机'), row, handleReinstall)"
+                        @click="handleViewProxy(row, true, 'reinstall')"
                         ext-cls="row-btn">
                         {{ $t('重装') }}
                       </bk-button>
@@ -291,8 +291,19 @@
       v-model="showSlider"
       :edit="isEdit"
       :row="currentRow"
+      :edit-type="editType"
       @save="handleReloadTable">
     </CloudDetailSlider>
+
+    <!--升级proxy-->
+    <ChoosePkgDialog
+      v-model="versionsDialog.show"
+      :type="versionsDialog.type"
+      :title="versionsDialog.title"
+      :versions="versionsDialog.versions"
+      :operate="versionsDialog.operate"
+      :project="versionsDialog.project"
+      @confirm="updateProxyVersion" />
   </section>
 </template>
 
@@ -308,12 +319,14 @@ import { IBkColumn, ITabelFliter } from '@/types';
 import { TranslateResult } from 'vue-i18n';
 import { DHCP_FILTER_KEYS } from '@/config/config';
 import CopyDropdown, { allChildList } from '@/components/common/copy-dropdown.vue';
+import ChoosePkgDialog from '@/views/agent/components/choose-pkg-dialog.vue';
 
 @Component({
   name: 'CloudDetailTable',
   components: {
     CloudDetailSlider,
     CopyDropdown,
+    ChoosePkgDialog,
   },
 })
 
@@ -327,15 +340,26 @@ export default class CloudDetailTable extends Vue {
   private showSlider = false;
   private isEdit = false;
   private currentRow: Dictionary = {};
+  // 打开编辑页面的操作类型
+  private editType = '';
   // Proxy操作
   private operate = [
     { id: 'uninstall', name: this.$t('卸载'), disabled: false, show: true },
     // { id: 'remove', name: this.$t('移除'), disabled: false, show: true },
     { id: 'reboot', name: this.$t('重启'), disabled: false, show: true },
     { id: 'reload', name: this.$t('重载配置'), disabled: false, show: true },
-    { id: 'upgrade', name: this.$t('升级'), disabled: false, show: true },
+    { id: 'upgrade', name: this.$t('升级回退'), disabled: false, show: true },
     { id: 'log', name: this.$t('最新执行日志'), disabled: false, show: true },
   ];
+  public versionsDialog = {
+    show: false,
+    type: 'unified',
+    title: this.$t('确认Proxy目标版本'),
+    versions: [] as string[],
+    row: null as any,
+    operate: 'UPGRADE_PROXY',
+    project: 'gse_proxy'
+  };
   // 状态map
   private statusMap = {
     running: this.$t('正常'),
@@ -382,6 +406,32 @@ export default class CloudDetailTable extends Vue {
   private get proxyOperateList() {
     return (this.authority.proxy_operate || []).map(item => item.bk_biz_id);
   }
+  // 升级主机Proxy版本
+  private async updateProxyVersion(info: { version: string }) {
+    this.loadingProxy = true;
+    const data = this.versionsDialog.row;
+    const params = {
+      job_type: 'UPGRADE_PROXY',
+      bk_host_id: [data.bk_host_id],
+    };
+    const versionList: { bk_host_id: number; version: string; }[] = [
+      {
+        bk_host_id: data.bk_host_id as number,
+        version: info.version as string,
+      }
+    ];
+    Object.assign(params, {
+      agent_setup_info: {
+        choice_version_type: 'by_host',
+        version_map_list: versionList,
+      }
+    });
+    const result = await CloudStore.operateJob(params);
+    this.loadingProxy = false;
+    if (result.job_id) {
+      this.handleRouterPush('taskDetail', { taskId: result.job_id });
+    }
+  }
   protected get copyMenu() {
     return allChildList.filter(item => !item.id.includes('cloud'))
       .map(item => ({
@@ -454,7 +504,9 @@ export default class CloudDetailTable extends Vue {
         this.handleConfirmOperate(this.$t('确定重启选择的主机'), row, 'RESTART_PROXY');
         break;
       case 'reload':
-        this.handleConfirmOperate(this.$t('确认重载所选主机的配置'), row, this.handleReload);
+        // this.handleConfirmOperate(this.$t('确认重载所选主机的配置'), row, this.handleReload);
+        // 重载改为在侧边栏编辑页面操作
+        this.handleViewProxy(row, true, 'reload');
         break;
       case 'upgrade':
         this.handleConfirmOperate(this.$t('确定升级选择的主机'), row, 'UPGRADE_PROXY');
@@ -464,20 +516,26 @@ export default class CloudDetailTable extends Vue {
     }
   }
   public handleConfirmOperate(title: string | TranslateResult, row: IProxyDetail, type: Function | string) {
-    this.$bkInfo({
-      title,
-      extCls: 'wrap-title',
-      confirmFn: () => {
-        if (typeof type === 'function') {
-          type(row);
-        } else {
-          this.handleOperateHost(row, type);
-        }
-      },
-    });
+    if(type === 'UPGRADE_PROXY') {
+      this.versionsDialog.show = true;
+      this.versionsDialog.row = row;
+      this.versionsDialog.versions = [row.version as string];
+    } else {
+      this.$bkInfo({
+        title,
+        extCls: 'wrap-title',
+        confirmFn: () => {
+          if (typeof type === 'function') {
+            type(row);
+          } else {
+            this.handleOperateHost(row, type);
+          }
+        },
+      });
+    }
   }
   /**
-     * 升级主机、卸载主机、重启主机
+     * 卸载主机、重启主机
      */
   public async handleOperateHost(row: IProxyDetail, type: string) {
     this.loadingProxy = true;
@@ -525,7 +583,7 @@ export default class CloudDetailTable extends Vue {
     this.loadingProxy = true;
     let paramKey = [
       'ap_id', 'bk_biz_id', 'bk_cloud_id', 'inner_ip', 'inner_ipv6',
-      'is_manual', 'peer_exchange_switch_for_agent', 'bk_host_id', 'enable_compression',
+      'is_manual', 'peer_exchange_switch_for_agent', 'bk_host_id', 'enable_compression','version'
     ];
     if (!this.$DHCP) {
       paramKey = paramKey.filter(key => !DHCP_FILTER_KEYS.includes(key));
@@ -586,8 +644,9 @@ export default class CloudDetailTable extends Vue {
   }
 
   // 编辑或查看proxy详细信息
-  public handleViewProxy(row: IProxyDetail, isEdit: boolean) {
+  public handleViewProxy(row: IProxyDetail, isEdit: boolean, type?: string) {
     this.isEdit = isEdit;
+    this.editType = type;
     this.showSlider = true;
     this.currentRow = row;
   }
diff --git a/frontend/src/views/cloud/cloud-manager.vue b/frontend/src/views/cloud/cloud-manager.vue
index c88e8e0f9..971be2a28 100644
--- a/frontend/src/views/cloud/cloud-manager.vue
+++ b/frontend/src/views/cloud/cloud-manager.vue
@@ -173,7 +173,7 @@
           </NmColumn>
           <NmColumn :label="$t('Agent数量')" prop="nodeCount" align="right" :resizable="false" sortable="custom">
             <template #default="{ row }">
-              <div class="pr20">
+              <div class="pr20 nm-link">
                 <span v-if="row.nodeCount" class="text-btn" v-test="'filterAgent'" @click.stop="handleGotoAgent(row)">
                   {{ row.nodeCount }}
                 </span>
diff --git a/frontend/src/views/cloud/components/sideslider-content-edit.vue b/frontend/src/views/cloud/components/sideslider-content-edit.vue
index d0e004d9a..dad46dc62 100644
--- a/frontend/src/views/cloud/components/sideslider-content-edit.vue
+++ b/frontend/src/views/cloud/components/sideslider-content-edit.vue
@@ -90,6 +90,36 @@
           v-model="proxyData.enable_compression">
         </bk-switcher>
       </bk-form-item>
+      <bk-form-item
+        v-show="AgentPkgShow"
+        :required="AgentPkgShow"
+        :rules="rules.version"
+        error-display-type="normal"
+        property="version"
+        :label="$t('agent版本')">
+        <div style="display: flex; flex-wrap: wrap; max-width: 600px;">
+          <bk-form-item
+            class="version-type"
+            error-display-type="normal"
+            property="agent_version">
+            <div
+              :class="['versions-choose-btn flex', { 'versions-choose-detail': proxyData.version }]"
+              @click="() => chooseAgentVersion({ version: proxyData.version })">
+              <template v-if="proxyData.version" class="versions-choose-detail">
+                <div class="prefix-area">
+                  <i class="nodeman-icon nc-package-2" />
+                </div>
+                <div class="version-text">{{ proxyData.version }}</div>
+                <i class="nodeman-icon nc-icon-edit-2 versions-choose-icon" />
+              </template>
+              <template v-else>
+                <i class="nodeman-icon nc-plus-line" />
+                {{ $t('选择版本') }}
+              </template>
+            </div>
+          </bk-form-item>
+        </div>
+      </bk-form-item>
     </bk-form>
     <div class="mt30 mb10">
       <bk-button
@@ -102,28 +132,41 @@
       </bk-button>
       <bk-button class="nodeman-cancel-btn ml10" @click="handleCancel">{{ $t('取消') }}</bk-button>
     </div>
+    <!-- agent包版本 -->
+    <ChoosePkgDialog
+      v-model="versionsDialog.show"
+      :type="versionsDialog.type"
+      :title="versionsDialog.title"
+      :versions="versionsDialog.versions"
+      :os-type="versionsDialog.os_type"
+      :project="versionsDialog.project"
+      @confirm="updateAgentVersion" />
   </section>
 </template>
 <script lang="ts">
 import { Vue, Component, Prop, Watch, Ref, Emit } from 'vue-property-decorator';
-import { CloudStore } from '@/store';
+import { CloudStore, MainStore } from '@/store';
 import { isEmpty } from '@/common/util';
-import { authentication } from '@/config/config';
+import { authentication, DHCP_FILTER_KEYS } from '@/config/config';
 import Upload from '@/components/setup-table/upload.vue';
 import { IProxyDetail } from '@/types/cloud/cloud';
 import InstallInputType from '@/components/setup-table/install-input-type.vue';
 import { reguFnMinInteger, reguPort, reguIPMixins, reguRequired, reguFnSysPath, osDirReplace } from '@/common/form-check';
+import ChoosePkgDialog from '../../agent/components/choose-pkg-dialog.vue';
+
 
 @Component({
   name: 'sideslider-content-edit',
   components: {
     Upload,
     InstallInputType,
+    ChoosePkgDialog,
   },
 })
 
 export default class SidesliderContentEdit extends Vue {
   @Prop({ type: Object, default: () => ({}) }) private readonly basic!: IProxyDetail;
+  @Prop({ type: String, default: '' }) private readonly editType!: string;
   @Ref('form') private readonly formRef!: any;
 
   private authentication = authentication;
@@ -137,14 +180,49 @@ export default class SidesliderContentEdit extends Vue {
     theme: 'light',
     content: this.$t('供proxy文件分发临时使用后台定期进行清理建议预留至少磁盘空间'),
   };
+  // agent包版本弹框参数
+  public versionsDialog = {
+    show: false,
+    type: 'by_system_arch',
+    title: this.$t('选择 Agent 版本'),
+    versions: [] as string[],
+    os_type: 'linux',
+    project: 'gse_proxy'
+  };
+  // 选择agent版本
+  public chooseAgentVersion(info: {
+    version: string;
+  }) {
+    const { version = '' } = info;
+    this.versionsDialog.show = true;
+    this.versionsDialog.versions = version ? [version] : [];
+  }
+  // 回填agent版本
+  public updateAgentVersion(info: any) {
+    this.proxyData.version = info.version;
+  }
+  // 获取接入点列表
+  private get apList() {
+    return CloudStore.apList;
+  }
+  // 判断当前agent是否打开且接入点是v2版本且是重载和重装
+  public get AgentPkgShow(): Boolean {
+    return MainStore.ENABLE_AGENT_PACKAGE_UI
+      && this.apList.find(data => data.id === this.proxyData.ap_id)?.gse_version === 'V2'
+      && ['reinstall', 'reload'].includes(this.editType);
+  }
   private proxyData: Dictionary = {};
-  private rules = {
-    outerIp: [reguRequired, reguIPMixins],
-    loginIp: [reguRequired, reguIPMixins],
-    port: [reguRequired, reguPort],
-    account: [reguRequired],
-    speedLimit: [reguFnMinInteger(1)],
-    path: [reguRequired, reguFnSysPath({ minLevel: 2 })],
+  private get rules() {
+    const commonRules = {
+      outerIp: [reguRequired, reguIPMixins],
+      loginIp: [reguRequired, reguIPMixins],
+      port: [reguRequired, reguPort],
+      account: [reguRequired],
+      speedLimit: [reguFnMinInteger(1)],
+      path: [reguRequired, reguFnSysPath({ minLevel: 2 })],
+      version: this.AgentPkgShow ? [reguRequired] : [],
+    };
+    return commonRules;
   };
   private loading = false;
   private showErrMsg = false;
@@ -157,8 +235,11 @@ export default class SidesliderContentEdit extends Vue {
   }
 
   @Watch('basic', { immediate: true })
-  public handlebasicChange(data: IProxyDetail) {
+  public async handlebasicChange(data: IProxyDetail) {
     this.proxyData = JSON.parse(JSON.stringify(data));
+    if (!this.apList.length) {
+      await CloudStore.getApList();
+    }
   }
   @Watch('proxyData', { deep: true })
   public handleFormChange() {
@@ -196,13 +277,34 @@ export default class SidesliderContentEdit extends Vue {
       if (this.proxyData.bt_speed_limit) {
         params.bt_speed_limit = this.proxyData.bt_speed_limit;
       }
-      params.peer_exchange_switch_for_agent = 0;
+      params.peer_exchange_switch_for_agent = Number(this.proxyData.peer_exchange_switch_for_agent || false);
+      // 重装和重载时候才允许编辑接口修改agent版本信息
+      ['reinstall', 'reload'].includes(this.editType) && this.proxyData.version && (params.version = this.proxyData.version);
       const result = await CloudStore.updateHost(params);
       if (result) {
-        this.$bkMessage({
-          theme: 'success',
-          message: this.$t('编辑成功如需加载最新配置请执行proxy重载'),
-        });
+        const agent_setup_info = {
+          choice_version_type: 'by_host',
+          version_map_list: [
+            {
+              bk_host_id: this.proxyData.bk_host_id as number,
+              version: this.proxyData.version as string,
+            },
+          ],
+        };
+        if (this.editType === 'reinstall') {
+          // 重装
+          this.handleReinstall(this.basic, agent_setup_info);
+        } else if (this.editType === 'reload') {
+          // 重载
+          const basicInfo = JSON.parse(JSON.stringify(this.basic));
+          Object.assign(basicInfo, params);
+          this.handleReload(basicInfo, agent_setup_info);
+        } else {
+          this.$bkMessage({
+            theme: 'success',
+            message: this.$t('编辑成功如需加载最新配置请执行proxy重载'),
+          });
+        }
         params.re_certification = false;
         this.handleChange(params);
         this.handleCancel();
@@ -210,6 +312,57 @@ export default class SidesliderContentEdit extends Vue {
       this.loading = false;
     });
   }
+  // 跳转到代理重装和重载页面
+  public handleRouterPush(name: string, params: Dictionary, type = 'push') {
+    (this.$router as Dictionary)[type]({ name, params });
+  }
+  /**
+   * 重装主机
+  */
+  public async handleReinstall(row: IProxyDetail, agent_setup_info: {}) {
+    const result = await CloudStore.operateJob({
+      job_type: 'REINSTALL_PROXY',
+      bk_host_id: [row.bk_host_id],
+      agent_setup_info,
+    });
+    if (result.job_id) {
+      this.handleRouterPush('taskDetail', { taskId: result.job_id });
+    }
+  }
+  /**
+   * 重载配置
+  */
+  public async handleReload(row: Dictionary, agent_setup_info: {}) {
+    let paramKey = [
+      'ap_id', 'bk_biz_id', 'bk_cloud_id', 'inner_ip', 'inner_ipv6',
+      'is_manual', 'peer_exchange_switch_for_agent', 'bk_host_id', 'enable_compression', 'version'
+    ];
+    if (!this.$DHCP) {
+      paramKey = paramKey.filter(key => !DHCP_FILTER_KEYS.includes(key));
+    }
+    const ipKeys = ['outer_ip']; // 没做区分展示的ip
+    const paramExtraKey = ['bt_speed_limit', 'login_ip', 'data_ip'];
+    const copyRow = Object.keys(row).reduce((obj: Dictionary, item) => {
+      if (paramKey.includes(item)) {
+        obj[item] = item === 'peer_exchange_switch_for_agent' ? row[item] + 0 : row[item];
+      }
+      if (paramExtraKey.includes(item) && row[item]) {
+        obj[item] = row[item];
+      }
+      return obj;
+    }, { os_type: 'LINUX' });
+    ipKeys.forEach((key) => {
+      if (this.$DHCP) {
+        Object.assign(copyRow, this.$setIpProp(key, row));
+      } else {
+        copyRow[key] = row[key];
+      }
+    });
+    const res = await CloudStore.setupProxy({ params: { job_type: 'RELOAD_PROXY', hosts: [copyRow], agent_setup_info } });
+    if (res?.job_id) {
+      this.handleRouterPush('taskDetail', { taskId: res.job_id });
+    }
+  }
   @Emit('change')
   private handleChange(params: any) {
     return params;
@@ -238,6 +391,7 @@ export default class SidesliderContentEdit extends Vue {
 </script>
 <style lang="postcss" scoped>
 @import "@/css/mixins/nodeman.css";
+@import "@/css/variable.css";
 
 >>> .bk-form.bk-form-vertical .bk-form-item+.bk-form-item {
   margin-top: 12px;
@@ -274,5 +428,70 @@ export default class SidesliderContentEdit extends Vue {
       width: 100%;
     }
   }
+  .version-type {
+    width: 100%;
+    >>> .bk-form-content {
+      margin-left: 0!important;
+    }
+    &.is-error .versions-choose-btn:not(:hover) {
+      border-color: #ff5656;
+    }
+  }
+  .versions-choose-btn {
+    width: 100%;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed #c4c6cc;
+    border-radius: 2px;
+    background-color: #fafbfd;
+    cursor: pointer;
+    .nc-plus-line {
+      margin-right: 6px;
+    }
+    .nodeman-icon {
+      color: #979ba5;
+    }
+    &:hover {
+      color: $primaryFontColor;
+      border-color: $primaryFontColor;
+    }
+    &:hover .nodeman-icon {
+      color: $primaryFontColor;
+    }
+  }
+  .versions-choose-detail {
+    border-style: solid;
+    .prefix-area {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 30px;
+      border-right: 1px solid #c4c6cc;
+      background-color: #fafbfd;
+    }
+    .version-text {
+      padding: 0 8px;
+      flex: 1;
+      color: #63656e;
+      background-color: #fff;
+    }
+    .versions-choose-icon {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      display: none;
+    }
+    &:hover {
+      .prefix-area {
+        background-color: #e1ecff;
+        border-color: $primaryFontColor;
+      }
+      .versions-choose-icon {
+        display: inline-block;
+      }
+    }
+  }
 }
 </style>
diff --git a/frontend/src/views/cloud/components/sideslider-content.vue b/frontend/src/views/cloud/components/sideslider-content.vue
index ccf99ff05..e8c25799b 100644
--- a/frontend/src/views/cloud/components/sideslider-content.vue
+++ b/frontend/src/views/cloud/components/sideslider-content.vue
@@ -91,7 +91,9 @@ export default class SidesliderCcontent extends Vue {
   @Watch('basic', { immediate: true })
   public async handlebasicChange(data: Dictionary) {
     const ipKeys: IProxyIpKeys[] = ['inner_ip', 'outer_ip', 'login_ip'];
-    const basicInfo = detailConfig.map((config: Dictionary) => {
+    // 设置判断当前接入点为v2版本的布尔值
+    const isApV2 = this.apList?.find(item => item.id === data.ap_id)?.gse_version === 'V2'
+    let basicInfo = detailConfig.map((config: Dictionary) => {
       if (config.prop === 'auth_type') {
         config.authType = data.auth_type || 'PASSWORD';
         config.value = config.authType === 'TJJ_PASSWORD' ? this.$t('自动拉取') : '';
@@ -102,6 +104,10 @@ export default class SidesliderCcontent extends Vue {
       }
       return JSON.parse(JSON.stringify(config));
     });
+    // 接入点不为v2时，不显示版本信息
+    if (!isApV2) {
+      basicInfo = basicInfo.filter(item => item.prop !== 'version');
+    };
     this.basicInfo.splice(0, this.basicInfo.length, ...basicInfo);
   }
 
diff --git a/frontend/src/views/cloud/config/netTableConfig.ts b/frontend/src/views/cloud/config/netTableConfig.ts
index c2fcf1853..d296bbb25 100644
--- a/frontend/src/views/cloud/config/netTableConfig.ts
+++ b/frontend/src/views/cloud/config/netTableConfig.ts
@@ -2,12 +2,14 @@ import { authentication, DHCP_FILTER_KEYS, getDefaultConfig } from '@/config/con
 import { ISetupHead, ISetupRow } from '@/types';
 import { osDirReplace, reguFnMinInteger, reguFnSysPath, reguIp, reguIPMixins, reguIPv6 } from '@/common/form-check';
 import { splitCodeArr } from '@/common/regexp';
+import { MainStore } from '@/store';
 
 export const parentHead = [
   { label: '主机IPTip', prop: 'host_ip', type: 'text', colspan: 0, required: true, tips: 'proxySetupHostIp' },
   { label: '主机属性', prop: 'host_attr', type: 'text', colspan: 0 },
   { label: '登录信息', prop: 'login_info', type: 'text', tips: 'proxySetupLoginInfo', colspan: 0 },
   { label: '传输信息', prop: 'trans_info', type: 'text', colspan: 0 },
+  { label: '安装信息', prop: 'install_info', type: 'text', colspan: 0 },
   { label: '', prop: '', type: 'operate' },
 ];
 
@@ -213,6 +215,22 @@ const config: ISetupHead[] = [
     manualProp: true,
     parentProp: 'trans_info',
   },
+  {
+    label: 'Proxy包版本',
+    prop: 'version',
+    type: 'choose',
+    required: true,
+    noRequiredMark: false,
+    placeholder: window.i18n.t('请选择'),
+    batch: true,
+    default: '',
+    width: MainStore.language === 'en' ? 170 : 120,
+    manualProp: true,
+    parentProp: 'install_info',
+    extraInfo: {
+      pkgType: 'gse_proxy',
+    }
+  },
   {
     label: '',
     prop: '',
@@ -233,6 +251,7 @@ export const setupDiffConfigs = {
   bt_speed_limit: {
     width: 160,
   },
+
   operate: {
     local: true,
   },
diff --git a/frontend/src/views/cloud/config/proxy-detail-config.js b/frontend/src/views/cloud/config/proxy-detail-config.js
index d2c2526e8..8781b56bf 100644
--- a/frontend/src/views/cloud/config/proxy-detail-config.js
+++ b/frontend/src/views/cloud/config/proxy-detail-config.js
@@ -75,6 +75,13 @@ const config = [
     type: 'tag-switch',
     readonly: true,
   },
+  // v2版本展示agent版本信息
+  {
+    prop: 'version',
+    label: window.i18n.t('agent版本'),
+    type: 'text',
+    readonly: true,
+  },
 ];
 export const detailConfig = $DHCP
   ? config
diff --git a/frontend/src/views/plugin/plugin-list/plugin-list-table.vue b/frontend/src/views/plugin/plugin-list/plugin-list-table.vue
index 2544d29c8..eeae9b73b 100644
--- a/frontend/src/views/plugin/plugin-list/plugin-list-table.vue
+++ b/frontend/src/views/plugin/plugin-list/plugin-list-table.vue
@@ -183,7 +183,7 @@
         slot="empty"
         :delay="tableLoading"
         :type="tableEmptyType"
-        @empty-clear="emptySearchClear"
+        @empty-clear="emptySearchClear()"
         @empty-refresh="emptyRefresh" />
     </bk-table>
     <node-detail-slider
diff --git a/frontend/src/views/plugin/plugin-package/plugin-package-table.vue b/frontend/src/views/plugin/plugin-package/plugin-package-table.vue
index 679dcfb15..4ec10c14a 100644
--- a/frontend/src/views/plugin/plugin-package/plugin-package-table.vue
+++ b/frontend/src/views/plugin/plugin-package/plugin-package-table.vue
@@ -134,7 +134,7 @@
         slot="empty"
         :delay="isLoading"
         :type="tableEmptyType"
-        @empty-clear="emptySearchClear"
+        @empty-clear="emptySearchClear()"
         @empty-refresh="emptyRefresh" />
     </bk-table>
   </section>
diff --git a/frontend/src/views/plugin/plugin-rule/plugin-rule-list/plugin-rule-table.vue b/frontend/src/views/plugin/plugin-rule/plugin-rule-list/plugin-rule-table.vue
index 26aadd654..e41a9bdb4 100644
--- a/frontend/src/views/plugin/plugin-rule/plugin-rule-list/plugin-rule-table.vue
+++ b/frontend/src/views/plugin/plugin-rule/plugin-rule-list/plugin-rule-table.vue
@@ -104,7 +104,7 @@
           <FlexibleTag
             :ref="`flexibleTagRef${$index}`"
             v-if="row.bk_biz_scope && row.bk_biz_scope.length"
-            id-key="bk_biz_name"
+            lable-key="bk_biz_name"
             :list="row.bk_biz_scope">
           </FlexibleTag>
           <span v-else>--</span>
@@ -241,7 +241,7 @@
         slot="empty"
         :type="tableEmptyType"
         :delay="tableLoading"
-        @empty-clear="emptySearchClear"
+        @empty-clear="emptySearchClear()"
         @empty-refresh="emptyRefresh" />
     </bk-table>
   </section>
diff --git a/frontend/src/views/task/task-detail-table.vue b/frontend/src/views/task/task-detail-table.vue
index 9d147c29f..d8c025abf 100644
--- a/frontend/src/views/task/task-detail-table.vue
+++ b/frontend/src/views/task/task-detail-table.vue
@@ -141,7 +141,7 @@
         slot="empty"
         :type="tableEmptyType"
         :delay="loading"
-        @empty-clear="emptySearchClear"
+        @empty-clear="emptySearchClear()"
         @empty-refresh="emptyRefresh" />
     </bk-table>
     <TaskDetailSlider
diff --git a/frontend/src/views/task/task-list-table.vue b/frontend/src/views/task/task-list-table.vue
index b1d3e5f8f..a369c0852 100644
--- a/frontend/src/views/task/task-list-table.vue
+++ b/frontend/src/views/task/task-list-table.vue
@@ -106,7 +106,7 @@
           slot="empty"
           :type="tableEmptyType"
           :delay="loading"
-          @empty-clear="emptySearchClear"
+          @empty-clear="emptySearchClear()"
           @empty-refresh="emptyRefresh" />
       </bk-table>
     </section></div>
diff --git a/frontend/src/vue-proto.d.ts b/frontend/src/vue-proto.d.ts
index 7603508f2..782c2bfab 100644
--- a/frontend/src/vue-proto.d.ts
+++ b/frontend/src/vue-proto.d.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { VNode } from 'vue';
 import { TranslateResult } from 'vue-i18n';
 import 'vue-router';
 import { INodemanHttp } from './types';
@@ -24,6 +24,7 @@ declare module 'vue/types/vue' {
     messageInfo: (message: string, delay?: number) => {}
     $bkInfo: (options: {
       title: string | TranslateResult
+      subHeader?: string | TranslateResult | VNode
       subTitle?: string | TranslateResult
       width?: number | string
       type?: string,
@@ -41,8 +42,11 @@ declare module 'vue/types/vue' {
     }
     $initIpProp: (obj: Dictionary, keys: string[]) => void
     $setIpProp:  (key: string, val: Dictionary) => any
-    $DHCP:  boolean
+    $DHCP: boolean
     $http: INodemanHttp
+    emptySearchClear: () => void
+    emptyRefresh: () => void
+    filterEmpty: (any) => string
   }
 }
 
diff --git a/support-files/bkpkg/bk_nodeman.yaml b/support-files/bkpkg/bk_nodeman.yaml
index 88e548ffd..53a151638 100644
--- a/support-files/bkpkg/bk_nodeman.yaml
+++ b/support-files/bkpkg/bk_nodeman.yaml
@@ -7,4 +7,4 @@ relations:
 - rationale: 节点管理API
   requires:
   - bknodeman=__SAME_VERSION__
-bkimports:
\ No newline at end of file
+bkimports:
diff --git a/support-files/bkpkg/bknodeman.yaml b/support-files/bkpkg/bknodeman.yaml
index ef8ecc043..a16093487 100644
--- a/support-files/bkpkg/bknodeman.yaml
+++ b/support-files/bkpkg/bknodeman.yaml
@@ -1,4 +1,3 @@
-
 bkpkg: v1
 name: bknodeman
 type: file+tar

From 3f2b0dfb72e444c4596144e086296f8c7cd9fc29 Mon Sep 17 00:00:00 2001
From: hyunfa <1598047833@qq.com>
Date: Mon, 11 Nov 2024 20:29:18 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:Agent=E5=8C=85=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91--story=3D119532566=20Agent=E5=8C=85=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=20#=20Reviewed,=20transaction=20id:=2023517?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit