框架整理完毕

src/pages/page/index.scss

@@ -0,0 +1,128 @@
+.content {
+  padding: 32px;
+  line-height: 2.4rem;
+
+  // 富文本内容样式
+  :global {
+    // 段落样式
+    p {
+      margin: 16px 0;
+      line-height: 1.8;
+      text-align: justify;
+    }
+
+    // 标题样式
+    h1, h2, h3, h4, h5, h6 {
+      margin: 24px 0 16px 0;
+      font-weight: bold;
+      line-height: 1.4;
+    }
+
+    h1 { font-size: 24px; }
+    h2 { font-size: 22px; }
+    h3 { font-size: 20px; }
+    h4 { font-size: 18px; }
+    h5 { font-size: 16px; }
+    h6 { font-size: 14px; }
+
+    // 图片样式
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+      margin: 16px 0;
+      display: block;
+    }
+
+    // 列表样式
+    ul, ol {
+      margin: 16px 0;
+      padding-left: 24px;
+
+      li {
+        margin: 8px 0;
+        line-height: 1.6;
+      }
+    }
+
+    // 引用样式
+    blockquote {
+      margin: 16px 0;
+      padding: 16px;
+      background-color: #f5f5f5;
+      border-left: 4px solid #ddd;
+      border-radius: 4px;
+
+      p {
+        margin: 0;
+        font-style: italic;
+      }
+    }
+
+    // 代码样式
+    code {
+      background-color: #f5f5f5;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: 'Courier New', monospace;
+      font-size: 14px;
+    }
+
+    pre {
+      background-color: #f5f5f5;
+      padding: 16px;
+      border-radius: 8px;
+      overflow-x: auto;
+      margin: 16px 0;
+
+      code {
+        background: none;
+        padding: 0;
+      }
+    }
+
+    // 表格样式
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 16px 0;
+
+      th, td {
+        border: 1px solid #ddd;
+        padding: 12px;
+        text-align: left;
+      }
+
+      th {
+        background-color: #f5f5f5;
+        font-weight: bold;
+      }
+    }
+
+    // 链接样式
+    a {
+      color: #1890ff;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    // 分割线样式
+    hr {
+      margin: 24px 0;
+      border: none;
+      border-top: 1px solid #eee;
+    }
+
+    // 强调样式
+    strong, b {
+      font-weight: bold;
+    }
+
+    em, i {
+      font-style: italic;
+    }
+  }
+}

src/pages/page/index.tsx

@@ -0,0 +1,47 @@
+import {useEffect, useState} from 'react'
+import {useRouter} from '@tarojs/taro'
+import {Divider} from '@nutui/nutui-react-taro'
+import {CmsArticle} from "@/api/cms/cmsArticle/model"
+// 显示html富文本
+import {View, RichText} from '@tarojs/components'
+import './index.scss'
+import {getCmsNavigation} from "@/api/cms/cmsNavigation";
+
+function Detail() {
+    const {params} = useRouter();
+    // 文章详情
+    const [item, setItem] = useState<CmsArticle>()
+    // 正文
+    const [content, setContent] = useState<string>('')
+
+    const reload = async () => {
+        const nav = await getCmsNavigation(Number(params.id));
+        if(nav){
+            setItem(nav)
+        }
+        if(nav.design?.content){
+            setContent(nav.design?.content)
+        }
+    }
+
+    useEffect(() => {
+        reload().then();
+    }, []);
+
+    return (
+        <div className="mobile-container">
+            <div className={'bg-white'}>
+                <div className={'p-3 font-bold text-lg'}>{item?.title}</div>
+                <Divider/>
+                <View className={'content text-gray-700 text-sm'}>
+                    <RichText
+                        nodes={content || '暂无内容'}
+                        space="nbsp"
+                    />
+                </View>
+            </div>
+        </div>
+    )
+}
+
+export default Detail