From a2b84d35f76e97a16f798103991b5aaf3f206c7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Sun, 19 Jun 2022 19:18:12 +0800
Subject: [PATCH] =?UTF-8?q?mod:=20=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=B9=E5=90=8D=E5=A4=A7=E5=B0=8F=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/AppProvider.vue |  55 ++++++++++
 src/components/common/ScrollX.vue     | 143 ++++++++++++++++++++++++++
 2 files changed, 198 insertions(+)
 create mode 100644 src/components/common/AppProvider.vue
 create mode 100644 src/components/common/ScrollX.vue

diff --git a/src/components/common/AppProvider.vue b/src/components/common/AppProvider.vue
new file mode 100644
index 0000000..43902f9
--- /dev/null
+++ b/src/components/common/AppProvider.vue
@@ -0,0 +1,55 @@
+<template>
+  <n-config-provider :theme-overrides="themStore.naiveThemeOverrides">
+    <n-loading-bar-provider>
+      <n-dialog-provider>
+        <n-notification-provider>
+          <n-message-provider>
+            <slot></slot>
+            <NaiveProviderContent />
+          </n-message-provider>
+        </n-notification-provider>
+      </n-dialog-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>
+
+<script setup>
+import { defineComponent, h } from 'vue'
+import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'
+
+import { useCssVar } from '@vueuse/core'
+import { useThemeStore } from '@/store/modules/theme'
+import { setupMessage, setupDialog } from '@/utils/common/naiveTools'
+
+const themStore = useThemeStore()
+watch(
+  () => themStore.naiveThemeOverrides.common,
+  (vars) => {
+    for (const key in vars) {
+      useCssVar(`--${key}`, document.documentElement).value = vars[key]
+      if (key === 'primaryColor') {
+        window.localStorage.setItem('__THEME_COLOR__', vars[key])
+      }
+    }
+  },
+  { immediate: true }
+)
+
+// 挂载naive组件的方法至window, 以便在全局使用
+function setupNaiveTools() {
+  window.$loadingBar = useLoadingBar()
+  window.$notification = useNotification()
+
+  window.$message = setupMessage(useMessage())
+  window.$dialog = setupDialog(useDialog())
+}
+
+const NaiveProviderContent = defineComponent({
+  setup() {
+    setupNaiveTools()
+  },
+  render() {
+    return h('div')
+  },
+})
+</script>
diff --git a/src/components/common/ScrollX.vue b/src/components/common/ScrollX.vue
new file mode 100644
index 0000000..4956b38
--- /dev/null
+++ b/src/components/common/ScrollX.vue
@@ -0,0 +1,143 @@
+<template>
+  <div ref="wrapper" class="tags-wrapper" @mousewheel.prevent="handleMouseWheel">
+    <template v-if="showArrow && isOverflow">
+      <div class="left" @click="handleMouseWheel({ wheelDelta: 50 })">
+        <icon-ic:baseline-keyboard-arrow-left />
+      </div>
+      <div class="right" @click="handleMouseWheel({ wheelDelta: -50 })">
+        <icon-ic:baseline-keyboard-arrow-right />
+      </div>
+    </template>
+
+    <div
+      ref="content"
+      class="tags-content"
+      :class="{ overflow: isOverflow && showArrow }"
+      :style="{
+        height: height + 'px',
+        transform: `translateX(${translateX}px)`,
+      }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { debounce } from '@/utils'
+import { isNullOrUndef } from '@/utils/is'
+
+defineProps({
+  height: {
+    type: Number,
+    default: 50,
+  },
+  showArrow: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+onMounted(() => {
+  refreshIsOverflow()
+})
+
+const translateX = ref(0)
+const content = ref(null)
+const wrapper = ref(null)
+const isOverflow = ref(false)
+
+function refreshIsOverflow(isIncrease) {
+  isOverflow.value = content.value.offsetWidth > wrapper.value.offsetWidth
+  if (isNullOrUndef(isIncrease)) return
+  if (isOverflow.value) {
+    handleMouseWheel({ wheelDelta: isIncrease ? -100 : 100 })
+  } else if (!isIncrease && translateX.value < 0) {
+    handleMouseWheel({ wheelDelta: 100 })
+  }
+}
+function handleMouseWheel(e) {
+  const { wheelDelta } = e
+  const wrapperWidth = wrapper.value.offsetWidth
+  const contentWidth = content.value.offsetWidth
+  /**
+   * @wheelDelta 平行滚动的值 >0： 右移  <0: 左移
+   * @translateX 内容translateX的值
+   * @wrapperWidth 容器的宽度
+   * @contentWidth 内容的宽度
+   */
+  if (wheelDelta < 0 && -translateX.value > contentWidth - wrapperWidth + 10) {
+    return
+  }
+  if (wheelDelta > 0 && translateX.value > 10) {
+    return
+  }
+
+  translateX.value += wheelDelta
+
+  resetTranslateX(wrapperWidth, contentWidth)
+}
+
+const resetTranslateX = debounce(function (wrapperWidth, contentWidth) {
+  if (!isOverflow.value) {
+    translateX.value = 0
+  } else if (-translateX.value > contentWidth - wrapperWidth) {
+    translateX.value = wrapperWidth - contentWidth
+  } else if (translateX.value > 0) {
+    translateX.value = 0
+  }
+}, 200)
+
+defineExpose({
+  refreshIsOverflow,
+})
+</script>
+
+<style lang="scss" scoped>
+.tags-wrapper {
+  display: flex;
+  background-color: #fff;
+  position: sticky;
+  top: 0;
+  z-index: 9;
+  overflow: hidden;
+  .tags-content {
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    transition: transform 0.5s;
+    &.overflow {
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+  }
+  .left,
+  .right {
+    background-color: #fff;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+
+    width: 20px;
+    height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 18px;
+    border: 1px solid #e0e0e6;
+    border-radius: 2px;
+
+    z-index: 2;
+    cursor: pointer;
+  }
+  .left {
+    left: 0;
+  }
+  .right {
+    right: 0;
+  }
+}
+</style>