refactor: added component names

crawlab-team · Jun 20, 2024 · d7841f9 · d7841f9
1 parent 69c7927
commit d7841f9
Show file tree

Hide file tree

Showing 59 changed files with 266 additions and 375 deletions.
diff --git a/scripts/gen-index.js b/scripts/gen-index.js
@@ -31,6 +31,11 @@ function processFile(filePath, moduleName) {
   const fileName = path.basename(filePath);
   const relPath = `.${filePath.replace(getModulePath(moduleName), '')}`;
 
+  // skip index.ts
+  if (fileName.split('.')[0] === INDEX_COMP_NAME) {
+    return;
+  }
+
   if (filePath.endsWith('.vue')) {
     const compName = fileName.replace('.vue', '');
     const importLine = `import ${compName} from '${relPath}';`;
@@ -84,8 +89,8 @@ function genIndex(moduleName) {
 
 function addComponentName(content, componentName) {
   const setupScriptTagRegex = /(<script\s+setup[^>]*lang=["']ts["'][^>]*>)/;
-  const defineOptionsRegex = /defineOptions\(\{[^}]*}\);?/;
-  const newDefineOptions = `defineOptions({ name: '${COMPONENT_PREFIX}${componentName}' });`;
+  const defineOptionsRegex = /defineOptions\(\{[^}]*}\);?(\n+)?/;
+  const newDefineOptions = `defineOptions({ name: '${COMPONENT_PREFIX}${componentName}' });\n\n`;
 
   // Check if the script setup tag exists
   if (setupScriptTagRegex.test(content)) {

diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
@@ -1,6 +1,42 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClButton' });
+
+import { computed } from 'vue';
+
+export interface ButtonProps {
+  tooltip?: string;
+  type?: string;
+  size?: string;
+  round?: boolean;
+  circle?: boolean;
+  plain?: boolean;
+  disabled?: boolean;
+  isIcon?: boolean;
+  loading?: boolean;
+  onClick?: () => void;
+  className?: string;
+  id?: string;
+  noMargin?: boolean;
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  type: 'primary',
+  size: 'default',
+});
+
+const cls = computed<string>(() => {
+  const { noMargin, className, isIcon } = props;
+  const classes = [];
+  if (noMargin) classes.push('no-margin');
+  if (isIcon) classes.push('icon-button');
+  if (className) classes.push(className);
+  return classes.join(' ');
+});
+</script>
+
 <template>
   <el-tooltip :content="tooltip" :disabled="!tooltip">
-    <span :id="id" :class="cls">
+    <span :id="id" :class="['button-wrapper', cls].join(' ')">
       <el-button
         :circle="circle"
         :disabled="disabled"
@@ -18,92 +54,6 @@
   </el-tooltip>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-
-export const buttonProps = {
-  tooltip: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  type: {
-    type: String as PropType<BasicType>,
-    required: false,
-    default: 'primary',
-  },
-  size: {
-    type: String as PropType<BasicSize>,
-    required: false,
-    default: 'default',
-  },
-  round: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  circle: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  plain: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  isIcon: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  noMargin: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  loading: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  className: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  id: {
-    type: String,
-    required: false,
-  },
-};
-
-export default defineComponent({
-  name: 'Button',
-  props: buttonProps,
-  emits: ['click'],
-  setup(props: ButtonProps) {
-    const cls = computed<string>(() => {
-      const { noMargin, className, isIcon } = props;
-      const classes = ['button-wrapper'];
-      if (noMargin) classes.push('no-margin');
-      if (isIcon) classes.push('icon-button');
-      if (className) classes.push(className);
-      return classes.join(' ');
-    });
-
-    return {
-      cls,
-    };
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 .button-wrapper {
   position: relative;
@@ -123,14 +73,4 @@ export default defineComponent({
 .button-wrapper:deep(.icon-button) {
   padding: 7px;
 }
-
-.button-wrapper.label-button:deep(.icon),
-.button-wrapper.icon-button:deep(.icon) {
-  width: 20px;
-}
-
-.button-wrapper.fa-icon-button:deep(.el-button--small) {
-  width: 32px;
-  height: 32px;
-}
 </style>
diff --git a/src/components/button/FaIconButton.vue b/src/components/button/FaIconButton.vue
@@ -1,3 +1,25 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClFaIconButton' });
+
+import { computed } from 'vue';
+import { ButtonProps } from '@/components/button/Button.vue';
+
+export interface FaIconButtonProps extends ButtonProps {
+  icon: Icon;
+  badgeIcon?: Icon;
+  spin?: boolean;
+}
+
+const props = defineProps<FaIconButtonProps>();
+
+const cls = computed<string>(() => {
+  const { className } = props;
+  const classes = ['fa-icon-button'];
+  if (className) classes.push(className);
+  return classes.join(' ');
+});
+</script>
+
 <template>
   <cl-button
     :circle="circle"
@@ -19,44 +41,6 @@
   </cl-button>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import { buttonProps } from './Button.vue';
-
-export const faIconButtonProps = {
-  icon: {
-    type: [Array, String] as PropType<Icon>,
-    required: true,
-  },
-  badgeIcon: {
-    type: [Array, String] as PropType<Icon>,
-    required: false,
-  },
-  spin: {
-    type: Boolean,
-    required: false,
-  },
-  ...buttonProps,
-};
-
-export default defineComponent({
-  name: 'FaIconButton',
-  props: faIconButtonProps,
-  emits: ['click'],
-  setup(props: FaIconButtonProps) {
-    const cls = computed<string>(() => {
-      const { className } = props;
-      const classes = ['fa-icon-button'];
-      if (className) classes.push(className);
-      return classes.join(' ');
-    });
-
-    return {
-      cls,
-    };
-  },
-});
-</script>
 <style lang="scss" scoped>
 .badge-icon {
   position: absolute;
@@ -76,4 +60,9 @@ export default defineComponent({
 .fa-icon-button:deep(.button) {
   padding: 7px;
 }
+
+.fa-icon-button:deep(.el-button--small) {
+  width: 32px;
+  height: 32px;
+}
 </style>
diff --git a/src/components/button/IconButton.vue b/src/components/button/IconButton.vue
@@ -1,3 +1,15 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClIconButton' });
+
+import { ButtonProps } from '@/components/button/Button.vue';
+
+export interface IconButtonProps extends ButtonProps {
+  icon: string;
+}
+
+withDefaults(defineProps<IconButtonProps>(), {});
+</script>
+
 <template>
   <el-tooltip :content="tooltip ? tooltip : undefined">
     <span>
@@ -10,33 +22,20 @@
         :size="size"
         :title="tooltip"
         :type="type"
-        class="icon-button button p-1"
+        class="icon-button button"
         @click="() => $emit('click')"
       />
     </span>
   </el-tooltip>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { buttonProps } from '@/components/button/Button.vue';
-
-export const iconButtonProps = {
-  icon: {
-    type: String,
-    required: true,
-  },
-  ...buttonProps,
-};
-
-export default defineComponent({
-  name: 'IconButton',
-  props: iconButtonProps,
-  emits: ['click'],
-  setup() {
-    return {};
-  },
-});
-</script>
-
 <style lang="scss" scoped></style>
+<style scoped>
+.icon-button {
+  padding: 7px;
+}
+
+.icon-button:deep(.icon) {
+  width: 20px;
+}
+</style>
diff --git a/src/components/button/LabelButton.vue b/src/components/button/LabelButton.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClLabelButton' });
+
+import { ButtonProps } from '@/components/button/Button.vue';
+
+export interface LabelButtonProps extends ButtonProps {
+  label: string;
+  icon: string;
+}
+
+withDefaults(defineProps<LabelButtonProps>(), {
+  label: '',
+  icon: '',
+});
+</script>
+
 <template>
   <cl-button
     :circle="circle"
@@ -18,27 +34,9 @@
   </cl-button>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { buttonProps } from '@/components/button/Button.vue';
-
-export default defineComponent({
-  name: 'LabelButton',
-  props: {
-    icon: {
-      type: [Array, String] as PropType<Icon>,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    ...buttonProps,
-  },
-  emits: ['click'],
-  setup(props: LabelButtonProps, { emit }) {
-    return {};
-  },
-});
-</script>
-
 <style lang="scss" scoped></style>
+<style scoped>
+.label-button:deep(.icon) {
+  width: 20px;
+}
+</style>
diff --git a/src/components/dialog/CreateEditDialog.vue b/src/components/dialog/CreateEditDialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClCreateEditDialog' });
+
 import { computed, provide } from 'vue';
 import { sendEvent } from '@/admin/umeng';
 import { emptyArrayFunc, translate } from '@/utils';

diff --git a/src/components/file/FileActions.vue b/src/components/file/FileActions.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileActions' });
+
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';

diff --git a/src/components/file/FileEditor.vue b/src/components/file/FileEditor.vue
@@ -1,5 +1,6 @@
 <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';

diff --git a/src/components/file/FileEditorNavMenu.vue b/src/components/file/FileEditorNavMenu.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClFileEditorNavMenu' });
+
 import {
   computed,
   onBeforeUnmount,