文章目录导航记录用户隐藏行为，下次打开根据上次行为显示或隐藏目录栏。channel语言选择

app/article/index.php

@@ -65,14 +65,17 @@ require_once "../pcdl/html_head.php";
 		echo "_end=".$_GET["end"].";";
 	}
 
+	
 	if(isset($_GET["mode"]) && $_GET["mode"]=="edit" && isset($_COOKIE["userid"])){
 		#登录状态下 编辑模式
 		$_mode = "edit";
 		echo "_mode='edit';";
+		$classMode="edit_mode";
 	}
 	else{
 		$_mode = "read";
 		echo "_mode='read';";
+		$classMode="read_mode";
 	}
 	if(isset($_GET["display"])){
 		if($_mode == "edit"){
@@ -193,23 +196,36 @@ span.fancytree-node{
     margin-block-end: 0.5em;
     margin-left: 7px;
 }
+
+
 </style>
 
 <?php
     require_once("../pcdl/head_bar.php");
 ?>
 <script>
-var show_hide=1;
+
 function show_content(){
-		if(show_hide==0){
-			$("#left_pannal_inner").show();
-			show_hide=1;
-		}
-		else{
-			$("#left_pannal_inner").hide();
-			show_hide=0;
-		}
+	$("#left_pannal").toggleClass("hidden");
+	if($("#left_pannal").hasClass("hidden")){
+		$("#main_view").css("margin-left","auto");
+		localStorage.setItem('article_show_toc_'+_mode, 'hide');
+	}else{
+		$("#main_view").css("margin-left","270px");
+		localStorage.setItem('article_show_toc_'+_mode, 'show');
 	}
+}
+function set_toc_visible(isVisible){
+	if(isVisible){
+		$("#left_pannal").removeClass("hidden");
+		$("#main_view").css("margin-left","270px");
+		localStorage.setItem('article_show_toc_'+_mode, 'show');
+	}else{
+		$("#left_pannal").addClass("hidden");
+		$("#main_view").css("margin-left","auto");
+		localStorage.setItem('article_show_toc_'+_mode, 'hide');
+	}
+}
 
 </script>
 <div id="head_bar" >
@@ -219,16 +235,22 @@ function show_content(){
 
 	<div style="margin: auto 0;">
 		<span id="head_span">
+			<select id="select_lang" onchange="lang_changed(this)">
+					<option>全部语言</option>
+					<option>简体中文</option>
+					<option>繁体中文</option>
+					<option>英文</option>
+			</select>
 		<?php
 		
 		if(isset($_GET["view"]) && $_GET["view"]=="article"){
-			echo "<button class='icon_btn'  title='{$_local->gui->modify} {$_local->gui->composition_structure}'>";
+			echo "<button class='icon_btn show_pc'  title='{$_local->gui->modify} {$_local->gui->composition_structure}'>";
 			echo "<a href='../article/my_article_edit.php?id=".$_GET["id"];
 			echo "' target='_blank'>{$_local->gui->modify}</a></button>";
 		}
 		if($_GET["view"]!=="article" && $_GET["view"]!=="collection"){
 ?>
-	<span class="icon_btn_div">				
+	<span id="convert_article" class="icon_btn_div show_pc">				
 		<button id="file_add" type="button" class="icon_btn" onclick="to_article()" title=" ">
 			<svg class="icon">
 				<use xlink:href="../studio/svg/icon.svg#ic_add_circle"></use>
@@ -239,7 +261,7 @@ function show_content(){
 	</span>	
 <?php
 		}
-			echo "<button class='icon_btn'  title='{$_local->gui->add}{$_local->gui->subfield}'>";
+			echo "<button class='icon_btn show_pc'  title='{$_local->gui->add}{$_local->gui->subfield}'>";
 			echo "<a href='../article/frame.php?view=".$_GET["view"];
 			if(isset($_GET["id"])){
 				echo "&id=".$_GET["id"];
@@ -284,60 +306,76 @@ function show_content(){
 	</div>
 </div>
 
-<div id="main_view" class="main_view">
-<div id="article_head" style="border-bottom: 1px solid gray;">
-	<div style="display:flex;">
-		<div id="article_path" class=""></div>
-		<div id="article_path_title"></div>
-	</div>
-	<div id="article_title" class="term_word_head_pali"></div>
-	<div id="article_subtitle"></div>
-	<div id="article_author"></div>
-	<div id="like_div">
-		<like restype='article' resid='124'></like>
-		<watch restype='article' resid='124'></watch>
-	</div>
-</div>
-
-<div id="contents_view">
-	<div id="contents_div">
-		<div id="summary"></div>
-		<div id="contents" class="<?php echo $contentClass;?>">
-			<?php echo $_local->gui->loading; ?>...
-		</div>
-		<div id="contents_foot">
-			<div id="contents_nav" style="display:flex;justify-content: space-between;">
-				<div id="contents_nav_left"></div>
-				<div id="contents_nav_right"></div>
+<div id="main_view" class="main_view <?php echo $classMode;?>">
+	<div id="article_head" style="border-bottom: 1px solid gray;">
+		<div id="head_nav" >	
+			<div id="head_nav_left" >
+				<div id="article_path" class=""></div>
+				<div id="article_path_title"></div>
 			</div>
-			<div id="contents_dicuse">
-			
+			<div id="head_nav_right" >
+				<div id="article_edition" style="display:flex;">
+					<span  style='font-weight: 700;'>文章版本 </span>
+					<div id="edition_dropdown" class="case_dropdown">
+						<span></span>
+					</div>
+				</div>
 			</div>
 		</div>
+		<div id="article_title" class="term_word_head_pali"></div>
+		<div id="article_subtitle"></div>
+		<div id="article_author"></div>
+		<div id="like_div">
+			<like restype='article' resid='124'></like>
+			<watch restype='article' resid='124'></watch>
+		</div>
 	</div>
-	<div id="right_pannal">
-		<div class="fun_frame" style="overflow-x: scroll;position: fixed;width: 18%;">
-			<div style="display:flex;justify-content: space-between;">
-				<div class="title"><?php echo $_local->gui->contributor; ?></div>
-				<div class="click_dropdown_div">
-					<div class="channel_select_button" onclick="onChannelMultiSelectStart()"><?php echo $_local->gui->select; ?></div>
-				</div>
+
+	<div id="contents_view">
+		<div id="contents_div">
+			<div id="summary"></div>
+			<div id="contents" class="<?php echo $contentClass;?>">
+				<?php echo $_local->gui->loading; ?>...
 			</div>
-			<div class='channel_select'>
-				<button onclick='onChannelChange()'><?php echo $_local->gui->confirm; ?></button>
-				<button onclick='onChannelMultiSelectCancel()'><?php echo $_local->gui->cancel; ?></button>
+			<div id="contents_foot">
+				<div id="contents_nav" style="display:flex;justify-content: space-between;">
+					<div id="contents_nav_left"></div>
+					<div id="contents_nav_right"></div>
+				</div>
+				<div id="contents_dicuse">
+				
+				</div>
 			</div>
-			<div id="channal_list" class="content" style="max-height:calc(100vh - 20em);">
+		</div>
+		<div id="right_pannal">
+			<div class="fun_frame" style="overflow-x: scroll;position: fixed;width: 18%;height: calc(100vh - 250px);">
+				<div style="display:flex;justify-content: space-between;">
+					<div class="title"><?php echo $_local->gui->contributor; ?></div>
+					<div class="click_dropdown_div">
+						<div class="channel_select_button" onclick="onChannelMultiSelectStart()"><?php echo $_local->gui->select; ?></div>
+					</div>
+				</div>
+				<div class='channel_select'>
+					<button onclick='onChannelChange()'><?php echo $_local->gui->confirm; ?></button>
+					<button onclick='onChannelMultiSelectCancel()'><?php echo $_local->gui->cancel; ?></button>
+				</div>
+				<div id="channal_list" class="content" style="max-height:calc(100vh - 20em);">
+				</div>
 			</div>
 		</div>
 	</div>
 </div>
-</div>
 
 
 
 <script>
 	$(document).ready(function(){
+		if(localStorage.getItem('article_show_toc_'+_mode)=="hide"){
+			set_toc_visible(false);
+		}else{
+			set_toc_visible(true);
+		}
+		
 		article_add_dlg_init("article_add_div");
 	ntf_init();				
 	click_dropdown_init();

app/article/mobile.css

@@ -16,9 +16,7 @@
 #contents_div {
 	padding: 0;
 }
-#head_bar {
-	flex-direction: column;
-}
+
 #main_view {
 	padding-top: 10em;
 }
@@ -34,7 +32,6 @@
 }
 #head_span {
 	width: 90vw;
-	display: inline-flex;
 	justify-content: space-between;
 	margin-top: 5px;
 }
@@ -47,4 +44,18 @@ note:hover .ref {
 
 .main_view {
 	margin-left: auto;
+}
+
+#head_nav {
+	flex-direction: column-reverse;
+}
+
+.show_pc{
+	display:none;
+}
+#left_pannal_inner{
+	width: 100%;
+}
+#toc_content{
+	width: 100%;
 }

app/article/style.css

@@ -39,7 +39,7 @@
 	padding: 0 1em;
 	padding-top: 7em;
 	max-width: 1280px;
-	/*margin-left: 300px;*/
+	margin-left: 270px;
 	margin-right: auto;
 }
 
