plugin-jm-server 0.2.0__tar.gz → 0.2.1__tar.gz

{plugin_jm_server-0.2.0 → plugin_jm_server-0.2.1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plugin_jm_server
-Version: 0.2.0
+Version: 0.2.1
 Summary: plugin_jm_server, a plugin for jmcomic that can be used to view comics in a web browser.
 Home-page: https://github.com/hect0x7/plugin-jm-server
 Author: hect0x7
@@ -44,20 +44,33 @@ Dynamic: summary
 
 * 双页阅读插件：https://sleazyfork.org/zh-CN/scripts/374903-comicread
 
-#  想法起源
+# 效果图（文件浏览、整章看图）
 
-想法起源：https://github.com/hect0x7/JMComic-Crawler-Python/issues/192
+## 1. 电脑浏览器访问
 
-基于原项目：https://github.com/AiCorein/Flask-Files-Server
+### 登录页
+![](images/3.png)
 
-为了方便修改，将原项目中的文件复制到本项目中，然后进行修改
+### 文件夹列表页
+![](images/4.png)
+![](images/9.png)
 
+### 看本模式
+![](images/5.png)
 
-# 可优化点
+### 文件夹&看本 二合一模式
+![](images/8.png)
 
-1. 前端优化。目前项目架构是`前后端不分离架构`，前端使用原始的html三件套。可以优化为前后端分离架构，基于Vue等开发框架，复用组件库，优化界面。
+## 2. 手机浏览器访问
 
-2. 后端优化。支持提供调用jmcomic功能的后端接口。
+### 登录页
+![](images/1.jpeg)
+
+### 文件夹列表页
+![](images/2.png)
+
+### 看本模式
+![](images/7.jpeg)
 
 
 # 使用方式
@@ -70,7 +83,6 @@ pip install plugin_jm_server
 ```
 
 
-
 ## 2. 运行代码
 
 * **HTTP版**
@@ -135,31 +147,41 @@ op.wait_all_plugins_finish()
 ```
 
 
-# 效果图（文件浏览、整章看图）
+## 前端页面与功能介绍
+
+本项目提供了一套完整的 Web 前端界面，用于管理和浏览本地图片资源。主要包含以下三个核心页面及其功能：
+
+### 1. 登录页
+为了保护个人隐私，系统提供了简单的访问控制。
+*   **密码验证**：启动时可配置密码，访问时需校验通过。
+*   **设备自适应**：根据访问设备（手机/电脑）自动适配最佳的登录布局。
+
+### 2. 文件夹浏览页（主页）
+这是资源管理的核心入口，支持高效的文件查找与导航。目前最新版本采用了 SPA（单页应用）架构进行全面增强：
+*   **智能路径导航**：
+    *   **路径补全**：输入路径时自动联想下级文件夹，支持键盘上下键选择及回车跳转。
+    *   **层级跳转**：输入框支持“..”快速返回上一级，并提供“确认”按钮进行精准跳转。
+*   **可视化展示**：
+    *   **文件夹预览**：鼠标悬停在文件夹上时，会自动展示该文件夹内的首张图片作为封面预览。
+    *   **类型区分**：通过文件夹角标（图标）清晰区分普通文件夹与特殊资源文件夹。
+*   **辅助功能**：
+    *   **书签管理**：支持将常看目录加入左侧书签栏，方便下次快速访问。
+    *   **本地交互**：支持通过网页菜单直接打开服务器端对应的本地文件夹窗口（Explorer）。
+
+### 3. 图片阅读页（看本模式）
+专为漫画阅读优化的沉浸式浏览页面。
+*   **加载优化**：采用图片懒加载机制，流畅浏览含有数百张图片的大型章节，节省系统资源。
+*   **多端适配**：
+    *   **PC端**：适合大屏浏览，支持浮动工具栏进行页面跳转、全屏切换等。
+    *   **移动端**：适配触摸操作，提供更好的手机阅读体验。
+*   **阅读辅助**：
+    *   **浮动菜单**：提供“回到顶部”、“加载全部图片”及“在资源管理器打开”等便捷操作。
+    *   **键盘支持**：支持常用快捷键进行页面滚动和翻页。
 
-## 1. 电脑浏览器访问
-
-### 登录页
-![](images/3.png)
-
-### 文件夹列表页
-![](images/4.png)
-![](images/9.png)
-
-### 看本模式
-![](images/5.png)
-
-### 文件夹&看本 二合一模式
-![](images/8.png)
-
-## 2. 手机浏览器访问
-
-### 登录页
-![](images/1.jpeg)
+#  想法起源
 
-### 文件夹列表页
-![](images/2.png)
+想法起源：https://github.com/hect0x7/JMComic-Crawler-Python/issues/192
 
-### 看本模式
-![](images/7.jpeg)
+基于原项目：https://github.com/AiCorein/Flask-Files-Server
 
+为了方便修改，将原项目中的文件复制到本项目中，然后进行修改

{plugin_jm_server-0.2.0 → plugin_jm_server-0.2.1}/README.md

@@ -8,20 +8,33 @@
 
 * 双页阅读插件：https://sleazyfork.org/zh-CN/scripts/374903-comicread
 
-#  想法起源
+# 效果图（文件浏览、整章看图）
 
-想法起源：https://github.com/hect0x7/JMComic-Crawler-Python/issues/192
+## 1. 电脑浏览器访问
 
-基于原项目：https://github.com/AiCorein/Flask-Files-Server
+### 登录页
+![](images/3.png)
 
-为了方便修改，将原项目中的文件复制到本项目中，然后进行修改
+### 文件夹列表页
+![](images/4.png)
+![](images/9.png)
 
+### 看本模式
+![](images/5.png)
 
-# 可优化点
+### 文件夹&看本 二合一模式
+![](images/8.png)
 
-1. 前端优化。目前项目架构是`前后端不分离架构`，前端使用原始的html三件套。可以优化为前后端分离架构，基于Vue等开发框架，复用组件库，优化界面。
+## 2. 手机浏览器访问
 
-2. 后端优化。支持提供调用jmcomic功能的后端接口。
+### 登录页
+![](images/1.jpeg)
+
+### 文件夹列表页
+![](images/2.png)
+
+### 看本模式
+![](images/7.jpeg)
 
 
 # 使用方式
@@ -34,7 +47,6 @@ pip install plugin_jm_server
 ```
 
 
-
 ## 2. 运行代码
 
 * **HTTP版**
@@ -99,31 +111,41 @@ op.wait_all_plugins_finish()
 ```
 
 
-# 效果图（文件浏览、整章看图）
+## 前端页面与功能介绍
+
+本项目提供了一套完整的 Web 前端界面，用于管理和浏览本地图片资源。主要包含以下三个核心页面及其功能：
+
+### 1. 登录页
+为了保护个人隐私，系统提供了简单的访问控制。
+*   **密码验证**：启动时可配置密码，访问时需校验通过。
+*   **设备自适应**：根据访问设备（手机/电脑）自动适配最佳的登录布局。
+
+### 2. 文件夹浏览页（主页）
+这是资源管理的核心入口，支持高效的文件查找与导航。目前最新版本采用了 SPA（单页应用）架构进行全面增强：
+*   **智能路径导航**：
+    *   **路径补全**：输入路径时自动联想下级文件夹，支持键盘上下键选择及回车跳转。
+    *   **层级跳转**：输入框支持“..”快速返回上一级，并提供“确认”按钮进行精准跳转。
+*   **可视化展示**：
+    *   **文件夹预览**：鼠标悬停在文件夹上时，会自动展示该文件夹内的首张图片作为封面预览。
+    *   **类型区分**：通过文件夹角标（图标）清晰区分普通文件夹与特殊资源文件夹。
+*   **辅助功能**：
+    *   **书签管理**：支持将常看目录加入左侧书签栏，方便下次快速访问。
+    *   **本地交互**：支持通过网页菜单直接打开服务器端对应的本地文件夹窗口（Explorer）。
+
+### 3. 图片阅读页（看本模式）
+专为漫画阅读优化的沉浸式浏览页面。
+*   **加载优化**：采用图片懒加载机制，流畅浏览含有数百张图片的大型章节，节省系统资源。
+*   **多端适配**：
+    *   **PC端**：适合大屏浏览，支持浮动工具栏进行页面跳转、全屏切换等。
+    *   **移动端**：适配触摸操作，提供更好的手机阅读体验。
+*   **阅读辅助**：
+    *   **浮动菜单**：提供“回到顶部”、“加载全部图片”及“在资源管理器打开”等便捷操作。
+    *   **键盘支持**：支持常用快捷键进行页面滚动和翻页。
 
-## 1. 电脑浏览器访问
-
-### 登录页
-![](images/3.png)
-
-### 文件夹列表页
-![](images/4.png)
-![](images/9.png)
-
-### 看本模式
-![](images/5.png)
-
-### 文件夹&看本 二合一模式
-![](images/8.png)
-
-## 2. 手机浏览器访问
-
-### 登录页
-![](images/1.jpeg)
+#  想法起源
 
-### 文件夹列表页
-![](images/2.png)
+想法起源：https://github.com/hect0x7/JMComic-Crawler-Python/issues/192
 
-### 看本模式
-![](images/7.jpeg)
+基于原项目：https://github.com/AiCorein/Flask-Files-Server
 
+为了方便修改，将原项目中的文件复制到本项目中，然后进行修改

plugin_jm_server-0.2.1/src/plugin_jm_server/__init__.py

@@ -0,0 +1,3 @@
+__version__ = '0.2.1'
+
+from .app import *

{plugin_jm_server-0.2.0 → plugin_jm_server-0.2.1}/src/plugin_jm_server/app.py

@@ -187,6 +187,19 @@ class JmServer:
             'images': images
         })
 
