feats

src/pages/dish/list/components/DishCotent.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Card } from 'antd';
+
+const { Meta } = Card;
+
+export default (props) => {
+
+  const { dish = {} } = props;
+
+  const style = {
+    height: dish.thumb ? '160px' : '400px',
+    overflowY: 'auto',
+  }
+
+  return (
+    <Card cover={<img alt='' src={dish.thumb} />} style={{ width: '360px', height: '480px' }}>
+      <Meta
+        title={dish.name}
+        description={<div dangerouslySetInnerHTML={{ __html: dish.content }} style={style} />} />
+    </Card>
+  )
+}

src/pages/dish/list/index.jsx

@@ -2,8 +2,9 @@ import { getDishList, addDish, updataDish, deleteDish } from '@/services/dish';
 import { queryTable } from '@/utils/request';
 import { PageContainer, ProTable } from '@ant-design/pro-components';
 import { useNavigate, Link } from 'react-router-dom';
-import { Button, message, Popconfirm } from 'antd';
+import { Button, message, Popconfirm, Popover } from 'antd';
 import { useRef, useState } from 'react';
+import DishCotent from './components/DishCotent';
 
 const DishList = (props) => {
   console.log(props, '===');
@@ -34,7 +35,11 @@ const DishList = (props) => {
     {
       title: '菜肴名称',
       dataIndex: 'name',
-      render: (t, row) => <Link to={`/stock/dish/detail?id=${row.id}`}>{t}</Link>
+      render: (t, row) => (
+        <Popover placement="right" content={<DishCotent dish={row} />}>
+          <Link to={`/stock/dish/detail?id=${row.id}`}>{t}</Link>
+        </Popover>
+      )
     },
 
     {