🕹️ fix: eslint for vue template order (#55)

pdsuwwz · Jul 22, 2024 · 729f25e · 729f25e
1 parent bee268b
commit 729f25e
Show file tree

Hide file tree

Showing 21 changed files with 489 additions and 487 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,17 +1,3 @@
-<template>
-  <NConfigProvider
-    class="h-full"
-    :locale="zhCN"
-    :date-locale="dateZhCN"
-    :theme="theme"
-    :theme-overrides="themeOverrides"
-  >
-    <NaiveProvider>
-      <RouterView />
-    </NaiveProvider>
-  </NConfigProvider>
-</template>
-
 <script lang="ts" setup>
 import NaiveProvider from './provider/NaiveProvider.vue'
 
@@ -27,6 +13,20 @@ const route = useRoute()
 
 </script>
 
+<template>
+  <NConfigProvider
+    class="h-full"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    :theme="theme"
+    :theme-overrides="themeOverrides"
+  >
+    <NaiveProvider>
+      <RouterView />
+    </NaiveProvider>
+  </NConfigProvider>
+</template>
+
 <style lang="scss">
 @use "@/styles/index.scss";
 </style>
diff --git a/src/components/404.vue b/src/components/404.vue
@@ -1,15 +1,15 @@
-<template>
-  <div>
-    <h1>NOT-FOUND 404</h1>
-  </div>
-</template>
-
 <script lang="ts" setup>
 defineOptions({
   name: 'NotFound'
 })
 </script>
 
+<template>
+  <div>
+    <h1>NOT-FOUND 404</h1>
+  </div>
+</template>
+
 <style>
 
 </style>
diff --git a/src/components/FooterCustom/index.vue b/src/components/FooterCustom/index.vue
@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+import Octocat from './octocat.vue'
+
+withDefaults(
+  defineProps<{
+    showBorder?: boolean
+  }>(),
+  {
+    showBorder: false
+  }
+)
+
+const link = ref('https://github.com/pdsuwwz')
+
+</script>
+
 <template>
   <footer
     class="footer"
@@ -23,21 +39,7 @@
     </div>
   </footer>
 </template>
-<script lang="ts" setup>
-import Octocat from './octocat.vue'
 
-withDefaults(
-  defineProps<{
-    showBorder?: boolean
-  }>(),
-  {
-    showBorder: false
-  }
-)
-
-const link = ref('https://github.com/pdsuwwz')
-
-</script>
 <style lang="scss" scoped>
 .footer {
   margin: 0 auto;

diff --git a/src/components/FooterCustom/octocat.vue b/src/components/FooterCustom/octocat.vue
@@ -1,3 +1,15 @@
+<script lang="ts">
+export default defineComponent({
+  name: 'Octocat',
+  setup() {
+    const link = ref('https://github.com/pdsuwwz/vite-naive-template')
+    return {
+      link
+    }
+  }
+})
+</script>
+
 <template>
   <a
     class="octocat-link c-#71717a dark:c-#666 hover-c-#3f3f46 dark:hover-c-#f6f5f7"
@@ -19,17 +31,6 @@
   </a>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'Octocat',
-  setup() {
-    const link = ref('https://github.com/pdsuwwz/vite-naive-template')
-    return {
-      link
-    }
-  }
-})
-</script>
 <style lang="scss" scoped>
 .octocat-link {
   width: 22px;

diff --git a/src/components/IconFont/index.vue b/src/components/IconFont/index.vue
@@ -1,8 +1,62 @@
+<script lang="ts" setup>
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: ''
+  },
+  shadow: {
+    type: Boolean,
+    default: false
+  },
+  verticalCenter: {
+    type: Boolean,
+    default: false
+  },
+  cursor: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const getClassNames = computed(() => {
+  const classNames: string[] = []
+  if (props.verticalCenter) {
+    classNames.push('middle')
+  }
+  if (props.cursor) {
+    classNames.push('cursor')
+  }
+  if (props.disabled) {
+    classNames.push('disabled')
+  }
+  return classNames
+})
+
+const handleClick = () => {
+  !props.disabled && emit('click')
+}
+
+const getAttrs = () => {
+  const attrs: any = {}
+  props.shadow &&
+      (attrs.filter = 'url(#drop-shadow)')
+  return attrs
+}
+
+</script>
+
 <template>
   <svg
     class="icon-font"
     aria-hidden="true"
