完成AI问答模块

2025-07-08 21:42:38 +08:00
parent 38f67616fc
commit 9f8f113e43
35 changed files with 1563 additions and 146 deletions
--- a/src/honor/detail.scss
+++ b/src/honor/detail.scss
@@ -0,0 +1,10 @@
+.content{
+    img{
+        margin: 12px;
+        background-color: #F2FE03;
+        padding: 6px;
+        border-radius: 16px;
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+        margin-bottom: 40px !important;
+    }
+}
--- a/src/honor/detail.tsx
+++ b/src/honor/detail.tsx
@@ -1,26 +1,21 @@
 import {useEffect, useState} from 'react'
-import {Tag} from '@nutui/nutui-react-taro'
 import {useRouter} from '@tarojs/taro'
-import {Divider} from '@nutui/nutui-react-taro'
 import {CmsArticle} from "@/api/cms/cmsArticle/model"
-import {Eye} from '@nutui/icons-react-taro'
 // 显示html富文本
 import {View, RichText} from '@tarojs/components'
-import Line from "@/components/Gap";
+// import Line from "@/components/Gap";
 import {getCmsArticle} from "@/api/cms/cmsArticle";
+import './detail.scss';

 function Detail() {
    const {params} = useRouter();
    // 文章详情
    const [item, setItem] = useState<CmsArticle>()
-    // 浏览量
-    const [views, setViews] = useState<number>()

    const reload = () => {
        getCmsArticle(Number(params.id)).then(data => {
            if (data) {
                setItem(data)
-                setViews(data.actualViews)
            }
        })
    }
@@ -30,20 +25,38 @@ function Detail() {
    }, []);

    return (
-        <div className={'bg-white'}>
-            <div className={'p-3 font-bold text-lg'}>{item?.title}</div>
-            <div className={'flex justify-between px-3'}>
-                <Tag type={'success'}>{item?.categoryName}</Tag>
-                <div className={'flex items-center gap-2 text-sm text-gray-400'}><Eye size={14}/>{views}</div>
+        <div style={{
+            background: 'linear-gradient(to bottom, #F63D3D, #C01717)',
+            minHeight: '100vh'
+        }}>
+            <div className={'p-4'}>
+                <div
+                    className={'relative'}
+                    style={{
+                        background: 'url(https://oss.wsdns.cn/20250708/d7a8aad52f6048e5adce13ef0ea86216.png)',
+                        backgroundSize: '100%',
+                        backgroundRepeat: 'no-repeat',
+                        width: '100%',
+                        height: '70px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }}
+                >
+                    {/* 标题 */}
+                    <div
+                        className={'absolute z-50 text-sm text-center text-[#F2FE03] font-bold leading-tight px-1'}
+                    >
+                        {item?.title}
+                    </div>
+                </div>
            </div>
-            <Divider/>
-            <View className={'content text-gray-700 text-sm'}>
+            <View className={'content text-[#F2FE03] text-sm'}>
                <RichText
                    nodes={item?.content || '暂无内容'}
                    space="nbsp"
                />
            </View>
-            <Line height={44}/>
        </div>
    )
 }
--- a/src/honor/index.tsx
+++ b/src/honor/index.tsx
@@ -4,7 +4,7 @@ import {CmsArticle} from "@/api/cms/cmsArticle/model";
 import Taro from '@tarojs/taro'
 import {useRouter} from '@tarojs/taro'
 import {Image} from '@nutui/nutui-react-taro'
-import {getCmsNavigation} from "@/api/cms/cmsNavigation";
+import {getCmsNavigation, pageCmsNavigation} from "@/api/cms/cmsNavigation";
 import {CmsNavigation} from "@/api/cms/cmsNavigation/model";

 /**
@@ -14,6 +14,7 @@ import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
 const Index = () => {
    const {params} = useRouter();
    const [navigation, setNavigation] = useState<CmsNavigation>()
+    const [childCategory, setChildCategory] = useState<CmsNavigation[]>([])
    const [list, setList] = useState<CmsArticle[]>([])

    const reload = async () => {
@@ -21,6 +22,8 @@ const Index = () => {
        const categoryId = Number(params.id);
        // 当前栏目信息
        const navs = await getCmsNavigation(categoryId);
+        // 二级栏目
+        const childCateogry = await pageCmsNavigation({parentId: categoryId});
        // 终极新闻列表
        const articles = await pageCmsArticle({categoryId});

@@ -28,6 +31,10 @@ const Index = () => {
        if (navs) {
            setNavigation(navs);
        }
+        // 获取子级栏目
+        if (childCateogry) {
+            setChildCategory(childCateogry.list)
+        }
        // 新闻列表
        if (articles) {
            setList(articles?.list || [])
@@ -39,12 +46,46 @@ const Index = () => {
    }, [])

    return (
-        <>
+        <div className={'bg-red-200 h-full'}>
            <div style={{padding: navigation?.span + 'px'}}>
                <Image src={navigation?.style} width={'100%'}
                       height={'auto'}/>
            </div>
-            <div className={'bg-white rounded-lg py-3 px-3'}>
+            <div className={'py-3 px-3'}>
+                {
+                    // 子级栏目
+                    childCategory && childCategory.map((item, index) => {
+                        return (
+                            <div
+                                key={index}
+                                className={'relative'}
+                                style={{
+                                    background: 'url(https://oss.wsdns.cn/20250706/4dd93518d88f4b4a9028a769ad010295.png)',
+                                    backgroundSize: '100%',
+                                    backgroundRepeat: 'no-repeat',
+                                    margin: '10px 0',
+                                    width: '100%',
+                                    height: '66px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center'
+                                }}
+                                onClick={() => Taro.navigateTo({url: `./list?id=${item.navigationId}`})}
+                            >
+                                {/* 标题 */}
+                                <div
+                                    className={'absolute z-50 text-sm text-center text-[#F2FE03] font-bold leading-tight px-1'}
+                                    style={{
+                                        backgroundImage: `url(https://oss.wsdns.cn/20250706/4dd93518d88f4b4a9028a769ad010295.png})`,
+                                        width: '100%',
+                                        height: 'auto'
+                                    }}>
+                                    {item.title}
+                                </div>
+                            </div>
+                        )
+                    })
+                }
                {
                    // 终极文章列表
                    list.map((item, index) => {
@@ -80,7 +121,8 @@ const Index = () => {
                    })
                }
            </div>
-        </>
+
+        </div>
    )
 }
 export default Index
