Skip to content

Commit 3c71ee2

Browse files
JadePureOneJadePureOne
committed
✨ feat(UI；Fun): 标签功能；解耦合
1 parent a2f95f5 commit 3c71ee2

File tree

7 files changed

+350
-124
lines changed

7 files changed

+350
-124
lines changed

‎index.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@
77
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
88
/>
99
<script type="text/javascript" src="js/plugin.js"></script>
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/plugin/customParseFormat.min.js"></script>
11-
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js"></script>
10+
<script type="text/javascript" src="js/utils.js"></script>
11+
12+
<link rel="stylesheet" type="text/css" href="style/index.css" />
13+
<link rel="stylesheet" type="text/css" href="style/my.css" />
1214
</head>
1315

1416
<body>

‎js/plugin.js

+91-100
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,105 @@
1-
const dayjs = require('dayjs');
2-
const fs = require('fs').promises;
3-
const path = require('path');
4-
const { exec } = require('child_process');
5-
6-
// 匹配日期的正则表达式 yyyy-mm-dd-hh-mm-ss
71
// const dateRegex = /(\d{4})(\d{2})(\d{2})/;
82
const dateRegex = /(\d{4})(\d{2})(\d{2})|(\d{4})-(\d{2})-(\d{2})-(\d{2})-(\d{2})-(\d{2})/;
93

10-
/**
11-
* @description 获取文件的创建时间
12-
* @param {string} filePath 文件路径+文件名
13-
* @returns {Date} 文件的创建时间
14-
*/
15-
const getBirthTime = (filePath) => {
16-
const imagePath = path.join(filePath);
17-
fs.stat(imagePath, (err, stats) => {
18-
if (err) {
19-
console.error('读取文件信息时出错:', err);
20-
return;
21-
}
22-
console.log('创建时间: ' + stats.birthtime,typeof stats.birthtime);
23-
return stats.birthtime;
24-
});
25-
};
26-
27-
28-
/**
29-
* 更新文件的时间戳。
30-
*
31-
* @param {string} imagePath - 图片文件的完整路径。
32-
* @param {string} newCreationTime - 新的创建时间，格式为 'YYYY:MM:DD HH:MM:SS'。
33-
* @param {string} pythonScript - Python 脚本的完整路径。
34-
*/
35-
function updateFileTimestamps(imagePath, newCreationTime, pythonScript) {
36-
exec(`python "${pythonScript}" "${imagePath}" "${newCreationTime}"`, (error, stdout, stderr) => {
37-
if (error) {
38-
console.error(`Error: ${error.message}`);
39-
return;
40-
}
41-
if (stderr) {
42-
console.error(`Stderr: ${stderr}`);
43-
return;
44-
}
45-
console.log(`Output: ${stdout}`);
46-
});
47-
}
4+
let imgList = []
5+
486

