修复主题切换组件Bug，优化前端公告 markdown 样式

CHANGELOG.md

@@ -1,5 +1,10 @@
 # 更新日志
 
+## v4.2.0
+
+- 功能优化：优化聊天页面 Notice 组件样式，采用 Vuepress 文档样式
+- Bug 修复：修复主题切换的组件显示异常问题
+
 ## v4.1.9
 
 - 功能优化：优化系统配置，移除已废弃的配置项

web/.env.development

@@ -6,7 +6,7 @@ VUE_APP_ADMIN_USER=admin
 VUE_APP_ADMIN_PASS=admin123
 VUE_APP_KEY_PREFIX=GeekAI_DEV_
 VUE_APP_TITLE="Geek-AI 创作系统"
-VUE_APP_VERSION=v4.1.9
+VUE_APP_VERSION=v4.2.0
 VUE_APP_DOCS_URL=https://docs.geekai.me
 VUE_APP_GITHUB_URL=https://github.com/yangjian102621/geekai
 VUE_APP_GITEE_URL=https://gitee.com/blackfox/geekai

web/.env.production

@@ -1,7 +1,7 @@
 VUE_APP_API_HOST=
 VUE_APP_WS_HOST=
 VUE_APP_KEY_PREFIX=GeekAI_
-VUE_APP_VERSION=v4.1.9
+VUE_APP_VERSION=v4.2.0
 VUE_APP_DOCS_URL=https://docs.geekai.me
 VUE_APP_GITHUB_URL=https://github.com/yangjian102621/geekai
 VUE_APP_GITEE_URL=https://gitee.com/blackfox/geekai

web/src/assets/css/home.styl

@@ -132,11 +132,6 @@
       overflow: hidden;
       border-radius: 50%;
       font-size: 20px;
-      // img{
-      //   width: 24px;
-      //   height: 24px;
-      // }
-
     }
 
     &.active {
@@ -183,19 +178,6 @@
   }
 }
 
-::v-deep(.theme-box) {
-  position: relative !important;
-  right: initial;
-  bottom: initial;
-  width: 20px;
-  height: 20px;
-  line-height: 18px;
-
-  .iconfont {
-    font-size: 15px !important;
-  }
-}
-
 .right-main {
   height: 100%;
   // background: #f5f7fd;
@@ -246,18 +228,18 @@
       }
 
       &:hover {
-        background: rgba(79, 89, 102, 0.1);
+        background: rgba(183, 176, 255, 0.5);
       }
     }
 
     li.active {
-      background: rgba(79, 89, 102, 0.1);
+      background: rgba(183, 176, 255, 0.5);
     }
   }
 
   .setting-menus {
     .title {
-      color: #222226;
+      color: var(--text-theme-color);
     }
 
     .el-icon,
@@ -265,7 +247,7 @@
       font-size: 18px
       margin-right: 6px
     }
-    color: #222226;
+    color: var(--text-theme-color);
   }
 
   .username {

web/src/assets/css/markdown/vue.css

@@ -1,11 +1,12 @@
-.chat-line {
+.chat-line,
-    ol, ul {
+.notice-dialog {
+  ol,
+  ul {
     margin: 0.8em 0;
     list-style: normal;
   }
   a {
-        
+    color: var(--a-link-color);
-        color :var(--a-link-color);
     text-decoration: underline;
 
     padding: 0 2px;
@@ -70,7 +71,7 @@
   }
 
   h1 {
-        padding-bottom: .4rem;
+    padding-bottom: 0.4rem;
     font-size: 2.2rem;
     line-height: 1.3;
   }
@@ -191,7 +192,7 @@
     border-left: 4px solid #42b983;
     padding: 10px 15px;
     color: #777;
-        background-color: rgba(66, 185, 131, .1);
+    background-color: rgba(66, 185, 131, 0.1);
   }
 
   table {

web/src/assets/css/theme-dark.styl

@@ -55,7 +55,7 @@
     //filter: invert(100%);
   }
   .more-menus span.title{
-    color:#000;
+    color: var(--text-theme-color);
   }
 
   // 操作按钮
@@ -89,4 +89,7 @@
   // 引用快样式
   --quote-bg-color: #1F243F;
   --quote-text-color: #fff;
+
+  // el-dialog 阴影
+  --el-box-shadow: 0 0 15px rgba(107, 80, 225, 0.8);
 }

web/src/components/ThemeChange.vue

@@ -1,12 +1,19 @@
 <template>
-  <div class="theme-box" @click="toggleTheme">
+  <div class="theme-box" @click="toggleTheme" :class="size">
-    <i class="iconfont" :class="themePage === 'light'?'icon-yueliang':'icon-taiyang'"></i>
+    <i class="iconfont" :class="themePage === 'light' ? 'icon-yueliang' : 'icon-taiyang'"></i>
   </div>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import { ref } from "vue";
-import {useSharedStore} from "@/store/sharedata";
+import { useSharedStore } from "@/store/sharedata";
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: "",
+  },
+});
 
 // 定义主题状态，初始值从 localStorage 获取
 const store = useSharedStore();
