feat(spa): UI changes

2025-10-22 17:47:15 +03:00
parent 4936e6f16c
commit ed8592c19d
10 changed files with 112 additions and 102 deletions
--- a/spa/src/App.vue
+++ b/spa/src/App.vue
@@ -17,13 +17,12 @@
 </template>

 <script setup>
-import {computed, ref, watch} from "vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
 import {useWebAppViewport} from 'vue-tg';
 import {useMiniApp, FullscreenViewport} from 'vue-tg';
 import {useRoute, useRouter} from "vue-router";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
-import {useCartStore} from "@/stores/CartStore.js";
 import CartButton from "@/components/CartButton.vue";
 import Dock from "@/components/Dock.vue";

@@ -38,7 +37,6 @@ const router = useRouter();
 const route = useRoute();
 const settings = useSettingsStore();
 const filtersStore = useProductFiltersStore();
-const cart = useCartStore();
 const backButton = window.Telegram.WebApp.BackButton;
 const haptic = window.Telegram.WebApp.HapticFeedback;

@@ -50,13 +48,7 @@ const routesToHideAppDock = [
 ];

 const isAppDockShown = computed(() => {
-  // Скрывать, если маршрут в списке скрываемых
-  // или если мы в корзине с товарами
-  const shouldHide =
-      routesToHideAppDock.includes(route.name) ||
-      (route.name === 'cart' && cart.productsCount > 0);
-
-  return !shouldHide;
+  return routesToHideAppDock.indexOf(route.name) === -1;
 });

 function navigateBack() {
@@ -77,4 +69,18 @@ watch(
    },
    {immediate: true}
 );
+
+function handleClickOutside(e) {
+  if (!e.target.closest('input')) {
+    document.activeElement?.blur();
+  }
+}
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
 </script>
--- a/spa/src/components/Dock.vue
+++ b/spa/src/components/Dock.vue
@@ -1,40 +1,59 @@
 <template>
-<div class="telecart-dock fixed bottom-0 w-full z-50 px-10">
-  <div class="telecart-dock-inner flex justify-between items-center bg-base-300/10 text-primary-content h-full backdrop-blur-md px-2 border-base-300/90 border">
-    <RouterLink
-        :to="{name: 'home'}"
-        :class="{'active': route.name === 'home'}"
-        class="telecart-dock-item"
-        @click="onDockItemClick"
-    >
-      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
-      <span class="dock-label">Главная</span>
-    </RouterLink>
-
-    <RouterLink :to="{name: 'search'}" :class="{'active': route.name === 'search'}" class="telecart-dock-item" @click="onDockItemClick">
-      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
-      </svg>
-      <span class="dock-label">Поиск</span>
-    </RouterLink>
-
-    <RouterLink
-        v-if="settings.store_enabled"
-        :to="{name: 'cart'}"
-        :class="{'active': route.name === 'cart'}"
-        class="telecart-dock-item"
-        @click="onDockItemClick"
-    >
-      <div class="indicator">
-        <span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
-        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+  <div class="telecart-dock fixed bottom-0 w-full z-50 px-10">
+    <div
+        class="telecart-dock-inner flex justify-between items-center bg-base-300/10 h-full backdrop-blur-md px-2 border-base-300/90 border">
+      <RouterLink
+          :to="{name: 'home'}"
+          :class="{'active': route.name === 'home'}"
+          class="telecart-dock-item"
+          @click="onDockItemClick"
+      >
+        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt">
+            <polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10"
+                      stroke-width="2"></polyline>
+            <path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor"
+                  stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
+            <line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square"
+                  stroke-miterlimit="10" stroke-width="2"></line>
+          </g>
        </svg>
-      </div>
-      <span class="dock-label">Корзина</span>
-    </RouterLink>
+        <span class="dock-label">Главная</span>
+      </RouterLink>
+
+      <RouterLink
+          :to="{name: 'search'}"
+          :class="{'active': route.name === 'search'}"
+          class="telecart-dock-item"
+          @click="onDockItemClick"
+      >
+        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+             stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round"
+                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
+        </svg>
+        <span class="dock-label">Поиск</span>
+      </RouterLink>
+
+      <RouterLink
+          v-if="settings.store_enabled"
+          :to="{name: 'cart'}"
+          :class="{'active': route.name === 'cart'}"
+          class="telecart-dock-item"
+          @click="onDockItemClick"
+      >
+        <div class="indicator">
+          <span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
+          <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+               stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
+          </svg>
+        </div>
+        <span class="dock-label">Корзина</span>
+      </RouterLink>
+    </div>
  </div>
