boursecu_user/src/views/login/desktop/components/DesktopAuthShell.vue

<template>
  <div class="dauth dauth--boursecu">
    <div class="dauth__layout">
      <main class="dauth-form-panel">
        <slot />
      </main>

      <aside class="dauth-brand dauth-brand--boursecu">
        <div class="dauth-brand__pattern" />
        <div class="dauth-brand__content">
          <img
            :src="logo"
            alt=""
            class="dauth-brand__logo"
          >
          <h1 class="dauth-brand__title">{{ brandTitle }}</h1>
          <p v-if="tagline" class="dauth-brand__tagline">{{ tagline }}</p>
          <ul class="dauth-brand__features">
            <li v-for="feature in features" :key="feature" class="dauth-brand__feature">
              <span class="dauth-brand__feature-icon">
                <BasicIcon icon="vuesax-linear:tick-circle" size="16" />
              </span>
              {{ feature }}
            </li>
          </ul>
        </div>
        <div class="dauth-brand__footer">نسخه {{ version }}</div>
      </aside>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import pkg from '../../../../../package.json'
import { getDisplayAppVersion } from '@/config/config-cache'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import { useConfigStore } from '@/store/configStore'
import {
  getProjectDesktopLoginBrandLogo,
  getProjectLoginTaglineLines,
} from '@/utils/config'

const config = useConfigStore()
const version = getDisplayAppVersion(pkg.version)

const logo = computed(() => getProjectDesktopLoginBrandLogo(config.config?.avatar))

const taglineLines = computed(() => getProjectLoginTaglineLines())
const tagline = computed(() => {
  if (taglineLines.value?.length) {
    return taglineLines.value.join(' ')
  }
  return 'پلتفرم امن و سریع برای مدیریت دارایی و معاملات شما'
})

const brandTitle = computed(() => config.config?.name_fa ?? 'خوش آمدید')

const features = [
  'قیمت لحظه‌ای و نمودار بازار',
  'مدیریت دارایی و کیف پول',
  'معاملات سریع و امن',
]
</script>

<style lang="less" src="../styles/desktop-auth.less"></style>