Code refactoring (#2739)

* refactor: switching to the use of typed props * refactor: `password-input` -> `a-password-input` * fix: qr modal copy error
2026-03-20 01:25:49 +00:00 · 2025-03-08 22:41:27 +07:00
parent c6d27a4463
commit 697cd5e6d9
13 changed files with 136 additions and 66 deletions
--- a/web/html/xui/component/password.html
+++ b/web/html/xui/component/password.html
@@ -1,26 +1,46 @@
 {{define "component/passwordInput"}}
 <template>
-    <a-input :value="value" :type="showPassword ? 'text' : 'password'"
-             :placeholder="placeholder"
-             :autocomplete="autocomplete"
-             :name="name"
-             @input="$emit('input', $event.target.value)">
-        <template v-if="icon" #prefix>
-            <a-icon :type="icon" style="font-size: 16px;" />
-        </template>
-        <template #addonAfter>
-            <a-icon :type="showPassword ? 'eye-invisible' : 'eye'"
-                    @click="toggleShowPassword"
-                    style="font-size: 16px;" />
-        </template>
-    </a-input>
+  <a-input :value="value" :type="showPassword ? 'text' : 'password'" :placeholder="placeholder"
+    :autocomplete="autocomplete" :name="name" @input="$emit('input', $event.target.value)">
+    <template v-if="icon" #prefix>
+      <a-icon :type="icon" style="font-size: 16px;" />
+    </template>
+    <template #addonAfter>
+      <a-icon :type="showPassword ? 'eye-invisible' : 'eye'" @click="toggleShowPassword" style="font-size: 16px;" />
+    </template>
+  </a-input>
 </template>
 {{end}}

 {{define "component/password"}}
 <script>
-  Vue.component('password-input', {
-    props: ["title", "value", "placeholder", "icon", "autocomplete", "name"],
+  Vue.component('a-password-input', {
+    props: {
+      'title': {
+        type: String,
+        required: false,
+      },
+      'value': {
+        type: String,
+        required: false,
+      },
+      'placeholder': {
+        type: String,
+        required: false,
+      },
+      'autocomplete': {
+        type: String,
+        required: false,
+      },
+      'name': {
+        type: String,
+        required: false,
+      },
+      'icon': {
+        type: undefined,
+        required: false
+      }
+    },
    template: `{{template "component/passwordInput"}}`,
    data() {
      return {
--- a/web/html/xui/component/persianDatepicker.html
+++ b/web/html/xui/component/persianDatepicker.html
@@ -2,10 +2,10 @@
 <template>
    <div>
        <a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
-                 @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
-                 :placeholder="placeholder">
+            @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
+            :placeholder="placeholder">
            <template #addonAfter>
-                <a-icon type="calendar" style="font-size: 14px; opacity: 0.5;"/>
+                <a-icon type="calendar" style="font-size: 14px; opacity: 0.5;" />
            </template>
        </a-input>
    </div>
@@ -13,15 +13,27 @@
 {{end}}

 {{define "component/persianDatepicker"}}
-<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}"/>
+<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}" />
 <script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js?{{ .cur_ver }}"></script>
 <script>
-
    const persianDatepicker = {};

-    Vue.component('persian-datepicker', {
-        props: ['placeholder', 'format', 'value'],
+    Vue.component('a-persian-datepicker', {
+        props: {
+            'format': {
+                type: undefined,
+                required: false,
+            },
+            'value': {
+                type: String,
+                required: false,
+            },
+            'placeholder': {
+                type: String,
+                required: false,
+            },
+        },
        template: `{{template "component/persianDatepickerTemplate"}}`,
        data() {
            return {
@@ -57,4 +69,4 @@
        }
    });
 </script>
-{{end}}
+{{end}}
--- a/web/html/xui/component/setting.html
+++ b/web/html/xui/component/setting.html
@@ -21,7 +21,24 @@
 {{define "component/setting"}}
 <script>
    Vue.component('a-setting-list-item', {
-        props: ["title", "description", "paddings"],
+        props: {
+            'title': {
+                type: String,
+                required: true,
+            },
+            'description': {
+                type: String,
+                required: false,
+            },
+            'paddings': {
+                type: String,
+                required: false,
+                defaultValue: "default",
+                validator: function (value) {
+                    return ['small', 'default'].includes(value)
+                }
+            }
+        },
        template: `{{ template "component/settingListItem" }}`,
        computed: {
            padding() {
@@ -29,7 +46,7 @@
                    case "small":
                        return "10px 20px !important"
                        break;
-                    default:
+                    case "default":
                        return "20px !important"
                        break;
                }
--- a/web/html/xui/component/sortableTable.html
+++ b/web/html/xui/component/sortableTable.html
@@ -1,9 +1,5 @@
 {{define "component/sortableTableTrigger"}}
-<a-icon type="drag"
-  class="sortable-icon"
-  style="cursor: move;"
-  @mouseup="mouseUpHandler"
-  @mousedown="mouseDownHandler"
+<a-icon type="drag" class="sortable-icon" style="cursor: move;" @mouseup="mouseUpHandler" @mousedown="mouseDownHandler"
  @click="clickHandler" />
 {{end}}

@@ -28,7 +24,16 @@
        newElementIndex: null,
      };
    },
-    props: ['data-source', 'customRow'],
+    props: {
+      'data-source': {
+        type: undefined,
+        required: false,
+      },
+      'customRow': {
+        type: undefined,
+        required: false,
+      }
+    },
    inheritAttrs: false,
    provide() {
      const sortable = {}
@@ -44,7 +49,7 @@
        sortable,
      }
    },
-    render: function(createElement) {
+    render: function (createElement) {
      return createElement('a-table', {
        class: {
          'ant-table-is-sorting': this.isDragging(),
@@ -59,7 +64,7 @@
          drop: (e) => this.dropHandler(e),
        },
        scopedSlots: this.$scopedSlots,
-      }, this.$slots.default, )
+      }, this.$slots.default,)
    },
    created() {
      this.$memoSort = {};
@@ -163,9 +168,14 @@
      }
    }
  });
-  Vue.component('table-sort-trigger', {
+  Vue.component('a-table-sort-trigger', {
    template: `{{template "component/sortableTableTrigger"}}`,
-    props: ['item-index'],
+    props: {
+      'item-index': {
+        type: undefined,
+        required: false
+      }
+    },
    inject: ['sortable'],
    methods: {
      mouseDownHandler(e) {
@@ -190,27 +200,33 @@
      display: none;
    }
  }
+
  .ant-table-is-sorting .draggable-row td {
    background-color: #ffffff !important;
  }
+
  .dark .ant-table-is-sorting .draggable-row td {
    background-color: var(--dark-color-surface-100) !important;
  }
+
  .ant-table-is-sorting .dragging td {
    background-color: rgb(232 244 242) !important;
    color: rgba(0, 0, 0, 0.3);
  }
+
  .dark .ant-table-is-sorting .dragging td {
    background-color: var(--dark-color-table-hover) !important;
    color: rgba(255, 255, 255, 0.3);
  }
+
  .ant-table-is-sorting .dragging {
    opacity: 1;
    box-shadow: 1px -2px 2px #008771;
    transition: all 0.2s;
  }
+
  .ant-table-is-sorting .dragging .ant-table-row-index {
    opacity: 0.3;
  }
 </style>
-{{end}}
+{{end}}
--- a/web/html/xui/component/themeSwitch.html
+++ b/web/html/xui/component/themeSwitch.html
@@ -6,9 +6,13 @@
        <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
        <span>Theme</span>
      </span>
-      <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()"> Dark <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
+      <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()"> Dark
+        <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme"
+          @change="themeSwitcher.toggleTheme()"></a-switch>
      </a-menu-item>
-      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOffUltra()"> Ultra <a-checkbox style="margin-left: 2px;" :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
+      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch"
+        @mousedown="themeSwitcher.animationsOffUltra()"> Ultra <a-checkbox style="margin-left: 2px;"
+          :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
@@ -17,12 +21,15 @@

 {{define "component/themeSwitchTemplateLogin"}}
 <template>
-  <a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
+  <a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline"
+    selected-keys="">
    <a-menu-item mode="inline" class="ant-menu-theme-switch">
      <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
+      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
+        @change="themeSwitcher.toggleTheme()"></a-switch>
      <template v-if="themeSwitcher.isDarkTheme">
-        <a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
+        <a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra"
+          @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
      </template>
    </a-menu-item>
  </a-menu>
@@ -83,8 +90,7 @@
    };
  }
  const themeSwitcher = createThemeSwitcher();
-  Vue.component('theme-switch', {
-    props: [],
+  Vue.component('a-theme-switch', {
    template: `{{template "component/themeSwitchTemplate"}}`,
    data: () => ({
      themeSwitcher
@@ -96,8 +102,7 @@
      document.getElementById('message').className = themeSwitcher.currentTheme;
    }
  });
-  Vue.component('theme-switch-login', {
-    props: [],
+  Vue.component('a-theme-switch-login', {
    template: `{{template "component/themeSwitchTemplateLogin"}}`,
    data: () => ({
      themeSwitcher
@@ -110,4 +115,4 @@
    }
  });
 </script>
-{{end}}
+{{end}}