fdb2 1.0.0

package/src/components/user/name.vue

@@ -0,0 +1,104 @@
+<template>
+    <span v-if="loading" class="text-muted">
+      <i class="bi bi-hourglass-split"></i> 加载中...
+    </span>
+    <span v-else-if="error" class="text-danger">
+      <i class="bi bi-exclamation-circle"></i> 加载失败
+    </span>
+    <span v-else-if="userInfo" class="user-info" :title="userInfo.id">
+      <span class="user-name">{{ userInfo.name }}</span>
+      <span class="user-phone ms-2 text-secondary" v-if="userInfo.mobile">({{ formatPhone(userInfo.mobile) }})</span>
+    </span>
+    <span v-else class="text-secondary">未知用户</span>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, watch, onMounted } from 'vue';
+  import * as userServer from '@/service/account'; // 假设用户服务路径
+  
+  // 接收父组件传入的用户ID
+  const props = defineProps<{
+    userId?: number | null
+  }>();
+  
+  // 组件内部状态
+  const userInfo = ref<any>(null);
+  const loading = ref(false);
+  const error = ref(false);
+  
+  // 缓存已查询过的用户信息，避免重复请求
+  const userCache = new Map<number, any>();
+  
+  // 格式化手机号（13800138000 -> 138****8000）
+  const formatPhone = (phone: string) => {
+    // if (phone.length === 11) {
+    //   return `${phone.slice(0, 3)}****${phone.slice(7)}`;
+    // }
+    return phone;
+  };
+  
+  // 根据用户ID获取用户信息
+  const fetchUserInfo = async (userId: number | null | undefined) => {
+    // 如果没有用户ID，直接清空显示
+    if (!userId || userId <= 0) {
+      userInfo.value = null;
+      return;
+    }
+  
+    // 检查缓存，如果有直接使用
+    if (userCache.has(userId)) {
+      userInfo.value = userCache.get(userId) || null;
+      return;
+    }
+  
+    // 发起请求获取用户信息
+    loading.value = true;
+    error.value = false;
+    
+    try {
+      const res = await userServer.getUserDetail(userId);
+      if (res.ret === 0 && res.data) {
+        const user = res.data;
+        userInfo.value = user;
+        userCache.set(userId, user); // 存入缓存
+      } else {
+        throw new Error(res.msg || '获取用户信息失败');
+      }
+    } catch (err) {
+      console.error('获取用户信息失败:', err);
+      error.value = true;
+      userInfo.value = null;
+    } finally {
+      loading.value = false;
+    }
+  };
+  
+  // 当用户ID变化时重新获取信息
+  watch(
+    () => props.userId,
+    (newUserId) => {
+      fetchUserInfo(newUserId);
+    },
+    { immediate: true } // 组件初始化时立即执行
+  );
+  
+  // 组件挂载时执行一次
+  onMounted(() => {
+    fetchUserInfo(props.userId);
+  });
+  </script>
+  
+  <style scoped>
+  .user-name {
+    color: var(--bs-primary);
+  }
+  
+  .user-name:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  
+  .user-phone {
+    font-size: 0.875rem;
+  }
+  </style>

package/src/components/user/selector.vue

