@chenghongyu/xpt-file-viewer 1.1.0

package/src/components/messageBox/prompt/prompt.vue

@@ -0,0 +1,178 @@
+<template>
+  <TransitionRoot as="template" :show="show">
+    <Dialog as="div" class="zfile-prompt-dialog" @close="handlerClose('close')">
+      <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
+        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 z-10 overflow-y-auto">
+        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+            <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-11/12 max-w-sm sm:w-full sm:max-w-md sm:p-6">
+              <div class="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
+                <div type="button" class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" @click="handlerClose('close')">
+                  <span class="sr-only">Close</span>
+                  <XMarkIcon class="h-6 w-6" aria-hidden="true" />
+                </div>
+              </div>
+              <div class="sm:flex sm:items-start">
+                <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+                  <PencilIcon class="h-6 w-6 text-blue-600" aria-hidden="true" />
+                </div>
+                <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left w-full space-y-1">
+                  <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">{{ title }}</DialogTitle>
+                  <div>
+                    <p class="text-gray-500 text-sm" v-if="dangerouslyUseHTMLString" v-html="message"></p>
+                    <p class="text-gray-500 text-sm" v-else>{{ message }}</p>
+                  </div>
+                  <el-input :placeholder="inputPlaceholder"
+                            v-model="form.inputModel"
+                            :type="inputType"
+                            @keyup.enter="handlerClose('confirm')"
+                            :autofocus="true"
+                            :show-password="inputType === 'password' && showPassword"
+                            class="h-10"></el-input>
+                  <div class="text-red-500 text-sm text-left" v-if="errorFields?.inputModel?.length">{{ errorFields.inputModel[0].message }}</div>
+                </div>
+              </div>
+              <div
+                :class="checkbox ? 'sm:justify-between' : 'sm:justify-end'"
+                class="mt-5 sm:mt-4 sm:flex">
+                <div class="sm:ml-14" v-if="checkbox">
+                  <el-checkbox v-model="form.checkboxModel">{{ checkboxLabel }}</el-checkbox>
+                </div>
+                <div class="space-y-4 sm:space-y-0 sm:space-x-2">
+                  <button type="button"
+                          class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                          @click="handlerClose('cancel')">
+                    {{ props.cancelButtonText }}
+                  </button>
+                  <button :disabled="!pass" type="button"
+                          :class="pass ? '' : 'cursor-not-allowed opacity-50'"
+                          class="inline-flex w-full justify-center rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-400 sm:ml-3 sm:w-auto" @click="handlerClose('confirm')">
+                    {{ confirmButtonText }}
+                  </button>
+                </div>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script lang="ts" setup>
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot
+} from "@headlessui/vue";
+import { XMarkIcon, PencilIcon } from '@heroicons/vue/24/outline'
+import { useAsyncValidator } from '@vueuse/integrations/useAsyncValidator'
+import { Rules } from "async-validator";
+import { ConfirmResult } from "./types";
+import { ElCheckbox, ElInput }  from "element-plus";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  message: {
+    type: String,
+    required: true,
+  },
+  confirmButtonText: {
+    type: String,
+    default: 'Confirm',
+  },
+  cancelButtonText: {
+    type: String,
+    default: 'Cancel',
+  },
+  checkbox: {
+    type: Boolean,
+    default: false,
+  },
+  checkboxLabel: {
+    type: String,
+    default: 'Remember me',
+  },
+  defaultChecked: {
+    type: Boolean,
+    default: false,
+  },
+  inputType: {
+    type: String,
+    default: 'text',
+  },
+  inputDefault: {
+    type: String,
+    default: ''
+  },
+  inputPlaceholder: {
+    type: String,
+    default: '请输入',
+  },
+  showPassword: {
+    type: Boolean,
+    default: true,
+  },
+  inputValidator: {
+    type: Function,
+    default: () => true,
+  },
+  inputErrorMessage: {
+    type: String,
+    default: 'input error',
+  },
+  onClose: {
+    type: Function,
+    default: () => {}
+  },
+  dangerouslyUseHTMLString: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+
+// 表单数据和校验规则
+const form = ref({ inputModel: props.inputDefault!, checkboxModel: props.defaultChecked! })
+const rules:Rules = {
+  inputModel: {
+    type: 'string',
+    required: true,
+    message: props.inputErrorMessage
+  }
+}
+
+const { pass, errorFields } = useAsyncValidator(form, rules)
+
+// 响应关闭事件
+const emit = defineEmits(['update:show'])
+const handlerClose = (type: 'cancel' | 'close' | 'confirm') => {
+  const result:ConfirmResult = {
+    checkbox: form.value.checkboxModel,
+    value: form.value.inputModel,
+    type
+  }
+
+  emit('update:show', false)
+  props.onClose!(result)
+}
+</script>
+
+<style lang="scss">
+.zfile-prompt-dialog {
+  position: relative;
+  z-index: 3000;
+}
+</style>

