pqc
/
socket-io-admin-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

支持了任意路径

This commit is contained in:
Pan Qiancheng 2025-05-09 11:05:38 +08:00
parent 63524a12db
commit 9f56943238
12 changed files with 163 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/dist/img/logo-dark.23e26193.svg vendored
View File

@ -1,4 +0,0 @@
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
<circle cx="128" cy="128" r="114" stroke="#FFF" stroke-width="20" fill="none" />
<path d="M97.637 121.69c27.327-22.326 54.058-45.426 81.98-67.097-14.646 22.505-29.708 44.711-44.354 67.215-12.562.06-25.123.06-37.626-.119zM120.737 134.132c12.621 0 25.183 0 37.745.179-27.505 22.206-54.117 45.484-82.099 67.096 14.646-22.505 29.708-44.77 44.354-67.275z" fill="#FFF"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 477 B

4
ui/dist/img/logo-light.9e8ec0c3.svg vendored
View File

@ -1,4 +0,0 @@
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
<circle cx="128" cy="128" r="114" stroke="#010101" stroke-width="20" fill="none" />
<path d="M97.637 121.69c27.327-22.326 54.058-45.426 81.98-67.097-14.646 22.505-29.708 44.711-44.354 67.215-12.562.06-25.123.06-37.626-.119zM120.737 134.132c12.621 0 25.183 0 37.745.179-27.505 22.206-54.117 45.484-82.099 67.096 14.646-22.505 29.708-44.77 44.354-67.275z" fill="#010101"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 481 B

24
ui/dist/index.html vendored
View File

@ -1 +1,23 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/socket-admin/favicon.png"><title>Socket.IO Admin For OAK</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"><link href="/socket-admin/css/app.cc95923b.css" rel="preload" as="style"><link href="/socket-admin/css/chunk-vendors.9f55d012.css" rel="preload" as="style"><link href="/socket-admin/js/app.8f417b7c.js" rel="preload" as="script"><link href="/socket-admin/js/chunk-vendors.1619c6bb.js" rel="preload" as="script"><link href="/socket-admin/css/chunk-vendors.9f55d012.css" rel="stylesheet"><link href="/socket-admin/css/app.cc95923b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Socket.IO Admin For OAK doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/socket-admin/js/chunk-vendors.1619c6bb.js"></script><script src="/socket-admin/js/app.8f417b7c.js"></script></body></html> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.png"><title>Socket.IO Admin For OAK</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"><script>(function() {
const rawUrl= window.location.href.split('#')[0]
const basePath = rawUrl.endsWith('/') ? rawUrl : rawUrl + '/';
// 处理basePath
window.__BASE_PATH__ = basePath;
})();</script><script>(function(){
const assetsList = ['css/app.cc95923b.css','js/app.b14a0147.js','css/chunk-vendors.9f55d012.css','js/chunk-vendors.1619c6bb.js']//inject
const basePath = window.__BASE_PATH__;
// 如果是js开头则创建script标签，css开头则创建link标签
assetsList.forEach((item) => {
const tag = item.startsWith('js') ? 'script' : 'link';
const el = document.createElement(tag);
if (tag === 'script') {
el.src = basePath + item;
el.async = true;
} else {
el.rel = 'stylesheet';
el.href = basePath + item;
}
document.head.appendChild(el);
});
})()</script></head><script>// Additional script to handle dynamic loading
console.log("Dynamic loading script initialized.");</script><body><noscript><strong>We're sorry but Socket.IO Admin For OAK doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>window.__TIMESTAMP__ = 1746759862617;</script></body></html>

2
ui/dist/js/app.8f417b7c.js vendored
View File

File diff suppressed because one or more lines are too long

1
ui/dist/js/app.8f417b7c.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
ui/dist/js/app.b14a0147.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
ui/dist/js/app.b14a0147.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

32
ui/public/index.html
View File

@ -8,7 +8,39 @@
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<script>
(function() {
const rawUrl= window.location.href.split('#')[0]
const basePath = rawUrl.endsWith('/') ? rawUrl : rawUrl + '/';
// 处理basePath
window.__BASE_PATH__ = basePath;
})();
</script>
<script>
(function(){
const assetsList = []//inject
const basePath = window.__BASE_PATH__;
// 如果是js开头则创建script标签，css开头则创建link标签
assetsList.forEach((item) => {
const tag = item.startsWith('js') ? 'script' : 'link';
const el = document.createElement(tag);
if (tag === 'script') {
el.src = basePath + item;
el.async = true;
} else {
el.rel = 'stylesheet';
el.href = basePath + item;
}
document.head.appendChild(el);
});
})()
</script>
</head> </head>
<script>
// Additional script to handle dynamic loading
console.log("Dynamic loading script initialized.");
</script>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

4
ui/src/components/AppBar.vue
View File

