@chenghongyu/xpt-file-viewer 1.1.0

package/src/components/vue-codemirror/index.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="example" ref="codemirrorRef">
+    <!-- <toolbar
+      :config="config"
+      :themes="Object.keys(themes)"
+      :languages="Object.keys(languages)"
+      :encodings="encodings"
+      :disabled="config.disabled"
+      :readonly="config.readonly"
+      @encoding="ensureEncoding"
+      @language="ensureLanguageCode" /> -->
+    <div class="divider"></div>
+    <editor
+      v-if="modelValue"
+      :fileName="fileName"
+      :config="config"
+      :theme="currentTheme"
+      :language="currentLangCode"
+      :code="encodeModelValue" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, onBeforeMount, onMounted, defineProps, onBeforeUnmount  } from "vue";
+import languageEncoding from "detect-file-encoding-and-language";
+import languages from './languages'
+import encodings from './encodings'
+import themes from './themes'
+import Toolbar from './toolbar.vue'
+import Editor from './editor.vue'
+import { ToolBarConfig } from "./types";
+
+const config:ToolBarConfig = reactive({
+  disabled: false,
+  readonly: false,
+  indentWithTab: true,
+  tabSize: 4,
+  autofocus: true,
+  height: '60vh',
+  language: 'javascript',
+  encoding: 'UTF-8',
+  theme: 'default',
+  lineWrapping: true,
+})
+
+const langCodeMap = reactive(new Map<string, () => any>())
+const currentLangCode = computed(() => langCodeMap.get(config.language)!)
+const currentTheme = computed(() => {
+  return config.theme !== 'default' ? themes[config.theme] : void 0
+})
+
+const props = defineProps({
+  fileName: {
+    type: String,
+    required: true
+  },
+  modelValue: {
+    type: Blob,
+    required: true
+  },
+  language: {
+    type: String,
+    default: 'javascript'
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+})
+
+config.readonly = props.readonly
+
+// 编码后的 modelValue
+const encodeModelValue = ref<string>('')
+
+const ensureLanguageCode = async (targetLanguage: string) => {
+  config.language = targetLanguage
+  const delayPromise = () => new Promise((resolve) => window.setTimeout(resolve, 260))
+  if (langCodeMap.has(targetLanguage)) {
+    await delayPromise()
+  } else {
+    if (!languages[targetLanguage]) {
+      config.language = 'javascript'
+      targetLanguage = 'javascript'
+    }
+    const [result] = await Promise.all([languages[targetLanguage](), delayPromise()])
+    langCodeMap.set(targetLanguage, result.default)
+  }
+}
+
+const ensureEncoding = (encoding: string) => {
+  if (encoding) {
+    config.encoding = encoding
+    processEncoding(config.encoding)
+  } else {
+    languageEncoding(props.modelValue).then((fileInfo) => {
+      if (fileInfo.encoding && fileInfo.confidence.encoding && fileInfo.confidence.encoding > 0.5) {
+        // ElMessage.success(`检测到文件编码为 ${fileInfo.encoding}, 可能性为 ${fileInfo.confidence.encoding * 100}%`)
+      } else {
+        ElMessage.warning({
+          message: '自动检测文件编码未成功，将使用默认编码 UTF-8 打开.',
+          duration: 5000
+        })
+        fileInfo.encoding = 'UTF-8'
+      }
+
+      config.encoding = fileInfo.encoding || 'UTF-8'
+      processEncoding(config.encoding)
+    })
+  }
+}
+
+const processEncoding = (encoding: string) => {
+  let fd = new FileReader;
+  fd.onload = function () {
+    encodeModelValue.value = fd.result as string
+  }
+  fd.readAsText(props.modelValue, encoding);
+}
+
+onBeforeMount(() => {
+  ensureLanguageCode(props.language!)
+  ensureEncoding('')
+})
+
+
+const useAutoHeight = () => {
+  const codemirrorRef = ref<HTMLElement | null>(null);
+  const editorHeight = ref<string>('');
+
+  // Function to calculate editor height
+  const calculateEditorHeight = () => {
+    const bodyHeight = codemirrorRef.value?.parentElement?.offsetHeight || 0;
+    const toolbarHeight = codemirrorRef.value?.querySelector('.toolbar')?.offsetHeight || 0;
+    const dividerHeight = 9;
+    const footerHeight = codemirrorRef.value?.querySelector('.footer')?.offsetHeight || 0;
+    editorHeight.value = `calc(${bodyHeight}px - ${toolbarHeight + (dividerHeight * 2) + footerHeight + 50}px)`;
+  };
+
+  // ResizeObserver to watch for changes in parent element size
+  let resizeObserver: ResizeObserver;
+
+  onMounted(() => {
+    calculateEditorHeight();
+    resizeObserver = new ResizeObserver(() => {
+      calculateEditorHeight();
+    });
+    if (codemirrorRef.value?.parentElement) {
+      resizeObserver.observe(codemirrorRef.value.parentElement);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (resizeObserver && codemirrorRef.value?.parentElement) {
+      resizeObserver.unobserve(codemirrorRef.value.parentElement);
+    }
+  });
+
+  return {
+    codemirrorRef,
+    editorHeight
+  }
+}
+
+const { codemirrorRef, editorHeight } = useAutoHeight()
+</script>
+
+<style lang="scss" scoped>
+@import '~/styles/code-editor-variables.scss';
+
+.example {
+  .divider {
+    height: 1px;
+    background-color: $border-color;
+  }
+
+  :deep(.cm-editor) {
+    height: v-bind('editorHeight');
+  }
+
+  .loading-box {
+    overflow: auto;
+    width: 100%;
+    min-height: 20rem;
+    max-height: 60rem;
+    /* loading height = view-height - layout-height - page-height */
+    /* navbar + banner + footer */
+    $layout-height: $navbar-height + $banner-height + $footbar-height;
+    /* single-card-gap * 2 + card-header + editor-header */
+    $page-height: 2rem * 2 + 3.2rem + 3rem;
+    /* editor-border * 2 */
+    height: calc(100vh - $layout-height - $page-height - 2px);
+  }
+}
+.toolbar {
+    display: grid;
+    grid-template-columns: repeat(1,minmax(0,1fr))
+}
+
+@media (min-width: 640px) {
+    .toolbar {
+        grid-template-columns:repeat(2,minmax(0,1fr))
+    }
+}
+
+@media (min-width: 768px) {
+    .toolbar {
+        grid-template-columns:repeat(3,minmax(0,1fr))
+    }
+}
+
+@media (min-width: 1280px) {
+    .toolbar {
+        grid-template-columns:repeat(5,minmax(0,1fr))
+    }
+}
+
+.toolbar .item {
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+    display: -webkit-box;
+    display: flex
+}
+
+.toolbar .item>:not([hidden])~:not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(.25rem * var(--tw-space-x-reverse));
+    margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)))
+}
+
+@media (min-width: 640px) {
+    .toolbar .item {
+        max-width:80%
+    }
+}
+
+@media (min-width: 768px) {
+    .toolbar .item {
+        max-width:70%
+    }
+}
+
+@media (min-width: 1280px) {
+    .toolbar .item {
+        max-width:60%
+    }
+}
+
+.toolbar .item label {
+    white-space: nowrap
+}
+
+.editor .cm-editor {
+    height: 50vh
+}
+
+@media (min-width: 640px) {
+    .editor .cm-editor {
+        height:60vh
+    }
+}
+
+@media (min-width: 1024px) {
+    .editor .cm-editor {
+        height:65vh
+    }
+}
+
+.editor .divider {
+    height: 1px;
+    background-color: var(--theme-border)
+}
+
+.editor .main {
+    display: -webkit-box;
+    display: flex;
+    width: 100%
+}
+
+.editor .main .code {
+    width: 30%;
+    height: 100px;
+    margin: 0;
+    padding: .4em;
+    overflow: scroll;
+    border-left: 1px solid var(--theme-border);
+    font-family: monospace
+}
+
+.editor .footer {
+    height: 3rem;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    align-items: center;
+    font-size: 90%;
+    width: 100%
+}
+
+@media not all and (min-width: 640px) {
+    .editor .footer {
+        -webkit-box-orient:vertical;
+        -webkit-box-direction: normal;
+        flex-direction: column
+    }
+}
+
+.editor .footer .buttons>:not([hidden])~:not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(.75rem * var(--tw-space-x-reverse));
+    margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))
+}
+
+@media not all and (min-width: 640px) {
+    .editor .footer .buttons {
+        width:100%
+    }
+}
+
+.editor .footer .buttons .item {
+    display: -webkit-inline-box;
+    display: inline-flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    background-color: transparent;
+    border: 1px dashed var(--theme-border);
+    font-size: 12px;
+    color: var(--text-secondary);
+    cursor: pointer
+}
+
+.editor .footer .buttons .item .iconfont {
+    margin-left: .309rem
+}
+
+.editor .footer .buttons .item:hover {
+    color: var(--text-color);
+    border-color: var(--text-color)
+}
+
+.editor .footer .infos>:not([hidden])~:not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(.75rem * var(--tw-space-x-reverse));
+    margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))
+}
+
+@media not all and (min-width: 640px) {
+    .editor .footer .infos {
+        width:100%
+    }
+}
+
+.editor .footer .infos .item {
+    display: inline-block;
+    -webkit-font-feature-settings: "tnum";
+    font-feature-settings: "tnum"
+}
+
+.example .divider {
+    height: 1px;
+    background-color: var(--theme-border)
+}
+
+.example .cm-editor {
+    height: var(--51369a7c)
+}
+
+.example .loading-box {
+    overflow: auto;
+    width: 100%;
+    min-height: 20rem;
+    max-height: 60rem;
+    height: calc(100vh - 42.2rem - 2px)
+}
+
+</style>

