🧪 test(vite-plugin-autogeneration-import-file-test-app-1): 测试项目。测试vue…

…-sonner通知组件的效果。效果很差，内容都糊在一起了。
ruan-cat · Nov 5, 2024 · af492a8 · af492a8
1 parent fcda6fa
commit af492a8
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 17 deletions.
diff --git a/vite-plugin-autogeneration-import-file/app/package.json b/vite-plugin-autogeneration-import-file/app/package.json
@@ -14,7 +14,8 @@
 		"clean": "rimraf dist .turbo"
 	},
 	"dependencies": {
-		"vue": "^3.5.12"
+		"vue": "^3.5.12",
+		"vue-sonner": "^1.2.4"
 	},
 	"devDependencies": {
 		"@ruan-cat-test/vite-plugin-autogeneration-import-file": "workspace:^",

diff --git a/vite-plugin-autogeneration-import-file/app/src/App.vue b/vite-plugin-autogeneration-import-file/app/src/App.vue
@@ -1,24 +1,48 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import { Toaster, toast } from "vue-sonner";
+
 import TestResolve from "./resovleComponents/resolve.vue";
 </script>
 
 <template>
-	<div>
-		<input v-focus />
-		<a href="https://vitejs.dev" target="_blank">
-			<img src="/vite.svg" class="logo" alt="Vite logo" />
-		</a>
-		<a href="https://vuejs.org/" target="_blank">
-			<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-		</a>
-	</div>
+	<section>
+		<div>
+			<input v-focus />
+			<a href="https://vitejs.dev" target="_blank">
+				<img src="/vite.svg" class="logo" alt="Vite logo" />
+			</a>
+			<a href="https://vuejs.org/" target="_blank">
+				<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+			</a>
+		</div>
+
+		<!-- 已经被注册成功 -->
+		<TestResolve></TestResolve>
+		<ComponentHelloWorld msg="看看自定义的 ComponentHelloWorld 显示？"></ComponentHelloWorld>
+		<MyComponentTestDir></MyComponentTestDir>
+
+		<!-- 
+			https://github.com/xiaoluoboding/vue-sonner 
+			效果很差，在源码仓库的测试项目内，无论是nuxt还是普通的vite项目，其表现结果都很正常
+			到了我们这里，就不正常了。
+			本测试项目，和其他的业务用项目，都不正常。通知组件都糊在一起。
 
-	<!-- 已经被注册成功 -->
-	<TestResolve></TestResolve>
-	<ComponentHelloWorld msg="看看自定义的 ComponentHelloWorld 显示？"></ComponentHelloWorld>
-	<MyComponentTestDir></MyComponentTestDir>
+			考虑废弃，换其他的组件实现。
+		-->
+		<Toaster
+			:toastOptions="{
+				actionButtonStyle: { backgroundColor: 'rgb(219, 239, 255)' },
+				cancelButtonStyle: { backgroundColor: 'rgb(254, 226, 226)' },
+			}"
+			:expand="true"
+			:richColors="true"
+			:closeButton="true"
+			:visibleToasts="5"
+			:position="'bottom-right'"
+			:gap="30"
+			:dir="'auto'"
+		></Toaster>
+	</section>
 </template>
 
 <style scoped>

diff --git a/vite-plugin-autogeneration-import-file/app/src/components/HelloWorld.vue b/vite-plugin-autogeneration-import-file/app/src/components/HelloWorld.vue
@@ -1,13 +1,26 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { toast as vueSonnerToast } from "vue-sonner";
 
 defineProps<{ msg: string }>();
 
 const count = ref(0);
+
+function showVueSonnerToast() {
+	vueSonnerToast.warning("你已取消刚才的新建栏目", {
+		duration: Infinity,
+	});
+	vueSonnerToast.warning("你已取消刚才的新建栏目", {
+		duration: Infinity,
+	});
+	vueSonnerToast.warning("你已取消刚才的新建栏目", {
+		duration: Infinity,
+	});
+}
 </script>
 
 <template>
-	<h1>{{ msg }}</h1>
+	<h1 @click="showVueSonnerToast">{{ msg }}</h1>
 
 	<div class="card">
 		<button type="button" @click="count++">count is {{ count }}</button>

diff --git a/vite-plugin-autogeneration-import-file/app/src/style.css b/vite-plugin-autogeneration-import-file/app/src/style.css
@@ -1,3 +1,17 @@
+
+/* 
+	增加此内容，测试该样式对vue-sonner库的样式影响
+	测试不出来。毫无影响。通知消息组件仍旧是糊在一起的。
+*/
+/* *,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+} */
+
+
 :root {
 	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
 	font-size: 16px;