第一次提交
This commit is contained in:
49
.gitea/workflows/ci.yml
Normal file
49
.gitea/workflows/ci.yml
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
name: Node.js CI
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
pull_request:
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build-and-test:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: 检出代码
|
||||||
|
uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: 设置 Node.js
|
||||||
|
uses: actions/setup-node@v3
|
||||||
|
with:
|
||||||
|
node-version: '21' # 可改为 16/20 等版本
|
||||||
|
cache: 'npm'
|
||||||
|
|
||||||
|
- name: 安装依赖
|
||||||
|
run: npm install --force
|
||||||
|
|
||||||
|
- name: 构建项目（可选）
|
||||||
|
run: npm run build
|
||||||
|
if: success()
|
||||||
|
- name: 打包构建产物
|
||||||
|
run: |
|
||||||
|
mkdir -p build-out
|
||||||
|
cp -r dist build-out/
|
||||||
|
cp server.js index.html package.json build-out/
|
||||||
|
zip -r output.zip build-out
|
||||||
|
|
||||||
|
- name: 设置 SSH 私钥
|
||||||
|
run: |
|
||||||
|
mkdir -p ~/.ssh
|
||||||
|
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
|
||||||
|
chmod 600 ~/.ssh/id_ed25519
|
||||||
|
echo "Host *" > ~/.ssh/config
|
||||||
|
echo " StrictHostKeyChecking no" >> ~/.ssh/config
|
||||||
|
echo " UserKnownHostsFile=/dev/null" >> ~/.ssh/config
|
||||||
|
|
||||||
|
- name: 测试 SSH 连接
|
||||||
|
run: ssh -T git@10.0.0.3 -p 222
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
7
README.md
Normal file
7
README.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
|
||||||
14
index.html
Normal file
14
index.html
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="icon" type="image/svg" href="/favicon.svg">
|
||||||
|
<!--app-head-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"><!--app-html--></div>
|
||||||
|
</body>
|
||||||
|
<!--app-state-->
|
||||||
|
<script type="module" src="/src/entry-client.js"></script>
|
||||||
|
</html>
|
||||||
9495
package-lock.json
generated
Normal file
9495
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
38
package.json
Normal file
38
package.json
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "ao3-mirror-ssr",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "node server",
|
||||||
|
"build": "npm run build:client && npm run build:server",
|
||||||
|
"build:client": "vite build --outDir dist/client",
|
||||||
|
"build:server": "vite build --ssr src/entry-server.js --outDir dist/server",
|
||||||
|
"preview": "cross-env NODE_ENV=production PORT=5174 HOST=:: node server"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@mdui/icons": "^1.0.2",
|
||||||
|
"axios": "^1.8.1",
|
||||||
|
"compress-json": "^3.1.1",
|
||||||
|
"compression": "^1.8.0",
|
||||||
|
"cookie-parser": "^1.4.7",
|
||||||
|
"express": "^5.0.1",
|
||||||
|
"idb": "^8.0.2",
|
||||||
|
"mdui": "^2.1.3",
|
||||||
|
"pako": "^2.1.0",
|
||||||
|
"pinia": "^3.0.1",
|
||||||
|
"sirv": "^3.0.1",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-client-only": "^2.1.0",
|
||||||
|
"vue-router": "^4.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"@vitejs/plugin-vue-jsx": "^4.1.1",
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"vite": "^6.1.1",
|
||||||
|
"vite-plugin-md": "^0.21.5",
|
||||||
|
"vite-plugin-pwa": "^0.21.1",
|
||||||
|
"vite-plugin-vue-devtools": "^7.7.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
28
public/favicon.svg
Normal file
28
public/favicon.svg
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="48"
|
||||||
|
height="48"
|
||||||
|
viewBox="0 0 12.372639 12.372639"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
style="display:inline">
|
||||||
|
<path
|
||||||
|
style="-inkscape-font-specification:'JetBrains Mono, Normal';fill:#a93721;stroke-width:0.310558"
|
||||||
|
d="m 3.0931598,5.8509178 0.708073,-2.720491 h 0.4509308 l 0.7043463,2.720491 H 4.6173802 L 4.4384986,5.127938 H 3.6148978 L 3.4360162,5.8509178 Z M 3.6819784,4.8447088 H 4.3676913 L 4.158996,4.0062013 Q 4.0993688,3.7676925 4.0658285,3.6074444 4.0322882,3.4471963 4.0248348,3.3987492 q -0.00745,0.048447 -0.040994,0.2086952 -0.03354,0.1602481 -0.093167,0.3950302 z m 2.578878,1.043476 q -0.3652166,0 -0.5776385,-0.2124219 Q 5.470796,5.463341 5.470796,5.0683108 v -1.155277 q 0,-0.3950302 0.2124219,-0.6074521 0.2124219,-0.2124219 0.5776385,-0.2124219 0.3652166,0 0.5776385,0.2124219 0.2124219,0.2124219 0.2124219,0.6037254 v 1.1590037 q 0,0.3950302 -0.2124219,0.6074521 Q 6.626073,5.8881848 6.2608564,5.8881848 Z m 0,-0.3018627 q 0.2198753,0 0.335403,-0.1229811 0.1192544,-0.1267078 0.1192544,-0.3577632 v -1.229811 q 0,-0.2310554 -0.1192544,-0.3540365 -0.1155277,-0.1267078 -0.335403,-0.1267078 -0.2161486,0 -0.335403,0.1267078 Q 5.806199,3.6447114 5.806199,3.8757668 v 1.229811 q 0,0.2310554 0.1192544,0.3577632 0.1192544,0.1229811 0.335403,0.1229811 z m 2.1950278,0.3018627 q -0.3763967,0 -0.596272,-0.2086952 Q 7.6397369,5.4670677 7.6397369,5.1055778 h 0.335403 q 0,0.223602 0.1304345,0.3540365 0.1304345,0.1304345 0.3540365,0.1304345 0.223602,0 0.3540365,-0.1304345 0.1304345,-0.1304345 0.1304345,-0.3540365 v -0.186335 q 0,-0.223602 -0.1304345,-0.3540365 Q 8.6832129,4.4347718 8.4596109,4.4347718 H 8.1652016 V 4.1440892 l 0.6670793,-0.708073 h -1.11801 V 3.1304268 H 9.2124043 V 3.4434696 L 8.5565051,4.1403625 q 0.335403,0.026087 0.5291914,0.2347821 0.1937884,0.2049685 0.1937884,0.5440982 v 0.186335 q 0,0.3614899 -0.223602,0.5739118 -0.2198753,0.2086952 -0.5999987,0.2086952 z"
|
||||||
|
id="text4"
|
||||||
|
aria-label="AO3" />
|
||||||
|
<path
|
||||||
|
style="-inkscape-font-specification:'JetBrains Mono, Normal';fill:#f9e0a6;stroke-width:0.250631"
|
||||||
|
d="M 0.57996745,8.7347317 V 6.3404704 H 1.0161822 l 0.3050223,1.03642 0.3181416,-1.03642 H 2.0755608 V 8.7347317 H 1.7902173 V 7.6031972 q 0,-0.1607106 0.00328,-0.3673387 0.00656,-0.2099078 0.016399,-0.4230955 0.00984,-0.2131876 0.022959,-0.3837377 L 1.4458373,7.6655136 H 1.1900121 l -0.37061852,-1.20697 q 0.0262385,0.2427059 0.0360779,0.5313292 0.009839,0.2886233 0.009839,0.6133244 v 1.1315345 z m 2.01052465,0 V 8.4657873 h 0.639563 V 7.1997806 H 2.6560883 V 6.9308362 H 3.525238 V 8.4657873 H 4.1320028 V 8.7347317 Z M 3.3448484,6.606135 q -0.1082337,0 -0.1705501,-0.055757 -0.062316,-0.055757 -0.062316,-0.1508712 0,-0.098394 0.062316,-0.1541511 0.062316,-0.059037 0.1705501,-0.059037 0.1082338,0 0.1705502,0.059037 0.062316,0.055757 0.062316,0.1541511 0,0.095115 -0.062316,0.1508712 -0.062316,0.055757 -0.1705502,0.055757 z M 4.6469342,8.7347317 V 6.9308362 h 0.2951829 v 0.34438 h 0.00656 q 0.022959,-0.1738299 0.1475914,-0.275504 0.1246328,-0.1016741 0.3345407,-0.1016741 0.2820636,0 0.4329349,0.1705501 0.154151,0.1672703 0.154151,0.4788523 v 0.154151 H 5.7227118 v -0.154151 q 0,-0.3935772 -0.3837377,-0.3935772 -0.1935088,0 -0.2951829,0.1115135 -0.1016741,0.1115136 -0.1016741,0.3214214 v 1.1479335 z m 1.9678874,0 V 6.9308362 h 0.2951829 v 0.34438 h 0.00656 q 0.022959,-0.1738299 0.1475914,-0.275504 0.1246328,-0.1016741 0.3345407,-0.1016741 0.2820636,0 0.4329349,0.1705501 0.154151,0.1672703 0.154151,0.4788523 v 0.154151 H 7.6905992 v -0.154151 q 0,-0.3935772 -0.3837377,-0.3935772 -0.1935088,0 -0.2951829,0.1115135 -0.1016741,0.1115136 -0.1016741,0.3214214 v 1.1479335 z m 2.5844912,0.026238 q -0.3247012,0 -0.51821,-0.190229 Q 8.4908738,8.3805122 8.4908738,8.039412 V 7.6261559 q 0,-0.34438 0.190229,-0.5313292 0.190229,-0.190229 0.51821,-0.190229 0.327981,0 0.5182099,0.190229 0.190229,0.1869492 0.190229,0.5313292 V 8.039412 q 0,0.3411002 -0.1935088,0.5313292 -0.1902289,0.190229 -0.5149301,0.1902285 z m 0,-0.2623848 q 0.1935088,0 0.3017425,-0.1082338 0.1115135,-0.1082332 0.1115135,-0.318141 V 7.5933578 q 0,-0.2099078 -0.1115135,-0.3181416 -0.1082337,-0.1082337 -0.3017425,-0.1082337 -0.190229,0 -0.3017425,0.1082337 Q 8.7860567,7.38345 8.7860567,7.5933578 v 0.4788523 q 0,0.2099078 0.1115136,0.3181415 0.1115135,0.1082338 0.3017425,0.1082333 z M 10.550595,8.7347317 V 6.9308362 h 0.295183 v 0.34438 h 0.0066 q 0.02296,-0.1738299 0.147591,-0.275504 0.124633,-0.1016741 0.334541,-0.1016741 0.282064,0 0.432935,0.1705501 0.154151,0.1672703 0.154151,0.4788523 v 0.154151 h -0.295183 v -0.154151 q 0,-0.3935772 -0.383738,-0.3935772 -0.193508,0 -0.295183,0.1115135 -0.101674,0.1115136 -0.101674,0.3214214 v 1.1479335 z"
|
||||||
|
id="text5"
|
||||||
|
aria-label="Mirror" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
106
public/sw.html
Normal file
106
public/sw.html
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Service Worker 管理</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
table, th, td {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
th, td {
|
||||||
|
padding: 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
padding: 5px 10px;
|
||||||
|
background-color: #ff5555;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background-color: #ff2222;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Service Worker 管理器</h1>
|
||||||
|
<p>这个页面会返回当前网站的所有注册的 Service Worker 并且允许反注册它们</p>
|
||||||
|
<div id="sw-list">
|
||||||
|
<p>加载中...</p>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
async function loadServiceWorkers() {
|
||||||
|
const swListContainer = document.getElementById('sw-list');
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
const registrations = await navigator.serviceWorker.getRegistrations();
|
||||||
|
if (registrations.length === 0) {
|
||||||
|
swListContainer.innerHTML = '<p>没有找到Service Workers.</p>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let tableHtml = `
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>作用域</th>
|
||||||
|
<th>操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
`;
|
||||||
|
registrations.forEach((registration, index) => {
|
||||||
|
tableHtml += `
|
||||||
|
<tr>
|
||||||
|
<td>${registration.scope}</td>
|
||||||
|
<td>
|
||||||
|
<button onclick="unregisterServiceWorker(${index})">反注册</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
tableHtml += `
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
`;
|
||||||
|
swListContainer.innerHTML = tableHtml;
|
||||||
|
} else {
|
||||||
|
swListContainer.innerHTML = '<p>当前游览器不支持Service Workers.</p>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function unregisterServiceWorker(index) {
|
||||||
|
const registrations = await navigator.serviceWorker.getRegistrations();
|
||||||
|
if (registrations[index]) {
|
||||||
|
const scope = registrations[index].scope;
|
||||||
|
const success = await registrations[index].unregister();
|
||||||
|
if (success) {
|
||||||
|
alert(`成功反注册作用域为 '${scope}' 的 Service Worker`);
|
||||||
|
} else {
|
||||||
|
alert(`反注册作用域为 '${scope}' 的 Service Worker 失败了`);
|
||||||
|
}
|
||||||
|
loadServiceWorkers();
|
||||||
|
} else {
|
||||||
|
alert('未知的索引');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.onload = loadServiceWorkers;
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
77
server.js
Normal file
77
server.js
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import fs from 'node:fs/promises'
|
||||||
|
import express from 'express'
|
||||||
|
import cookieParser from 'cookie-parser'
|
||||||
|
import { compress } from 'compress-json'
|
||||||
|
// Constants
|
||||||
|
const isProduction = process.env.NODE_ENV === 'production'
|
||||||
|
const port = process.env.PORT || 5173
|
||||||
|
const base = process.env.BASE || '/'
|
||||||
|
|
||||||
|
// Cached production assets
|
||||||
|
const templateHtml = isProduction
|
||||||
|
? await fs.readFile('./dist/client/index.html', 'utf-8')
|
||||||
|
: ''
|
||||||
|
|
||||||
|
// Create http server
|
||||||
|
const app = express()
|
||||||
|
app.use(cookieParser());
|
||||||
|
|
||||||
|
// Add Vite or respective production middlewares
|
||||||
|
/** @type {import('vite').ViteDevServer | undefined} */
|
||||||
|
let vite
|
||||||
|
if (!isProduction) {
|
||||||
|
const { createServer } = await import('vite')
|
||||||
|
vite = await createServer({
|
||||||
|
server: { middlewareMode: true },
|
||||||
|
appType: 'custom',
|
||||||
|
base,
|
||||||
|
})
|
||||||
|
app.use(vite.middlewares)
|
||||||
|
} else {
|
||||||
|
const compression = (await import('compression')).default
|
||||||
|
const sirv = (await import('sirv')).default
|
||||||
|
app.use(compression())
|
||||||
|
app.use(base, sirv('./dist/client', { extensions: [] }))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Serve HTML
|
||||||
|
app.use('*all', async (req, res) => {
|
||||||
|
try {
|
||||||
|
const url = req.originalUrl.replace(base, '')
|
||||||
|
console.log(`Request ${url}`)
|
||||||
|
/** @type {string} */
|
||||||
|
let template
|
||||||
|
/** @type {import('./src/entry-server.js').render} */
|
||||||
|
let render
|
||||||
|
if (!isProduction) {
|
||||||
|
// Always read fresh template in development
|
||||||
|
template = await fs.readFile('./index.html', 'utf-8')
|
||||||
|
template = await vite.transformIndexHtml(url, template)
|
||||||
|
render = (await vite.ssrLoadModule('/src/entry-server.js')).render
|
||||||
|
} else {
|
||||||
|
template = templateHtml
|
||||||
|
render = (await import('./dist/server/entry-server.js')).render
|
||||||
|
}
|
||||||
|
const { stream, piniaState } = await render(url, req.cookies, req.headers.host)
|
||||||
|
const [htmlStart, htmlEnd] = template.split('<!--app-html-->')
|
||||||
|
res.status(200).set({ 'Content-Type': 'text/html' })
|
||||||
|
res.write(htmlStart)
|
||||||
|
for await (const chunk of stream) {
|
||||||
|
if (res.closed) break
|
||||||
|
res.write(chunk)
|
||||||
|
}
|
||||||
|
const piniaStateContent = JSON.stringify(compress(piniaState))
|
||||||
|
const stateScript = `<script>window.__PINIA_STATE__=${piniaStateContent}</script>`
|
||||||
|
res.write(htmlEnd.replace('<!--app-state-->', stateScript))
|
||||||
|
res.end()
|
||||||
|
} catch (e) {
|
||||||
|
vite?.ssrFixStacktrace(e)
|
||||||
|
console.log(e.stack)
|
||||||
|
res.status(500).end(e.stack)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Start http server
|
||||||
|
app.listen(port, () => {
|
||||||
|
console.log(`Server started at http://localhost:${port}`)
|
||||||
|
})
|
||||||
127
src/App.vue
Normal file
127
src/App.vue
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, onBeforeMount, onServerPrefetch, nextTick, ref, watch } from 'vue'
|
||||||
|
import { useRouter, useRoute, RouterView } from 'vue-router'
|
||||||
|
|
||||||
|
import { useApiStore } from '@/stores/api.js'
|
||||||
|
|
||||||
|
import { useClientOnlyStore } from './ssr/clientOnlyStore.js'
|
||||||
|
import { useThemeStore } from './stores/themeScheme.js'
|
||||||
|
import { useMobileScreen } from './stores/device.js'
|
||||||
|
import { useRouteStore } from './stores/route.js'
|
||||||
|
|
||||||
|
import 'mdui/components/top-app-bar.js'
|
||||||
|
import 'mdui/components/top-app-bar-title.js'
|
||||||
|
import 'mdui/components/navigation-drawer.js'
|
||||||
|
import 'mdui/components/list.js'
|
||||||
|
import 'mdui/components/list-item.js'
|
||||||
|
import 'mdui/components/circular-progress.js'
|
||||||
|
import 'mdui/components/button-icon.js'
|
||||||
|
import 'mdui/components/switch.js'
|
||||||
|
|
||||||
|
import '@mdui/icons/arrow-back.js'
|
||||||
|
import '@mdui/icons/light-mode.js'
|
||||||
|
import '@mdui/icons/menu.js'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const clientOnlyStore = useClientOnlyStore()
|
||||||
|
const api = useApiStore()
|
||||||
|
const themeScheme = useThemeStore()
|
||||||
|
const mobileScreen = useMobileScreen()
|
||||||
|
const routeStore = useRouteStore()
|
||||||
|
|
||||||
|
const drawerOpen = ref(false)
|
||||||
|
const drawer = ref(null)
|
||||||
|
const closeDrawer = ref(true)
|
||||||
|
|
||||||
|
let progressTimer = null
|
||||||
|
|
||||||
|
onServerPrefetch(async () => {
|
||||||
|
await api.init()
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
mobileScreen.reCal()
|
||||||
|
if(!mobileScreen.isMobile) drawerOpen.value = true
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
themeScheme.applyTheme()
|
||||||
|
await api.init()
|
||||||
|
clientOnlyStore.setClient()
|
||||||
|
new MutationObserver(() => {
|
||||||
|
if (document.documentElement.style.width.includes('calc')) {
|
||||||
|
document.documentElement.style.width = '';
|
||||||
|
}
|
||||||
|
}).observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
|
||||||
|
watch(() => mobileScreen.isMobile, (newV, oldV) => {
|
||||||
|
if( oldV && !newV ) nextTick(() => drawer.value.open = true)
|
||||||
|
if( !oldV && newV ) nextTick(() => drawer.value.open = false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<header><ClientOnly>
|
||||||
|
<mdui-top-app-bar style="background-color: rgb(var(--mdui-color-primary-container));" scroll-behavior="shrink elevate">
|
||||||
|
<mdui-button-icon @click="drawer.open = !drawer.open">
|
||||||
|
<mdui-icon-menu></mdui-icon-menu>
|
||||||
|
</mdui-button-icon>
|
||||||
|
<!--<mdui-button-icon @click="$router.back()" v-if="$route.path != '/'">
|
||||||
|
<mdui-icon-arrow-back></mdui-icon-arrow-back>
|
||||||
|
</mdui-button-icon>-->
|
||||||
|
<mdui-top-app-bar-title style="color: rgb(var(--mdui-color-on-surface-variant))">{{ routeStore.title }}</mdui-top-app-bar-title>
|
||||||
|
<mdui-circular-progress v-if="routeStore.showProgress" :value='routeStore.progress' :max='routeStore.progressMax'></mdui-circular-progress>
|
||||||
|
<div style="flex-grow: 1"></div>
|
||||||
|
<mdui-button-icon @click="themeScheme.switchMode()">
|
||||||
|
<mdui-icon-light-mode style="color: rgb(var(--mdui-color-on-surface-variant))"></mdui-icon-light-mode>
|
||||||
|
</mdui-button-icon>
|
||||||
|
</mdui-top-app-bar>
|
||||||
|
<template #ssr>
|
||||||
|
<h1>{{ routeStore.title }}</h1>
|
||||||
|
</template></ClientOnly></header>
|
||||||
|
<nav><ClientOnly>
|
||||||
|
<mdui-navigation-drawer ref='drawer' :open="drawerOpen" close-on-overlay-click close-on-esc style="margin-top: 64px;">
|
||||||
|
<mdui-list style="height: 100%; background-color: rgb(var(--mdui-color-surface-variant));">
|
||||||
|
<KeepAlive><mdui-list-item
|
||||||
|
v-for="item in routeStore.allRoutes"
|
||||||
|
:key="item.path"
|
||||||
|
@click="routeStore.drawerPress(item.path); if (mobileScreen.isMobile && closeDrawer ) drawer.open = false"
|
||||||
|
:class="{ 'active-item' : item.path == $route.path }"
|
||||||
|
>{{ item.name }}</mdui-list-item></KeepAlive>
|
||||||
|
<div v-if="mobileScreen.isMobile" class="bottom"><mdui-switch @change="closeDrawer = $event.target.checked" :checked="closeDrawer"></mdui-switch><div style="margin-left: 8px">切换页面时关闭菜单</div></div>
|
||||||
|
</mdui-list>
|
||||||
|
</mdui-navigation-drawer>
|
||||||
|
<template #ssr>
|
||||||
|
<ul>
|
||||||
|
<li v-for="item in routeStore.allRoutes"
|
||||||
|
:key="item.path"
|
||||||
|
:class="{ 'active-item' : item.path == $route.path }"
|
||||||
|
>{{ item.name }}</li>
|
||||||
|
</ul>
|
||||||
|
</template></ClientOnly>
|
||||||
|
</nav>
|
||||||
|
<main :class="{ 'mdui-prose' : clientOnlyStore.isClient }">
|
||||||
|
<RouterView v-slot="{ Component }">
|
||||||
|
<component :is="Component" />
|
||||||
|
</RouterView>
|
||||||
|
</main>
|
||||||
|
<footer></footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.active-item {
|
||||||
|
background-color: rgb(var(--mdui-color-surface-container-high));
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgb(var(--mdui-color-surface-variant));
|
||||||
|
bottom: 16px;
|
||||||
|
left: 16px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
42
src/assets/typescale.css
Normal file
42
src/assets/typescale.css
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
.typescale-body-large {
|
||||||
|
line-height: var(--mdui-typescale-body-large-line-height);
|
||||||
|
font-size: var(--mdui-typescale-body-large-size);
|
||||||
|
letter-spacing: var(--mdui-typescale-body-large-tracking);
|
||||||
|
font-weight: var(--mdui-typescale-body-large-weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.typescale-body-small {
|
||||||
|
line-height: var(--mdui-typescale-body-small-line-height);
|
||||||
|
font-size: var(--mdui-typescale-body-small-size);
|
||||||
|
letter-spacing: var(--mdui-typescale-body-small-tracking);
|
||||||
|
font-weight: var(--mdui-typescale-body-small-weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.typescale-label-small {
|
||||||
|
line-height: var(--mdui-typescale-label-small-line-height);
|
||||||
|
font-size: var(--mdui-typescale-label-small-size);
|
||||||
|
letter-spacing: var(--mdui-typescale-label-small-tracking);
|
||||||
|
font-weight: var(--mdui-typescale-label-small-weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.typescale-headline-small {
|
||||||
|
line-height: var(--mdui-typescale-headline-small-line-height);
|
||||||
|
font-size: var(--mdui-typescale-headline-small-size);
|
||||||
|
letter-spacing: var(--mdui-typescale-headline-small-tracking);
|
||||||
|
font-weight: var(--mdui-typescale-headline-small-weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.typescale-headline-large {
|
||||||
|
line-height: var(--mdui-typescale-headline-large-line-height);
|
||||||
|
font-size: var(--mdui-typescale-headline-large-size);
|
||||||
|
letter-spacing: var(--mdui-typescale-headline-large-tracking);
|
||||||
|
font-weight: var(--mdui-typescale-headline-large-weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.typescale-headline-medium {
|
||||||
|
line-height: var(--mdui-typescale-headline-medium-line-height);
|
||||||
|
font-size: var(--mdui-typescale-headline-medium-size);
|
||||||
|
letter-spacing: var(--mdui-typescale-headline-medium-tracking);
|
||||||
|
font-weight: var(--mdui-typescale-headline-medium-weight);
|
||||||
|
}
|
||||||
|
|
||||||
1
src/components/ClientOnly.vue
Symbolic link
1
src/components/ClientOnly.vue
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../ssr/ClientOnly.vue
|
||||||
46
src/components/FunAnimation.vue
Normal file
46
src/components/FunAnimation.vue
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||||
|
const frames = [`
|
||||||
|
✋ 😭 🤚
|
||||||
|
\\ | /
|
||||||
|
++++
|
||||||
|
++
|
||||||
|
++
|
||||||
|
/ \\`,
|
||||||
|
`
|
||||||
|
|
||||||
|
✋ 😭 🤚
|
||||||
|
\\ | /
|
||||||
|
++++
|
||||||
|
/ \\
|
||||||
|
`]
|
||||||
|
|
||||||
|
const currentFrame = ref(frames[0])
|
||||||
|
let animationInterval = null
|
||||||
|
let count = ref(0)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 初始显示第一帧
|
||||||
|
currentFrame.value = frames[0]
|
||||||
|
// 设置动画间隔
|
||||||
|
animationInterval = setInterval(() => {
|
||||||
|
currentFrame.value = currentFrame.value === frames[0]
|
||||||
|
? frames[1]
|
||||||
|
: frames[0]
|
||||||
|
}, 250)
|
||||||
|
})
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
// 组件卸载前清除定时器
|
||||||
|
if (animationInterval) {
|
||||||
|
clearInterval(animationInterval)
|
||||||
|
animationInterval = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const incr = () => count.value++
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<pre style="line-height:1 ;" class="no-select" @click="incr() > 5 ? $router.push('/developer') : null">
|
||||||
|
{{ currentFrame }}
|
||||||
|
</pre>
|
||||||
|
</template>
|
||||||
18
src/entry-client.js
Normal file
18
src/entry-client.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { decompress } from 'compress-json'
|
||||||
|
import './main.css'
|
||||||
|
import { createApp } from './main'
|
||||||
|
|
||||||
|
const { app, pinia, router } = createApp()
|
||||||
|
|
||||||
|
if (window.__PINIA_STATE__) {
|
||||||
|
pinia.state.value = decompress(window.__PINIA_STATE__)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.__INITIAL_STATE__) {
|
||||||
|
window.__INITIAL_STATE__ = decompress(window.__INITIAL_STATE__)
|
||||||
|
}
|
||||||
|
|
||||||
|
router.isReady().then(() => {
|
||||||
|
app.mount('#app')
|
||||||
|
})
|
||||||
|
|
||||||
19
src/entry-server.js
Normal file
19
src/entry-server.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { renderToWebStream, renderToString } from 'vue/server-renderer'
|
||||||
|
import { createApp } from './main'
|
||||||
|
|
||||||
|
export async function render(_url, cookies, host) {
|
||||||
|
const { app, pinia, router } = createApp()
|
||||||
|
await router.push(_url)
|
||||||
|
await router.isReady()
|
||||||
|
const ctx = {
|
||||||
|
cookies,
|
||||||
|
host,
|
||||||
|
initialState: {}
|
||||||
|
}
|
||||||
|
// await new Promise((resolve) => setTimeout(resolve, 0))
|
||||||
|
const stream = renderToWebStream(app, ctx)
|
||||||
|
const initialState = ctx.initialStat
|
||||||
|
const piniaState = pinia.state.value
|
||||||
|
return { stream, initialState, piniaState }
|
||||||
|
}
|
||||||
|
|
||||||
35
src/main.css
Normal file
35
src/main.css
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
@import 'mdui/mdui.css';
|
||||||
|
/* @import './assets/typescale.css'; */
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Roboto,Noto Sans SC,PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,"Microsoft Sans Serif",WenQuanYi Micro Hei,sans-serif;
|
||||||
|
background-color: rgb(var(--mdui-color-background));
|
||||||
|
transition: opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear);
|
||||||
|
}
|
||||||
|
|
||||||
|
mdui-card {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0px 16px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
mdui-text-field {
|
||||||
|
margin: 8px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warn {
|
||||||
|
background-color: rgb(var(--mdui-color-error));
|
||||||
|
color: rgb(var(--mdui-color-on-error));
|
||||||
|
}
|
||||||
|
|
||||||
|
.warn-text {
|
||||||
|
color: rgb(var(--mdui-color-error));
|
||||||
|
}
|
||||||
|
|
||||||
|
.pre-break {
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-select {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
20
src/main.js
Normal file
20
src/main.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { createSSRApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
import { createSSRRouter } from './router.js'
|
||||||
|
|
||||||
|
import ClientOnly from './ssr/ClientOnly.vue'
|
||||||
|
import Hr from './ui/BetterHr.vue'
|
||||||
|
|
||||||
|
export function createApp() {
|
||||||
|
const app = createSSRApp(App)
|
||||||
|
const router = createSSRRouter()
|
||||||
|
const pinia = createPinia()
|
||||||
|
app.use(pinia)
|
||||||
|
app.use(router)
|
||||||
|
app
|
||||||
|
.component('ClientOnly', ClientOnly)
|
||||||
|
.component('Hr', Hr)
|
||||||
|
return { app, pinia, router }
|
||||||
|
}
|
||||||
49
src/router.js
Normal file
49
src/router.js
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import { createMemoryHistory, createWebHistory, createRouter } from 'vue-router'
|
||||||
|
|
||||||
|
export function createSSRRouter() {
|
||||||
|
const router = createRouter({
|
||||||
|
history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
|
||||||
|
routes: [{
|
||||||
|
path: '/',
|
||||||
|
name: '前言',
|
||||||
|
component: () => import('./views/Root.vue'),
|
||||||
|
meta: {
|
||||||
|
title: "首页",
|
||||||
|
order: 1
|
||||||
|
},
|
||||||
|
},{
|
||||||
|
path: '/work/:id',
|
||||||
|
name: '阅读',
|
||||||
|
component: () => import('./views/Work.vue'),
|
||||||
|
meta: {
|
||||||
|
title: "",
|
||||||
|
hidden: true
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
path: '/about',
|
||||||
|
name: '关于',
|
||||||
|
component: () => import('./views/About.vue'),
|
||||||
|
meta: {
|
||||||
|
title: "",
|
||||||
|
order: 2
|
||||||
|
},
|
||||||
|
},{
|
||||||
|
path: '/developer',
|
||||||
|
name: '开发人员选项',
|
||||||
|
component: () => import('./views/Developer.vue'),
|
||||||
|
meta: {
|
||||||
|
title: "",
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
},{
|
||||||
|
path: '/:catchAll(.*)',
|
||||||
|
name: 'NotFound',
|
||||||
|
component: () => import('./views/fallback/NotFound.vue'),
|
||||||
|
meta: {
|
||||||
|
title: "页面未找到",
|
||||||
|
hidden: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]})
|
||||||
|
return router
|
||||||
|
}
|
||||||
12
src/ssr/ClientOnly.vue
Normal file
12
src/ssr/ClientOnly.vue
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<script setup>
|
||||||
|
import { useClientOnlyStore } from './clientOnlyStore.js'
|
||||||
|
const clientOnlyStore = useClientOnlyStore()
|
||||||
|
</script>
|
||||||
|
<template data-allow-mismatch>
|
||||||
|
<template v-if="clientOnlyStore.isClient" data-allow-mismatch>
|
||||||
|
<slot></slot>
|
||||||
|
</template><template v-else>
|
||||||
|
<slot name="ssr" data-allow-mismatch></slot>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
25
src/ssr/ClientOnly1.vue
Normal file
25
src/ssr/ClientOnly1.vue
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, useSlots } from 'vue'
|
||||||
|
|
||||||
|
const isClient = ref(false)
|
||||||
|
const slots = useSlots()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
isClient.value = true
|
||||||
|
})
|
||||||
|
/*
|
||||||
|
USe:
|
||||||
|
<ClientOnly>
|
||||||
|
<template #ssr>
|
||||||
|
SSR Content
|
||||||
|
</template>
|
||||||
|
Real Content
|
||||||
|
</ClientOnly>
|
||||||
|
*/
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template data-allow-mismatch>
|
||||||
|
<template v-if="isClient" data-allow-mismatch><slot></slot></template>
|
||||||
|
<template v-else><slot name="ssr" data-allow-mismatch></slot></template>
|
||||||
|
</template>
|
||||||
|
|
||||||
11
src/ssr/clientOnlyStore.js
Normal file
11
src/ssr/clientOnlyStore.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { ref } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useClientOnlyStore = defineStore('ClientOnly', () => {
|
||||||
|
const isClient = ref(false)
|
||||||
|
function setClient() { isClient.value = true }
|
||||||
|
return {
|
||||||
|
isClient,
|
||||||
|
setClient
|
||||||
|
}
|
||||||
|
})
|
||||||
9
src/ssr/useInitialState.js
Normal file
9
src/ssr/useInitialState.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export function getInitialState(key) {
|
||||||
|
if (typeof window !== 'undefined' && window.__INITIAL_STATE__) {
|
||||||
|
if (window.__INITIAL_STATE__[key] !== undefined) {
|
||||||
|
let value = window.__INITIAL_STATE__[key]
|
||||||
|
delete window.__INITIAL_STATE__[key]
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
113
src/stores/api.js
Normal file
113
src/stores/api.js
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
import { ref, computed, watch } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { useSSRContext } from 'vue'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
import { objectToQueryString, getCookie, setCookie } from '@/utils.js'
|
||||||
|
|
||||||
|
const apiMapping = {
|
||||||
|
'': ['http://localhost:28001/','/api/']
|
||||||
|
}
|
||||||
|
|
||||||
|
function replaceUrl(url) {
|
||||||
|
return url
|
||||||
|
.replace('{{hostname}}',window.location.hostname)
|
||||||
|
.replace('{{port}}',window.location.port)
|
||||||
|
.replace('{{protocol}}',window.location.protocol)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useApiStore = defineStore('api', () => {
|
||||||
|
let host = import.meta.env.SSR ? useSSRContext().host : window.location.host
|
||||||
|
let entry = apiMapping[host] ? apiMapping[host] : apiMapping['']
|
||||||
|
let endpoint = import.meta.env.SSR ? entry[0] : replaceUrl(entry[1])
|
||||||
|
//console.log('Entry point:', endpoint)
|
||||||
|
var inited = false
|
||||||
|
var initializing = false
|
||||||
|
async function apiGet(url, data) {
|
||||||
|
const realURL = data
|
||||||
|
? `${endpoint}${url}?${objectToQueryString(data)}`
|
||||||
|
: `${endpoint}${url}`
|
||||||
|
try {
|
||||||
|
let start = Date.now()
|
||||||
|
const response = await axios.get(realURL)
|
||||||
|
let stop = Date.now()
|
||||||
|
return {
|
||||||
|
status: response.status,
|
||||||
|
data: response.data,
|
||||||
|
start, stop,
|
||||||
|
duration: stop - start,
|
||||||
|
isSSR: import.meta.env.SSR
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
if (error.response) {
|
||||||
|
return {
|
||||||
|
status: error.response.status,
|
||||||
|
data: error.response.data,
|
||||||
|
isSSR: import.meta.env.SSR
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
status: -1,
|
||||||
|
data: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function apiPost(url, data) {
|
||||||
|
const realURL = `${endpoint}${url}`;
|
||||||
|
try {
|
||||||
|
let start = Date.now()
|
||||||
|
const response = await axios.post(realURL, data, {
|
||||||
|
headers: { 'Content-Type': 'application/json' }
|
||||||
|
})
|
||||||
|
let stop = Date.now()
|
||||||
|
return {
|
||||||
|
status: response.status,
|
||||||
|
data: response.data,
|
||||||
|
start, stop,
|
||||||
|
duration: stop - start,
|
||||||
|
isSSR: import.meta.env.SSR
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
if (error.response) {
|
||||||
|
return {
|
||||||
|
status: error.response.status,
|
||||||
|
data: error.response.data,
|
||||||
|
isSSR: import.meta.env.SSR
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
status: -1,
|
||||||
|
data: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function init() {
|
||||||
|
if (inited) return
|
||||||
|
if (initializing) {
|
||||||
|
while (initializing) {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 100))
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
initializing = true
|
||||||
|
inited = true
|
||||||
|
initializing = false
|
||||||
|
if (!import.meta.env.SSR) {
|
||||||
|
console.log(`[API] Inited! endpoint: ${endpoint}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function reInit(){
|
||||||
|
inited = false
|
||||||
|
await init()
|
||||||
|
}
|
||||||
|
async function getWork(workId) {
|
||||||
|
return await apiGet('work',{ workId })
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
init,
|
||||||
|
reInit,
|
||||||
|
getWork
|
||||||
|
}
|
||||||
|
})
|
||||||
58
src/stores/db.js
Normal file
58
src/stores/db.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import { ref } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
import { openDB } from 'idb';
|
||||||
|
|
||||||
|
export const useDB = defineStore('_db', () => {
|
||||||
|
const dbPromise = openDB('data', 1, {
|
||||||
|
upgrade(db) {
|
||||||
|
const bookmarkStore = db.createObjectStore('bookmarks', {
|
||||||
|
keyPath: 'id',
|
||||||
|
autoIncrement: true,
|
||||||
|
})
|
||||||
|
bookmarkStore.createIndex('by-workId', 'workId');
|
||||||
|
},
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
db: dbPromise
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export const useBookmarkStore = defineStore('bookmark', () => {
|
||||||
|
const db = useDB().db
|
||||||
|
async function getAll(workId) {
|
||||||
|
return (await db).getAllFromIndex('bookmarks', 'by-workId', workId);
|
||||||
|
}
|
||||||
|
async function get(id) {
|
||||||
|
return (await db).get('bookmarks', id);
|
||||||
|
}
|
||||||
|
async function add(workId, index, para, name ) {
|
||||||
|
return (await db).add('bookmarks', {
|
||||||
|
workId, name, para, index
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async function del(id) {
|
||||||
|
(await db).delete('bookmarks', id);
|
||||||
|
}
|
||||||
|
async function delByWork(workId) {
|
||||||
|
(await getAll(workId)).forEach(async (item) => {
|
||||||
|
del(item.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
async function updateName(id, name) {
|
||||||
|
const raw = await get(id)
|
||||||
|
if (raw) {
|
||||||
|
raw.name = name
|
||||||
|
console.log(name)
|
||||||
|
await (await db).put('bookmarks', raw);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
get,
|
||||||
|
add,
|
||||||
|
del,
|
||||||
|
getAll,
|
||||||
|
delByWork,
|
||||||
|
updateName
|
||||||
|
}
|
||||||
|
})
|
||||||
25
src/stores/device.js
Normal file
25
src/stores/device.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { ref } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
import { breakpoint } from 'mdui/functions/breakpoint.js'
|
||||||
|
import { observeResize } from 'mdui/functions/observeResize.js'
|
||||||
|
|
||||||
|
export const useMobileScreen = defineStore('deviceMobileScreen', () => {
|
||||||
|
function _() {
|
||||||
|
if (import.meta.env.SSR) { return false }
|
||||||
|
else { return breakpoint().down('md') ? true : false }
|
||||||
|
}
|
||||||
|
const isMobile = ref(_())
|
||||||
|
if (!import.meta.env.SSR) {
|
||||||
|
const observer = observeResize(document.body, (entry, obs) => {
|
||||||
|
isMobile.value = _()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function reCal() {
|
||||||
|
isMobile.value = _()
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
isMobile,
|
||||||
|
reCal
|
||||||
|
}
|
||||||
|
})
|
||||||
71
src/stores/route.js
Normal file
71
src/stores/route.js
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
import { ref, computed, watch } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
|
||||||
|
export const useRouteStore = defineStore('route', () => {
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
const allRoutes = ref(router.getRoutes()
|
||||||
|
.filter(route => route.meta.hidden !== true)
|
||||||
|
.map(route => ({
|
||||||
|
path: route.path,
|
||||||
|
name: route.name,
|
||||||
|
order: route.meta.order || Number.MAX_SAFE_INTEGER
|
||||||
|
}))
|
||||||
|
.sort((a, b) => (a.order - b.order))
|
||||||
|
)
|
||||||
|
const lastFromDrawer = ref(0)
|
||||||
|
const customTitle = ref(null)
|
||||||
|
const title = computed(() => customTitle.value || route.meta.title || route.name)
|
||||||
|
function drawerPress(target) {
|
||||||
|
if (lastFromDrawer.value == 0) {
|
||||||
|
lastFromDrawer.value = 1
|
||||||
|
router.push(target)
|
||||||
|
} else {
|
||||||
|
router.replace(target)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const progress = ref(0)
|
||||||
|
const progressMax = ref(1)
|
||||||
|
const showProgress = ref(false)
|
||||||
|
if (!import.meta.env.SSR) {
|
||||||
|
watch(title, title => document.title = title)
|
||||||
|
let progressTimer = null
|
||||||
|
router.beforeEach((to, from) => {
|
||||||
|
if (lastFromDrawer.value == 2) {
|
||||||
|
lastFromDrawer.value = 0
|
||||||
|
} else if (lastFromDrawer.value == 1) {
|
||||||
|
lastFromDrawer.value = 2
|
||||||
|
}
|
||||||
|
progress.value = 0
|
||||||
|
progressMax.value = 1
|
||||||
|
showProgress.value = true
|
||||||
|
if (!progressTimer) {
|
||||||
|
progressTimer = setInterval(() => {
|
||||||
|
progress.value += progressMax.value / 10
|
||||||
|
if (progressMax.value <= progress.value) progressMax.value = progressMax.value * 3
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
router.afterEach((to, from) => {
|
||||||
|
if (progressTimer) {
|
||||||
|
showProgress.value = false
|
||||||
|
clearInterval(progressTimer)
|
||||||
|
progressTimer = null
|
||||||
|
}
|
||||||
|
customTitle.value = null
|
||||||
|
if (!import.meta.env.SSR) window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
allRoutes,
|
||||||
|
lastFromDrawer,
|
||||||
|
title,
|
||||||
|
drawerPress,
|
||||||
|
showProgress,
|
||||||
|
progress,
|
||||||
|
progressMax,
|
||||||
|
customTitle
|
||||||
|
}
|
||||||
|
})
|
||||||
38
src/stores/themeScheme.js
Normal file
38
src/stores/themeScheme.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
import { setTheme } from 'mdui/functions/setTheme.js'
|
||||||
|
import { setColorScheme } from 'mdui/functions/setColorScheme.js'
|
||||||
|
|
||||||
|
export const useThemeStore = defineStore('homePage', () => {
|
||||||
|
const mode = ref('auto')
|
||||||
|
const color = ref('#890000')
|
||||||
|
function setColor(target) {
|
||||||
|
if (color.value != target) {
|
||||||
|
color.value = target
|
||||||
|
}
|
||||||
|
setColorScheme(color.value)
|
||||||
|
}
|
||||||
|
function setMode(target) {
|
||||||
|
if (mode.value != target) {
|
||||||
|
mode.value = target
|
||||||
|
}
|
||||||
|
setTheme(mode.value)
|
||||||
|
}
|
||||||
|
function switchMode(callback) {
|
||||||
|
if (mode.value === 'auto' || mode.value === 'light') {
|
||||||
|
mode.value = 'dark'
|
||||||
|
} else {
|
||||||
|
mode.value = 'light'
|
||||||
|
}
|
||||||
|
setMode(mode.value)
|
||||||
|
if (callback) {
|
||||||
|
callback(mode.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function applyTheme() {
|
||||||
|
setColorScheme(color.value)
|
||||||
|
setTheme(mode.value)
|
||||||
|
}
|
||||||
|
return { setColor, setMode, switchMode, applyTheme }
|
||||||
|
})
|
||||||
47
src/stores/workRead.js
Normal file
47
src/stores/workRead.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { ref } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
import { escapeAndFormatText } from '../utils.js'
|
||||||
|
|
||||||
|
import { useApiStore } from '@/stores/api.js'
|
||||||
|
|
||||||
|
export const useWorkReadState = defineStore('workRead', () => {
|
||||||
|
const api = useApiStore()
|
||||||
|
const id = ref(null)
|
||||||
|
const summary = ref(null)
|
||||||
|
const pesud = ref(null)
|
||||||
|
const title = ref(null)
|
||||||
|
const text = ref(null)
|
||||||
|
const publishedTime = ref(null)
|
||||||
|
const state = ref('')
|
||||||
|
function setData(data) {
|
||||||
|
id.value = data.workId
|
||||||
|
title.value = data.title
|
||||||
|
summary.value = [escapeAndFormatText(data.summary)]
|
||||||
|
pesud.value = data.pesud
|
||||||
|
text.value = data.text.split('\n\n')
|
||||||
|
}
|
||||||
|
async function loadWork(target) {
|
||||||
|
if (target == id.value || state.value == 'loading') return
|
||||||
|
state.value = 'loading'
|
||||||
|
const result = await api.getWork(target)
|
||||||
|
if (result.status == 200) {
|
||||||
|
setData(result.data)
|
||||||
|
state.value = 'ready'
|
||||||
|
} else {
|
||||||
|
id.value = target
|
||||||
|
state.value = import.meta.env.SSR ? 'ssrnotfound' : 'notfound'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
title,
|
||||||
|
summary,
|
||||||
|
pesud,
|
||||||
|
text,
|
||||||
|
publishedTime,
|
||||||
|
state,
|
||||||
|
setData,
|
||||||
|
loadWork
|
||||||
|
}
|
||||||
|
})
|
||||||
25
src/texts/about.md
Normal file
25
src/texts/about.md
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
# 关于
|
||||||
|
|
||||||
|
这是什么, 有口舍用 ?
|
||||||
|
|
||||||
|
概述
|
||||||
|
---
|
||||||
|
一个 AO3 镜像站
|
||||||
|
|
||||||
|
## 作者 (1)
|
||||||
|
---
|
||||||
|
- [UnknownMp](https://www.unknownmp.top)
|
||||||
|
<mdui-avatar src="https://cdn.unknownmp.top/website/logo.jpg"></mdui-avatar>
|
||||||
|
|
||||||
|
|
||||||
|
组件库与工具链
|
||||||
|
---
|
||||||
|
- MDUI 2
|
||||||
|
- Vue
|
||||||
|
- Vite
|
||||||
|
|
||||||
|
其他
|
||||||
|
---
|
||||||
|
本站支持 "Server Side Rendering" by Vite SSR
|
||||||
|
|
||||||
|
CDN by Cloudflare (赛博佛祖😭)
|
||||||
39
src/texts/intro.md
Normal file
39
src/texts/intro.md
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
# 欢迎来到 AO3 Mirror! 👋👋
|
||||||
|
|
||||||
|
一个基于重构渲染的 AO3 镜像站
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 这是什么🤨
|
||||||
|
|
||||||
|
本网站是对 ArchiveOfOurOwn (AO3) 的一个镜像网站
|
||||||
|
|
||||||
|
但是不同于直接转发所有页面内容, 本站点会先解析原始 AO3 页面内容, 然后重新组合, 这使得我们有更大的操作空间
|
||||||
|
|
||||||
|
## 怎么使用🤔
|
||||||
|
|
||||||
|
现在这个站点还处于测试阶段, 只有一种使用方法 *(后面会扩展)*
|
||||||
|
|
||||||
|
首先你需要一个 AO3 链接
|
||||||
|
比如:
|
||||||
|
|
||||||
|
https://archiveofourown.org/works/114514
|
||||||
|
|
||||||
|
接着将前面的部分替换为本站点的链接 (保留数字ID部分):
|
||||||
|
即:
|
||||||
|
|
||||||
|
https://ao3.unknownmp.top/work/114514
|
||||||
|
|
||||||
|
这里的数字ID即为`114514`
|
||||||
|
|
||||||
|
浏览器打开它, OK 你会用了🤓👆!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 功能与特性 🤗
|
||||||
|
|
||||||
|
- ✅ 预览
|
||||||
|
- ✅ 书签 (本地)
|
||||||
|
- 📝 历史记录 (本地)
|
||||||
|
- 📝 搜索
|
||||||
|
|
||||||
11
src/ui/BetterHr.vue
Normal file
11
src/ui/BetterHr.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<script setup>import 'mdui/components/divider.js'</script>
|
||||||
|
<template>
|
||||||
|
<ClientOnly><mdui-divider class='hr-divider'></mdui-divider>
|
||||||
|
<template #ssr><hr/></template></ClientOnly>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.hr-divider {
|
||||||
|
margin: 8px 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
112
src/utils.js
Normal file
112
src/utils.js
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
import { snackbar } from 'mdui/functions/snackbar.js'
|
||||||
|
import { alert } from 'mdui/functions/alert.js'
|
||||||
|
|
||||||
|
export function mduiSnackbar(message) {
|
||||||
|
snackbar({
|
||||||
|
message: message,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function mduiAlert(title,desc,callback = null,confirmText = "OK") {
|
||||||
|
alert({
|
||||||
|
headline: title,
|
||||||
|
description: desc,
|
||||||
|
confirmText: confirmText,
|
||||||
|
closeOnOverlayClick: true,
|
||||||
|
closeOnEsc: true,
|
||||||
|
onConfirm: () => { if (callback) callback() }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getQueryVariable(variable) {
|
||||||
|
var query = window.location.search.substring(1);
|
||||||
|
var vars = query.split("&")
|
||||||
|
for (var i=0;i<vars.length;i++) {
|
||||||
|
var pair = vars[i].split("=")
|
||||||
|
if(pair[0] == variable){return pair[1]}
|
||||||
|
}
|
||||||
|
return(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const escapeHtml = (text) =>
|
||||||
|
text
|
||||||
|
.replace(/&/g, "&") // 转义 &
|
||||||
|
.replace(/</g, "<") // 转义 <
|
||||||
|
.replace(/>/g, ">") // 转义 >
|
||||||
|
.replace(/"/g, """) // 转义 "
|
||||||
|
.replace(/'/g, "'"); // 转义 '
|
||||||
|
|
||||||
|
export function escapeAndFormatText(input) {
|
||||||
|
let escapedText = escapeHtml(input);
|
||||||
|
escapedText = escapedText.replace(/ /g, " ");
|
||||||
|
escapedText = escapedText.replace(/\t/g, "  ");
|
||||||
|
escapedText = escapedText.replace(/\n/g, "<br/>");
|
||||||
|
return escapedText;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCookie(name) {
|
||||||
|
const cookieArr = document.cookie.split(";")
|
||||||
|
for (let i = 0; i < cookieArr.length; i++) {
|
||||||
|
const cookiePair = cookieArr[i].trim()
|
||||||
|
if (cookiePair.startsWith(name + "=")) {
|
||||||
|
return cookiePair.substring(name.length + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setCookie(name, value, days = 3650) {
|
||||||
|
var expires = ""
|
||||||
|
if (days) {
|
||||||
|
var date = new Date()
|
||||||
|
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||||
|
expires = "; expires=" + date.toUTCString()
|
||||||
|
}
|
||||||
|
document.cookie = name + "=" + value + expires + "; path=/";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function objectToQueryString(obj, parentKey = '') {
|
||||||
|
const parts = []
|
||||||
|
for (let key in obj) {
|
||||||
|
if (!Object.prototype.hasOwnProperty.call(obj, key)) continue
|
||||||
|
let value = obj[key]
|
||||||
|
let newKey = parentKey ? `${parentKey}[${key}]` : key
|
||||||
|
if (typeof value === 'object' && value !== null) {
|
||||||
|
parts.push(objectToQueryString(value, newKey))
|
||||||
|
} else {
|
||||||
|
parts.push(encodeURIComponent(newKey) + '=' + encodeURIComponent(value))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return parts.join('&')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatUnixTimestamp(unixTimestamp, timeZone) {
|
||||||
|
const date = new Date(unixTimestamp * 1000); // 将 UNIX 时间戳转换为毫秒
|
||||||
|
const options = {
|
||||||
|
timeZone: timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone, // 使用指定时区或浏览器本地时区
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit',
|
||||||
|
hour12: false, // 24小时制
|
||||||
|
};
|
||||||
|
const formatter = new Intl.DateTimeFormat('en-US', options);
|
||||||
|
const parts = formatter.formatToParts(date);
|
||||||
|
const formatMap = {};
|
||||||
|
parts.forEach(({ type, value }) => {
|
||||||
|
formatMap[type] = value;
|
||||||
|
});
|
||||||
|
return `${formatMap.year}-${formatMap.month}-${formatMap.day} ${formatMap.hour}:${formatMap.minute}:${formatMap.second}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isMobileDeviceByUA() {
|
||||||
|
const ua = navigator.userAgent || navigator.vendor || window.opera;
|
||||||
|
return /android/i.test(ua) ||
|
||||||
|
/iphone/i.test(ua) ||
|
||||||
|
/ipod/i.test(ua) ||
|
||||||
|
/ipad/i.test(ua) ||
|
||||||
|
/blackberry/i.test(ua) ||
|
||||||
|
/windows phone/i.test(ua);
|
||||||
|
}
|
||||||
19
src/views/About.vue
Normal file
19
src/views/About.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<script setup>
|
||||||
|
import About from '../texts/about.md'
|
||||||
|
import FunAnimation from '../components/FunAnimation.vue'
|
||||||
|
|
||||||
|
import 'mdui/components/avatar.js'
|
||||||
|
/*import { onBeforeMount, onMounted, onUnmounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
|
||||||
|
console.log('Setup')
|
||||||
|
onBeforeMount(() => console.log('Before mount'))
|
||||||
|
onMounted(() => console.log('Mounted'))
|
||||||
|
onDeactivated(() => console.log('Deactivated'))
|
||||||
|
onActivated(() => console.log('Activated'))
|
||||||
|
onBeforeUnmount(() => console.log('Before unmount'))
|
||||||
|
onUnmounted(() => console.log('Unmounted'))*/
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<About/>
|
||||||
|
<FunAnimation />
|
||||||
|
</template>
|
||||||
|
|
||||||
74
src/views/Developer.vue
Normal file
74
src/views/Developer.vue
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
import { useApiStore } from '@/stores/api.js'
|
||||||
|
import { useRouteStore } from '../stores/route.js'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const api = useApiStore()
|
||||||
|
const routeStore = useRouteStore()
|
||||||
|
|
||||||
|
const ua = ref('')
|
||||||
|
const language = ref('')
|
||||||
|
const platform = ref('')
|
||||||
|
const screenSize = ref('')
|
||||||
|
const viewportSize = ref('')
|
||||||
|
const pixelRatio = ref(1)
|
||||||
|
const touchSupport = ref(false)
|
||||||
|
const visibility = ref('')
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
ua.value = navigator.userAgent
|
||||||
|
language.value = navigator.language
|
||||||
|
platform.value = navigator.platform
|
||||||
|
screenSize.value = `${screen.width} × ${screen.height}`
|
||||||
|
viewportSize.value = `${window.innerWidth} × ${window.innerHeight}`
|
||||||
|
pixelRatio.value = window.devicePixelRatio
|
||||||
|
touchSupport.value = 'ontouchstart' in window
|
||||||
|
visibility.value = document.visibilityState
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1 class="warn-text">注意本页面仅为测试用!</h1>
|
||||||
|
<blockquote>
|
||||||
|
当然如果你是乱点那个唐鬼小人进来的, 这就是个彩蛋? (神金
|
||||||
|
</blockquote>
|
||||||
|
<Hr />
|
||||||
|
<section>
|
||||||
|
<h2>页面信息</h2>
|
||||||
|
<h3>可见路由信息:</h3>
|
||||||
|
<pre>{{ routeStore.allRoutes }}</pre>
|
||||||
|
</section>
|
||||||
|
<Hr />
|
||||||
|
<ClientOnly>
|
||||||
|
<section>
|
||||||
|
<h2>浏览器信息</h2>
|
||||||
|
<dl>
|
||||||
|
<dt>User-Agent:</dt>
|
||||||
|
<dd>{{ ua }}</dd>
|
||||||
|
<dt>语言:</dt>
|
||||||
|
<dd>{{ language }}</dd>
|
||||||
|
<dt>平台:</dt>
|
||||||
|
<dd>{{ platform }}</dd>
|
||||||
|
<dt>屏幕尺寸:</dt>
|
||||||
|
<dd>{{ screenSize }}</dd>
|
||||||
|
<dt>视口尺寸:</dt>
|
||||||
|
<dd>{{ viewportSize }}</dd>
|
||||||
|
<dt>像素比:</dt>
|
||||||
|
<dd>{{ pixelRatio }}</dd>
|
||||||
|
<dt>是否触屏设备:</dt>
|
||||||
|
<dd>{{ touchSupport ? '是' : '否' }}</dd>
|
||||||
|
<dt>页面可见性状态:</dt>
|
||||||
|
<dd>{{ visibility }}</dd>
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
<Hr />
|
||||||
|
</ClientOnly>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
24
src/views/Mask.vue
Normal file
24
src/views/Mask.vue
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onServerPrefetch, onBeforeMount} from 'vue'
|
||||||
|
import { useRouter, useRoute, RouterView } from 'vue-router'
|
||||||
|
const router = useRouter()
|
||||||
|
import { useApiStore } from '@/stores/api.js'
|
||||||
|
const api = useApiStore()
|
||||||
|
|
||||||
|
onServerPrefetch(async () => {
|
||||||
|
// Load data
|
||||||
|
})
|
||||||
|
onBeforeMount(() => {
|
||||||
|
// Re apply data
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
// Render other
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
Padding! No content cause hydration mismatch!
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
72
src/views/Root.vue
Normal file
72
src/views/Root.vue
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
import 'mdui/components/text-field.js'
|
||||||
|
import 'mdui/components/button.js'
|
||||||
|
|
||||||
|
import Intro from '../texts/intro.md'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const src = ref('')
|
||||||
|
const srcText = ref(null)
|
||||||
|
const err = ref(false)
|
||||||
|
|
||||||
|
function convert(from) {
|
||||||
|
if( Number(from) ) {
|
||||||
|
return {
|
||||||
|
id: Number(from)
|
||||||
|
}
|
||||||
|
} else if (from.includes('https://archiveofourown.org/works/')) {
|
||||||
|
const sid = from.split('https://archiveofourown.org/works/')[1];
|
||||||
|
if ( sid ) {
|
||||||
|
const id = Number(sid)
|
||||||
|
if (id) {
|
||||||
|
return {
|
||||||
|
type: 's',
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
type: null,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onConvert() {
|
||||||
|
const { id, cid } = convert(src.value)
|
||||||
|
if (id == null) {
|
||||||
|
err.value = true
|
||||||
|
srcText.value?.focus()
|
||||||
|
} else {
|
||||||
|
err.value = false
|
||||||
|
if (cid) router.push(`/work/${id}/${cid}`)
|
||||||
|
else router.push(`/work/${id}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<img style="display: block; margin: 0px auto 10px;" height="200px" alt="logo" src="/favicon.svg" />
|
||||||
|
<Intro />
|
||||||
|
<br/><Hr/>
|
||||||
|
<section id="converter">
|
||||||
|
<h2>链接转换</h2>
|
||||||
|
<p>输入完整链接或者 ID</p>
|
||||||
|
<ClientOnly>
|
||||||
|
<mdui-text-field variant="filled" label="链接" placeholder="https://archiveofourown.org/works/114514" @input="src = $event.target.value" ref='srcText'>
|
||||||
|
<span v-if='err' slot="helper" class='warn-text'>链接格式错误!</span>
|
||||||
|
</mdui-text-field><br/>
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="flex-grow: 1"></div>
|
||||||
|
<mdui-button @click='onConvert'>-></mdui-button>
|
||||||
|
</div>
|
||||||
|
{{ src }}
|
||||||
|
<template #ssr>
|
||||||
|
Padding...
|
||||||
|
</template></ClientOnly>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
257
src/views/Work.vue
Normal file
257
src/views/Work.vue
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onServerPrefetch, onBeforeUnmount, watch, nextTick } from 'vue'
|
||||||
|
import { useRouter, useRoute, RouterView } from 'vue-router'
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
import { useWorkReadState } from '@/stores/workRead.js'
|
||||||
|
const workReadState = useWorkReadState()
|
||||||
|
|
||||||
|
import { useRouteStore } from '@/stores/route.js'
|
||||||
|
const routeState = useRouteStore()
|
||||||
|
|
||||||
|
import { useBookmarkStore } from '../stores/db.js'
|
||||||
|
|
||||||
|
import 'mdui/components/list.js'
|
||||||
|
import 'mdui/components/list-item.js'
|
||||||
|
import 'mdui/components/dialog.js'
|
||||||
|
import 'mdui/components/divider.js'
|
||||||
|
import 'mdui/components/linear-progress.js'
|
||||||
|
import 'mdui/components/fab.js'
|
||||||
|
import 'mdui/components/button.js'
|
||||||
|
import 'mdui/components/dropdown.js'
|
||||||
|
import 'mdui/components/menu.js'
|
||||||
|
import 'mdui/components/menu-item.js'
|
||||||
|
|
||||||
|
import '@mdui/icons/bookmark.js'
|
||||||
|
|
||||||
|
import { confirm } from 'mdui/functions/confirm.js'
|
||||||
|
import { snackbar } from 'mdui/functions/snackbar.js'
|
||||||
|
import { prompt } from 'mdui/functions/prompt.js'
|
||||||
|
|
||||||
|
import { mduiSnackbar } from '../utils.js'
|
||||||
|
|
||||||
|
const fabExtended = ref(false)
|
||||||
|
const content = ref(null)
|
||||||
|
const readPercent = ref(0)
|
||||||
|
const bookmarkDialog = ref(null)
|
||||||
|
const bookmarks = ref([])
|
||||||
|
const bookmarkMenu = ref(false)
|
||||||
|
const bookmarkSelect = ref(null)
|
||||||
|
|
||||||
|
let readIndex = 0
|
||||||
|
let lastPercent = 0
|
||||||
|
let lastCloseTimer = null
|
||||||
|
let isObserver = null
|
||||||
|
let bookmarkStore = null
|
||||||
|
let paragraphs = []
|
||||||
|
let currentParagraph = null
|
||||||
|
|
||||||
|
async function addBookmark() {
|
||||||
|
if (currentParagraph) {
|
||||||
|
const id = await bookmarkStore.add(workReadState.id, readIndex, currentParagraph.textContent.slice(0,20), '')
|
||||||
|
bookmarks.value.push(await bookmarkStore.get(id))
|
||||||
|
snackbar({
|
||||||
|
message: `在第 ${readIndex} 段 (${readPercent.value}%) 处新建了一个书签`,
|
||||||
|
action: "编辑",
|
||||||
|
onActionClick: () => {
|
||||||
|
prompt({
|
||||||
|
headline: "修改书签",
|
||||||
|
description: "新名字:",
|
||||||
|
confirmText: "完成",
|
||||||
|
cancelText: "算了",
|
||||||
|
onConfirm: (value) => {
|
||||||
|
bookmarkStore.updateName(id, value)
|
||||||
|
bookmarks.value[bookmarks.value.length - 1].name = value
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function jumpTo(index) {
|
||||||
|
const value = bookmarks.value[index].index
|
||||||
|
const target = paragraphs[value]
|
||||||
|
bookmarkDialog.value.open = false
|
||||||
|
await nextTick()
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'end',
|
||||||
|
inline: 'nearest'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function delAllBookmark() {
|
||||||
|
confirm({
|
||||||
|
headline: '警告',
|
||||||
|
description: '这会清空所有书签! 不可恢复!',
|
||||||
|
confirmText: '我明白',
|
||||||
|
cancelText: '算了',
|
||||||
|
closeOnOverlayClick: true,
|
||||||
|
closeOnEsc: true,
|
||||||
|
onConfirm: () => {
|
||||||
|
bookmarkStore.delByWork(workReadState.id)
|
||||||
|
bookmarks.value = []
|
||||||
|
mduiSnackbar('书签清空辣!')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function editBookmark() {
|
||||||
|
prompt({
|
||||||
|
headline: "修改书签",
|
||||||
|
description: "新名字:",
|
||||||
|
confirmText: "完成",
|
||||||
|
cancelText: "算了",
|
||||||
|
onConfirm: (value) => {
|
||||||
|
bookmarkStore.updateName(bookmarkSelect.value.bk.id, value)
|
||||||
|
bookmarks.value[bookmarkSelect.value.index].name = value
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openBookmarkMenu(bk, index) {
|
||||||
|
bookmarkSelect.value = { bk, index };
|
||||||
|
bookmarkMenu.value.open = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteBookmark() {
|
||||||
|
if (bookmarkSelect.value) {
|
||||||
|
bookmarkStore.del(bookmarkSelect.value.bk.id)
|
||||||
|
bookmarks.value.splice(bookmarkSelect.value.index)
|
||||||
|
bookmarkSelect.value = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onServerPrefetch(async () => {
|
||||||
|
await workReadState.loadWork(route.params.id)
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
bookmarkStore = useBookmarkStore()
|
||||||
|
if (workReadState.state != 'ssrnotfound') await workReadState.loadWork(route.params.id)
|
||||||
|
if (workReadState.state == 'ready') {
|
||||||
|
routeState.customTitle = workReadState.title
|
||||||
|
const paraCount = workReadState.text.length - 2
|
||||||
|
isObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
currentParagraph = entry.target
|
||||||
|
readIndex = entry.target.dataset.index;
|
||||||
|
readPercent.value = parseInt(readIndex / paraCount * 100)
|
||||||
|
if (lastPercent == 0) {
|
||||||
|
lastPercent = readPercent.value
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (Math.abs(lastPercent - readPercent.value) > 10) {
|
||||||
|
lastPercent = readPercent.value
|
||||||
|
fabExtended.value = true
|
||||||
|
if (lastCloseTimer) clearTimeout(lastCloseTimer)
|
||||||
|
lastCloseTimer = setTimeout(() => {
|
||||||
|
fabExtended.value = false
|
||||||
|
lastPercent = readPercent.value
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, {
|
||||||
|
threshold: 0.5
|
||||||
|
})
|
||||||
|
await nextTick()
|
||||||
|
paragraphs = content.value?.querySelectorAll('p');
|
||||||
|
paragraphs?.forEach(p => isObserver.observe(p));
|
||||||
|
bookmarks.value = await bookmarkStore.getAll(workReadState.id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
isObserver.disconnect();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ClientOnly>
|
||||||
|
<template v-if="workReadState.state == 'loading'">
|
||||||
|
加载中...<br/>
|
||||||
|
<mdui-linear-progress></mdui-linear-progress>
|
||||||
|
</template>
|
||||||
|
<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
|
||||||
|
<h2>文章不存在...</h2>
|
||||||
|
是不是链接没有复制完全?<br/>
|
||||||
|
ID: {{workReadState.id}}<br/>
|
||||||
|
<a @click="$router.back()">返回</a>
|
||||||
|
</template>
|
||||||
|
<template v-if="workReadState.state == 'ready'">
|
||||||
|
<article>
|
||||||
|
<h1 style="margin: auto">{{ workReadState.title }}</h1>
|
||||||
|
<h4>{{ workReadState.pesud }}</h4>
|
||||||
|
<blockquote>
|
||||||
|
<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
|
||||||
|
</blockquote>
|
||||||
|
<Hr/>
|
||||||
|
<div ref='content'>
|
||||||
|
<p v-for="(para, index) in workReadState.text" :key="para" :data-index="index">{{ para }}</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<mdui-fab class="mdui-fab" :extended="fabExtended" @click="bookmarkDialog.open = true">
|
||||||
|
<mdui-icon-bookmark slot="icon"></mdui-icon-bookmark>
|
||||||
|
{{ readPercent }}%
|
||||||
|
</mdui-fab>
|
||||||
|
<mdui-dialog ref='bookmarkDialog' close-on-overlay-click>
|
||||||
|
<span slot="headline">书签</span>
|
||||||
|
<span slot="description">
|
||||||
|
共 {{ bookmarks.length }} 个
|
||||||
|
<br/>
|
||||||
|
点击跳转, 长按条目以 更新/删除
|
||||||
|
</span>
|
||||||
|
<mdui-list v-if="bookmarks.length" style="max-width: 50vh; max-height: 90vh;">
|
||||||
|
<mdui-list-item
|
||||||
|
v-for="(bk, index) in bookmarks"
|
||||||
|
@click="jumpTo(index)"
|
||||||
|
@contextmenu.prevent="openBookmarkMenu(bk, index)"
|
||||||
|
>
|
||||||
|
{{ bk.name || bk.para }}
|
||||||
|
</mdui-list-item>
|
||||||
|
</mdui-list>
|
||||||
|
<span v-else>还没有书签</span>
|
||||||
|
<mdui-dropdown ref='bookmarkMenu' trigger="manual" open-on-pointer>
|
||||||
|
<span slot="trigger" />
|
||||||
|
<mdui-menu>
|
||||||
|
<mdui-menu-item @click="deleteBookmark()">删除</mdui-menu-item>
|
||||||
|
<mdui-menu-item @click="editBookmark()">编辑</mdui-menu-item>
|
||||||
|
</mdui-menu>
|
||||||
|
</mdui-dropdown>
|
||||||
|
<mdui-button slot="action" @click="delAllBookmark" variant="filled">清空</mdui-button>
|
||||||
|
<mdui-button slot="action" @click="addBookmark" variant="text">新建</mdui-button>
|
||||||
|
</mdui-dialog>
|
||||||
|
</template>
|
||||||
|
<template #ssr>
|
||||||
|
<template v-if="workReadState.state == 'notfound' || workReadState.state == 'ssrnotfound'">
|
||||||
|
<h2>文章不存在...</h2>
|
||||||
|
是不是链接没有复制完全?<br/>
|
||||||
|
ID: {{workReadState.id}}<br/>
|
||||||
|
<a @click="$router.back()">返回</a>
|
||||||
|
</template>
|
||||||
|
<template v-if="workReadState.state == 'ready'">
|
||||||
|
<h1>{{ workReadState.title }}</h1>
|
||||||
|
<h2>{{ workReadState.pesud }}</h2>
|
||||||
|
<blockquote>
|
||||||
|
<p v-for="para in workReadState.summary" :key="para" v-html='para'></p>
|
||||||
|
</blockquote>
|
||||||
|
<Hr/>
|
||||||
|
<p v-for="para in workReadState.text.slice(0, 10)" :key="para">{{ para }}</p>
|
||||||
|
</template>
|
||||||
|
</template></ClientOnly>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.mdui-fab {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 16px; /* 调整垂直位置 */
|
||||||
|
right: 16px; /* 调整水平位置 */
|
||||||
|
z-index: 1000; /* 确保悬浮按钮在其他内容上方 */
|
||||||
|
animation: slideInFromRight var(--mdui-motion-duration-medium2) var(--mdui-motion-easing-standard); /* 动画时长和缓动效果 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
src/views/fallback/NotFound.vue
Normal file
11
src/views/fallback/NotFound.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<script setup>
|
||||||
|
import 'mdui/components/divider.js'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1>404 - 页面未找到</h1>
|
||||||
|
<p>抱歉，您访问的页面不存在。</p>
|
||||||
|
<router-link to="/">返回主页</router-link>
|
||||||
|
<Hr/>
|
||||||
|
Page of AO3 Mirror
|
||||||
|
</template>
|
||||||
98
vite.config.js
Normal file
98
vite.config.js
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||||
|
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||||
|
import { VitePWA } from 'vite-plugin-pwa';
|
||||||
|
import markdown from 'vite-plugin-md'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue({
|
||||||
|
template: {
|
||||||
|
compilerOptions: {
|
||||||
|
isCustomElement: (tag) => tag.startsWith('mdui') || tag.startsWith('swiper')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
include: [/\.vue$/, /\.md$/],
|
||||||
|
}),
|
||||||
|
vueJsx(),
|
||||||
|
vueDevTools(),
|
||||||
|
markdown()
|
||||||
|
/*VitePWA({
|
||||||
|
name: '墨宇留香 - 渐进式 Web App 版本',
|
||||||
|
short_name: '墨宇留香',
|
||||||
|
start_url: '/index.html',
|
||||||
|
display: 'standalone',
|
||||||
|
"background_color": "#808080",
|
||||||
|
"theme_color": "#7F3C5C",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/favicon.png",
|
||||||
|
"sizes": "507x580",
|
||||||
|
"type": "image/png"
|
||||||
|
}]})*/
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
/*manualChunks(id) {
|
||||||
|
if (id.includes('node_modules')) {
|
||||||
|
return 'vendor';
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
manualChunks(id) {
|
||||||
|
if (id.includes('node_modules')) {
|
||||||
|
const modules = id.toString().split('node_modules/')[1];
|
||||||
|
const moduleNames = modules.split('/');
|
||||||
|
const moduleName = moduleNames[0]
|
||||||
|
return `vendor/${moduleName}`
|
||||||
|
}
|
||||||
|
if (id.includes('src/views')) {
|
||||||
|
const modules = id.toString().split('src/views/')[1];
|
||||||
|
const moduleName = modules.split('.')[0];
|
||||||
|
return `page/${moduleName}`;
|
||||||
|
}
|
||||||
|
if (id.includes('src/components')) {
|
||||||
|
const modules = id.toString().split('src/components/')[1];
|
||||||
|
const moduleName = modules.split('.')[0];
|
||||||
|
return `component/${moduleName}`;
|
||||||
|
}
|
||||||
|
if (id.includes('src/texts')) {
|
||||||
|
const modules = id.toString().split('src/texts/')[1];
|
||||||
|
const moduleName = modules.split('.')[0];
|
||||||
|
return `text/${moduleName}`;
|
||||||
|
}
|
||||||
|
if (id.includes('src/stores')) {
|
||||||
|
const modules = id.toString().split('src/stores/')[1];
|
||||||
|
const moduleName = modules.split('.')[0];
|
||||||
|
return `store/${moduleName}`;
|
||||||
|
}
|
||||||
|
if (id.includes('src/router.js')) {
|
||||||
|
return `router`;
|
||||||
|
}
|
||||||
|
if (id.includes('src/utils.js')) {
|
||||||
|
return `utils`;
|
||||||
|
}
|
||||||
|
if (id.includes('src/App.vue')) {
|
||||||
|
return `App`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
minify: true,
|
||||||
|
assetsInlineLimit: 0,
|
||||||
|
reportCompressedSize: false
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
allowedHosts: ['ao3.unknownmp.top'],
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user