azs-markdown 1.0.1 → 1.0.3

package/README.md

@@ -1,39 +1,559 @@
-# azs-markdown
+cd D:\azs\azs-markdown && echo "# AzsMarkdown 组件文档
 
-#### 介绍
-{**以下是 Gitee 平台说明，您可以替换此简介**
-Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
-无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}
+## 简介
 
-#### 软件架构
-软件架构说明
+\`AzsMarkdown\` 是一个基于 Vue3 的 Markdown 渲染组件，支持数学公式、表格、图片自定义渲染、引用自定义插槽等扩展功能，适用于需要高度自定义 Markdown 展示的场景。
 
+---
 
-#### 安装教程
+## 主要特性
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+- 支持标准 Markdown 语法
+- 支持 GFM 表格、任务列表等扩展
+- 支持数学公式（KaTeX 渲染）
+- 支持自定义图片渲染（插槽）
+- 支持自定义引用/引源渲染（插槽）
+- 支持自定义正则扩展语法
+- 支持 mermaid 流程图（如有集成）
 
-#### 使用说明
+---
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+## 快速开始
 
-#### 参与贡献
+### 1. 引入组件
 
-1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
-3.  提交代码
-4.  新建 Pull Request
+\`\`\`vue
+<template>
+  <AzsMarkdown :markdown-value=\"markdownContent\" />
+</template>
 
+<script setup>
+import { AzsMarkdown } from 'azs-markdown'
+</script>
+\`\`\`
 
-#### 特技
+### 2. 基本使用
 
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+\`\`\`vue
+<template>
+  <div>
+    <AzsMarkdown 
+      :markdown-value=\"markdownText\"
+      :is-view-html=\"false\"
+      :custom-regex=\"/\\[\\[(\\d+)\\]\\]/g\"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { AzsMarkdown } from 'azs-markdown'
+
+const markdownText = ref(\`# 标题
+这是一段 **粗体** 文本和 *斜体* 文本。
+
+## 表格示例
+| 列1 | 列2 | 列3 |
+|-----|-----|-----|
+| 数据1 | 数据2 | 数据3 |
+| 数据4 | 数据5 | 数据6 |
+
+## 数学公式
+行内公式：$E = mc^2$
+
+块级公式：
+$$
+\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\cdots + x_n
+$$
+
+## 自定义引用
+这里有一个引用 [[1]] 和另一个引用 [[2]]。
+\`)
+</script>
+\`\`\`
+
+---
+
+## Props 参数
+
+### markdownValue
+- **类型**: \`string\`
+- **默认值**: \`\"\"\`
+- **必需**: 是
+- **描述**: 要渲染的 Markdown 内容
+
+\`\`\`vue
+<AzsMarkdown :markdown-value=\"'# Hello World'\" />
+\`\`\`
+
+### isViewHtml
+- **类型**: \`boolean\`
+- **默认值**: \`undefined\`
+- **必需**: 否
+- **描述**: 是否预览 HTML 内容（调试用）
+
+\`\`\`vue
+<AzsMarkdown 
+  :markdown-value=\"content\"
+  :is-view-html=\"true\"
+/>
+\`\`\`
+
+### customRegex
+- **类型**: \`RegExp\`
+- **默认值**: \`/\\[\\[(\\d+)\\]\\]/g\`
+- **必需**: 否
+- **描述**: 自定义正则表达式，用于匹配特殊格式的引用
+
+\`\`\`vue
+<AzsMarkdown 
+  :markdown-value=\"content\"
+  :custom-regex=\"/\\[\\[ref-(\\d+)\\]\\]/g\"
+/>
+\`\`\`
+
+---
+
+## 插槽 (Slots)
+
+### image 插槽
+用于自定义图片渲染
+
+\`\`\`vue
+<template>
+  <AzsMarkdown :markdown-value=\"content\">
+    <template #image=\"{ src, alt, title }\">
+      <div class=\"custom-image-container\">
+        <img 
+          :src=\"src\" 
+          :alt=\"alt\" 
+          :title=\"title\"
+          class=\"custom-image\"
+          @click=\"handleImageClick(src)\"
+        />
+        <div class=\"image-caption\">{{ title || alt }}</div>
+      </div>
+    </template>
+  </AzsMarkdown>
+</template>
+
+<script setup>
+const handleImageClick = (src) => {
+  // 自定义图片点击处理
+  console.log('点击了图片:', src)
+}
+</script>
+
+<style>
+.custom-image-container {
+  text-align: center;
+  margin: 16px 0;
+}
+
+.custom-image {
+  max-width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.image-caption {
+  margin-top: 8px;
+  font-size: 14px;
+  color: #666;
+  font-style: italic;
+}
+</style>
+\`\`\`
+
+### source 插槽
+用于自定义引用/引源渲染
+
+\`\`\`vue
+<template>
+  <AzsMarkdown 
+    :markdown-value=\"content\"
+    :custom-regex=\"/\\[\\[(\\d+)\\]\\]/g\"
+  >
+    <template #source=\"{ refId, displayText }\">
+      <span 
+        class=\"custom-source-ref\"
+        @click=\"handleSourceClick(refId)\"
+      >
+        [引用 {{ refId }}]
+      </span>
+    </template>
+  </AzsMarkdown>
+</template>
+
+<script setup>
+const handleSourceClick = (refId) => {
+  // 自定义引用点击处理
+  console.log('点击了引用:', refId)
+  // 可以跳转到对应的引用详情页面
+}
+</script>
+
+<style>
+.custom-source-ref {
+  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.custom-source-ref:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+}
+</style>
+\`\`\`
+
+---
+
+## 高级用法
+
+### 自定义正则表达式
+组件支持通过 \`customRegex\` 参数自定义匹配模式：
+
+\`\`\`vue
+<template>
+  <AzsMarkdown 
+    :markdown-value=\"content\"
+    :custom-regex=\"/\\{\\{ref:(\\d+)\\}\\}/g\"
+  >
+    <template #source=\"{ refId }\">
+      <span class=\"ref-tag\">参考文献 {{ refId }}</span>
+    </template>
+  </AzsMarkdown>
+</template>
+
+<script setup>
+const content = \`这是一段文本，包含自定义引用格式 {{ref:1}} 和 {{ref:2}}。\`
+</script>
+\`\`\`
+
+### 组合使用多个插槽
+\`\`\`vue
+<template>
+  <AzsMarkdown :markdown-value=\"content\">
+    <!-- 自定义图片渲染 -->
+    <template #image=\"{ src, alt, title }\">
+      <div class=\"image-wrapper\">
+        <img :src=\"src\" :alt=\"alt\" />
+        <div class=\"image-overlay\">
+          <button @click=\"downloadImage(src)\">下载</button>
+        </div>
+      </div>
+    </template>
+    
+    <!-- 自定义引用渲染 -->
+    <template #source=\"{ refId }\">
+      <span 
+        class=\"reference-link\"
+        @click=\"showReference(refId)\"
+      >
+        [{{ refId }}]
+      </span>
+    </template>
+  </AzsMarkdown>
+</template>
+
+<script setup>
+const downloadImage = (src) => {
+  // 下载图片逻辑
+}
+
+const showReference = (refId) => {
+  // 显示引用详情逻辑
+}
+</script>
+\`\`\`
+
+---
+
+## 样式定制
+
+组件提供了丰富的 CSS 类名，方便自定义样式：
+
+### 表格样式
+\`\`\`css
+/* 表格容器 */
+.azs-table-container {
+  overflow-x: auto;
+  margin: 1rem 0;
+  border-radius: 6px;
+  border: 1px solid #e1e4e8;
+}
+
+/* 表格 */
+.azs-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: 14px;
+  background-color: #fff;
+}
+
+/* 表头 */
+.azs-table th {
+  background-color: #f6f8fa;
+  font-weight: 600;
+  color: #24292e;
+  border: 1px solid #e1e4e8;
+  padding: 8px 12px;
+}
+
+/* 表格单元格 */
+.azs-table td {
+  border: 1px solid #e1e4e8;
+  padding: 8px 12px;
+  text-align: left;
+  vertical-align: top;
+}
+
+/* 表格行悬停效果 */
+.azs-table tbody tr:hover {
+  background-color: #f1f8ff;
+}
+\`\`\`
+
+### 引用样式
+\`\`\`css
+/* 默认引用样式 */
+._azs-source-ref {
+  background-color: #e3f2fd;
+  color: #1976d2;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.9em;
+  border: 1px solid #bbdefb;
+}
+
+/* 可点击引用 */
+.azs-custom-ref--clickable {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.azs-custom-ref--clickable:hover {
+  background-color: #bbdefb;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+\`\`\`
+
+---
+
+## 完整示例
+
+\`\`\`vue
+<template>
+  <div class=\"markdown-demo\">
+    <h2>AzsMarkdown 完整示例</h2>
+    
+    <AzsMarkdown 
+      :markdown-value=\"demoContent\"
+      :custom-regex=\"/\\[\\[(\\d+)\\]\\]/g\"
+    >
+      <!-- 自定义图片渲染 -->
+      <template #image=\"{ src, alt, title }\">
+        <div class=\"custom-image-wrapper\">
+          <img 
+            :src=\"src\" 
+            :alt=\"alt\" 
+            :title=\"title\"
+            class=\"demo-image\"
+            @click=\"previewImage(src)\"
+          />
+          <div class=\"image-actions\">
+            <button @click=\"previewImage(src)\">预览</button>
+            <button @click=\"downloadImage(src)\">下载</button>
+          </div>
+        </div>
+      </template>
+      
+      <!-- 自定义引用渲染 -->
+      <template #source=\"{ refId }\">
+        <span 
+          class=\"demo-reference\"
+          @click=\"showReferenceDetail(refId)\"
+        >
+          [{{ refId }}]
+        </span>
+      </template>
+    </AzsMarkdown>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { AzsMarkdown } from 'azs-markdown'
+
+const demoContent = ref(\`# AzsMarkdown 演示
+
+## 基础功能
+
+这是一个 **粗体** 文本和 *斜体* 文本的示例。
+
+### 列表
+- 项目 1
+- 项目 2
+  - 子项目 2.1
+  - 子项目 2.2
+
+### 代码块
+\`\`\`javascript
+function hello() {
+  console.log('Hello, AzsMarkdown!')
+}
+\`\`\`
+
+## 表格示例
+| 功能 | 状态 | 描述 |
+|------|------|------|
+| 基础 Markdown | ✅ | 支持标准语法 |
+| 表格 | ✅ | GFM 表格支持 |
+| 数学公式 | ✅ | KaTeX 渲染 |
+| 自定义插槽 | ✅ | 图片和引用插槽 |
+
+## 数学公式
+行内公式：$E = mc^2$
+
+块级公式：
+$$
+\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
+$$
+
+## 自定义引用
+这里有一些引用 [[1]] 和 [[2]]，点击可以查看详情。
+
+## 图片示例
+![示例图片](https://via.placeholder.com/400x200/667eea/ffffff?text=AzsMarkdown)
+\`)
+
+// 事件处理函数
+const previewImage = (src) => {
+  console.log('预览图片:', src)
+  // 实现图片预览逻辑
+}
+
+const downloadImage = (src) => {
+  console.log('下载图片:', src)
+  // 实现图片下载逻辑
+}
+
+const showReferenceDetail = (refId) => {
+  console.log('显示引用详情:', refId)
+  // 实现引用详情显示逻辑
+}
+</script>
+
+<style scoped>
+.markdown-demo {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.custom-image-wrapper {
+  position: relative;
+  display: inline-block;
+  margin: 16px 0;
+}
+
+.demo-image {
+  max-width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  transition: transform 0.3s ease;
+}
+
+.demo-image:hover {
+  transform: scale(1.02);
+}
+
+.image-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 8px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.custom-image-wrapper:hover .image-actions {
+  opacity: 1;
+}
+
+.image-actions button {
+  background: rgba(0,0,0,0.7);
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.demo-reference {
+  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin: 0 2px;
+}
+
+.demo-reference:hover {
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+}
+</style>
+\`\`\`
+
+---
+
+## API 参考
+
+### Props
+| 参数 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| markdownValue | string | \"\" | 要渲染的 Markdown 内容 |
+| isViewHtml | boolean | undefined | 是否预览 HTML 内容 |
+| customRegex | RegExp | /\\[\\[(\\d+)\\]\\]/g | 自定义正则表达式 |
+
+### Slots
+| 插槽名 | 参数 | 描述 |
+|--------|------|------|
+| image | { src, alt, title } | 自定义图片渲染 |
+| source | { refId, displayText } | 自定义引用渲染 |
+
+### 事件
+组件本身不直接发出事件，但可以通过插槽中的组件发出自定义事件。
+
+---
+
+## 注意事项
+
+1. **正则表达式**: 确保 \`customRegex\` 参数包含捕获组，用于提取引用 ID
+2. **图片处理**: 使用 \`image\` 插槽时，需要处理图片加载失败的情况
+3. **引用点击**: 引用插槽中的点击事件需要自行实现跳转或弹窗逻辑
+4. **样式覆盖**: 使用 \`:deep()\` 选择器来覆盖组件内部样式
+5. **性能优化**: 对于大量 Markdown 内容，建议使用虚拟滚动或分页
+
+---
+
+## 更新日志
+
+### v1.0.0
+- 初始版本发布
+- 支持基础 Markdown 渲染
+- 支持自定义图片和引用插槽
+- 支持自定义正则表达式
+- 支持表格和数学公式渲染" > README.md

package/dist/{_basePickBy-BoNhky5_.js → _basePickBy-CodpxYMm.js}

@@ -1,5 +1,5 @@
-import { e as x, c as O, g as m, k as P, h as p, j as w, l as A, m as c, n as I, t as N, o as _ } from "./_baseUniq-CwgXSVUs.js";
-import { aS as g, aA as E, aT as F, aU as M, aV as T, aW as l, aX as $, aY as B, aZ as S, a_ as y } from "./index-Cc5Vj81T.js";
+import { e as x, c as O, g as m, k as P, h as p, j as w, l as A, m as c, n as I, t as N, o as _ } from "./_baseUniq-KDeHsuJJ.js";
+import { aS as g, aA as E, aT as F, aU as M, aV as T, aW as l, aX as $, aY as B, aZ as S, a_ as y } from "./index-D-9RvHe2.js";
 var G = /\s/;
 function H(n) {
   for (var r = n.length; r-- && G.test(n.charAt(r)); )

package/dist/{_baseUniq-CwgXSVUs.js → _baseUniq-KDeHsuJJ.js}

@@ -1,4 +1,4 @@
-import { bf as S, bg as Rn, aX as T, bh as w, bi as xn, bj as mn, aW as sn, bk as Mn, bl as un, bm as x, aU as U, bn as Cn, bo as on, bp as Fn, bq as E, bd as gn, br as R, aS as ln, bs as Dn, bt as D, bu as Gn, bv as Un, bw as $, a_ as Bn, bx as Nn, aV as Kn, by as X, bz as jn, bA as Hn, aZ as qn, aY as cn, bb as Yn, bB as M } from "./index-Cc5Vj81T.js";
+import { bf as S, bg as Rn, aX as T, bh as w, bi as xn, bj as mn, aW as sn, bk as Mn, bl as un, bm as x, aU as U, bn as Cn, bo as on, bp as Fn, bq as E, bd as gn, br as R, aS as ln, bs as Dn, bt as D, bu as Gn, bv as Un, bw as $, a_ as Bn, bx as Nn, aV as Kn, by as X, bz as jn, bA as Hn, aZ as qn, aY as cn, bb as Yn, bB as M } from "./index-D-9RvHe2.js";
 var Zn = "[object Symbol]";
 function B(n) {
   return typeof n == "symbol" || S(n) && Rn(n) == Zn;

package/dist/{arc-BDaMZnNe.js → arc-DLRUPS9O.js}

@@ -1,4 +1,4 @@
-import { a0 as ln, a1 as an, a2 as y, a3 as tn, a4 as H, a5 as q, a6 as _, a7 as un, a8 as B, a9 as rn, aa as L, ab as o, ac as sn, ad as on, ae as fn } from "./index-Cc5Vj81T.js";
+import { a0 as ln, a1 as an, a2 as y, a3 as tn, a4 as H, a5 as q, a6 as _, a7 as un, a8 as B, a9 as rn, aa as L, ab as o, ac as sn, ad as on, ae as fn } from "./index-D-9RvHe2.js";
 function cn(l) {
   return l.innerRadius;
 }

package/dist/{architecture-O4VJ6CD3-vs684nmx.js → architecture-O4VJ6CD3-CTqWl6CG.js}

@@ -1,4 +1,4 @@
-import { A as c, e as t } from "./mermaid-parser.core-CBX7YYAI.js";
+import { A as c, e as t } from "./mermaid-parser.core-DZnb6wFE.js";
 export {
   c as ArchitectureModule,
   t as createArchitectureServices

package/dist/{architectureDiagram-W76B3OCA-QSgHBKBf.js → architectureDiagram-W76B3OCA-BjD9CIdZ.js}

@@ -1,6 +1,6 @@
-import { aI as ye, aJ as ke, _ as dt, H as Ze, V as qe, l as Re, b as Qe, a as Je, p as Ke, q as je, g as _e, s as tr, y as er, D as rr, E as ir, F as ar, c as Ee, ak as me, aK as ve, i as nr, d as or, aL as sr, aM as hr } from "./index-Cc5Vj81T.js";
-import { p as lr } from "./chunk-4BX2VUAB-Caa0BGDX.js";
-import { p as fr } from "./mermaid-parser.core-CBX7YYAI.js";
+import { aI as ye, aJ as ke, _ as dt, H as Ze, V as qe, l as Re, b as Qe, a as Je, p as Ke, q as je, g as _e, s as tr, y as er, D as rr, E as ir, F as ar, c as Ee, ak as me, aK as ve, i as nr, d as or, aL as sr, aM as hr } from "./index-D-9RvHe2.js";
+import { p as lr } from "./chunk-4BX2VUAB-hWMmxFrf.js";
+import { p as fr } from "./mermaid-parser.core-DZnb6wFE.js";
 import { c as Se } from "./cytoscape.esm-ZmItrg9y.js";
 var Fe = { exports: {} }, ue = { exports: {} }, de = { exports: {} }, we;
 function cr() {

package/dist/azs-markdown.js

@@ -0,0 +1,5 @@
+(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode('@charset "UTF-8";._azs-source-ref[data-v-aa980286]{background-color:#e3f2fd;color:#1976d2;padding:2px 6px;border-radius:4px;font-size:.9em;border:1px solid #bbdefb}.azs-custom-ref--clickable[data-v-aa980286]{cursor:pointer;transition:all .2s ease}.azs-custom-ref--clickable[data-v-aa980286]:hover{background-color:#bbdefb;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.azs-custom-ref--disabled[data-v-aa980286]{opacity:.6;cursor:default}.azs-table-container[data-v-7c720df9]{width:100%;overflow-x:auto;margin:16px 0}.azs-table[data-v-7c720df9]{width:100%;border-collapse:collapse;border-spacing:0;background-color:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a}.azs-table th[data-v-7c720df9],.azs-table td[data-v-7c720df9]{padding:12px 16px;text-align:left;border-bottom:1px solid #e5e7eb;vertical-align:middle}.azs-table th[data-v-7c720df9]{background-color:#f9fafb;font-weight:600;color:#374151;font-size:14px;text-transform:none;letter-spacing:0}.azs-table td[data-v-7c720df9]{color:#4b5563;font-size:14px}.azs-table tbody tr[data-v-7c720df9]{transition:background-color .2s ease}.azs-table tbody tr[data-v-7c720df9]:hover{background-color:#f9fafb}.azs-table tbody tr:last-child td[data-v-7c720df9]{border-bottom:none}.azs-table .text-left[data-v-7c720df9]{text-align:left}.azs-table .text-center[data-v-7c720df9]{text-align:center}.azs-table .text-right[data-v-7c720df9]{text-align:right}@media (max-width: 768px){.azs-table[data-v-7c720df9]{font-size:12px}.azs-table th[data-v-7c720df9],.azs-table td[data-v-7c720df9]{padding:8px 12px}}.image-preview-overlay[data-v-3c35f524]{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000e6;z-index:9999;display:flex;align-items:center;justify-content:center;outline:none}.image-preview-container[data-v-3c35f524]{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}.close-btn[data-v-3c35f524]{position:absolute;top:-50px;right:0;background:#ffffff1a;border:none;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s;z-index:10001}.close-btn[data-v-3c35f524]:hover{background:#fff3}.toolbar[data-v-3c35f524]{position:absolute;bottom:-60px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;background:#000000b3;padding:10px 15px;border-radius:25px;z-index:10001}.toolbar button[data-v-3c35f524]{background:#ffffff1a;border:none;color:#fff;width:35px;height:35px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.toolbar button[data-v-3c35f524]:hover{background:#fff3}.zoom-level[data-v-3c35f524]{color:#fff;font-size:14px;min-width:50px;text-align:center}.image-container[data-v-3c35f524]{position:relative;overflow:hidden;max-width:100%;max-height:100%}.image-container img[data-v-3c35f524]{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}.loading[data-v-3c35f524]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;display:flex;flex-direction:column;align-items:center;gap:10px}.spinner[data-v-3c35f524]{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top:3px solid white;border-radius:50%;animation:spin-3c35f524 1s linear infinite}@keyframes spin-3c35f524{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.image-preview-container[data-v-3c35f524]{max-width:95vw;max-height:95vh}.toolbar[data-v-3c35f524]{bottom:-50px;padding:8px 12px}.toolbar button[data-v-3c35f524]{width:30px;height:30px}.close-btn[data-v-3c35f524]{top:-40px;width:35px;height:35px}}[data-v-1dba529f] .azs-table-container{overflow-x:auto;margin:1rem 0;border-radius:6px;border:1px solid #e1e4e8}[data-v-1dba529f] .azs-table{width:100%;border-collapse:collapse;border-spacing:0;font-size:14px;background-color:#fff}[data-v-1dba529f] .azs-table th,[data-v-1dba529f] .azs-table td{border:1px solid #e1e4e8;padding:8px 12px;text-align:left;vertical-align:top}[data-v-1dba529f] .azs-table th{background-color:#f6f8fa;font-weight:600;color:#24292e}[data-v-1dba529f] .azs-table tbody tr:nth-child(2n){background-color:#f6f8fa}[data-v-1dba529f] .azs-table tbody tr:hover,[data-v-1dba529f] .azs-table tbody tr:hover td{background-color:#f1f8ff}@media (max-width: 768px){[data-v-1dba529f] .azs-table-container{font-size:12px}[data-v-1dba529f] .azs-table th,[data-v-1dba529f] .azs-table td{padding:6px 8px}}')),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { bE as f } from "./index-D-9RvHe2.js";
+export {
+  f as default
+};