# test

**Repository Path**: fish-warrior/test

## Basic Information

- **Project Name**: test
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-04
- **Last Updated**: 2025-05-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<route lang="yaml">
meta:
  enabled: false
</route>

<script setup lang="ts">
import gfm from '@bytemd/plugin-gfm'
import gfmLocale from '@bytemd/plugin-gfm/lib/locales/zh_Hans.json'
// @ts-expect-error 忽略警告
import { Editor, Viewer, withBase } from '@bytemd/vue-next'
import zhHans from 'bytemd/locales/zh_Hans.json'
import Alert from './components/alert.vue'
import Command from './components/command.vue'
import 'bytemd/dist/index.css'



const content = ref('# Fantastic-admin')

function handleButtonClick(action: string, params: Record<string, any>) {
  console.log('按钮触发:', { action, params })
  
  switch(action) {
    // 显示提示框
    case 'alert':
      alert(params.message || '默认提示信息')
      break
      
    // 页面跳转
    case 'navigate':
      if (params.url) {
        window.open(params.url, params.target || '_blank')
      }
      break
      
    // 复制文本
    case 'copy':
      if (params.text) {
        navigator.clipboard.writeText(params.text)
          .then(() => alert('复制成功'))
          .catch(() => alert('复制失败'))
      }
      break
      
    // 执行自定义函数  
    case 'custom':
      if (window[params.funcName]) {
        window[params.funcName](params.args)
      }
      break
      
    // 默认操作
    default:
      console.log('执行默认按钮操作', params)
      // 这里可以添加你的默认逻辑
  }
}

// const buttonHandler = () => (tree) => {
//   visit(tree, 'text', (node) => {
//     if (node.value.includes('[button')) {
//       node.type = 'html'
//       node.value = node.value.replace(
//         /\[button (.*?)(?:\|(.*?))?\]/g,
//         (_, text, config) => {
//           const { action = 'default', params = {} } = config ? JSON.parse(config) : {}
//           return `<button class="dynamic-button" 
//                    data-action="${action}" 
//                    data-params='${JSON.stringify(params)}'>
//                   ${text}
//                 </button>`
//         }
//       )
//     }
//   })
// }

// 自定义按钮渲染器
// const buttonPlugin = () => {
//   return {
//     viewerEffect({ markdownBody }) {
//       const regex = /\[button (.*?)(?:\|(.*?))?\]/g
//       markdownBody.innerHTML = markdownBody.innerHTML.replace(regex, 
//         (_, text, config) => {
//           try {
//             // 移除可能的HTML标签
//             const cleanConfig = config ? config.replace(/<[^>]*>/g, '') : '{}'
//             const { action='default', params={} } = JSON.parse(cleanConfig)
            
//             // 编码URL参数
//             if (params.url) {
//               params.url = encodeURI(params.url.replace(/<[^>]*>/g, ''))
//             }

//             return `<button class="dynamic-button" 
//                      data-action="${action}"
//                      data-params='${JSON.stringify(params)}'>
//                     ${text}
//                    </button>`
//           } catch(e) {
//             console.error('配置解析错误:', config, e)
//             return `<span class="button-error">配置错误: ${text}</span>`
//           }
//         }
//       )

//       // 绑定事件
//       const buttons = markdownBody.querySelectorAll('.dynamic-button')
//       buttons.forEach(btn => {
//         const action = btn.getAttribute('data-action') || 'default'
//         const params = JSON.parse(btn.getAttribute('data-params') || '{}')
   
//         btn.addEventListener('click', () => handleButtonClick(action, params))
//       })
//       console.log('转换后内容:', markdownBody.innerHTML) 
//     }
//   }
// }

// const buttonPlugin = () => {
//   return {
//     viewerEffect({ markdownBody }) {
//       const regex = /\[button (.*?)(?:\|(.*?))?\]/g
//       markdownBody.innerHTML = markdownBody.innerHTML.replace(regex, 
//         (_, text, config) => {
//           try {
//             // 1. 严格清理配置字符串
//             const cleanConfig = config 
//               ? config.replace(/<[^>]*>/g, '')  // 移除HTML标签
//                      .replace(/'/g, '"')       // 单引号转双引号
//                      .replace(/(\w+):/g, '"$1":') // 确保属性名带引号
//               : '{}'
            
//             // 2. 解析时捕获可能的错误
//             const parsed = JSON.parse(cleanConfig)
//             const action = parsed.action || 'default'
//             const params = parsed.params || parsed // 兼容两种格式
            
