refactor(app): rewrite application with Nuxt 4, Pinia, and TailwindCSS
This commit replaces the original vanilla JavaScript implementation with a modern frontend stack. The entire application has been rewritten to improve maintainability, developer experience, and leverage modern web technologies. Key changes include: - Replaced plain HTML, CSS, and JS with a Nuxt 4 project structure. - Migrated state management from a global state object to a Pinia store for better organization and reactivity. - Rebuilt the UI with Vue 3 components and styled with TailwindCSS. - Changed the primary persistence mechanism from manual file I/O to automatic LocalStorage saving, while retaining import/export functionality. - All core features, including drag-and-drop, task management, and the import/merge diffing logic, have been ported to the new architecture.
This commit is contained in:
44
components/Board.vue
Normal file
44
components/Board.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="p-3 overflow-auto grid gap-3" :style="gridStyle">
|
||||
<div v-for="(col, colIndex) in columns" :key="colIndex" class="flex flex-col gap-3 min-w-[320px]">
|
||||
<StageColumn v-for="sid in col" :key="sid" :stage-id="sid" :query="query" :category="category" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!columns.length || !columns[0]?.length" class="text-center text-slate-400 py-10">
|
||||
暂无阶段。点击左侧“添加阶段”创建。
|
||||
</div>
|
||||
<div class="px-3 pb-3">
|
||||
<button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="addColumn">添加列</button>
|
||||
</div>
|
||||
<div class="px-3 pb-3">
|
||||
<button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="addStage">添加阶段</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useBoardStore } from '~/stores/board'
|
||||
import StageColumn from './StageColumn.vue'
|
||||
|
||||
const store = useBoardStore()
|
||||
const props = defineProps<{ query: string; category: string | '' }>()
|
||||
const columns = computed(() => store.board.layout?.columns || [])
|
||||
|
||||
const gridStyle = computed(() => ({
|
||||
gridAutoFlow: 'column',
|
||||
gridAutoRows: '1fr'
|
||||
}))
|
||||
|
||||
function addColumn() {
|
||||
if (!store.board.layout.columns) store.board.layout.columns = []
|
||||
store.board.layout.columns.push([])
|
||||
store.log('column-add', { count: store.board.layout.columns.length })
|
||||
}
|
||||
function addStage() {
|
||||
const title = prompt('阶段名称?')
|
||||
if (!title) return
|
||||
const colIndex = store.board.layout.columns.length ? 0 : 0
|
||||
store.addStage(title.trim(), colIndex)
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user