Merge pull request #28 from hingq/codex/migrate-layout-components-to-tailwind

重构：将布局与主界面迁移为 Tailwind 原子类

Author: hingq

src/components/Asdie.vue

@@ -1,6 +1,12 @@
 <template>
-  <el-menu default-active="2" :collapse="isCollapse" background-color="var(--vt-c-blue)" :router="true" :mode=mode>
-    <el-menu-item index="/layout">
+  <el-menu
+    default-active="2"
+    :collapse="isCollapse"
+    :router="true"
+    :mode="mode"
+    class="h-full border-r-0 bg-sky-700 text-slate-100 dark:bg-slate-900 dark:text-slate-100"
+  >
+    <el-menu-item index="/layout" class="!text-inherit">
       <el-icon>
         <UserFilled />
       </el-icon>
@@ -75,8 +81,4 @@ const mode = computed(() => collapseStore.rowOrCol)
 .el-menu-item {
   --el-menu-hover-bg-color: #275880;
 }
-
-.el-menu {
-  border-right: 0;
-}
 </style>

src/components/Header.vue

@@ -4,7 +4,7 @@
 import { useCollaspeStore, useTheme } from '@/stores';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-const router=useRouter()
+const router = useRouter()
 const span_collapse = ref('')
 const theme=useTheme()
 const collapseStore = useCollaspeStore()
@@ -16,11 +16,10 @@ const collapse = () => {
         collapseStore.change() //展开与折叠
     }
 }
-//改变mode
 const changeMode = async () => {
-    props.el_con.$el.classList.add("an") //添加样式
+    props.el_con.$el.classList.add('an')
     setTimeout(() => {
-        props.el_con.$el.classList.remove("an")
+        props.el_con.$el.classList.remove('an')
     }, 1000)
     props.el_con.$el.style.flexDirection = props.el_con.$el.style.flexDirection === `column` ? `row` : `column`
    
@@ -31,8 +30,8 @@ const changeMode = async () => {
         span.style.cursor=` not-allowed`
         flag=false
     } else {
-        span.style.cursor='pointer'
-        flag=true
+        span.style.cursor = 'pointer'
+        flag = true
 
     }
 }
@@ -41,22 +40,21 @@ const props = defineProps({
         default: null
     }
 })
