chore: update

src/components/chart/ChartButtonModal.tsx

@@ -17,7 +17,10 @@ const ModalContent = ({ setOpen, type }: Props) => {
   const [form] = Form.useForm()
 
   const [results, setResults] = useState({})
-  const config = { data: data.list, xField: '', yField: '', ...results }
+  const xField = Form.useWatch('x', form)
+  const yField = Form.useWatch('y', form)
+  const title = Form.useWatch('title', form)
+  const config = { data: data.list, xField, yField, colorField: xField, title, ...results }
 
   const { post } = useAI({
     onComplete: (message) => {
@@ -42,7 +45,7 @@ const ModalContent = ({ setOpen, type }: Props) => {
         {
           role: 'user',
           content: `
-        用户配置：X轴字段为${values.x}，Y轴字段为${values.y}，标签字段为${values.label}，是否隐藏行轴为${values.hidden_axis_x}，是否隐藏列轴为${values.hidden_axis_y}，颜色规则为${values.fill_color}，是否有标题为${values.has_title}，标题为${values.title}，填充图案为${values.fill_image}，是否隐藏图例为${values.legend}，是否四个角圆滑为${values.radius}
+        用户配置：X轴字段为${values.x}，Y轴字段为${values.y}
         根据以上用户配置，生成Ant Design Charts柱状图配置，不需要返回data, 以 JSON 的形式输出，输出的 JSON 需遵守以下的格式：
         {
           "results": {
@@ -170,7 +173,7 @@ const ModalContent = ({ setOpen, type }: Props) => {
         <Divider orientation="left" orientationMargin="0">
           步骤3：预览组件效果
         </Divider>
-        {!!Object.keys(results).length && <Column {...config} />}
+        {xField && yField && <Column {...config} />}
       </Form>
 
       <Flex justify="center" gap={20}>

src/components/chart/ChartWrap.tsx

@@ -2,6 +2,7 @@ import { Button, Card, Flex } from 'antd'
 import { ReactNode } from 'react'
 import AppList, { AppListProps } from '@/components/AppList'
 import ViewDataButtonModal from '../data/ViewMyDataButtonModal'
+import ViewChartButtonModal from './ViewChartButtonModal'
 import { getChartComponentList } from '@/api/data'
 import { useDeleteChart } from '@/hooks/useChartQuery'
 
@@ -73,9 +74,7 @@ export default function DataWrap({
         render(_value, record) {
           return (
             <>
-              <Button color="primary" variant="text">
-                查看
-              </Button>
+              <ViewChartButtonModal id={record.id}></ViewChartButtonModal>
               <Button color="primary" variant="text">
                 编辑
               </Button>

src/components/chart/ViewChartButtonModal.tsx

+import { useState } from 'react'
+import { Button, Modal } from 'antd'
+import { Column } from '@ant-design/plots'
+import { useViewChartQuery } from '@/hooks/useChartQuery'
+
+export default function ViewDataButtonModal({ id }: { id: string }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button color="primary" variant="text" onClick={() => setOpen(true)}>
+        查看
+      </Button>
+      <Modal title="查看" width={'80%'} open={open} footer={null} onCancel={() => setOpen(false)} destroyOnClose={true}>
+        <ModalContent id={id} />
+      </Modal>
+    </>
+  )
+}
+
+// 分离Modal内容到单独组件，只在Modal打开时渲染并执行查询
+function ModalContent({ id }: { id: string }) {
+  const { data, isLoading } = useViewChartQuery(id)
+
+  if (isLoading) {
+    return <div>加载中...</div>
+  }
+
+  if (!data) {
+    return <div>暂无数据</div>
+  }
+
+  const { config } = JSON.parse(data.content)
+
+  return (
+    <div>
+      <Column {...config} />
+    </div>
+  )
+}

src/hooks/useChartQuery.ts

-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { createChartComponent, deleteChartComponent } from '@/api/data'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { createChartComponent, deleteChartComponent, getChartComponent } from '@/api/data'
 import { message } from 'antd'
 
 // 创建
@@ -27,3 +27,14 @@ export function useDeleteChart() {
     },
   })
 }
+
+// 查看
+export function useViewChartQuery(id: string) {
+  return useQuery({
+    queryKey: ['chartComponent', id],
+    queryFn: () => {
+      return getChartComponent({ id })
+    },
+    select: (res) => res.data,
+  })
+}

src/modules/demo/chart.tsx

@@ -36,34 +36,11 @@ const DemoColumn = () => {
     },
   ]
   const config = {
-    title: {
-      visible: true,
-      text: '基础柱状图label颜色自动调整',
-    },
-    description: {
-      visible: true,
-      text: '图形标签(label)的adjustColor配置项设置为true时\uFF0C位于柱形的内部的label颜色会根据柱形颜色自动调整\uFF0C保证可读性\u3002',
-    },
-    forceFit: true,
+    title: { title: '基础柱状图label颜色自动调整' },
     data,
-    padding: 'auto',
     xField: 'type',
     yField: 'sales',
-    meta: {
-      type: {
-        alias: '类别',
-      },
-      sales: {
-        alias: '销售额(万)',
-      },
-    },
     colorField: 'type',
-    color: ['#55A6F3', '#55A6F3', '#55A6F3', '#CED4DE', '#55A6F3', '#55A6F3', '#55A6F3', '#55A6F3'],
-    label: {
-      visible: true,
-      // position: 'middle',
-      adjustColor: true,
-    },
   }
   return <Column {...config} />
 }