@agentunion/kite 1.5.0 → 1.6.0

package/extensions/services/evol/web/src/components/team/TeamBillModal.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="bill-panel">
+    <!-- 日期选择 -->
+    <div class="bill-toolbar">
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        :start-placeholder="t('team.startDate')"
+        :end-placeholder="t('team.endDate')"
+        format="YYYY-MM-DD"
+        value-format="YYYY-MM-DD"
+        @change="loadBill"
+      />
+      <button class="tool-btn" @click="downloadCSV">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+          <polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+        </svg>
+        {{ t('team.downloadCSV') }}
+      </button>
+    </div>
+
+    <div v-if="loading" class="loading">{{ t('common.loading') }}</div>
+    <div v-else-if="billData.length === 0" class="empty">{{ t('team.noBill') }}</div>
+    <div v-else class="bill-list">
+      <div class="bill-header">
+        <span class="bill-col date">{{ t('team.date') }}</span>
+        <span class="bill-col credits">{{ t('team.credits') }}</span>
+        <span class="bill-col requests">{{ t('team.requests') }}</span>
+      </div>
+      <div v-for="item in billData" :key="item.date" class="bill-row">
+        <span class="bill-col date">{{ item.date }}</span>
+        <span class="bill-col credits mono">{{ item.totalCredits ?? '-' }}</span>
+        <span class="bill-col requests mono">{{ item.totalRequests ?? '-' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useConnectionStore } from '@/stores/connection'
+import { useAuthStore } from '@/stores/auth'
+import { useI18n } from '@/i18n'
+
+const props = defineProps<{ teamId: number }>()
+const connectionStore = useConnectionStore()
+const authStore = useAuthStore()
+const { t } = useI18n()
+
+const loading = ref(false)
+const billData = ref<any[]>([])
+
+// 默认最近30天
+const now = new Date()
+const thirtyDaysAgo = new Date(now.getTime() - 30 * 86400000)
+const dateRange = ref<[string, string]>([
+  thirtyDaysAgo.toISOString().slice(0, 10),
+  now.toISOString().slice(0, 10)
+])
+
+async function loadBill() {
+  if (!dateRange.value?.[0] || !dateRange.value?.[1]) return
+  loading.value = true
+  try {
+    const result = await connectionStore.callRpc<any>('evol.team.get_bill_range', {
+      kiteToken: authStore.kiteToken,
+      teamId: props.teamId,
+      startDate: dateRange.value[0],
+      endDate: dateRange.value[1]
+    })
+    if (result.success) {
+      billData.value = result.data || []
+    }
+  } catch (e) {
+    console.error('Load bill failed:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+function downloadCSV() {
+  if (billData.value.length === 0) return
+  const header = 'Date,Credits,Requests\n'
+  const rows = billData.value.map(r => `${r.date},${r.totalCredits ?? ''},${r.totalRequests ?? ''}`).join('\n')
+  const blob = new Blob([header + rows], { type: 'text/csv;charset=utf-8;' })
+  const a = document.createElement('a')
+  a.href = URL.createObjectURL(blob)
+  a.download = `team_bill_${props.teamId}.csv`
+  a.click()
+  URL.revokeObjectURL(a.href)
+}
+
+onMounted(() => {
+  loadBill()
+})
+</script>
+
+<style scoped>
+.bill-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.tool-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: var(--radius-pill);
+  background: var(--btn-ghost-bg);
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--btn-ghost-text);
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.tool-btn:hover { background: var(--border-color); }
+
+.bill-list {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.bill-header, .bill-row {
+  display: flex;
+  padding: 12px 16px;
+}
+
+.bill-header {
+  background: var(--btn-ghost-bg);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.bill-row {
+  border-top: 1px solid var(--border-color);
+  font-size: 14px;
+  color: var(--text-primary);
+  transition: background 0.15s;
+}
+
+.bill-row:hover { background: var(--btn-ghost-bg); }
+
+.bill-col { flex: 1; }
+.bill-col.date { flex: 2; }
+.mono { font-family: 'Spline Sans Mono', monospace; }
+
+.loading, .empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-muted);
+}
+</style>

package/extensions/services/evol/web/src/components/team/TeamMembersAndGroups.vue

@@ -0,0 +1,499 @@
+<template>
+  <div class="members-panel">
+    <!-- 工具栏 -->
+    <div class="toolbar">
+      <el-input
+        v-model="searchKeyword"
+        :placeholder="t('team.searchMember')"
+        prefix-icon="Search"
+        clearable
+        style="max-width: 280px;"
+        @input="handleSearch"
+      />
+      <div class="toolbar-actions">
+        <button v-if="isAdmin" class="tool-btn" @click="showAddMember = true">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+          {{ t('team.addMember') }}
+        </button>
+        <button v-if="isAdmin" class="tool-btn" @click="handleCreateGroup">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+            <line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/>
+          </svg>
+          {{ t('team.createGroup') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 树状表格 -->
+    <div class="tree-table">
+      <!-- 表头 -->
+      <div class="tree-table-header">
+        <div class="cell cell-checkbox"></div>
+        <div class="cell cell-name">{{ t('team.nameAndMembers') }}</div>
+        <div class="cell cell-role">{{ t('team.role') }}</div>
+        <div class="cell cell-credits">{{ t('team.credits') }}</div>
+        <div class="cell cell-actions">{{ t('team.operation') }}</div>
+      </div>
+
+      <!-- 表体 -->
+      <div class="tree-table-body">
+        <div v-if="loading" class="loading">{{ t('common.loading') }}</div>
+        <div v-else-if="filteredTreeData.length === 0" class="empty">{{ t('team.noMembers') }}</div>
+        <template v-else>
+          <TreeNode
+            v-for="node in filteredTreeData"
+            :key="node.id"
+            :node="node"
+            :depth="0"
+            :is-admin="isAdmin"
+            @create-sub-group="handleCreateSubGroup"
+            @edit-group="handleEditGroup"
+            @delete-group="handleDeleteGroup"
+            @set-admin="handleSetAdmin"
+            @remove-admin="handleRemoveAdmin"
+            @remove-member="handleRemoveMember"
+          />
+        </template>
+      </div>
+    </div>
+
+    <!-- 添加成员弹窗 -->
+    <AddMemberModal
+      v-if="showAddMember"
+      :team-id="teamId"
+      @close="showAddMember = false"
+      @added="loadAll"
+    />
+
+    <!-- 创建/编辑分组弹窗 -->
+    <el-dialog v-model="showGroupDialog" :title="editingGroup ? t('team.editGroup') : t('team.createGroup')" width="380px">
+      <el-form label-position="top">
+        <el-form-item :label="t('team.groupName')">
+          <el-input v-model="groupForm.name" :placeholder="t('team.groupNamePlaceholder')" maxlength="30" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showGroupDialog = false">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" :loading="savingGroup" @click="saveGroup">{{ t('common.confirm') }}</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useConnectionStore } from '@/stores/connection'
+import { useAuthStore } from '@/stores/auth'
+import { useI18n } from '@/i18n'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import AddMemberModal from './AddMemberModal.vue'
+import TreeNode from './TreeNode.vue'
+
+const props = defineProps<{ teamId: number; teamDetail: any }>()
+const connectionStore = useConnectionStore()
+const authStore = useAuthStore()
+const { t } = useI18n()
+
+const searchKeyword = ref('')
+const showAddMember = ref(false)
+const showGroupDialog = ref(false)
+const editingGroup = ref<any>(null)
+const parentGroupId = ref<number | null>(null)
+const groupForm = ref({ name: '' })
+const savingGroup = ref(false)
+const loading = ref(false)
+
+const members = ref<any[]>([])
+const groupTree = ref<any[]>([])
+
+const isAdmin = computed(() => {
+  const role = props.teamDetail?.memberRole
+  return role === '0' || role === '1' || role === 0 || role === 1
+})
+
+// 构建树形数据：分组 + 成员混排
+const treeData = computed(() => {
+  return buildTreeData(groupTree.value, members.value)
+})
+
+// 搜索过滤后的树
+const filteredTreeData = computed(() => {
+  if (!searchKeyword.value) return treeData.value
+  const kw = searchKeyword.value.toLowerCase()
+  return filterTree(treeData.value, kw)
+})
+
+function buildTreeData(groups: any[], ungroupedMembers: any[]): any[] {
+  const result: any[] = []
+
+  // 递归构建分组节点（成员已注入 group.members）
+  for (const group of groups) {
+    result.push(buildGroupNode(group))
+  }
+
+  // 未分组成员
+  if (ungroupedMembers.length > 0) {
+    result.push({
+      id: '__ungrouped__',
+      type: 'group',
+      name: t('team.ungroupedMembers'),
+      isUngrouped: true,
+      memberCount: ungroupedMembers.length,
+      children: ungroupedMembers.map(m => buildMemberNode(m))
+    })
+  }
+
+  return result
+}
+
+function buildGroupNode(group: any): any {
+  const children: any[] = []
+
+  // 子分组
+  if (group.children?.length) {
+    for (const child of group.children) {
+      children.push(buildGroupNode(child))
+    }
+  }
+
+  // 分组内成员（已由 injectMembers 注入）
+  const groupMembers = (group.members || []) as any[]
+  for (const m of groupMembers) {
+    children.push(buildMemberNode(m))
+  }
+
+  return {
+    id: group.id,
+    type: 'group',
+    name: group.groupName || group.name,
+    isUngrouped: false,
+    memberCount: group.memberCount ?? groupMembers.length,
+    children
+  }
+}
+
+let _memberLogged = false
+function buildMemberNode(member: any): any {
+  // 打印第一个成员的完整字段结构用于调试
+  if (!_memberLogged) {
+    console.log('[members] sample member raw data:', JSON.stringify(member))
+    _memberLogged = true
+  }
+  return {
+    id: member.id || member.userId,
+    type: 'member',
+    nickName: member.nickName || member.nickname,
+    userName: member.userName || member.username,
+    remark: member.remark || member.teamRemark || '',
+    userId: member.userId || member.user_id,
+    phone: member.phone,
+    memberRole: member.memberRole ?? member.member_role,
+    credits: member.credits,
+    _raw: member
+  }
+}
+
+function filterTree(nodes: any[], keyword: string): any[] {
+  const result: any[] = []
+  for (const node of nodes) {
+    if (node.type === 'member') {
+      const match =
+        (node.nickName || '').toLowerCase().includes(keyword) ||
+        (node.userName || '').toLowerCase().includes(keyword) ||
+        (node.phone || '').includes(keyword)
+      if (match) result.push(node)
+    } else if (node.type === 'group') {
+      const filteredChildren = filterTree(node.children || [], keyword)
+      // 分组名匹配或子节点匹配时保留
+      const groupMatch = (node.name || '').toLowerCase().includes(keyword)
+      if (groupMatch || filteredChildren.length > 0) {
+        result.push({
+          ...node,
+          children: groupMatch ? node.children : filteredChildren,
+          memberCount: filteredChildren.filter((c: any) => c.type === 'member').length
+        })
+      }
+    }
+  }
+  return result
+}
+
+async function callTeamRpc(method: string, extra: Record<string, any> = {}) {
+  return connectionStore.callRpc<any>(`evol.team.${method}`, {
+    kiteToken: authStore.kiteToken,
+    teamId: props.teamId,
+    ...extra
+  })
+}
+
+async function loadAll() {
+  loading.value = true
+  try {
+    // 1. 先加载分组树
+    const treeResult = await callTeamRpc('get_group_tree')
+    console.log('[members] group tree response:', JSON.stringify(treeResult).slice(0, 500))
+    const tree = treeResult.success ? (treeResult.data || []) : []
+
+    // 2. 收集所有分组ID，并行加载每个分组的成员
+    const groupIds = collectGroupIds(tree)
+    const membersByGroup = new Map<number, any[]>()
+
+    if (groupIds.length > 0) {
+      const promises = groupIds.map(async (gid) => {
+        try {
+          const r = await callTeamRpc('get_group_members', { groupId: gid, pageNum: 1, pageSize: 9999 })
+          console.log(`[members] group ${gid} response:`, JSON.stringify(r).slice(0, 500))
+          if (r.success) {
+            const list = r.data?.list || r.data?.records || (Array.isArray(r.data) ? r.data : [])
+            membersByGroup.set(gid, list)
+          }
+        } catch (e) {
+          console.error(`[members] group ${gid} load failed:`, e)
+        }
+      })
+      await Promise.all(promises)
+    }
+
+    // 3. 把成员注入分组树
+    injectMembers(tree, membersByGroup)
+    groupTree.value = tree
+
+    // 4. 加载未分组成员
+    try {
+      const ungroupedResult = await callTeamRpc('get_ungrouped_members', { pageNum: 1, pageSize: 9999 })
+      console.log('[members] ungrouped response:', JSON.stringify(ungroupedResult).slice(0, 500))
+      if (ungroupedResult.success) {
+        members.value = ungroupedResult.data?.list || ungroupedResult.data?.records || (Array.isArray(ungroupedResult.data) ? ungroupedResult.data : [])
+      } else {
+        members.value = []
+      }
+    } catch (e) {
+      console.error('[members] ungrouped load failed:', e)
+      members.value = []
+    }
+  } catch (e) {
+    console.error('Load all failed:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+function collectGroupIds(groups: any[]): number[] {
+  const ids: number[] = []
+  for (const g of groups) {
+    ids.push(g.id)
+    if (g.children?.length) {
+      ids.push(...collectGroupIds(g.children))
+    }
+  }
+  return ids
+}
+
+function injectMembers(groups: any[], membersByGroup: Map<number, any[]>) {
+  for (const g of groups) {
+    g.members = membersByGroup.get(g.id) || []
+    if (g.children?.length) {
+      injectMembers(g.children, membersByGroup)
+    }
+  }
+}
+
+function handleSearch() {
+  // 客户端过滤，由 computed 自动处理
+}
+
+function handleCreateGroup() {
+  editingGroup.value = null
+  parentGroupId.value = null
+  groupForm.value = { name: '' }
+  showGroupDialog.value = true
+}
+
+function handleCreateSubGroup(node: any) {
+  editingGroup.value = null
+  parentGroupId.value = node.id
+  groupForm.value = { name: '' }
+  showGroupDialog.value = true
+}
+
+function handleEditGroup(node: any) {
+  editingGroup.value = node
+  parentGroupId.value = null
+  groupForm.value = { name: node.name || '' }
+  showGroupDialog.value = true
+}
+
+async function handleDeleteGroup(node: any) {
+  try {
+    await ElMessageBox.confirm(t('team.confirmDeleteGroup'), t('common.confirm'))
+    const result = await callTeamRpc('delete_group', { groupId: node.id })
+    if (result.success) {
+      ElMessage.success(t('team.deleteGroupSuccess'))
+      loadAll()
+    } else {
+      ElMessage.error(result.msg || t('common.error'))
+    }
+  } catch { /* cancelled */ }
+}
+
+async function saveGroup() {
+  if (!groupForm.value.name.trim()) return
+  savingGroup.value = true
+  try {
+    let result: any
+    if (editingGroup.value) {
+      result = await callTeamRpc('update_group', {
+        groupId: editingGroup.value.id,
+        data: { name: groupForm.value.name.trim() }
+      })
+    } else {
+      const data: any = { name: groupForm.value.name.trim() }
+      if (parentGroupId.value) data.parentId = parentGroupId.value
+      result = await callTeamRpc('create_group', { data })
+    }
+    if (result.success) {
+      ElMessage.success(editingGroup.value ? t('team.editGroupSuccess') : t('team.createGroupSuccess'))
+      showGroupDialog.value = false
+      loadAll()
+    } else {
+      ElMessage.error(result.msg || t('common.error'))
+    }
+  } catch (e) {
+    ElMessage.error(t('common.error'))
+  } finally {
+    savingGroup.value = false
+  }
+}
+
+async function handleSetAdmin(node: any) {
+  try {
+    const result = await callTeamRpc('set_member_admin', { memberId: node._raw?.id || node.id || node.userId })
+    if (result.success) {
+      ElMessage.success(t('team.setAdminSuccess'))
+      loadAll()
+    } else {
+      ElMessage.error(result.msg || t('common.error'))
+    }
+  } catch { ElMessage.error(t('common.error')) }
+}
+
+async function handleRemoveAdmin(node: any) {
+  try {
+    const result = await callTeamRpc('remove_member_admin', { memberId: node._raw?.id || node.id || node.userId })
+    if (result.success) {
+      ElMessage.success(t('team.removeAdminSuccess'))
+      loadAll()
+    } else {
+      ElMessage.error(result.msg || t('common.error'))
+    }
+  } catch { ElMessage.error(t('common.error')) }
+}
+
+async function handleRemoveMember(node: any) {
+  try {
+    await ElMessageBox.confirm(t('team.confirmRemoveMember'), t('common.confirm'))
+    const result = await callTeamRpc('remove_member', { memberId: node._raw?.id || node.id || node.userId })
+    if (result.success) {
+      ElMessage.success(t('team.removeMemberSuccess'))
+      loadAll()
+    } else {
+      ElMessage.error(result.msg || t('common.error'))
+    }
+  } catch { /* cancelled */ }
+}
+
+onMounted(() => {
+  loadAll()
+})
+</script>
+
+<style scoped>
+.members-panel {
+  /* 容器 */
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.tool-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: var(--radius-pill);
+  background: var(--btn-ghost-bg);
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--btn-ghost-text);
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.tool-btn:hover { background: var(--border-color); }
+
+/* 树状表格 */
+.tree-table {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius, 8px);
+  overflow: hidden;
+}
+
+.tree-table-header {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  background: var(--btn-ghost-bg);
+  border-bottom: 1px solid var(--border-color);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.tree-table-header .cell {
+  display: flex;
+  align-items: center;
+}
+
+/* 列宽（与 TreeNode 保持一致） */
+.cell-checkbox { width: 40px; flex-shrink: 0; justify-content: center; }
+.cell-name { flex: 1; min-width: 0; padding-left: 12px; }
+.cell-role { width: 100px; flex-shrink: 0; }
+.cell-credits { width: 100px; flex-shrink: 0; }
+.cell-actions { width: 80px; flex-shrink: 0; justify-content: flex-end; padding-right: 8px; }
+
+.tree-table-body {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.loading, .empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-muted);
+}
+
+@media (max-width: 768px) {
+  .cell-role,
+  .cell-credits { display: none; }
+  .cell-actions { width: 50px; }
+  .toolbar { flex-direction: column; align-items: stretch; }
+}
+</style>