blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-06 03:57:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
XiaoDaiGua-Ray 2024-01-12 21:55:26 +08:00
parent 79056e8846
commit 8c1e215013
32 changed files with 208 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

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

11
src/app-components/app/AppAvatar/index.tsx
View File

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

6
src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
View File

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

6
src/app-components/app/RayLink/index.tsx
View File

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

6
src/components/RCollapseGrid/src/index.tsx
View File

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

6
src/components/RTable/src/Table.tsx
View File

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

6
src/components/RTable/src/components/C.tsx
View File

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

36
src/directives/README_DIR.md
View File

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

15
src/layout/components/MenuTag/index.tsx
View File

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

18
src/layout/components/SiderBar/components/GlobalSearch/index.tsx
View File

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

6
src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
View File

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

6
src/layout/components/SiderBar/components/SettingDrawer/index.tsx
View File

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

14
src/layout/components/SiderBar/index.tsx
View File

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

6
src/layout/default/HeaderWrapper/index.tsx
View File

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

22
src/views/dashboard/index.tsx
View File

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

22
src/views/demo/axios/index.tsx
View File

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

10
src/views/demo/context-menu/index.tsx
View File

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

26
src/views/demo/directive/index.tsx
View File

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

6
src/views/demo/echart/index.tsx
View File

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

6
src/views/demo/iframe/index.tsx
View File

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

10
src/views/demo/mock-demo/index.tsx
View File

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

14
src/views/demo/modal-demo/index.tsx
View File

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

10
src/views/demo/precision/index.tsx
View File

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

26
src/views/demo/qrcode/index.tsx
View File

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

6
src/views/demo/router-demo/router-demo-detail/index.tsx
View File

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

10
src/views/demo/router-demo/router-demo-home/index.tsx
View File

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

6
src/views/demo/svg-icons/index.tsx
View File

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

14
src/views/demo/table/index.tsx
View File

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

26
src/views/demo/template-hooks/index.tsx
View File

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

6
src/views/login/components/SSOSigning/index.tsx
View File

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

20
src/views/login/index.scss
View File

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

18
src/views/login/index.tsx
View File

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