+
-
-
+
保存
+
恢复到上次保存
-
-
-
+
+
+
@@ -22,7 +16,6 @@ import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import { onMounted, ref } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { NScrollbar } from 'naive-ui'
-import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode'
const miaoFetchApi = useMiaoFetchApi()
@@ -32,7 +25,7 @@ const currentFiles = defineModel
('currentFiles', {
const vFile = ref()
const rootRef = ref()
-const _key = ref(Math.random())
+// const _key = ref(Math.random())
const codeData = ref()
// 第一次点击保存时自动备份data，暂时懒得做
const bakData = ref()
@@ -54,18 +47,22 @@ const handleSave = async () => {
false && miaoFetchApi.upload(file_bak, parentDir)
}
-const switchTheme = async () => {
- if (!vFile.value) {
- return
- }
- theme.value = theme.value === 'dark' ? 'light' : 'dark'
- extensions.value = [
- ...(await getLangExtensions(vFile.value?.name)),
- theme.value === 'dark' ? vscodeDark : vscodeLight
- ]
- _key.value = Math.random()
+const handleReset = async () => {
+ codeData.value = bakData.value
}
+// const switchTheme = async () => {
+// if (!vFile.value) {
+// return
+// }
+// theme.value = theme.value === 'dark' ? 'light' : 'dark'
+// extensions.value = [
+// ...(await getLangExtensions(vFile.value?.name)),
+// // theme.value === 'dark' ?
+// ]
+// _key.value = Math.random()
+// }
+
const getLangExtensions = async (fileName: string) => {
const ext = fileName.split('.').pop()?.toLocaleLowerCase()
switch (ext) {
@@ -74,7 +71,7 @@ const getLangExtensions = async (fileName: string) => {
case 'ts':
case 'tsx':
const { javascript } = await import('@codemirror/lang-javascript')
- return [javascript()]
+ return [javascript({ jsx: ext.substring(2, 3) === 'x', typescript: ext.substring(0, 2) === 'js', })]
break
case 'css':
case 'scss':
@@ -127,7 +124,7 @@ onMounted(async () => {
})
).toString()
bakData.value = codeData.value
- extensions.value = [...(await getLangExtensions(fileName)), vscodeLight]
+ extensions.value = [...(await getLangExtensions(fileName))]
rootRef.value?.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 's') {
@@ -142,13 +139,33 @@ onMounted(async () => {
.codemirror-container {
width: 100%;
height: 100%;
- &-top {
- background-color: aqua;
+
+ .codemirror-container-top {
+ display: flex;
+ border-bottom: 1px solid #000;
+ }
+
+ .codemirror-container-btn {
+ height: 25px;
+ padding: 0 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ user-select: none;
+ background-color: none;
+ transition: background-color 0.25s;
+
+ &:hover {
+ background-color: #e8e8e8;
+ }
}
}
+
.codemirror-container-dark {
background-color: rgb(30, 30, 30);
}
+
.codemirror-container-light {
background-color: rgb(255, 255, 255);
}
diff --git a/vite.config.ts b/vite.config.ts
index 74e736e..fe92d62 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -64,11 +64,12 @@ export default defineConfig({
output: {
// 配置输出为单文件
// inlineDynamicImports: true,
- manualChunks(id) {
- if (id.includes('@codemirror')) {
- return id.split('@')[1].replace('+', '-')
- }
- }
+ // manualChunks(id) {
+ // 加了会有bug
+ // if (id.includes('@codemirror')) {
+ // return id.split('@')[1].replace('+', '-')
+ // }
+ // }
// entryFileNames: 'bundle.js',
// format: 'iife', // 立即执行函数格式
// name: 'MyBundle'