feat: 收藏工具

src/components/Layout/DetailHeader/DetailHeader.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-// import { Star } from '@element-plus/icons-vue'
-import { onMounted, reactive } from 'vue';
+import { Star, StarFilled } from '@element-plus/icons-vue'
+import { onMounted, reactive, ref, computed } from 'vue';
 import { useRoute } from 'vue-router'
 import { useToolsStore } from '@/store/modules/tools'
-// import { ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import {rtrim} from '@/utils/string'
-const props = defineProps({
-  title: String,
-  id: Number
-})
+const props = defineProps({  title: String,  id: Number})
 const route = useRoute()
 //查询参数
 const searchParam = reactive({
@@ -18,41 +15,67 @@ const searchParam = reactive({
 })
 //store
 const toolsStore = useToolsStore()
+const isCollected = ref(false)
 
 //根据路由查询tool id
 const getToolInfo = async () => {
   let routeStr = route.path
   searchParam.route = rtrim(routeStr, '/')
   await toolsStore.getToolInfo(searchParam)
+  // 检查收藏状态
+  isCollected.value = toolsStore.isCollected(searchParam.route)
+}
+
+// 收藏/取消收藏
+const toggleCollect = () => {
+  const toolInfo = toolsStore.currentTool
+  if (!toolInfo) {
+    ElMessage.warning('获取工具信息失败');
+    return;
+  }
+  
+  if (isCollected.value) {
+    // 取消收藏
+    const success = toolsStore.removeCollect(toolInfo.url)
+    if (success) {
+      isCollected.value = false
+      ElMessage.success('已取消收藏');
+    } else {
+      ElMessage.error('取消收藏失败');
+    }
+  } else {
+    // 添加收藏
+    const success = toolsStore.addCollect(toolInfo)
+    if (success) {
+      isCollected.value = true
+      ElMessage.success('收藏成功');
+    } else {
+      ElMessage.error('收藏失败，可能已经收藏过了');
+    }
+  }
 }
-//收藏
-// const collect = () => {
-//   ElMessageBox({
-//     title: '提示',
-//     message: '请使用快捷键`Ctrl+D`进行收藏'
-//   })
-// }
 
 onMounted(() => {
+  toolsStore.loadCollectedTools()
   getToolInfo()
 })
 
 </script>
 
 <template>
-  <div class="flex justify-between rounded-2xl bg-white p-4 mt-5 mb-5">
-    <!-- <div class="text-gray-600">
-      <div class="flex">
-        <RouterLink to="/" class="flex items-center">
-          <el-icon color="blue"><Back /></el-icon>
-          <div>返回首页</div>
-        </RouterLink>
-      </div>
-    </div> -->
-
+  <div class="flex justify-between items-center rounded-2xl bg-white p-4 mt-5 mb-5">
     <div class="text-xl">
       {{ props.title }}
     </div>
+    <div>
+      <el-button 
+        :icon="isCollected ? StarFilled : Star" 
+        :type="isCollected ? 'warning' : 'default'"
+        @click="toggleCollect"
+      >
+        {{ isCollected ? '已收藏' : '收藏' }}
+      </el-button>
+    </div>
   </div>
 </template>
 

src/components/Layout/ToolRecommend/ToolRecommend.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue';
+import { RouterLink } from 'vue-router';
+import { useToolsStore } from '@/store/modules/tools';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '推荐工具'
+  },
+  cateId: {
+    type: Number,
+    default: 0
+  },
+  currentUrl: {
+    type: String,
+    default: ''
+  }
+});
+
+const toolsStore = useToolsStore();
+const recommendedTools = ref([]);
+
+// 随机打乱数组
+const shuffleArray = (array: any[]) => {
+  const shuffled = [...array];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  return shuffled;
+};
+
+// 计算推荐工具
+const getRecommendedTools = () => {
+  if (!props.cateId) return [];
+  
+  // 获取当前分类下的所有工具
+  let allTools = [];
+  toolsStore.cates.forEach(cate => {
+    if (cate.id === props.cateId) {
+      allTools = cate.list;
+    }
+  });
+  
+  // 过滤掉当前工具
+  const otherTools = allTools.filter(tool => {
+    const toolUrl = tool.url.replace(/\/$/, '');
+    const currentUrl = props.currentUrl.replace(/\/$/, '');
+    return toolUrl !== currentUrl;
+  });
+  
+  // 随机打乱并取前4个
+  const shuffled = shuffleArray(otherTools);
+  return shuffled.slice(0, 4);
+};
+
+onMounted(() => {
+  // 加载工具分类
+  toolsStore.getToolCate().then(() => {
+    recommendedTools.value = getRecommendedTools();
+  });
+});
+</script>
+
+<template>
+  <!-- 推荐工具 -->
+  <div class="mt-3 rounded-2xl bg-white p-4">
+    <el-divider content-position="left">{{ props.title }}</el-divider>
+    <div class="m-4">
+      <div v-if="recommendedTools.length > 0" class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <router-link 
+          v-for="tool in recommendedTools" 
+          :key="tool.url" 
+          :to="tool.url"
+          class="flex flex-col items-center p-3 border rounded-lg hover:shadow-md transition-shadow"
+        >
+          <el-image :src="tool.logo" class="w-12 h-12 mb-2 rounded-full"></el-image>
+          <div class="text-center">
+            <div class="font-medium text-sm line-clamp-1">{{ tool.title }}</div>
+          </div>
+        </router-link>
+      </div>
+      <div v-else class="text-center text-gray-500 py-4">
+        暂无推荐工具
+      </div>
+    </div> 
+  </div>
+</template>
+
+<style scoped>
+
+</style>