fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT => 本次更新项目为：

Browse Source 
存了
This commit is contained in:
超级老白兔
2025-08-02 20:41:02 +08:00
parent 65f80c55b0
commit 05783db2b1
11 changed files with 101 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ckApp/manifest.json
View File

@@ -41,7 +41,9 @@
]
},
/* ios打包配置 */
"ios" : {},
"ios" : {
"dSYMs" : false
},
/* SDK配置 */
"sdkConfigs" : {}
}

2
ckApp/pages.json
View File

@@ -1,5 +1,5 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
"pages": [
{
"path": "pages/index/index",
"style": {

204
ckApp/pages/index/index.vue
View File

@@ -1,40 +1,10 @@
<template>
<view class="content">
<!-- iframe 容器 -->
<view class="iframe-container">
<web-view
ref="webviewRef"
:src="iframeUrl"
@message="handleMessage"
:fullscreen="false"
:webview-styles="{
width:'100%',
height:'406px'
}"
:fullscreen="true"
></web-view>
</view>
<!-- 消息控制区域 -->
<view class="message-controls">
<text class="control-title">消息控制：</text>
<view class="control-buttons">
<button @click="sendMessageToIframe" class="btn-send">发送消息到iframe</button>
</view>
</view>
<!-- 消息显示区域 -->
<view class="message-area">
<text class="message-title">接收到的消息：</text>
<view class="message-list">
<view v-for="(msg, index) in receivedMessages" :key="index" class="message-item">
<text class="message-text">{{msg}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
@@ -128,175 +98,3 @@
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f8f9fa;
}
.iframe-container {
overflow: hidden;
background: white;
position: relative;
margin: 20rpx;
border-radius: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
height: 800rpx;
:deep(web-view) {
width: 100% !important;
height: 100% !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
:deep(iframe) {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
}
.message-controls {
padding: 20rpx;
background: #f0f0f0;
border-bottom: 2rpx solid #e0e0e0;
display: flex;
flex-direction: column;
gap: 16rpx;
}
.control-title {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 16rpx;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #d0d0d0;
}
.control-buttons {
display: flex;
gap: 16rpx;
}
.btn-send {
flex: 1;
background: linear-gradient(135deg, #188eee 0%, #096dd9 100%);
color: white;
border: none;
border-radius: 20rpx;
padding: 20rpx 16rpx;
font-size: 26rpx;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4rpx 12rpx rgba(24, 142, 238, 0.3);
&:active {
transform: translateY(2rpx);
box-shadow: 0 2rpx 8rpx rgba(24, 142, 238, 0.4);
}
&:hover {
background: linear-gradient(135deg, #096dd9 0%, #0050b3 100%);
}
}
.message-area {
flex: 1;
padding: 20rpx;
background: white;
overflow: hidden;
display: flex;
flex-direction: column;
}
.message-title {
font-size: 28rpx;
color: #333;
margin-bottom: 20rpx;
display: block;
font-weight: 600;
border-bottom: 2rpx solid #f0f0f0;
padding-bottom: 16rpx;
}
.message-list {
flex: 1;
overflow-y: auto;
border: 2rpx solid #f0f0f0;
border-radius: 16rpx;
padding: 16rpx;
background: #fafafa;
&::-webkit-scrollbar {
width: 8rpx;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4rpx;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4rpx;
&:hover {
background: #a8a8a8;
}
}
}
.message-item {
background: white;
padding: 20rpx;
margin-bottom: 16rpx;
border-radius: 12rpx;
border-left: 6rpx solid #188eee;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
&:last-child {
margin-bottom: 0;
}
&:hover {
transform: translateX(4rpx);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
}
}
.message-text {
font-size: 24rpx;
color: #333;
word-break: break-all;
line-height: 1.5;
font-family: "Courier New", monospace;
}
@media (max-width: 768rpx) {
.content {
padding: 0;
}
.iframe-container {
margin: 16rpx;
border-radius: 16rpx;
}
.message-area {
padding: 16rpx;
}
.message-item {
padding: 16rpx;
margin-bottom: 12rpx;
}
}
</style>

2
ckApp/utils/common.js
View File

@@ -22,7 +22,7 @@ export function getTopSafeAreaHeightAsync() {
return;
}
resolve(res.statusBarHeight || 0);
resolve(`${res.statusBarHeight*2 || 0}px`);
} catch (error) {
reject(error);

0
ckApp/utils/config.js
View File

16
nkebao/src/components/NavCommon/index.tsx
View File

@@ -1,8 +1,8 @@
import React from "react";
import React, { useEffect, useState } from "react";
import { NavBar } from "antd-mobile";
import { ArrowLeftOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { getSafeAreaHeight } from "@/utils/common";
interface NavCommonProps {
title: string;
backFn?: () => void;
@@ -17,8 +17,18 @@ const NavCommon: React.FC<NavCommonProps> = ({
left,
}) => {
const navigate = useNavigate();
const [paddingTop, setPaddingTop] = useState("0px");
useEffect(() => {
setPaddingTop(getSafeAreaHeight() + "px");
}, []);
return (
<div style={{ paddingTop: "44px", background: "#fff" }}>
<div
style={{
paddingTop: paddingTop,
background: "#fff",
}}
>
<NavBar
back={null}
left={

34
nkebao/src/pages/iframe/index.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import style from "./index.module.scss";
import Layout from "@/components/Layout/Layout";
import NavCommon from "@/components/NavCommon";
import { LoadingOutlined, CheckCircleOutlined } from "@ant-design/icons";
import { Input } from "antd";
// 声明全局的 uni 对象
declare global {
@@ -15,10 +16,17 @@ interface Message {
data: any;
}
const TYPE_EMUE = {
CONNECT: 0,
DATA: 1,
FUNCTION: 2,
CONFIG: 3,
};
const IframeDebugPage: React.FC = () => {
const [receivedMessages, setReceivedMessages] = useState<string[]>([]);
const [messageId, setMessageId] = useState(0);
const [inputMessage, setInputMessage] = useState("");
const [connectStatus, setConnectStatus] = useState(false);
// 解析 URL 参数中的消息
const parseUrlMessage = () => {
@@ -63,6 +71,10 @@ const IframeDebugPage: React.FC = () => {
const handleReceivedMessage = (message: Message) => {
const messageText = `[${new Date().toLocaleTimeString()}] 收到: ${JSON.stringify(message)}`;
setReceivedMessages(prev => [...prev, messageText]);
console.log("message.type", message.type);
if ([TYPE_EMUE.CONNECT].includes(message.type)) {
setConnectStatus(true);
}
};
// 向 App 发送消息
@@ -94,7 +106,7 @@ const IframeDebugPage: React.FC = () => {
setMessageId(newMessageId);
const message: Message = {
type: 0, // 数据交互
type: TYPE_EMUE.DATA, // 数据交互
data: {
id: newMessageId,
content: inputMessage,
@@ -113,7 +125,7 @@ const IframeDebugPage: React.FC = () => {
setMessageId(newMessageId);
const message: Message = {
type: 0, // 数据交互
type: TYPE_EMUE.DATA, // 数据交互
data: {
id: newMessageId,
action: "ping",
@@ -148,7 +160,23 @@ const IframeDebugPage: React.FC = () => {
};
return (
<Layout header={<NavCommon title="iframe调试" />}>
<Layout
header={
<NavCommon
title="iframe调试"
right={
connectStatus ? (
<CheckCircleOutlined style={{ color: "green" }} />
) : (
<span>
<span style={{ marginRight: 4, fontSize: 12 }}>连接中...</span>
<LoadingOutlined />
</span>
)
}
/>
}
>
<div className={style["iframe-debug-page"]}>
<div className={style.content}>
<div className={style["message-panel"]}>

29
nkebao/src/pages/iframe/init.tsx
View File

@@ -2,8 +2,9 @@ import React, { useState, useEffect } from "react";
import style from "./index.module.scss";
import Layout from "@/components/Layout/Layout";
import NavCommon from "@/components/NavCommon";
import { LoadingOutlined, CheckCircleOutlined } from "@ant-design/icons";
import { Input } from "antd";
import { useNavigate } from "react-router-dom";
// 声明全局的 uni 对象
declare global {
interface Window {
@@ -26,8 +27,7 @@ const IframeDebugPage: React.FC = () => {
const [receivedMessages, setReceivedMessages] = useState<string[]>([]);
const [messageId, setMessageId] = useState(0);
const [inputMessage, setInputMessage] = useState("");
const [connectStatus, setConnectStatus] = useState(false);
const navigate = useNavigate();
// 解析 URL 参数中的消息
const parseUrlMessage = () => {
const search = window.location.search.substring(1);
@@ -72,8 +72,9 @@ const IframeDebugPage: React.FC = () => {
const messageText = `[${new Date().toLocaleTimeString()}] 收到: ${JSON.stringify(message)}`;
setReceivedMessages(prev => [...prev, messageText]);
console.log("message.type", message.type);
if ([TYPE_EMUE.CONNECT].includes(message.type)) {
setConnectStatus(true);
if ([TYPE_EMUE.CONFIG].includes(message.type)) {
localStorage.setItem("paddingTop", message.data.paddingTop);
navigate("/");
}
};
@@ -160,23 +161,7 @@ const IframeDebugPage: React.FC = () => {
};
return (
<Layout
header={
<NavCommon
title="iframe调试"
right={
connectStatus ? (
<CheckCircleOutlined style={{ color: "green" }} />
) : (
<span>
<span style={{ marginRight: 4, fontSize: 12 }}>连接中...</span>
<LoadingOutlined />
</span>
)
}
/>
}
>
<Layout header={<NavCommon title="iframe调试" />}>
<div className={style["iframe-debug-page"]}>
<div className={style.content}>
<div className={style["message-panel"]}>

4
nkebao/src/pages/login/login.module.scss
View File

@@ -116,10 +116,6 @@
margin: 0;
}
.form-container {
margin-bottom: 20px;
}
// 标签页样式
.tab-container {
display: flex;

6
nkebao/src/pages/login/login.tsx
View File

@@ -9,6 +9,8 @@ import {
import { useUserStore } from "@/store/module/user";
import { loginWithPassword, loginWithCode, sendVerificationCode } from "./api";
import style from "./login.module.scss";
import Layout from "@/components/Layout/Layout";
import NavCommon from "@/components/NavCommon";
const Login: React.FC = () => {
const [form] = Form.useForm();
@@ -137,9 +139,11 @@ const Login: React.FC = () => {
const handleAppleLogin = () => {
Toast.show({ content: "Apple登录功能开发中", position: "top" });
};
const paddingTop = localStorage.getItem("paddingTop") || "44px";
return (
<div className={style["login-page"]}>
<div style={{ height: paddingTop }}></div>
<div style={{ height: "80px" }}></div>
{/* 背景装饰 */}
<div className={style["bg-decoration"]}>
<div className={style["bg-circle"]}></div>

33
nkebao/src/utils/common.ts
View File

@@ -35,3 +35,36 @@ export const comfirm = (
});
});
};
export function getSafeAreaHeight() {
// 1. 优先使用 CSS 环境变量
if (CSS.supports("padding-top", "env(safe-area-inset-top)")) {
const safeAreaTop = getComputedStyle(
document.documentElement,
).getPropertyValue("env(safe-area-inset-top)");
const height = parseInt(safeAreaTop) || 0;
if (height > 0) return height;
}
// 2. 设备检测
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
const isAndroid = /Android/.test(navigator.userAgent);
if (isIOS) {
// iOS 设备
const isIPhoneX = window.screen.height >= 812;
return isIPhoneX ? 44 : 20;
} else if (isAndroid) {
// Android 设备
return 24;
}
// 3. 默认值
return 0;
}
// 设置全局 CSS 变量
export function initSafeArea() {
const root = document.documentElement;
const height = getSafeAreaHeight();
root.style.setProperty("--safe-area-top", `${height}px`);
}