style: 调整样式和添加图标

baiwumm · Jun 21, 2024 · c805fd0 · c805fd0
1 parent 8ea0565
commit c805fd0
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 23 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   runtimeConfig: {
     public: {
-      baseUrl: process.env.BASE_URL || 'https://dream-site.cn'
+      baseUrl: 'https://dream-site.cn'
     }
   },
   // SEO 和 Meta

diff --git a/src/pages/admin/_components/categorys/components/TableTemplate.vue b/src/pages/admin/_components/categorys/components/TableTemplate.vue
@@ -36,10 +36,20 @@
         <div>{{ formatDateTime(row.updated_at) }}</div>
       </template>
     </el-table-column>
-    <el-table-column label="操作" width="140" align="center" fixed="right">
+    <el-table-column label="操作" width="180" align="center" fixed="right">
       <template #default="{ row }">
-        <el-button size="small" @click="emit('handleEdit', row)"> 编辑 </el-button>
-        <el-button size="small" type="danger" @click="emit('handleDelete', row)"> 删除 </el-button>
+        <el-button size="small" @click="emit('handleEdit', row)">
+          <el-space :size="5">
+            <Icon name="ri:edit-box-line" class="h-4 w-4" />
+            <span>编辑</span>
+          </el-space>
+        </el-button>
+        <el-button size="small" type="danger" @click="emit('handleDelete', row)">
+          <el-space :size="5">
+            <Icon name="ri:delete-bin-line" class="h-4 w-4" />
+            <span>删除</span>
+          </el-space>
+        </el-button>
       </template>
     </el-table-column>
   </el-table>

diff --git a/src/pages/admin/_components/categorys/index.vue b/src/pages/admin/_components/categorys/index.vue
@@ -3,9 +3,17 @@
     <el-space wrap>
       <el-input v-model="name" style="width: 240px" placeholder="输入分类名称搜索" />
       <el-button type="primary" :loading="status === 'pending'" @click="handleSearch">
-        查询
+        <el-space :size="5">
+          <Icon name="ri:search-line" class="h-4 w-4" />
+          <span>查询</span>
+        </el-space>
+      </el-button>
+      <el-button type="primary" @click="handleAdd">
+        <el-space :size="5">
+          <Icon name="ri:add-fill" class="h-4 w-4" />
+          <span>新增</span>
+        </el-space>
       </el-button>
-      <el-button type="primary" @click="handleAdd"> 新增 </el-button>
     </el-space>
     <!-- 表格列表 -->
     <table-template
@@ -39,7 +47,7 @@ import TableTemplate from './components/TableTemplate.vue'
 
 // 请求参数
 const current = ref(1) // 当前页
-const pageSize = ref(5) // 每页条数
+const pageSize = ref(10) // 每页条数
 const name = ref('') // 分类名称
 
 const modalRef = ref<InstanceType<typeof EditModal>>()

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-19 17:02:29
+ * @LastEditTime: 2024-06-21 14:25:06
  * @Description: 新增/编辑弹窗
 -->
 <template>
@@ -26,7 +26,12 @@
             :key="item.id"
             :label="item.name"
             :value="item.id"
-          />
+          >
+            <el-space :size="5">
+              <Icon name="ri:menu-5-line" class="h-4 w-4" />
+              <span>{{ item.name }}</span>
+            </el-space>
+          </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="网站名称" prop="name">
@@ -73,6 +78,9 @@ const name = ref('') // 当前数据
 const confirmLoading = ref(false)
 const websiteId = ref()
 
+// 图片正则
+const logoReg = /^https:\/\/.*\.(jpg|jpeg|png|gif|bmp|svg)(\?|$)/i
+
 const emit = defineEmits(['refresh'])
 
 // 父组件传递参数
