feat(style): ✨ 新增项目版本信息打印

移除主题切换时的Transitions效果

build/config/console.ts

@@ -0,0 +1,44 @@
+import pkg from '../../package.json'
+
+/**
+ * 启动时打印信息
+ * @param env 环境变量
+ * @param mode 运行模式
+ */
+export const atStartup = (env: { [key: string]: string }, mode: string) => {
+  return () => {
+    if (mode === 'dev') {
+      console.log(
+        `  🍀 ${'\x1b[32m'}${'\x1b[38;2;19;152;127m'}${env.VITE_APP_NAME} ${'\x1b[0m'}${'\x1b[90m'}${pkg.version}${'\x1b[0m'}`
+      )
+      console.log(
+        `  ${'\u001b[38;2;26;178;146m'}${'\x1b[1m'}${'➜'}${'\x1b[0m'}  ` +
+          `${'当前环境: '}` +
+          `${'\x1b[38;2;215;95;135m'}${mode}${'\x1b[0m'}`
+      )
+      console.log(
+        `  ${'\u001b[38;2;26;178;146m'}${'\x1b[1m'}${'➜'}${'\x1b[0m'}  ${'\x1b[38;2;0;215;175m'}${'\x1b[1m'}${'Vue'}${'\x1b[0m'}: ` +
+          `${'\x1b[90m'}${pkg.dependencies.vue}${'\x1b[0m'}` +
+          ` ${'\x1b[38;2;95;215;255m'}${'\x1b[1m'}${'Vite'}${'\x1b[0m'}: ` +
+          `${'\x1b[90m'}${pkg.devDependencies.vite}${'\x1b[0m'}` +
+          ` ${'\u001b[38;5;33m'}${'\x1b[1m'}${'Node.js'}${'\x1b[0m'}: ` +
+          `${'\x1b[90m'}${process.version}${'\x1b[0m'}`
+      )
+      console.log(
+        `  ${'\u001b[38;2;26;178;146m'}${'\x1b[1m'}${'➜'}${'\x1b[0m'}  ` +
+          `当前 ${'\x1b[38;2;215;135;0m'}${'\x1b[1m'}Tauri${'\x1b[0m'} 版本: `,
+        `${'\x1b[90m'}${pkg.dependencies['@tauri-apps/api']}${'\x1b[0m'}`
+      )
+      console.log(
+        `  ${'\u001b[38;2;26;178;146m'}${'\x1b[1m'}${'\u001b[2m'}${'➜'}${'\x1b[0m'}  ` +
+          '后端服务地址: ' +
+          `${'\x1b[38;2;95;175;255m'}待开发中 -->${'\x1b[0m'}`
+      )
+      console.log(
+        `  ${'\u001b[38;2;26;178;146m'}${'\x1b[1m'}${'\u001b[2m'}${'➜'}${'\x1b[0m'}  ` +
+          '项目地址: ' +
+          `${pkg.author.url}`
+      )
+    }
+  }
+}

build/config/version.ts

@@ -0,0 +1,42 @@
+import pkg from '../../package.json'
+
+/** npm依赖包版本信息 */
+export interface PkgVersionInfo {
+  name: string
+  version: string
+}
+
+interface Package {
+  name: string
+  version: string
+  author: Record<string, string>
+  dependencies: Record<string, string>
+  devDependencies: Record<string, string>
+  [key: string]: any
+}
+
+interface PkgJson {
+  name: string
+  version: string
+  author: Record<string, string>
+  dependencies: PkgVersionInfo[]
+  devDependencies: PkgVersionInfo[]
+}
+
+const pkgWithType = pkg as Package
+
+const transformVersionData = (tuple: [string, string]): PkgVersionInfo => {
+  const [name, version] = tuple
+  return {
+    name,
+    version
+  }
+}
+
+export const pkgJson: PkgJson = {
+  name: pkgWithType.name,
+  version: pkgWithType.version,
+  author: pkgWithType.author,
+  dependencies: Object.entries(pkgWithType.dependencies).map((item) => transformVersionData(item)),
+  devDependencies: Object.entries(pkgWithType.devDependencies).map((item) => transformVersionData(item))
+}

