bug(custom): rtl

.env

@@ -1,16 +1,16 @@
-APP_BASE_URL=
-APP_WEBSOCKET=
-APP_COMPANY_ID=
-APP_PLATFORM=
-APP_CUSTOM_SERVER=
-APP_HOME_PAGE=
-APP_TRACK=
-APP_YOUSHU_TOKEN=
-APP_ID=
-APP_MAP_KEY=
-APP_MAP_NAME=
-APP_IMAGE_CDN=
-APP_DIANWU_URL=
+APP_BASE_URL=https://demo-ecshopx.ishopex.cn/api/h5app/wxapp
+APP_WEBSOCKET=wss://demo-ecshopx.ishopex.cn/ws
+APP_COMPANY_ID=38
+APP_PLATFORM=standard
+APP_CUSTOM_SERVER=https://ecshopx-h5.ex-sandbox.com/
+APP_HOME_PAGE=/pages/index
+APP_TRACK=youshu
+APP_YOUSHU_TOKEN=bi281e87ab2424481a
+APP_ID=wx1e25e45145b70faa
+APP_MAP_KEY=PSPBZ-KQ5CW-CSGRF-ON2S4-K2HQJ-XEBQG
+APP_MAP_NAME=oneX新零售门店定位
+APP_IMAGE_CDN=https://b-img-cdn.yuanyuanke.cn/ecshopx-vshop
+APP_DIANWU_URL=https://demo-ecshopx-dianwu.shopex123.com
 APP_MERCHANT_URL=
 APP_ADAPAY=
 

src/app.js

@@ -32,6 +32,7 @@ import {
   SG_GUIDE_PARAMS_EXPRESSTIME,
   SG_CHECK_STORE_RULE
 } from '@/consts'
+import { updateLang } from '@/store/slices/user'
 import {
   checkAppVersion,
   isWeixin,
@@ -100,7 +101,30 @@ function App({ children }) {
 
   useLaunch((options) => {
     console.log('useLaunch ***********', options)
-    Taro.eventCenter.on('languageChanged', () => {
+
+    // Initialize RTL
+    const lang = Taro.getStorageSync('lang') || 'en'
+    store.dispatch(updateLang(lang))
+    if (isWeb) {
+      document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr'
+      if (lang === 'ar') {
+        document.documentElement.classList.add('rtl-mode')
+      } else {
+        document.documentElement.classList.remove('rtl-mode')
+      }
+    }
+
+    Taro.eventCenter.on('languageChanged', (data) => {
+      const newLang = data?.lang || Taro.getStorageSync('lang')
+      store.dispatch(updateLang(newLang))
+      if (isWeb) {
+        document.documentElement.dir = newLang === 'ar' ? 'rtl' : 'ltr'
+        if (newLang === 'ar') {
+          document.documentElement.classList.add('rtl-mode')
+        } else {
+          document.documentElement.classList.remove('rtl-mode')
+        }
+      }
       getSystemConfig()
     })
     //分包异步加载语言包

src/app.scss

@@ -20,6 +20,7 @@ $at-button-border-color-secondary: $color-border-gray;
 @import './style/sp-comps.scss';
 @import './style/alipay-comps.scss';
 @import './style/global.scss';
+@import './style/rtl.scss';
 
 body,
 view {

src/components/sp-page/index.js

@@ -73,6 +73,7 @@ const SpPage = memo(
     const scrollTopRef = useRef(0)
     const sys = useSelector((state) => state.sys)
     const { lang } = useSelector((state) => state.user)
+    const isRTL = lang === 'ar'
     const [showToTop, setShowToTop] = useState(false)
     const { appName } = sys
     const { themeColor } = useThemsColor()
@@ -445,7 +446,7 @@ const SpPage = memo(
 
     return (
       <View
-        className={classNames('sp-page', props.className)}
+        className={classNames('sp-page', props.className, { 'rtl-layout': isRTL })}
         style={styleNames({ ...state.pageTheme, ...state.lockStyle, ...state.pageBackground })}
         ref={wrapRef}
         key={lang}

src/store/slices/user.js

@@ -96,6 +96,9 @@ const userSlice = createSlice({
       state.location = payload
     },
 
+    updateLang: (state, { payload }) => {
+      state.lang = payload
+    },
     closeAdv: (state, { payload }) => {
       state.showAdv = payload
     },
@@ -138,8 +141,8 @@ export const {
   updateLocation,
   updateCheckChief,
   clearUserInfo,
-  updateIsNewUser
-  // updateLang
+  updateIsNewUser,
+  updateLang
 } = userSlice.actions
 
 export default userSlice.reducer

src/style/_mixins.scss

@@ -255,6 +255,20 @@
       margin: $i + px;
     }
   }
+
+  .rtl-layout,
+  [dir='rtl'] {
+    @for $i from $start through $end {
+      .ml-#{$i} {
+        margin-left: 0;
+        margin-right: $i + px;
+      }
+      .mr-#{$i} {
+        margin-right: 0;
+        margin-left: $i + px;
+      }
+    }
+  }
 }
 
 @mixin generate-padding($start, $end, $step) {
@@ -273,6 +287,20 @@
       padding: $i + px;
     }
   }
+
+  .rtl-layout,
+  [dir='rtl'] {
+    @for $i from $start through $end {
+      .pl-#{$i} {
+        padding-left: 0;
+        padding-right: $i + px;
+      }
+      .pr-#{$i} {
+        padding-right: 0;
+        padding-left: $i + px;
+      }
+    }
+  }
 }
 
 @mixin generate-fontsize($start: 1, $len: 20, $step: 1, $base-size: 14) {

src/style/rtl.scss

@@ -0,0 +1,43 @@
+/**
+ * RTL Support
+ */
+
+.rtl-layout, [dir="rtl"] {
+  direction: rtl;
+  text-align: right;
+
+  .text-left {
+    text-align: right;
+  }
+
+  .text-right {
+    text-align: left;
+  }
+
+  .fl, .float-left, .pull-left {
+    float: right;
+  }
+
+  .fr, .float-right, .pull-right {
+    float: left;
+  }
+
+  // Fix Taro UI icons if needed (example)
+  .at-icon-chevron-right {
+    transform: rotate(180deg);
+  }
+  
+  .at-icon-chevron-left {
+    transform: rotate(180deg);
+  }
+
+  // Common flex alignments
+  .justify-start {
+    justify-content: flex-start; // In RTL, start is right
+  }
+  
+  .justify-end {
+    justify-content: flex-end; // In RTL, end is left
+  }
+}
+