Compare commits

..

3 Commits

Author SHA1 Message Date
青菜白玉汤
510ecfbe8b Merge branch 'example' into example 2025-05-16 13:05:23 +08:00
Zheng-Changfu
38b91d8c6a feat(projects): add pro-naive-ui example 2025-05-16 10:47:38 +08:00
Soybean
7db195e86a Merge branch 'main' into example 2025-05-16 10:25:07 +08:00
10 changed files with 222 additions and 192 deletions

1
pnpm-lock.yaml generated
View File

@@ -6961,7 +6961,6 @@ snapshots:
- vue
'@vicons/antd@0.13.0': {}
'@visactor/vchart-theme@1.12.2(@visactor/vchart@1.13.7)':
dependencies:
'@visactor/vchart': 1.13.7

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue';
import { darkTheme } from 'naive-ui';
import { NConfigProvider, darkTheme } from 'naive-ui';
import type { WatermarkProps } from 'naive-ui';
import { useAppStore } from './store/modules/app';
import { useThemeStore } from './store/modules/theme';
@@ -41,7 +41,7 @@ const watermarkProps = computed<WatermarkProps>(() => {
</script>
<template>
<ProConfigProvider
<NConfigProvider
:theme="naiveDarkTheme"
:theme-overrides="themeStore.naiveTheme"
:locale="naiveLocale"
@@ -52,7 +52,7 @@ const watermarkProps = computed<WatermarkProps>(() => {
<RouterView class="bg-layout" />
<NWatermark v-if="themeStore.watermark.visible" v-bind="watermarkProps" />
</AppProvider>
</ProConfigProvider>
</NConfigProvider>
</template>
<style scoped></style>

View File

@@ -1,6 +1,5 @@
import { dateEnUS, dateZhCN, enUS } from 'naive-ui';
import { dateEnUS, dateZhCN, enUS, zhCN } from 'naive-ui';
import type { NDateLocale, NLocale } from 'naive-ui';
import { zhCN } from 'pro-naive-ui';
export const naiveLocales: Record<App.I18n.LangType, NLocale> = {
'zh-CN': zhCN,

View File

@@ -630,7 +630,7 @@ export const generatedRoutes: GeneratedRoute[] = [
title: 'pro-naive',
i18nKey: 'route.pro-naive',
order: 7,
icon:'material-symbols-light:demography-outline-rounded'
icon: 'material-symbols-light:demography-outline-rounded'
},
children: [
{
@@ -639,7 +639,7 @@ export const generatedRoutes: GeneratedRoute[] = [
meta: {
title: 'pro-naive_form',
i18nKey: 'route.pro-naive_form',
icon:'fluent:form-28-regular'
icon: 'fluent:form-28-regular'
},
children: [
{
@@ -677,7 +677,7 @@ export const generatedRoutes: GeneratedRoute[] = [
meta: {
title: 'pro-naive_table',
i18nKey: 'route.pro-naive_table',
icon:'mynaui:table'
icon: 'mynaui:table'
},
children: [
{

View File

@@ -0,0 +1,17 @@
<script setup lang="tsx">
import { computed } from 'vue';
import { zhCN } from 'pro-naive-ui';
import { useAppStore } from '@/store/modules/app';
const appStore = useAppStore();
const locale = computed(() => {
return appStore.locale === 'zh-CN' ? zhCN : undefined;
});
</script>
<template>
<ProConfigProvider :locale="locale" class="h-full">
<slot></slot>
</ProConfigProvider>
</template>

View File

@@ -1,8 +1,9 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useMessage } from 'naive-ui';
import { createProForm } from 'pro-naive-ui';
import { createProForm, zhCN } from 'pro-naive-ui';
import { $t } from '@/locales';
import ConfigProvider from '../../ConfigProvider.vue';
const submiting = ref(false);
const message = useMessage();
@@ -56,6 +57,7 @@ function fillValues() {
</script>
<template>
<ConfigProvider :locale="zhCN">
<ProForm
:form="form"
:loading="submiting"
@@ -178,4 +180,5 @@ function fillValues() {
</NGrid>
</ProCard>
</ProForm>
</ConfigProvider>
</template>

View File

@@ -4,6 +4,7 @@ import { useMessage } from 'naive-ui';
import type { ProSearchFormColumns } from 'pro-naive-ui';
import { createProSearchForm } from 'pro-naive-ui';
import { $t } from '@/locales';
import ConfigProvider from '../../ConfigProvider.vue';
interface Info {
appName: string;
@@ -85,6 +86,7 @@ function delay(time: number) {
</script>
<template>
<ConfigProvider>
<div class="bg-#fff">
<ProCard :title="$t('page.proNaive.form.query.title1')" :show-collapse="false">
<ProSearchForm :form="form" :loading="loading" :columns="columns" />
@@ -93,4 +95,5 @@ function delay(time: number) {
<ProSearchForm :form="form2" :loading="loading2" :columns="columns2" :collapsed-rows="2" />
</ProCard>
</div>
</ConfigProvider>
</template>

View File

@@ -3,6 +3,7 @@ import { ref } from 'vue';
import { useMessage } from 'naive-ui';
import { createProForm } from 'pro-naive-ui';
import { $t } from '@/locales';
import ConfigProvider from '../../ConfigProvider.vue';
const step = ref(1);
const submiting = ref(false);
@@ -37,6 +38,7 @@ function delay(time: number) {
</script>
<template>
<ConfigProvider>
<div class="color-#fff">
<ProCard :title="$t('page.proNaive.form.step.title')" :segmented="{ content: true }" :show-collapse="false">
<div class="flex flex-col items-center justify-center">
@@ -66,4 +68,5 @@ function delay(time: number) {
</div>
</ProCard>
</div>
</ConfigProvider>
</template>

View File

@@ -10,6 +10,7 @@ import {
useNDataTable
} from 'pro-naive-ui';
import { $t } from '@/locales';
import ConfigProvider from '../../ConfigProvider.vue';
function fetchList(params: any, values: any) {
console.log(params, values);
@@ -123,7 +124,8 @@ const {
</script>
<template>
<div class="flex flex-col">
<ConfigProvider>
<div class="h-full flex flex-col">
<ProCard :title="$t('page.proNaive.table.remote.filterCondition')" class="mb-24px" :show-collapse="false">
<ProSearchForm :form="searchForm" label-placement="left" :columns="searchColumns" v-bind="proSearchFormProps" />
</ProCard>
@@ -136,4 +138,5 @@ const {
v-bind="tableProps"
/>
</div>
</ConfigProvider>
</template>

View File

@@ -4,6 +4,7 @@ import { NButton, NFlex, useMessage } from 'naive-ui';
import type { ProEditDataTableColumns } from 'pro-naive-ui';
import { createProForm } from 'pro-naive-ui';
import { $t } from '@/locales';
import ConfigProvider from '../../ConfigProvider.vue';
interface DataSourceType {
id: string;
@@ -103,6 +104,7 @@ const columns = computed<ProEditDataTableColumns<DataSourceType>>(() => {
</script>
<template>
<ConfigProvider>
<ProForm :form="form" label-placement="left">
<ProConfigProvider
:prop-overrides="{
@@ -132,4 +134,5 @@ const columns = computed<ProEditDataTableColumns<DataSourceType>>(() => {
</ProEditDataTable>
</ProConfigProvider>
</ProForm>
</ConfigProvider>
</template>