feat: support copy conf path

Author: drl990114

apps/desktop/src/components/CopyBtn/CopyBtn.tsx

@@ -0,0 +1,47 @@
+import classNames from 'classnames'
+import styled from 'styled-components'
+import type { FC } from 'react'
+import { useCallback, useState } from 'react'
+import { writeText } from '@tauri-apps/api/clipboard'
+
+type CopyBtnProps = {
+  text: string
+}
+
+type ContainerProps = {
+  checking: boolean
+}
+
+const Container = styled.span<ContainerProps>`
+  padding: 4px;
+  cursor: pointer;
+  color: ${(props) => (props.checking ? props.theme.successColor : props.theme.primaryFontColor)};
+`
+
+export const CopyBtn: FC<CopyBtnProps> = (props) => {
+  const { text } = props
+  const [checking, setChecking] = useState(false)
+
+  const copy = useCallback(async () => {
+    if (checking) return
+
+    setChecking(true)
+
+    await writeText(text)
+
+    setTimeout(() => {
+      setChecking(false)
+    }, 3000)
+  }, [checking, text])
+
+  const iconCls = classNames({
+    'ri-file-copy-line': !checking,
+    'ri-check-fill': checking,
+  })
+
+  return (
+    <Container checking={checking} onClick={copy}>
+      <i className={iconCls}></i>
+    </Container>
+  )
+}

apps/desktop/src/components/CopyBtn/index.ts

@@ -0,0 +1 @@
+export * from './CopyBtn'

apps/desktop/src/hooks/useTheme.ts

@@ -17,6 +17,7 @@ const lightThemeColors = {
   bgColor: '#fdfdfd',
   warnColor: '#dc2626',
   tipsBgColor: '#f6f7f9',
+  successColor: '#00c853',
   boxShadowColor: 'rgba(0, 0, 0, 0.08)',
   scrollbarThumbColor: '#C4C4C4 ',
   scrollbarTrackColor: '#e4e4e7',
@@ -30,6 +31,7 @@ const darkThemeColors = {
   bgColor: '#11191f',
   warnColor: '#dc2626',
   tipsBgColor: '#0e1419',
+  successColor: '#00c853',
   boxShadowColor: 'rgba(255, 255, 255, 0.04)',
   scrollbarThumbColor: '#2C3C52',
   scrollbarTrackColor: '#0e1419',

apps/desktop/src/router/Setting/index.tsx

@@ -8,6 +8,7 @@ import Logo from '@/assets/logo.svg'
 import { invoke } from '@tauri-apps/api'
 import TitleBar from '@/components/TitleBar'
 import { KeyboardTable } from './KeyboardTable'
+import { CopyBtn } from '@/components/CopyBtn'
 
 export interface DialogTitleProps {
   children?: ReactNode
@@ -87,7 +88,7 @@ function Setting() {
         </div>
         <div id="detail">
           <div className="conf-path">
-            <small>Path: {confPath}</small>
+            <small>Path: {confPath}  <CopyBtn text={confPath}/></small>
           </div>
           {renderCurrentSettingData()}
         </div>

apps/desktop/src/router/Setting/styles.ts

@@ -2,8 +2,9 @@ import { TITLEBAR_HEIGHT } from '@/constants/styled'
 import styled from 'styled-components'
 
 export const Container = styled.div`
-  height: calc(100vh - ${TITLEBAR_HEIGHT});
   display: flex;
+  height: calc(100vh - ${TITLEBAR_HEIGHT});
+  margin-top: ${TITLEBAR_HEIGHT};
 
   #sidebar {
     width: 250px;