yg-yygl 0.0.1

package/src/views/sys/sys-config/login-config/login-form.vue

@@ -0,0 +1,346 @@
+<script lang="ts" setup>
+import { onMounted, ref, computed } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
+import { ElMessage } from 'element-plus';
+
+import { list, saveBatch } from '../../../../api/sys-config';
+import { validatePassword } from '../../../../api/account';
+import { encryptPassword } from '../../../../utils';
+
+/**
+ * OrderItem
+ */
+export interface OrderItem {
+  asc?: boolean;
+  column?: string;
+  [property: string]: any;
+}
+
+/**
+ * SysPasswordConfig，SysPasswordConfig
+ */
+export interface SysPasswordConfig {
+  /**
+   * 查询条件
+   */
+  configType?: string;
+  /**
+   * 配置键值
+   */
+  configKey?: string;
+  /**
+   * ConfigName
+   */
+  configName?: string;
+  /**
+   * 开启状态 0 未启用 1 启用
+   */
+  configStatus?: number;
+  /**
+   * 配置value
+   */
+  configValue?: string | number | string[];
+  /**
+   * 创建时间
+   */
+  crateTime?: string;
+  /**
+   * 创建者ID
+   */
+  createUser?: string;
+  /**
+   * 0:未删除 1:删除
+   */
+  delFlag?: number;
+
+  /**
+   * 更新日期
+   */
+  updateUser?: string;
+  /**
+   * 更新者ID
+   */
+  updaterId?: string;
+  [property: string]: any;
+}
+
+/**
+ * PageOfSysPasswordConfig
+ */
+export interface PageOfSysPasswordConfig {
+  countId?: string;
+  current?: number;
+  maxLimit?: number;
+  optimizeCountSql?: boolean;
+  optimizeJoinOfCountSql?: boolean;
+  orders?: OrderItem[];
+  pages?: number;
+  records?: SysPasswordConfig[];
+  searchCount?: boolean;
+  size?: number;
+  total?: number;
+  [property: string]: any;
+}
+
+export interface PwdConfigResponseType {
+  code?: number;
+  data?: PageOfSysPasswordConfig;
+  msg?: string;
+  requestId?: string;
+  success?: boolean;
+  [property: string]: any;
+}
+
+const emit = defineEmits<(e: 'loading-change', val: boolean) => void>();
+
+const data = ref<SysPasswordConfig[]>([]);
+const loading = ref(false);
+
+const loginModelOptions = [
+  { label: '账号登录', value: 'account' },
+  { label: '手机号登录', value: 'mobile' }
+]
+
+// 初始密码校验错误信息
+const initPasswordError = ref('');
+
+/**
+ * 校验初始密码
+ */
+const handleValidateInitPassword = async (value: string) => {
+  // 前端必填校验
+  if (!value || value.trim() === '') {
+    initPasswordError.value = '账号初始化密码为必填项';
+    return;
+  }
+
+  // 后端密码强度校验
+  try {
+    const res = await validatePassword(encryptPassword(value));
+    if (res && (res as string[]).length > 0) {
+      initPasswordError.value = (res as string[]).join(';');
+    } else {
+      initPasswordError.value = '';
+    }
+  } catch (error) {
+    console.error('密码校验失败:', error);
+  }
+};
+
+const defaultLoginModelOptions = computed(() => {
+  const loginModelValue = data.value.find(item => item.configKey === 'loginMode')?.configValue as string[]
+  if (loginModelValue && loginModelValue.length > 1) {
+    return loginModelOptions;
+  } else if(loginModelValue && loginModelValue.length === 1) {
+    return loginModelOptions.filter(item => item.value === loginModelValue[0]);
+  }
+  return []
+})
+
+const onLoginModelChange = (value: string[]) => {
+  const defaultLoginMode = data.value.find(item => item.configKey === 'defaultLoginMode')
+  if (value?.length === 1 && defaultLoginMode) {
+    defaultLoginMode!.configValue = value[0];
+  }
+}
+
+const queryList = async () => {
+  loading.value = true;
+  try {
+    const res = await list({ configType: 'login' })
+    loading.value = false;
+    if (res) {
+      // 塞一个isEdit为false,用来控制编辑状态
+      // res.forEach((item) => {
+      //   item.isEdit = false;
+      // });
+      data.value = (res as unknown as SysPasswordConfig[]) || [];
+      data.value.sort((a, b) => a.configOrder - b.configOrder);
+      data.value = data.value.map((item) => {
+        if (item.configKey === 'loginMode') {
+          item.configValue = (item.configValue as string)?.split(',') || ['account', 'mobile'];
+        } else if (item.configKey !== 'initPassword' && item.configKey !== 'defaultLoginMode') {
+          item.configValue = Number(item.configValue);
+        }
+        return item;
+      });
+    } else {
+      ElMessage.error(res.msg || '登录配置列表获取失败');
+    }
+  } catch (error) {
+    console.error(error);
+    loading.value = false;
+    ElMessage.error(error || '登录配置列表收获失败');
+  }
+};
+
+// 点击编辑保存
+const handleSave = useDebounceFn(() => {
+  // 检查初始密码校验是否有错误
+  if (initPasswordError.value) {
+    ElMessage.error('初始密码不符合要求，请修改后再保存');
+    emit('loading-change', false);
+    return;
+  }
+
+  let vaild = true;
+  data.value.forEach((item) => {
+    if (item.configKey === 'loginMode') {
+      item.configValue = (item.configValue as string[])?.join(',') || 'account,mobile';
+    }
+    // 初始密码：开关打开时必填
+    if (item.configKey === 'initPassword') {
+      if (item.configStatus === 1 && (item.configValue === null || item.configValue === '' || item.configValue === undefined)) {
+        ElMessage.error('账号初始化密码为必填项，请输入');
+        vaild = false;
+      }
+    }
+    // 其他配置项（排除特殊项）
+    else if (
+      item.configKey !== 'linkEncrypt' &&
+      item.configKey !== 'captchaType' &&
+      item.configKey !== 'loginMethod' &&
+      (item.configValue === null || item.configValue === '' || item.configValue === undefined)
+    ) {
+      ElMessage.error('请检查必填项');
+      vaild = false;
+    }
+  });
+  if (!vaild) {
+    emit('loading-change', false);
+    return;
+  }
+
+  emit('loading-change', true);
+  saveBatch(data.value as unknown as [])
+    .then((res) => {
+      if (res) {
+        ElMessage.success('修改配置成功');
+        initPasswordError.value = ''; // 保存成功后清空错误信息
+        queryList();
+      }
+    })
+    .finally(() => {
+      emit('loading-change', false);
+    });
+}, 500);
+
+onMounted(() => {
+  queryList();
+});
+defineExpose({
+  queryList,
+});
+</script>
+
+<template>
+  <div id="outbox" class="pl-10px w-full">
+    <ElRow id="theBox" v-loading="loading" :gutter="20">
+      <ElCol
+        v-for="item in data"
+        :key="item.id"
+        :span="8"
+        class="h-168px mb-20px p-4"
+      >
+        <div class="mb-2 text-sm">{{ item.configName }}</div>
+        <div class="flex w-full items-center justify-start pr-8">
+          <el-switch
+            v-if="item.configKey !== 'loginMethod' && item.configKey !== 'loginMode' && item.configKey !== 'defaultLoginMode'"
+            class="mr-[30px]"
+            :active-value="1"
+            :inactive-value="0"
+            v-model="item.configStatus"
+          />
+
+          <!-- 账号初始化密码 - 文本输入框 -->
+          <template v-if="item.configKey === 'initPassword'">
+            <span class="mr-[15px] text-xs">{{ item.configKeyName }}</span>
+            <div class="flex flex-col flex-1">
+              <el-input
+                v-model.trim="item.configValue"
+                placeholder="请输入"
+                clearable
+                :maxlength="100"
+                :disabled="item.configStatus === 0"
+                @blur="handleValidateInitPassword(item.configValue as string)"
+              />
+              <div
+                v-if="initPasswordError"
+                class="error"
+              >
+                {{ initPasswordError }}
+              </div>
+            </div>
+          </template>
+
+          <!-- 登录方式 -->
+          <template v-else-if="item.configKey == 'loginMethod'">
+            <el-radio-group v-model="item.configValue">
+              <el-radio :label="0" border>同时登录</el-radio>
+              <el-radio :label="1" border>单一登录</el-radio>
+            </el-radio-group>
+          </template>
+
+          <!-- 登录模式 -->
+          <template v-else-if="item.configKey == 'loginMode'">
+            <el-checkbox-group v-model="item.configValue" :min="1" @change="onLoginModelChange">
+              <el-checkbox
+                v-for="item in loginModelOptions"
+                :key="item.value"
+                :value="item.value"
+                border
+              >{{ item.label }}</el-checkbox>
+            </el-checkbox-group>
+          </template>
+
+          <!-- 默认登录模式 -->
+          <template v-else-if="item.configKey === 'defaultLoginMode'">
+            <el-radio-group v-model="item.configValue">
+              <el-radio
+                v-for="item in defaultLoginModelOptions"
+                :key="item.value"
+                :value="item.value"
+                border
+              >{{ item.label }}</el-radio>
+            </el-radio-group>
+          </template>
+
+          <!-- 数字输入框配置项 -->
+          <template v-else-if="
+            item.configKey !== 'linkEncrypt' &&
+            item.configKey !== 'captchaType'
+          ">
+            <span class="mr-[15px] text-xs">
+              {{ item.configKeyName }}
+            </span>
+            <el-input-number
+              v-model="item.configValue"
+              placeholder="请输入"
+              clearable
+              class="!w-200px !inline-block"
+              :min="0"
+              :max="10000"
+              :disabled="item.configStatus === 0"
+            />
+            <span
+              class="error"
+              :style="{ display: (item.configValue === null || item.configValue === '' || item.configValue === undefined) ? 'inline' : 'none' }"
+            >请输入配置值</span>
+          </template>
+        </div>
+      </ElCol>
+    </ElRow>
+    <div class="flex items-center">
+      <el-button type="primary" @click="handleSave">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.error {
+  color: red;
+  font-size: 12px;
+  padding-left: 5px;
+}
+</style>

