feat：流水线变量语法支持两种风格 #10576

src/frontend/devops-manage/src/components/dialectPopoverTable.vue

@@ -0,0 +1,124 @@
+<template>
+  <bk-popover
+    theme="light"
+    :width="900"
+    extCls="dialect-popover"
+    :componentEventDelay="300"
+    show-overflow-tooltip
+    autoPlacement
+  >
+    <label class="label">{{ t('变量语法风格') }}</label>
+    <template #content>
+      <h3 class="title">{{ t('语法差异') }}</h3>
+      <bk-table :data="namingConventionData" show-overflow-tooltip>
+        <bk-table-column :label="t('差异项')" prop="difference" :width="140">
+          <template #default="{ row }">
+            <div
+              class="label-column"
+            >
+              <p>{{ row.difference }}</p>
+              <p>{{ row.differenceTip }}</p>
+            </div>
+          </template>
+        </bk-table-column>
+        <bk-table-column :label="t('传统风格')" prop="classic" :width="290">
+          <template #default="{ row }">
+            <div
+              class="label-column"
+            >
+              <div v-if="!row.classicKey">
+                <p>{{ row.classic }}</p>
+                <p>{{ row.classicExample }}</p>
+              </div>
+              <div v-else class="classic-desc">
+                  <i18n-t
+                      tag="div"
+                      keypath="仅在流程控制选项X设置中可以使用"
+                  >
+                      <span class="classic-key">{{ t('自定义表达式满足时运行') }}</span>
+                  </i18n-t>
+              </div>
+            </div>
+          </template>
+        </bk-table-column>
+        <bk-table-column :label="t('制约风格')" prop="constrainedMode">
+          <template #default="{ row }">
+            <div
+              class="label-column"
+            >
+              <p>{{ row.constrainedMode }}</p>
+              <p>{{ row.constrainedExample }}</p>
+            </div>
+          </template>
+        </bk-table-column>
+      </bk-table>
+    </template>
+  </bk-popover>
+</template>
+
+<script setup name="DialectPopoverTable">
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+const namingConventionData = [
+    {
+        difference: t('表达式格式'),
+        classic: t('单花括号或双花括号'),
+        classicExample: t('如：${var}、${{var}}'),
+        constrainedMode: t('仅支持双花括号，避免出现 bash 脚本变量在执行前被系统赋值的问题'),
+        constrainedExample: t('如：${{variables.var}}'),
+    },
+    {
+        difference: t('表达式函数'),
+        differenceTip: t('如contains、join、fromJSON'),
+        classic: t('仅在流程控制选项X设置中可以使用'),
+        classicKey: true,
+        constrainedMode: t('流程控制选项、插件入参、Job设置等流水线配置中均可使用函数'),
+        constrainedExample: t('如变量a值为Json字符串，则bash脚本中，可以使用fromJSON读取echo “a.node is ${{fromJSON(a).node}}”')
+    },
+    {
+        difference: t('变量值超长'),
+        classic: t('仅警告未报错'),
+        constrainedMode: t('将报错，运行失败'),
+    },
+    {
+        difference: t('变量不存在'),
+        classic: t('未报错，继续执行，依赖执行逻辑自行检查'),
+        constrainedMode: t('将报错，运行失败'),
+    },
+    {
+        difference: t('变量 ID 规范'),
+        classic: t('未限制'),
+        constrainedMode: t('不支持中文 ID，减少不同构建环境下的兼容问题'),
+    }
+]
+</script>
+
+<style lang="scss" scoped>
+.dialect-popover {
+  padding: 16px !important;
+}  
+.label {
+  font-size: 12px;
+  padding: 4px 0;
+  border-bottom: 1px dashed #979BA5;
+}
+.title {
+  margin-bottom: 16px;
+  font-weight: 700;
+  font-size: 14px;
+  color: #63656E;
+}
+.label-column {
+  padding: 4px 0;
+  p {
+    line-height: 20px;
+    white-space: pre-wrap;
+  }
+}
+.classic-desc {
+  white-space: pre-wrap;
+}
+.classic-key {
+  font-weight: 700;
+}
+</style>

src/frontend/devops-manage/src/components/project-form.vue

@@ -14,6 +14,7 @@ import IAMIframe from './IAM-Iframe';
 import { useI18n } from 'vue-i18n';
 import { Message, Popover } from 'bkui-vue';
 import http from '@/http/api';
+import DialectPopoverTable from "@/components/dialectPopoverTable.vue";
 const {
   t,
 } = useI18n();
