【需求 17679】 feat: 优化过渡等

src/App.vue

@@ -12,11 +12,11 @@ import { initWxConfig } from '@/utils/wxUtil/initWXConfig'
 const locale = ref(zhCn)
 
 onMounted(() => {
+  console.table(__CORE_LIB_VERSION__)
   if (import.meta.env.MODE === 'production') {
     setTimeout(() => {
       initWxConfig()
     }, 3000)
-    console.table(__CORE_LIB_VERSION__)
   }
 })
 </script>

src/components/common/Comment/index.vue

@@ -250,7 +250,7 @@
                   </div>
                 </div>
                 <!-- 展示 回复评论的输入框 -->
-                <transition name="fade" mode="in-out">
+                <transition name="fadeToComment" mode="out-in">
                   <div v-show="showCommentBox(item)" class="flex gap-3 mt-4">
                     <img
                       :src="userAvatar"
@@ -538,12 +538,12 @@ defineExpose({
 })
 </script>
 <style scoped lang="scss">
-.fade-enter-from {
+.fadeToComment-enter-from {
   opacity: 0;
   transform: translateY(-10px);
 }
 
-.fade-enter-active {
+.fadeToComment-enter-active {
   transition: all 0.5s ease-out;
 }
 </style>

src/views/homePage/askTab/index.vue

@@ -164,7 +164,7 @@
                 </el-button> -->
               </div>
             </div>
-            <Transition name="fade">
+            <Transition name="fadeCommentBox" mode="out-in">
               <Comment
                 v-if="item.showComment"
                 :ref="(e) => (commentRefList[index] = e as InstanceType<typeof Comment>)"
@@ -383,14 +383,32 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
-.fade-enter-from,
-.fade-leave-to {
+.fadeCommentBox-enter-from {
   opacity: 0;
   transform: translateY(-10px);
   filter: blur(4px);
 }
-.fade-enter-active,
-.fade-leave-active {
+
+.fadeCommentBox-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0);
+}
+
+.fadeCommentBox-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0);
+}
+
+.fadeCommentBox-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+  filter: blur(4px);
+}
+
+.fadeCommentBox-enter-active,
+.fadeCommentBox-leave-active {
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 </style>

src/views/homePage/index.vue

@@ -518,13 +518,15 @@ provide(TABS_REF_KEY, tabsRef)
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
-  transform: translateY(10px);
+  transform: translateX(30px);
+  filter: blur(4px);
 }
 
 .fade-enter-to,
 .fade-leave-from {
   opacity: 1;
-  transform: translateY(0);
+  transform: translateX(0);
+  filter: blur(0);
 }
 
 .fade-enter-active,

vite.config.ts

@@ -13,27 +13,14 @@ import pushUpdatePlugin from './src/plugins/pushUpdatePlugin'
 import IconsResolver from 'unplugin-icons/resolver'
 import Icons from 'unplugin-icons/vite'
 import path from 'node:path'
-import fs from 'node:fs'
 // 获取到执行脚本的--参数
-
-const packageJson = JSON.parse(
-  fs.readFileSync(path.resolve(process.cwd(), 'package.json'), 'utf-8'),
-)
-// 核心库版本
-const coreLibVersion = {
-  vue: packageJson.dependencies.vue,
-  'vue-router': packageJson.dependencies['vue-router'],
-  'element-plus': packageJson.dependencies['element-plus'],
-  pinia: packageJson.dependencies.pinia,
-  unocss: packageJson.devDependencies.unocss,
-  node: process.versions.node,
-}
+import pkg from './package.json'
 
 // https://vite.dev/config/
 export default defineConfig(({ mode }) => {
   return {
     define: {
-      __CORE_LIB_VERSION__: JSON.stringify(coreLibVersion),
+      __CORE_LIB_VERSION__: JSON.stringify(pkg.dependencies),
     },
     resolve: {
       //设置别名