diff --git a/bcs-services/bcs-bscp/ui/src/api/record.ts b/bcs-services/bcs-bscp/ui/src/api/record.ts
new file mode 100644
index 0000000000..efc4b9ade6
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/api/record.ts
@@ -0,0 +1,29 @@
+import http from '../request';
+import { IRecordQuery } from '../../types/record';
+
+/**
+ * 获取操作记录列表
+ * @param biz_id 空间ID
+ * @param params 查询参数
+ * @returns
+ */
+export const getRecordList = (biz_id: string, params: IRecordQuery) =>
+  http.get(`/config/biz_id/${biz_id}/audits`, { params }).then((res) => res.data);
+
+/**
+ * 审批操作：撤销/驳回/通过/手动上线
+ * @param biz_id 空间ID
+ * @param app_id 服务ID
+ * @param release_id 版本ID
+ * @param params 参数
+ * @returns
+ */
+export const approve = (
+  biz_id: string,
+  app_id: number,
+  release_id: number,
+  params: { publish_status: string; reason?: string },
+) =>
+  http
+    .post(`/config/biz_id/${biz_id}/app_id/${app_id}/release_id/${release_id}/approve`, { ...params })
+    .then((res) => res.data);
diff --git a/bcs-services/bcs-bscp/ui/src/components/head.vue b/bcs-services/bcs-bscp/ui/src/components/head.vue
index e2114d78f1..69d06a033d 100644
--- a/bcs-services/bcs-bscp/ui/src/components/head.vue
+++ b/bcs-services/bcs-bscp/ui/src/components/head.vue
@@ -179,6 +179,7 @@
         { id: 'configuration-example', module: 'example', name: t('配置示例') },
       ],
     },
+    { id: 'records-all', module: 'records', name: t('操作记录') },
   ]);
 
   const optionList = ref<ISpaceDetail[]>([]);
diff --git a/bcs-services/bcs-bscp/ui/src/constants/config.ts b/bcs-services/bcs-bscp/ui/src/constants/config.ts
index 097a70b641..4f13899d98 100644
--- a/bcs-services/bcs-bscp/ui/src/constants/config.ts
+++ b/bcs-services/bcs-bscp/ui/src/constants/config.ts
@@ -75,19 +75,19 @@ export enum APPROVE_TYPE {
   Rejected, // 2 驳回/撤销
 }
 
-// 版本上线状态
-export const ONLINE_TYPE = {
-  Manually: 'Manually', // 手动上线
-  Automatically: 'Automatically', // 审批通过后自动上线
-  Periodically: 'Periodically', // 定时上线
-  Immediately: 'Immediately', // 立即上线
-};
-
 // 版本上线方式
