🌻 update(custom): 更新项目主要依赖版本

package.json

@@ -2,7 +2,7 @@
   "name": "hula-im-tauri",
   "private": true,
   "version": "v1.2.8-alpha",
-  "packageManager": "pnpm@8.14.1",
+  "packageManager": "pnpm@8.15.4",
   "engines": {
     "node": ">=18.12.0",
     "pnpm": ">=8.10.0"
@@ -43,7 +43,7 @@
     "pinia-plugin-persistedstate": "^3.2.1",
     "vue": "^3.4.19",
     "vue-draggable-plus": "^0.3.5",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.3",
@@ -51,8 +51,8 @@
     "@tauri-apps/cli": "^1.5.7",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.10.4",
-    "@typescript-eslint/eslint-plugin": "6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
+    "@typescript-eslint/eslint-plugin": "7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "@unocss/preset-uno": "^0.58.4",
     "@unocss/reset": "^0.58.4",
     "@unocss/transformer-directives": "^0.58.4",
@@ -73,14 +73,14 @@
     "lint-staged": "^15.2.0",
     "only-allow": "^1.2.1",
     "oxlint": "^0.2.4",
-    "prettier": "^3.1.1",
-    "sass": "^1.70.0",
-    "sass-loader": "^14.0.0",
-    "typescript": "^5.3.3",
+    "prettier": "^3.2.5",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
+    "typescript": "^5.4.2",
     "unplugin-auto-import": "^0.17.2",
     "unplugin-vue-components": "^0.26.0",
     "vite": "5.1.4",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.6"
   },
   "config": {
     "commitizen": {

src/components/rightBox/MsgInput/index.vue

@@ -240,7 +240,7 @@ const inputKeyDown = (e: KeyboardEvent) => {
 
 <style scoped lang="scss">
 .message-input {
-  padding: 4px; /* 输入框内填充 */
+  padding: 4px 24px 4px 4px; /* 输入框内填充 */
   font-size: 14px; /* 字体大小 */
   color: inherit; /* 继承颜色 */
   cursor: text; /* 文本输入光标 */
@@ -252,7 +252,9 @@ const inputKeyDown = (e: KeyboardEvent) => {
   min-height: 90px; /* 最小高度 */
   line-height: 20px; /* 行高 */
   overflow: auto; /* 内容过多时允许滚动 */
-  max-width: 610px; /* 最大宽度 */
+  flex: 1; /* 弹性盒自适应填充可用空间 */
   caret-color: #059669; /* 光标颜色，可根据需求调整 */
+  white-space: pre-wrap; /* 保留空白符号并正常换行 */
+  word-break: break-word; /* 在长单词或URL地址内部进行换行 */
 }
 </style>

src/layout/left/index.vue

@@ -1,8 +1,9 @@
 <template>
   <main class="left w-60px h-full p-[30px_6px_15px] box-border flex-col-center select-none">
-    <img class="border-rounded-50% w-36px h-36px bg-#fff cursor-pointer" src="/logo.png" alt="" />
+    <!-- 头像 -->
+    <img class="border-rounded-50% w-36px h-36px bg-#fff cursor-pointer" :src="'https://picsum.photos/140'" alt="" />
 
-    <div data-tauri-drag-region class="wh-full mt-20px flex-col-x-center justify-between">
+    <div data-tauri-drag-region class="flex-1 mt-20px flex-col-x-center justify-between">
       <!-- 上部分操作栏 -->
       <header class="flex-col-x-center gap-10px color-[--icon-color]">
         <div

src/styles/scss/global/variable.scss

@@ -86,11 +86,11 @@ html[data-theme='dark'] {
 // 线性动画
 @keyframes linearAnimation {
   0% {
-    stroke-dasharray: 800;
-    stroke-dashoffset: 800;
+    stroke-dasharray: 600;
+    stroke-dashoffset: 600;
   }
   100% {
-    stroke-dasharray: 800;
+    stroke-dasharray: 600;
     stroke-dashoffset: 0;
   }
 }

src/views/login-window/Login.vue

@@ -7,7 +7,11 @@
 
     <!-- 头像 -->
     <div class="w-full flex-x-center mt-35px mb-25px">
-      <img style="border: 2px solid #fff" class="w-80px h-80px rounded-50% bg-#fff" src="/logo.png" alt="" />
+      <img
+        style="border: 2px solid #fff"
+        class="w-80px h-80px rounded-50% bg-#fff"
+        :src="avatarRef || '/logo.png'"
+        alt="" />
     </div>
 
     <!-- 登录菜单 -->
@@ -17,7 +21,7 @@
         size="large"
         maxlength="16"
         minlength="6"
-        v-model:value="account"
+        v-model:value="accountRef"
         type="text"
         :placeholder="accountPH"
         @focus="accountPH = ''"
@@ -43,10 +47,10 @@
             vertical
             v-for="(item, index) in accountOption"
             :key="item.account"
-            @click="giveAccount(item.account, item.password)"
+            @click="giveAccount(item)"
             class="p-8px cursor-pointer hover:bg-#f3f3f3 hover: rounded-6px">
             <div class="flex-between-center">
-              <div class="w-28px h-28px bg-#ccc rounded-50%"></div>
+              <img :src="item.avatar" class="w-28px h-28px bg-#ccc rounded-50%" alt="" />
               <p class="text-14px color-#505050">{{ item.account }}</p>
               <svg @click.stop="delAccount(index)" class="w-12px h-12px">
                 <use href="#close"></use>
@@ -60,7 +64,7 @@
         maxlength="16"
         minlength="6"
         size="large"
-        v-model:value="password"
+        v-model:value="passwordRef"
         type="password"
         :placeholder="passwordPH"
         @focus="passwordPH = ''"
@@ -81,7 +85,7 @@
       <n-button
         :loading="loading"
         :disabled="loginDisabled"
-        class="w-full mt-10px mb-35px"
+        class="w-full mt-8px mb-35px"
         @click="loginWin"
         color="#059669">
         登录
@@ -114,31 +118,36 @@ type Account = {
   account: string
   password: string
   avatar?: string
-}[]
+}
 
-const account = ref()
-const password = ref()
+const accountRef = ref()
+const passwordRef = ref()
+const avatarRef = ref()
 const protocol = ref()
 const loginDisabled = ref(false)
 const loading = ref(false)
 const arrowStatus = ref(false)
 /* todo 模拟账号列表 */
-const accountOption = ref<Account>([
+const accountOption = ref<Account[]>([
   {
     account: 'hula',
-    password: '123456'
+    password: '123456',
+    avatar: 'https://picsum.photos/140?1'
   },
   {
     account: 'hula1',
-    password: '123456'
+    password: '123456',
+    avatar: 'https://picsum.photos/140?2'
   },
   {
     account: 'hula2',
-    password: '123456'
+    password: '123456',
+    avatar: 'https://picsum.photos/140?3'
   },
   {
     account: 'hula3',
-    password: '123456'
+    password: '123456',
+    avatar: 'https://picsum.photos/140?4'
   }
 ])
 const accountPH = ref('输入HuLa账号')
@@ -146,7 +155,11 @@ const passwordPH = ref('输入HuLa密码')
 const { createWebviewWindow } = useWindow()
 
 watchEffect(() => {
-  loginDisabled.value = !(account.value && password.value && protocol.value)
+  loginDisabled.value = !(accountRef.value && passwordRef.value && protocol.value)
+  // 情况账号的时候设置默认头像
+  if (!accountRef.value) {
+    avatarRef.value = '/logo.png'
+  }
 })
 
 /* 删除账号列表内容 */
@@ -160,18 +173,20 @@ const delAccount = (index: number) => {
   if (lengthBeforeDelete === 1 && accountOption.value.length === 0) {
     arrowStatus.value = false
   }
-  account.value = null
-  password.value = null
+  accountRef.value = null
+  passwordRef.value = null
+  avatarRef.value = '/logo.png'
 }
 
 /**
  * 给账号赋值
- * @param au 账号
- * @param paw 密码
+ * @param { Account } item 账户信息
  * */
-const giveAccount = (au: string, paw: string) => {
-  account.value = au
-  password.value = paw
+const giveAccount = (item: Account) => {
+  const { account, password, avatar } = item
+  accountRef.value = account
+  passwordRef.value = password
+  avatarRef.value = avatar
   arrowStatus.value = false
 }
 

src/views/login-window/QRCode.vue

@@ -3,7 +3,7 @@
     <!--顶部操作栏-->
     <ActionBar :max-w="false" :shrink="false" />
 
-    <n-flex justify="center" class="text-28px color-#059669 mt-25px">HuLA</n-flex>
+    <n-flex justify="center" class="text-28px color-#059669 mt-25px font-1000">HuLA</n-flex>
 
     <!-- 二维码 -->
     <n-flex justify="center" class="mt-35px">