Преглед на файлове

chore: 一些调整和兼容性更新

Jin Mao преди 7 месеца
родител
ревизия
33b7a605c0
променени са 4 файла, в които са добавени 43 реда и са изтрити 37 реда
  1. 2 2
      apps/web-tdesign/.env
  2. 19 2
      apps/web-tdesign/src/adapter/component/index.ts
  3. 5 9
      apps/web-tdesign/src/adapter/form.ts
  4. 17 24
      apps/web-tdesign/src/app.vue

+ 2 - 2
apps/web-tdesign/.env

@@ -1,8 +1,8 @@
 # 应用标题
-VITE_APP_TITLE=Vben Admin Antd
+VITE_APP_TITLE=Vben Admin Tdesign
 
 # 应用命名空间,用于缓存、store等功能的前缀,确保隔离
-VITE_APP_NAMESPACE=vben-web-antd
+VITE_APP_NAMESPACE=vben-web-tdesign
 
 # 对store进行加密的密钥,在将store持久化到localStorage时会使用该密钥进行加密
 VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key

+ 19 - 2
apps/web-tdesign/src/adapter/component/index.ts

@@ -9,6 +9,7 @@ import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { notification } from 'ant-design-vue';
+
 /**
  * 通用组件共同的使用的基础组件,原先放在 adapter/form 内部,限制了使用范围,这里提取出来,方便其他地方使用
  * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
@@ -178,11 +179,27 @@ async function initComponentAdapter() {
     // Mentions: withDefaultPlaceholder(Mentions, 'input'),
     // 自定义主要按钮
     PrimaryButton: (props, { attrs, slots }) => {
-      return h(Button, { ...props, attrs, theme: 'primary' }, slots);
+      let ghost = false;
+      let variant = props.variant;
+      if (props.variant === 'ghost') {
+        ghost = true;
+        variant = 'base';
+      }
+      return h(
+        Button,
+        { ...props, ghost, variant, attrs, theme: 'default' },
+        slots,
+      );
     },
     Radio,
     RadioGroup,
-    RangePicker,
+    RangePicker: (props, { attrs, slots }) => {
+      return h(
+        RangePicker,
+        { ...props, modelValue: props.modelValue ?? [], attrs },
+        slots,
+      );
+    },
     Rate,
     Select: withDefaultPlaceholder(Select, 'select'),
     Space,

+ 5 - 9
apps/web-tdesign/src/adapter/form.ts

@@ -1,17 +1,13 @@
-import type {
-  VbenFormSchema as FormSchema,
-  VbenFormProps,
-} from '@vben/common-ui';
+import type { VbenFormProps, VbenFormSchema as FormSchema } from "@vben/common-ui";
+import { setupVbenForm, useVbenForm as useForm, z } from "@vben/common-ui";
 
-import type { ComponentType } from './component';
-
-import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
-import { $t } from '@vben/locales';
+import type { ComponentType } from "./component";
+import { $t } from "@vben/locales";
 
 async function initSetupVbenForm() {
   setupVbenForm<ComponentType>({
     config: {
-      // ant design vue组件库默认都是 v-model:value
+      // tdesign组件库默认都是 v-model:value
       baseModelPropName: 'value',
 
       // 一些组件是 v-model:checked 或者 v-model:fileList

+ 17 - 24
apps/web-tdesign/src/app.vue

@@ -1,39 +1,32 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { onMounted } from "vue";
 
-import { useAntdDesignTokens } from '@vben/hooks';
-import { preferences, usePreferences } from '@vben/preferences';
+import { usePreferences } from "@vben/preferences";
+import { merge } from "@vben/utils";
 
-import { App, ConfigProvider, theme } from 'ant-design-vue';
-
-import { antdLocale } from '#/locales';
+import { ConfigProvider } from "tdesign-vue-next";
+import zhConfig from "tdesign-vue-next/es/locale/zh_CN";
 
 defineOptions({ name: 'App' });
-
 const { isDark } = usePreferences();
-const { tokens } = useAntdDesignTokens();
 
-const tokenTheme = computed(() => {
-  const algorithm = isDark.value
-    ? [theme.darkAlgorithm]
-    : [theme.defaultAlgorithm];
-
-  // antd 紧凑模式算法
-  if (preferences.app.compact) {
-    algorithm.push(theme.compactAlgorithm);
-  }
+onMounted(() => {
+  document.documentElement.setAttribute(
+    'theme-mode',
+    isDark.value ? 'dark' : '',
+  );
+});
 
-  return {
-    algorithm,
-    token: tokens,
-  };
+const globalConfig = merge(zhConfig, {
+  // 可以在此处定义更多自定义配置,具体可配置内容参看 API 文档
+  calendar: {},
+  table: {},
+  pagination: {},
 });
 </script>
 
 <template>
-  <ConfigProvider :locale="antdLocale" :theme="tokenTheme">
-    <App>
+  <ConfigProvider :global-config="globalConfig">
       <RouterView />
-    </App>
   </ConfigProvider>
 </template>