feat(Sidebar): 动态加载技术栈数据

- 通过 API 获取页面配置数据
- 提取技术栈信息并传递给 IconCloud 组件
- 优化组件结构,支持异步数据加载
This commit is contained in:
罗远祥
2025-09-04 17:36:13 +08:00
parent e3c9f2c259
commit e2b6bd5a82

View File

@@ -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>
);
};