feat: add RTL support for subscription page

- Implemented a function to detect RTL languages and updated the Vue component to apply the appropriate class based on the language.
- Enhanced the subscription page styles to support RTL layout, ensuring proper text alignment and direction for Arabic and Persian languages.
This commit is contained in:
Ahmadreza Fatemikia 2026-04-09 19:55:28 +08:00
parent 169b216d7e
commit b634027525
2 changed files with 28 additions and 1 deletions

View file

@ -49,6 +49,11 @@
window.location.href = url; window.location.href = url;
} }
function isRtlLanguage(lang) {
if (!lang) return false;
return ['fa', 'ar'].some(prefix => lang.toLowerCase().startsWith(prefix));
}
function drawQR(value) { function drawQR(value) {
try { try {
new QRious({ element: document.getElementById('qrcode'), value, size: 220 }); new QRious({ element: document.getElementById('qrcode'), value, size: 220 });
@ -113,6 +118,9 @@
if (this._onResize) window.removeEventListener('resize', this._onResize); if (this._onResize) window.removeEventListener('resize', this._onResize);
}, },
computed: { computed: {
isRtl() {
return isRtlLanguage(this.lang || LanguageManager.getLanguage());
},
isMobile() { isMobile() {
return this.viewportWidth < 576; return this.viewportWidth < 576;
}, },

View file

@ -6,6 +6,24 @@
<script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script> <script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
<script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script> <script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
<style> <style>
.subscription-page.rtl {
direction: rtl;
}
.subscription-page.rtl .ant-descriptions-item-label {
text-align: right;
}
.subscription-page.rtl .ant-form-item-label > label {
float: right;
}
/* Keep technical URLs readable regardless of page direction */
.subscription-page.rtl .subscription-link-box {
direction: ltr;
text-align: left;
}
.subscription-page .subscription-link-box { .subscription-page .subscription-link-box {
cursor: pointer; cursor: pointer;
border-radius: 12px; border-radius: 12px;
@ -45,7 +63,8 @@
{{ template "page/head_end" .}} {{ template "page/head_end" .}}
{{ template "page/body_start" .}} {{ template "page/body_start" .}}
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' subscription-page'"> <a-layout id="app" v-cloak :class="[themeSwitcher.currentTheme, 'subscription-page', isRtl ? 'rtl' : 'ltr']"
:dir="isRtl ? 'rtl' : 'ltr'">
<a-layout-content class="p-2"> <a-layout-content class="p-2">
<a-row type="flex" justify="center" class="mt-2"> <a-row type="flex" justify="center" class="mt-2">
<a-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12"> <a-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">