From a06b7e8b03b1a8372d038f647a19bf89d92c98e0 Mon Sep 17 00:00:00 2001
From: Kuingsmile <ma_shiqing@163.com>
Date: Wed, 9 Apr 2025 15:23:42 +0800
Subject: [PATCH] :sparkles: Feature(custom): refactor plugin page

---
 src/renderer/layouts/Main.vue | 266 ++++++++++-----
 src/renderer/pages/Plugin.vue | 621 +++++++++++++++++++++-------------
 src/renderer/pages/Upload.vue |   2 +-
 3 files changed, 564 insertions(+), 325 deletions(-)

diff --git a/src/renderer/layouts/Main.vue b/src/renderer/layouts/Main.vue
index cce41b99..9e299b26 100644
--- a/src/renderer/layouts/Main.vue
+++ b/src/renderer/layouts/Main.vue
@@ -4,21 +4,20 @@
       <div class="fake-title-bar__title">PicList - {{ version }}</div>
       <div v-if="osGlobal !== 'darwin'" class="handle-bar">
         <el-icon
-          class="minus"
+          class="control-icon always-on-top"
           :color="isAlwaysOnTop ? '#409EFF' : '#fff'"
           size="20"
-          style="margin-right: 10px"
           @click="setAlwaysOnTop"
         >
           <ArrowUpBold />
         </el-icon>
-        <el-icon class="minus" color="#fff" size="20" style="margin-right: 10px" @click="minimizeWindow">
+        <el-icon class="control-icon minimize" color="#fff" size="20" @click="minimizeWindow">
           <SemiSelect />
         </el-icon>
-        <el-icon class="plus" color="orange" size="20" style="margin-right: 10px" @click="openMiniWindow">
+        <el-icon class="control-icon mini-window" color="#FFA500" size="20" @click="openMiniWindow">
           <ArrowDownBold />
         </el-icon>
-        <el-icon class="close" color="#fff" size="20" @click="closeWindow">
+        <el-icon class="control-icon close" color="#fff" size="20" @click="closeWindow">
           <CloseBold />
         </el-icon>
       </div>
@@ -26,38 +25,30 @@
     <el-progress
       v-if="isShowprogress"
       :percentage="progress"
-      :stroke-width="7"
+      :stroke-width="4"
       :text-inside="true"
       :show-text="false"
       status="success"
       class="progress-bar"
     />
-    <el-row style="padding-top: 22px" class="main-content">
+    <el-row class="main-content">
       <el-col class="side-bar-menu">
         <el-menu class="picgo-sidebar" :default-active="defaultActive" :unique-opened="true" @select="handleSelect">
-          <el-menu-item :index="routerConfig.UPLOAD_PAGE">
-            <el-icon>
-              <UploadFilled />
-            </el-icon>
+          <el-menu-item :index="routerConfig.UPLOAD_PAGE" class="side-menu-item">
+            <el-icon class="menu-icon"><UploadFilled /></el-icon>
             <span>{{ $T('UPLOAD_AREA') }}</span>
           </el-menu-item>
-          <el-menu-item :index="routerConfig.MANAGE_LOGIN_PAGE">
-            <el-icon>
-              <PieChart />
-            </el-icon>
+          <el-menu-item :index="routerConfig.MANAGE_LOGIN_PAGE" class="side-menu-item">
+            <el-icon class="menu-icon"><PieChart /></el-icon>
             <span>{{ $T('MANAGE_PAGE') }}</span>
           </el-menu-item>
-          <el-menu-item :index="routerConfig.GALLERY_PAGE">
-            <el-icon>
-              <PictureFilled />
-            </el-icon>
+          <el-menu-item :index="routerConfig.GALLERY_PAGE" class="side-menu-item">
+            <el-icon class="menu-icon"><PictureFilled /></el-icon>
             <span>{{ $T('GALLERY') }}</span>
           </el-menu-item>
-          <el-sub-menu index="sub-menu" :show-timeout="0" :hide-timeout="0" :popper-offset="0">
+          <el-sub-menu index="sub-menu" :show-timeout="0" :hide-timeout="0" :popper-offset="0" class="side-menu-sub">
             <template #title>
-              <el-icon>
-                <Menu />
-              </el-icon>
+              <el-icon class="menu-icon"><Menu /></el-icon>
               <span>{{ $T('PICBEDS_SETTINGS') }}</span>
             </template>
             <template v-for="item in picBedGlobal">
