Merge pull request #877 from visuddhinanda/chanpter_progress

章节列表用弹窗

app/Console/Commands/UpgradeDaily.php

@@ -40,18 +40,14 @@ class UpgradeDaily extends Command
     public function handle()
     {
         $start = time();
-        $url = "https://oapi.dingtalk.com/robot/send?access_token=34143dbec80a8fc09c1cb5897a5639ee3a9a32ecfe31835ad29bf7013bdb9fdf";
-        $param = [
-        "markdown"=> [
-            "title"=> "后台任务", 
-            "text"=> " wikipali: 每日统计后台任务开始执行。", 
-        ], 
-        "msgtype"=>"markdown"
-        ];
-        $response = Http::post($url, $param);
-
+		$this->call('message:webhook',[
+			'listener' => 'dingtalk',
+			'url' => 'dingtalk1',
+			'title' => "后台任务",
+			'message' => " wikipali: 每日统计后台任务开始执行。",
+		]);
         # 刷巴利语句子uuid 仅调用一次
-        //$this->call('upgrade:palitextid');
+        $this->call('upgrade:palitextid');
         //巴利原文段落库目录结构改变时运行
         $this->call('upgrade:palitext'); 
         #巴利段落标签
@@ -65,15 +61,13 @@ class UpgradeDaily extends Command
         $this->call('upgrade:wbwanalyses');
 
         $time = time()-$start;
-        $param = [
-        "markdown"=> [
-            "title"=> "后台任务", 
-            "text"=> " wikipali: 每日统计后台任务执行完毕。用时{$time}", 
-        ], 
-        "msgtype"=>"markdown"
-        ];
 
-        $response = Http::post($url, $param);
+		$this->call('message:webhook',[
+			'listener' => 'dingtalk',
+			'url' => 'dingtalk1',
+			'title' => "后台任务",
+			'message' => "wikipali: 每日统计后台任务执行完毕。用时{$time}",
+		]);;
 
         return 0;
     }

app/Console/Commands/WebHook.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+
+class WebHook extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'message:webhook {listener} {url} {title} {message}';
+	protected $url = [
+		"dingtalk1"=>"https://oapi.dingtalk.com/robot/send?access_token=34143dbec80a8fc09c1cb5897a5639ee3a9a32ecfe31835ad29bf7013bdb9fdf",
+		"weixin1"=>"https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=9693cceb-bd2e-40c9-8c0c-3260b2c50aa8",
+	];
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = '发送消息到一个服务器机器人,';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return int
+     */
+    public function handle()
+    {
+		switch ($this->argument('listener')) {
+			case 'weixin':
+				# code...
+				break;
+			case 'dingtalk':
+				# code...
+				$url = $url[$this->argument('url')];
+				$param = [
+				"markdown"=> [
+					"title"=> $this->argument('title'), 
+					"text"=> $this->argument('message'), 
+				], 
+				"msgtype"=>"markdown"
+				];
+				break;				
+			default:
+				# code...
+				break;
+		}
+		$response = Http::post($url, $param);
+        return 0;
+    }
+}

app/Console/Kernel.php

@@ -19,13 +19,8 @@ class Kernel extends ConsoleKernel
         $schedule->timezone('Asia/Shanghai')
                  ->command('upgrade:daily')
                  ->dailyAt('00:00')
