{{ $t('socialnetwork.vocab.courses.languageAssistantEyebrow') }}
@@ -550,14 +578,15 @@ export default {
try {
const raw = localStorage.getItem(key);
const parsed = raw ? JSON.parse(raw) : {};
- const values = parsed && typeof parsed === 'object' ? Object.values(parsed) : [];
+ const values = parsed && typeof parsed === 'object' ? Object.entries(parsed) : [];
this.hardVocabList = values
- .map((entry, idx) => {
+ .map(([entryKey, entry], idx) => {
const learning = String(entry?.learning || '').trim();
const reference = String(entry?.reference || '').trim();
if (!learning || !reference) return null;
return {
id: `hard-${idx}-${learning}-${reference}`,
+ key: String(entryKey || ''),
learning,
reference
};
@@ -567,6 +596,21 @@ export default {
this.hardVocabList = [];
}
},
+ removeHardVocabEntry(entryKey) {
+ const key = this.hardStorageKey();
+ if (!key || !entryKey) return;
+ try {
+ const raw = localStorage.getItem(key);
+ const parsed = raw ? JSON.parse(raw) : {};
+ if (!parsed || typeof parsed !== 'object' || !parsed[entryKey]) return;
+ const next = { ...parsed };
+ delete next[entryKey];
+ localStorage.setItem(key, JSON.stringify(next));
+ this.refreshHardVocabList();
+ } catch (_) {
+ // ignore storage parse/write errors
+ }
+ },
handleWindowFocus() {
this.refreshHardVocabList();
},
@@ -1040,6 +1084,48 @@ export default {
flex-shrink: 0;
}
+.course-hard-list {
+ padding: 16px 18px;
+}
+
+.course-hard-list__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 12px;
+}
+
+.course-hard-list__header h3 {
+ margin: 0;
+ font-size: 1rem;
+}
+
+.course-hard-list__items {
+ display: grid;
+ gap: 8px;
+}
+
+.course-hard-list__item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ padding: 10px 12px;
+ border: 1px solid var(--color-border, #e1dbd4);
+ border-radius: 10px;
+ background: rgba(255, 255, 255, 0.72);
+}
+
+.course-hard-list__texts {
+ display: grid;
+ gap: 2px;
+}
+
+.course-hard-list__texts span {
+ color: var(--color-text-secondary, #6b625b);
+}
+
.course-assistant {
display: flex;
align-items: flex-start;