fix: 侧边栏收起打开 有引导 #848

frontend_nuxt/.env.production.example

@@ -1,10 +1,10 @@
 
 ; 生产环境后端
-NUXT_PUBLIC_API_BASE_URL=https://open-isle.com
+NUXT_PUBLIC_API_BASE_URL=https://www.open-isle.com
 ; 正式环境/生产环境
-NUXT_PUBLIC_WEBSITE_BASE_URL=https://open-isle.com
+NUXT_PUBLIC_WEBSITE_BASE_URL=https://www.open-isle.com
 ; 生产环境ws后端
-NUXT_PUBLIC_WEBSOCKET_URL=https://open-isle.com/websocket
+NUXT_PUBLIC_WEBSOCKET_URL=https://www.open-isle.com/websocket
 
 NUXT_PUBLIC_GOOGLE_CLIENT_ID=777830451304-nt8afkkap18gui4f9entcha99unal744.apps.googleusercontent.com
 NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ

frontend_nuxt/components/ArticleCategory.vue

@@ -2,11 +2,12 @@
   <div class="article-category-container" v-if="category">
     <div class="article-info-item" @click="gotoCategory">
       <BaseImage
-        v-if="category.smallIcon"
+        v-if="isImageIcon(category.smallIcon)"
         class="article-info-item-img"
         :src="category.smallIcon"
         :alt="category.name"
       />
+      <component v-else :is="category.smallIcon || category.icon" class="article-info-item-img" />
       <div class="article-info-item-text">{{ category.name }}</div>
     </div>
   </div>
@@ -22,6 +23,11 @@ const gotoCategory = async () => {
   const value = encodeURIComponent(props.category.id ?? props.category.name)
   await navigateTo({ path: '/', query: { category: value } }, { replace: true })
 }
+
+const isImageIcon = (icon) => {
+  if (!icon) return false
+  return /^https?:\/\//.test(icon) || icon.startsWith('/')
+}
 </script>
 
 <style scoped>

frontend_nuxt/components/ArticleTags.vue

@@ -7,11 +7,17 @@
       @click="gotoTag(tag)"
     >
       <BaseImage
-        v-if="tag.smallIcon"
+        v-if="isImageIcon(tag.smallIcon)"
         class="article-info-item-img"
         :src="tag.smallIcon"
         :alt="tag.name"
       />
+      <component
+        v-else-if="tag.smallIcon || tag.icon"
+        :is="tag.smallIcon || tag.icon"
+        class="article-info-item-img"
+      />
+      <tag-one v-else class="article-info-item-img" />
       <div class="article-info-item-text">{{ tag.name }}</div>
     </div>
   </div>
@@ -26,6 +32,11 @@ const gotoTag = async (tag) => {
   const value = encodeURIComponent(tag.id ?? tag.name)
   await navigateTo({ path: '/', query: { tags: value } }, { replace: true })
 }
+
+const isImageIcon = (icon) => {
+  if (!icon) return false
+  return /^https?:\/\//.test(icon) || icon.startsWith('/')
+}
 </script>
 
 <style scoped>

frontend_nuxt/components/CategorySelect.vue

@@ -15,7 +15,7 @@
               class="option-icon"
               :alt="option.name"
             />
-            <!-- <i v-else :class="['option-icon', option.icon]"></i> -->
+            <component v-else :is="option.smallIcon || option.icon" class="option-icon" />
           </template>
           <span>{{ option.name }}</span>
           <span class="option-count" v-if="option.count > 0"> x {{ option.count }}</span>

frontend_nuxt/components/CommentItem.vue

@@ -404,7 +404,6 @@ const handleContentClick = (e) => {
   margin-left: 10px;
   margin-right: 10px;
   opacity: 0.5;
-  transform: scaleX(-1);
 }
 
 .reply-user-name {

frontend_nuxt/components/HeaderComponent.vue

@@ -4,7 +4,9 @@
       <div class="header-content-left">
         <div v-if="showMenuBtn" class="menu-btn-wrapper">
           <button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
-            <application-menu class="micon"></application-menu>
+            <ToolTip content="展开/收起菜单" placement="bottom">
+              <application-menu class="micon"></application-menu>
+            </ToolTip>
           </button>
           <span
             v-if="isMobile && (unreadMessageCount > 0 || hasChannelUnread)"

frontend_nuxt/components/MenuComponent.vue

@@ -122,6 +122,11 @@
                 class="section-item-icon"
                 :alt="t.name"
               />
+              <component
+                v-else-if="t.smallIcon || t.icon"
+                :is="t.smallIcon || t.icon"
+                class="section-item-icon"
+              />
               <tag-one v-else class="section-item-icon" />
               <span class="section-item-text"
                 >{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span

frontend_nuxt/pages/index.vue

@@ -529,7 +529,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 }
 
 .article-item-title {
-  margin-top: 10px;
+  margin-top: 15px;
   font-size: 18px;
   text-decoration: none;
   color: var(--text-color);
@@ -558,7 +558,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 
 .article-item-description {
   max-width: 100%;
-  margin-top: 10px;
+  margin-top: 5px;
   font-size: 13px;
   color: rgba(140, 140, 140, 0.888);
   display: -webkit-box;
@@ -605,6 +605,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  padding-bottom: 5px;
 }
 
 .article-member-avatars-container {
@@ -719,10 +720,15 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   }
 
   .article-item-title {
+    margin-top: 10px;
     font-size: 16px;
     font-weight: bold;
   }
 
+  .article-main-container {
+    padding-bottom: 0px;
+  }
+
   .article-item-description {
     margin-top: 2px;
     font-size: 10px;

frontend_nuxt/plugins/iconpark.client.ts

@@ -63,6 +63,16 @@ import {
   History,
   Lightning,
   PeoplesTwo,
+  Code,
+  GoodTwo,
+  Twitter,
+  Bitcoin,
+  Fire,
+  Communication,
+  WaterLevel,
+  RobotOne,
+  Server,
+  Protection,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -129,4 +139,14 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('HistoryIcon', History)
   nuxtApp.vueApp.component('Lightning', Lightning)
   nuxtApp.vueApp.component('PeoplesTwo', PeoplesTwo)
+  nuxtApp.vueApp.component('CodeIcon', Code)
+  nuxtApp.vueApp.component('GoodTwo', GoodTwo)
+  nuxtApp.vueApp.component('Twitter', Twitter)
+  nuxtApp.vueApp.component('Bitcoin', Bitcoin)
+  nuxtApp.vueApp.component('Fire', Fire)
+  nuxtApp.vueApp.component('Communication', Communication)
+  nuxtApp.vueApp.component('WaterLevel', WaterLevel)
+  nuxtApp.vueApp.component('RobotOne', RobotOne)
+  nuxtApp.vueApp.component('ServerIcon', Server)
+  nuxtApp.vueApp.component('Protection', Protection)
 })