From 1741cc549dd1bc7e33f069738ecb10927661be8c Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Tue, 23 Jan 2024 10:28:13 +0800
Subject: [PATCH] feat(client): improves ui of assets page

---
 packages/client/src/assets/styles/main.css           | 12 ++++++++++++
 .../client/src/components/assets/AssetDetails.vue    |  2 +-
 .../client/src/components/assets/FilepathItem.vue    |  8 ++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/assets/styles/main.css b/packages/client/src/assets/styles/main.css
index e86579d7..72a5e5ec 100644
--- a/packages/client/src/assets/styles/main.css
+++ b/packages/client/src/assets/styles/main.css
@@ -152,3 +152,15 @@ body::-webkit-scrollbar {
   /* Support Firefox */
   scrollbar-width: none;
 }
+
+/* Shikiji */
+/* refer: https://shikiji.netlify.app/guide/dual-themes#class-based-dark-mode */
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
diff --git a/packages/client/src/components/assets/AssetDetails.vue b/packages/client/src/components/assets/AssetDetails.vue
index 0c45a36b..9f8c5e67 100644
--- a/packages/client/src/components/assets/AssetDetails.vue
+++ b/packages/client/src/components/assets/AssetDetails.vue
@@ -159,7 +159,7 @@ const supportsPreview = computed(() => {
                 icon="i-carbon-copy"
                 action mr1 mt--2px flex-none
                 :border="false"
-                @click="copy(asset.publicPath, { silent: false, type: 'assets-public-path' })"
+                @click="copy(asset.publicPath, { type: 'assets-public-path' })"
               />
               <RouterLink
                 :to="asset.publicPath"
diff --git a/packages/client/src/components/assets/FilepathItem.vue b/packages/client/src/components/assets/FilepathItem.vue
index a4a8ff2a..0f533562 100644
--- a/packages/client/src/components/assets/FilepathItem.vue
+++ b/packages/client/src/components/assets/FilepathItem.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { VTooltip as vTooltip } from '@vue/devtools-ui'
+
 const props = defineProps<{
   filepath: string
   lineBreak?: boolean
@@ -7,13 +9,15 @@ const props = defineProps<{
 
 const parsed = computed(() => ({ path: props.filepath }),
 )
+
+const { copy } = useCopy()
 </script>
 
 <template>
   <button
-    font-mono hover:underline
+    v-tooltip="'Copy file path'" font-mono hover:underline
     :class="lineBreak ? '' : 'ws-nowrap of-hidden truncate'"
-    :title="filepath"
+    :title="filepath" @click="copy(filepath)"
   >
     {{ parsed.path }}
   </button>