diff --git a/bcs-ui/frontend/src/common/constant.ts b/bcs-ui/frontend/src/common/constant.ts
index 1d9dd92cb0..23cf398287 100644
--- a/bcs-ui/frontend/src/common/constant.ts
+++ b/bcs-ui/frontend/src/common/constant.ts
@@ -26,6 +26,15 @@ export const SECRET_REGEX = '^[0-9a-zA-Z-~]+$';
 export const SECRETKEY_REGEX = '^[0-9a-zA-Z/-]+$';
 export const CLUSTER_NAME_REGEX = '^[0-9A-Za-z][A-Za-z0-9-_]*';
 
+// 只能包含小写字母（[a-z]）、数字字符（[0-9]）、下划线（_）和破折号（-），并且必须以字母开头
+export const GKE_LABEL_NAME_REGEX = '^[a-z][a-z0-9_-]*$';
+
+// 内网cidr 正则
+export const INTRANET_CIDR_REGEX = '\\b(10\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}|172\\.(1[6-9]|2[0-9]|3[0-1])\\.\\d{1,3}\\.\\d{1,3}|192\\.168\\.\\d{1,3}\\.\\d{1,3})\\/([0-9]|[1-2][0-9]|3[0-2])\\b';
+
+// 公网cidr 正则
+export const INTERNET_CIDR_REGEX = '\\b((?!(10|127)\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}|172\\.(1[6-9]|2[0-9]|3[0-1])\\.\\d{1,3}\\.\\d{1,3}|192\\.168\\.\\d{1,3}\\.\\d{1,3}|0\\.0\\.0\\.0|255\\.255\\.255\\.255))(\\d{1,3}\\.){3}\\d{1,3}\\/([0-9]|[1-2][0-9]|3[0-2])\\b';
+
 // 集群环境
 export const CLUSTER_ENV = {
   stag: 'UAT',
diff --git a/bcs-ui/frontend/src/i18n/en-US.yaml b/bcs-ui/frontend/src/i18n/en-US.yaml
index 9af0403955..53f06b992c 100644
--- a/bcs-ui/frontend/src/i18n/en-US.yaml
+++ b/bcs-ui/frontend/src/i18n/en-US.yaml
@@ -30,6 +30,8 @@ bcs:
     cloud: Cloud credential import
     platform: Platform created
     machine: Machine
+    autopilot: AutoPilot
+    standard: Standard
   msg:
     emptyHostResource: >-
       You do not have any host resources under the current business. Please
@@ -500,6 +502,9 @@ generic:
     clusterName: >-
       The cluster name can only contain numbers, letters, mid-line lines (-),
       down line (_), The beginning must be numbers or letters
+    gkeLable: >-
+      Can only contain lowercase letters ([a-z]), numeric characters ([0-9]),
+      underscores (_), and dashes (-), and must start with a letter
   title:
     curVersion: Current
     diffVersion: Comparison version
@@ -956,6 +961,24 @@ cluster:
           create a new Safety group, please go to the appropriate page in the
           {0}.'
         vpcMaster: VPC console
+    google:
+      labels:
+        areaType: Area Type
+        region: region
+        zone: zone
+      tips:
+        containerNet: >-
+          All pods in the cluster will be assigned an IP address from this range.
+          Please enter a range and mask in CIDR notation within the network range.
+          Once this setting is confirmed, it cannot be changed, so please evaluate
+          carefully before filling it in.
+        autopilot: >-
+          GKE manages the underlying infrastructure, such as node configuration,
+          auto-scaling, automatic upgrades, baseline security configurations,
+          and baseline network configurations.
+        standard: >-
+          You are responsible for managing the underlying infrastructure,
+          including configuring the individual nodes.
   detail:
     title:
       overview: Overview
diff --git a/bcs-ui/frontend/src/i18n/zh-CN.yaml b/bcs-ui/frontend/src/i18n/zh-CN.yaml
index b4d611fac8..5eecd3b90e 100644
--- a/bcs-ui/frontend/src/i18n/zh-CN.yaml
+++ b/bcs-ui/frontend/src/i18n/zh-CN.yaml
@@ -24,6 +24,8 @@ bcs:
     cloud: 云凭证导入
     platform: 平台创建
     machine: 控制面服务器导入
+    autopilot: 托管集群
+    standard: 标准集群
   msg:
     emptyHostResource: 您在当前业务下没有主机资源，请联系业务运维
     notDevOps: 您不是当前项目绑定业务的运维人员，请联系业务运维人员
@@ -462,6 +464,7 @@ generic:
     fieldRequired: '{0} 必填'
     fieldRepeat: '{0} 重复'
     clusterName: 集群名称只能包含数字、字母、中划线(-)、下划线(_)，且开头必须是数字或字母
+    gkeLable: '只能包含小写字母（[a-z]）、数字字符（[0-9]）、下划线（_）和破折号（-），并且必须以字母开头'
   title:
     createPublicCluster: 新建公有云集群
     diffVersion: 线上版本
@@ -807,6 +810,15 @@ cluster:
         text: 安全组
         vpcLink: '选择将应用到在您的控制平面子网中创建的 AKS 托管弹性网络接口的安全组。 要创建新的安全组，请转到 {0}  中的相应页面。'
         vpcMaster: VPC 控制台
+    google:
+      labels:
+        areaType: 位置类型
+        region: 区域
+        zone: 可用区
+      tips:
+        containerNet: 集群中所有 pod 都会分配一个此范围的IP地址。请以 CIDR 表示法输入网络范围内一个范围、掩码，此设置一经确定便无法更改，请谨慎评估后填写
+        autopilot: GKE管理底层基础架构，例如节点配置、自动扩缩、自动升级、基准安全配置和基准网络配置。
+        standard: 您负责管理底层基础架构，包括配置各个节点。
   detail:
     title:
       overview: 集群总览
diff --git a/bcs-ui/frontend/src/router/cluster-manage.ts b/bcs-ui/frontend/src/router/cluster-manage.ts
index d5beb71457..b5f0d877ff 100644
--- a/bcs-ui/frontend/src/router/cluster-manage.ts
+++ b/bcs-ui/frontend/src/router/cluster-manage.ts
@@ -14,8 +14,10 @@ const CreateVCluster = () => import(/* webpackChunkName: 'cluster' */'@/views/cl
 const CreateK8SCluster = () => import(/* webpackChunkName: 'cluster' */'@/views/cluster-manage/add/create/k8s.vue');
 // 创建aws云集群
 const CreateAWSCloudCluster = () => import(/* webpackChunkName: 'cluster' */'@/views/cluster-manage/add/create/aws-cloud/index.vue');
-// 创建aws云集群
+// 创建微软云集群
 const CreateAzureCloudCluster = () => import(/* webpackChunkName: 'cluster' */'@/views/cluster-manage/add/create/azure-cloud/index.vue');
+// 创建谷歌云集群
+const CreateGoogleCloudCluster = () => import(/* webpackChunkName: 'cluster' */'@/views/cluster-manage/add/create/google-cloud/index.vue');
 
 // import模式
 const ImportCluster = () => import(/* webpackChunkName: 'cluster' */'@/views/cluster-manage/add/import/import-cluster.vue');
@@ -177,6 +179,16 @@ export default [
       hideMenu: true,
     },
   },
+  // 创建谷歌云集群
+  {
+    path: 'clusters/cloud/google',
+    name: 'CreateGoogleCloudCluster',
+    component: CreateGoogleCloudCluster,
+    meta: {
+      menuId: 'CLUSTER',
+      hideMenu: true,
+    },
+  },
   // 创建k8s原生集群
   {
     path: 'clusters/k8s',
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/components/region.vue b/bcs-ui/frontend/src/views/cluster-manage/add/components/region.vue
index 97930e74f2..7a9252bd3d 100644
--- a/bcs-ui/frontend/src/views/cluster-manage/add/components/region.vue
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/components/region.vue
@@ -41,6 +41,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  filter: {
+    type: Function,
+    default: null,
+  },
 });
 const emits = defineEmits(['input', 'change']);
 // 区域列表
@@ -56,6 +60,9 @@ const handleGetRegionList = async () => {
   }).catch(() => []);
   $store.commit('cloudMetadata/updateRegionList', data);
   regionList.value = data.filter(item => item.regionState === 'AVAILABLE');
+  if (props.filter) {
+    regionList.value = props.filter(regionList.value, handleGetRegionList);
+  }
   regionLoading.value = false;
 };
 
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/components/subnet.vue b/bcs-ui/frontend/src/views/cluster-manage/add/components/subnet.vue
new file mode 100644
index 0000000000..85dc64ce78
--- /dev/null
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/components/subnet.vue
@@ -0,0 +1,95 @@
+<template>
+  <bk-select
+    searchable
+    :clearable="false"
+    :loading="subnetLoading"
+    :value="value"
+    @change="handleSubnetChange">
+    <bk-option
+      v-for="net in subnets"
+      :key="net.subnetID"
+      :id="net.subnetID"
+      :name="`${net.subnetName}(${net.subnetID})`"
+      :disabled="!net.availableIPAddressCount || !!Object.keys(net.cluster || {}).length">
+      <div
+        class="flex items-center justify-between"
+        v-bk-tooltips="{
+          content: Object.keys(net.cluster || {}).length
+            ? $t('tke.tips.subnetInUsed', [net.cluster ? net.cluster.clusterName : ''])
+            : $t('tke.tips.noAvailableIp'),
+          disabled: net.availableIPAddressCount && !Object.keys(net.cluster || {}).length,
+          placement: 'left'
+        }">
+        <span>{{ `${net.subnetName}(${net.subnetID})` }}</span>
+        <span
+          :class="(!net.availableIPAddressCount || Object.keys(net.cluster || {}).length) ? '':'text-[#979BA5]'">
+          {{ `${$t('tke.label.availableIpNum')}: ${net.availableIPAddressCount}` }}
+        </span>
+      </div>
+    </bk-option>
+  </bk-select>
+</template>
+<script setup lang="ts">
+import { onBeforeMount, ref, watch } from 'vue';
+
+import { ISubnet } from '../../types/types';
+
+import { cloudSubnets } from '@/api/modules/cluster-manager';
+
+const props = defineProps({
+  value: {
+    type: String,
+  },
+  region: {
+    type: String,
+    default: '',
+  },
+  cloudAccountID: {
+    type: String,
+    default: '',
+  },
+  cloudID: {
+    type: String,
+    default: '',
+  },
+  vpcId: {
+    type: String,
+    default: '',
+  },
+});
+
+const emits = defineEmits(['input', 'change']);
+
+// 子网
+const subnets = ref<Array<ISubnet>>([]);
+const subnetLoading = ref(false);
+const handleGetSubnets = async () => {
+  if (!props.cloudAccountID || !props.region || !props.vpcId) return;
+  subnetLoading.value = true;
+  subnets.value = await cloudSubnets({
+    $cloudId: props.cloudID,
+    region: props.region,
+    accountID: props.cloudAccountID,
+    vpcID: props.vpcId,
+    injectCluster: true,
+  }).catch(() => []);
+  subnetLoading.value = false;
+};
+
+const handleSubnetChange = (subnetID: string) => {
+  emits('change', subnetID);
+  emits('input', subnetID);
+};
+
+watch([
+  () => props.region,
+  () => props.cloudAccountID,
+  () => props.vpcId,
+], () => {
+  handleGetSubnets();
+});
+
+onBeforeMount(() => {
+  handleGetSubnets();
+});
+</script>
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/components/vpc.vue b/bcs-ui/frontend/src/views/cluster-manage/add/components/vpc.vue
index dd69bfcc2a..59d01e61f9 100644
--- a/bcs-ui/frontend/src/views/cluster-manage/add/components/vpc.vue
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/components/vpc.vue
@@ -10,7 +10,7 @@
     <bk-option
       v-for="item in vpcList"
       :key="item.vpcId"
-      :id="item.vpcId"
+      :id="item[valueKey]"
       :name="`${item.name}(${item.vpcId})`">
       <div class="flex items-center place-content-between">
         <span>
@@ -20,6 +20,7 @@
       </div>
     </bk-option>
     <SelectExtension
+      v-if="showLink"
       slot="extension"
       :link-text="$t('tke.link.vpc')"
       link="https://console.cloud.tencent.com/vpc/vpc"
@@ -62,6 +63,14 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  showLink: {
+    type: Boolean,
+    default: true,
+  },
+  valueKey: {
+    type: String,
+    default: 'vpcId',
+  },
 });
 const emits = defineEmits(['input', 'change']);
 
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/components/zone.vue b/bcs-ui/frontend/src/views/cluster-manage/add/components/zone.vue
index 357418be51..493dcca44a 100644
--- a/bcs-ui/frontend/src/views/cluster-manage/add/components/zone.vue
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/components/zone.vue
@@ -3,6 +3,7 @@
     searchable
     :clearable="false"
     :value="value"
+    :loading="zoneLoading"
     @change="handleZoneChange">
     <bcs-option
       v-for="zone in zoneList"
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/create/aws-cloud/master.vue b/bcs-ui/frontend/src/views/cluster-manage/add/create/aws-cloud/master.vue
index e2b14d8de4..45629649b9 100644
--- a/bcs-ui/frontend/src/views/cluster-manage/add/create/aws-cloud/master.vue
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/create/aws-cloud/master.vue
@@ -27,7 +27,7 @@
       <NetworkSelector
         :ref="el => networkSelectorRef = el"
         class="max-w-[600px]"
-        :value="masterConfig.clusterAdvanceSettings.clusterConnectSetting"
+        :value="connectConfig"
         :region="region"
         :cloud-account-i-d="cloudAccountID"
         :cloud-i-d="cloudID"
@@ -35,7 +35,7 @@
           { label: $t('tke.label.apiServerCLB.internet'), value: 'internet' },
           { label: $t('tke.label.apiServerCLB.intranet'), value: 'intranet' },
         ]"
-        @change="(v) => masterConfig.clusterAdvanceSettings.clusterConnectSetting = v" />
+        @change="handleChange" />
     </bk-form-item>
     <div class="flex items-center h-[48px] bg-[#FAFBFD] px-[24px] fixed bottom-0 left-0 w-full bcs-border-top">
       <bk-button @click="preStep">{{ $t('generic.button.pre') }}</bk-button>
