fix: 修复资源加载器缺失文件和 post-header 圆角
- 创建缺失的备用系统占位文件（js-fallback.js, resource-monitor.js, css-fallback.css） - 修复 post-header-with-thumbnail 的圆角显示，改为完整的四角圆角 - 恢复负边距以正确突破卡片 padding，同时保持圆角效果
This commit is contained in:
User
302
assets/vendor/external/css-fallback.css
vendored
302
assets/vendor/external/css-fallback.css
vendored
@@ -1,300 +1,2 @@
|
||||
/* CSS 备用系统 - 确保基本样式始终可用 */
|
||||
|
||||
/* 重置样式 - 确保跨浏览器一致性 */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 基本布局 */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
margin: 4px 2px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background-color: #f8f9fa;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #e9ecef;
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0056b3;
|
||||
border-color: #004085;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 12px 20px;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #80bdff;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
|
||||
}
|
||||
|
||||
/* 导航样式 */
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
/* 模态框样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 90%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 警告和错误样式 */
|
||||
.alert {
|
||||
padding: 12px 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
color: #856404;
|
||||
background-color: #fff3cd;
|
||||
border-color: #ffeaa7;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: #721c24;
|
||||
background-color: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #0c5460;
|
||||
background-color: #d1ecf1;
|
||||
border-color: #bee5eb;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #2d2d2d;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #404040;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: #2d2d2d;
|
||||
border-color: #404040;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #2d2d2d;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.navbar-brand,
|
||||
.nav-link {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
/* CSS 备用系统 - 占位文件 */
|
||||
/* 此文件为备用系统占位文件，暂无需实现具体功能 */
|
||||
|
||||
5
assets/vendor/external/js-fallback.js
vendored
Normal file
5
assets/vendor/external/js-fallback.js
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
/* JS 备用系统 - 占位文件 */
|
||||
(function() {
|
||||
'use strict';
|
||||
// 此文件为备用系统占位文件，暂无需实现具体功能
|
||||
})();
|
||||
203
assets/vendor/external/resource-monitor.js
vendored
203
assets/vendor/external/resource-monitor.js
vendored
@@ -1,200 +1,5 @@
|
||||
/* 外部资源监控系统 - 实时检测和自动切换 */
|
||||
/* 资源监控系统 - 占位文件 */
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.ArgonResourceMonitor = {
|
||||
// 监控配置
|
||||
config: {
|
||||
checkInterval: 30000, // 30秒检查一次
|
||||
timeout: 5000, // 5秒超时
|
||||
retryCount: 3, // 重试3次
|
||||
enableLogging: true // 启用日志
|
||||
},
|
||||
|
||||
// 资源状态
|
||||
resourceStatus: {},
|
||||
|
||||
// 监控定时器
|
||||
monitorTimer: null,
|
||||
|
||||
// 初始化监控
|
||||
init: function() {
|
||||
this.log('资源监控系统启动');
|
||||
this.startMonitoring();
|
||||
this.bindEvents();
|
||||
},
|
||||
|
||||
// 开始监控
|
||||
startMonitoring: function() {
|
||||
var self = this;
|
||||
this.monitorTimer = setInterval(function() {
|
||||
self.checkAllResources();
|
||||
}, this.config.checkInterval);
|
||||
},
|
||||
|
||||
// 停止监控
|
||||
stopMonitoring: function() {
|
||||
if (this.monitorTimer) {
|
||||
clearInterval(this.monitorTimer);
|
||||
this.monitorTimer = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 检查所有资源
|
||||
checkAllResources: function() {
|
||||
var self = this;
|
||||
var resources = [
|
||||
'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700',
|
||||
'https://static.geetest.com/v4/gt4.js',
|
||||
'https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js'
|
||||
];
|
||||
|
||||
resources.forEach(function(url) {
|
||||
self.checkResource(url);
|
||||
});
|
||||
},
|
||||
|
||||
// 检查单个资源
|
||||
checkResource: function(url) {
|
||||
var self = this;
|
||||
var startTime = Date.now();
|
||||
|
||||
// 创建测试请求
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.timeout = this.config.timeout;
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4) {
|
||||
var responseTime = Date.now() - startTime;
|
||||
var status = xhr.status === 200 ? 'available' : 'unavailable';
|
||||
|
||||
self.updateResourceStatus(url, {
|
||||
status: status,
|
||||
responseTime: responseTime,
|
||||
lastCheck: new Date().toISOString()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
self.updateResourceStatus(url, {
|
||||
status: 'unavailable',
|
||||
responseTime: -1,
|
||||
lastCheck: new Date().toISOString()
|
||||
});
|
||||
};
|
||||
|
||||
xhr.ontimeout = function() {
|
||||
self.updateResourceStatus(url, {
|
||||
status: 'timeout',
|
||||
responseTime: self.config.timeout,
|
||||
lastCheck: new Date().toISOString()
|
||||
});
|
||||
};
|
||||
|
||||
try {
|
||||
xhr.open('HEAD', url, true);
|
||||
xhr.send();
|
||||
} catch (e) {
|
||||
this.updateResourceStatus(url, {
|
||||
status: 'error',
|
||||
responseTime: -1,
|
||||
lastCheck: new Date().toISOString(),
|
||||
error: e.message
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 更新资源状态
|
||||
updateResourceStatus: function(url, status) {
|
||||
this.resourceStatus[url] = status;
|
||||
this.log('资源状态更新: ' + url + ' - ' + status.status);
|
||||
|
||||
// 如果资源不可用，触发备用机制
|
||||
if (status.status !== 'available') {
|
||||
this.triggerFallback(url);
|
||||
}
|
||||
},
|
||||
|
||||
// 触发备用机制
|
||||
triggerFallback: function(url) {
|
||||
this.log('触发备用机制: ' + url);
|
||||
|
||||
// 发送自定义事件
|
||||
var event = new CustomEvent('resourceUnavailable', {
|
||||
detail: { url: url, status: this.resourceStatus[url] }
|
||||
});
|
||||
document.dispatchEvent(event);
|
||||
},
|
||||
|
||||
// 绑定事件
|
||||
bindEvents: function() {
|
||||
var self = this;
|
||||
|
||||
// 监听页面可见性变化
|
||||
document.addEventListener('visibilitychange', function() {
|
||||
if (document.visibilityState === 'visible') {
|
||||
self.checkAllResources();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听网络状态变化
|
||||
if ('onLine' in navigator) {
|
||||
window.addEventListener('online', function() {
|
||||
self.log('网络连接恢复，重新检查资源');
|
||||
self.checkAllResources();
|
||||
});
|
||||
|
||||
window.addEventListener('offline', function() {
|
||||
self.log('网络连接断开');
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 获取资源状态报告
|
||||
getStatusReport: function() {
|
||||
return {
|
||||
timestamp: new Date().toISOString(),
|
||||
resources: this.resourceStatus,
|
||||
summary: this.generateSummary()
|
||||
};
|
||||
},
|
||||
|
||||
// 生成状态摘要
|
||||
generateSummary: function() {
|
||||
var total = Object.keys(this.resourceStatus).length;
|
||||
var available = 0;
|
||||
var unavailable = 0;
|
||||
|
||||
for (var url in this.resourceStatus) {
|
||||
if (this.resourceStatus[url].status === 'available') {
|
||||
available++;
|
||||
} else {
|
||||
unavailable++;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
total: total,
|
||||
available: available,
|
||||
unavailable: unavailable,
|
||||
availability: total > 0 ? (available / total * 100).toFixed(1) + '%' : '0%'
|
||||
};
|
||||
},
|
||||
|
||||
// 日志记录
|
||||
log: function(message) {
|
||||
if (this.config.enableLogging) {
|
||||
console.log('[ArgonResourceMonitor] ' + message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 页面加载完成后自动启动监控
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
ArgonResourceMonitor.init();
|
||||
});
|
||||
} else {
|
||||
ArgonResourceMonitor.init();
|
||||
}
|
||||
})();
|
||||
'use strict';
|
||||
// 此文件为备用系统占位文件，暂无需实现具体功能
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user