package/src/components/vue-codemirror/lang-code/cpp/index.ts

@@ -0,0 +1,3 @@
+import { cpp } from '@codemirror/lang-cpp'
+
+export default cpp

package/src/components/vue-codemirror/lang-code/css/index.ts

@@ -0,0 +1,2 @@
+import { css } from '@codemirror/lang-css'
+export default css

package/src/components/vue-codemirror/lang-code/dockerfile/index.ts

@@ -0,0 +1,5 @@
+import { StreamLanguage } from '@codemirror/language'
+import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile'
+export default function() {
+  return StreamLanguage.define(dockerFile)
+}

package/src/components/vue-codemirror/lang-code/erlang/index.ts

@@ -0,0 +1,6 @@
+import { StreamLanguage } from '@codemirror/language'
+import { erlang } from '@codemirror/legacy-modes/mode/erlang'
+
+export default function() {
+  return StreamLanguage.define(erlang)
+}

package/src/components/vue-codemirror/lang-code/go/index.ts

@@ -0,0 +1,5 @@
+import { StreamLanguage } from '@codemirror/language'
+import { go } from '@codemirror/legacy-modes/mode/go'
+export default function() {
+  return StreamLanguage.define(go)
+}

package/src/components/vue-codemirror/lang-code/html/index.ts

