diff --git a/web_src/vuepages/components/BaseDialog.vue b/web_src/vuepages/components/BaseDialog.vue
new file mode 100644
index 000000000..a95f99d18
--- /dev/null
+++ b/web_src/vuepages/components/BaseDialog.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="base-dlg">
+    <el-dialog
+      :visible.sync="dialogShow"
+      :title="title"
+      :width="width"
+      :fullscreen="fullscreen"
+      :top="top"
+      :modal="modal"
+      :modal-append-to-body="modalAppendToBody"
+      :append-to-body="appendToBody"
+      :lock-scroll="lockScroll"
+      :custom-class="customClass"
+      :close-on-click-modal="closeOnClickModal"
+      :close-on-press-escape="closeOnPressEscape"
+      :show-close="showClose"
+      :center="center"
+      :destroy-on-close="destroyOnClose"
+      :before-close="beforeClose"
+      @open="open"
+      @opened="opened"
+      @close="close"
+      @closed="closed"
+    >
+      <template v-slot:title>
+        <slot name="title"></slot>
+      </template>
+      <template v-slot:default>
+        <slot name="default"></slot>
+      </template>
+      <template v-slot:footer>
+        <slot name="footer"></slot>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "BaseDialog",
+  props: {
+    visible: { type: Boolean, default: false },
+    title: { type: String, default: "" },
+    width: { type: String, default: "" },
+    fullscreen: { type: Boolean, default: false },
+    top: { type: String },
+    modal: { type: Boolean, default: true },
+    modalAppendToBody: { type: Boolean, default: true },
+    appendToBody: { type: Boolean, default: false },
+    lockScroll: { type: Boolean, default: false },
+    customClass: { type: String, default: "" },
+    closeOnClickModal: { type: Boolean, default: true },
+    closeOnPressEscape: { type: Boolean, default: true },
+    showClose: { type: Boolean, default: true },
+    beforeClose: { type: Function },
+    center: { type: Boolean, default: false },
+    destroyOnClose: { type: Boolean, default: false },
+  },
+  data: function () {
+    return {
+      dialogShow: false,
+    };
+  },
+  watch: {
+    visible: function (val) {
+      this.dialogShow = val;
+    },
+  },
+  methods: {
+    open: function () {
+      this.$emit("open");
+    },
+    opened: function () {
+      this.$emit("opened");
+    },
+    close: function () {
+      this.$emit("close");
+    },
+    closed: function () {
+      this.$emit("closed");
+      this.$emit("update:visible", false);
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.base-dlg {
+  /deep/ .el-dialog__header {
+    text-align: left;
+    height: 45px;
+    background: rgb(240, 240, 240);
+    border-radius: 5px 5px 0px 0px;
+    border-bottom: 1px solid rgb(212, 212, 213);
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: rgb(16, 16, 16);
+    .el-dialog__title {
+      font-weight: 500;
+      font-size: 16px;
+      color: rgb(16, 16, 16);
+    }
+    .el-dialog__headerbtn {
+      top: 15px;
+      right: 15px;
+    }
+  }
+  /deep/ .el-dialog__body {
+    padding: 15px 15px;
+  }
+}
+</style>
diff --git a/web_src/vuepages/pages/reward/point/utils.js b/web_src/vuepages/pages/reward/point/utils.js
new file mode 100644
index 000000000..b19e41b1f
--- /dev/null
+++ b/web_src/vuepages/pages/reward/point/utils.js
@@ -0,0 +1,98 @@
+
+import { formatDate } from 'element-ui/lib/utils/date-util';
+import { SOURCE_TYPE, CONSUME_STATUS, POINT_ACTIONS } from './const';
+
+const getSourceType = (key) => {
+  const find = SOURCE_TYPE.filter(item => item.k === key);
+  return find.length ? find[0].v : key;
+};
+const getConsumeStatus = (key) => {
+  const find = CONSUME_STATUS.filter(item => item.k === key);
+  return find.length ? find[0].v : key;
+};
+const getPointAction = (key) => {
+  const find = POINT_ACTIONS.filter(item => item.k === key);
+  return find.length ? find[0].v : key;
+};
+
+export const getRewardPointRecordInfo = (record) => {
+  const out = {
+    sn: record.SerialNo,
+    date: formatDate(new Date(record.LastOperateDate * 1000), 'yyyy-MM-DD HH:mm:ss'),
+    _status: record.Status,
+    status: getConsumeStatus(record.Status) || '--',
+    statusColor: record.Status === 'OPERATING' ? 'rgb(33, 186, 69)' : '',
+    _sourceType: record.SourceType,
+    sourceType: getSourceType(record.SourceType),
+    duration: record?.Cloudbrain?.Duration || '--',
+    taskName: record?.Cloudbrain?.DisplayJobName || '--',
+    taskId: record?.Cloudbrain?.ID,
+    action: record?.Action?.OpType ? getPointAction(record.Action.OpType) : '--',
+    remark: record.Remark,
+    amount: record.Amount,
+  };
+  if (record.OperateType === 'INCREASE') {
+    if (record.SourceType === 'ADMIN_OPERATE') {
+      out.remark = record.Remark;
+    } else if (record.SourceType === 'ACCOMPLISH_TASK') {
+      switch (record?.Action?.OpType) {
+        case 1: // 创建公开项目 - 创建了项目OpenI/aiforge
+          out.remark = `创建了项目<a href="${record.Action.RepoLink}" rel="nofollow">${record.Action.ShortRepoFullDisplayName}</a>`;
+          break;
+        case 6: // 每日提出任务 - 创建了任务PCL-Platform.Intelligence/AISynergy#19
+          out.remark = `创建了任务<a href="${record.Action.RepoLink}/issues/${record.Action.IssueInfos[0]}" rel="nofollow">${record.Action.ShortRepoFullDisplayName}#${record.Action.IssueInfos[0]}</a>`;
+          break;
+        case 7: // 每日提出PR - 创建了合并请求OpenI/aiforge#1
+          out.remark = `创建了合并请求<a href="${record.Action.RepoLink}/pulls/${record.Action.IssueInfos[0]}" rel="nofollow">${record.Action.ShortRepoFullDisplayName}#${record.Action.IssueInfos[0]}</a>`;
+          break;
+        case 10: // 发表评论 - 评论了任务PCL-Platform.Intelligence/AISynergy#19
+          out.remark = `评论了任务<a href="${record.Action.CommentLink}" rel="nofollow">${record.Action.ShortRepoFullDisplayName}#${record.Action.IssueInfos[0]}</a>`;
+          break;
+        case 24: // 上传数据集文件 - 上传了数据集文件MMISTData.zip
+          out.remark = `上传了数据集文件<a href="${record.Action.RepoLink}/datasets" rel="nofollow">${record.Action.RefName}</a>`;
+          break;
+        case 30: // 导入新模型 - 导入了新模型resnet50_qx7l
+          break;
+        case 32: // 完成微信扫码验证 - 首次绑定微信奖励
+          out.remark = '首次绑定微信奖励';
+          break;
+        case 33: // 每日运行云脑任务 - 创建了(CPU/GPU/NPU)类型(调试/训练/推理/评测)任务tangl202204131431995
+          out.remark = `创建了{{}}类型{{}}任务<a href="${record.Action.RepoLink}/cloudbrain/${record.Action.Content}" rel="nofollow">${record.Action.RefName}</a>`;
+          break;
+        case 34: // 数据集被平台推荐 - 数据集XXX被设置为推荐数据集
+          out.remark = `数据集<a href="${record.Action.RepoLink}/datasets" rel="nofollow">${record.Action.RefName}</a>被设置为推荐数据集`;
+          break;
+        case 35: // 提交新公开镜像 - 提交了镜像jiangxiang_ceshi_tang03
+          out.remark = `提交了镜像${record.Action.RefName}`;
+          break;
+        case 36: // 镜像被平台推荐 - 镜像XXX被设置为推荐镜像
+          out.remark = `镜像${record.Action.RefName}被设置为推荐镜像`;
+          break;
+        case 37: // 首次更换头像 - 更新了头像
+          out.remark = '更新了头像';
+          break;
+        case 38: // 每日commit - 推送了xxxx分支的代码到OpenI/aiforge
+          const words = record.Action.RefName.split('/');
+          const branch = words[words.length - 1];
+          out.remark = `推送了<a href="${record.Action.RepoLink}/src/branch/${branch}" rel="nofollow">${branch}</a>分支的代码到<a href="${record.Action.RepoLink}" rel="nofollow">${record.Action.ShortRepoFullDisplayName}</a>`;
+          break;
+        case 39: // 每日首次Fork项目 - 创建了项目OpenI/fork_aiforge
+          out.remark = `创建了项目<a href="${record.Action.RepoLink}" rel="nofollow">${record.Action.ShortRepoFullDisplayName}</a>`;
+          break;
+        default:
+          break;
+      }
+    } else if (record.SourceType === 'RUN_CLOUDBRAIN_TASK') {
+
+    }
+  } else if (record.OperateType === 'DECREASE') {
+    if (record.SourceType === 'ADMIN_OPERATE') {
+      out.remark = record.Remark;
+    } else if (record.SourceType === 'ACCOMPLISH_TASK') {
+
+    } else if (record.SourceType === 'RUN_CLOUDBRAIN_TASK') {
+
+    }
+  }
+  return out;
+};
diff --git a/web_src/vuepages/pages/reward/point/vp-point.vue b/web_src/vuepages/pages/reward/point/vp-point.vue
index 22bb1f47e..65b48f1c9 100644
--- a/web_src/vuepages/pages/reward/point/vp-point.vue
+++ b/web_src/vuepages/pages/reward/point/vp-point.vue
@@ -41,30 +41,53 @@
         </div>
       </div>
       <div class="__r_p_table">
-        <div>
-          <el-table :data="tableData" style="width: 100%" v-loading="loading" stripe>
-            <el-table-column prop="sn" label="流水号" align="center" header-align="center" width="180"></el-table-column>
-            <el-table-column prop="date" label="时间" align="center" header-align="center" width="180"></el-table-column>
-            <el-table-column v-if="tabIndex === 1" prop="status" label="状态" align="center" header-align="center"
-              width="120">
+        <div v-show="tabIndex === 0">
+          <el-table :data="tableData" row-key="sn" style="width: 100%" v-loading="loading" stripe>
+            <el-table-column column-key="sn" prop="sn" label="流水号" align="center" header-align="center" width="180">
+            </el-table-column>
+            <el-table-column column-key="date" prop="date" label="时间" align="center" header-align="center" width="180">
+            </el-table-column>
+            <el-table-column column-key="sourceType" prop="sourceType" label="场景" align="center" header-align="center"
+              width="180"></el-table-column>
+            <el-table-column column-key="action" prop="action" label="积分行为" align="center" header-align="center"
+              width="200"></el-table-column>
+            <el-table-column column-key="remark" prop="remark" label="说明" align="left" header-align="center">
               <template slot-scope="scope">
-                <span :style="{ color: scope.row.statusColor }">{{ scope.row.status }}</span>
+                <span v-html="scope.row.remark"></span>
               </template>
             </el-table-column>
-            <el-table-column prop="sourceType" label="场景" align="center" header-align="center" width="180">
-            </el-table-column>
-            <el-table-column v-if="tabIndex === 1" prop="duration" label="运行时长" align="center" header-align="center"
-              width="150">
+            <el-table-column column-key="amount" prop="amount" label="积分" align="center" header-align="center"
+              width="120"></el-table-column>
+            <template slot="empty">
+              <span>{{ loading ? "加载加..." : "暂无数据" }}</span>
+            </template>
+          </el-table>
+        </div>
+        <div v-show="tabIndex === 1">
+          <el-table :data="tableData" row-key="sn" style="width: 100%" v-loading="loading" stripe>
+            <el-table-column column-key="sn" prop="sn" label="流水号" align="center" header-align="center" width="180">
             </el-table-column>
-            <el-table-column v-if="tabIndex === 0" prop="action" label="积分行为" align="center" header-align="center"
-              width="200">
+            <el-table-column column-key="date" prop="date" label="时间" align="center" header-align="center" width="180">
             </el-table-column>
-            <el-table-column prop="remark" label="说明" align="left" header-align="center">
+            <el-table-column column-key="status" prop="status" label="状态" align="center" header-align="center"
+              width="120">
+              <template slot-scope="scope">
+                <span :style="{ color: scope.row.statusColor }">{{ scope.row.status }}</span>
+              </template>
             </el-table-column>
-            <el-table-column v-if="tabIndex === 1" prop="taskName" label="任务名称" align="center" header-align="center">
+            <el-table-column column-key="sourceType" prop="sourceType" label="场景" align="center" header-align="center"
+              width="180"></el-table-column>
+            <el-table-column column-key="duration" prop="duration" label="运行时长" align="center" header-align="center"
+              width="150"></el-table-column>
+            <el-table-column column-key="remark" prop="remark" label="说明" align="left" header-align="center">
+              <template slot-scope="scope">
+                <span v-html="scope.row.remark"></span>
+              </template>
             </el-table-column>
-            <el-table-column prop="amount" label="积分" align="center" header-align="center" width="120">
+            <el-table-column column-key="taskName" prop="taskName" label="任务名称" align="center" header-align="center">
             </el-table-column>
+            <el-table-column column-key="amount" prop="amount" label="积分" align="center" header-align="center"
+              width="120"></el-table-column>
             <template slot="empty">
               <span>{{ loading ? "加载加..." : "暂无数据" }}</span>
             </template>
@@ -88,7 +111,7 @@
 <script>
 import { formatDate } from 'element-ui/lib/utils/date-util';
 import { getPoint, getPointAccount, getPointList, setPointOperate } from "../../../apis/modules/point";
-import { SOURCE_TYPE, CONSUME_STATUS, POINT_ACTIONS } from './const';
+import { getRewardPointRecordInfo } from './utils';
 export default {
   data() {
     return {
@@ -106,22 +129,11 @@ export default {
         pageSizes: [10],
         total: 100,
       },
+      eventSource: null,
     };
   },
   components: {},
   methods: {
-    getSourceType: function (key) {
-      const find = SOURCE_TYPE.filter(item => item.k === key);
-      return find.length ? find[0].v : key;
-    },
-    getConsumeStatus: function (key) {
-      const find = CONSUME_STATUS.filter(item => item.k === key);
-      return find.length ? find[0].v : key;
-    },
-    getPointAction: function (key) {
-      const find = POINT_ACTIONS.filter(item => item.k === key);
-      return find.length ? find[0].v : key;
-    },
     currentChange: function (val) {
       this.pageInfo.curpage = val;
       this.getTableData();
@@ -133,6 +145,18 @@ export default {
       this.pageInfo.total = 0;
       this.getTableData();
     },
+    getSummaryInfo: function () {
+      getPointAccount().then(res => {
+        if (res.data && res.data.Code === 0) {
+          const data = res.data.Data;
+          this.summaryInfo.available = data.Balance;
+          this.summaryInfo.gain = data.TotalEarned;
+          this.summaryInfo.used = data.TotalConsumed;
+        }
+      }).catch(err => {
+        console.log(err);
+      })
+    },
     getTableData: function () {
       this.loading = true;
       getPointList({
@@ -148,21 +172,7 @@ export default {
             const records = data.Records;
             for (let i = 0, iLen = records.length; i < iLen; i++) {
               const record = records[i];
-              tableData.push({
-                sn: record.SerialNo,
-                date: formatDate(new Date(record.LastOperateDate * 1000), 'yyyy-MM-DD HH:mm:ss'),
-                _status: record.Status,
-                status: this.getConsumeStatus(record.Status) || '--',
-                statusColor: record.Status === 'OPERATING' ? 'rgb(33, 186, 69)' : '',
-                _sourceType: record.SourceType,
-                sourceType: this.getSourceType(record.SourceType),
-                duration: record?.Cloudbrain?.Duration || '--',
-                taskName: record?.Cloudbrain?.DisplayJobName || '--',
-                taskId: record?.Cloudbrain?.ID,
-                action: record?.Action?.OpType ? this.getPointAction(record.Action.OpType) : '--',
-                remark: record.Remark,
-                amount: record.Amount,
-              });
+              tableData.push(getRewardPointRecordInfo(record));
             }
             this.tableData.splice(0, Infinity, ...tableData);
             this.pageInfo.total = data.Total;
@@ -189,19 +199,25 @@ export default {
     }
   },
   mounted: function () {
-    getPointAccount().then(res => {
-      if (res.data && res.data.Code === 0) {
-        const data = res.data.Data;
-        this.summaryInfo.available = data.Balance;
-        this.summaryInfo.gain = data.TotalEarned;
-        this.summaryInfo.used = data.TotalConsumed;
-      }
-    }).catch(err => {
-      console.log(err);
-    })
+    this.getSummaryInfo();
     this.getTableData();
+    const { AppSubUrl, csrf, NotificationSettings } = window.config;
+    if (NotificationSettings.EventSourceUpdateTime > 0 && !!window.EventSource) {
+      const source = new EventSource(`${AppSubUrl}/user/events`);
+      source.addEventListener('reward-operation', (e) => {
+        try {
+          this.getSummaryInfo();
+          this.getTableData();
+        } catch (err) {
+          console.error(err);
+        }
+      });
+      this.eventSource = source;
+    }
+  },
+  beforeDestroy: function () {
+    this.eventSource && this.eventSource.close();
   },
-  computed: {},
 };
 </script>