willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-widgets/src/components/EnglishCards/Practice.tsx

@@ -0,0 +1,91 @@
+import classNames from "classnames";
+import type {
+  EnglishCardItem,
+  PracticeAnswerState,
+} from "#widgets/components/EnglishCards/types";
+
+export function EnglishCardPractice(props: {
+  answer: string;
+  item: EnglishCardItem;
+  result: PracticeAnswerState;
+  onAnswerChange: (value: string) => void;
+  onCheck: () => void;
+}) {
+  const { answer, item, result, onAnswerChange, onCheck } = props;
+
+  return (
+    <div className="willa-english-card-practice">
+      <label className="willa-english-card-practice-label" htmlFor={item.word}>
+        默写中文翻译
+      </label>
+      <div className="willa-english-card-practice-row">
+        <input
+          id={item.word}
+          className="willa-english-card-practice-input"
+          type="text"
+          value={answer}
+          placeholder="输入一个或多个中文释义"
+          onChange={(event) => onAnswerChange(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              onCheck();
+            }
+          }}
+        />
+        <button
+          type="button"
+          className="willa-english-card-practice-check"
+          onClick={onCheck}
+        >
+          校验
+        </button>
+      </div>
+      <div
+        className={classNames(
+          "willa-english-card-practice-result",
+          `willa-english-card-practice-result--${result}`,
+        )}
+      >
+        {result === "correct"
+          ? "正确"
+          : result === "incorrect"
+            ? "不完全匹配，可以显示答案对照。"
+            : "先输入中文翻译，再校验。"}
+      </div>
+    </div>
+  );
+}
+
+export function isPracticeAnswerCorrect(answer: string, item: EnglishCardItem) {
+  const answerText = normalizePracticeText(answer);
+  if (!answerText) return false;
+
+  return getPracticeTranslationTexts(item).some((translation) => {
+    const translationText = normalizePracticeText(translation);
+
+    return (
+      Boolean(translationText) &&
+      (answerText.includes(translationText) ||
+        translationText.includes(answerText))
+    );
+  });
+}
+
+const getPracticeTranslationTexts = (item: EnglishCardItem) => {
+  const translations = Array.isArray(item.translation)
+    ? item.translation
+    : [item.translation];
+
+  return translations.filter(
+    (translation): translation is string => typeof translation === "string",
+  );
+};
+
+const normalizePracticeText = (value: string) => {
+  return value
+    .toLowerCase()
+    .replace(/[，,、；;。.\s]/g, "")
+    .trim();
+};
+
+EnglishCardPractice.displayName = "EnglishCardPractice";

package/packages/willa-widgets/src/components/EnglishCards/Resources.tsx

@@ -0,0 +1,91 @@
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+
+import type {
+  EnglishCardItem,
+  EnglishCardResource,
+} from "#widgets/components/EnglishCards/types";
+
+export function createEnglishCardResources(
+  item: EnglishCardItem,
+): Array<EnglishCardResource> {
+  const word = item.word.trim();
+  const encodedWord = encodeURIComponent(word);
+  const defaultResources: Array<EnglishCardResource> = [
+    {
+      label: "Oxford Learner's",
+      href: createOxfordWebUrl(word),
+      title: "Oxford Learner’s Dictionaries",
+      description: "查看更完整的英文释义、发音、搭配和例句。",
+    },
+    {
+      label: "词源故事",
+      href: `https://www.etymonline.com/word/${encodedWord}`,
+      title: "Online Etymology Dictionary",
+      description: "查看这个词的来源、历史演变和早期用法。",
+    },
+    {
+      label: "相关文章",
+      href: `https://www.google.com/search?q=${encodedWord}+meaning+example+article`,
+      title: "搜索相关文章",
+      description: "搜索包含这个词的解释、用法文章和学习材料。",
+    },
+    {
+      label: "帖子讨论",
+      href: `https://www.google.com/search?q=site%3Areddit.com+${encodedWord}+meaning+usage`,
+      title: "搜索社区帖子",
+      description: "搜索 Reddit 等社区里关于这个词的真实讨论和使用场景。",
+    },
+  ];
+
+  return item.resources?.length ? item.resources : defaultResources;
+}
+
+export function EnglishCardResourceLink(props: {
+  resource: EnglishCardResource;
+}) {
+  const { resource } = props;
+
+  return (
+    <span className="willa-english-card-resource">
+      <a
+        href={resource.href}
+        className="willa-english-card-link"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <ExternalLinkIcon />
+        {resource.label}
+      </a>
+      <span className="willa-english-card-resource-card" role="tooltip">
+        <span className="willa-english-card-resource-title">
+          {resource.title ?? resource.label}
+        </span>
+        {resource.description ? (
+          <span className="willa-english-card-resource-description">
+            {resource.description}
+          </span>
+        ) : null}
+        <span className="willa-english-card-resource-url">
+          {formatResourceUrl(resource.href)}
+        </span>
+      </span>
+    </span>
+  );
+}
+
+const createOxfordWebUrl = (word: string) => {
+  return `https://www.oxfordlearnersdictionaries.com/definition/english/${encodeURIComponent(
+    word,
+  )}`;
+};
+
+const formatResourceUrl = (href: string) => {
+  try {
+    const url = new URL(href);
+    return url.hostname.replace(/^www\./, "");
+  } catch {
+    return href;
+  }
+};
+
+EnglishCardResourceLink.displayName = "EnglishCardResourceLink";

