hadith_ui/pages/hadith/index.vue

<template>
  <HadithLayout :menu="sidbarMenu">
    <section class="section-one flex flex-col justify-center">
      <div class="bg-container h-full" :style="backgroundImageStyle">
        <navigation-menu></navigation-menu>

        <div class="text-logo flex justify-center flex-col items-center">
          <NuxtImg fit="auto" quality="80" placeholder src="/img/logo.png" />
          <div class="title">
            کاوش با
            <span class="badge-style"> هوش مصنوعی </span>
            در احادیث اسلامی
          </div>
        </div>
      </div>
      <div class="search-box-container flex justify-center">
        <auto-complation></auto-complation>
      </div>
    </section>

    <section class="section-two">
      <div class="flex flex-col items-center py-6">
        <div>قابلیت ها</div>
        <div>
          <NuxtImg
            width="32"
            height="32"
            fit="auto"
            quality="80"
            placeholder
            src="/img/chevron-down.svg"
          />
        </div>
      </div>

      <div class="flex flex-col lg:flex-row">
        <div class="my-card card-one basis-full flex justify-center items-center">
          <div class="inner-container">
            <div>
              <p class="title">جستجوی معنایی</p>
              <p class="description">ارائه نتایج دقیق و معنادار از میان</p>
              <p class="description">حجم انبوه متون حدیثی</p>
            </div>

            <NuxtImg
              fit="auto"
              quality="80"
              placeholder
              src="/img/card-one.png"
            />
          </div>
        </div>
        <div class="my-card card-two basis-full flex justify-center items-center">
          <div class="inner-container">
            <div class="">
              <p class="title">جستجوی مترادف‌ها</p>
              <p class="description">یافتن سریع واژگان مرتبط برای</p>
              <p class="description">درک بهتر مفاهیم حدیثی</p>
            </div>

            <NuxtImg
              fit="auto"
              quality="80"
              placeholder
              src="/img/card-two.png"
            />
          </div>
        </div>
        <div
          class="my-card card-three basis-full flex flex-col justify-center items-center"
        >
          <div class="inner-container">
            <div>
              <p class="title">مشابهت‌یابی حدیث</p>
              <p class="description">امکان یافتن احادیث یا مفاهیمی</p>
              <p class="description">با معنای مشابه یک حدیث</p>
            </div>

            <NuxtImg
              fit="auto"
              quality="80"
              placeholder
              src="/img/card-three.png"
            />
          </div>
        </div>
      </div>
    </section>
  </HadithLayout>
</template>
<script>
import { useStorage } from "@vueuse/core";
import { mapActions, mapState } from "pinia";

import { useHadithStore } from "@hadith/stores/hadithStore";
import { useCommonStore } from "~/stores/commonStore";
import hadithApi from "@hadith/apis/hadithApi.js";
import navbarMenu from "@hadith/json/hadith/menu.json";

