feat(componentMarket): 添加组件详情页面

- 在 compCard 组件中添加点击跳转到组件详情页面的功能
- 新增 compDetails.tsx 文件实现组件详情页面
- 在路由配置中添加组件详情页面的路由
- 更新多语言文件，添加组件详情页面的翻译

src/locale/index.ts

@@ -35,6 +35,7 @@ const i18n = {
     'menu.componentLibrary': 'Component Library',
     'menu.compositeCompLibrary': 'Composite Component Library',
     'menu.componentMarket': 'Component Market',
+    'menu.componentMarket.compDetails': 'Component Details',
     'navbar.logout': 'Logout',
     'settings.title': 'Settings',
     'settings.themeColor': 'Theme Color',
@@ -100,6 +101,7 @@ const i18n = {
     'menu.componentLibrary': '组件库',
     'menu.compositeCompLibrary': '复合组件库',
     'menu.componentMarket': '组件市场',
+    'menu.componentMarket.compDetails': '组件详情',
     'navbar.logout': '退出登录',
     'settings.title': '页面配置',
     'settings.themeColor': '主题色',

src/pages/componentMarket/compCard.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import styles from './style/compCard.module.less';
 import { compData } from '@/pages/componentMarket/test/data';
 import { Card, Grid, Rate, Typography } from '@arco-design/web-react';
+import { useRouter } from 'next/router';
 
 const { Row, Col } = Grid;
 
@@ -11,6 +12,7 @@ interface CompCardProps {
 
 const CompCard: React.FC<CompCardProps> = ({ componentClassify }) => {
   const [componentClassifyData, setComponentClassifyData] = useState<any>([]);
+  const router = useRouter();
 
   useEffect(() => {
     if (componentClassify === '全部') setComponentClassifyData(compData);
@@ -20,6 +22,11 @@ const CompCard: React.FC<CompCardProps> = ({ componentClassify }) => {
     }
   }, [componentClassify]);
 
+
+  const handelDetails = () => {
+    router.push('/componentMarket/compDetails');
+  };
+
   return (
     <div className={styles['comp-card']}>
       <Row style={{ marginBottom: 16 }}>
@@ -33,7 +40,7 @@ const CompCard: React.FC<CompCardProps> = ({ componentClassify }) => {
               xl={6}
               xxl={6}
               key={i}>
-              <Card style={{ border: '1px solid #d9d9d9' }}>
+              <Card style={{ cursor: 'pointer', border: '1px solid #d9d9d9' }} onClick={() => handelDetails()}>
                 {/*左侧图片*/}
                 <div className={styles['img-box']}>图片</div>
                 {/*右侧数据*/}

src/pages/componentMarket/compDetails.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const CompDetails = () => {
+  return (
+    <div className="comp-details">
+      组件详情
+    </div>
+  );
+};
+
+export default CompDetails;

src/pages/layout.tsx

@@ -143,6 +143,7 @@ function PageLayout({ children }: { children: ReactNode }) {
     }
 
     buildRouteMap(routes);
+    console.log('routeMap:', routeMap);
   }, [routes]);
 
   function renderRoutes(locale) {

src/routes/modules/componentMarket.ts

@@ -2,5 +2,12 @@ import { IRoute } from '@/routes/types';
 
 export const componentMarketModule: IRoute = {
   name: 'menu.componentMarket',
-  key: 'componentMarket'
+  key: 'componentMarket',
+  children: [
+    {
+      name: 'menu.componentMarket.compDetails',
+      key: 'componentMarket/compDetails',
+      ignore: true
+    }
+  ]
 };