update

4 years ago · 715daebdb4
parent 6bb93c579e
commit 715daebdb4
6 changed files with 75 additions and 17 deletions
--- a/pages/index.tsx
+++ b/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">1w</Button>
-            <Button variant="ghost" size="sm">1m</Button>
+            <Button variant="ghost" size="sm" height="auto">1d</Button>
+            <Button variant="ghost" size="sm" height="auto">1w</Button>
+            <Button variant="ghost" size="sm" height="auto">1m</Button>
          </HStack>
-        </Flex>
+        </CardHeader>
        <Divider />
-        <VStack px="4" pt="3" alignItems="left">
-          <Stories stories={posts} card={SimplePostCard} size="sm" showFooter={false}/>
-        </VStack>
+        <CardBody>
+          <VStack alignItems="left">
+            <Stories stories={posts} card={SimplePostCard} size="sm" showFooter={false}/>
+          </VStack>
+        </CardBody>
      </Card>
    </VStack>
  )
--- a/pages/tags/index.tsx
+++ b/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>
    </>
--- a/server/internal/server.go
+++ b/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)
--- a/src/components/card.tsx
+++ b/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} />
+}
--- a/src/components/tags/tag-card.tsx
+++ b/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>
--- a/theme/layer-styles.js
+++ b/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"
+        }
      }
 }