Skip to content

feat: ✨ 调整 composables 的导出,新增 useCountDown 的导出 - #1242

Merged
Moonofweisheng merged 1 commit into
masterfrom
feat/use-count-down-export
Aug 26, 2025
Merged

feat: ✨ 调整 composables 的导出,新增 useCountDown 的导出#1242
Moonofweisheng merged 1 commit into
masterfrom
feat/use-count-down-export

Conversation

@Moonofweisheng

@Moonofweisheng Moonofweisheng commented Aug 26, 2025

Copy link
Copy Markdown
Owner

Closes: #1239

🤔 这个 PR 的性质是?(至少选择一个)

  • 日常 bug 修复
  • 新特性提交
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • CI/CD 改进
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 代码重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

#1239

💡 需求背景和解决方案

composables统一导出

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充

Summary by CodeRabbit

  • 新功能

    • 主入口统一导出组合式工具,新增公共工具与点击外部检测的命名空间导出。
    • 补充本地化模块与主题相关类型导出,提升集成与类型支持。
  • 重构

    • 规范导出/导入方式,部分工具由默认导入改为命名导入;以聚合导出替代零散导出。请按新方式更新导入以避免构建或类型错误。

@netlify

netlify Bot commented Aug 26, 2025

Copy link
Copy Markdown

Deploy Preview for wot-design-uni ready!

Name Link
🔨 Latest commit 51bec0e
🔍 Latest deploy log https://app.netlify.com/projects/wot-design-uni/deploys/68ad7011b6466a00087e0203
😎 Deploy Preview https://deploy-preview-1242--wot-design-uni.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented Aug 26, 2025

Copy link
Copy Markdown

Walkthrough

将 useLockScroll 改为具名导出并更新相关组件导入;新增 composables 聚合导出入口;根 index.ts 改为通配符导出所有 composables,并新增 CommonUtil、clickOut 命名空间导出、locale 导出与类型导出;补齐多项 composable 的公开导出(含 useCountDown)。

Changes

Cohort / File(s) Summary
Composable 聚合导出
src/uni_modules/wot-design-uni/components/composables/index.ts
新增对 useCell, useChildren, flattenVNodes, sortChildren, useCountDown, useLockScroll, useParent, usePopover, useQueue, useRaf, useTouch, useTranslate, useUpload 的具名再导出。
useLockScroll 出口与使用处调整
src/uni_modules/wot-design-uni/components/composables/useLockScroll.ts, src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue, src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue
useLockScroll 从默认导出改为具名导出;对应组件中的导入由默认改为具名,逻辑不变,限定于 H5 条件编译块。
包入口导出面变更
src/uni_modules/wot-design-uni/index.ts
移除单独导出 useQueue/useUpload/useTouch,改为 export * from './components/composables';新增 export * as CommonUtilexport * as clickOutexport * from './locale';新增类型导出 ConfigProviderThemeVars

Sequence Diagram(s)

sequenceDiagram
  participant App as App/外部代码
  participant Pkg as wot-design-uni/index.ts
  participant Comps as components/composables/index.ts
  participant Hook as useCountDown / useLockScroll

  App->>Pkg: import { useCountDown, useLockScroll, ... }
  Pkg-->>Comps: export * from './components/composables'
  Comps-->>Hook: re-export 具名导出
  Hook-->>App: 提供钩子函数
  Note over Pkg,Comps: useLockScroll 由默认导出改为具名导出
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective Addressed Explanation
修复无法从包入口导入 useCountDown(#1239

Assessment against linked issues: Out-of-scope changes

Code Change Explanation
新增命名空间导出 CommonUtil(src/uni_modules/wot-design-uni/index.ts, multiple lines) 与修复 useCountDown 导出无关,扩展了公共 API 面。
新增命名空间导出 clickOut(src/uni_modules/wot-design-uni/index.ts, multiple lines) 与所述问题无关,属于额外 API 暴露。
新增 export * from './locale'src/uni_modules/wot-design-uni/index.ts, multiple lines) 非与 useCountDown 相关的修复,属于额外功能导出。
新增类型导出 ConfigProviderThemeVarssrc/uni_modules/wot-design-uni/index.ts, multiple lines) 与问题目标无关,类型层面的 API 增补。

Possibly related PRs

Poem

小兔拍爪敲键盘,
钩子成群排成版。
默认不见改具名,
一星通配照满山。
倒腾出口风不乱,
欢呼:倒计时也能从入口喊! 🐇✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/use-count-down-export

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying wot-design-uni with  Cloudflare Pages  Cloudflare Pages

