vbenjs / vben-admin-thin-next Goto Github PK
View Code? Open in Web Editor NEWvue-vben-admin-2.0 mini template.vue3,vite,typescript
Home Page: https://vvbin.cn/thin/next
License: MIT License
vue-vben-admin-2.0 mini template.vue3,vite,typescript
Home Page: https://vvbin.cn/thin/next
License: MIT License
太慢了
什么时候可以加上
最新版本-设置按钮移动到了右上角。设置菜单里面 有个全屏内容,点击后直接全屏了,按了esc也无法恢复。但是由于一下子全屏,导致设置按钮也看不到了。
原来的情况是 设置按钮是 在右侧中间浮动的就不存在这个问题,建议解决!另外还是建议一个浮动设置按钮就行了,不能像其他admin后台似的 浮动菜单过多 都占用正常页面了
如题,只是需要一个搭建好的框架,感觉目前精简版的功能还是太多了
删除yarn.lock文件yarn install安装依赖,运行yarn dev,vite无法启动,报错:
Please describe the steps of the problem in detail to ensure that we can restore the correct problem
更新2.7.1版本后,Vetur提示报红怎么解决?
打包时出现以下报错信息,与 #40 表现相似:
[vite]: Rollup failed to resolve import "F:/git/vben-admin-thin-next/node_modules/ant-design-vue/es/tab-pane/style/index" from "src\components\QuotaTree\src\QuotaTree.vue?vue&type=script&setup=true&lang.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
error during build:
Error: [vite]: Rollup failed to resolve import "F:/git/vben-admin-thin-next/node_modules/ant-design-vue/es/tab-pane/style/index" from "src\components\QuotaTree\src\QuotaTree.vue?vue&type=script&setup=true&lang.ts".
This is most likely unintended because it can break your application at runtime.
我的业务代码只写了一个QuotaTree组件,其中引用了ant-design-vue的Tabs组件,import语句为:
import { Tabs, TabPane, AutoComplete } from 'ant-design-vue';
猜测是自动引入相关css文件导致
请描述在演示页面中复现 Bug 的详细步骤,以确保我们可以理解并定位问题。部分 Bug 如果未在 Demo 中涉及,请务必提供关键代码
thin-next什么时候能更到2.7.0版本呢 谢谢
Describe your issue here.
If the feature requests relates to a problem, please describe the problem you are trying to solve here.
What should happen? Please describe the desired behaviour.
What are the alternative solutions? Please describe what else you have considered?
Button
组件引入时会报警告,全局 AButton
没有这个问题
警告:
192.168.1.30-1634782917635.log
<template>
<div class="p-4">
<Button>123</Button>
<GrowCard :loading="loading" class="enter-y" />
<SiteAnalysis class="!my-4 enter-y" :loading="loading" />
<div class="md:flex enter-y">
<VisitRadar class="md:w-1/3 w-full" :loading="loading" />
<VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
<SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import GrowCard from './components/GrowCard.vue';
import SiteAnalysis from './components/SiteAnalysis.vue';
import VisitSource from './components/VisitSource.vue';
import VisitRadar from './components/VisitRadar.vue';
import SalesProductPie from './components/SalesProductPie.vue';
import { Button } from '/@/components/Button';
const loading = ref(true);
setTimeout(() => {
loading.value = false;
}, 1500);
</script>
A clear and concise description of what the bug is..
eslint can not work, here is my screen shot
Please describe the steps of the problem in detail to ensure that we can restore the correct problem
just yarn and it just happened...
请清晰地描述此 Bug 的具体表现。
run yarn lint:stylelint
resulting in:
src/App.vue
10:12 ✖ Unknown word CssSyntaxError
src/layouts/default/index.vue
17:12 ✖ Unknown word CssSyntaxError
src/layouts/iframe/index.vue
13:12 ✖ Unknown word CssSyntaxError
src/layouts/page/index.vue
28:12 ✖ Unknown word CssSyntaxError
<More error omitted>
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Applying fix in vbenjs/vue-vben-admin@c2b207d fix this issue
run yarn lint:stylelint
打包后无法切换系统主题颜色,且a标签为黑色无主题颜色
a {
color: inherit;
text-decoration: inherit;
}
会覆盖a标签的颜色。
尝试在设置中清空缓存并返回登录页无效。
下载最新版vben-admin-thin-next 2.8.0
yarn build 或 yarn preview
Execute yarn install
resulting in gifsicle pre-build test failed
. See https://github.com/anncwb/vue-vben-admin/issues/1438#issuecomment-1002897389 for detail.
Sync package.json
with vue-vben-admin may fix this yarn install
error
Execute yarn install
in terminal.
已阅读 文档.
确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
已在 Issues 中搜索了相关的关键词
不是 ant design vue 组件库的 Bug
请清晰地描述此 Bug 的具体表现。
views 中新增一个页面,使用 ant design vue 组件库中的 Typography 组件,yarn dev 开发时能够正常加载显示,但是 yarn preview 预览时提示报错,关键的错误信息如下:
[vite]: Rollup failed to resolve import ".../f/node_modules/ant-design-vue/es/typography-paragraph/style/index" from "src/views/sys/about/index.vue".
This is most likely unintended because it can break your application at runtime.
意思就是找不到 Typography 组件的样式。
请描述在演示页面中复现 Bug 的详细步骤,以确保我们可以理解并定位问题。部分 Bug 如果未在 Demo 中涉及,请务必提供关键代码
<template>
<div>
<Typography>
<TypographyTitle>测试排版</TypographyTitle>
<TypographyParagraph>
1. 中文文档地址为 vben-admin-doc,采用 Vitepress 开发。如发现文档有误,欢迎提 pr 帮助我们改进。 <br />
2. 英文文档暂时没有时间来写,欢迎有时间的同学来帮忙写英文文档。 <br />
3. 感谢作者开源!!!
</TypographyParagraph>
</Typography>
</div>
</template>
<script language="ts" setup>
import { Typography, TypographyParagraph, TypographyTitle } from 'ant-design-vue';
</script>
报错信息说就是找不到 Typography 组件的样式,于是我阅读了一下 ant design vue 关于该组件的代码,发现 TypographyTitle、TypographyParagraph、TypographyText 等等以 Typography 开头的组件其实均在共用一个 typography 样式文件,因此修改导入部分的代码,让它能够正确导入改组件的样式即可。
由于我不懂前端,就采用以下方式比较傻瓜式的针对性方案,临时解决了以上 bug,但是不具备通用性,因为不确定是否也有同样的组件出现类似情况。需要作者进行优化处理。
傻瓜式解决办法:
修改 build/vite/plugin/styleImport.ts 文件中导入组件样式的代码如下,大概从第 16 行开始:
export function configStyleImportPlugin(isBuild: boolean) {
if (!isBuild) {
return [];
}
const styleImportPlugin = styleImport({
libs: [
{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
+ // 处理 typography 组件
+ let new_name = name;
+ const name_list = name.split('-');
+ if (name_list[0] === 'typography') {
+ new_name = name_list[0];
+ }
+ return `ant-design-vue/es/${new_name}/style/index`;
},
},
],
});
return styleImportPlugin;
}
作者辛苦了,开源不易,加油!!!
.env.development文件配置如下
# Whether to open mock
VITE_USE_MOCK = false
# public path
VITE_PUBLIC_PATH = /
VITE_PROXY=[["/c","http://121.196.122.107:8090"]]
VITE_GLOB_API_URL=/c
进行http请求地址为项目地址:localhost:3001,而不是这里配置的/c地址。
http请求如下:
getList = (input: GetIdentityUsersInput) =>
defHttp.get<PagedResultDto<IdentityUserDto>>({
url: '/api/identity/users',
params: {
filter: input.filter,
sorting: input.sorting,
skipCount: input.skipCount,
maxResultCount: input.maxResultCount,
},
headers: {
ignoreCancelToken: true,
},
});
have plan continue maintenance the thin version?now,the thin version stop at 2.7.2,the vue-vben-admin version is update to 2.8.0 two months ago
(node:28344) UnhandledPromiseRejectionWarning: Error: [vite]: Rollup failed to resolve import "@vue/composition-api" from "node_modules\vue-demi\lib\v2\index.esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
at onRollupWarning (E:\dengxj\vue\vben-test-001\node_modules\vite\dist\node\chunks\dep-6f99a5ef.js:40308:19)
at Object.onwarn (E:\dengxj\vue\vben-test-001\node_modules\vite\dist\node\chunks\dep-6f99a5ef.js:71042:17)
at Object.onwarn (E:\dengxj\vue\vben-test-001\node_modules\vite\node_modules\rollup\dist\shared\rollup.js:19541:20)
at ModuleLoader.handleResolveId (E:\dengxj\vue\vben-test-001\node_modules\vite\node_modules\rollup\dist\shared\rollup.js:18451:26)
at E:\dengxj\vue\vben-test-001\node_modules\vite\node_modules\rollup\dist\shared\rollup.js:18418:22
at async Promise.all (index 1)
at async ModuleLoader.fetchStaticDependencies (E:\dengxj\vue\vben-test-001\node_modules\vite\node_modules\rollup\dist\shared\rollup.js:18416:34)
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (E:\dengxj\vue\vben-test-001\node_modules\vite\node_modules\rollup\dist\shared\rollup.js:18393:9)
at async Promise.all (index 0)
(Use node --trace-warnings ...
to show where the warning was created)
(node:28344) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict
(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:28344) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[vite]: Rollup failed to resolve import "/Users/xxx/Documents/Vue/ant-design-vue/es/config-provider/style/index" from "src/App.vue?vue&type=script&setup=true&lang.ts". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to
build.rollupOptions.externalerror during build: Error: [vite]: Rollup failed to resolve import "/Users/xxx/Documents/Vue/ant-design-vue/es/config-provider/style/index" from "src/App.vue?vue&type=script&setup=true&lang.ts". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to
build.rollupOptions.external at onRollupWarning (/Users/xxx/Documents/Vue/ant-design-vue-vite-template/node_modules/[email protected]@vite/dist/node/chunks/dep-98dbe93b.js:52150:19) at onwarn (/Users/xxx/Documents/Vue/ant-design-vue-vite-template/node_modules/[email protected]@vite/dist/node/chunks/dep-98dbe93b.js:51935:13) at Object.onwarn (/Users/xxx/Documents/Vue/ant-design-vue-vite-template/node_modules/[email protected]@rollup/dist/shared/rollup.js:20515:13) at ModuleLoader.handleResolveId (/Users/xxx/Documents/Vue/ant-design-vue-vite-template/node_modules/[email protected]@rollup/dist/shared/rollup.js:19864:26) at /Users/xxx/Documents/Vue/ant-design-vue-vite-template/node_modules/[email protected]@rollup/dist/shared/rollup.js:19856:26 at processTicksAndRejections (internal/process/task_queues.js:93:5)
请清晰地描述此 Bug 的具体表现。
请描述在演示页面中复现 Bug 的详细步骤,以确保我们可以理解并定位问题。部分 Bug 如果未在 Demo 中涉及,请务必提供关键代码
pnpm install 提示 ERR_PNPM_INVALID_OVERRIDE_SELECTOR Cannot parse the "//" selector in the overrides
"resolutions": {
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
"bin-wrapper": "npm:bin-wrapper-china",
"rollup": "^2.56.3"
},
删除package.json 中的 //。一行
暂未解决
BUG描述
更改主题色配置不生效
环境信息:
重现步骤
1: 更改build/config/lessModifyVars.ts文件
2: 启动项目发现主题色配置修改不生效
附加信息
去除按需加载css插件后,全量引入ant-design.less文件, 主题色配置会生效
可能是 vite-plugin-style-import中的esModule配置未生效?
Vben Admin 2.0 精简版拉下来 通过“npm install"、”npm run serve“ 跟 ”yarn install“ 、 ”yarn serve" 都跑不起来
在docker中部署了代码,yarn dev
后卡在启动页面,后台报如下错误
8:24:35 AM [vite] Internal server error: The service is no longer running
Plugin: vite:esbuild
File: /workspaces/vben-admin-thin-next-main/src/main.ts
at /workspaces/vben-admin-thin-next-main/node_modules/esbuild/lib/main.js:1276:29
at sendRequest (/workspaces/vben-admin-thin-next-main/node_modules/esbuild/lib/main.js:625:14)
at start (/workspaces/vben-admin-thin-next-main/node_modules/esbuild/lib/main.js:1274:9)
at Object.transform2 [as transform] (/workspaces/vben-admin-thin-next-main/node_modules/esbuild/lib/main.js:1324:5)
at /workspaces/vben-admin-thin-next-main/node_modules/esbuild/lib/main.js:1920:55
at new Promise (<anonymous>)
at Object.transform (/workspaces/vben-admin-thin-next-main/node_modules/esbuild/lib/main.js:1920:14)
at Object.transform (/workspaces/vben-admin-thin-next-main/node_modules/esbuild/lib/main.js:1751:62)
at transformWithEsbuild (/workspaces/vben-admin-thin-next-main/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:22222:38)
at async TransformContext.transform (/workspaces/vben-admin-thin-next-main/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:22271:32)
at async Object.transform (/workspaces/vben-admin-thin-next-main/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42396:30)
at async doTransform (/workspaces/vben-admin-thin-next-main/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:56801:29) (x2)
remote-container
创建的nodejs16+typescript
docker环境设置列属性名称为可编辑的,这个时候如果设置rowKey,会有bug
export function getBasicColumns(): BasicColumn[] {
return [
{
title: 'ID',
dataIndex: 'taskId',
width: 200,
},
{
title: '名称',
dataIndex: 'taskName',
edit: true,
width: 200,
},
{
title: '准确率',
dataIndex: 'accuracy',
width: 200,
},
{
title: '开始时间',
width: 300,
dataIndex: 'startTs',
},
{
title: '结束时间',
width: 300,
dataIndex: 'endTs',
},
{
title: '状态',
dataIndex: 'status',
},
];
}
// setup
const [registerTable, { getSelectRowKeys, getSelectRows }] = useTable({
title: '数据列表',
columns: getBasicColumns(),
bordered: true,
dataSource: props.dataset,
canResize: false,
pagination: {
total: props.total,
defaultPageSize: props.pageSize,
},
showIndexColumn: false,
rowKey: 'taskId',
rowSelection: {
type: 'checkbox',
},
actionColumn: {
width: 250,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
},
});
Please describe the steps of the problem in detail to ensure that we can restore the correct problem
components/Table/src/hooks/useColumns.ts#321
// enum
if (isObject(format) && Reflect.has(format, 'size')) {
return format.get(text)
}
当前枚举类型处理使用 isObject
方法判断,但 toString.call
传入 Map
对象返回的结果是 [object Map]
并不是 [object Object]
,所以不能使用 isObject
方法判断
新增 isMap
方法进行判断处理
使用pnpm
安装依赖后运行pnpm run dev
打开项目异常
pnpm i
@ant-design/colors
@ant-design/icons-vue
moment
qs
pnpm dev
PS: 经筛查,更新vite
版本至2.5.10
后可解决
vben-admin:2.8.0
git clone https://github.com/anncwb/vben-admin-thin-next
yarn install
使用APISelect组件,我的formSchema如下:
{
field: 'personId',
component: 'ApiSelect',
label: '人员名称',
required: true,
componentProps: {
api:getAllUserItem,
resultField:'items',
labelField: 'realName',
valueField: 'id',
numberToString:true,
}
很希望APISelect这个组件带有搜索功能
A clear and concise description of what the bug is..
template下面多个标签tab页无法切换且会导致所有的路由都无法加载,只有刷新页面才可以解决
类似于下面这种情况:
<template> <span>1</span> <span>2</span> </template>
即使很简单的标签也会出现该问题,经过测试再最新版@2.4.2中也会出现该问题
这个版本不跟admin一样打tag吗?这样如何知道怎么修改本地代码呢
拉取 2.7.1
版本并解决冲突后,进行打包,控制台报错
随后我检查了报错部分的代码,发现是 src/views/sys/error-log/index.vue
文件中有导入 src/api/demo/error
文件的代码,而在 src/api/demo
目录下并不存在文件名为 error
开头的文件
env:node:v15.0.1
npm:6.14.8
yarn:1.22.10
Download the latest,Run
yarn add
run serve
项目更新为2.8的版本,我本地 node 版本是 14.16.0,导致安装包失败?看报错需要升级node版本为16以上,是必须这么干吗?
我按照文档创建页面和路由,菜单可正常显示,但是新建页面的视图不更新,需要重启服务才会生效.。我尝试将自己写的代码拷贝至自带的关于页面发现没有这种问题。第一次接触该项目。望大佬看到能帮忙解惑
README.md 有冲突未解决导致排版异常
yarn serve 后,提示:
TypeError: Cannot read property 'endsWith' of undefined
yarn v1.22.11
[email protected]
对比前两个版本,路由文件并没有更改,但该版本下 Vite 的 HMR 热更新特性却消失。
升级到v3
感觉是依赖自己勇到的包有问题。
最开始拉的精简版本的包,vben2.7.0的版本,线上部署一段时间,本地打包也是正常,但是一段时间后线上部署出现问题,报错题图如下:
删除自己本地的依赖包重新安装就出错了,后面看了issue大概就是升级到2.8.0后就可以解决安装依赖的问题,但是我升级到2.8.0后又依然出现了类似错误:(每次出现的错误都是途中圈出的包内命令出错如gifsicle这个处理图片的包)
2.7.0精简版本的包,删除node_modules,重新安装依赖
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.