cd-aichat 1.0.0

package/src/components/MentionList.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="mention-list">
+    <div
+      v-for="(item, index) in items"
+      :key="item.id"
+      class="mention-item"
+      :class="{ 'is-selected': index === selectedIndex }"
+      @click="selectItem(index)"
+      @mouseenter="selectedIndex = index"
+    >
+      <img
+        v-if="item.avatar"
+        :src="item.avatar"
+        :alt="item.name"
+        class="mention-avatar"
+      />
+      <div v-else class="mention-avatar mention-avatar-placeholder">
+        {{ item.name.charAt(0) }}
+      </div>
+      <div class="mention-info">
+        <div class="mention-name">{{ item.name }}</div>
+        <div v-if="item.account" class="mention-account">{{ item.account }}</div>
+      </div>
+    </div>
+    <div v-if="items.length === 0" class="mention-empty">
+      未找到成员
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, watch } from 'vue';
+
+export default defineComponent({
+  name: 'MentionList',
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    command: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup(props) {
+    const selectedIndex = ref(0);
+
+    watch(() => props.items, () => {
+      selectedIndex.value = 0;
+    });
+
+    const onKeyDown = ({ event }) => {
+      if (event.key === 'ArrowUp') {
+        selectedIndex.value = ((selectedIndex.value + props.items.length) - 1) % props.items.length;
+        return true;
+      }
+
+      if (event.key === 'ArrowDown') {
+        selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
+        return true;
+      }
+
+      if (event.key === 'Enter') {
+        selectItem(selectedIndex.value);
+        return true;
+      }
+
+      return false;
+    };
+
+    const selectItem = (index) => {
+      const item = props.items[index];
+      if (item) {
+        props.command({ id: item.id, label: item.name });
+      }
+    };
+
+    return {
+      selectedIndex,
+      onKeyDown,
+      selectItem,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.mention-list {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 4px;
+  min-width: 220px;
+}
+
+.mention-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.mention-item:hover,
+.mention-item.is-selected {
+  background-color: #f5f5f5;
+}
+
+.mention-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  margin-right: 10px;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+
+.mention-avatar-placeholder {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.mention-info {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.mention-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 2px;
+}
+
+.mention-account {
+  font-size: 12px;
+  color: #999;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mention-empty {
+  padding: 12px;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+</style>

package/src/components/ResourceList.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="resource-list">
+    <div
+      v-for="(item, index) in items"
+      :key="item.id"
+      class="resource-item"
+      :class="{ 'is-selected': index === selectedIndex }"
+      @click="selectItem(index)"
+      @mouseenter="selectedIndex = index"
+    >
+      <div class="resource-icon">
+        <i :class="getResourceIcon(item.type)"></i>
+      </div>
+      <div class="resource-info">
+        <div class="resource-name">{{ item.name }}</div>
+        <div class="resource-meta">
+          <span class="resource-type">{{ getResourceTypeName(item.type) }}</span>
+          <span v-if="item.code" class="resource-code">{{ item.code }}</span>
+        </div>
+      </div>
+    </div>
+    <div v-if="items.length === 0" class="resource-empty">
+      未找到资源
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, watch } from 'vue';
+
+export default defineComponent({
+  name: 'ResourceList',
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    command: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup(props) {
+    const selectedIndex = ref(0);
+
+    watch(() => props.items, () => {
+      selectedIndex.value = 0;
+    });
+
+    const getResourceIcon = (type) => {
+      const iconMap = {
+        dataset: 'ri-database-2-line',
+        datasource: 'ri-server-line',
+        document: 'ri-file-text-line',
+        form: 'ri-file-list-line',
+        report: 'ri-bar-chart-line',
+      };
+      return iconMap[type] || 'ri-file-line';
+    };
+
+    const getResourceTypeName = (type) => {
+      const nameMap = {
+        dataset: '数据集',
+        datasource: '数据源',
+        document: '单据',
+        form: '表单',
+        report: '报表',
+      };
+      return nameMap[type] || '资源';
+    };
+
+    const onKeyDown = ({ event }) => {
+      if (event.key === 'ArrowUp') {
+        selectedIndex.value = ((selectedIndex.value + props.items.length) - 1) % props.items.length;
+        return true;
+      }
+
+      if (event.key === 'ArrowDown') {
+        selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
+        return true;
+      }
+
+      if (event.key === 'Enter') {
+        selectItem(selectedIndex.value);
+        return true;
+      }
+
+      return false;
+    };
+
+    const selectItem = (index) => {
+      const item = props.items[index];
+      if (item) {
+        props.command({
+          id: item.id,
+          label: `${item.name}:${item.code}`,
+          type: item.type,
+          code: item.code
+        });
+      }
+    };
+
+    return {
+      selectedIndex,
+      onKeyDown,
+      selectItem,
+      getResourceIcon,
+      getResourceTypeName,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.resource-list {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 4px;
+  min-width: 260px;
+}
+
+.resource-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.resource-item:hover,
+.resource-item.is-selected {
+  background-color: #f5f5f5;
+}
+
+.resource-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  margin-right: 10px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-size: 18px;
+}
+
+.resource-info {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.resource-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 4px;
+}
+
+.resource-meta {
+  display: flex;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.resource-type {
+  color: #666;
+  background: #f0f0f0;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.resource-code {
+  color: #999;
+  font-family: monospace;
+}
+
+.resource-empty {
+  padding: 12px;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+</style>