feat: ds_websites 表添加 pinned 和 vpn 字段，优化样式

baiwumm · Jun 19, 2024 · 5ff90ac · 5ff90ac
1 parent 34821e1
commit 5ff90ac
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 21 deletions.
diff --git a/src/components/WebsiteCard/index.vue b/src/components/WebsiteCard/index.vue
@@ -1,10 +1,17 @@
 <template>
-  <el-card class="cursor-pointer" shadow="hover" @click="handleClick">
+  <el-card class="relative cursor-pointer" shadow="hover" @click="handleClick">
     <div class="flex flex-col gap-3">
-      <div class="flex gap-1 items-center">
-        <el-avatar shape="square" :size="40" fit="cover" :src="websiteInfo.logo" />
+      <div class="flex gap-2 items-center">
+        <el-avatar shape="square" :size="40" fit="contain" :src="websiteInfo.logo" />
         <div class="flex flex-col gap-0.5">
-          <div class="text-lg">{{ websiteInfo.name }}</div>
+          <div class="flex gap-1 items-center">
+            <div class="text-base">{{ websiteInfo.name }}</div>
+            <template v-if="websiteInfo.vpn">
+              <el-tooltip effect="dark" content="访问需要开启 VPN 服务" placement="bottom">
+                <Icon name="ri:error-warning-line" class="text-slate-400" />
+              </el-tooltip>
+            </template>
+          </div>
           <div class="flex gap-1 items-center text-xs text-slate-400 font-thin">
             <template v-for="(tag, index) in websiteInfo.tags" :key="index">
               <span class="line-clamp-1">
@@ -17,7 +24,13 @@
           </div>
         </div>
       </div>
-      <div class="text-sm text-slate-600 font-medium line-clamp-2">{{ websiteInfo.desc }}</div>
+      <div class="text-sm text-slate-500 font-medium line-clamp-2">{{ websiteInfo.desc }}</div>
+    </div>
+    <!-- 置顶标签 -->
+    <div class="absolute top-1 right-1.5">
+      <template v-if="websiteInfo.pinned">
+        <el-tag type="success" effect="light"> 置顶 </el-tag>
+      </template>
     </div>
   </el-card>
 </template>

diff --git a/src/pages/admin/_components/websites/components/EditModal.vue b/src/pages/admin/_components/websites/components/EditModal.vue
@@ -2,7 +2,7 @@
  * @Author: 白雾茫茫丶<baiwumm.com>
  * @Date: 2024-06-05 10:47:28
  * @LastEditors: 白雾茫茫丶<baiwumm.com>
- * @LastEditTime: 2024-06-17 14:32:12
+ * @LastEditTime: 2024-06-19 17:02:29
  * @Description: 新增/编辑弹窗
 -->
 <template>
@@ -41,7 +41,19 @@
       <el-form-item label="站点标签" prop="tags">
         <dynamic-tag v-model="form.tags" />
       </el-form-item>
-      <el-form-item label="分类描述" prop="desc">
+      <el-row>
+        <el-col :span="6">
+          <el-form-item label="置顶" prop="pinned">
+            <el-switch v-model="form.pinned" inline-prompt active-text="是" inactive-text="否" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="18">
+          <el-form-item label="vpn" prop="vpn">
+            <el-switch v-model="form.vpn" inline-prompt active-text="是" inactive-text="否" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="站点描述" prop="desc">
         <el-input v-model="form.desc" type="textarea" :rows="3" maxlength="100" show-word-limit />
       </el-form-item>
       <el-form-item label="排序" prop="sort">
@@ -74,6 +86,8 @@ const form = reactive<WebsiteEdit>({
   url: '',
   logo: '',
   tags: [],
+  pinned: false,
+  vpn: false,
   desc: undefined,
   sort: 1
 })

diff --git a/src/pages/admin/_components/websites/components/TableTemplate.vue b/src/pages/admin/_components/websites/components/TableTemplate.vue
@@ -6,29 +6,23 @@
       label="站点名称"
       align="center"
       show-overflow-tooltip
-      min-width="160"
+      min-width="200"
     >
       <template #default="{ row }">
         <el-space wrap>
           <el-tag type="primary">{{ row.name }}</el-tag>
           <el-link :href="row.url" target="_blank">
-            <Icon name="ri:share-box-fill" class="h-5 w-5" />
+            <Icon name="ri:share-box-fill" class="h-4 w-4" />
           </el-link>
         </el-space>
       </template>
     </el-table-column>
     <el-table-column prop="logo" label="Logo" align="center" min-width="100">
       <template #default="{ row }">
