Skip to content

Commit 022703a

Browse files
XPoetXPoet
committed
pref: optimize image hosting management
1 parent 78fa74c commit 022703a

3 files changed

Lines changed: 107 additions & 26 deletions

File tree

‎src/store/index.js‎

Lines changed: 65 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,24 @@ export default new Vuex.Store({
5656
cleanObject(state.userConfigInfo)
5757
},
5858

59+
// 用户配置信息 - 增加目录
60+
USER_CONFIG_INFO_ADD_DIR(state, dir) {
61+
if (!state.userConfigInfo.dirList.some(v => v.value === dir)) {
62+
state.userConfigInfo.dirList.push({label: dir, value: dir})
63+
this.commit('PERSIST_USER_CONFIG_INFO')
64+
}
65+
},
66+
67+
// 用户配置信息 - 删除目录列表的某个目录
68+
USER_CONFIG_INFO_REMOVE_DIR(state, dir) {
69+
const dirList = state.userConfigInfo.dirList
70+
if (dirList.some(v => v.value === dir)) {
71+
const rmIndex = dirList.findIndex(v => v.value === dir)
72+
dirList.splice(rmIndex, 1)
73+
this.commit('PERSIST_USER_CONFIG_INFO')
74+
}
75+
},
76+
5977
// 持久化用户配置信息
6078
PERSIST_USER_CONFIG_INFO(state) {
6179
localStorage.setItem(PICX_CONFIG, JSON.stringify(state.userConfigInfo))
@@ -86,37 +104,74 @@ export default new Vuex.Store({
86104
// =========================================================
87105
// 图床管理 - 增加图片
88106
DIR_IMAGE_LIST_ADD_IMAGE({state, dispatch}, item) {
89-
if (state.dirImageList.length > 0) {
90-
state.dirImageList.find(v => v.dir === item.dir).imageList.push(item)
107+
const temp = state.dirImageList.find(v => v.dir === item.dir)
108+
if (temp) {
109+
temp.imageList.push(item)
91110
dispatch('DIR_IMAGE_LIST_PERSIST')
92111
}
93112
},
94113

95114
// 图床管理 - 往指定目录增加图片列表
96115
DIR_IMAGE_LIST_ADD_IMAGE_LIST({state, dispatch}, dirImageItem) {
97-
state.dirImageList.find(v => v.dir === dirImageItem.dir).imageList = dirImageItem.imageList
116+
117+
const temp = state.dirImageList.find(v => v.dir === dirImageItem.dir)
118+
119+
if (temp) {
120+
temp.imageList = dirImageItem.imageList
121+
} else {
122+
state.dirImageList.push(dirImageItem)
123+
}
124+
98125
dispatch('DIR_IMAGE_LIST_PERSIST')
126+
99127
},
100128

101129
// 图床管理 - 增加目录
102-
DIR_IMAGE_LIST_ADD_DIR({state, dispatch}, dirItem) {
103-
if (dirItem.dir === '/') {
104-
state.dirImageList.unshift(dirItem)
105-
} else {
106-
state.dirImageList.push(dirItem)
130+
DIR_IMAGE_LIST_ADD_DIR({state, dispatch}, dir) {
131+
if (!state.dirImageList.some(v => v.dir === dir)) {
132+
const dirObj = {dir: dir, imageList: []}
133+
134+
if (dir === '/') {
135+
state.dirImageList.unshift(dirObj)
136+
} else {
137+
state.dirImageList.push(dirObj)
138+
}
139+
dispatch('DIR_IMAGE_LIST_PERSIST')
140+
}
141+
},
142+
143+
// 图床管理 - 删除目录
144+
DIR_IMAGE_LIST_REMOVE_DIR({state, dispatch}, dir) {
145+
if (state.dirImageList.some(v => v.dir === dir)) {
146+
const rmIndex = state.dirImageList.findIndex(v => v.dir === dir)
147+
// 删除目录
148+
state.dirImageList.splice(rmIndex, 1)
149+
dispatch('DIR_IMAGE_LIST_PERSIST')
107150
}
108-
dispatch('DIR_IMAGE_LIST_PERSIST')
109151
},
110152

111153

112154
// 图床管理 - 删除指定目录里的指定图片
113-
DIR_IMAGE_LIST_REMOVE({state, dispatch}, item) {
155+
DIR_IMAGE_LIST_REMOVE({state, dispatch, commit}, item) {
114156
if (state.dirImageList.length > 0) {
115157
const temp = state.dirImageList.find(v => v.dir === item.dir)
116158
if (temp) {
117159
const rmIndex = temp.imageList.findIndex(v => v.uuid === item.uuid)
118160
if (rmIndex !== -1) {
161+
162+
// 删除图片
119163
temp.imageList.splice(rmIndex, 1)
164+
165+
// 如果 imageList.length 为 0，需删除该目录
166+
if (temp.imageList.length === 0) {
167+
168+
// userConfigInfo.dirList 中删除目录
169+
dispatch('DIR_IMAGE_LIST_REMOVE_DIR', temp.dir)
170+
171+
// dirImageList 中删除目录
172+
commit('USER_CONFIG_INFO_REMOVE_DIR', temp.dir)
173+
}
174+
120175
dispatch('DIR_IMAGE_LIST_PERSIST')
121176
}
122177
}

‎src/views/Management.vue‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
@change="dirChange"
2121
>
2222
<el-option
23-
v-for="item in dirImageList"
24-
:label="item.dir"
25-
:value="item.dir"
23+
v-for="item in userConfigInfo.dirList"
24+
:label="item.label"
25+
:value="item.value"
2626
>
2727
</el-option>
2828
</el-select>
@@ -78,10 +78,12 @@
7878
!loggingStatus && this.$router.push('config')
7979
},
8080
81-
8281
dirImageList: {
8382
handler: function (e) {
84-
this.currentDirImageList = e.find(v => v.dir === this.userConfigInfo.selectedDir).imageList
83+
const temp = e.find(v => v.dir === this.userConfigInfo.selectedDir)
84+
if (temp) {
85+
this.currentDirImageList = temp.imageList
86+
}
8587
},
8688
deep: true
8789
}
@@ -109,12 +111,13 @@
109111
return
110112
}
111113
112-
113114
const selectedDir = this.userConfigInfo.selectedDir
114115
const targetDirObj = this.dirImageList.find(v => v.dir === selectedDir)
115116
116117
if (!targetDirObj) {
117-
this.getDirContent(selectedDir)
118+
if (this.isHasDir(selectedDir)) {
119+
this.getDirContent(selectedDir)
120+
}
118121
return
119122
}
120123
@@ -140,24 +143,33 @@
140143
console.log('res: ', res);
141144
if (res && res.status === 200 && res.data.length > 0) {
142145
143-
this.$store.dispatch('DIR_IMAGE_LIST_ADD_DIR', {dir: '/', imageList: []})
146+
this.$store.dispatch('DIR_IMAGE_LIST_ADD_DIR', '/')
144147
145148
for (const item of res.data) {
146149
if (item.type === 'dir') {
147150
148-
this.$store.dispatch('DIR_IMAGE_LIST_ADD_DIR', {dir: item.name, imageList: []})
151+
this.$store.dispatch('DIR_IMAGE_LIST_ADD_DIR', item.name)
149152
150153
} else if (item.type === 'file' && isImage(filenameHandle(item.name).suffix)) {
151154
152-
this.$store.dispatch('DIR_IMAGE_LIST_ADD_IMAGE', this.getImageObject(item))
155+
this.$store.dispatch('DIR_IMAGE_LIST_ADD_IMAGE', this.getImageObject(item, '/'))
153156
}
154157
}
155158
156-
this.getDirContent(this.userConfigInfo.selectedDir)
159+
// 如果 userConfig.dirList 无 selectedDir，则切换显示根目录下（ / ）图片
160+
if (!this.isHasDir(this.userConfigInfo.selectedDir)) {
161+
this.userConfigInfo.selectedDir = '/'
162+
}
163+
this.dirChange(this.userConfigInfo.selectedDir)
164+
157165
}
158166
})
159167
},
160168
169+
isHasDir(selectedDir) {
170+
return this.userConfigInfo.dirList.some(v => v.value === selectedDir)
171+
},
172+
161173
// 获取指定目录的内容
162174
getDirContent(selectedDir) {
163175
@@ -178,22 +190,21 @@
178190
const tempImageList = []
179191
for (const item of res.data) {
180192
if (item.type === 'file' && isImage(filenameHandle(item.name).suffix)) {
181-
tempImageList.push(this.getImageObject(item))
193+
tempImageList.push(this.getImageObject(item, selectedDir))
182194
}
183195
}
184196
temp.imageList = tempImageList
185197
this.$store.dispatch('DIR_IMAGE_LIST_ADD_IMAGE_LIST', temp)
186198
this.loadingImageList = false
187199
}
188200
})
189-
190201
},
191202
192-
getImageObject(item) {
203+
getImageObject(item, selectedDir) {
193204
if (isImage(filenameHandle(item.name).suffix)) {
194205
return {
195206
uuid: getUuid(),
196-
dir: this.userConfigInfo.selectedDir,
207+
dir: selectedDir,
197208
name: item.name,
198209
path: item.path,
199210
sha: item.sha,
@@ -207,7 +218,7 @@
207218
208219
dirChange(dir) {
209220
const targetDirObj = this.dirImageList.find(v => v.dir === dir)
210-
if (!targetDirObj.imageList.length) {
221+
if (!targetDirObj || !targetDirObj.imageList.length) {
211222
this.getDirContent(dir)
212223
return
213224
}

‎src/views/Upload.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,22 @@
331331
deleting: false
332332
}
333333
334+
335+
// 如果 userConfigInfo.dirList 不存在该目录，则增加
336+
if (!this.userConfigInfo.dirList.some(v => v.value === item.dir)) {
337+
338+
// userConfigInfo 增加目录
339+
this.$store.commit('USER_CONFIG_INFO_ADD_DIR', item.dir)
340+
341+
// dirImageList 增加目录
342+
this.$store.dispatch('DIR_IMAGE_LIST_ADD_DIR', item.dir)
343+
344+
}
345+
346+
// uploadedList 增加图片
334347
this.$store.dispatch('UPLOADED_LIST_ADD', item)
348+
349+
// dirImageList 增加图片
335350
this.$store.dispatch('DIR_IMAGE_LIST_ADD_IMAGE', item)
336351
},
337352

0 commit comments

Comments
 (0)