feat: 完善浏览器环境的文章读取和保存功能
This commit is contained in:
Frankie Huang
parent
58012dbbd3
commit
af3547b4b3
31
src/App.vue
31
src/App.vue
@ -27,6 +27,7 @@ import { invoke } from "@tauri-apps/api/core";
|
||||
import { readTextFile, writeTextFile, writeFile, exists } from '@tauri-apps/plugin-fs';
|
||||
import { save } from '@tauri-apps/plugin-dialog';
|
||||
import { Message, Notice } from 'view-ui-plus'
|
||||
import { GetSingleArticle, UpdateArticle } from '/src/utils/userHandler';
|
||||
|
||||
// 原始示例数据，仅供参考
|
||||
const greetMsg = ref("");
|
||||
@ -93,13 +94,21 @@ watch(markdownCode, (newMarkdownCode) => {
|
||||
console.log("code be updated");
|
||||
})
|
||||
async function readFileContent(filePath) {
|
||||
try {
|
||||
let fileContent = '';
|
||||
if (window.__TAURI_INTERNALS__ === undefined) {
|
||||
fileContent = "# this is " + filePath;
|
||||
} else {
|
||||
fileContent = await readTextFile(filePath);
|
||||
// 调用接口读取 currentFilePath 文件内容
|
||||
const match = filePath.match(/(\d+)$/);
|
||||
const articleID = match ? parseInt(match[1], 10) : null;
|
||||
GetSingleArticle(articleID).then((data) => {
|
||||
markdownCode.value = data.mdCode;
|
||||
currentFilePath.value = filePath;
|
||||
Message.success('已读取文件内容，并加载到编辑器中:' + filePath);
|
||||
}).catch((error) => {
|
||||
Message.error(`调用异常: ${error}`);
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const fileContent = await readTextFile(filePath);
|
||||
markdownCode.value = fileContent;
|
||||
currentFilePath.value = filePath;
|
||||
Message.success('已读取文件内容，并加载到编辑器中:' + filePath);
|
||||
@ -115,16 +124,22 @@ async function writeFileContent(markdownCode) {
|
||||
}
|
||||
try {
|
||||
if (window.__TAURI_INTERNALS__ === undefined) {
|
||||
// TODO 调用接口更新 currentFilePath 文件内容
|
||||
Message.warning('暂未实现接口');
|
||||
// 调用接口更新 currentFilePath 文件内容
|
||||
const match = currentFilePath.value.match(/(\d+)$/);
|
||||
const articleID = match ? parseInt(match[1], 10) : null;
|
||||
UpdateArticle(articleID, null, markdownCode).then((data) => {
|
||||
Message.success('更新成功');
|
||||
}).catch((error) => {
|
||||
Message.error(`更新异常: ${error}`);
|
||||
});
|
||||
} else {
|
||||
const exist = await exists(currentFilePath.value);
|
||||
if (!exist) {
|
||||
throw new Error(currentFilePath.value + " 文件不存在.");
|
||||
}
|
||||
await writeTextFile(currentFilePath.value, markdownCode);
|
||||
}
|
||||
Message.success('文件更新成功:' + currentFilePath.value);
|
||||
}
|
||||
} catch (err) {
|
||||
Message.error('文件更新失败:' + err);
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ import { ThemeSwitch, PreviewThemeSwitch, ExportPDF } from '@vavt/v3-extension';
|
||||
import { lineNumbers } from '@codemirror/view';
|
||||
import LinkAttr from 'markdown-it-link-attributes';
|
||||
import { ref, reactive, watch, nextTick, onMounted } from "vue";
|
||||
import { Message, Modal } from 'view-ui-plus'
|
||||
import { Message, Modal } from 'view-ui-plus';
|
||||
import { encode as plantumlEncoder } from 'plantuml-encoder';
|
||||
import { SubmitArticle, UpdateArticle } from '/src/utils/userHandler';
|
||||
|
||||
|
||||
@ -35,6 +35,8 @@
|
||||
import { join } from '@tauri-apps/api/path';
|
||||
import { open } from '@tauri-apps/plugin-dialog';
|
||||
import { readDir } from '@tauri-apps/plugin-fs';
|
||||
import { GetUserArticle } from '/src/utils/userHandler';
|
||||
import { Message } from 'view-ui-plus';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -59,6 +61,29 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async exposeTreeData(folderPath) {
|
||||
if (window.__TAURI_INTERNALS__ === undefined) {
|
||||
GetUserArticle().then((data) => {
|
||||
folderPath = '/Users/' + data.username;
|
||||
const folderTreeData = {
|
||||
"path": folderPath,
|
||||
"name": data.username,
|
||||
"nodes": [],
|
||||
"directory": true,
|
||||
};
|
||||
data.articles.forEach((article) => {
|
||||
folderTreeData.nodes.push({
|
||||
"path": folderPath + '/' + article.article_id,
|
||||
"name": article.article_id + '.md',
|
||||
"suffix": "md",
|
||||
"directory": false,
|
||||
});
|
||||
})
|
||||
this.$emit('folder-selected', folderTreeData);
|
||||
}).catch((error) => {
|
||||
Message.error(`调用异常: ${error}`);
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (folderPath != null && folderPath.length > 0) {
|
||||
const folderTreeData = await this.readDirRecursively(folderPath);
|
||||
this.$emit('folder-selected', folderTreeData);
|
||||
@ -66,10 +91,7 @@ export default {
|
||||
},
|
||||
async selectFolder() {
|
||||
if (window.__TAURI_INTERNALS__ === undefined) {
|
||||
// TODO 请求后端接口，选择目录
|
||||
// 告诉父组件，rootPath 的值已变化
|
||||
this.$emit('update:rootPath', '/root')
|
||||
await this.exposeTreeData('/root')
|
||||
// 非 Tauri 环境下，会默认加载用户数据列表，不支持选择目录
|
||||
return;
|
||||
}
|
||||
const folderPath = await open(
|
||||
@ -86,26 +108,6 @@ export default {
|
||||
},
|
||||
// 遍历文件夹，返回文件树
|
||||
async readDirRecursively(folderPath) {
|
||||
if (window.__TAURI_INTERNALS__ === undefined) {
|
||||
// TODO 请求后端接口，获取目录树
|
||||
const folderTreeData = {
|
||||
"path": folderPath,
|
||||
"name": folderPath.split('/').pop(),
|
||||
"nodes": [{
|
||||
"path": '/root/test.md',
|
||||
"name": 'test.md',
|
||||
"suffix": "md",
|
||||
"directory": false,
|
||||
},{
|
||||
"path": '/root/test1.md',
|
||||
"name": 'test1.md',
|
||||
"suffix": "md",
|
||||
"directory": false,
|
||||
}],
|
||||
"directory": true,
|
||||
}
|
||||
return folderTreeData;
|
||||
}
|
||||
// 拼接得到当前文件夹路径
|
||||
let folderTreeNode = {
|
||||
"path": folderPath,
|
||||
|
||||
@ -177,15 +177,44 @@ const SubmitArticle = (title, mdCode) => {
|
||||
}
|
||||
|
||||
const UpdateArticle = (id, title, mdCode) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const PHPSESSID = getPHPSessionFromCookie();
|
||||
let body = {
|
||||
'func': 'update_article',
|
||||
'id': id,
|
||||
}
|
||||
if (title !== null && title !== undefined) {
|
||||
body.title = title;
|
||||
}
|
||||
if (mdCode !== null && mdCode !== undefined) {
|
||||
body.mdCode = mdCode;
|
||||
}
|
||||
fetch('https://myafei.cn/php/ajax.php?PHPSESSID=' + PHPSESSID, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(body),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
resolve(data);
|
||||
} else {
|
||||
reject(new Error(data.error));
|
||||
}
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const GetSingleArticle = (id) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const PHPSESSID = getPHPSessionFromCookie();
|
||||
fetch('https://myafei.cn/php/ajax.php?PHPSESSID=' + PHPSESSID, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'update_article',
|
||||
'func': 'init_submit',
|
||||
'id': id,
|
||||
'title': title,
|
||||
'mdCode': mdCode,
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
@ -202,6 +231,29 @@ const UpdateArticle = (id, title, mdCode) => {
|
||||
});
|
||||
}
|
||||
|
||||
const GetUserArticle = (id, title, mdCode) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const PHPSESSID = getPHPSessionFromCookie();
|
||||
fetch('https://myafei.cn/php/ajax.php?PHPSESSID=' + PHPSESSID, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'get_articles',
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
resolve(data);
|
||||
} else {
|
||||
// 未登录不抛出异常
|
||||
}
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export {
|
||||
SignIn,
|
||||
SignUp,
|
||||
@ -210,4 +262,6 @@ export {
|
||||
Logout,
|
||||
SubmitArticle,
|
||||
UpdateArticle,
|
||||
GetSingleArticle,
|
||||
GetUserArticle,
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user