--- a/src/honor/list.config.ts
+++ b/src/honor/list.config.ts
@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '光荣榜',
+  navigationBarBackgroundColor: '#d32f2f',
+  navigationBarTextStyle: 'white'
+})
--- a/src/honor/list.scss
+++ b/src/honor/list.scss
@@ -0,0 +1,186 @@
+.veteran-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
+
+  .hero-section {
+    position: relative;
+    padding: 40px 20px 60px;
+    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
+    overflow: hidden;
+
+    .hero-content {
+      position: relative;
+      z-index: 2;
+      text-align: center;
+
+      .hero-title {
+        font-size: 28px;
+        font-weight: bold;
+        color: #fff;
+        margin-bottom: 20px;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      }
+
+      .hero-subtitle {
+        font-size: 14px;
+        line-height: 1.6;
+        color: rgba(255, 255, 255, 0.9);
+        margin: 0 auto;
+        max-width: 320px;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+      }
+    }
+
+    .hero-decoration {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+
+      .decoration-circle {
+        position: absolute;
+        top: -50px;
+        right: -50px;
+        width: 150px;
+        height: 150px;
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        border-radius: 50%;
+        animation: rotate 20s linear infinite;
+      }
+
+      .decoration-star {
+        position: absolute;
+        bottom: 20px;
+        right: 30px;
+        width: 0;
+        height: 0;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+        border-bottom: 10px solid rgba(255, 255, 255, 0.1);
+        transform: rotate(35deg);
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: -15px;
+          top: 3px;
+          width: 0;
+          height: 0;
+          border-left: 15px solid transparent;
+          border-right: 15px solid transparent;
+          border-bottom: 10px solid rgba(255, 255, 255, 0.1);
+          transform: rotate(-70deg);
+        }
+      }
+    }
+  }
+
+  .veteran-list {
+    padding: 20px 15px;
+
+    .veteran-card {
+      background: #fff;
+      border-radius: 12px;
+      margin-bottom: 15px;
+      padding: 20px;
+      display: flex;
+      align-items: flex-start;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      border: 2px solid #d32f2f;
+      transition: all 0.3s ease;
+      cursor: pointer;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+      }
+
+      .veteran-avatar {
+        flex-shrink: 0;
+        margin-right: 15px;
+
+        .avatar-img {
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          object-fit: cover;
+          border: 3px solid #d32f2f;
+          background: #f5f5f5;
+        }
+      }
+
+      .veteran-info {
+        flex: 1;
+
+        .veteran-name {
+          font-size: 18px;
+          font-weight: bold;
+          color: #d32f2f;
+          margin: 0 0 8px 0;
+        }
+
+        .veteran-description {
+          font-size: 13px;
+          line-height: 1.5;
+          color: #666;
+          text-align: justify;
+        }
+      }
+    }
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 375px) {
+  .veteran-page {
+    .hero-section {
+      padding: 30px 15px 50px;
+
+      .hero-content {
+        .hero-title {
+          font-size: 24px;
+        }
+
+        .hero-subtitle {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .veteran-list {
+      padding: 15px 10px;
+
+      .veteran-card {
+        padding: 15px;
+
+        .veteran-avatar {
+          .avatar-img {
+            width: 50px;
+            height: 50px;
+          }
+        }
+
+        .veteran-info {
+          .veteran-name {
+            font-size: 16px;
+          }
+
+          .veteran-description {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/honor/list.tsx
+++ b/src/honor/list.tsx
@@ -0,0 +1,123 @@
+import {useEffect, useState} from "react";
+import {pageCmsArticle} from "@/api/cms/cmsArticle";
+import {CmsArticle} from "@/api/cms/cmsArticle/model";
+import Taro from '@tarojs/taro'
+import {useRouter} from '@tarojs/taro'
+import {Image} from '@nutui/nutui-react-taro'
+import {getCmsNavigation} from "@/api/cms/cmsNavigation";
+import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
+
+/**
+ * 文章终极列表
+ * @constructor
+ */
+const List = () => {
+    const {params} = useRouter();
+    const [navigation, setNavigation] = useState<CmsNavigation>()
+    const [list, setList] = useState<CmsArticle[]>([])
+
+    const reload = async () => {
+        // 获取栏目ID
+        const categoryId = Number(params.id);
+        // 当前栏目信息
+        const navs = await getCmsNavigation(categoryId);
+        // 终极新闻列表
+        const articles = await pageCmsArticle({categoryId});
+
+        // 当前栏目信息
+        if (navs) {
+            setNavigation(navs);
+        }
+        // 新闻列表
+        if (articles) {
+            setList(articles?.list || [])
+        }
+    }
+
+    useEffect(() => {
+        reload()
+    }, [])
+
+    return (
+        <div className={'bg-red-200 h-full'}>
+            <div style={{padding: navigation?.span + 'px'}}>
+                <Image src={navigation?.style} width={'100%'}
+                       height={'auto'}/>
+            </div>
+            <div className={'p-4'}>
+                <div
+                    className={'relative'}
+                    style={{
+                        background: 'url(https://oss.wsdns.cn/20250708/d7a8aad52f6048e5adce13ef0ea86216.png)',
+                        backgroundSize: '100%',
+                        backgroundRepeat: 'no-repeat',
+                        width: '100%',
+                        height: '70px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }}
+                >
+                    {/* 标题 */}
+                    <div
+                        className={'absolute z-50 text-sm text-center text-[#F2FE03] font-bold leading-tight px-1'}
+                    >
+                        {navigation?.categoryName}
+                    </div>
+                </div>
+            </div>
+            <div className={'rounded-lg py-3 px-2'}>
+                <div className={'grid grid-cols-1 gap-3'}>
+                    {
+                        // 终极文章列表
+                        list.map((item, index) => {
+                            return (
+                                <div
+                                    key={index}
+                                    className={'flex items-center cursor-pointer'}
+                                    style={{
+                                        border: '3px solid #F2FE03',
+                                        backgroundColor: '#C01717',
+                                        color: '#F2FE03',
+                                        borderRadius: '16px',
+                                    }}
+                                    onClick={() => Taro.navigateTo({url: `./detail?id=${item.articleId}`})}
+                                >
+                                    {
+                                        // 图片容器
+                                        item.image && (
+                                            <div className={'w-full m-3 flex justify-center'}
+                                                 style={{
+                                                     width: '108px',
+                                                     height: '160px',
+                                                 }}>
+                                                <img
+                                                    className={'object-cover'}
+                                                    src={item.image}
+                                                    alt={item.title || ''}
+                                                />
+                                            </div>
+                                        )
+                                    }
+                                    {/* 标题 */}
+                                    <div className={'flex flex-col items-start my-3 text-sm leading-tight'} style={{
+                                        color: '#F2FE03'
+                                    }}>
+                                        <p className={'font-bold py-1'}>{item.title}</p>
+                                        <p className={'text-xs line-clamp-6'} style={{
+                                            width: '240px',
+                                            overflow: 'hidden',
+                                        }}>
+                                            {item.comments || '暂无'}
+                                        </p>
+                                    </div>
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}
+export default List