@@ -0,0 +1,3 @@
+import { html } from '@codemirror/lang-html'
+
+export default html;

package/src/components/vue-codemirror/lang-code/java/index.ts

@@ -0,0 +1,3 @@
+import { java } from '@codemirror/lang-java'
+
+export default java

package/src/components/vue-codemirror/lang-code/javascript/index.ts

@@ -0,0 +1,3 @@
+import { javascript } from '@codemirror/lang-javascript'
+
+export default javascript

package/src/components/vue-codemirror/lang-code/json/index.ts

@@ -0,0 +1,3 @@
+import { json } from '@codemirror/lang-json'
+
+export default json

package/src/components/vue-codemirror/lang-code/jsx/index.ts

@@ -0,0 +1,3 @@
+import { javascript } from '@codemirror/lang-javascript'
+
+export default () => javascript({ jsx: true })

package/src/components/vue-codemirror/lang-code/lua/index.ts

@@ -0,0 +1,6 @@
+import { StreamLanguage } from '@codemirror/language'
+import { lua } from '@codemirror/legacy-modes/mode/lua'
+
+export default function() {
+  return StreamLanguage.define(lua)
+}

package/src/components/vue-codemirror/lang-code/markdown/index.ts

@@ -0,0 +1,2 @@
+import { markdown } from '@codemirror/lang-markdown'
+export default markdown

package/src/components/vue-codemirror/lang-code/mysql/index.ts

@@ -0,0 +1,3 @@
+import { sql, MySQL } from '@codemirror/lang-sql'
+
+export default () => sql({ dialect: MySQL })

package/src/components/vue-codemirror/lang-code/nginx/index.ts

@@ -0,0 +1,6 @@
+import { StreamLanguage } from '@codemirror/language'
+import { nginx } from '@codemirror/legacy-modes/mode/nginx'
+
+export default function() {
+  return StreamLanguage.define(nginx)
+}

package/src/components/vue-codemirror/lang-code/perl/index.ts

@@ -0,0 +1,5 @@
+import { StreamLanguage } from '@codemirror/language'
+import { perl } from '@codemirror/legacy-modes/mode/perl'
+export default function() {
+  return StreamLanguage.define(perl)
+}

package/src/components/vue-codemirror/lang-code/pgsql/index.ts

@@ -0,0 +1,2 @@
+import { sql, PostgreSQL } from '@codemirror/lang-sql'
+export default () => sql({ dialect: PostgreSQL })

package/src/components/vue-codemirror/lang-code/php/index.ts

@@ -0,0 +1,3 @@
+import { php } from '@codemirror/lang-php'
+
+export default php

package/src/components/vue-codemirror/lang-code/powershell/index.ts

