ตั้งค่าระบบ => UI

src/modules/04_system/views/MainView.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/**
+ * import type
+ */
+import type { ItemsTeb } from "@/modules/04_system/interface/index/Main";
+
+/**
+ * import components
+ */
+import Card from "@/modules/04_system/components/cardBackupRestore.vue";
+
+/**
+ * ตัวแปร
+ */
+const tab = ref<string>("backup");
+const tabItems = ref<ItemsTeb[]>([
+  { name: "backup", label: "Backup", icon: "mdi-database" },
+  { name: "restore", label: "Restore", icon: "restore" },
+]);
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">ตั้งค่าระบบ</div>
+  </div>
+  <q-card flast bordered>
+    <q-tabs
+      v-model="tab"
+      dense
+      align="left"
+      inline-label
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <div v-for="item in tabItems">
+        <q-tab :name="item.name" :label="item.label" :icon="item.icon" />
+      </div>
+    </q-tabs>
+    <q-separator />
+    <q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
+      <q-tab-panel name="backup">
+        <q-card-section class="q-pa-none">
+          <div class="text-h6">ข้อมูลสำรอง</div>
+        </q-card-section>
+
+        <Card :tab="tab" />
+      </q-tab-panel>
+
+      <q-tab-panel name="restore">
+        <q-card-section class="q-pa-none">
+          <div class="text-h6">คืนค่า</div>
+        </q-card-section>
+        <Card :tab="tab" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
+</template>
+
+<style scoped></style>