feat: 徽智制联-deepSeek-px转vw处理

@@ -50,6 +50,7 @@
     "less-loader": "^12.2.0",
     "less-loader": "^12.2.0",
     "typescript": "^5.2.2",
     "typescript": "^5.2.2",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "vite": "^5.3.4"
+    "vite": "^5.3.4",
+    "postcss-px-to-viewport": "^1.1.1"
   }
   }
 }
 }

 import React, {useState, useEffect, useMemo, memo} from "react";
 import React, {useState, useEffect, useMemo, memo} from "react";
-import '../../pages/deep-seek-index/base.less'
-import '@/pages/deep-seek-index/style.less'
+import './base.less'
+import './style.less'
 import ReactMarkdown from 'react-markdown'
 import ReactMarkdown from 'react-markdown'
 import { flow } from 'lodash-es'
 import { flow } from 'lodash-es'
 import 'katex/dist/katex.min.css'
 import 'katex/dist/katex.min.css'

 import React, { useEffect, useRef, useState } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import '../../pages/deep-seek-index/base.less'
-import '../../pages/deep-seek-index/style.less'
+import './base.less'
+import './style.less'
 
 
 const hasEndThink = (children: any): boolean => {
 const hasEndThink = (children: any): boolean => {
     if (typeof children === 'string')
     if (typeof children === 'string')

 import { Button } from 'antd';
 import { Button } from 'antd';
-import '../../pages/deep-seek-index/base.less'
-import '../../pages/deep-seek-index/style.less'
+import './base.less'
+import './style.less'
 
 
 const MarkdownButton = ({ node }: any) => {
 const MarkdownButton = ({ node }: any) => {
     const variant = node.properties.dataVariant
     const variant = node.properties.dataVariant

 import React, { useEffect, useState } from 'react'
 import React, { useEffect, useState } from 'react'
-import '../../pages/deep-seek-index/base.less'
-import '../../pages/deep-seek-index/style.less'
+import './base.less'
+import './style.less'
 import {
 import {
     Button,
     Button,
     Input,
     Input,

+
+.mark-down {
+  width: auto;
+  max-width: 60%;
+  background: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  .group {
+    margin-bottom: 10px;
+  }
+}
+
+.role {
+  width: 40px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 14px;
+  border-radius: 14px;
+  text-align: center;
+}
+
+.text-right {
+  display: flex;
+  flex-direction: row-reverse;
+  padding-right: 2%;
+  .role {
+    margin-left: 20px;
+    background: #0A84FE;
+    color: #fff;
+  }
+  .mark-down {
+    background: #0A84FE;
+    color: #fff;
+    padding: 10px;
+  }
+}
+.text-left {
+  display: flex;
+  padding-left: 2%;
+  .role {
+    margin-right: 20px;
+    background: #fff;
+  }
+  .mark-down {
+    p {
+      overflow-wrap:break-word;
+      word-break: break-all;
+    }
+  }
+}

 import React, {useState, useEffect, useRef} from "react";
 import React, {useState, useEffect, useRef} from "react";
-import './base.less'
+import '../../components/deepSeekIndex/base.less'
 import './style.less'
 import './style.less'
 import { Button, Input } from 'antd';
 import { Button, Input } from 'antd';
 import Markdown from '@/components/deepSeekIndex/Markdown'
 import Markdown from '@/components/deepSeekIndex/Markdown'

@@ -56,52 +56,3 @@
   }
   }
 }
 }
 
 
-.mark-down {
-  width: auto;
-  max-width: 60%;
-  background: #fff;
-  border-radius: 10px;
-  padding: 20px;
-  .group {
-    margin-bottom: 10px;
-  }
-}
-
-.role {
-  width: 40px;
-  height: 28px;
-  line-height: 28px;
-  font-size: 14px;
-  border-radius: 14px;
-  text-align: center;
-}
-
-.text-right {
-  display: flex;
-  flex-direction: row-reverse;
-  padding-right: 2%;
-  .role {
-    margin-left: 20px;
-    background: #0A84FE;
-    color: #fff;
-  }
-  .mark-down {
-    background: #0A84FE;
-    color: #fff;
-    padding: 10px;
-  }
-}
-.text-left {
-  display: flex;
-  padding-left: 2%;
-  .role {
-    margin-right: 20px;
-    background: #fff;
-  }
-  .mark-down {
-    p {
-      overflow-wrap:break-word;
-      word-break: break-all;
-    }
-  }
-}

 import { defineConfig } from 'vite'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import react from '@vitejs/plugin-react'
+import postCssPxToViewport from 'postcss-px-to-viewport';
+
+const _pxToViewPort = {
+  viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
+  viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
+  unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
+  viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
+  selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+  minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+  mediaQuery: false, // 允许在媒体查询中转换`px`
+}
 
 
 // https://vitejs.dev/config/
 // https://vitejs.dev/config/
 export default defineConfig({
 export default defineConfig({
@@ -17,6 +28,9 @@ export default defineConfig({
         math: "always",
         math: "always",
         javascriptEnabled: true
         javascriptEnabled: true
       }
       }
+    },
+    postcss: {
+      plugins: [postCssPxToViewport(_pxToViewPort)]
     }
     }
   },
   },
 })
 })