瀏覽代碼

feat[docs]: update api

chenlei 5 月之前
父節點
當前提交
a38640a491

+ 207 - 207
packages/docs/docs/components/FileCheckbox/index.md

@@ -1,207 +1,207 @@
-## DageFileCheckbox 选择上传文件类型
-
-### 基本用法
-
-```tsx
-import React, { useCallback, useState } from "react";
-import { DageFileCheckbox, DageFileResponseType } from "@dage/pc-components";
-// 接口初始化
-import "../../configure";
-
-export default () => {
-  const [value, setValue] = useState("");
-
-  const handleChange = useCallback((val: string) => {
-    setValue(val);
-  }, []);
-
-  const handleFileChange = useCallback((list: DageFileResponseType[]) => {
-    console.log(list);
-  }, []);
-
-  return (
-    <DageFileCheckbox
-      value={value}
-      action="https://sit-shgybwg.4dage.com/api/cms/goods/upload"
-      onChange={handleChange}
-      onFileChange={handleFileChange}
-    />
-  );
-};
-```
-
-### Form 组件必填校验用法
-
-```tsx
-import React, { useCallback, useState, useRef, useEffect } from "react";
-import { Form, FormInstance, Button, message } from "antd";
-import {
-  DageFileCheckbox,
-  DageFileResponseType,
-  DageFileCheckboxMethods,
-  DageFileAPIResponseType,
-  DageUploadProvider,
-  DageUploadConsumer,
-} from "@dage/pc-components";
-
-const FILES = [
-  {
-    creatorName: "",
-    fileName: "shgy05.4dage",
-    filePath: "https://sit-shgybwg.4dage.com/goods/model/shgy05.4dage",
-    id: 111,
-    moduleName: "goods",
-    type: "model",
-  },
-  {
-    creatorName: "",
-    fileName: "shgy05.zip",
-    filePath:
-      "https://sit-shgybwg.4dage.com/goods/model_mobile/20230829_1633142351.zip",
-    id: 112,
-    moduleName: "goods",
-    type: "model_mobile",
-  },
-];
-
-export default () => {
-  const formRef = useRef<FormInstance>(null);
-  const dageFileCheckboxRef = useRef<DageFileCheckboxMethods>(null);
-  const fileList = useRef<DageFileResponseType[]>([]);
-
-  const handleFileChange = useCallback((list: DageFileResponseType[]) => {
-    fileList.current = list;
-  }, []);
-
-  const onFinish = useCallback((val: any) => {
-    const params = {
-      ...val,
-      fileIds: fileList.current
-        .map((i) => (!!i.response ? i.response.id : i.uid))
-        .join(),
-    };
-    message.info(JSON.stringify(params));
-  }, []);
-
-  useEffect(() => {
-    formRef.current!.setFieldsValue({
-      fileTypes: "model,img",
-    });
-    dageFileCheckboxRef.current!.setFileList(
-      FILES.map((i: DageFileAPIResponseType) => ({
-        uid: i.id + "",
-        url: i.filePath,
-        thumbUrl: i.filePath,
-        name: i.fileName,
-        dType: i.type,
-        status: "done",
-      }))
-    );
-  }, []);
-
-  return (
-    <DageUploadProvider>
-      <DageUploadConsumer>
-        {({ uploading }) => (
-          <Form ref={formRef} labelCol={{ span: 3 }} onFinish={onFinish}>
-            <Form.Item
-              label="文件类型"
-              name="fileTypes"
-              rules={[
-                {
-                  validator: (...args) => {
-                    dageFileCheckboxRef.current!.validate(...args);
-                  },
-                },
-              ]}
-              validateTrigger="onSubmit"
-            >
-              <DageFileCheckbox
-                ref={dageFileCheckboxRef}
-                hasMobileModel={true}
-                action="https://sit-shgybwg.4dage.com/api/cms/goods/upload"
-                onFileChange={handleFileChange}
-              />
-            </Form.Item>
-            <Form.Item wrapperCol={{ offset: 3 }}>
-              <Button disabled={uploading} type="primary" htmlType="submit">
-                提交
-              </Button>
-            </Form.Item>
-          </Form>
-        )}
-      </DageUploadConsumer>
-    </DageUploadProvider>
-  );
-};
-```
-
-### 禁用
-
-```tsx
-import React, { useRef, useEffect } from "react";
-import { DageFileCheckbox, DageFileCheckboxMethods } from "@dage/pc-components";
-
-const FILES = [
-  {
-    fileName: "h16.4dage",
-    filePath: "https://sit-shgybwg.4dage.com/goods/model/h16.4dage",
-    id: 1,
-    moduleName: "goods",
-    type: "model",
-  },
-  {
-    fileName: "cat.jpg",
-    filePath:
-      "https://sit-shgybwg.4dage.com/goods/img/20230829_12173720283.jpg",
-    id: 2,
-    moduleName: "goods",
-    type: "img",
-  },
-  {
-    fileName: "20230731_15413117733.mp3",
-    filePath:
-      "https://sit-shgybwg.4dage.com/goods/audio/20230731_15413117733.mp3",
-    id: 3,
-    moduleName: "goods",
-    type: "audio",
-  },
-];
-
-export default () => {
-  const dageFileCheckboxRef = useRef<DageFileCheckboxMethods>(null);
-
-  useEffect(() => {
-    dageFileCheckboxRef.current!.setFileList(
-      FILES.map((i: DageFileAPIResponseType) => ({
-        uid: i.id + "",
-        url: i.filePath,
-        thumbUrl: i.filePath,
-        name: i.fileName,
-        dType: i.type,
-        status: "done",
-      }))
-    );
-  }, []);
-
-  return (
-    <DageFileCheckbox
-      disabled
-      value="model,img,audio"
-      ref={dageFileCheckboxRef}
-      action="https://sit-shgybwg.4dage.com/api/cms/goods/upload"
-    />
-  );
-};
-```
-
-## API
-
-<API hideTitle exports='["DageFileCheckbox"]' src='@dage/pc-components/index.d.ts'></API>
-
-## DageFileCheckboxMethods
-
-| Name        | Description              | Type                                                                                             | Default |
-| ----------- | ------------------------ | ------------------------------------------------------------------------------------------------ | ------- |
-| validate    | 校验已选类型文件是否为空 | `(rule: RuleObject,value: any,callback: (error?: string \| undefined) => void) => Promise<void>` | --      |
-| setFileList | 保存文件列表             | `(list: DageFileResponseType[]) => void`                                                         | --      |
+## DageFileCheckbox 选择上传文件类型
+
+### 基本用法
+
+```tsx
+import React, { useCallback, useState } from "react";
+import { DageFileCheckbox, DageFileResponseType } from "@dage/pc-components";
+// 接口初始化
+import "../../configure";
+
+export default () => {
+  const [value, setValue] = useState("");
+
+  const handleChange = useCallback((val: string) => {
+    setValue(val);
+  }, []);
+
+  const handleFileChange = useCallback((list: DageFileResponseType[]) => {
+    console.log(list);
+  }, []);
+
+  return (
+    <DageFileCheckbox
+      value={value}
+      action="https://sit-shgybwg.4dage.com/api/cms/goods/upload"
+      onChange={handleChange}
+      onFileChange={handleFileChange}
+    />
+  );
+};
+```
+
+### Form 组件必填校验用法
+
+```tsx
+import React, { useCallback, useState, useRef, useEffect } from "react";
+import { Form, FormInstance, Button, message } from "antd";
+import {
+  DageFileCheckbox,
+  DageFileResponseType,
+  DageFileCheckboxMethods,
+  DageFileAPIResponseType,
+  DageUploadProvider,
+  DageUploadConsumer,
+} from "@dage/pc-components";
+
+const FILES = [
+  {
+    creatorName: "",
+    fileName: "shgy05.4dage",
+    filePath: "https://sit-shgybwg.4dage.com/goods/model/shgy05.4dage",
+    id: 111,
+    moduleName: "goods",
+    type: "model",
+  },
+  {
+    creatorName: "",
+    fileName: "shgy05.zip",
+    filePath:
+      "https://sit-shgybwg.4dage.com/goods/model_mobile/20230829_1633142351.zip",
+    id: 112,
+    moduleName: "goods",
+    type: "model_mobile",
+  },
+];
+
+export default () => {
+  const formRef = useRef<FormInstance>(null);
+  const dageFileCheckboxRef = useRef<DageFileCheckboxMethods>(null);
+  const fileList = useRef<DageFileResponseType[]>([]);
+
+  const handleFileChange = useCallback((list: DageFileResponseType[]) => {
+    fileList.current = list;
+  }, []);
+
+  const onFinish = useCallback((val: any) => {
+    const params = {
+      ...val,
+      fileIds: fileList.current
+        .map((i) => (!!i.response ? i.response.id : i.uid))
+        .join(),
+    };
+    message.info(JSON.stringify(params));
+  }, []);
+
+  useEffect(() => {
+    formRef.current!.setFieldsValue({
+      fileTypes: "model,img",
+    });
+    dageFileCheckboxRef.current!.setFileList(
+      FILES.map((i: DageFileAPIResponseType) => ({
+        uid: i.id + "",
+        url: i.filePath,
+        thumbUrl: i.filePath,
+        name: i.fileName,
+        dType: i.type,
+        status: "done",
+      }))
+    );
+  }, []);
+
+  return (
+    <DageUploadProvider>
+      <DageUploadConsumer>
+        {({ uploading }) => (
+          <Form ref={formRef} labelCol={{ span: 3 }} onFinish={onFinish}>
+            <Form.Item
+              label="文件类型"
+              name="fileTypes"
+              rules={[
+                {
+                  validator: (...args) => {
+                    dageFileCheckboxRef.current!.validate(...args);
+                  },
+                },
+              ]}
+              validateTrigger="onSubmit"
+            >
+              <DageFileCheckbox
+                ref={dageFileCheckboxRef}
+                hasMobileModel={true}
+                action="https://sit-shgybwg.4dage.com/api/cms/goods/upload"
+                onFileChange={handleFileChange}
+              />
+            </Form.Item>
+            <Form.Item wrapperCol={{ offset: 3 }}>
+              <Button disabled={uploading} type="primary" htmlType="submit">
+                提交
+              </Button>
+            </Form.Item>
+          </Form>
+        )}
+      </DageUploadConsumer>
+    </DageUploadProvider>
+  );
+};
+```
+
+### 禁用
+
+```tsx
+import React, { useRef, useEffect } from "react";
+import { DageFileCheckbox, DageFileCheckboxMethods } from "@dage/pc-components";
+
+const FILES = [
+  {
+    fileName: "h16.4dage",
+    filePath: "https://sit-shgybwg.4dage.com/goods/model/h16.4dage",
+    id: 1,
+    moduleName: "goods",
+    type: "model",
+  },
+  {
+    fileName: "cat.jpg",
+    filePath:
+      "https://sit-shgybwg.4dage.com/goods/img/20230829_12173720283.jpg",
+    id: 2,
+    moduleName: "goods",
+    type: "img",
+  },
+  {
+    fileName: "20230731_15413117733.mp3",
+    filePath:
+      "https://sit-shgybwg.4dage.com/goods/audio/20230731_15413117733.mp3",
+    id: 3,
+    moduleName: "goods",
+    type: "audio",
+  },
+];
+
+export default () => {
+  const dageFileCheckboxRef = useRef<DageFileCheckboxMethods>(null);
+
+  useEffect(() => {
+    dageFileCheckboxRef.current!.setFileList(
+      FILES.map((i: DageFileAPIResponseType) => ({
+        uid: i.id + "",
+        url: i.filePath,
+        thumbUrl: i.filePath,
+        name: i.fileName,
+        dType: i.type,
+        status: "done",
+      }))
+    );
+  }, []);
+
+  return (
+    <DageFileCheckbox
+      disabled
+      value="model,img,audio"
+      ref={dageFileCheckboxRef}
+      action="https://sit-shgybwg.4dage.com/api/cms/norm/file/upload"
+    />
+  );
+};
+```
+
+## API
+
+<API hideTitle exports='["DageFileCheckbox"]' src='@dage/pc-components/index.d.ts'></API>
+
+## DageFileCheckboxMethods
+
+| Name        | Description              | Type                                                                                             | Default |
+| ----------- | ------------------------ | ------------------------------------------------------------------------------------------------ | ------- |
+| validate    | 校验已选类型文件是否为空 | `(rule: RuleObject,value: any,callback: (error?: string \| undefined) => void) => Promise<void>` | --      |
+| setFileList | 保存文件列表             | `(list: DageFileResponseType[]) => void`                                                         | --      |

+ 1 - 1
packages/docs/docs/components/TableActions/index.md

@@ -133,4 +133,4 @@ export default () => {
 
 ## API
 
-<API hideTitle src='@dage/pc-components/components/TableActions/index.d.ts'></API>
+<API hideTitle src='@dage/pc-components/components/DageTableActions/index.d.ts'></API>

+ 112 - 112
packages/docs/docs/components/Upload/index.md

@@ -1,112 +1,112 @@
-## DageUpload 文件上传
-
-### 图片上传用法
-
-图片上传完成后,`file`会携带`imgAttrs`图片属性(**仅在新上传的图片存在**)
-
-```tsx
-import React, { useCallback, useState } from "react";
-import { message } from "antd";
-import { DageUpload, DageFileResponseType } from "@dage/pc-components";
-// 接口初始化
-import "../../configure";
-
-export default () => {
-  const [value, setValue] = useState<DageFileResponseType[]>([]);
-
-  const handleChange = useCallback(
-    (list: DageFileResponseType[], file: DageFileResponseType) => {
-      setValue(list);
-
-      if (file.status === "done" && file.imgAttrs) {
-        // imgAttrs 只会在新上传时获取
-        message.info(
-          `width:${file.imgAttrs.width};height:${file.imgAttrs.height}`
-        );
-      }
-    },
-    []
-  );
-
-  return (
-    <DageUpload
-      value={value}
-      maxCount={2}
-      maxSize={20}
-      action="/api/cms/goods/upload"
-      tips="支持png、jpg和jpeg格式;最大20M,最多2张"
-      onChange={handleChange}
-    />
-  );
-};
-```
-
-### 模型上传用法
-
-```tsx
-import React, { useCallback, useState } from "react";
-import {
-  DageUpload,
-  DageUploadType,
-  DageFileResponseType,
-} from "@dage/pc-components";
-
-export default () => {
-  const [value, setValue] = useState<DageFileResponseType[]>([]);
-
-  const handleChange = useCallback((list: DageFileResponseType[]) => {
-    setValue(list);
-  }, []);
-
-  return (
-    <DageUpload
-      value={value}
-      maxCount={2}
-      maxSize={20}
-      dType={DageUploadType.MODEL}
-      action="/api/cms/goods/upload"
-      onChange={handleChange}
-    />
-  );
-};
-```
-
-### 音频上传用法
-
-```tsx
-import React, { useCallback, useState } from "react";
-import {
-  DageUpload,
-  DageUploadType,
-  DageFileResponseType,
-} from "@dage/pc-components";
-
-export default () => {
-  const [value, setValue] = useState<DageFileResponseType[]>([]);
-
-  const handleChange = useCallback((list: DageFileResponseType[]) => {
-    setValue(list);
-  }, []);
-
-  return (
-    <DageUpload
-      value={value}
-      maxCount={2}
-      maxSize={20}
-      dType={DageUploadType.AUDIO}
-      action="/api/cms/goods/upload"
-      onChange={handleChange}
-    />
-  );
-};
-```
-
-## API
-
-<API hideTitle exports='["DageUpload"]' src='@dage/pc-components/index.d.ts'></API>
-
-## DageUploadContext
-
-| Name      | Description | Type      | Default |
-| --------- | ----------- | --------- | ------- |
-| uploading | 上传中      | `boolean` | `false` |
+## DageUpload 文件上传
+
+### 图片上传用法
+
+图片上传完成后,`file`会携带`imgAttrs`图片属性(**仅在新上传的图片存在**)
+
+```tsx
+import React, { useCallback, useState } from "react";
+import { message } from "antd";
+import { DageUpload, DageFileResponseType } from "@dage/pc-components";
+// 接口初始化
+import "../../configure";
+
+export default () => {
+  const [value, setValue] = useState<DageFileResponseType[]>([]);
+
+  const handleChange = useCallback(
+    (list: DageFileResponseType[], file: DageFileResponseType) => {
+      setValue(list);
+
+      if (file.status === "done" && file.imgAttrs) {
+        // imgAttrs 只会在新上传时获取
+        message.info(
+          `width:${file.imgAttrs.width};height:${file.imgAttrs.height}`
+        );
+      }
+    },
+    []
+  );
+
+  return (
+    <DageUpload
+      value={value}
+      maxCount={2}
+      maxSize={20}
+      action="/api/cms/norm/file/upload"
+      tips="支持png、jpg和jpeg格式;最大20M,最多2张"
+      onChange={handleChange}
+    />
+  );
+};
+```
+
+### 模型上传用法
+
+```tsx
+import React, { useCallback, useState } from "react";
+import {
+  DageUpload,
+  DageUploadType,
+  DageFileResponseType,
+} from "@dage/pc-components";
+
+export default () => {
+  const [value, setValue] = useState<DageFileResponseType[]>([]);
+
+  const handleChange = useCallback((list: DageFileResponseType[]) => {
+    setValue(list);
+  }, []);
+
+  return (
+    <DageUpload
+      value={value}
+      maxCount={2}
+      maxSize={20}
+      dType={DageUploadType.MODEL}
+      action="/api/cms/norm/file/upload"
+      onChange={handleChange}
+    />
+  );
+};
+```
+
+### 音频上传用法
+
+```tsx
+import React, { useCallback, useState } from "react";
+import {
+  DageUpload,
+  DageUploadType,
+  DageFileResponseType,
+} from "@dage/pc-components";
+
+export default () => {
+  const [value, setValue] = useState<DageFileResponseType[]>([]);
+
+  const handleChange = useCallback((list: DageFileResponseType[]) => {
+    setValue(list);
+  }, []);
+
+  return (
+    <DageUpload
+      value={value}
+      maxCount={2}
+      maxSize={20}
+      dType={DageUploadType.AUDIO}
+      action="/api/cms/norm/file/upload"
+      onChange={handleChange}
+    />
+  );
+};
+```
+
+## API
+
+<API hideTitle exports='["DageUpload"]' src='@dage/pc-components/index.d.ts'></API>
+
+## DageUploadContext
+
+| Name      | Description | Type      | Default |
+| --------- | ----------- | --------- | ------- |
+| uploading | 上传中      | `boolean` | `false` |

+ 57 - 29
packages/docs/docs/components/login.md

@@ -1,29 +1,57 @@
-## 获取用户信息
-
-用于开发调试
-
-```tsx
-import React, { useState } from "react";
-import { Button, Input, message } from "antd";
-import { Base64 } from "@dage/utils";
-import { encodeStr, setTokenInfo } from "@dage/pc-components";
-import { request } from "@dage/service";
-import "../configure";
-
-export default () => {
-  const login = async () => {
-    const data = await request("/api/admin/login", {
-      userName: "admin",
-      passWord: encodeStr(Base64.encode("123456")),
-    });
-    setTokenInfo(data);
-    message.success("登陆成功");
-  };
-
-  return (
-    <>
-      <Button onClick={login}>登录</Button>
-    </>
-  );
-};
-```
+## 获取用户信息
+
+用于开发调试
+
+```tsx
+import React, { useState } from "react";
+import { Button, Input, message, Form } from "antd";
+import { Base64 } from "@dage/utils";
+import { encodeStr, setTokenInfo } from "@dage/pc-components";
+import { request, getBaseURL } from "@dage/service";
+import "../configure";
+
+export default () => {
+  const baseUrl = getBaseURL();
+  const [timestamp, setTimestamp] = useState(new Date().getTime());
+
+  const handleLogin = async (vals) => {
+    const data = await request("/api/admin/login", {
+      userName: "admin",
+      passWord: encodeStr(Base64.encode("123456")),
+      ...vals,
+    });
+    setTokenInfo(data);
+    message.success("登陆成功");
+  };
+
+  return (
+    <Form
+      className="login-form__input"
+      style={{ width: 220 }}
+      onFinish={handleLogin}
+    >
+      <Form.Item
+        name="randCode"
+        rules={[{ required: true, message: "请输入验证码!" }]}
+      >
+        <Input
+          suffix={
+            <img
+              className="icon-code"
+              src={`${baseUrl}/api/admin/getRandCode?t=${timestamp}`}
+              alt="验证码"
+              onClick={() => {
+                setTimestamp(new Date().getTime());
+              }}
+            />
+          }
+          autocomplete="off"
+          placeholder="请输入验证码"
+          variant="filled"
+        />
+      </Form.Item>
+      <Button htmlType="submit">登录</Button>
+    </Form>
+  );
+};
+```

+ 40 - 40
packages/docs/docs/configure.ts

@@ -1,40 +1,40 @@
-// @ts-ignore
-import { compose, initial } from "@dage/service";
-// @ts-ignore
-import { getTokenInfo, removeTokenInfo } from "@dage/pc-components";
-import { message } from "antd";
-import { NoticeType } from "antd/es/message/interface";
-
-const showMessage = (msg: string, type: NoticeType = "error") => {
-  message.open({
-    type,
-    content: msg,
-    duration: 4,
-  });
-};
-
-initial({
-  fetch: window.fetch.bind(window),
-  baseURL: "https://sit-shgybwg.4dage.com",
-  interceptor: compose(
-    (request, next) => {
-      const { token } = getTokenInfo();
-      if (token) {
-        request.headers["token"] = token;
-      }
-      return next();
-    },
-    // 登陆失效
-    async (request, next) => {
-      const response = await next();
-
-      if ([5001, 5002].includes(response.code)) {
-        const msg = "登录失效!";
-        showMessage(msg);
-        removeTokenInfo();
-      }
-
-      return response;
-    }
-  ),
-});
+// @ts-ignore
+import { compose, initial } from "@dage/service";
+// @ts-ignore
+import { getTokenInfo, removeTokenInfo } from "@dage/pc-components";
+import { message } from "antd";
+import { NoticeType } from "antd/es/message/interface";
+
+const showMessage = (msg: string, type: NoticeType = "error") => {
+  message.open({
+    type,
+    content: msg,
+    duration: 4,
+  });
+};
+
+initial({
+  fetch: window.fetch.bind(window),
+  baseURL: "https://sit-shoubodyh.4dage.com",
+  interceptor: compose(
+    (request, next) => {
+      const { token } = getTokenInfo();
+      if (token) {
+        request.headers["token"] = token;
+      }
+      return next();
+    },
+    // 登陆失效
+    async (request, next) => {
+      const response = await next();
+
+      if ([5001, 5002].includes(response.code)) {
+        const msg = "登录失效!";
+        showMessage(msg);
+        removeTokenInfo();
+      }
+
+      return response;
+    }
+  ),
+});