refactor: added component names

scripts/gen-index.js

@@ -89,8 +89,8 @@ function genIndex(moduleName) {
 
 function addComponentName(content, componentName) {
   const setupScriptTagRegex = /(<script\s+setup[^>]*lang=["']ts["'][^>]*>)/;
-  const defineOptionsRegex = /defineOptions\(\{[^}]*}\);?(\n+)?/;
-  const newDefineOptions = `defineOptions({ name: '${COMPONENT_PREFIX}${componentName}' });\n\n`;
+  const defineOptionsRegex = /defineOptions\(\{[^}]*}\);?\n+/;
+  const newDefineOptions = `defineOptions({ name: '${COMPONENT_PREFIX}${componentName}' });\n`;
 
   // Check if the script setup tag exists
   if (setupScriptTagRegex.test(content)) {

src/components/button/Button.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClButton' });
-
 import { computed } from 'vue';
 
 export interface ButtonProps {

src/components/button/FaIconButton.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFaIconButton' });
-
 import { computed } from 'vue';
 import { ButtonProps } from '@/components/button/Button.vue';
 

src/components/button/IconButton.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClIconButton' });
-
 import { ButtonProps } from '@/components/button/Button.vue';
 
 export interface IconButtonProps extends ButtonProps {

src/components/button/LabelButton.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClLabelButton' });
-
 import { ButtonProps } from '@/components/button/Button.vue';
 
 export interface LabelButtonProps extends ButtonProps {

src/components/dialog/CreateEditDialog.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCreateEditDialog' });
-
 import { computed, provide } from 'vue';
 import { sendEvent } from '@/admin/umeng';
 import { emptyArrayFunc, translate } from '@/utils';

src/components/dialog/Dialog.vue

@@ -1,3 +1,41 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClDialog' });
+import { translate } from '@/utils';
+
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    modalClass?: string;
+    title?: string;
+    top?: string;
+    width?: string;
+    zIndex?: number;
+    confirmDisabled?: boolean;
+    confirmLoading?: boolean;
+    className?: string;
+  }>(),
+  {
+    top: '15vh',
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'confirm'): void;
+}>();
+
+// i18n
+const t = translate;
+
+const onClose = () => {
+  emit('close');
+};
+
+const onConfirm = () => {
+  emit('confirm');
+};
+</script>
+
 <template>
   <el-dialog
     :custom-class="[className, visible ? 'visible' : 'hidden'].join(' ')"
@@ -38,70 +76,4 @@
   </el-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-export default defineComponent({
-  name: 'Dialog',
-  props: {
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    modalClass: {
-      type: String,
-    },
-    title: {
-      type: String,
-      required: false,
-    },
-    top: {
-      type: String,
-      required: false,
-      default: '15vh',
-    },
-    width: {
-      type: String,
-      required: false,
-    },
-    zIndex: {
-      type: Number,
-      required: false,
-    },
-    confirmDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    confirmLoading: {
-      type: Boolean,
-      default: false,
-    },
-    className: {
-      type: String,
-    },
-  },
-  emits: ['close', 'confirm'],
-  setup(props: DialogProps, { emit }) {
-    // i18n
-    const { t } = useI18n();
-
-    const onClose = () => {
-      emit('close');
-    };
-
-    const onConfirm = () => {
-      emit('confirm');
-    };
-
-    return {
-      onClose,
-      onConfirm,
-      t,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped></style>

src/components/file/FileActions.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileActions' });
-
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';

src/components/file/FileEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileEditor' });
-
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import * as monaco from 'monaco-editor';

src/components/file/FileEditorNavMenu.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileEditorNavMenu' });
-
 import {
   computed,
   onBeforeUnmount,

src/components/file/FileTab.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileTab' });
-
 import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';

src/components/file/FileUpload.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileUpload' });
-
 import { computed, onBeforeMount, ref, watch } from 'vue';
 import { FILE_UPLOAD_MODE_DIR, FILE_UPLOAD_MODE_FILES } from '@/constants/file';
 import { ElUpload, UploadFile } from 'element-plus';

src/components/file/UploadFilesDialog.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClUploadFilesDialog' });
-
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';

src/components/form/Form.vue

@@ -1,3 +1,56 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClForm' });
+import { computed, provide, reactive, ref } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    model?: FormModel;
+    inline?: boolean;
+    labelWidth?: string;
+    size?: string;
+    grid?: number;
+    rules?: FormRules;
+  }>(),
+  {
+    inline: true,
+    labelWidth: '150px',
+    size: 'default',
+    grid: 4,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'validate'): void;
+}>();
+
+const form = computed<FormContext>(() => {
+  const { labelWidth, size, grid } = props;
+  return { labelWidth, size, grid };
+});
+
+provide('form-context', reactive<FormContext>(form.value));
+
+const formRef = ref();
+
+const validate = async () => {
+  return await formRef.value?.validate();
+};
+
+const resetFields = () => {
+  return formRef.value?.resetFields();
+};
+
+const clearValidate = () => {
+  return formRef.value?.clearValidate();
+};
+
+defineExpose({
+  validate,
+  resetFields,
+  clearValidate,
+});
+</script>
+
 <template>
   <el-form
     ref="formRef"
@@ -14,78 +67,6 @@
   </el-form>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  provide,
-  reactive,
-  ref,
-  SetupContext,
-} from 'vue';
-import { emptyObjectFunc } from '@/utils/func';
-
-export default defineComponent({
-  name: 'Form',
-  props: {
-    model: {
-      type: Object as PropType<FormModel>,
-      default: emptyObjectFunc,
-    },
-    inline: {
-      type: Boolean,
-      default: true,
-    },
-    labelWidth: {
-      type: String,
-      default: '150px',
-    },
-    size: {
-      type: String,
-      default: 'default',
-    },
-    grid: {
-      type: Number,
-      default: 4,
-    },
-    rules: {
-      type: Object as PropType<FormRules>,
-    },
-  },
-  emits: ['validate'],
-  setup(props: FormProps, { emit }: SetupContext) {
-    const form = computed<FormContext>(() => {
-      const { labelWidth, size, grid } = props;
-      return { labelWidth, size, grid };
-    });
-
-    provide('form-context', reactive<FormContext>(form.value));
-
-    const formRef = ref();
-
-    const validate = async () => {
-      return await formRef.value?.validate();
-    };
-
-    const resetFields = () => {
-      return formRef.value?.resetFields();
-    };
-
-    const clearValidate = () => {
-      return formRef.value?.clearValidate();
-    };
-
-    return {
-      formRef,
-      validate,
-      resetFields,
-      clearValidate,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .form {
   display: flex;