@@ -57,7 +57,9 @@
 #toc_content{
 	max-height: calc(100vh - 90px);
     width: max-content;
-	/*max-width:260px;*/
+	max-width:270px;
+	background-color: var(--bg-color);
+    border-bottom: 1px solid var(--border-line-color);
 }
 
 .fun_frame {
@@ -191,4 +193,37 @@ img {
     font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", "Padauk", Arial, Verdana;
     color: var(--main-color1);
     font-size: 80%;
+}
+
+#article_edition {
+    padding: 8px;
+    margin: 0 4px;
+    border: 1px solid var(--border-line-color);
+    border-radius: 5px;
+}
+
+
+#head_nav {
+    display: flex;
+    justify-content: space-between;
+}
+#head_bar {
+    display: flex;
+    flex-direction: initial;
+}
+
+.hidden{
+	display:none;
+}
+
+#main_view.edit_mode{
+	max-width: 100%;
+}
+
+#article_path chapter{
+	color: var(--link-color);
+}
+#article_path chapter:hover {
+    color: var(--link-hover-color);
+    text-decoration: underline;
 }

app/reader/right_tool_bar.php

@@ -56,7 +56,7 @@
 	display: none;
 }
 	</style>
-			<select name="direction" onchange='setDirection(this)' >
+			<select name="direction" onchange='setDirection(this)' class="show_pc">
 			<option value="row"><?php echo $_local->gui->row_compare; ?></option>
 			<option value="column"><?php echo $_local->gui->column_compare; ?></option>
 		</select>

