changes

2026-04-15 09:43:11 +07:00
parent e5b80124fc
commit 52d6cc3ca4
6 changed files with 119 additions and 84 deletions
--- a/app/components/TopMenu.vue
+++ b/app/components/TopMenu.vue
@@ -3,7 +3,7 @@
    <div class="navbar-brand mr-5">
      <span class="navbar-item is-gap-1">
      <div style="width: 16px; height: 16px" class="has-background-primary rounded-full"></div>
-      <span class="fs-17 font-semibold has-text-primary">{{$dayjs().format('DD/MM')}}</span>
+      <span class="fs-17 font-semibold has-text-primary">{{ $dayjs().format('DD/MM') }}</span>
    </span>
      <a
        class="navbar-item p-0 has-text-primary"
@@ -11,9 +11,15 @@
      >
      <svg
        style="max-height: none; width: 44px"
-        width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
-        <path fill="currentColor" d="M40 8C57.6731 8 72 22.3269 72 40C72 57.6731 57.6731 72 40 72C22.3269 72 8 57.6731 8 40C8 22.3269 22.3269 8 40 8ZM15.7285 31.5762V49.2266H21.9854C23.778 49.2266 25.3185 48.8727 26.6055 48.166C27.898 47.4593 28.8887 46.4453 29.5781 45.124C30.2733 43.8025 30.6211 42.2224 30.6211 40.3838C30.6211 38.5511 30.2733 36.9768 29.5781 35.6611C28.8887 34.3455 27.9033 33.3367 26.6221 32.6357C25.3409 31.9292 23.8123 31.5762 22.0371 31.5762H15.7285ZM33.3857 49.2266H45.3135V46.1494H37.1172V41.9355H44.667V38.8584H37.1172V34.6533H45.2793V31.5762H33.3857V49.2266ZM53.3818 49.2266H58.1914L64.2754 31.5762H60.1387L55.8643 44.9863H55.7002L51.4346 31.5762H47.2891L53.3818 49.2266ZM21.8389 34.7734C22.942 34.7734 23.8704 34.9687 24.623 35.3594C25.3756 35.75 25.9411 36.3593 26.3203 37.1865C26.7052 38.0138 26.8984 39.0797 26.8984 40.3838C26.8984 41.6995 26.7053 42.7743 26.3203 43.6074C25.9411 44.4346 25.3726 45.047 24.6143 45.4434C23.8617 45.8339 22.9339 46.0292 21.8311 46.0293H19.4609V34.7734H21.8389Z" />
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M40.5 9C57.3447 9 71 22.6553 71 39.5C71 56.3447 57.3447 70 40.5 70C23.6553 70 10 56.3447 10 39.5C10 22.6553 23.6553 9 40.5 9ZM16 31V47.4404H19.4756V40.6494H26.5322V47.4404H30V31H26.5322V37.7832H19.4756V31H16ZM32.6396 47.4404H36.1162V41.6123H38.6533L41.7676 47.4404H45.6045L42.1143 41.0498C42.1644 41.028 42.2156 41.0094 42.2646 40.9863C43.1583 40.5689 43.8416 39.9698 44.3125 39.1885C44.7835 38.4018 45.0186 37.4619 45.0186 36.3701C45.0185 35.284 44.7857 34.3397 44.3203 33.5371C43.8601 32.7291 43.1886 32.1049 42.3057 31.666C41.428 31.2218 40.3676 31 39.126 31H32.6396V47.4404ZM47.249 47.4404H50.6201V36.6992H50.7568L55.0117 47.3604H57.3076L61.5625 36.7393H61.6982V47.4404H65.0703V31H60.7832L56.2559 42.0459H56.0635L51.5352 31H47.249V47.4404ZM38.46 33.8418C39.1289 33.8418 39.6832 33.9407 40.1221 34.1387C40.5661 34.3313 40.8953 34.6148 41.1094 34.9893C41.3288 35.3638 41.4384 35.8244 41.4385 36.3701C41.4385 36.9106 41.3288 37.3636 41.1094 37.7275C40.8953 38.0913 40.5686 38.364 40.1299 38.5459C39.6911 38.7278 39.14 38.8193 38.4766 38.8193H36.1162V33.8418H38.46Z" fill="currentColor"/>
      </svg>
+
      </a>
      <a
        role="button"
@@ -67,18 +73,28 @@
          </div>
        </template>
      </div>
-      <div v-if="false" class="navbar-end">
+      <!-- <div class="navbar-end">
        <a class="navbar-item" @click="changeTab(tabConfig)" v-if="tabConfig">
          <SvgIcon v-bind="{ name: 'configuration.svg', type: 'findata', size: 24 }"></SvgIcon>
        </a>
        <a class="navbar-item" @click="openProfile()" v-if="avatar">
          <Avatarbox v-bind="avatar"></Avatarbox>
        </a>
+      </div> -->
+      <div class="navbar-end">
+        <a class="navbar-item">
+          <div>
+            <p class="fs-13">Xin chào,</p>
+            <p class="fs-14 font-bold">Quản lý</p>
+          </div>
+          <Avatarbox text="Q" type="findata" size="two" />
+        </a>
      </div>
    </div>
  </nav>
 </template>
 <script setup>
+import Avatarbox from '@/components/common/Avatarbox.vue';
 import { watch } from "vue";
 const router = useRouter();
 const route = useRoute();
--- a/app/components/common/Avatarbox.vue
+++ b/app/components/common/Avatarbox.vue
@@ -1,28 +1,22 @@
+<script setup>
+const props = defineProps({
+  text: String,
+  image: String,
+  type: String,
+  size: Number
+});
+</script>
 <template>  
