diff --git a/src/dashboard-front/.eslintignore b/src/dashboard-front/.eslintignore
index 1a3d7d028..fa2f7ddf0 100644
--- a/src/dashboard-front/.eslintignore
+++ b/src/dashboard-front/.eslintignore
@@ -12,3 +12,4 @@ src/views/permission/apply/index.vue
 src/assets/**
 *bak*
 src/views/resource/setting/detail.vue
+src/views/resource/setting/import.vue
diff --git a/src/dashboard-front/package.json b/src/dashboard-front/package.json
index 7d997804d..6e85ed7c0 100644
--- a/src/dashboard-front/package.json
+++ b/src/dashboard-front/package.json
@@ -41,6 +41,7 @@
     "highlight.js": "^11.9.0",
     "js-cookie": "^3.0.5",
     "js-yaml": "^4.1.0",
+    "jsonpath-plus": "^9.0.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "mavon-editor": "^3.0.1",
diff --git a/src/dashboard-front/src/components/ag-editor.vue b/src/dashboard-front/src/components/ag-editor.vue
index 8e267778b..086958dad 100644
--- a/src/dashboard-front/src/components/ag-editor.vue
+++ b/src/dashboard-front/src/components/ag-editor.vue
@@ -11,6 +11,14 @@ import * as monaco from 'monaco-editor';
 
 let editor = null; // 编辑器实例
 const monacoEditor = ref(null);
+// 编辑器装饰器（高亮效果等）
+let decorations = [];
+// 可切换字号范围
+const fontSizeOptions = [14, 20, 24];
+// 可切换行高范围
+const lineHeight = [24, 30, 34];
+// 当前选中字号的index
+const currentFontSizeIndex = ref(0);
 // 定义从父组件接收的属性
 const props = defineProps({
   modelValue: { type: [String, Object, Array], default: () => 'yaml' },
@@ -23,7 +31,7 @@ const props = defineProps({
 
 const { modelValue, language, readOnly, width, height, theme } = toRefs(props);
 
-const emit = defineEmits(['change', 'update:modelValue']);
+const emit = defineEmits(['change', 'update:modelValue', 'findStateChanged']);
 
 // 挂载
 onMounted(() => {
@@ -86,9 +94,12 @@ const initEditor = () => {
     lineNumbersMinChars: 5, // 行号最小字符   number
     readOnly: readOnly.value, // 是否只读  取值 true | false
     lineHeight: 24,
+    glyphMargin: true,  // 是否显示行号左侧装饰，用于显示当前行的错误信息等级：error | warning
   });
 
   editorMounted(); // 编辑器初始化后
+  // 初始化编辑器装饰
+  decorations = editor.createDecorationsCollection([]);
 };
 
 const editorMounted = () => {
@@ -96,6 +107,15 @@ const editorMounted = () => {
     const yamlValue = getValue();
     emitChange(yamlValue, event);
   });
+
+  // 监听搜索工具状态变化，把可视状态传递出去
+  editor.getContribution('editor.contrib.findController')
+    .getState()
+    .onFindReplaceStateChange(() => {
+      const isVisible = editor.getContribution('editor.contrib.findController')
+        .getState().isRevealed;
+      emit('findStateChanged', isVisible);
+    });
 };
 
 // 修改editor的值
@@ -104,15 +124,82 @@ const emitChange = (emitValue, event) => {
   emit('update:modelValue', emitValue, event);
 };
 
+// 更改光标位置
+const setCursorPos = ({ lineNumber }) => {
+  const model = editor.getModel();
+
+  if (!model) return;
+
+  const lastColumnNumber = model.getLineLastNonWhitespaceColumn(lineNumber);
+  editor.focus();
+  editor.setPosition(new monaco.Position(lineNumber, lastColumnNumber));
+  editor.revealLineInCenter(lineNumber);
+};
+
+const genLineDecorations = (decorationOptions) => {
+  const decoOptions = decorationOptions.filter(o => o.position)
+    .map(o => ({
+      range: {
+        startLineNumber: o.position.lineNumber,
+        endLineNumber: o.position.lineNumber,
+        startColumn: o.position.column,
+        endColumn: o.position.column,
+      },
+      options: {
+        isWholeLine: true, // 整行高亮
+        className:
+          `lineHighlight${o.level}`, // 当前行装饰用类名
+        glyphMarginClassName:
+          `glyphMargin${o.level}`, // 当前行左侧装饰(glyph)用类名
+      },
+    }));
+  decorations = editor.createDecorationsCollection(decoOptions);
+};
+
+const setDecorations = () => {
+  decorations.set();
+};
+
+const clearDecorations = () => {
+  decorations.clear();
+};
+
+const getModel = () => editor.getModel();
+
+const showFindPanel = () => {
+  editor.trigger('', 'actions.find');
+};
+
+const closeFindPanel = () => {
+  editor.trigger('', 'closeFindWidget');
+};
+
+const switchFontSize = () => {
+  currentFontSizeIndex.value = (currentFontSizeIndex.value + 1) % fontSizeOptions.length;
+  editor.updateOptions({
+    fontSize: fontSizeOptions[currentFontSizeIndex.value],
+    lineHeight: lineHeight[currentFontSizeIndex.value],
+  });
+};
+
 defineExpose({
   setValue,
+  setCursorPos,
+  setDecorations,
+  clearDecorations,
+  genLineDecorations,
+  getModel,
+  getValue,
+  showFindPanel,
+  closeFindPanel,
+  switchFontSize,
 });
 
 </script>
 <style scoped>
 .codemirror,
 .monaco-editor {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 </style>
diff --git a/src/dashboard-front/src/images/font.svg b/src/dashboard-front/src/images/font.svg
new file mode 100644
index 000000000..aae392b64
--- /dev/null
+++ b/src/dashboard-front/src/images/font.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" d="M149.568 832L200.608 668.672 453.952 668.672 504.992 832 588.512 832 380.64 192.608 278.56 192.608 69.76 832 149.568 832ZM432.608 601.856L221.952 601.856 327.744 261.28 432.608 601.856ZM768.8 377.6C821.8142368 377.6 862.7624832 390.1779584 891.3222464 415.6272544 918.8501088 440.1570304 933.1789632 473.8074752 934.3252448 516.0424512L934.4 521.6 934.3990976 723.8798048 934.46232 728.153584C934.8599232 741.0557824 937.1515232 750.2985792 940.9857024 755.8581376 944.7271424 761.2832256 950.8939392 765.632928 959.7020256 768.810256L963.1292928 769.946608 971.1049536 772.373984 949.4065792 834.3693376 942.9696928 833.533376C906.755408 828.830224 881.1964128 813.074624 867.0895872 786.6148992L865.3145792 783.1029536 864.416 781.136 861.9610528 783.7638624C851.279568 794.693488 839.0995104 803.8726176 825.4427072 811.287024L819.4994432 814.3565376 814.0650432 816.9033888C790.3402528 827.5097664 764.0283008 832.8 735.2 832.8 691.10344 832.8 655.8984896 820.3580896 630.0387328 795.3508544 604.139808 770.3057376 591.2 736.7475552 591.2 695.2 591.2 649.4121408 609.3889696 613.6070816 645.4436288 588.6243264 679.4126528 565.086736 727.0471584 552.9883392 788.2756416 552.058128L796 552 850.4 552 850.40104 525.7289824 850.32528 520.9620192C849.5027968 495.8634816 841.9667232 478.2937696 827.9367168 467.5520448 812.446816 455.6925888 789.3198464 449.6 758.4 449.6 729.4489376 449.6 696.451984 455.7226688 659.4397984 468.019728L651.4471712 470.7493376 643.9561088 473.3760736 620.1316192 407.0818496 637.1141312 401.218816C683.9919264 385.4869472 727.8879616 377.6 768.8 377.6ZM797.6643488 614.3997408L791.4157024 614.4497312C751.4273216 615.10184 722.8221568 622.1671104 705.6275424 635.1792512 687.9876512 648.5283552 679.2 668.0036928 679.2 694.3997408 679.2 743.2971392 702.5338912 766.4 752 766.4 771.408128 766.4 789.9250176 761.429024 807.6732512 751.4300192 823.8671232 742.3067104 837.4526464 730.0886944 848.4821376 714.7138112L850.4 711.904 850.4 614.3997408 797.6643488 614.3997408Z"/></svg>
\ No newline at end of file
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
index 3e2bc3958..b1a6b97a3 100644
--- a/src/dashboard-front/src/language/lang.ts
+++ b/src/dashboard-front/src/language/lang.ts
@@ -639,6 +639,7 @@ const lang: ILANG = {
   '上传文件': ['Upload'],
   '导入 Swagger 文件': ['Import Swagger'],
   'Swagger 说明文档': ['Swagger Doc'],
+  '使用指引': ['Usage Doc'],
   '模板示例': ['Template Example'],
   '请确认以下文档变更：': ['Confirm the following document changes:'],
   '导入文档压缩包': ['Import Archive'],
@@ -953,6 +954,7 @@ const lang: ILANG = {
   '应用将按网关申请全部驳回': ['Reject permission application for all resources under the gateway'],
   '申请应用：': ['App ID: '],
   '（json /yaml 格式）': ['(json /yaml format)'],
+  '支持 Swagger 2.0 和 OpenAPI 3.0 规范的文件，文件格式支持 JSON、YAML': ['Support Swagger 2.0 and OpenAPI 3.0 spec files, support JSON/YAML'],
   'YAML格式': ['YAML Format'],
   'JSON格式': ['JSON Format'],
   '您尚未创建中文文档': ['You have not created a Chinese document yet'],
@@ -1481,6 +1483,36 @@ const lang: ILANG = {
   '确认发布 {version} 版本至 {stage} 环境？': ['Are you sure to release {version} to the {stage} environment?'],
   '发布后，将会覆盖原来的资源版本，请谨慎操作！': ['After the release, the original resource version will be overwritten, please exercise caution!'],
   '立即生成版本': ['Generate Version'],
+  '插件数量': ['Plugin Count'],
+  '不导入': ['Don\'t Import'],
+  '后端请求方法': ['Backend Method'],
+  '后端请求路径': ['Backend Path'],
+  '修改配置': ['Change Settings'],
+  '批量修改认证方式': ['Edit All Auth Config'],
+  '批量修改公开设置': ['Edit All Public Config'],
+  '恢复取消导入的资源': ['Undo Resources Uncheck'],
+  '恢复导入': ['Undo Uncheck'],
+  '请输入资源名称，按Enter搜索': ['Input Resource Name And Press Enter'],
+  '请输入资源名称/路径，按Enter搜索': ['Input Name/Path And Press Enter'],
+  '请确认导入的资源': ['Check Resources To Import'],
+  '确认导入资源？': ['Confirm To Import?'],
+  '语法校验': ['Validate Code'],
+  '校验通过': ['Validation Passed'],
+  '代码编辑器': ['Code Editor'],
+  '网关：': ['Gateway: '],
+  '将新增：': ['Creating '],
+  '条资源，更新覆盖': [' resource(s), Overwriting '],
+  '条资源': [' resource(s)'],
+  '个资源，新增': ['resource(s), creating'],
+  '个，更新': [', overwriting'],
+  '个，取消导入': [', not importing'],
+  '个': [' '],
+  '新增的资源（共{num}个）': ['Creating {num} Resources'],
+  '更新的资源（共{num}个）': ['Overwriting {num} Resources'],
+  '不导入的资源（共{num}个）': ['Not Importing {num} Resources'],
+  '生成新文档：原有的文档将会覆盖更新': ['Generate New Doc: Will Overwrite Old One'],
+  '校验文件': ['Validate File'],
+  '资源信息确认': ['Confirm Resources'],
 
   // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
   // // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
diff --git a/src/dashboard-front/src/types/common.ts b/src/dashboard-front/src/types/common.ts
index 96b09cadb..2778c4459 100644
--- a/src/dashboard-front/src/types/common.ts
+++ b/src/dashboard-front/src/types/common.ts
@@ -1,4 +1,6 @@
 // 分页interface
+import type { IPosition } from 'monaco-editor';
+
 export interface IPagination {
   small?: boolean
   offset: number
@@ -41,3 +43,21 @@ export interface Staff {
   username: string;
   display_name: string;
 }
+
+// monaco editor 代码错误高亮要用的类型
+export type CodeErrorMsgType = 'All' | 'Error' | 'Warning';
+
+export type ErrorReasonType = {
+  json_path: string,
+  paths: string[],
+  pathValue: any[],
+  quotedValue: string,
+  stringToFind: string,
+  message: string,
+  isDecorated: boolean,
+  level: CodeErrorMsgType,
+  offset: number,
+  position: IPosition | null,
+  regex?: RegExp | null,
+};
+
diff --git a/src/dashboard-front/src/views/resource/setting/comps/back-config.vue b/src/dashboard-front/src/views/resource/setting/comps/back-config.vue
index d0e6d2364..a3717ee56 100644
--- a/src/dashboard-front/src/views/resource/setting/comps/back-config.vue
+++ b/src/dashboard-front/src/views/resource/setting/comps/back-config.vue
@@ -146,7 +146,7 @@
             :label="t('请求类型')"
           >
             <template #default="{ data }">
-              {{backConfigData.config.method || data?.stage?.name}}
+              {{ backConfigData?.config?.method || data?.stage?.name }}
             </template>
           </bk-table-column>
           <bk-table-column
@@ -503,8 +503,10 @@ watch(
   (val: any) => {
     if (Object.keys(val).length) {
       const { backend } = val;
-      backConfigData.value = { ...backend };
-      handleServiceChange(backend.id);
+      backConfigData.value = { ...backConfigData.value, ...backend };
+      if (backend?.id) {
+        handleServiceChange(backend.id);
+      }
     }
   },
   { immediate: true },
diff --git a/src/dashboard-front/src/views/resource/setting/comps/base-info.vue b/src/dashboard-front/src/views/resource/setting/comps/base-info.vue
index 022455673..5e397494d 100644
--- a/src/dashboard-front/src/views/resource/setting/comps/base-info.vue
+++ b/src/dashboard-front/src/views/resource/setting/comps/base-info.vue
@@ -147,8 +147,15 @@ watch(
   (val: any) => {
     if (Object.keys(val).length) {
       const { name, description, auth_config, is_public, allow_apply_permission, labels } = val;
-      const label_ids = labels.map((e: {id: number, name: string}) => e.id);
-      formData.value = { name: props.isClone ? `${name}_clone` : name, description, auth_config, is_public, allow_apply_permission, label_ids };
+      const label_ids = labels.map((e: { id: number, name: string }) => e.id);
+      formData.value = {
+        name: props.isClone ? `${name}_clone` : name,
+        description,
+        auth_config: { ...auth_config },
+        is_public,
+        allow_apply_permission,
+        label_ids,
+      };
       resourcePermRequiredBackup.value = !!auth_config?.resource_perm_required;
     }
   },
diff --git a/src/dashboard-front/src/views/resource/setting/comps/edit-import-resource-side-slider.vue b/src/dashboard-front/src/views/resource/setting/comps/edit-import-resource-side-slider.vue
new file mode 100644
index 000000000..0e08e1ac7
--- /dev/null
+++ b/src/dashboard-front/src/views/resource/setting/comps/edit-import-resource-side-slider.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="edit-container">
+    <bk-sideslider
+      v-model:isShow="renderShow"
+      width="800"
+      title="修改配置"
+      quick-close
+      @hidden="handleHidden"
+    >
+      <template #default>
+        <div style="padding: 24px 0 40px;">
+          <bk-collapse
+            v-model="activeIndex"
+            use-card-theme
+          >
+            <bk-collapse-panel name="baseInfo" :title="t('基础信息')">
+              <template #content>
+                <base-info ref="baseInfoRef" :detail="props.resource"></base-info>
+              </template>
+            </bk-collapse-panel>
+
+            <bk-collapse-panel name="frontConfig" :title="t('前端配置')">
+              <template #content>
+                <front-config ref="frontConfigRef" :detail="props.resource"></front-config>
+              </template>
+            </bk-collapse-panel>
+
+            <bk-collapse-panel name="backConfig" :title="t('后端配置')">
+              <template #content>
+                <back-config ref="backConfigRef" :detail="props.resource"></back-config>
+              </template>
+            </bk-collapse-panel>
+          </bk-collapse>
+        </div>
+      </template>
+      <template #footer>
+        <div style="padding-left: 60px;">
+          <bk-button
+            theme="primary"
+            @click="handleSubmit"
+          >
+            {{ t('保存') }}
+          </bk-button>
+          <bk-button style="margin-left: 6px;" @click="handleHidden"> {{ t('取消') }}</bk-button>
+        </div>
+      </template>
+    </bk-sideslider>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import BaseInfo from '@/views/resource/setting/comps/base-info.vue';
+import FrontConfig from '@/views/resource/setting/comps/front-config.vue';
+import BackConfig from '@/views/resource/setting/comps/back-config.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+  isSliderShow: { type: Boolean, default: false },
+  resource: { type: Object, default: () => ({}) },
+});
+
+const emits = defineEmits<{
+  'on-hidden': [],
+  'submit': [resConfig: any]
+}>();
+
+// 默认展开
+const activeIndex = ref(['baseInfo', 'frontConfig', 'backConfig']);
+const baseInfoRef = ref(null);
+const frontConfigRef = ref(null);
+const backConfigRef = ref(null);
+const renderShow = ref(props.isSliderShow);
+
+const formData = ref<any>({});
+
+// 提交
+const handleSubmit = async () => {
+  await baseInfoRef.value?.validate();
+  await frontConfigRef.value?.validate();
+  await backConfigRef.value?.validate();
+  const baseFormData = baseInfoRef.value.formData;
+  const frontFormData = frontConfigRef.value.frontConfigData;
+  const backFormData = backConfigRef.value.backConfigData;
+  try {
+    const payload = {
+      ...baseFormData,
+      ...frontFormData,
+      backend: backFormData,
+    };
+    emits('submit', payload);
+    emits('on-hidden');
+  } catch (error) {
+    console.log('error', error);
+  }
+};
+
+const handleHidden = () => {
+  renderShow.value = false;
+  formData.value = {};
+  emits('on-hidden');
+};
+
+watch(() => props.isSliderShow, (val) => {
+  renderShow.value = val;
+});
+
+</script>
+<style scoped lang="scss">
+
+:deep(.bk-collapse-card .bk-collapse-item) {
+  box-shadow: none;
+}
+</style>
diff --git a/src/dashboard-front/src/views/resource/setting/edit.vue b/src/dashboard-front/src/views/resource/setting/edit.vue
index 09c1bd9e5..cd09ec8eb 100644
--- a/src/dashboard-front/src/views/resource/setting/edit.vue
+++ b/src/dashboard-front/src/views/resource/setting/edit.vue
@@ -114,9 +114,11 @@ const getResourceDetails = async () => {
 
 // 提交
 const handleSubmit = async () => {
-  await baseInfoRef.value?.validate();
-  await frontConfigRef.value?.validate();
-  await backConfigRef.value?.validate();
+  await Promise.all([
+    baseInfoRef.value?.validate(),
+    frontConfigRef.value?.validate(),
+    backConfigRef.value?.validate(),
+  ]);
   const baseFormData = baseInfoRef.value.formData;
   const frontFormData = frontConfigRef.value.frontConfigData;
   const backFormData = backConfigRef.value.backConfigData;
diff --git a/src/dashboard-front/src/views/resource/setting/import.vue b/src/dashboard-front/src/views/resource/setting/import.vue
index a4ad27bca..701289a36 100644
--- a/src/dashboard-front/src/views/resource/setting/import.vue
+++ b/src/dashboard-front/src/views/resource/setting/import.vue
@@ -1,6 +1,19 @@
 <template>
-  <div class="import-container p20">
-    <section v-if="curView === 'import'">
+  <div class="import-wrapper">
+    <header class="steps-indicator-wrap">
+      <main class="steps-indicator">
+        <bk-steps
+          :steps="[
+            { title: t('校验文件') },
+            { title: t('资源信息确认') },
+          ]"
+          :cur-step="curView === 'import' ? 1 : 2"
+          theme="primary"
+        />
+      </main>
+    </header>
+    <!--  导入前视图，代码编辑器在此页  -->
+    <div v-if="curView === 'import'" class="import-container">
       <div class="import-header flex-row justify-content-between">
         <div class="flex-row align-items-center">
           <bk-upload
@@ -11,171 +24,937 @@
           >
             <div>
               <i class="icon apigateway-icon icon-ag-add-small"></i>
-              {{ t('导入 Swagger 文件') }}
+              {{ t('上传文件') }}
             </div>
           </bk-upload>
-          <span class="desc">{{ t('（json /yaml 格式）') }}</span>
-          <bk-form class="flex-row">
-            <bk-form-item class="mb0" :label-width="20">
-              <bk-checkbox v-model="showDoc">
-                {{ t('生成资源文档') }}
-              </bk-checkbox>
-            </bk-form-item>
-            <bk-form-item class="mb0" :label="t('文档语言')" v-if="showDoc" :required="true" :label-width="120">
-              <bk-radio-group v-model="language">
-                <bk-radio label="zh">{{ t('中文文档') }}</bk-radio>
-                <bk-radio label="en">{{ t('英文文档') }}</bk-radio>
-              </bk-radio-group>
-            </bk-form-item>
-          </bk-form>
+          <span class="desc">{{ t('支持 Swagger 2.0 和 OpenAPI 3.0 规范的文件，文件格式支持 JSON、YAML') }}</span>
+          <span class="desc">
+            <bk-link
+              theme="primary" :href="GLOBAL_CONFIG.DOC.SWAGGER" target="_blank"
+              style="font-size: 12px;"
+            >
+              <span class="flex-row align-items-center">
+                <share width="12px" height="12px" fill="#3A84FF" style="margin-right: 4px;" />{{ t('使用指引') }}
+              </span>
+            </bk-link>
+          </span>
         </div>
         <div class="flex-row align-items-center">
-          <!-- <bk-link theme="primary" :href="GLOBAL_CONFIG.DOC.TEMPLATE_VARS" target="_blank">
-            {{ t('模板示例') }}
-          </bk-link> -->
-          <bk-button theme="primary" text @click="handleShowExample">{{ t('模板示例') }}</bk-button>
-          <bk-link theme="primary" class="pl10" :href="GLOBAL_CONFIG.DOC.SWAGGER" target="_blank">
-            <i class="apigateway-icon icon-ag-info"></i>
-            {{ t('Swagger 说明文档') }}
-          </bk-link>
+          <bk-button theme="primary" text style="font-size: 12px;" @click="handleShowExample">
+            {{
+              t('模板示例')
+            }}
+          </bk-button>
         </div>
       </div>
-
-      <div class="monacoEditor mt10">
-        <editor-monaco v-model="editorText" ref="resourceEditorRef" />
-      </div>
-    </section>
-    <section v-else>
-      <div class="flex-row justify-content-between">
-        <div class="info">
-          {{ t('请确认以下资源变更，资源配置：') }}
-          <span class="add-info">{{ t('新建') }}
-            <span class="ag-strong success pl5 pr5">
-              {{ createNum }}
-            </span>{{ t('条') }}
-          </span>
-          <span class="add-info">{{ t('覆盖') }}
-            <span class="ag-strong danger pl5 pr5">{{ updateNum }}</span>
-            {{ t('条') }}
-          </span>
-          <span v-if="showDoc">
-            ，{{ $t('资源文档：') }}
-            <span class="add-info">{{ t('新建') }}<span class="ag-strong success pl5 pr5">1</span>{{ t('条') }}</span>
-            <span class="add-info">{{ t('覆盖') }}<span class="ag-strong danger pl5 pr5">1</span>{{ t('条') }}</span>
-          </span>
-        </div>
-      </div>
-      <bk-table
-        class="table-layout"
-        :data="tableData"
-        show-overflow-tooltip
-        :checked="tableData"
-        @selection-change="handleSelectionChange"
-      >
-        <bk-table-column
-          width="80"
-          type="selection"
-          align="center"
-        />
-        <bk-table-column
-          :label="t('请求路径')"
-          prop="path"
+      <!-- 代码编辑器 -->
+      <div class="monaco-editor" ref="editorWrapRef">
+        <bk-resize-layout
+          ref="resizeLayoutRef"
+          placement="bottom"
+          collapsible
+          immediate
+          style="height: 100%"
         >
-        </bk-table-column>
-        <bk-table-column
-          :label="t('请求方法')"
-          prop="method"
+          <template #main>
+            <div class="editor-layout-main">
+              <!--  顶部编辑器工具栏-->
+              <header class="editor-toolbar">
+                <span class="p10" style="color: #ccc">{{ t('代码编辑器') }}</span>
+                <aside class="tool-items">
+                  <section class="tool-item" :class="{ 'active': isFindPanelVisible }" @click="toggleFindToolClick()">
+                    <search width="18px" height="18px" />
+                  </section>
+                  <section
+                    class="tool-item svg-icon"
+                    :style="{ backgroundImage: `url(${fontIcon})` }"
+                    @click="handleFontSizeClick()"
+                  ></section>
+                  <!--                  <section class="tool-item">-->
+                  <!--                    <upload width="18px" height="18px" />-->
+                  <!--                  </section>-->
+                  <section class="tool-item" @click="handleFullScreenClick">
+                    <filliscreen-line width="18px" height="18px" />
+                  </section>
+                </aside>
+              </header>
+              <main class="editor-main-content" :class="{ 'show-valid-msg': isValidMsgVisible }">
+                <!--  编辑器本体  -->
+                <editor-monaco
+                  v-model="editorText"
+                  ref="resourceEditorRef"
+                  @find-state-changed="(isVisible) => {
+                    isFindPanelVisible = isVisible;
+                  }"
+                />
+                <!--  右侧的代码 error, warning 计数器  -->
+                <aside class="editor-side-bar">
+                  <main class="editor-error-counters">
+                    <div
+                      class="error-count-item" :class="{ 'active': activeCodeMsgType === 'Error' }"
+                      v-bk-tooltips="{ content: `Error: ${msgAsErrorNum}`, placement: 'left' }"
+                      @click="handleErrorCountClick('Error')"
+                    >
+                      <warn fill="#EA3636" />
+                      <span style="color:#EA3636">{{ msgAsErrorNum }}</span>
+                    </div>
+                    <div
+                      class="error-count-item" :class="{ 'active': activeCodeMsgType === 'Warning' }"
+                      v-bk-tooltips="{ content: `Warning: ${msgAsWarningNum}`, placement: 'left' }"
+                      @click="handleErrorCountClick('Warning')"
+                    >
+                      <div class="warning-circle"></div>
+                      <span style="color: hsla(36.6, 81.7%, 55.1%, 0.5);">{{ msgAsWarningNum }}</span>
+                    </div>
+                    <div
+                      class="error-count-item" :class="{ 'active': activeCodeMsgType === 'All' }"
+                      v-bk-tooltips="{ content: `All: ${errorReasons.length}`, placement: 'left' }"
+                      @click="handleErrorCountClick('All')"
+                    >
+                      <span>all</span>
+                      <span>{{ msgAsErrorNum + msgAsWarningNum }}</span>
+                    </div>
+                  </main>
+                  <footer class="editor-error-shifts">
+                    <div class="shift-btn prev" @click="handleErrorShiftClick('prev')">
+                      <collapse-left width="18px" height="18px" fill="#C4C6CC" />
+                    </div>
+                    <div class="shift-btn next" @click="handleErrorShiftClick('next')">
+                      <collapse-left width="18px" height="18px" fill="#C4C6CC" />
+                    </div>
+                  </footer>
+                </aside>
+              </main>
+              <footer class="editor-footer-bar">
+                <article v-if="isValidMsgVisible" class="editor-message">
+                  <success class="success-c" width="14px" height="14px" />
+                  <span class="msg-part msg-body">{{ t('校验通过') }}</span>
+                  <close-line
+                    width="14px" height="14px" fill="#DCDEE5" style="margin-left: auto; cursor: pointer;"
+                    @click="() => { isValidMsgVisible = false }"
+                  ></close-line>
+                </article>
+                <article v-else class="editor-footer-validate-btn">
+                  <bk-button
+                    theme="primary"
+                    size="small"
+                    :loading="isDataLoading"
+                    :disabled="isDataLoading"
+                    @click="handleCheckData({ changeView: false })"
+                  >
+                    <play-shape />
+                    {{ t('语法校验') }}
+                  </bk-button>
+                </article>
+              </footer>
+            </div>
+          </template>
+          <!--  底部错误信息展示  -->
+          <template #aside>
+            <div class="editor-messages-wrapper" :class="{ 'has-error-msg': visibleErrorReasons.length > 0 }">
+              <article
+                v-for="(reason, index) in visibleErrorReasons"
+                :key="index"
+                class="editor-message"
+                :class="{'active': activeVisibleErrorMsgIndex === index }"
+                @click="handleErrorMsgClick(reason, index)"
+              >
+                <span class="msg-part msg-icon"><warn fill="#EA3636" /></span>
+                <span class="msg-part msg-host"></span>
+                <span class="msg-part msg-body">{{ reason.message }}</span>
+                <span class="msg-part msg-error-code">{{ reason.json_path }}</span>
+                <span v-if="reason.position" class="msg-part msgPos">
+                  {{ `(${reason.position.lineNumber}, ${reason.position.column})` }}
+                </span>
+              </article>
+            </div>
+          </template>
+        </bk-resize-layout>
+      </div>
+      <TmplExampleSideslider :is-show="isShowExample" @on-hidden="handleHiddenExample"></TmplExampleSideslider>
+    </div>
+    <!--  导入后视图  -->
+    <div v-else class="imported-resources-wrap">
+      <header class="res-counter-banner">
+        <main>
+          <info-line width="14px" height="14px" fill="#3A84FF" class="mr5" />
+          <span>{{ t('共') }}<span class="ag-strong pl5 pr5">{{ tableData.length }}</span>{{ t('个资源，新增') }}<span
+            class="ag-strong success pl5 pr5"
+          >{{ tableDataToAdd.length }}</span>{{ t('个，更新') }}<span
+            class="ag-strong warning pl5 pr5"
+          >{{ tableDataToUpdate.length }}</span>{{ t('个，取消导入') }}<span class="ag-strong danger pl5 pr5">{{
+              tableDataUnchecked.length
+            }}</span>{{ t('个') }}</span>
+        </main>
+        <aside>
+          <bk-button
+            text
+            theme="primary"
+            @click="handleRecoverAllRes()"
+          >
+            <left-turn-line fill="#3A84FF" />
+            {{ t('恢复取消导入的资源') }}
+          </bk-button>
+        </aside>
+      </header>
+      <!--  新增的资源  -->
+      <section class="res-content-wrap add">
+        <bk-collapse
+          v-model="activeIndexAdd"
+          :list="collapsePanelListAdd"
+          header-icon="right-shape"
         >
-        </bk-table-column>
-        <bk-table-column
-          :label="t('描述')"
-          prop="description"
+          <template #title>
+            <div class="collapse-panel-title">
+              <span>{{ t('新增的资源（共{num}个）', { num: tableDataToAdd.length }) }}</span>
+              <bk-input
+                clearable
+                :placeholder="t('请输入资源名称/路径，按Enter搜索')"
+                :right-icon="'bk-icon icon-search'"
+                style="width: 240px;"
+                @click.stop.prevent
+                @enter="(val: string) => {filterData(val, 'add')}"
+              />
+            </div>
+          </template>
+          <template #content>
+            <div class="collapse-panel-table-wrap">
+              <bk-table
+                class="table-layout"
+                :data="tableDataToAdd"
+                row-key="name"
+                show-overflow-tooltip
+              >
+                <bk-table-column
+                  :label="t('资源名称')"
+                  prop="name"
+                >
+                </bk-table-column>
+                <!--  认证方式列  -->
+                <bk-table-column
+                  :label="() => renderAuthConfigColLabel('add')"
+                >
+                  <template #default="{ row }">
+                    {{ getAuthConfigText(row?.auth_config) }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('校验应用权限')"
+                >
+                  <template #default="{ row }">
+                    <span
+                      :class="{ 'warning-c': getPermRequiredText(row?.auth_config) === '是' }"
+                    >{{ getPermRequiredText(row?.auth_config) }}</span>
+                  </template>
+                </bk-table-column>
+                <!--  “是否公开”列  -->
+                <bk-table-column
+                  :label="() => renderIsPublicColLabel('add')"
+                >
+                  <template #default="{ row }">
+                    <span :class="{ 'warning-c': getPublicSettingText(row.is_public) === '是' }">
+                      {{ getPublicSettingText(row.is_public) }}
+                    </span>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('允许申请权限')"
+                >
+                  <template #default="{ row }">
+                    <span :class="{ 'warning-c': getAllowApplyPermissionText(row.allow_apply_permission) === '是' }">
+                      {{ getAllowApplyPermissionText(row.allow_apply_permission) }}
+                    </span>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('前端请求路径')"
+                  prop="path"
+                >
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('前端请求方法')"
+                  prop="method"
+                  :show-overflow-tooltip="false"
+                >
+                  <template #default="{ row }">
+                    <bk-tag :theme="methodsEnum[row?.method]">{{ row?.method }}</bk-tag>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('后端服务')"
+                  prop="method"
+                >
+                  <template #default="{ row }">
+                    {{ row.backend?.name ?? 'default' }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('后端请求方法')"
+                  prop="method"
+                  :show-overflow-tooltip="false"
+                >
+                  <template #default="{ row }">
+                    <bk-tag
+                      :theme="methodsEnum[row.backend?.method ?? row.method]"
+                    >
+                      {{ row.backend?.method ?? row.method }}
+                    </bk-tag>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('后端请求路径')"
+                  prop="path"
+                >
+                  <template #default="{ row }">
+                    {{ row.backend?.path ?? row.path }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('资源文档')"
+                  prop="doc"
+                >
+                  <template #default="{ row }">
+                    <bk-button
+                      text
+                      theme="primary"
+                      @click="handleShowResourceDoc(row)"
+                    >
+                      <doc-fill fill="#3A84FF" />
+                      {{ t('详情') }}
+                    </bk-button>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('插件数量')"
+                  prop="plugin_configs"
+                >
+                  <template #default="{ row }">
+                    <span
+                      v-bk-tooltips="{ content: `${row.plugin_configs?.map((c: any)=>c.name).join('，') || '无插件'}` }"
+                    >
+                      {{ row.plugin_configs?.length ?? 0 }}
+                    </span>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('操作')"
+                  width="200"
+                  fixed="right"
+                  prop="act"
+                >
+                  <template #default="{ row }">
+                    <bk-button
+                      text
+                      theme="primary"
+                      @click="handleEdit(row)"
+                    >
+                      {{ t('修改配置') }}
+                    </bk-button>
+                    <bk-button
+                      text
+                      theme="primary"
+                      class="pl10 pr10"
+                      @click="() => {
+                        toggleRowUnchecked(row)
+                      }"
+                    >
+                      {{ t('不导入') }}
+                    </bk-button>
+                  </template>
+                </bk-table-column>
+              </bk-table>
+            </div>
+          </template>
+        </bk-collapse>
+      </section>
+      <!--  更新的资源  -->
+      <section class="res-content-wrap update">
+        <bk-collapse
+          v-model="activeIndexUpdate"
+          :list="collapsePanelListUpdate"
+          header-icon="right-shape"
         >
-        </bk-table-column>
-        <bk-table-column
-          :label="t('资源操作类型')"
-          prop="path"
+          <template #title>
+            <div class="collapse-panel-title">
+              <span>{{ t('更新的资源（共{num}个）', { num: tableDataToUpdate.length }) }}</span>
+              <bk-input
+                clearable
+                :placeholder="t('请输入资源名称/路径，按Enter搜索')"
+                :right-icon="'bk-icon icon-search'"
+                style="width: 240px;"
+                @click.stop.prevent
+                @enter="(val: string) => {filterData(val, 'update')}"
+              />
+            </div>
+          </template>
+          <template #content>
+            <div class="collapse-panel-table-wrap">
+              <section class="pb10">
+                <bk-switcher
+                  v-model="showDoc"
+                  theme="primary"
+                  size="small"
+                />
+                {{ t('生成新文档：原有的文档将会覆盖更新') }}
+              </section>
+              <bk-table
+                class="table-layout"
+                :data="tableDataToUpdate"
+                show-overflow-tooltip
+                row-key="name"
+                :checked="tableData"
+              >
+                <bk-table-column
+                  :label="t('资源名称')"
+                  prop="name"
+                >
+                </bk-table-column>
+                <!--  认证方式列  -->
+                <bk-table-column
+                  :label="() => renderAuthConfigColLabel('update')"
+                >
+                  <template #default="{ row }">
+                    {{ getAuthConfigText(row?.auth_config) }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('校验应用权限')"
+                >
+                  <template #default="{ row }">
+                    <span
+                      :class="{ 'warning-c': getPermRequiredText(row?.auth_config) === '是' }"
+                    >{{ getPermRequiredText(row?.auth_config) }}</span>
+                  </template>
+                </bk-table-column>
+                <!--  “是否公开”列  -->
+                <bk-table-column
+                  :label="() => renderIsPublicColLabel('update')"
+                >
+                  <template #default="{ row }">
+                    <span :class="{ 'warning-c': getPublicSettingText(row.is_public) === '是' }">
+                      {{ getPublicSettingText(row.is_public) }}
+                    </span>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('允许申请权限')"
+                >
+                  <template #default="{ row }">
+                    <span :class="{ 'warning-c': getAllowApplyPermissionText(row.allow_apply_permission) === '是' }">
+                      {{ getAllowApplyPermissionText(row.allow_apply_permission) }}
+                    </span>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('前端请求路径')"
+                  prop="path"
+                >
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('前端请求方法')"
+                  prop="method"
+                  :show-overflow-tooltip="false"
+                >
+                  <template #default="{ row }">
+                    <bk-tag :theme="methodsEnum[row?.method]">{{ row?.method }}</bk-tag>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('后端服务')"
+                  prop="method"
+                >
+                  <template #default="{ row }">
+                    {{ row.backend?.name ?? 'default' }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('后端请求方法')"
+                  prop="method"
+                  :show-overflow-tooltip="false"
+                >
+                  <template #default="{ row }">
+                    <bk-tag
+                      :theme="methodsEnum[row.backend?.method ?? row.method]"
+                    >
+                      {{ row.backend?.method ?? row.method }}
+                    </bk-tag>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('后端请求路径')"
+                  prop="path"
+                >
+                  <template #default="{ row }">
+                    {{ row.backend?.path ?? row.path }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('资源文档')"
+                  prop="doc"
+                >
+                  <template #default="{ row }">
+                    <bk-button
+                      text
+                      theme="primary"
+                      @click="handleShowResourceDoc(row)"
+                    >
+                      <doc-fill fill="#3A84FF" />
+                      {{ t('详情') }}
+                    </bk-button>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('插件数量')"
+                  prop="plugin_configs"
+                >
+                  <template #default="{ row }">
+                    <span
+                      v-bk-tooltips="{ content: `${row.plugin_configs?.map((c: any)=>c.name).join('，') || '无插件'}` }"
+                    >
+                      {{ row.plugin_configs?.length ?? 0 }}
+                    </span>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('操作')"
+                  width="200"
+                  fixed="right"
+                  prop="act"
+                >
+                  <template #default="{ row }">
+                    <bk-button
+                      text
+                      theme="primary"
+                      @click="handleEdit(row)"
+                    >
+                      {{ t('修改配置') }}
+                    </bk-button>
+                    <bk-button
+                      text
+                      theme="primary"
+                      class="pl10 pr10"
+                      @click="() => {
+                        toggleRowUnchecked(row)
+                      }"
+                    >
+                      {{ t('不导入') }}
+                    </bk-button>
+                  </template>
+                </bk-table-column>
+              </bk-table>
+            </div>
+          </template>
+        </bk-collapse>
+      </section>
+      <!--  不导入的资源  -->
+      <section class="res-content-wrap unchecked">
+        <bk-collapse
+          v-model="activeIndexUnchecked"
+          :list="collapsePanelListUnchecked"
+          header-icon="right-shape"
         >
-          <template #default="{ data }">
-            <span class="danger-c" v-if="data?.id">{{ t('覆盖') }}</span>
-            <span class="success-c" v-else>{{ t('新建') }}</span>
+          <template #title>
+            <div class="collapse-panel-title">
+              <span>{{ t('不导入的资源（共{num}个）', { num: tableDataUnchecked.length }) }}</span>
+              <!--              <bk-input-->
+              <!--                :clearable="true"-->
+              <!--                :placeholder="t('请输入资源名称，按Enter搜索')"-->
+              <!--                :right-icon="'bk-icon icon-search'"-->
+              <!--                style="width: 240px;"-->
+              <!--                @click.stop.prevent-->
+              <!--              />-->
+            </div>
+          </template>
+          <template #content>
+            <div class="collapse-panel-table-wrap">
+              <bk-table
+                class="table-layout"
+                :data="tableDataUnchecked"
+                show-overflow-tooltip
+                row-key="name"
+              >
+                <bk-table-column
+                  :label="t('资源名称')"
+                  prop="name"
+                >
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('认证方式')"
+                >
+                  <template #default="{ row }">
+                    {{ getAuthConfigText(row?.auth_config) }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('校验应用权限')"
+                >
+                  <template #default="{ row }">
+                    <span
+                      :class="{ 'warning-c': getPermRequiredText(row?.auth_config) === '是' }"
+                    >{{ getPermRequiredText(row?.auth_config) }}</span>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('是否公开')"
+                >
+                  <template #default="{ row }">
+                    <span :class="{ 'warning-c': getPublicSettingText(row.is_public) === '是' }">
+                      {{ getPublicSettingText(row.is_public) }}
+                    </span>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('允许申请权限')"
+                >
+                  <template #default="{ row }">
+                    <span :class="{ 'warning-c': getAllowApplyPermissionText(row.allow_apply_permission) === '是' }">
+                      {{ getAllowApplyPermissionText(row.allow_apply_permission) }}
+                    </span>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('前端请求路径')"
+                  prop="path"
+                >
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('前端请求方法')"
+                  prop="method"
+                  :show-overflow-tooltip="false"
+                >
+                  <template #default="{ row }">
+                    <bk-tag :theme="methodsEnum[row?.method]">{{ row?.method }}</bk-tag>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('后端服务')"
+                  prop="method"
+                >
+                  <template #default="{ row }">
+                    {{ row.backend?.name ?? 'default' }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('后端请求方法')"
+                  prop="method"
+                  :show-overflow-tooltip="false"
+                >
+                  <template #default="{ row }">
+                    <bk-tag
+                      :theme="methodsEnum[row.backend?.method ?? row.method]"
+                    >
+                      {{ row.backend?.method ?? row.method }}
+                    </bk-tag>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('后端请求路径')"
+                  prop="path"
+                >
+                  <template #default="{ row }">
+                    {{ row.backend?.path ?? row.path }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('资源文档')"
+                  prop="doc"
+                >
+                  <template #default="{ row }">
+                    <bk-button
+                      text
+                      theme="primary"
+                      @click="handleShowResourceDoc(row)"
+                    >
+                      <doc-fill fill="#3A84FF" />
+                      {{ t('详情') }}
+                    </bk-button>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('插件数量')"
+                  prop="plugin_configs"
+                >
+                  <template #default="{ row }">
+                    <span
+                      v-bk-tooltips="{ content: `${row.plugin_configs?.map((c: any)=>c.name).join('，') || '无插件'}` }"
+                    >
+                      {{ row.plugin_configs?.length ?? 0 }}
+                    </span>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="t('操作')"
+                  width="200"
+                  fixed="right"
+                  prop="act"
+                >
+                  <template #default="{ row }">
+                    <bk-button
+                      text
+                      theme="primary"
+                      class="pl10 pr10"
+                      @click="() => {
+                        toggleRowUnchecked(row)
+                      }"
+                    >
+                      {{ t('恢复导入') }}
+                    </bk-button>
+                  </template>
+                </bk-table-column>
+              </bk-table>
+            </div>
           </template>
-        </bk-table-column>
-      </bk-table>
-    </section>
-
-    <div class="mt15">
-      <bk-button
-        :theme="curView === 'import' ? 'primary' : ''"
-        @click="handleCheckData"
-        :loading="isDataLoading"
-      >
-        {{ curView === 'import' ? t('下一步') : t('上一步') }}
-      </bk-button>
-      <span v-bk-tooltips="{ content: t('请确认勾选资源'), disabled: selections.length }" v-if="curView === 'resources'">
+        </bk-collapse>
+      </section>
+    </div>
+    <footer class="page-actions-wrap">
+      <main class="page-actions">
+        <bk-button
+          :theme="curView === 'import' ? 'primary' : ''"
+          @click="handleCheckData"
+          :loading="isDataLoading"
+          :disabled="curView === 'import' && !isCodeValid"
+        >
+          {{ curView === 'import' ? t('下一步') : t('上一步') }}
+        </bk-button>
+        <span
+          v-bk-tooltips="{ content: t('请确认导入的资源'), disabled: (tableDataToAdd.length < 1) && (tableDataToUpdate.length < 1)}"
+          v-if="curView === 'resources'"
+        >
+          <bk-button
+            class="mr10"
+            theme="primary"
+            type="button"
+            :disabled="(tableDataToAdd.length < 1) && (tableDataToUpdate.length < 1)"
+            :loading="isImportLoading"
+            @click="showImportConfirmDialog"
+          >
+            {{ $t('确定导入') }}
+          </bk-button>
+        </span>
+        <bk-button @click="goBack">
+          {{ t('取消') }}
+        </bk-button>
+      </main>
+    </footer>
+    <!--  编辑资源侧栏  -->
+    <edit-import-resource-side-slider
+      :resource="editingResource"
+      :isSliderShow="isSliderShow"
+      @on-hidden="handleEditSliderHidden"
+      @submit="handleEditSubmit"
+    ></edit-import-resource-side-slider>
+    <!--  导入确认弹窗  -->
+    <bk-dialog
+      width="480"
+      :mask-close="true"
+      :is-show="isImportConfirmDialogVisible"
+      :title="t('确认导入资源？')"
+    >
+      <template #default>
+        <div class="import-confirm-dialog-content-wrap">
+          <header class="mb10">{{ t('网关：') }}{{ common.apigwName }}</header>
+          <main class="content-main">
+            {{ t('将新增') }}
+            <span class="ag-strong success-c">{{ tableDataToAdd.length }}</span>
+            {{ t('条资源，更新覆盖') }}
+            <span class="ag-strong warning-c">{{ tableDataToUpdate.length }}</span>
+            {{ t('条资源') }}
+          </main>
+        </div>
+      </template>
+      <template #footer>
         <bk-button
-          class="mr10"
           theme="primary"
-          type="button"
-          :disabled="!selections.length"
-          @click="handleImportResource" :loading="isImportLoading">
-          {{ $t('确定导入') }}
+          @click="handleImportResource"
+        >
+          {{ t('确定') }}
         </bk-button>
-      </span>
-      <bk-button @click="goBack">
-        {{ t('取消') }}
-      </bk-button>
-    </div>
-
-    <TmplExampleSideslider :is-show="isShowExample" @on-hidden="handleHiddenExample"></TmplExampleSideslider>
+        <bk-button @click="isImportConfirmDialogVisible = false"> {{ t('取消') }}</bk-button>
+      </template>
+    </bk-dialog>
+    <!-- 文档侧边栏 -->
+    <bk-sideslider
+      v-model:isShow="isResourceDocSliderVisible"
+      quick-close
+      :title="editingResource.name"
+      width="780"
+      ext-cls="doc-sideslider-cls doc-sides"
+    >
+      <template #default>
+        <ResourcesDoc
+          :cur-resource="editingResource"
+          source="side"
+          doc-root-class="doc-sideslider"
+        >
+        </ResourcesDoc>
+      </template>
+    </bk-sideslider>
   </div>
 </template>
-<script setup lang="ts">
-import { ref, nextTick, computed } from 'vue';
+<script setup lang="tsx">
+import {
+  ref,
+  nextTick,
+  computed,
+  watch, onMounted,
+} from 'vue';
 import { Message } from 'bkui-vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+// 此方法创建的 router 实例为 undefined，改用 import router from 'router/index.ts'
+// import { useRouter } from 'vue-router';
+// const router = useRouter();
+import router from '@/router';
 
 import editorMonaco from '@/components/ag-editor.vue';
 import exampleData from '@/constant/example-data';
 import { getStrFromFile } from '@/common/util';
 import { checkResourceImport, importResource, importResourceDocSwagger } from '@/http';
 import { useCommon } from '@/store';
-import { useSelection, useGetGlobalProperties } from '@/hooks';
+import { useGetGlobalProperties } from '@/hooks';
 import TmplExampleSideslider from '@/views/resource/setting/comps/tmpl-example-sideslider.vue';
+import {
+  Warn,
+  Search,
+  Share,
+  InfoLine,
+  DocFill,
+  LeftTurnLine,
+  PlayShape,
+  Success,
+  CloseLine,
+  CollapseLeft,
+  FilliscreenLine,
+  // Upload,
+} from 'bkui-vue/lib/icon';
+import yaml from 'js-yaml';
+import { JSONPath } from 'jsonpath-plus';
+import _ from 'lodash';
+
+import type { IPosition } from 'monaco-editor';
+import type { ErrorReasonType, CodeErrorMsgType } from '@/types/common';
+import { ResizeLayout } from 'bkui-vue';
+import { MethodsEnum } from '@/types';
+import EditImportResourceSideSlider from "@/views/resource/setting/comps/edit-import-resource-side-slider.vue";
+import ResourcesDoc from "@/views/components/resources-doc/index.vue";
+
+import fontIcon from '@/images/font.svg';
+
+type CodeErrorResponse = {
+  code: string,
+  data: { json_path: string, message: string }[],
+  details: any[],
+  message: string,
+};
 
-const router = useRouter();
 const { t } = useI18n();
 const common = useCommon();
 const editorText = ref<string>(exampleData.content);
 const { apigwId } = common; // 网关id
 const resourceEditorRef: any = ref<InstanceType<typeof editorMonaco>>(); // 实例化
-const showDoc = ref<boolean>(false);
+const showDoc = ref<boolean>(true);
 const language = ref<string>('zh');
 const isDataLoading = ref<boolean>(false);
+const isCodeValid = ref<boolean>(false);
 const isImportLoading = ref<boolean>(false);
 const curView = ref<string>('import'); // 当前页面
 const tableData = ref<any[]>([]);
 const globalProperties = useGetGlobalProperties();
+const methodsEnum: any = Object.freeze(MethodsEnum);
 const { GLOBAL_CONFIG } = globalProperties;
 
-// 资源新建条数
-const createNum = computed(() => {
-  const results = deDuplication(selections.value.filter(item => !item.id), 'name');
-  return results.length;
+// 选中的代码错误提示 Tab，默认展示 all 即全部类型的错误提示
+const activeCodeMsgType = ref<CodeErrorMsgType>('All');
+// 记录代码错误消息
+const errorReasons = ref<ErrorReasonType[]>([]);
+const isFindPanelVisible = ref(false);
+
+const activeIndexAdd = ref(0);
+const collapsePanelListAdd = ref([{ name: '新增资源' }]);
+
+const activeIndexUpdate = ref(0);
+const collapsePanelListUpdate = ref([{ name: '更新资源' }]);
+
+const activeIndexUnchecked = ref(0);
+const collapsePanelListUnchecked = ref([{ name: '不导入资源' }]);
+
+const isImportConfirmDialogVisible = ref(false);
+const isResourceDocSliderVisible = ref(false);
+const isValidMsgVisible = ref(false);
+
+const editingResource = ref<any>({
+  name: '',
+  description: '',
+  label_ids: [],
+  labels: [],
+  auth_config: {
+    auth_verified_required: true,
+    app_verified_required: true,
+    resource_perm_required: true,
+  },
+  is_public: true,
+  allow_apply_permission: true,
 });
+const isSliderShow = ref(false);
+
+// 编辑器所在的 resize-layout
+const resizeLayoutRef = ref<InstanceType<typeof ResizeLayout> | null>(null);
 
-// 资源覆盖条数
-const updateNum = computed(() => {
-  const results = deDuplication(selections.value.filter(item => item.id), 'name');
-  return results.length;
+// 展示在“新增的资源”一栏的资源
+const tableDataToAdd = computed(() => {
+  return tableData.value.filter(data => {
+    return !data.id &&
+      !data._unchecked
+      && (data.name.includes(filterInputAdd.value) || data.path.includes(filterInputAdd.value))
+  });
+});
+
+// 展示在“更新的资源”一栏的资源
+const tableDataToUpdate = computed(() => {
+  return tableData.value.filter(data => {
+    return data.id &&
+      !data._unchecked
+      && (data.name.includes(filterInputUpdate.value) || data.path.includes(filterInputUpdate.value))
+  });
+});
+// 被取消导入的资源
+const tableDataUnchecked = computed(() => {
+  return tableData.value.filter(data => data._unchecked);
+});
+
+// 可视的错误消息，实际要渲染到编辑器视图的数据
+const visibleErrorReasons = computed(() => {
+  if (activeCodeMsgType.value === 'All') return errorReasons.value;
+
+  if (activeCodeMsgType.value === 'Error') {
+    return errorReasons.value.filter(r => r.level === 'Error');
+  }
+
+  if (activeCodeMsgType.value === 'Warning') {
+    return errorReasons.value.filter(r => r.level === 'Warning');
+  }
+  return [];
+});
+
+const msgAsErrorNum = computed(() => {
+  return errorReasons.value.filter(r => r.level === 'Error').length;
+});
+
+const msgAsWarningNum = computed(() => {
+  return errorReasons.value.filter(r => r.level === 'Warning').length;
 });
 
-// checkbox hooks
-const {
-  selections,
-  handleSelectionChange,
-} = useSelection();
+// 代码有变化时重置校验状态
+watch(editorText, () => {
+  isCodeValid.value = false;
+  isValidMsgVisible.value = false;
+  activeVisibleErrorMsgIndex.value = -1;
+});
+
+// 进入页面默认折叠编辑器错误消息栏
+onMounted(() => {
+  resizeLayoutRef.value.setCollapse(true);
+});
 
 // 设置editor的内容
 const setEditValue = () => {
@@ -196,13 +975,19 @@ const handleReq = (res: any) => {
     return;
   }
   // 读取文件内容并赋值给编辑器
-  getStrFromFile(file).then((res: any) => {
-    editorText.value = res;
-    setEditValue();
-  });
+  getStrFromFile(file)
+    .then((res: any) => {
+      editorText.value = res;
+      setEditValue();
+    })
+    .then(() => {
+      handleCheckData({ changeView: false });
+    });
 };
+
 // 下一步需要检查数据
-const handleCheckData = async () => {
+const handleCheckData = async ({ changeView }: { changeView: boolean }) => {
+  let _changeView = changeView ?? true;
   // 上一步按钮功能
   if (curView.value === 'resources') {
     curView.value = 'import';
@@ -216,47 +1001,129 @@ const handleCheckData = async () => {
   }
   try {
     isDataLoading.value = true;
-    const parmas: any = {
+    const params: any = {
       content: editorText.value,
       allow_overwrite: true,
     };
     // 如果勾选了资源文档
     if (showDoc.value) {
-      parmas.doc_language = language.value;
+      params.doc_language = language.value;
     }
-    const res = await checkResourceImport(apigwId, parmas);
-    tableData.value = res;
-    curView.value = 'resources';
-    nextTick(() => {
-      selections.value = JSON.parse(JSON.stringify(tableData.value));
-    });
-    // resetSelections();
-  } catch (error) {
-
+    const res = await checkResourceImport(apigwId, params);
+    tableData.value = res.map((data: any) => ({
+      ...data,
+      _unchecked: false, // 标记是否不导入
+    }));
+    isCodeValid.value = true;
+    isValidMsgVisible.value = true;
+    // 清空编辑器高亮样式
+    resourceEditorRef?.value?.clearDecorations();
+    errorReasons.value = [];
+    // 折叠错误消息栏
+    // await nextTick(() => {
+    //   resizeLayoutRef.value.setCollapse(true);
+    // });
+    // 判断是否跳转，默认为是
+    if (_changeView) {
+      curView.value = 'resources';
+    }
+  } catch (err: unknown) {  // 校验失败会走到这里
+    // console.log(error);
+    isCodeValid.value = false;
+    const error = err as CodeErrorResponse;
+    // 如果是内容错误
+    if (error?.code === 'INVALID' && error?.message === 'validate fail') {
+      const editorJsonObj = yaml.load(editorText.value) as object;
+      const errData: { json_path: string, message: string }[] = error.data ?? [];
+      errorReasons.value = errData.map((err) => {
+        // 从 jsonpath 提取路径组成数组，去掉开头的 $
+        const paths = JSONPath.toPathArray(err.json_path)
+          .slice(1);
+        // 找到 jsonpath 指向的值
+        const pathValue = JSONPath(err.json_path, editorJsonObj, null, null)[0] ?? [];
+        // 提取后端错误消息中第一个用引号包起来的字符串，它常常就是代码错误所在
+        const quotedValue = getFirstQuotedValue(err.message);
+        const stringToFind = '';
+        // jsonpath 指向的键名
+        const lastPath = paths[paths.length - 1];
+        // 记录正则匹配到的起始位置，从 0 开始，没有匹配项时为 -1
+        let offset = -1;
+        // 用于搜索的正则
+        let regex: RegExp | null = null;
+        // 匹配项在 editor 中的 Position
+        let position: IPosition | null = null;
+        // 生成用于搜索 jsonpath 所在行的正则
+        // 判断 jsonpath 指向的是否为数组成员，是的话不传入 key
+        if (Number.isInteger(Number.parseInt(lastPath, 10))) {
+          regex = getRegexFromObj({ objValue: pathValue });
+        } else {
+          regex = getRegexFromObj({ objKey: lastPath, objValue: pathValue });
+        }
+        offset = resourceEditorRef.value.getValue()
+          .search(regex);
+        // 用 editor 的 api 找到 Position
+        if (offset > -1) {
+          position = resourceEditorRef.value.getModel()
+            .getPositionAt(offset);
+        }
+        return {
+          paths,
+          quotedValue,
+          pathValue,
+          stringToFind,
+          offset,
+          regex,
+          position,
+          json_path: err.json_path,
+          message: err.message,
+          isDecorated: false,
+          level: 'Error',
+        };
+      });
+      // console.log('errorReasons:');
+      // console.log(errorReasons.value);
+      // 更新编辑器高亮样式
+      updateEditorDecorations();
+      // 展开错误消息栏
+      // resizeLayoutRef.value.setCollapse(false);
+    }
+    // }
   } finally {
     isDataLoading.value = false;
+    activeVisibleErrorMsgIndex.value = -1;
   }
 };
 
+// 唤出确认导入Dialog
+const showImportConfirmDialog = () => {
+  isImportConfirmDialogVisible.value = true
+};
+
 // 确认导入
 const handleImportResource = async () => {
+  isImportConfirmDialogVisible.value = false;
   try {
     isImportLoading.value = true;
-    const parmas = {
+    const selected_resources = tableData.value.filter((e: any) => e._unchecked === false)
+      .map((e: any) => {
+        const { _unchecked, ...restOfResource } = e;  // 去掉_unchecked属性，不要发到后端
+        return restOfResource;
+      });
+    const params = {
+      selected_resources,
       content: editorText.value,
-      selected_resources: selections.value,
     };
-    await importResource(apigwId, parmas);
+    await importResource(apigwId, params);
     // 勾选了文档才需要上传swagger文档
     if (showDoc.value) {
       // swagger需要的参数
-      const resourceDocs = selections.value.map((e: any) => ({
+      const selected_resource_docs = selected_resources.map((e: any) => ({
         language: e.doc.language,
         resource_name: e.name,
       }));
       const paramsDocs = {
+        selected_resource_docs,
         swagger: editorText.value,
-        selected_resource_docs: resourceDocs,
         language: language.value,
       };
       await importResourceDocSwagger(apigwId, paramsDocs);
@@ -273,17 +1140,6 @@ const handleImportResource = async () => {
   }
 };
 
-
-const deDuplication = (data: any[], k: string) => {
-  const map = new Map();
-  for (const item of data) {
-    if (!map.has(item[k])) {
-      map.set(item[k], item);
-    }
-  }
-  return [...map.values()];
-};
-
 // 取消返回到资源列表
 const goBack = () => {
   router.push({
@@ -299,27 +1155,746 @@ const handleShowExample = () => {
 const handleHiddenExample = () => {
   isShowExample.value = false;
 };
+
+const handleEditSliderHidden = () => {
+  isSliderShow.value = false;
+};
+
+// 确认修改配置后
+const handleEditSubmit = (newResource: any) => {
+  let pos = tableData.value.findIndex(data => data.name === newResource.name);
+  if (pos > -1) tableData.value[pos] = { ...tableData.value[pos], ...newResource };
+  // console.log('pos');
+  // console.log(pos);
+  // console.log('tableData.value:');
+  // console.log(tableData.value);
+};
+
+// 点击修改配置时，会唤出 SideSlider
+const handleEdit = (resourceRow: any) => {
+  const _editingResource = tableData.value.find(data => data.name === resourceRow.name);
+  if (_editingResource) editingResource.value = { ...editingResource.value, ..._editingResource };
+  isSliderShow.value = true;
+};
+
+// 点击查看文档时，会唤出 SideSlider
+const handleShowResourceDoc = (resourceRow: any) => {
+  const _editingResource = tableData.value.find(data => data.name === resourceRow.name);
+  if (_editingResource) editingResource.value = { ...editingResource.value, ..._editingResource };
+  isResourceDocSliderVisible.value = true;
+};
+
+// 触发编辑器高亮
+const updateEditorDecorations = () => {
+  resourceEditorRef.value.clearDecorations();
+  resourceEditorRef.value.genLineDecorations(visibleErrorReasons.value.map(r => ({
+    position: r.position,
+    level: r.level,
+  })));
+  resourceEditorRef.value.setDecorations();
+};
+
+// 处理代码错误消息点击事件，应跳转到编辑器对应行
+const handleErrorMsgClick = (reason: ErrorReasonType, index: number) => {
+  resourceEditorRef.value.setCursorPos(reason.position);
+  activeVisibleErrorMsgIndex.value = index;
+};
+
+const activeVisibleErrorMsgIndex = ref(-1);
+const handleErrorShiftClick = (action: 'prev' | 'next') => {
+  const index = action === 'prev'
+    ? activeVisibleErrorMsgIndex.value - 1
+    : activeVisibleErrorMsgIndex.value + 1;
+
+  const reason = visibleErrorReasons.value[index];
+
+  if (reason) {
+    resourceEditorRef.value.setCursorPos(reason.position);
+    activeVisibleErrorMsgIndex.value = index;
+  }
+};
+
+// 从把 jsonpath 指向的对象转换成正则
+const getRegexFromObj = ({ objKey, objValue }: { objKey?: string, objValue: any }): RegExp => {
+  let exp = '';
+  if (objKey) {
+    exp = `\\b${objKey}\\b:[\\s\\S\\n\\r]*?`;
+  }
+  if (_.isObject(objValue)) {
+    Object.entries(objValue)
+      .forEach((e) => {
+        exp += `\\b${e[0]}\\b[\\s\\S\\n\\r]*?`;
+        if (!_.isObject(e[1])) {
+          exp += `${e[1]}[\\s\\S\\n\\r]*?`;
+        }
+      });
+  } else {
+    exp += `\\b${objValue}[\\s\\S\\n\\r]*?`
+  }
+  return new RegExp(exp, 'gm');
+};
+
+// 获取字符串中第一个被 '' 包裹的值
+const getFirstQuotedValue = (str: string) => {
+  const match = str.match(/'([^']*)'/);
+  return match ? match[1] : null;
+};
+
+// 处理右侧错误类型计数器点击事件
+const handleErrorCountClick = (type: CodeErrorMsgType) => {
+  activeCodeMsgType.value = type;
+  activeVisibleErrorMsgIndex.value = -1;
+  updateEditorDecorations();
+};
+
+// 切换搜索面板
+const toggleFindToolClick = () => {
+  if (isFindPanelVisible.value) {
+    resourceEditorRef.value.closeFindPanel();
+  } else {
+    resourceEditorRef.value.showFindPanel();
+  }
+};
+
+// 切换字号
+const handleFontSizeClick = () => {
+  resourceEditorRef.value.switchFontSize();
+};
+
+const getAuthConfigText = (authConfig: string | object | null | undefined) => {
+  if (!authConfig) return '--';
+  let auth;
+
+  if (typeof authConfig === 'string') {
+    auth = JSON.parse(authConfig);
+  } else {
+    auth = authConfig;
+  }
+  const tmpArr: string[] = [];
+
+  if (auth?.app_verified_required) {
+    tmpArr.push(`${t('蓝鲸应用认证')}`);
+  }
+  if (auth?.auth_verified_required) {
+    tmpArr.push(`${t('用户认证')}`);
+  }
+  return tmpArr.join(', ') || '--';
+};
+
+const getPermRequiredText = (authConfig: string | object | null | undefined) => {
+  if (!authConfig) return '--';
+  let auth;
+
+  if (typeof authConfig === 'string') {
+    auth = JSON.parse(authConfig);
+  } else {
+    auth = authConfig;
+  }
+  if (auth?.resource_perm_required) {
+    return `${t('是')}`;
+  }
+  return `${t('否')}`;
+};
+
+const getPublicSettingText = (is_public: boolean | null | undefined) => {
+  return is_public ? t('是') : is_public === false ? t('否') : t('是');
+};
+
+const getAllowApplyPermissionText = (allow_apply_permission: boolean | null | undefined) => {
+  return allow_apply_permission ? t('是') : allow_apply_permission === false ? t('否') : t('是');
+};
+
+// 切换资源是否导入
+const toggleRowUnchecked = (row: any) => {
+  const data = tableData.value.find(d => d.name === row.name);
+  if (data) data._unchecked = !data._unchecked;
+};
+
+// 还原所有不导入的资源
+const handleRecoverAllRes = () => {
+  tableData.value.forEach(d => d._unchecked = false);
+};
+
+const tempAuthConfig = ref({
+  app_verified_required: false,
+  auth_verified_required: false,
+  resource_perm_required: false,
+});
+
+// 批量修改认证方式确认后
+const handleConfirmAuthConfigPopConfirm = (action: 'add' | 'update') => {
+  if (tempAuthConfig.value.app_verified_required === false) tempAuthConfig.value.resource_perm_required = false;
+  tableData.value.filter(item => !item._unchecked)
+    .forEach(data => {
+      if ((action === 'add' && !data.id) || (action === 'update' && data.id)) {
+        data.auth_config = {
+          ...tempAuthConfig.value,
+        }
+      }
+    });
+};
+
+// 批量修改认证方式取消后
+const handleCancelAuthConfigPopConfirm = () => {
+  tempAuthConfig.value = {
+    app_verified_required: false,
+    auth_verified_required: false,
+    resource_perm_required: false,
+  }
+}
+
+// 认证方式列 TSX
+const renderAuthConfigColLabel = (action: 'add' | 'update') => {
+  return (
+    <div>
+      <div class="auth-config-col-label">
+        <span>{t('认证方式')}</span>
+        <bk-pop-confirm
+          width="430"
+          trigger="click"
+          title={t('批量修改认证方式')}
+          content={
+            <div class="multi-edit-popconfirm-wrap auth-config">
+              <bk-form model={tempAuthConfig.value} labelWidth="120" labelPosition="right">
+                <bk-form-item label={t('认证方式')} required={true}>
+                  <bk-checkbox
+                    v-model={tempAuthConfig.value.app_verified_required}
+                  >
+                    <span class="bottom-line" v-bk-tooltips={{ content: t('请求方需提供蓝鲸应用身份信息') }}>
+                      {t('蓝鲸应用认证')}
+                    </span>
+                  </bk-checkbox>
+                  <bk-checkbox class="ml40" v-model={tempAuthConfig.value.auth_verified_required}>
+                    <span class="bottom-line" v-bk-tooltips={{ content: t('请求方需提供蓝鲸用户身份信息') }}>
+                      {t('用户认证')}
+                    </span>
+                  </bk-checkbox>
+                </bk-form-item>
+                {tempAuthConfig.value.app_verified_required ?
+                  <bk-form-item label={t('检验应用权限')}>
+                    <bk-switcher
+                      v-model={tempAuthConfig.value.resource_perm_required}
+                      theme="primary"
+                      size="small"
+                    />
+                  </bk-form-item> : ''
+                }
+              </bk-form>
+            </div>
+          }
+          onConfirm={() => handleConfirmAuthConfigPopConfirm(action)}
+          onCancel={() => handleCancelAuthConfigPopConfirm()}
+        >
+          <i
+            class="apigateway-icon icon-ag-bulk-edit edit-action ml5 f14 default-c"
+            v-bk-tooltips={{
+              content: (
+                <div>
+                  {t('批量修改认证方式')}
+                </div>
+              ),
+            }}
+          />
+        </bk-pop-confirm>
+      </div>
+    </div>
+  );
+};
+
+const tempPublicConfig = ref({
+  is_public: false,
+  allow_apply_permission: false,
+});
+
+// 批量修改公开设置确认后
+const handleConfirmPublicConfigPopConfirm = (action: 'add' | 'update') => {
+  const isPublic = tempPublicConfig.value.is_public;
+  const allowApplyPermission = tempPublicConfig.value.allow_apply_permission && isPublic;
+
+  tableData.value.filter(item => !item._unchecked)
+    .forEach(item => {
+      if ((action === 'add' && !item.id) || (action === 'update' && item.id)) {
+        item.is_public = isPublic;
+        item.allow_apply_permission = allowApplyPermission;
+      }
+    });
+};
+
+// 批量修改公开设置取消后
+const handleCancelPublicConfigPopConfirm = () => {
+  tempPublicConfig.value = {
+    is_public: false,
+    allow_apply_permission: false,
+  }
+};
+
+// 公开设置列 TSX
+const renderIsPublicColLabel = (action: 'add' | 'update') => {
+  return (
+    <div>
+      <div class="public-config-col-label">
+        <span>{t('是否公开')}</span>
+        <bk-pop-confirm
+          width="320"
+          trigger="click"
+          title={t('批量修改公开设置')}
+          content={
+            <div class="multi-edit-popconfirm-wrap public-config">
+              <bk-form model={tempPublicConfig.value} labelWidth="100" labelPosition="right">
+                <bk-form-item
+                  label={t('是否公开')} required={true}
+                  description={t('公开，则用户可查看资源文档、申请资源权限；不公开，则资源对用户隐藏')}
+                >
+                  <bk-switcher
+                    v-model={tempPublicConfig.value.is_public}
+                    theme="primary"
+                    size="small"
+                  />
+                </bk-form-item>
+                {tempPublicConfig.value.is_public ?
+                  <bk-form-item label="">
+                    <bk-checkbox
+                      v-model={tempPublicConfig.value.allow_apply_permission}
+                    >
+                      <span class="bottom-line">
+                        {t('允许申请权限')}
+                      </span>
+                    </bk-checkbox>
+                  </bk-form-item> : ''
+                }
+              </bk-form>
+            </div>
+          }
+          onConfirm={() => handleConfirmPublicConfigPopConfirm(action)}
+          onCancel={() => handleCancelPublicConfigPopConfirm()}
+        >
+          <i
+            class="apigateway-icon icon-ag-bulk-edit edit-action ml5 f14 default-c"
+            v-bk-tooltips={{
+              content: (
+                <div>
+                  {t('批量修改公开设置')}
+                </div>
+              ),
+            }}
+          />
+        </bk-pop-confirm>
+      </div>
+    </div>
+  );
+};
+
+const filterInputAdd = ref('')
+const filterInputUpdate = ref('')
+const filterData = (val: string, action: 'add' | 'update') => {
+  if (action === 'add') {
+    filterInputAdd.value = val;
+  }
+
+  if (action === 'update') {
+    filterInputUpdate.value = val;
+  }
+}
+
+const editorWrapRef = ref<HTMLElement | null>(null);
+// 编辑器全屏
+const handleFullScreenClick = () => {
+  if (editorWrapRef?.value?.requestFullscreen) {
+    editorWrapRef.value.requestFullscreen();
+  }
+};
 </script>
 <style scoped lang="scss">
-.import-container{
-  .import-header{
-    .icon-ag-add-small{
+
+.import-wrapper {
+  position: relative;
+  min-height: 100%;
+
+  .steps-indicator-wrap,
+  .page-actions-wrap {
+    height: 52px;
+    display: flex;
+    align-items: center;
+    background: #FFFFFF;
+    z-index: 100;
+  }
+
+  .steps-indicator-wrap {
+    position: sticky;
+    top: 0;
+    justify-content: center;
+    border-bottom: 1px solid #DCDEE5;
+
+    .steps-indicator {
+      width: 50%;
+    }
+  }
+
+  .page-actions-wrap {
+    position: sticky;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-left: 48px;
+    border-top: 1px solid #DCDEE5;
+  }
+}
+
+.import-container {
+  padding: 20px 24px 18px;
+  margin: 20px 24px;
+  background-color: #FFFFFF;
+  box-shadow: 0 2px 4px 0 #1919290d;
+
+  .import-header {
+    .icon-ag-add-small {
       font-size: 16px;
     }
-    .desc{
+
+    .desc {
+      margin-left: 12px;
       font-size: 12px;
       color: #979ba5;
     }
   }
-  .monacoEditor {
+
+  .monaco-editor {
     width: 100%;
     height: calc(100vh - 240px);
+    margin-top: 10px;
+    border-radius: 2px;
+    overflow: hidden;
+
+    .editor-layout-main {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .editor-toolbar {
+        height: 40px;
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #1a1a1a;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+        z-index: 6;
+
+        .tool-items {
+          height: 100%;
+          display: flex;
+          align-items: center;
+
+          .tool-item {
+            padding: 0 8px;
+            display: flex;
+            align-items: center;
+            color: #999;
+            cursor: pointer;
+
+            &.active, &:hover {
+              color: #ccc;
+            }
+
+            &.svg-icon {
+              padding: 0 8px;
+              height: 18px;
+              color: red;
+              filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
+
+              &.active, &:hover {
+                filter: invert(80%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
+              }
+            }
+          }
+        }
+      }
+
+      .editor-main-content {
+        display: flex;
+        height: 100%;
+
+        .editor-side-bar {
+          width: 32px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: space-between;
+          background-color: #1a1a1a;
+
+          .editor-error-counters {
+            width: 32px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .error-count-item {
+              height: 34px;
+              width: 100%;
+              border-bottom: 1px solid #222;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              line-height: 12px;
+              font-size: 12px;
+              cursor: pointer;
+
+              &:last-child {
+                border-bottom: none;
+              }
+
+              &:hover, &.active {
+                background-color: #333;
+              }
+            }
+          }
+
+          .editor-error-shifts {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+
+            .shift-btn {
+              width: 24px;
+              height: 24px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background: #4D4D4D;
+              border-radius: 2px;
+              cursor: pointer;
+
+              &:active {
+                background: #666;
+              }
+            }
+
+            .shift-btn.prev {
+              transform: rotate(-90deg);
+            }
+
+            .shift-btn.next {
+              transform: rotate(90deg);
+            }
+          }
+        }
+      }
+
+      .editor-footer-bar {
+        background-color: #1a1a1a;
+        box-shadow: 0 -2px 4px 0 #00000029;
+
+        .editor-footer-validate-btn {
+          height: 52px;
+          padding-left: 24px;
+          display: flex;
+          align-items: center;
+        }
+
+        .editor-message {
+          height: 52px;
+          padding-left: 24px;
+          padding-right: 24px;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          background-color: #212121;;
+          font-size: 12px;
+          color: #DCDEE5;
+          border-left: 4px solid #34d97b;
+        }
+      }
+    }
+
+    .editor-messages-wrapper {
+      position: relative;
+      height: 100%;
+      padding-top: 16px;
+      background-color: #1a1a1a;
+      border-left: 4px solid #1a1a1a;
+      font-size: 12px;
+
+      &.has-error-msg {
+        border-left: 4px solid #B34747;
+      }
+
+      .editor-message {
+        height: 20px;
+        padding: 0 4px 0 12px;
+        margin-bottom: 6px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        cursor: pointer;
+
+        &.active,
+        &:hover {
+          background-color: #333;
+        }
+
+        .msg-icon {
+          padding-top: 3px;
+          display: flex;
+          align-items: center;
+        }
+
+        .msg-body {
+          color: #ccc;
+        }
+      }
+    }
+
+    // 变更代码编辑器伸缩线样式
+    :deep(.bk-resize-layout-bottom > .bk-resize-layout-aside) {
+      border-top: 1px solid black;
+      background: #1a1a1a;
+    }
+
+    // ResizeLayout 的折叠按钮样式
+    :deep(.bk-resize-layout>.bk-resize-layout-aside .bk-resize-collapse) {
+      margin-bottom: 9px;
+      background: #1a1a1a;
+      box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.1);
+    }
+
+    // ResizeLayout 的折叠区应允许滚动
+    :deep(.bk-resize-layout>.bk-resize-layout-aside .bk-resize-layout-aside-content) {
+      overflow-y: auto;
+    }
   }
 
   :deep(.upload-cls) {
-    .bk-upload-list{
+    .bk-upload-list {
       display: none !important;
     }
   }
+
+  // 编辑器错误行高亮样式
+  :deep(.lineHighlightError) {
+    background-color: #382322;
+    opacity: .7;
+  }
+
+  :deep(.glyphMarginError) {
+    width: 6px !important;
+    background: #B34747;
+  }
+
+  :deep(.lineHighlightWarning) {
+    background-color: hsla(36.6, 81.7%, 55.1%, 0.1);
+  }
+
+  :deep(.glyphMarginWarning) {
+    width: 6px !important;
+    background: hsla(36.6, 81.7%, 55.1%, 0.5);
+  }
+
+  // 让错误消息台的滚动条模仿 monaco editor 风格
+  /* 整个滚动条 */
+  ::-webkit-scrollbar {
+    width: 14px; /* 滚动条宽度 */
+  }
+
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background: #1e1e1e;
+  }
+
+  /* 滚动条滑块 */
+  ::-webkit-scrollbar-thumb {
+    background: #4f4f4f;
+  }
+
+  /* 鼠标悬停时的滚动条滑块 */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+
+  /* 鼠标按住时的滚动条滑块 */
+  ::-webkit-scrollbar-thumb:active {
+    background: #5e5e5e;
+  }
+
+  .warning-circle {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: hsla(36.6, 81.7%, 55.1%, 0.5);
+  }
 }
