diff --git a/README.md b/README.md index be6bdf1..f96409e 100644 --- a/README.md +++ b/README.md @@ -26,8 +26,8 @@ https://github.com/027xiguapi/code-box 1. 安装地址： - [前往 火狐 扩展商店](https://addons.mozilla.org/zh-CN/firefox/addon/code-box/) - - [前往 Edge扩展商店](#) - - [前往 Chrome扩展商店](#) + - [前往 Edge 扩展商店](https://microsoftedge.microsoft.com/addons/detail/code-box/cfpdbfmncaampihkmejogihjkenkonbn) + - [前往 Chrome 扩展商店](#) ### 安装方式三：源码安装 @@ -96,4 +96,8 @@ https://github.com/027xiguapi/code-box ## 参考 1. [copy-csdn](https://github.com/openHacking/copy-csdn) -2. [plasmo](https://github.com/PlasmoHQ/plasmo) \ No newline at end of file +2. [plasmo](https://github.com/PlasmoHQ/plasmo) + +## 隐私政策 + +[网面](https://027xiguapi.github.io/code-box/privacy-policy.html) \ No newline at end of file diff --git a/component/content.tsx b/component/content.tsx index 19bf788..68249a8 100644 --- a/component/content.tsx +++ b/component/content.tsx @@ -1,19 +1,67 @@ +import { useStorage } from "@plasmohq/storage/dist/hook" + import Cnblogs from "./cnblogs" import Csdn from "./csdn" import Custom from "./custom" import Jb51 from "./jb51" import Jianshu from "./jianshu" import Zhihu from "./zhihu" +import React from "react" + +const itemMap = { + csdn: , + zhihu: , + jianshu: , + jb51: , + cnblogs: , + custom: , +} export default function Content() { + const [items] = useStorage("app-items", [ + { + id: "1", + value: "csdn", + label: "csdn", + isShow: true, + }, + { + id: "2", + value: "zhihu", + label: "知乎", + isShow: true, + }, + { + id: "3", + value: "jianshu", + label: "简书", + isShow: true, + }, + { + id: "4", + value: "jb51", + label: "脚本之家", + isShow: true, + }, + { + id: "5", + value: "cnblogs", + label: "博客园", + isShow: true, + }, + { + id: "6", + value: "custom", + label: "自定义", + isShow: true, + } + ]) + return ( <> - - - - - - + {items.map((item, index) => ( + item.isShow ? itemMap[item.value] : <> + ))} ) } diff --git a/component/sortableItem.css b/component/sortableItem.css new file mode 100644 index 0000000..d5a54af --- /dev/null +++ b/component/sortableItem.css @@ -0,0 +1,50 @@ +.sortableItem { + display: flex; + justify-content: space-between; + box-shadow: 0 0 0 calc(1px / 1) rgba(63, 63, 68, 0.05), 0 1px calc(3px / 1) 0 rgba(34, 33, 81, 0.15); + width: 280px; + margin-bottom: 10px; + padding: 5px 8px; + border-radius: 4px; +} + +.sortableItem fieldset { + width: 180px; +} + +.sortableItem .isShow-toggle { + display: flex; + width: 24px; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.sortableItem .draggable-handle { + display: flex; + width: 12px; + padding: 15px; + align-items: center; + justify-content: center; + flex: 0 0 auto; + touch-action: none; + cursor: pointer; + border-radius: 5px; + border: none; + outline: none; + appearance: none; + background-color: transparent; + -webkit-tap-highlight-color: transparent; +} + +.sortableItem .draggable-handle svg { + fill: #6f7b88; + flex: 0 0 auto; + margin: auto; + height: 100%; + overflow: visible; +} + +.sortableItem .draggable-handle:hover { + background-color: rgba(0, 0, 0, 0.05); +} \ No newline at end of file diff --git a/component/sortableItem.tsx b/component/sortableItem.tsx new file mode 100644 index 0000000..4aea556 --- /dev/null +++ b/component/sortableItem.tsx @@ -0,0 +1,70 @@ +import { useSortable } from "@dnd-kit/sortable" +import { CSS } from "@dnd-kit/utilities" +import React from "react" + +import Csdn from "~component/csdn" +import Zhihu from "~component/zhihu" +import Jianshu from "~component/jianshu" +import Jb51 from "~component/jb51" +import Cnblogs from "~component/cnblogs" +import Custom from "~component/custom" + +import "./sortableItem.css" + +const itemMap = { + csdn: , + zhihu: , + jianshu: , + jb51: , + cnblogs: , + custom: +} + +export default function SortableItem(props) { + const { item, index, onToggleShow } = props + const { attributes, listeners, setNodeRef, transform, transition } = + useSortable({ id: item.id }) + + const style = { + transform: CSS.Transform.toString(transform), + transition + } + + + function handleToggleShow() { + onToggleShow({ isShow: item.isShow, index: index }) + } + + return ( +
+ {itemMap[item.value]} + + {item.isShow ? + + + + + + : + + + + + } + + +
+ ) +} diff --git a/options.tsx b/options.tsx index 0d36fe2..ac1f4a4 100644 --- a/options.tsx +++ b/options.tsx @@ -1,8 +1,91 @@ -import Content from "./component/content" +import { + closestCenter, + DndContext, + KeyboardSensor, + PointerSensor, + useSensor, + useSensors +} from "@dnd-kit/core" +import { + arrayMove, + SortableContext, + sortableKeyboardCoordinates, + verticalListSortingStrategy +} from "@dnd-kit/sortable" +import { useStorage } from "@plasmohq/storage/dist/hook" +import React, { useState } from "react" + +import SortableItem from "~component/sortableItem" import "./index.css" export default function IndexOptions() { + const [items, setItems] = useStorage("app-items", [ + { + id: "1", + value: "csdn", + label: "csdn", + isShow: true, + }, + { + id: "2", + value: "zhihu", + label: "知乎", + isShow: true, + }, + { + id: "3", + value: "jianshu", + label: "简书", + isShow: true, + }, + { + id: "4", + value: "jb51", + label: "脚本之家", + isShow: true, + }, + { + id: "5", + value: "cnblogs", + label: "博客园", + isShow: true, + }, + { + id: "6", + value: "custom", + label: "自定义", + isShow: true, + } + ]) + + const sensors = useSensors( + useSensor(PointerSensor), + useSensor(KeyboardSensor, { + coordinateGetter: sortableKeyboardCoordinates + }) + ) + + function handleDragEnd(event) { + const { active, over } = event + + if (active.id !== over.id) { + setItems((data) => { + const oldIndex = data.findIndex((item) => item.id === active.id) + const newIndex = data.findIndex((item) => item.id === over.id) + + return arrayMove(data, oldIndex, newIndex) + }) + } + } + + function handleToggleShow(event) { + const { isShow, index } = event + + items[index].isShow = !isShow + setItems([...items]) + } + return (
@@ -10,16 +93,36 @@ export default function IndexOptions() {

更方便操作网页代码

- + + + {items.map((item, index) => ( + + ))} + +
) diff --git a/package.json b/package.json index 98e1c48..bcabebc 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "code-box", "displayName": "codebox-免登录一键复制代码(CSDN/知乎/脚本之家/博客园)", - "version": "0.1.0", + "version": "0.2.0", "description": "本浏览器插件可以用于CSDN/知乎/脚本之家/博客园等网站,实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式.", "author": "027xiguapi. <458813868@qq.com>", "scripts": { @@ -13,6 +13,9 @@ "clean": "rimraf build" }, "dependencies": { + "@dnd-kit/core": "^6.1.0", + "@dnd-kit/sortable": "^8.0.0", + "@dnd-kit/utilities": "^3.2.2", "@plasmohq/storage": "^1.11.0", "plasmo": "0.88.0", "react": "18.2.0", @@ -36,6 +39,8 @@ "host_permissions": [ "https://*/*" ], - "omnibox": { "keyword": "copy" } + "omnibox": { + "keyword": "copy" + } } }