feat: 新版资源导入 (#766)

* fix: 体验问题修复 * feat: 修复前端问题 # Reviewed, transaction id: 5084 * feat: 修复前端问题 # Reviewed, transaction id: 5102 * feat: 修复前端问题 # Reviewed, transaction id: 5117 * feat: 修复前端问题 # Reviewed, transaction id: 5195 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 5205 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 5206 * feat: 修复前端问题 # Reviewed, transaction id: 5227 * fix: 修复体验问题 * feat: 修复前端问题 # Reviewed, transaction id: 5345 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 5346 * feat: 修复前端问题 # Reviewed, transaction id: 5348 * fix: 体验问题修复 * feat: 修复前端问题 # Reviewed, transaction id: 5483 * fix: 修复体验问题 * feat: 修复前端问题 # Reviewed, transaction id: 5629 * feat: 前端版本日志 # Reviewed, transaction id: 5675 * feat: 【APIgateway1.13 】发布失败的日志点进去，时间超长 # Reviewed, transaction id: 5703 * fix: 修复体验问题 * feat: 修复前端问题 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 5928 * feat: 文案修改 # Reviewed, transaction id: 5951 * feat: 修复前端问题 # Reviewed, transaction id: 6015 * fix: 修复体验问题 * feat: 修复前端问题 # Reviewed, transaction id: 6094 * feat: 修复前端问题 # Reviewed, transaction id: 6095 * feat: 修复前端问题 # Reviewed, transaction id: 6197 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 6198 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 6198 , # Reviewed, transaction id: 6199 * fix: 修复体验问题 * fix: 体验问题修复 * feat: 修复前端问题 # Reviewed, transaction id: 6414 * fix: 修复体验问题 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 6617 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 6617 , # Reviewed, transaction id: 6619 * feat: 修复无法登出的问题 # Reviewed, transaction id: 6626 * fix: 体验问题修复 * feat: 修复前端问题 # Reviewed, transaction id: 6763 * fix: 体验问题修复 * fix: 修复体验问题 * fix: 体验问题修复 * feat: 修复前端问题 # Reviewed, transaction id: 7052 * fix: 修复体验问题 * fix: 修复体验问题 * fix: 修复体验问题 * feat: 【必须】点击编辑后，光标应该落在输入框内，需要支持回车与鼠标失焦都能保存 # Reviewed, transaction id: 7357 * fix: 修复体验问题 * fix: 修复体验问题 * fix: 修复体验问题 * feature: 小窗登录iframe方式改为window.open * fix: 修复体验问题 * feat: 修复前端问题 # Reviewed, transaction id: 7793 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 7802 * feat: 修复新建资源页面，环境配置中的超时时间是 30 秒，但添加资源时变成了 0 秒，数据未同步 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 7804 * fix: 修复体验问题 * fix: 修复体验问题 * fix: 变量管理编辑时才显示增加删除按钮 * feat: 国际化 * feat: 国际化 * feat: 国际化 * feat: 修复插件管理问题 * feat: 退出登录加上 is_from_logout 参数 * fix: 体验问题修复 * feat: 修复前端问题 * feat: eslint 问题 * fix: 体验问题修复 * fix: 修复体验问题 * fix: 体验问题修复 * feat: 修复基本信息编辑时,弹框中维护人员不显示的问题 * feat: 修复前端问题 * feat: 修复通知中心访问地址 # Reviewed, transaction id: 9800 * feat: 修复通知中心访问地址 # Reviewed, transaction id: 9823 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 9890 * feat: 修复编辑基础信息弹框中维护人员不回显的问题 # Reviewed, transaction id: 10102 * feat: 修复编辑基础信息弹框中维护人员不回显的问题 (#703) # Reviewed, transaction id: 10102 * feat: 修复编辑基础信息弹框中维护人员不回显的问题 # Reviewed, transaction id: 10119 * feat: 全局配置开发完成 * feat: 全局配置 # Reviewed, transaction id: 10271 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 10480 * feat: 日志优化前端功能开发&&“校验并查看地址”展示的路径不全时没有tooltips&&发布记录：导航样式不对&&通过环境概览页面发布资源后，页面下方资源信息未更新 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 10706 * feat: 1.14功能开发 # Reviewed, transaction id: 10707 * feat: 1.14功能开发 * feat: 修复基本信息编辑时,弹框中维护人员不显示的问题;获取全局配置 BK_APP_CODE 动态获取 # Reviewed, transaction id: 10785 * feat: 1.14版本开发 * feat: 优化全局配置相关逻辑;全局配置增加本地开发 mock 接口 # Reviewed, transaction id: 10838 * feat: 1.14版本开发 * feat: 1.14开发 * feat: 1.14功能开发 * feat: 1.14 开发 # Reviewed, transaction id: 11175 * feat: 1.14 开发 (#63) * feat: 1.14 开发 # Reviewed, transaction id: 11212 * feat: 修复编辑基础信息弹框中维护人员不回显的问题 # Reviewed, transaction id: 11297 * feat: 1.14 开发 (#64) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 修复资源配置列表标签列 filter 导致页面加载错误的问题 # Reviewed, transaction id: 11334 * feat: 修复资源配置列表标签列 filter 导致页面加载错误的问题 # Reviewed, transaction id: 11425 * feat: 1.14 开发 (#65) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 (#66) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 11681 * feat: 1.14 在线调试开发 (#67) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 在线调试开发 * feat: 1.14 在线调试开发 # Reviewed, transaction id: 12647 * Ft resource import(新版资源导入) (#69) * feat: 资源配置页代码编辑器静态样式 * feat: 调整样式 * feat: 编辑器行号左侧 linting 提示静态样式 * feat: 编辑器跳转和高亮 * feat: 编辑器错误消息台开关逻辑及滚动条样式 * feat: 编辑器错误消息行号解析 * feat: 完成编辑器错误代码行高亮及跳转 * feat: 错误消息显示行号列号 * feat: 代码校验后可选择是否跳转 * feat: 代码校验失败禁止跳转，行号推导逻辑优化 * feat: 用正则重写行号解析逻辑 * feat: 搜索面板切换逻辑 * fix: 修复代码样式 * feat: 编辑器页新样式 * feat: “导入资源配置”页基本样式 * feat: 表头批量修改 config 的 UI * chore: 整理代码 * feat: 批量修改认证和公开设置 * feat: 资源编辑逻辑 * fix: 修复 footer 样式 * feat: 资源名称路径快筛 * feat: 插件列 Tooltip 显示插件名称 * feat: 导入确认 Dialog * feat: 文本高亮 * feat: 接口文档 Slider * feat: 覆盖文档的 Switcher * chore: 整理代码 * feat: 编辑器语法校验button及校验通过消息 * feat: 编辑器语法校验button及校验通过消息 # Reviewed, transaction id: 13205 * feat: 语法校验按钮的loading/disabled状态 # Reviewed, transaction id: 13212 * feat: 把 json_path 展示到错误消息中 # Reviewed, transaction id: 13214 * fix: 修复行号解析逻辑 # Reviewed, transaction id: 13215 * fix: 修复router报错 # Reviewed, transaction id: 13224 * refactor: 优化并列的 await 调用 # Reviewed, transaction id: 13231 * feat: 编辑器错误消息跳转按钮 * feat: 编辑器全屏功能 * fix: 修复样式 * feat: 更新 i18n 翻译 * feat: 切换字号功能 * feat: 切换字号功能 # Reviewed, transaction id: 13338 * feat: 错误消息栏自动折叠 * refactor: 优化i18n插值调用 # Reviewed, transaction id: 13370 * feat: 新版资源导入 # Reviewed, transaction id: 13374 --------- Co-authored-by: shuzhenyang <shuzhen.yang2@gientech.com> Co-authored-by: lhzzforever <zly2576885332@163.com> Co-authored-by: 逍遥尊者 <46641918+lhzzforever@users.noreply.github.com> Co-authored-by: wklken <wklken@gmail.com> Co-authored-by: shuzhenyang <148324706+shuzhenyang@users.noreply.github.com> Co-authored-by: KDZhu <carlmac@163.com>
TencentBlueKing · Jul 29, 2024 · 34ccaab · 34ccaab
1 parent 01ff549
commit 34ccaab
Show file tree

Hide file tree

Showing 12 changed files with 2,041 additions and 174 deletions.
diff --git 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
@@ -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
@@ -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,16 +94,28 @@ const initEditor = () => {
     lineNumbersMinChars: 5, // 行号最小字符   number
     readOnly: readOnly.value, // 是否只读  取值 true | false
     lineHeight: 24,
+    glyphMargin: true,  // 是否显示行号左侧装饰，用于显示当前行的错误信息等级：error | warning
   });
 
   editorMounted(); // 编辑器初始化后
+  // 初始化编辑器装饰
+  decorations = editor.createDecorationsCollection([]);
 };
 
 const editorMounted = () => {
   editor.onDidChangeModelContent((event) => {
     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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>