Merge branch 'master' of https://git.jb18cm.plus/fanfpy/AssetManager.UniApp

main.js

@@ -14,7 +14,7 @@ app.$mount()
 // #ifdef VUE3
 import { createSSRApp } from 'vue'
 import api from './utils/api'
-import uView from 'uview-ui'
+import uviewPlus from 'uview-plus'
 
 console.log('🚀 应用启动，导入api模块')
 
@@ -25,9 +25,9 @@ export function createApp() {
   app.config.globalProperties.$api = api
   console.log('✅ api已全局注册为 $api')
   
-  // 注册uView UI 2.0
+  // 注册uview-plus (Vue3兼容版)
-  app.use(uView)
+  app.use(uviewPlus)
-  console.log('✅ uView UI 2.0 已全局注册')
+  console.log('✅ uview-plus 已全局注册')
   
   return {
     app

package-lock.json

@@ -5,15 +5,17 @@
   "packages": {
     "": {
       "dependencies": {
-        "uview-ui": "^2.0.36"
+        "uview-plus": "^3.7.13"
       }
     },
-    "node_modules/uview-ui": {
+    "node_modules/uview-plus": {
-      "version": "2.0.36",
+      "version": "3.7.13",
-      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.36.tgz",
+      "resolved": "https://registry.npmjs.org/uview-plus/-/uview-plus-3.7.13.tgz",
-      "integrity": "sha512-ASSZT6M8w3GTO1eFPbsgEFV0U5UujK+8pTNr+MSUbRNcRMC1u63DDTLJVeArV91kWM0bfAexK3SK9pnTqF9TtA==",
+      "integrity": "sha512-vHByf0kxKReYxam6BuU6wn/80giCkMaMUHEblhkf4kAjP852b86V3ctkjfGtV17MEIORFo3Vkve+HFnHNXpwNg==",
       "engines": {
-        "HBuilderX": "^3.1.0"
+        "HBuilderX": "^3.1.0",
+        "uni-app": "^4.66",
+        "uni-app-x": ""
       }
     }
   }

package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "uview-ui": "^2.0.36"
+    "uview-plus": "^3.7.13"
   }
 }

pages.json

@@ -72,7 +72,7 @@
 	"easycom": {
 		"autoscan": true,
 		"custom": {
-			"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+			"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
 		}
 	}
 }

pages/index/index.vue

@@ -1,7 +1,24 @@
 <template>
   <view class="page-container">
 
-    <view class="header-section">
+    <!-- 骨架屏：资产卡片区域 -->
+    <view class="header-section" v-if="loading">
+      <view class="skeleton-asset-card">
+        <view class="skeleton-row">
+          <view class="skeleton-text skeleton-label"></view>
+        </view>
+        <view class="skeleton-row">
+          <view class="skeleton-text skeleton-big"></view>
+        </view>
+        <view class="skeleton-row skeleton-bottom">
+          <view class="skeleton-text skeleton-stat"></view>
+          <view class="skeleton-text skeleton-stat"></view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 真实内容：资产卡片 -->
+    <view class="header-section" v-else>
       <view class="asset-card">
 
       
@@ -49,7 +66,28 @@
         <text class="section-title">当前记录组合</text>
       </view>
 
+      <!-- 骨架屏：持仓卡片 -->
+      <view v-if="loading" class="holding-card" v-for="i in 2" :key="'skeleton-' + i">
+        <view class="card-top">
+          <view class="flex-row items-center gap-2">
+            <view class="skeleton-icon"></view>
+            <view class="flex-col">
+              <view class="skeleton-text skeleton-name"></view>
+              <view class="skeleton-text skeleton-tags"></view>
+            </view>
+          </view>
+          <view class="skeleton-text skeleton-status"></view>
+        </view>
+        <view class="card-divider"></view>
+        <view class="card-bottom">
+          <view class="skeleton-text skeleton-data"></view>
+          <view class="skeleton-text skeleton-data"></view>
+        </view>
+      </view>
+
+      <!-- 真实内容：持仓卡片 -->
       <view 
+        v-else
         v-for="holding in holdings" 
         :key="holding.id"
         class="holding-card" 
@@ -95,6 +133,9 @@ import { ref } from 'vue';
 import { onShow } from '@dcloudio/uni-app';
 import { api } from '../../utils/api';
 
+// 加载状态
+const loading = ref(true);
+
 // 资产数据
 const assetData = ref({
   totalValue: 0,
@@ -171,12 +212,14 @@ const goDetail = (holdingId) => {
 onShow(async () => {
   console.log('首页显示，刷新数据...');
   isFetching = true;
+  loading.value = true;
   
   await Promise.all([
     fetchAssetData(),
     fetchHoldingsData()
   ]);
   
+  loading.value = false;
   isFetching = false;
 });
 </script>
@@ -243,6 +286,103 @@ onShow(async () => {
 
 /* 跌 */
 
+/* ============================ */
+/* 骨架屏样式                    */
+/* ============================ */
+.skeleton-asset-card {
+  background-color: #064E3B;
+  border-radius: 40rpx;
+  padding: 40rpx 48rpx;
+  min-height: 320rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.skeleton-row {
+  display: flex;
+  align-items: center;
+}
+
+.skeleton-bottom {
+  justify-content: space-between;
+}
+
+.skeleton-text {
+  background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 37%, rgba(255,255,255,0.1) 50%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.8s ease infinite;
+  border-radius: 8rpx;
+}
+
+.skeleton-label {
+  width: 200rpx;
+  height: 28rpx;
+}
+
+.skeleton-big {
+  width: 400rpx;
+  height: 68rpx;
+  margin-top: 20rpx;
+}
+
+.skeleton-stat {
+  width: 180rpx;
+  height: 36rpx;
+}
+
+.skeleton-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 20rpx;
+  background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.8s ease infinite;
+}
+
+.skeleton-name {
+  width: 160rpx;
+  height: 30rpx;
+  margin-bottom: 8rpx;
+  background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.8s ease infinite;
+}
+
+.skeleton-tags {
+  width: 100rpx;
+  height: 22rpx;
+  background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.8s ease infinite;
+}
+
+.skeleton-status {
+  width: 100rpx;
+  height: 32rpx;
+  border-radius: 100rpx;
+  background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.8s ease infinite;
+}
+
+.skeleton-data {
+  width: 140rpx;
+  height: 32rpx;
+  background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.8s ease infinite;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0 50%
+  }
+}
+
 /* ============================ */
 /* Part 1: 资产卡片样式 (精修版) */
 /* ============================ */

uni.scss

@@ -75,6 +75,5 @@ $uni-font-size-subtitle:26px;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
 $uni-font-size-paragraph:15px;
 
-/* 引入uView样式 */
+/* 引入uview-plus样式 */
-@import "uview-ui/theme.scss";
+@import 'uview-plus/theme.scss';
-@import "uview-ui/index.scss";

vite.config.js

@@ -4,6 +4,6 @@ import uni from '@dcloudio/vite-plugin-uni'
 export default defineConfig({
   plugins: [uni()],
   optimizeDeps: {
-    include: ['uview-ui']
+    include: ['uview-plus']
   }
 })