From f990d81ca29900b142e9020f8bc7d1806ac7688d Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Sat, 12 Oct 2024 11:43:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tonecn/src/components/Blog/BlogComment.vue    | 57 ++++---------------
 .../components/Blog/BlogContentToolBar.vue    | 43 ++------------
 tonecn/src/views/Blog.vue                     |  2 +-
 tonecn/src/views/BlogContent.vue              | 48 ++++++----------
 tonecn/src/views/Download.vue                 | 28 +++++----
 tonecn/src/views/Resource.vue                 | 28 +++++----
 6 files changed, 72 insertions(+), 134 deletions(-)

diff --git a/tonecn/src/components/Blog/BlogComment.vue b/tonecn/src/components/Blog/BlogComment.vue
index c771eae..43d3b13 100644
--- a/tonecn/src/components/Blog/BlogComment.vue
+++ b/tonecn/src/components/Blog/BlogComment.vue
@@ -25,7 +25,7 @@ const getStatusText = computed(() => {
 
 const loadComment = async () => {
     try {
-        let commentRes:BaseResponseData = await request.get(`/blogComment?bloguuid=${bloguuid}`);
+        let commentRes: BaseResponseData = await request.get(`/blogComment?bloguuid=${bloguuid}`);
         if (commentRes.code == 0) {
             blogCommentList.splice(0, blogCommentList.length);
             blogCommentList.push(...commentRes.data);
@@ -47,49 +47,16 @@ watch(model, (newValue, oldValue) => {
 </script>
 <template>
     <el-divider></el-divider>
-    <div class="blogcomment-container">
-        <div class="title">评论</div>
-        <div class="comment" v-for="blogcomment of blogCommentList">
-            <div class="name">{{ blogcomment.name }}</div>
-            <div style="font-size: 12px;color: #888;">IP属地：{{ blogcomment.ip_address }}</div>
-            <div class="time">{{ timestampToString(blogcomment.time) }}</div>
-            <div class="content">「{{ blogcomment.content }}」</div>
+    <div class="w-full">
+        <div
+            class="border-l-[4px] border-l-[#ccc] text-[18px] pl-[15px] mb-[10px] text-[#444] dark:text-[#fff] cursor-default">
+            评论</div>
+        <div class="my-[10px]" v-for="blogcomment of blogCommentList">
+            <div class=" text-[#555] dark:text-[#fff]">{{ blogcomment.name }}</div>
+            <div class="text-[12px] text-[#888] dark:text-[#aaa]">IP属地：{{ blogcomment.ip_address }}</div>
+            <div class="text-[12px] text-[#888] dark:text-[#aaa]">{{ timestampToString(blogcomment.time) }}</div>
+            <div class="py-[10px] border-b border-b-[#ddd] text-[#333] dark:text-[#fff]">「{{ blogcomment.content }}」</div>
         </div>
-        <div class="status">—— {{ getStatusText }} ——</div>
+        <div class="text-[14px] text-[#666] dark:text-[#fff] my-[15px]">—— {{ getStatusText }} ——</div>
     </div>
-</template>
-<style scoped>
-.blogcomment-container .title {
-    border-left: 4px solid #ccc;
-    font-size: 18px;
-    padding-left: 15px;
-    margin-bottom: 10px;
-    color: #444;
-    cursor: default;
-}
-
-.blogcomment-container .comment {
-    margin: 10px 0px;
-}
-
-.blogcomment-container .comment .name {
-    color: #555;
-}
-
-.blogcomment-container .comment .time {
-    font-size: 12px;
-    color: #888;
-}
-
-.blogcomment-container .comment .content {
-    color: #333;
-    padding: 10px 0px;
-    border-bottom: 1px solid #ddd;
-}
-
-.blogcomment-container .status {
-    margin: 15px 0px;
-    color: #666;
-    font-size: 14px;
-}
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/tonecn/src/components/Blog/BlogContentToolBar.vue b/tonecn/src/components/Blog/BlogContentToolBar.vue
index 70de3ee..ee0abea 100644
--- a/tonecn/src/components/Blog/BlogContentToolBar.vue
+++ b/tonecn/src/components/Blog/BlogContentToolBar.vue
@@ -86,12 +86,12 @@ const submitComment = async () => {
 </script>
 <template>
     <transition name="el-zoom-in-bottom">
-        <div class="tool-bar-container" v-show="toolBarVisible">
-            <div class="tool-bar">
-                <el-input v-model="inputComment" autosize type="textarea" class="input-comment" placeholder="快来留下你的评论吧～"
+        <div class="fixed bottom-0 left-0 w-full bg-white dark:bg-[#111] shadow flex justify-center items-center" v-show="toolBarVisible">
+            <div class="w-full max-w-[600px] flex items-center justify-center py-[12px] px-[20px]">
+                <el-input v-model="inputComment" autosize type="textarea" class="mr-[12px]" placeholder="快来留下你的评论吧～"
                     clearable />
-                <el-button type="primary" :icon="Edit" class="button" circle @click="commentHandle"></el-button>
-                <el-button type="danger" :icon="isLiked ? StarFilled : Star" class="button" @click="likeBlog"
+                <el-button type="primary" :icon="Edit" circle @click="commentHandle"></el-button>
+                <el-button type="danger" :icon="isLiked ? StarFilled : Star" @click="likeBlog"
                     circle></el-button>
             </div>
         </div>
@@ -99,36 +99,3 @@ const submitComment = async () => {
     <RotationVerification v-if="isCaptchaViewShow"
         @fail="() => { isCaptchaViewShow = false; ElMessage.warning('验证失败') }" @success="submitComment" />
 </template>
-<style scoped>
-.tool-bar-container {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    /* height: 60px; */
-    background-color: #ffffff;
-    box-shadow: 0px 0px 9px 1px #ddd;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.tool-bar {
-    width: 100%;
-    max-width: 600px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 12px 20px;
-}
-
-.input-comment {
-    margin-right: 12px;
-}
-
-@media screen and (max-width: 570px) {
-    .button {
-        background-color: none;
-    }
-}
-</style>
\ No newline at end of file
diff --git a/tonecn/src/views/Blog.vue b/tonecn/src/views/Blog.vue
index 5da80cb..1d45f96 100644
--- a/tonecn/src/views/Blog.vue
+++ b/tonecn/src/views/Blog.vue
@@ -29,7 +29,7 @@ onMounted(async () => {
             <div class="text-center mt-[20px] mb-[300px] dark:text-white" v-if="loadStatus == 0">加载中，请稍后...</div>
             <el-empty description="暂无数据" style="margin: 0 auto;" v-if="loadStatus == 1 && blogList.length == 0" />
             <div class="mx-auto max-w-[400px] w-full flex flex-col" v-for="item of blogList">
-                <a class="text-[26px] font-semibold cursor-pointer block hover:underline dark:text-white" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a>
+                <a class="text-[26px] font-semibold cursor-pointer block hover:underline dark:text-white text-[#333]" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a>
                 <div class="text-[#666] dark:text-[#ccc]">{{ item.description }}</div>
                 <div class="text-[#888] mt-[15px] text-[14px]">{{ timestampToString(+item.publish_time) }} ——
                     {{ formateTimes(item.visit_count) }} 次访问</div>
diff --git a/tonecn/src/views/BlogContent.vue b/tonecn/src/views/BlogContent.vue
index 484d955..abc49af 100644
--- a/tonecn/src/views/BlogContent.vue
+++ b/tonecn/src/views/BlogContent.vue
@@ -72,13 +72,13 @@ onUnmounted(() => {
 })
 </script>
 <template>
-    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
+    <div class="bg-default-bg dark:bg-[#222] fixed inset-0 w-full h-full -z-10"></div>
     <div class="flex flex-col max-w-[600px] my-[50px] mx-auto px-[20px]">
         <div class="mx-auto dark:text-white" v-if="loadStatus == 0">加载中，请稍后...</div>
         <el-empty v-if="loadStatus < 0" :description="loadStatus == -1 ? '加载失败，刷新后重试' : '文章不存在或不可见'" />
         <div v-if="loadStatus == 1">
             <div>
-                <h1 class="text-center text-[28px] font-semibold dark:text-white">{{ blogInfo.title }}</h1>
+                <h1 class="text-center text-[28px] font-semibold dark:text-white text-[#222]">{{ blogInfo.title }}</h1>
                 <p class="my-[15px] mx-auto text-[14px] text-[#888] dark:text-[#ccc] text-center">发布于 {{
                     timestampToString(blogInfo.publish_time) }}</p>
             </div>
@@ -92,40 +92,31 @@ onUnmounted(() => {
 <style>
 /* markdown CSS */
 #blogContentContainer img {
-    width: 100%;
+    @apply w-full;
 }
 
 #blogContentContainer p {
-    color: #555;
+    @apply text-[#555] dark:text-[#ddd] my-[10px];
 }
 
 #blogContentContainer p code {
-    background-color: #dedede;
-    padding: 2px 3px;
+    @apply bg-[#dedede] py-[2px] px-[3px];
 }
 
 #blogContentContainer blockquote {
-    margin: 16px 0;
-    padding-left: 25px;
-    border-left: 4px solid #ddd;
+    @apply my-[16px] pl-[25px] border-[4px_solid_#ddd];
 }
 
 #blogContentContainer blockquote p {
-    color: #888;
-}
-
-#blogContentContainer p {
-    margin-top: 10px;
-    margin-bottom: 10px;
+    @apply text-[#888];
 }
 
 #blogContentContainer pre {
-    border-radius: 5px;
-    overflow: hidden;
+    @apply rounded-[5px] overflow-hidden;
 }
 
 #blogContentContainer pre code {
-    overflow-x: scroll;
+    @apply overflow-x-scroll;
 }
 
 #blogContentContainer h1,
@@ -134,38 +125,35 @@ onUnmounted(() => {
 #blogContentContainer h4,
 #blogContentContainer h5,
 #blogContentContainer h6 {
-    font-weight: 600;
+    @apply font-[800] text-[#333] dark:text-[#fff] mt-[20px];
 }
 
 #blogContentContainer h1 {
-    font-size: 28px;
-    border-bottom: 1px solid #ddd;
+    @apply text-[28px] border-b-[#ddd] border-b;
 }
 
 #blogContentContainer h2 {
-    font-size: 24px;
-    border-bottom: 1px solid #ddd;
+    @apply text-[24px] border-b-[#ddd] border-b;
+
 }
 
 #blogContentContainer h3 {
-    font-size: 22px;
+    @apply text-[22px];
 }
 
 #blogContentContainer h4 {
-    font-size: 20px;
+    @apply text-[20px];
 }
 
 #blogContentContainer h5 {
-    font-size: 18px;
+    @apply text-[18px];
 }
 
 #blogContentContainer h6 {
-    font-size: 16px;
+    @apply text-[16px];
 }
 
 #blogContentContainer pre {
-    font-size: 12px;
-    border-radius: 8px;
-    box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
+    @apply text-[12px] rounded-[8px] shadow;
 }
 </style>
\ No newline at end of file
diff --git a/tonecn/src/views/Download.vue b/tonecn/src/views/Download.vue
index caa0d70..d25382a 100644
--- a/tonecn/src/views/Download.vue
+++ b/tonecn/src/views/Download.vue
@@ -24,13 +24,19 @@ onMounted(async () => {
 <template>
   <div class="mx-auto flex flex-col items-center">
     <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
-    <div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500 dark:text-[#ddd]">一些可以直接下载的工具
+    <div
+      class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500 dark:text-[#ddd] text-[#333]">
+      一些可以直接下载的工具
     </div>
-    <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px] dark:text-[#ccc]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意
-      <a class="text-[#222] cursor-pointer underline] dark:text-[#fff]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
+    <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px] dark:text-[#ccc]" v-if="loadStatus != 2">
+      请在浏览此部分内容前阅读并同意
+      <a class="text-[#222] cursor-pointer underline] dark:text-[#fff]"
+        @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
+    </div>
+    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 2">加载失败，请刷新界面重试
+    </div>
+    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 0">加载中，请稍后...
     </div>
-    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 2">加载失败，请刷新界面重试</div>
-    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 0">加载中，请稍后...</div>
     <div
       class="mt-[25px] sm:mt-[50px] mx-auto flex justify-center items-start flex-wrap max-w-[1000px] transition-all duration-500"
       v-if="loadStatus == 1">
@@ -38,17 +44,19 @@ onMounted(async () => {
       <a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white dark:bg-transparent dark:border-[1px] dark:border-[#aaa] rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl dark:hover:shadow-[#666] transition-all duration-500 overflow-hidden"
         v-for="item of ResourceDatas" :href="item.src" target="_blank">
         <!-- 左侧图标 -->
-        <div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300 dark:border-[1px]">
+        <div
+          class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300 dark:border-[1px]">
           <img :src="item.icon_src" alt="" class="w-[80px] h-[80px]">
         </div>
         <!-- 右侧描述 -->
         <div class="ml-[20px] flex-1 cursor-default">
-          <div class="text-[23px] font-semibold dark:text-white">{{ item.title }}</div>
-          <div class="text-[14px] text-[#666] mt-[5px] dark:text-[#ccc]">{{ item.describe }}</div>
+          <div class="text-[23px] font-semibold text-[#333] dark:text-white ">{{ item.title }}</div>
+          <div class="text-[14px]  mt-[5px] text-[#666] dark:text-[#ccc]">{{ item.describe }}</div>
           <!-- 下方的标签 -->
           <div class="flex gap-[5px] mt-[10px] flex-wrap">
-            <div class="text-[10px] text-[#666] dark:text-[#ccc] py-[1px] px-[6px] rounded-[20px] dark:bg-transparent dark:border-[1px] dark:border-[#999]"
-              :class="[{ 'bg-[#d6eeff] dark:bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
+            <div
+              class="text-[10px] text-[#666] dark:text-[#ccc] py-[1px] px-[6px] rounded-[20px] dark:bg-transparent dark:border-[1px] dark:border-[#999]"
+              :class="[{ '!bg-[#d6eeff] dark:!bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
               v-for="lable of item.addition.lables">{{
                 lable.text }}</div>
           </div>
diff --git a/tonecn/src/views/Resource.vue b/tonecn/src/views/Resource.vue
index 28e6d77..8e02ede 100644
--- a/tonecn/src/views/Resource.vue
+++ b/tonecn/src/views/Resource.vue
@@ -24,13 +24,19 @@ onMounted(async () => {
 <template>
   <div class="mx-auto flex flex-col items-center">
     <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
-    <div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500 dark:text-[#ddd]">精心挑选并收藏的资源
+    <div
+      class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500 dark:text-[#ddd] text-[#333]">
+      精心挑选并收藏的资源
     </div>
-    <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px] dark:text-[#ccc]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意
-      <a class="text-[#222] cursor-pointer underline] dark:text-[#fff]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
+    <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px] dark:text-[#ccc]" v-if="loadStatus != 2">
+      请在浏览此部分内容前阅读并同意
+      <a class="text-[#222] cursor-pointer underline] dark:text-[#fff]"
+        @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
+    </div>
+    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 2">加载失败，请刷新界面重试
+    </div>
+    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 0">加载中，请稍后...
     </div>
-    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 2">加载失败，请刷新界面重试</div>
-    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 0">加载中，请稍后...</div>
     <div
       class="mt-[25px] sm:mt-[50px] mx-auto flex justify-center items-start flex-wrap max-w-[1000px] transition-all duration-500"
       v-if="loadStatus == 1">
@@ -38,17 +44,19 @@ onMounted(async () => {
       <a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white dark:bg-transparent dark:border-[1px] dark:border-[#aaa] rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl dark:hover:shadow-[#666] transition-all duration-500 overflow-hidden"
         v-for="item of ResourceDatas" :href="item.src" target="_blank">
         <!-- 左侧图标 -->
-        <div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300 dark:border-[1px]">
+        <div
+          class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300 dark:border-[1px]">
           <img :src="item.icon_src" alt="" class="w-[80px] h-[80px]">
         </div>
         <!-- 右侧描述 -->
         <div class="ml-[20px] flex-1 cursor-default">
-          <div class="text-[23px] font-semibold dark:text-white">{{ item.title }}</div>
-          <div class="text-[14px] text-[#666] mt-[5px] dark:text-[#ccc]">{{ item.describe }}</div>
+          <div class="text-[23px] font-semibold text-[#333] dark:text-white ">{{ item.title }}</div>
+          <div class="text-[14px]  mt-[5px] text-[#666] dark:text-[#ccc]">{{ item.describe }}</div>
           <!-- 下方的标签 -->
           <div class="flex gap-[5px] mt-[10px] flex-wrap">
-            <div class="text-[10px] text-[#666] dark:text-[#ccc] py-[1px] px-[6px] rounded-[20px] dark:bg-transparent dark:border-[1px] dark:border-[#999]"
-              :class="[{ 'bg-[#d6eeff] dark:bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
+            <div
+              class="text-[10px] text-[#666] dark:text-[#ccc] py-[1px] px-[6px] rounded-[20px] dark:bg-transparent dark:border-[1px] dark:border-[#999]"
+              :class="[{ '!bg-[#d6eeff] dark:!bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
               v-for="lable of item.addition.lables">{{
                 lable.text }}</div>
           </div>