@xilonglab/vue-main 1.6.55 → 1.6.56

package/dist/page/setting.vue

@@ -1,87 +1,89 @@
-<script setup>
-import User from '#/user'
-import { ref, reactive, inject } from 'vue'
-
-const store = inject('store')
-const refs = { form: ref(null) }
-const data = reactive({ oldPassword: '', newPassword: '', repeatPassword: '' })
-const error = reactive({ oldPassword: '', newPassword: '', repeatPassword: '' })
-
-const validateNewPassword = (rule, value, callback) => {
-    if (!value || value.length < 6) {
-        callback(new Error('密码长度必须大于等于6位'))
-    } else if (/^\d+$/.test(value)) {
-        callback(new Error('密码不能为纯数字'))
-    } else if (/^[a-zA-Z]+$/.test(value)) {
-        callback(new Error('密码不能为纯字母'))
-    } else {
-        callback()
-    }
-}
-
-const rules = {
-    oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
-    newPassword: [
-        { required: true, message: "请输入新密码", trigger: "blur" },
-        { validator: validateNewPassword, trigger: "blur" }
-    ],
-    repeatPassword: [{ required: true, message: "请再确认密码", trigger: "blur" }],
-}
-
-const confirm = async () => {
-    const isValid = await refs.form.value.validate()
-    if (!isValid) return
-
-    if (data.newPassword !== data.repeatPassword) {
-        error.repeatPassword = '两次输入不一致'
-    } else {
-        const { oldPassword, newPassword } = data
-        const rsp = await User.Password.resource.put({
-            userId: store.state.userData.id,
-            oldPassword,
-            newPassword
-        })
-        if (rsp?.code === 500 && rsp.msg === '原密码错误') {
-            error.oldPassword = '原密码错误'
-        } else {
-            Object.keys(data).forEach(key => data[key] = '')
-        }
-    }
-}
-</script>
-
-<template>
-    <div class="setting">
-        <div class="wrapper">
-            <el-form class="form" :ref="refs.form" :model="data" :rules="rules">
-                <el-form-item label="原密码" prop="oldPassword" :error="error.oldPassword">
-                    <xl-input type="password" v-model="data.oldPassword" placeholder="" style="width:100%"/>
-                </el-form-item>
-                <el-form-item label="新密码" prop="newPassword" :error="error.newPassword">
-                    <xl-input type="password" v-model="data.newPassword" placeholder="" style="width:100%"/>
-                </el-form-item>
-                <el-form-item label="请确认" prop="repeatPassword" :error="error.repeatPassword">
-                    <xl-input type="password" v-model="data.repeatPassword" placeholder="" style="width:100%"/>
-                </el-form-item>
-                <xl-button l="确定" type="primary" @click="confirm"/>
-            </el-form>
-        </div>
-    </div>
-</template>
-
-<style lang="less">
-.setting {
-    background: #fff;
-    .wrapper {
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .form {
-            width: 360px;
-            height: 300px;
-            text-align: center;
-        }
-    }
-}
+<script setup>
+import User from '#/user'
+import { ref, reactive, inject } from 'vue'
+
+const store = inject('store')
+const refs = { form: ref(null) }
+const data = reactive({ oldPassword: '', newPassword: '', repeatPassword: '' })
+const error = reactive({ oldPassword: '', newPassword: '', repeatPassword: '' })
+
+const validateNewPassword = (rule, value, callback) => {
+    if (!value || value.length < 6) {
+        callback(new Error('密码长度不低于6位'))
+    } else if (/^\d+$/.test(value)) {
+        callback(new Error('密码不能为纯数字'))
+    } else if (/^[a-zA-Z]+$/.test(value)) {
+        callback(new Error('密码不能为纯字母'))
+    } else if (value && value === data.oldPassword) {
+        callback(new Error('新密码不能与原密码相同'))
+    } else {
+        callback()
+    }
+}
+
+const rules = {
+    oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
+    newPassword: [
+        { required: true, message: "请输入新密码", trigger: "blur" },
+        { validator: validateNewPassword, trigger: "blur" }
+    ],
+    repeatPassword: [{ required: true, message: "请再确认密码", trigger: "blur" }],
+}
+
+const confirm = async () => {
+    const isValid = await refs.form.value.validate()
+    if (!isValid) return
+
+    if (data.newPassword !== data.repeatPassword) {
+        error.repeatPassword = '两次输入不一致'
+    } else {
+        const { oldPassword, newPassword } = data
+        const rsp = await User.Password.resource.put({
+            userId: store.state.userData.id,
+            oldPassword,
+            newPassword
+        })
+        if (rsp?.code === 500 && rsp.msg === '原密码错误') {
+            error.oldPassword = '原密码错误'
+        } else {
+            Object.keys(data).forEach(key => data[key] = '')
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="setting">
+        <div class="wrapper">
+            <el-form class="form" :ref="refs.form" :model="data" :rules="rules">
+                <el-form-item label="原密码" prop="oldPassword" :error="error.oldPassword">
+                    <xl-input type="password" v-model="data.oldPassword" placeholder="" style="width:100%"/>
+                </el-form-item>
+                <el-form-item label="新密码" prop="newPassword" :error="error.newPassword">
+                    <xl-input type="password" v-model="data.newPassword" placeholder="" style="width:100%"/>
+                </el-form-item>
+                <el-form-item label="请确认" prop="repeatPassword" :error="error.repeatPassword">
+                    <xl-input type="password" v-model="data.repeatPassword" placeholder="" style="width:100%"/>
+                </el-form-item>
+                <xl-button l="确定" type="primary" @click="confirm"/>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<style lang="less">
+.setting {
+    background: #fff;
+    .wrapper {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .form {
+            width: 360px;
+            height: 300px;
+            text-align: center;
+        }
+    }
+}
 </style>

package/dist/style/element.css

@@ -1,5 +1,5 @@
-/* Element 弹窗打开时会给 body 增加右侧补偿，当前布局下会出现可见空隙 */
-body.el-popup-parent--hidden {
-    width: 100% !important;
-    padding-right: 0 !important;
+/* Element 弹窗打开时会给 body 增加右侧补偿，当前布局下会出现可见空隙 */
+body.el-popup-parent--hidden {
+    width: 100% !important;
+    padding-right: 0 !important;
 }

package/dist/style/reset.css

@@ -1,43 +1,43 @@
-@import './element.css';
-
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-html,
-body,
-#app {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-}
-
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #e7ebf5;
-  border-radius: 10px;
+@import './element.css';
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #e7ebf5;
+  border-radius: 10px;
 }

package/package.json

@@ -1,17 +1,17 @@
-{
-  "name": "@xilonglab/vue-main",
-  "version": "1.6.55",
-  "description": "xilong vue main",
-  "main": "packages/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "xilonglab",
-  "license": "ISC",
-  "dependencies": {
-    "@imengyu/vue3-context-menu": "^1.3.3",
-    "element-plus": "2.3.6",
-    "image-conversion": "^2.1.1",
-    "vue-router": "^4.2.2"
-  }
+{
+  "name": "@xilonglab/vue-main",
+  "version": "1.6.56",
+  "description": "xilong vue main",
+  "main": "packages/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "xilonglab",
+  "license": "ISC",
+  "dependencies": {
+    "@imengyu/vue3-context-menu": "^1.3.3",
+    "element-plus": "2.3.6",
+    "image-conversion": "^2.1.1",
+    "vue-router": "^4.2.2"
+  }
 }

package/packages/form/XlSearchSelect.vue

@@ -1,7 +1,7 @@
 <script setup>
 defineOptions({ name: "XlSearchSelect" })
 
-import { onMounted, ref, computed, watch, isRef, unref } from 'vue'
+import { computed, isRef } from 'vue'
 
 
 const emits = defineEmits(['change', 'update:modelValue'])
@@ -35,7 +35,7 @@ const props = defineProps({
     },
 })
 
-const showOptions = ref([])
+const currentOptions = computed(() => isRef(props.options) ? props.options.value : props.options)
 
 const value = computed({
     get() {
@@ -46,37 +46,14 @@ const value = computed({
         emits('update:modelValue', data)
     },
 });
-
-function handleClick() {
-    showOptions.value = isRef(props.options) ? props.options.value : props.options;
-}
-
-function handleFilter(val) {
-    const options = isRef(props.options) ? props.options.value : props.options;
-    if (val) {
-        showOptions.value = options.filter((item) => {
-            return item.label ? item.label.includes(val) : false;
-        });
-    } else {
-        showOptions.value = options;
-    }
-}
-
-watch(() => isRef(props.options) ? props.options.value : props.options, (val) => {
-    handleClick()
-})
-
-onMounted(() => {
-    handleClick()
-})
 </script>
 
 
 <template>
     <el-select class="xl-search-select xl-form-item" v-model="value" :placeholder="l?l:placeholder" filterable
-        :filter-method="handleFilter" @click="handleClick" :style="{ width: `${width}px` }" :disabled="disabled"
-        :multiple="multiple" clearable>
-        <el-option v-for="(option, index) in showOptions" :key="index" :label="option.label" :value="option.value">
+        :style="{ width: `${width}px` }" :disabled="disabled"
+        :multiple="multiple" :reserve-keyword="false" clearable>
+        <el-option v-for="(option, index) in currentOptions" :key="index" :label="option.label" :value="option.value">
         </el-option>
     </el-select>
 </template>