@@ -0,0 +1,3 @@
+import { StreamLanguage } from '@codemirror/language'
+import { powerShell } from '@codemirror/legacy-modes/mode/powershell'
+export default () => StreamLanguage.define(powerShell)

package/src/components/vue-codemirror/lang-code/python/index.ts

@@ -0,0 +1,2 @@
+import { python } from '@codemirror/lang-python'
+export default python

package/src/components/vue-codemirror/lang-code/r/index.ts

@@ -0,0 +1,5 @@
+import { StreamLanguage } from '@codemirror/language'
+import { r } from '@codemirror/legacy-modes/mode/r'
+export default function() {
+  return StreamLanguage.define(r)
+}

package/src/components/vue-codemirror/lang-code/ruby/index.ts

@@ -0,0 +1,5 @@
+import { StreamLanguage } from '@codemirror/language'
+import { ruby } from '@codemirror/legacy-modes/mode/ruby'
+export default function() {
+  return StreamLanguage.define(ruby)
+}

package/src/components/vue-codemirror/lang-code/rust/index.ts

@@ -0,0 +1,2 @@
+import { rust } from '@codemirror/lang-rust'
+export default rust

package/src/components/vue-codemirror/lang-code/shell/index.ts

@@ -0,0 +1,5 @@
+import { StreamLanguage } from '@codemirror/language'
+import { shell } from '@codemirror/legacy-modes/mode/shell'
+export default function() {
+  return StreamLanguage.define(shell)
+}

package/src/components/vue-codemirror/lang-code/sql/index.ts

@@ -0,0 +1,3 @@
+import { sql } from '@codemirror/lang-sql'
+
+export default sql

package/src/components/vue-codemirror/lang-code/stylus/index.ts

@@ -0,0 +1,3 @@
+import { StreamLanguage } from '@codemirror/language'
+import { stylus } from '@codemirror/legacy-modes/mode/stylus'
+export default () => StreamLanguage.define(stylus)

package/src/components/vue-codemirror/lang-code/swift/index.ts

@@ -0,0 +1,4 @@
+import { StreamLanguage } from '@codemirror/language'
+import { swift } from '@codemirror/legacy-modes/mode/swift'
+
+export default () => StreamLanguage.define(swift)

package/src/components/vue-codemirror/lang-code/toml/index.ts

@@ -0,0 +1,3 @@
+import { StreamLanguage } from '@codemirror/language'
+import { toml } from '@codemirror/legacy-modes/mode/toml'
+export default () => StreamLanguage.define(toml)

package/src/components/vue-codemirror/lang-code/tsx/index.ts

@@ -0,0 +1,2 @@
+import { javascript } from '@codemirror/lang-javascript'
+export default () => javascript({ typescript: true, jsx: true })

package/src/components/vue-codemirror/lang-code/typescript/index.ts

@@ -0,0 +1,2 @@
+import { javascript } from '@codemirror/lang-javascript'
+export default () => javascript({ typescript: true })

package/src/components/vue-codemirror/lang-code/vb/index.ts

@@ -0,0 +1,3 @@
+import { StreamLanguage } from '@codemirror/language'
+import { vb } from '@codemirror/legacy-modes/mode/vb'
+export default () => StreamLanguage.define(vb)

package/src/components/vue-codemirror/lang-code/vbscript/index.ts

@@ -0,0 +1,3 @@
+import { StreamLanguage } from '@codemirror/language'
+import { vbScript } from '@codemirror/legacy-modes/mode/vbscript'
+export default () => StreamLanguage.define(vbScript)

package/src/components/vue-codemirror/lang-code/xml/index.ts

@@ -0,0 +1,2 @@
+import { xml } from '@codemirror/lang-xml'
+export default xml

package/src/components/vue-codemirror/lang-code/yaml/index.ts

@@ -0,0 +1,3 @@
+import { StreamLanguage } from '@codemirror/language'
+import { yaml } from '@codemirror/legacy-modes/mode/yaml'
+export default () => StreamLanguage.define(yaml)

package/src/components/vue-codemirror/languages.ts

@@ -0,0 +1,8 @@
+const importers = import.meta.glob<string>('./lang-code/*/index.ts')
+const languages: { [key in string]: () => any } = {}
+Object.keys(importers).forEach((fileName) => {
+  const language = fileName.replace('./lang-code/', '').replace('/index.ts', '')
+  languages[language] = importers[fileName]
+})
+
+export default languages

package/src/components/vue-codemirror/themes.ts

@@ -0,0 +1,5 @@
+import { oneDark } from '@codemirror/theme-one-dark'
+
+export default {
+  oneDark
+} as Record<string, any>