mirror of https://github.com/usememos/memos
Merge cfdc67e7d6 into 8d8cc83fd8
Mo xi
3 weeks ago
committed by
GitHub
commit
a5ed2ce3c6
@ -0,0 +1,213 @@
|
|||||||
|
import { ExternalLinkIcon, Settings2Icon } from "lucide-react";
|
||||||
|
import { useState, useEffect, useRef } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { useTranslate } from "@/utils/i18n";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
value: string;
|
||||||
|
onValueChange: (value: string) => void;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 内置地图模板配置
|
||||||
|
const BUILTIN_TEMPLATES = {
|
||||||
|
openstreetmap: {
|
||||||
|
name: "OpenStreetMap",
|
||||||
|
url: "",
|
||||||
|
wiki: "https://wiki.openstreetmap.org/wiki/Tiles",
|
||||||
|
requiresToken: false,
|
||||||
|
},
|
||||||
|
cartodb: {
|
||||||
|
name: "CartoDB",
|
||||||
|
url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
|
||||||
|
wiki: "https://carto.com/help/building-maps/basemap-list/",
|
||||||
|
requiresToken: false,
|
||||||
|
},
|
||||||
|
google: {
|
||||||
|
name: "Google Maps",
|
||||||
|
url: "https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key={your_token}",
|
||||||
|
wiki: "https://developers.google.com/maps/documentation/tile/overview",
|
||||||
|
requiresToken: true,
|
||||||
|
},
|
||||||
|
apple: {
|
||||||
|
name: "Apple Maps",
|
||||||
|
url: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||||
|
wiki: "https://developer.apple.com/maps/",
|
||||||
|
requiresToken: true,
|
||||||
|
},
|
||||||
|
bing: {
|
||||||
|
name: "Bing Maps",
|
||||||
|
url: "https://ecn.t3.tiles.virtualearth.net/tiles/a{q}.jpeg?g=1&key={your_token}",
|
||||||
|
wiki: "https://docs.microsoft.com/en-us/bingmaps/rest-services/imagery/get-imagery-metadata",
|
||||||
|
requiresToken: true,
|
||||||
|
},
|
||||||
|
mapbox: {
|
||||||
|
name: "Mapbox",
|
||||||
|
url: "https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={your_token}",
|
||||||
|
wiki: "https://docs.mapbox.com/api/maps/",
|
||||||
|
requiresToken: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const MapTileLayerProviderSelect = (props: Props) => {
|
||||||
|
const { value, onValueChange, className } = props;
|
||||||
|
const [isCustomDialogOpen, setIsCustomDialogOpen] = useState(false);
|
||||||
|
const [customUrl, setCustomUrl] = useState("");
|
||||||
|
const [selectedTemplate, setSelectedTemplate] = useState<string>("");
|
||||||
|
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
const t = useTranslate();
|
||||||
|
|
||||||
|
const handleEditClick = () => {
|
||||||
|
setIsCustomDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCustomUrlSubmit = () => {
|
||||||
|
onValueChange(customUrl.trim());
|
||||||
|
setIsCustomDialogOpen(false);
|
||||||
|
setCustomUrl("");
|
||||||
|
setSelectedTemplate("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTemplateSelect = (templateKey: string) => {
|
||||||
|
const template = BUILTIN_TEMPLATES[templateKey as keyof typeof BUILTIN_TEMPLATES];
|
||||||
|
if (template) {
|
||||||
|
setCustomUrl(template.url);
|
||||||
|
setSelectedTemplate(templateKey);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUrlChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
|
const newValue = e.target.value;
|
||||||
|
setCustomUrl(newValue);
|
||||||
|
|
||||||
|
// If user manually modifies the URL, clear the template selection
|
||||||
|
if (selectedTemplate) {
|
||||||
|
const template = BUILTIN_TEMPLATES[selectedTemplate as keyof typeof BUILTIN_TEMPLATES];
|
||||||
|
if (template && newValue !== template.url) {
|
||||||
|
setSelectedTemplate("");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auto-resize input based on content
|
||||||
|
useEffect(() => {
|
||||||
|
if (inputRef.current) {
|
||||||
|
const input = inputRef.current;
|
||||||
|
input.style.height = "auto";
|
||||||
|
input.style.height = `${input.scrollHeight}px`;
|
||||||
|
}
|
||||||
|
}, [customUrl]);
|
||||||
|
|
||||||
|
const getDisplayName = () => {
|
||||||
|
if (value === "") return "OpenStreetMap";
|
||||||
|
if (Object.keys(BUILTIN_TEMPLATES).includes(value)) {
|
||||||
|
const template = BUILTIN_TEMPLATES[value as keyof typeof BUILTIN_TEMPLATES];
|
||||||
|
return template ? template.name : "Custom";
|
||||||
|
}
|
||||||
|
return "Custom";
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button variant="outline" onClick={handleEditClick} className={className || "min-w-fit justify-between"}>
|
||||||
|
<span>{getDisplayName()}</span>
|
||||||
|
<Settings2Icon className="h-4 w-4 ml-2" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Dialog open={isCustomDialogOpen} onOpenChange={setIsCustomDialogOpen}>
|
||||||
|
<DialogContent className="max-w-3xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{t("setting.preference-section.map-config.title")}</DialogTitle>
|
||||||
|
<DialogDescription>{t("setting.preference-section.map-config.description")}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Label>{t("setting.preference-section.map-config.quick-templates")}</Label>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
{Object.entries(BUILTIN_TEMPLATES).map(([key, template]) => (
|
||||||
|
<Button
|
||||||
|
key={key}
|
||||||
|
variant={selectedTemplate === key ? "default" : "outline"}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleTemplateSelect(key)}
|
||||||
|
className="justify-start text-left h-auto py-3 px-3"
|
||||||
|
>
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<div className="font-medium">{template.name}</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
window.open(template.wiki, "_blank");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ExternalLinkIcon className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{template.requiresToken && (
|
||||||
|
<div className="text-xs text-orange-600 mt-1">{t("setting.preference-section.map-config.requires-api-key")}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Label htmlFor="custom-url">{t("setting.preference-section.map-config.tile-server-url")}</Label>
|
||||||
|
<Textarea
|
||||||
|
id="custom-url"
|
||||||
|
placeholder="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||||
|
value={customUrl}
|
||||||
|
onChange={handleUrlChange}
|
||||||
|
className="mt-2 min-h-[40px] resize-none"
|
||||||
|
ref={inputRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-muted p-3 rounded-md">
|
||||||
|
<h4 className="font-medium mb-2">{t("setting.preference-section.map-config.parameters")}</h4>
|
||||||
|
<ul className="text-sm space-y-1 text-muted-foreground">
|
||||||
|
<li>
|
||||||
|
<code className="bg-background px-1 rounded">{"{z}"}</code> {t("setting.preference-section.map-config.zoom-level")}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code className="bg-background px-1 rounded">{"{x}"}</code> {t("setting.preference-section.map-config.tile-x-coordinate")}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code className="bg-background px-1 rounded">{"{y}"}</code> {t("setting.preference-section.map-config.tile-y-coordinate")}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code className="bg-background px-1 rounded">{"{s}"}</code> {t("setting.preference-section.map-config.subdomain")}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code className="bg-background px-1 rounded">{"{r}"}</code> {t("setting.preference-section.map-config.retina-resolution")}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code className="bg-background px-1 rounded">{"{your_token}"}</code>{" "}
|
||||||
|
{t("setting.preference-section.map-config.api-token-placeholder")}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setIsCustomDialogOpen(false)}>
|
||||||
|
{t("common.cancel")}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleCustomUrlSubmit}>{t("setting.preference-section.map-config.apply")}</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MapTileLayerProviderSelect;
|
||||||
Loading…
Reference in New Issue