diff --git a/.env.production b/.env.production
index 418dc12b34809c827258bdb970ef0bd5940dcf12..a35287ba3f72332178b95e0c81599902834a8075 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,4 @@
 VITE_LOGIN_URL = https://id.openeuler.org
 VITE_XSRF_COOKIE_NAME = '_U_T_'
-VITE_XSRF_HEADER_NAME = 'Token'
\ No newline at end of file
+VITE_XSRF_HEADER_NAME = 'Token'
+VITE_COOKIE_DOMAIN = .openeuler.org
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
index 297264da157ff7cb5866141243d34880260b2e80..d8e78a008cfbb991fe65adc8dfee06eed282493c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     AppPagination: typeof import('./src/components/AppPagination.vue')['default']
     AppSection: typeof import('./src/components/AppSection.vue')['default']
     AppTableToggle: typeof import('./src/components/AppTableToggle.vue')['default']
+    CBreadcrumb: typeof import('./src/components/collaboration/CBreadcrumb.vue')['default']
     ContentWrapper: typeof import('./src/components/ContentWrapper.vue')['default']
     DetailAside: typeof import('./src/components/detail/DetailAside.vue')['default']
     DetailBasicInfo: typeof import('./src/components/detail/DetailBasicInfo.vue')['default']
@@ -29,6 +30,8 @@ declare module 'vue' {
     ExternalLink: typeof import('./src/components/ExternalLink.vue')['default']
     FeedbackHistory: typeof import('./src/components/feedbackHistory/FeedbackHistory.vue')['default']
     FeedbackHistoryItem: typeof import('./src/components/feedbackHistory/FeedbackHistoryItem.vue')['default']
+    FeedbackHistroy: typeof import('./src/components/collaboration/FeedbackHistroy.vue')['default']
+    FilterableCheckboxes: typeof import('./src/components/FilterableCheckboxes.vue')['default']
     FilterCheckbox: typeof import('./src/components/filter/FilterCheckbox.vue')['default']
     FilterHeader: typeof import('./src/components/filter/FilterHeader.vue')['default']
     FilterItemSkeleton: typeof import('./src/components/skeleton/FilterItemSkeleton.vue')['default']
@@ -37,11 +40,13 @@ declare module 'vue' {
     HeaderNav: typeof import('./src/components/header/HeaderNav.vue')['default']
     HeaderTheme: typeof import('./src/components/header/HeaderTheme.vue')['default']
     HomeSkeleton: typeof import('./src/components/skeleton/HomeSkeleton.vue')['default']
+    Indicators: typeof import('./src/components/collaboration/Indicators.vue')['default']
     OCardItem: typeof import('./src/components/OCardItem.vue')['default']
     OCardItemSkeleton: typeof import('./src/components/skeleton/OCardItemSkeleton.vue')['default']
     OCodeCopy: typeof import('./src/components/OCodeCopy.vue')['default']
     OCodeDown: typeof import('./src/components/OCodeDown.vue')['default']
     OTableItemNew: typeof import('./src/components/OTableItemNew.vue')['default']
+    Result404: typeof import('./src/components/Result404.vue')['default']
     ResultNoApp: typeof import('./src/components/ResultNoApp.vue')['default']
     ResultNotFound: typeof import('./src/components/ResultNotFound.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
@@ -49,8 +54,7 @@ declare module 'vue' {
     SearchFilter: typeof import('./src/components/search/SearchFilter.vue')['default']
     SearchRecommend: typeof import('./src/components/search/SearchRecommend.vue')['default']
     SearchTab: typeof import('./src/components/search/SearchTab.vue')['default']
-  }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+    StatusFeedback: typeof import('./src/components/collaboration/StatusFeedback.vue')['default']
+    TableShowOverflowTips: typeof import('./src/components/collaboration/TableShowOverflowTips.vue')['default']
   }
 }
diff --git a/src/@types/collaboration.ts b/src/@types/collaboration.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a083e11b766728185fd3117314d1bd76160dcf07
--- /dev/null
+++ b/src/@types/collaboration.ts
@@ -0,0 +1,23 @@
+export interface CollaborationT {
+  name?: string;
+  pageSize?: number;
+  pageNum?: number;
+}
+
+export interface AdminAppryT extends CollaborationT {
+  applyId?: string | number;
+  applyIdString?: string;
+  applyStatus?: string;
+  repo?: string;
+  metric?: string;
+  timeOrder?: string;
+}
+
+export interface CollaborationRepoT {
+  pageNum: number;
+  pageSize: number;
+  repo?: string;
+  kind?: string;
+  sigName?: string;
+  status?: string;
+}
diff --git a/src/@types/type-user.ts b/src/@types/type-user.ts
index b36272651fbaf29fc04dffc7cf763af957e8b7f3..f7459da71107b24cc7d78f1457d54e5be0da6abb 100644
--- a/src/@types/type-user.ts
+++ b/src/@types/type-user.ts
@@ -1,4 +1,18 @@
+export interface Identity {
+  login_name: string,
+  userIdInIdp: string,
+  identity: string, // 第三方平台类型，gitee/github
+  user_name: string,
+  accessToken: string
+}
+
+// 用户账号数据类型
 export interface UserInfoT {
   photo: string; // 头像
   username: string; // 用户名
+  email: string; // 邮箱
+  phoneCountryCode: string, // 区号
+  phone: string, // 手机号
+  identities: Identity[]; // 绑定的第三方平台账号
+  recipientId?: number; // 接收人id
 }
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 20e9bf464df168f9cf9db44c64faf7db888377b9..ecbacfc55452082cb8cac4180ef9e25c2c5c98eb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -74,7 +74,7 @@ initSensor();
 
   --layout-screen-height: 100vh;
 
-  --layout-content-min-height: calc(var(--layout-screen-height) - var(--layout-header-height));
+  --layout-content-min-height: calc(var(--layout-screen-height) - var(--layout-header-height) - var(--layout-footer-height));
 
   @include respond-to('<=laptop') {
     --layout-header-max-width: 100%;
diff --git a/src/api/api-collaboration.ts b/src/api/api-collaboration.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6439f63a5bd8228030bba521617900c1c4d6803e
--- /dev/null
+++ b/src/api/api-collaboration.ts
@@ -0,0 +1,96 @@
+import { request } from '@/shared/axios';
+import type { AxiosResponse } from '@/shared/axios';
+import type { AdminAppryT, CollaborationRepoT } from '@/@types/collaboration';
+
+// 权限
+export function getCollaborationPermissions() {
+  const url = `/server/collaboration/maintainer/permissions`;
+  return request.get(url).then((res: AxiosResponse) => res?.data);
+}
+
+// 软件维护详情 maintainer
+export function getMaintainerRepos(params: CollaborationRepoT) {
+  const url = `/server/collaboration/maintainer/user/repos`;
+  return request.get(url, { params }).then((res: AxiosResponse) => res?.data);
+}
+
+// 软件维护详情 admin
+export function getAdminRepos(params: CollaborationRepoT) {
+  const url = `/server/collaboration/admin/user/repos`;
+  return request.get(url, { params }).then((res: AxiosResponse) => res?.data);
+}
+
+/**
+ * 获取sig列表
+ */
+export function getSigList() {
+  const url = `/api-dsapi/query/sig/name?community=openeuler`;
+  return request.get<{ data: Record<'openeuler', string[]> }>(url).then((res) => res.data.data.openeuler);
+}
+
+/**
+ * 获取仓库列表
+ */
+export function getRepoList() {
+  const url = `/api-dsapi/query/repo/sig/list?community=openeuler`;
+  return request.get<{ data: Record<string, string>[] }>(url).then((res) => res.data.data.map((item) => Object.keys(item)[0]));
+}
+
+// 待我审批
+export function getAdminApply(params: AdminAppryT) {
+  const url = `/server/collaboration/admin/query/apply`;
+  return request.get(url, { params }).then((res: AxiosResponse) => res?.data);
+}
+
+
+// 我的申请
+export function getMaintainerApply(params: AdminAppryT) {
+  const url = `/server/collaboration/maintainer/query/apply`;
+  return request.get(url, { params }).then((res: AxiosResponse) => res?.data);
+}
+
+// 申请撤销
+interface RevokeT {
+  applyIdString: string;
+  applyStatus: string;
+}
+export function getMaintainerRevoke(params: RevokeT) {
+  const url = `/server/collaboration/maintainer/revoke`;
+  return request.post(url, { ...params }).then((res: AxiosResponse) => res?.data);
+}
+
+/** 待办中心获取我的申请所有仓库 */
+export function getMaintainerApplyRepos() {
+  const url = `/server/collaboration/maintainer/apply/repos`;
+  return request.get<{ data: { total: number, list: string[] } }>(url).then((res) => res?.data.data);
+}
+
+/** 待办中心获取待我审批/我审批过所有仓库 */
+export function getAdminApplyRepos() {
+  const url = `/server/collaboration/admin/apply/repos`;
+  return request.get<{ data: { total: number, list: string[] } }>(url).then((res) => res?.data.data);
+}
+
+interface FeedbackT {
+  repo: string;
+  metric: string;
+  metricStatus: string;
+  description: string;
+  applyStatus: string;
+}
+
+export function getApplyFeedback(params: FeedbackT) {
+  const url = `/server/collaboration/maintainer/apply?repo=${params.repo}`;
+  return request.post(url, { ...params }).then((res: AxiosResponse) => res?.data);
+}
+
+interface ProcessT {
+  applyIdString: string;
+  comment: string;
+  applyStatus: string;
+}
+
+export function getAdminProcess(params: ProcessT) {
+  const url = `/server/collaboration/admin/process`;
+  return request.post(url, { ...params }).then((res: AxiosResponse) => res?.data);
+}
diff --git a/src/api/api-user.ts b/src/api/api-user.ts
index d13bb80b971ea9b6a7a5d7009aa4bd6c816b8675..7744af2e23cb3d0e9393d8f4f25150e43e17ba78 100644
--- a/src/api/api-user.ts
+++ b/src/api/api-user.ts
@@ -1,7 +1,6 @@
 import type { ResponseT } from '@/@types/response';
 import type { UserInfoT } from '@/@types/type-user';
 import { request } from '@/shared/axios';
-import { getCsrfToken } from '@/shared/login';
 
 interface UserPermissionResponseT {
   msg: string;
@@ -14,16 +13,9 @@ interface UserPermissionResponseT {
  * @param community community字段，默认openeuler
  * @returns {Promise<UserInfoT>} 用户信息
  */
-export function queryUserInfo(community = 'openeuler') {
-  const url = '/api-id/oneid/user/permission';
-  const token = getCsrfToken();
-  return request
-    .get<UserPermissionResponseT>(url, {
-      params: { community },
-      global: true,
-      headers: { token },
-    })
-    .then((res) => res.data.data);
+export function queryUserInfo() {
+  const url = '/api-id/oneid/personal/center/user?community=openeuler';
+  return request.get<UserPermissionResponseT>(url).then((res) => res.data.data);
 }
 
 /**
diff --git a/src/assets/default-logo-cover_dark.png b/src/assets/default-logo-cover_dark.png
index 9bee7eb9174e5ffbb508b1edafc32f2fbcd9a33c..0d482aa1b4be713cf76933ea7dc9f4884fa498bc 100644
Binary files a/src/assets/default-logo-cover_dark.png and b/src/assets/default-logo-cover_dark.png differ
diff --git a/src/assets/icon/icon-app-type.svg b/src/assets/icon/icon-app-type.svg
index 63eeb0c3995406ebf27583b64cbb3295cc24698a..7e285fd6266f31bfd3c9d40da9e62a32d2795211 100644
--- a/src/assets/icon/icon-app-type.svg
+++ b/src/assets/icon/icon-app-type.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="M10.027 2.55H3.973c-.786 0-1.423.637-1.423 1.423v6.054c0 .786.637 1.423 1.423 1.423h6.054c.786 0 1.423-.637 1.423-1.423V3.973c0-.786-.637-1.423-1.423-1.423zm0 .9c.289 0 .523.234.523.523v6.054a.523.523 0 0 1-.523.523H3.973a.523.523 0 0 1-.523-.523V3.973c0-.289.234-.523.523-.523h6.054zm10 9.1h-6.054c-.786 0-1.423.637-1.423 1.423v6.054c0 .786.637 1.423 1.423 1.423h6.054c.786 0 1.423-.637 1.423-1.423v-6.054c0-.786-.637-1.423-1.423-1.423zm0 .9c.289 0 .523.234.523.523v6.054a.523.523 0 0 1-.523.523h-6.054a.523.523 0 0 1-.523-.523v-6.054c0-.289.234-.523.523-.523h6.054zm-10-.9H3.973c-.786 0-1.423.637-1.423 1.423v6.054c0 .786.637 1.423 1.423 1.423h6.054c.786 0 1.423-.637 1.423-1.423v-6.054c0-.786-.637-1.423-1.423-1.423zm0 .9c.289 0 .523.234.523.523v6.054a.523.523 0 0 1-.523.523H3.973a.523.523 0 0 1-.523-.523v-6.054c0-.289.234-.523.523-.523h6.054zm6.301-10.415l-3.293 3.293a.95.95 0 0 0 0 1.344l3.293 3.293a.95.95 0 0 0 1.344 0l3.293-3.293a.95.95 0 0 0 0-1.344l-3.293-3.293a.95.95 0 0 0-1.344 0zm.707.637l3.293 3.293a.05.05 0 0 1 0 .07l-3.293 3.293a.05.05 0 0 1-.07 0l-3.293-3.293a.05.05 0 0 1 0-.07l3.293-3.293a.05.05 0 0 1 .07 0z" fill-opacity=".8" fill="#000" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10.027 2.55h-6.054c-0.786 0-1.423 0.637-1.423 1.423v6.054c0 0.786 0.637 1.423 1.423 1.423h6.054c0.786 0 1.423-0.637 1.423-1.423v-6.054c0-0.786-0.637-1.423-1.423-1.423zM10.027 3.45c0.289 0 0.523 0.234 0.523 0.523v6.054c0 0.289-0.234 0.523-0.523 0.523v0h-6.054c-0.289 0-0.523-0.234-0.523-0.523v0-6.054c0-0.289 0.234-0.523 0.523-0.523h6.054zM20.027 12.55h-6.054c-0.786 0-1.423 0.637-1.423 1.423v6.054c0 0.786 0.637 1.423 1.423 1.423h6.054c0.786 0 1.423-0.637 1.423-1.423v-6.054c0-0.786-0.637-1.423-1.423-1.423zM20.027 13.45c0.289 0 0.523 0.234 0.523 0.523v6.054c0 0.289-0.234 0.523-0.523 0.523v0h-6.054c-0.289 0-0.523-0.234-0.523-0.523v0-6.054c0-0.289 0.234-0.523 0.523-0.523h6.054zM10.027 12.55h-6.054c-0.786 0-1.423 0.637-1.423 1.423v6.054c0 0.786 0.637 1.423 1.423 1.423h6.054c0.786 0 1.423-0.637 1.423-1.423v-6.054c0-0.786-0.637-1.423-1.423-1.423zM10.027 13.45c0.289 0 0.523 0.234 0.523 0.523v6.054c0 0.289-0.234 0.523-0.523 0.523v0h-6.054c-0.289 0-0.523-0.234-0.523-0.523v0-6.054c0-0.289 0.234-0.523 0.523-0.523h6.054zM16.328 3.035l-3.293 3.293c-0.172 0.172-0.279 0.41-0.279 0.672s0.106 0.5 0.278 0.672l3.293 3.293c0.172 0.172 0.41 0.279 0.672 0.279s0.5-0.106 0.672-0.278l3.293-3.293c0.172-0.172 0.279-0.41 0.279-0.672s-0.106-0.5-0.278-0.672l-3.293-3.293c-0.172-0.172-0.41-0.279-0.672-0.279s-0.5 0.106-0.672 0.278v0zM17.035 3.672l3.293 3.293c0.009 0.009 0.014 0.021 0.014 0.035s-0.005 0.026-0.014 0.035v0l-3.293 3.293c-0.009 0.009-0.021 0.014-0.035 0.014s-0.026-0.005-0.035-0.014v0l-3.293-3.293c-0.009-0.009-0.014-0.021-0.014-0.035s0.005-0.026 0.014-0.035v0l3.293-3.293c0.009-0.009 0.021-0.014 0.035-0.014s0.026 0.005 0.035 0.014v0z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icon/icon-outlink.svg b/src/assets/icon/icon-outlink.svg
index b284beaa92f0eb4225f44682980ccfe2854b6e84..1b62f8d6a43ef9dd5e2fa01aee7177255a557ff3 100644
--- a/src/assets/icon/icon-outlink.svg
+++ b/src/assets/icon/icon-outlink.svg
@@ -1,4 +1,5 @@
 
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path d="M12.339 4.3c0.387 0 0.7 0.313 0.7 0.7s-0.313 0.7-0.7 0.7h-7.139c-0.276 0-0.5 0.224-0.5 0.5v12.6c0 0.276 0.224 0.5 0.5 0.5h12.6c0.276 0 0.5-0.224 0.5-0.5v-7.12c0-0.387 0.313-0.7 0.7-0.7s0.7 0.313 0.7 0.7v7.12c0 1.049-0.851 1.9-1.9 1.9h-12.6c-1.049 0-1.9-0.851-1.9-1.9v-12.6c0-1.049 0.851-1.9 1.9-1.9h7.139zM19.048 3.126c0.994 0 1.8 0.806 1.8 1.8v3.095c0 0.331-0.269 0.6-0.6 0.6s-0.6-0.269-0.6-0.6l-0.001-2.653-6.43 6.358c-0.275 0.272-0.718 0.269-0.99-0.006s-0.269-0.718 0.006-0.99l6.478-6.405h-2.709c-0.331 0-0.6-0.269-0.6-0.6s0.269-0.6 0.6-0.6h3.046z"></path>
+<path d="M8.121 2.346c0.331 0 0.6 0.269 0.6 0.6 0 0.298-0.218 0.546-0.503 0.592l-0.097 0.008h-2.334c-1.27 0-2.31 0.987-2.394 2.236l-0.006 0.164v12.107c0 1.27 0.987 2.31 2.236 2.394l0.164 0.006h12.427c1.27 0 2.31-0.987 2.394-2.236l0.006-0.164v-1.642c0-0.331 0.269-0.6 0.6-0.6 0.298 0 0.546 0.218 0.592 0.503l0.008 0.097v1.642c0 1.924-1.509 3.496-3.409 3.595l-0.191 0.005h-12.427c-1.924 0-3.496-1.509-3.595-3.409l-0.005-0.191v-12.107c0-1.924 1.509-3.496 3.409-3.595l0.191-0.005h2.334z"></path>
+<path d="M19.994 5.256l0.006 0.134v6.153c0 0.329-0.267 0.595-0.595 0.595-0.296 0-0.542-0.216-0.588-0.499l-0.008-0.097 0-5.511-8.793 8.794c-0.233 0.233-0.61 0.233-0.842 0-0.209-0.209-0.23-0.536-0.063-0.768l0.063-0.074 8.792-8.793-5.509 0.001c-0.329 0-0.595-0.267-0.595-0.595 0-0.296 0.216-0.542 0.499-0.588l0.097-0.008h6.153c0.722 0 1.316 0.551 1.383 1.256z"></path>
 </svg>
diff --git a/src/assets/icon/icon-state.svg b/src/assets/icon/icon-state.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a8c5b840468f64afb834b8608d2ac91153184ce4
--- /dev/null
+++ b/src/assets/icon/icon-state.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M19 2.050c0.782 0 1.42 0.619 1.449 1.394l0.001 0.056v12.571c0 0.031-0.003 0.060-0.009 0.089 0.006 0.028 0.009 0.059 0.009 0.089 0 0.236-0.182 0.43-0.413 0.448l-0.037 0.002h-4c-0.291 0-0.528 0.225-0.549 0.511l-0.001 0.039-0.001 3.357 2.917-2.612c0.175-0.157 0.438-0.151 0.607 0.006l0.029 0.029c0.157 0.175 0.151 0.438-0.006 0.607l-0.029 0.029-3.54 3.169c-0.072 0.065-0.163 0.104-0.259 0.113l-0.041 0.002h-10.126c-0.782 0-1.42-0.619-1.449-1.394l-0.001-0.056v-17.095c0-0.728 0.569-1.325 1.285-1.354l0.054-0.001h14.111zM19 2.95h-14.111c-0.229 0-0.419 0.182-0.437 0.417l-0.001 0.038v17.095c0 0.291 0.225 0.528 0.511 0.549l0.039 0.001h9.549l0.001-3.8c0-0.782 0.619-1.42 1.394-1.449l0.056-0.001h3.549l0.001-12.3c0-0.291-0.225-0.528-0.511-0.549l-0.039-0.001zM11.75 15.836c0.249 0 0.45 0.224 0.45 0.5 0 0.262-0.182 0.477-0.413 0.498l-0.037 0.002h-4.5c-0.249 0-0.45-0.224-0.45-0.5 0-0.262 0.182-0.477 0.413-0.498l0.037-0.002h4.5zM15.125 12.175c0.249 0 0.45 0.224 0.45 0.5 0 0.262-0.182 0.477-0.413 0.498l-0.037 0.002h-8c-0.249 0-0.45-0.224-0.45-0.5 0-0.262 0.182-0.477 0.413-0.498l0.037-0.002h8z"></path>
+<path d="M17 5.050h-10c-0.249 0-0.45 0.201-0.45 0.45v3c0 0.249 0.201 0.45 0.45 0.45h10c0.249 0 0.45-0.201 0.45-0.45v-3c0-0.249-0.201-0.45-0.45-0.45zM16.55 5.95v2.1h-9.1v-2.1h9.1z"></path>
+</svg>
diff --git a/src/assets/icon/icon-status.svg b/src/assets/icon/icon-status.svg
index c171d99f065606df1eae25e844284c5872164778..fb84165d6885c5eacbb17a715593968035b4e955 100644
--- a/src/assets/icon/icon-status.svg
+++ b/src/assets/icon/icon-status.svg
@@ -1 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="none" d="M0 0h24v24H0z"/><path d="M.125.125h23.75v23.75H.125z"/><path d="M1.8 10v.268c0 .252.197.45.45.45.25 0 .45-.198.45-.45V5c0-.185.045-.322.137-.412.09-.093.228-.14.413-.14h17.5c.365 0 .55.184.55.552v5.268c0 .252.197.45.45.45.25 0 .45-.198.45-.45V5c0-.202-.038-.388-.108-.558a1.447 1.447 0 0 0-.317-.47 1.447 1.447 0 0 0-.47-.317 1.444 1.444 0 0 0-.555-.105H3.25c-.203 0-.388.035-.558.105-.172.07-.327.178-.47.318-.14.142-.247.297-.317.47-.07.17-.105.355-.105.557v5zm20.365 3.71c0-.25-.2-.448-.453-.448a.448.448 0 0 0-.447.453l.027 5.28a.53.53 0 0 1-.16.392.532.532 0 0 1-.39.163H3.25a.532.532 0 0 1-.39-.163A.529.529 0 0 1 2.7 19v-5.287c0-.253-.2-.45-.45-.45a.445.445 0 0 0-.45.45V19c0 .2.035.385.105.555.07.172.177.328.317.47.143.14.298.248.47.318.17.07.355.105.558.105h17.492a1.4 1.4 0 0 0 1.03-.425c.283-.285.423-.63.42-1.033l-.027-5.28z" fill-opacity=".8" fill="#000"/><path d="M4.655 11.555h-3.26a.445.445 0 0 0-.45.45c0 .252.197.45.45.45h3.527c.088 0 .165-.02.23-.057a.46.46 0 0 0 .163-.175L7.507 8.26l2.585 8.03c.093.288.283.383.568.293a.44.44 0 0 0 .275-.25l2.36-5.45 2.552 3.96c.163.25.37.294.623.132a.444.444 0 0 0 .157-.175l1.585-3.168.7.698c.09.09.195.133.32.133l3.423-.008c.252 0 .45-.2.45-.45 0-.253-.2-.45-.45-.45l-3.238.008-1.007-1.01a.475.475 0 0 0-.118-.083c-.267-.135-.47-.068-.605.2l-1.512 3.02-2.58-4.002a.436.436 0 0 0-.198-.17c-.275-.118-.472-.04-.592.234l-2.223 5.125-2.537-7.885a.444.444 0 0 0-.21-.255c-.13-.072-.248-.095-.35-.064-.1.03-.188.11-.26.24l-2.57 4.642z" fill-opacity=".8" fill="#000"/></g></svg>
\ No newline at end of file
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M1.8 10v0.268c0 0.252 0.197 0.45 0.45 0.45 0.25 0 0.45-0.198 0.45-0.45v-5.268c0-0.185 0.045-0.322 0.137-0.412 0.090-0.093 0.228-0.14 0.413-0.14h17.5c0.365 0 0.55 0.184 0.55 0.552v5.268c0 0.252 0.197 0.45 0.45 0.45 0.25 0 0.45-0.198 0.45-0.45v-5.268c0-0.202-0.038-0.388-0.108-0.558-0.078-0.183-0.185-0.339-0.317-0.47l-0-0c-0.131-0.132-0.287-0.239-0.461-0.313l-0.009-0.004c-0.16-0.066-0.346-0.105-0.541-0.105-0.005 0-0.010 0-0.015 0h-17.499c-0.203 0-0.388 0.035-0.558 0.105-0.172 0.070-0.327 0.178-0.47 0.318-0.14 0.142-0.247 0.297-0.317 0.47-0.070 0.17-0.105 0.355-0.105 0.557v5zM22.165 13.71c0-0.25-0.2-0.448-0.453-0.448-0.247 0.001-0.447 0.201-0.447 0.448 0 0.002 0 0.004 0 0.005v-0l0.027 5.28c0 0.004 0 0.008 0 0.012 0 0.149-0.061 0.283-0.16 0.38l-0 0c-0.097 0.101-0.233 0.163-0.383 0.163-0.002 0-0.005-0-0.007-0h-17.492c-0.002 0-0.004 0-0.007 0-0.15 0-0.286-0.062-0.383-0.163l-0-0c-0.099-0.096-0.16-0.231-0.16-0.379 0-0.003 0-0.006 0-0.008v0-5.287c0-0.253-0.2-0.45-0.45-0.45-0.001-0-0.003-0-0.005-0-0.246 0-0.445 0.199-0.445 0.445 0 0.002 0 0.004 0 0.005v-0 5.287c0 0.2 0.035 0.385 0.105 0.555 0.070 0.172 0.177 0.328 0.317 0.47 0.143 0.14 0.298 0.248 0.47 0.318 0.17 0.070 0.355 0.105 0.558 0.105h17.492c0.007 0 0.016 0 0.025 0 0.394 0 0.75-0.163 1.005-0.425l0-0c0.283-0.285 0.423-0.63 0.42-1.033l-0.027-5.28z"></path>
+<path d="M4.655 11.555h-3.26c-0.002-0-0.003-0-0.005-0-0.246 0-0.445 0.199-0.445 0.445 0 0.002 0 0.004 0 0.005v-0c0 0.252 0.197 0.45 0.45 0.45h3.527c0.088 0 0.165-0.020 0.23-0.057 0.069-0.043 0.124-0.103 0.162-0.173l0.001-0.002 2.192-3.963 2.585 8.030c0.093 0.288 0.283 0.383 0.568 0.293 0.125-0.040 0.224-0.13 0.274-0.247l0.001-0.003 2.36-5.45 2.552 3.96c0.163 0.25 0.37 0.294 0.623 0.132 0.067-0.044 0.12-0.103 0.156-0.172l0.001-0.003 1.585-3.168 0.7 0.698c0.090 0.090 0.195 0.133 0.32 0.133l3.423-0.008c0.252 0 0.45-0.2 0.45-0.45 0-0.253-0.2-0.45-0.45-0.45l-3.238 0.008-1.007-1.010c-0.034-0.033-0.073-0.060-0.115-0.082l-0.003-0.001c-0.267-0.135-0.47-0.068-0.605 0.2l-1.512 3.020-2.58-4.002c-0.047-0.075-0.115-0.134-0.195-0.169l-0.003-0.001c-0.275-0.118-0.472-0.040-0.592 0.234l-2.223 5.125-2.537-7.885c-0.036-0.11-0.111-0.2-0.208-0.254l-0.002-0.001c-0.13-0.072-0.248-0.095-0.35-0.064-0.1 0.030-0.188 0.11-0.26 0.24l-2.57 4.642z"></path>
+</svg>
diff --git a/src/assets/solution/openhpc/img1-dark.png b/src/assets/solution/openhpc/img1-dark.png
index 647c07e3b05223aa3e677b20ee49148d36c3ee34..af819dc1c23ede763a539d474a502118b9d531ca 100644
Binary files a/src/assets/solution/openhpc/img1-dark.png and b/src/assets/solution/openhpc/img1-dark.png differ
diff --git a/src/assets/style/category/collaboration/index.scss b/src/assets/style/category/collaboration/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2337ba2be51a94de1315c0a1deaf0ca328a1e1cd
--- /dev/null
+++ b/src/assets/style/category/collaboration/index.scss
@@ -0,0 +1,81 @@
+.repo-status {
+  :deep(.o-tag) {
+    --tag-color: var(--o-color-white);
+    --tag-bd-color: transparent;
+    min-width: 72px;
+
+    &.type0 {
+      --tag-bg-color: var(--o-color-success1);
+    }
+    &.type1 {
+      --tag-bg-color: #03b5a5;
+    }
+    &.type2 {
+      --tag-bg-color: #f5cd05;
+    }
+    &.type3 {
+      --tag-bg-color: var(--o-color-warning1);
+    }
+    &.type4 {
+      --tag-bg-color: var(--o-color-danger1);
+    }
+  }
+}
+.indicators {
+  .repo-status {
+    :deep(.o-tag) {
+      min-width: 56px;
+      border-radius: 2px;
+    }
+  }
+}
+
+.apply-status {
+  :deep(.o-tag) {
+    min-width: 72px;
+    color: var(--o-color-white);
+    &.open {
+      --tag-bg-color: var(--o-color-warning1);
+      --tag-bd-color: var(--o-color-warning1);
+    }
+    &.approved {
+      --tag-bg-color: var(--o-color-success1);
+      --tag-bd-color: var(--o-color-success1);
+    }
+    &.revoked {
+      --tag-bg-color: var(--o-color-control1);
+      --tag-bd-color: transparent;
+    }
+
+    &.rejected {
+      --tag-bg-color: var(--o-color-danger1);
+      --tag-bd-color: var(--o-color-danger1);
+    }
+  }
+}
+
+.bubble-content {
+  color: var(--o-color-info1);
+  max-width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+
+  .title {
+    font-weight: bold;
+  }
+}
+
+.header-cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .filter-icon {
+    width: 16px;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+}
diff --git a/src/assets/style/category/content/index.scss b/src/assets/style/category/content/index.scss
index e574df736d13392967fe6b6db4956b943ed65140..5281051121df75ef3f29eea2cd5b49b7640309ab 100644
--- a/src/assets/style/category/content/index.scss
+++ b/src/assets/style/category/content/index.scss
@@ -79,7 +79,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    margin: 40px 0;
+    margin: 32px 0;
     :deep(.el-input) {
       --el-input-text-color: var(--o-color-info1);
     }
diff --git a/src/assets/style/category/detail/index.scss b/src/assets/style/category/detail/index.scss
index 2a29aec58c1b2f50aecf081b933b9eba29dc309d..047f150305f91837a90100a32664315bb936442e 100644
--- a/src/assets/style/category/detail/index.scss
+++ b/src/assets/style/category/detail/index.scss
@@ -45,7 +45,7 @@
       border-top: 1px solid var(--o-color-control4);
     }
     .label {
-      background: var(--o-color-fill3);
+      background: var(--o-color-control2-light);
       padding: 16px 24px;
       color: var(--o-color-info2);
       min-width: 150px;
@@ -129,7 +129,7 @@
 }
 
 .ver {
-  background: var(--o-color-fill3);
+  background: var(--o-color-control2-light);
   @include text2;
   border: none;
   border-radius: var(--layout-pkg-radius);
diff --git a/src/assets/style/element-plus/input.scss b/src/assets/style/element-plus/input.scss
index 1577222adec4bc135b2e1148b1daca58e8ec95dd..924139752653de437385c5d70b7698206c4d853e 100644
--- a/src/assets/style/element-plus/input.scss
+++ b/src/assets/style/element-plus/input.scss
@@ -1,4 +1,5 @@
 .el-input {
+  --el-input-text-color: var(--o-color-info2);
   .el-input__wrapper {
     box-shadow: none !important;
     border: 1px solid var(--o-color-control1);
diff --git a/src/assets/style/element-plus/pagination.scss b/src/assets/style/element-plus/pagination.scss
index a8102f101ff0c04020520593157fbd984566a76c..a7439bf75e13309f3f9fd5c492b5173d8f55d71b 100644
--- a/src/assets/style/element-plus/pagination.scss
+++ b/src/assets/style/element-plus/pagination.scss
@@ -3,6 +3,9 @@
   --el-pagination-button-bg-color: var(--o-color-fill2);
   --el-disabled-bg-color: var(--o-color-fill2);
   --el-pagination-button-color: var(--o-color-info1);
+  .el-pagination__total {
+    color: var(--o-color-info2);
+  }
   .el-pager {
     li {
       --el-pagination-button-color: var(--o-color-info1);
diff --git a/src/assets/style/global.scss b/src/assets/style/global.scss
index e140180983998a785dc0eea536939f18725cd0c6..a30bb9d5431bf5aa51f7a9fa20cfb7e3f58aa2c8 100644
--- a/src/assets/style/global.scss
+++ b/src/assets/style/global.scss
@@ -25,7 +25,7 @@ html {
   .o-tag {
     cursor: pointer;
     --tag-padding: 2px 4px;
-    --tag-bd-color: var(--o-color-control3-light);
+    --tag-bd-color: var(--o-color-control1-light);
     &.image-icon .o-icon {
       color: #007af0;
     }
@@ -36,7 +36,7 @@ html {
       color: #00a7b3;
     }
     &:hover {
-      --tag-bg-color: var(--o-color-control1-light);
+      --tag-bg-color: var(--o-color-control2-light);
     }
     .o-tag-icon {
       height: 16px;
@@ -61,3 +61,34 @@ html {
 .o-tab-nav-active {
   font-weight: 500;
 }
+
+.o-card-pkg {
+  .desc {
+    margin-top: 8px;
+    color: var(--o-color-info2);
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    position: relative;
+    word-break: break-all;
+    height: 48px;
+    --linear-gradient: var(--o-mixedgray-1);
+    &.dark {
+      --linear-gradient: var(--o-mixedgray-4);
+    }
+    @include text1;
+    &::after {
+      background-image: linear-gradient(90deg, rgba(var(--linear-gradient), 0), rgba(var(--linear-gradient), 0.8) 59%, var(--o-color-control-light) 100%);
+      bottom: 0;
+      content: '';
+      height: 24px;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+      width: 4em;
+    }
+    span {
+      color: var(--o-color-primary1);
+    }
+  }
+}
diff --git a/src/assets/style/markdown.scss b/src/assets/style/markdown.scss
index 326eb1bcab340998916140731bca2c4458a6af95..22f477c7a767dd7c254c49fed6a19706fd9d9511 100644
--- a/src/assets/style/markdown.scss
+++ b/src/assets/style/markdown.scss
@@ -47,7 +47,7 @@
   }
   code {
     border-radius: var(--layout-pkg-radius);
-    background-color: var(--o-color-fill3);
+    background-color: var(--o-color-control2-light);
     margin: 0 4px;
   }
   p code:first-child {
@@ -57,7 +57,7 @@
   pre {
     position: relative;
     border-radius: var(--layout-pkg-radius);
-    background-color: var(--o-color-fill3);
+    background-color: var(--o-color-control2-light);
     padding: 0;
     overflow: hidden;
 
@@ -119,7 +119,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    background-color: var(--o-color-fill3);
+    background-color: var(--o-color-control2-light);
     opacity: 1;
     padding: 12px 12px 0 0;
     .icon-copy {
diff --git a/src/assets/style/theme/index.scss b/src/assets/style/theme/index.scss
index 3aaaeb1f806d63b2d1801ca76c6d9e9056b81a76..dd6e7269fb267c850b93b442f8025ac3e5c28196 100644
--- a/src/assets/style/theme/index.scss
+++ b/src/assets/style/theme/index.scss
@@ -11,3 +11,4 @@
 @use './popup.scss' as *;
 @use './tab.scss' as *;
 @use './rate.scss' as *;
+@use './result.scss' as *;
diff --git a/src/assets/style/theme/popup.scss b/src/assets/style/theme/popup.scss
index d05b39eb82f91cb6d645bae853082a1edd1e9f2e..184129fd94f396c39232dcf17fb2c53894a64a80 100644
--- a/src/assets/style/theme/popup.scss
+++ b/src/assets/style/theme/popup.scss
@@ -1,3 +1,10 @@
 .o-popup {
   --popup-shadow: var(--o-shadow-2);
+  .o-popup-wrap {
+    border: 1px solid var(--o-color-control4);
+  }
+  .o-popup-anchor {
+    border: 1px solid var(--o-color-control1);
+    border-width: 1px 0 0 1px;
+  }
 }
diff --git a/src/assets/style/theme/rate.scss b/src/assets/style/theme/rate.scss
index aa3c812e43b97716108be71bb02dbe7edceab05d..30ee6f61c561a557eeb931a07d1e38f26eb8aacf 100644
--- a/src/assets/style/theme/rate.scss
+++ b/src/assets/style/theme/rate.scss
@@ -1,4 +1,4 @@
 .o-rate {
-  --rate-color: var(--o-color-control2);
+  --rate-color: var(--o-color-info4);
   --rate-size: 24px;
 }
diff --git a/src/assets/style/theme/result.scss b/src/assets/style/theme/result.scss
new file mode 100644
index 0000000000000000000000000000000000000000..274b722f7c7e9749bb99ee3eaac49b3c8bad83c8
--- /dev/null
+++ b/src/assets/style/theme/result.scss
@@ -0,0 +1,3 @@
+.o-result-content {
+  color: var(--o-color-info1);
+}
diff --git a/src/assets/style/theme/select.scss b/src/assets/style/theme/select.scss
index 08e58b5a400ea82e6dcd81258557fbc44d25dd20..698f1d06d21c16c2258963ba6a1724abbb2c58ba 100644
--- a/src/assets/style/theme/select.scss
+++ b/src/assets/style/theme/select.scss
@@ -1,3 +1,4 @@
-.o-select-medium {
+.o-select {
   --select-icon-size: 20px;
+  --select-radius: 4px;
 }
diff --git a/src/assets/style/theme/table.scss b/src/assets/style/theme/table.scss
index 88a4cea0ca4f9114428dbdf877f4bebb73485ee0..6745d7421ada38a06f66a577b4ba159c79db1f70 100644
--- a/src/assets/style/theme/table.scss
+++ b/src/assets/style/theme/table.scss
@@ -1,4 +1,8 @@
+@use '../mixin/font.scss' as *;
 .o-table {
+  --table-edge-padding: 32px;
+  --table-cell-padding: 16px 20px;
+  --table-head-cell-padding: 12px 20px;
   --table-head-bg: var(--o-color-control3-light);
   --table-color: var(--o-color-info1);
   th {
@@ -14,4 +18,14 @@
   td {
     word-break: break-word;
   }
+  &.o-table-small {
+    --table-cell-height: auto;
+    --table-cell-padding: 12px 16px;
+    --table-head-cell-padding: 9px 16px;
+    --table-edge-padding: 16px;
+    td,
+    th {
+      @include tip1;
+    }
+  }
 }
diff --git a/src/assets/svg-icons/icon-outlink.svg b/src/assets/svg-icons/icon-outlink.svg
index 1aca2b42223c76de8e1f451b37476e1160a62e96..743500c1fb12afdeeeea257286c30a5ca9594161 100644
--- a/src/assets/svg-icons/icon-outlink.svg
+++ b/src/assets/svg-icons/icon-outlink.svg
@@ -1,3 +1,4 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path d="M11.664 3.425c0.387 0 0.7 0.313 0.7 0.7s-0.313 0.7-0.7 0.7h-6.474c-0.331 0-0.6 0.269-0.6 0.6v0 13.374c0 0.331 0.269 0.6 0.6 0.6v0h13.624c0.331 0 0.6-0.269 0.6-0.6v0-6.227c0-0.387 0.313-0.7 0.7-0.7s0.7 0.313 0.7 0.7v0 6.227c0 1.105-0.895 2-2 2v0h-13.624c-1.105 0-2-0.895-2-2v0-13.374c0-1.105 0.895-2 2-2v0h6.474zM18.815 3.422c1.105 0 2 0.895 2 2v0 3.95c0 0.387-0.313 0.7-0.7 0.7s-0.7-0.313-0.7-0.7v-3.515l-4.932 4.887c-0.126 0.125-0.301 0.203-0.493 0.203-0.387 0-0.7-0.313-0.7-0.7 0-0.194 0.079-0.37 0.207-0.497l4.974-4.929-3.606 0.001c-0.387 0-0.7-0.313-0.7-0.7s0.313-0.7 0.7-0.7v0h3.95z"></path>
+<path d="M8.121 2.346c0.331 0 0.6 0.269 0.6 0.6 0 0.298-0.218 0.546-0.503 0.592l-0.097 0.008h-2.334c-1.27 0-2.31 0.987-2.394 2.236l-0.006 0.164v12.107c0 1.27 0.987 2.31 2.236 2.394l0.164 0.006h12.427c1.27 0 2.31-0.987 2.394-2.236l0.006-0.164v-1.642c0-0.331 0.269-0.6 0.6-0.6 0.298 0 0.546 0.218 0.592 0.503l0.008 0.097v1.642c0 1.924-1.509 3.496-3.409 3.595l-0.191 0.005h-12.427c-1.924 0-3.496-1.509-3.595-3.409l-0.005-0.191v-12.107c0-1.924 1.509-3.496 3.409-3.595l0.191-0.005h2.334z"></path>
+<path d="M19.994 5.256l0.006 0.134v6.153c0 0.329-0.267 0.595-0.595 0.595-0.296 0-0.542-0.216-0.588-0.499l-0.008-0.097 0-5.511-8.793 8.794c-0.233 0.233-0.61 0.233-0.842 0-0.209-0.209-0.23-0.536-0.063-0.768l0.063-0.074 8.792-8.793-5.509 0.001c-0.329 0-0.595-0.267-0.595-0.595 0-0.296 0.216-0.542 0.499-0.588l0.097-0.008h6.153c0.722 0 1.316 0.551 1.383 1.256z"></path>
 </svg>
diff --git a/src/components/AppPagination.vue b/src/components/AppPagination.vue
index 1eaa155443a8923958d738c6d891d4a8954d572c..7db948bcb246b28aa11cfab07ba68d3e64d00f25 100644
--- a/src/components/AppPagination.vue
+++ b/src/components/AppPagination.vue
@@ -46,7 +46,7 @@ onMounted(() => {
       :current-page="current"
       :page-size="pagesize"
       background
-      layout="sizes, prev, pager, next, jumper"
+      layout="total ,sizes, prev, pager, next, jumper"
       :total="total"
       :page-sizes="isFieldPage ? COUNT_PAGESIZE_FIELD : COUNT_PAGESIZE"
       @size-change="handleSizeChange"
diff --git a/src/components/ExternalLink.vue b/src/components/ExternalLink.vue
index 423a70bc703aa6f40a716e85ce343850acf8b415..1a669549848b55ba735a290d656f460d68582c99 100644
--- a/src/components/ExternalLink.vue
+++ b/src/components/ExternalLink.vue
@@ -29,7 +29,7 @@ const onChange = () => {
 </script>
 
 <template>
-  <ODialog v-model:visible="showDlg" :unmount-on-hide="true" :mask="true" size="medium" @change="onChange" class="external-dialog">
+  <ODialog v-model:visible="showDlg" :unmount-on-hide="true" :mask="true" @change="onChange">
     <template #header>
       <p class="external-title">{{ t('software.external.title') }}</p>
     </template>
diff --git a/src/components/FilterableCheckboxes.vue b/src/components/FilterableCheckboxes.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb3161429b21424345228fb23f4e09cfcbbb8b1a
--- /dev/null
+++ b/src/components/FilterableCheckboxes.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, type PropType } from 'vue';
+import { useDebounceFn, useVModel } from '@vueuse/core';
+import { OIcon, OInput, ORadio, ORadioGroup, OScroller } from '@opensig/opendesign';
+
+import IconSearch from '~icons/app/icon-search.svg';
+import IconLoading from '~icons/app/icon-loading.svg';
+
+type ValueT = string | { label: string; value: string };
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  /** 是否显示搜索 */
+  filterable: {
+    type: Boolean,
+    default: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /** 多选值 */
+  values: {
+    type: Array as PropType<ValueT[]>,
+    default: () => [],
+  },
+  filterDebounceTimeout: {
+    type: Number,
+    default: 300,
+  },
+});
+
+const emit = defineEmits<{
+  (event: 'change', val: string): void;
+}>();
+
+const rawValues = computed(() =>
+  props.values.map((val) => {
+    if (typeof val === 'string') {
+      return { label: val, value: val };
+    }
+    return val;
+  })
+);
+
+const searchVal = ref<string>();
+
+const filteredValues = computed(() => {
+  if (!searchVal.value) {
+    return rawValues.value;
+  }
+  const search = searchVal.value.toLowerCase();
+  return rawValues.value.filter((val) => val.label.toLowerCase().includes(search));
+});
+
+const displayCount = ref(30);
+const displayValues = computed(() => {
+  return filteredValues.value.slice(0, Math.min(filteredValues.value.length, displayCount.value));
+});
+
+const wrapDiv = ref<HTMLDivElement>();
+
+const onScroll = (event: Event) => {
+  const el = event.target as HTMLDivElement;
+  if (el.scrollHeight - Math.round(el.scrollTop) <= el.clientHeight) {
+    displayCount.value += 30;
+  }
+};
+
+onMounted(() => {
+  const container = wrapDiv.value?.querySelector('.o-scroller-container') as HTMLDivElement;
+  container && container.addEventListener('scroll', onScroll);
+});
+
+onUnmounted(() => {
+  const container = wrapDiv.value?.querySelector('.o-scroller-container') as HTMLDivElement;
+  container && container.removeEventListener('scroll', onScroll);
+});
+
+const onFilterInput = useDebounceFn((search?: string) => {
+  // 重置显示个数
+  displayCount.value = 30;
+  searchVal.value = search;
+}, props.filterDebounceTimeout);
+
+const radioVal = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <div class="filterable-checkboxes-wrap" :style="filterable ? {} : { paddingTop: '0' }" ref="wrapDiv">
+    <OInput v-if="filterable" clearable @clear="onFilterInput()" @input="onFilterInput" class="filter-input" placeholder="搜索">
+      <template #prefix>
+        <OIcon class="search-icon">
+          <IconSearch />
+        </OIcon>
+      </template>
+    </OInput>
+    <OScroller class="content" showType="always">
+      <div class="loading-mask" v-show="loading">
+        <OIcon><IconLoading class="o-rotating" /></OIcon>
+      </div>
+      <div class="check-all-wrap">
+        <ORadio @change="$emit('change', $event as string)" v-model="radioVal" :value="''">全选</ORadio>
+      </div>
+      <ORadioGroup v-model="radioVal" direction="v" @change="$emit('change', $event as string)">
+        <ORadio v-for="item in displayValues" :key="item.value" :value="item.value">{{ item.label }}</ORadio>
+      </ORadioGroup>
+    </OScroller>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.loading-mask {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--o-color-fill2);
+  z-index: 2;
+  left: 0;
+  top: 0;
+}
+
+.search-icon {
+  color: var(--o-color-info1);
+}
+
+.filterable-checkboxes-wrap {
+  background-color: var(--o-color-fill2);
+  padding: 8px;
+  border-radius: 4px;
+
+  .filter-input {
+    --input-radius: 4px;
+    width: 100%;
+  }
+
+  .content {
+    padding: 12px;
+    padding-bottom: 0;
+    max-height: 200px;
+  }
+
+  .check-all-wrap {
+    padding: 16px 0;
+    padding-top: 0;
+  }
+}
+</style>
diff --git a/src/components/OCardItem.vue b/src/components/OCardItem.vue
index a3fe26e64a19d9d142b80759846ebec65d0ffe45..be7bc965f7c9d23b443496ff7b8e876183d25c93 100644
--- a/src/components/OCardItem.vue
+++ b/src/components/OCardItem.vue
@@ -77,6 +77,7 @@ onMounted(() => {
       '--card-main-padding': '24px',
     }"
     hoverable
+    class="o-card-pkg"
     :class="{ search: isPageSearch, home: isPageHome }"
   >
     <template #main>
@@ -198,35 +199,6 @@ onMounted(() => {
         }
       }
     }
-    .desc {
-      margin-top: 8px;
-      color: var(--o-color-info2);
-      overflow: hidden;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      position: relative;
-      word-break: break-all;
-      height: 48px;
-
-      --linear-gradient: var(--o-mixedgray-1);
-      &.dark {
-        --linear-gradient: var(--o-mixedgray-4);
-      }
-      @include text1;
-      &::after {
-        background-image: linear-gradient(90deg, rgba(var(--linear-gradient), 0), rgba(var(--linear-gradient), 0.8) 59%, var(--o-color-control-light) 100%);
-        bottom: 0;
-        content: '';
-        height: 24px;
-        pointer-events: none;
-        position: absolute;
-        right: 0;
-        width: 4em;
-      }
-      span {
-        color: var(--o-color-primary1);
-      }
-    }
   }
 }
 </style>
diff --git a/src/components/OCodeCopy.vue b/src/components/OCodeCopy.vue
index 6d7a1bcc05f823b4106a8d57972876120a308a87..819273aa3bc0b7519cf8ff5aa91475e3293bde60 100644
--- a/src/components/OCodeCopy.vue
+++ b/src/components/OCodeCopy.vue
@@ -43,7 +43,7 @@ const copyText = (e: MouseEvent) => {
 
 <style lang="scss" scoped>
 .download-code {
-  background: var(--o-color-fill3);
+  background: var(--o-color-control2-light);
   border-radius: var(--layout-pkg-radius);
   height: auto;
   width: 100%;
@@ -66,7 +66,7 @@ const copyText = (e: MouseEvent) => {
     padding: 12px 12px 0 0;
     top: 0;
     right: 0;
-    background-color: var(--o-color-fill3);
+    background-color: var(--o-color-control2-light);
     height: 24px;
     box-sizing: content-box;
     border-radius: 0 4px 0 0;
diff --git a/src/components/OTableItemNew.vue b/src/components/OTableItemNew.vue
index bb143a55a2ea3a5038e86c79b0a64cbcefad4e87..118efc86a5addde3c0e3904e2b33b3275e9bc396 100644
--- a/src/components/OTableItemNew.vue
+++ b/src/components/OTableItemNew.vue
@@ -209,9 +209,6 @@ const collectDownloadData = (pkgId: string, name: string, version: string) => {
 }
 
 :deep(.o-table) {
-  --table-edge-padding: 32px;
-  --table-cell-padding: 16px 20px;
-  --table-head-cell-padding: 12px 20px;
   --table-cell-height: 80px;
   .label {
     display: flex;
diff --git a/src/components/Result404.vue b/src/components/Result404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..098ef151af6a06d17a099c305fc8f050a9ca4f84
--- /dev/null
+++ b/src/components/Result404.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import ContentWrapper from '@/components/ContentWrapper.vue';
+import { OResult } from '@opensig/opendesign';
+
+import { useTheme } from '@/composables/useTheme';
+import notFoundImage from '@/assets/404.png';
+import notFoundImageDark from '@/assets/404-dark.png';
+
+const { isDark } = useTheme();
+</script>
+
+<template>
+  <ContentWrapper class="result-404">
+    <OResult>
+      <template #image>
+        <slot name="image">
+          <img class="not-found-image" alt="notFound" :src="isDark ? notFoundImageDark : notFoundImage" />
+        </slot>
+      </template>
+      <slot name="extra" />
+      <slot name="description" />
+    </OResult>
+  </ContentWrapper>
+</template>
+
+<style lang="scss" scoped>
+.result-404 {
+  width: 100%;
+  height: var(--layout-content-min-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/src/components/ResultNoApp.vue b/src/components/ResultNoApp.vue
index 4ed61bbef58107e95a0667f278b9f311d255a12d..8015a8d1cf05548f4114c8a2801648d7d671d019 100644
--- a/src/components/ResultNoApp.vue
+++ b/src/components/ResultNoApp.vue
@@ -1,14 +1,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { OLink, OResult, OFigure } from '@opensig/opendesign';
+import { OLink } from '@opensig/opendesign';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { GITEE } from '@/data/config';
-import { useTheme } from '@/composables/useTheme';
 import ExternalLink from '@/components/ExternalLink.vue';
-
-import result404 from '@/assets/404.png';
-import result404Dark from '@/assets/404-dark.png';
+import Result404 from '@/components/Result404.vue';
 
 const props = defineProps({
   type: {
@@ -17,8 +14,6 @@ const props = defineProps({
   },
 });
 
-const { isDark } = useTheme();
-
 const route = useRoute();
 const { t } = useI18n();
 
@@ -49,16 +44,13 @@ const clickFeedback = () => {
 </script>
 
 <template>
-  <OResult class="result-tips">
-    <template #image>
-      <OFigure :src="isDark ? result404Dark : result404" fit="contain" />
-    </template>
+  <Result404 class="result-tips">
     <template #description>
       <p class="text">
         {{ t('software.nofoundApp') }} <OLink hover-underline color="primary" @click="clickFeedback">{{ t('software.feedbackPkg.btn') }}</OLink>
       </p>
     </template>
-  </OResult>
+  </Result404>
 
   <ExternalLink v-if="showExternalDlg" :href="externalLink" @change="showExternalDlg = false" />
 </template>
diff --git a/src/components/ResultNotFound.vue b/src/components/ResultNotFound.vue
index e65595550ace5a2deb51eb76c26825bd8196b629..ef541e698136e1536f5478cccad652dccc913beb 100644
--- a/src/components/ResultNotFound.vue
+++ b/src/components/ResultNotFound.vue
@@ -1,45 +1,27 @@
 <script setup lang="ts">
-import ContentWrapper from '@/components/ContentWrapper.vue';
-import { OButton, OResult } from '@opensig/opendesign';
-
-import { useTheme } from '@/composables/useTheme';
-import notFoundImage from '@/assets/404.png';
-import notFoundImageDark from '@/assets/404-dark.png';
+import { OButton } from '@opensig/opendesign';
 
 import { useLocale } from '@/composables/useLocale';
+import Result404 from '@/components/Result404.vue';
+
 const { locale } = useLocale();
-const { isDark } = useTheme();
 </script>
 
 <template>
-  <ContentWrapper class="result-404">
-    <OResult>
-      <template #image>
-        <slot name="image">
-          <img class="not-found-image" alt="notFound" :src="isDark ? notFoundImageDark : notFoundImage" />
-        </slot>
-      </template>
-      <template #extra>
-        <p class="text404">暂无数据</p>
-        <RouterLink :to="`/${locale}/`">
-          <OButton variant="solid" color="primary">返回首页</OButton>
-        </RouterLink>
-      </template>
-    </OResult>
-  </ContentWrapper>
+  <Result404>
+    <template #extra>
+      <p class="text404">暂无数据</p>
+      <RouterLink :to="`/${locale}/`">
+        <OButton variant="solid" color="primary">返回首页</OButton>
+      </RouterLink>
+    </template>
+  </Result404>
 </template>
 
 <style lang="scss" scoped>
-.result-404 {
-  width: 100%;
-  height: var(--layout-content-min-height);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .text404 {
-    @include text2;
-    color: var(--o-color-info1);
-    margin-bottom: 24px;
-  }
+.text404 {
+  @include text2;
+  color: var(--o-color-info1);
+  margin-bottom: 24px;
 }
 </style>
diff --git a/src/components/collaboration/CBreadcrumb.vue b/src/components/collaboration/CBreadcrumb.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b05543e2583dec9a7c2e00dea091b3c8ea68aced
--- /dev/null
+++ b/src/components/collaboration/CBreadcrumb.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { OBreadcrumb, OBreadcrumbItem } from '@opensig/opendesign';
+import { useLocale } from '@/composables/useLocale';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  type: {
+    type: String,
+    default: () => '',
+  },
+  repo: {
+    type: String,
+    default: () => '',
+  },
+});
+
+const { locale } = useLocale();
+const { t } = useI18n();
+</script>
+
+<template>
+  <OBreadcrumb class="app-breadcrumb">
+    <OBreadcrumbItem :to="`/${locale}/todo/application`">待办中心</OBreadcrumbItem>
+    <OBreadcrumbItem :to="`/${locale}/todo/${type}`">{{ t(`collaboration.${type}`) }}</OBreadcrumbItem>
+    <OBreadcrumbItem>{{ repo }} </OBreadcrumbItem>
+  </OBreadcrumb>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/collaboration/FeedbackHistroy.vue b/src/components/collaboration/FeedbackHistroy.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53061eea8d6a58da8a6c8db18e5e2c2518d8eba7
--- /dev/null
+++ b/src/components/collaboration/FeedbackHistroy.vue
@@ -0,0 +1,229 @@
+<script lang="ts" setup>
+import { ref, onMounted, computed, watch } from 'vue';
+import { ODialog, OTable, OTag } from '@opensig/opendesign';
+import { useLocale } from '@/composables/useLocale';
+import { useUserInfoStore } from '@/stores/user';
+import { getMaintainerApply, getAdminApply } from '@/api/api-collaboration';
+import { formatDateTime } from '@/utils/common';
+import { applicationTypeConvert, applyStatusConvert, versionLatestStatusConvert } from '@/utils/collaboration';
+
+import { ElPagination, ElConfigProvider } from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import English from 'element-plus/es/locale/lang/en';
+
+import { COUNT_PAGESIZE } from '@/data/query';
+
+const props = defineProps({
+  repo: {
+    type: String,
+    default: () => '',
+  },
+});
+
+const { isZh } = useLocale();
+const showDlg = ref(true);
+const userInfoStore = useUserInfoStore();
+const isMainPer = computed(() => userInfoStore.platformMaintainerPermission);
+const isAdminPer = computed(() => userInfoStore.platformAdminPermission);
+
+// 分页
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+
+const columns = [
+  { label: '申请类型', key: 'metric', type: 'metric' },
+  { label: '修改状态', key: 'metricStatus', type: 'metricStatus' },
+  { label: '修改理由', key: 'description', type: 'description' },
+  { label: '申请状态', key: 'applyStatus', type: 'applyStatus' },
+  { label: '审批人', key: 'administrator', type: 'administrator' },
+  { label: '审批意见', key: 'comment', type: 'comment' },
+  { label: '申请单号', key: 'applyIdString', type: 'applyId' },
+  { label: '申请时间', key: 'updateAt', type: 'time' },
+];
+
+const emits = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const searchParams = computed(() => {
+  return {
+    name: 'formPage',
+    pageNum: currentPage.value,
+    pageSize: pageSize.value,
+    repo: props.repo,
+  };
+});
+
+const isLoading = ref(false);
+const reposData = ref([]);
+
+const queryMaintainerApply = () => {
+  isLoading.value = true;
+  getMaintainerApply(searchParams.value)
+    .then((res) => {
+      reposData.value = res.data.list;
+      total.value = res.data.total;
+
+      isLoading.value = false;
+    })
+    .catch(() => {
+      reposData.value = [];
+      total.value = 0;
+      isLoading.value = false;
+    });
+};
+
+const queryAdminApply = () => {
+  isLoading.value = true;
+  getAdminApply(searchParams.value)
+    .then((res) => {
+      reposData.value = res.data.list;
+      total.value = res.data.total;
+
+      isLoading.value = false;
+    })
+    .catch(() => {
+      reposData.value = [];
+      total.value = 0;
+      isLoading.value = false;
+    });
+};
+
+/* ---------------分页事件------------------ */
+const handleSizeChange = (val: number) => {
+  pageSize.value = val;
+  currentPage.value = 1;
+};
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+};
+
+const onChange = () => {
+  emits('close');
+};
+
+const pageInit = () => {
+  if (isMainPer.value) {
+    queryMaintainerApply();
+  }
+  if (isAdminPer.value) {
+    queryAdminApply();
+  }
+};
+
+onMounted(() => {
+  pageInit();
+});
+
+watch(
+  () => searchParams.value,
+  () => {
+    pageInit();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <ODialog v-model:visible="showDlg" :unmount-on-hide="true" @change="onChange" size="large">
+    <template #header>
+      <p class="title">反馈历史</p>
+    </template>
+    <div class="feedback-histroy">
+      <div class="histroy-table">
+        <OTable :columns="columns" :data="reposData" :loading="isLoading" border="row" :small="true">
+          <template #head="{ columns }">
+            <th v-for="item in columns" :key="item.type" :class="item.type">{{ item.label }}</th>
+          </template>
+          <template #td_updateAt="{ row }">
+            {{ formatDateTime(row.updateAt, true) }}
+          </template>
+          <template #td_metric="{ row }">
+            {{ applicationTypeConvert(row.metric) }}
+          </template>
+          <template #td_metricStatus="{ row }">
+            {{ versionLatestStatusConvert(row.metricStatus) }}
+          </template>
+          <template #td_administrator="{ row }">
+            {{ row.administrator ?? '-' }}
+          </template>
+          <template #td_description="{ row }">
+            <TableShowOverflowTips v-if="row.description" :content="row.description" :line="1" />
+            <template v-else>-</template>
+          </template>
+          <template #td_applyIdString="{ row }">
+            <TableShowOverflowTips v-if="row.applyIdString" :content="row.applyIdString" :line="1" />
+            <template v-else>-</template>
+          </template>
+          <template #td_comment="{ row }">
+            <TableShowOverflowTips v-if="row.comment" :content="row.comment" :line="1" />
+            <template v-else>-</template>
+          </template>
+          <template #td_applyStatus="{ row }">
+            <div class="apply-status">
+              <OTag v-if="row.applyStatus" :class="row.applyStatus?.toLocaleLowerCase()">{{ applyStatusConvert(row.applyStatus) }} </OTag>
+            </div>
+          </template>
+        </OTable>
+      </div>
+      <div v-if="total > COUNT_PAGESIZE[0]" class="pagination-box">
+        <el-config-provider :locale="isZh ? zhCn : English">
+          <el-pagination
+            :current-page="currentPage"
+            background
+            layout="total , prev, pager, next, jumper"
+            :total="total"
+            :page-sizes="COUNT_PAGESIZE"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </el-config-provider>
+      </div>
+    </div>
+  </ODialog>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/style/category/collaboration/index.scss';
+.pagination-box {
+  margin-top: 24px;
+  display: flex;
+  justify-content: end;
+}
+.feedback-histroy {
+  .histroy-table {
+    border: 1px solid var(--o-color-control4);
+    border-radius: 4px;
+  }
+  :deep(.o-table) {
+    .o-table-wrap {
+      overflow-x: auto;
+      overflow-y: hidden;
+      @include scrollbar;
+    }
+    table {
+      table-layout: fixed;
+    }
+    th {
+      width: 168px;
+      @include tip1;
+      &.applyStatus {
+        width: 120px;
+      }
+      &.administrator {
+        width: 120px;
+      }
+      .time {
+        width: 145px;
+      }
+    }
+    .td-nowrap {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/src/components/collaboration/Indicators.vue b/src/components/collaboration/Indicators.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9e374e8058c6109500a32dc2fdc0339fd59ccf94
--- /dev/null
+++ b/src/components/collaboration/Indicators.vue
@@ -0,0 +1,246 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { OTable, OTag, ODialog } from '@opensig/opendesign';
+import { repoStatusIndex } from '@/utils/collaboration';
+import { applicationType } from '@/data/todo/';
+
+const columns = [
+  { label: 'CVE分类', key: 'cve', type: 'cve' },
+  { label: 'CVE详细分类', key: 'cveType', type: 'cve_type' },
+  { label: '贡献分类', key: 'contribution', type: 'contribution' },
+  { label: '详细描述', key: 'details', type: 'details' },
+  { label: '维护状态', key: 'maintenance', type: 'maintenance' },
+  { label: '描述', key: 'description', type: 'description' },
+];
+
+const data = [
+  {
+    cve: '有CVE',
+    cveType: 'CVE全部未修复',
+    contribution: '没有ISSUE修复',
+    details: '-',
+    maintenance: '没有人维护',
+    description: 'CVE全部未修复，且没有ISSUE修复',
+  },
+  {
+    cve: '有CVE',
+    cveType: 'CVE全部未修复',
+    contribution: '有部分ISSUE修复',
+    details: '-',
+    maintenance: '缺人维护',
+    description: 'CVE全部未修复，且有部分ISSUE被修复',
+  },
+  {
+    cve: '有CVE',
+    cveType: 'CVE全部未修复',
+    contribution: '全部ISSUE修复',
+    details: '-',
+    maintenance: '缺人维护',
+    description: 'CVE全部未修复，全部ISSUE都被修复',
+  },
+  {
+    cve: '有CVE',
+    cveType: 'CVE部分修复',
+    contribution: '-',
+    details: '-',
+    maintenance: '缺人维护',
+    description: 'CVE部分修复',
+  },
+  {
+    cve: '有CVE',
+    cveType: 'CVE全部修复',
+    contribution: '-',
+    details: '-',
+    maintenance: '健康',
+    description: 'CVE全部修复',
+  },
+  {
+    cve: '没有CVE',
+    cveType: '没有CVE问题',
+    contribution: '没有PR提交',
+    details: '版本正常',
+    maintenance: '健康',
+    description: '没有CVE问题，且也没有PR提交，且软件包是正常稳定的',
+  },
+  {
+    cve: '没有CVE',
+    cveType: '没有CVE问题',
+    contribution: '没有PR提交',
+    details: '落后版本',
+    maintenance: '静止',
+    description: '没有CVE问题，且也没有PR提交，且软件包是落后版本',
+  },
+  {
+    cve: '没有CVE',
+    cveType: '没有CVE问题',
+    contribution: '有PR合入',
+    details: '-',
+    maintenance: '活跃',
+    description: '没有CVE问题，有PR合入',
+  },
+  {
+    cve: '没有CVE',
+    cveType: '没有CVE问题',
+    contribution: '有PR提交未合入',
+    details: '-',
+    maintenance: '活跃',
+    description: '没有CVE问题，有PR提交但是没有PR被合入',
+  },
+];
+
+const applicationTypeDesc: Record<string, string[]> = {
+  cveStatus: [],
+  issueStatus: ['所有Issue都没有被修复', '一部分Issue被修复了，一部分Issue没有修复', '所有Issue都被修复了'],
+  prStatus: ['-', '有PR提交，且都没有被合入代码仓', '有PR提交，且有PR被合入到代码仓'],
+  versionStatus: ['软件包版本与上游版本一致', '软件包版本比上游版本低'],
+  orgStatus: ['参与贡献组织数 > 5人', '参与贡献组织数 <= 5人'],
+  contributorStatus: ['参与贡献人数 > 10人', '参与贡献人数 <= 10人'],
+};
+
+const indicatorsInfo = computed(() => {
+  return applicationType.map((item) => {
+    return { ...item, desc: applicationTypeDesc[item.id] || [] };
+  });
+});
+
+// 单元格合并
+const cellSpanFn = (rowIdx: number, colIdx: number) => {
+  if (rowIdx === 0 && colIdx === 0) {
+    return {
+      rowspan: 5,
+    };
+  }
+  if (rowIdx === 0 && colIdx === 1) {
+    return {
+      rowspan: 3,
+    };
+  }
+  if (rowIdx === 5 && colIdx === 0) {
+    return {
+      rowspan: 4,
+    };
+  }
+  if (rowIdx === 5 && colIdx === 1) {
+    return {
+      rowspan: 4,
+    };
+  }
+  if (rowIdx === 5 && colIdx === 2) {
+    return {
+      rowspan: 2,
+    };
+  }
+};
+
+const showDlg = ref(true);
+
+const emits = defineEmits<{
+  (e: 'change'): void;
+}>();
+
+const onChange = () => {
+  emits('change');
+};
+</script>
+
+<template>
+  <ODialog
+    v-model:visible="showDlg"
+    :unmount-on-hide="true"
+    :mask="true"
+    size="large"
+    :style="{
+      '--dlg-width': '1170px',
+    }"
+    @change="onChange"
+  >
+    <template #header>
+      <p class="title">状态指标说明</p>
+    </template>
+    <div class="indicators">
+      <p class="title">软件包维护状态指标</p>
+      <OTable class="main-table" :columns="columns" :data="data" :cell-span="cellSpanFn" border="all" :small="true">
+        <template #td_maintenance="{ row }">
+          <div class="repo-status">
+            <OTag :class="`type${repoStatusIndex(row.maintenance)}`" size="small">{{ row.maintenance }} </OTag>
+          </div>
+        </template>
+      </OTable>
+      <p class="title">详细指标</p>
+      <div v-for="item in indicatorsInfo" :key="item.id" class="indicators-info">
+        <div class="title">{{ item.label }}</div>
+        <div class="box">
+          <div v-for="(child, index) in item.children" :key="child" class="rows">
+            <span class="child"> {{ child }}</span> <span v-if="item.desc[index]" class="desc">{{ item.desc[index] }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ODialog>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/style/category/collaboration/index.scss';
+
+:deep(.o-table) {
+  margin: 16px 0;
+  tbody {
+    tr {
+      &:hover {
+        background: none !important;
+      }
+    }
+  }
+  td[rowspan='4'] {
+    border-bottom: 0 none;
+  }
+}
+.indicators {
+  color: var(--o-color-info1);
+  @include text1;
+}
+
+.indicators-info {
+  --indicators-border: 1px solid var(--o-color-control4);
+  border: var(--indicators-border);
+  display: flex;
+  margin-top: 16px;
+  border-radius: 4px;
+  @include tip1;
+  .title {
+    background: var(--o-color-control3-light);
+    display: flex;
+    align-items: center;
+    width: 195px;
+    font-weight: 500;
+    justify-content: center;
+  }
+  .box {
+    flex: 1;
+    border-left: var(--indicators-border);
+    .rows {
+      &:not(:last-child) {
+        border-bottom: var(--indicators-border);
+      }
+      color: var(--o-color-info1);
+
+      display: flex;
+      align-items: center;
+      span {
+        padding: 12px 16px;
+        display: block;
+      }
+      .child {
+        padding-left: 78px;
+      }
+      .desc {
+        flex: 1;
+      }
+      .child:has(+ span) {
+        width: 40%;
+        border-right: var(--indicators-border);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/collaboration/StatusFeedback.vue b/src/components/collaboration/StatusFeedback.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a3692a9054f2f0ec9486075c33eff3fe0ba76906
--- /dev/null
+++ b/src/components/collaboration/StatusFeedback.vue
@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import { ref, reactive, computed } from 'vue';
+import { ODialog, OButton, OForm, OTextarea, OFormItem, ORadioGroup, ORadio, OSelect, OOption, type FieldResultT, useMessage } from '@opensig/opendesign';
+import { applicationTypeCurrent } from '@/data/todo';
+import { getApplyFeedback } from '@/api/api-collaboration';
+
+const props = defineProps({
+  repo: {
+    type: String,
+    default: () => '',
+  },
+});
+
+const showDlg = ref(true);
+const message = useMessage();
+
+const formRef = ref<InstanceType<typeof OForm>>();
+const formData = reactive({
+  repo: props.repo,
+  metric: '',
+  metricStatus: '',
+  description: '',
+  applyStatus: 'OPEN',
+});
+
+const emits = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const metricIndex = ref(-1);
+const onChangeRadio = (v: string) => {
+  formData.metricStatus = '';
+  metricIndex.value = applicationTypeCurrent.findIndex((item) => item.id === v);
+};
+// 根据状态获取
+const metricCategory = computed(() => (metricIndex.value === -1 ? [] : applicationTypeCurrent[metricIndex.value].children));
+
+// 重置表单数据
+const reset = () => {
+  formRef.value?.resetFields();
+  emits('close');
+};
+
+const onChange = () => {
+  emits('close');
+};
+
+// 验证
+const metricRules = [
+  {
+    required: true,
+    message: '请选择您要修改的状态类别',
+    triggers: ['blur'],
+  },
+];
+
+const modifyRules = [
+  {
+    required: true,
+    message: '请选择修改状态',
+    triggers: ['blur'],
+  },
+];
+
+const descriptionRules = [
+  {
+    required: true,
+    triggers: ['blur'],
+    message: '请输入您的理由',
+  },
+  {
+    validator: (value: string) => {
+      if (value.trim().length < 1 || value.length > 1000) {
+        return {
+          type: 'danger',
+          message: '长度为1-1000个字符',
+        };
+      }
+    },
+  },
+];
+
+const onSubmit = (results: FieldResultT[]) => {
+  if (results.find((item) => item?.type === 'danger')) {
+    return;
+  } else {
+    if (formData.metricStatus === '版本正常') {
+      formData.metricStatus = '最新版本';
+    }
+    getApplyFeedback(formData)
+      .then((res) => {
+        if (res.code === 200) {
+          message.success({
+            content: '反馈成功',
+          });
+          showDlg.value = false;
+          emits('close');
+        }
+      })
+      .catch(() => {
+        message.danger({
+          content: '操作失败',
+        });
+        showDlg.value = false;
+      });
+  }
+};
+</script>
+
+<template>
+  <ODialog v-model:visible="showDlg" :unmount-on-hide="true" @change="onChange" size="large">
+    <template #header>
+      <p class="title">状态反馈</p>
+    </template>
+    <div class="indicators">
+      <OForm ref="formRef" has-required :model="formData" label-width="220px" label-align="top" @submit="onSubmit">
+        <OFormItem label="请选择您要修改的状态类别" required field="metric" :rules="metricRules">
+          <ORadioGroup class="metric-options" v-model="formData.metric" direction="v" @change="(v) => onChangeRadio(v)">
+            <ORadio v-for="option in applicationTypeCurrent" :key="option.label" :value="option.id">
+              {{ option.label }}
+            </ORadio>
+          </ORadioGroup>
+        </OFormItem>
+        <OFormItem label="修改状态" required field="metricStatus" :rules="modifyRules">
+          <OSelect v-model="formData.metricStatus" size="large" style="width: 100%">
+            <OOption v-for="item in metricCategory" :key="item" :label="item" :value="item" />
+          </OSelect>
+        </OFormItem>
+        <OFormItem label="修改理由" required field="description" :rules="descriptionRules">
+          <OTextarea
+            v-model="formData.description"
+            :max-length="1000"
+            placeholder="请输入您的理由"
+            resize="none"
+            :rows="4"
+            :clearable="false"
+            :input-on-outlimit="false"
+            style="width: 100%"
+          >
+          </OTextarea>
+        </OFormItem>
+        <div class="button-box">
+          <OButton variant="solid" color="primary" size="large" type="submit">提交反馈</OButton>
+          <OButton variant="outline" color="primary" size="large" class="reset" @click="reset">取消</OButton>
+        </div>
+      </OForm>
+    </div>
+  </ODialog>
+</template>
+
+<style lang="scss" scoped>
+.metric-options {
+  --radio-group-gap: 12px;
+}
+.button-box {
+  display: flex;
+  justify-content: center;
+  .o-btn + .o-btn {
+    margin-left: 16px;
+  }
+}
+
+:deep(.o-form) {
+  color: var(--o-color-info1);
+}
+</style>
diff --git a/src/components/collaboration/TableShowOverflowTips.vue b/src/components/collaboration/TableShowOverflowTips.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b156561a4be6231d07c47d0dd1c34caf0d5b2939
--- /dev/null
+++ b/src/components/collaboration/TableShowOverflowTips.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { OPopover } from '@opensig/opendesign';
+const props = defineProps({
+  content: {
+    type: String,
+    default: () => {
+      return '';
+    },
+  },
+  line: {
+    type: Number,
+    default: () => {
+      return 2;
+    },
+  },
+});
+
+const contentLen = computed(() => props.content.length > props.line * 11);
+</script>
+
+<template>
+  <OPopover v-if="contentLen" position="top" trigger="hover">
+    <template #target>
+      <div class="line-clamp">{{ content }}</div>
+    </template>
+    <div class="box">
+      {{ content }}
+    </div>
+  </OPopover>
+  <template v-else>{{ content }} </template>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  max-width: 184px;
+  max-height: 154px;
+  color: var(--o-color-info1);
+  overflow: hidden auto;
+  @include scrollbar;
+  @include tip1;
+}
+.line-clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: v-bind(line);
+  -webkit-box-orient: vertical;
+  position: relative;
+  word-break: break-all;
+}
+</style>
diff --git a/src/components/detail/DetailAside.vue b/src/components/detail/DetailAside.vue
index aafc61419e9155c7b7a995c4fc0faf0b62f8a721..09be5702c640e126ec361633a793ec2ca34d1692 100644
--- a/src/components/detail/DetailAside.vue
+++ b/src/components/detail/DetailAside.vue
@@ -318,12 +318,6 @@ const onCodeSuccess = () => {
   }
 }
 :deep(.o-table) {
-  th,
-  td {
-    padding: 2px 12px;
-    font-size: 14px !important;
-  }
-
   tbody tr:hover {
     background: none;
   }
@@ -339,11 +333,12 @@ const onCodeSuccess = () => {
 
 .obtn {
   border-radius: 4px;
-  background: var(--o-color-fill3);
+  background: var(--o-color-control2-light);
   border: none;
+  transition: none;
   --btn-color: var(--o-color-info1);
   &:hover {
-    background: var(--o-color-primary4-light);
+    background: var(--o-color-control3-light);
   }
 }
 </style>
diff --git a/src/components/feedbackHistory/FeedbackHistory.vue b/src/components/feedbackHistory/FeedbackHistory.vue
index 8a2836261e840bda3da84e6020485091ab744f52..33c606893b379a5916c06c8a78506dc575d4daba 100644
--- a/src/components/feedbackHistory/FeedbackHistory.vue
+++ b/src/components/feedbackHistory/FeedbackHistory.vue
@@ -159,7 +159,7 @@ const handleCurrentChange = (page: number) => {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin: 40px 0;
+  margin: 24px 0;
   :deep(.el-input) {
     --el-input-text-color: var(--o-color-info1);
   }
diff --git a/src/components/header/AppHeader.vue b/src/components/header/AppHeader.vue
index 879ba28530e62c64bdfb37d69a87117351c6adb5..1d7717b1a97ae99f218afb29bf3a38bce797a136 100644
--- a/src/components/header/AppHeader.vue
+++ b/src/components/header/AppHeader.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { watch } from 'vue';
-import { ODivider } from '@opensig/opendesign';
-import { useRouter } from 'vue-router';
+import { computed, watch, ref } from 'vue';
+import { ODivider, OLink } from '@opensig/opendesign';
+import { useRouter, useRoute } from 'vue-router';
 import { useLangStore } from '@/stores/common';
 import { OPENEULER } from '@/data/config';
 import { useI18n } from 'vue-i18n';
+import { navs, collaborationNav } from '@/data/nav';
+import { useLoginStore, useUserInfoStore } from '@/stores/user';
+import { COLLABORATIONPERMISSION } from '@/data/query';
+import { windowOpen } from '@/utils/common';
+
 import { useTheme } from '@/composables/useTheme';
 import HeaderNav from '@/components/header/HeaderNav.vue';
 import AppLogin from '@/components/header/AppLogin.vue';
@@ -15,8 +20,13 @@ import openeulerLogoDark from '@/assets/openeuler-logo-dark.svg';
 
 const { locale, t } = useI18n();
 const router = useRouter();
+const route = useRoute();
 const langStore = useLangStore();
 const { isDark } = useTheme();
+const loginStore = useLoginStore();
+const userInfoStore = useUserInfoStore();
+const isMainPer = computed(() => userInfoStore.platformMaintainerPermission);
+const isAdminPer = computed(() => userInfoStore.platformAdminPermission);
 
 watch(
   () => {
@@ -32,6 +42,27 @@ const goHome = () => {
     path: `/${locale.value}`,
   });
 };
+
+// 判断是否是协作平台
+const isCollaboration = computed(() => {
+  return COLLABORATIONPERMISSION.includes(route.name as string);
+});
+
+const jump = (href: string) => {
+  if (isAdminPer.value || isMainPer.value) {
+    if (href === 'collaboration') {
+      windowOpen(`/${locale.value}/${href}`, '_blank');
+    } else {
+      router.push({
+        path: `/${locale.value}/${href}${isMainPer.value ? '/application' : '/approval'}`,
+      });
+    }
+  } else {
+    router.push({
+      path: `/${locale.value}/collaboration-permission`,
+    });
+  }
+};
 </script>
 
 <template>
@@ -44,11 +75,15 @@ const goHome = () => {
           </a>
           <ODivider direction="v" :darker="true" />
           <span @click="goHome" class="logo-text">{{ t('software.softwareHome') }}</span>
+          <span v-if="isCollaboration" class="collaboration-text">协作平台</span>
         </div>
-
-        <HeaderNav />
+        <HeaderNav v-if="route.name" :options="isCollaboration ? collaborationNav : navs" />
       </div>
       <div class="header-right">
+        <template v-if="loginStore.isLogined">
+          <OLink v-if="isCollaboration" class="todo" @click="jump(`todo`)">待办中心</OLink>
+          <OLink v-else class="collaboration" @click="jump(`collaboration`)">协作平台</OLink>
+        </template>
         <HeaderTheme />
         <AppLogin />
       </div>
@@ -82,11 +117,25 @@ const goHome = () => {
       cursor: pointer;
       @include h4;
     }
+    .collaboration-text {
+      color: var(--o-color-info1);
+      font-weight: bold;
+      margin-left: 48px;
+      cursor: default;
+      @include h4;
+    }
     .header-left,
     .header-right {
       height: 100%;
       display: flex;
       align-items: center;
+
+      .collaboration,
+      .todo {
+        margin-right: 16px;
+        color: var(--o-color-info1);
+        @include tip1;
+      }
     }
   }
   .logo {
diff --git a/src/components/header/AppLogin.vue b/src/components/header/AppLogin.vue
index 621ac6a581d17c5ec09fa175ef372ea3c694546d..fe273fc1a34f9c9ae69d27af1ea28f8951c25482 100644
--- a/src/components/header/AppLogin.vue
+++ b/src/components/header/AppLogin.vue
@@ -4,6 +4,7 @@ import { storeToRefs } from 'pinia';
 import { ODropdown, ODropdownItem, OIcon, OIconLoading } from '@opensig/opendesign';
 import { doLogin, logout } from '@/shared/login';
 import { useLoginStore, useUserInfoStore } from '@/stores/user';
+import { windowOpen } from '@/utils/common';
 import LoginIcon from '~icons/app/icon-login.svg';
 
 const USER_CENTER = import.meta.env.VITE_LOGIN_URL;
@@ -15,7 +16,7 @@ const loginStore = useLoginStore();
 const login = () => doLogin();
 
 const toUserCenter = () => {
-  window.open(USER_CENTER);
+  windowOpen(USER_CENTER);
 };
 </script>
 
diff --git a/src/components/header/HeaderNav.vue b/src/components/header/HeaderNav.vue
index efdbfc53d7ea3c7316c726c94ecd03fd04c8a1e2..4af9ed30b9c1da2a3a1b138680750293ea21b41b 100644
--- a/src/components/header/HeaderNav.vue
+++ b/src/components/header/HeaderNav.vue
@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, type PropType } from 'vue';
 import { navs } from '@/data/nav';
 import { useRoute, useRouter } from 'vue-router';
 import { computed } from 'vue';
 import { useLocale } from '@/composables/useLocale';
 import { useLoginStore, useUserInfoStore } from '@/stores/user';
 
+interface NavsT {
+  id: string;
+  label: {
+    zh: string;
+    en: string;
+  };
+  href: string;
+}
+
+const props = defineProps({
+  options: {
+    type: Array as PropType<NavsT[]>,
+    default: () => [],
+  },
+});
+
 const route = useRoute();
 const router = useRouter();
 const userInfoStore = useUserInfoStore();
@@ -26,43 +42,7 @@ const onMouseLeave = () => {
 
 // -------------------- 选中事件 --------------------
 const selectedIndex = computed(() => {
-  let idx = -1;
-
-  if (route.path === `/${locale.value}` || route.path === `/${locale.value}/`) {
-    idx = 0;
-    return idx;
-  }
-
-  if (route.path.includes('/field')) {
-    idx = 1;
-    return idx;
-  }
-
-  if (route.path.includes('/rpm')) {
-    idx = 2;
-    return idx;
-  }
-
-  if (route.path.includes('/image')) {
-    idx = 3;
-    return idx;
-  }
-
-  // if (route.path.includes('/epkg')) {
-  //   idx = 4;
-  //   return idx;
-  // }
-  if (route.path.includes('/oepkg')) {
-    idx = 4;
-    return idx;
-  }
-
-  if (route.path.includes('/upstream')) {
-    idx = 5;
-    return idx;
-  }
-
-  return idx;
+  return props.options.findIndex((item) => route.name?.toString().includes(item.id));
 });
 
 // 导航跳转
@@ -74,7 +54,7 @@ const jumpTo = (href: string) => {
 <template>
   <nav class="header-nav">
     <ul class="nav-list">
-      <template v-for="(item, idx) in navs" :key="item.id">
+      <template v-for="(item, idx) in options" :key="item.id">
         <li
           v-if="item.id !== 'upstream' || upstreamPermission"
           :id="'e2e_headerNav_' + item.id"
diff --git a/src/composables/useCheckbox.ts b/src/composables/useCheckbox.ts
new file mode 100644
index 0000000000000000000000000000000000000000..783926684fda593cfa07aed33cce323528adb27f
--- /dev/null
+++ b/src/composables/useCheckbox.ts
@@ -0,0 +1,74 @@
+import { computed, ref, toValue, watch, type MaybeRefOrGetter } from 'vue';
+
+export const useCheckbox = <T>(datasource: MaybeRefOrGetter<T[]>, cbValueExtractor: (item: T) => string | number) => {
+  const checkboxes = ref<(string | number)[]>([]);
+  const indeterminate = ref<boolean>(false);
+  const parentCheckbox = ref<(string | number)[]>([]);
+  const isCheckedAll = computed(() => parentCheckbox.value.length > 0);
+  const ONE = [1];
+  const EMPTY: any[] = [];
+
+  const checkAll = () => {
+    indeterminate.value = false;
+    parentCheckbox.value = ONE;
+  };
+
+  const clearCheckboxes = () => {
+    indeterminate.value = false;
+    parentCheckbox.value = EMPTY;
+  };
+
+  watch(
+    () => parentCheckbox.value.length,
+    (length) => {
+      const ds = toValue(datasource);
+      if (ds.length === 0) {
+        return;
+      }
+      if (length) {
+        if (checkboxes.value.length < ds.length) {
+          checkboxes.value = ds.map(cbValueExtractor);
+        }
+      } else {
+        if (!indeterminate.value && checkboxes.value.length > 0) {
+          checkboxes.value = EMPTY;
+        }
+      }
+    }
+  );
+
+  watch(
+    () => checkboxes.value.length,
+    (length) => {
+      const ds = toValue(datasource);
+      if (ds.length === 0) {
+        return;
+      }
+      if (length === ds.length) {
+        if (!isCheckedAll.value) {
+          parentCheckbox.value = ONE;
+        }
+        indeterminate.value = false;
+      } else if (length === 0) {
+        if (isCheckedAll.value) {
+          parentCheckbox.value = EMPTY;
+        }
+        indeterminate.value = false;
+      } else {
+        if (isCheckedAll.value) {
+          parentCheckbox.value = EMPTY;
+        }
+        indeterminate.value = true;
+      }
+    }
+  );
+
+  return {
+    checkboxes,
+    indeterminate,
+    parentCheckbox,
+    isCheckedAll,
+    clearCheckboxes,
+    checkAll,
+  };
+};
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
index 33668b8871e9245c0e91a0a723024799867a2910..6f3757cbdc7f3d4c464da84ba0a52100bdb20fd4 100644
--- a/src/composables/useTheme.ts
+++ b/src/composables/useTheme.ts
@@ -1,9 +1,12 @@
 import { watch, computed, onMounted } from 'vue';
 import { useAppearance } from '@/stores/common';
-
+import {
+  getCustomCookie,
+  setCustomCookie,
+} from '@/utils/cookie';
 import { isClient } from '@opensig/opendesign';
 
-const APPEARANCE_KEY = 'easysoftware-theme';
+const APPEARANCE_KEY = 'openEuler-theme-appearance';
 
 export const useTheme = () => {
   const appearanceStore = useAppearance();
@@ -15,7 +18,8 @@ export const useTheme = () => {
     if (isClient) {
       const theme = appearanceStore.value === 'dark' ? 'light' : 'dark';
       appearanceStore.value = theme;
-      localStorage.setItem(APPEARANCE_KEY, theme);
+
+      setCustomCookie(APPEARANCE_KEY, theme, 180, import.meta.env.VITE_COOKIE_DOMAIN);
     }
   };
 
@@ -27,18 +31,21 @@ export const useTheme = () => {
       const documentElement = document.documentElement;
       val === 'light' && documentElement.removeAttribute('data-o-theme');
       val === 'dark' && documentElement.setAttribute('data-o-theme', 'dark');
+    },
+    {
+      immediate: true
     }
   );
 
   onMounted(() => {
     let theme;
-    if (!localStorage.getItem(APPEARANCE_KEY)) {
+    if (!getCustomCookie(APPEARANCE_KEY)) {
       const prefereDark = window.matchMedia(
         '(prefers-color-scheme: dark)'
       ).matches;
       theme = prefereDark ? 'dark' : 'light';
     } else {
-      theme = localStorage.getItem(APPEARANCE_KEY);
+      theme = getCustomCookie(APPEARANCE_KEY);
     }
 
     appearanceStore.value = theme === 'dark' ? 'dark' : 'light';
diff --git a/src/data/nav.ts b/src/data/nav.ts
index 1a723383e37661a9d562d45d1ff0969afd431442..498b00f970a8ddd48bf24ba7f75dc2569fa49477 100644
--- a/src/data/nav.ts
+++ b/src/data/nav.ts
@@ -24,7 +24,7 @@ export const navs = [
     href: '/rpm',
   },
   {
-    id: 'apppkg',
+    id: 'image',
     label: {
       zh: '应用镜像',
       en: 'Image',
@@ -56,3 +56,15 @@ export const navs = [
     href: '/upstream',
   },
 ];
+
+
+export const collaborationNav = [
+  {
+    id: 'collaboration',
+    label: {
+      zh: '软件维护详情',
+      en: 'Collaboration',
+    },
+    href: '/collaboration',
+  },
+]
\ No newline at end of file
diff --git a/src/data/query.ts b/src/data/query.ts
index 3a07e4523930dee3cf2cf79c2dc41c72b9b8c68c..45ad4084dd8f22abd20ce294dad9c0a215f48f8e 100644
--- a/src/data/query.ts
+++ b/src/data/query.ts
@@ -44,3 +44,7 @@ export const maintainerDefaults = {
   gitee_id: 'georgecao',
 }
 
+
+
+// 协作平台权限 route name
+export const COLLABORATIONPERMISSION = ['todo', 'collaboration', 'todo-detail'];
\ No newline at end of file
diff --git a/src/data/todo/index.ts b/src/data/todo/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..18f18d9687527e19060cc858f3a54c56d452a7ec
--- /dev/null
+++ b/src/data/todo/index.ts
@@ -0,0 +1,95 @@
+export const applicationColumns = [
+  { label: '软件仓库', key: 'repo', type: 'repo' },
+  { label: '申请类型', key: 'metric', type: 'metric' },
+  { label: '修改状态', key: 'metricStatus', type: 'metricStatus' },
+  { label: '修改理由', key: 'description', type: 'description' },
+  { label: '申请状态', key: 'applyStatus', type: 'applyStatus' },
+  { label: '审批人', key: 'administrator', type: 'administrator' },
+  { label: '审批意见', key: 'comment', type: 'comment' },
+  { label: '申请单号', key: 'applyIdString', type: 'applyId' },
+  { label: '申请时间', key: 'updateAt', type: 'updateAt' },
+  { label: '操作', key: 'operation', type: 'operation' },
+]
+
+export const approvalColumns = [
+  { label: '软件仓库', key: 'repo', type: 'repo' },
+  { label: '申请类型', key: 'metric', type: 'metric' },
+  { label: '修改状态', key: 'metricStatus', type: 'metricStatus' },
+  { label: '修改理由', key: 'description', type: 'description' },
+  { label: '申请人', key: 'maintainer', type: 'maintainer' },
+  { label: '申请单号', key: 'applyIdString', type: 'applyId' },
+  { label: '申请时间', key: 'updateAt', type: 'updateAt' },
+  { label: '申请状态', key: 'applyStatus', type: 'applyStatus' },
+  { label: '操作', key: 'operation', type: 'operation' },
+]
+
+export const approvalHistoryColumns = [
+  { label: '软件仓库', key: 'repo', type: 'repo' },
+  { label: '申请类型', key: 'metric', type: 'metric' },
+  { label: '修改状态', key: 'metricStatus', type: 'metricStatus' },
+  { label: '审批意见', key: 'comment', type: 'comment' },
+  { label: '申请人', key: 'maintainer', type: 'maintainer' },
+  { label: '申请单号', key: 'applyIdString', type: 'applyId' },
+  { label: '审批时间', key: 'updateAt', type: 'updateAt' },
+  { label: '审批状态', key: 'applyStatus', type: 'applyStatus' },
+  { label: '操作', key: 'operation', type: 'operation' },
+]
+
+// 申请状态
+export const applyStatusType = [
+  { label: '待审批', value: 'OPEN' },
+  { label: '已驳回', value: 'REJECTED' },
+  { label: '已通过', value: 'APPROVED' },
+  { label: '已撤销', value: 'REVOKED' },
+]
+
+// 申请类型
+export const applicationType = [
+  {
+    id: 'cveStatus',
+    label: 'CVE状态',
+    children: ['有CVE且全部未修复', '有CVE部分修复', '有CVE且全部修复', '没有CVE问题'],
+  },
+  {
+    id: 'issueStatus',
+    label: 'Issue状态',
+    children: ['没有Issue修复', '有部分Issue修复', '全部Issue修复'],
+  },
+  {
+    id: 'prStatus',
+    label: '软件包更新状态',
+    children: ['没有PR提交', '有PR提交未合入', '有PR合入'],
+  },
+  {
+    id: 'versionStatus',
+    label: '软件包版本状态',
+    children: ['版本正常', '落后版本'],
+  },
+  {
+    id: 'orgStatus',
+    label: '贡献组织状态',
+    children: ['贡献组织多', '贡献组织少'],
+  },
+  {
+    id: 'contributorStatus',
+    label: '贡献人员状态',
+    children: ['贡献人员多', '贡献人员少'],
+  },
+];
+// 能申请的类型
+export const applicationTypeCurrent = [
+  {
+    id: 'cveStatus',
+    label: 'CVE状态',
+    children: ['有CVE且全部未修复', '有CVE部分修复', '有CVE且全部修复', '没有CVE问题'],
+  },
+  {
+    id: 'versionStatus',
+    label: '软件包版本状态',
+    children: ['版本正常', '落后版本'],
+  },
+];
+
+
+export const kindTypes = ['everything-exclude-baseos', 'epol', 'baseos']
+
diff --git a/src/i18n/collaboration/collaboration-en.ts b/src/i18n/collaboration/collaboration-en.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c243a55ad544810a2c56a9e023188931ba83acf1
--- /dev/null
+++ b/src/i18n/collaboration/collaboration-en.ts
@@ -0,0 +1,5 @@
+export default {
+  application: '我的申请',
+  approval: '待我审批',
+  approved: '我审批过的',
+};
diff --git a/src/i18n/collaboration/collaboration-zh.ts b/src/i18n/collaboration/collaboration-zh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c243a55ad544810a2c56a9e023188931ba83acf1
--- /dev/null
+++ b/src/i18n/collaboration/collaboration-zh.ts
@@ -0,0 +1,5 @@
+export default {
+  application: '我的申请',
+  approval: '待我审批',
+  approved: '我审批过的',
+};
diff --git a/src/i18n/collaboration/index.ts b/src/i18n/collaboration/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d80bc75ec77f518949f02c2ec51bc024f5784424
--- /dev/null
+++ b/src/i18n/collaboration/index.ts
@@ -0,0 +1,7 @@
+import zh from './collaboration-zh';
+import en from './collaboration-en';
+
+export default {
+  zh,
+  en,
+};
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 6490d6dfb792969f5858ff0687aa747846919efc..3d78515d23aa8246a4f3f81260abd5cdac1489de 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -4,6 +4,7 @@ import common from './common';
 import software from './software';
 import upstream from './upstream';
 import detail from '@/i18n/detail';
+import collaboration from '@/i18n/collaboration';
 
 const messages = {
   zh: {
@@ -11,12 +12,14 @@ const messages = {
     software: software.zh,
     upstream: upstream.zh,
     detail: detail.zh,
+    collaboration: collaboration.zh,
   },
   en: {
     common: common.en,
     software: software.en,
     upstream: upstream.en,
     detail: detail.en,
+    collaboration: collaboration.en,
   },
 };
 
diff --git a/src/router/index.ts b/src/router/index.ts
index feae0dad0485c8eca494eac4dba26ed0f4cc4220..8c02f51e0dc10323fa6573e62825a3bc6822daff 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,8 @@ import { useLangStore, useViewStore } from '@/stores/common';
 import { tryLogin } from '@/shared/login';
 import { useLoginStore, useUserInfoStore } from '@/stores/user';
 import { queryUpstreamPermission } from '@/api/api-user';
+import { getCollaborationPermissions } from '@/api/api-collaboration';
+import { COLLABORATIONPERMISSION } from '@/data/query';
 
 const routes = [
   {
@@ -82,6 +84,26 @@ const routes = [
     name: 'openstack',
     component: () => import('@/views/solution/TheOpenStack.vue'),
   },
+  {
+    path: '/zh/collaboration',
+    name: 'collaboration',
+    component: () => import('@/views/collaboration/TheCollaboration.vue'),
+  },
+  {
+    path: '/zh/collaboration-permission',
+    name: 'collaboration-permission',
+    component: () => import('@/views/collaboration/CollaborationPermission.vue'),
+  },
+  {
+    path: '/zh/todo/:type',
+    name: 'todo',
+    component: () => import('@/views/todo/TheTodo.vue'),
+  },
+  {
+    path: '/zh/todo/:type/:id',
+    name: 'todo-detail',
+    component: () => import('@/views/todo/TheTodoDetail.vue'),
+  },
   // 默认路由
   {
     path: '/:path(.*)*',
@@ -114,27 +136,58 @@ router.beforeEach(async (to) => {
 
   const userInfoStore = useUserInfoStore();
   const isUpstream = to.name === 'upstream';
+  const isPlatform = COLLABORATIONPERMISSION.includes(to.name as string);
   const loginStore = useLoginStore();
+
   if (loginStore.isLogined) {
     if (isUpstream) {
       return userInfoStore.upstreamPermission ? true : { name: 'notFound' };
     }
+    if (isPlatform) {
+      return userInfoStore.platformAdminPermission || userInfoStore.platformMaintainerPermission ? true : { name: 'notFound' };
+    }
+
     return true;
   }
 
   await tryLogin();
-  if (userInfoStore.upstreamPermission === null && loginStore.isLogined) {
+
+  // 没登陆、没权限 直接404
+  if (!loginStore.isLogined && (isUpstream || isPlatform)) {
+    return { name: 'notFound' };
+  }
+
+  if (userInfoStore.upstreamPermission === null && loginStore.isLogined && !isPlatform) {
     try {
-      const upstreamPermission = await queryUpstreamPermission();
-      userInfoStore.upstreamPermission = upstreamPermission.data.allow_access;
+      const { data } = await queryUpstreamPermission();
+      if (data.allow_access) {
+        userInfoStore.upstreamPermission = data.allow_access;
+      }
     } catch {
-      // 如果queryUpstreamPermission不是401
-      return isUpstream ? { name: 'notFound' } : true;
+      userInfoStore.upstreamPermission = false;
     }
   }
 
-  if (isUpstream) {
-    return loginStore.isLogined && userInfoStore.upstreamPermission ? true : { name: 'notFound' };
+
+  // 协作平台权限
+  if ((userInfoStore.platformMaintainerPermission === null || userInfoStore.platformAdminPermission === null) && loginStore.isLogined) {
+    try {
+      const { data } = await getCollaborationPermissions();
+
+      if (data.permissions.length > 0) {
+        if (data.permissions.includes('administrator')) {
+          userInfoStore.platformAdminPermission = true;
+        }
+        if (data.permissions.includes('maintainer')) {
+          userInfoStore.platformMaintainerPermission = true;
+        }
+      } else {
+        return isPlatform ? { name: 'collaboration-permission' } : true;
+      }
+
+    } catch {
+      return isPlatform ? { name: 'collaboration-permission' } : true;
+    }
   }
 
   return true;
diff --git a/src/shared/login.ts b/src/shared/login.ts
index 05f2aa348952bb957c2b9a1cdd905fa5e4768f12..07c04a448da022f68abc04b8c20d17503123e045 100644
--- a/src/shared/login.ts
+++ b/src/shared/login.ts
@@ -1,7 +1,7 @@
 import Cookies from 'js-cookie';
 import { useLangStore } from '@/stores/common';
 import { useLoginStore, useUserInfoStore } from '@/stores/user';
-import { queryUpstreamPermission, queryUserInfo } from '@/api/api-user';
+import { queryUserInfo } from '@/api/api-user';
 
 const LOGIN_URL = import.meta.env.VITE_LOGIN_URL;
 const XSRF_COOKIE_NAME = import.meta.env.VITE_XSRF_COOKIE_NAME;
@@ -43,7 +43,11 @@ export function clearUserAuth() {
   // 清除内存中用户信息
   useUserInfoStore().$reset();
   // 清除cookie
-  Cookies.remove(LOGIN_KEYS.CSRF_TOKEN);
+  if (import.meta.env.DEV) {
+    Cookies.remove(LOGIN_KEYS.CSRF_TOKEN);
+  } else {
+    Cookies.remove(LOGIN_KEYS.CSRF_TOKEN, { domain: import.meta.env.VITE_COOKIE_DOMAIN, path: '/', secure: true });
+  }
 }
 
 /**
@@ -59,11 +63,14 @@ export async function tryLogin() {
     loginStore.setLoginStatus(LOGIN_STATUS.NOT);
     return;
   }
+
   try {
     loginStore.setLoginStatus(LOGIN_STATUS.DOING);
     userInfoStore.$patch(await queryUserInfo());
     loginStore.setLoginStatus(LOGIN_STATUS.DONE);
   } catch (error) {
     loginStore.setLoginStatus(LOGIN_STATUS.FAILED);
+
+
   }
 }
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 912a1bb8394ab254478b13e21f5a43ee4f82fe98..221eeb6d8dfd165dde3dc0cb759ee1cea7fcb5da 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -1,3 +1,4 @@
+import type { Identity } from '@/@types/type-user';
 import { LOGIN_STATUS, type LoginStatusT } from '@/shared/login';
 import { defineStore } from 'pinia';
 
@@ -7,9 +8,14 @@ import { defineStore } from 'pinia';
 export const useUserInfoStore = defineStore('userInfo', {
   state: () => {
     return {
+      identities: [] as Identity[],
       photo: '' as string,
       username: '' as string,
       upstreamPermission: null as boolean | null,
+      // 协作平台admin权限
+      platformAdminPermission: null as boolean | null,
+      // 协作平台maintainer权限
+      platformMaintainerPermission: null as boolean | null,
     }
   },
 });
diff --git a/src/utils/collaboration.ts b/src/utils/collaboration.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6c840836082571087c35bf0961646f4f0ab8b6c6
--- /dev/null
+++ b/src/utils/collaboration.ts
@@ -0,0 +1,32 @@
+import { applicationType, applyStatusType } from '@/data/todo/'
+
+// 申请类型转换
+export const applicationTypeConvert = (v: string) => {
+  const index = applicationType.findIndex((item) => item.id === v);
+  if (index === -1) {
+    return v;
+  }
+  return applicationType[index].label;
+}
+
+
+// 仓库活跃度
+export const repoStatusArr = ['健康', '活跃', '静止', '缺人维护', '没有人维护'];
+export const repoStatusIndex = (v: string) => {
+  return repoStatusArr.findIndex((item) => item === v);
+};
+
+
+// 申请状态
+export const applyStatusConvert = (v: string) => {
+  const index = applyStatusType.findIndex((item) => item.value === v);
+  if (index === -1) {
+    return v;
+  }
+  return applyStatusType[index].label;
+};
+
+// 最新版本修改为版本正常
+export const versionLatestStatusConvert = (v: string) => {
+  return v === '最新版本' ? '版本正常' : v
+}
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 9d1aea8a6e446eb72a04568c8c6085548e2b1286..87cb450bd16acddd44606ca1ad78e4917702b6f4 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -20,16 +20,27 @@ export const xssAllTag = (str: string) => {
 /**
  * 日期转 xxxx/xx/xx 格式时间
  * @param {v}  待转换时间
+ * @param {isTime:boolean} 返回格式 2024/01/01 01:00
  * @returns {string} 返回格式化时间，如 2024/01/01
  */
-export const formatDateTime = (v: string) => {
-  const date = new Date(v);
+export const formatDateTime = (v: string, isTime?: boolean) => {
+  if (v) {
+    const date = new Date(v);
 
-  const year = date.getFullYear();
-  const month = ('0' + (date.getMonth() + 1)).slice(-2);
-  const day = ('0' + date.getDate()).slice(-2);
+    const year = date.getFullYear();
+    const month = ('0' + (date.getMonth() + 1)).slice(-2);
+    const day = ('0' + date.getDate()).slice(-2);
 
-  return `${year}/${month}/${day}`;
+    if (isTime) {
+      const hh = ('0' + date.getHours()).slice(-2);
+      const mm = ('0' + date.getMinutes()).slice(-2);
+
+      return `${year}/${month}/${day} ${hh}:${mm}`;
+    }
+
+    return `${year}/${month}/${day}`;
+  }
+  return '-'
 };
 
 /**
@@ -88,10 +99,10 @@ export const checkOriginLink = (path: string) => {
  */
 import type { SearchSQLT, SearchESParamsT } from '@/@types/domain';
 export const getParamsRules = (data: any) => {
-  type ParamsKeyT = keyof SearchSQLT | SearchESParamsT;
+  type ParamsKeyT = keyof any;
 
   type NewDataT = {
-    [x: string]: SearchSQLT | SearchESParamsT;
+    [x: string]: any;
   };
 
   const newData: NewDataT = {};
diff --git a/src/utils/cookie.ts b/src/utils/cookie.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e147a3910c700e90ccd82915c26cceb18628819e
--- /dev/null
+++ b/src/utils/cookie.ts
@@ -0,0 +1,30 @@
+import Cookies from 'js-cookie';
+
+/**
+ * 获取指定key的cookie值
+ * @param key
+ * @returns
+ */
+export const getCustomCookie = (key: string) => {
+  return Cookies.get(key);
+}
+
+/**
+ * 设置cookie
+ * @param key cookie的key
+ * @param value cookie的值
+ * @param day cookie的过期时间 默认180天
+ * @param domain domain地址
+ */
+export const setCustomCookie = (key: string, value: string, day = 180, domain: string = location.hostname) => {
+  Cookies.set(key, value, { expires: day, path: '/', domain: domain });
+}
+
+/**
+ * 删除cookie
+ * @param key cookie的key
+ * @param domain domain地址
+ */
+export const removeCustomCookie = (key: string, domain: string = location.hostname) => {
+  Cookies.remove(key, { path: '/', domain: domain });
+}
diff --git a/src/views/collaboration/CollaborationPermission.vue b/src/views/collaboration/CollaborationPermission.vue
new file mode 100644
index 0000000000000000000000000000000000000000..92136416e0f6d8be985fc3579bb7b68b52997080
--- /dev/null
+++ b/src/views/collaboration/CollaborationPermission.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { OButton } from '@opensig/opendesign';
+import { windowOpen } from '@/utils/common';
+import { useUserInfoStore } from '@/stores/user';
+
+const userInfoStore = useUserInfoStore();
+
+// 判断是否绑定gitee
+const isGiteeAccount = computed(() => !!userInfoStore.identities.find((id) => id.identity === 'gitee'));
+const isAdminPer = computed(() => userInfoStore.platformAdminPermission);
+const isMaintainerPer = computed(() => userInfoStore.platformMaintainerPermission);
+
+// 跳转个人中心绑定账号
+const USER_CENTER = import.meta.env.VITE_LOGIN_URL;
+const jumpAccount = () => {
+  windowOpen(USER_CENTER);
+};
+</script>
+
+<template>
+  <ContentWrapper verticalPadding="40px">
+    <Result404>
+      <template #description>
+        <template v-if="isGiteeAccount && (!isAdminPer || !isMaintainerPer)">
+          <div class="content">您无权限访问协作平台</div>
+        </template>
+        <template v-else>
+          <div class="content">
+            <p>如果您是Maintainer,请先前往个人中心-账号绑定 绑定您的Gitee账号, 以获取软件包维护详情信息</p>
+          </div>
+          <OButton variant="solid" size="large" color="primary" @click="jumpAccount">前往绑定</OButton>
+        </template>
+      </template>
+    </Result404>
+  </ContentWrapper>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  color: var(--o-color-info1);
+  margin-bottom: 24px;
+  @include text1;
+  p {
+    margin-bottom: 8px;
+  }
+}
+</style>
diff --git a/src/views/collaboration/TheCollaboration.vue b/src/views/collaboration/TheCollaboration.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3aca613c9ac322d2eed323a8827c0b4aba2d6744
--- /dev/null
+++ b/src/views/collaboration/TheCollaboration.vue
@@ -0,0 +1,574 @@
+<script setup lang="ts">
+import { ref, watch, computed, type ComponentPublicInstance, reactive, toRefs } from 'vue';
+import { OTable, OTag, OLink, OIcon, OPopup, OPopover } from '@opensig/opendesign';
+import { getMaintainerRepos, getAdminRepos, getSigList, getRepoList } from '@/api/api-collaboration';
+import { useUserInfoStore } from '@/stores/user';
+import ExternalLink from '@/components/ExternalLink.vue';
+import Indicators from '@/components/collaboration/Indicators.vue';
+import StatusFeedback from '@/components/collaboration/StatusFeedback.vue';
+import Result404 from '@/components/Result404.vue';
+import { COUNT_PAGESIZE } from '@/data/query';
+
+import IconOutlink from '~icons/pkg/icon-outlink.svg';
+import IconState from '~icons/pkg/icon-state.svg';
+import IconFilter from '~icons/app/icon-filter.svg';
+import FilterableCheckboxes from '@/components/FilterableCheckboxes.vue';
+import { kindTypes, applicationType } from '@/data/todo';
+import { onClickOutside, useDebounceFn } from '@vueuse/core';
+import { repoStatusIndex, repoStatusArr, versionLatestStatusConvert } from '@/utils/collaboration';
+
+const columns = [
+  { label: '软件仓库', key: 'repo', type: 'repo' },
+  { label: '类别', key: 'kind', type: 'kind' },
+  { label: 'SIG名称', key: 'sigName', type: 'sig' },
+  { label: 'CVE状态', key: 'cveStatus', type: 'cve' },
+  { label: 'Issue状态', key: 'issueStatus', type: 'issue' },
+  { label: '软件包更新状态', key: 'prStatus', type: 'pr' },
+  { label: '软件包版本状态', key: 'versionStatus', type: 'version' },
+  { label: '贡献组织状态', key: 'orgStatus', type: 'org' },
+  { label: '贡献人员状态', key: 'contributorStatus', type: 'personnel' },
+  { label: '状态', key: 'status', type: 'status' },
+  { label: '操作', key: 'operation', type: 'operation' },
+];
+
+const allSigs = ref<string[]>();
+const allRepos = ref<string[]>();
+
+// 筛选
+const filterIconRefs = ref(new Array<ComponentPublicInstance>(columns.length));
+
+/** 筛选组件是否显示的开关 */
+const filterSwitches = ref(columns.map(() => false));
+
+const setPopupClickoutSideFn = (el: any, index: number) => {
+  onClickOutside(el, () => {
+    filterSwitches.value[index] = false;
+  });
+};
+
+const repoFilterLoading = ref(false);
+const sigFilterLoading = ref(false);
+
+/** 切换某个筛选组件显示开关 */
+const switchFilterVisible = (index: number) => {
+  filterSwitches.value[index] = true;
+  if (index === 0) {
+    // 筛选仓库
+    if (!allRepos.value?.length) {
+      repoFilterLoading.value = true;
+      getRepoList()
+        .then((list) => (allRepos.value = list))
+        .finally(() => (repoFilterLoading.value = false));
+    }
+  }
+  if (index === 2) {
+    // 筛选sig
+    if (!allSigs.value?.length) {
+      sigFilterLoading.value = true;
+      getSigList()
+        .then((list) => (allSigs.value = list))
+        .finally(() => (sigFilterLoading.value = false));
+    }
+  }
+};
+
+/** 各表格列对应的已选中的筛选项 */
+const activeFilterValues = ref(new Array<string>(columns.length));
+
+/** 当前有选中筛选项的表格列的数组下标 */
+const currentActiveFilterIndices = ref(new Set<number>());
+
+const onFilterChange = (type: string, index: number, val: string) => {
+  // 关掉筛选组件
+  filterSwitches.value = columns.map(() => false);
+  currentPage.value = 1;
+  if (val) {
+    activeFilterValues.value[index] = val;
+    currentActiveFilterIndices.value.add(index);
+  } else {
+    activeFilterValues.value[index] = '';
+    currentActiveFilterIndices.value.delete(index);
+  }
+  if (filterParams.versionStatus === '版本正常') {
+    filterParams.versionStatus = '最新版本';
+  }
+};
+
+const SRCOPENEULER = 'https://gitee.com/src-openeuler/';
+
+const userInfoStore = useUserInfoStore();
+const isMainPer = computed(() => userInfoStore.platformMaintainerPermission);
+const isAdminPer = computed(() => userInfoStore.platformAdminPermission);
+
+// 分页
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+
+// 筛选条件
+const filterParams = reactive<Record<string, string | number>>({
+  repo: '',
+  kind: '',
+  sigName: '',
+  cveStatus: '',
+  issueStatus: '',
+  prStatus: '',
+  versionStatus: '',
+  orgStatus: '',
+  contributorStatus: '',
+  status: '',
+});
+
+const searchParams = computed(() => {
+  return {
+    pageNum: currentPage.value,
+    pageSize: pageSize.value,
+    ...filterParams,
+  };
+});
+
+const reposData = ref([]);
+const isLoading = ref(false);
+const isError = ref(false);
+
+// Maintainer 数据
+const queryMaintainerRepos = () => {
+  isLoading.value = true;
+
+  getMaintainerRepos(searchParams.value)
+    .then((res) => {
+      reposData.value = res.data.list;
+      total.value = res.data.total;
+      isLoading.value = false;
+    })
+    .catch(() => {
+      reposData.value = [];
+      isError.value = true;
+      isLoading.value = false;
+    });
+};
+
+// Admin 数据
+const queryAdminRepos = () => {
+  isLoading.value = true;
+
+  getAdminRepos(searchParams.value)
+    .then((res) => {
+      reposData.value = res.data.list;
+      total.value = res.data.total;
+      isLoading.value = false;
+    })
+    .catch(() => {
+      reposData.value = [];
+      isError.value = true;
+      isLoading.value = false;
+    });
+};
+
+const pageInit = () => {
+  if (isAdminPer.value) {
+    queryAdminRepos();
+  }
+  if (isMainPer.value) {
+    queryMaintainerRepos();
+  }
+};
+
+const loading = ref(false);
+
+// 分页
+const handleSizeChange = (val: number) => {
+  pageSize.value = val;
+  currentPage.value = 1;
+};
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+};
+
+// 外链确认
+const showExternalDlg = ref(false);
+const externalLink = ref('');
+const changeExternalDialog = (href: string) => {
+  externalLink.value = href;
+  showExternalDlg.value = true;
+};
+
+const showDlg = ref(false);
+
+const showFeedbackDlg = ref(false);
+const repoValue = ref('');
+const changeFeedback = (v: string) => {
+  showFeedbackDlg.value = true;
+  repoValue.value = v;
+};
+
+// 反馈历史
+const showFeedbacHistroykDlg = ref(false);
+const changeFeedbackHistory = (v: string) => {
+  repoValue.value = v;
+  showFeedbacHistroykDlg.value = true;
+};
+
+// 类型数据
+const metricTypes = (v: string) => {
+  const index = applicationType.findIndex((item) => item.id === v);
+  if (index === -1) {
+    return [];
+  }
+  return applicationType[index].children;
+};
+
+watch(
+  () => searchParams.value,
+  () => {
+    pageInit();
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+<template>
+  <div class="platform-header">
+    <ContentWrapper>
+      <h1>软件维护详情</h1>
+    </ContentWrapper>
+  </div>
+  <ContentWrapper :vertical-padding="['24px', '72px']" class="collaboration-wrap">
+    <AppLoading :loading="isLoading" />
+    <template v-if="!isLoading">
+      <div class="indicators">
+        <span @click="showDlg = true" class="text"
+          ><OIcon><IconState /></OIcon>状态指标说明</span
+        >
+        <Indicators v-if="showDlg" @change="showDlg = false" />
+      </div>
+      <div class="platform-main">
+        <OTable :columns="columns" :data="reposData" :loading="loading" border="row" :class="{ admin: isAdminPer }">
+          <template #head="{ columns }">
+            <OPopup
+              trigger="none"
+              style="--popup-radius: 4px"
+              v-for="(item, index) in columns"
+              :key="item.type"
+              :visible="filterSwitches[index]"
+              :unmount-on-hide="false"
+              :offset="-8"
+              position="bl"
+            >
+              <template #target>
+                <th :class="item.type">
+                  <div class="header-cell">
+                    {{ item.label }}
+                    <template v-if="item.key !== 'operation'">
+                      <OIcon
+                        :ref="(el) => (filterIconRefs[index] = el as ComponentPublicInstance)"
+                        class="filter-icon"
+                        :style="currentActiveFilterIndices.has(index) ? { color: 'var(--o-color-primary1)' } : {}"
+                        @click="switchFilterVisible(index)"
+                        ><IconFilter
+                      /></OIcon>
+                      <OPopover v-if="currentActiveFilterIndices.has(index) && activeFilterValues[index]" :target="filterIconRefs[index]" trigger="hover">
+                        <p class="bubble-content">
+                          <span class="title">{{ item.label }}:</span>
+                          {{ activeFilterValues[index] }}
+                        </p>
+                      </OPopover>
+                    </template>
+                  </div>
+                </th>
+              </template>
+              <div :ref="(el) => setPopupClickoutSideFn(el, index)">
+                <FilterableCheckboxes
+                  v-if="item.key === 'repo'"
+                  v-model="filterParams[item.key]"
+                  :loading="repoFilterLoading"
+                  @change="onFilterChange(item.key, index, $event)"
+                  :values="allRepos"
+                />
+                <FilterableCheckboxes
+                  v-else-if="item.key === 'sigName'"
+                  v-model="filterParams[item.key]"
+                  :loading="sigFilterLoading"
+                  @change="onFilterChange(item.key, index, $event)"
+                  :values="allSigs"
+                />
+                <FilterableCheckboxes
+                  v-else-if="item.key === 'kind'"
+                  v-model="filterParams[item.key]"
+                  @change="onFilterChange(item.key, index, $event)"
+                  :filterable="false"
+                  :values="kindTypes"
+                />
+                <FilterableCheckboxes
+                  v-else-if="item.key === 'status'"
+                  :filterable="false"
+                  v-model="filterParams[item.key]"
+                  @change="onFilterChange(item.key, index, $event)"
+                  :values="repoStatusArr"
+                />
+                <FilterableCheckboxes
+                  v-else
+                  v-model="filterParams[item.key]"
+                  :filterable="false"
+                  @change="onFilterChange(item.key, index, $event)"
+                  :values="metricTypes(item.key)"
+                />
+              </div>
+            </OPopup>
+          </template>
+          <template #td_repo="{ row }">
+            <OLink color="primary" class="link-external" hover-underline @click="changeExternalDialog(`${SRCOPENEULER + row.repo}`)"
+              ><span class="text">{{ row.repo }} </span><OIcon><IconOutlink /></OIcon
+            ></OLink>
+          </template>
+          <template #td_issueStatus="{ row }">
+            <OLink color="primary" class="link-external" hover-underline @click="changeExternalDialog(`${SRCOPENEULER + row.repo}/issues`)"
+              ><span class="text">{{ row.issueStatus }}</span> <OIcon><IconOutlink /></OIcon
+            ></OLink>
+          </template>
+          <template #td_prStatus="{ row }">
+            <OLink color="primary" class="link-external" hover-underline @click="changeExternalDialog(`${SRCOPENEULER + row.repo}/pulls`)"
+              ><span class="text">{{ row.prStatus }}</span> <OIcon><IconOutlink /></OIcon
+            ></OLink>
+          </template>
+          <template #td_cveStatus="{ row }">
+            <OLink
+              color="primary"
+              class="link-external"
+              hover-underline
+              @click="changeExternalDialog(`${SRCOPENEULER + row.repo}/issues?single_label_id=85497765`)"
+            >
+              <span class="text">{{ row.cveStatus }}</span> <OIcon><IconOutlink /></OIcon
+            ></OLink>
+          </template>
+          <template #td_status="{ row }">
+            <div class="repo-status">
+              <OTag :class="`type${repoStatusIndex(row.status)}`">{{ row.status }} </OTag>
+            </div>
+          </template>
+          <template #td_versionStatus="{ row }">
+            {{ versionLatestStatusConvert(row.versionStatus) }}
+          </template>
+
+          <template #td_operation="{ row }">
+            <div class="operation-box">
+              <OLink v-if="isMainPer" color="primary" hover-underline @click="changeFeedback(row.repo)">状态反馈</OLink>
+              <OLink color="primary" hover-underline @click="changeFeedbackHistory(row.repo)">反馈历史</OLink>
+            </div>
+          </template>
+        </OTable>
+
+        <div v-if="total > COUNT_PAGESIZE[0]" class="pagination-box">
+          <AppPagination :current="currentPage" :pagesize="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </div>
+      </div>
+      <!-- 暂无记录 -->
+      <template v-if="isError">
+        <Result404>
+          <template #description>
+            <p class="text404">暂无记录</p>
+          </template>
+        </Result404>
+      </template>
+
+      <!-- 跳转外部链接提示 -->
+      <ExternalLink v-if="showExternalDlg" :href="externalLink" @change="showExternalDlg = false" />
+      <!-- 状态反馈 -->
+
+      <StatusFeedback :repo="repoValue" v-if="showFeedbackDlg" @close="showFeedbackDlg = false" />
+
+      <!-- 反馈历史 -->
+      <FeedbackHistroy v-if="showFeedbacHistroykDlg" :repo="repoValue" @close="showFeedbacHistroykDlg = false" />
+    </template>
+  </ContentWrapper>
+</template>
+
+<style scoped lang="scss">
+@import '@/assets/style/category/collaboration/index.scss';
+.collaboration-wrap {
+  position: relative;
+  min-height: calc(var(--layout-content-min-height) - 154px);
+}
+.header-cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .filter-icon {
+    width: 16px;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+}
+.platform-header {
+  border-bottom: 1px solid var(--o-color-control4);
+  padding: 48px 0 24px;
+  h1 {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    @include h1;
+  }
+}
+.indicators {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 24px;
+  .text {
+    color: var(--o-color-info1);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    @include text1;
+    svg {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
+  }
+}
+.operation-box {
+  display: flex;
+  align-items: center;
+  .o-link + .o-link {
+    margin-left: 16px;
+  }
+}
+:deep(.link-external .o-link-label) {
+  font-size: 0;
+  .text {
+    @include text1;
+  }
+  .o-icon {
+    display: inline-block;
+    vertical-align: middle;
+    svg {
+      width: 16px;
+      height: 16px;
+      margin-left: 8px;
+    }
+  }
+}
+.platform-main {
+  @mixin liner {
+    content: '';
+    box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: 8px;
+  }
+  :deep(.o-table) {
+    --oper-width: 215px;
+    &.admin {
+      --oper-width: 125px;
+    }
+
+    .o-table-wrap {
+      overflow-x: auto;
+      overflow-y: hidden;
+      @include scrollbar;
+    }
+    table {
+      table-layout: fixed;
+    }
+
+    tr {
+      td {
+        &:first-child,
+        &:nth-of-type(10),
+        &:nth-of-type(11) {
+          position: sticky;
+          z-index: 2;
+          background: var(--table-bg-color);
+        }
+        &:first-child {
+          left: 0;
+          &::before {
+            right: -9px;
+            transform: scaleX(-1);
+            @include liner;
+          }
+        }
+        &:nth-of-type(11) {
+          right: 0;
+        }
+        &:nth-of-type(10) {
+          right: var(--oper-width);
+          &::before {
+            left: -9px;
+            @include liner;
+          }
+        }
+      }
+      &.last {
+        td {
+          border-bottom: 0 none;
+        }
+      }
+      &:hover td {
+        background: var(--table-row-hover);
+      }
+    }
+    th {
+      &:first-child,
+      &:nth-of-type(10),
+      &:nth-of-type(11) {
+        position: sticky;
+        z-index: 2;
+        background: var(--table-head-bg);
+      }
+      &:first-child {
+        left: 0;
+        &::before {
+          right: -7px;
+          transform: scaleX(-1);
+          @include liner;
+        }
+      }
+      &:nth-of-type(10) {
+        right: var(--oper-width);
+        &::before {
+          left: -9px;
+          @include liner;
+        }
+      }
+      &:nth-of-type(11) {
+        right: 0;
+      }
+    }
+
+    thead {
+      .repo {
+        width: 200px;
+      }
+      .cve,
+      .sig,
+      .issue,
+      .pr,
+      .version {
+        width: 188px;
+      }
+      .org,
+      .personnel {
+        width: 160px;
+      }
+      .kind {
+        width: 180px;
+      }
+      .status {
+        width: 125px;
+      }
+      .operation {
+        width: var(--oper-width);
+      }
+    }
+  }
+}
+
+.pagination-box {
+  margin-top: 32px;
+  display: flex;
+  justify-content: end;
+}
+</style>
diff --git a/src/views/home/HomeHeader.vue b/src/views/home/HomeHeader.vue
index d8d4ec8443d83277cee25243141b6e4fe6f3512c..874f19e8fb17f0cca64361b4fb652b522ecc6e01 100644
--- a/src/views/home/HomeHeader.vue
+++ b/src/views/home/HomeHeader.vue
@@ -73,6 +73,8 @@ onMounted(() => {
     inset: 0;
     height: 100%;
     width: 100%;
+    user-select: none;
+    pointer-events: none;
   }
 }
 
diff --git a/src/views/home/HomeNews.vue b/src/views/home/HomeNews.vue
index 32c625c3373f6e83216dd22d162361843f5e1c29..e7d56a349d018fc8bce905bcd0f1cd26ba8f5c6f 100644
--- a/src/views/home/HomeNews.vue
+++ b/src/views/home/HomeNews.vue
@@ -12,7 +12,7 @@ const { isDark } = useTheme();
     <OCol v-for="subItem in homeNewsData" :key="subItem.title" flex="0 1 33%" :laptop="{ flex: '0 1 33%' }">
       <OCard
         :href="subItem.url"
-        class="news-item"
+        class="news-item o-card-pkg"
         target="_blank"
         rel="noopener noreferrer"
         :title="subItem.title"
@@ -52,30 +52,6 @@ const { isDark } = useTheme();
       height: 255px;
     }
   }
-  .desc {
-    display: flex;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    position: relative;
-    --linear-gradient: var(--o-mixedgray-1);
-    &.dark {
-      --linear-gradient: var(--o-mixedgray-4);
-    }
-
-    @include text1;
-    &::after {
-      background-image: linear-gradient(90deg, rgba(var(--linear-gradient), 0), rgba(var(--linear-gradient), 0.8) 59%, var(--o-color-control-light) 100%);
-      bottom: 0;
-      content: '';
-      height: 24px;
-      pointer-events: none;
-      position: absolute;
-      right: 0;
-      width: 4em;
-    }
-  }
 }
 
 :deep(.o-card-main) {
diff --git a/src/views/package/RpmContent.vue b/src/views/package/RpmContent.vue
index 2776e824bf0344ed53420816dc54b72e2a4debc7..90156fb879cfe65662a44fa77fefa8ef50d18448 100644
--- a/src/views/package/RpmContent.vue
+++ b/src/views/package/RpmContent.vue
@@ -148,7 +148,7 @@ const isFilterLoading = ref(false);
 const rpmColumn = {
   os,
   arch,
-  category: ['AI', 'HPC', '云服务', '分布式存储', '大数据', '其他'],
+  category: ['AI', 'HPC', '云服务', '分布式存储', '大数据', '数据库', '其他'],
 };
 
 const queryFilter = () => {
@@ -164,9 +164,6 @@ const queryFilter = () => {
 const handleCloseTag = (idx: string | number, type: string) => {
   if (type === 'os') {
     searchOs.value.splice(Number(idx), 1);
-    if (searchOs.value.length === 0) {
-      console.log(route.query);
-    }
   }
   if (type === 'arch') {
     searchArch.value.splice(Number(idx), 1);
diff --git a/src/views/solution/TheOpenStack.vue b/src/views/solution/TheOpenStack.vue
index 189400c1e4ccacce137186402feb4ae0518f441c..1ac84b333e846253e95f82fe5e6656622ee178b3 100644
--- a/src/views/solution/TheOpenStack.vue
+++ b/src/views/solution/TheOpenStack.vue
@@ -137,13 +137,19 @@ const advImg = computed(() => {
           v-for="item in OpenStack.caseList"
           :key="item.name"
           cursor="auto"
+          class="o-card-pkg"
           :title="item.name"
           :href="OPENEULER + item.href"
           target="_blank"
           rel="noopener noreferrer"
-          :detail="item.desc"
           :cover="item.img"
-        />
+        >
+          <template #default>
+            <div class="desc" :class="{ dark: isDark }">
+              {{ item.desc }}
+            </div>
+          </template>
+        </OCard>
       </div>
     </div>
     <!-- 跳转外部链接提示 -->
diff --git a/src/views/todo/ApprovalTable.vue b/src/views/todo/ApprovalTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5894c6e19c720b157a409dd6b8570a05ecfd3411
--- /dev/null
+++ b/src/views/todo/ApprovalTable.vue
@@ -0,0 +1,411 @@
+<script lang="ts" setup>
+import { ref, type PropType, computed, type ComponentPublicInstance, reactive, watch, onMounted } from 'vue';
+import { OTable, OLink, OTag, ODialog, OButton, OPopup, OIcon, OPopover } from '@opensig/opendesign';
+import { useLocale } from '@/composables/useLocale';
+import { formatDateTime } from '@/utils/common';
+import { useRouter, useRoute } from 'vue-router';
+import { applicationTypeCurrent, applyStatusType } from '@/data/todo';
+import { applicationTypeConvert, applyStatusConvert, versionLatestStatusConvert } from '@/utils/collaboration';
+import { useUserInfoStore } from '@/stores/user';
+import { onClickOutside } from '@vueuse/core';
+import { getAdminApplyRepos, getMaintainerApplyRepos } from '@/api/api-collaboration';
+import FilterableCheckboxes from '@/components/FilterableCheckboxes.vue';
+
+import IconFilter from '~icons/app/icon-filter.svg';
+import IconHelp from '~icons/app/icon-help.svg';
+
+interface ColumnsT {
+  key: string;
+  label: string;
+  width?: string;
+  type?: string;
+}
+
+const props = defineProps({
+  filterableColumns: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  type: {
+    type: String,
+    default: () => '',
+  },
+  columns: {
+    type: Array as PropType<ColumnsT[]>,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: () => false,
+  },
+});
+
+const router = useRouter();
+const route = useRoute();
+const { locale } = useLocale();
+
+const repoList = ref<string[]>([]);
+
+const getRepoList = () => {
+  if (props.type === 'approval' || props.type === 'approved') {
+    getAdminApplyRepos()
+      .then((data) => (repoList.value = data.list))
+      .finally(() => (repoFilterLoading.value = false));
+  } else {
+    getMaintainerApplyRepos()
+      .then((data) => (repoList.value = data.list))
+      .finally(() => (repoFilterLoading.value = false));
+  }
+};
+
+const filterParams = reactive(
+  props.filterableColumns.reduce(
+    (obj, col) => {
+      obj[col] = '';
+      return obj;
+    },
+    {} as Record<string, string>
+  )
+);
+
+watch(filterParams, (params) => emits('queryData', params));
+
+const filterableColSet = computed(() => new Set(props.filterableColumns));
+const applyTypes = applicationTypeCurrent.map((item) => ({ label: item.label, value: item.id }));
+
+const filterIconRefs = ref(new Array<ComponentPublicInstance>(props.columns.length));
+
+/** 筛选组件是否显示的开关 */
+const filterSwitches = ref(props.columns.map(() => false));
+
+const setPopupClickoutSideFn = (el: any, index: number) => {
+  onClickOutside(el, () => {
+    filterSwitches.value[index] = false;
+  });
+};
+
+/** 当前有选中筛选项的表格列的数组下标 */
+const currentActiveFilterIndices = ref(new Set<number>());
+
+const repoFilterLoading = ref(false);
+
+/** 切换某个筛选组件显示开关 */
+const switchFilterVisible = (index: number) => {
+  filterSwitches.value[index] = true;
+  if (index === 0) {
+    repoFilterLoading.value = true;
+    getRepoList();
+  }
+};
+
+/** 各表格列对应的已选中的筛选项 */
+const activeFilterValues = ref(new Array<string>(props.columns.length));
+
+const onFilterChange = (type: string, index: number, val: string) => {
+  filterSwitches.value = props.columns.map(() => false);
+  if (val) {
+    if (type === 'metric') {
+      activeFilterValues.value[index] = applyStatusConvert(val);
+    } else {
+      activeFilterValues.value[index] = val;
+    }
+    currentActiveFilterIndices.value.add(index);
+  } else {
+    activeFilterValues.value[index] = '';
+    currentActiveFilterIndices.value.delete(index);
+  }
+};
+
+const userInfoStore = useUserInfoStore();
+const isMainPer = computed(() => userInfoStore.platformMaintainerPermission);
+
+const jumpTo = (id: number) => {
+  const type = route.params?.type as string;
+  router.push({
+    path: `/${locale.value}/todo/${type}/${id}`,
+  });
+};
+
+const emits = defineEmits<{
+  (e: 'revoke', id: string): void;
+  (e: 'queryData', params: Record<string, string>): void;
+}>();
+
+const showDlg = ref(false);
+const applayId = ref();
+const revokeApplication = (id: string) => {
+  applayId.value = id;
+  showDlg.value = true;
+};
+
+const revoke = () => {
+  emits('revoke', applayId.value);
+  showDlg.value = false;
+};
+</script>
+
+<template>
+  <div class="table-main" :class="type">
+    <OTable :columns="columns" :data="data" :loading="loading" border="all">
+      <template #head="{ columns }">
+        <template v-for="(item, index) in columns" :key="item.type">
+          <th v-if="!filterableColSet.size || !filterableColSet.has(item.key)" :class="item.type">
+            <template v-if="item.label === '申请人'">
+              <div class="th-maintainer">
+                申请人
+                <OPopover position="top" trigger="hover">
+                  <template #target>
+                    <OIcon class="maintainer-icon"><IconHelp /></OIcon>
+                  </template>
+                  <div class="box">展示Gitee ID 不是openEuler用户名</div>
+                </OPopover>
+              </div>
+            </template>
+            <template v-else> {{ item.label }}</template>
+          </th>
+          <OPopup v-else trigger="none" style="--popup-radius: 4px" :offset="-8" :visible="filterSwitches[index]" :unmount-on-hide="false" position="bl">
+            <template #target>
+              <th :class="item.type">
+                <div class="header-cell">
+                  {{ item.label }}
+                  <template v-if="item.key !== 'operation'">
+                    <OIcon
+                      :ref="(el) => (filterIconRefs[index] = el as ComponentPublicInstance)"
+                      class="filter-icon"
+                      :style="currentActiveFilterIndices.has(index) ? { color: 'var(--o-color-primary1)' } : {}"
+                      @click="switchFilterVisible(index)"
+                      ><IconFilter
+                    /></OIcon>
+                    <OPopover v-if="currentActiveFilterIndices.has(index) && activeFilterValues[index]" :target="filterIconRefs[index]" trigger="hover">
+                      <p class="bubble-content">
+                        <span class="title">{{ item.label }}:</span>
+                        {{ activeFilterValues[index] }}
+                      </p>
+                    </OPopover>
+                  </template>
+                </div>
+              </th>
+            </template>
+            <div :ref="(el) => setPopupClickoutSideFn(el, index)">
+              <FilterableCheckboxes
+                v-model="filterParams[item.key]"
+                v-if="item.key === 'metric'"
+                :filterable="false"
+                @change="onFilterChange(item.key, index, $event)"
+                :values="applyTypes"
+              />
+              <FilterableCheckboxes
+                v-model="filterParams[item.key]"
+                v-else-if="item.key === 'repo'"
+                :loading="repoFilterLoading"
+                @change="onFilterChange(item.key, index, $event)"
+                :values="repoList"
+              />
+              <FilterableCheckboxes
+                v-model="filterParams[item.key]"
+                v-else-if="item.key === 'applyStatus'"
+                :filterable="false"
+                @change="onFilterChange(item.key, index, $event)"
+                :values="applyStatusType"
+              />
+            </div>
+          </OPopup>
+        </template>
+      </template>
+      <template #td_updateAt="{ row }">
+        {{ formatDateTime(row.updateAt, true) }}
+      </template>
+      <template #td_metric="{ row }">
+        {{ applicationTypeConvert(row.metric) }}
+      </template>
+      <template #td_metricStatus="{ row }">
+        {{ versionLatestStatusConvert(row.metricStatus) }}
+      </template>
+      <template #td_comment="{ row }">
+        <TableShowOverflowTips v-if="row.comment" :content="row.comment" />
+        <template v-else>-</template>
+      </template>
+      <template #td_administrator="{ row }">
+        {{ row.administrator ?? '-' }}
+      </template>
+      <template #td_description="{ row }">
+        <TableShowOverflowTips v-if="row.description" :content="row.description" />
+      </template>
+
+      <template #td_applyStatus="{ row }">
+        <div class="apply-status">
+          <OTag v-if="row.applyStatus" :class="row.applyStatus?.toLocaleLowerCase()">{{ applyStatusConvert(row.applyStatus) }} </OTag>
+        </div>
+      </template>
+      <template #td_operation="{ row }">
+        <template v-if="type === 'application'">
+          <div class="oper-box">
+            <OLink color="primary" hover-underline @click="jumpTo(row.applyIdString)">申请详情</OLink>
+            <OLink color="danger" v-if="row.applyStatus === 'OPEN' && isMainPer" hover-underline @click="revokeApplication(row.applyIdString)">撤销申请</OLink>
+          </div>
+        </template>
+        <template v-if="type === 'approval'">
+          <OLink color="primary" hover-underline @click="jumpTo(row.applyIdString)">审批</OLink>
+        </template>
+        <template v-if="type === 'approved'">
+          <OLink color="primary" hover-underline @click="jumpTo(row.applyIdString)">审批详情</OLink>
+        </template>
+      </template>
+    </OTable>
+    <ODialog v-model:visible="showDlg" class="revoke-dlg" :unmount-on-hide="true" :mask="true" size="small">
+      <template #header>
+        <p class="title">确认撤销</p>
+      </template>
+      <p class="revoke-text">撤销后内容不可恢复，确认是否撤销？</p>
+      <template #footer>
+        <div class="dlg-action">
+          <OButton variant="solid" size="large" color="primary" class="upload" @click="revoke">确认</OButton>
+          <OButton variant="outline" size="large" color="primary" class="upload" @click="showDlg = false">取消</OButton>
+        </div>
+      </template>
+    </ODialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/style/category/collaboration/index.scss';
+.th-maintainer {
+  display: flex;
+  align-items: center;
+  .maintainer-icon {
+    width: 16px;
+    margin-left: 8px;
+    color: var(--o-color-info1);
+  }
+}
+.revoke-text {
+  color: var(--o-color-info1);
+  text-align: center;
+  @include text1;
+}
+.dlg-action {
+  display: flex;
+  justify-content: center;
+  .o-btn + .o-btn {
+    margin-left: 16px;
+  }
+}
+.oper-box {
+  display: flex;
+  align-items: center;
+  .o-link + .o-link {
+    margin-left: 24px;
+  }
+}
+
+:deep(.o-table) {
+  .td-break {
+    word-break: break-all;
+  }
+  .max {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    position: relative;
+    word-break: break-all;
+  }
+  .row-name {
+    display: flex;
+    align-items: center;
+  }
+}
+thead {
+  .repo {
+    width: 180px;
+  }
+  .metric,
+  .metricStatus,
+  .description {
+    width: 140px;
+  }
+  .applyStatus {
+    width: 130px;
+  }
+  .administrator,
+  .maintainer {
+    width: 130px;
+  }
+
+  .applyId {
+    width: 140px;
+  }
+
+  .comment {
+    width: 180px;
+  }
+  .updateAt {
+    width: 178px;
+  }
+  .operation {
+    width: 220px;
+  }
+}
+.application {
+  :deep(.o-table) {
+    @mixin liner {
+      content: '';
+      box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
+      height: 100%;
+      position: absolute;
+      top: 0;
+      width: 8px;
+    }
+    .o-table-wrap {
+      overflow-x: auto;
+      overflow-y: hidden;
+      @include scrollbar;
+    }
+    table {
+      table-layout: fixed;
+    }
+
+    tr {
+      td {
+        &:last-child {
+          width: 220px;
+          position: sticky;
+          right: 0;
+          z-index: 2;
+          background: var(--table-bg-color);
+          &::before {
+            left: -9px;
+            @include liner;
+          }
+        }
+      }
+      &.last {
+        td {
+          border-bottom: 0 none;
+        }
+      }
+      &:hover td {
+        background: var(--table-row-hover);
+      }
+    }
+
+    th {
+      &:last-child {
+        width: 220px;
+        position: sticky;
+        right: 0;
+        z-index: 2;
+        background: var(--table-head-bg);
+        &::before {
+          left: -9px;
+          @include liner;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/todo/TheTodo.vue b/src/views/todo/TheTodo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..811b380044f315cecabe524d6f243bbf9c00e609
--- /dev/null
+++ b/src/views/todo/TheTodo.vue
@@ -0,0 +1,318 @@
+<script lang="ts" setup>
+import { ref, onMounted, computed } from 'vue';
+import { OTab, OTabPane, useMessage } from '@opensig/opendesign';
+import { useRoute, useRouter } from 'vue-router';
+import { useLocale } from '@/composables/useLocale';
+import { approvalColumns, applicationColumns, approvalHistoryColumns } from '@/data/todo';
+import { getAdminApply, getMaintainerApply, getMaintainerRevoke } from '@/api/api-collaboration';
+import { useUserInfoStore } from '@/stores/user';
+import Result404 from '@/components/Result404.vue';
+import ApprovalTable from './ApprovalTable.vue';
+import { COUNT_PAGESIZE } from '@/data/query';
+import { getParamsRules } from '@/utils/common';
+
+const tabList = [
+  {
+    id: 'application',
+    label: '我的申请',
+  },
+  {
+    id: 'approval',
+    label: '待我审批',
+  },
+  {
+    id: 'approved',
+    label: '我审批过的',
+  },
+];
+
+const { locale } = useLocale();
+const route = useRoute();
+const router = useRouter();
+const userInfoStore = useUserInfoStore();
+const message = useMessage();
+
+const isAdminPermission = computed(() => userInfoStore.platformAdminPermission);
+const isMaintainerPermission = computed(() => userInfoStore.platformMaintainerPermission);
+
+// 分页
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+
+const todoName = ref('formPage');
+const applyId = ref();
+const isError = ref(false);
+const applyStatus = ref('');
+const todoParams = computed(() => {
+  return {
+    name: todoName.value,
+    applyIdString: applyId.value,
+    pageNum: currentPage.value,
+    pageSize: pageSize.value,
+    applyStatus: applyStatus.value,
+    timeOrder: 'desc',
+  };
+});
+
+// 我的申请数据
+const applicationData = ref([]);
+// 审批
+const approvalData = ref([]);
+// 审批历史
+const approvedData = ref([]);
+const isLoading = ref(false);
+
+const activeName = ref();
+const onChange = (type: string) => {
+  currentPage.value = 1;
+  pageSize.value = 10;
+  pageInit();
+  // 切换url参数
+  router.push({
+    path: `/${locale.value}/todo/${type}`,
+  });
+};
+
+/* ---------------分页事件------------------ */
+const handleSizeChange = (val: number) => {
+  pageSize.value = val;
+  currentPage.value = 1;
+  pageInit();
+};
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+  pageInit();
+};
+
+// 我的申请
+const queryMyApplication = (params = {}) => {
+  isLoading.value = true;
+  if (isMaintainerPermission.value) {
+    const newData = getParamsRules(todoParams.value);
+    getMaintainerApply({ ...newData, ...params })
+      .then((res) => {
+        applicationData.value = res.data.list;
+        total.value = res.data.total;
+
+        isLoading.value = false;
+      })
+      .catch(() => {
+        applicationData.value = [];
+        isLoading.value = false;
+        isError.value = true;
+      });
+  } else {
+    isError.value = true;
+    isLoading.value = false;
+  }
+};
+
+// 撤销申请
+const revokeApplication = (id: string) => {
+  const params = {
+    applyIdString: id,
+    applyStatus: 'OPEN',
+  };
+  getMaintainerRevoke(params)
+    .then((res) => {
+      if (res.code === 200) {
+        message.success({
+          content: '撤销成功',
+        });
+        pageInit();
+      }
+    })
+    .catch(() => {
+      message.danger({
+        content: '操作失败',
+      });
+    });
+};
+
+// 待我审批
+const queryApprovalApply = (params = {}) => {
+  isLoading.value = true;
+  if (isAdminPermission.value) {
+    const newData = getParamsRules(todoParams.value);
+    getAdminApply({ ...newData, ...params })
+      .then((res) => {
+        approvalData.value = res.data.list;
+        total.value = res.data.total;
+
+        isLoading.value = false;
+      })
+      .catch(() => {
+        approvalData.value = [];
+        isError.value = true;
+        isLoading.value = false;
+      });
+  } else {
+    isError.value = true;
+    isLoading.value = false;
+  }
+};
+
+// 我审批过的
+const queryApprovedApply = (params = {}) => {
+  isLoading.value = true;
+  if (isAdminPermission.value) {
+    const newData = getParamsRules(todoParams.value);
+    getAdminApply({ ...newData, ...params })
+      .then((res) => {
+        approvedData.value = res.data.list;
+        total.value = res.data.total;
+        isLoading.value = false;
+      })
+      .catch(() => {
+        approvedData.value = [];
+        isLoading.value = false;
+        isError.value = true;
+      });
+  } else {
+    isError.value = true;
+    isLoading.value = false;
+  }
+};
+
+const pageInit = () => {
+  isError.value = false;
+  if (activeName.value === 'application') {
+    applyStatus.value = '';
+    todoName.value = 'formPage';
+    applyId.value = '';
+    queryMyApplication();
+  } else if (activeName.value === 'approval') {
+    todoName.value = 'formPage';
+    applyStatus.value = 'OPEN';
+    queryApprovalApply();
+  } else if (activeName.value === 'approved') {
+    todoName.value = 'formPage';
+    applyStatus.value = 'APPROVED,REJECTED';
+    queryApprovedApply();
+  }
+};
+
+onMounted(() => {
+  activeName.value = (route.params?.type as string) || 'application';
+  pageInit();
+});
+</script>
+
+<template>
+  <div class="platform-header">
+    <ContentWrapper>
+      <h1>待办中心</h1>
+    </ContentWrapper>
+  </div>
+  <OTab variant="text" @change="onChange" v-model="activeName" size="large" :style="{ '--tab-nav-justify': 'flex-start' }">
+    <OTabPane v-for="item in tabList" :key="item.id" :value="item.id" :label="item.label"> </OTabPane>
+  </OTab>
+  <div class="todo-content">
+    <AppLoading :loading="isLoading" />
+    <!-- 我的申请 -->
+    <div v-if="activeName === 'application' && !isError" class="application">
+      <template v-if="!isLoading">
+        <ApprovalTable
+          :columns="applicationColumns"
+          @queryData="queryMyApplication"
+          :filterable-columns="['repo', 'metric', 'applyStatus']"
+          :type="activeName"
+          :data="applicationData"
+          :loading="isLoading"
+          @revoke="revokeApplication"
+        />
+        <div v-if="total > COUNT_PAGESIZE[0]" class="pagination-box">
+          <AppPagination :current="currentPage" :pagesize="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </div>
+      </template>
+    </div>
+    <!-- 判断admin权限 -->
+    <template v-if="isAdminPermission">
+      <div v-if="activeName === 'approval' && !isError" class="approval">
+        <template v-if="!isLoading">
+          <ApprovalTable
+            :columns="approvalColumns"
+            @queryData="queryApprovalApply"
+            :filterable-columns="['repo', 'metric']"
+            :type="activeName"
+            :data="approvalData"
+            :loading="isLoading"
+          />
+          <div v-if="total > COUNT_PAGESIZE[0]" class="pagination-box">
+            <AppPagination :current="currentPage" :pagesize="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+          </div>
+        </template>
+      </div>
+      <div v-if="activeName === 'approved' && !isError" class="approved">
+        <template v-if="!isLoading">
+          <ApprovalTable
+            :columns="approvalHistoryColumns"
+            @queryData="queryApprovedApply"
+            :filterable-columns="['repo', 'metric']"
+            :type="activeName"
+            :data="approvedData"
+            :loading="isLoading"
+          />
+          <div v-if="total > COUNT_PAGESIZE[0]" class="pagination-box">
+            <AppPagination :current="currentPage" :pagesize="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+          </div>
+        </template>
+      </div>
+    </template>
+
+    <!-- 暂无记录 -->
+    <template v-if="(activeName === 'application' && isError) || (activeName === 'approval' && isError) || (activeName === 'approved' && isError)">
+      <Result404>
+        <template #description>
+          <p class="text404">暂无{{ activeName === 'application' ? '申请' : '审批' }}记录</p>
+        </template>
+      </Result404>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.pagination-box {
+  margin-top: 32px;
+  display: flex;
+  justify-content: end;
+}
+
+.platform-header {
+  padding: 48px 0 24px;
+  h1 {
+    color: var(--o-color-info1);
+    font-weight: 500;
+    @include h1;
+  }
+}
+
+:deep(.o-tab-navs) {
+  max-width: var(--layout-content-max-width);
+  padding-left: var(--layout-content-padding);
+  padding-right: var(--layout-content-padding);
+  margin: 0 auto;
+}
+:deep(.o-tab-pane) {
+  max-width: var(--layout-content-max-width);
+  padding-left: var(--layout-content-padding);
+  padding-right: var(--layout-content-padding);
+  position: relative;
+}
+.todo-content {
+  position: relative;
+  min-height: calc(var(--layout-content-min-height) - 200px);
+  margin: 0 auto;
+  max-width: var(--layout-content-max-width);
+  padding: 24px var(--layout-content-padding) 72px;
+}
+.approval,
+.approved {
+  :deep(thead) {
+    .operation {
+      width: 115px;
+    }
+  }
+}
+</style>
diff --git a/src/views/todo/TheTodoDetail.vue b/src/views/todo/TheTodoDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c922c1d9a8480178d51555132f0afa2e648d813
--- /dev/null
+++ b/src/views/todo/TheTodoDetail.vue
@@ -0,0 +1,283 @@
+<script lang="ts" setup>
+import { ref, onMounted, computed, reactive } from 'vue';
+import { OButton, OTag, OForm, OTextarea, OFormItem, useMessage, type FieldResultT, ODialog, OBreadcrumb, OBreadcrumbItem } from '@opensig/opendesign';
+import { useRoute, useRouter } from 'vue-router';
+import { getAdminApply, getMaintainerApply, getAdminProcess } from '@/api/api-collaboration';
+import { applicationTypeConvert, applyStatusConvert, versionLatestStatusConvert } from '@/utils/collaboration';
+import { formatDateTime } from '@/utils/common';
+import { useUserInfoStore } from '@/stores/user';
+import { useLocale } from '@/composables/useLocale';
+import { useI18n } from 'vue-i18n';
+
+const route = useRoute();
+const router = useRouter();
+const message = useMessage();
+const { locale } = useLocale();
+const { t } = useI18n();
+
+const userInfoStore = useUserInfoStore();
+const isAdminPer = computed(() => userInfoStore.platformAdminPermission);
+const isMaintainerPer = computed(() => userInfoStore.platformMaintainerPermission);
+
+const isLoading = ref(true);
+const isError = ref(false);
+
+const type = ref();
+const applyId = ref((route.params.id as string) || '');
+const todoData = ref();
+const formRef = ref<InstanceType<typeof OForm>>();
+const formData = reactive({
+  applyIdString: applyId.value,
+  comment: '',
+  applyStatus: '',
+});
+
+// 我的申请
+const queryApplicationApply = () => {
+  getMaintainerApply({ name: 'formContent', applyIdString: applyId.value })
+    .then((res) => {
+      todoData.value = res.data.list[0];
+      isLoading.value = false;
+    })
+    .catch(() => {
+      isError.value = true;
+      isLoading.value = false;
+    });
+};
+
+// 待我审批
+const queryApprovalApply = () => {
+  getAdminApply({ name: 'formContent', applyIdString: applyId.value })
+    .then((res) => {
+      todoData.value = res.data.list[0];
+
+      isLoading.value = false;
+    })
+    .catch(() => {
+      isError.value = true;
+      isLoading.value = false;
+    });
+};
+
+// --------------------审批开始------------------------
+
+// 审批意见验证
+const commentRules = [
+  {
+    required: true,
+    triggers: ['blur'],
+    message: '请输入审批意见',
+  },
+  {
+    validator: (value: string) => {
+      if (value.trim().length < 1 || value.length > 1000) {
+        return {
+          type: 'danger',
+          message: '长度为1-1000个字符',
+        };
+      }
+    },
+  },
+];
+
+// 通过
+const onSubmit = (results: FieldResultT[]) => {
+  if (results.find((item) => item?.type === 'danger')) {
+    return;
+  } else {
+    formData.applyStatus = 'APPROVED';
+    queryAdminProcess();
+  }
+};
+
+// 驳回
+const rejected = async () => {
+  const items = await formRef.value?.validate();
+  if (items?.find((item) => item?.type === 'danger')) {
+    return;
+  }
+  formData.applyStatus = 'REJECTED';
+  queryAdminProcess();
+};
+// 审批
+const queryAdminProcess = () => {
+  getAdminProcess(formData)
+    .then((res) => {
+      if (res.code === 200) {
+        message.success({
+          content: '审批成功',
+        });
+        formRef.value?.resetFields();
+        queryApprovalApply();
+      }
+    })
+    .catch(() => {
+      message.danger({
+        content: '审批失败',
+      });
+      formRef.value?.resetFields();
+    });
+};
+
+// --------------------审批结束------------------------
+const showDlg = ref(false);
+const showHref = ref('');
+const jump = (path: string) => {
+  if (formData.comment.trim().length > 0) {
+    showDlg.value = true;
+    showHref.value = path;
+  } else {
+    router.push(path);
+  }
+};
+
+const confirmExit = () => {
+  showDlg.value = false;
+  router.push(showHref.value);
+};
+
+onMounted(() => {
+  type.value = route.params.type;
+  if (type.value === 'application') {
+    queryApplicationApply();
+  } else if (type.value === 'approval' || type.value === 'approved') {
+    queryApprovalApply();
+  }
+});
+</script>
+
+<template>
+  <ContentWrapper :verticalPadding="['32px', '72px']">
+    <AppLoading :loading="isLoading" />
+    <OBreadcrumb class="app-breadcrumb">
+      <OBreadcrumbItem @click="jump(`/${locale}/todo/application`)">待办中心</OBreadcrumbItem>
+      <OBreadcrumbItem @click="jump(`/${locale}/todo/${type}`)">{{ t(`collaboration.${type}`) }}</OBreadcrumbItem>
+      <OBreadcrumbItem>{{ todoData?.repo }} </OBreadcrumbItem>
+    </OBreadcrumb>
+    <div v-if="todoData" class="todo-detail">
+      <div class="title">
+        <h2>{{ todoData.repo }}</h2>
+        <div class="apply-status">
+          <OTag :class="todoData.applyStatus.toLocaleLowerCase()">{{ applyStatusConvert(todoData.applyStatus) }} </OTag>
+        </div>
+      </div>
+      <h3 class="caption">基本信息</h3>
+      <OForm label-width="92px" label-align="top">
+        <OFormItem label="申请单号：">
+          {{ todoData.applyIdString }}
+        </OFormItem>
+        <OFormItem label="申请类型：">
+          {{ applicationTypeConvert(todoData.metric) }}
+        </OFormItem>
+        <OFormItem label="修改状态："> {{ versionLatestStatusConvert(todoData.metricStatus) }} </OFormItem>
+        <OFormItem label="修改理由：">{{ todoData.description }} </OFormItem>
+        <OFormItem label="申请时间："> {{ formatDateTime(todoData.createdAt, true) }} </OFormItem>
+      </OForm>
+
+      <template v-if="isMaintainerPer || todoData.applyStatus === 'REJECTED' || todoData.applyStatus === 'APPROVED'">
+        <h3 class="caption">审批信息</h3>
+        <OForm label-width="92px" label-align="top">
+          <OFormItem label="审批人：">
+            {{ todoData.administrator ?? ' -' }}
+          </OFormItem>
+          <OFormItem label="审批意见：">
+            {{ todoData.comment ?? ' -' }}
+          </OFormItem>
+          <OFormItem label="审批时间："> {{ formatDateTime(todoData.approvalTime, true) ?? ' -' }} </OFormItem>
+        </OForm>
+      </template>
+      <template v-if="isAdminPer && todoData.applyStatus === 'OPEN'">
+        <h3 class="caption">审批</h3>
+        <OForm ref="formRef" has-required :model="formData" label-width="92px" label-align="top" @submit="onSubmit">
+          <OFormItem label="审批意见：" required field="comment" :rules="commentRules">
+            <OTextarea
+              v-model="formData.comment"
+              :max-length="1000"
+              placeholder="请输入审批意见"
+              resize="none"
+              :clearable="false"
+              :rows="4"
+              :input-on-outlimit="false"
+              style="width: 480px"
+            ></OTextarea>
+          </OFormItem>
+          <div class="button-box">
+            <OButton variant="solid" color="primary" size="large" type="submit">通过</OButton>
+            <OButton variant="outline" color="primary" size="large" class="reset" @click="rejected">驳回</OButton>
+          </div>
+        </OForm>
+      </template>
+    </div>
+
+    <!--退出弹窗 -->
+    <ODialog v-model:visible="showDlg" :unmount-on-hide="true" :mask="true" size="small">
+      <template #header>
+        <p class="title">确认退出</p>
+      </template>
+      <p class="revoke-text">退出后输入内容将会丢失，确认是否退出？</p>
+      <template #footer>
+        <div class="dlg-action">
+          <OButton variant="solid" size="large" color="primary" class="upload" @click="confirmExit">确认</OButton>
+          <OButton variant="outline" size="large" color="primary" class="upload" @click="showDlg = false">取消</OButton>
+        </div>
+      </template>
+    </ODialog>
+  </ContentWrapper>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/style/category/collaboration/index.scss';
+.revoke-text {
+  text-align: center;
+}
+.dlg-action {
+  display: flex;
+  justify-content: center;
+  .o-btn + .o-btn {
+    margin-left: 16px;
+  }
+}
+
+.todo-detail {
+  padding: 32px 40px;
+  background: var(--o-color-fill2);
+  box-shadow: var(--o-shadow-1);
+  margin: 24px 0 0;
+  min-height: calc(var(--layout-content-min-height) - 154px);
+  .title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 32px;
+    h2 {
+      color: var(--o-color-info1);
+      font-weight: 500;
+      margin-right: 16px;
+      @include h3;
+    }
+  }
+  .caption {
+    color: var(--o-color-info1);
+    margin: 24px 0 16px;
+    font-weight: 500;
+    @include h4;
+  }
+  :deep(.o-form) {
+    --form-item-gap: 16px;
+    --form-label-gap-top: 0;
+    --form-label-main-gap: 24px;
+    .o-form-item-main-wrap {
+      min-height: 24px;
+    }
+    color: var(--o-color-info1);
+    @include text1;
+  }
+
+  .button-box {
+    display: flex;
+    margin-top: 32px;
+    .o-btn + .o-btn {
+      margin-left: 24px;
+    }
+  }
+}
+</style>
diff --git a/src/views/upstream/TheUpstream.vue b/src/views/upstream/TheUpstream.vue
index 5b1d15b666354e4ee88bb9beb305b745c7f85b8c..b6d3b33e8ea3f490dcac3a5fd771bc554850cf81 100644
--- a/src/views/upstream/TheUpstream.vue
+++ b/src/views/upstream/TheUpstream.vue
@@ -39,6 +39,6 @@ const bannerInfo = {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin: 40px 0;
+  margin: 32px 0;
 }
 </style>