-const toUrl=(url)=>{
+const toUrl = (url) => {
     router.push(url)
 }
-// change the theme
-const toggle=()=>{
+const toggle = () => {
     theme.setTheme()
 }
 </script>
 <template>
-    <div class="header">
-        <span @click="collapse" class="icon" ref="span_collapse">
+    <div class="flex flex-wrap items-center gap-2 border-b border-sky-200 bg-white px-3 py-2 text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
+        <span @click="collapse" class="relative bottom-[-2px] mr-1 inline-flex w-9 cursor-pointer items-center justify-center rounded-md p-1 transition hover:bg-slate-100 dark:hover:bg-slate-800" ref="span_collapse">
             <el-icon :size="25">
                 <i-ep-Operation />
             </el-icon>
         </span>
-        <span @click="changeMode" class="icon" >
+        <span @click="changeMode" class="relative bottom-[-2px] mr-2 inline-flex w-9 cursor-pointer items-center justify-center rounded-md p-1 transition hover:bg-slate-100 dark:hover:bg-slate-800">
             <el-icon :size="25">
                 <i-ep-Expand />
             </el-icon>

src/styles/twClasses.js

@@ -0,0 +1,10 @@
+export const shellCardClass =
+  'rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100'
+
+export const sectionHeaderClass =
+  'flex h-14 items-center justify-between border-b border-slate-200 px-4 text-base font-medium text-slate-700 dark:border-slate-700 dark:text-slate-100'
+
+export const tableSectionClass =
+  'rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900'
+
+export const mutedTextClass = 'text-slate-500 dark:text-slate-400'

src/views/AboutView.vue

@@ -1,17 +1,6 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
+  <div class="about flex min-h-screen items-center rounded-xl border border-slate-200 bg-white p-6 text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
+    <h1 class="text-2xl font-semibold">This is an about page</h1>
   </div>
-    <Button></Button>
-
+  <Button></Button>
 </template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

src/views/HomeView.vue

@@ -3,8 +3,8 @@ import TheWelcome from '../components/TheWelcome.vue'
 </script>
 
 <template>
-  <main>
-    <el-button>111</el-button>   
-     <TheWelcome />
+  <main class="space-y-3 rounded-xl border border-slate-200 bg-white p-4 text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
+    <el-button>111</el-button>
+    <TheWelcome />
   </main>
 </template>

src/views/Landing.vue

@@ -32,129 +32,22 @@ const goToAbout = () => {
 </script>
 
 <template>
-  <main class="landing-page">
-    <section class="hero">
-      <h1 class="title">算法演示/学习平台</h1>
-      <p class="subtitle">聚焦算法理解与交互实践，帮助你高效掌握核心数据结构与算法思维。</p>
+  <main class="flex min-h-[calc(100vh-2rem)] flex-col justify-center gap-8 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-8 text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 max-md:min-h-auto max-md:justify-start max-md:gap-6 max-md:px-3 max-md:py-6">
+    <section class="text-center">
+      <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100">算法演示/学习平台</h1>
+      <p class="mt-3 text-slate-500 dark:text-slate-400">聚焦算法理解与交互实践，帮助你高效掌握核心数据结构与算法思维。</p>
     </section>
 
-    <section class="feature-grid">
-      <article v-for="feature in coreFeatures" :key="feature.title" class="feature-card">
-        <h2>{{ feature.title }}</h2>
-        <p>{{ feature.description }}</p>
+    <section class="grid grid-cols-[repeat(auto-fit,minmax(210px,1fr))] gap-4 max-md:grid-cols-1">
+      <article v-for="feature in coreFeatures" :key="feature.title" class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-950">
+        <h2 class="text-lg font-semibold text-slate-800 dark:text-slate-100">{{ feature.title }}</h2>
+        <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">{{ feature.description }}</p>
       </article>
     </section>
 
-    <section class="actions">
-      <button class="btn btn-primary" @click="goToAlgorithmDemo">进入算法演示</button>
-      <button class="btn btn-secondary" @click="goToAbout">查看介绍 / 关于</button>
+    <section class="flex flex-wrap justify-center gap-3 max-md:flex-col max-md:items-stretch">
+      <button class="cursor-pointer rounded-full bg-sky-700 px-5 py-2 text-sm text-white transition hover:opacity-90 max-md:w-full" @click="goToAlgorithmDemo">进入算法演示</button>
+      <button class="cursor-pointer rounded-full border border-slate-300 bg-white px-5 py-2 text-sm text-slate-700 transition hover:opacity-90 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100 max-md:w-full" @click="goToAbout">查看介绍 / 关于</button>
     </section>
   </main>
 </template>
-
-<style scoped>
-.landing-page {
-  min-height: calc(100vh - 2rem);
-  padding: 2rem 1rem;
-  background: var(--color-background-soft);
-  border-radius: 16px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 2rem;
-}
-
-.hero {
-  text-align: center;
-}
-
-.title {
-  color: var(--color-heading);
-  font-size: clamp(1.75rem, 2.6vw, 2.3rem);
-  font-weight: 700;
-}
-
-.subtitle {
-  margin-top: 0.75rem;
-  color: var(--vt-c-text-light-2);
-}
-
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
-  gap: 1rem;
-}
-
-.feature-card {
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: 14px;
-  box-shadow: 0 8px 24px rgba(44, 62, 80, 0.08);
-  padding: 1.2rem;
-}
-
-.feature-card h2 {
-  color: var(--color-heading);
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.feature-card p {
-  margin-top: 0.5rem;
-  color: var(--vt-c-text-light-2);
-  font-size: 0.95rem;
-}
-
-.actions {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.btn {
-  border: 0;
-  border-radius: 999px;
-  padding: 0.65rem 1.3rem;
-  cursor: pointer;
-  font-size: 0.95rem;
-  transition: opacity 0.2s ease;
-}
-
-.btn:hover {
-  opacity: 0.9;
-}
-
-.btn-primary {
-  background: var(--vt-c-blue);
-  color: var(--vt-c-white);
-}
-
-.btn-secondary {
-  background: var(--color-background);
-  color: var(--color-heading);
-  border: 1px solid var(--color-borderColor);
-}
-
-@media (max-width: 768px) {
-  .landing-page {
-    min-height: auto;
-    justify-content: flex-start;
-    padding: 1.5rem 0.9rem;
-    gap: 1.5rem;
-  }
-
-  .feature-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .btn {
-    width: 100%;
-  }
-}
-</style>

src/views/admin/issue.vue

@@ -1 +1,4 @@
-<!-- 信息发布 -->
+<!-- 信息发布 -->
+<template>
+  <div class="rounded-lg border border-slate-200 bg-white p-4 text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">信息发布</div>
+</template>

src/views/admin/subjectManage.vue

@@ -1 +1,4 @@
-<!-- 科目管理 -->
+<!-- 科目管理 -->
+<template>
+  <div class="rounded-lg border border-slate-200 bg-white p-4 text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">科目管理</div>
+</template>

src/views/algorithm/index.vue

@@ -64,14 +64,13 @@ const toUrl = (key, url) => {
                     <button class="nav-btn close-btn" aria-label="关闭导航" :aria-expanded="navVisible" aria-controls="algorithm-nav" @click="closeList">
                         <el-icon><Close /></el-icon>
                     </button>
-                    <div class="side">
-                        <div class="link">
-                        </div>
-                        <el-collapse>
+                    <div class="side mt-12">
+                        <div class="link"></div>
+                        <el-collapse class="rounded-lg border border-slate-200 bg-white/90 p-2 dark:border-slate-700 dark:bg-slate-950/80">
                             <el-collapse-item name="1">
                                 <template #title>
                                     <el-icon><Sort /></el-icon>
-                                    <span class="collapse-title">排序</span>
+                                    <span class="ml-1">排序</span>
                                 </template>
                                 <div class="link">
                                     <span @click="toUrl('sort', 'buble')"><el-icon><Top /></el-icon>冒泡排序</span>
@@ -85,7 +84,7 @@ const toUrl = (key, url) => {
                             <el-collapse-item name="2">
                                 <template #title>
                                     <el-icon><Search /></el-icon>
-                                    <span class="collapse-title">查找</span>
+                                    <span class="ml-1">查找</span>
                                 </template>
                                 <div class="link">
                                     <span @click="toUrl('search', 'binary')"><el-icon><Pointer /></el-icon>折半查找</span>
@@ -95,21 +94,19 @@ const toUrl = (key, url) => {
                             <el-collapse-item name="3">
                                 <template #title>
                                     <el-icon><Share /></el-icon>
-                                    <span class="collapse-title">二叉树</span>
+                                    <span class="ml-1">二叉树</span>
                                 </template>
                                 <div class="link">
                                     <span @click="toUrl('binary', 'create')"><el-icon><Share /></el-icon>二叉搜索树</span>
                                 </div>
-                                <div>
-
-                                </div>
+                                <div></div>
                             </el-collapse-item>
                         </el-collapse>
                     </div>
                 </div>
             </div>
         </div>
-        <main class="algorithm-content">
+        <main class="algorithm-content relative z-[1] px-6 py-4">
             <router-view></router-view>
         </main>
     </div>
@@ -125,7 +122,6 @@ const toUrl = (key, url) => {
 
 .nav-btn {
     border: none;
-    background-color: transparent;
     cursor: pointer;
     font-size: 20px;
 }
@@ -234,25 +230,9 @@ const toUrl = (key, url) => {
     right: 30px;
 }
 
-.side {
-    margin-top: 50px;
-}
-
-.algorithm-content {
-    position: relative;
-    z-index: var(--algorithm-content-z);
-    padding: 16px 24px;
-}
-
-
-.collapse-title {
-    margin-left: 6px;
-}
-
 :deep(.el-collapse-item__header) {
     font-size: 16px !important;
     gap: 4px;
 }
 
 </style>
-<style></style>