From 4b6734bba2ca716dbe5e8dd69bd7dc0d72accbba Mon Sep 17 00:00:00 2001
From: zjwmiao <1723168479@qq.com>
Date: Wed, 26 Mar 2025 19:03:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20cookieNotice=E6=A0=B7=E5=BC=8F=E4=B8=8E?=
 =?UTF-8?q?=E5=AE=98=E7=BD=91=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                 |  4 +--
 src/components/CookieNotice.vue | 54 +++++++++++++++++++++++++++++----
 src/components/IconClose.vue    | 47 ++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 9 deletions(-)
 create mode 100644 src/components/IconClose.vue

diff --git a/components.d.ts b/components.d.ts
index 8502682..3773506 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -26,10 +26,7 @@ declare module 'vue' {
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
@@ -40,6 +37,7 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTree: typeof import('element-plus/es')['ElTree']
+    IconClose: typeof import('./src/components/IconClose.vue')['default']
     ONav: typeof import('./src/components/ONav.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/components/CookieNotice.vue b/src/components/CookieNotice.vue
index ec6ed5e..1d758f7 100644
--- a/src/components/CookieNotice.vue
+++ b/src/components/CookieNotice.vue
@@ -9,10 +9,12 @@ import {
 import { useScreen } from './hooks/useScreen';
 import { useI18n } from 'vue-i18n';
 
-import IconClose from '~icons/app/icon-close.svg';
+// import IconClose from '~icons/app/icon-close.svg';
+
 import { useRoute, useRouter } from 'vue-router';
 import { enableOA } from '@/shared/analytics';
 import { disableOA } from '@/shared/analytics';
+import IconClose from './IconClose.vue';
 
 const { lePadV } = useScreen();
 const { t: $t, locale } = useI18n();
@@ -179,12 +181,17 @@ watch(
       </div>
     </div>
     <ElDialog
+      :show-close="false"
       v-model="isDlgVisible"
       :width="lePadV ? '90%' : '50%'"
       :title="$t('cookie.manage')"
       destroy-on-close
       :before-close="onDlgChange"
     >
+      <template #header="{ close, titleId, titleClass }">
+        <span :id="titleId" :class="titleClass">{{ $t('cookie.manage') }}</span>
+        <IconClose @click="close" style="position: absolute; top: 8px; right: 8px" />
+      </template>
       <div class="cookie-dlg-content">
         <div class="content-item">
           <div class="item-header">
@@ -312,6 +319,24 @@ watch(
   }
 
   .o-button {
+    border-radius: 32px;
+    --o-button-bg-color_hover: var(--o-color-kleinblue5);
+    --o-button-bg-color_active: var(--o-color-kleinblue4);
+    --o-button-border_hover: 1px solid var(--o-color-kleinblue5);
+    --o-button-border_active: 1px solid var(--o-color-kleinblue4);
+    transition: all 0.2s cubic-bezier(.2, 0, 0, 1);
+    html[class="dark"] & {
+      --o-button-bg-color_hover: var(--o-color-kleinblue7);
+      --o-button-bg-color_active: var(--o-color-kleinblue8);
+      --o-button-border_hover: 1px solid var(--o-color-kleinblue7);
+      --o-button-border_active: 1px solid var(--o-color-kleinblue8);
+    }
+    &:hover {
+      color: var(--o-color-white);
+    }
+    &:active {
+      color: var(--o-color-white);
+    }
     @media (max-width: 840px) {
       width: 100%;
       justify-content: center;
@@ -319,16 +344,33 @@ watch(
   }
 }
 
+.dialog-footer .o-button {
+  border-radius: 32px;
+  --o-button-bg-color_hover: var(--o-color-kleinblue5);
+  --o-button-bg-color_active: var(--o-color-kleinblue4);
+  --o-button-border_hover: 1px solid var(--o-color-kleinblue5);
+  --o-button-border_active: 1px solid var(--o-color-kleinblue4);
+  transition: all 0.2s cubic-bezier(.2, 0, 0, 1);
+  html[class="dark"] & {
+    --o-button-bg-color_hover: var(--o-color-kleinblue7);
+    --o-button-bg-color_active: var(--o-color-kleinblue8);
+    --o-button-border_hover: 1px solid var(--o-color-kleinblue7);
+    --o-button-border_active: 1px solid var(--o-color-kleinblue8);
+  }
+  &:hover {
+    color: var(--o-color-white);
+  }
+  &:active {
+    color: var(--o-color-white);
+  }
+}
+
 .cookie-notice-close {
   position: absolute;
   top: 12px;
-  right: 24px;
+  right: 44px;
   cursor: pointer;
   transform-origin: center;
-  color: var(--e-color-text1);
-  &:hover {
-    color: var(--e-color-brand1);
-  }
 }
 
 :deep(.el-dialog) {
diff --git a/src/components/IconClose.vue b/src/components/IconClose.vue
new file mode 100644
index 0000000..dd9dc30
--- /dev/null
+++ b/src/components/IconClose.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  size?: string | number;
+}>();
+
+const iconSize = computed(() => {
+  if (typeof props.size === 'string' && /^\d+px$/.test(props.size)) {
+    return props.size;
+  }
+  if (typeof props.size === 'number') {
+    return `${props.size}px`;
+  }
+  return '20px';
+});
+</script>
+
+<template>
+  <svg
+    class="close-icon"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M18.528 5.472c0.246 0.246 0.271 0.63 0.074 0.903l-0.074 0.087-5.54 5.538 0.006 0.006-0.989 0.989-0.006-0.006-5.538 5.54c-0.273 0.273-0.717 0.273-0.99 0-0.246-0.246-0.271-0.63-0.074-0.903l0.074-0.087 5.538-5.539-5.538-5.538-0.074-0.087c-0.197-0.274-0.172-0.657 0.074-0.903s0.63-0.271 0.903-0.074l0.087 0.074 5.538 5.539 5.539-5.539c0.273-0.273 0.717-0.273 0.99 0zM14.551 13.561l3.978 3.978 0.074 0.087c0.197 0.274 0.172 0.657-0.074 0.903s-0.63 0.271-0.903 0.074l-0.087-0.074-3.978-3.978c-0.273-0.273-0.273-0.717 0-0.99v0c0.273-0.273 0.717-0.273 0.99 0z"
+    ></path>
+  </svg>
+</template>
+
+<style scoped lang="scss">
+.close-icon {
+  width: v-bind('iconSize');
+  height: v-bind('iconSize');
+  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
+  fill: currentColor;
+  cursor: pointer;
+
+  &:hover {
+    transform: rotate(180deg);
+    color: var(--o-color-kleinblue7);
+  }
+}
+</style>
-- 
Gitee