diff --git a/package-lock.json b/package-lock.json
index 2321010..72a744b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@bddh/starling-realtime-client": "^2.0.9",
         "crypto-js": "^4.2.0",
         "element-plus": "^2.9.7",
+        "opencc-js": "^1.4.0",
         "uuid": "^9.0.1",
         "vue": "^3.5.13"
       },
@@ -2010,24 +2011,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@esbuild/netbsd-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
@@ -2045,24 +2028,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@esbuild/openbsd-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
@@ -2080,24 +2045,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz",
-      "integrity": "sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@esbuild/sunos-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
@@ -4546,6 +4493,12 @@
         "node": ">=12.20.0"
       }
     },
+    "node_modules/opencc-js": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/opencc-js/-/opencc-js-1.4.0.tgz",
+      "integrity": "sha512-SEb4huI5+lT4CFPA4sgs+NAOOgpcmdHZ+vYxhRLR1bQWIt6VRwpFPjWgTJAWAg1MviDcXTBe5zVoUOVxVxNK8w==",
+      "license": "MIT AND Apache-2.0"
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
@@ -5258,420 +5211,6 @@
         }
       }
     },
-    "node_modules/vitest/node_modules/@esbuild/aix-ppc64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
-      "integrity": "sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/android-arm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.28.0.tgz",
-      "integrity": "sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/android-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz",
-      "integrity": "sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/android-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.28.0.tgz",
-      "integrity": "sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz",
-      "integrity": "sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/darwin-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz",
-      "integrity": "sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz",
-      "integrity": "sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/linux-arm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz",
-      "integrity": "sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/linux-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz",
-      "integrity": "sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/linux-ia32": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz",
-      "integrity": "sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/linux-loong64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz",
-      "integrity": "sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz",
-      "integrity": "sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz",
-      "integrity": "sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz",
-      "integrity": "sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/linux-s390x": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz",
-      "integrity": "sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/linux-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz",
-      "integrity": "sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz",
-      "integrity": "sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz",
-      "integrity": "sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/sunos-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz",
-      "integrity": "sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/win32-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz",
-      "integrity": "sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/win32-ia32": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz",
-      "integrity": "sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vitest/node_modules/@esbuild/win32-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz",
-      "integrity": "sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/vitest/node_modules/@vitest/mocker": {
       "version": "4.1.8",
       "resolved": "https://registry.npmmirror.com/@vitest/mocker/-/mocker-4.1.8.tgz",
@@ -5699,50 +5238,6 @@
         }
       }
     },
-    "node_modules/vitest/node_modules/esbuild": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.28.0.tgz",
-      "integrity": "sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.28.0",
-        "@esbuild/android-arm": "0.28.0",
-        "@esbuild/android-arm64": "0.28.0",
-        "@esbuild/android-x64": "0.28.0",
-        "@esbuild/darwin-arm64": "0.28.0",
-        "@esbuild/darwin-x64": "0.28.0",
-        "@esbuild/freebsd-arm64": "0.28.0",
-        "@esbuild/freebsd-x64": "0.28.0",
-        "@esbuild/linux-arm": "0.28.0",
-        "@esbuild/linux-arm64": "0.28.0",
-        "@esbuild/linux-ia32": "0.28.0",
-        "@esbuild/linux-loong64": "0.28.0",
-        "@esbuild/linux-mips64el": "0.28.0",
-        "@esbuild/linux-ppc64": "0.28.0",
-        "@esbuild/linux-riscv64": "0.28.0",
-        "@esbuild/linux-s390x": "0.28.0",
-        "@esbuild/linux-x64": "0.28.0",
-        "@esbuild/netbsd-arm64": "0.28.0",
-        "@esbuild/netbsd-x64": "0.28.0",
-        "@esbuild/openbsd-arm64": "0.28.0",
-        "@esbuild/openbsd-x64": "0.28.0",
-        "@esbuild/openharmony-arm64": "0.28.0",
-        "@esbuild/sunos-x64": "0.28.0",
-        "@esbuild/win32-arm64": "0.28.0",
-        "@esbuild/win32-ia32": "0.28.0",
-        "@esbuild/win32-x64": "0.28.0"
-      }
-    },
     "node_modules/vitest/node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
diff --git a/package.json b/package.json
index 9124e85..70bf081 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@bddh/starling-realtime-client": "^2.0.9",
     "crypto-js": "^4.2.0",
     "element-plus": "^2.9.7",
+    "opencc-js": "^1.4.0",
     "uuid": "^9.0.1",
     "vue": "^3.5.13"
   },
diff --git a/src/App.vue b/src/App.vue
index d195a0f..41afef2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,42 +5,41 @@
 
     <!-- 未连接时的连接面板 -->
     <div v-if="!isConnected" class="connect-overlay">
+      <!-- 底部全息平台 -->
+      <div class="connect-platform">
+        <div class="platform-ring ring-1"></div>
+        <div class="platform-ring ring-2"></div>
+        <div class="platform-ring ring-3"></div>
+      </div>
+
       <div class="connect-card">
+        <!-- 数字人头像 -->
         <div class="connect-logo">
-          <svg viewBox="0 0 48 48" width="56" height="56" fill="none">
-            <circle
-                cx="24"
-                cy="20"
-                r="10"
-                stroke="currentColor"
-                stroke-width="2.5"
-            />
-            <path
-                d="M10 42c0-7.732 6.268-14 14-14s14 6.268 14 14"
-                stroke="currentColor"
-                stroke-width="2.5"
-                stroke-linecap="round"
-            />
-          </svg>
+          <img
+            src="./assets/avatar.png"
+            alt="皮特教授頭像"
+            class="connect-avatar"
+            @error="handleAvatarError"
+          />
         </div>
-        <h1 class="connect-title">数字人交互平台</h1>
-        <p class="connect-desc">选择连接模式开始体验</p>
+        <h1 class="connect-title">GP超霸-皮特教授</h1>
+        <p class="connect-desc">歡迎向我提問任何有關電池的問題</p>
         <div class="connect-actions">
           <button class="connect-btn primary" @click="handleConnect('rtc')">
             <svg
-                viewBox="0 0 24 24"
-                width="20"
-                height="20"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
+              viewBox="0 0 24 24"
+              width="20"
+              height="20"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
             >
-              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-              <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-              <line x1="12" y1="19" x2="12" y2="23"/>
-              <circle cx="18" cy="5" r="2" fill="currentColor" stroke="none"/>
+              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+              <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+              <line x1="12" y1="19" x2="12" y2="23" />
+              <circle cx="18" cy="5" r="2" fill="currentColor" stroke="none" />
             </svg>
-            开始对话
+            開始對話
           </button>
         </div>
         <!-- <div class="connect-config">
@@ -62,203 +61,203 @@
       <div class="top-bar">
         <div class="status-indicator">
           <span class="status-dot"></span>
-          <span class="status-text">已连接</span>
+          <span class="status-text">已連線</span>
         </div>
       </div>
 
       <!-- 字幕区域（底部，不遮挡数字人主体） -->
       <div class="subtitle-overlay">
         <div class="subtitle-container">
-          <SubtitlePanel :ai-subtitle="currentAISubtitle"/>
+          <SubtitlePanel :ai-subtitle="currentAISubtitle" />
         </div>
       </div>
 
       <!-- 拾音按钮 - 左下角 -->
       <button
-          v-if="audioMode === 'btn'"
-          class="mic-btn mic-bottom-left"
-          :class="{
+        v-if="audioMode === 'btn'"
+        class="mic-btn mic-bottom-left"
+        :class="{
           recording: pickPhase === 'recording',
           'mic-processing': pickPhase === 'processing',
           'mic-waiting': pickPhase === 'waiting',
           'mic-broadcasting': pickPhase === 'broadcasting',
         }"
-          @touchstart.prevent="dhStartRecord"
-          @touchend.prevent="dhStopRecord"
-          @mousedown.prevent="dhStartRecord"
-          @mouseup.prevent="dhStopRecord"
-          @mouseleave="isRecording && dhStopRecord()"
-          @contextmenu.prevent
+        @touchstart.prevent="dhStartRecord"
+        @touchend.prevent="dhStopRecord"
+        @mousedown.prevent="dhStartRecord"
+        @mouseup.prevent="dhStopRecord"
+        @mouseleave="isRecording && dhStopRecord()"
+        @contextmenu.prevent
       >
         <div