497
eagle.onPluginCreate(async (plugin) => {
508

519
document.querySelector('#message').innerHTML = `
52-
<form>
53-
<ul>
54-
<li>
55-
<label for="regex">正则表达式:</label>
56-
<input type="text" id="regex" name="regex" />
57-
</li>
58-
</ul>
59-
60-
<button type="button" id="search">搜索</button>
61-
</form>`;
10+
<div class="tabs">
11+
<button class="tab-button active" data-tab="tab1">自定义日期</button>
12+
<button class="tab-button" data-tab="tab2">正则匹配</button>
13+
<button class="tab-button" data-tab="tab3">Auto</button>
6214
63-
let selected = await eagle.item.getSelected();
64-
for (let item of selected) {
65-
const { filePath, ext, name} = item;
66-
// console.log(`文件路径: ${filePath}; 文件扩展名: ${ext}; 文件名: ${name}`);
67-
const match = name.match(dateRegex);
68-
// console.log(`match: ${match}`);
69-
if (match) {
70-
if (match[1]) { // 如果匹配的是 YYYYMMDD 格式
71-
const year = match[1];
72-
const month = match[2];
73-
const day = match[3];
74-
const date = dayjs(`${year}-${month}-${day}`); // 创建 dayjs 对象
75-
console.log(`Date: ${date.format('YYYY-MM-DD')}`);
76-
} else { // 如果匹配的是 YYYY-MM-DD-HH-MM-SS 格式
77-
const year = match[4];
78-
const month = match[5];
79-
const day = match[6];
80-
const hour = match[7];
81-
const minute = match[8];
82-
const second = match[9];
83-
const date = dayjs(`${year}-${month}-${day} ${hour}:${minute}:${second}`); // 创建 dayjs 对象
84-
console.log(`Date: ${date.format('YYYY-MM-DD HH:mm:ss')}`); }
85-
} else {
86-
console.log("No date found.");
87-
}
88-
89-
// 使用示例
90-
const imagePath = path.join('G:', 'OneDrive', 'BlueAssets.library', 'images', 'M3JUL06YKDRWB.info', '[2024-06-12-12-01-49]今日。4.jpg');
91-
const newCreationTime = '2018:01:01 12:00:00';
92-
const pythonScript = path.join('G:', 'OneDrive', 'dev', 'syncCreateTime', 'js', 'modify.py');
93-
94-
// 调用函数更新文件时间戳
95-
updateFileTimestamps(imagePath, newCreationTime, pythonScript);
96-
}
15+
</div>
16+
17+
<div class="tab-content">
18+
<div class="tab active" id="tab1">
19+
20+
</div>
21+
<div class="tab" id="tab2">
22+
<form>
23+
<ul>
24+
<li>
25+
<label for="regex">正则表达式:</label>
26+
<input type="text" id="regex" name="regex" />
27+
</li>
28+
</ul>
29+
<button type="button" id="search">替换</button>
30+
</form>
31+
</div>
32+
<div class="tab" id="tab3">
33+
自动识别，使用内置正则
34+
</div>
35+
</div>
36+
`;
37+
38+
// 使用示例
39+
const imagePath = path.join('G:', 'OneDrive', 'BlueAssets.library', 'images', 'M3JUL06YKDRWB.info', '[2024-06-12-12-01-49]今日。4.jpg');
40+
const newCreationTime = '2012:01:01 12:00:00';
41+
document.querySelector('#search').addEventListener('click', function() {
42+
// 获取输入框的值
43+
const regexValue = document.querySelector('#regex').value;
44+
console.log(regexValue);
45+
updateFileTimestamps(imagePath, newCreationTime);
46+
});
47+
48+
//tab切换
49+
document.querySelectorAll('.tab-button').forEach(button => {
50+
button.addEventListener('click', () => {
51+
// 移除所有按钮的 active 类
52+
document.querySelectorAll('.tab-button').forEach(btn => {
53+
btn.classList.remove('active');
54+
});
55+
56+
// 隐藏所有标签内容
57+
document.querySelectorAll('.tab').forEach(tab => {
58+
tab.classList.remove('active');
59+
});
60+
61+
// 添加 active 类到当前按钮
62+
button.classList.add('active');
63+
64+
// 显示对应的标签内容
65+
const tabId = button.getAttribute('data-tab');
66+
document.getElementById(tabId).classList.add('active');
67+
});
9768
});
9869

70+
/**
71+
* 映射选中图片
72+
*/
73+
let selected = await eagle.item.getSelected();
74+
imgList = selected.map(item => {
75+
const { filePath, name } = item;
9976

100-
// eagle.onPluginRun(() => {
101-
// console.log('eagle.onPluginRun');
102-
// });
77+
const match = name.match(dateRegex);
78+
let date;
10379

104-
// eagle.onPluginShow(() => {
105-
// console.log('eagle.onPluginShow');
106-
// });
80+
if (match) {
81+
if (match[1]) { // If matching YYYYMMDD format
82+
const year = match[1];
83+
const month = match[2];
84+
const day = match[3];
85+
date = dayjs(`${year}-${month}-${day}`); // Create dayjs object
86+
console.log(`Date: ${date.format('YYYY-MM-DD')}`);
87+
} else { // If matching YYYY-MM-DD-HH-MM-SS format
88+
const year = match[4];
89+
const month = match[5];
90+
const day = match[6];
91+
const hour = match[7];
92+
const minute = match[8];
93+
const second = match[9];
94+
date = dayjs(`${year}-${month}-${day} ${hour}:${minute}:${second}`); // Create dayjs object
95+
console.log(`Date: ${date.format('YYYY-MM-DD HH:mm:ss')}`);
96+
}
97+
} else {
98+
console.log("No date found.");
99+
}
107100

108-
// eagle.onPluginHide(() => {
109-
// console.log('eagle.onPluginHide');
110-
// });
101+
return { filePath, date: date ? date.format() : null };
102+
});
111103

112-
// eagle.onPluginBeforeExit((event) => {
113-
// console.log('eagle.onPluginBeforeExit');
114-
// });
104+
console.log("map", imgList);
105+
});

‎js/shell.ps1

-14
This file was deleted.

‎js/test.ps1

-4
This file was deleted.

‎js/utils.js

+49-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
const fs = require('fs');
22
const path = require('path');
3+
const dayjs = require('dayjs');
4+
const { exec } = require('child_process');
5+
36

47
/**
58
* @description 获取文件的创建时间
@@ -18,7 +21,49 @@ const getBirthTime = (filePath) => {
1821
});
1922
};
2023

21-
// 导出函数
22-
module.exports = {
23-
getBirthTime,
24-
};
24+
25+
26+
/**
27+
* 更新文件的时间戳。
28+
*
29+
* @param {string} imagePath - 图片文件的完整路径。
30+
* @param {string} newCreationTime - 新的创建时间，格式为 'YYYY:MM:DD HH:MM:SS'。
31+
* @param {string} pythonScript - Python 脚本的完整路径。
32+
*/
33+
function updateFileTimestamps(imagePath, newCreationTime) {
34+
35+
const pythonScript = path.join(__dirname,'js', 'modify.py');
36+
37+
exec(`python "${pythonScript}" "${imagePath}" "${newCreationTime}"`, (error, stdout, stderr) => {
38+
if (error) {
39+
console.error(`Error: ${error.message}`);
40+
return;
41+
}
42+
if (stderr) {
43+
console.error(`Stderr: ${stderr}`);
44+
return;
45+
}
46+
console.log(`Output: ${stdout}`);
47+
});
48+
}
49+
50+
document.querySelectorAll('.tab-button').forEach(button => {
51+
button.addEventListener('click', () => {
52+
// 移除所有按钮的 active 类
53+
document.querySelectorAll('.tab-button').forEach(btn => {
54+
btn.classList.remove('active');
55+
});
56+
57+
// 隐藏所有标签内容
58+
document.querySelectorAll('.tab').forEach(tab => {
59+
tab.classList.remove('active');
60+
});
61+
62+
// 添加 active 类到当前按钮
63+
button.classList.add('active');
64+
65+
// 显示对应的标签内容
66+
const tabId = button.getAttribute('data-tab');
67+
document.getElementById(tabId).classList.add('active');
68+
});
69+
});

0 commit comments

Comments
 (0)