mirror of
https://github.com/Funkoala14/KnowledgeBase_OOIN.git
synced 2025-06-08 05:49:44 +08:00
[dev]set svg icons lib
This commit is contained in:
parent
445c30ba0b
commit
f88a14ee31
@ -1,4 +1,5 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import SvgIcon from './SvgIcon';
|
||||
|
||||
const Snackbar = ({ type = 'primary', message, duration = 3000, onClose }) => {
|
||||
if (!message) return null;
|
||||
@ -21,32 +22,11 @@ const Snackbar = ({ type = 'primary', message, duration = 3000, onClose }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' className='d-none'>
|
||||
<symbol id='check-circle-fill' viewBox='0 0 16 16'>
|
||||
<path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z' />
|
||||
</symbol>
|
||||
<symbol id='info-fill' viewBox='0 0 16 16'>
|
||||
<path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z' />
|
||||
</symbol>
|
||||
<symbol id='exclamation-triangle-fill' viewBox='0 0 16 16'>
|
||||
<path d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z' />
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div
|
||||
className={`snackbar alert alert-${type} d-flex align-items-center justify-content-between position-fixed top-10 start-50 translate-middle w-50 alert-dismissible z-2`}
|
||||
role='alert'
|
||||
>
|
||||
<svg
|
||||
className='bi flex-shrink-0 me-2'
|
||||
role='img'
|
||||
aria-label={`${type}:`}
|
||||
width='16'
|
||||
height='16'
|
||||
fill='currentColor'
|
||||
>
|
||||
<use xlinkHref={`#${icons[type]}`} />
|
||||
</svg>
|
||||
<SvgIcon className={icons[type]} />
|
||||
<div className='flex-fill'>{message}</div>
|
||||
<button
|
||||
type='button'
|
||||
|
||||
12
src/components/SvgIcon.jsx
Normal file
12
src/components/SvgIcon.jsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import { icons } from '../icons/icons';
|
||||
|
||||
export default function SvgIcon({ className }) {
|
||||
return (
|
||||
<span
|
||||
className={className}
|
||||
style={{ display: 'inline-block', lineHeight: 0 }}
|
||||
dangerouslySetInnerHTML={{ __html: icons[className] || '' }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
63
src/icons/icons.js
Normal file
63
src/icons/icons.js
Normal file
@ -0,0 +1,63 @@
|
||||
export const icons = {
|
||||
plus: `<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 448 512' fill='currentColor'>
|
||||
<path d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z' />
|
||||
</svg>`,
|
||||
'more-dot': `<svg xmlns='http://www.w3.org/2000/svg' height='20' width='5' viewBox='0 0 128 512'>
|
||||
<path d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z' />
|
||||
</svg>`,
|
||||
trash: `<svg
|
||||
t='1740778468968'
|
||||
className='icon'
|
||||
viewBox='0 0 1024 1024'
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
p-id='2707'
|
||||
width='16'
|
||||
height='16'
|
||||
>
|
||||
<path
|
||||
d='M896 298.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z'
|
||||
p-id='2708'
|
||||
></path>
|
||||
<path
|
||||
d='M725.333333 981.333333H298.666667c-72.533333 0-128-55.466667-128-128V256c0-25.6 17.066667-42.666667 42.666666-42.666667s42.666667 17.066667 42.666667 42.666667v597.333333c0 25.6 17.066667 42.666667 42.666667 42.666667h426.666666c25.6 0 42.666667-17.066667 42.666667-42.666667V256c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666666 42.666667v597.333333c0 72.533333-55.466667 128-128 128zM682.666667 298.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667h-170.666666c-25.6 0-42.666667 17.066667-42.666667 42.666667v85.333333c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666666-42.666667V170.666667c0-72.533333 55.466667-128 128-128h170.666666c72.533333 0 128 55.466667 128 128v85.333333c0 25.6-17.066667 42.666667-42.666666 42.666667z'
|
||||
p-id='2709'
|
||||
></path>
|
||||
</svg>`,
|
||||
'check-circle-fill': `<svg className='bi flex-shrink-0 me-2' role='img' width='16' height='16' fill='currentColor'>
|
||||
<path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z' />
|
||||
</svg>`,
|
||||
'info-fill': `<svg className='bi flex-shrink-0 me-2' role='img' width='16' height='16' fill='currentColor'>
|
||||
<path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z' />
|
||||
</svg>`,
|
||||
'exclamation-triangle-fill': `<svg className='bi flex-shrink-0 me-2' role='img' width='16' height='16' fill='currentColor'>
|
||||
<path d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z' />
|
||||
</svg>`,
|
||||
file: `<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 384 512'>
|
||||
<path
|
||||
fill='#737373'
|
||||
d='M320 464c8.8 0 16-7.2 16-16l0-288-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l256 0zM0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64z'
|
||||
/>
|
||||
</svg>`,
|
||||
clock: `<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 512 512'>
|
||||
<path
|
||||
fill='#737373'
|
||||
d='M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'
|
||||
/>
|
||||
</svg>`,
|
||||
'circle-yes': `<svg xmlns='http://www.w3.org/2000/svg' height='14' width='14' viewBox='0 0 512 512' fill='currentColor'>
|
||||
<path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z' />
|
||||
</svg>`,
|
||||
eye: `<svg xmlns='http://www.w3.org/2000/svg' height='14' width='15.75' viewBox='0 0 576 512' fill='currentColor'>
|
||||
<path d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z' />
|
||||
</svg>`,
|
||||
'chat-dot': `<svg xmlns='http://www.w3.org/2000/svg' height='14' width='14' viewBox='0 0 512 512' fill='currentColor'>
|
||||
<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z' />
|
||||
</svg>`,
|
||||
key: `<svg xmlns='http://www.w3.org/2000/svg' height='14' width='14' viewBox='0 0 512 512' fill='currentColor'>
|
||||
<path d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z' />
|
||||
</svg>`,
|
||||
lock: `<svg xmlns='http://www.w3.org/2000/svg' height='14' width='12.25' viewBox='0 0 448 512' fill='currentColor'>
|
||||
<path d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z' />
|
||||
</svg>`,
|
||||
};
|
||||
@ -3,13 +3,13 @@ import React from 'react';
|
||||
export default function HeaderWithNav() {
|
||||
return (
|
||||
<header className=' navbar navbar-expand-lg'>
|
||||
<nav class='navbar navbar-expand-lg border-bottom p-3 mb-3 w-100'>
|
||||
<div class='container-fluid'>
|
||||
<a class='navbar-brand' href='#'>
|
||||
<nav className='navbar navbar-expand-lg border-bottom p-3 mb-3 w-100'>
|
||||
<div className='container-fluid'>
|
||||
<a className='navbar-brand' href='#'>
|
||||
OOIN 智能知识库
|
||||
</a>
|
||||
<button
|
||||
class='navbar-toggler'
|
||||
className='navbar-toggler'
|
||||
type='button'
|
||||
data-bs-toggle='collapse'
|
||||
data-bs-target='#navbarText'
|
||||
@ -17,30 +17,30 @@ export default function HeaderWithNav() {
|
||||
aria-expanded='false'
|
||||
aria-label='Toggle navigation'
|
||||
>
|
||||
<span class='navbar-toggler-icon'></span>
|
||||
<span className='navbar-toggler-icon'></span>
|
||||
</button>
|
||||
<div class='collapse navbar-collapse' id='navbarText'>
|
||||
<ul class='navbar-nav me-auto mb-lg-0'>
|
||||
<li class='nav-item'>
|
||||
<a class='nav-link active' aria-current='page' href='#'>
|
||||
<div className='collapse navbar-collapse' id='navbarText'>
|
||||
<ul className='navbar-nav me-auto mb-lg-0'>
|
||||
<li className='nav-item'>
|
||||
<a className='nav-link active' aria-current='page' href='#'>
|
||||
知识库
|
||||
</a>
|
||||
</li>
|
||||
<li class='nav-item'>
|
||||
<a class='nav-link' href='#'>
|
||||
<li className='nav-item'>
|
||||
<a className='nav-link' href='#'>
|
||||
Chat
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr className='d-lg-none'/>
|
||||
<ul class='navbar-nav mb-2 mb-lg-0'>
|
||||
<li class='nav-item'>
|
||||
<a class='nav-link text-dark' href='#'>
|
||||
<hr className='d-lg-none' />
|
||||
<ul className='navbar-nav mb-2 mb-lg-0'>
|
||||
<li className='nav-item'>
|
||||
<a className='nav-link text-dark' href='#'>
|
||||
Log in
|
||||
</a>
|
||||
</li>
|
||||
<li class='nav-item'>
|
||||
<a class='nav-link text-dark' href='#'>
|
||||
<li className='nav-item'>
|
||||
<a className='nav-link text-dark' href='#'>
|
||||
Sign up
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import KnowledgeCard from './KnowledgeCard';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { showNotification } from '../../store/notification.slice';
|
||||
import SvgIcon from '../../components/SvgIcon';
|
||||
|
||||
export default function KnowledgeBase() {
|
||||
const dispatch = useDispatch();
|
||||
@ -28,12 +30,7 @@ export default function KnowledgeBase() {
|
||||
<div className='d-flex justify-content-between align-items-center mb-3'>
|
||||
<input type='text' className='form-control w-50' placeholder='搜索知识库...' />
|
||||
<button className='btn btn-dark d-flex align-items-center gap-1'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height="16" width="16" viewBox='0 0 448 512'>
|
||||
<path
|
||||
fill='#ffffff'
|
||||
d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'
|
||||
/>
|
||||
</svg>
|
||||
<SvgIcon className={'plus'} />
|
||||
新建知识库
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import SvgIcon from '../../components/SvgIcon';
|
||||
|
||||
export default function KnowledgeCard({ title, description, documents, date, access }) {
|
||||
return (
|
||||
@ -8,119 +9,49 @@ export default function KnowledgeCard({ title, description, documents, date, acc
|
||||
<h5 className='card-title'>{title}</h5>
|
||||
<div className='hoverdown position-absolute end-0 top-0'>
|
||||
<button type='button' className='detail-btn btn'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='20' width='5' viewBox='0 0 128 512'>
|
||||
<path d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z' />
|
||||
</svg>
|
||||
<SvgIcon className={'more-dot'} />
|
||||
</button>
|
||||
<ul class='hoverdown-menu shadow bg-white p-1 rounded'>
|
||||
<ul className='hoverdown-menu shadow bg-white p-1 rounded'>
|
||||
<li className='p-1 hoverdown-item px-2'>
|
||||
删除
|
||||
<svg
|
||||
t='1740778468968'
|
||||
className='icon'
|
||||
viewBox='0 0 1024 1024'
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
p-id='2707'
|
||||
width='16'
|
||||
height='16'
|
||||
>
|
||||
<path
|
||||
d='M896 298.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z'
|
||||
p-id='2708'
|
||||
></path>
|
||||
<path
|
||||
d='M725.333333 981.333333H298.666667c-72.533333 0-128-55.466667-128-128V256c0-25.6 17.066667-42.666667 42.666666-42.666667s42.666667 17.066667 42.666667 42.666667v597.333333c0 25.6 17.066667 42.666667 42.666667 42.666667h426.666666c25.6 0 42.666667-17.066667 42.666667-42.666667V256c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666666 42.666667v597.333333c0 72.533333-55.466667 128-128 128zM682.666667 298.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667h-170.666666c-25.6 0-42.666667 17.066667-42.666667 42.666667v85.333333c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666666-42.666667V170.666667c0-72.533333 55.466667-128 128-128h170.666666c72.533333 0 128 55.466667 128 128v85.333333c0 25.6-17.066667 42.666667-42.666666 42.666667z'
|
||||
p-id='2709'
|
||||
></path>
|
||||
</svg>
|
||||
<SvgIcon className={'trash'} />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className='card-text text-muted'>{description}</p>
|
||||
<div className='text-muted d-flex align-items-center gap-1'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 384 512'>
|
||||
<path
|
||||
fill='#737373'
|
||||
d='M320 464c8.8 0 16-7.2 16-16l0-288-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l256 0zM0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64z'
|
||||
/>
|
||||
</svg>
|
||||
<SvgIcon className={'file'} />
|
||||
{documents} 文档
|
||||
<span className='ms-3 d-flex align-items-center gap-1'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 512 512'>
|
||||
<path
|
||||
fill='#737373'
|
||||
d='M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'
|
||||
/>
|
||||
</svg>
|
||||
<SvgIcon className={'clock'} />
|
||||
{date}
|
||||
</span>
|
||||
</div>
|
||||
<div className='mt-3 d-flex justify-content-between align-items-end'>
|
||||
{access === 'full' ? (
|
||||
<span className='badge bg-success-subtle d-flex align-items-center gap-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
height='14'
|
||||
width='14'
|
||||
viewBox='0 0 512 512'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z' />
|
||||
</svg>
|
||||
<SvgIcon className={'circle-yes'} />
|
||||
完全访问
|
||||
</span>
|
||||
) : access === 'read' ? (
|
||||
<span className='badge bg-primary-subtle d-flex align-items-center gap-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
height='14'
|
||||
width='15.75'
|
||||
viewBox='0 0 576 512'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z' />
|
||||
</svg>
|
||||
<SvgIcon className={'eye'} />
|
||||
只读访问
|
||||
</span>
|
||||
) : (
|
||||
<span className='badge bg-dark-subtle d-flex align-items-center gap-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
height='14'
|
||||
width='12.25'
|
||||
viewBox='0 0 448 512'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z' />
|
||||
</svg>
|
||||
<SvgIcon className={'lock'} />
|
||||
无访问权限
|
||||
</span>
|
||||
)}
|
||||
{access === 'full' || access === 'read' ? (
|
||||
<button className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
height='14'
|
||||
width='14'
|
||||
viewBox='0 0 512 512'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z' />
|
||||
</svg>
|
||||
<SvgIcon className={'chat-dot'} />
|
||||
新聊天
|
||||
</button>
|
||||
) : (
|
||||
<button className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
height='14'
|
||||
width='14'
|
||||
viewBox='0 0 512 512'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z' />
|
||||
</svg>
|
||||
<SvgIcon className={'key'} />
|
||||
申请权限
|
||||
</button>
|
||||
)}
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
gap: 8px;
|
||||
border-radius: 4px;
|
||||
color: $dark;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user