@agentunion/kite 1.5.0 → 1.6.0

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

@@ -0,0 +1,331 @@
+<template>
+  <!-- 分组节点 -->
+  <div v-if="node.type === 'group'" class="tree-node">
+    <div class="tree-row group-row" @click="toggleExpand">
+      <div class="cell cell-checkbox">
+        <!-- 分组行不放复选框，留空对齐 -->
+      </div>
+      <div class="cell cell-name" :style="{ paddingLeft: depth * 20 + 'px' }">
+        <svg class="expand-icon" :class="{ expanded: isExpanded }" width="16" height="16" viewBox="0 0 24 24"
+          fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="9 18 15 12 9 6"/>
+        </svg>
+        <svg class="group-icon" 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"/>
+        </svg>
+        <span class="group-name">{{ node.name }}</span>
+        <span class="member-count">{{ node.memberCount ?? node.children?.length ?? 0 }}</span>
+      </div>
+      <div class="cell cell-role"></div>
+      <div class="cell cell-credits"></div>
+      <div class="cell cell-actions">
+        <div v-if="isAdmin && !node.isUngrouped" class="action-buttons">
+          <button class="action-btn" :title="t('team.createSubGroup')" @click.stop="$emit('create-sub-group', node)">
+            <svg width="14" height="14" 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>
+          </button>
+          <button class="action-btn" :title="t('team.editGroup')" @click.stop="$emit('edit-group', node)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+            </svg>
+          </button>
+          <button class="action-btn danger" :title="t('team.deleteGroup')" @click.stop="$emit('delete-group', node)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="3 6 5 6 21 6"/>
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- 子节点递归渲染 -->
+    <div v-if="isExpanded && node.children?.length" class="tree-children">
+      <TreeNode
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :depth="depth + 1"
+        :is-admin="isAdmin"
+        @create-sub-group="(n: any) => $emit('create-sub-group', n)"
+        @edit-group="(n: any) => $emit('edit-group', n)"
+        @delete-group="(n: any) => $emit('delete-group', n)"
+        @set-admin="(n: any) => $emit('set-admin', n)"
+        @remove-admin="(n: any) => $emit('remove-admin', n)"
+        @remove-member="(n: any) => $emit('remove-member', n)"
+      />
+    </div>
+  </div>
+
+  <!-- 成员节点 -->
+  <div v-else-if="node.type === 'member'" class="tree-node">
+    <div class="tree-row member-row">
+      <div class="cell cell-checkbox">
+        <!-- 预留复选框位置 -->
+      </div>
+      <div class="cell cell-name" :style="{ paddingLeft: depth * 20 + 'px' }">
+        <div class="member-avatar">
+          {{ (node.nickName || node.userName || '?')[0] }}
+        </div>
+        <div class="member-info">
+          <span class="member-name">{{ displayName }}</span>
+          <span v-if="node.remark" class="member-remark">{{ node.remark }}</span>
+        </div>
+      </div>
+      <div class="cell cell-role">
+        <span class="role-badge" :class="roleBadgeClass">{{ roleText }}</span>
+      </div>
+      <div class="cell cell-credits mono">
+        {{ node.credits ?? '-' }}
+      </div>
+      <div class="cell cell-actions">
+        <div v-if="isAdmin" class="action-buttons">
+          <el-dropdown trigger="click" @click.stop>
+            <button class="action-btn" @click.stop>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>
+              </svg>
+            </button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="$emit('set-admin', node)">{{ t('team.setAdmin') }}</el-dropdown-item>
+                <el-dropdown-item @click="$emit('remove-admin', node)">{{ t('team.removeAdmin') }}</el-dropdown-item>
+                <el-dropdown-item divided @click="$emit('remove-member', node)">{{ t('team.removeMember') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from '@/i18n'
+
+const props = defineProps<{
+  node: any
+  depth: number
+  isAdmin: boolean
+}>()
+
+defineEmits<{
+  'create-sub-group': [node: any]
+  'edit-group': [node: any]
+  'delete-group': [node: any]
+  'set-admin': [node: any]
+  'remove-admin': [node: any]
+  'remove-member': [node: any]
+}>()
+
+const { t } = useI18n()
+const isExpanded = ref(true)
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value
+}
+
+const displayName = computed(() => {
+  // 优先显示备注，其次昵称，再用户名，最后 userId
+  return props.node.remark || props.node.nickName || props.node.userName || props.node.userId
+})
+
+const roleText = computed(() => {
+  const r = String(props.node.memberRole)
+  if (r === '0') return t('team.roleCreator')
+  if (r === '1') return t('team.roleAdmin')
+  if (r === '2') return t('team.roleMember')
+  return t('na')
+})
+
+const roleBadgeClass = computed(() => {
+  const r = String(props.node.memberRole)
+  if (r === '0') return 'role-creator'
+  if (r === '1') return 'role-admin'
+  return 'role-member'
+})
+</script>
+
+<style scoped>
+.tree-row {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  border-bottom: 1px solid var(--border-color);
+  transition: background 0.15s;
+}
+
+.tree-row:hover {
+  background: var(--btn-ghost-bg);
+}
+
+.group-row {
+  cursor: pointer;
+  background: var(--bg-secondary, rgba(0, 0, 0, 0.02));
+}
+
+.group-row:hover {
+  background: var(--border-color);
+}
+
+.member-row {
+  background: transparent;
+}
+
+/* 列宽 */
+.cell { display: flex; align-items: center; }
+.cell-checkbox { width: 40px; flex-shrink: 0; justify-content: center; }
+.cell-name { flex: 1; min-width: 0; gap: 8px; overflow: hidden; }
+.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; }
+
+/* 展开图标 */
+.expand-icon {
+  flex-shrink: 0;
+  transition: transform 0.2s;
+  color: var(--text-muted);
+}
+
+.expand-icon.expanded {
+  transform: rotate(90deg);
+}
+
+/* 分组图标 */
+.group-icon {
+  flex-shrink: 0;
+  color: var(--primary);
+}
+
+.group-name {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.member-count {
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--btn-ghost-bg);
+  padding: 1px 8px;
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+
+/* 成员头像 */
+.member-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--primary-light);
+  color: var(--primary);
+  font-weight: 700;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* 成员信息容器 */
+.member-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 1px;
+}
+
+.member-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.member-remark {
+  font-size: 11px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 角色徽章 */
+.role-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+
+.role-creator {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.role-admin {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.role-member {
+  background: var(--btn-ghost-bg);
+  color: var(--text-muted);
+}
+
+.mono {
+  font-family: 'Spline Sans Mono', monospace;
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+/* 操作按钮 */
+.action-buttons {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.action-btn {
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  transition: all 0.15s;
+}
+
+.action-btn:hover {
+  background: var(--btn-ghost-bg);
+  color: var(--text-primary);
+}
+
+.action-btn.danger:hover {
+  color: var(--error);
+}
+
+/* 子节点容器 */
+.tree-children {
+  /* 无额外缩进，通过 paddingLeft 控制 */
+}
+
+@media (max-width: 768px) {
+  .cell-role,
+  .cell-credits { display: none; }
+  .cell-actions { width: 50px; }
+}
+</style>

package/extensions/services/evol/web/src/components/team/stats/StatsExportProgress.vue

@@ -0,0 +1,44 @@
+<template>
+  <div v-if="progress.visible" class="export-progress-overlay">
+    <div class="export-progress-dialog">
+      <div class="progress-content">
+        <div class="cute-loader">
+          <div class="loader-circle"></div>
+          <div class="loader-face">
+            <div class="loader-eyes">
+              <div class="eye left"></div>
+              <div class="eye right"></div>
+            </div>
+            <div class="loader-mouth"></div>
+          </div>
+        </div>
+        <h3 class="progress-title">正在导出数据...</h3>
+        <div class="progress-info">
+          <span class="current-member">{{ progress.currentMember }}</span>
+          <span class="progress-text">{{ progress.current }} / {{ progress.total }}</span>
+        </div>
+        <div class="progress-bar-container">
+          <div class="progress-bar-bg">
+            <div class="progress-bar-fill" :style="{ width: progress.percentage + '%' }">
+              <div class="progress-bar-shine"></div>
+            </div>
+          </div>
+          <div class="progress-percentage">{{ progress.percentage }}%</div>
+        </div>
+        <div class="progress-tip">正在获取成员详细数据，请稍候...</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  progress: {
+    visible: boolean
+    current: number
+    total: number
+    percentage: number
+    currentMember: string
+  }
+}>()
+</script>

package/extensions/services/evol/web/src/components/team/stats/StatsHeader.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="stats-header">
+    <div class="title-with-toggle">
+      <h3 class="stats-title">团队积分统计</h3>
+      <button class="toggle-btn" @click="$emit('toggleStats')" :title="isStatsExpanded ? '收起' : '展开'">
+        <span class="toggle-icon" :class="{ rotated: !isStatsExpanded }">▼</span>
+      </button>
+    </div>
+    <div class="header-controls">
+      <div class="mode-selector">
+        <button class="mode-btn" :class="{ active: statsMode === 'realtime' }" @click="$emit('switchMode', 'realtime')">
+          今日实时
+        </button>
+        <button class="mode-btn" :class="{ active: statsMode === 'history' }" @click="$emit('switchMode', 'history')">
+          历史数据
+        </button>
+        <button class="mode-btn" :class="{ active: statsMode === 'group' }" @click="$emit('switchMode', 'group')">
+          分组
+        </button>
+      </div>
+
+      <!-- 日期控件 -->
+      <div v-if="statsMode === 'history' || statsMode === 'group'" class="date-controls">
+        <select :value="dateRange" @change="$emit('update:dateRange', ($event.target as HTMLSelectElement).value); $emit('dateRangeChange')" class="range-select">
+          <option value="7">最近7天</option>
+          <option value="30">最近30天</option>
+          <option value="week">本周</option>
+          <option value="lastWeek">上周</option>
+          <option value="month">本月</option>
+          <option value="lastMonth">上月</option>
+          <option value="custom">指定日期</option>
+        </select>
+        <div v-if="dateRange === 'custom'" class="custom-date-controls">
+          <button @click="$emit('prevDay')" class="date-nav-btn" title="前一日">◀</button>
+          <input type="date" :value="selectedDate" @change="$emit('update:selectedDate', ($event.target as HTMLInputElement).value); $emit('customDateChange')" class="date-picker" :max="yesterdayStr" />
+          <button @click="$emit('nextDay')" class="date-nav-btn" :disabled="nextDayDisabled" title="后一日">▶</button>
+        </div>
+      </div>
+
+      <!-- 实时指示器 -->
+      <div v-else-if="statsMode === 'realtime'" class="realtime-indicator">
+        <span class="pulse-dot"></span>
+        实时数据
+      </div>
+
+      <!-- 刷新按钮 -->
+      <button class="refresh-btn" :class="{ loading: loading }" @click="$emit('refresh')" title="刷新数据">
+        <span class="refresh-icon" :class="{ spinning: loading }">↻</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { formatDate } from './helpers'
+
+const props = defineProps<{
+  statsMode: string
+  dateRange: string
+  selectedDate: string
+  loading: boolean
+  isStatsExpanded: boolean
+}>()
+
+defineEmits<{
+  switchMode: [mode: string]
+  toggleStats: []
+  'update:dateRange': [value: string]
+  'update:selectedDate': [value: string]
+  dateRangeChange: []
+  customDateChange: []
+  prevDay: []
+  nextDay: []
+  refresh: []
+}>()
+
+const yesterday = new Date()
+yesterday.setDate(yesterday.getDate() - 1)
+const yesterdayStr = formatDate(yesterday)
+
+const nextDayDisabled = computed(() => {
+  if (!props.selectedDate) return true
+  const currentDate = new Date(props.selectedDate)
+  const y = new Date()
+  y.setDate(y.getDate() - 1)
+  return currentDate >= y
+})
+</script>