-        <NuxtImg :src="row.logo" alt="logo" class="w-10 h-10 m-auto" />
+        <NuxtImg :src="row.logo" alt="logo" class="w-8 h-8 m-auto" />
       </template>
     </el-table-column>
-    <el-table-column
-      prop="tags"
-      label="站点标签"
-      align="center"
-      show-overflow-tooltip
-      min-width="200"
-    >
+    <el-table-column prop="tags" label="站点标签" align="center" min-width="200">
       <template #default="{ row }">
         <el-space wrap>
           <el-tag v-for="(tag, index) in row.tags" :key="index" type="info">{{ tag }}</el-tag>
@@ -40,7 +34,7 @@
       label="分类描述"
       align="center"
       show-overflow-tooltip
-      min-width="100"
+      min-width="160"
     >
       <template #default="{ row }">
         {{ row.desc || '--' }}
@@ -57,6 +51,24 @@
         <el-tag type="success">{{ row.ds_categorys.name }}</el-tag>
       </template>
     </el-table-column>
+    <el-table-column prop="pinned" label="置顶" align="center" width="80">
+      <template #default="{ row }">
+        <el-button :type="row.pinned ? 'success' : 'danger'" circle size="small">
+          <template #icon>
+            <Icon :name="row.pinned ? 'ri:check-fill' : 'ri:close-fill'" />
+          </template>
+        </el-button>
+      </template>
+    </el-table-column>
+    <el-table-column prop="vpn" label="VPN" align="center" width="80">
+      <template #default="{ row }">
+        <el-button :type="row.vpn ? 'success' : 'danger'" circle size="small">
+          <template #icon>
+            <Icon :name="row.vpn ? 'ri:check-fill' : 'ri:close-fill'" />
+          </template>
+        </el-button>
+      </template>
+    </el-table-column>
     <el-table-column prop="sort" label="排序" align="center" sortable min-width="100" />
     <el-table-column prop="created_at" label="创建时间" align="center" width="180" sortable>
       <template #default="{ row }">

diff --git a/src/pages/admin/_components/websites/index.vue b/src/pages/admin/_components/websites/index.vue
@@ -127,6 +127,8 @@ const handleEdit = (row: WebsiteList) => {
       url: row.url,
       logo: row.logo,
       tags: row.tags,
+      pinned: row.pinned,
+      vpn: row.vpn,
       desc: row.desc,
       sort: row.sort
     })

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2 px-4" style="min-height: calc(100vh - 10rem)">
+  <div class="flex flex-col gap-2" style="min-height: calc(100vh - 10rem)">
     <ClientOnly>
       <template #fallback>
         <PageLoading />

diff --git a/src/server/api/websites/index.get.ts b/src/server/api/websites/index.get.ts
@@ -2,7 +2,7 @@
  * @Author: 白雾茫茫丶<baiwumm.com>
  * @Date: 2024-05-29 14:39:50
  * @LastEditors: 白雾茫茫丶<baiwumm.com>
- * @LastEditTime: 2024-06-17 14:15:51
+ * @LastEditTime: 2024-06-19 16:30:24
  * @Description: 获取站点列表
  */
 import type { Response, PageResponse, WebsiteList, WebsiteParams } from '~/types'
@@ -27,6 +27,9 @@ export default defineEventHandler(async (event): Promise<Response<PageResponse<W
     .from('ds_websites')
     .select('*,ds_categorys(*)', { count: 'exact' })
     .range(start, end)
+    .order('pinned', {
+      ascending: false
+    })
     .order('sort', {
       ascending: false
     })

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -61,6 +61,8 @@ export type WebsiteList = {
   url: string // 站点 url
   logo: string // logo url
   tags: string[] // 站点标签
+  pinned: boolean // 是否置顶
+  vpn: boolean // 是否需要 vpn
   user_id: string // 用户 id
   email: string // 用户邮箱
   sort: number // 排序
@@ -78,7 +80,7 @@ export type WebsiteParams = PaginationParams & Partial<Pick<WebsiteList, 'name'
  */
 export type WebsiteEdit = Pick<
   WebsiteList,
-  'category_id' | 'name' | 'url' | 'logo' | 'tags' | 'sort'
+  'category_id' | 'name' | 'url' | 'logo' | 'tags' | 'pinned' | 'vpn' | 'sort'
 > &
   Partial<Pick<CategoryList, 'id' | 'desc'>>