@@ -468,6 +469,24 @@ onBeforeUnmount(() => {
         @click="showMemberDialog"
       />
     </bk-form-item>
+    <bk-form-item
+      property="pipelineDialect"
+    >
+      <template #label>
+        <dialect-popover-table />
+      </template>
+      <bk-radio-group
+        v-model="projectData.pipelineDialect"
+        @change="handleChangeForm"
+      >
+        <bk-radio label="CLASSIC">
+          <span>{{ t('传统风格') }}</span>
+        </bk-radio>
+        <bk-radio label="CONSTRAINED">
+          <span>{{ t('制约风格') }}</span>
+        </bk-radio>
+      </bk-radio-group>
+    </bk-form-item>
     <div>
       <slot></slot>
     </div>

src/frontend/devops-manage/src/components/user-group/components/children/permission-manage/group-aside.vue

@@ -37,7 +37,7 @@
       </div>
       <div class="line-split" v-if="!isNotProject" />
     </template>
-    <bk-loading v-if="dataLoaded" :loading="fetchGroupLoading">
+    <bk-loading v-if="dataLoaded" :loading="fetchGroupLoading"  class='saide-content'>
       <scroll-load-list
         class="group-list"
         ref="loadList"
@@ -526,6 +526,10 @@ export default {
     margin-bottom: 5px;
   }
 }
+.saide-content {
+  height: 100%;
+  overflow-y: auto;
+}
 .group-list {
   max-height: calc(100% - 70px);
   min-height: 80px;

src/frontend/devops-manage/src/views/apply-project.vue

@@ -28,6 +28,7 @@ const projectData = ref({
   subjectScopes: [],
   secrecy: false,
   authSecrecy: 0,
+  pipelineDialect: 'CLASSIC',
 });
 const projectForm = ref(null);
 const btnLoading = ref(false);

src/frontend/devops-manage/src/views/manage/project/edit-project.vue

@@ -32,13 +32,16 @@ const statusDisabledTips = {
   1: t('新建项目申请审批中，暂不可修改'),
   4: t('更新项目信息审批中，暂不可修改'),
 };
+const currentDialect = ref();
+const isDialectDialog = ref(false);
 
 const fetchProjectData = async () => {
   isLoading.value = true;
   await http.requestProjectData({
     englishName: projectCode,
   }).then((res) => {
     projectData.value = res;
+    currentDialect.value = res.pipelineDialect;
     if (projectData.value.centerId === '0') projectData.value.centerId = ''
     if (projectData.value.projectType === 0) projectData.value.projectType = ''
   }).catch((err) => {
@@ -144,11 +147,28 @@ const showNeedApprovedTips = () => {
 /**
  * 更新项目
  */
-const handleUpdate = async () => {
+const handleUpdate = () => {
+  if(currentDialect.value === 'CLASSIC' && projectData.value.pipelineDialect === 'CONSTRAINED'){
+    isDialectDialog.value = true;
+    return
+  }
+  updateConfirm()
+};
+
+const updateConfirm = async () => {
   projectForm.value?.validate().then(async () => {
     await updateProject();
   })
-};
+}
+
+const handleConfirm = () => {
+  isDialectDialog.value = false;
+  updateConfirm()
+}
+
+const handleClosed = () => {
+  isDialectDialog.value = false;
+}
 
 const initProjectForm = (value) => {
   projectForm.value = value;
@@ -228,6 +248,27 @@ onMounted(() => {
       </bk-button>
     </bk-exception>
   </bk-loading>
+  <bk-dialog
+    :width="480"
+    header-align="center"
+    footer-align="center"
+    :is-show="isDialectDialog"
+    @confirm="handleConfirm"
+    @closed="handleClosed"
+  >
+    <template #header>
+      <img src="@/css/svg/warninfo.svg" class="manage-icon-tips">
+      <h2 class="dialog-header"> {{ t('确定升级变量语法风格为制约风格？')}}</h2>
+    </template>
+    <template #default>
+      <div class="project">
+        {{ t('项目：') }} <span class="project-name">{{ projectData.projectName }}</span>
+      </div>
+      <div class="description">
+        {{ t('升级后，该项目对变量引用方式将有更严格的要求。') }}
+      </div>
+    </template>
+  </bk-dialog>
 </template>
 
 <style lang="postcss" scoped>
@@ -269,4 +310,34 @@ onMounted(() => {
       width: 88px;
     }
   }
+  .manage-icon-tips {
+    width: 42px;
+    height: 42px;
+  }
+  .dialog-header {
+    font-family: MicrosoftYaHei;
+    font-size: 20px;
+    color: #313238;
+    letter-spacing: 0;
+  }
+  .progect {
+    font-size: 14px;
+    color: #63656E;
+    .project-name {
+      color: #313238;
+      font-weight: bold;
+    }
+  }
+  .description {
+    display: flex;
+    align-items: center;
+    width: 416px;
+    height: 46px;
+    padding: 0 16px;
+    margin: 16px 0;
+    background: #F5F6FA;
+    border-radius: 2px;
+    font-size: 14px;
+    color: #63656E;
+  }
 </style>

src/frontend/devops-manage/src/views/manage/project/show-project.vue

@@ -21,6 +21,7 @@ import {
 useRoute,
 useRouter,
 } from 'vue-router';
+import DialectPopoverTable from "@/components/dialectPopoverTable.vue";
 
 const { t } = useI18n();
 const router = useRouter();
@@ -301,6 +302,10 @@ const projectTypeNameMap = {
   4: t('平台产品'),
   5: t('支撑产品'),
 }
+const pipelineDialectMap = {
+  'CLASSIC': t('传统风格'),
+  'CONSTRAINED': t('制约风格'),
+}
 watch(() => projectData.value.approvalStatus, (status) => {
   if (status === 4) fetchDiffProjectData();
 }, {
@@ -412,6 +417,20 @@ onMounted(async () => {
                     </bk-tag>
                   </div>
                 </bk-form-item>
+                <bk-form-item property="pipelineDialect">
+                  <template #label>
+                    <dialect-popover-table />
+                  </template>
+                  <div>
+                    <span>{{ pipelineDialectMap[projectData.pipelineDialect] }}</span>
+                    <div class="diff-content" v-if="projectData.afterPipelineDialect">
+                      <p class="update-title">
+                        {{ t('本次更新：') }}
+                      </p>
+                      <span>{{ pipelineDialectMap[projectData.afterPipelineDialect] }}</span>
+                    </div>
+                  </div>
+                </bk-form-item>
                 <bk-form-item>
                   <!--
                     approvalStatus