version: v5.1.0

CHANGELOG.md

@@ -1,3 +1,16 @@
+## 5.1.0
+
+## Feats
+
+- 主流依赖更新
+- `RDraggableCard` 组件 `defaultPosition` 配置项新增 `center`, `top-center`, `bottom-center` 配置项，并且该配置项支持动态更新了
+- `RDraggableCard` 组件容器 `id` 由 `draggable-card-container` 变更为 `r-draggable-card-container`
+- `views/demo` 包命名调整
+
+## Fixes
+
+- 修复 `RDraggableCard` 组件设置 `dad` 为 `false` 时，初始化位置错误的问题
+
 ## 5.0.10
 
 ## Feats

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "5.0.10",
+  "version": "5.1.0",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || ^20.0.0 || >=22.0.0",
@@ -53,7 +53,7 @@
     "print-js": "^1.6.0",
     "vue": "^3.5.13",
     "vue-demi": "0.14.10",
-    "vue-hooks-plus": "2.2.1",
+    "vue-hooks-plus": "2.2.3",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.4.0",
     "vue3-next-qrcode": "2.0.10"
@@ -92,12 +92,12 @@
     "postcss-px-to-viewport-8-with-include": "1.2.2",
     "prettier": "3.4.2",
     "rollup-plugin-gzip": "4.0.1",
-    "sass": "1.83.0",
+    "sass": "1.83.4",
     "svg-sprite-loader": "6.0.11",
     "typescript": "5.6.3",
     "unplugin-auto-import": "19.0.0",
     "unplugin-vue-components": "0.28.0",
-    "vite": "6.0.7",
+    "vite": "6.1.0",
     "vite-bundle-analyzer": "0.16.0",
     "vite-plugin-cdn2": "1.1.0",
     "vite-plugin-ejs": "1.7.0",

src/components/base/RDraggableCard/DraggableCard.tsx

@@ -5,10 +5,11 @@ import { Teleport, Transition } from 'vue'
 
 import interact from 'interactjs'
 import { cardProps } from 'naive-ui'
-import { unrefElement, completeSize, queryElements, isValueType } from '@/utils'
+import { unrefElement, completeSize, queryElements } from '@/utils'
 
 import type { VNode } from 'vue'
 import type { MaybeElement, MaybeRefOrGetter } from '@vueuse/core'
+import type { AnyFC } from '@/types'
 
 type RestrictRectOptions = Parameters<typeof interact.modifiers.restrictRect>[0]
 
@@ -17,12 +18,15 @@ type Padding = {
   y: number
 }
 
-type Position =
+export type DefaultPosition =
   | Padding
   | 'top-left'
   | 'top-right'
   | 'bottom-left'
   | 'bottom-right'
