fix: 优化操作图标

terwer · Jan 1, 2023 · 0565da4 · 0565da4
1 parent 90cb6eb
commit 0565da4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -51,6 +51,7 @@ declare module "@vue/runtime-core" {
     ElOption: typeof import("element-plus/es")["ElOption"]
     ElPageHeader: typeof import("element-plus/es")["ElPageHeader"]
     ElPagination: typeof import("element-plus/es")["ElPagination"]
+    ElPopover: typeof import("element-plus/es")["ElPopover"]
     ElRadio: typeof import("element-plus/es")["ElRadio"]
     ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"]
     ElRow: typeof import("element-plus/es")["ElRow"]
@@ -62,6 +63,7 @@ declare module "@vue/runtime-core" {
     ElTabPane: typeof import("element-plus/es")["ElTabPane"]
     ElTabs: typeof import("element-plus/es")["ElTabs"]
     ElTag: typeof import("element-plus/es")["ElTag"]
+    ElTooltip: typeof import("element-plus/es")["ElTooltip"]
     ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"]
   }
 }
diff --git a/components/detail/PostDetailService.vue b/components/detail/PostDetailService.vue
@@ -28,15 +28,42 @@
     <h1 v-if="inSiyuanNewWin" style="display: none">{{ post.title }}</h1>
     <blockquote class="post-detail-id">
       <span class="id-text">本文ID：{{ post.postid }}</span>
-      <el-button size="small" type="warning" @click="handleCopyID"
-        >{{ $t("post.detail.button.copy.id") }}
-      </el-button>
-      <el-button size="small" type="primary" @click="handleShareLink"
-        >{{ $t("post.detail.button.share.link") }}
-      </el-button>
-      <el-button size="small" type="danger" @click="handleOpenInBrowser"
-        >{{ $t("post.detail.button.browser.open") }}
-      </el-button>
+
+      <!-- 复制ID -->
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        :content="$t('post.detail.button.copy.id')"
+        placement="bottom-start"
+      >
+        <el-button size="small" type="warning" @click="handleCopyID">
+          <font-awesome-icon icon="fa-solid fa-list-ol" />
+        </el-button>
+      </el-tooltip>
+
+      <!-- 分享链接 -->
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        :content="$t('post.detail.button.share.link')"
+        placement="bottom-start"
+      >
+        <el-button size="small" type="primary" @click="handleShareLink">
+          <font-awesome-icon icon="fa-solid fa-share-nodes" />
+        </el-button>
+      </el-tooltip>
+
+      <!-- 浏览器打开 -->
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        :content="$t('post.detail.button.browser.open')"
+        placement="bottom-start"
+      >
+        <el-button size="small" type="danger" @click="handleOpenInBrowser">
+          <font-awesome-icon icon="fa-brands fa-chrome" />
+        </el-button>
+      </el-tooltip>
     </blockquote>
     <div
       id="post-detail-content"

diff --git a/plugins/font-awesome/font-awesome.ts b/plugins/font-awesome/font-awesome.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022, Terwer . All rights reserved.
+ * Copyright (c) 2022-2023, Terwer . All rights reserved.
  * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
  *
  * This code is free software; you can redistribute it and/or modify it
@@ -36,10 +36,13 @@ import {
   faCircleXmark,
   faCreditCard,
   faImage,
+  faListOl,
   faRectangleList,
+  faShareNodes,
   faUpload,
   faXmark,
 } from "@fortawesome/free-solid-svg-icons"
+import { faChrome } from "@fortawesome/free-brands-svg-icons"
 
 const logger = LogFactory.getLogger("plugins/font-awesome/font-awesome.ts")
 
@@ -54,6 +57,9 @@ const FontAwesome: PluginObject<any> = {
     library.add(faBolt)
     library.add(faCreditCard)
     library.add(faImage)
+    library.add(faChrome)
+    library.add(faShareNodes)
+    library.add(faListOl)
 
     Vue.component("font-awesome-icon", FontAwesomeIcon)
     logger.debug("FontAwesome inited")