Commit 744273b79e872ddb0e69f0b41e58b698457c0542

Authored by 史婷婷
1 parent e8622c65

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

... ... @@ -50,6 +50,7 @@
50 50 "less-loader": "^12.2.0",
51 51 "typescript": "^5.2.2",
52 52 "@types/react-syntax-highlighter": "^15.5.13",
53   - "vite": "^5.3.4"
  53 + "vite": "^5.3.4",
  54 + "postcss-px-to-viewport": "^1.1.1"
54 55 }
55 56 }
... ...
1 1 import React, {useState, useEffect, useMemo, memo} from "react";
2   -import '../../pages/deep-seek-index/base.less'
3   -import '@/pages/deep-seek-index/style.less'
  2 +import './base.less'
  3 +import './style.less'
4 4 import ReactMarkdown from 'react-markdown'
5 5 import { flow } from 'lodash-es'
6 6 import 'katex/dist/katex.min.css'
... ...
src/components/deepSeekIndex/base.less renamed from src/pages/deep-seek-index/base.less
1 1 import React, { useEffect, useRef, useState } from 'react'
2   -import '../../pages/deep-seek-index/base.less'
3   -import '../../pages/deep-seek-index/style.less'
  2 +import './base.less'
  3 +import './style.less'
4 4
5 5 const hasEndThink = (children: any): boolean => {
6 6 if (typeof children === 'string')
... ...
1 1 import { Button } from 'antd';
2   -import '../../pages/deep-seek-index/base.less'
3   -import '../../pages/deep-seek-index/style.less'
  2 +import './base.less'
  3 +import './style.less'
4 4
5 5 const MarkdownButton = ({ node }: any) => {
6 6 const variant = node.properties.dataVariant
... ...
1 1 import React, { useEffect, useState } from 'react'
2   -import '../../pages/deep-seek-index/base.less'
3   -import '../../pages/deep-seek-index/style.less'
  2 +import './base.less'
  3 +import './style.less'
4 4 import {
5 5 Button,
6 6 Input,
... ...
  1 +
  2 +.mark-down {
  3 + width: auto;
  4 + max-width: 60%;
  5 + background: #fff;
  6 + border-radius: 10px;
  7 + padding: 20px;
  8 + .group {
  9 + margin-bottom: 10px;
  10 + }
  11 +}
  12 +
  13 +.role {
  14 + width: 40px;
  15 + height: 28px;
  16 + line-height: 28px;
  17 + font-size: 14px;
  18 + border-radius: 14px;
  19 + text-align: center;
  20 +}
  21 +
  22 +.text-right {
  23 + display: flex;
  24 + flex-direction: row-reverse;
  25 + padding-right: 2%;
  26 + .role {
  27 + margin-left: 20px;
  28 + background: #0A84FE;
  29 + color: #fff;
  30 + }
  31 + .mark-down {
  32 + background: #0A84FE;
  33 + color: #fff;
  34 + padding: 10px;
  35 + }
  36 +}
  37 +.text-left {
  38 + display: flex;
  39 + padding-left: 2%;
  40 + .role {
  41 + margin-right: 20px;
  42 + background: #fff;
  43 + }
  44 + .mark-down {
  45 + p {
  46 + overflow-wrap:break-word;
  47 + word-break: break-all;
  48 + }
  49 + }
  50 +}
\ No newline at end of file
... ...
1 1 import React, {useState, useEffect, useRef} from "react";
2   -import './base.less'
  2 +import '../../components/deepSeekIndex/base.less'
3 3 import './style.less'
4 4 import { Button, Input } from 'antd';
5 5 import Markdown from '@/components/deepSeekIndex/Markdown'
... ...
... ... @@ -56,52 +56,3 @@
56 56 }
57 57 }
58 58
59   -.mark-down {
60   - width: auto;
61   - max-width: 60%;
62   - background: #fff;
63   - border-radius: 10px;
64   - padding: 20px;
65   - .group {
66   - margin-bottom: 10px;
67   - }
68   -}
69   -
70   -.role {
71   - width: 40px;
72   - height: 28px;
73   - line-height: 28px;
74   - font-size: 14px;
75   - border-radius: 14px;
76   - text-align: center;
77   -}
78   -
79   -.text-right {
80   - display: flex;
81   - flex-direction: row-reverse;
82   - padding-right: 2%;
83   - .role {
84   - margin-left: 20px;
85   - background: #0A84FE;
86   - color: #fff;
87   - }
88   - .mark-down {
89   - background: #0A84FE;
90   - color: #fff;
91   - padding: 10px;
92   - }
93   -}
94   -.text-left {
95   - display: flex;
96   - padding-left: 2%;
97   - .role {
98   - margin-right: 20px;
99   - background: #fff;
100   - }
101   - .mark-down {
102   - p {
103   - overflow-wrap:break-word;
104   - word-break: break-all;
105   - }
106   - }
107   -}
... ...
1 1 import { defineConfig } from 'vite'
2 2 import react from '@vitejs/plugin-react'
  3 +import postCssPxToViewport from 'postcss-px-to-viewport';
  4 +
  5 +const _pxToViewPort = {
  6 + viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
  7 + viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
  8 + unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
  9 + viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
  10 + selectorBlackList: [], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
  11 + minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
  12 + mediaQuery: false, // 允许在媒体查询中转换`px`
  13 +}
3 14
4 15 // https://vitejs.dev/config/
5 16 export default defineConfig({
... ... @@ -17,6 +28,9 @@ export default defineConfig({
17 28 math: "always",
18 29 javascriptEnabled: true
19 30 }
  31 + },
  32 + postcss: {
  33 + plugins: [postCssPxToViewport(_pxToViewPort)]
20 34 }
21 35 },
22 36 })
... ...