refactoring the route to admin console

src/components/AppHeader.vue

@@ -7,9 +7,9 @@
                 <v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn>
             </template>
             <v-list>
-                <v-list-item to="/admin/game-objects/add">{{ l.createGameObject }}</v-list-item>
-                <v-list-item to="/admin/scenarios/add">{{ l.createScenario }}</v-list-item>
-                <v-list-item to="/admin/games/add">{{ l.createGame }}</v-list-item>
+                <v-list-item to="/manage/game-objects/add">{{ l.createGameObject }}</v-list-item>
+                <v-list-item to="/manage/scenarios/add">{{ l.createScenario }}</v-list-item>
+                <v-list-item to="/manage/games/add">{{ l.createGame }}</v-list-item>
             </v-list>
         </v-menu>
     </v-app-bar>
@@ -20,12 +20,12 @@
         </v-list>
         <v-divider></v-divider>
         <v-list nav>
-            <v-list-item prepend-icon="mdi-database" to="/admin/game-objects/list" :title="l.gameObjects"></v-list-item>
-            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/admin/scenarios/list" :title="l.gameScenarios"></v-list-item>
+            <v-list-item prepend-icon="mdi-database" to="/manage/game-objects/list" :title="l.gameObjects"></v-list-item>
+            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/manage/scenarios/list" :title="l.gameScenarios"></v-list-item>
             <!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> -->
             <v-divider></v-divider>
-            <v-list-item prepend-icon="mdi-controller" :title="l.games" to="/admin/games/list"></v-list-item>
-            <v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/admin/preview/list"></v-list-item>
+            <v-list-item prepend-icon="mdi-controller" :title="l.games" to="/manage/games/list"></v-list-item>
+            <v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/manage/preview/list"></v-list-item>
             
         </v-list>
         <v-divider></v-divider>

src/pages/admin/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <Home />
-</template>
-
-<script setup>
-  //
-</script>

src/pages/index.vue

@@ -2,7 +2,7 @@
     <v-container>
         <v-row>
             <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
-                <router-link :to="`/admin/preview/${v.id}`">
+                <router-link :to="`/playground/game/${v.id}`">
                     <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
                 </router-link>
                 <div class="d-flex">

src/pages/manage/game-objects/[[id]].vue

@@ -116,3 +116,11 @@ export default {
     }
 }
 </script>
+
+<route>
+{
+    meta: {
+        layout: "console"
+    }
+}
+</route>

src/pages/manage/game-objects/list.vue

@@ -1,7 +1,7 @@
 <template>
-    <AssetBrowser @select="$router.push(`/admin/game-objects/${$event.id}`)" ref="browser">
+    <AssetBrowser @select="$router.push(`/manage/game-objects/${$event.id}`)" ref="browser">
         <template v-slot:action-buttons="{ object }">
-            <v-btn variant="tonal" density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/admin/game-objects/${object.id}`" color="blue-lighten-3"></v-btn>
+            <v-btn variant="tonal" density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/manage/game-objects/${object.id}`" color="blue-lighten-3"></v-btn>
             <v-btn variant="tonal" density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red-lighten-2"></v-btn>
         </template>
     </AssetBrowser>
@@ -34,3 +34,11 @@ export default {
     }
 }
 </script>
+
+<route>
+    {
+        meta: {
+            layout: "console"
+        }
+    }
+</route>

src/pages/manage/games/[[id]].vue

@@ -77,3 +77,11 @@ export default {
     }
 }
 </script>
+
+<route>
+    {
+        meta: {
+            layout: "console"
+        }
+    }
+</route>

src/pages/manage/games/list.vue

@@ -2,12 +2,12 @@
     <v-container>
         <v-row>
             <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
-                <router-link :to="`/admin/games/${v.id}`">
+                <router-link :to="`/manage/games/${v.id}`">
                     <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
                 </router-link>
                 <div class="d-flex">
                     <span class="flex-grow-1">{{ v.name }}</span>
-                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/admin/games/${v.id}`" color="primary"></v-btn>
+                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/manage/games/${v.id}`" color="primary"></v-btn>
                     <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
                 </div>
             </v-col>
@@ -47,3 +47,11 @@ export default {
     }
 }
 </script>
+
+<route>
+    {
+        meta: {
+            layout: "console"
+        }
+    }
+</route>

src/pages/manage/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <Home />
+</template>
+
+<script setup>
+  //
+</script>
+
+<route>
+  {
+    meta: {
+      layout: "console"
+    }
+  }
+</route>

src/pages/manage/preview/[[id]].vue

@@ -43,3 +43,11 @@ export default {
     }
 }
 </script>
+
+<route>
+    {
+        meta: {
+            layout: "console"
+        }
+    }
+</route>

src/pages/manage/preview/list.vue

@@ -0,0 +1,37 @@
+<template>
+    <v-container>
+        <v-row>
+            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
+                <router-link :to="`/manage/preview/${v.id}`">
+                    <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
+                </router-link>
+                <div class="d-flex">
+                    <span class="flex-grow-1">{{ v.name }}</span>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script>
+
+export default {
+    data(){
+        return {
+            items: []
+        }
+    },
+    
+    async created(){
+        this.items = (await this.$api.game.search()).data.data
+    },
+}
+</script>
+
+<route>
+    {
+        meta: {
+            layout: "console"
+        }
+    }
+</route>

src/pages/manage/scenarios/[[id]].vue

@@ -73,3 +73,11 @@ export default {
     }
 }
 </script>
+
+<route>
+    {
+        meta: {
+            layout: "console"
+        }
+    }
+</route>

src/pages/manage/scenarios/list.vue

@@ -2,12 +2,12 @@
     <v-container>
         <v-row>
             <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
-                <router-link :to="`/admin/scenarios/${v.id}`">
+                <router-link :to="`/manage/scenarios/${v.id}`">
                     <v-img :src="`/asset/thumb/${v.sceneThumb?.[0]}.webp`"></v-img>
                 </router-link>
                 <div class="d-flex">
                     <span class="flex-grow-1">{{ v.name }}</span>
-                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/admin/scenarios/${v.id}`" color="primary"></v-btn>
+                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/manage/scenarios/${v.id}`" color="primary"></v-btn>
                     <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
                 </div>
             </v-col>
@@ -47,3 +47,11 @@ export default {
     }
 }
 </script>
+
+<route>
+    {
+        meta: {
+            layout: "console"
+        }
+    }
+</route>

src/pages/playground/game/[[id]].vue

@@ -0,0 +1,35 @@
+<template>
+    <v-container max-width="1400">
+        <GamePlay v-model="object"></GamePlay>
+    </v-container>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            object: {},
+            valid: false,
+            rules: {
+                required: v => v ? true : this.l.fieldRequired,
+                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
+            },
+            loading: false,
+            panel: [],
+            scenarios: []
+        }
+    },
+    async mounted(){
+        this.object = (await this.$api.game.load(this.id)).data;
+        //this.$api.user.tm('test', 'test', {data: 'test'})
+    },
+    computed: {
+        id() {
+            return this.$route.params?.id;
+        }
+    },
+    methods:{
+    }
+}
+</script>