diff --git a/bcs-services/bcs-bscp/ui/src/components/code-editor/index.vue b/bcs-services/bcs-bscp/ui/src/components/code-editor/index.vue
index 259c63d2d8..915ee96637 100644
--- a/bcs-services/bcs-bscp/ui/src/components/code-editor/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/components/code-editor/index.vue
@@ -51,7 +51,7 @@ const props = withDefaults(
     editable: true,
     lfEol: true,
     language: '',
-  }
+  },
 );
 
 const emit = defineEmits(['update:modelValue', 'change', 'enter']);
@@ -72,21 +72,21 @@ watch(
     if (val !== localVal.value) {
       editor.setValue(val);
     }
-  }
+  },
 );
 
 watch(
   () => props.language,
   (val) => {
     monaco.editor.setModelLanguage(editor.getModel() as monaco.editor.ITextModel, val);
-  }
+  },
 );
 
 watch(
   () => props.editable,
   (val) => {
     editor.updateOptions({ readOnly: !val });
-  }
+  },
 );
 
 watch(
@@ -95,14 +95,14 @@ watch(
     if (Array.isArray(val) && val.length > 0) {
       editorHoverProvider = useEditorVariableReplace(editor, val);
     }
-  }
+  },
 );
 
 watch(
   () => props.errorLine,
   () => {
     setErrorLine();
-  }
+  },
 );
 
 onMounted(() => {
@@ -167,9 +167,9 @@ const handleVariableList = async () => {
     getVariableList(bkBizId.value, { start: 0, limit: 1000 }),
     getUnReleasedAppVariables(bkBizId.value, appId.value),
   ]);
-  variableNameList.value = variableList.details.map((item: any) => item.spec.name);
-  privateVariableNameList.value = privateVariableList.details.map((item: any) => item.name);
-  variableNameList.value?.filter((item) => !privateVariableNameList.value!.includes(item));
+  variableNameList.value = variableList.details.map((item: any) => `.${item.spec.name}`);
+  privateVariableNameList.value = privateVariableList.details.map((item: any) => `.${item.name}`);
+  variableNameList.value?.filter(item => !privateVariableNameList.value!.includes(item));
 };
 
 // 注册自定义语言
@@ -208,22 +208,18 @@ const aotoCompletion = () => {
       const lineContent = model.getLineContent(position.lineNumber);
       const charBeforeCursor = lineContent.charAt(position.column - 2);
       // 根据当前的文本内容和光标位置，返回自动补全的候选项列表
-      const variableSuggestions = variableNameList.value!.map((item: string) => {
-        return {
-          label: item, // 候选项的显示文本
-          kind: monaco.languages.CompletionItemKind.Variable, // 候选项的类型
-          insertText: item, // 插入光标后的文本
-          range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
-        };
-      });
-      const privateVariableSuggestions = privateVariableNameList.value!.map((item: string) => {
-        return {
-          label: item,
-          kind: monaco.languages.CompletionItemKind.Variable,
-          insertText: item,
-          range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
-        };
-      });
+      const variableSuggestions = variableNameList.value!.map((item: string) => ({
+        label: item, // 候选项的显示文本
+        kind: monaco.languages.CompletionItemKind.Variable, // 候选项的类型
+        insertText: item, // 插入光标后的文本
+        range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+      }));
+      const privateVariableSuggestions = privateVariableNameList.value!.map((item: string) => ({
+        label: item,
+        kind: monaco.languages.CompletionItemKind.Variable,
+        insertText: item,
+        range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+      }));
       const suggestions = [...variableSuggestions, ...privateVariableSuggestions];
       if (charBeforeCursor === '{') {
         return {
@@ -234,9 +230,7 @@ const aotoCompletion = () => {
         suggestions: [],
       };
     },
-    resolveCompletionItem: (item: any) => {
-      return item;
-    },
+    resolveCompletionItem: (item: any) => item,
   });
 };
 
diff --git a/bcs-services/bcs-bscp/ui/src/components/diff/text.vue b/bcs-services/bcs-bscp/ui/src/components/diff/text.vue
index 0f1f7107a3..3f85cf09d1 100644
--- a/bcs-services/bcs-bscp/ui/src/components/diff/text.vue
+++ b/bcs-services/bcs-bscp/ui/src/components/diff/text.vue
@@ -59,7 +59,7 @@ const props = withDefaults(
     currentVariables: () => [],
     currentLanguage: '',
     baseVariables: () => [],
-  }
+  },
 );
 
 const textDiffRef = ref();