-export const APPROVE_STATUS = {
-  PendApproval: 'PendApproval', // 待审批
-  PendPublish: 'PendPublish', // 待上线
-  RevokedPublish: 'RevokedPublish', // 撤销上线
-  RejectedApproval: 'RejectedApproval', // 上线驳回
-  AlreadyPublish: 'AlreadyPublish', // 已上线
-};
+export enum ONLINE_TYPE {
+  Manually = 'Manually', // 手动上线
+  Automatically = 'Automatically', // 审批通过后自动上线
+  Periodically = 'Periodically', // 定时上线
+  Immediately = 'Immediately', // 立即上线
+}
+
+// 版本状态
+export enum APPROVE_STATUS {
+  PendApproval = 'PendApproval', // 待审批
+  PendPublish = 'PendPublish', // 待上线
+  RevokedPublish = 'RevokedPublish', // 撤销上线
+  RejectedApproval = 'RejectedApproval', // 审批驳回
+  AlreadyPublish = 'AlreadyPublish', // 已上线
+}
diff --git a/bcs-services/bcs-bscp/ui/src/constants/record.ts b/bcs-services/bcs-bscp/ui/src/constants/record.ts
new file mode 100644
index 0000000000..05d081ee37
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/constants/record.ts
@@ -0,0 +1,43 @@
+import { localT } from '../i18n';
+
+// 资源类型
+export const RECORD_RES_TYPE = {
+  app_config: localT('服务配置'), // 2024.9 第一版只有这个字段
+};
+
+// 操作行为
+export const ACTION = {
+  Create: localT('创建服务'),
+  Publish: localT('上线服务'),
+  Update: localT('更新服务'),
+  Delete: localT('删除服务'),
+  PublishVersionConfig: localT('上线版本配置'), // 2024.9 第一版只有这个字段
+};
+
+// 资源实例
+export const INSTANCE = {
+  releases_name: localT('配置版本名称'),
+  group: localT('配置上线范围'),
+};
+
+// 状态
+export const STATUS = {
+  PendApproval: localT('待审批'),
+  PendPublish: localT('待上线'),
+  RevokedPublish: localT('撤销上线'),
+  RejectedApproval: localT('审批驳回'),
+  AlreadyPublish: localT('已上线'),
+  Failure: localT('失败'), // 脚本相关的才会有
+  Success: localT('成功'), // 脚本相关的才会有
+};
+
+// 版本状态
+export enum APPROVE_STATUS {
+  PendApproval = 'PendApproval', // 待审批
+  PendPublish = 'PendPublish', // 待上线
+  RevokedPublish = 'RevokedPublish', // 撤销上线
+  RejectedApproval = 'RejectedApproval', // 审批驳回
+  AlreadyPublish = 'AlreadyPublish', // 已上线
+  Failure = 'Failure',
+  Success = 'Success',
+}
diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
index a23d1db5ee..db5aa4b299 100644
--- a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
+++ b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
@@ -475,6 +475,7 @@ export default {
   '文件上传准备中，请稍候…': 'File upload is in preparation, please wait...',
   '( 后台已存在此文件，上传快速完成 )': '( The background already has this file, the upload is completed quickly )',
   '立即上线：点击“确认上线”后，配置版本将立即上线，适用于紧急更新等立即生效的场景定时上线：点击“确认上线”后，配置版本不会立即生效，可设定具体时间点，使版本在该时间自动上线，适用于非紧急更新场景，避免高峰时段上线，降低用户影响': '立即上线：点击“确认上线”后，配置版本将立即上线，适用于紧急更新等立即生效的场景\n定时上线：点击“确认上线”后，配置版本不会立即生效，可设定具体时间点，使版本在该时间自动上线，适用于非紧急更新场景，避免高峰时段上线，降低用户影响',
+  审批开启的文案: '此服务版本上线已启用审批流程，请选择审批通过后的上线方式\n手动上线：适用于需人工干预和确认的场景，常用于重要业务或正式环\n境中的模块配置上线\n审批通过后立即上线：适用于高度自动化的场景，常用于非正式环境的\n配置上线，以提升部署效率\n定时上线：适用于需在特定时间上线的场景；若在指定时间前审批流程\n未完成，则将自动切换为手动上线',
 
   // 分组管理
   新增分组: 'New group',
diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
index f6c3fab7c8..7fb7707748 100644
--- a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
+++ b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -98,6 +98,7 @@ export default {
   配置示例: '配置示例',
   业务名: '业务名',
   业务: '业务',
+  操作记录: '操作记录',
 
 
   // 配置管理
@@ -494,9 +495,34 @@ export default {
   版本已上线: '版本已上线',
   等待定时上线: '等待定时上线',
   待审批: '待审批',
-  上线驳回: '上线驳回',
+  审批驳回: '审批驳回',
   撤销上线: '撤销上线',
   审批通过: '审批通过',
+  待上线: '待上线',
+  操作时间: '操作时间',
+  所属服务: '所属服务',
+  资源类型: '资源类型',
+  操作行为: '操作行为',
+  资源实例: '资源实例',
+  操作人: '操作人',
+  操作途径: '操作途径',
+  // 状态: '状态',
+  // 操作: '操作',
+  服务配置: '服务配置',
+  创建服务: '创建服务',
+  // 上线服务: '上线服务',
+  更新服务: '更新服务',
+  删除服务: '删除服务',
+  上线版本配置: '上线版本配置',
+  '提示-已上线文案': '上线操作人：{reviser}\n上线时间：{time}',
+  '提示-审批驳回': '审批已驳回\n审批人：{reviser}\n上线时间：{time}\n驳回原因：{reason}',
+  '提示-已撤销': '已撤销\n撤销人：{reviser}\n撤销时间：{time}',
+  '提示-失败': '此脚本版本正在被服务使用，删除失败',
+  配置版本名称: '配置版本名称',
+  配置上线范围: '配置上线范围',
+  去审批: '去审批',
+  审批: '审批',
+  再次提交: '再次提交',
 
   // 分组管理
   新增分组: '新增分组',
diff --git a/bcs-services/bcs-bscp/ui/src/router.ts b/bcs-services/bcs-bscp/ui/src/router.ts
index 7029384ebd..aa6314dd17 100644
--- a/bcs-services/bcs-bscp/ui/src/router.ts
+++ b/bcs-services/bcs-bscp/ui/src/router.ts
@@ -166,6 +166,27 @@ const routes = [
         },
         component: () => import('./views/space/client/example/index.vue'),
       },
+      {
+        path: 'records',
+        children: [
+          {
+            path: 'all/:queryTime?',
+            name: 'records-all',
+            component: () => import('./views/space/records/index.vue'),
+            meta: {
+              navModule: 'records',
+            },
+          },
+          {
+            path: ':appId(\\d+)/:queryTime?',
+            name: 'records-appId',
+            component: () => import('./views/space/records/index.vue'),
+            meta: {
+              navModule: 'records',
+            },
+          },
+        ],
+      },
     ],
   },
   {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/records/components/date-picker.vue b/bcs-services/bcs-bscp/ui/src/views/space/records/components/date-picker.vue
new file mode 100644
index 0000000000..614de03290
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/views/space/records/components/date-picker.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <bk-date-picker
+      v-click-outside="() => (open = false)"
+      ref="datePickerRef"
+      style="width: 300"
+      :disabled-date="disabledDate"
+      :model-value="defaultValue"
+      :shortcuts="shortcutsRange"
+      :editable="false"
+      :clearable="false"
+      :open="open"
+      type="datetimerange"
+      append-to-body
+      clear
+      @change="handleChange"
+      @click="open = !open">
+      <template #confirm>
+        <div>
+          <bk-button theme="primary" @click="open = false" style="margin-right: 8px; height: 26px"> 确定 </bk-button>
+        </div>
+      </template>
+    </bk-date-picker>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  const shortcutsRange = ref([
+    // {
+    //   text: '今天',
+    //   value() {
+    //     const end = new Date();
+    //     const start = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+    //     return [start, end];
+    //   },
+    //   onClick: (picker) => {
+    //     console.log(picker);
+    //   },
+    // },
+    {
+      text: '近7天',
+      value() {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+        return [start, end];
+      },
+      onClick: (picker) => {
+        console.log(picker);
+      },
+    },
+    {
+      text: '近15天',
+      value() {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
+        return [start, end];
+      },
+      onClick: (picker) => {
+        console.log(picker);
+      },
+    },
+    {
+      text: '近30天',
+      value() {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+      onClick: (picker) => {
+        console.log(picker);
+      },
+    },
+  ]);
+  const open = ref(false);
+  const datePickerRef = ref(null);
+  const defaultValue = ref([new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), new Date()]);
+
+  const handleChange = (date: []) => {
+    defaultValue.value = date;
+  };
+
+  const disabledDate = (date: Date) => date && date.valueOf() > Date.now() - 86400;
+</script>
+
+<style scoped></style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/records/components/dialog-confirm.vue b/bcs-services/bcs-bscp/ui/src/views/space/records/components/dialog-confirm.vue
new file mode 100644
index 0000000000..539c0bcf2a
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/views/space/records/components/dialog-confirm.vue
@@ -0,0 +1,155 @@
+<template>
+  <bk-dialog
+    :is-show="show"
+    ref="dialog"
+    ext-cls="confirm-dialog"
+    footer-align="center"
+    cancel-text="取消"
+    :confirm-text="dialogType === 'publish' ? '上线' : '撤销'"
+    dialog-type="operation"
+    :close-icon="true"
+    :show-mask="true"
+    :quick-close="false"
+    :multi-instance="false"
+    @confirm="handleConfirm"
+    @closed="handleClose">
+    <template #header>
+      <div class="headline">
+        {{ dialogType === 'publish' ? '确认上线该版本？' : '确认撤销该上线任务？' }}
+      </div>
+    </template>
+    <ul class="content-info">
+      <li class="content-info__li">
+        <span class="content-info__hd"> 服务： </span>
+        <span class="content-info__bd"> {{ data.service || '--' }} </span>
+      </li>
+      <li class="content-info__li">
+        <span class="content-info__hd"> 待上线版本： </span>
+        <span class="content-info__bd"> {{ data.version || '--' }} </span>
+      </li>
+      <li class="content-info__li">
+        <span class="content-info__hd"> 上线范围： </span>
+        <span class="content-info__bd"> {{ data.group || '--' }} </span>
+      </li>
+    </ul>
+    <div v-if="dialogType !== 'publish'">
+      <div class="textarea-title">说明</div>
+      <bk-input
+        v-model="reason"
+        class="textarea-content"
+        :maxlength="100"
+        :over-max-length-limit="false"
+        :rows="2"
+        type="textarea" />
+    </div>
+  </bk-dialog>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { approve } from '../../../../api/record';
+  import { IDialogData } from '../../../../../types/record';
+  import { APPROVE_STATUS } from '../../../../constants/record';
+  import BkMessage from 'bkui-vue/lib/message';
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const props = withDefaults(
+    defineProps<{
+      show: boolean;
+      spaceId: string;
+      appId: number;
+      releaseId: number;
+      dialogType: string;
+      data: IDialogData;
+    }>(),
+    {},
+  );
+
+  const emits = defineEmits(['update:show']);
+
+  const reason = ref('');
+
+  const submitType = computed(() => {
+    return props.dialogType === 'publish' ? APPROVE_STATUS.AlreadyPublish : APPROVE_STATUS.RevokedPublish;
+  });
+
+  const handleClose = () => {
+    emits('update:show', false);
+  };
+  const handleConfirm = async () => {
+    await approve(props.spaceId, props.appId, props.releaseId, {
+      publish_status: submitType.value,
+      reason: reason.value,
+    });
+    emits('update:show', false);
+    BkMessage({
+      theme: 'primary',
+      message: t('操作成功'),
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  :deep(.confirm-dialog) {
+    .bk-modal-body {
+      padding-bottom: 0;
+    }
+    .bk-modal-content {
+      padding: 0 32px;
+      height: auto;
+      max-height: none;
+      min-height: auto;
+      border-radius: 2px;
+    }
+    .bk-modal-footer {
+      position: relative;
+      padding: 24px 0;
+      height: auto;
+      border: none;
+    }
+    .bk-dialog-footer .bk-button {
+      min-width: 88px;
+    }
+  }
+  .headline {
+    margin-top: 16px;
+    text-align: center;
+  }
+  .content-info {
+    margin-top: 4px;
+    padding: 21px 12px;
+    font-size: 14px;
+    line-height: 22px;
+    background-color: #f5f6fa;
+    &__li {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      & + .content-info__li {
+        margin-top: 18px;
+      }
+    }
+    &__hd {
+      width: 96px;
+      text-align: right;
+      color: #63656e;
+    }
+    &__bd {
+      padding-left: 8px;
+      flex: 1;
+      word-wrap: break-word;
+      word-break: break-all;
+      color: #313238;
+    }
+  }
+  .textarea-title {
+    margin-top: 24px;
+    font-size: 14px;
+    color: #333;
+  }
+  .textarea-content {
+    margin-top: 7px;
+  }
+</style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/records/components/more-actions.vue b/bcs-services/bcs-bscp/ui/src/views/space/records/components/more-actions.vue
new file mode 100644
index 0000000000..dc31fab4b0
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/views/space/records/components/more-actions.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="more-actions">
+    <Ellipsis class="ellipsis" />
+    <ul class="more-actions-ul">
+      <li class="more-actions-li" @click="handleUndo">撤销</li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Ellipsis } from 'bkui-vue/lib/icon';
+  const emits = defineEmits(['handleUndo']);
+
+  const handleUndo = () => {
+    emits('handleUndo', 'undo');
+  };
+</script>
+
+<style lang="scss" scoped>
+  .more-actions {
+    box-sizing: content-box;
+    position: relative;
+    top: 2px;
+    margin-left: -12px;
+    display: inline-block;
+    vertical-align: middle;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    &:hover {
+      .more-actions-ul {
+        display: block;
+      }
+      .ellipsis {
+        color: #3a84ff;
+      }
+      &::after {
+        background-color: #dcdee5;
+      }
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+    }
+    .ellipsis {
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(90deg);
+      font-size: 16px;
+      font-weight: 700;
+      color: #9a9fa9;
+    }
+  }
+  .more-actions-ul {
+    position: absolute;
+    right: 7px;
+    top: 32px;
+    display: none;
+    border: 1px solid #dcdee5;
+    border-radius: 2px;
+    box-shadow: 0 2px 6px 0 #0000001a;
+  }
+  .more-actions-li {
+    position: relative;
+    z-index: 2;
+    padding: 4px 12px;
+    min-width: 62px;
+    line-height: 32px;
+    font-size: 12px;
+    color: #63656e;
+    background-color: #fff;
+    &:hover {
+      background-color: #f5f7fa;
+    }
+  }
+</style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/records/components/record-table.vue b/bcs-services/bcs-bscp/ui/src/views/space/records/components/record-table.vue
new file mode 100644
index 0000000000..632791920f
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/views/space/records/components/record-table.vue
@@ -0,0 +1,518 @@
+<template>
+  <section>
+    <div class="record-table-wrapper">
+      <bk-loading style="min-height: 300px" :loading="loading">
+        <bk-table class="record-table" show-overflow-tooltip :row-height="0" :border="['outer']" :data="tableData">
+          <bk-table-column :label="t('操作时间')" width="105">
+            <template #default="{ row }">
+              {{ row.audit?.revision.created_at }}
+            </template>
+          </bk-table-column>
+          <bk-table-column :label="t('所属服务')" min-width="180">
+            <template #default="{ row }"> {{ row.app?.name || '--' }} </template>
+          </bk-table-column>
+          <bk-table-column :label="t('资源类型')" width="96">
+            <template #default="{ row }">
+              {{ RECORD_RES_TYPE[row.audit?.spec.res_type as keyof typeof RECORD_RES_TYPE] || '--' }}
+            </template>
+          </bk-table-column>
+          <bk-table-column :label="t('操作行为')" width="114">
+            <template #default="{ row }">
+              {{ ACTION[row.audit?.spec.action as keyof typeof ACTION] || '--' }}
+            </template>
+          </bk-table-column>
+          <bk-table-column :label="t('资源实例')" min-width="363">
+            <template #default="{ row }">
+              <div
+                v-if="row.audit && row.audit.spec.res_instance"
+                class="multi-line-styles"
+                v-html="convertInstance(row.audit.spec.res_instance)"></div>
+              <div v-else class="multi-line-styles">--</div>
+              <!-- <div>{{ row.audit?.spec.res_instance || '--' }}</div> -->
+            </template>
+          </bk-table-column>
+          <bk-table-column :label="t('操作人')" min-width="110">
+            <template #default="{ row }">
+              {{ row.audit?.spec.operator || '--' }}
+            </template>
+          </bk-table-column>
+          <bk-table-column :label="t('操作途径')" width="90">
+            <template #default="{ row }"> {{ row.audit?.spec.operate_way || '--' }} </template>
+          </bk-table-column>
+          <bk-table-column
+            :label="t('状态')"
+            :show-overflow-tooltip="false"
+            :width="locale === 'zh-cn' ? '130' : '160'">
+            <template #default="{ row }">
+              <template v-if="row.audit?.spec.status">
+                <div
+                  :class="[
+                    'dot',
+                    {
+                      green: [APPROVE_STATUS.AlreadyPublish, APPROVE_STATUS.Success].includes(row.audit.spec.status),
+                      gray: row.audit.spec.status === APPROVE_STATUS.PendPublish,
+                      red: [
+                        APPROVE_STATUS.RevokedPublish,
+                        APPROVE_STATUS.RejectedApproval,
+                        APPROVE_STATUS.Failure,
+                      ].includes(row.audit.spec.status),
+                      orange: row.audit.spec.status === APPROVE_STATUS.PendApproval,
+                    },
+                  ]"></div>
+                {{ STATUS[row.audit.spec.status as keyof typeof STATUS] || '--' }}
+                <!-- 上线时间icon -->
+                <div
+                  v-if="
+                    row.strategy?.publish_time &&
+                    [APPROVE_STATUS.PendApproval, APPROVE_STATUS.PendPublish].includes(row.audit.spec.status)
+                  "
+                  v-bk-tooltips="{
+                    content: `${t('定时上线')}: ${row.strategy.publish_time}${
+                      isTimeout(row.strategy.publish_time) ? '（已过时）' : ''
+                    }`,
+                    placement: 'top',
+                  }"
+                  class="time-icon"></div>
+                <!-- 信息提示icon -->
+                <info-line
+                  v-if="![APPROVE_STATUS.PendApproval, APPROVE_STATUS.PendPublish].includes(row.audit.spec.status)"
+                  v-bk-tooltips="{
+                    content: statusTip(row),
+                    placement: 'top',
+                  }"
+                  class="info-line" />
+              </template>
+              <template v-else>--</template>
+            </template>
+          </bk-table-column>
+          <bk-table-column
+            :label="t('操作')"
+            :show-overflow-tooltip="false"
+            :width="locale === 'zh-cn' ? '110' : '120'">
+            <template #default="{ row }">
+              <!-- 仅上线配置版本存在待审批或待上线等状态和相关操作 -->
+              <div v-if="row.audit && row.audit.spec.action === 'PublishVersionConfig'" class="action-btns">
+                <!-- 创建者且版本待上线 才展示上线按钮;审批通过的时间在定时上线的时间以前，上线按钮置灰 -->
+                <bk-button
+                  v-if="row.audit.spec.status === APPROVE_STATUS.PendPublish && row.app.creator === userInfo.username"
+                  class="action-btn"
+                  text
+                  theme="primary"
+                  :disabled="!isTimeout(row.strategy.publish_time) && !!row.strategy?.publish_time"
+                  @click="handleConfirm(row, 'publish')">
+                  {{ t('上线') }}
+                </bk-button>
+                <!-- 1.待审批状态 且 对应审批人才可显示 -->
+                <!-- 2.版本首次在分组上线的情况，显示审批，点击审批直接通过 -->
+                <template
+                  v-if="
+                    row.audit.spec.status === APPROVE_STATUS.PendApproval &&
+                    row.strategy.approver_progress.includes(userInfo.username)
+                  ">
+                  <!-- 当前记录在目标分组首次上线，直接审批通过 -->
+                  <bk-button v-if="groupStatus(row)" class="action-btn" text theme="primary" @click="handlePass(row)">
+                    {{ t('审批') }}
+                  </bk-button>
+                  <!-- 非首次上线，需要打开审批抽屉 -->
+                  <bk-button v-else class="action-btn" text theme="primary" @click="handleApproval(row)">
+                    {{ t('去审批') }}
+                  </bk-button>
+                </template>
+
+                <!-- 审批驳回/已撤销才可显示 -->
+                <bk-button
+                  v-if="
+                    [APPROVE_STATUS.RejectedApproval, APPROVE_STATUS.RevokedPublish].includes(row.audit.spec.status)
+                  "
+                  class="action-btn"
+                  text
+                  theme="primary"
+                  @click="retrySubmission(row)">
+                  {{ t('再次提交') }}
+                </bk-button>
+                <!-- 待上线/去审批状态 才显示更多操作；目前仅创建者有撤销权限 -->
+                <MoreActions
+                  v-if="
+                    [APPROVE_STATUS.PendApproval, APPROVE_STATUS.PendPublish].includes(row.audit.spec.status) &&
+                    row.app.creator === userInfo.username
+                  "
+                  @handle-undo="handleConfirm(row, $event)" />
+                <!-- 当前登录用户在审批人和创建者名单都没有时，表示无权操作此条item -->
+                <template
+                  v-if="
+                    row.audit.spec.status === APPROVE_STATUS.AlreadyPublish ||
+                    !`${row.strategy.approver_progress},${row.app.creator}`.includes(userInfo.username)
+                  ">
+                  --
+                </template>
+              </div>
+              <template v-else>--</template>
+            </template>
+          </bk-table-column>
+          <template #empty>
+            <TableEmpty :is-search-empty="isSearchEmpty" @clear="clearSearchInfo" />
+          </template>
+        </bk-table>
+        <bk-pagination
+          v-model="pagination.current"
+          class="table-list-pagination"
+          location="left"
+          :limit="pagination.limit"
+          :layout="['total', 'limit', 'list']"
+          :count="pagination.count"
+          @change="handlePageChange"
+          @limit-change="handlePageLimitChange" />
+      </bk-loading>
+    </div>
+    <!-- 上线/撤销弹窗 -->
+    <DialogConfirm
+      v-model:show="confirmShow"
+      :space-id="spaceId"
+      :app-id="rowAppId"
+      :release-id="rowReleaseId"
+      :dialog-type="confirmType"
+      :data="confirmData" />
+    <!-- 审批对比弹窗 -->
+    <VersionDiff
+      v-model:show="approvalShow"
+      :space-id="spaceId"
+      :app-id="rowAppId"
+      :releases-id="rowReleaseId"
+      :released-groups="rowReleaseGroups" />
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { debounce } from 'lodash';
+  import { useI18n } from 'vue-i18n';
+  import { IRecordQuery, IDialogData, IRowData } from '../../../../../types/record';
+  import { RECORD_RES_TYPE, ACTION, STATUS, INSTANCE, APPROVE_STATUS } from '../../../../constants/record';
+  import { storeToRefs } from 'pinia';
+  import useUserStore from '../../../../store/user';
+  import { getRecordList } from '../../../../api/record';
+  import useTablePagination from '../../../../utils/hooks/use-table-pagination';
+  import TableEmpty from '../../../../components/table/table-empty.vue';
+  import MoreActions from './more-actions.vue';
+  import DialogConfirm from './dialog-confirm.vue';
+  import { InfoLine } from 'bkui-vue/lib/icon';
+  import VersionDiff from './version-diff.vue';
+
+  const props = withDefaults(
+    defineProps<{
+      spaceId: string;
+      searchParams?: IRecordQuery;
+    }>(),
+    {
+      spaceId: '',
+      searchParams: () => ({
+        all: true,
+      }),
+    },
+  );
+
+  const router = useRouter();
+  const { t, locale } = useI18n();
+  const { userInfo } = storeToRefs(useUserStore());
+  const { pagination, updatePagination } = useTablePagination('recordList');
+
+  const loading = ref(false);
+  const isSearchEmpty = ref(false);
+  const tableData = ref([]);
+  const approvalShow = ref(false);
+  const rowAppId = ref(-1);
+  const rowReleaseId = ref(-1);
+  const rowReleaseGroups = ref<number[]>([]);
+  const confirmShow = ref(false);
+  const confirmType = ref('');
+  const confirmData = ref<IDialogData>({
+    service: '',
+    version: '',
+    group: '',
+  });
+
+  // watch(
+  //   () => spaceId.value,
+  //   async () => {
+  //     pagination.value.current = 1;
+  //     await loadRecordList();
+  //   },
+  // );
+
+  // watch(confirmShow, (newV) => {
+  //   if (!newV) {
+  //     confirmData.value = {
+  //       biz_id: '',
+  //       app_id: -1,
+  //       release_id: -1,
+  //       service: '',
+  //       version: '',
+  //       group: '',
+  //     };
+  //   }
+  // });
+
+  // watch(confirmShow, (newV) => {
+  //   if (!newV) {
+  //     rowAppId.value = -1;
+  //     rowReleaseId.value = -1;
+  //   }
+  // });
+
+  onMounted(async () => {
+    await loadRecordList();
+  });
+
+  // 加载操作记录列表数据
+  const loadRecordList = async () => {
+    try {
+      loading.value = true;
+      const params: IRecordQuery = {
+        start: pagination.value.limit * (pagination.value.current - 1),
+        limit: pagination.value.limit,
+        ...props.searchParams,
+      };
+      const res = await getRecordList(props.spaceId, params);
+      console.log(res, 'res');
+      tableData.value = res.details;
+      pagination.value.count = res.count;
+    } catch (e) {
+      console.error(e);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 清空搜索框
+  const clearSearchInfo = () => {
+    // 清空搜索框
+  };
+
+  // 资源示例映射
+  const convertInstance = (data: string) => {
+    if (data.length) {
+      let result = data.replace(/\n/g, '<br />');
+      Object.keys(INSTANCE).forEach((key) => {
+        result = result.replace(`${key}:`, `${INSTANCE[key as keyof typeof INSTANCE]}：`);
+      });
+      return result;
+    }
+  };
+
+  // 状态提示信息
+  const statusTip = (row: IRowData) => {
+    if (!row) {
+      return '--';
+    }
+    const { status } = row.audit.spec;
+    const { updated_at: time, reject_reason: reason, reviser } = row.strategy;
+    switch (status) {
+      case APPROVE_STATUS.AlreadyPublish:
+        return t('提示-已上线文案', { reviser, time });
+      case APPROVE_STATUS.RejectedApproval:
+        return t('提示-审批驳回', {
+          reviser,
+          time,
+          reason,
+        });
+      case APPROVE_STATUS.RevokedPublish:
+        return t('提示-已撤销', { reviser, time });
+      case APPROVE_STATUS.Failure:
+        return t('提示-失败');
+      default:
+        return '--';
+    }
+  };
+
+  // 上线时间是否超时
+  const isTimeout = (time: string) => {
+    const currentTime = Date.now();
+    const publishTime = new Date(time).getTime();
+    return publishTime < currentTime;
+  };
+
+  // 上线/撤回提示框
+  const handleConfirm = (row: IRowData, type: string) => {
+    confirmType.value = type;
+    confirmShow.value = true;
+    const matchVersion = row.audit.spec.res_instance.match(/releases_name:([^\n]*)/);
+    const matchGroup = row.audit.spec.res_instance.match(/group:([^\n]*)/);
+    // biz_id: String(row.audit.attachment.biz_id),
+    // release_id: row.strategy.release_id,
+    rowAppId.value = row.audit.attachment.app_id;
+    rowReleaseId.value = row.strategy.release_id;
+    confirmData.value = {
+      service: row.app.name,
+      version: matchVersion ? matchVersion[1] : '--',
+      group: matchGroup ? matchGroup[1] : '--',
+    };
+  };
+
+  // 再次提交
+  const retrySubmission = (row: IRowData) => {
+    const url = router.resolve({
+      name: 'service-config',
+      params: {
+        appId: row.audit.attachment.app_id,
+        versionId: row.strategy.release_id,
+      },
+    }).href;
+    window.open(url, '_blank');
+  };
+
+  // 是否首次在目标分组上线
+  const groupStatus = (row: IRowData) => {
+    console.log(row.audit.id, '---------');
+    return true;
+  };
+
+  // 审批通过
+  const handlePass = (row: IRowData) => {
+    console.log(row);
+  };
+  // 去审批
+  const handleApproval = debounce(
+    (row: IRowData) => {
+      console.log('哇哈哈哈');
+      rowAppId.value = row.audit?.attachment.app_id;
+      rowReleaseId.value = row.strategy?.release_id;
+      // 当前row已上线版本的分组id,为空表示全部分组上线
+      rowReleaseGroups.value = row.strategy.scope.groups.map((group) => group.id);
+      approvalShow.value = true;
+    },
+    300,
+    { leading: true, trailing: false },
+  );
+
+  //  翻页
+  const handlePageChange = (val: number) => {
+    pagination.value.current = val;
+    loadRecordList();
+  };
+
+  const handlePageLimitChange = (val: number) => {
+    updatePagination('limit', val);
+    if (pagination.value.current === 1) {
+      loadRecordList();
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .record-table-wrapper {
+    :deep(.bk-table-body) {
+      max-height: calc(100vh - 280px);
+      overflow: auto;
+    }
+    .dot {
+      margin-right: 8px;
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      &.green {
+        border: 1px solid #3fc06d;
+        background-color: #e5f6ea;
+      }
+      &.gray {
+        border: 1px solid #c4c6cc;
+        background-color: #f0f1f5;
+      }
+      &.red {
+        border: 1px solid #ea3636;
+        background-color: #ffe6e6;
+      }
+      &.orange {
+        border: 1px solid #ff9c01;
+        background-color: #ffe8c3;
+      }
+    }
+    // .status-text {
+    //   display: inline-block;
+    // }
+    .time-icon {
+      position: relative;
+      margin-left: 8px;
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      vertical-align: bottom;
+      border: 1px solid #3a84ff;
+      border-radius: 50%;
+      box-shadow: inset 0 0 0 0.4px #3a84ff;
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: calc(50% - 1px);
+        left: calc(50% - 1px);
+        width: 35%;
+        height: 35%;
+        border-left: 1px solid #3a84ff;
+        border-bottom: 1px solid #3a84ff;
+        box-shadow:
+          0 0.4px 0 0 #3a84ff,
+          -0.4px 0 0 0 #3a84ff;
+      }
+    }
+    .info-line {
+      margin-left: 8px;
+      font-size: 16px;
+      vertical-align: bottom;
+      transform: scale(1.1);
+    }
+  }
+  // .action-btns {
+  //   display: flex;
+  //   align-items: center;
+  // }
+  .action-btn {
+    vertical-align: sub;
+    & + .more-actions {
+      margin-left: 8px;
+    }
+  }
+  .table-list-pagination {
+    padding: 12px;
+    border: 1px solid #dcdee5;
+    border-top: none;
+    border-radius: 0 0 2px 2px;
+    background: #ffffff;
+    :deep(.bk-pagination-list.is-last) {
+      margin-left: auto;
+    }
+  }
+  .record-table {
+    :deep(.bk-table-body table tbody tr td) {
+      .cell {
+        display: inline-block;
+        height: auto;
+        line-height: normal;
+        vertical-align: middle;
+      }
+      &:last-child .cell {
+        // 更多操作显示
+        overflow: unset;
+      }
+    }
+  }
+  // .ellipsis {
+  //   overflow: hidden;
+  //   text-overflow: ellipsis;
+  //   white-space: nowrap;
+  // }
+  .multi-line-styles {
+    padding: 7px 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    min-height: 42px;
+    overflow: hidden;
+    white-space: normal;
+    word-wrap: break-word;
+    word-break: break-all;
+    line-height: 21px;
+  }
+</style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/records/components/search-option.vue b/bcs-services/bcs-bscp/ui/src/views/space/records/components/search-option.vue
new file mode 100644
index 0000000000..d6977f7219
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/views/space/records/components/search-option.vue
@@ -0,0 +1,14 @@
+<template>
+  <section class="search-option">
+    <bk-checkbox v-model="value"> 仅看上线操作 </bk-checkbox>
+    <bk-checkbox v-model="value"> 仅看失败操作 </bk-checkbox>
+    <div class="search-input__wrap"></div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  const value = ref(false);
+</script>
+
+<style scoped></style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/records/components/service-selector.vue b/bcs-services/bcs-bscp/ui/src/views/space/records/components/service-selector.vue
new file mode 100644
index 0000000000..34059eed93
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/views/space/records/components/service-selector.vue
@@ -0,0 +1,206 @@
+<template>
+  <bk-select
+    v-model="localApp.id"
+    ref="selectorRef"
+    class="service-selector"
+    :popover-options="{ theme: 'light bk-select-popover' }"
+    :popover-min-width="360"
+    :filterable="true"
+    :input-search="false"
+    :clearable="false"
+    :loading="loading"
+    :search-placeholder="$t('请输入关键字')"
+    @change="handleAppChange">
+    <template #trigger>
+      <div class="selector-trigger">
+        <bk-overflow-title v-if="localApp?.name" class="app-name" type="tips">
+          {{ localApp.name }}
+        </bk-overflow-title>
+        <span v-else class="no-app">{{ $t('暂无服务') }}</span>
+        <AngleUpFill class="arrow-icon arrow-fill" />
+      </div>
+    </template>
+    <bk-option value="-1" label="全部服务">
+      <div :class="['service-option-item']">
+        <div class="name-text">全部服务</div>
+      </div>
+    </bk-option>
+    <bk-option v-for="item in serviceList" :key="item.id ? item.id : 'all'" :value="item.id" :label="item.spec.name">
+      <div
+        v-cursor="{
+          active: !item.permissions.view,
+        }"
+        :class="['service-option-item', { 'no-perm': !item.permissions.view }]">
+        <div class="name-text">{{ item.spec.name }}</div>
+        <div class="type-tag" :class="{ 'type-tag--en': locale === 'en' }">
+          {{ item.spec.config_type === 'file' ? $t('文件型') : $t('键值型') }}
+        </div>
+      </div>
+    </bk-option>
+  </bk-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { IAppItem } from '../../../../../types/app';
+  import { getAppList } from '../../../../api';
+  import { AngleUpFill } from 'bkui-vue/lib/icon';
+  import { useI18n } from 'vue-i18n';
+
+  // const emits = defineEmits(['select-service']);
+
+  const { locale } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+
+  const loading = ref(false);
+  const localApp = ref({
+    name: '全部服务',
+    id: -1,
+    serviceType: '',
+  });
+  const bizId = ref(String(route.params.spaceId));
+  const serviceList = ref<IAppItem[]>([]);
+  const isAllService = ref(true);
+
+  // watch(isAllService, (newV) => {
+  //   if (newV) {
+  //     localApp.value = {
+  //       name: '全部服务',
+  //       id: -1,
+  //       serviceType: '',
+  //     };
+  //   }
+  // });
+
+  onMounted(async () => {
+    await loadServiceList();
+    const service = serviceList.value.find((service) => service.id === Number(route.params.appId));
+    if (service) {
+      isAllService.value = false;
+      localApp.value = {
+        name: service.spec.name,
+        id: service.id!,
+        serviceType: service.spec.config_type!,
+      };
+      setLastAccessedServiceDetail(service.id!);
+      // emits('select-service', localApp.value.serviceType, localApp.value.name);
+    } else {
+      isAllService.value = true;
+      handleAppChange(-1);
+      // emits('select-service');
+    }
+  });
+
+  // 载入服务列表
+  const loadServiceList = async () => {
+    loading.value = true;
+    try {
+      const query = {
+        start: 0,
+        all: true,
+      };
+      const resp = await getAppList(bizId.value, query);
+      serviceList.value = resp.details;
+    } catch (e) {
+      // emits('select-service');
+      console.error(e);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 下拉列表操作
+  const handleAppChange = async (appId: number) => {
+    const service = serviceList.value.find((service) => service.id === Number(appId));
+    if (service) {
+      localApp.value = {
+        name: service.spec.name,
+        id: service.id!,
+        serviceType: service.spec.config_type!,
+      };
+      setLastAccessedServiceDetail(appId);
+      await router.push({ name: 'records-appId', params: { spaceId: bizId.value, appId } });
+    } else {
+      localApp.value = {
+        name: '全部服务',
+        id: -1,
+        serviceType: '',
+      };
+      await router.push({ name: 'records-all', params: { spaceId: bizId.value } });
+    }
+    // emits('select-service', localApp.value.serviceType, localApp.value.name);
+  };
+
+  const setLastAccessedServiceDetail = (appId: number) => {
+    localStorage.setItem('lastAccessedServiceDetail', JSON.stringify({ spaceId: bizId.value, appId }));
+  };
+</script>
+
+<style scoped lang="scss">
+  .service-selector {
+    &.popover-show {
+      .selector-trigger .arrow-icon {
+        transform: rotate(-180deg);
+      }
+    }
+    &.is-focus {
+      .selector-trigger {
+        outline: 0;
+      }
+    }
+    .selector-trigger {
+      padding: 0 10px 0;
+      height: 32px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-radius: 2px;
+      transition: all 0.3s;
+      background: #f0f1f5;
+      font-size: 14px;
+      .app-name {
+        max-width: 220px;
+        color: #313238;
+      }
+      .no-app {
+        font-size: 16px;
+        color: #c4c6cc;
+      }
+      .arrow-icon {
+        margin-left: 13.5px;
+        color: #979ba5;
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+  }
+  .service-option-item {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    .name-text {
+      margin-right: 5px;
+      flex: 1;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .type-tag {
+      flex-shrink: 0;
+      width: 52px;
+      height: 22px;
+      line-height: 22px;
+      color: #63656e;
+      font-size: 12px;
+      text-align: center;
+      background: #f0f1f5;
+      border-radius: 2px;
+      &--en {
+        width: 96px;
+      }
+    }
+  }
+</style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/records/components/version-diff.vue b/bcs-services/bcs-bscp/ui/src/views/space/records/components/version-diff.vue
new file mode 100644
index 0000000000..8ecb20d353
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/views/space/records/components/version-diff.vue
@@ -0,0 +1,177 @@
+<template>
+  <div v-if="!loading">
+    <!-- 去审批抽屉 -->
+    <PublishVersionDiff
+      :bk-biz-id="spaceId"
+      :app-id="appId"
+      :show="show"
+      :current-version="versionData"
+      :base-version-id="baseVersionId"
+      :version-list="diffableVersionList()"
+      :current-version-groups="groupsPendingtoPublish()"
+      @publish="emits('update:show', false)"
+      @close="emits('update:show', false)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  // import { storeToRefs } from 'pinia';
+  import { ref, watch, computed } from 'vue';
+  import PublishVersionDiff from '../../service/detail/components/publish-version-diff.vue';
+  import { getServiceGroupList } from '../../../../api/group';
+  import { getConfigVersionList } from '../../../../api/config';
+  import { getAppDetail } from '../../../../api';
+  // import { IGroupToPublish, IGroupItemInService } from '../../../../../types/group';
+  import { IGroupItemInService } from '../../../../../types/group';
+  import { IConfigVersion, IReleasedGroup } from '../../../../../types/config';
+  import { GET_UNNAMED_VERSION_DATA } from '../../../../constants/config';
+  import useServiceStore from '../../../../store/service';
+
+  const props = withDefaults(
+    defineProps<{
+      show: boolean;
+      spaceId: string;
+      appId: number;
+      releasesId: number;
+      releasedGroups: number[];
+    }>(),
+    {},
+  );
+
+  const emits = defineEmits(['update:show']);
+
+  const serviceStore = useServiceStore();
+
+  const loading = ref(true);
+  // --
+  const versionData = ref<IConfigVersion>(GET_UNNAMED_VERSION_DATA());
+  const versionList = ref<IConfigVersion[]>([]);
+  const baseVersionId = ref(0);
+  const groupList = ref<IGroupItemInService[]>([]);
+  // --
+
+  watch(
+    () => props.show,
+    (newV) => {
+      newV ? init() : serviceStore.$reset();
+    },
+  );
+
+  const init = async () => {
+    console.log('init 111');
+    try {
+      loading.value = true;
+      const [versionRes, groupRes, appDetailRes] = await Promise.all([
+        getConfigVersionList(props.spaceId, props.appId, { start: 0, all: true }), // 所有版本
+        getServiceGroupList(props.spaceId, props.appId), // 所有分组
+        getAppDetail(props.spaceId, props.appId), // 服务详情数据
+      ]);
+      // 已上线版本列表
+      versionList.value = versionRes.data.details.filter((item: IConfigVersion) => {
+        const { id, status } = item;
+        return id !== props.releasesId && status.publish_status !== 'not_released';
+      });
+      // 存放当前版本数据
+      const currVersion = versionRes.data.details.find((item: IConfigVersion) => item.id === props.releasesId);
+      if (currVersion !== undefined) {
+        versionData.value = currVersion;
+      }
+      // 处理全部分组
+      groupList.value = groupRes.details;
+      // console.log(props.releasesId, versionList.value[0].id, '是否找到版本');
+      // 当前的服务数据
+      serviceStore.$patch((state) => {
+        state.appData = appDetailRes;
+      });
+      loading.value = false;
+    } catch (e) {
+      console.log(e);
+    }
+    // console.log(versionList.value, '所有已在线版本列表');
+    // console.log(versionData.value, 'curr版本列表');
+    // console.log(props.releasedGroups, '待上线版本的分组集合');
+    // console.log(groupList.value, '所有分组');
+  };
+
+  // 审批 S
+  // 需要对比的分组id集合
+  const releasedGroups = computed(() => {
+    console.log('releasedGroups 222');
+    if (!props.releasedGroups.length) {
+      // 全部分组上线
+      return groupList.value
+        .filter((group) => versionList.value.some((version) => group.release_id === version.id))
+        .map((group) => group.group_id);
+    }
+    // 指定分组上线
+    return props.releasedGroups;
+  });
+
+  // 需要对比的线上版本集合
+  const diffableVersionList = () => {
+    console.log('diffableVersionList 333');
+    const list = [] as IConfigVersion[];
+    versionList.value.forEach((version) => {
+      version.status.released_groups.some((item) => {
+        console.log(item.id, 'item-id');
+        if (releasedGroups.value.includes(item.id)) {
+          list.push(version);
+        }
+        return false;
+      });
+      if (version.status.fully_released && props.releasedGroups.length) {
+        list.push(version);
+      }
+    });
+    return list;
+  };
+
+  /**
+   * @description 直接上线或先对比再上线
+   * 所有分组都为首次上线，则直接上线，反之先对比再上线
+   */
+  //   const handlePublishOrOpenDiff = () => {
+  //     if (diffableVersionList.value.length) {
+  //       baseVersionId.value = diffableVersionList.value[0].id;
+  //       isDiffSliderShow.value = true;
+  //       return;
+  //     }
+  //   };
+  // 待上线分组实例和数据组装
+  const groupsPendingtoPublish = () => {
+    console.log('groupsPendingtoPublish 444');
+    const list: IReleasedGroup[] = [];
+    // console.log(diffableVersionList.value, '待上线版本++++++++++++++++++++++++++++++++++++');
+    releasedGroups.value.forEach((groupId) => {
+      const group = groupList.value.find((g) => g.group_id === groupId);
+      if (group) {
+        const { group_id, group_name, new_selector, old_selector, edited } = group;
+        list.push({
+          id: group_id,
+          name: group_name,
+          new_selector,
+          old_selector,
+          edited,
+          uid: '',
+          mode: '',
+        });
+      }
+    });
+    // 全部分组上线(当前操作记录接口全部分组上线时 数组返回为空。对比组件做法：在已上线的分组基础上 添加一个id为0的分组实例)
+    if (!props.releasedGroups.length) {
+      list.push({
+        id: 0,
+        name: '全部实例',
+        new_selector: {},
+        old_selector: {},
+        edited: false,
+        uid: '',
+        mode: '',
+      });
+    }
+    return list;
+  };
+  // 审批 E
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/records/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/records/index.vue
new file mode 100644
index 0000000000..fa585f9a6b
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/views/space/records/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <section class="record-management-page">
+    <div class="operate-area">
+      <service-selector />
+      <date-picker class="date-picker" />
+      <search-option class="search-option" />
+    </div>
+    <record-table :space-id="spaceId" />
+  </section>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import serviceSelector from './components/service-selector.vue';
+  import datePicker from './components/date-picker.vue';
+  import searchOption from './components/search-option.vue';
+  import recordTable from './components/record-table.vue';
+
+  const route = useRoute();
+  const spaceId = ref(String(route.params.spaceId));
+</script>
+<style lang="scss" scoped>
+  .record-management-page {
+    height: calc(100% - 33px);
+    padding: 24px;
+    background: #f5f7fa;
+    overflow: hidden;
+    .date-picker {
+      margin-left: 8px;
+    }
+    .search-option {
+      margin-left: auto;
+    }
+  }
+  .operate-area {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 16px;
+  }
+</style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/detail-header.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/detail-header.vue
index 2f31229fd8..e1edcfb95d 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/detail-header.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/detail-header.vue
@@ -40,7 +40,7 @@
             </div>
           </div>
         </ReleasedGroupViewer>
-        <VersionApproveStatus @send-data="approveData = $event" />
+        <VersionApproveStatus ref="verAppStatus" @send-data="approveData = $event" />
         <CreateVersion
           :bk-biz-id="props.bkBizId"
           :app-id="props.appId"
@@ -64,7 +64,7 @@
           @confirm="refreshVesionList" />
         <!-- 更多选项 -->
         <!-- <HeaderMoreOptions v-show="['partial_released', 'not_released'].includes(publishStatus)" /> -->
-        <HeaderMoreOptions :approve-status="approveData.status" />
+        <HeaderMoreOptions :approve-status="approveData.status" @handle-undo="verAppStatus.loadStatus()" />
       </section>
     </template>
   </div>
@@ -99,6 +99,7 @@
     create: false,
     publish: false,
   });
+  const verAppStatus = ref();
 
   const props = defineProps<{
     bkBizId: string;
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/header-more-options.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/header-more-options.vue
index 17e5aa4168..14a96884e5 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/header-more-options.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/header-more-options.vue
@@ -3,16 +3,26 @@
     <Ellipsis class="ellipsis" />
     <ul class="more-options-ul">
       <li class="more-options-li" @click="handleLinkTo">服务上线记录</li>
-      <li class="more-options-li" v-if="props.approveStatus === APPROVE_STATUS.PendApproval" @click="handleUndo">
-        撤销
-      </li>
+      <bk-loading :loading="loading">
+        <li
+          class="more-options-li"
+          v-if="[APPROVE_STATUS.PendApproval].includes(props.approveStatus as APPROVE_STATUS)"
+          @click="handleUndo">
+          撤销
+        </li>
+      </bk-loading>
     </ul>
   </div>
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
   import { Ellipsis } from 'bkui-vue/lib/icon';
+  import { approve } from '../../../../../api/record';
+  import BkMessage from 'bkui-vue/lib/message';
   import { APPROVE_STATUS } from '../../../../../constants/config';
+  import { useI18n } from 'vue-i18n';
 
   const props = withDefaults(
     defineProps<{
@@ -23,11 +33,41 @@
     },
   );
 
+  const emits = defineEmits(['handleUndo']);
+
+  const route = useRoute();
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const loading = ref(false);
+
+  // 跳转到服务记录页面
   const handleLinkTo = () => {
-    console.log('跳转服务上线记录'); // 等接口更新
+    const url = router.resolve({
+      name: 'records-appId',
+      params: {
+        appId: route.params.appId,
+      },
+    }).href;
+    window.open(url, '_blank');
   };
-  const handleUndo = () => {
-    console.log('撤销'); // 等接口更新
+
+  // 撤销审批
+  const handleUndo = async () => {
+    loading.value = true;
+    try {
+      const { spaceId: biz_id, appId: app_id, versionId: release_id } = route.params;
+      await approve(String(biz_id), Number(app_id), Number(release_id), { publish_status: 'RevokedPublish' });
+      BkMessage({
+        theme: 'success',
+        message: t('成功'),
+      });
+      emits('handleUndo');
+    } catch (error) {
+      console.log(error);
+    } finally {
+      loading.value = false;
+    }
   };
 </script>
 
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/modify-group-publish.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/modify-group-publish.vue
index f60426577a..19f8dcde8f 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/modify-group-publish.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/modify-group-publish.vue
@@ -2,7 +2,8 @@
   <section class="create-version" v-if="versionData.status.publish_status === 'partial_released'">
     <bk-button
       v-if="
-        !approveData?.status || ![APPROVE_STATUS.PendApproval, APPROVE_STATUS.PendPublish].includes(approveData.status)
+        !approveData?.status ||
+        ![APPROVE_STATUS.PendApproval, APPROVE_STATUS.PendPublish].includes(approveData.status as APPROVE_STATUS)
       "
       v-cursor="{ active: !props.hasPerm }"
       theme="primary"
@@ -98,6 +99,7 @@
   import BkMessage from 'bkui-vue/lib/message';
   import { storeToRefs } from 'pinia';
   import { getConfigVersionList, versionStatusCheck } from '../../../../../api/config';
+  import { approve } from '../../../../../api/record';
   import { getServiceGroupList } from '../../../../../api/group';
   import { IConfigVersion, IReleasedGroup } from '../../../../../../types/config';
   import useGlobalStore from '../../../../../store/global';
@@ -324,8 +326,10 @@
   };
 
   // 确定上线按钮 待后端更新接口返回密钥状态
-  const handlePublishClick = () => {
-    handleConfirm(true);
+  const handlePublishClick = async () => {
+    const { bkBizId: biz_id, appId: app_id } = props;
+    const resp = await approve(biz_id, app_id, publishedVersionId.value, { publish_status: 'AlreadyPublish' });
+    handleConfirm(resp.haveCredentials);
   };
 
   // 打开上线版本确认弹窗
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/index.vue
index a14c88b339..32e0a69975 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/index.vue
@@ -3,7 +3,7 @@
     <bk-button
       v-if="
         !approveData?.status ||
-        ![APPROVE_STATUS.PendPublish, APPROVE_STATUS.AlreadyPublish].includes(approveData.status)
+        ![APPROVE_STATUS.PendPublish, APPROVE_STATUS.AlreadyPublish].includes(approveData.status as APPROVE_STATUS)
       "
       v-cursor="{ active: !props.hasPerm }"
       theme="primary"
@@ -97,6 +97,7 @@
   import useServiceStore from '../../../../../../store/service';
   import useConfigStore from '../../../../../../store/config';
   import { getConfigVersionList, versionStatusCheck } from '../../../../../../api/config';
+  import { approve } from '../../../../../../api/record';
   import { getServiceGroupList } from '../../../../../../api/group';
   import { IConfigVersion, IReleasedGroup } from '../../../../../../../types/config';
   import VersionLayout from '../../config/components/version-layout.vue';
@@ -273,8 +274,10 @@
   };
 
   // 确定上线按钮 待后端更新接口返回密钥状态
-  const handlePublishClick = () => {
-    handleConfirm(true);
+  const handlePublishClick = async () => {
+    const { bkBizId: biz_id, appId: app_id } = props;
+    const resp = await approve(biz_id, app_id, publishedVersionId.value, { publish_status: 'AlreadyPublish' });
+    handleConfirm(resp.haveCredentials);
   };
 
   const handleOpenPublishDialog = () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/version-approve-status.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/version-approve-status.vue
index c274a3ef84..a31af321c4 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/version-approve-status.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/version-approve-status.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="version-approve-status" v-if="approverList && route.params.versionId">
     <Spinner v-show="approveStatus === 0" class="spinner" />
-    <div v-show="approveStatus === 1" class="dot online"></div>
-    <div v-show="approveStatus === 2" class="dot offline"></div>
+    <div
+      v-show="approveStatus !== 0"
+      :class="['dot', { online: approveStatus === 1, offline: approveStatus === 2 }]"></div>
     <span class="approve-status-text">{{ approveText }}</span>
     <text-file
       v-show="approveStatus > -1"
@@ -66,7 +67,7 @@
         return t('待审批');
       case 'RejectedApproval':
         approveStatus.value = APPROVE_TYPE.Rejected;
-        return t('上线驳回');
+        return t('审批驳回');
       case 'RevokedPublish':
         approveStatus.value = APPROVE_TYPE.Rejected;
         return t('撤销上线');
@@ -88,6 +89,10 @@
     };
     emits('sendData', approveData);
   };
+
+  defineExpose({
+    loadStatus,
+  });
 </script>
 
 <style lang="scss" scoped>
@@ -115,12 +120,12 @@
     height: 13px;
     border-radius: 50%;
     &.online {
-      background: #3fc06d;
       border: 3px solid #e0f5e7;
+      background-color: #3fc06d;
     }
     &.offline {
-      background: #979ba5;
       border: 3px solid #eeeef0;
+      background-color: #979ba5;
     }
   }
 </style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/service-form.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/service-form.vue
index 24d2d1a188..52b488d2b2 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/service-form.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/list/components/service-form.vue
@@ -89,7 +89,7 @@
                 class="label-help" />
             </div>
           </template>
-          <bk-radio-group v-model="localData.approve_type">
+          <bk-radio-group v-model="localData.approve_type" @change="handleChange">
             <bk-radio label="OrSign">{{ t('或签') }}</bk-radio>
             <bk-radio label="CountSign">{{ t('会签') }}</bk-radio>
           </bk-radio-group>
diff --git a/bcs-services/bcs-bscp/ui/types/record.ts b/bcs-services/bcs-bscp/ui/types/record.ts
new file mode 100644
index 0000000000..807e849e60
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/types/record.ts
@@ -0,0 +1,119 @@
+// 操作记录列表参数
+export interface IRecordQuery {
+  start?: number;
+  limit?: number;
+  app_id?: number;
+  all?: boolean;
+  start_time?: string;
+  end_time?: string;
+  search_value?: string;
+  operate?: string;
+}
+
+// 审批操作：撤销/驳回/通过/手动上线
+export interface IDialogData {
+  service?: string;
+  version?: string;
+  group?: string;
+}
+
+// 列表每行的数据
+export interface IRowData {
+  audit: {
+    id: number;
+    spec: {
+      res_type: string;
+      action: string;
+      rid?: string;
+      app_code?: string;
+      detail?: string;
+      operator: string;
+      res_instance: string;
+      operate_way: string;
+      status: string;
+    };
+    attachment: {
+      biz_id: number;
+      app_id: number;
+      res_id: number;
+    };
+    revision: {
+      created_at: string;
+    };
+  };
+  strategy: {
+    publish_type: string;
+    publish_time: string;
+    publish_status: string;
+    reject_reason: string;
+    approver: string;
+    approver_progress: string;
+    updated_at: string;
+    reviser: string;
+    release_id: number;
+    scope: {
+      groups: [
+        {
+          id: number;
+          spec: {
+            name: string;
+            public: boolean;
+            bind_apps: [];
+            mode: string;
+            selector: {
+              labels_and: [
+                {
+                  key: string;
+                  op: string;
+                  value: string;
+                },
+              ];
+            };
+            uid: string;
+          };
+          attachment: {
+            biz_id: number;
+          };
+          revision: {
+            creator: string;
+            reviser: string;
+            create_at: string;
+            update_at: string;
+          };
+        },
+        {
+          id: 2;
+          spec: {
+            name: string;
+            public: true;
+            bind_apps: [];
+            mode: string;
+            selector: {
+              labels_and: [
+                {
+                  key: string;
+                  op: string;
+                  value: string;
+                },
+              ];
+            };
+            uid: string;
+          };
+          attachment: {
+            biz_id: number;
+          };
+          revision: {
+            creator: string;
+            reviser: string;
+            create_at: string;
+            update_at: string;
+          };
+        },
+      ];
+    };
+  };
+  app: {
+    name: string;
+    creator: string;
+  };
+}