feat: support uploading role icon

web/src/assets/css/image-sd.styl

@@ -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
             }
           }
 

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1708054962140') format('woff2'),
+  src: url('iconfont.woff2?t=1712306070700') format('woff2'),
-       url('iconfont.woff?t=1708054962140') format('woff'),
+       url('iconfont.woff?t=1712306070700') format('woff'),
-       url('iconfont.ttf?t=1708054962140') format('truetype');
+       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";
 }

web/src/assets/iconfont/iconfont.json

@@ -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",

web/src/components/admin/AdminHeader.vue

@@ -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)

web/src/components/admin/AdminSidebar.vue

@@ -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 => {

web/src/views/ChatPlus.vue

@@ -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"

web/src/views/ImageMj.vue

@@ -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"

web/src/views/ImageSd.vue

@@ -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>

web/src/views/admin/Roles.vue

@@ -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
+          <el-input v-model="role.icon">
-              v-model="role.icon"
+            <template #append>
-              autocomplete="off"
+              <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>