fix nav bug

Author: wxiaoguang

web_src/js/components/ViewFileTree.vue

@@ -21,12 +21,17 @@ async function loadChildren(treePath: string, subPath: string = '') {
   return json.fileTreeNodes ?? null;
 }
 
-async function loadViewContent(treePath: string) {
-  // load content by path (content based on home_content.tmpl)
-  window.history.pushState({treePath}, null, `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`);
-  const response = await GET(`${window.location.href}?only_content=true`);
-  const contentEl = document.querySelector('.repo-view-content');
-  contentEl.innerHTML = await response.text();
+async function loadViewContent(url: string) {
+  url = url.includes('?') ? url.replace('?', '?only_content=true') : `${url}?only_content=true`;
+  const response = await GET(url);
+  document.querySelector('.repo-view-content').innerHTML = await response.text();
+}
+
+async function navigateTreeView(treePath: string) {
+  const url = `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`;
+  window.history.pushState({treePath, url}, null, url);
+  selectedItem.value = treePath;
+  await loadViewContent(url);
 }
 
 onMounted(async () => {
@@ -35,15 +40,15 @@ onMounted(async () => {
   elRoot.value.closest('.is-loading')?.classList?.remove('is-loading');
   window.addEventListener('popstate', (e) => {
     selectedItem.value = e.state?.treePath || '';
-    loadViewContent(selectedItem.value);
+    if (e.state?.url) loadViewContent(e.state.url);
   });
 });
 </script>
 
 <template>
   <div class="view-file-tree-items" ref="elRoot">
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
-    <ViewFileTreeItem v-for="item in files" :key="item.name" :item="item" :selected-item="selectedItem" :load-content="loadViewContent" :load-children="loadChildren"/>
+    <ViewFileTreeItem v-for="item in files" :key="item.name" :item="item" :selected-item="selectedItem" :navigate-view-content="navigateTreeView" :load-children="loadChildren"/>
   </div>
 </template>
 

web_src/js/components/ViewFileTreeItem.vue

@@ -12,7 +12,7 @@ type Item = {
 
 const props = defineProps<{
   item: Item,
-  loadContent: any;
+  navigateViewContent: any;
   loadChildren: any;
   selectedItem?: any;
 }>();
@@ -35,11 +35,11 @@ const doLoadChildren = async () => {
 
 const doLoadDirContent = () => {
   doLoadChildren();
-  props.loadContent(props.item.fullPath);
+  props.navigateViewContent(props.item.fullPath);
 };
 
 const doLoadFileContent = () => {
-  props.loadContent(props.item.fullPath);
+  props.navigateViewContent(props.item.fullPath);
 };
 
 const doGotoSubModule = () => {
@@ -102,7 +102,7 @@ const doGotoSubModule = () => {
   </div>
 
   <div v-if="children?.length" v-show="!collapsed" class="sub-items">
-    <ViewFileTreeItem v-for="childItem in children" :key="childItem.entryName" :item="childItem" :selected-item="selectedItem" :load-content="loadContent" :load-children="loadChildren"/>
+    <ViewFileTreeItem v-for="childItem in children" :key="childItem.entryName" :item="childItem" :selected-item="selectedItem" :navigate-view-content="navigateViewContent" :load-children="loadChildren"/>
   </div>
 </template>
 <style scoped>