@@ -65,35 +56,32 @@
                 v-if="item.visible"
                 :key="item.type"
                 :index="`${routerConfig.UPLOADER_CONFIG_PAGE}-${item.type}`"
+                class="side-submenu-item"
               >
                 <span>{{ item.name }}</span>
               </el-menu-item>
             </template>
           </el-sub-menu>
-          <el-menu-item :index="routerConfig.SETTING_PAGE">
-            <el-icon>
-              <Tools />
-            </el-icon>
+          <el-menu-item :index="routerConfig.SETTING_PAGE" class="side-menu-item">
+            <el-icon class="menu-icon"><Tools /></el-icon>
             <span>{{ $T('PICLIST_SETTINGS') }}</span>
           </el-menu-item>
-          <el-menu-item :index="routerConfig.PLUGIN_PAGE">
-            <el-icon>
-              <Share />
-            </el-icon>
+          <el-menu-item :index="routerConfig.PLUGIN_PAGE" class="side-menu-item">
+            <el-icon class="menu-icon"><Share /></el-icon>
             <span>{{ $T('PLUGIN_SETTINGS') }}</span>
           </el-menu-item>
-          <el-menu-item :index="routerConfig.DocumentPage">
-            <el-icon>
-              <Link />
-            </el-icon>
+          <el-menu-item :index="routerConfig.DocumentPage" class="side-menu-item">
+            <el-icon class="menu-icon"><Link /></el-icon>
             <span>{{ $T('MANUAL') }}</span>
           </el-menu-item>
         </el-menu>
+      </el-col>
+      <div class="info-window-container">
         <el-icon class="info-window" @click="openMenu">
           <InfoFilled />
         </el-icon>
-      </el-col>
-      <el-col :span="21" :offset="3" style="height: 100%" class="main-wrapper">
+      </div>
+      <el-col :span="21" :offset="3" class="main-wrapper">
         <router-view v-slot="{ Component }">
           <transition name="picgo-fade" mode="out-in">
             <keep-alive :include="keepAlivePages">
@@ -305,13 +293,20 @@ export default {
   name: 'MainPage'
 }
 </script>
