From 3fa6160b775046b6bb4bbf1720aa3b233cd3a158 Mon Sep 17 00:00:00 2001 From: Yuikill <105910874+Yuikill@users.noreply.github.com> Date: Thu, 29 Feb 2024 19:57:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=20=E5=89=8D=E7=AB=AF=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E6=8F=90=E7=A4=BA=E5=8A=9F=E8=83=BD--task=3D?= =?UTF-8?q?74870924=20(#2994)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 新建脚本支持变量提示功能 * fix: 调整新建脚本版本号为必填项 * feat: 替换变量图标 --- .../ui/src/components/diff/navigator.vue | 1 - bcs-services/bcs-bscp/ui/src/i18n/en-us.ts | 8 ++ bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts | 8 ++ .../scripts/components/internal-variable.vue | 121 ++++++++++++++++++ .../scripts/components/script-editor.vue | 42 +++++- .../space/scripts/list/create-script.vue | 31 ++++- .../detail/components/service-selector.vue | 1 - 7 files changed, 199 insertions(+), 13 deletions(-) create mode 100644 bcs-services/bcs-bscp/ui/src/views/space/scripts/components/internal-variable.vue diff --git a/bcs-services/bcs-bscp/ui/src/components/diff/navigator.vue b/bcs-services/bcs-bscp/ui/src/components/diff/navigator.vue index f1f708285d..2541c8dedb 100644 --- a/bcs-services/bcs-bscp/ui/src/components/diff/navigator.vue +++ b/bcs-services/bcs-bscp/ui/src/components/diff/navigator.vue @@ -155,7 +155,6 @@ background: #63656e; border-radius: 2px; .number { - font-family: MicrosoftYaHei; font-size: 12px; color: #c4c6cc; } diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts index c45acd5e7a..a7e8f3b3ae 100644 --- a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts +++ b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts @@ -523,6 +523,14 @@ export default { 脚本类型: 'Script type', form_版本号: 'Version number', 上线版本成功: 'Online version successful', + 内置变量: 'Internal variables', + '客户端配置的配置存放临时目录（temp_dir），默认值为 /data/bscp': 'The client configuration directory is temp dir. The default value is /data/bscp', + '蓝鲸配置平台上的业务ID，例如：2': 'Service ID on the bscp, for example, 2', + '服务配置中心上的服务名称，例如：demo_service': 'bscp service name, for example, demo service', + '单个客户端可使用多个服务的配置，为保证路径唯一，服务配置需存放于：配置根目录/业务ID/服务名称，服务配置存放目录 = 配置存放根目录/业务ID/服务名称': 'A client can use multiple service configurations. To ensure a unique path, service configurations must be saved in the following directory: Configuration root directory/service ID/ service name. Service configuration directory = Configuration root directory/service ID/ service name', + 配置根目录: 'Configuring the root directory', + 业务ID: 'BusinessID', + 服务配置目录: 'Service configuration directory', // 服务密钥 '密钥仅用于 SDK/API 拉取配置使用。服务管理/配置管理/分组管理等功能的权限申请，请前往': 'The key is only used for SDK/API pull configurations. To apply for permissions for functions such as service management/configuration management/group management, please go to', diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts index 13a45fe147..dfefb1a8a3 100644 --- a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts +++ b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts @@ -523,6 +523,14 @@ export default { 脚本类型: '脚本类型', form_版本号: '版本号', 上线版本成功: '上线版本成功', + 内置变量: '内置变量', + '客户端配置的配置存放临时目录（temp_dir），默认值为 /data/bscp': '客户端配置的配置存放临时目录（temp_dir），默认值为 /data/bscp', + '蓝鲸配置平台上的业务ID，例如：2': '蓝鲸配置平台上的业务ID，例如：2', + '服务配置中心上的服务名称，例如：demo_service': '服务配置中心上的服务名称，例如：demo_service', + '单个客户端可使用多个服务的配置，为保证路径唯一，服务配置需存放于：配置根目录/业务ID/服务名称，服务配置存放目录 = 配置存放根目录/业务ID/服务名称': '单个客户端可使用多个服务的配置，为保证路径唯一，服务配置需存放于：配置根目录/业务ID/服务名称，服务配置存放目录 = 配置存放根目录/业务ID/服务名称', + 配置根目录: '配置根目录', + 业务ID: '业务ID', + 服务配置目录: '服务配置目录', // 服务密钥 '密钥仅用于 SDK/API 拉取配置使用。服务管理/配置管理/分组管理等功能的权限申请，请前往': '密钥仅用于 SDK/API 拉取配置使用。服务管理/配置管理/分组管理等功能的权限申请，请前往', diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/components/internal-variable.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/components/internal-variable.vue new file mode 100644 index 0000000000..ff86e55461 --- /dev/null +++ b/bcs-services/bcs-bscp/ui/src/views/space/scripts/components/internal-variable.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/bcs-services/bcs-bscp/ui/src/views/space/scripts/components/script-editor.vue b/bcs-services/bcs-bscp/ui/src/views/space/scripts/components/script-editor.vue index 3b64938b8d..83f29891e0 100644 --- a/bcs-services/bcs-bscp/ui/src/views/space/scripts/components/script-editor.vue +++ b/bcs-services/bcs-bscp/ui/src/views/space/scripts/components/script-editor.vue @@ -6,6 +6,14 @@
+ +
@@ -60,6 +69,7 @@ const props = withDefaults( defineProps<{ modelValue: string; + isShowVariable?: boolean; language?: string; editable?: boolean; uploadIcon?: boolean; @@ -70,7 +80,7 @@ }, ); - const emits = defineEmits(['update:modelValue']); + const emits = defineEmits(['update:modelValue', 'update:isShowVariable']); const isOpenFullScreen = ref(false); @@ -122,11 +132,15 @@ .head-title { flex: 1; } - .action-icon { - color: #979ba5; - cursor: pointer; - &:hover { - color: #3a84ff; + .actions { + display: flex; + align-items: center; + .action-icon { + color: #979ba5; + cursor: pointer; + &:hover { + color: #3a84ff; + } } } } @@ -136,4 +150,20 @@ .pre-content { height: 100%; } + .bk-bscp-icon { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 12px; + width: 24px; + height: 24px; + margin-right: 10px; + color: #979ba5; + cursor: pointer; + } + .show-var { + background: #000000; + border-radius: 2px; + color: #bdbfc5; + } 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 b8d073a464..ca091cd27b 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 @@ -28,12 +28,12 @@ :maxlength="200" :resize="true" /> - + -
- +
+ +
@@ -69,6 +72,7 @@ import { createScript, getScriptTagList } from '../../../../api/script'; import DetailLayout from '../components/detail-layout.vue'; import ScriptEditor from '../components/script-editor.vue'; + import InternalVariable from '../components/internal-variable.vue'; import dayjs from 'dayjs'; const { spaceId } = storeToRefs(useGlobalStore()); @@ -95,8 +99,8 @@ revision_name: `v${dayjs().format('YYYYMMDDHHmmss')}`, }); const formDataContent = ref({ - shell: '#!/bin/bash', - python: '#!/usr/bin/env python\n# -*- coding: utf8 -*-', + shell: '#!/bin/bash\n##### 进入配置文件存放目录： cd ${bk_bscp_app_temp_dir}/files\n##### 进入前/后置脚本存放目录： cd ${bk_bscp_app_temp_dir}/hooks', + python: '#!/usr/bin/env python\n# -*- coding: utf8 -*-\n##### 进入配置文件存放目录： config_dir = os.environ.get(‘bk_bscp_app_temp_dir’)+”/files”;os.chdir(config_dir)\n##### 进入前/后置脚本存放目录： hook_dir = os.environ.get(‘bk_bscp_app_temp_dir’)+”/hooks”;os.chdir(hook_dir)', }); const showContent = computed({ get: () => (formData.value.type === 'shell' ? formDataContent.value.shell : formDataContent.value.python), @@ -104,6 +108,7 @@ formData.value.type === 'shell' ? (formDataContent.value.shell = val) : (formDataContent.value.python = val); }, }); + const isShowVariable = ref(true); const rules = { name: [ @@ -189,6 +194,13 @@ .script-content-wrapper { min-width: 520px; } + .show-variable { + :deep(.script-editor) { + .code-editor-wrapper { + width: calc(100% - 272px); + } + } + } .language-tabs { display: flex; @@ -215,4 +227,13 @@ min-width: 88px; } } + + :deep(.script-editor) { + .content-wrapper { + display: flex; + } + .code-editor-wrapper { + width: 100%; + } + } diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/service-selector.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/service-selector.vue index 64f968b9a5..cba93b6f05 100644 --- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/service-selector.vue +++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/service-selector.vue @@ -159,7 +159,6 @@ padding: 0 24px 0 10px; line-height: 1; font-size: 14px; - font-family: MicrosoftYaHei; color: #313238; background: #f0f1f5; border-radius: 2px;