From d630710c835b7719b84edaeaa86771be0dde03ac Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Thu, 31 Mar 2022 00:33:19 +0800
Subject: [PATCH 1/6] feat: add component sticky

---
 mock/role/index.ts                            |   9 ++
 src/components/ContentDetailWrap/index.ts     |   3 +
 .../src/ContentDetailWrap.vue                 |  76 ++++++++++
 .../ContentWrap/src/ContentWrap.vue           |  32 +++--
 src/components/Sticky/index.ts                |   3 +
 src/components/Sticky/src/Sticky.vue          | 134 ++++++++++++++++++
 src/layout/components/AppView.vue             |   2 +-
 src/locales/en.ts                             |   9 +-
 src/locales/zh-CN.ts                          |   7 +-
 src/router/index.ts                           |   8 ++
 src/views/Components/Sticky.vue               |  62 ++++++++
 src/views/Example/Page/ExampleAdd.vue         |  11 +-
 src/views/Example/Page/ExampleDetail.vue      |  11 +-
 src/views/Example/Page/ExampleEdit.vue        |  11 +-
 14 files changed, 339 insertions(+), 39 deletions(-)
 create mode 100644 src/components/ContentDetailWrap/index.ts
 create mode 100644 src/components/ContentDetailWrap/src/ContentDetailWrap.vue
 create mode 100644 src/components/Sticky/index.ts
 create mode 100644 src/components/Sticky/src/Sticky.vue
 create mode 100644 src/views/Components/Sticky.vue

diff --git a/mock/role/index.ts b/mock/role/index.ts
index 4079507..3306fc4 100644
--- a/mock/role/index.ts
+++ b/mock/role/index.ts
@@ -257,6 +257,14 @@ const adminList = [
         meta: {
           title: 'router.inputPassword'
         }
+      },
+      {
+        path: 'sticky',
+        component: 'views/Components/Sticky',
+        name: 'Sticky',
+        meta: {
+          title: 'router.sticky'
+        }
       }
     ]
   },
