feat(website): 新增 color 字段，完善图标配置

baiwumm · Jul 2, 2024 · 62ccdfd · 62ccdfd
1 parent 6dd83eb
commit 62ccdfd
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 31 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -2,11 +2,11 @@
 export default defineNuxtConfig({
   runtimeConfig: {
     public: {
-      baseUrl: 'https://dream-site.cn'
+      baseUrl: process.env.BASE_URL || 'https://dream-site.cn'
     }
   },
   app: {
-    pageTransition: { name: 'blur', mode: 'out-in' }, // 页面过渡效果
+    pageTransition: { name: 'blur', mode: 'out-in' } // 页面过渡效果
   },
   // 源目录
   srcDir: 'src/',
@@ -20,8 +20,8 @@ export default defineNuxtConfig({
     '@nuxtjs/color-mode',
     'nuxt-icon',
     'nuxt-clarity-analytics',
-    "nuxt-gtag",
-    "@nuxtjs/seo"
+    'nuxt-gtag',
+    '@nuxtjs/seo'
   ],
   supabase: {
     redirectOptions: {
@@ -46,10 +46,10 @@ export default defineNuxtConfig({
     defaultLocale: 'zh-cn',
     exclude: ['/admin/_components/**'], // 过滤不需要的 url
     cacheMaxAgeSeconds: 24 * 3600, // 缓存时间一天
-    autoLastmod: true, // 自动检测每个 URL 的 lastmod 日期
+    autoLastmod: true // 自动检测每个 URL 的 lastmod 日期
   },
   routeRules: {
     // Don't add any /secret/** URLs to the sitemap.xml
-    '/admin/_components/**': { robots: false },
+    '/admin/_components/**': { robots: false }
   }
 })
diff --git a/src/components/SiteImage/index.vue b/src/components/SiteImage/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <NuxtImg v-if="isValidImageUrl(url)" :src="url" alt="logo" :width="size" :height="size" />
+  <Icon v-else :name="url" :size="String(size)" :color="color" />
+</template>
+
+<script setup lang="ts">
+type Props = {
+  url: string // 图标
+  size?: number // 图片大小，宽高同比
+  color?: string // 颜色
+}
+
+// 父组件传递参数
+withDefaults(defineProps<Props>(), {
+  size: 40,
+  color: ''
+})
+
+// 判断地址是否是合法的图片地址
+const isValidImageUrl = (url: string) => {
+  const urlPattern = /^(https?:\/\/)[\da-z.-]+\.([a-z.]{2,6})([/\w .-]*\.(jpg|jpeg|png|gif|svg))$/i
+  return urlPattern.test(url)
+}
+</script>
diff --git a/src/components/WebsiteCard/index.vue b/src/components/WebsiteCard/index.vue
@@ -7,7 +7,7 @@
   >
     <div class="flex flex-col gap-3">
       <div class="flex gap-2 items-center">
-        <el-avatar shape="square" :size="40" fit="contain" :src="websiteInfo.logo" />
+        <SiteImage :url="websiteInfo.logo" :color="row.color" />
         <div class="flex flex-col gap-0.5">
           <div class="flex gap-1 items-center">
             <div class="text-base">{{ websiteInfo.name }}</div>

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-21 15:53:44
+ * @LastEditTime: 2024-07-02 14:03:48
  * @Description: 新增/编辑弹窗
 -->
 <template>
@@ -43,6 +43,9 @@
       <el-form-item label="Logo" prop="logo">
         <el-input v-model="form.logo" type="text" />
       </el-form-item>
+      <el-form-item label="图标颜色" prop="color">
+        <el-input v-model="form.color" type="text" />
+      </el-form-item>
       <el-form-item label="站点标签" prop="tags">
         <dynamic-tag v-model="form.tags" />
       </el-form-item>
@@ -83,9 +86,6 @@ const name = ref('') // 当前数据
 const confirmLoading = ref(false)
 const websiteId = ref()
 
-// 图片正则
-const logoReg = /^https:\/\/.*\.(jpg|jpeg|png|gif|bmp|svg)(\?|$)/i
-
 const emit = defineEmits(['refresh'])
 
 // 父组件传递参数
@@ -98,6 +98,7 @@ const form = reactive<WebsiteEdit>({
   name: '',
   url: '',
   logo: '',
+  color: '',
   tags: [],
   pinned: false,
   vpn: false,
@@ -107,22 +108,6 @@ const form = reactive<WebsiteEdit>({
 })
 
 const ruleFormRef = ref<FormInstance>()
-// 校验 logo url
-const validatorLogo = (
-  _: any,
-  value: any,
-  callback: (error?: string | Error | undefined) => void
-) => {
-  if (!value) {
-    callback(new Error('请输入站点logo'))
-  } else {
-    if (logoReg.test(value)) {
-      callback()
-    } else {
-      callback(new Error('请输入正确的url'))
-    }
-  }
-}
 // 校验网站 url
 const validatorUrl = (
   _: any,
@@ -149,7 +134,7 @@ const rules = reactive<FormRules<WebsiteEdit>>({
     { min: 1, max: 12, message: '长度1-12个字符', trigger: 'blur' }
   ],
   url: [{ required: true, validator: validatorUrl, trigger: 'blur' }],
-  logo: [{ required: true, validator: validatorLogo, trigger: 'blur' }],
+  logo: [{ required: true, message: '请输入站点 Logo', trigger: 'blur' }],
   tags: [{ required: true, message: '请输入站点标签', trigger: 'blur' }]
 })
 

diff --git a/src/pages/admin/_components/websites/components/TableTemplate.vue b/src/pages/admin/_components/websites/components/TableTemplate.vue
@@ -19,7 +19,7 @@
     </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-8 h-8 m-auto" />
+        <SiteImage :url="row.logo" :size="32" :color="row.color" class="m-auto" />
       </template>
     </el-table-column>
     <el-table-column prop="tags" label="站点标签" align="center" min-width="200">

diff --git a/src/pages/admin/_components/websites/index.vue b/src/pages/admin/_components/websites/index.vue
@@ -144,7 +144,8 @@ const handleEdit = (row: WebsiteList) => {
       vpn: row.vpn,
       recommend: row.recommend,
       desc: row.desc,
-      sort: row.sort
+      sort: row.sort,
+      color: row.color
     })
   }
 }

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -60,6 +60,7 @@ export type WebsiteList = {
   desc: string // 站点描述
   url: string // 站点 url
   logo: string // logo url
+  color: string // 图标颜色
   tags: string[] // 站点标签
   pinned: boolean // 是否置顶
   vpn: boolean // 是否需要 vpn
@@ -83,7 +84,7 @@ export type WebsiteEdit = Pick<
   WebsiteList,
   'category_id' | 'name' | 'url' | 'logo' | 'tags' | 'pinned' | 'vpn' | 'recommend' | 'sort'
 > &
-  Partial<Pick<CategoryList, 'id' | 'desc'>>
+  Partial<Pick<WebsiteList, 'id' | 'desc' | 'color'>>
 
 /**
  * @description: 社交图标类型