@ -69,8 +69,8 @@ export default {
...mapState({ ...mapState({
logoSrc: (state) => logoSrc: (state) =>
state.config.darkTheme state.config.darkTheme
? require("../assets/logo-dark.svg") ? "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4NCgk8Y2lyY2xlIGN4PSIxMjgiIGN5PSIxMjgiIHI9IjExNCIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIwIiBmaWxsPSJub25lIiAvPg0KCTxwYXRoIGQ9Ik05Ny42MzcgMTIxLjY5YzI3LjMyNy0yMi4zMjYgNTQuMDU4LTQ1LjQyNiA4MS45OC02Ny4wOTctMTQuNjQ2IDIyLjUwNS0yOS43MDggNDQuNzExLTQ0LjM1NCA2Ny4yMTUtMTIuNTYyLjA2LTI1LjEyMy4wNi0zNy42MjYtLjExOXpNMTIwLjczNyAxMzQuMTMyYzEyLjYyMSAwIDI1LjE4MyAwIDM3Ljc0NS4xNzktMjcuNTA1IDIyLjIwNi01NC4xMTcgNDUuNDg0LTgyLjA5OSA2Ny4wOTYgMTQuNjQ2LTIyLjUwNSAyOS43MDgtNDQuNzcgNDQuMzU0LTY3LjI3NXoiIGZpbGw9IiNGRkYiLz4NCjwvc3ZnPg0K"
: require("../assets/logo-light.svg"), : "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4NCgk8Y2lyY2xlIGN4PSIxMjgiIGN5PSIxMjgiIHI9IjExNCIgc3Ryb2tlPSIjMDEwMTAxIiBzdHJva2Utd2lkdGg9IjIwIiBmaWxsPSJub25lIiAvPg0KCTxwYXRoIGQ9Ik05Ny42MzcgMTIxLjY5YzI3LjMyNy0yMi4zMjYgNTQuMDU4LTQ1LjQyNiA4MS45OC02Ny4wOTctMTQuNjQ2IDIyLjUwNS0yOS43MDggNDQuNzExLTQ0LjM1NCA2Ny4yMTUtMTIuNTYyLjA2LTI1LjEyMy4wNi0zNy42MjYtLjExOXpNMTIwLjczNyAxMzQuMTMyYzEyLjYyMSAwIDI1LjE4MyAwIDM3Ljc0NS4xNzktMjcuNTA1IDIyLjIwNi01NC4xMTcgNDUuNDg0LTgyLjA5OSA2Ny4wOTYgMTQuNjQ2LTIyLjUwNSAyOS43MDgtNDQuNzcgNDQuMzU0LTY3LjI3NXoiIGZpbGw9IiMwMTAxMDEiLz4NCjwvc3ZnPg==",
serverUrl: (state) => state.connection.serverUrl, serverUrl: (state) => state.connection.serverUrl,
connected: (state) => state.connection.connected, connected: (state) => state.connection.connected,
}), }),

8
ui/vue.config.js
View File

@ -1,11 +1,17 @@
const DynamicPublicPathPlugin = require("./webpack.plugins/dynamic-public-path");
const Base64ImagePlugin = require("./webpack.plugins/inline-base64-loader");
module.exports = { module.exports = {
publicPath: "/socket-admin/", // 修改为带有基本路径 publicPath: "", // 修改为带有基本路径
configureWebpack: { configureWebpack: {
node: false, // remove buffer polyfill node: false, // remove buffer polyfill
plugins: [new DynamicPublicPathPlugin(), new Base64ImagePlugin()],
}, },
chainWebpack: (config) => { chainWebpack: (config) => {
config.plugin("html").tap((args) => { config.plugin("html").tap((args) => {
args[0].inject = false; // ❗️禁用 Vue CLI 自动注入资源
args[0].template = "./public/index.html"; // 使用你自己的模板
args[0].title = "Socket.IO Admin For OAK"; args[0].title = "Socket.IO Admin For OAK";
return args; return args;
}); });

55
ui/webpack.plugins/dynamic-public-path.js Normal file
View File

@ -0,0 +1,55 @@
const path = require("path");
class DynamicPublicPathPlugin {
apply(compiler) {
compiler.hooks.emit.tapAsync(
"DynamicPublicPathPlugin",
(compilation, callback) => {
const assets = Object.keys(compilation.assets).filter(
(file) => file.endsWith(".js") || file.endsWith(".css")
);
const scriptTags = assets
.map((file) => {
// const ext = path.extname(file);
// if (ext === ".js") {
// return `<script src="\${window.__BASE_PATH__}${file}"></script>`;
// } else if (ext === ".css") {
// return `<link href="\${window.__BASE_PATH__}${file}" rel="stylesheet">`;
// }
// return "";
return `'${file}'`;
})
.join(",");
console.log(scriptTags);
const htmlAsset = compilation.assets["index.html"];
if (htmlAsset) {
const htmlContent = htmlAsset.source().toString();
const replacedHtml = htmlContent.replace(
"[]//inject",
`[${scriptTags}]//inject`
);
const timestamp = new Date().getTime();
const finalHtml = replacedHtml.replace(
"</body>",
`<script>window.__TIMESTAMP__ = ${timestamp};</script></body>`
);
console.log(finalHtml);
compilation.assets["index.html"] = {
source: () => finalHtml,
size: () => finalHtml.length,
};
}
callback();
}
);
}
}
module.exports = DynamicPublicPathPlugin;

41
ui/webpack.plugins/inline-base64-loader.js Normal file
View File

@ -0,0 +1,41 @@
const path = require("path");
const mime = require("mime");
const fs = require("fs");
class Base64ImagePlugin {
constructor(options = {}) {
this.test = options.test || /\.(png|jpe?g|gif|svg)$/;
}
apply(compiler) {
compiler.hooks.normalModuleFactory.tap("Base64ImagePlugin", (factory) => {
factory.hooks.beforeResolve.tapAsync(
"Base64ImagePlugin",
(data, callback) => {
if (!data) return callback();
if (this.test.test(data.request)) {
const filePath = path.resolve(data.context, data.request);
fs.readFile(filePath, (err, content) => {
if (err) return callback();
const mimeType = mime.getType(filePath);
const base64 = `module.exports = "data:${mimeType};base64,${content.toString(
"base64"
)}"`;
data.loaders = [
{
loader: path.resolve(__dirname, "inline-base64-loader.js"),
options: { base64 },
},
];
callback(null, data);
});
} else {
callback(null, data);
}
}
);
});
}
}
module.exports = Base64ImagePlugin;