update docs

Author: wu-clan

docs/.vuepress/components/PluginMarket.vue

@@ -17,19 +17,12 @@
         <div v-else class="image-placeholder">
           <Icon :name="item.icon" size="3em" color="var(--vp-c-brand)" />
         </div>
+        <div v-if="item.priceLabel" class="price-corner-tag">
+          <span class="price-corner-text">{{ item.priceLabel }}</span>
+        </div>
       </div>
       <div class="card-content">
-        <h3 class="card-title">{{ item.title }}</h3>
-        <p class="card-description">{{ item.description }}</p>
-        <div class="card-tags">
-          <span
-              v-for="(tag, tagIndex) in item.tags"
-              :key="tagIndex"
-              class="badge"
-              :style="getTagColors(tag)"
-          >{{ tag }}</span>
-        </div>
-        <div class="card-footer">
+        <div class="card-header">
           <div class="item-developer-info">
             <img
                 :src="getGithubAvatarUrl(item.githubUser)"
@@ -40,25 +33,36 @@
               {{ item.githubUser }}
             </span>
           </div>
-          <div v-if="!item.link" class="built-in-label">内置</div>
           <a
-              v-else
+              v-if="item.link"
               :href="item.link"
               class="github-link no-external-icon"
               target="_blank"
               rel="noopener noreferrer"
               aria-label="GitHub仓库"
               @click.stop
           >
-            <Icon name="mdi:github" size="1.5em" color="var(--vp-c-text-2)" />
+            <Icon name="mdi:github" size="1.1em" color="var(--vp-c-text-2)" />
           </a>
