新增pdf小工具;
制作新编辑器
This commit is contained in:
parent
d93f89b1b6
commit
6204cb23d6
499
package-lock.json
generated
499
package-lock.json
generated
@ -8,7 +8,10 @@
|
||||
"name": "mva-cyberv2",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^1.7.9",
|
||||
"jquery": "^3.7.1",
|
||||
"js-cookie": "^3.0.5",
|
||||
"marked": "^15.0.7",
|
||||
"mermaid": "^11.4.1",
|
||||
@ -72,6 +75,17 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.26.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
|
||||
"integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
|
||||
"dependencies": {
|
||||
"regenerator-runtime": "^0.14.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.26.8",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.8.tgz",
|
||||
@ -803,6 +817,11 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@transloadit/prettier-bytes": {
|
||||
"version": "0.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@transloadit/prettier-bytes/-/prettier-bytes-0.0.7.tgz",
|
||||
"integrity": "sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA=="
|
||||
},
|
||||
"node_modules/@types/d3": {
|
||||
"version": "7.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
|
||||
@ -1031,6 +1050,11 @@
|
||||
"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/event-emitter": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/event-emitter/-/event-emitter-0.3.5.tgz",
|
||||
"integrity": "sha512-zx2/Gg0Eg7gwEiOIIh5w9TrhKKTeQh7CPCOPNc0el4pLSwzebA8SmnHwZs2dWlLONvyulykSwGSQxQHLhjGLvQ=="
|
||||
},
|
||||
"node_modules/@types/geojson": {
|
||||
"version": "7946.0.16",
|
||||
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
|
||||
@ -1042,6 +1066,56 @@
|
||||
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/@uppy/companion-client": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@uppy/companion-client/-/companion-client-2.2.2.tgz",
|
||||
"integrity": "sha512-5mTp2iq97/mYSisMaBtFRry6PTgZA6SIL7LePteOV5x0/DxKfrZW3DEiQERJmYpHzy7k8johpm2gHnEKto56Og==",
|
||||
"dependencies": {
|
||||
"@uppy/utils": "^4.1.2",
|
||||
"namespace-emitter": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@uppy/core": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@uppy/core/-/core-2.3.4.tgz",
|
||||
"integrity": "sha512-iWAqppC8FD8mMVqewavCz+TNaet6HPXitmGXpGGREGrakZ4FeuWytVdrelydzTdXx6vVKkOmI2FLztGg73sENQ==",
|
||||
"dependencies": {
|
||||
"@transloadit/prettier-bytes": "0.0.7",
|
||||
"@uppy/store-default": "^2.1.1",
|
||||
"@uppy/utils": "^4.1.3",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"mime-match": "^1.0.2",
|
||||
"namespace-emitter": "^2.0.1",
|
||||
"nanoid": "^3.1.25",
|
||||
"preact": "^10.5.13"
|
||||
}
|
||||
},
|
||||
"node_modules/@uppy/store-default": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@uppy/store-default/-/store-default-2.1.1.tgz",
|
||||
"integrity": "sha512-xnpTxvot2SeAwGwbvmJ899ASk5tYXhmZzD/aCFsXePh/v8rNvR2pKlcQUH7cF/y4baUGq3FHO/daKCok/mpKqQ=="
|
||||
},
|
||||
"node_modules/@uppy/utils": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@uppy/utils/-/utils-4.1.3.tgz",
|
||||
"integrity": "sha512-nTuMvwWYobnJcytDO3t+D6IkVq/Qs4Xv3vyoEZ+Iaf8gegZP+rEyoaFT2CK5XLRMienPyqRqNbIfRuFaOWSIFw==",
|
||||
"dependencies": {
|
||||
"lodash.throttle": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@uppy/xhr-upload": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@uppy/xhr-upload/-/xhr-upload-2.1.3.tgz",
|
||||
"integrity": "sha512-YWOQ6myBVPs+mhNjfdWsQyMRWUlrDLMoaG7nvf/G6Y3GKZf8AyjFDjvvJ49XWQ+DaZOftGkHmF1uh/DBeGivJQ==",
|
||||
"dependencies": {
|
||||
"@uppy/companion-client": "^2.2.2",
|
||||
"@uppy/utils": "^4.1.2",
|
||||
"nanoid": "^3.1.25"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@uppy/core": "^2.3.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitejs/plugin-vue": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
|
||||
@ -1151,6 +1225,156 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
|
||||
"integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
|
||||
},
|
||||
"node_modules/@wangeditor/basic-modules": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@wangeditor/basic-modules/-/basic-modules-1.1.7.tgz",
|
||||
"integrity": "sha512-cY9CPkLJaqF05STqfpZKWG4LpxTMeGSIIF1fHvfm/mz+JXatCagjdkbxdikOuKYlxDdeqvOeBmsUBItufDLXZg==",
|
||||
"dependencies": {
|
||||
"is-url": "^1.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@wangeditor/core": "1.x",
|
||||
"dom7": "^3.0.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"nanoid": "^3.2.0",
|
||||
"slate": "^0.72.0",
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wangeditor/code-highlight": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@wangeditor/code-highlight/-/code-highlight-1.0.3.tgz",
|
||||
"integrity": "sha512-iazHwO14XpCuIWJNTQTikqUhGKyqj+dUNWJ9288Oym9M2xMVHvnsOmDU2sgUDWVy+pOLojReMPgXCsvvNlOOhw==",
|
||||
"dependencies": {
|
||||
"prismjs": "^1.23.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@wangeditor/core": "1.x",
|
||||
"dom7": "^3.0.0",
|
||||
"slate": "^0.72.0",
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wangeditor/core": {
|
||||
"version": "1.1.19",
|
||||
"resolved": "https://registry.npmjs.org/@wangeditor/core/-/core-1.1.19.tgz",
|
||||
"integrity": "sha512-KevkB47+7GhVszyYF2pKGKtCSj/YzmClsD03C3zTt+9SR2XWT5T0e3yQqg8baZpcMvkjs1D8Dv4fk8ok/UaS2Q==",
|
||||
"dependencies": {
|
||||
"@types/event-emitter": "^0.3.3",
|
||||
"event-emitter": "^0.3.5",
|
||||
"html-void-elements": "^2.0.0",
|
||||
"i18next": "^20.4.0",
|
||||
"scroll-into-view-if-needed": "^2.2.28",
|
||||
"slate-history": "^0.66.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@uppy/core": "^2.1.1",
|
||||
"@uppy/xhr-upload": "^2.0.3",
|
||||
"dom7": "^3.0.0",
|
||||
"is-hotkey": "^0.2.0",
|
||||
"lodash.camelcase": "^4.3.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.foreach": "^4.5.0",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"lodash.toarray": "^4.4.0",
|
||||
"nanoid": "^3.2.0",
|
||||
"slate": "^0.72.0",
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wangeditor/editor": {
|
||||
"version": "5.1.23",
|
||||
"resolved": "https://registry.npmjs.org/@wangeditor/editor/-/editor-5.1.23.tgz",
|
||||
"integrity": "sha512-0RxfeVTuK1tktUaPROnCoFfaHVJpRAIE2zdS0mpP+vq1axVQpLjM8+fCvKzqYIkH0Pg+C+44hJpe3VVroSkEuQ==",
|
||||
"dependencies": {
|
||||
"@uppy/core": "^2.1.1",
|
||||
"@uppy/xhr-upload": "^2.0.3",
|
||||
"@wangeditor/basic-modules": "^1.1.7",
|
||||
"@wangeditor/code-highlight": "^1.0.3",
|
||||
"@wangeditor/core": "^1.1.19",
|
||||
"@wangeditor/list-module": "^1.0.5",
|
||||
"@wangeditor/table-module": "^1.1.4",
|
||||
"@wangeditor/upload-image-module": "^1.0.2",
|
||||
"@wangeditor/video-module": "^1.1.4",
|
||||
"dom7": "^3.0.0",
|
||||
"is-hotkey": "^0.2.0",
|
||||
"lodash.camelcase": "^4.3.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.foreach": "^4.5.0",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"lodash.toarray": "^4.4.0",
|
||||
"nanoid": "^3.2.0",
|
||||
"slate": "^0.72.0",
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wangeditor/editor-for-vue": {
|
||||
"version": "5.1.12",
|
||||
"resolved": "https://registry.npmjs.org/@wangeditor/editor-for-vue/-/editor-for-vue-5.1.12.tgz",
|
||||
"integrity": "sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==",
|
||||
"peerDependencies": {
|
||||
"@wangeditor/editor": ">=5.1.0",
|
||||
"vue": "^3.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@wangeditor/list-module": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@wangeditor/list-module/-/list-module-1.0.5.tgz",
|
||||
"integrity": "sha512-uDuYTP6DVhcYf7mF1pTlmNn5jOb4QtcVhYwSSAkyg09zqxI1qBqsfUnveeDeDqIuptSJhkh81cyxi+MF8sEPOQ==",
|
||||
"peerDependencies": {
|
||||
"@wangeditor/core": "1.x",
|
||||
"dom7": "^3.0.0",
|
||||
"slate": "^0.72.0",
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wangeditor/table-module": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@wangeditor/table-module/-/table-module-1.1.4.tgz",
|
||||
"integrity": "sha512-5saanU9xuEocxaemGdNi9t8MCDSucnykEC6jtuiT72kt+/Hhh4nERYx1J20OPsTCCdVr7hIyQenFD1iSRkIQ6w==",
|
||||
"peerDependencies": {
|
||||
"@wangeditor/core": "1.x",
|
||||
"dom7": "^3.0.0",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"nanoid": "^3.2.0",
|
||||
"slate": "^0.72.0",
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wangeditor/upload-image-module": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@wangeditor/upload-image-module/-/upload-image-module-1.0.2.tgz",
|
||||
"integrity": "sha512-z81lk/v71OwPDYeQDxj6cVr81aDP90aFuywb8nPD6eQeECtOymrqRODjpO6VGvCVxVck8nUxBHtbxKtjgcwyiA==",
|
||||
"peerDependencies": {
|
||||
"@uppy/core": "^2.0.3",
|
||||
"@uppy/xhr-upload": "^2.0.3",
|
||||
"@wangeditor/basic-modules": "1.x",
|
||||
"@wangeditor/core": "1.x",
|
||||
"dom7": "^3.0.0",
|
||||
"lodash.foreach": "^4.5.0",
|
||||
"slate": "^0.72.0",
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wangeditor/video-module": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@wangeditor/video-module/-/video-module-1.1.4.tgz",
|
||||
"integrity": "sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==",
|
||||
"peerDependencies": {
|
||||
"@uppy/core": "^2.1.4",
|
||||
"@uppy/xhr-upload": "^2.0.7",
|
||||
"@wangeditor/core": "1.x",
|
||||
"dom7": "^3.0.0",
|
||||
"nanoid": "^3.2.0",
|
||||
"slate": "^0.72.0",
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.14.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
|
||||
@ -1220,6 +1444,11 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/compute-scroll-into-view": {
|
||||
"version": "1.0.20",
|
||||
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
|
||||
"integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
|
||||
},
|
||||
"node_modules/confbox": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
|
||||
@ -1281,6 +1510,18 @@
|
||||
"resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
|
||||
"integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="
|
||||
},
|
||||
"node_modules/d": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
|
||||
"integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
|
||||
"dependencies": {
|
||||
"es5-ext": "^0.10.64",
|
||||
"type": "^2.7.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3": {
|
||||
"version": "7.9.0",
|
||||
"resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
|
||||
@ -1732,6 +1973,14 @@
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dom7": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz",
|
||||
"integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
|
||||
"dependencies": {
|
||||
"ssr-window": "^3.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.4.tgz",
|
||||
@ -1751,6 +2000,43 @@
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/es5-ext": {
|
||||
"version": "0.10.64",
|
||||
"resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
|
||||
"integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"es6-iterator": "^2.0.3",
|
||||
"es6-symbol": "^3.1.3",
|
||||
"esniff": "^2.0.1",
|
||||
"next-tick": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/es6-iterator": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
|
||||
"integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
|
||||
"dependencies": {
|
||||
"d": "1",
|
||||
"es5-ext": "^0.10.35",
|
||||
"es6-symbol": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/es6-symbol": {
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
|
||||
"integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
|
||||
"dependencies": {
|
||||
"d": "^1.0.2",
|
||||
"ext": "^1.7.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.24.2",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
|
||||
@ -1791,11 +2077,42 @@
|
||||
"@esbuild/win32-x64": "0.24.2"
|
||||
}
|
||||
},
|
||||
"node_modules/esniff": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
|
||||
"integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
|
||||
"dependencies": {
|
||||
"d": "^1.0.1",
|
||||
"es5-ext": "^0.10.62",
|
||||
"event-emitter": "^0.3.5",
|
||||
"type": "^2.7.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/estree-walker": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||
},
|
||||
"node_modules/event-emitter": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
|
||||
"integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
|
||||
"dependencies": {
|
||||
"d": "1",
|
||||
"es5-ext": "~0.10.14"
|
||||
}
|
||||
},
|
||||
"node_modules/ext": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
|
||||
"integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
|
||||
"dependencies": {
|
||||
"type": "^2.7.2"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||
@ -1858,6 +2175,23 @@
|
||||
"resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
|
||||
"integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg=="
|
||||
},
|
||||
"node_modules/html-void-elements": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz",
|
||||
"integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/i18next": {
|
||||
"version": "20.6.1",
|
||||
"resolved": "https://registry.npmjs.org/i18next/-/i18next-20.6.1.tgz",
|
||||
"integrity": "sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
||||
@ -1869,6 +2203,15 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/immer": {
|
||||
"version": "9.0.21",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
|
||||
"integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
@ -1877,6 +2220,29 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/is-hotkey": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz",
|
||||
"integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw=="
|
||||
},
|
||||
"node_modules/is-plain-object": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
|
||||
"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-url": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
|
||||
"integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
|
||||
},
|
||||
"node_modules/jquery": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
|
||||
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
|
||||
},
|
||||
"node_modules/js-cookie": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
|
||||
@ -1958,6 +2324,42 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
|
||||
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
|
||||
},
|
||||
"node_modules/lodash.camelcase": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
|
||||
"integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
|
||||
},
|
||||
"node_modules/lodash.clonedeep": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
||||
"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
|
||||
},
|
||||
"node_modules/lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
|
||||
},
|
||||
"node_modules/lodash.foreach": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
|
||||
"integrity": "sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ=="
|
||||
},
|
||||
"node_modules/lodash.isequal": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
|
||||
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
|
||||
"deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead."
|
||||
},
|
||||
"node_modules/lodash.throttle": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
|
||||
},
|
||||
"node_modules/lodash.toarray": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
|
||||
"integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw=="
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.17",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
|
||||
@ -2023,6 +2425,14 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/mime-match/-/mime-match-1.0.2.tgz",
|
||||
"integrity": "sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==",
|
||||
"dependencies": {
|
||||
"wildcard": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
@ -2050,6 +2460,11 @@
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"node_modules/namespace-emitter": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
|
||||
"integrity": "sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g=="
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.8",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
|
||||
@ -2067,6 +2482,11 @@
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/next-tick": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
|
||||
"integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
|
||||
},
|
||||
"node_modules/package-manager-detector": {
|
||||
"version": "0.2.9",
|
||||
"resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.9.tgz",
|
||||
@ -2138,11 +2558,33 @@
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/preact": {
|
||||
"version": "10.26.4",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.26.4.tgz",
|
||||
"integrity": "sha512-KJhO7LBFTjP71d83trW+Ilnjbo+ySsaAgCfXOXUlmGzJ4ygYPWmysm77yg4emwfmoz3b22yvH5IsVFHbhUaH5w==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/preact"
|
||||
}
|
||||
},
|
||||
"node_modules/prismjs": {
|
||||
"version": "1.29.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
|
||||
"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.14.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
|
||||
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
|
||||
},
|
||||
"node_modules/robust-predicates": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
|
||||
@ -2207,6 +2649,43 @@
|
||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
|
||||
},
|
||||
"node_modules/scroll-into-view-if-needed": {
|
||||
"version": "2.2.31",
|
||||
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
|
||||
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
|
||||
"dependencies": {
|
||||
"compute-scroll-into-view": "^1.0.20"
|
||||
}
|
||||
},
|
||||
"node_modules/slate": {
|
||||
"version": "0.72.8",
|
||||
"resolved": "https://registry.npmjs.org/slate/-/slate-0.72.8.tgz",
|
||||
"integrity": "sha512-/nJwTswQgnRurpK+bGJFH1oM7naD5qDmHd89JyiKNT2oOKD8marW0QSBtuFnwEbL5aGCS8AmrhXQgNOsn4osAw==",
|
||||
"dependencies": {
|
||||
"immer": "^9.0.6",
|
||||
"is-plain-object": "^5.0.0",
|
||||
"tiny-warning": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/slate-history": {
|
||||
"version": "0.66.0",
|
||||
"resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.66.0.tgz",
|
||||
"integrity": "sha512-6MWpxGQZiMvSINlCbMW43E2YBSVMCMCIwQfBzGssjWw4kb0qfvj0pIdblWNRQZD0hR6WHP+dHHgGSeVdMWzfng==",
|
||||
"dependencies": {
|
||||
"is-plain-object": "^5.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"slate": ">=0.65.3"
|
||||
}
|
||||
},
|
||||
"node_modules/snabbdom": {
|
||||
"version": "3.6.2",
|
||||
"resolved": "https://registry.npmjs.org/snabbdom/-/snabbdom-3.6.2.tgz",
|
||||
"integrity": "sha512-ig5qOnCDbugFntKi6c7Xlib8bA6xiJVk8O+WdFrV3wxbMqeHO0hXFQC4nAhPVWfZfi8255lcZkNhtIBINCc4+Q==",
|
||||
"engines": {
|
||||
"node": ">=12.17.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
@ -2215,6 +2694,11 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ssr-window": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz",
|
||||
"integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA=="
|
||||
},
|
||||
"node_modules/stylis": {
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
|
||||
@ -2229,6 +2713,11 @@
|
||||
"url": "https://github.com/sponsors/limonte"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"node_modules/tinyexec": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
|
||||
@ -2242,6 +2731,11 @@
|
||||
"node": ">=6.10"
|
||||
}
|
||||
},
|
||||
"node_modules/type": {
|
||||
"version": "2.7.3",
|
||||
"resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
|
||||
"integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ=="
|
||||
},
|
||||
"node_modules/ufo": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
|
||||
@ -2418,6 +2912,11 @@
|
||||
"vue": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/wildcard": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/wildcard/-/wildcard-1.1.2.tgz",
|
||||
"integrity": "sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng=="
|
||||
},
|
||||
"node_modules/yaml": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
|
||||
|
||||
@ -9,7 +9,10 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^1.7.9",
|
||||
"jquery": "^3.7.1",
|
||||
"js-cookie": "^3.0.5",
|
||||
"marked": "^15.0.7",
|
||||
"mermaid": "^11.4.1",
|
||||
|
||||
115
public/static/isolatedPages/pdfExtractor/index.html
Normal file
115
public/static/isolatedPages/pdfExtractor/index.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PDF Page Extractor and Cover Generator</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
|
||||
<style>
|
||||
#pdf-render {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #ddd;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Upload a PDF and Extract Specific Pages</h2>
|
||||
<input type="file" id="pdfFile" accept="application/pdf">
|
||||
<br><br>
|
||||
<label for="startPage">Start Page:</label>
|
||||
<input type="number" id="startPage" min="1">
|
||||
<label for="endPage">End Page:</label>
|
||||
<input type="number" id="endPage" min="1">
|
||||
<br><br>
|
||||
<button onclick="extractPages()">Extract Pages</button>
|
||||
<br><br>
|
||||
<a id="downloadLink" style="display: none;">Download Extracted PDF</a>
|
||||
|
||||
<h2>Generate PDF Cover Page</h2>
|
||||
<input type="file" id="pdf-upload" accept="application/pdf">
|
||||
<canvas id="pdf-render"></canvas>
|
||||
|
||||
<script>
|
||||
async function extractPages() {
|
||||
const fileInput = document.getElementById('pdfFile');
|
||||
const startPage = parseInt(document.getElementById('startPage').value);
|
||||
const endPage = parseInt(document.getElementById('endPage').value);
|
||||
|
||||
if (!fileInput.files.length) {
|
||||
alert('Please upload a PDF file.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNaN(startPage) || isNaN(endPage) || startPage <= 0 || endPage < startPage) {
|
||||
alert('Please enter a valid page range.');
|
||||
return;
|
||||
}
|
||||
|
||||
const file = fileInput.files[0];
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);
|
||||
const totalPages = pdfDoc.getPageCount();
|
||||
|
||||
if (startPage > totalPages || endPage > totalPages) {
|
||||
alert('Page range exceeds the total number of pages in the PDF.');
|
||||
return;
|
||||
}
|
||||
|
||||
const newPdfDoc = await PDFLib.PDFDocument.create();
|
||||
for (let i = startPage - 1; i < endPage; i++) {
|
||||
const [copiedPage] = await newPdfDoc.copyPages(pdfDoc, [i]);
|
||||
newPdfDoc.addPage(copiedPage);
|
||||
}
|
||||
|
||||
const pdfBytes = await newPdfDoc.save();
|
||||
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
|
||||
const downloadLink = document.getElementById('downloadLink');
|
||||
downloadLink.href = URL.createObjectURL(blob);
|
||||
downloadLink.download = 'extracted_pages.pdf';
|
||||
downloadLink.style.display = 'block';
|
||||
downloadLink.textContent = 'Download Extracted PDF';
|
||||
}
|
||||
|
||||
document.getElementById('pdf-upload').addEventListener('change', async function(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file && file.type === "application/pdf") {
|
||||
const fileReader = new FileReader();
|
||||
|
||||
fileReader.onload = async function() {
|
||||
const typedArray = new Uint8Array(this.result);
|
||||
const loadingTask = pdfjsLib.getDocument(typedArray);
|
||||
|
||||
try {
|
||||
const pdf = await loadingTask.promise;
|
||||
const page = await pdf.getPage(1); // 获取第一页
|
||||
|
||||
const viewport = page.getViewport({ scale: 1.5 });
|
||||
const canvas = document.getElementById('pdf-render');
|
||||
const context = canvas.getContext('2d');
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
|
||||
// 渲染页面
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport
|
||||
};
|
||||
await page.render(renderContext).promise;
|
||||
|
||||
console.log('封面生成成功');
|
||||
} catch (error) {
|
||||
console.error('无法加载 PDF 文件:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fileReader.readAsArrayBuffer(file);
|
||||
} else {
|
||||
alert('请选择一个有效的 PDF 文件');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -36,7 +36,8 @@ onMounted(async () => {
|
||||
} else {
|
||||
AuthService.logout();
|
||||
}
|
||||
updateGlobalTheme(store.state.theme)
|
||||
updateGlobalTheme(store.state.theme);
|
||||
|
||||
})
|
||||
|
||||
// 监听 Vuex 主题状态的变化，更新全局样式
|
||||
|
||||
@ -2,9 +2,15 @@ import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
import $ from 'jquery';
|
||||
import './style.css'
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.config.globalProperties.$ = $;
|
||||
window.$ = $;
|
||||
window.jQuery = $;
|
||||
|
||||
app.use(router);
|
||||
app.use(store);
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,426 +1,543 @@
|
||||
<script setup>
|
||||
|
||||
import GeneralRenderer from "../components/GeneralRenderer.vue";
|
||||
import {onMounted, onUnmounted, ref, watch} from "vue";
|
||||
import store from "../store/index.js";
|
||||
import swal from "../utils/sweetalert.js";
|
||||
import getCurrentTime from "../utils/getCurrentTime.js";
|
||||
import Swal from "sweetalert2";
|
||||
import api from "../utils/axios.js";
|
||||
|
||||
const contentInput = ref(store.state.editStore.blog || '');
|
||||
const titleInput = ref(store.state.editStore.blogTitle || '')
|
||||
|
||||
const portMode = ref('both');
|
||||
const windowWidth = ref(0);
|
||||
const isMobileMode = ref(false);
|
||||
const isMenuOpen = ref(false);
|
||||
|
||||
const funcButtons = ref([
|
||||
{name: 'h1', func: '# [cur]'},
|
||||
{name: 'h2', func: '## [cur]'},
|
||||
{name: 'h3', func: '### [cur]'},
|
||||
{name: '<s>abc</s>', func: '~~[cur]~~'},
|
||||
{name: '<b>abc</b>', func: '**[cur]**'},
|
||||
{name: '<i>abc</i>', func: '*[cur]*'},
|
||||
{name: '<code>abc</code>', func: '\`[cur]\`'},
|
||||
{name: '●', func: '- '},
|
||||
{name: 'url', func: '[[cur]](https://example.com)'},
|
||||
{name: 'img', func: ''},
|
||||
{name: 'mth', func: '$[cur]$'},
|
||||
{name: 'Mth', func: '$$[cur]$$'},
|
||||
])
|
||||
function clickFuncBtn(func) {
|
||||
const textarea = document.querySelector('textarea'); // 获取 textarea 元素
|
||||
const startPos = textarea.selectionStart; // 获取焦点的起始位置
|
||||
const endPos = textarea.selectionEnd; // 获取焦点的结束位置
|
||||
const selectedText = textarea.value.slice(startPos, endPos); // 获取选中的文本
|
||||
let newText;
|
||||
if (selectedText) {
|
||||
newText = func.replace('[cur]', selectedText);
|
||||
} else {
|
||||
newText = func.replace('[cur]', '请在此填写内容');
|
||||
}
|
||||
textarea.setRangeText(newText, startPos, endPos, 'select'); // 替换选中的文本
|
||||
contentInput.value = textarea.value;
|
||||
const curPos = textarea.value.indexOf('[cur]');
|
||||
textarea.selectionStart = curPos;
|
||||
textarea.selectionEnd = curPos;
|
||||
textarea.focus();
|
||||
}
|
||||
const checkWindowSize = () => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
if (windowWidth.value < 705) {
|
||||
isMobileMode.value = true;
|
||||
} else {
|
||||
isMobileMode.value = false;
|
||||
isMenuOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const saveDocument = () => {
|
||||
store.commit('saveEdit', {
|
||||
blog: contentInput.value,
|
||||
blogTitle: titleInput.value,
|
||||
blogSaveTime: getCurrentTime()
|
||||
});
|
||||
swal.tip('success', '保存成功')
|
||||
};
|
||||
|
||||
const handleKeydown = (event) => {
|
||||
// 检查是否按下了 Ctrl + S
|
||||
if (event.ctrlKey && event.key === 's') {
|
||||
event.preventDefault(); // 阻止浏览器默认的保存行为
|
||||
saveDocument(); // 调用保存函数
|
||||
}
|
||||
};
|
||||
|
||||
const submitDocument = async () => {
|
||||
if (!titleInput.value) {
|
||||
swal.tip('info', '标题为必填项');
|
||||
return;
|
||||
}
|
||||
if (!contentInput.value) {
|
||||
swal.tip('info', '内容为必填项');
|
||||
return;
|
||||
}
|
||||
store.commit('saveEdit', {
|
||||
blog: contentInput.value,
|
||||
blogTitle: titleInput.value,
|
||||
blogSaveTime: getCurrentTime()
|
||||
});
|
||||
const result = await Swal.fire({
|
||||
title: '是否允许评论',
|
||||
html:
|
||||
'<label class="swal2-switch checkbox-label">' +
|
||||
'<input type="checkbox" id="swal-switch" class="swal2-switch-input">' ,
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '提交',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
if (result.isConfirmed) {
|
||||
const isChecked = document.getElementById('swal-switch').checked;
|
||||
const formData = new FormData();
|
||||
formData.append('title', titleInput.value);
|
||||
formData.append('content', contentInput.value);
|
||||
formData.append('allowComments', isChecked);
|
||||
store.commit('startLoading');
|
||||
api.post('/blogs', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data', // 确保设置正确的 Content-Type
|
||||
},
|
||||
}).then(result => {
|
||||
if (result.code === 1) {
|
||||
swal.tip('success', `提交成功！id${ ('为'+ result.blogId) || '读取失败...' }`);
|
||||
store.commit('stopLoading');
|
||||
return;
|
||||
}
|
||||
swal.tip('error', `错误（其他状态码 ${result.code}`)
|
||||
store.commit('stopLoading');
|
||||
}).catch(result => {
|
||||
swal.tip('error', `错误 请求失败 ${result.code}`)
|
||||
store.commit('stopLoading');
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
watch(portMode, async () => {
|
||||
setTimeout(() => {
|
||||
contentInput.value = contentInput.value + ' ';
|
||||
}, 1)
|
||||
setTimeout(() => {
|
||||
contentInput.value = contentInput.value.slice(0, -1);
|
||||
}, 2)
|
||||
});
|
||||
|
||||
watch(contentInput, () => {
|
||||
if (store.state.editAutoSave.on && store.state.editAutoSave.interval === 114514) {
|
||||
store.commit('saveEdit', {
|
||||
blog: contentInput.value,
|
||||
blogTitle: titleInput.value,
|
||||
blogSaveTime: getCurrentTime()
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
watch(titleInput, () => {
|
||||
if (store.state.editAutoSave.on && store.state.editAutoSave.interval === 114514) {
|
||||
store.commit('saveEdit', {
|
||||
blog: contentInput.value,
|
||||
blogTitle: titleInput.value,
|
||||
blogSaveTime: getCurrentTime()
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
checkWindowSize();
|
||||
window.addEventListener('resize', checkWindowSize);
|
||||
window.addEventListener('keydown', handleKeydown);
|
||||
autoSave = setInterval(()=>{
|
||||
if (! store.state.editAutoSave.on || store.state.editAutoSave.interval === 114514) {
|
||||
return;
|
||||
}
|
||||
store.commit('saveEdit', {
|
||||
blog: contentInput.value,
|
||||
blogTitle: titleInput.value,
|
||||
blogSaveTime: getCurrentTime()
|
||||
});
|
||||
}, store.state.editAutoSave.interval);
|
||||
});
|
||||
|
||||
let autoSave
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(autoSave);
|
||||
autoSave = undefined;
|
||||
window.removeEventListener('keydown', handleKeydown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container" :class="{'compact-form': isMobileMode}">
|
||||
<div class="header">
|
||||
<input placeholder="输入标题" v-model="titleInput">
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="function-btn" :style="{flex: isMobileMode?1:3}">
|
||||
<button v-if="! isMobileMode" v-for="btn in funcButtons" v-html="btn.name" @click="clickFuncBtn(btn.func)"/>
|
||||
<button v-if="isMobileMode" @click="isMenuOpen = ! isMenuOpen">☰</button>
|
||||
<div v-if="isMobileMode && isMenuOpen" class="function-btn-menu">
|
||||
<button v-for="btn in funcButtons" v-html="btn.name" @click="clickFuncBtn(btn.func)"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="port-btn">
|
||||
<button @click="portMode = 'both'" :class="{onMode: portMode === 'both'}">双</button>
|
||||
<button @click="portMode = 'edit'" :class="{onMode: portMode === 'edit'}">编</button>
|
||||
<button @click="portMode = 'view'" :class="{onMode: portMode === 'view'}">看</button>
|
||||
</div>
|
||||
<div class="doc-btn">
|
||||
<button @click="saveDocument">保存</button>
|
||||
<button @click="submitDocument">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div v-if="portMode !== 'view'" class="left">
|
||||
<textarea v-model="contentInput"></textarea>
|
||||
</div>
|
||||
<div v-if="portMode !== 'edit'" class="right">
|
||||
<GeneralRenderer :content-input="contentInput"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="characters">总字符数: {{ contentInput.length }}</div>
|
||||
<div class="auto-save-switch" @click="store.commit('toggleAutoSave')">自动保存: {{ store.state.editAutoSave.on ? '开' : '关' }} </div>
|
||||
<div class="save-time-display">{{ store.state.editStore.blogSaveTime ? `上次保存 [${store.state.editStore.blogSaveTime}` : ''}}]</div>
|
||||
<div class="container">
|
||||
<div class="editor-container">
|
||||
<Toolbar
|
||||
class="tool-bar"
|
||||
:editor="editorRef"
|
||||
:defaultConfig="toolbarConfig"
|
||||
:mode="mode"
|
||||
/>
|
||||
<Editor
|
||||
:defaultConfig="editorConfig"
|
||||
:mode="mode"
|
||||
v-model="valueHtml"
|
||||
@onCreated="handleCreated"
|
||||
@onChange="handleChange"
|
||||
@onDestroyed="handleDestroyed"
|
||||
@onFocus="handleFocus"
|
||||
@onBlur="handleBlur"
|
||||
@customAlert="customAlert"
|
||||
@customPaste="customPaste"
|
||||
/>
|
||||
</div>
|
||||
<button class="submit-btn" @click="submitBlog">提交</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import '@wangeditor/editor/dist/css/style.css';
|
||||
import {ref, shallowRef, onMounted, onBeforeUnmount} from 'vue';
|
||||
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
|
||||
import api from "../utils/axios.js";
|
||||
import swal from "../utils/sweetalert.js";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
const editorRef = shallowRef();
|
||||
|
||||
// 内容 HTML
|
||||
const valueHtml = ref('<p>hello</p>');
|
||||
const imagesCache = ref([]);
|
||||
|
||||
// 工具栏和编辑器配置
|
||||
const toolbarConfig = {};
|
||||
const editorConfig = {
|
||||
placeholder: '请输入内容...',
|
||||
MENU_CONF: {},
|
||||
};
|
||||
|
||||
// 模式
|
||||
const mode = 'default';
|
||||
|
||||
|
||||
toolbarConfig.excludeKeys = ["insertImage", "group-video", "fullScreen", "insertTable"];
|
||||
toolbarConfig.modalAppendToBody = true;
|
||||
|
||||
|
||||
editorConfig.MENU_CONF.uploadImage = {
|
||||
fieldName: "image", // 后端接收字段名
|
||||
|
||||
async customUpload(file, insertFn) {
|
||||
|
||||
const index = imagesCache.value.length; // 当前图片索引
|
||||
|
||||
// 读取图片尺寸
|
||||
const imageSize = await getImageSize(file);
|
||||
|
||||
// 存入缓存
|
||||
imagesCache.value.push({
|
||||
file,
|
||||
originalWidth: imageSize.width,
|
||||
originalHeight: imageSize.height
|
||||
});
|
||||
|
||||
// 生成临时预览 URL
|
||||
const objectURL = URL.createObjectURL(file);
|
||||
insertFn(objectURL, `image-${index}`, objectURL); // 插入编辑器
|
||||
}
|
||||
};
|
||||
// 🎯 读取图片原始尺寸的函数
|
||||
const getImageSize = (file) => {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.src = URL.createObjectURL(file);
|
||||
img.onload = () => {
|
||||
resolve({width: img.width, height: img.height});
|
||||
};
|
||||
});
|
||||
};
|
||||
// 模拟 Ajax 异步获取内容
|
||||
onMounted(() => {
|
||||
// setTimeout(() => {
|
||||
// valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
|
||||
// // valueHtml.value = valueHtml.value.replaceAll(
|
||||
// // '<holder>',
|
||||
// // ''
|
||||
// // );
|
||||
// }, 1500);
|
||||
});
|
||||
|
||||
// 组件销毁时销毁编辑器实例
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value;
|
||||
if (editor == null) return;
|
||||
editor.destroy();
|
||||
});
|
||||
|
||||
async function showInputPopup() {
|
||||
try {
|
||||
while (1) {
|
||||
const result = await Swal.fire({
|
||||
title: '请输入标题',
|
||||
input: 'text',
|
||||
inputLabel: '标题',
|
||||
inputPlaceholder: '请输入您的标题...',
|
||||
showCancelButton: true,
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonText: '确定',
|
||||
inputValidator: (value) => {
|
||||
if (!value) {
|
||||
return '标题不能为空！'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 判断用户操作
|
||||
if (!result.isConfirmed) {
|
||||
return -1;
|
||||
}
|
||||
const title = result.value;
|
||||
|
||||
if (title) {
|
||||
const result = await swal.window('info', `确定吗?`, `用"${title}"作为标题`, '确定', '重输');
|
||||
if (result.isConfirmed) {
|
||||
return title;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('输入弹窗出错:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 🚀 提交博客
|
||||
const submitBlog = async () => {
|
||||
if (!editorRef.value) return;
|
||||
|
||||
const title = await showInputPopup();
|
||||
if (title === -1) {
|
||||
return;
|
||||
}
|
||||
const response = await swal.window('info', '允许评论吗?', '其他用户可以在你的博客下留言', '允许', '不允许');
|
||||
let allowComments = response.isConfirmed;
|
||||
|
||||
let content = editorRef.value.getHtml(); // 获取 HTML 内容
|
||||
const images = [...imagesCache.value]; // 复制图片数组
|
||||
|
||||
// 解析 `<img>` 并处理宽高
|
||||
const imgTags = content.match(/<img[^>]+>/g) || [];
|
||||
|
||||
// 创建 blob URL 到索引的映射
|
||||
const urlToIndexMap = new Map();
|
||||
let uniqueIndex = 0;
|
||||
|
||||
// 第一步：为每个唯一的 blob URL 分配索引
|
||||
imgTags.forEach((imgTag) => {
|
||||
const srcMatch = imgTag.match(/src=["']([^"']+)["']/);
|
||||
if (srcMatch) {
|
||||
const src = srcMatch[1]; // 提取 blob URL
|
||||
if (!urlToIndexMap.has(src)) {
|
||||
urlToIndexMap.set(src, uniqueIndex);
|
||||
uniqueIndex++;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 第二步：替换 `<img>` 标签并处理宽高
|
||||
imgTags.forEach((imgTag) => {
|
||||
const srcMatch = imgTag.match(/src=["']([^"']+)["']/);
|
||||
if (srcMatch) {
|
||||
const src = srcMatch[1];
|
||||
const index = urlToIndexMap.get(src); // 获取相同 blob URL 的索引
|
||||
const styleMatch = imgTag.match(/style=["']([^"']+)["']/);
|
||||
let width = "", height = "";
|
||||
|
||||
// 获取图片的原始尺寸（从 images 中根据 blob URL 匹配）
|
||||
const imageData = images.find((img) => URL.createObjectURL(img.file) === src);
|
||||
const originalWidth = imageData?.originalWidth || 0;
|
||||
const originalHeight = imageData?.originalHeight || 0;
|
||||
|
||||
if (styleMatch && styleMatch[1]) {
|
||||
const styleStr = styleMatch[1];
|
||||
const widthMatch = styleStr.match(/width:\s*([\d.]+)px/);
|
||||
const heightMatch = styleStr.match(/height:\s*([\d.]+)px/);
|
||||
const percentWidthMatch = styleStr.match(/width:\s*([\d.]+)%/);
|
||||
|
||||
if (widthMatch) {
|
||||
width = widthMatch[1];
|
||||
} else if (percentWidthMatch && originalWidth) {
|
||||
width = ((parseFloat(percentWidthMatch[1]) / 100) * originalWidth).toFixed(2);
|
||||
}
|
||||
|
||||
if (heightMatch) {
|
||||
height = heightMatch[1];
|
||||
} else if (width && originalWidth && originalHeight) {
|
||||
height = ((width / originalWidth) * originalHeight).toFixed(2);
|
||||
}
|
||||
} else {
|
||||
width = originalWidth;
|
||||
height = originalHeight;
|
||||
}
|
||||
|
||||
// 替换为占位符，使用相同的索引
|
||||
content = content.replace(imgTag, `<preholder image ${index} width=${width} height=${height}>`);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 2️⃣ 构造表单数据
|
||||
const formData = new FormData();
|
||||
formData.append("title", title);
|
||||
formData.append("content", content);
|
||||
formData.append("allow_comments", allowComments);
|
||||
|
||||
|
||||
images.forEach((imgData, index) => {
|
||||
formData.append(`images[${index}]`, imgData.file); // 按索引存储图片
|
||||
});
|
||||
|
||||
console.log(Object.fromEntries(formData.entries()));
|
||||
// 3️⃣ 发送请求
|
||||
api.post('/blogs', formData).then(response => {
|
||||
if (response.status !== 200) {
|
||||
swal.tip('error', `404'}`);
|
||||
return;
|
||||
}
|
||||
if (response.code === 0) {
|
||||
swal.window('success', `提交成功, 博客id${response.blogId || '未找到(blogId字段)'}`);
|
||||
return;
|
||||
}
|
||||
swal.tip('error', '提交失败, code字段不为0')
|
||||
}).catch((e) => {
|
||||
swal.tip('error', `错误${e.message}`)
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// 编辑器回调函数
|
||||
const handleCreated = (editor) => {
|
||||
// console.log('created', editor);
|
||||
editorRef.value = editor; // 记录 editor 实例
|
||||
};
|
||||
|
||||
const handleChange = (editor) => {
|
||||
// console.log('change:', editor.getHtml());
|
||||
};
|
||||
|
||||
const handleDestroyed = (editor) => {
|
||||
// console.log('destroyed', editor);
|
||||
};
|
||||
|
||||
const handleFocus = (editor) => {
|
||||
// console.log('focus', editor);
|
||||
};
|
||||
|
||||
const handleBlur = (editor) => {
|
||||
// console.log('blur', editor);
|
||||
};
|
||||
|
||||
const customAlert = (info, type) => {
|
||||
// alert(`【自定义提示】${type} - ${info}`);
|
||||
};
|
||||
|
||||
const customPaste = (editor, event, callback) => {
|
||||
// console.log('ClipboardEvent 粘贴事件对象', event);
|
||||
// editor.insertText('xxx');
|
||||
// callback(false); // 阻止默认粘贴行为
|
||||
};
|
||||
|
||||
// 按钮点击事件
|
||||
const insertText = () => {
|
||||
const editor = editorRef.value;
|
||||
if (editor == null) return;
|
||||
editor.insertText('hello world');
|
||||
};
|
||||
|
||||
const printHtml = () => {
|
||||
const editor = editorRef.value;
|
||||
if (editor == null) return;
|
||||
console.log(editor.getHtml());
|
||||
};
|
||||
|
||||
const disable = () => {
|
||||
const editor = editorRef.value;
|
||||
if (editor == null) return;
|
||||
editor.disable();
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
background: #131313;
|
||||
width: calc(100% - 40px);
|
||||
height: calc(100vh - 100px);
|
||||
padding: 20px;
|
||||
max-width: none;
|
||||
height: calc(100vh - 65px);
|
||||
max-width: 1300px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.container.compact-form {
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
padding: 0;
|
||||
}
|
||||
.theme-light .container {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.header {
|
||||
flex: 0 0 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
font-size: initial;
|
||||
background: #2a2a2a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.theme-light .header input {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
.top {
|
||||
flex: 0 0 40px;
|
||||
width: 100%;
|
||||
background: #3d3d3d;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
align-content: space-between;
|
||||
}
|
||||
.theme-light .top {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.function-btn {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-left: 5px;
|
||||
gap: 5px;
|
||||
}
|
||||
.function-btn-menu {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
max-height: 100px;
|
||||
gap: 3px;
|
||||
padding: 3px;
|
||||
top: 190px;
|
||||
left: 30px;
|
||||
//width: 100px;
|
||||
//height: 50px;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.port-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.doc-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-right: 5px;
|
||||
gap: 5px;
|
||||
}
|
||||
.doc-btn button {
|
||||
width: auto !important;
|
||||
}
|
||||
.top button {
|
||||
color: white;
|
||||
background: #131313;
|
||||
border: #007bff solid 2px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.submit-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
border: #ffb74d solid 3px;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
opacity: 0.3;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
opacity: 1;
|
||||
background: #ffb74d;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
width: 99%;
|
||||
height: 100vh;
|
||||
max-height: 100%;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #5d5d5d;
|
||||
overflow: hidden;
|
||||
}
|
||||
.top button.onMode {
|
||||
background: #007bff;
|
||||
border: #007bff solid 2px;
|
||||
}
|
||||
.theme-light .top button {
|
||||
color: black;
|
||||
background: white;
|
||||
border: #ffb74d solid 2px;
|
||||
}
|
||||
.theme-light .top button.onMode {
|
||||
background: #ffb74d;
|
||||
border: #ffb74d solid 2px;
|
||||
|
||||
.theme-light .editor-container {
|
||||
border: 1px solid #c4c4c4;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
flex: 0 0 25px;
|
||||
width: 100%;
|
||||
</style>
|
||||
<style>
|
||||
div[data-slate-editor] {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.w-e-text-container {
|
||||
background: #2a2a2a;
|
||||
color: gray;
|
||||
font-size: small;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.theme-light .bottom {
|
||||
background: white;
|
||||
outline: gray solid 1px;
|
||||
|
||||
.w-e-toolbar {
|
||||
background: #1c1c1c;
|
||||
border-bottom: 1px solid #595959;
|
||||
}
|
||||
.bottom .characters {
|
||||
margin: 0 5px;
|
||||
|
||||
.w-e-toolbar button {
|
||||
color: #e5e5e5;
|
||||
background-color: #262626;
|
||||
}
|
||||
.bottom .save-time-display {
|
||||
margin: 0 5px;
|
||||
|
||||
.w-e-bar-item button:hover {
|
||||
color: white;
|
||||
background-color: #494949;
|
||||
}
|
||||
.bottom .auto-save-switch:hover {
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
cursor: pointer;
|
||||
|
||||
.w-e-bar-item .disabled:hover {
|
||||
background-color: #494949;
|
||||
}
|
||||
.middle {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
max-height: calc(100vh - 125px);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.w-e-bar-item-group .w-e-bar-item-menus-container {
|
||||
background-color: #262626;
|
||||
border: #464646 solid 1px;
|
||||
}
|
||||
|
||||
.w-e-toolbar svg {
|
||||
fill: #e5e5e5;
|
||||
}
|
||||
|
||||
.w-e-drop-panel {
|
||||
background: #262626;
|
||||
}
|
||||
|
||||
.w-e-panel-content-table {
|
||||
background-color: #262626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.w-e-panel-content-table td {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
.w-e-panel-content-table td.active {
|
||||
background-color: #494949;
|
||||
}
|
||||
|
||||
#w-e-textarea-1 {
|
||||
background: #000000;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.w-e-bar-divider {
|
||||
background: #595959;
|
||||
}
|
||||
|
||||
.w-e-select-list {
|
||||
background: #262626;
|
||||
}
|
||||
|
||||
.w-e-select-list ul {
|
||||
background: #262626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.w-e-select-list ul .selected {
|
||||
background: #494949;
|
||||
}
|
||||
|
||||
.w-e-select-list ul li:hover {
|
||||
background: #595959;
|
||||
}
|
||||
|
||||
.w-e-drop-panel, .w-e-select-list {
|
||||
border: #464646 solid 1px;
|
||||
}
|
||||
|
||||
.w-e-panel-content-color li {
|
||||
border: #464646 solid 1px;
|
||||
}
|
||||
|
||||
.w-e-panel-content-color li .color-block {
|
||||
border: #464646 solid 1px;
|
||||
}
|
||||
|
||||
.w-e-hover-bar {
|
||||
background: black;
|
||||
}
|
||||
|
||||
/* 亮色模式 */
|
||||
.theme-light .w-e-text-container {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.theme-light .w-e-toolbar {
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
.theme-light .w-e-toolbar button {
|
||||
color: #333333;
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
.theme-light .w-e-bar-item .disabled svg {
|
||||
fill: #b6b6b6;
|
||||
}
|
||||
|
||||
.theme-light .w-e-bar-item .disabled {
|
||||
color: #b6b6b6;
|
||||
}
|
||||
|
||||
.theme-light .w-e-bar-item button:hover {
|
||||
color: black;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
.theme-light .w-e-bar-item .disabled:hover {
|
||||
color: #b6b6b6;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
.theme-light .w-e-bar-item-group .w-e-bar-item-menus-container {
|
||||
background-color: #ebebeb;
|
||||
border: #d4d4d4 solid 1px;
|
||||
}
|
||||
|
||||
.theme-light .w-e-toolbar svg {
|
||||
fill: #333333;
|
||||
}
|
||||
|
||||
.theme-light .w-e-drop-panel {
|
||||
background: #ebebeb;
|
||||
}
|
||||
|
||||
.theme-light .w-e-panel-content-table {
|
||||
background-color: #ffffff;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.theme-light .w-e-panel-content-table td {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-light .w-e-panel-content-table td.active {
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
.theme-light #w-e-textarea-1 {
|
||||
background: #ffffff;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.theme-light .w-e-bar-divider {
|
||||
background: #d4d4d4;
|
||||
}
|
||||
|
||||
.theme-light .w-e-select-list {
|
||||
background: #ebebeb;
|
||||
}
|
||||
|
||||
.theme-light .w-e-select-list ul {
|
||||
background: #ebebeb;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.theme-light .w-e-select-list ul .selected {
|
||||
background: #dcdcdc;
|
||||
}
|
||||
|
||||
.theme-light .w-e-select-list ul li:hover {
|
||||
background: #d4d4d4;
|
||||
}
|
||||
|
||||
.theme-light .w-e-drop-panel, .theme-light .w-e-select-list {
|
||||
border: #d4d4d4 solid 1px;
|
||||
}
|
||||
|
||||
.theme-light .w-e-panel-content-color li {
|
||||
border: #d4d4d4 solid 1px;
|
||||
}
|
||||
|
||||
.theme-light .w-e-panel-content-color li .color-block {
|
||||
border: #d4d4d4 solid 1px;
|
||||
}
|
||||
|
||||
.theme-light .w-e-hover-bar {
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
.middle .left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: rgba(128, 128, 128, 0.5) solid 1px;
|
||||
}
|
||||
.left textarea {
|
||||
width: calc(100% - 2 * (15px));
|
||||
height: calc(100% - 2 * (15px));
|
||||
resize: none;
|
||||
padding: 15px;
|
||||
font-size: 17px;
|
||||
font-family: sans-serif,serif;
|
||||
border: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.left textarea {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
.theme-light .left textarea {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
.left textarea:focus {
|
||||
outline: #007bff solid 1px;
|
||||
}
|
||||
.theme-light .left textarea:focus {
|
||||
outline: #ffb74d solid 1px;
|
||||
}
|
||||
.middle .right {
|
||||
flex: 1;
|
||||
width: calc(100% - 2 * (15px));
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
border: rgba(128, 128, 128, 0.5) solid 1px;
|
||||
color: white;
|
||||
overflow: auto;
|
||||
padding: 0 15px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.theme-light .right {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
426
src/pages/MdLatexEditor.vue
Normal file
426
src/pages/MdLatexEditor.vue
Normal file
@ -0,0 +1,426 @@
|
||||
<script setup>
|
||||
|
||||
import GeneralRenderer from "../components/GeneralRenderer.vue";
|
||||
import {onMounted, onUnmounted, ref, watch} from "vue";
|
||||
import store from "../store/index.js";
|
||||
import swal from "../utils/sweetalert.js";
|
||||
import getCurrentTime from "../utils/getCurrentTime.js";
|
||||
import Swal from "sweetalert2";
|
||||
import api from "../utils/axios.js";
|
||||
|
||||
const contentInput = ref(store.state.editStore.blog || '');
|
||||
const titleInput = ref(store.state.editStore.blogTitle || '')
|
||||
|
||||
const portMode = ref('both');
|
||||
const windowWidth = ref(0);
|
||||
const isMobileMode = ref(false);
|
||||
const isMenuOpen = ref(false);
|
||||
|
||||
const funcButtons = ref([
|
||||
{name: 'h1', func: '# [cur]'},
|
||||
{name: 'h2', func: '## [cur]'},
|
||||
{name: 'h3', func: '### [cur]'},
|
||||
{name: '<s>abc</s>', func: '~~[cur]~~'},
|
||||
{name: '<b>abc</b>', func: '**[cur]**'},
|
||||
{name: '<i>abc</i>', func: '*[cur]*'},
|
||||
{name: '<code>abc</code>', func: '\`[cur]\`'},
|
||||
{name: '●', func: '- '},
|
||||
{name: 'url', func: '[[cur]](https://example.com)'},
|
||||
{name: 'img', func: ''},
|
||||
{name: 'mth', func: '$[cur]$'},
|
||||
{name: 'Mth', func: '$$[cur]$$'},
|
||||
])
|
||||
function clickFuncBtn(func) {
|
||||
const textarea = document.querySelector('textarea'); // 获取 textarea 元素
|
||||
const startPos = textarea.selectionStart; // 获取焦点的起始位置
|
||||
const endPos = textarea.selectionEnd; // 获取焦点的结束位置
|
||||
const selectedText = textarea.value.slice(startPos, endPos); // 获取选中的文本
|
||||
let newText;
|
||||
if (selectedText) {
|
||||
newText = func.replace('[cur]', selectedText);
|
||||
} else {
|
||||
newText = func.replace('[cur]', '请在此填写内容');
|
||||
}
|
||||
textarea.setRangeText(newText, startPos, endPos, 'select'); // 替换选中的文本
|
||||
contentInput.value = textarea.value;
|
||||
const curPos = textarea.value.indexOf('[cur]');
|
||||
textarea.selectionStart = curPos;
|
||||
textarea.selectionEnd = curPos;
|
||||
textarea.focus();
|
||||
}
|
||||
const checkWindowSize = () => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
if (windowWidth.value < 705) {
|
||||
isMobileMode.value = true;
|
||||
} else {
|
||||
isMobileMode.value = false;
|
||||
isMenuOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const saveDocument = () => {
|
||||
store.commit('saveEdit', {
|
||||
blog: contentInput.value,
|
||||
blogTitle: titleInput.value,
|
||||
blogSaveTime: getCurrentTime()
|
||||
});
|
||||
swal.tip('success', '保存成功')
|
||||
};
|
||||
|
||||
const handleKeydown = (event) => {
|
||||
// 检查是否按下了 Ctrl + S
|
||||
if (event.ctrlKey && event.key === 's') {
|
||||
event.preventDefault(); // 阻止浏览器默认的保存行为
|
||||
saveDocument(); // 调用保存函数
|
||||
}
|
||||
};
|
||||
|
||||
const submitDocument = async () => {
|
||||
if (!titleInput.value) {
|
||||
swal.tip('info', '标题为必填项');
|
||||
return;
|
||||
}
|
||||
if (!contentInput.value) {
|
||||
swal.tip('info', '内容为必填项');
|
||||
return;
|
||||
}
|
||||
store.commit('saveEdit', {
|
||||
blog: contentInput.value,
|
||||
blogTitle: titleInput.value,
|
||||
blogSaveTime: getCurrentTime()
|
||||
});
|
||||
const result = await Swal.fire({
|
||||
title: '是否允许评论',
|
||||
html:
|
||||
'<label class="swal2-switch checkbox-label">' +
|
||||
'<input type="checkbox" id="swal-switch" class="swal2-switch-input">' ,
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '提交',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
if (result.isConfirmed) {
|
||||
const isChecked = document.getElementById('swal-switch').checked;
|
||||
const formData = new FormData();
|
||||
formData.append('title', titleInput.value);
|
||||
formData.append('content', contentInput.value);
|
||||
formData.append('allowComments', isChecked);
|
||||
store.commit('startLoading');
|
||||
api.post('/blogs', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data', // 确保设置正确的 Content-Type
|
||||
},
|
||||
}).then(result => {
|
||||
if (result.code === 1) {
|
||||
swal.tip('success', `提交成功！id${ ('为'+ result.blogId) || '读取失败...' }`);
|
||||
store.commit('stopLoading');
|
||||
return;
|
||||
}
|
||||
swal.tip('error', `错误（其他状态码 ${result.code}`)
|
||||
store.commit('stopLoading');
|
||||
}).catch(result => {
|
||||
swal.tip('error', `错误 请求失败 ${result.code}`)
|
||||
store.commit('stopLoading');
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
watch(portMode, async () => {
|
||||
setTimeout(() => {
|
||||
contentInput.value = contentInput.value + ' ';
|
||||
}, 1)
|
||||
setTimeout(() => {
|
||||
contentInput.value = contentInput.value.slice(0, -1);
|
||||
}, 2)
|
||||
});
|
||||
|
||||
watch(contentInput, () => {
|
||||
if (store.state.editAutoSave.on && store.state.editAutoSave.interval === 114514) {
|
||||
store.commit('saveEdit', {
|
||||
blog: contentInput.value,
|
||||
blogTitle: titleInput.value,
|
||||
blogSaveTime: getCurrentTime()
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
watch(titleInput, () => {
|
||||
if (store.state.editAutoSave.on && store.state.editAutoSave.interval === 114514) {
|
||||
store.commit('saveEdit', {
|
||||
blog: contentInput.value,
|
||||
blogTitle: titleInput.value,
|
||||
blogSaveTime: getCurrentTime()
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
checkWindowSize();
|
||||
window.addEventListener('resize', checkWindowSize);
|
||||
window.addEventListener('keydown', handleKeydown);
|
||||
autoSave = setInterval(()=>{
|
||||
if (! store.state.editAutoSave.on || store.state.editAutoSave.interval === 114514) {
|
||||
return;
|
||||
}
|
||||
store.commit('saveEdit', {
|
||||
blog: contentInput.value,
|
||||
blogTitle: titleInput.value,
|
||||
blogSaveTime: getCurrentTime()
|
||||
});
|
||||
}, store.state.editAutoSave.interval);
|
||||
});
|
||||
|
||||
let autoSave
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(autoSave);
|
||||
autoSave = undefined;
|
||||
window.removeEventListener('keydown', handleKeydown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container" :class="{'compact-form': isMobileMode}">
|
||||
<div class="header">
|
||||
<input placeholder="输入标题" v-model="titleInput">
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="function-btn" :style="{flex: isMobileMode?1:3}">
|
||||
<button v-if="! isMobileMode" v-for="btn in funcButtons" v-html="btn.name" @click="clickFuncBtn(btn.func)"/>
|
||||
<button v-if="isMobileMode" @click="isMenuOpen = ! isMenuOpen">☰</button>
|
||||
<div v-if="isMobileMode && isMenuOpen" class="function-btn-menu">
|
||||
<button v-for="btn in funcButtons" v-html="btn.name" @click="clickFuncBtn(btn.func)"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="port-btn">
|
||||
<button @click="portMode = 'both'" :class="{onMode: portMode === 'both'}">双</button>
|
||||
<button @click="portMode = 'edit'" :class="{onMode: portMode === 'edit'}">编</button>
|
||||
<button @click="portMode = 'view'" :class="{onMode: portMode === 'view'}">看</button>
|
||||
</div>
|
||||
<div class="doc-btn">
|
||||
<button @click="saveDocument">保存</button>
|
||||
<button @click="submitDocument">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div v-if="portMode !== 'view'" class="left">
|
||||
<textarea v-model="contentInput"></textarea>
|
||||
</div>
|
||||
<div v-if="portMode !== 'edit'" class="right">
|
||||
<GeneralRenderer :content-input="contentInput"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="characters">总字符数: {{ contentInput.length }}</div>
|
||||
<div class="auto-save-switch" @click="store.commit('toggleAutoSave')">自动保存: {{ store.state.editAutoSave.on ? '开' : '关' }} </div>
|
||||
<div class="save-time-display">{{ store.state.editStore.blogSaveTime ? `上次保存 [${store.state.editStore.blogSaveTime}` : ''}}]</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
background: #131313;
|
||||
width: calc(100% - 40px);
|
||||
height: calc(100vh - 100px);
|
||||
padding: 20px;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.container.compact-form {
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
padding: 0;
|
||||
}
|
||||
.theme-light .container {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.header {
|
||||
flex: 0 0 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
font-size: initial;
|
||||
background: #2a2a2a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.theme-light .header input {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
.top {
|
||||
flex: 0 0 40px;
|
||||
width: 100%;
|
||||
background: #3d3d3d;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
align-content: space-between;
|
||||
}
|
||||
.theme-light .top {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.function-btn {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-left: 5px;
|
||||
gap: 5px;
|
||||
}
|
||||
.function-btn-menu {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
max-height: 100px;
|
||||
gap: 3px;
|
||||
padding: 3px;
|
||||
top: 190px;
|
||||
left: 30px;
|
||||
//width: 100px;
|
||||
//height: 50px;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.port-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.doc-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-right: 5px;
|
||||
gap: 5px;
|
||||
}
|
||||
.doc-btn button {
|
||||
width: auto !important;
|
||||
}
|
||||
.top button {
|
||||
color: white;
|
||||
background: #131313;
|
||||
border: #007bff solid 2px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.top button.onMode {
|
||||
background: #007bff;
|
||||
border: #007bff solid 2px;
|
||||
}
|
||||
.theme-light .top button {
|
||||
color: black;
|
||||
background: white;
|
||||
border: #ffb74d solid 2px;
|
||||
}
|
||||
.theme-light .top button.onMode {
|
||||
background: #ffb74d;
|
||||
border: #ffb74d solid 2px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
flex: 0 0 25px;
|
||||
width: 100%;
|
||||
background: #2a2a2a;
|
||||
color: gray;
|
||||
font-size: small;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.theme-light .bottom {
|
||||
background: white;
|
||||
outline: gray solid 1px;
|
||||
}
|
||||
.bottom .characters {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.bottom .save-time-display {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.bottom .auto-save-switch:hover {
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.middle {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
max-height: calc(100vh - 125px);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
.middle .left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: rgba(128, 128, 128, 0.5) solid 1px;
|
||||
}
|
||||
.left textarea {
|
||||
width: calc(100% - 2 * (15px));
|
||||
height: calc(100% - 2 * (15px));
|
||||
resize: none;
|
||||
padding: 15px;
|
||||
font-size: 17px;
|
||||
font-family: sans-serif,serif;
|
||||
border: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.left textarea {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
.theme-light .left textarea {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
.left textarea:focus {
|
||||
outline: #007bff solid 1px;
|
||||
}
|
||||
.theme-light .left textarea:focus {
|
||||
outline: #ffb74d solid 1px;
|
||||
}
|
||||
.middle .right {
|
||||
flex: 1;
|
||||
width: calc(100% - 2 * (15px));
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
border: rgba(128, 128, 128, 0.5) solid 1px;
|
||||
color: white;
|
||||
overflow: auto;
|
||||
padding: 0 15px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.theme-light .right {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
21
src/pages/Test_page.vue
Normal file
21
src/pages/Test_page.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<script setup>
|
||||
import {ref} from "vue";
|
||||
|
||||
const blogDisplay = ref('<h2>654654654</h2><ul><li><strong>砍砍价考核表计划表</strong></li></ul><ol><li><strong>1第三方代发</strong></li><li><strong>水电费水电费sd f收到f</strong></li><li><strong>收到f sd </strong></li><li><strong>11234</strong></li></ol>')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div v-html="blogDisplay"></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {onMounted, ref} from 'vue';
|
||||
import ToolsBox from "../components/Tools_box.vue";
|
||||
|
||||
const categories = ref([
|
||||
@ -12,8 +12,22 @@ const searchQuery = ref('');
|
||||
|
||||
const tools = ref([
|
||||
{ id: 1, title: 'GPA在线计算器', description: '手动输入在线算', image: null, category: ['计算'] },
|
||||
{ id: 2, title: 'PDF页面提取器', description: '提取指定页和封面', image: null, category: ['提取', 'pdf'] },
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
const tags = {};
|
||||
tools.value.forEach(tool => {
|
||||
tool.category.forEach(tag => {
|
||||
tags[tag] = tags[tag]+1 || 1;
|
||||
})
|
||||
})
|
||||
function topNKeys(obj, n) {
|
||||
let sortedEntries = Object.entries(obj).sort((a, b) => b[1] - a[1]);
|
||||
return sortedEntries.slice(0, n).map(entry => entry[0]);
|
||||
}
|
||||
categories.value = topNKeys(tags, 10).map(tag => { return { name: tag, active: false }})
|
||||
})
|
||||
|
||||
// Toggle function for categories, only one category can be active at a time
|
||||
const toggleCategory = (category) => {
|
||||
|
||||
@ -16,6 +16,7 @@ const pageLoading = ref(false);
|
||||
const sendCD = ref(0);
|
||||
|
||||
const userInput = ref('');
|
||||
let timer = null;
|
||||
|
||||
async function refreshBoard(page, pageSize) {
|
||||
if (!page) {
|
||||
@ -56,6 +57,7 @@ async function refreshBoard(page, pageSize) {
|
||||
|
||||
async function goPage(page) {
|
||||
const messageTemp = messages.value
|
||||
const pageTemp = currentPage.value;
|
||||
pageLoading.value = true;
|
||||
currentPage.value = page;
|
||||
if (await refreshBoard(page) === 0) {
|
||||
@ -65,6 +67,7 @@ async function goPage(page) {
|
||||
}
|
||||
swal.tip('error', '加载留言板失败...')
|
||||
messages.value = messageTemp;
|
||||
currentPage.value = pageTemp;
|
||||
pageLoading.value = false;
|
||||
}
|
||||
|
||||
@ -128,16 +131,16 @@ watch(sendCD, (newValue) => {
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
sendCD.value = store.state.demosLocal.board?.sendCD || 0;
|
||||
await refreshBoard();
|
||||
timer = setInterval(refreshBoard, 7000)
|
||||
timer = setInterval(refreshBoard, 7000);
|
||||
});
|
||||
let timer
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer);
|
||||
timer = undefined;
|
||||
})
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null; // ✅ 避免悬空定时器
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
23
src/pages/toolPages/pdfExtractor/pdfEx_page.vue
Normal file
23
src/pages/toolPages/pdfExtractor/pdfEx_page.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<iframe src="/static/isolatedPages/pdfExtractor/index.html" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 40px);
|
||||
padding: 0;
|
||||
}
|
||||
iframe {
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -19,10 +19,13 @@ import Pod_page from "../pages/demoPages/podExercise/Pod_page.vue";
|
||||
import Pod_quiz from "../pages/demoPages/podExercise/Quiz.vue";
|
||||
import Tools_home from "../pages/Tools_home.vue";
|
||||
import GpaCalculator_page from "../pages/toolPages/gpaCalculator/gpaCalculator_page.vue";
|
||||
import PdfEx_page from "../pages/toolPages/pdfExtractor/pdfEx_page.vue";
|
||||
import About from "../pages/About.vue";
|
||||
import Editor from "../pages/Editor.vue";
|
||||
import NotFound from "../pages/errorPages/notFound.vue";
|
||||
|
||||
import Test_page from "../pages/Test_page.vue";
|
||||
|
||||
const routes = [
|
||||
{path: '/404',
|
||||
name: '404',
|
||||
@ -76,6 +79,8 @@ const routes = [
|
||||
children: [
|
||||
{path: "1", component: GpaCalculator_page},
|
||||
{path: "gpa", component: GpaCalculator_page},
|
||||
{path: "2", component: PdfEx_page},
|
||||
{path: "pdf-extractor", component: PdfEx_page},
|
||||
]
|
||||
}, {
|
||||
path: '/about',
|
||||
@ -100,6 +105,11 @@ const routes = [
|
||||
name: 'Editor',
|
||||
component: Editor,
|
||||
meta: {title: '编辑器'},
|
||||
},{
|
||||
path: '/test_page',
|
||||
name: 'Test',
|
||||
component: Test_page,
|
||||
meta: {title: '测试页'},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -126,7 +126,7 @@ code {
|
||||
|
||||
/* 选中的滚动条滑块效果 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #888;
|
||||
background-color: #565656;
|
||||
}
|
||||
|
||||
.theme-light ::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user