@@ -86,10 +86,8 @@ const masterConfig = ref({
   autoGenerateMasterNodes: true,
   clusterAdvanceSettings: {
     clusterConnectSetting: {
-      ITNType: 'intranet',
       isExtranet: false,
       subnetId: '',
-      cidrs: [],
       internet: {
         publicIPAssigned: false,
         publicAccessCidrs: [],
@@ -98,6 +96,16 @@ const masterConfig = ref({
   },
 });
 
+const connectConfig = ref({
+  ITNType: 'intranet',
+  isExtranet: false,
+  cidrs: [],
+  internet: {
+    publicIPAssigned: false,
+    publicAccessCidrs: [],
+  },
+});
+
 const networkSelectorRef = ref<InstanceType<typeof NetworkSelector> | null>(null);
 // 动态 i18n 问题，这里使用computed
 const masterConfigRules = computed(() => ({
@@ -106,7 +114,7 @@ const masterConfigRules = computed(() => ({
       trigger: 'blur',
       message: $i18n.t('generic.validate.required'),
       async validator() {
-        if (masterConfig.value.clusterAdvanceSettings.clusterConnectSetting.ITNType === 'internet') {
+        if (connectConfig.value.ITNType === 'internet') {
           return await networkSelectorRef.value?.validate();
         }
         return true;
@@ -115,6 +123,16 @@ const masterConfigRules = computed(() => ({
   ],
 }));
 
+// 整理参数
+function handleChange(data) {
+  connectConfig.value = data;
+  masterConfig.value.clusterAdvanceSettings.clusterConnectSetting.isExtranet = data?.isExtranet;
+  // eslint-disable-next-line max-len
+  masterConfig.value.clusterAdvanceSettings.clusterConnectSetting.internet.publicAccessCidrs = data?.internet?.publicAccessCidrs;
+  // eslint-disable-next-line max-len
+  if (!data?.isExtranet) masterConfig.value.clusterAdvanceSettings.clusterConnectSetting.internet.publicAccessCidrs = [];
+};
+
 // master配置
 const handleChangeManageType = (type: 'INDEPENDENT_CLUSTER' | 'MANAGED_CLUSTER') => {
   masterConfig.value.manageType = type;
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/basic-pool-info.vue b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/basic-pool-info.vue
new file mode 100644
index 0000000000..640ddc4c1a
--- /dev/null
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/basic-pool-info.vue
@@ -0,0 +1,309 @@
+<!-- eslint-disable max-len -->
+<template>
+  <bk-form class="node-pool-info" :model="nodePoolInfo" :rules="nodePoolInfoRules" ref="formRef">
+    <bk-form-item
+      :label="$t('cluster.ca.nodePool.label.nodeQuota')"
+      property="maxSize"
+      required
+      error-display-type="normal">
+      <bk-input
+        class="w74"
+        int
+        v-model="nodePoolInfo.autoScaling.maxSize"
+        :min="0"
+        type="number">
+      </bk-input>
+    </bk-form-item>
+    <bk-form-item
+      :label="$t('cluster.ca.nodePool.label.nodeCounts')"
+      property="desiredSize"
+      required
+      error-display-type="normal">
+      <bk-input
+        class="w74"
+        int
+        v-model="nodePoolInfo.autoScaling.desiredSize"
+        :min="0"
+        type="number">
+      </bk-input>
+    </bk-form-item>
+    <bk-form-item
+      :label="$t('cluster.ca.nodePool.create.enableAutoscale.title')"
+      :desc="$t('cluster.ca.nodePool.create.enableAutoscale.tips')">
+      <bk-checkbox v-model="nodePoolInfo.enableAutoscale" :disabled="isEdit"></bk-checkbox>
+    </bk-form-item>
+    <bk-form-item :label="$t('k8s.label')" property="labels" error-display-type="normal">
+      <KeyValue
+        class="max-w-[420px]"
+        :min-item="0"
+        :disable-delete-item="false"
+        v-model="nodePoolInfo.nodeTemplate.labels">
+      </KeyValue>
+    </bk-form-item>
+    <bk-form-item :label="$t('k8s.taint')" property="taints" error-display-type="normal">
+      <span
+        class="add-key-value-items" v-if="!nodePoolInfo.nodeTemplate.taints.length"
+        @click="handleAddTaints">
+        <i class="bk-icon icon-plus-circle-shape mr5"></i>
+        {{$t('generic.button.add')}}
+      </span>
+      <Taints
+        class="taints"
+        :effect-options="effectEnum"
+        :key-rules="[]"
+        v-model="nodePoolInfo.nodeTemplate.taints"
+        v-else>
+      </Taints>
+    </bk-form-item>
+    <bk-form-item :label="$t('k8s.annotation')" property="annotations" error-display-type="normal">
+      <KeyValue
+        class="max-w-[420px]"
+        :min-item="0"
+        :disable-delete-item="false"
+        v-model="nodePoolInfo.nodeTemplate.annotations">
+      </KeyValue>
+    </bk-form-item>
+    <bk-form-item
+      :label="$t('cluster.ca.nodePool.create.multiZoneSubnetPolicy.title')"
+      :desc="$t('cluster.ca.nodePool.create.multiZoneSubnetPolicy.desc')">
+      <bk-radio-group v-model="nodePoolInfo.autoScaling.multiZoneSubnetPolicy">
+        <span class="inline-block">
+          <bk-radio disabled value="PRIORITY">{{$t('cluster.ca.nodePool.create.multiZoneSubnetPolicy.priority')}}</bk-radio>
+          <bk-radio disabled value="EQUALITY">{{$t('cluster.ca.nodePool.create.multiZoneSubnetPolicy.equality')}}</bk-radio>
+        </span>
+      </bk-radio-group>
+    </bk-form-item>
+    <bk-form-item
+      :label="$t('cluster.ca.nodePool.create.retryPolicy.title')"
+      :desc="$t('cluster.ca.nodePool.create.retryPolicy.desc')">
+      <bk-radio-group v-model="nodePoolInfo.autoScaling.retryPolicy">
+        <span class="inline-block">
+          <bk-radio disabled value="IMMEDIATE_RETRY">{{$t('cluster.ca.nodePool.create.retryPolicy.immediate_retry')}}</bk-radio>
+          <bk-radio disabled value="INCREMENTAL_INTERVALS">{{$t('cluster.ca.nodePool.create.retryPolicy.incremental_intervals')}}</bk-radio>
+          <bk-radio disabled value="NO_RETRY">{{$t('cluster.ca.nodePool.create.retryPolicy.no_retry')}}</bk-radio>
+        </span>
+      </bk-radio-group>
+    </bk-form-item>
+    <bk-form-item
+      :label="$t('cluster.ca.nodePool.create.scalingMode.title')"
+      :desc="$t('cluster.ca.nodePool.create.scalingMode.desc')">
+      <bk-radio-group v-model="nodePoolInfo.autoScaling.scalingMode">
+        <span class="inline-block">
+          <bk-radio disabled value="Delete">{{$t('cluster.ca.nodePool.create.scalingMode.classic_scaling')}}</bk-radio>
+          <bk-radio disabled value="WAKE_UP_STOPPED_SCALING">{{$t('cluster.ca.nodePool.create.scalingMode.wake_up_stopped_scaling')}}</bk-radio>
+        </span>
+      </bk-radio-group>
+    </bk-form-item>
+  </bk-form>
+</template>
+<script lang="ts">
+import { sortBy } from 'lodash';
+import { defineComponent, onMounted, ref, toRefs } from 'vue';
+
+import { nodemanCloudList } from '@/api/base';
+import $i18n from '@/i18n/i18n-setup';
+import KeyValue from '@/views/cluster-manage/components/key-value.vue';
+import Taints from '@/views/cluster-manage/components/new-taints.vue';
+
+export default defineComponent({
+  name: 'AwsBasciPoolInfo',
+  components: { KeyValue, Taints },
+  props: {
+    // 详情数据或者默认值
+    defaultValues: {
+      type: Object,
+      default: () => ({}),
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    cluster: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const { defaultValues, isEdit } = toRefs(props);
+    const formRef = ref<any>(null);
+    const nodePoolInfo = ref({
+      autoScaling: {
+        maxSize: defaultValues.value.autoScaling?.maxSize, // 节点数量范围
+        minSize: defaultValues.value.autoScaling?.minSize,
+        scalingMode: 'Delete', // 扩缩容模式, 释放模式改为Delete
+        desiredSize: defaultValues.value.autoScaling?.desiredSize || 0,
+        multiZoneSubnetPolicy: 'PRIORITY', // 多可用区策略PRIORITY
+        retryPolicy: 'IMMEDIATE_RETRY', // 重试策略IMMEDIATE_RETRY
+      },
+      enableAutoscale: defaultValues.value.enableAutoscale, // 是否开启弹性伸缩
+      nodeTemplate: {
+        unSchedulable: 1, // 是否开启调度 0 代表开启调度，1 不可调度
+        labels: defaultValues.value.nodeTemplate?.labels || {}, // 标签
+        taints: defaultValues.value.nodeTemplate?.taints || [], // 污点
+        annotations: defaultValues.value.nodeTemplate?.annotations || {}, // 注解
+      },
+      bkCloudID: isEdit.value ? defaultValues.value.area?.bkCloudID : 0,
+      bkCloudName: defaultValues.value.area?.bkCloudName || '',
+    });
+
+    const effectEnum = ref([
+      'NoSchedule',
+      'PreferNoSchedule',
+      'NoExecute',
+    ]);
+
+    const nodePoolInfoRules = ref({
+      // 节点配额校验, 超过配额上限后提示，数字输入框有输入和点击按钮加减来更改值，所以用blur和change触发
+      maxSize: [
+        {
+          message: $i18n.t('cluster.ca.nodePool.validate.nodeQuotaMaxSize', {
+            maximum: 2000,
+          }),
+          trigger: 'change',
+          validator: () => 2000 >= nodePoolInfo.value.autoScaling.maxSize,
+        },
+      ],
+      desiredSize: [
+        {
+          message: $i18n.t('cluster.ca.nodePool.validate.nodeCountsMaxSize'),
+          trigger: 'change',
+          validator: () => nodePoolInfo.value.autoScaling.desiredSize <= nodePoolInfo.value.autoScaling.maxSize,
+        },
+        {
+          message: $i18n.t('cluster.ca.nodePool.validate.minNodes'),
+          trigger: 'change',
+          validator: () => nodePoolInfo.value.autoScaling.desiredSize > 0,
+        },
+      ],
+      labels: [
+        {
+          message: $i18n.t('generic.validate.labelValueEmpty'),
+          trigger: 'custom',
+          // eslint-disable-next-line max-len
+          validator: () => Object.keys(nodePoolInfo.value.nodeTemplate.labels).every(key => !!nodePoolInfo.value.nodeTemplate.labels[key]),
+        },
+        {
+          message: $i18n.t('generic.validate.labelKey'),
+          trigger: 'custom',
+          validator: () => {
+            const keys = Object.keys(nodePoolInfo.value.nodeTemplate.labels);
+            const values = keys.map(key => nodePoolInfo.value.nodeTemplate.labels[key]);
+            return keys.every(v => /^[A-Za-z0-9._/-]+$/.test(v)) && values.every(v => /^[A-Za-z0-9._/-]+$/.test(v));
+          },
+        },
+      ],
+      taints: [
+        {
+          message: $i18n.t('generic.validate.required1'),
+          trigger: 'custom',
+          validator: () => nodePoolInfo.value.nodeTemplate.taints.every(item => item.key && item.value && item.effect),
+        },
+        {
+          message: $i18n.t('generic.validate.repeatKey'),
+          trigger: 'custom',
+          validator: () => {
+            const data = nodePoolInfo.value.nodeTemplate.taints.reduce((pre, item) => {
+              if (item.key) {
+                pre.push(item.key);
+              }
+              return pre;
+            }, []);
+            const removeDuplicateData = new Set(data);
+            return data.length === removeDuplicateData.size;
+          },
+        },
+        {
+          message: $i18n.t('generic.validate.labelKey'),
+          trigger: 'custom',
+          validator: () => (nodePoolInfo.value.nodeTemplate.taints as any[])
+            .every(item => /^[A-Za-z0-9._/-]+$/.test(item.key) && /^[A-Za-z0-9._/-]+$/.test(item.value)),
+        },
+      ],
+      annotations: [
+        {
+          message: $i18n.t('generic.validate.annotationValueEmpty'),
+          trigger: 'custom',
+          validator: () => Object.keys(nodePoolInfo.value.nodeTemplate.annotations)
+            .every(key => !!nodePoolInfo.value.nodeTemplate.annotations[key]),
+        },
+        {
+          message: $i18n.t('generic.validate.labelKey'),
+          trigger: 'custom',
+          validator: () => {
+            const keys = Object.keys(nodePoolInfo.value.nodeTemplate.annotations);
+            const values = keys.map(key => nodePoolInfo.value.nodeTemplate.annotations[key]);
+            return keys.every(v => /^[A-Za-z0-9._/-]+$/.test(v)) && values.every(v => /^[A-Za-z0-9._/-]+$/.test(v));
+          },
+        },
+      ],
+    });
+
+    const validate = async () => {
+      const result = await formRef.value?.validate();
+      return result;
+    };
+    const handleAddTaints = () => {
+      nodePoolInfo.value.nodeTemplate.taints.push({
+        key: '',
+        value: '',
+        effect: 'PreferNoSchedule',
+      });
+    };
+
+    // 云区域列表
+    const cloudList = ref<any[]>([]);
+    const cloudLoading = ref(false);
+    const handleGetCloudList = async () => {
+      cloudLoading.value = true;
+      const data = await nodemanCloudList().catch(() => []);
+      cloudList.value = sortBy(data, 'bk_cloud_name').sort((item) => {
+        if (item.bk_cloud_id === 0) return -1;
+        return 0;
+      });
+      cloudLoading.value = false;
+    };
+    const handleCloudIDChange = (id: string) => {
+      const data = cloudList.value.find(item => item.bk_cloud_id === id);
+      if (data) {
+        nodePoolInfo.value.bkCloudName = data.bk_cloud_name;
+      }
+    };
+
+    onMounted(() => {
+      handleGetCloudList();
+    });
+
+    return {
+      formRef,
+      nodePoolInfo,
+      nodePoolInfoRules,
+      effectEnum,
+      handleAddTaints,
+      validate,
+      cloudLoading,
+      cloudList,
+      handleCloudIDChange,
+    };
+  },
+});
+</script>
+<style lang="postcss" scoped>
+.node-pool-info {
+    >>> .w74 {
+        width: 74px;
+    }
+    >>> .w160 {
+        width: 160px;
+    }
+    >>> .bk-form-content {
+        max-width: 600px;
+    }
+    >>> .add-key-value-items {
+        font-size: 14px;
+        color: #3a84ff;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+}
+</style>
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/basic.vue b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/basic.vue
new file mode 100644
index 0000000000..fed3acd707
--- /dev/null
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/basic.vue
@@ -0,0 +1,387 @@
+<template>
+  <bk-form
+    :model="basicInfo"
+    :rules="basicInfoRules"
+    ref="formRef"
+    class="k8s-form grid grid-cols-2 grid-rows-1 gap-[16px]">
+    <DescList size="middle" :title="$t('cluster.create.label.clusterInfo')">
+      <bk-form-item :label="$t('cluster.create.label.kubernetesProvider')">
+        {{ $t('provider.gugeyun') }}
+      </bk-form-item>
+      <bk-form-item :label="$t('tke.label.account')" property="cloudAccountID" error-display-type="normal" required>
+        <bk-select :loading="accountLoading" v-model="basicInfo.cloudAccountID" searchable :clearable="false">
+          <bk-option
+            v-for="item in accountList"
+            :key="item.account.accountID"
+            :id="item.account.accountID"
+            :name="item.account.accountName">
+          </bk-option>
+          <template slot="extension">
+            <SelectExtension
+              :link-text="$t('tke.link.cloudToken')"
+              @link="gotoTencentToken"
+              @refresh="handleGetAccounts" />
+          </template>
+        </bk-select>
+      </bk-form-item>
+      <bk-form-item :label="$t('cluster.labels.name')" property="clusterName" error-display-type="normal" required>
+        <bk-input
+          :maxlength="64"
+          :placeholder="$t('cluster.create.validate.name')"
+          v-model.trim="basicInfo.clusterName">
+        </bk-input>
+      </bk-form-item>
+      <bk-form-item
+        :label="$t('cluster.create.label.clusterVersion')"
+        property="clusterBasicSettings.version"
+        error-display-type="normal"
+        required>
+        <bk-select
+          :loading="templateLoading"
+          v-model="basicInfo.clusterBasicSettings.version"
+          searchable
+          :clearable="false"
+          class="max-w-[calc(50%-46px)]">
+          <bk-option v-for="item in versionList" :key="item" :id="item" :name="item"></bk-option>
+        </bk-select>
+      </bk-form-item>
+      <bk-form-item
+        :label="$t('k8s.label')"
+        property="labels"
+        error-display-type="normal">
+        <KeyValue
+          v-model="basicInfo.labels"
+          :key-rules="[
+            {
+              message: $t('generic.validate.gkeLable'),
+              validator: GKE_LABEL_NAME_REGEX,
+            }
+          ]"
+          :value-rules="[
+            {
+              message: $t('generic.validate.label'),
+              validator: LABEL_KEY_REGEXP,
+            }
+          ]" />
+      </bk-form-item>
+      <bk-form-item :label="$t('cluster.create.label.desc')">
+        <bk-input maxlength="100" v-model="basicInfo.description" type="textarea"></bk-input>
+      </bk-form-item>
+    </DescList>
+    <div>
+      <DescList size="middle" :title="$t('cluster.labels.env')">
+        <bk-form-item :label="$t('cluster.create.label.manageType.text')">
+          <div class="bk-button-group">
+            <bk-button
+              :class="['min-w-[136px]', { 'is-selected': basicInfo.manageType === 'MANAGED_CLUSTER' }]"
+              @click="handleChangeManageType('MANAGED_CLUSTER')">
+              <div class="flex items-center">
+                <span class="flex text-[16px] text-[#f85356]">
+                  <i class="bcs-icon bcs-icon-hot"></i>
+                </span>
+                <span class="ml-[8px]">{{ $t('bcs.cluster.autopilot') }}</span>
+              </div>
+            </bk-button>
+            <bk-button
+              :class="['min-w-[136px]', { 'is-selected': basicInfo.manageType === 'INDEPENDENT_CLUSTER' }]"
+              @click="handleChangeManageType('INDEPENDENT_CLUSTER')">
+              {{ $t('bcs.cluster.standard') }}
+            </bk-button>
+          </div>
+          <div class="text-[12px] leading-[20px] mt-[4px]">
+            <span
+              v-if="basicInfo.manageType === 'MANAGED_CLUSTER'">
+              {{ $t('cluster.create.label.manageType.managed.gkeDesc') }}
+            </span>
+            <span
+              v-else-if="basicInfo.manageType === 'INDEPENDENT_CLUSTER'">
+              {{ $t('cluster.create.google.tips.standard') }}
+            </span>
+          </div>
+        </bk-form-item>
+        <bk-form-item :label="$t('cluster.labels.env')" property="environment" error-display-type="normal" required>
+          <bk-radio-group v-model="basicInfo.environment">
+            <bk-radio value="debug">
+              {{ $t('cluster.env.debug') }}
+            </bk-radio>
+            <bk-radio value="prod">
+              {{ $t('cluster.env.prod') }}
+            </bk-radio>
+          </bk-radio-group>
+        </bk-form-item>
+        <bk-form-item
+          v-if="basicInfo.manageType === 'INDEPENDENT_CLUSTER'"
+          :label="$t('cluster.create.google.labels.areaType')">
+          <bk-select
+            searchable
+            :clearable="false"
+            v-model="area">
+            <bk-option id="REGION" :name="$t('cluster.create.google.labels.region')"></bk-option>
+            <bk-option id="ZONE" :name="$t('cluster.create.google.labels.zone')"></bk-option>
+          </bk-select>
+        </bk-form-item>
+        <bk-form-item
+          :label="$t('cluster.create.label.region')"
+          property="regionBase"
+          error-display-type="normal"
+          required>
+          <Region
+            :cloud-account-i-d="basicInfo.cloudAccountID"
+            :cloud-i-d="cloudID"
+            init-data
+            v-model="regionBase" />
+        </bk-form-item>
+        <bk-form-item
+          v-if="area === 'ZONE'"
+          :label="$t('tke.label.zone')"
+          property="zone"
+          error-display-type="normal"
+          required>
+          <Zone
+            :region="regionBase"
+            :cloud-account-i-d="basicInfo.cloudAccountID"
+            :cloud-i-d="cloudID"
+            :disabled-tips="$t('tke.tips.hasSelected')"
+            init-data
+            v-model="zone" />
+        </bk-form-item>
+        <bk-form-item
+          :label="$t('tke.label.nodemanArea')"
+          property="clusterBasicSettings.area.bkCloudID"
+          error-display-type="normal"
+          required>
+          <bk-select
+            searchable
+            :clearable="false"
+            :loading="nodemanCloudLoading"
+            v-model="basicInfo.clusterBasicSettings.area.bkCloudID">
+            <bk-option
+              v-for="item in nodemanCloudList"
+              :key="item.bk_cloud_id"
+              :id="item.bk_cloud_id"
+              :name="item.bk_cloud_name">
+            </bk-option>
+            <template slot="extension">
+              <SelectExtension
+                :link-text="$t('tke.link.nodeman')"
+                :link="`${PROJECT_CONFIG.nodemanHost}/#/cloud-manager`"
+                @refresh="handleGetNodeManCloud" />
+            </template>
+          </bk-select>
+        </bk-form-item>
+      </DescList>
+    </div>
+    <div class="flex items-center h-[48px] bg-[#FAFBFD] px-[24px] fixed bottom-0 left-0 w-full bcs-border-top">
+      <bk-button theme="primary" class="ml10" @click="nextStep">{{ $t('generic.button.next') }}</bk-button>
+      <bk-button class="ml10" @click="handleCancel">{{ $t('generic.button.cancel') }}</bk-button>
+    </div>
+  </bk-form>
+</template>
+<script setup lang="ts">
+import { computed, onMounted, PropType, ref, watch } from 'vue';
+
+import { INodeManCloud } from '../../../types/types';
+
+import {
+  cloudDetail,
+  nodemanCloud,
+} from '@/api/modules/cluster-manager';
+import { GKE_LABEL_NAME_REGEX, LABEL_KEY_REGEXP } from '@/common/constant';
+import DescList from '@/components/desc-list.vue';
+import SelectExtension from '@/components/select-extension.vue';
+import $i18n from '@/i18n/i18n-setup';
+import $router from '@/router';
+import Region from '@/views/cluster-manage/add/components/region.vue';
+import Zone from '@/views/cluster-manage/add/components/zone.vue';
+import KeyValue from '@/views/cluster-manage/components/key-value.vue';
+import useCloud, { ICloudAccount } from '@/views/cluster-manage/use-cloud';
+
+const props = defineProps({
+  cloudID: {
+    type: String as PropType<CloudID>,
+    default: '',
+  },
+});
+
+const emits = defineEmits(['next', 'cancel', 'change', 'setRegion']);
+
+// 基本信息
+const basicInfo = ref({
+  manageType: 'MANAGED_CLUSTER',
+  cloudAccountID: '', // 云凭证
+  clusterName: '',
+  environment: '',
+  provider: '',
+  clusterBasicSettings: {
+    version: '',
+    area: {  // 云区域
+      bkCloudID: 0,
+    },
+  },
+  description: '',
+  region: '',
+  labels: {},
+});
+
+const regionBase = ref('');
+const zone = ref('');
+
+watch(() => basicInfo.value.cloudAccountID, () => {
+  regionBase.value = '';
+});
+const basicInfoRules = ref({
+  cloudAccountID: [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+  ],
+  clusterName: [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+  ],
+  'clusterBasicSettings.version': [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+  ],
+  regionBase: [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+      validator: () => !!regionBase.value,
+    },
+  ],
+  zone: [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+      validator: () => !!zone.value,
+    },
+  ],
+  'clusterBasicSettings.area.bkCloudID': [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+  ],
+  environment: [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+  ],
+  labels: [
+    {
+      message: $i18n.t('generic.validate.label'),
+      trigger: 'custom',
+      validator: () => {
+        const { labels } = basicInfo.value;
+        const rule = new RegExp(LABEL_KEY_REGEXP);
+        return Object.keys(labels).every(key => rule.test(key) && rule.test(labels[key]));
+      },
+    },
+  ],
+});
+
+// 集群模板
+const templateDetail = ref<Partial<ICloudTemplateDetail>>({});
+const templateLoading = ref(false);
+const handleGetTemplateList = async () => {
+  templateLoading.value = true;
+  templateDetail.value = await cloudDetail({
+    $cloudId: props.cloudID,
+  }).catch(() => []);
+  basicInfo.value.provider = templateDetail.value?.cloudID || '';
+  // 初始化默认集群版本
+  basicInfo.value.clusterBasicSettings.version = templateDetail.value?.clusterManagement?.availableVersion?.[0] || '';
+  templateLoading.value = false;
+};
+
+// 云凭证
+const { cloudAccounts } = useCloud();
+const accountLoading = ref(false);
+const accountList = ref<ICloudAccount[]>([]);
+const handleGetAccounts = async () => {
+  accountLoading.value = true;
+  const { data } = await cloudAccounts(props.cloudID);
+  accountList.value = data;
+  // 初始化第一个云凭证
+  basicInfo.value.cloudAccountID = accountList.value?.[0]?.account?.accountID || '';
+  accountLoading.value = false;
+};
+const gotoTencentToken = () => {
+  const { href } = $router.resolve({ name: 'googleCloud' });
+  window.open(href);
+};
+
+// 版本列表
+const versionList = computed(() => templateDetail.value?.clusterManagement?.availableVersion || []);
+
+
+// 管控区域
+const nodemanCloudList = ref<Array<INodeManCloud>>([]);
+const nodemanCloudLoading = ref(false);
+const handleGetNodeManCloud = async () => {
+  nodemanCloudLoading.value = true;
+  nodemanCloudList.value = await nodemanCloud().catch(() => []);
+  nodemanCloudLoading.value = false;
+};
+
+const handleChangeManageType = (type: 'INDEPENDENT_CLUSTER' | 'MANAGED_CLUSTER') => {
+  basicInfo.value.manageType = type;
+  emits('change', type);
+};
+
+// 集群位置类型
+const area = ref('REGION');
+
+watch(regionBase, () => {
+  zone.value = '';
+});
+
+onMounted(() => {
+  handleGetTemplateList();
+  handleGetAccounts();
+  handleGetNodeManCloud();
+});
+
+// 校验
+const formRef = ref();
+const validate = async () => {
+  const result = await formRef.value?.validate().catch(() => false);
+  return result;
+};
+
+// 下一步
+const nextStep = async () => {
+  const result = await validate();
+  basicInfo.value.region = area.value === 'ZONE' ? zone.value : regionBase.value;
+  // 保存regionBase
+  emits('setRegion', regionBase.value);
+  result && emits('next', basicInfo.value);
+};
+// 取消
+const handleCancel = () => {
+  emits('cancel');
+};
+
+defineExpose({
+  validate,
+});
+</script>
+<style scoped lang="postcss">
+/deep/ .bk-option-group-name {
+  border-bottom: 0 !important;
+}
+</style>
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/index.vue b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/index.vue
new file mode 100644
index 0000000000..e2d5eab77b
--- /dev/null
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/index.vue
@@ -0,0 +1,311 @@
+<!-- eslint-disable max-len -->
+<template>
+  <BcsContent
+    :padding="0"
+    class="add-tke-cluster"
+    :title="$t('cluster.button.addCluster')"
+    :desc="$t('generic.title.createPublicCluster')">
+    <div class="h-full pt-[8px] bg-[#f0f1f5]">
+      <bcs-tab
+        :label-height="42"
+        :validate-active="false"
+        :active.sync="activeTabName"
+        type="card-tab"
+        class="h-full">
+        <!-- 基本信息 -->
+        <bcs-tab-panel :name="steps[0].name">
+          <template #label>
+            <StepTabLabel
+              :title="$t('generic.title.basicInfo1')"
+              :step-num="1"
+              :active="activeTabName === steps[0].name"
+              :is-error="steps[0].isErr" />
+          </template>
+          <BasicInfo
+            :cloud-i-d="cloudID"
+            ref="basicRef"
+            @next="nextStep"
+            @cancel="handleCancel"
+            @change="handleChange"
+            @setRegion="handleSetRegion" />
+        </bcs-tab-panel>
+        <!-- 网络配置 -->
+        <bcs-tab-panel :name="steps[1].name" :disabled="steps[1].disabled">
+          <template #label>
+            <StepTabLabel
+              :title="$t('cluster.detail.title.network')"
+              :step-num="2"
+              :active="activeTabName === steps[1].name"
+              :disabled="steps[1].disabled"
+              :is-error="steps[1].isErr" />
+          </template>
+          <Network
+            :region="regionBase"
+            :cloud-account-i-d="clusterData.cloudAccountID"
+            :cloud-i-d="cloudID"
+            :vpc-id="clusterData.vpcID"
+            ref="netRef"
+            @pre="preStep"
+            @next="nextStep"
+            @cancel="handleCancel" />
+        </bcs-tab-panel>
+        <!-- Master配置 -->
+        <bcs-tab-panel :name="steps[2].name" :disabled="steps[2].disabled">
+          <template #label>
+            <StepTabLabel
+              :title="$t('cluster.detail.title.controlConfig')"
+              :step-num="3"
+              :active="activeTabName === steps[2].name"
+              :disabled="steps[2].disabled"
+              :is-error="steps[2].isErr" />
+          </template>
+          <Master
+            :cloud-account-i-d="clusterData.cloudAccountID"
+            :cloud-i-d="cloudID"
+            :provider="clusterData.provider"
+            :vpc-i-d="clusterData.vpcID"
+            :nodes="clusterData.nodes"
+            :need-node="needNode"
+            ref="masterRef"
+            @pre="preStep"
+            @next="nextStep"
+            @cancel="handleCancel"
+            @confirm="handleShowConfirmDialog"
+            @instances-change="handleMasterInstanceChange" />
+        </bcs-tab-panel>
+        <!-- 添加节点 -->
+        <bcs-tab-panel :name="steps[3].name" :disabled="steps[3].disabled" v-if="needNode">
+          <template #label>
+            <StepTabLabel
+              :title="$t('cluster.nodeList.create.text')"
+              :step-num="4"
+              :active="activeTabName === steps[3].name"
+              :disabled="steps[3].disabled"
+              :is-error="steps[3].isErr" />
+          </template>
+          <Nodes
+            :region="clusterData.region"
+            :cloud-account-i-d="clusterData.cloudAccountID"
+            :cloud-i-d="cloudID"
+            :environment="clusterData.environment"
+            :provider="clusterData.provider"
+            :vpc-i-d="clusterData.vpcID"
+            :master="clusterData.master"
+            :master-login="clusterData.nodeSettings ? clusterData.nodeSettings.masterLogin : undefined"
+            :manage-type="clusterData.manageType"
+            :auto-generate-master-nodes="clusterData.autoGenerateMasterNodes"
+            :bk-cloud-i-d="clusterData?.clusterBasicSettings?.area?.bkCloudID"
+            ref="nodesRef"
+            @pre="preStep"
+            @next="nextStep"
+            @cancel="handleCancel"
+            @confirm="handleShowConfirmDialog"
+            @instances-change="handleNodesInstanceChange" />
+        </bcs-tab-panel>
+      </bcs-tab>
+    </div>
+  </BcsContent>
+</template>
+<script lang="ts" setup>
+import { merge } from 'lodash';
+import { computed, provide, ref, watch } from 'vue';
+
+import { ClusterDataInjectKey, DeepPartial, IClusterData, IInstanceItem  } from '../../../types/types';
+
+import BasicInfo from './basic.vue';
+import Master from './master.vue';
+import Network from './network.vue';
+import Nodes from './nodes.vue';
+
+import { createCluster } from '@/api/modules/cluster-manager';
+import $bkMessage from '@/common/bkmagic';
+import $bkInfo from '@/components/bk-magic-2.0/bk-info';
+import BcsContent from '@/components/layout/Content.vue';
+import { useProject } from '@/composables/use-app';
+import $i18n from '@/i18n/i18n-setup';
+import $router from '@/router';
+import $store from '@/store';
+import StepTabLabel from '@/views/cluster-manage/add/components/step-tab-label.vue';
+
+const cloudID: CloudID = 'gcpCloud';
+
+const steps = ref([
+  { name: 'basicInfo', disabled: false, isErr: false },
+  { name: 'network',  disabled: true, isErr: false },
+  { name: 'master',  disabled: true, isErr: false },
+  { name: 'nodes', disabled: true, isErr: false },
+]);
+
+const activeTabName = ref<typeof steps.value[number]['name']>('basicInfo');
+
+const clusterData = ref<DeepPartial<IClusterData>>({});
+// 用于网络配置的region，clusterData.region可能是region(us-central1)、zone(us-central1-a)
+const regionBase = ref('');
+function handleSetRegion(region: string) {
+  regionBase.value = region;
+}
+
+provide(ClusterDataInjectKey, clusterData);
+
+// tab切换
+watch(activeTabName, () => {
+  const tabItem = steps.value.find(item => item.name === activeTabName.value);
+  if (tabItem) {
+    tabItem.isErr = false;
+  }
+});
+
+// tab切换
+watch(activeTabName, () => {
+  const tabItem = steps.value.find(item => item.name === activeTabName.value);
+  if (tabItem) {
+    tabItem.isErr = false;
+  }
+});
+
+// 机型
+const masterInstances = ref<IInstanceItem[]>([]);
+const handleMasterInstanceChange = (data) => {
+  masterInstances.value = data;
+};
+const nodeInstances = ref<IInstanceItem[]>([]);
+const handleNodesInstanceChange = (data) => {
+  nodeInstances.value = data;
+};
+// 上一步
+const preStep = async () => {
+  const index = steps.value.findIndex(step => activeTabName.value === step.name);
+  if (index > -1 && index - 1 >= 0) {
+    activeTabName.value = steps.value[index - 1]?.name;
+  }
+};
+// 下一步
+const nextStep = async (data = {}) => {
+  clusterData.value = merge({}, clusterData.value, data);
+  const index = steps.value.findIndex(step => activeTabName.value === step.name);
+  if (index > -1 && index + 1 < steps.value.length) {
+    if (index + 1 === 3 && !needNode.value) return;
+    steps.value[index + 1].disabled = false;
+    activeTabName.value = steps.value[index + 1]?.name;
+  }
+};
+const handleCancel = () => {
+  $router.back();
+};
+
+const needNode = ref(false);
+const handleChange = (type) => {
+  needNode.value = type === 'INDEPENDENT_CLUSTER';
+};
+// 校验表单
+const basicRef = ref();
+const netRef = ref();
+const masterRef = ref();
+const nodesRef = ref();
+const validate = async () => {
+  const list = [
+    basicRef.value.validate().then((result) => {
+      steps.value[0].isErr = !result;
+      return result;
+    }),
+    netRef.value.validate().then((result) => {
+      steps.value[1].isErr = !result;
+      return result;
+    }),
+    masterRef.value.validate().then((result) => {
+      steps.value[2].isErr = !result;
+      return result;
+    }),
+    nodesRef.value?.validate().then((result) => {
+      steps.value[3].isErr = !result;
+      return result;
+    }),
+  ];
+  const data = await Promise.all(list.filter(item => item));
+  return data.every(result => !!result);
+};
+// 创建集群
+const handleShowConfirmDialog = async () => {
+  const result = await validate();
+  if (!result) return;
+
+  $bkInfo({
+    type: 'warning',
+    clsName: 'custom-info-confirm',
+    title: $i18n.t('cluster.create.button.confirmCreateCluster.text'),
+    defaultInfo: true,
+    confirmFn: async () => {
+      await handleCreateCluster();
+    },
+  });
+};
+const { curProject } = useProject();
+const user = computed(() => $store.state.user);
+const handleCreateCluster = async () => {
+  const params = merge(
+    {
+      projectID: curProject.value.projectID,
+      businessID: String(curProject.value.businessID),
+      engineType: 'k8s',
+      isExclusive: true,
+      clusterType: 'single',
+      creator: user.value.username,
+    },
+    {
+      instances: [
+        ...masterInstances.value,
+        ...nodeInstances.value,
+      ],
+    },
+    clusterData.value,
+  );
+  console.log(params);
+  const result = await createCluster(params).catch(() => false);
+  if (result) {
+    $bkMessage({
+      theme: 'success',
+      message: $i18n.t('generic.msg.success.deliveryTask'),
+    });
+    $router.push({
+      name: 'clusterMain',
+      params: {
+        highlightClusterId: result?.clusterID,
+      },
+    });
+  }
+};
+
+</script>
+<style lang="postcss" scoped>
+>>> .bk-tab-header {
+  padding: 0 8px;
+}
+>>> .bk-tab-section {
+  overflow: auto;
+  height: calc(100% - 80px);
+}
+
+>>> .k8s-form .bk-form-content {
+  max-width: 600px;
+  padding-right: 24px;
+}
+>>> .prefix {
+  display: inline-block;
+  height: 32px;
+  line-height: 32px;
+  background: #F0F1F5;
+  border: 1px solid #C4C6CC;
+  border-radius: 2px 0 0 2px;
+  padding: 0 8px;
+  font-size: 12px;
+  &.disabled {
+    border-color: #dcdee5;
+  }
+}
+
+.add-tke-cluster {
+  >>> .bk-form-item+.bk-form-item {
+    margin-top: 24px;
+  }
+}
+</style>
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/master.vue b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/master.vue
new file mode 100644
index 0000000000..20a0575c4c
--- /dev/null
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/master.vue
@@ -0,0 +1,173 @@
+<template>
+  <bk-form :model="masterConfig" :rules="masterConfigRules" ref="formRef">
+    <bk-form-item
+      :label="$t('tke.label.apiServerCLB.text')"
+      :desc="$t('tke.label.apiServerCLB.desc')"
+      property="cidrs"
+      error-display-type="normal"
+      class="max-w-[600px]"
+      key="cidrs"
+      :required="ITNType === 'intranet'">
+      <bk-radio-group
+        v-model="ITNType"
+        @change="handleChange"
+      >
+        <div class="flex items-center mb-[8px] h-[32px]">
+          <bk-radio value="internet">{{ $t('tke.label.apiServerCLB.internet') }}</bk-radio>
+        </div>
+        <div class="flex items-center mb-[8px] h-[32px]">
+          <bk-radio value="intranet">{{ $t('tke.label.apiServerCLB.intranet') }}</bk-radio>
+        </div>
+        <combination-input
+          :list="cidrs"
+          @data-change="updateSecurityGroup"
+          :ref="el => combinationInputRef = el"
+          :key-required="!masterConfig.clusterAdvanceSettings.clusterConnectSetting.isExtranet"
+          :key-rules="keyRules" />
+      </bk-radio-group>
+    </bk-form-item>
+    <div class="flex items-center h-[48px] bg-[#FAFBFD] px-[24px] fixed bottom-0 left-0 w-full bcs-border-top">
+      <bk-button @click="preStep">{{ $t('generic.button.pre') }}</bk-button>
+      <bk-button theme="primary" class="ml10 min-w-[75px]" @click="nextStep">
+        {{ needNode ? $t('generic.button.next') : $t('generic.button.confirm') }}
+      </bk-button>
+      <bk-button class="ml10" @click="handleCancel">{{ $t('generic.button.cancel') }}</bk-button>
+    </div>
+  </bk-form>
+</template>
+<script setup lang="ts">
+import { computed, PropType, ref } from 'vue';
+
+import { INTERNET_CIDR_REGEX, INTRANET_CIDR_REGEX } from '@/common/constant';
+import combinationInput from '@/components/combination-input.vue';
+import { useFocusOnErrorField } from '@/composables/use-focus-on-error-field';
+import $i18n from '@/i18n/i18n-setup';
+
+const props = defineProps({
+  region: {
+    type: String,
+    default: '',
+  },
+  cloudAccountID: {
+    type: String,
+    default: '',
+  },
+  cloudID: {
+    type: String,
+    default: '',
+  },
+  provider: {
+    type: String,
+    default: '',
+  },
+  vpcID: {
+    type: String,
+    default: '',
+  },
+  nodes: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  needNode: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits(['next', 'cancel', 'pre', 'confirm']);
+
+// master配置
+const masterConfig = ref({
+  autoGenerateMasterNodes: true,
+  clusterAdvanceSettings: {
+    clusterConnectSetting: {
+      isExtranet: true,
+      internet: {
+        publicIPAssigned: false,
+        publicAccessCidrs: [],
+      },
+    },
+  },
+});
+// 网络类型
+const ITNType = ref<'internet' | 'intranet'>('internet');
+// cidr白名单
+const cidrs = ref([]);
+
+// 动态 i18n 问题，这里使用computed
+const masterConfigRules = computed(() => ({
+  cidrs: [
+    {
+      trigger: 'blur',
+      message: $i18n.t('generic.validate.required'),
+      async validator() {
+        return await combinationInputRef.value?.validateAll().catch(() => false);
+      },
+    },
+  ],
+}));
+
+// 校验master节点
+const formRef = ref();
+const validate = async () => {
+  const result = await formRef.value?.validate().catch(() => false);
+  const result2 = await combinationInputRef.value?.validateAll().catch(() => false);
+  return result && result2;
+};
+
+const combinationInputRef = ref<any>(null);
+// 将ip对象数组转为ip字符串数组
+function updateSecurityGroup(value) {
+  cidrs.value = value;
+  // eslint-disable-next-line max-len
+  masterConfig.value.clusterAdvanceSettings.clusterConnectSetting.internet.publicAccessCidrs = value.map(item => item.key);
+}
+function handleChange(value) {
+  masterConfig.value.clusterAdvanceSettings.clusterConnectSetting.isExtranet = !!['internetAndIntranet', 'internet'].includes(value);
+  validate();
+}
+
+// const internetIpRegex = new RegExp()
+const keyRules = ref([
+  {
+    message: $i18n.t('cluster.create.aws.cidrTips.tips1'),
+    validator: '^(?!0.0.0.0/0$).*$',
+  },
+  {
+    message: $i18n.t('cluster.create.aws.cidrTips.tips2'),
+    validator: (val) => {
+      if (ITNType.value === 'internet') {
+        return new RegExp(INTERNET_CIDR_REGEX).test(String(val));
+      }
+      return new RegExp(INTRANET_CIDR_REGEX).test(String(val));
+    },
+  },
+]);
+
+// 上一步
+const preStep = () => {
+  emits('pre');
+};
+// 下一步
+const { focusOnErrorField } = useFocusOnErrorField();
+const nextStep = async () => {
+  const result = await validate();
+  if (result) {
+    emits('next', {
+      ...masterConfig.value,
+    });
+    !props.needNode && emits('confirm');
+  } else {
+    // 自动滚动到第一个错误的位置
+    focusOnErrorField();
+  }
+};
+// 取消
+const handleCancel = () => {
+  emits('cancel');
+};
+
+defineExpose({
+  validate,
+});
+</script>
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/network.vue b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/network.vue
new file mode 100644
index 0000000000..ab1439ee3a
--- /dev/null
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/network.vue
@@ -0,0 +1,399 @@
+<template>
+  <bk-form
+    class="k8s-form"
+    :label-width="160"
+    :model="networkConfig"
+    :rules="networkConfigRules"
+    ref="formRef">
+    <DescList size="middle" :title="$t('cluster.create.label.basicConfig')">
+      <bk-form-item :label="$t('cluster.create.label.region')" required>
+        <Region :value="region" :cloud-account-i-d="cloudAccountID" :cloud-i-d="cloudID" disabled />
+      </bk-form-item>
+      <bk-form-item
+        :label="$t('cluster.create.label.privateNet.text')"
+        property="vpcID"
+        error-display-type="normal"
+        required
+        class="private-net-form-item">
+        <div class="flex items-center">
+          <Vpc
+            class="max-w-[576px] flex-1"
+            :cloud-account-i-d="cloudAccountID"
+            :cloud-i-d="cloudID"
+            :region="region"
+            init-data
+            :show-link="false"
+            :value-key="'name'"
+            v-model="networkConfig.vpcID"
+            @change="handleGetVpcDetail" />
+        </div>
+      </bk-form-item>
+      <bk-form-item
+        :label="$t('tke.label.subnet')"
+        property="clusterAdvanceSettings.clusterConnectSetting.subnetId"
+        error-display-type="normal"
+        required>
+        <Subnet
+          :cloud-account-i-d="cloudAccountID"
+          :cloud-i-d="cloudID"
+          :region="region"
+          :vpc-id="networkConfig.vpcID"
+          v-model="networkConfig.clusterAdvanceSettings.clusterConnectSetting.subnetId" />
+      </bk-form-item>
+      <bk-form-item
+        :label="$t('cluster.create.label.clusterIPType.text')"
+        property="networkSettings.clusterIpType"
+        error-display-type="normal"
+        required
+        class="unset-form-content-width">
+        <bk-radio-group v-model="networkConfig.networkSettings.clusterIpType">
+          <bk-radio value="ipv4">
+            <span>IPv4</span>
+          </bk-radio>
+        </bk-radio-group>
+      </bk-form-item>
+    </DescList>
+    <DescList class="mt-[24px]" size="middle" :title="$t('cluster.create.label.netSetting')">
+      <bk-form-item
+        :label="$t('tke.label.containerNet')"
+        :desc="$t('cluster.create.google.tips.containerNet')"
+        property="networkSettings.clusterIPv4CIDR"
+        error-display-type="normal"
+        required>
+        <div class="flex items-center">
+          <div class="flex flex-1 max-w-[50%]">
+            <span class="prefix">CIDR</span>
+            <bk-input
+              class="ml-[-1px] flex-1"
+              :placeholder="$t('tke.placeholder.example', ['172.16.0.0/20'])"
+              v-model.trim="networkConfig.networkSettings.clusterIPv4CIDR">
+            </bk-input>
+          </div>
+          <span
+            class="inline-flex items-center px-[16px] h-[24px] rounded-full bg-[#F0F1F5] text-[12px] ml-[16px]">
+            {{ $t('tke.tips.totalIpNum', [countsClusterIPv4CIDR || '--']) }}
+          </span>
+        </div>
+      </bk-form-item>
+      <bk-form-item
+        label="Service"
+        :desc="$t('tke.tips.ipCannotBeAdjustedWhenCreated', ['Service'])"
+        property="serviceIP"
+        error-display-type="normal"
+        required
+        key="VPC-CNI-Service">
+        <div class="flex items-center">
+          <template v-if="['ipv4', 'dual'].includes(networkConfig.networkSettings.clusterIpType)">
+            <div class="flex flex-1 max-w-[50%]">
+              <span class="prefix">CIDR</span>
+              <bk-input
+                class="ml-[-1px] flex-1"
+                :placeholder="$t('tke.placeholder.example', ['172.16.0.0/20'])"
+                v-model.trim="networkConfig.networkSettings.serviceIPv4CIDR">
+              </bk-input>
+            </div>
+            <span
+              class="inline-flex items-center px-[16px] h-[24px] rounded-full bg-[#F0F1F5] text-[12px] ml-[16px]">
+              {{ $t('tke.tips.totalIpNum', [countIPsInCIDR(networkConfig.networkSettings.serviceIPv4CIDR) || 0]) }}
+            </span>
+          </template>
+        </div>
+      </bk-form-item>
+      <bk-form-item
+        :label="$t('cluster.create.label.maxNodePodNum')"
+        :desc="$t('tke.tips.ipCannotBeAdjustedWhenCreated2', [$t('cluster.create.label.maxNodePodNum')])"
+        property="networkSettings.maxNodePodNum"
+        error-display-type="normal"
+        required>
+        <bcs-select
+          searchable
+          :clearable="false"
+          class="mr-[8px] max-w-[50%]"
+          v-model="networkConfig.networkSettings.maxNodePodNum">
+          <bcs-option v-for="item in nodePodNumList" :id="item" :key="item" :name="item"></bcs-option>
+        </bcs-select>
+      </bk-form-item>
+    </DescList>
+    <div class="flex items-center h-[48px] bg-[#FAFBFD] px-[24px] fixed bottom-0 left-0 w-full bcs-border-top">
+      <bk-button @click="preStep">{{ $t('generic.button.pre') }}</bk-button>
+      <bk-button
+        :loading="validating"
+        theme="primary"
+        class="ml10"
+        @click="nextStep">{{ $t('generic.button.next') }}</bk-button>
+      <bk-button class="ml10" @click="handleCancel">{{ $t('generic.button.cancel') }}</bk-button>
+    </div>
+  </bk-form>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { IVpcItem } from '../../../types/types';
+
+import { cloudCidrconflict, cloudVPC } from '@/api/modules/cluster-manager';
+import { cidrContains, countIPsInCIDR, validateCIDR } from '@/common/util';
+import DescList from '@/components/desc-list.vue';
+import $i18n from '@/i18n/i18n-setup';
+import Region from '@/views/cluster-manage/add/components/region.vue';
+import Subnet from '@/views/cluster-manage/add/components/subnet.vue';
+import Vpc from '@/views/cluster-manage/add/components/vpc.vue';
+
+const props = defineProps({
+  region: {
+    type: String,
+    default: '',
+  },
+  cloudAccountID: {
+    type: String,
+    default: '',
+  },
+  cloudID: {
+    type: String,
+    default: '',
+  },
+  vpcId: {
+    type: String,
+    default: '',
+  },
+});
+
+const emits = defineEmits(['next', 'cancel', 'pre']);
+
+const nodePodNumList = ref([32, 64, 128]);
+
+// 网络配置
+const networkConfig = ref({
+  vpcID: '',
+  networkType: '', // overlay underlay
+  networkSettings: {
+    clusterIPv4CIDR: '',
+    serviceIPv4CIDR: '',
+    maxNodePodNum: 64, // 单节点pod数量上限
+    clusterIpType: 'ipv4', // ipv4/ipv6/dual
+  },
+  clusterAdvanceSettings: {
+    clusterConnectSetting: {
+      subnetId: '',
+    },
+  },
+});
+const countsClusterIPv4CIDR = computed(() => countIPsInCIDR(networkConfig.value.networkSettings.clusterIPv4CIDR) || 0);
+
+const conflictCIDR = ref('');
+const networkConfigRules = ref({
+  vpcID: [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+  ],
+  'clusterAdvanceSettings.clusterConnectSetting.subnetId': [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+  ],
+  'networkSettings.clusterIpType': [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+  ],
+  'networkSettings.maxNodePodNum': [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+  ],
+  'networkSettings.clusterIPv4CIDR': [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+    {
+      trigger: 'blur',
+      message: $i18n.t('generic.validate.cidr'),
+      async validator() {
+        return networkConfig.value.networkSettings.clusterIPv4CIDR
+            && validateCIDR(networkConfig.value.networkSettings.clusterIPv4CIDR);
+      },
+    },
+    {
+      trigger: 'blur',
+      message: $i18n.t('tke.validate.minIpNum2', [4096]),
+      async validator() {
+        const counts = countIPsInCIDR(networkConfig.value.networkSettings.clusterIPv4CIDR) || 0;
+        return counts >= 4096;
+      },
+    },
+    {
+      trigger: 'blur',
+      message: $i18n.t('tke.validate.cidrMaskLen', ['[10, 20]']),
+      async validator() {
+        const cidr = networkConfig.value.networkSettings.clusterIPv4CIDR;
+        const mask = Number(cidr?.split('/')?.[1] || 0);
+        return mask >= 10 && mask <= 20;
+      },
+    },
+    {
+      trigger: 'blur',
+      message: $i18n.t('tke.validate.supportCidrList', ['10.0.0.0/8, 172.16.0.0/16 ~ 172.31.0.0/16, 192.168.0.0/16']),
+      async validator() {
+        const cidr = networkConfig.value.networkSettings.clusterIPv4CIDR;
+        return cidrContains(cidr, '10.0.0.0/8')
+          || cidrContains(cidr, ['172.16.0.0/16', '172.31.0.0/16'])
+          || cidrContains(cidr, '192.168.0.0/16');
+      },
+    },
+    {
+      trigger: 'blur',
+      message: () => $i18n.t('generic.validate.cidrConflict', { cidr: conflictCIDR.value }),
+      async validator() {
+        return networkConfig.value.networkSettings.clusterIPv4CIDR
+            && await cidrConflict(networkConfig.value.networkSettings.clusterIPv4CIDR);
+      },
+    },
+  ],
+  serviceIP: [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'blur',
+    },
+    {
+      trigger: 'blur',
+      message: $i18n.t('generic.validate.cidr'),
+      async validator() {
+        return networkConfig.value.networkSettings.serviceIPv4CIDR
+            && validateCIDR(networkConfig.value.networkSettings.serviceIPv4CIDR);
+      },
+    },
+    {
+      trigger: 'blur',
+      message: $i18n.t('tke.validate.minIpNum2', [4096]),
+      async validator() {
+        const counts = countIPsInCIDR(networkConfig.value.networkSettings.serviceIPv4CIDR) || 0;
+        return counts >= 4096;
+      },
+    },
+    {
+      trigger: 'blur',
+      message: $i18n.t('tke.validate.cidrMaskLen', ['[10, 20]']),
+      async validator() {
+        const cidr = networkConfig.value.networkSettings.serviceIPv4CIDR;
+        const mask = Number(cidr?.split('/')?.[1] || 0);
+        return mask >= 10 && mask <= 20;
+      },
+    },
+    {
+      trigger: 'blur',
+      message: $i18n.t('tke.validate.supportCidrList', ['10.0.0.0/8, 172.16.0.0/16 ~ 172.31.0.0/16, 192.168.0.0/16']),
+      async validator() {
+        const cidr = networkConfig.value.networkSettings.serviceIPv4CIDR;
+        return cidrContains(cidr, '10.0.0.0/8')
+          || cidrContains(cidr, ['172.16.0.0/16', '172.31.0.0/16'])
+          || cidrContains(cidr, '192.168.0.0/16');
+      },
+    },
+    {
+      trigger: 'blur',
+      message: () => $i18n.t('generic.validate.cidrConflict', { cidr: conflictCIDR.value }),
+      async validator() {
+        return networkConfig.value.networkSettings.serviceIPv4CIDR
+            && await cidrConflict(networkConfig.value.networkSettings.serviceIPv4CIDR);
+      },
+    },
+  ],
+});
+
+// VPC详情
+const vpcDetail = ref<Partial<IVpcItem>>({});
+const handleGetVpcDetail = async (vpcID: string) => {
+  // 取数组第 1 个
+  const [detail] = await cloudVPC({
+    $cloudId: props.cloudID,
+    region: props.region,
+    accountID: props.cloudAccountID,
+    vpcID,
+  });
+  vpcDetail.value = detail;
+};
+
+// CIDR 冲突检测
+const cidrConflict = async (cidr) => {
+  if (!networkConfig.value.vpcID || !props.region || !props.cloudAccountID) return true;
+  const { cidrs = [] } =  await cloudCidrconflict({
+    $cloudId: props.cloudID,
+    $vpc: networkConfig.value.vpcID,
+    region: props.region,
+    accountID: props.cloudAccountID,
+    cidr,
+  }).catch(() => false);
+  conflictCIDR.value = cidrs.join(',');
+  return !cidrs.length;
+};
+
+watch([
+  () => props.region,
+  () => props.cloudAccountID,
+], () => {
+  networkConfig.value.vpcID = '';
+}, { immediate: true });
+
+watch(() => networkConfig.value.vpcID, () => {
+  networkConfig.value.clusterAdvanceSettings.clusterConnectSetting.subnetId = '';
+});
+
+// 校验
+const formRef = ref();
+const validate = async () => {
+  const result = await formRef.value?.validate().catch(() => false);
+  return result;
+};
+
+// 上一步
+const preStep = () => {
+  emits('pre');
+};
+// 下一步
+const validating = ref(false);
+const nextStep = async () => {
+  validating.value = true;
+  const result = await validate();
+  validating.value = false;
+  if (result) {
+    emits('next', {
+      ...networkConfig.value,
+    });
+  } else {
+    // 自动滚动到第一个错误的位置
+    const errDom = document.getElementsByClassName('form-error-tip');
+    errDom[0]?.scrollIntoView({
+      block: 'center',
+      behavior: 'smooth',
+    });
+  }
+};
+// 取消
+const handleCancel = () => {
+  emits('cancel');
+};
+
+defineExpose({
+  validate,
+});
+</script>
+<style scoped lang="postcss">
+>>> .private-net-form-item .bk-form-content {
+  max-width: 800px !important;
+}
+
+>>> .unset-form-content-width .bk-form-content {
+  max-width: none !important;
+}
+</style>
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/node-pool-config.vue b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/node-pool-config.vue
new file mode 100644
index 0000000000..0ce2c35877
--- /dev/null
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/node-pool-config.vue
@@ -0,0 +1,795 @@
+<!-- eslint-disable max-len -->
+<template>
+  <div>
+    <div class="p-[24px] node-config-wrapper" ref="nodeConfigRef">
+      <bk-form class="node-config" :model="nodePoolConfig" :rules="nodePoolConfigRules" ref="formRef" :label-width="100">
+        <bk-form-item class="max-w-[674px]" :label="$t('cluster.ca.nodePool.label.name')" property="name" required>
+          <bk-input v-model="nodePoolConfig.name"></bk-input>
+          <p class="text-[#979BA5] leading-4 mt-[4px]">{{ $t('cluster.ca.nodePool.validate.name') }}</p>
+        </bk-form-item>
+        <bk-form-item
+          :label="$t('cluster.ca.nodePool.label.system')"
+          error-display-type="normal"
+          required
+          :desc="$t('googleCA.tips.system')">
+          <bcs-input disabled v-model="nodePoolConfig.launchTemplate.imageInfo.imageName"></bcs-input>
+        </bk-form-item>
+        <bk-form-item
+          :label="$t('cluster.ca.nodePool.create.az.title')"
+          :desc="$t('googleCA.tips.zone')"
+          property="nodePoolConfig.autoScaling.zones">
+          <div class="flex items-center h-[32px]">
+            <bcs-select
+              class="flex-1"
+              :value="nodePoolConfig.autoScaling.zones[0]"
+              searchable
+              :loading="zoneListLoading"
+              :clearable="false"
+              selected-style="checkbox"
+              @change="handleSetZoneData">
+              <bcs-option
+                v-for="zone in zoneList"
+                :key="zone.zoneID"
+                :id="zone.zone"
+                :name="zone.zoneName" />
+            </bcs-select>
+          </div>
+        </bk-form-item>
+        <bk-form-item :label="$t('cluster.ca.nodePool.create.instanceTypeConfig.title')">
+          <div class="mb15" style="display: flex;">
+            <div class="prefix-select">
+              <span :class="['prefix', { disabled: isEdit }]">CPU</span>
+              <bcs-select
+                v-model="CPU"
+                searchable
+                :clearable="false"
+                :disabled="isEdit"
+                :placeholder="' '"
+                class="bg-[#fff]">
+                <bcs-option id="" :name="$t('generic.label.total')"></bcs-option>
+                <bcs-option
+                  v-for="cpuItem in cpuList"
+                  :key="cpuItem"
+                  :id="cpuItem"
+                  :name="cpuItem">
+                </bcs-option>
+              </bcs-select>
+              <span :class="['company', { disabled: isEdit }]">{{$t('units.suffix.cores')}}</span>
+            </div>
+            <div class="prefix-select ml30">
+              <span :class="['prefix', { disabled: isEdit }]">{{$t('generic.label.mem')}}</span>
+              <bcs-select
+                v-model="Mem"
+                searchable
+                :clearable="false"
+                :disabled="isEdit"
+                :placeholder="' '"
+                class="bg-[#fff]">
+                <bcs-option id="" :name="$t('generic.label.total')"></bcs-option>
+                <bcs-option
+                  v-for="memItem in memList"
+                  :key="memItem"
+                  :id="memItem"
+                  :name="memItem">
+                </bcs-option>
+              </bcs-select>
+              <span :class="['company', { disabled: isEdit }]">G</span>
+            </div>
+          </div>
+          <bcs-table
+            :data="instanceList"
+            v-bkloading="{ isLoading: instanceTypesLoading || clusterDetailLoading }"
+            :pagination="pagination"
+            :row-class-name="instanceRowClass"
+            @page-change="pageChange"
+            @page-limit-change="pageSizeChange"
+            @row-click="handleCheckInstanceType">
+            <bcs-table-column :label="$t('generic.ipSelector.label.serverModel')" prop="typeName" show-overflow-tooltip>
+              <template #default="{ row }">
+                <span v-bk-tooltips="{ disabled: row.status !== 'SOLD_OUT', content: $t('cluster.ca.nodePool.create.instanceTypeConfig.status.soldOut') }">
+                  <bcs-radio
+                    :value="nodePoolConfig.launchTemplate.instanceType === row.nodeType"
+                    :disabled="row.status === 'SOLD_OUT' || isEdit">
+                    <span class="bcs-ellipsis">{{row.typeName}}</span>
+                  </bcs-radio>
+                </span>
+              </template>
+            </bcs-table-column>
+            <bcs-table-column :label="$t('generic.label.specifications')" min-width="120" show-overflow-tooltip prop="nodeType"></bcs-table-column>
+            <bcs-table-column label="CPU" prop="cpu" width="80" align="right">
+              <template #default="{ row }">
+                <span>{{ `${row.cpu}${$t('units.suffix.cores')}` }}</span>
+              </template>
+            </bcs-table-column>
+            <bcs-table-column :label="$t('generic.label.mem')" prop="memory" width="80" align="right">
+              <template #default="{ row }">
+                <span>{{ row.memory }}G</span>
+              </template>
+            </bcs-table-column>
+            <bcs-table-column :label="$t('generic.label.status')" width="80">
+              <template #default="{ row }">
+                {{ row.status === 'SELL' ? $t('cluster.ca.nodePool.create.instanceTypeConfig.status.sell') : $t('cluster.ca.nodePool.create.instanceTypeConfig.status.soldOut') }}
+              </template>
+            </bcs-table-column>
+          </bcs-table>
+          <p class="text-[12px] text-[#ea3636]" v-if="!nodePoolConfig.launchTemplate.instanceType">{{ $t('generic.validate.required') }}</p>
+          <div class="mt25" style="display:flex;align-items:center;">
+            <div class="prefix-select">
+              <span :class="['prefix', { disabled: isEdit }]">{{$t('cluster.ca.nodePool.create.instanceTypeConfig.disk.system')}}</span>
+              <bcs-select
+                v-model="nodePoolConfig.launchTemplate.systemDisk.diskType"
+                :disabled="isEdit"
+                :clearable="false"
+                class="min-width-150 bg-[#fff]">
+                <bcs-option
+                  v-for="diskItem in diskEnum"
+                  :key="diskItem.id"
+                  :id="diskItem.id"
+                  :name="diskItem.name">
+                </bcs-option>
+              </bcs-select>
+            </div>
+            <bcs-select
+              class="w-[88px] bg-[#fff] ml10"
+              :disabled="isEdit"
+              :clearable="false"
+              v-model="nodePoolConfig.launchTemplate.systemDisk.diskSize">
+              <bcs-option id="50" name="50"></bcs-option>
+              <bcs-option id="100" name="100"></bcs-option>
+            </bcs-select>
+            <span :class="['company', { disabled: isEdit }]">GB</span>
+          </div>
+          <div class="mt20">
+            <bk-checkbox
+              :disabled="isEdit"
+              v-model="showDataDisks"
+              @change="handleShowDataDisksChange">
+              <span v-bk-tooltips="$t('googleCA.tips.dataDisk')">
+                {{$t('cluster.ca.nodePool.create.instanceTypeConfig.label.purchaseDataDisk')}}
+              </span>
+            </bk-checkbox>
+          </div>
+          <template v-if="showDataDisks">
+            <div class="panel" v-for="(disk, index) in nodePoolConfig.nodeTemplate.dataDisks" :key="index">
+              <div class="panel-item">
+                <div class="prefix-select">
+                  <span :class="['prefix', { disabled: isEdit }]">{{$t('cluster.ca.nodePool.create.instanceTypeConfig.disk.data')}}</span>
+                  <bcs-select
+                    :disabled="isEdit"
+                    v-model="disk.diskType"
+                    :clearable="false"
+                    class="min-width-150 bg-[#fff]">
+                    <bcs-option
+                      v-for="diskItem in diskEnum"
+                      :key="diskItem.id"
+                      :id="diskItem.id"
+                      :name="diskItem.name">
+                    </bcs-option>
+                  </bcs-select>
+                </div>
+                <bk-input
+                  class="max-width-130 ml10"
+                  type="number"
+                  :disabled="isEdit"
+                  :min="50"
+                  :max="16380"
+                  v-model="disk.diskSize">
+                </bk-input>
+                <span :class="['company', { disabled: isEdit }]">GB</span>
+              </div>
+              <p class="error-tips" v-if="disk.diskSize % 10 !== 0">{{$t('cluster.ca.nodePool.create.instanceTypeConfig.validate.dataDisks')}}</p>
+              <span :class="['panel-delete', { disabled: isEdit }]" @click="handleDeleteDiskData(index)">
+                <i class="bk-icon icon-close3-shape"></i>
+              </span>
+            </div>
+            <div
+              :class="['add-panel-btn', { disabled: isEdit || nodePoolConfig.nodeTemplate.dataDisks.length > 4 }]"
+              v-bk-tooltips="{
+                content: $t('cluster.ca.nodePool.create.instanceTypeConfig.validate.maxDataDisks'),
+                disabled: nodePoolConfig.nodeTemplate.dataDisks.length <= 4
+              }"
+              @click="handleAddDiskData">
+              <i class="bk-icon left-icon icon-plus"></i>
+              <span>{{$t('cluster.ca.nodePool.create.instanceTypeConfig.button.addDataDisks')}}</span>
+            </div>
+          </template>
+          <span class="inline-flex mt15">
+            <bk-checkbox
+              :disabled="isEdit"
+              v-model="nodePoolConfig.launchTemplate.internetAccess.publicIPAssigned">
+              {{$t('cluster.ca.nodePool.create.instanceTypeConfig.publicIPAssigned.text')}}
+            </bk-checkbox>
+          </span>
+        </bk-form-item>
+        <bk-form-item :label="$t('cluster.ca.nodePool.create.securityGroup')">
+          <i18n path="googleCA.tips.securityGroup">
+            <a
+              class="text-[#3a84ff] cursor-pointer"
+              href="https://console.cloud.google.com/net-security/firewall-manager/firewall-policies/list"
+              target="_blank">
+              {{ $t('googleCA.button.vpcRule') }}
+            </a>
+          </i18n>
+        </bk-form-item>
+        <!-- <bk-form-item :label="$t('dashboard.workload.container.dataDir')">
+          <bcs-input disabled v-model="nodePoolConfig.nodeTemplate.dockerGraphPath"></bcs-input>
+        </bk-form-item>
+        <bk-form-item :label="$t('cluster.ca.nodePool.create.containerRuntime.title')">
+          <bk-radio-group v-model="nodePoolConfig.containerRuntime">
+            <bk-radio value="docker" disabled>docker</bk-radio>
+            <bk-radio value="containerd" disabled>containerd</bk-radio>
+          </bk-radio-group>
+        </bk-form-item>
+        <bk-form-item :label="$t('cluster.ca.nodePool.create.runtimeVersion.title')">
+          <bcs-input disabled v-model="nodePoolConfig.runtimeVersion"></bcs-input>
+        </bk-form-item> -->
+      </bk-form>
+    </div>
+    <div class="bcs-border-top z-10 flex items-center sticky bottom-0 bg-[#fff] h-[60px] px-[24px]">
+      <bcs-button theme="primary" @click="handleNext">{{$t('generic.button.next')}}</bcs-button>
+      <bcs-button class="ml10" @click="handleCancel">{{$t('generic.button.cancel')}}</bcs-button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { sortBy } from 'lodash';
+import { computed, defineComponent, onMounted, ref, toRefs, watch } from 'vue';
+
+import { cloudsZones } from '@/api/modules/cluster-manager';
+import { useFocusOnErrorField } from '@/composables/use-focus-on-error-field';
+import usePage from '@/composables/use-page';
+import $i18n from '@/i18n/i18n-setup';
+import $store from '@/store/index';
+
+export default defineComponent({
+  props: {
+    defaultValues: {
+      type: Object,
+      default: () => ({}),
+    },
+    cluster: {
+      type: Object,
+      default: () => ({}),
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    saveLoading: {
+      type: Boolean,
+      default: false,
+    },
+    cloudAccountID: {
+      type: String,
+      default: '',
+    },
+    cloudID: {
+      type: String,
+      default: '',
+    },
+    region: {
+      type: String,
+      default: '',
+    },
+    vpcID: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, ctx) {
+    const { defaultValues, isEdit } = toRefs(props);
+    const nodeConfigRef = ref<any>(null);
+    const formRef = ref<any>(null);
+    const basicFormRef = ref<any>(null);
+    // 磁盘类型
+    const diskEnum = ref([
+      {
+        id: 'pd-balanced',
+        name: $i18n.t('cluster.ca.nodePool.create.instanceTypeConfig.diskType.balanced'),
+      },
+      {
+        id: 'pd-ssd',
+        name: $i18n.t('cluster.ca.nodePool.create.instanceTypeConfig.diskType.ssd'),
+      },
+      {
+        id: 'pd-standard',
+        name: $i18n.t('cluster.ca.nodePool.create.instanceTypeConfig.diskType.standard'),
+      },
+    ]);
+    const user = computed(() => $store.state.user);
+    const nodePoolConfig = ref({
+      $id: defaultValues.value.$id || `id_${Date.now()}`,
+      status: 'CREATING',
+      creator: user.value.username, // 创建人
+      nodeOS: defaultValues.value.nodeOS || '', // 节点操作系统
+      name: defaultValues.value.name || '', // 节点名称
+      autoScaling: {
+        subnetIDs: [], // 子网
+        zones: defaultValues.value.autoScaling?.zones || [],
+      },
+      launchTemplate: {
+        imageInfo: {
+          imageName: defaultValues.value.launchTemplate?.imageInfo?.imageName, // 镜像名称
+          imageType: defaultValues.value.launchTemplate?.imageInfo?.imageType || 'PUBLIC_IMAGE', // 镜像类型
+        },
+        CPU: '',
+        Mem: '',
+        instanceType: defaultValues.value.launchTemplate?.instanceType, // 机型信息
+        systemDisk: {
+          diskType: defaultValues.value.launchTemplate?.systemDisk?.diskType, // 系统盘类型
+          diskSize: defaultValues.value.launchTemplate?.systemDisk?.diskSize, // 系统盘大小
+        },
+        internetAccess: {
+          // internetChargeType: defaultValues.value.launchTemplate?.internetAccess?.internetChargeType, // 计费方式
+          // internetMaxBandwidth: defaultValues.value.launchTemplate?.internetAccess?.internetMaxBandwidth, // 购买带宽
+          publicIPAssigned: defaultValues.value.launchTemplate?.internetAccess?.publicIPAssigned, // 分配免费公网IP
+          // bandwidthPackageId: defaultValues.value.launchTemplate?.internetAccess?.bandwidthPackageId, // 带宽包ID
+        },
+        initLoginUsername: defaultValues.value.launchTemplate?.initLoginUsername || '', // 登录用户
+        // 密钥信息
+        keyPair: {
+          keyPublic: defaultValues.value.launchTemplate?.keyPair?.keyPublic || '',
+          keySecret: defaultValues.value.launchTemplate?.keyPair?.keySecret || '',
+        },
+        initLoginPassword: defaultValues.value.launchTemplate?.initLoginPassword, // 密码
+        dataDisks: defaultValues.value.launchTemplate?.dataDisks || [], // 数据盘
+        // 默认值
+        isSecurityService: defaultValues.value.launchTemplate?.isSecurityService || true,
+        isMonitorService: defaultValues.value.launchTemplate?.isMonitorService || true,
+      },
+      nodeTemplate: {
+        dataDisks: defaultValues.value.nodeTemplate?.dataDisks || [],
+        dockerGraphPath: defaultValues.value.nodeTemplate?.dockerGraphPath, // 容器目录
+        runtime: {
+          containerRuntime: defaultValues.value.nodeTemplate?.runtime?.containerRuntime, // 运行时容器组件
+          runtimeVersion: defaultValues.value.nodeTemplate?.runtime?.runtimeVersion, // 运行时版本
+        },
+        nodeOS: defaultValues.value.nodeTemplate?.nodeOS,
+      },
+      extra: {
+        provider: '', // 机型provider信息
+      },
+      containerRuntime: defaultValues.value.containerRuntime, // 容器运行时
+      runtimeVersion: defaultValues.value.runtimeVersion, // 运行时版本
+    });
+
+    const nodePoolConfigRules = ref({
+      name: [
+        {
+          required: true,
+          message: $i18n.t('generic.validate.required'),
+          trigger: 'blur',
+        },
+        {
+          message: $i18n.t('cluster.ca.nodePool.create.validate.name'),
+          trigger: 'blur',
+          validator: (v: string) => /^[\u4E00-\u9FA5A-Za-z0-9._-]+$/.test(v) && v.length <= 255 && v.length >= 2,
+        },
+      ],
+    });
+
+    // 可用区
+    const zoneList = ref<any[]>([]);
+    const zoneListLoading = ref(false);
+    const handleGetZoneList = async () => {
+      zoneListLoading.value = true;
+      zoneList.value = await cloudsZones({
+        $cloudId: props.cloudID,
+        region: props.region,
+        accountID: props.cloudAccountID,
+      });
+      zoneListLoading.value = false;
+    };
+    const handleSetZoneData = (value) => {
+      nodePoolConfig.value.autoScaling.zones = [value];
+    };
+    watch(() => nodePoolConfig.value.autoScaling.zones, () => {
+      handleGetInstanceTypes();
+    });
+
+    // 镜像
+    watch(() => nodePoolConfig.value.launchTemplate.imageInfo.imageType, () => {
+      // 获取镜像列表
+      handleGetOsImage();
+    });
+    const osImageLoading = ref(false);
+    const osImageList = ref<Array<{
+      imageID: string
+      alias: string
+    }>>([]);
+    const handleGetOsImage = async () => {
+      osImageLoading.value = true;
+      osImageList.value = await $store.dispatch('clustermanager/cloudOsImage', {
+        $cloudID: props.cloudID,
+        region: props.region,
+        accountID: props.cloudAccountID,
+        provider: nodePoolConfig.value.launchTemplate.imageInfo.imageType,
+      });
+      // eslint-disable-next-line max-len
+      nodePoolConfig.value.launchTemplate.imageInfo.imageName = (nodePoolConfig.value.launchTemplate.imageInfo.imageName || osImageList.value[0]?.imageID);
+      osImageLoading.value = false;
+    };
+
+    // 机型
+    const instanceTypesLoading = ref(false);
+    const instanceData = ref<any[]>([]);
+    const instanceTypesList = computed(() => {
+      const cacheInstanceMap = {};
+      // 先过滤可用区, 再过滤同类型机型
+      return instanceData.value
+        .filter((instance) => {
+        // todo 简单过滤同类型机型
+          if (!cacheInstanceMap[instance.nodeType]) {
+            cacheInstanceMap[instance.nodeType] = true;
+            return true;
+          }
+          return false;
+        })
+        .filter(instance => (!CPU.value || instance.cpu === CPU.value)
+        && (!Mem.value || instance.memory === Mem.value));
+    });
+    let timer: any = null;
+    watch(() => instanceTypesList.value.length, () => {
+      const index = instanceTypesList.value.findIndex(item => item.nodeType === nodePoolConfig.value.launchTemplate.instanceType);
+      timer && clearTimeout(timer);
+      timer = setTimeout(() => {
+        pageChange(Math.ceil((index + 1) / pagination.value.limit));
+      }, 100);
+      handleResetPage();
+    });
+    // eslint-disable-next-line max-len
+    const curInstanceItem = computed(() => instanceData.value.find(instance => instance.nodeType === nodePoolConfig.value.launchTemplate.instanceType) || {});
+    const cpuList = computed(() => {
+      const data = instanceData.value.reduce((pre, item) => {
+        if (!pre.includes(item.cpu)) {
+          pre.push(item.cpu);
+        }
+        return pre;
+      }, []);
+      return sortBy(data);
+    });
+    const memList = computed(() => {
+      const data = instanceData.value.reduce((pre, item) => {
+        if (!pre.includes(item.memory)) {
+          pre.push(item.memory);
+        }
+        return pre;
+      }, []);
+      return sortBy(data);
+    });
+
+    const CPU = ref('');
+    const Mem = ref('');
+    watch(() => [
+      CPU.value,
+      Mem.value,
+    ], () => {
+      // 重置机型
+      nodePoolConfig.value.launchTemplate.instanceType = '';
+      handleSetDefaultInstance();
+    });
+    watch(curInstanceItem, () => {
+      nodePoolConfig.value.extra.provider = curInstanceItem.value.provider;
+    });
+    const instanceRowClass = ({ row }) => {
+      // SELL 表示售卖，SOLD_OUT 表示售罄
+      if (row.status === 'SELL' || isEdit.value) {
+        return 'table-row-enable';
+      }
+      return 'table-row-disabled';
+    };
+    const handleCheckInstanceType = (row) => {
+      if (row.status === 'SOLD_OUT') return;
+      nodePoolConfig.value.launchTemplate.instanceType = row.nodeType;
+    };
+    // 设置默认机型
+    const handleSetDefaultInstance = () => {
+      setTimeout(() => {
+        // 默认机型配置
+        if (!nodePoolConfig.value.launchTemplate.instanceType) {
+          nodePoolConfig.value.launchTemplate.instanceType = instanceTypesList.value
+            .find(instance => instance.status === 'SELL')?.nodeType;
+        }
+      });
+    };
+    const handleGetInstanceTypes = async () => {
+      if (!nodePoolConfig.value.autoScaling.zones?.length) return;
+      instanceTypesLoading.value = true;
+      const data = await $store.dispatch('clustermanager/cloudInstanceTypes', {
+        $cloudID: props.cloudID,
+        region: nodePoolConfig.value.autoScaling.zones[0],
+        accountID: props.cloudAccountID,
+        provider: nodePoolConfig.value.launchTemplate.imageInfo.imageType,
+      });
+      instanceData.value = data.sort((pre, current) => {
+        if (pre.status !== 'SELL') return 1;
+        if (current.status !== 'SELL') return 0;
+        return pre.cpu - current.cpu;
+      });
+      handleSetDefaultInstance();
+      instanceTypesLoading.value = false;
+    };
+    const {
+      pagination,
+      curPageData: instanceList,
+      pageChange,
+      pageSizeChange,
+      handleResetPage,
+    } = usePage(instanceTypesList);
+
+    // 数据盘
+    const showDataDisks = ref(!!nodePoolConfig.value.nodeTemplate.dataDisks.length);
+    const defaultDiskItem = defaultValues.value?.hardwareProfile?.dataDisks.length
+      ? defaultValues.value.hardwareProfile.dataDisks[0]
+      : {
+        // 默认为pd-standard
+        diskType: 'pd-standard',
+        diskSize: '100',
+        autoFormatAndMount: true,
+      };
+    const handleShowDataDisksChange = (show) => {
+      nodePoolConfig.value.nodeTemplate.dataDisks = show
+        ? [JSON.parse(JSON.stringify(defaultDiskItem))] : [];
+    };
+    const handleDeleteDiskData = (index) => {
+      if (isEdit.value) return;
+      nodePoolConfig.value.nodeTemplate.dataDisks.splice(index, 1);
+    };
+    const handleAddDiskData = () => {
+      if (isEdit.value || nodePoolConfig.value.nodeTemplate.dataDisks.length > 4) return;
+      nodePoolConfig.value.nodeTemplate.dataDisks.push(JSON.parse(JSON.stringify(defaultDiskItem)));
+    };
+
+    // 操作
+    const getNodePoolData = () => {
+      // 系统盘、数据盘、宽度大小要转换为字符串类型
+      // eslint-disable-next-line max-len
+      nodePoolConfig.value.launchTemplate.systemDisk.diskSize = String(nodePoolConfig.value.launchTemplate.systemDisk.diskSize);
+      nodePoolConfig.value.nodeTemplate.dataDisks = nodePoolConfig.value.nodeTemplate.dataDisks.map(item => ({
+        ...item,
+        diskSize: String(item.diskSize),
+      }));
+      // 数据盘后端存了两个地方
+      nodePoolConfig.value.launchTemplate.dataDisks = nodePoolConfig.value.nodeTemplate.dataDisks.map(item => ({
+        diskType: item.diskType,
+        diskSize: item.diskSize,
+      }));
+      // CPU和mem信息从机型获取
+      nodePoolConfig.value.launchTemplate.CPU = curInstanceItem.value.cpu;
+      nodePoolConfig.value.launchTemplate.Mem = curInstanceItem.value.memory;
+      return nodePoolConfig.value;
+    };
+    const validate = async () => {
+      // const basicFormValidate = await basicFormRef.value?.validate().catch(() => false);
+      // if (!basicFormValidate && nodeConfigRef.value) {
+      //   nodeConfigRef.value.scrollTop = 0;
+      //   return false;
+      // }
+      // 校验机型
+      if (!nodePoolConfig.value.launchTemplate.instanceType) {
+        nodeConfigRef.value.scrollTop = 20;
+        return false;
+      }
+      const result = await formRef.value?.validate().catch(() => false);
+      if (!result && nodeConfigRef.value) {
+        nodeConfigRef.value.scrollTop = nodeConfigRef.value.scrollHeight;
+      }
+      // eslint-disable-next-line max-len
+      const validateDataDiskSize = nodePoolConfig.value.nodeTemplate.dataDisks.every(item => item.diskSize % 10 === 0);
+      // if (!basicFormValidate || !result || !validateDataDiskSize) return false;
+      if (!result || !validateDataDiskSize) return false;
+
+      return true;
+    };
+
+    const { focusOnErrorField } = useFocusOnErrorField();
+    const handleNext = async () => {
+      nodePoolConfig.value.region = nodePoolConfig.value.autoScaling.zones?.[0];
+      // 校验错误滚动到第一个错误的位置
+      const result = await validate();
+      if (!result) {
+        // 自动滚动到第一个错误的位置
+        focusOnErrorField();
+        return;
+      }
+      ctx.emit('next', getNodePoolData());
+    };
+
+    const handleCancel = () => {
+      ctx.emit('close');
+    };
+
+    // 集群详情
+    const clusterDetailLoading = ref(false);
+
+    onMounted(async () => {
+      handleGetOsImage();
+      // 机型
+      handleGetInstanceTypes();
+      handleGetZoneList();
+    });
+
+    return {
+      handleSetDefaultInstance,
+      nodeConfigRef,
+      formRef,
+      basicFormRef,
+      diskEnum,
+      nodePoolConfig,
+      nodePoolConfigRules,
+      curInstanceItem,
+      instanceTypesLoading,
+      instanceList,
+      pagination,
+      pageChange,
+      handleResetPage,
+      pageSizeChange,
+      instanceRowClass,
+      handleCheckInstanceType,
+      handleShowDataDisksChange,
+      handleDeleteDiskData,
+      handleAddDiskData,
+      handleNext,
+      handleCancel,
+      validate,
+      getNodePoolData,
+      CPU,
+      Mem,
+      cpuList,
+      memList,
+      clusterDetailLoading,
+      instanceTypesList,
+      osImageLoading,
+      osImageList,
+      showDataDisks,
+      // 可用区
+      zoneList,
+      zoneListLoading,
+      handleSetZoneData,
+    };
+  },
+});
+</script>
+<style lang="postcss" scoped>
+.node-config-wrapper {
+  overflow: auto;
+}
+.node-config {
+    font-size: 14px;
+    overflow: auto;
+    >>> .group-text {
+        line-height: 30px;
+        background-color: #fafbfd;
+    }
+    >>> .bk-form-content {
+        max-width: 650px;
+        .bk-form-radio {
+            white-space: nowrap;
+        }
+        .bk-form-checkbox {
+            white-space: nowrap;
+        }
+    }
+    >>> .table-row-enable {
+        cursor: pointer;
+    }
+    >>> .table-row-disabled {
+        cursor: not-allowed;
+        color: #C4C6CC;
+        .bk-checkbox-text {
+            color: #C4C6CC;
+        }
+    }
+    .max-width-130 {
+        max-width: 130px;
+    }
+    .max-width-150 {
+        max-width: 150px;
+    }
+    .min-width-80 {
+        min-width: 80px;
+    }
+    .min-width-150 {
+        min-width: 150px;
+    }
+    .prefix-select {
+        display: flex;
+        .prefix {
+            display: inline-block;
+            height: 32px;
+            background: #F0F1F5;
+            border: 1px solid #C4C6CC;
+            border-radius: 2px 0 0 2px;
+            border-radius: 2px 0 0 2px;
+            padding: 0 8px;
+            &.disabled {
+              border-color: #dcdee5;
+            }
+        }
+        >>> .bk-select {
+            min-width: 110px;
+            margin-left: -1px;
+        }
+    }
+    .company {
+        display: inline-block;
+        min-width: 30px;
+        padding: 0 4px 0 4px;
+        height: 32px;
+        line-height: 30px;
+        border: 1px solid #C4C6CC;
+        text-align: center;
+        border-left: none;
+        background-color: #fafbfd;
+        &.disabled {
+          border-color: #dcdee5;
+        }
+    }
+    >>> .panel {
+        background: #F5F7FA;
+        padding: 16px 24px;
+        margin-top: 2px;
+        margin-bottom: 16px;
+        position: relative;
+        &-item {
+            display: flex;
+            align-items: center;
+            height: 32px;
+            .label {
+                display: inline-block;
+                width: 80px;
+            }
+
+        }
+        &-delete {
+            position: absolute;
+            cursor: pointer;
+            color: #979ba5;
+            top: 0;
+            right: 8px;
+            &:hover {
+                color: #3a84ff;
+            }
+            &.disabled {
+                color: #C4C6CC;
+                cursor: not-allowed;
+            }
+        }
+        .bk-form-control {
+            display: flex;
+            width: auto;
+            align-items: center;
+        }
+    }
+    >>> .add-panel-btn {
+        cursor: pointer;
+        background: #fafbfd;
+        border: 1px dashed #c4c6cc;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 32px;
+        font-size: 12px;
+        .bk-icon {
+            font-size: 20px;
+        }
+        &:hover {
+            border-color: #3a84ff;
+            color: #3a84ff;
+        }
+        &.disabled {
+            color: #C4C6CC;
+            cursor: not-allowed;
+            border-color: #C4C6CC;
+        }
+    }
+    .bcs-icon-info-circle-shape {
+        color: #979ba5;
+    }
+    .error-tips {
+        color: red;
+        font-size: 12px;
+    }
+}
+</style>
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/node-pool-info.vue b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/node-pool-info.vue
new file mode 100644
index 0000000000..d7a7414b85
--- /dev/null
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/node-pool-info.vue
@@ -0,0 +1,287 @@
+<template>
+  <div class="h-full">
+    <div class="p-[24px] h-full overflow-auto" ref="nodePoolInfoRef">
+      <FormGroup :title="$t('generic.title.basicInfo1')" :allow-toggle="false">
+        <BasicPoolInfo
+          :default-values="defaultValues"
+          :is-edit="isEdit"
+          :cluster="cluster"
+          ref="basicInfoRef">
+        </BasicPoolInfo>
+      </FormGroup>
+      <div class="px-[16px]"><bcs-divider class="!my-[0px]"></bcs-divider></div>
+      <FormGroup :title="$t('cluster.ca.nodePool.create.scaleInitConfig.title')" :allow-toggle="false">
+        <p>{{$t('cluster.nodeTemplate.label.postInstall.title')}}</p>
+        <div class="mt-[10px]">
+          <bcs-select class="max-w-[524px]" :clearable="false" v-model="scaleOutPostActionType">
+            <bcs-option id="simple" :name="$t('cluster.nodeTemplate.label.postInstall.type.scripts')"></bcs-option>
+            <bcs-option id="complex" :name="$t('cluster.nodeTemplate.label.postInstall.type.sops')"></bcs-option>
+          </bcs-select>
+          <bcs-input
+            type="textarea"
+            class="mt10"
+            :rows="6"
+            :placeholder="$t('cluster.ca.nodePool.create.scaleInitConfig.placeholder')"
+            v-if="scaleOutPostActionType === 'simple'"
+            v-model="nodePoolInfoData.nodeTemplate.userScript">
+          </bcs-input>
+          <BkSops
+            class="mt10"
+            actions-key="postActions"
+            :cluster-id="cluster.clusterID"
+            :addons="nodePoolInfoData.nodeTemplate.scaleOutExtraAddons"
+            :allow-skip-when-failed="allowSkipScaleOutWhenFailed"
+            ref="scaleOutRef"
+            v-else>
+          </BkSops>
+        </div>
+        <p class="mt-[10px]">{{$t('generic.label.whenFailed')}}</p>
+        <bk-radio-group class="mt-[8px]" v-model="allowSkipScaleOutWhenFailed">
+          <bk-radio :value="false" class="text-[12px]">
+            {{ $t('cluster.ca.nodePool.create.scaleInitConfig.postInit.errorHandling.radio1') }}
+            <span class="text-[#699DF4]">
+              [{{ $t('cluster.ca.nodePool.create.scaleInitConfig.label.keyStepsRecommended') }}]
+            </span>
+            <i
+              class="bk-icon icon-info-circle"
+              v-bk-tooltips="$t('cluster.ca.nodePool.create.scaleInitConfig.postInit.errorHandling.tips1')">
+            </i>
+          </bk-radio>
+          <bk-radio :value="true" class="text-[12px]">
+            {{ $t('cluster.ca.nodePool.create.scaleInitConfig.postInit.errorHandling.radio2') }}
+            <span class="text-[#979BA5]">
+              [{{ $t('cluster.ca.nodePool.create.scaleInitConfig.label.unKeyStepsRecommended') }}]
+            </span>
+            <i
+              class="bk-icon icon-info-circle"
+              v-bk-tooltips="$t('cluster.ca.nodePool.create.scaleInitConfig.postInit.errorHandling.tips2')">
+            </i>
+          </bk-radio>
+        </bk-radio-group>
+      </FormGroup>
+      <div class="px-[16px]"><bcs-divider class="!my-[0px]"></bcs-divider></div>
+      <FormGroup :title="$t('cluster.ca.nodePool.create.scaleInitConfig.scaleInPreScript')" :allow-toggle="false">
+        <bcs-select class="max-w-[524px]" :clearable="false" v-model="scaleInPreActionType">
+          <bcs-option id="simple" :name="$t('cluster.nodeTemplate.label.postInstall.type.scripts')"></bcs-option>
+          <bcs-option id="complex" :name="$t('cluster.nodeTemplate.label.postInstall.type.sops')"></bcs-option>
+        </bcs-select>
+        <bcs-input
+          type="textarea"
+          class="mt10"
+          :rows="6"
+          :placeholder="$t('cluster.ca.nodePool.create.scaleInitConfig.placeholder')"
+          v-if="scaleInPreActionType === 'simple'"
+          v-model="nodePoolInfoData.nodeTemplate.scaleInPreScript">
+        </bcs-input>
+        <BkSops
+          class="mt10"
+          actions-key="preActions"
+          :addons="nodePoolInfoData.nodeTemplate.scaleInExtraAddons"
+          :cluster-id="cluster.clusterID"
+          :allow-skip-when-failed="allowSkipScaleInWhenFailed"
+          ref="scaleInRef"
+          v-else>
+        </BkSops>
+        <p class="mt-[10px]">{{$t('generic.label.whenFailed')}}</p>
+        <bk-radio-group class="mt-[8px]" v-model="allowSkipScaleInWhenFailed">
+          <bk-radio :value="false" class="text-[12px]">
+            {{ $t('cluster.ca.nodePool.create.scaleInitConfig.recycleClean.errorHandling.radio1') }}
+            <span class="text-[#699DF4]">
+              [{{ $t('cluster.ca.nodePool.create.scaleInitConfig.label.keyStepsRecommended') }}]
+            </span>
+            <i
+              class="bk-icon icon-info-circle"
+              v-bk-tooltips="$t('cluster.ca.nodePool.create.scaleInitConfig.recycleClean.errorHandling.tips1')">
+            </i>
+          </bk-radio>
+          <bk-radio :value="true" class="text-[12px]">
+            {{ $t('cluster.ca.nodePool.create.scaleInitConfig.recycleClean.errorHandling.radio2') }}
+            <span class="text-[#979BA5]">
+              [{{ $t('cluster.ca.nodePool.create.scaleInitConfig.label.unKeyStepsRecommended') }}]
+            </span>
+            <i
+              class="bk-icon icon-info-circle"
+              v-bk-tooltips="$t('cluster.ca.nodePool.create.scaleInitConfig.recycleClean.errorHandling.tips2')">
+            </i>
+          </bk-radio>
+        </bk-radio-group>
+      </FormGroup>
+    </div>
+    <div class="bcs-border-top z-10 flex items-center sticky bottom-0 bg-[#fff] h-[60px] px-[24px]" v-if="showFooter">
+      <bcs-button @click="handlePre">{{$t('generic.button.pre')}}</bcs-button>
+      <bcs-button
+        theme="primary"
+        :loading="saveLoading"
+        class="ml10"
+        @click="handleSaveNodePoolData">
+        {{$t('cluster.ca.nodePool.create.button.save')}}
+      </bcs-button>
+      <bk-button class="ml10" @click="handleCancel">{{ $t('generic.button.cancel') }}</bk-button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, ref, toRefs } from 'vue';
+
+import BasicPoolInfo from './basic-pool-info.vue';
+
+import { mergeDeep } from '@/common/util';
+import FormGroup from '@/components/form-group.vue';
+import { useFocusOnErrorField } from '@/composables/use-focus-on-error-field';
+import BkSops from '@/views/cluster-manage/components/bk-sops.vue';
+
+export default defineComponent({
+  name: 'AwsNodePoolInfo',
+  components: { FormGroup, BasicPoolInfo, BkSops },
+  props: {
+    // 详情数据或者默认值
+    defaultValues: {
+      type: Object,
+      default: () => ({}),
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    cluster: {
+      type: Object,
+      default: () => ({}),
+    },
+    showFooter: {
+      type: Boolean,
+      default: true,
+    },
+    saveLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const { defaultValues } = toRefs(props);
+    const nodePoolInfoData = ref({
+      nodeTemplate: {
+        extraArgs: {
+          kubelet: defaultValues.value?.nodeTemplate?.extraArgs?.kubelet || '',
+        },
+        preStartUserScript: defaultValues.value?.nodeTemplate?.preStartUserScript || '', // 扩容前置脚本
+        userScript: defaultValues.value?.nodeTemplate?.userScript || '', // 扩容后置脚本
+        scaleOutExtraAddons: defaultValues.value?.nodeTemplate?.scaleOutExtraAddons || {}, // 扩容后置流程
+        scaleInPreScript: defaultValues.value?.nodeTemplate?.scaleInPreScript || '', // 缩容前置脚本
+        scaleInExtraAddons: defaultValues.value?.nodeTemplate?.scaleInExtraAddons || {}, // 缩容后置流程
+        labels: {}, // basic-pool-info里面赋值
+        allowSkipScaleOutWhenFailed: defaultValues.value?.nodeTemplate?.allowSkipScaleOutWhenFailed,
+        allowSkipScaleInWhenFailed: defaultValues.value?.nodeTemplate?.allowSkipScaleInWhenFailed,
+      },
+      labels: {},
+    });
+
+    const scaleOutPostActionType = ref<'complex' | 'simple'>('simple');
+    const scaleInPreActionType = ref<'complex' | 'simple'>('simple');
+
+    const nodePoolInfoRef = ref<any>(null);
+    const basicInfoRef = ref<any>(null);
+    const scaleInRef = ref<any>(null);
+    const scaleOutRef = ref<any>(null);
+
+    const getNodePoolData = () => {
+      // 处理基本参数
+      nodePoolInfoData.value = mergeDeep(nodePoolInfoData.value, basicInfoRef.value?.nodePoolInfo || {});
+      // 处理扩容脚本参数
+      if (scaleOutPostActionType.value === 'complex') {
+        nodePoolInfoData.value.nodeTemplate.userScript = '';
+        nodePoolInfoData.value.nodeTemplate.scaleOutExtraAddons = scaleOutRef.value?.bkSopsData;
+      } else {
+        nodePoolInfoData.value.nodeTemplate.scaleOutExtraAddons = {};
+        nodePoolInfoData.value.nodeTemplate.allowSkipScaleOutWhenFailed = allowSkipScaleOutWhenFailed.value;
+      }
+
+      // 处理缩容前置脚本参数
+      if (scaleInPreActionType.value === 'complex') {
+        nodePoolInfoData.value.nodeTemplate.scaleInPreScript = '';
+        nodePoolInfoData.value.nodeTemplate.scaleInExtraAddons = scaleInRef.value?.bkSopsData;
+      } else {
+        nodePoolInfoData.value.nodeTemplate.scaleInExtraAddons = {};
+        nodePoolInfoData.value.nodeTemplate.allowSkipScaleInWhenFailed = allowSkipScaleInWhenFailed.value;
+      }
+
+      // 处理label参数 后端label放两地方
+      nodePoolInfoData.value.labels = nodePoolInfoData.value.nodeTemplate.labels;
+      return nodePoolInfoData.value;
+    };
+    const { focusOnErrorField } = useFocusOnErrorField();
+    const validate = async () => {
+      const basicFormValidate = await basicInfoRef.value?.validate().catch(() => false);
+      if (!basicFormValidate) {
+        // 滚动到顶部
+        focusOnErrorField();
+        return false;
+      }
+
+      return true;
+    };
+    const handlePre = () => {
+      ctx.emit('pre');
+    };
+    const handleSaveNodePoolData = async () => {
+      const result = await validate();
+      if (!result) return;
+
+      ctx.emit('next', getNodePoolData());
+      ctx.emit('add');
+      handleCancel();
+    };
+    function handleCancel() {
+      ctx.emit('close');
+    };
+
+    const collapse = ref(false);
+    const handleCollapseChange = (value) => {
+      collapse.value = value;
+    };
+
+    // 脚本失败后能够跳过配置
+    const allowSkipScaleOutWhenFailed = ref(false);
+    const allowSkipScaleInWhenFailed = ref(true);
+
+    onMounted(() => {
+      scaleOutPostActionType.value = nodePoolInfoData.value.nodeTemplate.scaleOutExtraAddons?.postActions?.length ? 'complex' : 'simple';
+      scaleInPreActionType.value = nodePoolInfoData.value.nodeTemplate.scaleInExtraAddons?.preActions?.length ? 'complex' : 'simple';
+      if (scaleOutPostActionType.value === 'complex') {
+        const addons = nodePoolInfoData.value.nodeTemplate?.scaleOutExtraAddons;
+        const plugin = addons?.postActions?.[0];// 取postAction第1个（目前只支持一个），但是后端设计为了数组
+        allowSkipScaleOutWhenFailed.value = !!addons?.plugins?.[plugin]?.allowSkipWhenFailed;
+      } else {
+        allowSkipScaleOutWhenFailed.value = !!nodePoolInfoData.value.nodeTemplate.allowSkipScaleOutWhenFailed;
+      }
+
+      if (scaleInPreActionType.value === 'complex') {
+        const addons = nodePoolInfoData.value.nodeTemplate?.scaleInExtraAddons;
+        const plugin = addons?.preActions?.[0];// 取preAction第1个（目前只支持一个），但是后端设计为了数组
+        allowSkipScaleInWhenFailed.value = !!addons?.plugins?.[plugin]?.allowSkipWhenFailed;
+      } else {
+        allowSkipScaleInWhenFailed.value = nodePoolInfoData.value.nodeTemplate.allowSkipScaleInWhenFailed !== undefined
+          ? !!nodePoolInfoData.value.nodeTemplate.allowSkipScaleInWhenFailed
+          : true;
+      }
+    });
+    return {
+      collapse,
+      nodePoolInfoRef,
+      basicInfoRef,
+      scaleInRef,
+      scaleOutRef,
+      scaleOutPostActionType,
+      scaleInPreActionType,
+      nodePoolInfoData,
+      allowSkipScaleOutWhenFailed,
+      allowSkipScaleInWhenFailed,
+      getNodePoolData,
+      validate,
+      handlePre,
+      handleCancel,
+      handleCollapseChange,
+      handleSaveNodePoolData,
+    };
+  },
+});
+</script>
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/nodes.vue b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/nodes.vue
new file mode 100644
index 0000000000..2f1f77d2b5
--- /dev/null
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/create/google-cloud/nodes.vue
@@ -0,0 +1,560 @@
+<template>
+  <div>
+    <bk-form :model="nodeConfig" :rules="nodeConfigRules" ref="formRef">
+      <bk-form-item
+        :label="$t('cluster.create.aws.label.defaultNodePool')"
+        required
+        error-display-type="normal"
+        property="nodePoolGroups"
+      >
+        <!-- <bcs-button
+          theme="primary"
+          outline
+          icon="plus"
+          @click="handleAddNode">
+          {{$t('cluster.create.aws.nodePool')}}
+        </bcs-button>
+        <bcs-button
+          theme="primary"
+          outline
+          icon="delete"
+          @click="handleDeleteNode">
+          {{$t('generic.button.delete')}}
+        </bcs-button> -->
+        <bcs-table
+          class="w-[600px]"
+          height="200px"
+          :ref="el => tableRef = el"
+          v-bkloading="{ isLoading: loading }"
+          :data="nodePoolTableData"
+          @selection-change="handleSelectionChange">
+          <!-- <bcs-table-column type="selection" width="60" :selectable="handleSelectable">
+            <template #default="{ row }">
+              <bcs-checkbox
+                v-bk-tooltips="{
+                  content: $t('cluster.create.aws.tips.subnetEmpty'),
+                  disabled: handleSelectable(row)
+                }"
+                :checked="!!selectionList.find(item => item === row)"
+                :disabled="!handleSelectable(row)"
+                @change="handleRowSelectionChange(row)">
+              </bcs-checkbox>
+            </template>
+          </bcs-table-column> -->
+          <bcs-table-column
+            :label="$t('cluster.ca.nodePool.label.name')"
+            prop="name">
+          </bcs-table-column>
+          <bcs-table-column
+            :label="$t('cluster.ca.nodePool.label.nodeQuota')"
+            prop="autoScaling.maxSize"
+            width="100">
+          </bcs-table-column>
+          <bcs-table-column
+            :label="$t('cluster.ca.nodePool.label.nodeCounts')"
+            prop="autoScaling.desiredSize"
+            width="100">
+          </bcs-table-column>
+          <bcs-table-column
+            :label="$t('generic.ipSelector.label.serverModel')"
+            prop="nodeTemplate.nodeOS">
+          </bcs-table-column>
+          <bcs-table-column
+            :label="$t('generic.label.action')"
+            prop="action"
+            width="100">
+            <template #default="{ $index, row }">
+              <bcs-button text @click="handleEdit(row, $index)">{{ $t('generic.button.edit') }}</bcs-button>
+              <!-- <bcs-button text class="ml-[10px]" @click="handleDelete($index)">
+                {{ $t('generic.button.delete') }}
+              </bcs-button> -->
+            </template>
+          </bcs-table-column>
+        </bcs-table>
+      </bk-form-item>
+      <!-- 用户名和密码 -->
+      <bk-form-item
+        :label="$t('cluster.ca.nodePool.create.loginType.text')"
+        property="nodeSettings.workerLogin"
+        error-display-type="normal"
+        required>
+        <bk-radio-group value="ssh">
+          <span class="inline-block">
+            <bk-radio value="ssh">{{$t('cluster.ca.nodePool.create.loginType.ssh.text')}}</bk-radio>
+          </span>
+        </bk-radio-group>
+        <div class="bg-[#F5F7FA] p-[16px] mt-[4px] max-w-[600px]">
+          <bk-form-item
+            :label-width="100"
+            :label="$t('googleCloud.label.loginUser')"
+            property="nodeConfig.launchTemplate.initLoginUsername"
+            error-display-type="normal">
+            <bcs-input v-model="nodeConfig.nodeSettings.initLoginUsername"></bcs-input>
+          </bk-form-item>
+          <bk-form-item
+            :label="$t('cluster.ca.nodePool.create.loginType.ssh.label.publicKey.text')"
+            :label-width="100"
+            :desc="$t('cluster.ca.nodePool.create.loginType.ssh.label.publicKey.desc')"
+            property="nodeConfig.launchTemplate.keyPair.keyPublic"
+            error-display-type="normal">
+            <bcs-input
+              type="textarea"
+              :rows="4"
+              v-model="nodeConfig.nodeSettings.keyPublic">
+            </bcs-input>
+          </bk-form-item>
+          <bk-form-item
+            :label="$t('cluster.ca.nodePool.create.loginType.ssh.label.privateKey.text')"
+            :label-width="100"
+            :desc="$t('cluster.ca.nodePool.create.loginType.ssh.label.privateKey.desc')"
+            property="nodePoolConfig.launchTemplate.keyPair.keySecret"
+            error-display-type="normal">
+            <bcs-input
+              type="textarea"
+              :rows="4"
+              :placeholder="$t('generic.placeholder.input')"
+              v-model="nodeConfig.nodeSettings.keySecret" />
+          </bk-form-item>
+        </div>
+      </bk-form-item>
+      <bk-form-item
+        :label="$t('tke.label.nodeModule.text')"
+        :desc="$t('tke.label.nodeModule.desc')"
+        property="clusterBasicSettings.module.workerModuleID"
+        error-display-type="normal"
+        required>
+        <TopoSelector
+          :placeholder="$t('generic.placeholder.select')"
+          v-model="nodeConfig.clusterBasicSettings.module.workerModuleID"
+          class="max-w-[600px]" />
+      </bk-form-item>
+      <div class="flex items-center h-[48px] bg-[#FAFBFD] px-[24px] fixed bottom-0 left-0 w-full bcs-border-top">
+        <bk-button class="min-w-[88px]" @click="preStep">{{ $t('generic.button.pre') }}</bk-button>
+        <bk-button
+          theme="primary"
+          class="ml10 min-w-[88px]"
+          @click="handleConfirm">{{ $t('generic.button.confirm') }}</bk-button>
+        <bk-button class="ml10" @click="handleCancel">{{ $t('generic.button.cancel') }}</bk-button>
+      </div>
+    </bk-form>
+    <bcs-sideslider
+      :is-show.sync="showNodeConfig"
+      :quick-close="false"
+      :title="model === 'add' ? $t('cluster.create.aws.nodePool') : $t('cluster.create.aws.editNodePool')"
+      :width="740">
+      <template #content>
+        <keep-alive>
+          <component
+            :is="stepComMap[curStep]"
+            :save-loading="saveLoading"
+            :region="region"
+            :cloud-account-i-d="cloudAccountID"
+            :cloud-i-d="cloudID"
+            :default-values="nodeDefaultValues"
+            :vpc-i-d="vpcID"
+            :bk-cloud-i-d="bkCloudID"
+            v-if="!isLoading"
+            @next="handleNextStep"
+            @pre="handlePreStep"
+            @add="handleAddnode"
+            @close="closeSlider"
+          />
+        </keep-alive>
+      </template>
+    </bcs-sideslider>
+  </div>
+</template>
+<script setup lang="ts">
+import { cloneDeep } from 'lodash';
+import { computed, onMounted, PropType, ref, watch } from 'vue';
+
+import NodePoolConfig from './node-pool-config.vue';
+import NodePoolInfo from './node-pool-info.vue';
+
+import { recommendNodeGroupConf } from '@/api/modules/cluster-manager';
+import { mergeDeep } from '@/common/util';
+import { useFocusOnErrorField } from '@/composables/use-focus-on-error-field';
+import $i18n from '@/i18n/i18n-setup';
+import $store from '@/store/index';
+import TopoSelector from '@/views/cluster-manage/autoscaler/components/topo-select-tree.vue';
+
+const props = defineProps({
+  region: {
+    type: String,
+    default: '',
+  },
+  cloudAccountID: {
+    type: String,
+    default: '',
+  },
+  cloudID: {
+    type: String,
+    default: '',
+  },
+  environment: {
+    type: String,
+    default: '',
+  },
+  provider: {
+    type: String,
+    default: '',
+  },
+  vpcID: {
+    type: String,
+    default: '',
+  },
+  master: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  manageType: {
+    type: String as PropType<'MANAGED_CLUSTER'|'INDEPENDENT_CLUSTER'>,
+    default: 'MANAGED_CLUSTER',
+  },
+  bkCloudID: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emits = defineEmits(['next', 'cancel', 'pre', 'confirm', 'instances-change']);
+// node配置
+const nodeConfig = ref<any>({
+  nodeGroups: [],
+  clusterBasicSettings: {
+    module: {
+      workerModuleID: '',
+    },
+  },
+  nodeSettings: {
+    initLoginUsername: '',
+    keyPublic: '',
+    keySecret: '',
+  },
+});
+
+// 动态 i18n 问题，这里使用computed
+const nodeConfigRules = computed(() => ({
+  'nodeSettings.workerLogin': [
+    {
+      trigger: 'custom',
+      message: $i18n.t('generic.validate.required'),
+      validator() {
+        return nodeConfig.value.nodeSettings?.initLoginUsername
+          && nodeConfig.value.nodeSettings?.keySecret
+          && nodeConfig.value.nodeSettings?.keyPublic;
+      },
+    },
+  ],
+  nodePoolGroups: [
+    {
+      trigger: 'custom',
+      message: $i18n.t('cluster.create.aws.validate.subnet'),
+      validator() {
+        // const list = nodePoolTableData.value;
+        // if (list.length > 0) {
+        //   return list.every(item => item?.autoScaling?.subnetIDs && item?.autoScaling?.subnetIDs.length > 0);
+        // }
+        return true;
+      },
+    },
+  ],
+  'clusterBasicSettings.module.workerModuleID': [
+    {
+      required: true,
+      message: $i18n.t('generic.validate.required'),
+      trigger: 'custom',
+    },
+  ],
+}));
+
+// 跳转链接
+const openLink = (link: string) => {
+  if (!link) return;
+
+  window.open(link);
+};
+
+const curIndex = ref();
+const model = ref<'add' | 'edit'>('add');
+const nodePoolTableData = ref<any[]>([]);
+const selectionList = ref<any[]>([]);
+// 点击添加节点
+function handleAddNode() {
+  nodeDefaultValues.value = cloneDeep(defaultValues.value);
+  model.value = 'add';
+  showNodeConfig.value = true;
+};
+// 删除节点按钮
+function handleDeleteNode() {
+  if (selectionList.value.length === 0) return;
+  nodePoolTableData.value = nodePoolTableData.value.reduce((pre, curItem) => {
+    if (selectionList.value.findIndex(item => item.$id === curItem.$id) < 0) {
+      pre.push(curItem);
+    }
+    return pre;
+  }, []);
+};
+// 添加/编辑节点操作
+function handleAddnode() {
+  if (model.value === 'add') {
+    nodePoolTableData.value = [...nodePoolTableData.value, nodePoolData.value];
+  } else {
+    nodePoolTableData.value.splice(curIndex.value, 1, nodePoolData.value);
+  }
+  nodePoolData.value = {};
+}
+// 删除节点操作
+function handleDelete(index) {
+  nodePoolTableData.value = nodePoolTableData.value.filter((_, i) => i !== index);
+}
+// 编辑节点
+function handleEdit(row, index) {
+  curIndex.value = index;
+  nodeDefaultValues.value = cloneDeep(mergeDeep(nodeDefaultValues.value, row));
+  model.value = 'edit';
+  showNodeConfig.value = true;
+}
+// 选择节点
+function handleSelectionChange(selection) {
+  selectionList.value = selection;
+}
+
+
+// 选择单个节点
+const tableRef = ref();
+function handleRowSelectionChange(row) {
+  const index = selectionList.value.findIndex(item => item.$id === row.$id);
+  if (index > -1) {
+    selectionList.value.splice(index, 1);
+    // 更新表格原本选中状态
+    tableRef.value?.toggleRowSelection(row, false);
+  } else {
+    selectionList.value.push(row);
+    tableRef.value?.toggleRowSelection(row, true);
+  }
+};
+// 关闭侧滑框
+function closeSlider() {
+  showNodeConfig.value = false;
+  curStep.value = 1;
+  nodeDefaultValues.value = cloneDeep(defaultValues.value);
+}
+
+const curStep = ref(1);
+const stepComMap = {
+  1: NodePoolConfig,
+  2: NodePoolInfo,
+};
+const nodePoolData = ref<Record<string, any>>({});
+const handleNextStep = (data) => {
+  nodePoolData.value = mergeDeep(nodePoolData.value, data);
+  if (curStep.value + 1 <= 2) {
+    curStep.value = curStep.value + 1;
+  }
+};
+const handlePreStep = () => {
+  curStep.value = curStep.value - 1;
+};
+
+const isLoading = ref(false);
+const saveLoading = ref(false);
+
+// 登录方式
+const validateLogin = (trigger = '') => {
+  formRef.value?.$refs?.loginTypeRef?.validate(trigger);
+};
+const handleLoginValueChange = (value) => {
+  nodeConfig.value.nodeSettings.workerLogin = value;
+};
+
+// 节点池默认配置
+const defaultValues = ref({
+  autoScaling: {
+    maxSize: 10,
+    minSize: 0,
+    multiZoneSubnetPolicy: 'PRIORITY',
+    retryPolicy: 'IMMEDIATE_RETRY',
+    scalingMode: 'CLASSIC_SCALING',
+  },
+  clusterID: '',
+  creator: '',
+  enableAutoscale: true,
+  launchTemplate: {
+    CPU: 4,
+    Mem: 8,
+    dataDisks: [],
+    imageInfo: {
+      imageID: 'img-eb30mz89',
+    },
+    internetAccess: {
+      internetChargeType: 'TRAFFIC_POSTPAID_BY_HOUR',
+      internetMaxBandwidth: '0',
+      publicIPAssigned: false,
+    },
+    systemDisk: {
+      diskSize: '50',
+      diskType: '',
+    },
+    keyPair: {
+      keySecret: '',
+    },
+  },
+  name: '',
+  nodeTemplate: {
+    dockerGraphPath: '/data/bcs/service/docker',
+    taints: [],
+    unSchedulable: 0,
+  },
+  region: '',
+});
+const nodeDefaultValues = ref();
+const loading = ref(false);
+// 获取节点池默认数据
+async function getNodeGroupData() {
+  if (!props.cloudID || !props.region || !props.cloudAccountID) return;
+  loading.value = true;
+  const result = await recommendNodeGroupConf({
+    $cloudId: props.cloudID,
+    region: props.region,
+    accountID: props.cloudAccountID,
+  }).catch(() => []);
+  nodePoolTableData.value = result.map((item, index) => setNodeInfo(item, index));
+  loading.value = false;
+}
+// 磁盘类型
+const diskEnum = ref([
+  {
+    id: 'pd-balanced',
+    name: $i18n.t('cluster.ca.nodePool.create.instanceTypeConfig.diskType.balanced'),
+  },
+  {
+    id: 'pd-ssd',
+    name: $i18n.t('cluster.ca.nodePool.create.instanceTypeConfig.diskType.ssd'),
+  },
+  {
+    id: 'pd-standard',
+    name: $i18n.t('cluster.ca.nodePool.create.instanceTypeConfig.diskType.standard'),
+  },
+]);
+const user = computed(() => $store.state.user);
+function setNodeInfo(data, index) {
+  return {
+    $id: `${index}id_${Date.now()}`,
+    status: 'CREATING',
+    creator: user.value.username,
+    name: data?.name || '', // 节点名称
+    nodeOS: data?.instanceProfile?.nodeOS || '', // 节点操作系统
+    autoScaling: {
+      serviceRole: data?.serviceRoleName || '', // iam角色
+      subnetIDs: [], // 支持子网
+      maxSize: data?.scalingProfile?.maxSize,
+      scalingMode: data?.scalingProfile?.scalingMode || 'Delete', // 扩缩容模式, 释放模式改为Delete
+      desiredSize: data?.scalingProfile?.desiredSize || 0,
+      zones: data?.zones || [],
+    },
+    launchTemplate: {
+      CPU: data?.hardwareProfile?.CPU || '',
+      Mem: data?.hardwareProfile?.Mem || '',
+      instanceType: data?.instanceProfile?.instanceType, // 机型信息
+      InstanceChargeType: data?.instanceProfile?.instanceChargeType, // 实例计费方式
+      systemDisk: {
+        diskType: diskEnum.value.some(item => item.id === data?.hardwareProfile?.systemDisk?.diskType)
+          ? data?.hardwareProfile?.systemDisk?.diskType
+          : 'pd-standard', // 系统盘类型
+        diskSize: data?.hardwareProfile?.systemDisk?.diskSize || '100', // 系统盘大小
+      },
+      internetAccess: {
+        publicIPAssigned: data?.networkProfile?.publicIPAssigned, // 分配免费公网IP
+      },
+      // 密钥信息
+      keyPair: {
+        keySecret: '',
+      },
+      initLoginUsername: '', // 用户名
+      dataDisks: data?.hardwareProfile?.dataDisks || [], // 数据盘
+      // 默认值
+      isSecurityService: true,
+      isMonitorService: true,
+      imageInfo: {
+        imageName: 'UBUNTU_CONTAINERD',
+        imageType: 'PUBLIC_IMAGE',
+      },
+    },
+    nodeTemplate: {
+      dataDisks: data?.hardwareProfile?.dataDisks || [],
+      nodeOS: data?.instanceProfile?.nodeOS || '', // 节点操作系统,
+      dockerGraphPath: '/data/bcs/service/docker',
+    },
+  };
+}
+
+// 添加、编辑节点池
+const showNodeConfig = ref(false);
+
+// 设置是否可选
+function handleSelectable(row) {
+  return row?.autoScaling?.subnetIDs && row?.autoScaling?.subnetIDs.length > 0;
+};
+
+watch([
+  () => props.region,
+  () => props.cloudAccountID,
+], () => {
+  getNodeGroupData();
+});
+
+// 校验表单
+const formRef = ref();
+const validate = async () => {
+  const result = await formRef.value?.validate().catch(() => false);
+  return result;
+};
+
+// 上一步
+const preStep = () => {
+  emits('pre');
+};
+// 下一步
+const { focusOnErrorField } = useFocusOnErrorField();
+const handleConfirm = async () => {
+  const result = await validate();
+  if (result) {
+    nodeConfig.value.nodeGroups = nodePoolTableData.value;
+    nodeConfig.value.nodeGroups.forEach((item) => {
+      !item?.launchTemplate && (item.launchTemplate = {});
+      !item?.launchTemplate?.keyPair && (item.launchTemplate.keyPair = {});
+      item.launchTemplate.initLoginUsername = nodeConfig.value.nodeSettings?.initLoginUsername;
+      item.launchTemplate.keyPair.keySecret = nodeConfig.value.nodeSettings?.keySecret;
+      item.launchTemplate.keyPair.keyPublic = nodeConfig.value.nodeSettings?.keyPublic;
+    });
+    emits('next', {
+      ...nodeConfig.value,
+    });
+    emits('confirm');
+  } else {
+    // 自动滚动到第一个错误的位置
+    focusOnErrorField();
+  }
+};
+// 取消
+const handleCancel = () => {
+  emits('cancel');
+};
+
+onMounted(async () => {
+  isLoading.value = true;
+  nodeDefaultValues.value = cloneDeep(defaultValues.value);
+  isLoading.value = false;
+  getNodeGroupData();
+});
+
+defineExpose({
+  validate,
+});
+</script>
+<style lang="postcss" scoped>
+/deep/ .bk-table-header, /deep/ .bk-table-body {
+  width: 100% !important;
+}
+</style>
diff --git a/bcs-ui/frontend/src/views/cluster-manage/add/index.vue b/bcs-ui/frontend/src/views/cluster-manage/add/index.vue
index 9fef5502a5..1072e81cd9 100644
--- a/bcs-ui/frontend/src/views/cluster-manage/add/index.vue
+++ b/bcs-ui/frontend/src/views/cluster-manage/add/index.vue
@@ -158,7 +158,6 @@ export default defineComponent({
             title: $i18n.t('publicCloud.google.title'),
             desc: $i18n.t('publicCloud.google.desc'),
             type: 'createGoogleCloud',
-            disabled: true,
           },
           // Azure
           {
@@ -289,6 +288,7 @@ export default defineComponent({
       createTencentCloud: 'createTKECluster',
       createAWSCloud: 'CreateAWSCloudCluster',
       createAzureCloud: 'CreateAzureCloudCluster',
+      createGoogleCloud: 'CreateGoogleCloudCluster',
       createK8S: 'createK8SCluster',
       createVCluster: 'createVCluster',
       // importKubeConfig: 'importCluster',
diff --git a/bcs-ui/frontend/src/views/cluster-manage/autoscaler/google/node-config.vue b/bcs-ui/frontend/src/views/cluster-manage/autoscaler/google/node-config.vue
index f714a3f99a..9ed3814c7a 100644
--- a/bcs-ui/frontend/src/views/cluster-manage/autoscaler/google/node-config.vue
+++ b/bcs-ui/frontend/src/views/cluster-manage/autoscaler/google/node-config.vue
@@ -287,8 +287,8 @@ import { computed, defineComponent, onMounted, ref, toRefs, watch } from 'vue';
 
 import { cloudsZones } from '@/api/modules/cluster-manager';
 import FormGroup from '@/components/form-group.vue';
-import usePage from '@/composables/use-page';
 import { useFocusOnErrorField } from '@/composables/use-focus-on-error-field';
+import usePage from '@/composables/use-page';
 import $i18n from '@/i18n/i18n-setup';
 import $router from '@/router';
 import $store from '@/store/index';
@@ -348,6 +348,7 @@ export default defineComponent({
         vpcID: '', // todo 放在basic-pool-info组件比较合适
         zones: defaultValues.value.autoScaling?.zones || [],
       },
+      nodeOS: defaultValues.value.launchTemplate?.imageInfo?.imageName, // 操作系统类型
       launchTemplate: {
         imageInfo: {
           imageName: defaultValues.value.launchTemplate?.imageInfo?.imageName, // 镜像名称
@@ -663,6 +664,7 @@ export default defineComponent({
       // CPU和mem信息从机型获取
       nodePoolConfig.value.launchTemplate.CPU = curInstanceItem.value.cpu;
       nodePoolConfig.value.launchTemplate.Mem = curInstanceItem.value.memory;
+      nodePoolConfig.value.nodeOS = nodePoolConfig.value.launchTemplate.imageInfo.imageName;
       return nodePoolConfig.value;
     };
     const validate = async () => {
@@ -690,7 +692,7 @@ export default defineComponent({
 
       return true;
     };
-    
+
     const { focusOnErrorField } = useFocusOnErrorField();
     const handleNext = async () => {
       // 校验错误滚动到第一个错误的位置
diff --git a/bcs-ui/frontend/src/views/cluster-manage/autoscaler/google/node-pool-detail.vue b/bcs-ui/frontend/src/views/cluster-manage/autoscaler/google/node-pool-detail.vue
index 5f5d9596f4..a11b2382f6 100644
--- a/bcs-ui/frontend/src/views/cluster-manage/autoscaler/google/node-pool-detail.vue
+++ b/bcs-ui/frontend/src/views/cluster-manage/autoscaler/google/node-pool-detail.vue
@@ -85,7 +85,7 @@
             <span v-else>{{ cloudAreaName || '--' }}</span>
           </bk-form-item>
           <bk-form-item :label="$t('cluster.ca.nodePool.label.system')">
-            {{clusterOS || '--'}}
+            {{nodeOS || '--'}}
           </bk-form-item>
           <bk-form-item :label="$t('cluster.ca.nodePool.create.containerRuntime.title')">
             {{`${clusterData.clusterAdvanceSettings
@@ -331,6 +331,7 @@ export default defineComponent({
     ]);
 
     // 获取详情
+    const nodeOS = computed(() => nodePoolData.value?.nodeOS);
     const getNodeGroupDetail = async () => {
       nodePoolData.value = await $store.dispatch('clustermanager/nodeGroupDetail', {
         $nodeGroupID: props.nodeGroupID,
@@ -440,6 +441,7 @@ export default defineComponent({
       zoneLoading,
       cloudAreaLoading,
       cloudAreaName,
+      nodeOS,
     };
   },
 });
diff --git a/bcs-ui/frontend/src/views/cluster-manage/detail/master/master-gcp.vue b/bcs-ui/frontend/src/views/cluster-manage/detail/master/master-gcp.vue
index 525362dd0a..d965b49116 100644
--- a/bcs-ui/frontend/src/views/cluster-manage/detail/master/master-gcp.vue
+++ b/bcs-ui/frontend/src/views/cluster-manage/detail/master/master-gcp.vue
@@ -3,11 +3,14 @@
     <!-- 谷歌云 -->
     <bk-form-item :label="$t('cluster.labels.clusterType')">
       <span class="text-[#313238]">
-        {{ $t('bcs.cluster.managed') }}
+        {{ manageType === 'MANAGED_CLUSTER' ? $t('bcs.cluster.autopilot') : $t('bcs.cluster.standard') }}
       </span>
-      <span class="text-[#979BA5]">
+      <span v-if="manageType === 'MANAGED_CLUSTER'" class="text-[#979BA5]">
         ({{ $t('cluster.create.label.manageType.managed.gkeDesc') }})
       </span>
+      <span v-if="manageType === 'INDEPENDENT_CLUSTER'" class="text-[#979BA5]">
+        ({{ $t('cluster.create.google.tips.standard') }})
+      </span>
     </bk-form-item>
     <bk-form-item
       :label="$t('cluster.create.label.manageType.managed.clusterLevel.text')">
@@ -43,10 +46,14 @@ export default defineComponent({
     // google cloud locationType
     const locationType = computed(() => curCluster.value?.extraInfo?.locationType);
 
+    // google cloud manageType
+    const manageType = computed(() => curCluster.value?.manageType);
+
 
     return {
       curCluster,
       locationType,
+      manageType,
     };
   },
 });
diff --git a/bcs-ui/frontend/src/views/cluster-manage/node-list/node.vue b/bcs-ui/frontend/src/views/cluster-manage/node-list/node.vue
index 2ff217557d..60b5dd11d0 100644
--- a/bcs-ui/frontend/src/views/cluster-manage/node-list/node.vue
+++ b/bcs-ui/frontend/src/views/cluster-manage/node-list/node.vue
@@ -8,7 +8,7 @@
     <bcs-alert type="info" class="cluster-node-tip">
       <div slot="title">
         {{$t('cluster.nodeList.article1')}}
-        <i18n v-if="!['awsCloud', 'azureCloud'].includes(clusterData.provider)" path="cluster.nodeList.article2">
+        <i18n v-if="isShowTableAlertAfter" path="cluster.nodeList.article2">
           <span place="nodes" class="num">{{ clusterData.extraInfo?.clusterCurNodeNum || '--' }}</span>
           <span place="realRemainNodesCount" class="num">{{ clusterData.extraInfo?.clusterSupNodeNum || '--' }}</span>
         </i18n>
@@ -20,46 +20,47 @@
       </div>
     </bcs-alert>
     <!-- 修改节点转移模块 -->
-    <template v-if="['tencentCloud', 'tencentPublicCloud', 'gcpCloud', 'azureCloud', 'huaweiCloud','awsCloud', 'bluekingCloud'].includes(curSelectedCluster.provider || '')">
-      <div class="flex items-center text-[12px]">
-        <div class="text-[#979BA5] bcs-border-tips" v-bk-tooltips="$t('tke.tips.transferNodeCMDBModule')">
-          {{ $t('tke.label.nodeModule.text') }}
-        </div>
-        <span class="mx-[4px]">:</span>
-        <template v-if="isEditModule">
-          <div class="flex items-center">
-            <TopoSelector
-              :placeholder="$t('generic.placeholder.select')"
-              :cluster-id="clusterId"
-              v-model="curModuleID"
-              class="w-[360px]"
-              @change="handleWorkerModuleChange"
-              @node-data-change="handleNodeChange" />
-            <span
-              class="text-[12px] text-[#3a84ff] ml-[8px] cursor-pointer"
-              text
-              @click="handleSaveWorkerModule">{{ $t('generic.button.save') }}</span>
-            <span
-              class="text-[12px] text-[#3a84ff] ml-[8px] cursor-pointer"
-              text
-              @click="isEditModule = false">{{ $t('generic.button.cancel') }}</span>
-          </div>
-        </template>
-        <template v-else>
-          <span>
-            {{ clusterData.clusterBasicSettings && clusterData.clusterBasicSettings.module
-              ? clusterData.clusterBasicSettings.module.workerModuleName || '--'
-              : '--' }}
-          </span>
-          <span
-            class="hover:text-[#3a84ff] cursor-pointer ml-[8px]"
-            @click="handleEditWorkerModule">
-            <i class="bk-icon icon-edit-line"></i>
-          </span>
-        </template>
+    <div class="flex items-center text-[12px]">
+      <div class="text-[#979BA5] bcs-border-tips" v-bk-tooltips="$t('tke.tips.transferNodeCMDBModule')">
+        {{ $t('tke.label.nodeModule.text') }}
       </div>
-      <bcs-divider></bcs-divider>
-    </template>
+      <span class="mx-[4px]">:</span>
+      <template v-if="isEditModule">
+        <div class="flex items-center">
+          <TopoSelector
+            :placeholder="$t('generic.placeholder.select')"
+            :cluster-id="clusterId"
+            v-model="curModuleID"
+            class="w-[360px]"
+            @change="handleWorkerModuleChange"
+            @node-data-change="handleNodeChange" />
+          <span
+            class="text-[12px] text-[#3a84ff] ml-[8px] cursor-pointer"
+            text
+            @click="handleSaveWorkerModule">{{ $t('generic.button.save') }}</span>
+          <span
+            class="text-[12px] text-[#3a84ff] ml-[8px] cursor-pointer"
+            text
+            @click="isEditModule = false">{{ $t('generic.button.cancel') }}</span>
+        </div>
+      </template>
+      <template v-else>
+        <span>
+          {{ clusterData.clusterBasicSettings && clusterData.clusterBasicSettings.module
+            ? clusterData.clusterBasicSettings.module.workerModuleName || '--'
+            : '--' }}
+        </span>
+        <span
+          :class="[
+            'hover:text-[#3a84ff] cursor-pointer ml-[8px]',
+            isGkeManagedCluster ? '!cursor-not-allowed' : ''
+          ]"
+          @click="handleEditWorkerModule">
+          <i class="bk-icon icon-edit-line"></i>
+        </span>
+      </template>
+    </div>
+    <bcs-divider></bcs-divider>
     <!-- 操作栏 -->
     <div class="cluster-node-operate">
       <div class="left">
@@ -571,7 +572,7 @@
                       </li>
                     </template>
                     <li
-                      :class="['bcs-dropdown-item', { disabled: isKubeConfigOrAgentImportCluster || isCloudSelfNode(row) }]"
+                      :class="['bcs-dropdown-item', { disabled: isKubeConfigOrAgentImportCluster || isCloudSelfNode(row) || isGkeManagedCluster }]"
                       v-bk-tooltips="{
                         disabled: !isKubeConfigOrAgentImportCluster && !isCloudSelfNode(row),
                         content: $t('cluster.nodeList.tips.disableImportClusterAction'),
@@ -805,10 +806,12 @@ export default defineComponent({
 
     // 修改节点转移模块设置
     const { clusterData, getClusterDetail } = useClusterInfo();// clusterData和curCluster一样，就是多了云上的数据信息
+    const isGkeManagedCluster = computed(() => clusterData.value.provider === 'gcpCloud' && clusterData.value.manageType === 'MANAGED_CLUSTER');
     const isEditModule = ref(false);
     const curModuleID = ref();
     const curNodeModule = ref<Record<string, any>>({});
     const handleEditWorkerModule = () => {
+      if (isGkeManagedCluster.value) return;
       curModuleID.value = Number(clusterData.value.clusterBasicSettings?.module?.workerModuleID);
       isEditModule.value = true;
     };
@@ -1162,7 +1165,7 @@ export default defineComponent({
       && (curSelectedCluster.value.importCategory === 'kubeConfig' || curSelectedCluster.value.importCategory === 'machine'));
     const disableAddNodeBtn = computed(() =>
       // kubeConfig导入集群, 控制面导入集群 和未开启原生k8s集群时禁用掉添加节点按钮
-      isKubeConfigOrAgentImportCluster.value || (!flagsMap.value.k8s && clusterData.value.provider === 'bluekingCloud'));
+      isKubeConfigOrAgentImportCluster.value || (!flagsMap.value.k8s && clusterData.value.provider === 'bluekingCloud') || isGkeManagedCluster.value);
     // cloud私有节点
     const isCloudSelfNode = row => curSelectedCluster.value.clusterCategory === 'importer'
       && (curSelectedCluster.value.provider === 'gcpCloud' || curSelectedCluster.value.provider === 'azureCloud'
@@ -1592,7 +1595,7 @@ export default defineComponent({
       curCheckedNodes.value = [];
     };
     const handleDeleteNode = async (row) => {
-      if (isKubeConfigOrAgentImportCluster.value || isCloudSelfNode(row)) return;
+      if (isKubeConfigOrAgentImportCluster.value || isCloudSelfNode(row) || isGkeManagedCluster.value) return;
 
       curCheckedNodes.value = [row];
       showDeleteDialog.value = true;
@@ -1951,6 +1954,9 @@ export default defineComponent({
     };
     const podDisabled = computed(() => !selections.value.every(select => select.status === 'REMOVABLE'));
 
+    // 是否显示表头alert的后半段
+    const isShowTableAlertAfter = computed(() => !['awsCloud', 'azureCloud', 'gcpCloud'].includes(clusterData.value.provider));
+
     watch(pageConf, () => {
       // 非跨页全选在分页变更时重置selections
       if (![
@@ -2073,6 +2079,8 @@ export default defineComponent({
       deleting,
       isCloudSelfNode,
       disableAddNodeBtn,
+      isGkeManagedCluster,
+      isShowTableAlertAfter,
     };
   },
 });