chore: +tailwindcss

package.json

@@ -27,6 +27,11 @@
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-legacy": "^4.0.2",
     "@vitejs/plugin-react": "^3.1.0",
-    "vite": "^4.2.0"
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "vite": "^4.2.0",
+    "vite-plugin-windicss": "^1.9.3",
+    "windicss": "^3.5.6"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/assets/global.css

@@ -1,3 +1,7 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
 .logo {
   float: left;
   height: 36px;
@@ -5,7 +9,7 @@
   background: rgba(255, 255, 255, 0.3);
 }
 
-.reservation-highlight {  
+.reservation-highlight {
   color: rgba(255, 255, 255, 1);
   background-color: rgba(255, 0, 0, 0.6);
 }
@@ -16,4 +20,4 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-}
+}

src/config.js

@@ -38,3 +38,4 @@ export const DATE_PRESETS = [
 	// 去年: [dayjs().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year")],
 ];
 export const arrManager = ["testzp","testzac","testycc","testlyj","testqqs","testjjh","testhn"];//特定账号加修改所属供应商的菜单 zp
+export const BUILD_VERSION = process.env.NODE_ENV === 'production' ? __BUILD_VERSION__ : process.env.NODE_ENV;

src/i18n/LanguageSwitcher.jsx

@@ -19,7 +19,7 @@ const Language = () => {
   /* 🌏🌐 */
   return (
     <Dropdown menu={{ items: langSupports, onClick: handleChangeLanguage, style: { width: 100 }, selectedKeys: selectedKeys }}>
-      <div className='icon'>🌐<span style={{color: '#00b96b'}}>{t(`lang.${i18n.language}`)}</span></div>
+      <div className='icon text-primary'>🌐<span>{t(`lang.${i18n.language}`)}</span></div>
     </Dropdown>
   );
 };

src/views/App.jsx

@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import zhLocale from 'antd/locale/zh_CN';
 import enLocale from 'antd/locale/en_US';
 import 'dayjs/locale/zh-cn';
+import { BUILD_VERSION,  } from '@/config';
 
 const { Header, Content, Footer } = Layout;
 const { Title } = Typography;
@@ -193,7 +194,10 @@ function App() {
 							<Col span={2}>
 								<Dropdown
 									menu={{
-										items,
+										items: [...items,
+                      { type: 'divider' },
+                      { label: <>v{BUILD_VERSION}</>, key: 'BUILD_VERSION' },
+                    ],
 									}}
                   trigger={['click']}
                   >

tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+import colors from 'tailwindcss/colors'
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: 'media',
+  theme: {
+    colors: {
+      ...colors,
+      'primary': '#00b96b',
+    },
+    extend: {},
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false,
+    divideColor: true,
+  },
+}
+

vite.config.js

@@ -1,11 +1,20 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import legacy from "@vitejs/plugin-legacy";
+import WindiCSS from 'vite-plugin-windicss';
+import packageJson from './package.json';
+import dayjs from 'dayjs'
+
+const today = new dayjs().format('YYYY-MM-DD HH:mm:ss')
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    __BUILD_DATE__: JSON.stringify(`${today}`),
+    __BUILD_VERSION__: JSON.stringify(`${packageJson.version}`),
+  },
 	plugins: [
-		react(),
+		react(), WindiCSS(),
 		legacy({
 			targets: ["defaults", "not IE 11"],
 		}),