5d29789f65
style(ant-select.scss): 更新复选样式和标签样式在`ant-select.scss`文件中添加了复选相关的样式，并对`.ant-tag`元素进行了详细的样式定义，包括内边距、边框半径、背景色等。同时调整了`.ant-tag .anticon-close`的字体大小。 refactor(index.vue): 修改标签组件的渲染逻辑 - 在`add-raw-material-drawer/index.vue`和`edit-raw-material-modal/index.vue`中移除了`maxTagTextLength`属性。 - 为长标签增加了包裹`div`，并调整了其样式。 - 对于超过5个字符的标签文本，使用`Tooltip`显示完整内容，并截断显示前5个字符后加上省略号。 - 调整了`table/index.vue`中标签的渲染方式，对于长度超过5个字符的标签使用`Tooltip`展示完整内容。 - 在`add-raw-material-drawer/style.scss`中注释掉了`.ant-select-selection-overflow-item`的最大宽度设置。 ```
template-admin-ts
基于 Ant Design Vue 的中后台管理模板
- vite 4.x
- vue 3.x
- vue-router 4.x
- pinia
- vueuse
- axios
- dayjs
- lodash
- ant-design-vue
- scss
- eslint + prettier
项目启动
# 新开仓库
git init
# 未安装 pnpm
npm add -g pnpm
# 项目运行
pnpm i
pnpm dev
项目部署
- 本地预览
# 打包
pnpm build --mode preview
# 本地运行
pnpm preview
- 预发布/测试环境
pnpm build --mode staging
- 生产环境
pnpm build --mode production
git 提交规范
项目未安装依赖限制 git commit, 但需在代码评审阶段检查
示例：
✨ feat: 新功能
🐛 fix: 修复bug
插件安装
-
vscode- Commit Message Editor
- Gitmoji
-
webstorm- Git Commit Template
- Gitmoji Plus: Commit Button
vite 插件
unocss
示例：
<div class="ml-2 px-2 text-2"></div>
自动导入 api
已安装 vue, vue-router, pinia, @vueuse/core, dayjs, lodash-es
lodash-es为部分安装；若需更多功能函数，可新增在['cloneDeep']， 以数组形式。
示例：
<script setup lang="ts">
const route = useRoute();
const year = ref<string | number>('2023');
year.value = 2023;
const str: string = join(['a', 'b', 'c'], '~');
</script>
自动导入组件
src/components 目录下的组件
| 模式 | 描述 |
|---|---|
Comp.vue |
- |
Comp/Index.vue |
- |
Comp/Comp.vue |
- |
Comp/Index.js |
支持默认导出\命名导出 |
默认导出：
Comp.vue,Comp/Index.vue,Comp/Comp.vue,Comp/Index.js
<template>
<eo-comp />
</template>
命名导出：
Comp/Index.js
// Comp/index.js
export { CompA, CompB, CompC };
<template>
<eos-comp-a />
<eos-comp-b />
<eos-comp-c />
</template>
src/views/**/components 业务组件
页面内的业务组件直接使用
src/views/pageA/components/Comp.vue
<template>
<comp />
</template>
src/components/_base 基础组件
需在
index.ts中命名导出
export { default as Comp } from './comp/index.vue';
<template>
<base-comp />
</template>
自动导入 svg 图标
src/assets/icon.svgsrc/assets/iconA.svg
<template>
<i-icon />
<i-icon-a />
</template>