fix: Fix problems related to html parsing

src/renderer/src/components/Game/Overview/description/DescriptionCard.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@ui/card'
 import { DescriptionDialog } from './DescriptionDialog'
-import { cn } from '~/utils'
+import { cn, HTMLParserOptions } from '~/utils'
 import { useDBSyncedState } from '~/hooks'
 import parse from 'html-react-parser'
 
@@ -24,9 +24,14 @@ export function DescriptionCard({
       </CardHeader>
       <CardContent className={cn('')}>
         <div
-          className={cn('max-h-[310px] text-sm overflow-auto scrollbar-base', '3xl:max-h-[500px]')}
+          className={cn(
+            'max-h-[310px] text-sm overflow-auto scrollbar-base',
+            '3xl:max-h-[500px]',
+            'prose-a:text-primary', // 链接颜色
+            'prose-a:no-underline hover:prose-a:underline' // 下划线效果
+          )}
         >
-          {description ? parse(description) : '暂无简介'}
+          {description ? parse(description, HTMLParserOptions) : '暂无简介'}
         </div>
       </CardContent>
     </Card>

src/renderer/src/utils/common.ts

@@ -1,4 +1,5 @@
 import * as csstree from 'css-tree'
+import { HTMLReactParserOptions, Element } from 'html-react-parser'
 
 interface CSSValidationResult {
   isValid: boolean
@@ -22,3 +23,14 @@ export function isValidCSS(cssContent: string): CSSValidationResult {
     }
   }
 }
+
+export const HTMLParserOptions: HTMLReactParserOptions = {
+  replace: (domNode) => {
+    if (domNode instanceof Element && domNode.name === 'a') {
+      // 确保链接打开在新标签页中
+      domNode.attribs.target = '_blank'
+      // 可选：添加 rel="noopener noreferrer" 以提高安全性
+      domNode.attribs.rel = 'noopener noreferrer'
+    }
+  }
+}

tailwind.config.cjs

@@ -104,6 +104,7 @@ module.exports = {
   plugins: [
     require('tailwindcss-animate'),
     addDynamicIconSelectors(),
-    require('tailwind-scrollbar')({ nocompatible: true, preferredStrategy: 'pseudoelements' })
+    require('tailwind-scrollbar')({ nocompatible: true, preferredStrategy: 'pseudoelements' }),
+    require('@tailwindcss/typography')
   ]
 }