@@ -20,7 +27,6 @@ const toggleTheme = () => {
 </script>
 
 <style lang="stylus" scoped>
-@import '@/assets/iconfont/iconfont.css'
 .theme-box{
   z-index :111
   position: fixed;
@@ -49,4 +55,17 @@ const toggleTheme = () => {
     transition: transform 0.3s ease;
   }
 }
+
+.theme-box.small {
+  position: relative !important;
+  right: initial;
+  bottom: initial;
+  width: 20px;
+  height: 20px;
+  line-height: 18px;
+
+  .iconfont {
+    font-size: 15px !important;
+  }
+}
 </style>

web/src/components/UserInfoDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog class="config-dialog" v-model="showDialog" :close-on-click-modal="true" :before-close="close" style="max-width: 400px" title="账户信息">
-    <div class="flex-center-col p-4 pt-0" id="user-info">
+    <div class="flex-center-col pl-4 pr-4" id="user-info">
       <user-profile @hide="close" />
     </div>
   </el-dialog>

web/src/views/ChatPlus.vue

@@ -3,7 +3,7 @@
     <el-container>
       <el-aside v-show="store.chatListExtend">
         <div class="flex w-full justify-center pt-3 pb-3">
-          <img :src="logo" style="max-height: 40px" :alt="title" v-if="logo !== ''"/>
+          <img :src="logo" style="max-height: 40px" :alt="title" v-if="logo !== ''" />
           <h2 v-else>{{ title }}</h2>
         </div>
 
@@ -194,7 +194,7 @@
     </el-container>
 
     <el-dialog v-model="showNotice" :show-close="true" class="notice-dialog" title="网站公告">
-      <div class="notice p-4">
+      <div class="notice">
         <div v-html="notice"></div>
       </div>
 
@@ -232,24 +232,24 @@
   </div>
 </template>
 <script setup>
-import {nextTick, onMounted, onUnmounted, ref, watch} from "vue";
+import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import ChatPrompt from "@/components/ChatPrompt.vue";
 import ChatReply from "@/components/ChatReply.vue";
-import {Delete, Edit, InfoFilled, More, Promotion, Search, Share, VideoPause} from "@element-plus/icons-vue";
+import { Delete, Edit, InfoFilled, More, Promotion, Search, Share, VideoPause } from "@element-plus/icons-vue";
 import "highlight.js/styles/a11y-dark.css";
-import {isMobile, randString, removeArrayItem, UUID} from "@/utils/libs";
+import { isMobile, randString, removeArrayItem, UUID } from "@/utils/libs";
-import {ElMessage, ElMessageBox} from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
-import {httpGet, httpPost} from "@/utils/http";
+import { httpGet, httpPost } from "@/utils/http";
-import {useRouter} from "vue-router";
+import { useRouter } from "vue-router";
 import Clipboard from "clipboard";
-import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
+import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
 import Welcome from "@/components/Welcome.vue";
-import {useSharedStore} from "@/store/sharedata";
+import { useSharedStore } from "@/store/sharedata";
 import FileSelect from "@/components/FileSelect.vue";
 import FileList from "@/components/FileList.vue";
 import ChatSetting from "@/components/ChatSetting.vue";
 import BackTop from "@/components/BackTop.vue";
-import {closeLoading, showLoading, showMessageError} from "@/utils/dialog";
+import { closeLoading, showLoading, showMessageError } from "@/utils/dialog";
 import MarkdownIt from "markdown-it";
 import emoji from "markdown-it-emoji";
 
@@ -977,6 +977,7 @@ const realtimeChat = () => {
 </style>
 
 <style lang="stylus">
+@import '@/assets/css/markdown/vue.css';
 .notice-dialog {
   .el-dialog__header {
     padding-bottom 0
@@ -985,6 +986,10 @@ const realtimeChat = () => {
   .el-dialog__body {
     padding 0 20px
 
+    h2 {
+      margin: 20px 0 15px 0;
+    }
+
     ol, ul {
       padding-left 10px
     }

web/src/views/Dalle.vue

@@ -320,6 +320,7 @@ onMounted(() => {
       models.value = res.data;
       selectedModel.value = models.value[0];
       params.value.model_id = selectedModel.value.id;
+      changeModel(selectedModel.value);
     })
     .catch((e) => {
       showMessageError("获取模型列表失败：" + e.message);

web/src/views/Home.vue

@@ -39,7 +39,7 @@
           <el-popover v-if="moreNavs.length > 0" placement="right-end" trigger="hover">
             <template #reference>
               <li class="menu-list-item flex-center-col">
-                <i class="iconfont icon-more"/>
+                <i class="iconfont icon-more" />
               </li>
             </template>
             <template #default>
@@ -57,7 +57,7 @@
                     <span v-if="item.icon.startsWith('icon')" class="mr-2">
                       <i class="iconfont" :class="item.icon"></i>
                     </span>
-                    <el-image :src="item.icon" style="width: 20px; height: 20px" v-else/>
+                    <el-image :src="item.icon" style="width: 20px; height: 20px" v-else />
                     <span :class="item.url === curPath ? 'title active' : 'title'">{{ item.name }}</span>
                   </a>
                 </li>
@@ -67,7 +67,7 @@
           <el-popover placement="right-end" trigger="hover" v-if="loginUser.id">
             <template #reference>
               <li class="menu-list-item flex-center-col">
-                <i class="iconfont icon-config"/>
+                <i class="iconfont icon-config" />
               </li>
             </template>
             <template #default>
@@ -75,7 +75,7 @@
                 <li>
                   <div @click="showConfigDialog = true" class="flex">
                     <el-icon>
-                      <UserFilled/>
+                      <UserFilled />
                     </el-icon>
                     <span class="username title">{{ loginUser.nickname }}</span>
                   </div>
@@ -100,7 +100,7 @@
               <i class="iconfont icon-house"></i>
             </a>
             <div class="pl-1">
-              <ThemeChange/>
+              <ThemeChange size="small" />
             </div>
           </div>
         </div>
@@ -133,17 +133,17 @@
 </template>
 
 <script setup>
-import {UserFilled} from "@element-plus/icons-vue";
+import { UserFilled } from "@element-plus/icons-vue";
 import ThemeChange from "@/components/ThemeChange.vue";
-import {useRouter} from "vue-router";
+import { useRouter } from "vue-router";
-import {computed, onMounted, ref, watch} from "vue";
+import { computed, onMounted, ref, watch } from "vue";
-import {httpGet} from "@/utils/http";
+import { httpGet } from "@/utils/http";
-import {ElMessage} from "element-plus";
+import { ElMessage } from "element-plus";
-import {checkSession, getLicenseInfo, getSystemInfo} from "@/store/cache";
+import { checkSession, getLicenseInfo, getSystemInfo } from "@/store/cache";
-import {removeUserToken} from "@/store/session";
+import { removeUserToken } from "@/store/session";
-import {useSharedStore} from "@/store/sharedata";
+import { useSharedStore } from "@/store/sharedata";
 import ConfigDialog from "@/components/UserInfoDialog.vue";
-import {showMessageError} from "@/utils/dialog";
+import { showMessageError } from "@/utils/dialog";
 import LoginDialog from "@/components/LoginDialog.vue";
 
 const router = useRouter();
@@ -188,7 +188,7 @@ const getFirstPathSegment = (url) => {
 
 const stars = computed(() => {
   return 1000;
-})
+});
 
 watch(
   () => store.showLoginDialog,