first commit

2026-04-24 10:20:50 +08:00
commit 49f4a1d6cc
96 changed files with 10456 additions and 0 deletions
--- a/components/LoginPopup/LoginPopup.vue
+++ b/components/LoginPopup/LoginPopup.vue
@@ -0,0 +1,516 @@
+<template>
+  <view>
+    <uni-popup ref="popupRef" type="bottom" :safe-area="false">
+      <view class="popup-container">
+        <view class="drag-handle"></view>
+        <view class="popup-header">
+          <text class="popup-title">授权登录</text>
+          <view class="close-btn" @tap="close">
+            <uni-icons type="closeempty" size="20" color="#999"></uni-icons>
+          </view>
+        </view>
+
+        <view class="avatar-section">
+          <button
+            open-type="chooseAvatar"
+            @chooseavatar="onChooseAvatar"
+            class="avatar-selector custom-button"
+          >
+            <view class="avatar-wrapper">
+              <image v-if="avatarUrl" :src="avatarUrl" class="avatar-preview" />
+              <image
+                v-else
+                src="/static/images/default-avatar.png"
+                class="avatar-preview"
+              />
+              <view class="camera-icon">
+                <uni-icons
+                  type="camera-filled"
+                  size="14"
+                  color="#fff"
+                ></uni-icons>
+              </view>
+            </view>
+            <text class="upload-tip">点击上传头像</text>
+          </button>
+        </view>
+
+        <view class="form-section">
+          <view v-if="isSinglePage" class="single-page-tip">
+            <uni-icons type="info" size="16" color="#ff4d4f"></uni-icons>
+            <text class="tip-text">当前处于预览模式，请前往小程序登录</text>
+          </view>
+          <view class="input-group">
+            <text class="label">昵称</text>
+            <input
+              class="nickname-input"
+              type="nickname"
+              v-model="nickname"
+              placeholder="请输入或点击获取昵称"
+              placeholder-class="placeholder"
+            />
+            <!-- <text class="get-nickname-btn">获取微信昵称</text> -->
+          </view>
+        </view>
+
+        <view class="action-section">
+          <button class="confirm-btn custom-button" @tap="confirmLogin">
+            {{ isSinglePage ? "前往小程序登录" : "一键登录" }}
+          </button>
+
+          <!-- <view class="agreement-row" @tap="toggleAgreement">
+            <view class="checkbox" :class="{ checked: isAgreed }">
+              <uni-icons
+                v-if="isAgreed"
+                type="checkmarkempty"
+                size="12"
+                color="#fff"
+              ></uni-icons>
+            </view>
+            <view class="agreement-text">
+              登录即代表您同意
+              <text class="link" @tap.stop="openAgreement('user')"
+                >《用户协议》</text
+              >
+              及
+              <text class="link" @tap.stop="openAgreement('privacy')"
+                >《隐私政策》</text
+              >
+            </view>
+          </view> -->
+        </view>
+      </view>
+    </uni-popup>
+
+    <!-- 隐私协议弹窗 -->
+    <PrivacyPopup ref="privacyRef" @agree="onPrivacyAgree" />
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { useUserStore } from "@/stores/user";
+import { getPlatformProvider, isSinglePageMode } from "@/utils/system";
+import { uploadImage } from "@/utils/common";
+import { apiLogin } from "@/api/auth.js";
+import { wxLogin, alipayLogin } from "@/utils/login.js";
+import PrivacyPopup from "@/components/PrivacyPopup/PrivacyPopup.vue";
+
+const popupRef = ref(null);
+const privacyRef = ref(null);
+const avatarUrl = ref("");
+const nickname = ref("");
+
+const userStore = useUserStore();
+
+const props = defineProps({
+  shareToken: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["logind"]);
+
+// 监听全局事件
+const handleGlobalShow = () => {
+  open();
+};
+
+onMounted(() => {
+  uni.$on("show-login-popup", handleGlobalShow);
+});
+
+onUnmounted(() => {
+  uni.$off("show-login-popup", handleGlobalShow);
+});
+
+// 是否处于单页模式（朋友圈打开）
+const isSinglePage = computed(() => isSinglePageMode());
+
+const festivalNames = [
+  "春意",
+  "福星",
+  "小福",
+  "新禧",
+  "瑞雪",
+  "花灯",
+  "喜乐",
+  "元宝",
+  "春芽",
+  "年年",
+  "花灯",
+  "月圆",
+  "灯影",
+  "小灯",
+  "星灯",
+  "彩灯",
+  "清风",
+  "微风",
+  "小晴",
+  "碧波",
+  "流泉",
+  "月光",
+  "玉轮",
+  "桂香",
+  "秋叶",
+  "星河",
+  "小月",
+  "露华",
+  "秋水",
+  "雪落",
+  "冰晶",
+  "暖阳",
+  "小雪",
+  "冬影",
+  "雪花",
+  "松影",
+];
+
+const getFestivalName = () => {
+  const idx = Math.floor(Math.random() * festivalNames.length);
+  return festivalNames[idx];
+};
+
+const open = async () => {
+  // #ifdef MP-ALIPAY
+  handleAlipayLogin();
+  return;
+  // #endif
+
+  // #ifdef MP-WEIXIN
+  const isAgreed = await privacyRef.value.check();
+  if (isAgreed) {
+    popupRef.value.open();
+  }
+  // #endif
+
+  // #ifndef MP-WEIXIN || MP-ALIPAY
+  popupRef.value.open();
+  // #endif
+};
+
+const handleAlipayLogin = async () => {
+  try {
+    uni.showLoading({ title: "登录中...", mask: true });
+    const code = await alipayLogin();
+    const imageUrl = avatarUrl.value ? await uploadImage(avatarUrl.value) : "";
+
+    const loginRes = await apiLogin({
+      code,
+      nickname: nickname.value || getFestivalName(),
+      avatarUrl: imageUrl,
+      platform: "alipay",
+      shareToken: props.shareToken,
+    });
+    // 保存用户信息到store
+    userStore.setUserInfo({
+      nickName: loginRes?.user?.nickname || nickname.value || getFestivalName(),
+      avatarUrl: loginRes?.user?.avatar || imageUrl,
+      id: loginRes?.user?.id,
+      isVip: loginRes?.isVip || false,
+      vipExpireAt: loginRes?.vipExpireAt || null,
+      points: loginRes?.points || 0,
+      exp: loginRes?.exp || 0,
+      level: loginRes?.level || 0,
+    });
+
+    userStore.setToken(loginRes.token);
+
+    uni.hideLoading();
+    uni.showToast({ title: "登录成功", icon: "success" });
+    emit("logind");
+    popupRef.value.close();
+
+    // 重置临时变量
+    avatarUrl.value = "";
+    nickname.value = "";
+  } catch (err) {
+    uni.hideLoading();
+    uni.showToast({ title: "登录失败", icon: "none" });
+    console.error(err);
+  }
+};
+
+const onPrivacyAgree = () => {
+  popupRef.value.open();
+};
+
+const close = () => {
+  popupRef.value.close();
+};
+
+const onChooseAvatar = (e) => {
+  avatarUrl.value = e.detail.avatarUrl;
+};
+
+const confirmLogin = async () => {
+  // if (!isAgreed.value) {
+  //   uni.showToast({ title: "请先同意用户协议和隐私政策", icon: "none" });
+  //   return;
+  // }
+
+  if (isSinglePage.value) {
+    uni.showModal({
+      title: "提示",
+      content: "请点击屏幕下方的“前往小程序”按钮，进入完整版体验登录功能",
+      showCancel: false,
+      confirmText: "我知道了",
+    });
+    return;
+  }
+
+  try {
+    const platform = getPlatformProvider();
+
+    if (platform === "mp-weixin") {
+      uni.showLoading({ title: "登录中...", mask: true });
+      const code = await wxLogin();
+      const imageUrl = avatarUrl.value
+        ? await uploadImage(avatarUrl.value)
+        : "";
+
+      const loginRes = await apiLogin({
+        code,
+        nickname: nickname.value || getFestivalName(),
+        avatarUrl: imageUrl,
+        platform: "wx",
+        shareToken: props.shareToken,
+      });
+      // 保存用户信息到store
+      userStore.setUserInfo({
+        nickName: loginRes?.user?.nickname || nickname.value,
+        avatarUrl: loginRes?.user?.avatar || imageUrl,
+        id: loginRes?.user?.id,
+        isVip: loginRes?.isVip || false,
+        vipExpireAt: loginRes?.vipExpireAt || null,
+        points: loginRes?.points || 0,
+        exp: loginRes?.exp || 0,
+        level: loginRes?.level || 0,
+      });
+
+      userStore.setToken(loginRes.token);
+      uni.hideLoading();
+      uni.showToast({ title: "登录成功", icon: "success" });
+      emit("logind");
+      popupRef.value.close();
+
+      // 重置临时变量
+      avatarUrl.value = "";
+      nickname.value = "";
+    } else if (platform === "mp-alipay") {
+      await handleAlipayLogin();
+    }
+  } catch (err) {
+    uni.showToast({ title: "登录失败", icon: "none" });
+    console.error(err);
+  }
+};
+defineExpose({ open, close });
+</script>
+
+<style lang="scss">
+.custom-button {
+  border: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  line-height: normal;
+  font-family: inherit;
+}
+
+.custom-button::after {
+  border: none;
+}
+.popup-container {
+  background-color: #fff;
+  padding: 20rpx 40rpx 60rpx;
+  border-top-left-radius: 48rpx;
+  border-top-right-radius: 48rpx;
+  position: relative;
+
+  .drag-handle {
+    width: 64rpx;
+    height: 8rpx;
+    background: #e5e5e5;
+    border-radius: 4rpx;
+    margin: 0 auto 30rpx;
+  }
+
+  .popup-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 60rpx;
+    position: relative;
+
+    .popup-title {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: #1a1a1a;
+    }
+
+    .close-btn {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      padding: 10rpx;
+    }
+  }
+
+  .avatar-section {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 80rpx;
+
+    .avatar-selector {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .avatar-wrapper {
+      width: 200rpx;
+      height: 200rpx;
+      background: #f5f5f5;
+      border-radius: 50%;
+      position: relative;
+      margin-bottom: 20rpx;
+      border: 4rpx solid #fff;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+      .avatar-preview {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+      }
+
+      .camera-icon {
+        position: absolute;
+        right: 10rpx;
+        bottom: 10rpx;
+        width: 48rpx;
+        height: 48rpx;
+        background: #ff4d4f;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 4rpx solid #fff;
+      }
+    }
+
+    .upload-tip {
+      font-size: 26rpx;
+      color: #999;
+    }
+  }
+
+  .form-section {
+    margin-bottom: 80rpx;
+
+    .single-page-tip {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #fff1f0;
+      border: 1rpx solid #ffccc7;
+      border-radius: 12rpx;
+      padding: 16rpx;
+      margin-bottom: 30rpx;
+
+      .tip-text {
+        font-size: 24rpx;
+        color: #ff4d4f;
+        margin-left: 8rpx;
+      }
+    }
+
+    .input-group {
+      display: flex;
+      align-items: center;
+      padding: 30rpx 0;
+      border-bottom: 1rpx solid #f0f0f0;
+
+      .label {
+        font-size: 30rpx;
+        color: #1a1a1a;
+        font-weight: 500;
+        width: 100rpx;
+      }
+
+      .nickname-input {
+        flex: 1;
+        font-size: 30rpx;
+        color: #1a1a1a;
+        margin-left: 20rpx;
+      }
+
+      .placeholder {
+        color: #ccc;
+      }
+
+      .get-nickname-btn {
+        font-size: 26rpx;
+        color: #576b95;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .action-section {
+    .confirm-btn {
+      background: #ff4d4f;
+      color: #fff;
+      font-size: 34rpx;
+      font-weight: 600;
+      height: 100rpx;
+      border-radius: 50rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 40rpx;
+      box-shadow: 0 12rpx 24rpx rgba(255, 77, 79, 0.3);
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    .agreement-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-bottom: 20rpx;
+
+      .checkbox {
+        width: 32rpx;
+        height: 32rpx;
+        border: 2rpx solid #ccc;
+        border-radius: 50%;
+        margin-right: 16rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+
+        &.checked {
+          background: #ff4d4f;
+          border-color: #ff4d4f;
+        }
+      }
+
+      .agreement-text {
+        font-size: 24rpx;
+        color: #999;
+
+        .link {
+          color: #576b95;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/components/NavBar/NavBar.vue
+++ b/components/NavBar/NavBar.vue
@@ -0,0 +1,123 @@
+<template>
+  <view>
+    <!-- Placeholder to occupy space if fixed -->
+    <view
+      v-if="fixed && placeholder && !transparent"
+      class="nav-placeholder"
+      :style="{ height: navBarHeight + 'px' }"
+    ></view>
+
+    <!-- Actual Navbar -->
+    <view
+      class="nav-bar"
+      :class="{ fixed: fixed }"
+      :style="{
+        height: navBarHeight + 'px',
+        paddingTop: statusBarHeight + 'px',
+        backgroundColor: transparent ? 'transparent' : background,
+        color: color,
+        boxSizing: 'border-box',
+      }"
+    >
+      <view class="nav-content">
+        <view v-if="back" class="back" @tap="goBack" :style="{ color: color }"
+          >‹</view
+        >
+        <text class="nav-title" :style="{ color: color }">{{ title }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { getTitleBarHeight } from "@/utils/system";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  background: {
+    type: String,
+    default: "#ffffff",
+  },
+  color: {
+    type: String,
+    default: "#333333",
+  },
+  back: {
+    type: Boolean,
+    default: true,
+  },
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: Boolean,
+    default: true,
+  },
+  transparent: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const navBarHeight = ref(64);
+const statusBarHeight = ref(20);
+
+onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 20;
+  navBarHeight.value = statusBarHeight.value + getTitleBarHeight();
+});
+
+const goBack = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    uni.navigateBack();
+  } else {
+    uni.switchTab({ url: "/pages/index/index" });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.nav-bar {
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 999;
+
+  &.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+.nav-content {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 24rpx;
+  position: relative;
+}
+
+.back {
+  font-size: 50rpx;
+  margin-right: 24rpx;
+  line-height: 1;
+  padding: 20rpx;
+  margin-left: -20rpx;
+}
+
+.nav-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  flex: 1;
+  text-align: center;
+  margin-right: 50rpx; /* Balance back button */
+}
+</style>
--- a/components/PrivacyPopup/PrivacyPopup.vue
+++ b/components/PrivacyPopup/PrivacyPopup.vue
@@ -0,0 +1,208 @@
+<template>
+  <view v-if="show" class="privacy-popup">
+    <view class="mask"></view>
+    <view class="content">
+      <view class="title">用户隐私保护指引</view>
+      <view class="desc">
+        感谢您使用本小程序。在使用前，请您仔细阅读
+        <text class="link" @click="openPrivacyContract">{{
+          privacyContractName
+        }}</text>
+        。当您点击“同意”并开始使用产品服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入小程序。
+      </view>
+      <view class="btns">
+        <button class="btn refuse" @click="handleDisagree">拒绝</button>
+        <button
+          id="agree-btn"
+          class="btn agree"
+          open-type="agreePrivacyAuthorization"
+          @agreeprivacyauthorization="handleAgree"
+        >
+          同意
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { reportPrivacy } from "@/api/auth.js";
+
+const show = ref(false);
+const privacyContractName = ref("《用户隐私保护指引》");
+
+const emit = defineEmits(["agree"]);
+let resolveCheck = null;
+
+const check = () => {
+  // #ifdef MP-WEIXIN
+  return new Promise((resolve) => {
+    if (uni.getPrivacySetting) {
+      uni.getPrivacySetting({
+        success: (res) => {
+          if (res.needAuthorization) {
+            privacyContractName.value =
+              res.privacyContractName || "《用户隐私保护指引》";
+            show.value = true;
+            resolveCheck = resolve;
+          } else {
+            resolve(true);
+          }
+        },
+        fail: (err) => {
+          console.error("getPrivacySetting fail:", err);
+          resolve(true);
+        },
+      });
+    } else {
+      resolve(true);
+    }
+  });
+  // #endif
+  // #ifdef MP-ALIPAY
+  return Promise.resolve(true);
+  // #endif
+};
+
+// Only for WeChat Mini Program
+// #ifdef MP-WEIXIN
+// onMounted(() => {
+//   check();
+// });
+// #endif
+
+const openPrivacyContract = () => {
+  uni.openPrivacyContract({
+    success: () => {},
+    fail: (err) => {
+      console.error("openPrivacyContract fail", err);
+    },
+  });
+};
+
+const handleAgree = async (e) => {
+  if (!show.value) return; // Prevent double execution
+  console.log("handleAgree triggered", e);
+  // 1. Save to local storage
+  uni.setStorageSync("hasAgreedPrivacy", true);
+
+  // 2. Hide popup
+  show.value = false;
+
+  emit("agree");
+
+  // 3. Resolve the check promise
+  if (resolveCheck) {
+    resolveCheck(true);
+    resolveCheck = null;
+  }
+
+  // 4. Call server API
+  try {
+    await reportPrivacy();
+  } catch (e) {
+    console.error("Report privacy failed", e);
+  }
+};
+
+const handleDisagree = () => {
+  // Exit mini program
+  // #ifdef MP-WEIXIN
+  uni.exitMiniProgram({
+    success: () => {
+      console.log("Exit success");
+    },
+  });
+  // #endif
+};
+
+defineExpose({
+  check,
+});
+</script>
+
+<style lang="scss" scoped>
+.privacy-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+  }
+
+  .content {
+    position: relative;
+    width: 600rpx;
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 48rpx 40rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 32rpx;
+  }
+
+  .desc {
+    font-size: 28rpx;
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 48rpx;
+    text-align: justify;
+
+    .link {
+      color: #576b95;
+      display: inline;
+    }
+  }
+
+  .btns {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    .btn {
+      width: 240rpx;
+      height: 88rpx;
+      line-height: 88rpx;
+      text-align: center;
+      border-radius: 12rpx;
+      font-size: 32rpx;
+      font-weight: 500;
+      margin: 0;
+
+      &::after {
+        border: none;
+      }
+
+      &.refuse {
+        background: #f2f2f2;
+        color: #666;
+      }
+
+      &.agree {
+        background: #07c160;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
--- a/components/RewardAd/RewardAd.vue
+++ b/components/RewardAd/RewardAd.vue
@@ -0,0 +1,49 @@
+<template>
+  <view></view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { watchAdStart } from "@/api/system.js";
+import adManager from "@/utils/adManager.js";
+
+const props = defineProps({
+  adUnitId: {
+    type: String,
+    default: "adunit-d7a28e0357d98947",
+  },
+});
+
+const emit = defineEmits(["onReward", "onError", "onClose"]);
+
+const show = async () => {
+  try {
+    // Step 1: Start Ad Session to get Token
+    const res = await watchAdStart();
+    if (res && res.rewardToken) {
+      const rewardToken = res.rewardToken;
+      
+      // Step 2: Show Ad through global AdManager
+      const success = await adManager.showVideoAd(props.adUnitId, rewardToken);
+      
+      if (success) {
+        // 延迟 300ms 触发回调，避免和微信小程序的 onShow 页面恢复动画抢占底层渲染线程，导致 insertTextView:fail
+        setTimeout(() => {
+          emit("onReward", rewardToken);
+        }, 300);
+      } else {
+        emit("onClose");
+      }
+    } else {
+      uni.showToast({ title: "广告启动失败，请稍后再试", icon: "none" });
+      emit("onError", new Error("watchAdStart failed"));
+    }
+  } catch (e) {
+    console.error("RewardAd: show failed", e);
+    uni.showToast({ title: "广告启动失败，请稍后再试", icon: "none" });
+    emit("onError", e);
+  }
+};
+
+defineExpose({ show });
+</script>
--- a/components/custom-content/custom-content.vue
+++ b/components/custom-content/custom-content.vue
@@ -0,0 +1,69 @@
+<template>
+	<view class="contentItem" :style="{background: bgColor, height: height, paddingTop: paddingTopValue }">
+		<view class="topRow" :style="{ '--component-color': textColor }">
+			<view class="title">{{title}}</view>
+			<view class="enTitle">{{enTitle}}</view>
+		</view>
+		
+		<view class="content">
+			<slot name="content"></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+defineProps({
+	title: { type: String, default: ""},
+	enTitle: { type: String, default: "" },
+	bgColor: { type: String, default: "#262626" },
+	height: { type: String, default: "320rpx" },
+	textColor: { type: String, default: "#B2B2B2" },
+	paddingTopValue: { type: String, default: "0rpx" },
+})
+</script>
+
+<style lang="scss" scoped>
+	.contentItem {
+		width: 750rpx;
+
+		.topRow {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding: 50rpx 0;
+			color: var(--component-color);
+
+			.title {
+				font-size: 20rpx;
+			}
+
+			.enTitle {
+				width: 200rpx;
+				font-size: 15rpx;
+				text-align: center;
+				margin-top: 10rpx;
+				position: relative;
+				&::before,
+				&::after {
+					content: '';
+					position: absolute;
+					top: 50%;
+					width: calc(50% - 60rpx); // 减去左右 padding 的宽度
+					height: 1rpx;
+					background-color: var(--component-color);
+					transform: translateY(-90%);
+				}
+				
+				&::before {
+					left: 0;
+				}
+				
+				&::after {
+					right: 0;
+				}
+			}
+		}
+	}
+</style>
--- a/components/layout/layout.vue
+++ b/components/layout/layout.vue
@@ -0,0 +1,70 @@
+<template>
+	<view class="layout">
+		<custom-nav-bar></custom-nav-bar>
+		<view class="header">
+			<slot name="header"></slot>
+		</view>
+		<view class="main">
+			<slot name="main"></slot>
+		</view>
+		<view class="footer">
+			<footer-loayot></footer-loayot>
+		</view>
+		<view class="float">
+			<!-- #ifdef MP -->
+			<button class="item" open-type="contact">
+				<uni-icons type="phone-filled" size="26" color="#888"></uni-icons>
+			</button>
+			<!-- #endif -->
+			<!-- #ifndef MP -->
+			<button class="item" @click="clickContact">
+				<uni-icons type="phone-filled" size="26" color="#888"></uni-icons>
+			</button>
+			<!-- #endif -->
+			<!-- 			<view  @click="onRefresh">
+				
+				
+			</view> -->
+		</view>
+	</view>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.layout{
+	width: 100vw;
+	background-color: #222;
+	.header{
+		min-height: 100rpx;
+	}
+	.main{
+		min-height: 200rpx;		
+	}
+	.footer{
+		min-height: 120rpx;
+		background: orange;
+	}
+	.float {
+		position: fixed;
+		right: 30rpx;
+		bottom: 80rpx;
+		padding-bottom: env(safe-area-inset-bottom);
+	
+		.item {
+			width: 90rpx;
+			height: 90rpx;
+			background: rgba(255, 255, 255, 0.9);
+			border-radius: 50%;
+			margin-bottom: 20rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border: 1px solid #eee;
+		}
+	
+	}
+}
+</style>