Add files via upload

Author: linyunjun

app.js

@@ -2060,7 +2060,7 @@ function sortedTemplatePatterns() {
   const mode = normalizePatternSortMode(state.settings.patternSort);
   return templatePatterns().slice().sort((a, b) => {
     if (mode === "pinned-desc") return Number(b.pinned) - Number(a.pinned) || compareDate(a.updatedAt, b.updatedAt) || compareText(a.name, b.name);
-    if (mode === "pinned-asc") return Number(a.pinned) - Number(b.pinned) || compareDate(a.updatedAt, b.updatedAt) || compareText(a.name, b.name);
+    if (mode === "pinned-asc") return Number(b.pinned) - Number(a.pinned) || compareDate(a.updatedAt, b.updatedAt, "asc") || compareText(a.name, b.name);
     const pinOrder = Number(b.pinned) - Number(a.pinned);
     if (pinOrder) return pinOrder;
     if (mode === "updated-desc") return compareDate(a.updatedAt, b.updatedAt) || compareText(a.name, b.name);
@@ -2086,6 +2086,15 @@ function templatePatterns() {
   return state.patterns.filter((pattern) => !pattern.isProjectCopy);
 }
 
+function insertTemplatePattern(pattern) {
+  const pinnedIndexes = state.patterns
+    .map((item, index) => ({ item, index }))
+    .filter(({ item }) => !item.isProjectCopy && item.pinned)
+    .map(({ index }) => index);
+  const insertAt = pinnedIndexes.length ? Math.max(...pinnedIndexes) + 1 : 0;
+  state.patterns.splice(insertAt, 0, pattern);
+}
+
 function selectedProjectsForAction() {
   const ids = selectedProjectIds.size ? selectedProjectIds : new Set([actionProjectId].filter(Boolean));
   return state.projects.filter((project) => ids.has(project.id));
@@ -2315,7 +2324,7 @@ function importPatternPackage(payload) {
   normalized.importKey = importKey;
   delete normalized.isProjectCopy;
   delete normalized.sourcePatternId;
-  state.patterns.unshift(normalized);
+  insertTemplatePattern(normalized);
   selectedPatternId = normalized.id;
   saveState();
   return normalized;
@@ -4588,7 +4597,7 @@ els.newPatternBtn.addEventListener("click", () => {
       parts: [{ id: crypto.randomUUID(), name: "部分 1", notes: "", segments: [{ id: crypto.randomUUID(), repeat: 1, note: "", items: [] }] }],
       groups: []
   };
-  state.patterns.unshift(pattern);
+  insertTemplatePattern(pattern);
   selectedPatternId = pattern.id;
   switchView("patternEdit");
 });
@@ -4717,7 +4726,7 @@ els.convertTextPatternBtn.addEventListener("click", () => {
     parts: result.parts,
     groups: []
   };
-  state.patterns.unshift(pattern);
+  insertTemplatePattern(pattern);
   selectedPatternId = pattern.id;
   if (result.unparsed.length) {
     els.textPatternUnparsed.classList.remove("hidden");

service-worker.js

@@ -1,4 +1,4 @@
-const VERSION = "123";
+const VERSION = "125";
 const CACHE_NAME = `free-knit-workbench-v${VERSION}`;
 const ASSETS = [
   "./",

styles.css

@@ -310,6 +310,7 @@ textarea {
   height: 84px;
   border-radius: 20px;
   object-fit: cover;
+  object-position: center center;
 }
 .folder-collage {
   display: grid;
@@ -326,6 +327,7 @@ textarea {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center center;
 }
 .folder-collage img:first-child:last-child {
   grid-column: 1 / -1;
@@ -416,7 +418,7 @@ textarea {
   font-weight: var(--weight-bold);
 }
 .photo-picker.large { width: 118px; height: 118px; border-radius: 26px; }
-.photo-picker img { display: none; width: 100%; height: 100%; object-fit: cover; }
+.photo-picker img { display: none; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
 .photo-picker.has-photo img { display: block; }
 .photo-picker.has-photo span { display: none; }
 .detail-head h2 { margin: 8px 0 14px; font-size: 34px; }
@@ -669,7 +671,7 @@ textarea {
   border-radius: 18px;
   padding: 0;
 }
-.image-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.image-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
 .image-thumb span {
   position: absolute;
   top: 4px;
@@ -980,6 +982,13 @@ textarea {
   height: 68px;
   border-radius: 16px;
   object-fit: cover;
+  object-position: center center;
+}
+
+.brand-card-image-cell img,
+.color-card-choice img,
+.brand-card-color-row img {
+  object-position: center center;
 }
 
 .stitch-edit-card {