Latest commit: 51bec0e
Status: ✅  Deploy successful!
Preview URL: https://f77e7fc1.wot-design-uni.pages.dev
Branch Preview URL: https://feat-use-count-down-export.wot-design-uni.pages.dev

View logs

@vercel

vercel Bot commented Aug 26, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
wot-design-uni Ready Ready Preview Comment Aug 26, 2025 8:28am

@github-actions

Copy link
Copy Markdown

组件测试摘要 (H5 平台)

测试时间: Tue Aug 26 08:29:56 UTC 2025

测试结果

组件 状态 覆盖率
wd-overlay ✅ 通过 93.33%
wd-video-preview ✅ 通过 95.77%

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/uni_modules/wot-design-uni/components/composables/useLockScroll.ts (1)

4-21: 模块级滚动锁与样式恢复重构

当前实现中,每次调用 useLockScroll 都创建独立的实例级计数器,会在多组件同时锁滚动时发生竞态:任一实例先提前解锁会重置 body.style.overflow,导致其他实例失效;且直接置空样式会覆盖页面已有的自定义 overflow,还缺少 H5/SSR 环境下的 document 访问保护。

请在以下位置做出调整:

  • 文件:src/uni_modules/wot-design-uni/components/composables/useLockScroll.ts,将实例级 ref(0) 改为模块级全局计数(避免多实例竞态)。
  • 首次加锁时保存 document.body.style.overflow 原始值,最后一次解锁时恢复,而非直接置空。
  • lockunlock 内部对 document 访问前加 if (typeof document === 'undefined') return,兼容 H5、SSR 等非浏览器环境。

下面是最小侵入的改造示例:

 import { onBeforeUnmount, onDeactivated, ref, watch } from 'vue'