package/packages/willa-widgets/src/components/EnglishCards/index.css

@@ -0,0 +1,531 @@
+.willa-english-cards {
+  margin: 1.8rem 0;
+  padding: 1rem;
+  border: 1px solid var(--willa-english-cards-border);
+  border-radius: 12px;
+  background: var(--willa-english-cards-bg);
+  box-shadow: var(--willa-english-cards-shadow);
+}
+
+.willa-english-cards-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.willa-english-cards-title {
+  margin: 0;
+  color: var(--willa-text-strong);
+  font-family: var(--willa-title-font);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.willa-english-cards-summary {
+  margin: 0.18rem 0 0;
+  color: var(--willa-text-faint);
+  font-size: 0.82rem;
+  line-height: 1.45;
+  text-shadow: none;
+}
+
+.willa-english-cards-mode,
+.willa-english-card-reveal,
+.willa-english-card-speak,
+.willa-english-card-collapse {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.38rem;
+  border: 1px solid var(--willa-english-control-border);
+  border-radius: 999px;
+  background: var(--willa-english-control-bg);
+  color: var(--willa-text-strong);
+  font-family: inherit;
+  font-size: 0.82rem;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease;
+}
+
+.willa-english-cards-mode {
+  min-height: 2rem;
+  padding: 0 0.74rem;
+}
+
+.willa-english-card-reveal,
+.willa-english-card-speak {
+  min-height: 1.84rem;
+  padding: 0 0.64rem;
+  white-space: nowrap;
+}
+
+.willa-english-card-collapse {
+  width: 1.84rem;
+  height: 1.84rem;
+  padding: 0;
+}
+
+.willa-english-card-speak {
+  min-height: 1.45rem;
+  padding: 0 0.46rem;
+  font-family: inherit;
+  font-size: 0.74rem;
+}
+
+.willa-english-cards-mode:hover,
+.willa-english-card-reveal:hover,
+.willa-english-card-speak:hover,
+.willa-english-card-collapse:hover {
+  border-color: var(--willa-english-control-border-hover);
+  background: var(--willa-english-control-bg-hover);
+  color: var(--willa-english-control-color-hover);
+}
+
+.willa-english-cards-mode svg,
+.willa-english-card-reveal svg,
+.willa-english-card-speak svg,
+.willa-english-card-collapse svg {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+.willa-english-cards-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  gap: 0.95rem;
+}
+
+.willa-english-card {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  border: 1px solid var(--willa-english-card-border);
+  border-radius: 10px;
+  background: var(--willa-english-card-bg);
+  box-shadow: var(--willa-english-card-shadow);
+}
+
+.willa-english-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+}
+
+.willa-english-card--expanded .willa-english-card-head {
+  padding-bottom: 0.74rem;
+  border-bottom: 1px solid var(--willa-english-card-divider);
+}
+
+.willa-english-card-head-actions {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 0.42rem;
+}
+
+.willa-english-card-word-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.46rem;
+}
+
+.willa-english-card-word {
+  margin: 0;
+  color: var(--willa-text-strong);
+  font-family: var(--willa-title-font);
+  font-size: 1.16rem;
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.willa-english-card-part {
+  color: var(--willa-english-card-accent);
+  font-family: var(--willa-code-font);
+  font-size: 0.76rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.willa-english-card-phonetic {
+  color: var(--willa-text-faint);
+  font-family: var(--willa-code-font);
+  font-size: 0.8rem;
+  line-height: 1;
+  text-shadow: none;
+}
+
+.willa-english-card-content {
+  display: grid;
+  gap: 0.72rem;
+  margin-top: 0.82rem;
+}
+
+.willa-english-card-section {
+  padding: 0.72rem 0.78rem;
+  border: 1px solid var(--willa-english-card-section-border);
+  border-radius: 8px;
+  background: var(--willa-english-card-section-bg);
+}
+
+.willa-english-card-section--translation {
+  border-color: var(--willa-english-card-translation-border);
+  background: var(--willa-english-card-section-strong-bg);
+}
+
+.willa-english-card-section--definition,
+.willa-english-card-section--examples,
+.willa-english-card-section--details {
+  background: var(--willa-english-card-section-bg);
+}
+
+.willa-english-card-label {
+  margin-bottom: 0.32rem;
+  color: var(--willa-text-faint);
+  font-size: 0.74rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.willa-english-card-line,
+.willa-english-card-example-translation {
+  margin: 0;
+  color: var(--willa-text-soft);
+  font-size: 0.9rem;
+  line-height: 1.68;
+  text-shadow: none;
+}
+
+.willa-english-card-section--examples .willa-english-card-line {
+  font-weight: 550;
+}
+
+.willa-english-card-section--translation .willa-english-card-line {
+  color: var(--willa-text-strong);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.55;
+}
+
+.willa-english-card-line + .willa-english-card-line,
+.willa-english-card-example + .willa-english-card-example {
+  margin-top: 0.4rem;
+}
+
+.willa-english-card-line--empty {
+  color: var(--willa-text-faint);
+}
+
+.willa-english-card-example-translation {
+  margin-top: 0.18rem;
+  color: var(--willa-text-faint);
+  font-size: 0.86rem;
+}
+
+.willa-english-card-example-word {
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font-weight: 650;
+  text-decoration: underline;
+  text-decoration-color: var(--willa-english-card-example-underline);
+  text-decoration-thickness: 0.1em;
+  text-underline-offset: 0.18em;
+}
+
+.willa-english-card-details {
+  display: grid;
+  gap: 0.56rem;
+}
+
+.willa-english-card-detail {
+  display: grid;
+  gap: 0.28rem;
+}
+
+.willa-english-card-detail-label {
+  color: var(--willa-text-faint);
+  font-size: 0.68rem;
+  font-weight: 600;
+  line-height: 1.35;
+  text-shadow: none;
+}
+
+.willa-english-card-detail-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.34rem;
+}
+
+.willa-english-card-detail-items span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.24rem;
+  max-width: 100%;
+  min-height: 1.55rem;
+  padding: 0.16rem 0.46rem;
+  border: 1px solid var(--willa-english-card-chip-border);
+  border-radius: 999px;
+  background: var(--willa-english-card-chip-bg);
+  color: var(--willa-text-soft);
+  font-size: 0.78rem;
+  line-height: 1.35;
+  text-shadow: none;
+}
+
+.willa-english-card-detail-speak {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.1rem;
+  height: 1.1rem;
+  margin-right: -0.18rem;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--willa-english-card-accent);
+  cursor: pointer;
+}
+
+.willa-english-card-detail-speak:hover {
+  background: var(--willa-english-card-action-hover-bg);
+}
+
+.willa-english-card-detail-speak svg {
+  width: 0.74rem;
+  height: 0.74rem;
+}
+
+.willa-english-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.38rem;
+  margin-top: 0.06rem;
+}
+
+.willa-english-card-meta span {
+  padding: 0.18rem 0.44rem;
+  border: 1px solid var(--willa-english-card-chip-border);
+  border-radius: 999px;
+  background: var(--willa-english-card-meta-bg);
+  color: var(--willa-text-faint);
+  font-size: 0.74rem;
+  line-height: 1.25;
+  text-shadow: none;
+}
+
+.willa-english-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.44rem;
+  margin-top: 0.06rem;
+  padding-top: 0.68rem;
+  border-top: 1px solid var(--willa-english-card-divider);
+}
+
+.willa-english-card-resource {
+  position: relative;
+  display: inline-flex;
+}
+
+.willa-english-card-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  min-height: 1.7rem;
+  padding: 0 0.48rem;
+  border: 1px solid var(--willa-english-card-chip-border);
+  border-radius: 999px;
+  background: var(--willa-english-card-link-bg);
+  color: var(--willa-english-card-accent);
+  font-size: 0.78rem;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  text-shadow: none;
+}
+
+.willa-english-card-link:hover {
+  border-color: var(--willa-english-card-link-border-hover);
+  background: var(--willa-english-card-link-bg-hover);
+  text-decoration: none;
+}
+
+.willa-english-card-link svg {
+  width: 0.86rem;
+  height: 0.86rem;
+}
+
+.willa-english-card-resource-card {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 0.48rem);
+  z-index: 3;
+  display: grid;
+  width: min(18rem, calc(100vw - 2rem));
+  gap: 0.24rem;
+  padding: 0.68rem 0.74rem;
+  border: 1px solid var(--willa-english-card-resource-border);
+  border-radius: 8px;
+  background: var(--willa-english-card-resource-bg);
+  box-shadow: var(--willa-english-card-resource-shadow);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(0.18rem);
+  transition:
+    opacity 140ms ease,
+    transform 140ms ease;
+}
+
+.willa-english-card-resource-card::after {
+  content: "";
+  position: absolute;
+  left: 0.9rem;
+  bottom: -0.34rem;
+  width: 0.62rem;
+  height: 0.62rem;
+  border-right: 1px solid var(--willa-english-card-resource-border);
+  border-bottom: 1px solid var(--willa-english-card-resource-border);
+  background: var(--willa-english-card-resource-bg);
+  transform: rotate(45deg);
+}
+
+.willa-english-card-resource:hover .willa-english-card-resource-card,
+.willa-english-card-resource:focus-within .willa-english-card-resource-card {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.willa-english-card-resource-title,
+.willa-english-card-resource-description,
+.willa-english-card-resource-url {
+  display: block;
+  text-shadow: none;
+}
+
+.willa-english-card-resource-title {
+  color: var(--willa-text-strong);
+  font-size: 0.84rem;
+  font-weight: 650;
+  line-height: 1.42;
+}
+
+.willa-english-card-resource-description {
+  color: var(--willa-text-soft);
+  font-size: 0.78rem;
+  line-height: 1.55;
+}
+
+.willa-english-card-resource-url {
+  color: var(--willa-text-faint);
+  font-family: var(--willa-code-font);
+  font-size: 0.72rem;
+  line-height: 1.4;
+}
+
+.willa-english-card-practice {
+  margin-top: 0.86rem;
+  padding: 0.72rem 0.78rem;
+  border: 1px dashed var(--willa-english-card-section-border);
+  border-radius: 8px;
+  background: var(--willa-english-card-section-strong-bg);
+}
+
+.willa-english-card-practice-label {
+  display: block;
+  margin-bottom: 0.42rem;
+  color: var(--willa-text-faint);
+  font-size: 0.74rem;
+  font-weight: 650;
+  line-height: 1.4;
+  text-shadow: none;
+}
+
+.willa-english-card-practice-row {
+  display: flex;
+  gap: 0.48rem;
+}
+
+.willa-english-card-practice-input {
+  min-width: 0;
+  flex: 1;
+  height: 2.1rem;
+  padding: 0 0.62rem;
+  border: 1px solid var(--willa-english-card-practice-input-border);
+  border-radius: 8px;
+  background: var(--willa-english-card-practice-input-bg);
+  color: var(--willa-text-strong);
+  font: inherit;
+  font-size: 0.86rem;
+  outline: none;
+}
+
+.willa-english-card-practice-input:focus {
+  border-color: var(--willa-english-card-practice-input-focus-border);
+  box-shadow: var(--willa-english-card-practice-input-focus-shadow);
+}
+
+.willa-english-card-practice-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 3.2rem;
+  height: 2.1rem;
+  padding: 0 0.72rem;
+  border: 1px solid var(--willa-english-card-section-border);
+  border-radius: 8px;
+  background: var(--willa-english-card-section-bg);
+  color: var(--willa-english-card-accent);
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.willa-english-card-practice-result {
+  margin-top: 0.42rem;
+  color: var(--willa-text-faint);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  text-shadow: none;
+}
+
+.willa-english-card-practice-result--correct {
+  color: var(--willa-english-card-result-correct);
+  font-weight: 650;
+}
+
+.willa-english-card-practice-result--incorrect {
+  color: var(--willa-english-card-result-incorrect);
+}
+
+@media (max-width: 767px) {
+  .willa-english-cards {
+    margin: 1.5rem 0;
+    padding: 0.84rem;
+  }
+
+  .willa-english-cards-header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.7rem;
+  }
+
+  .willa-english-cards-list {
+    grid-template-columns: 1fr;
+  }
+
+  .willa-english-card {
+    padding: 0.88rem;
+  }
+}