package/src/components/messageBox/prompt/types.ts

@@ -0,0 +1,24 @@
+
+
+export interface ConfirmResult {
+  checkbox: boolean;
+  value: string;
+  type: 'cancel' | 'close' | 'confirm';
+}
+
+export interface Props {
+  title?: string;
+  message?: string;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  inputType?: "text" | "password";
+  inputPlaceholder?: string;
+  inputDefault?: string;
+  showPassword?: boolean;
+  checkbox?: boolean;
+  checkboxLabel?: string;
+  defaultChecked?: boolean;
+  inputValidator?: Function;
+  inputErrorMessage?: string;
+  dangerouslyUseHTMLString?: boolean;
+}

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

@@ -0,0 +1,212 @@
+<template>
+  <div class="editor">
+    <div class="main">
+      <codemirror
+        v-model="code"
+        :style="{
+          width: '100%',
+          height: config.height,
+          backgroundColor: '#fff',
+          color: '#333'
+        }"
+        placeholder="Please enter the code."
+        :extensions="extensions"
+        :autofocus="config.autofocus"
+        :disabled="config.readonly"
+        :indent-with-tab="config.indentWithTab"
+        :tab-size="config.tabSize"
+        @update="handleStateUpdate"
+        @ready="handleReady"
+        @focus="log('focus', $event)"
+        @blur="log('blur', $event)"
+      />
+    </div>
+    <div class="divider"></div>
+    <div class="footer">
+      <div class="buttons" :class="{ 'invisible': config.readonly }">
+        <!-- <el-tooltip content="也可以使用快捷键 Ctrl/⌘ + S 保存" placement="top">
+          <button class="item" @click="saveFile">保存</button>
+        </el-tooltip> -->
+      </div>
+      <div class="infos">
+        <span class="item">空格: {{ config.tabSize }}</span>
+        <span class="item">总长度: {{ state.length }}</span>
+        <span class="item">行数: {{ state.lines }}</span>
+        <span class="item">光标: {{ state.cursor }}</span>
+        <span class="item">选中: {{ state.selected }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted, reactive  } from 'vue'
+import { EditorView, ViewUpdate } from '@codemirror/view'
+import { Codemirror } from 'vue-codemirror'
+import type { PropType } from "vue";
+import type { ToolBarConfig } from "./types";
+import { Compartment, EditorState } from "@codemirror/state";
+const lineWrappingComp = new Compartment();
+import { ElTooltip }  from "element-plus";
+import iconv from 'iconv-lite';
+
+const props = defineProps({
+  fileName: {
+    type: String,
+    required: true
+  },
+  config: {
+    type: Object as PropType<ToolBarConfig>,
+    required: true
+  },
+  code: {
+    type: String,
+    required: true
+  },
+  theme: [Object, Array],
+  language: Function
+})
+
+const log = console.log
+const code = ref(props.code)
+const extensions = computed(() => {
+  const result = []
+
+  if (props.config.lineWrapping) {
+    result.push(lineWrappingComp.of(EditorView.lineWrapping))
+  }
+
+  if (props.language) {
+    result.push(props.language())
+  }
+  if (props.theme) {
+    result.push(props.theme)
+  }
+  return result
+})
+
+const cmView = ref<EditorView>()
+const cmState = ref<EditorState>()
+const handleReady = ({ view, state }: { view: EditorView, state: EditorState }) => {
+  cmView.value = view
+  cmState.value = state
+}
+
+const state = reactive({
+  lines: null as null | number,
+  cursor: null as null | number,
+  selected: null as null | number,
+  length: null as null | number
+})
+
+//  当编辑器状态更新时，更新选中、光标、长度等信息
+const handleStateUpdate = (viewUpdate: ViewUpdate) => {
+  // selected
+  const ranges = viewUpdate.state.selection.ranges
+  state.selected = ranges.reduce((plus, range) => plus + range.to - range.from, 0)
+  state.cursor = ranges[0].anchor
+  // length
+  state.length = viewUpdate.state.doc.length
+  state.lines = viewUpdate.state.doc.lines
+}
+
+onMounted(() => {
+  watch(
+    () => props.code,
+    (_code) => {
+      code.value = _code
+    }
+  )
+})
+
+// vue use 监听保存快捷键
+import { useEventListener } from '@vueuse/core'
+useEventListener(window, 'keydown', (event) => {
+  if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+    event.preventDefault();
+    // saveFile()
+  }
+})
+
+// 保存文件方法
+// import useFileUpload from "~/composables/file/useFileUpload";
+// const { silentUploadFile } = useFileUpload();
+// const saveFile = () => {
+//   if (props.config?.disabled) {
+//     ElMessage.warning('只读状态下不允许保存文件');
+//     return;
+//   }
+
+//   const file = new File([iconv.encode(code.value, props.config.encoding)], props.fileName, { type: 'text/plain' });
+//   silentUploadFile(file)
+// }
+</script>
+
+<style lang="scss" scoped>
+  @import '~/styles/code-editor-variables.scss';
+  .editor {
+
+    :deep(.cm-editor) {
+      @apply h-[50vh] sm:h-[60vh] lg:h-[65vh];
+    }
+
+    .divider {
+      height: 1px;
+      background-color: $border-color;
+    }
+
+    .main {
+      display: flex;
+      width: 100%;
+      text-align: left;
+      .code {
+        width: 30%;
+        height: 100px;
+        margin: 0;
+        padding: 0.4em;
+        overflow: scroll;
+        border-left: 1px solid $border-color;
+        font-family: monospace;
+      }
+    }
+
+    .footer {
+      height: 3rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 90%;
+      width: 100%;
+      @apply max-sm:flex-col;
+
+      .buttons {
+        @apply max-sm:w-full space-x-3;
+        .item {
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          background-color: transparent;
+          border: 1px dashed $border-color;
+          font-size: $font-size-small;
+          color: $text-secondary;
+          cursor: pointer;
+          .iconfont {
+            margin-left: $xs-gap;
+          }
+          &:hover {
+            color: $text-color;
+            border-color: $text-color;
+          }
+        }
+      }
+
+      .infos {
+        @apply max-sm:w-full space-x-3;
+        .item {
+          display: inline-block;
+          font-feature-settings: 'tnum';
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,27 @@
+export default {
+  "UTF-8": "UTF-8",
+  "GB18030": "GB18030",
+  "GBK": "GBK",
+  "GB2312": "GB2312",
+  "UTF-16LE": "UTF-16LE",
+  "UTF-16BE": "UTF-16BE",
+  "UTF-32LE": "UTF-32LE",
+  "UTF-32BE": "UTF-32BE",
+  "UTF-7": "UTF-7",
+  "UTF-1": "UTF-1",
+  "UTF-EBCDIC": "UTF-EBCDIC",
+  "SCSU": "SCSU",
+  "BOCU-1": "BOCU-1",
+  "CP1250": "CP1250",
+  "CP1251": "CP1251",
+  "CP1252": "CP1252",
+  "CP1253": "CP1253",
+  "CP1254": "CP1254",
+  "CP1255": "CP1255",
+  "CP1256": "CP1256",
+  "CP1257": "CP1257",
+  "BIG5": "BIG5",
+  "Shift-JIS": "Shift-JIS",
+  "EUC-KR": "EUC-KR",
+  "TIS-620": "TIS-620"
+}