From 4341366cea86826b923d38e106d26afdbc9d8db1 Mon Sep 17 00:00:00 2001 From: Ethan-Zhang Date: Fri, 17 Oct 2025 15:33:24 +0800 Subject: [PATCH 1/2] =?UTF-8?q?Fix:=20=E9=9D=99=E6=80=81=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MoreIcon/README.md | 97 ++++++++++++++++++++++ src/components/MoreIcon/index.vue | 120 +++++++++++++++++++++++++++ src/styles/knowledgeLibrary.scss | 18 +--- src/styles/upload.scss | 1 - src/utils/cssAssetResolver.ts | 8 +- src/utils/index.ts | 4 +- src/views/knowledgeLibrary/index.vue | 3 +- 7 files changed, 228 insertions(+), 23 deletions(-) create mode 100644 src/components/MoreIcon/README.md create mode 100644 src/components/MoreIcon/index.vue diff --git a/src/components/MoreIcon/README.md b/src/components/MoreIcon/README.md new file mode 100644 index 0000000..fafa7df --- /dev/null +++ b/src/components/MoreIcon/README.md @@ -0,0 +1,97 @@ +# MoreIcon 组件 + +一个可复用的"更多操作"图标组件，使用 `useAssets` 组合式函数动态加载 SVG 图标资源。 + +## 特性 + +- ✅ 使用 `useAssets` 动态加载图标，解决静态资源路径问题 +- ✅ 支持鼠标悬停和点击状态的视觉反馈 +- ✅ 支持禁用状态 +- ✅ 可自定义样式类名 +- ✅ TypeScript 支持 + +## 使用方法 + +### 基本用法 + +```vue + + + +``` + +### 自定义属性 + +```vue + +``` + +## 属性 + +| 属性名 | 类型 | 默认值 | 说明 | +|--------|------|--------|------| +| size | string \| number | 24 | 图标尺寸 | +| alt | string | 'More options' | 图片的 alt 属性 | +| containerClass | string | '' | 容器的自定义 CSS 类名 | +| iconClass | string | '' | 图标的自定义 CSS 类名 | +| disabled | boolean | false | 是否禁用 | + +## 图标状态 + +组件会根据用户交互自动切换以下图标： + +- **默认状态**: `more.svg` +- **悬停状态**: `more_hover.svg` +- **激活状态**: `more_active.svg` + +## 迁移指南 + +### 从 CSS 背景图片迁移 + +**之前的方式：** +```html + +``` + +```scss +.icon-more { + background-image: var(--more-icon, url(@/assets/svg/more.svg)); + &:hover { + background-image: var(--more-hover-icon, url(@/assets/svg/more_hover.svg)); + } + &:active { + background-image: var(--more-active-icon, url(@/assets/svg/more_active.svg)); + } +} +``` + +**现在的方式：** +```html + +``` + +### 优势 + +1. **更好的资源管理**: 使用 `useAssets` 统一处理静态资源路径 +2. **更好的类型安全**: TypeScript 支持 +3. **更灵活的状态管理**: 通过 Vue 响应式系统管理图标状态 +4. **更好的可维护性**: 组件化的方式更易于维护和复用 +5. **解决跨域问题**: 在 iframe 环境中能正确加载资源 + +## 注意事项 + +- 确保 `src/assets/svg/` 目录下存在对应的 SVG 文件 +- 组件依赖 `@/composables/useAssets`，确保该组合式函数可用 +- 如果 SVG 文件加载失败，组件会在控制台输出警告信息 diff --git a/src/components/MoreIcon/index.vue b/src/components/MoreIcon/index.vue new file mode 100644 index 0000000..cf2d40c --- /dev/null +++ b/src/components/MoreIcon/index.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/src/styles/knowledgeLibrary.scss b/src/styles/knowledgeLibrary.scss index 3557794..a8c67ee 100644 --- a/src/styles/knowledgeLibrary.scss +++ b/src/styles/knowledgeLibrary.scss @@ -195,21 +195,9 @@ .kl-card-more-icon { height: 24px; - .icon-more{ - display: inline-block; - cursor: pointer; - width: 24px; - height: 24px; - background-image: var(--more-icon, url(@/assets/svg/more.svg)); - background-repeat: no-repeat; - background-size: 100% 100%; - &:hover { - background-image: var(--more-hover-icon, url(@/assets/svg/more_hover.svg)); - } - &:active,&:focus { - background-image: var(--more-active-icon, url(@/assets/svg/more_active.svg)); - } - } + display: flex; + align-items: center; + justify-content: center; } } diff --git a/src/styles/upload.scss b/src/styles/upload.scss index 17a11a4..d13bf14 100644 --- a/src/styles/upload.scss +++ b/src/styles/upload.scss @@ -67,7 +67,6 @@ .el-alert--info { align-items: start; - max-height: 48px; margin-bottom: 16px; background-color: var(--o-color-primary-fourth) !important; diff --git a/src/utils/cssAssetResolver.ts b/src/utils/cssAssetResolver.ts index e5fdaeb..482306c 100644 --- a/src/utils/cssAssetResolver.ts +++ b/src/utils/cssAssetResolver.ts @@ -45,10 +45,10 @@ export function initCssAssetResolver() { // 加载图标（从 icons 目录） root.style.setProperty('--task-loading', `url('${getAssetUrl('icons/taskLoading.png')}')`); - // 更多操作图标 - root.style.setProperty('--more-icon', `url('${getSvgUrl('more.svg')}')`); - root.style.setProperty('--more-hover-icon', `url('${getSvgUrl('more_hover.svg')}')`); - root.style.setProperty('--more-active-icon', `url('${getSvgUrl('more_active.svg')}')`); + // 更多操作图标 - 已迁移到 MoreIcon 组件，不再需要 CSS 变量 + // root.style.setProperty('--more-icon', `url('${getSvgUrl('more.svg')}')`); + // root.style.setProperty('--more-hover-icon', `url('${getSvgUrl('more_hover.svg')}')`); + // root.style.setProperty('--more-active-icon', `url('${getSvgUrl('more_active.svg')}')`); // 登录背景 root.style.setProperty('--login-bg-light', `url('${getImageUrl('login-background-light.webp')}')`); diff --git a/src/utils/index.ts b/src/utils/index.ts index 3933e5a..a25dae5 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -36,7 +36,7 @@ export function removeClass(ele: HTMLElement, cls: string) { * @returns {Boolean} */ export function isExternal(path: string) { - const isExternal = /^(https?:|http?:|mailto:|tel:)/.test(path); + const isExternal = /^(https?:|http?:|mailto:|tel:|data:)/.test(path); return isExternal; } @@ -92,7 +92,7 @@ export function resolveAssetUrl(assetPath: string): string { } // 如果不在 iframe 环境中，使用默认处理 - const isIframeMode = import.meta.env.VITE_IS_IFRAME_MODE === 'true' || isInIframe(); + const isIframeMode = String(import.meta.env.VITE_IS_IFRAME_MODE) === 'true' || isInIframe(); if (!isIframeMode) { return assetPath; } diff --git a/src/views/knowledgeLibrary/index.vue b/src/views/knowledgeLibrary/index.vue index 858e3e7..583331a 100644 --- a/src/views/knowledgeLibrary/index.vue +++ b/src/views/knowledgeLibrary/index.vue @@ -249,7 +249,7 @@
- +