@opendesign-plus/components 0.0.1-rc.10

package/src/components/OCookieNotice.vue

@@ -0,0 +1,575 @@
+<script lang="ts" setup>
+import { ref, onMounted, computed, nextTick, watch } from 'vue';
+import ClientOnly from './common/ClientOnlyWrapper';
+import { useScreen } from '@opendesign-plus/composables';
+import { useI18n } from '@/i18n';
+import { DialogActionT, OButton, ODialog, OIcon, OIconClose, OSwitch } from '@opensig/opendesign';
+import { useVModel } from '@vueuse/core';
+
+const NOT_SIGNED = '0';
+const ALL_AGREED = '1';
+const NECCESSARY_AGREED = '2';
+const NOT_SHOW_BUT_AGREED = '3';
+const COOKIE_KEY_ZH = 'agreed-cookiepolicy-zh';
+const COOKIE_KEY_EN = 'agreed-cookiepolicy-en';
+
+const props = defineProps<{
+  visible?: boolean;
+  community: string;
+  detailUrl: string;
+  wrapper?: string | HTMLElement;
+  cookieDomain: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+}>();
+
+const { lePadV, leLaptop, isPhone } = useScreen();
+const { locale, t } = useI18n();
+const isZh = computed(() => locale.value === 'zh');
+
+const cookieNoticeRef = ref<HTMLDivElement>();
+const enableGrid = computed(() => {
+  if (cookieNoticeRef.value) {
+    return !!getComputedStyle(cookieNoticeRef.value!).getPropertyValue('--grid-content-width');
+  }
+  return false;
+});
+
+const cookieKey = computed(() => (isZh.value ? COOKIE_KEY_ZH : COOKIE_KEY_EN));
+
+// 是否允许分析cookie
+const analysisAllowed = ref(false);
+const visibleVmodel = useVModel(props, 'visible', emit, { defaultValue: false });
+
+const getCookie = (key: string) => {
+  const cookie = document.cookie.split(';').find((row) => row.split('=')[0].trim() === encodeURIComponent(key));
+  if (!cookie) {
+    return null;
+  }
+  return decodeURIComponent(cookie.split('=')[1]);
+};
+
+const setCookie = (key: string, value: string, days: number, domain: string) => {
+  const maxAge = days ? `; max-age=${days * 24 * 60 * 60}` : '';
+  document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}${maxAge}; path=/; domain=${domain}`;
+};
+
+const removeCookie = (key: string, domain: string) => {
+  document.cookie = `${encodeURIComponent(key)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=${domain}`;
+};
+
+// 显示/隐藏cookie提示
+const toggleNoticeVisible = (val?: boolean) => {
+  if (typeof val === 'boolean') {
+    visibleVmodel.value = val;
+  } else {
+    visibleVmodel.value = !visibleVmodel.value;
+  }
+  nextTick(() => {
+    if (!visibleVmodel.value && isZh.value && getCookie(cookieKey.value) !== NOT_SHOW_BUT_AGREED) {
+      setCookie(cookieKey.value, NOT_SHOW_BUT_AGREED, 180, props.cookieDomain ?? location.hostname);
+    }
+  });
+};
+
+// 弹出框是否显示
+const isDlgVisible = ref(false);
+
+// 显示/隐藏弹出框
+const toggleDlgVisible = (val?: boolean) => {
+  if (typeof val === 'boolean') {
+    isDlgVisible.value = val;
+  } else {
+    isDlgVisible.value = !isDlgVisible.value;
+  }
+};
+
+// 是否未签署
+const isNotSigned = () => {
+  if (isZh.value) {
+    return getCookie(cookieKey.value) !== NOT_SHOW_BUT_AGREED;
+  }
+  return (getCookie(cookieKey.value) ?? '0') === NOT_SIGNED;
+};
+
+// 是否全部同意
+const isAllAgreed = () => {
+  if (isZh.value) {
+    return getCookie(cookieKey.value) === NOT_SHOW_BUT_AGREED;
+  }
+  return getCookie(cookieKey.value) === ALL_AGREED;
+};
+
+onMounted(() => {
+  // 未签署，展示cookie notice
+  if (isNotSigned()) {
+    toggleNoticeVisible(true);
+  }
+});
+
+watch(locale, () => {
+  toggleNoticeVisible(isNotSigned());
+});
+
+// 用户同意所有cookie
+const acceptAll = () => {
+  analysisAllowed.value = true;
+  removeCookie(cookieKey.value, props.cookieDomain ?? location.hostname);
+  setCookie(cookieKey.value, ALL_AGREED, 180, props.cookieDomain ?? location.hostname);
+  toggleNoticeVisible(false);
+};
+
+// 用户拒绝所有cookie，即仅同意必要cookie
+const rejectAll = () => {
+  analysisAllowed.value = false;
+  removeCookie(cookieKey.value, props.cookieDomain ?? location.hostname);
+  setCookie(cookieKey.value, NECCESSARY_AGREED, 180, props.cookieDomain ?? location.hostname);
+  toggleNoticeVisible(false);
+};
+
+// 弹出框设置
+const dlgActions = computed<Array<DialogActionT>>(() => {
+  if (isPhone.value) {
+    return [
+      {
+        id: 'save',
+        label: t('cookie.saveSetting'),
+        variant: 'text',
+        onClick: () => {
+          if (analysisAllowed.value) {
+            acceptAll();
+          } else {
+            rejectAll();
+          }
+          toggleDlgVisible(false);
+        },
+      },
+      {
+        id: 'allowAll',
+        label: t('cookie.acceptAll'),
+        variant: 'text',
+        onClick: () => {
+          analysisAllowed.value = true;
+          acceptAll();
+          toggleDlgVisible(false);
+        },
+      },
+    ]
+  }
+  return [
+    {
+      id: 'save',
+      color: 'primary',
+      label: t('cookie.saveSetting'),
+      variant: 'outline',
+      size: 'medium',
+      round: 'pill',
+      onClick: () => {
+        if (analysisAllowed.value) {
+          acceptAll();
+        } else {
+          rejectAll();
+        }
+
+        toggleDlgVisible(false);
+      },
+    },
+    {
+      id: 'allowAll',
+      color: 'primary',
+      label: t('cookie.acceptAll'),
+      variant: 'outline',
+      size: 'medium',
+      round: 'pill',
+      onClick: () => {
+        analysisAllowed.value = true;
+        acceptAll();
+        toggleDlgVisible(false);
+      },
+    },
+  ]
+});
+
+const onDlgChange = (val: boolean) => {
+  if (val) {
+    analysisAllowed.value = isAllAgreed();
+  }
+};
+
+defineExpose({
+  check() {
+    const agreed = isAllAgreed();
+    if (agreed === visibleVmodel.value) {
+      toggleNoticeVisible();
+    }
+  },
+});
+</script>
+
+<template>
+  <ClientOnly>
+    <Teleport :to="wrapper || '#app'">
+      <div ref="cookieNoticeRef" v-if="visibleVmodel" class="cookie-notice">
+        <div class="cookie-notice-content">
+          <div :type="locale" :class="{ 'cookie-notice-wrap-grid': enableGrid, 'cookie-notice-wrap': !enableGrid }">
+            <div class="cookie-title">
+              <template v-if="isZh">
+                <OIcon style="display: inline-block; font-size: 24px; margin-right: 4px">
+                  <svg style="transform: rotate(180deg);" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+                    <path fill="#002fa7" d="M21 12c0 4.971-4.029 9-9 9s-9-4.029-9-9c0-4.971 4.029-9 9-9s9 4.029 9 9z" />
+                    <path
+                      fill="#fff"
+                      d="M12 9.4c0.552 0 1-0.448 1-1s-0.448-1-1-1c-0.552 0-1 0.448-1 1s0.448 1 1 1zM12.492 10.943c-0.042-0.233-0.246-0.41-0.492-0.41-0.276 0-0.5 0.224-0.5 0.5v5.5l0.008 0.090c0.042 0.233 0.246 0.41 0.492 0.41 0.276 0 0.5-0.224 0.5-0.5v-5.5l-0.008-0.090z"
+                    />
+                  </svg>
+                </OIcon>
+                <p class="cookie-zh-title" style="margin-top: 0">
+                  {{ t('cookie.desc') }}
+                  <a :href="detailUrl" target="_blank" rel="noopener noreferrer">
+                    {{ t('cookie.about') }}
+                  </a>
+                </p>
+              </template>
+              <p v-else class="cookie-en-title">{{ t('cookie.title', [community]) }}</p>
+              <OIcon class="cookie-notice-close" @click="toggleNoticeVisible(false)">
+                <OIconClose />
+              </OIcon>
+            </div>
+            <div v-if="!isZh" class="cookie-en-content">
+              <p class="cookie-en-desc">
+                {{ t('cookie.desc') }}
+                <a :href="detailUrl" target="_blank" rel="noopener noreferrer">{{ t('cookie.about') }} </a>.
+              </p>
+              <div class="cookie-notice-right">
+                <OButton round="pill" variant="outline" color="primary" @click="acceptAll">{{ t('cookie.acceptAll') }}</OButton>
+                <OButton round="pill" variant="outline" color="primary" @click="rejectAll">{{ t('cookie.rejectAll') }}</OButton>
+                <OButton round="pill" variant="outline" color="primary" @click="toggleDlgVisible(true)">{{ t('cookie.manage') }}</OButton>
+              </div>
+            </div>
+          </div>
+        </div>
+        <ODialog
+          v-model:visible="isDlgVisible"
+          :size="leLaptop ? 'medium' : 'large'"
+          :phone-half-full="lePadV"
+          :main-class="enableGrid ? 'o-cookie-notice-dlg-main' : ''"
+          class="cookie-dlg"
+          :actions="dlgActions"
+          @change="onDlgChange"
+          style="--dlg-radius: 4px"
+        >
+          <template #header>
+            <span class="cookie-dlg-title">{{ t('cookie.manage') }}</span>
+          </template>
+          <div class="cookie-dlg-content">
+            <div class="content-item">
+              <div class="item-header">
+                <span class="item-title">{{ t('cookie.necessaryCookie') }}</span>
+                <span class="item-extra">{{ t('cookie.alwaysOn') }}</span>
+              </div>
+              <div class="item-detail">
+                {{ t('cookie.necessaryCookieDetail') }}
+              </div>
+            </div>
+            <div class="content-item">
+              <div class="item-header">
+                <span class="item-title">{{ t('cookie.analyticalCookie') }}</span>
+                <span class="item-extra">
+                  <OSwitch v-model="analysisAllowed" />
+                </span>
+              </div>
+              <div class="item-detail">
+                {{ t('cookie.analyticalCookieDetail') }}
+              </div>
+            </div>
+          </div>
+        </ODialog>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<style lang="scss">
+.o-cookie-notice-dlg-main {
+  --dlg-edge-gap: 32px;
+  @include respond-to('laptop') {
+    --dlg-edge-gap: 24px;
+  }
+  @include respond-to('phone') {
+    --dlg-edge-gap: 16px 24px;
+  }
+
+  --dlg-width: var(--grid-14);
+  @include respond-to('pad_h') {
+    --dlg-edge-gap: 16px;
+    --dlg-width: var(--grid-8);
+  }
+  @include respond-to('<=pad_v') {
+    --dlg-width: 100vw;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.o-btn {
+  --btn-bd-color-hover: var(--o-color-primary2);
+  --btn-bd-color-active: var(--o-color-primary3);
+
+  --btn-color-hover: var(--o-color-primary2);
+  --btn-color-active: var(--o-color-primary3);
+
+  --btn-bg-color-hover: transparent;
+  --btn-bg-color-active: transparent;
+}
+.cookie-notice {
+  position: fixed;
+  bottom: 0;
+  z-index: 999;
+  width: 100%;
+  .o-button {
+    --o-button-font-size-mini: 14px;
+  }
+  .o-button + .o-button {
+    margin-left: 16px;
+
+    @media (max-width: 840px) {
+      margin-left: 0;
+      margin-top: 12px;
+    }
+  }
+}
+
+.cookie-notice-content {
+  background-color: rgba(var(--o-mixedgray-1), 0.9);
+  backdrop-filter: blur(5px);
+  box-shadow: var(--o-shadow-1);
+}
+
+.cookie-notice-wrap {
+  position: relative;
+  margin: 0 auto;
+  padding: 16px var(--layout-content-padding);
+  max-width: var(--layout-content-max-width);
+  @media (1680px >= width >= 1201px) {
+    padding: 12px var(--layout-content-padding);
+  }
+  @include respond-to('pad_h') {
+    padding: 8px var(--layout-content-padding);
+  }
+  @media (max-width: 840px) {
+    padding: 16px var(--layout-content-padding);
+  }
+  @include respond-to('phone') {
+    padding: 16px var(--layout-content-padding);
+  }
+  &:not([type='zh']) {
+    @media (max-width: 840px) {
+      flex-direction: column;
+    }
+  }
+}
+
+.cookie-notice-wrap-grid {
+  width: var(--grid-content-width);
+  padding: 16px 0;
+  margin: 0 auto;
+  @media (1680px >= width >= 1201px) {
+    padding: 12px 0;
+  }
+  @include respond-to('pad_h') {
+    padding: 8px 0;
+  }
+  @media (max-width: 840px) {
+    padding: 16px 0;
+  }
+  @include respond-to('phone') {
+    padding: 16px 0;
+  }
+  &:not([type='zh']) {
+    @media (max-width: 840px) {
+      padding: 16px 0;
+      flex-direction: column;
+    }
+  }
+}
+
+.cookie-title {
+  display: flex;
+  font-size: 16px;
+  line-height: calc(1em + 8px);
+  color: var(--o-color-info1);
+  font-weight: 500;
+  @media (max-width: 1680px) {
+    font-size: 14px;
+  }
+  @include respond-to('<=pad_v') {
+    text-align: center;
+  }
+}
+
+.cookie-en-title {
+  @include respond-to('<=pad_v') {
+    margin-left: auto;
+  }
+}
+
+.cookie-zh-title {
+  font-size: 14px;
+  line-height: 22px;
+  margin-right: 8px;
+  text-align: start;
+  @include respond-to('<=pad_v') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+}
+
+.cookie-en-content {
+  display: flex;
+  width: 100%;
+  margin-top: 8px;
+  @include respond-to('<=pad_v') {
+    flex-direction: column;
+  }
+}
+
+.cookie-en-desc {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--o-color-info2);
+  @media (min-width: 1681px) {
+    margin-right: 48px;
+  }
+  @media (1680px >= width >= 1201px) {
+    margin-right: 40px;
+  }
+  @include respond-to('pad') {
+    margin-right: 24px;
+  }
+  @include respond-to('<=pad_v') {
+    margin: 0;
+  }
+}
+
+.cookie-notice-right {
+  display: flex;
+  margin-left: auto;
+
+  .o-btn:not(:first-child) {
+    margin-left: 16px;
+    @media (1680px >= width >= 1201px) {
+      margin-left: 12px;
+    }
+    @include respond-to('pad_h') {
+      margin-left: 8px;
+    }
+    @media (min-width: 841px) {
+      margin-left: 12px;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    margin-top: 16px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    gap: 12px;
+
+    .o-btn {
+      margin: 0;
+      &:nth-child(1) {
+        grid-column: 1;
+        grid-row: 1;
+      }
+      &:nth-child(2) {
+        grid-column: 2;
+        grid-row: 1;
+      }
+      &:nth-child(3) {
+        grid-column: 1 / span 2;
+        grid-row: 2;
+      }
+    }
+  }
+}
+
+.cookie-notice-close {
+  display: block;
+  overflow: visible !important;
+  margin-left: auto;
+  cursor: pointer;
+  color: var(--o-color-info1);
+  font-size: 24px;
+  &:hover {
+    color: var(--o-color-primary2);
+  }
+  @include x-svg-hover;
+}
+
+.cookie-dlg-content {
+  .content-item + .content-item {
+    margin-top: 24px;
+    @media (1680px >= width >= 1201px) {
+      margin-top: 16px;
+    }
+    @include respond-to('<=pad') {
+      margin-top: 12px;
+    }
+  }
+
+  .content-item {
+    .item-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .item-title {
+        font-size: 20px;
+        line-height: calc(1em + 8px);
+        color: var(--o-color-info1);
+        font-weight: 500;
+        @media (1680px >= width >= 1201px) {
+          font-size: 18px;
+        }
+        @include respond-to('<=pad') {
+          font-size: 16px;
+        }
+      }
+
+      .item-extra {
+        font-size: 14px;
+        color: var(--o-color-info3);
+        margin-left: 24px;
+        @include respond-to('<=pad') {
+          font-size: 12px;
+        }
+      }
+    }
+
+    .item-detail {
+      font-size: 16px;
+      line-height: calc(1em + 8px);
+      color: var(--o-color-info2);
+      margin-top: 16px;
+      @media (max-width: 1680px) {
+        margin-top: 12px;
+        font-size: 14px;
+      }
+      @include respond-to('<=pad') {
+        margin-top: 8px;
+      }
+      @media (max-width: 840px) {
+        margin-top: 8px;
+      }
+    }
+  }
+
+  .content-item:nth-child(2) {
+    .item-detail {
+      font-size: 16px !important;
+      line-height: calc(1em + 8px);
+    }
+  }
+}
+</style>