@4399ywkf/cli 0.0.22 → 1.0.2

package/dist/templates/BaseLayout.tsx

@@ -0,0 +1,15 @@
+import useGlobalStore from '@store/global';
+import { Layout as AntdLayout } from 'antd';
+import React, { useEffect } from 'react';
+import { Outlet } from 'react-router';
+
+const BaseLayout = () => {
+  const layout = useGlobalStore(state => state.layout);
+
+  return (
+    <AntdLayout className="flex !flex-col h-full ">
+      <Outlet />
+    </AntdLayout>
+  );
+};
+export default BaseLayout;

package/dist/templates/ColorScales/ScaleRow.tsx

@@ -0,0 +1,74 @@
+import { Space, message } from "antd";
+import React, { memo } from "react";
+import { Flexbox } from "react-layout-kit";
+
+import { copyToClipboard } from "@/utils/copyToClipboard";
+
+import { alphaBg, useStyles } from "./style";
+
+export interface IScaleRow {
+  name: string;
+  scale: string[];
+  title: "light" | "lightA" | "dark" | "darkA";
+}
+
+const ScaleRow = memo<IScaleRow>(({ name, title, scale }) => {
+  const { styles } = useStyles();
+
+  let style = {};
+  let isAlpha = false;
+
+  switch (title) {
+    case "lightA": {
+      style = { background: alphaBg.light, backgroundColor: "#fff" };
+      isAlpha = true;
+      break;
+    }
+    case "darkA": {
+      style = { background: alphaBg.dark, backgroundColor: "#000" };
+      isAlpha = true;
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+
+  return (
+    <Space size={2}>
+      <div className={styles.scaleRowTitle} key={title}>
+        <div className={styles.text}>{title}</div>
+      </div>
+      {scale.map((color, index) => {
+        if (index === 0 || index === 12) return false;
+
+        return (
+          <div
+            className={styles.scaleBox}
+            key={index}
+            onClick={async () => {
+              const content = `token.${name}${index}${
+                isAlpha ? "A" : ""
+              } /* ${color} */`;
+
+              await copyToClipboard(content);
+              message.success(content);
+            }}
+            style={style}
+            title={color}
+          >
+            <Flexbox
+              align={"center"}
+              className={styles.scaleItem}
+              horizontal
+              justify={"center"}
+              style={{ backgroundColor: color }}
+            />
+          </div>
+        );
+      })}
+    </Space>
+  );
+});
+
+export default ScaleRow;

package/dist/templates/ColorScales/index.md

@@ -0,0 +1,168 @@
+---
+nav: Colors
+title: ColorScales
+description: The ColorScales component is a memoized component used to display a color scale. It receives props containing the name of the scale, the color scale items, and a number representing the index of the mid-highlight. The component renders a set of ScaleRow components, each representing a different part of the color scale.
+apiHeader:
+  atomId: 'colors, neutrals'
+  pkg: '@lobehub/ui/color'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/color/ColorScales/index.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/color/colors/index.ts'
+---
+
+## Primary
+
+```tsx
+import { ColorScales, primary } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="primary" scale={primary} midHighLight={9} />;
+```
+
+## Colors
+
+### Red
+
+```tsx
+import { ColorScales, red } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="red" scale={red} midHighLight={9} />;
+```
+
+### Volcano
+
+```tsx
+import { ColorScales, volcano } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="volcano" scale={volcano} midHighLight={9} />;
+```
+
+### Orange
+
+```tsx
+import { ColorScales, orange } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="orange" scale={orange} midHighLight={9} />;
+```
+
+### Gold
+
+```tsx
+import { ColorScales, gold } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="gold" scale={gold} midHighLight={9} />;
+```
+
+### Yellow
+
+```tsx
+import { ColorScales, yellow } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="yellow" scale={yellow} midHighLight={9} />;
+```
+
+### Lime
+
+```tsx
+import { ColorScales, lime } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="lime" scale={lime} midHighLight={9} />;
+```
+
+### Green
+
+```tsx
+import { ColorScales, green } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="green" scale={green} midHighLight={9} />;
+```
+
+### Cyan
+
+```tsx
+import { ColorScales, cyan } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="cyan" scale={cyan} midHighLight={9} />;
+```
+
+### Blue
+
+```tsx
+import { ColorScales, blue } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="blue" scale={blue} midHighLight={9} />;
+```
+
+### Geekblue
+
+```tsx
+import { ColorScales, geekblue } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="geekblue" scale={geekblue} midHighLight={9} />;
+```
+
+### Purple
+
+```tsx
+import { ColorScales, purple } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="purple" scale={purple} midHighLight={9} />;
+```
+
+### Magenta
+
+```tsx
+import { ColorScales, magenta } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="magenta" scale={magenta} midHighLight={9} />;
+```
+
+## Neutral
+
+### Gray
+
+```tsx
+import { ColorScales, gray } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="gray" scale={gray} midHighLight={9} />;
+```
+
+## Extra Neutral
+
+### Mauve
+
+```tsx
+import { ColorScales, mauve } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="mauve" scale={mauve} midHighLight={9} />;
+```
+
+### Olive
+
+```tsx
+import { ColorScales, olive } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="olive" scale={olive} midHighLight={9} />;
+```
+
+### Sage
+
+```tsx
+import { ColorScales, sage } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="sage" scale={sage} midHighLight={9} />;
+```
+
+### Sand
+
+```tsx
+import { ColorScales, sand } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="sand" scale={sand} midHighLight={9} />;
+```
+
+### Slate
+
+```tsx
+import { ColorScales, slate } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="slate" scale={slate} midHighLight={9} />;
+```

package/dist/templates/ColorScales/index.tsx

@@ -0,0 +1,70 @@
+import { Space } from 'antd';
+import React, { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ColorScaleItem } from '../types';
+import ScaleRow from './ScaleRow';
+import { useStyles } from './style';
+
+export interface ColorScalesProps {
+  /**
+   * @description Index of the mid highlight color in the scale
+   */
+  midHighLight: number;
+  /**
+   * @description Name of the color scale
+   */
+  name: string;
+  /**
+   * @description Color scale item object
+   */
+  scale: ColorScaleItem;
+}
+
+const ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox align={'center'} flex={1} horizontal justify={'center'}>
+      <div style={{ padding: '8px 16px 32px 0' }}>
+        <Space direction={'vertical'} size={2}>
+          <Space key="scale-title" size={2}>
+            <Flexbox align={'center'} className={styles.scaleRowTitle} horizontal key="scale-num" />
+            {Array.from({ length: scale.light.length })
+              .fill('')
+              .map((_, index) => {
+                if (index === 0 || index === 12) return false;
+
+                const isMidHighlight = midHighLight === index;
+
+                return (
+                  <div className={styles.scaleBox} key={`num${index}`}>
+                    <div className={styles.scaleBox}>
+                      <Flexbox
+                        align={'center'}
+                        className={styles.scaleItem}
+                        horizontal
+                        justify={'center'}
+                        style={{
+                          fontWeight: isMidHighlight ? 700 : 400,
+                          opacity: 0.5,
+                        }}
+                      >
+                        {index}
+                      </Flexbox>
+                    </div>
+                  </div>
+                );
+              })}
+          </Space>
+          <ScaleRow key="light" name={name} scale={scale.light} title="light" />
+          <ScaleRow key="lightA" name={name} scale={scale.lightA} title="lightA" />
+          <ScaleRow key="dark" name={name} scale={scale.dark} title="dark" />
+          <ScaleRow key="darkA" name={name} scale={scale.darkA} title="darkA" />
+        </Space>
+      </div>
+    </Flexbox>
+  );
+});
+
+export default ColorScales;

