frontend/src/components/DecisionList.vue

<template>

  <div id="decision-list-app">

    <!-- 左侧导航栏 -->

    <aside class="sidebar">

      <input type="text" placeholder="Search" class="search-bar" />

      <div class="status-filters">

        <div class="filter-item active">Decisions <span>15</span></div>

        <div class="filter-item">On-going <span>5</span></div>

        <div class="filter-item">Finished <span>8</span></div>

        <div class="filter-item">Suspend <span>2</span></div>

      </div>

      <div class="category">

        <h3>Category</h3>

        <div class="category-item">Untitled <span>5</span></div>

        <div class="category-item">Business <span>3</span></div>

        <div class="category-item">Study <span>6</span></div>

        <div class="category-item">Entertainment <span>1</span></div>

        <button class="add-category">+</button>

      </div>

      <div class="filter">

        <h3>Filter</h3>

        <div class="filter-item active">Starred</div>

      </div>

    </aside>



    <!-- 主体内容 -->

    <main class="main-content">

      <div class="decision-cards">

        <!-- 决策卡片示例 -->

        <div class="decision-card" v-for="(decision, index) in decisions" :key="index">

          <div class="card-header">

            <h2>{{ decision.title }}</h2>

            <span v-if="decision.starred" class="star-icon">⭐</span>

          </div>

          <div class="key-notes">

            <h3>Key Notes</h3>

            <div v-for="(note, key) in decision.keyNotes" :key="key" class="key-note">

              <span>{{ key }}</span>

              <div class="progress-bar">

                <div class="progress" :style="{ width: note + '%' }"></div>

              </div>

              <span class="value">{{ note }}%</span>

            </div>

          </div>

          <div class="analysis">

            <h3>Analysis</h3>

            <p>{{ decision.analysis }}</p>

          </div>

          <div class="card-footer">

            <span class="update-info">Update: {{ decision.updateTime }}</span>

            <span class="category-label" :style="{ backgroundColor: decision.categoryColor }">

              {{ decision.category }}

            </span>

          </div>

        </div>

      </div>

      <!-- 添加按钮 -->

      <button class="add-btn" @click="goToChatInterface">+</button>

    </main>

  </div>

</template>



<script>

export default {

  data() {

    return {

      // 决策数据

      decisions: [

        {

          title: "School Selection",

          keyNotes: { Stanford: 81, Harvard: 68, MIT: 89 },

          analysis:

            "MIT leads with innovation and top facilities, Stanford excels in research, while Harvard scores lower likely due to metrics favoring STEM over humanities.",

          updateTime: "2024/11/18 22:21",

          category: "Study",

          categoryColor: "#8BC34A",

          starred: false,

        },

        {

          title: "Take GRE Test or Not?",

          keyNotes: { Yes: 71, No: 89 },

          analysis:

            "Skip the GRE if your target schools waive it, or value work experience more. It saves time, cost, and focuses on relevant strengths.",

          updateTime: "2024/11/18 22:21",

          category: "Untitled",

          categoryColor: "#9E9E9E",

          starred: true,

        },

        // 其他卡片数据...

      ],

    };

  },

  methods: {

    goToChatInterface() {

      this.$router.push('/chat-interface'); // 跳转到 chatinterface 页面

    },

  },

};

</script>



<style scoped>

/* 全局设置 */

body {

  margin: 0;

  font-family: Arial, sans-serif;

  box-sizing: border-box;

}



/* 左侧导航栏 */

.sidebar {

  width: 250px;

  height: 100vh;

  background: #f4f4f4;

  padding: 20px;

  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

}



.search-bar {

  width: 100%;

  padding: 10px;

  margin-bottom: 20px;

  border: 1px solid #ddd;

  border-radius: 5px;

}



.status-filters,

.category,

.filter {

  margin-bottom: 30px;

}



.filter-item,

.category-item {

  display: flex;

  justify-content: space-between;

  padding: 10px;

  margin-bottom: 5px;

  border-radius: 5px;

  cursor: pointer;

}



.filter-item.active,

.category-item:hover {

  background: #e0f7fa;

}



.add-category {

  background: #4caf50;

  color: white;

  border: none;

  padding: 10px;

  border-radius: 5px;

  cursor: pointer;

}



/* 主体内容 */



/* 在右下角添加按钮 */

.add-btn {

  position: fixed; /* 固定定位 */

  bottom: 60px;    /* 距离底部20px */

  right: 60px;     /* 距离右侧20px */

  background-color: #4CAF50; /* 按钮背景色 */

  color: white;    /* 按钮文字颜色 */

  border: none;    /* 无边框 */

  border-radius: 50%; /* 圆形按钮 */

  padding: 20px;    /* 按钮大小 */

  font-size: 24px;  /* 图标大小 */

  cursor: pointer; /* 鼠标悬浮时变为指针 */

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 给按钮加阴影 */

  width: 60px; /* 给按钮设置固定宽度 */

  height: 60px; /* 给按钮设置固定高度 */

  display: flex; /* 使用flex布局 */

  justify-content: center; /* 横向居中 */

  align-items: center; /* 纵向居中 */

}



/* 添加按钮的 hover 效果 */

.add-btn:hover {

  background-color: #45a049; /* 鼠标悬浮时的背景色 */

}



/* 确保加号图标是白色 */

.add-btn i {

  color: white;  /* 设置加号图标为白色 */

  font-size: 3rem; /* 如果需要，可以调整图标大小 */

}



 





.main-content {

  flex-grow: 1; /* 占据剩余的宽度 */

  padding: 20px;

  overflow-y: auto;

}



/* 卡片布局 */

.decision-cards {

  display: grid; /* 使用 grid 布局 */

  grid-template-columns: repeat(3, 1fr); /* 每行 3 个卡片 */

  gap: 20px; /* 卡片之间的间距 */

  position: absolute; /* 绝对定位 */

  margin-left: 300px; 

  top: 20px;  /* 距离顶部 20px */

  width: 100%;

  max-width: 900px; /* 容器最大宽度 */

}

.decision-card {

  background: white;

  border-radius: 10px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  padding: 20px;

}



.card-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.key-notes .key-note {

  display: flex;

  align-items: center;

  margin: 10px 0;

}



.progress-bar {

  width: 60%;

  height: 8px;

  background: #ddd;

  border-radius: 5px;

  margin: 0 10px;

}



.progress {

  height: 100%;

  background: #4caf50;

  border-radius: 5px;

}



.card-footer {

  display: flex;

  justify-content: space-between;

  margin-top: 20px;

  font-size: 12px;

}



.category-label {

  padding: 5px 10px;

  border-radius: 5px;

  color: white;

  font-size: 12px;

}



.new-dialog-btn i {

  color: white;

  font-size: 24px;

}

</style>