//             // 3. 安全序列化参数
//             const safeParams = JSON.stringify(params)
//               .replace(/"/g, '&quot;')
//               .replace(/'/g, '&apos;')

//             return `<button class="dynamic-button" 
//                      data-action="${action}"
//                      data-params='${safeParams}'>
//                     ${text}
//                    </button>`
//           } catch(e) {
//             console.error('配置解析错误:', config, e)
//             return `<button class="button-error">${text}</button>`
//           }
//         }
//       )

//       // 4. 可靠的事件绑定
//       markdownBody.querySelectorAll('.dynamic-button').forEach(btn => {
//         const paramsStr = btn.getAttribute('data-params')?.replace(/&quot;/g, '"') || '{}'
//         try {
//           const action = btn.getAttribute('data-action') || 'default'
//           const params = JSON.parse(paramsStr)
//           btn.onclick = () => {
//             console.log('触发参数:', params) // 调试日志
//             handleButtonClick(action, params)
//           }
//         } catch(e) {
//           btn.onclick = () => handleButtonClick('error', { 
//             msg: '参数解析失败',
//             raw: paramsStr
//           })
//         }
//       })
//     }
//   }
// }

const buttonPlugin = () => {
  return {
    viewerEffect({ markdownBody }) {
      const regex = /\[button (.*?)(?:\|(.*?))?\]/g
      markdownBody.innerHTML = markdownBody.innerHTML.replace(regex, 
        (_, text, config) => {
          try {
            // 1. 彻底清理HTML标签和Markdown链接
            const cleanConfig = config 
              ? config.replace(/<a\b[^>]*>(.*?)<\/a>/g, '$1')  // 移除<a>标签但保留文本
                     .replace(/<[^>]*>/g, '')                 // 移除其他HTML标签
                     .replace(/'/g, '"')                      // 单引号转双引号
                     .replace(/(\w+):\s*"/g, '"$1": "')       // 标准化键名
              : '{}'
            
            // 2. 安全解析JSON
            const { action = 'default', ...params } = JSON.parse(cleanConfig)
            
            // 3. 处理URL参数
            if (params.url) {
              params.url = params.url.replace(/<\/?a[^>]*>/g, '')
            }

            // 4. 生成安全的按钮HTML
            return `<button class="dynamic-button" 
                     data-action="${action}"
                     data-params='${JSON.stringify(params).replace(/"/g, '&quot;')}'>
                    ${text}
                   </button>`
          } catch(e) {
            console.error('按钮配置解析错误:', config, e)
            return `<button class="button-error" 
                     onclick="console.error('配置错误: ${text.replace(/"/g, '\\"')}')">
                    ${text} (配置错误)
                   </button>`
          }
        }
      )

      // 5. 绑定点击事件
      markdownBody.querySelectorAll('.dynamic-button:not(.button-error)').forEach(btn => {
        btn.onclick = () => {
          const action = btn.getAttribute('data-action')!
          const params = JSON.parse(
            btn.getAttribute('data-params')!
              .replace(/&quot;/g, '"')
              .replace(/&lt;/g, '<')
              .replace(/&gt;/g, '>')
          )
          handleButtonClick(action, params)
        }
      })
    }
  }
}

const plugins = [
  gfm({ locale: gfmLocale }),
  buttonPlugin()
]


function handleChange(v: string) {
  content.value = v
}

function open(url: string) {
  window.open(url, '_blank')
}
</script>

<template>
  <div>
    <Alert />
    <FaPageHeader title="Markdown 编辑器">
      <template #description>
        <p>
          安装命令：
          <Command text="pnpm add bytemd @bytemd/vue-next @bytemd/plugin-gfm" />
        </p>
      </template>
      <FaButton variant="outline" @click="open('https://github.com/bytedance/bytemd')">
        <FaIcon name="i-ep:link" />
        访问 bytemd
      </FaButton>
    </FaPageHeader>
    <FaPageMain>
      <div class="min-w-full prose">
        <Editor :value="content" :plugins="plugins" :locale="zhHans" @change="handleChange" />
      </div>
    </FaPageMain>
    <FaPageMain title="预览">
      <div class="min-w-full prose">
        <Viewer :value="content" />
      </div>
    </FaPageMain>
  </div>
</template>

<style scoped>
:deep(.bytemd-fullscreen) {
  z-index: 2000;
}

.dynamic-button {
  padding: 8px 16px;
  background: #409EFF ;
  color: white;
  border: none;
  border-radius: 4px;
  margin: 4px;
  cursor: pointer;
}

.dynamic-button {
  color: blue;
}
</style>