app/term/note.js

@@ -360,6 +360,36 @@ function note_channal_list() {
 
 						$("#channal_list").html(strHtml);
 						set_more_button_display();
+
+						let lang=new Object();
+						for (const iterator of _channalData) {
+							lang[iterator.lang]=1;
+						}
+						let htmlLangSelect="<option value='*'>全部语言</option>";
+						let currLang = getCookie("language");
+						if(currLang == "zh-cn"){
+							currLang = "zh-hans";
+						}
+						if(currLang == "zh-tw"){
+							currLang = "zh-hant";
+						}
+						let isLangMatched=false;
+						for (const key in lang) {
+							if (lang.hasOwnProperty.call(lang, key)) {
+								htmlLangSelect += "<option value='"+key+"' ";
+								if(currLang==key){
+									htmlLangSelect += "selected ";
+									isLangMatched = true;
+								}
+								htmlLangSelect +=">"+gLocal.language[key]+"</option>";	
+							}
+						}
+						$("#select_lang").html(htmlLangSelect);
+						if(isLangMatched){
+							render_edition_list(currLang);
+						}else{
+							render_edition_list("all");
+						}
 					} catch (e) {
 						console.error(e);
 					}
@@ -368,6 +398,25 @@ function note_channal_list() {
 		);
 	}
 }
+function lang_changed(obj){
+	render_edition_list($(obj).val());
+}
+function render_edition_list(lang,index=0){
+	let html = "";
+	html += "<div class='case_dropdown-content'>";
+	let firstChannel;
+	for (const iterator of _channalData) {
+		if(lang=="all" || (lang!="all" && lang==iterator.lang)){
+			if(typeof firstChannel == "undefined"){
+				firstChannel = "<span>"+iterator.name+"</span>";
+			}
+			html += "<a onclick=\"set_channal('"+iterator.id+"')\">"+iterator.name+"</a>";
+		}
+	}
+	html +="</div>";
+	html = firstChannel + html;
+	$("#edition_dropdown").html(html);
+}
 
 function find_channal(id) {
 	for (const iterator of _channalData) {

app/term/term.css

@@ -324,6 +324,8 @@ note n {
 	text-transform: capitalize;
 	font-size: 200%;
 	margin-top: 0.5em;
+	overflow-x: clip;
+    white-space: nowrap;
 }
 .term_word_head {
 	border-bottom: 1px solid #cecece;