因为后台接口少了统计接口,所以这里需要手动后台添加。目录在安装目录下面的/var/Widget/Contents/Attachment
这个目录, 然后编辑Admin.php。复制以下代码即可。
<?php
namespace Widget\Contents\Attachment;
use Typecho\Config;
use Typecho\Db;
use Typecho\Db\Exception;
use Typecho\Db\Query;
use Typecho\Widget\Helper\PageNavigator\Box;
use Widget\Base\Contents;
use Typecho\Common;
if (!defined('__TYPECHO_ROOT_DIR__')) {
exit;
}
/**
* 文件管理列表组件
*
* @category typecho
* @package Widget
* @copyright Copyright (c) 2008 Typecho team (http://www.typecho.org)
* @license GNU General Public License 2.0
*/
class Admin extends Contents
{
/**
* 用于计算数值的语句对象
*
* @var Query
*/
private $countSql;
/**
* 所有文章个数
*
* @var integer
*/
private $total = false;
/**
* 当前页
*
* @var integer
*/
private $currentPage;
/**
* 执行函数
*
* @return void
* @throws Exception|\Typecho\Widget\Exception
*/
public function execute()
{
$this->parameter->setDefault('pageSize=20');
$this->currentPage = $this->request->get('page', 1);
/** 构建基础查询 */
$select = $this->select()->where('table.contents.type = ?', 'attachment');
/** 如果具有编辑以上权限,可以查看所有文件,反之只能查看自己的文件 */
if (!$this->user->pass('editor', true)) {
$select->where('table.contents.authorId = ?', $this->user->uid);
}
/** 过滤标题 */
if (null != ($keywords = $this->request->filter('search')->keywords)) {
$args = [];
$keywordsList = explode(' ', $keywords);
$args[] = implode(' OR ', array_fill(0, count($keywordsList), 'table.contents.title LIKE ?'));
foreach ($keywordsList as $keyword) {
$args[] = '%' . $keyword . '%';
}
call_user_func_array([$select, 'where'], $args);
}
/** 给计算数目对象赋值,克隆对象 */
$this->countSql = clone $select;
/** 提交查询 */
$select->order('table.contents.created', Db::SORT_DESC)
->page($this->currentPage, $this->parameter->pageSize);
$this->db->fetchAll($select, [$this, 'push']);
}
/**
* 输出分页
*
* @return void
* @throws Exception|\Typecho\Widget\Exception
*/
public function pageNav()
{
$query = $this->request->makeUriByRequest('page={page}');
/** 使用盒状分页 */
$nav = new Box(
false === $this->total ? $this->total = $this->size($this->countSql) : $this->total,
$this->currentPage,
$this->parameter->pageSize,
$query
);
$nav->render('«', '»');
}
/**
* 所属文章
*
* @return Config
* @throws Exception
*/
protected function ___parentPost(): Config
{
return new Config($this->db->fetchRow(
$this->select()->where('table.contents.cid = ?', $this->parentId)->limit(1)
));
}
/**
* 获取附件的 URL 地址
*
* @return string
*/
protected function ___attachmentUrl(): string
{
if (!empty($this->attachment) && !empty($this->attachment->path)) {
// 从 path 字段构建 URL
$path = $this->attachment->path;
// 移除开头的斜杠(如果有的话)
$path = ltrim($path, '/');
return $this->options->siteUrl . $path;
}
// 如果 path 不存在,尝试从 text 字段解析
if (!empty($this->___attachment())) {
$attachment = $this->___attachment();
if (!empty($attachment['path'])) {
$path = ltrim($attachment['path'], '/');
return $this->options->siteUrl . $path;
}
}
return '';
}
/**
* 解析附件信息
*
* @return array
*/
protected function ___attachment(): array
{
if (!empty($this->text)) {
$attachment = @unserialize($this->text);
if (is_array($attachment)) {
return $attachment;
}
}
return [];
}
/**
* 重写 permalink 方法,使用解析后的 URL
*
* @return string
*/
protected function ___permalink(): string
{
return $this->___attachmentUrl();
}
/**
* 获取统计信息
*
* @return array
* @throws Exception
*/
public function getStats(): array
{
$select = $this->select()->where('table.contents.type = ?', 'attachment');
/** 如果具有编辑以上权限,可以查看所有文件,反之只能查看自己的文件 */
if (!$this->user->pass('editor', true)) {
$select->where('table.contents.authorId = ?', $this->user->uid);
}
// 总文件数
$total = $this->size(clone $select);
// 图片文件数
$imageSelect = clone $select;
$imageSelect->join('table.fields', 'table.contents.cid = table.fields.cid', Db::LEFT_JOIN)
->where('table.fields.name = ?', 'mime')
->where('table.fields.str_value LIKE ?', 'image/%');
$imageCount = $this->size($imageSelect);
// 未归档文件数
$unattachedSelect = clone $select;
$unattachedSelect->where('table.contents.parent = ?', 0);
$unattachedCount = $this->size($unattachedSelect);
return [
'total' => $total,
'images' => $imageCount,
'unattached' => $unattachedCount
];
}
/**
* 获取总文件数
*
* @return int
* @throws Exception
*/
public function getTotalCount(): int
{
$select = $this->select()->where('table.contents.type = ?', 'attachment');
/** 如果具有编辑以上权限,可以查看所有文件,反之只能查看自己的文件 */
if (!$this->user->pass('editor', true)) {
$select->where('table.contents.authorId = ?', $this->user->uid);
}
return $this->size($select);
}
/**
* 获取图片文件数
*
* @return int
* @throws Exception
*/
public function getImageCount(): int
{
$select = $this->select()->where('table.contents.type = ?', 'attachment');
/** 如果具有编辑以上权限,可以查看所有文件,反之只能查看自己的文件 */
if (!$this->user->pass('editor', true)) {
$select->where('table.contents.authorId = ?', $this->user->uid);
}
// 通过 MIME 类型过滤图片
$select->where('table.contents.text LIKE ?', '%image/%');
return $this->size($select);
}
/**
* 获取未归档文件数
*
* @return int
* @throws Exception
*/
public function getUnattachedCount(): int
{
$select = $this->select()->where('table.contents.type = ?', 'attachment');
/** 如果具有编辑以上权限,可以查看所有文件,反之只能查看自己的文件 */
if (!$this->user->pass('editor', true)) {
$select->where('table.contents.authorId = ?', $this->user->uid);
}
// 未归档文件(parent = 0)
$select->where('table.contents.parent = ?', 0);
return $this->size($select);
}
}
通过查看后台路径可以得知是manage-medias.php这个文件,所以更改一下这个文件就可以了。更改前注意文件备份。
<?php
include 'common.php';
include 'header.php';
include 'menu.php';
$stat = \Widget\Stat::alloc();
$attachments = \Widget\Contents\Attachment\Admin::alloc();
// 获取统计信息
$totalCount = $attachments->getTotalCount();
$imageCount = $attachments->getImageCount();
$unattachedCount = $attachments->getUnattachedCount();
// 获取PHP上传限制
$phpMaxFilesize = function_exists('ini_get') ? trim(ini_get('upload_max_filesize')) : 0;
if (preg_match("/^([0-9]+)([a-z]{1,2})$/i", $phpMaxFilesize, $matches)) {
$phpMaxFilesize = strtolower($matches[1] . $matches[2] . (1 == strlen($matches[2]) ? 'b' : ''));
}
?>
<style>
/* 上传区域样式 */
.upload-section {
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 20px;
margin: 20px 0;
display: none;
}
.upload-section.show {
display: block;
}
.upload-section h3 {
margin: 0 0 15px 0;
padding: 0;
font-size: 16px;
color: #333;
}
.upload-controls {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 15px;
}
/* 改为链接样式 */
.upload-link {
color: #007cba;
text-decoration: underline;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s;
}
.upload-link:hover {
color: #005a87;
text-decoration: none;
}
.upload-link i {
font-size: 16px;
}
.upload-hint {
color: #666;
font-size: 13px;
}
.upload-area {
border: 2px dashed #ddd;
border-radius: 6px;
padding: 30px;
text-align: center;
background: #fafafa;
transition: all 0.3s;
margin-top: 10px;
}
.upload-area.dragover {
border-color: #007cba;
background: #f0f8ff;
}
.upload-area-text {
color: #666;
margin-bottom: 10px;
}
.browse-link {
color: #007cba;
text-decoration: underline;
cursor: pointer;
}
.browse-link:hover {
color: #005a87;
}
/* 上传进度条 */
.upload-progress {
display: none;
margin-top: 15px;
}
.progress-bar {
width: 100%;
height: 20px;
background: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #007cba;
width: 0%;
transition: width 0.3s;
}
.progress-text {
text-align: center;
font-size: 12px;
color: #666;
margin-top: 5px;
}
.media-stats {
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
}
.media-stats h3 {
margin: 0 0 15px 0;
padding: 0;
font-size: 16px;
color: #666;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
}
.stat-item {
text-align: center;
padding: 10px;
background: #f8f9fa;
border-radius: 4px;
}
.stat-number {
font-size: 24px;
font-weight: bold;
color: #007cba;
margin-bottom: 5px;
}
.stat-label {
font-size: 13px;
color: #666;
}
/* 预览列样式 */
.preview-cell {
text-align: center;
}
.media-preview-img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 4px;
border: 1px solid #ddd;
cursor: pointer;
transition: transform 0.2s ease;
}
.media-preview-img:hover {
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.media-preview-icon {
font-size: 24px;
color: #999;
}
/* 保持原有样式 */
.typecho-list-operate {
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
}
.typecho-pager {
margin-top: 20px;
text-align: center;
}
/* 图片预览模态框样式 */
.modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
backdrop-filter: blur(5px);
}
.modal-content {
position: relative;
margin: 5% auto;
padding: 20px;
width: 90%;
max-width: 900px;
max-height: 90vh;
text-align: center;
}
.modal-image {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.close {
position: absolute;
top: 10px;
right: 25px;
color: #fff;
font-size: 35px;
font-weight: bold;
cursor: pointer;
z-index: 10001;
}
.close:hover {
color: #ccc;
}
.modal-title {
color: white;
margin-top: 10px;
font-size: 16px;
font-weight: normal;
}
/* 上传按钮样式 - 与清理按钮统一 */
.btn-upload {
background: #28a745;
border-color: #28a745;
color: white;
margin-left: 10px;
}
.btn-upload:hover {
background: #218838;
border-color: #1e7e34;
}
/* 取消按钮样式 */
#cancelUploadBtn {
margin-left: 10px;
}
/* 隐藏的文件输入框 */
#fileInput {
display: none;
}
/* 响应式设计 */
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.modal-content {
width: 95%;
margin: 10% auto;
}
.modal-image {
max-height: 70vh;
}
.upload-controls {
flex-direction: column;
align-items: stretch;
}
.btn-upload {
margin-left: 0;
margin-top: 5px;
}
}
</style>
<div class="main">
<div class="body container">
<?php include 'page-title.php'; ?>
<div class="row typecho-page-main" role="main">
<div class="col-mb-12">
<!-- 统计信息 -->
<div class="media-stats">
<h3>媒体文件统计</h3>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-number"><?php echo $totalCount; ?></div>
<div class="stat-label">总文件数</div>
</div>
<div class="stat-item">
<div class="stat-number"><?php echo $imageCount; ?></div>
<div class="stat-label">图片文件</div>
</div>
<div class="stat-item">
<div class="stat-number"><?php echo $stat->publishedPostsNum; ?></div>
<div class="stat-label">文章数</div>
</div>
<div class="stat-item">
<div class="stat-number"><?php echo $unattachedCount; ?></div>
<div class="stat-label">未归档文件</div>
</div>
</div>
</div>
<div class="typecho-list-operate clearfix">
<form method="get">
<div class="operate">
<label><i class="sr-only"><?php _e('全选'); ?></i><input type="checkbox"
class="typecho-table-select-all"/></label>
<div class="btn-group btn-drop">
<button class="btn dropdown-toggle btn-s" type="button"><i
class="sr-only"><?php _e('操作'); ?></i><?php _e('选中项'); ?> <i
class="i-caret-down"></i></button>
<ul class="dropdown-menu">
<li><a lang="<?php _e('你确认要删除这些文件吗?'); ?>"
href="<?php $security->index('/action/contents-attachment-edit?do=delete'); ?>"><?php _e('删除'); ?></a>
</li>
</ul>
<button class="btn btn-s btn-warn btn-operate"
href="<?php $security->index('/action/contents-attachment-edit?do=clear'); ?>"
lang="<?php _e('您确认要清理未归档的文件吗?'); ?>"><?php _e('清理未归档文件'); ?></button>
<!--<button type="button" class="btn btn-s btn-upload" id="toggleUploadBtn">-->
<!-- <?php _e('上传文件'); ?>-->
<!--</button>-->
<!-- 修改这里:添加条件显示 -->
<button type="button" class="btn btn-s btn-upload" id="toggleUploadBtn">
<?php _e('上传文件'); ?>
</button>
<button type="button" class="btn btn-s" id="cancelUploadBtn" style="display: none;">
<?php _e('取消上传'); ?>
</button>
</div>
</div>
<div class="search" role="search">
<?php if ('' != $request->keywords): ?>
<a href="<?php $options->adminUrl('manage-medias.php'); ?>"><?php _e('« 取消筛选'); ?></a>
<?php endif; ?>
<input type="text" class="text-s" placeholder="<?php _e('请输入关键字'); ?>"
value="<?php echo $request->filter('html')->keywords; ?>"<?php if ('' == $request->keywords): ?> onclick="value='';name='keywords';" <?php else: ?> name="keywords"<?php endif; ?>/>
<button type="submit" class="btn btn-s"><?php _e('筛选'); ?></button>
</div>
</form>
</div><!-- end .typecho-list-operate -->
<!-- 上传区域 - 默认隐藏 -->
<div class="upload-section" id="uploadSection">
<h3><?php _e('上传文件'); ?></h3>
<div class="upload-controls">
<!-- 改为链接形式 -->
<a href="javascript:;" class="upload-link" id="uploadButton">
<!--<i class="i-upload"></i> -->
<?php _e('选择文件'); ?>
</a>
<span class="upload-hint"><?php _e('或拖放文件到下方区域'); ?></span>
</div>
<div class="upload-area" id="uploadArea">
<div class="upload-area-text">
<?php _e('拖放文件到这里'); ?>
</div>
<div>
<?php _e('或者 %s浏览文件%s', '<span class="browse-link" id="browseLink">', '</span>'); ?>
</div>
</div>
<!-- 上传进度条 -->
<div class="upload-progress" id="uploadProgress">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="progress-text" id="progressText">0%</div>
</div>
<!-- 隐藏的文件输入框 -->
<input type="file" id="fileInput" multiple style="display: none;">
</div>
<form method="post" name="manage_medias" class="operate-form">
<div class="typecho-table-wrap">
<table class="typecho-list-table draggable">
<colgroup>
<col width="20" class="kit-hidden-mb"/>
<col width="6%" class="kit-hidden-mb"/>
<col width="10%" class="kit-hidden-mb"/> <!-- 预览列 -->
<col width="25%"/>
<col width="" class="kit-hidden-mb"/>
<col width="25%" class="kit-hidden-mb"/>
<col width="16%"/>
</colgroup>
<thead>
<tr>
<th class="kit-hidden-mb"></th>
<th class="kit-hidden-mb"></th>
<th class="kit-hidden-mb"><?php _e('预览'); ?></th>
<th><?php _e('文件名'); ?></th>
<th class="kit-hidden-mb"><?php _e('上传者'); ?></th>
<th class="kit-hidden-mb"><?php _e('所属文章'); ?></th>
<th><?php _e('发布日期'); ?></th>
</tr>
</thead>
<tbody>
<?php if ($attachments->have()): ?>
<?php while ($attachments->next()): ?>
<?php
$mime = \Typecho\Common::mimeIconType($attachments->attachment->mime);
$isImage = strpos($attachments->attachment->mime, 'image/') === 0;
$fileUrl = $attachments->attachmentUrl;
?>
<tr id="<?php $attachments->theId(); ?>">
<td class="kit-hidden-mb">
<input type="checkbox" class="typecho-table-checkbox"
value="<?php $attachments->cid(); ?>" name="cid[]"/>
</td>
<td class="kit-hidden-mb"><a
href="<?php $options->adminUrl('manage-comments.php?cid=' . $attachments->cid); ?>"
class="balloon-button size-<?php echo \Typecho\Common::splitByCount($attachments->commentsNum, 1, 10, 20, 50, 100); ?>"><?php $attachments->commentsNum(); ?></a>
</td>
<td class="kit-hidden-mb preview-cell">
<?php if ($isImage && !empty($fileUrl)): ?>
<img src="<?php echo $fileUrl; ?>"
class="media-preview-img"
alt="<?php $attachments->title(); ?>"
data-full-src="<?php echo $fileUrl; ?>"
data-title="<?php $attachments->title(); ?>">
<?php else: ?>
<i class="mime-<?php echo $mime; ?> media-preview-icon"></i>
<?php endif; ?>
</td>
<td>
<i class="mime-<?php echo $mime; ?>"></i>
<a href="<?php $options->adminUrl('media.php?cid=' . $attachments->cid); ?>"><?php $attachments->title(); ?></a>
<?php if (!empty($fileUrl)): ?>
<a href="<?php echo $fileUrl; ?>" target="_blank"
title="<?php _e('浏览 %s', $attachments->title); ?>"><i
class="i-exlink"></i></a>
<?php endif; ?>
</td>
<td class="kit-hidden-mb"><?php $attachments->author(); ?></td>
<td class="kit-hidden-mb">
<?php if ($attachments->parentPost->cid): ?>
<a href="<?php $options->adminUrl('write-' . (0 === strpos($attachments->parentPost->type, 'post') ? 'post' : 'page') . '.php?cid=' . $attachments->parentPost->cid); ?>"><?php $attachments->parentPost->title(); ?></a>
<?php else: ?>
<span class="description"><?php _e('未归档'); ?></span>
<?php endif; ?>
</td>
<td><?php $attachments->dateWord(); ?></td>
</tr>
<?php endwhile; ?>
<?php else: ?>
<tr>
<td colspan="7"><h6 class="typecho-list-table-title"><?php _e('没有任何文件'); ?></h6>
</td>
</tr>
<?php endif; ?>
</tbody>
</table><!-- end .typecho-list-table -->
</div><!-- end .typecho-table-wrap -->
</form><!-- end .operate-form -->
<div class="typecho-list-operate clearfix">
<form method="get">
<div class="operate">
<label><i class="sr-only"><?php _e('全选'); ?></i><input type="checkbox"
class="typecho-table-select-all"/></label>
<div class="btn-group btn-drop">
<button class="btn dropdown-toggle btn-s" type="button"><i
class="sr-only"><?php _e('操作'); ?></i><?php _e('选中项'); ?> <i
class="i-caret-down"></i></button>
<ul class="dropdown-menu">
<li><a lang="<?php _e('你确认要删除这些文件吗?'); ?>"
href="<?php $security->index('/action/contents-attachment-edit?do=delete'); ?>"><?php _e('删除'); ?></a>
</li>
</ul>
</div>
<button class="btn btn-s btn-warn btn-operate"
href="<?php $security->index('/action/contents-attachment-edit?do=clear'); ?>"
lang="<?php _e('您确认要清理未归档的文件吗?'); ?>"><?php _e('清理未归档文件'); ?></button>
</div>
<?php if ($attachments->have()): ?>
<ul class="typecho-pager">
<?php $attachments->pageNav(); ?>
</ul>
<?php endif; ?>
</form>
</div><!-- end .typecho-list-operate -->
</div>
</div><!-- end .typecho-page-main -->
</div>
</div>
<!-- 图片预览模态框 -->
<div id="imageModal" class="modal">
<span class="close">×</span>
<div class="modal-content">
<img class="modal-image" id="modalImage" src="" alt="">
<div class="modal-title" id="modalTitle"></div>
</div>
</div>
<script src="<?php $options->adminStaticUrl('js', 'moxie.js'); ?>"></script>
<script src="<?php $options->adminStaticUrl('js', 'plupload.js'); ?>"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取元素
const toggleUploadBtn = document.getElementById('toggleUploadBtn');
const cancelUploadBtn = document.getElementById('cancelUploadBtn');
const uploadSection = document.getElementById('uploadSection');
const uploadButton = document.getElementById('uploadButton');
const browseLink = document.getElementById('browseLink');
const fileInput = document.getElementById('fileInput');
const uploadArea = document.getElementById('uploadArea');
const uploadProgress = document.getElementById('uploadProgress');
const progressFill = document.getElementById('progressFill');
const progressText = document.getElementById('progressText');
// 模态框元素
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImage');
const modalTitle = document.getElementById('modalTitle');
const closeBtn = document.querySelector('.close');
// 切换上传区域显示/隐藏
// toggleUploadBtn.addEventListener('click', function() {
// uploadSection.classList.toggle('show');
// // 滚动到上传区域
// if (uploadSection.classList.contains('show')) {
// uploadSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
// }
// });
// 切换上传区域显示/隐藏
toggleUploadBtn.addEventListener('click', function() {
uploadSection.classList.add('show');
// 显示取消按钮,隐藏上传按钮
toggleUploadBtn.style.display = 'none';
cancelUploadBtn.style.display = 'inline-block';
// 滚动到上传区域
uploadSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});
// 取消上传
cancelUploadBtn.addEventListener('click', function() {
uploadSection.classList.remove('show');
// 显示上传按钮,隐藏取消按钮
toggleUploadBtn.style.display = 'inline-block';
cancelUploadBtn.style.display = 'none';
});
// 点击链接触发文件选择
uploadButton.addEventListener('click', function(e) {
e.preventDefault();
// 触发隐藏的文件输入框
fileInput.click();
});
// 点击浏览链接也触发文件选择
browseLink.addEventListener('click', function() {
fileInput.click();
});
// 初始化上传器
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,html4',
browse_button: 'fileInput', // 绑定到隐藏的文件输入框
container: 'uploadArea',
drop_element: 'uploadArea',
url: '<?php $security->index('/action/upload'); ?>',
flash_swf_url: '<?php $options->adminStaticUrl('js', 'Moxie.swf'); ?>',
filters: {
max_file_size: '<?php echo $phpMaxFilesize ?>',
mime_types: [{'title': '<?php _e('允许上传的文件'); ?>', 'extensions': '<?php echo implode(',', $options->allowedAttachmentTypes); ?>'}]
},
init: {
PostInit: function() {
console.log('Uploader initialized');
},
FilesAdded: function(up, files) {
console.log('Files added:', files);
// 显示进度条
uploadProgress.style.display = 'block';
// 开始上传
up.start();
},
UploadProgress: function(up, file) {
// 更新进度条
var percent = file.percent;
progressFill.style.width = percent + '%';
progressText.textContent = percent + '%';
},
FileUploaded: function(up, file, response) {
console.log('File uploaded:', response);
if (response.status === 200) {
try {
var result = JSON.parse(response.response);
if (result && result[1]) {
// 上传成功,刷新页面显示新文件
location.reload();
}
} catch (e) {
console.error('Parse error:', e);
}
}
// 隐藏进度条
setTimeout(function() {
uploadProgress.style.display = 'none';
progressFill.style.width = '0%';
progressText.textContent = '0%';
// 隐藏上传区域
uploadSection.classList.remove('show');
}, 1000);
},
Error: function(up, err) {
console.error('Upload error:', err);
alert('上传出错: ' + err.message);
// 隐藏进度条
uploadProgress.style.display = 'none';
}
}
});
uploader.init();
// 拖拽事件
uploadArea.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', function(e) {
e.preventDefault();
this.classList.remove('dragover');
});
uploadArea.addEventListener('drop', function(e) {
e.preventDefault();
this.classList.remove('dragover');
});
// 图片预览功能
const previewImages = document.querySelectorAll('.media-preview-img');
previewImages.forEach(img => {
img.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const fullSrc = this.getAttribute('data-full-src');
const title = this.getAttribute('data-title');
if (fullSrc) {
modalImg.src = fullSrc;
modalTitle.textContent = title || '';
modal.style.display = 'block';
document.body.style.overflow = 'hidden';
}
});
});
// 关闭模态框
function closeModal() {
modal.style.display = 'none';
document.body.style.overflow = '';
}
closeBtn.addEventListener('click', closeModal);
modal.addEventListener('click', function(e) {
if (e.target === modal) {
closeModal();
}
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && modal.style.display === 'block') {
closeModal();
}
});
});
</script>
<?php
include 'copyright.php';
include 'common-js.php';
include 'table-js.php';
include 'footer.php';
?>
]]>sudo apt update && sudo apt upgrade -y
sudo apt install zsh git curl wget -y
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
编辑 ~/.zshrc
:
vim ~/.zshrc
注释掉 ZSH_THEME="robbyrussell"
添加 ZSH_THEME="powerlevel10k/powerlevel10k"
# 下载
wget https://github.com/ryanoasis/nerd-fonts/releases/download/v3.2.1/FiraCode.zip
# 解压
unzip FiraCode.zip -d ~/.local/share/fonts/
# 刷新缓存
fc-cache -fv
# 删除
rm FiraCode.zip
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
编辑配置文件
vim ~/.zshrc
文件-代表删除+代表新增
- plugins=(git)
+ plugins=(
+ git
+ zsh-autosuggestions
+ zsh-syntax-highlighting
+ )
配置完毕后输入
exec zsh
重启终端
which zsh
查看安装位置
chsh -s $(which zsh)
安装后重启电脑即可
如果想要重新配置可以输入即可
p10k configure
]]>