diff --git a/src/frontend/devops-pipeline/package.json b/src/frontend/devops-pipeline/package.json
index d86bac00ba61..e3002e0c948d 100755
--- a/src/frontend/devops-pipeline/package.json
+++ b/src/frontend/devops-pipeline/package.json
@@ -5,7 +5,7 @@
     "private": true,
     "author": "",
     "scripts": {
-        "dev": "nx exec -- webpack-cli serve --mode development --progress",
+        "dev": "webpack-cli serve --mode development --progress",
         "dll": "webpack --mode production --config webpack.dll.config.js",
         "public": "npm run dll && webpack --mode production",
         "public:dev": "cross-env NODE_ENV=dev  npm run public --",
diff --git a/src/frontend/devops-pipeline/src/components/AtomFormComponent/Parameter/index.vue b/src/frontend/devops-pipeline/src/components/AtomFormComponent/Parameter/index.vue
index 89fe028a61ab..3d693fcab9ee 100755
--- a/src/frontend/devops-pipeline/src/components/AtomFormComponent/Parameter/index.vue
+++ b/src/frontend/devops-pipeline/src/components/AtomFormComponent/Parameter/index.vue
@@ -20,6 +20,7 @@
                 :list-type="parameter.keyListType"
                 :url="parameter.keyUrl"
                 :list="parameter.keyList"
+                :title="parameter.key"
             ></parameter-input>
             <span class="input-seg">=</span>
             <parameter-input
@@ -34,6 +35,7 @@
                 :list-type="parameter.valueListType"
                 :url="parameter.valueUrl"
                 :list="parameter.valueList"
+                :title="parameter.value"
             ></parameter-input>
             <bk-checkbox
                 @change="updateParameters"
@@ -49,6 +51,7 @@
 <script>
     import mixins from '../mixins'
     import parameterInput from './parameterInput'
+    import { isObject } from '@/utils/util'
 
     export default {
         name: 'parameter',
@@ -141,7 +144,12 @@
 
                 this.isLoading = true
                 this.$ajax.get(url).then((res) => {
-                    const data = res.data || []
+                    const data = res.data.map(i => {
+                        return {
+                            ...i,
+                            value: isObject(i.value) ? JSON.stringify(i.value) : i.value
+                        }
+                    })
                     this.parameters = data
                     this.setValue()
                 }).catch(e => this.$showTips({ message: e.message, theme: 'error' })).finally(() => (this.isLoading = false))
@@ -169,6 +177,9 @@
                     if (Array.isArray(param.value)) { // 去掉空字符串, 空字符串无意义
                         param.value = param.value.filter(v => v !== '')
                     }
+                    if (isObject(param.value)) {
+                        param.value = JSON.stringify(param.value)
+                    }
                 })
                 this.updateParameters()
             },
diff --git a/src/frontend/devops-pipeline/src/components/AtomFormComponent/SubParameter/index.vue b/src/frontend/devops-pipeline/src/components/AtomFormComponent/SubParameter/index.vue
index e66eafa31e5a..a73391a705ba 100644
--- a/src/frontend/devops-pipeline/src/components/AtomFormComponent/SubParameter/index.vue
+++ b/src/frontend/devops-pipeline/src/components/AtomFormComponent/SubParameter/index.vue
@@ -40,6 +40,7 @@
                     <bk-input
                         class="input-com"
                         :disabled="disabled"
+                        :title="parameter.value"
                         :value="parameter.value"
                         @change="(val) => handleChangeValue(val, index)"
                     />
@@ -56,6 +57,7 @@
 
 <script>
     import mixins from '../mixins'
