feat: 新增directive组件

assets/themes/dark.css

@@ -269,6 +269,8 @@
  /* 背景色 - 滑块 */
  --bg-color-thumb: rgb(var(--gray-color-900) / 1);
 
+ /* 背景色 - 强调 */
+ --bg-color-info: rgb(var(--blue-color-050) / 1);
  /* 背景色 - 危险 */
  --bg-color-danger: rgb(var(--red-color-050) / 1);
  /* 背景色 - 警告 */
@@ -296,19 +298,29 @@
  --font-color-10: rgba(255, 255, 255 / 1);
  --font-color-b8: rgba(255, 255, 255 / 1);
 
+ /* 字体颜色 - 强调 */
+ --font-color-info: rgb(var(--blue-color-900) / 1);
  /* 字体颜色 - 警告 */
- --font-color-warn: rgb(var(--orange-color-500) / 1);
+ --font-color-warn: rgb(var(--orange-color-900) / 1);
  /* 字体颜色 - 危险 */
- --font-color-danger: rgb(var(--red-color-700) / 1);
+ --font-color-danger: rgb(var(--red-color-700) / 0.9);
  /* 字体颜色 - 成功 */
- --font-color-success: rgb(var(--green-color-700) / 1);
+ --font-color-success: rgb(var(--green-color-900) / 1);
  /* 字体颜色 - 禁用 */
  --font-color-disabled: rgb(var(--gray-color-600) / 0.9);
  /* 字体颜色 - 高亮 */
  --font-color-highlight: rgb(var(--blue-color-600) / 1);
 
  /* 图标颜色-默认 */
  --icon-color: rgb(var(--gray-color-700) / 1);
+ /* 图标颜色 - 强调 */
+ --icon-color-info: rgb(var(--blue-color-500) / 1);
+ /* 图标颜色 - 警告 */
+ --icon-color-warn: rgb(var(--orange-color-500) / 1);
+ /* 图标颜色 - 危险 */
+ --icon-color-danger: rgb(var(--red-color-700) / 1);
+ /* 图标颜色 - 成功 */
+ --icon-color-success: rgb(var(--green-color-700) / 1);
 
  /* 波纹动画颜色 */
  --wave-color-0: rgb(var(--heliotrope-color-600) / 0.1);

assets/themes/light.css

@@ -269,6 +269,8 @@
  /* 背景色 - 滑块 */
  --bg-color-thumb: rgb(var(--gray-color-000) / 1);
 
+ /* 背景色 - 强调 */
+ --bg-color-info: rgb(var(--blue-color-050) / 1);
  /* 背景色 - 危险 */
  --bg-color-danger: rgb(var(--red-color-050) / 1);
  /* 背景色 - 警告 */
@@ -309,6 +311,14 @@
 
  /* 图标颜色-默认 */
  --icon-color: rgb(var(--gray-color-700) / 1);
+ /* 字体颜色 - 高亮 */
+ --icon-color-info: rgb(var(--blue-color-600) / 1);
+ /* 字体颜色 - 警告 */
+ --icon-color-warn: rgb(var(--orange-color-600) / 1);
+ /* 字体颜色 - 危险 */
+ --icon-color-danger: rgb(var(--red-color-700) / 1);
+ /* 字体颜色 - 成功 */
+ --icon-color-success: rgb(var(--green-color-700) / 1);
 
  /* 波纹动画颜色 */
  --wave-color-1: rgb(82 11 239 / 0.05);

config/compiler/plugins.ts

@@ -9,7 +9,11 @@ import { join, resolve } from 'path';
 import { assign, compact } from '@busymango/utils';
 import { parse } from '@dotenvx/dotenvx';
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
-import type { RspackPluginFunction, RspackPluginInstance } from '@rspack/core';
+import type {
+ RspackPluginFunction,
+ RspackPluginInstance,
+ WebpackPluginInstance,
+} from '@rspack/core';
 import { rspack } from '@rspack/core';
 import ReactRefreshRspackPlugin from '@rspack/plugin-react-refresh';
 