@@ -76,7 +76,7 @@ watch(
   () => {
     updateModel();
     replaceDiffVariables();
-  }
+  },
 );
 
 watch(
@@ -84,7 +84,7 @@ watch(
   () => {
     updateModel();
     replaceDiffVariables();
-  }
+  },
 );
 
 watch(
@@ -92,7 +92,7 @@ watch(
   () => {
     updateModel();
     replaceDiffVariables();
-  }
+  },
 );
 
 onMounted(() => {
@@ -182,7 +182,7 @@ const replaceDiffVariables = () => {
     permissionDiffEditorHoverProvider = useDiffEditorVariableReplace(
       permissionEditor,
       props.currentVariables,
-      props.baseVariables
+      props.baseVariables,
     );
   }
 };
diff --git a/bcs-services/bcs-bscp/ui/src/components/footer.vue b/bcs-services/bcs-bscp/ui/src/components/footer.vue
index 3b1da15c22..884db5d887 100644
--- a/bcs-services/bcs-bscp/ui/src/components/footer.vue
+++ b/bcs-services/bcs-bscp/ui/src/components/footer.vue
@@ -12,7 +12,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'app-footer',
+  name: 'AppFooter',
   setup() {
     return {
       // @ts-ignore
diff --git a/bcs-services/bcs-bscp/ui/src/components/permission-input-picker.vue b/bcs-services/bcs-bscp/ui/src/components/permission-input-picker.vue
index 7886372498..5eb9751bc5 100644
--- a/bcs-services/bcs-bscp/ui/src/components/permission-input-picker.vue
+++ b/bcs-services/bcs-bscp/ui/src/components/permission-input-picker.vue
@@ -78,14 +78,14 @@ watch(
     privilegeInputVal.value = val;
     localVal.value = val;
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // 将权限数字拆分成三个分组配置
 const privilegeGroupsValue = computed(() => {
   const data: { [index: string]: number[] } = { 0: [], 1: [], 2: [] };
   if (typeof localVal.value === 'string' && localVal.value.length > 0) {
-    const valArr = localVal.value.split('').map((i) => parseInt(i, 10));
+    const valArr = localVal.value.split('').map(i => parseInt(i, 10));
     valArr.forEach((item, index) => {
       data[index as keyof typeof data] = PRIVILEGE_VALUE_MAP[item as keyof typeof PRIVILEGE_VALUE_MAP];
     });
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/index.vue
index e99de5a0b1..fab47d976c 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/index.vue
@@ -74,7 +74,7 @@ watch(
         alter_scope: [],
       };
     }
-  }
+  },
 );
 
 const loadRules = async () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/rule-edit.vue b/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/rule-edit.vue
index 349aca57e0..77eead1128 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/rule-edit.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/rule-edit.vue
@@ -2,39 +2,45 @@
   <div class="rule-edit">
     <p class="title">配置关联规则</p>
     <div class="rules-edit-area">
-      <div v-for="(rule, index) in localRules" class="rule-item" :key="index">
-        <bk-input
-          v-model="rule.content"
-          class="rule-input"
-          placeholder="请填写"
-          :disabled="rule.type === 'del'"
-          @blur="handleRuleContentChange(index)">
-          <template #suffix>
-            <div
-              v-if="rule.type"
-              v-bk-tooltips="{
-                disabled: rule.type !== 'modify',
-                content: `${rule.original} -> ${rule.content}`
-              }"
-              :class="`status-tag ${rule.type}`">
-              {{ RULE_TYPE_MAP[rule.type] }}
-            </div>
-          </template>
-        </bk-input>
-        <div class="action-btns">
-          <i
-            v-if="rule.type === 'del'"
-            v-bk-tooltips="'撤销本次删除'"
-            class="bk-bscp-icon icon-revoke revoke-icon"
-            @click="handleRevoke(index)">
-          </i>
-          <template v-else>
-            <i v-if="localRules.length > 1" class="bk-bscp-icon icon-reduce" @click="handleDeleteRule(index)"></i>
-            <i style="margin-left: 10px;" class="bk-bscp-icon icon-add" @click="handleAddRule(index)"></i>
-          </template>
+      <div v-for="(rule, index) in localRules" class="rule-list" :key="index">
+        <div class="rule-item">
+          <bk-input
+            v-model="rule.content"
+            class="rule-input"
+            placeholder="请填写"
+            :disabled="rule.type === 'del'"
+            @blur="handleRuleContentChange(index)"
+          >
+            <template #suffix>
+              <div
+                v-if="rule.type"
+                v-bk-tooltips="{
+                  disabled: rule.type !== 'modify',
+                  content: `${rule.original} -> ${rule.content}`,
+                }"
+                :class="`status-tag ${rule.type}`"
+              >
+                {{ RULE_TYPE_MAP[rule.type] }}
+              </div>
+            </template>
+          </bk-input>
+          <div class="action-btns">
+            <i
+              v-if="rule.type === 'del'"
+              v-bk-tooltips="'撤销本次删除'"
+              class="bk-bscp-icon icon-revoke revoke-icon"
+              @click="handleRevoke(index)"
+            >
+            </i>
+            <template v-else>
+              <i v-if="localRules.length > 1" class="bk-bscp-icon icon-reduce" @click="handleDeleteRule(index)"></i>
+              <i style="margin-left: 10px" class="bk-bscp-icon icon-add" @click="handleAddRule(index)"></i>
+            </template>
+          </div>
         </div>
+        <div class="error-info"><span v-if="!rule.isRight">输入的规则有误，请重新确认</span></div>
       </div>
-      <p class="tips">可填写服务名称/文件路径，支持通配符，如：myservice/*</p>
+      <p class="tips">可填写服务名称/文件路径，支持glob 表达式，如：myservice/**</p>
     </div>
     <!-- <div class="preview-btn">预览匹配结果</div> -->
   </div>
@@ -44,8 +50,8 @@ import { ref, watch } from 'vue';
 import { ICredentialRule, IRuleEditing, IRuleUpdateParams } from '../../../../../types/credential';
 
 const props = defineProps<{
-    rules: ICredentialRule[]
-  }>();
+  rules: ICredentialRule[];
+}>();
 
 const emits = defineEmits(['change']);
 
@@ -61,21 +67,25 @@ const transformRulesToEditing = (rules: ICredentialRule[]) => {
   const rulesEditing: IRuleEditing[] = [];
   rules.forEach((item) => {
     const { id, spec } = item;
-    rulesEditing.push({ id, type: '', content: spec.credential_scope, original: spec.credential_scope });
+    rulesEditing.push({ id, type: '', content: spec.credential_scope, original: spec.credential_scope, isRight: true });
   });
   return rulesEditing;
 };
 
-watch(() => props.rules, (val) => {
-  if (val.length === 0) {
-    localRules.value = [{ id: 0, type: 'new', content: '', original: '' }];
-  } else {
-    localRules.value = transformRulesToEditing(val);
-  }
-}, { immediate: true });
+watch(
+  () => props.rules,
+  (val) => {
+    if (val.length === 0) {
+      localRules.value = [{ id: 0, type: 'new', content: '', original: '', isRight: true }];
+    } else {
+      localRules.value = transformRulesToEditing(val);
+    }
+  },
+  { immediate: true },
+);
 
 const handleAddRule = (index: number) => {
-  localRules.value.splice(index + 1, 0, { id: 0, type: 'new', content: '', original: '' });
+  localRules.value.splice(index + 1, 0, { id: 0, type: 'new', content: '', original: '', isRight: true });
 };
 
 const handleDeleteRule = (index: number) => {
@@ -95,8 +105,17 @@ const handleRevoke = (index: number) => {
   updateRuleParams();
 };
 
+const testRule = (rule: string) => {
+  const parts = rule.split('/', 2);
+  if (!parts[0] || !parts[1]) {
+    return false;
+  }
+  return /^([!@+*?{}()|\]\\[\-^$])/.test(parts[1]);
+};
+
 const handleRuleContentChange = (index: number) => {
   const rule = localRules.value[index];
+  localRules.value[index].isRight = testRule(rule.content);
   if (rule.id) {
     rule.type = rule.content === rule.original ? '' : 'modify';
   }
@@ -129,80 +148,83 @@ const updateRuleParams = () => {
 };
 </script>
 <style lang="scss" scoped>
-  .title {
+.title {
+  position: relative;
+  margin: 0 0 6px;
+  line-height: 20px;
+  font-size: 12px;
+  color: #63656e;
+  &:after {
+    position: absolute;
+    top: 0;
+    width: 14px;
+    color: #ea3636;
+    text-align: center;
+    content: '*';
+  }
+}
+.rule-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .rule-input {
     position: relative;
-    margin: 0 0 6px;
-    line-height: 20px;
-    font-size: 12px;
-    color: #63656e;
-    &:after {
+    width: 312px;
+    .status-tag {
       position: absolute;
-      top: 0;
-      width: 14px;
-      color: #ea3636;
-      text-align: center;
-      content: "*";
-    }
-  }
-  .rule-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    &:not(:last-of-type) {
-      margin-bottom: 16px;
-    }
-    .rule-input {
-      position: relative;
-      width: 312px;
-      .status-tag {
-        position: absolute;
-        top: 4px;
-        right: 8px;
-        padding: 0 8px;
-        line-height: 22px;
-        font-size: 12px;
-        border-radius: 2px;
-        &.new {
-          background: #e4faf0;
-          color: #14a568;
-        }
-        &.del {
-          background: #feebea;
-          color: #ea3536;
-        }
-        &.modify {
-          background: #fff1dB;
-          color: #fe9c00;
-        }
+      top: 4px;
+      right: 8px;
+      padding: 0 8px;
+      line-height: 22px;
+      font-size: 12px;
+      border-radius: 2px;
+      &.new {
+        background: #e4faf0;
+        color: #14a568;
       }
-    }
-    .action-btns {
-      width: 38px;
-      color: #979ba5;
-      font-size: 14px;
-      > i {
-        cursor: pointer;
-        &:hover {
-          color: #3a84ff;
-        }
+      &.del {
+        background: #feebea;
+        color: #ea3536;
+      }
+      &.modify {
+        background: #fff1db;
+        color: #fe9c00;
       }
     }
   }
-  .tips {
-    margin: 8px 0 0;
-    line-height: 20px;
+  .action-btns {
+    width: 38px;
     color: #979ba5;
-    font-size: 12px;
-  }
-  .preview-btn {
-    margin-top: 16px;
-    padding: 5px 0;
-    width: 100%;
-    text-align: center;
     font-size: 14px;
-    color: #3a84ff;
-    border: 1px solid #3a84ff;
-    border-radius: 2px;
-    cursor: pointer;
+    > i {
+      cursor: pointer;
+      &:hover {
+        color: #3a84ff;
+      }
+    }
   }
+}
+.error-info {
+  height: 16px;
+  color: #ea3636;
+  font-size: 12px;
+  line-height: 16px;
+}
+.tips {
+  margin: 8px 0 0;
+  line-height: 20px;
+  color: #979ba5;
+  font-size: 12px;
+}
+.preview-btn {
+  margin-top: 16px;
+  padding: 5px 0;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  color: #3a84ff;
+  border: 1px solid #3a84ff;
+  border-radius: 2px;
+  cursor: pointer;
+}
 </style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/credentials/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/credentials/index.vue
index b73ff9289a..6fca728cf4 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/credentials/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/credentials/index.vue
@@ -246,7 +246,7 @@ watch(
     createPending.value = false;
     getPermData();
     refreshListWithLoading();
-  }
+  },
 );
 
 onMounted(() => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/groups/components/group-edit-form.vue b/bcs-services/bcs-bscp/ui/src/views/space/groups/components/group-edit-form.vue
index 6903147908..5f7bfd755c 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/groups/components/group-edit-form.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/groups/components/group-edit-form.vue
@@ -136,7 +136,7 @@ watch(
   () => props.group,
   (val) => {
     formData.value = cloneDeep(val);
-  }
+  },
 );
 
 onMounted(() => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/create-script.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/create-script.vue
index 20f26eabb0..2f734656ef 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/create-script.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/create-script.vue
@@ -2,7 +2,7 @@
   <DetailLayout name="新建脚本" @close="handleClose">
     <template #content>
       <div class="create-script-forms">
-        <bk-form ref="formRef" form-type="vertical" :model="formData">
+        <bk-form ref="formRef" form-type="vertical" :model="formData" :rules="rules">
           <bk-form-item class="fixed-width-form" label="脚本名称" property="name" required>
             <bk-input v-model="formData.name" />
           </bk-form-item>
@@ -84,6 +84,21 @@ const formData = ref<IScriptEditingForm>({
   content: '',
 });
 
+const rules = {
+  name: [
+    {
+      validator: (value: string) => /^[A-Za-z\u4e00-\u9fa5][^/]*$/.test(value),
+      message: '必须以大小写字母、中文开头,不能包含/',
+      trigger: 'blur',
+    },
+    {
+      validator: (value: string) => value.length <= 256,
+      message: '不能超过256个字符',
+      trigger: 'change',
+    },
+  ],
+};
+
 onMounted(() => {
   getTags();
 });
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-cited.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-cited.vue
index ada4944a1d..e26e3fd994 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-cited.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-cited.vue
@@ -20,6 +20,9 @@
             }}</template>
           </template>
         </bk-table-column>
+        <bk-table-column label="脚本类型">
+          <template #default="{ row }">{{ row.type === 'pre_hook' ? '前置脚本':'后置脚本' }}</template>
+        </bk-table-column>
         <bk-table-column label="服务名称" prop="app_name"></bk-table-column>
         <bk-table-column label="服务版本">
           <template #default="{ row }">
@@ -76,7 +79,7 @@ watch(
     if (val) {
       getCitedData();
     }
-  }
+  },
 );
 
 const getCitedData = async () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-list.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-list.vue
index eb168d27c0..eb835afd25 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-list.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/scripts/list/script-list.vue
@@ -141,7 +141,7 @@ watch(
   () => {
     refreshList();
     getTags();
-  }
+  },
 );
 
 onMounted(() => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/version-manage/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/version-manage/index.vue
index 6e68325a7d..2f1620a175 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/scripts/version-manage/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/scripts/version-manage/index.vue
@@ -177,7 +177,7 @@ onMounted(async () => {
     unPublishVersion.value = await getScriptVersionDetail(
       spaceId.value,
       scriptId.value,
-      scriptDetail.value.not_release_id
+      scriptDetail.value.not_release_id,
     );
   }
   initLoading.value = false;
@@ -322,7 +322,7 @@ const handleSelectVersion = (version: IScriptVersion) => {
 // 新建、编辑脚本后回调
 const handleVersionEditSubmitted = async (
   data: { id: number; name: string; memo: string; content: string },
-  type: string
+  type: string,
 ) => {
   versionEditData.value.form = { ...data };
   refreshList();
@@ -333,10 +333,10 @@ const handleVersionEditSubmitted = async (
     unPublishVersion.value = await getScriptVersionDetail(
       spaceId.value,
       scriptId.value,
-      scriptDetail.value.not_release_id
+      scriptDetail.value.not_release_id,
     );
     createBtnDisabled.value = false;
-    handleEditVersionClick()
+    handleEditVersionClick();
   } else {
     // 如果是编辑旧版本，则直接修改版本数据
     const { memo, content } = data;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/version-manage/script-version-diff.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/version-manage/script-version-diff.vue
index a215e21fcd..a9fb10fee8 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/scripts/version-manage/script-version-diff.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/scripts/version-manage/script-version-diff.vue
@@ -66,13 +66,13 @@ const getVersionList = async () => {
   };
   const res = await getScriptVersionList(props.spaceId, props.scriptId, params);
   versionList.value = (res.details as IScriptVersionListItem[])
-    .filter((item) => item.hook_revision.id !== props.crtVersion.id)
-    .map((item) => item.hook_revision);
+    .filter(item => item.hook_revision.id !== props.crtVersion.id)
+    .map(item => item.hook_revision);
   versionListLoading.value = false;
 };
 
 const handleSelectVersion = (id: number) => {
-  const version = versionList.value.find((item) => item.id === id);
+  const version = versionList.value.find(item => item.id === id);
   if (version) {
     baseContent.value = version.spec.content;
   }
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/create-version/create-version-slider.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/create-version/create-version-slider.vue
index 2f29c9fa56..6612030faf 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/create-version/create-version-slider.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/create-version/create-version-slider.vue
@@ -90,7 +90,7 @@ watch(
       isPublish.value = false;
       getVariableList();
     }
-  }
+  },
 );
 
 const getVariableList = async () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/confirm-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/confirm-dialog.vue
index 262bd273a3..01bbb4eaa3 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/confirm-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/confirm-dialog.vue
@@ -77,9 +77,9 @@ const rules = {
 watch(
   () => props.groups,
   () => {
-    localVal.value.groups = props.groups.map((item) => item.id);
+    localVal.value.groups = props.groups.map(item => item.id);
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const handleClose = () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/index.vue
index b873b3090f..58b2691abe 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/index.vue
@@ -54,7 +54,7 @@ const props = withDefaults(
   }>(),
   {
     groupType: 'select',
-  }
+  },
 );
 const emits = defineEmits(['openPreviewVersionDiff', 'groupTypeChange', 'change']);
 
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/preview.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/preview.vue
index 4889d21788..a4b4e4c016 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/preview.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/preview.vue
@@ -73,7 +73,7 @@ const props = withDefaults(
   }>(),
   {
     disabled: () => [],
-  }
+  },
 );
 
 const emits = defineEmits(['diff', 'change']);
@@ -85,13 +85,13 @@ watch(
   (val) => {
     previewData.value = aggregateGroup(val);
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const handleDelete = (id: number) => {
   emits(
     'change',
-    props.value.filter((group) => group.id !== id)
+    props.value.filter(group => group.id !== id),
   );
 };
 </script>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/tree.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/tree.vue
index 272289d7f0..8e7abee85d 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/tree.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/select-group/tree.vue
@@ -110,11 +110,11 @@ const categorizingData = (groupList: IGroupToPublish[]) => {
       // id为0表示默认分组，在分组节点树中不可选
       return;
     }
-    const checked = props.value.findIndex((item) => item.id === group.id) > -1;
+    const checked = props.value.findIndex(item => item.id === group.id) > -1;
     const disabled = props.disabled.includes(group.id);
     group.rules.forEach((rule) => {
       const nodeId = `${rule.key}_${group.id}`; // 用在节点树上做唯一标识
-      const parentNode = treeNodeData.find((item) => item.node_id === rule.key);
+      const parentNode = treeNodeData.find(item => item.node_id === rule.key);
       const nodeData = { ...group, node_id: nodeId, checked, disabled };
       if (parentNode) {
         parentNode.count += 1;
@@ -143,15 +143,14 @@ const categorizingData = (groupList: IGroupToPublish[]) => {
 
 // 父级分类节点是否选中
 const isParentNodeChecked = (node: ITreeParentNodeData) => {
-  const res = node.children.length > 0 && node.children.every((group) => group.checked);
+  const res = node.children.length > 0 && node.children.every(group => group.checked);
   return res;
 };
 
 // 父级分类节点是否半选
-const isParentNodeIndeterminate = (node: ITreeParentNodeData) =>
-  node.children.length > 0 &&
-  !node.children.every((group) => group.checked) &&
-  node.children.some((group) => group.checked);
+const isParentNodeIndeterminate = (node: ITreeParentNodeData) => node.children.length > 0 &&
+  !node.children.every(group => group.checked) &&
+  node.children.some(group => group.checked);
 
 const props = defineProps<{
   groupListLoading: boolean;
@@ -175,7 +174,7 @@ const isSearchEmpty = ref(false);
 const searchTreeData = computed(() => {
   if (searchStr.value === '') return treeData.value;
   isSearchEmpty.value = true;
-  return treeData.value.filter((treeNode) => treeNode.name.toLowerCase().includes(searchStr.value.toLowerCase()));
+  return treeData.value.filter(treeNode => treeNode.name.toLowerCase().includes(searchStr.value.toLowerCase()));
 });
 
 // 分组列表变更
@@ -184,14 +183,14 @@ watch(
   (val) => {
     categorizingData(val);
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // 选中小组变更
 watch(
   () => props.value,
   (val) => {
-    const ids = val.map((item) => item.id);
+    const ids = val.map(item => item.id);
     treeData.value.forEach((parentNode) => {
       parentNode.children.forEach((node) => {
         node.checked = ids.includes(node.id);
@@ -199,15 +198,15 @@ watch(
       parentNode.checked = isParentNodeChecked(parentNode);
       parentNode.indeterminate = isParentNodeIndeterminate(parentNode);
     });
-  }
+  },
 );
 
 // 全选
 const handleSelectAll = () => {
   const groupList: IGroupToPublish[] = [];
   props.groupList.forEach((group) => {
-    const hasGroupChecked = props.value.findIndex((item) => item.id === group.id) > -1; // 分组在编辑前是否选中
-    const hasAdded = groupList.findIndex((item) => item.id === group.id) > -1; // 分组已添加
+    const hasGroupChecked = props.value.findIndex(item => item.id === group.id) > -1; // 分组在编辑前是否选中
+    const hasAdded = groupList.findIndex(item => item.id === group.id) > -1; // 分组已添加
     const isDisabled = props.disabled.includes(group.id);
     if (group.id !== 0 && !hasAdded && (!isDisabled || hasGroupChecked)) {
       groupList.push(group);
@@ -219,7 +218,7 @@ const handleSelectAll = () => {
 // 全不选
 const handleClearAll = () => {
   const hasCheckedGroups = props.groupList.filter((group) => {
-    const res = props.disabled.includes(group.id) && props.value.findIndex((item) => item.id === group.id) > -1;
+    const res = props.disabled.includes(group.id) && props.value.findIndex(item => item.id === group.id) > -1;
     return res;
   });
   emits('change', hasCheckedGroups);
@@ -235,7 +234,7 @@ const handleSelectVersion = (versions: number[]) => {
   } else {
     // 选择部分
     versions.forEach((id) => {
-      const version = props.versionList.find((item) => item.id === id);
+      const version = props.versionList.find(item => item.id === id);
       if (version) {
         selectedVersion.push(version);
       }
@@ -243,8 +242,8 @@ const handleSelectVersion = (versions: number[]) => {
   }
   selectedVersion.forEach((version) => {
     version.status.released_groups.forEach((releaseItem) => {
-      if (!list.find((item) => releaseItem.id === item.id)) {
-        const group = allGroupNode.value.find((groupItem) => groupItem.id === releaseItem.id);
+      if (!list.find(item => releaseItem.id === item.id)) {
+        const group = allGroupNode.value.find(groupItem => groupItem.id === releaseItem.id);
         if (group) {
           list.push(group);
         }
@@ -259,21 +258,21 @@ const handleNodeCheckChange = (node: IGroupNodeData | ITreeParentNodeData, check
   const list = props.value.slice();
   if (Object.prototype.hasOwnProperty.call(node, 'parent')) {
     // 分类节点
-    const treeParentNode = treeData.value.find((parentNode) => parentNode.node_id === node.node_id);
+    const treeParentNode = treeData.value.find(parentNode => parentNode.node_id === node.node_id);
     if (treeParentNode) {
       if (checked) {
         treeParentNode.children
-          .filter((group) => !group.disabled)
+          .filter(group => !group.disabled)
           .forEach((group) => {
-            if (!list.find((item) => item.id === group.id)) {
+            if (!list.find(item => item.id === group.id)) {
               list.push(group);
             }
           });
       } else {
         treeParentNode.children
-          .filter((group) => !group.disabled)
+          .filter(group => !group.disabled)
           .forEach((group) => {
-            const index = list.findIndex((item) => item.id === group.id);
+            const index = list.findIndex(item => item.id === group.id);
             if (index > -1) {
               list.splice(index, 1);
             }
@@ -282,12 +281,12 @@ const handleNodeCheckChange = (node: IGroupNodeData | ITreeParentNodeData, check
     }
   } else {
     // 叶子节点
-    const group = props.groupList.find((group) => group.id === (node as IGroupNodeData).id);
+    const group = props.groupList.find(group => group.id === (node as IGroupNodeData).id);
     if (group) {
       if (checked) {
         list.push(group);
       } else {
-        const index = list.findIndex((item) => item.id === group.id);
+        const index = list.findIndex(item => item.id === group.id);
         list.splice(index, 1);
       }
     }
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue
index 42f26d9b51..4a1b89cde7 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/components/version-diff/aside-menu/configs.vue
@@ -133,7 +133,7 @@ const props = withDefaults(
   {
     unNamedVersionVariables: () => [],
     selectedConfig: () => ({ pkgId: 0, id: 0, version: 0 }),
-  }
+  },
 );
 
 const emits = defineEmits(['selected']);
@@ -168,7 +168,7 @@ watch(
     groupedConfigListOnShow.value = aggregatedList.value.slice();
     setDefaultSelected();
     isOnlyShowDiff.value && handleSearch();
-  }
+  },
 );
 
 // 当前版本默认选中的配置文件
@@ -181,7 +181,7 @@ watch(
   },
   {
     immediate: true,
-  }
+  },
 );
 
 watch(
@@ -209,7 +209,7 @@ watch(
         current: { content: '', variables: '' },
       });
     }
-  }
+  },
 );
 
 onMounted(async () => {
@@ -416,7 +416,7 @@ const calcDiff = () => {
   // 计算当前版本删除项
   baseGroupList.value.forEach((baseGroupItem) => {
     const { template_space_id, id, name, expand, configs } = baseGroupItem;
-    const groupIndex = list.findIndex((item) => item.id === baseGroupItem.id);
+    const groupIndex = list.findIndex(item => item.id === baseGroupItem.id);
     const diffGroup: IDiffGroupData =
       groupIndex > -1 ? list[groupIndex] : { template_space_id, id, name, expand, configs: [] };
 
@@ -458,13 +458,13 @@ const calcDiff = () => {
 // 否则取第一个非空分组的第一个配置文件
 const setDefaultSelected = () => {
   if (props.selectedConfig.id) {
-    const pkg = aggregatedList.value.find((group) => group.id === props.selectedConfig.pkgId);
+    const pkg = aggregatedList.value.find(group => group.id === props.selectedConfig.pkgId);
     if (pkg) {
       pkg.expand = true;
     }
     handleSelectItem(props.selectedConfig);
   } else {
-    const group = aggregatedList.value.find((group) => group.configs.length > 0);
+    const group = aggregatedList.value.find(group => group.configs.length > 0);
     if (group) {
       handleSelectItem({ pkgId: group.id, id: group.configs[0].id, version: group.configs[0].template_revision_id });
     }
@@ -508,7 +508,7 @@ const getItemSelectedStatus = (pkgId: number, config: IConfigDiffItem) => {
 
 // 选择对比配置文件后，加载配置文件详情，组装对比数据
 const handleSelectItem = async (selectedConfig: IConfigDiffSelected) => {
-  const pkg = aggregatedList.value.find((item) => item.id === selectedConfig.pkgId);
+  const pkg = aggregatedList.value.find(item => item.id === selectedConfig.pkgId);
   if (pkg) {
     const config = pkg.configs.find((item) => {
       const res = item.id === selectedConfig.id && item.template_revision_id === selectedConfig.version;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue
index e93b2c6d3b..4f61030e5c 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue
@@ -112,7 +112,7 @@ watch(
   () => versionData.value.id,
   () => {
     getListData();
-  }
+  },
 );
 
 // 是否为未命名版本
@@ -197,13 +197,12 @@ const transListToTableData = () => {
 };
 
 // 将非模板配置文件数据转为表格数据
-const transConfigsToTableItemData = (list: IConfigItem[]) =>
-  list.map((item: IConfigItem) => {
-    const { id, spec, revision, file_state } = item;
-    const { name, file_type, path } = spec;
-    const { creator, reviser, update_at } = revision;
-    return { id, name, versionId: 0, versionName: '--', path, creator, reviser, update_at, file_type, file_state };
-  });
+const transConfigsToTableItemData = (list: IConfigItem[]) => list.map((item: IConfigItem) => {
+  const { id, spec, revision, file_state } = item;
+  const { name, file_type, path } = spec;
+  const { creator, reviser, update_at } = revision;
+  return { id, name, versionId: 0, versionName: '--', path, creator, reviser, update_at, file_type, file_state };
+});
 
 // 将模板按套餐分组，并将模板数据格式转为表格数据
 const groupTplsByPkg = (list: IBoundTemplateGroup[]) => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/pkg-templates-table.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/pkg-templates-table.vue
index 1191371cda..9fc95be75c 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/pkg-templates-table.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/pkg-templates-table.vue
@@ -94,7 +94,7 @@ const props = withDefaults(
   }>(),
   {
     conflictTpls: () => [],
-  }
+  },
 );
 
 const emits = defineEmits(['delete', 'expand', 'selectVersion', 'updateVersions']);
@@ -106,15 +106,13 @@ const templateSpaceId = ref(0);
 const expand = ref(true);
 
 onMounted(async () => {
-  props.pkgList.some((templateSpace) =>
-    templateSpace.template_sets.some((pkg) => {
-      if (pkg.template_set_id === props.pkgId) {
-        title.value = `${templateSpace.template_space_name} - ${pkg.template_set_name}`;
-        templateSpaceId.value = templateSpace.template_space_id;
-      }
-      return undefined;
-    })
-  );
+  props.pkgList.some(templateSpace => templateSpace.template_sets.some((pkg) => {
+    if (pkg.template_set_id === props.pkgId) {
+      title.value = `${templateSpace.template_space_name} - ${pkg.template_set_name}`;
+      templateSpaceId.value = templateSpace.template_space_id;
+    }
+    return undefined;
+  }));
   await getTemplateList();
   setTemplatesDefaultVersion();
 });
@@ -128,13 +126,13 @@ const getTemplateList = async () => {
     all: true,
   });
   configTemplateList.value = templateListRes.details.map((item: ITemplateConfigItem) => ({ ...item, versions: [] }));
-  const ids = configTemplateList.value.map((item) => item.id);
+  const ids = configTemplateList.value.map(item => item.id);
   if (ids.length > 0) {
     // 再根据模板列表取对应模板的版本列表
     const versionListRes = await getTemplateVersionsNameByIds(props.bkBizId, ids);
     versionListRes.details.forEach((item: ITemplateVersionsName) => {
       const { template_id, latest_template_revision_id, template_revisions } = item;
-      const configTemplate = configTemplateList.value.find((tpl) => tpl.id === template_id);
+      const configTemplate = configTemplateList.value.find(tpl => tpl.id === template_id);
       if (configTemplate) {
         configTemplate.versions = template_revisions.map((version) => {
           const { template_revision_id, template_revision_name, template_revision_memo } = version;
@@ -167,8 +165,8 @@ const getTemplateList = async () => {
 const setTemplatesDefaultVersion = () => {
   const selectedTplVersionsData = props.selectedVersions.slice();
   configTemplateList.value.forEach((tpl) => {
-    if (!props.selectedVersions.find((item) => item.template_id === tpl.id)) {
-      const lasteVersion = tpl.versions.find((v) => v.isLatest);
+    if (!props.selectedVersions.find(item => item.template_id === tpl.id)) {
+      const lasteVersion = tpl.versions.find(v => v.isLatest);
       if (lasteVersion) {
         selectedTplVersionsData.push({
           template_id: tpl.id,
@@ -184,7 +182,7 @@ const setTemplatesDefaultVersion = () => {
 };
 
 const getVersionSelectVal = (id: number) => {
-  const version = props.selectedVersions.find((item) => item.template_id === id);
+  const version = props.selectedVersions.find(item => item.template_id === id);
   if (version) {
     return version.is_latest ? 0 : version.template_revision_id;
   }
@@ -201,10 +199,10 @@ const handleToggleExpand = () => {
 const handleSelectVersion = (
   tplId: number,
   versions: { id: number; name: string; isLatest: boolean }[],
-  val: number
+  val: number,
 ) => {
   const isLatest = val === 0;
-  const versionId = isLatest ? versions.find((item) => item.isLatest)?.id : val;
+  const versionId = isLatest ? versions.find(item => item.isLatest)?.id : val;
   const versionData = {
     template_id: tplId,
     template_revision_id: versionId,
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config.vue
index 660e17ae4c..da581a79cf 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/edit-config.vue
@@ -76,7 +76,7 @@ watch(
       isFormChange.value = false;
       getConfigDetail();
     }
-  }
+  },
 );
 
 // 获取配置文件详情配置及配置内容
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-pagination.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-pagination.vue
index a56a952a37..4b69d11778 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-pagination.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-pagination.vue
@@ -114,14 +114,14 @@ watch(
   () => versionData.value.id,
   () => {
     getListData();
-  }
+  },
 );
 
 watch(
   () => props.searchStr,
   () => {
     refresh();
-  }
+  },
 );
 
 onMounted(() => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
index 13b1ddda0f..57ee684388 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
@@ -306,7 +306,7 @@ watch(
   async () => {
     await getBindingId();
     getAllConfigList();
-  }
+  },
 );
 
 watch(
@@ -314,7 +314,7 @@ watch(
   () => {
     props.searchStr ? (isSearchEmpty.value = true) : (isSearchEmpty.value = false);
     getAllConfigList();
-  }
+  },
 );
 
 watch([() => configsCount.value, () => templatesCount.value], () => {
@@ -392,7 +392,7 @@ const getBoundTemplateList = async () => {
     templateGroupList.value = res.details;
     templatesCount.value = res.details.reduce(
       (acc: number, crt: IBoundTemplateGroup) => acc + crt.template_revisions.length,
-      0
+      0,
     );
   } catch (e) {
     console.error(e);
@@ -410,24 +410,23 @@ const transListToTableData = () => {
 };
 
 // 将非模板配置文件数据转为表格数据
-const transConfigsToTableItemData = (list: IConfigItem[]) =>
-  list.map((item: IConfigItem) => {
-    const { id, spec, revision, file_state } = item;
-    const { name, path, permission } = spec;
-    const { creator, reviser, update_at } = revision;
-    return {
-      id,
-      name,
-      versionId: 0,
-      versionName: '--',
-      path,
-      creator,
-      reviser,
-      update_at: datetimeFormat(update_at),
-      file_state,
-      permission,
-    };
-  });
+const transConfigsToTableItemData = (list: IConfigItem[]) => list.map((item: IConfigItem) => {
+  const { id, spec, revision, file_state } = item;
+  const { name, path, permission } = spec;
+  const { creator, reviser, update_at } = revision;
+  return {
+    id,
+    name,
+    versionId: 0,
+    versionName: '--',
+    path,
+    creator,
+    reviser,
+    update_at: datetimeFormat(update_at),
+    file_state,
+    permission,
+  };
+});
 
 // 将模板按套餐分组，并将模板数据格式转为表格数据
 const groupTplsByPkg = (list: IBoundTemplateGroup[]) => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/variables-table.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/variables-table.vue
index a7e0185614..5afd49ff00 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/variables-table.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/variables/variables-table.vue
@@ -85,7 +85,7 @@ const props = withDefaults(
     citedList: () => [],
     editable: true,
     showCited: false,
-  }
+  },
 );
 
 const emits = defineEmits(['change']);
@@ -111,7 +111,7 @@ watch(
   (val) => {
     variables = cloneDeep(val).value();
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const isCellEditable = (prop: string) => props.editable && ['type', 'default_val', 'memo'].includes(prop);
@@ -126,8 +126,8 @@ const getCellVal = (variable: IVariableEditParams, prop: string) => {
 };
 
 const getCitedTpls = (name: string) => {
-  const detail = props.citedList.find((item) => item.variable_name === name);
-  return detail?.references.map((item) => item.name).join(',');
+  const detail = props.citedList.find(item => item.variable_name === name);
+  return detail?.references.map(item => item.name).join(',');
 };
 
 const deleteCellError = (name: string, key: string) => {
@@ -136,7 +136,7 @@ const deleteCellError = (name: string, key: string) => {
     if (errorDetails.value[name].length === 0) {
       delete errorDetails.value[name];
     } else {
-      errorDetails.value[name] = errorDetails.value[name].filter((item) => item !== key);
+      errorDetails.value[name] = errorDetails.value[name].filter(item => item !== key);
     }
   }
 };
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue
index 01d94d7a79..5878c050b7 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue
@@ -65,7 +65,7 @@ watch(
       getDetailData();
       variables.value = [];
     }
-  }
+  },
 );
 
 const getDetailData = async () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/version-list-aside/version-table-list.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/version-list-aside/version-table-list.vue
index a373617b9c..d5e1d429c9 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/version-list-aside/version-table-list.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/version-list-aside/version-table-list.vue
@@ -168,8 +168,7 @@ const getRowCls = (data: IConfigVersion) => {
   return '';
 };
 
-const getGroupNames = (data: IConfigVersion) =>
-  data.status?.released_groups.length ? data.status.released_groups.map((item) => item.name).join('; ') : '--';
+const getGroupNames = (data: IConfigVersion) => (data.status?.released_groups.length ? data.status.released_groups.map(item => item.name).join('; ') : '--');
 
 const handleTabChange = (tab: string) => {
   currentTab.value = tab;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/create-service.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/create-service.vue
index e05331e371..0dc07893a1 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/create-service.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/create-service.vue
@@ -103,7 +103,7 @@ watch(
       formData.value.name = '';
       formData.value.memo = '';
     }
-  }
+  },
 );
 
 const handleCreateConfirm = async () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/edit-service.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/edit-service.vue
index 42da5e2929..09a17eefb4 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/edit-service.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/edit-service.vue
@@ -78,7 +78,7 @@ const formRef = ref();
 const memoRef = ref();
 
 const spaceName = computed(() => {
-  const space = spaceList.value.find((item) => item.space_id === props.service.space_id);
+  const space = spaceList.value.find(item => item.space_id === props.service.space_id);
   return space?.space_name;
 });
 
@@ -102,7 +102,7 @@ watch(
     if (val) {
       formData.value.memo = props.service.spec.memo;
     }
-  }
+  },
 );
 
 const handleEditMemo = () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/service-list-content.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/service-list-content.vue
index 3f857da994..a43679cd11 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/service-list-content.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/service-list-content.vue
@@ -159,7 +159,7 @@ watch(
     searchStr.value = '';
     pagination.value.limit = 50;
     refreshSeviceList();
-  }
+  },
 );
 
 onMounted(() => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/list/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/list/index.vue
index 769cd6ec41..087b7d1d6d 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/list/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/list/index.vue
@@ -44,14 +44,14 @@ watch(
   () => route.name,
   (val) => {
     activeTabName.value = val as string;
-  }
+  },
 );
 
 watch(
   () => spaceId.value,
   () => {
     checkCreateServicePerm();
-  }
+  },
 );
 
 onMounted(() => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/apps-bound-by-template.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/apps-bound-by-template.vue
index fedbc8757a..e6c54b0154 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/apps-bound-by-template.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/apps-bound-by-template.vue
@@ -70,7 +70,7 @@ watch(
       searchStr.value = '';
       getList();
     }
-  }
+  },
 );
 
 const getList = async () => {
@@ -87,7 +87,7 @@ const getList = async () => {
     props.spaceId,
     props.currentTemplateSpace,
     props.config.id,
-    params
+    params,
   );
   appList.value = res.details;
   pagination.value.count = res.count;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue
index 33b78c4ad4..957d05c096 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/index.vue
@@ -105,7 +105,7 @@ watch(
       isFormChange.value = false;
       getGroupConfigs();
     }
-  }
+  },
 );
 
 // 加载全部配置文件
@@ -179,7 +179,7 @@ const handleToggleOpenTable = (id: string | number) => {
 };
 
 const handleDeleteConfig = (id: number) => {
-  const index = selectedConfigs.value.findIndex((item) => item.id === id);
+  const index = selectedConfigs.value.findIndex(item => item.id === id);
   if (index > -1) {
     selectedConfigs.value.splice(index, 1);
   }
@@ -188,7 +188,7 @@ const handleDeleteConfig = (id: number) => {
 const handleAddConfigs = async () => {
   try {
     pending.value = true;
-    const configIds = selectedConfigs.value.map((item) => item.id);
+    const configIds = selectedConfigs.value.map(item => item.id);
     await addTemplateToPackage(spaceId.value, currentTemplateSpace.value, configIds, [currentPkg.value as number]);
     emits('added');
     close();
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/package-table.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/package-table.vue
index 080adfc106..6f740c40b4 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/package-table.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/add-from-existing-configs/package-table.vue
@@ -69,7 +69,7 @@ const props = defineProps<{
 const emits = defineEmits(['toggleOpen', 'update:selectedConfigs', 'change']);
 
 const isAllSelected = computed(() => {
-  const res = props.configList.length > 0 && props.configList.every((item) => isConfigSelected(item.id));
+  const res = props.configList.length > 0 && props.configList.every(item => isConfigSelected(item.id));
   return res;
 });
 
@@ -78,20 +78,20 @@ const isIndeterminate = computed(() => {
   return res;
 });
 
-const isConfigSelected = (id: number) => props.selectedConfigs.findIndex((item) => item.id === id) > -1;
+const isConfigSelected = (id: number) => props.selectedConfigs.findIndex(item => item.id === id) > -1;
 
 const handleAllSelectionChange = (checked: boolean) => {
   const configs = props.selectedConfigs.slice();
   if (checked) {
     props.configList.forEach((config) => {
-      if (!configs.find((item) => item.id === config.id)) {
+      if (!configs.find(item => item.id === config.id)) {
         const { id, spec } = config;
         configs.push({ id, name: spec.name });
       }
     });
   } else {
     props.configList.forEach((config) => {
-      const index = configs.findIndex((item) => item.id === config.id);
+      const index = configs.findIndex(item => item.id === config.id);
       if (index > -1) {
         configs.splice(index, 1);
       }
@@ -104,12 +104,12 @@ const handleAllSelectionChange = (checked: boolean) => {
 const handleConfigSelectionChange = (checked: boolean, config: ITemplateConfigItem) => {
   const configs = props.selectedConfigs.slice();
   if (checked) {
-    if (!configs.find((item) => item.id === config.id)) {
+    if (!configs.find(item => item.id === config.id)) {
       const { id, spec } = config;
       configs.push({ id, name: spec.name });
     }
   } else {
-    const index = configs.findIndex((item) => item.id === config.id);
+    const index = configs.findIndex(item => item.id === config.id);
     if (index > -1) {
       configs.splice(index, 1);
     }
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue
index c5849805fc..609c1cb069 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/index.vue
@@ -71,7 +71,7 @@ watch(
       configForm.value = getConfigEditParams();
       isFormChanged.value = false;
     }
-  }
+  },
 );
 
 const handleFormChange = (data: IConfigEditParams, configContent: IFileConfigContentSummary | string) => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/select-package.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/select-package.vue
index ea670d0347..cec3fc8074 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/select-package.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/create-new-config/select-package.vue
@@ -40,7 +40,7 @@
         <bk-table-column label="模板套餐" prop="template_set_name"></bk-table-column>
         <bk-table-column label="使用此套餐的服务">
           <template #default="{ row }">
-            <div v-if="row.app_id" class="app-info">
+            <div v-if="row.app_id" class="app-info" @click="goToConfigPageImport(row.app_id)">
               <div v-overflow-title class="name-text">{{ row.app_name }}</div>
               <LinkToApp class="link-icon" :id="row.app_id" />
             </div>
@@ -52,6 +52,7 @@
 </template>
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { Done } from 'bkui-vue/lib/icon';
 import useGlobalStore from '../../../../../../../../store/global';
@@ -72,16 +73,16 @@ const props = defineProps<{
 
 const emits = defineEmits(['update:show', 'confirm']);
 
+const router = useRouter();
+
 const selectedPkgs = ref<number[]>([]);
 const formRef = ref();
 const loading = ref(false);
 const citedList = ref<IPackagesCitedByApps[]>([]);
 
-const tips = computed(() =>
-  selectedPkgs.value.includes(0)
-    ? '若未指定套餐，此配置文件模板将无法被服务引用。后续请使用「添加至」或「添加已有配置文件」功能添加至指定套餐'
-    : '以下服务配置的未命名版本引用目标套餐的内容也将更新'
-);
+const tips = computed(() => (selectedPkgs.value.includes(0)
+  ? '若未指定套餐，此配置文件模板将无法被服务引用。后续请使用「添加至」或「添加已有配置文件」功能添加至指定套餐'
+  : '以下服务配置的未命名版本引用目标套餐的内容也将更新'));
 
 const maxTableHeight = computed(() => {
   const windowHeight = window.innerHeight;
@@ -100,7 +101,7 @@ watch(
         getCitedData();
       }
     }
-  }
+  },
 );
 
 const allOptions = computed(() => {
@@ -123,7 +124,7 @@ const getCitedData = async () => {
     spaceId.value,
     currentTemplateSpace.value,
     selectedPkgs.value,
-    params
+    params,
   );
   citedList.value = res.details;
   loading.value = false;
@@ -137,7 +138,7 @@ const handleSelectPkg = (val: number[]) => {
   }
 
   if (unSpecifiedSelected.value) {
-    selectedPkgs.value = val.filter((id) => id !== 0);
+    selectedPkgs.value = val.filter(id => id !== 0);
   } else {
     selectedPkgs.value = val.slice();
   }
@@ -162,6 +163,15 @@ const handleConfirm = async () => {
 const close = () => {
   emits('update:show', false);
 };
+
+const goToConfigPageImport = (id: number) => {
+  const { href } = router.resolve({
+    name: 'service-config',
+    params: { appId: id },
+    query: { pkg_id: currentTemplateSpace.value },
+  });
+  window.open(href, '_blank');
+};
 </script>
 <style lang="scss" scoped>
 .header-wrapper {
@@ -218,6 +228,7 @@ const close = () => {
   display: flex;
   align-items: center;
   overflow: hidden;
+  cursor: pointer;
   .name-text {
     overflow: hidden;
     white-space: nowrap;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/index.vue
index 8d4c483a4d..68f51f9f38 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-configs/import-configs/index.vue
@@ -43,7 +43,7 @@ watch(
   (val) => {
     isShow.value = val;
     isFormChange.value = false;
-  }
+  },
 );
 
 const handleFileUpload = () => {};
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue
index 290d211b45..54bd1d7e3b 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/add-to-pkgs/add-to-dialog.vue
@@ -32,7 +32,7 @@
         <bk-table-column label="目标模板套餐" prop="template_set_name"></bk-table-column>
         <bk-table-column label="使用此套餐的服务">
           <template #default="{ row }">
-            <div v-if="row.app_id" class="app-info">
+            <div v-if="row.app_id" class="app-info" @click="goToConfigPageImport(row.app_id)">
               <div v-overflow-title class="name-text">{{ row.app_name }}</div>
               <LinkToApp class="link-icon" :id="row.app_id" />
             </div>
@@ -44,6 +44,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, computed, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { Message } from 'bkui-vue';
 import { ITemplateConfigItem, IPackagesCitedByApps } from '../../../../../../../../types/template';
@@ -62,13 +63,15 @@ const props = defineProps<{
 
 const emits = defineEmits(['update:show', 'added']);
 
+const router = useRouter();
+
 const formRef = ref();
 const selectedPkgs = ref<number[]>([]);
 const loading = ref(false);
 const citedList = ref<IPackagesCitedByApps[]>([]);
 const pending = ref(false);
 
-const allPackages = computed(() => packageList.value.filter((pkg) => pkg.id !== currentPkg.value));
+const allPackages = computed(() => packageList.value.filter(pkg => pkg.id !== currentPkg.value));
 
 const isMultiple = computed(() => props.value.length > 1);
 
@@ -85,9 +88,18 @@ watch(
       citedList.value = [];
       pending.value = false;
     }
-  }
+  },
 );
 
+const goToConfigPageImport = (id: number) => {
+  const { href } = router.resolve({
+    name: 'service-config',
+    params: { appId: id },
+    query: { pkg_id: currentTemplateSpace.value },
+  });
+  window.open(href, '_blank');
+};
+
 const getCitedData = async () => {
   loading.value = true;
   const params = {
@@ -98,7 +110,7 @@ const getCitedData = async () => {
     spaceId.value,
     currentTemplateSpace.value,
     selectedPkgs.value,
-    params
+    params,
   );
   citedList.value = res.details;
   loading.value = false;
@@ -118,7 +130,7 @@ const handleConfirm = async () => {
 
   try {
     pending.value = true;
-    const templateIds = props.value.map((item) => item.id);
+    const templateIds = props.value.map(item => item.id);
     await addTemplateToPackage(spaceId.value, currentTemplateSpace.value, templateIds, selectedPkgs.value);
     emits('added');
     close();
@@ -182,6 +194,7 @@ const close = () => {
   display: flex;
   align-items: center;
   overflow: hidden;
+  cursor: pointer;
   .name-text {
     overflow: hidden;
     white-space: nowrap;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue
index 52bac36904..696731f8ab 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/delete-configs/delete-config-dialog.vue
@@ -56,7 +56,7 @@ const pending = ref(false);
 const handleConfirm = async () => {
   try {
     pending.value = true;
-    const ids = props.configs.map((config) => config.id);
+    const ids = props.configs.map(config => config.id);
     await deleteTemplate(spaceId.value, currentTemplateSpace.value, ids);
     close();
     emits('deleted');
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/edit-config/edit-config.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/edit-config/edit-config.vue
index 1930be0bab..b8d8b51330 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/edit-config/edit-config.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/edit-config/edit-config.vue
@@ -26,7 +26,7 @@ watch(
   (val) => {
     isShow.value = val;
     isFormChange.value = false;
-  }
+  },
 );
 
 const handleBeforeClose = async () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue
index 78344bede9..e2682181b5 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/batch-move-out-from-pkg-dialog.vue
@@ -20,7 +20,7 @@
         <bk-table-column label="所在模板套餐" prop="template_set_name"></bk-table-column>
         <bk-table-column label="使用此套餐的服务">
           <template #default="{ row }">
-            <div v-if="row.app_id" class="app-info">
+            <div v-if="row.app_id" class="app-info" @click="goToConfigPageImport(row.app_id)">
               <div v-overflow-title class="name-text">{{ row.app_name }}</div>
               <LinkToApp class="link-icon" :id="row.app_id" />
             </div>
@@ -32,6 +32,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, computed, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { Message } from 'bkui-vue';
 import useGlobalStore from '../../../../../../../store/global';
@@ -51,6 +52,8 @@ const props = defineProps<{
 
 const emits = defineEmits(['update:show', 'movedOut']);
 
+const router = useRouter();
+
 const loading = ref(false);
 const citedList = ref<IPackagesCitedByApps[]>([]);
 const pending = ref(false);
@@ -64,9 +67,18 @@ watch(
   () => props.show,
   () => {
     getCitedData();
-  }
+  },
 );
 
+const goToConfigPageImport = (id: number) => {
+  const { href } = router.resolve({
+    name: 'service-config',
+    params: { appId: id },
+    query: { pkg_id: currentTemplateSpace.value },
+  });
+  window.open(href, '_blank');
+};
+
 const getCitedData = async () => {
   loading.value = true;
   const params = {
@@ -77,19 +89,19 @@ const getCitedData = async () => {
     spaceId.value,
     currentTemplateSpace.value,
     [props.currentPkg],
-    params
+    params,
   );
   citedList.value = res.details;
   loading.value = false;
 };
 
 const handleConfirm = async () => {
-  const pkg = packageList.value.find((item) => item.id === currentPkg.value);
+  const pkg = packageList.value.find(item => item.id === currentPkg.value);
   if (!pkg) return;
 
   try {
     pending.value = true;
-    const ids = props.value.map((item) => item.id);
+    const ids = props.value.map(item => item.id);
     await moveOutTemplateFromPackage(spaceId.value, currentTemplateSpace.value, ids, [currentPkg.value as number]);
     emits('movedOut');
     close();
@@ -127,6 +139,7 @@ const close = () => {
   display: flex;
   align-items: center;
   overflow: hidden;
+  cursor: pointer;
   .name-text {
     overflow: hidden;
     white-space: nowrap;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue
index 5a5eca9916..5762b69c30 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/move-out-from-pkg/move-out-from-pkgs-dialog.vue
@@ -94,14 +94,14 @@ watch(
       selectedPkgs.value = [];
       getCitedData();
     }
-  }
+  },
 );
 
 const getCitedData = async () => {
   loading.value = true;
   const citedPkgsRes = await getPackagesByTemplateIds(spaceId.value, currentTemplateSpace.value, [props.id]);
   if (citedPkgsRes.details.length === 1) {
-    const pkgs = citedPkgsRes.details[0].map((item) => item.template_set_id);
+    const pkgs = citedPkgsRes.details[0].map(item => item.template_set_id);
     const params = {
       start: 0,
       all: true,
@@ -111,7 +111,7 @@ const getCitedData = async () => {
       spaceId.value,
       currentTemplateSpace.value,
       pkgs,
-      params
+      params,
     );
     citedPkgsRes.details[0].forEach((item) => {
       const { template_set_id, template_set_name } = item;
@@ -126,7 +126,7 @@ const getCitedData = async () => {
         appNames,
       });
     });
-    const index = list.findIndex((item) => item.id === props.currentPkg);
+    const index = list.findIndex(item => item.id === props.currentPkg);
     const currentPkgData = list.splice(index, 1);
     list = currentPkgData.concat(list);
     citedList.value = list;
@@ -149,7 +149,7 @@ const getSelectionStatus = ({ row }: { row: ICitedItem }) => {
 const handleSelectionChange = ({ checked, isAll, row }: { checked: boolean; isAll: boolean; row: ICitedItem }) => {
   if (isAll) {
     if (checked) {
-      selectedPkgs.value = citedList.value.map((item) => item.id);
+      selectedPkgs.value = citedList.value.map(item => item.id);
     } else {
       selectedPkgs.value = [];
     }
@@ -159,7 +159,7 @@ const handleSelectionChange = ({ checked, isAll, row }: { checked: boolean; isAl
         selectedPkgs.value.push(row.id);
       }
     } else {
-      const index = selectedPkgs.value.findIndex((id) => id === row.id);
+      const index = selectedPkgs.value.findIndex(id => id === row.id);
       if (index > -1) {
         selectedPkgs.value.splice(index, 1);
       }
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue
index 1da767b35d..56cfd675a9 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue
@@ -191,7 +191,7 @@ watch(
   () => {
     searchStr.value = '';
     loadConfigList();
-  }
+  },
 );
 
 onMounted(() => {
@@ -212,7 +212,7 @@ const loadConfigList = async () => {
   list.value = res.details;
   pagination.value.count = res.count;
   listLoading.value = false;
-  const ids = list.value.map((item) => item.id);
+  const ids = list.value.map(item => item.id);
   citeByPkgsList.value = [];
   boundByAppsCountList.value = [];
   if (ids.length > 0) {
@@ -273,13 +273,13 @@ const handleSelectionChange = ({
   if (isAll) {
     if (checked) {
       list.value.forEach((config) => {
-        if (!configs.find((item) => item.id === config.id)) {
+        if (!configs.find(item => item.id === config.id)) {
           configs.push(config);
         }
       });
     } else {
       list.value.forEach((config) => {
-        const index = configs.findIndex((item) => item.id === config.id);
+        const index = configs.findIndex(item => item.id === config.id);
         if (index > -1) {
           configs.splice(index, 1);
         }
@@ -287,11 +287,11 @@ const handleSelectionChange = ({
     }
   } else {
     if (checked) {
-      if (!configs.find((item) => item.id === row.id)) {
+      if (!configs.find(item => item.id === row.id)) {
         configs.push(row);
       }
     } else {
-      const index = configs.findIndex((item) => item.id === row.id);
+      const index = configs.findIndex(item => item.id === row.id);
       if (index > -1) {
         configs.splice(index, 1);
       }
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/use-package-apps.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/use-package-apps.vue
index 4e181f3976..77a4e59aba 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/use-package-apps.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/use-package-apps.vue
@@ -8,9 +8,9 @@
         </div>
       </template>
       <bk-option v-for="app in unBoundApps" :key="app.id" :id="app.id" :label="app.spec.name">
-        <div class="app-option" @click.stop>
+        <div class="app-option" @click="goToConfigPageImport(app.id as number)">
           <div class="name-text">{{ app.spec.name }}</div>
-          <LinkToApp class="link-icon" :id="app.id as number" @custom-click="goToConfigPageImport(app.id as number)" />
+          <LinkToApp class="link-icon" :id="app.id as number"  />
         </div>
       </bk-option>
     </bk-select>
@@ -18,9 +18,9 @@
       <bk-table :border="['outer']" :data="boundApps">
         <bk-table-column label="当前使用此套餐的服务">
           <template #default="{ row }">
-            <div v-if="row.app_id" class="app-info">
+            <div v-if="row.app_id" class="app-info" @click="goToConfigPageImport(row.app_id)">
               <div v-overflow-title class="name-text">{{ row.app_name }}</div>
-              <LinkToApp class="link-icon" :id="row.app_id" @custom-click="goToConfigPageImport(row.app_id)" />
+              <LinkToApp class="link-icon" :id="row.app_id" />
             </div>
           </template>
         </bk-table-column>
@@ -145,6 +145,7 @@ const goToConfigPageImport = (id: number) => {
   display: flex;
   align-items: center;
   overflow: hidden;
+  cursor: pointer;
 }
 .table-wrapper {
   margin-top: 16px;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-menu/menu.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-menu/menu.vue
index e6a67bcf69..001bc1ae34 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-menu/menu.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-menu/menu.vue
@@ -135,7 +135,7 @@ watch(
     if (val) {
       getMenuInitData();
     }
-  }
+  },
 );
 
 watch(
@@ -147,7 +147,7 @@ watch(
         state.needRefreshMenuFlag = false;
       });
     }
-  }
+  },
 );
 
 onMounted(() => {
@@ -218,7 +218,7 @@ const handleSearch = () => {
   let result: ITemplatePackageItem[] = [];
   searchStr.value ? (isSearchEmpty.value = true) : (isSearchEmpty.value = false);
   if (searchStr.value) {
-    result = packages.value.filter((item) => item.spec.name.toLowerCase().includes(searchStr.value.toLowerCase()));
+    result = packages.value.filter(item => item.spec.name.toLowerCase().includes(searchStr.value.toLowerCase()));
   } else {
     result = packages.value.slice();
   }
@@ -229,7 +229,7 @@ const handleSearch = () => {
 };
 
 const handlePkgAction = (id: number, type: string) => {
-  const pkg = packages.value.find((item) => item.id === id);
+  const pkg = packages.value.find(item => item.id === id);
   if (pkg) {
     if (type === 'edit') {
       editingPkgData.value = {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-menu/package-delete.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-menu/package-delete.vue
index ab938e84c4..32a5a4b8ed 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-menu/package-delete.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-menu/package-delete.vue
@@ -16,8 +16,8 @@
         <bk-table :data="appList" :max-height="maxTableHeight" empty-text="暂无未命名版本引用此套餐">
           <bk-table-column label="引用此套餐的服务">
             <template #default="{ row }">
-              <div class="app-info">
-                <div v-overflow-title class="name-text">{{ row.app_name }}</div>
+              <div class="app-info" @click="goToConfigPageImport(row.app_id)">
+                <div v-overflow-title class="name-text" >{{ row.app_name }}</div>
                 <LinkToApp class="link-icon" :id="row.app_id" :auto-jump="true" />
               </div>
             </template>
@@ -35,14 +35,17 @@
 </template>
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { Message } from 'bkui-vue/lib';
 import useGlobalStore from '../../../../../store/global';
 import { getUnNamedVersionAppsBoundByPackage, deleteTemplatePackage } from '../../../../../api/template';
 import { ITemplatePackageItem, IPackageCitedByApps } from '../../../../../../types/template';
+import useTemplateStore from '../../../../../store/template';
 import LinkToApp from '../components/link-to-app.vue';
 
 const { spaceId } = storeToRefs(useGlobalStore());
+const { currentTemplateSpace } = storeToRefs(useTemplateStore());
 
 const props = defineProps<{
   show: boolean;
@@ -52,6 +55,8 @@ const props = defineProps<{
 
 const emits = defineEmits(['update:show', 'deleted']);
 
+const router = useRouter();
+
 const isShow = ref(false);
 const appsLoading = ref(false);
 const appList = ref<IPackageCitedByApps[]>([]);
@@ -69,9 +74,18 @@ watch(
     if (val) {
       getRelatedApps();
     }
-  }
+  },
 );
 
+const goToConfigPageImport = (id: number) => {
+  const { href } = router.resolve({
+    name: 'service-config',
+    params: { appId: id },
+    query: { pkg_id: currentTemplateSpace.value },
+  });
+  window.open(href, '_blank');
+};
+
 const getRelatedApps = async () => {
   appsLoading.value = true;
   const params = {
@@ -111,6 +125,7 @@ const close = () => {
   display: flex;
   align-items: center;
   overflow: hidden;
+  cursor: pointer;
   .name-text {
     overflow: hidden;
     white-space: nowrap;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/space/selector.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/space/selector.vue
index aee30890bf..6689a355ff 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/list/space/selector.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/list/space/selector.vue
@@ -73,7 +73,7 @@ const editingData = ref({
 });
 
 const templateSpaceDetail = computed(() => {
-  const item = templateSpaceList.value.find((item) => item.id === currentTemplateSpace.value);
+  const item = templateSpaceList.value.find(item => item.id === currentTemplateSpace.value);
   if (item) {
     const { name, memo } = item.spec;
     return { name, memo };
@@ -85,7 +85,7 @@ watch(
   () => spaceId.value,
   () => {
     initData();
-  }
+  },
 );
 
 onMounted(() => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-bound-by-apps-detail.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-bound-by-apps-detail.vue
index 79aa78c687..8aeeacf8fc 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-bound-by-apps-detail.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-bound-by-apps-detail.vue
@@ -70,7 +70,7 @@ watch(
       searchStr.value = '';
       getList();
     }
-  }
+  },
 );
 
 const getList = async () => {
@@ -88,7 +88,7 @@ const getList = async () => {
     props.currentTemplateSpace,
     props.config.id,
     props.config.versionId,
-    params
+    params,
   );
   appList.value = res.details;
   pagination.value.count = res.count;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/create-version-confirm-dialog.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/create-version-confirm-dialog.vue
index 7bd174087d..68e3e2af95 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/create-version-confirm-dialog.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/create-version-confirm-dialog.vue
@@ -16,7 +16,7 @@
         <bk-table-column label="所在套餐" prop="template_set_name"></bk-table-column>
         <bk-table-column label="引用此模板的服务">
           <template #default="{ row }">
-            <div v-if="row.app_id" class="app-info">
+            <div v-if="row.app_id" class="app-info" @click="goToConfigPageImport(row.app_id)">
               <div v-overflow-title class="name-text">{{ row.app_name }}</div>
               <LinkToApp class="link-icon" :id="row.app_id" auto-jump />
             </div>
@@ -34,9 +34,14 @@
 </template>
 <script lang="ts" setup>
 import { ref, computed, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
 import { IPackagesCitedByApps } from '../../../../../../types/template';
 import { getUnNamedVersionAppsBoundByLatestTemplateVersion } from '../../../../../api/template';
 import LinkToApp from '../../list/components/link-to-app.vue';
+import useTemplateStore from '../../../../../store/template';
+
+const { currentTemplateSpace } = storeToRefs(useTemplateStore());
 
 const props = defineProps<{
   show: boolean;
@@ -49,6 +54,8 @@ const props = defineProps<{
 
 const emits = defineEmits(['update:show', 'confirm']);
 
+const router = useRouter();
+
 const loading = ref(false);
 const citedList = ref<IPackagesCitedByApps[]>([]);
 
@@ -63,9 +70,19 @@ watch(
     if (val) {
       getCitedData();
     }
-  }
+  },
 );
 
+const goToConfigPageImport = (id: number) => {
+  const { href } = router.resolve({
+    name: 'service-config',
+    params: { appId: id },
+    query: { pkg_id: currentTemplateSpace.value },
+  });
+  window.open(href, '_blank');
+};
+
+
 const getCitedData = async () => {
   loading.value = true;
   const params = {
@@ -76,7 +93,7 @@ const getCitedData = async () => {
     props.spaceId,
     props.templateSpaceId,
     props.templateId,
-    params
+    params,
   );
   citedList.value = res.details;
   loading.value = false;
@@ -95,6 +112,7 @@ defineExpose({
   display: flex;
   align-items: center;
   overflow: hidden;
+  cursor: pointer;
   .name-text {
     overflow: hidden;
     white-space: nowrap;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue b/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue
index 269125211b..540260635a 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue
@@ -159,7 +159,7 @@ watch(
   (val) => {
     formData.value = { ...val };
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 watch(
@@ -169,7 +169,7 @@ watch(
       getContent();
       getBoundCount();
     }
-  }
+  },
 );
 
 onMounted(() => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/variables/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/variables/index.vue
index 604823af1d..4143c6eb19 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/variables/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/variables/index.vue
@@ -6,7 +6,7 @@
     <div class="operation-area">
       <div class="button">
         <bk-button theme="primary" @click="isCreateSliderShow = true"><Plus class="button-icon" />新增变量</bk-button>
-        <bk-button theme="primary" @click="isImportVariableShow = true">导入变量</bk-button>
+        <bk-button @click="isImportVariableShow = true">导入变量</bk-button>
       </div>
       <SearchInput v-model="searchStr" placeholder="请输入变量名称" :width="320" @search="refreshList()" />
     </div>
@@ -96,7 +96,7 @@ watch(
   () => spaceId.value,
   () => {
     refreshList();
-  }
+  },
 );
 
 onMounted(() => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/variables/separator-select.vue b/bcs-services/bcs-bscp/ui/src/views/space/variables/separator-select.vue
index 22e5ab7f98..1bdc04d256 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/variables/separator-select.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/variables/separator-select.vue
@@ -86,8 +86,6 @@ const handleConfirm = async () => {
       width: 52px;
       height: 26px;
       border: 1px solid #8e8e8e;
-      border-radius: 2px 0 0 2px;
-      border-radius: 2px 0 0 2px;
       color: #e0e0e0;
       text-align: center;
       line-height: 26px;
@@ -97,7 +95,14 @@ const handleConfirm = async () => {
         color: #488eff;
         border-color: #488eff;
       }
+      &:nth-child(1) {
+        border-radius: 2px 0 0 2px;
+      }
+      &:nth-child(5) {
+        border-radius: 0 2px 2px 0;
+      }
     }
+
     .select-item {
       color: #488eff;
       border-color: #488eff;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/variables/variable-edit.vue b/bcs-services/bcs-bscp/ui/src/views/space/variables/variable-edit.vue
index e2b79afeba..b885db8c56 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/variables/variable-edit.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/variables/variable-edit.vue
@@ -55,7 +55,7 @@ watch(
       prefix.value = currentPrefix;
       variableConfig.value = { ...props.data, name };
     }
-  }
+  },
 );
 
 const handleFormChange = (val: IVariableEditParams, localPrefix: string) => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/variables/variable-import.vue b/bcs-services/bcs-bscp/ui/src/views/space/variables/variable-import.vue
index 5cbd50b8ad..a918ffc77a 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/variables/variable-import.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/variables/variable-import.vue
@@ -31,7 +31,7 @@ watch(
   () => props.show,
   (val) => {
     isShow.value = val;
-  }
+  },
 );
 onMounted(() => {});
 const handleClose = () => {
diff --git a/bcs-services/bcs-bscp/ui/types/credential.ts b/bcs-services/bcs-bscp/ui/types/credential.ts
index 88c091fc53..ab268204c8 100644
--- a/bcs-services/bcs-bscp/ui/types/credential.ts
+++ b/bcs-services/bcs-bscp/ui/types/credential.ts
@@ -46,6 +46,7 @@ export interface IRuleEditing {
   type: string;
   content: string;
   original: string;
+  isRight: boolean;
 }
 
 // 调用关联规则更新接口参数