kexueadmin
/
ai-chat-ui
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(stacked-cards): 调整卡片组样式

This commit is contained in:
肖应宇 2026-03-31 15:26:50 +08:00
parent 9b75000841
commit 64c441ba36
4 changed files with 62 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/input/ChatInput.vue
View File

@ -718,8 +718,8 @@ onMounted(() => {
display: grid; display: grid;
place-items: center; place-items: center;
border-radius: 0; border-radius: 0;
width: 88px; width: 50px;
height: 118px; height: 70px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }

7
src/components/sidebar/ChatSidebar.vue
View File

@ -625,6 +625,13 @@ onBeforeUnmount(() => {
} }
} }
.group-list{
gap:5px;
display:flex;
flex-direction:column;
padding: 0 20px;
}
.empty-state { .empty-state {
margin: auto 0; margin: auto 0;
display: flex; display: flex;

1
src/components/sidebar/ConversationItem.vue
View File

@ -175,7 +175,6 @@ function handleDelete() {
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 10px 12px; padding: 10px 12px;
margin: 2px 8px;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;

15
src/components/ui/StackedCards.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue' import { ref, computed, onMounted, onUnmounted } from 'vue'
import { NModal, NImage } from 'naive-ui' import { NModal, NImage } from 'naive-ui'
import PlusIcon from '../icons/custom/PlusIcon.vue'
export interface CardItem { export interface CardItem {
id: string | number id: string | number
title?: string title?: string
@ -27,7 +28,7 @@ interface Props {
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
maxVisible: 5, maxVisible: 5,
spreadGap: 190, spreadGap: 120,
supportsFiles: true, supportsFiles: true,
supportsVision: true, supportsVision: true,
}) })
@ -318,20 +319,20 @@ onUnmounted(() => {
justify-content: center; justify-content: center;
perspective: 1000px; perspective: 1000px;
} }
/* 卡片大小 */
.cards-wrapper { .cards-wrapper {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-end;
min-width: 90px; min-width: 70px;
height: 130px; height: 70px;
} }
.card { .card {
position: absolute; position: absolute;
width: 90px; width: 90%;
height: 120px; height: 100%;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--card-border-color, var(--ffffff, #FFF)); border: 1px solid var(--card-border-color, var(--ffffff, #FFF));
background: url(<path-to-image>) lightgray 50% / cover no-repeat; background: url(<path-to-image>) lightgray 50% / cover no-repeat;