fantasia-ui 0.2.31 → 0.2.33

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shuster
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -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,14 +338,18 @@ 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
 
-[MIT](./LICENSE) License © 2024 Shuster
+[MIT](./LICENSE) License © 2026 Shuster
 
 ## 🤝 Contributing
 

package/README.md

@@ -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,12 +340,16 @@ const buttonProps: FButtonProps = {
 
 - [更新日志（中文）](./CHANGELOG.zh-CN.md)
 - [更新日志（English）](./CHANGELOG.md)
+- [类型支持文档](./TYPE_SUPPORT.md)
 - [优化报告](./OPTIMIZATION.md)
-- [问题反馈](https://github.com/shuster/fantasia-ui/issues)
+- [构建问题解决方案](./BUILD_FIX.md)
+- [贡献指南](./CONTRIBUTING.md)
+- [发布指南](./.github/PUBLISH_GUIDE.md)
+- [问题反馈](https://github.com/ShusterLi/fantasia-ui/issues)
 
 ## 📄 开源协议
 
-[MIT](./LICENSE) License © 2024 Shuster
+[MIT](./LICENSE) License © 2026 Shuster
 
 ## 🤝 贡献
 

package/dist/fantasia-ui.css

@@ -5990,14 +5990,14 @@ to {
 .f-editor__textarea[data-v-6d590649]::placeholder {
   color: #475569;
   opacity: 0.7;
-}.f-table[data-v-22daf8be] {
+}.f-table[data-v-01724962] {
   position: relative;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
   overflow: hidden;
   min-height: 14rem;
 }
-.f-table__loading[data-v-22daf8be] {
+.f-table__loading[data-v-01724962] {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, 0.7);
@@ -6009,12 +6009,13 @@ to {
   gap: 0.625rem;
   z-index: 10;
 }
-.f-table__scroll[data-v-22daf8be] {
+.f-table__scroll[data-v-01724962] {
+  position: relative;
   width: 100%;
   height: 100%;
   overflow: auto;
 }
-.f-table__inner[data-v-22daf8be] {
+.f-table__inner[data-v-01724962] {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.75rem;
@@ -6022,67 +6023,67 @@ to {
   table-layout: auto;
   min-width: 100%;
 }
-.f-table__inner th[data-v-22daf8be],
-.f-table__inner td[data-v-22daf8be] {
+.f-table__inner th[data-v-01724962],
+.f-table__inner td[data-v-01724962] {
   padding: 0.625rem;
   border-right: 1px solid #e2e8f0;
 }
-.f-table__inner th[data-v-22daf8be]:last-child,
-.f-table__inner td[data-v-22daf8be]:last-child {
+.f-table__inner th[data-v-01724962]:last-child,
+.f-table__inner td[data-v-01724962]:last-child {
   border-right: none;
 }
-.f-table__col--index[data-v-22daf8be] {
+.f-table__col--index[data-v-01724962] {
   width: 3rem;
 }
-.f-table__head[data-v-22daf8be] {
+.f-table__head[data-v-01724962] {
   position: sticky;
   top: 0;
   z-index: 2;
   background: #1e293b;
   color: #ffffff;
 }
-.f-table__th[data-v-22daf8be] {
+.f-table__th[data-v-01724962] {
   font-weight: 700;
   text-align: center;
 }
-.f-table__th--index[data-v-22daf8be] {
+.f-table__th--index[data-v-01724962] {
   background: #0f172a;
   width: 3rem;
 }
-.f-table__th-inner[data-v-22daf8be] {
+.f-table__th-inner[data-v-01724962] {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.25rem;
 }
-.f-table__row[data-v-22daf8be] {
+.f-table__row[data-v-01724962] {
   border-bottom: 1px solid #e2e8f0;
 }
-.f-table__row[data-v-22daf8be]:hover {
+.f-table__row[data-v-01724962]:hover {
   background: rgba(248, 250, 252, 0.7);
 }
-.f-table__td[data-v-22daf8be] {
+.f-table__td[data-v-01724962] {
   text-align: center;
   font-size: 0.6875rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.f-table__td--muted[data-v-22daf8be] {
+.f-table__td--muted[data-v-01724962] {
   color: #94a3b8;
   text-decoration: line-through;
   opacity: 0.6;
 }
-.f-table__td--index[data-v-22daf8be] {
+.f-table__td--index[data-v-01724962] {
   background: rgba(248, 250, 252, 0.5);
   font-weight: 800;
   color: #64748b;
 }
-.f-table__spacer td[data-v-22daf8be] {
+.f-table__spacer td[data-v-01724962] {
   padding: 0;
   border: none;
 }
-.f-table__empty[data-v-22daf8be] {
+.f-table__empty[data-v-01724962] {
   padding: 3rem 0;
   text-align: center;
   color: #94a3b8;
@@ -6178,50 +6179,50 @@ to {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}.f-button-group[data-v-15cf49dc] {
+}.f-button-group[data-v-62561657] {
   display: inline-flex;
   vertical-align: middle;
 }
-.f-button-group[data-v-15cf49dc]:last-child {
+.f-button-group[data-v-62561657]:last-child {
   margin-right: 0;
 }
-.f-button-group[data-v-15cf49dc] >  * {
+.f-button-group[data-v-62561657] >  * {
   position: relative;
   display: inline-flex;
 }
-.f-button-group[data-v-15cf49dc] >  * .f-button {
+.f-button-group[data-v-62561657] >  * .f-button {
   border-radius: 0;
 }
-.f-button-group[data-v-15cf49dc] >  *:not(:first-child) {
+.f-button-group[data-v-62561657] >  *:not(:first-child) {
   margin-left: -1px;
 }
-.f-button-group[data-v-15cf49dc] >  *:first-child .f-button {
+.f-button-group[data-v-62561657] >  *:first-child .f-button {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
-.f-button-group[data-v-15cf49dc] >  *:last-child .f-button {
+.f-button-group[data-v-62561657] >  *:last-child .f-button {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.f-button-group[data-v-15cf49dc] >  *:hover {
+.f-button-group[data-v-62561657] >  *:hover {
   z-index: 1;
 }
-.f-button-group[data-v-15cf49dc] >  * .is-active {
+.f-button-group[data-v-62561657] >  * .is-active {
   z-index: 2;
 }
-.f-button-group--vertical[data-v-15cf49dc] {
+.f-button-group--vertical[data-v-62561657] {
   flex-direction: column;
   margin-right: 0;
   margin-bottom: 12px;
 }
-.f-button-group--vertical[data-v-15cf49dc] >  *:not(:first-child) {
+.f-button-group--vertical[data-v-62561657] >  *:not(:first-child) {
   margin-left: 0;
   margin-top: -1px;
 }
-.f-button-group--vertical[data-v-15cf49dc] >  *:first-child .f-button {
+.f-button-group--vertical[data-v-62561657] >  *:first-child .f-button {
   border-radius: 4px 4px 0 0;
 }
-.f-button-group--vertical[data-v-15cf49dc] >  *:last-child .f-button {
+.f-button-group--vertical[data-v-62561657] >  *:last-child .f-button {
   border-radius: 0 0 4px 4px;
 }:root {
   --f-collapse-border-color: #333338;
@@ -6822,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;
@@ -6831,50 +6832,263 @@ 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] {
+  --f-bg: #1f1f1f;
+  --f-border: rgba(255, 255, 255, 0.08);
+  --f-text: #e8e4f0;
+  --f-text-muted: #7c7a8a;
+  --f-shadow: rgba(0, 0, 0, 0.35);
+  --f-info: #60a5fa;
+  --f-success: #34d399;
+  --f-warning: #fb923c;
+  --f-error: #f87171;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: min(480px, 100vw - 32px);
+  padding: 10px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--f-text);
+  background: var(--f-bg);
+  border: 1px solid var(--f-border);
+  box-shadow: 0 2px 6px var(--f-shadow);
+  z-index: 3000;
+  pointer-events: auto;
+  transition: top 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.f-message__icon[data-v-3aba692f] {
+  flex-shrink: 0;
+  font-size: 16px;
+}
+.f-message__content[data-v-3aba692f] {
+  flex: 1;
+  word-break: break-word;
+}
+.f-message__close[data-v-3aba692f] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--f-text-muted);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.f-message__close[data-v-3aba692f]:hover {
+  color: var(--f-text);
+}
+.f-message--info .f-message__icon[data-v-3aba692f] {
+  color: var(--f-info);
+}
+.f-message--success .f-message__icon[data-v-3aba692f] {
+  color: var(--f-success);
+}
+.f-message--warning .f-message__icon[data-v-3aba692f] {
+  color: var(--f-warning);
+}
+.f-message--error .f-message__icon[data-v-3aba692f] {
+  color: var(--f-error);
+}
+:root.light .f-message[data-v-3aba692f] {
+  --f-bg: #ffffff;
+  --f-border: rgba(0, 0, 0, 0.08);
+  --f-text: #1e293b;
+  --f-text-muted: #94a3b8;
+  --f-shadow: rgba(0, 0, 0, 0.12);
+  --f-info: #2563eb;
+  --f-success: #059669;
+  --f-warning: #ea580c;
+  --f-error: #dc2626;
+}
+.f-message-fade-enter-active[data-v-3aba692f] {
+  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.f-message-fade-leave-active[data-v-3aba692f] {
+  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
+}
+.f-message-fade-enter-from[data-v-3aba692f],
+.f-message-fade-leave-to[data-v-3aba692f] {
+  opacity: 0;
+  transform: translate(-50%, -12px);
+}.f-notification[data-v-7600a501] {
+  --f-bg: #000000;
+  --f-border: rgba(255, 255, 255, 0.08);
+  --f-text: #e8e4f0;
+  --f-text-muted: #7c7a8a;
+  --f-shadow: rgba(0, 0, 0, 0.35);
+  --f-info: #60a5fa;
+  --f-success: #34d399;
+  --f-warning: #fb923c;
+  --f-error: #f87171;
+  position: fixed;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 340px;
+  max-width: calc(100vw - 32px);
+  padding: 16px;
+  border-radius: 4px;
+  color: var(--f-text);
+  background: var(--f-bg);
+  border: 1px solid var(--f-border);
+  box-shadow: 0 3px 8px var(--f-shadow);
+  z-index: 3000;
+  pointer-events: auto;
+  cursor: default;
+  transition: top 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), bottom 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.f-notification__icon[data-v-7600a501] {
+  flex-shrink: 0;
+  margin-top: 1px;
+  font-size: 18px;
+}
+.f-notification__body[data-v-7600a501] {
+  flex: 1;
+  min-width: 0;
+}
+.f-notification__title[data-v-7600a501] {
+  margin: 0 0 4px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--f-text);
+}
+.f-notification__content[data-v-7600a501] {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--f-text-muted);
+  word-break: break-word;
+}
+.f-notification__close[data-v-7600a501] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: -2px -4px 0 0;
+  padding: 2px;
+  border: none;
+  background: transparent;
+  color: var(--f-text-muted);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.f-notification__close[data-v-7600a501]:hover {
+  color: var(--f-text);
+}
+.f-notification--info .f-notification__icon[data-v-7600a501] {
+  color: var(--f-info);
+}
+.f-notification--success .f-notification__icon[data-v-7600a501] {
+  color: var(--f-success);
+}
+.f-notification--warning .f-notification__icon[data-v-7600a501] {
+  color: var(--f-warning);
+}
+.f-notification--error .f-notification__icon[data-v-7600a501] {
+  color: var(--f-error);
+}
+:root.light .f-notification[data-v-7600a501] {
+  --f-bg: #ffffff;
+  --f-border: rgba(0, 0, 0, 0.08);
+  --f-text: #1e293b;
+  --f-text-muted: #64748b;
+  --f-shadow: rgba(0, 0, 0, 0.12);
+  --f-info: #2563eb;
+  --f-success: #059669;
+  --f-warning: #ea580c;
+  --f-error: #dc2626;
+}
+.f-notification-top-right-enter-active[data-v-7600a501] {
+  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.f-notification-top-right-leave-active[data-v-7600a501] {
+  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
+}
+.f-notification-top-right-enter-from[data-v-7600a501], .f-notification-top-right-leave-to[data-v-7600a501] {
+  opacity: 0;
+  transform: translateX(24px);
+}
+.f-notification-bottom-right-enter-active[data-v-7600a501] {
+  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.f-notification-bottom-right-leave-active[data-v-7600a501] {
+  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
+}
+.f-notification-bottom-right-enter-from[data-v-7600a501], .f-notification-bottom-right-leave-to[data-v-7600a501] {
+  opacity: 0;
+  transform: translateX(24px);
+}
+.f-notification-top-left-enter-active[data-v-7600a501] {
+  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.f-notification-top-left-leave-active[data-v-7600a501] {
+  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
+}
+.f-notification-top-left-enter-from[data-v-7600a501], .f-notification-top-left-leave-to[data-v-7600a501] {
+  opacity: 0;
+  transform: translateX(-24px);
+}
+.f-notification-bottom-left-enter-active[data-v-7600a501] {
+  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.f-notification-bottom-left-leave-active[data-v-7600a501] {
+  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
+}
+.f-notification-bottom-left-enter-from[data-v-7600a501], .f-notification-bottom-left-leave-to[data-v-7600a501] {
+  opacity: 0;
+  transform: translateX(-24px);
 }