-                 ->onSuccess(function () {
-                    // The task succeeded...
-                    
-                  })
-                 ->onFailure(function () {
-                    // The task failed...
-                 });
+                 ->emailOutputTo('kosalla1987@126.com');
+				 //->emailOutputOnFailure()
     }
 
     /**

public/app/palicanon/chapter_channel.js

@@ -29,6 +29,14 @@ function loadChapterChannel(param){
 function render_chapter_progress_list(chapterList,param) {
 	let html = "";
     html += "<ul>";
+	html += "<li >";
+	html += "<span clsss='channel_name' >版本</span>";
+	html += "<span clsss='progress_bar' >进度</span>";
+	html += "<span clsss='views' >阅读</span>";
+	html += "<span clsss='likes' >点赞</span>";
+	html += "<span clsss='updated_at' >更新于</span>";
+	html += "</li>";
+
 	for (const iterator of chapterList) {
         if(iterator.channel){
             if(param.showchannel){
@@ -37,21 +45,21 @@ function render_chapter_progress_list(chapterList,param) {
                 }
             }
             html += "<li>";
-            html += "<span>";
+            html += "<span clsss='channel_name' style='flex:3;'>";
             html += "<a href='../article/?view=chapter&book="+iterator.book+"&par="+iterator.para+"&channel="+iterator.channel.uid+"' target='_blanck'>";
             html += iterator.channel.name;
             html += "</a>";
             html += "</span>";
-            html += "<span>";
-            html += iterator.progress;
+            html += "<span class='progress_bar'>";
+            html += renderProgressBar(iterator.progress);
             html += "</span>";
-            html += "<span>";
+            html += "<span class='views' >";
             html += iterator.views;
             html += "</span>";
-            html += "<span class='likes'>";
-            html += renderChannelLikes(iterator.likes,'progress_chapter',iterator.uid);
+            html += "<span class='likes' >";
+            html += getChapterLikeCount(iterator.likes,'like');
             html += "</span>";
-            html += "<span title='"+iterator.updated_at+"'>";
+            html += "<span class='updated_at' title='"+iterator.updated_at+"' >";
             html += getPassDataTime(new Date(iterator.updated_at));
             html += "</span>";
             html += "</li>";            
@@ -61,7 +69,14 @@ function render_chapter_progress_list(chapterList,param) {
 
 	return html;
 }
-
+function getChapterLikeCount(info,likeType){
+	for (const item of info) {
+		if(item.type==likeType){
+			return item.count;
+		}
+	}
+	return 0;
+}
 function renderChannelLikes(info,restype,resid){
     /*
     点赞 like
@@ -89,4 +104,18 @@ function renderChannelLikes(info,restype,resid){
         html += ">"+count+"</like>";
     }
     return html;
+}
+
+function renderProgressBar(progress){
+	let html = "<svg  xmlns='http://www.w3.org/2000/svg'  xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 25'>";
+	let resulte = Math.round(progress*100);
+	html += "<rect id='frontground' x='0' y='0' width='100' height='25' fill='#cccccc' ></rect>";
+	html += "<text id='bg_text'  x='5' y='21' fill='#006600' style='font-size:25px;'>"+resulte+"%</text>";
+	html += "<rect id='background' x='0' y='0' width='100' height='25' fill='#006600' clip-path='url(#textClipPath)'></rect>";
+	html += "<text id='bg_text'  x='5' y='21' fill='#ffffff' style='font-size:25px;' clip-path='url(#textClipPath)'>"+resulte+"%</text>";
+	html += "<clipPath id='textClipPath'>";
+	html += "    <rect x='0' y='0' width='"+resulte+"' height='25'></rect>";
+	html += "</clipPath>";
+	html += "</svg>";
+	return html;
 }

public/app/palicanon/index.php

@@ -6,8 +6,8 @@ require_once "../pcdl/html_head.php";
     <script src="../palicanon/palicanon.js"></script>
     <script src="../term/term.js"></script>
 
-    <?php
-require_once "../pcdl/head_bar.php";
+<?php
+    require_once "../pcdl/head_bar.php";
 ?>
 
 	<link type="text/css" rel="stylesheet" href="../palicanon/style.css" />
@@ -17,7 +17,7 @@ require_once "../pcdl/head_bar.php";
     <script>
         var tag_level = <?php echo file_get_contents("../public/book_tag/tag_list.json"); ?>;
     </script>
-    <?php
+<?php
 //
 
 require_once "../config.php";
@@ -25,93 +25,308 @@ require_once "../public/_pdo.php";
 require_once '../media/function.php';
 require_once '../public/function.php';
 ?>
-    <div id='course_head_bar' style='background-color:var(--tool-bg-color1);padding:1em 10px 10px 10px;'>
-    <div class='index_inner '>
-    <div style='font-size:140%'>
-    </div>
-    <div id="main_tag"  style="">
-    <span tag="sutta" title="sutta"></span>
-    <span tag="vinaya"  title="vinaya"></span>
-    <span tag="abhidhamma" title="abhidhamma"></span>
-    <span tag="mūla" title="mūla"></span>
-    <span tag="aṭṭhakathā" title="aṭṭhakathā"></span>
-    <span tag="ṭīkā" title="ṭīkā"></span>
-    <span tag="añña" title="añña"></span>
-	</div>
-
-	<div id="select_bar" >
-		<div id="tag_selected"></div>
-		<div>
-			<button onclick="tag_list_slide_toggle(this)">
-				⮝
-			</button>
-		</div>
-	</div>
-	<div>
-
-		<div id="tag_list">
-			<div level="0" class="tag_others"></div>
-			<div level="1" class="tag_others"></div>
-			<div level="2" class="tag_others"></div>
-			<div level="3" class="tag_others"></div>
-			<div level="4" class="tag_others"></div>
-			<div level="5" class="tag_others"></div>
-			<div level="100" class="tag_others"></div>
-			<div level="8" class="tag_others"></div>
-		</div>
-	</div>
-    </div>
+
+<link href="../../node_modules/jquery.fancytree/dist/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css" class="skinswitcher">
+<script src="../tree/jquery.fancytree.js" type="text/javascript"></script>
+
+	<script src="../widget/like.js"></script>
+	<link type="text/css" rel="stylesheet" href="../widget/like.css"/>
+	<script src="../palicanon/chapter_channel.js"></script>
+	<link type="text/css" rel="stylesheet" href="../palicanon/loading.css"/>
+
+    <script src="router.js"></script>
+    <script src="test.js"></script>
+
+<style>
+
+
+</style>
+
+<?php
+    if(isset($_GET["view"])){
+        $_view = $_GET["view"];
+    }else{
+        $_view = "community";
+    }
+?>
+
+<div id='main_view' >
+    <div id='left-bar' >
+        <div id='left-bar-inner'>
+            <div class="filter submenu">
+                <div class="title submenu_title" style="flex;">
+                    <span>分类</span>
+                    <span>
+                        <select id="tag_category_index" onchange="TagCategoryIndexchange(this)"></select>
+                    </span>
+                </div>
+                <div class='inner' style='max-height: unset;'>
+                    <div id='tag-category' ></div>
+                </div>
+            </div>
+            <div class="filter submenu">
+                <div class="title submenu_title"><span>作者</span></div>
+                <div class='inner' id='filter-author' >
+                    <div  class="lds-ellipsis" ><div></div><div></div><div></div><div></div></div>
+                </div>
+            </div>
+        </div>
     </div>
+    <div id='course_head_bar' >
+        <div class='index_inner '>
+            <div style='display:flex;justify-content: space-between;display:none;'>
+                <div> </div>
+                <div style=''>
+                    <select onchange='viewChanged(this)'>
+                        <option value='list'>列表</option>                    
+                        <option value='card'>卡片</option>
+                    </select>
+                </div>
+            </div>
+            <div>
+                <div class='main_menu' id = 'main_menu'>
+
+                </div>
+            </div>
+            <div id="main_tag"  style="display:none;">
+                <span tag="sutta" title="sutta"></span>
+                <span tag="vinaya"  title="vinaya"></span>
+                <span tag="abhidhamma" title="abhidhamma"></span>
+                <span tag="mūla" title="mūla"></span>
+                <span tag="aṭṭhakathā" title="aṭṭhakathā"></span>
+                <span tag="ṭīkā" title="ṭīkā"></span>
+                <span tag="añña" title="añña"></span>
+            </div>
+
+            <div id="select_bar" >
+                <div id="select_bar_home" onclick='categoryGoHome()'>
+                <span>
+                    <svg class='icon' style='fill: var(--box-bg-color1)'>
+                        <use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#house'>
+                    </svg>
+                </span>
+                <span>
+                    <svg class='icon' style='fill: var(--box-bg-color1)'>
+                        <use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#chevron-compact-right'>
+                    </svg>
+                </span>
+                </div>
+                <div id="channel_selected"></div>
+                <div id="tag_selected"></div>
+            </div>
+
+            <div id='palicanon-category'></div>
 
-	<div class='index_inner'>
-
-	<div id="chapter_shell" class="chapter_list" >
-	<div id="list_shell_1" class="show" level="1">
-		<ul id="list-1" class="grid" level="1" >
-		</ul>
-	</div>
-
-	<div id="list_shell_2" level="2">
-		<ul id="list-2" class="hidden" level="2"  >
-		</ul>
-	</div>
-
-	<div id="list_shell_3" level="3">
-		<ul id="list-3" class="hidden" level="3" >
-		</ul>
-	</div>
-
-	<div id="list_shell_4" level="4">
-		<ul id="list-4" class="hidden" level="4" >
-		</ul>
-	</div>
-
-	<div id="list_shell_5" level="5">
-		<ul id="list-5" class="hidden" level="5" >
-		</ul>
-	</div>
-
-	<div id="list_shell_6" level="6">
-		<ul id="list-6" class="hidden" level="6" >
-		</ul>
-	</div>
-
-	<div id="list_shell_7" level="7">
-		<ul id="list-7" class="hidden" level="7" >
-		</ul>
-	</div>
-
-	<div id="list_shell_8" level="8">
-		<ul id="list-8" class="hidden" level="8" >
-		</ul>
-	</div>
+            
+            <div id='filter_bar'>
+                <div id='filter_bar_left'></div>
+                <div id='filter_bar_right'>
+                    <button id='btn-filter' onclick="tag_list_slide_toggle(this)">
+                        <svg class='icon' style='fill: var(--box-bg-color1)'>
+                        <use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#filter'>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <div>
+                <div id="tag_list" style='display:none;'>
+                    <div id="tag_list_head" style="display:flex;justify-content: space-between;border-bottom: 1px solid var(--border-line-color);">
+                        <div style='width:20em;'>
+                            
+                        </div>
+                        <div>
+                            <button id="btn-tag_list_close" onclick='close_tag_list()'>X</button>
+                        </div>
+                    </div>
 
+                    <div id='tag_list_inner'>
+                        <div id='tag_list_tag_div'>
+                            <h2>标签</h2>
+                            <div><input id="tag_input" type="input" placeholder="tag search" size="20"></div>
+                            <div level="0" class="tag_others"></div>
+                            <div level="1" class="tag_others"></div>
+                            <div level="2" class="tag_others"></div>
+                            <div level="3" class="tag_others"></div>
+                            <div level="4" class="tag_others"></div>
+                            <div level="5" class="tag_others"></div>
+                            <div level="100" class="tag_others"></div>
+                            <div level="8" class="tag_others"></div>
+                        </div>
+                        <div id='tag_list_setting_div'>
+                            <h2>设定</h2>
+                            <div class='inner' id='filter-setting' >
+                                <div class='settting-item'>
+                                    <span>语言</span>
+                                    <span>
+                                        <select id='setting_lang'>
+                                            <option value='auto'>自动</option>
+                                            <option value=''>全部</option>
+                                            <option value='zh'>中文</option>
+                                            <option value='en'>英文</option>
+                                        </select>
+                                    </span>
+                                </div>
+                                <div class='settting-item'>
+                                    <span>内容类型</span>
+                                    <span>
+                                        <select id='setting_channel_type'>
+                                            <option value=''>全部</option>
+                                            <option value='translation' selected >译文</option>
+                                            <option value='nissaya'>Nissaya</option>
+                                            <option value='commentray'>注疏</option>
+                                        </select>
+                                    </span>
+                                </div>
+                                <div class='settting-item'>
+                                    <span>完成度</span>
+                                    <span>
+                                        <select id='setting_progress'>
+                                            <option value='0.9'>90</option>
+                                            <option value='0.8'>80</option>
+                                            <option value='0.5'>50</option>
+                                            <option value='0.2'>20</option>
+                                        </select>
+                                    </span>
+                                </div>
+                                <div style='display:flex;justify-content: space-between;'><button>还原默认</button><button onclick="updateSetting()">应用</button></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+			<div id="index_div">
+				<div id='file_background'></div>
+				<div id = "file_list_div">
+					<div id='bread-crumbs'></div>
+					<div class='index_inner'>
+						<div id="chapter_shell" class="chapter_list" >
+							<div id="list_shell_1" class="show" level="1">
+								<ul id="list-1" class="grid" level="1" >
+								</ul>
+							</div>
+
+							<div id="list_shell_2" level="2">
+								<ul id="list-2" class="hidden" level="2"  >
+								</ul>
+							</div>
+
+							<div id="list_shell_3" level="3">
+								<ul id="list-3" class="hidden" level="3" >
+								</ul>
+							</div>
+
+							<div id="list_shell_4" level="4">
+								<ul id="list-4" class="hidden" level="4" >
+								</ul>
+							</div>
+
+							<div id="list_shell_5" level="5">
+								<ul id="list-5" class="hidden" level="5" >
+								</ul>
+							</div>
+
+							<div id="list_shell_6" level="6">
+								<ul id="list-6" class="hidden" level="6" >
+								</ul>
+							</div>
+
+							<div id="list_shell_7" level="7">
+								<ul id="list-7" class="hidden" level="7" >
+								</ul>
+							</div>
+
+							<div id="list_shell_8" level="8">
+								<ul id="list-8" class="hidden" level="8" >
+								</ul>
+							</div>
+
+						</div>
+					</div>
+				</div>
+			</div>
+        </div>
     </div>
+    <div style="flex:2;">
+    <div class='bangdan' id = "user_recent">
+        <div class='title'>最近阅读</div>
+        <div class='list'>
+            <div class="lds-ellipsis" ><div></div><div></div><div></div><div></div></div>
+        </div>
     </div>
+    <div class='bangdan'>
+        <div class='title'>求助</div>
+        <div class='list'>
+            <ul>
+                <li>zuixin-1</li>
+            </ul>
+        </div>
+    </div>
+    <div class='bangdan'>
+        <div class='title'>社区推荐</div>
+        <div class='list'>
+            <ul>
+                <li>zuixin-1</li>
+            </ul>
+        </div>
+    </div>
+    <div class='bangdan' id='contribution'>
+        <div class='title'>月度贡献</div>
+        <div class='list'>
+            <div class="lds-ellipsis" ><div></div><div></div><div></div><div></div></div>
+        </div>
+    </div>
+    </div>
+</div>
+
+
 
     <script>
         $(document).ready(function() {
-            palicanon_onload();
+            
+            let indexFilename = localStorage.getItem('palicanon_tag_category');
+            if(!indexFilename){
+                indexFilename = "defualt";
+            }
+            loadTagCategory(indexFilename);
+            loadTagCategoryIndex();
+            loadFilterSetting();//载入上次的过滤器配置
+            LoadAllLanguage();
+            <?php
+            if(isset($_GET["view"])){
+                echo "_view = '{$_GET["view"]}';";
+            }else{
+                echo "_view = 'community';";
+                echo "updataHistory();";
+            }
+
+            if(isset($_GET["tag"])){
+                echo "_tags = '{$_GET["tag"]}';";
+            }
+            if(isset($_GET["channel"])){
+                echo "_channel = '{$_GET["channel"]}';";
+            }
+            
+            switch ($_view) {
+                case 'community':
+                    //echo "community_onload();";
+                    break;
+                case 'category':
+                    //echo "palicanon_onload();";
+                    break;
+                case 'my';
+                default:
+                    # code...
+                    break;
+            }
+            ?>
+            list_tag = _tags.split(',');
+            refresh_selected_tag();
+            ReanderMainMenu();
+            updateFirstListView();
+            //载入用户最近的阅读列表
+            loadUserRecent();
+            loadContribution();
+            
         });
     </script>
     <?php

public/app/palicanon/index1.php

@@ -55,7 +55,7 @@ require_once '../public/function.php';
         <div id='left-bar-inner'>
             <div class="filter submenu">
                 <div class="title submenu_title" style="flex;">
-                    <span>分类标签</span>
+                    <span>分类</span>
                     <span>
                         <select id="tag_category_index" onchange="TagCategoryIndexchange(this)"></select>
                     </span>
@@ -72,7 +72,7 @@ require_once '../public/function.php';
             </div>
         </div>
     </div>
-    <div id='course_head_bar' style='flex:6;padding:0 10px 10px 10px;'>
+    <div id='course_head_bar' >
         <div class='index_inner '>
             <div style='display:flex;justify-content: space-between;display:none;'>
                 <div> </div>
@@ -117,7 +117,7 @@ require_once '../public/function.php';
 
             <div id='palicanon-category'></div>
 
-            <div id='bread-crumbs'></div>
+            
             <div id='filter_bar'>
                 <div id='filter_bar_left'></div>
                 <div id='filter_bar_right'>
@@ -194,51 +194,56 @@ require_once '../public/function.php';
                     </div>
                 </div>
             </div>
-            <div class='index_inner'>
-                <div id="chapter_shell" class="chapter_list" >
-                    <div id="list_shell_1" class="show" level="1">
-                        <ul id="list-1" class="grid" level="1" >
-                        </ul>
-                        <button>More</button>
-                    </div>
+			<div id="index_div">
+				<div id='file_background'></div>
+				<div id = "file_list_div">
+					<div id='bread-crumbs'></div>
+					<div class='index_inner'>
+						<div id="chapter_shell" class="chapter_list" >
+							<div id="list_shell_1" class="show" level="1">
+								<ul id="list-1" class="grid" level="1" >
+								</ul>
+							</div>
 
-                    <div id="list_shell_2" level="2">
-                        <ul id="list-2" class="hidden" level="2"  >
-                        </ul>
-                    </div>
+							<div id="list_shell_2" level="2">
+								<ul id="list-2" class="hidden" level="2"  >
+								</ul>
+							</div>
 
-                    <div id="list_shell_3" level="3">
-                        <ul id="list-3" class="hidden" level="3" >
-                        </ul>
-                    </div>
+							<div id="list_shell_3" level="3">
+								<ul id="list-3" class="hidden" level="3" >
+								</ul>
+							</div>
 
-                    <div id="list_shell_4" level="4">
-                        <ul id="list-4" class="hidden" level="4" >
-                        </ul>
-                    </div>
+							<div id="list_shell_4" level="4">
+								<ul id="list-4" class="hidden" level="4" >
+								</ul>
+							</div>
 
-                    <div id="list_shell_5" level="5">
-                        <ul id="list-5" class="hidden" level="5" >
-                        </ul>
-                    </div>
+							<div id="list_shell_5" level="5">
+								<ul id="list-5" class="hidden" level="5" >
+								</ul>
+							</div>
 
-                    <div id="list_shell_6" level="6">
-                        <ul id="list-6" class="hidden" level="6" >
-                        </ul>
-                    </div>
+							<div id="list_shell_6" level="6">
+								<ul id="list-6" class="hidden" level="6" >
+								</ul>
+							</div>
 
-                    <div id="list_shell_7" level="7">
-                        <ul id="list-7" class="hidden" level="7" >
-                        </ul>
-                    </div>
+							<div id="list_shell_7" level="7">
+								<ul id="list-7" class="hidden" level="7" >
+								</ul>
+							</div>
 
-                    <div id="list_shell_8" level="8">
-                        <ul id="list-8" class="hidden" level="8" >
-                        </ul>
-                    </div>
+							<div id="list_shell_8" level="8">
+								<ul id="list-8" class="hidden" level="8" >
+								</ul>
+							</div>
 
-                </div>
-            </div>
+						</div>
+					</div>
+				</div>
+			</div>
         </div>
     </div>
     <div style="flex:2;">

public/app/palicanon/palicanon.js

@@ -1,3 +1,4 @@
+
 var _lang = "";
 var _langsetting = "";
 var _channelType = 'translation'
@@ -83,6 +84,7 @@ function loadFilterSetting(){
     _nextPageStart = 0;
 }
 function community_onload() {
+	$("#main_view").addClass("community");
 	$("span[tag]").click(function () {
 		$(this).siblings().removeClass("select");
 		$(this).addClass("select");
@@ -103,6 +105,7 @@ function community_onload() {
 }
 
 function palicanon_onload() {
+	$("#main_view").addClass("category");
 	$("span[tag]").click(function () {
 		$(this).siblings().removeClass("select");
 		$(this).addClass("select");
@@ -116,6 +119,8 @@ function palicanon_onload() {
 		tag_render_others();
 	});
     render_main_tag();
+	LoadAllChannel();
+	LoadAllLanguage();
 }
 
 function palicanon_load_term() {
@@ -182,7 +187,13 @@ function tag_changed() {
             communityGetChapter()
             break;
         case "category":
-            palicanonGetChapter(_tags,lang)
+			if(_tags == ""){
+				updatePalicanonCategoryList();
+				$("#palicanon-category").show();
+				$("#chapter_shell").hide();
+			}else{
+				palicanonGetChapter(_tags,lang);
+			}
             break;
         case "my":
             break;
@@ -297,6 +308,9 @@ function communityLoadChapterTag(strTags="",lang=""){
 }
 
 function palitextGetChapter(strTags=""){
+	if(_tags==""){
+		return;
+	}
     $.getJSON(
 		"/api/v2/palitext?view=chapter",
 		{
@@ -590,6 +604,10 @@ function chapter_onclick(obj) {
 	let type = $(objList).attr("type");
 	let level =  parseInt($(objList).parent().attr("level"));
     let title1 = $(objList).find(".title_1").first().text();
+
+	if(_view == "category" && level==1){
+		$("#index_div").addClass("popup");
+	}
     if(type=='article'){
         window.open("../article/index.php?view=chapter&book="+book+"&par="+para+"&channel="+channel,);
     }else{
@@ -1030,6 +1048,9 @@ function tag_list_slide_toggle(element) {
 	$("#tag_list").slideToggle();
 }
 function chapter_back(parent) {
+	if(_view == "category" && parent==1){
+		$("#index_div").removeClass("popup");
+	}
 	let curr = parseInt(parent) + 1;
 	let prt = parseInt(parent);
 	//隐藏当前的
@@ -1198,13 +1219,26 @@ function TagCategoryIndexchange(obj){
 
 function RenderBreadCrumbs(){
     let html = "";
-    html += '<a onclick="chapter_back(1)">home</a>';
+	html += "<span>";
+    html += '<a onclick="chapter_back(1)" title="'+gLocal.gui.close+'">';
+	html += "<svg class='icon' style='fill: var(--box-bg-color1)'>";
+	html += "<use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#arrow-left-square'>";
+	html += "</svg>" ;	
+	html += '</a>';
+	html += "</span>";
     for (const iterator of gBreadCrumbs) {
         if(iterator.title1){
-            html += " > ";
+			html += "<span>";
+			html += "<svg class='icon' style='fill: var(--box-bg-color1)'>";
+			html += "<use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#chevron-right'>";
+			html += "</svg>" ;
+			html += "</span>";
+
+			html += "<span>";
             html += '<a onclick="chapter_back('+(iterator.level+1)+')">';
             html += iterator.title1;
             html += '</a>';
+			html += "</span>";
         }
     }
 
@@ -1334,4 +1368,5 @@ function loadContribution(){
     .fail(function() {
         console.log( "error" );
     });
-}
+}
+

public/app/palicanon/style.css

@@ -340,7 +340,9 @@ li.level_1.selected {
 }
 #left-bar{
     flex: 2;
+	width: 300px;
     background-color: var(--box-bg-color2);
+	position: fixed;
 }
 
 .chapter_list ul li .main{
@@ -387,8 +389,8 @@ li.level_1.selected {
     margin-right:1em;
 }
 .filter>.inner {
-    max-height: 200px;
-    overflow-y: auto;
+    /*max-height: 200px;*/
+    /*overflow-y: auto;*/
     background-color: var(--input-bg-color);
 }
 
