Spaces:

3PMusketeers
/

DecisionMaker

Paused

+{
+  "name": "vue-second-hand-platform",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "ajv-formats": "^3.0.1",
+    "axios": "^1.7.8",
+    "core-js": "^3.8.3",
+    "json-schema-traverse": "^1.0.0",
+    "vue": "^3.2.13",
+    "vue-router": "^4.5.0",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "sass": "^1.81.0",
+    "sass-loader": "^16.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {
+    "vue/no-parsing-error": "off",
+    "vue/multi-word-component-names": ["error", {
+      "ignores": ["Result"]
+    }],
+    "no-unused-vars": ["warn"]
+  }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

frontend/public/favicon.ico ADDED Viewed

frontend/public/index.html ADDED Viewed

	@@ -0,0 +1,17 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vue App</title>
+  <link rel="icon" href="<YOUR_ICON_PATH>" />
+</head>
+<body>
+  <!-- 这里是 Vue 渲染的根元素 -->
+  <div id="app"></div>
+  <!-- Vue 的构建文件，这些会在构建时自动注入 -->
+  <script src="/js/chunk-vendors.js"></script>
+  <script src="/js/app.js"></script>
+</body>
+</html>

frontend/src/App.vue ADDED Viewed

	@@ -0,0 +1,16 @@

+<template>
+  <div id="app">
+    <!-- 在此处渲染路由对应的组件 -->
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+export default {
+  name: 'App',
+};
+</script>
+<style>
+/* 样式，可以根据需要添加 */
+</style>

frontend/src/components/ChatInterface.vue ADDED Viewed

	@@ -0,0 +1,357 @@

