mirror of https://github.com/veypi/OneAuth.git
test: front
veypi
11 months ago
parent
be16fc1c5c
commit
200393c4d4
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Music Player</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body class="flex items-center justify-center min-h-screen bg-gray-900">
|
||||
<div class="bg-gray-800 p-6 rounded-lg shadow-lg text-white w-full max-w-md space-y-4">
|
||||
<audio id="player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
|
||||
<button id="playButton"
|
||||
class="w-full py-2 px-4 bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-300 ease-in-out transform active:scale-95 flex items-center justify-center space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Play</span>
|
||||
</button>
|
||||
<progress id="progressBar" value="0" max="1" class="w-full h-2 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-green-500 rounded-full"></div>
|
||||
</progress>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const player = document.getElementById('player');
|
||||
const playButton = document.getElementById('playButton');
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
|
||||
playButton.addEventListener('click', () => {
|
||||
if (player.paused) {
|
||||
player.play();
|
||||
playButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span>Pause</span>';
|
||||
} else {
|
||||
player.pause();
|
||||
playButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/></svg><span>Play</span>';
|
||||
}
|
||||
});
|
||||
|
||||
player.addEventListener('timeupdate', () => {
|
||||
console.log(player.currentTime, player.duration);
|
||||
progressBar.value = player.currentTime / player.duration;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Card</title>
|
||||
<script src='v.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="h-6 w-40 bg-green-100 flex gap-4">
|
||||
<slot name="a">slot a</slot>
|
||||
</div>
|
||||
<div class="h-14 w-40">
|
||||
<slot>
|
||||
<div ref="audio"></div>
|
||||
</slot>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
return {
|
||||
data: {a: 2}
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Index</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script type="module" src="./v.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='app' class="flex gap-2">
|
||||
<div>123</div>
|
||||
<div>123</div>
|
||||
<div>123</div>
|
||||
<div ref="card">
|
||||
<div>111</div>
|
||||
<div slot="a">c1</div>
|
||||
<div>333</div>
|
||||
</div>
|
||||
<div ref="card">
|
||||
<div slot="a">c2</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
let app = {a: 1}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,12 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Default</title>
|
||||
</head>
|
||||
|
||||
<div>
|
||||
<div class="header flex"></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<script>
|
||||
console.log('default')
|
||||
</script>
|
||||
@ -0,0 +1,6 @@
|
||||
<body>
|
||||
<slot>></slot>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
@ -0,0 +1,28 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./components/**/*.{js,vue,ts}",
|
||||
"./layouts/**/*.vue",
|
||||
"./pages/**/*.vue",
|
||||
"./plugins/**/*.{js,ts}",
|
||||
"./app.vue",
|
||||
"./error.vue",
|
||||
"*.html",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
vprimary: '#2196f3',
|
||||
vsecondary: '#ecc94b',
|
||||
vaccents: '#ff9800',
|
||||
verror: '#f44336',
|
||||
vwaring: '#ff5722',
|
||||
vinfo: '#ffc107',
|
||||
vsuccess: '#53de58',
|
||||
vignore: '#d1d5db',
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
@ -0,0 +1,158 @@
|
||||
/*
|
||||
* v.js
|
||||
* Copyright (C) 2024 veypi <i@veypi.com>
|
||||
*
|
||||
* Distributed under terms of the GPL license.
|
||||
*/
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const config = { childList: true, subtree: true };
|
||||
|
||||
const callback = function (mutationsList, observer) {
|
||||
for (let mutation of mutationsList) {
|
||||
if (mutation.type === 'childList') {
|
||||
// console.log(mutation)
|
||||
// console.log('A child node has been added or removed.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const observer = new MutationObserver(callback);
|
||||
|
||||
var cacheUrl = {}
|
||||
var pendingRequests = {};
|
||||
|
||||
async function fetchFileWithCache(url) {
|
||||
if (cacheUrl[url]) {
|
||||
return Promise.resolve(cacheUrl[url]);
|
||||
}
|
||||
if (pendingRequests[url]) {
|
||||
return pendingRequests[url];
|
||||
}
|
||||
const promise = fetch(url)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(txt => {
|
||||
cacheUrl[url] = txt;
|
||||
return txt;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching the file:', error);
|
||||
delete pendingRequests[url];
|
||||
throw error;
|
||||
})
|
||||
.finally(() => {
|
||||
delete pendingRequests[url];
|
||||
});
|
||||
pendingRequests[url] = promise;
|
||||
return promise;
|
||||
}
|
||||
|
||||
|
||||
function extractBodyAndScript(htmlString) {
|
||||
const bodyMatch = htmlString.match(/<body[^>]*>([\s\S]*)<\/body>/i);
|
||||
const bodyContent = bodyMatch ? bodyMatch[1] : '';
|
||||
|
||||
let scriptMatches = htmlString.match(/<script[^>]*>([\s\S]*?)<\/script>/ig);
|
||||
|
||||
|
||||
let scriptContents = []
|
||||
let srcReg = /<script\s+[^>]*src=["']([^"']+)["'][^>]*>/
|
||||
for (let s of scriptMatches) {
|
||||
let match = srcReg.exec(s)
|
||||
if (match && match.length) {
|
||||
// handle src script
|
||||
// console.log(match[1])
|
||||
} else {
|
||||
scriptContents.push(s.replace(/<script[^>]*>|<\/script>/ig, ''))
|
||||
}
|
||||
}
|
||||
return {
|
||||
bodyContent,
|
||||
scriptContents
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
* @param {HTMLElement} node
|
||||
* @return {Promise<void>}
|
||||
* */
|
||||
async function setupRef(node, data, itercount = 0) {
|
||||
console.log(itercount)
|
||||
if (itercount > 100) {
|
||||
log.warn('infinite loop')
|
||||
return
|
||||
}
|
||||
const ref = node.getAttribute('ref')
|
||||
node.setAttribute('tag', ref)
|
||||
node.removeAttribute('ref')
|
||||
const txt = await fetchFileWithCache(ref + ".html")
|
||||
let ast = extractBodyAndScript(txt)
|
||||
|
||||
let div = document.createElement('div')
|
||||
div.innerHTML = ast.bodyContent
|
||||
|
||||
handleSlots(node, div)
|
||||
//
|
||||
node.innerHTML = div.innerHTML
|
||||
|
||||
let resp = new Function("{vnode,data}", ast.scriptContents.join('\n'))({ vnode: node, data: data })
|
||||
|
||||
for (let n of node.querySelectorAll("div[ref]")) {
|
||||
// 确保子元素先加载完
|
||||
await setupRef(n, resp?.data || {}, itercount + 1)
|
||||
}
|
||||
}
|
||||
|
||||
function handleSlots(origin, template) {
|
||||
// handle slots
|
||||
let originSnap = { '': [] }
|
||||
let i = 0
|
||||
let child
|
||||
while (child = origin.children.item(i)) {
|
||||
i++
|
||||
let slotname = child.getAttribute ? child.getAttribute('slot') || '' : ''
|
||||
if (slotname !== '') {
|
||||
child.removeAttribute('slot')
|
||||
originSnap[slotname] = child
|
||||
} else {
|
||||
originSnap[''].push(child)
|
||||
}
|
||||
}
|
||||
|
||||
app.b = originSnap
|
||||
let slots = template.querySelectorAll('slot')
|
||||
slots.forEach((slot) => {
|
||||
let slotname = slot.getAttribute('name') || ''
|
||||
let snap = originSnap[slotname]
|
||||
if (snap && snap.length !== 0) {
|
||||
if (slotname === '') {
|
||||
slot.replaceWith(...snap)
|
||||
} else {
|
||||
slot.replaceWith(snap)
|
||||
}
|
||||
} else {
|
||||
slot.replaceWith(...slot.childNodes)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('DOMContentLoaded');
|
||||
const node = document.getElementById('app');
|
||||
observer.observe(node, config);
|
||||
const sync = () => {
|
||||
let test = node.querySelectorAll("div[ref]")
|
||||
test.forEach(n => setupRef(n, app))
|
||||
}
|
||||
sync()
|
||||
// setInterval(sync, 10)
|
||||
});
|
||||
|
||||
})();
|
||||
@ -0,0 +1,10 @@
|
||||
/*
|
||||
* v.js
|
||||
* Copyright (C) 2024 veypi <i@veypi.com>
|
||||
*
|
||||
* Distributed under terms of the GPL license.
|
||||
*/
|
||||
|
||||
export default {
|
||||
a: 123
|
||||
}
|
||||
Loading…
Reference in New Issue