lion/lionwebsite-frontend-desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增单独的标签，移除了以前一整个的标签。允许新增、删除标签。允许对本子进行标记（与标签关联）与取消标记。重写了标签查找。确保所有接口都带有授权码。优化了搜索任务的显示。修复刚提交下载时的任务有概率没有简单名称的bug。(同步更新)

Browse Source
This commit is contained in:
chuzhongzai 2023-05-07 21:18:05 +08:00
parent 6644d420db
commit b27530657b
3 changed files with 423 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/components/DashBoard.vue
View File

@ -10,12 +10,22 @@
<el-option value="keyword" label="关键字"/>
<el-option value="tag" label="标签"/>
</el-select>
<el-input style="width: 200px;" v-model="param" v-if="type !== 'tag'">
<template #prepend>
参数:
<el-input style="width: 250px;" v-model="param" class="el-input"></el-input>
</template>
</el-input>
<div v-if="type === 'tag'">
<el-tag v-for="tid in paramForTags" closable @close="removeQueryTag(tid)">
{{store.state.tags.get(tid).tag}}
</el-tag>
<el-autocomplete v-model="param" :fetch-suggestions="completeQueryTag" @select="handleTagSelect" ref="tagInput" placeholder="检索标签"/>
</div>
</el-col>
<el-col>
<el-button @click="queryRemoteTask" v-show="type === 'link'">远程查询</el-button>
<el-button @click="queryLocalTask">当前页查询</el-button>
<el-button @click="removeAllQueryTag" v-show="type === 'tag'">清空查询标签</el-button>
</el-col>
</el-row>
<br>
@ -27,6 +37,7 @@
<el-switch @click="toggleStyle" v-model="isDark">夜间模式</el-switch>
<hr>
<el-button @click="isQuerying = true">里站搜索</el-button>
<el-button @click="isViewingTag = true">查看标签</el-button>
<div v-show="thumbnailGallery !== {}">
<span>
{{thumbnailGallery.shortName}}<br>
@ -53,11 +64,14 @@
</el-select>
</tr>
<tr v-if="chosenGallery.availableResolution">
自定义标签:<el-input v-model="tag"/>
标签:<el-tag v-for="tid in paramForTags" closable @close="removeQueryTag(tid)">
{{store.state.tags.get(tid).tag}}
</el-tag>
<el-autocomplete v-model="param" :fetch-suggestions="completeQueryTag" @select="handleTagSelect" ref="tagInputForSubmit"/>
</tr>
</table>
<el-button @click="postTask" v-if="chosenGallery.availableResolution">下载</el-button>
<el-button @click="removeAllQueryTag" v-if="chosenGallery.availableResolution">清空标签</el-button>
<tr v-if="chosenGallery.status === '下载完成'">
<el-button @click="onlineGalleryReader(chosenGallery.gid)">在线预览</el-button>
<el-button @click="showThumbnailGallery(chosenGallery)">查看封面图</el-button>
@ -133,6 +147,33 @@
</template>
</el-dialog>
<el-dialog title="查看标签" v-model="isViewingTag" style="margin-top: 0; width: 550px">
<div style="text-align: center">
输入关键字:<el-input style="width: 150px" v-model="tagKeyWord"></el-input>
<el-button @click="tagKeyWord = ''">清空</el-button>
<el-button @click="pullNewTag">刷新</el-button>
</div>
<el-table :data="tags" height="450px" stripe>
<el-table-column prop="id" label="id" width="50px" sortable/>
<el-table-column prop="tag" label="标签" width="300px" sortable/>
<el-table-column prop="usage" label="用量" width="75px" sortable/>
<el-table-column width="75px">
<template #default="scoped">
<el-button v-if="scoped.row.usage === 0" @click="deleteTag(scoped.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<span style="color: red; font: bold 15px sans-serif">
创建标签前先看看有没有符合的，尽量用统一一点的标签，比如已经有个图包就不要创建图集之类的了。毕竟标签多起来数据挺多的。
</span>
<template #footer>
输入新标签:<el-input v-model="tag"></el-input>
<el-button @click="postTag">创建标签</el-button>
</template>
</el-dialog>
<div class="DashBoard" v-show="!loadComplete">
<el-input v-model="AuthCode" placeholder="请输入授权码" style="padding-top: 200px"/> <br>
<el-checkbox v-model="isRemember">是否记住授权码</el-checkbox>
@ -145,17 +186,19 @@ import store from "../store";
import {computed, ref, onMounted} from "vue";
import {ElMessage} from "element-plus"
import axios from "axios";
import qs from "qs";
//授权码相关
let AuthCode = ref("")
let isRemember = ref(false)
let isAlterAuthCode = ref(false)
let isConfigDarkMode = ref(false)
let isDark = ref(false)
let newAuthCode = ref("")
let tempAuthCode = ref("")
let isQuerying = ref(false)
let isViewingTag = ref(false)
let isConfigDarkMode = ref(false)
let isDark = ref(false)
let keyword = ref("")
let galleries = ref([])
let queryPage = ref({})
@ -164,15 +207,19 @@ let darkConfig = ref({})
//查询相关
let type = ref("link")
let param = ref("")
let paramForTags = ref([]) //tidS
let targetResolution = ref("")
let tag = ref("")
let tagKeyWord = ref("") //查询tag的关键字
let realAuthCode = computed(() => {
return store.state.AuthCode
})
let chosenGallery = computed(() => {
paramForTags.value.splice(0)
param.value = ''
return store.state.chosenGallery
})
@ -182,11 +229,40 @@ let loadComplete = computed(() => {
let weekUsed = computed(() => {
return store.state.weekUsed
})
let tags = computed(() => {
let tags = store.state.tags
let result = []
tags.forEach((tag) => {
result.push(tag)
})
if(isViewingTag.value) { //正在查看标签
if (tagKeyWord.value.trim() === '')
return result
else
return result.filter((tag) => {
return tag.tag.includes(tagKeyWord.value)
})
}
return result
})
let thumbnailGallery = computed(() => {
return store.state.thumbnailGallery
})
function pullNewTag(){
store.dispatch("loadTags")
}
function postTag(){
store.dispatch("postTag", tag.value)
}
function deleteTag(tid){
store.dispatch("deleteTag", tid)
}
//修改授权码
function alterAuthCode(){
if(newAuthCode.value.trim() === "" || tempAuthCode.value.trim() === "" || newAuthCode.value !== tempAuthCode.value)
@ -204,7 +280,7 @@ function queryWeekUsedAmount(){
}
//提交任务
function postTask(){
if(!validateLink(param.value)){
if(!validateLink(chosenGallery.value.link)){
ElMessage("链接错误")
return
}
@ -212,11 +288,11 @@ function postTask(){
ElMessage("请选择分辨率再提交")
return
}
let tempLink = coverLink(param.value)
let tempLink = coverLink(chosenGallery.value.link)
store.dispatch("postGalleryTask",
{link: tempLink,
targetResolution: targetResolution.value,
tag:tag.value})
tags:paramForTags.value})
targetResolution.value = ""
}
@ -238,10 +314,89 @@ function queryLocalTask(){
store.commit("_searchLocalByKeyword", param.value)
break
case "tag":
store.commit("_searchLocalByTag", param.value.includes(",") ? param.value.split(","): [param.value])
store.commit("_searchLocalByTag", paramForTags.value)
break
}
}
let tagInput = ref({}) //用于查询
let tagInputForSubmit = ref({}) //用于提交
function completeQueryTag(keyWord, cb) {
if(keyWord.includes(' ')) { //查询多个标签的时候
let temp = keyWord.split(' ')
keyWord = temp[temp.length - 1]
}else{ //只有一个标签的时候
keyWord = param.value
}
let result = []
let skip
let hit = false //用于检测是否有重复标签
tags.value.forEach((tag) => {
if(tag.tag.includes(keyWord)) {
skip = false
for (let id of paramForTags.value) { //跳过已选中的标签
if(tag.id === id){
if(!hit && tag.tag === keyWord){ //是否命中标签
hit = true
}
skip = true
break
}
}
if(!skip)
result.push({value: tag.tag, tid: tag.id})
}
})
if(result.length === 0 && chosenGallery.value.gid !== undefined && !hit){ //未命中结果并且准备与下载任务一并提交
result.push({value: '新建 #' + keyWord + ' 标签?', tag:keyWord})
}
cb(result)
}
function removeQueryTag(tid){
for (let i=0; i<paramForTags.value.length; i++){
if(paramForTags.value[i] === tid){
paramForTags.value.splice(i, 1)
break
}
}
if(chosenGallery.value.gid === undefined) //查询本地标签
queryLocalTask()
}
function removeAllQueryTag(){
paramForTags.value.splice(0)
if(chosenGallery.value.gid === undefined) //查询本地标签
queryLocalTask()
}
function handleTagSelect(data){
if('tag' in data){ //需要新建,不知道怎么处理回调，直接把axios搬到vue里面
axios.post("http://downloader.lionwebsite.xyz/GalleryManage/tag?" + qs.stringify({
tag:data.tag,
AuthCode: store.state.AuthCode
})
).then((res) => {
if (res.data.result === 'success') {
ElMessage('创建标签成功')
paramForTags.value.push(parseInt(res.data.tid))
tagInputForSubmit.value.blur()
store.dispatch("loadTags", false).then()
}
else
ElMessage(res.data.data)
})}else{
paramForTags.value.push(data.tid)
console.log(chosenGallery)
if(chosenGallery.value.gid === undefined){
queryLocalTask()
tagInput.value.blur()
}else{
tagInputForSubmit.value.blur()
}
}
param.value = ''
}
function resetLocalQuery(){
store.commit("_searchLocalByKeyword", "")
param.value = ""

80
src/components/Side.vue
View File

@ -23,7 +23,7 @@
</span>
<el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.download === undefined">删除</el-button>
<el-button @click="editGalleryTag(props.row.gid, props.row.tag)">编辑标签</el-button>
<el-button @click="editGalleryTag(props.row)">编辑标签</el-button>
<el-button @click="updateGallery(props.row.link)" :disabled="props.row.download === undefined">更新</el-button>
<el-button @click="shareGallery({gid:props.row.gid, shortName:props.row.shortName + '.zip'})" v-show="isLion">分享</el-button>
</template>
@ -95,20 +95,20 @@
</el-row>
</div>
<el-dialog v-model="isEditingTag" title="编辑标签">
<el-dialog v-model="isEditingTag" title="编辑本子标签">
<el-form>
<el-form-item>
<template #label>
标签:
</template>
<template #default>
<el-input v-model="tempTag"></el-input>
<el-tag v-for="tid in galleryForTag.tags" closable @close="disMark(galleryForTag.gid, tid)">
{{tags.get(tid).tag}}
</el-tag>
<el-autocomplete v-model="newTag" :fetch-suggestions="querySimilarTag" @select="handleTagSelect" ref="tagInput"/>
</template>
</el-form-item>
</el-form>
<el-footer>
<el-button @click="submitGalleryTag()">提交修改</el-button>
</el-footer>
</el-dialog>
<el-dialog v-model="isOnlineReading" title="在线预览" @close="closeOnlineReading" width="90%" style="margin-top: 0; margin-bottom: 0; padding: 0">
@ -136,8 +136,7 @@ let isEditingPage = ref(false)
let isEditingTag = ref(false)
//临时变量
let tempTag = ref("")
let tempGid = ref("")
let galleryForTag = ref({})
let category = ref("myDownload") //myDownload myCollect total
let galleryNameType = ref("shortName") // shortName name
@ -192,6 +191,12 @@ let imagePadding = computed(() => {
return store.state.imagePadding
})
//标签
let tags = computed(() => {
return store.state.tags
})
let newTag = ref("")
//翻页
function next() {
if(targetPage.value < max.value) {
@ -243,16 +248,59 @@ function changeGalleryCollect(gid, isCollect){
else
store.dispatch("collectGallery", gid)
}
function editGalleryTag(gid, tag){
tempTag.value = tag
tempGid.value = gid
function editGalleryTag(gallery){
galleryForTag.value = gallery
isEditingTag.value = true
}
function submitGalleryTag(){
store.dispatch("updateGalleryTag", {gid:tempGid.value, tag:tempTag.value})
tempTag.value = ''
tempGid.value = ''
isEditingTag.value = false
let tagInput = ref()
function querySimilarTag(keyWord, cb){
let result = []
let hit = false //用于检测是否有重复标签
let skip //用于过滤已经有了的标签
for(const [key, tag] of store.state.tags){
skip = false
for(let id of galleryForTag.value.tags)
if(id === key) {
if(!hit && tag.tag === keyWord) //是否命中标签
hit = true
skip = true
break
}else{
console.log("id:", id, key)
}
if(skip)
continue
if(tag.tag.includes(keyWord))
result.push({value: tag.tag, tag:tag})
}
if(keyWord.trim() !== '' && !hit && !keyWord.includes("?") && result.length === 0)
result.push({value: '新建 #' + keyWord + ' 标签?', tag:{tag:keyWord}})
cb(result)
}
function handleTagSelect(data){
if(data.value.includes('#')) {
if(data.tag.tag.includes("?")) {
ElMessage("非法字符?")
return
}
else
store.dispatch("createTagAndMark", {tag: data.tag.tag.replace('#', ''), gid: galleryForTag.value.gid})
}
else
store.dispatch("mark", {gid:galleryForTag.value.gid, tid:data.tag.id})
newTag.value = ""
tagInput.value.blur()
}
function mark(gid, tid){
store.dispatch("mark", {gid, tid})
}
function disMark(gid, tid){
store.dispatch("disMark", {gid, tid})
}
//下载，删除，在线看

246
src/store/index.js
View File

@ -35,15 +35,17 @@ const actions = {
})
},
postGalleryTask(context, data){
axios.post(GalleryManageUrl, qs.stringify({
axios.post(GalleryManageUrl + '?' + qs.stringify({
AuthCode: state.AuthCode,
link: data.link,
targetResolution: data.targetResolution,
tag: data.tag
})).then((res) => {
tags: data.tags
}, {indices:false})).then((res) => {
if(res.data.result === "success") {
ElMessage("提交成功")
context.commit("_setChosenGallery", {gallery: false, resolution:data.targetResolution, tag: data.tag})
context.commit("_setChosenGallery", {gallery: false,
resolution:data.targetResolution,
tags: data.tags})
if(state.galleryRefreshTimer === 0)
state.galleryRefreshTimer = setInterval(() => {
context.dispatch("updateGalleryTasks", "undone").then()
@ -111,6 +113,7 @@ const actions = {
if(res.data.result === 'success'){
context.commit("_authed", {AuthCode, ...JSON.parse(res.data.data)})
//初始化
context.dispatch("loadTags", true).then()
context.dispatch("loadWeekUsedAmount").then()
context.dispatch("updateGalleryTasks", "all").then(() => confirmCurrentTask(context.state))
@ -145,10 +148,85 @@ const actions = {
ElMessage("查询用量失败")
})
},
loadTags(context, isShowTip){
axios.get(GalleryManageUrl + "/allTag", {
params: {
AuthCode: state.AuthCode
}
}).then((res) => {
if(res.data.result === "success"){
context.commit("_loadTags", JSON.parse(res.data.data))
if(isShowTip)
ElMessage("加载标签成功")
}else
ElMessage(res.data.data)
})
},
postTag(context, tag){
axios.post(GalleryManageUrl + "/tag?" + qs.stringify({
tag,
AuthCode: state.AuthCode
})
).then((res) => {
if (res.data.result === 'success') {
ElMessage('创建标签成功')
context.commit("_postTag", {tag:tag, id:parseInt(res.data.tid), usage: 0})
}
else
ElMessage(res.data.data)
})
},
deleteTag(context, tid){
axios.delete(GalleryManageUrl + "/tag?" + qs.stringify({
tid,
AuthCode: state.AuthCode
})).then((res) => {
if (res.data.result === 'success') {
ElMessage('删除标签成功')
context.commit("_deleteTag", tid)
}
else
ElMessage(res.data.data)
})
},
mark(context, data){
data.AuthCode = context.state.AuthCode
axios.post(GalleryManageUrl + "/mark?" + qs.stringify(data)).then((res) => {
if(res.data.result === 'success'){
ElMessage("标记成功")
context.commit("_mark", data)
}else{
ElMessage(res.data.data)
}
})
},
disMark(context, data){
data.AuthCode = context.state.AuthCode
axios.post(GalleryManageUrl + "/disMark?" + qs.stringify(data)).then((res) => {
if(res.data.result === 'success'){
ElMessage("取消标记成功")
context.commit("_disMark", data)
}else {
ElMessage(res.data.data)
}
})
},
createTagAndMark(context, data){
data.AuthCode = context.state.AuthCode
axios.post(GalleryManageUrl + '/tagAndMark?' + qs.stringify(data)).then((res) => {
if(res.data.result === 'success') {
ElMessage("创建标签并标记成功")
context.commit("_mark", {tid:parseInt(res.data.tid), gid: data.gid, usage: 1, tag:data.tag})
}else {
ElMessage(res.data.data)
}
})
},
collectGallery(context, gid){
axios.post(GalleryManageUrl + "/collect?" +qs.stringify( {
gid,
id:state.userId
AuthCode:state.AuthCode
})).then((res) => {
ElMessage(res.data.data)
if(res.data.result === 'success')
@ -158,20 +236,13 @@ const actions = {
disCollectGallery(context, gid){
axios.post(GalleryManageUrl + "/disCollect?" + qs.stringify({
gid,
id:state.userId
AuthCode:state.AuthCode
})).then((res) => {
ElMessage(res.data.data)
if(res.data.result === 'success')
context.commit("_disCollectGallery", gid)
})
},
updateGalleryTag(context, data){
axios.post(GalleryManageUrl + "/tag?" + qs.stringify(data)).then((res) => {
ElMessage(res.data.data)
if(res.data.result === 'success')
context.commit("_updateGalleryTag", data)
})
},
deleteGallery(context, gid){
axios.delete(GalleryManageUrl, {
params:{
@ -222,14 +293,6 @@ const mutations = {
state.collectGallery[index].isCollect = false
state.collectGallery.splice(index, 1)
},
_updateGalleryTag(state, data){
for(let i=0; i < state.totalGalleryTask.length; i++){
if(state.totalGalleryTask[i].gid === data.gid){
state.totalGalleryTask[i].tag = data.tag
break
}
}
},
_updateGalleryTasks(state, data){
let {tasks, type} = data
if(type === 'all') {
@ -261,25 +324,23 @@ const mutations = {
task.createTimeDisplay = new Date(task.createTime * 1000).toLocaleString("zh")
//处理标签
if (!'tag' in task) {
if ('tags' in task) {
task.tag = ''
task.tags.forEach((tid) => {
task.tag += ' ' + state.tags.get(tid).tag
})
task.tag = task.tag.trim()
}else{
task.tag = ""
task.tags = []
}
//处理是否收藏
if('collector' in task){
let collector = task.collector.split(",")
delete task.collector
for(let i=0; i<collector.length; i++){
if(parseInt(collector[i]) === state.userId){
task.isCollect = true
if('isCollect' in task)
state.collectGallery.push(task)
break
}
}
if(!'isCollect' in task)
else
task.isCollect = false
}
//处理是否下载
if(task.downloader === state.userId)
@ -351,6 +412,44 @@ const mutations = {
ElMessage("授权码错误")
localStorage.removeItem("auth")
},
_loadTags(state, tags){
state.tags.clear()
for(let i in tags)
state.tags.set(parseInt(i), tags[i])
},
_postTag(state, tag){
state.tags.set(tag.id, tag)
},
_deleteTag(state, tid){
state.tags.delete(tid)
},
_mark(state, data){
state.totalGalleryTask.forEach((gallery) => {
if(gallery.gid === data.gid){
gallery.tags.push(data.tid)
if('tag' in data) //新建的tag
state.tags.set(data.tid, {id:data.tid, tag: data.tag, usage:data.usage})
else
state.tags.get(data.tid).usage++
generateNewTag(state, gallery)
}
})
},
_disMark(state, data){
state.totalGalleryTask.forEach((gallery) => {
if(gallery.gid === data.gid){
let index
for(index=0; index<gallery.tags.length; index++){
if(gallery.tags[index] === data.tid){
gallery.tags.splice(index, 1) //删除tid
state.tags.get(data.tid).usage--
break;
}
}
generateNewTag(state, gallery)
}
})
},
_searchLocalByLink(state, link){
let tasks = state.currentTasks
let i = 0
@ -388,40 +487,52 @@ const mutations = {
if (task.name.includes(keyword))
state.searchTask.push(task)
})
if (state.searchTask.length === 0)
if (state.searchTask.length === 0) {
ElMessage("未找到该关键字的任务")
else
state.currentTasks = state.searchTask
}else
state.isSearch = false
}
else {
state.isSearch = true
}
}else {
state.isSearch = false
confirmCurrentTask(state)
}
},
_searchLocalByTag(state, tags) {
_searchLocalByTag(state, tidS) {
state.searchTask.splice(0)
state.page = 1
let tagAmount = tags.length
let hitAmount
let tasks = state.currentTasks
if (tags[0].trim() !== '') {
if (tidS.length > 0) {
tasks.forEach((task) => {
if('tag' in task) {
if(tidS.length <= task.tags.length) {
hitAmount = 0
tags.forEach((tag) => {
if (task.tag.includes(tag))
hitAmount++
})
if (hitAmount === tagAmount)
for(let i=0; i<task.tag.length; i++){
for(let j=0; j<tidS.length; j++){
if(task.tags[i] === tidS[j])
hitAmount ++
}
}
if (hitAmount === tidS.length)
state.searchTask.push(task)
}
})
if (state.searchTask.length === 0)
if (state.searchTask.length === 0) {
ElMessage("未找到符合这些tag的任务")
else
state.currentTasks = state.searchTask
}else
state.isSearch = false
}
else {
state.isSearch = true
}
}else {
state.isSearch = false
confirmCurrentTask(state)
}
},
_deleteGallery(state, gid){
let tasks = [state.totalGalleryTask, state.downloadGallery, state.collectGallery]
@ -434,8 +545,14 @@ const mutations = {
state.chosenGallery.fileSize = "等待下载完成后再查看"
state.chosenGallery.createTimeDisplay = "等待下载完成后再查看"
state.chosenGallery.progress = "已提交"
state.chosenGallery.tag = data.tag
state.chosenGallery.tags = []
state.chosenGallery.downloader = state.userId
if(data.tags.length > 0){
for (let tag of data.tags) {
state.chosenGallery.tags.push(parseInt(tag))
}
}
generateNewTag(state, state.chosenGallery)
state.totalGalleryTask.push(state.chosenGallery)
state.downloadGallery.push(state.chosenGallery)
}
@ -489,6 +606,8 @@ const state = {
thumbnailGallery: {}, //缩略图链接
collectGallery: [], //收藏的本子
downloadGallery: [], //下载的本子
tags: new Map(), //可用tag
isSearch: false, //用于决定是否显示搜索结果
onlineLinks: {}, //在线本子链接
isOnlineReading: false, //是否在线看
@ -519,14 +638,21 @@ const state = {
const getters = {
currentTasks(state){
return state.currentTasks.slice((state.page-1)*state.length, state.page*state.length)
if(state.isSearch)
return state.searchTask.slice((state.page - 1) * state.length, state.page * state.length)
else
return state.currentTasks.slice((state.page - 1) * state.length, state.page * state.length)
},
min(){
return 1
},
max(state){
let max = 0
let tasks = state.currentTasks
let tasks
if(state.isSearch)
tasks = state.searchTask
else
tasks = state.currentTasks
if(!tasks)
return 1
@ -618,6 +744,16 @@ function deleteTask(tasks, key, value){
for(let i=0; i<tasks[j].length; i++)
if(tasks[j][i][key] === value){
tasks[j].splice(i, 1)
return
break
}
}
function generateNewTag(state, gallery){
let tag = ''
console.log(state.tags)
console.log(gallery.tags)
gallery.tags.forEach((tid) => {
tag += state.tags.get(tid).tag + ' '
})
gallery.tag = tag.trim()
}