-            class="mic-btn-ring"
-            :class="{
+          class="mic-btn-ring"
+          :class="{
             active: pickPhase === 'recording' || pickPhase === 'broadcasting',
           }"
         ></div>
         <!-- 拾音中：麦克风+脉冲环 -->
         <svg
-            v-if="pickPhase === 'recording'"
-            viewBox="0 0 24 24"
-            width="30"
-            height="30"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          v-if="pickPhase === 'recording'"
+          viewBox="0 0 24 24"
+          width="60"
+          height="60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
-          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-          <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-          <line x1="12" y1="19" x2="12" y2="23"/>
-          <line x1="8" y1="23" x2="16" y2="23"/>
+          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+          <line x1="12" y1="19" x2="12" y2="23" />
+          <line x1="8" y1="23" x2="16" y2="23" />
         </svg>
         <!-- 识别中：文字气泡+三点跳动 -->
         <svg
-            v-else-if="pickPhase === 'processing'"
-            class="anim-dots"
-            viewBox="0 0 24 24"
-            width="30"
-            height="30"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          v-else-if="pickPhase === 'processing'"
+          class="anim-dots"
+          viewBox="0 0 24 24"
+          width="60"
+          height="60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
           <path
-              d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
           />
           <circle
-              class="dot dot-1"
-              cx="8"
-              cy="10"
-              r="1"
-              fill="currentColor"
-              stroke="none"
+            class="dot dot-1"
+            cx="8"
+            cy="10"
+            r="1"
+            fill="currentColor"
+            stroke="none"
           />
           <circle
-              class="dot dot-2"
-              cx="12"
-              cy="10"
-              r="1"
-              fill="currentColor"
-              stroke="none"
+            class="dot dot-2"
+            cx="12"
+            cy="10"
+            r="1"
+            fill="currentColor"
+            stroke="none"
           />
           <circle
-              class="dot dot-3"
-              cx="16"
-              cy="10"
-              r="1"
-              fill="currentColor"
-              stroke="none"
+            class="dot dot-3"
+            cx="16"
+            cy="10"
+            r="1"
+            fill="currentColor"
+            stroke="none"
           />
         </svg>
         <!-- 等待回复：省略号三点循环 -->
         <svg
-            v-else-if="pickPhase === 'waiting'"
-            class="anim-ellipsis"
-            viewBox="0 0 24 24"
-            width="30"
-            height="30"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          v-else-if="pickPhase === 'waiting'"
+          class="anim-ellipsis"
+          viewBox="0 0 24 24"
+          width="60"
+          height="60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
           <circle
-              class="ellipsis-dot ed-1"
-              cx="5"
-              cy="12"
-              r="2"
-              fill="currentColor"
-              stroke="none"
+            class="ellipsis-dot ed-1"
+            cx="5"
+            cy="12"
+            r="2"
+            fill="currentColor"
+            stroke="none"
           />
           <circle
-              class="ellipsis-dot ed-2"
-              cx="12"
-              cy="12"
-              r="2"
-              fill="currentColor"
-              stroke="none"
+            class="ellipsis-dot ed-2"
+            cx="12"
+            cy="12"
+            r="2"
+            fill="currentColor"
+            stroke="none"
           />
           <circle
-              class="ellipsis-dot ed-3"
-              cx="19"
-              cy="12"
-              r="2"
-              fill="currentColor"
-              stroke="none"
+            class="ellipsis-dot ed-3"
+            cx="19"
+            cy="12"
+            r="2"
+            fill="currentColor"
+            stroke="none"
           />
         </svg>
         <!-- 播报中：喇叭+音波纹扩散 -->
         <svg
-            v-else-if="pickPhase === 'broadcasting'"
-            class="anim-wave"
-            viewBox="0 0 24 24"
-            width="30"
-            height="30"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          v-else-if="pickPhase === 'broadcasting'"
+          class="anim-wave"
+          viewBox="0 0 24 24"
+          width="60"
+          height="60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
           <polygon
-              points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"
-              fill="currentColor"
-              stroke="none"
+            points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"
+            fill="currentColor"
+            stroke="none"
           />
-          <path class="wave-1" d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
-          <path class="wave-2" d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
+          <path class="wave-1" d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+          <path class="wave-2" d="M19.07 4.93a10 10 0 0 1 0 14.14" />
         </svg>
         <!-- 空闲：麦克风 -->
         <svg
-            v-else
-            viewBox="0 0 24 24"
-            width="30"
-            height="30"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          v-else
+          viewBox="0 0 24 24"
+          width="60"
+          height="60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
-          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-          <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-          <line x1="12" y1="19" x2="12" y2="23"/>
-          <line x1="8" y1="23" x2="16" y2="23"/>
+          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+          <line x1="12" y1="19" x2="12" y2="23" />
+          <line x1="8" y1="23" x2="16" y2="23" />
         </svg>
         <span class="mic-label">{{
-            pickPhase === "recording"
-                ? "拾音中"
-                : pickPhase === "processing"
-                    ? "识别中"
-                    : pickPhase === "waiting"
-                        ? "等待回复"
-                        : pickPhase === "broadcasting"
-                            ? "播报中"
-                            : "按住说话"
-          }}</span>
+          pickPhase === "recording"
+            ? "拾音中"
+            : pickPhase === "processing"
+              ? "辨識中"
+              : pickPhase === "waiting"
+                ? "等待回覆"
+                : pickPhase === "broadcasting"
+                  ? "播報中"
+                  : "按住說話"
+        }}</span>
       </button>
 
       <!-- RTC模式拾音按钮 - 左下角 -->
       <button
-          v-if="audioMode === 'rtc'"
-          class="mic-btn mic-bottom-left"
-          :class="{
+        v-if="audioMode === 'rtc'"
+        class="mic-btn mic-bottom-left"
+        :class="{
           'mic-on': pickPhase === 'idle' && !isMuted,
           'mic-off': pickPhase === 'idle' && isMuted,
           'mic-processing': pickPhase === 'processing',
           'mic-waiting': pickPhase === 'waiting',
           'mic-broadcasting': pickPhase === 'broadcasting',
         }"
-          @click="toggleMic"
+        @click="toggleMic"
       >
         <div
-            class="mic-btn-ring"
-            :class="{
+          class="mic-btn-ring"
+          :class="{
             active:
               (pickPhase === 'idle' && !isMuted) ||
               pickPhase === 'broadcasting',
@@ -266,183 +265,187 @@
         ></div>
         <!-- 正在拾音 -->
         <svg
-            v-if="pickPhase === 'idle' && !isMuted"
-            viewBox="0 0 24 24"
-            width="30"
-            height="30"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          v-if="pickPhase === 'idle' && !isMuted"
+          viewBox="0 0 24 24"
+          width="60"
+          height="60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
-          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-          <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-          <line x1="12" y1="19" x2="12" y2="23"/>
-          <line x1="8" y1="23" x2="16" y2="23"/>
+          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+          <line x1="12" y1="19" x2="12" y2="23" />
+          <line x1="8" y1="23" x2="16" y2="23" />
         </svg>
         <!-- 识别中：文字气泡+三点跳动 -->
         <svg
-            v-else-if="pickPhase === 'processing'"
-            class="anim-dots"
-            viewBox="0 0 24 24"
-            width="30"
-            height="30"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          v-else-if="pickPhase === 'processing'"
+          class="anim-dots"
+          viewBox="0 0 24 24"
+          width="60"
+          height="60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
           <path
-              d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
           />
           <circle
-              class="dot dot-1"
-              cx="8"
-              cy="10"
-              r="1"
-              fill="currentColor"
-              stroke="none"
+            class="dot dot-1"
+            cx="8"
+            cy="10"
+            r="1"
+            fill="currentColor"
+            stroke="none"
           />
           <circle
