feat: Nas专题帮助中心

app/index/common.php

@@ -98,3 +98,21 @@ if (!function_exists('thumb')) {
         return mb_substr($url, 0, $idx, 'utf-8') . '_thumb' . mb_substr($url, $idx, $len - $idx, 'utf-8');
     }
 }
+
+if (!function_exists('get_path_from_img_tag'))
+{
+    /**
+     * 从img标签中获取图片路径
+     * @param string $img
+     * @return string
+     */
+    function get_path_from_img_tag(string $img): string
+    {
+        $match = preg_match('/<img[^>]+src=[\'"](.*?)[\'"][^>]+>/i', rawurldecode($img), $matches);
+        if ($match) {
+            return $matches[1];
+        }
+
+        return '';
+    }
+}

app/index/controller/TopicNas.php

@@ -3,6 +3,8 @@ declare (strict_types = 1);
 
 namespace app\index\controller;
 
+use app\index\model\ArticleCategoryModel;
+use app\index\model\ArticleModel;
 use app\index\model\SysBannerModel;
 use think\facade\View;
 
@@ -175,6 +177,41 @@ class TopicNas extends Common
      */
     public function help()
     {
+        // 获取文章分类及文章数据
+        $parent = ArticleCategoryModel::uniqueLabel('CATEGORY_681182e0a4529')->language($this->lang_id)->value('id');
+        $article_categorys = ArticleCategoryModel::with(['article' => function($query) {
+                $query->field(['id', 'title', 'category_id'])->limit(3);
+            }])
+            ->field([
+                'id',
+                'name',
+                'icon'
+            ])
+            ->language($this->lang_id)
+            ->parent($parent)
+            ->isShow(true)
+            ->select();
+        View::assign('article_categorys', $article_categorys);
+
+        $contacts = [];
+        // 获取banner数据
+        $banners = SysBannerModel::with(['items' => function ($query) {
+                $query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at']);
+            }])
+            ->uniqueLabel(['BANNER_6819754be2dc6'])
+            ->language($this->lang_id)
+            ->enabled(true)
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select();
+        if (!$banners->isEmpty()) {
+            $banners_map = [];
+            foreach ($banners as $banner) {
+                $banners_map[$banner->unique_label] = $banner;
+            }
+            $contacts = data_get($banners_map, 'BANNER_6819754be2dc6')?->items->toArray();
+        }
+        View::assign('contacts', $contacts);
+
         return View::fetch('help');
     }
 
@@ -183,9 +220,49 @@ class TopicNas extends Common
      */
     public function helpDetail()
     {
+        $id = request()->get('id');
+        // 获取文章详情
+        $article = ArticleModel::bypk($id)->find();
+        View::assign('article', $article);
+
+        // 获取文章分类及文章数据
+        $parent = ArticleCategoryModel::uniqueLabel('CATEGORY_681182e0a4529')->value('id');
+        $article_categorys = ArticleCategoryModel::with(['article' => function ($query) {
+                $query->field(['id', 'title', 'category_id']);
+            }])
+            ->field([
+                'id',
+                'name',
+                'icon'
+            ])
+            ->language($this->lang_id)
+            ->parent($parent)
+            ->isShow(true)
+            ->select();
+        View::assign('article_categorys', $article_categorys);
 
         return View::fetch('help_detail');
     }
