Initial commit: 批量退课工具项目

2025-10-22 17:58:21 +08:00
commit ef9a218bfc
25 changed files with 3743 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,202 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# pyenv
+.python-version
+
+# celery beat schedule file
+celerybeat-schedule
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Node.js
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Vue.js
+.DS_Store
+dist/
+dist-ssr/
+*.local
+
+# Editor directories and files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
--- a/README.md
+++ b/README.md
@@ -0,0 +1,111 @@
+# 学生课程批量退选工具
+
+## 🚀 功能概述
+
+本工具旨在帮助管理员通过 API 自动批量退选学生的课程。
+
+系统会从项目根目录下的 `退课列表.xlsx` 文件中读取学生 ID 和待退选的课程班 ID 列表，然后执行以下操作：
+
+1.  **获取学生课程**：通过 `GET` 请求获取每个学生当前已选的课程班列表。
+2.  **匹配与退课**：在学生的已选课程中匹配需要退选的课程班 ID，并通过 `DELETE` 请求发起退课操作。
+3.  **结果反馈**：在终端清晰地输出每一位学生的处理结果，并在操作结束后提供总结报告。
+
+> **🛡️ 安全第一**：为了防止误操作，本工具采用 **先预览，后确认** 的安全执行模式。
+
+---
+
+## 🛠️ 快速上手指南
+
+### 第 1 步：环境配置 (`.env` 文件)
+
+在首次使用前，请在项目根目录下创建一个名为 `.env` 的文件，并将以下内容复制进去。
+
+```dotenv
+# --- API 配置 ---
+BASE_URL=https://api.seiue.com
+
+
+# --- 身份认证 ---
+# ⚠️ 请将 <你的Token> 替换为有效的 Bearer Token
+AUTHORIZATION="Bearer <你的Token>"
+X_ROLE="shadow"
+X_SCHOOL_ID="665"
+X_REFLECTION_ID="969269"
+SEMESTER_ID=61626
+```
+
+> **⚠️ 注意：**
+> -   **必须** 将 `AUTHORIZATION` 配置项中的 `<你的Token>` 替换为您自己的有效令牌。
+> -   `.env` 文件包含了敏感信息，请 **绝对不要** 将其提交到任何公共代码仓库。
+
+### 第 2 步：准备数据 (`退课列表.xlsx`)
+
+请确保项目根目录下存在 `退课列表.xlsx` 文件，并遵循以下格式：
+
+| 学生ID | 课程班ID |
+| --- | --- |
+| 3831629 | 1820221, 1820210 |
+| 3831630 | 1820456 |
+
+-   **学生ID**: 学生的唯一标识符。
+-   **课程班ID**: 需要退选的一个或多个课程班 ID，多个 ID 之间请用 **英文逗号** `,` 分隔。
+
+### 第 3 步：安装依赖
+
+在项目根目录下打开终端，运行以下命令：
+
+> 👉 **执行安装命令**
+> ```bash
+> pip3 install -r requirements.txt
+> ```
+
+这将安装运行本工具所需的所有库 (`requests`, `openpyxl`, `python-dotenv`)。
+
+### 第 4 步：执行脚本
+
+一切准备就绪后，在项目根目录下运行主程序：
+
+> 👉 **执行主程序**
+> ```bash
+> python3 src/main.py
+> ```
+
+#### 4.1) 预览变更
+
+脚本启动后，将 **自动进入预览模式**。它会分析数据并显示即将发生的操作，但 **不会执行任何实际的退课**。
+
+```
+--- 预览模式: 以下操作将不会实际执行 ---
+---
+➡️ [预览] 学生 3831629 将退课: 体育自主选修, 音乐
+ℹ️ 学生 3831630 无匹配课程班可退。
+---
+```
+
+#### 4.2) 确认执行
+
+预览信息显示完毕后，程序会暂停并等待您的最终确认。
+
+> 👉 **输入 `drop` 确认执行**
+> ```
+> 请检查以上预览信息。
+> 👉 如果确认要执行退课操作，请输入 'drop' 并按 Enter。输入其他任何内容将取消操作: drop
+> ```
+
+-   **确认执行**：精确输入 `drop` 并按回车键，脚本将开始执行实际的退课操作。
+-   **取消操作**：输入任何其他内容（或直接按回车），程序将立即安全退出。
+
+#### 4.3) 查看结果
+
+确认执行后，脚本会处理每个学生，并实时打印结果。全部操作完成后，会显示最终的统计报告。
+
+```
+--- 开始执行批量退课 ---
+---
+✅ 学生 3831629 已退课: 体育自主选修, 音乐
+ℹ️ 学生 3831630 无匹配课程班，跳过。
+
+--- 批量退课结果 ---
+✅ 成功: 1
+❌ 失败: 0
+```
--- a/generate_template.py
+++ b/generate_template.py
@@ -0,0 +1,15 @@
+import pandas as pd
+import os
+
+# Define the path to the public directory
+public_dir = os.path.abspath(os.path.join(os.path.dirname(__file__), 'toolbox-app', 'public'))
+# Define the full path for the Excel file
+file_path = os.path.join(public_dir, '退课列表.xlsx')
+
+# Create a DataFrame with the specified headers
+df = pd.DataFrame(columns=['学生ID', '课程班ID'])
+
+# Save the DataFrame to an Excel file
+df.to_excel(file_path, index=False)
+
+print(f"Template file created at {file_path}")
--- a/requirements.txt
+++ b/requirements.txt
@@ -0,0 +1,5 @@
+requests
+openpyxl
+tqdm
+python-dotenv
+Flask
--- a/src/main.py
+++ b/src/main.py
@@ -0,0 +1,282 @@
+from flask import Flask, request, jsonify, send_from_directory, make_response
+from flask_cors import CORS
+import os
+import pandas as pd
+import requests
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = Flask(__name__)
+CORS(app)
+
+# --- 从 .env 文件加载配置 ---
+BASE_URL = os.getenv("BASE_URL")
+AUTHORIZATION = os.getenv("AUTHORIZATION")
+SEMESTER_ID = os.getenv("SEMESTER_ID")
+X_ROLE = os.getenv("X_ROLE")
+X_SCHOOL_ID = os.getenv("X_SCHOOL_ID")
+X_REFLECTION_ID = os.getenv("X_REFLECTION_ID")
+
+# Use absolute path for the template directory
+TEMPLATE_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), '..', 'toolbox-app', 'public'))
+TEMPLATE_FILENAME = '退课列表.xlsx'
+
+def get_student_info_from_api(student_id):
+    """通过 API 查询学生姓名和班级"""
+    if not all([BASE_URL, AUTHORIZATION, X_ROLE, X_SCHOOL_ID, X_REFLECTION_ID]):
+        return "配置缺失", None, "Error: Missing API configuration"
+
+    headers = {
+        "Authorization": AUTHORIZATION,
+        "X-Role": X_ROLE,
+        "X-School-ID": X_SCHOOL_ID,
+        "X-Reflection-ID": X_REFLECTION_ID
+    }
+    
+    url = f"{BASE_URL}/chalk/role/reflection/students"
+    params = {
+        "id_in": student_id,
+        "policy": "admin"
+    }
+    
+    try:
+        resp = requests.get(url, headers=headers, params=params)
+        resp.raise_for_status()
+        data = resp.json()
+        
+        if data and isinstance(data, list):
+            student_data = data[0]
+            student_name = student_data.get("name", "未知姓名")
+            admin_classes = student_data.get("admin_classes", [])
+            return student_name, admin_classes, None
+        else:
+            return "未找到学生", None, f"No info found for student {student_id}"
+
+    except requests.exceptions.RequestException as e:
+        app.logger.error(f"API request failed for student_id {student_id}: {e}")
+        return "查询失败", None, f"Error fetching info for student {student_id}"
+
+def get_class_info_from_api(student_id, class_ids):
+    """通过 API 查询课程班信息，返回ID和名称的字典"""
+    if not all([BASE_URL, AUTHORIZATION, SEMESTER_ID, X_ROLE, X_SCHOOL_ID, X_REFLECTION_ID]):
+        return None, "错误: 缺少 API 配置"
+
+    headers = {
+        "Authorization": AUTHORIZATION,
+        "X-Role": X_ROLE,
+        "X-School-ID": X_SCHOOL_ID,
+        "X-Reflection-ID": X_REFLECTION_ID
+    }
+    
+    url = f"{BASE_URL}/scms/class/students/{student_id}/classes"
+    params = {"semester_id": SEMESTER_ID, "paginated": "1", "expand": "course"}
+    
+    try:
+        resp = requests.get(url, headers=headers, params=params)
+        resp.raise_for_status()
+        data = resp.json()
+        
+        student_class_info = {str(item["id"]): item.get("name") or (item.get("course", {}).get("name") or f"未知名称 (ID: {item['id']})") for item in data}
+
+        if isinstance(class_ids, str):
+            class_ids = [id.strip() for id in class_ids.split(',')]
+        elif not isinstance(class_ids, list):
+            class_ids = [str(class_ids)]
+
+        class_details = {class_id: student_class_info.get(str(class_id), f"未找到名称 (ID: {class_id})") for class_id in class_ids}
+        
+        return class_details, None
+
+    except requests.exceptions.RequestException as e:
+        app.logger.error(f"API request failed for student_id {student_id}: {e}")
+        return None, f"为学生 {student_id} 获取名称时出错"
+
+def get_school_name_from_api():
+    """通过 API 查询学校名称"""
+    if not all([BASE_URL, AUTHORIZATION, X_ROLE, X_SCHOOL_ID]):
+        return "配置缺失", "Error: Missing API configuration"
+
+    headers = {
+        "Authorization": AUTHORIZATION,
+        "X-Role": X_ROLE,
+        "X-School-ID": X_SCHOOL_ID
+    }
+    
+    url = f"{BASE_URL}/chalk/system/schools/{X_SCHOOL_ID}?expand=custom_constraints"
+    
+    try:
+        resp = requests.get(url, headers=headers)
+        resp.raise_for_status()
+        data = resp.json()
+        school_name = data.get("name", "未知学校")
+        return school_name, None
+
+    except requests.exceptions.RequestException as e:
+        app.logger.error(f"API request failed for school_id {X_SCHOOL_ID}: {e}")
+        return "查询失败", f"Error fetching info for school {X_SCHOOL_ID}"
+
+@app.route('/api/school-name', methods=['GET'])
+def get_school_name():
+    """Provides the school name."""
+    school_name, error = get_school_name_from_api()
+    if error:
+        return jsonify({'error': error}), 500
+    return jsonify({'school_name': school_name})
+
+@app.route('/api/download-template', methods=['GET'])
+def download_template():
+    """Provides the template file for download."""
+    try:
+        return send_from_directory(TEMPLATE_DIR, TEMPLATE_FILENAME, as_attachment=True)
+    except FileNotFoundError:
+        return jsonify({'error': 'Template file not found on server.'}), 404
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    """Uploads a file to the server."""
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+    
+    filename = file.filename
+    file.save(os.path.join(TEMPLATE_DIR, filename))
+    
+    return jsonify({'message': 'File uploaded successfully'}), 200
+
+import json
+from flask import Response
+
+@app.route('/api/preview', methods=['POST'])
+def preview_file():
+    """Previews the content of an uploaded Excel file."""
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+
+    try:
+        df = pd.read_excel(file)
+        df = df.where(pd.notnull(df), None)
+
+        if '课程班ID' not in df.columns or '学生ID' not in df.columns:
+            return jsonify({'error': 'Excel文件缺少必要的列: 学生ID, 课程班ID'}), 400
+
+        expanded_rows = []
+        for _, row in df.iterrows():
+            student_id = row['学生ID']
+            class_ids_str = row['课程班ID']
+            
+            student_name, admin_classes, info_error = get_student_info_from_api(student_id)
+            class_details, class_error = get_class_info_from_api(student_id, class_ids_str)
+            
+            if class_error:
+                class_ids = [id.strip() for id in str(class_ids_str).split(',')]
+                for class_id in class_ids:
+                    expanded_rows.append({
+                        '学生ID': student_id,
+                        '学生姓名': student_name if not info_error else info_error,
+                        '班级': admin_classes if not info_error else [],
+                        '课程班ID': class_id,
+                        '课程班名称': class_error
+                    })
+            else:
+                if not any("未找到名称" not in name for name in class_details.values()):
+                    expanded_rows.append({
+                        '学生ID': student_id,
+                        '学生姓名': student_name if not info_error else info_error,
+                        '班级': admin_classes if not info_error else [],
+                        '课程班ID': None,
+                        '课程班名称': "无匹配的课程班"
+                    })
+                else:
+                    for class_id, class_name in class_details.items():
+                        if "未找到名称" not in class_name:
+                            expanded_rows.append({
+                                '学生ID': student_id,
+                                '学生姓名': student_name if not info_error else info_error,
+                                '班级': admin_classes if not info_error else [],
+                                '课程班ID': class_id,
+                                '课程班名称': class_name
+                            })
+        
+        return jsonify({'data': expanded_rows})
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+@app.route('/api/withdraw', methods=['POST'])
+def withdraw_courses():
+    """Processes a batch of course withdrawals from an uploaded file."""
+    data = request.get_json()
+    withdraw_list = data.get('withdraw_list')
+
+    if not withdraw_list:
+        return jsonify({'error': 'Withdrawal list is required.'}), 400
+
+    headers = {
+        "Authorization": AUTHORIZATION,
+        "X-Role": X_ROLE,
+        "X-School-ID": X_SCHOOL_ID,
+        "X-Reflection-ID": X_REFLECTION_ID
+    }
+
+    student_withdrawals = {}
+    for item in withdraw_list:
+        student_id = item.get('学生ID')
+        class_id = item.get('课程班ID')
+        if student_id not in student_withdrawals:
+            student_withdrawals[student_id] = []
+        if class_id is not None:
+            student_withdrawals[student_id].append(class_id)
+
+    success_count = 0
+    failure_count = 0
+    skipped_count = 0
+    details = []
+
+    for student_id, class_ids in student_withdrawals.items():
+        if not class_ids:
+            skipped_count += 1
+            details.append(f"⏭️ 学生 {student_id} 无匹配的课程班，已跳过")
+            continue
+
+        payload = {
+            "reflection_ids": [student_id],
+            "class_ids": [int(cid) for cid in class_ids]
+        }
+        
+        try:
+            resp = requests.delete(f"{BASE_URL}/scms/class/class-selections", headers=headers, json=payload)
+            if resp.status_code == 204:
+                success_count += 1
+                details.append(f"✅ 学生 {student_id} 已成功退课")
+            else:
+                failure_count += 1
+                details.append(f"❌ 学生 {student_id} 退课失败：{resp.status_code} - {resp.text}")
+        except requests.exceptions.RequestException as e:
+            failure_count += 1
+            details.append(f"❌ 学生 {student_id} 退课失败: {e}")
+
+    summary_message = f"退课操作完成：{success_count} 个成功，{failure_count} 个失败，{skipped_count} 个跳过。"
+    
+    # 判断整体操作是否成功
+    overall_success = failure_count == 0 and (success_count > 0 or skipped_count > 0)
+    
+    return jsonify({
+        'success': overall_success,
+        'message': summary_message,
+        'details': details,
+        'stats': {
+            'success_count': success_count,
+            'failure_count': failure_count,
+            'skipped_count': skipped_count
+        }
+    })
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5001)
--- a/toolbox-app/.gitignore
+++ b/toolbox-app/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/toolbox-app/README.md
+++ b/toolbox-app/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
--- a/toolbox-app/index.html
+++ b/toolbox-app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>toolbox-app</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/toolbox-app/loading.css
+++ b/toolbox-app/loading.css
@@ -0,0 +1,495 @@
+/* From Uiverse.io by Nawsome */ 
+.banter-loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 72px;
+  height: 72px;
+  margin-left: -36px;
+  margin-top: -36px;
+}
+
+.banter-loader__box {
+  float: left;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin-right: 6px;
+}
+
+.banter-loader__box:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+}
+
+.banter-loader__box:nth-child(3n) {
+  margin-right: 0;
+  margin-bottom: 6px;
+}
+
+.banter-loader__box:nth-child(1):before, .banter-loader__box:nth-child(4):before {
+  margin-left: 26px;
+}
+
+.banter-loader__box:nth-child(3):before {
+  margin-top: 52px;
+}
+
+.banter-loader__box:last-child {
+  margin-bottom: 0;
+}
+
+@keyframes moveBox-1 {
+  9.0909090909% {
+    transform: translate(-26px, 0);
+  }
+
+  18.1818181818% {
+    transform: translate(0px, 0);
+  }
+
+  27.2727272727% {
+    transform: translate(0px, 0);
+  }
+
+  36.3636363636% {
+    transform: translate(26px, 0);
+  }
+
+  45.4545454545% {
+    transform: translate(26px, 26px);
+  }
+
+  54.5454545455% {
+    transform: translate(26px, 26px);
+  }
+
+  63.6363636364% {
+    transform: translate(26px, 26px);
+  }
+
+  72.7272727273% {
+    transform: translate(26px, 0px);
+  }
+
+  81.8181818182% {
+    transform: translate(0px, 0px);
+  }
+
+  90.9090909091% {
+    transform: translate(-26px, 0px);
+  }
+
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.banter-loader__box:nth-child(1) {
+  animation: moveBox-1 4s infinite;
+}
+
+@keyframes moveBox-2 {
+  9.0909090909% {
+    transform: translate(0, 0);
+  }
+
+  18.1818181818% {
+    transform: translate(26px, 0);
+  }
+
+  27.2727272727% {
+    transform: translate(0px, 0);
+  }
+
+  36.3636363636% {
+    transform: translate(26px, 0);
+  }
+
+  45.4545454545% {
+    transform: translate(26px, 26px);
+  }
+
+  54.5454545455% {
+    transform: translate(26px, 26px);
+  }
+
+  63.6363636364% {
+    transform: translate(26px, 26px);
+  }
+
+  72.7272727273% {
+    transform: translate(26px, 26px);
+  }
+
+  81.8181818182% {
+    transform: translate(0px, 26px);
+  }
+
+  90.9090909091% {
+    transform: translate(0px, 26px);
+  }
+
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.banter-loader__box:nth-child(2) {
+  animation: moveBox-2 4s infinite;
+}
+
+@keyframes moveBox-3 {
+  9.0909090909% {
+    transform: translate(-26px, 0);
+  }
+
+  18.1818181818% {
+    transform: translate(-26px, 0);
+  }
+
+  27.2727272727% {
+    transform: translate(0px, 0);
+  }
+
+  36.3636363636% {
+    transform: translate(-26px, 0);
+  }
+
+  45.4545454545% {
+    transform: translate(-26px, 0);
+  }
+
+  54.5454545455% {
+    transform: translate(-26px, 0);
+  }
+
+  63.6363636364% {
+    transform: translate(-26px, 0);
+  }
+
+  72.7272727273% {
+    transform: translate(-26px, 0);
+  }
+
+  81.8181818182% {
+    transform: translate(-26px, -26px);
+  }
+
+  90.9090909091% {
+    transform: translate(0px, -26px);
+  }
+
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.banter-loader__box:nth-child(3) {
+  animation: moveBox-3 4s infinite;
+}
+
+@keyframes moveBox-4 {
+  9.0909090909% {
+    transform: translate(-26px, 0);
+  }
+
+  18.1818181818% {
+    transform: translate(-26px, 0);
+  }
+
+  27.2727272727% {
+    transform: translate(-26px, -26px);
+  }
+
+  36.3636363636% {
+    transform: translate(0px, -26px);
+  }
+
+  45.4545454545% {
+    transform: translate(0px, 0px);
+  }
+
+  54.5454545455% {
+    transform: translate(0px, -26px);
+  }
+
+  63.6363636364% {
+    transform: translate(0px, -26px);
+  }
+
+  72.7272727273% {
+    transform: translate(0px, -26px);
+  }
+
+  81.8181818182% {
+    transform: translate(-26px, -26px);
+  }
+
+  90.9090909091% {
+    transform: translate(-26px, 0px);
+  }
+
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.banter-loader__box:nth-child(4) {
+  animation: moveBox-4 4s infinite;
+}
+
+@keyframes moveBox-5 {
+  9.0909090909% {
+    transform: translate(0, 0);
+  }
+
+  18.1818181818% {
+    transform: translate(0, 0);
+  }
+
+  27.2727272727% {
+    transform: translate(0, 0);
+  }
+
+  36.3636363636% {
+    transform: translate(26px, 0);
+  }
+
+  45.4545454545% {
+    transform: translate(26px, 0);
+  }
+
+  54.5454545455% {
+    transform: translate(26px, 0);
+  }
+
+  63.6363636364% {
+    transform: translate(26px, 0);
+  }
+
+  72.7272727273% {
+    transform: translate(26px, 0);
+  }
+
+  81.8181818182% {
+    transform: translate(26px, -26px);
+  }
+
+  90.9090909091% {
+    transform: translate(0px, -26px);
+  }
+
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.banter-loader__box:nth-child(5) {
+  animation: moveBox-5 4s infinite;
+}
+
+@keyframes moveBox-6 {
+  9.0909090909% {
+    transform: translate(0, 0);
+  }
+
+  18.1818181818% {
+    transform: translate(-26px, 0);
+  }
+
+  27.2727272727% {
+    transform: translate(-26px, 0);
+  }
+
+  36.3636363636% {
+    transform: translate(0px, 0);
+  }
+
+  45.4545454545% {
+    transform: translate(0px, 0);
+  }
+
+  54.5454545455% {
+    transform: translate(0px, 0);
+  }
+
+  63.6363636364% {
+    transform: translate(0px, 0);
+  }
+
+  72.7272727273% {
+    transform: translate(0px, 26px);
+  }
+
+  81.8181818182% {
+    transform: translate(-26px, 26px);
+  }
+
+  90.9090909091% {
+    transform: translate(-26px, 0px);
+  }
+
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.banter-loader__box:nth-child(6) {
+  animation: moveBox-6 4s infinite;
+}
+
+@keyframes moveBox-7 {
+  9.0909090909% {
+    transform: translate(26px, 0);
+  }
+
+  18.1818181818% {
+    transform: translate(26px, 0);
+  }
+
+  27.2727272727% {
+    transform: translate(26px, 0);
+  }
+
+  36.3636363636% {
+    transform: translate(0px, 0);
+  }
+
+  45.4545454545% {
+    transform: translate(0px, -26px);
+  }
+
+  54.5454545455% {
+    transform: translate(26px, -26px);
+  }
+
+  63.6363636364% {
+    transform: translate(0px, -26px);
+  }
+
+  72.7272727273% {
+    transform: translate(0px, -26px);
+  }
+
+  81.8181818182% {
+    transform: translate(0px, 0px);
+  }
+
+  90.9090909091% {
+    transform: translate(26px, 0px);
+  }
+
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.banter-loader__box:nth-child(7) {
+  animation: moveBox-7 4s infinite;
+}
+
+@keyframes moveBox-8 {
+  9.0909090909% {
+    transform: translate(0, 0);
+  }
+
+  18.1818181818% {
+    transform: translate(-26px, 0);
+  }
+
+  27.2727272727% {
+    transform: translate(-26px, -26px);
+  }
+
+  36.3636363636% {
+    transform: translate(0px, -26px);
+  }
+
+  45.4545454545% {
+    transform: translate(0px, -26px);
+  }
+
+  54.5454545455% {
+    transform: translate(0px, -26px);
+  }
+
+  63.6363636364% {
+    transform: translate(0px, -26px);
+  }
+
+  72.7272727273% {
+    transform: translate(0px, -26px);
+  }
+
+  81.8181818182% {
+    transform: translate(26px, -26px);
+  }
+
+  90.9090909091% {
+    transform: translate(26px, 0px);
+  }
+
+  100% {
+    transform: translate(0px, 0px);
+  }
+}
+
+.banter-loader__box:nth-child(8) {
+  animation: moveBox-8 4s infinite;
+}
+
+@keyframes moveBox-9 {
+  9.0909090909% {
+    transform: translate(-26px, 0);
+  }
+
+  18.1818181818% {
+    transform: translate(-26px, 0);
+  }
+
+  27.2727272727% {
+    transform: translate(0px, 0);
+  }
+
+  36.3636363636% {
+    transform: translate(-26px, 0);
+  }
+
+  45.4545454545% {
+    transform: translate(0px, 0);
+  }
+
+  54.5454545455% {
+    transform: translate(0px, 0);
+  }
+
+  63.6363636364% {
+    transform: translate(-26px, 0);
+  }
+
+  72.7272727273% {
+    transform: translate(-26px, 0);
+  }
+
+  81.8181818182% {
+    transform: translate(-52px, 0);
+  }
+
+  90.9090909091% {
+    transform: translate(-26px, 0);
+  }
+
+  100% {
+    transform: translate(0px, 0);
+  }
+}
+
+.banter-loader__box:nth-child(9) {
+  animation: moveBox-9 4s infinite;
+}
--- a/toolbox-app/package-lock.json
+++ b/toolbox-app/package-lock.json
--- a/toolbox-app/package.json
+++ b/toolbox-app/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "toolbox-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.12.2",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.3",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "npm:rolldown-vite@7.1.14"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.1.14"
+  }
+}
--- a/toolbox-app/public/vite.svg
+++ b/toolbox-app/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/toolbox-app/public/工作簿14.xlsx
+++ b/toolbox-app/public/工作簿14.xlsx
--- a/toolbox-app/public/退课列表.xlsx
+++ b/toolbox-app/public/退课列表.xlsx
--- a/toolbox-app/src/App.vue
+++ b/toolbox-app/src/App.vue
@@ -0,0 +1,80 @@
+<template>
+  <div id="app">
+    <header>
+      <h1>{{ pageTitle }}</h1>
+      <nav>
+        <router-link to="/">Home</router-link> | 
+        <router-link to="/settings">Settings</router-link>
+      </nav>
+    </header>
+    <main>
+      <router-view></router-view>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const pageTitle = computed(() => {
+  switch (route.name) {
+    case 'Home':
+      return 'Toolbox';
+    case 'Settings':
+      return 'Settings';
+    case 'CourseWithdrawal':
+      return 'Course Withdrawal Tool';
+    default:
+      return 'Toolbox';
+  }
+});
+</script>
+
+<style>
+:root {
+  --primary-color: #42b983;
+  --background-color: #f0f2f5;
+  --card-background-color: #ffffff;
+  --text-color: #2c3e50;
+  --border-radius: 8px;
+}
+
+body {
+  background-color: var(--background-color);
+  margin: 0;
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--text-color);
+}
+
+header {
+  background-color: var(--card-background-color);
+  padding: 10px 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+main {
+  padding: 10px 20px;
+}
+
+nav a {
+  font-weight: bold;
+  color: var(--text-color);
+  text-decoration: none;
+  margin: 0 10px;
+}
+
+nav a.router-link-exact-active {
+  color: var(--primary-color);
+}
+</style>
--- a/toolbox-app/src/assets/vue.svg
+++ b/toolbox-app/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/toolbox-app/src/components/HelloWorld.vue
+++ b/toolbox-app/src/components/HelloWorld.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
--- a/toolbox-app/src/components/tools/CourseWithdrawal.vue
+++ b/toolbox-app/src/components/tools/CourseWithdrawal.vue
@@ -0,0 +1,521 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import axios from 'axios';
+
+const file = ref(null);
+const previewData = ref([]);
+const isParsing = ref(false);
+const isWithdrawing = ref(false);
+const fileInput = ref(null);
+const schoolName = ref('');
+const showFailedOnly = ref(false);
+const withdrawalResults = ref(null);
+
+const failedWithdrawals = computed(() => {
+  if (!withdrawalResults.value || !withdrawalResults.value.details) {
+    return [];
+  }
+  const failedDetails = withdrawalResults.value.details.filter(result => result.includes('失败') || result.includes('failed'));
+  const studentIds = failedDetails.map(result => {
+    const match = result.match(/学生ID: (\S+),/);
+    return match ? match[1] : null;
+  });
+  return [...new Set(studentIds.filter(id => id !== null))];
+});
+
+const groupedPreviewData = computed(() => {
+  if (!previewData.value || previewData.value.length === 0) {
+    return [];
+  }
+  const groups = {};
+  previewData.value.forEach(item => {
+    const studentId = item['学生ID'];
+    if (!groups[studentId]) {
+      groups[studentId] = {
+        studentId: studentId,
+        studentName: item['学生姓名'],
+        adminClasses: item['班级'] || [],
+        courses: []
+      };
+    }
+    groups[studentId].courses.push({
+      classId: item['课程班ID'],
+      className: item['课程班名称']
+    });
+  });
+  return Object.values(groups);
+});
+
+function triggerFileInput() {
+  fileInput.value.click();
+}
+
+function downloadTemplate() {
+  window.location.href = 'http://127.0.0.1:5001/api/download-template';
+}
+
+async function handleFileUpload(event) {
+  const target = event.target;
+  if (target.files.length === 0) {
+    return;
+  }
+  file.value = target.files[0];
+  
+  isParsing.value = true;
+  previewData.value = [];
+
+  const formData = new FormData();
+  formData.append('file', file.value);
+
+  try {
+    const response = await axios.post('http://127.0.0.1:5001/api/preview', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+    previewData.value = response.data.data;
+  } catch (error) {
+    console.error('Error uploading file:', error);
+    alert('文件预览失败');
+  } finally {
+    isParsing.value = false;
+  }
+}
+
+async function executeWithdrawal() {
+  if (previewData.value.length === 0) {
+    alert('请先上传并预览文件');
+    return;
+  }
+
+  isWithdrawing.value = true;
+
+  try {
+    const response = await axios.post('http://127.0.0.1:5001/api/withdraw', {
+      withdraw_list: previewData.value
+    });
+    withdrawalResults.value = response.data;
+    if (response.data.success) {
+      previewData.value = [];
+    }
+  } catch (error) {
+    console.error('Error during withdrawal:', error);
+    if (error.response && error.response.data) {
+      withdrawalResults.value = { error: error.response.data.error || error.response.data.message || '未知错误' };
+    } else {
+      withdrawalResults.value = { error: '退课过程中发生网络错误' };
+    }
+  } finally {
+    isWithdrawing.value = false;
+  }
+}
+
+function clearPreview() {
+  file.value = null;
+  previewData.value = [];
+  withdrawalResults.value = null;
+  if (fileInput.value) {
+    fileInput.value.value = '';
+  }
+}
+
+onMounted(async () => {
+  try {
+    const response = await axios.get('http://127.0.0.1:5001/api/school-name');
+    schoolName.value = response.data.school_name;
+  } catch (error) {
+    console.error('Error fetching school name:', error);
+  }
+});
+function getResultItemClass(studentId) {
+  const baseClass = 'result-item';
+  // 假设传入的 studentId 都是失败的，所以直接返回失败的样式
+  return `${baseClass} result-failed`;
+}
+
+function getResultIcon(studentId) {
+  // 假设传入的 studentId 都是失败的，所以直接返回失败的图标
+  return '❌';
+}
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="content-card">
+      <h3 class="card-title">批量退课工具</h3>
+      <div v-if="schoolName" class="school-info-tag">
+        正在给 {{ schoolName }} 学校退课
+      </div>
+      
+      <div class="step-section">
+        <div class="step-header">
+          <span class="step-number">1</span>
+          <h5>下载模板</h5>
+        </div>
+        <p class="step-description">下载Excel模板文件，并根据模板格式填写需要退课的学生和课程信息。</p>
+        <button @click="downloadTemplate" class="btn btn-secondary">下载模板</button>
+      </div>
+
+      <div class="step-section">
+        <div class="step-header">
+          <span class="step-number">2</span>
+          <h5>上传文件</h5>
+        </div>
+        <div v-if="previewData.length === 0">
+          <div class="file-upload-area" @click="triggerFileInput">
+            <input type="file" ref="fileInput" @change="handleFileUpload" accept=".xlsx, .xls" hidden>
+            <span v-if="!isParsing">点击或拖拽文件到此处上传</span>
+            <div v-if="isParsing" class="loader"></div>
+          </div>
+        </div>
+
+        <div v-else-if="file" class="file-uploaded-info">
+          <p>文件 <strong>{{ file.name }}</strong> 已上传。请在下方预览数据。</p>
+          <button @click="clearPreview" class="btn btn-outline-secondary">重新上传</button>
+        </div>
+      </div>
+
+      <div v-if="previewData.length > 0" class="step-section">
+        <div class="step-header">
+          <span class="step-number">3</span>
+          <h5>预览退课信息</h5>
+        </div>
+        <div class="table-responsive">
+          <table class="table table-bordered table-hover">
+            <thead class="table-light">
+              <tr>
+                <th>学生ID</th>
+                <th>学生姓名</th>
+                <th>班级</th>
+                <th>课程班名称</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="group in groupedPreviewData" :key="group.studentId">
+                <td>{{ group.studentId }}</td>
+                <td>{{ group.studentName }}</td>
+                <td>
+                  <div class="admin-classes-grid">
+                    <div v-for="adminClass in group.adminClasses" :key="adminClass" class="admin-class-item">{{ adminClass }}</div>
+                  </div>
+                </td>
+                <td>
+                  <span>
+                    {{ group.courses.map(c => c.className).join(' / ') }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-if="previewData.length > 0" class="step-section">
+        <div class="step-header">
+          <span class="step-number">4</span>
+          <h5>执行退课</h5>
+        </div>
+        <p class="step-description">确认预览信息无误后，点击执行退课。</p>
+        <div v-if="isWithdrawing" class="text-center">
+          <div class="spinner-border" role="status">
+            <span class="visually-hidden">退课中...</span>
+          </div>
+          <p class="mt-2">正在执行退课操作...</p>
+        </div>
+        
+        <button @click="executeWithdrawal" class="btn btn-danger" :disabled="isWithdrawing">
+          {{ isWithdrawing ? '退课中...' : '执行退课' }}
+        </button>
+      </div>
+
+      <div v-if="withdrawalResults" class="results-section">
+        <h5 class="results-title">退课结果</h5>
+        <div class="results-summary">
+          <div v-if="withdrawalResults.message" class="summary-item">
+            <span class="summary-label">状态:</span>
+            <span class="summary-value">{{ withdrawalResults.message }}</span>
+          </div>
+          <div v-if="withdrawalResults.error" class="summary-item">
+            <span class="summary-label">错误:</span>
+            <span class="summary-value">{{ withdrawalResults.error }}</span>
+          </div>
+        </div>
+        <div v-if="failedWithdrawals.length > 0" class="results-grid">
+          <div v-for="(studentId, index) in failedWithdrawals" :key="index" :class="getResultItemClass(studentId)">
+            <span class="result-icon">{{ getResultIcon(studentId) }}</span>
+            <span class="result-text">学生ID: {{ studentId }} 退课失败</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  padding: 20px;
+  background-color: #f0f2f5;
+  min-height: 100vh;
+}
+
+.content-card {
+  max-width: 1600px;
+  margin: 0 auto;
+  background-color: #fff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+
+.step-section {
+  margin-bottom: 24px;
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.step-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #1890ff;
+  color: #fff;
+  font-weight: 600;
+  margin-right: 12px;
+}
+
+.step-description {
+  color: #555;
+  margin-bottom: 12px;
+}
+
+.file-upload-area {
+  border: 2px dashed #d9d9d9;
+  border-radius: 8px;
+  padding: 40px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #fafafa;
+  transition: border-color 0.3s;
+}
+
+.file-upload-area:hover {
+  border-color: #1890ff;
+}
+
+.progress-bar-container {
+  width: 100%;
+  background-color: #f3f3f3;
+  border-radius: 5px;
+  margin-top: 10px;
+  position: relative;
+}
+
+.progress-bar {
+  height: 20px;
+  background-color: #4caf50;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 20px;
+  color: white;
+}
+
+.progress-text {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  top: 0;
+  left: 0;
+  color: #000;
+  line-height: 20px;
+}
+
+.file-uploaded-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.table-responsive {
+  max-height: 600px;
+  overflow-y: auto;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+}
+
+.table th:nth-child(2),
+.table td:nth-child(2) {
+  width: 70px;
+}
+
+.table th:nth-child(3),
+.table td:nth-child(3) {
+  width: 50px;
+}
+
+.table th, .table td {
+  padding: 12px 16px;
+  border: 1px solid #e8e8e8;
+}
+
+.student-cell {
+  vertical-align: middle;
+  text-align: center;
+}
+
+.results-section {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #e8e8e8;
+}
+
+.school-info-tag {
+  background-color: #e6f7ff;
+  border: 1px solid #91d5ff;
+  color: #096dd9;
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  display: inline-block;
+}
+
+.admin-classes-grid {
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+  text-align: left;
+  margin-top: 4px;
+}
+
+.btn {
+  border-radius: 8px;
+}
+
+.results-summary {
+  background-color: #f8f9fa;
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.summary-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.summary-label {
+  font-weight: 600;
+  color: #333;
+}
+
+.summary-value {
+  color: #555;
+}
+
+.results-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.summary-message {
+  margin-bottom: 16px;
+}
+
+.results-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+}
+
+.result-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-radius: 6px;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  font-size: 0.9em;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.result-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.result-icon {
+  margin-right: 10px;
+  font-size: 1.2em;
+}
+
+.result-text {
+  flex-grow: 1;
+}
+
+.result-success {
+  background-color: #e6f7ff;
+  border-color: #91d5ff;
+  color: #096dd9;
+}
+
+.result-failed {
+  background-color: #fff1f0;
+  border-color: #ffa39e;
+  color: #cf1322;
+}
+
+.result-skipped {
+  background-color: #fffbe6;
+  border-color: #ffe58f;
+  color: #ad8b00;
+}
+
+/* From Uiverse.io by Shoh2008 */
+.loader {
+  width: 45px;
+  height: 40px;
+  background: linear-gradient(#0000 calc(1 * 100% / 6), #000 0 calc(3 * 100% / 6), #0000 0),
+    linear-gradient(#0000 calc(2 * 100% / 6), #000 0 calc(4 * 100% / 6), #0000 0),
+    linear-gradient(#0000 calc(3 * 100% / 6), #000 0 calc(5 * 100% / 6), #0000 0);
+  background-size: 10px 400%;
+  background-repeat: no-repeat;
+  animation: matrix 1s infinite linear;
+  margin: 0 auto;
+}
+
+.loader-small {
+  width: 22.5px;
+  height: 20px;
+  background: linear-gradient(#0000 calc(1 * 100% / 6), #000 0 calc(3 * 100% / 6), #0000 0),
+    linear-gradient(#0000 calc(2 * 100% / 6), #000 0 calc(4 * 100% / 6), #0000 0),
+    linear-gradient(#0000 calc(3 * 100% / 6), #000 0 calc(5 * 100% / 6), #0000 0);
+  background-size: 5px 400%;
+  background-repeat: no-repeat;
+  animation: matrix 1s infinite linear;
+  margin: 0 auto;
+}
+
+@keyframes matrix {
+  0% {
+    background-position: 0% 100%, 50% 100%, 100% 100%;
+  }
+
+  100% {
+    background-position: 0% 0%, 50% 0%, 100% 0%;
+  }
+}
+</style>
--- a/toolbox-app/src/main.js
+++ b/toolbox-app/src/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+
+app.mount('#app');
--- a/toolbox-app/src/router/index.js
+++ b/toolbox-app/src/router/index.js
@@ -0,0 +1,27 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: HomeView,
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: () => import('../views/SettingsView.vue'),
+  },
+  {
+    path: '/tools/course-withdrawal',
+    name: 'CourseWithdrawal',
+    component: () => import('../components/tools/CourseWithdrawal.vue'),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
--- a/toolbox-app/src/store/settings.js
+++ b/toolbox-app/src/store/settings.js
@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia';
+
+export const useSettingsStore = defineStore('settings', {
+  state: () => ({
+    authorization: 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiIzIiwiZXhwIjoxNzYxMTk0MjQzLCJqdGkiOiJmZjdkYTlkMS05ZGEzLTRhZDctYWZhZS04Njc3YWEzMzI0ZGMiLCJpYXQiOjE3NjExMDc4NDMsImlzcyI6Imh0dHBzOi8vbWRwLnNlaXVlLmNvbS9zZWl1ZSIsInN1YiI6IjEwMjg1MjYiLCJjdHgiOiJsb2dpbl9yaWQ9OTY5MjY5XHUwMDI2cmVhZG9ubHk9MFx1MDAyNnN0YWZmX2lkPTI0MCIsInNpZCI6MTAzNDkyOTJ9.bDuRFltrbFkV5NPxMAABFhTxv9zDQDBq4S9ZCRmQwohANrUD7HriP7vmospkrA_5skxJtyi3iK5OtINyIVGFP9zK7jcrfGJlhTrQimfgnHH-39mYsk08fOH-MhDvr2Q87ng-2gACIpNvyvzP-VCxo6IGOk9ZZWg2aT6xua-cV-8',
+    semesterId: '61626',
+    xRole: 'shadow',
+    xSchoolId: '665',
+    xReflectionId: '969269',
+  }),
+  actions: {
+    setSettings(newSettings) {
+      this.authorization = newSettings.authorization;
+      this.semesterId = newSettings.semesterId;
+      this.xRole = newSettings.xRole;
+      this.xSchoolId = newSettings.xSchoolId;
+      this.xReflectionId = newSettings.xReflectionId;
+    },
+  },
+});
--- a/toolbox-app/src/style.css
+++ b/toolbox-app/src/style.css
@@ -0,0 +1,79 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/toolbox-app/src/views/HomeView.vue
+++ b/toolbox-app/src/views/HomeView.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="home">
+    <h2>Tools</h2>
+    <div class="tool-grid">
+      <router-link to="/tools/course-withdrawal" class="tool-tile">
+        <h3>Course Withdrawal</h3>
+      </router-link>
+      <!-- Add more tools here -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.home {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.tool-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.tool-tile {
+  background-color: var(--card-background-color);
+  border-radius: var(--border-radius);
+  padding: 20px;
+  text-decoration: none;
+  color: var(--text-color);
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.tool-tile:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.tool-tile h3 {
+  margin: 0;
+  color: var(--primary-color);
+}
+</style>
--- a/toolbox-app/src/views/SettingsView.vue
+++ b/toolbox-app/src/views/SettingsView.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="settings">
+    <h2>Settings</h2>
+    <form @submit.prevent="saveSettings">
+      <div class="form-group">
+        <label for="authorization">Authorization</label>
+        <input type="text" id="authorization" v-model="settings.authorization">
+      </div>
+      <div class="form-group">
+        <label for="semesterId">Semester ID</label>
+        <input type="text" id="semesterId" v-model="settings.semesterId">
+      </div>
+      <div class="form-group">
+        <label for="xRole">X-Role</label>
+        <input type="text" id="xRole" v-model="settings.xRole">
+      </div>
+      <div class="form-group">
+        <label for="xSchoolId">X-School-ID</label>
+        <input type="text" id="xSchoolId" v-model="settings.xSchoolId">
+      </div>
+      <div class="form-group">
+        <label for="xReflectionId">X-Reflection-ID</label>
+        <input type="text" id="xReflectionId" v-model="settings.xReflectionId">
+      </div>
+      <button type="submit">Save</button>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useSettingsStore } from '../store/settings';
+
+const settingsStore = useSettingsStore();
+const settings = ref({
+  authorization: settingsStore.authorization,
+  semesterId: settingsStore.semesterId,
+  xRole: settingsStore.xRole,
+  xSchoolId: settingsStore.xSchoolId,
+  xReflectionId: settingsStore.xReflectionId,
+});
+
+const saveSettings = () => {
+  settingsStore.setSettings(settings.value);
+  alert('Settings saved!');
+};
+</script>
+
+<style scoped>
+.settings {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: var(--card-background-color);
+  border-radius: var(--border-radius);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: bold;
+}
+
+input {
+  width: 100%;
+  padding: 10px;
+  border-radius: var(--border-radius);
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+button {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: background-color 0.3s;
+  font-size: 16px;
+}
+
+button:hover {
+  background-color: #36a374;
+}
+</style>
--- a/toolbox-app/vite.config.js
+++ b/toolbox-app/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`