+  | 'center'
+  | 'top-center'
+  | 'bottom-center'
 
 const props = {
   ...cardProps,
@@ -69,7 +73,7 @@ const props = {
    * @default { x: 0, y: 0 }
    */
   defaultPosition: {
-    type: [Object, String] as PropType<Position>,
+    type: [Object, String] as PropType<DefaultPosition>,
     default: () => ({
       x: 0,
       y: 0,
@@ -132,7 +136,7 @@ export default defineComponent({
       x: 0,
       y: 0,
     }
-    const CONTAINER_ID = 'draggable-card-container'
+    const CONTAINER_ID = 'r-draggable-card-container'
     const cssVars = computed(() => {
       return {
         '--r-draggable-card-width': completeSize(props.width),
@@ -140,7 +144,12 @@ export default defineComponent({
       }
     })
     let isSetup = false
+    const cacheProps = {
+      defaultPosition: props.defaultPosition,
+      dad: props.dad,
+    }
 
+    // 创建 DraggableCard 容器
     const createDraggableCardContainer = () => {
       if (!document.getElementById(CONTAINER_ID)) {
         const container = document.createElement('div')
@@ -152,6 +161,7 @@ export default defineComponent({
 
     createDraggableCardContainer()
 
+    // 获取 card, restrictionElement 的 dom 信息
     const getDom = () => {
       const card = unrefElement(cardRef)
       const re =
@@ -173,9 +183,11 @@ export default defineComponent({
       }
     }
 
+    // 获取 container, card 的位置
     const getPosition = (containerRect: DOMRect, cardRect: DOMRect) => {
       const { defaultPosition, padding } = props
       const { x: paddingX = 0, y: paddingY = 0 } = padding ?? {}
+      // 默认的 body restrictionElement 的偏移量是 0
       const {
         x: containerX,
         y: containerY,
@@ -186,6 +198,33 @@ export default defineComponent({
 
       if (typeof defaultPosition === 'string') {
         switch (defaultPosition) {
+          case 'top-center': {
+            const cx1 = (containerWidth - cardWidth) / 2 + containerX
+            const cy1 = paddingY + containerY
+            const cx2 = paddingX + cx1
+            const cy2 = cy1
+
+            return { x: cx2, y: cy2 }
+          }
+
+          case 'bottom-center': {
+            const cx1 = (containerWidth - cardWidth) / 2 + containerX
+            const cy1 = containerHeight - cardHeight - paddingY + containerY
+            const cx2 = paddingX + cx1
+            const cy2 = cy1
+
+            return { x: cx2, y: cy2 }
+          }
+
+          case 'center': {
+            const cx1 = (containerWidth - cardWidth) / 2 + containerX
+            const cy1 = (containerHeight - cardHeight) / 2 + containerY
+            const cx2 = paddingX + cx1
+            const cy2 = paddingY + cy1
+
+            return { x: cx2, y: cy2 }
+          }
+
           case 'top-left':
             return { x: paddingX + containerX, y: paddingY + containerY }
 
@@ -221,10 +260,11 @@ export default defineComponent({
       }
     }
 
+    // 初始化设置 card 的位置，并且根据配置启用拖拽
     const setupDraggable = () => {
       const { card, restrictionElement } = getDom()
 
-      if (!card || !props.dad) {
+      if (!card) {
         return
       }
 
@@ -249,6 +289,10 @@ export default defineComponent({
         position.y = p.y
       }
 
+      if (!props.dad) {
+        return
+      }
+
       interactInst = interact(card)
         .draggable({
           inertia: true,
@@ -271,15 +315,30 @@ export default defineComponent({
       isSetup = true
     }
 
+    // 取消拖拽
+    const resetDraggable = () => {
+      interactInst?.unset()
+
+      interactInst = null
+    }
+
+    // 更新拖拽
+    const refreshDraggableWhenPropsChange = (fn: AnyFC) => {
+      isSetup = false
+
+      fn()
+      setupDraggable()
+    }
+
     expose()
 
     watchEffect(() => {
-      if (props.dad) {
-        setupDraggable()
-      } else {
-        interactInst?.unset()
+      props.dad ? setupDraggable() : resetDraggable()
 
-        interactInst = null
+      if (props.defaultPosition !== cacheProps.defaultPosition) {
+        refreshDraggableWhenPropsChange(() => {
+          cacheProps.defaultPosition = props.defaultPosition
+        })
       }
     })
 

src/components/base/RDraggableCard/index.scss

@@ -5,7 +5,7 @@
   z-index: var(--r-draggable-card-z-index);
 }
 
-#draggable-card-container {
+#r-draggable-card-container {
   position: fixed;
   top: 0;
   left: 0;

src/components/index.ts

@@ -33,3 +33,4 @@ export type {
   FlowGraphData,
   FlowOptions,
 } from './base/RFlow/src/types'
+export type { DefaultPosition } from './base/RDraggableCard/DraggableCard'

src/router/modules/demo/barcode.ts

@@ -5,7 +5,7 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const barcode: AppRouteRecordRaw = {
   path: 'barcode',
-  component: () => import('@/views/demo/BarcodeDemo'),
+  component: () => import('@/views/demo/barcode-demo'),
   meta: {
     i18nKey: t('menu.Barcode'),
     icon: 'other',

src/router/modules/demo/flow.ts

@@ -5,7 +5,7 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const r: AppRouteRecordRaw = {
   path: '/flow',
-  component: () => import('@/views/demo/Flow'),
+  component: () => import('@/views/demo/flow-demo'),
   meta: {
     i18nKey: t('menu.Flow'),
     icon: 'other',

src/router/modules/demo/table-pro.ts

@@ -5,7 +5,7 @@ import type { AppRouteRecordRaw } from '@/router/types'
 
 const r: AppRouteRecordRaw = {
   path: '/table-pro',
-  component: () => import('@/views/demo/TablePro'),
+  component: () => import('@/views/demo/table-pro-demo'),
   meta: {
     i18nKey: t('menu.TablePro'),
     icon: 'other',

src/views/dashboard/index.tsx

@@ -50,7 +50,7 @@ const Dashboard = defineComponent({
           <NFlex align="center">
             如果有希望补充的功能可以在
             <NText
-              as="a"
+              tag="a"
               class="dashboard-link"
               type="primary"
               {...{

src/views/demo/draggable-card.tsx

@@ -1,19 +1,35 @@
 import { RDraggableCard } from '@/components'
-import { NButton, NCard, NFlex } from 'naive-ui'
+import { NButton, NCard, NFlex, NRadio, NRadioGroup, NSwitch } from 'naive-ui'
+
+import type { DefaultPosition } from '@/components'
 
 export default defineComponent({
   name: 'DraggableCardDemo',
   setup() {
     const card3 = ref(false)
     const domRef = useTemplateRef<HTMLElement>('domRef')
+    const positionRadioOptions = [
+      { label: 'center', value: 'center' },
+      { label: 'top-center', value: 'top-center' },
+      { label: 'bottom-center', value: 'bottom-center' },
+      { label: 'top-left', value: 'top-left' },
+      { label: 'top-right', value: 'top-right' },
+      { label: 'bottom-left', value: 'bottom-left' },
+      { label: 'bottom-right', value: 'bottom-right' },
+    ]
+    const positionRadioValue = ref('center')
+    const card3Dad = ref(true)
 
     return {
       card3,
+      card3Dad,
       domRef,
+      positionRadioOptions,
+      positionRadioValue,
     }
   },
   render() {
-    const { card3, domRef } = this
+    const { card3, domRef, positionRadioOptions } = this
 
     return (
       <div>
@@ -22,7 +38,7 @@ export default defineComponent({
           style={{
             width: '100%',
             height: '400px',
-            backgroundColor: 'red',
+            backgroundColor: 'rgba(255, 10, 20, 1)',
           }}
         ></div>
         <RDraggableCard animation title="Body">
@@ -35,6 +51,8 @@ export default defineComponent({
             restrictionElement={domRef}
             closable
             onClose={() => (this.card3 = false)}
+            defaultPosition={this.positionRadioValue as DefaultPosition}
+            dad={this.card3Dad}
           >
             {{
               default: () =>
@@ -46,9 +64,33 @@ export default defineComponent({
           </RDraggableCard>
         ) : null}
         <NCard title="显示与隐藏卡片">
-          <NButton type="primary" onClick={() => (this.card3 = !this.card3)}>
-            点一下试试
-          </NButton>
+          <NFlex vertical>
+            <NFlex>
+              <NSwitch v-model:value={this.card3Dad}>
+                {{
+                  checked: () => '拖拽',
+                  unchecked: () => '禁用',
+                }}
+              </NSwitch>
+            </NFlex>
+            <NFlex>
+              <NRadioGroup v-model:value={this.positionRadioValue}>
+                {positionRadioOptions.map((curr) => (
+                  <NRadio key={curr.value} value={curr.value}>
+                    {curr.label}
+                  </NRadio>
+                ))}
+              </NRadioGroup>
+            </NFlex>
+            <NFlex>
+              <NButton
+                type="primary"
+                onClick={() => (this.card3 = !this.card3)}
+              >
+                点一下试试
+              </NButton>
+            </NFlex>
+          </NFlex>
         </NCard>
       </div>
     )

src/views/demo/flow-demo.tsx

@@ -16,6 +16,8 @@ export default defineComponent({
 
     const getInst = () => {
       console.log(getFlowInstance())
+
+      window.$message.info('获取实例成功，请在 console 中查看')
     }
 
     setTimeout(() => {