+<template>
+<div id="chat-interface"> <!-- 给根元素添加一个唯一ID -->
+    <!-- 页面内容 -->
+    <div v-if="loading" class="loading-popup">Generating...</div>
+    <!-- 其余页面内容 -->
+    <div class="chat-container">
+    <header class="header">
+      <button class="menu-btn" @click="goToDecisionList">
+        <img
+          loading="lazy"
+          src="https://cdn.builder.io/api/v1/image/assets/TEMP/91eadb055de4658009ff495b7d3d28943f962d04f4c2f04b6234085498a9fdae?apiKey=27a3cbc05333484ba783c786c92a1338&"
+          alt="Navigation menu"
+          class="menu-icon"
+        />
+      </button>
+      <h1 class="header-title">New Project</h1>
+      <button class="generate-button" @click="handleGenerate">
+        <img
+          loading="lazy"
+          src="https://cdn.builder.io/api/v1/image/assets/TEMP/455e4dfbb678e02c3414ec1d1e17cc6ec99f1c8579a6232f69f60078f6780750?apiKey=27a3cbc05333484ba783c786c92a1338&"
+          alt="Generate new project"
+          class="generate-icon"
+        />
+        <span>Generate</span>
+      </button>
+    </header>
+    <main class="chat-content">
+      <!-- Displaying AI assistant's initial message -->
+      <div v-for="(message, index) in messages" :key="index" :class="['message-container', message.sender]">
+        <img
+          v-if="message.sender === 'assistant'"
+          loading="lazy"
+          src="https://cdn.builder.io/api/v1/image/assets/TEMP/71cd10158e03c2dd193a89b87b9d4fbc4ee62eb60e57692bacf8a038df1f8bfe?apiKey=27a3cbc05333484ba783c786c92a1338&"
+          alt="AI Assistant avatar"
+          class="avatar"
+        />
+        <img
+          v-if="message.sender === 'user'"
+          loading="lazy"
+          src="https://cdn.builder.io/api/v1/image/assets/TEMP/05f7922f2b1c187beb89f24d171c6fbc6ba9230ec5b5aa86d29a816aad2cce17?apiKey=27a3cbc05333484ba783c786c92a1338&"
+          alt="User avatar"
+          class="avatar"
+        />
+        <p class="message">{{ message.text }}</p>
+      </div>
+      <!-- User input form -->
+      <form class="input-form" @submit.prevent="handleSubmit">
+        <label for="userInput" class="visually-hidden">Type your message</label>
+        <input
+          type="text"
+          id="userInput"
+          class="message-input"
+          v-model="userInput"
+        />
+        <button type="submit" class="send-button" aria-label="Send message">
+          <img
+            loading="lazy"
+            src="https://cdn.builder.io/api/v1/image/assets/TEMP/9faeb997ab01c69b2ecc19005ad6e9efa83b95810045fd99a2a93fe1348be8b0?apiKey=27a3cbc05333484ba783c786c92a1338&"
+            alt="Send icon"
+            class="send-icon"
+          />
+        </button>
+      </form>
+    </main>
+  </div>
+  </div>
+  <!-- Conditional Loading Popup -->
+  <div v-if="loading" class="loading-popup">
+    <span>Generating...</span>
+  </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+export default defineComponent({
+  name: 'ChatInterface',
+  setup() {
+    onMounted(() => {
+    const container = document.getElementById('chat-interface'); // 获取特定页面容器
+    if (container) {
+    container.style.zoom = "0.8"; // 页面缩小到 80%
+    }
+    });
+    const loading = ref(false);
+    const userInput = ref('') // 用户输入
+    const messages = ref([ // 初始的Assistant消息
+    { sender: 'assistant', text:
+    'Hello! I am your AI assistant. Let\'s get started.Please enter your decision topic and specific content.'
+    }
+    ])
+    const step = ref(0) // 用来追踪对话阶段
+    const router = useRouter()
+    // 在组件挂载时，从 localStorage 中恢复对话内容
+    onMounted(() => {
+    const savedMessages = localStorage.getItem('NewwwwchatMessages')
+    if (savedMessages) {
+    messages.value = JSON.parse(savedMessages)
+    }
+    })
+    // 提交函数：用户输入后更新消息
+    const handleSubmit = () => {
+    if (!userInput.value.trim()) return
+    // 记录用户输入
+    messages.value.push({ sender: 'user', text: userInput.value })
+    setTimeout(() => {
+    // 根据当前对话阶段的step值回复不同内容
+    if (step.value === 0) {
+    // 第一阶段：询问关于offer的基本信息
+    messages.value.push({
+    sender: 'assistant',
+    text: 'Great! When considering an offer, you can look at several aspects like salary, location, company culture, and career growth. Could you please provide me with more details on these points? For example: "The offer is for a Software Engineer role with a salary of $X in Location Y."'
+    })
+    step.value++ // 进入下一阶段
+    } else if (step.value === 1) {
+    // 第二阶段：询问用户的个人偏好
+    messages.value.push({
+    sender: 'assistant',
+    text: 'Thanks! Now, could you tell me about your preferences and rate the importance of each aspect in your mind? For example: "salary:2, location:3, company culture:4, career growth:5."'
+    })
+    step.value++ // 进入下一阶段
+    } else if (step.value === 2) {
+    // 第三阶段：询问用户的个人信息
+    messages.value.push({
+    sender: 'assistant',
+    text: 'Got it! Is there any personal detail you want to share with me that are relevant to this decision? For example: "I have a family and the school district is important to me."'
+    })
+    step.value++ // 进入下一阶段
+    } else if (step.value === 3) {
+    // 用户已完成输入，等待用户确认
+    messages.value.push({
+    sender: 'assistant',
+    text: 'Thanks for providing all the details. Please type "Finished" when you are done.'
+    })
+    } else if (step.value === 4 && userInput.value.trim().toLowerCase() === 'finished') {
+    // 用户输入 "finished"，生成决策报告
+    messages.value.push({
+    sender: 'assistant',
+    text: 'OK, I will now generate your decision report.'
+    })
+    handleGenerate() // 跳转到结果页面
+    }
+    // 更新 localStorage
+    localStorage.setItem('NewwwwchatMessages', JSON.stringify(messages.value))
+    }, 10000)
+    // 清空输入框
+    userInput.value = ''
+    }
+    // 用户输入 "Finished" 后生成报告
+    const handleGenerate = () => {
+      loading.value = true;  // 设置 loading 为 true，显示弹窗
+      console.log("Loading started", loading.value);
+      setTimeout(() => {
+        loading.value = false;  // 10秒后隐藏弹窗
+        router.push('/result');  // 跳转到结果页面
+      }, 20000);  // 延迟10秒
+    };
+    return {
+      userInput,
+      messages,
+      handleSubmit,
+      handleGenerate
+    }
+  }
+})
+</script>
+  <style scoped>
+  .loading-popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);  /* 居中显示 */
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 20px;
+    border-radius: 5px;
+    font-size: 18px;
+    text-align: center;
+    z-index: 9999;  /* 确保它在最上面 */
+  }
+  .chat-container {
+    background-color: #f1f3ff;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    font-family: Inter, sans-serif;
+  }
+  .header {
+    background-color: #51d4e0;
+    box-shadow: 9px 0 16px rgba(0, 0, 0, 0.02);
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24px 36px;
+  }
+  .menu-icon {
+    width: 13px;
+    aspect-ratio: 0.57;
+    object-fit: contain;
+  }
+  .header-title {
+    color: #fff;
+    font-size: 32px;
+    font-weight: 600;
+  }
+  .generate-button {
+    border-radius: 30px;
+    background-color: #fff;
+    display: flex;
+    gap: 7px;
+    align-items: center;
+    font-size: 20px;
+    color: #51d4e0;
+    font-weight: 700;
+    padding: 10px 17px;
+    border: 2px solid #51d4e0;
+    cursor: pointer;
+    margin-right: 80px;
+  }
+  .generate-icon {
+    width: 24px;
+    aspect-ratio: 1;
+    object-fit: contain;
+    border-radius: 30px;
+  }
+  .chat-content {
+    border-radius: 10px;
+    background-color: #fff;
+    box-shadow: 0 0 19px rgba(0, 0, 0, 0.05);
+    margin-top: 26px;
+    padding: 57px 62px;
+  }
+  .message-container {
+    display: flex;
+    gap: 40px;
+    margin-bottom: 40px;
+  }
+  .message-container.user {
+    flex-direction: row-reverse;
+  }
+  .avatar {
+    width: 70px;
+    aspect-ratio: 1;
+    object-fit: contain;
+  }
+  .message {
+    border-radius: 35px;
+    padding: 20px 56px;
+    font-size: 24px;
+  }
+  .message-container.assistant .message {
+    background-color: #f3f3f3;
+  }
+  .message-container.user .message {
+    background-color: #51d4e0;
+    color: #fff;
+  }
+  .list-item {
+    font-weight: 700;
+    line-height: 36px;
+  }
+  .input-form {
+    position: fixed;
+    bottom: 40px;
+    left: 20px;
+    right:100px;
+    width: 95%;
+    background-color: #f3f3f3;
+    display: flex;
+    align-items: center;
+    padding: 10px 30px;
+    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
+    }
+  .message-input {
+    background: none;
+    border: none;
+    color: #b4b4b4;
+    font-size: 24px;
+    width: 100%;
+    margin-right: 20px;
+  }
+  .message-input:focus {
+    outline: none;
+  }
+  .send-icon {
+    width: 53px;
+    aspect-ratio: 1;
+    object-fit: contain;
+  }
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+  @media (max-width: 991px) {
+    .header {
+      padding: 0 20px;
+    }
+    .chat-content {
+      padding: 0 20px;
+    }
+    .message {
+      padding: 20px;
+    }
+    .input-form {
+      margin-top: 40px;
+      padding: 16px 20px;
+    }
+    .generate-button {
+      white-space: normal;
+    }
+  }
+  </style>

