更新/修复 前端

Author: Applesaber

.github/workflows/deploy.yml

@@ -36,6 +36,9 @@ jobs:
       - name: Build
         run: npm run build
         working-directory: web
+        env:
+          VITE_LXNS_DEVELOPER_TOKEN: ${{ vars.VITE_LXNS_DEVELOPER_TOKEN }}
+          VITE_SHUIYU_DEVELOPER_TOKEN: ${{ vars.VITE_SHUIYU_DEVELOPER_TOKEN }}
 
       - uses: actions/upload-pages-artifact@v3
         with:

web/.gitignore

@@ -11,6 +11,9 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
+.env.*
+!.env.example
 
 # Editor directories and files
 .vscode/*

web/package-lock.json

@@ -9,8 +9,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chenfengyuan/vue-qrcode": "^2.0.0",
+    "@iconify/json": "^2.2.453",
+    "@munet/ui": "^1.0.12",
+    "@types/lodash-es": "^4.17.12",
+    "@unocss/preset-icons": "^66.6.7",
+    "@unocss/reset": "^66.6.7",
+    "@vueuse/core": "^14.2.1",
     "chart.js": "^4.5.1",
+    "lodash-es": "^4.17.23",
     "papaparse": "^5.5.3",
+    "qrcode": "^1.5.4",
+    "unocss": "^66.6.7",
     "vue": "^3.5.30",
     "vue-chartjs": "^5.3.3",
     "vue-router": "^4.6.4"
@@ -20,6 +30,8 @@
     "@types/papaparse": "^5.5.2",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/tsconfig": "^0.9.0",
+    "sass": "^1.98.0",
+    "tinyglobby": "^0.2.15",
     "typescript": "~5.9.3",
     "vite": "^8.0.1",
     "vue-tsc": "^3.2.5"

web/package.json

@@ -1,24 +1,28 @@
 <script setup lang="ts">
+import { GlobalElementsContainer, themeClasses } from '@munet/ui'
 </script>
 
 <template>
-  <header>
-    <div class="nav-container">
-      <router-link to="/" class="brand">Chunithm → MuNET</router-link>
-      <nav class="nav-links">
-        <router-link to="/" class="nav-link">转换器</router-link>
-        <router-link to="/visualizer" class="nav-link">可视化</router-link>
-      </nav>
-    </div>
-  </header>
+  <GlobalElementsContainer />
+  <div :class="themeClasses" class="flex-1 flex flex-col">
+    <header>
+      <div class="nav-container">
+        <router-link to="/" class="brand">Chunithm → MuNET</router-link>
+        <nav class="nav-links">
+          <router-link to="/" class="nav-link">转换器</router-link>
+          <router-link to="/visualizer" class="nav-link">可视化</router-link>
+        </nav>
+      </div>
+    </header>
 
-  <main class="container">
-    <router-view />
-  </main>
+    <main class="container">
+      <router-view />
+    </main>
 
-  <footer>
-    <p>Powered by MuNET-OSS · <a href="https://github.com/MuNET-OSS/chunithm-data-converter" target="_blank" rel="noopener noreferrer">GitHub</a></p>
-  </footer>
+    <footer>
+      <p>Powered by MuNET-OSS · <a href="https://github.com/MuNET-OSS/chunithm-data-converter" target="_blank" rel="noopener noreferrer">GitHub</a></p>
+    </footer>
+  </div>
 </template>
 
 <style>

web/src/App.vue

@@ -1,6 +1,13 @@
+import '@unocss/reset/tailwind-compat.css'
+import 'virtual:uno.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import './style.css'
+import { initThemeDefaults, selectedThemeName, UIThemes } from '@munet/ui'
+import '@munet/ui/uno.css'
+
+initThemeDefaults({ hue: 260 })
+selectedThemeName.value = UIThemes.Auto
 
 createApp(App).use(router).mount('#app')

web/src/main.ts

@@ -161,139 +161,6 @@ p {
   margin-bottom: var(--spacing-4);
 }
 
-/* Components */
-.card {
-  background-color: var(--card-bg);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-color);
-  padding: var(--spacing-6);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.card:hover {
-  box-shadow: 0 10px 15px -3px var(--accent-glow), 0 4px 6px -2px var(--accent-glow);
-  border-color: rgba(139, 92, 246, 0.3);
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-2) var(--spacing-4);
-  border-radius: var(--radius-sm);
-  font-weight: 600;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: none;
-  font-family: inherit;
-  outline: none;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: var(--primary-gradient);
-  color: white;
-  box-shadow: 0 4px 14px 0 var(--accent-glow);
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: var(--primary-gradient-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 6px 20px var(--accent-glow);
-}
-
-.btn-secondary {
-  background-color: transparent;
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background-color: var(--border-color);
-}
-
-.btn-block {
-  width: 100%;
-}
-
-.form-group {
-  margin-bottom: var(--spacing-4);
-}
-
-.form-label {
-  display: block;
-  font-weight: 500;
-  margin-bottom: var(--spacing-2);
-  color: var(--text-primary);
-  font-size: 0.875rem;
-}
-
-.input, .select {
-  width: 100%;
-  padding: var(--spacing-2) var(--spacing-3);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border-color);
-  background-color: var(--bg-color);
-  color: var(--text-primary);
-  font-family: inherit;
-  font-size: 1rem;
-  transition: all 0.2s ease;
-}
-
-.input:focus, .select:focus {
-  outline: none;
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.input::placeholder {
-  color: var(--text-muted);
-}
-
-.tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border-color);
-  margin-bottom: var(--spacing-6);
-  gap: var(--spacing-6);
-}
-
-.tab {
-  background: none;
-  border: none;
-  padding: var(--spacing-2) 0;
-  color: var(--text-secondary);
-  font-weight: 600;
-  font-size: 1rem;
-  cursor: pointer;
-  position: relative;
-  transition: color 0.2s ease;
-}
-
-.tab:hover {
-  color: var(--text-primary);
-}
-
-.tab.active {
-  color: var(--primary-color);
-}
-
-.tab.active::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--primary-gradient);
-  border-radius: 2px 2px 0 0;
-}
-
 /* Utilities */
 .text-center { text-align: center; }
 .mt-2 { margin-top: var(--spacing-2); }