shumengya/cwd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 替换内联SVG为Phosphor图标组件并修复行高问题

Browse Source 
- 在登录页、布局页和评论页中使用Phosphor图标组件替换内联SVG
- 移除登录页中已废弃的.password-toggle svg样式
- 修复评论组件中.cell-status-line的行高问题
- 保持管理员图标的原始内联SVG实现
This commit is contained in:
anghunk
2026-01-30 23:15:43 +08:00
parent f7c49ed9e6
commit f42a0b7b0a
5 changed files with 31 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cwd-admin/src/styles/components/comments.less
View File

@@ -259,6 +259,7 @@
align-items: center;
justify-content: center;
gap: 4px;
line-height: 1;
}
.cell-pin-flag {

4
cwd-admin/src/styles/components/login.less
View File

@@ -112,10 +112,6 @@
color: var(--text-primary);
}
.password-toggle svg {
width: 16px;
}
.form-error {
font-size: 13px;
color: var(--color-danger);

34
cwd-admin/src/views/CommentsView/index.vue
View File

@@ -37,7 +37,27 @@
<div class="cell-author-main">
<div class="cell-author-name">
{{ item.name }}
<span v-if="item.isAdmin" class="cell-admin-tag"><svg viewBox="0 0 22 22" aria-label="网站管理员" role="img" class="cwd-admin-icon" style="width:15px;height:15px;fill:currentColor;color:#db850d;vertical-align:-0.15em;"><g><path d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"></path></g></svg></span>
<span v-if="item.isAdmin" class="cell-admin-tag">
<svg
viewBox="0 0 22 22"
aria-label="网站管理员"
role="img"
class="cwd-admin-icon"
style="
width: 15px;
height: 15px;
fill: currentColor;
color: #db850d;
vertical-align: -0.15em;
"
>
<g>
<path
d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
></path>
</g>
</svg>
</span>
</div>
<div class="cell-author-email">
<span
@@ -85,16 +105,8 @@
置顶
</span>
<span class="cell-status cell-likes-number" v-if="item.likes !== 0">
<svg
style="width: 13px"
viewBox="0 0 24 24"
aria-hidden="true"
fill="currentColor"
>
<path
d="M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13 1 7.59 6.41C7.22 6.78 7 7.3 7 7.83V19c0 1.1.9 2 2 2h8c.78 0 1.48-.45 1.82-1.11l3.02-7.05c.11-.23.16-.48.16-.74v-2z"
></path>
</svg>
<PhThumbsUp :size="13" />
{{
typeof item.likes === "number" &&
Number.isFinite(item.likes) &&

35
cwd-admin/src/views/LayoutView/index.vue
View File

@@ -7,12 +7,7 @@
aria-label="切换菜单"
type="button"
>
<svg class="layout-menu-icon" viewBox="0 0 24 24" width="18" height="18">
<path
d="M4 7h16a1 1 0 0 0 0-2H4a1 1 0 0 0 0 2zm0 6h16a1 1 0 0 0 0-2H4a1 1 0 0 0 0 2zm0 6h16a1 1 0 0 0 0-2H4a1 1 0 0 0 0 2z"
fill="currentColor"
/>
</svg>
<PhTextIndent :size="20" />
</button>
<div class="layout-title">CWD 评论系统</div>
<div class="layout-actions-wrapper">
@@ -37,24 +32,9 @@
:title="themeTitle"
type="button"
>
<svg v-if="theme === 'light'" viewBox="0 0 24 24" width="16" height="16">
<path
d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"
fill="currentColor"
/>
</svg>
<svg v-else-if="theme === 'dark'" viewBox="0 0 24 24" width="16" height="16">
<path
d="M20 12.986c-.52.095-1.056.15-1.6.15-5.238 0-9.486-4.248-9.486-9.486 0-.544.055-1.08.15-1.6-5.275.986-9.264 5.615-9.264 11.123 0 6.255 5.07 11.325 11.325 11.325 5.508 0 10.137-3.989 11.123-9.264a9.66 9.66 0 0 1-2.248.752z"
fill="currentColor"
/>
</svg>
<svg v-else viewBox="0 0 24 24" width="16" height="16">
<path
d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6zM6 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6zm-3 14a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-1z"
fill="currentColor"
/>
</svg>
<PhSun v-if="theme === 'light'" :size="16" />
<PhMoon v-else-if="theme === 'dark'" :size="16" />
<PhAirplay v-else :size="16" />
</button>
<button class="layout-button" @click="handleLogout">退出</button>
</div>
@@ -65,12 +45,7 @@
aria-label="更多操作"
type="button"
>
<svg class="layout-actions-icon" viewBox="0 0 24 24" width="18" height="18">
<path
d="M12 5.5a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5zm0 8a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5zm0 8a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5z"
fill="currentColor"
/>
</svg>
<PhDotsThreeVertical :size="20" bold />
</button>
<div v-if="isActionsOpen" class="layout-actions-dropdown">
<button class="layout-actions-item" type="button" @click="openDocs">

42
cwd-admin/src/views/LoginView/index.vue
View File

@@ -30,46 +30,8 @@
:aria-label="showPassword ? '隐藏密码' : '显示密码'"
@click="showPassword = !showPassword"
>
<svg
v-if="!showPassword"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-eye-icon lucide-eye"
>
<path
d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
/>
<circle cx="12" cy="12" r="3" />
</svg>
<svg
v-else
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-eye-off-icon lucide-eye-off"
>
<path
d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
/>
<path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
<path
d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
/>
<path d="m2 2 20 20" />
</svg>
<PhEye v-if="!showPassword" :size="16" />
<PhEyeSlash v-else :size="16" />
</button>
</div>
</div>