diff --git a/bcs-services/bcs-bscp/ui/src/api/client.ts b/bcs-services/bcs-bscp/ui/src/api/client.ts
index f857a0d9c2..4ce106bf0d 100644
--- a/bcs-services/bcs-bscp/ui/src/api/client.ts
+++ b/bcs-services/bcs-bscp/ui/src/api/client.ts
@@ -160,8 +160,8 @@ export const getClientCommonlyUsedNameCheck = (bizId: string, appId: number, nam
  * @param ids 客户端ID
  * @returns
  */
-export const retryClients = (bizId: string, appId: number, ids: number[]) =>
-  http.post(`/config/biz/${bizId}/apps/${appId}/clients/retry`, { client_ids: ids, all: false });
+export const retryClients = (bizId: string, appId: number, ids: number[], exclusion_operation: boolean) =>
+  http.post(`/config/biz/${bizId}/apps/${appId}/clients/retry`, { client_ids: ids, all: false, exclusion_operation });
 
 /**
  *  获取集群列表
diff --git a/bcs-services/bcs-bscp/ui/src/api/config.ts b/bcs-services/bcs-bscp/ui/src/api/config.ts
index 7228993aec..31e9d4d577 100644
--- a/bcs-services/bcs-bscp/ui/src/api/config.ts
+++ b/bcs-services/bcs-bscp/ui/src/api/config.ts
@@ -415,10 +415,20 @@ export const updateBoundTemplateVersion = (
  * @returns
  */
 export const deleteBoundPkg = (bizId: string, appId: number, bindingId: number, template_set_ids: number[]) =>
-  http.delete(`/config/biz/${bizId}/apps/${appId}/template_bindings/${bindingId}/template_sets`, {
+  http.delete(`/config/biz/${bizId}/apps/${appId}/template_bindings/${bindingId}/template_set`, {
     params: { template_set_ids: template_set_ids.join(',') },
   });
 
+/**
+ * 删除服务下绑定的模板套餐
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @param id 配置ID
+ * @returns
+ */
+export const deleteCurrBoundPkg = (bizId: string, appId: number, id: number) =>
+  http.delete(`/config/biz/${bizId}/apps/${appId}/template_set/${id}`);
+
 /**
  * 导入非模板配置文件压缩包
  * @param biz_id 业务ID
diff --git a/bcs-services/bcs-bscp/ui/src/api/script.ts b/bcs-services/bcs-bscp/ui/src/api/script.ts
index 26f66f4026..b30486fb60 100644
--- a/bcs-services/bcs-bscp/ui/src/api/script.ts
+++ b/bcs-services/bcs-bscp/ui/src/api/script.ts
@@ -61,10 +61,13 @@ export const deleteScript = (biz_id: string, id: number) =>
  * 批量删除脚本
  * @param biz_id 空间ID
  * @param ids 脚本ID列表
+ * @param exclusion_operation 是否跨页
  * @returns
  */
-export const batchDeleteScript = (biz_id: string, ids: number[]) =>
-  http.post(`/config/biz/${biz_id}/hooks/batch_delete`, { force: true, ids }).then((res) => res.data);
+export const batchDeleteScript = (biz_id: string, ids: number[], exclusion_operation: boolean) =>
+  http
+    .post(`/config/biz/${biz_id}/hooks/batch_delete`, { force: false, ids, exclusion_operation })
+    .then((res) => res.data);
 
 /**
  * 获取脚本标签列表
diff --git a/bcs-services/bcs-bscp/ui/src/api/template.ts b/bcs-services/bcs-bscp/ui/src/api/template.ts
index e8b466fa10..2e9744ac18 100644
--- a/bcs-services/bcs-bscp/ui/src/api/template.ts
+++ b/bcs-services/bcs-bscp/ui/src/api/template.ts
@@ -300,11 +300,7 @@ export const downloadTemplateContent = (biz_id: string, templateSpaceId: number,
  * @param signature 文件内容的SHA256值
  * @returns
  */
-export const getTemplateUploadFileIsExist = (
-  bizId: string,
-  templateSpaceId: number,
-  signature: string,
-) =>
+export const getTemplateUploadFileIsExist = (bizId: string, templateSpaceId: number, signature: string) =>
   http
     .get(`/biz/${bizId}/content/metadata`, {
       headers: {
@@ -319,11 +315,17 @@ export const getTemplateUploadFileIsExist = (
  * @param biz_id 业务ID
  * @param template_space_id 空间ID
  * @param template_ids 模板ID列表
+ * @param exclusion_operation 是否跨页全选
  * @returns
  */
-export const deleteTemplate = (biz_id: string, template_space_id: number, template_ids: number[]) =>
+export const deleteTemplate = (
+  biz_id: string,
+  template_space_id: number,
+  template_ids: number[],
+  exclusion_operation: boolean,
+) =>
   http.delete(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates`, {
-    params: { template_ids: template_ids.join(',') },
+    params: { template_ids: template_ids.join(','), exclusion_operation },
   });
 
 /**
@@ -341,6 +343,9 @@ export const getTemplatesDetailByIds = (biz_id: string, ids: number[]) =>
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param template_set_ids 模板套餐列表
+ * @param exclusion_operation 是否跨页全选
+ * @param template_set_id 正在操作的套餐id，全部套餐和未指定套餐传0
+ * @param no_set_specified 是否未指定套餐
  * @returns
  */
 export const addTemplateToPackage = (
@@ -348,11 +353,19 @@ export const addTemplateToPackage = (
   template_space_id: number,
   template_ids: number[],
   template_set_ids: number[],
+  exclusion_operation: boolean,
+  template_set_id: number | string,
+  no_set_specified: boolean,
 ) =>
-  http.post(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/add_to_template_sets`, {
-    template_ids,
-    template_set_ids,
-  });
+  http.post(
+    `/config/biz/${biz_id}/template_spaces/${template_space_id}/template_set/${template_set_id}/templates/add_to_template_sets`,
+    {
+      template_set_ids,
+      template_ids,
+      exclusion_operation,
+      no_set_specified,
+    },
+  );
 
 /**
  * 将模版移出套餐(多个模板移出多个套餐)
@@ -360,6 +373,9 @@ export const addTemplateToPackage = (
  * @param template_space_id 空间ID
  * @param template_id 模板ID
  * @param template_set_ids 模板套餐列表
+ * @param exclusion_operation 是否跨页全选
+ * @param template_set_id 正在操作的套餐id，全部套餐和未指定套餐传0
+ * @param no_set_specified 是否未指定套餐
  * @returns
  */
 export const moveOutTemplateFromPackage = (
@@ -367,11 +383,17 @@ export const moveOutTemplateFromPackage = (
   template_space_id: number,
   template_ids: number[],
   template_set_ids: number[],
+  exclusion_operation: boolean,
+  template_set_id: number | string,
 ) =>
-  http.post(`/config/biz/${biz_id}/template_spaces/${template_space_id}/templates/delete_from_template_sets`, {
-    template_ids,
-    template_set_ids,
-  });
+  http.post(
+    `/config/biz/${biz_id}/template_spaces/${template_space_id}/template_set/${template_set_id}/templates/delete_from_template_sets`,
+    {
+      template_ids,
+      template_set_ids,
+      exclusion_operation,
+    },
+  );
 
 /**
  * 查询单个模板被套餐引用详情
@@ -699,10 +721,16 @@ export const importTemplateBatchAdd = (
  * @param biz_id 业务ID
  * @param template_space_id 空间id
  * @param configData 配置列表
+ * @param exclusion_operation // 是否跨页
+ * @param template_set_id // 正在操作的套餐id，全部套餐和未指定传0
+ * @param no_set_specified // 是否未指定套餐
  * @returns
  */
 export const batchEditTemplatePermission = (biz_id: string, query: any) =>
-  http.post(`/config/biz/${biz_id}/templates/batch_update_templates_permissions`, query);
+  http.post(
+    `/config/biz/${biz_id}/template_spaces/${query.template_space_id}/template_set/${query.template_set_id}/templates/batch_update_templates_permissions`,
+    query,
+  );
 
 /**
  * 获取配置模板配置项元信息
diff --git a/bcs-services/bcs-bscp/ui/src/api/variable.ts b/bcs-services/bcs-bscp/ui/src/api/variable.ts
index 7ef1dd6ebf..afd2f5dd20 100644
--- a/bcs-services/bcs-bscp/ui/src/api/variable.ts
+++ b/bcs-services/bcs-bscp/ui/src/api/variable.ts
@@ -46,9 +46,10 @@ export const deleteVariable = (biz_id: string, template_variable_id: number) =>
  * 批量删除变量
  * @param bizId 业务ID
  * @param ids 变量ID列表
+ * @param exclusion_operation 是否跨页
  */
-export const batchDeleteVariable = (biz_id: string, ids: number[]) =>
-  http.post(`/config/biz/${biz_id}/template_variables/batch_delete`, { ids });
+export const batchDeleteVariable = (biz_id: string, ids: number[], exclusion_operation: boolean) =>
+  http.post(`/config/biz/${biz_id}/template_variables/batch_delete`, { ids, exclusion_operation });
 
 /**
  * 获取未命名版本服务变量列表
diff --git a/bcs-services/bcs-bscp/ui/src/components/across-check-table-tip.vue b/bcs-services/bcs-bscp/ui/src/components/across-check-table-tip.vue
new file mode 100644
index 0000000000..652d794097
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/components/across-check-table-tip.vue
@@ -0,0 +1,89 @@
+<template>
+  <div v-show="selectType !== CheckType.Uncheck" class="selections-style">
+    {{ t('已选择', { count: isFullDataMode ? selectionsLength : showSelectedLength }) }},
+    <span
+      class="checked-em"
+      v-show="(isFullDataMode ? selectionsLength : showSelectedLength) < dataLength"
+      @click="selectTypeChange">
+      {{ t('选择所有', { count: dataLength }) }}
+    </span>
+    <span
+      class="checked-em"
+      v-show="(isFullDataMode ? selectionsLength : showSelectedLength) === dataLength"
+      @click="clearSelection">
+      {{ t('取消选择所有数据') }}
+    </span>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import CheckType from '../../types/across-checked';
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const props = withDefaults(
+    defineProps<{
+      dataLength: number;
+      selectionsLength: number;
+      isFullDataMode: boolean;
+      selectType: number;
+      crossPageSelect: boolean;
+      handleSelectTypeChange: Function;
+      handleClearSelection: Function;
+    }>(),
+    {
+      dataLength: 0,
+      selectionsLength: 0,
+      isFullDataMode: false,
+      selectType: CheckType.Uncheck,
+      crossPageSelect: true,
+      handleSelectTypeChange: () => {},
+      handleClearSelection: () => {},
+    },
+  );
+  // 已选择数据长度展示
+  const showSelectedLength = computed(() => {
+    const { selectType, selectionsLength, dataLength } = props;
+    return [CheckType.HalfChecked, CheckType.Checked].includes(selectType)
+      ? selectionsLength
+      : dataLength - selectionsLength;
+  });
+
+  // 根据是否提供全选/跨页全选功能，判断当前页全选/跨页全选
+  const selectTypeChange = () => {
+    if (props.crossPageSelect) {
+      // 跨页全选
+      props.handleSelectTypeChange(CheckType.AcrossChecked);
+    } else {
+      // 当前页全选
+      props.handleSelectTypeChange(CheckType.Checked);
+    }
+  };
+  const clearSelection = () => {
+    props.handleClearSelection();
+  };
+</script>
+<style lang="scss" scoped>
+  .selections-style {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 30px;
+    font-size: 12px;
+    color: #63656e;
+    background: #ebecf0;
+    .checked-number {
+      padding: 0 5px;
+      font-weight: 700;
+    }
+    .checked-em {
+      margin-left: 5px;
+      color: #3a84ff;
+      cursor: pointer;
+      &:hover {
+        color: #699df4;
+      }
+    }
+  }
+</style>
diff --git a/bcs-services/bcs-bscp/ui/src/components/across-check.vue b/bcs-services/bcs-bscp/ui/src/components/across-check.vue
new file mode 100644
index 0000000000..aae99053cd
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/components/across-check.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="check">
+    <bk-checkbox
+      v-model="localValue"
+      :indeterminate="indeterminate"
+      :class="{
+        'across-all-check': localValue === CheckType.AcrossChecked,
+        'half-indeterminate': localValue === CheckType.HalfAcrossChecked,
+      }"
+      :disabled="disabled"
+      :true-label="localValue === CheckType.AcrossChecked ? CheckType.AcrossChecked : CheckType.Checked"
+      :false-label="setCheckBoxStatus"
+      @change="handleCheckChange">
+    </bk-checkbox>
+    <bk-popover
+      ref="popoverRef"
+      theme="light"
+      trigger="click"
+      placement="bottom"
+      :arrow="false"
+      :offset="{ mainAxis: 10, crossAxis: 30 }"
+      :disabled="disabled"
+      @after-show="isDropDownShow = true"
+      @after-hidden="isDropDownShow = false">
+      <angle-down
+        v-show="crossPageSelect"
+        :class="['check-icon', { 'icon-angle-up': isDropDownShow }, { disabled: disabled }]" />
+      <template #content>
+        <ul class="dropdown-ul">
+          <li
+            class="dropdown-li"
+            v-for="item in checkTypeList"
+            :key="item.id"
+            :class="{ active: localValue === item.id }"
+            @click="handleCheckAll(item.id)">
+            {{ item.name }}
+          </li>
+        </ul>
+      </template>
+    </bk-popover>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue';
+  import CheckType from '../../types/across-checked';
+  import { AngleDown } from 'bkui-vue/lib/icon';
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const props = withDefaults(
+    defineProps<{
+      value: number;
+      disabled: boolean;
+      crossPageSelect: boolean;
+    }>(),
+    {
+      value: CheckType.Uncheck,
+      disabled: false,
+      crossPageSelect: true,
+    },
+  );
+
+  const emits = defineEmits(['change']);
+
+  const popoverRef = ref();
+  const isDropDownShow = ref(false);
+  const localValue = ref(0);
+  const checkTypeList = ref([
+    {
+      id: CheckType.Checked,
+      name: t('全选'),
+    },
+    {
+      id: CheckType.AcrossChecked,
+      name: t('跨页全选'),
+    },
+  ]);
+
+  // 跨页半选和跨页全选
+  // const allChecked = computed(() => [CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(localValue.value));
+  // 当前页半选和跨页半选
+  const indeterminate = computed(() => [CheckType.HalfChecked, CheckType.HalfAcrossChecked].includes(localValue.value));
+  // 当前页全选和跨页全选
+  // const isChecked = computed(() => [CheckType.Checked, CheckType.AcrossChecked].includes(localValue.value));
+
+  const setCheckBoxStatus = computed(() => {
+    const status = props.value;
+    switch (status) {
+      case CheckType.HalfAcrossChecked:
+        return CheckType.HalfAcrossChecked; // 跨页半选
+      case CheckType.HalfChecked:
+        return CheckType.HalfChecked; // 当前页半选
+      case CheckType.Checked:
+      case CheckType.AcrossChecked:
+      default:
+        return CheckType.Uncheck;
+    }
+  });
+
+  watch(
+    () => props.value,
+    (newV) => {
+      localValue.value = newV;
+    },
+  );
+
+  const handleCheckChange = (id: number) => {
+    localValue.value = id;
+    emits('change', id);
+  };
+  const handleCheckAll = (id: number) => {
+    handleCheckChange(id);
+    popoverRef.value.hide();
+  };
+</script>
+<style lang="scss" scoped>
+  .check {
+    text-align: left;
+    .across-all-check {
+      :deep(.bk-checkbox-input) {
+        background-color: #fff;
+        &::after {
+          content: '';
+          border-color: #3a84ff;
+        }
+      }
+    }
+    .half-indeterminate {
+      :deep(.bk-checkbox-input) {
+        background-color: #fff;
+        &::after {
+          content: '';
+          background-color: #3a84ff;
+        }
+      }
+    }
+    &-icon {
+      margin-left: 5px;
+      font-size: 20px;
+      cursor: pointer;
+      color: #63656e;
+      &.disabled {
+        display: none;
+        // color: #c4c6cc;
+      }
+      &.icon-angle-up {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  .dropdown-ul {
+    margin: -12px;
+    font-size: 12px;
+    .dropdown-li {
+      padding: 0 16px;
+      min-width: 68px;
+      font-size: 12px;
+      text-align: center;
+      line-height: 32px;
+      cursor: pointer;
+      &:hover {
+        background: #e5efff;
+        color: #3a84ff;
+      }
+      &.active {
+        background: #e5efff;
+        color: #3a84ff;
+      }
+    }
+  }
+</style>
diff --git a/bcs-services/bcs-bscp/ui/src/components/across-checkbox.vue b/bcs-services/bcs-bscp/ui/src/components/across-checkbox.vue
new file mode 100644
index 0000000000..b9c75f7884
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/components/across-checkbox.vue
@@ -0,0 +1,73 @@
+<template>
+  <span class="custom-checkbox-wrap">
+    <input
+      type="checkbox"
+      :checked="checked"
+      :disabled="disabled"
+      @change="handleInputChange"
+      class="custom-checkbox" />
+  </span>
+</template>
+
+<script lang="ts" setup>
+  const props = withDefaults(
+    defineProps<{
+      checked: boolean;
+      disabled?: boolean;
+      handleChange: Function;
+    }>(),
+    {
+      checked: false,
+      disabled: false,
+      handleChange: () => {},
+    },
+  );
+
+  const handleInputChange = () => {
+    props.handleChange();
+  };
+</script>
+
+<style lang="scss" scoped>
+  .custom-checkbox-wrap {
+    position: relative;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: sub;
+    .custom-checkbox {
+      position: relative;
+      appearance: none;
+      width: 100%;
+      height: 100%;
+      border: 1px solid #979ba5;
+      border-radius: 2px;
+      cursor: pointer;
+      transition: all 0.1s;
+      &:checked {
+        background-color: #3a84ff;
+        border-color: #3a84ff;
+        // color: red;
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 4px;
+          height: 8px;
+          border: 2px solid #fff;
+          border-top: 0;
+          border-left: 0;
+
+          transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
+          transform-origin: center;
+        }
+      }
+      &:disabled {
+        border-color: #dcdee5;
+        background-color: #fafbfd;
+        cursor: not-allowed;
+      }
+    }
+  }
+</style>
diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
index 5f1cd9aa56..829f537969 100644
--- a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
+++ b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
@@ -1011,4 +1011,10 @@ export default {
   '组件类型 / 版本分布': 'Component type / Version distribution',
   下钻: 'Drill down',
   总和: 'Total',
+
+  // 跨页全选
+  跨页全选: 'AcrossChecked',
+  已选择: '{count} item selected',
+  选择所有: 'select all {count} items',
+  取消选择所有数据: 'Unselect all items',
 };
diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
index 339923d3b3..5a68f791fd 100644
--- a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
+++ b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -1016,4 +1016,10 @@ export default {
   '组件类型 / 版本分布': '组件类型 / 版本分布',
   下钻: '下钻',
   总和: '总和',
+
+  // 跨页全选
+  跨页全选: '跨页全选',
+  已选择: '已选择 {count} 条数据',
+  选择所有: '选择所有 {count} 条',
+  取消选择所有数据: '取消选择所有数据',
 };
diff --git a/bcs-services/bcs-bscp/ui/src/store/template.ts b/bcs-services/bcs-bscp/ui/src/store/template.ts
index 27087bad42..36c330fa7a 100644
--- a/bcs-services/bcs-bscp/ui/src/store/template.ts
+++ b/bcs-services/bcs-bscp/ui/src/store/template.ts
@@ -24,6 +24,10 @@ export default defineStore('template', () => {
   const versionListPageShouldOpenView = ref(false);
   // 置顶id
   const topIds = ref<number[]>([]);
+  // 表格是否跨页选择
+  const isAcrossChecked = ref(false);
+  // 表格数据总数
+  const dataCount = ref(0);
 
   return {
     templateSpaceList,
@@ -36,5 +40,7 @@ export default defineStore('template', () => {
     versionListPageShouldOpenEdit,
     versionListPageShouldOpenView,
     topIds,
+    isAcrossChecked,
+    dataCount,
   };
 });
diff --git a/bcs-services/bcs-bscp/ui/src/utils/hooks/use-table-acrosscheck-common.ts b/bcs-services/bcs-bscp/ui/src/utils/hooks/use-table-acrosscheck-common.ts
new file mode 100644
index 0000000000..55e18ceb5b
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/utils/hooks/use-table-acrosscheck-common.ts
@@ -0,0 +1,185 @@
+// useTableAcrossCheckCommon.ts
+import { h, Ref, ref } from 'vue';
+import AcrossCheck from '../../components/across-check.vue';
+import TableTip from '../../components/across-check-table-tip.vue';
+import CheckType from '../../../types/across-checked';
+
+export interface IAcrossCheckConfig {
+  dataSource: Ref<number | any[]>;
+  curPageData: Ref<any[]>;
+  rowKey?: string[]; // 每行数据唯一标识
+  crossPageSelect: Ref<boolean>;
+}
+export default function useTableAcrossCheckCommon({
+  dataSource,
+  curPageData,
+  rowKey = ['name', 'id'],
+  crossPageSelect,
+}: IAcrossCheckConfig) {
+  const selectType = ref(CheckType.Uncheck);
+  const selections = ref<{ [key: string]: any }[]>([]);
+
+  const getDataLength = () => {
+    // 根据传入的是数字还是数组，返回不同的长度
+    if (typeof dataSource.value === 'number') {
+      return dataSource.value;
+    }
+    return dataSource.value.length;
+  };
+
+  const renderSelection = () => {
+    // 渲染表头
+    return h(AcrossCheck, {
+      value: selectType.value,
+      disabled: !getDataLength(),
+      crossPageSelect: crossPageSelect.value,
+      onChange: handleSelectTypeChange,
+    });
+  };
+  const renderTableTip = () => {
+    // 表格中间数据提示
+    return h(TableTip, {
+      dataLength: getDataLength(),
+      selectionsLength: selections.value.length,
+      isFullDataMode: typeof dataSource.value !== 'number',
+      selectType: selectType.value,
+      crossPageSelect: crossPageSelect.value,
+      handleSelectTypeChange,
+      handleClearSelection,
+    });
+  };
+
+  // 表头全选事件
+  const handleSelectTypeChange = (value: number) => {
+    switch (value) {
+      case CheckType.Uncheck:
+        handleClearSelection();
+        break;
+      case CheckType.Checked:
+        handleSelectCurrentPage();
+        break;
+      case CheckType.AcrossChecked:
+        handleSelectionAll();
+        break;
+    }
+  };
+  // 当前页全选
+  const handleSelectCurrentPage = () => {
+    selectType.value = CheckType.Checked;
+    selections.value = [...curPageData.value];
+  };
+  // 跨页全选
+  const handleSelectionAll = () => {
+    selectType.value = CheckType.AcrossChecked;
+    // number非全量，反向传递
+    selections.value = typeof dataSource.value === 'number' ? [] : [...dataSource.value];
+  };
+  // 清空全选
+  const handleClearSelection = () => {
+    selectType.value = CheckType.Uncheck;
+    selections.value = [];
+  };
+
+  // 表格行勾选后重置状态
+  const handleSetSelectType = () => {
+    // 全量数据
+    if (typeof dataSource.value !== 'number') {
+      if (selections.value.length === 0) {
+        selectType.value = CheckType.Uncheck;
+      } else if (
+        selections.value.length < curPageData.value.length &&
+        [CheckType.Checked, CheckType.Uncheck].includes(selectType.value)
+      ) {
+        // 从当前页全选 -> 当前页半选
+        selectType.value = CheckType.HalfChecked;
+      } else if (
+        selections.value.length === curPageData.value.length &&
+        ![CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value)
+      ) {
+        selectType.value = CheckType.Checked;
+      } else if (selections.value.length < dataSource.value.length && selectType.value === CheckType.AcrossChecked) {
+        // 从跨页全选 -> 跨页半选
+        selectType.value = CheckType.HalfAcrossChecked;
+      } else if (selections.value.length === dataSource.value.length) {
+        selectType.value = CheckType.AcrossChecked;
+      }
+    } else {
+      // 非全量数据
+      if (
+        (selections.value.length === 0 && [CheckType.Checked, CheckType.HalfChecked].includes(selectType.value)) ||
+        (selections.value.length === dataSource.value &&
+          [CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value))
+      ) {
+        // 取消全选状态
+        selectType.value = CheckType.Uncheck;
+        selections.value = [];
+      } else if (
+        selections.value.length < curPageData.value.length &&
+        [CheckType.Checked, CheckType.Uncheck].includes(selectType.value)
+      ) {
+        // 从当前页全选/空数据 -> 当前页半选
+        selectType.value = CheckType.HalfChecked;
+      } else if (
+        selections.value.length === curPageData.value.length &&
+        ![CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value)
+      ) {
+        // 当前页全选
+        selectType.value = CheckType.Checked;
+      } else if (selections.value.length < dataSource.value && selectType.value === CheckType.AcrossChecked) {
+        // 跨页半选
+        selectType.value = CheckType.HalfAcrossChecked;
+      } else if (selections.value.length === 0 && [CheckType.HalfAcrossChecked].includes(selectType.value)) {
+        // 跨页全选
+        selectType.value = CheckType.AcrossChecked;
+      }
+    }
+  };
+
+  // 当前行选中事件
+  const handleRowCheckChange = (value: boolean, row: any) => {
+    const index = selections.value.findIndex((item: { [key: string]: any }) =>
+      rowKey.every((key) => item[key] === row[key]),
+    );
+    // 全量数据
+    if (typeof dataSource.value !== 'number') {
+      if (value && index === -1) {
+        selections.value.push(row);
+      } else if (!value && index > -1) {
+        selections.value.splice(index, 1);
+      }
+    } else {
+      if (value && index === -1 && [CheckType.Uncheck, CheckType.HalfChecked].includes(selectType.value)) {
+        // 非跨页选择时，勾选数据正常push
+        selections.value.push(row);
+      } else if (!value && index > -1 && [CheckType.Checked, CheckType.HalfChecked].includes(selectType.value)) {
+        // 非跨页选择时，取消勾选数据正常splice
+        selections.value.splice(index, 1);
+      } else if (
+        !value &&
+        index === -1 &&
+        [CheckType.AcrossChecked, CheckType.HalfAcrossChecked].includes(selectType.value)
+      ) {
+        // 跨页全选/半选时，取消勾选数据push
+        selections.value.push(row);
+      } else if (
+        value &&
+        index > -1 &&
+        [CheckType.AcrossChecked, CheckType.HalfAcrossChecked].includes(selectType.value)
+      ) {
+        // 跨页半选时，勾选数据splice
+        selections.value.splice(index, 1);
+      }
+    }
+    handleSetSelectType();
+  };
+
+  return {
+    selectType,
+    selections,
+    renderSelection,
+    renderTableTip,
+    handleSelectionAll,
+    handleClearSelection,
+    handleRowCheckChange,
+  };
+}
diff --git a/bcs-services/bcs-bscp/ui/src/utils/hooks/use-table-acrosscheck-fulldata.ts b/bcs-services/bcs-bscp/ui/src/utils/hooks/use-table-acrosscheck-fulldata.ts
new file mode 100644
index 0000000000..fc0d8af3d6
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/utils/hooks/use-table-acrosscheck-fulldata.ts
@@ -0,0 +1,27 @@
+import { Ref, ref } from 'vue';
+import useTableAcrossCheckCommon from './use-table-acrosscheck-common';
+
+export interface IAcrossCheckConfig {
+  tableData: Ref<any[]>; // 全量数据
+  curPageData: Ref<any[]>; // 当前页数据
+  rowKey?: string[]; // 每行数据唯一标识
+  crossPageSelect: Ref<boolean>; // 是否提供全选/跨页全选功能
+}
+// 表格跨页全选功能
+export default function useTableAcrossCheck({
+  tableData,
+  curPageData,
+  rowKey = ['name', 'id'],
+  crossPageSelect = ref(true),
+}: IAcrossCheckConfig) {
+  const result = useTableAcrossCheckCommon({
+    dataSource: tableData,
+    curPageData,
+    rowKey,
+    crossPageSelect,
+  });
+
+  return {
+    ...result,
+  };
+}
diff --git a/bcs-services/bcs-bscp/ui/src/utils/hooks/use-table-acrosscheck.ts b/bcs-services/bcs-bscp/ui/src/utils/hooks/use-table-acrosscheck.ts
new file mode 100644
index 0000000000..c15f0fc3c1
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/utils/hooks/use-table-acrosscheck.ts
@@ -0,0 +1,26 @@
+import { Ref, ref } from 'vue';
+import useTableAcrossCheckCommon from './use-table-acrosscheck-common';
+
+export interface IAcrossCheckConfig {
+  dataCount: Ref<number>; // 可选的数据总数，不含禁用状态
+  curPageData: Ref<any[]>; // 当前页数据
+  rowKey?: string[]; // 每行数据唯一标识；需要在每行数据的第一子层级，暂不支持递归查找
+  crossPageSelect: Ref<boolean>; // 是否提供全选/跨页全选功能
+}
+// 表格跨页全选功能
+export default function useTableAcrossCheck({
+  dataCount,
+  curPageData,
+  rowKey = ['name', 'id'],
+  crossPageSelect = ref(true),
+}: IAcrossCheckConfig) {
+  const result = useTableAcrossCheckCommon({
+    dataSource: dataCount,
+    curPageData,
+    rowKey,
+    crossPageSelect,
+  });
+  return {
+    ...result,
+  };
+}
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/batch-retry-btn.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/batch-retry-btn.vue
index 42718c6afd..1fdcff07ac 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/batch-retry-btn.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/batch-retry-btn.vue
@@ -1,11 +1,14 @@
 <template>
-  <bk-button :disabled="props.selections.length === 0" @click="isRetryOpen = true">{{ t('批量重试') }}</bk-button>
+  <bk-button :disabled="props.selections.length === 0 && !isAcrossChecked" @click="isRetryOpen = true">
+    {{ t('批量重试') }}
+  </bk-button>
   <RetryDialog
     :bk-biz-id="props.bkBizId"
     :app-id="props.appId"
     :is-show="isRetryOpen"
     :is-batch="true"
     :selections="props.selections"
+    :is-across-checked="isAcrossChecked"
     @close="isRetryOpen = false"
     @retried="emits('retried', $event)" />
 </template>
@@ -20,6 +23,7 @@
     bkBizId: string;
     appId: number;
     selections: { id: number; uid: string; current_release_name: string; target_release_name: string }[];
+    isAcrossChecked: boolean;
   }>();
 
   const emits = defineEmits(['retried']);
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/retry-btn.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/retry-btn.vue
index 26d3034f51..290dbff9d9 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/retry-btn.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/retry-btn.vue
@@ -8,6 +8,7 @@
     :is-show="isRetryOpen"
     :is-batch="false"
     :selections="selections"
+    :is-across-checked="false"
     @close="isRetryOpen = false"
     @retried="emits('retried', $event)" />
 </template>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/retry-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/retry-dialog.vue
index bd4b39e7a9..79e5c10760 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/retry-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/client/search/components/retry-dialog.vue
@@ -14,7 +14,7 @@
         <div class="title">{{ title }}</div>
       </div>
     </template>
-    <div v-if="props.selections.length > 0" class="dialog-content">
+    <div v-if="props.selections.length > 0 && !isAcrossChecked" class="dialog-content">
       <bk-table
         v-if="props.isBatch"
         empty-cell-text="--"
@@ -60,6 +60,7 @@
     isShow: boolean;
     isBatch: boolean;
     selections: { id: number; uid: string; current_release_name: string; target_release_name: string }[];
+    isAcrossChecked: boolean;
   }>();
 
   const emits = defineEmits(['close', 'retried']);
@@ -74,7 +75,7 @@
     pending.value = true;
     try {
       const ids = props.selections.map((item) => item.id);
-      await retryClients(props.bkBizId, props.appId, ids);
+      await retryClients(props.bkBizId, props.appId, ids, props.isAcrossChecked);
       close();
       BkMessage({
         theme: 'success',
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/search/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/search/index.vue
index fcce742726..601e3ac9b1 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/client/search/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/client/search/index.vue
@@ -4,7 +4,12 @@
       <ClientHeader :title="t('客户端查询')" @search="loadList" />
     </div>
     <div v-if="appId" class="content">
-      <BatchRetryBtn :bk-biz-id="bkBizId" :app-id="appId" :selections="selectedClient" @retried="handleRetryConfirm" />
+      <BatchRetryBtn
+        :bk-biz-id="bkBizId"
+        :app-id="appId"
+        :selections="selectedClient"
+        :is-across-checked="isAcrossChecked"
+        @retried="handleRetryConfirm" />
       <bk-loading style="min-height: 100px" :loading="listLoading">
         <bk-table
           ref="tableRef"
@@ -14,23 +19,26 @@
           :remote-pagination="true"
           :pagination="pagination"
           :key="appId"
-          :checked="selectedClient.map((item) => item.id)"
-          :is-row-select-enable="isRowSelectEnable"
           :settings="settings"
           show-overflow-tooltip
           @page-limit-change="handlePageLimitChange"
-          @page-value-change="loadList"
+          @page-value-change="loadList(true)"
           @column-filter="handleFilter"
-          @setting-change="handleSettingsChange"
-          @selection-change="handleSelectRow"
-          @select-all="handleSelectAll">
-          <template v-if="selectedClient.length" #prepend>
-            <div class="row-selection-display">
-              {{ t('当前已选择 {n} 个客户端，', { n: selectedClient.length }) }}
-              <bk-button text theme="primary" @click="handleClearSelection">{{ t('清除选择') }}</bk-button>
-            </div>
+          @setting-change="handleSettingsChange">
+          <template #prepend>
+            <render-table-tip />
           </template>
-          <bk-table-column type="selection" fixed="left" :min-width="48" :width="48"> </bk-table-column>
+          <bk-table-column :min-width="80" :width="80" :label="renderSelection" :show-overflow-tooltip="false">
+            <template #default="{ row }">
+              <across-check-box
+                :checked="isChecked(row)"
+                :disabled="
+                  row.client?.spec &&
+                  (row.client.spec.release_change_status !== 'Failed' || row.client.spec.online_status !== 'Online')
+                "
+                :handle-change="() => handleSelectionChange(row)" />
+            </template>
+          </bk-table-column>
           <bk-table-column label="UID" fixed="left" :width="254" prop="client.attachment.uid"></bk-table-column>
           <bk-table-column
             v-if="selectedShowColumn.includes('ip')"
@@ -230,7 +238,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, watch, onBeforeMount, onBeforeUnmount } from 'vue';
+  import { ref, watch, onBeforeMount, onBeforeUnmount, computed } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { Share, InfoLine, Spinner } from 'bkui-vue/lib/icon';
   import { storeToRefs } from 'pinia';
@@ -251,6 +259,9 @@
   import Exception from '../components/exception.vue';
   import BatchRetryBtn from './components/batch-retry-btn.vue';
   import RetryBtn from './components/retry-btn.vue';
+  import useTableAcrossCheck from '../../../../utils/hooks/use-table-acrosscheck';
+  import acrossCheckBox from '../../../../components/across-checkbox.vue';
+  import CheckType from '../../../../../types/across-checked';
   import { useI18n } from 'vue-i18n';
 
   const { t, locale } = useI18n();
@@ -280,6 +291,8 @@
   const isShowPullRecordSlider = ref(false);
   const tableData = ref();
   const tableRef = ref();
+  const isAcrossChecked = ref(false);
+  const selecTableDataCount = ref(0);
 
   const releaseChangeStatusFilterList = [
     {
@@ -309,6 +322,31 @@
   const onlineStatusFilterChecked = ref<string[]>([]);
   const pollTimer = ref(0);
 
+  // 当前页数据，不含禁用
+  const selecTableData = computed(() => {
+    return tableData.value
+      .filter(
+        (item: any) =>
+          item.client?.spec &&
+          !(item.client.spec.release_change_status !== 'Failed' || item.client.spec.online_status !== 'Online'),
+      )
+      .map((item: any) => ({
+        ...item,
+        id: item.client.id,
+        uid: item.client.attachment.uid,
+      }));
+  });
+  const crossPageSelect = computed(
+    () => pagination.value.limit < pagination.value.count && selecTableDataCount.value !== 0,
+  );
+  const { selectType, selections, renderSelection, renderTableTip, handleRowCheckChange, handleClearSelection } =
+    useTableAcrossCheck({
+      dataCount: selecTableDataCount,
+      curPageData: selecTableData, // 当前页数据，不含禁用
+      rowKey: ['id'],
+      crossPageSelect,
+    });
+
   watch(
     () => route.params.appId,
     (val) => {
@@ -350,6 +388,24 @@
     { deep: true },
   );
 
+  watch(
+    selections,
+    () => {
+      isAcrossChecked.value = [CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value);
+      selectedClient.value = selections.value.map((item) => {
+        return {
+          id: item.client.id,
+          uid: item.client.attachment.uid,
+          current_release_name: item.client.spec.current_release_name,
+          target_release_name: item.client.spec.target_release_name,
+        };
+      });
+    },
+    {
+      deep: true,
+    },
+  );
+
   onBeforeMount(() => {
     const tableSet = localStorage.getItem('client-show-column');
     settings.value.size = 'medium';
@@ -367,12 +423,15 @@
     }
   });
 
-  const isRowSelectEnable = ({ row, isCheckAll }: any) =>
-    isCheckAll ||
-    !(
-      row.client.spec &&
-      (row.client.spec.release_change_status !== 'Failed' || row.client.spec.online_status !== 'Online')
-    );
+  // 行的启用/禁用
+  const isChecked = (row: any) => {
+    if (![CheckType.AcrossChecked, CheckType.HalfAcrossChecked].includes(selectType.value)) {
+      // 当前页状态传递
+      return selections.value.some((item) => item.client?.id === row.client?.id);
+    }
+    // 跨页状态传递
+    return !selections.value.some((item) => item.client?.id === row.client?.id);
+  };
 
   const settings = ref({
     trigger: 'click',
@@ -472,7 +531,11 @@
   //     '客户端每 15 秒会向服务端发送一次心跳数据，如果服务端连续3个周期没有接收到客户端心跳数据，视客户端为离线状态',
   // };
 
-  const loadList = async () => {
+  const loadList = async (pageChange = false) => {
+    // 非跨页全选/半选 需要重置全选状态
+    if (![CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value) || !pageChange) {
+      handleClearSelection();
+    }
     const params: IClinetCommonQuery = {
       start: pagination.value.limit * (pagination.value.current - 1),
       limit: pagination.value.limit,
@@ -491,6 +554,7 @@
         client.labels = Object.entries(JSON.parse(client.spec.labels)).map(([key, value]) => ({ key, value }));
       });
       pagination.value.count = res.data.count;
+      selecTableDataCount.value = Number(res.data.exclusion_count);
     } catch (error) {
       console.error(error);
     } finally {
@@ -550,47 +614,11 @@
   };
 
   // 选择单行
-  const handleSelectRow = ({ row, checked }: { row: any; checked: boolean }) => {
-    const index = selectedClient.value.findIndex((item) => item.id === row.client.id);
-    if (checked) {
-      if (index === -1) {
-        selectedClient.value.push({
-          id: row.client.id,
-          uid: row.client.attachment.uid,
-          current_release_name: row.client.spec.current_release_name,
-          target_release_name: row.client.spec.target_release_name,
-        });
-      }
-    } else {
-      if (index > -1) {
-        selectedClient.value.splice(index, 1);
-      }
-    }
-  };
-
-  // 全选/取消
-  const handleSelectAll = ({ checked }: { checked: boolean }) => {
-    if (checked) {
-      tableData.value.forEach((item: any) => {
-        if (item.client.spec.release_change_status !== 'Failed' && item.spec.online_status !== 'Online') return;
-        if (!selectedClient.value.find((selected) => selected.id === item.client.id)) {
-          selectedClient.value.push({
-            id: item.client.id,
-            uid: item.client.attachment.uid,
-            current_release_name: item.client.spec.current_release_name,
-            target_release_name: item.client.spec.target_release_name,
-          });
-        }
-      });
-    } else {
-      selectedClient.value = [];
-    }
-  };
-
-  // 清空选择
-  const handleClearSelection = () => {
-    selectedClient.value = [];
-    tableRef.value.clearSelection();
+  const handleSelectionChange = (row: any) => {
+    const isSelected = selections.value.some((item) => item.client.id === row.client.id);
+    // 根据选择类型决定传递的状态
+    const shouldBeChecked = isAcrossChecked.value ? isSelected : !isSelected;
+    handleRowCheckChange(shouldBeChecked, { ...row, id: row.client.id });
   };
 
   const getErrorDetails = (item: any) => {
@@ -611,6 +639,7 @@
 
   // 重试成功
   const handleRetryConfirm = (ids: number[]) => {
+    handleClearSelection(); // 清空选择框
     ids.forEach((id) => {
       const index = selectedClient.value.findIndex((item) => item.id === id);
       if (index > -1) {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/groups/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/groups/index.vue
index aedff422f4..2c68ea01ba 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/groups/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/groups/index.vue
@@ -38,16 +38,21 @@
     </div>
     <div class="group-table-wrapper">
       <bk-loading style="min-height: 300px" :loading="listLoading">
-        <bk-table
-          class="group-table"
-          :border="['outer']"
-          :data="tableData"
-          :checked="checkedGroups"
-          :is-row-select-enable="isRowSelectEnable"
-          show-overflow-tooltip
-          @selection-change="handleSelectionChange"
-          @select-all="handleSelectAll">
-          <bk-table-column type="selection" width="60"></bk-table-column>
+        <bk-table class="group-table" :border="['outer']" :data="tableData">
+          <template #prepend>
+            <render-table-tip />
+          </template>
+          <bk-table-column :width="100" :label="renderSelection">
+            <template #default="{ row }">
+              <across-check-box
+                :checked="selections.some((item) => item.name === row.name && item.id === row.id)"
+                :disabled="row.released_apps_num > 0 || row.IS_CATEORY_ROW !== undefined"
+                :handle-change="
+                  () =>
+                    handleRowCheckChange(!selections.some((item) => item.name === row.name && item.id === row.id), row)
+                " />
+            </template>
+          </bk-table-column>
           <bk-table-column :label="t('分组名称')" :width="210" show-overflow-tooltip>
             <template #default="{ row }">
               <div v-if="isCategorizedView" class="categorized-view-name">
@@ -162,8 +167,10 @@
   import Message from 'bkui-vue/lib/message';
   import { debounce } from 'lodash';
   import useGlobalStore from '../../../store/global';
+  import CheckType from '../../../../types/across-checked';
   import { getSpaceGroupList, deleteGroup } from '../../../api/group';
   import useTablePagination from '../../../utils/hooks/use-table-pagination';
+  import useTableAcrossCheck from '../../../utils/hooks/use-table-acrosscheck-fulldata';
   import { IGroupItem, IGroupCategory, IGroupCategoryItem } from '../../../../types/group';
   import CreateGroup from './create-group.vue';
   import EditGroup from './edit-group.vue';
@@ -172,6 +179,7 @@
   import ServicesToPublished from './services-to-published.vue';
   import tableEmpty from '../../../components/table/table-empty.vue';
   import DeleteConfirmDialog from '../../../components/delete-confirm-dialog.vue';
+  import acrossCheckBox from '../../../components/across-checkbox.vue';
 
   const { spaceId } = storeToRefs(useGlobalStore());
   const { t, locale } = useI18n();
@@ -187,7 +195,6 @@
   const changeViewPending = ref(false);
   const isDeleteGroupDialogShow = ref(false);
   const deleteGroupItem = ref<IGroupItem>();
-  const selectedIds = ref<number[]>([]);
   const isCreateGroupShow = ref(false);
   const isEditGroupShow = ref(false);
   const editingGroup = ref<IGroupItem>({
@@ -208,10 +215,24 @@
       '分组由 1 个或多个标签选择器组成，服务配置版本选择分组上线结合客户端配置的标签用于灰度发布、A/B Test等运营场景，详情参考文档：',
     ),
   );
-
-  const checkedGroups = computed(() => {
-    return groupList.value.filter((item) => selectedIds.value.includes(item.id));
+  // 跨页全选
+  const selecTableData = computed(() => groupList.value.filter((item) => item.released_apps_num < 1));
+  const pageSelectableData = computed(() => tableData.value.filter((item) => item.released_apps_num! < 1));
+  const selectedIds = computed(() => {
+    return selections.value.filter((item) => item.released_apps_num === 0).map((item) => item.id);
+  });
+  // 是否提供跨页全选功能
+  const crossPageSelect = computed(() => {
+    return (
+      isCategorizedView.value || (pagination.value.limit < groupList.value.length && selecTableData.value.length !== 0)
+    );
   });
+  const { selectType, selections, renderSelection, renderTableTip, handleRowCheckChange, handleClearSelection } =
+    useTableAcrossCheck({
+      tableData: selecTableData, // 全量数据，排除禁用
+      curPageData: pageSelectableData, // 当前页数据，排除禁用
+      crossPageSelect, // 展示跨页下拉框；按标签分类查看无分页，默认为当前页
+    });
 
   watch(
     () => spaceId.value,
@@ -245,7 +266,7 @@
   };
 
   // 刷新表格数据
-  const refreshTableData = () => {
+  const refreshTableData = (pageChange = false) => {
     if (isCategorizedView.value) {
       categorizedGroupList.value = categorizingData(searchGroupList.value);
       categorizedGroupList.value.forEach((item) => {
@@ -258,6 +279,10 @@
       tableData.value = searchGroupList.value.slice(start, start + pagination.value.limit);
       pagination.value.count = searchGroupList.value.length;
     }
+    // 非跨页全选/半选 需要重置全选状态
+    if (![CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value) || !pageChange) {
+      handleClearSelection();
+    }
   };
 
   // 将全量分组数据按照分类分组
@@ -282,33 +307,6 @@
     return categoryList;
   };
 
-  // 表格行是否可以选中
-  const isRowSelectEnable = ({ row, isCheckAll }: { row: IGroupItem; isCheckAll: boolean }) => {
-    return isCheckAll || row.released_apps_num < 1;
-  };
-
-  // 表格行选择事件
-  const handleSelectionChange = ({ checked, row }: { checked: boolean; row: IGroupItem }) => {
-    const index = selectedIds.value.findIndex((id) => id === row.id);
-    if (checked) {
-      if (index === -1) {
-        selectedIds.value.push(row.id);
-      }
-    } else {
-      selectedIds.value.splice(index, 1);
-    }
-  };
-
-  // 全选
-  const handleSelectAll = ({ checked }: { checked: boolean }) => {
-    if (checked) {
-      const list = isCategorizedView.value ? groupList.value : tableData.value;
-      selectedIds.value = (list as IGroupItem[]).filter((item) => item.released_apps_num === 0).map((item) => item.id);
-    } else {
-      selectedIds.value = [];
-    }
-  };
-
   // 分类视图下的table数据
   const getCategorizedTableData = () => {
     const list: IGroupCategoryItem[] = [];
@@ -341,7 +339,6 @@
   const handleChangeView = () => {
     changeViewPending.value = true;
     pagination.value.current = 1;
-    selectedIds.value = [];
     refreshTableData();
     nextTick(() => {
       changeViewPending.value = false;
@@ -420,7 +417,7 @@
 
   const handlePageChange = (val: number) => {
     pagination.value.current = val;
-    refreshTableData();
+    refreshTableData(true);
   };
 
   const handlePageLimitChange = (val: number) => {
@@ -449,13 +446,11 @@
   const refreshAfterBatchDelete = () => {
     if (
       !isCategorizedView.value &&
-      selectedIds.value.length === tableData.value.length &&
+      selections.value.length === tableData.value.length &&
       pagination.value.current > 1
     ) {
       pagination.value.current = pagination.value.current - 1;
     }
-
-    selectedIds.value = [];
     loadGroupList();
   };
 
@@ -576,4 +571,25 @@
       margin-left: auto;
     }
   }
+  // .selections-style {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   height: 30px;
+  //   font-size: 12px;
+  //   color: #63656e;
+  //   background: #ebecf0;
+  //   .checked-number {
+  //     padding: 0 5px;
+  //     font-weight: 700;
+  //   }
+  //   .checked-em {
+  //     margin-left: 5px;
+  //     color: #3a84ff;
+  //     cursor: pointer;
+  //     &:hover {
+  //       color: #699df4;
+  //     }
+  //   }
+  // }
 </style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/batch-delete-btn.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/batch-delete-btn.vue
index 0b54ef8c2d..022aa29e57 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/batch-delete-btn.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/batch-delete-btn.vue
@@ -1,13 +1,17 @@
 <template>
   <bk-button
     class="batch-delete-btn"
-    :disabled="props.selectedIds.length === 0"
+    :disabled="props.selectedIds.length === 0 && !isAcrossChecked"
     @click="isBatchDeleteDialogShow = true">
     {{ t('批量删除') }}
   </bk-button>
   <DeleteConfirmDialog
     v-model:isShow="isBatchDeleteDialogShow"
-    :title="t('确认删除所选的 {n} 项脚本？', { n: props.selectedIds.length })"
+    :title="
+      t('确认删除所选的 {n} 项脚本？', {
+        n: isAcrossChecked ? dataCount - props.selectedIds.length : props.selectedIds.length,
+      })
+    "
     :pending="batchDeletePending"
     @confirm="handleBatchDeleteConfirm">
     <div>
@@ -27,6 +31,8 @@
   const props = defineProps<{
     bkBizId: string;
     selectedIds: number[];
+    isAcrossChecked: boolean;
+    dataCount: number;
   }>();
 
   const emits = defineEmits(['deleted']);
@@ -36,7 +42,7 @@
 
   const handleBatchDeleteConfirm = async () => {
     batchDeletePending.value = true;
-    await batchDeleteScript(props.bkBizId, props.selectedIds);
+    await batchDeleteScript(props.bkBizId, props.selectedIds, props.isAcrossChecked);
     Message({
       theme: 'success',
       message: t('批量删除脚本成功'),
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-list.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-list.vue
index 77a17ed9dc..cabd089ded 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-list.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-list.vue
@@ -28,14 +28,19 @@
             <Plus class="button-icon" />
             {{ t('新建脚本') }}
           </bk-button>
-          <BatchDeleteBtn :bk-biz-id="spaceId" :selected-ids="selectedIds" @deleted="refreshAfterBatchDelete" />
+          <BatchDeleteBtn
+            :bk-biz-id="spaceId"
+            :selected-ids="selectedIds"
+            :is-across-checked="isAcrossChecked"
+            :data-count="selecTableDataCount"
+            @deleted="refreshAfterBatchDelete" />
         </div>
         <bk-input
           v-model="searchStr"
           class="search-script-input"
           :placeholder="t('脚本名称')"
           :clearable="true"
-          @clear="refreshList"
+          @clear="refreshList()"
           @input="handleNameInputChange">
           <template #suffix>
             <Search class="search-input-icon" />
@@ -46,18 +51,24 @@
         <bk-table
           :border="['outer']"
           :data="scriptsData"
-          :checked="checkedScripts"
           :remote-pagination="true"
           :pagination="pagination"
           :class="memoEditHookId > 0 || tagEditHookId > 0 ? 'table-with-memo-edit' : ''"
           show-overflow-tooltip
           :cell-class="getCellCls"
-          :is-row-select-enable="isRowSelectEnable"
-          @selection-change="handleSelectionChange"
-          @select-all="handleSelectAll"
           @page-limit-change="handlePageLimitChange"
-          @page-value-change="handlePageCurrentChange">
-          <bk-table-column type="selection" width="60"></bk-table-column>
+          @page-value-change="refreshList($event, true)">
+          <template #prepend>
+            <render-table-tip />
+          </template>
+          <bk-table-column :min-width="80" :width="80" :label="renderSelection" :show-overflow-tooltip="false">
+            <template #default="{ row }">
+              <across-check-box
+                :checked="isChecked(row)"
+                :disabled="row.bound_num !== 0"
+                :handle-change="() => handleSelectionChange(row)" />
+            </template>
+          </bk-table-column>
           <bk-table-column :label="t('脚本名称')" :min-width="200">
             <template #default="{ row }">
               <div v-if="row.hook" class="hook-name" @click="handleViewVersionClick(row.hook.id)">
@@ -221,10 +232,14 @@
   import DeleteConfirmDialog from '../../../../components/delete-confirm-dialog.vue';
   import LinkToApp from '../../templates/list/components/link-to-app.vue';
   import ContentWidthOverflowTips from '../../../../components/content-width-overflow-tips/index.vue';
+  import useTableAcrossCheck from '../../../../utils/hooks/use-table-acrosscheck';
+  import acrossCheckBox from '../../../../components/across-checkbox.vue';
+  import CheckType from '../../../../../types/across-checked';
   import { debounce } from 'lodash';
 
   const { spaceId } = storeToRefs(useGlobalStore());
-  const { versionListPageShouldOpenEdit, versionListPageShouldOpenView } = storeToRefs(useScriptStore());
+  const scriptStore = useScriptStore();
+  const { versionListPageShouldOpenEdit, versionListPageShouldOpenView } = storeToRefs(scriptStore);
   const router = useRouter();
   const { t, locale } = useI18n();
 
@@ -254,16 +269,35 @@
   const tagEditHookId = ref(0); // 当前正在编辑标签的脚本id
   const tagInputRef = ref();
   const editMemoStr = ref(''); // 编辑描述内容
+  const isAcrossChecked = ref(false);
+  const selecTableDataCount = ref(0);
 
   const maxTableHeight = computed(() => {
     const windowHeight = window.innerHeight;
     return windowHeight * 0.6 - 200;
   });
 
-  const checkedScripts = computed(() => {
-    return scriptsData.value.filter((item) => selectedIds.value.includes(item.hook.id));
+  // 当前页数据，不含禁用
+  const selecTableData = computed(() => {
+    return scriptsData.value
+      .filter((item) => item.bound_num === 0)
+      .map((item) => ({
+        ...item,
+        id: item.hook?.id,
+      }));
   });
 
+  const crossPageSelect = computed(
+    () => pagination.value.limit < pagination.value.count && selecTableDataCount.value !== 0,
+  );
+  const { selectType, selections, renderSelection, renderTableTip, handleRowCheckChange, handleClearSelection } =
+    useTableAcrossCheck({
+      dataCount: selecTableDataCount,
+      curPageData: selecTableData, // 当前页数据，不含禁用
+      rowKey: ['id'],
+      crossPageSelect,
+    });
+
   const isSearchEmpty = ref(false);
   watch(
     () => spaceId.value,
@@ -273,6 +307,17 @@
     },
   );
 
+  watch(
+    selections,
+    () => {
+      isAcrossChecked.value = [CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value);
+      selectedIds.value = selections.value.map((item) => item.id);
+    },
+    {
+      deep: true,
+    },
+  );
+
   onMounted(() => {
     getScripts();
     getTags();
@@ -299,6 +344,7 @@
       item.hook.spec.type = item.hook.spec.type.charAt(0).toUpperCase() + item.hook.spec.type.slice(1);
     });
     pagination.value.count = res.count;
+    selecTableDataCount.value = Number(res.exclusion_count);
     scriptsLoading.value = false;
   };
 
@@ -326,24 +372,11 @@
   };
 
   // 表格行选择事件
-  const handleSelectionChange = ({ checked, row }: { checked: boolean; row: IScriptItem }) => {
-    const index = selectedIds.value.findIndex((id) => id === row.hook.id);
-    if (checked) {
-      if (index === -1) {
-        selectedIds.value.push(row.hook.id);
-      }
-    } else {
-      selectedIds.value.splice(index, 1);
-    }
-  };
-
-  // 全选
-  const handleSelectAll = ({ checked }: { checked: boolean }) => {
-    if (checked) {
-      selectedIds.value = scriptsData.value.filter((item) => item.bound_num === 0).map((item) => item.hook.id);
-    } else {
-      selectedIds.value = [];
-    }
+  const handleSelectionChange = (row: IScriptItem) => {
+    const isSelected = selections.value.some((item) => item.hook.id === row.hook.id);
+    // 根据选择类型决定传递的状态
+    const shouldBeChecked = isAcrossChecked.value ? isSelected : !isSelected;
+    handleRowCheckChange(shouldBeChecked, { ...row, id: row.hook.id });
   };
 
   const handleSelectTag = (tag: string, all = false) => {
@@ -473,7 +506,11 @@
     refreshList(pagination.value.current);
   };
 
-  const refreshList = (current = 1) => {
+  const refreshList = (current = 1, pageChange = false) => {
+    // 非跨页全选/半选 需要重置全选状态
+    if (![CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value) || !pageChange) {
+      handleClearSelection();
+    }
     isSearchEmpty.value = searchStr.value !== '';
     pagination.value.current = current;
     getScripts();
@@ -484,18 +521,18 @@
     refreshList();
   };
 
-  const handlePageCurrentChange = (val: number) => {
-    pagination.value.current = val;
-    getScripts();
-  };
-
   const clearSearchStr = () => {
     searchStr.value = '';
     refreshList();
   };
 
-  const isRowSelectEnable = ({ row, isCheckAll }: any) => {
-    return isCheckAll || row.bound_num === 0;
+  const isChecked = (row: IScriptItem) => {
+    if (![CheckType.AcrossChecked, CheckType.HalfAcrossChecked].includes(selectType.value)) {
+      // 当前页状态传递
+      return selections.value.some((item) => item.hook?.id === row.hook?.id);
+    }
+    // 跨页状态传递
+    return !selections.value.some((item) => item.hook?.id === row.hook?.id);
   };
 </script>
 <style lang="scss" scoped>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/batch-operation-btn.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/batch-operation-btn.vue
index 40f239ac13..c2a5a39888 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/batch-operation-btn.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/batch-operation-btn.vue
@@ -25,13 +25,17 @@
   <bk-button
     v-else
     class="batch-delete-btn"
-    :disabled="props.selectedIds.length === 0"
+    :disabled="props.selectedIds.length === 0 && !isAcrossChecked"
     @click="isBatchDeleteDialogShow = true">
     {{ t('批量删除') }}
   </bk-button>
   <DeleteConfirmDialog
     v-model:isShow="isBatchDeleteDialogShow"
-    :title="t('确认删除所选的 {n} 项配置项？', { n: props.selectedIds.length })"
+    :title="
+      t('确认删除所选的 {n} 项配置项？', {
+        n: isAcrossChecked ? dataCount - props.selectedIds.length : props.selectedIds.length,
+      })
+    "
     :pending="batchDeletePending"
     @confirm="handleBatchDeleteConfirm">
     <div>
@@ -55,6 +59,7 @@
   import DeleteConfirmDialog from '../../../../../../../components/delete-confirm-dialog.vue';
   import EditPermissionDialog from '../../../../../templates/list/package-detail/operations/edit-permission/edit-permission-dialog.vue';
   import { IConfigItem } from '../../../../../../../../types/config';
+
   const { t } = useI18n();
 
   interface IPermissionType {
@@ -69,6 +74,8 @@
     selectedIds: number[];
     isFileType: boolean; // 是否为文件型配置
     selectedItems: IConfigItem[];
+    isAcrossChecked: boolean;
+    dataCount: number;
   }>();
 
   const emits = defineEmits(['deleted']);
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/index.vue
index 4ac253faba..8ed941d92a 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/index.vue
@@ -31,6 +31,8 @@
           :selected-ids="selectedIds"
           :is-file-type="isFileType"
           :selected-items="selectedItems"
+          :is-across-checked="isAcrossChecked"
+          :data-count="selecTableDataCount"
           @deleted="handleBatchDeleted" />
       </div>
       <SearchInput
@@ -57,8 +59,14 @@
         :bk-biz-id="props.bkBizId"
         :app-id="props.appId"
         :search-str="searchStr"
+        @send-table-data-count="selecTableDataCount = $event"
         @clear-str="clearStr"
-        @update-selected-ids="selectedIds = $event" />
+        @update-selected-ids="
+          (data) => {
+            selectedIds = data.selectedConfigIds;
+            isAcrossChecked = data.isAcrossChecked;
+          }
+        " />
     </section>
   </section>
 </template>
@@ -93,6 +101,8 @@
   const editVariablesRef = ref();
   const selectedIds = ref<number[]>([]);
   const selectedItems = ref<any[]>([]);
+  const isAcrossChecked = ref(false);
+  const selecTableDataCount = ref(0);
 
   const refreshConfigList = (createConfig = false) => {
     if (isFileType.value) {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-kv.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-kv.vue
index 9795b65508..f3d0ec9b07 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-kv.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-kv.vue
@@ -7,18 +7,24 @@
       :remote-pagination="true"
       :pagination="pagination"
       :key="versionData.id"
-      :checked="checkedConfigs"
       selection-key="id"
       row-key="id"
       :row-class="getRowCls"
-      :is-row-select-enable="isRowSelectEnable"
       @page-limit-change="handlePageLimitChange"
-      @page-value-change="refresh"
+      @page-value-change="refresh($event, true)"
       @column-sort="handleSort"
-      @column-filter="handleFilter"
-      @selection-change="handleSelectionChange"
-      @select-all="handleSelectAll">
-      <bk-table-column v-if="versionData.id === 0" type="selection" :width="40" :min-width="40"></bk-table-column>
+      @column-filter="handleFilter">
+      <template #prepend v-if="versionData.id === 0">
+        <render-table-tip />
+      </template>
+      <bk-table-column v-if="versionData.id === 0" :width="74" :min-width="74" :label="renderSelection">
+        <template #default="{ row }">
+          <across-check-box
+            :checked="isChecked(row)"
+            :disabled="row.kv_state === 'DELETE'"
+            :handle-change="() => handleSelectionChange(row)" />
+        </template>
+      </bk-table-column>
       <bk-table-column :label="t('配置项名称')" prop="spec.key" :min-width="240">
         <template #default="{ row }">
           <bk-button
@@ -176,6 +182,9 @@
   import VersionDiff from '../../../components/version-diff/index.vue';
   import TableEmpty from '../../../../../../../../components/table/table-empty.vue';
   import DeleteConfirmDialog from '../../../../../../../../components/delete-confirm-dialog.vue';
+  import useTableAcrossCheck from '../../../../../../../../utils/hooks/use-table-acrosscheck';
+  import acrossCheckBox from '../../../../../../../../components/across-checkbox.vue';
+  import CheckType from '../../../../../../../../../types/across-checked';
 
   const configStore = useConfigStore();
   const serviceStore = useServiceStore();
@@ -191,7 +200,7 @@
     searchStr: string;
   }>();
 
-  const emits = defineEmits(['clearStr', 'updateSelectedIds']);
+  const emits = defineEmits(['clearStr', 'updateSelectedIds', 'sendTableDataCount']);
 
   const loading = ref(false);
   const configList = ref<IConfigKvType[]>([]);
@@ -210,6 +219,8 @@
   const updateSortType = ref('null');
   const recoverConfig = ref<IConfigKvType>();
   const isRecoverConfigDialogShow = ref(false);
+  const isAcrossChecked = ref(false);
+  const selecTableDataCount = ref(0);
 
   const typeFilterList = computed(() =>
     CONFIG_KV_TYPE.map((item) => ({
@@ -247,16 +258,26 @@
     return '';
   });
 
-  const checkedConfigs = computed(() => {
-    return configList.value.filter((config) => selectedConfigIds.value.includes(config.id));
-  });
+  // 跨页全选
+  const selecTableData = computed(() => configList.value.filter((item) => item.kv_state !== 'DELETE'));
+  const crossPageSelect = computed(
+    () => pagination.value.limit < pagination.value.count && selecTableDataCount.value !== 0,
+  );
+  const { selectType, selections, renderSelection, renderTableTip, handleRowCheckChange, handleClearSelection } =
+    useTableAcrossCheck({
+      dataCount: selecTableDataCount, // 总数，不含禁用row
+      curPageData: selecTableData, // 当前页数据，不含禁用row
+      rowKey: ['id'],
+      crossPageSelect, // 是否提供跨页全选功能
+    });
 
   watch(
     () => versionData.value.id,
     () => {
       refresh();
       selectedConfigIds.value = [];
-      emits('updateSelectedIds', []);
+      // emits('updateSelectedIds', []);
+      emits('updateSelectedIds', { selectedConfigIds, isAcrossChecked: false });
     },
   );
 
@@ -277,6 +298,21 @@
     },
   );
 
+  watch(
+    selections,
+    () => {
+      isAcrossChecked.value = [CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value);
+      selectedConfigIds.value = selections.value.map((item) => item.id);
+      emits('updateSelectedIds', {
+        selectedConfigIds: selectedConfigIds.value,
+        isAcrossChecked: isAcrossChecked.value,
+      });
+    },
+    {
+      deep: true,
+    },
+  );
+
   const isUnNamedVersion = computed(() => versionData.value.id === 0);
 
   onMounted(() => {
@@ -326,6 +362,8 @@
       configStore.$patch((state) => {
         state.allConfigCount = res.count;
       });
+      selecTableDataCount.value = Number(res.exclusion_count);
+      emits('sendTableDataCount', selecTableDataCount.value);
       pagination.value.count = res.count;
     } catch (e) {
       console.error(e);
@@ -334,32 +372,22 @@
     }
   };
 
-  // 表格行是否可以选中
-  const isRowSelectEnable = ({ row, isCheckAll }: { row: IConfigKvType; isCheckAll: boolean }) => {
-    return isCheckAll || row.kv_state !== 'DELETE';
-  };
-
-  // 表格行选择事件
-  const handleSelectionChange = ({ checked, row }: { checked: boolean; row: IConfigKvType }) => {
-    const index = selectedConfigIds.value.findIndex((id) => id === row.id);
-    if (checked) {
-      if (index === -1) {
-        selectedConfigIds.value.push(row.id);
-      }
-    } else {
-      selectedConfigIds.value.splice(index, 1);
+  // 选中状态
+  const isChecked = (row: IConfigKvType) => {
+    if (![CheckType.AcrossChecked, CheckType.HalfAcrossChecked].includes(selectType.value)) {
+      // 当前页状态传递
+      return selections.value.some((item) => item.id === row.id);
     }
-    emits('updateSelectedIds', selectedConfigIds.value);
+    // 跨页状态传递
+    return !selections.value.some((item) => item.id === row.id);
   };
 
-  // 全选
-  const handleSelectAll = ({ checked }: { checked: boolean }) => {
-    if (checked) {
-      selectedConfigIds.value = configList.value.filter((item) => item.kv_state !== 'DELETE').map((item) => item.id);
-    } else {
-      selectedConfigIds.value = [];
-    }
-    emits('updateSelectedIds', selectedConfigIds.value);
+  // 表格行选择事件
+  const handleSelectionChange = (row: IConfigKvType) => {
+    const isSelected = selections.value.some((item) => item.id === row.id);
+    // 根据选择类型决定传递的状态
+    const shouldBeChecked = isAcrossChecked.value ? isSelected : !isSelected;
+    handleRowCheckChange(shouldBeChecked, row);
   };
 
   const handleEditOrView = (config: IConfigKvType) => {
@@ -471,7 +499,8 @@
     }
 
     selectedConfigIds.value = [];
-    emits('updateSelectedIds', []);
+    // emits('updateSelectedIds', []);
+    emits('updateSelectedIds', { selectedConfigIds, isAcrossChecked: false });
     refresh(pagination.value.current);
   };
 
@@ -481,7 +510,11 @@
     refresh();
   };
 
-  const refresh = (current = 1) => {
+  const refresh = (current = 1, pageChange = false) => {
+    // 非跨页全选/半选 需要重置全选状态
+    if (![CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value) || !pageChange) {
+      handleClearSelection();
+    }
     pagination.value.current = current;
     getListData();
   };
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
index 1acc93efd1..be1a97af86 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
@@ -39,7 +39,7 @@
                     v-if="isUnNamedVersion && group.id !== 0"
                     v-cursor="{ active: !hasEditServicePerm }"
                     :class="['delete-btn', { 'bk-text-with-no-perm': !hasEditServicePerm }]"
-                    @click="handleDeletePkg(group.id, group.name)">
+                    @click="handleDeletePkg(group.id, group.name, group.template_set_id)">
                     <Close class="close-icon" />
                     {{ t('移除套餐') }}
                   </div>
@@ -294,7 +294,7 @@
     getBoundTemplates,
     getBoundTemplatesByAppVersion,
     deleteServiceConfigItem,
-    deleteBoundPkg,
+    deleteCurrBoundPkg,
     unModifyConfigItem,
     unDeleteConfigItem,
   } from '../../../../../../../../api/config';
@@ -386,6 +386,7 @@
   const isDeletePkgDialogShow = ref(false);
   const deleteTemplatePkgName = ref('');
   const deleteTemplatePkgId = ref(0);
+  const templateSetId = ref(0);
   const statusFilterChecked = ref<string[]>([]);
   const viewConfigSliderData = ref<{
     open: boolean;
@@ -774,17 +775,19 @@
   };
 
   // 删除模板套餐
-  const handleDeletePkg = async (pkgId: number, name: string) => {
+  const handleDeletePkg = async (pkgId: number, name: string, templateId: number) => {
     if (permCheckLoading.value || !checkPermBeforeOperate('update')) {
       return;
     }
     isDeletePkgDialogShow.value = true;
     deleteTemplatePkgName.value = name;
     deleteTemplatePkgId.value = pkgId;
+    templateSetId.value = templateId;
   };
 
   const handleDeletePkgConfirm = async () => {
-    await deleteBoundPkg(props.bkBizId, props.appId, bindingId.value, [deleteTemplatePkgId.value]);
+    // await deleteBoundPkg(props.bkBizId, props.appId, bindingId.value, [deleteTemplatePkgId.value]);
+    await deleteCurrBoundPkg(props.bkBizId, props.appId, templateSetId.value);
     await getBoundTemplateList();
     tableGroupsData.value = transListToTableData();
     emits('deleteConfig');
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue
index adfe669594..08e579a56b 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue
@@ -159,7 +159,15 @@
     try {
       pending.value = true;
       const configIds = selectedConfigs.value.map((item) => item.id);
-      await addTemplateToPackage(spaceId.value, currentTemplateSpace.value, configIds, [currentPkg.value as number]);
+      await addTemplateToPackage(
+        spaceId.value,
+        currentTemplateSpace.value,
+        configIds,
+        [currentPkg.value as number],
+        false,
+        currentPkg.value,
+        false,
+      );
       emits('added');
       close();
       Message({
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue
index 16dadf6490..69f8ca3d17 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue
@@ -47,7 +47,7 @@
   const templateStore = useTemplateStore();
 
   const { spaceId, spaceFeatureFlags } = storeToRefs(useGlobalStore());
-  const { currentTemplateSpace } = storeToRefs(useTemplateStore());
+  const { currentTemplateSpace, currentPkg } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -109,8 +109,17 @@
       };
       const res = await createTemplate(spaceId.value, currentTemplateSpace.value, params);
       // 选择未指定套餐时,不需要调用添加接口
+      // 新建配置不存在全选反选，未指定套餐不存在新建
       if (pkgIds.length > 1 || pkgIds[0] !== 0) {
-        await addTemplateToPackage(spaceId.value, currentTemplateSpace.value, [res.data.id], pkgIds);
+        await addTemplateToPackage(
+          spaceId.value,
+          currentTemplateSpace.value,
+          [res.data.id],
+          pkgIds,
+          false,
+          typeof currentPkg.value === 'string' ? 0 : currentPkg.value,
+          false,
+        );
       }
       templateStore.$patch((state) => {
         state.topIds = [res.data.id];
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue
index dcda808f86..5938a3acdc 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue
@@ -12,15 +12,20 @@
     @closed="close">
     <template #header>
       <div class="header-wrapper">
-        <div class="title">{{ isMultiple ? t('批量添加至') : t('添加至套餐') }}</div>
+        <div class="title">{{ isMultiple || isAcrossChecked ? t('批量添加至') : t('添加至套餐') }}</div>
         <div v-if="props.value.length === 1" class="config-name">{{ fileAP(props.value[0]) }}</div>
       </div>
     </template>
-    <div v-if="isMultiple" class="selected-mark">
-      {{ t('已选') }} <span class="num">{{ props.value.length }}</span> {{ t('个配置文件') }}
+    <div v-if="isMultiple || isAcrossChecked" class="selected-mark">
+      {{ t('已选') }}
+      <span class="num">{{ isAcrossChecked ? dataCount - props.value.length : props.value.length }}</span>
+      {{ t('个配置文件') }}
     </div>
     <bk-form ref="formRef" form-type="vertical" :model="{ pkgs: selectedPkgs }">
-      <bk-form-item :label="isMultiple ? t('添加至模板套餐') : t('模板套餐')" property="pkgs" required>
+      <bk-form-item
+        :label="isMultiple || isAcrossChecked ? t('添加至模板套餐') : t('模板套餐')"
+        property="pkgs"
+        required>
         <bk-select v-model="selectedPkgs" multiple @change="handPkgsChange" @clear="handleClearPkgs">
           <bk-option
             v-for="pkg in allPackages"
@@ -67,7 +72,7 @@
   import LinkToApp from '../../../components/link-to-app.vue';
 
   const { spaceId } = storeToRefs(useGlobalStore());
-  const { packageList, currentTemplateSpace, currentPkg } = storeToRefs(useTemplateStore());
+  const { packageList, currentTemplateSpace, currentPkg, isAcrossChecked, dataCount } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -134,6 +139,7 @@
   };
 
   const getCitedData = async () => {
+    console.log('获取表格');
     loading.value = true;
     const params = {
       start: 0,
@@ -165,11 +171,18 @@
   const handleConfirm = async () => {
     const isValid = await formRef.value.validate();
     if (!isValid) return;
-
     try {
       pending.value = true;
       const templateIds = props.value.map((item) => item.id);
-      await addTemplateToPackage(spaceId.value, currentTemplateSpace.value, templateIds, selectedPkgs.value);
+      await addTemplateToPackage(
+        spaceId.value,
+        currentTemplateSpace.value,
+        templateIds,
+        selectedPkgs.value,
+        isAcrossChecked.value,
+        typeof currentPkg.value === 'string' ? 0 : currentPkg.value,
+        currentPkg.value === 'no_specified',
+      );
       emits('added');
       close();
       Message({
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/batch-operations/batch-operation-btn.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/batch-operations/batch-operation-btn.vue
index e5799cc62f..1f750590a2 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/batch-operations/batch-operation-btn.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/batch-operations/batch-operation-btn.vue
@@ -8,7 +8,9 @@
     :arrow="false"
     @after-show="isPopoverOpen = true"
     @after-hidden="isPopoverOpen = false">
-    <bk-button :disabled="props.configs.length === 0" :class="['batch-set-btn', { 'popover-open': isPopoverOpen }]">
+    <bk-button
+      :disabled="props.configs.length === 0 && !isAcrossChecked"
+      :class="['batch-set-btn', { 'popover-open': isPopoverOpen }]">
       {{ t('批量操作') }}
       <AngleDown class="angle-icon" />
     </bk-button>
@@ -31,13 +33,14 @@
   <EditPermissionDialg
     v-model:show="isEditPermissionShow"
     :loading="editLoading"
-    :configs-length="props.configs.length"
+    :configs-length="isAcrossChecked ? dataCount - props.configs.length : props.configs.length"
     :configs="props.configs"
     @confirm="handleConfirmEditPermission($event)" />
   <BatchMoveOutFromPkgDialog
     v-model:show="isBatchMoveDialogShow"
     :current-pkg="props.currentPkg as number"
     :value="props.configs"
+    :value-length="isAcrossChecked ? dataCount - props.configs.length : props.configs.length"
     @moved-out="emits('movedOut')" />
   <MoveOutFromPkgsDialog
     v-model:show="isSingleMoveDialogShow"
@@ -56,8 +59,10 @@
   import { AngleDown } from 'bkui-vue/lib/icon';
   import { useI18n } from 'vue-i18n';
   import { useRoute } from 'vue-router';
+  import { storeToRefs } from 'pinia';
   import Message from 'bkui-vue/lib/message';
   import { ITemplateConfigItem } from '../../../../../../../../types/template';
+  import useTemplateStore from '../../../../../../../store/template';
   import { batchEditTemplatePermission } from '../../../../../../../api/template';
   import AddToDialog from '../add-to-pkgs/add-to-dialog.vue';
   import EditPermissionDialg from '../edit-permission/edit-permission-dialog.vue';
@@ -71,6 +76,7 @@
     user_group: string;
   }
 
+  const { isAcrossChecked, dataCount } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
   const route = useRoute();
 
@@ -79,7 +85,7 @@
     currentTemplateSpace: number;
     configs: ITemplateConfigItem[];
     pkgType: string;
-    currentPkg?: number;
+    currentPkg?: number | string;
   }>();
 
   const emits = defineEmits(['refresh', 'movedOut', 'deleted']);
@@ -134,6 +140,10 @@
         user_group,
         template_ids: props.configs.map((item) => item.id),
         app_ids: appIds,
+        template_space_id: bkBizId.value,
+        current_check_type: isAcrossChecked,
+        template_set_id: props.currentPkg !== undefined ? props.currentPkg : 0,
+        no_set_specified: props.pkgType === 'without',
       };
       await batchEditTemplatePermission(bkBizId.value, query);
       Message({
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue
index b2a43f45db..959ecf2f1f 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue
@@ -1,12 +1,16 @@
 <template>
   <bk-dialog
     v-if="props.isBatchDelete"
-    :title="t('确认删除所选的 {n} 个配置文件?', { n: props.configs.length })"
+    :title="
+      t('确认删除所选的 {n} 个配置文件?', {
+        n: isAcrossChecked ? dataCount - props.configs.length : props.configs.length,
+      })
+    "
     header-align="left"
     :is-show="props.show"
     ext-cls="delete-confirm-dialog">
     <div class="tips">{{ t('一旦删除，该操作将无法撤销，请谨慎操作') }}</div>
-    <bk-table :data="props.configs" border="outer" max-height="200">
+    <bk-table v-show="!isAcrossChecked" :data="props.configs" border="outer" max-height="200">
       <bk-table-column :label="t('配置文件绝对路径')">
         <template #default="{ row }">
           <span v-if="row.spec">{{ fileAP(row) }}</span>
@@ -50,7 +54,7 @@
   import { deleteTemplate } from '../../../../../../../api/template';
   import DeleteConfirmDialog from '../../../../../../../components/delete-confirm-dialog.vue';
   const { spaceId } = storeToRefs(useGlobalStore());
-  const { currentTemplateSpace } = storeToRefs(useTemplateStore());
+  const { currentTemplateSpace, isAcrossChecked, dataCount } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -76,7 +80,7 @@
     try {
       pending.value = true;
       const ids = props.configs.map((config) => config.id);
-      await deleteTemplate(spaceId.value, currentTemplateSpace.value, ids);
+      await deleteTemplate(spaceId.value, currentTemplateSpace.value, ids, isAcrossChecked.value);
       close();
       setTimeout(() => {
         emits('deleted');
@@ -109,4 +113,3 @@
     margin-top: 8px;
   }
 </style>
-
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue
index d7131eadbc..0dbd8cc934 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue
@@ -12,7 +12,7 @@
     @confirm="handleConfirm"
     @closed="close">
     <div class="selected-mark">
-      {{ t('已选') }} <span class="num">{{ props.value.length }}</span> {{ t('个配置文件') }}
+      {{ t('已选') }} <span class="num">{{ props.valueLength }}</span> {{ t('个配置文件') }}
     </div>
     <p class="tips">{{ t('以下服务配置的未命名版本中引用此套餐的内容也将更新') }}</p>
     <div class="service-table">
@@ -45,13 +45,14 @@
   import LinkToApp from '../../../components/link-to-app.vue';
 
   const { spaceId } = storeToRefs(useGlobalStore());
-  const { packageList, currentTemplateSpace } = storeToRefs(useTemplateStore());
+  const { packageList, currentTemplateSpace, isAcrossChecked } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
   const props = defineProps<{
     show: boolean;
     currentPkg: number;
     value: ITemplateConfigItem[];
+    valueLength: number;
   }>();
 
   const emits = defineEmits(['update:show', 'movedOut']);
@@ -96,6 +97,7 @@
       params,
     );
     citedList.value = res.details;
+    console.log('res.details', res.details);
     loading.value = false;
   };
 
@@ -106,7 +108,14 @@
     try {
       pending.value = true;
       const ids = props.value.map((item) => item.id);
-      await moveOutTemplateFromPackage(spaceId.value, currentTemplateSpace.value, ids, [props.currentPkg as number]);
+      await moveOutTemplateFromPackage(
+        spaceId.value,
+        currentTemplateSpace.value,
+        ids,
+        [props.currentPkg as number],
+        isAcrossChecked.value,
+        pkg.id, // 全部配置文件/未指定套餐没有移出套餐选项
+      );
       emits('movedOut');
       close();
       Message({
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue
index fecdba98c6..102c28913a 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue
@@ -67,13 +67,14 @@
   } from '../../../../../../../api/template';
 
   interface ICitedItem {
+    template_id: number;
     id: number;
     name: string;
     appNames: string;
   }
 
   const { spaceId } = storeToRefs(useGlobalStore());
-  const { currentTemplateSpace } = storeToRefs(useTemplateStore());
+  const { currentTemplateSpace, isAcrossChecked } = storeToRefs(useTemplateStore());
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -126,13 +127,15 @@
         params,
       );
       citedPkgsRes.details[0].forEach((item) => {
-        const { template_set_id, template_set_name } = item;
+        // console.log(item, 'item');
+        const { template_set_id, template_set_name, template_id } = item;
         const appNames: string =
           citedAppsRes.details
             .filter((appItem: IPackagesCitedByApps) => appItem.template_set_id === template_set_id)
             .map((appItem: IPackagesCitedByApps) => appItem.app_name)
             .join(',') || '--';
         list.push({
+          template_id,
           id: template_set_id,
           name: template_set_name,
           appNames,
@@ -184,7 +187,14 @@
   const handleConfirm = async () => {
     try {
       pending.value = true;
-      await moveOutTemplateFromPackage(spaceId.value, currentTemplateSpace.value, [props.id], selectedPkgs.value);
+      await moveOutTemplateFromPackage(
+        spaceId.value,
+        currentTemplateSpace.value,
+        [props.id],
+        selectedPkgs.value,
+        isAcrossChecked.value,
+        typeof props.currentPkg === 'string' ? 0 : props.currentPkg,
+      );
       emits('movedOut');
       close();
       Message({
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue
index b9db4a2000..fa49dddd54 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue
@@ -26,10 +26,15 @@
         :remote-pagination="true"
         :pagination="pagination"
         @page-limit-change="handlePageLimitChange"
-        @page-value-change="refreshList($event, true)"
-        @selection-change="handleSelectionChange"
-        @select-all="handleSelectAll">
-        <bk-table-column type="selection" :min-width="40" :width="40"></bk-table-column>
+        @page-value-change="handlePageChange($event)">
+        <template #prepend>
+          <render-table-tip />
+        </template>
+        <bk-table-column :min-width="73" :width="73" :label="renderSelection">
+          <template #default="{ row }">
+            <across-check-box :checked="isChecked(row)" :handle-change="() => handleSelectionChange(row)" />
+          </template>
+        </bk-table-column>
         <bk-table-column :label="t('配置文件绝对路径')">
           <template #default="{ row }">
             <div v-if="row.spec" v-overflow-title class="config-name" @click="handleViewConfig(row)">
@@ -158,7 +163,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, watch, computed } from 'vue';
+  import { onMounted, ref, watch, computed, toRef } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRouter } from 'vue-router';
   import { storeToRefs } from 'pinia';
@@ -167,7 +172,9 @@
   import useGlobalStore from '../../../../../../store/global';
   import useTemplateStore from '../../../../../../store/template';
   import { ICommonQuery } from '../../../../../../../types/index';
+  import CheckType from '../../../../../../../types/across-checked';
   import useTablePagination from '../../../../../../utils/hooks/use-table-pagination';
+  import useTableAcrossCheck from '../../../../../../utils/hooks/use-table-acrosscheck';
   import {
     ITemplateCitedCountDetailItem,
     ITemplateCitedByPkgs,
@@ -182,6 +189,7 @@
   import TableEmpty from '../../../../../../components/table/table-empty.vue';
   import DownloadConfig from '../operations/download-config/download-config.vue';
   import DeleteConfigDialog from '../operations/delete-configs/delete-config-dialog.vue';
+  import acrossCheckBox from '../../../../../../components/across-checkbox.vue';
   import ViewConfig from '../operations/view-config/view-config.vue';
   import EditConfig from '../operations/edit-config/edit-config.vue';
 
@@ -189,7 +197,7 @@
   const { t, locale } = useI18n();
   const { spaceId } = storeToRefs(useGlobalStore());
   const templateStore = useTemplateStore();
-  const { currentTemplateSpace, topIds } = storeToRefs(templateStore);
+  const { currentTemplateSpace, topIds, isAcrossChecked } = storeToRefs(templateStore);
   const { pagination, updatePagination } = useTablePagination('commonConfigTable');
 
   const props = defineProps<{
@@ -229,6 +237,16 @@
   const selectConfigMemo = ref('');
   const configCiteByPkgIds = ref<number[]>([]);
 
+  const crossPageSelect = computed(() => pagination.value.limit < pagination.value.count);
+
+  const { selectType, selections, renderSelection, renderTableTip, handleRowCheckChange, handleClearSelection } =
+    useTableAcrossCheck({
+      dataCount: toRef(pagination.value, 'count'),
+      curPageData: list, // 当前页数据
+      rowKey: ['id'],
+      crossPageSelect,
+    });
+
   watch(
     () => props.currentPkg,
     () => {
@@ -236,8 +254,15 @@
       loadConfigList();
     },
   );
+  watch(selections, () => {
+    templateStore.$patch((state) => {
+      state.isAcrossChecked = [CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value);
+    });
+    emits('update:selectedConfigs', selections.value);
+  });
 
   onMounted(() => {
+    handleClearSelection();
     loadConfigList();
   });
 
@@ -271,6 +296,9 @@
     const res = await props.getConfigList(params);
     list.value = res.details;
     pagination.value.count = res.count;
+    templateStore.$patch((state) => {
+      state.dataCount = res.count;
+    });
     listLoading.value = false;
     const ids = list.value.map((item) => item.id);
     citeByPkgsList.value = [];
@@ -301,9 +329,18 @@
     boundByAppsCountLoading.value = false;
   };
 
-  const refreshList = (current = 1, createConfig = false) => {
+  // 翻页
+  const handlePageChange = (event: number) => {
+    refreshList(event, true, true);
+  };
+
+  const refreshList = (current = 1, createConfig = false, pageChange = false) => {
     isSearchEmpty.value = searchStr.value !== '';
     pagination.value.current = current;
+    // 非跨页全选/半选 需要重置全选状态
+    if (![CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value) || !pageChange) {
+      handleClearSelection();
+    }
     loadConfigList(createConfig);
   };
 
@@ -318,28 +355,27 @@
     refreshList();
   };
 
-  const handleSearchInputChange = debounce(() => refreshList(), 300);
-  const handleSelectionChange = ({ checked, row }: { checked: boolean; row: ITemplateConfigItem }) => {
-    const configs = props.selectedConfigs.slice();
-    if (checked) {
-      if (!configs.find((item) => item.id === row.id)) {
-        configs.push(row);
-      }
-    } else {
-      const index = configs.findIndex((item) => item.id === row.id);
-      if (index > -1) {
-        configs.splice(index, 1);
-      }
-    }
-    emits('update:selectedConfigs', configs);
+  const handleSearchInputChange = debounce(() => {
+    refreshList();
+  }, 300);
+
+  const handleSelectionChange = (row: ITemplateConfigItem) => {
+    const isSelected = selections.value.some((item) => item.id === row.id);
+    // const isAcrossChecked = [CheckType.AcrossChecked, CheckType.HalfAcrossChecked].includes(selectType.value);
+    const shouldBeChecked = isAcrossChecked.value ? isSelected : !isSelected;
+    // 根据选择类型决定传递的状态
+    handleRowCheckChange(shouldBeChecked, row);
+    emits('update:selectedConfigs', selections.value);
   };
 
-  const handleSelectAll = ({ checked }: { checked: boolean }) => {
-    if (checked) {
-      emits('update:selectedConfigs', list.value);
-    } else {
-      emits('update:selectedConfigs', []);
+  // 选中状态
+  const isChecked = (row: ITemplateConfigItem) => {
+    if (![CheckType.AcrossChecked, CheckType.HalfAcrossChecked].includes(selectType.value)) {
+      // 当前页状态传递
+      return selections.value.some((item) => item.id === row.id);
     }
+    // 跨页状态传递
+    return !selections.value.some((item) => item.id === row.id);
   };
 
   // 添加至套餐
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/variables/batch-delete-btn.vue b/bcs-services/bcs-bscp/ui/src/views/space/variables/batch-delete-btn.vue
index d37943ebe9..6ad8b0d33e 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/variables/batch-delete-btn.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/variables/batch-delete-btn.vue
@@ -1,13 +1,17 @@
 <template>
   <bk-button
     class="batch-delete-btn"
-    :disabled="props.selectedIds.length === 0"
+    :disabled="props.selectedIds.length === 0 && !isAcrossChecked"
     @click="isBatchDeleteDialogShow = true">
     {{ t('批量删除') }}
   </bk-button>
   <DeleteConfirmDialog
     v-model:isShow="isBatchDeleteDialogShow"
-    :title="t('确认删除所选的 {n} 项变量？', { n: props.selectedIds.length })"
+    :title="
+      t('确认删除所选的 {n} 项变量？', {
+        n: isAcrossChecked ? dataCount - props.selectedIds.length : props.selectedIds.length,
+      })
+    "
     :pending="batchDeletePending"
     @confirm="handleBatchDeleteConfirm">
     <div>
@@ -27,6 +31,8 @@
   const props = defineProps<{
     bkBizId: string;
     selectedIds: number[];
+    isAcrossChecked: boolean;
+    dataCount: number;
   }>();
 
   const emits = defineEmits(['deleted']);
@@ -36,7 +42,7 @@
 
   const handleBatchDeleteConfirm = async () => {
     batchDeletePending.value = true;
-    await batchDeleteVariable(props.bkBizId, props.selectedIds);
+    await batchDeleteVariable(props.bkBizId, props.selectedIds, props.isAcrossChecked);
     Message({
       theme: 'success',
       message: t('批量删除变量成功'),
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/variables/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/variables/index.vue
index a16f499ace..a5e2652a75 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/variables/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/variables/index.vue
@@ -15,9 +15,14 @@
           {{ t('新增变量') }}
         </bk-button>
         <bk-button @click="isImportVariableShow = true">{{ t('导入变量') }}</bk-button>
-        <VaribaleExport :biz-id="spaceId" />
+        <!-- <VaribaleExport :biz-id="spaceId" /> -->
         <bk-button :disabled="list.length === 0" @click="handleExport">{{ t('导出变量') }} </bk-button>
-        <BatchDeleteBtn :bk-biz-id="spaceId" :selected-ids="selectedIds" @deleted="refreshAfterBatchDelete" />
+        <BatchDeleteBtn
+          :bk-biz-id="spaceId"
+          :selected-ids="selectedIds"
+          :is-across-checked="isAcrossChecked"
+          :data-count="pagination.count"
+          @deleted="refreshAfterBatchDelete" />
       </div>
       <SearchInput v-model="searchStr" :placeholder="t('请输入变量名称')" :width="320" @search="refreshList()" />
     </div>
@@ -26,14 +31,19 @@
         :border="['outer']"
         :data="list"
         :remote-pagination="true"
-        :checked="checkedVariables"
         :pagination="pagination"
         show-overflow-tooltip
-        @selection-change="handleSelectionChange"
-        @select-all="handleSelectAll"
         @page-limit-change="handlePageLimitChange"
-        @page-value-change="refreshList">
-        <bk-table-column type="selection" :width="60"></bk-table-column>
+        @page-value-change="refreshList($event, true)">
+        <template #prepend>
+          <render-table-tip />
+        </template>
+        <bk-table-column :min-width="80" :width="80" :label="renderSelection" :show-overflow-tooltip="false">
+          <template #default="{ row }">
+            <across-check-box :checked="isChecked(row)" :handle-change="() => handleSelectionChange(row)" />
+          </template>
+        </bk-table-column>
+        <!-- <bk-table-column type="selection" :width="60"></bk-table-column> -->
         <bk-table-column :label="t('变量名称')" width="300">
           <template #default="{ row }">
             <div v-if="row.spec" class="var-name-wrapper">
@@ -83,7 +93,7 @@
   </DeleteConfirmDialog>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, computed, watch } from 'vue';
+  import { onMounted, ref, computed, watch, toRef } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { storeToRefs } from 'pinia';
   import { Plus, Copy } from 'bkui-vue/lib/icon';
@@ -102,6 +112,9 @@
   import SearchInput from '../../../components/search-input.vue';
   import TableEmpty from '../../../components/table/table-empty.vue';
   import DeleteConfirmDialog from '../../../components/delete-confirm-dialog.vue';
+  import useTableAcrossCheck from '../../../utils/hooks/use-table-acrosscheck';
+  import acrossCheckBox from '../../../components/across-checkbox.vue';
+  import CheckType from '../../../../types/across-checked';
 
   const { spaceId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
@@ -126,11 +139,17 @@
     },
   });
   const isSearchEmpty = ref(false);
+  const isAcrossChecked = ref(false);
 
-  // table组件的checked属性需要的类型为string[]|rowItem[]，所以这里传原始数据
-  const checkedVariables = computed(() => {
-    return list.value.filter((item) => selectedIds.value.includes(item.id));
-  });
+  const crossPageSelect = computed(() => pagination.value.limit < pagination.value.count);
+
+  const { selectType, selections, renderSelection, renderTableTip, handleRowCheckChange, handleClearSelection } =
+    useTableAcrossCheck({
+      dataCount: toRef(pagination.value, 'count'),
+      curPageData: list, // 当前页数据
+      rowKey: ['id'],
+      crossPageSelect,
+    });
 
   watch(
     () => spaceId.value,
@@ -138,11 +157,31 @@
       refreshList();
     },
   );
+  watch(
+    selections,
+    () => {
+      isAcrossChecked.value = [CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value);
+      selectedIds.value = selections.value.map((item) => item.id);
+    },
+    {
+      deep: true,
+    },
+  );
 
   onMounted(() => {
     getVariables();
   });
 
+  // 选中状态
+  const isChecked = (row: IVariableItem) => {
+    if (![CheckType.AcrossChecked, CheckType.HalfAcrossChecked].includes(selectType.value)) {
+      // 当前页状态传递
+      return selections.value.some((item) => item.id === row.id);
+    }
+    // 跨页状态传递
+    return !selections.value.some((item) => item.id === row.id);
+  };
+
   const getVariables = async () => {
     loading.value = true;
     const params: ICommonQuery = {
@@ -174,24 +213,11 @@
   };
 
   // 表格行选择事件
-  const handleSelectionChange = ({ checked, row }: { checked: boolean; row: IVariableItem }) => {
-    const index = selectedIds.value.findIndex((id) => id === row.id);
-    if (checked) {
-      if (index === -1) {
-        selectedIds.value.push(row.id);
-      }
-    } else {
-      selectedIds.value.splice(index, 1);
-    }
-  };
-
-  // 全选
-  const handleSelectAll = ({ checked }: { checked: boolean }) => {
-    if (checked) {
-      selectedIds.value = list.value.map((item) => item.id);
-    } else {
-      selectedIds.value = [];
-    }
+  const handleSelectionChange = (row: IVariableItem) => {
+    const isSelected = selections.value.some((item) => item.id === row.id);
+    // 根据选择类型决定传递的状态
+    const shouldBeChecked = isAcrossChecked.value ? isSelected : !isSelected;
+    handleRowCheckChange(shouldBeChecked, row);
   };
 
   // 复制
@@ -237,9 +263,13 @@
     refreshList(pagination.value.current);
   };
 
-  const refreshList = (current = 1) => {
+  const refreshList = (current = 1, pageChange = false) => {
     isSearchEmpty.value = searchStr.value !== '';
     pagination.value.current = current;
+    // 非跨页全选/半选 需要重置全选状态
+    if (![CheckType.HalfAcrossChecked, CheckType.AcrossChecked].includes(selectType.value) || !pageChange) {
+      handleClearSelection();
+    }
     getVariables();
   };
 
diff --git a/bcs-services/bcs-bscp/ui/types/across-checked.ts b/bcs-services/bcs-bscp/ui/types/across-checked.ts
new file mode 100644
index 0000000000..18b646fd6a
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/types/across-checked.ts
@@ -0,0 +1,8 @@
+enum CheckType {
+  Uncheck, // 0 未选
+  HalfChecked, // 1 当前页半选
+  HalfAcrossChecked, // 2 跨页半选
+  Checked, // 3 当前页全选
+  AcrossChecked, // 4 跨页全选
+}
+export default CheckType;