<script setup lang="ts">
import { ref } from 'vue';
const historyItems = ref([
    { title: '连衣裙设计 v1', time: '2024-01-20 14:30' },
    { title: '连衣裙设计 v2', time: '2024-01-20 14:35' },
]);
</script>

<template>
    <aside id="aside">

        <div class="reference-section">
            <div class="reference-item">
                <h4 class="title">参考资料</h4>
            </div>
            <div class="reference-item">
                <div class="reference-title">高级定制服务</div>
                <div class="reference-desc">优质面料，精致细节</div>
            </div>
            <div class="reference-item">
                <div class="reference-title">高级面料</div>
                <div class="reference-desc">真丝感动</div>
            </div>
        </div>
        <hr style="border: 1px solid #E5E7EB; width: 90%; margin: 38.5px auto;">
        <div class="history-section">
            <h4 class="title">生成历史</h4>
            <div class="history-item" v-for="(item, index) in historyItems" :key="index">
                <div class="history-title">{{ item.title }}</div>
                <div class="history-time">{{ item.time }}</div>
            </div>
        </div>


    </aside>
</template>

<style scoped>
#aside {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: flex-start;
    padding: 0 15.5px 0 17.5px;
    background-color: #EEEAEA;
    box-sizing: border-box;

    .reference-section,
    .history-section {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .reference-item,
    .history-item {
        font-family: Inter;
        font-weight: 200;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #000;
        padding: 8px 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .reference-title {
        font-weight: 500;
        margin-bottom: 4px;
    }

    .reference-desc {
        font-family: Inter;
        font-weight: 400;
        font-size: 13px;
        line-height: 100%;
        letter-spacing: 0%;

        font-size: 12px;
        color: #666;
    }

    .history-title {
        font-weight: 500;
        margin-bottom: 4px;
    }

    .history-time {
        font-size: 12px;
        color: #666;
    }

    .title {
        font-family: Inter;
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #6B7280;
    }
}
</style>