add cache panel

This commit is contained in:
nextfu 2020-04-12 16:56:00 +08:00
parent 0e57ce3838
commit 22d4484293
3 changed files with 72 additions and 11 deletions

View File

@ -47,6 +47,7 @@
</div> </div>
<v-icon @click="openCocosDocs" small>mdi-cloud-search</v-icon> <v-icon @click="openCocosDocs" small>mdi-cloud-search</v-icon>
<v-icon @click="openCocosForum" small>mdi-forum</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> <v-icon @click="openGithub" small>mdi-home</v-icon>
</div> </div>
</v-app-bar> </v-app-bar>
@ -146,12 +147,44 @@
</v-container> </v-container>
</v-content> </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> </v-app>
<script src="ccc-devtools/libs/js/vue.min.js"></script> <script src="ccc-devtools/libs/js/vue.min.js"></script>
<script src="ccc-devtools/libs/js/vuetify.js"></script> <script src="ccc-devtools/libs/js/vuetify.js"></script>
<script src="ccc-devtools/config.js"></script> <script src="ccc-devtools/config.js"></script>
<script src="ccc-devtools/libs/js/cc-console-utils.js"></script> <script src="ccc-devtools/libs/js/cc-console-utils.js"></script>
<script src="ccc-devtools/preview.js"></script> <script src="ccc-devtools/preview.js"></script>
<!-- app/editor/static/preview-templates/ -->

View File

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

View File

@ -5,6 +5,20 @@ const app = new Vue({
}), }),
data: { data: {
drawer: false, 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: [], treeData: [],
selectedNodes: [], selectedNodes: [],
intervalId: -1, intervalId: -1,
@ -18,6 +32,11 @@ const app = new Vue({
initConsoleUtil(); initConsoleUtil();
}); });
}, },
watch: {
cacheOnlyTexture() {
this.updateCacheData();
}
},
computed: { computed: {
treeFilter() { treeFilter() {
return (item, search, textKey) => item[textKey].indexOf(search) > -1; return (item, search, textKey) => item[textKey].indexOf(search) > -1;
@ -116,6 +135,18 @@ const app = new Vue({
drawNodeRect() { drawNodeRect() {
cc.where(this.selectedNode); 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() { openGithub() {
window.open('https://github.com/potato47/ccc-devtools'); window.open('https://github.com/potato47/ccc-devtools');
}, },