package/src/views/sys/sys-config/mobile-config/components/import-file.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import type { UploadProps, UploadRawFile } from 'element-plus';
+
+import { ref } from 'vue';
+
+import { Icon } from '@udp/component-ui';
+
+import { ElMessage, genFileId } from 'element-plus';
+
+import { uploadFile as uploadFileApi } from '../../../../../api';
+
+interface Props {
+  // 允许上传的文件类型
+  accept?: string;
+  // 上传文件大小限制（MB）
+  maxSize?: number;
+  // 上传提示文本
+  uploadTip?: string;
+  // 限制上传数量
+  limit?: number;
+  // 绑定的文件
+  file?: string;
+  // 显示上传提示
+  showUploadTip?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  accept: '.apk',
+  maxSize: 100,
+  uploadTip: '仅允许导入apk格式文件',
+  limit: 1,
+  file: '',
+  showUploadTip: true,
+});
+
+// 上传的文件
+const uploadFile = ref<File | null>(null);
+
+const fileChangeFlag = ref(false);
+
+// 上传组件引用
+const uploadRef = ref();
+
+// 处理el-upload的文件变化事件
+const handleUploadChange = (uploadInfo: any) => {
+  // 从uploadInfo中获取原始文件对象
+  if (uploadInfo && uploadInfo.raw) {
+    handleFileChange(uploadInfo.raw);
+  }
+};
+
+// 处理文件变更
+const handleFileChange = (file: File | null) => {
+  uploadFile.value = file;
+  fileChangeFlag.value = true;
+};
+
+// 文件上传前的验证
+const beforeUpload = (file: File) => {
+  // 检查文件类型
+  const isValidType = props.accept
+    .split(',')
+    .some((type) =>
+      file.name.toLowerCase().endsWith(type.replace('.', '').toLowerCase()),
+    );
+
+  if (!isValidType) {
+    ElMessage.error(`请上传${props.accept}格式的文件`);
+    return false;
+  }
+
+  // 检查文件大小
+  const isValidSize = file.size / 1024 / 1024 < props.maxSize;
+  if (!isValidSize) {
+    ElMessage.error(`文件大小不能超过${props.maxSize}MB`);
+    return false;
+  }
+
+  // 文件验证通过，直接处理
+  handleFileChange(file);
+
+  // 验证通过但阻止自动上传，使用 Upload.LIST_IGNORE 或返回 Promise.reject()
+  return Promise.reject('handled');
+};
+
+const handleExceed: UploadProps['onExceed'] = (files) => {
+  uploadRef.value!.clearFiles();
+  const file = files[0] as UploadRawFile;
+  file.uid = genFileId();
+  uploadRef.value!.handleStart(file);
+};
+
+// 清除文件
+const clearFile = () => {
+  handleFileChange(null);
+};
+
+// 手动触发上传
+const triggerUpload = () => {
+  uploadRef.value?.handleClick();
+};
+
+// 获取当前文件
+const getFile = () => {
+  return uploadFile.value;
+};
+
+const submit = async () => {
+  try {
+    if (!fileChangeFlag.value) {
+      return props.file;
+    }
+
+    const formData = new FormData();
+    formData.append('file', uploadFile.value!);
+    formData.append('source', 'minio');
+    const updateFileRes = await uploadFileApi(formData);
+    if (updateFileRes) {
+      console.log(updateFileRes, '上传安装包成功');
+      fileChangeFlag.value = false;
+      // fileUrl
+      return updateFileRes.fileUrl;
+    }
+  } catch (error) {
+    console.error(error, '上传安装包失败');
+  }
+};
+
+// 暴露方法
+defineExpose({
+  uploadFile,
+  clearFile,
+  triggerUpload,
+  getFile,
+  submit,
+});
+</script>
+
+<template>
+  <!-- 文件上传区域 -->
+  <div>
+    <!-- 当前文件状态显示 -->
+    <div
+      v-if="uploadFile || file"
+      class="mb-3 flex items-center gap-1 text-sm text-green-600"
+    >
+      <Icon name="material-symbols:apk-document-outline-rounded" :size="26" />
+      {{ uploadFile?.name || file?.split('/').pop() || '' }}
+    </div>
+    <el-upload
+      ref="uploadRef"
+      :auto-upload="false"
+      :show-file-list="false"
+      :accept="accept"
+      :before-upload="beforeUpload"
+      :limit="limit"
+      :on-exceed="handleExceed"
+      :on-change="handleUploadChange"
+    >
+      <template #trigger>
+        <el-button type="primary">
+          {{ uploadFile ? '重新选择' : '选择文件' }}
+        </el-button>
+      </template>
+      <template #tip></template>
+    </el-upload>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>