ow

uniapp/youjiala/src/components/float-add-btn/float-add-btn.vue

@@ -8,6 +8,7 @@
  * 拖动收尾置 suppressClick 吞掉随后的原生 click，防拖完误触。
  */
 import { computed, onMounted, ref } from "vue";
+import { useThemeTokens } from "@/composables/useThemeGradient";
 
 const props = defineProps({
   /** 初始底部偏移（rpx 数值，仅首次无存储记录时生效），供不同页面避开各自的底部元素 */
@@ -72,6 +73,13 @@ const posStyle = computed(() => ({
   visibility: ready.value ? "visible" : "hidden",
 }));
 
+/** 按钮面色跟随主题（与文件夹图形同派生，主题统一）：渐变 + 同色柔光投影 */
+const { accentGradient, accentShadow } = useThemeTokens();
+const skinStyle = computed(() => ({
+  background: accentGradient.value,
+  boxShadow: `0 12rpx 32rpx ${accentShadow.value}`,
+}));
+
 function onDragStart(x: number, y: number): void {
   dragging = true;
   moved = false;
@@ -154,8 +162,8 @@ function onMouseDown(e: MouseEvent): void {
 </script>
 
 <template>
-  <view class="float-add-btn" :style="posStyle" @touchstart="onTouchStart" @touchmove.stop.prevent="onTouchMove"
-    @touchend="onTouchEnd" @mousedown="onMouseDown" @click="onTap">
+  <view class="float-add-btn" :style="[posStyle, skinStyle]" @touchstart="onTouchStart"
+    @touchmove.stop.prevent="onTouchMove" @touchend="onTouchEnd" @mousedown="onMouseDown" @click="onTap">
     <u-icon name="plus" size="52" color="#ffffff" />
   </view>
 </template>
@@ -172,8 +180,7 @@ function onMouseDown(e: MouseEvent): void {
   width: 112rpx;
   height: 112rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #6ec2ff 0%, #2b8fff 100%);
-  box-shadow: 0 12rpx 32rpx rgba(43, 143, 255, 0.4);
+  /* 面色与投影由 skinStyle 内联下发（主题派生），这里只留形态 */
   touch-action: none;
   /* 屏蔽浏览器默认滚动手势，touchmove 才不被吞 */
   user-select: none;