+
+    /**
+     * 专题-Nas帮助中心搜索
+     */
+    public function helpSearch()
+    {
+        $keywords = request()->post('keywords');
+        // 根据关键词查询文章
+        $articles = ArticleModel::field([
+                'id',
+                'title'
+            ])
+            ->withSearch(['title'], [
+                'title' => $keywords??null
+            ])
+            ->language($this->lang_id)
+            ->select();
+
+        return success('success', $articles->toArray());
+    }
     
     /**
      * 专题-Nas软件下载页

app/index/lang/en-us.php

@@ -210,5 +210,13 @@ return [
     'topic_nas_download' => [
         'cyber_tab_title'  => 'CyberData',
         'weline_tab_title' => 'Weline'
+    ],
+    'topic_nas_help' => [
+        'module_title'             => 'Quick Start Guide',
+        'search_input_placeholder' => 'What are you looking for?',
+        'article_section_title'    => 'User\' s Guide',
+        'contact_section_title'    => 'Contact US',
+        'view_more'                => 'Click to view more',
+        'content'                  => 'Content'
     ]
 ];

app/index/lang/zh-cn.php

@@ -210,5 +210,13 @@ return [
     'topic_nas_download' => [
         'cyber_tab_title'  => 'CyberData赛博云空间',
         'weline_tab_title' => 'Weline微链接'
+    ],
+    'topic_nas_help' => [
+        'module_title'             => '帮助中心',
+        'search_input_placeholder' => '请输入搜索关键字,如安装赛博云空间,影视库',
+        'article_section_title'    => '使用教程',
+        'contact_section_title'    => '联系我们',
+        'view_more'                => '查看更多',
+        'content'                  => '目录'
     ]
 ];

app/index/model/ArticleCategoryModel.php

@@ -29,6 +29,16 @@ class ArticleCategoryModel extends ArticleCategoryBaseModel
         $query->where('language_id', '=', $language);
     }
 
+    // 所属唯一标识范围查询
+    public function scopeUniqueLabel($query, $unique_label)
+    {
+        if (is_array($unique_label)) {
+            $query->where('unique_label', 'IN', $unique_label);
+            return;
+        }
+        $query->where('unique_label', '=', $unique_label);
+    }
+
     // 所属上级分类范围查询
     public function scopeParent($query, $parent)
     {

app/index/route/route.php

@@ -96,6 +96,10 @@ Route::group('topic', function() {
         Route::get('cooperation', 'TopicNas/cooperation');
         // 专题-Nas帮助中心页
         Route::get('help', 'TopicNas/help');
+        // 专题-Nas帮助中心详情页
+        Route::get('help_detail', 'TopicNas/helpDetail');
+        // 专题-Nas帮助中心搜索
+        Route::post('help_search', 'TopicNas/helpSearch');
         // 专题-Nas软件下载页
         Route::get('download', 'TopicNas/download');
     });

app/index/view/topic_nas/help.html

@@ -0,0 +1,141 @@
+{extend name="public/nas_base" /}
+{block name="style"}
+<link rel="stylesheet" href="__CSS__/topic_nas_help.css"/>
+{/block}
+{block name="main"}
+<div class="orico_Page_index">
+    <!-- 帮助中心 -->
+    <div class="narshelpCenterPc">
+        <!-- banner-搜索 -->
+        <div class="pagetopbg">
+            <img src="__IMAGES__/nas_help_banner.jpg" class="hpbgimg" />
+            <div class='nhlp-search'>
+                <input class="nhlp-ipt" id="search-input" placeholder="{:lang('topic_nas_help.search_input_placeholder')}" autocomplete="off" />
+                <img src="__IMAGES__/nas_help_search.png" class="searchimg" />
+            </div>
+            <!-- 下拉搜索框 -->
+            <div class="dropdown" id="dropdown">
+                <ul>
+                    <li>拿到产品后我该如何安装使用?</li>
+                </ul>
+            </div>
+        </div>
+        <!-- 使用教程 -->
+        {notempty name="article_categorys"}
+        <div class="nhlppart1">
+            <h1 class="helph1">{:lang('topic_nas_help.article_section_title')}</h1>
+            <div class="nhlp-row">
+                {volist name="article_categorys" id="vo" key="idx"}
+                <div class="nhlpit {gt name='idx' value='6'}nhlpit-w{/gt}">
+                    <div class="nhlptl">
+                        <img src="{$vo.icon}" class="bhlpicoimg" />{$vo.name}
+                    </div>
+                    <div class="nhlp-tx-list">
+                        {volist name="vo.article" id="va" key="index"}
+                        <a class="txrow" href="{:url('/index/topic/nas/help_detail', ['id' => $va.id])}">
+                            <div class="nhlp-point"></div>
+                            <span class="nhlpsp">{$va.title}</span>
+                            <span class="narhelpgoimg">
+                                <img src="__IMAGES__/nas-jt.png" />
+                            </span>
+                        </a>
+                        {egt name="index" value="3"}
+                        <div class="ckgdbt">{:lang('topic_nas_help.view_more')} ></div>
+                        {/egt}
+                        {/volist}
+                    </div>
+                </div>
+                {/volist}
+            </div>
+        </div>
+        {/notempty}
+        <!-- 联系我们 -->
+        {notempty name="contacts"}
+        <div class="nhlp-lxwm">
+            <h1 class="lxwmtitle">{:lang('topic_nas_help.contact_section_title')}</h1>
+            <div class="nhlp-row">
+                {volist name="contacts" id="co" key="idx" offset="0" length="3"}
+                <a class="nhlplxwmit nhlplxwmit-w1" {notempty name="co.link"}href="{$co.link}"{/notempty} {eq name="idx" value="3"}style="margin-right: 0;"{/eq}>
+                    <img src="{$co.image}" class="lximg" />
+                    {if condition="!empty($co.desc) && str_contains($co.desc, '<img')"}
+                    <img src="{:get_path_from_img_tag($co.desc)}" class="lxewmimg">
+                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
+                    {else/}
+                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
+                    <span class="t2" {:style(['color'=>$co.desc_txt_color])}>{$co.desc|raw}</span>
+                    {/if}
+                </a>
+                {/volist}
+                {volist name="contacts" id="co" key="idx" offset="3"}
+                <a class="nhlplxwmit nhlplxwmit-w2" {notempty name="co.link"}href="{$co.link}"{/notempty} {eq name="idx%4" value="0"}style="margin-right: 0;"{/eq}>
+                    <img src="{$co.image}" class="lximg" />
+                    {if condition="!empty($co.desc) && str_contains($co.desc, '<img')"}
+                    <img src="{:get_path_from_img_tag($co.desc)}" class="lxewmimg">
+                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
+                    {else/}
+                    <span class="t1" {:style(['color'=>$co.title_txt_color])}>{$co.title}</span>
+                    <span class="t2" {:style(['color'=>$co.desc_txt_color])}>{$co.desc|raw}</span>
+                    {/if}
+                </a>
+                {/volist}
+            </div>
+        </div>
+        {/notempty}
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    $(document).ready(function () {
+        $(document).ready(function () {
+            // 监听输入框内容变化
+            var timeout = null;
+            $('#search-input').on('focus input', function () {
+                clearTimeout(timeout);
+                var _this = this;
+                timeout = setTimeout(function () {
+                    var keywords = $(_this).val();
+                    if (keywords == '') {
+                        $('#dropdown').hide().html('');
+                        return;
+                    }
+                    $.ajax({
+                        url: "{:url('/index/topic/nas/help_search')}",
+                        type: 'POST',
+                        data: {
+                            keywords: keywords
+                        },
+                        dataType: 'JSON',
+                        success: function (r) {
+                            var html = '';
+                            if (r.code == 0) {
+                                html = '<ul>'
+                                $.each(r.data, function (k, v) {
+                                    html += '<li><a href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
+                                })
+                                html += '</ul>'
+                            }
+                            $('#dropdown').show().html(html);
+                        }
+                    })
+                }, 300);
+            })
+            $(document).on('click', function (e) {
+                var target = $(e.target);
+                if (!target.closest('.nhlp-search').length) {
+                    $('#dropdown').hide();
+                }
+            });
+            $('.nhlplxwmit:not(:first)').hover(function () {
+                // 当鼠标移入时，显示.lxewmimg 并隐藏.lximg
+                $(this).find('.lxewmimg').show();
+                $(this).find('.lximg').hide();
+            }, function () {
+                // 当鼠标移出时，隐藏.lxewmimg 并显示.lximg
+                $(this).find('.lxewmimg').hide();
+                $(this).find('.lximg').show();
+            });
+        });
+    })
+</script>
+{/block}

app/index/view/topic_nas/help_detail.html

@@ -0,0 +1,130 @@
+{extend name="public/nas_base" /}
+{block name="title"}
+    {notempty name="article.seo_title"}<title>{$article.seo_title}</title>{else /}{__BLOCK__}{/notempty}
+{/block}
+{block name="seo"}
+    {notempty name="article.seo_keywords"}
+    <meta name="keywords" content="{$article.seo_keywords}" />
+    <meta name="description" content="{$article.seo_desc}" />
+    {else /}
+    {__BLOCK__}
+    {/notempty}
+{/block}
+{block name="style"}
+<link rel="stylesheet" href="__CSS__/topic_nas_help-detail.css"/>
+{/block}
+{block name="main"}
+<div class="orico_Page_index">
+    <div class="narshelpdetailPc">
+        <!-- top 搜索-->
+        <div class="narsssmain">
+            <div class="ml">{:lang('topic_nas_help.module_title')}/{:lang('topic_nas_help.article_section_title')}</div>
+            <div class="nars-hlp-search">
+                <input id="search-input" placeholder="{:lang('topic_nas_help.search_input_placeholder')}" autocomplete="off" />
+                <img src="__IMAGES__/nas_help_detail_search.png" class="ssimg">
+            </div>
+            <!-- 下拉搜索框 -->
+            <div class="dropdown" id="dropdown"></div>
+        </div>
+        <!-- 目录-文章详情-锚点定位--->
+        <div class="nars-help-content">
+            <!--目录 -->
+            <div class="nars-hlpdt-ml">
+                {notempty name="article_categorys"}
+                <div class="nav-tree">
+                    {volist name="article_categorys" id="ac"}
+                    <div class="category">
+                        <div class="category-title">
+                            <div class="arrow"><img src="__IMAGES__/nas-jt.png" class="arrow" /></div>
+                            <span>{$ac.name}</span>
+                        </div>
+                        <ul class="sub-list">
+                            {volist name="ac.article" id="ar"}
+                            <li><a href="{:url('/index/topic/nas/help_detail', ['id' => $ar.id])}" style="padding-top: 6px;">{$ar.title}</a></li>
+                            {/volist}
+                        </ul>
+                    </div>
+                    {/volist}
+                </div>
+                {/notempty}
+            </div>
+            <!--文章详情 -->
+            <div class="nars-hlpdt-mm" id="rendered-content">{$article.content|raw|default=''}</div>
+            <!--锚点定位 -->
+            <div class="nars-hlpdt-mr">
+                <div id="title-list">
+                    <h2 class="tt">{:lang('topic_nas_help.content')}</h2>
+                    <ul></ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    $(document).ready(function () {
+        $('.category-title').click(function () {
+            $(this).next('.sub-list').slideToggle();
+            $(this).find('.arrow').toggleClass('rotate');
+        });
+        // 搜索
+        $(document).on('click', function (e) {
+            var target = $(e.target);
+            if (!target.closest('.nhlp-search').length) {
+                $('#dropdown').hide();
+            }
+        });
+        var timeout = null;
+        $('.nars-hlp-search input').on('focus input', function () {
+            clearTimeout(timeout);
+            var _this = this;
+            timeout = setTimeout(function () {
+                var keywords = $(_this).val();
+                if (keywords == '') {
+                    $('#dropdown').hide().html('');
+                    return;
+                }
+                $.ajax({
+                    url: "{:url('/index/topic/nas/help_search')}",
+                    type: 'POST',
+                    data: {
+                        keywords: keywords
+                    },
+                    dataType: 'JSON',
+                    success: function (r) {
+                        var html = '';
+                        if (r.code == 0) {
+                            html = '<ul>'
+                            $.each(r.data, function (k, v) {
+                                html +=
+                                    '<li><a href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
+                            })
+                            html += '</ul>'
+                        }
+                        $('#dropdown').show().html(html);
+                    }
+                })
+            }, 300);
+        })
+        // 内容
+        // 清空标题列表
+        $("#title-list ul").empty();
+        // 提取 h1 标题
+        var h1Titles = $("#rendered-content").find("h3");
+        h1Titles.each(function (index) {
+            var title = $(this);
+            var titleText = title.text();
+            var titleId = "title-" + index;
+            title.attr("id", titleId);
+            var listItem = $("<li>");
+            var link = $("<a>", {
+                href: "#" + titleId,
+                text: titleText
+            });
+            listItem.append(link);
+            $("#title-list ul").append(listItem);
+        });
+    });
+</script>
+{/block}