feat(agent): 初始化代理仓库并优化UI显示

- 添加默认agent.json配置文件，包含19个预定义代理角色及其简介
- 实现AgentRepo组件挂载时自动读取默认配置逻辑
- 优化任务模板中代理操作项的渲染样式和分割线显示
- 调整卡片悬停样式，去除阴影并添加背景色过渡动画

src/App.vue

@@ -32,7 +32,9 @@ onMounted(() => {
   border: 2px solid var(--color-bg-tertiary);
 
   &:hover {
-    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
+    background: #171b22;
+    box-shadow: none !important;
+    transition: background-color 0.3s ease-in-out;
   }
 
   .el-card__body {

src/layout/components/Main/TaskTemplate/AgentRepo/index.vue

@@ -9,6 +9,7 @@ import { agentMapDuty, getActionTypeDisplay, getAgentMapIcon } from '@/layout/co
 import { type Agent, useAgentsStore } from '@/stores'
 import { onMounted } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
+import { readConfig } from '@/utils/readJson.ts'
 
 const emit = defineEmits<{
   (el: 'resetAgentRepoLine'): void
@@ -16,16 +17,19 @@ const emit = defineEmits<{
 
 const agentsStore = useAgentsStore()
 
+// 如果agentsStore.agents不存在就读取默认配置的json文件
+onMounted(async () => {
+  if (!agentsStore.agents.length) {
+    const res = await readConfig<Agent[]>('agent.json')
+    agentsStore.setAgents(res)
+  }
+  await api.setAgents(agentsStore.agents.map((item) => pick(item, ['Name', 'Profile'])))
+})
+
 const handleScroll = () => {
   emit('resetAgentRepoLine')
 }
 
-onMounted(() => {
-  // 如果已上传就重新发送给后端
-  if (agentsStore.agents.length) {
-    void api.setAgents(agentsStore.agents.map((item) => pick(item, ['Name', 'Profile'])))
-  }
-})
 
 // 上传agent文件
 const fileInput = ref<HTMLInputElement>()
@@ -218,18 +222,23 @@ const agentList = computed(() => {
               :key="item1.key"
               class="text-[12px]"
             >
-            <div>
-              <div class="mx-1 inline-block h-[14px]">
-                <div
-                  :style="{ background: getActionTypeDisplay(item1.ActionType)?.color }"
-                  class="w-[6px] h-[6px] rounded-full mt-[7px]"
-                ></div>
+              <div>
+                <div class="mx-1 inline-block h-[14px]">
+                  <div
+                    :style="{ background: getActionTypeDisplay(item1.ActionType)?.color }"
+                    class="w-[6px] h-[6px] rounded-full mt-[7px]"
+                  ></div>
+                </div>
+                <span :style="{ color: getActionTypeDisplay(item1.ActionType)?.color }"
+                  >{{ getActionTypeDisplay(item1.ActionType)?.name }}：</span
+                >
+                <span>{{ item1.Description }}</span>
               </div>
-              <span :style="{ color: getActionTypeDisplay(item1.ActionType)?.color }">{{ getActionTypeDisplay(item1.ActionType)?.name }}：</span>
-              <span>{{  item1.Description }}</span>
-            </div>
               <!-- 分割线 -->
-              <div v-if="index1 !== taskProcess.filter((i) => i.AgentName === item.Name).length - 1" class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
+              <div
+                v-if="index1 !== taskProcess.filter((i) => i.AgentName === item.Name).length - 1"
+                class="h-[1px] w-full bg-[#494B51] my-[8px]"
+              ></div>
             </div>
           </div>
         </div>