-    <div :class="`cbox-${type}-${size} mx-0 px-0`" @click="$emit('justclick')" :style="image? 'border: none' : ''">
-      <figure class="image" v-if="image">
+  <div
+    @click="$emit('justclick')"
+    class="rounded-full mx-0 px-0 size-10 font-bold is-flex is-justify-content-center is-align-items-center"
+    :style="{
+      border: image ? 'none' : '1px solid #e4e4e4'
+    }"
+  >
+    <figure v-if="image" class="image">
      <img class="is-rounded" :src="`${$path()}download?name=${image}`">
    </figure>
-    <div v-else>
-      <span>{{text}}</span>
-      </div>
+    <span v-else>{{text}}</span>
  </div>
 </template>
-<script>
-  export default {
-    props: ['text', 'image', 'type', 'size'] 
-  }
-</script>
-<style>
-.cbox-findata-two {
-  font-size: 16px;
-  font-weight: bold;
-  width: 34px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #e4e4e4;
-  border-radius: 50%;
-}
-</style>
--- a/app/components/inventory/Inventory.vue
+++ b/app/components/inventory/Inventory.vue
@@ -2,6 +2,7 @@
 import InventoryHighlightCard from '@/components/inventory/InventoryHighlightCard.vue';
 import InventoryTable from '@/components/inventory/InventoryTable.vue';

+const { $store } = useNuxtApp();
 const inventoryHighlights = [
  {
    name: 'Tổng số SKU',
@@ -33,6 +34,11 @@ const inventoryHighlights = [
 </script>
 <template>
  <div>
+    <Teleport
+      defer
+      to="#header-right-slot"
+      v-if="$store.tabinfo.tab.code === 'inventory'"
+    >
      <div class="content buttons is-justify-content-flex-end">
        <button class="button fs-14">
          <span class="icon">
@@ -59,6 +65,7 @@ const inventoryHighlights = [
          <span>Điều chỉnh</span>
        </button>
      </div>
+    </Teleport>
    <div class="fixed-grid has-2-cols-mobile has-4-cols">
      <div class="grid">
        <InventoryHighlightCard
--- a/app/components/orders/OrderReceiptTab.vue
+++ b/app/components/orders/OrderReceiptTab.vue
@@ -12,6 +12,6 @@ const props = defineProps({
      class="has-text-grey-70"
      />
    <p>Chưa có hoá đơn</p>
-    <button class="button is-primary has-background-purple">Tạo hoá đơn</button>
+    <button class="button is-purple">Tạo hoá đơn</button>
  </div> 
 </template>
--- a/app/components/orders/Orders.vue
+++ b/app/components/orders/Orders.vue
@@ -3,6 +3,7 @@ import OrderHighlightCard from '@/components/orders/OrderHighlightCard.vue';
 import OrderPipeline from '@/components/orders/OrderPipeline.vue';
 import OrdersTable from '@/components/orders/OrdersTable.vue';

+const { $store } = useNuxtApp();
 const highlights = [
  {
    name: 'Nháp',
@@ -45,7 +46,12 @@ const viewMode = ref('list');
 </script>
 <template>
  <div>
-    <div class="content is-flex is-gap-2 is-justify-content-flex-end is-align-items-center">
+    <Teleport
+      defer
+      to="#header-right-slot"
+      v-if="$store.tabinfo.tab.code === 'orders'"
+      >
+      <div class="is-flex is-gap-2 is-justify-content-flex-end is-align-items-center">
        <div class="tabs is-toggle m-0">
          <ul class="is-flex-grow-0 ml-auto">
            <li
@@ -69,6 +75,7 @@ const viewMode = ref('list');
          <span>Tạo đơn hàng</span>
        </button>
      </div>
+    </Teleport>
    <div class="fixed-grid has-2-cols-mobile has-5-cols">
      <div class="grid">
        <OrderHighlightCard
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -2,20 +2,31 @@
  <ClientOnly>
    <TopMenu @changetab="changeTab" />
    <div class="container blockdiv has-text-text-20">
-      <div class="fs-17 font-semibold mb-2 is-flex is-align-items-center is-gap-1" v-if="tab">
+      <div class="mb-2 is-flex is-justify-content-space-between is-align-items-center is-gap-1" v-if="tab">
        <template v-if="subtab">
-          <span>{{ tab[$store.lang] }}</span>
+          <span class="fs-17 font-semibold">{{ tab[$store.lang] }}</span>
          <SvgIcon class="mx-2" v-bind="{ name: 'right.svg', size: 17, type: 'has-text-black' }"></SvgIcon>
-          <span>{{ subtab[$store.lang] }}</span>
+          <span class="fs-17 font-semibold">{{ subtab[$store.lang] }}</span>
        </template>
        <div v-else>
          <div class="is-flex is-gap-1 is-align-items-center mb-1">
-            <p>{{ tab[$store.lang] }}</p>
-            <button class="button is-primary is-light rounded-full p-1" @click="refresh()">
+            <p class="fs-17 font-semibold">{{ tab[$store.lang] }}</p>
+            <button
+              @click="refresh"
+              class="button is-primary is-light rounded-full p-1"
+            >
              <Icon name="material-symbols:refresh-rounded" :size="20" />
            </button>
          </div>
-          <p class="has-text-grey fs-13 font-normal">Cập nhật: 16:25:54</p>
+          <p class="has-text-grey fs-13 font-normal">Cập nhật: 
+            <NuxtTime
+              :datetime="Date.now() - 1000 * 60 * Math.random() * 10"
+              locale="vi-VN"
+              relative
+            />
+          </p>
+        </div>
+        <div id="header-right-slot">
        </div>
      </div>
      <KeepAlive>