-              class="dot dot-2"
-              cx="12"
-              cy="10"
-              r="1"
-              fill="currentColor"
-              stroke="none"
+            class="dot dot-2"
+            cx="12"
+            cy="10"
+            r="1"
+            fill="currentColor"
+            stroke="none"
           />
           <circle
-              class="dot dot-3"
-              cx="16"
-              cy="10"
-              r="1"
-              fill="currentColor"
-              stroke="none"
+            class="dot dot-3"
+            cx="16"
+            cy="10"
+            r="1"
+            fill="currentColor"
+            stroke="none"
           />
         </svg>
         <!-- 等待回复：省略号三点循环 -->
         <svg
-            v-else-if="pickPhase === 'waiting'"
-            class="anim-ellipsis"
-            viewBox="0 0 24 24"
-            width="30"
-            height="30"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          v-else-if="pickPhase === 'waiting'"
+          class="anim-ellipsis"
+          viewBox="0 0 24 24"
+          width="60"
+          height="60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
           <circle
-              class="ellipsis-dot ed-1"
-              cx="5"
-              cy="12"
-              r="2"
-              fill="currentColor"
-              stroke="none"
+            class="ellipsis-dot ed-1"
+            cx="5"
+            cy="12"
+            r="2"
+            fill="currentColor"
+            stroke="none"
           />
           <circle
-              class="ellipsis-dot ed-2"
-              cx="12"
-              cy="12"
-              r="2"
-              fill="currentColor"
-              stroke="none"
+            class="ellipsis-dot ed-2"
+            cx="12"
+            cy="12"
+            r="2"
+            fill="currentColor"
+            stroke="none"
           />
           <circle
-              class="ellipsis-dot ed-3"
-              cx="19"
-              cy="12"
-              r="2"
-              fill="currentColor"
-              stroke="none"
+            class="ellipsis-dot ed-3"
+            cx="19"
+            cy="12"
+            r="2"
+            fill="currentColor"
+            stroke="none"
           />
         </svg>
         <!-- 播报中：喇叭+音波纹扩散 -->
         <svg
-            v-else-if="pickPhase === 'broadcasting'"
-            class="anim-wave"
-            viewBox="0 0 24 24"
-            width="30"
-            height="30"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          v-else-if="pickPhase === 'broadcasting'"
+          class="anim-wave"
+          viewBox="0 0 24 24"
+          width="60"
+          height="60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
           <polygon
-              points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"
-              fill="currentColor"
-              stroke="none"
+            points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"
+            fill="currentColor"
+            stroke="none"
           />
-          <path class="wave-1" d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
-          <path class="wave-2" d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
+          <path class="wave-1" d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+          <path class="wave-2" d="M19.07 4.93a10 10 0 0 1 0 14.14" />
         </svg>
         <!-- 麦克风已关闭 -->
         <svg
-            v-else
-            viewBox="0 0 24 24"
-            width="30"
-            height="30"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          v-else
+          viewBox="0 0 24 24"
+          width="60"
+          height="60"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
-          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-          <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-          <line x1="1" y1="1" x2="23" y2="23"/>
+          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+          <line x1="1" y1="1" x2="23" y2="23" />
         </svg>
         <span class="mic-label">{{
-            pickPhase === "processing"
-                ? "识别中"
-                : pickPhase === "waiting"
-                    ? "等待回复中"
-                    : pickPhase === "broadcasting"
-                        ? "播报中"
-                        : isMuted
-                            ? "开启麦克风"
-                            : "拾音中"
-          }}</span>
+          pickPhase === "processing"
+            ? "辨識中"
+            : pickPhase === "waiting"
+              ? "等待回覆中"
+              : pickPhase === "broadcasting"
+                ? "播報中"
+                : isMuted
+                  ? "開啟麥克風"
+                  : "拾音中"
+        }}</span>
       </button>
 
       <!-- 打断按钮 - 右下角 -->
       <button class="interrupt-btn interrupt-bottom-right" @click="dhInterrupt">
         <svg
-            viewBox="0 0 24 24"
-            width="28"
-            height="28"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
+          viewBox="0 0 24 24"
+          width="56"
+          height="56"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
         >
-          <path d="M18.36 6.64a9 9 0 1 1-12.73 0"/>
-          <line x1="12" y1="2" x2="12" y2="12"/>
+          <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
+          <line x1="12" y1="2" x2="12" y2="12" />
         </svg>
-        <span class="interrupt-label">打断</span>
+        <span class="interrupt-label">打斷</span>
       </button>
 
       <!-- 挂断按钮 - 右上角 -->
-      <button class="hangup-btn hangup-top-left" @click="handleDisconnect" title="挂断">
-        <img src="./GP.webp" alt="挂断" class="hangup-img"/>
+      <button
+        class="hangup-btn hangup-top-left"
+        @click="handleDisconnect"
+        title="掛斷"
+      >
+        <img src="./GP.webp" alt="掛斷" class="hangup-img" />
       </button>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, watch} from "vue";
-import {ElMessage} from "element-plus";
+import { ref, watch } from "vue";
+import { ElMessage } from "element-plus";
 import SubtitlePanel from "@/components/SubtitlePanel.vue";
-import {useDigitalHuman} from "@/hooks/useDigitalHuman";
-import {useLLM} from "@/hooks/useLLM";
+import { useDigitalHuman } from "@/hooks/useDigitalHuman";
+import { useLLM } from "@/hooks/useLLM";
 
-const {sendToChatBase} = useLLM();
+const { sendToChatBase } = useLLM();
 
 const {
   isConnected,
@@ -450,7 +453,6 @@ const {
   isRecording,
   isMuted,
   token,
-  subtitleMode,
   currentAISubtitle,
   currentUserSubtitle,
   chatMessages,
@@ -479,6 +481,20 @@ const handleConnect = (mode: "btn" | "rtc") => {
 const handleDisconnect = () => {
   disconnect();
 };
+
+/**
+ * 头像加载失败时的兜底处理：显示默认占位头像
+ * 当用户将真实头像图片保存到 src/assets/avatar.png 后，此兜底将不再触发
+ */
+const DEFAULT_AVATAR =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiMzYTRhNmYiIHJ4PSI1MCIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iMzgiIHI9IjE4IiBmaWxsPSIjZjhmOWZhIi8+PHBhdGggZD0iTTIwIDgyYzAtMTYuNTY5IDEzLjQzMS0zMCAzMC0zMHMzMCAxMy40MzEgMzAgMzAiIGZpbGw9IiNmOGY5ZmEiLz48L3N2Zz4=";
+
+const handleAvatarError = (event: Event) => {
+  const img = event.target as HTMLImageElement;
+  if (img && img.src !== DEFAULT_AVATAR) {
+    img.src = DEFAULT_AVATAR;
+  }
+};
 const dhStartRecord = () => startRecord();
 const dhStopRecord = () => stopRecord();
 const toggleMic = () => {
@@ -489,8 +505,8 @@ const dhInterrupt = () => interrupt();
 // 语音有效性辅助函数：去除空白和标点后检查是否有实质内容
 const hasSubstantialContent = (text: string): boolean => {
   const cleaned = text.replace(
-      /[\s\u3000.,!?;:，。！？；：、…—\-_·""''（）()\[\]【】《》<>]/g,
-      "",
+    /[\s\u3000.,!?;:，。！？；：、…—\-_·""''（）()\[\]【】《》<>]/g,
+    "",
   );
   return cleaned.length > 0;
 };
@@ -513,7 +529,7 @@ async function handleVoiceQueryComplete(text: string) {
     if (audioMode.value === "rtc") {
       changeMicrophoneState(false);
     }
-    ElMessage.error(`ChatBase请求失败: ${err.message || "未知错误"}`);
+    ElMessage.error(`ChatBase請求失敗: ${err.message || "未知錯誤"}`);
   }
 }
 </script>
@@ -546,67 +562,289 @@ async function handleVoiceQueryComplete(text: string) {
   inset: 0;
   z-index: 100;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  background: linear-gradient(160deg, #0a0e1a 0%, #141b2d 40%, #1a1040 100%);
+  padding-top: clamp(70px, 28vh, 300px);
+  /* 科技感深色背景：参考图中数据中心/服务器走廊氛围 */
+  background:
+    /* 底部中央全息平台高光 */
+    radial-gradient(
+      ellipse 80% 35% at 50% 93%,
+      rgba(59, 130, 246, 0.22) 0%,
+      transparent 60%
+    ),
+    radial-gradient(
+      ellipse 70% 28% at 50% 95%,
+      rgba(34, 211, 238, 0.14) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 60% 22% at 50% 97%,
+      rgba(59, 130, 246, 0.18) 0%,
+      transparent 50%
+    ),
+    /* 左右两侧服务器架霓虹绿光 */
+    linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(74, 222, 128, 0.08) 8%,
+        transparent 16%
+      ),
+    linear-gradient(
+      90deg,
+      transparent 84%,
+      rgba(74, 222, 128, 0.08) 92%,
+      transparent 100%
+    ),
+    /* 左右蓝色竖向光柱 */
+    linear-gradient(90deg, rgba(59, 130, 246, 0.12) 0%, transparent 12%),
+    linear-gradient(270deg, rgba(59, 130, 246, 0.12) 0%, transparent 12%),
+    /* 顶部暗角与底部辉光 */
+    radial-gradient(ellipse at 50% 0%, rgba(7, 10, 18, 0.9) 0%, transparent 45%),
+    radial-gradient(
+      ellipse at 50% 100%,
+      rgba(30, 64, 175, 0.25) 0%,
+      transparent 50%
+    ),
+    /* 基础深色 */
+    linear-gradient(180deg, #05070c 0%, #0a0f1c 40%, #0d1424 100%);
+
+  /* 两侧服务器架网格线纹理 */
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 22%;
+    width: 24%;
+    pointer-events: none;
+    background-image:
+      /* 横向服务器单元分隔线 */
+      repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 18px,
+        rgba(74, 222, 128, 0.07) 18px,
+        rgba(74, 222, 128, 0.07) 19px
+      ),
+      /* 竖向结构线 */
+      repeating-linear-gradient(
+          90deg,
+          transparent,
+          transparent 22px,
+          rgba(74, 222, 128, 0.04) 22px,
+          rgba(74, 222, 128, 0.04) 23px
+        ),
+      /* 发光服务器面板条 */
+      repeating-linear-gradient(
+          0deg,
+          transparent,
+          transparent 8px,
+          rgba(74, 222, 128, 0.05) 8px,
+          rgba(74, 222, 128, 0.12) 14px,
+          transparent 14px,
+          transparent 38px
+        );
+    mask-image: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.85) 0%,
+      transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.85) 0%,
+      transparent 100%
+    );
+  }
+
+  &::before {
+    left: 0;
+    transform: perspective(700px) rotateY(22deg);
+    transform-origin: left center;
+  }
+
+  &::after {
+    right: 0;
+    transform: perspective(700px) rotateY(-22deg);
+    transform-origin: right center;
+  }
+}
+
+/* 底部圆形平台 */
+.connect-platform {
+  position: absolute;
+  bottom: 6%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 70%;
+  aspect-ratio: 2.4 / 1;
+  pointer-events: none;
+  z-index: 0;
+
+  .platform-ring {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    border-style: solid;
+    border-color: rgba(34, 211, 238, 0.55);
+    box-shadow:
+      0 0 28px rgba(34, 211, 238, 0.35),
+      inset 0 0 28px rgba(34, 211, 238, 0.15);
+
+    &.ring-1 {
+      width: 100%;
+      height: 100%;
+      border-width: 2px;
+      opacity: 0.95;
+    }
+
+    &.ring-2 {
+      width: 78%;
+      height: 78%;
+      border-width: 3px;
+      border-color: rgba(59, 130, 246, 0.65);
+      box-shadow:
+        0 0 38px rgba(59, 130, 246, 0.4),
+        inset 0 0 38px rgba(59, 130, 246, 0.18);
+    }
+
+    &.ring-3 {
+      width: 56%;
+      height: 56%;
+      border-width: 2px;
+      border-color: rgba(34, 211, 238, 0.75);
+      box-shadow:
+        0 0 48px rgba(34, 211, 238, 0.45),
+        inset 0 0 48px rgba(34, 211, 238, 0.2);
+      animation: platformPulse 3s ease-in-out infinite;
+    }
+
+    &.ring-2 {
+      animation: platformPulse 3s ease-in-out 0.6s infinite;
+    }
+
+    &.ring-1 {
+      animation: platformPulse 3s ease-in-out 1.2s infinite;
+    }
+  }
+}
+
+@keyframes platformPulse {
+  0%,
+  100% {
+    opacity: 0.85;
+    box-shadow:
+      0 0 24px rgba(34, 211, 238, 0.25),
+      inset 0 0 24px rgba(34, 211, 238, 0.1);
+  }
+  50% {
+    opacity: 1;
+    box-shadow:
+      0 0 52px rgba(34, 211, 238, 0.5),
+      inset 0 0 52px rgba(34, 211, 238, 0.2);
+  }
 }
 
 .connect-card {
-  width: 720px;
-  padding: 80px 64px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 32px;
-  backdrop-filter: blur(24px);
+  position: relative;
+  z-index: 2;
+  width: 420px;
+  padding: 56px 44px 52px;
+  background: rgba(16, 22, 40, 0.78);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 40px;
+  backdrop-filter: blur(36px);
+  -webkit-backdrop-filter: blur(36px);
+  box-shadow:
+    0 32px 96px rgba(0, 0, 0, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
   text-align: center;
+  animation: cardEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes cardEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(30px) scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 .connect-logo {
-  color: #6c8cff;
-  margin-bottom: 32px;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 26px;
+}
+
+.connect-avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center top;
+  border: 3px solid rgba(255, 255, 255, 0.28);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.35),
+    0 0 0 4px rgba(79, 110, 247, 0.15),
+    0 0 28px rgba(79, 110, 247, 0.25);
 }
 
 .connect-title {
-  font-size: 40px;
-  font-weight: 700;
+  font-size: 29px;
+  font-weight: 800;
   color: #fff;
-  margin: 0 0 16px;
-  letter-spacing: 2px;
+  margin: 0 0 12px;
+  letter-spacing: 0.5px;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
 }
 
 .connect-desc {
-  font-size: 18px;
-  color: rgba(255, 255, 255, 0.45);
-  margin: 0 0 48px;
+  font-size: 15px;
+  color: rgba(255, 255, 255, 0.55);
+  margin: 0 0 38px;
+  line-height: 1.5;
 }
 
 .connect-actions {
   display: flex;
-  gap: 24px;
+  gap: 16px;
   justify-content: center;
-  margin-bottom: 48px;
+  margin-bottom: 0;
 }
 
 .connect-btn {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 20px 40px;
-  border-radius: 16px;
-  font-size: 18px;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  padding: 17px 32px;
+  border-radius: 30px;
+  font-size: 17px;
   font-weight: 600;
   cursor: pointer;
   border: none;
   transition: all 0.25s ease;
 
   &.primary {
-    background: linear-gradient(135deg, #4f6ef7, #6c8cff);
+    background: linear-gradient(135deg, #4f6ef7 0%, #6c8cff 100%);
     color: #fff;
-    box-shadow: 0 8px 32px rgba(79, 110, 247, 0.35);
-
+    box-shadow:
+      0 10px 36px rgba(79, 110, 247, 0.42),
+      inset 0 1px 0 rgba(255, 255, 255, 0.25);
     &:hover {
       transform: translateY(-2px);
-      box-shadow: 0 12px 40px rgba(79, 110, 247, 0.5);
+      box-shadow:
+        0 14px 44px rgba(79, 110, 247, 0.55),
+        inset 0 1px 0 rgba(255, 255, 255, 0.3);
+    }
+    &:active {
+      transform: translateY(0);
     }
   }
 
@@ -709,17 +947,17 @@ async function handleVoiceQueryComplete(text: string) {
 .mic-bottom-left {
   position: absolute;
   left: 50%;
-  transform: translateX(-120px);
+  transform: translateX(-360px);
   bottom: 10%;
   z-index: 25;
   transition: transform 0.2s ease;
 
   &:hover {
-    transform: translateX(-120px) scale(1.06);
+    transform: translateX(-360px) scale(1.06);
   }
 
   &:active {
-    transform: translateX(-120px) scale(0.95);
+    transform: translateX(-360px) scale(0.95);
   }
 }
 
@@ -727,17 +965,17 @@ async function handleVoiceQueryComplete(text: string) {
 .interrupt-bottom-right {
   position: absolute;
   right: 50%;
-  transform: translateX(120px);
+  transform: translateX(360px);
   bottom: 10%;
   z-index: 25;
   transition: transform 0.2s ease;
 
   &:hover {
-    transform: translateX(120px) scale(1.06);
+    transform: translateX(360px) scale(1.06);
   }
 
   &:active {
-    transform: translateX(120px) scale(0.95);
+    transform: translateX(360px) scale(0.95);
   }
 }
 
@@ -773,10 +1011,10 @@ async function handleVoiceQueryComplete(text: string) {
 /* ===== 拾音按钮 ===== */
 .mic-btn {
   flex-shrink: 0;
-  width: 130px;
-  height: 130px;
-  border-radius: 36px;
-  border: 2px solid rgba(255, 255, 255, 0.15);
+  width: 260px;
+  height: 260px;
+  border-radius: 72px;
+  border: 4px solid rgba(255, 255, 255, 0.15);
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(12px);
   color: rgba(255, 255, 255, 0.8);
@@ -785,14 +1023,14 @@ async function handleVoiceQueryComplete(text: string) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 12px;
   transition: all 0.25s ease;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
 
   .mic-label {
-    font-size: 12px;
+    font-size: 24px;
     font-weight: 500;
     color: #ffffff;
     opacity: 0.7;
@@ -810,7 +1048,7 @@ async function handleVoiceQueryComplete(text: string) {
     background: rgba(239, 68, 68, 0.25);
     border-color: rgba(239, 68, 68, 0.6);
     color: #f87171;
-    box-shadow: 0 0 40px rgba(239, 68, 68, 0.3);
+    box-shadow: 0 0 80px rgba(239, 68, 68, 0.3);
 
     .mic-label {
       color: #ffffff;
@@ -822,7 +1060,7 @@ async function handleVoiceQueryComplete(text: string) {
     background: rgba(52, 211, 153, 0.2);
     border-color: rgba(52, 211, 153, 0.5);
     color: #34d399;
-    box-shadow: 0 0 32px rgba(52, 211, 153, 0.25);
+    box-shadow: 0 0 64px rgba(52, 211, 153, 0.25);
 
     .mic-label {
       color: #ffffff;
@@ -845,7 +1083,7 @@ async function handleVoiceQueryComplete(text: string) {
     background: rgba(96, 165, 250, 0.2);
     border-color: rgba(96, 165, 250, 0.5);
     color: #60a5fa;
-    box-shadow: 0 0 24px rgba(96, 165, 250, 0.2);
+    box-shadow: 0 0 48px rgba(96, 165, 250, 0.2);
 
     .mic-label {
       color: #ffffff;
@@ -857,7 +1095,7 @@ async function handleVoiceQueryComplete(text: string) {
     background: rgba(245, 158, 11, 0.2);
     border-color: rgba(245, 158, 11, 0.5);
     color: #fbbf24;
-    box-shadow: 0 0 24px rgba(245, 158, 11, 0.2);
+    box-shadow: 0 0 48px rgba(245, 158, 11, 0.2);
 
     .mic-label {
       color: #ffffff;
@@ -869,7 +1107,7 @@ async function handleVoiceQueryComplete(text: string) {
     background: rgba(52, 211, 153, 0.2);
     border-color: rgba(52, 211, 153, 0.5);
     color: #34d399;
-    box-shadow: 0 0 24px rgba(52, 211, 153, 0.2);
+    box-shadow: 0 0 48px rgba(52, 211, 153, 0.2);
 
     .mic-label {
       color: #ffffff;
@@ -905,7 +1143,7 @@ async function handleVoiceQueryComplete(text: string) {
     opacity: 0.4;
   }
   40% {
-    transform: translateY(-3px);
+    transform: translateY(-6px);
     opacity: 1;
   }
 }
@@ -972,9 +1210,9 @@ async function handleVoiceQueryComplete(text: string) {
 
 .mic-btn-ring {
   position: absolute;
-  inset: -6px;
-  border-radius: 24px;
-  border: 2px solid transparent;
+  inset: -12px;
+  border-radius: 48px;
+  border: 4px solid transparent;
   pointer-events: none;
   transition: all 0.3s ease;
 
@@ -1018,10 +1256,10 @@ async function handleVoiceQueryComplete(text: string) {
 /* ===== 打断按钮 ===== */
 .interrupt-btn {
   flex-shrink: 0;
-  width: 130px;
-  height: 130px;
-  border-radius: 36px;
-  border: 2px solid rgba(251, 146, 60, 0.35);
+  width: 260px;
+  height: 260px;
+  border-radius: 72px;
+  border: 4px solid rgba(251, 146, 60, 0.35);
   background: rgba(251, 146, 60, 0.12);
   backdrop-filter: blur(12px);
   color: #fb923c;
@@ -1030,14 +1268,14 @@ async function handleVoiceQueryComplete(text: string) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 12px;
   transition: all 0.25s ease;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
 
   .interrupt-label {
-    font-size: 12px;
+    font-size: 24px;
     font-weight: 600;
     color: #ffffff;
     opacity: 0.85;
@@ -1046,13 +1284,13 @@ async function handleVoiceQueryComplete(text: string) {
   &:hover {
     background: rgba(251, 146, 60, 0.22);
     border-color: rgba(251, 146, 60, 0.6);
-    box-shadow: 0 0 32px rgba(251, 146, 60, 0.25);
+    box-shadow: 0 0 64px rgba(251, 146, 60, 0.25);
   }
 
   &:active {
     background: rgba(251, 146, 60, 0.3);
     border-color: rgba(251, 146, 60, 0.8);
-    box-shadow: 0 0 48px rgba(251, 146, 60, 0.4);
+    box-shadow: 0 0 96px rgba(251, 146, 60, 0.4);
   }
 }
 
@@ -1065,8 +1303,8 @@ async function handleVoiceQueryComplete(text: string) {
   transition: transform 0.2s ease;
 
   .hangup-img {
-    width: 80px;
-    height: 80px;
+    width: 160px;
+    height: 160px;
     object-fit: contain;
   }
 
@@ -1083,30 +1321,46 @@ async function handleVoiceQueryComplete(text: string) {
 
 /* 小屏手机 (320px-480px) */
 @media (max-width: 480px) {
+  .connect-overlay {
+    padding-top: clamp(48px, 18vh, 140px);
+  }
+
   .connect-card {
+    width: 88%;
+    padding: 38px 26px 36px;
+    border-radius: 32px;
+  }
+
+  .connect-platform {
     width: 90%;
-    padding: 40px 28px;
+    bottom: 4%;
+  }
+
+  .connect-avatar {
+    width: 84px;
+    height: 84px;
   }
 
   .connect-title {
-    font-size: 24px;
+    font-size: 23px;
   }
 
   .connect-desc {
     font-size: 14px;
-    margin-bottom: 28px;
+    margin-bottom: 26px;
   }
 
   .connect-actions {
     flex-direction: column;
     gap: 12px;
-    margin-bottom: 28px;
+    margin-bottom: 0;
   }
 
   .connect-btn {
-    padding: 14px 28px;
+    padding: 15px 28px;
     font-size: 15px;
     justify-content: center;
+    border-radius: 26px;
   }
 
   .top-bar {
@@ -1127,65 +1381,64 @@ async function handleVoiceQueryComplete(text: string) {
 
   .mic-bottom-left {
     left: 50%;
-    transform: translateX(-100px);
+    transform: translateX(-200px);
     bottom: 10%;
   }
 
   .mic-bottom-left:hover {
-    transform: translateX(-100px) scale(1.06);
+    transform: translateX(-200px) scale(1.06);
   }
 
   .mic-bottom-left:active {
-    transform: translateX(-100px) scale(0.95);
+    transform: translateX(-200px) scale(0.95);
   }
 
   .mic-btn {
-    width: 85px;
-    height: 85px;
-    border-radius: 24px;
+    width: 170px;
+    height: 170px;
+    border-radius: 48px;
 
     .mic-label {
-      font-size: 10px;
+      font-size: 20px;
     }
   }
 
   .mic-btn-ring {
-    border-radius: 24px;
+    border-radius: 48px;
   }
 
   .interrupt-bottom-right {
     right: 50%;
-    transform: translateX(100px);
+    transform: translateX(200px);
     bottom: 10%;
   }
 
   .interrupt-bottom-right:hover {
-    transform: translateX(100px) scale(1.06);
+    transform: translateX(200px) scale(1.06);
   }
 
   .interrupt-bottom-right:active {
-    transform: translateX(100px) scale(0.95);
+    transform: translateX(200px) scale(0.95);
   }
 
   .interrupt-btn {
-    width: 85px;
-    height: 85px;
-    border-radius: 24px;
+    width: 170px;
+    height: 170px;
+    border-radius: 48px;
 
     .interrupt-label {
-      font-size: 10px;
+      font-size: 20px;
     }
   }
 
-
   .hangup-top-left {
     right: 16px;
     top: 16px;
   }
 
   .hangup-img {
-    width: 56px;
-    height: 56px;
+    width: 112px;
+    height: 112px;
   }
 
   .config-row {
@@ -1206,13 +1459,23 @@ async function handleVoiceQueryComplete(text: string) {
 
 /* 中等手机 (481px-768px) */
 @media (min-width: 481px) and (max-width: 768px) {
+  .connect-overlay {
+    padding-top: clamp(70px, 24vh, 200px);
+  }
+
   .connect-card {
+    width: 78%;
+    padding: 46px 38px;
+    border-radius: 36px;
+  }
+
+  .connect-platform {
     width: 80%;
-    padding: 48px 40px;
+    bottom: 5%;
   }
 
   .connect-title {
-    font-size: 30px;
+    font-size: 28px;
   }
 
   .top-bar {
@@ -1221,46 +1484,46 @@ async function handleVoiceQueryComplete(text: string) {
 
   .mic-bottom-left {
     left: 50%;
-    transform: translateX(-110px);
+    transform: translateX(-220px);
     bottom: 10%;
   }
 
   .mic-bottom-left:hover {
-    transform: translateX(-110px) scale(1.06);
+    transform: translateX(-220px) scale(1.06);
   }
 
   .mic-bottom-left:active {
-    transform: translateX(-110px) scale(0.95);
+    transform: translateX(-220px) scale(0.95);
   }
 
   .mic-btn {
-    width: 95px;
-    height: 95px;
-    border-radius: 26px;
+    width: 190px;
+    height: 190px;
+    border-radius: 52px;
   }
 
   .mic-btn-ring {
-    border-radius: 26px;
+    border-radius: 52px;
   }
 
   .interrupt-bottom-right {
     right: 50%;
-    transform: translateX(110px);
+    transform: translateX(220px);
     bottom: 10%;
   }
 
   .interrupt-bottom-right:hover {
-    transform: translateX(110px) scale(1.06);
+    transform: translateX(220px) scale(1.06);
   }
 
   .interrupt-bottom-right:active {
-    transform: translateX(110px) scale(0.95);
+    transform: translateX(220px) scale(0.95);
   }
 
   .interrupt-btn {
-    width: 95px;
-    height: 95px;
-    border-radius: 26px;
+    width: 190px;
+    height: 190px;
+    border-radius: 52px;
   }
 
   .hangup-top-left {
@@ -1269,8 +1532,8 @@ async function handleVoiceQueryComplete(text: string) {
   }
 
   .hangup-img {
-    width: 64px;
-    height: 64px;
+    width: 128px;
+    height: 128px;
   }
 }
 
@@ -1278,13 +1541,170 @@ async function handleVoiceQueryComplete(text: string) {
 @media (min-width: 769px) {
 }
 
+/* 1440×1920 分辨率专用优化 */
+@media (width: 1440px) and (height: 1920px) {
+  .connect-overlay {
+    padding-top: 26vh;
+  }
+
+  .connect-card {
+    width: 500px;
+    padding: 72px 48px;
+    border-radius: 48px;
+  }
+
+  .connect-platform {
+    width: 68%;
+    bottom: 8%;
+  }
+
+  .connect-avatar {
+    width: 118px;
+    height: 118px;
+    border-width: 4px;
+  }
+
+  .connect-logo {
+    margin-bottom: 30px;
+  }
+
+  .connect-title {
+    font-size: 34px;
+    margin-bottom: 14px;
+    letter-spacing: 0.6px;
+  }
+
+  .connect-desc {
+    font-size: 17px;
+    margin-bottom: 44px;
+    line-height: 1.55;
+  }
+
+  .connect-actions {
+    margin-bottom: 0;
+  }
+
+  .connect-btn {
+    padding: 22px 40px;
+    font-size: 19px;
+    border-radius: 34px;
+  }
+
+  /* 已连接状态：右侧控制按钮尺寸放大，确保触控响应区域充足 */
+  .side-controls {
+    right: 32px;
+    gap: 18px;
+  }
+
+  .mic-btn,
+  .interrupt-btn,
+  .hangup-btn {
+    width: 168px;
+    height: 168px;
+    border-radius: 48px;
+
+    .mic-label,
+    .interrupt-label,
+    .hangup-label {
+      font-size: 24px;
+    }
+  }
+
+  .mic-btn-ring {
+    inset: -16px;
+    border-radius: 60px;
+  }
+
+  /* 顶部状态栏 */
+  .top-bar {
+    padding: 36px 48px;
+  }
+
+  .status-text {
+    font-size: 17px;
+  }
+
+  .status-dot {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* 字幕区域 */
+  .subtitle-overlay {
+    width: 76%;
+    top: 68%;
+  }
+
+  .subtitle-container {
+    padding: 18px 24px;
+    border-radius: 20px;
+  }
+}
+
+/* 1440×2560 分辨率专用优化 */
+@media (width: 1440px) and (height: 2560px) {
+  .connect-overlay {
+    padding-top: 30vh;
+  }
+
+  .connect-card {
+    width: 560px;
+    padding: 84px 56px;
+    border-radius: 52px;
+  }
+
+  .connect-platform {
+    width: 72%;
+    bottom: 10%;
+  }
+
+  .connect-avatar {
+    width: 132px;
+    height: 132px;
+    border-width: 4px;
+  }
+
+  .connect-logo {
+    margin-bottom: 34px;
+  }
+
+  .connect-title {
+    font-size: 38px;
+    margin-bottom: 16px;
+  }
+
+  .connect-desc {
+    font-size: 18px;
+    margin-bottom: 52px;
+  }
+
+  .connect-actions {
+    margin-bottom: 0;
+  }
+
+  .connect-btn {
+    padding: 24px 44px;
+    font-size: 20px;
+    border-radius: 36px;
+  }
+}
+
 /* 横屏模式 */
 @media (orientation: landscape) and (max-height: 600px) {
+  .connect-overlay {
+    padding-top: clamp(40px, 10vh, 80px);
+  }
+
   .connect-card {
     width: 60%;
     padding: 24px 32px;
   }
 
+  .connect-platform {
+    width: 55%;
+    bottom: 2%;
+  }
+
   .connect-title {
     font-size: 24px;
     margin-bottom: 8px;
@@ -1296,7 +1716,7 @@ async function handleVoiceQueryComplete(text: string) {
   }
 
   .connect-actions {
-    margin-bottom: 20px;
+    margin-bottom: 0;
   }
 
   .subtitle-container {
@@ -1309,53 +1729,53 @@ async function handleVoiceQueryComplete(text: string) {
 
   .mic-bottom-left {
     left: 50%;
-    transform: translateX(-90px);
+    transform: translateX(-180px);
     bottom: 8%;
   }
 
   .mic-bottom-left:hover {
-    transform: translateX(-90px) scale(1.06);
+    transform: translateX(-180px) scale(1.06);
   }
 
   .mic-bottom-left:active {
-    transform: translateX(-90px) scale(0.95);
+    transform: translateX(-180px) scale(0.95);
   }
 
   .mic-btn {
-    width: 80px;
-    height: 80px;
-    border-radius: 22px;
+    width: 160px;
+    height: 160px;
+    border-radius: 44px;
 
     .mic-label {
-      font-size: 10px;
+      font-size: 20px;
     }
   }
 
   .mic-btn-ring {
-    border-radius: 22px;
+    border-radius: 44px;
   }
 
   .interrupt-bottom-right {
     right: 50%;
-    transform: translateX(90px);
+    transform: translateX(180px);
     bottom: 8%;
   }
 
   .interrupt-bottom-right:hover {
-    transform: translateX(90px) scale(1.06);
+    transform: translateX(180px) scale(1.06);
   }
 
   .interrupt-bottom-right:active {
-    transform: translateX(90px) scale(0.95);
+    transform: translateX(180px) scale(0.95);
   }
 
   .interrupt-btn {
-    width: 80px;
-    height: 80px;
-    border-radius: 22px;
+    width: 160px;
+    height: 160px;
+    border-radius: 44px;
 
     .interrupt-label {
-      font-size: 10px;
+      font-size: 20px;
     }
   }
 
@@ -1365,8 +1785,8 @@ async function handleVoiceQueryComplete(text: string) {
   }
 
   .hangup-img {
-    width: 52px;
-    height: 52px;
+    width: 104px;
+    height: 104px;
   }
 }
 </style>
diff --git a/src/assets/avatar.png b/src/assets/avatar.png
new file mode 100644
index 0000000..f74688d
Binary files /dev/null and b/src/assets/avatar.png differ
diff --git a/src/components/SubtitlePanel.vue b/src/components/SubtitlePanel.vue
index 8983a6e..6119210 100644
--- a/src/components/SubtitlePanel.vue
+++ b/src/components/SubtitlePanel.vue
@@ -1,10 +1,8 @@
 <template>
   <div class="subtitle-panel">
-    <div
-      class="subtitle-content ai-only-mode"
-      ref="scrollContainerRef"
-    >
-      <div v-if="aiSubtitle" class="ai-subtitle-bar" ref="aiSubtitleBarRef" @scroll="handleScroll">
+    <!-- AI字幕 -->
+    <div class="subtitle-content ai-only-mode" ref="scrollContainerRef">
+      <div v-if="aiSubtitle" class="ai-subtitle-bar" ref="aiSubtitleBarRef">
         <div
           class="ai-subtitle-text"
           ref="aiSubtitleTextRef"
@@ -12,6 +10,24 @@
         >
           {{ aiSubtitle }}
         </div>
+        <!-- 滚动指示器 -->
+        <div
+          v-if="aiTextOverflow"
+          class="scroll-hint"
+          @click="scrollAIToBottom"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            width="14"
+            height="14"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </div>
       </div>
       <div v-else class="subtitle-placeholder">
         <svg
@@ -27,54 +43,138 @@
             d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
           />
         </svg>
-        等待AI回复...
+        等待AI回覆...
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, watch, nextTick, onMounted} from "vue";
+import { ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
 
 const props = defineProps<{
   aiSubtitle: string;
 }>();
 
+// 滚动容器ref：指向 .subtitle-content（实际可滚动容器）
 const scrollContainerRef = ref<HTMLElement | null>(null);
 const aiSubtitleBarRef = ref<HTMLElement | null>(null);
 const aiSubtitleTextRef = ref<HTMLElement | null>(null);
 
+// ===== AI字幕自适应字号 =====
 const aiFontSize = ref(18);
-const isUserScrolling = ref(false);
+const aiTextOverflow = ref(false);
 
+// 检测是否为 1440×2560 目标分辨率
+const isTargetResolution = ref(false);
+
+/**
+ * 检测当前视口是否为 1440×2560 分辨率
+ * 使用 window.innerWidth 和 innerHeight 精确匹配
+ */
+const checkResolution = () => {
+  const TARGET_WIDTH = 1440;
+  const TARGET_HEIGHT = 2560;
+  console.log("------------", window.innerWidth, window.innerHeight);
+  isTargetResolution.value =
+    (window.innerWidth === TARGET_WIDTH &&
+      window.innerHeight === TARGET_HEIGHT) ||
+    (window.innerWidth > 1000 && window.innerHeight > 1680);
+};
+
+/**
+ * 获取目标分辨率下的字号基准值
+ * 1440×2560 下使用更大的字号以确保清晰可读
+ */
+const getTargetFontSizeBase = (textLength: number): number => {
+  if (textLength <= 50) return 36;
+  if (textLength <= 100) return 32;
+  if (textLength <= 200) return 28;
+  if (textLength <= 400) return 24;
+  return 22;
+};
+
+/**
+ * 获取普通分辨率下的字号基准值
+ */
+const getNormalFontSizeBase = (textLength: number): number => {
+  if (textLength <= 50) return 18;
+  if (textLength <= 100) return 16;
+  if (textLength <= 200) return 14;
+  if (textLength <= 400) return 13;
+  return 12;
+};
+
+// 计算AI字幕字号：根据分辨率和文本长度动态调整
 const computeAIFontSize = () => {
   const text = props.aiSubtitle;
+  console.log("------------", text);
   if (!text) {
-    aiFontSize.value = 18;
+    aiFontSize.value = isTargetResolution.value ? 36 : 18;
     return;
   }
 
   const len = text.length;
-  if (len <= 50) aiFontSize.value = 18;
-  else if (len <= 100) aiFontSize.value = 16;
-  else if (len <= 200) aiFontSize.value = 14;
-  else if (len <= 400) aiFontSize.value = 13;
-  else aiFontSize.value = 12;
+  aiFontSize.value = isTargetResolution.value
+    ? getTargetFontSizeBase(len)
+    : getNormalFontSizeBase(len);
 };
 
-const handleScroll = () => {
-  if (!aiSubtitleBarRef.value) return;
-  const { scrollTop, scrollHeight, clientHeight } = aiSubtitleBarRef.value;
-  const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
-  isUserScrolling.value = !isAtBottom;
+// 检测AI字幕是否溢出
+const checkAIOverflow = () => {
+  nextTick(() => {
+    const bar = aiSubtitleBarRef.value;
+    const textEl = aiSubtitleTextRef.value;
+    if (bar && textEl) {
+      aiTextOverflow.value = textEl.scrollHeight > bar.clientHeight + 4;
+    }
+  });
 };
 
+const scrollAIToBottom = () => {
+  if (aiSubtitleBarRef.value) {
+    aiSubtitleBarRef.value.scrollTo({
+      top: aiSubtitleBarRef.value.scrollHeight,
+      behavior: "smooth",
+    });
+  }
+};
+
+/**
+ * 处理视口尺寸变化：重新检测分辨率并更新字号
+ */
+const handleResize = () => {
+  const wasTarget = isTargetResolution.value;
+  checkResolution();
+  // 如果分辨率状态变化，重新计算字号
+  if (wasTarget !== isTargetResolution.value) {
+    computeAIFontSize();
+  }
+};
+
+onMounted(() => {
+  // 初始检测分辨率
+  checkResolution();
+  computeAIFontSize();
+  // 监听视口尺寸变化
+  window.addEventListener("resize", handleResize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", handleResize);
+});
+
+// ===== 监听变化 =====
+
+// AI字幕变化时：自适应字号 + 检测溢出 + 自动滚动
 watch(
   () => props.aiSubtitle,
   () => {
     computeAIFontSize();
+    checkAIOverflow();
+    // 自动滚动AI字幕到底部
     nextTick(() => {
-      if (aiSubtitleBarRef.value && !isUserScrolling.value) {
+      if (aiSubtitleBarRef.value) {
         aiSubtitleBarRef.value.scrollTo({
           top: aiSubtitleBarRef.value.scrollHeight,
           behavior: "smooth",
@@ -92,6 +192,7 @@ watch(
   height: 100%;
 }
 
+/* ===== 字幕内容 ===== */
 .subtitle-content {
   flex: 1;
   min-height: 0;
@@ -129,16 +230,16 @@ watch(
   font-size: 14px;
 }
 
+/* ===== AI字幕 ===== */
 .ai-only-mode {
   display: flex;
-  flex-direction: column;
+  align-items: flex-end;
   padding-bottom: 4px;
 }
 
 .ai-subtitle-bar {
   width: 100%;
-  flex: 1;
-  min-height: 0;
+  max-height: 100%;
   overflow-y: auto;
   background: linear-gradient(
     135deg,
@@ -171,4 +272,64 @@ watch(
   transition: font-size 0.3s ease;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
 }
+
+.scroll-hint {
+  position: sticky;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(108, 140, 255, 0.3);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  margin: 8px auto 0;
+  transition: all 0.2s;
+
+  &:hover {
+    background: rgba(108, 140, 255, 0.5);
+    transform: translateX(-50%) scale(1.1);
+  }
+}
+
+/* ===== 1440×2560 分辨率专用样式 ===== */
+@media (min-width: 1000px) and (min-height: 1680px) {
+  .subtitle-placeholder {
+    font-size: 24px;
+    line-height: 1.75;
+    letter-spacing: 0.5px;
+    font-weight: 400;
+  }
+
+  /* AI字幕：字号由 JavaScript 动态控制，此处仅设置辅助样式 */
+  .ai-subtitle-text {
+    line-height: 1.75;
+    letter-spacing: 0.6px;
+    font-weight: 400;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
+  }
+
+  /* 字幕容器：背景与边框适配大字号 */
+  .ai-subtitle-bar {
+    padding: 18px 24px;
+    border-radius: 12px;
+    background: linear-gradient(
+      135deg,
+      rgba(108, 140, 255, 0.12) 0%,
+      rgba(79, 110, 247, 0.06) 100%
+    );
+    border: 1px solid rgba(108, 140, 255, 0.15);
+  }
+
+  /* 滚动指示器：尺寸适配 */
+  .scroll-hint {
+    width: 40px;
+    height: 40px;
+    margin-top: 12px;
+  }
+}
 </style>
diff --git a/src/hooks/useDigitalHuman.ts b/src/hooks/useDigitalHuman.ts
index d5f98d3..a776359 100644
--- a/src/hooks/useDigitalHuman.ts
+++ b/src/hooks/useDigitalHuman.ts
@@ -4,10 +4,9 @@ import RealTimeHuman from "@bddh/starling-realtime-client";
 import { checkPlayUnMute } from "@/utils/audioUtils";
 import { SilenceDetector } from "@/utils/SilenceDetector";
 import { TokenManager } from "@/utils/tokenManager";
-import type { ChatMessage, SubtitleMode } from "@/types";
+import type { ChatMessage } from "@/types";
 
-const DEFAULT_TEXT =
-  "你好！我是皮特教授，欢迎向我提问任何有关电池的问题。";
+const DEFAULT_TEXT = "你好！我是皮特教授，歡迎向我提問任何有關電池的問題。";
 const OPENING_TTS_DELAY_MS = 200;
 const SILENCE_TIMEOUT_MS = 5000;
 // 最短有效语音时长（秒），低于此时长视为无效输入
@@ -17,7 +16,15 @@ const BROADCAST_TIMEOUT_MS = 60000;
 const APPID = "i-sfyrkdr0ubepa";
 const APP_KEY = "72vpdansbpg8nxjbxzhp";
 // 打断词列表：识别到这些词时自动打断播报
-const INTERRUPT_KEYWORDS = ["稍等一下", "停一下", "抱歉打断一下", "不好意思", "对不起", "停", "闭嘴"];
+const INTERRUPT_KEYWORDS = [
+  "稍等一下",
+  "停一下",
+  "抱歉打断一下",
+  "不好意思",
+  "对不起",
+  "停",
+  "闭嘴",
+];
 
 /**
  * 检测文本是否包含实质内容（去除空白和标点后仍有字符）
@@ -127,7 +134,6 @@ export function useDigitalHuman(options?: {
   const isBroadcasting = ref(false);
 
   // 字幕相关
-  const subtitleMode = ref<SubtitleMode>("ai-only");
   const currentAISubtitle = ref("");
   const currentUserSubtitle = ref("");
   const chatMessages = ref<ChatMessage[]>([]);
@@ -329,10 +335,14 @@ export function useDigitalHuman(options?: {
             if (pickPhase.value === "broadcasting") {
               const hasInterrupt = containsInterruptKeyword(subtitleContent);
               if (hasInterrupt) {
-                console.info(`[打断词检测] 播报中识别到打断词: "${subtitleContent}"，自动打断（仅中断播报，不调用LLM）`);
+                console.info(
+                  `[打断词检测] 播报中识别到打断词: "${subtitleContent}"，自动打断（仅中断播报，不调用LLM）`,
+                );
                 interrupt();
               } else {
-                console.info(`[打断词检测] 播报中收到ASR结果: "${subtitleContent}"，非打断词，忽略`);
+                console.info(
+                  `[打断词检测] 播报中收到ASR结果: "${subtitleContent}"，非打断词，忽略`,
+                );
               }
               break;
             }
@@ -348,9 +358,7 @@ export function useDigitalHuman(options?: {
             if (pickPhase.value === "idle") {
               // 忽略打断后3秒内到达的延迟ASR结果（避免打断词被当作新输入）
               if (Date.now() - lastInterruptTime < 3000) {
-                console.info(
-                  "[状态机] 打断后延迟到达的ASR结果，忽略",
-                );
+                console.info("[状态机] 打断后延迟到达的ASR结果，忽略");
                 break;
               }
               const hasSubstance = hasSubstantialContent(subtitleContent);
@@ -846,7 +854,6 @@ export function useDigitalHuman(options?: {
     // 播报状态
     isBroadcasting,
     // 字幕
-    subtitleMode,
     currentAISubtitle,
     currentUserSubtitle,
     chatMessages,
diff --git a/src/hooks/useLLM.ts b/src/hooks/useLLM.ts
index 6327b60..f66654f 100644
--- a/src/hooks/useLLM.ts
+++ b/src/hooks/useLLM.ts
@@ -1,4 +1,5 @@
 import { ref } from "vue";
+import OpenCC from "opencc-js";
 
 // 火山方舟 Chat Completions API 配置
 const LLM_API_URL =
@@ -51,7 +52,7 @@ export function useLLM() {
 
   const SYSTEM_PROMPT: LLMMessage = {
     role: "system",
-    content: "你是一个友好的数字人助手，请用简洁自然的语言回答用户的问题。",
+    content: "你是一個友善的數位人助手，請用簡潔自然的語言回答使用者的問題。",
   };
 
   const sendToLLM = async (userMessage: string): Promise<string> => {
@@ -102,7 +103,7 @@ export function useLLM() {
 
       return aiReply;
     } catch (err: any) {
-      const errorMsg = err.message || "请求失败";
+      const errorMsg = err.message || "請求失敗";
       error.value = errorMsg;
       console.error("LLM请求错误:", err);
       throw err;
@@ -143,7 +144,9 @@ export function useLLM() {
       }
 
       const data = await response.json();
-      const aiReply = data.text || "";
+      // 将简体中文回复转换为繁体中文
+      const rawText = data.text || "";
+      const aiReply = OpenCC.Converter({ from: "cn", to: "tw" })(rawText);
 
       conversationHistory.value.push({
         role: "user",
@@ -157,7 +160,7 @@ export function useLLM() {
 
       return aiReply;
     } catch (err: any) {
-      const errorMsg = err.message || "请求失败";
+      const errorMsg = err.message || "請求失敗";
       error.value = errorMsg;
       console.error("ChatBase请求错误:", err);
       throw err;
diff --git a/src/types/index.ts b/src/types/index.ts
index f7fe8d9..115851e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -5,11 +5,3 @@ export interface ChatMessage {
   timestamp: number;
   completed: boolean;
 }
-
-export type SubtitleMode = 'ai-only' | 'bubble' | 'merged';
-
-export const SUBTITLE_MODE_LABELS: Record<SubtitleMode, string> = {
-  'ai-only': 'AI字幕',
-  'bubble': '对话气泡',
-  'merged': '合并气泡',
-};