feat: 更新组件代码

busy-mango · Sep 30, 2024 · b5db9a5 · b5db9a5
1 parent 8a49657
commit b5db9a5
Show file tree

Hide file tree

Showing 34 changed files with 201 additions and 144 deletions.
diff --git a/assets/index.html b/assets/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-Hans-CN">
+<html lang="zh-Hans-CN" class="<%= theme %>">
 
 <head>
  <meta charset="UTF-8">

diff --git a/assets/themes/dark.css b/assets/themes/dark.css
@@ -1,4 +1,4 @@
-#root.dark {
+:root.dark {
  --orange-color-050: 46 29 21;
  --orange-color-100: 72 40 23;
  --orange-color-200: 108 61 32;
@@ -170,11 +170,11 @@
  --gray-color-1000: 255 255 255;
 
  /* 主题色 - 默认 */
- --primary-color: rgb(var(--blue-color-600) / 1);
+ --primary-color: rgb(var(--blue-color-500) / 1);
  /* 主题色 - 悬浮态 */
- --primary-color-hover: rgb(var(--blue-color-500) / 1);
+ --primary-color-hover: rgb(var(--blue-color-600) / 0.9);
  /* 主题色 - 激活态 */
- --primary-color-active: rgb(var(--blue-color-700) / 1);
+ --primary-color-active: rgb(var(--blue-color-600) / 1);
  /* 主题色 - 禁用态 */
  --primary-color-disabled: rgb(var(--blue-color-200) / 0.4);
 
@@ -217,9 +217,9 @@
  /* 危险色 - 默认 */
  --danger-color: rgb(var(--red-color-500) / 1);
  /* 危险色 - 悬浮态 */
- --danger-color-hover: rgb(var(--red-color-600) / 1);
+ --danger-color-hover: rgb(var(--red-color-600) / 0.9);
  /* 危险色 - 激活态 */
- --danger-color-active: rgb(var(--red-color-400) / 1);
+ --danger-color-active: rgb(var(--red-color-600) / 1);
  /* 危险色 - 禁用态 */
  --danger-color-disabled: rgb(var(--red-color-500) / 0.5);
 
@@ -339,7 +339,7 @@
  --shadow-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 
-#root.dark {
+:root.dark {
  --z-index-fixed: 990;
  --z-index-dropdown: 998;
  --z-index-tip: 999;
@@ -354,7 +354,7 @@
 
 /* PC */
 @media screen and (min-width: 1360px) {
- #root {
+ :root {
  --gap-00: 0px;
  --gap-01: 2px;
  --gap-02: 4px;
@@ -397,7 +397,7 @@
 
 /* iPad */
 @media screen and (min-width: 430px) and (max-width: 1360px) {
- #root {
+ :root {
  --gap-00: 0px;
  --gap-01: 2px;
  --gap-02: 4px;
@@ -438,7 +438,7 @@
 
 /* iPhone */
 @media screen and (max-width: 430px) {
- #root {
+ :root {
  --gap-00: 0vw;
  --gap-01: calc(2vw / 3.75);
  --gap-02: calc(4vw / 3.75);

diff --git a/assets/themes/light.css b/assets/themes/light.css
@@ -1,4 +1,4 @@
-#root.light {
+:root.light {
  --orange-color-050: 255 247 237;
  --orange-color-100: 255 242 224;
  --orange-color-200: 255 226 189;
@@ -170,11 +170,11 @@
  --gray-color-1000: 0 0 0;
 
  /* 主题色 - 默认 */
- --primary-color: rgb(var(--blue-color-600) / 1);
+ --primary-color: rgb(var(--blue-color-500) / 1);
  /* 主题色 - 悬浮态 */
- --primary-color-hover: rgb(var(--blue-color-500) / 1);
+ --primary-color-hover: rgb(var(--blue-color-600) / 1);
  /* 主题色 - 激活态 */
- --primary-color-active: rgb(var(--blue-color-700) / 1);
+ --primary-color-active: rgb(var(--blue-color-600) / 1);
  /* 主题色 - 禁用态 */
  --primary-color-disabled: rgb(var(--blue-color-200) / 1);
 
@@ -224,11 +224,11 @@
  --success-color-disabled: rgb(var(--green-color-200) / 1);
 
  /* 危险色 - 默认 */
- --danger-color: rgb(var(--red-color-500) / 1);
+ --danger-color: rgb(var(--red-color-600) / 1);
  /* 危险色 - 悬浮态 */
- --danger-color-hover: rgb(var(--red-color-400) / 1);
+ --danger-color-hover: rgb(var(--red-color-500) / 0.9);
  /* 危险色 - 激活态 */
- --danger-color-active: rgb(var(--red-color-600) / 1);
+ --danger-color-active: rgb(var(--red-color-500) / 1);
  /* 危险色 - 禁用态 */
  --danger-color-disabled: rgb(var(--red-color-200) / 1);
 
@@ -301,7 +301,7 @@
  /* 字体颜色 - 警告 */
  --font-color-warn: rgb(var(--orange-color-600) / 1);
  /* 字体颜色 - 危险 */
- --font-color-danger: rgb(var(--red-color-700) / 1);
+ --font-color-danger: rgb(var(--red-color-600) / 1);
  /* 字体颜色 - 成功 */
  --font-color-success: rgb(var(--green-color-700) / 1);
  /* 字体颜色 - 禁用 */
@@ -336,7 +336,7 @@
  --shadow-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 
-#root.light {
+:root.light {
  --z-index-fixed: 990;
  --z-index-dropdown: 998;
  --z-index-tip: 999;
@@ -351,7 +351,7 @@
 
 /* PC */
 @media screen and (min-width: 1360px) {
- #root {
+ :root {
  --gap-00: 0px;
  --gap-01: 2px;
  --gap-02: 4px;
@@ -392,7 +392,7 @@
 
 /* iPad */
 @media screen and (min-width: 430px) and (max-width: 1360px) {
- #root {
+ :root {
  --gap-00: 0px;
  --gap-01: 2px;
  --gap-02: 4px;
@@ -435,7 +435,7 @@
 
 /* iPhone */
 @media screen and (max-width: 430px) {
- #root {
+ :root {
  --gap-00: 0vw;
  --gap-01: calc(2vw / 3.75);
  --gap-02: calc(4vw / 3.75);

diff --git a/docs/themes/index.md → docs/components/data-entry/input.mdx b/docs/themes/index.md → docs/components/data-entry/input.mdx
diff --git a/docs/components/data-entry/picker.mdx b/docs/components/data-entry/picker.mdx
diff --git a/docs/components/data-entry/textarea.mdx b/docs/components/data-entry/textarea.mdx
diff --git a/docs/components/data-view/high-lighter.mdx b/docs/components/data-view/high-lighter.mdx
diff --git a/docs/components/data-view/marker.mdx b/docs/components/data-view/marker.mdx
diff --git a/docs/components/feedback/backdrop.mdx b/docs/components/feedback/backdrop.mdx
@@ -0,0 +1,35 @@
+# Backdrop 遮罩层
+
+将用户的焦点缩小到屏幕上的特定元素。
+
+使用 `import { IBackdrop } from "@/components";`
+
+源码 `/src/components/widgets/backdrop`
+
+## 何时使用
+
+* 使内容变暗或阻止浮层元素后面的指针事件。
+
+* 背景发出应用程序内状态更改的信号，可用于创建加载程序、对话框等。
+
+## 代码演示
+
+### 基本用法
+
+下面的演示显示了一个基本背景，并在背景中呈现UI元素来指示加载状态。单击开关后，您可以单击页面上的任意位置将其关闭。
+
+<code src='@examples/backdrop/basic' />
+
+### 锁定主体滚动
+
+渲染覆盖层时是否阻止`<body/>`滚动。适用于`iOS`。
+
+> 如果您需要更高级的解决方案，`react-remove-scroll`是一个不错的选择。
+
+{/* <code src='@examples/overlay/advanced' /> */}
+
+## 常见问题
+
+### 兄弟节点覆盖问题
+
+在可滚动上下文中使用锚定位和覆盖层时，最好使覆盖层成为浮动元素的同级元素，而不是父容器。这将确保浮动元素不会被覆盖层包含，从而允许其定位在其边界之外，从而防止滚动问题。它还允许叠加层独立地设置动画。
diff --git a/docs/components/feedback/dialog.mdx b/docs/components/feedback/dialog.mdx
@@ -0,0 +1 @@
+# Dialog 对话框
diff --git a/docs/components/feedback/empty.mdx b/docs/components/feedback/empty.mdx
diff --git a/docs/components/feedback/snackbar.mdx b/docs/components/feedback/snackbar.mdx
@@ -0,0 +1 @@
+# Snackbar 通知条
diff --git a/docs/components/typesetting/accordion.mdx b/docs/components/typesetting/accordion.mdx
diff --git a/docs/components/typesetting/form.mdx b/docs/components/typesetting/form.mdx
diff --git a/docs/components/typesetting/overlay.mdx b/docs/components/typesetting/overlay.mdx
diff --git a/docs/effects.tsx b/docs/effects.tsx
@@ -1,19 +1,17 @@
 import { useContext, useEffect } from 'react';
 import { ThemeContext } from 'rspress/runtime';
 
-import { container } from '@/init';
+import { iThemeRoot } from '@/init';
 
 import 'assets/themes/dark.css';
 import 'assets/themes/light.css';
 
-const { classList } = container;
-
 const Effects: React.FC = () => {
  const { theme } = useContext(ThemeContext);
 
  useEffect(() => {
- classList.add(theme);
- return () => classList.remove(theme);
+ iThemeRoot.classList.add(theme);
+ return () => iThemeRoot.classList.remove(theme);
  }, [theme]);
 
  return null;

diff --git a/docs/themes/_meta.json b/docs/themes/_meta.json
@@ -2,7 +2,7 @@
  {
  "type": "dir",
  "name": "design-token",
- "label": "Design Token",
+ "label": "设计令牌",
  "collapsible": true,
  "collapsed": false
  }

diff --git a/docs/themes/index.mdx b/docs/themes/index.mdx
@@ -0,0 +1,7 @@
+# Theming 主题
+
+使用 CSS 变量进行主题化。
+
+## 约定
+
+{/* CSS 色阶变量必须在没有颜色空间函数的情况下定义 */}
diff --git a/examples/backdrop/basic.tsx b/examples/backdrop/basic.tsx
@@ -0,0 +1,27 @@
+import { IFlex, ISpinner, ISwitch } from '@/components';
+import { IBackdrop } from '@/components/widgets/backdrop';
+import { useToggle } from '@/hooks';
+import { iPropagation } from '@/utils';
+
+const App: React.FC = () => {
+ const [open, { toggle, off }] = useToggle();
+
+ return (
+ <IFlex>
+ <ISwitch
+ onChange={({ target }) => toggle((target as HTMLInputElement).checked)}
+ />
+ <IBackdrop
+ open={open}
+ onClick={(event) => {
+ iPropagation(event);
+ off();
+ }}
+ >
+ <ISpinner />
+ </IBackdrop>
+ </IFlex>
+ );
+};
+
+export default App;
diff --git a/examples/overlay/advanced.tsx b/examples/overlay/advanced.tsx
diff --git a/examples/overlay/basic.tsx b/examples/overlay/basic.tsx
diff --git a/src/components/widgets/backdrop/index.scss b/src/components/widgets/backdrop/index.scss
@@ -0,0 +1,6 @@
+.wrap {
+ display: grid;
+ place-items: center;
+ z-index: var(--z-index-float);
+ background-color: var(--bg-color-mask);
+}
diff --git a/src/components/widgets/backdrop/index.tsx b/src/components/widgets/backdrop/index.tsx
@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { AnimatePresence } from 'framer-motion';
+
+import { FloatingPortal } from '@floating-ui/react';
+
+import { container } from '@/init';
+import type { ReactCFC } from '@/models';
+import { iFindElement } from '@/utils';
+
+import { IOverlay } from '../overlay';
+import type { IBackdropProps } from './models';
+
+import * as styles from './index.scss';
+
+export const IBackdrop: ReactCFC<IBackdropProps> = ({
+ open,
+ children,
+ className,
+ root = container,
+ ...others
+}) => (
+ <FloatingPortal root={iFindElement(root)}>
+ <AnimatePresence>
+ {open && (
+ <IOverlay className={classNames(styles.wrap, className)} {...others}>
+ {children}
+ </IOverlay>
+ )}
+ </AnimatePresence>
+ </FloatingPortal>
+);
diff --git a/src/components/widgets/backdrop/models/index.tsx b/src/components/widgets/backdrop/models/index.tsx
@@ -0,0 +1,11 @@
+import type { ReactTargetFunc } from '@/models';
+
+import type { IOverlayProps } from '../../overlay';
+
+export interface IBackdropProps extends IOverlayProps {
+ open?: boolean;
+ /**
+ * 浮层默认渲染到 root 上，也可以使用此方法指定根节点。
+ */
+ root?: ReactTargetFunc;
+}