Skip to content

Commit

Permalink
add some modal
Browse files Browse the repository at this point in the history
  • Loading branch information
iFwu committed Oct 7, 2024
1 parent 56d5cdb commit b343a80
Show file tree
Hide file tree
Showing 7 changed files with 239 additions and 30 deletions.
14 changes: 10 additions & 4 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ jobs:
steps:
- name: Checkout
uses: actions/checkout@v4

- uses: pnpm/action-setup@v4
name: Install pnpm
with:
version: 9.12.0 # Updated to match the version in package.json
version: 9.12.0
run_install: false

- name: Install Node.js
Expand All @@ -23,14 +24,19 @@ jobs:
cache: 'pnpm'

- name: Install Dependencies
run: pnpm install # 使用pnpm进行依赖安装
run: pnpm install

- name: Get short SHA
id: slug
run: echo "::set-output name=sha8::$(echo ${GITHUB_SHA} | cut -c1-8)"

- name: Build
run: pnpm build # 使用pnpm进行构建
run: pnpm build
env:
GITHUB_PAGES: 'true'
VITE_GIT_COMMIT_HASH: ${{ steps.slug.outputs.sha8 }}

- name: Deploy to GitHub Pages
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: dist # 要部署的文件夹,通常是构建输出目录
folder: dist
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@
"dependencies": {
"@techstark/opencv-js": "^4.10.0-release.1",
"ml-kmeans": "^6.0.0",
"preact": "^10.24.1",
"preact-modal": "^1.0.13"
"preact": "^10.24.1"
},
"devDependencies": {
"@preact/preset-vite": "^2.9.1",
Expand Down
22 changes: 0 additions & 22 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { useOpenCV } from './hooks/useOpenCV';
import { useChessEngine } from './hooks/useChessEngine';
import { useDepth } from './hooks/useDepth';
import { DepthControl } from './components/DepthControl';
import { WelcomeModal } from './components/WelcomeModal';

export function App() {
const [overlayImageSrc, setOverlayImageSrc] = useState('');
Expand Down Expand Up @@ -150,6 +151,7 @@ export function App() {
<h1>象棋棋盘识别与分析</h1>
</header>
<main className="app-container">
<WelcomeModal />
<div className="content-wrapper">
<div className="left-column">
<SolutionDisplay
Expand Down
162 changes: 161 additions & 1 deletion src/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -346,4 +346,164 @@ input[type="file"],
margin: 0.5rem 0;
}

/* ... 其他样式保持不变 ... */
/* ... 其他样式保持不变 ... */

/* 在文件末尾添加以下样式 */
dialog {
padding: 20px;
border-radius: 8px;
border: 1px solid #ccc;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}

dialog > div {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

dialog h2 {
margin-bottom: 10px;
}

dialog p {
margin-bottom: 15px;
}

dialog button {
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

dialog button:hover {
background-color: #0056b3;
}

/* 更新 .welcome-modal 样式 */
.welcome-modal {
padding: 20px;
border-radius: 12px;
border: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
max-width: 90%;
width: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
background-color: white;
}

.welcome-modal::backdrop {
background-color: rgba(0, 0, 0, 0.7);
}

.welcome-modal-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.welcome-modal h2 {
margin-bottom: 15px;
color: #2c3e50;
font-size: 1.5rem;
}

.welcome-modal p {
margin: 5px 0; /* 将底部边距从 10px 减少到 5px */
color: #34495e;
font-size: 1rem;
}

/* 添加一个新的样式来增加最后一个 p 标签和按钮组之间的间距 */
.welcome-modal p:last-of-type {
margin-bottom: 15px;
}

/* 更新按钮组的上边距 */
.welcome-modal .button-group {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 10px; /* 将上边距从 20px 减少到 10px */
flex-wrap: wrap;
}

.welcome-modal button {
padding: 10px 20px;
font-size: 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s, transform 0.1s;
flex: 1;
min-width: 120px;
}

.welcome-modal button:hover {
transform: translateY(-2px);
}

.welcome-modal .primary-button {
background-color: #3498db;
color: white;
}

.welcome-modal .primary-button:hover {
background-color: #2980b9;
}

.welcome-modal .secondary-button {
background-color: #ecf0f1;
color: #2c3e50;
}

.welcome-modal .secondary-button:hover {
background-color: #bdc3c7;
}

.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}

/* 添加媒体查询以适配移动端 */
@media (max-width: 480px) {
.welcome-modal {
padding: 15px;
width: 95%;
}

.welcome-modal h2 {
font-size: 1.2rem;
}

.welcome-modal p {
font-size: 0.9rem;
}

.welcome-modal button {
padding: 8px 16px;
font-size: 0.9rem;
}
}
60 changes: 60 additions & 0 deletions src/components/WelcomeModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { useState, useEffect } from 'preact/hooks';

// 使用环境变量作为版本号
const APP_VERSION = import.meta.env.VITE_GIT_COMMIT_HASH || 'development';

export function WelcomeModal() {
const [isOpen, setIsOpen] = useState(false);

useEffect(() => {
const lastSeenVersion = localStorage.getItem('lastSeenVersion');
const skipFutureModals = localStorage.getItem('skipFutureModals') === 'true';
console.log('lastSeenVersion', lastSeenVersion);
console.log('APP_VERSION', APP_VERSION);
console.log('skipFutureModals', skipFutureModals);

if (!skipFutureModals || lastSeenVersion !== APP_VERSION) {
setIsOpen(true);
}
}, []);

const handleClose = (skip: boolean) => {
setIsOpen(false);
localStorage.setItem('lastSeenVersion', APP_VERSION);
if (skip) {
localStorage.setItem('skipFutureModals', 'true');
} else {
// 如果用户点击"我知道了",移除 skipFutureModals 标志
localStorage.removeItem('skipFutureModals');
}
};

if (!isOpen) return null;

return (
<div className="modal-overlay">
<dialog open={true} className="welcome-modal">
<div className="welcome-modal-content">
<h2>欢迎使用</h2>
<p>该应用正在开发完善中</p>
<p>目前在 JJ象棋残局截图上进行了测试</p>
<p>请注意:需要在设置中关闭行棋提示</p>
<div className="button-group">
<button
onClick={() => handleClose(false)}
className="primary-button"
>
我知道了
</button>
<button
onClick={() => handleClose(true)}
className="secondary-button"
>
不再提示
</button>
</div>
</div>
</dialog>
</div>
);
}
6 changes: 5 additions & 1 deletion vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import cdn from 'vite-plugin-cdn-import';
declare const process: {
env: {
GITHUB_PAGES?: string;
VITE_GIT_COMMIT_HASH?: string;
};
};

Expand All @@ -22,7 +23,7 @@ export default defineConfig({
}),
],
server: {
hmr: false,
// hmr: false,
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
Expand All @@ -43,4 +44,7 @@ export default defineConfig({
},
// 根据环境动态设置 base
base: process.env.GITHUB_PAGES === 'true' ? '/xiangqi-analysis/' : '/',
define: {
'import.meta.env.VITE_GIT_COMMIT_HASH': JSON.stringify(process.env.VITE_GIT_COMMIT_HASH),
},
});

0 comments on commit b343a80

Please sign in to comment.