mirror of
https://github.com/LiuYuYang01/ThriveX-Blog.git
synced 2026-06-03 19:29:40 +08:00
feat(Sidebar): 动态加载技术栈数据
- 通过 API 获取页面配置数据 - 提取技术栈信息并传递给 IconCloud 组件 - 优化组件结构,支持异步数据加载
This commit is contained in:
@@ -1,19 +1,23 @@
|
||||
import Image from 'next/image';
|
||||
import IconCloud from '@/app/my/component/IconCloud';
|
||||
import StudySvg from '@/assets/svg/other/study.svg';
|
||||
import {getPageConfigDataByNameAPI} from '@/api/config';
|
||||
import {Config} from '@/types/app/config';
|
||||
import {MyData} from '@/types/app/my';
|
||||
|
||||
const techIcons = ['scss', 'css', 'html', 'tailwindcss', 'axios', 'fetch', 'vue', 'vuex', 'redux', 'zustand', 'element-plus', 'typescript', 'javascript', 'antdesign', 'motion', 'pinia', 'framer-motion', 'echarts', 'java', 'spring', 'springboot', 'mybatis', 'mybatis-plus', 'redis', 'rabbitmq', 'mysql', 'mongodb', 'react', 'nextjs', 'nestjs', 'webpack', 'vite', 'nodedotjs', 'nextdotjs', 'prisma', 'koa', 'express', 'python', 'flask', 'nginx', 'vercel', 'docker', 'git', 'github', 'visualstudiocode', 'intellijidea', 'datagrip', 'apifox', 'postman', 'trae', 'cursor', 'webstorm', 'navicat', 'hbuilder', 'hbuilderx', 'googledrive', 'apple', 'windows', 'linux', 'pycharm', 'wechat'];
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<div className="flex flex-col tw_container bg-white dark:bg-black-b p-4 mb-5 tw_title">
|
||||
<div className="tw_title w-full dark:text-white">
|
||||
<Image src={StudySvg} alt="最新评论" width={33} height={23} className="mr-2" /> 学无止境
|
||||
</div>
|
||||
export default async () => {
|
||||
const {data} = (await getPageConfigDataByNameAPI('my')) || {data: {} as Config};
|
||||
const { technology_stack } = data.value as MyData;
|
||||
return (
|
||||
<div className="flex flex-col tw_container bg-white dark:bg-black-b p-4 mb-5 tw_title">
|
||||
<div className="tw_title w-full dark:text-white">
|
||||
<Image src={StudySvg} alt="最新评论" width={33} height={23} className="mr-2"/> 学无止境
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-center w-5/6">
|
||||
<IconCloud iconSlugs={techIcons} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="mt-4 flex justify-center w-5/6">
|
||||
<IconCloud iconSlugs={technology_stack}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user