package.json

@@ -38,7 +38,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@tauri-apps/api": "^1.5.3",
+    "@tauri-apps/api": "^1.5.4",
     "axios": "^1.6.8",
     "colorthief": "^2.4.0",
     "dayjs": "^1.11.10",

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@tauri-apps/api':
-        specifier: ^1.5.3
-        version: 1.5.3
+        specifier: ^1.5.4
+        version: 1.5.4
       axios:
         specifier: ^1.6.8
         version: 1.6.8
@@ -816,8 +816,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@tauri-apps/api@1.5.3':
-    resolution: {integrity: sha512-zxnDjHHKjOsrIzZm6nO5Xapb/BxqUq1tc7cGkFXsFkGTsSWgCPH1D8mm0XS9weJY2OaR73I3k3S+b7eSzJDfqA==}
+  '@tauri-apps/api@1.5.4':
+    resolution: {integrity: sha512-LKYae9URbdEdbHrOXBeXb/lZgVyWTX0E98rSFBuQlmkLr8OeG+akuE41PfLjBVyk1Q+fq7wxo4ieenLSMUAUhA==}
     engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
 
   '@tauri-apps/cli-darwin-arm64@1.5.11':
@@ -4095,7 +4095,7 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.14.3':
     optional: true
 
-  '@tauri-apps/api@1.5.3': {}
+  '@tauri-apps/api@1.5.4': {}
 
   '@tauri-apps/cli-darwin-arm64@1.5.11':
     optional: true

src/components/common/ContextMenu.vue

@@ -18,9 +18,14 @@
             align="center"
             justify="space-between"
             class="emoji-list">
-            <n-flex :size="0" align="center" justify="center" class="emoji-item" @click="handleReplyEmoji(item)">
-              {{ item.label }}
-            </n-flex>
+            <n-popover trigger="hover" :show-arrow="false" placement="top">
+              <template #trigger>
+                <n-flex :size="0" align="center" justify="center" class="emoji-item" @click="handleReplyEmoji(item)">
+                  {{ item.label }}
+                </n-flex>
+              </template>
+              <span>{{ item.title }}</span>
+            </n-popover>
           </n-flex>
         </div>
         <!-- 普通右键菜单 -->

src/components/common/InfoPopover.vue

@@ -45,8 +45,7 @@
 
     <!-- 背景 -->
     <img
-      class="size-full rounded-8px box-border p-20px absolute top-0 left-0"
-      style="filter: blur(28px); opacity: 0.8"
+      class="size-full rounded-8px box-border p-20px absolute top-0 left-0 blur-xl opacity-80"
       :src="isCurrentUser.avatar"
       alt="" />
   </n-flex>

src/hooks/useChatMain.ts

