Merge branch 'feat/vite-build'

TUICallKit-Vue3/.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 .DS_Store
 dist
+unpackage/dist
 *.local
 
 # Editor directories and files

TUICallKit-Vue3/README.md

@@ -1,6 +1,30 @@
 ## 简介
 本 demo 演示了如何在 uni-app 项目中集成 [TUICallKit](https://www.npmjs.com/package/@trtc/calls-uikit-wx-uniapp) 音视频通话组件。
 
+## 两种开发方式
+
+本工程同时支持 **HBuilderX** 和 **命令行 (vite)** 两套编译链路，二选一即可。
+
+### 方式 A：命令行 (vite)
+
+```bash
+npm install                  # 安装依赖
+npm run dev:mp-weixin        # watch 模式，产物 dist/dev/mp-weixin
+npm run build:mp-weixin      # 生产构建，产物 dist/build/mp-weixin
+```
+
+构建完成后用微信开发者工具打开对应 `dist/.../mp-weixin` 目录即可。
+
+支持平台：`mp-weixin` / `h5` / `app`（脚本里有 dev/build 两组）。
+
+### 方式 B：HBuilderX
+
+HBuilderX 3.4+ 会自动识别 `vite.config.ts` 并切换到 vite 编译模式。
+
+1. 用 HBuilderX 打开工程根目录
+2. 菜单「运行」→「运行到小程序模拟器」→「微信开发者工具」
+3. 产物会输出到 `unpackage/dist/dev/mp-weixin`
+
 
 ## 环境准备
 

TUICallKit-Vue3/package.json

@@ -1,17 +1,55 @@
 {
   "name": "tuicallkit-vue3",
   "version": "1.0.0",
-  "description": "",
+  "description": "TUICallKit Vue3 uni-app 工程（兼容 HBuilderX & vite CLI）",
   "main": "main.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev:mp-weixin": "UNI_INPUT_DIR=\"$PWD\" uni -p mp-weixin",
+    "dev:h5": "UNI_INPUT_DIR=\"$PWD\" uni",
+    "dev:app": "UNI_INPUT_DIR=\"$PWD\" uni -p app",
+    "build:mp-weixin": "UNI_INPUT_DIR=\"$PWD\" uni build -p mp-weixin",
+    "build:h5": "UNI_INPUT_DIR=\"$PWD\" uni build",
+    "build:app": "UNI_INPUT_DIR=\"$PWD\" uni build -p app"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@dcloudio/uni-app": "3.0.0-4060620250520001",
+    "@dcloudio/uni-app-harmony": "3.0.0-4060620250520001",
+    "@dcloudio/uni-app-plus": "3.0.0-4060620250520001",
+    "@dcloudio/uni-components": "3.0.0-4060620250520001",
+    "@dcloudio/uni-h5": "3.0.0-4060620250520001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-4060620250520001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-4060620250520001",
+    "@dcloudio/uni-mp-jd": "3.0.0-4060620250520001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-4060620250520001",
+    "@dcloudio/uni-mp-lark": "3.0.0-4060620250520001",
+    "@dcloudio/uni-mp-qq": "3.0.0-4060620250520001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-4060620250520001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-4060620250520001",
+    "@dcloudio/uni-mp-xhs": "3.0.0-4060620250520001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-4060620250520001",
     "@trtc/calls-uikit-wx-uniapp": "^4.1.0",
     "@uni-ku/bundle-optimizer": "^1.3.16",
-    "tuikit-atomicx-uniapp-wx-standard": "^1.1.9"
+    "tuikit-atomicx-uniapp-wx-standard": "^1.1.9",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.1.9"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.8",
+    "@dcloudio/uni-automator": "3.0.0-4060620250520001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4060620250520001",
+    "@dcloudio/uni-stacktracey": "3.0.0-4060620250520001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4060620250520001",
+    "@types/node": "^20.11.0",
+    "@vue/runtime-core": "^3.4.21",
+    "less": "^4.6.4",
+    "sass": "^1.77.8",
+    "typescript": "^5.4.0",
+    "vite": "^5.2.8"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue

@@ -23,7 +23,7 @@
                 <view class="hint-icon">
                     <view class="play-triangle" />
                 </view>
-                <text class="hint-text">点击开始</text>
+                <text class="hint-text">{{ hintText || '点击开始' }}</text>
             </view>
 
             <!-- BPM 显示 (播放时显示) -->
@@ -42,9 +42,12 @@ import CrushCanvas from './crush-canvas.vue'
 interface Props {
     bpm: number
     isPlaying: boolean
+    hintText?: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+    hintText: '点击开始',
+})
 
 const emit = defineEmits<{
     togglePlay: []
@@ -78,25 +81,24 @@ defineExpose({
     justify-content: center;
     position: relative;
     overflow: hidden;
-    /* 与页面背景一致,无可见边界 */
+    background: linear-gradient(180deg, #f0fdfa 0%, #f8fafc 55%, #f1f5f9 100%);
-    background: #f8fafc;
 }
 
-/* 环境氛围 - 中心大放射光晕,营造空间感 */
+/* 环境氛围 - 中心放射光晕 */
 .ambient-glow {
     position: absolute;
-    width: 1400rpx;
+    width: 1200rpx;
-    height: 1400rpx;
+    height: 1200rpx;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     background:
         radial-gradient(circle,
-            rgba(255, 255, 255, 1) 0%,
+            rgba(204, 251, 241, 0.9) 0%,
-            rgba(241, 245, 249, 0.6) 25%,
+            rgba(240, 253, 250, 0.5) 30%,
-            rgba(226, 232, 240, 0.3) 50%,
+            rgba(241, 245, 249, 0.2) 55%,
-            transparent 75%);
+            transparent 72%);
     pointer-events: none;
 }
 
@@ -105,8 +107,8 @@ defineExpose({
  * ============================================================ */
 .ring-container {
     position: relative;
-    width: 640rpx;
+    width: 560rpx;
-    height: 640rpx;
+    height: 560rpx;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -117,13 +119,13 @@ defineExpose({
 /* 外发光 - 只在播放时显示(节省 GPU) */
 .ring-aura {
     position: absolute;
-    width: 700rpx;
+    width: 620rpx;
-    height: 700rpx;
+    height: 620rpx;
     border-radius: 50%;
     background: radial-gradient(circle,
-        rgba(244, 114, 182, 0.45) 0%,
+        rgba(20, 184, 166, 0.4) 0%,
-        rgba(244, 114, 182, 0.15) 35%,
+        rgba(45, 212, 191, 0.15) 35%,
-        rgba(244, 114, 182, 0) 70%);
+        rgba(20, 184, 166, 0) 70%);
     opacity: 0;
     transition: opacity 0.3s ease;
     will-change: transform, opacity;
@@ -150,8 +152,8 @@ defineExpose({
  * ============================================================ */
 .grip-ring {
     position: relative;
-    width: 520rpx;
+    width: 460rpx;
-    height: 520rpx;
+    height: 460rpx;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -163,28 +165,28 @@ defineExpose({
     transform: scale(0.96);
 }
 
-/* 外圈 - 粉色渐变(精致质感) */
+/* 外圈 - 青绿渐变(与页面品牌色一致) */
 .ring-outer-circle {
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: linear-gradient(135deg,
-        #fda4af 0%,
+        #5eead4 0%,
-        #f472b6 50%,
+        #2dd4bf 45%,
-        #ec4899 100%);
+        #14b8a6 100%);
     box-shadow:
-        0 24rpx 64rpx rgba(236, 72, 153, 0.4),
+        0 20rpx 56rpx rgba(20, 184, 166, 0.35),
-        0 12rpx 32rpx rgba(244, 114, 182, 0.3),
+        0 10rpx 28rpx rgba(45, 212, 191, 0.25),
-        inset 0 -20rpx 40rpx rgba(190, 24, 93, 0.35),
+        inset 0 -18rpx 36rpx rgba(15, 118, 110, 0.3),
-        inset 0 20rpx 40rpx rgba(255, 255, 255, 0.5);
+        inset 0 18rpx 36rpx rgba(255, 255, 255, 0.45);
 }
 
 /* 顶部高光 - 模拟材质感 */
 .ring-highlight {
     position: absolute;
-    width: 420rpx;
+    width: 360rpx;
-    height: 120rpx;
+    height: 100rpx;
     top: 40rpx;
     border-radius: 50%;
     background: radial-gradient(ellipse,
@@ -196,13 +198,13 @@ defineExpose({
 /* 内圈中空 */
 .ring-inner-circle {
     position: absolute;
-    width: 280rpx;
+    width: 250rpx;
-    height: 280rpx;
+    height: 250rpx;
     border-radius: 50%;
-    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
     box-shadow:
-        inset 0 8rpx 20rpx rgba(190, 24, 93, 0.3),
+        inset 0 8rpx 20rpx rgba(15, 118, 110, 0.25),
-        inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.8);
+        inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.85);
 }
 
 /* 播放时的挤压动画(只影响 transform,GPU 加速) */
@@ -245,15 +247,15 @@ defineExpose({
 }
 
 .hint-icon {
-    width: 108rpx;
+    width: 96rpx;
-    height: 108rpx;
+    height: 96rpx;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.98);
     border-radius: 50%;
     box-shadow:
-        0 12rpx 32rpx rgba(236, 72, 153, 0.35),
+        0 12rpx 32rpx rgba(20, 184, 166, 0.28),
         inset 0 2rpx 4rpx rgba(255, 255, 255, 0.9);
     animation: hint-bounce 2s ease-in-out infinite;
     will-change: transform;
@@ -262,10 +264,10 @@ defineExpose({
 .play-triangle {
     width: 0;
     height: 0;
-    border-left: 36rpx solid #ec4899;
+    border-left: 32rpx solid #0f766e;
-    border-top: 24rpx solid transparent;
+    border-top: 22rpx solid transparent;
-    border-bottom: 24rpx solid transparent;
+    border-bottom: 22rpx solid transparent;
-    margin-left: 10rpx;
+    margin-left: 8rpx;
 }
 
 @keyframes hint-bounce {
@@ -278,10 +280,10 @@ defineExpose({
 }
 
 .hint-text {
-    font-size: 28rpx;
+    font-size: 26rpx;
-    color: #be185d;
+    color: #0f766e;
     font-weight: 700;
-    letter-spacing: 4rpx;
+    letter-spacing: 3rpx;
     text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.9);
 }
 
@@ -299,8 +301,8 @@ defineExpose({
 }
 
 .bpm-value {
-    font-size: 88rpx;
+    font-size: 80rpx;
-    color: #be185d;
+    color: #0f766e;
     font-weight: 900;
     line-height: 1;
     letter-spacing: -2rpx;
@@ -310,7 +312,7 @@ defineExpose({
 
 .bpm-label {
     font-size: 22rpx;
-    color: #ec4899;
+    color: #14b8a6;
     font-weight: 700;
     letter-spacing: 6rpx;
     margin-top: 2rpx;

TUICallKit-Vue3/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import uni from '@dcloudio/vite-plugin-uni'
+
+// uni-app 工程根目录就是源码目录（HBuilderX 兼容）
+// 编译产物默认输出到 ./dist/<mode>/<platform>
+export default defineConfig({
+    plugins: [uni()],
+    css: {
+        preprocessorOptions: {
+            scss: {
+                // 屏蔽 TUICallKit SDK 内部 @import / legacy-js-api 弃用警告
+                // 待 TUICallKit 升级 @use 语法后可移除
+                silenceDeprecations: ['legacy-js-api', 'import'],
+            },
+        },
+    },
+})