refactor: update ExtensionCard styling and improve layout for better responsiveness

dashboard/src/components/shared/ExtensionCard.vue

@@ -84,19 +84,17 @@ const viewReadme = () => {
 </script>
 
 <template>
-  <v-card class="mx-auto d-flex flex-column" elevation="2" :style="{
+  <v-card class="mx-auto d-flex flex-column" elevation="0" :style="{
     position: 'relative',
     backgroundColor: useCustomizerStore().uiTheme === 'PurpleTheme' ? marketMode ? '#f8f0dd' : '#ffffff' : '#282833',
     color: useCustomizerStore().uiTheme === 'PurpleTheme' ? '#000000dd' : '#ffffff'
   }">
     <v-card-text style="padding: 16px; padding-bottom: 0px; display: flex; gap: 16px; width: 100%;">
       <div v-if="extension?.logo">
-        <v-avatar size="65">
-          <v-img :src="extension.logo" :alt="extension.name" cover></v-img>
-        </v-avatar>
+        <img :src="extension.logo" :alt="extension.name" cover width="100"/>
       </div>
 
-      <div style="width: 100%;">
+      <div style="overflow-x: auto;">
         <!-- Top-right three-dot menu -->
         <div style="position: absolute; right: 8px; top: 8px; z-index: 5;">
           <v-menu offset-y>
@@ -169,8 +167,8 @@ const viewReadme = () => {
             style="color: gray; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 84px;">
             {{ extension.author }} / {{ extension.name }}
           </div>
-          <p class="text-h3 font-weight-black" :class="{ 'text-h4': $vuetify.display.xs }">
-            {{ extension.display_name || extension.name }}
+          <p class="text-h3 font-weight-black extension-title" :class="{ 'text-h4': $vuetify.display.xs }">
+            <span class="extension-title__text">{{ extension.display_name || extension.name }}</span>
             <v-tooltip location="top" v-if="extension?.has_update && !marketMode">
               <template v-slot:activator="{ props: tooltipProps }">
                 <v-icon v-bind="tooltipProps" color="warning" class="ml-2" icon="mdi-update" size="small"></v-icon>
@@ -194,7 +192,7 @@ const viewReadme = () => {
               <v-icon icon="mdi-arrow-up-bold" start></v-icon>
               {{ extension.online_version }}
             </v-chip>
-            <v-chip color="primary" label size="small" class="ml-2" v-if="extension.handlers?.length">
+            <v-chip color="primary" label size="small" class="ml-2" v-if="extension.handlers?.length" @click="viewHandlers" style="cursor: pointer;">
               <v-icon icon="mdi-cogs" start></v-icon>
               {{ extension.handlers?.length }}{{ tm("card.status.handlersCount") }}
             </v-chip>
@@ -204,7 +202,7 @@ const viewReadme = () => {
             </v-chip>
           </div>
 
-          <div class="mt-2" :class="{ 'text-caption': $vuetify.display.xs }" style="overflow-y: auto; height: 60px;">
+          <div class="mt-2" :class="{ 'text-caption': $vuetify.display.xs }" style="overflow-y: auto; height: 80px; font-size: 90%;">
             {{ extension.desc }}
           </div>
         </div>
@@ -222,6 +220,19 @@ const viewReadme = () => {
   margin-left: 12px;
 }
 
+.extension-title {
+  display: flex;
+  align-items: center;
+}
+
+.extension-title__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 6px
+}
+
 @media (max-width: 600px) {
   .extension-image-container {
     margin-left: 8px;

dashboard/src/theme/LightTheme.ts

@@ -42,7 +42,7 @@ const PurpleTheme: ThemeTypes = {
     preBg: 'rgb(249, 249, 249)',
     code: 'rgb(13, 13, 13)',
     chatMessageBubble: '#e7ebf4',
-    mcpCardBg: '#f7f2f9',
+    mcpCardBg: '#ecf2faff',
   }
 };
 

dashboard/src/views/ExtensionPage.vue

@@ -543,7 +543,7 @@ onMounted(async () => {
 <template>
   <v-row>
     <v-col cols="12" md="12">
-      <v-card variant="flat">
+      <v-card variant="flat" style="background-color: transparent;">
         <!-- 标签页 -->
         <v-card-text>
           <!-- 标签栏和搜索栏 - 响应式布局 -->
@@ -750,7 +750,7 @@ onMounted(async () => {
                 <v-row>
                   <v-col cols="12" md="6" lg="6" v-for="extension in filteredPlugins" :key="extension.name"
                     class="pb-4">
-                    <ExtensionCard :extension="extension" class="rounded-lg"
+                    <ExtensionCard :extension="extension" class="rounded-lg" style="background-color: rgb(var(--v-theme-mcpCardBg));"
                       @configure="openExtensionConfig(extension.name)" @uninstall="uninstallExtension(extension.name)"
                       @update="updateExtension(extension.name)" @reload="reloadPlugin(extension.name)"
                       @toggle-activation="extension.activated ? pluginOff(extension) : pluginOn(extension)"
@@ -797,7 +797,7 @@ onMounted(async () => {
               </div>
 
               <v-col cols="12" md="12" style="padding: 0px;">
-                <v-data-table :headers="pluginMarketHeaders" :items="pluginMarketData" item-key="name"
+                <v-data-table :headers="pluginMarketHeaders" :items="pluginMarketData" item-key="name" style="border-radius: 10px;"
                   :loading="loading_" v-model:search="marketSearch" :filter-keys="filterKeys"
                   :custom-filter="marketCustomFilter">
                   <template v-slot:item.name="{ item }">