style: 替换内联SVG为Phosphor图标组件并修复行高问题
- 在登录页、布局页和评论页中使用Phosphor图标组件替换内联SVG - 移除登录页中已废弃的.password-toggle svg样式 - 修复评论组件中.cell-status-line的行高问题 - 保持管理员图标的原始内联SVG实现
This commit is contained in:
anghunk
@@ -259,6 +259,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-pin-flag {
|
.cell-pin-flag {
|
||||||
|
|||||||
@@ -112,10 +112,6 @@
|
|||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.password-toggle svg {
|
|
||||||
width: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-error {
|
.form-error {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--color-danger);
|
color: var(--color-danger);
|
||||||
|
|||||||
@@ -37,7 +37,27 @@
|
|||||||
<div class="cell-author-main">
|
<div class="cell-author-main">
|
||||||
<div class="cell-author-name">
|
<div class="cell-author-name">
|
||||||
{{ item.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>
|
||||||
<div class="cell-author-email">
|
<div class="cell-author-email">
|
||||||
<span
|
<span
|
||||||
@@ -85,16 +105,8 @@
|
|||||||
置顶
|
置顶
|
||||||
</span>
|
</span>
|
||||||
<span class="cell-status cell-likes-number" v-if="item.likes !== 0">
|
<span class="cell-status cell-likes-number" v-if="item.likes !== 0">
|
||||||
<svg
|
<PhThumbsUp :size="13" />
|
||||||
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>
|
|
||||||
{{
|
{{
|
||||||
typeof item.likes === "number" &&
|
typeof item.likes === "number" &&
|
||||||
Number.isFinite(item.likes) &&
|
Number.isFinite(item.likes) &&
|
||||||
|
|||||||
@@ -7,12 +7,7 @@
|
|||||||
aria-label="切换菜单"
|
aria-label="切换菜单"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<svg class="layout-menu-icon" viewBox="0 0 24 24" width="18" height="18">
|
<PhTextIndent :size="20" />
|
||||||
<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>
|
|
||||||
</button>
|
</button>
|
||||||
<div class="layout-title">CWD 评论系统</div>
|
<div class="layout-title">CWD 评论系统</div>
|
||||||
<div class="layout-actions-wrapper">
|
<div class="layout-actions-wrapper">
|
||||||
@@ -37,24 +32,9 @@
|
|||||||
:title="themeTitle"
|
:title="themeTitle"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<svg v-if="theme === 'light'" viewBox="0 0 24 24" width="16" height="16">
|
<PhSun v-if="theme === 'light'" :size="16" />
|
||||||
<path
|
<PhMoon v-else-if="theme === 'dark'" :size="16" />
|
||||||
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"
|
<PhAirplay v-else :size="16" />
|
||||||
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>
|
|
||||||
</button>
|
</button>
|
||||||
<button class="layout-button" @click="handleLogout">退出</button>
|
<button class="layout-button" @click="handleLogout">退出</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -65,12 +45,7 @@
|
|||||||
aria-label="更多操作"
|
aria-label="更多操作"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<svg class="layout-actions-icon" viewBox="0 0 24 24" width="18" height="18">
|
<PhDotsThreeVertical :size="20" bold />
|
||||||
<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>
|
|
||||||
</button>
|
</button>
|
||||||
<div v-if="isActionsOpen" class="layout-actions-dropdown">
|
<div v-if="isActionsOpen" class="layout-actions-dropdown">
|
||||||
<button class="layout-actions-item" type="button" @click="openDocs">
|
<button class="layout-actions-item" type="button" @click="openDocs">
|
||||||
|
|||||||
@@ -30,46 +30,8 @@
|
|||||||
:aria-label="showPassword ? '隐藏密码' : '显示密码'"
|
:aria-label="showPassword ? '隐藏密码' : '显示密码'"
|
||||||
@click="showPassword = !showPassword"
|
@click="showPassword = !showPassword"
|
||||||
>
|
>
|
||||||
<svg
|
<PhEye v-if="!showPassword" :size="16" />
|
||||||
v-if="!showPassword"
|
<PhEyeSlash v-else :size="16" />
|
||||||
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>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user