release: update 4.5.0

refactor: 重构图片裁剪ReCropper组件，添加更多实用功能
fix: 修复RePureTableBar组件初始化时列设置勾选项未根据hide属性正确初始化
2025-11-03 13:44:47 +08:00 · 2023-06-26 11:14:25 +08:00 · 2023-06-25 18:33:46 +08:00 · 2023-06-24 00:52:54 +08:00 · 2023-06-23 11:17:39 +08:00 · 2023-06-22 00:31:25 +08:00
51 changed files with 1363 additions and 681 deletions
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@
 VITE_PORT = 8848

 # 开发环境读取配置文件路径
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = ./

 # 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 # 线上环境平台打包路径
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = ./

 # 线上环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"
--- a/.env.staging
+++ b/.env.staging
@@ -2,7 +2,7 @@
 # https://cn.vitejs.dev/guide/env-and-mode.html#modes
 # NODE_ENV = development

-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = ./

 # 预发布环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,38 +0,0 @@
---
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
---
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,38 @@
+name: "\U0001F41E Bug report"
+description: Report an issue with vue-pure-admin
+body:
+  - type: markdown
+    attributes:
+      value: |
+        感谢您花时间填写此错误报告 (Thanks for taking the time to fill out this bug report)
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: 描述问题 (Describe the problem)
+      placeholder: 请描述您的问题 (Please describe your problem)
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction-steps
+    attributes:
+      label: 如何复现该问题 (How to reproduce the problem)
+      placeholder: 请提供复现问题的具体操作步骤，以便平台快速定位、高效地解决问题。当然如果问题的操作步骤较复杂，您可以fork平台，然后去改动代码复现问题，这样更高效 (Please provide specific steps to reproduce the problem, so that the platform can quickly locate and solve the problem efficiently. Of course, if the operation steps of the problem are more complicated, you can fork the platform, and then modify the code to reproduce the problem, which is more efficient)
+    validations:
+      required: true
+  - type: textarea
+    id: system-info
+    attributes:
+      label: 操作系统和浏览器信息 (Operating system and browser information)
+      placeholder: 如果您遇到操作系统或浏览器兼容性问题，可选填此项 (Optional if you encounter operating system or browser compatibility issues)
+    validations:
+      required: false
+  - type: checkboxes
+    id: checkboxes
+    attributes:
+      label: 验证 (Verify)
+      description: 在提交问题之前，请确保您执行以下操作 (Before submitting an issue, please ensure you do the following)
+      options:
+        - label: 是否仔细阅读过 [文档](https://yiming_chang.gitee.io/pure-admin-doc/) (Have you read [documentation](https://yiming_chang.gitee.io/pure-admin-doc/) carefully)
+          required: true
+        - label: 检查是否存在相同或类似的问题 [issues](https://github.com/pure-admin/vue-pure-admin/issues) (Check for the same or similar [issues](https://github.com/pure-admin/vue-pure-admin/issues))
+          required: true
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1 @@
+blank_issues_enabled: false
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,20 +0,0 @@
---
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
---
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
--- a/.github/workflows/linter.yml
+++ b/.github/workflows/linter.yml
@@ -1,19 +1,4 @@
---
-#################################
-#################################
-## Super Linter GitHub Actions ##
-#################################
-#################################
-name: Lint Code Base
-
-#
-# Documentation:
-# https://help.github.com/en/articles/workflow-syntax-for-github-actions
-#
-
-#############################
-# Start the job on all push #
-#############################
+name: Lint Code
 on:
  push:
    branches:
@@ -22,41 +7,41 @@ on:
    branches:
      - main

-###############
-# Set the Job #
-###############
 jobs:
  build:
-    # Name the Job
-    name: Lint Code Base
-    # Set the agent to run on
+    name: Lint Code
    runs-on: ubuntu-latest
-
-    ##################
-    # Load all steps #
-    ##################
    steps:
-      ##########################
-      # Checkout the code base #
-      ##########################
-      - name: Checkout Code
-        uses: actions/checkout@v2
-        with:
-          # Full git history is needed to get a proper list of changed files within `super-linter`
-          fetch-depth: 0
+      - name: Checkout repository
+        uses: actions/checkout@v3

-      - name: Setup node
-        uses: actions/setup-node@v2
+      - name: Install Node.js
+        uses: actions/setup-node@v3
        with:
-          node-version: "16"
-          registry-url: https://registry.npmjs.com/
+          node-version: 16

-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
        with:
-          version: latest
+          version: 7
+          run_install: false

-      - name: Build
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Start Lint Code
        run: |
          pnpm install --no-frozen-lockfile
          pnpm lint
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,26 @@
+# 4.5.0 (2023-06-26)
+
+### ✔️ refactor
+
+- Refactor image crop `ReCropper` component, add more useful functions
+
+### 🎫 Feat
+
+- The menu search function supports pinyin search, such as searching for image cropping, input `tp` or `tupian` and other corresponding pinyin
+- Add long press command and usage example, the long press command supports continuous callback of custom duration
+- Add an example of sensitive word filtering function
+- Add an example of Chinese Pinyin function
+
+### 🐞 Bug fixes
+
+- Fixed `V4.4.0` version, the problem that the page does not cache the page for the first time after the `keepAlive` cache is enabled
+- Fixed the issue that the column setting tick option was not correctly initialized according to the `hide` property when the `RePureTableBar` component was initialized
+
+### 🍏 Perf
+
+- Change `VITE_PUBLIC_PATH` to `./` by default to be compatible with more path scenarios,
+- Compatible with the `OSS` scene where `VITE_PUBLIC_PATH` is `url`, need to upgrade `@pureadin/theme` to the latest version
+
 # 4.4.0 (2023-06-14)

 ### 🎫 Feat
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,26 @@
+# 4.5.0 (2023-06-26)
+
+### ✔️ refactor
+
+- Refactor image crop `ReCropper` component, add more useful functions
+
+### 🎫 Feat
+
+- The menu search function supports pinyin search, such as searching for image cropping, input `tp` or `tupian` and other corresponding pinyin
+- Add long press command and usage example, the long press command supports continuous callback of custom duration
+- Add an example of sensitive word filtering function
+- Add an example of Chinese Pinyin function
+
+### 🐞 Bug fixes
+
+- Fixed `V4.4.0` version, the problem that the page does not cache the page for the first time after the `keepAlive` cache is enabled
+- Fixed the issue that the column setting tick option was not correctly initialized according to the `hide` property when the `RePureTableBar` component was initialized
+
+### 🍏 Perf
+
+- Change `VITE_PUBLIC_PATH` to `./` by default to be compatible with more path scenarios,
+- Compatible with the `OSS` scene where `VITE_PUBLIC_PATH` is `url`, need to upgrade `@pureadin/theme` to the latest version
+
 # 4.4.0 (2023-06-14)

 ### 🎫 Feat
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,26 @@
+# 4.5.0 (2023-06-26)
+
+### ✔️ refactor
+
+- 重构图片裁剪 `ReCropper` 组件，添加更多实用功能
+
+### 🎫 Feat
+
+- 菜单搜索功能支持拼音搜索，比如搜图片裁剪，输入 `tp` 或 `tupian` 等对应拼音即可
+- 添加长按指令及使用示例，该长按指令支持自定义时长的持续回调
+- 添加敏感词过滤功能示例
+- 添加汉语拼音功能示例
+
+### 🐞 Bug fixes
+
+- 修复 `V4.4.0` 版本，页面开启 `keepAlive` 缓存后第一次加载并未缓存页面的问题
+- 修复 `RePureTableBar` 组件初始化时列设置勾选项未根据 `hide` 属性正确初始化
+
+### 🍏 Perf
+
+- 将 `VITE_PUBLIC_PATH` 默认改为 `./` 兼容更多路径场景，
+- 兼容 `VITE_PUBLIC_PATH` 为 `url` 的 `OSS` 场景，需将 `@pureadmin/theme` 升级至最新版
+
 # 4.4.0 (2023-06-14)

 ### 🎫 Feat
--- a/build/optimize.ts
+++ b/build/optimize.ts
@@ -15,10 +15,13 @@ const include = [
  "intro.js",
  "vue-i18n",
  "js-cookie",
+  "vue-tippy",
  "cropperjs",
  "jsbarcode",
+  "pinyin-pro",
  "sortablejs",
  "swiper/vue",
+  "mint-filter",
  "md-editor-v3",
  "@vueuse/core",
  "vue3-danmaku",
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -68,7 +68,7 @@ menus:
  hsguide: Guide
  hsAble: Able
  hsMenuTree: Menu Tree
-  hsOptimize: Debounce、Throttle、Copy Directives
+  hsOptimize: Debounce、Throttle、Copy、Longpress Directives
  hsWatermark: Water Mark
  hsPrint: Print
  hsDownload: Download
@@ -100,6 +100,8 @@ menus:
  hsPdf: PDF Preview
  hsExecl: Export Excel
  hsInfiniteScroll: Table Infinite Scroll
+  hsSensitive: Sensitive Filter
+  hsPinyin: PinYin
  hsdanmaku: Danmaku Components
  hsPureTableBase: Base Usage
  hsPureTableHigh: High Usage
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -68,7 +68,7 @@ menus:
  hsguide: 引导页
  hsAble: 功能
  hsMenuTree: 菜单树结构
-  hsOptimize: 防抖、截流、复制指令
+  hsOptimize: 防抖、截流、复制、长按指令
  hsWatermark: 水印
  hsPrint: 打印
  hsDownload: 下载
@@ -100,6 +100,8 @@ menus:
  hsPdf: PDF预览
  hsExecl: 导出Excel
  hsInfiniteScroll: 表格无限滚动
+  hsSensitive: 敏感词过滤
+  hsPinyin: 汉语拼音
  hsdanmaku: 弹幕组件
  hsPureTableBase: 基础用法（23个示例）
  hsPureTableHigh: 高级用法（11个示例）
--- a/mock/list.ts
+++ b/mock/list.ts
@@ -461,6 +461,11 @@ export default [
        success: true,
        data: {
          list: [
+            {
+              created_at: "2023-06-14T02:52:19Z",
+              published_at: "2023-06-14T02:54:41Z",
+              body: "# 4.4.0 (2023-06-14)\r\n\r\n### 🎫 Feat\r\n\r\n- 路由 `meta` 添加 `activePath` 属性，可将某个菜单激活（主要用于通过 `query` 或 `params` 传参的路由，当它们通过配置 `showLink: false` 后不在菜单中显示，就不会有任何菜单高亮，而通过设置 `activePath` 指定激活菜单即可获得高亮，`activePath` 为指定激活菜单的 `path` [查看详情](https://github.com/pure-admin/vue-pure-admin/commit/58cafbc73ffa27253446ee93077e1e382519ce8a#commitcomment-117834411)）\r\n- `pure-admin-table` 高级用法添加自适应内容区高度示例\r\n- 添加防抖、节流和文本复制指令并规范自定义指令用法错误时的提示以及添加使用示例\r\n- `notice` 消息提示组件空数据时添加 `el-empty` 组件\r\n- 函数式弹窗示例代码添加子组件 `prop` 为 `primitive` 类型的示例\r\n- 添加 `vscode-docker` 插件\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复国际化切换到英文模式刷新会回到中文模式\r\n- 修复搜索菜单功能的弹框遮罩未覆盖左侧菜单的问题\r\n\r\n### 🍏 Perf\r\n\r\n- 页面切换性能优化，不考虑网络的情况下，页面切换逻辑的速度差不多比之前快 `3-4` 倍 [查看优化详情](https://github.com/pure-admin/vue-pure-admin/pull/600#issuecomment-1586094078)\r\n- 优化标签页操作-路由传参模式用法\r\n- 系统管理中表格均改为自适应内容区高度，需将 `@pureadmin/table` 升级到最新版\r\n- 使用 `vueuse` 的 `useResizeObserver` 函数替换 `v-resize` 自定义指令，从测试后的表现来看性能会更好\r\n- 对未解绑的公共事件，在页面销毁时解绑"
+            },
            {
              created_at: "2023-06-04T04:11:51Z",
              published_at: "2023-06-04T04:13:24Z",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "4.4.0",
+  "version": "4.5.0",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -31,12 +31,12 @@
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@howdyjs/mouse-menu": "^2.0.7",
-    "@logicflow/core": "^1.2.8",
-    "@logicflow/extension": "^1.2.8",
+    "@logicflow/core": "^1.2.9",
+    "@logicflow/extension": "^1.2.9",
    "@pureadmin/descriptions": "^1.1.1",
    "@pureadmin/table": "^2.3.2",
-    "@pureadmin/utils": "^1.9.3",
-    "@vueuse/core": "^10.1.2",
+    "@pureadmin/utils": "^1.9.6",
+    "@vueuse/core": "^10.2.0",
    "@vueuse/motion": "^2.0.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
@@ -47,21 +47,23 @@
    "dayjs": "^1.11.8",
    "echarts": "^5.4.2",
    "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.3.6",
+    "element-plus": "^2.3.7",
    "intro.js": "^7.0.1",
    "js-cookie": "^3.0.5",
    "jsbarcode": "^3.11.5",
    "md-editor-v3": "2.7.2",
+    "mint-filter": "^4.0.3",
    "mitt": "^3.0.0",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
-    "pinia": "^2.1.3",
+    "pinia": "^2.1.4",
+    "pinyin-pro": "^3.15.2",
    "qrcode": "^1.5.3",
    "qs": "^6.11.2",
    "responsive-storage": "^2.2.0",
    "sortablejs": "^1.15.0",
-    "swiper": "^9.4.0",
+    "swiper": "^9.4.1",
    "typeit": "^8.7.1",
    "v-contextmenu": "3.0.0",
    "v3-infinite-loading": "^1.2.2",
@@ -71,7 +73,8 @@
    "vue-json-pretty": "^2.2.4",
    "vue-pdf-embed": "^1.1.6",
    "vue-router": "^4.2.2",
-    "vue-types": "^5.0.3",
+    "vue-tippy": "^6.2.0",
+    "vue-types": "^5.1.0",
    "vue-virtual-scroller": "2.0.0-beta.7",
    "vue-waterfall-plugin-next": "^2.2.1",
    "vue3-danmaku": "^1.4.0",
@@ -80,13 +83,13 @@
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
-    "@commitlint/cli": "^17.6.5",
-    "@commitlint/config-conventional": "^17.6.5",
-    "@iconify-icons/ep": "^1.2.11",
-    "@iconify-icons/ri": "^1.2.8",
+    "@commitlint/cli": "^17.6.6",
+    "@commitlint/config-conventional": "^17.6.6",
+    "@iconify-icons/ep": "^1.2.12",
+    "@iconify-icons/ri": "^1.2.9",
    "@iconify/vue": "^4.1.1",
    "@intlify/unplugin-vue-i18n": "^0.11.0",
-    "@pureadmin/theme": "^3.0.0",
+    "@pureadmin/theme": "^3.1.0",
    "@types/intro.js": "^5.1.1",
    "@types/js-cookie": "^3.0.3",
    "@types/mockjs": "^1.0.7",
@@ -95,8 +98,8 @@
    "@types/qrcode": "^1.5.0",
    "@types/qs": "^6.9.7",
    "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/eslint-config-prettier": "^7.1.0",
@@ -104,9 +107,9 @@
    "autoprefixer": "^10.4.14",
    "cloc": "^2.11.0",
    "cssnano": "^6.0.1",
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.14.1",
+    "eslint-plugin-vue": "^9.15.1",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.2",
    "picocolors": "^1.0.0",
@@ -118,9 +121,9 @@
    "pretty-quick": "^3.1.3",
    "rimraf": "^5.0.1",
    "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.63.3",
+    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",
-    "stylelint": "^15.7.0",
+    "stylelint": "^15.9.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-recess-order": "^4.2.0",
    "stylelint-config-recommended": "^12.0.0",
@@ -133,7 +136,7 @@
    "stylelint-scss": "^5.0.1",
    "svgo": "^3.0.2",
    "tailwindcss": "^3.3.2",
-    "terser": "^5.18.0",
+    "terser": "^5.18.1",
    "typescript": "5.0.4",
    "vite": "^4.3.9",
    "vite-plugin-cdn-import": "^0.3.5",
@@ -142,7 +145,7 @@
    "vite-plugin-remove-console": "^2.1.1",
    "vite-svg-loader": "^4.0.0",
    "vue-eslint-parser": "^9.3.1",
-    "vue-tsc": "^1.6.5"
+    "vue-tsc": "^1.8.1"
  },
  "pnpm": {
    "peerDependencyRules": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,5 +1,5 @@
 {
-  "Version": "4.4.0",
+  "Version": "4.5.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
--- a/src/components/ReCropper/src/circled.css
+++ b/src/components/ReCropper/src/circled.css
@@ -0,0 +1,11 @@
+@import "cropperjs/dist/cropper.css";
+@import "tippy.js/dist/tippy.css";
+@import "tippy.js/themes/light.css";
+@import "tippy.js/animations/perspective.css";
+
+.re-circled {
+  .cropper-view-box,
+  .cropper-face {
+    border-radius: 50%;
+  }
+}
--- a/src/components/ReCropper/src/index.tsx
+++ b/src/components/ReCropper/src/index.tsx
@@ -1,22 +1,41 @@
+import "./circled.css";
+import Cropper from "cropperjs";
+import { ElUpload } from "element-plus";
 import type { CSSProperties } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { longpress } from "@/directives/longpress";
+import { useTippy, directive as tippy } from "vue-tippy";
+import { delay, debounce, isArray, downloadByBase64 } from "@pureadmin/utils";
 import {
-  defineComponent,
-  onMounted,
-  nextTick,
  ref,
  unref,
  computed,
-  PropType
+  PropType,
+  onMounted,
+  onUnmounted,
+  defineComponent
 } from "vue";
-import { useAttrs } from "@pureadmin/utils";
-
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
+import {
+  Reload,
+  Upload,
+  ArrowH,
+  ArrowV,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ChangeIcon,
+  ArrowRight,
+  RotateLeft,
+  SearchPlus,
+  RotateRight,
+  SearchMinus,
+  DownloadIcon
+} from "./svg";

 type Options = Cropper.Options;

-const defaultOptions: Cropper.Options = {
-  aspectRatio: 16 / 9,
+const defaultOptions: Options = {
+  aspectRatio: 1,
  zoomable: true,
  zoomOnTouch: true,
  zoomOnWheel: true,
@@ -39,110 +58,382 @@ const defaultOptions: Cropper.Options = {
 };

 const props = {
-  src: {
-    type: String,
-    required: true
-  },
-  alt: {
-    type: String
-  },
-  width: {
-    type: [String, Number],
-    default: ""
-  },
-  height: {
-    type: [String, Number],
-    default: "360px"
-  },
+  src: { type: String, required: true },
+  alt: { type: String },
+  circled: { type: Boolean, default: false },
+  realTimePreview: { type: Boolean, default: true },
+  height: { type: [String, Number], default: "360px" },
  crossorigin: {
-    type: String || Object,
+    type: String as PropType<"" | "anonymous" | "use-credentials" | undefined>,
    default: undefined
  },
-  imageStyle: {
-    type: Object as PropType<CSSProperties>,
-    default() {
-      return {};
-    }
-  },
-  options: {
-    type: Object as PropType<Options>,
-    default() {
-      return {};
-    }
-  }
+  imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
+  options: { type: Object as PropType<Options>, default: () => ({}) }
 };

 export default defineComponent({
  name: "ReCropper",
  props,
-  setup(props) {
-    const cropper: any = ref<Nullable<Cropper>>(null);
-    const imgElRef = ref();
+  setup(props, { attrs, emit }) {
+    const tippyElRef = ref<ElRef<HTMLImageElement>>();
+    const imgElRef = ref<ElRef<HTMLImageElement>>();
+    const cropper = ref<Nullable<Cropper>>();
+    const isReady = ref(false);
+    const imgBase64 = ref();
+    const inCircled = ref(props.circled);
+    const inSrc = ref(props.src);
+    let scaleX = 1;
+    let scaleY = 1;

-    const isReady = ref<boolean>(false);
+    const debounceRealTimeCroppered = debounce(realTimeCroppered, 80);

    const getImageStyle = computed((): CSSProperties => {
      return {
        height: props.height,
-        width: props.width,
        maxWidth: "100%",
        ...props.imageStyle
      };
    });

-    const getWrapperStyle = computed((): CSSProperties => {
-      const { height, width } = props;
-      return {
-        width: `${width}`.replace(/px/, "") + "px",
-        height: `${height}`.replace(/px/, "") + "px"
-      };
+    const getClass = computed(() => {
+      return [
+        attrs.class,
+        {
+          ["re-circled"]: inCircled.value
+        }
+      ];
    });

-    function init() {
+    const iconClass = computed(() => {
+      return [
+        "p-[6px]",
+        "h-[30px]",
+        "w-[30px]",
+        "outline-none",
+        "rounded-[4px]",
+        "cursor-pointer",
+        "hover:bg-[rgba(0,0,0,0.06)]"
+      ];
+    });
+
+    const getWrapperStyle = computed((): CSSProperties => {
+      return { height: `${props.height}`.replace(/px/, "") + "px" };
+    });
+
+    onMounted(init);
+
+    onUnmounted(() => {
+      cropper.value?.destroy();
+    });
+
+    useResizeObserver(tippyElRef, () => {
+      handCropper("reset");
+    });
+
+    async function init() {
      const imgEl = unref(imgElRef);
-      if (!imgEl) {
-        return;
-      }
+      if (!imgEl) return;
      cropper.value = new Cropper(imgEl, {
        ...defaultOptions,
        ready: () => {
          isReady.value = true;
+          realTimeCroppered();
+          delay(400).then(() => emit("readied", cropper.value));
+        },
+        crop() {
+          debounceRealTimeCroppered();
+        },
+        zoom() {
+          debounceRealTimeCroppered();
+        },
+        cropmove() {
+          debounceRealTimeCroppered();
        },
        ...props.options
      });
    }

-    onMounted(() => {
-      nextTick(() => {
-        init();
+    function realTimeCroppered() {
+      props.realTimePreview && croppered();
+    }
+
+    function croppered() {
+      if (!cropper.value) return;
+      const canvas = inCircled.value
+        ? getRoundedCanvas()
+        : cropper.value.getCroppedCanvas();
+      // https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
+      canvas.toBlob(blob => {
+        if (!blob) return;
+        const fileReader: FileReader = new FileReader();
+        fileReader.readAsDataURL(blob);
+        fileReader.onloadend = e => {
+          if (!e.target?.result || !blob) return;
+          imgBase64.value = e.target.result;
+          emit("cropper", {
+            base64: e.target.result,
+            blob,
+            info: { size: blob.size, ...cropper.value.getData() }
          });
+        };
+        fileReader.onerror = () => {
+          emit("error");
+        };
+      });
+    }
+
+    function getRoundedCanvas() {
+      const sourceCanvas = cropper.value!.getCroppedCanvas();
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d")!;
+      const width = sourceCanvas.width;
+      const height = sourceCanvas.height;
+      canvas.width = width;
+      canvas.height = height;
+      context.imageSmoothingEnabled = true;
+      context.drawImage(sourceCanvas, 0, 0, width, height);
+      context.globalCompositeOperation = "destination-in";
+      context.beginPath();
+      context.arc(
+        width / 2,
+        height / 2,
+        Math.min(width, height) / 2,
+        0,
+        2 * Math.PI,
+        true
+      );
+      context.fill();
+      return canvas;
+    }
+
+    function handCropper(event: string, arg?: number | Array<number>) {
+      if (event === "scaleX") {
+        scaleX = arg = scaleX === -1 ? 1 : -1;
+      }
+      if (event === "scaleY") {
+        scaleY = arg = scaleY === -1 ? 1 : -1;
+      }
+      arg && isArray(arg)
+        ? cropper.value?.[event]?.(...arg)
+        : cropper.value?.[event]?.(arg);
+    }
+
+    function beforeUpload(file) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      inSrc.value = "";
+      reader.onload = e => {
+        inSrc.value = e.target?.result as string;
+      };
+      reader.onloadend = () => {
+        init();
+      };
+      return false;
+    }
+
+    const menuContent = defineComponent({
+      directives: {
+        tippy,
+        longpress
+      },
+      setup() {
+        return () => (
+          <div class="flex flex-wrap w-[60px] justify-between">
+            <ElUpload
+              accept="image/*"
+              show-file-list={false}
+              before-upload={beforeUpload}
+            >
+              <Upload
+                class={iconClass.value}
+                v-tippy={{
+                  content: "上传",
+                  placement: "left-start"
+                }}
+              />
+            </ElUpload>
+            <DownloadIcon
+              class={iconClass.value}
+              v-tippy={{
+                content: "下载",
+                placement: "right-start"
+              }}
+              onClick={() => downloadByBase64(imgBase64.value, "cropping.png")}
+            />
+            <ChangeIcon
+              class={iconClass.value}
+              v-tippy={{
+                content: "圆形、矩形裁剪",
+                placement: "left-start"
+              }}
+              onClick={() => {
+                inCircled.value = !inCircled.value;
+                realTimeCroppered();
+              }}
+            />
+            <Reload
+              class={iconClass.value}
+              v-tippy={{
+                content: "重置",
+                placement: "right-start"
+              }}
+              onClick={() => handCropper("reset")}
+            />
+            <ArrowUp
+              class={iconClass.value}
+              v-tippy={{
+                content: "上移（可长按）",
+                placement: "left-start"
+              }}
+              v-longpress={[() => handCropper("move", [0, -10]), "0:100"]}
+            />
+            <ArrowDown
+              class={iconClass.value}
+              v-tippy={{
+                content: "下移（可长按）",
+                placement: "right-start"
+              }}
+              v-longpress={[() => handCropper("move", [0, 10]), "0:100"]}
+            />
+            <ArrowLeft
+              class={iconClass.value}
+              v-tippy={{
+                content: "左移（可长按）",
+                placement: "left-start"
+              }}
+              v-longpress={[() => handCropper("move", [-10, 0]), "0:100"]}
+            />
+            <ArrowRight
+              class={iconClass.value}
+              v-tippy={{
+                content: "右移（可长按）",
+                placement: "right-start"
+              }}
+              v-longpress={[() => handCropper("move", [10, 0]), "0:100"]}
+            />
+            <ArrowH
+              class={iconClass.value}
+              v-tippy={{
+                content: "水平翻转",
+                placement: "left-start"
+              }}
+              onClick={() => handCropper("scaleX", -1)}
+            />
+            <ArrowV
+              class={iconClass.value}
+              v-tippy={{
+                content: "垂直翻转",
+                placement: "right-start"
+              }}
+              onClick={() => handCropper("scaleY", -1)}
+            />
+            <RotateLeft
+              class={iconClass.value}
+              v-tippy={{
+                content: "逆时针旋转",
+                placement: "left-start"
+              }}
+              onClick={() => handCropper("rotate", -45)}
+            />
+            <RotateRight
+              class={iconClass.value}
+              v-tippy={{
+                content: "顺时针旋转",
+                placement: "right-start"
+              }}
+              onClick={() => handCropper("rotate", 45)}
+            />
+            <SearchPlus
+              class={iconClass.value}
+              v-tippy={{
+                content: "放大（可长按）",
+                placement: "left-start"
+              }}
+              v-longpress={[() => handCropper("zoom", 0.1), "0:100"]}
+            />
+            <SearchMinus
+              class={iconClass.value}
+              v-tippy={{
+                content: "缩小（可长按）",
+                placement: "right-start"
+              }}
+              v-longpress={[() => handCropper("zoom", -0.1), "0:100"]}
+            />
+          </div>
+        );
+      }
    });

+    function onContextmenu(event) {
+      event.preventDefault();
+
+      const { show, setProps } = useTippy(tippyElRef, {
+        content: menuContent,
+        arrow: false,
+        theme: "light",
+        trigger: "manual",
+        interactive: true,
+        appendTo: "parent",
+        // hideOnClick: false,
+        animation: "perspective",
+        placement: "bottom-start"
+      });
+
+      setProps({
+        getReferenceClientRect: () => ({
+          width: 0,
+          height: 0,
+          top: event.clientY,
+          bottom: event.clientY,
+          left: event.clientX,
+          right: event.clientX
+        })
+      });
+
+      show();
+    }
+
    return {
+      inSrc,
      props,
      imgElRef,
-      cropper,
+      tippyElRef,
+      getClass,
      getWrapperStyle,
-      getImageStyle
+      getImageStyle,
+      isReady,
+      croppered,
+      onContextmenu
    };
  },

  render() {
-    return (
-      <>
+    const {
+      inSrc,
+      isReady,
+      getClass,
+      getImageStyle,
+      onContextmenu,
+      getWrapperStyle
+    } = this;
+    const { alt, crossorigin } = this.props;
+
+    return inSrc ? (
      <div
-          class={useAttrs({ excludeListeners: true, excludeKeys: ["class"] })}
-          style={this.getWrapperStyle}
+        ref="tippyElRef"
+        class={getClass}
+        style={getWrapperStyle}
+        onContextmenu={event => onContextmenu(event)}
      >
        <img
+          v-show={isReady}
          ref="imgElRef"
-            src={this.props.src}
-            alt={this.props.alt}
-            crossorigin={this.props.crossorigin}
-            style={this.getImageStyle}
+          style={getImageStyle}
+          src={inSrc}
+          alt={alt}
+          crossorigin={crossorigin}
        />
      </div>
-      </>
-    );
+    ) : null;
  }
 });
--- a/src/components/ReCropper/src/svg/arrow-down.svg
+++ b/src/components/ReCropper/src/svg/arrow-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0 0 48.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-h.svg
+++ b/src/components/ReCropper/src/svg/arrow-h.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m296.992 216.992-272 272L3.008 512l21.984 23.008 272 272 46.016-46.016L126.016 544h772L680.992 760.992l46.016 46.016 272-272L1020.992 512l-21.984-23.008-272-272-46.048 46.048L898.016 480h-772l216.96-216.992z"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-left.svg
+++ b/src/components/ReCropper/src/svg/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-right.svg
+++ b/src/components/ReCropper/src/svg/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M869 487.8 491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4z"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-up.svg
+++ b/src/components/ReCropper/src/svg/arrow-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M868 545.5 536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-v.svg
+++ b/src/components/ReCropper/src/svg/arrow-v.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m512 67.008-23.008 21.984-256 256 46.048 46.048L480 190.016v644L279.008 632.96l-46.048 46.08 256 256 23.008 21.984 23.008-21.984 256-256-46.016-46.016L544 834.016v-644l200.992 200.96 46.016-45.984-256-256z"/></svg>
--- a/src/components/ReCropper/src/svg/change.svg
+++ b/src/components/ReCropper/src/svg/change.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M956.8 988.8H585.6c-16 0-25.6-9.6-25.6-28.8V576c0-16 9.6-28.8 25.6-28.8h371.2c16 0 25.6 9.6 25.6 28.8v384c0 16-9.6 28.8-25.6 28.8zM608 937.6h326.4V598.4H608v339.2zm-121.6 44.8C262.4 982.4 144 848 144 595.2c0-19.2 9.6-28.8 25.6-28.8s25.6 12.8 25.6 28.8c0 220.8 96 326.4 288 326.4 16 0 25.6 12.8 25.6 28.8s-6.4 32-22.4 32z"/><path d="M262.4 694.4c-6.4 0-9.6-3.2-16-6.4L160 601.6c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8-3.2 3.2-6.4 6.4-12.8 6.4z"/><path d="M86.4 694.4c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0 9.6 9.6 9.6 22.4 0 28.8L99.2 688c-3.2 3.2-6.4 6.4-12.8 6.4zm790.4-249.6c-16 0-28.8-12.8-28.8-32 0-224-99.2-336-300.8-336-16 0-28.8-12.8-28.8-32s9.6-32 28.8-32c233.6 0 355.2 137.6 355.2 396.8 0 22.4-9.6 35.2-25.6 35.2z"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4l-86.4-86.4c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8 0 3.2-6.4 6.4-12.8 6.4z"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0s9.6 22.4 0 28.8l-86.4 86.4c-3.2 3.2-6.4 6.4-12.8 6.4zM288 524.8C156.8 524.8 48 416 48 278.4S156.8 35.2 288 35.2 528 144 528 281.6 419.2 524.8 288 524.8zm-3.2-432c-99.2 0-179.2 83.2-179.2 185.6S185.6 464 284.8 464 464 380.8 464 278.4 384 92.8 284.8 92.8z"/></svg>
--- a/src/components/ReCropper/src/svg/download.svg
+++ b/src/components/ReCropper/src/svg/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"/></svg>
--- a/src/components/ReCropper/src/svg/index.ts
+++ b/src/components/ReCropper/src/svg/index.ts
@@ -0,0 +1,31 @@
+import Reload from "./reload.svg?component";
+import Upload from "./upload.svg?component";
+import ArrowH from "./arrow-h.svg?component";
+import ArrowV from "./arrow-v.svg?component";
+import ArrowUp from "./arrow-up.svg?component";
+import ChangeIcon from "./change.svg?component";
+import ArrowDown from "./arrow-down.svg?component";
+import ArrowLeft from "./arrow-left.svg?component";
+import DownloadIcon from "./download.svg?component";
+import ArrowRight from "./arrow-right.svg?component";
+import RotateLeft from "./rotate-left.svg?component";
+import SearchPlus from "./search-plus.svg?component";
+import RotateRight from "./rotate-right.svg?component";
+import SearchMinus from "./search-minus.svg?component";
+
+export {
+  Reload,
+  Upload,
+  ArrowH,
+  ArrowV,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ChangeIcon,
+  ArrowRight,
+  RotateLeft,
+  SearchPlus,
+  RotateRight,
+  SearchMinus,
+  DownloadIcon
+};
--- a/src/components/ReCropper/src/svg/reload.svg
+++ b/src/components/ReCropper/src/svg/reload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"/></svg>
--- a/src/components/ReCropper/src/svg/rotate-left.svg
+++ b/src/components/ReCropper/src/svg/rotate-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z"/><path fill="currentColor" d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3z"/></svg>
--- a/src/components/ReCropper/src/svg/rotate-right.svg
+++ b/src/components/ReCropper/src/svg/rotate-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"/><path fill="currentColor" d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"/></svg>
--- a/src/components/ReCropper/src/svg/search-minus.svg
+++ b/src/components/ReCropper/src/svg/search-minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"/></svg>
--- a/src/components/ReCropper/src/svg/search-plus.svg
+++ b/src/components/ReCropper/src/svg/search-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"/></svg>
--- a/src/components/ReCropper/src/svg/upload.svg
+++ b/src/components/ReCropper/src/svg/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 0 0-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"/></svg>
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -1,6 +1,12 @@
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
-import { delay, getKeyList, cloneDeep } from "@pureadmin/utils";
 import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
+import {
+  delay,
+  cloneDeep,
+  isBoolean,
+  isFunction,
+  getKeyList
+} from "@pureadmin/utils";

 import Sortable from "sortablejs";
 import DragIcon from "./svg/drag.svg?component";
@@ -37,8 +43,13 @@ export default defineComponent({
    const loading = ref(false);
    const checkAll = ref(true);
    const isIndeterminate = ref(false);
+    const filterColumns = cloneDeep(props?.columns).filter(column =>
+      isBoolean(column?.hide)
+        ? !column.hide
+        : !(isFunction(column?.hide) && column?.hide())
+    );
    let checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
-    const checkedColumns = ref(checkColumnList);
+    const checkedColumns = ref(getKeyList(cloneDeep(filterColumns), "label"));
    const dynamicColumns = ref(cloneDeep(props?.columns));

    const getDropdownItemStyle = computed(() => {
@@ -120,7 +131,7 @@ export default defineComponent({
      dynamicColumns.value = cloneDeep(props?.columns);
      checkColumnList = [];
      checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
-      checkedColumns.value = checkColumnList;
+      checkedColumns.value = getKeyList(cloneDeep(filterColumns), "label");
    }

    const dropdown = {
--- a/src/directives/auth/index.ts
+++ b/src/directives/auth/index.ts
@@ -1,5 +1,5 @@
 import { hasAuth } from "@/router/utils";
-import { Directive, type DirectiveBinding } from "vue";
+import type { Directive, DirectiveBinding } from "vue";

 export const auth: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
--- a/src/directives/copy/index.ts
+++ b/src/directives/copy/index.ts
@@ -1,7 +1,7 @@
 import { message } from "@/utils/message";
 import { useEventListener } from "@vueuse/core";
 import { copyTextToClipboard } from "@pureadmin/utils";
-import { Directive, type DirectiveBinding } from "vue";
+import type { Directive, DirectiveBinding } from "vue";

 interface CopyEl extends HTMLElement {
  copyValue: string;
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,3 +1,4 @@
 export * from "./auth";
 export * from "./copy";
+export * from "./longpress";
 export * from "./optimize";
--- a/src/directives/longpress/index.ts
+++ b/src/directives/longpress/index.ts
@@ -0,0 +1,63 @@
+import { useEventListener } from "@vueuse/core";
+import type { Directive, DirectiveBinding } from "vue";
+import { subBefore, subAfter, isFunction } from "@pureadmin/utils";
+
+export const longpress: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const cb = binding.value;
+    if (cb && isFunction(cb)) {
+      let timer = null;
+      let interTimer = null;
+      let num = 500;
+      let interNum = null;
+      const isInter = binding?.arg?.includes(":") ?? false;
+
+      if (isInter) {
+        num = Number(subBefore(binding.arg, ":"));
+        interNum = Number(subAfter(binding.arg, ":"));
+      } else if (binding.arg) {
+        num = Number(binding.arg);
+      }
+
+      const clear = () => {
+        if (timer) {
+          clearTimeout(timer);
+          timer = null;
+        }
+        if (interTimer) {
+          clearInterval(interTimer);
+          interTimer = null;
+        }
+      };
+
+      const onDownInter = (ev: PointerEvent) => {
+        ev.preventDefault();
+        if (interTimer === null) {
+          interTimer = setInterval(() => cb(), interNum);
+        }
+      };
+
+      const onDown = (ev: PointerEvent) => {
+        clear();
+        ev.preventDefault();
+        if (timer === null) {
+          timer = isInter
+            ? setTimeout(() => {
+                cb();
+                onDownInter(ev);
+              }, num)
+            : setTimeout(() => cb(), num);
+        }
+      };
+
+      // Register using addEventListener on mounted, and removeEventListener automatically on unmounted
+      useEventListener(el, "pointerdown", onDown);
+      useEventListener(el, "pointerup", clear);
+      useEventListener(el, "pointerleave", clear);
+    } else {
+      throw new Error(
+        '[Directive: longpress]: need callback and callback must be a function! Like v-longpress="callback"'
+      );
+    }
+  }
+};
--- a/src/directives/optimize/index.ts
+++ b/src/directives/optimize/index.ts
@@ -6,7 +6,7 @@ import {
  throttle
 } from "@pureadmin/utils";
 import { useEventListener } from "@vueuse/core";
-import { Directive, type DirectiveBinding } from "vue";
+import type { Directive, DirectiveBinding } from "vue";

 /** 防抖（v-optimize或v-optimize:debounce）、节流（v-optimize:throttle）指令 */
 export const optimize: Directive = {
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { match } from "pinyin-pro";
+import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import { cloneDeep } from "@pureadmin/utils";
 import SearchResult from "./SearchResult.vue";
 import SearchFooter from "./SearchFooter.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
 import { ref, computed, shallowRef } from "vue";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import Search from "@iconify-icons/ri/search-line";
@@ -23,6 +25,7 @@ const { device } = useNav();
 const emit = defineEmits<Emits>();
 const props = withDefaults(defineProps<Props>(), {});
 const router = useRouter();
+const { locale } = useI18n();

 const keyword = ref("");
 const scrollbarRef = ref();
@@ -62,12 +65,19 @@ function flatTree(arr) {
 /** 查询 */
 function search() {
  const flatMenusData = flatTree(menusData.value);
-  resultOptions.value = flatMenusData.filter(
-    menu =>
-      keyword.value &&
-      transformI18n(menu.meta?.title)
+  resultOptions.value = flatMenusData.filter(menu =>
+    keyword.value
+      ? transformI18n(menu.meta?.title)
          .toLocaleLowerCase()
-        .includes(keyword.value.toLocaleLowerCase().trim())
+          .includes(keyword.value.toLocaleLowerCase().trim()) ||
+        (locale.value === "zh" &&
+          !isAllEmpty(
+            match(
+              transformI18n(menu.meta?.title).toLocaleLowerCase(),
+              keyword.value.toLocaleLowerCase().trim()
+            )
+          ))
+      : false
  );
  if (resultOptions.value?.length > 0) {
    activePath.value = resultOptions.value[0].path;
--- a/src/layout/components/search/components/SearchResult.vue
+++ b/src/layout/components/search/components/SearchResult.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
+import { transformI18n } from "@/plugins/i18n";
 import { useResizeObserver } from "@vueuse/core";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@@ -7,8 +7,6 @@ import { ref, computed, getCurrentInstance, onMounted } from "vue";
 import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
 import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";

-const { t } = useI18n();
-
 interface optionsItem {
  path: string;
  meta?: {
@@ -98,7 +96,9 @@ defineExpose({ handleScroll });
      @mouseenter="handleMouse(item)"
    >
      <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
-      <span class="result-item-title">{{ t(item.meta?.title) }}</span>
+      <span class="result-item-title">
+        {{ transformI18n(item.meta?.title) }}
+      </span>
      <enterOutlined />
    </div>
  </div>
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -146,6 +146,24 @@ export default {
      meta: {
        title: $t("menus.hsInfiniteScroll")
      }
+    },
+    {
+      path: "/able/sensitive",
+      name: "Sensitive",
+      component: () => import("@/views/able/sensitive.vue"),
+      meta: {
+        title: $t("menus.hsSensitive"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/able/pinyin",
+      name: "Pinyin",
+      component: () => import("@/views/able/pinyin.vue"),
+      meta: {
+        title: $t("menus.hsPinyin"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
    }
  ]
 } as RouteConfigsTable;
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -2,8 +2,8 @@ import { defineStore } from "pinia";
 import { store } from "@/store";
 import { cacheType } from "./types";
 import { constantMenus } from "@/router";
-import { getKeyList } from "@pureadmin/utils";
 import { useMultiTagsStoreHook } from "./multiTags";
+import { debounce, getKeyList } from "@pureadmin/utils";
 import { ascending, filterTree, filterNoPermissionTree } from "@/router/utils";

 export const usePermissionStore = defineStore({
@@ -37,7 +37,7 @@ export const usePermissionStore = defineStore({
          break;
      }
      /** 监听缓存页面是否存在于标签页，不存在则删除 */
-      (() => {
+      debounce(() => {
        let cacheLength = this.cachePageList.length;
        const nameList = getKeyList(useMultiTagsStoreHook().multiTags, "name");
        while (cacheLength > 0) {
--- a/src/views/able/directives.vue
+++ b/src/views/able/directives.vue
@@ -13,6 +13,9 @@ const searchFour = ref("");
 const searchFive = ref("");
 const searchSix = ref("copy");
 const text = ref("可复制的文本");
+const long = ref(false);
+const cbText = ref("");
+const idx = ref(0);

 function onInput() {
  message(search.value);
@@ -30,13 +33,30 @@ function onInputFour() {
 function onInputFive({ name, sex }) {
  message(`${name}${sex}${searchFive.value}`);
 }
+
+function onLongpress() {
+  long.value = true;
+}
+function onCustomLongpress() {
+  long.value = true;
+}
+function onCbLongpress() {
+  idx.value += 1;
+  long.value = true;
+  cbText.value = `持续回调${idx.value}次`;
+}
+function onReset() {
+  long.value = false;
+  cbText.value = "";
+  idx.value = 0;
+}
 </script>

 <template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">自定义防抖、截流、文本复制指令</span>
+        <span class="font-medium">自定义防抖、截流、文本复制、长按指令</span>
      </div>
    </template>
    <div class="mb-2">
@@ -113,5 +133,24 @@ function onInputFive({ name, sex }) {
      文本复制指令（自定义触发事件，单击复制）
      <span v-copy:click="text" class="text-sky-500">{{ text }}</span>
    </div>
+
+    <el-divider />
+    <el-space wrap>
+      长按指令
+      <el-button v-longpress="onLongpress">长按（默认500ms）</el-button>
+      <el-button v-longpress:1000="onCustomLongpress">
+        自定义长按时长（1000ms）
+      </el-button>
+      <el-button v-longpress:2000:200="onCbLongpress">
+        2秒后每200ms持续回调
+      </el-button>
+      <el-button @click="onReset"> 重置状态 </el-button>
+      <el-tag :type="long ? 'success' : 'info'" class="ml-2" size="large">
+        {{ long ? "当前为长按状态" : "当前非长按状态" }}
+      </el-tag>
+      <el-tag v-if="cbText" type="danger" class="ml-2" size="large">
+        {{ cbText }}
+      </el-tag>
+    </el-space>
  </el-card>
 </template>
--- a/src/views/able/pinyin.vue
+++ b/src/views/able/pinyin.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { html } from "pinyin-pro";
+
+defineOptions({
+  name: "Pinyin"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">汉语拼音</span>
+      </div>
+    </template>
+    <p v-html="html('带 音 调')" />
+    <p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" />
+    <p class="mt-2 custom" v-html="html('自 定 义 样 式')" />
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.custom {
+  /* 汉字的样式 */
+  :deep(.py-chinese-item) {
+    color: #409eff;
+  }
+
+  /* 拼音的样式 */
+  :deep(.py-pinyin-item) {
+    color: #f56c6c;
+  }
+}
+</style>
--- a/src/views/able/sensitive.vue
+++ b/src/views/able/sensitive.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Mint from "mint-filter";
+
+defineOptions({
+  name: "Sensitive"
+});
+
+// 自定义敏感词字典
+const words = ["脑残", "废物", "白痴", "三八", "智障"];
+
+const modelValue = ref();
+const mint = new Mint(words);
+
+function onInput() {
+  modelValue.value = mint.filter(modelValue.value).text;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">敏感词过滤</span>
+      </div>
+    </template>
+    <div class="flex flex-wrap gap-2 my-2">
+      <span>自定义敏感词</span>
+      <el-tag
+        v-for="(word, index) in words"
+        :key="index"
+        type="danger"
+        class="mx-1"
+        effect="dark"
+        round
+      >
+        {{ word }}
+      </el-tag>
+    </div>
+    <el-input v-model="modelValue" @input="onInput" />
+    <p class="mt-2">{{ modelValue }}</p>
+  </el-card>
+</template>
--- a/src/views/components/cropping/avatar.png
+++ b/src/views/components/cropping/avatar.png
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -1,60 +1,75 @@
-<script setup lang="ts">
-import { ref, nextTick } from "vue";
-import Cropper from "@/components/ReCropper";
-import img from "./picture.jpeg";
+<script setup lang="tsx">
+import { ref } from "vue";
+import avatar from "./avatar.png";
+import ReCropper from "@/components/ReCropper";
+import { formatBytes } from "@pureadmin/utils";

 defineOptions({
  name: "Cropping"
 });

+const infos = ref();
 const refCropper = ref();
-const info = ref<object>(null);
+const showPopover = ref(false);
 const cropperImg = ref<string>("");

-const onCropper = (): void => {
-  nextTick(() => {
-    refCropper.value.cropper.getCroppedCanvas().toBlob(blob => {
-      const fileReader: FileReader = new FileReader();
-      fileReader.onloadend = (e: ProgressEvent) => {
-        cropperImg.value = (e.target as any).result;
-        info.value = refCropper.value.cropper.getData();
-      };
-      fileReader.readAsDataURL(blob);
-    }, "image/jpeg");
-  });
-};
+function onCropper({ base64, blob, info }) {
+  console.log(blob);
+  infos.value = info;
+  cropperImg.value = base64;
+}
 </script>

 <template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">图片裁剪组件</span>
+        <span class="font-medium">
+          图片裁剪组件，基于开源的
+          <el-link
+            href="https://fengyuanchen.github.io/cropperjs/"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            cropperjs
+          </el-link>
+          进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
+        </span>
      </div>
    </template>
-    <div class="cropper-container">
-      <Cropper ref="refCropper" :width="'40vw'" :src="img" />
-      <img :src="cropperImg" class="croppered" v-if="cropperImg" />
+    <el-popover
+      :visible="showPopover"
+      placement="right"
+      width="300px"
+      :teleported="false"
+    >
+      <template #reference>
+        <ReCropper
+          ref="refCropper"
+          class="w-[30vw]"
+          :src="avatar"
+          circled
+          @cropper="onCropper"
+          @readied="showPopover = true"
+        />
+      </template>
+      <div class="flex flex-wrap justify-center items-center text-center">
+        <el-image
+          v-if="cropperImg"
+          :src="cropperImg"
+          :preview-src-list="Array.of(cropperImg)"
+          fit="cover"
+        />
+        <div v-if="infos" class="mt-1">
+          <p>
+            图像大小：{{ parseInt(infos.width) }} ×
+            {{ parseInt(infos.height) }}像素
+          </p>
+          <p>
+            文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
+          </p>
        </div>
-    <el-button type="primary" @click="onCropper">裁剪</el-button>
-    <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
+      </div>
+    </el-popover>
  </el-card>
 </template>
-
-<style scoped>
-.cropper-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.el-button {
-  margin-top: 10px;
-}
-
-.croppered {
-  display: block;
-  width: 45%;
-  height: 360px;
-}
-</style>
--- a/src/views/components/cropping/picture.jpeg
+++ b/src/views/components/cropping/picture.jpeg
Author	SHA1	Message	Date
xiaoxian521	c965e2cba2	release: update `4.5.0`	2023-06-26 11:14:25 +08:00
xiaoxian521	b5996ed80b	refactor: 重构图片裁剪`ReCropper`组件，添加更多实用功能	2023-06-25 18:33:46 +08:00
xiaoxian521	bf67e36731	fix: 修复`RePureTableBar`组件初始化时列设置勾选项未根据`hide`属性正确初始化	2023-06-24 00:52:54 +08:00
xiaoming	b8200125dc	feat: 添加长按指令及使用示例，该长按指令支持自定义时长的持续回调 (#620 )	2023-06-23 11:17:39 +08:00
xiaoxian521	5f71e0aad7	feat: 菜单搜索功能支持拼音搜索，比如搜图片裁剪，输入`tp`或`tupian`等对应拼音即可	2023-06-22 00:31:25 +08:00
xiaoxian521	5873caf596	chore(deps): update	2023-06-21 17:19:56 +08:00
xiaoxian521	5d87e9916f	feat: 添加汉语拼音功能示例	2023-06-21 17:09:48 +08:00
xiaoxian521	861a93684d	feat: 添加敏感词过滤功能示例	2023-06-21 14:58:34 +08:00
xiaoxian521	c354ba0bcd	workflow: update	2023-06-19 17:06:06 +08:00
xiaoxian521	2a2a3ee478	fix: 修复升级到`V4.4.0`版本后，页面开启`keepAlive`缓存后第一次加载并未缓存页面的问题	2023-06-19 11:51:38 +08:00
xiaoxian521	2a8cd7affe	chore(deps): update	2023-06-19 10:16:09 +08:00
xiaoxian521	0eade474eb	chore(deps): update	2023-06-17 13:12:34 +08:00
xiaoxian521	cb9a8a0a05	perf: 兼容`VITE_PUBLIC_PATH`为`url`的`OSS`场景，需将`@pureadmin/theme`升级至最新版	2023-06-15 13:03:58 +08:00
xiaoxian521	3e1bc7d677	perf: 将`VITE_PUBLIC_PATH`默认改为`./`兼容更多路径场景	2023-06-15 13:00:57 +08:00
xiaoxian521	d1db4b74f4	workflow: update	2023-06-15 00:50:50 +08:00
xiaoxian521	aad2100d96	chore: update	2023-06-14 11:08:47 +08:00
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0 0 48.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z"/></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M956.8 988.8H585.6c-16 0-25.6-9.6-25.6-28.8V576c0-16 9.6-28.8 25.6-28.8h371.2c16 0 25.6 9.6 25.6 28.8v384c0 16-9.6 28.8-25.6 28.8zM608 937.6h326.4V598.4H608v339.2zm-121.6 44.8C262.4 982.4 144 848 144 595.2c0-19.2 9.6-28.8 25.6-28.8s25.6 12.8 25.6 28.8c0 220.8 96 326.4 288 326.4 16 0 25.6 12.8 25.6 28.8s-6.4 32-22.4 32z"/><path d="M262.4 694.4c-6.4 0-9.6-3.2-16-6.4L160 601.6c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8-3.2 3.2-6.4 6.4-12.8 6.4z"/><path d="M86.4 694.4c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0 9.6 9.6 9.6 22.4 0 28.8L99.2 688c-3.2 3.2-6.4 6.4-12.8 6.4zm790.4-249.6c-16 0-28.8-12.8-28.8-32 0-224-99.2-336-300.8-336-16 0-28.8-12.8-28.8-32s9.6-32 28.8-32c233.6 0 355.2 137.6 355.2 396.8 0 22.4-9.6 35.2-25.6 35.2z"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4l-86.4-86.4c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8 0 3.2-6.4 6.4-12.8 6.4z"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0s9.6 22.4 0 28.8l-86.4 86.4c-3.2 3.2-6.4 6.4-12.8 6.4zM288 524.8C156.8 524.8 48 416 48 278.4S156.8 35.2 288 35.2 528 144 528 281.6 419.2 524.8 288 524.8zm-3.2-432c-99.2 0-179.2 83.2-179.2 185.6S185.6 464 284.8 464 464 380.8 464 278.4 384 92.8 284.8 92.8z"/></svg>