【代码优化】AI：将对话、聊天挪到 index 目录下，更模块化

src/views/ai/chat/index/role/RoleList.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="card-list" ref="tabsRef"  @scroll="handleTabsScroll">
+    <div class="card-item" v-for="role in roleList" :key="role.id">
+      <el-card class="card" body-class="card-body">
+        <!--  更多 -->
+        <div class="more-container" v-if="showMore">
+          <el-dropdown @command="handleMoreClick">
+          <span class="el-dropdown-link">
+             <el-button type="text" >
+                <el-icon><More /></el-icon>
+              </el-button>
+          </span>
+            <!-- TODO @fan：下面两个 icon，可以使用类似 <Icon icon="ep:question-filled" /> 替代哈 -->
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item :command="['edit', role]" >
+                  <el-icon><EditPen /></el-icon>编辑
+                </el-dropdown-item>
+                <el-dropdown-item :command="['delete', role]"  style="color: red;" >
+                  <el-icon><Delete /></el-icon>
+                  <span>删除</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+        <!--  头像 -->
+        <div>
+          <img class="avatar" :src="role.avatar"/>
+        </div>
+        <div class="right-container">
+          <div class="content-container">
+            <div class="title">{{ role.name }}</div>
+            <div class="description">{{ role.description }}</div>
+          </div>
+          <div class="btn-container">
+            <el-button type="primary" size="small" @click="handleUseClick(role)">使用</el-button>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ChatRoleVO} from '@/api/ai/model/chatRole'
+import {PropType, ref} from "vue";
+import {Delete, EditPen, More} from "@element-plus/icons-vue";
+
+const tabsRef = ref<any>() // tabs ref
+
+// 定义属性
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    required: true
+  },
+  roleList: {
+    type: Array as PropType<ChatRoleVO[]>,
+    required: true
+  },
+  showMore: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+// 定义钩子
+const emits = defineEmits(['onDelete', 'onEdit', 'onUse', 'onPage'])
+
+// more 点击
+const handleMoreClick = async (data) => {
+  const type = data[0]
+  const role = data[1]
+  if (type === 'delete') {
+    emits('onDelete', role)
+  } else {
+    emits('onEdit', role)
+  }
+}
+
+// 使用
+const handleUseClick = (role) => {
+  emits('onUse', role)
+}
+
+const handleTabsScroll = async () => {
+  if (tabsRef.value) {
+    const { scrollTop, scrollHeight, clientHeight } = tabsRef.value;
+    console.log('scrollTop', scrollTop)
+    if (scrollTop + clientHeight >= scrollHeight - 20 && !props.loading) {
+      console.log('分页')
+      // page.value++;
+      // fetchData(page.value);
+      await emits('onPage')
+    }
+  }
+}
+
+onMounted(() => {
+  console.log('props', props.roleList)
+})
+
+</script>
+
+<style lang="scss">
+// 重写 card 组件 body 样式
+.card-body {
+  max-width: 240px;
+  width: 240px;
+  padding: 15px 15px 10px 15px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  position: relative;
+
+}
+</style>
+<style scoped lang="scss">
+
+// 卡片列表
+.card-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  position: relative;
+  height: 100%;
+  overflow: auto;
+  padding: 0px 25px;
+  padding-bottom: 140px;
+  align-items: start;
+  align-content: flex-start;
+  justify-content: start;
+
+  .card {
+    display: inline-block;
+    margin-right: 20px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    position: relative;
+
+    .more-container {
+      position: absolute;
+      top: 0;
+      right: 12px;
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    .right-container {
+      margin-left: 10px;
+      width: 100%;
+      //height: 100px;
+
+      .content-container {
+        height: 85px;
+
+        .title {
+          font-size: 18px;
+          font-weight: bold;
+          color: #3e3e3e;
+        }
+
+        .description {
+          margin-top: 10px;
+          font-size: 14px;
+          color: #6a6a6a;
+        }
+      }
+
+      .btn-container {
+        display: flex;
+        flex-direction: row-reverse;
+        margin-top: 2px;
+      }
+    }
+
+  }
+
+}
+
+</style>