@@ -528,4 +530,101 @@ span.channel {
 }
 #select_bar_home{
     display:none;
+}
+
+#left-bar-inner {
+    height: calc(100vh - 50px);
+    overflow-y: scroll;
+}
+#palicanon-category{
+    display:block;
+}
+
+.community #palicanon-category{
+    display:none;
+}
+
+#palicanon-category>.chapter_list {
+    flex-direction: column;
+}
+
+#palicanon-category li{
+    display: flex;
+    padding: 5px 0;
+    border-bottom: 1px solid var(--border-line-color);
+}
+
+#palicanon-category .chapter_list .title .title_1 {
+    width: unset;
+}
+#palicanon-category .chapter_list .title{
+    width: -webkit-fill-available;
+    padding-left: 12px;
+}
+
+#course_head_bar{
+	flex:6;
+	padding:0 10px 10px 315px;
+}
+
+#bread-crumbs{
+	display: none;
+}
+.popup {
+    color: var(--tool-bt-color);
+}
+.popup #bread-crumbs{
+	display: block;
+}
+.popup #file_background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0,0,0,0.85);
+	z-index: 200;
+}
+.popup #file_list_div {
+    position: fixed;
+    top: 4em;
+	z-index: 210;
+}
+.popup #index_inner {
+    height: calc(100vh - 4em);
+    overflow-y: auto;
+}
+.popup  .index_inner {
+    height: calc(100vh - 5em);
+    overflow-y: auto;
+}
+header {
+	z-index: 100;
+}
+
+#bread-crumbs>span{
+	padding: 0 4px;
+}
+
+.progress_bar>svg{
+	width:80px;
+}
+
+#chapter_progress li{
+	display:flex;
+}
+#chapter_progress li .channel_name{
+	flex:3;
+}
+#chapter_progress li .progress_bar{
+	flex:3;
+}
+#chapter_progress li .views{
+	flex:1;
+}
+#chapter_progress li .likes{
+	flex:1;
+}
+#chapter_progress li>.updated_at{
+	flex:3;
 }

public/app/palicanon/style_mobile.css

@@ -74,4 +74,7 @@
 #palicanon-category .chapter_list .title{
     width: -webkit-fill-available;
     padding-left: 12px;
-}
+}
+#course_head_bar{
+	padding:0 10px 10px 15px;
+}

public/app/pcdl/css/style.css

@@ -101,8 +101,8 @@ h3 {
 }
 
 ::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
+	/*width: 8px;*/
+	/*height: 8px;*/
 	/*display: none;*/
 }