diff --git a/Dockerfile b/Dockerfile
index 138016d4ecb5cdcafc701b6821b48df611e0a522..0b8c87a535f792c50ef8b46a86796044938bb700 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,16 +2,16 @@ FROM gplane/pnpm as Builder
 
 RUN pnpm -v
 
-RUN mkdir -p /home/opendesign/web
-WORKDIR /home/opendesign/web
-COPY . /home/opendesign/web
+RUN mkdir -p /home/openeuler/web
+WORKDIR /home/openeuler/web
+COPY . /home/openeuler/web
 
 RUN pnpm install
-RUN pnpm build:p
+RUN pnpm build
 
 FROM nginx:1.20.0
 
-COPY --from=Builder /home/opendesign/web/packages/portal/.vitepress/dist /usr/share/nginx/html/
+COPY --from=Builder /home/openeuler/web/packages/portal/.vitepress/dist /usr/share/nginx/html/
 RUN chmod -R 755 /usr/share/nginx/html
 COPY ./deploy/nginx/nginx.conf /etc/nginx/nginx.conf
 
diff --git a/app/.vitepress/config.js b/app/.vitepress/config.js
index b9f1cd6f4ccffe29d34e98571655c1b52d1f28b9..e5820a5e589254ba77f3565b970045955cdbd91d 100644
--- a/app/.vitepress/config.js
+++ b/app/.vitepress/config.js
@@ -2,8 +2,6 @@ import i18n from './src/i18n';
 
 module.exports = {
   base: '/',
-  title: 'openEuler',
-  description: 'openEuler',
   head: [
     [
       'link',
@@ -20,6 +18,8 @@ module.exports = {
       },
     ],
   ],
+  appearance: true, // enable dynamic scripts from dark mode
+  titleTemplate: false, //  vitepress supports pageTitileTemplate since 1.0.0
   locales: {
     '/': {
       lang: 'zh',
@@ -49,8 +49,8 @@ module.exports = {
   themeConfig: {
     locales: {
       '/': i18n.zh,
-      '/zh/':  i18n.zh,
-      '/en/':  i18n.en,
+      '/zh/': i18n.zh,
+      '/en/': i18n.en,
       '/ru/': i18n.ru,
     },
   },
diff --git a/app/.vitepress/src/App.vue b/app/.vitepress/src/App.vue
index 8bb01ef6a6001c017d345c6820925cb1348f42ef..bd0c2af08d235ddf457e94c799827c72cf6520ed 100644
--- a/app/.vitepress/src/App.vue
+++ b/app/.vitepress/src/App.vue
@@ -20,8 +20,7 @@ const isDoc = computed(() => {
 <style lang="scss" scoped>
 main {
   margin: 80px auto 0;
-  max-width: 1504px;
-  padding: 0 var(--o-spacing-m);
+  padding: 0 var(--o-spacing-h2);
   @media (max-width: 1100px) {
     margin-top: 48px;
   }
diff --git a/app/.vitepress/src/NotFound.vue b/app/.vitepress/src/NotFound.vue
index 30c0d63a3af34f4dadf19edb76dfcbdfaecceb52..021e9794ebbdd93f16c4270c5905ecddaf8d3202 100644
--- a/app/.vitepress/src/NotFound.vue
+++ b/app/.vitepress/src/NotFound.vue
@@ -17,7 +17,7 @@ import Img404 from '@/assets/404.svg';
   flex-direction: column;
   font-size: var(--o-font-size-h6);
   color: var(--o-color-text2);
-  padding: var(--o-spacing-m) 0;
+  padding: var(--o-spacing-h2) 0;
   height: 100%;
   .img {
     max-width: 500px;
diff --git a/app/.vitepress/src/api/api-calendar.ts b/app/.vitepress/src/api/api-calendar.ts
new file mode 100644
index 0000000000000000000000000000000000000000..11077c1ea75ac04e5f50bce8aeef2313906ab68b
--- /dev/null
+++ b/app/.vitepress/src/api/api-calendar.ts
@@ -0,0 +1,32 @@
+import { request } from '@/shared/axios';
+import type { AxiosResponse } from '@/shared/axios';
+
+/**
+ * 获取会议数据
+ * @name getMeetingData
+ * @return {Array} 镜像列表
+ */
+export function getMeetingData() {
+  const url = '/api/meetings/meetingsdata/';
+  return request.get(url).then((res: AxiosResponse) => res.data);
+}
+
+/**
+ * 获取活动数据
+ * @name getActivityData
+ TODO:
+ */
+export function getActivityData() {
+  const url = '/api/activitiesdata/';
+  return request.get(url).then((res: AxiosResponse) => res.data);
+}
+
+/**
+ * 获取活动详情
+ * @name getActivityDetail
+ TODO:
+ */
+export function getActivityDetail(id: string) {
+  const url = `/api/activity/${id}/`;
+  return request.get(url, {}).then((res: AxiosResponse) => res.data);
+}
diff --git a/app/.vitepress/src/api/api-mirror.ts b/app/.vitepress/src/api/api-mirror.ts
index 076c5ffff974329468e629cd438204f37d617098..340b7dd63b3431995016463640e2a8ece52b4897 100644
--- a/app/.vitepress/src/api/api-mirror.ts
+++ b/app/.vitepress/src/api/api-mirror.ts
@@ -1,6 +1,3 @@
-import { request } from '@/shared/axios';
-import type { AxiosResponse } from '@/shared/axios';
-
 /**
  * 调用接口获取镜像列表
  * @name getAllMirror
@@ -8,7 +5,10 @@ import type { AxiosResponse } from '@/shared/axios';
  * @return {Array} 镜像列表
  */
 
+import { request } from '@/shared/axios';
+import type { AxiosResponse } from '@/shared/axios';
+
 export function getAllMirror() {
-  const url = '/api-mirror/?mirrorstats=true';
+  const url = '/api/mirrors/?mirrorstats=true';
   return request.get(url).then((res: AxiosResponse) => res.data);
 }
diff --git a/app/.vitepress/src/api/api-security.ts b/app/.vitepress/src/api/api-security.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e209c4c409f3f2e9acc118f4f05cd15deace8e61
--- /dev/null
+++ b/app/.vitepress/src/api/api-security.ts
@@ -0,0 +1,14 @@
+/**
+ * 调用接口获取安全公告列表
+ * @name getSecurityList
+ * @param {boolean} mirrorstats 镜像状态 true-运行的镜像
+ * @return {Array} 镜像列表
+ */
+
+import { request } from '@/shared/axios';
+import type { AxiosResponse } from '@/shared/axios';
+
+export function getSecurityList( params:any ) {
+    const url = '/api-cve/cve-security-notice-server/securitynotice/findAll';
+    return request.post(url, params).then((res: AxiosResponse) => res.data)
+}
diff --git a/app/.vitepress/src/components/AppCalendar.vue b/app/.vitepress/src/components/AppCalendar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3341b74e9b29f1283e59aa6e29a5ea5781324a00
--- /dev/null
+++ b/app/.vitepress/src/components/AppCalendar.vue
@@ -0,0 +1,910 @@
+<script setup lang="ts">
+import { ref, nextTick, onMounted, reactive, PropType } from 'vue';
+
+import IconLeft from '~icons/app/icon-left.svg';
+import IconRight from '~icons/app/icon-right.svg';
+import IconArrowRight from '~icons/app/arrow-right.svg';
+import IconDown from '~icons/app/down.svg';
+
+import { isValidKey } from '@/shared/utils';
+
+import { TableData, Item } from '@/shared/@types/type-calendar';
+
+import { useRouter } from 'vitepress';
+
+const router = useRouter();
+
+const props = defineProps({
+  tableData: {
+    type: Array as PropType<TableData[]>,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+let currentMeet = reactive<TableData>({
+  date: '',
+  timeData: [
+    {
+      creator: '',
+      duration_time: '',
+      join_url: '',
+      etherpad: '',
+      startTime: '',
+      endTiem: '',
+      url: '',
+      id: '',
+    },
+  ],
+});
+
+const renderData = ref<TableData>({
+  date: '',
+  timeData: [
+    {
+      creator: '',
+      duration_time: '',
+      join_url: '',
+      startTime: '',
+      start_date: '',
+      endTiem: '',
+      url: '',
+      id: '',
+    },
+  ],
+});
+
+const isMeeting = ref(false);
+const currentDay = ref('');
+const activeName = ref('');
+const monthDate = ref('');
+const activeIndex = ref(0);
+const isCollapse = ref(false);
+
+const detailItem = [
+  { text: '会议详情', key: 'detail', isLink: false },
+  { text: '发起人', key: 'creator', isLink: false },
+  { text: '会议日期', key: 'date', isLink: false },
+  { text: '会议时间', key: 'duration_time', isLink: false },
+  { text: '会议ID', key: 'meeting_id', isLink: false },
+  { text: '会议链接', key: 'join_url', isLink: true },
+  { text: 'Etherpad链接', key: 'etherpad', isLink: true },
+  { text: '活动介绍', key: 'synopsis', isLink: false },
+  { text: '起始日期', key: 'start_date', isLink: false },
+  { text: '结束日期', key: 'end_date', isLink: false },
+  { text: '活动形式', key: 'activity_type', isLink: false },
+  { text: '线上链接', key: 'online_url', isLink: true },
+  { text: '报名链接', key: 'register_url', isLink: true },
+  { text: '回放链接', key: 'replay_url', isLink: true },
+];
+const activityType = ['线下', '线上', '线上 + 线下'];
+const titleList = ['全部', '会议', '活动', '峰会'];
+
+const calendar = ref(null);
+
+const calendarHeight = ref(335);
+
+// 活动会议筛选
+function changeTab(index: number) {
+  activeIndex.value = index;
+  try {
+    // 0、全部 1、会议 其他活动
+    if (index === 0) {
+      renderData.value.timeData = currentMeet.timeData;
+    } else if (index === 1) {
+      renderData.value.timeData = currentMeet.timeData.filter((item: Item) => {
+        return item.etherpad;
+      });
+    } else {
+      renderData.value.timeData = currentMeet.timeData.filter((item: Item) => {
+        return item.activity_category === index - 1;
+      });
+    }
+  } catch (error) {}
+}
+
+function meetClick(day: string) {
+  currentDay.value = day;
+  activeIndex.value = 0;
+  try {
+    props.tableData.forEach((item: TableData) => {
+      isCollapse.value = false;
+      if (item.date === day || item.start_date === day) {
+        isMeeting.value = true;
+        // 深拷贝
+        currentMeet = JSON.parse(JSON.stringify(item));
+        renderData.value = JSON.parse(JSON.stringify(item));
+        // 只有一个会议默认展开
+        if (item.timeData.length === 1) {
+          activeName.value = '0';
+          nextTick(() => {
+            (document.querySelector('.meet-item') as HTMLElement).click();
+          });
+        } else {
+          // 会议时间排序
+          activeName.value = '';
+          item.timeData.sort((a: Item, b: Item) => {
+            return (
+              parseInt(a.startTime.replace(':', '')) -
+              parseInt(b.startTime.replace(':', ''))
+            );
+          });
+        }
+        throw Error();
+      } else {
+        isMeeting.value = false;
+      }
+    });
+  } catch (e) {}
+}
+
+// 为日历单元格绑定会议次数 (弃用)
+function getMeetTimes(day: string): number {
+  let times = 0;
+  props.tableData.forEach((item) => {
+    if (item.date === day || item.start_date === day) {
+      times = item.timeData.length;
+      return;
+    }
+  });
+  return times;
+}
+
+function changeMonth(index: number) {
+  (
+    document.querySelectorAll('.el-button-group button')[index] as HTMLElement
+  ).click();
+}
+
+function watchChange(element: Element) {
+  const observe = new MutationObserver(function () {
+    monthDate.value = element.innerHTML;
+    nextTick(() => {
+      const tbody = document.querySelector('.main-body tbody') as HTMLElement;
+      if (tbody) {
+        calendarHeight.value = tbody.offsetHeight;
+      }
+    });
+  });
+  observe.observe(element, { childList: true });
+}
+
+function goDetail(index: number) {
+  router.go(`/zh/calendar/detail/?id=${renderData.value.timeData[index].id}`);
+}
+
+function changeCollapse() {
+  isCollapse.value = !isCollapse.value;
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    const activeBoxs = document.querySelectorAll('.be-active')[
+      document.querySelectorAll('.be-active').length - 1
+    ] as HTMLElement;
+    if (activeBoxs) {
+      activeBoxs.click();
+    }
+  }, 300);
+  const tbody = document.querySelector('.main-body tbody') as HTMLElement;
+  if (tbody) {
+    calendarHeight.value = tbody.offsetHeight;
+  }
+  const element = document.querySelector('.el-calendar__title') as HTMLElement;
+  monthDate.value = element.innerHTML;
+  watchChange(element);
+});
+</script>
+<template>
+  <div class="wrapper">
+    <div class="head-title">
+      <div class="left-title">
+        <o-icon @click="changeMonth(0)"> <icon-left></icon-left> </o-icon>
+        <span class="month-date">{{ monthDate }}</span>
+        <o-icon @click="changeMonth(2)">
+          <icon-right></icon-right>
+        </o-icon>
+      </div>
+      <div class="right-title">
+        <div class="title-list">
+          <div
+            v-for="(item, index) in titleList"
+            :key="item"
+            :class="{ active: index === activeIndex }"
+            class="title-item"
+            @click="changeTab(index)"
+          >
+            {{ item }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="main-body">
+      <el-calendar ref="calendar" class="calender">
+        <template #dateCell="{ data }">
+          <div
+            class="out-box"
+            :class="{ 'be-active': getMeetTimes(data.day) }"
+            @click="meetClick(data.day)"
+          >
+            <div class="day-box">
+              <p
+                :class="data.isSelected ? 'is-selected' : ''"
+                class="date-calender"
+              >
+                {{ data.day.split('-').slice(2)[0] }}
+              </p>
+              <!-- TODO: 添加节日提醒 -->
+              <!-- <div class="holiday" v-if="data.day === '2022-04-20'">春节快乐</div>
+              <div class="holiday" v-if="data.day === '2022-05-20'">程序员节</div> -->
+            </div>
+          </div>
+        </template>
+      </el-calendar>
+      <div class="detailList">
+        <div class="detailHead">
+          最新日程：
+          <span>{{ currentDay }}</span>
+        </div>
+        <div class="meetList" :style="{ height: calendarHeight - 1 + 'px' }">
+          <div v-if="isMeeting" class="demo-collapse">
+            <el-collapse
+              v-model="activeName"
+              accordion
+              @change="changeCollapse()"
+            >
+              <div
+                v-for="(item, index) in renderData.timeData"
+                :key="item.id"
+                class="collapse-box"
+              >
+                <el-collapse-item :name="index">
+                  <template #title>
+                    <div class="meet-item">
+                      <div class="meet-left">
+                        <div class="left-top">
+                          <p class="meet-name">{{ item.name || item.title }}</p>
+                          <p v-if="item.activity_category" class="introduce">
+                            {{ titleList[item.activity_category + 1] }}
+                          </p>
+                          <p v-else class="introduce">会议</p>
+                        </div>
+                        <div
+                          v-if="item.schedules"
+                          class="more-detail"
+                          @click.stop="goDetail(index)"
+                        >
+                          了解更多
+                          <o-icon @click="changeMonth(2)">
+                            <icon-arrow-right></icon-arrow-right>
+                          </o-icon>
+                        </div>
+                        <div
+                          v-if="item.group_name"
+                          class="group-name more-detail"
+                        >
+                          SIG组: {{ item.group_name }}
+                        </div>
+                      </div>
+                      <div class="item-right">
+                        <div class="detail-time">
+                          <span class="start-time">{{
+                            item.startTime || item.start_date
+                          }}</span>
+                          <span class="end-time">{{
+                            item.endTime || item.end_date
+                          }}</span>
+                        </div>
+                        <div class="extend">
+                          <o-icon
+                            :class="{
+                              reversal:
+                                isCollapse && activeName == index.toString(),
+                            }"
+                          >
+                            <icon-down></icon-down>
+                          </o-icon>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <div class="meet-detail">
+                    <template v-for="keys in detailItem" :key="keys.key">
+                      <div
+                        v-if="isValidKey(keys.key, item) && item[keys.key]"
+                        class="meeting-item"
+                      >
+                        <div class="item-title">{{ keys.text }}:</div>
+                        <p
+                          v-if="
+                            !keys.isLink &&
+                            keys.key !== 'activity_type' &&
+                            keys.key !== 'date'
+                          "
+                        >
+                          {{ item[keys.key] }}
+                        </p>
+                        <p
+                          v-else-if="
+                            keys.isLink &&
+                            item[keys.key] &&
+                            !(item[keys.key] as string).startsWith('http')
+                          "
+                        >
+                          {{ item[keys.key] }}
+                        </p>
+                        <a
+                          v-else-if="keys.isLink"
+                          :href="item[keys.key]"
+                          target="_blank"
+                          >{{ item[keys.key] }}</a
+                        >
+                        <p
+                          v-else-if="
+                            keys.key === 'activity_type' && item.activity_type
+                          "
+                        >
+                          {{ activityType[item.activity_type - 1] }}
+                        </p>
+                        <p v-else>{{ currentDay }}</p>
+                      </div>
+                    </template>
+                  </div>
+                </el-collapse-item>
+              </div>
+            </el-collapse>
+          </div>
+          <div v-else class="empty">今日暂无日程安排</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+a {
+  text-decoration: none;
+  color: var(--o-color-brand);
+}
+p::before,
+p::after {
+  display: none;
+}
+.wrapper {
+  .calendar-title {
+    text-align: center;
+    font-size: 36px;
+    font-weight: 400;
+  }
+  .head-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0 23px 0;
+    .left-title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      .o-icon {
+        font-size: 24px;
+        color: rgb(206, 206, 206);
+      }
+    }
+    .month-date {
+      padding: 0 8px;
+    }
+    @media screen and (max-width: 1000px) {
+      .left-title {
+        display: none;
+      }
+    }
+    :deep(.title-list) {
+      display: flex;
+      .el-tabs__nav-scroll {
+        @media screen and (max-width: 1000px) {
+          display: flex;
+          justify-content: center;
+        }
+      }
+      .el-tabs__item {
+        font-size: 16px;
+        @media screen and (max-width: 1000px) {
+          font-size: 14px;
+        }
+      }
+      .el-tabs__nav-wrap::after {
+        display: none;
+      }
+      .title-item {
+        cursor: pointer;
+        padding: 12px;
+        &:hover {
+          color: var(--o-color-brand);
+        }
+      }
+      .active {
+        background-color: var(--o-color-brand);
+        color: #fff !important;
+      }
+    }
+    .o-icon {
+      cursor: pointer;
+      font-size: 18px;
+      font-weight: 700;
+      color: #000;
+      transition: color 0.2s;
+      &:hover {
+        color: var(--o-color-brand);
+        svg {
+          color: var(--o-color-brand_hover);
+          fill: var(--o-color-brand_hover);
+        }
+      }
+    }
+  }
+  .main-body {
+    display: flex;
+    :deep(.el-collapse-item__content) {
+      padding: 0;
+    }
+    .collapse-box-mo {
+      .left-title {
+        display: none;
+      }
+    }
+    @media screen and (max-width: 1000px) {
+      .collapse-box-mo {
+        .el-collapse-item {
+          padding: 0 8px;
+          width: 345px;
+          .el-collapse-item__content {
+            padding: 0;
+          }
+          .meet-detail {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .left-title {
+              display: flex;
+              padding: 8px 64px;
+              align-items: center;
+              justify-content: space-between;
+              svg {
+                cursor: pointer;
+                width: 16px;
+              }
+            }
+          }
+        }
+        .mo-collapse {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          svg {
+            width: 16px;
+          }
+          .month-date {
+            padding-left: 8px;
+            font-size: 12px;
+            color: #000;
+            line-height: 16px;
+          }
+        }
+      }
+      .el-icon-arrow-right {
+        font-weight: 700;
+        transform: rotate(90deg);
+        &::before {
+          color: #000;
+        }
+      }
+      .el-icon-arrow-right.is-active {
+        transform: rotate(270deg);
+      }
+    }
+    :deep(.calender) {
+      max-width: 500px;
+      text-align: center;
+      .el-calendar__header {
+        display: none;
+        .el-button-group {
+          display: none;
+        }
+      }
+      thead {
+        th {
+          text-align: center;
+        }
+        background-color: var(--o-color-bg3);
+      }
+      @media screen and (max-width: 1000px) {
+        display: none;
+      }
+
+      .is-today {
+        .el-calendar-day {
+          .day-box {
+            color: #555555;
+            background-color: var(--o-color-bg3);
+          }
+        }
+      }
+      .is-selected {
+        color: white;
+        .el-calendar-day {
+          .day-box {
+            background-color: var(--o-color-brand);
+          }
+        }
+      }
+      .el-calendar__body {
+        padding: 0;
+        .el-calendar-table__row {
+          -moz-user-select: none; /*火狐*/
+          -webkit-user-select: none; /*webkit浏览器*/
+          -ms-user-select: none; /*IE10*/
+          -khtml-user-select: none; /*早期浏览器*/
+          user-select: none;
+          font-size: 12px;
+          .el-calendar-day {
+            display: flex;
+            justify-content: center;
+            padding: 0;
+            height: 66px;
+            .out-box {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 100%;
+            }
+            .be-active {
+              position: relative;
+              overflow: hidden;
+            }
+            .be-active::after {
+              position: absolute;
+              top: -6px;
+              right: -6px;
+              content: '';
+              width: 20px;
+              height: 20px;
+              border-radius: 0 0 0 20px;
+              background-color: var(--o-color-brand_hover);
+              @media screen and (max-width: 1000px) {
+                width: 12px;
+                height: 12px;
+                top: -4px;
+                right: -4px;
+                border-radius: 0 0 0 12px;
+              }
+            }
+            .day-box {
+              display: flex;
+              box-sizing: border-box;
+              justify-content: center;
+              width: 32px;
+              height: 32px;
+              border-radius: 50%;
+              align-items: center;
+              .date-calender {
+                line-height: 21px;
+                font-size: 16px;
+              }
+            }
+          }
+          @media screen and (max-width: 1000px) {
+            .el-calendar-day {
+              // width: 32px;
+              height: 47px;
+              .day-box {
+                .date-calender {
+                  font-size: 12px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .calender-mo {
+      display: none;
+      @media screen and (max-width: 1000px) {
+        display: flex;
+        .calender {
+          display: block;
+        }
+        thead {
+          th {
+            padding: 7px 0;
+            font-size: 12px;
+          }
+        }
+        tbody {
+          width: 300px;
+        }
+        tr {
+          td {
+            border: none;
+            justify-content: center;
+          }
+        }
+        .current {
+          flex-direction: column;
+          justify-content: center;
+        }
+      }
+    }
+    :deep(.detailList) {
+      width: 100%;
+      .detailHead {
+        padding: 12px 0 13px;
+        text-align: center;
+        color: #555555;
+        background-color: var(--o-color-bg3);
+        font-family: FZLTZHJW--GB1-0, FZLTZHJW--GB1;
+        @media screen and (max-width: 1000px) {
+          padding: 8px 0;
+          font-size: 12px;
+        }
+      }
+      .el-collapse {
+        border: none;
+        --el-collapse-header-height: 96px;
+        .collapse-box:last-child {
+          .el-collapse-item {
+            margin-bottom: 0;
+          }
+        }
+        .el-collapse-item {
+          margin-bottom: 8px;
+          .el-collapse-item__header {
+            display: block;
+            border: none;
+            height: 100%;
+          }
+        }
+        .el-collapse-item__wrap {
+          border: none;
+          padding: 0 24px;
+          background-color: #eef0f4;
+          @media screen and (max-width: 1000px) {
+            background-color: #f5f6f8;
+          }
+        }
+      }
+      .meetList {
+        padding: 8px 0 0 8px;
+        height: 402px;
+        background-color: #fff;
+        border-right: 1px solid #e5e8f0;
+        border-bottom: 1px solid #e5e8f0;
+        overflow-y: scroll;
+        @media screen and (max-width: 1000px) {
+          padding: 8px;
+          height: fit-content;
+          overflow: auto;
+        }
+        &::-webkit-scrollbar-track {
+          border-radius: 4px;
+          background-color: #fff;
+        }
+
+        &::-webkit-scrollbar {
+          width: 6px;
+          background-color: #fff;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+          background: #ccc;
+        }
+        .el-collapse-item__arrow {
+          display: none;
+        }
+        .el-collapse-item__content {
+          padding-bottom: 0;
+          @media screen and (max-width: 1000px) {
+            font-size: 12px;
+          }
+        }
+        .meet-item {
+          display: flex;
+          justify-content: space-between;
+          padding: 16px 24px;
+          width: 100%;
+          height: 100%;
+          background-color: #f5f6f8ff;
+          border: 1px solid #e5e8f0;
+          border-left: 1px solid #406fe7ff;
+          .meet-left {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            text-align: left;
+            .left-top {
+              display: flex;
+              align-items: center;
+              .meet-name {
+                margin-right: 16px;
+                max-width: 400px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                font-size: 18px;
+                color: #000;
+                line-height: 24px;
+              }
+              .el-collapse-item__content {
+                padding: 0 20px;
+              }
+              p {
+                margin: 0;
+                height: fit-content;
+                justify-content: center;
+                align-items: center;
+                line-height: normal;
+              }
+              // .introduce {
+              //   padding: 1px 7px;
+              //   display: -webkit-box;
+              //   -webkit-box-orient: vertical;
+              //   -webkit-line-clamp: 1;
+              //   overflow: hidden;
+              //   color: #fff;
+              //   background: linear-gradient(225deg, #feb32a 0%, #f6d365 100%);
+              // }
+            }
+            .more-detail {
+              display: flex;
+              flex-shrink: 0;
+              align-items: center;
+              width: fit-content;
+              height: 24px;
+              font-size: 16px;
+              font-family: FZLTHJW--GB1-0, FZLTHJW--GB1;
+              line-height: 24px;
+              .o-icon {
+                margin: 0 5px;
+                color: var(--o-color-brand);
+                font-size: 24px;
+                transition: all 0.3s;
+                svg {
+                  color: #0d8dff;
+                }
+              }
+              &:hover {
+                .o-icon {
+                  transform: translateX(5px);
+                }
+              }
+            }
+          }
+          .item-right {
+            display: flex;
+            font-size: 14px;
+
+            .detail-time {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              padding: 0 24px;
+              font-family: FZLTHJW--GB1-0, FZLTHJW--GB1;
+              font-weight: normal;
+              text-align: center;
+              font-size: 16px;
+              span {
+                line-height: 15px;
+              }
+            }
+            .extend {
+              display: flex;
+              align-items: center;
+              width: 24px;
+              .o-icon {
+                font-size: 28px;
+                color: #555;
+                transition: all 0.3s;
+              }
+              .reversal {
+                transform: rotate(180deg);
+              }
+            }
+          }
+          @media screen and (max-width: 1000px) {
+            background-color: #fff;
+            padding: 12px;
+            border-left-width: 2px;
+            .meet-left {
+              max-width: 230px;
+              .left-top {
+                .meet-name {
+                  font-size: 14px;
+                  font-weight: 700;
+                }
+              }
+              .group-name {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-size: 12px;
+                color: #555;
+              }
+            }
+            .item-right {
+              .detail-time {
+                flex-direction: row;
+                align-items: flex-end;
+                padding: 0 7px;
+                font-size: 12px;
+              }
+              .extend {
+                align-items: flex-end;
+                .o-icon {
+                  font-size: 16px;
+                }
+              }
+            }
+          }
+        }
+        .meet-detail {
+          color: #555555;
+          padding-top: 10px;
+          .meeting-item {
+            display: flex;
+            padding-bottom: 8px;
+            line-height: 18px;
+            word-break: break-all;
+            .item-title {
+              flex-shrink: 0;
+              width: 90px;
+            }
+            // .meet-title {
+            //   width: 90px;
+            // }
+            .creator {
+              display: flex;
+              align-items: center;
+              .head-logo {
+                width: 60px;
+                border-radius: 50%;
+                overflow: hidden;
+              }
+              .creator-name {
+                padding-left: 15px;
+                font-size: 14px;
+              }
+            }
+          }
+        }
+      }
+      .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        img {
+          width: 300px;
+          min-height: 300px;
+        }
+        p {
+          transform: translateY(-200%);
+        }
+      }
+    }
+  }
+  @media screen and (max-width: 1000px) {
+    .head-title {
+      flex-direction: column;
+      padding: 0;
+    }
+    .main-body {
+      margin: 0 auto;
+      width: 345px;
+      align-items: center;
+      flex-direction: column;
+      background-color: #fff;
+    }
+  }
+}
+</style>
diff --git a/app/.vitepress/src/components/AppFooter.vue b/app/.vitepress/src/components/AppFooter.vue
index d2fa4b16a529d12c662a6dd4a8d7ce7e66bd9ec6..58117defda17d9d3bfcdc33d4011157189ae346e 100644
--- a/app/.vitepress/src/components/AppFooter.vue
+++ b/app/.vitepress/src/components/AppFooter.vue
@@ -153,7 +153,7 @@ $color: #fff;
   .copyright {
     font-size: var(--o-font-size-text);
     color: $color;
-    margin-top: var(--o-spacing-s2);
+    margin-top: var(--o-spacing-h5);
   }
 
   .footer-option {
@@ -181,7 +181,7 @@ $color: #fff;
     p {
       color: $color;
       font-size: var(--o-font-size-tip);
-      margin-top: var(--o-spacing-s1);
+      margin-top: var(--o-spacing-h8);
     }
   }
   .link {
@@ -196,23 +196,23 @@ $color: #fff;
 
 @media (max-width: 1100px) {
   .footer {
-    padding: var(--o-spacing-m) 0 0;
+    padding: var(--o-spacing-h2) 0 0;
     .atom-text {
       font-size: var(--o-font-size-text);
       line-height: var(--o-line-height-text);
     }
     .atom-logo {
       height: 32px;
-      margin: var(--o-spacing-s2) 0 var(--o-spacing-s3);
+      margin: var(--o-spacing-h5) 0 var(--o-spacing-h4);
     }
     .wrapper {
       display: grid;
       text-align: center;
       justify-content: center;
-      padding: var(--o-spacing-s3) 0;
+      padding: var(--o-spacing-h4) 0;
     }
     .footer-logo {
-      margin: var(--o-spacing-s2) 0;
+      margin: var(--o-spacing-h5) 0;
       img {
         margin-bottom: 4px;
       }
@@ -224,7 +224,7 @@ $color: #fff;
       }
       .copyright {
         font-size: var(--o-font-size-tip);
-        margin-top: var(--o-spacing-s1);
+        margin-top: var(--o-spacing-h8);
       }
     }
   }
diff --git a/app/.vitepress/src/components/AppHeader.vue b/app/.vitepress/src/components/AppHeader.vue
index 8b7b7280f678d9647174b0e1348c21a2e818a4fe..a0c4a6cbeb17cd80a490ee160992bd6e85fd18dd 100644
--- a/app/.vitepress/src/components/AppHeader.vue
+++ b/app/.vitepress/src/components/AppHeader.vue
@@ -406,7 +406,7 @@ onUnmounted(() => {
 }
 .mobile-menu-icon {
   display: none;
-  margin-right: var(--o-spacing-s2);
+  margin-right: var(--o-spacing-h5);
   @media (max-width: 1100px) {
     display: block;
   }
@@ -519,7 +519,7 @@ onUnmounted(() => {
         font-size: var(--o-font-size-tip);
         line-height: var(--o-line-height-h3);
         color: var(--o-color-text2);
-        padding: 0 var(--o-spacing-s2);
+        padding: 0 var(--o-spacing-h5);
         position: relative;
         cursor: pointer;
         &::after {
@@ -544,7 +544,7 @@ onUnmounted(() => {
       }
     }
     .mobile-tools {
-      padding: 0 var(--o-spacing-s2);
+      padding: 0 var(--o-spacing-h5);
       margin-bottom: 24px;
     }
     .el-switch {
diff --git a/app/.vitepress/src/components/AppLanguage.vue b/app/.vitepress/src/components/AppLanguage.vue
index 7c9145e5498f2e4f0822f8341c4dffaecc887669..42cee197cd6356e1421720cc4e7121c56c660426 100644
--- a/app/.vitepress/src/components/AppLanguage.vue
+++ b/app/.vitepress/src/components/AppLanguage.vue
@@ -110,7 +110,7 @@ watch(
     top: 60px;
     left: -24px;
     background: var(--o-color-bg);
-    padding: 0 var(--o-spacing-s2);
+    padding: 0 var(--o-spacing-h5);
     cursor: pointer;
     z-index: 80;
     .lang-item {
diff --git a/app/.vitepress/src/components/BannerLevel2.vue b/app/.vitepress/src/components/BannerLevel2.vue
index 2742238f6533db4723037a214d80c94da32395c6..6f51975b51f27d6f6db29e8ad23f32303ce5584f 100644
--- a/app/.vitepress/src/components/BannerLevel2.vue
+++ b/app/.vitepress/src/components/BannerLevel2.vue
@@ -91,7 +91,7 @@ const rootStyle = computed(() => {
         color: var(--o-color-text);
         font-size: var(--o-font-size-h2);
         line-height: var(--o-line-height-h2);
-        margin-top: var(--o-spacing-m);
+        margin-top: var(--o-spacing-h2);
       }
 
       .banner-subtitle {
diff --git a/app/.vitepress/src/components/HeaderNav.vue b/app/.vitepress/src/components/HeaderNav.vue
index 267da51e63df5daf10c24e35a308bf76a84cc4f3..81dccbfd3095201e5a7211188cf9e3a10104d8ee 100644
--- a/app/.vitepress/src/components/HeaderNav.vue
+++ b/app/.vitepress/src/components/HeaderNav.vue
@@ -105,7 +105,7 @@ const hideSub = () => {
       display: inline-flex;
       align-items: center;
       height: 100%;
-      margin: 0 var(--o-spacing-s3);
+      margin: 0 var(--o-spacing-h4);
       font-size: var(--o-font-size-text);
       line-height: var(--o-line-height-h8);
       color: var(--o-color-text2);
@@ -160,7 +160,7 @@ const hideSub = () => {
           color: var(--o-color-text2);
           display: block;
           white-space: nowrap;
-          padding: 0 var(--o-spacing-s1);
+          padding: 0 var(--o-spacing-h8);
           min-width: 106px;
           &.active {
             background-color: var(--o-color-brand);
diff --git a/app/.vitepress/src/i18n/index.ts b/app/.vitepress/src/i18n/index.ts
index b50c7c9c5dcc3c3ddfec6deb3debe6c4290ab156..4218eef24d196ef3b135ee9c255a790d8653c797 100644
--- a/app/.vitepress/src/i18n/index.ts
+++ b/app/.vitepress/src/i18n/index.ts
@@ -3,22 +3,26 @@
 import sig from './sig';
 import download from './download';
 import brand from './brand';
+import security from './security';
 
 const i18n = {
   zh: {
     sig: sig.zh,
     download: download.zh,
     brand: brand.zh,
+    security: security.zh,
   },
   en: {
     sig: sig.en,
     download: download.en,
     brand: brand.en,
+    security: security.en,
   },
   ru: {
     sig: sig.ru,
     download: download.ru,
     brand: brand.ru,
+    security: security.ru,
   },
 };
 
diff --git a/app/.vitepress/src/i18n/security/index.ts b/app/.vitepress/src/i18n/security/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7831da7aeeef680cd52ceda4badfdc6dffe4a388
--- /dev/null
+++ b/app/.vitepress/src/i18n/security/index.ts
@@ -0,0 +1,9 @@
+import zh from './security-zh';
+import en from './security-en';
+import ru from './security-ru';
+
+export default {
+  zh,
+  en,
+  ru,
+};
diff --git a/app/.vitepress/src/i18n/security/security-en.ts b/app/.vitepress/src/i18n/security/security-en.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ed959a4499bad43228fca5c6a49523b8a0f472e
--- /dev/null
+++ b/app/.vitepress/src/i18n/security/security-en.ts
@@ -0,0 +1,59 @@
+export default{
+    en: {
+        OVERVIEW: 'Overview',
+        UPDATED_PACKAGES: 'Updated software packages',
+        SECURITY_ADVISORIES: 'Security Advisories',
+        SECURITY_ADVISORIES_NAME: 'Title',
+        SEARCH: 'Search',
+        SEVERITY_LIST : [
+            {
+                NAME: 'All',
+                LABEL: ''
+            },
+            {
+                NAME: 'Low',
+                LABEL: 'Low'
+            },
+            {
+                NAME: 'Medium',
+                LABEL: 'Medium'
+            },
+            {
+                NAME: 'High',
+                LABEL: 'High'
+            },
+            {
+                NAME: 'Critical',
+                LABEL: 'Critical'
+            }
+        ],
+        YEAR: 'Year',
+        PLACEHOLDER: 'Select',
+        ALL: 'ALL',
+        ADVISORY: 'Advisory',
+        SYNOPSIS: 'Synopsis',
+        SEVERITY: 'Severity',
+        AFFECTED_PRODUCTS: 'Affected Product',
+        AFFECTED_COMPONENTS: 'Affected \n Component',
+        RELEASE_DATE: 'Release Date',
+        CVSS_SCORE: 'CVSS Score',
+        MODIFIED_TIME: 'Time of Modification',
+        OPERATION: 'Operation',
+        DETAIL: 'Details',
+        REPORTING: 'Vulnerability Report',
+        INPUT_CVE_ID: 'Please input CVE ID',
+        INPUT_STATUS: 'Please input Status',
+        BRIEF_INTRODUCTION: 'BriefIntroduction',
+        THEME: 'theme',
+        DESCRIPTION: 'description',
+        PACKAGE: 'packages',
+        REFERENCE_DOCUMENTS: 'referenceDocuments',
+        CVE_DETAIL: 'CVE Detail',
+        METRICS_V3: 'CVSS v3 Metrics',
+        METRICS_V2: 'CVSS v2 Metrics',
+        SCORE: 'Score',
+        PRODUCT: 'Product',
+        STATUS: 'Status',
+        PACKAGE_NAME:'packages',
+    },
+}
\ No newline at end of file
diff --git a/app/.vitepress/src/i18n/security/security-ru.ts b/app/.vitepress/src/i18n/security/security-ru.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b7613a21c46e06eda904b47e354b60640a799b96
--- /dev/null
+++ b/app/.vitepress/src/i18n/security/security-ru.ts
@@ -0,0 +1,58 @@
+export default{
+        OVERVIEW: 'Краткое описание',
+        UPDATED_PACKAGES: 'Обновленные пакеты ПО',
+        SECURITY_ADVISORIES: 'Консультанты по безопасности',
+        SECURITY_ADVISORIES_NAME: 'Title',
+        SEARCH: 'Поиск',
+        SEVERITY_LIST : [
+            {
+                NAME: 'Все',
+                LABEL: ''
+            },
+            {
+                NAME: 'Низкий',
+                LABEL: 'Low'
+            },
+            {
+                NAME: 'Средний',
+                LABEL: 'Medium'
+            },
+            {
+                NAME: 'Высокий',
+                LABEL: 'High'
+            },
+            {
+                NAME: 'Критический',
+                LABEL: 'Critical'
+            }
+        ],
+        YEAR: 'Год',
+        PLACEHOLDER: 'Выбрать',
+        ALL: 'ВСЕ',
+        ADVISORY: 'Консультант',
+        SEVERITY_PLACEHOLDER: 'Степень серьезности',
+        SYNOPSIS: 'Синопсис',
+        SEVERITY: 'Степень серьезности',
+        AFFECTED_PRODUCTS: 'Затронутый продукт',
+        AFFECTED_COMPONENTS: 'Затронутый \n компонент',
+        RELEASE_DATE: 'Дата выпуска релиза',
+        CVSS_SCORE: 'Оценка по CVSS',
+        MODIFIED_TIME: 'Время изменения',
+        OPERATION: 'Действие',
+        DETAIL: 'Описание',
+        REPORTING: 'Сообщение об уязвимостях',
+        INPUT_CVE_ID: 'Введите идентификатор CVE',
+        INPUT_STATUS: 'Введите идентификатор Status',
+        BRIEF_INTRODUCTION: 'BriefIntroduction',
+        THEME: 'theme',
+        DESCRIPTION: 'description',
+        PACKAGE: 'packages',
+        REFERENCE_DOCUMENTS: 'referenceDocuments',
+        CVE_DETAIL: 'CVE Detail',
+        METRICS_V3: 'CVSS v3 Metrics',
+        METRICS_V2: 'CVSS v2 Metrics',
+        SCORE: 'Score',
+        PRODUCT: 'Product',
+        STATUS: 'Status',
+        PACKAGE_NAME:'packages',
+    }
\ No newline at end of file
diff --git a/app/.vitepress/src/i18n/security/security-zh.ts b/app/.vitepress/src/i18n/security/security-zh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cef3721190bf8a390a344153d4cabb563b0867b6
--- /dev/null
+++ b/app/.vitepress/src/i18n/security/security-zh.ts
@@ -0,0 +1,57 @@
+export default {
+        OVERVIEW: '概述',
+        UPDATED_PACKAGES: '更新的软件包',
+        SECURITY_ADVISORIES: '安全公告',
+        SECURITY_ADVISORIES_NAME: '公告名',
+        SEARCH: '搜索安全公告',
+        SEVERITY_LIST : [
+            {
+                NAME: '全部',
+                LABEL: ''
+            },
+            {
+                NAME: '低',
+                LABEL: 'Low'
+            },
+            {
+                NAME: '中',
+                LABEL: 'Medium'
+            },
+            {
+                NAME: '高',
+                LABEL: 'High'
+            },
+            {
+                NAME: '致命',
+                LABEL: 'Critical'
+            }
+        ],
+        YEAR: '年份',
+        PLACEHOLDER: '请选择',
+        ALL: '全部',
+        ADVISORY: '公告',
+        SYNOPSIS: '概述',
+        SEVERITY: '严重级别',
+        AFFECTED_PRODUCTS: '影响产品',
+        AFFECTED_COMPONENTS: '影响组件',
+        RELEASE_DATE: '发布时间',
+        CVSS_SCORE: 'CVSS评分',
+        MODIFIED_TIME: '修改时间',
+        OPERATION: '操作',
+        DETAIL: '详情',
+        REPORTING: '漏洞管理',
+        INPUT_CVE_ID: '请输入CVE ID',
+        INPUT_STATUS: '请输入状态',
+        BRIEF_INTRODUCTION: '简介',
+        THEME: '主题',
+        DESCRIPTION: '描述',
+        PACKAGE: '包',
+        REFERENCE_DOCUMENTS: '参考',
+        CVE_DETAIL: 'CVE详情',
+        METRICS_V3: 'CVSS v3 指标',
+        METRICS_V2: 'CVSS v2 指标',
+        SCORE: '评分',
+        PRODUCT: '产品',
+        STATUS: '状态',
+        PACKAGE_NAME:'包',
+    }
\ No newline at end of file
diff --git a/app/.vitepress/src/shared/@types/interface.ts b/app/.vitepress/src/shared/@types/interface.ts
deleted file mode 100644
index 2aecd104e18ed8baf51fb878118f5e435975af9d..0000000000000000000000000000000000000000
--- a/app/.vitepress/src/shared/@types/interface.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface NavItem {
-  id: string;
-  label: string;
-  path: string;
-}
diff --git a/app/.vitepress/src/shared/@types/type-calendar.ts b/app/.vitepress/src/shared/@types/type-calendar.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fb4706b05c67d77a2d4df302442a300344aa3cc6
--- /dev/null
+++ b/app/.vitepress/src/shared/@types/type-calendar.ts
@@ -0,0 +1,26 @@
+export interface Item {
+  creator: string;
+  duration_time: string;
+  join_url: string;
+  startTime: string;
+  endTiem: string;
+  url: string;
+  data?: string;
+  id?: string;
+  etherpad?: string;
+  start_date?: string;
+  name?: string;
+  title?: string;
+  schedules?: any;
+  activity_category?: number;
+  group_name?: string;
+  endTime?: string;
+  end_date?: string;
+  activity_type?: number;
+}
+
+export interface TableData {
+  date: string;
+  start_date?: string;
+  timeData: Item[];
+}
diff --git a/app/.vitepress/src/shared/styles/_filter.scss b/app/.vitepress/src/shared/styles/_filter.scss
new file mode 100644
index 0000000000000000000000000000000000000000..58e7c34d7b9a6047df9bb35baf1399913c1bec93
--- /dev/null
+++ b/app/.vitepress/src/shared/styles/_filter.scss
@@ -0,0 +1,21 @@
+.el-popper.filter {
+    box-shadow: none !important;
+    --el-popper-border-radius: none;
+
+    .el-popper__arrow {
+        display: none;
+    }
+
+    .el-select-dropdown__item {
+        color: var(--o-color-base_inverse);
+
+        &:hover {
+            color: var(--o-color-brand);
+        }
+    }
+
+    .el-select-dropdown__item.selected {
+        font-weight: normal;
+        color: var(--o-color-brand);
+    }
+}
\ No newline at end of file
diff --git a/app/.vitepress/src/shared/styles/index.scss b/app/.vitepress/src/shared/styles/index.scss
index a560c0ab0f6955eb583a166f2e28908776c2f5fd..5deac70d3c1af68bbcfd55392fa9dadaf531aece 100644
--- a/app/.vitepress/src/shared/styles/index.scss
+++ b/app/.vitepress/src/shared/styles/index.scss
@@ -3,3 +3,4 @@
 @import './base.scss';
 @import './style.scss';
 @import './markdown.scss';
+@import './_filter.scss';
diff --git a/app/.vitepress/src/shared/styles/markdown.scss b/app/.vitepress/src/shared/styles/markdown.scss
index 403ee7ea81eeef47d955ad831fb3a41bb4360caf..f757bcbcba2c21b1a01e3806e4f3a029a04251fb 100644
--- a/app/.vitepress/src/shared/styles/markdown.scss
+++ b/app/.vitepress/src/shared/styles/markdown.scss
@@ -1,11 +1,16 @@
 .markdown {
   max-width: 1504px;
-  padding: var(--o-spacing-m);
-  margin: var(--o-spacing-l) auto;
-  margin-top: 144px;
+  padding: var(--o-spacing-h2);
+  margin: var(--o-spacing-h1) auto;
+  margin-top: var(--o-spacing-h2);
   background-color: var(--o-color-bg);
   --o-color-table: #dfe1e8; // 表格边框
 
+  ol,
+  ul {
+    list-style: inherit;
+  }
+
   h1,
   h2,
   h3,
@@ -21,38 +26,38 @@
   }
 
   hr {
-    margin: var(--o-spacing-l) var(--o-spacing-l);
+    margin: var(--o-spacing-h1) var(--o-spacing-h1);
     border: none;
     height: 1px;
     background-color: var(--o-color-bg4);
   }
 
   h1 {
-    margin-top: var(--o-spacing-l);
+    margin-top: var(--o-spacing-h1);
     font-size: var(--o-font-size-h3);
     line-height: var(--o-line-height-h3);
   }
 
   h2 {
-    margin-top: var(--o-spacing-m);
+    margin-top: var(--o-spacing-h2);
     font-size: var(--o-font-size-h5);
     line-height: var(--o-line-height-h5);
   }
 
   h3 {
-    margin-top: var(--o-spacing-m);
+    margin-top: var(--o-spacing-h2);
     font-size: var(--o-font-size-h7);
     line-height: var(--o-line-height-h8);
   }
 
   h4 {
-    margin-top: var(--o-spacing-s2);
+    margin-top: var(--o-spacing-h5);
     font-size: var(--o-font-size-h8);
     line-height: var(--o-font-size-h6);
   }
 
   h5 {
-    margin-top: var(--o-spacing-s2);
+    margin-top: var(--o-spacing-h5);
     font-size: var(--o-font-size-text);
     line-height: var(--o-font-size-h6);
   }
@@ -60,7 +65,7 @@
   p,
   ul,
   ol {
-    margin-top: var(--o-spacing-s1);
+    margin-top: var(--o-spacing-h8);
     font-size: var(--o-font-size-text);
     font-weight: normal;
     color: var(--o-color-text3);
@@ -109,7 +114,7 @@
   }
 
   div[class*="language-"] {
-    margin-bottom: var(--o-spacing-s3);
+    margin-bottom: var(--o-spacing-h4);
     border: 1px solid rgba(151, 151, 151, 1);
     border-radius: 0;
 
@@ -121,8 +126,6 @@
       padding: 1em;
       margin: .5em 0;
       overflow: auto;
-
-      code {}
     }
   }
 
diff --git a/app/.vitepress/src/shared/styles/style.scss b/app/.vitepress/src/shared/styles/style.scss
index 23ea7bf33c4338cf1c22d9341a61495f9b245ae3..8fa8071f9f9878719d7ef9ee7274420a953a078b 100644
--- a/app/.vitepress/src/shared/styles/style.scss
+++ b/app/.vitepress/src/shared/styles/style.scss
@@ -1,13 +1,13 @@
-body {
-  background: var(--o-color-bg2);
-}
-.wrapper {
-  max-width: 1504px;
-  padding: 0 44px;
-  margin: 0 auto;
-  height: calc(100vh - 80px - 405px);
-  @media (max-width: 1100px) {
-    padding: 0 16px;
-    height: 48px;
-  }
-}
+body {
+  background: var(--o-color-bg2);
+}
+.wrapper {
+  max-width: 1504px;
+  padding: 0 44px;
+  margin: 0 auto;
+  min-height: calc(100vh - 80px - 405px);
+  @media (max-width: 1100px) {
+    padding: 0 16px;
+    height: 48px;
+  }
+}
diff --git a/app/.vitepress/src/shared/utils.ts b/app/.vitepress/src/shared/utils.ts
index 4939c26226a1903f379b157dfab3ca0e22244250..baa3effbdf500e0281b3049db2b8ac0782f9da0d 100644
--- a/app/.vitepress/src/shared/utils.ts
+++ b/app/.vitepress/src/shared/utils.ts
@@ -6,3 +6,10 @@ export function formatNumber(num: number) {
     ? `${(num / 1e4).toFixed(1)}W`
     : num;
 }
+// TS 对象key合法检查
+export function isValidKey(
+  key: string | number | symbol,
+  object: object
+): key is keyof typeof object {
+  return key in object;
+}
diff --git a/app/.vitepress/src/views/TheDemo.vue b/app/.vitepress/src/views/TheDemo.vue
index b6d6570a78f398d62f35fbc5ff49db53090a93de..1b100bfa359a617bd31c9eaa43fef1aeee6e6e95 100644
--- a/app/.vitepress/src/views/TheDemo.vue
+++ b/app/.vitepress/src/views/TheDemo.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import { getMeetingData } from '@/api/api-calendar';
+import { TableData } from '@/shared/@types/type-calendar';
+
 import BannerLevel2 from '@/components/BannerLevel2.vue';
 import BannerLevel3 from '@/components/BannerLevel3.vue';
+import AppCalendar from '@/components/AppCalendar.vue';
 
 import banner from '@/assets/banner-secondary.png';
 import search from '@/assets/illustrations/search.png';
@@ -36,6 +40,30 @@ const tableData = [
 ];
 
 const inputName = ref('zhangsan');
+interface MeetingData {
+  tableData: TableData[];
+}
+getMeetingData().then((res: MeetingData) => {
+  calendarData.value = res.tableData;
+});
+
+const calendarData = ref<TableData[]>([
+  {
+    date: '',
+    timeData: [
+      {
+        creator: '',
+        duration_time: '',
+        join_url: '',
+        startTime: '',
+        start_date: '',
+        endTiem: '',
+        url: '',
+        id: '',
+      },
+    ],
+  },
+]);
 </script>
 
 <template>
@@ -46,6 +74,11 @@ const inputName = ref('zhangsan');
         <OTableColumn label="Date" prop="date" width="180" />
         <OTableColumn prop="name" label="Name" width="180" />
         <OTableColumn prop="address" label="Address" />
+        <OTableColumn label="Date" prop="date">
+          <template #default="scope">
+            <div>{{ scope.row.date }}</div>
+          </template>
+        </OTableColumn>
       </OTable>
     </div>
 
@@ -100,6 +133,8 @@ const inputName = ref('zhangsan');
       :right-arrow="true"
       :left-arrow="true"
     ></OTimeline>
+    <h4>日历</h4>
+    <AppCalendar v-if="calendarData.length > 1" :table-data="calendarData" />
   </div>
 </template>
 
diff --git a/app/.vitepress/src/views/download/TheDownload.vue b/app/.vitepress/src/views/download/TheDownload.vue
index 3d38c0dbc5ec67569e5d6166ac4ec0cbe594c32c..fed3ebc33463a06011d5f51084d6228973987be1 100644
--- a/app/.vitepress/src/views/download/TheDownload.vue
+++ b/app/.vitepress/src/views/download/TheDownload.vue
@@ -133,7 +133,7 @@ const urlStyle = computed(() => {
     justify-items: center;
     align-items: center;
     grid-template-columns: repeat(3, 1fr);
-    grid-gap: var(--o-spacing-s3);
+    grid-gap: var(--o-spacing-h4);
     &-item {
       width: 100%;
       max-width: 456px;
@@ -148,7 +148,7 @@ const urlStyle = computed(() => {
   }
 
   &-desc {
-    margin-top: var(--o-spacing-s2);
+    margin-top: var(--o-spacing-h5);
     font-size: var(--o-font-size-text);
     font-family: 'PingFangSC-Regular, PingFang SC';
     color: var(--o-color-text3);
@@ -162,13 +162,13 @@ const urlStyle = computed(() => {
   }
 
   &-button {
-    margin-top: var(--o-spacing-s3);
+    margin-top: var(--o-spacing-h4);
     padding: 4px 16px;
     line-height: var(--o-line-height-h8);
     font-size: var(--o-font-size-text);
 
     &-icon {
-      margin-left: var(--o-spacing-s1);
+      margin-left: var(--o-spacing-h8);
       width: var(--o-font-size-tip);
       height: var(--o-font-size-tip);
       color: var(--o-color-text);
diff --git a/app/.vitepress/src/views/download/TheMirList.vue b/app/.vitepress/src/views/download/TheMirList.vue
index 94412928e098fd47d653f951e39a31b410aec14c..46ba83eddc2a668d5161182e3c4f356a9753c5f4 100644
--- a/app/.vitepress/src/views/download/TheMirList.vue
+++ b/app/.vitepress/src/views/download/TheMirList.vue
@@ -185,12 +185,12 @@ onMounted(async () => {
   }
   &-header:first-child {
     .cell {
-      padding-left: var(--o-spacing-m);
+      padding-left: var(--o-spacing-h2);
     }
   }
   &-header:last-child {
     .cell {
-      padding-right: var(--o-spacing-m);
+      padding-right: var(--o-spacing-h2);
     }
   }
 
@@ -216,12 +216,12 @@ onMounted(async () => {
   }
   &-row:first-child {
     .cell {
-      padding-left: var(--o-spacing-m);
+      padding-left: var(--o-spacing-h2);
     }
   }
   &-row:last-child {
     .cell {
-      padding-right: var(--o-spacing-m);
+      padding-right: var(--o-spacing-h2);
     }
   }
 }
diff --git a/app/.vitepress/src/views/security/TheSafetyBulletin.vue b/app/.vitepress/src/views/security/TheSafetyBulletin.vue
index d98f2e5f1bb7727b24f7a5ee3a73e880e31f329a..c3cd529db7d5c515d467ef94b24af47016c7624d 100644
--- a/app/.vitepress/src/views/security/TheSafetyBulletin.vue
+++ b/app/.vitepress/src/views/security/TheSafetyBulletin.vue
@@ -1,28 +1,180 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { TabsPaneContext } from 'element-plus';
-
-const activeName = ref('first');
-
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  alert(tab, event);
-};
-</script>
-
-<template>
-  <div class="wrapper">
-    <OTabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane label="User" name="first">User</el-tab-pane>
-      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
-      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
-      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
-    </OTabs>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.bisheng-info {
-  display: flex;
-  justify-content: space-between;
-}
-</style>
+<script lang="ts" setup>
+import { reactive, ref, watch } from 'vue';
+
+import BannerLevel2 from '@/components/BannerLevel2.vue';
+
+import banner from '@/assets/banner-secondary.png';
+import search from '@/assets/illustrations/search.png';
+import IconSearch from '~icons/app/icon-search.svg';
+
+import { getSecurityList } from '@/api/api-security';
+import { useData } from 'vitepress';
+
+const { theme: i18n } = useData();
+const inputName = ref('');
+const total = ref(0);
+const layout = ref('sizes, prev, pager, next, slot, jumper');
+
+interface query {
+  page: number;
+  pageSize: number;
+}
+
+interface securityLists {
+  affectedComponent: string;
+  affectedProduct: string;
+  announcementTime: string;
+  securityNoticeNo: string;
+  summary: string;
+  type: string;
+}
+
+const tableData = ref<securityLists[]>([
+  {
+    affectedComponent: '',
+    affectedProduct: '',
+    announcementTime: '',
+    securityNoticeNo: '',
+    summary: '',
+    type: '',
+  },
+]);
+
+const queryData: query = reactive({
+  page: 1,
+  pageSize: 10,
+});
+
+function getSecurityLists(data) {
+  try {
+    getSecurityList(data).then((res: any) => {
+      tableData.value = res.result.securityNoticeList;
+      total.value = res.result.totalCount;
+    });
+  } catch (e) {}
+}
+getSecurityLists(queryData);
+
+const handleSizeChange = (val: number) => {
+  queryData.pageSize = val;
+};
+const handleCurrentChange = (val: number) => {
+  queryData.page = val;
+};
+watch(queryData, () =>
+  getSecurityLists({
+    pages: { page: queryData.page, size: queryData.pageSize },
+  })
+);
+</script>
+
+<template>
+  <div class="wrapper">
+    <BannerLevel2
+      :background-image="banner"
+      background-text="CONTENT"
+      :title="i18n.security.SECURITY_ADVISORIES"
+      subtitle=""
+      :illustration="search"
+    />
+    <OInput
+      v-model="inputName"
+      :prefix-icon="IconSearch"
+      :placeholder="i18n.security.SEARCH"
+      style="margin-top: 64px; height: 48px"
+    ></OInput>
+    <OCard class="filter-card">
+      <template #header>
+        <div class="card-header">
+          <span class="category">{{ i18n.security.SEVERITY }}</span>
+          <span
+            v-for="item in i18n.security.SEVERITY_LIST"
+            :key="item"
+            class="category-item"
+            >{{ item.NAME }}</span
+          >
+        </div>
+      </template>
+      <div class="card-body">
+        <span class="category">{{ i18n.security.YEAR }}</span>
+        <span class="category-item">2021</span>
+      </div>
+    </OCard>
+    <OTable :data="tableData" style="width: 100%">
+      <OTableColumn
+        :label="i18n.security.ADVISORY"
+        prop="securityNoticeNo"
+      ></OTableColumn>
+      <OTableColumn
+        :label="i18n.security.SYNOPSIS"
+        prop="summary"
+      ></OTableColumn>
+      <OTableColumn
+        :label="i18n.security.SEVERITY"
+        prop="type"
+        width="140"
+      ></OTableColumn>
+      <OTableColumn
+        :label="i18n.security.AFFECTED_PRODUCTS"
+        prop="affectedProduct"
+      ></OTableColumn>
+      <OTableColumn
+        :label="i18n.security.AFFECTED_COMPONENTS"
+        prop="affectedComponent"
+        width="200"
+      ></OTableColumn>
+      <OTableColumn
+        :label="i18n.security.RELEASE_DATE"
+        prop="announcementTime"
+        width="160"
+      ></OTableColumn>
+    </OTable>
+    <OPagination
+      class="pagination"
+      :background="true"
+      v-model:page-size="queryData.pageSize"
+      v-model:currentPage="queryData.page"
+      :page-sizes="[10, 20, 40, 80]"
+      :layout="layout"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    >
+      <span>5/20</span>
+    </OPagination>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.filter-card {
+  margin: var(--o-spacing-s3) 0;
+  .category {
+    display: inline-block;
+    width: 56px;
+    font-size: var(--o-font-size-text);
+    font-weight: 400;
+    color: var(--o-color-text2);
+    line-height: var(--o-line-height-text);
+  }
+  .category-item {
+    width: 28px;
+    font-size: var(--o-font-size-text);
+    font-weight: 400;
+    color: var(--o-color-text3);
+    line-height: var(--o-line-height-text);
+    margin-left: var(--o-spacing-s4);
+  }
+  .card-header {
+    padding-bottom: 19px;
+    border-bottom: 1px solid #ccc;
+  }
+  .card-body {
+    padding-top: 19px;
+  }
+}
+.pagination {
+  margin: var(--o-spacing-m) 0 var(--o-spacing-l) 0;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+</style>
diff --git a/app/.vitepress/src/views/sig/sig-detail/BreadCrumbs.vue b/app/.vitepress/src/views/sig/sig-detail/BreadCrumbs.vue
index 4df13ab286d68824a5fbbbdc2381c3629a895dd1..968ae9fcf3572fe3e5c3b70c57b161485a1d950e 100644
--- a/app/.vitepress/src/views/sig/sig-detail/BreadCrumbs.vue
+++ b/app/.vitepress/src/views/sig/sig-detail/BreadCrumbs.vue
@@ -13,7 +13,7 @@ import IconArrowRight from '~icons/app/right.svg';
 <style lang="scss" scoped>
 .bread-crumbs {
   width: 1120px;
-  padding: var(--o-spacing-m) 0;
+  padding: var(--o-spacing-h2) 0;
   font-size: var(--o-font-size-tip);
   line-height: var(--o-line-height-tip);
   display: flex;
diff --git a/app/.vitepress/src/views/sig/sig-detail/SigDetail.vue b/app/.vitepress/src/views/sig/sig-detail/SigDetail.vue
index 2f86c63d00e33e1cce3bf88a9065c3d17de045c3..51166df8c9f6b4d41547e23639e7428fec811066 100644
--- a/app/.vitepress/src/views/sig/sig-detail/SigDetail.vue
+++ b/app/.vitepress/src/views/sig/sig-detail/SigDetail.vue
@@ -96,7 +96,7 @@ import IconArrowRight from '~icons/app/right.svg';
   margin: 0 auto;
   .content {
     width: 100%;
-    padding: var(--o-spacing-m);
+    padding: var(--o-spacing-h2);
     background-color: var(--o-color-bg);
     h3 {
       font-size: var(--o-font-size-h3);
@@ -105,35 +105,35 @@ import IconArrowRight from '~icons/app/right.svg';
       font-weight: 500;
     }
     .brief-introduction {
-      margin-top: var(--o-spacing-m);
+      margin-top: var(--o-spacing-h2);
       h4 {
         font-size: var(--o-font-size-h5);
         line-height: var(--o-line-height-h5);
         color: var(--o-color-text2);
       }
       p {
-        margin-top: var(--o-spacing-s2);
+        margin-top: var(--o-spacing-h5);
         font-size: var(--o-font-size-text);
         line-height: 22px;
         color: var(--o-color-text3);
       }
     }
     .meeting {
-      margin-top: var(--o-spacing-m);
+      margin-top: var(--o-spacing-h2);
       color: var(--o-color-text2);
       h5 {
         font-size: var(--o-font-size-h6);
         line-height: var(--o-line-height-h6);
       }
       .schedule {
-        margin-top: var(--o-spacing-s3);
+        margin-top: var(--o-spacing-h4);
         .calendar {
           width: 448px;
         }
       }
     }
     .member {
-      margin-top: var(--o-spacing-m);
+      margin-top: var(--o-spacing-h2);
       color: var(--o-color-text2);
       h5 {
         font-size: var(--o-font-size-h6);
@@ -141,12 +141,12 @@ import IconArrowRight from '~icons/app/right.svg';
       }
       ul {
         display: flex;
-        margin-top: var(--o-spacing-s3);
+        margin-top: var(--o-spacing-h4);
         li {
           text-align: center;
           margin-right: 72px;
           .name {
-            margin-top: var(--o-spacing-s2);
+            margin-top: var(--o-spacing-h5);
             font-size: var(--o-font-size-h8);
             line-height: var(--o-line-height-h8);
           }
@@ -158,7 +158,7 @@ import IconArrowRight from '~icons/app/right.svg';
       }
     }
     .recent-event {
-      margin-top: var(--o-spacing-m);
+      margin-top: var(--o-spacing-h2);
       color: var(--o-color-text2);
       h5 {
         font-size: var(--o-font-size-h6);
@@ -169,7 +169,7 @@ import IconArrowRight from '~icons/app/right.svg';
         width: 100%;
         grid-template-columns: repeat(2, 1fr);
         grid-gap: 24px;
-        margin-top: var(--o-spacing-s3);
+        margin-top: var(--o-spacing-h4);
         .item {
           max-width: 656px;
           padding: 40px;
@@ -197,7 +197,7 @@ import IconArrowRight from '~icons/app/right.svg';
               cursor: pointer;
               .icon-more {
                 font-size: var(--o-font-size-h8);
-                margin-left: var(--o-spacing-s1);
+                margin-left: var(--o-spacing-h8);
                 position: relative;
                 top: 2px;
                 color: var(--o-color-brand);
@@ -205,7 +205,7 @@ import IconArrowRight from '~icons/app/right.svg';
             }
           }
           .body {
-            margin-top: var(--o-spacing-s3);
+            margin-top: var(--o-spacing-h4);
             font-size: var(--o-font-size-text);
             line-height: 22px;
           }
diff --git a/app/.vitepress/src/views/sig/sig-list/SigList.vue b/app/.vitepress/src/views/sig/sig-list/SigList.vue
index c251696e5a329cb84d463b77635397852af1302d..6800066ddfa437997a5ba422515d6588a02d04d3 100644
--- a/app/.vitepress/src/views/sig/sig-list/SigList.vue
+++ b/app/.vitepress/src/views/sig/sig-list/SigList.vue
@@ -50,18 +50,39 @@ const { theme: i18n } = useData();
   </main>
 </template>
 <style lang="scss" scoped>
-.sig-ul {
-  font-size: var(--o-font-size-text);
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  line-height: var(--o-line-height-h8);
-  color: var(--o-color-text2);
-  max-width: 1380px;
-  margin: var(--o-spacing-l) auto;
-  ul {
-    list-style: disc;
-    li {
-      margin-top: var(--o-spacing-s1);
+.sig-list {
+  max-width: 1504px;
+  margin: 0 auto;
+  .list-table {
+    width: 100%;
+    padding: var(--o-spacing-h2);
+    background-color: var(--o-color-bg);
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      thead {
+        background-color: var(--o-color-bg3);
+        th {
+          height: 54px;
+          border: none !important;
+          text-align: left;
+          &:nth-of-type(1) {
+            width: 300px;
+            padding-left: var(--o-spacing-h2);
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            height: 54px;
+            &:nth-of-type(1) {
+              width: 300px;
+              padding-left: var(--o-spacing-h2);
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/app/en/other/privacy/index.md b/app/en/other/privacy/index.md
index 4d9c8d0b642b5330f8a9815ec3e61e580e0ba71b..11e4720380e66f984c22acedc5226ff720bd2479 100644
--- a/app/en/other/privacy/index.md
+++ b/app/en/other/privacy/index.md
@@ -1,9 +1,10 @@
 ---
 title: "Privacy"
-doc: true
-tags: privacy
+module: privacy
 ---
 
+<div class='markdown'>
+
 The openEuler Community ("Community") understands the importance of your privacy and fully respects it. <u>**Please read this openEuler Community Privacy Statement ("Statement") carefully before you submit your personal data to us.**</u> If you have any questions about how we process your personal data, please feel free to contact us. Unless otherwise specified, "we" and "us" in this Statement refers to the Community.
 
 ## 1. How We Collect and Process Your Personal Data
@@ -100,3 +101,5 @@ We may update this Statement from time to time according to changes of our servi
 If you want to contact us or exercise your rights, please contact us at <contact@openeuler.io>.
 
 Last updated: May, 2022
+
+</div>
diff --git a/app/index.md b/app/index.md
index c6ea6ec9de7ec02b452577e485bfa9bd88543766..7b2e106bc9b11077a581f46f51787f93d60ba40c 100644
--- a/app/index.md
+++ b/app/index.md
@@ -3,3 +3,4 @@
 </script>
 
 <TheDemo />
+
diff --git a/app/ru/other/privacy/index.md b/app/ru/other/privacy/index.md
index a6cf4280af31cdbcf2f250607908c14519397652..66c25461cee74c020c260d3f728951770ff249cf 100644
--- a/app/ru/other/privacy/index.md
+++ b/app/ru/other/privacy/index.md
@@ -1,9 +1,9 @@
 ---
 title: "Конфиденциальность"
-doc: true
-tags: privacy
+module: privacy
 ---
 
+<div class='markdown'>
 
 Сообщество openEuler понимает важность сохранения конфиденциальности ваших данных и соблюдает ее. <u>**Внимательно прочтите настоящее Уведомление о конфиденциальности сообщества openEuler («Уведомление»), прежде чем отправите нам свои персональные данные.**</u>Если у вас возникли вопросы о том, как мы обрабатываем ваши персональные данные, свяжитесь с нами. Если не указано иное, «мы» и «наш» в настоящем Уведомлении относятся к сообществу openEuler.
 
@@ -64,3 +64,5 @@ tags: privacy
 Если вы хотите связаться с нами или осуществить свои права, свяжитесь с нами по **<contact@openeuler.io>**.
 
 <br><br>Обновлено: июнь 2021 г.
+
+</div>
diff --git a/app/vite.config.js b/app/vite.config.js
index d4411377e1cadd7d795f7d7c8004e905900f1a5c..a35e0e66c4dcd08b79fbb298eb61cb8c61367871 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -53,10 +53,15 @@ export default defineConfig({
   ],
   server: {
     proxy: {
-      '/api-mirror': {
-        target: 'https://api.openeuler.org/mirrors',
+      '/api': {
+        target: 'https://api.openeuler.org',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api-mirror/, ''),
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+      '/api-cve': {
+        target: 'https://www.openeuler.org/api-cve',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api-cve/, ''),
       },
     },
   },
diff --git a/app/zh/other/privacy/index.md b/app/zh/other/privacy/index.md
index cc63e7dc4fb906c752fa8a104e1561b999987892..8f088447b43cc5c975f121092e8f99cef5b49915 100644
--- a/app/zh/other/privacy/index.md
+++ b/app/zh/other/privacy/index.md
@@ -1,12 +1,12 @@
 ---
 title: "隐私政策"
-doc: true
-tags: privacy
+module: privacy
 ---
 <!--  TODO: BANNER -->
 <script setup>
 </script>
 
+<div class='markdown'>
 
 我们深知您的隐私对您的重要性，并充分尊重您的隐私。<u>**在向我们提交您的个人信息之前，请您仔细阅读本《隐私政策声明》（以下简称“本声明”）。**</u>如果您对于我们处理您的个人信息的方式有任何疑问，欢迎与我们联系。除非另有约定，本声明中的“我们”是指**openEuler**社区。
 
@@ -75,3 +75,5 @@ tags: privacy
 如果您想联系我们或行使您的相关权利，请通过以下方式与我们联系： **<contact@openeuler.io>**
 
 <br><br>最近更新时间：**2022**年**3**月
+
+</div>
diff --git a/app/zh/security/vulnerability-reporting/index.md b/app/zh/security/vulnerability-reporting/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..b6f9f638634db2cfb8af03e19f88d6eec661edc0
--- /dev/null
+++ b/app/zh/security/vulnerability-reporting/index.md
@@ -0,0 +1,171 @@
+---
+title: '漏洞管理'
+---
+
+<script setup>
+import { withBase  } from 'vitepress';
+import BannerLevel2 from '@/components/BannerLevel2.vue'
+import banner from '@/assets/banner-secondary.png';
+import illustration from '@/assets/illustrations/search.png';
+</script>
+
+<BannerLevel2
+class="app-header"
+  :background-image="banner"
+  background-text="SIG"
+  title="角色说明"
+  :illustration="illustration"
+/>
+
+<div class="markdown">
+
+## 漏洞响应
+
+openEuler 社区非常重视社区版本的安全性，openEuler 安全委员会负责接收、调查和披露 openEuler 社区相关的安全漏洞。我们鼓励漏洞研究人员和行业组织主动将 openEuler 社区的疑似安全漏洞报告给 openEuler 社区安全委员会。我们会快速的响应、分析和解决上报的安全问题或安全漏洞。
+
+## 支持版本
+
+漏洞响应流程主要支持 openEuler 社区的 LTS 发行版和其分支版本。
+
+## 漏洞处理流程
+
+每个一个安全漏洞都会有一个指定的人员进行跟踪和处理，协调员是 openEuler 安全委员会的成员，他将负责跟踪和推动漏洞的修复和披露。漏洞端到端的处理流程如下图。
+
+<img class="pc" src="./procedure(zh).png" width="100%" style="max-width:1079px" />
+<!-- <img class="mobile" src="./procedure(zh)-mobile.png" width="100%" style="max-width:1079px" /> -->
+
+在这里我们主要介绍流程中漏洞上报、漏洞评估和漏洞披露这三部分内容。
+
+## 漏洞上报
+
+如果您认为 openEuler 产品存在一个疑似安全漏洞，我们希望您将漏洞上报给 openEuler 社区，并与我们配合以负责任的方式修复和披露该问题。
+
+## 漏洞上报方式
+
+您可以通过email将openEuler产品的潜在安全漏洞发送到openEuler安全团队邮箱（<openeuler-security@openeuler.org>）。因为漏洞信息比较敏感，建议您使用安全团队邮箱<a :href="withBase('/vulnerability-reporting/public_key_openeuler_security.asc')" download>PGP公钥</a>对邮件信息进行加密。
+安全团队成员信息如下：
+
++ 刘金刚[@liujingang09]，<liujingang09@huawei.com>, <a :href="withBase('/vulnerability-reporting/public_key_liujingang.asc')" download>PGP公钥</a>。
+
++ 颜小兵[@yanxiaobing2020]，<yanxiaobing@huawei.com>, <a :href="withBase('/vulnerability-reporting/public_key_yanxiaobing.asc')" download>PGP公钥</a>。
+
++ 朱健伟[@zhujianwei001]，<zhujianwei7@huawei.com>, <a :href="withBase('/vulnerability-reporting/public_key_zhujianwei.asc')" download>PGP公钥</a>。
+
++ 魏刚[@gwei3]，<11015100@qq.com>，<a :href="withBase('/vulnerability-reporting/public_key_weigang.asc')" download>PGP公钥</a>。
+
++ 崔雷[@kylincuilei]，<cuilei@kylinos.cn>。
+
+## 漏洞上报内容
+
+为了便于快速的确认和验证疑似漏洞，请在漏洞上报邮件中包含但不限于以下内容：
+
+- 基本信息：包括漏洞影响的模块、漏洞的触发条件和成功利用后对系统的影响等。
+
+- 技术细节：包括系统配置、定位方法、Exploit 的描述、POC、问题重现方法和步骤等。
+
+- 修复方案建议。
+
+- 上报者的组织和联系方式。
+
+- 上报者可能的漏洞披露计划。
+
+## 邮件响应时间
+
+我们将在 48 小时内响应通过邮箱上报的疑似安全漏洞，并向上报者反馈漏洞处理的进展。
+
+## 漏洞严重性评估
+
+业界普遍使用 CVSS 标准评估漏洞的严重性，openEuler 在使用 CVSSv3 进行漏洞评估时，需要设定漏洞攻击场景，基于在该攻击场景下的实际影响进行评估。漏洞严重等级评估是指针对漏洞利用难易程度，以及利用后对机密性、完整性、可用性的影响进行评估，并生成一个评分值。
+
+## 评估标准
+
+openEuler 社区采用 CVSS v3 对漏洞进行评估，CVSS V3 由通过对以下向量来评估一个漏洞的影响：
+
+- 攻击向量（AV）-表示攻击的“远程性”以及如何利用此漏洞。
+
+- 攻击复杂性（AC）-讲述攻击执行的难度以及成功进行攻击需要哪些因素。
+
+- 用户交互（UI）-确定攻击是否需要用户参与。
+
+- 所需的权限（PR）-记录成功进行攻击所需的用户身份验证级别。
+
+- 范围（S）-确定攻击者是否可以影响具有不同权限级别的组件。
+
+- 机密性（C）-衡量信息泄露给非授权方后导致的影响程度。
+
+- 完整性（I）-衡量信息被篡改后导致的影响程度。
+
+- 可用性（A）-衡量用户在需要访问数据或服务时受影响的程度。
+
+## 评估原则
+
+- 评估漏洞的严重等级，不是评估风险。
+
+- 评估时必须基于攻击场景，且保证在该场景下，攻击者成功攻击后能对系统造成机密性、完整性、可用性影响。
+
+- 当安全漏洞有多个攻击场景时，应以造成最大的影响，即 CVSS 评分最高的攻击场景为依据。
+
+- 被嵌入调用的库存在漏洞，要根据该库在产品中的使用方式，确定漏洞的攻击场景后进行评估。
+
+- 安全缺陷不能被触发或不影响 CIA(机密性/完整性/可用性)，CVSS 评分为 0 分。
+
+## 评估步骤
+
+对漏洞进行评估时，可根据下述步骤进行操作：
+
+- 设定可能的攻击场景，基于攻击场景评分。
+
+- 确定漏洞组件（Vulnerable Component）和受影响组件（Impact Component）。
+
+- 选择基础评估指标的值：通过对可利用指标（攻击向量/攻击复杂度/所需权限/用户交互/范围）和受影响指标（机密性/完整性/可用性）给出漏洞影响评估。
+
+## 严重等级划分
+
+ <table board="2" class="table table-bordered table-striped">     
+      <thead>
+          <tr>
+              <th align="left" style="width:40px">严重等级（Severity Rating）</th>
+              <th align="left" style="width:40px">CVSS评分（Score）</th>
+          </tr>
+          <tr>
+              <td align="left">致命（Critical）</td>
+              <td>9.0 - 10.0</td>
+          </tr>
+          <tr>
+              <td align="left">高（High）</td>
+              <td>7.0 - 8.9</td>
+          </tr>
+           <tr>
+              <td align="left">中（Medium）</td>
+              <td>4.0 - 6.9</td>
+          </tr>
+          <tr>
+              <td align="left">低（Low）</td>
+              <td>0.1 - 3.9</td>
+          </tr>
+          <tr>
+              <td align="left">无（None）</td>
+              <td>0.0</td>              
+          </tr>          
+      </thead>      
+  </table>
+
+## 和 NVD 评估分数差异说明
+
+CVSS 基础评分与受影响组件的版本号，提供和使用的方式，平台以及软件的编译方式相关，NVD 评分考虑了漏洞被利用的所有场景，而 openEuler 是基于上游社区自己构建的，主要应用于服务器场景，所以对于 openEuler 开源产品来说，直接采用 NVD 评分是不合适的，因此 openEuler 对所有受影响的 CVE 有自己的评分，存在打分和 NVD 不同的情况。
+
+## 漏洞披露
+
+为了保护 openEuler 用户的安全，在进行调查、修复和发布安全公告之前，openEuler 社区不会公开披露、讨论或确认 openEuler 产品的安全问题。安全漏洞修复后 openEuler 社区会发布安全公告，安全公告内容包括该漏洞的技术细节、CVE 编号、CVSS 安全评分、严重性等级以及受到该漏洞影响的版本和修复版本等信息。安全公告提供邮件订阅功能，您可以通过“[sa-announce](https://mailweb.openeuler.org/postorius/lists/sa-announce.openeuler.org/)"链接订阅 openEuler 社区的安全公告。我们也提供 CVRF 格式的安全公告，可通过"[CVRF 文档](https://repo.openeuler.org/security/data/cvrf/)"链接获取。
+
+</div>
+
+<style lang="scss" scoped>
+.table-striped{
+    margin-top: 20px;
+   td,
+   th{
+    padding: 16px 0 16px 37px;
+   }
+}
+</style>
diff --git a/app/zh/security/vulnerability-reporting/procedure(zh).png b/app/zh/security/vulnerability-reporting/procedure(zh).png
new file mode 100644
index 0000000000000000000000000000000000000000..6af1336c25c8273d65551d69f95b04fdafd18b84
Binary files /dev/null and b/app/zh/security/vulnerability-reporting/procedure(zh).png differ
diff --git a/deploy/nginx/nginx.conf b/deploy/nginx/nginx.conf
new file mode 100644
index 0000000000000000000000000000000000000000..019d33d4a09e71e7c2cb1edf9b98f1275376c9f3
--- /dev/null
+++ b/deploy/nginx/nginx.conf
@@ -0,0 +1,97 @@
+worker_processes auto;
+
+error_log /var/log/nginx/error.log warn;
+
+pid /var/run/nginx.pid;
+
+worker_rlimit_nofile 4096;
+events {
+  use epoll;
+  worker_connections 4096;
+}
+
+http {
+  include /etc/nginx/mime.types;
+
+  log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+  '$status $body_bytes_sent "$http_referer" '
+  '"$http_user_agent" "$http_x_forwarded_for"';
+
+  access_log /var/log/nginx/access.log main;
+
+  autoindex off;
+  sendfile on;
+
+  keepalive_timeout 300;
+  keepalive_requests 100;
+  proxy_read_timeout 900;
+  proxy_connect_timeout 60;
+
+  proxy_send_timeout 60;
+  client_header_timeout 60;
+  client_header_buffer_size 1k;
+  large_client_header_buffers 4 64k;
+  client_body_buffer_size 16K;
+  client_body_timeout 60;
+  send_timeout 60;
+  server_tokens off;
+  port_in_redirect off;
+  limit_conn_zone $binary_remote_addr zone=conn_zone:10m;
+  limit_conn_zone $server_name zone=perserver:10m;
+  limit_req_zone global zone=req_zone:1m rate=1000r/s;
+  limit_req_zone $binary_remote_addr zone=event_zone:10m rate=20r/s;
+
+  proxy_request_buffering off;
+  client_max_body_size 50m;
+
+  gzip on;
+  gzip_min_length 1k;
+  gzip_buffers 4 16k;
+  gzip_http_version 1.0;
+  gzip_comp_level 5;
+  gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/javascript application/x-httpd-php application/json;
+  gzip_vary on;
+
+  server {
+    # listen 443 ssl;
+    # server_name localhost;
+    # charset utf-8;
+
+    listen 80;
+    charset utf-8;
+    limit_conn perserver 50;
+    if ($request_method = 'OPTIONS') {
+      return 401;
+    }
+
+    location / {
+      location /assets {
+        # publish every two weeks
+        expires 14d;
+        add_header Cache-Control public;
+      }
+      location / {
+        add_header Cache-Control no-cache;
+      }
+      root /usr/share/nginx/html;
+      index index.html;
+      #   error_page 404 /404.html;
+    }
+
+    error_page 500 501 502 503 504 505 /500.html;
+    error_page 401 /401.html;
+    error_page 404 /404.html;
+
+    location = /401.html {
+      root /usr/share/nginx/html;
+    }
+
+    location = /404.html {
+      root /usr/share/nginx/html;
+    }
+
+    location = /500.html {
+      root /usr/share/nginx/html;
+    }
+  }
+}
\ No newline at end of file
diff --git a/opendesign/card/OCard.vue b/opendesign/card/OCard.vue
index d77b6f58d0132d3af5f704f3c342f33f4be36f62..6450daeb73988ef6fc9e5ca4c6530d1951d6ec70 100644
--- a/opendesign/card/OCard.vue
+++ b/opendesign/card/OCard.vue
@@ -5,7 +5,10 @@ const attrs = useAttrs();
 </script>
 
 <template>
-  <ElCard class="o-card" v-bind="attrs"><slot></slot></ElCard>
+  <ElCard class="o-card" v-bind="attrs">
+    <slot name="header"></slot>
+    <slot></slot>
+  </ElCard>
 </template>
 
 <style lang="scss">
diff --git a/opendesign/pagination/OPagination.vue b/opendesign/pagination/OPagination.vue
index aa11ca93de09bd6742e590c1c58a656b3f13125e..f16da991c54704b26587784d14eabc17c4e10a89 100644
--- a/opendesign/pagination/OPagination.vue
+++ b/opendesign/pagination/OPagination.vue
@@ -5,18 +5,26 @@ const attrs = useAttrs();
 </script>
 
 <template>
-  <ElPagination class="o-pagination" v-bind="attrs">
+  <ElPagination popper-class="filter" class="o-pagination" v-bind="attrs">
     <slot></slot>
   </ElPagination>
 </template>
 
 <style lang="scss" scoped>
 .o-pagination {
+  --o-pagination-font-color: var(--o-color-base_inverse);
+  --o-pagination-font-color_active: var(--o-color-brand_active);
+  --o-pagination-bg-color: var(--o-color-brand_disabled);
+  --o-pagination-bg-color_hover: var(--o-color-brand_disabled);
+  --o-pagination-bg-color_selected: var(--o-color-brand_disabled);
+  --o-pagination-bg-color_disabled: var(--o-color-secondary);
+  --o-pagination-number-border-color_active: var(--o-color-brand);
+
   :deep.el-pagination {
-    --el-pagination-button-bg-color: var(--o-color-secondary);
+    --el-pagination-button-bg-color: var(--o-pagination-bg-color_disabled);
     .el-input {
-      --el-input-bg-color: var(--o-color-secondary);
-      --el-input-text-color: var(--o-color-base_inverse);
+      --el-input-bg-color: var(--o-pagination-bg-color_disabled);
+      --el-input-text-color: var(--o-pagination-font-color);
     }
     .el-input__wrapper {
       border-radius: 0px;
@@ -24,34 +32,40 @@ const attrs = useAttrs();
     }
     .el-select {
       --el-select-border-color-hover: none;
+      --el-select-input-focus-border-color: none;
       & .el-input .el-select__caret {
-        color: var(--o-color-base_inverse);
+        color: var(--o-pagination-font-color);
       }
     }
     .el-pager li {
-      color: var(--o-color-base_inverse);
+      color: var(--o-pagination-font-color);
       border-radius: 0px;
+      &:hover {
+        background-color: var(--o-color-brand_disabled);
+      }
     }
     .el-pager li.is-active.number {
       background: var(--o-color-brand_disabled);
       color: var(--o-color-brand_active);
+      border: 1px solid var(--o-color-brand);
       font-weight: 400;
       font-size: var(--o-font-size-text);
     }
     .btn-next,
     .btn-prev {
-      color: var(--o-color-base_inverse);
+      color: var(--o-pagination-font-color);
       border-radius: 0px;
       &:disabled {
-        background: var(--o-color-secondary);
+        background: var(--o-pagination-bg-color_disabled);
       }
     }
     .btn-next {
       margin-right: var(--o-spacing-s2);
     }
     .el-pagination__jump {
-      color: var(--o-color-secondary_active);
+      color: var(--o-color-base_inverse);
       border-radius: 0px;
+      margin-left: var(--o-spacing-s4);
     }
   }
 }
diff --git a/opendesign/style/variable.scss b/opendesign/style/variable.scss
index fc6c61ed6349b9c129631afaa208270241194ec8..a5377df02d351a269532e315afc0e6e58202ec6f 100644
--- a/opendesign/style/variable.scss
+++ b/opendesign/style/variable.scss
@@ -1,4 +1,5 @@
 @charset "UTF-8";
+
 :root {
   // 基础颜色
   --o-color-base: #ffffff; // 基础色
@@ -64,12 +65,16 @@
   --o-line-height-tip: 18px;
 
   // 间距
-  --o-spacing-l: 64px;
-  --o-spacing-m: 40px;
-  --o-spacing-s4: 32px;
-  --o-spacing-s3: 24px;
-  --o-spacing-s2: 16px;
-  --o-spacing-s1: 8px;
+  --o-spacing-h1: 64px;
+  --o-spacing-h2: 40px;
+  --o-spacing-h3: 32px;
+  --o-spacing-h4: 24px;
+  --o-spacing-h5: 16px;
+  --o-spacing-h6: 12px;
+  --o-spacing-h7: 10px;
+  --o-spacing-h8: 8px;
+  --o-spacing-h9: 6px;
+  --o-spacing-h10: 4px;
 
   // 阴影
   --o-shadow-base: 0px 1px 5px 0px rgba(45, 47, 51, 0.1); // 一级投影，应用场景：默认状态卡片、楼层、导航栏等
@@ -79,4 +84,4 @@
   --o-shadow-overlay: 0px 10px 32px rgba(45, 47, 31, 0.18); // 覆盖投影，应用场景：信息提示（tips，活动进入按钮等）
   --o-shadow-overlay_hover: 0px 10px 32px rgba(0, 47, 167, 0.18); // 覆盖投影hover态
   --o-shadow-pop: 0px 12px 42px rgba(45, 47, 31, 0.24); // 弹出层投影：应用场景：模态框弹窗
-}
+}
\ No newline at end of file