增加PageList加载错误提示

extension.json

@@ -122,7 +122,12 @@
             ],
             "messages": [
                 "isekai-preview-page-list-preview-placeholder",
-                "isekai-preview-page-list-readmore-btn"
+                "isekai-preview-page-list-readmore-btn",
+                "isekai-preview-page-list-load-error",
+                "isekai-preview-page-list-load-error-parse",
+                "isekai-preview-page-list-load-error-404",
+                "isekai-preview-page-list-load-error-403",
+                "isekai-preview-page-list-load-error-http-status"
             ]
         },
         "ext.isekai.information.infobox": {

i18n/zh-hans.json

@@ -39,5 +39,10 @@
     "isekai-preview-page-list-error-invalid-category": "未指定分类或分类名无效",
     "isekai-preview-page-list-error-invalid-loader": "未知的页面列表加载器：\"$1\"",
     "isekai-preview-page-list-preview-placeholder": "请选择一个页面进行查看",
-    "isekai-preview-page-list-readmore-btn": "查看"
+    "isekai-preview-page-list-readmore-btn": "查看",
+    "isekai-preview-page-list-load-error": "加载页面列表失败：\"$1\"",
+    "isekai-preview-page-list-load-error-parse": "无法解析页面内容",
+    "isekai-preview-page-list-load-error-404": "页面不存在",
+    "isekai-preview-page-list-load-error-403": "没有查看权限",
+    "isekai-preview-page-list-load-error-http-status": "服务器返回 $1"
 }

modules/previewPageList/PreviewPageList.vue

@@ -50,6 +50,8 @@ module.exports = {
         const previewPageContent = ref('');
         const selectedPageUrl = ref('#');
 
+        const errorMessage = ref(null);
+
         const bookletClassList = ref([]);
 
         const onSelectPage = (idx) => {
@@ -80,6 +82,7 @@ module.exports = {
         }
 
         const loadPageContent = () => {
+            errorMessage.value = null;
             contentLoading.value = true;
             selectedPageUrl.value = '#';
             props.pageListLoader.loadPageContent(selectedPageInfo.value).then((pageContent) => {
@@ -93,6 +96,7 @@ module.exports = {
                 });
             }).catch((err) => {
                 contentLoading.value = false;
+                errorMessage.value = mw.msg('isekai-preview-page-list-load-error', selectedPageInfo.value.title);
                 console.error(err);
             });
         }
@@ -192,6 +196,7 @@ module.exports = {
             containerRef,
             pageListLoading,
             contentLoading,
+            errorMessage,
             pageList,
             selectedPageIdx,
             previewPageContent,
@@ -272,6 +277,11 @@ module.exports = {
                             </div>
                         </div>
                     </div>
+                    <div v-else-if="errorMessage">
+                        <div class="error-message-container">
+                            <span class="error">{{ errorMessage }}</span>
+                        </div>
+                    </div>
                     <div v-else class="isekai-preview-content" v-html="previewPageContent"></div>
                 </div>
             </div>

modules/previewPageList/ext.isekai.previewPageList.js

@@ -29,15 +29,39 @@ class BasePageListLoader {
                 url += '?'
             }
             url += 'action=render';
-            $.get(url, (str) => {
+            
+            fetch(url, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'text/html; charset=UTF-8'
+                }
+            }).then((response) => {
+                if (!response.ok) {
+                    if (response.status === 404) {
+                        throw new Error(mw.message('isekai-preview-page-list-load-error-404').parse());
+                    } else if (response.status === 403) {
+                        throw new new Error(mw.message('isekai-preview-page-list-load-error-403').parse());
+                    } else {
+                        throw new new Error(mw.message('isekai-preview-page-list-load-error-http-status', response.statusText).parse());
+                    }
+                }
+                return response.text();
+            }).then((str) => {
                 let $dom = $(this.parseHTMLString(str));
                 let $content = $dom.find('.mw-parser-output');
                 if ($content.length > 0) {
                     //删除目录
                     $content.find('.toc').remove();
                     resolve($content.html());
+                } else {
+                    throw new Error('Cannot find content');
                 }
-            }, 'html');
+            }).catch((error) => {
+                if (error instanceof TypeError) {
+                    error = new Error(mw.message('isekai-preview-page-list-load-error-parse').parse());
+                } else if (error instanceof FetchError)
+                reject(error);
+            });
         });
     }
 

modules/previewPageList/ext.isekai.previewPageList.less

@@ -18,26 +18,33 @@
         overflow-y: auto;
     }
 
-    .loading {
+    .loading,
+    .error-message-container {
         width: 100%;
         height: 99.5%;
         height: calc(100% - 2px); // fix: overflow because of border
         margin-top: 1px;
         display: flex;
+        align-items: center;
+    }
 
-        .spinner {
+    .loading .spinner {
-            margin: auto;
+        margin: auto;
-            padding: 2rem;
+        padding: 2rem;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        
+        .oo-ui-progressBarWidget {
             width: 100%;
-            display: flex;
-            justify-content: center;
-            
-            .oo-ui-progressBarWidget {
-                width: 100%;
-            }
         }
     }
 
+    .error-message-container .error {
+        display: block;
+        text-align: center;
+    }
+
     .isekai-booklet-layout {
         display: flex;
         height: @preview-page-list-height;