fix: 继续做UI工作

CONTRIBUTING.md

@@ -53,8 +53,8 @@ cd OpenIsle
      --profile dev up -d
    ```
    该命令会创建名为 `frontend_dev` 的容器并运行 `npm run dev`，浏览器访问 http://127.0.0.1:3000 即可查看页面。
-
-   修改代码后，可以强制重新创建所有容器，执行：
+   修改前端代码，页面会热更新。
+   如果修改后端代码，可以重启后端容器, 或是环境变量中指向IDEA，采用IDEA编译运行也可以哦。
 
    ```shell
    docker compose \

frontend_nuxt/assets/global.css

@@ -3,7 +3,7 @@
   --primary-color: rgb(10, 110, 120);
   --primary-color-disabled: rgba(93, 152, 156, 0.5);
   --secondary-color: rgb(255, 255, 255);
-  --secondary-color-hover: rgba(10, 111, 120, 0.184);
+  --secondary-color-hover: rgba(10, 111, 120, 0.079);
   --new-post-icon-color: rgba(10, 111, 120, 0.598);
   --header-height: 60px;
   --header-background-color: white;
@@ -54,6 +54,7 @@
   --header-border-color: #555;
   --primary-color: rgb(17, 182, 197);
   --primary-color-hover: rgb(13, 137, 151);
+  --secondary-color-hover: rgba(17, 182, 197, 0.238);
   --new-post-icon-color: rgba(10, 111, 120, 0.598);
   --header-text-color: white;
   --app-menu-background-color: #333;