@@ -32,7 +36,7 @@ const doctor = new RsdoctorRspackPlugin({
 
 export const iPlugins = (
  env: 'dev' | 'test' | 'prod' = 'dev'
-): RspackPlugin[] => {
+): (RspackPlugin | WebpackPluginInstance)[] => {
  const dotenv = assign<{
  THEME: string;
  ENV_NAME: string;
@@ -80,7 +84,7 @@ export const iPlugins = (
  build: env !== 'dev',
  mode: 'write-references',
  },
- }) as unknown as null,
+ }),
  env === 'test' && doctor,
  env === 'dev' &&
  new CSSVarTSEmitPlugin({

docs/components/data-view/directive.mdx → docs/components/feedback/directive.mdx

@@ -10,4 +10,8 @@
 
 ### 基本用法
 
-<code src='@examples/directive/basic' />
+<code src='@examples/directive/basic' />
+
+### 基本用法
+
+<code src='@examples/directive/advanced' />

examples/directive/advanced.tsx

@@ -0,0 +1,60 @@
+import { AnimatePresence } from 'framer-motion';
+import { produce } from 'immer';
+import { create } from 'zustand';
+
+import { isNonEmptyString } from '@busymango/is-esm';
+
+import {
+ IControlWrap,
+ IDirective,
+ IFlex,
+ ISignLine,
+ ITextArea,
+} from '@/components';
+
+type DirectiveStore = {
+ directive?: string;
+ mutation(recipe: (state: DirectiveStore) => void): void;
+};
+
+const useDirectiveStore = create<DirectiveStore>((set) => ({
+ mutation: (recipe) => {
+ set(produce(recipe));
+ },
+}));
+
+const App: React.FC = () => {
+ const { directive, mutation } = useDirectiveStore();
+
+ return (
+ <IFlex vertical gap={16}>
+ <IControlWrap
+ suffix={<ISignLine type="cross" />}
+ variant="bordered"
+ onSuffixClick={() => {
+ mutation((state) => {
+ state.directive = '';
+ });
+ }}
+ >
+ <ITextArea
+ value={directive}
+ onChange={({ target }) => {
+ mutation((state) => {
+ state.directive = target.value;
+ });
+ }}
+ />
+ </IControlWrap>
+ <AnimatePresence>
+ {isNonEmptyString(directive) && (
+ <IDirective icon={<ISignLine ring type="informer" />} title="通用">
+ {directive}
+ </IDirective>
+ )}
+ </AnimatePresence>
+ </IFlex>
+ );
+};
+
+export default App;

examples/directive/basic.tsx

@@ -1,18 +1,45 @@
-import { Fragment } from 'react/jsx-runtime';
+import { VariantControl } from '@examples/widgets';
 
-import { ISignLine } from '@/components';
-import { IDirective } from '@/components/widgets/directive';
+import { IDirective, IFlex, ISignLine } from '@/components';
 
 const App: React.FC = () => (
- <Fragment>
- <IDirective
- icon={<ISignLine ring type="informer" />}
- title="通用"
- ></IDirective>
- <IDirective icon={<ISignLine ring type="tick" />} title="成功"></IDirective>
- <IDirective title="失败"></IDirective>
- <IDirective title="警告"></IDirective>
- </Fragment>
+ <VariantControl variants={['filled', 'borderered'] as const}>
+ {({ variant }) => (
+ <IFlex vertical gap={16}>
+ <IDirective
+ icon={<ISignLine ring type="informer" />}
+ title="通用"
+ variant={variant}
+ >
+ 这是一个指示。
+ </IDirective>
+ <IDirective
+ icon={<ISignLine ring type="tick" />}
+ status="success"
+ title="成功"
+ variant={variant}
+ >
+ 这是一个成功的指示。
+ </IDirective>
+ <IDirective
+ icon={<ISignLine ring type="cross" />}
+ status="danger"
+ title="危险"
+ variant={variant}
+ >
+ 这是一个危险的指示。
+ </IDirective>
+ <IDirective
+ icon={<ISignLine trigon type="informer" />}
+ status="warn"
+ title="警告"
+ variant={variant}
+ >
+ 这是一个包含警告意的指示。
+ </IDirective>
+ </IFlex>
+ )}
+ </VariantControl>
 );
 
 export default App;

examples/widgets/variant-control/index.tsx

@@ -72,9 +72,9 @@ export function VariantControl<T extends string = never>(
  <IRadioGroup
  options={(
  [
- 'error',
+ 'danger',
  'success',
- 'warning',
+ 'warn',
  'vaildating',
  ] satisfies ControlUIStatus[]
  ).map((value) => ({ value }))}

rspress.config.ts

@@ -1,3 +1,4 @@
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import { readFileSync } from 'fs';
 import { join, resolve } from 'path';
 import { defineConfig } from 'rspress/config';
@@ -52,6 +53,16 @@ export default defineConfig({
  resourceQuery: /react/,
  options: { icon: false, typescript: true },
  });
+
+ config.plugins?.push(
+ new ForkTsCheckerWebpackPlugin({
+ typescript: {
+ build: config.mode !== 'development',
+ mode: 'write-references',
+ },
+ })
+ );
+
  return config;
  },
  },

src/components/widgets/control/control.warp.scss

@@ -72,10 +72,10 @@
  color: var(--font-color-disabled);
  }
  &:not(.disabled) {
- &.error {
+ &.danger {
  color: var(--font-color-danger);
  }
- &.warning {
+ &.warn {
  color: var(--font-color-warn);
  }
  }
@@ -85,10 +85,10 @@
  background-color: var(--natural-color-disabled);
  }
  &:not(.disabled):not(.read-pretty) {
- &.error {
+ &.danger {
  background-color: var(--bg-color-danger);
  }
- &.warning {
+ &.warn {
  background-color: var(--bg-color-warn);
  }
  &.success,
@@ -110,7 +110,7 @@
  background-color: var(--natural-color-disabled);
  }
  &:not(.disabled) {
- &.error {
+ &.danger {
  border-color: var(--danger-color);
 
  &:hover {
@@ -132,7 +132,7 @@
  border-color: var(--secondary-color-active);
  }
  }
- &.warning {
+ &.warn {
  border-color: var(--warn-color);
 
  &:hover {

src/components/widgets/control/hooks/control.state.tsx

@@ -3,7 +3,7 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { isUndefined } from '@busymango/is-esm';
 
 import { useMemoFunc } from '@/hooks';
-import { isInputElement } from '@/utils';
+import { isInputElement, isTextAreaElement } from '@/utils';
 
 export interface ControlParams {
  /** 输入法是否介入中 */
@@ -17,6 +17,13 @@ export interface ControlComponentProps<T, E, Args extends unknown[]> {
  onChange?: (value: E, ...args: Args) => void;
 }
 
+export const onTextAreaCatch = (
+ event: React.ChangeEvent<HTMLTextAreaElement>
+) => {
+ const { target } = event ?? {};
+ if (isTextAreaElement(target)) return target.value;
+};
+
 export const onInputCatch = (event: React.ChangeEvent<HTMLInputElement>) => {
  const { target } = event ?? {};
  if (isInputElement(target)) return target.value;

src/components/widgets/control/models/index.tsx

@@ -20,7 +20,7 @@ export type ControlPattern =
  | 'readPretty';
 
 /** 控件校验状态 */
-export type ControlUIStatus = 'vaildating' | 'error' | 'warning' | 'success';
+export type ControlUIStatus = 'vaildating' | 'danger' | 'warn' | 'success';
 
 export type ControlValue = ReactInputProps['value'] | null;