refactor(frontend): 引入UnoCSS，并优化前端构建命令

ricardo · ricardo · commit 18cdaa33fac4 · 2026-02-15T09:08:46.000+08:00
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
+    ElBacktop: typeof import('element-plus/es')['ElBacktop']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -55,7 +56,7 @@ declare module 'vue' {
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FansClub: typeof import('./src/components/common/fans-club.tsx')['default']
     FansMedal: typeof import('./src/components/common/fans-medal.tsx')['default']
-    LineHeader: typeof import('./src/components/common/line-header.tsx')['default']
+    LineHeader: typeof import('./src/components/common/line-header.vue')['default']
     LinkIcon: typeof import('./src/components/common/link-icon.tsx')['default']
     ObsSetting: typeof import('./src/components/settings/obs-setting.vue')['default']
     PlatformStatus: typeof import('./src/components/home/platform-status.vue')['default']
@@ -78,6 +79,7 @@ declare global {
   const ElAlert: typeof import('element-plus/es')['ElAlert']
   const ElAside: typeof import('element-plus/es')['ElAside']
   const ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
+  const ElBacktop: typeof import('element-plus/es')['ElBacktop']
   const ElButton: typeof import('element-plus/es')['ElButton']
   const ElCard: typeof import('element-plus/es')['ElCard']
   const ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -112,7 +114,7 @@ declare global {
   const ElUpload: typeof import('element-plus/es')['ElUpload']
   const FansClub: typeof import('./src/components/common/fans-club.tsx')['default']
   const FansMedal: typeof import('./src/components/common/fans-medal.tsx')['default']
-  const LineHeader: typeof import('./src/components/common/line-header.tsx')['default']
+  const LineHeader: typeof import('./src/components/common/line-header.vue')['default']
   const LinkIcon: typeof import('./src/components/common/link-icon.tsx')['default']
   const ObsSetting: typeof import('./src/components/settings/obs-setting.vue')['default']
   const PlatformStatus: typeof import('./src/components/home/platform-status.vue')['default']
diff --git a/frontend/package.json b/frontend/package.json
@@ -40,6 +40,7 @@
     "@types/file-saver": "^2.0.7",
     "@types/node": "^24.5.2",
     "@types/nprogress": "^0.2.3",
+    "@unocss/reset": "^66.6.0",
     "@vitejs/plugin-vue": "^6.0.2",
     "@vitejs/plugin-vue-jsx": "^5.1.2",
     "@vue/eslint-config-prettier": "^10.2.0",
@@ -53,6 +54,7 @@
     "terser": "^5.46.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.55.0",
+    "unocss": "^66.6.0",
     "unplugin-auto-import": "^21.0.0",
     "unplugin-icons": "^23.0.1",
     "unplugin-vue-components": "^31.0.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/components/common/line-header.tsx b/frontend/src/components/common/line-header.tsx
diff --git a/frontend/src/components/common/line-header.vue b/frontend/src/components/common/line-header.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  defineProps({
+    title: {
+      type: String,
+      required: true,
+    },
+  })
+  defineOptions({
+    name: 'LineHeader',
+  })
+</script>
+<template>
+  <div class="line-header">
+    <div class="line-header-title">
+      <slot name="prefix"></slot>
+      {{ title }}
+      <slot name="suffix"></slot>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/home/add-sing-dialog.vue b/frontend/src/components/home/add-sing-dialog.vue
@@ -51,7 +51,7 @@ const submit = () => {
 defineExpose({ openDialog })
 </script>
 <template>
-    <el-dialog v-model="isShow" title="手动点歌" width="480" @close="closeDialog">
+    <el-dialog v-model="isShow" title="手动点歌" width="480" destroy-on-close @close="closeDialog">
         <el-form :model="formValue" label-width="auto">
             <el-form-item label="用户昵称" prop="uname">
                 <el-input v-model="formValue.uname" placeholder="用户昵称" type="text" />
diff --git a/frontend/src/components/settings/app-setting-tab.vue b/frontend/src/components/settings/app-setting-tab.vue
@@ -63,7 +63,7 @@ watch(isFetching, () => {
     <el-card>
         <template #header>
             <div class="card-header">
-                <span>应用设置</span>
+                <line-header class="flex items-center" title="基础设置" />
             </div>
         </template>
         <el-form ref="refForm" v-loading="isFetching" :model="baseFormValue" label-width="auto" inline>
diff --git a/frontend/src/components/settings/bili-credential.vue b/frontend/src/components/settings/bili-credential.vue
@@ -210,7 +210,7 @@ watch(isFetching, () => {
     <el-card>
         <template #header>
             <div class="b-credential-card-header">
-                <span>账号设置</span>
+                <line-header class="flex items-center" title="账号设置" />
                 <el-alert title="未登录账号无法获取到弹幕用户昵称等信息，如有需要可添加一个小号" type="warning" :closable="false"
                     style="margin-top: 1rem;" />
             </div>
diff --git a/frontend/src/components/settings/bili-tab.vue b/frontend/src/components/settings/bili-tab.vue
@@ -85,7 +85,7 @@ watch(isFetching, () => {
     <el-card>
         <template #header>
             <div class="card-header">
-                <span>基础设置</span>
+                <line-header class="flex items-center" title="基础设置" />
             </div>
         </template>
         <el-form ref="refForm" v-loading="isFetching" :model="baseFormValue" label-width="auto">
diff --git a/frontend/src/components/settings/dy-tab.vue b/frontend/src/components/settings/dy-tab.vue
@@ -67,7 +67,7 @@ watch(isFetching, () => {
     <el-card>
         <template #header>
             <div class="card-header">
-                <span>抖音设置</span>
+                <line-header class="flex items-center" title="基础设置" />
             </div>
         </template>
         <el-form ref="refForm" v-loading="isFetching" :mode="baseFormValue" label-width="auto">
diff --git a/frontend/src/components/settings/obs-setting.vue b/frontend/src/components/settings/obs-setting.vue
@@ -125,7 +125,9 @@ onMounted(() => {
 <template>
   <el-card>
     <template #header>
-      <span>OBS设置</span>
+      <div class="card-header">
+        <line-header class="flex items-center" title="OBS设置" />
+      </div>
     </template>
     <div class="obs-container">
       <el-form :model="formValue" label-width="auto">
@@ -149,24 +151,24 @@ onMounted(() => {
         :closable="false"
         type="primary"
       />
-      <div class="obs-splitter" style="margin-top: 1rem">
+      <div class="obs-splitter mt-[1rem]"">
         <el-splitter>
           <el-splitter-panel :resizable="false">
             <div class="css-editor">
-              <line-header title="样式编辑器"></line-header>
+              <line-header title="样式编辑器" />
               <el-input v-model="css" :rows="20" type="textarea" placeholder="css样式在这里编辑" />
             </div>
           </el-splitter-panel>
           <el-splitter-panel :resizable="false">
             <div class="css-editor-preview">
-              <line-header title="样式预览"></line-header>
+              <line-header title="样式预览" />
               <div class="danmaku-container">
                 <div class="danmaku-list">
                   <template v-for="(item, index) in previewData" :key="index">
                     <div class="danmaku-list-item">
                       <div class="danmaku-sing">
                         <template v-if="item.html != undefined && item.html.length > 0">
-                          <el-text style="display: flex">
+                          <el-text class="flex">
                             <span v-html="item.html"></span>
                           </el-text>
                         </template>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -9,7 +9,8 @@ import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/base.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
-import "@/assets/main.css"
+import '@unocss/reset/normalize.css'
+import 'uno.css'
 
 const app = createApp(App)
 
diff --git a/frontend/src/pages/about/index.vue b/frontend/src/pages/about/index.vue
@@ -48,7 +48,7 @@ onMounted(() => {
     <el-card>
         <template #header>
             <div class="card-header">
-                <span>关于</span>
+                <line-header class="flex items-center" title="关于" />
             </div>
         </template>
         <div class="about-container">
diff --git a/frontend/src/pages/changelog/index.vue b/frontend/src/pages/changelog/index.vue
@@ -45,7 +45,7 @@ const model = computedAsync(async () => {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span>更新日志</span>
+        <line-header class="items-center flex" title="更新日志" />
       </div>
     </template>
     <div v-loading="isFetching" class="changelog-container">
diff --git a/frontend/src/pages/danmaku/index.vue b/frontend/src/pages/danmaku/index.vue
@@ -60,7 +60,7 @@ watch(list, async () => {
         <div class="danmaku-list-item">
           <div class="danmaku-sing">
             <template v-if="item.html != undefined && item.html.length > 0">
-              <el-text style="display: flex" v-html="item.html"></el-text>
+              <el-text class="flex" v-html="item.html"></el-text>
             </template>
             <template v-else>
               {{ item.msg }}
diff --git a/frontend/src/pages/history/index.vue b/frontend/src/pages/history/index.vue
@@ -152,7 +152,7 @@ onMounted(() => {
               </template>
             </el-select>
           </el-form-item>
-          <el-form-item label="时间范围" prop="dateRange" style="width: 350px">
+          <el-form-item label="时间范围" prop="dateRange" class="w-[350px]">
             <el-date-picker
               v-model="dateRange"
               type="daterange"
@@ -190,20 +190,21 @@ onMounted(() => {
                   width="24"
                 />
                 <text tag="span" class="chat-tag">
-                  {{ item.uname }}：<el-text style="display: flex" v-html="item.song_name"></el-text>
+                  {{ item.uname }}：<el-text class="flex" v-html="item.song_name"></el-text>
                 </text>
-                <span style="width: 15%">
+                <span class="w-[15%]">
                   {{ item.create_time_str }}
                 </span>
               </div>
             </template>
             <template v-if="resultList?.length == 0">
               <el-empty description="没有数据" />
             </template>
+            <el-backtop :right="100" :bottom="100" target=".chat-infinite-list > div" />
           </el-scrollbar>
         </template>
         <template #footer>
-          <div style="display: flex; text-align: right">
+          <div class="flex text-align-right">
             <el-button
               type="success"
               :disabled="resultList?.length == 0"
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
@@ -163,10 +163,11 @@ onMounted(() => {
       <el-card class="chat-card">
         <template #header>
           <div class="card-header">
-            <span>
-              点歌列表
-              <link-icon style="cursor: pointer" @click="openDanmakuWindow" />
-            </span>
+            <line-header class="flex items-center" title="点歌列表" >
+              <template #suffix>
+                <link-icon class="cursor-pointer color-white" @click="openDanmakuWindow" />
+              </template>
+            </line-header>
           </div>
         </template>
         <el-scrollbar
@@ -239,6 +240,7 @@ onMounted(() => {
               </el-tooltip>
             </div>
           </template>
+          <el-backtop :right="100" :bottom="100" target=".chat-infinite-list > div" />
         </el-scrollbar>
         <template #footer>
           <div class="chat-card-footer">
diff --git a/frontend/src/pages/playlist/index.vue b/frontend/src/pages/playlist/index.vue
@@ -239,6 +239,7 @@ const search = () => {
 }
 
 const nextPage = (_remainDistance: number) => {
+  console.log(_remainDistance)
   if (list.value && list.value.length < total.value) {
     fetchNextPage()
   }
@@ -276,7 +277,7 @@ onMounted(() => {
         </el-form>
       </el-card>
       <el-divider />
-      <div style="height: 40px; display: flex">
+      <div class="h-[40px] flex">
         <el-button type="primary" @click="addOrEditPlaylist()">新增歌曲</el-button>
         <el-button type="danger" :disabled="list?.length == 0" @click="allDeletePlaylist()"
           >全部删除</el-button
@@ -300,8 +301,8 @@ onMounted(() => {
           </div>
         </template>
         <template #footer>
-          <div style="display: flex">
-            <div style="width: 100%; flex-direction: row-reverse; display: flex; gap: 10px">
+          <div class="flex">
+            <div class="w-full flex-row-reverse flex gap-[10px]">
               <el-upload
                 action="#"
                 :auto-upload="false"
diff --git a/frontend/uno.config.ts b/frontend/uno.config.ts
@@ -1,5 +1,6 @@
-/* @import './base.css'; */
+import { defineConfig } from 'unocss'
 
+const mainCss = `
 body {
   font-weight: normal;
   font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC',
@@ -29,29 +30,39 @@ body {
   --menu-background-color: rgba(255, 255, 255, 0.6);
   --menu-color: #000;
   --mx-menu-disabled-text: #6a6a6a;
+}
 
-  &.dark {
+.mx-menu-bar.mac.dark,
+.mx-context-menu.mac.dark {
     --menu-background-color: rgba(0, 0, 0, 0.6);
     --menu-color: #fff;
     --mx-menu-disabled-text: #a5a5a5;
-  }
-  &.disabled {
-    color: var(--mx-menu-disabled-text);
+}
 
+.mx-menu-bar.mac.disabled,
+.mx-context-menu.mac.disabled {
+    color: var(--mx-menu-disabled-text);
     cursor: not-allowed;
+}
 
-    &:hover, &:active {
+.mx-menu-bar.mac.disabled:hover, 
+.mx-menu-bar.mac.disabled:active,
+.mx-context-menu.mac.disabled:hover,
+.mx-context-menu.mac.disabled:active {
       background-color: transparent;
-    }
+}
 
-    .mx-right-arrow, .mx-checked-mark {
+.mx-menu-bar.mac.disabled .mx-right-arrow, 
+.mx-context-menu.mac.disabled .mx-right-arrow,
+.mx-menu-bar.mac.disabled .mx-checked-mark,
+.mx-context-menu.mac.disabled .mx-checked-mark {
       fill: var(--mx-menu-disabled-text);
-    }
-    .mx-shortcut {
+}
+
+.mx-menu-bar.mac.disabled .mx-shortcut,
+.mx-context-menu.mac.disabled .mx-shortcut {
       background-color: var(--mx-menu-shortcut-backgroud-disabled);
       color: var(--mx-menu-shortcut-text-second);
-    }
-  }
 }
 
 .mx-context-menu {
@@ -442,4 +453,14 @@ a,
     grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
-}
+}
+`
+
+export default defineConfig({
+  shortcuts: [],
+  theme: {},
+  preflights: [{
+    getCSS: () => mainCss,
+  }],
+  rules: [],
+})
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -12,12 +12,16 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import VueRouter from 'vue-router/vite'
 import { VueRouterAutoImports } from 'unplugin-vue-router'
 import Layouts from 'vite-plugin-vue-layouts'
+import UnoCSS from 'unocss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueJsx(),
+    UnoCSS({
+      configFile: './uno.config.ts'
+    }),
     Layouts({
       layoutsDirs: 'src/layouts',
       defaultLayout: 'default',
diff --git a/src/manager/server_manager.py b/src/manager/server_manager.py
@@ -15,7 +15,7 @@
 
 def vite_server():
     global dev_process
-    dev_process = subprocess.Popen("npm run -C frontend/ dev", shell=True)
+    dev_process = subprocess.Popen("pnpm run -C frontend/ dev", shell=True)
     dev_process.communicate()
 
 
