Merge pull request #876 from visuddhinanda/chanpter_progress

优化手机端用户体验

app/Http/Controllers/SentenceInfoController.php

@@ -124,6 +124,7 @@ class SentenceInfoController extends Controller
                             ->where('paragraph','<=',$to)
                             ->sum('length');            
             $para_strlen = 0;
+            
             foreach ($sentFinished as $sent) {
                 # code...
                 if($request->get('cache')=="1"){
@@ -157,8 +158,8 @@ class SentenceInfoController extends Controller
                     $resulte = $strlen / $pageStrLen;
                 }
                 break;
-            case 'percent':
-                $resulte = $percent;
+            case 'percent': //百分比
+                $resulte = sprintf('%.2f',$percent);
                 break;
             case 'strlen':
             default:
@@ -176,23 +177,35 @@ class SentenceInfoController extends Controller
      *
      * @param  \App\Models\Sentence  $sentence
      * @return \Illuminate\Http\Response
-     * http://127.0.0.1:8000/api/sentence/progress/image?channel=00ae2c48-c204-4082-ae79-79ba2740d506&&book=168&from=916&to=926&view=page
+     * http://127.0.0.1:8000/api/sentence/progress/image?channel=00ae2c48-c204-4082-ae79-79ba2740d506&&book=168&from=916&to=926&view=percent
      */
     public function showprogress(Request $request)
     {
-        ob_clean();
-        ob_start();
         $resulte = $this->getSentProgress($request);
-        $img = imagecreate(strlen($resulte)*10,22) or die('create image fail ');
-        imagecolorallocate($img,255,255,255);
-        $color = imagecolorallocate($img,0,0,0);
-        imagestring($img,5,0,0,$resulte,$color);
-        imagegif($img);
-        imagedestroy($img);
+        $svg = "<svg  xmlns='http://www.w3.org/2000/svg'  xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 25'>";
 
-        $content = ob_get_clean();
-        return response($content,200,[
-            'Content-Type'=>'image/gif'
+        switch ($request->get('view')) {
+            case 'percent':
+                # code...
+                $resulte = $resulte*100;
+                $svg .= "<rect id='frontground' x='0' y='0' width='100' height='25' fill='#cccccc' ></rect>";
+                $svg .= "<text id='bg_text'  x='5' y='21' fill='#006600' style='font-size:25px;'>$resulte%</text>";
+                $svg .= "<rect id='background' x='0' y='0' width='100' height='25' fill='#006600' clip-path='url(#textClipPath)'></rect>";
+                $svg .= "<text id='bg_text'  x='5' y='21' fill='#ffffff' style='font-size:25px;' clip-path='url(#textClipPath)'>$resulte%</text>";
+                $svg .= "<clipPath id='textClipPath'>";
+                $svg .= "    <rect x='0' y='0' width='$resulte' height='25'></rect>";
+                $svg .= "</clipPath>";
+                break;
+            case 'strlen':
+            case 'page':
+            default:
+                $svg .= "<text id='bg_text'  x='5' y='21' fill='#006600' style='font-size:25px;'>$resulte</text>";
+                break;
+        }
+        $svg .= "</svg>";
+
+        return response($svg,200,[
+            'Content-Type'=>'image/svg+xml'
         ]);
     }
 

public/app/palicanon/category/cscd.json

@@ -4,11 +4,11 @@
         "tag":["mūla"],
         "children":[
             {
-                "name":"sutta piṭaka",
+                "name":"Sutta Piṭaka",
                 "tag":["mūla","sutta"],
                 "children":[
                     {
-                        "name":"dīghanikāya",
+                        "name":"Dīghanikāya",
                         "tag":["mūla","sutta","dīghanikāya"],
                         "children":[
                             {
@@ -44,7 +44,7 @@
                         ]
                     },
                     {
-                        "name":"saṃyuttanikāya",
+                        "name":"Saṃyuttanikāya",
                         "tag":["mūla","sutta","saṃyuttanikāya"],
                         "children":[
                             {
@@ -70,7 +70,7 @@
                         ]
                     },
                     {
-                        "name":"aṅguttaranikāya",
+                        "name":"Aṅguttaranikāya",
                         "tag":["mūla","sutta","aṅguttaranikāya"],
                         "children":[
                             {
@@ -120,7 +120,7 @@
                         ]
                     },
                     {
-                        "name":"khuddakanikāya",
+                        "name":"Khuddakanikāya",
                         "tag":["mūla","sutta","khuddakanikāya"],
                         "children":[
                             {
@@ -200,7 +200,7 @@
                 ]
             },
             {
-                "name":"vinaya piṭaka",
+                "name":"Vinaya Piṭaka",
                 "tag":["mūla","vinaya"],
                 "children":[
                     {
@@ -226,7 +226,7 @@
                 ]
             },
             {
-                "name":"abhidhamma piṭaka",
+                "name":"Abhidhamma Piṭaka",
                 "tag":["mūla","abhidhamma"],
                 "children":[
                     {

public/app/palicanon/category/defualt.json

@@ -1,6 +1,6 @@
 [
            {
-                "name":"sutta",
+                "name":"Sutta Piṭaka",
                 "tag":["sutta"],
                 "children":[
                     {
@@ -196,7 +196,7 @@
                 ]
             },
             {
-                "name":"vinaya piṭaka",
+                "name":"Vinaya Piṭaka",
                 "tag":["vinaya"],
                 "children":[
                     {
@@ -222,37 +222,369 @@
                 ]
             },
             {
-                "name":"abhidhamma piṭaka",
+                "name":"Abhidhamma Piṭaka",
                 "tag":["abhidhamma"],
                 "children":[
                     {
-                        "name":"dhammasaṅgaṇī",
+                        "name":"Dhammasaṅgaṇī",
                         "tag":["abhidhamma","dhammasaṅgaṇī"]
                     },
                     {
-                        "name":"vibhaṅga",
+                        "name":"Vibhaṅga",
                         "tag":["abhidhamma","vibhaṅga"]
                     },
                     {
-                        "name":"dhātukathā",
+                        "name":"Dhātukathā",
                         "tag":["abhidhamma","dhātukathā"]
                     },
                                 {
-                        "name":"puggalapaññatti",
+                        "name":"Puggalapaññatti",
                         "tag":["abhidhamma","puggalapaññatti"]
                     },
                                 {
-                        "name":"kathāvatthu",
+                        "name":"Kathāvatthu",
                         "tag":["abhidhamma","kathāvatthu"]
                     },
                     {
-                        "name":"yamaka",
+                        "name":"Yamaka",
                         "tag":["abhidhamma","yamaka"]
                     },
                     {
-                        "name":"paṭṭhāna",
+                        "name":"Paṭṭhāna",
                         "tag":["abhidhamma","paṭṭhāna"]
                     }
                 ]
+            },
+    {
+        "name":"Añña",
+        "tag":["añña"],
+        "children":[
+            {
+                "name":"Visuddhimagga",
+                "tag":["añña","visuddhimagga"],
+                "children":[
+                    {
+                        "name":"Visuddhimagga-1",
+                        "tag":["añña","visuddhimagga","aṭṭhakathā","paṭhamo bhāgo"]
+                    },
+                    {
+                        "name":"Visuddhimagga-2",
+                        "tag":["añña","visuddhimagga","aṭṭhakathā","dutiyo bhāgo"]
+                    },
+                    {
+                        "name":"Visuddhimagga-mahāṭīkā-1",
+                        "tag":["añña","visuddhimagga","ṭīkā","paṭhamo bhāgo"]
+                    },
+                    {
+                        "name":"Visuddhimagga-mahāṭīkā-2",
+                        "tag":["añña","visuddhimagga","ṭīkā","dutiyo bhāgo"]
+                    },
+                    {
+                        "name":"Visuddhimagga-nidānakathā",
+                        "tag":["añña","visuddhimagga","nidānakathā"]
+                    }
+                ]
+            },
+            {
+                "name":"Saṃgāyanassa-Pucchā Vissajjanā",
+                "tag":["añña","saṃgāyanassa pucchā vissajjanā"],
+                "children":[
+                    {
+                        "name":"Dīghanikāya(Pu-Vi)",
+                        "tag":["añña","saṃgāyanassa pucchā vissajjanā","dīghanikāya"]
+                    },
+                    {
+                        "name":"Majjhimanikāya(Pu-Vi)",
+                        "tag":["añña","saṃgāyanassa pucchā vissajjanā","majjhimanikāya"]
+                    },
+                    {
+                        "name":"Saṃyuttanikāya(Pu-Vi)",
+                        "tag":["añña","saṃgāyanassa pucchā vissajjanā","saṃyuttanikāya"]
+                    },
+                    {
+                        "name":"Aṅguttaranikāya(Pu-Vi)",
+                        "tag":["añña","saṃgāyanassa pucchā vissajjanā","aṅguttaranikāya"]
+                    },
+                    {
+                        "name":"Vinayapiṭaka(Pu-Vi)",
+                        "tag":["añña","saṃgāyanassa pucchā vissajjanā","vinayapiṭaka"]
+                    },
+                    {
+                        "name":"Abhidhammapiṭaka(Pu-Vi)",
+                        "tag":["añña","saṃgāyanassa pucchā vissajjanā","abhidhammapiṭaka"]
+                    },
+                    {
+                        "name":"Aṭṭhakathā(Pu-Vi)",
+                        "tag":["añña","saṃgāyanassa pucchā vissajjanā","aṭṭhakathā"]
+                    }
+                ]
+            },
+            {
+                "name":"Leḍī Sayādo Gantha-Saṅgaho",
+                "tag":["añña","leḍī sayādo"],
+                "children":[
+                    {
+                        "name":"Niruttidīpanīpāṭha",
+                        "tag":["añña","leḍī sayādo","niruttidīpanīpāṭha"]
+                    },
+                    {
+                        "name":"Paramatthadīpanī",
+                        "tag":["añña","leḍī sayādo","paramatthadīpanī"]
+                    },
+                    {
+                        "name":"Anudīpanīpāṭha",
+                        "tag":["añña","leḍī sayādo","anudīpanīpāṭha"]
+                    },
+                    {
+                        "name":"Paṭṭhānuddesa dīpanīpāṭha",
+                        "tag":["añña","leḍī sayādo","paṭṭhānuddesa dīpanīpāṭha"]
+                    }
+                ]
+            },
+            {
+                "name":"Buddha-Vandana Gantha-Saṅgaho",
+                "tag":["añña","buddha-vandana"],
+                "children":[
+                    {
+                        "name":"Namakkāratīkā",
+                        "tag":["añña","buddha-vandana","namakkāra"]
+                    },
+                    {
+                        "name":"Mahāpaṇāmapāṭha",
+                        "tag":["añña","buddha-vandana","mahāpaṇāmapāṭha"]
+                    },
+                    {
+                        "name":"Lakkhaṇāto Buddhathomanāgāthā",
+                        "tag":["añña","buddha-vandana","lakkhaṇāto"]
+                    },
+                    {
+                        "name":"Suttavandanā",
+                        "tag":["añña","buddha-vandana","suttavandanā"]
+                    },
+                    {
+                        "name":"Jinālaṅkāra",
+                        "tag":["añña","buddha-vandana","jinālaṅkāra"]
+                    },
+                    {
+                        "name":"Kamalāñjali",
+                        "tag":["añña","buddha-vandana","kamalāñjali"]
+                    },
+                    {
+                        "name":"Pajjamadhu",
+                        "tag":["añña","buddha-vandana","pajjamadhu"]
+                    },
+                    {
+                        "name":"Buddhaguṇagāthāvalī",
+                        "tag":["añña","buddha-vandana","buddhaguṇagāthāvalī"]
+                    }
+                ]
+            },
+            {
+                "name":"Vaṃsa Gantha-Saṅgaho",
+                "tag":["añña","vaṃsa"],
+                "children":[
+                    {
+                        "name":"Cūḷaganthavaṃsa",
+                        "tag":["añña","vaṃsa","Cūḷaganthavaṃsapāḷi"]
+                    },
+                    {
+                        "name":"sāsanavaṃsa",
+                        "tag":["añña","vaṃsa","sāsanavaṃsappadīpikā"]
+                    },
+                    {
+                        "name":"Mahāvaṃsa",
+                        "tag":["añña","vaṃsa","mahāvaṃsapāḷi"]
+                    }
+                ]
+            },
+            {
+                "name":"Byākaraṇa Gantha-Saṅgaho",
+                "tag":["añña","byākaraṇa ganthasaṅgaha"],
+                "children":[
+                    {
+                        "name":"Moggallānabyākaraṇa",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","moggallānasuttapāṭha"]
+                    },
+                    {
+                        "name":"Kaccāyanabyākaraṇaṃ",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","kaccāyanabyākaraṇa"]
+                    },
+                    {
+                        "name":"Saddanītippakaraṇaṃ (padamālā)",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","padamālā"]
+                    },
+                    {
+                        "name":"Saddanītippakaraṇaṃ (Dhātumālā)",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","dhātumālā"]
+                    },
+                    {
+                        "name":"Padarūpasiddhi",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","padarūpasiddhi"]
+                    },
+                    {
+                        "name":"Moggallānapañcikā",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","moggallānapañcikā"]
+                    },
+                    {
+                        "name":"Payogasiddhipāṭha",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","payogasiddhipāḷi"]
+                    },
+                    {
+                        "name":"Vuttodayapāṭha",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","vuttodaya"]
+                    },
+                    {
+                        "name":"Abhidhānappadīpikāpāṭha",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","abhidhānappadīpikā"]
+                    },
+                    {
+                        "name":"Abhidhānappadīpikāṭīkā",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","abhidhānappadīpikāṭīkā"]
+                    },
+                    {
+                        "name":"Subodhālaṅkārapāṭha",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","subodhālaṅkāra"]
+                    },
+                    {
+                        "name":"Subodhālaṅkāraṭīkā",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","subodhālaṅkāraṭīkā"]
+                    },
+                    {
+                        "name":"Bālāvatāra",
+                        "tag":["añña","byākaraṇa ganthasaṅgaha","bālāvatāra"]
+                    }
+                ]
+            },
+            {
+                "name":"Nīti-Gantha-Saṅgaho",
+                "tag":["añña","nīti"],
+                "children":[
+                    {
+                        "name":"Kavidappaṇanīti",
+                        "tag":["añña","nīti","kavidappaṇanīti"]
+                    },
+                    {
+                        "name":"Nītimañjarī",
+                        "tag":["añña","nīti","nītimañjarī"]
+                    },
+                    {
+                        "name":"Dhammanīti",
+                        "tag":["añña","nīti","dhammanīti"]
+                    },
+                    {
+                        "name":"Mahārahanīti",
+                        "tag":["añña","nīti","mahārahanīti"]
+                    },
+                    {
+                        "name":"Lokanīti",
+                        "tag":["añña","nīti","lokanīti"]
+                    },
+                    {
+                        "name":"Suttantanīti",
+                        "tag":["añña","nīti","suttantanīti"]
+                    },
+                    {
+                        "name":"Sūrassatīnīti",
+                        "tag":["añña","nīti","sūrassatīnīti"]
+                    },
+                    {
+                        "name":"Cāṇakyanītipāḷi",
+                        "tag":["añña","nīti","cāṇakyanītipāḷi"]
+                    },
+                    {
+                        "name":"Naradakkhadīpanī",
+                        "tag":["añña","nīti","naradakkhadīpanī"]
+                    },
+                    {
+                        "name":"Caturārakkhadīpanī",
+                        "tag":["añña","nīti","caturārakkhadīpanī"]
+                    }
+                ]
+            },
+            {
+                "name":"Pakiṇṇaka-Gantha-Saṅgaho",
+                "tag":["añña","pakiṇṇaka"],
+                "children":[
+                    {
+                        "name":"Rasavāhinī",
+                        "tag":["añña","pakiṇṇaka","rasavāhinī"]
+                    },
+                    {
+                        "name":"Sīmavisodhanī",
+                        "tag":["añña","pakiṇṇaka","sīmavisodhanī"]
+                    },
+                    {
+                        "name":"Vessantarāgīti",
+                        "tag":["añña","pakiṇṇaka","vessantarāgīti"]
+                    }
+                ]
+            },
+            {
+                "name":"Sihaḷa-Gantha-Saṅgaho",
+                "tag":["añña","sihaḷa"],
+                "children":[
+                    {
+                        "name":"Moggallāna vuttivivaraṇapañcikā",
+                        "tag":["añña","sihaḷa","moggallāna vuttivivaraṇapañcikā"]
+                    },
+                    {
+                        "name":"Thupavaṃsa",
+                        "tag":["añña","sihaḷa","thupavaṃsa"]
+                    },
+                    {
+                        "name":"Dāṭhāvaṃsa",
+                        "tag":["añña","sihaḷa","Dāṭhāvaṃsa"]
+                    },
+                    {
+                        "name":"Dhātupāṭha vilāsiniyā",
+                        "tag":["añña","sihaḷa","dhātupāṭha vilāsiniyā"]
+                    },
+                    {
+                        "name":"Dhātuvaṃsa",
+                        "tag":["añña","sihaḷa","dhātuvaṃsa"]
+                    },
+                    {
+                        "name":"Hatthavanagallavihāravaṃsa",
+                        "tag":["añña","sihaḷa","hatthavanagallavihāravaṃsa"]
+                    },
+                    {
+                        "name":"Jinacaritaya",
+                        "tag":["añña","sihaḷa","jinacaritaya"]
+                    },
+                    {
+                        "name":"Jinavaṃsadīpaṃ",
+                        "tag":["añña","sihaḷa","jinavaṃsadīpa"]
+                    },
+                    {
+                        "name":"Telakaṭāhagāthā",
+                        "tag":["añña","nīti","telakaṭāhagāthā"]
+                    },
+                    {
+                        "name":"Milidaṭīkā",
+                        "tag":["añña","nīti","milidaṭīkā"]
+                    },
+                    {
+                        "name":"Padamañjarī",
+                        "tag":["añña","nīti","padamañjarī"]
+                    },
+                    {
+                        "name":"Padasādhana",
+                        "tag":["añña","nīti","padasādhana"]
+                    },
+                    {
+                        "name":"saddabindupakaraṇa",
+                        "tag":["añña","nīti","saddabindupakaraṇa"]
+                    },
+                    {
+                        "name":"Kaccāyanadhātumañjūsā",
+                        "tag":["añña","nīti","kaccāyanadhātumañjūsā"]
+                    },
+                    {
+                        "name":"Samantakūṭavaṇṇanā",
+                        "tag":["añña","nīti","samantakūṭavaṇṇanā"]
+                    }
+                ]
             }
+        ]
+    }
 ]

public/app/palicanon/index1.php

@@ -38,180 +38,7 @@ require_once '../public/function.php';
     <script src="test.js"></script>
 
 <style>
-.chapter_list ul {
-    margin-left: 0;
-}
-.head_bar{
-    display: flex;
-    flex-direction: column;
-}
-#left-bar{
-    flex: 2;
-    background-color: var(--box-bg-color2);
-}
 
-.chapter_list ul li .main{
-    display:flex;
-}
-.book_view  ul li{
-    display:block;
-}
-.book_view .level_1{
-    background:unset;
-}
-
-.book_view ul li{
-    border:unset;
-    width: 30%;
-    height:90px;
-}
-.chapter_list .list {
-    display: none;
-}
-.chapter_list .show {
-    display: block;
-    width: 100%;
-}
-.chapter_list .grid {
-    width: 100%;
-}
-.chapter_list > div {
-    max-height: unset;
-    overflow-y: unset; 
-}
-
-.chapter_list .more_info{
-    display:flex;
-    font-size:80%;
-    color: var(--main-color1);
-    justify-content: space-between;
-}
-
-
-}
-.more_info>.palicanon_chapter_info>.item{
-    margin-right:1em;
-}
-.left_item>.item{
-    margin-right:1em;
-}
-.filter>.inner {
-    max-height: 200px;
-    overflow-y: auto;
-    background-color: var(--input-bg-color);
-}
-
-.main_menu {
-    font-size: 100%;
-    text-align: center;
-    margin: 0 1em;
-    transition: all 600ms ease;
-    text-transform: capitalize;
-}
-.main_menu>span {
-    margin: 2px;
-    padding: 2px 12px;
-    font-weight: 500;
-    transition-duration: 0.2s;
-    cursor: pointer;
-    font-size: 120%;
-    border: unset;
-    border-radius: 0;
-    border-bottom: 2px solid var(--nocolor);
-    display: inline-block;
-}
-.main_menu>.select {
-    border-bottom: 2px solid var(--link-color);
-}
-.main_menu>span>a {
-    color:unset;
-}
-.main_menu span:hover {
-    background-color: unset;
-    color: unset;
-    border-color: var(--link-hover-color);
-}
-.submenu select>option {
-    background-color: gray;
-}
-button.active {
-    background-color: gray;
-}
-
-.chapter_list ul li>.main>.left{
-    width: 100px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-.chapter_list ul li>.main>.right{
-    width:100%;
-}
-.chapter_tag {
-    width: 475px;
-    padding: 5px 0;
-    overflow-y: visible;
-    overflow-x: auto;
-    display: flex;
-    flex-wrap: wrap;
-}
-.left_item {
-    margin: 4px 0;
-}
-.left_item>.item>.small_icon{
-    width:16px;
-    height:16px;
-}
-.left_item>.item>.text{
-    padding:5px;
-}
-
-div#tag_list {
-    background-color: var(--btn-color);
-    padding: 5px;
-    display: none;
-}
-
-#more_chapter {
-    text-align: center;
-}
-#more_chapter_line {
-    border-bottom: 1px solid var(--border-line-color);
-    height: 1em;
-}
-#btn_more_chapter{
-        position: absolute;
-    margin-top: -1.1em;
-    background-color: var(--link-color);
-    color: var(--bg-color);
-    border: none;
-    padding: 2px 40px;
-    margin-left: -5em;
-}
-#filter-author li.active{
-    background-color:gray;
-}
-
-#filter_bar {
-    display: flex;
-    justify-content: space-between;
-}
-div#filter_bar {
-    font-size: 120%;
-}
-
-span.channel:hover {
-    background-color: wheat;
-}
-span.channel {
-    cursor: pointer;
-}
-
-.settting-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 2px;
-}
 
 </style>
 
@@ -223,48 +50,9 @@ span.channel {
     }
 ?>
 
-<div style="display:flex;">
+<div id='main_view' >
     <div id='left-bar' >
         <div id='left-bar-inner'>
-            <div class="filter submenu">
-                <div class="title submenu_title">设定</div>
-                <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.7'>70</option>
-                            </select>
-                        </span>
-                    </div>
-
-                    <div><button>还原默认</button><button onclick="updateSetting()">应用</button></div>
-                </div>
-            </div>
             <div class="filter submenu">
                 <div class="title submenu_title" style="flex;">
                     <span>分类标签</span>
@@ -277,8 +65,10 @@ span.channel {
                 </div>
             </div>
             <div class="filter submenu">
-                <div class="title submenu_title"><span>作者</span><span><input type="input" placeholder="🔍" /></span></div>
-                <div class='inner' id='filter-author' ></div>
+                <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>
@@ -309,10 +99,24 @@ span.channel {
             </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 id='bread-crumbs'></div>
             <div id='filter_bar'>
                 <div id='filter_bar_left'></div>
@@ -328,20 +132,66 @@ span.channel {
                 <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;'>
-                            <input id="tag_input" type="input" placeholder="tag search" size="20">
+                            
                         </div>
                         <div>
                             <button id="btn-tag_list_close" onclick='close_tag_list()'>X</button>
                         </div>
                     </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 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 class='index_inner'>
@@ -395,7 +245,7 @@ span.channel {
     <div class='bangdan' id = "user_recent">
         <div class='title'>最近阅读</div>
         <div class='list'>
-            <div id="page_loader" class="lds-ellipsis" style="visibility: hidden;"><div></div><div></div><div></div><div></div></div>
+            <div class="lds-ellipsis" ><div></div><div></div><div></div><div></div></div>
         </div>
     </div>
     <div class='bangdan'>
@@ -417,9 +267,7 @@ span.channel {
     <div class='bangdan' id='contribution'>
         <div class='title'>月度贡献</div>
         <div class='list'>
-            <ul>
-                <li>zuixin-1</li>
-            </ul>
+            <div class="lds-ellipsis" ><div></div><div></div><div></div><div></div></div>
         </div>
     </div>
     </div>
@@ -473,6 +321,7 @@ span.channel {
             //载入用户最近的阅读列表
             loadUserRecent();
             loadContribution();
+            
         });
     </script>
     <?php

public/app/palicanon/palicanon.js

@@ -14,6 +14,7 @@ var gBreadCrumbs=['','','','','','','','',''];
 var _nextPageStart = 0;
 var _pageSize = 20;
 var _channel = "";
+var _palicanonCategory,_palicanonCategoryCurrent,_palicanonCategoryPath;
 
 var _tags = "";
 var _channelList;
@@ -53,7 +54,19 @@ function updateSetting(){
         progress:_progress,
     }))
 
-    LoadAllChannel();
+    switch (_view) {
+        case 'community':
+            _nextPageStart = 0;
+            LoadAllChannel();
+            communityGetChapter();
+            break;
+        case 'category':
+            
+            break;    
+        default:
+            break;
+    }
+    
 }
 
 /*
@@ -1036,19 +1049,102 @@ function chapter_back(parent) {
     RenderBreadCrumbs();
 }
 
+function categoryGoHome(){
+    updatePalicanonCategoryList();
+    $("#palicanon-category").show();
+    $("#chapter_shell").hide();
+    tag_set([]);
+}
+
+function updatePalicanonCategoryList(name="__home__") {
+    switch (name) {
+        case '__home__':
+            _palicanonCategoryCurrent = _palicanonCategory.slice();
+            _palicanonCategoryPath = new Array();
+            _palicanonCategoryPath.push(_palicanonCategoryCurrent);
+            break;
+        case '__prev__':
+            _palicanonCategoryPath.pop();
+            _palicanonCategoryCurrent = _palicanonCategoryPath[_palicanonCategoryPath.length-1].slice();
+            break;
+        default:
+            if(_palicanonCategoryCurrent.length>0){
+                let next = _palicanonCategoryCurrent.find(element => element.name == name);
+                if(typeof next !== "undefined"){
+                    if(next.children && next.children.length>0){
+                        //有子目录
+                        _palicanonCategoryCurrent = next.children.slice();
+                        _palicanonCategoryPath.push(_palicanonCategoryCurrent.slice());
+                    }else{
+                        //没有子目录
+                        tag_set(next.tag);
+                        $("#palicanon-category").hide();
+                        $("#chapter_shell").show();
+                    }
+                }
+            }else{
+
+            }
+            
+            break;
+    }
+    $('#palicanon-category').html(renderPalicanonCategoryList());
+
+}
+
+function renderPalicanonCategoryList(){
+    let html = "<ul class='chapter_list'>";
+    if(_palicanonCategoryPath.length>1){
+        html += "<li onclick=\"updatePalicanonCategoryList('__prev__')\">";
+        html += "上一级";
+        html += "</li>";
+    }
+
+    for (const item of _palicanonCategoryCurrent) {
+        html += "<li onclick=\"updatePalicanonCategoryList('"+item.name+"')\">";
+        html += "<div class='left_icon'>";
+        html += "<svg class='icon' style='fill: var(--box-bg-color1)'>";
+        html += "<use xlink:href='../../node_modules/bootstrap-icons/bootstrap-icons.svg#folder'>";
+        html += "</svg>" ;
+        html += "</div>";
+
+        html += "<div class='title'>";
+
+        html += '<div class="title_left" onclick="chapter_onclick(this)">';
+        html += '<div class="title_1">'+item.name+'</div>';
+        html += '<div class="title_2" lang="pali">'+item.name+'</div>';
+        html += "</div>";
+
+        html += '<div class="title_right">';
+        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 += '</div>';
+
+        html += "</div>";
+
+        html += "</li>";
+    }
+    html += "</ul>";
+    return html;
+}
 
 function loadTagCategory(name="defualt"){
     $.getJSON("./category/"+name+".json",function(result){
-        console.log(tocGetTagCategory(result));
+
+        _palicanonCategory = result;
+        _palicanonCategoryCurrent = _palicanonCategory.slice();
+        _palicanonCategoryPath = new Array();
+        _palicanonCategoryPath.push(_palicanonCategoryCurrent.slice());
+        updatePalicanonCategoryList();
+        
         $("#tag-category").html("");
         $("#tag-category").fancytree({
             autoScroll: true,
             selectMode: 1, // 1:single, 2:multi, 3:multi-hier
             checkbox: false, // Show checkboxes.
-            source: tocGetTagCategory(result),
+            source: tocGetTagCategory(result.slice()),
             activate: function(e, data) {
-//				alert("activate " + );
-                //currSelectNode = data.node;
                 console.log('tree',data);
                 tag_set(arrTagCategory[data.node.key]);
             },

public/app/palicanon/style.css

@@ -39,6 +39,7 @@ tag {
 	padding: 2px 12px;
 	border-radius: 5px;
     cursor: pointer;
+    display: inline-block;
 }
 tag:hover{
     background-color: var(--border-line-color);
@@ -119,7 +120,7 @@ tag:hover{
 }
 
 #select_bar>div {
-    display:inline-block;
+    display:inline;
 }
 
 .chapter_list {
@@ -323,8 +324,208 @@ li.level_1.selected {
 .bangdan li{
     list-style-type:unset;
     white-space: nowrap;
+    overflow: auto;
 }
 .bangdan ol{
     padding-left: 1.5em;
     width: 200px;
+}
+
+.chapter_list ul {
+    margin-left: 0;
+}
+.head_bar{
+    display: flex;
+    flex-direction: column;
+}
+#left-bar{
+    flex: 2;
+    background-color: var(--box-bg-color2);
+}
+
+.chapter_list ul li .main{
+    display:flex;
+}
+.book_view  ul li{
+    display:block;
+}
+.book_view .level_1{
+    background:unset;
+}
+
+.book_view ul li{
+    border:unset;
+    width: 30%;
+    height:90px;
+}
+.chapter_list .list {
+    display: none;
+}
+.chapter_list .show {
+    display: block;
+    width: 100%;
+}
+.chapter_list .grid {
+    width: 100%;
+}
+.chapter_list > div {
+    max-height: unset;
+    overflow-y: unset; 
+}
+
+.chapter_list .more_info{
+    display:flex;
+    font-size:80%;
+    color: var(--main-color1);
+    justify-content: space-between;
+}
+
+.more_info>.palicanon_chapter_info>.item{
+    margin-right:1em;
+}
+.left_item>.item{
+    margin-right:1em;
+}
+.filter>.inner {
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: var(--input-bg-color);
+}
+
+.main_menu {
+    font-size: 100%;
+    text-align: center;
+    margin: 0 1em;
+    transition: all 600ms ease;
+    text-transform: capitalize;
+}
+.main_menu>span {
+    margin: 2px;
+    padding: 2px 12px;
+    font-weight: 500;
+    transition-duration: 0.2s;
+    cursor: pointer;
+    font-size: 120%;
+    border: unset;
+    border-radius: 0;
+    border-bottom: 2px solid var(--nocolor);
+    display: inline-block;
+}
+.main_menu>.select {
+    border-bottom: 2px solid var(--link-color);
+}
+.main_menu>span>a {
+    color:unset;
+}
+.main_menu span:hover {
+    background-color: unset;
+    color: unset;
+    border-color: var(--link-hover-color);
+}
+.submenu select>option {
+    background-color: gray;
+}
+button.active {
+    background-color: gray;
+}
+
+.chapter_list ul li>.main>.left{
+    width: 100px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.chapter_list ul li>.main>.right{
+    width:100%;
+}
+.chapter_tag {
+    width: 475px;
+    padding: 5px 0;
+    overflow-y: visible;
+    overflow-x: auto;
+    display: flex;
+    flex-wrap: wrap;
+}
+.left_item {
+    margin: 4px 0;
+}
+.left_item>.item>.small_icon{
+    width:16px;
+    height:16px;
+}
+.left_item>.item>.text{
+    padding:5px;
+}
+
+div#tag_list {
+    background-color: var(--btn-color);
+    padding: 5px;
+    display: none;
+}
+
+#more_chapter {
+    text-align: center;
+}
+#more_chapter_line {
+    border-bottom: 1px solid var(--border-line-color);
+    height: 1em;
+}
+#btn_more_chapter{
+        position: absolute;
+    margin-top: -1.1em;
+    background-color: var(--link-color);
+    color: var(--bg-color);
+    border: none;
+    padding: 2px 40px;
+    margin-left: -5em;
+}
+#filter-author li.active{
+    background-color:gray;
+}
+
+#filter_bar {
+    display: flex;
+    justify-content: space-between;
+}
+div#filter_bar {
+    font-size: 120%;
+}
+
+span.channel:hover {
+    background-color: wheat;
+}
+span.channel {
+    cursor: pointer;
+}
+
+.settting-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 2px;
+}
+
+#main_view{
+    display:flex;
+}
+
+#tag_list_inner {
+    display: flex;
+    flex-direction: row;
+}
+
+#tag_list_tag_div {
+    flex: 7;
+    padding: 10px;
+}
+
+#tag_list_setting_div {
+    flex: 3;
+    padding: 10px;
+}
+
+#palicanon-category{
+    display:none;
+}
+#select_bar_home{
+    display:none;
 }

public/app/palicanon/style_mobile.css

@@ -14,3 +14,64 @@
 .chapter_head_tool_bar .chapter_close_button {
 	display: none;
 }
+#main_view{
+    display:flex;
+    flex-direction: column;
+}
+
+#left-bar {
+    flex: 2;
+    background-color: var(--box-bg-color2);
+    display: none;
+}
+
+.chapter_list .more_info {
+    display: flex;
+    font-size: 80%;
+    color: var(--main-color1);
+    flex-direction: column;
+}
+
+.chapter_list ul li .main {
+    display: flex;
+    flex-direction: column;
+}
+
+.left_items {
+    display: flex;
+    flex-direction: row;
+}
+
+#tag_list_inner {
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+#tag_list_tag_div {
+    padding: 6px;
+}
+
+#tag_list_setting_div {
+    padding: 6px;
+}
+#palicanon-category{
+    display:block;
+}
+
+#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;
+}