diff --git a/src/backend/repository/biz-repository/src/main/kotlin/com/tencent/bkrepo/repository/controller/user/UserArtifactPreloadController.kt b/src/backend/repository/biz-repository/src/main/kotlin/com/tencent/bkrepo/repository/controller/user/UserArtifactPreloadController.kt
index 2b1edab60b..b4be322fa6 100644
--- a/src/backend/repository/biz-repository/src/main/kotlin/com/tencent/bkrepo/repository/controller/user/UserArtifactPreloadController.kt
+++ b/src/backend/repository/biz-repository/src/main/kotlin/com/tencent/bkrepo/repository/controller/user/UserArtifactPreloadController.kt
@@ -98,9 +98,10 @@ class UserArtifactPreloadController(
         @PathVariable projectId: String,
         @PathVariable repoName: String,
         @PathVariable id: String,
-    ) {
+    ): Response<Void> {
         checkPreloadEnabled(preloadPlanService, preloadStrategyService)
         preloadStrategyService.delete(projectId, repoName, id)
+        return ResponseBuilder.success()
     }
 
     @ApiOperation("获取所有预加载策略")
@@ -143,9 +144,10 @@ class UserArtifactPreloadController(
         @PathVariable projectId: String,
         @PathVariable repoName: String,
         @PathVariable id: String,
-    ) {
+    ): Response<Void> {
         checkPreloadEnabled(preloadPlanService, preloadStrategyService)
         preloadPlanService.deletePlan(projectId, repoName, id)
+        return ResponseBuilder.success()
     }
 
     @ApiOperation("删除仓库的所有预加载计划")
