明树Git Lab

Skip to content

B
bridata-website-frontend
Commit 2566820f authored by yangyajing's avatar yangyajing
Browse files
Options

微信小程序分享相关内容

parent 17074b9d
Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 50 deletions
index.html
View file @ 2566820f
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" /> <link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="keywords" content="明树,北京明树,明树数据,北京明树数据,数据服务,PPP咨询,Bridata,北京明树数据科技有限公司" />
<meta name="description" content="北京明树数据科技有限公司（明树数据），专注公共数据和企业数据资产开发利用全周期服务，将大数据和人工智能技术与行业经验深度融合，开创“数据+软件+咨询”的全新模式，深度挖掘数据要素在不同场景的应用价值，为政府部门、企业、社会资本、平台公司和金融机构提供数字化转型、数据治理、数据资产入表、数据产品开发、数据资产管理运营、项目投融资咨询和融资化债等服务。"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>明树数据</title> <title>明树数据</title>
</head> </head>
......
package-lock.json
View file @ 2566820f
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"lucide-react": "^0.555.0", "lucide-react": "^0.555.0",
"react": "^19.2.0", "react": "^19.2.0",
"react-dom": "^19.2.0" "react-dom": "^19.2.0",
"weixin-js-sdk": "^1.6.5"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.39.1", "@eslint/js": "^9.39.1",
...@@ -3749,6 +3750,12 @@ ...@@ -3749,6 +3750,12 @@
} }
} }
}, },
"node_modules/weixin-js-sdk": {
"version": "1.6.5",
"resolved": "https://registry.npmjs.org/weixin-js-sdk/-/weixin-js-sdk-1.6.5.tgz",
"integrity": "sha512-Gph1WAWB2YN/lMOFB/ymb+hbU/wYazzJgu6PMMktCy9cSCeW5wA6Zwt0dpahJbJ+RJEwtTv2x9iIu0U4enuVSQ==",
"license": "MIT"
},
"node_modules/which": { "node_modules/which": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
......
package.json
View file @ 2566820f
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"lucide-react": "^0.555.0", "lucide-react": "^0.555.0",
"react": "^19.2.0", "react": "^19.2.0",
"react-dom": "^19.2.0" "react-dom": "^19.2.0",
"weixin-js-sdk": "^1.6.5"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.39.1", "@eslint/js": "^9.39.1",
......
src/App.jsx
View file @ 2566820f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Play, ArrowRight, Zap, Shield, Globe, Database, Activity, Cpu, Menu, X, ChevronRight, Server, Layers, Users, Rocket, Lock, BarChart3, Code, Briefcase, ExternalLink, ChevronLeft, CheckCircle2, Award, FileText, PieChart, Coins, FileCheck, Brain, LayoutGrid, Settings, TrendingUp, ChevronDown, FileCode, Monitor, Info, Truck, MessageCircle, Leaf, Zap as EnergyIcon, Beaker, Building2, Landmark, GraduationCap, Smartphone, CreditCard, Search, Calendar, Newspaper, Mic2, Handshake } from 'lucide-react'; import { Play, ArrowRight, Zap, Shield, Globe, Database, Activity, Cpu, Menu, X, ChevronRight, Server, Layers, Users, Rocket, Lock, BarChart3, Code, Briefcase, ExternalLink, ChevronLeft, CheckCircle2, Award, FileText, PieChart, Coins, FileCheck, Brain, LayoutGrid, Settings, TrendingUp, ChevronDown, FileCode, Monitor, Info, Truck, MessageCircle, Leaf, Zap as EnergyIcon, Beaker, Building2, Landmark, GraduationCap, Smartphone, CreditCard, Search, Calendar, Newspaper, Mic2, Handshake } from 'lucide-react';
import wx from 'weixin-js-sdk';
import html2canvas from 'html2canvas'; import html2canvas from 'html2canvas';
//导入依赖，用于“转发至微信”处 DOM 转 Canvas，以实现自动将页面截图存入剪切板 //导入依赖，用于“转发至微信”处 DOM 转 Canvas，以实现自动将页面截图存入剪切板
// 保留原有导入的组件（X、CheckCircle2、MessageCircle等） // 保留原有导入的组件（X、CheckCircle2、MessageCircle等）
...@@ -1889,7 +1889,7 @@ const HomeSection = ({ setActiveTab, setSelectedScenario }) => { ...@@ -1889,7 +1889,7 @@ const HomeSection = ({ setActiveTab, setSelectedScenario }) => {
</section> </section>
{/* 2. Scenario Highlights (Horizontal Scroll 6 items) */} {/* 2. Scenario Highlights (Horizontal Scroll 6 items) */}
<section className="py-12 border-t border-white/5 relative z-10 overflow-hidden"> <section className="py-12 border-t border-white/5 relative z-10 overflow-hidden" id="yycj">
<div className="max-w-6xl mx-auto px-6"> <div className="max-w-6xl mx-auto px-6">
<div className="mb-8 flex justify-between items-end"> <div className="mb-8 flex justify-between items-end">
<div> <div>
...@@ -2070,13 +2070,26 @@ const App = () => { ...@@ -2070,13 +2070,26 @@ const App = () => {
const [selectedNews, setSelectedNews] = useState(null); // The item clicked in the News section const [selectedNews, setSelectedNews] = useState(null); // The item clicked in the News section
const [activeServiceTab, setActiveServiceTab] = useState('consulting'); const [activeServiceTab, setActiveServiceTab] = useState('consulting');
const [showCopyToast, setShowCopyToast] = useState(false); const [showCopyToast, setShowCopyToast] = useState(false);
const scrollContainerRef = useRef(null);
const [showNewsTotal, setShownewsTotal] = useState(false); const [showNewsTotal, setShownewsTotal] = useState(false);
const [consoleData, setConsoleData] = useState(null);
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
setScrolled(window.scrollY > 50); setScrolled(window.scrollY > 50);
}; };
const setMobileScroll = (id) => {
let element = document.getElementById(id);
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (element && isMobile) {
setTimeout(() => {
window.scrollTo(0, element.offsetTop);
}, 500);
}
};
if (location.hash) {
let hash = location.hash.substring(2);
setMobileScroll(hash);
}
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll);
}, []); }, []);
...@@ -2099,52 +2112,82 @@ const App = () => { ...@@ -2099,52 +2112,82 @@ const App = () => {
}; };
const handleWeChatShare = async (type) => { const handleWeChatShare = async (type) => {
try { if ( type === "scenario" && window.__wxjs_environment === 'miniprogram' || /miniProgram/.test(navigator.userAgent)) {
let modalElement = document.getElementById(type + '-modal'); // 小程序环境中
if (!modalElement) { wx.miniProgram.postMessage({
alert('未找到产品弹窗，请重试！'); data: {
return; type: 'share',
} path: '/pages/webview/webview?url=' + encodeURIComponent("http://192.168.12.77:5173/#/yycj"),
modalElement = modalElement.cloneNode(true); timestamp: Date.now()
const buttons = modalElement.querySelectorAll('button'); }
buttons.forEach(button => button.remove()); })
setConsoleData({
// 临时修改样式避免截图不全2 text: "请点击右上角分享"
const rightContent = modalElement.querySelector('.overflow-y-auto'); });
modalElement.style.overflow = 'visible';
if (rightContent) rightContent.style.overflow = 'visible';
modalElement.classList.remove("animate-fade-in-up", "h-[100dvh]", "md:max-h-[90vh]");
document.body.appendChild(modalElement);
// DOM转Canvas
const canvas = await html2canvas(modalElement);
document.body.removeChild(modalElement);
// 转Blob并复制到剪贴板
canvas.toBlob(async (blob) => {
if (!blob) {
// alert('图片转换失败，请重试！');
return;
}
const clipboardItem = new ClipboardItem({ 'image/png': blob });
await navigator.clipboard.write([clipboardItem]);
setShowCopyToast(true); setShowCopyToast(true);
setTimeout(() => { setTimeout(() => {
setShowCopyToast(false); setShowCopyToast(false);
}, 1500); }, 1500);
// alert('🎉 产品弹窗已转为图片并复制到剪贴板！\n可直接粘贴到微信聊天/朋友圈～');
}, 'image/png', 1.0);
} catch (error) {
console.error('复制失败：', error);
if (error.name === 'NotAllowedError') {
alert('请允许浏览器的剪贴板权限后重试！');
} else if (error.name === 'TypeError') {
alert('您的浏览器不支持此功能，请升级浏览器！');
} else { } else {
alert(`复制失败：${error.message}`); try {
let modalElement = document.getElementById(type + '-modal');
if (!modalElement) {
alert('未找到产品弹窗，请重试！');
return;
}
modalElement = modalElement.cloneNode(true);
const buttons = modalElement.querySelectorAll('button');
buttons.forEach(button => button.remove());
// 临时修改样式避免截图不全2
const rightContent = modalElement.querySelector('.overflow-y-auto');
modalElement.style.overflow = 'visible';
if (rightContent) rightContent.style.overflow = 'visible';
modalElement.classList.remove("animate-fade-in-up", "h-[100dvh]", "md:max-h-[90vh]");
document.body.appendChild(modalElement);
// DOM转Canvas
const canvas = await html2canvas(modalElement);
// 转Blob并复制到剪贴板
canvas.toBlob(async (blob) => {
if (!blob) {
// alert('图片转换失败，请重试！');
return;
}
const clipboardItem = new ClipboardItem({ 'image/png': blob });
await navigator.clipboard.write([clipboardItem]);
setConsoleData({
text: "内容已复制",
subText: "请打开微信，粘贴并发送给好友"
})
setShowCopyToast(true);
setTimeout(() => {
setShowCopyToast(false);
}, 1500);
}, 'image/png', 1.0);
} catch (error) {
console.error('复制失败：', error);
if (error.name === 'NotAllowedError') {
alert('请允许浏览器的剪贴板权限后重试！');
} else if (error.name === 'TypeError') {
alert('您的浏览器不支持此功能，请升级浏览器！');
} else {
alert(`复制失败：${error.message}`);
}
}
}
};
const resetWeChatShare = () => {
// 重置分享信息
if ( window.__wxjs_environment === 'miniprogram' || /miniProgram/.test(navigator.userAgent)) {
wx.miniProgram.postMessage({
data: {
type: "default"
}
})
} }
} }
};
// Render Content based on activeTab // Render Content based on activeTab
...@@ -2841,11 +2884,13 @@ const App = () => { ...@@ -2841,11 +2884,13 @@ const App = () => {
</div> </div>
<h3 className="text-lg md:text-2xl font-bold text-white tracking-wide">{selectedScenario.title}</h3> <h3 className="text-lg md:text-2xl font-bold text-white tracking-wide">{selectedScenario.title}</h3>
</div> </div>
<button onClick={() => setSelectedScenario(null)} className="p-2 hover:bg-white/10 rounded-full transition-colors"> <button onClick={() => {
setSelectedScenario(null);
resetWeChatShare();
}} className="p-2 hover:bg-white/10 rounded-full transition-colors">
<X className="w-5 h-5 md:w-6 md:h-6 text-gray-400 hover:text-white" /> <X className="w-5 h-5 md:w-6 md:h-6 text-gray-400 hover:text-white" />
</button> </button>
</div> </div>
<div className="p-4 md:p-8 overflow-y-auto flex-1"> <div className="p-4 md:p-8 overflow-y-auto flex-1">
{/* 1. Detail Text (No Header) */} {/* 1. Detail Text (No Header) */}
<div className="mb-6 md:mb-8"> <div className="mb-6 md:mb-8">
...@@ -3034,13 +3079,13 @@ const App = () => { ...@@ -3034,13 +3079,13 @@ const App = () => {
{/* Global Toast */} {/* Global Toast */}
{showCopyToast && ( {showCopyToast && (
<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#21242b] text-white px-8 py-6 rounded border border-[#00FFC2] shadow-[0_0_50px_rgba(0,0,0,0.8)] z-[300] flex flex-col items-center gap-4 animate-fade-in-up"> <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#21242b] text-white px-8 py-6 rounded border border-[#00FFC2] shadow-[0_0_50px_rgba(0,0,0,0.8)] z-[300] flex flex-col items-center gap-4">
<div className="w-12 h-12 bg-[#00FFC2]/10 rounded-full flex items-center justify-center"> <div className="w-12 h-12 bg-[#00FFC2]/10 rounded-full flex items-center justify-center">
<CheckCircle2 className="w-6 h-6 text-[#00FFC2]" /> <CheckCircle2 className="w-6 h-6 text-[#00FFC2]" />
</div> </div>
<div className="text-center"> <div className="text-center">
<p className="font-bold text-lg mb-1">内容已复制</p> <p className="font-bold text-lg mb-1">{consoleData.text}</p>
<p className="text-sm text-gray-400">请打开微信，粘贴并发送给好友</p> <p className="text-sm text-gray-400">{consoleData.subText}</p>
</div> </div>
</div> </div>
)} )}
......
src/index.css
View file @ 2566820f
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
html{
scroll-behavior: smooth;
}
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
} }
......
vite.config.js
View file @ 2566820f
...@@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react' ...@@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
server: {
host: '0.0.0.0', // 允许所有 IP 访问
port: 5173, // 指定端口
open: false, // 是否自动打开浏览器
// 如果需要 HTTPS
// https: true
}
}) })
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment