@cloudbase/weda-ui 3.5.2 → 3.6.0

package/dist/web/components/tabs/index.css

@@ -41,7 +41,7 @@
   position: relative;
 }
 .weda-tabs__nav-cell.active {
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
 }
 .weda-tabs__nav-cell.scroll {
   flex-basis: auto;
@@ -62,7 +62,7 @@
 
 .weda-tabs__nav-cell.active::after {
   width: 100%;
-  border-bottom-color: #0052d9;
+  border-bottom-color: var(--wd-color-brand, #0052d9);
   transition: border-color 0.15s ease-in-out, width 0.15s ease-in-out,
     height 0.15s ease-in-out;
 }

package/dist/web/components/uploaderFileView/index.js

@@ -44,5 +44,5 @@ const FileView = ({ fileID }) => {
             return fileID;
         }
     }, [fileID]);
-    return (_jsx("a", { title: title, onClick: () => downloadFile(src, title), className: `${CLASS_PREFIX}__single`, children: title }));
+    return (_jsx("a", { title: title, onClick: () => downloadFile(src, title), className: `${CLASS_PREFIX}__single wd-table__a`, children: title }));
 };

package/dist/web/components/userInfo/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import '../style';
 import type { ButtonProps } from '../../components/button';
 import type { CommonPropsType } from '../../types';

package/dist/web/components/wd-ad/ad-view.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './style/view';
+export declare function BannerAd(): JSX.Element;
+export declare function VideoAd(): JSX.Element;
+export declare function GridAd({ gridCount }: {
+    gridCount?: number;
+}): JSX.Element;

package/dist/web/components/wd-ad/ad-view.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import * as React from 'react';
+import { WdIcon } from '../wd-icon';
+import './style/view';
+// Banner 广告示例
+export function BannerAd() {
+    const { ref, height } = useHeight(0.35);
+    return (_jsxs("div", { className: "ad-view ad-view__banner", ref: ref, style: { height }, children: [_jsx(AdMark, { className: "ad-view__mark-ad", icon: "chevrondown", label: "\u5E7F\u544A" }), _jsx("div", { className: "ad-view__banner-image" }), _jsx(AdMark, { className: "ad-view__mark-about", label: "\u6D3B\u52A8\u63A8\u5E7F" })] }));
+}
+// 视频广告示例
+export function VideoAd() {
+    const { ref, height } = useHeight(0.56);
+    return (_jsxs("div", { className: "ad-view ad-view__video", ref: ref, style: { height }, children: [_jsx(AdMark, { className: "ad-view__mark-ad", icon: "chevrondown", label: "\u5E7F\u544A" }), _jsx(AdMark, { className: "ad-view__mark-close", label: "\u5173\u95ED" }), _jsx("div", { className: "ad-view__video-image" }), _jsx("div", { className: "ad-view__video-image-voice" }), _jsx(AdMark, { className: "ad-view__mark-detail", label: "\u67E5\u770B\u8BE6\u60C5" })] }));
+}
+// 格子广告示例
+export function GridAd({ gridCount = 5 }) {
+    const ratio = gridCount == 8 ? 0.61 : 0.35;
+    const { ref, height } = useHeight(ratio);
+    return (_jsxs("div", { className: `ad-view ad-view__grid ad-view__grid-${gridCount}`, ref: ref, style: { height }, children: [_jsx(AdMark, { className: "ad-view__mark-ad", icon: "chevrondown", label: "\u5E7F\u544A" }), _jsx("div", { className: "ad-view__grid-list", children: Array.from({ length: gridCount }).map((_, i) => (_jsxs("div", { className: "ad-view__grid-item", children: [_jsx("div", { className: "ad-view__grid-item-image" }), _jsxs("span", { className: "ad-view__grid-item-label", children: ["\u5E7F\u544A ", i + 1] })] }, i))) })] }));
+}
+// 文字标记
+function AdMark(props) {
+    const { className, icon, label = '广告' } = props;
+    return (_jsxs("div", { className: `${className} ad-view__mark-bg`, children: [label && _jsx("span", { className: "ad-view__mark-label", children: label }), icon && _jsx(WdIcon, { className: "ad-view__mark-icon", name: icon, size: "sm" })] }));
+}
+// 模拟小程序高度等比例计算
+function useHeight(ratio = 0.35) {
+    const ref = React.useRef();
+    const [height, setHeight] = React.useState(100);
+    React.useEffect(() => {
+        var _a;
+        if (ref === null || ref === void 0 ? void 0 : ref.current) {
+            const width = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+            const height = Math.floor(width * ratio);
+            setHeight(height);
+        }
+    }, [ref, ratio]);
+    return { ref, height };
+}

package/dist/web/components/wd-ad/index.d.ts

@@ -0,0 +1,3 @@
+import { WdAd } from './wd-ad';
+export type { WdAdProps } from './wd-ad';
+export default WdAd;

package/dist/web/components/wd-ad/index.js

@@ -0,0 +1,2 @@
+import { WdAd } from './wd-ad';
+export default WdAd;

package/dist/web/components/wd-ad/style/view.css

@@ -0,0 +1,147 @@
+.ad-view {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+/* mark 标记 */
+.ad-view__mark-bg {
+  background-color: rgba(0, 0, 0, 0.26);
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  align-items: center;
+}
+
+.ad-view__mark-ad {
+  width: 52px;
+  height: 20px;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 0 4px 0 4px;
+  border-radius: 3px;
+}
+
+.ad-view__mark-label {
+  color: #fff;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ad-view__mark-icon {
+  height: 16px;
+  width: 16px;
+  color: #fff;
+}
+
+.ad-view__mark-about {
+  position: absolute;
+  width: 64px;
+  height: 20px;
+  right: 0;
+  bottom: 0;
+  border-radius: 6px 0 0 0;
+  padding: 0 8px;
+}
+
+.ad-view__mark-close {
+  position: absolute;
+  width: 40px;
+  height: 20px;
+  right: 10px;
+  top: 10px;
+  padding: 0 8px;
+  border-radius: 3px;
+}
+
+.ad-view__mark-detail {
+  position: absolute;
+  width: 88px;
+  height: 32px;
+  right: 12px;
+  bottom: 12px;
+  padding: 5px 16px;
+  border-radius: 6px;
+  background-color: #07c160;
+}
+
+/* banner, video, grid 最小宽度 */
+.ad-view__banner {
+  min-width: 300px;
+}
+.ad-view__video {
+  min-width: 90%;
+}
+.ad-view__grid-5 {
+  min-width: 331px;
+}
+.ad-view__grid-8 {
+  min-width: 294px;
+}
+
+.ad-view__banner,
+.ad-view__video {
+  background-color: #e7e7e7;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+/* 背景图 */
+.ad-view__banner-image,
+.ad-view__video-image,
+.ad-view__video-image-voice,
+.ad-view__grid-item-image {
+  background-image: url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZWlDQ1BEaXNwbGF5IFAzAAB4nHWQvUvDUBTFT6tS0DqIDh0cMolD1NIKdnFoKxRFMFQFq1OafgltfCQpUnETVyn4H1jBWXCwiFRwcXAQRAcR3Zw6KbhoeN6XVNoi3sfl/Ticc7lcwBtQGSv2AijplpFMxKS11Lrke4OHnlOqZrKooiwK/v276/PR9d5PiFlNu3YQ2U9cl84ul3aeAlN//V3Vn8maGv3f1EGNGRbgkYmVbYsJ3iUeMWgp4qrgvMvHgtMunzuelWSc+JZY0gpqhrhJLKc79HwHl4plrbWD2N6f1VeXxRzqUcxhEyYYilBRgQQF4X/8044/ji1yV2BQLo8CLMpESRETssTz0KFhEjJxCEHqkLhz634PrfvJbW3vFZhtcM4v2tpCAzidoZPV29p4BBgaAG7qTDVUR+qh9uZywPsJMJgChu8os2HmwiF3e38M6Hvh/GMM8B0CdpXzryPO7RqFn4Er/QfBIQM2AAABY0lEQVR4Ae2XP0sDQRDFn3/wqlQWYkC0shCt8gHsrK6z8kP6Uay00VpMJQgWYkDJDEngWHZzu3O7twTeD4YkM8eRybx52QMIIYQQQsjOcoB6TCVm69cviQUM7KEOE4kHJ/co8YlE9lGHa0/uBgZqNdB4cr8wUKuBV0/uBQZq7YCie6CyOZJ4hkH/JVBHOcaI5LRR/UXvJa4k5hLfGIGcO9B23t9iJY3i5JqA/iFddD4363u/ozA5JqDSmXnyuqBTFCZHA+2WWnEpDZWQKx2XPinphLTBHxgZ0oBK5y7iuhP4XSmLaw2RUJtwrU9KWVzLOoE+6bi4UsrmWpYJhFynj64rLXrq0VgmoLptYONU4g0rzeuXnQTqf4gktYFU6bh0paJNXEocBupRpDQQ6zp9bFxJT5//EmeBepQrpeyARfchNq6jx+i5p36OSFKeB6zLG0K1/hG47xNGOs0SQgghhJCKLAEdvS6VdWVhtgAAAABJRU5ErkJggg==);
+  background-repeat: no-repeat;
+  height: 54px;
+  width: 54px;
+  background-position: center;
+}
+
+.ad-view__video-image {
+  background-image: url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZWlDQ1BEaXNwbGF5IFAzAAB4nHWQvUvDUBTFT6tS0DqIDh0cMolD1NIKdnFoKxRFMFQFq1OafgltfCQpUnETVyn4H1jBWXCwiFRwcXAQRAcR3Zw6KbhoeN6XVNoi3sfl/Ticc7lcwBtQGSv2AijplpFMxKS11Lrke4OHnlOqZrKooiwK/v276/PR9d5PiFlNu3YQ2U9cl84ul3aeAlN//V3Vn8maGv3f1EGNGRbgkYmVbYsJ3iUeMWgp4qrgvMvHgtMunzuelWSc+JZY0gpqhrhJLKc79HwHl4plrbWD2N6f1VeXxRzqUcxhEyYYilBRgQQF4X/8044/ji1yV2BQLo8CLMpESRETssTz0KFhEjJxCEHqkLhz634PrfvJbW3vFZhtcM4v2tpCAzidoZPV29p4BBgaAG7qTDVUR+qh9uZywPsJMJgChu8os2HmwiF3e38M6Hvh/GMM8B0CdpXzryPO7RqFn4Er/QfBIQM2AAAAx0lEQVR4Ae3WvQ3CMBAF4AdComIBKioqaKCiY1sGYAEvwABkAQbIApxlS2l99il3xfukp6Rworz8OAaIiIiIiKjTRjH2KTnDxiRJMLBVjLW6eNNzaQqs5YDytJvsEMdecqnJ+6nloCgFTpIHyt1X8S5wlNzqtotngXzHrxjk+REPX3wWcRZSYQFvngUmGPAskCQvyQ8DvF+hWfJGKTOjQ5Q/8VRzx7KUaBJpLZR9sBRpEnEWyq9Sah2sKWAya1RfEBERERGRtz89EBMp7wYR8AAAAABJRU5ErkJggg==);
+}
+
+.ad-view__video-image-voice {
+  background-image: url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABZWlDQ1BEaXNwbGF5IFAzAAB4nHWQvUvDUBTFT6tS0DqIDh0cMolD1NIKdnFoKxRFMFQFq1OafgltfCQpUnETVyn4H1jBWXCwiFRwcXAQRAcR3Zw6KbhoeN6XVNoi3sfl/Ticc7lcwBtQGSv2AijplpFMxKS11Lrke4OHnlOqZrKooiwK/v276/PR9d5PiFlNu3YQ2U9cl84ul3aeAlN//V3Vn8maGv3f1EGNGRbgkYmVbYsJ3iUeMWgp4qrgvMvHgtMunzuelWSc+JZY0gpqhrhJLKc79HwHl4plrbWD2N6f1VeXxRzqUcxhEyYYilBRgQQF4X/8044/ji1yV2BQLo8CLMpESRETssTz0KFhEjJxCEHqkLhz634PrfvJbW3vFZhtcM4v2tpCAzidoZPV29p4BBgaAG7qTDVUR+qh9uZywPsJMJgChu8os2HmwiF3e38M6Hvh/GMM8B0CdpXzryPO7RqFn4Er/QfBIQM2AAABXUlEQVR4Ad1UoXLCQBDdYONbXd9o6qMbTzWe6lYXTXXx9VRT3a9IdPDo9O3wFo7LXTiYwbAzb3Jzu/febm73RG7Suq6rgDu5hpF8BSxjItgfJ9LJKLD3B7SAks9dEV0DH1i+y6UCWZZtSHAkAjzoGihiZIiZM+7ANxCs5JrtPaCiOWGJVF78mIltgRkTDf6iWCV5JJEceMOyAdaMm5l/5AUvecGK0hOJmZI9ye73fbOCAucfewLMdH8wUeTTqbIEVtwvQwK97GIi1l3wbSmiplmvuS5SBIZE3BZujNQulxUlCcRE9i3MKoKWKnBKxFq2duagPldgSGRK/w9gAk1IoD2tMdhdmvUL1/rkxCfZDGQTfCb+vk2yN/F6FzpoG/inoQokQKTDs+DhkN+txKZ9Yf6kOwDJr+wmtk0QUXu1Fk6+ZIekThDpPfVnmb0zEZ8+7V98z57lGkaRSm7C/gFEAOIWCaf/agAAAABJRU5ErkJggg==);
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+}
+
+.ad-view__grid-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 42px 16px 16px 16px;
+}
+
+.ad-view__grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  flex: 0;
+}
+
+.ad-view__grid-item-label {
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.ad-view__grid-item-image {
+  background-image: url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA2CAYAAABjhwHjAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZWlDQ1BEaXNwbGF5IFAzAAB4nHWQvUvDUBTFT6tS0DqIDh0cMolD1NIKdnFoKxRFMFQFq1OafgltfCQpUnETVyn4H1jBWXCwiFRwcXAQRAcR3Zw6KbhoeN6XVNoi3sfl/Ticc7lcwBtQGSv2AijplpFMxKS11Lrke4OHnlOqZrKooiwK/v276/PR9d5PiFlNu3YQ2U9cl84ul3aeAlN//V3Vn8maGv3f1EGNGRbgkYmVbYsJ3iUeMWgp4qrgvMvHgtMunzuelWSc+JZY0gpqhrhJLKc79HwHl4plrbWD2N6f1VeXxRzqUcxhEyYYilBRgQQF4X/8044/ji1yV2BQLo8CLMpESRETssTz0KFhEjJxCEHqkLhz634PrfvJbW3vFZhtcM4v2tpCAzidoZPV29p4BBgaAG7qTDVUR+qh9uZywPsJMJgChu8os2HmwiF3e38M6Hvh/GMM8B0CdpXzryPO7RqFn4Er/QfBIQM2AAACG0lEQVR4Ae2av07CQBjAv2sJCwxOQAcibkyoI5sLC4uPYHwDfQP0CXgEXXkAVthYGAgTC9EEEtIJTGDhX/2+6jW1KhG5o7nL/ZLj2q808Ov3XbmGYxBiMpkUNpvNnW3b17hbAHWYYethe3Ic55kHGd9AsRvs6thOQGEYY/VcLnfvb9MLZQy7F9AELsjlWthdgUbg0Lq0P7NWB83Ae4drrdfrAmiIZVmnFuhLQWc5MHKqYuRUxcipipFTFSOnKkZOJovFAmSRgBjpdrswGAwgnU5DtVqFZDIJIoktc/P53Bfj2+PxGEQTmxxlKZVKBfuZTAZEE1tZklylUgHXdf2ypCYaqXJUbs1mE8rlMuTz+W/HZUlxpJZlp9OB5XIZ9MdGmhzdLKjkCC54bKTIUTn2+/0vsdFo5LdjIkXutzKMxukiNBoNadLC5cLlGCVanrLHpFC5n8oxCi9PkplOp35M1pgUKvfXDHCRUqkUxGSMSWFyu8oxCs9UsViEbDYbxEWXpzC54XC41/t5pugHnk+YSYzPN0XA8AOuEolECw6EvthqtYJ9ofll+NzwfPNA2sKmX3T1//vIcsi5uzBP4qpi5FTFyKmKkVMVI6cqRk5VtJXzPO+N1n71QENQrqftkkTkzC9L27ZpZekM9OHBcZxXXw7/Yeltt9tbUF/Qg491zjXaYeEjtLAUJWuMsXNsFyAPD8TCF3A/olibB98BGan/0YLufZEAAAAASUVORK5CYII=);
+}
+
+/* 外层 wd-ad */
+.wd-ad {
+  width: 100%;
+}

package/dist/web/components/wd-ad/style/view.d.ts

@@ -0,0 +1 @@
+import './view.css';

package/dist/web/components/wd-ad/style/view.js

@@ -0,0 +1 @@
+import './view.css';

package/dist/web/components/wd-ad/wd-ad.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-ad';
+/**
+ * 广告组件，web 端仅用于编辑器展示
+ */
+export declare function WdAd(props: WdAdProps): JSX.Element;
+export interface WdAdProps extends CommonPropsType, DataType {
+}

package/dist/web/components/wd-ad/wd-ad.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useConfig } from '../../utils/config-context';
+import { BannerAd, VideoAd, GridAd } from './ad-view';
+import { Bubble, ConfigProvider } from 'tea-component';
+import { useCanPreview } from '../../utils/hooks/useCanPreview';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+/**
+ * 广告组件，web 端仅用于编辑器展示
+ */
+export function WdAd(props) {
+    const { className, id, style, adType: _adType = X_RUNTIME_DEFAULT.adType, gridCount: _gridCount = X_RUNTIME_DEFAULT.gridCount, } = props;
+    const adType = ['banner', 'video', 'grid'].includes(_adType)
+        ? _adType
+        : 'banner';
+    const gridCount = _gridCount == 8 ? 8 : 5;
+    const { classPrefix } = useConfig();
+    const canPreview = useCanPreview();
+    if (!canPreview)
+        return null;
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(Bubble, { placement: "auto", openDelay: 300, content: _jsxs(_Fragment, { children: ["\u8BE5\u7EC4\u4EF6\u5FC5\u987B\u5728\u5C0F\u7A0B\u5E8F\u771F\u5B9E\u73AF\u5883\u4F7F\u7528\u624D\u80FD\u591F\u770B\u5230\u5B9E\u9645\u6548\u679C\u3002", _jsx("br", {}), "\u8BF7\u9075\u5FAA\u5FAE\u4FE1\u5E7F\u544A\u7EC4\u4EF6\u5E94\u7528\u89C4\u8303\uFF0C\u5426\u5219\u53EF\u80FD\u5BFC\u81F4\u5C0F\u7A0B\u5E8F\u5BA1\u6838\u5931\u8D25\u3002"] }), children: _jsxs("div", { className: `${classPrefix}-ad ${classPrefix}-ad--${adType} ${className}`, id: id, style: style, children: [adType === 'banner' && _jsx(BannerAd, {}), adType === 'video' && _jsx(VideoAd, {}), adType === 'grid' && _jsx(GridAd, { gridCount: gridCount })] }) }) }));
+}

package/dist/web/components/wd-audio/index.d.ts

@@ -0,0 +1,3 @@
+import { WdAudio } from './wd-audio';
+export { WdAudio, type WdAudioProps } from './wd-audio';
+export default WdAudio;

package/dist/web/components/wd-audio/index.js

@@ -0,0 +1,3 @@
+import { WdAudio } from './wd-audio';
+export { WdAudio } from './wd-audio';
+export default WdAudio;

package/dist/web/components/wd-audio/wd-audio.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-audio';
+export declare const WdAudio: React.ForwardRefExoticComponent<WdAudioProps & React.RefAttributes<unknown>>;
+export interface WdAudioProps extends CommonPropsType, DataType {
+}

package/dist/web/components/wd-audio/wd-audio.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable rulesdir/no-timer */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { forwardRef, useEffect, useState, useImperativeHandle, useCallback, } from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import useDebouncedCallback from '../../utils/hooks/use-debounced-callback';
+import { useTempUrl } from '../../utils/hooks/use-cloud-id-temp-url';
+const MINUTE = 60;
+const DEFAULT_TIME_STR = '--:--';
+const calcTime = (num) => {
+    try {
+        let m = `${Math.floor(+num / MINUTE)}`;
+        let s = `${Math.floor(+num % MINUTE)}`;
+        if (m.length <= 1)
+            m = `0${m}`;
+        if (s.length <= 1)
+            s = `0${s}`;
+        return `${m}:${s}`;
+    }
+    catch (error) {
+        return DEFAULT_TIME_STR;
+    }
+};
+export const WdAudio = forwardRef(function WdAudio(props, ref) {
+    const { className = '', style, id } = props;
+    const platform = usePlatform();
+    const { classPrefix } = useConfig();
+    const [currentTimeStr, setCurrentTimeStr] = useState(DEFAULT_TIME_STR);
+    const [durationStr, setDurationStr] = useState(DEFAULT_TIME_STR);
+    const [played, setPlayed] = useState(false);
+    const { data: realSrc } = useTempUrl(props.src);
+    // 响应式css api
+    const classes = {
+        [`${classPrefix}-audio`]: true,
+        [`${classPrefix}-${platform}-audio`]: true,
+    };
+    // audio实例
+    const [audioInstance, setAudioInstance] = useState(null);
+    const destroy = useCallback(() => {
+        if (!audioInstance)
+            return;
+        audioInstance.pause();
+        audioInstance.src = '';
+        audioInstance.load();
+        audioInstance.onplay = null;
+        audioInstance.onpause = null;
+        audioInstance.onseeked = null;
+        audioInstance.onerror = null;
+        audioInstance.onended = null;
+        audioInstance.ontimeupdate = null;
+        audioInstance.ondurationchange = null;
+        setCurrentTimeStr(DEFAULT_TIME_STR);
+        setDurationStr(DEFAULT_TIME_STR);
+        setAudioInstance(null);
+    }, [audioInstance, setCurrentTimeStr, setDurationStr, setAudioInstance]);
+    /**
+     * 初始化代码audio实例
+     */
+    const init = useDebouncedCallback(useCallback(async (src = realSrc, autoplay = props.autoplay, loop = props.loop, playbackRate = props.playbackRate, startTime = props.startTime) => {
+        let audio = audioInstance;
+        if (audioInstance) {
+            destroy();
+        }
+        else {
+            audio = new Audio();
+        }
+        setPlayed(false);
+        audio.load();
+        audio.src = src || '';
+        audio.autoplay = autoplay;
+        audio.autostart = autoplay;
+        audio.loop = loop;
+        audio.playbackRate = playbackRate;
+        audio.currentTime = startTime || 0;
+        audio.startTime = startTime || 0;
+        setCurrentTimeStr(calcTime(startTime || 0));
+        setAudioInstance(audio);
+    }, [
+        audioInstance,
+        destroy,
+        props.autoplay,
+        props.loop,
+        props.playbackRate,
+        realSrc,
+        props.startTime,
+    ]), 500, {
+        maxWait: 1000,
+    });
+    useEffect(() => {
+        init(realSrc, props.autoplay, props.loop, props.playbackRate, props.startTime);
+    }, [init, props.autoplay, props.loop, props.playbackRate, realSrc, props.startTime]);
+    useEffect(() => {
+        if (!(audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.src))
+            return;
+        audioInstance.onplay = () => {
+            setPlayed(true);
+            setTimeout(() => {
+                var _a;
+                (_a = props.events) === null || _a === void 0 ? void 0 : _a.play();
+            }, 0);
+        };
+        audioInstance.onpause = () => {
+            setPlayed(false);
+            setTimeout(() => {
+                var _a;
+                (_a = props.events) === null || _a === void 0 ? void 0 : _a.pause();
+            }, 0);
+        };
+        audioInstance.onseeked = () => {
+            var _a;
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.seeked({ position: audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.currentTime });
+        };
+        audioInstance.onerror = (res) => {
+            var _a;
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.error(res);
+        };
+        audioInstance.onended = () => {
+            var _a;
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.ended();
+        };
+        audioInstance.ontimeupdate = () => {
+            var _a;
+            setCurrentTimeStr(calcTime((audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.currentTime) || 0));
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.timeupdate({
+                currentTime: audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.currentTime,
+                duration: audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.duration,
+            });
+        };
+        audioInstance.ondurationchange = () => {
+            setDurationStr(calcTime((audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.duration) || 0));
+        };
+        setTimeout(() => {
+            var _a;
+            if (audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.autoplay) {
+                audioInstance.play();
+            }
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.audioReady({ audioInstance });
+        }, 1000);
+    }, [audioInstance, props.events, setPlayed]);
+    useEffect(() => {
+        return () => {
+            destroy();
+        };
+    }, [destroy]);
+    const play = useCallback(() => {
+        audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.play();
+    }, [audioInstance]);
+    const pause = useCallback(() => {
+        audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.pause();
+    }, [audioInstance]);
+    const stop = useCallback(() => {
+        var _a, _b;
+        audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.load();
+        audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.pause();
+        setPlayed(false);
+        (_a = props.events) === null || _a === void 0 ? void 0 : _a.stop();
+        (_b = props.events) === null || _b === void 0 ? void 0 : _b.seeked({ position: 0 });
+    }, [audioInstance, props.events, setPlayed]);
+    const seek = useCallback(({ position } = {}) => {
+        if (!audioInstance)
+            return;
+        audioInstance.currentTime = position;
+    }, [audioInstance]);
+    const fastForward = useCallback(({ time } = {}) => {
+        if (!audioInstance)
+            return;
+        audioInstance.currentTime = Math.min(audioInstance.currentTime + time, audioInstance.duration);
+    }, [audioInstance]);
+    const backward = useCallback(({ time } = {}) => {
+        if (!audioInstance)
+            return;
+        audioInstance.currentTime = Math.max(audioInstance.currentTime - time, 0);
+    }, [audioInstance]);
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            audioInstance,
+            currentTimeStr,
+            durationStr,
+            played,
+            play,
+            pause,
+            stop,
+            seek,
+            destroy,
+            fastForward,
+            backward,
+            init,
+        };
+    }, [
+        audioInstance,
+        currentTimeStr,
+        durationStr,
+        played,
+        play,
+        pause,
+        stop,
+        seek,
+        destroy,
+        fastForward,
+        backward,
+        init,
+    ]);
+    return (_jsx("div", { className: classNames(classes, className), id: id, style: style, children: props.children }));
+});

package/dist/web/components/wd-calendar/MonthSelect.d.ts

@@ -0,0 +1,9 @@
+export interface IMonthSelect {
+    value?: any;
+    onChange?: any;
+    readOnly?: boolean;
+}
+/**
+ * Pc端操作头
+ */
+export declare const MonthSelect: (props: IMonthSelect) => JSX.Element;

package/dist/web/components/wd-calendar/MonthSelect.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useState, useMemo } from 'react';
+import { convertValueToDateItem, getStartMoment, } from '../../utils/hooks/useFormLegacy';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+import { ConfigProvider, Select } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import { blockName } from './weeks';
+/**
+ * Pc端操作头
+ */
+export const MonthSelect = (props) => {
+    const { readOnly, onChange } = props;
+    const isH5 = usePlatform() === 'h5';
+    const valueStamp = useMemo(() => { var _a; return (_a = getStartMoment('month', props.value)) === null || _a === void 0 ? void 0 : _a.valueOf(); }, [props.value]);
+    const [value, setValue] = useSyncValue(valueStamp);
+    const { year, month } = useMemo(() => convertValueToDateItem(value), [value]);
+    const nowYear = useMemo(() => { var _a; return (_a = getStartMoment()) === null || _a === void 0 ? void 0 : _a.year(); }, []); // 当前年
+    const [min, setMin] = useState(nowYear - 100);
+    const [max, setMax] = useState(nowYear + 100);
+    const yearOptions = useMemo(() => {
+        const earlier = { text: '更早', value: '-' };
+        const later = { text: '更晚', value: '+' };
+        const opts = Array.from({ length: max - min }).map((d, i) => ({
+            text: `${i + min} 年`,
+            value: `${i + min}`,
+        }));
+        return [].concat(earlier, opts, later);
+    }, [min, max]);
+    const monthOptions = useMemo(() => Array.from({ length: 12 }).map((d, i) => ({
+        text: `${i + 1} 月`,
+        value: `${i}`,
+    })), []);
+    const handleYear = (y) => {
+        if (y === '-') {
+            setMin((d) => d - 100);
+        }
+        else if (y === '+') {
+            setMax((d) => d + 100);
+        }
+        else {
+            handleChange(y);
+        }
+    };
+    const handleChange = (y, m) => {
+        const _year = Number(y !== null && y !== void 0 ? y : year);
+        const _month = Number(m !== null && m !== void 0 ? m : month);
+        const v = new Date(_year, _month).valueOf();
+        const value = getStartMoment('month', v).valueOf();
+        setValue(value);
+        onChange(value);
+    };
+    // h5
+    if (isH5) {
+        return (_jsxs("div", { className: blockName + '__control_h5', children: [!readOnly && (_jsx("div", { className: `${blockName}_prevMonth wedatea2td-icon-arrowleft--line`, onClick: () => handleChange(null, month - 1) })), _jsxs("div", { className: `${blockName}__current-date`, children: [year, "\u5E74", month + 1, "\u6708"] }), !readOnly && (_jsx("div", { className: `${blockName}_nextMonth wedatea2td-icon-arrowright--line`, onClick: () => handleChange(null, month + 1) }))] }));
+    }
+    // pc
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { className: blockName + '__control_pc', children: readOnly ? (_jsxs("div", { className: `${blockName}__current-date`, children: [year, " \u5E74 ", month + 1, " \u6708"] })) : (_jsxs("div", { className: blockName + '__control-section', children: [_jsx("div", { className: blockName + '__control-section-cell', children: _jsx(Select, { appearance: "button", size: "auto", value: `${year}`, options: yearOptions, onChange: handleYear }) }), _jsx("div", { className: blockName + '__control-section-cell', children: _jsx(Select, { appearance: "button", size: "auto", value: `${month}`, options: monthOptions, onChange: (m) => handleChange(null, m) }) })] })) }) }));
+};

package/dist/web/components/wd-calendar/index.d.ts

@@ -0,0 +1,3 @@
+import { WdClendar } from './wd-calendar';
+export { WdClendar, type WdClendarProps } from './wd-calendar';
+export default WdClendar;

package/dist/web/components/wd-calendar/index.js

@@ -0,0 +1,3 @@
+import { WdClendar } from './wd-calendar';
+export { WdClendar } from './wd-calendar';
+export default WdClendar;

package/dist/web/components/wd-calendar/style.d.ts

@@ -0,0 +1 @@
+import '../calendar/index.css';

package/dist/web/components/wd-calendar/style.js

@@ -0,0 +1 @@
+import '../calendar/index.css';

package/dist/web/components/wd-calendar/wd-calendar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-calendar';
+import './style';
+/**
+ * 日历标准化
+ */
+export declare const WdClendar: React.ForwardRefExoticComponent<WdClendarProps & React.RefAttributes<any>>;
+export interface WdClendarProps extends CommonPropsType, DataType {
+}