@@ -154,9 +156,10 @@ class UserArtifactPreloadController(
     fun deleteAllPlans(
         @PathVariable projectId: String,
         @PathVariable repoName: String,
-    ) {
+    ): Response<Void> {
         checkPreloadEnabled(preloadPlanService, preloadStrategyService)
         preloadPlanService.deletePlan(projectId, repoName)
+        return ResponseBuilder.success()
     }
 
     private fun checkPreloadEnabled(
diff --git a/src/frontend/devops-op/package.json b/src/frontend/devops-op/package.json
index 158d2b470d..cc31b012aa 100644
--- a/src/frontend/devops-op/package.json
+++ b/src/frontend/devops-op/package.json
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-service": "~5.0.1",
+    "@vue/cli-service": "~5.0.8",
     "autoprefixer": "9.5.1",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "chalk": "2.4.2",
diff --git a/src/frontend/devops-op/src/api/preload.js b/src/frontend/devops-op/src/api/preload.js
new file mode 100644
index 0000000000..54f7969a0c
--- /dev/null
+++ b/src/frontend/devops-op/src/api/preload.js
@@ -0,0 +1,66 @@
+import request from '@/utils/request'
+
+const PREFIX_SERVICES = '/repository/api/preload'
+
+export function queryStrategies(projectId, repoName) {
+  return request({
+    url: `${PREFIX_SERVICES}/strategy/${projectId}/${repoName}`,
+    method: 'get'
+  })
+}
+
+export function deleteStrategy(projectId, repoName, id) {
+  return request({
+    url: `${PREFIX_SERVICES}/strategy/${projectId}/${repoName}/${id}`,
+    method: 'delete'
+  })
+}
+
+export function createStrategy(data) {
+  return request({
+    url: `${PREFIX_SERVICES}/strategy/`,
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateStrategy(data) {
+  return request({
+    url: `${PREFIX_SERVICES}/strategy/`,
+    method: 'put',
+    data: data
+  })
+}
+
+export function createPlan(data) {
+  return request({
+    url: `${PREFIX_SERVICES}/plan/`,
+    method: 'post',
+    data: data
+  })
+}
+
+export function queryPlans(body) {
+  return request({
+    url: `${PREFIX_SERVICES}/plan/${body.projectId}/${body.repoName}`,
+    method: 'get',
+    params: {
+      pageNumber: body.pageNumber,
+      pageSize: body.pageSize
+    }
+  })
+}
+
+export function deletePlan(projectId, repoName, id) {
+  return request({
+    url: `${PREFIX_SERVICES}/plan/${projectId}/${repoName}/${id}`,
+    method: 'delete'
+  })
+}
+
+export function deletePlans(projectId, repoName) {
+  return request({
+    url: `${PREFIX_SERVICES}/plan/${projectId}/${repoName}`,
+    method: 'delete'
+  })
+}
diff --git a/src/frontend/devops-op/src/icons/svg/service-config.svg b/src/frontend/devops-op/src/icons/svg/service-config.svg
new file mode 100644
index 0000000000..b154d98e0b
--- /dev/null
+++ b/src/frontend/devops-op/src/icons/svg/service-config.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M31.523 26.605l-1.086-0.633c0.060-0.304 0.096-0.656 0.1-1.015l0-0.003c-0.004-0.363-0.040-0.715-0.105-1.057l0.006 0.037 1.085-0.636c0.279-0.166 0.462-0.465 0.462-0.808 0-0.172-0.046-0.333-0.127-0.472l0.002 0.004-0.921-1.613c-0.163-0.282-0.464-0.468-0.807-0.468-0.169 0-0.328 0.045-0.465 0.124l0.005-0.002-1.094 0.633c-0.492-0.429-1.068-0.777-1.698-1.014l-0.039-0.013v-0.79c0-0.002 0-0.005 0-0.008 0-0.509-0.413-0.922-0.921-0.922h-1.858c-0.51 0.003-0.922 0.417-0.922 0.927 0 0.001 0 0.002 0 0.003v-0 0.79c-0.65 0.231-1.226 0.592-1.736 1.028l-1.094-0.635c-0.133-0.078-0.292-0.125-0.463-0.125-0.344 0-0.643 0.188-0.802 0.467l-0.002 0.005-0.93 1.621c-0.078 0.134-0.124 0.295-0.124 0.467 0 0.343 0.183 0.642 0.457 0.806l0.004 0.002 1.086 0.633c-0.060 0.305-0.096 0.657-0.099 1.018l-0 0.003c0.004 0.363 0.040 0.715 0.105 1.057l-0.006-0.037-1.086 0.633c-0.279 0.166-0.462 0.465-0.462 0.808 0 0.172 0.046 0.333 0.127 0.472l-0.002-0.004 0.922 1.613c0.163 0.282 0.463 0.468 0.807 0.468 0.169 0 0.328-0.045 0.464-0.124l-0.004 0.002 1.094-0.634c0.492 0.429 1.067 0.778 1.697 1.016l0.039 0.013v0.79c-0 0.002-0 0.005-0 0.007 0 0.509 0.413 0.922 0.921 0.922h1.851c0.51-0.003 0.921-0.417 0.921-0.927 0-0.001 0-0.002 0-0.003v0-0.79c0.65-0.231 1.226-0.592 1.736-1.029l1.094 0.634c0.133 0.078 0.292 0.124 0.462 0.124 0.344 0 0.643-0.188 0.803-0.466l0.002-0.005 0.922-1.613c0.272-0.46 0.124-1.027-0.321-1.283zM24.986 28.188c-0.001 0-0.001 0-0.002 0-1.786 0-3.235-1.448-3.235-3.235s1.448-3.235 3.235-3.235c1.786 0 3.235 1.448 3.235 3.235v0c0 1.786-1.447 3.234-3.233 3.235h-0z"/><path d="M18.397 17.829v-16.652c-0.002-0.628-0.51-1.137-1.137-1.139h-16.122c-0.628 0.002-1.136 0.511-1.138 1.139v27.181c0.002 0.628 0.51 1.137 1.137 1.139h15.46c-0.78-1.35-1.24-2.969-1.24-4.696 0-2.752 1.168-5.23 3.036-6.967l0.006-0.005zM9.198 22.132c-1.104 0-1.84-0.736-1.84-1.841 0-1.006 0.834-1.841 1.84-1.841 1.104 0 1.84 0.737 1.84 1.841 0 1.006-0.834 1.841-1.84 1.841zM14.718 11.086h-11.038v-1.841h11.038zM14.718 5.562h-11.038v-1.841h11.038z"/></svg>
\ No newline at end of file
diff --git a/src/frontend/devops-op/src/router/index.js b/src/frontend/devops-op/src/router/index.js
index 06600c068c..e5e859f09c 100644
--- a/src/frontend/devops-op/src/router/index.js
+++ b/src/frontend/devops-op/src/router/index.js
@@ -25,6 +25,7 @@ export const ROUTER_NAME_FILE_CACHE = 'FileCache'
 export const ROUTER_NAME_FILE_SYSTEM_RECORD = 'FileSystemRecord'
 export const ROUTER_NAME_REPO_CONFIG = 'RepoConfig'
 export const ROUTER_NAME_RATE_LIMITER_CONFIG = 'RateLimiterConfig'
+export const ROUTER_NAME_PRELOAD_CONFIG = 'PreloadConfig'
 
 Vue.use(Router)
 
@@ -326,6 +327,18 @@ export const asyncRoutes = [
       }
     ]
   },
+  {
+    path: '/preload-config',
+    component: Layout,
+    children: [
+      {
+        path: '/',
+        name: ROUTER_NAME_PRELOAD_CONFIG,
+        meta: { title: '制品预加载配置', icon: 'service-config' },
+        component: () => import('@/views/preload/index')
+      }
+    ]
+  },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/frontend/devops-op/src/views/preload/components/EditPlanConfigDialog.vue b/src/frontend/devops-op/src/views/preload/components/EditPlanConfigDialog.vue
new file mode 100644
index 0000000000..32151f6a4d
--- /dev/null
+++ b/src/frontend/devops-op/src/views/preload/components/EditPlanConfigDialog.vue
@@ -0,0 +1,165 @@
+<template>
+  <el-dialog title="创建预加载计划配置" :visible.sync="showDialog" :before-close="close">
+    <el-form ref="form" :rules="rules" :model="plan" status-icon>
+      <el-form-item ref="project-form-item" label="项目ID" prop="projectId" :rules="[{ required: true, message: '项目ID不能为空'}]">
+        <el-autocomplete
+          v-model="plan.projectId"
+          class="inline-input"
+          :fetch-suggestions="queryProjects"
+          placeholder="请输入项目ID"
+          size="mini"
+          @select="selectProject"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item
+        ref="repo-form-item"
+        label="仓库名称"
+        prop="repoName"
+        :rules="[{ required: true, message: '仓库名不能为空'}]"
+      >
+        <el-autocomplete
+          v-model="plan.repoName"
+          class="inline-input"
+          :fetch-suggestions="queryRepositories"
+          :disabled="!plan.projectId"
+          placeholder="请输入仓库名"
+          size="mini"
+          @select="selectRepo"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item label="文件路径" prop="fullPath" :rules="[{ required: true, message: '文件路径不能为空'}]">
+        <el-input v-model="plan.fullPath" style="height: 40px ; width: 500px;" />
+      </el-form-item>
+      <el-form-item label="预加载计划执行毫秒时间戳" prop="executeTime">
+        <el-date-picker
+          v-model="plan.executeTime"
+          type="datetime"
+          placeholder="选择日期时间"
+          default-time="12:00:00"
+        />
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="handleUpdate()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { createPlan } from '@/api/preload'
+import { searchProjects } from '@/api/project'
+import { listRepositories } from '@/api/repository'
+
+export default {
+  name: 'EditPlanConfigDialog',
+  props: {
+    visible: Boolean,
+    createMode: Boolean,
+    /**
+     * 仅在更新模式时有值
+     */
+    updatingPlanConfig: {
+      type: Object,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      repoCache: {},
+      projects: undefined,
+      showDialog: this.visible,
+      plan: this.newPlan(),
+      rules: {}
+    }
+  },
+  watch: {
+    visible: function(newVal) {
+      if (newVal) {
+        this.resetPlan()
+        this.showDialog = true
+      } else {
+        this.close()
+      }
+    }
+  },
+  methods: {
+    queryProjects(queryStr, cb) {
+      searchProjects(queryStr).then(res => {
+        this.projects = res.data.records
+        cb(this.projects)
+      })
+    },
+    selectProject(project) {
+      this.$refs['project-form-item'].resetField()
+      this.plan.projectId = project.name
+    },
+    queryRepositories(queryStr, cb) {
+      let repositories = this.repoCache[this.plan.projectId]
+      if (!repositories) {
+        listRepositories(this.plan.projectId).then(res => {
+          repositories = res.data
+          this.repoCache[this.plan.projectId] = repositories
+          cb(this.doFilter(repositories, queryStr))
+        })
+      } else {
+        cb(this.doFilter(repositories, queryStr))
+      }
+    },
+    selectRepo(repo) {
+      this.$refs['repo-form-item'].resetField()
+      this.plan.repoName = repo.name
+    },
+    doFilter(arr, queryStr) {
+      return queryStr ? arr.filter(obj => {
+        return obj.name.toLowerCase().indexOf(queryStr.toLowerCase()) !== -1
+      }) : arr
+    },
+    resetPlan() {
+      this.plan = this.newPlan()
+      this.$nextTick(() => {
+        this.$refs['form'].clearValidate()
+      })
+    },
+    newPlan() {
+      const plan = {
+        projectId: '',
+        repoName: '',
+        executeTime: '',
+        fullPath: ''
+      }
+      return plan
+    },
+    close(changed) {
+      this.showDialog = false
+      this.$refs['form'].resetFields()
+      if (changed === true) {
+        this.$emit('updated')
+      }
+      this.$emit('update:visible', false)
+    },
+    handleUpdate() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.plan.executeTime = this.plan.executeTime.getTime()
+          createPlan(this.plan).then(() => {
+            this.$message.success('新建配置成功')
+            this.close(true)
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/frontend/devops-op/src/views/preload/components/EditStrategyConfigDialog.vue b/src/frontend/devops-op/src/views/preload/components/EditStrategyConfigDialog.vue
new file mode 100644
index 0000000000..94dff6c904
--- /dev/null
+++ b/src/frontend/devops-op/src/views/preload/components/EditStrategyConfigDialog.vue
@@ -0,0 +1,208 @@
+<template>
+  <el-dialog :title="createMode?'创建预加载策略配置':'更新预加载策略配置'" :visible.sync="showDialog" :before-close="close">
+    <el-form ref="form" :rules="rules" :model="strategy" status-icon>
+      <el-form-item ref="project-form-item" label="项目ID" prop="projectId" :rules="[{ required: true, message: '项目ID不能为空'}]">
+        <el-autocomplete
+          v-model="strategy.projectId"
+          class="inline-input"
+          :fetch-suggestions="queryProjects"
+          placeholder="请输入项目ID"
+          size="mini"
+          @select="selectProject"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item
+        ref="repo-form-item"
+        label="仓库名称"
+        prop="repoName"
+        :rules="[{ required: true, message: '仓库名不能为空'}]"
+      >
+        <el-autocomplete
+          v-model="strategy.repoName"
+          class="inline-input"
+          :fetch-suggestions="queryRepositories"
+          :disabled="!strategy.projectId"
+          placeholder="请输入仓库名"
+          size="mini"
+          @select="selectRepo"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item label="策略类型" prop="type">
+        <el-select
+          v-model="strategy.type"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+            :disabled="item.disabled"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="文件路径" prop="fullPathRegex" :rules="[{ required: true, message: '文件路径不能为空'}]">
+        <el-input v-model="strategy.fullPathRegex" style="height: 40px ; width: 500px;" />
+      </el-form-item>
+      <el-form-item label="最小大小" prop="minSize">
+        <el-input-number v-model="strategy.minSize" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="最近时间内(秒)" prop="recentSeconds">
+        <el-input-number v-model="strategy.recentSeconds" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item v-if="strategy.type !== 'INTELLIGENT'" label="预加载时间(cron表达式)" prop="preloadCron">
+        <el-input v-model="strategy.preloadCron" style="height: 40px ; width: 500px;" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="handleUpdate()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import _ from 'lodash'
+import { createStrategy, updateStrategy } from '@/api/preload'
+import { searchProjects } from '@/api/project'
+import { listRepositories } from '@/api/repository'
+
+export default {
+  name: 'EditStrategyConfigDialog',
+  props: {
+    visible: Boolean,
+    createMode: Boolean,
+    /**
+     * 仅在更新模式时有值
+     */
+    updatingStrategyConfig: {
+      type: Object,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      repoCache: {},
+      showDialog: this.visible,
+      projects: undefined,
+      strategy: this.newStrategy(),
+      data: '',
+      rules: {},
+      options: [
+        { value: 'CUSTOM',
+          label: '自定义' },
+        { value: 'CUSTOM_GENERATED',
+          label: '系统自定义类型',
+          disabled: true
+        },
+        { value: 'INTELLIGENT',
+          label: '智能预加载策略' }
+      ]
+    }
+  },
+  watch: {
+    visible: function(newVal) {
+      if (newVal) {
+        this.resetStrategy()
+        this.showDialog = true
+      } else {
+        this.close()
+      }
+    }
+  },
+  methods: {
+    queryProjects(queryStr, cb) {
+      searchProjects(queryStr).then(res => {
+        this.projects = res.data.records
+        cb(this.projects)
+      })
+    },
+    selectProject(project) {
+      this.$refs['project-form-item'].resetField()
+      this.strategy.projectId = project.name
+    },
+    queryRepositories(queryStr, cb) {
+      let repositories = this.repoCache[this.strategy.projectId]
+      if (!repositories) {
+        listRepositories(this.strategy.projectId).then(res => {
+          repositories = res.data
+          this.repoCache[this.strategy.projectId] = repositories
+          cb(this.doFilter(repositories, queryStr))
+        })
+      } else {
+        cb(this.doFilter(repositories, queryStr))
+      }
+    },
+    selectRepo(repo) {
+      this.$refs['repo-form-item'].resetField()
+      this.strategy.repoName = repo.name
+    },
+    doFilter(arr, queryStr) {
+      return queryStr ? arr.filter(obj => {
+        return obj.name.toLowerCase().indexOf(queryStr.toLowerCase()) !== -1
+      }) : arr
+    },
+    resetStrategy() {
+      if (this.createMode) {
+        this.strategy = this.newStrategy()
+      } else {
+        this.strategy = _.cloneDeep(this.updatingStrategyConfig)
+      }
+      this.$nextTick(() => {
+        this.$refs['form'].clearValidate()
+      })
+    },
+    newStrategy() {
+      const strategy = {
+        projectId: '',
+        repoName: '',
+        fullPathRegex: '',
+        minSize: '',
+        recentSeconds: '',
+        preloadCron: '',
+        type: 'CUSTOM'
+      }
+      return strategy
+    },
+    close(changed) {
+      this.showDialog = false
+      this.$refs['form'].resetFields()
+      if (changed === true) {
+        this.$emit('updated')
+      }
+      this.$emit('update:visible', false)
+    },
+    handleUpdate() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          if (this.strategy.preloadCron === '') {
+            this.strategy.preloadCron = null
+          }
+          if (this.createMode) {
+            createStrategy(this.strategy).then(() => {
+              this.$message.success('新建配置成功')
+              this.close(true)
+            })
+          } else {
+            updateStrategy(this.strategy).then(() => {
+              this.$message.success('更新配置成功')
+              this.close(true)
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/frontend/devops-op/src/views/preload/index.vue b/src/frontend/devops-op/src/views/preload/index.vue
new file mode 100644
index 0000000000..9e69e0b072
--- /dev/null
+++ b/src/frontend/devops-op/src/views/preload/index.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="app-container node-container">
+    <el-form ref="form" :inline="true" :model="clientQuery">
+      <el-form-item label="配置类型" style="margin-left: 15px">
+        <el-select v-model="clientQuery.type" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item ref="project-form-item" label="项目ID" prop="projectId" :rules="[{ required: true, message: '项目ID不能为空'}]">
+        <el-autocomplete
+          v-model="clientQuery.projectId"
+          class="inline-input"
+          :fetch-suggestions="queryProjects"
+          placeholder="请输入项目ID"
+          size="mini"
+          @select="selectProject"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item
+        ref="repo-form-item"
+        style="margin-left: 15px"
+        label="仓库名称"
+        prop="repoName"
+        :rules="[{ required: true, message: '仓库名称不能为空'}]"
+      >
+        <el-autocomplete
+          v-model="clientQuery.repoName"
+          class="inline-input"
+          :fetch-suggestions="queryRepositories"
+          :disabled="!clientQuery.projectId"
+          placeholder="请输入仓库名"
+          size="mini"
+          @select="selectRepo"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          size="mini"
+          type="primary"
+          :disabled="!clientQuery.projectId"
+          @click="changeRouteQueryParams(1)"
+        >查询</el-button>
+      </el-form-item>
+      <el-form-item v-if="clientQuery.type === 'plan'">
+        <el-button
+          size="mini"
+          type="danger"
+          :disabled="!clientQuery.projectId"
+          @click="handleDeleteAll()"
+        >删除全部</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="preloadData" style="width: 100%">
+      <el-table-column prop="projectId" label="项目ID" align="center" />
+      <el-table-column prop="repoName" label="仓库名称" align="center" />
+      <el-table-column v-if="clientQuery.type!=='strategy'" key="fullPath" prop="fullPath" label="文件路径" align="center" />
+      <el-table-column v-if="clientQuery.type!=='strategy'" key="sha256" prop="sha256" label="SHA256" align="center" />
+      <el-table-column v-if="clientQuery.type!=='strategy'" key="size" prop="size" label="文件大小" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ convertFileSize(scope.row.size) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="clientQuery.type!=='strategy'" key="credentialsKey" prop="credentialsKey" label="CredentialsKey" align="center" />
+      <el-table-column v-if="clientQuery.type!=='strategy'" key="executeTime" prop="executeTime" label="预加载计划时间" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ formatNormalDate(new Date(scope.row.executeTime)) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="clientQuery.type==='strategy'" key="fullPathRegex" prop="fullPathRegex" label="文件路径" align="center" />
+      <el-table-column v-if="clientQuery.type==='strategy'" key="minSize" prop="minSize" label="最小大小" align="center" />
+      <el-table-column v-if="clientQuery.type==='strategy'" key="recentSeconds" prop="recentSeconds" label="最近时间内(秒)" align="center" />
+      <el-table-column v-if="clientQuery.type==='strategy'" key="preloadCron" prop="preloadCron" label="预加载时间" align="center" />
+      <el-table-column v-if="clientQuery.type==='strategy'" key="type" prop="type" label="策略类型" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ formatType(scope.row.type) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column align="right">
+        <template slot="header">
+          <el-button type="primary" @click="showEdit(true)">创建</el-button>
+        </template>
+        <template slot-scope="scope">
+          <el-button
+            v-if="clientQuery.type === 'strategy'"
+            size="mini"
+            type="primary"
+            @click="showEdit(false, scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-if="!scope.row.default"
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top:20px">
+      <el-pagination
+        v-if="total>0 && clientQuery.type === 'plan'"
+        :current-page="clientQuery.pageNumber"
+        :page-size="clientQuery.pageSize"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+    <edit-plan-config-dialog :visible.sync="showPlanDialog" :updating-plan-config="param" :create-mode="createMode" @updated="updated" />
+    <edit-strategy-config-dialog :visible.sync="showStrategyDialog" :updating-strategy-config="param" :create-mode="createMode" @updated="updated" />
+  </div>
+</template>
+<script>
+import { searchProjects } from '@/api/project'
+import { listRepositories } from '@/api/repository'
+import { formatNormalDate } from '@/utils/date'
+import { convertFileSize } from '@/utils/file'
+import editPlanConfigDialog from '@/views/preload/components/EditPlanConfigDialog'
+import editStrategyConfigDialog from '@/views/preload/components/EditStrategyConfigDialog'
+import { deletePlan, deletePlans, deleteStrategy, queryPlans, queryStrategies } from '@/api/preload'
+
+export default {
+  name: 'PreloadConfig',
+  components: { editPlanConfigDialog, editStrategyConfigDialog },
+  inject: ['reload'],
+  beforeRouteUpdate(to, from, next) {
+    this.onRouteUpdate(to)
+    next()
+  },
+  data() {
+    return {
+      loading: false,
+      projects: undefined,
+      repoCache: {},
+      total: 0,
+      clientQuery: {
+        projectId: '',
+        repoName: '',
+        pageNumber: 1,
+        pageSize: 20,
+        currentPage: 1,
+        type: 'strategy'
+      },
+      options: [
+        { label: '预加载策略', value: 'strategy' },
+        { label: '预加载计划', value: 'plan' }
+      ],
+      preloadData: [],
+      showPlanDialog: false,
+      showStrategyDialog: false,
+      param: undefined,
+      createMode: false
+    }
+  },
+  watch: {
+    'clientQuery.type'(newType) {
+      this.preloadData = []
+      this.total = 0
+      this.clientQuery.pageNumber = 1
+      this.clientQuery.currentPage = 1
+    }
+  },
+  mounted() {
+    this.onRouteUpdate(this.$route)
+  },
+  methods: {
+    queryProjects(queryStr, cb) {
+      searchProjects(queryStr).then(res => {
+        this.projects = res.data.records
+        cb(this.projects)
+      })
+    },
+    selectProject(project) {
+      this.$refs['project-form-item'].resetField()
+      this.clientQuery.projectId = project.name
+    },
+    queryRepositories(queryStr, cb) {
+      let repositories = this.repoCache[this.clientQuery.projectId]
+      if (!repositories) {
+        listRepositories(this.clientQuery.projectId).then(res => {
+          repositories = res.data
+          this.repoCache[this.clientQuery.projectId] = repositories
+          cb(this.doFilter(repositories, queryStr))
+        })
+      } else {
+        cb(this.doFilter(repositories, queryStr))
+      }
+    },
+    selectRepo(repo) {
+      this.$refs['repo-form-item'].resetField()
+      this.clientQuery.repoName = repo.name
+    },
+    doFilter(arr, queryStr) {
+      return queryStr ? arr.filter(obj => {
+        return obj.name.toLowerCase().indexOf(queryStr.toLowerCase()) !== -1
+      }) : arr
+    },
+    handleCurrentChange(val) {
+      this.clientQuery.currentPage = val
+      this.changeRouteQueryParams(val)
+    },
+    changeRouteQueryParams(pageNum) {
+      const query = {
+        page: String(pageNum)
+      }
+      query.projectId = this.clientQuery.projectId
+      query.repoName = this.clientQuery.repoName
+      query.type = this.clientQuery.type
+      this.$router.push({ path: '/preload-config', query: query })
+    },
+    onRouteUpdate(route) {
+      const query = route.query
+      const clientQuery = this.clientQuery
+      this.clientQuery.type = query.type ? query.type : this.clientQuery.type
+      if (clientQuery.projectId.trim() === '' && (!query.projectId || query.projectId === '' || query.projectId === undefined)) {
+        return
+      }
+      clientQuery.projectId = query.projectId ? query.projectId : ''
+      clientQuery.repoName = query.repoName ? query.repoName : ''
+      clientQuery.pageNumber = query.page ? Number(query.page) : 1
+      this.$nextTick(() => {
+        this.queryClients(clientQuery)
+      })
+    },
+    queryClients(clientQuery) {
+      if (this.$refs['form']) {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.doQueryClients(clientQuery)
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    doQueryClients(clientQuery) {
+      let promise = null
+      if (clientQuery.type === 'plan') {
+        promise = queryPlans(clientQuery)
+      } else {
+        promise = queryStrategies(clientQuery.projectId, clientQuery.repoName)
+      }
+      promise.then(res => {
+        this.preloadData = res.data.records ? res.data.records : res.data
+        this.total = res.data.totalRecords ? res.data.totalRecords : res.data.length
+      })
+    },
+    formatNormalDate(data) {
+      return formatNormalDate(data)
+    },
+    formatType(data) {
+      if (data === 'CUSTOM') {
+        return '自定义'
+      } else if (data === 'CUSTOM_GENERATED') {
+        return '系统自定义类型'
+      } else {
+        return '智能预加载策略'
+      }
+    },
+    convertFileSize(size) {
+      return convertFileSize(size)
+    },
+    showEdit(mode, row) {
+      this.createMode = mode
+      this.param = row
+      if (this.clientQuery.type === 'plan') {
+        this.showPlanDialog = true
+      } else {
+        this.showStrategyDialog = true
+      }
+    },
+    handleDelete(row) {
+      this.$confirm(`是否确定删除当前配置`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let promise = null
+        if (this.clientQuery.type === 'plan') {
+          promise = deletePlan(row.projectId, row.repoName, row.id)
+        } else {
+          promise = deleteStrategy(row.projectId, row.repoName, row.id)
+        }
+        promise.then(() => {
+          this.updated()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    handleDeleteAll() {
+      this.$confirm(`是否确定删除当前条件下所有配置`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const promise = deletePlans(this.clientQuery.projectId, this.clientQuery.repoName)
+        promise.then(() => {
+          this.updated()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    updated() {
+      this.reload()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style>
+</style>
diff --git a/src/frontend/devops-op/src/views/repoConfig/components/editRepoConfigDialog.vue b/src/frontend/devops-op/src/views/repoConfig/components/EditRepoConfigDialog.vue
similarity index 100%
rename from src/frontend/devops-op/src/views/repoConfig/components/editRepoConfigDialog.vue
rename to src/frontend/devops-op/src/views/repoConfig/components/EditRepoConfigDialog.vue
diff --git a/src/frontend/devops-op/src/views/repoConfig/index.vue b/src/frontend/devops-op/src/views/repoConfig/index.vue
index cf0622ec6d..a4ee1f6b6c 100644
--- a/src/frontend/devops-op/src/views/repoConfig/index.vue
+++ b/src/frontend/devops-op/src/views/repoConfig/index.vue
@@ -161,7 +161,7 @@ import { searchProjects } from '@/api/project'
 import { listRepositories, pageRepositories } from '@/api/repository'
 import { formatNormalDate } from '@/utils/date'
 import { convertFileSize } from '@/utils/file'
-import EditRepoConfigDialog from '@/views/repoConfig/components/editRepoConfigDialog'
+import EditRepoConfigDialog from '@/views/repoConfig/components/EditRepoConfigDialog'
 
 export default {
   name: 'RepoConfig',