refactor: defineRouteMeta 兼容 script setup (#131)

packages/fes-preset-built-in/src/plugins/route/index.js

@@ -113,18 +113,20 @@ const genRoutes = function (parentRoutes, path, parentRoutePath, config) {
             const routeName = getRouteName(parentRoutePath, fileName);
             const componentPath = getComponentPath(parentRoutePath, ext === '.vue' ? `${fileName}${ext}` : fileName, config);
 
-            let content = readFileSync(component, 'utf-8');
+            const content = readFileSync(component, 'utf-8');
             let routeMeta = {};
             if (ext === '.vue') {
                 const { descriptor } = parse(content);
                 const routeMetaBlock = descriptor.customBlocks.find((b) => b.type === 'config');
                 routeMeta = routeMetaBlock?.content ? JSON.parse(routeMetaBlock.content) : {};
                 if (descriptor.script) {
-                    content = descriptor.script.content;
+                    routeMeta = getRouteMeta(descriptor.script.content) || routeMeta;
-                    routeMeta = getRouteMeta(content) || routeMeta;
                 }
-            }
+                // 优先使用 descriptor.script， 兼容 script 和 script setup 同时存在的情况
-            if (ext === '.jsx' || ext === '.tsx') {
+                if (descriptor.scriptSetup && lodash.isEmpty(routeMeta)) {
+                    routeMeta = getRouteMeta(descriptor.scriptSetup.content) || routeMeta;
+                }
+            } else if (ext === '.jsx' || ext === '.tsx') {
                 routeMeta = getRouteMeta(content) || {};
             }
 

packages/fes-template-h5/src/pages/index.vue

@@ -1,70 +1,13 @@
 <template>
-    <div class="onepiece m-10px text-yellow-700">
+    <div class="onepiece m-10px text-yellow-700">fes h5 & 拉夫德鲁<br /></div>
-        fes h5 & 拉夫德鲁<br />
-        <fes-icon :spin="true" class="one-icon" type="smile" @click="clickIcon" />
-        <HelloWorld />
-    </div>
 </template>
-<script>
+
-import { ref } from 'vue';
+<script setup>
-import { request, defineRouteMeta } from '@fesjs/fes';
+import { defineRouteMeta } from '@fesjs/fes';
-import HelloWorld from '@/components/helloWorld.vue';
 
 defineRouteMeta({
     title: '首页',
     name: 'testIndex',
     layout: false,
 });
-
-export default {
-    components: {
-        HelloWorld,
-    },
-    setup() {
-        const fes = ref('fes upgrade to vue3');
-        const rotate = ref(90);
-        const clickIcon = () => {
-            console.log('click icon');
-        };
-
-        const get = () => {
-            request('/api', null, {})
-                .then((data) => {
-                    console.log(data);
-                })
-                .catch((err) => {
-                    console.log('error', err);
-                });
-        };
-
-        get(1);
-
-        return {
-            fes,
-            rotate,
-            clickIcon,
-        };
-    },
-};
 </script>
-
-<style lang="less" scoped>
-@import '@/styles/mixins/hairline';
-@import '@/styles/mixins/hover';
-
-div {
-    padding: 20px;
-    p {
-        margin: 20px;
-    }
-}
-.one-icon {
-    color: yellow;
-    font-size: 24px;
-    .hover();
-}
-.onepiece {
-    text-align: center;
-    .hairline('top');
-}
-</style>

packages/fes-template/src/pages/index.vue

@@ -5,17 +5,14 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { defineRouteMeta } from '@fesjs/fes';
 import { FButton } from '@fesjs/fes-design';
 
-export default {
+defineRouteMeta({
-    components: {
+    name: 'index',
-        FButton,
+    title: '$home',
-    },
+});
-    setup() {
-        return {};
-    },
-};
 </script>
 
 <style>
@@ -23,10 +20,3 @@ export default {
     height: 1000px;
 }
 </style>
-
-<config>
-{
-    "name": "index",
-    "title": "$home"
-}
-</config>