- export function useLockScroll(shouldLock: () => boolean) {
-   const scrollLockCount = ref(0)
+ // 模块级:统一管理全局锁计数与原样式
+ let __wdScrollLockCount = 0
+ let __wdBodyPrevOverflow: string | null = null
+
+ export function useLockScroll(shouldLock: () => boolean) {

   const lock = () => {
-    if (scrollLockCount.value === 0) {
-      document.getElementsByTagName('body')[0].style.overflow = 'hidden'
-    }
-    scrollLockCount.value++
+    if (typeof document === 'undefined') return
+    if (__wdScrollLockCount === 0) {
+      __wdBodyPrevOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+    }
+    __wdScrollLockCount++
   }

   const unlock = () => {
-    if (scrollLockCount.value > 0) {
-      scrollLockCount.value--
-      if (scrollLockCount.value === 0) {
-        document.getElementsByTagName('body')[0].style.overflow = ''
-      }
-    }
+    if (typeof document === 'undefined') return
+    if (__wdScrollLockCount > 0) {
+      __wdScrollLockCount--
+      if (__wdScrollLockCount === 0) {
+        document.body.style.overflow = __wdBodyPrevOverflow ?? ''
+        __wdBodyPrevOverflow = null
+      }
+    }
   }

   const destroy = () => {
     shouldLock() && unlock()
   }

   watch(shouldLock, (value) => {
     value ? lock() : unlock()
   })

   onDeactivated(destroy)
   onBeforeUnmount(destroy)

   return {
     lock,
     unlock
   }
 }
🧹 Nitpick comments (4)
src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue (1)

29-29: 建议从目录 barrel 导入,降低路径耦合

有了 components/composables/index.ts 后,可以统一从目录导入,后续重命名/迁移单文件不影响调用方。

-// #ifdef H5
-import { useLockScroll } from '../composables/useLockScroll'
+// #ifdef H5
+import { useLockScroll } from '../composables'
 // #endif
src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue (2)

35-35: 同上,建议从 barrel 导入,减少对具体文件名的依赖

统一入口便于后续维护与 tree-shaking。

-import { useLockScroll } from '../composables/useLockScroll'
+import { useLockScroll } from '../composables'

6-16: 变量命名拼写错误:previdewVideo → previewVideo

这是一个小拼写问题,但在公开代码中建议修正,提升可读性与 IDE/搜索体验。

@@
-        v-if="previdewVideo.url"
+        v-if="previewVideo.url"
@@
-        :poster="previdewVideo.poster"
-        :title="previdewVideo.title"
+        :poster="previewVideo.poster"
+        :title="previewVideo.title"
@@
-        :src="previdewVideo.url"
+        :src="previewVideo.url"
@@
-const previdewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
+const previewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
@@
-  previdewVideo.url = video.url
-  previdewVideo.poster = video.poster
-  previdewVideo.title = video.title
+  previewVideo.url = video.url
+  previewVideo.poster = video.poster
+  previewVideo.title = video.title
@@
-  previdewVideo.url = ''
-  previdewVideo.poster = ''
-  previdewVideo.title = ''
+  previewVideo.url = ''
+  previewVideo.poster = ''
+  previewVideo.title = ''

Also applies to: 39-59

src/uni_modules/wot-design-uni/index.ts (1)

18-19: 命名空间导出命名风格不一致(CommonUtil vs clickOut)

建议统一命名规则(例如都用 PascalCase),同时为了避免潜在破坏性变更,可以新增一个别名导出,过一到两个小版本再考虑移除旧名。

 export * as CommonUtil from './components/common/util'
-export * as clickOut from './components/common/clickoutside'
+export * as clickOut from './components/common/clickoutside'
+// 可选:新增别名,保持向后兼容
+export * as ClickOutside from './components/common/clickoutside'
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between b26c08c and 51bec0e.

📒 Files selected for processing (5)
  • src/uni_modules/wot-design-uni/components/composables/index.ts (1 hunks)
  • src/uni_modules/wot-design-uni/components/composables/useLockScroll.ts (1 hunks)
  • src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue (1 hunks)
  • src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue (1 hunks)
  • src/uni_modules/wot-design-uni/index.ts (2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#534
File: docs/component/form.md:44-44
Timestamp: 2024-08-19T13:43:36.518Z
Learning: Moonofweisheng prefers addressing syntax errors such as missing quotation marks in the code.
🧬 Code graph analysis (1)
src/uni_modules/wot-design-uni/components/composables/useLockScroll.ts (1)
src/uni_modules/wot-design-uni/components/composables/index.ts (1)
  • useLockScroll (4-4)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Generate Test Summary
🔇 Additional comments (5)
src/uni_modules/wot-design-uni/components/composables/useLockScroll.ts (1)

3-3: 请人工确认 useLockScroll 默认导入已彻底移除

我已在全仓库范围内运行以下脚本,未发现任何默认导入用法:

  • rg -nP "import\s+useLockScroll\s+from\s+['\"][^'\"]*composables/useLockScroll['\"]" -S
  • rg -nP "import\s+useLockScroll\s+from\s+['\"][^'\"]*wot-design-uni(?:/components/composables/useLockScroll)?['\"]" -S

但“无匹配不代表绝对不存在”,请重点检查以下场景以确保无遗漏:

  • 包根入口(如 index.ts)或中转模块的隐式转发
  • 动态导入/require 情况
  • 文档示例中对旧写法的引用

确认全部无残留后,即可安全合并此 PR。

src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue (1)

29-29: 具名导入与 composable 改动一致,👍

和 useLockScroll 改为具名导出保持一致,避免编译期找不到默认导出。

src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue (1)

35-35: 具名导入改动合理,和 composable 一致

无语义变更,编译期一致性更好。

src/uni_modules/wot-design-uni/components/composables/index.ts (1)

1-11: 确认:useCountDown 已正确纳入公共 API 并可从根入口导入

验证结果:

  • src/uni_modules/wot-design-uni/components/composables/useCountDown.ts 文件存在,且包含 export function useCountDown 声明
  • src/uni_modules/wot-design-uni/components/composables/index.ts 已显式导出 export { useCountDown } from './useCountDown'
  • 根入口 src/uni_modules/wot-design-uni/index.ts 已通过 export * from './components/composables' 聚合导出

经以上验证,无遗漏或导出名/实现名不一致问题,变更可直接合入。
建议后续在文档或 CHANGELOG 中新增“从根入口新增导出 useCountDown(import { useCountDown } from 'wot-design-uni')”的提示,以提升用户可发现性。

src/uni_modules/wot-design-uni/index.ts (1)

13-22: 请确认根入口意图公开的导出列表

下面是当前 src/uni_modules/wot-design-uni/index.ts 的所有导出项,请核对是否均为有意对外暴露的公共 API:

  • export { useToast } from './components/wd-toast'
  • export { useMessage } from './components/wd-message-box'
  • export * from './components/composables'
  • export * from './components/wd-notify'
  • export { default as dayjs } from './dayjs'
  • export * as CommonUtil from './components/common/util'
  • export * as clickOut from './components/common/clickoutside'
  • export * from './locale'

若有不希望暴露的内部实现模块,请移除对应导出或改为仅选择性导出稳定的 hooks,以避免意外扩大公共 API 面。

@Moonofweisheng
Moonofweisheng merged commit 93fafa1 into master Aug 26, 2025
13 of 14 checks passed
@Moonofweisheng
Moonofweisheng deleted the feat/use-count-down-export branch August 26, 2025 09:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug 上报] 没有提供 useCountDown 的默认导出

1 participant