feat: 支持tsx组件

package.json

@@ -53,6 +53,7 @@
     "@typescript-eslint/parser": "^7.10.0",
     "@uni-helper/vite-plugin-uni-layouts": "^0.1.10",
     "@uni-helper/vite-plugin-uni-pages": "^0.2.23",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/runtime-core": "^3.4.27",
     "@vue/tsconfig": "^0.5.1",
     "commitlint": "^19.3.0",

pnpm-lock.yaml

@@ -96,6 +96,9 @@ importers:
       '@uni-helper/vite-plugin-uni-pages':
         specifier: ^0.2.23
         version: 0.2.23(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^4.0.0
+        version: 4.0.0(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       '@vue/runtime-core':
         specifier: ^3.4.27
         version: 3.4.27
@@ -1648,6 +1651,13 @@ packages:
       vite: ^4.0.0 || ^5.0.0
       vue: ^3.0.0
 
+  '@vitejs/plugin-vue-jsx@4.0.0':
+    resolution: {integrity: sha512-A+6wL2AdQhDsLsDnY+2v4rRDI1HLJGIMc97a8FURO9tqKsH5QvjWrzsa5DH3NlZsM742W2wODl2fF+bfcTWtXw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0
+      vue: ^3.0.0
+
   '@vitejs/plugin-vue@5.0.5':
     resolution: {integrity: sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -7522,6 +7532,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitejs/plugin-vue-jsx@4.0.0(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      '@babel/core': 7.24.7
+      '@babel/plugin-transform-typescript': 7.24.7(@babel/core@7.24.7)
+      '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.7)
+      vite: 5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.0)
+      vue: 3.4.27(typescript@5.4.5)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitejs/plugin-vue@5.0.5(vite@5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       vite: 5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.0)

src/components/MCard/index.tsx

@@ -0,0 +1,90 @@
+/*
+ * @Author: wjc
+ * @Date: 2024-07-12 10:46:19
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-07-12 15:02:10
+ * @Description:
+ */
+import { Fragment } from 'vue'
+import './styles.scss'
+
+export default defineComponent({
+  name: 'MCard',
+  props: {
+    bgColor: {
+      type: String,
+      default: 'var(--bg-card)',
+    },
+    rounded: {
+      type: Boolean,
+      default: true,
+    },
+    padding: {
+      type: Number,
+      default: 16,
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    spacer: {
+      type: Boolean,
+      default: true,
+    },
+    space: {
+      type: Boolean,
+      default: true,
+    },
+    justify: {
+      type: String as PropType<'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'>,
+      default: 'start',
+    },
+    direction: {
+      type: String as PropType<'vertical' | 'horizontal'>,
+      default: 'vertical',
+    },
+    align: {
+      type: String,
+      default: 'center',
+    },
+  },
+  setup(props, { slots }) {
+    const spaceClass = computed(() => {
+      if (props.space) {
+        let cls = `flex gap-8px items-${props.align}`
+        if (props.direction === 'vertical') {
+          cls = cls + ' flex-col'
+        }
+        if (props.justify) {
+          cls = cls + ` justify-${props.justify}`
+        }
+        return cls
+      } else {
+        return ''
+      }
+    })
+    return {
+      spaceClass,
+    }
+  },
+  render() {
+    const { spaceClass, rounded, padding, bgColor, spacer } = this
+    const children = this.$slots.default()
+
+    return (
+      <view
+        class={[`${rounded ? 'm-card rounded-12px' : 'm-card'}`, spaceClass]}
+        style={{ padding: `${padding}px`, background: `${bgColor}` }}
+      >
+        {children.map((child, i, arr) => {
+          return (
+            <>
+              <view class={['m-card-item']}>{child}</view>
+              {i % 2 === 0 && spacer ? <view class="m-card-spacer"></view> : null}
+            </>
+          )
+        })}
+      </view>
+    )
+  },
+})

src/components/MCard/index.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: wjc
+ * @Date: 2024-07-02 15:13:49
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-07-12 11:13:57
+ * @Description: 
+-->
 <template>
   <view
     class="m-card"

src/components/MCard/styles.scss

@@ -0,0 +1,10 @@
+.m-card {
+  @apply my-12px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 20%);
+  .m-card-item {
+    @apply w-full;
+  }
+  .m-card-spacer {
+    @apply h-1px w-full bg-border-1 my-4px;
+  }
+}

src/components/MTabBar/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-07-08 16:31:21
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-10 15:18:29
+ * @LastEditTime: 2024-07-12 11:41:28
  * @Description: 
 -->
 <template>
@@ -53,7 +53,7 @@
     @apply h-50px;
     :deep(.u-tabbar__content) {
       @apply bg-bg-card;
-      border-color: var(--border-color) !important;
+      border-color: var(--border-color-1) !important;
     }
     .tabbar-icon {
       @apply wh-32px;

src/locale/index.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-07-11 20:29:20
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-12 10:13:36
+ * @LastEditTime: 2024-07-12 10:36:18
  * @Description:
  */
 import { createI18n } from 'vue-i18n'
@@ -22,9 +22,6 @@ const i18n = createI18n({
   messages,
 })
 
-console.log(uni.getLocale())
-console.log(i18n.global.locale)
-
 /**
  * 可以拿到原始的语言模板，非 vue 文件使用这个方法，
  * @param { string } key 多语言的key，eg: "app.name"

src/pages/mine/index.vue

@@ -2,17 +2,34 @@
  * @Author: wjc
  * @Date: 2024-06-17 16:02:59
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-12 09:52:48
+ * @LastEditTime: 2024-07-12 15:34:48
  * @Description: 
 -->
 <template>
   <MCard>
     <view>{{ userStore.userInfo.name }}</view>
   </MCard>
-  <MCard :space="true" direction="horizontal" justify="between">
-    <view>深色模式</view>
-    <up-switch v-model="appStore.isDark"></up-switch>
-  </MCard>
+  <MMCard :space="true" direction="vertical">
+    <view class="flex justify-between">
+      <view>深色模式</view>
+      <up-switch v-model="appStore.isDark"></up-switch>
+    </view>
+    <view class="flex justify-between">
+      <view>语言</view>
+      <view class="flex-1 text-right" @click="() => (showLang = true)">
+        <view>
+          {{ appStore.langs.find((item) => item.value === appStore.lang).label }}
+        </view>
+        <up-picker
+          :show="showLang"
+          :columns="langs"
+          key-name="label"
+          @cancel="cancel"
+          @confirm="confirm"
+        ></up-picker>
+      </view>
+    </view>
+  </MMCard>
   <MCard :space="true" direction="horizontal" justify="between">
     <view>语言</view>
     <view class="flex-1 text-right" @click="() => (showLang = true)">
@@ -45,6 +62,7 @@
   import { onLaunch } from '@dcloudio/uni-app'
   import { useUserStore } from '@/stores/modules/userStore'
   import { useAppStore } from '@/stores/modules/appStore'
+  import MMCard from '@/components/MCard/index'
 
   defineOptions({ name: 'Mine' })
 

src/static/styles/vars.scss

@@ -12,7 +12,7 @@
   --bg-page: #f1f1f3;
   --bg-card: #fff;
 
-  --border-color: #e3e8f7;
+  --border-color-1: #e3e8f7;
 }
 
 .dark {
@@ -21,7 +21,7 @@
   --bg-page: #242424;
   --bg-card: #1a1a1a;
 
-  --border-color: rgba(84, 84, 84, 0.48);
+  --border-color-1: rgba(84, 84, 84, 0.48);
 
   --text-color-1: rgba(255, 255, 255, 0.87);
 }

tsconfig.json

@@ -2,6 +2,9 @@
   "compilerOptions": {
     "composite": true,
     "skipLibCheck": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
     "module": "ESNext",
     "moduleResolution": "Node",
     "resolveJsonModule": true,
@@ -27,7 +30,8 @@
     "vite.config.ts",
     "types/components.d.ts",
     "package.json",
-    "manifest.json"
+    "manifest.json",
+    "build/**/*.ts"
   ],
   "exclude": ["node_modules", "tests/server/**/*.ts", "dist", "**/*.js"]
 }

types/shims-uni.d.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-05 15:57:41
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-12 10:33:30
+ * @LastEditTime: 2024-07-12 10:42:01
  * @Description:
  */
 /// <reference types='@dcloudio/types' />
@@ -12,6 +12,6 @@ import { formatI18n } from '@/locale'
 declare module '@vue/runtime-core' {
   type Hooks = App.AppInstance & Page.PageInstance
   interface ComponentCustomOptions extends Hooks {
-    $$t: typeof formatI18n
+    $$t?: typeof formatI18n
   }
 }

uno.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2023-05-07 20:59:28
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-09 17:46:51
+ * @LastEditTime: 2024-07-12 11:41:00
  * @Description:
  */
 import {
@@ -95,6 +95,9 @@ export default defineConfig({
         overlay: 'var(--bg-overlay)',
         primary: 'var(--color-primary)',
       },
+      border: {
+        1: 'var(--border-color-1)',
+      },
     },
   },
 })

vite.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-05-27 10:17:11
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-11 11:49:11
+ * @LastEditTime: 2024-07-12 11:27:53
  * @Description:
  */
 import path from 'node:path'
@@ -12,6 +12,7 @@ import uni from '@dcloudio/vite-plugin-uni'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 
 import UniLayouts from '@uni-helper/vite-plugin-uni-layouts'
 // import UniPages from '@uni-helper/vite-plugin-uni-pages'
@@ -49,6 +50,7 @@ export default defineConfig(({ mode }) => {
       //自动注册页面全局组件
       UniProvider(),
       UnoCSS(),
+      vueJsx(),
       // 仅支持 H5
       createSvgIconsPlugin({
         iconDirs: [pathResolve('src/static/icons')],