修复主题切换组件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,10 +1,11 @@
-.chat-line {
+.chat-line,
-    ol, ul {
+.notice-dialog {
+  ol,
+  ul {
     margin: 0.8em 0;
     list-style: normal;
   }
   a {
-        
     color: var(--a-link-color);
     text-decoration: underline;
 
@@ -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,5 +1,5 @@
 <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>
   </div>
 </template>
@@ -8,6 +8,13 @@
 import { ref } from "vue";
 import { useSharedStore } from "@/store/sharedata";
 
+const props = defineProps({
+  size: {
+    type: String,
+    default: "",
+  },
+});
+
 // 定义主题状态，初始值从 localStorage 获取
 const store = useSharedStore();
 const themePage = ref(store.theme || "light");
@@ -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

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

@@ -100,7 +100,7 @@
               <i class="iconfont icon-house"></i>
             </a>
             <div class="pl-1">
-              <ThemeChange/>
+              <ThemeChange size="small" />
             </div>
           </div>
         </div>
@@ -188,7 +188,7 @@ const getFirstPathSegment = (url) => {
 
 const stars = computed(() => {
   return 1000;
-})
+});
 
 watch(
   () => store.showLoginDialog,