diff --git a/README.md b/README.md index 4fbfefa..6b4b63d 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,9 @@ -# AT命令工具 (atMaster) +# AT命令工具 (atMaster-Plus) ## 项目简介 这是一个基于Vue 3和Vite构建的网页版AT命令工具，用于通过浏览器直接与设备的串口通信，支持多种芯片平台的AT命令操作。该工具可以在浏览器中直接选择串口设备并发送AT命令，无需安装额外的桌面软件。 +该项目基于atMaster项目，添加了一些美观的UI，并将毛坯助手修改为精装助手。（By xcfstudio，20250511） ## 支持的芯片平台 diff --git a/index.html b/index.html index 737396b..e42bec7 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,16 @@ - - - - - 毛坯助手 - - -
- - - + + + + + + 精装助手 + + + +
+ + + + \ No newline at end of file diff --git a/src/assets/main.css b/src/assets/main.css index 36fb845..c7f42f3 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,35 +1,244 @@ -@import './base.css'; +:root { + /* 主色调 */ + --primary-color: #6366f1; + --primary-light: #818cf8; + --primary-dark: #4f46e5; + + /* 彩色主题 */ + --color-zte: #e74c3c; + --color-asr: #3498db; + --color-sprd: #2ecc71; + + /* 背景色 */ + --bg-gradient-start: #0f0f23; + --bg-gradient-end: #1a1a2e; + --bg-card: rgba(255, 255, 255, 0.05); + --bg-card-hover: rgba(255, 255, 255, 0.08); + + /* 文字颜色 */ + --text-primary: #ffffff; + --text-secondary: rgba(255, 255, 255, 0.7); + --text-muted: rgba(255, 255, 255, 0.5); + + /* 边框 */ + --border-color: rgba(255, 255, 255, 0.1); + --border-radius: 16px; + --border-radius-sm: 8px; + + /* 阴影 */ + --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3); + --shadow-button: 0 4px 16px rgba(99, 102, 241, 0.4); + + /* 间距 */ + --spacing-xs: 8px; + --spacing-sm: 12px; + --spacing-md: 16px; + --spacing-lg: 24px; + --spacing-xl: 32px; + + /* 字体 */ + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --font-size-xs: 12px; + --font-size-sm: 14px; + --font-size-md: 16px; + --font-size-lg: 18px; + --font-size-xl: 24px; + --font-size-2xl: 32px; + + /* 过渡 */ + --transition-fast: 0.15s ease; + --transition-normal: 0.3s ease; + --transition-slow: 0.5s ease; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + min-height: 100vh; +} + +body { + font-family: var(--font-family); + font-size: var(--font-size-md); + color: var(--text-primary); + background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%); + min-height: 100vh; + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} #app { - max-width: 1280px; + min-height: 100vh; +} + +/* 容器 */ +.container { + max-width: 1200px; margin: 0 auto; - padding: 2rem; - font-weight: normal; + padding: var(--spacing-lg); } -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; +/* 卡片 */ +.card { + background: var(--bg-card); + backdrop-filter: blur(20px); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: var(--spacing-lg); + box-shadow: var(--shadow-card); + transition: all var(--transition-normal); } -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } +.card:hover { + background: var(--bg-card-hover); + transform: translateY(-2px); } -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } +/* 按钮 */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--spacing-sm) var(--spacing-lg); + font-size: var(--font-size-sm); + font-weight: 600; + border: none; + border-radius: var(--border-radius-sm); + cursor: pointer; + transition: all var(--transition-fast); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.btn-primary { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); + color: white; + box-shadow: var(--shadow-button); +} - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5); +} + +.btn-primary:active { + transform: translateY(0); +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.1); + color: var(--text-primary); + border: 1px solid var(--border-color); +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.15); +} + +.btn-danger { + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + color: white; +} + +.btn-danger:hover { + transform: translateY(-2px); + box-shadow: 0 6px 24px rgba(239, 68, 68, 0.4); +} + +.btn-success { + background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); + color: white; +} + +.btn-success:hover { + transform: translateY(-2px); + box-shadow: 0 6px 24px rgba(34, 197, 94, 0.4); +} + +/* 输入框 */ +.input { + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: var(--border-radius-sm); + padding: var(--spacing-sm) var(--spacing-md); + color: var(--text-primary); + font-size: var(--font-size-sm); + transition: all var(--transition-fast); + outline: none; +} + +.input:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); +} + +.input::placeholder { + color: var(--text-muted); +} + +/* 标签 */ +.label { + display: inline-block; + font-size: var(--font-size-xs); + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: var(--spacing-xs); +} + +/* 网格布局 */ +.grid { + display: grid; + gap: var(--spacing-lg); +} + +.grid-2 { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} + +.grid-3 { + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); +} + +/* 段落文字 */ +.text-secondary { + color: var(--text-secondary); +} + +.text-muted { + color: var(--text-muted); +} + +.text-center { + text-align: center; +} + +/* 间距 */ +.mt-xs { margin-top: var(--spacing-xs); } +.mt-sm { margin-top: var(--spacing-sm); } +.mt-md { margin-top: var(--spacing-md); } +.mt-lg { margin-top: var(--spacing-lg); } +.mt-xl { margin-top: var(--spacing-xl); } + +.mb-xs { margin-bottom: var(--spacing-xs); } +.mb-sm { margin-bottom: var(--spacing-sm); } +.mb-md { margin-bottom: var(--spacing-md); } +.mb-lg { margin-bottom: var(--spacing-lg); } +.mb-xl { margin-bottom: var(--spacing-xl); } + +/* 响应式 */ +@media (max-width: 768px) { + .container { + padding: var(--spacing-md); + } + + .card { + padding: var(--spacing-md); } } diff --git a/src/main.js b/src/main.js index 5e432ef..a72309c 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,4 @@ -// import './assets/main.css' +import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' @@ -8,5 +8,4 @@ const app = createApp(App) app.use(router) -app.mount('#app') - +app.mount('#app') \ No newline at end of file diff --git a/src/views/asr.vue b/src/views/asr.vue index a639926..91d30f5 100644 --- a/src/views/asr.vue +++ b/src/views/asr.vue @@ -1,64 +1,132 @@ \ No newline at end of file diff --git a/src/views/index.vue b/src/views/index.vue index 73579b2..32d3a1e 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1,19 +1,300 @@ \ No newline at end of file diff --git a/src/views/sprd.vue b/src/views/sprd.vue index 050a7f4..f374525 100644 --- a/src/views/sprd.vue +++ b/src/views/sprd.vue @@ -1,47 +1,101 @@ \ No newline at end of file diff --git a/src/views/zc.vue b/src/views/zc.vue index 35b08b5..6fb5049 100644 --- a/src/views/zc.vue +++ b/src/views/zc.vue @@ -1,79 +1,157 @@ \ No newline at end of file