refactor: 移除ant-design-vue和tailwindcss依赖并优化样式

style: 统一使用css替换scss并调整组件样式
style: 优化组件布局和属性顺序
chore: 更新.gitignore和.eslintrc配置
This commit is contained in:
张翔
2026-03-13 09:55:05 +08:00
parent 9f8bf041c3
commit 2555bf5f55
17 changed files with 901 additions and 1313 deletions
@@ -4,13 +4,31 @@
<template #header>
<div class="card-title">
<span>字典管理</span>
<el-button type="primary" @click="handleAdd">新增字典</el-button>
<el-button
type="primary"
@click="handleAdd"
>
新增字典
</el-button>
</div>
</template>
<el-table :data="dataSource" v-loading="loading" style="width: 100%">
<el-table-column prop="id" label="ID" />
<el-table-column prop="dictName" label="字典名称" />
<el-table-column prop="dictType" label="字典类型" />
<el-table
v-loading="loading"
:data="dataSource"
style="width: 100%"
>
<el-table-column
prop="id"
label="ID"
/>
<el-table-column
prop="dictName"
label="字典名称"
/>
<el-table-column
prop="dictType"
label="字典类型"
/>
<el-table-column label="状态">
<template #default="{ row }">
<el-tag :type="row.status === '0' ? 'success' : 'danger'">
@@ -18,18 +36,45 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" />
<el-table-column label="操作" width="200">
<el-table-column
prop="remark"
label="备注"
/>
<el-table-column
label="操作"
width="200"
>
<template #default="{ row }">
<el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
<el-button
type="primary"
link
size="small"
@click="handleEdit(row)"
>
编辑
</el-button>
<el-button
type="danger"
link
size="small"
@click="handleDelete(row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog v-model="modalVisible" :title="modalTitle" width="500px">
<el-form :model="formState" label-width="80px">
<el-dialog
v-model="modalVisible"
:title="modalTitle"
width="500px"
>
<el-form
:model="formState"
label-width="80px"
>
<el-form-item label="字典名称">
<el-input v-model="formState.dictName" />
</el-form-item>
@@ -38,17 +83,33 @@
</el-form-item>
<el-form-item label="状态">
<el-select v-model="formState.status">
<el-option value="0" label="正常" />
<el-option value="1" label="停用" />
<el-option
value="0"
label="正常"
/>
<el-option
value="1"
label="停用"
/>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="formState.remark" type="textarea" />
<el-input
v-model="formState.remark"
type="textarea"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="modalVisible = false">取消</el-button>
<el-button type="primary" @click="handleModalOk">确定</el-button>
<el-button @click="modalVisible = false">
取消
</el-button>
<el-button
type="primary"
@click="handleModalOk"
>
确定
</el-button>
</template>
</el-dialog>
</div>
@@ -94,10 +155,12 @@ const handleDelete = async (row: any) => {
cancelButtonText: '取消',
type: 'warning'
})
await request.delete(`/dict/types/${row.id}`)
await request.delete(`/dict/${row.id}`)
ElMessage.success('删除成功')
fetchData()
} catch {}
} catch (error) {
console.error('删除字典失败:', error)
}
}
const handleModalOk = async () => {
@@ -118,7 +181,7 @@ const handleModalOk = async () => {
onMounted(() => fetchData())
</script>
<style scoped lang="scss">
<style scoped lang="css">
.dict-management .card-title {
display: flex;
justify-content: space-between;