[WIP] optimize docs

config/navbar.js

@@ -14,11 +14,6 @@ module.exports = {
       position: 'right',
       label: '指南',
     },
-    {
-      to: '/docs/guide/basic/vite',
-      position: 'right',
-      label: 'Vite 模式 🔥',
-    },
     {
       to: '/docs/config/about',
       position: 'right',
@@ -32,10 +27,15 @@ module.exports = {
     {
       position: 'right',
       label: '插件',
-      to: '/docs/plugin/list/moment-locales'
+      to: '/docs/plugin/develop/start'
+    },
+    {
+      position: 'right',
+      label: '示例',
+      to: '/docs/examples/antd'
     },
     {
-      label: '官方生态',
+      label: '生态',
       position: 'right',
       items: [
         {
@@ -51,18 +51,18 @@ module.exports = {
           to: 'https://appworks.site/materials/about.html',
         },
         {
-          label: '环境管理 AppToolkit',
+          label: '前端环境 AppToolkit',
           to: 'https://github.com/appworks-lab/toolkit#readme',
         },
       ],
     },
     {
-      label: '更多资源',
+      label: '资源',
       position: 'right',
       items: [
         {
           to: 'https://fusion.design/pc/doc/component/102',
-          label: 'Fusion 组件',
+          label: 'fusion 组件',
         },
         {
           to: 'https://ant.design',
@@ -73,12 +73,12 @@ module.exports = {
           label: '国内镜像站点',
         },
         {
-          label: '前端基础',
-          to: '/docs/resource/front-basic',
+          label: '社区钉钉群',
+          to: 'https://iceworks.oss-cn-hangzhou.aliyuncs.com/assets/images/ice-group.png',
         },
         {
-          label: '前端环境',
-          to: '/docs/resource/front-env',
+          label: '阿里内部钉钉群',
+          to: 'https://iceworks.oss-cn-hangzhou.aliyuncs.com/assets/images/ice-group-inside.JPG',
         },
       ],
     },

config/sidebars.js

@@ -25,103 +25,19 @@ module.exports = {
     },
   ],
   plugin: [
-    {
-      type: 'category',
-      label: '官方插件',
-      collapsed: false,
-      items: getDocsFromDir('plugin/list')
-    },
     {
       type: 'category',
       label: '插件开发',
       collapsed: false,
       items: getDocsFromDir('plugin/develop')
     },
-  ],
-  resource: getDocsFromDir('resource'),
-  fusion: [
-    'fusion/about',
-    {
-      type: 'category',
-      label: '通用',
-      collapsed: false,
-      items: getDocsFromDir('fusion/components/general'),
-    },
-    {
-      type: 'category',
-      label: '导航',
-      collapsed: false,
-      items: getDocsFromDir('fusion/components/nav'),
-    },
     {
       type: 'category',
-      label: '表单',
-      collapsed: false,
-      items: getDocsFromDir('fusion/components/form'),
-    },
-    {
-      type: 'category',
-      label: '展示',
-      collapsed: false,
-      items: getDocsFromDir('fusion/components/display'),
-    },
-    {
-      type: 'category',
-      label: '反馈',
-      collapsed: false,
-      items: getDocsFromDir('fusion/components/feedback'),
-    },
-    {
-      type: 'category',
-      label: '方法',
+      label: '官方插件',
       collapsed: false,
-      items: getDocsFromDir('fusion/components/util'),
+      items: getDocsFromDir('plugin/list')
     },
-    // {
-    //   type: 'category',
-    //   label: '项目模板',
-    //   collapsed: false,
-    //   items: getDocsFromDir('fusion/scaffolds')
-    // },
-    // {
-    //   type: 'category',
-    //   label: '基础组件',
-    //   collapsed: false,
-    //   items: [
-    //     {
-    //       '通用': getDocsFromDir('fusion/components/general'),
-    //     },
-    //     {
-    //       '导航': getDocsFromDir('fusion/components/nav'),
-    //     },
-    //     {
-    //       '表单': getDocsFromDir('fusion/components/form'),
-    //     },
-    //     {
-    //       '展示': getDocsFromDir('fusion/components/display'),
-    //     },
-    //     {
-    //       '反馈': getDocsFromDir('fusion/components/feedback'),
-    //     },
-    //     {
-    //       '方法': getDocsFromDir('fusion/components/util'),
-    //     },
-    //   ]
-    // },
   ],
-  // antd: [
-  //   'antd/about',
-  //   {
-  //     type: 'category',
-  //     label: '项目模板',
-  //     collapsed: false,
-  //     items: getDocsFromDir('antd/scaffolds')
-  //   },
-  // ],
-  // api: [
-  //   'api/about',
-  // ],
-  // config: [
-  //   'config/about',
-  // ]
+  examples: getDocsFromDir('examples'),
+  resource: getDocsFromDir('resource')
 };

docs/examples/antd.md

@@ -0,0 +1,4 @@
+---
+title: 使用 antd 组件
+order: 1
+---

docs/examples/fusion.md

@@ -0,0 +1,4 @@
+---
+title: 使用 fusion 组件
+order: 2
+---

docs/examples/tailwind.md

@@ -0,0 +1,5 @@
+---
+title: 使用 Tailwind CSS
+order: 3
+---
+

docs/guide/advanced/auth.md

@@ -1,5 +1,5 @@
 ---
-title: 权限管理
+title: 权限管理 Auth
 order: 9
 ---
 
@@ -68,28 +68,28 @@ export default [
 export default routerConfig;
 ```
 
-## 操作权限
-
-在某些场景下，如某个组件中要根据角色判断是否有操作权限，我们可以通过 `useAuth` Hooks 在组件中获取权限数据，同时也可以更新初始的权限数据。
-
-### 获取权限数据
+切换路由的时候框架会结合权限数据判断是否有权限，如果没权限则会渲染无权限的 UI，无权限 UI 可以通过 `appConfig.auth` 来指定：
 
 ```tsx
-import React from 'react';
-import { useAuth } from 'ice';
+// src/app.ts
+import { runApp } from 'ice';
 
-function Foo() {
-  const [auth] = useAuth();
-  return (
-    <>
-      当前用户权限数据：
-      <code>{JSON.stringify(auth)}</code>
-    </>
-  );
-}
+runApp({
+  auth: {
+    NoAuthFallback: ({ location, history, pageConfig }) => {
+      return <>无权限</>;
+    },
+  },
+});
 ```
 
-### 设置权限数据
+`NoAuthFallback` 接受到的 props 跟页面路由组件保持一致，具体请参考：[页面组件默认 props](/guide/basic/page.md#页面组件默认-props) 。
+
+## 操作类权限
+
+在某些场景下，如某个组件中要根据角色判断是否有操作权限，我们可以通过 `useAuth` Hooks 在组件中获取权限数据，同时也可以更新初始的权限数据。
+
+### 读取/设置权限数据
 
 ```tsx
 import React from 'react';
@@ -105,8 +105,10 @@ function Foo() {
 
   return (
     <>
-      当前用户角色：
-      <code>{JSON.stringify(auth)}</code>
+      <div>
+        <div>starRepo auth: {auth.starRepo}</div>
+        <div>followRepo auth: {auth.followRepo}</div>
+      </div>
       <button type="button" onClick={updateAuth}>
         更新权限
       </button>
@@ -120,25 +122,16 @@ function Foo() {
 对于操作类权限，通常我们可以自定义封装权限组件，以便更细粒度的控制权限和复用。
 
 ```ts
+// src/components/Auth
 import React from 'react';
 import { useAuth } from 'ice';
-import NoAuth from '@/components/NoAuth';
 
-function Auth({ children, authKey, fallback }) {
+export default function Auth({ children, authKey }) {
   const [auth] = useAuth();
-  // 判断是否有权限
   const hasAuth = auth[authKey];
 
-  // 有权限时直接渲染内容
-  if (hasAuth) {
-    return children;
-  } else {
-    // 无权限时显示指定 UI
-    return fallback || NoAuth;
-  }
+  return hasAuth ? children : null;
 }
-
-export default Auth;
 ```
 
 使用如下：

docs/guide/advanced/menu.md

@@ -1,5 +1,5 @@
 ---
-title: 菜单配置
+title: 菜单配置 Menu
 order: 9
 ---
 

docs/guide/advanced/ssg.md

@@ -6,7 +6,7 @@ order: 3
 import Support from '../../../src/components/Support'
 import Badge from '../../../src/components/Badge'
 
-<Support list={['webpack']} /><Badge text="2.0.0" />
+<Support list={['webpack', 'vite']} /><Badge text="2.0.0" />
 
 icejs 提供构建时预渲染方案，即在构建时渲染页面组件并生成静态的 HTML 文件，以更好解决以下的业务场景：
 

docs/guide/basic/build.md

@@ -72,6 +72,8 @@ Options:
 }
 ```
 
+当下支持的基础配置项请参考文档：[配置](/config/about.md)。
+
 如果希望使用 JS 类型的配置文件，则需要在 npm scripts 中指定配置文件：
 
 ```json
@@ -91,12 +93,7 @@ module.exports = {
     env: process.env.NODE_ENV,
   },
   plugins: [
-    [
-      'build-plugin-fusion',
-      {
-        themePackage: '@icedesign/theme',
-      },
-    ],
+    'build-plugin-moment-locales',
     (api) => {
       api.onGetWebpackConfig((config) => {
         config.entry('src/index.js');
@@ -106,7 +103,7 @@ module.exports = {
 };
 ```
 
-当下支持的基础配置项请参考文档：[配置](/config/about.md)。
+> 同时也支持 `build.config.ts`
 
 ## 进阶配置
 
@@ -143,23 +140,23 @@ function Example() {
 
 如果基础配置和已有插件都无法支持业务需求，可以通过自定义配置来实现，自定义配置同时也是一个 Webpack 插件。
 
-首先新建 `build.plugin.js`  文件作为一个自定义插件，然后写入以下代码：
+首先新建 `build.plugin.js` 并在 `build.json` 中引入：
+
+```json
+{
+  "plugins": ["build-plugin-ice-app", "./build.plugin.js"]
+}
+```
+
+`build.plugin.js` 内容如下：
 
 ```js
 module.exports = ({ context, onGetWebpackConfig }) => {
   onGetWebpackConfig((config) => {});
 };
 ```
 
-插件内部代码写法可以参考文档 [通过插件定制工程能力](/plugin/develop/build.md)。
-
-最后在 `build.json`  里引入自定义插件即可：
-
-```json
-{
-  "plugins": ["build-plugin-ice-app", "./build.plugin.js"]
-}
-```
+插件内部代码写法可以参考文档 [插件开发-定制工程能力](/plugin/develop/build.md)。
 
 ## 调试
 

docs/guide/basic/config.md

@@ -43,15 +43,6 @@ icejs 支持区分不同环境，开发者可根据环境区分**工程配置**
 }
 ```
 
-同时在本地插件 `build.plugin.js` 也可以从 context 上获取到当前 mode：
-
-```js
-module.exports = ({ context }) => {
-  const { command, commandArgs } = context;
-  const mode = commandArgs.mode || command;
-};
-```
-
 ## 区分运行时配置
 
 在定义好环境之后，前端代码中即可通过 `APP_MODE` 拿到当前环境：