+
+.imported-resources-wrap {
+  margin: 20px 24px;
+  min-height: 768px;
+
+  .res-counter-banner {
+    height: 40px;
+    padding: 0 12px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #FFFFFF;
+    box-shadow: 0 2px 4px 0 #1919290d;
+    border-radius: 2px;
+  }
+
+  .res-content-wrap {
+    //padding: 24px;
+    margin-bottom: 12px;
+    background: #FFFFFF;
+    box-shadow: 0 2px 4px 0 #1919290d;
+  }
+
+  .collapse-panel-title {
+    flex-grow: 1;
+    display: inline-flex;
+    position: relative;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .collapse-panel-table-wrap {
+    padding-bottom: 24px;
+  }
+}
+
+:deep(.bk-collapse-header) {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.bk-collapse-header .bk-collapse-title) {
+  flex-grow: 1;
+  display: inline-flex;
+  align-items: center;
+}
+
+:deep(.bk-collapse-content) {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+:deep(.multi-edit-popconfirm-wrap .auth-config) {
+  font-size: 12px;
+}
+
+.import-confirm-dialog-content-wrap {
+  .content-wrap {
+    padding: 12px;
+    background-color: #aaa;
+  }
+}
+
+.doc-sides {
+  :deep(.bk-modal-content) {
+    max-height: calc(100vh - 52px);
+    overflow: hidden;
+  }
+}
+
 </style>
diff --git a/src/dashboard-front/yarn.lock b/src/dashboard-front/yarn.lock
index 2276105e3..dd891a412 100644
--- a/src/dashboard-front/yarn.lock
+++ b/src/dashboard-front/yarn.lock
@@ -1555,6 +1555,16 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@jsep-plugin/assignment@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jsep-plugin/assignment/-/assignment-1.2.1.tgz#07277bdd7862451a865d391e2142efba33f46c9b"
+  integrity sha512-gaHqbubTi29aZpVbBlECRpmdia+L5/lh2BwtIJTmtxdbecEyyX/ejAOg7eQDGNvGOUmPY7Z2Yxdy9ioyH/VJeA==
+
+"@jsep-plugin/regex@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@jsep-plugin/regex/-/regex-1.0.3.tgz#3aeaa2e5fa45d89de116aeafbfa41c95935b7f6d"
+  integrity sha512-XfZgry4DwEZvSFtS/6Y+R48D7qJYJK6R9/yJFyUFHCIUMEEHuJ4X95TDgJp5QkmzfLYvapMPzskV5HpIDrREug==
+
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz"
@@ -5361,7 +5371,7 @@ js-yaml@^3.13.1:
 
 js-yaml@^4.1.0:
   version "4.1.0"
-  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
   integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
   dependencies:
     argparse "^2.0.1"
@@ -5371,6 +5381,11 @@ jsbn@~0.1.0:
   resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz"
   integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
+jsep@^1.3.8:
+  version "1.3.9"
+  resolved "https://registry.yarnpkg.com/jsep/-/jsep-1.3.9.tgz#8ce42df80ee9c1b39e52d0dd062a465342f35440"
+  integrity sha512-i1rBX5N7VPl0eYb6+mHNp52sEuaS2Wi8CDYx1X5sn9naevL78+265XJqy1qENEk7mRKwS06NHpUqiBwR7qeodw==
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz"
@@ -5447,6 +5462,15 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonpath-plus@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/jsonpath-plus/-/jsonpath-plus-9.0.0.tgz#bb8703ee481531142bca8dee9a42fe72b8358a7f"
+  integrity sha512-bqE77VIDStrOTV/czspZhTn+o27Xx9ZJRGVkdVShEtPoqsIx5yALv3lWVU6y+PqYvWPJNWE7ORCQheQkEe0DDA==
+  dependencies:
+    "@jsep-plugin/assignment" "^1.2.1"
+    "@jsep-plugin/regex" "^1.0.3"
+    jsep "^1.3.8"
+
 jsprim@^1.2.2:
   version "1.4.2"
   resolved "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz"