Capacitor iOS 基础体验调整

capacitor.config.ts

@@ -1,9 +1,14 @@
 import type { CapacitorConfig } from '@capacitor/cli'
 
+
 const config: CapacitorConfig = {
   appId: 'cn.stapxs.webqq',
   appName: 'Stapxs QQ Lite',
-  webDir: 'dist'
+  webDir: 'dist',
+  server: {
+    url: 'http://localhost:8080',
+    cleartext: true
+  }
 }
 
 export default config

ios/App/App.xcodeproj/project.pbxproj

@@ -349,6 +349,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = LZ4NKVK3NY;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -369,6 +370,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = LZ4NKVK3NY;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";

ios/App/App/Info.plist

@@ -3,7 +3,7 @@
 <plist version="1.0">
 <dict>
 	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
+	<string>zh</string>
 	<key>CFBundleDisplayName</key>
         <string>Stapxs QQ Lite</string>
 	<key>CFBundleExecutable</key>
@@ -45,5 +45,10 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<true/>
+    <key>NSAppTransportSecurity</key>
+    <dict>
+        <key>NSAllowsArbitraryLoads</key>
+        <true/>
+    </dict>
 </dict>
 </plist>

ios/App/Podfile

@@ -12,6 +12,7 @@ def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'UntinyCapacitorSafeArea', :path => '../../node_modules/@untiny/capacitor-safe-area'
 end
 
 target 'App' do

ios/App/Podfile.lock

@@ -4,11 +4,14 @@ PODS:
   - CapacitorApp (6.0.2):
     - Capacitor
   - CapacitorCordova (6.2.0)
+  - UntinyCapacitorSafeArea (1.0.3):
+    - Capacitor
 
 DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorApp (from `../../node_modules/@capacitor/app`)"
   - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
+  - "UntinyCapacitorSafeArea (from `../../node_modules/@untiny/capacitor-safe-area`)"
 
 EXTERNAL SOURCES:
   Capacitor:
@@ -17,12 +20,15 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/app"
   CapacitorCordova:
     :path: "../../node_modules/@capacitor/ios"
+  UntinyCapacitorSafeArea:
+    :path: "../../node_modules/@untiny/capacitor-safe-area"
 
 SPEC CHECKSUMS:
   Capacitor: 1f3c7b9802d958cd8c4eb63895fff85dff2e1eea
   CapacitorApp: 2a8c3a0b0814322e5e6e15fe595f02c3808f0f8b
   CapacitorCordova: b33e7f4aa4ed105dd43283acdd940964374a87d9
+  UntinyCapacitorSafeArea: 6354c662c37e272d587bb2a224cba030d902b2bd
 
-PODFILE CHECKSUM: 4233f5c5f414604460ff96d372542c311b0fb7a8
+PODFILE CHECKSUM: 3775bab260748c1734d8cf38ed633c5ff6a48b36
 
 COCOAPODS: 1.16.2

package.json

@@ -12,11 +12,12 @@
         "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix",
         "dev": "vite dev",
         "dev:electron": "electron-vite dev",
-        "dev:ios": "vite build && capacitor sync && capacitor run ios",
+        "dev:ios": "capacitor sync ios && capacitor run ios",
         "build": "vite build",
         "build:win": "electron-vite build && electron-builder --win",
         "build:mac": "electron-vite build && electron-builder --mac",