@@ -180,16 +180,20 @@ export const useChatMain = (activeItem: MockItem) => {
   /** emoji表情菜单 */
   const emojiList = ref([
     {
-      label: '👍'
+      label: '👍',
+      title: '好赞'
     },
     {
-      label: '😆'
+      label: '😆',
+      title: '开心'
     },
     {
-      label: '🥳'
+      label: '🥳',
+      title: '恭喜'
     },
     {
-      label: '🤯'
+      label: '🤯',
+      title: '惊呆了'
     }
   ])
 

src/hooks/useMsgInput.ts

@@ -159,7 +159,7 @@ export const useMsgInput = (messageInputDom: Ref) => {
     if (foundHyperlinks && foundHyperlinks.length > 0) {
       msg.content = msg.content.replace(hyperlinkRegex, (match) => {
         const href = match.startsWith('www.') ? 'https://' + match : match
-        return `<a style="color: inherit" href="${href}" target="_blank" rel="noopener noreferrer">${match}</a>`
+        return `<a style="color: inherit;text-underline-offset: 4px" href="${href}" target="_blank" rel="noopener noreferrer">${match}</a>`
       })
     }
     // 判断文本信息是否超过限制

src/hooks/useWindow.ts

@@ -1,5 +1,6 @@
 import { LogicalSize, WebviewWindow } from '@tauri-apps/api/window'
 import { invoke } from '@tauri-apps/api/tauri'
+import { EventEnum } from '@/enums'
 
 export const useWindow = () => {
   /**
@@ -27,7 +28,7 @@ export const useWindow = () => {
   ) => {
     const checkLabel = computed(() => {
       /** 如果是打开独立窗口就截取label中的固定label名称 */
-      if (label.includes('alone')) {
+      if (label.includes(EventEnum.ALONE)) {
         return label.replace(/\d/g, '')
       } else {
         return label

src/main.ts

@@ -6,6 +6,9 @@ import vResize from '@/directives/v-resize'
 import vSlide from '@/directives/v-slide.ts'
 import router from '@/router'
 import App from '@/App.vue'
+import { consolePrint } from '@/utils/Common.ts'
 
 const app = createApp(App)
 app.use(router).use(pinia).directive('resize', vResize).directive('slide', vSlide).mount('#app')
+/**! 控制台打印项目版本信息(不需要可手动关闭)*/
+consolePrint()

src/services/webSocket.ts

@@ -44,7 +44,7 @@ const initWebSocket = () => {
         reconnectAttempts++
         initWebSocket()
       } else {
-        console.error('已达到最大重连次数，放弃重连')
+        window.$message.error('尝试重连失败，请检查后端服务是否正常')
       }
     }, reconnectDelay)
   }
@@ -68,7 +68,7 @@ const sendToServer = (data: Record<string, any>) => {
     ws.send(json)
     return Promise.resolve(true)
   } else {
-    return Promise.reject('网络连接失败，请检查网络设置')
+    return Promise.reject('服务连接失败，请联系管理员')
   }
 }
 

src/styles/scss/toggle-theme.scss

@@ -1,22 +0,0 @@
-/**!使用比较新的View Transitions API来实现主图切换效果*/
-::view-transition-old(root),
-::view-transition-new(root) {
-  animation: none;
-  mix-blend-mode: normal;
-}
-
-/** 进入dark模式和退出dark模式时，两个图像的位置顺序正好相反 */
-.dark::view-transition-old(root) {
-  z-index: 1;
-}
-.dark::view-transition-new(root) {
-  z-index: 999;
-}
-
-::view-transition-old(root) {
-  z-index: 999;
-}
-::view-transition-new(root) {
-  z-index: 1;
-}
-/**!end*/

src/utils/Common.ts

@@ -0,0 +1,11 @@
+import { pkgJson } from '~/build/config/version.ts'
+const { VITE_APP_NAME } = import.meta.env
+
+/** 控制台打印版本信息 */
+export const consolePrint = () => {
+  console.log(
+    `%c 🍀 ${VITE_APP_NAME} ${pkgJson.version}`,
+    'font-size:20px;border-left: 4px solid #13987f;background: #cef9ec;font-family: Comic Sans MS, cursive;color:#581845;padding:10px;border-radius:4px;',
+    `${pkgJson.author.url}`
+  )
+}

src/views/home-window/more/settings/General.vue

@@ -13,7 +13,7 @@
           v-for="(item, index) in titleList"
           :key="index">
           <div
-            @click="handleTheme($event, item.code)"
+            @click="handleTheme(item.code)"
             class="size-full rounded-8px cursor-pointer"
             :style="activeItem === item.code ? 'border: 2px solid #13987f' : 'border: 2px solid transparent'">
             <component :is="item.model" />
@@ -89,7 +89,7 @@
 <script setup lang="tsx">
 import { setting } from '@/stores/setting.ts'
 import { storeToRefs } from 'pinia'
-import { CloseBxEnum, ThemeEnum } from '@/enums'
+import { CloseBxEnum } from '@/enums'
 import { titleList } from './model.tsx'
 import { sendOptions } from './config.ts'
 
@@ -98,40 +98,13 @@ const { themes, tips, escClose, chat } = storeToRefs(settingStore)
 const activeItem = ref<string>(themes.value.pattern)
 
 /** 切换主题 */
-const handleTheme = async (event: MouseEvent, code: string) => {
+const handleTheme = (code: string) => {
   if (code === themes.value.pattern) return
-  const x = event.clientX
-  const y = event.clientY
-  const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
-
-  let isDark: boolean
-
   settingStore.toggleTheme(code)
-  /**判断当前浏览器是否支持startViewTransition API*/
-  if (document.startViewTransition) {
-    const transition = document.startViewTransition(() => {
-      isDark = code.includes(ThemeEnum.DARK)
-    })
-    // TODO 从亮色主题切换到暗色主题的时候没有动画效果 (nyh -> 2024-02-12 23:07:54)
-    transition.ready.then(() => {
-      const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
-      document.documentElement.animate(
-        {
-          clipPath: isDark ? [...clipPath].reverse() : clipPath
-        },
-        {
-          duration: 500,
-          easing: 'ease-in',
-          pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)'
-        }
-      )
-    })
-  }
 }
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/scss/toggle-theme';
 .item {
   @apply bg-[--bg-setting-item] rounded-12px size-full p-12px box-border;
 }

src/views/login-window/Login.vue

@@ -103,10 +103,12 @@
       <n-flex :size="30" vertical>
         <!-- 头像 -->
         <n-flex justify="center">
-          <img
-            class="w-110px h-110px rounded-50% bg-#fff border-(2px solid #fff)"
-            :src="login.accountInfo.avatar || '/logo.png'"
-            alt="" />
+          <n-avatar
+            round
+            :size="110"
+            :color="'#fff'"
+            class="border-(2px solid #fff)"
+            :src="login.accountInfo.avatar || '/logo.png'" />
         </n-flex>
 
         <n-flex justify="center">
@@ -225,6 +227,7 @@ const delAccount = (index: number) => {
   if (index < 0 || index >= accountOption.value.length) return
   // 获取删除前账户列表的长度
   const lengthBeforeDelete = accountOption.value.length
+  // TODO @blur和下面操作会报警告：[Vue warn] Set operation on key "_ctx" failed: target is readonly (nyh -> 2024-04-29 04:39:07)
   accountOption.value.splice(index, 1)
   // 判断是否删除了最后一个条目，并据此更新arrowStatus
   if (lengthBeforeDelete === 1 && accountOption.value.length === 0) {

src/views/login-window/QRCode.vue

@@ -25,7 +25,7 @@
         :size="12"
         align="center"
         class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-        <svg class="size-42px"><use :href="`#${scanStatus.icon}`"></use></svg>
+        <svg class="size-42px animate-pulse"><use :href="`#${scanStatus.icon}`"></use></svg>
         <span class="text-(16px #e3e3e3)">{{ scanStatus.text }}</span>
       </n-flex>
     </n-flex>

vite.config.ts

@@ -7,13 +7,13 @@ import { getRootPath, getSrcPath } from './build/config/getPath'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import unocss from '@unocss/vite'
 import terser from '@rollup/plugin-terser'
+import { atStartup } from './build/config/console'
 
 // https://vitejs.dev/config/
 /**! 不需要优化前端打包(如开启gzip) */
 export default defineConfig(({ mode }: ConfigEnv) => {
   // 获取当前环境的配置,如何设置第三个参数则加载所有变量，而不是以“VITE_”前缀的变量
-  const config = loadEnv(mode, '/')
-  console.log(config)
+  const config = loadEnv(mode, process.cwd())
   return {
     resolve: {
       alias: {
@@ -35,6 +35,8 @@ export default defineConfig(({ mode }: ConfigEnv) => {
       __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
     },
     plugins: [
+      /**! 启动时候打印项目信息(不需要可关闭)  */
+      atStartup(config, mode),
       /**
        * !实验性功能
        * 开启defineProps解构语法