fix: 修复构建输出与预览环境不一致的问题，修复构建页面崩溃问题

CHANGELOG.md

@@ -11,7 +11,6 @@
 - 更新 `vue` 版本至 `3.4.7`
 - 更新 `naive-ui` 版本至 `2.37.3`
 - 更新最新版本 `vue` 后，更新 `createDiscreteApi` 方法注册上下文，改为函数包裹，避免 `slot default invoked outside of render` 警告
-- 使用 [`NFlex`](https://www.naiveui.com/zh-CN/dark/components/flex) 组件替换 `NSpace` 组件，根据官方建议，尽量使用该组件
 - `menu store` 相关
   - 优化 `setupAppMenu` 方法，初始化时会拼接完整的 `fullPath`，避免 `url`, `menu value` 更新路由时重复处理 `path`，提高性能
   - 优化 `updateMenuKeyWhenRouteUpdate` 方法，减少 `path` 处理操作

src/app-components/app/AppAvatar/index.tsx

@@ -19,9 +19,9 @@
 
 import './index.scss'
 
-import { NAvatar, NFlex } from 'naive-ui'
+import { NAvatar, NSpace } from 'naive-ui'
 
-import { avatarProps, flexProps } from 'naive-ui'
+import { avatarProps, spaceProps } from 'naive-ui'
 import { APP_CATCH_KEY } from '@/app-config'
 import { getStorage } from '@/utils'
 
@@ -33,7 +33,7 @@ const AppAvatar = defineComponent({
   name: 'AppAvatar',
   props: {
     ...avatarProps,
-    ...flexProps,
+    ...spaceProps,
     cursor: {
       type: String,
       default: 'auto',
@@ -64,11 +64,12 @@ const AppAvatar = defineComponent({
   },
   render() {
     return (
-      <NFlex
+      <NSpace
         class="app-avatar"
         {...this.$props}
         style={this.cssVars}
         size={this.spaceSize}
+        wrapItem={false}
       >
         <NAvatar
           // eslint-disable-next-line prettier/prettier, @typescript-eslint/no-explicit-any
@@ -79,7 +80,7 @@ const AppAvatar = defineComponent({
           size={this.avatarSize}
         />
         <div class="app-avatar__name">{this.signing?.name}</div>
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx

@@ -11,7 +11,7 @@
 
 /** 解锁界面 */
 
-import { NInput, NForm, NFormItem, NButton, NFlex } from 'naive-ui'
+import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui'
 import AppAvatar from '@/app-components/app/AppAvatar'
 
 import dayjs from 'dayjs'
@@ -137,14 +137,14 @@ export default defineComponent({
                   }}
                 />
               </NFormItem>
-              <NFlex justify="space-between">
+              <NSpace justify="space-between">
                 <NButton type="primary" text onClick={backToSigning.bind(this)}>
                   返回登陆
                 </NButton>
                 <NButton type="primary" text onClick={unlockScreen.bind(this)}>
                   进入系统
                 </NButton>
-              </NFlex>
+              </NSpace>
             </NForm>
           </div>
           <div class="app-lock-screen__unlock__content-date">

src/app-components/app/RayLink/index.tsx

@@ -3,7 +3,7 @@
  * 友情链接组件，无实际项目意义
  */
 
-import { NAvatar, NTooltip, NFlex } from 'naive-ui'
+import { NAvatar, NTooltip, NSpace } from 'naive-ui'
 
 interface AvatarOptions {
   key: string
@@ -65,7 +65,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <NFlex>
+      <NSpace>
         {this.avatarOptions.map((curr) => (
           <NTooltip key={curr.key}>
             {{
@@ -85,7 +85,7 @@ export default defineComponent({
             }}
           </NTooltip>
         ))}
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/components/RCollapseGrid/src/index.tsx

@@ -21,7 +21,7 @@
 
 import './index.scss'
 
-import { NCard, NGrid, NGridItem, NFlex } from 'naive-ui'
+import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
 import { RIcon } from '@/components'
 
 import { call } from '@/utils'
@@ -85,10 +85,10 @@ export default defineComponent({
             >
               {this.$slots.default?.()}
               <NGridItem suffix class="ray-collapse-grid__suffix--btn">
-                <NFlex justify="end">
+                <NSpace justify="end">
                   {this.$slots.action?.()}
                   {this.CollapseIcon()}
-                </NFlex>
+                </NSpace>
               </NGridItem>
             </NGrid>
           ),

src/components/RTable/src/Table.tsx

@@ -11,7 +11,7 @@
 
 import './index.scss'
 
-import { NCard, NDataTable, NDropdown, NFlex } from 'naive-ui'
+import { NCard, NDataTable, NDropdown, NSpace } from 'naive-ui'
 import Size from './components/Size'
 import Fullscreen from './components/Fullscreen'
 import C from './components/C'
@@ -238,10 +238,10 @@ export default defineComponent({
             defaultElement: <div style="display: none;"></div>,
           }),
           'header-extra': () => (
-            <NFlex align="center">
+            <NSpace align="center">
               {/* eslint-disable @typescript-eslint/no-explicit-any */}
               {tool(this.$props as any)}
-            </NFlex>
+            </NSpace>
           ),
           footer: () => this.$slots.tableFooter?.(),
           action: () => this.$slots.tableAction?.(),

src/components/RTable/src/components/C.tsx

@@ -18,7 +18,7 @@
  * 2. 大量数据的时候，可能会出现性能问题
  */
 
-import { NPopover, NFlex, NTree } from 'naive-ui'
+import { NPopover, NSpace, NTree } from 'naive-ui'
 import { RIcon } from '@/components'
 
 import config from '../config'
@@ -129,7 +129,7 @@ export default defineComponent({
           return {
             ...attr,
             suffix: () => (
-              <NFlex style="padding-left: 32px;">
+              <NSpace style="padding-left: 32px;">
                 <RowIconRender
                   icon="row_head"
                   title="固定在列首"
@@ -162,7 +162,7 @@ export default defineComponent({
                   }
                   onClick={fixedClick.bind(this, 'right', attr, idx)}
                 />
-              </NFlex>
+              </NSpace>
             ),
           }
         }) as C[]

src/directives/README_DIR.md

@@ -8,7 +8,7 @@
 #### 示例
 
 ```tsx
-import { NFlex, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
 
 const Demo = defineComponent({
   name: 'Demo',
@@ -46,7 +46,7 @@ const Demo = defineComponent({
 #### 示例
 
 ```tsx
-import { NFlex, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
 
 const Demo = defineComponent({
   name: 'Demo',
@@ -64,7 +64,7 @@ const Demo = defineComponent({
   },
   render() {
     return (
-      <NFlex wrapItem={true} vertical>
+      <NSpace wrapItem={true} vertical>
         <NButton
           v-debounce={{
             func: this.updateDemoValue,
@@ -77,7 +77,7 @@ const Demo = defineComponent({
         </NButton>
         <p>我执行了{this.demoValue}次</p>
         <p>该方法将延迟 1s 执行</p>
-      </NFlex>
+      </NSpace>
     )
   },
 })
@@ -99,7 +99,7 @@ const Demo = defineComponent({
 #### 示例
 
 ```tsx
-import { NFlex, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
 
 const Demo = defineComponent({
   name: 'Demo',
@@ -117,7 +117,7 @@ const Demo = defineComponent({
   },
   render() {
     return (
-      <NFlex wrapItem={true} vertical>
+      <NSpace wrapItem={true} vertical>
         <NButton
           v-throttle={{
             func: this.updateDemoValue,
@@ -130,7 +130,7 @@ const Demo = defineComponent({
         </NButton>
         <p>我执行了{this.demoValue}次</p>
         <p>该方法 1s 内仅会执行一次</p>
-      </NFlex>
+      </NSpace>
     )
   },
 })
@@ -149,7 +149,7 @@ const Demo = defineComponent({
 
 ```tsx
 import {
-  NFlex,
+  NSpace,
   NCard,
   NInput,
   NInputGroup,
@@ -170,7 +170,7 @@ const Demo = defineComponent({
   },
   render() {
     return (
-      <NFlex vertical>
+      <NSpace vertical>
         <NSwitch v-model:value={this.disabledValue}>
           {{
             checked: () => '取消',
@@ -182,22 +182,22 @@ const Demo = defineComponent({
           组件提供了完整的 disabled
           属性，所以在组件库有禁用需求时，直接调用组件库 disabled 属性即可
         </p>
-        <NFlex vertical wrapItem={false}>
+        <NSpace vertical wrapItem={false}>
           <NCard title="原生表单" bordered={false}>
-            <NFlex vertical wrapItem={false}>
+            <NSpace vertical wrapItem={false}>
               <form v-disabled={this.disabledValue}>
                 <input type="text" placeholder="请输入" />
                 <button>提交</button>
               </form>
-            </NFlex>
+            </NSpace>
           </NCard>
           <NCard title="文本内容" bordered={false}>
-            <NFlex vertical wrapItem={false}>
+            <NSpace vertical wrapItem={false}>
               <p v-disabled={this.disabledValue}>我是可以被禁用的文本内容</p>
-            </NFlex>
+            </NSpace>
           </NCard>
           <NCard title="naive 组件" bordered={false}>
-            <NFlex vertical wrapItem={false} justify="start">
+            <NSpace vertical wrapItem={false} justify="start">
               <NButton v-disabled={this.disabledValue}>按钮</NButton>
               <NForm v-disabled={this.disabledValue}>
                 <NFormItem label="名称">
@@ -205,10 +205,10 @@ const Demo = defineComponent({
                 </NFormItem>
               </NForm>
               <NSwitch v-disabled={this.disabledValue}></NSwitch>
-            </NFlex>
+            </NSpace>
           </NCard>
-        </NFlex>
-      </NFlex>
+        </NSpace>
+      </NSpace>
     )
   },
 })

src/layout/components/MenuTag/index.tsx

@@ -33,7 +33,7 @@ import './index.scss'
 
 import {
   NScrollbar,
-  NFlex,
+  NSpace,
   NLayoutHeader,
   NDropdown,
   NButton,
@@ -456,12 +456,13 @@ export default defineComponent({
               this.actionState.actionDropdownShow = false
             }}
           />
-          <NFlex
+          <NSpace
             class="menu-tag-space"
             wrap={false}
             align="center"
             justify="space-between"
             inline
+            wrapItem={false}
           >
             <RIcon
               name="expanded"
@@ -477,7 +478,7 @@ export default defineComponent({
                 id: uuidScrollBar,
               }}
             >
-              <NFlex
+              <NSpace
                 ref="menuTagSpaceRef"
                 class="menu-tag-wrapper"
                 wrap={false}
@@ -544,9 +545,9 @@ export default defineComponent({
                     }}
                   </NButton>
                 ))}
-              </NFlex>
+              </NSpace>
             </NScrollbar>
-            <NFlex
+            <NSpace
               class="menu-tag__right-wrapper"
               align="center"
               inline
@@ -585,8 +586,8 @@ export default defineComponent({
                   onClick={this.setCurrentContextmenuIndex.bind(this)}
                 />
               </RMoreDropdown>
-            </NFlex>
-          </NFlex>
+            </NSpace>
+          </NSpace>
         </div>
       </NLayoutHeader>
     )

src/layout/components/SiderBar/components/GlobalSearch/index.tsx

@@ -20,7 +20,7 @@
 
 import './index.scss'
 
-import { NInput, NModal, NResult, NScrollbar, NFlex } from 'naive-ui'
+import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
 import { RIcon } from '@/components'
 
 import { queryElements, addClass, removeClass } from '@/utils'
@@ -255,7 +255,7 @@ export default defineComponent({
     }
 
     const SearchItem = ({ menuOption }: { menuOption: AppMenuOption }) => (
-      <NFlex
+      <NSpace
         align="center"
         class="content-item"
         {...{
@@ -265,7 +265,7 @@ export default defineComponent({
       >
         <div class="content-item-icon">{RenderPreIcon(menuOption.meta)}</div>
         <div class="content-item-label">{menuOption.breadcrumbLabel}</div>
-      </NFlex>
+      </NSpace>
     )
 
     watchEffect(() => {
@@ -320,30 +320,30 @@ export default defineComponent({
               </div>
               <NScrollbar class="global-search__card-content">
                 {searchOptions.length ? (
-                  <NFlex vertical size={[8, 8]}>
+                  <NSpace vertical size={[8, 8]}>
                     {searchOptions.map((curr) => (
                       <SearchItem menuOption={curr} key={curr.fullPath} />
                     ))}
-                  </NFlex>
+                  </NSpace>
                 ) : (
                   <NResult size="large" class="global-search__empty">
                     {{
                       icon: () => null,
                       default: () => (
-                        <NFlex
+                        <NSpace
                           justify="center"
                           class="global-search__empty-content"
                         >
                           <RIcon name="empty" size="24" />
                           暂无搜索结果
-                        </NFlex>
+                        </NSpace>
                       ),
                     }}
                   </NResult>
                 )}
               </NScrollbar>
               <div class="global-search__card-footer">
-                <NFlex
+                <NSpace
                   class="card-footer__tip-wrapper"
                   align="center"
                   size={[24, 8]}
@@ -360,7 +360,7 @@ export default defineComponent({
                       <div class="item-label">{curr.label}</div>
                     </div>
                   ))}
-                </NFlex>
+                </NSpace>
               </div>
             </div>
           </div>

src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NFlex, NSwitch, NTooltip } from 'naive-ui'
+import { NSpace, NSwitch, NTooltip } from 'naive-ui'
 import { RIcon } from '@/components'
 
 import { useSettingGetters } from '@/store'
@@ -44,7 +44,7 @@ export default defineComponent({
     const { $t, changeDarkTheme, changeLightTheme, railStyle } = this
 
     return (
-      <NFlex justify="center">
+      <NSpace justify="center">
         <NTooltip>
           {{
             trigger: () => (
@@ -69,7 +69,7 @@ export default defineComponent({
                 : $t('headerSettingOptions.ThemeOptions.Light'),
           }}
         </NTooltip>
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/layout/components/SiderBar/components/SettingDrawer/index.tsx

@@ -14,7 +14,7 @@ import {
   NDrawer,
   NDrawerContent,
   NDivider,
-  NFlex,
+  NSpace,
   NSwitch,
   NColorPicker,
   NDescriptions,
@@ -111,7 +111,7 @@ const SettingDrawer = defineComponent({
         width={this.width}
       >
         <NDrawerContent title={$t('headerSettingOptions.Title')}>
-          <NFlex class="setting-drawer__space" vertical>
+          <NSpace class="setting-drawer__space" vertical>
             <NDivider titlePlacement="center">
               {$t('headerSettingOptions.ThemeOptions.Title')}
             </NDivider>
@@ -171,7 +171,7 @@ const SettingDrawer = defineComponent({
                 />
               </NDescriptionsItem>
             </NDescriptions>
-          </NFlex>
+          </NSpace>
         </NDrawerContent>
       </NDrawer>
     )

src/layout/components/SiderBar/index.tsx

@@ -19,7 +19,7 @@
 
 import './index.scss'
 
-import { NLayoutHeader, NFlex, NDropdown } from 'naive-ui'
+import { NLayoutHeader, NSpace, NDropdown } from 'naive-ui'
 import { RIcon } from '@/components'
 import TooltipIcon from '@/layout/components/SiderBar/components/TooltipIcon'
 import SettingDrawer from './components/SettingDrawer'
@@ -128,12 +128,12 @@ export default defineComponent({
     return (
       <NLayoutHeader class="layout-header" bordered>
         <GlobalSearch v-model:show={this.globalSearchShown} />
-        <NFlex
+        <NSpace
           class="layout-header__method"
           align="center"
           justify="space-between"
         >
-          <NFlex align="center">
+          <NSpace align="center">
             {this.leftIconOptions.map((curr) => (
               <TooltipIcon
                 key={curr.name}
@@ -146,8 +146,8 @@ export default defineComponent({
               />
             ))}
             {this.getBreadcrumbSwitch ? <Breadcrumb /> : null}
-          </NFlex>
-          <NFlex align="center">
+          </NSpace>
+          <NSpace align="center">
             {this.rightTooltipIconOptions.map((curr) => (
               <TooltipIcon
                 key={curr.name}
@@ -180,8 +180,8 @@ export default defineComponent({
             >
               <AppAvatar avatarSize="small" align="center" cursor="pointer" />
             </NDropdown>
-          </NFlex>
-        </NFlex>
+          </NSpace>
+        </NSpace>
         <SettingDrawer
           v-model:show={this.showSettings}
           placement={this.getDrawerPlacement}

src/layout/default/HeaderWrapper/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NFlex } from 'naive-ui'
+import { NSpace } from 'naive-ui'
 import SiderBar from '@/layout/components/SiderBar'
 
 export default defineComponent({
@@ -19,9 +19,9 @@ export default defineComponent({
   },
   render() {
     return (
-      <NFlex size={[0, 0]}>
+      <NSpace size={[0, 0]} wrapItem={false}>
         <SiderBar />
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/dashboard/index.tsx

@@ -6,7 +6,7 @@ import {
   NDescriptions,
   NDescriptionsItem,
   NTag,
-  NFlex,
+  NSpace,
   NP,
   NH6,
 } from 'naive-ui'
@@ -20,34 +20,34 @@ const Dashboard = defineComponent({
       {
         label: '掌握搬砖框架',
         des: () => (
-          <NFlex>
+          <NSpace>
             <NTag type="success">Vue3.x</NTag>
             <NTag type="info">React</NTag>
-          </NFlex>
+          </NSpace>
         ),
       },
       {
         label: '从事搬砖时长',
         des: () => (
-          <NFlex>
+          <NSpace>
             <NTag type="success">练习时长两年半的小白前端搬砖师</NTag>
-          </NFlex>
+          </NSpace>
         ),
       },
       {
         label: '个人',
         des: () => (
-          <NFlex align="center">
+          <NSpace align="center">
             <RIcon name="ray" size="22" />
             努力搬砖、努力摸鱼, 建设美丽家园
-          </NFlex>
+          </NSpace>
         ),
         span: 2,
       },
       {
         label: '补充说明',
         des: () => (
-          <NFlex align="center">
+          <NSpace align="center">
             如果有希望补充的功能可以在
             <a
               class="dashboard-link"
@@ -56,7 +56,7 @@ const Dashboard = defineComponent({
               GitHub
             </a>
             提一个 Issues
-          </NFlex>
+          </NSpace>
         ),
         span: 2,
       },
@@ -110,13 +110,13 @@ const Dashboard = defineComponent({
         <NCard title="项目介绍">
           <NH6>技术栈</NH6>
           <NP>
-            <NFlex>
+            <NSpace>
               {this.technologyTagOptions.map((curr) => (
                 <NTag key={curr.value} type="info">
                   {curr.label}
                 </NTag>
               ))}
-            </NFlex>
+            </NSpace>
           </NP>
           <NH6>项目介绍</NH6>
           <NP>

src/views/demo/axios/index.tsx

@@ -1,6 +1,6 @@
 import './index.scss'
 
-import { NCard, NLayout, NFlex, NInput, NButton } from 'naive-ui'
+import { NCard, NLayout, NSpace, NInput, NButton } from 'naive-ui'
 import { getWeather, getTypicode } from '@/api/demo/test'
 import { useRequest, useHookPlusRequest } from '@/axios'
 
@@ -77,7 +77,7 @@ const Axios = defineComponent({
   render() {
     return (
       <NLayout>
-        <NFlex vertical>
+        <NSpace vertical>
           <h1>请求</h1>
           <NCard>
             <h2>useRequest</h2>
@@ -100,17 +100,17 @@ const Axios = defineComponent({
             <h3>3.详情请查看文档</h3>
           </NCard>
           <NCard title="useRequest示例（手动触发）">
-            <NFlex vertical>
+            <NSpace vertical>
               <NButton onClick={this.demoRun.bind(this)}>获取数据</NButton>
               <h3>
                 结果:&nbsp;
                 {this.demoLoading ? '获取中...' : this.demoData?.title}
               </h3>
-            </NFlex>
+            </NSpace>
           </NCard>
           <h1>使用 useHookPlusRequest 获取</h1>
           <NCard title="节流">
-            <NFlex vertical>
+            <NSpace vertical>
               <NInput
                 v-model:value={this.throttleDemoInputValue}
                 onUpdateValue={() => {
@@ -122,10 +122,10 @@ const Axios = defineComponent({
                 当前状态:&nbsp;
                 {this.throttleDemoLoading ? '获取中...' : '获取成功!!!'}
               </h3>
-            </NFlex>
+            </NSpace>
           </NCard>
           <NCard title="防抖">
-            <NFlex vertical>
+            <NSpace vertical>
               <NInput
                 v-model:value={this.debounceDemoInputValue}
                 onUpdateValue={() => {
@@ -137,10 +137,10 @@ const Axios = defineComponent({
                 当前状态:&nbsp;
                 {this.debounceDemoLoading ? '获取中...' : '获取成功!!!'}
               </h3>
-            </NFlex>
+            </NSpace>
           </NCard>
           <NCard title="获取气候">
-            <NFlex vertical>
+            <NSpace vertical>
               <NInput
                 v-model:value={this.weatherDemoInputValue}
                 onUpdateValue={(val) => {
@@ -152,9 +152,9 @@ const Axios = defineComponent({
                 当前状态:&nbsp;
                 {this.weatherDemoLoading ? '获取中...' : '获取成功!!!'}
               </h3>
-            </NFlex>
+            </NSpace>
           </NCard>
-        </NFlex>
+        </NSpace>
       </NLayout>
     )
   },

src/views/demo/context-menu/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NFlex, NCard, NDropdown } from 'naive-ui'
+import { NSpace, NCard, NDropdown } from 'naive-ui'
 
 import { useContextmenuCoordinate } from '@/hooks'
 
@@ -52,9 +52,9 @@ export default defineComponent({
     const { x, y, show } = this
 
     return (
-      <NFlex vertical>
+      <NSpace vertical>
         <NCard title="useContextmenuCoordinate + NDropdown 实现右键菜单">
-          <NFlex vertical>
+          <NSpace vertical>
             <h3>默认点击元素外部会关闭菜单。</h3>
             <div
               ref="demoOneRef"
@@ -62,7 +62,7 @@ export default defineComponent({
             >
               右击
             </div>
-          </NFlex>
+          </NSpace>
         </NCard>
         <NDropdown
           show={show}
@@ -72,7 +72,7 @@ export default defineComponent({
           trigger="manual"
           placement="bottom-start"
         />
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/demo/directive/index.tsx

@@ -10,7 +10,7 @@
  */
 
 import {
-  NFlex,
+  NSpace,
   NCard,
   NInput,
   NInputGroup,
@@ -50,7 +50,7 @@ const RDirective = defineComponent({
   },
   render() {
     return (
-      <NFlex>
+      <NSpace wrapItem={false}>
         <NCard title="指令">该页面展示如何使用已封装好的指令</NCard>
         <NCard title="文本复制示例一">
           <NInputGroup>
@@ -65,7 +65,7 @@ const RDirective = defineComponent({
           </NInputGroup>
         </NCard>
         <NCard title="节流">
-          <NFlex vertical>
+          <NSpace vertical>
             <NButton
               v-throttle={{
                 func: this.updateDemoValue.bind(null, 'throttleBtnClickCount'),
@@ -78,10 +78,10 @@ const RDirective = defineComponent({
             </NButton>
             <p>我执行了{this.throttleBtnClickCount}次</p>
             <p>该方法 1s 内仅会执行一次</p>
-          </NFlex>
+          </NSpace>
         </NCard>
         <NCard title="防抖">
-          <NFlex vertical>
+          <NSpace vertical>
             <NButton
               v-debounce={{
                 func: this.updateDemoValue.bind(null, 'debounceBtnClickCount'),
@@ -94,10 +94,10 @@ const RDirective = defineComponent({
             </NButton>
             <p>我执行了{this.debounceBtnClickCount}次</p>
             <p>该方法将延迟 1s 执行</p>
-          </NFlex>
+          </NSpace>
         </NCard>
         <NCard title="禁用">
-          <NFlex vertical>
+          <NSpace vertical>
             <NSwitch v-model:value={this.disabledValue}>
               {{
                 checked: () => '取消',
@@ -120,12 +120,12 @@ const RDirective = defineComponent({
               </form>
             </NCard>
             <NCard title="文本内容">
-              <NFlex vertical>
+              <NSpace vertical>
                 <p v-disabled={this.disabledValue}>我是可以被禁用的文本内容</p>
-              </NFlex>
+              </NSpace>
             </NCard>
             <NCard title="naive 组件">
-              <NFlex vertical justify="start">
+              <NSpace vertical justify="start">
                 <NForm v-disabled={this.disabledValue}>
                   <NFormItem>
                     <NInput />
@@ -133,11 +133,11 @@ const RDirective = defineComponent({
                 </NForm>
                 <NButton v-disabled={this.disabledValue}>按钮</NButton>
                 <NSwitch v-disabled={this.disabledValue}></NSwitch>
-              </NFlex>
+              </NSpace>
             </NCard>
-          </NFlex>
+          </NSpace>
         </NCard>
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/demo/echart/index.tsx

@@ -1,6 +1,6 @@
 import './index.scss'
 
-import { NCard, NSwitch, NFlex, NH2, NButton } from 'naive-ui'
+import { NCard, NSwitch, NSpace, NH2, NButton } from 'naive-ui'
 import { RChart } from '@/components'
 
 import type { RChartType } from '@/components'
@@ -239,13 +239,13 @@ const Echart = defineComponent({
           </ul>
         </NCard>
         <NH2>强制渲染过渡动画（animation），预设 card 风格图表</NH2>
-        <NFlex style={['padding: 18px 0']}>
+        <NSpace style={['padding: 18px 0']}>
           <NButton onClick={this.mountChart.bind(this)}>渲染</NButton>
           <NButton onClick={this.unmountChart.bind(this)}>卸载</NButton>
           <NButton onClick={this.handleUpdateTitle.bind(this)}>
             更新配置项
           </NButton>
-        </NFlex>
+        </NSpace>
         <div class="chart--container">
           <RChart
             title="周销售量"

src/views/demo/iframe/index.tsx

@@ -17,7 +17,7 @@
  * 做了简单的一个组件封装, 希望有用
  */
 
-import { NCard, NFlex } from 'naive-ui'
+import { NCard, NSpace } from 'naive-ui'
 import { RIframe } from '@/components'
 
 const IframeDemo = defineComponent({
@@ -27,7 +27,7 @@ const IframeDemo = defineComponent({
   },
   render() {
     return (
-      <NFlex vertical size={[20, 20]}>
+      <NSpace vertical size={[20, 20]}>
         <NCard title="naive ui（延迟加载）">
           <RIframe
             src="https://www.naiveui.com/zh-CN/dark"
@@ -42,7 +42,7 @@ const IframeDemo = defineComponent({
             lazy={false}
           />
         </NCard>
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/demo/mock-demo/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NFlex, NCard, NButton, NFormItemGi, NInput, NForm } from 'naive-ui'
+import { NSpace, NCard, NButton, NFormItemGi, NInput, NForm } from 'naive-ui'
 import { RCollapseGrid, RTable } from '@/components'
 
 import { useHookPlusRequest } from '@/axios'
@@ -78,7 +78,7 @@ const MockDemo = defineComponent({
         key: 'action',
         render: (row: Person) => {
           return (
-            <NFlex align="center">
+            <NSpace align="center">
               <NButton
                 type="primary"
                 text
@@ -106,7 +106,7 @@ const MockDemo = defineComponent({
               >
                 删除
               </NButton>
-            </NFlex>
+            </NSpace>
           )
         },
       },
@@ -147,7 +147,7 @@ const MockDemo = defineComponent({
   },
   render() {
     return (
-      <NFlex vertical>
+      <NSpace vertical>
         <NCard title="Mock 数据">
           <h2>
             mock
@@ -187,7 +187,7 @@ const MockDemo = defineComponent({
           pagination={this.paginationRef}
           remote
         />
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/demo/modal-demo/index.tsx

@@ -10,7 +10,7 @@
  */
 
 import { RModal } from '@/components'
-import { NButton, NCard, NFlex } from 'naive-ui'
+import { NButton, NCard, NSpace } from 'naive-ui'
 
 export default defineComponent({
   name: 'ModalDemo',
@@ -27,16 +27,16 @@ export default defineComponent({
   },
   render() {
     return (
-      <NFlex vertical>
+      <NSpace vertical>
         <NCard title="props">
-          <NFlex vertical>
+          <NSpace vertical>
             <h3>
               memoryPosition: 是否记住上一次被拖拽的位置，如果设置为
               true，那么下一次打开的时候会自动定位到上一次的位置。
             </h3>
             <h3>fullscreen: 全屏模态框。</h3>
             <h3>dad: 启用拖拽，当配置为 false 时，会禁用拖拽效果。</h3>
-          </NFlex>
+          </NSpace>
         </NCard>
         <RModal
           v-model:show={this.modal1}
@@ -67,13 +67,13 @@ export default defineComponent({
           <NButton onClick={() => (this.modal3 = true)}>对话框模态框</NButton>
         </NCard>
         <NCard title="全屏模态框">
-          <NFlex vertical>
+          <NSpace vertical>
             <h4>
               全屏模态框需要同时设置：fullscreen 为 true，并且 preset 为 card
               时才会生效。
             </h4>
             <NButton onClick={() => (this.modal1 = true)}>打开</NButton>
-          </NFlex>
+          </NSpace>
         </NCard>
         <NCard title="手动设置宽度">
           <h4>
@@ -91,7 +91,7 @@ export default defineComponent({
             所有的宽度配置属性都会注入一个对应的 `css variable`，有时候会用上。
           </h4>
         </NCard>
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/demo/precision/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NLayout, NCard, NDynamicTags, NFlex, NInputNumber } from 'naive-ui'
+import { NLayout, NCard, NDynamicTags, NSpace, NInputNumber } from 'naive-ui'
 
 import { add, subtract, multiply, divide, distribute, format } from '@/utils'
 
@@ -67,7 +67,7 @@ const CalculatePrecision = defineComponent({
           https://currency.js.org/#subtract
         </h3>
 
-        <NFlex vertical>
+        <NSpace vertical>
           <NCard title="加法">
             {{
               default: () => (
@@ -131,7 +131,7 @@ const CalculatePrecision = defineComponent({
           <NCard title="平分一个值">
             {{
               default: () => (
-                <NFlex>
+                <NSpace>
                   <NInputNumber
                     v-model:value={this.distributeValue}
                     onUpdateValue={() => {
@@ -144,14 +144,14 @@ const CalculatePrecision = defineComponent({
                       this.updateDistributeValue()
                     }}
                   />
-                </NFlex>
+                </NSpace>
               ),
               footer: () => {
                 return '结果: ' + this.distributeOutputValue.join(', ')
               },
             }}
           </NCard>
-        </NFlex>
+        </NSpace>
       </NLayout>
     )
   },

src/views/demo/qrcode/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NFlex, NCard, NButton } from 'naive-ui'
+import { NSpace, NCard, NButton } from 'naive-ui'
 import { RQRCode } from '@/components'
 
 import LOGO from '@/assets/images/ray.svg'
@@ -31,7 +31,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <NFlex>
+      <NSpace wrapItem={false}>
         <NCard>
           <h2>
             基于 awesome-qr 进行封装，支持 LOGO、gif、backgroundImage 等属性。
@@ -40,7 +40,7 @@ export default defineComponent({
           <h2>具体使用请参考 props 配置项</h2>
         </NCard>
         <NCard title="基础二维码">
-          <NFlex>
+          <NSpace>
             <RQRCode text="ray template yes" />
             <RQRCode text="ray template yes" logoImage={LOGO} />
             <RQRCode
@@ -49,10 +49,10 @@ export default defineComponent({
               dotScale={0.5}
               colorDark="#64d9d6"
             />
-          </NFlex>
+          </NSpace>
         </NCard>
         <NCard title="状态二维码">
-          <NFlex>
+          <NSpace>
             <RQRCode
               text="ray template yes"
               logoImage={LOGO}
@@ -66,11 +66,11 @@ export default defineComponent({
               logoImage={LOGO}
               status="loading"
             />
-          </NFlex>
+          </NSpace>
         </NCard>
         <NCard title="监听内容变化">
-          <NFlex vertical>
-            <NFlex>
+          <NSpace vertical>
+            <NSpace>
               <NButton
                 onClick={() => {
                   this.qrcodeStatus = 'loading'
@@ -90,8 +90,8 @@ export default defineComponent({
               >
                 下载二维码
               </NButton>
-            </NFlex>
-            <NFlex>
+            </NSpace>
+            <NSpace>
               <RQRCode
                 text={this.qrcodeText}
                 status={this.qrcodeStatus}
@@ -99,10 +99,10 @@ export default defineComponent({
                 ref="rayQRCodeRef"
               />
               当前二维码内容：{this.qrcodeText}
-            </NFlex>
-          </NFlex>
+            </NSpace>
+          </NSpace>
         </NCard>
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/demo/router-demo/router-demo-detail/index.tsx

@@ -9,13 +9,13 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NCard, NFlex } from 'naive-ui'
+import { NCard, NSpace } from 'naive-ui'
 
 const RouterDemoDetail = defineComponent({
   name: 'RouterDemoDetail',
   render() {
     return (
-      <NFlex>
+      <NSpace>
         <NCard title={(this.$route.query.name as string) || 'hello'}>
           你好 {this.$route.query.name}
         </NCard>
@@ -27,7 +27,7 @@ const RouterDemoDetail = defineComponent({
             中，将所需页面配置为 sameLevel 即可。
           </h2>
         </NCard>
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/demo/router-demo/router-demo-home/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NFlex, NButton } from 'naive-ui'
+import { NSpace, NButton } from 'naive-ui'
 import { RTable } from '@/components'
 
 import type { DataTableColumns } from 'naive-ui'
@@ -44,7 +44,7 @@ const RouterDemoHome = defineComponent({
         key: '',
         render: (row) => {
           return (
-            <NFlex align="center">
+            <NSpace align="center">
               <NButton
                 type="info"
                 text
@@ -60,7 +60,7 @@ const RouterDemoHome = defineComponent({
               >
                 详情
               </NButton>
-            </NFlex>
+            </NSpace>
           )
         },
       },
@@ -83,9 +83,9 @@ const RouterDemoHome = defineComponent({
   },
   render() {
     return (
-      <NFlex>
+      <NSpace wrapItem={false}>
         <RTable v-model:columns={this.columns} data={this.dataSource} />
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/demo/svg-icons/index.tsx

@@ -11,7 +11,7 @@
 
 import './index.scss'
 
-import { NFlex, NCard, NPopover } from 'naive-ui'
+import { NSpace, NCard, NPopover } from 'naive-ui'
 import { RIcon } from '@/components'
 
 const PreviewSVGIcons = defineComponent({
@@ -38,7 +38,7 @@ const PreviewSVGIcons = defineComponent({
         {{
           'header-extra': () => '点击图标复制代码',
           default: () => (
-            <NFlex>
+            <NSpace>
               {this.icons.map((curr) => (
                 <div
                   class="pre-view-icons__card"
@@ -55,7 +55,7 @@ const PreviewSVGIcons = defineComponent({
                   </NPopover>
                 </div>
               ))}
-            </NFlex>
+            </NSpace>
           ),
         }}
       </NCard>

src/views/demo/table/index.tsx

@@ -17,7 +17,7 @@ import {
   NInput,
   NDatePicker,
   NSwitch,
-  NFlex,
+  NSpace,
   NPopover,
   NCard,
 } from 'naive-ui'
@@ -74,7 +74,7 @@ const TableView = defineComponent({
         title: 'Action',
         key: 'actions',
         render: (row: RowData) => (
-          <NFlex align="center">
+          <NSpace align="center">
             <NButton size="tiny">查看</NButton>
             <RMoreDropdown
               options={[
@@ -91,7 +91,7 @@ const TableView = defineComponent({
                 window.$message.info(`当前选择: ${key}`)
               }}
             />
-          </NFlex>
+          </NSpace>
         ),
       },
     ]
@@ -155,7 +155,7 @@ const TableView = defineComponent({
   },
   render() {
     return (
-      <NFlex vertical>
+      <NSpace vertical>
         <NCard title="RTable">
           基于 NDataTable 封装，继承该组件所有 props 属性。查看 RTable props
           文件即可查看该组件拓展项
@@ -201,12 +201,12 @@ const TableView = defineComponent({
         <RTable
           scrollX={2000}
           title={
-            <NFlex align="center">
+            <NSpace align="center">
               <span>标题插槽:</span>
               <NSwitch
                 onUpdateValue={(value: boolean) => (this.tableLoading = value)}
               ></NSwitch>
-            </NFlex>
+            </NSpace>
           }
           data={this.tableData}
           v-model:columns={this.actionColumns}
@@ -239,7 +239,7 @@ const TableView = defineComponent({
             tableAction: () => '表格的操作区域内容插槽，有时候可能会用上',
           }}
         </RTable>
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/demo/template-hooks/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { NFlex, NCard, NButton, NInput } from 'naive-ui'
+import { NSpace, NCard, NButton, NInput } from 'naive-ui'
 
 import {
   useAppNavigation,
@@ -79,7 +79,7 @@ export default defineComponent({
     } = this
 
     return (
-      <NFlex vertical>
+      <NSpace vertical>
         <NCard title="接口说明">
           <h3>
             hooks/template 包存放模板专属 hook
@@ -87,29 +87,29 @@ export default defineComponent({
           </h3>
         </NCard>
         <NCard title="useTheme 主题">
-          <NFlex vertical>
+          <NSpace vertical>
             <h3>getAppTheme 获取当前主题色: {getAppTheme().themeLabel}</h3>
-            <NFlex>
+            <NSpace>
               <NButton onClick={() => changeDarkTheme()}>切换暗黑主题</NButton>
               <NButton onClick={() => changeLightTheme()}>切换明亮主题</NButton>
               <NButton onClick={() => toggleTheme()}>切换主题</NButton>
-            </NFlex>
-          </NFlex>
+            </NSpace>
+          </NSpace>
         </NCard>
         <NCard title="useWatermark 水印">
-          <NFlex vertical>
+          <NSpace vertical>
             <NInput
               v-model:value={this.watermark}
               onInput={(val) => {
                 setWatermarkContent(val)
               }}
             />
-            <NFlex>
+            <NSpace>
               <NButton onClick={() => showWatermark()}>显示水印</NButton>
               <NButton onClick={() => hiddenWatermark()}>隐藏水印</NButton>
               <NButton onClick={() => toggleWatermark()}>切换水印</NButton>
-            </NFlex>
-          </NFlex>
+            </NSpace>
+          </NSpace>
         </NCard>
         <NCard title="useSpinning">
           <h3>
@@ -117,7 +117,7 @@ export default defineComponent({
             vue 生命周期）。默认 800ms 延迟。
           </h3>
           <br />
-          <NFlex>
+          <NSpace>
             <NButton
               onClick={() => {
                 reload()
@@ -136,7 +136,7 @@ export default defineComponent({
             >
               触发加载动画（不强制刷新）
             </NButton>
-          </NFlex>
+          </NSpace>
         </NCard>
         <NCard title="useMaximize 内容区域最大化">
           <h3>
@@ -167,7 +167,7 @@ export default defineComponent({
             跳转至多级菜单
           </NButton>
         </NCard>
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/login/components/SSOSigning/index.tsx

@@ -18,7 +18,7 @@
 
 import './index.scss'
 
-import { NFlex, NPopover } from 'naive-ui'
+import { NSpace, NPopover } from 'naive-ui'
 import { RIcon } from '@/components'
 
 interface SSOSigningOptions {
@@ -59,7 +59,7 @@ const SSOSigning = defineComponent({
   },
   render() {
     return (
-      <NFlex class="sso-signing" align="center">
+      <NSpace class="sso-signing" align="center">
         {this.ssoSigningOptions.map((curr) => (
           <NPopover key={curr.key}>
             {{
@@ -75,7 +75,7 @@ const SSOSigning = defineComponent({
             }}
           </NPopover>
         ))}
-      </NFlex>
+      </NSpace>
     )
   },
 })

src/views/login/index.scss

@@ -13,12 +13,26 @@ $positionY: 24px;
       position: relative;
 
       &::before {
-        content: "";
+        content: '';
         position: absolute;
         width: var(--login-height);
         height: 2px;
-        background: linear-gradient(135deg, transparent, transparent 75%, #2080f0, transparent 80%, transparent 100%),
-          linear-gradient(45deg, transparent, transparent 75%, #2080f0, transparent 80%, transparent 100%);
+        background: linear-gradient(
+            135deg,
+            transparent,
+            transparent 75%,
+            #2080f0,
+            transparent 80%,
+            transparent 100%
+          ),
+          linear-gradient(
+            45deg,
+            transparent,
+            transparent 75%,
+            #2080f0,
+            transparent 80%,
+            transparent 100%
+          );
         background-size: 1em 1em;
         background-repeat: repeat-x, repeat-x;
         transform: rotate(90deg);

src/views/login/index.tsx

@@ -1,7 +1,7 @@
 import './index.scss'
 
 import {
-  NFlex,
+  NSpace,
   NCard,
   NTabs,
   NTabPane,
@@ -63,13 +63,13 @@ const Login = defineComponent({
           ]}
         >
           <div class={['login-wrapper__content']}>
-            <NFlex align="center" class="login-title__wrapper">
+            <NSpace align="center" class="login-title__wrapper">
               <RIcon name="ray" size="48" />
               <NGradientText class="login-title" type="info" size={28}>
                 Ray Template
               </NGradientText>
-            </NFlex>
-            <NFlex align="center" class="login-action__wrapper">
+            </NSpace>
+            <NSpace align="center" class="login-action__wrapper">
               <ThemeSwitch />
               <NDropdown
                 options={LOCAL_OPTIONS}
@@ -83,7 +83,7 @@ const Login = defineComponent({
                   cursor="pointer"
                 />
               </NDropdown>
-            </NFlex>
+            </NSpace>
             <NGrid
               cols={'s:1 m:1 l:2 xl:2 2xl:2'}
               itemResponsive={false}
@@ -93,12 +93,12 @@ const Login = defineComponent({
                 span={'s:0 m:0 l:1 xl:1 2xl:1'}
                 class="login__left-wrapper"
               >
-                <NFlex align="center" vertical>
+                <NSpace align="center" vertical>
                   <RIcon name="login_bg" width="368" height="368" />
                   <NGradientText class="login-title" type="info" size={36}>
                     开箱即用的中后台管理系统
                   </NGradientText>
-                </NFlex>
+                </NSpace>
               </NGridItem>
               <NGridItem span={1} class="login__right-wrapper">
                 <NCard
@@ -144,13 +144,13 @@ const Login = defineComponent({
                 </NCard>
               </NGridItem>
             </NGrid>
-            <NFlex
+            <NSpace
               align="center"
               justify="center"
               class="login-copyright__wrapper"
             >
               {this.copyright}
-            </NFlex>
+            </NSpace>
           </div>
         </div>
       </div>