From 30be3ca2bf7b9db9e7fc24308f31e975135ec658 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=9E=97=E6=95=A3=E4=BA=BA?= <71921416+PageSecOnd@users.noreply.github.com> Date: Thu, 14 May 2026 19:51:44 +0800 Subject: [PATCH] feat: implement fluent-style Steam tracker frontend shell --- index.html | 12 ++++ package.json | 17 +++++ src/App.vue | 171 +++++++++++++++++++++++++++++++++++++++++++++++++ src/main.js | 5 ++ src/styles.css | 35 ++++++++++ vite.config.js | 6 ++ 6 files changed, 246 insertions(+) create mode 100644 index.html create mode 100644 package.json create mode 100644 src/App.vue create mode 100644 src/main.js create mode 100644 src/styles.css create mode 100644 vite.config.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..8572ea6 --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + Steam 成就追踪器 + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..c5349fa --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "games-tracker", + "version": "0.1.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build" + }, + "dependencies": { + "vue": "^3.5.13" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.2.3", + "vite": "^6.3.5" + } +} diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..3ad6194 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,171 @@ + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..fdbdce5 --- /dev/null +++ b/src/main.js @@ -0,0 +1,5 @@ +import { createApp } from 'vue' +import App from './App.vue' +import './styles.css' + +createApp(App).mount('#app') diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..cf746f0 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,35 @@ +:root { font-family: 'Segoe UI Variable', 'Microsoft YaHei UI', sans-serif; color-scheme: light dark; } +* { box-sizing: border-box; } +body { margin: 0; background: #f4f6fb; color: #1f2937; } +.app { display: flex; min-height: 100vh; } +.nav-rail { width: 72px; padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid #e5e7eb; background: #fbfcff; } +.rail-btn,.primary,.ghost,select,input,textarea { height: 36px; border-radius: 10px; border: 1px solid #d1d5db; background: white; } +.rail-btn { display:grid; place-items:center; } +.rail-btn.active { border-color: #3b82f6; color: #3b82f6; } +.main-layout { flex:1; display:flex; flex-direction:column; } +.command-bar { height: 56px; display:flex; align-items:center; gap:16px; padding: 0 24px; border-bottom:1px solid #e5e7eb; background: #fff; } +.command-bar h1 { font-size:22px; margin:0; min-width: 120px; } +.search-wrap { display:flex; align-items:center; gap:8px; width:min(520px, 60vw); border:1px solid #d1d5db; border-radius: 10px; padding: 0 10px; background:#fff; height: 36px; } +.search-wrap input { flex:1; border:0; outline:none; background:transparent; height: 30px; } +.content { padding:24px; overflow:auto; } +.grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap:16px; } +.card { background:#fff; border-radius:12px; padding:16px; display:grid; grid-template-columns:64px 1fr auto; gap:12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor:pointer; } +.left-icon { width:64px; height:64px; border-radius:12px; background:#eef2ff; display:grid; place-items:center; } +.mid h3 { font-size:16px; margin:0; } +.mid p { margin:2px 0; font-size:12px; color:#64748b; } +.mid small { font-size:12px; color:#6b7280; } +.right-ach { text-align:right; } +.progress { width:108px; height:6px; border-radius:999px; background:#e5e7eb; overflow:hidden; } +.progress>div { height:100%; background:#3b82f6; } +.chips { grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; } +.chip { border-radius:999px; padding:2px 10px; font-size:12px; background:#eef2f7; } +.chip.state { background:#dbeafe; color:#1e3a8a; } +.mask { position:fixed; inset:0; background:rgba(15,23,42,.28); } +.drawer { position:fixed; top:0; right:0; width:480px; height:100vh; background:#fff; box-shadow:-8px 0 20px rgba(0,0,0,.12); padding:16px; display:flex; flex-direction:column; } +.segmented { display:flex; gap:8px; background:#f1f5f9; border-radius:999px; padding:4px; } +.segmented button { flex:1; height:32px; border-radius:999px; border:none; } +.segmented .active { background:#fff; color:#2563eb; } +.drawer-content { overflow:auto; padding-top:12px; } +.panel { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; } +.settings .setting-group { display:flex; flex-direction:column; gap:12px; } +textarea { min-height:120px; width:100%; } diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..2e3d257 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +})