Merge branch 'example' into example

pnpm-lock.yaml

@@ -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

src/App.vue

@@ -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>

src/locales/naive.ts

@@ -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,

src/router/elegant/routes.ts

@@ -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: [
           {

src/views/pro-naive/ConfigProvider.vue

@@ -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>

src/views/pro-naive/form/basic/index.vue

@@ -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,126 +57,128 @@ function fillValues() {
 </script>
 
 <template>
-  <ProForm
-    :form="form"
-    :loading="submiting"
-    :rules="{
-      appName: {
-        required: true
-      }
-    }"
-  >
-    <ProCard :title="$t('page.proNaive.form.basic.title')" :show-collapse="false">
-      <template #header-extra>
-        <NFlex>
-          <NButton @click="fillValues">{{ $t('page.proNaive.form.basic.fillValue') }}</NButton>
-          <NButton attr-type="reset">{{ $t('page.proNaive.form.basic.reset') }}</NButton>
-          <NButton type="primary" attr-type="submit" :loading="submiting">
-            {{ $t('page.proNaive.form.basic.submit') }}
-          </NButton>
-        </NFlex>
-      </template>
-      <NGrid cols="1 s:2 l:3" :x-gap="16" responsive="screen">
-        <NGi>
-          <ProInput
-            :title="$t('page.proNaive.form.basic.appName')"
-            :tooltip="$t('page.proNaive.form.basic.appName')"
-            path="appName"
-          />
-        </NGi>
-        <NGi>
-          <ProSelect
-            :title="$t('page.proNaive.form.basic.appStatus')"
-            path="appStatus"
-            :field-props="{
-              options: [
-                { label: $t('page.proNaive.form.basic.normal'), value: 0 },
-                { label: $t('page.proNaive.form.basic.anomaly'), value: 1 }
-              ]
-            }"
-          />
-        </NGi>
-        <NGi>
-          <ProDate :title="$t('page.proNaive.form.basic.createTime')" path="createTime" />
-        </NGi>
-        <NGi>
-          <ProDate :title="$t('page.proNaive.form.basic.responseDate')" path="responseDate" required />
-        </NGi>
-        <NGi :span="3">
-          <ProFormList
-            :title="$t('page.proNaive.form.basic.specificationInfo')"
-            path="attributes"
-            :min="1"
-            :creator-initial-value="
-              () => ({
-                name: $t('page.proNaive.form.basic.color'),
-                items: [
-                  { name: $t('page.proNaive.form.basic.specificationColorRed') },
-                  { name: $t('page.proNaive.form.basic.specificationColorOrange') }
-                ]
-              })
-            "
-            :copy-button-props="false"
-            :creator-button-props="{
-              content: $t('page.proNaive.form.basic.addSpecificateItem')
-            }"
-          >
-            <template #item="{ index, itemDom, actionDom }">
-              <NCard
-                size="small"
-                embedded
-                :title="`${$t('page.proNaive.form.basic.specificate')}${index + 1}`"
-                class="mb-8px"
-              >
-                <template #header-extra>
-                  <component :is="actionDom" />
-                </template>
-                <component :is="itemDom" />
-              </NCard>
-            </template>
+  <ConfigProvider :locale="zhCN">
+    <ProForm
+      :form="form"
+      :loading="submiting"
+      :rules="{
+        appName: {
+          required: true
+        }
+      }"
+    >
+      <ProCard :title="$t('page.proNaive.form.basic.title')" :show-collapse="false">
+        <template #header-extra>
+          <NFlex>
+            <NButton @click="fillValues">{{ $t('page.proNaive.form.basic.fillValue') }}</NButton>
+            <NButton attr-type="reset">{{ $t('page.proNaive.form.basic.reset') }}</NButton>
+            <NButton type="primary" attr-type="submit" :loading="submiting">
+              {{ $t('page.proNaive.form.basic.submit') }}
+            </NButton>
+          </NFlex>
+        </template>
+        <NGrid cols="1 s:2 l:3" :x-gap="16" responsive="screen">
+          <NGi>
             <ProInput
-              :title="$t('page.proNaive.form.basic.specificationName')"
-              path="name"
+              :title="$t('page.proNaive.form.basic.appName')"
+              :tooltip="$t('page.proNaive.form.basic.appName')"
+              path="appName"
+            />
+          </NGi>
+          <NGi>
+            <ProSelect
+              :title="$t('page.proNaive.form.basic.appStatus')"
+              path="appStatus"
               :field-props="{
-                class: 'w-230px!'
+                options: [
+                  { label: $t('page.proNaive.form.basic.normal'), value: 0 },
+                  { label: $t('page.proNaive.form.basic.anomaly'), value: 1 }
+                ]
               }"
             />
+          </NGi>
+          <NGi>
+            <ProDate :title="$t('page.proNaive.form.basic.createTime')" path="createTime" />
+          </NGi>
+          <NGi>
+            <ProDate :title="$t('page.proNaive.form.basic.responseDate')" path="responseDate" required />
+          </NGi>
+          <NGi :span="3">
             <ProFormList
-              :title="$t('page.proNaive.form.basic.specificationValue')"
-              path="items"
+              :title="$t('page.proNaive.form.basic.specificationInfo')"
+              path="attributes"
               :min="1"
-              :creator-button-props="{
-                dashed: false,
-                block: false,
-                renderIcon: undefined,
-                ghost: true,
-                text: true,
-                type: 'info',
-                content: $t('page.proNaive.form.basic.add')
-              }"
+              :creator-initial-value="
+                () => ({
+                  name: $t('page.proNaive.form.basic.color'),
+                  items: [
+                    { name: $t('page.proNaive.form.basic.specificationColorRed') },
+                    { name: $t('page.proNaive.form.basic.specificationColorOrange') }
+                  ]
+                })
+              "
               :copy-button-props="false"
-              :remove-button-props="{
-                tooltip: $t('page.proNaive.form.basic.delete')
+              :creator-button-props="{
+                content: $t('page.proNaive.form.basic.addSpecificateItem')
               }"
             >
-              <template #item="{ itemDom, actionDom }">
-                <div class="me-25px inline-flex">
-                  <component :is="itemDom" />
-                  <div class="ml-8px">
+              <template #item="{ index, itemDom, actionDom }">
+                <NCard
+                  size="small"
+                  embedded
+                  :title="`${$t('page.proNaive.form.basic.specificate')}${index + 1}`"
+                  class="mb-8px"
+                >
+                  <template #header-extra>
                     <component :is="actionDom" />
-                  </div>
-                </div>
+                  </template>
+                  <component :is="itemDom" />
+                </NCard>
               </template>
               <ProInput
+                :title="$t('page.proNaive.form.basic.specificationName')"
                 path="name"
                 :field-props="{
-                  class: 'w-104px!'
+                  class: 'w-230px!'
                 }"
               />
+              <ProFormList
+                :title="$t('page.proNaive.form.basic.specificationValue')"
+                path="items"
+                :min="1"
+                :creator-button-props="{
+                  dashed: false,
+                  block: false,
+                  renderIcon: undefined,
+                  ghost: true,
+                  text: true,
+                  type: 'info',
+                  content: $t('page.proNaive.form.basic.add')
+                }"
+                :copy-button-props="false"
+                :remove-button-props="{
+                  tooltip: $t('page.proNaive.form.basic.delete')
+                }"
+              >
+                <template #item="{ itemDom, actionDom }">
+                  <div class="me-25px inline-flex">
+                    <component :is="itemDom" />
+                    <div class="ml-8px">
+                      <component :is="actionDom" />
+                    </div>
+                  </div>
+                </template>
+                <ProInput
+                  path="name"
+                  :field-props="{
+                    class: 'w-104px!'
+                  }"
+                />
+              </ProFormList>
             </ProFormList>
-          </ProFormList>
-        </NGi>
-      </NGrid>
-    </ProCard>
-  </ProForm>
+          </NGi>
+        </NGrid>
+      </ProCard>
+    </ProForm>
+  </ConfigProvider>
 </template>

src/views/pro-naive/form/query/index.vue

@@ -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,12 +86,14 @@ function delay(time: number) {
 </script>
 
 <template>
-  <div class="bg-#fff">
-    <ProCard :title="$t('page.proNaive.form.query.title1')" :show-collapse="false">
-      <ProSearchForm :form="form" :loading="loading" :columns="columns" />
-    </ProCard>
-    <ProCard class="mt-12px" :title="$t('page.proNaive.form.query.title2')" :show-collapse="false">
-      <ProSearchForm :form="form2" :loading="loading2" :columns="columns2" :collapsed-rows="2" />
-    </ProCard>
-  </div>
+  <ConfigProvider>
+    <div class="bg-#fff">
+      <ProCard :title="$t('page.proNaive.form.query.title1')" :show-collapse="false">
+        <ProSearchForm :form="form" :loading="loading" :columns="columns" />
+      </ProCard>
+      <ProCard class="mt-12px" :title="$t('page.proNaive.form.query.title2')" :show-collapse="false">
+        <ProSearchForm :form="form2" :loading="loading2" :columns="columns2" :collapsed-rows="2" />
+      </ProCard>
+    </div>
+  </ConfigProvider>
 </template>

src/views/pro-naive/form/step/index.vue

@@ -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,33 +38,35 @@ function delay(time: number) {
 </script>
 
 <template>
-  <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">
-        <NSteps :current="step" class="mb-50px ml-200px w-60%">
-          <NStep :title="$t('page.proNaive.form.step.step1.title')" />
-          <NStep :title="$t('page.proNaive.form.step.step2.title')" />
-        </NSteps>
-        <template v-if="step === 1">
-          <ProForm :form="form" label-placement="left">
-            <ProInput :title="$t('page.proNaive.form.step.step1.field')" path="form1Field" required />
-            <NButton @click="toNextStepAfterValidated">{{ $t('page.proNaive.form.step.step1.nextStep') }}</NButton>
-          </ProForm>
-        </template>
-        <template v-if="step === 2">
-          <ProForm :form="form2" :loading="submiting" label-placement="left">
-            <ProInput :title="$t('page.proNaive.form.step.step2.field')" path="form2Field" required />
-            <NFlex>
-              <NButton :disabled="submiting" @click="step -= 1">
-                {{ $t('page.proNaive.form.step.step2.prevStep') }}
-              </NButton>
-              <NButton type="primary" attr-type="submit" :loading="submiting">
-                {{ $t('page.proNaive.form.step.step2.submit') }}
-              </NButton>
-            </NFlex>
-          </ProForm>
-        </template>
-      </div>
-    </ProCard>
-  </div>
+  <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">
+          <NSteps :current="step" class="mb-50px ml-200px w-60%">
+            <NStep :title="$t('page.proNaive.form.step.step1.title')" />
+            <NStep :title="$t('page.proNaive.form.step.step2.title')" />
+          </NSteps>
+          <template v-if="step === 1">
+            <ProForm :form="form" label-placement="left">
+              <ProInput :title="$t('page.proNaive.form.step.step1.field')" path="form1Field" required />
+              <NButton @click="toNextStepAfterValidated">{{ $t('page.proNaive.form.step.step1.nextStep') }}</NButton>
+            </ProForm>
+          </template>
+          <template v-if="step === 2">
+            <ProForm :form="form2" :loading="submiting" label-placement="left">
+              <ProInput :title="$t('page.proNaive.form.step.step2.field')" path="form2Field" required />
+              <NFlex>
+                <NButton :disabled="submiting" @click="step -= 1">
+                  {{ $t('page.proNaive.form.step.step2.prevStep') }}
+                </NButton>
+                <NButton type="primary" attr-type="submit" :loading="submiting">
+                  {{ $t('page.proNaive.form.step.step2.submit') }}
+                </NButton>
+              </NFlex>
+            </ProForm>
+          </template>
+        </div>
+      </ProCard>
+    </div>
+  </ConfigProvider>
 </template>

src/views/pro-naive/table/remote/index.vue

@@ -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,17 +124,19 @@ const {
 </script>
 
 <template>
-  <div class="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>
-    <ProDataTable
-      :title="$t('page.proNaive.table.remote.title')"
-      size="small"
-      flex-height
-      :columns="columns"
-      row-key="no"
-      v-bind="tableProps"
-    />
-  </div>
+  <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>
+      <ProDataTable
+        :title="$t('page.proNaive.table.remote.title')"
+        size="small"
+        flex-height
+        :columns="columns"
+        row-key="no"
+        v-bind="tableProps"
+      />
+    </div>
+  </ConfigProvider>
 </template>

src/views/pro-naive/table/row-edit/index.vue

@@ -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,33 +104,35 @@ const columns = computed<ProEditDataTableColumns<DataSourceType>>(() => {
 </script>
 
 <template>
-  <ProForm :form="form" label-placement="left">
-    <ProConfigProvider
-      :prop-overrides="{
-        ProFormItem: {
-          showFeedback: false
-        }
-      }"
-    >
-      <ProEditDataTable
-        v-model:editable-keys="editableKeys"
-        path="list"
-        :columns="columns"
-        :record-creator-props="{
-          record: () => ({ id: Date.now() })
-        }"
-        row-key="id"
-        :field-props="{
-          title: $t('page.proNaive.table.rowEdit.title')
+  <ConfigProvider>
+    <ProForm :form="form" label-placement="left">
+      <ProConfigProvider
+        :prop-overrides="{
+          ProFormItem: {
+            showFeedback: false
+          }
         }"
       >
-        <template #toolbar>
-          <NFlex>
-            <NButton attr-type="reset">{{ $t('page.proNaive.table.rowEdit.reset') }}</NButton>
-            <NButton type="primary" attr-type="submit">{{ $t('page.proNaive.table.rowEdit.submit') }}</NButton>
-          </NFlex>
-        </template>
-      </ProEditDataTable>
-    </ProConfigProvider>
-  </ProForm>
+        <ProEditDataTable
+          v-model:editable-keys="editableKeys"
+          path="list"
+          :columns="columns"
+          :record-creator-props="{
+            record: () => ({ id: Date.now() })
+          }"
+          row-key="id"
+          :field-props="{
+            title: $t('page.proNaive.table.rowEdit.title')
+          }"
+        >
+          <template #toolbar>
+            <NFlex>
+              <NButton attr-type="reset">{{ $t('page.proNaive.table.rowEdit.reset') }}</NButton>
+              <NButton type="primary" attr-type="submit">{{ $t('page.proNaive.table.rowEdit.submit') }}</NButton>
+            </NFlex>
+          </template>
+        </ProEditDataTable>
+      </ProConfigProvider>
+    </ProForm>
+  </ConfigProvider>
 </template>