@@ -0,0 +1,416 @@
+<template>
+  <div class="user-permission-selector">
+    <div class="dropdown" :class="{ show: isOpen }">
+      <button 
+        class="btn btn-light w-100 text-start border rounded-md d-flex align-items-center justify-content-between"
+        type="button" 
+        @click="toggleDropdown"
+        :aria-expanded="isOpen"
+      >
+        <div class="d-flex align-items-center flex-grow-1 overflow-hidden">
+          <i class="bi bi-search me-2 text-muted"></i>
+          
+          <!-- 选中的用户或占位文本 -->
+          <div class="flex-grow-1 overflow-hidden">
+            <span 
+              v-if="selectedUser" 
+              class="text-body"
+            >
+              {{ selectedUser.account }}
+            </span>
+            
+            <!-- 占位文本 -->
+            <span 
+              v-else
+              class="text-muted flex-grow-1"
+            >
+              {{ placeholder || '选择用户' }}
+            </span>
+          </div>
+        </div>
+        
+        <!-- 下拉箭头 -->
+        <i class="bi" :class="isOpen ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
+      </button>
+      
+      <!-- 下拉菜单 -->
+      <div 
+        class="dropdown-menu w-100 p-2 shadow-lg border rounded-md" 
+        :class="{ show: isOpen }"
+        @click.stop
+      >
+        <!-- 搜索框 -->
+        <div class="mb-2">
+          <input
+            type="text"
+            class="form-control"
+            ref="searchInput"
+            :placeholder="searchPlaceholder || '搜索用户...'"
+            v-model="searchQuery"
+            @input="handleSearchInput"
+            @keydown="handleKeydown"
+          >
+        </div>
+        
+        <!-- 搜索结果组 -->
+        <div class="mb-1">
+          <div class="dropdown-header d-flex justify-content-between align-items-center">
+            <span>搜索结果</span>
+            <div v-if="loading" class="w-20">
+              <div class="progress" style="height: 2px;">
+                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 结果列表 -->
+          <div class="mt-1">
+            <button
+              v-for="user in userList"
+              :key="user.userId"
+              class="dropdown-item d-block w-100 text-start mb-1 rounded"
+              :class="{ 'active': selectedUser?.userId === user.userId }"
+              @click.prevent.stop="handleSelectUser(user)"
+            >
+              {{ user.account }}
+            </button>
+            
+            <div 
+              v-if="!loading && userList.length === 0" 
+              class="text-center text-muted py-2"
+            >
+              没有找到匹配的用户
+            </div>
+          </div>
+        </div>
+        
+        <!-- 清除按钮 -->
+        <button 
+          type="button" 
+          class="btn btn-link text-danger w-100 mt-1"
+          @click="handleClear"
+          :disabled="!selectedUser"
+        >
+          <i class="bi bi-trash me-1"></i> 清除选择
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue';
+import * as userService from '@/service/account';
+import { modal } from '@/utils/modal';
+
+interface User {
+  userId: number;  // 用户ID，number类型
+  account: string; // 账号，用于显示
+  [key: string]: any;
+}
+
+interface ApiResponse<T> {
+  ret: number;
+  msg: string;
+  data?: T;
+}
+
+interface UserListResponseData {
+  data: User[];
+  total: number;
+  page: number;
+}
+
+const props = defineProps<{
+  modelValue?: number;  // 现在绑定的是number类型的userId
+  placeholder?: string;
+  searchPlaceholder?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number | undefined): void;
+  (e: 'clear'): void;
+}>();
+
+// 组件引用
+const searchInput = ref<HTMLInputElement | null>(null);
+
+// 下拉框状态
+const isOpen = ref(false);
+
+// 搜索相关
+const searchQuery = ref('');
+const loading = ref(false);
+const userList = ref<User[]>([]);
+const page = ref(1);
+const pageSize = ref(20);
+const totalUsers = ref(0);
+
+// 内部维护的选中用户对象（包含userId和account）
+const selectedUser = ref<User | undefined>(undefined);
+const isUpdating = ref(false);
+
+// 防抖函数
+function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void {
+  let timer: NodeJS.Timeout | null = null;
+  return function(...args: Parameters<T>) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      // @ts-ignore
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// 处理搜索输入
+const handleSearchInput = debounce(async (e: Event) => {
+  if (isUpdating.value) return;
+  
+  const input = e.target as HTMLInputElement;
+  const value = input.value.trim();
+  
+  searchQuery.value = value;
+  page.value = 1;
+  
+  if (value) {
+    await fetchUsers(value);
+  } else {
+    userList.value = [];
+  }
+}, 150);
+
+// 处理选择用户
+const handleSelectUser = async (user: User) => {
+  if (isUpdating.value || selectedUser.value?.userId === user.userId) return;
+  
+  //isUpdating.value = true;
+  try {
+    selectedUser.value = user;
+    searchQuery.value = '';
+    await nextTick();
+    if (searchInput.value) {
+      searchInput.value.focus();
+    }
+    // 选择后关闭下拉框
+    closeDropdown();
+  } finally {
+    //isUpdating.value = false;
+  }
+};
+
+// 清除输入框内容
+const clearInput = async () => {
+  searchQuery.value = '';
+  userList.value = [];
+  await nextTick();
+  if (searchInput.value) {
+    searchInput.value.focus();
+  }
+};
+
+// 处理选择变化事件 - 向外传递userId
+watch(
+  () => selectedUser.value,
+  (newVal) => {
+    const id = newVal?.userId || 0;
+    if (props.modelValue !== id) {
+      emit('update:modelValue', id);
+    }
+  }
+);
+
+// 处理键盘事件
+const handleKeydown = async (e: KeyboardEvent) => {
+  if (isUpdating.value) return;
+  
+  // 处理删除键
+  if (e.key === 'Backspace' && searchQuery.value === '' && selectedUser.value) {
+    e.preventDefault();
+    handleClear();
+    return;
+  }
+  
+  // 处理回车选中第一个
+  if (e.key === 'Enter' && userList.value.length > 0) {
+    e.preventDefault();
+    
+    const firstUser = userList.value[0];
+    if (firstUser) {
+      await handleSelectUser(firstUser);
+    }
+  }
+  
+  // 处理ESC关闭下拉框
+  if (e.key === 'Escape') {
+    closeDropdown();
+  }
+};
+
+// 切换下拉框显示状态
+const toggleDropdown = async (e: MouseEvent) => {
+  
+  isOpen.value = !isOpen.value;
+  
+  e.stopPropagation?.();
+  e.preventDefault?.();
+
+  if (isOpen.value) {
+    await nextTick();
+    if (searchInput.value) {
+      searchInput.value.focus();
+    }
+    
+    if (searchQuery.value.trim()) {
+      await fetchUsers(searchQuery.value.trim());
+    }
+  }
+};
+
+// 关闭下拉框
+const closeDropdown = () => {
+  isOpen.value = false;
+};
+
+// 处理清除选中
+const handleClear = async () => {
+  if (isUpdating.value || !selectedUser.value) return;
+  
+  isUpdating.value = true;
+  try {
+    selectedUser.value = undefined;
+    //await clearInput();
+    emit('clear');
+  } finally {
+    isUpdating.value = false;
+  }
+};
+
+// 获取用户列表
+const fetchUsers = async (filter: string) => {
+  try {
+    loading.value = true;
+    const response: ApiResponse<UserListResponseData> = await userService.queryUser({
+      query: { filter: filter || '' },
+      page: page.value,
+      size: pageSize.value
+    });
+    
+    if (response.ret !== 0) {
+      modal.error(response.msg || '获取用户失败', {
+        operation: 'GET_USER_LIST',
+        code: response.ret
+      });
+      userList.value = [];
+      totalUsers.value = 0;
+      return;
+    }
+    
+    userList.value = response.data || [];
+    totalUsers.value = response.total || 0;
+  } catch (error) {
+    console.error('获取用户列表失败:', error);
+    
+    modal.error(error.message || '获取用户列表失败', {
+      operation: 'GET_USER_LIST',
+      stack: error.stack
+    });
+    userList.value = [];
+    totalUsers.value = 0;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 同步外部传入的userId到内部状态
+const syncWithExternalValue = (userId?: number) => {
+  if (isUpdating.value) return;
+  
+  isUpdating.value = true;
+  try {
+    if (userId === undefined) {
+      selectedUser.value = undefined;
+    } else if (!selectedUser.value || selectedUser.value.userId !== userId) {
+      // 如果当前列表中没有该用户，可能需要重新获取或保持ID
+      const existingUser = userList.value.find(u => u.userId === userId);
+      selectedUser.value = existingUser;
+      // 注意：如果用户不在当前列表中，这里只会设置userId，不会显示用户名
+      // 实际应用中可能需要额外处理这种情况
+    }
+  } finally {
+    setTimeout(() => {
+      isUpdating.value = false;
+    }, 0);
+  }
+};
+
+// 监听外部传入的modelValue变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    syncWithExternalValue(newVal);
+  },
+  { immediate: true }
+);
+
+// 点击外部关闭下拉框
+const handleClickOutside = (e: MouseEvent) => {
+  const dropdown = document.querySelector('.user-permission-selector .dropdown');
+  if (dropdown && !dropdown.contains(e.target as Node) && isOpen.value) {
+    closeDropdown();
+  }
+};
+
+onMounted(() => {
+  syncWithExternalValue(props.modelValue);
+  fetchUsers('');
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+defineExpose({
+  selectedUser,
+  totalUsers
+});
+</script>
+
+<style scoped>
+.user-permission-selector {
+  width: 100%;
+}
+
+.dropdown-item.active {
+  background-color: #0d6efd;
+  color: white;
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+/* 自定义滚动条 */
+.dropdown-menu {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.dropdown-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dropdown-menu::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.dropdown-menu::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 3px;
+}
+
+.dropdown-menu::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
+}
+</style>

package/src/domain/SysConfig.ts

@@ -0,0 +1,74 @@
+import Entity from '../base/entity';
+import config from '@/base/config';
+
+/**
+ *  系统配置Domain
+ */
+
+export interface SysConfigState {
+    title?: string;
+    url?: string;
+    config?: {
+        prefix?: string;
+        apiUrl?: string;
+        adapter?: string;
+    };
+    sso?: any;
+    user?: UserInfo;
+    session?: any;
+    isManager: boolean;
+}
+
+export default class SysConfig extends Entity<SysConfigState> {
+    constructor(state?: any) {
+        super(state);
+    }
+
+    /**
+     *  获取系统标题
+     */
+    get title() {
+        return this.state.title;
+    }
+    get url() {
+        return this.state?.url;
+    }
+    get sso() {
+        return this.state?.sso;
+    }
+    get config() {
+        return this.state?.config;
+    }
+    get user() {
+        return this.state.session?.user;
+    }
+    get session() {
+        return this.state.session;
+    }
+
+    get isManager() {
+        return this.state.isManager;
+    }
+
+    get rootUrl() {
+        return location.origin + (this.config?.prefix || '');
+    }
+    
+    get baseUrl() {
+        if(this.sso?.baseUrl) return this.sso.baseUrl;
+        else {
+            return this.rootUrl;
+        }
+    }
+
+    getLoginUrl(redirectUrl = location.href) {
+        if(this.baseUrl === this.rootUrl) return this.baseUrl + '/login';
+        return this.baseUrl + '/login?url=' + encodeURIComponent(redirectUrl);
+    }
+
+    getLogoutUrl(redirectUrl = location.href) {
+        if(this.baseUrl === this.rootUrl) return this.baseUrl + '/logout';
+        return this.baseUrl + '/logout?url=' + encodeURIComponent(redirectUrl);
+    }
+}
+export const sysConfig = new SysConfig(config.state);

package/src/platform/App.vue

@@ -0,0 +1,8 @@
+<template>
+<router-view />
+</template>
+<script lang="ts" setup>
+</script>
+
+<style scss scoped>
+</style>