Skip to content

Commit

Permalink
增加更新红点提示
Browse files Browse the repository at this point in the history
优化按钮图标样式
  • Loading branch information
wushuo894 committed Sep 7, 2024
1 parent a2e99e9 commit 3f79b42
Show file tree
Hide file tree
Showing 8 changed files with 117 additions and 65 deletions.
6 changes: 2 additions & 4 deletions UPDATE.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
增加按钮图标
增加更新红点提示

优化移动端布局

@lzw-723
优化按钮图标样式
2 changes: 1 addition & 1 deletion pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<groupId>ani.rss</groupId>
<artifactId>ani-rss</artifactId>
<version>1.0.80</version>
<version>1.0.81</version>

<properties>
<maven.compiler.source>11</maven.compiler.source>
Expand Down
14 changes: 9 additions & 5 deletions ui/src/Add.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,15 @@
event.preventDefault()
}">
<el-form-item label="RSS 地址">
<el-input v-model:model-value="ani.url"></el-input>
<el-input
v-model:model-value="ani.url"
placeholder="https://mikanani.me/RSS/Bangumi?bangumiId=xxx&subgroupid=xxx"
/>
</el-form-item>
</el-form>
<div style="display: flex;justify-content: space-between;width: 100%;margin-top: 10px;">
<el-button @click="mikan?.show">Mikan</el-button>
<el-button :loading="rssButtonLoading" @click="getRss">确定</el-button>
<el-button @click="mikan?.show" text bg>Mikan</el-button>
<el-button :loading="rssButtonLoading" @click="getRss" text bg>确定</el-button>
</div>
</div>
<div v-else>
Expand All @@ -26,7 +29,8 @@
</el-form-item>
<el-form-item label="">
<div style="display: flex;justify-content: end;width: 100%;">
<el-input-number style="max-width: 200px" :min="0" v-model:model-value="ani.season" :disabled="ani.ova"></el-input-number>
<el-input-number style="max-width: 200px" :min="0" v-model:model-value="ani.season"
:disabled="ani.ova"></el-input-number>
</div>
</el-form-item>
<el-form-item label="集数偏移">
Expand Down Expand Up @@ -68,7 +72,7 @@
<el-switch v-model:model-value="ani.enable"></el-switch>
</el-form-item>
<div style="display: flex;justify-content: end;width: 100%;margin-top: 10px;">
<el-button :loading="addAniButtonLoading" @click="addAni">确定</el-button>
<el-button :loading="addAniButtonLoading" @click="addAni" bg text>确定</el-button>
</div>
</el-form>
</div>
Expand Down
99 changes: 71 additions & 28 deletions ui/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@
<Logs ref="logs"></Logs>
<div id="header">
<div style="margin: 10px;">
<el-input v-model:model-value="title" placeholder="搜索" @input="currentPage = 1" clearable></el-input>
<el-input
v-model:model-value="title"
placeholder="搜索"
@input="currentPage = 1"
prefix-icon="Search"
clearable/>
</div>
<div style="margin: 10px;display: flex;justify-content: flex-end;">
<div style="min-width: 120px;width:100%;margin-right: 15px;">
Expand All @@ -18,34 +23,34 @@
</el-option>
</el-select>
</div>
<el-button type="primary" @click="add?.showAdd">
<el-button type="primary" @click="add?.showAdd" bg text>
<el-icon :class="elIconClass()">
<Plus/>
</el-icon>
<template v-if="itemsPerRow > 1">
添加
</template>
</el-button>
<el-tooltip content="设置">
<el-button @click="config?.showConfig">
<el-icon :class="elIconClass()">
<Setting/>
</el-icon>
<template v-if="itemsPerRow > 1">
设置
</template>
</el-button>
</el-tooltip>
<el-tooltip content="日志">
<el-button @click="logs?.showLogs">
<el-icon :class="elIconClass()">
<Tickets/>
</el-icon>
<template v-if="itemsPerRow > 1">
日志
</template>
</el-button>
</el-tooltip>
<div style="margin: 0 6px;">
<el-badge :is-dot="about.update" class="item">
<el-button @click="config?.showConfig(about)" text bg>
<el-icon :class="elIconClass()">
<Setting/>
</el-icon>
<template v-if="itemsPerRow > 1">
设置
</template>
</el-button>
</el-badge>
</div>
<el-button @click="logs?.showLogs" text bg>
<el-icon :class="elIconClass()">
<Tickets/>
</el-icon>
<template v-if="itemsPerRow > 1">
日志
</template>
</el-button>
</div>
</div>
<div style="margin: 0 10px;min-height: 500px" v-loading="loading">
Expand Down Expand Up @@ -99,10 +104,10 @@
未启用
</el-tag>
<el-tag type="info" v-if="itemsPerRow > 1">
{{ item['subgroup'] }}
{{ item['subgroup'] }}
</el-tag>
<el-tag type="info" v-else>
{{ item['subgroup'].substr(0,6) }}
{{ item['subgroup'].substr(0, 6) }}
</el-tag>
<el-tag type="warning" v-if="item['currentEpisodeNumber']">
{{ item['currentEpisodeNumber'] }} /
Expand Down Expand Up @@ -132,6 +137,19 @@
</el-icon>
</el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel" bg text icon="Close">取消</el-button>
<div style="margin: 4px;"></div>
<el-button
type="danger"
size="small"
@click="confirm"
bg text
icon="Check"
>
确定
</el-button>
</template>
</el-popconfirm>
</div>
</div>
Expand Down Expand Up @@ -161,15 +179,28 @@
<div style="margin-left: 5px;">
<el-popconfirm title="你确定要退出吗?" @confirm="logout">
<template #reference>
<el-button type="danger">
<el-button type="danger" bg text>
<el-icon :class="elIconClass()">
<SwitchButton/>
<Back/>
</el-icon>
<template v-if="itemsPerRow > 1">
退出登录
</template>
</el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel" bg text icon="Close">取消</el-button>
<div style="margin: 4px;"></div>
<el-button
type="danger"
size="small"
@click="confirm"
bg text
icon="Check"
>
确定
</el-button>
</template>
</el-popconfirm>