+          <span v-else class="built-in-label-inline">内置</span>
+        </div>
+        <h3 class="card-title">{{ item.title }}</h3>
+        <p class="card-description">{{ item.description }}</p>
+        <div class="card-tags">
+          <span
+              v-for="(tag, tagIndex) in item.tags"
+              :key="tagIndex"
+              class="badge"
+              :style="getTagColors(tag)"
+          >{{ tag }}</span>
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { CSSProperties } from 'vue';
 
 export interface PluginItem {
   icon: string
@@ -68,6 +72,7 @@ export interface PluginItem {
   link?: string
   image?: string
   githubUser: string
+  priceLabel?: '免费' | '付费'
 }
 
 const props = withDefaults(
@@ -80,32 +85,31 @@ const props = withDefaults(
     }
 )
 
-interface TagColors {
-  color?: string
-  backgroundColor?: string
-  borderColor?: string
+interface TagColors extends CSSProperties {
 }
 
 const getTagColors = (tag: string): TagColors => {
   const colors: Record<string, TagColors> = {
     'MySQL': { color: '#006484', backgroundColor: 'rgba(0, 100, 132, 0.1)', borderColor: 'rgba(0, 100, 132, 0.2)' },
-    'PostgreSQL': { color: '#336699', backgroundColor: 'rgba(51, 102, 153, 0.1)', borderColor: 'rgba(51, 102, 153, 0.2)' },
+    'PostgreSQL': {
+      color: '#336699',
+      backgroundColor: 'rgba(51, 102, 153, 0.1)',
+      borderColor: 'rgba(51, 102, 153, 0.2)'
+    },
     'fba': { color: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.1)', borderColor: 'rgba(139, 92, 246, 0.2)' },
     'fba_ui': { color: '#a855f7', backgroundColor: 'rgba(168, 85, 247, 0.1)', borderColor: 'rgba(168, 85, 247, 0.2)' },
     'app': { color: '#f97316', backgroundColor: 'rgba(249, 115, 22, 0.1)', borderColor: 'rgba(249, 115, 22, 0.2)' },
     'extra': { color: '#64748b', backgroundColor: 'rgba(100, 116, 139, 0.1)', borderColor: 'rgba(100, 116, 139, 0.2)' },
-    'pay': { color: '#ef4444', backgroundColor: 'rgba(239, 68, 68, 0.1)', borderColor: 'rgba(239, 68, 68, 0.2)' },
-    'free': { color: '#10b981', backgroundColor: 'rgba(16, 185, 129, 0.1)', borderColor: 'rgba(16, 185, 129, 0.2)' }
   };
   return colors[tag] || {
     color: 'var(--vp-c-text-2)',
     backgroundColor: 'var(--vp-c-bg-soft)',
-    borderColor: 'var(--vp-c-divider-light)'
+    borderColor: 'var(--vp-c-divider)'
   };
 }
 
 const getGithubAvatarUrl = (username: string) => {
-  return `https://github.com/${username}.png?size=32`;
+  return `https://github.com/${ username }.png?size=32`;
 };
 
 const handleCardClick = (item: PluginItem) => {
@@ -183,51 +187,13 @@ const handleCardClick = (item: PluginItem) => {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-}
-
-.card-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin: 0 0 0.4rem 0;
-  line-height: 1.4;
-}
-
-.card-description {
-  color: var(--vp-c-text-2);
-  font-size: 0.85rem;
-  line-height: 1.5;
-  margin: 0 0 0.8rem 0;
-  flex-grow: 1;
-}
-
-.card-tags {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.4rem;
-  margin-bottom: 0.8rem;
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.1rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  line-height: 1;
-  font-weight: 500;
-  white-space: nowrap;
-  border: 1px solid transparent;
 }
 
-.card-footer {
+.card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 0.5rem;
+  margin-bottom: 0.8rem; /* Space below the header */
 }
 
 .item-developer-info {
@@ -256,25 +222,74 @@ const handleCardClick = (item: PluginItem) => {
 }
 
 .github-link {
-  transition: all 0.2s ease;
-  pointer-events: none;
+  color: var(--vp-c-text-2);
+  transition: color 0.2s ease;
+  pointer-events: auto; /* Allow clicks on the icon */
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.5rem; /* Space between developer info and icon */
+}
+
+.github-link:hover {
+  color: var(--vp-c-brand);
 }
 
 .no-external-icon::after {
   content: none !important;
 }
 
-.built-in-label {
-  font-size: 0.85rem;
+.built-in-label-inline {
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
-  padding: 0;
-  border-radius: 0;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  border: 1px solid var(--vp-c-divider);
+  background-color: var(--vp-c-bg-soft);
   flex-shrink: 0;
-  margin-left: auto;
+  margin-left: 0.5rem; /* Space between developer info and label */
   white-space: nowrap;
   font-weight: 500;
 }
 
+
+.card-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 0.4rem 0;
+  line-height: 1.4;
+}
+
+.card-description {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  margin: 0 0 0.8rem 0;
+  flex-grow: 1;
+}
+
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: auto;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.1rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 500;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
 @media (min-width: 768px) {
   .plugin-card-container {
     grid-template-columns: repeat(2, 1fr);

docs/.vuepress/data/plugin.ts

@@ -6,28 +6,32 @@ export const pluginItems: PluginItem[] = [
         title: "代码生成",
         description: "生成通用业务代码（仅后端工程）",
         tags: ["MySQL", "PostgreSQL", "fba", "app"],
-        githubUser: 'wu-clan'
+        githubUser: 'wu-clan',
+        priceLabel: "免费"
     },
     {
         icon: "fe:notice-active",
         title: "通知公告",
         description: "发布系统内部通知、公告",
         tags: ["MySQL", "PostgreSQL", "fba", "extra"],
-        githubUser: 'wu-clan'
+        githubUser: 'wu-clan',
+        priceLabel: "免费"
     },
     {
         icon: "fluent-mdl2:dictionary",
         title: "数据字典",
         description: "通常用于约束前端工程数据展示",
         tags: ["MySQL", "PostgreSQL", "fba", "extra"],
-        githubUser: 'wu-clan'
+        githubUser: 'wu-clan',
+        priceLabel: "免费"
     },
     {
         icon: "icon-park-outline:config",
         title: "参数配置",
         description: "通常用于前端工程数据展示",
         tags: ["MySQL", "PostgreSQL", "fba", "extra"],
-        githubUser: 'wu-clan'
+        githubUser: 'wu-clan',
+        priceLabel: "免费"
     },
     {
         icon: "charm:shield-keyhole",
@@ -36,7 +40,8 @@ export const pluginItems: PluginItem[] = [
         tags: ["MySQL", "PostgreSQL", "fba", "extra"],
         link: "https://github.com/fastapi-practices/fba_casbin",
         image: "https://avatars.githubusercontent.com/u/27810343?s=200&v=4",
-        githubUser: 'wu-clan'
+        githubUser: 'wu-clan',
+        priceLabel: "免费"
     },
     {
         icon: "streamline:ai-prompt-spark",
@@ -45,7 +50,8 @@ export const pluginItems: PluginItem[] = [
         tags: ["MySQL", "PostgreSQL", "fba", "extra"],
         link: "https://github.com/fastapi-practices/fba_mcp",
         image: "https://github.com/modelcontextprotocol/.github/raw/main/profile/assets/light.png",
-        githubUser: 'wu-clan'
+        githubUser: 'wu-clan',
+        priceLabel: "免费"
     },
     {
         icon: "ant-design:aliyun-outlined",
@@ -54,15 +60,17 @@ export const pluginItems: PluginItem[] = [
         tags: ["MySQL", "PostgreSQL", "fba", "extra"],
         link: "https://github.com/fastapi-practices/fba_aliyun_oss",
         image: "https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-54.png",
-        githubUser: 'wu-clan'
+        githubUser: 'wu-clan',
+        priceLabel: "免费"
     },
     {
         icon: "material-symbols:token-outline",
         title: "配置下发",
         description: "将 env 等配置信息通过数据库进行管理",
         tags: ["MySQL", "fba", "extra"],
         link: "https://github.com/dividduang/option",
-        githubUser: 'dividduang'
+        githubUser: 'dividduang',
+        priceLabel: "免费"
     },
     {
         icon: "ant-design:wechat-work-outlined",
@@ -71,6 +79,7 @@ export const pluginItems: PluginItem[] = [
         tags: ["MySQL", "fba", "extra"],
         link: "https://github.com/dividduang/wecom-task",
         image: "https://rescdn.qqmail.com/node/wework/images/Slice.d2258f37eb.png",
-        githubUser: 'dividduang'
+        githubUser: 'dividduang',
+        priceLabel: "免费"
     }
 ]

docs/plugin/market.md

@@ -5,7 +5,6 @@ aside: false
 
 ::: info 标签说明
 
-<Badge text="pay" color="#ef4444" bg-color="rgba(239, 68, 68, 0.1)" border-color="rgba(239, 68, 68, 0.2)" /> [+pay] | 
 <Badge text="MySQL" color="#006484" bg-color="rgba(0, 100, 132, 0.1)" border-color="rgba(0, 100, 132, 0.2)" /> [+MySQL] | 
 <Badge text="PostgreSQL" color="#336699" bg-color="rgba(51, 102, 153, 0.1)" border-color="rgba(51, 102, 153, 0.2)" /> [+PostgreSQL] | 
 <Badge text="fba" color="#8b5cf6" bg-color="rgba(139, 92, 246, 0.1)" border-color="rgba(139, 92, 246, 0.2)" /> [+fba] | 
@@ -15,7 +14,6 @@ aside: false
 
 :::
 
-[+pay]: 付费插件
 [+MySQL]: 支持 MySQL
 [+PostgreSQL]: 支持 PostgreSQL
 [+fba]: 仅后端代码插件