文件浏览功能

admin/dashboard/templates/file_browser.html

@@ -11,20 +11,20 @@
                     <span>文件浏览</span>
                     <div style="float: right;">
                         <el-input
-                            v-model="currentPath"
+                            v-model="fileBrowser.currentPath"
                             placeholder="当前路径"
                             style="width: 300px; margin-right: 10px;"
                             readonly>
                         </el-input>
-                        <el-button type="primary" size="small" @click="navigateUp">
+                        <el-button type="primary" size="small" @click="fileBrowser.navigateUp">
                             <i class="el-icon-arrow-up"></i> 上级目录
                         </el-button>
                     </div>
                 </div>
                 <el-table
-                    :data="fileList"
+                    :data="fileBrowser.fileList"
                     style="width: 100%"
-                    v-loading="loading">
+                    v-loading="fileBrowser.loading">
                     <el-table-column
                         prop="name"
                         label="名称"
@@ -32,7 +32,7 @@
                         <template slot-scope="scope">
                             <el-link
                                 :type="scope.row.is_dir ? 'primary' : 'info'"
-                                @click="scope.row.is_dir ? navigateTo(scope.row.name) : null">
+                                @click="scope.row.is_dir ? fileBrowser.navigateTo(scope.row.name) : null">
                                 <i :class="scope.row.is_dir ? 'el-icon-folder' : 'el-icon-document'"></i>
                                 [[ scope.row.name ]]
                             </el-link>
@@ -51,7 +51,7 @@
                         label="大小"
                         width="120">
                         <template slot-scope="scope">
-                            [[ scope.row.is_dir ? '-' : formatFileSize(scope.row.size) ]]
+                            [[ fileBrowser.formatFileSize(scope.row.size) ]]
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -59,7 +59,7 @@
                         label="修改时间"
                         width="180">
                         <template slot-scope="scope">
-                            [[ formatDate(scope.row.modified) ]]
+                            [[ fileBrowser.formatDate(scope.row.modified) ]]
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -70,7 +70,7 @@
                                 v-if="!scope.row.is_dir"
                                 type="primary"
                                 size="mini"
-                                @click="downloadFile(scope.row.name)">
+                                @click="fileBrowser.downloadFile(scope.row.name)">
                                 下载
                             </el-button>
                         </template>
@@ -84,20 +84,31 @@
 
 {% block scripts %}
 <script>
-new Vue({
+// 扩展基础Vue实例
-    el: '#app',
+Object.assign(baseApp, {
-    delimiters: ['[[', ']]'],
     data() {
         return {
+            ...baseApp.data(),
+            fileBrowser: {
                 currentPath: '',
                 fileList: [],
                 loading: false
             }
+        }
     },
     created() {
-        this.loadFiles('');
+        // 调用原始created方法
+        if (baseApp.created) {
+            baseApp.created.call(this);
+        }
+        // 设置当前视图为文件浏览
+        this.currentView = '15';
+        // 加载文件列表
+        this.fileBrowser.loadFiles('');
     },
     methods: {
+        ...baseApp.methods,
+        fileBrowser: {
             formatFileSize(bytes) {
                 if (bytes === 0) return '0 B';
                 const k = 1024;
@@ -149,6 +160,7 @@ new Vue({
                 window.location.href = '/api/download_file?path=' + encodeURIComponent(filePath);
             }
         }
+    }
 });
 </script>
 {% endblock %}