fix: git新增大小写追踪

src/modules/model/CollapseItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="collapse-item">
+    <div class="name">{{ models.name }}</div>
+    <a-button type="primary" @click="toUse">{{ $t('management.useBtn') }}</a-button>
+    <icon-delete class="delete-icon" @click="toDelete" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  models: {
+    type: Object,
+    required: true
+  }
+});
+
+const toUse = () => {};
+const toDelete = () => {};
+</script>
+
+<style lang="css" scoped>
+.collapse-item {
+  display: flex;
+  align-items: center;
+  gap: 50px;
+  padding: 10px 30px;
+}
+.name {
+  min-width: 350px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.delete-icon {
+  font-size: 20px;
+  color: rgb(var(--orange-5));
+  cursor: pointer;
+}
+</style>

src/modules/model/MessageBody.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="model-body">
+    <div class="body-item">
+      <div class="item-title">
+        <div class="title">{{ $t('management.addedModel') }}</div>
+        <div class="icon" @click="changeStatusAdd">
+          <template v-if="added_show_status"> {{ $t('management.upBtn') }} <icon-up /> </template>
+          <template v-if="!added_show_status"> {{ $t('management.downBtn') }} <icon-down /> </template>
+        </div>
+      </div>
+      <transition name="expand-collapse" @before-enter="beforeEnter" @enter="enter" @leave="leave">
+        <div v-if="added_show_status">
+          <ModelList v-for="item in added_data" :key="item.id" :model_item="item" @showMore="showMoreModel"></ModelList>
+        </div>
+      </transition>
+    </div>
+    <div class="body-item">
+      <div class="item-title">
+        <div class="title">{{ $t('management.unaddModel') }}</div>
+        <div class="icon" @click="changeStatusUnAdd">
+          <template v-if="unadd_show_status"> {{ $t('management.upBtn') }} <icon-up /> </template>
+          <template v-if="!unadd_show_status"> {{ $t('management.downBtn') }} <icon-down /> </template>
+        </div>
+      </div>
+      <transition name="expand-collapse" @before-enter="beforeEnter" @enter="enter" @leave="leave">
+        <div v-if="unadd_show_status" class="card-list">
+          <CardItem v-for="item in un_added_data" :key="item.id" :name="item.name" :img_src="item.img_src" is_model>
+            <template #labels>
+              <div class="labels">{{ item.keyword }}</div>
+            </template>
+            <template #description>
+              <div class="desc">{{ item.desc }}</div>
+            </template>
+            <template #bottom>
+              <a-button>
+                <template #icon> <icon-plus /> </template>{{ $t('management.addModelBtn') }}</a-button
+              ></template
+            >
+          </CardItem>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import ModelList from './ModelList.vue';
+import CardItem from '../../views/manage/CardItem.vue';
+import { useCollapse } from './use-collapse';
+
+const { beforeEnter, enter, leave } = useCollapse(1000);
+
+const added_data = ref([
+  {
+    id: '1',
+    name: 'OpenAl-APl-Compatible',
+    desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION ',
+    img_src: 'modelFrame1',
+    show_more: false,
+    models: [
+      {
+        id: '1-1',
+        name: 'qwen-2.5-72b-instruct OpenAl-APl'
+      },
+      {
+        id: '1-2',
+        name: 'qwen-2.5-72b-instruct-gptq-int4 OpenAI-API'
+      }
+    ]
+  },
+  {
+    id: '2',
+    name: 'Tongyi-Qianwen',
+    desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION',
+    img_src: 'modelFrame2',
+    show_more: false,
+    models: [
+      {
+        id: '2-1',
+        name: 'qwen-plus'
+      },
+      {
+        id: '2-2',
+        name: 'qwen-turbo'
+      },
+      {
+        id: '2-3',
+        name: 'qwen-vl-plus'
+      }
+    ]
+  },
+  {
+    id: '3',
+    name: 'Xinference',
+    desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION,TEXT RE-RANK',
+    img_src: 'modelFrame3',
+    show_more: false,
+    models: [
+      {
+        id: '3-1',
+        name: 'basic-bge-large-zh-v1.5'
+      }
+    ]
+  }
+]);
+const un_added_data = ref([
+  {
+    id: '1',
+    name: 'OpenAl',
+    keyword: 'LLM,TEXT',
+    desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
+    img_src: 'modelFrame4'
+  },
+  {
+    id: '2',
+    name: 'Moonshot',
+    keyword: 'LLM,TEXT EMBEDDING',
+    desc: '',
+    img_src: 'modelFrame5'
+  },
+  {
+    id: '3',
+    name: 'ZHIPU-AI',
+    keyword: 'LLM,TEXT',
+    desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
+    img_src: 'modelFrame6'
+  },
+  {
+    id: '4',
+    name: 'BaiChuan',
+    keyword: 'LLM,TEXT EMBEDDING',
+    desc: '',
+    img_src: 'modelFrame7'
+  },
+  {
+    id: '5',
+    name: 'DeepSeek',
+    keyword: 'LLM',
+    desc: '',
+    img_src: 'modelFrame8'
+  },
+  {
+    id: '6',
+    name: 'Mistral',
+    keyword: 'LLM,TEXT EMBEDDING',
+    desc: '',
+    img_src: 'modelFrame9'
+  },
+  {
+    id: '7',
+    name: 'StepFun',
+    keyword: 'LLM',
+    desc: '',
+    img_src: 'modelFrame10'
+  }
+]);
+// 展开收起状态
+const added_show_status = ref(true);
+const unadd_show_status = ref(true);
+
+const changeStatusAdd = () => {
+  added_show_status.value = !added_show_status.value;
+  if (!added_show_status.value) {
+    added_data.value.forEach((item) => {
+      item.show_more = false;
+    });
+  }
+};
+const changeStatusUnAdd = () => {
+  unadd_show_status.value = !unadd_show_status.value;
+};
+
+const showMoreModel = (item) => {
+  const index = added_data.value.findIndex((u) => u.id === item.id);
+  if (index !== -1) {
+    added_data.value[index].show_more = !added_data.value[index].show_more;
+  }
+};
+</script>
+<style scoped lang="css">
+.model-body {
+  height: calc(100% - 80px);
+  overflow-y: auto;
+}
+.model-body::-webkit-scrollbar {
+  display: none;
+}
+.body-item {
+  margin-bottom: 50px;
+}
+
+.item-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  cursor: pointer;
+}
+.title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.card-list {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 20px;
+  transition: all 0.3s ease;
+  .labels {
+    color: var(--color-neutral-6);
+  }
+  .desc {
+    font-size: 14px;
+  }
+}
+</style>

