diff --git a/src/api/api-quick-issue.ts b/src/api/api-quick-issue.ts
index b5599f0c20ebc743aed060be2db2dcc4b734e220..e4fc47dbeab2abc9a428c3d0d9d44bed93ea67c6 100644
--- a/src/api/api-quick-issue.ts
+++ b/src/api/api-quick-issue.ts
@@ -13,11 +13,13 @@ export function getRepoIssue(params: IssueQueryData) {
   if (
     typeof params.label === 'object' &&
     typeof params.issue_state === 'object' &&
-    typeof params.exclusion === 'object'
+    typeof params.exclusion === 'object' &&
+    typeof params.milestone === 'object'
   ) {
     params.exclusion = params.exclusion.join(',');
     params.label = params.label.join(',');
     params.issue_state = params.issue_state.join(',');
+    params.milestone = params.milestone.join(',');
   }
   return request
     .get(url, { params })
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 4bb7e767ab49db926c39993c46e03a6af27165ee..7a64eb763134be3466e776ade0c731cadc15d1ac 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -12,7 +12,6 @@ import communityLogoWhite from '@/assets/openeuler-logo.png';
 import QuickIssueLogo from '@/assets/quickissue-logo.png';
 import IconDown from '~icons/app/icon-chevron-down.svg';
 import IconLogin from '~icons/app/icon-login.svg';
-import { router } from '@/routers';
 
 const { t, locale } = useI18n({ useScope: 'global' });
 
@@ -51,8 +50,9 @@ const handleCommand = (command: any): void => {
   const newHref = pathname.split('/');
   newHref[1] = command.value;
   useLangStore().setLangStore(command.value);
-  router.push(newHref.join('/'));
+  window.location.href = newHref.join('/');
 };
+
 watch(
   () => {
     return locale.value as string;
@@ -61,6 +61,7 @@ watch(
     useLangStore().setLangStore(val);
   }
 );
+
 const jumpToUserZone = () => {
   const language = lang.value === 'zh' ? 'zh' : 'en';
   const origin = import.meta.env.VITE_LOGIN_ORIGIN;
@@ -81,6 +82,7 @@ const jumpToUserZone = () => {
       <div class="out-box">
         <ONav :nav-items="navList"></ONav>
       </div>
+
       <div class="opt-user">
         <div v-if="token">
           <div class="opt-info">
@@ -90,7 +92,9 @@ const jumpToUserZone = () => {
               class="opt-img"
             />
             <div v-else class="opt-img"></div>
-            <p class="opt-name">{{ guardAuthClient.username }}</p>
+            <p class="opt-name" :title="guardAuthClient?.username">
+              {{ guardAuthClient.username }}
+            </p>
           </div>
           <ul class="menu-list">
             <li @click="jumpToUserZone()">{{ t('common.USER_CENTER') }}</li>
@@ -103,6 +107,13 @@ const jumpToUserZone = () => {
           </OIcon>
         </div>
       </div>
+      <a
+        href="https://github.com/opensourceways/issue_pr_board/blob/main/doc/apis.md"
+        class="api-docs"
+        target="_blank"
+      >
+        API
+      </a>
       <div class="language">
         <el-dropdown popper-class="language-change" @command="handleCommand">
           <span class="el-dropdown-link">
@@ -123,6 +134,7 @@ const jumpToUserZone = () => {
           </template>
         </el-dropdown>
       </div>
+
       <a :href="`/${lang}/new-issues/`" class="new-issue">
         <OButton>{{ t('quickIssue.SUBMIT_ISSUE') }} </OButton>
       </a>
@@ -154,7 +166,7 @@ const jumpToUserZone = () => {
     .language {
       display: flex;
       justify-content: flex-end;
-      margin-right: 48px;
+      margin-right: 40px;
       width: 100px;
       text-align: right;
       .el-dropdown {
@@ -170,6 +182,11 @@ const jumpToUserZone = () => {
         }
       }
     }
+    .api-docs {
+      margin-right: 40px;
+      font-size: var(--o-font-size-h8);
+      color: #fff;
+    }
   }
   &.isabout {
     background: #000;
diff --git a/src/components/ONav.vue b/src/components/ONav.vue
index 2b361c62caf9a3a201038715d9abcc111cc667d9..6d0a2767ac371098b80e85035cc956d5684b50de 100644
--- a/src/components/ONav.vue
+++ b/src/components/ONav.vue
@@ -23,8 +23,8 @@ const props = defineProps({
 const { navItems } = toRefs(props);
 const activeItem = ref(route.path);
 
-const navClick = (path: string) => {
-  router.push(path);
+const navClick = (path: string, windowOpen: boolean) => {
+  windowOpen ? window.open(path) : router.push(path);
 };
 watch(
   () => {
@@ -43,7 +43,7 @@ watch(
       :key="item.id"
       :class="[activeItem === item.link ? 'active' : '']"
       class="nav-item"
-      @click="navClick(item.link)"
+      @click="navClick(item.link, item.windowOpen)"
     >
       {{ item.label }}
     </div>
diff --git a/src/i18n/quick-issue/quick-issue-en.ts b/src/i18n/quick-issue/quick-issue-en.ts
index a89068e8fce2f1f9595d88892b93a77569b83efb..8c8154d9d2953850550bc172d3a622614d31afd7 100644
--- a/src/i18n/quick-issue/quick-issue-en.ts
+++ b/src/i18n/quick-issue/quick-issue-en.ts
@@ -20,6 +20,7 @@ export default {
   TYPE: 'Type',
   PRIORITY: 'Priority',
   SUBMITTER: 'Creator',
+  MILESTONE: 'Milestone',
   ASSIGNER: 'Assignees',
   LABEL: 'Labels',
   SELECT_LABEL: 'Include Labels',
diff --git a/src/i18n/quick-issue/quick-issue-zh.ts b/src/i18n/quick-issue/quick-issue-zh.ts
index 39511241038bba1cf20b85987daefbdbe719abec..a10bba7ed8b4e37fbfc9db8cf40ec8d2409ab32e 100644
--- a/src/i18n/quick-issue/quick-issue-zh.ts
+++ b/src/i18n/quick-issue/quick-issue-zh.ts
@@ -25,7 +25,7 @@ export default {
   SELECT_LABEL: '选择标签',
   BRANCH: '分支',
   RELATION_BRANCH: '关联分支',
-  MILEPOST: '里程碑',
+  MILESTONE: '里程碑',
   CREATED_AT: '提交时间',
   UPDATE_AT: '更新时间',
   CANCEL: '取消选项',
diff --git a/src/routers/index.ts b/src/routers/index.ts
index 14641e68f31270c2ac89841e756b2644019c142c..5c306a34571baab37da0e09923192766f70d2591 100644
--- a/src/routers/index.ts
+++ b/src/routers/index.ts
@@ -3,36 +3,22 @@ import { useLangStore } from '@/stores';
 
 export const routes: RouteRecordRaw[] = [
   { path: '/', redirect: '/zh/issues' },
-  // zh
   {
     path: '/zh/issues',
     name: 'issues',
+    alias: '/en/issues',
     component: () => import('@/views/TheQuickIssue.vue'),
   },
   {
     path: '/zh/pulls',
     name: 'pulls',
+    alias: '/en/pulls',
     component: () => import('@/views/pull-request/PullRequest.vue'),
   },
   {
     path: '/zh/new-issues',
     name: 'new-issues',
-    component: () => import('@/views/submit-issue/SubmitIssue.vue'),
-  },
-  // en
-  {
-    path: '/en/issues',
-    name: 'issues_en',
-    component: () => import('@/views/TheQuickIssue.vue'),
-  },
-  {
-    path: '/en/pulls',
-    name: 'pulls_en',
-    component: () => import('@/views/pull-request/PullRequest.vue'),
-  },
-  {
-    path: '/en/new-issues',
-    name: 'new-issues_en',
+    alias: '/en/new-issues',
     component: () => import('@/views/submit-issue/SubmitIssue.vue'),
   },
 ];
diff --git a/src/shared/@types/type-quick-issue.ts b/src/shared/@types/type-quick-issue.ts
index 4ccb663bf5c4b322a3f6a3dc0329c0465e3cc8c0..2eb93e9b1e0c5a8a179062cdc2d0830e40682eaa 100644
--- a/src/shared/@types/type-quick-issue.ts
+++ b/src/shared/@types/type-quick-issue.ts
@@ -13,6 +13,7 @@ export interface IssueQueryData {
   branch: string;
   repo: string;
   issue_state: Array<string> | string;
+  milestone: Array<string> | string;
 }
 
 export interface OptionList {
diff --git a/src/views/TheQuickIssue.vue b/src/views/TheQuickIssue.vue
index 923f0a4223525136de086a9e67d4b77eee6f2c4a..a1ab69e9380a3899677be2edb24521f96133acf2 100644
--- a/src/views/TheQuickIssue.vue
+++ b/src/views/TheQuickIssue.vue
@@ -54,6 +54,7 @@ const keyArr = [
   'reposList',
   'typesList',
   'exLabelsList',
+  'milestonesList',
 ];
 
 const filterList = ref(new Map());
@@ -126,6 +127,14 @@ const titleList = ref(
         }),
       },
     ],
+    [
+      'milestone',
+      {
+        value: computed(() => {
+          return t('quickIssue.MILESTONE');
+        }),
+      },
+    ],
     [
       'label',
       {
@@ -186,6 +195,7 @@ const queryData = reactive({
   branch: '',
   repo: '',
   issue_state: [],
+  milestone: [],
   exclusion: [],
 });
 
@@ -193,7 +203,6 @@ const optionQuery = reactive({
   page: 1,
   per_page: 40,
   keyword: '',
-  mode: 'local',
 });
 
 const handleTitleClick = (title: string) => {
@@ -354,6 +363,7 @@ onMounted(() => {
   getOption('branches');
   getOption('types');
   getOption('repos');
+  getOption('milestones');
 });
 watch(
   () => checkedTitle,
@@ -577,6 +587,70 @@ watch(
             </span>
           </template>
         </el-table-column>
+        <el-table-column
+          v-if="checkedTitle.includes('milestone')"
+          key="milestone"
+          min-width="200"
+        >
+          <template #header>
+            <span
+              :class="queryData.milestone.length ? 'active' : ''"
+              :title="queryData.milestone.join(', ')"
+              >{{
+                queryData.milestone.join(', ') || t('quickIssue.MILESTONE')
+              }}</span
+            >
+            <ODropdown
+              :max-height="250"
+              :listener-scorll="true"
+              @scorll-bottom="getNextPage"
+              @visible-change="(val: boolean) => visibleChange(val, 'milestones')"
+              @command="(val: string) => handleCommand(val, 'milestone')"
+            >
+              <OIcon
+                class="filter-icon"
+                :class="queryData.issue_state.length ? 'active' : ''"
+              >
+                <IconFilter></IconFilter>
+              </OIcon>
+              <template #dropdown>
+                <div class="search-box">
+                  <ODropdownItem
+                    v-if="queryData.milestone.length"
+                    :command="[]"
+                    >{{ t('quickIssue.CANCEL') }}</ODropdownItem
+                  >
+                  <OSearch
+                    v-model="filterList.get('milestonesList').keyword"
+                    :placeholder="t('quickIssue.SEARCH_PLACEHOLDER')"
+                    @input="valueChangeDebounced"
+                  ></OSearch>
+                </div>
+                <OCheckboxGroup
+                  v-if="filterList.get('milestonesList').data.length"
+                  v-model="queryData.milestone"
+                  @change="handleCheckedValueChange"
+                >
+                  <OCheckbox
+                    v-for="item in filterList.get('milestonesList').data"
+                    :key="item"
+                    :value="item"
+                  >
+                    {{ item }}
+                  </OCheckbox>
+                </OCheckboxGroup>
+                <ODropdownItem v-else disabled class="empty-option"
+                  >No Data</ODropdownItem
+                >
+              </template>
+            </ODropdown>
+          </template>
+          <template #default="scope">
+            <span class="detail-page">
+              {{ scope.row.milestone }}
+            </span>
+          </template>
+        </el-table-column>
         <el-table-column
           v-if="checkedTitle.includes('author')"
           key="author"
@@ -1303,13 +1377,13 @@ watch(
   .o-checkbox {
     display: flex;
     align-items: center;
-    margin: 5px 16px;
+    margin: 4px 8px;
   }
 
   .el-checkbox {
     display: flex;
     align-items: center;
-    margin: 5px 16px;
+    margin: 4px 8px;
     height: 22px;
 
     :deep(.el-checkbox__label) {