diff --git a/frontend/src/views/Detail.vue b/frontend/src/views/Detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a1e52079564f874a7dd5c4df5d42b7ff307560d3
--- /dev/null
+++ b/frontend/src/views/Detail.vue
@@ -0,0 +1,529 @@
+<!-- Copyright (c) 2025 Huawei Technologies Co., Ltd. -->
+<!-- oeDeploy is licensed under the Mulan PSL v2 .-->
+<!-- You can use this software according to the terms and conditions of the Mulan PSL v2. -->
+<!-- You may obtain a copy of Mulan PSL v2 at: -->
+<!--   http://license.coscl.org.cn/MulanPSL2 -->
+<!-- THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR -->
+<!-- IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR -->
+<!-- PURPOSE. -->
+<!-- See the Mulan PSL v2 for more details. -->
+<!-- Create: 2025-07-31 -->
+<!-- =================================================================================================================== -->
+
+<template>
+  <div class="detail-page">
+    <div class="detail-upper">
+      <!-- crumb: 点击 crumbs 回到首页（server / plugin） -->
+      <el-breadcrumb class="upper-crumbs" separator="/">
+        <!-- MCP Server / oeDeploy 插件 -->
+        <el-breadcrumb-item class="tag" @click="toHomePage">{{ tag === 'mcp' ? t('home.mcpServer') : t('home.oeDeployPlugin') }}</el-breadcrumb-item>
+        <el-breadcrumb-item class="name">{{ itemDetail.name }}</el-breadcrumb-item>
+      </el-breadcrumb>
+      <!-- 上方 信息 -->
+      <div class="display-card">
+        <div class="display-card-top">
+          <!-- 图标 -->
+          <div class="display-card-icon">
+            <img v-if="itemDetail.icon" :src="'data:image/png;base64,' + itemDetail.icon" :alt="itemDetail.name">
+            <div v-else
+                :style="{ backgroundColor: itemDetail.name ? generateIconBgColor(itemDetail.name) : 'rgb(125, 125, 125)'}">
+              {{ itemDetail.name ? itemDetail.name.slice(0, 2).toUpperCase() : 'icon' }}
+            </div>
+          </div>
+          <div class="display-card-top-info">
+            <!-- 名称 -->
+            <div class="display-card-id">{{ itemDetail.name }}</div>
+            <div class="display-card-tag-version">
+              <!-- 分类 -->
+              <div class="display-card-tag">{{ itemDetail.tag }}</div>
+              <!-- 版本 -->
+              <div class="display-card-version">{{ itemDetail.version }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- 描述 -->
+        <div class="display-card-desc">
+          {{ itemDetail.description?.zh || itemDetail.description?.en || itemDetail.description?.default || t('home.noDesc') }}
+        </div>
+        <div class="display-card-author-time">
+          <!-- 作者 -->
+          <div class="display-card-author" v-if="itemDetail.author">{{ itemDetail.author ? `@${itemDetail.author}` : '' }}</div>
+          <!-- 时间 -->
+          <div class="display-card-time">{{ itemDetail.updated_at }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 下方 使用说明 + 安装/部署 -->
+    <div class="detail-lower">
+      <!-- 下左 使用说明 -->
+      <div class="detail-doc" v-html="compiledMarkdown"></div>
+      <!-- 下右 安装/部署 -->
+      <div class="detail-deploy">
+        <el-tabs v-model="activeName" class="demo-tabs">
+          <el-tab-pane
+              v-for="(tab, index) in tabs"
+              :key="index"
+              :label="tab.label"
+              :name="tab.name">
+            <component
+                :is="tab.component"
+                :name="itemDetail.name"
+                :key-value="key"
+                :install-status="itemDetail.installed_status"
+                :app-list="itemDetail.app_list"
+                :cmd-list="itemDetail.cmd_list"
+                :mcp-json="itemDetail.mcp_json"
+                :download-status="itemDetail.download_status"
+                :action-list="itemDetail.action_list"
+                :install-package="installPackage"
+                :uninstall-package="uninstallPackage"
+                :add-app="addApp"
+                :delete-app="deleteApp"
+                :get-detail="getDetail" />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, provide, computed, watch, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import {
+  queryDetail,
+  getPackage,
+  deletePackage,
+  addAgent,
+  deleteAgent,
+  restoreYaml,
+  saveYaml,
+  ServerAndPluginInfoObj,
+  Tag,
+} from '@/api/index.ts';
+
+import McpQuick from '@/views/components/McpQuick.vue';
+import McpCli from '@/views/components/McpCli.vue';
+import OedpQuick from '@/views/components/OedpQuick.vue';
+import OedpCli from '@/views/components/OedpCli.vue';
+
+// 当前页面 url 里，包含了 tag + key
+const route = useRoute();
+const router = useRouter();
+const {t} = useI18n();
+
+const tag = ref<Tag>(route.name === 'McpServerDetail' ? 'mcp' : 'oedp');
+const key = ref<string>(route.params.key);
+
+// 是否支持 OEDP 快捷部署
+const supportOedpQuick = ref<boolean>(false);
+
+// 点击 crumbs 回到首页
+const toHomePage = () => {
+  router.push({
+    path: '/',
+    query: {
+      tag: tag.value
+    }
+  });
+};
+
+// 根据当前 tag，判断下右显示 安装/部署
+const tabs = computed(() => {
+  // OEDP 仅显示 命令行部署
+  if (supportOedpQuick.value === false) {
+    return [
+      { label: t('detail.cliDeploy'), name: 'oedp-cli', component: OedpCli }
+    ];
+  }
+  return tag.value === 'mcp' ?
+    // MCP 快捷安装 + 命令行安装
+    [
+      { label: t('detail.quickInstall'), name: 'mcp-click', component: McpQuick },
+      { label: t('detail.cliInstall'), name: 'mcp-cli', component: McpCli }
+    ] :
+    // OEDP 快捷部署 + 命令行部署
+    [
+      { label: t('detail.quickDeploy'), name: 'oedp-click', component: OedpQuick },
+      { label: t('detail.cliDeploy'), name: 'oedp-cli', component: OedpCli }
+    ];
+});
+
+// 下右当前显示的 tab
+const activeName = ref('');
+watch(tabs, (newTabs) => {
+  activeName.value = newTabs[0].name;
+}, { immediate: true });
+
+// markdown
+const compiledMarkdown = ref('');
+// 当前页面承接信息的变量
+const itemDetail = ref<ServerAndPluginInfoObj>({});
+// 高级配置 YAML
+const configYaml = ref<string>('');
+// 提示 message 持续时间
+const MESSAGE_DURATION = 3000;
+
+// 获取详情页信息
+const getDetail = async () => {
+  try {
+    const res = await queryDetail({tag: tag.value, key: key.value});
+    if (res && res.is_success) {
+      itemDetail.value = res.data;
+      // 处理 md
+      const dirtyHtml = marked.parse(itemDetail.value.readme);
+      compiledMarkdown.value = DOMPurify.sanitize(dirtyHtml);
+      // 处理 yaml
+      configYaml.value = itemDetail.value.config_yaml;
+      // 判断是否支持 oedp 快捷部署
+      supportOedpQuick.value = itemDetail.value.localhost_available;
+    } else if (res) {
+      console.log(res.message);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+// 如果没有 icon 图片，生成背景色
+function generateIconBgColor(inputString: string): string {
+  let hash = 0;
+  for (let i = 0; i < inputString.length; i++) {
+    hash = ((hash << 5) - hash) + inputString.charCodeAt(i);
+    hash |= 0;
+  }
+  hash = Math.abs(hash);
+  const r = (hash % 128) + 1;
+  const g = ((hash >> 8) % 128) + 1;
+  const b = (((hash >> 16) ^ inputString.length) % 128) + 1;
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+// MCP
+// 下载软件包
+const installPackage = async () => {
+  try {
+    const res = await getPackage({ tag: tag.value, key: key.value });
+    if (res && res.is_success) {
+      await getDetail();
+    } else if (res) {
+      console.log(res.message);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+// 卸载软件包
+const uninstallPackage = async () => {
+  try {
+    const res = await deletePackage({ tag: tag.value, key: key.value });
+    if (res && res.is_success) {
+      await getDetail();
+    } else if (res) {
+      console.log(res.message);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+// 添加到智能体应用
+const addApp = async (name: string) => {
+  try {
+    const res = await addAgent({ tag: tag.value, key: key.value, agent: name });
+    if (res && res.is_success) {
+      await getDetail();
+    } else if (res) {
+      console.log(res.message);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+// 删除智能体应用
+const deleteApp = async (name: string) => {
+  try {
+    const res = await deleteAgent({ tag: tag.value, key: key.value, agent: name });
+    if (res && res.is_success) {
+      await getDetail();
+    } else if (res) {
+      console.log(res.message);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+// OEDP
+// 保存 YAML
+const saveConfigYaml = async (editedYaml: string) => {
+  try {
+    const res = await saveYaml({tag: tag.value, key: '', yaml: editedYaml});
+    if (res && res.is_success) {
+      await getDetail();
+    } else if (res) {
+      console.log(res.message);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+// 还原 YAML
+const restoreConfigYaml = async () => {
+  try {
+    const res = await restoreYaml({tag: tag.value, key: ''});
+    if (res && res.is_success) {
+      await getDetail();
+    } else if (res) {
+      console.log(res.message);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+// 传递变量和函数给深层子组件
+provide('configYaml', { configYaml, saveConfigYaml, restoreConfigYaml });
+
+let intervalId = null;
+
+// 轮询
+onMounted(async () => {
+  // 立即执行一次
+  await getDetail();
+
+  // 启动轮询
+  intervalId = setInterval(async () => {
+    await getDetail();
+  }, 2000);
+});
+
+// 监听 download_status 变化
+watch(
+  () => itemDetail.value.download_status,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal && typeof oldVal !== 'undefined') {
+      if ((oldVal === 'not yet' || oldVal === 'in process') && newVal === 'success') {
+        // 下载成功
+        ElMessage.success({
+          message: t('message.downloadSuc'),
+          duration: MESSAGE_DURATION,
+          showClose: true,
+        });
+      } else if (oldVal === 'success' && newVal === 'not yet') {
+        // 删除成功
+        ElMessage.success({
+          message: t('message.deleteSuc'),
+          duration: MESSAGE_DURATION,
+          showClose: true,
+        });
+      } else if ((oldVal === 'not yet' || oldVal === 'in process') && newVal === 'fail') {
+        // 下载失败
+        ElMessage.warning({
+          message: t('message.downloadFail'),
+          duration: MESSAGE_DURATION,
+          showClose: true,
+        });
+      }
+    }
+  }
+);
+
+// 监听 action_list 中任意项的 status 变化
+watch(
+  () => itemDetail.value?.action_list?.map(item => item.status) ?? [],
+  (newVal, oldVal) => {
+    newVal.forEach((status, index) => {
+      if (status !== oldVal[index] && typeof oldVal[index] !== 'undefined') {
+        if ((oldVal[index] === 'not yet' || oldVal[index] === 'in process') && status === 'success') {
+          // 执行成功
+          ElMessage.success({
+            message: t('message.executeSuc'),
+            duration: MESSAGE_DURATION,
+            showClose: true,
+          });
+        } else if ((oldVal[index] === 'not yet' || oldVal[index] === 'in process') && status === 'fail') {
+          // 执行失败
+          ElMessage.warning({
+            message: t('message.executeFail'),
+            duration: MESSAGE_DURATION,
+            showClose: true,
+          });
+        }
+      }
+    });
+  }
+);
+
+// 页面卸载时清除定时器
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.detail-page {
+  height: 100%;
+  padding: 16px 0 24px;
+  display: flex;
+  flex-direction: column;
+  .upper-crumbs {
+    .name {
+      :deep(.el-breadcrumb__inner) {
+        font-weight: 700;
+      }
+    }
+    margin-bottom: 16px;
+  }
+
+  .display-card {
+    margin-bottom: 16px;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: var(--o-background-color-secondary-light);
+    .display-card-top {
+      display: flex;
+      margin-bottom: 16px;
+      .display-card-icon {
+        width: 48px;
+        height: 48px;
+        margin-right: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          max-width: 48px;
+          max-height: 48px;
+          width: auto;
+          height: auto;
+          border-radius: 50%;
+        }
+        div {
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
+          line-height: 48px;
+          text-align: center;
+          font-size: 16px;
+          color: var(--o-background-color-primary-light);
+        }
+      }
+      .display-card-top-info {
+        .display-card-id {
+          height: 32px;
+          font-size: 24px;
+          line-height: 32px;
+          font-weight: 700;
+          margin-bottom: 8px;
+        }
+        .display-card-tag-version {
+          display: flex;
+          .display-card-tag, .display-card-version {
+            font-size: 12px;
+            font-weight: 500;
+            line-height: 16px;
+            padding: 0 4px;
+            border-radius: 2px;
+          }
+          .display-card-tag {
+            color: rgba(0, 119, 255, 1);
+            background: rgba(0, 119, 255, 0.2);
+          }
+          .display-card-version {
+            color: var(--o-text-color-secondary);
+            background: var(--o-background-color-tertiary-light);
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+
+    .display-card-desc {
+      line-height: 22px;
+      margin-bottom: 16px;
+      color: var(--o-text-color-secondary);
+    }
+
+    .display-card-author-time {
+      display: flex;
+      color: var(--o-text-color-tertiary);
+      div {
+        height: 16px;
+        line-height: 16px;
+        font-size: 12px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.detail-lower {
+  flex: 1;
+  display: flex;
+  .detail-doc {
+    flex: 2;
+    margin-right: 16px;
+    padding: 16px 16px 16px 40px;
+    border-radius: 8px;
+    background-color: var(--o-background-color-secondary-light);
+    font-size: 14px;
+    line-height: 22px;
+    h1, h2, h3, h4, h5, h6, ol, ul, li, span, div, p {
+      margin-bottom: 8px;
+    }
+  }
+  .detail-deploy {
+    height: 100%;
+    flex: 1;
+    position: sticky;
+    top: 0;
+    min-width: 300px;
+    max-width: 472px;
+    max-height: 100vh;
+    padding: 8px 16px 16px;
+    border-radius: 8px;
+    background-color: var(--o-background-color-secondary-light);
+    :deep(.el-tabs__item) {
+      font-size: 14px;
+      height: 32px;
+    }
+    :deep(.el-tab-pane) {
+      padding-top: 16px;
+    }
+    :deep(.el-tabs), :deep(.el-tabs__content), :deep(.el-tab-pane), .mcp-click, .mcp-cli, .oedp-click, .oedp-cli {
+      height: 100%;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.detail-lower > .detail-doc {
+  h1, h2, h3, h4, h5, h6, ol, ul, li, span, div, p, code, tt, table, th, td, tr, thead, blockquote, hr, img {
+    margin-bottom: 8px;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    margin-left: -16px;
+    font-weight: 700;
+  }
+  h1 {
+    font-size: 18px;
+    line-height: 24px;
+  }
+  code {
+    font-family: monospace;
+  }
+  a {
+    color: var(--o-theme-color-primary-blue);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/components/CopyInput.vue b/frontend/src/views/components/CopyInput.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ecd80a873fd0f0cba57f44af4742a8ec275f1fdd
--- /dev/null
+++ b/frontend/src/views/components/CopyInput.vue
@@ -0,0 +1,85 @@
+<!-- Copyright (c) 2025 Huawei Technologies Co., Ltd. -->
+<!-- oeDeploy is licensed under the Mulan PSL v2 .-->
+<!-- You can use this software according to the terms and conditions of the Mulan PSL v2. -->
+<!-- You may obtain a copy of Mulan PSL v2 at: -->
+<!--   http://license.coscl.org.cn/MulanPSL2 -->
+<!-- THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR -->
+<!-- IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR -->
+<!-- PURPOSE. -->
+<!-- See the Mulan PSL v2 for more details. -->
+<!-- Create: 2025-07-31 -->
+<!-- =================================================================================================================== -->
+
+<template>
+  <el-input
+      v-model="cmdDisplay"
+      readonly
+      class="copy-input">
+    <template #append>
+      <el-button
+          class="copy-button"
+          @click="copyToClipboard">
+        <el-icon><IconWindowing /></el-icon>
+      </el-button>
+    </template>
+  </el-input>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { IconWindowing } from '@computing/opendesign-icons';
+
+const props = withDefaults(
+  defineProps<{
+    cmd: string;
+  }>(),
+  {
+    cmd: '',
+  }
+);
+
+const cmdDisplay = computed(() => props.cmd);
+
+// 复制到剪切板
+const copyToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(props.cmd);
+  } catch (err) {
+    console.error('复制失败:', err);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.copy-input {
+  height: 32px;
+  margin-bottom: 24px;
+  border-radius: 4px;
+  :deep(.el-input__wrapper), :deep(.el-input-group__append) {
+    box-shadow: none;
+    background: var(--o-background-color-tertiary-light);
+  }
+  :deep(.el-input__wrapper) {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    padding-right: 0;
+    input {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: monospace;
+    }
+  }
+  :deep(.el-input-group__append) {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    .copy-button {
+      width: 48px;
+      border: none;
+      span {
+        min-width: 16px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/components/DeployButton.vue b/frontend/src/views/components/DeployButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2346b1d840ee300346e3d8c2e1fc8ff45ff68627
--- /dev/null
+++ b/frontend/src/views/components/DeployButton.vue
@@ -0,0 +1,111 @@
+<!-- Copyright (c) 2025 Huawei Technologies Co., Ltd. -->
+<!-- oeDeploy is licensed under the Mulan PSL v2 .-->
+<!-- You can use this software according to the terms and conditions of the Mulan PSL v2. -->
+<!-- You may obtain a copy of Mulan PSL v2 at: -->
+<!--   http://license.coscl.org.cn/MulanPSL2 -->
+<!-- THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR -->
+<!-- IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR -->
+<!-- PURPOSE. -->
+<!-- See the Mulan PSL v2 for more details. -->
+<!-- Create: 2025-07-31 -->
+<!-- =================================================================================================================== -->
+
+<template>
+  <div class="deploy-button">
+    <div class="deploy-title-desc">
+      <div class="deploy-title">{{ props.title }}</div>
+      <div class="deploy-desc">{{ props.desc }}</div>
+    </div>
+    <el-button v-if="props.isExecuting !== 'in process'" type="primary" :class="['deploy-btn-execute', { 'not-allowed': !isAllowed }]" @click="executeAction(props.title)">
+      {{ t('btn.execute') }}
+    </el-button>
+    <el-button v-else-if="props.isExecuting === 'in process'" type="primary" class="deploy-btn-executing">
+      <img :src="loading" class="loading-icon">
+      <div>{{ t('btn.executing') }}</div>
+    </el-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import loading from '@/assets/img/loading.svg';
+
+const {t} = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    desc: string;
+    isExecuting: 'not yet' | 'in process' | 'success' | 'fail';
+    isAllowed: boolean;
+    executeAction: Function;
+  }>(),
+  {
+    title: '',
+    desc: '',
+    isExecuting: 'not yet',
+    isAllowed: true,
+  }
+);
+</script>
+
+<style scoped lang="scss">
+.deploy-button {
+  width: 100%;
+  min-height: 56px;
+  margin-bottom: 8px;
+  padding: 8px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--o-background-color-tertiary-light);
+  .deploy-title-desc {
+    .deploy-title {
+      margin-bottom: 2px;
+      font-size: 14px;
+      line-height: 22px;
+      font-weight: 500;
+      color: var(--o-text-color-primary);
+    }
+    .deploy-desc {
+      font-size: 12px;
+      line-height: 16px;
+      color: var(--o-text-color-tertiary);
+    }
+  }
+  .deploy-btn-execute, .deploy-btn-executing {
+    margin-left: 8px;
+    height: 24px;
+  }
+  .deploy-btn-execute {
+    width: 64px;
+  }
+  .not-allowed {
+    cursor: not-allowed;
+  }
+  .deploy-btn-executing {
+    width: 72px;
+    padding: 4px 8px;
+    cursor: not-allowed;
+    @keyframes rotate-ing {
+      from {
+        transform: rotate(0);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    .loading-icon {
+      animation: rotate-ing 0.9s infinite linear;
+      margin-right: 6px;
+    }
+    div {
+      font-size: 12px;
+      line-height: 16px;
+    }
+  }
+  :deep(.el-button--primary).deploy-btn-executing > span {
+    display: flex;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/components/GridDisplay.vue b/frontend/src/views/components/GridDisplay.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e688c884707d9cad3ef0c10c04855f36e682d5b8
--- /dev/null
+++ b/frontend/src/views/components/GridDisplay.vue
@@ -0,0 +1,251 @@
+<!-- Copyright (c) 2025 Huawei Technologies Co., Ltd. -->
+<!-- oeDeploy is licensed under the Mulan PSL v2 .-->
+<!-- You can use this software according to the terms and conditions of the Mulan PSL v2. -->
+<!-- You may obtain a copy of Mulan PSL v2 at: -->
+<!--   http://license.coscl.org.cn/MulanPSL2 -->
+<!-- THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR -->
+<!-- IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR -->
+<!-- PURPOSE. -->
+<!-- See the Mulan PSL v2 for more details. -->
+<!-- Create: 2025-07-31 -->
+<!-- =================================================================================================================== -->
+
+<template>
+  <div class="display-list-container">
+    <!-- 有数据 -->
+    <div class="display-list">
+<!-- 展示 -->
+      <div v-show="itemList.length > 0" class="display-list-content">
+        <div v-for="item in itemList" :key="item.name" class="display-card" @click="goToDetail(item.key)">
+          <div class="display-card-top">
+            <!-- 上：图标 -->
+            <div class="display-card-icon">
+              <!-- 图片 -->
+              <img v-if="item.icon" :src="'data:image/png;base64,' + item.icon" :alt="item.name">
+              <!-- 首 2 字母生成 -->
+              <div
+                  v-else
+                  :style="{
+                    backgroundColor: generateIconBgColor(item.name),
+                  }">
+                {{ item.name.slice(0, 2).toUpperCase() }}
+              </div>
+            </div>
+            <div class="display-card-top-info">
+              <!-- 名称 -->
+              <div class="display-card-id">{{ item.name }}</div>
+              <div class="display-card-tag-version">
+                <!-- 分类 -->
+                <div class="display-card-tag">{{ item.tag.toUpperCase() }}</div>
+                <!-- 版本 -->
+                <div class="display-card-version">{{ item.version }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 中：描述 -->
+          <div class="display-card-desc">
+            <el-text line-clamp="2">
+              {{ item.description?.zh || item.description?.en || item.description?.default || t('home.noDesc') }}
+            </el-text>
+          </div>
+
+          <!-- 下：作者 + 时间 -->
+          <div class="display-card-author-time">
+            <div class="display-card-author">{{ item.author ? `@${item.author}` : '' }}</div>
+            <div class="display-card-time">{{ item.updated_at }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 无数据 -->
+    <div v-show="itemList.count === 0" class="display-list-blank">
+      {{ t('home.noResult') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Tag } from '@/api/index.ts';
+
+// 待完善注释
+const router = useRouter();
+const {t} = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    tag: Tag;
+    itemList: {}[];
+  }>(),
+  {
+    tag: 'mcp',
+    itemList: () => [],
+  }
+);
+
+// 跳转至详情页 tag, key
+const goToDetail = (key) => {
+  router.push(`/${props.tag}/${key}`);
+};
+
+// 如果没有 icon 图片，生成背景色
+function generateIconBgColor(inputString: string): string {
+  let hash = 0;
+  for (let i = 0; i < inputString.length; i++) {
+    hash = ((hash << 5) - hash) + inputString.charCodeAt(i);
+    hash |= 0;
+  }
+  hash = Math.abs(hash);
+  const r = (hash % 128) + 1;
+  const g = ((hash >> 8) % 128) + 1;
+  const b = (((hash >> 16) ^ inputString.length) % 128) + 1;
+  return `rgb(${r}, ${g}, ${b})`;
+}
+</script>
+
+<style scoped lang="scss">
+.display-list-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0 24px;
+  .display-list {
+    flex: 1;
+    .display-list-content {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+
+      .display-card {
+        max-width: 275px;
+        height: 160px;
+        padding: 16px;
+        border-radius: 8px;
+        overflow: hidden;
+        background-color: var(--el-bg-color);
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        .display-card-top {
+          display: flex;
+          margin-bottom: 4px;
+          .display-card-icon {
+            width: 48px;
+            height: 48px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+              max-width: 48px;
+              max-height: 48px;
+              width: auto;
+              height: auto;
+              border-radius: 50%;
+            }
+            div {
+              width: 48px;
+              height: 48px;
+              border-radius: 50%;
+              line-height: 48px;
+              text-align: center;
+              font-size: 16px;
+              color: var(--o-background-color-primary-light);
+            }
+          }
+          .display-card-top-info {
+            max-width: calc(100% - 64px);
+
+            .display-card-id {
+              height: 24px;
+              font-size: 16px;
+              line-height: 24px;
+              font-weight: 700;
+              margin-bottom: 4px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            .display-card-tag-version {
+              display: flex;
+              .display-card-tag, .display-card-version {
+                font-size: 12px;
+                font-weight: 500;
+                line-height: 16px;
+                padding: 0 4px;
+                border-radius: 2px;
+              }
+              .display-card-tag {
+                color: rgba(0, 119, 255, 1);
+                background: rgba(0, 119, 255, 0.2);
+              }
+              .display-card-version {
+                color: var(--o-text-color-secondary);
+                background: var(--o-background-color-tertiary-light);
+                margin-left: 8px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+          }
+        }
+
+        .display-card-desc {
+          height: 44px;
+          margin-bottom: 16px;
+          > span {
+            line-height: 22px;
+            margin-bottom: 16px;
+          }
+        }
+
+        .display-card-author-time {
+          display: flex;
+          justify-content: space-between;
+          color: var(--o-text-color-tertiary);
+          .display-card-author {
+            margin-right: 8px;
+          }
+          div {
+            height: 16px;
+            line-height: 16px;
+            font-size: 12px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+
+  .display-list-blank {
+    width: 100%;
+    height: 196px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    color: var(--el-color-info);
+  }
+}
+
+@media only screen and (min-width: 857px) {
+  .display-list-container .display-list .display-list-content {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media only screen and (min-width: 1148px) {
+  .display-list-container .display-list .display-list-content {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+</style>
\ No newline at end of file