add cache panel

index.html

@@ -47,6 +47,7 @@
             </div>
             <v-icon @click="openCocosDocs" small>mdi-cloud-search</v-icon>
             <v-icon @click="openCocosForum" small>mdi-forum</v-icon>
+            <v-icon @click="openCacheDialog" small>mdi-table</v-icon>
             <v-icon @click="openGithub" small>mdi-home</v-icon>
         </div>
     </v-app-bar>
@@ -146,6 +147,40 @@
         </v-container>
     </v-content>
 
+    <v-dialog v-model="cacheDialog" persistent scrollable>
+        <v-card>
+            <v-card-title>
+                {{ cacheTitle }}
+                <v-spacer></v-spacer>
+                <v-text-field v-model="cacheSearchText" append-icon="mdi-magnify" label="Search" single-line
+                    hide-details>
+                </v-text-field>
+            </v-card-title>
+            <v-divider></v-divider>
+            <v-card-text>
+                <v-data-table :headers="cacheHeaders" :items="cacheData" :search="cacheSearchText" :sort-by="['size']"
+                    :sort-desc="[true]">
+                    <template v-slot:item.size="{ item }">
+                        {{ item.size == -1 ? '_' : (item.size +'MB') }}
+                    </template>
+                    <template v-slot:item.preview="{ item }">
+                        <div style="height: 60px;display: flex;align-items: center;">
+                            <img :src="window.location.protocol + '//' + window.location.host + '/' + item.preview"
+                                style="max-height: 60px;max-width: 120px;" v-if="item.preview">
+                            <template v-else>_</template>
+                        </div>
+                    </template>
+                </v-data-table>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-btn color="blue darken-1" text @click="cacheDialog = false">Close</v-btn>
+                <v-spacer></v-spacer>
+                <v-switch v-model="cacheOnlyTexture" label="只显示纹理"></v-switch>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
 </v-app>
 
 <script src="ccc-devtools/libs/js/vue.min.js"></script>
@@ -153,5 +188,3 @@
 <script src="ccc-devtools/config.js"></script>
 <script src="ccc-devtools/libs/js/cc-console-utils.js"></script>
 <script src="ccc-devtools/preview.js"></script>
-
-<!-- app/editor/static/preview-templates/ -->

libs/js/cc-console-utils.js

@@ -115,13 +115,12 @@ const initConsoleUtil = function () {
         }, 2000);
         return target;
     }
-    cc.total = function () {
+    cc.cache = function () {
         let rawCacheData = cc.loader._cache;
         let cacheData = [];
         let totalTextureSize = 0;
         for (let k in rawCacheData) {
             let item = rawCacheData[k];
-            // console.log(item)
             if (item.type !== 'js' && item.type !== 'json') {
                 let itemName = '_';
                 let preview = '';
@@ -151,19 +150,17 @@ const initConsoleUtil = function () {
                     }
                 }
                 cacheData.push({
-                    // queueId: item.queueId,
+                    queueId: item.queueId,
                     type: item.type,
                     name: itemName,
-                    // preview: preview,
+                    preview: preview,
                     id: item.id,
                     content: content,
                     size: formatSize
                 });
             }
         }
-        // let cacheTitle = `缓存 [文件总数:${cacheData.length}][纹理缓存:${totalTextureSize.toFixed(2) + 'M'}]`;
-        // console.log(cacheTitle);
-        // console.table(cacheData);
-        return totalTextureSize.toFixed(2) + 'M';
+        let cacheTitle = `缓存 [文件总数:${cacheData.length}][纹理缓存:${totalTextureSize.toFixed(2) + 'M'}]`;
+        return [cacheData, cacheTitle];
     }
 }

preview.js

@@ -5,6 +5,20 @@ const app = new Vue({
     }),
     data: {
         drawer: false,
+        cacheDialog: false,
+        cacheTitle: '',
+        cacheHeaders: [
+            { text: 'Type', value: 'type' },
+            { text: 'Name', value: 'name' },
+            { text: 'Preivew', value: 'preview' },
+            { text: 'ID', value: 'id' },
+            { text: 'Content', value: 'content' },
+            { text: 'Size', value: 'size' },
+        ],
+        cacheRawData: [],
+        cacheData: [],
+        cacheSearchText: null,
+        cacheOnlyTexture: true,
         treeData: [],
         selectedNodes: [],
         intervalId: -1,
@@ -18,6 +32,11 @@ const app = new Vue({
             initConsoleUtil();
         });
     },
+    watch: {
+        cacheOnlyTexture() {
+            this.updateCacheData();
+        }
+    },
     computed: {
         treeFilter() {
             return (item, search, textKey) => item[textKey].indexOf(search) > -1;
@@ -116,6 +135,18 @@ const app = new Vue({
         drawNodeRect() {
             cc.where(this.selectedNode);
         },
+        updateCacheData() {
+            if (this.$data.cacheOnlyTexture) {
+                this.$data.cacheData = this.$data.cacheRawData.filter(item => item.content === 'cc.Texture2D');
+            } else {
+                this.$data.cacheData = this.$data.cacheRawData;
+            }
+        },
+        openCacheDialog() {
+            [this.$data.cacheRawData, this.$data.cacheTitle] = cc.cache();
+            this.updateCacheData();
+            this.$data.cacheDialog = true;
+        },
         openGithub() {
             window.open('https://github.com/potato47/ccc-devtools');
         },