From 82dc7318fc519afb391bb723d48dcc0c6cc0142d Mon Sep 17 00:00:00 2001
From: zouhang <1102639563@qq.com>
Date: Sun, 13 Oct 2024 18:52:12 +0800
Subject: [PATCH] chore: support prefix

---
 entrypoints/injected/components/Code.tsx   | 14 +++++++++--
 entrypoints/injected/components/Header.tsx | 28 ++++++++++++++++++++--
 entrypoints/injected/store/index.ts        |  2 ++
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/entrypoints/injected/components/Code.tsx b/entrypoints/injected/components/Code.tsx
index 4667652..e788572 100644
--- a/entrypoints/injected/components/Code.tsx
+++ b/entrypoints/injected/components/Code.tsx
@@ -6,7 +6,14 @@ import { toTailwindcss } from 'transform-to-tailwindcss-core'
 import { toUnocssClass } from 'transform-to-unocss-core'
 import { useCopyToClipboard } from 'usehooks-ts'
 
-import { cssEngine, cssUnit, currentSelection, expandAtomic, expandCode } from '@/entrypoints/injected/store'
+import {
+  cssEngine,
+  cssUnit,
+  currentSelection,
+  expandAtomic,
+  expandCode,
+  prefixAtom,
+} from '@/entrypoints/injected/store'
 import { cn } from '@/entrypoints/utils/cn'
 
 export const CodeArea = memo((props: { minimized?: boolean }) => {
@@ -14,6 +21,7 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
   const unit = useAtomValue(cssUnit)
   const [expand, setExpand] = useAtom(expandCode)
   const [atomicExpand, setAtomicExpand] = useAtom(expandAtomic)
+  const prefix = useAtomValue(prefixAtom)
   const isRem = useMemo(() => unit === 'rem', [unit])
 
   const [name, setName] = useState('')
@@ -41,6 +49,7 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
             .trim()}`,
       )
       .map((i) => (engine === 'unocss' ? toUnocssClass(i, isRem)[0] : toTailwindcss(i, isRem)))
+      .map((i) => `${prefix}${i}`)
       .join(' ')
       .replace(/border-(\d+\.\d+|\d+)/g, (_, $1) => `border-${Number($1) * 4}`)
       .replace(/(border-[xylrtb]-)(\d+\.\d+|\d+)/g, (_, $1, $2) => `${$1}${Number($2) * 4}`)
@@ -59,6 +68,7 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
       )
       .map((i) => (engine === 'unocss' ? toUnocssClass(i, isRem)[0] : toTailwindcss(i, isRem)))
       .filter((i) => ['lh-normal', 'font-not-italic', 'bg-[url(]'].every((item) => !i?.startsWith(item)))
+      .map((i) => `${prefix}${i}`)
       .join(' ')
       .replace(/border-(\d+\.\d+|\d+)/g, (_, $1) => `border-${Number($1) * 4}`)
       .replace(/(border-[xylrtb]-)(\d+\.\d+|\d+)/g, (_, $1, $2) => `${$1}${Number($2) * 4}`)
@@ -86,7 +96,7 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
         type: 'css',
       },
     ])
-  }, [engine, isRem, setCurrentSelection])
+  }, [engine, isRem, prefix, setCurrentSelection])
 
   useEffect(() => {
     handleSelectionChange()
diff --git a/entrypoints/injected/components/Header.tsx b/entrypoints/injected/components/Header.tsx
index 7e7f6c9..9ced182 100644
--- a/entrypoints/injected/components/Header.tsx
+++ b/entrypoints/injected/components/Header.tsx
@@ -8,7 +8,15 @@ import Logo from '@/entrypoints/assets/fubukicss.svg'
 import { cn } from '@/entrypoints/utils/cn'
 import { toggleAltPress, toggleMetaPress } from '@/entrypoints/utils/key'
 
-import { cssEngine, cssUnit, exportExt, exportScale, keepAltKeyPressing, keepMetaKeyPressing } from '../store'
+import {
+  cssEngine,
+  cssUnit,
+  exportExt,
+  exportScale,
+  keepAltKeyPressing,
+  keepMetaKeyPressing,
+  prefixAtom,
+} from '../store'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -37,6 +45,7 @@ const Header = forwardRef(function ({ minimized, onToggleSize, startDrag }: Prop
   const [scale, setScale] = useAtom(exportScale)
   const [altPressing, setAltPressing] = useAtom(keepAltKeyPressing)
   const [metaPressing, setMetaPressing] = useAtom(keepMetaKeyPressing)
+  const [prefix, setPrefix] = useAtom(prefixAtom)
 
   useEffect(() => {
     toggleAltPress(altPressing)
@@ -121,7 +130,7 @@ const Header = forwardRef(function ({ minimized, onToggleSize, startDrag }: Prop
                   className="mr-1.5 text-$color-text-secondary hover:text-$color-text cursor-pointer"
                 />
               </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56 z-1001 border-1 border-solid border-border">
+              <DropdownMenuContent className="w-56 z-1001 border-1 border-solid border-border font-['Inter']">
                 <DropdownMenuLabel className="cursor-default">Settings</DropdownMenuLabel>
 
                 <DropdownMenuSeparator />
@@ -235,6 +244,21 @@ const Header = forwardRef(function ({ minimized, onToggleSize, startDrag }: Prop
                     />
                   </DropdownMenuItem>
                 </DropdownMenuGroup>
+
+                <DropdownMenuSeparator />
+
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    Prefix
+                    <input
+                      type="text"
+                      className="ml-auto w-16 px-2 py-0.5 text-xs border border-$color-border border-solid rounded bg-$color-bg focus:outline-none focus:ring-1 focus:ring-$color-bg-brand"
+                      value={prefix}
+                      onChange={(e) => setPrefix(e.target.value)}
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
               </DropdownMenuContent>
             </DropdownMenu>
           </>
diff --git a/entrypoints/injected/store/index.ts b/entrypoints/injected/store/index.ts
index 737b224..0dd32d4 100644
--- a/entrypoints/injected/store/index.ts
+++ b/entrypoints/injected/store/index.ts
@@ -20,3 +20,5 @@ export const expandAtomic = atomWithStorage<boolean>('fubuki_expand_atomic', tru
 export const keepAltKeyPressing = atomWithStorage<boolean>('fubuki_keep_alt_key_pressing', false)
 
 export const keepMetaKeyPressing = atomWithStorage<boolean>('fubuki_keep_meta_key_pressing', false)
+
+export const prefixAtom = atomWithStorage<string>('fubuki_prefix', '')