export default {
  name: "hadith",
  setup() {
    useHead({
      title: import.meta.env.VITE_HADITH_PAGE_TITLE,
      meta: [
        { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
      ],
      bodyAttrs: {
        class: import.meta.env.VITE_HADITH_SYSTEM,
      },
    });

    definePageMeta({
      layout: false,
      name: "hadith",
    });
  },

  created() {
    this.httpService = useNuxtApp()["$http"];
  },

  async mounted() {
    let schemaExist = this.searchActiveTabGetter && this.searchSchemaGetter;

    if (!schemaExist) this.getSchemas();
    else this.setSearchDomain(this.searchActiveTabGetter);

    if (window.outerWidth < 992) {
      this.$store.commit("TOGGLE_SIDEBAR_MENU");
      this.showMobileFilterList = true;
    }
  },

  data() {
    return {
      httpService: {},
      logo: "",
      sidbarMenuDefault: navbarMenu,
    };
  },

  computed: {
    // ...mapState(useHadithStore, [
    //   "domainActiveGetter",
    //   "searchActiveTabGetter",
    //   "searchSchemaGetter",
    //   "searchSynonymTitleGetter",
    // ]),
    ...mapState(useCommonStore, [
      "currentUser",
      "organNameGetter",
      "isSidebarCollapsed",
      "userPermisionGetter",
    ]),

    sidbarMenu() {
      return this.sidbarMenuDefault;
    },

    backgroundImageStyle() {
      // Use $img to generate an optimized image URL
      const optimizedImageUrl = this.$img("/img/background.png", {
        quality: 80,
      });

      return {
        backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
      };
    },
  },
  methods: {
    ...mapActions(useCommonStore, [
      "TOGGLE_SIDEBAR_MENU",
      "sidebarCollapsedSetter",
    ]),

    // ...mapActions(useHadithStore, [
    //   "searchActiveTabSetter",
    //   "searchSchemaSetter",
    //   "domainActiveSetter",
    //   "searchSynonymTitleSetter",
    // ]),

    async getSchemas() {
      let localStoageSearchSchema = useStorage("searchSchema", undefined).value;

      if (localStoageSearchSchema) {
        let searchSchema = JSON.parse(localStoageSearchSchema);
        this.searchSchemaSetter(searchSchema);
        this.searchActiveTabSetter(searchSchema[0]);
      } else {
        const payload = {
          organ: this.organNameGetter,
          system: "search",
          build_state: buildState(),
        };
        const url = repoUrl() + hadithApi.schema.list;

        this.httpService
          .postRequest(url, payload)
          .then((res) => {
            this.searchSchemaSetter(res.data.search);
            this.searchActiveTabSetter(res.data.search[0]);
            this.fetchingData = false;

            const toast = useToast();
            toast.add({
              title: "Success",
              description: "Your action was completed successfully.",
              color: "success",
            });
          })
          .catch((err) => {
            this.fetchingData = false;
          });
      }
    },
  },
  components: {
    AutoComplation: defineAsyncComponent(() =>
      import("@hadith/components/hadith/AutoComplation.vue")
    ),
    NavigationMenu: defineAsyncComponent(() =>
      import("@hadith/components/hadith/NavigationMenu.vue")
    ),
    AutoComplation: defineAsyncComponent(() =>
      import("@hadith/components/hadith/AutoComplation.vue")
    ),
    HadithLayout: defineAsyncComponent(() =>
      import("@hadith/layouts/HadithLayout.vue")
    ),
  },
};
</script>
<style scoped>
.section-one {
  .bg-container {
    height: 521px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    /* background-image: url("/img/background.svg"),
      linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%); */
  }

  .text-logo {
    padding-top: 10em;
    position: relative;

    .title {
      margin-top: 3.5em;
      font-family: IRANSansX;
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0%;
      text-align: center;
      color: #1b2132;
    }
    .badge-style {
      width: 100;
      height: 23;
      border-radius: 40px;
      padding-right: 8px;
      padding-bottom: 2px;
      padding-left: 8px;
      gap: 10px;
      color: #fff;

      background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
    }
  }

  .search-box-container {
    padding-top: 1em;
    padding-bottom: 4em; /*64px */
  }
}

.section-two {
  font-weight: 200;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
  text-align: center;

  .my-card {
    background-repeat: no-repeat;
    background-size: auto;
    height: 660px;

    .inner-container {
      max-width: 21.25em;
      margin: auto;
    }
    .title {
      font-weight: 500;
      font-size: 24px;
      line-height: 36px;
      letter-spacing: 0%;
      color: #1b2132;
      text-align: right;
    }

    .description {
      font-weight: 300;
      font-size: 20px;
      line-height: 30px;
      letter-spacing: 0%;
      text-align: right;
      color: #626b84;
    }

    &.card-one {
      background-image: url("/img/card-one-bgi.png"),
        linear-gradient(134.17deg, #ffffff -9.81%, #e5e0ff 87.62%);
    }
    &.card-two {
      background-image: url("/img/card-two-bgi.png"),
        linear-gradient(329.16deg, #b9fde0 13.45%, #eefff8 63.57%);
    }
    &.card-three {
      background-image: url("/img/card-three-bgi.png"),
        linear-gradient(134.17deg, #ffffff -9.81%, #e5e0ff 87.62%);
    }
  }
}
</style>