+
 <style lang="stylus">
 $darwinBg = transparentify(#172426, #000, 0.7)
+$menuActiveBg = rgba(64, 158, 255, 0.15)
+$menuHoverBg = rgba(255, 255, 255, 0.08)
+$borderRadius = 8px
+$transitionDefault = all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
+
 .setting-list-scroll
   height 800px
   overflow-y auto
   overflow-x hidden
   margin-right 0!important
+
 .picgo-fade
   &-enter,
   &-leave,
@@ -319,14 +314,44 @@ $darwinBg = transparentify(#172426, #000, 0.7)
     opacity 0
   &-enter-active,
   &-leave-active
-    transition all 150ms linear
+    transition all 200ms cubic-bezier(0.4, 0, 0.2, 1)
+
 .view-title
   color #eee
   font-size 20px
   text-align center
   margin 10px auto
+
 #main-page
   height 100%
+  background linear-gradient(135deg, rgba(40, 44, 52, 0.85) 0%, rgba(30, 34, 42, 0.9) 100%)
+  display flex
+  flex-direction column
+  overflow hidden
+
+  .info-window-container
+    position fixed
+    bottom 4px
+    left 4px
+    z-index 50
+    width 40px
+    height 40px
+
+    .info-window
+      cursor pointer
+      color #878d99
+      padding 6px
+      background rgba(40, 44, 52, 0.5)
+      border-radius 50%
+      box-shadow 0 2px 8px rgba(0, 0, 0, 0.15)
+      transition $transitionDefault
+
+      &:hover
+        color #409EFF
+        background rgba(64, 158, 255, 0.15)
+        transform translateY(-2px)
+        box-shadow 0 4px 12px rgba(0, 0, 0, 0.25)
+
   .qrcode-dialog
     .qrcode-container
       display flex
@@ -335,16 +360,26 @@ $darwinBg = transparentify(#172426, #000, 0.7)
       padding-top 10px
     .copy-picbed-config
       margin-left 10px
+      transition $transitionDefault
+      &:hover
+        transform translateY(-2px)
+        box-shadow 0 4px 12px rgba(0, 0, 0, 0.2)
+
   .fake-title-bar
     -webkit-app-region drag
-    height h = 22px
+    height h = 28px
     width 100%
     text-align center
     color #eee
-    font-size 12px
+    font-size 13px
+    font-weight 500
     line-height h
     position fixed
     z-index 100
+    backdrop-filter blur(5px)
+    background rgba(30, 34, 42, 0.7)
+    box-shadow 0 1px 3px rgba(0, 0, 0, 0.2)
+
     &.darwin
       background transparent
       background-image linear-gradient(
@@ -356,98 +391,167 @@ $darwinBg = transparentify(#172426, #000, 0.7)
       )
       .fake-title-bar__title
         padding-left 167px
+
+    .fake-title-bar__title
+      letter-spacing 0.5px
+
     .handle-bar
       position absolute
-      top 2px
-      right 4px
+      top 4px
+      right 8px
       z-index 10000
       -webkit-app-region no-drag
-      .el-icon
+      display flex
+      gap 12px
+
+      .control-icon
         cursor pointer
         font-size 16px
-        margin-left 5px
-      .el-icon.minus
-        &:hover
-          color #409EFF
-      .el-icon.close
-        &:hover
-          color #F15140
-      .el-icon.plus
-        &:hover
-          color #69C282
+        transition $transitionDefault
+        border-radius 4px
+        padding 2px
+
+        &.always-on-top
+          &:hover
+            color #409EFF
+            background rgba(64, 158, 255, 0.15)
+
+        &.minimize
+          &:hover
+            color #409EFF
+            background $menuHoverBg
+
+        &.close
+          &:hover
+            color #F15140
+            background rgba(241, 81, 64, 0.15)
+
+        &.mini-window
+          &:hover
+            color #FFC107
+            background rgba(255, 193, 7, 0.15)
+
+  .progress-bar
+    position fixed
+    top 28px
+    width 100%
+    z-index 90
+    transition opacity 0.3s ease
+
   .main-wrapper
     &.darwin
       background $darwinBg
+    padding 10px
+    border-radius $borderRadius
+    background rgba(30, 34, 42, 0.5)
+
   .side-bar-menu
     position fixed
-    height calc(100vh - 22px)
+    height calc(100vh - 28px)
     overflow-x hidden
     overflow-y auto
     width 142px
-    .info-window
-      cursor pointer
-      position fixed
-      bottom 4px
-      left 4px
-      cursor poiter
-      color #878d99
-      transition .2s all ease-in-out
-      &:hover
-        color #409EFF
+    padding-top 35px
+    padding-bottom 40px
+    transition $transitionDefault
+    background rgba(30, 34, 42, 0.5)
+    backdrop-filter blur(10px)
+
+    &:hover
+      width 145px
+
   .el-menu
     border-right none
     background transparent
     width 142px
+
     &-item
       color #eee
       position relative
+      border-radius $borderRadius
+      margin 4px 8px
+      height 40px
+      line-height 40px
+      transition $transitionDefault
+
       &:focus,
       &:hover
         color #fff
-        background transparent
+        background $menuHoverBg
+
       &.is-active
         color active-color = #409EFF
-        &:before
-          content ''
-          position absolute
-          width 1px
-          height 20px
-          right 0
-          top 18px
-          background active-color
+        background $menuActiveBg
+        font-weight 500
+
+        .menu-icon
+          color active-color
+
+  .side-menu-item
+    padding-left 16px!important
+
+    .menu-icon
+      margin-right 8px
+      transition $transitionDefault
+
   .el-sub-menu__title
     color #eee
+    border-radius $borderRadius
+    margin 4px 8px
+    height 40px
+    line-height 40px
+    transition $transitionDefault
+
     &:hover
-      background transparent
+      background $menuHoverBg
       span
         color #fff
+
+    .menu-icon
+      margin-right 8px
+
   .el-sub-menu
     .el-menu-item
       min-width 142px
+
       &.is-active
-        &:before
-          top 16px
+        background $menuActiveBg
+
+  .side-submenu-item
+    margin-left 0!important
+    border-radius $borderRadius
+    padding-left 38px!important
+
   .main-content
-    padding-top 22px
+    padding-top 28px
     position relative
-    height calc(100vh - 22px)
+    height calc(100vh - 28px)
     z-index 10
+
   .el-dialog__body
     padding 20px
+
   .support
     text-align center
     &-title
       text-align center
       color #878d99
+
   .align-center
     input
       text-align center
+
   *::-webkit-scrollbar
-    width 2px
+    width 4px
     height 8px
+
   *::-webkit-scrollbar-thumb
-    border-radius 4px
-    background #6f6f6f
+    border-radius 10px
+    background rgba(111, 111, 111, 0.5)
+
+    &:hover
+      background rgba(140, 140, 140, 0.7)
+
   *::-webkit-scrollbar-track
     background-color transparent
 </style>
diff --git a/src/renderer/pages/Plugin.vue b/src/renderer/pages/Plugin.vue
index f03c39df..a4bddc97 100644
--- a/src/renderer/pages/Plugin.vue
+++ b/src/renderer/pages/Plugin.vue
@@ -1,122 +1,144 @@
 <template>
   <div id="plugin-view">
-    <div class="view-title">
-      {{ $T('PLUGIN_SETTINGS') }} -
-      <el-tooltip :content="pluginListToolTip" placement="right" :persistent="false" teleported>
-        <el-icon class="el-icon-goods" @click="goAwesomeList">
-          <Goods />
-        </el-icon>
-      </el-tooltip>
-      <el-tooltip :content="updateAllToolTip" placement="left" :persistent="false" teleported>
-        <el-icon class="el-icon-update" @click="handleUpdateAllPlugin">
-          <Refresh />
-        </el-icon>
-      </el-tooltip>
-      <el-tooltip :content="importLocalPluginToolTip" placement="left">
-        <el-icon class="el-icon-download" :persistent="false" teleported @click="handleImportLocalPlugin">
-          <Download />
-        </el-icon>
-      </el-tooltip>
+    <div class="view-header">
+      <div class="view-title">
+        <span>{{ $T('PLUGIN_SETTINGS') }}</span>
+        <div class="view-actions">
+          <el-tooltip :content="pluginListToolTip" placement="top" :persistent="false" teleported>
+            <el-button class="action-button" circle @click="goAwesomeList">
+              <el-icon><Goods /></el-icon>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip :content="updateAllToolTip" placement="top" :persistent="false" teleported>
+            <el-button class="action-button" circle @click="handleUpdateAllPlugin">
+              <el-icon><Refresh /></el-icon>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip :content="importLocalPluginToolTip" placement="top" :persistent="false" teleported>
+            <el-button class="action-button" circle @click="handleImportLocalPlugin">
+              <el-icon><Download /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+      <div class="search-bar">
+        <el-input v-model="searchText" :placeholder="$T('PLUGIN_SEARCH_PLACEHOLDER')" size="large" class="search-input">
+          <template #prefix>
+            <el-icon class="search-icon"><Search /></el-icon>
+          </template>
+          <template #suffix>
+            <el-icon v-if="searchText" class="clear-icon" @click="cleanSearch">
+              <Close />
+            </el-icon>
+          </template>
+        </el-input>
+      </div>
     </div>
-    <el-row class="handle-bar" :class="{ 'cut-width': pluginList.length > 6 }">
-      <el-input v-model="searchText" :placeholder="$T('PLUGIN_SEARCH_PLACEHOLDER')" size="small">
-        <template #suffix>
-          <el-icon class="el-input__icon" style="cursor: pointer" @click="cleanSearch">
-            <close />
-          </el-icon>
-        </template>
-      </el-input>
-    </el-row>
-    <el-row id="pluginList" v-loading="loading" :gutter="10" class="plugin-list">
-      <el-col
-        v-for="item in pluginList"
-        :key="item.fullName"
-        class="plugin-item__container"
-        :xs="24"
-        :sm="pluginList.length === 1 ? 24 : 12"
-        :md="pluginList.length === 1 ? 24 : 12"
-        :lg="pluginList.length === 1 ? 24 : 12"
-        :xl="pluginList.length === 1 ? 24 : 12"
-      >
-        <div class="plugin-item" :class="{ darwin: osGlobal === 'darwin' }">
-          <div v-if="!item.gui" class="cli-only-badge" title="CLI only">CLI</div>
-          <img class="plugin-item__logo" :src="item.logo" :onerror="defaultLogo" />
-          <div class="plugin-item__content" :class="{ disabled: !item.enabled }">
-            <div class="plugin-item__name" @click="openHomepage(item.homepage)">
-              {{ item.name }} <small>{{ ' ' + item.version }}</small> &nbsp;
-              <!-- 升级提示 -->
-              <el-tag
-                v-if="latestVersionMap[item.fullName] && latestVersionMap[item.fullName] !== item.version"
-                type="success"
-                size="small"
-                round
-                effect="plain"
-              >
-                new
-              </el-tag>
+
+    <div id="pluginList" v-loading="loading" class="plugin-list" element-loading-text="Loading...">
+      <el-row :gutter="16">
+        <el-col
+          v-for="item in pluginList"
+          :key="item.fullName"
+          class="plugin-item__container"
+          :xs="24"
+          :sm="12"
+          :md="8"
+          :lg="8"
+          :xl="6"
+        >
+          <div class="plugin-card" :class="{ disabled: !item.enabled, darwin: osGlobal === 'darwin' }">
+            <div v-if="!item.gui" class="cli-only-badge">CLI</div>
+            <div class="plugin-header">
+              <img class="plugin-logo" :src="item.logo" :onerror="defaultLogo" />
+              <div class="plugin-title" @click="openHomepage(item.homepage)">
+                <div class="plugin-name">
+                  {{ item.name }}
+                  <el-tag
+                    v-if="latestVersionMap[item.fullName] && latestVersionMap[item.fullName] !== item.version"
+                    type="success"
+                    size="small"
+                    effect="dark"
+                    class="version-tag"
+                  >
+                    new
+                  </el-tag>
+                </div>
+                <div class="plugin-version">v{{ item.version }}</div>
+              </div>
             </div>
-            <div class="plugin-item__desc" :title="item.description">
+
+            <div class="plugin-description" :title="item.description">
               {{ item.description }}
             </div>
-            <div class="plugin-item__info-bar">
-              <span class="plugin-item__author">
+
+            <div class="plugin-footer">
+              <div class="plugin-author">
+                <el-icon><User /></el-icon>
                 {{ item.author.replace(/<.*>/, '') }}
-              </span>
-              <span class="plugin-item__config">
+              </div>
+
+              <div class="plugin-actions">
                 <template v-if="searchText">
                   <template v-if="!item.hasInstall">
-                    <span v-if="!item.ing" class="config-button install" @click="installPlugin(item)">
+                    <el-button
+                      v-if="!item.ing"
+                      type="primary"
+                      size="small"
+                      :loading="item.ing"
+                      @click="installPlugin(item)"
+                    >
                       {{ $T('PLUGIN_INSTALL') }}
-                    </span>
-                    <span v-else-if="item.ing" class="config-button ing">
+                    </el-button>
+                    <el-button v-else type="info" size="small" loading>
                       {{ $T('PLUGIN_INSTALLING') }}
-                    </span>
+                    </el-button>
                   </template>
-                  <span v-else class="config-button ing">
+                  <el-button v-else type="success" size="small" disabled>
                     {{ $T('PLUGIN_INSTALLED') }}
-                  </span>
+                  </el-button>
                 </template>
                 <template v-else>
-                  <span v-if="item.ing" class="config-button ing">
+                  <el-button v-if="item.ing" type="info" size="small" loading>
                     {{ $T('PLUGIN_DOING_SOMETHING') }}
-                  </span>
+                  </el-button>
                   <template v-else>
-                    <el-icon v-if="item.enabled" class="el-icon-setting" @click="buildContextMenu(item)">
-                      <Tools />
-                    </el-icon>
-                    <el-icon v-else class="el-icon-remove-outline" @click="buildContextMenu(item)">
-                      <Remove />
-                    </el-icon>
+                    <el-button v-if="item.enabled" type="primary" size="small" circle @click="buildContextMenu(item)">
+                      <el-icon><Tools /></el-icon>
+                    </el-button>
+                    <el-button v-else type="danger" size="small" circle @click="buildContextMenu(item)">
+                      <el-icon><Remove /></el-icon>
+                    </el-button>
                   </template>
                 </template>
-              </span>
+              </div>
             </div>
           </div>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row v-show="needReload" class="reload-mask" :class="{ 'cut-width': pluginList.length > 6 }" justify="center">
-      <el-button type="primary" size="small" round @click="reloadApp">
+        </el-col>
+      </el-row>
+    </div>
+
+    <div v-show="needReload" class="reload-mask">
+      <el-button type="primary" size="large" @click="reloadApp">
+        <el-icon class="reload-icon"><Refresh /></el-icon>
         {{ $T('TIPS_NEED_RELOAD') }}
       </el-button>
-    </el-row>
+    </div>
+
     <el-dialog
       v-model="dialogVisible"
       :modal-append-to-body="false"
-      :title="
-        $T('CONFIG_THING', {
-          c: configName
-        })
-      "
+      :title="$T('CONFIG_THING', { c: configName })"
       width="70%"
+      class="config-dialog"
       append-to-body
     >
       <config-form :id="configName" ref="$configForm" :config="config" :type="currentType" color-mode="white" />
       <template #footer>
-        <el-button round @click="dialogVisible = false">
+        <el-button @click="dialogVisible = false">
           {{ $T('CANCEL') }}
         </el-button>
-        <el-button type="primary" round @click="handleConfirmConfig">
+        <el-button type="primary" @click="handleConfirmConfig">
           {{ $T('CONFIRM') }}
         </el-button>
       </template>
@@ -129,7 +151,7 @@ import axios from 'axios'
 import { ipcRenderer, IpcRendererEvent } from 'electron'
 import { ElMessageBox } from 'element-plus'
 import { debounce, DebouncedFunc } from 'lodash'
-import { Close, Download, Refresh, Goods, Remove, Tools } from '@element-plus/icons-vue'
+import { Close, Download, Refresh, Goods, Remove, Tools, Search, User } from '@element-plus/icons-vue'
 import { computed, ref, onBeforeMount, onBeforeUnmount, watch, onMounted, reactive, toRaw } from 'vue'
 
 import ConfigForm from '@/components/ConfigFormForPlugin.vue'
@@ -309,7 +331,8 @@ async function buildContextMenu(plugin: IPicGoPlugin) {
 function handleResize() {
   const myDiv = document.getElementById('pluginList') as HTMLElement
   const windowHeight = window.innerHeight
-  const newHeight = windowHeight * 0.75
+  const headerHeight = 120 // Adjusted for new header layout
+  const newHeight = windowHeight - headerHeight - 30
   myDiv.style.height = newHeight + 'px'
 }
 
@@ -492,171 +515,283 @@ export default {
 }
 </script>
 <style lang="stylus">
-$darwinBg = #172426
+$primaryColor = #409EFF
+$dangerColor = #F56C6C
+$successColor = #67C23A
+$warningColor = #E6A23C
+$infoColor = #909399
+$textColor = #FFFFFF
+$subtextColor = #E8EAED
+$disabledColor = #A0A0A0
+$cardBg = rgba(55, 60, 70, 0.85)
+$headerBg = rgba(35, 40, 50, 0.9)
+$hoverBg = rgba(65, 70, 85, 0.9)
+$borderRadius = 8px
+$transitionEase = all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
+$boxShadow = 0 4px 12px rgba(0, 0, 0, 0.2)
+$hoverShadow = 0 8px 16px rgba(0, 0, 0, 0.3)
+
 #plugin-view
   position absolute
   left 142px
   right 0
-  .el-loading-mask
-    background-color rgba(0, 0, 0, 0.8)
-  .plugin-list
-    align-content flex-start
-    height: 600px;
-    box-sizing: border-box;
-    padding: 8px 15px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    position: absolute;
-    top: 70px;
-    left: 5px;
-    transition: all 0.2s ease-in-out 0.1s;
-    width: 100%
-    .el-loading-mask
-      left: 20px
-      width: calc(100% - 40px)
+  height 100%
+  padding 0 16px
+  box-sizing border-box
+  overflow hidden
+  color $textColor
+
+  .view-header
+    position sticky
+    top 0
+    z-index 90
+    padding 16px 0
+    background linear-gradient(to bottom, rgba(30, 34, 42, 0.95), rgba(30, 34, 42, 0.85))
+    backdrop-filter blur(8px)
+    border-bottom 1px solid rgba(255, 255, 255, 0.1)
+
   .view-title
-    color #eee
-    font-size 20px
-    text-align center
-    margin 10px auto
-    position relative
-    i.el-icon-goods
-      margin-left 4px
-      font-size 20px
-      vertical-align middle
-      cursor pointer
-      transition color .2s ease-in-out
-      &:hover
-        color #49B1F5
-    i.el-icon-update
-      position absolute
-      right 35px
-      top 8px
-      font-size 20px
-      vertical-align middle
-      cursor pointer
-      transition color .2s ease-in-out
-      &:hover
-        color #49B1F5
-    i.el-icon-download
-      position absolute
-      right 5px
-      top 8px
-      font-size 20px
-      vertical-align middle
-      cursor pointer
-      transition color .2s ease-in-out
-      &:hover
-        color #49B1F5
-  .handle-bar
-    margin-bottom 20px
-    &.cut-width
-      padding-right: 8px
-  .el-input__inner
-    border-radius 0
-  .plugin-item
-    box-sizing border-box
-    height 80px
-    background #444
-    padding 8px
-    user-select text
-    transition all .2s ease-in-out
-    position relative
-    &__container
-      height 80px
-      margin-bottom 10px
-    .cli-only-badge
-      position absolute
-      right 0px
-      top 0
-      font-size 12px
-      padding 3px 8px
-      background #49B1F5
-      color #eee
-    &.darwin
-      background transparentify($darwinBg, #000, 0.75)
-      &:hover
-        background transparentify($darwinBg, #000, 0.85)
-    &:hover
-      background #333
-    &__logo
-      width 64px
-      height 64px
-      float left
-    &__content
-      float left
-      width calc(100% - 72px)
-      height 64px
-      color #ddd
-      margin-left 8px
+    display flex
+    justify-content space-between
+    align-items center
+    margin-bottom 16px
+    font-size 24px
+    font-weight 600
+
+    span
+      flex 1
+
+    .view-actions
+      display flex
+      gap 8px
+
+      .action-button
+        background rgba(255, 255, 255, 0.1)
+        border none
+        color $textColor
+        transition $transitionEase
+
+        &:hover
+          background rgba(255, 255, 255, 0.2)
+          transform translateY(-2px)
+
+  .search-bar
+    margin-bottom 8px
+
+    .search-input
+      .el-input__wrapper
+        background rgba(255, 255, 255, 0.1)
+        border-radius $borderRadius
+        border none
+        box-shadow none !important
+        transition $transitionEase
+
+        &:hover, &:focus-within
+          background rgba(255, 255, 255, 0.15)
+
+      .el-input__inner
+        color $textColor
+
+      .search-icon
+        color $disabledColor
+
+      .clear-icon
+        color $disabledColor
+        cursor pointer
+        transition $transitionEase
+
+        &:hover
+          color $textColor
+
+  .plugin-list
+    height calc(100vh - 175px)
+    overflow-y auto
+    overflow-x hidden
+    padding 16px 0  // Increased padding from 8px to 16px
+    scroll-behavior smooth
+
+    .el-row
+      margin-bottom 0 !important  // Ensure el-row doesn't add its own margins
+
+    .el-loading-mask
+      background-color rgba(0, 0, 0, 0.8)
+      backdrop-filter blur(4px)
+
+  .plugin-item__container
+    margin-bottom 24px  // Increased from 16px to provide more space between rows
+
+    .plugin-card
+      background $cardBg
+      border-radius $borderRadius
+      padding 16px
+      min-height 220px
+      box-shadow $boxShadow
+      transition $transitionEase
       display flex
       flex-direction column
-      justify-content space-between
-      &.disabled
-        color #aaa
-    &__name
-      font-size 16px
-      height 22px
-      line-height 22px
-      font-weight 600
-      cursor pointer
-      text-overflow ellipsis
-      white-space nowrap
-      overflow hidden
-      transition all .2s ease-in-out
-      &:hover
-        color: #1B9EF3
-    &__desc
-      font-size 14px
-      height 21px
-      line-height 21px
-      overflow hidden
-      text-overflow ellipsis
-      white-space nowrap
-    &__info-bar
-      font-size 14px
-      height 21px
-      line-height 28px
       position relative
-    &__author
+      overflow hidden
+      border 1px solid rgba(255, 255, 255, 0.1)  // Added subtle border
+
+      &:hover
+        transform translateY(-3px)
+        box-shadow $hoverShadow
+        background $hoverBg
+        border-color rgba(255, 255, 255, 0.2)  // Brighter border on hover
+
+    &.disabled
+      opacity 0.7
+
+      &:before
+        content ""
+        position absolute
+        top 0
+        left 0
+        right 0
+        bottom 0
+        background rgba(0, 0, 0, 0.3)
+        z-index 1
+        pointer-events none
+
+    .cli-only-badge
+      position absolute
+      right 0
+      top 0
+      font-size 11px
+      font-weight 600
+      padding 4px 10px
+      background $warningColor
+      color #fff
+      z-index 5
+      border-bottom-left-radius $borderRadius
+
+  .plugin-header
+    display flex
+    align-items center
+    margin-bottom 12px
+
+    .plugin-logo
+      width 48px
+      height 48px
+      border-radius 12px
+      object-fit cover
+      background rgba(0, 0, 0, 0.2)
+      box-shadow 0 2px 6px rgba(0, 0, 0, 0.2)
+
+    .plugin-title
+      margin-left 12px
+      cursor pointer
+      transition $transitionEase
+
+      &:hover
+        color $primaryColor
+
+      .plugin-name
+        font-size 16px
+        font-weight 600
+        display flex
+        align-items center
+        max-width 200px
+        overflow hidden
+        text-overflow ellipsis
+        white-space nowrap
+
+        .version-tag
+          margin-left 8px
+          font-size 10px
+          height 18px
+          line-height 1
+          padding 2px 6px
+          border-radius 10px
+
+      .plugin-version
+        font-size 12px
+        color $disabledColor
+        margin-top 2px
+
+  .plugin-description
+    flex 1
+    font-size 14px
+    line-height 1.5
+    margin-bottom 16px
+    display -webkit-box
+    -webkit-line-clamp 3
+    -webkit-box-orient vertical
+    overflow hidden
+    color rgba(255, 255, 255, 0.95)
+    font-weight 400
+
+  .plugin-footer
+    display flex
+    justify-content space-between
+    align-items center
+    margin-top auto
+    padding-top 12px
+    border-top 1px solid rgba(255, 255, 255, 0.1)
+
+    .plugin-author
+      font-size 13px
+      color $disabledColor
+      display flex
+      align-items center
+      max-width 60%
       overflow hidden
       text-overflow ellipsis
       white-space nowrap
-    &__config
-      float right
-      font-size 16px
-      cursor pointer
-      transition all .2s ease-in-out
-      &:hover
-        color: #1B9EF3
-    .config-button
-      font-size 12px
-      color #ddd
-      background #222
-      padding 1px 8px
-      height 18px
-      line-height 18px
-      text-align center
-      position absolute
-      top 4px
-      right 20px
-      transition all .2s ease-in-out
-      &.reload
-        right 0px
-      &.ing
-        right 0px
-      &.install
-        right 0px
-        &:hover
-          background: #1B9EF3
-          color #fff
+
+      .el-icon
+        margin-right 6px
+        font-size 14px
+
+    .plugin-actions
+      display flex
+      gap 8px
+
   .reload-mask
-    position absolute
-    width calc(100% - 40px)
-    bottom -320px
-    text-align center
-    background rgba(0,0,0,0.4)
-    padding 10px 0
-    &.cut-width
-      width calc(100% - 48px)
+    position fixed
+    bottom 0
+    left 142px
+    right 0
+    padding 16px
+    background rgba(0, 0, 0, 0.7)
+    display flex
+    justify-content center
+    align-items center
+    backdrop-filter blur(8px)
+    z-index 100
+    box-shadow 0 -2px 10px rgba(0, 0, 0, 0.3)
+    animation slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)
+
+    .reload-icon
+      margin-right 8px
+
+  .config-dialog
+    .el-dialog__header
+      border-bottom 1px solid rgba(255, 255, 255, 0.1)
+      padding-bottom 16px
+
+    .el-dialog__footer
+      border-top 1px solid rgba(255, 255, 255, 0.1)
+      padding-top 16px
+
+  @keyframes slideUp
+    from
+      transform translateY(100%)
+    to
+      transform translateY(0)
+
+  // Scrollbar styling
+  *::-webkit-scrollbar
+    width 6px
+    height 6px
+
+  *::-webkit-scrollbar-thumb
+    border-radius 10px
+    background rgba(255, 255, 255, 0.2)
+
+    &:hover
+      background rgba(255, 255, 255, 0.3)
+
+  *::-webkit-scrollbar-track
+    background-color transparent
 </style>
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index 8bd4cb06..e0be060f 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -553,7 +553,7 @@ export default {
     gap 12px
 
 .option-card
-  background rgba(255, 255, 255, 0.05)
+  background rgba(255, 255, 255, 0.02)
   border-radius 12px
   padding 12px
   backdrop-filter blur(5px)