-        "build:linux": "electron-vite build && electron-builder --linux"
+        "build:linux": "electron-vite build && electron-builder --linux",
+        "build:ios": "vite build && capacitor sync ios && capacitor open ios"
     },
     "dependencies": {
         "@electron-toolkit/preload": "^3.0.0",
@@ -44,6 +45,7 @@
         "@stapxs/umami-logger-typescript": "^1.0.12",
         "@types/jsonpath": "^0.2.4",
         "@types/node": "^20.14.8",
+        "@untiny/capacitor-safe-area": "^1.0.3",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vue/eslint-config-typescript": "^13.0.0",
         "animejs": "^3.2.2",

src/renderer/src/App.vue

@@ -45,24 +45,28 @@
           "
           @click="changeTab('主页', 'Home', false)">
           <font-awesome-icon :icon="['fas', 'home']" />
+          <span>{{ $t('主页') }}</span>
         </li>
         <li
           id="bar-msg"
           :class="tags.page == 'Messages' ? 'active' : ''"
           @click="changeTab('信息', 'Messages', true)">
           <font-awesome-icon :icon="['fas', 'envelope']" />
+          <span>{{ $t('信息') }}</span>
         </li>
         <li
           id="bar-friends"
           :class="tags.page == 'Friends' ? 'active' : ''"
           @click="changeTab('列表', 'Friends', true)">
           <font-awesome-icon :icon="['fas', 'user']" />
+          <span>{{ $t('列表') }}</span>
         </li>
         <div class="side-bar-space" />
         <li
           :class="tags.page == 'Options' ? 'active' : ''"
           @click="changeTab('设置', 'Options', false)">
           <font-awesome-icon :icon="['fas', 'gear']" />
+          <span>{{ $t('设置') }}</span>
         </li>
       </ul>
       <div
@@ -413,12 +417,17 @@
                 runtimeData.tags.isCapacitor = window.Capacitor != undefined
                          && window.Capacitor.isNativePlatform()
                 runtimeData.tags.isElectron = window.electron != undefined
-                runtimeData.reader = window.electron?.ipcRenderer
-                if (runtimeData.reader) {
+                runtimeData.plantform.reader = window.electron?.ipcRenderer
+                if (runtimeData.plantform.reader) {
                     runtimeData.tags.platform =
-                        await runtimeData.reader.invoke('sys:getPlatform')
+                        await runtimeData.plantform.reader.invoke('sys:getPlatform')
                     runtimeData.tags.release =
-                        await runtimeData.reader.invoke('sys:getRelease')
+                        await runtimeData.plantform.reader.invoke('sys:getRelease')
+                }
+                if(runtimeData.tags.isCapacitor) {
+                    runtimeData.tags.platform = window.Capacitor.getPlatform()
+                    runtimeData.plantform.capacitor = window.Capacitor
+                    runtimeData.plantform.pulgins = window.Capacitor.Plugins
                 }
                 app.config.globalProperties.$viewer = this.viewerBody
                 // 初始化波浪动画
@@ -454,13 +463,18 @@
                     if (app) app.classList.add('withBar')
                 }
                 Option.runAS('opt_auto_gtk', Option.get('opt_auto_gtk'))
-
                 // 基础初始化完成
                 logger.debug('欢迎使用 Stapxs QQ Lite！')
                 logger.debug('当前启动模式为: ' + this.dev ? 'development' : 'production')
                 logger.debug('Electron 环境: ' + runtimeData.tags.isElectron)
+                logger.debug('Capacitor 环境: ' + runtimeData.tags.isCapacitor)
                 // 加载额外样式
                 App.loadAppendStyle()
+                const baseApp = document.getElementById('base-app')
+                if(baseApp) {
+                    baseApp.style.setProperty('--append-fs-adaptation',
+                        (Option.get('fs_adaptation') > 0 ? Option.get('fs_adaptation') : 0) + 'px')
+                }
                 // 加载密码保存和自动连接
                 loginInfo.address = runtimeData.sysConfig.address
                 if (
@@ -509,8 +523,8 @@
              * electron 窗口操作
              */
             controllWin(name: string) {
-                if (runtimeData.reader) {
-                    runtimeData.reader.send('win:' + name)
+                if (runtimeData.plantform.reader) {
+                    runtimeData.plantform.reader.send('win:' + name)
                 }
             },
 
@@ -646,8 +660,8 @@
                 Connector.send('get_system_msg', {}, 'getSystemMsg')
 
                 // 清理通知
-                if (runtimeData.reader) {
-                    runtimeData.reader.send('sys:closeAllNotice', data.id)
+                if (runtimeData.plantform.reader) {
+                    runtimeData.plantform.reader.send('sys:closeAllNotice', data.id)
                 }
             },
 

src/renderer/src/assets/css/append/append_ios.css

@@ -0,0 +1,59 @@
+html {
+    -webkit-tap-highlight-color: transparent;
+}
+
+#app {
+    background: var(--color-card-1);
+}
+.main-body > ul {
+    background: rgba(var(--color-card-rgb), 0.7);
+    backdrop-filter: blur(10px);
+}
+.chat-pan {
+    z-index: 21;
+}
+.chat-pan > div.info > svg {
+    display: none;
+}
+
+.main-body > ul {
+    justify-content: space-evenly;
+}
+.main-body > ul > li > span {
+    display: block !important;
+}
+.hiden-home {
+    margin-left: -140px;
+}
+.main-body > ul > li:first-child {
+    margin-top: 0;
+}
+.main-body > ul > li.active > span,
+.main-body > ul > li.active > svg {
+    background-color: transparent;
+    color: var(--color-main);
+}
+
+.chat-pan > div.chat {
+    margin-bottom: -60px;
+    padding-bottom: 60px;
+}
+.chat-pan > div.chat > div:first-child > div:last-child {
+    padding-bottom: 60px;
+}
+.chat-pan > div.more > div:nth-child(2) {
+    background: rgba(var(--color-card-rgb), 0.7);
+    backdrop-filter: blur(50px);
+}
+.chat-pan > div.more > div:nth-child(2) > div:first-child {
+    border-radius: 999px;
+}
+.chat-pan > div.more > div:nth-child(2) > div:nth-child(2) {
+    background: transparent;
+    border: 1px solid var(--color-font-2);
+    opacity: 0.7;
+    border-radius: 999px;
+}
+.chat-pan > div.more > div:nth-child(2) > div:nth-child(2) > div {
+    display: none;
+}

src/renderer/src/assets/css/chat.css

@@ -6,8 +6,6 @@ input {
 }
 
 .chat-pan {
-    --append-fs-adaptation: 0px;
-
     background-color: var(--color-card);
     background-repeat: no-repeat;
     background-position: center;
@@ -18,6 +16,7 @@ input {
     pointer-events: none;
     transition: all 0.3s;
     position: absolute;
+    overflow: hidden;
     display: flex;
     height: 100%;
     left: 371px;
@@ -114,6 +113,9 @@ input {
     z-index: 1;
     flex: 1;
 }
+.chat-pan > div.chat > div {
+    height: calc(100% - var(--append-fs-adaptation));
+}
 .chat-pan > div.chat::-webkit-scrollbar {
     background: transparent;
 }
@@ -392,7 +394,8 @@ input {
 .msg-menu {
     position: absolute;
     overflow: hidden;
-    height: 100%;
+    height: calc(100% - var(--append-fs-adaptation)) !important;
+    top: 0;
     width: 100%;
     z-index: 10;
 }
@@ -484,7 +487,7 @@ input {
 
 .mumber-info {
     position: absolute;
-    height: 100%;
+    height: calc(100% - var(--append-fs-adaptation));
     width: 100%;
 }
 .mumber-info span,

src/renderer/src/assets/css/options.css

@@ -12,12 +12,16 @@
 }
 
 .opt-main {
+    overflow: hidden;
     background: var(--color-bg);
-    height: 100%;
+    height: 0;
     flex-direction: row;
     display: flex;
     padding: 5px;
 }
+.opt-main.active {
+    height: 100% !important;
+}
 
 .opt-main > div:first-child {
     transition: all 0.3s;
@@ -624,9 +628,6 @@
     .option-title {
         display: none !important;
     }
-    .opt-main {
-        height: 100%;
-    }
     .opt-main > div:first-child {
         display: none;
     }