src/modules/model/ModelList.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="model-list">
+    <div class="list-header">
+      <div class="list-info">
+        <img class="icon" :src="getIconModel(model_item.img_src)" alt="" />
+        <div class="info-desc">
+          <div class="name">{{ model_item.name }}</div>
+          <div class="desc">{{ model_item.desc }}</div>
+        </div>
+      </div>
+      <div class="list-tools">
+        <a-space>
+          <a-button @click="handlerAddModel">
+            <template #icon>
+              <icon-plus />
+            </template>
+            {{ $t('management.addModelBtn') }}
+          </a-button>
+          <a-button @click="showMoreModel(model_item)">
+            {{ $t('management.showMoreModelBtn') }}
+            <template v-if="model_item.show_more">
+              <icon-down />
+            </template>
+            <template v-if="!model_item.show_more">
+              <icon-up />
+            </template>
+          </a-button>
+          <icon-delete class="delete-icon" @click="handlerDeleteModel" />
+        </a-space>
+      </div>
+    </div>
+    <transition name="expand-collapse" @before-enter="beforeEnter" @enter="enter" @leave="leave">
+      <div v-if="model_item.show_more" class="list-collapse">
+        <CollapseItem v-for="item in model_item.models" :key="item.id" :models="item" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import CollapseItem from './CollapseItem.vue';
+import { useCollapse } from './use-collapse';
+import { getIconModel } from '../common/icon-map';
+
+const props = defineProps({
+  model_item: {
+    request: true,
+    type: Object
+  }
+});
+const emit = defineEmits(['showMore']);
+
+const { beforeEnter, enter, leave } = useCollapse(500);
+
+const handlerAddModel = () => {};
+const handlerDeleteModel = () => {};
+const showMoreModel = (item) => {
+  emit('showMore', item);
+};
+</script>
+<style scoped lang="css">
+.model-list {
+  padding: 20px 30px;
+  margin-top: 10px;
+  background-color: var(--color-bg-2);
+}
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.list-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+  .icon {
+    width: 44px;
+  }
+}
+.info-desc {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.name {
+  font-size: 16px;
+  font-weight: bold;
+}
+.desc {
+  color: var(--color-neutral-4);
+}
+.delete-icon {
+  font-size: 20px;
+  color: rgb(var(--orange-5));
+  cursor: pointer;
+}
+.list-collapse {
+  padding: 20px 20px 0 20px;
+  max-height: 0;
+}
+</style>

src/modules/model/TopSetting.vue

@@ -0,0 +1,17 @@
+<template>
+  <a-space size="large">
+    <a-button type="primary" size="large" @click="handleCreate">
+      <template #icon>
+        <icon-settings />
+      </template>
+      {{ $t('management.setModel') }}
+    </a-button>
+  </a-space>
+</template>
+
+<script setup>
+// 系统模型设置
+const handleCreate = () => {};
+</script>
+<style scoped lang="scss"></style>
+<style></style>

src/modules/model/use-collapse.js

@@ -0,0 +1,31 @@
+import { ref } from 'vue';
+
+// 自定义 Hook 用于过渡效果
+export function useCollapse(initialMaxHeight = 500) {
+  const collapseMaxHeight = ref(initialMaxHeight); // 固定的最大高度
+  // 过渡钩子 - 在元素开始进入时
+  const beforeEnter = (el) => {
+    el.style.maxHeight = 0;
+  };
+
+  // 过渡钩子 - 进入时
+  const enter = (el, done) => {
+    el.offsetHeight; // 强制重排
+    el.style.transition = 'max-height 0.5s ease';
+    el.style.maxHeight = `${collapseMaxHeight.value}px`; // 使用固定的最大高度
+    done();
+  };
+
+  // 过渡钩子 - 离开时
+  const leave = (el, done) => {
+    el.style.transition = 'max-height 0.5s ease';
+    el.style.maxHeight = 0; // 收起时的最小高度
+    done();
+  };
+
+  return {
+    beforeEnter,
+    enter,
+    leave
+  };
+}