+    def api_open_file(self):
+        """
+        [New] API: Open file/folder in Explorer
+        """
+        if not self.verify():
+            return abort(403)
+            
+        path = request.args.get('path', None)
+        if not path:
+           return jsonify({'error': 'Path required'}), 400
+           
+        return self.open_directory(path) or jsonify({'status': 'ok'})
+
     def jm_view(self):
         """
         以禁漫章节的模式观看指定文件夹下的图片
@@ -409,6 +422,7 @@ class JmServer:
         self.app.add_url_rule("/spa", 'spa_view', self.spa_view, methods=['GET'])
         self.app.add_url_rule("/api/list_files", 'api_list_files', self.api_list_files, methods=['GET'])
         self.app.add_url_rule("/api/album_images", 'api_album_images', self.api_album_images, methods=['GET'])
+        self.app.add_url_rule("/api/open_file", 'api_open_file', self.api_open_file, methods=['GET'])
 
     def run(self, **kwargs):
         kwargs.setdefault('port', self.DEFAULT_PORT)

{plugin_jm_server-0.2.0 → plugin_jm_server-0.2.1}/src/plugin_jm_server/static/css/index_spa.css

@@ -70,23 +70,80 @@ a {
 .middle-controls {
     flex: 1;
     margin: 0 1rem;
-    overflow: hidden;
+    /* overflow: hidden; Removed to allow dropdown */
     display: flex;
     align-items: center;
     gap: 10px;
 }
 
+.path-input-wrapper {
+    flex: 1;
+    position: relative;
+    display: flex;
+}
+
 .path-breadcumb {
     background: var(--bg-color);
     padding: 0.25rem 0.75rem;
     border-radius: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     font-size: 0.9rem;
-    color: var(--text-sec);
+    color: var(--text-main);
     border: 1px solid var(--border-color);
-    flex: 1;
+    width: 100%;
+    outline: none;
+    transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.autocomplete-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid var(--border-color);
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 2000;
+    margin-top: 2px;
+    padding: 0;
+    list-style: none;
+}
+
+.autocomplete-item {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.autocomplete-item:hover,
+.autocomplete-item.active {
+    background-color: var(--hover-bg);
+}
+
+.autocomplete-item i {
+    color: #f59e0b;
+}
+
+.confirm-item {
+    border-bottom: 1px solid #f3f4f6;
+    color: #059669;
+    font-weight: 500;
+}
+
+.confirm-item:hover {
+    background-color: #ecfdf5 !important;
+}
+
+.path-breadcumb:focus {
+    background: var(--white);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--active-bg);
 }
 
 .btn {
@@ -232,6 +289,8 @@ a {
     background: #f3f4f6;
     border-radius: 4px;
     overflow: hidden;
+    position: relative;
+    /* Ensure relative positioning for absolute child */
 }
 
 .file-thumb img {
@@ -240,6 +299,28 @@ a {
     object-fit: cover;
 }
 
+/* Folder Indicator Badge */
+.file-item[data-type="dir"] .file-thumb::after,
+.file-item[data-type="jm"] .file-thumb::after {
+    content: '\f07b';
+    /* FontAwesome folder icon */
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    font-size: 14px;
+    color: #f59e0b;
+    background-color: white;
+    padding: 2px 4px;
+    border-top-left-radius: 4px;
+    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.file-item[data-type="jm"] .file-thumb::after {
+    color: #ef4444;
+}
+
 .file-thumb i {
     font-size: 1.2rem;
     color: #9ca3af;

{plugin_jm_server-0.2.0 → plugin_jm_server-0.2.1}/src/plugin_jm_server/static/js/index_spa.js

@@ -30,6 +30,262 @@ $(document).ready(function () {
     $('#btn-home').click(() => loadDirectory(DEFAULT_PATH));
     $('#btn-view-album').click(() => loadAlbum(currentPath));
 
+    // Path Input Navigation & Autocomplete
+    const $pathInput = $('#currentPathDisplay');
+    const $suggestions = $('#pathSuggestions');
+    let suggestionDebounce;
+    let cachedDir = null;
+    let cachedFiles = [];
+
+    $pathInput.on('keydown', function (e) {
+        const $items = $suggestions.find('li');
+        let activeIdx = $items.index($items.filter('.active'));
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if ($items.length > 0) {
+                if (activeIdx < $items.length - 1) activeIdx++;
+                else activeIdx = 0; // Cycle to top
+
+                $items.removeClass('active');
+                const $active = $items.eq(activeIdx).addClass('active');
+                // Scroll into view if needed
+                if ($active.length) {
+                    $active[0].scrollIntoView({ block: 'nearest' });
+                }
+            }
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            if ($items.length > 0) {
+                if (activeIdx > 0) activeIdx--;
+                else activeIdx = $items.length - 1; // Cycle to bottom
+
+                $items.removeClass('active');
+                const $active = $items.eq(activeIdx).addClass('active');
+                if ($active.length) {
+                    $active[0].scrollIntoView({ block: 'nearest' });
+                }
+            }
+        } else if (e.key === 'Enter') {
+            // Check if an item is active
+            if (activeIdx !== -1) {
+                e.preventDefault();
+                // Trigger click on the ACTIVE item
+                $items.eq(activeIdx).trigger('click');
+                return;
+            }
+
+            const path = $(this).val();
+            if (path) {
+                $suggestions.hide();
+                $(this).blur();
+                loadDirectory(path);
+            }
+        }
+    });
+
+    $pathInput.on('input focus', function () {
+        const val = $(this).val();
+        clearTimeout(suggestionDebounce);
+
+        suggestionDebounce = setTimeout(() => {
+            handleAutocomplete(val);
+        }, 300);
+    });
+
+    // Hide when clicking outside
+    $(document).on('click', function (e) {
+        if (!$.contains($('.path-input-wrapper')[0], e.target)) {
+            $suggestions.hide();
+        }
+    });
+
+    function handleAutocomplete(inputVal) {
+        if (!inputVal) {
+            $suggestions.hide();
+            return;
+        }
+
+        // Determine parent dir and query
+        // Handle Windows and Unix separators
+        const sep = inputVal.includes('/') ? '/' : '\\';
+        let parentDir, query;
+
+        // E.g. "D:\Downloads\Ani"
+        const lastSepIndex = Math.max(inputVal.lastIndexOf('/'), inputVal.lastIndexOf('\\'));
+
+        if (lastSepIndex === -1) {
+            // Treat specific drive letters like 'C:'
+            if (inputVal.endsWith(':')) {
+                parentDir = inputVal + '\\';
+                query = '';
+            } else {
+                // No separator? Maybe root or just typing name?
+                // Assume relative to nothing? Hard to say. 
+                // Let's assume we need to list drives or fail.
+                // For safety, if length > 1 and looks like drive:
+                if (/^[a-zA-Z]:$/.test(inputVal)) {
+                    parentDir = inputVal + '\\';
+                    query = '';
+                } else {
+                    $suggestions.hide();
+                    return;
+                }
+            }
+        } else {
+            parentDir = inputVal.substring(0, lastSepIndex);
+            // Handle root case "D:\" -> parent is "D:" which is weird in some APIs, 
+            // but usually "D:\" is better.
+            if (parentDir.endsWith(':')) parentDir += sep;
+
+            // If input is exactly "D:\" then query is empty
+            if (lastSepIndex === inputVal.length - 1) {
+                query = '';
+                // Fix parentDir to include the slash if it was stripped?
+                // Actually substring(0, index) excludes slash.
+                // So for "D:\" -> parent "D:", query ""
+                parentDir = inputVal.substring(0, lastSepIndex + 1);
+            } else {
+                query = inputVal.substring(lastSepIndex + 1).toLowerCase();
+                parentDir = inputVal.substring(0, lastSepIndex + 1);
+            }
+        }
+
+        // Fetch if needed
+        if (cachedDir !== parentDir) {
+            $.ajax({
+                url: '/api/list_files',
+                data: { path: parentDir },
+                method: 'GET',
+                success: function (res) {
+                    cachedDir = parentDir;
+                    // Filter only dirs
+                    cachedFiles = (res.files || []).filter(f => f.type === 'dir' || f.type === 'jm');
+                    renderSuggestions(cachedFiles, query, parentDir);
+                },
+                error: function () {
+                    // Fail silently or clear
+                    cachedFiles = [];
+                    cachedDir = null;
+                }
+            });
+        } else {
+            renderSuggestions(cachedFiles, query, parentDir);
+        }
+    }
+
+    function renderSuggestions(files, query, parentPath) {
+        // Files are children of parentPath. 
+        // If the user has typed a valid path that equals parentPath (so query is empty), we should offer a way to "Confirm/Go" to parentPath.
+        // OR if the user is typing, we show children.
+
+        const matches = files.filter(f => f.name.toLowerCase().startsWith(query));
+
+        $suggestions.empty();
+
+        // 1. Confirm Option (Only if we are likely at a valid path or user wants to submit current input)
+        // logic: if query is empty, it means input ends with slash (likely a dir). 
+        // We can add a "Go to <parentPath>" item.
+        if (query === '' && parentPath) {
+            // Only show confirm if the path in input is NOT different from currentPath (meaning user hasn't moved yet)
+            const inputVal = $pathInput.val();
+
+            // Utility to decode HTML entities (e.g. for paths with special chars)
+            const decodeHtml = (html) => {
+                const txt = document.createElement("textarea");
+                txt.innerHTML = html;
+                return txt.value;
+            };
+
+            // Normalize slashes for comparison
+            const normInput = inputVal.replace(/[\\/]+$/, '').replace(/\\/g, '/');
+            // Decode currentPath 
+            const decodedCurrent = decodeHtml(currentPath);
+            const normCurrent = decodedCurrent.replace(/[\\/]+$/, '').replace(/\\/g, '/');
+
+            // console.log(normInput, normCurrent); 
+
+            if (normInput !== normCurrent) {
+                const $start = $(`
+                    <li class="autocomplete-item confirm-item" data-path="${parentPath}">
+                        <i class="fas fa-check-circle" style="color: #10b981;"></i>
+                        <span>确认</span>
+                    </li>
+                `);
+                $start.on('mousedown click', function (e) {
+                    e.preventDefault();
+                    if ($pathInput) $pathInput.blur(); // Focus away
+                    loadDirectory(parentPath);
+                    $suggestions.hide();
+                });
+                $suggestions.append($start);
+            }
+        }
+
+        // Always show ".." to go up, if we are not at root (logic could be refined but always showing is safe enough)
+        // Only show if query doesn't conflict with it significantly? 
+        // Actually best to show it if matches is empty OR if query is empty or starts with '.'
+        // Let's just prepend it if parentPath has a parent.
+
+        let parentOfParent = null;
+        if (parentPath) {
+            const sep = parentPath.includes('/') ? '/' : '\\';
+            // parentPath usually ends with slash due to handleAutocomplete logic
+            let clean = parentPath;
+            if (clean.endsWith(sep)) clean = clean.slice(0, -1);
+
+            const lastSep = Math.max(clean.lastIndexOf('/'), clean.lastIndexOf('\\'));
+            if (lastSep > 0) {
+                parentOfParent = clean.substring(0, lastSep + 1);
+            } else if (clean.endsWith(':')) {
+                // Root drive, no parent usually
+            }
+        }
+
+        if (parentOfParent && (query === '' || '..'.startsWith(query))) {
+            const $li = $(`
+                <li class="autocomplete-item">
+                    <i class="fas fa-level-up-alt" style="color: #6b7280;"></i>
+                    <span>..</span>
+                </li>
+            `);
+            $li.click(function () {
+                $pathInput.val(parentOfParent);
+                $pathInput.focus();
+                $suggestions.hide();
+                handleAutocomplete(parentOfParent);
+            });
+            $suggestions.append($li);
+        }
+
+        if (matches.length === 0 && $suggestions.children().length === 0) {
+            $suggestions.hide();
+            return;
+        }
+
+        matches.slice(0, 10).forEach(f => {
+            const $li = $(`
+                <li class="autocomplete-item">
+                    <i class="fas fa-folder"></i>
+                    <span>${f.name}</span>
+                </li>
+            `);
+
+            $li.click(function () {
+                let newVal = f.path;
+
+                // Direct navigation as requested
+                $pathInput.val(newVal);
+                if ($pathInput) $pathInput.blur(); // Focus away
+                $suggestions.hide();
+                loadDirectory(newVal);
+            });
+            $suggestions.append($li);
+        });
+
+        $suggestions.show();
+    }
+
     // Bookmark Events
     $('#btn-add-bookmark').click(() => toggleCurrentBookmark());
     $('#btn-show-bookmarks').click(() => showBookmarksDrawer());
@@ -395,6 +651,9 @@ $(document).ready(function () {
                  <li style="margin-top: 15px;">
                     <a href="javascript:void(0)" id="menuLoadAll"><i class="fas fa-download"></i><span>加载全部</span></a>
                 </li>
+                <li>
+                    <a href="javascript:void(0)" id="menuOpenExplorer"><i class="fas fa-folder-open"></i><span>打开文件夹</span></a>
+                </li>
                 <li>
                     <a href="javascript:void(0)" id="menuTop"><i class="far fa-caret-square-up"></i><span>回到顶端</span></a>
                 </li>
@@ -423,6 +682,21 @@ $(document).ready(function () {
         // Menu Handlers
         $('#menuToggle').click(() => $menu.hide());
 
+        $('#menuOpenExplorer').click(() => {
+            $.ajax({
+                url: '/api/open_file',
+                data: { path: currentPath },
+                method: 'GET',
+                success: function (res) {
+                    // Feedback?
+                    // console.log('Opened');
+                },
+                error: function (err) {
+                    console.error('Failed to open explorer', err);
+                }
+            });
+        });
+
         $('#menuLoadAll').click(() => {
             // Load all remaining images
             $('#imageContainer img').each(function () {
@@ -484,7 +758,14 @@ $(document).ready(function () {
 
     /* Utils */
     function updateBreadcrumb(path) {
-        $('#currentPathDisplay').text(path);
+        // Decode entities just in case backend returned them encoded
+        const decodeHtml = (html) => {
+            const txt = document.createElement("textarea");
+            txt.innerHTML = html;
+            return txt.value;
+        };
+
+        $('#currentPathDisplay').val(decodeHtml(path));
     }
 
     function resetViewer() {

{plugin_jm_server-0.2.0 → plugin_jm_server-0.2.1}/src/plugin_jm_server/templates/index_spa.html

@@ -12,7 +12,8 @@
     <!-- Dependencies -->
     <script src="../static/js/jquery-3.7.1.min.js"></script>
     <!-- Lazy load plugin if needed or handle manually -->
-{#    <script src="../static/js/common.js"></script> <!-- Reuse common utils if any -->#}
+    {#
+    <script src="../static/js/common.js"></script> <!-- Reuse common utils if any -->#}
 </head>
 
 <body>
@@ -35,8 +36,10 @@
             </div>
 
             <div class="middle-controls">
-                <div class="path-breadcumb" id="currentPathDisplay">
-                    {{ data.currentPath }}
+                <div class="path-input-wrapper">
+                    <input type="text" class="path-breadcumb" id="currentPathDisplay" value="{{ data.currentPath }}"
+                        autocomplete="off">
+                    <ul class="autocomplete-dropdown" id="pathSuggestions" style="display:none;"></ul>
                 </div>
                 <button class="action-icon" id="btn-add-bookmark" title="收藏当前目录">
                     <i class="far fa-star"></i>
@@ -48,7 +51,7 @@
                     <i class="fas fa-bookmark"></i> 收藏夹
                 </button>
                 <button class="btn btn-primary" id="btn-view-album" title="以本子模式浏览当前目录">
-                     <i class="fas fa-images"></i> 看图
+                    <i class="fas fa-images"></i> 看图
                 </button>
                 <a href="/" class="btn btn-outline" title="返回旧版">
                     <i class="fas fa-undo"></i>
@@ -109,8 +112,8 @@
 
     <!-- Init Data -->
     <script>
-        const INITIAL_PATH = "{{ data.currentPath|replace('\\', '\\\\') }}";
-        const DEFAULT_PATH = "{{ data.defaultPath|replace('\\', '\\\\') }}";
+        const INITIAL_PATH = "{{ data.currentPath|replace('\\', '\\\\')|safe }}";
+        const DEFAULT_PATH = "{{ data.defaultPath|replace('\\', '\\\\')|safe }}";
     </script>
     <script src="../static/js/index_spa.js?t={{ randomArg }}"></script>
 </body>

{plugin_jm_server-0.2.0 → plugin_jm_server-0.2.1}/src/plugin_jm_server.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plugin_jm_server
-Version: 0.2.0
+Version: 0.2.1
 Summary: plugin_jm_server, a plugin for jmcomic that can be used to view comics in a web browser.
 Home-page: https://github.com/hect0x7/plugin-jm-server
 Author: hect0x7
@@ -44,20 +44,33 @@ Dynamic: summary
 
 * 双页阅读插件：https://sleazyfork.org/zh-CN/scripts/374903-comicread
 
-#  想法起源
+# 效果图（文件浏览、整章看图）
 
-想法起源：https://github.com/hect0x7/JMComic-Crawler-Python/issues/192
+## 1. 电脑浏览器访问
 
-基于原项目：https://github.com/AiCorein/Flask-Files-Server
+### 登录页
+![](images/3.png)
 
-为了方便修改，将原项目中的文件复制到本项目中，然后进行修改
+### 文件夹列表页
+![](images/4.png)
+![](images/9.png)
 
+### 看本模式
+![](images/5.png)
 
-# 可优化点
+### 文件夹&看本 二合一模式
+![](images/8.png)
 
-1. 前端优化。目前项目架构是`前后端不分离架构`，前端使用原始的html三件套。可以优化为前后端分离架构，基于Vue等开发框架，复用组件库，优化界面。
+## 2. 手机浏览器访问
 
-2. 后端优化。支持提供调用jmcomic功能的后端接口。
+### 登录页
+![](images/1.jpeg)
+
+### 文件夹列表页
+![](images/2.png)
+
+### 看本模式
+![](images/7.jpeg)
 
 
 # 使用方式
@@ -70,7 +83,6 @@ pip install plugin_jm_server
 ```
 
 
-
 ## 2. 运行代码
 
 * **HTTP版**
@@ -135,31 +147,41 @@ op.wait_all_plugins_finish()
 ```
 
 
-# 效果图（文件浏览、整章看图）
+## 前端页面与功能介绍
+
+本项目提供了一套完整的 Web 前端界面，用于管理和浏览本地图片资源。主要包含以下三个核心页面及其功能：
+
+### 1. 登录页
+为了保护个人隐私，系统提供了简单的访问控制。
+*   **密码验证**：启动时可配置密码，访问时需校验通过。
+*   **设备自适应**：根据访问设备（手机/电脑）自动适配最佳的登录布局。
+
+### 2. 文件夹浏览页（主页）
+这是资源管理的核心入口，支持高效的文件查找与导航。目前最新版本采用了 SPA（单页应用）架构进行全面增强：
+*   **智能路径导航**：
+    *   **路径补全**：输入路径时自动联想下级文件夹，支持键盘上下键选择及回车跳转。
+    *   **层级跳转**：输入框支持“..”快速返回上一级，并提供“确认”按钮进行精准跳转。
+*   **可视化展示**：
+    *   **文件夹预览**：鼠标悬停在文件夹上时，会自动展示该文件夹内的首张图片作为封面预览。
+    *   **类型区分**：通过文件夹角标（图标）清晰区分普通文件夹与特殊资源文件夹。
+*   **辅助功能**：
+    *   **书签管理**：支持将常看目录加入左侧书签栏，方便下次快速访问。
+    *   **本地交互**：支持通过网页菜单直接打开服务器端对应的本地文件夹窗口（Explorer）。
+
+### 3. 图片阅读页（看本模式）
+专为漫画阅读优化的沉浸式浏览页面。
+*   **加载优化**：采用图片懒加载机制，流畅浏览含有数百张图片的大型章节，节省系统资源。
+*   **多端适配**：
+    *   **PC端**：适合大屏浏览，支持浮动工具栏进行页面跳转、全屏切换等。
+    *   **移动端**：适配触摸操作，提供更好的手机阅读体验。
+*   **阅读辅助**：
+    *   **浮动菜单**：提供“回到顶部”、“加载全部图片”及“在资源管理器打开”等便捷操作。
+    *   **键盘支持**：支持常用快捷键进行页面滚动和翻页。
 
-## 1. 电脑浏览器访问
-
-### 登录页
-![](images/3.png)
-
-### 文件夹列表页
-![](images/4.png)
-![](images/9.png)
-
-### 看本模式
-![](images/5.png)
-
-### 文件夹&看本 二合一模式
-![](images/8.png)
-
-## 2. 手机浏览器访问
-
-### 登录页
-![](images/1.jpeg)
+#  想法起源
 
-### 文件夹列表页
-![](images/2.png)
+想法起源：https://github.com/hect0x7/JMComic-Crawler-Python/issues/192
 
-### 看本模式
-![](images/7.jpeg)
+基于原项目：https://github.com/AiCorein/Flask-Files-Server
 
+为了方便修改，将原项目中的文件复制到本项目中，然后进行修改

plugin_jm_server-0.2.0/src/plugin_jm_server/__init__.py

@@ -1,3 +0,0 @@
-__version__ = '0.2.0'
-
-from .app import *