@@ -179,7 +180,7 @@ body {
 
 .info-content-text pre .line-numbers {
   counter-reset: line-number 0;
-  white-space: nowrap;        /* 禁止数字换行 */
+  white-space: nowrap; /* 禁止数字换行 */
   font-variant-numeric: tabular-nums; /* 数字等宽 */
   /* width: 2em; */
   font-size: 13px;
@@ -344,7 +345,7 @@ body {
   .info-content-text pre {
     line-height: 1.5;
   }
-  
+
   /*处理iframe视频标签*/
   .info-content-text iframe {
     width: 100%;

frontend_nuxt/components/BaseUserAvatar.vue

@@ -109,7 +109,7 @@ function onError() {
 }
 
 .base-user-avatar:hover {
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 24px rgba(251, 138, 138, 0.1);
   transform: scale(1.05);
 }
 

frontend_nuxt/components/CommentItem.vue

@@ -488,6 +488,16 @@ const handleContentClick = (e) => {
   font-weight: bold;
 }
 
+.article-footer-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 0px;
+  flex-wrap: wrap;
+  margin-bottom: 0px;
+}
+
 .medal-name {
   font-size: 12px;
   margin-left: 1px;

frontend_nuxt/components/DonateGroup.vue

@@ -1,43 +1,49 @@
 <template>
   <div class="donate-container">
-    <div class="donate-viewer">
-      <div class="donate-viewer-item-container" @mouseenter="cancelHide" @mouseleave="scheduleHide">
-        <BaseItemGroup :items="donateItems" :overlap="10" :expanded-gap="2" :direction="vertical">
-          <template #item="{ item }">
-            <BaseUserAvatar
-              :user-id="1"
-              :src="avatar"
-              alt="avatar"
-              :width="25"
-              :disable-link="true"
-            />
-          </template>
-        </BaseItemGroup>
+    <ToolTip content="打赏作者" placement="bottom">
+      <div class="donate-viewer" @click="openPanel">
+        <div
+          class="donate-viewer-item-container"
+          @mouseenter="cancelHide"
+          @mouseleave="scheduleHide"
+        >
+          <BaseItemGroup :items="donateItems" :overlap="10" :expanded-gap="2" :direction="vertical">
+            <template #item="{ item }">
+              <BaseUserAvatar
+                :user-id="1"
+                :src="avatar"
+                alt="avatar"
+                :width="20"
+                :disable-link="true"
+              />
+            </template>
+          </BaseItemGroup>
+          <div class="donate-counts-text">100</div>
+        </div>
+      </div>
+    </ToolTip>
+    <div
+      v-if="panelVisible"
+      class="donate-panel"
+      ref="donatePanelRef"
+      :style="panelInlineStyle"
+      @mouseenter="cancelHide"
+      @mouseleave="scheduleHide"
+    >
+      <div class="donate-option">
+        <financing class="donate-option-icon" />
+        <div class="donate-counts-text">10</div>
+      </div>
+      <div class="donate-option">
+        <financing class="donate-option-icon" />
+        <div class="donate-counts-text">30</div>
+      </div>
+      <div class="donate-option selected">
+        <financing class="donate-option-icon" />
         <div class="donate-counts-text">100</div>
       </div>
     </div>
   </div>
-  <div
-    v-if="panelVisible"
-    class="donate-panel"
-    ref="reactionsPanelRef"
-    :style="panelInlineStyle"
-    @mouseenter="cancelHide"
-    @mouseleave="scheduleHide"
-  >
-    <div class="donate-option">
-      <financing />
-      <div class="donate-counts-text">100</div>
-    </div>
-    <div class="donate-option">
-      <financing />
-      <div class="donate-counts-text">300</div>
-    </div>
-    <div class="donate-option">
-      <financing />
-      <div class="donate-counts-text">500</div>
-    </div>
-  </div>
 </template>
 
 <script setup>
@@ -49,7 +55,7 @@ const props = defineProps({})
 
 const avatar = ref('')
 const panelVisible = ref(false)
-const reactionsPanelRef = ref(null)
+const donatePanelRef = ref(null)
 const panelInlineStyle = ref({})
 const donateItems = ref([
   {
@@ -67,6 +73,11 @@ const donateItems = ref([
 ])
 let hideTimer = null
 
+const openPanel = () => {
+  clearTimeout(hideTimer)
+  panelVisible.value = true
+}
+
 const scheduleHide = () => {
   clearTimeout(hideTimer)
   hideTimer = setTimeout(() => {
@@ -79,9 +90,9 @@ const cancelHide = () => {
 
 const updatePanelInlineStyle = () => {
   if (!panelVisible.value) return
-  const panelEl = reactionsPanelRef.value
+  const panelEl = donatePanelRef.value
   if (!panelEl) return
-  const parentEl = panelEl.closest('.reactions-container')?.parentElement
+  const parentEl = panelEl.closest('.donate-container')?.parentElement.parentElement
   if (!parentEl) return
   const parentWidth = parentEl.clientWidth - 20
   panelInlineStyle.value = {
@@ -117,10 +128,67 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
+.donate-container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .donate-viewer-item-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 2px;
 }
+
+.donate-viewer {
+  border-radius: 13px;
+  padding: 3px;
+  padding-right: 6px;
+  cursor: pointer;
+  transition: background-color 0.5s ease;
+}
+
+.donate-viewer:hover {
+  background-color: var(--secondary-color-hover);
+}
+
+.donate-counts-text {
+  color: var(--primary-color);
+  font-size: 14px;
+}
+
+.donate-panel {
+  position: absolute;
+  bottom: 35px;
+  background-color: var(--background-color);
+  border: 1px solid var(--normal-border-color);
+  border-radius: 20px;
+  padding: 5px 10px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  z-index: 10;
+  gap: 5px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.donate-option {
+  cursor: pointer;
+  padding: 3px 6px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+}
+
+.donate-option:hover {
+  background-color: var(--normal-light-background-color);
+}
+
+.donate-option-icon {
+  color: var(--primary-color);
+}
 </style>

frontend_nuxt/components/ReactionsGroup.vue

@@ -18,9 +18,11 @@
             <div>{{ counts[r.type] }}</div>
           </div>
 
-          <div class="reactions-viewer-item placeholder" @click="openPanel">
-            <sly-face-whit-smile class="reactions-viewer-item-placeholder-icon" />
-          </div>
+          <ToolTip content="发表心情" placement="bottom">
+            <div class="reactions-viewer-item placeholder" @click="openPanel">
+              <sly-face-whit-smile class="reactions-viewer-item-placeholder-icon" />
+            </div>
+          </ToolTip>
         </template>
         <template v-else-if="displayedReactions.length">
           <div
@@ -324,7 +326,7 @@ onBeforeUnmount(() => {
 
 .reactions-panel {
   position: absolute;
-  bottom: 40px;
+  bottom: 35px;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
   border-radius: 20px;

frontend_nuxt/pages/posts/[id]/index.vue

@@ -1280,12 +1280,12 @@ onMounted(async () => {
   gap: 10px;
   margin-top: 0px;
   flex-wrap: wrap;
+  margin-bottom: 10px;
 }
 
 .option-container {
   display: flex;
   flex-direction: row;
-  gap: 10px;
   align-items: center;
   flex-wrap: wrap;
 }