+    import { isObject } from '@/utils/util'
     export default {
         name: 'sub-parameter',
         mixins: [mixins],
@@ -102,7 +104,12 @@
             initData () {
                 let values = this.atomValue[this.name] || []
                 if (!Array.isArray(values)) values = JSON.parse(values)
-                this.parameters = values
+                this.parameters = values.map(i => {
+                    return {
+                        ...i,
+                        value: isObject(i.value) ? JSON.stringify(i.value) : i.value
+                    }
+                })
             },
             addParam () {
                 this.parameters.push({
@@ -115,10 +122,14 @@
                 this.updateParameters()
             },
 
-            handleChangeKey (val, index) {
-                this.parameters[index].key = val
-                const defaultValue = this.subParamsKeyList.find(i => i.key === val)?.value
-                if (defaultValue) this.parameters[index].value = defaultValue
+            handleChangeKey (key, index) {
+                this.parameters[index].key = isObject(key) ? JSON.stringify(key) : key
+                const defaultValue = this.subParamsKeyList.find(i => i.key === key)?.value
+                if (defaultValue) {
+                    this.parameters[index].value = isObject(defaultValue) ? JSON.stringify(defaultValue) : defaultValue
+                } else {
+                    this.parameters[index].value = ''
+                }
                 this.updateParameters()
             },
 
@@ -130,7 +141,7 @@
             updateParameters () {
                 const res = this.parameters.map((parameter) => {
                     const key = parameter.key
-                    const value = parameter.value
+                    const value = isObject(parameter.value) ? JSON.stringify(parameter.value) : parameter.value
                     return { key, value }
                 })
                 this.handleChange(this.name, String(JSON.stringify(res)))
diff --git a/src/frontend/devops-pipeline/src/components/ContainerPropertyPanel/BuildParams.vue b/src/frontend/devops-pipeline/src/components/ContainerPropertyPanel/BuildParams.vue
index 42f98b16fc51..9f9066c780ff 100755
--- a/src/frontend/devops-pipeline/src/components/ContainerPropertyPanel/BuildParams.vue
+++ b/src/frontend/devops-pipeline/src/components/ContainerPropertyPanel/BuildParams.vue
@@ -42,9 +42,10 @@
                         >
                             <accordion
                                 v-for="(param, index) in globalParams"
-                                condition
                                 :key="param.paramIdKey"
-                                :is-error="errors.any(`param-${param.id}`)"
+                                :is-error="errors.any(`param-${param.id}`)
+                                    || errors.any(`param-${param.id}-repo-name`)
+                                    || errors.any(`param-${param.id}-branch`)"
                             >
                                 <header
                                     class="param-header"
@@ -53,16 +54,29 @@
                                     <span>
                                         <bk-popover
                                             style="vertical-align: middle"
-                                            v-if="errors.all(`param-${param.id}`).length"
+                                            v-if="(errors.all(`param-${param.id}`).length || errors.all(`param-${param.id}-repo-name`).length || errors.all(`param-${param.id}-branch`).length)"
                                             placement="top"
                                         >
                                             <i class="bk-icon icon-info-circle-shape"></i>
                                             <div slot="content">
                                                 <p
-                                                    v-for="error in errors.all(`param-${param.id}`)"
+                                                    v-for="error in (errors.all(`param-${param.id}`))"
                                                     :key="error"
                                                 >
                                                     {{ error }}</p>
+                                                <p
+                                                    v-for="error in (errors.all(`param-${param.id}-repo-name`))"
+                                                    :key="error"
+                                                >
+                                                    {{ error }}</p>
+                                                    
+                                                <template v-if="!errors.all(`param-${param.id}-repo-name`).length">
+                                                    <p
+                                                        v-for="error in (errors.all(`param-${param.id}-branch`))"
+                                                        :key="error"
+                                                    >
+                                                        {{ error }}</p>
+                                                </template>
                                             </div>
                                         </bk-popover>
                                         {{ param.id }}
@@ -133,122 +147,124 @@
                                                 :value="param.id"
                                             />
                                         </bk-form-item>
-                                        <bk-form-item
-                                            v-if="!isFileParam(param.type)"
-                                            label-width="auto"
-                                            class="flex-col-span-1"
-                                            :label="$t(`editPage.${getParamsDefaultValueLabel(param.type)}`)"
-                                            :required="isBooleanParam(param.type)"
-                                            :is-error="errors.has(`param-${param.id}.defaultValue`)"
-                                            :error-msg="errors.first(`param-${param.id}.defaultValue`)"
-                                            :desc="$t(`editPage.${getParamsDefaultValueLabelTips(param.type)}`)"
-                                        >
-                                            <selector
-                                                style="max-width: 250px"
-                                                :popover-min-width="250"
-                                                v-if="isSelectorParam(param.type)"
-                                                :handle-change="(name, value) => handleUpdateParam(name, value, index)"
-                                                :list="transformOpt(param.options)"
-                                                :multi-select="isMultipleParam(param.type)"
-                                                name="defaultValue"
-                                                :data-vv-scope="`param-${param.id}`"
-                                                :placeholder="$t('editPage.defaultValueTips')"
-                                                :disabled="disabled"
-                                                show-select-all
-                                                :key="param.type"
-                                                :value="getSelectorDefaultVal(param)"
+                                        <template v-if="!isRepoParam(param.type)">
+                                            <bk-form-item
+                                                v-if="!isFileParam(param.type)"
+                                                label-width="auto"
+                                                class="flex-col-span-1"
+                                                :label="$t(`editPage.${getParamsDefaultValueLabel(param.type)}`)"
+                                                :required="isBooleanParam(param.type)"
+                                                :is-error="errors.has(`param-${param.id}.defaultValue`)"
+                                                :error-msg="errors.first(`param-${param.id}.defaultValue`)"
+                                                :desc="$t(`editPage.${getParamsDefaultValueLabelTips(param.type)}`)"
                                             >
-                                            </selector>
-                                            <enum-input
-                                                v-if="isBooleanParam(param.type)"
-                                                name="defaultValue"
-                                                :list="boolList"
-                                                :disabled="disabled"
-                                                :data-vv-scope="`param-${param.id}`"
-                                                :handle-change="(name, value) => handleUpdateParam(name, value, index)"
-                                                :value="param.defaultValue"
+                                                <selector
+                                                    style="max-width: 250px"
+                                                    :popover-min-width="250"
+                                                    v-if="isSelectorParam(param.type)"
+                                                    :handle-change="(name, value) => handleUpdateParam(name, value, index)"
+                                                    :list="transformOpt(param.options)"
+                                                    :multi-select="isMultipleParam(param.type)"
+                                                    name="defaultValue"
+                                                    :data-vv-scope="`param-${param.id}`"
+                                                    :placeholder="$t('editPage.defaultValueTips')"
+                                                    :disabled="disabled"
+                                                    show-select-all
+                                                    :key="param.type"
+                                                    :value="getSelectorDefaultVal(param)"
+                                                >
+                                                </selector>
+                                                <enum-input
+                                                    v-if="isBooleanParam(param.type)"
+                                                    name="defaultValue"
+                                                    :list="boolList"
+                                                    :disabled="disabled"
+                                                    :data-vv-scope="`param-${param.id}`"
+                                                    :handle-change="(name, value) => handleUpdateParam(name, value, index)"
+                                                    :value="param.defaultValue"
+                                                >
+                                                </enum-input>
+                                                <vuex-input
+                                                    v-if="isStringParam(param.type) || isSvnParam(param.type) || isGitParam(param.type)"
+                                                    :disabled="disabled"
+                                                    :handle-change="(name, value) => handleUpdateParam(name, value, index)"
+                                                    name="defaultValue"
+                                                    :click-unfold="true"
+                                                    :data-vv-scope="`param-${param.id}`"
+                                                    :placeholder="$t('editPage.defaultValueTips')"
+                                                    :value="param.defaultValue"
+                                                />
+                                                <vuex-textarea
+                                                    v-if="isTextareaParam(param.type)"
+                                                    :click-unfold="true"
+                                                    :hover-unfold="true"
+                                                    :disabled="disabled"
+                                                    :handle-change="(name, value) => handleUpdateParam(name, value, index)"
+                                                    name="defaultValue"
+                                                    :data-vv-scope="`param-${param.id}`"
+                                                    :placeholder="$t('editPage.defaultValueTips')"
+                                                    :value="param.defaultValue"
+                                                />
+                                                <request-selector
+                                                    v-if="isCodelibParam(param.type)"
+                                                    style="max-width: 250px"
+                                                    :popover-min-width="250"
+                                                    :url="getCodeUrl(param.scmType)"
+                                                    v-bind="codelibOption"
+                                                    :disabled="disabled"
+                                                    name="defaultValue"
+                                                    :value="param.defaultValue"
+                                                    :handle-change="(name, value) => handleUpdateParam(name, value, index)"
+                                                    :data-vv-scope="`param-${param.id}`"
+                                                ></request-selector>
+                                                <request-selector
+                                                    v-if="isBuildResourceParam(param.type)"
+                                                    style="max-width: 250px"
+                                                    :popover-min-width="250"
+                                                    :url="getBuildResourceUrl(param.containerType)"
+                                                    param-id="name"
+                                                    :disabled="disabled"
+                                                    name="defaultValue"
+                                                    :value="param.defaultValue"
+                                                    :handle-change="(name, value) => handleUpdateParam(name, value, index)"
+                                                    :data-vv-scope="`param-${param.id}`"
+                                                    :replace-key="param.replaceKey"
+                                                    :search-url="param.searchUrl"
+                                                ></request-selector>
+                                                <request-selector
+                                                    v-if="isSubPipelineParam(param.type)"
+                                                    style="max-width: 250px"
+                                                    :popover-min-width="250"
+                                                    v-bind="subPipelineOption"
+                                                    :disabled="disabled"
+                                                    name="defaultValue"
+                                                    :value="param.defaultValue"
+                                                    :handle-change="(name, value) => handleUpdateParam(name, value, index)"
+                                                    :data-vv-scope="`param-${param.id}`"
+                                                    :replace-key="param.replaceKey"
+                                                    :search-url="param.searchUrl"
+                                                ></request-selector>
+                                            </bk-form-item>
+    
+                                            <bk-form-item
+                                                v-else
+                                                label-width="auto"
+                                                :label="$t(`editPage.${getParamsDefaultValueLabel(param.type)}`)"
+                                                :required="isBooleanParam(param.type)"
+                                                :is-error="errors.has(`param-${param.id}.defaultValue`)"
+                                                :error-msg="errors.first(`param-${param.id}.defaultValue`)"
+                                                :desc="$t(`editPage.${getParamsDefaultValueLabelTips(param.type)}`)"
                                             >
-                                            </enum-input>
-                                            <vuex-input
-                                                v-if="isStringParam(param.type) || isSvnParam(param.type) || isGitParam(param.type)"
-                                                :disabled="disabled"
-                                                :handle-change="(name, value) => handleUpdateParam(name, value, index)"
-                                                name="defaultValue"
-                                                :click-unfold="true"
-                                                :data-vv-scope="`param-${param.id}`"
-                                                :placeholder="$t('editPage.defaultValueTips')"
-                                                :value="param.defaultValue"
-                                            />
-                                            <vuex-textarea
-                                                v-if="isTextareaParam(param.type)"
-                                                :click-unfold="true"
-                                                :hover-unfold="true"
-                                                :disabled="disabled"
-                                                :handle-change="(name, value) => handleUpdateParam(name, value, index)"
-                                                name="defaultValue"
-                                                :data-vv-scope="`param-${param.id}`"
-                                                :placeholder="$t('editPage.defaultValueTips')"
-                                                :value="param.defaultValue"
-                                            />
-                                            <request-selector
-                                                v-if="isCodelibParam(param.type)"
-                                                style="max-width: 250px"
-                                                :popover-min-width="250"
-                                                :url="getCodeUrl(param.scmType)"
-                                                v-bind="codelibOption"
-                                                :disabled="disabled"
-                                                name="defaultValue"
-                                                :value="param.defaultValue"
-                                                :handle-change="(name, value) => handleUpdateParam(name, value, index)"
-                                                :data-vv-scope="`param-${param.id}`"
-                                            ></request-selector>
-                                            <request-selector
-                                                v-if="isBuildResourceParam(param.type)"
-                                                style="max-width: 250px"
-                                                :popover-min-width="250"
-                                                :url="getBuildResourceUrl(param.containerType)"
-                                                param-id="name"
-                                                :disabled="disabled"
-                                                name="defaultValue"
-                                                :value="param.defaultValue"
-                                                :handle-change="(name, value) => handleUpdateParam(name, value, index)"
-                                                :data-vv-scope="`param-${param.id}`"
-                                                :replace-key="param.replaceKey"
-                                                :search-url="param.searchUrl"
-                                            ></request-selector>
-                                            <request-selector
-                                                v-if="isSubPipelineParam(param.type)"
-                                                style="max-width: 250px"
-                                                :popover-min-width="250"
-                                                v-bind="subPipelineOption"
-                                                :disabled="disabled"
-                                                name="defaultValue"
-                                                :value="param.defaultValue"
-                                                :handle-change="(name, value) => handleUpdateParam(name, value, index)"
-                                                :data-vv-scope="`param-${param.id}`"
-                                                :replace-key="param.replaceKey"
-                                                :search-url="param.searchUrl"
-                                            ></request-selector>
-                                        </bk-form-item>
-
-                                        <bk-form-item
-                                            v-else
-                                            label-width="auto"
-                                            :label="$t(`editPage.${getParamsDefaultValueLabel(param.type)}`)"
-                                            :required="isBooleanParam(param.type)"
-                                            :is-error="errors.has(`param-${param.id}.defaultValue`)"
-                                            :error-msg="errors.first(`param-${param.id}.defaultValue`)"
-                                            :desc="$t(`editPage.${getParamsDefaultValueLabelTips(param.type)}`)"
-                                        >
-                                            <file-param-input
-                                                name="defaultValue"
-                                                v-bind="param"
-                                                :required="valueRequired"
-                                                :disabled="disabled"
-                                                :value="param.defaultValue"
-                                                :handle-change="(name, value) => handleUpdateParam(name, value, index)"
-                                            />
-                                        </bk-form-item>
+                                                <file-param-input
+                                                    name="defaultValue"
+                                                    v-bind="param"
+                                                    :required="valueRequired"
+                                                    :disabled="disabled"
+                                                    :value="param.defaultValue"
+                                                    :handle-change="(name, value) => handleUpdateParam(name, value, index)"
+                                                />
+                                            </bk-form-item>
+                                        </template>
                                     </div>
 
                                     <bk-form-item
@@ -323,9 +339,53 @@
                                             :data-vv-scope="`param-${param.id}`"
                                             v-validate.initial="'required'"
                                             replace-key="{keyword}"
-                                            :search-url="getSearchUrl()"
+                                            :search-url="getSearchUrl('CODE_GIT,CODE_GITLAB,GITHUB,CODE_TGIT')"
                                         ></request-selector>
                                     </bk-form-item>
+                                    
+                                    <template v-if="isRepoParam(param.type)">
+                                        <bk-form-item
+                                            label-width="auto"
+                                            v-if="isRepoParam(param.type)"
+                                            :label="$t('editPage.repoName')"
+                                            required
+                                            :is-error="!param.defaultValue['repo-name']"
+                                            :error-msg="errors.first(`param-${param.id}.defaultValue`)"
+                                        >
+                                            <request-selector
+                                                v-bind="getRepoOption('CODE_GIT,CODE_GITLAB,GITHUB,CODE_TGIT,CODE_SVN', 'aliasName')"
+                                                :disabled="disabled"
+                                                name="defaultValue"
+                                                :value="param.defaultValue['repo-name']"
+                                                :handle-change="(name, value) => handleChangeCodeRepo(name, value, index)"
+                                                :data-vv-scope="`param-${param.id}-repo-name`"
+                                                v-validate.initial="'required'"
+                                                replace-key="{keyword}"
+                                                :search-url="getSearchUrl('CODE_GIT,CODE_GITLAB,GITHUB,CODE_TGIT,CODE_SVN')"
+                                            ></request-selector>
+                                        </bk-form-item>
+                                        <bk-form-item
+                                            label-width="auto"
+                                            v-if="isRepoParam(param.type)"
+                                            :label="$t('editPage.branchName')"
+                                            required
+                                            :is-error="!param.defaultValue.branch"
+                                            :error-msg="errors.first(`param-${param.id}.defaultValue`)"
+                                            :key="param.defaultValue['repo-name']"
+                                        >
+                                            <request-selector
+                                                v-bind="getBranchOption(param.defaultValue['repo-name'])"
+                                                :disabled="disabled || !param.defaultValue['repo-name']"
+                                                name="defaultValue"
+                                                :value="param.defaultValue.branch"
+                                                :handle-change="(name, value) => handleChangeBranch(name, value, index)"
+                                                :data-vv-scope="`param-${param.id}-branch`"
+                                                v-validate.initial="'required'"
+                                                replace-key="{keyword}"
+                                                :search-url="getSearchBranchUrl(param)"
+                                            ></request-selector>
+                                        </bk-form-item>
+                                    </template>
 
                                     <bk-form-item
                                         label-width="auto"
@@ -415,7 +475,7 @@
 </template>
 
 <script>
-    import FileParamInput from '@/components/FileParamInput'
+    import FileParamInput from '@/components/atomFormField/FileParamInput'
     import Accordion from '@/components/atomFormField/Accordion'
     import AtomCheckbox from '@/components/atomFormField/AtomCheckbox'
     import EnumInput from '@/components/atomFormField/EnumInput'
@@ -434,6 +494,7 @@
         getParamsDefaultValueLabel,
         getParamsDefaultValueLabelTips,
         getRepoOption,
+        getBranchOption,
         isBooleanParam,
         isBuildResourceParam,
         isCodelibParam,
@@ -444,7 +505,8 @@
         isStringParam,
         isSubPipelineParam,
         isSvnParam,
-        isTextareaParam
+        isTextareaParam,
+        isRepoParam
     } from '@/store/modules/atom/paramsConfig'
     import { allVersionKeyList } from '@/utils/pipelineConst'
     import { deepCopy } from '@/utils/util'
@@ -593,13 +655,17 @@
             isBuildResourceParam,
             isSubPipelineParam,
             isFileParam,
+            isRepoParam,
             getParamsDefaultValueLabel,
             getParamsDefaultValueLabelTips,
             isSelectorParam (type) {
                 return isMultipleParam(type) || isEnumParam(type)
             },
-            getRepoOption (type) {
-                return getRepoOption(type)
+            getRepoOption (type, paramId) {
+                return getRepoOption(type, paramId)
+            },
+            getBranchOption (repositoryId) {
+                return getBranchOption(repositoryId)
             },
             getBuildTypeList (os) {
                 return this.getBuildResourceTypeList(os)
@@ -655,7 +721,31 @@
                     console.log('update error', e)
                 }
             },
-
+            handleChangeCodeRepo (key, value, paramIndex) {
+                const param = this.globalParams[paramIndex]
+                Object.assign(param, {
+                    [key]: {
+                        'repo-name': value,
+                        branch: ''
+                    }
+                })
+                this.handleChange([
+                    ...this.renderParams
+                ])
+            },
+            handleChangeBranch (key, value, paramIndex) {
+                const param = this.globalParams[paramIndex]
+               
+                Object.assign(param, {
+                    [key]: {
+                        ...param.defaultValue,
+                        branch: value
+                    }
+                })
+                this.handleChange([
+                    ...this.renderParams
+                ])
+            },
             handleUpdateParam (key, value, paramIndex) {
                 try {
                     const param = this.globalParams[paramIndex]
@@ -771,8 +861,12 @@
                 return `/${REPOSITORY_API_URL_PREFIX}/user/repositories/{projectId}/hasPermissionList?permission=USE&repositoryType=${type}&page=1&pageSize=1000`
             },
 
-            getSearchUrl () {
-                return `/${PROCESS_API_URL_PREFIX}/user/buildParam/repository/${this.$route.params.projectId}/hashId?repositoryType=CODE_GIT,CODE_GITLAB,GITHUB,CODE_TGIT&permission=LIST&aliasName={keyword}&page=1&pageSize=200`
+            getSearchUrl (type) {
+                return `/${PROCESS_API_URL_PREFIX}/user/buildParam/repository/${this.$route.params.projectId}/hashId?repositoryType=${type}&permission=LIST&aliasName={keyword}&page=1&pageSize=200`
+            },
+            
+            getSearchBranchUrl (param) {
+                return `/${PROCESS_API_URL_PREFIX}/user/buildParam/${this.$route.params.projectId}/repository/refs?search={keyword}&repositoryType=NAME&repositoryId=${param.defaultValue}`
             },
 
             handleChange (params) {
diff --git a/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/children/param-group.vue b/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/children/param-group.vue
index bbbd20c51e7f..b9d5d86a57af 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/children/param-group.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/children/param-group.vue
@@ -70,7 +70,16 @@
                                             v-if="param.readOnly"
                                             class="read-only"
                                         >{{ $t('readonlyParams') }}</span>
-                                        <span class="default-value">{{ param.defaultValue || '--' }}</span>
+                                        <span
+                                            class="default-value"
+                                            v-bk-overflow-tips
+                                        >
+                                            {{
+                                                param.type === 'REPO_REF'
+                                                    ? `${param.defaultValue['repo-name']} @ ${param?.defaultValue.branch}`
+                                                    : param.defaultValue || '--'
+                                            }}
+                                        </span>
                                     </div>
                                     <div
                                         v-if="editable"
@@ -85,6 +94,7 @@
                                                 class="bk-icon icon-copy"
                                             ></i>
                                             <bk-popconfirm
+                                                ref="removePopConfirmRef"
                                                 :popover-options="{ appendTo: 'parent' }"
                                                 :title="$t('newui.pipelineParam.removeTitle')"
                                                 :confirm-text="$t('newui.pipelineParam.remove')"
@@ -185,6 +195,7 @@
                 this.isShow = !this.isShow
             },
             triggerSort (event) {
+                this.$refs.removePopConfirmRef.forEach(i => i?.cancel())
                 // 判断拖拽element的newIndex，如果是newIndex=0, 放到最前面， 否则， 找出他的上一个element
                 const { element, newIndex } = event?.moved
                 if (!element?.id) return
@@ -359,6 +370,7 @@
                                 @include ellipsis();
                             }
                             .read-only {
+                                flex-shrink: 0;
                                 font-size: 12px;
                                 color: #63656E;
                                 background: #F0F1F5;
diff --git a/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/children/param-value-option.vue b/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/children/param-value-option.vue
index f20082d2c4c8..dc994e3002da 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/children/param-value-option.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineEditTabs/components/children/param-value-option.vue
@@ -34,7 +34,52 @@
                 v-validate="'required'"
                 :data-vv-scope="'pipelineParam'"
                 replace-key="{keyword}"
-                :search-url="getSearchUrl()"
+                :search-url="getSearchUrl('CODE_GIT,CODE_GITLAB,GITHUB,CODE_TGIT')"
+            >
+            </request-selector>
+        </form-field>
+        <form-field
+            :hide-colon="true"
+            v-if="isRepoParam(param.type)"
+            :label="$t('editPage.repoName')"
+            :desc="$t('editPage.referencedTips', ['${{ variables.' + `${param.id}` + '.repo-name }}'])"
+            :required="true"
+            :is-error="!param.defaultValue['repo-name']"
+            :error-msg="errors.first(`pipelineParam.defaultValue`)"
+        >
+            <request-selector
+                v-bind="getRepoOption('CODE_GIT,CODE_GITLAB,GITHUB,CODE_TGIT,CODE_SVN', 'aliasName')"
+                :disabled="disabled"
+                name="defaultValue"
+                :value="param.defaultValue['repo-name']"
+                :handle-change="(name, value) => handleChangeCodeRepo(name, value)"
+                v-validate="'required'"
+                :data-vv-scope="'pipelineParam'"
+                replace-key="{keyword}"
+                :search-url="getSearchUrl('CODE_GIT,CODE_GITLAB,GITHUB,CODE_TGIT,CODE_SVN')"
+            >
+            </request-selector>
+        </form-field>
+        <form-field
+            :hide-colon="true"
+            v-if="isRepoParam(param.type)"
+            :label="$t('editPage.branchName')"
+            :desc="$t('editPage.referencedTips', ['${{ variables.' + `${param.id}` + '.branch }}'])"
+            :required="true"
+            :is-error="!param.defaultValue.branch"
+            :error-msg="errors.first(`pipelineParam.defaultValue`)"
+            :key="param.defaultValue['repo-name']"
+        >
+            <request-selector
+                v-bind="getBranchOption(param.defaultValue['repo-name'])"
+                :disabled="disabled || !param.defaultValue"
+                name="defaultValue"
+                :value="param.defaultValue.branch"
+                :handle-change="handleChangeBranch"
+                v-validate="'required'"
+                :data-vv-scope="'pipelineParam'"
+                replace-key="{keyword}"
+                :search-url="getSearchBranchUrl()"
             >
             </request-selector>
         </form-field>
@@ -66,8 +111,8 @@
             :handle-update-payload="handleUpdatePayload"
             :reset-default-val="handleResetDefaultVal"
         />
-
         <form-field
+            v-if="!isRepoParam(param.type)"
             :hide-colon="true"
             :label="valueRequired ? $t('newui.pipelineParam.constValue') : $t(`editPage.${getParamsDefaultValueLabel(param.type)}`)"
             :required="valueRequired"
@@ -116,7 +161,7 @@
             >
             </enum-input>
             <vuex-input
-                v-if="isStringParam(param.type) || isSvnParam(param.type) || isGitParam(param.type) || isArtifactoryParam(param.type)"
+                v-if="isStringParam(param.type) || isSvnParam(param.type) || isGitParam(param.type) || isArtifactoryParam(param.type) || isRepoParam(param.type)"
                 :disabled="disabled"
                 :handle-change="handleChange"
                 name="defaultValue"
@@ -172,12 +217,11 @@
             >
             </request-selector>
         </form-field>
-
         <form-field
             :hide-colon="true"
             v-if="isSvnParam(param.type)"
             :label="$t('editPage.relativePath')"
-            :is-error="errors.has(`pipelineParam.relativePath`)"
+            :is-error="errors.has(`relativePath`)"
             :error-msg="errors.first(`pipelineParam.relativePath`)"
         >
             <vuex-input
@@ -230,7 +274,7 @@
 
 <script>
     import FormField from '@/components/AtomPropertyPanel/FormField'
-    import FileParamInput from '@/components/FileParamInput'
+    import FileParamInput from '@/components/atomFormField/FileParamInput'
     import EnumInput from '@/components/atomFormField/EnumInput'
     import KeyValueNormal from '@/components/atomFormField/KeyValueNormal'
     import RequestSelector from '@/components/atomFormField/RequestSelector'
@@ -245,6 +289,7 @@
         getParamsDefaultValueLabel,
         getParamsDefaultValueLabelTips,
         getRepoOption,
+        getBranchOption,
         isArtifactoryParam,
         isBooleanParam,
         isCodelibParam,
@@ -256,7 +301,8 @@
         isSubPipelineParam,
         isSvnParam,
         isTextareaParam,
-        SUB_PIPELINE_OPTION
+        SUB_PIPELINE_OPTION,
+        isRepoParam
     } from '@/store/modules/atom/paramsConfig'
     import { mapGetters } from 'vuex'
     import SelectTypeParam from './select-type-param'
@@ -360,6 +406,7 @@
             isArtifactoryParam,
             isSubPipelineParam,
             isFileParam,
+            isRepoParam,
             getParamsDefaultValueLabel,
             getParamsDefaultValueLabelTips,
             isSelectorParam (type) {
@@ -375,8 +422,11 @@
                 }
                 this.remoteParamOption = remoteOpion
             },
-            getRepoOption (type) {
-                return getRepoOption(type)
+            getRepoOption (type, paramId) {
+                return getRepoOption(type, paramId)
+            },
+            getBranchOption (name) {
+                return getBranchOption(name)
             },
             getBuildTypeList (os) {
                 return this.getBuildResourceTypeList(os)
@@ -420,9 +470,11 @@
                 type = type || 'CODE_GIT'
                 return `/${REPOSITORY_API_URL_PREFIX}/user/repositories/{projectId}/hasPermissionList?permission=USE&repositoryType=${type}&page=1&pageSize=1000`
             },
-
-            getSearchUrl () {
-                return `/${PROCESS_API_URL_PREFIX}/user/buildParam/repository/${this.$route.params.projectId}/hashId?repositoryType=CODE_GIT,CODE_GITLAB,GITHUB,CODE_TGIT&permission=LIST&aliasName={keyword}&page=1&pageSize=200`
+            getSearchUrl (type) {
+                return `/${PROCESS_API_URL_PREFIX}/user/buildParam/repository/${this.$route.params.projectId}/hashId?repositoryType=${type}&permission=LIST&aliasName={keyword}&page=1&pageSize=200`
+            },
+            getSearchBranchUrl () {
+                return `/${PROCESS_API_URL_PREFIX}/user/buildParam/${this.$route.params.projectId}/repository/refs?search={keyword}&repositoryType=NAME&repositoryId=${this.param.defaultValue['repo-name']}`
             },
             handleUpdatePayload (key, val) {
                 this.handleChange(key, val)
@@ -469,12 +521,17 @@
                     return []
                 }
             },
-            handleProperties (key, value) {
-                const properties = {}
-                value.forEach((val) => {
-                    properties[val.key] = val.value
+            handleChangeCodeRepo (key, value) {
+                this.handleChange(key, {
+                    'repo-name': value,
+                    branch: ''
+                })
+            },
+            handleChangeBranch (key, value) {
+                this.handleChange(key, {
+                    ...this.param.defaultValue,
+                    branch: value
                 })
-                this.handleChange(key, properties)
             }
         }
     }
diff --git a/src/frontend/devops-pipeline/src/components/PipelineHeader/DetailHeader.vue b/src/frontend/devops-pipeline/src/components/PipelineHeader/DetailHeader.vue
index 37da31d820d1..dc647564cc63 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineHeader/DetailHeader.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineHeader/DetailHeader.vue
@@ -145,7 +145,7 @@
                 return (this.pipelineInfo?.canRelease ?? false) && !this.saveStatus && !this.isRunning
             },
             canManualStartup () {
-                return this.pipelineInfo?.canManualStartup ?? false
+                return this.pipelineInfo?.canManualStartup ?? true
             },
             isDebugExec () {
                 return this.execDetail?.debug ?? false
diff --git a/src/frontend/devops-pipeline/src/components/PipelineHeader/PreviewHeader.vue b/src/frontend/devops-pipeline/src/components/PipelineHeader/PreviewHeader.vue
index 18e3afacfd13..9a3a60e753e2 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineHeader/PreviewHeader.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineHeader/PreviewHeader.vue
@@ -34,16 +34,6 @@
 
             <bk-button
                 :disabled="executeStatus"
-                v-perm="{
-                    hasPermission: canEdit,
-                    disablePermissionApi: true,
-                    permissionData: {
-                        projectId,
-                        resourceType: 'pipeline',
-                        resourceCode: pipelineId,
-                        action: RESOURCE_ACTION.EDIT
-                    }
-                }"
                 @click="goBack"
             >
                 {{ $t("cancel") }}
diff --git a/src/frontend/devops-pipeline/src/components/atomFormField/CascadeRequestSelector/index.vue b/src/frontend/devops-pipeline/src/components/atomFormField/CascadeRequestSelector/index.vue
new file mode 100644
index 000000000000..7f8987058f7c
--- /dev/null
+++ b/src/frontend/devops-pipeline/src/components/atomFormField/CascadeRequestSelector/index.vue
@@ -0,0 +1,280 @@
+<template>
+    <div class="cascade-request-selector">
+        <bk-select
+            :class="{
+                'is-diff-param': isDiffParam
+            }"
+            @toggle="toggleVisible"
+            @selected="onChange"
+            @clear="onClear"
+            v-bind="selectProps"
+        >
+            <bk-option
+                v-for="item in listData"
+                :key="item[settingKey]"
+                :id="item[settingKey]"
+                :name="item[displayKey]"
+                :disabled="item.disabled"
+            >
+                <slot
+                    name="option-item"
+                    v-bind="item"
+                ></slot>
+            </bk-option>
+            <div slot="extension">
+                <slot></slot>
+            </div>
+        </bk-select>
+        <RequestSelector
+            :class="{
+                'is-diff-param': isDiffParam
+            }"
+            v-bind="Object.assign(
+                {},
+                {
+                    ...childrenOptions,
+                    id: undefined,
+                    key: value[parentKey],
+                    paramId: 'key',
+                    paramValue: 'value',
+                    initRequest: initRequest,
+                    options: cascadeProps.children.options,
+                    name: childrenKey,
+                    value: value[childrenKey],
+                    searchUrl: childrenSearchUrl,
+                    replaceKey: cascadeProps.children.replaceKey,
+                    disabled: disabled,
+                    placeholder: placeholder,
+                    handleChange: (name, value) => handleUpdateChildrenValue(name, value)
+                }
+            )"
+        />
+    </div>
+</template>
+
+<script>
+    import atomFieldMixin from '../atomFieldMixin'
+    import RequestSelector from '@/components/atomFormField/RequestSelector'
+    export default {
+        name: 'selector',
+        components: {
+            RequestSelector
+        },
+        mixins: [atomFieldMixin],
+        props: {
+            value: [String, Number, Array, Boolean],
+            searchable: {
+                type: Boolean,
+                default: true
+            },
+            clearable: {
+                type: Boolean,
+                default: true
+            },
+            zIndex: {
+                type: Number,
+                default: 2500
+            },
+            isLoading: {
+                type: Boolean,
+                default: false
+            },
+            list: {
+                type: Array,
+                default: []
+            },
+            multiSelect: {
+                type: Boolean,
+                default: false
+            },
+            placeholder: String,
+            displayKey: {
+                type: String,
+                default: 'name'
+            },
+            settingKey: {
+                type: String,
+                default: 'id'
+            },
+            showSelectAll: {
+                type: Boolean,
+                default: false
+            },
+            searchUrl: String,
+            replaceKey: String,
+            dataPath: String,
+            cascadeProps: {
+                required: true,
+                type: Object
+            },
+            childrenOptions: {
+                type: Object,
+                default: () => {}
+            },
+            isDiffParam: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                listData: [],
+                initRequest: false
+            }
+        },
+        computed: {
+            parentKey () {
+                return this.cascadeProps.id || ''
+            },
+            childrenKey () {
+                return this.cascadeProps.children.id || ''
+            },
+            popoverOptions () {
+                return {
+                    popperOptions: {
+                        modifiers: {
+                            preventOverflow: {
+                                boundariesElement: 'window'
+                            }
+                        }
+                    }
+                }
+            },
+
+            selectProps () {
+                const props = {
+                    value: this.value[this.parentKey],
+                    loading: this.isLoading,
+                    disabled: this.disabled || this.readOnly,
+                    searchable: this.searchable,
+                    multiple: this.multiSelect,
+                    clearable: this.clearable,
+                    placeholder: this.placeholder,
+                    zIndex: this.zIndex,
+                    'search-key': this.displayKey,
+                    'popover-options': this.popoverOptions,
+                    'enable-virtual-scroll': this.list.length > 3000,
+                    list: this.listData,
+                    'id-key': this.settingKey,
+                    'display-key': this.displayKey,
+                    'show-select-all': this.showSelectAll
+                }
+                if (this.cascadeProps.searchUrl) props['remote-method'] = this.remoteMethod
+                return props
+            },
+
+            childrenSearchUrl () {
+                return this.cascadeProps?.children?.searchUrl?.replace('{parentValue}', this.value[this.parentKey])
+            }
+        },
+        watch: {
+            'cascadeProps.options': {
+                handler (list) {
+                    this.listData = list
+                },
+                immediate: true,
+                deep: true
+            },
+            isDiffParam () {
+                this.listData.push({
+                    key: this.value[this.parentKey],
+                    value: this.value[this.parentKey]
+                })
+                this.cascadeProps.children.options.push({
+                    key: this.value[this.childrenKey],
+                    value: this.value[this.childrenKey]
+                })
+            }
+        },
+        methods: {
+            onClear () {
+                this.handleChange(this.name, {
+                    [this.parentKey]: '',
+                    [this.childrenKey]: ''
+                })
+            },
+            onChange (val, oldVal) {
+                if (val !== oldVal) {
+                    this.initRequest = true
+                    this.handleChange(this.name, {
+                        [this.parentKey]: val,
+                        [this.childrenKey]: ''
+                    })
+                }
+            },
+            editItem (index) {
+                this.edit(index)
+            },
+            remoteMethod (name) {
+                return new Promise((resolve, reject) => {
+                    clearTimeout(this.remoteMethod.timeId)
+                    this.remoteMethod.timeId = setTimeout(async () => {
+                        try {
+                            const regExp = new RegExp(this.cascadeProps.replaceKey, 'g')
+                            const url = this.cascadeProps.searchUrl.replace(regExp, name)
+                            const data = await this.$ajax.get(url)
+                            this.listData = this.getResponseData(data)
+                            resolve()
+                        } catch (error) {
+                            console.error(error)
+                            reject(error)
+                        }
+                    }, 500)
+                })
+            },
+
+            async toggleVisible (value) {
+                if (!value) return
+                const regExp = new RegExp(this.cascadeProps.replaceKey, 'g')
+                const url = this.cascadeProps.searchUrl.replace(regExp, '')
+                const data = await this.$ajax.get(url)
+                this.listData = this.getResponseData(data)
+            },
+            
+            handleUpdateChildrenValue (name, value) {
+                this.handleChange(this.name, {
+                    ...this.value,
+                    [this.childrenKey]: value
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    @import "../../../scss/conf";
+    .cascade-request-selector {
+        display: flex;
+        width: 100%;
+        :first-child {
+            border-right: none;
+        }
+        .bk-select {
+            flex: 1;
+        }
+    }
+    .bkdevops-option-name {
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        &.selected {
+            width: calc(100% - 24px)
+        }
+    }
+    .bk-selector-create-item {
+        a {
+            display: block;
+            color: $fontWeightColor;
+        }
+
+        &:hover {
+            &, a {
+                color: $primaryColor !important;
+            }
+        }
+    }
+    .is-diff-param {
+        border-color: #FF9C01 !important;
+    }
+</style>
diff --git a/src/frontend/devops-pipeline/src/components/FileParamInput/index.vue b/src/frontend/devops-pipeline/src/components/atomFormField/FileParamInput/index.vue
similarity index 98%
rename from src/frontend/devops-pipeline/src/components/FileParamInput/index.vue
rename to src/frontend/devops-pipeline/src/components/atomFormField/FileParamInput/index.vue
index cac9022bf66f..748d58505d93 100644
--- a/src/frontend/devops-pipeline/src/components/FileParamInput/index.vue
+++ b/src/frontend/devops-pipeline/src/components/atomFormField/FileParamInput/index.vue
@@ -58,7 +58,7 @@
 
 <script>
     import VuexInput from '@/components/atomFormField/VuexInput'
-    import FileUpload from '@/components/FileUpload'
+    import FileUpload from '@/components/atomFormField/FileUpload'
     export default {
         components: {
             VuexInput,
diff --git a/src/frontend/devops-pipeline/src/components/FileUpload/index.vue b/src/frontend/devops-pipeline/src/components/atomFormField/FileUpload/index.vue
similarity index 100%
rename from src/frontend/devops-pipeline/src/components/FileUpload/index.vue
rename to src/frontend/devops-pipeline/src/components/atomFormField/FileUpload/index.vue
diff --git a/src/frontend/devops-pipeline/src/components/atomFormField/RequestSelector/index.vue b/src/frontend/devops-pipeline/src/components/atomFormField/RequestSelector/index.vue
index 40049dbe6425..8d0d2b57f128 100755
--- a/src/frontend/devops-pipeline/src/components/atomFormField/RequestSelector/index.vue
+++ b/src/frontend/devops-pipeline/src/components/atomFormField/RequestSelector/index.vue
@@ -16,6 +16,8 @@
         :search-url="searchUrl"
         :replace-key="replaceKey"
         :data-path="dataPath"
+        :setting-key="settingKey"
+        :display-key="displayKey"
     >
         <template v-if="hasAddItem">
             <div class="bk-selector-create-item">
@@ -84,7 +86,23 @@
             },
             searchUrl: String,
             replaceKey: String,
-            dataPath: String
+            dataPath: String,
+            displayKey: {
+                type: String,
+                default: 'name'
+            },
+            settingKey: {
+                type: String,
+                default: 'id'
+            },
+            initRequest: {
+                type: Boolean,
+                default: true
+            },
+            options: {
+                type: Array,
+                default: () => []
+            }
         },
         data () {
             return {
@@ -99,7 +117,11 @@
             }
         },
         created () {
-            this.url && this.freshList()
+            if (this.initRequest) {
+                this.url && this.freshList()
+            } else {
+                this.list = this.options
+            }
         },
         methods: {
             edit (index) {
diff --git a/src/frontend/devops-pipeline/src/components/atomFormField/Selector/index.vue b/src/frontend/devops-pipeline/src/components/atomFormField/Selector/index.vue
index 7e0f35031476..fca4621b7ff9 100755
--- a/src/frontend/devops-pipeline/src/components/atomFormField/Selector/index.vue
+++ b/src/frontend/devops-pipeline/src/components/atomFormField/Selector/index.vue
@@ -5,8 +5,8 @@
         v-bind="selectProps"
     >
         <bk-option
-            v-for="(item, index) in listData"
-            :key="index"
+            v-for="item in listData"
+            :key="item[settingKey]"
             :id="item[settingKey]"
             :name="item[displayKey]"
             :disabled="item.disabled"
diff --git a/src/frontend/devops-pipeline/src/components/pipelineParamsForm.vue b/src/frontend/devops-pipeline/src/components/pipelineParamsForm.vue
index 142f2e4be26e..7f149be58c09 100755
--- a/src/frontend/devops-pipeline/src/components/pipelineParamsForm.vue
+++ b/src/frontend/devops-pipeline/src/components/pipelineParamsForm.vue
@@ -14,7 +14,7 @@
             <section class="component-row">
                 <component
                     :is="param.component"
-                    v-validate="{ required: param.required }"
+                    v-validate="{ required: param.required, objectRequired: isObject(param.value) }"
                     :click-unfold="true"
                     :show-select-all="true"
                     :handle-change="handleParamUpdate"
@@ -47,7 +47,9 @@
     import VuexTextarea from '@/components/atomFormField/VuexTextarea'
     import FormField from '@/components/AtomPropertyPanel/FormField'
     import metadataList from '@/components/common/metadata-list'
-    import FileParamInput from '@/components/FileParamInput'
+    import FileParamInput from '@/components/atomFormField/FileParamInput'
+    import CascadeRequestSelector from '@/components/atomFormField/CascadeRequestSelector'
+    import { isObject } from '@/utils/util'
     import {
         BOOLEAN,
         BOOLEAN_LIST,
@@ -67,7 +69,10 @@
         STRING,
         SUB_PIPELINE,
         SVN_TAG,
-        TEXTAREA
+        TEXTAREA,
+        REPO_REF,
+        getBranchOption,
+        isRepoParam
     } from '@/store/modules/atom/paramsConfig'
 
     export default {
@@ -80,7 +85,8 @@
             VuexTextarea,
             FormField,
             metadataList,
-            FileParamInput
+            FileParamInput,
+            CascadeRequestSelector
         },
         props: {
             disabled: {
@@ -163,12 +169,21 @@
                         name: param.id,
                         required: param.valueNotEmpty,
                         value: this.paramValues[param.id],
-                        ...restParam
+                        ...restParam,
+                        ...(
+                            isRepoParam(param.type)
+                                ? {
+                                    childrenOptions: this.getBranchOption(this.paramValues?.[param.id]?.['repo-name'])
+                                }
+                                : {}
+                        )
                     }
                 })
             }
         },
         methods: {
+            isObject,
+            getBranchOption,
             getParamComponentType (param) {
                 if (isRemoteType(param)) {
                     return 'request-selector'
@@ -187,6 +202,15 @@
                     case param.type === CODE_LIB:
                     case param.type === CONTAINER_TYPE:
                     case param.type === SUB_PIPELINE:
+                    case param.type === REPO_REF:
+                        return param.options
+                    default:
+                        return []
+                }
+            },
+            getCodeRepoOpt (param) {
+                switch (true) {
+                    case param.type === REPO_REF:
                         return param.options
                     default:
                         return []
@@ -202,7 +226,6 @@
             getParamByName (name) {
                 return this.paramList.find(param => `devops${param.name}` === name)
             },
-
             handleParamUpdate (name, value) {
                 const param = this.getParamByName(name)
                 if (isMultipleParam(param.type)) { // 复选框，需要将数组转化为逗号隔开的字符串
diff --git a/src/frontend/devops-pipeline/src/store/modules/atom/paramsConfig.js b/src/frontend/devops-pipeline/src/store/modules/atom/paramsConfig.js
index 7c79e50f46f1..3e2ed29f6850 100755
--- a/src/frontend/devops-pipeline/src/store/modules/atom/paramsConfig.js
+++ b/src/frontend/devops-pipeline/src/store/modules/atom/paramsConfig.js
@@ -30,6 +30,7 @@ export const CONTAINER_TYPE = 'CONTAINER_TYPE'
 export const ARTIFACTORY = 'ARTIFACTORY'
 export const SUB_PIPELINE = 'SUB_PIPELINE'
 export const CUSTOM_FILE = 'CUSTOM_FILE'
+export const REPO_REF = 'REPO_REF'
 
 function paramType (typeConst) {
     return type => type === typeConst
@@ -136,6 +137,20 @@ export const DEFAULT_PARAM = {
         required: true,
         readOnly: false
     },
+    [REPO_REF]: {
+        id: 'reporef',
+        name: 'reporef',
+        defaultValue: {
+            'repo-name': '',
+            branch: ''
+        },
+        defalutValueLabel: 'defaultValue',
+        defaultValueLabelTips: 'defaultValueDesc',
+        type: REPO_REF,
+        typeDesc: 'reporef',
+        required: true,
+        readOnly: false
+    },
     [CODE_LIB]: {
         id: 'codelib',
         name: 'codelib',
@@ -256,7 +271,8 @@ export const ParamComponentMap = {
     [CONTAINER_TYPE]: 'Selector',
     [ARTIFACTORY]: 'Selector',
     [SUB_PIPELINE]: 'Selector',
-    [CUSTOM_FILE]: 'FileParamInput'
+    [CUSTOM_FILE]: 'FileParamInput',
+    [REPO_REF]: 'CascadeRequestSelector'
 }
 
 export const BOOLEAN_LIST = [
@@ -270,16 +286,28 @@ export const BOOLEAN_LIST = [
     }
 ]
 
-export function getRepoOption (type = 'CODE_SVN') {
+export function getRepoOption (type = 'CODE_SVN', paramId = 'repositoryHashId') {
     return {
         url: `/repository/api/user/repositories/{projectId}/hasPermissionList?permission=USE&repositoryType=${type}&page=1&pageSize=1000`,
-        paramId: 'repositoryHashId',
+        paramId,
         paramName: 'aliasName',
         searchable: true,
         hasAddItem: true
     }
 }
 
+export function getBranchOption (name) {
+    if (!name) return {}
+    return {
+        url: `/process/api/user/buildParam/{projectId}/repository/refs?repositoryType=NAME&repositoryId=${name}`,
+        paramId: 'key',
+        paramName: 'value',
+        searchable: true,
+        settingKey: 'key',
+        displayKey: 'value'
+    }
+}
+
 export const CODE_LIB_OPTION = {
     paramId: 'aliasName',
     paramName: 'aliasName',
@@ -321,6 +349,7 @@ export const isMultipleParam = paramType(MULTIPLE)
 export const isCheakboxParam = paramType(CHECKBOX)
 export const isSvnParam = paramType(SVN_TAG)
 export const isGitParam = paramType(GIT_REF)
+export const isRepoParam = paramType(REPO_REF)
 export const isCodelibParam = paramType(CODE_LIB)
 export const isBuildResourceParam = paramType(CONTAINER_TYPE)
 export const isArtifactoryParam = paramType(ARTIFACTORY)
diff --git a/src/frontend/devops-pipeline/src/utils/customRules.js b/src/frontend/devops-pipeline/src/utils/customRules.js
index aa3f5a16ed72..ed72b887cb97 100755
--- a/src/frontend/devops-pipeline/src/utils/customRules.js
+++ b/src/frontend/devops-pipeline/src/utils/customRules.js
@@ -126,6 +126,11 @@ const customeRules = {
         validate: function (value, args) {
             return /^(?:[1-9]|[1-9]\d|[1-9]\d{2}|1000)$/.test(value)
         }
+    },
+    objectRequired: {
+        validate: function (value, args) {
+            return Object.values(value).every(val => !!val)
+        }
     }
 }
 
diff --git a/src/frontend/devops-pipeline/src/utils/util.js b/src/frontend/devops-pipeline/src/utils/util.js
index 0320937615f3..d7ac88672c7d 100755
--- a/src/frontend/devops-pipeline/src/utils/util.js
+++ b/src/frontend/devops-pipeline/src/utils/util.js
@@ -701,6 +701,10 @@ export function bkVarWrapper (name) {
     return '${{' + name + '}}'
 }
 
+export function bkVarRepoRefWrapper (name) {
+    return '${{variables.' + name + '.repo-name}}@${{variables.' + name + '.branch}}'
+}
+
 export const toolbars = {
     bold: false, // 粗体
     italic: false, // 斜体
diff --git a/src/frontend/devops-pipeline/src/utils/validDictionary.js b/src/frontend/devops-pipeline/src/utils/validDictionary.js
index 679bedabaad6..c1a00fc56c7b 100755
--- a/src/frontend/devops-pipeline/src/utils/validDictionary.js
+++ b/src/frontend/devops-pipeline/src/utils/validDictionary.js
@@ -53,13 +53,16 @@ const dictionary = {
             paramsIdRule: field => '变量名只能使用英文字母，数字和下划线，首字符不能以数字开头',
             timeoutsRule: field => '请输入1-10080之间的正整数，支持引用流水线变量',
             reminderTimeRule: field => '请输入1-168之间的正整数',
-            maxConcurrencyRule: field => '请输入1-1000之间的正整数'
+            maxConcurrencyRule: field => '请输入1-1000之间的正整数',
+            objectRequired: field => '字段值缺失，请填入完整的值'
         }
     },
     'en-US': {
         messages: {
+            alpha: field => 'The field can only contain letters',
             unique: field => `${field} field cannot be repeated`,
             notInList: field => `${field} field cannot be repeated`,
+            required: field => 'This field cannot be empty',
             excludeComma: field => 'Field cannot contain English commas',
             string: field => 'Fields can only contain numbers, letters, and underscores',
             numeric: field => 'Fields can only contain numbers',
@@ -88,7 +91,9 @@ const dictionary = {
             paramsRule: () => 'Field only support English letter, numbers and underscores',
             paramsIdRule: field => 'Variable names can only contain English letters, numbers, and underscores, and must not start with a number.',
             timeoutsRule: field => 'Please enter an integer between 1-10080, or a pipeline variable',
-            reminderTimeRule: field => ''
+            reminderTimeRule: field => 'Please enter a positive integer between 1 and 168',
+            maxConcurrencyRule: field => 'Please enter a positive integer between 1 and 1000',
+            objectRequired: field => 'The field value is missing, please provide a complete value'
         }
     }
 }
diff --git a/src/frontend/devops-pipeline/src/views/subpages/preview.vue b/src/frontend/devops-pipeline/src/views/subpages/preview.vue
index a429498fa586..3904fc610ef0 100755
--- a/src/frontend/devops-pipeline/src/views/subpages/preview.vue
+++ b/src/frontend/devops-pipeline/src/views/subpages/preview.vue
@@ -84,7 +84,7 @@
             </template>
         </header>
         <div
-            v-if="activeName.has(3)"
+            v-show="activeName.has(3)"
             class="params-collapse-content"
         >
             <bk-alert
@@ -211,8 +211,9 @@
     import PipelineParamsForm from '@/components/pipelineParamsForm.vue'
     import { UPDATE_PREVIEW_PIPELINE_NAME, bus } from '@/utils/bus'
     import { allVersionKeyList } from '@/utils/pipelineConst'
-    import { getParamsValuesMap } from '@/utils/util'
+    import { getParamsValuesMap, isObject, isShallowEqual } from '@/utils/util'
     import { mapActions, mapGetters, mapState } from 'vuex'
+
     export default {
         components: {
             PipelineVersionsForm,
@@ -326,7 +327,9 @@
                     }
                     this.paramList = startupInfo.properties.filter(p => !p.constant && p.required && !allVersionKeyList.includes(p.id) && p.propertyType !== 'BUILD').map(p => ({
                         ...p,
-                        isChanged: p.defaultValue !== p.value,
+                        isChanged: isObject(p.defaultValue)
+                            ? !isShallowEqual(p.defaultValue, p.value)
+                            : p.defaultValue !== p.value,
                         readOnly: false,
                         label: `${p.id}${p.name ? `(${p.name})` : ''}`
                     }))
@@ -477,6 +480,11 @@
                 const paramsValid = await this.handleValidate()
                 if (!paramsValid) return
                 const params = this.getExecuteParams(this.pipelineId)
+                Object.keys(params).forEach(key => {
+                    if (isObject(params[key])) {
+                        params[key] = JSON.stringify(params[key])
+                    }
+                })
                 const skipAtoms = this.getSkipedAtoms()
                 console.log(params, skipAtoms)
                 try {
diff --git a/src/frontend/devops-pipeline/src/views/template/instance_create.vue b/src/frontend/devops-pipeline/src/views/template/instance_create.vue
index 114c77b0cf4c..d7a58c431fa5 100755
--- a/src/frontend/devops-pipeline/src/views/template/instance_create.vue
+++ b/src/frontend/devops-pipeline/src/views/template/instance_create.vue
@@ -281,6 +281,7 @@
     import AlertTips from '@/components/AlertTips.vue'
     import { allVersionKeyList } from '@/utils/pipelineConst'
     import { mapGetters } from 'vuex'
+    import { getParamsValuesMap, isObject } from '@/utils/util'
 
     export default {
         components: {
@@ -441,15 +442,9 @@
             },
             handleParams (stages) {
                 this.paramList = stages[0].containers[0].params || []
-                this.paramValues = this.paramList.reduce((values, param) => {
-                    values[param.id] = param.defaultValue
-                    return values
-                }, {})
+                this.paramValues = getParamsValuesMap(this.paramList)
                 this.templateParamList = stages[0].containers[0].templateParams || []
-                this.templateParamValues = this.templateParamList.reduce((values, param) => {
-                    values[param.id] = param.defaultValue
-                    return values
-                }, {})
+                this.templateParamValues = getParamsValuesMap(this.templateParamList)
                 if (stages[0].containers[0].buildNo) {
                     this.buildParams = stages[0].containers[0].buildNo
                 } else {
@@ -487,10 +482,7 @@
                         pipelineItem.initBuildNo = item.buildNo.buildNo
                     }
                     if (item.param.length) {
-                        const paramValues = item.param.reduce((values, param) => {
-                            values[param.id] = param.defaultValue
-                            return values
-                        }, {})
+                        const paramValues = getParamsValuesMap(item.param)
                         pipelineItem.params = this.deepCopyParams(item.param)
                         pipelineItem.pipelineParams = pipelineItem.params.filter(sub => this.buildNoParams.indexOf(sub.id) === -1)
                         pipelineItem.versionParams = pipelineItem.params.filter(sub => this.buildNoParams.indexOf(sub.id) > -1)
@@ -542,9 +534,9 @@
                 this.pipelineNameList.forEach(item => {
                     if (item.pipelineName === this.currentPipelineParams.pipelineName) {
                         item.paramValues[name] = value
-                        item.params.forEach(val => {
-                            if (val.id === name) {
-                                val.defaultValue = value
+                        item.params.forEach((i) => {
+                            if (i.id === name) {
+                                i.defaultValue = value
                             }
                         })
                     }
@@ -705,6 +697,7 @@
                 } else {
                     const params = []
                     const h = this.$createElement
+                    let isEmptyValue
 
                     this.pipelineNameList.forEach(pipeline => {
                         let buildNo
@@ -719,8 +712,21 @@
                             param: pipeline.params,
                             resetBuildNo: pipeline.resetBuildNo
                         })
+                        isEmptyValue = pipeline?.params?.some(item => {
+                            return isObject(item.defaultValue)
+                                ? Object.values(item.defaultValue).every(val => !val)
+                                : false
+                        })
                     })
+                    if (isEmptyValue) {
+                        this.$showTips({
+                            message: this.$t('newlist.paramsErr'),
+                            theme: 'error'
+                        })
+                        return
+                    }
                     const isRequired = params.some(item => item.buildNo && (typeof item.buildNo.buildNo === 'undefined' || item.buildNo.buildNo === ''))
+                 
                     if (isRequired) {
                         this.$showTips({
                             message: this.$t('template.buildNumErrTips'),
diff --git a/src/frontend/locale/pipeline/en-US.json b/src/frontend/locale/pipeline/en-US.json
index 0ae4e26c42a8..2b6e63e533f8 100644
--- a/src/frontend/locale/pipeline/en-US.json
+++ b/src/frontend/locale/pipeline/en-US.json
@@ -1058,6 +1058,11 @@
     "ifNotPresent": "Pull only if not present locally",
     "enableDockerTips": "When using this feature, please ensure that the build machine has Docker installed, and that the user running the third-party build agent has the necessary permissions to operate Docker.",
     "enabledPrivileged": "Enable Privileged Mode",
+    "repoName": "Code Repositories (repo-name)",
+    "branchName": "Branch (branch)",
+    "referencedTips": "Referenced by {0}",
+    "selectRepoTips": "Please select a repository",
+    "selectBranchTips": "Please select a branch",
     "batchAddTit": "Batch Add",
     "lineBreak": "Separate multiple options with line breaks",
     "noEnglishCommas": "Each option cannot contain English commas",
@@ -1076,6 +1081,7 @@
     "enum": "Radio",
     "multiple": "Checkbox",
     "checkbox": "Checkbox Confirmation Box",
+    "reporef": "Code repository and Branch",
     "svntag": "SVN branch or TAG",
     "gitref": "GIT branch or TAG",
     "codelib": "Code repository",
diff --git a/src/frontend/locale/pipeline/zh-CN.json b/src/frontend/locale/pipeline/zh-CN.json
index 5bbd75b89401..e4c370eb1c6f 100644
--- a/src/frontend/locale/pipeline/zh-CN.json
+++ b/src/frontend/locale/pipeline/zh-CN.json
@@ -1053,6 +1053,11 @@
     "ifNotPresent": "当本地不存在时才拉取",
     "enableDockerTips": "使用此功能时，请确保构建机已经安装Docker运行环境，且第三方构建机Agent的启动用户拥有Docker的操作权限",
     "enabledPrivileged": "是否开启特权模式",
+    "repoName": "代码库 (repo-name)",
+    "branchName": "分支 (branch)",
+    "referencedTips": "通过 {0} 引用",
+    "selectRepoTips": "请选择代码库",
+    "selectBranchTips": "请选择分支",
     "batchAddTit": "批量添加",
     "lineBreak": "多个选项用换行符分隔",
     "noEnglishCommas": "每个选项不能包含英文逗号",
@@ -1071,6 +1076,7 @@
     "enum": "单选框",
     "multiple": "复选框",
     "checkbox": "Checkbox确认框",
+    "reporef": "代码库和分支",
     "svntag": "SVN分支或TAG",
     "gitref": "GIT分支或TAG",
     "codelib": "代码库",