</div>
Expand All @@ -181,7 +212,7 @@
<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from 'element-plus'
import {Edit as EditIcon, Plus, SwitchButton} from "@element-plus/icons-vue"
import {Back, Edit as EditIcon, Plus} from "@element-plus/icons-vue"
import Config from "./Config.vue";
import Edit from "./Edit.vue";
import Add from "./Add.vue";
Expand Down Expand Up @@ -299,10 +330,22 @@ let logout = () => {
location.reload()
}
let elIconClass = ()=>{
let elIconClass = () => {
return itemsPerRow.value > 1 ? 'el-icon--left' : '';
}
const about = ref({
'version': '',
'latest': '',
'update': false,
'markdownBody': ''
})
api.get('/api/about')
.then(res => {
about.value = res.data
})
</script>

<style>
Expand Down
47 changes: 26 additions & 21 deletions ui/src/Config.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<el-dialog v-model="configDialogVisible" title="设置" center>
<div style="margin: 0 15px;" @keydown.enter="editConfig" v-loading="loading">
<el-tabs>
<el-tab-pane label="qBittorrent 设置">
<el-tabs v-model:model-value="activeName">
<el-tab-pane label="qBittorrent 设置" name="qb">
<el-form label-width="auto"
@submit="(event)=>{
event.preventDefault()
Expand Down Expand Up @@ -99,7 +99,8 @@
<el-switch v-model:model-value="config.proxy"></el-switch>
</el-form-item>
<el-form-item label="IP">
<el-input v-model:model-value="config.proxyHost" :disabled="!config.proxy" placeholder="192.168.0.x"></el-input>
<el-input v-model:model-value="config.proxyHost" :disabled="!config.proxy"
placeholder="192.168.0.x"></el-input>
</el-form-item>
<el-form-item label="端口">
<el-input-number v-model:model-value="config.proxyPort" :disabled="!config.proxy" min="1"
Expand All @@ -124,7 +125,8 @@
event.preventDefault()
}">
<el-form-item label="SMTP地址">
<el-input v-model:model-value="config.mailAccount.host" :disabled="!config.mail" placeholder="smtp.xx.com"/>
<el-input v-model:model-value="config.mailAccount.host" :disabled="!config.mail"
placeholder="smtp.xx.com"/>
</el-form-item>
<el-form-item label="SMTP端口">
<el-input-number v-model:model-value="config.mailAccount.port" min="1" max="65535"
Expand All @@ -140,14 +142,15 @@
<el-switch v-model:model-value="config.mailAccount.sslEnable" :disabled="!config.mail"/>
</el-form-item>
<el-form-item label="收件人邮箱">
<el-input v-model:model-value="config.mailAddressee" :disabled="!config.mail" placeholder="[email protected]"></el-input>
<el-input v-model:model-value="config.mailAddressee" :disabled="!config.mail"
placeholder="[email protected]"></el-input>
</el-form-item>
<el-form-item label="总开关">
<el-switch v-model:model-value="config.mail"></el-switch>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="关于">
<el-tab-pane label="关于" name="about">
<el-form style="max-width: 600px" label-width="auto"
@submit="(event)=>{
event.preventDefault()
Expand All @@ -167,17 +170,17 @@
</div>
</div>
<div v-loading="actionLoading">
<el-button v-if="about.update" @click="update">更新</el-button>
<el-button @click="stop(0)">重启 ani-rss</el-button>
<el-button @click="stop(1)">关闭 ani-rss</el-button>
<el-button type="success" v-if="about.update" @click="update" text bg icon="Top">更新</el-button>
<el-button type="warning" @click="stop(0)" text bg icon="RefreshRight">重启 ani-rss</el-button>
<el-button type="danger" @click="stop(1)" text bg icon="SwitchButton">关闭 ani-rss</el-button>
</div>
</div>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<div style="display: flex;justify-content: end;width: 100%;">
<el-button :loading="configButtonLoading" @click="editConfig">确定</el-button>
<el-button :loading="configButtonLoading" @click="editConfig" text bg type="primary">确定</el-button>
</div>
</div>
</el-dialog>
Expand Down Expand Up @@ -234,14 +237,19 @@ const about = ref({
'markdownBody': ''
})
const showConfig = () => {
configDialogVisible.value = true
about.value = {
'version': '',
'latest': '',
'update': false,
'markdownBody': ''
const activeName = ref('qb')
const showConfig = (ab) => {
if (!ab.update) {
api.get('/api/about')
.then(res => {
about.value = res.data
})
} else {
activeName.value = 'about'
}
configDialogVisible.value = true
about.value = ab
loading.value = true
api.get('/api/config')
.then(res => {
Expand All @@ -250,11 +258,8 @@ const showConfig = () => {
.finally(() => {
loading.value = false
})
api.get('/api/about')
.then(res => {
about.value = res.data
})
}
const editConfig = () => {
configButtonLoading.value = true
let my_config = JSON.parse(JSON.stringify(config.value))
Expand Down
2 changes: 1 addition & 1 deletion ui/src/Edit.vue
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
<el-switch v-model:model-value="ani.enable"></el-switch>
</el-form-item>
<div style="display: flex;justify-content: end;width: 100%;margin-top: 10px;">
<el-button :loading="editAniButtonLoading" @click="editAni">确定</el-button>
<el-button :loading="editAniButtonLoading" @click="editAni" text bg>确定</el-button>
</div>
</el-form>
</el-dialog>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/Login.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<el-input v-model:model-value="user.password" show-password></el-input>
</el-form-item>
<div style="display: flex;width: 100%;align-items: flex-end;flex-flow: column;">
<el-button @click="login" :loading="loading">登录</el-button>
<el-button @click="login" :loading="loading" text bg icon="Right">登录</el-button>
</div>
</el-form>
</div>
Expand Down
10 changes: 6 additions & 4 deletions ui/src/Mikan.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
<div style="margin: 4px;">
<div style="display: flex;justify-content: space-between;">
<el-input v-model:model-value="text" placeholder="请输入搜索标题" @keyup.enter="search"
prefix-icon="Search"
clearable
@clear="()=>{
text = ''
search()
}"></el-input>
<div style="width: 4px;"></div>
<el-button @click="search" :loading="searchLoading">搜索</el-button>
<el-button @click="search" :loading="searchLoading" text bg>搜索</el-button>
</div>
<div style="max-width: 280px;margin-top: 4px;">
<el-select v-if="data.seasons.length" v-model:model-value="season" @change="change"
Expand Down Expand Up @@ -45,11 +46,11 @@
<div style="width: 100%;display: flex;justify-content: space-between;">
<div>
{{ group.label }}
<el-text class="mx-1" size="small">{{ group.updateDay }}</el-text>
<el-text class="mx-1" size="small">{{ group['updateDay'] }}</el-text>
</div>
<div style="display: flex;align-items: center;margin-right: 15px;">
<el-button type="primary" plain @click.stop="add(group['rss'])">
<el-icon>
<el-button text bg @click.stop="add(group['rss'])">
<el-icon class="el-icon--left">
<Plus/>
</el-icon>
添加
Expand Down Expand Up @@ -89,6 +90,7 @@
import {ref} from "vue";
import api from "./api.js";
import {ElMessage, ElText} from "element-plus";
import {Search} from "@element-plus/icons-vue";
let groupLoading = ref(false)
let activeName = ref("")
Expand Down

0 comments on commit 3f79b42

Please sign in to comment.