✌️

src/web/app/dev/views/apps.vue

@@ -1,21 +1,21 @@
 <template>
-<div>
-	<h1>アプリを管理</h1>
-	<router-link to="/app/new">アプリ作成</router-link>
-	<div class="apps">
-		<p v-if="fetching">読み込み中</p>
-		<template v-if="!fetching">
-			<p v-if="apps.length == 0">アプリなし</p>
-			<ul v-else>
-				<li v-for="app in apps" :key="app.id">
-					<router-link :to="`/app/${app.id}`">
-						<p class="name">{{ app.name }}</p>
-					</router-link>
-				</li>
-			</ul>
-		</template>
-	</div>
-</div>
+<mk-ui>
+	<b-card header="アプリを管理">
+		<b-button to="/app/new" variant="primary">アプリ作成</b-button>
+		<hr>
+		<div class="apps">
+			<p v-if="fetching">読み込み中</p>
+			<template v-if="!fetching">
+				<b-alert v-if="apps.length == 0">アプリなし</b-alert>
+				<b-list-group v-else>
+					<b-list-group-item v-for="app in apps" :key="app.id" :to="`/app/${app.id}`">
+						{{ app.name }}
+					</b-list-group-item>
+				</b-list-group>
+			</template>
+		</div>
+	</b-card>
+</mk-ui>
 </template>
 
 <script lang="ts">