Skip to content

Commit

Permalink
feat: 前端支持变量提示功能--task=74870924 (#2994)
Browse files Browse the repository at this point in the history
* feat: 新建脚本支持变量提示功能

* fix: 调整新建脚本版本号为必填项

* feat: 替换变量图标
  • Loading branch information
Yuikill authored Feb 29, 2024
1 parent afed57a commit 3fa6160
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 13 deletions.
1 change: 0 additions & 1 deletion bcs-services/bcs-bscp/ui/src/components/diff/navigator.vue
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,6 @@
background: #63656e;
border-radius: 2px;
.number {
font-family: MicrosoftYaHei;
font-size: 12px;
color: #c4c6cc;
}
Expand Down
8 changes: 8 additions & 0 deletions bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
8 changes: 8 additions & 0 deletions bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 拉取配置使用。服务管理/配置管理/分组管理等功能的权限申请,请前往',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<template>
<div class="var-wrap">
<div class="title">{{ t('内置变量') }}</div>
<div v-for="(item, index) in varList" :key="index" class="var-item">
<div class="var-content">
<div class="cn-name">
{{ item.cnName }} <InfoLine v-bk-tooltips="{ content: item.tips }" class="info-icon" />
</div>
<bk-overflow-title type="tips" :key="language">
{{ language === 'shell' ? item.shellVar : item.pythonVar }}
</bk-overflow-title>
</div>
<div class="copy-btn"><Copy @click="handleCopyVar(language === 'shell' ? item.shellVar : item.pythonVar)" /></div>
</div>
</div>
</template>

<script lang="ts" setup>
import { InfoLine, Copy } from 'bkui-vue/lib/icon';
import { copyToClipBoard } from '../../../../utils';
import { Message } from 'bkui-vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
defineProps<{
language: string;
}>();
const varList = [
{
cnName: t('配置根目录'),
shellVar: '${bk_bscp_temp_dir}',
pythonVar: 'os.environn.get( \'bk_bscp_temp_dir\' )',
tips: t('客户端配置的配置存放临时目录(temp_dir),默认值为 /data/bscp'),
},
{
cnName: t('业务ID'),
shellVar: '${bk_bscp_biz}',
pythonVar: 'os.environn.get( \'bk_bscp_biz\' )',
tips: t('蓝鲸配置平台上的业务ID,例如:2'),
},
{
cnName: t('服务名称'),
shellVar: '${bk_bscp_app}',
pythonVar: 'os.environn.get( \'bk_bscp_app\' )',
tips: t('服务配置中心上的服务名称,例如:demo_service'),
},
{
cnName: t('服务配置目录'),
shellVar: '${bk_bscp_app_temp_dir}',
pythonVar: 'os.environn.get( \'bk_bscp_app_temp_dir\' )',
tips: t(
'单个客户端可使用多个服务的配置,为保证路径唯一,服务配置需存放于:配置根目录/业务ID/服务名称,服务配置存放目录 = 配置存放根目录/业务ID/服务名称',
),
},
];
const handleCopyVar = (text: string) => {
copyToClipBoard(text);
Message({
theme: 'success',
message: t('变量名已复制'),
});
};
</script>

<style scoped lang="scss">
.var-wrap {
padding: 8px 16px;
width: 272px;
height: 100%;
line-height: 20px;
background: #2e2e2e;
border-top: 1px solid #181818;
.title {
margin-bottom: 12px;
font-weight: 700;
font-size: 14px;
color: #979ba5;
}
.var-item {
display: flex;
justify-content: space-between;
padding: 8px 16px;
width: 240px;
color: #8a8f99;
font-size: 12px;
border-top: 1px solid #000;
&:last-child {
border-bottom: 1px solid #000;
}
.var-content {
width: 180px;
.cn-name {
display: flex;
align-items: center;
.info-icon {
font-size: 14px;
margin-left: 8px;
}
}
}
.copy-btn {
display: none;
font-size: 14px;
line-height: 40px;
span {
cursor: pointer;
}
}
&:hover {
background: #292929;
.copy-btn {
display: block;
}
}
}
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@
<slot name="header"></slot>
</div>
<div class="actions">
<span
v-bk-tooltips="{
content: t('内置变量'),
placement: 'top',
distance: 20,
}"
:class="['bk-bscp-icon', 'icon-variable', { 'show-var': isShowVariable }]"
@click="emits('update:isShowVariable',!isShowVariable)"></span>
<ReadFileContent
v-if="props.uploadIcon"
v-bk-tooltips="{
Expand Down Expand Up @@ -43,6 +51,7 @@
:editable="props.editable"
:language="props.language"
@change="emits('update:modelValue', $event)" />
<slot name="sufContent" :fullscreen="isOpenFullScreen" :is-show-variable="isShowVariable"></slot>
</div>
</div>
</Teleport>
Expand All @@ -60,6 +69,7 @@
const props = withDefaults(
defineProps<{
modelValue: string;
isShowVariable?: boolean;
language?: string;
editable?: boolean;
uploadIcon?: boolean;
Expand All @@ -70,7 +80,7 @@
},
);
const emits = defineEmits(['update:modelValue']);
const emits = defineEmits(['update:modelValue', 'update:isShowVariable']);
const isOpenFullScreen = ref(false);
Expand Down Expand Up @@ -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;
}
}
}
}
Expand All @@ -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;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@
:maxlength="200"
:resize="true" />
</bk-form-item>
<bk-form-item class="fixed-width-form" property="revision_name" :label="t('form_版本号')">
<bk-form-item class="fixed-width-form" property="revision_name" :label="t('form_版本号')" required>
<bk-input v-model="formData.revision_name" :placeholder="t('请输入')"></bk-input>
</bk-form-item>
<bk-form-item :label="t('脚本内容')" property="content" required>
<div class="script-content-wrapper">
<ScriptEditor v-model="showContent" :language="formData.type">
<div :class="['script-content-wrapper', { 'show-variable': isShowVariable }]">
<ScriptEditor v-model="showContent" :language="formData.type" v-model:is-show-variable="isShowVariable">
<template #header>
<div class="language-tabs">
<div
Expand All @@ -45,6 +45,9 @@
</div>
</div>
</template>
<template #sufContent>
<InternalVariable v-if="isShowVariable" :language="formData.type"/>
</template>
</ScriptEditor>
</div>
</bk-form-item>
Expand All @@ -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());
Expand All @@ -95,15 +99,16 @@
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),
set: (val) => {
formData.value.type === 'shell' ? (formDataContent.value.shell = val) : (formDataContent.value.python = val);
},
});
const isShowVariable = ref(true);
const rules = {
name: [
Expand Down Expand Up @@ -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;
Expand All @@ -215,4 +227,13 @@
min-width: 88px;
}
}
:deep(.script-editor) {
.content-wrapper {
display: flex;
}
.code-editor-wrapper {
width: 100%;
}
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 3fa6160

Please sign in to comment.