@@ -477,6 +485,7 @@ const testList: string[] = [
   '/components/highlight',
   '/components/infotip',
   '/Components/InputPassword',
+  '/Components/Sticky',
   '/hooks',
   '/hooks/useWatermark',
   '/level',
diff --git a/src/components/ContentDetailWrap/index.ts b/src/components/ContentDetailWrap/index.ts
new file mode 100644
index 0000000..1871cac
--- /dev/null
+++ b/src/components/ContentDetailWrap/index.ts
@@ -0,0 +1,3 @@
+import ContentDetailWrap from './src/ContentDetailWrap.vue'
+
+export { ContentDetailWrap }
diff --git a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
new file mode 100644
index 0000000..e60acd4
--- /dev/null
+++ b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ElCard, ElButton } from 'element-plus'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+import { ref, onMounted, defineEmits } from 'vue'
+import { Sticky } from '@/components/Sticky'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('content-wrap')
+
+defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def('')
+})
+const emit = defineEmits(['back'])
+const offset = ref(85)
+const contentDetailWrap = ref()
+onMounted(() => {
+  offset.value = contentDetailWrap.value.getBoundingClientRect().top
+})
+</script>
+
+<template>
+  <div class="content-detail-wrap-container" ref="contentDetailWrap" id="contentDetailWrap">
+    <Sticky :offset="offset">
+      <div class="detail-wrap-header">
+        <div style="float: left">
+          <el-button style="float: left; margin: 10px 0px 0px 10px" @click="emit('back')">
+            <Icon icon="ep:arrow-left" class="mr-5px" />
+            {{ t('common.back') }}
+          </el-button>
+        </div>
+        <div style="float: right">
+          <slot name="right"></slot>
+        </div>
+        <div>
+          <slot name="title">
+            <label class="detail-wrap-header-title">{{ title }}</label>
+          </slot>
+        </div>
+      </div>
+    </Sticky>
+    <div style="padding: var(--app-content-padding)">
+      <ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
+        <div>
+          <slot></slot>
+        </div>
+      </ElCard>
+    </div>
+  </div>
+</template>
+<style lang="less">
+.content-detail-wrap-container {
+  position: relative;
+
+  .detail-wrap-header {
+    position: relative;
+    z-index: 999 !important;
+    width: 100%;
+    height: 50px;
+    padding-right: 20px;
+    line-height: 50px;
+    text-align: center;
+    background: #fff;
+    border-bottom: 1px solid #d0d0d0;
+    transition: position 0.6s ease;
+
+    .detail-wrap-header-title {
+      font-weight: 700;
+    }
+  }
+}
+</style>
diff --git a/src/components/ContentWrap/src/ContentWrap.vue b/src/components/ContentWrap/src/ContentWrap.vue
index 705b6bb..bc848d5 100644
--- a/src/components/ContentWrap/src/ContentWrap.vue
+++ b/src/components/ContentWrap/src/ContentWrap.vue
@@ -14,20 +14,22 @@ defineProps({
 </script>
 
 <template>
-  <ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
-    <template v-if="title" #header>
-      <div class="flex items-center">
-        <span class="text-16px font-700">{{ title }}</span>
-        <ElTooltip v-if="message" effect="dark" placement="right">
-          <template #content>
-            <div class="max-w-200px">{{ message }}</div>
-          </template>
-          <Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
-        </ElTooltip>
+  <div style="padding: var(--app-content-padding)">
+    <ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
+      <template v-if="title" #header>
+        <div class="flex items-center">
+          <span class="text-16px font-700">{{ title }}</span>
+          <ElTooltip v-if="message" effect="dark" placement="right">
+            <template #content>
+              <div class="max-w-200px">{{ message }}</div>
+            </template>
+            <Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
+          </ElTooltip>
+        </div>
+      </template>
+      <div>
+        <slot></slot>
       </div>
-    </template>
-    <div>
-      <slot></slot>
-    </div>
-  </ElCard>
+    </ElCard>
+  </div>
 </template>
diff --git a/src/components/Sticky/index.ts b/src/components/Sticky/index.ts
new file mode 100644
index 0000000..5e1de45
--- /dev/null
+++ b/src/components/Sticky/index.ts
@@ -0,0 +1,3 @@
+import Sticky from './src/Sticky.vue'
+
+export { Sticky }
diff --git a/src/components/Sticky/src/Sticky.vue b/src/components/Sticky/src/Sticky.vue
new file mode 100644
index 0000000..82f9976
--- /dev/null
+++ b/src/components/Sticky/src/Sticky.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import { ref, onMounted, onActivated, shallowRef } from 'vue'
+import { useEventListener, useWindowSize } from '@vueuse/core'
+const props = defineProps({
+  offset: propTypes.number.def(0),
+  zIndex: propTypes.number.def(999),
+  className: propTypes.string.def(''),
+  position: {
+    type: String,
+    validator: function (value: string) {
+      return ['top', 'bottom'].indexOf(value) !== -1
+    },
+    default: 'top'
+  }
+})
+const active = ref(false)
+const positionStyle = ref('' as any)
+const width = ref(undefined as any)
+const height = ref(undefined as any)
+const isSticky = ref(false)
+const refSticky = ref()
+const scrollContainer = shallowRef()
+const { height: windowHeight } = useWindowSize()
+onMounted(() => {
+  height.value = refSticky.value.getBoundingClientRect().height
+  scrollContainer.value = getScrollContainer(refSticky.value, true)
+  useEventListener(scrollContainer, 'scroll', handleScroll)
+  useEventListener('resize', handleReize)
+  handleScroll()
+})
+onActivated(() => {
+  handleScroll()
+})
+
+const camelize = (str) => {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+}
+
+const getStyle = (element, styleName) => {
+  let _a
+  let key = camelize(styleName)
+  if (key === 'float') key = 'cssFloat'
+  try {
+    const style = element.style[styleName]
+    if (style) return style
+    const computed = (_a = document.defaultView) == null ? void 0 : _a.getComputedStyle(element, '')
+    return computed ? computed[styleName] : ''
+  } catch (e) {
+    return element.style[styleName]
+  }
+}
+
+const isScroll = (el, isVertical) => {
+  const key = {
+    undefined: 'overflow',
+    true: 'overflow-y',
+    false: 'overflow-x'
+  }[String(isVertical)]
+  const overflow = getStyle(el, key)
+  return ['scroll', 'auto', 'overlay'].some((s) => overflow.includes(s))
+}
+const getScrollContainer = (el, isVertical) => {
+  let parent = el
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) return window
+    if (isScroll(parent, isVertical)) return parent
+    parent = parent.parentNode
+  }
+  return parent
+}
+
+const handleScroll = () => {
+  width.value = refSticky.value.getBoundingClientRect().width
+  if (props.position === 'top') {
+    const offsetTop = refSticky.value.getBoundingClientRect().top
+    if (offsetTop < props.offset) {
+      sticky()
+      return
+    }
+    reset()
+  } else {
+    const offsetBottom = refSticky.value.getBoundingClientRect().bottom
+    console.log(offsetBottom, props.offset)
+    if (offsetBottom > windowHeight.value - props.offset) {
+      sticky()
+      return
+    }
+    reset()
+  }
+}
+const handleReize = () => {
+  if (isSticky.value) {
+    width.value = refSticky.value.getBoundingClientRect().width + 'px'
+  }
+}
+const sticky = () => {
+  if (active.value) {
+    return
+  }
+  positionStyle.value = 'fixed'
+  active.value = true
+  width.value = width.value + 'px'
+  isSticky.value = true
+}
+const reset = () => {
+  if (!active.value) {
+    return
+  }
+  positionStyle.value = ''
+  width.value = 'auto'
+  active.value = false
+  isSticky.value = false
+}
+</script>
+<template>
+  <div :style="{ height: height + 'px', zIndex: zIndex }" ref="refSticky">
+    <div
+      :class="className"
+      :style="{
+        top: position === 'top' ? offset + 'px' : '',
+        bottom: position !== 'top' ? offset + 'px' : '',
+        zIndex: zIndex,
+        position: positionStyle,
+        width: width,
+        height: height + 'px'
+      }"
+    >
+      <slot>
+        <div>sticky</div>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue
index 1cc009a..16c681d 100644
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -22,7 +22,7 @@ const getCaches = computed((): string[] => {
 <template>
   <section
     :class="[
-      'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-contnet-bg-color)]',
+      'w-[100%] bg-[var(--app-contnet-bg-color)]',
       {
         '!min-h-[calc(100%-var(--app-footer-height))]':
           fixedHeader && (layout === 'classic' || layout === 'topLeft') && footer,
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 1a0db82..16f6361 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -9,7 +9,8 @@ export default {
     loginOut: 'Login out',
     document: 'Document',
     reminder: 'Reminder',
-    loginOutMessage: 'Exit the system？',
+    loginOutMessage: 'Exit the system?',
+    back: 'Back',
     ok: 'OK',
     cancel: 'Cancel',
     reload: 'Reload current',
@@ -132,7 +133,8 @@ export default {
     user: 'User management',
     role: 'Role management',
     document: 'Document',
-    inputPassword: 'InputPassword'
+    inputPassword: 'InputPassword',
+    sticky: 'Sticky'
   },
   analysis: {
     newUser: 'New user',
@@ -334,6 +336,9 @@ export default {
     center: 'center',
     right: 'right'
   },
+  stickyDemo: {
+    sticky: 'Sticky'
+  },
   tableDemo: {
     table: 'Table',
     tableDes: 'Secondary packaging of Table components based on ElementPlus',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index f4bdb82..daba403 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -10,6 +10,7 @@ export default {
     document: '项目文档',
     reminder: '温馨提示',
     loginOutMessage: '是否退出本系统？',
+    back: '返回',
     ok: '确定',
     cancel: '取消',
     reload: '重新加载',
@@ -132,7 +133,8 @@ export default {
     user: '用户管理',
     role: '角色管理',
     document: '文档',
-    inputPassword: '密码输入框'
+    inputPassword: '密码输入框',
+    sticky: '黏性'
   },
   analysis: {
     newUser: '新增用户',
@@ -331,6 +333,9 @@ export default {
     center: '中',
     right: '右'
   },
+  stickyDemo: {
+    sticky: '黏性'
+  },
   tableDemo: {
     table: '表格',
     tableDes: '基于 ElementPlus 的 Table 组件二次封装',
diff --git a/src/router/index.ts b/src/router/index.ts
index 0bf6c69..97bdc0a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -308,6 +308,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.inputPassword')
         }
+      },
+      {
+        path: 'sticky',
+        component: () => import('@/views/Components/Sticky.vue'),
+        name: 'Sticky',
+        meta: {
+          title: t('router.sticky')
+        }
       }
     ]
   },
diff --git a/src/views/Components/Sticky.vue b/src/views/Components/Sticky.vue
new file mode 100644
index 0000000..44fd2b9
--- /dev/null
+++ b/src/views/Components/Sticky.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Sticky } from '@/components/Sticky'
+import { ElAffix } from 'element-plus'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <ContentWrap :title="t('stickyDemo.sticky')">
+    <Sticky :offset="90">
+      <div style="padding: 10px; background-color: lightblue"> Sticky 距离顶部90px </div>
+    </Sticky>
+
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+
+    <el-affix :offset="150">
+      <div style="padding: 10px; background-color: lightblue">Affix 距离顶部150px </div>
+    </el-affix>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+
+    <el-affix :offset="150" position="bottom">
+      <div style="padding: 10px; background-color: lightblue">Affix 距离底部150px </div>
+    </el-affix>
+
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+
+    <Sticky :offset="90" position="bottom">
+      <div style="padding: 10px; background-color: lightblue"> Sticky 距离底部90px </div>
+    </Sticky>
+    <p style="margin: 80px">Content</p>
+    <p style="margin: 80px">Content</p>
+  </ContentWrap>
+</template>
diff --git a/src/views/Example/Page/ExampleAdd.vue b/src/views/Example/Page/ExampleAdd.vue
index 441300f..e86d20f 100644
--- a/src/views/Example/Page/ExampleAdd.vue
+++ b/src/views/Example/Page/ExampleAdd.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Write from './components/Write.vue'
-import { ContentWrap } from '@/components/ContentWrap'
+import { ContentDetailWrap } from '@/components/ContentDetailWrap'
 import { ref, unref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -42,14 +42,13 @@ const save = async () => {
 </script>
 
 <template>
-  <ContentWrap :title="t('exampleDemo.add')">
+  <ContentDetailWrap :title="t('exampleDemo.add')" @back="push('/example/example-page')">
     <Write ref="writeRef" />
 
-    <div class="text-center">
+    <template #right>
       <ElButton type="primary" :loading="loading" @click="save">
         {{ t('exampleDemo.save') }}
       </ElButton>
-      <ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
-    </div>
-  </ContentWrap>
+    </template>
+  </ContentDetailWrap>
 </template>
diff --git a/src/views/Example/Page/ExampleDetail.vue b/src/views/Example/Page/ExampleDetail.vue
index c2d595d..b8555bf 100644
--- a/src/views/Example/Page/ExampleDetail.vue
+++ b/src/views/Example/Page/ExampleDetail.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import Detail from './components/Detail.vue'
-import { ContentWrap } from '@/components/ContentWrap'
+import { ContentDetailWrap } from '@/components/ContentDetailWrap'
 import { ref } from 'vue'
-import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useRouter, useRoute } from 'vue-router'
 import { getTableDetApi } from '@/api/table'
@@ -31,11 +30,7 @@ getTableDet()
 </script>
 
 <template>
-  <ContentWrap :title="t('exampleDemo.detail')">
+  <ContentDetailWrap :title="t('exampleDemo.detail')" @back="push('/example/example-page')">
     <Detail :current-row="currentRow" />
-
-    <div class="text-center">
-      <ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
-    </div>
-  </ContentWrap>
+  </ContentDetailWrap>
 </template>
diff --git a/src/views/Example/Page/ExampleEdit.vue b/src/views/Example/Page/ExampleEdit.vue
index 69f8e5a..ce0849d 100644
--- a/src/views/Example/Page/ExampleEdit.vue
+++ b/src/views/Example/Page/ExampleEdit.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Write from './components/Write.vue'
-import { ContentWrap } from '@/components/ContentWrap'
+import { ContentDetailWrap } from '@/components/ContentDetailWrap'
 import { ref, unref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -58,14 +58,13 @@ const save = async () => {
 </script>
 
 <template>
-  <ContentWrap :title="t('exampleDemo.edit')">
+  <ContentDetailWrap :title="t('exampleDemo.edit')" @back="push('/example/example-page')">
     <Write ref="writeRef" :current-row="currentRow" />
 
-    <div class="text-center">
+    <template #right>
       <ElButton type="primary" :loading="loading" @click="save">
         {{ t('exampleDemo.save') }}
       </ElButton>
-      <ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
-    </div>
-  </ContentWrap>
+    </template>
+  </ContentDetailWrap>
 </template>

From 17c8fea93811d9d9b708808484f5c907d761fcf1 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Thu, 31 Mar 2022 12:06:38 +0800
Subject: [PATCH 2/6] fix: fix style

---
 .../src/ContentDetailWrap.vue                 | 44 ++++++++++++++-----
 src/components/Sticky/src/Sticky.vue          |  1 -
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
index e60acd4..a518d13 100644
--- a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
+++ b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
@@ -24,23 +24,23 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="content-detail-wrap-container" ref="contentDetailWrap" id="contentDetailWrap">
+  <div class="content-detail-wrap-container" ref="contentDetailWrap">
     <Sticky :offset="offset">
       <div class="detail-wrap-header">
-        <div style="float: left">
-          <el-button style="float: left; margin: 10px 0px 0px 10px" @click="emit('back')">
+        <div class="header-left">
+          <el-button @click="emit('back')">
             <Icon icon="ep:arrow-left" class="mr-5px" />
             {{ t('common.back') }}
           </el-button>
         </div>
-        <div style="float: right">
-          <slot name="right"></slot>
-        </div>
-        <div>
+        <div class="header-center">
           <slot name="title">
-            <label class="detail-wrap-header-title">{{ title }}</label>
+            <label class="header-title">{{ title }}</label>
           </slot>
         </div>
+        <div class="header-right">
+          <slot name="right"></slot>
+        </div>
       </div>
     </Sticky>
     <div style="padding: var(--app-content-padding)">
@@ -59,18 +59,42 @@ onMounted(() => {
   .detail-wrap-header {
     position: relative;
     z-index: 999 !important;
+    display: flex;
     width: 100%;
     height: 50px;
     padding-right: 20px;
     line-height: 50px;
     text-align: center;
+
     background: #fff;
     border-bottom: 1px solid #d0d0d0;
     transition: position 0.6s ease;
 
-    .detail-wrap-header-title {
-      font-weight: 700;
+    .el-button {
+      margin: 10px 10px 0px 10px;
     }
+
+    .header-center {
+      display: flex;
+      justify-content: center;
+      flex: 1;
+
+      .header-title {
+        font-weight: 700;
+      }
+    }
+
+    .header-left {
+      display: flex;
+    }
+
+    .header-right {
+      display: flex;
+    }
+  }
+
+  .readonly input {
+    background-color: #f6f6f6;
   }
 }
 </style>
diff --git a/src/components/Sticky/src/Sticky.vue b/src/components/Sticky/src/Sticky.vue
index 82f9976..df8ae70 100644
--- a/src/components/Sticky/src/Sticky.vue
+++ b/src/components/Sticky/src/Sticky.vue
@@ -81,7 +81,6 @@ const handleScroll = () => {
     reset()
   } else {
     const offsetBottom = refSticky.value.getBoundingClientRect().bottom
-    console.log(offsetBottom, props.offset)
     if (offsetBottom > windowHeight.value - props.offset) {
       sticky()
       return

From 4ceaa9d7816369d0dcaf3e18e4cdbbd6165cef88 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Fri, 1 Apr 2022 16:29:41 +0800
Subject: [PATCH 3/6] fix: remove ContentDetailWrap style

---
 .../src/ContentDetailWrap.vue                 | 67 ++++---------------
 1 file changed, 13 insertions(+), 54 deletions(-)

diff --git a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
index a518d13..89e88ec 100644
--- a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
+++ b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
@@ -9,7 +9,7 @@ const { t } = useI18n()
 
 const { getPrefixCls } = useDesign()
 
-const prefixCls = getPrefixCls('content-wrap')
+const prefixCls = getPrefixCls('content-detail-wrap')
 
 defineProps({
   title: propTypes.string.def(''),
@@ -24,27 +24,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="content-detail-wrap-container" ref="contentDetailWrap">
+  <div :class="[`${prefixCls}-container`, 'relative']" ref="contentDetailWrap">
     <Sticky :offset="offset">
-      <div class="detail-wrap-header">
-        <div class="header-left">
+      <div
+        :class="[
+          `${prefixCls}-header`,
+          'flex border-bottom-1 h-50px items-center text-center bg-white  pr-10px '
+        ]"
+      >
+        <div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">
           <el-button @click="emit('back')">
             <Icon icon="ep:arrow-left" class="mr-5px" />
             {{ t('common.back') }}
           </el-button>
         </div>
-        <div class="header-center">
+        <div :class="[`${prefixCls}-header__title`, 'flex flex-1  justify-center']">
           <slot name="title">
-            <label class="header-title">{{ title }}</label>
+            <label class="text-16px font-700">{{ title }}</label>
           </slot>
         </div>
-        <div class="header-right">
+        <div :class="[`${prefixCls}-header__right`, 'flex  pl-10px pr-10px']">
           <slot name="right"></slot>
         </div>
       </div>
     </Sticky>
     <div style="padding: var(--app-content-padding)">
-      <ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
+      <ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
         <div>
           <slot></slot>
         </div>
@@ -52,49 +57,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-<style lang="less">
-.content-detail-wrap-container {
-  position: relative;
-
-  .detail-wrap-header {
-    position: relative;
-    z-index: 999 !important;
-    display: flex;
-    width: 100%;
-    height: 50px;
-    padding-right: 20px;
-    line-height: 50px;
-    text-align: center;
-
-    background: #fff;
-    border-bottom: 1px solid #d0d0d0;
-    transition: position 0.6s ease;
-
-    .el-button {
-      margin: 10px 10px 0px 10px;
-    }
-
-    .header-center {
-      display: flex;
-      justify-content: center;
-      flex: 1;
-
-      .header-title {
-        font-weight: 700;
-      }
-    }
-
-    .header-left {
-      display: flex;
-    }
-
-    .header-right {
-      display: flex;
-    }
-  }
-
-  .readonly input {
-    background-color: #f6f6f6;
-  }
-}
-</style>

From 46133b3ff39d48d11cbcaa1f20a271118f48eb29 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Fri, 1 Apr 2022 16:31:09 +0800
Subject: [PATCH 4/6] fix: add Sticky props comment

---
 src/components/Sticky/src/Sticky.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Sticky/src/Sticky.vue b/src/components/Sticky/src/Sticky.vue
index df8ae70..d998b06 100644
--- a/src/components/Sticky/src/Sticky.vue
+++ b/src/components/Sticky/src/Sticky.vue
@@ -3,9 +3,13 @@ import { propTypes } from '@/utils/propTypes'
 import { ref, onMounted, onActivated, shallowRef } from 'vue'
 import { useEventListener, useWindowSize } from '@vueuse/core'
 const props = defineProps({
+  // 距离顶部或者底部的距离(单位px)
   offset: propTypes.number.def(0),
+  // 设置元素的堆叠顺序
   zIndex: propTypes.number.def(999),
+  // 设置指定的class
   className: propTypes.string.def(''),
+  // 定位方式，默认为(top)，表示距离顶部位置，可以设置为top或者bottom
   position: {
     type: String,
     validator: function (value: string) {

From 179ca064ba8adbb3b063d9798ec1930ccc68e459 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Sat, 2 Apr 2022 14:58:18 +0800
Subject: [PATCH 5/6] fix: fix bug

---
 src/components/Sticky/src/Sticky.vue | 75 +++++++++++++++-------------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/src/components/Sticky/src/Sticky.vue b/src/components/Sticky/src/Sticky.vue
index d998b06..4e4a3cf 100644
--- a/src/components/Sticky/src/Sticky.vue
+++ b/src/components/Sticky/src/Sticky.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { propTypes } from '@/utils/propTypes'
 import { ref, onMounted, onActivated, shallowRef } from 'vue'
-import { useEventListener, useWindowSize } from '@vueuse/core'
+import { useEventListener, useWindowSize, isClient } from '@vueuse/core'
+import type { CSSProperties } from 'vue'
 const props = defineProps({
   // 距离顶部或者底部的距离(单位px)
   offset: propTypes.number.def(0),
@@ -19,16 +20,16 @@ const props = defineProps({
   }
 })
 const active = ref(false)
-const positionStyle = ref('' as any)
-const width = ref(undefined as any)
-const height = ref(undefined as any)
+const width = ref('auto' as string)
+const height = ref('auto' as string)
 const isSticky = ref(false)
-const refSticky = ref()
-const scrollContainer = shallowRef()
+const refSticky = shallowRef<HTMLElement>()
+const scrollContainer = shallowRef<HTMLElement | Window>()
 const { height: windowHeight } = useWindowSize()
 onMounted(() => {
-  height.value = refSticky.value.getBoundingClientRect().height
-  scrollContainer.value = getScrollContainer(refSticky.value, true)
+  height.value = refSticky.value?.getBoundingClientRect().height + 'px'
+
+  scrollContainer.value = getScrollContainer(refSticky.value!, true)
   useEventListener(scrollContainer, 'scroll', handleScroll)
   useEventListener('resize', handleReize)
   handleScroll()
@@ -37,55 +38,64 @@ onActivated(() => {
   handleScroll()
 })
 
-const camelize = (str) => {
+const camelize = (str: string): string => {
   return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
 }
 
-const getStyle = (element, styleName) => {
-  let _a
+const getStyle = (element: HTMLElement, styleName: keyof CSSProperties): string => {
+  if (!isClient || !element || !styleName) return ''
+
   let key = camelize(styleName)
   if (key === 'float') key = 'cssFloat'
   try {
     const style = element.style[styleName]
     if (style) return style
-    const computed = (_a = document.defaultView) == null ? void 0 : _a.getComputedStyle(element, '')
+    const computed = document.defaultView?.getComputedStyle(element, '')
     return computed ? computed[styleName] : ''
-  } catch (e) {
+  } catch {
     return element.style[styleName]
   }
 }
-
-const isScroll = (el, isVertical) => {
-  const key = {
-    undefined: 'overflow',
-    true: 'overflow-y',
-    false: 'overflow-x'
-  }[String(isVertical)]
+const isScroll = (el: HTMLElement, isVertical?: boolean): boolean => {
+  if (!isClient) return false
+  const key = (
+    {
+      undefined: 'overflow',
+      true: 'overflow-y',
+      false: 'overflow-x'
+    } as const
+  )[String(isVertical)]!
   const overflow = getStyle(el, key)
   return ['scroll', 'auto', 'overlay'].some((s) => overflow.includes(s))
 }
-const getScrollContainer = (el, isVertical) => {
+
+const getScrollContainer = (
+  el: HTMLElement,
+  isVertical: boolean
+): Window | HTMLElement | undefined => {
+  if (!isClient) return
   let parent = el
   while (parent) {
     if ([window, document, document.documentElement].includes(parent)) return window
     if (isScroll(parent, isVertical)) return parent
-    parent = parent.parentNode
+    parent = parent.parentNode as HTMLElement
   }
   return parent
 }
 
 const handleScroll = () => {
-  width.value = refSticky.value.getBoundingClientRect().width
+  width.value = refSticky.value!.getBoundingClientRect().width! + 'px'
   if (props.position === 'top') {
-    const offsetTop = refSticky.value.getBoundingClientRect().top
-    if (offsetTop < props.offset) {
+    const offsetTop = refSticky.value?.getBoundingClientRect().top
+    if (offsetTop !== undefined && offsetTop < props.offset) {
       sticky()
       return
     }
     reset()
   } else {
-    const offsetBottom = refSticky.value.getBoundingClientRect().bottom
-    if (offsetBottom > windowHeight.value - props.offset) {
+    const offsetBottom = refSticky.value?.getBoundingClientRect().bottom
+
+    if (offsetBottom !== undefined && offsetBottom > windowHeight.value - props.offset) {
       sticky()
       return
     }
@@ -93,7 +103,7 @@ const handleScroll = () => {
   }
 }
 const handleReize = () => {
-  if (isSticky.value) {
+  if (isSticky.value && refSticky.value) {
     width.value = refSticky.value.getBoundingClientRect().width + 'px'
   }
 }
@@ -101,32 +111,29 @@ const sticky = () => {
   if (active.value) {
     return
   }
-  positionStyle.value = 'fixed'
   active.value = true
-  width.value = width.value + 'px'
   isSticky.value = true
 }
 const reset = () => {
   if (!active.value) {
     return
   }
-  positionStyle.value = ''
   width.value = 'auto'
   active.value = false
   isSticky.value = false
 }
 </script>
 <template>
-  <div :style="{ height: height + 'px', zIndex: zIndex }" ref="refSticky">
+  <div :style="{ height: height, zIndex: zIndex }" ref="refSticky">
     <div
       :class="className"
       :style="{
         top: position === 'top' ? offset + 'px' : '',
         bottom: position !== 'top' ? offset + 'px' : '',
         zIndex: zIndex,
-        position: positionStyle,
+        position: active ? 'fixed' : 'static',
         width: width,
-        height: height + 'px'
+        height: height
       }"
     >
       <slot>

From ca01cbfd98b63a0d76190fe8d43097fdc9df74e6 Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Sat, 2 Apr 2022 15:08:17 +0800
Subject: [PATCH 6/6] fix: fix remove unnecessary variables

---
 src/components/Sticky/src/Sticky.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/Sticky/src/Sticky.vue b/src/components/Sticky/src/Sticky.vue
index 4e4a3cf..6906fbc 100644
--- a/src/components/Sticky/src/Sticky.vue
+++ b/src/components/Sticky/src/Sticky.vue
@@ -19,7 +19,6 @@ const props = defineProps({
     default: 'top'
   }
 })
-const active = ref(false)
 const width = ref('auto' as string)
 const height = ref('auto' as string)
 const isSticky = ref(false)
@@ -108,18 +107,16 @@ const handleReize = () => {
   }
 }
 const sticky = () => {
-  if (active.value) {
+  if (isSticky.value) {
     return
   }
-  active.value = true
   isSticky.value = true
 }
 const reset = () => {
-  if (!active.value) {
+  if (!isSticky.value) {
     return
   }
   width.value = 'auto'
-  active.value = false
   isSticky.value = false
 }
 </script>
@@ -131,7 +128,7 @@ const reset = () => {
         top: position === 'top' ? offset + 'px' : '',
         bottom: position !== 'top' ? offset + 'px' : '',
         zIndex: zIndex,
-        position: active ? 'fixed' : 'static',
+        position: isSticky ? 'fixed' : 'static',
         width: width,
         height: height
       }"