diff --git a/frondend/.babelrc b/frondend/.babelrc
new file mode 100644
index 00000000..61acb373
--- /dev/null
+++ b/frondend/.babelrc
@@ -0,0 +1,23 @@
+{
+    "presets": [
+        [
+            "env",
+            {
+                "modules": "commonjs",
+                "targets": {
+                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+                },
+                "debug": false,
+                "useBuiltIns": true
+            }
+        ],
+        "stage-2"
+    ],
+    "plugins": ["transform-runtime", "lodash", "syntax-dynamic-import"],
+    "env": {
+        "test": {
+            "presets": ["env", "stage-2"],
+            "plugins": ["istanbul"]
+        }
+    }
+}
diff --git a/frondend/.editorconfig b/frondend/.editorconfig
new file mode 100644
index 00000000..e291365a
--- /dev/null
+++ b/frondend/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/frondend/.eslintignore b/frondend/.eslintignore
new file mode 100644
index 00000000..d9273934
--- /dev/null
+++ b/frondend/.eslintignore
@@ -0,0 +1,6 @@
+build/
+node_modules/
+renderForm/
+src/main.js
+src/store
+
diff --git a/frondend/.eslintrc.js b/frondend/.eslintrc.js
new file mode 100644
index 00000000..51ebe2a2
--- /dev/null
+++ b/frondend/.eslintrc.js
@@ -0,0 +1,480 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+      modules: true,
+    },
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+  extends: ['eslint-config-tencent', 'plugin:vue/recommended'],
+  // required to lint *.vue files
+  plugins: [
+    'vue',
+  ],
+  globals: {
+    // value 为 true 允许被重写，为 false 不允许被重写
+    NODE_ENV: true,
+    BUILD_TARGET: true,
+    SITE_URL: true,
+    BACKEND_URL: true,
+    LOGIN_SERVICE_URL: true,
+    LEGACY_APP_MIGRATION_ENABLED: true,
+    AJAX_URL_PIRFIX: true,
+    GRAFANA_IFRAME_URL: true,
+    gettext: true,
+  },
+  // add your custom rules here
+  rules: {
+    // https://eslint.org/docs/rules/brace-style
+    'brace-style': ['error', '1tbs', { allowSingleLine: false }],
+
+    // https://eslint.org/docs/rules/camelcase
+    camelcase: ['error', { properties: 'never', ignoreDestructuring: true }],
+
+    // 缩进使用 2 个空格，并且 switch 语句中的 Case 需要缩进
+    // https://eslint.org/docs/rules/indent
+    indent: ['error', 2, {
+      SwitchCase: 1,
+      flatTernaryExpressions: true,
+    }],
+
+    // 数组的括号内的前后禁止有空格
+    // https://eslint.org/docs/rules/array-bracket-spacing
+    'array-bracket-spacing': ['error', 'never'],
+
+    // https://eslint.org/docs/rules/operator-linebreak
+    'operator-linebreak': ['error', 'before'],
+
+    // 在开发阶段打开调试
+    // https://eslint.org/docs/rules/no-debugger
+    'no-debugger': 'off',
+
+    // 只有一个参数时，箭头函数体可以省略圆括号
+    // https://eslint.org/docs/rules/arrow-parens
+    'arrow-parens': 'off',
+
+    // 禁止空语句（可在空语句写注释避免），允许空的 catch 语句
+    // https://eslint.org/docs/rules/no-empty
+    'no-empty': ['error', { allowEmptyCatch: true }],
+
+    // 禁止在语句末尾使用分号
+    // https://eslint.org/docs/rules/semi
+    semi: ['off', 'always'],
+
+    // 禁用不必要的分号
+    // https://eslint.org/docs/rules/no-extra-semi
+    // 'no-extra-semi': 'error',
+
+    // generator 的 * 前面禁止有空格，后面必须有空格
+    // https://eslint.org/docs/rules/generator-star-spacing
+    'generator-star-spacing': [
+      'error',
+      {
+        before: false,
+        after: true,
+      },
+    ],
+
+    // 函数圆括号之前有一个空格
+    // https://eslint.org/docs/rules/space-before-function-paren
+    'space-before-function-paren': ['error', {
+      anonymous: 'always', // 匿名函数表达式
+      named: 'always', // 命名的函数表达式
+      asyncArrow: 'always', // 异步的箭头函数表达式
+    }],
+
+    // 禁止行尾有空格
+    // https://eslint.org/docs/rules/no-trailing-spaces
+    'no-trailing-spaces': ['error', {
+      skipBlankLines: true, // 允许在空行使用空白符
+    }],
+
+    // 注释的斜线或 * 后必须有空格
+    // https://eslint.org/docs/rules/spaced-comment
+    'spaced-comment': ['error', 'always', {
+      line: {
+        markers: ['*package', '!', '/', ',', '='],
+      },
+      block: {
+        // 前后空格是否平衡
+        balanced: false,
+        markers: ['*package', '!', ',', ':', '::', 'flow-include'],
+        exceptions: ['*'],
+      },
+    }],
+
+    // https://eslint.org/docs/rules/no-template-curly-in-string
+    // 禁止在字符串中使用字符串模板。不限制
+    'no-template-curly-in-string': 'off',
+
+    // https://eslint.org/docs/rules/no-useless-escape
+    // 禁止出现没必要的转义。不限制
+    'no-useless-escape': 'off',
+
+    // https://eslint.org/docs/rules/no-var
+    // 禁止使用 var
+    'no-var': 'error',
+
+    // https://eslint.org/docs/rules/prefer-const
+    // 如果一个变量不会被重新赋值，必须使用 `const` 进行声明。
+    'prefer-const': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/array-bracket-spacing.md
+    'vue/array-bracket-spacing': ['error', 'never'],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/arrow-spacing.md
+    'vue/arrow-spacing': ['error', { before: true, after: true }],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attribute-hyphenation.md
+    'vue/attribute-hyphenation': ['error', 'always'],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attributes-order.md
+    // 属性顺序，不限制
+    'vue/attributes-order': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/block-spacing.md
+    'vue/block-spacing': ['error', 'always'],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/brace-style.md
+    'vue/brace-style': ['error', '1tbs', { allowSingleLine: false }],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/camelcase.md
+    // 后端数据字段经常不是驼峰，所以不限制 properties，也不限制解构
+    'vue/camelcase': ['error', { properties: 'never', ignoreDestructuring: true }],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/comma-dangle.md
+    // 禁止使用拖尾逗号，如 {demo: 'test',}
+    'vue/comma-dangle': ['error', 'never'],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/comment-directive.md
+    // vue 文件 template 中允许 eslint-disable eslint-enable eslint-disable-line eslint-disable-next-line
+    // 行内注释启用/禁用某些规则，配置为 1 即允许
+    'vue/comment-directive': 1,
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/component-name-in-template-casing.md
+    // 组件 html 标签的形式，连字符形式，所有 html 标签均会检测，如引入第三方不可避免，可通过 ignores 配置，支持正则，不限制
+    'vue/component-name-in-template-casing': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/dot-location.md
+    // 等待 https://github.com/vuejs/eslint-plugin-vue/pull/794 合入
+    // 'vue/dot-location': ['error', 'property'],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/eqeqeq.md
+    'vue/eqeqeq': ['error', 'always', { null: 'ignore' }],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-closing-bracket-newline.md
+    // 单行写法不需要换行，多行需要，不限制
+    'vue/html-closing-bracket-newline': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-closing-bracket-spacing.md
+    'vue/html-closing-bracket-spacing': ['error', {
+      startTag: 'never',
+      endTag: 'never',
+      selfClosingTag: 'always',
+    }],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-end-tags.md
+    'vue/html-end-tags': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-indent.md
+    'vue/html-indent': ['error', 2, {
+      attribute: 1,
+      baseIndent: 1,
+      closeBracket: 0,
+      alignAttributesVertically: false,
+      ignores: [],
+    }],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-quotes.md
+    'vue/html-quotes': ['error', 'double'],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md
+    // html tag 是否自闭和，不限制
+    'vue/html-self-closing': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/jsx-uses-vars.md
+    // 当变量在 `JSX` 中被使用了，那么 eslint 就不会报出 `no-unused-vars` 的错误。需要开启 eslint no-unused-vars 规则才适用
+    'vue/jsx-uses-vars': 1,
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/key-spacing.md
+    'vue/key-spacing': ['error', { beforeColon: false, afterColon: true }],
+
+    // 关键字周围空格一致性，在关键字前后保留空格，如 if () else {}
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/keyword-spacing.md
+    // 等待 https://github.com/vuejs/eslint-plugin-vue/pull/795 合入
+    // 'vue/keyword-spacing': ['error', {'before': true, 'after': true}],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/match-component-file-name.md
+    // 组件名称属性与其文件名匹配，不限制
+    'vue/match-component-file-name': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/max-attributes-per-line.md
+    // 每行属性的最大个数，不限制
+    'vue/max-attributes-per-line': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/multiline-html-element-content-newline.md
+    // 在多行元素的内容前后需要换行符，不限制
+    'vue/multiline-html-element-content-newline': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/mustache-interpolation-spacing.md
+    // template 中 {{var}}，不限制
+    'vue/mustache-interpolation-spacing': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/name-property-casing.md
+    'vue/name-property-casing': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-async-in-computed-properties.md
+    'vue/no-async-in-computed-properties': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-boolean-default.md
+    'vue/no-boolean-default': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-confusing-v-for-v-if.md
+    'vue/no-confusing-v-for-v-if': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-dupe-keys.md
+    // 二级属性名禁止重复
+    'vue/no-dupe-keys': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-duplicate-attributes.md
+    // 禁止 html 元素中出现重复的属性
+    'vue/no-duplicate-attributes': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-empty-pattern.md
+    // 等待 https://github.com/vuejs/eslint-plugin-vue/pull/798 合入
+    // 禁止解构中出现空 {} 或 []
+    // 'vue/no-empty-pattern': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-multi-spaces.md
+    // 删除 html 标签中连续多个不用于缩进的空格
+    'vue/no-multi-spaces': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-parsing-error.md
+    // 禁止语法错误
+    'vue/no-parsing-error': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-reserved-keys.md
+    // 禁止使用保留字
+    'vue/no-reserved-keys': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-restricted-syntax.md
+    // 禁止使用特定的语法
+    'vue/no-restricted-syntax': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-shared-component-data.md
+    // data 属性必须是函数
+    'vue/no-shared-component-data': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-side-effects-in-computed-properties.md
+    // 禁止在计算属性对属性进行修改，不限制
+    'vue/no-side-effects-in-computed-properties': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+    'vue/no-spaces-around-equal-signs-in-attribute': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-template-key.md
+    // 禁止在 <template> 中使用 key 属性，不限制
+    'vue/no-template-key': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-template-shadow.md
+    'vue/no-template-shadow': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-textarea-mustache.md
+    'vue/no-textarea-mustache': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-unused-components.md
+    // 禁止 components 中声明的组件在 template 中没有使用
+    'vue/no-unused-components': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-unused-vars.md
+    'vue/no-unused-vars': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-use-v-if-with-v-for.md
+    // 禁止 v-for 和 v-if 在同一元素上使用，不限制
+    'vue/no-use-v-if-with-v-for': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-v-html.md
+    // 禁止使用 v-html，防止 xss
+    'vue/no-v-html': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/object-curly-spacing.md
+    // 对象写在一行时，大括号里需要空格
+    'vue/object-curly-spacing': ['error', 'always'],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/order-in-components.md
+    // 官方推荐顺序
+    'vue/order-in-components': ['error', {
+      order: [
+        'el',
+        'name',
+        'parent',
+        'functional',
+        ['delimiters', 'comments'],
+        ['components', 'directives', 'filters'],
+        'extends',
+        'mixins',
+        'inheritAttrs',
+        'model',
+        ['props', 'propsData'],
+        'data',
+        'computed',
+        'watch',
+        // LIFECYCLE_HOOKS: ['beforeCreate', 'created', 'beforeMount', 'mounted',
+        //     'beforeUpdate', 'updated', 'activated', 'deactivated', 'beforeDestroy', 'destroyed']
+        'LIFECYCLE_HOOKS',
+        'methods',
+        ['template', 'render'],
+        'renderError',
+      ],
+    }],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/prop-name-casing.md
+    // 组件 props 属性名驼峰命名
+    'vue/prop-name-casing': ['error', 'camelCase'],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-component-is.md
+    // <component> 元素必须要有 :is 属性
+    'vue/require-component-is': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-default-prop.md
+    // props 必须要有默认值，不限制
+    'vue/require-default-prop': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-direct-export.md
+    // 组件必须要直接被 export。不限制
+    'vue/require-direct-export': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-prop-type-constructor.md
+    // props 的 type 必须为构造函数，不能为字符串。
+    'vue/require-prop-type-constructor': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-prop-types.md
+    // props 必须要有 type。
+    'vue/require-prop-types': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-render-return.md
+    // render 函数必须要有返回值
+    'vue/require-render-return': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-v-for-key.md
+    // v-for 指令必须要有 key 属性
+    'vue/require-v-for-key': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-valid-default-prop.md
+    // props 默认值必须有效。不限制
+    'vue/require-valid-default-prop': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/return-in-computed-property.md
+    // 计算属性必须要有返回值
+    'vue/return-in-computed-property': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/script-indent.md
+    'vue/script-indent': ['error', 2, {
+      baseIndent: 1,
+      switchCase: 1,
+    }],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/singleline-html-element-content-newline.md
+    // 单行 html 元素后面必须换行。不限制
+    'vue/singleline-html-element-content-newline': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/space-infix-ops.md
+    // 二元操作符两边要有空格
+    'vue/space-infix-ops': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/space-unary-ops.md
+    // new, delete, typeof, void, yield 等后面必须有空格，一元操作符 -, +, --, ++, !, !! 禁止有空格
+    'vue/space-unary-ops': ['error', { words: true, nonwords: false }],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/this-in-template.md
+    // 不允许在 template 中使用 this
+    'vue/this-in-template': ['error', 'never'],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/use-v-on-exact.md
+    // 强制使用精确修饰词。不限制
+    'vue/use-v-on-exact': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/v-bind-style.md
+    // v-bind 指令的写法。不限制
+    'vue/v-bind-style': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/v-on-function-call.md
+    // 强制或禁止在 v-on 指令中不带参数的方法调用后使用括号。不限制
+    'vue/v-on-function-call': 'off',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/v-on-style.md
+    // v-on 指令的写法。限制简写
+    'vue/v-on-style': ['error', 'shorthand'],
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-template-root.md
+    // 根节点必须合法
+    'vue/valid-template-root': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-bind.md
+    // v-bind 指令必须合法
+    'vue/valid-v-bind': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-cloak.md
+    // v-cloak 指令必须合法
+    'vue/valid-v-cloak': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-else-if.md
+    // v-else-if 指令必须合法
+    'vue/valid-v-else-if': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-else.md
+    // v-else 指令必须合法
+    'vue/valid-v-else': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-for.md
+    // valid-v-for 指令必须合法
+    'vue/valid-v-for': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-html.md
+    // v-html 指令必须合法
+    'vue/valid-v-html': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-if.md
+    // v-if 指令必须合法
+    'vue/valid-v-if': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-model.md
+    // v-model 指令必须合法
+    'vue/valid-v-model': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-on.md
+    // v-on 指令必须合法
+    'vue/valid-v-on': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-once.md
+    // v-once 指令必须合法
+    'vue/valid-v-once': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-pre.md
+    // v-pre 指令必须合法
+    'vue/valid-v-pre': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-show.md
+    // v-show 指令必须合法
+    'vue/valid-v-show': 'error',
+
+    // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-text.md
+    // v-text 指令必须合法
+    'vue/valid-v-text': 'error',
+  },
+  overrides: [
+    {
+      files: ['*.vue'],
+      rules: {
+        indent: 'off',
+      },
+    },
+  ],
+};
diff --git a/frondend/.gitignore b/frondend/.gitignore
new file mode 100644
index 00000000..261058aa
--- /dev/null
+++ b/frondend/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules/
+node_modules_8x/
+node_modules_8x.tar.gz/
+webpack_cache/
+dist/
+!build/ 
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+test/unit/coverage
+*.bak*
+.vscode/
+package-lock.json
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+.cache/
+static/js/*.js
diff --git a/frondend/README.md b/frondend/README.md
new file mode 100644
index 00000000..71738bb6
--- /dev/null
+++ b/frondend/README.md
@@ -0,0 +1,45 @@
+bamboo_engine_admin_frontend
+===
+
+## 本地开发
+
+# 安装依赖包
+npm install
+
+# host配置
+打开build/webpack.dev.config.js
+host: dev + 代理地址的域名
+例如：
+    host: dev.xxxx-xxxx.com
+
+# webpack 代理配置
+打开build/webpack.dev.config.js
+设置代理地址ORIGIN
+例如：
+    const ORIGIN = 'http://xxxx-xxxx.com'
+在proxyPath里面添加需要代理的接口
+例如：
+    const proxyPath = [ 'api/', 'api/*' ]
+
+# 本地项目运行
+npm run dev
+
+# 打包构建
+npm run build
+使用时后端需要：
+    在html中配置接口请求路径SITE_URL和静态资源文件路径BK_STATIC_URL
+    在后台框架的静态资源目录/static/images里添加网页icon
+
+# 打包生成目录
+项目子目录static文件
+static
+    - assets
+        - css
+        - fonts
+        - img
+        - js
+        index.html
+    json.works.js
+
+
+
diff --git a/frondend/build/webpack.base.conf.js b/frondend/build/webpack.base.conf.js
new file mode 100644
index 00000000..e9ad71f6
--- /dev/null
+++ b/frondend/build/webpack.base.conf.js
@@ -0,0 +1,141 @@
+const path = require('path');
+const webpack = require('webpack');
+const HappyPack = require('happypack');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+const os = require('os');
+const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir);
+}
+
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: path.resolve(__dirname, '../static/'),
+    filename: 'js/[name].js',
+    publicPath: '/',
+    pathinfo: false
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      vue: 'vue/dist/vue.esm.js',
+      '@': path.resolve(__dirname, '../src/'),
+      jquery: 'jquery/dist/jquery.min.js',
+      $: 'jquery/dist/jquery.min.js',
+      excel: path.resolve(__dirname, '../src/excel')
+    }
+  },
+  cache: true,
+  module: {
+    rules: [
+      {
+        test: require.resolve('jquery'),
+        use: [
+          {
+            loader: 'expose-loader',
+            options: 'jQuery'
+          },
+          {
+            loader: 'expose-loader',
+            options: '$'
+          }
+        ]
+      },
+      {
+        test: /\.vue$/,
+        use: 'vue-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: require.resolve('vue'),
+        use: [{
+          loader: 'expose-loader',
+          options: 'Vue'
+        }]
+      },
+      {
+        test: /\.js$/,
+        // loader: 'babel-loader',
+        use: ['happypack/loader?id=happy-babel-js'], // 增加新的HappyPack构建loader
+        include: [resolve('src'), resolve('node_modules/vue-echarts'), resolve('node_modules/pinyin')]
+        // exclude (modulePath) {
+        // },
+        // HappyPack: plugin for the loader '1' could not be found!
+        // https://github.com/amireh/happypack/issues/183
+        // https://github.com/amireh/happypack/issues/238
+        // query: {
+        //     cacheDirectory: './webpack_cache/'
+        // }
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          // 3.0.0 版本默认使用 esModule，导致 css 中使用 url 的地方编译后错误输出 [object Module]
+          // 参考 https://github.com/vuejs/vue-loader/issues/1612
+          esModule: false,
+          limit: 55000,
+          name: path.posix.join('img/[name].[hash:7].[ext]'),
+          publicPath: '../'
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          esModule: false,
+          limit: 10000,
+          name: path.posix.join('media/[name].[hash:7].[ext]'),
+          publicPath: '../'
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          esModule: false,
+          limit: 10000,
+          name: path.posix.join('fonts/[name].[hash:7].[ext]'),
+          publicPath: '../'
+        }
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        DEV_VAR: JSON.stringify(process.env.DEV_VAR)
+      }
+    }),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery'
+    }),
+    new MonacoWebpackPlugin({
+      languages: ['javascript', 'json']
+    }),
+    // 严格组件名大小写，避免linux系统上打包报错
+    // https://github.com/chemzqm/keng/issues/4
+    new CaseSensitivePathsPlugin({ debug: false }),
+    // moment 优化，只提取本地包
+    new webpack.ContextReplacementPlugin(/moment\/locale$/, /zh-cn/),
+    // brace 优化，只提取需要的语法
+    new webpack.ContextReplacementPlugin(/brace\/mode$/, /^\.\/(json|python|sh|text)$/),
+    // brace 优化，只提取需要的 theme
+    new webpack.ContextReplacementPlugin(/brace\/theme$/, /^\.\/(monokai)$/),
+    new HappyPack({
+      id: 'happy-babel-js',
+      loaders: ['babel-loader?cacheDirectory=true'],
+      threadPool: happyThreadPool
+    })
+  ]
+};
diff --git a/frondend/build/webpack.dev.conf.js b/frondend/build/webpack.dev.conf.js
new file mode 100644
index 00000000..99238d96
--- /dev/null
+++ b/frondend/build/webpack.dev.conf.js
@@ -0,0 +1,67 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const webpackBase = require('./webpack.base.conf');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// 本地代理地址
+const ORIGIN = 'http://{BK_PAAS_HOST}';
+const SITE_URL = '/o/bk_sops/';
+// 代理接口列表
+const proxyPath = [
+  'api/',
+  'api/v1/'
+];
+// 代理接口
+const proxyRule = {};
+proxyPath.forEach((item) => {
+  proxyRule[SITE_URL + item] = {
+    target: ORIGIN,
+    secure: false,
+    changeOrigin: true,
+    headers: {
+      referer: ORIGIN
+    }
+  };
+});
+
+module.exports = merge(webpackBase, {
+  // 模式
+  mode: 'development',
+  // 模块
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss|sass)$/,
+        use: ['style-loader', 'css-loader', 'sass-loader']
+      }
+    ]
+  },
+  // 插件
+  plugins: [
+    new webpack.NamedModulesPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index-dev.html',
+      inject: true
+    })
+  ],
+  // 开发工具
+  devtool: 'inline-source-map',
+  // 代理服务配置
+  devServer: {
+    contentBase: path.posix.join(__dirname, '../../../static'),
+    host: 'dev.{BK_PAAS_HOST}',
+    port: 9007,
+    https: ORIGIN.indexOf('https') > -1,
+    hot: true,
+    open: false, // webpack 升级之前设置为打开状态
+    overlay: true,
+    proxy: proxyRule,
+    stats: {
+      children: false,
+      entrypoints: false,
+      modules: false
+    }
+  }
+});
diff --git a/frondend/build/webpack.prod.conf.js b/frondend/build/webpack.prod.conf.js
new file mode 100644
index 00000000..9276251d
--- /dev/null
+++ b/frondend/build/webpack.prod.conf.js
@@ -0,0 +1,97 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const webpackBase = require('./webpack.base.conf');
+const TerserJSPlugin = require("terser-webpack-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+module.exports = merge(webpackBase, {
+  // 模式
+  mode: 'production',
+  // 开发工具
+  devtool: process.env.SOURCE_MAP === 'true' ? 'source-map' : false,
+  // 输出
+  output: {
+    filename: 'js/[name].[contenthash:7].js'
+  },
+  // 模块
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss|sass)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+  // 插件
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].[contenthash:7].css'
+    }),
+    new webpack.HashedModuleIdsPlugin(),
+    new HtmlWebpackPlugin({
+      filename: 'index-prod.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: ['./assets/**'],
+      verbose: true
+    })
+  ],
+  // 优化
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({
+        extractComments: false,
+        cache: true,
+        parallel: true
+      }),
+      new OptimizeCSSAssetsPlugin({
+        cssProcessorOptions: {
+          // map: {  // css 文件 sourcemap
+          //     inline: false,
+          //     annotation: true
+          // },
+          safe: true
+        }
+      })
+    ],
+    runtimeChunk: 'single',
+    splitChunks: {
+      cacheGroups: {
+        vueLib: {
+          test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,
+          name: 'vue-lib',
+          chunks: 'initial'
+        },
+        plotly: {
+          test: /[\\/]node_modules[\\/]plotly.js[\\/]/,
+          name: 'plotly',
+          chunks: 'initial'
+        },
+        highlight: {
+          test: /[\\/]node_modules[\\/]highlight.js[\\/]/,
+          name: 'highlight',
+          chunks: 'all'
+        },
+        brace: {
+          test: /[\\/]node_modules[\\/]brace[\\/]/,
+          name: 'brace',
+          chunks: 'initial'
+        }
+      }
+    }
+  },
+  stats: {
+    children: false,
+    entrypoints: false
+  }
+});
diff --git a/frondend/favicon.ico b/frondend/favicon.ico
new file mode 100644
index 00000000..4f8649f5
Binary files /dev/null and b/frondend/favicon.ico differ
diff --git a/frondend/index-dev.html b/frondend/index-dev.html
new file mode 100644
index 00000000..155a575e
--- /dev/null
+++ b/frondend/index-dev.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon" />
+        <meta charset="utf-8">
+        <title> bamboo-engine-admin-frontend </title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script>
+            var SITE_URL = '/o/bk_sops/'
+            var BK_STATIC_URL = '/'
+            var REMOTE_STATIC_URL = ''
+        </script>
+    </body>
+</html>
diff --git a/frondend/index.html b/frondend/index.html
new file mode 100644
index 00000000..98f28f94
--- /dev/null
+++ b/frondend/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon" />
+        <meta charset="utf-8">
+        <title> bamboo-engine-admin-frontend </title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script>
+            var SITE_URL = '{{SITE_URL}}'
+            var BK_STATIC_URL = '{{BK_STATIC_URL}}/'
+            var REMOTE_STATIC_URL = ''
+        </script>
+        <script>
+            var pathname = window.location.pathname
+            var SITE_URL = pathname.endsWith('/') ? pathname : pathname + '/'
+        </script>
+    </body>
+</html>
diff --git a/frondend/package.json b/frondend/package.json
new file mode 100644
index 00000000..fd72eafb
--- /dev/null
+++ b/frondend/package.json
@@ -0,0 +1,101 @@
+{
+  "name": "bamboo_engine_admin_frontend",
+  "version": "1.2.2",
+  "description": "bamboo_engine_admin_frontend",
+  "author": "bk",
+  "scripts": {
+    "dev": "cross-env webpack-dev-server --progress --config ./build/webpack.dev.conf.js",
+    "build": "cross-env npm run build:production",
+    "build:development": "cross-env DEV_VAR=development webpack --config ./build/webpack.prod.conf.js",
+    "build:production": "cross-env DEV_VAR=production webpack --config ./build/webpack.prod.conf.js",
+    "lint": "eslint --ext .js,.vue src/",
+    "fix": "eslint --fix --ext .js,.vue src/"
+  },
+  "dependencies": {
+    "@babel/core": "^7.14.3",
+    "@blueking/bkcharts": "^2.0.6",
+    "@blueking/user-selector": "^1.0.5-beta.2",
+    "@icon-cool/bk-icon-guanwang": "0.0.4",
+    "@toast-ui/editor-plugin-code-syntax-highlight": "^1.0.0",
+    "@toast-ui/vue-editor": "^2.4.0",
+    "axios": "^0.21.1",
+    "bk-magic-vue": "2.2.17",
+    "eslint-config-tencent": "^1.0.4",
+    "jquery": "^3.2.1",
+    "jsencrypt": "2.3.0",
+    "lodash": "^4.17.12",
+    "monaco-editor": "^0.20.0",
+    "monaco-editor-webpack-plugin": "^1.9.0",
+    "vue": "^2.6.11",
+    "vue-i18n": "^7.6.0",
+    "vue-router": "^2.8.1",
+    "vuex": "^2.4.0",
+    "xlsx": "^0.17.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.14.3",
+    "autoprefixer": "^7.1.4",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "8.2.6",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-component": "^1.1.1",
+    "babel-plugin-istanbul": "^4.1.5",
+    "babel-plugin-lodash": "^3.2.11",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "case-sensitive-paths-webpack-plugin": "^2.3.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.11",
+    "cssnano": "^3.10.0",
+    "eslint": "^5.15.1",
+    "eslint-config-standard": "12.0.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-node": "8.0.1",
+    "eslint-plugin-promise": "4.0.1",
+    "eslint-plugin-standard": "4.0.0",
+    "eslint-plugin-vue": "5.2.2",
+    "expose-loader": "^0.7.5",
+    "file-loader": "^5.0.2",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "happypack": "^5.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "lodash-webpack-plugin": "^0.11.4",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "resolve-url-loader": "^3.1.1",
+    "sass-loader": "^6.0.7",
+    "style-loader": "^0.18.2",
+    "terser-webpack-plugin": "^2.3.4",
+    "vue-eslint-parser": "^7.0.0",
+    "url-loader": "^3.0.0",
+    "vue-loader": "^15.8.3",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.41.5",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-merge": "^4.2.2"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/frondend/postcss.config.js b/frondend/postcss.config.js
new file mode 100644
index 00000000..22db23a0
--- /dev/null
+++ b/frondend/postcss.config.js
@@ -0,0 +1,63 @@
+/**
+ * @file postcss 基本配置
+ */
+
+const createResolver = require('postcss-import-webpack-resolver');
+const baseConf = require('./build/webpack.base.conf.js');
+
+// https://github.com/michael-ciniawsky/postcss-load-config
+module.exports = {
+  plugins: {
+    // 把 import 的内容转换为 inline
+    // @see https://github.com/postcss/postcss-import#postcss-import
+    'postcss-import': {
+      // 使用 webpack 配置里的 resolve.alias
+      // https://github.com/krambuhl/postcss-import-webpack-resolver#postcss-import-webpack-resolver
+      resolve: createResolver({
+        alias: baseConf.default.resolve.alias,
+        modules: ['src', 'node_modules'],
+      }),
+    },
+
+    // mixins，本插件需要放在 postcss-simple-vars 和 postcss-nested 插件前面
+    // @see https://github.com/postcss/postcss-mixins#postcss-mixins-
+    'postcss-mixins': {
+    },
+
+    // 用于在 URL ( )上重新定位、内嵌或复制。
+    // @see https://github.com/postcss/postcss-url#postcss-url
+    'postcss-url': {
+      url: 'rebase',
+    },
+
+    // cssnext 已经不再维护，推荐使用 postcss-preset-env
+    'postcss-preset-env': {
+      // see https://github.com/csstools/postcss-preset-env#options
+      stage: 0,
+      autoprefixer: {
+        grid: true,
+      },
+    },
+    // 这个插件可以在写 nested 样式时省略开头的 &
+    // @see https://github.com/postcss/postcss-nested#postcss-nested-
+    'postcss-nested': {},
+
+    // 将 @at-root 里的规则放入到根节点
+    // @see https://github.com/OEvgeny/postcss-atroot#postcss-at-root-
+    'postcss-atroot': {},
+
+    // 提供 @extend 语法
+    // @see https://github.com/jonathantneal/postcss-extend-rule#postcss-extend-rule-
+    'postcss-extend-rule': {},
+
+    // 变量相关
+    // @see https://github.com/jonathantneal/postcss-advanced-variables#postcss-advanced-variables-
+    'postcss-advanced-variables': {
+      // variables 属性内的变量为全局变量
+    },
+
+    // 类似于 stylus，直接引用属性而不需要变量定义
+    // @see https://github.com/simonsmith/postcss-property-lookup#postcss-property-lookup-
+    'postcss-property-lookup': {},
+  },
+};
diff --git a/frondend/src/App.vue b/frondend/src/App.vue
new file mode 100644
index 00000000..a3328949
--- /dev/null
+++ b/frondend/src/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+    
+</script>
+
+<style lang="scss" scoped>
+  .app {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/frondend/src/common/ajax.js b/frondend/src/common/ajax.js
new file mode 100644
index 00000000..1ffd7436
--- /dev/null
+++ b/frondend/src/common/ajax.js
@@ -0,0 +1,37 @@
+/**
+ * @file ajax 封装
+ */
+
+import Vue from 'vue';
+import axios from 'axios';
+
+const instance = axios.create({
+  validateStatus: status => status >= 200 && status <= 505,
+  baseURL: window.SITE_URL,
+  // `headers` are custom headers to be sent
+  headers: { 'X-Requested-With': 'XMLHttpRequest' },
+  // csrftoken变量名
+  xsrfCookieName: 'bk_sops_csrftoken',
+  // cookie中的csrftoken信息名称
+  xsrfHeaderName: 'X-CSRFToken',
+  withCredentials: true,
+});
+
+// 拦截器：在这里对ajax请求做一些统一公用处理
+instance.interceptors.response.use(
+  (response) => {
+    if (response.status) {
+      switch (response.status) {
+        case 401:
+          break;
+      }
+    }
+    return response;
+  },
+  error => Promise.reject(error) // 返回接口返回的错误信息
+
+);
+
+Vue.prototype.$http = instance;
+
+export default instance;
diff --git a/frondend/src/common/bus.js b/frondend/src/common/bus.js
new file mode 100644
index 00000000..fe0bae69
--- /dev/null
+++ b/frondend/src/common/bus.js
@@ -0,0 +1,9 @@
+/**
+ * @file event bus
+ */
+
+import Vue from 'vue';
+
+// Use a bus for components communication,
+// see https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
+export const bus = new Vue();
diff --git a/frondend/src/common/util.js b/frondend/src/common/util.js
new file mode 100644
index 00000000..155fd796
--- /dev/null
+++ b/frondend/src/common/util.js
@@ -0,0 +1,295 @@
+/**
+ * 函数柯里化
+ *
+ * @example
+ *     function add (a, b) {return a + b}
+ *     curry(add)(1)(2)
+ *
+ * @param {Function} fn 要柯里化的函数
+ *
+ * @return {Function} 柯里化后的函数
+ */
+export function curry (fn) {
+  const judge = (...args) => {
+    const result = args.length === fn.length ? fn(...args) : arg => judge(...args, arg);
+    return result;
+  };
+  return judge;
+}
+
+/**
+ * 判断是否是对象
+ *
+ * @param {Object} obj 待判断的
+ *
+ * @return {boolean} 判断结果
+ */
+export function isObject (obj) {
+  return obj !== null && typeof obj === 'object';
+}
+
+/**
+ * 规范化参数
+ *
+ * @param {Object|string} type vuex type
+ * @param {Object} payload vuex payload
+ * @param {Object} options vuex options
+ *
+ * @return {Object} 规范化后的参数
+ */
+export function unifyObjectStyle (type, payload, options) {
+  let newOptions = options;
+  let newPayload = payload;
+  let newType = type;
+  if (isObject(type) && type.type) {
+    newOptions = payload;
+    newPayload = type;
+    newType = type.type;
+  }
+
+  // if (NODE_ENV !== 'production') {
+  //     if (typeof type !== 'string') {
+  //         console.warn(`expects string as the type, but found ${typeof type}.`)
+  //     }
+  // }
+
+  return { type: newType, payload: newPayload, options: newOptions };
+}
+
+/**
+ * 异常处理
+ *
+ * @param {Object} err 错误对象
+ * @param {Object} ctx 上下文对象，这里主要指当前的 Vue 组件
+ */
+export function catchErrorHandler (err, ctx) {
+  const { data } = err;
+  if (data) {
+    if (!data.code || data.code === 404) {
+      ctx.exceptionCode = {
+        code: '404',
+        msg: '当前访问的页面不存在',
+      };
+    } else if (data.code === 403) {
+      ctx.exceptionCode = {
+        code: '403',
+        msg: 'Sorry，您的权限不足!',
+      };
+    } else {
+      console.error(err);
+      ctx.bkMessageInstance = ctx.$bkMessage({
+        theme: 'error',
+        message: err.message || err.data.msg || err.statusText,
+      });
+    }
+  } else {
+    console.error(err);
+    ctx.bkMessageInstance = ctx.$bkMessage({
+      theme: 'error',
+      message: err.message || err.data.msg || err.statusText,
+    });
+  }
+}
+
+/**
+ * 获取字符串长度，中文算两个，英文算一个
+ *
+ * @param {string} str 字符串
+ *
+ * @return {number} 结果
+ */
+export function getStringLen (str) {
+  let len = 0;
+  for (let i = 0; i < str.length; i++) {
+    if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
+      len += 2;
+    } else {
+      len += 1;
+    }
+  }
+  return len;
+}
+
+/**
+ * 对象转为 url query 字符串
+ *
+ * @param {*} param 要转的参数
+ * @param {string} key key
+ *
+ * @return {string} url query 字符串
+ */
+export function json2Query (param, key) {
+  const mappingOperator = '=';
+  const separator = '&';
+  let paramStr = '';
+
+  if (param instanceof String || typeof param === 'string'
+            || param instanceof Number || typeof param === 'number'
+            || param instanceof Boolean || typeof param === 'boolean'
+  ) {
+    paramStr += separator + key + mappingOperator + encodeURIComponent(param);
+  } else {
+    Object.keys(param).forEach((p) => {
+      const value = param[p];
+      const k = (key === null || key === '' || key === undefined)
+        ? p
+        : key + (param instanceof Array ? `[${p}]` : `.${p}`);
+      paramStr += separator + json2Query(value, k);
+    });
+  }
+  return paramStr.substr(1);
+}
+
+/**
+ * 字符串转换为驼峰写法
+ *
+ * @param {string} str 待转换字符串
+ *
+ * @return {string} 转换后字符串
+ */
+export function camelize (str) {
+  return str.replace(/-(\w)/g, (strMatch, p1) => p1.toUpperCase());
+}
+
+/**
+ * 获取元素的样式
+ *
+ * @param {Object} elem dom 元素
+ * @param {string} prop 样式属性
+ *
+ * @return {string} 样式值
+ */
+export function getStyle (elem, prop) {
+  if (!elem || !prop) {
+    return false;
+  }
+
+  // 先获取是否有内联样式
+  let value = elem.style[camelize(prop)];
+
+  if (!value) {
+    // 获取的所有计算样式
+    let css = '';
+    if (document.defaultView && document.defaultView.getComputedStyle) {
+      css = document.defaultView.getComputedStyle(elem, null);
+      value = css ? css.getPropertyValue(prop) : null;
+    }
+  }
+
+  return String(value);
+}
+
+/**
+ *  获取元素相对于页面的高度
+ *
+ *  @param {Object} node 指定的 DOM 元素
+ */
+export function getActualTop (node) {
+  let actualTop = node.offsetTop;
+  let current = node.offsetParent;
+
+  while (current !== null) {
+    actualTop += current.offsetTop;
+    current = current.offsetParent;
+  }
+
+  return actualTop;
+}
+
+/**
+ *  获取元素相对于页面左侧的宽度
+ *
+ *  @param {Object} node 指定的 DOM 元素
+ */
+export function getActualLeft (node) {
+  let actualLeft = node.offsetLeft;
+  let current = node.offsetParent;
+
+  while (current !== null) {
+    actualLeft += current.offsetLeft;
+    current = current.offsetParent;
+  }
+
+  return actualLeft;
+}
+
+/**
+ * document 总高度
+ *
+ * @return {number} 总高度
+ */
+export function getScrollHeight () {
+  let scrollHeight = 0;
+  let bodyScrollHeight = 0;
+  let documentScrollHeight = 0;
+
+  if (document.body) {
+    bodyScrollHeight = document.body.scrollHeight;
+  }
+
+  if (document.documentElement) {
+    documentScrollHeight = document.documentElement.scrollHeight;
+  }
+
+  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
+
+  return scrollHeight;
+}
+
+/**
+ * 滚动条在 y 轴上的滚动距离
+ *
+ * @return {number} y 轴上的滚动距离
+ */
+export function getScrollTop () {
+  let scrollTop = 0;
+  let bodyScrollTop = 0;
+  let documentScrollTop = 0;
+
+  if (document.body) {
+    bodyScrollTop = document.body.scrollTop;
+  }
+
+  if (document.documentElement) {
+    documentScrollTop = document.documentElement.scrollTop;
+  }
+
+  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
+
+  return scrollTop;
+}
+
+/**
+ * 浏览器视口的高度
+ *
+ * @return {number} 浏览器视口的高度
+ */
+export function getWindowHeight () {
+  const windowHeight = document.compatMode === 'CSS1Compat'
+    ? document.documentElement.clientHeight
+    : document.body.clientHeight;
+
+  return windowHeight;
+}
+
+/**
+ * 简单的 loadScript
+ *
+ * @param {string} url js 地址
+ * @param {Function} callback 回调函数
+ */
+export function loadScript (url, callback) {
+  const script = document.createElement('script');
+  script.async = true;
+  script.src = url;
+
+  script.onerror = () => {
+    callback(new Error(`Failed to load: ${url}`));
+  };
+
+  script.onload = () => {
+    callback();
+  };
+
+  document.getElementsByTagName('head')[0].appendChild(script);
+}
diff --git a/frondend/src/components/CodeEditor.vue b/frondend/src/components/CodeEditor.vue
new file mode 100644
index 00000000..470e7c51
--- /dev/null
+++ b/frondend/src/components/CodeEditor.vue
@@ -0,0 +1,90 @@
+<template>
+  <section class="code-editor" />
+</template>
+<script>
+  import * as monaco from 'monaco-editor';
+
+  const DEFAULT_OPTIONS = {
+    language: 'javascript',
+    theme: 'vs-dark',
+    automaticLayout: true,
+    minimap: {
+      enabled: false,
+    },
+    wordWrap: 'on',
+    wrappingIndent: 'same',
+  };
+  export default {
+    name: 'CodeEditor',
+    props: {
+      value: {
+        type: String,
+        default: '',
+      },
+      options: {
+        type: Object,
+        default () {
+          return {};
+        },
+      },
+    },
+    data () {
+      const editorOptions = Object.assign({}, DEFAULT_OPTIONS, this.options, { value: this.value });
+      return {
+        editorOptions,
+        monacoInstance: null,
+      };
+    },
+    watch: {
+      value (val) {
+        const valInEditor = this.monacoInstance.getValue();
+        if (val !== valInEditor) {
+          this.monacoInstance.setValue(val);
+        }
+      },
+      options: {
+        deep: true,
+        handler (val) {
+          this.editorOptions = Object.assign({}, DEFAULT_OPTIONS, val, { value: this.value });
+          this.updateOptions();
+        },
+      },
+    },
+    mounted () {
+      this.initIntance();
+    },
+    beforeDestroy () {
+      if (this.monacoInstance) {
+        this.monacoInstance.dispose();
+      }
+    },
+    methods: {
+      initIntance () {
+        this.monacoInstance = monaco.editor.create(this.$el, this.editorOptions);
+        const model = this.monacoInstance.getModel();
+        model.setEOL(0); // 设置编辑器在各系统平台下 EOL 统一为 \n
+        if (this.value.indexOf('\r\n') > -1) { // 转换已保存的旧数据
+          const textareaEl = document.createElement('textarea');
+          textareaEl.value = this.value;
+          this.$emit('input', textareaEl.value);
+        }
+        model.onDidChangeContent(() => {
+          const value = this.monacoInstance.getValue();
+          this.$emit('input', value);
+        });
+        this.monacoInstance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, () => {
+          const value = this.monacoInstance.getValue();
+          this.$emit('saveContent', value);
+        });
+      },
+      updateOptions () {
+        this.monacoInstance.updateOptions(this.editorOptions);
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  .code-editor {
+    height: 100%;
+  }
+</style>
diff --git a/frondend/src/css/app.css b/frondend/src/css/app.css
new file mode 100644
index 00000000..27fe1b0b
--- /dev/null
+++ b/frondend/src/css/app.css
@@ -0,0 +1,12 @@
+@import './bk-patch.css';
+
+.full-width {
+  width: 100%;
+}
+
+.center-content {
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/frondend/src/css/bk-patch.css b/frondend/src/css/bk-patch.css
new file mode 100644
index 00000000..23af0438
--- /dev/null
+++ b/frondend/src/css/bk-patch.css
@@ -0,0 +1,8 @@
+.navigation-bar {
+  width: 100%;
+  height: 100%;
+}
+.navigation-bar-container {
+  width: 100%;
+  max-width: 100%;
+}
diff --git a/frondend/src/css/mixins/scroll.css b/frondend/src/css/mixins/scroll.css
new file mode 100644
index 00000000..5edff5d0
--- /dev/null
+++ b/frondend/src/css/mixins/scroll.css
@@ -0,0 +1,10 @@
+@define-mixin scroller $backgroundColor: #e6e9ea, $width: 4px {
+  &::-webkit-scrollbar {
+    width: $width;
+  }
+  &::-webkit-scrollbar-thumb {
+    height: 5px;
+    border-radius: 2px;
+    background-color: $backgroundColor;
+  }
+}
diff --git a/frondend/src/css/reset.css b/frondend/src/css/reset.css
new file mode 100644
index 00000000..56e78043
--- /dev/null
+++ b/frondend/src/css/reset.css
@@ -0,0 +1,47 @@
+/* // 浏览器重置样式 */
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: #eef2f6;
+}
+
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+dl,
+dt,
+dd,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+button {
+  outline: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/frondend/src/css/variable.css b/frondend/src/css/variable.css
new file mode 100644
index 00000000..e4c4f644
--- /dev/null
+++ b/frondend/src/css/variable.css
@@ -0,0 +1,39 @@
+/* 存放常用变量 */
+
+/* 边框色 */
+
+/* 相对较浅，常用于容器边框色 */
+$borderColor: #ebf0f5;
+
+/* 相对较深，常用于输入框边框色 */
+$borderWeightColor: #dde4eb;
+
+/* 字体色 */
+$fontColor: #7b7d8a;
+$fontWeightColor: #737987;
+
+/* 主体 icon 颜色 */
+$iconPrimaryColor: #3c96ff;
+$primaryColor: #3c96ff;
+
+/* 成功 icon 颜色 */
+$iconSuccessColor: #34d97b;
+$successColor: #34d97b;
+
+/* 失败 icon 颜色 */
+$iconFailColor: #ff5656;
+$failColor: #ff5656;
+$dangerColor: #ff5656;
+
+/* warning icon 颜色 */
+$iconWarningColor: #ffb400;
+$warningColor: #ffb400;
+
+/* 淡色 */
+$primaryLightColor: #ebf4ff;
+
+/* 适配宽度 */
+$mediaWidth: 1500px;
+
+/* 背景 hover */
+$bgHoverColor: #fafbfd;
diff --git a/frondend/src/main.js b/frondend/src/main.js
new file mode 100644
index 00000000..f5b80679
--- /dev/null
+++ b/frondend/src/main.js
@@ -0,0 +1,38 @@
+/**
+ * @file main entry
+ */
+
+// import './public-path';
+import Vue from 'vue';
+import App from './App';
+import router from './router/index.js';
+import store from './store/index.js';
+import axios from 'axios';
+
+import bkMagic from 'bk-magic-vue';
+import 'bk-magic-vue/dist/bk-magic-vue.min.css';
+import './css/reset.css';
+
+import $ from 'jquery';
+import * as monaco from 'monaco-editor';
+
+$.atoms = {};
+$.context = {
+  bk_plugin_api_host: {}
+};
+window.$ = $;
+window.monaco = monaco;
+
+Vue.use(bkMagic);
+
+const app = new Vue({
+  el: '#app',
+  router,
+  store,
+  components: {
+    App
+  },
+  template: '<App/>'
+});
+app.$constInfo = {};
+window.app = app;
diff --git a/frondend/src/public-path.js b/frondend/src/public-path.js
new file mode 100644
index 00000000..8ca8c25c
--- /dev/null
+++ b/frondend/src/public-path.js
@@ -0,0 +1,6 @@
+/**
+ * @file webpack public path config
+ */
+
+// eslint-disable-next-line
+__webpack_public_path__ = window.BK_STATIC_URL
diff --git a/frondend/src/router/index.js b/frondend/src/router/index.js
new file mode 100644
index 00000000..dbb6a6f8
--- /dev/null
+++ b/frondend/src/router/index.js
@@ -0,0 +1,33 @@
+/**
+ * @file router 配置
+ */
+
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+import NotFound from '../views/404.vue';
+import EnginePanel from '../views/enginePanel/index.vue';
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: '/',
+    name: 'EnginePanel',
+    component: EnginePanel,
+  },
+  // 404
+  {
+    path: '*',
+    name: '404',
+    component: NotFound,
+  },
+];
+
+const router = new VueRouter({
+  base: window.SITE_URL,
+  mode: 'history',
+  routes,
+});
+
+export default router;
diff --git a/frondend/src/scss/scrollbar.scss b/frondend/src/scss/scrollbar.scss
new file mode 100644
index 00000000..844e0927
--- /dev/null
+++ b/frondend/src/scss/scrollbar.scss
@@ -0,0 +1,11 @@
+@mixin scrollbar { // 页面滚动条
+    &::-webkit-scrollbar {
+        width: 3px;
+        height: 6px;
+        &-thumb {
+            border-radius: 20px;
+            background: #dcdee5;
+            box-shadow: inset 0 0 6px hsla(0,0%,80%,.3);
+        }
+    }
+}
\ No newline at end of file
diff --git a/frondend/src/store/index.js b/frondend/src/store/index.js
new file mode 100644
index 00000000..776cb379
--- /dev/null
+++ b/frondend/src/store/index.js
@@ -0,0 +1,29 @@
+/**
+ * @file main store
+ */
+
+import Vue from 'vue';
+import Vuex from 'vuex';
+import enginePanel from './modules/enginePanel';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  // 模块
+  modules: {
+    enginePanel
+  },
+  // 公共 store
+  state: {
+  },
+  // 公共 getters
+  getters: {
+  },
+  // 公共 mutations
+  mutations: {
+  },
+  actions: {
+  }
+});
+
+export default store;
diff --git a/frondend/src/store/modules/enginePanel.js b/frondend/src/store/modules/enginePanel.js
new file mode 100644
index 00000000..5b3efe9e
--- /dev/null
+++ b/frondend/src/store/modules/enginePanel.js
@@ -0,0 +1,17 @@
+/**
+ * @file enginePanel store
+ */
+import ajax from '../../common/ajax.js';
+
+export default {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {
+    saveActionData (state, data) {
+      const { version, actionName, method, pathId, query } = data;
+      return ajax[method](`api/v1/${version}/${actionName}/${pathId}/`, query).then(response => response);
+    }
+  }
+};
+
diff --git a/frondend/src/views/404.vue b/frondend/src/views/404.vue
new file mode 100644
index 00000000..1b4f1dca
--- /dev/null
+++ b/frondend/src/views/404.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="exception-box">
+    <img src="https://magicbox.bk.tencent.com/static_api/v3/components/exception_building/images/building.png" alt="">
+    <p>{{ '没找到页面！' }}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {}
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .exception-box {
+    text-align: center;
+    margin: 0 auto;
+
+    img {
+      width: 300px;
+      margin-top: 150px;
+    }
+  }
+</style>
diff --git a/frondend/src/views/enginePanel/index.vue b/frondend/src/views/enginePanel/index.vue
new file mode 100644
index 00000000..1291586f
--- /dev/null
+++ b/frondend/src/views/enginePanel/index.vue
@@ -0,0 +1,436 @@
+<template>
+  <div class="engine-panel">
+    <div class="request-panel">
+      <p class="panel-title">请求</p>
+      <bk-form ref="engineForm" :label-width="120" :model="formData" :rules="rules">
+        <bk-form-item label="引擎版本">
+          <bk-select v-model="formData.version" :clearable="false" @selected="handleReset">
+            <bk-option id="bamboo_engine" name="bamboo_engine" />
+            <bk-option id="pipeline_engine" name="pipeline_engine" />
+          </bk-select>
+        </bk-form-item>
+        <bk-form-item label="请求资源" :required="true" :property="'action'">
+          <bk-select v-model="formData.action" :clearable="false" searchable @selected="handleActionSelected">
+            <bk-option
+              v-for="option in actionList"
+              :id="option.id"
+              :key="option.id"
+              :name="option.url"
+            />
+          </bk-select>
+        </bk-form-item>
+        <bk-form-item label="请求方法" :required="true">
+          <bk-select v-model="formData.method" :clearable="false">
+            <bk-option id="post" name="Post" />
+          </bk-select>
+        </bk-form-item>
+        <bk-form-item v-if="formData.path.length" label="路径参数" :required="true">
+          <ul class="path-list">
+            <keyValueFormItem
+              v-for="(pathInfo, index) in formData.path"
+              :key="index"
+              :data="pathInfo"
+              :rules="rules"
+              type="path"
+              :operator="false"
+              :readonly="true"
+              @updateList="updtaeFormList"
+            />
+          </ul>
+        </bk-form-item>
+        <!-- <bk-form-item label="Headers" ext-cls="header-form-item">
+                    <ul class="header-list" v-if="formData.headers.length">
+                        <keyValueFormItem
+                            v-for="(headerInfo, index) in formData.headers"
+                            :key="index"
+                            :data="headerInfo"
+                            :rules="rules"
+                            :index="index"
+                            type="headers"
+                            @updateList="updtaeFormList">
+                        </keyValueFormItem>
+                    </ul>
+                    <bk-button v-else icon="icon-plus-line" @click="updtaeFormList('headers')"></bk-button>
+                </bk-form-item> -->
+        <bk-form-item label="Query" ext-cls="query-form-item">
+          <ul v-if="formData.query.length" class="query-list">
+            <keyValueFormItem
+              v-for="(queryInfo, index) in formData.query"
+              :key="index"
+              :data="queryInfo"
+              :rules="rules"
+              :index="index"
+              type="query"
+              @updateList="updtaeFormList"
+            />
+          </ul>
+          <bk-button v-else icon="icon-plus-line" @click="updtaeFormList('query')" />
+        </bk-form-item>
+        <bk-form-item label="Body">
+          <p class="tip-docs">
+            对应接口参数及参数类型请参考【
+            <a
+              target="target"
+              href="https://github.com/TencentBlueKing/bamboo-engine/blob/master/docs/user_guide/engine_admin_config.md#%E6%93%8D%E4%BD%9C%E5%88%97%E8%A1%A8"
+            >文档</a>
+            】
+          </p>
+          <bk-input
+            v-model="formData.body"
+            placeholder="请输入"
+            :type="'textarea'"
+          />
+        </bk-form-item>
+        <bk-form-item>
+          <bk-popover content="请完善请求信息" :disabled="isAllowRequest" :arrow="false">
+            <bk-button
+              theme="primary"
+              :disabled="!isAllowRequest"
+              @click="handleRequest"
+            >
+              发送请求
+            </bk-button>
+          </bk-popover>
+          <bk-button class="ml5" @click="handleReset()">重置</bk-button>
+        </bk-form-item>
+      </bk-form>
+    </div>
+    <div class="divider" />
+    <div class="response-panel">
+      <p class="panel-title">响应</p>
+      <bk-form v-if="responseInfo.data" :label-width="90">
+        <bk-form-item label="Status:">
+          {{ responseInfo.status || '--' }}
+        </bk-form-item>
+        <bk-form-item class="mt10">
+          <CodeEditor
+            :value="responseInfo.data"
+            :options="{ readOnly: true, language: 'json' }"
+          />
+        </bk-form-item>
+      </bk-form>
+      <p v-else class="unsent">
+        <i class="bk-icon icon-info" />
+        请先发送请求
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+  import keyValueFormItem from './keyValueFormItem';
+  import CodeEditor from '@/components/CodeEditor';
+  import { mapActions } from 'vuex';
+
+  export default {
+    components: {
+      keyValueFormItem,
+      CodeEditor,
+    },
+    data () {
+      return {
+        formData: {
+          version: 'bamboo_engine',
+          action: '',
+          method: 'post',
+          path: [],
+          headers: [],
+          query: [],
+          body: '',
+        },
+        actionList: [
+          {
+            url: '/task_pause/{task_id}',
+            id: 'task_pause',
+            keys: ['task_id'],
+          },
+          {
+            url: '/task_resume/{task_id}',
+            id: 'task_resume',
+            keys: ['task_id'],
+          },
+          {
+            url: '/task_revoke/{task_id}',
+            id: 'task_revoke',
+            keys: ['task_id'],
+          },
+          {
+            url: '/node_retry/{node_id}/',
+            id: 'node_retry',
+            keys: ['node_id', 'inputs'],
+          },
+          {
+            url: '/node_skip/{node_id}/',
+            id: 'node_skip',
+            keys: ['node_id'],
+          },
+          {
+            url: '/node_callback/{node_id}/',
+            id: 'node_callback',
+            keys: ['node_id', 'data', 'version'],
+          },
+          {
+            url: '/node_skip_exg/{node_id}/',
+            id: 'node_skip_exg',
+            keys: ['node_id', 'flow_id'],
+          },
+          {
+            url: '/node_skip_cpg/{node_id}/',
+            id: 'node_skip_cpg',
+            keys: ['node_id', 'flow_ids', 'converge_gateway_id'],
+          },
+          {
+            url: '/node_forced_fail/{node_id}/',
+            id: 'node_forced_fail',
+            keys: ['node_id'],
+          },
+        ],
+        rules: {
+          action: [
+            {
+              required: true,
+              message: '必填项',
+              trigger: 'blur',
+            },
+          ],
+          key: [
+            {
+              required: true,
+              message: '必填项',
+              trigger: 'blur',
+            },
+          ],
+          value: [
+            {
+              required: true,
+              message: '必填项',
+              trigger: 'blur',
+            },
+          ],
+        },
+        responseInfo: {
+          status: null,
+          data: null,
+        },
+      };
+    },
+    computed: {
+      isAllowRequest () {
+        const { action, method } = this.formData;
+        if (action && method) {
+          return true;
+        }
+        return false;
+      },
+    },
+    methods: {
+      ...mapActions('enginePanel', [
+        'saveActionData',
+      ]),
+      handleActionSelected (val) {
+        this.formData.query = [];
+        this.responseInfo = {
+          status: null,
+          data: null,
+        };
+        const actionInfo = this.actionList.find(item => item.id === val);
+        const body = {};
+        const path = [];
+        actionInfo.keys.forEach((key, index) => {
+          if (index === 0) {
+            path.push({
+              key,
+              value: '',
+            });
+          } else {
+            body[key] = '';
+          }
+        });
+        this.formData.path = path;
+        this.formData.body = Object.keys(body).length ? JSON.stringify(body, null, 4) : '';
+      },
+      updtaeFormList (type, index) {
+        if (!type) return;
+        if (index !== undefined) {
+          this.formData[type].splice(index, 1);
+        } else {
+          this.formData[type].push({
+            key: '',
+            value: '',
+          });
+        }
+      },
+      handleRequest () {
+        try {
+          if (!this.isAllowRequest) return;
+          this.responseInfo = {
+            status: null,
+            data: null,
+          };
+          const { path, body } = this.formData;
+          const valueValid = path.length ? path.every(item => item.key && item.value) : true;
+          if (!valueValid) {
+            this.$bkMessage({
+              message: '请输入完整的路径参数',
+              theme: 'error',
+            });
+            return;
+          }
+          let bodyJson = {};
+          if (body) {
+            if (this.checkIsJSON(body)) {
+              bodyJson = JSON.parse(body);
+            } else {
+              this.$bkMessage({
+                message: 'Body格式不正确，应为JSON格式',
+                theme: 'error',
+              });
+              return;
+            }
+          }
+          this.$refs.engineForm.validate().then(async (result) => {
+            if (!result) return;
+            const { version, action, method, path, query } = this.formData;
+            const queryInfo = [...path, ...query].reduce((acc, cur) => {
+              acc[cur.key] = cur.value;
+              return acc;
+            }, {});
+            Object.assign(queryInfo, bodyJson);
+            const pathId = queryInfo.task_id || queryInfo.node_id;
+            this.$delete(queryInfo, 'task_id');
+            this.$delete(queryInfo, 'node_id');
+            const actionInfo = this.actionList.find(item => item.id === action);
+            const params = {
+              version,
+              actionName: actionInfo.id,
+              method,
+              pathId,
+              query: queryInfo,
+            };
+            const response = await this.saveActionData(params);
+            if (response.status === 200) {
+              this.responseInfo = { status: response.status, data: JSON.stringify(response.data, null, 4) };
+            } else {
+              this.responseInfo = { status: null, data: null };
+            }
+          });
+        } catch (error) {
+          console.warn(error);
+        }
+      },
+      checkIsJSON (str) {
+        if (typeof str === 'string') {
+          try {
+            const obj = JSON.parse(str);
+            if (obj && Object.prototype.toString.call(obj) === '[object Object]') {
+              return true;
+            }
+            return false;
+          } catch (e) {
+            return false;
+          }
+        }
+        return false;
+      },
+      handleReset (version = this.formData.version) {
+        this.formData = {
+          version,
+          action: '',
+          method: 'post',
+          path: [],
+          headers: [],
+          query: [],
+          body: '',
+        };
+        this.responseInfo = {
+          status: null,
+          data: null,
+        };
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .engine-panel {
+    display: flex;
+    height: 100%;
+    padding: 24px;
+    background: #f6f7fb;
+    .request-panel {
+      width: 50%;
+      .bk-select {
+        background: #fff;
+      }
+      /deep/.bk-textarea-wrapper {
+        border: none;
+        textarea {
+          min-height: 450px;
+          background: #313238;
+          padding: 10px;
+          border: none;
+          color: #fff;
+          &:focus {
+            background-color: #313238 !important;
+            border: none;
+            color: #fff;
+          }
+        }
+      }
+      /deep/.header-form-item,
+      /deep/.query-form-item {
+        .bk-button {
+          padding: 0;
+          min-width: 32px;
+          i {
+            top: -1px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+    .divider {
+      flex: none;
+      margin: 0 40px;
+      width: 1px;
+      background: #dcdee5;
+    }
+    .response-panel {
+      width: 50%;
+      .unsent {
+        color: #7b7d8a;
+        font-size: 14px;
+        margin-left: 12px;
+      }
+      /deep/.bk-form-item {
+        font-size: 12px;
+        margin-top: 0;
+        .bk-form-content {
+          display: flex;
+          align-items: center;
+        }
+        .unit {
+          color: #63656e;
+          margin-left: 4px;
+        }
+      }
+      .code-editor {
+        height: 460px;
+        width: 100%;
+      }
+    }
+    .panel-title {
+      font-size: 14px;
+      font-weight: 700;
+      color: #313238;
+      margin-bottom: 16px;
+    }
+    .tip-docs {
+      font-size: 14px;
+      color: #7b7d8a;
+      a {
+        color: #3a84ff;
+      }
+    }
+  }
+</style>
diff --git a/frondend/src/views/enginePanel/keyValueFormItem.vue b/frondend/src/views/enginePanel/keyValueFormItem.vue
new file mode 100644
index 00000000..d4e93e33
--- /dev/null
+++ b/frondend/src/views/enginePanel/keyValueFormItem.vue
@@ -0,0 +1,88 @@
+<template>
+  <li class="key-value-item">
+    <bk-form class="key-form" :model="data" :rules="rules" ref="">
+      <bk-form-item :required="true" property="key">
+        <bk-input v-model="data.key" :readonly="readonly" placeholder="键"></bk-input>
+      </bk-form-item>
+    </bk-form>
+    <span class="operator">:</span>
+    <bk-form class="value-form" :model="data" :rules="rules">
+      <bk-form-item :required="true" property="value">
+        <bk-input v-model="data.value" placeholder="值"></bk-input>
+      </bk-form-item>
+    </bk-form>
+    <bk-button v-if="operator" icon="icon-plus-line" class="mr5 ml5" @click="updateList()"></bk-button>
+    <bk-button v-if="operator" icon="icon-minus-line" @click="updateList(index)"></bk-button>
+  </li>
+</template>
+
+<script>
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default: () => ({
+          key: '',
+          value: '',
+        }),
+      },
+      rules: {
+        type: Object,
+        default: () => ({}),
+      },
+      index: {
+        type: Number,
+        default: 0,
+      },
+      type: {
+        type: String,
+        default: '',
+      },
+      operator: {
+        type: Boolean,
+        default: true,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      updateList (index) {
+        this.$emit('updateList', this.type, index)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .key-value-item {
+    display: flex;
+    align-items: center;
+    /deep/.key-form {
+      width: 190px;
+    }
+    /deep/.value-form {
+      flex: 1;
+    }
+    /deep/.bk-form-content {
+      margin-left: 0 !important;
+    }
+    .operator {
+      display: inline-block;
+      width: 20px;
+      font-size: 14px;
+      font-weight: 700;
+      text-align: center;
+      color: #313238;
+      vertical-align: middle;
+    }
+    &:not(:last-child) {
+      margin-bottom: 5px;
+    }
+    .bk-button {
+      padding: 0;
+      min-width: 32px;
+    }
+  }
+</style>