frontend/src/components/DecisionAfter.vue ADDED Viewed

	@@ -0,0 +1,273 @@

+<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" @click="goToSurfacePro816">
+            <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: "Intern Selection",
+            keyNotes: { Tiktok: 91, Tencent: 84 },
+            analysis:
+              "Choose TikTok for creativity and global exposure; pick Tencent for diverse platforms and strong influence in China's tech ecosystem, ideal for networking and innovation opportunities.",
+            category: "Business",
+            categoryColor: "#4CAF50",
+            starred: true,
+          },
+          {
+            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 页面
+      },
+      goToSurfacePro816() {
+      // 使用路由跳转到 SurfacePro816 页面
+      this.$router.push({ name: 'surface-pro-816' });
+    },
+    },
+  };
+  </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>

frontend/src/components/DecisionList.vue ADDED Viewed

	@@ -0,0 +1,260 @@

+<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>

frontend/src/components/InternSelection.vue ADDED Viewed

	@@ -0,0 +1,255 @@

+<template>
+  <div id="app">
+    <!-- 标题 -->
+    <div class="header">
+      <h1>Intern Selection</h1>
+    </div>
+    <!-- 关键指标 -->
+    <section class="key-notes">
+      <h2>Key Notes</h2>
+      <div class="score-item" v-for="(item, index) in scores" :key="index">
+        <div class="score-title">
+          <span>{{ item.name }}</span>
+          <span>{{ item.score }}</span>
+        </div>
+        <div class="score-bar">
+          <div class="score-fill" :style="{ width: item.score + '%' }"></div>
+        </div>
+      </div>
+      <!-- 单独的 result-text 部分 -->
+      <p class="result-text">
+        <strong>{{ result.main }}</strong>
+        {{ result.detail }}
+      </p>
+    </section>
+    <!-- 分析部分 -->
+    <section class="analysis" v-if="decisions.length">
+      <h2>Analysis</h2>
+      <div v-for="(decision, index) in decisions" :key="index" class="decision-card">
+        <span class="number">{{ index + 1 }}</span>
+        <div class="decision-text">
+          <strong>{{ decision.main }}</strong>
+          {{ decision.detail }}
+        </div>
+      </div>
+    </section>
+    <!-- 按钮 -->
+    <div class="footer">
+      <button class="chat-button" @click="goChatting">
+        Go Chatting!
+      </button>
+    </div>
+    <div class="footer1">
+      <button class="chat-button" @click="returnList">
+        Return
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'InternSelection',
+  data() {
+  return {
+    scores: [
+      { name: 'Tiktok', score: 91 },
+      { name: 'Tencent', score: 84 },
+    ],
+    decisions: [
+      {
+        main: "Salary Comparison - 91 | 85  ",
+        detail: "TikTok offers a higher salary package, including bonuses and stock options, making it more attractive financially. In contrast, Tencent's salary is competitive but slightly lower than TikTok’s, with fewer additional incentives.",
+      },
+      {
+        main: "Location - 87 | 92  ",
+        detail: "TikTok's headquarters in Singapore provides international exposure and networking opportunities, ideal for those looking to work in a global environment. Tencent’s Shenzhen office is a great option for those wanting to immerse themselves in China's tech ecosystem, though it's more localized.",
+      },
+      {
+        main: "Company Culture - 90 |85  ",
+        detail: "TikTok promotes a creative and flexible work culture, encouraging innovation and personal growth. Tencent, while still offering a solid work environment, has a more traditional, hierarchical structure that may feel restrictive for some.",
+      },
+      {
+        main: "Work-Life Balance - 86 | 84  ",
+        detail: "TikTok offers a better work-life balance with fewer demands on after-hours work, making it a more relaxed environment. Tencent is known for its high-pressure culture, with long hours and a stronger focus on performance.",
+      },
+      {
+        main: "Career Development - 95 |80  ",
+        detail: "TikTok offers faster career progression with more opportunities to move across departments and regions, giving employees more visibility. Tencent offers a solid career development path, but advancement can be slower and more dependent on internal networking.",
+      }
+    ],
+    // 注意这里是一个对象，不是数组
+    result: {
+      main: 'TikTok is a better fit based on salary, location, culture, and career growth, according to your preferences and priorities. ',
+      detail: 'TikTok is a better fit for those seeking a fast-paced, innovative environment with global exposure and a healthier work-life balance.'
+    }
+  }
+},
+  methods: {
+    goChatting() {
+      // 点击按钮返回到聊天页面
+      this.$router.push('/chat-interface')
+    },
+    returnList() {
+      // 点击按钮返回到决策列表页面
+      this.$router.push({ name: 'decision-after' });
+    },
+  },
+})
+</script>
+<style scoped>
+/* 全局样式 */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #f9f9f9;
+  color: #333;
+}
+#app {
+  max-width: 900px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+/* 标题样式 */
+.header h1 {
+  font-size: 2rem;
+  color: #52c8e8;
+  margin-bottom: 10px;
+}
+/* 关键指标样式 */
+.key-notes h2 {
+  font-size: 1.5rem;
+  margin-bottom: 15px;
+}
+.score-item {
+  margin: 10px 0;
+}
+.score-title {
+  display: flex;
+  justify-content: space-between;
+  font-size: 1rem;
+  margin-bottom: 5px;
+}
+.score-bar {
+  background-color: #ddd;
+  border-radius: 10px;
+  height: 10px;
+  overflow: hidden;
+}
+.score-fill {
+  background-color: #52c8e8;
+  height: 100%;
+}
+/* 结果文字 */
+.result-text {
+  margin-top: 15px;
+  font-size: 1rem;
+}
+/* 分析部分样式 */
+.analysis h2 {
+  margin-top: 40px;
+  font-size: 1.5rem;
+  margin-bottom: 15px;
+}
+.decision-card {
+  display: flex;
+  background-color: #f2f8fc;
+  border-left: 4px solid #52c8e8;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+}
+.decision-card .number {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-right: 10px;
+}
+.decision-text {
+  font-size: 1rem;
+}
+.decision-card:last-child {
+  margin-bottom: 100px;  /* Adjust this value for more or less space */
+}
+/* 按钮样式 */
+.footer1 {
+  position: absolute; /* 绝对定位 */
+  top: 80px; /* 距离底部 20px */
+  right: 0; /* 距离右侧 40px */
+  text-align: center;
+}
+.footer1 .chat-button {
+    border-radius: 30px;
+    background-color: #fff;
+    display: flex;
+    gap: 7px;
+    align-items: center;
+    font-size: 20px;
+    color: #42b0cf;
+    font-weight: 700;
+    padding: 10px 17px;
+    border: 2px solid#42b0cf;
+    cursor: pointer;
+    margin-right: 80px;
+}
+.footer1 .chat-button:hover {
+  background-color:#51d4e0; /* 悬停时背景色 */
+}
+.footer {
+  position: absolute; /* 绝对定位 */
+  top: 15px; /* 距离底部 20px */
+  right: 0; /* 距离右侧 40px */
+  text-align: center;
+}
+.footer .chat-button {
+    border-radius: 30px;
+    background-color: #fff;
+    display: flex;
+    gap: 7px;
+    align-items: center;
+    font-size: 20px;
+    color: #42b0cf;
+    font-weight: 700;
+    padding: 10px 17px;
+    border: 2px solid#42b0cf;
+    cursor: pointer;
+    margin-right: 80px;
+}
+.footer .chat-button:hover {
+  background-color:#51d4e0; /* 悬停时背景色 */
+}
+</style>

frontend/src/components/SurfacePro816.vue ADDED Viewed

	@@ -0,0 +1,255 @@

+<template>
+  <div id="app">
+    <!-- 标题 -->
+    <div class="header">
+      <h1>Intern Selection</h1>
+    </div>
+    <!-- 关键指标 -->
+    <section class="key-notes">
+      <h2>Key Notes</h2>
+      <div class="score-item" v-for="(item, index) in scores" :key="index">
+        <div class="score-title">
+          <span>{{ item.name }}</span>
+          <span>{{ item.score }}</span>
+        </div>
+        <div class="score-bar">
+          <div class="score-fill" :style="{ width: item.score + '%' }"></div>
+        </div>
+      </div>
+      <!-- 单独的 result-text 部分 -->
+      <p class="result-text">
+        <strong>{{ result.main }}</strong>
+        {{ result.detail }}
+      </p>
+    </section>
+    <!-- 分析部分 -->
+    <section class="analysis" v-if="decisions.length">
+      <h2>Analysis</h2>
+      <div v-for="(decision, index) in decisions" :key="index" class="decision-card">
+        <span class="number">{{ index + 1 }}</span>
+        <div class="decision-text">
+          <strong>{{ decision.main }}</strong>
+          {{ decision.detail }}
+        </div>
+      </div>
+    </section>
+    <!-- 按钮 -->
+    <div class="footer">
+      <button class="chat-button" @click="goChatting">
+        Go Chatting!
+      </button>
+    </div>
+    <div class="footer1">
+      <button class="chat-button" @click="returnList">
+        Return
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'InternSelection',
+  data() {
+  return {
+    scores: [
+      { name: 'Tiktok', score: 91 },
+      { name: 'Tencent', score: 84 },
+    ],
+    decisions: [
+      {
+        main: "Salary Comparison - 91 | 85  ",
+        detail: "TikTok offers a higher salary package, including bonuses and stock options, making it more attractive financially. In contrast, Tencent's salary is competitive but slightly lower than TikTok’s, with fewer additional incentives.",
+      },
+      {
+        main: "Location - 87 | 92  ",
+        detail: "TikTok's headquarters in Singapore provides international exposure and networking opportunities, ideal for those looking to work in a global environment. Tencent’s Shenzhen office is a great option for those wanting to immerse themselves in China's tech ecosystem, though it's more localized.",
+      },
+      {
+        main: "Company Culture - 90 |85  ",
+        detail: "TikTok promotes a creative and flexible work culture, encouraging innovation and personal growth. Tencent, while still offering a solid work environment, has a more traditional, hierarchical structure that may feel restrictive for some.",
+      },
+      {
+        main: "Work-Life Balance - 86 | 84  ",
+        detail: "TikTok offers a better work-life balance with fewer demands on after-hours work, making it a more relaxed environment. Tencent is known for its high-pressure culture, with long hours and a stronger focus on performance.",
+      },
+      {
+        main: "Career Development - 95 |80  ",
+        detail: "TikTok offers faster career progression with more opportunities to move across departments and regions, giving employees more visibility. Tencent offers a solid career development path, but advancement can be slower and more dependent on internal networking.",
+      }
+    ],
+    // 注意这里是一个对象，不是数组
+    result: {
+      main: 'TikTok is a better fit based on salary, location, culture, and career growth, according to your preferences and priorities. ',
+      detail: 'TikTok is a better fit for those seeking a fast-paced, innovative environment with global exposure and a healthier work-life balance.'
+    }
+  }
+},
+  methods: {
+    goChatting() {
+      // 点击按钮返回到聊天页面
+      this.$router.push('/chat-interface')
+    },
+    returnList() {
+      // 点击按钮返回到决策列表页面
+      this.$router.push({ name: 'decision-after' });
+    },
+  },
+})
+</script>
+<style scoped>
+/* 全局样式 */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #f9f9f9;
+  color: #333;
+}
+#app {
+  max-width: 900px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+/* 标题样式 */
+.header h1 {
+  font-size: 2rem;
+  color: #52c8e8;
+  margin-bottom: 10px;
+}
+/* 关键指标样式 */
+.key-notes h2 {
+  font-size: 1.5rem;
+  margin-bottom: 15px;
+}
+.score-item {
+  margin: 10px 0;
+}
+.score-title {
+  display: flex;
+  justify-content: space-between;
+  font-size: 1rem;
+  margin-bottom: 5px;
+}
+.score-bar {
+  background-color: #ddd;
+  border-radius: 10px;
+  height: 10px;
+  overflow: hidden;
+}
+.score-fill {
+  background-color: #52c8e8;
+  height: 100%;
+}
+/* 结果文字 */
+.result-text {
+  margin-top: 15px;
+  font-size: 1rem;
+}
+/* 分析部分样式 */
+.analysis h2 {
+  margin-top: 40px;
+  font-size: 1.5rem;
+  margin-bottom: 15px;
+}
+.decision-card {
+  display: flex;
+  background-color: #f2f8fc;
+  border-left: 4px solid #52c8e8;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+}
+.decision-card .number {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-right: 10px;
+}
+.decision-text {
+  font-size: 1rem;
+}
+.decision-card:last-child {
+  margin-bottom: 100px;  /* Adjust this value for more or less space */
+}
+/* 按钮样式 */
+.footer1 {
+  position: absolute; /* 绝对定位 */
+  top: 80px; /* 距离底部 20px */
+  right: 0; /* 距离右侧 40px */
+  text-align: center;
+}
+.footer1 .chat-button {
+    border-radius: 30px;
+    background-color: #fff;
+    display: flex;
+    gap: 7px;
+    align-items: center;
+    font-size: 20px;
+    color: #42b0cf;
+    font-weight: 700;
+    padding: 10px 17px;
+    border: 2px solid#42b0cf;
+    cursor: pointer;
+    margin-right: 80px;
+}
+.footer1 .chat-button:hover {
+  background-color:#51d4e0; /* 悬停时背景色 */
+}
+.footer {
+  position: absolute; /* 绝对定位 */
+  top: 15px; /* 距离底部 20px */
+  right: 0; /* 距离右侧 40px */
+  text-align: center;
+}
+.footer .chat-button {
+    border-radius: 30px;
+    background-color: #fff;
+    display: flex;
+    gap: 7px;
+    align-items: center;
+    font-size: 20px;
+    color: #42b0cf;
+    font-weight: 700;
+    padding: 10px 17px;
+    border: 2px solid#42b0cf;
+    cursor: pointer;
+    margin-right: 80px;
+}
+.footer .chat-button:hover {
+  background-color:#51d4e0; /* 悬停时背景色 */
+}
+</style>

frontend/src/components/UserLogin.vue ADDED Viewed

	@@ -0,0 +1,213 @@

+<template>
+    <div class="login-container">
+      <h2>用户登录</h2>
+      <form @submit.prevent="submitForm">
+        <!-- 用户名/邮箱 -->
+        <div class="form-group">
+          <label for="username">用户名/邮箱：</label>
+          <input
+            type="text"
+            id="username"
+            v-model="username"
+            placeholder="请输入用户名或邮箱"
+            required
+          />
+        </div>
+        <!-- 密码 -->
+        <div class="form-group">
+          <label for="password">密码：</label>
+          <input
+            type="password"
+            id="password"
+            v-model="password"
+            placeholder="请输入密码"
+            required
+          />
+        </div>
+        <!-- 错误信息 -->
+        <div v-if="errorMessage" class="error-message">
+          {{ errorMessage }}
+        </div>
+        <!-- 登录按钮 -->
+        <div class="form-group">
+          <button type="submit">登录</button>
+        </div>
+        <div class="register-link">
+          <p>还没有账号？<router-link to="/register">注册</router-link></p>
+        </div>
+      </form>
+    </div>
+  </template>
+  <script>
+  export default {
+    data() {
+      return {
+        username: "",
+        password: "",
+        errorMessage: "",
+      };
+    },
+    methods: {
+      submitForm() {
+        // 简化后不再校验用户名和密码
+        this.errorMessage = "";
+        // 跳转到 DecisionList 页面
+        this.$router.push('/decision-list'); // 跳转到首页或者 DecisionList 页面
+      },
+    },
+  };
+  </script>
+<style scoped>
+/* 背景设计 */
+body {
+  background: linear-gradient(to right, #6a11cb, #2575fc); /* 漸變背景 */
+  font-family: 'Arial', sans-serif;
+}
+/* 登录容器 */
+.login-container {
+  max-width: 400px;
+  margin: 100px auto;
+  padding: 30px;
+  border-radius: 10px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  background-color: white;
+  text-align: center;
+}
+/* 标题 */
+h2 {
+  font-size: 24px;
+  color: #333;
+  margin-bottom: 30px;
+  font-weight: 600;
+}
+/* 输入框容器 */
+.form-group {
+  margin-bottom: 20px;
+}
+label {
+  font-size: 14px;
+  color: #555;
+  margin-bottom: 8px;
+  display: block;
+  font-weight: 500;
+}
+/* 输入框样式 */
+input {
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  margin-top: 5px;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+}
+/* 输入框聚焦样式 */
+input:focus {
+  border-color: #2575fc;
+  box-shadow: 0 0 5px rgba(37, 117, 252, 0.5);
+  outline: none;
+}
+/* 按钮样式 */
+button {
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  background-color: #2575fc;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+button:hover {
+  background-color: #1d61d6;
+  transform: translateY(-2px);
+}
+/* 错误提示信息 */
+.error-message {
+  color: red;
+  font-size: 14px;
+  margin-top: 10px;
+}
+/* 注册链接 */
+.register-link {
+  margin-top: 20px;
+}
+.register-link a {
+  color: #2575fc;
+  font-size: 14px;
+  text-decoration: none;
+  font-weight: 500;
+}
+.register-link a:hover {
+  text-decoration: underline;
+}
+.profile-container {
+  display: flex;
+}
+.sidebar {
+  width: 250px;
+  padding: 20px;
+  background-color: #f4f4f4;
+}
+.profile-main {
+  flex-grow: 1;
+  padding: 20px;
+}
+.profile-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.profile-header .avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 20px;
+}
+.logout-button {
+  margin-top: 20px;
+}
+.logout-button button {
+  padding: 10px 20px;
+  background-color: #ff4444;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.logout-button button:hover {
+  background-color: #ff0000;
+}
+</style>

frontend/src/main.js ADDED Viewed

	@@ -0,0 +1,8 @@

+// src/main.js
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+createApp(App)
+  .use(router)  // 使用路由
+  .mount('#app');

frontend/src/router.js ADDED Viewed

	@@ -0,0 +1,23 @@

+import { createRouter, createWebHistory } from 'vue-router';
+import ChatInterface from './components/ChatInterface.vue';
+import InternSelection from './components/InternSelection.vue';
+import DecisionList from './components/DecisionList.vue';
+import UserLogin from './components/UserLogin.vue';
+import DecisionAfter from './components/DecisionAfter.vue';
+import SurfacePro816 from './components/SurfacePro816.vue';
+const routes = [
+  { path: '/', component: UserLogin }, // 默认首页显示 UserLogin
+  { path: '/decision-list', component: DecisionList, name: 'decision-list' }, // 路由到 DecisionList 页面
+  { path: '/chat-interface', component: ChatInterface, name: 'chat-interface' }, // 路由到 ChatInterface 页面
+  { path: '/result', component: InternSelection, name: 'result' }, // 路由到 InternSelection 页面
+  { path: '/decision-after', component: DecisionAfter, name: 'decision-after' },
+  { path: '/surface-pro-816', component: SurfacePro816, name: 'surface-pro-816' },// 路由到 DecisionAfter 页面
+];
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+export default router;