element-plus 版本升级适配

This commit is contained in:
灌糖包子 2023-01-15 13:50:58 +08:00
parent f38acbd7a7
commit 1ff7f5dec5
Signed by: sookie
GPG Key ID: 0599BECB75C1E68D
12 changed files with 132 additions and 118 deletions

View File

@ -2,7 +2,7 @@ export default [
{
name: 'system',
title: '系统管理',
icon: 'el-icon-s-operation',
icon: 'Operation',
child: [
{ title: '系统配置', path: '/system/config' },
{ title: '用户管理', path: '/system/user' },
@ -13,7 +13,7 @@ export default [
},{
name: 'api',
title: 'API数据',
icon: 'el-icon-s-data',
icon: 'Histogram',
child: [
{ title: '一言', path: '/api/hitokoto' },
{ title: '照片墙', path: '/api/photoWall' },
@ -23,7 +23,7 @@ export default [
},{
name: 'tool',
title: '工具',
icon: 'el-icon-s-tools',
icon: 'Tools',
child: [
{ title: 'SQL占位符替换', path: '/tool/sqlReplace' }
]

View File

@ -7,6 +7,7 @@ html,body,#app,.layout {
.layout-header{
color: #fff;
background-color: #515a6e;
position: relative;
div.main-title {
display: inline-block;
font-size: 22px;
@ -16,7 +17,8 @@ html,body,#app,.layout {
display: inline-block;
position: absolute;
right: 20px;
top: 9px;
top: 50%;
transform: translateY(-50%);
}
}
.layout-main {

View File

@ -4,10 +4,10 @@
<div class="main-title">博客API管理后台</div>
<div class="nav-btns-right">
<el-dropdown @command="dropdownMenuCommand">
<el-button type="text">
<i class="el-icon-user-solid"></i>
<el-button link type="primary">
<UserFilled />
{{ realname }}
<i class="el-icon-arrow-down el-icon--right"></i>
<ArrowDown />
</el-button>
<template #dropdown>
<el-dropdown-menu>
@ -24,7 +24,7 @@
<el-menu :default-active="activeMenuItem" :default-openeds="openMenuNames" style="height: 100%;">
<el-sub-menu v-for="menu in menus" :key="menu.name" :index="menu.name">
<template #title>
<i :class="menu.icon"></i>
<component :is="menu.icon" style="width: 18px; margin-right: 5px;"></component>
<span>{{menu.title}}</span>
</template>
<el-menu-item v-for="(subItem,subIndex) in menu.child" :key="subIndex" :index="subItem.path" @click="openMenu(subItem.path)">

View File

@ -2,15 +2,15 @@
<div>
<el-form inline :model="search">
<el-form-item label="内容">
<el-input size="small" v-model="search.content" />
<el-input v-model="search.content" />
</el-form-item>
<el-form-item label="类型">
<el-select size="small" v-model="search.type" multiple collapse-tags>
<el-select v-model="search.type" multiple collapse-tags>
<el-option v-for="item in typeList" :key="item.value" :value="item.value" :label="item.label" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker size="small"
<el-date-picker
v-model="search.createdAt"
type="daterange"
range-separator="至"
@ -19,15 +19,15 @@
</el-form-item>
</el-form>
<div class="btn-container">
<el-button size="small" type="primary" @click="addModal = true">添加</el-button>
<el-button size="small" type="danger" @click="deleteAll">删除</el-button>
<el-button type="primary" @click="addModal = true">添加</el-button>
<el-button type="danger" @click="deleteAll">删除</el-button>
<div class="search-btn">
<el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
<el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="hitokotoData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
<el-table :data="hitokotoData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="type" label="类型" width="180">
<template #default="scope">

View File

@ -2,38 +2,38 @@
<div>
<el-form inline :model="search">
<el-form-item label="名称">
<el-input size="small" v-model="search.name" />
<el-input v-model="search.name" />
</el-form-item>
<el-form-item label="所属歌单">
<el-select size="small" v-model="search.lib_id" multiple collapse-tags>
<el-select v-model="search.lib_id" multiple collapse-tags>
<el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
</el-select>
</el-form-item>
<el-form-item label="文件类型">
<el-select size="small" v-model="search.ext" multiple >
<el-select v-model="search.ext" multiple >
<el-option v-for="ext in exts" :key="ext" :value="ext" :label="ext" />
</el-select>
</el-form-item>
<el-form-item label="标题">
<el-input size="small" v-model="search.title" />
<el-input v-model="search.title" />
</el-form-item>
<el-form-item label="唱片集">
<el-input size="small" v-model="search.album" />
<el-input v-model="search.album" />
</el-form-item>
<el-form-item label="艺术家">
<el-input size="small" v-model="search.artist" />
<el-input v-model="search.artist" />
</el-form-item>
</el-form>
<div class="btn-container">
<el-button type="success" plain size="small" icon="el-icon-caret-right" @click="playMusic">播放</el-button>
<el-button type="primary" size="small" icon="el-icon-upload" @click="openUploadModal">上传音乐</el-button>
<el-button type="success" plain icon="VideoPlay" @click="playMusic">播放</el-button>
<el-button type="primary" icon="Upload" @click="openUploadModal">上传音乐</el-button>
<div class="search-btn">
<el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
<el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="musicData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
<el-table :data="musicData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="名称" show-overflow-tooltip role=""/>
<el-table-column prop="ext" label="类型" width="100" />
@ -48,19 +48,15 @@
<el-table-column prop="lib_id" label="所属歌单" >
<template #default="scope">
<template v-if="scope.row.isEditing && currentRow">
<el-select v-model="currentRow.lib_id" size="mini">
<el-select v-model="currentRow.lib_id">
<el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
</el-select>
<el-button type="text" @click="saveMusicLib(scope.row)">
<i class="el-icon-check"></i>
</el-button>
<el-button type="text" @click="scope.row.isEditing = false">
<i class="el-icon-close"></i>
</el-button>
<el-button link icon="Check" type="primary" @click="saveMusicLib(scope.row)"></el-button>
<el-button link icon="Close" type="primary" @click="scope.row.isEditing = false"></el-button>
</template>
<template v-else>
{{ findMusicLib(scope.row.lib_id) }}
<el-button type="text" @click="updateLib(scope.row)">
<el-button link type="primary" @click="updateLib(scope.row)">
<i class="el-icon-edit-outline"></i>
</el-button>
</template>
@ -68,13 +64,18 @@
</el-table-column>
<el-table-column prop="lyric_id" label="歌词" width="120" >
<template #default="scope">
<i :class="scope.row.lyric_id ? 'el-icon-check' : 'el-icon-close'" ></i>
<div style="width: 18px">
<el-icon>
<Check v-if="scope.row.lyric_id" />
<Close v-else/>
</el-icon>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="230" >
<template #default="scope">
<el-button size="mini" plain @click="updateLyric(scope.row)">歌词</el-button>
<el-button type="danger" size="mini" plain @click="remove(scope.row)">删除</el-button>
<el-button link icon="Document" @click="updateLyric(scope.row)" title="歌词"></el-button>
<el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
</template>
</el-table-column>
</el-table>
@ -111,25 +112,31 @@
<el-dialog v-model="uploadModal" title="上传音乐" :width="550" @closed="uploadModalClosed" >
<el-form :label-width="80">
<el-form-item label="歌单">
<el-radio-group v-model="libIdSelected">
<el-radio v-for="item in musicLibs" :key="item._id" :label="item._id" border size="small">{{item.name}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item >
<el-upload
ref="musicUpload"
action="/api/v2/music/upload"
name="file"
accept=".mp3,.flac"
:headers="{token: $store.state.loginInfo.token}"
:on-success="uploadSuccess"
:on-error="uploadError"
:auto-upload="false"
multiple
:data="{libId: libIdSelected}">
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
<el-select v-model="libIdSelected">
<el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
</el-select>
</el-form-item>
<el-upload
ref="musicUpload"
action="/api/v2/music/upload"
name="file"
accept=".mp3,.flac"
:headers="{token: $store.state.loginInfo.token}"
:on-success="uploadSuccess"
:on-error="uploadError"
:auto-upload="false"
multiple
drag
:data="{libId: libIdSelected}">
<div class="el-upload__text">
拖拽到此处或<em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">
可选择 mp3/flac 文件
</div>
</template>
</el-upload>
</el-form>
<template #footer>
<span class="dialog-footer">

View File

@ -1,30 +1,30 @@
<template>
<div>
<el-alert type="info" show-icon :closable="false" >
<el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px" >
<template #title>上传要求</template>
图片格式为{{allowUploadExt.join('、')}}文件大小不超过10MB
</el-alert>
<el-form inline :model="search">
<el-form-item label="文件名">
<el-input size="small" v-model="search.name" />
<el-input v-model="search.name" />
</el-form-item>
<el-form-item label="宽度" >
<el-input size="small" v-model="search.widthMin" type="number" style="vertical-align: middle;" >
<el-input v-model="search.widthMin" type="number" style="vertical-align: middle;" >
<template #prepend></template>
</el-input>
</el-form-item>
<el-form-item>
<el-input size="small" v-model="search.widthMax" type="number" style="vertical-align: middle;" >
<el-input v-model="search.widthMax" type="number" style="vertical-align: middle;" >
<template #prepend></template>
</el-input>
</el-form-item>
<el-form-item label="高度" >
<el-input size="small" v-model="search.heightMin" type="number" style="vertical-align: middle;" >
<el-input v-model="search.heightMin" type="number" style="vertical-align: middle;" >
<template #prepend></template>
</el-input>
</el-form-item>
<el-form-item>
<el-input size="small" v-model="search.heightMax" type="number" style="vertical-align: middle;" >
<el-input v-model="search.heightMax" type="number" style="vertical-align: middle;" >
<template #prepend></template>
</el-input>
</el-form-item>
@ -41,17 +41,17 @@
auto-upload
:show-file-list="false"
style="display: inline-block;margin-right: 10px;">
<el-button size="small" type="primary" icon="el-icon-upload" :loading="isUploading">上传图片</el-button>
<el-button type="primary" icon="Upload" :loading="isUploading">上传图片</el-button>
</el-upload>
<el-button size="small" type="danger" @click="deleteAll">删除</el-button>
<el-button type="danger" @click="deleteAll" style="vertical-align: bottom">批量删除</el-button>
<div class="search-btn">
<el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
<el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="photowallData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
<el-table :data="photowallData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="文件名" />
<el-table-column prop="md5" label="md5" width="300" />
@ -60,7 +60,7 @@
<el-table-column prop="height" label="高度" width="70" />
<el-table-column label="操作" width="100" >
<template #default="scope">
<el-button size="mini" plain @click="preview(scope.row)">预览</el-button>
<el-button link icon="View" plain @click="preview(scope.row)" title="预览"></el-button>
</template>
</el-table-column>
</el-table>
@ -146,7 +146,7 @@ export default class PhotoWall extends BaseList<PhotoWallPage> {
message: h('img', { style: `width:500px;height:${previewHeight}px;`, src: `${pictureCdn}/${row.name}` }, ''),
showCancelButton: false,
confirmButtonText: '关闭',
customStyle: {width: '530px'}
customStyle: {width: '600px'}
}).catch(() => {})
}
created() {

View File

@ -16,12 +16,12 @@
auto-upload
:show-file-list="false"
style="display: inline-block;margin-right: 10px;">
<el-button size="small" type="primary" icon="el-icon-upload" :loading="isUploading">上传图片</el-button>
<el-button type="primary" icon="Upload" :loading="isUploading">上传图片</el-button>
</el-upload>
<el-button size="small" type="danger" @click="deleteAll">删除</el-button>
<el-button type="danger" @click="deleteAll" style="vertical-align: bottom">批量删除</el-button>
</div>
<div class="table-container">
<el-table :data="sourceImageData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
<el-table :data="sourceImageData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="hash" label="md5" width="300" />
<el-table-column prop="size" label="文件大小" >
@ -42,8 +42,8 @@
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button size="mini" type="primary" plain @click="modifyTags(scope.row)">修改标签</el-button>
<el-button size="mini" plain @click="preview(scope.row)">预览</el-button>
<el-button link icon="EditPen" type="primary" plain @click="modifyTags(scope.row)" title="修改标签"></el-button>
<el-button link icon="View" plain @click="preview(scope.row)" title="预览"></el-button>
</template>
</el-table-column>
</el-table>

View File

@ -3,10 +3,10 @@
<div class="search-panel">
<el-form inline :model="search">
<el-form-item label="标题">
<el-input size="small" v-model="search.title" />
<el-input v-model="search.title" />
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker size="small"
<el-date-picker
v-model="search.createDate"
type="daterange"
range-separator="至"
@ -14,17 +14,17 @@
end-placeholder="结束日期" />
</el-form-item>
<el-form-item label="分类">
<el-select size="small" v-model="search.category" filterable clearable>
<el-select v-model="search.category" filterable clearable>
<el-option v-for="item in categories" :key="item" :value="item" :label="item" />
</el-select>
</el-form-item>
<el-form-item label="标签">
<el-select size="small" v-model="search.tag" filterable clearable>
<el-select v-model="search.tag" filterable clearable>
<el-option v-for="item in tags" :key="item" :value="item" :label="item" />
</el-select>
</el-form-item>
<el-form-item label="已分词">
<el-select size="small" v-model="search.isSplited" >
<el-select v-model="search.isSplited" >
<el-option :value="true" label="是" />
<el-option :value="false" label="否" />
</el-select>
@ -32,8 +32,8 @@
</el-form>
</div>
<div class="btn-container">
<el-button type="primary" @click="splitWord" size="small" >分词处理</el-button>
<el-button @click="pullArticles" size="small" >拉取文章</el-button>
<el-button type="primary" @click="splitWord" style="vertical-align: bottom">分词处理</el-button>
<el-button @click="pullArticles" style="vertical-align: bottom">拉取文章</el-button>
<el-upload
action="/api/system/deployBlog"
accept="application/zip"
@ -45,11 +45,11 @@
auto-upload
:show-file-list="false"
style="display: inline-block;margin-left: 10px;">
<el-button size="small" type="primary" icon="el-icon-upload" :loading="isUploading">发布博客</el-button>
<el-button type="primary" icon="Upload" :loading="isUploading">发布博客</el-button>
</el-upload>
<div class="search-btn">
<el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
<el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<el-row>
@ -57,7 +57,7 @@
<el-tree :props="treeProps" :load="loadTreeData" lazy highlight-current @node-click="articlePreview" />
</el-col>
<el-col :span="20">
<el-table :data="articleData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
<el-table :data="articleData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="title" label="标题" />
<el-table-column prop="path" label="路径" >
@ -83,22 +83,27 @@
</el-table-column>
<el-table-column prop="tags" label="是否已分词" width="120" >
<template #default="scope">
<i :class="scope.row.is_splited ? 'el-icon-check' : 'el-icon-close'" ></i>
<div style="width: 18px">
<el-icon>
<Check v-if="scope.row.is_splited" />
<Close v-else/>
</el-icon>
</div>
</template>
</el-table-column>
</el-table>
<div class="page-container">
<el-pagination background
:page-sizes="$store.state.pageSizeOpts"
:layout="$store.state.pageLayout"
:current-page="search.pageNum"
:total="total"
@size-change="pageSizeChange"
@current-change="pageChange">
</el-pagination>
</div>
</el-col>
</el-row>
<div class="page-container">
<el-pagination background
:page-sizes="$store.state.pageSizeOpts"
:layout="$store.state.pageLayout"
:current-page="search.pageNum"
:total="total"
@size-change="pageSizeChange"
@current-change="pageChange">
</el-pagination>
</div>
<el-drawer
v-model="markdownPreview.show"
:title="markdownPreview.title"

View File

@ -2,14 +2,14 @@
<div>
<el-form inline :model="search" @submit.prevent>
<el-form-item label="配置项">
<el-input size="small" placeholder="名称/描述" v-model="search.name" />
<el-input placeholder="名称/描述" v-model="search.name" />
</el-form-item>
</el-form>
<div class="btn-container">
<el-button size="small" type="primary" @click="add">添加</el-button>
<el-button type="primary" @click="add">添加</el-button>
<div class="search-btn">
<el-button type="primary" @click="loadData" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
<el-button type="primary" @click="loadData" icon="Search">搜索</el-button>
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
@ -38,8 +38,8 @@
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button size="mini" plain @click="update(scope.row)">修改</el-button>
<el-button type="danger" size="mini" plain @click="remove(scope.row)">删除</el-button>
<el-button link icon="Edit" @click="update(scope.row)" title="修改"></el-button>
<el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
</template>
</el-table-column>
</el-table>

View File

@ -2,14 +2,14 @@
<div>
<el-form inline :model="search" @submit.prevent>
<el-form-item label="角色名称/描述">
<el-input size="small" v-model="search.name" />
<el-input v-model="search.name" />
</el-form-item>
</el-form>
<div class="btn-container">
<el-button size="small" type="primary" @click="add">添加</el-button>
<el-button type="primary" @click="add">添加</el-button>
<div class="search-btn">
<el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
<el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
@ -17,7 +17,7 @@
<el-table-column prop="name" label="角色名称" />
<el-table-column prop="methods" label="允许的请求类型" >
<template #default="scope">
<el-tag type="info" size="small" v-for="method in scope.row.methods" :key="method">{{method}}</el-tag>
<el-tag type="info" v-for="method in scope.row.methods" :key="method">{{method}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" >
@ -32,8 +32,8 @@
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button size="mini" plain @click="update(scope.row)">修改</el-button>
<el-button type="danger" size="mini" plain @click="remove(scope.row)">删除</el-button>
<el-button link icon="Edit" @click="update(scope.row)" title="修改"></el-button>
<el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
</template>
</el-table-column>
</el-table>
@ -67,7 +67,7 @@
<el-form-item label="允许的URI">
<el-input v-model="uri.include">
<template #append>
<el-button icon="el-icon-plus" @click="addUri('include_uri', uri.include)"></el-button>
<el-button icon="Plus" @click="addUri('include_uri', uri.include)"></el-button>
</template>
</el-input>
<el-tag v-for="uri in formData.include_uri" :key="uri" closable @close="removeUri('include_uri', uri)">{{uri}}</el-tag>
@ -75,7 +75,7 @@
<el-form-item label="禁止的URI">
<el-input v-model="uri.exclude">
<template #append>
<el-button icon="el-icon-plus" @click="addUri('exclude_uri', uri.exclude)"></el-button>
<el-button icon="Plus" @click="addUri('exclude_uri', uri.exclude)"></el-button>
</template>
</el-input>
<el-tag v-for="uri in formData.exclude_uri" :key="uri" closable @close="removeUri('exclude_uri', uri)">{{uri}}</el-tag>

View File

@ -2,14 +2,14 @@
<div>
<el-form inline :model="search" @submit.prevent>
<el-form-item label="用户名/昵称">
<el-input size="small" v-model="search.username" />
<el-input v-model="search.username" />
</el-form-item>
</el-form>
<div class="btn-container">
<el-button size="small" type="primary" @click="add">添加</el-button>
<el-button type="primary" @click="add">添加</el-button>
<div class="search-btn">
<el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
<el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
@ -28,8 +28,8 @@
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button size="mini" plain @click="update(scope.row)">修改</el-button>
<el-button type="danger" size="mini" plain @click="remove(scope.row)">删除</el-button>
<el-button link icon="Edit" @click="update(scope.row)" title="修改"></el-button>
<el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
</template>
</el-table-column>
</el-table>

View File

@ -13,7 +13,7 @@
</el-form>
<div style="text-align:center">
<el-button-group size="large" >
<el-button type="primary" icon="el-icon-document-copy" @click="replacePlaceholder">替换占位符</el-button>
<el-button type="primary" icon="DocumentCopy" @click="replacePlaceholder">替换占位符</el-button>
<el-button type="default" @click="clear">清空</el-button>
</el-button-group>
</div>