chore: add right sponsors (#7567)

* chore: add spon

* chore: add spon dark

* chore: add spon ui

* chore: add spon ui2

* chore: add analytics

* chore: add readme

README.md

@@ -75,6 +75,11 @@ You can also try Element Plus out with the components built-in playground.
           <img width="150px" src="https://user-images.githubusercontent.com/17680888/160634485-df0d00af-8633-4ab8-9a72-aac2b65d1d36.png">
         </a>
       </td>
+      <td align="center" valign="middle">
+        <a href="https://fantastic-admin.netlify.app/?from=element-plus" target="_blank">
+          <img width="150px" src="https://user-images.githubusercontent.com/82012629/167299102-e2e66150-2248-4f03-bbf2-84c622e7d165.png">
+        </a>
+      </td>
       <td align="center" valign="middle">
         <a href="https://bit.dev/?from=element-ui" target="_blank">
           <img width="150px" src="https://user-images.githubusercontent.com/10095631/41342907-e44e7196-6f2f-11e8-92f2-47702dc8f059.png">

docs/.vitepress/config/analytics.ts

@@ -0,0 +1,15 @@
+export const sendEvent = (
+  action: string,
+  label: string,
+  value?: any,
+  category?: string
+): void => {
+  const gtag = (window as any).gtag
+  if (gtag) {
+    gtag('event', action, {
+      event_label: label,
+      event_value: value,
+      event_category: category,
+    })
+  }
+}

docs/.vitepress/config/sponsors.ts

@@ -1,4 +1,14 @@
-export const platinumSponsors = [
+export const rightRichTextSponsors = [
+  {
+    name: 'Fantastic-admin',
+    img: '/images/sponsors/fantasticadmin.png',
+    url: 'https://fantastic-admin.netlify.app/?from=element-plus',
+    slogan: 'An out-of-the-box backend framework',
+    slogan_cn: '开箱即用的 Vue 后台管理框架',
+  },
+]
+
+export const leftCustomImgSponsors = [
   {
     name: 'JNPF',
     img: '/images/jnpf_index.png',
@@ -27,6 +37,11 @@ export const platinumSponsors = [
   },
 ]
 
+export const platinumSponsors = [
+  ...leftCustomImgSponsors,
+  ...rightRichTextSponsors,
+]
+
 export const goldSponsors = [
   {
     name: 'bit',

docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue

@@ -4,6 +4,7 @@ import { useToc } from '../../composables/use-toc'
 import { useActiveSidebarLinks } from '../../composables/active-bar'
 
 import SponsorsButton from '../sponsors/sponsors-button.vue'
+import SponsorRightTextList from '../sponsors/right-richtext-list.vue'
 // import SponsorLarge from '../vp-sponsor-large.vue'
 
 const headers = useToc()
@@ -41,7 +42,15 @@ useActiveSidebarLinks(container, marker)
         class="mt-8 toc-ads flex flex-col"
         item-style="width: 180px; height: 55px;"
       /> -->
-      <sponsors-button class="mt-4" />
+      <sponsors-button class="sponsors-button mt-4 w-100%" />
+      <sponsor-right-text-list />
     </nav>
   </aside>
 </template>
+<style scoped lang="scss">
+.sponsors-button:deep {
+  button {
+    width: 100%;
+  }
+}
+</style>

docs/.vitepress/vitepress/components/home/home-sponsors.vue

@@ -17,7 +17,6 @@ import SponsorList from './sponsor-list.vue'
 <style lang="scss">
 .home-page {
   .sponsors-container {
-    max-width: 900px;
     margin-top: 72px;
     .join {
       text-align: center;
@@ -27,7 +26,8 @@ import SponsorList from './sponsor-list.vue'
 
   .sponsor-list {
     --min-width: 100%;
-    grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 320px));
+    justify-content: center;
 
     &.platinum {
       --min-width: 220px;

docs/.vitepress/vitepress/components/home/sponsor-list.vue

@@ -3,7 +3,10 @@ import { computed } from 'vue'
 import { isDark } from '../../composables/dark'
 import { useLang } from '../../composables/lang'
 import sponsorLocale from '../../../i18n/component/sponsor.json'
-
+import { sendEvent } from '../../../config/analytics'
+const onItemClick = (item: any) => {
+  sendEvent('sp_click', item.name, 'index')
+}
 defineProps({
   sponsors: Array,
   sponsorType: String,
@@ -37,6 +40,7 @@ const getSponsorSlogan = (sponsor) => {
       :class="['sponsor flex px-4 rounded-md', sponsor.className]"
       :href="sponsor.url"
       target="_blank"
+      @click="onItemClick(sponsor)"
     >
       <img
         :class="sponsor.isDark && isDark ? 'filter invert' : ''"

docs/.vitepress/vitepress/components/sponsors/right-richtext-list.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { rightRichTextSponsors } from '../../../config/sponsors'
+import { sendEvent } from '../../../config/analytics'
+import { useLang } from '../../composables/lang'
+import { isDark } from '../../composables/dark'
+const lang = useLang()
+const langZhCN = 'zh-CN'
+const isZhCn = computed(() => lang.value === langZhCN)
+const onItemClick = (item: any) => {
+  sendEvent('sp_click', item.name, 'right_richtext_list')
+}
+</script>
+
+<template>
+  <div class="sponsor-container m-t-16px">
+    <a
+      v-for="item in rightRichTextSponsors"
+      :key="item.name"
+      :href="item.url"
+      :title="`${item.name_cn || item.name} - ${item.slogan_cn || item.slogan}`"
+      target="_blank"
+      @click="onItemClick(item)"
+    >
+      <div
+        :class="[
+          isDark && '!bg-#262729',
+          'flex bg-#F9F9F9 pl-12px pr-12px pt-16px pb-16px rd-4px',
+        ]"
+      >
+        <div class="w-32px m-r-8px h-56px">
+          <img
+            class="mt-2px rd-4px w-32px h-32px"
+            :src="item.img"
+            :alt="item.name"
+          />
+        </div>
+        <div class="flex-1 h-56px">
+          <div
+            :class="[
+              'color-#303133 font-400 text-13px',
+              isDark && '!color-#E5E9F3',
+            ]"
+          >
+            {{ isZhCn ? item.name_cn || item.name : item.name }}
+          </div>
+          <div
+            :class="[
+              'm-t-2px font-400 text-12px color-#909399',
+              isDark && '!color-#A3A6AD',
+            ]"
+          >
+            {{ isZhCn ? item.slogan_cn || item.slogan : item.slogan }}
+          </div>
+        </div>
+      </div>
+    </a>
+  </div>
+</template>

docs/.vitepress/vitepress/components/vp-sponsor-large.vue

@@ -1,22 +1,28 @@
 <script setup lang="ts">
-import { platinumSponsors } from '../../config/sponsors'
+import { leftCustomImgSponsors } from '../../config/sponsors'
+import { sendEvent } from '../../config/analytics'
 
 defineProps({
   itemClass: String,
   itemStyle: [String, Object, Array],
 })
+
+const onItemClick = (item: any) => {
+  sendEvent('sp_click', item.name, 'left_custom_img')
+}
 </script>
 
 <template>
   <div class="sponsor-container">
     <a
-      v-for="item in platinumSponsors"
+      v-for="item in leftCustomImgSponsors"
       :key="item.name"
       :href="item.url"
       :title="`${item.name_cn || item.name} - ${item.slogan_cn || item.slogan}`"
       :class="['sponsor-item inline-flex', itemClass]"
       :style="itemStyle"
       target="_blank"
+      @click="onItemClick(item)"
     >
       <img :src="item.banner_img" :alt="item.name" />
     </a>

docs/.vitepress/vitepress/components/vp-sponsor-small.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { isDark } from '../composables/dark'
 import { goldSponsors } from '../../config/sponsors'
+import { sendEvent } from '../../config/analytics'
+const onItemClick = (item: any) => {
+  sendEvent('sp_click', item.name, 'left_small_img')
+}
 </script>
 
 <template>
@@ -15,6 +19,7 @@ import { goldSponsors } from '../../config/sponsors'
       :href="item.url"
       :title="`${item.name_cn || item.name} - ${item.slogan_cn || item.slogan}`"
       target="_blank"
+      @click="onItemClick(item)"
     >
       <img :src="item.img" :alt="item.name" />
     </a>

docs/components.d.ts

@@ -44,7 +44,9 @@ declare module '@vue/runtime-core' {
     Playground: typeof import('./.vitepress/vitepress/components/icons/playground.vue')['default']
     Resource: typeof import('./.vitepress/vitepress/components/globals/resource.vue')['default']
     ResourceSvg: typeof import('./.vitepress/vitepress/components/home/svg/resource-svg.vue')['default']
+    Right: typeof import('./.vitepress/vitepress/components/sponsors/right.vue')['default']
     RightLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/right-layer-svg.vue')['default']
+    RightRichtextList: typeof import('./.vitepress/vitepress/components/sponsors/right-richtext-list.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScreenSvg: typeof import('./.vitepress/vitepress/components/home/svg/screen-svg.vue')['default']