-</div>
 </template>

 <script setup>
@@ -60,6 +79,8 @@ function onDockItemClick() {

 .telecart-dock-inner {
  border-radius: var(--radius-field);
+  border-width: var(--border);
+  border-style: solid;
 }

 .telecart-dock-item {
@@ -67,12 +88,13 @@ function onDockItemClick() {
  flex-direction: column;
  align-items: center;
  border-radius: var(--radius-field);
-  padding: 5px 10px;
-  min-width: 85px;
+  padding: 5px 13px;
+  min-width: 90px;
 }

 .telecart-dock-item.active {
  background-color: var(--color-primary);
  backdrop-filter: blur(var(--blur-sm));
+  color: var(--color-primary-content);
 }
 </style>
--- a/spa/src/components/ProductFilters/Components/ProductPrice.vue
+++ b/spa/src/components/ProductFilters/Components/ProductPrice.vue
@@ -6,6 +6,7 @@
        От
        <input
            type="number"
+            inputmode="numeric"
            class="grow"
            min="0"
            step="50"
@@ -18,6 +19,7 @@
        До
        <input
            type="number"
+            inputmode="numeric"
            class="grow"
            min="0"
            step="50"
--- a/spa/src/stores/ProductFiltersStore.js
+++ b/spa/src/stores/ProductFiltersStore.js
@@ -1,18 +1,21 @@
 import {defineStore} from "pinia";
 import {getFiltersForMainPage} from "@/utils/ftch.js";
 import {md5} from "js-md5";
-import {toRaw} from "vue";

 export const useProductFiltersStore = defineStore('product_filters', {
    state: () => ({
        isLoading: false,
        draft: {},
        applied: {},
+        default: {},
        fullPath: '',
    }),

    getters: {
        paramsHashForRouter: (state) => md5(JSON.stringify({ filters: state.applied })),
+
+        isFiltersChanged: (state) =>
+            md5(JSON.stringify({ filters: state.applied })) !== md5(JSON.stringify({ filters: state.default })),
    },

    actions: {
@@ -22,6 +25,7 @@ export const useProductFiltersStore = defineStore('product_filters', {
            try {
                this.isLoading = true;
                const response = await getFiltersForMainPage();
+                this.default = response.data;
                return response.data;
            } catch (error) {
                console.log(error);
--- a/spa/src/style.css
+++ b/spa/src/style.css
@@ -48,7 +48,6 @@ html {
    display: flex;
    justify-content: center;
    align-items: center;
-    box-shadow: 0px -1px 3px 1px #000000;
    color: white;
 }

--- a/spa/src/views/Cart.vue
+++ b/spa/src/views/Cart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-40">
    <h2 class="text-2xl text-center">
      Корзина
      <span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
@@ -109,17 +109,9 @@
        </div>
      </div>

-      <div class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex justify-between items-center gap-2 border-t-1 border-t-base-300">
-        <div>
-          <div v-if="lastTotal">
-            <span class="text-xs text-base-content mr-2">{{ lastTotal.title }}:</span><br>
-            <span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
-            <span v-else class="text-accent font-bold">{{ lastTotal.text }}</span>
-          </div>
-        </div>
-
+      <div class="fixed px-4 pt-4 bottom-25 left-0 w-full z-50 flex justify-end items-center gap-2">
        <button
-            class="btn btn-primary select-none"
+            class="btn btn-primary select-none shadow-xl"
            :disabled="cart.canCheckout === false"
            @click="goToCheckout"
        >
--- a/spa/src/views/Filters.vue
+++ b/spa/src/views/Filters.vue
@@ -66,9 +66,6 @@ const router = useRouter();
 const emit = defineEmits(['close', 'apply']);

 const filtersStore = useProductFiltersStore();
-
-const mainButton = window.Telegram.WebApp.MainButton;
-const secondaryButton = window.Telegram.WebApp.SecondaryButton;
 const haptic = window.Telegram.WebApp.HapticFeedback;

 const applyFilters = async () => {
@@ -80,7 +77,7 @@ const applyFilters = async () => {
 }

 const resetFilters = async () => {
-  filtersStore.applied = await filtersStore.fetchFiltersForMainPage();
+  filtersStore.applied = filtersStore.default;
  console.debug('Filters: reset filters. Hash for router: ', filtersStore.paramsHashForRouter);
  haptic.notificationOccurred('success');
  await nextTick();
--- a/spa/src/views/Home.vue
+++ b/spa/src/views/Home.vue
@@ -1,21 +1,28 @@
 <template>
-  <div ref="goodsRef" class="pb-10">
+  <div ref="goodsRef" class="pb-20">
    <CategoriesInline/>

+
    <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom) + 80px);">
      <div class="flex justify-center">
-        <button @click="showFilters" class="btn shadow-xl">
-          <IconFunnel/> Фильтры
+        <button
+            @click="showFilters"
+            class="btn shadow-xl relative"
+            :class="{'btn-accent' : filtersStore.isFiltersChanged}"
+        >
+          <IconFunnel/>
+          Фильтры
+          <span v-if="filtersStore.isFiltersChanged" class="status status-primary"></span>
        </button>
      </div>
    </div>

    <ProductsList
-      :products="products"
-      :hasMore="hasMore"
-      :isLoading="isLoading"
-      :isLoadingMore="isLoadingMore"
-      @loadMore="onLoadMore"
+        :products="products"
+        :hasMore="hasMore"
+        :isLoading="isLoading"
+        :isLoadingMore="isLoadingMore"
+        @loadMore="onLoadMore"
    />
  </div>
 </template>
@@ -23,7 +30,7 @@
 <script setup>
 import ProductsList from "@/components/ProductsList.vue";
 import CategoriesInline from "../components/CategoriesInline.vue";
-import {onActivated, onMounted, ref, toRaw} from "vue";
+import {onMounted, ref, toRaw} from "vue";
 import IconFunnel from "@/components/Icons/IconFunnel.vue";
 import {useRouter} from "vue-router";
 import ftch from "@/utils/ftch.js";
@@ -93,15 +100,17 @@ onMounted(async () => {
  await fetchProducts();
  window.scrollTo(0, 0);
 });
-
-onActivated(async () => {
-  console.debug('Home: Activated Home');
-});
 </script>

-<style>
-.floating-panel {
-  border-radius: var(--radius-field);
-  border: var(--border) solid var(--color-base-200);
+<style scoped>
+.filters-status {
+  background-color: var(--color-info);
+  color: var(--color-info);
+  box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
+  aspect-ratio: 1;
+  border-radius: var(--radius-selector);
+  width: .5rem;
+  height: .5rem;
+  display: inline-block;
 }
 </style>
--- a/spa/src/views/Products.vue
+++ b/spa/src/views/Products.vue
@@ -1,10 +1,5 @@
 <template>
  <div ref="goodsRef" class="pb-10">
-    <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: var(--tg-safe-area-inset-bottom);">
-      <div class="bg-base-300 flex justify-between p-2 rounded-xl shadow-md">
-        <SearchInput/>
-      </div>
-    </div>
    <ProductsList
        :products="productsStore.products.data"
        :hasMore="productsStore.products.meta.hasMore"
@@ -17,11 +12,9 @@

 <script setup>
 import ProductsList from "@/components/ProductsList.vue";
-import SearchInput from "@/components/SearchInput.vue";
 import {onMounted} from "vue";
 import {useRoute} from "vue-router";
 import {useProductsStore} from "@/stores/ProductsStore.js";
-import IconFunnel from "@/components/Icons/IconFunnel.vue";

 defineOptions({
  name: 'Products'
--- a/spa/src/views/Search.vue
+++ b/spa/src/views/Search.vue
@@ -73,23 +73,9 @@
 <script setup>
 import {useSearchStore} from "@/stores/SearchStore.js";
 import {useDebounceFn} from "@vueuse/core";
-import {nextTick, onMounted, onUnmounted, ref} from "vue";
+import {ref} from "vue";

 const searchStore = useSearchStore();
 const searchInput = ref(null);
 const debouncedSearch = useDebounceFn(() => searchStore.performSearch(), 500);
-
-function handleClickOutside(e) {
-  if (!e.target.closest('input')) {
-    document.activeElement?.blur();
-  }
-}
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
 </script>