update

pages/index.tsx

@@ -8,7 +8,7 @@ import {
   Heading,
   Divider
 } from "@chakra-ui/react"
-import Card from "components/card"
+import Card, { CardBody, CardHeader } from "components/card"
 import Stories from "components/story/stories"
 import SimplePostCard from "components/story/simple-story-card"
 import SEO from "components/seo"
@@ -96,18 +96,20 @@ export const HomeSidebar = () => {
   return (
     <VStack alignItems="left" width="30%" display={{ base: "none", md: "flex" }}>
       <Card p="0">
-        <Flex px="4" py="3" justifyContent="space-between" alignItems="center">
+        <CardHeader>
           <Heading size="sm">热榜</Heading>
           <HStack>
-            <Button variant="ghost" size="sm">1d</Button>
+            <Button variant="ghost" size="sm" height="auto">1d</Button>
-            <Button variant="ghost" size="sm">1w</Button>
+            <Button variant="ghost" size="sm" height="auto">1w</Button>
-            <Button variant="ghost" size="sm">1m</Button>
+            <Button variant="ghost" size="sm" height="auto">1m</Button>
           </HStack>
-        </Flex>
+        </CardHeader>
         <Divider />
-        <VStack px="4" pt="3" alignItems="left">
+        <CardBody>
+          <VStack alignItems="left">
             <Stories stories={posts} card={SimplePostCard} size="sm" showFooter={false}/>
           </VStack>
+        </CardBody>
       </Card>
     </VStack>
   )

pages/tags/index.tsx

@@ -4,19 +4,24 @@ import {
   MenuList,
   MenuItem,
   IconButton,
-  Divider
+  Divider,
+  Box,
+  Image
 } from "@chakra-ui/react"
 import SEO from "components/seo"
 import siteConfig from "configs/site-config"
 import PageContainer1 from "layouts/page-container1"
 import React, { useEffect, useState } from "react"
 import { HomeSidebar } from 'pages/index'
-import Card from "components/card"
+import Card, { CardBody, CardHeader } from "components/card"
 import { config } from "configs/config"
 import { getSvgIcon } from "components/svg-icon"
 import { Tag } from "src/types/tag"
 import { requestApi } from "utils/axios/request"
 import TagCard from 'src/components/tags/tag-card'
+import useSession from "hooks/use-session"
+import Link from "next/link"
+import { IDType } from "src/types/id"
 
 const tagsFilter = [{
   name: 'Popular',
@@ -39,14 +44,33 @@ const tagsFilter = [{
 const TagsPage = () => {
   const [filter, setFilter] = useState(tagsFilter[0])
   const [tags, setTags]: [Tag[], any] = useState([])
+  const [userTags,setUserTags]:[Tag[],any] = useState([])
+
+  const session = useSession()
   const getTags = () => {
     requestApi.get(`/tag/all`).then((res) => setTags(res.data)).catch(_ => setTags([]))
   }
 
+  const getUserTags = async () => {
+    const res = await requestApi.get(`/interaction/following/${session.user.id}?type=${IDType.Tag}`)
+    const ids = []
+    for (const f of res.data) {
+        ids.push(f.id)
+    }
+
+    const res1 = await requestApi.post(`/tag/ids`, ids)
+    setUserTags(res1.data)
+  }
+
   useEffect(() => {
     getTags()
   }, [filter])
 
+  useEffect(() => {
+    if (session) {
+      getUserTags()
+    }
+  },[session])
   return (
     <>
       <SEO
@@ -54,7 +78,7 @@ const TagsPage = () => {
         description={siteConfig.seo.description}
       />
       <PageContainer1>
-        <HStack alignItems="top" p="4" spacing="3">
+        <HStack alignItems="top"  spacing="3">
           <VStack alignItems="left" width={["100%", "100%", "70%", "70%"]} spacing="3">
             <Card>
               <VStack py="3" spacing="3">
@@ -95,7 +119,24 @@ const TagsPage = () => {
               </VStack>
             </Card>
           </VStack>
-          <HomeSidebar />
+          {userTags.length > 0 && <Card p="0" width="30%" display={{base: "none", md: "block"}}>
+            <CardHeader>
+              <Heading size="sm">我关注的Tags</Heading>
+            </CardHeader>
+            <Divider />
+            <CardBody>
+                <VStack alignItems="left"  spacing="4">
+                   {
+                     userTags.map(tag => <Link href={`/tags/${tag.name}`}>
+                       <HStack cursor="pointer" spacing="4">
+                          {tag.icon && <Image src={tag.icon} width="35px"/>}
+                          <Text>#{tag.name}</Text>
+                        </HStack>
+                     </Link>)
+                   }
+                </VStack>
+            </CardBody>
+          </Card>}
         </HStack>
       </PageContainer1>
     </>

server/internal/server.go

@@ -69,10 +69,10 @@ func (s *Server) Start() error {
 		r.POST("/tag", IsLogin(), api.SubmitTag)
 		r.DELETE("/tag/:id", IsLogin(), api.DeleteTag)
 		r.GET("/tag/all", api.GetTags)
-		r.POST("tag/ids", api.GetTagsByIDs)
+		r.POST("tag/ids", api.GetTagsByIDs) // 根据对象ID列表获取关联的标签
 		r.GET("/tag/posts/:id", api.GetTagPosts)
 		r.GET("/tag/info/:name", api.GetTag)
-		r.GET("/tag/user/:userID", api.GetUserTags)
+		r.GET("/tag/user/:userID", api.GetUserTags) // 获取用户博客用到的标签列表
 		// user apis
 		r.GET("/user/all", api.GetUsers)
 		r.POST("/user/ids", api.GetUsersByIDs)

src/components/card.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react"
+import { Box, BoxProps, Flex, useColorModeValue } from "@chakra-ui/react"
 
 interface Props {
   shadowed?: boolean
@@ -21,3 +21,12 @@ export const Card = ({shadowed, ...rest}: BoxProps&Props)  => {
 } 
 
 export default Card
+
+
+export const CardHeader = (props) => {
+ return (<Flex px="4" py="4" justifyContent="space-between" alignItems="center" {...props}/>)
+}
+
+export const CardBody = (props) => {
+  return <Box  px="4" py="3" {...props} />
+}

src/components/tags/tag-card.tsx

@@ -23,7 +23,7 @@ export const TagCard= (props:Props) =>{
                         <Image src={tag.icon} width="43px" mr="2" borderWidth="1px" className="bordered"/>
                         <Box>
                             <Heading size="sm">{tag.title}</Heading>
-                            <Tooltip openDelay={300} label={tag.md}><Text layerStyle="textSecondary" fontSize=".85rem" mt="1" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" width={{"sm": "100px","md":"400px"}}>{tag.md}</Text></Tooltip>
+                            <Tooltip openDelay={300} label={tag.md}><Text layerStyle="textSecondary" fontSize=".85rem" mt="1" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" width={["100px","100px","200px","300px"]}>{tag.md}</Text></Tooltip>
                         </Box>
                     </HStack>
                 </NextLink>

theme/layer-styles.js

@@ -11,5 +11,11 @@ export default function layerStyles(theme) {
           },
           _focus: null
         },
+        cardHeader: {
+          px: "4",
+          py: "3",
+          justifyContent:"space-between",
+          alignItems:"center"
+        }
       }
 }