@@ -102,8 +110,7 @@ const validatorLogo = (
   if (!value) {
     callback(new Error('请输入站点logo'))
   } else {
-    const reg = /^https:\/\/.*\.(jpg|jpeg|png|gif|bmp|svg)(\?|$)/i
-    if (reg.test(value)) {
+    if (logoReg.test(value)) {
       callback()
     } else {
       callback(new Error('请输入正确的url'))

diff --git a/src/pages/admin/_components/websites/components/TableTemplate.vue b/src/pages/admin/_components/websites/components/TableTemplate.vue
@@ -45,10 +45,10 @@
       label="所属分类"
       align="center"
       show-overflow-tooltip
-      min-width="100"
+      min-width="160"
     >
       <template #default="{ row }">
-        <el-tag type="success">{{ row.ds_categorys.name }}</el-tag>
+        <el-tag type="success"><Icon name="ri:menu-5-line" class="h-5 w-5" />{{ row.ds_categorys.name }}</el-tag>
       </template>
     </el-table-column>
     <el-table-column prop="pinned" label="置顶" align="center" width="80">
@@ -80,10 +80,20 @@
         <div>{{ formatDateTime(row.updated_at) }}</div>
       </template>
     </el-table-column>
-    <el-table-column label="操作" width="140" align="center" fixed="right">
+    <el-table-column label="操作" width="180" align="center" fixed="right">
       <template #default="{ row }">
-        <el-button size="small" @click="emit('handleEdit', row)"> 编辑 </el-button>
-        <el-button size="small" type="danger" @click="emit('handleDelete', row)"> 删除 </el-button>
+        <el-button size="small" @click="emit('handleEdit', row)">
+          <el-space :size="5">
+            <Icon name="ri:edit-box-line" class="h-4 w-4" />
+            <span>编辑</span>
+          </el-space>
+        </el-button>
+        <el-button size="small" type="danger" @click="emit('handleDelete', row)">
+          <el-space :size="5">
+            <Icon name="ri:delete-bin-line" class="h-4 w-4" />
+            <span>删除</span>
+          </el-space>
+        </el-button>
       </template>
     </el-table-column>
   </el-table>

diff --git a/src/pages/admin/_components/websites/index.vue b/src/pages/admin/_components/websites/index.vue
@@ -19,14 +19,27 @@
               :key="item.id"
               :label="item.name"
               :value="item.id"
-            />
+            >
+              <el-space :size="5">
+                <Icon name="ri:menu-5-line" class="h-4 w-4" />
+                <span>{{ item.name }}</span>
+              </el-space>
+            </el-option>
           </el-select>
         </el-form-item>
       </el-form>
       <el-button type="primary" :loading="status === 'pending'" @click="handleSearch">
-        查询
+        <el-space :size="5">
+          <Icon name="ri:search-line" class="h-4 w-4" />
+          <span>查询</span>
+        </el-space>
+      </el-button>
+      <el-button type="primary" @click="handleAdd">
+        <el-space :size="5">
+          <Icon name="ri:add-fill" class="h-4 w-4" />
+          <span>新增</span>
+        </el-space>
       </el-button>
-      <el-button type="primary" @click="handleAdd"> 新增 </el-button>
     </el-space>
     <!-- 表格列表 -->
     <table-template
@@ -60,7 +73,7 @@ import TableTemplate from './components/TableTemplate.vue'
 
 // 请求参数
 const current = ref(1) // 当前页
-const pageSize = ref(5) // 每页条数
+const pageSize = ref(10) // 每页条数
 
 // 查询参数
 const form = reactive({

diff --git a/src/pages/admin/index.vue b/src/pages/admin/index.vue
@@ -3,7 +3,7 @@
     <el-tab-pane name="categorys">
       <template #label>
         <div class="flex items-center justify-center gap-1">
-          <Icon name="ri:list-indefinite" class="h-5 w-5" />
+          <Icon name="ri:menu-5-line" class="h-5 w-5" />
           <span>网站分类</span>
         </div>
       </template>

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -2,14 +2,24 @@
   <div class="flex flex-col gap-2">
     <ClientOnly>
       <el-button-group v-loading="categoryStatus === 'pending'">
-        <el-button text :bg="!category_id" @click="category_id = ''">全部</el-button>
+        <el-button text :bg="!category_id" @click="category_id = ''">
+          <el-space :size="5">
+            <Icon name="ri:menu-5-line" class="h-4 w-4" />
+            <span>全部</span>
+          </el-space>
+        </el-button>
         <el-button
           v-for="item in categoryList?.data?.list || []"
           :key="item.id"
           text
           :bg="category_id === item.id"
           @click="category_id = item.id"
-        >{{ item.name }}</el-button>
+        >
+          <el-space :size="5">
+            <Icon name="ri:menu-5-line" class="h-4 w-4" />
+            <span>{{ item.name }}</span>
+          </el-space>
+        </el-button>
       </el-button-group>
       <div
         v-loading="websiteStatus === 'pending'"