@my-games/sudoku-vue 0.0.1 → 0.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @my-games/sudoku-vue
 
-> 数独的 Vue 3 组件适配器。**当前为 `0.0.0` 占位版本**，`GameSudoku` 仅渲染占位文案。
+> 数独的 Vue 3 组件适配器（Composition API + SFC），基于 `@my-games/sudoku-core`。
 
 ```bash
 pnpm add @my-games/sudoku-vue vue
@@ -10,15 +10,51 @@ pnpm add @my-games/sudoku-vue vue
 <script setup lang="ts">
 import { GameSudoku } from '@my-games/sudoku-vue';
 import '@my-games/sudoku-vue/style.css';
+
+function onSolved(p: { difficulty: string; seconds: number }) {
+  console.log('通关', p.difficulty, p.seconds + 's');
+}
 </script>
 
 <template>
-  <GameSudoku title="Sudoku" />
+  <GameSudoku difficulty="easy" save-key="my-app:sudoku:save" @solved="onSolved" />
 </template>
 ```
 
-**样式需显式引入**：vite lib build 把内部 CSS import 抽到 `dist/index.css`。
-真实棋盘组件与 `useGame()` composable 随引擎后续提交补入。
+**样式需显式引入**：vite lib build 把内部 CSS import 抽到 `dist/index.css`，消费者入口加一次
+`import '@my-games/sudoku-vue/style.css'`（或 `import '@my-games/sudoku-core/style.css'`，同源）。
+
+## Props
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| `difficulty` | `'easy'\|'medium'\|'hard'` | `'easy'` | 初始难度（组件内难度条可即时切换重开） |
+| `storage` | `SaveStorage \| null` | `localStorage` | 传 `null` 关闭持久化（SSR） |
+| `saveKey` | `string` | `game-sudoku:save` | 存档键，多实例分开 |
+| `bestKey` | `string` | `game-sudoku:best` | 分难度最佳用时键 |
+| `freshStart` | `boolean` | `false` | 忽略已有存档开新局 |
+| `autofocus` | `boolean` | `true` | mount 后 focus 棋盘让键盘立即可用 |
+| `showPad` | `boolean` | `true` | 是否显示数字键盘 |
+| `showHint` | `boolean` | `false` | 是否显示「提示」按钮（`hint()` 始终在 ref / `useGame` 上） |
+| `title` | `string` | `'数独'` | 头部标题 |
+
+## 事件
+
+- `input(digit, changed)` — 填数后触发。
+- `solved({ difficulty, seconds })` — 通关瞬间触发一次。
+
+## Ref 命令式方法（`GameSudokuInstance`）
+
+`select / input / erase / toggleNote / hint / newGame / undo`。
+
+## Composable（想自己画 UI）
+
+```ts
+import { useGame } from '@my-games/sudoku-vue';
+const { state, select, input, hint, undo, newGame } = useGame({ difficulty: 'medium' });
+```
+
+`state` 是 `ShallowRef<GameState>`，模板里 auto-unwrap。
 
 完整说明见仓库根 README：<https://github.com/my-gam/sudoku#readme>
 

package/dist/GameSudoku.vue.d.ts

@@ -1,8 +1,53 @@
+import { Digit, Difficulty, SaveStorage } from '@my-games/sudoku-core';
+/**
+ * GameSudoku —— Vue 3 官方组件，桥接 @my-games/sudoku-core 引擎。
+ *
+ * 输入模型：
+ * - 点击格子选中；数字面板 / 键盘 1-9 填数；N 切笔记模式；Backspace/Delete 擦除；方向键移动选中。
+ * - 键盘走 window keydown，但严格判 `document.activeElement === boardEl`，多实例并存只活动那个响应。
+ * - 视觉/类名全部复用 core 的 style.css，与 React 版行为对齐。
+ */
 interface Props {
+    difficulty?: Difficulty;
+    storage?: SaveStorage | null;
+    saveKey?: string;
+    bestKey?: string;
+    freshStart?: boolean;
+    autofocus?: boolean;
     title?: string;
+    showPad?: boolean;
+    showHint?: boolean;
 }
-declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_export: import('vue').DefineComponent<Props, {
+    select: (row: number, col: number) => void;
+    input: (digit: Digit) => boolean;
+    erase: () => boolean;
+    toggleNote: (digit: Digit) => boolean;
+    hint: () => boolean;
+    newGame: (difficulty?: Difficulty) => void;
+    undo: () => boolean;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    input: (digit: Digit, changed: boolean) => any;
+    solved: (payload: {
+        difficulty: Difficulty;
+        seconds: number;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onInput?: ((digit: Digit, changed: boolean) => any) | undefined;
+    onSolved?: ((payload: {
+        difficulty: Difficulty;
+        seconds: number;
+    }) => any) | undefined;
+}>, {
+    difficulty: Difficulty;
+    storage: SaveStorage | null;
+    saveKey: string;
+    bestKey: string;
+    freshStart: boolean;
+    autofocus: boolean;
     title: string;
+    showPad: boolean;
+    showHint: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/GameSudoku.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameSudoku.vue.d.ts","sourceRoot":"","sources":["../src/GameSudoku.vue"],"names":[],"mappings":"AAqBA,OAAO,iCAAiC,CAAC;AAGzC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2BD,QAAA,MAAM,YAAY;;6EAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"GameSudoku.vue.d.ts","sourceRoot":"","sources":["../src/GameSudoku.vue"],"names":[],"mappings":"AA0VA,OAAO,iCAAiC,CAAC;AAEzC,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAG5E;;;;;;;GAOG;AAEH,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmfD,QAAA,MAAM,YAAY;;;;;;;;;;;oBAleqB,UAAU;iBAAW,MAAM;;;;;oBAA3B,UAAU;iBAAW,MAAM;;;;;;;;;;;;6EAuehE,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/index.css

@@ -1,18 +1,376 @@
-/*
- * @my-games/sudoku-core —— 0.0.0 占位样式表（单数命名 ./style.css）。
+/**
+ * game-sudoku 通用样式表（单数命名：`./style.css`）。
  *
- * 空骨架阶段只放最小基类，保证三包各自构建能产出非空 dist/index.css
- * （verify:dist 守卫要求 vue/react 的 index.css 存在且非 0 字节）。
- * 真实棋盘样式（3×3 宫格布局、题面/用户/冲突配色、铅笔笔记迷你格）随引擎补入。
+ * 由 `@my-games/sudoku-core/style.css` 暴露，Vue / React 适配器都直接 import 这一份，
+ * 保持视觉一致（避免两包各自漂移）。
+ *
+ * 关键布局：棋盘是 3×3 的「宫」网格（.game-sudoku-box 各含 3×3 共 9 格）。
+ * 宫之间的粗缝（box 背景透出 strong line 色）天然构成九宫分隔线，宫之间用 box-gap、
+ * 宫内用 cell-gap 两级间距即可，无需 nth-child 取模去判边界。
+ *
+ * 约定：
+ * - 数字配色区分「题面给定」(深色加粗) 与「玩家填入」(蓝色)；冲突格红底。
+ * - 选中格高亮 + 同数/同行列宫淡色提示；空格用 .cell-notes 3×3 迷你格画铅笔标记。
+ * - 尺寸自适应：容器宽度决定一切，clamp() 缩放，320px～520px 视觉合理。
+ * - prefers-reduced-motion 下关过渡/动画。
  */
 
 .game-sudoku {
+  --board-size: min(92vw, 460px);
+  --box-gap: 3px;
+  --cell-gap: 1px;
+  --radius: clamp(4px, 1.2vw, 10px);
+  --line-strong: #3b4a5a;
+  --line-soft: #93a3b3;
+  --cell-bg: #ffffff;
+  --text-given: #1f2d3d;
+  --text-user: #1c63b5;
+  --text-muted: #8a99a8;
+  --hl-selected: #cfe3ff;
+  --hl-peer: #eef4fb;
+  --hl-same: #d7e9ff;
+  --bad: #ffd7d7;
+  --bad-text: #b4232a;
+  --accent: #1c63b5;
+  --accent-dark: #144d8f;
+
   display: inline-flex;
   flex-direction: column;
-  gap: 8px;
-  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
-  color: #1f2d3d;
+  gap: 10px;
+  font-family: 'Helvetica Neue', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  color: var(--text-given);
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
+
+.game-sudoku-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  width: var(--board-size);
+  max-width: 92vw;
+}
+
+.game-sudoku-title {
+  margin: 0;
+  font-size: clamp(24px, 7vw, 38px);
+  font-weight: 800;
+  letter-spacing: -0.5px;
+}
+
+.game-sudoku-title .subtitle {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: var(--text-muted);
+}
+
+.game-sudoku-stats {
+  display: flex;
+  gap: 6px;
+}
+
+.game-sudoku-stat {
+  position: relative;
+  min-width: 66px;
+  padding: 5px 10px 7px;
+  border-radius: var(--radius);
+  background: var(--line-strong);
+  color: #fff;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.game-sudoku-stat .label {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  opacity: 0.85;
+}
+
+.game-sudoku-stat .value {
+  display: block;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.game-sudoku-stat.is-danger .value {
+  color: #ffb3b3;
+}
+
+.game-sudoku-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: var(--board-size);
+  max-width: 92vw;
+  flex-wrap: wrap;
+}
+
+.game-sudoku-difficulty {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.game-sudoku-chip {
+  padding: 6px 12px;
+  border: 1px solid var(--line-soft);
+  border-radius: 999px;
+  background: #fff;
+  color: var(--text-given);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.game-sudoku-chip.is-active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.game-sudoku-chip:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.game-sudoku-actions {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.game-sudoku-button {
+  padding: 8px 12px;
+  border: 0;
+  border-radius: var(--radius);
+  background: #e7edf3;
+  color: var(--text-given);
+  font: inherit;
+  font-weight: 700;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 120ms, transform 80ms;
+}
+
+.game-sudoku-button:hover:not(:disabled) {
+  background: #d7e2ec;
+}
+
+.game-sudoku-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.game-sudoku-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.game-sudoku-button.is-primary {
+  background: var(--accent);
+  color: #fff;
+}
+
+.game-sudoku-button.is-primary:hover:not(:disabled) {
+  background: var(--accent-dark);
+}
+
+.game-sudoku-button.is-toggled {
+  background: var(--accent-dark);
+  color: #fff;
+}
+
+.game-sudoku-board {
+  position: relative;
+  width: var(--board-size);
+  max-width: 92vw;
+  padding: var(--box-gap);
+  border-radius: var(--radius);
+  background: var(--line-strong);
+  outline: none;
+  box-sizing: content-box;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: var(--box-gap);
+  aspect-ratio: 1;
+}
+
+.game-sudoku-board:focus-visible {
+  box-shadow: 0 0 0 3px rgba(28, 99, 181, 0.4);
+}
+
+.game-sudoku-box {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: var(--cell-gap);
+  background: var(--line-soft);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.game-sudoku-cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cell-bg);
+  font-weight: 500;
+  font-size: clamp(15px, 4.6vw, 26px);
+  line-height: 1;
+  cursor: pointer;
+  aspect-ratio: 1;
+}
+
+.game-sudoku-cell.is-given {
+  color: var(--text-given);
+  font-weight: 800;
+}
+
+.game-sudoku-cell.is-user {
+  color: var(--text-user);
+}
+
+.game-sudoku-cell.is-peer {
+  background: var(--hl-peer);
+}
+
+.game-sudoku-cell.is-same {
+  background: var(--hl-same);
+}
+
+.game-sudoku-cell.is-selected {
+  background: var(--hl-selected);
+}
+
+.game-sudoku-cell.is-conflict {
+  background: var(--bad);
+  color: var(--bad-text);
+}
+
+.game-sudoku-cell.is-hint {
+  color: var(--accent-dark);
+}
+
+.cell-notes {
+  position: absolute;
+  inset: 2px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  align-items: center;
+  justify-items: center;
+  font-size: clamp(7px, 1.8vw, 11px);
+  font-weight: 600;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.game-sudoku-pad {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  gap: 6px;
+  width: var(--board-size);
+  max-width: 92vw;
+}
+
+.game-sudoku-pad button {
+  padding: 10px 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: #eef3f8;
+  color: var(--text-user);
+  font: inherit;
+  font-weight: 700;
+  font-size: clamp(16px, 4vw, 22px);
+  cursor: pointer;
+}
+
+.game-sudoku-pad button:hover:not(:disabled) {
+  background: #dfeaf5;
+}
+
+.game-sudoku-pad button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.game-sudoku-pad .is-active-mode {
+  background: var(--accent);
+  color: #fff;
+}
+
+.game-sudoku-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.86);
+  color: var(--text-given);
+  text-align: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 220ms ease-in;
+  z-index: 10;
+}
+
+.game-sudoku-overlay.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.game-sudoku-overlay h2 {
+  margin: 0;
+  font-size: clamp(26px, 7vw, 40px);
+  font-weight: 800;
+  color: var(--accent-dark);
+}
+
+.game-sudoku-overlay .meta {
+  font-size: 14px;
+  color: var(--text-muted);
+}
+
+.game-sudoku-overlay .row {
+  display: flex;
+  gap: 8px;
+}
+
+.game-sudoku-desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
+@keyframes game-sudoku-pop {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.18); }
+  100% { transform: scale(1); }
+}
+
+.game-sudoku-cell.is-pop {
+  animation: game-sudoku-pop 200ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .game-sudoku-button,
+  .game-sudoku-overlay {
+    transition: none;
+  }
+  .game-sudoku-cell.is-pop {
+    animation: none;
+  }
+}
 /*$vite$:1*/

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as GameSudoku } from './GameSudoku.vue';
-export declare const SUDOKU_PACKAGE: "sudoku-vue";
-export declare const SUDOKU_STAGE: "0.0.0";
+export { useGame, type UseGameReturn } from './useGame';
+export type { GameSudokuInstance } from './instance';
+export type { Cell, Difficulty, Digit, GameState, GameStatus, Grid, SaveStorage } from '@my-games/sudoku-core';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,eAAO,MAAM,cAAc,EAAG,YAAqB,CAAC;AACpD,eAAO,MAAM,YAAY,EAAG,OAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGrD,YAAY,EACV,IAAI,EACJ,UAAU,EACV,KAAK,EACL,SAAS,EACT,UAAU,EACV,IAAI,EACJ,WAAW,EACZ,MAAM,uBAAuB,CAAC"}