feat: support uploading role icon

This commit is contained in:
RockYang 2024-04-05 17:41:23 +08:00
parent 8be9a21efd
commit 7cee9f2ebb
13 changed files with 116 additions and 49 deletions

View File

@ -38,24 +38,14 @@
.param-line {
padding 0 10px
.el-icon {
position relative
top 3px
}
.el-input__suffix-inner {
.el-icon {
top 0
}
}
.grid-content
.form-item-inner {
display flex
.el-icon {
.info-icon {
margin-left 10px
margin-top 2px
position relative
top 8px
}
}

View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4125778 */
src: url('iconfont.woff2?t=1708054962140') format('woff2'),
url('iconfont.woff?t=1708054962140') format('woff'),
url('iconfont.ttf?t=1708054962140') format('truetype');
src: url('iconfont.woff2?t=1712306070700') format('woff2'),
url('iconfont.woff?t=1712306070700') format('woff'),
url('iconfont.ttf?t=1712306070700') format('truetype');
}
.iconfont {
@ -13,6 +13,22 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-version:before {
content: "\e68d";
}
.icon-huihua:before {
content: "\e62b";
}
.icon-huihua1:before {
content: "\e606";
}
.icon-chat:before {
content: "\e68a";
}
.icon-prompt:before {
content: "\e6ce";
}

File diff suppressed because one or more lines are too long

View File

@ -5,6 +5,34 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "1061336",
"name": "version",
"font_class": "version",
"unicode": "e68d",
"unicode_decimal": 59021
},
{
"icon_id": "3901033",
"name": "绘画",
"font_class": "huihua",
"unicode": "e62b",
"unicode_decimal": 58923
},
{
"icon_id": "39185683",
"name": "绘画",
"font_class": "huihua1",
"unicode": "e606",
"unicode_decimal": 58886
},
{
"icon_id": "2341972",
"name": "chat",
"font_class": "chat",
"unicode": "e68a",
"unicode_decimal": 59018
},
{
"icon_id": "8017627",
"name": "prompt",

Binary file not shown.

View File

@ -45,6 +45,9 @@
<span>{{ sysTitle }}</span>
</el-dropdown-item>
</a>
<el-dropdown-item>
<i class="iconfont icon-version"></i> 当前版本{{ version }}
</el-dropdown-item>
<el-dropdown-item @click="showDialog = true">
<i class="iconfont icon-reward"></i>
<span>打赏作者</span>
@ -86,6 +89,7 @@ import {removeAdminToken} from "@/store/session";
const message = ref(5);
const sysTitle = ref(process.env.VUE_APP_TITLE)
const version = ref(process.env.VUE_APP_VERSION)
const avatar = ref('/images/user-info.jpg')
const donateImg = ref('/images/wechat-pay.png')
const showDialog = ref(false)

View File

@ -2,7 +2,7 @@
<div class="sidebar">
<div class="logo">
<el-image :src="logo"/>
<span class="text" v-show="!sidebar.collapse">{{ title }} - {{ version }}</span>
<span class="text" v-show="!sidebar.collapse">{{ title }}</span>
</div>
<el-menu
@ -60,7 +60,6 @@ import {ElMessage} from "element-plus";
const title = ref('Chat-Plus-Admin')
const logo = ref('/images/logo.png')
const version = ref(process.env.VUE_APP_VERSION)
//
httpGet('/api/admin/config/get?key=system').then(res => {

View File

@ -82,7 +82,8 @@
<el-main v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.3)">
<div class="chat-head">
<div class="chat-config">
<el-select v-model="roleId" filterable placeholder="角色" class="role-select" @change="_newChat">
<el-select v-model="roleId" filterable placeholder="角色" class="role-select" @change="_newChat"
style="width:150px">
<el-option
v-for="item in roles"
:key="item.id"
@ -96,7 +97,8 @@
</el-option>
</el-select>
<el-select v-model="modelID" placeholder="模型" @change="_newChat" :disabled="disableModel">
<el-select v-model="modelID" placeholder="模型" @change="_newChat" :disabled="disableModel"
style="width:150px">
<el-option
v-for="item in models"
:key="item.id"

View File

@ -33,7 +33,7 @@
<el-form-item label="图片画质">
<template #default>
<div class="form-item-inner flex-row items-center">
<el-select v-model="params.quality" placeholder="请选择">
<el-select v-model="params.quality" placeholder="请选择" style="width:150px">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"

View File

@ -11,7 +11,7 @@
<el-form-item label="采样方法">
<template #default>
<div class="form-item-inner">
<el-select v-model="params.sampler" size="small" style="width:150px">
<el-select v-model="params.sampler" style="width:176px">
<el-option v-for="item in samplers" :label="item" :value="item" :key="item"/>
</el-select>
<el-tooltip
@ -20,7 +20,7 @@
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@ -35,10 +35,10 @@
<div class="form-item-inner">
<el-row :gutter="20">
<el-col :span="12">
<el-input v-model.number="params.width" size="small" placeholder="图片宽度"/>
<el-input v-model.number="params.width" placeholder="图片宽度"/>
</el-col>
<el-col :span="12">
<el-input v-model.number="params.height" size="small" placeholder="图片高度"/>
<el-input v-model.number="params.height" placeholder="图片高度"/>
</el-col>
</el-row>
</div>
@ -50,14 +50,14 @@
<el-form-item label="迭代步数">
<template #default>
<div class="form-item-inner">
<el-input v-model.number="params.steps" size="small"/>
<el-input v-model.number="params.steps"/>
<el-tooltip
effect="light"
content="值越大则代表细节越多,同时也意味着出图速度越慢"
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@ -70,14 +70,14 @@
<el-form-item label="引导系数">
<template #default>
<div class="form-item-inner">
<el-input v-model.number="params.cfg_scale" size="small"/>
<el-input v-model.number="params.cfg_scale"/>
<el-tooltip
effect="light"
content="提示词引导系数,图像在多大程度上服从提示词<br/> 较低值会产生更有创意的结果"
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@ -90,14 +90,14 @@
<el-form-item label="随机因子">
<template #default>
<div class="form-item-inner">
<el-input v-model.number="params.seed" size="small"/>
<el-input v-model.number="params.seed"/>
<el-tooltip
effect="light"
content="随机数种子,相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@ -108,7 +108,7 @@
raw-content
placement="right"
>
<el-icon @click="params.seed = -1">
<el-icon @click="params.seed = -1" class="info-icon">
<Orange/>
</el-icon>
</el-tooltip>
@ -121,14 +121,14 @@
<el-form-item label="高清修复">
<template #default>
<div class="form-item-inner">
<el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;"/>
<el-switch v-model="params.hd_fix" style="--el-switch-on-color: #47fff1;" size="large"/>
<el-tooltip
effect="light"
content="先以较小的分辨率生成图像,接着方法图像<br />然后在不更改构图的情况下再修改细节"
raw-content
placement="right"
>
<el-icon style="margin-top: 6px">
<el-icon style="margin-left: 10px; top: 12px">
<InfoFilled/>
</el-icon>
</el-tooltip>
@ -150,7 +150,7 @@
raw-content
placement="right"
>
<el-icon style="margin-top: 6px">
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@ -163,7 +163,7 @@
<el-form-item label="放大算法">
<template #default>
<div class="form-item-inner">
<el-select v-model="params.hd_scale_alg" size="small" style="width:150px">
<el-select v-model="params.hd_scale_alg" style="width:176px">
<el-option v-for="item in scaleAlg" :label="item" :value="item" :key="item"/>
</el-select>
<el-tooltip
@ -172,7 +172,7 @@
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@ -185,14 +185,14 @@
<el-form-item label="放大倍数">
<template #default>
<div class="form-item-inner">
<el-input v-model.number="params.hd_scale" size="small"/>
<el-input v-model.number="params.hd_scale"/>
<el-tooltip
effect="light"
content="随机数种子,相同的种子会得到相同的结果<br/> 设置为 -1 则每次随机生成种子"
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@ -205,14 +205,14 @@
<el-form-item label="迭代步数">
<template #default>
<div class="form-item-inner">
<el-input v-model.number="params.hd_steps" size="small"/>
<el-input v-model.number="params.hd_steps"/>
<el-tooltip
effect="light"
content="重绘迭代步数如果设置为0则设置跟原图相同的迭代步数"
raw-content
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>
@ -239,7 +239,7 @@
content="不希望出现的元素,下面给了默认的起手式"
placement="right"
>
<el-icon>
<el-icon class="info-icon">
<InfoFilled/>
</el-icon>
</el-tooltip>

View File

@ -21,7 +21,6 @@
</template>
</el-table-column>
<el-table-column label="角色标识" prop="key"/>
<el-table-column label="绑定模型" prop="model_name"/>
<el-table-column label="启用状态">
<template #default="scope">
<el-switch v-model="scope.row['enable']" @change="roleSet('enable',scope.row)"/>
@ -68,10 +67,17 @@
</el-form-item>
<el-form-item label="角色图标:" prop="icon">
<el-input
v-model="role.icon"
autocomplete="off"
/>
<el-input v-model="role.icon">
<template #append>
<el-upload
:auto-upload="true"
:show-file-list="false"
:http-request="uploadImg"
>
上传
</el-upload>
</template>
</el-input>
</el-form-item>
<el-form-item label="绑定模型:" prop="model_id">
@ -79,6 +85,7 @@
v-model="role.model_id"
filterable
placeholder="请选择模型"
clearable
>
<el-option
v-for="item in models"
@ -159,6 +166,7 @@ import {httpGet, httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {copyObj, removeArrayItem} from "@/utils/libs";
import {Sortable} from "sortablejs"
import Compressor from "compressorjs";
const showDialog = ref(false)
const parentBorder = ref(true)
@ -288,7 +296,27 @@ const removeContext = function (index) {
role.value.context.splice(index, 1);
}
//
const uploadImg = (file) => {
//
new Compressor(file.file, {
quality: 0.6,
success(result) {
const formData = new FormData();
formData.append('file', result, result.name);
//
httpPost('/api/admin/upload', formData).then((res) => {
role.value.icon = res.data.url
ElMessage.success('上传成功')
}).catch((e) => {
ElMessage.error('上传失败:' + e.message)
})
},
error(e) {
ElMessage.error('上传失败:' + e.message)
},
});
};
</script>
<style lang="stylus" scoped>