feat: 前端支持变量提示功能--task=74870924

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;
       }

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',

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 拉取配置使用。服务管理/配置管理/分组管理等功能的权限申请，请前往',

bcs-services/bcs-bscp/ui/src/views/space/scripts/components/internal-variable.vue

@@ -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>

bcs-services/bcs-bscp/ui/src/views/space/scripts/components/script-editor.vue

@@ -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="{
@@ -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>
@@ -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;
+  }
 </style>

bcs-services/bcs-bscp/ui/src/views/space/scripts/list/create-script.vue

@@ -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
@@ -45,6 +45,9 @@
                     </div>
                   </div>
                 </template>
+                <template #sufContent>
+                  <InternalVariable v-if="isShowVariable" :language="formData.type"/>
+                </template>
               </ScriptEditor>
             </div>
           </bk-form-item>
@@ -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,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: [
@@ -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%;
+    }
+  }
 </style>

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;