fantasia-ui 0.2.32 → 0.2.36

package/README.en.md

@@ -57,7 +57,7 @@ npm install @vueuse/core
 // main.ts
 import { createApp } from 'vue'
 import FantasiaUI, { install } from 'fantasia-ui'
-import 'fantasia-ui/dist/index.css'
+import 'fantasia-ui/dist/fantasia-ui.css'
 import App from './App.vue'
 
 const app = createApp(App)
@@ -70,7 +70,7 @@ app.mount('#app')
 ```vue
 <script setup lang="ts">
 import { FButton, FInput } from 'fantasia-ui'
-import 'fantasia-ui/dist/index.css'
+import 'fantasia-ui/dist/fantasia-ui.css'
 </script>
 
 <template>
@@ -222,6 +222,48 @@ import { FRow, FCol, FSpace } from 'fantasia-ui'
 </template>
 ```
 
+### Message and Notification
+
+```vue
+<script setup lang="ts">
+import { FMessage, FNotification } from 'fantasia-ui'
+
+// Message
+const showMessage = () => {
+  FMessage.success('Success!')
+}
+
+// Notification
+const showNotification = () => {
+  FNotification({
+    title: 'System Notification',
+    message: 'You have a new message',
+    type: 'info'
+  })
+}
+
+// Use in async operations
+const handleSubmit = async () => {
+  try {
+    await submitForm()
+    FMessage.success('Submitted successfully!')
+  } catch (error) {
+    FMessage.error('Failed to submit, please try again')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <FButton @click="showMessage">Show Message</FButton>
+    <FButton @click="showNotification">Show Notification</FButton>
+    <FButton @click="handleSubmit">Submit Form</FButton>
+  </div>
+</template>
+```
+
+> 💡 View complete FMessage and FNotification API documentation: [Usage Guide](./MESSAGE_USAGE.md)
+
 ## 🎨 Theme Customization
 
 The component library supports theme customization via CSS variables:
@@ -296,10 +338,14 @@ Or add to `src/env.d.ts`:
 
 ## 🔗 Links
 
-- [Changelog](./CHANGELOG.md)
+- [Changelog (中文)](./CHANGELOG.zh-CN.md)
+- [Changelog (English)](./CHANGELOG.md)
+- [Type Support Documentation](./TYPE_SUPPORT.md)
 - [Optimization Report](./OPTIMIZATION.md)
-- [Issues](https://github.com/shuster/fantasia-ui/issues)
+- [Build Issue Solutions](./BUILD_FIX.md)
 - [Contributing Guide](./CONTRIBUTING.md)
+- [Publish Guide](./.github/PUBLISH_GUIDE.md)
+- [Issues](https://github.com/ShusterLi/fantasia-ui/issues)
 
 ## 📄 License
 

package/README.md

@@ -57,7 +57,7 @@ npm install @vueuse/core
 // main.ts
 import { createApp } from 'vue'
 import FantasiaUI, { install } from 'fantasia-ui'
-import 'fantasia-ui/dist/index.css'
+import 'fantasia-ui/dist/fantasia-ui.css'
 import App from './App.vue'
 
 const app = createApp(App)
@@ -70,7 +70,7 @@ app.mount('#app')
 ```vue
 <script setup lang="ts">
 import { FButton, FInput } from 'fantasia-ui'
-import 'fantasia-ui/dist/index.css'
+import 'fantasia-ui/dist/fantasia-ui.css'
 </script>
 
 <template>
@@ -222,6 +222,48 @@ import { FRow, FCol, FSpace } from 'fantasia-ui'
 </template>
 ```
 
+### 消息提示和通知
+
+```vue
+<script setup lang="ts">
+import { FMessage, FNotification } from 'fantasia-ui'
+
+// 消息提示
+const showMessage = () => {
+  FMessage.success('操作成功！')
+}
+
+// 通知
+const showNotification = () => {
+  FNotification({
+    title: '系统通知',
+    message: '您有一条新消息',
+    type: 'info'
+  })
+}
+
+// 在异步操作中使用
+const handleSubmit = async () => {
+  try {
+    await submitForm()
+    FMessage.success('提交成功！')
+  } catch (error) {
+    FMessage.error('提交失败，请重试')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <FButton @click="showMessage">显示消息</FButton>
+    <FButton @click="showNotification">显示通知</FButton>
+    <FButton @click="handleSubmit">提交表单</FButton>
+  </div>
+</template>
+```
+
+> 💡 查看完整的 FMessage 和 FNotification API 文档：[使用指南](./MESSAGE_USAGE.md)
+
 ## 🎨 主题定制
 
 组件库支持 CSS 变量自定义主题：
@@ -298,7 +340,11 @@ const buttonProps: FButtonProps = {
 
 - [更新日志（中文）](./CHANGELOG.zh-CN.md)
 - [更新日志（English）](./CHANGELOG.md)
+- [类型支持文档](./TYPE_SUPPORT.md)
 - [优化报告](./OPTIMIZATION.md)
+- [构建问题解决方案](./BUILD_FIX.md)
+- [贡献指南](./CONTRIBUTING.md)
+- [发布指南](./.github/PUBLISH_GUIDE.md)
 - [问题反馈](https://github.com/ShusterLi/fantasia-ui/issues)
 
 ## 📄 开源协议

package/dist/fantasia-ui.css

@@ -6823,7 +6823,7 @@ to {
 .f-input-number__stack-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
-}.f-result[data-v-c8f97d09] {
+}.f-result[data-v-1667a865] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -6832,50 +6832,50 @@ to {
   padding: 48px 24px;
   --_color: var(--blue);
 }
-.f-result--success[data-v-c8f97d09] {
+.f-result--success[data-v-1667a865] {
   --_color: var(--green);
 }
-.f-result--error[data-v-c8f97d09] {
+.f-result--error[data-v-1667a865] {
   --_color: var(--red);
 }
-.f-result--warning[data-v-c8f97d09] {
+.f-result--warning[data-v-1667a865] {
   --_color: var(--gold);
 }
-.f-result--403[data-v-c8f97d09], .f-result--404[data-v-c8f97d09], .f-result--500[data-v-c8f97d09] {
+.f-result--403[data-v-1667a865], .f-result--404[data-v-1667a865], .f-result--500[data-v-1667a865] {
   --_color: var(--text-dim);
 }
-.f-result__icon[data-v-c8f97d09] {
+.f-result__icon[data-v-1667a865] {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
   color: var(--_color);
 }
-.f-result__code[data-v-c8f97d09] {
+.f-result__code[data-v-1667a865] {
   font-size: 56px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: 2px;
 }
-.f-result__title[data-v-c8f97d09] {
+.f-result__title[data-v-1667a865] {
   font-size: 20px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--text);
 }
-.f-result__subtitle[data-v-c8f97d09] {
+.f-result__subtitle[data-v-1667a865] {
   margin-top: 8px;
   font-size: 14px;
   line-height: 1.6;
   color: var(--text-muted);
   max-width: 480px;
 }
-.f-result__extra[data-v-c8f97d09] {
+.f-result__extra[data-v-1667a865] {
   display: flex;
   gap: 12px;
   margin-top: 24px;
 }
-.f-result__content[data-v-c8f97d09] {
+.f-result__content[data-v-1667a865] {
   margin-top: 24px;
   width: 100%;
 }.f-message[data-v-3aba692f] {