-    :class="getClassName"
+    :class="getClassNames"
     @click="handleClick()"
   >
     <filter
@@ -37,68 +91,6 @@
   </svg>
 </template>
 
-<script lang="ts">
-
-export default defineComponent({
-  name: 'IconFont',
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    shadow: {
-      type: Boolean,
-      default: false
-    },
-    verticalCenter: {
-      type: Boolean,
-      default: false
-    },
-    cursor: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click'],
-  setup (props, { emit }) {
-    const getClassName = computed(() => {
-      const className: string[] = []
-      if (props.verticalCenter) {
-        className.push('middle')
-      }
-      if (props.cursor) {
-        className.push('cursor')
-      }
-      if (props.disabled) {
-        className.push('disabled')
-      }
-      return className
-    })
-
-    const handleClick = () => {
-      !props.disabled && emit('click')
-    }
-
-    const getAttrs = () => {
-      const attrs: any = {}
-      props.shadow &&
-      (attrs.filter = 'url(#drop-shadow)')
-      return attrs
-    }
-    return {
-      getClassName,
-
-      handleClick,
-      getAttrs
-    }
-  }
-})
-</script>
-
 <style lang="scss" scoped>
 .icon-font {
   width: 1em;

diff --git a/src/components/Layout/LayoutSection.vue b/src/components/Layout/LayoutSection.vue
@@ -1,3 +1,26 @@
+<script lang="ts">
+/**
+ * 上下布局，顶部 header 大标题 + 底部内容区域
+ */
+export default defineComponent({
+  name: 'LayoutSection',
+  props: {
+    hasDivider: {
+      type: Boolean,
+      default: false
+    },
+    flexContent: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>
+
 <template>
   <div class="layout-section-container">
     <div class="layout-section-container__header">
@@ -32,29 +55,6 @@
   </div>
 </template>
 
-<script lang="ts">
-/**
- * 上下布局，顶部 header 大标题 + 底部内容区域
- */
-export default defineComponent({
-  name: 'LayoutSection',
-  props: {
-    hasDivider: {
-      type: Boolean,
-      default: false
-    },
-    flexContent: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  }
-})
-</script>
-
 <style lang="scss" scoped>
 .layout-section-container {
   display: flex;

diff --git a/src/components/Layout/index.vue b/src/components/Layout/index.vue
@@ -1,11 +1,11 @@
-<template>
-  <router-view v-slot="{ Component }">
-    <Component :is="Component" />
-  </router-view>
-</template>
-
 <script lang="ts">
 export default {
   name: 'AppMain'
 }
 </script>
+
+<template>
+  <router-view v-slot="{ Component }">
+    <Component :is="Component" />
+  </router-view>
+</template>
diff --git a/src/components/Navigation/Avatar.vue b/src/components/Navigation/Avatar.vue
@@ -1,19 +1,3 @@
-<template>
-  <n-dropdown
-    trigger="hover"
-    :options="commandList"
-  >
-    <div class="navigation-avatar">
-      <!-- <img
-        src="@/assets/images/navigation-avatar.webp"
-      > -->
-      <n-icon :size="24">
-        <div class="i-carbon:user-avatar"></div>
-      </n-icon>
-    </div>
-  </n-dropdown>
-</template>
-
 <script lang="ts">
 import Cookie from 'js-cookie'
 
@@ -58,6 +42,23 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <n-dropdown
+    trigger="hover"
+    :options="commandList"
+  >
+    <div class="navigation-avatar">
+      <!-- <img
+        src="@/assets/images/navigation-avatar.webp"
+      > -->
+      <n-icon :size="24">
+        <div class="i-carbon:user-avatar"></div>
+      </n-icon>
+    </div>
+  </n-dropdown>
+</template>
+
 <style lang="scss">
 .navigation-avatar {
   display: flex;