From 10d0328b7b30737afabefa4c318d8d7ce1354725 Mon Sep 17 00:00:00 2001
From: sunfree <17315650350@163.com>
Date: Tue, 6 Aug 2024 22:04:38 +0800
Subject: [PATCH] add new

---
 src/components/blogs/leftsite/ComLink.vue     |  9 ++++--
 .../blogs/leftsite/LeftSiteInfo.vue           | 22 ++++++++++++--
 src/components/blogs/rightsite/HeatMap.vue    | 29 +++++++++++++++++--
 .../blogs/rightsite/RandomArticle.vue         | 21 ++++++++++++--
 src/hooks/intex.ts                            | 17 +++++++++--
 src/tools/request.ts                          |  2 +-
 src/views/blog/diarycontent/DiaryListView.vue | 14 +++++++--
 src/views/blog/imagemanage/OtherImgView.vue   |  4 ++-
 src/views/blog/imagemanage/PersonSelfView.vue |  8 +++--
 9 files changed, 106 insertions(+), 20 deletions(-)

diff --git a/src/components/blogs/leftsite/ComLink.vue b/src/components/blogs/leftsite/ComLink.vue
index af4c6e7..157b994 100644
--- a/src/components/blogs/leftsite/ComLink.vue
+++ b/src/components/blogs/leftsite/ComLink.vue
@@ -50,12 +50,15 @@ onMounted(() => {
 .button-group {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
+    /* justify-content: space-between; */
 }
 
 .button-group>* {
-    width: 40%;
     margin: 12px;
 }
-
+@media (max-width: 768px) {
+  .button-group > * {
+    width: 100%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/blogs/leftsite/LeftSiteInfo.vue b/src/components/blogs/leftsite/LeftSiteInfo.vue
index fb19bca..fc253ba 100644
--- a/src/components/blogs/leftsite/LeftSiteInfo.vue
+++ b/src/components/blogs/leftsite/LeftSiteInfo.vue
@@ -6,7 +6,7 @@
         <h1>sunfree</h1>
         <div class="cardText"></div>
         <div class="button-group">
-            <a-button v-for="(button, index) in buttons" :key="index" shape="circle" size="large"
+            <a-button v-for="(button, index) in buttons" :key="index" shape="circle" :size="buttonSize"
                 @click="handleClick(button.url)">
                 <component :is="button.icon" />
             </a-button>
@@ -26,11 +26,29 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed,onUnmounted } from 'vue';
 import iconComponents from "@/assets/index";
 import { get } from '@/tools/request';
 import type { classticInterface } from '@/api/admin';
 import { CaretRightOutlined } from '@ant-design/icons-vue';
+// const buttonSizesss = ref("large")
+const windowWidth = ref(window.innerWidth);
+
+const updateWidth = () => {
+  windowWidth.value = window.innerWidth;
+};
+
+onMounted(() => {
+  window.addEventListener('resize', updateWidth);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWidth);
+});
+
+const buttonSize = computed(() => {
+  return windowWidth.value < 1920 ? 'small' : 'large';
+});
 const buttons = ref([
     { icon: iconComponents.CravatarLined, url: 'https://cravatar.cn/' },
     { icon: iconComponents.QQLined, url: '/qqcode' },
diff --git a/src/components/blogs/rightsite/HeatMap.vue b/src/components/blogs/rightsite/HeatMap.vue
index f9be240..f638e11 100644
--- a/src/components/blogs/rightsite/HeatMap.vue
+++ b/src/components/blogs/rightsite/HeatMap.vue
@@ -10,7 +10,7 @@
 
 <script setup lang='ts'>
 import { get } from '@/tools/request';
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted,onUnmounted } from 'vue';
 import { createEcharts } from "@/hooks/intex"
 const heat = ref(null);
 function generateDates(numDays: number) {
@@ -125,10 +125,35 @@ const heatMapData = reactive(
         }]
     }
 )
+function handleResize() {
+    if (heat.value && (heat.value as any).echartsInstance) {
+        (heat.value as any).echartsInstance.resize();
+    }
+}
+
 onMounted(() => {
     statisticList()
     createEcharts(heat, heatMapData);
+    window.addEventListener('resize', handleResize);
+
+    // 确保组件卸载时移除事件监听器
+    onUnmounted(() => {
+        window.removeEventListener('resize', handleResize);
+    });
 })
 </script>
 
-<style></style>
\ No newline at end of file
+<style scoped>
+.heatmap-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.heatmap {
+    width: 100%;
+    height: 100%;
+    border-right: rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/blogs/rightsite/RandomArticle.vue b/src/components/blogs/rightsite/RandomArticle.vue
index 1d11ea3..8ea3f12 100644
--- a/src/components/blogs/rightsite/RandomArticle.vue
+++ b/src/components/blogs/rightsite/RandomArticle.vue
@@ -6,14 +6,18 @@
                     <span>{{ article.blogtitle }}</span>
                     <span>{{ article.create_at }}</span>
                 </div>
-                <a-image :preview="false" :width="250" :src="article.imglink" />
+                <div class="image-container">
+                    <a-image :preview="false" :src=article.imglink class="responsive-image" />
+                </div>
             </a>
             <a :href="`/diary/${article.id}`" v-if="article.diarytitle" class="random-diary">
                 <div class="article-text">
                     <span>{{ article.diarytitle }}</span>
                     <span>{{ article.create_at }}</span>
                 </div>
-                <a-image :preview="false" :width="250" :src="article.imglink" />
+                <div class="image-container">
+                    <a-image :preview="false" :src=article.imglink class="responsive-image" />
+                </div>
             </a>
         </div>
     </a-card>
@@ -32,7 +36,7 @@ const homePageList = async () => {
     ).then(response => {
         const randResponse = response.data.data.map((items: any) => ({
             ...items,
-            imglink: items.imglink || 'https://www.wuruilin.cn/personself/暂无图片A.jpg',
+            imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片A.jpg',
             create_at: dayjs(items.create_at).format('YYYY-MM-DD HH:mm:ss'),
             update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'),
         }))
@@ -54,12 +58,23 @@ onMounted(() => {
     font-family: "Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif";
 }
 
+ .image-container {
+    width: 100%;
+    max-width: 250px; 
+}
+
+ .responsive-image {
+    height: auto;
+}
+
+
 .random-blog,
 .random-diary {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    max-width: 100%;
 }
 
 a {
diff --git a/src/hooks/intex.ts b/src/hooks/intex.ts
index 09bb0d2..18249ef 100644
--- a/src/hooks/intex.ts
+++ b/src/hooks/intex.ts
@@ -45,6 +45,17 @@ export const verifySelect = (message: selectMessage) => {
  * echarts配置
  */
 export const createEcharts = (chartRef: any, option: any) => {
-  const myChart = echarts.init(chartRef.value);
-  myChart.setOption(option);
-};
+  if (chartRef.value) {
+    // 销毁旧实例
+    if (chartRef.value.echartsInstance) {
+      chartRef.value.echartsInstance.dispose();
+    }
+
+    const myChart = echarts.init(chartRef.value);
+    chartRef.value.echartsInstance = myChart; // 保存 ECharts 实例
+    myChart.setOption(option);
+    myChart.resize(); // 调整大小以适应容器
+  } else {
+    console.warn('Chart reference is not available.');
+  }
+};
\ No newline at end of file
diff --git a/src/tools/request.ts b/src/tools/request.ts
index 49d72ac..1535cb1 100644
--- a/src/tools/request.ts
+++ b/src/tools/request.ts
@@ -3,7 +3,7 @@ import  { type AxiosRequestConfig } from 'axios';
 import router from '@/router';
 const instance = axios.create({
   // 添加url
-  baseURL: 'https://www.wuruilin.cn/api/',
+  baseURL: 'https://www.wuruilin.cn/api',
   timeout: 5000, 
 });
 
diff --git a/src/views/blog/diarycontent/DiaryListView.vue b/src/views/blog/diarycontent/DiaryListView.vue
index b72a2e2..b8e366c 100644
--- a/src/views/blog/diarycontent/DiaryListView.vue
+++ b/src/views/blog/diarycontent/DiaryListView.vue
@@ -31,8 +31,8 @@
                         </a-tag>
                     </div>
                     <div class="blog-content">
-                        <div>
-                            <a-image :preview="false" :width="1000" :height="500" :src=article.imglink />
+                        <div class="image-container">
+                            <a-image :preview="false" :src=article.imglink class="responsive-image"/>
                         </div>
 
                     </div>
@@ -180,6 +180,16 @@ onMounted(() => {
     /* 防止文本换行 */
 }
 
+.diarys .image-container {
+    width: 1000px;
+   
+}
+
+.diarys .responsive-image {
+    width: 100%;
+    height: auto;
+}
+
 .main .read-button {
     display: flex;
     justify-content: center;
diff --git a/src/views/blog/imagemanage/OtherImgView.vue b/src/views/blog/imagemanage/OtherImgView.vue
index 38078f3..0b5f538 100644
--- a/src/views/blog/imagemanage/OtherImgView.vue
+++ b/src/views/blog/imagemanage/OtherImgView.vue
@@ -27,14 +27,16 @@ const imageStyle = computed(() => {
     };
 });
 const imgurl = ref([])
+console.log(`output->imgurl`,imgurl)
 const baseurl = "https://www.wuruilin.cn"
 const imgList = async () => {
-    await get("photos/listfiles",
+    await get("/photos/listfiles/",
         { album_key: "otherimg" }
         
     ).then((response) => {
         const imglist = response.data.files
         imgurl.value = imglist.map((path: string) => `${baseurl}/${path}`);
+        
     })
 }
 onMounted(() => {
diff --git a/src/views/blog/imagemanage/PersonSelfView.vue b/src/views/blog/imagemanage/PersonSelfView.vue
index 2320762..7c450de 100644
--- a/src/views/blog/imagemanage/PersonSelfView.vue
+++ b/src/views/blog/imagemanage/PersonSelfView.vue
@@ -26,14 +26,16 @@ const imageStyle = computed(() => {
     };
 });
 const imgurl = ref([])
-const baseurl = "https://www.wuruilin.cn"
+const baseurl = "https://www.wuruilin.cn/"
 const imgList = async () => {
-    await get("photos/listfiles",
+    await get("/photos/listfiles/",
         { album_key: "personself" }
 
     ).then((response) => {
         const imglist = response.data.files
-        imgurl.value = imglist.map((path: string) => `${baseurl}/${path}`);
+        imgurl.value = imglist.map((path: string) => {
+            return `${baseurl}/${path}`
+        });
     })
 }
 onMounted(() => {