package/dist/templates/ColorScales/style.ts

@@ -0,0 +1,42 @@
+import { createStyles } from 'antd-style';
+
+export const alphaBg = {
+  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px',
+  light:
+    'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',
+};
+
+export const useStyles = createStyles(({ css, token }) => ({
+  scaleBox: css`
+    cursor: pointer;
+
+    position: relative;
+
+    width: 48px;
+    height: 32px;
+
+    background-position:
+      0 0,
+      0 8px,
+      8px -8px,
+      -8px 0;
+    background-size: 16px 16px;
+
+    transition: scale 400ms ${token.motionEaseOut};
+
+    &:active {
+      scale: 0.8;
+    }
+  `,
+  scaleItem: css`
+    width: 100%;
+    height: 100%;
+  `,
+  scaleRowTitle: css`
+    width: 64px;
+    height: 32px;
+  `,
+  text: css`
+    opacity: 0.5;
+  `,
+}));

package/dist/templates/ConfigProvider/index.md

@@ -0,0 +1,63 @@
+---
+nav: Components
+group: Theme
+title: ConfigProvider
+---
+
+ConfigProvider is a context provider component that allows you to configure global settings for other components in the library, such as CDN settings for external resources.
+
+## Default
+
+The `proxy` provides two CDN resolution addresses, `aliyun` and `unpkg`, with `aliyun` as the default. This can be configured through the `cdn` attribute of `ConfigProvider`.
+
+<code src="./demos/index.tsx" nopadding></code>
+
+## Custom CDN
+
+At the same time, it provides custom CDN configuration, set `proxy` to `custom` and configure through the `customCdnFn` attribute.
+
+```ts
+import { ConfigProvider, Logo } from '@lobehub/ui';
+
+export default () => {
+  return (
+    <ConfigProvider config={{
+        proxy: 'custom',
+        customCdnFn: (e: {pkg:string, version:string, path:string}) => `https://yourcdn/${pkg}/${version}/${path}`
+    }}>
+      <Logo />
+    </ConfigProvider>
+  );
+};
+```
+
+## APIs
+
+### ConfigProvider
+
+| Property | Description          | Type        | Default |
+| -------- | -------------------- | ----------- | ------- |
+| config   | Configuration object | `Config`    | -       |
+| children | Child components     | `ReactNode` | -       |
+
+### Config
+
+| Property       | Description                                                    | Type                                            | Default |
+| -------------- | -------------------------------------------------------------- | ----------------------------------------------- | ------- |
+| proxy          | CDN proxy to use for external resources                        | `'jsdelivr' \| 'unpkg' \| 'aliyun' \| 'custom'` | -       |
+| customCdnFn    | Custom function for generating CDN URLs when proxy is 'custom' | `CdnFn`                                         | -       |
+| aAs            | Custom component to use for rendering anchor tags              | `ElementType`                                   | -       |
+| imgAs          | Custom component to use for rendering image tags               | `ElementType`                                   | -       |
+| imgUnoptimized | Whether to disable image optimization                          | `boolean`                                       | -       |
+
+### CdnFn
+
+```ts
+type CdnFn = ({ pkg, version, path }: CdnApi) => string;
+
+interface CdnApi {
+  pkg: string;
+  version: string;
+  path: string;
+}
+```

package/dist/templates/ConfigProvider/index.tsx

@@ -0,0 +1,42 @@
+import React, {
+  type ElementType,
+  type ReactNode,
+  createContext,
+  memo,
+  use,
+} from 'react';
+
+import { type CDN, type CdnApi, genCdnUrl } from '@/utils/genCdnUrl';
+
+export interface Config {
+  aAs?: ElementType;
+  customCdnFn?: CdnFn;
+  imgAs?: ElementType;
+  imgUnoptimized?: boolean;
+  proxy?: CDN | 'custom';
+}
+
+export const ConfigContext = createContext<Config | null>(null);
+
+const ConfigProvider = memo<{ children: ReactNode; config: Config }>(
+  ({ children, config }) => {
+    return <ConfigContext value={config}>{children}</ConfigContext>;
+  },
+);
+
+// useCdnFn
+export type CdnFn = ({ pkg, version, path }: CdnApi) => string;
+
+const cdnFallback: CdnFn = ({ pkg, version, path }) =>
+  genCdnUrl({ path, pkg, proxy: 'aliyun', version });
+
+export const useCdnFn = (): CdnFn => {
+  const config = use(ConfigContext);
+  if (!config) return cdnFallback;
+  if (config?.proxy !== 'custom')
+    return ({ pkg, version, path }) =>
+      genCdnUrl({ path, pkg, proxy: config.proxy as any, version });
+  return config?.customCdnFn || cdnFallback;
+};
+
+export default ConfigProvider;

package/dist/templates/ContentFormWrapper.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import styles from './ContentWrapper.module.less';
+
+export const ContentFormWrapper = ({ children }: { children: ReactNode }) => (
+  <div
+    className={`${styles['content-wrapper']} ${styles['content-wrapper-form-container']}`}
+  >
+    {children}
+  </div>
+);

package/dist/templates/ContentWrapper.module.less

@@ -0,0 +1,137 @@
+.content_wrapper {
+  height: calc(100% - 49px);
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+}
+
+.content-wrapper {
+  position: relative;
+}
+
+.content-wrapper-form-container {
+  background: #fff;
+  height: calc(100vh - 112px);
+  overflow: auto;
+  position: relative;
+  width: 100%;
+
+  .content-wrapper-form {
+    margin-top: 20px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .form-footer-layout {
+    position: relative;
+  }
+}
+
+.content-wrapper-list {
+  background-color: var(--contexify-menu-bgColor);
+  border-radius: var(--border-radius-medium);
+  margin: 20px;
+  min-height: calc(100% - 40px);
+  padding: 0 12px;
+
+  .content-wrapper-content {
+    margin-top: 20px;
+  }
+
+  .content-wrapper-title {
+    align-items: center;
+    color: #020814;
+    display: flex;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 26px;
+  }
+}
+
+.content-wrapper-headerBox {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+
+  &>span:last-child {
+    margin-right: 0;
+  }
+}
+
+:global {
+  .richTableTitle {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+.content-wrapper-create_header {
+  background: #fff;
+  height: var(--container--form--layout--header-height);
+  width: 100%;
+
+  .content-wrapper-header-table {
+    max-width: 100% !important;
+  }
+
+  .content-wrapper-header {
+    border-bottom: 1px solid #eaedf1;
+    display: flex;
+    align-items: center;
+    height: var(--container--form--layout--header-height);
+    line-height: var(--container--form--layout--header-height);
+    margin: 0 auto;
+    max-width: 1200px;
+
+    .content-wrapper-back_wrapper {
+      align-items: center;
+      display: flex;
+      width: auto;
+
+      .content-wrapper-icon_wrapper {
+        align-items: center;
+        border-radius: 4px;
+        cursor: pointer;
+        display: flex;
+        height: 20px;
+        justify-content: center;
+        line-height: 20px;
+        transition: background 0.3s;
+        width: 20px;
+      }
+
+      .content-wrapper-title {
+        color: #020814;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+        margin-left: 4px;
+      }
+    }
+  }
+}
+
+.form-wrapper-footer_wrapper {
+  background: #fff;
+  border-top: 1px solid #e5e6eb;
+  bottom: 0;
+  height: 64px;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+
+  .form-wrapper-footer {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: flex-start;
+    margin: 0 auto;
+    max-width: 100vw;
+    padding: 0 20px;
+    width: 100%;
+    gap: 8px;
+  }
+}

package/dist/templates/ContentWrapper.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import styles from './ContentWrapper.module.less';
+
+export const ContentWrapper = ({ children }: { children: ReactNode }) => (
+  <div className={styles.content_wrapper}>
+    <div
+      className={`${styles['content-wrapper']} ${styles['content-wrapper-list']}`}
+    >
+      {children}
+    </div>
+  </div>
+);