refactor: 架构升级

2026-09-12 16:40:40 +08:00 · 2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
@@ -0,0 +1,382 @@
+---
+name: UI Feedback
+description: Toast, modal, loading, and action sheet APIs
+---
+
+# UI Feedback
+
+## Toast Messages
+
+### uni.showToast
+
+Display success/error messages.
+
+```javascript
+// Success toast
+uni.showToast({
+  title: 'Success!',
+  icon: 'success',
+  duration: 2000,
+  mask: false
+})
+
+// Loading toast
+uni.showToast({
+  title: 'Loading...',
+  icon: 'loading',
+  duration: 10000
+})
+
+// Text only (no icon)
+uni.showToast({
+  title: 'Please wait',
+  icon: 'none',
+  duration: 2000
+})
+
+// Error toast
+uni.showToast({
+  title: 'Failed!',
+  icon: 'error'
+})
+```
+
+**Parameters:**
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| title | String | Required | Message text |
+| icon | String | success | success/loading/none/error |
+| duration | Number | 1500 | Duration in ms |
+| mask | Boolean | false | Prevent touch during display |
+| position | String | | top/center/bottom (App) |
+
+### uni.hideToast
+
+```javascript
+uni.hideToast()
+```
+
+## Loading
+
+### uni.showLoading
+
+```javascript
+uni.showLoading({
+  title: 'Loading...',
+  mask: true // Prevent interaction
+})
+
+// Hide after operation
+setTimeout(() => {
+  uni.hideLoading()
+}, 2000)
+```
+
+### uni.hideLoading
+
+```javascript
+uni.hideLoading()
+```
+
+## Modal Dialogs
+
+### uni.showModal
+
+Alert and confirm dialogs.
+
+```javascript
+// Alert (single button)
+uni.showModal({
+  title: 'Notice',
+  content: 'Operation completed',
+  showCancel: false
+})
+
+// Confirm (two buttons)
+uni.showModal({
+  title: 'Confirm',
+  content: 'Are you sure?',
+  cancelText: 'Cancel',
+  cancelColor: '#999',
+  confirmText: 'Confirm',
+  confirmColor: '#007AFF',
+  success: (res) => {
+    if (res.confirm) {
+      console.log('User confirmed')
+    } else if (res.cancel) {
+      console.log('User cancelled')
+    }
+  }
+})
+
+// Editable modal
+uni.showModal({
+  title: 'Input',
+  content: 'Enter your name',
+  editable: true,
+  placeholderText: 'Name',
+  success: (res) => {
+    if (res.confirm) {
+      console.log('Input:', res.content)
+    }
+  }
+})
+```
+
+## Action Sheet
+
+### uni.showActionSheet
+
+Bottom action menu.
+
+```javascript
+uni.showActionSheet({
+  itemList: ['Take Photo', 'Choose from Album', 'Cancel'],
+  itemColor: '#000000',
+  success: (res) => {
+    // res.tapIndex: 0, 1, 2...
+    console.log('Selected:', res.tapIndex)
+    switch (res.tapIndex) {
+      case 0:
+        this.takePhoto()
+        break
+      case 1:
+        this.chooseFromAlbum()
+        break
+    }
+  },
+  fail: (err) => {
+    console.log('Cancelled')
+  }
+})
+```
+
+## Pull to Refresh
+
+### Enable in pages.json
+
+```json
+{
+  "pages": [{
+    "path": "pages/index/index",
+    "style": {
+      "enablePullDownRefresh": true,
+      "backgroundTextStyle": "dark"
+    }
+  }]
+}
+```
+
+### Handle in Page
+
+```javascript
+export default {
+  onPullDownRefresh() {
+    console.log('Pull down triggered')
+    this.refreshData().finally(() => {
+      uni.stopPullDownRefresh()
+    })
+  }
+}
+```
+
+### Programmatic Control
+
+```javascript
+// Start pull refresh
+uni.startPullDownRefresh()
+
+// Stop pull refresh
+uni.stopPullDownRefresh()
+```
+
+## Navigation Bar Loading
+
+```javascript
+// Show loading in nav bar
+uni.showNavigationBarLoading()
+
+// Hide loading
+uni.hideNavigationBarLoading()
+```
+
+## Tab Bar Operations
+
+### Show/Hide Tab Bar
+
+```javascript
+// Hide tab bar
+uni.hideTabBar({
+  animation: true
+})
+
+// Show tab bar
+uni.showTabBar({
+  animation: true
+})
+```
+
+### Set Tab Bar Style
+
+```javascript
+uni.setTabBarStyle({
+  color: '#999',
+  selectedColor: '#007AFF',
+  backgroundColor: '#fff',
+  borderStyle: 'black'
+})
+```
+
+### Set Tab Bar Item
+
+```javascript
+uni.setTabBarItem({
+  index: 0,
+  text: 'Home',
+  iconPath: '/static/home.png',
+  selectedIconPath: '/static/home-active.png'
+})
+```
+
+### Add/Remove Tab Bar Badge
+
+```javascript
+// Show badge
+uni.showTabBarRedDot({
+  index: 2 // Tab index
+})
+
+// Hide badge
+uni.hideTabBarRedDot({
+  index: 2
+})
+
+// Set badge text
+uni.setTabBarBadge({
+  index: 2,
+  text: '5'
+})
+
+// Remove badge text
+uni.removeTabBarBadge({
+  index: 2
+})
+```
+
+## Preview Image
+
+```javascript
+uni.previewImage({
+  current: 'https://example.com/1.jpg', // Current image
+  urls: [
+    'https://example.com/1.jpg',
+    'https://example.com/2.jpg',
+    'https://example.com/3.jpg'
+  ],
+  indicator: 'default', // default/number/none
+  loop: false,
+  longPressActions: {
+    itemList: ['Save Image', 'Share'],
+    success: (data) => {
+      console.log('Long press:', data.tapIndex)
+    }
+  }
+})
+```
+
+## Save Image to Photos
+
+```javascript
+uni.saveImageToPhotosAlbum({
+  filePath: 'temp://path/to/image.jpg',
+  success: () => {
+    uni.showToast({ title: 'Saved' })
+  }
+})
+```
+
+## Best Practices
+
+### Toast Helper
+
+```javascript
+const toast = {
+  success(message, duration = 2000) {
+    uni.showToast({ title: message, icon: 'success', duration })
+  },
+  error(message, duration = 2000) {
+    uni.showToast({ title: message, icon: 'error', duration })
+  },
+  loading(message = 'Loading...') {
+    uni.showLoading({ title: message, mask: true })
+  },
+  hide() {
+    uni.hideLoading()
+    uni.hideToast()
+  },
+  text(message, duration = 2000) {
+    uni.showToast({ title: message, icon: 'none', duration })
+  }
+}
+
+// Usage
+toast.loading()
+fetchData()
+  .then(() => toast.success('Loaded'))
+  .catch(() => toast.error('Failed'))
+  .finally(() => toast.hide())
+```
+
+### Modal Helper
+
+```javascript
+const modal = {
+  confirm(title, content) {
+    return new Promise((resolve) => {
+      uni.showModal({
+        title,
+        content,
+        success: (res) => resolve(res.confirm)
+      })
+    })
+  },
+
+  alert(title, content) {
+    return new Promise((resolve) => {
+      uni.showModal({
+        title,
+        content,
+        showCancel: false,
+        success: () => resolve()
+      })
+    })
+  },
+
+  action(items) {
+    return new Promise((resolve, reject) => {
+      uni.showActionSheet({
+        itemList: items,
+        success: (res) => resolve(res.tapIndex),
+        fail: reject
+      })
+    })
+  }
+}
+
+// Usage
+async function deleteItem(id) {
+  const confirmed = await modal.confirm('Delete', 'Are you sure?')
+  if (confirmed) {
+    await api.delete(id)
+    toast.success('Deleted')
+  }
+}
+```
+
+<!--
+Source references:
+- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/api/ui/prompt.md
+- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/api/ui/navigationbar.md
+- https://gitcode.com/dcloud/unidocs-zh/blob/main/docs/api/ui/tabbar.md
+-->