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>