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

移除主题切换时的Transitions效果
2024-11-29 10:18:35 +08:00 · 2024-04-29 21:20:01 +08:00 · 2024-04-29 21:20:01 +08:00 · e17cb7c24a
commit e17cb7c24a
parent af5042261b
18 changed files with 400 additions and 78 deletions
--- a/build/config/console.ts
+++ b/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}`
+      )
+    }
+  }
+}
--- a/build/config/version.ts
+++ b/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))
+}
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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
--- a/src/components/common/ContextMenu.vue
+++ b/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>
        <!-- 普通右键菜单 -->
--- a/src/components/common/InfoPopover.vue
+++ b/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>
--- a/src/hooks/useChatMain.ts
+++ b/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: '惊呆了'
    }
  ])

--- a/src/hooks/useMsgInput.ts
+++ b/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>`
      })
    }
    // 判断文本信息是否超过限制
--- a/src/hooks/useWindow.ts
+++ b/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
--- a/src/main.ts
+++ b/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()
--- a/src/services/webSocket.ts
+++ b/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('服务连接失败，请联系管理员')
  }
 }

--- a/src/styles/scss/toggle-theme.scss
+++ b/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*/
--- a/src/utils/Common.ts
+++ b/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}`
+  )
+}
--- a/src/views/home-window/more/settings/General.vue
+++ b/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;
 }
--- a/src/views/login-window/Login.vue
+++ b/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) {
--- a/src/views/login-window/QRCode.vue
+++ b/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>
--- a/vite.config.ts
+++ b/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解构语法
--- a/vite.config.ts.timestamp-1714396493254-f861d26eee0a5.mjs
+++ b/vite.config.ts.timestamp-1714396493254-f861d26eee0a5.mjs