@lengduan/dsh-client-ui-skin-815 0.1.0

package/src/client/vj815.module.css

@@ -0,0 +1,359 @@
+/* 1945-08-15 终战皮肤：史料照片底 + 可读玻璃层。 */
+
+body[data-dsh-815] {
+  color-scheme: dark;
+  color: #f4ead6;
+  background-color: #080a06;
+  --dsw-alias-label-primary-inverted: #1a1c14;
+  --vj-brass: #c4a35a;
+  --vj-brass-soft: #e2c98a;
+  --vj-olive: #3d4630;
+  --vj-ink: #1c1a14;
+  --vj-paper: #f3ead4;
+  --vj-glass: rgba(18, 20, 14, 0.72);
+  --vj-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
+
+  --dsw-alias-bg-base: transparent;
+  --dsw-alias-bg-layer-1: rgba(28, 30, 22, 0.78);
+  --dsw-alias-bg-layer-2: rgba(36, 38, 28, 0.88);
+  --dsw-alias-bg-layer-3: rgba(44, 46, 34, 0.92);
+  --dsw-alias-bg-overlay: rgba(22, 24, 18, 0.94);
+  --dsw-alias-border-l1: rgba(196, 163, 90, 0.28);
+  --dsw-alias-border-l2-darkmode-thin: rgba(196, 163, 90, 0.36);
+  --dsw-alias-border-l2: rgba(196, 163, 90, 0.42);
+  --dsw-alias-border-l3: rgba(196, 163, 90, 0.7);
+  --dsw-alias-brand-primary: #c4a35a;
+  --dsw-alias-brand-text: #f4ead6;
+  --dsw-alias-button-elevated-fill: rgba(52, 54, 40, 0.9);
+  --dsw-alias-button-floating-fill: rgba(58, 60, 44, 0.94);
+  --dsw-alias-button-floating-hover: #4a4e38;
+  --dsw-alias-button-info-fill: #6a5a32;
+  --dsw-alias-button-info-hover: #7c6a3c;
+  --dsw-alias-interactive-bg-active: rgba(196, 163, 90, 0.28);
+  --dsw-alias-interactive-bg-hover: rgba(196, 163, 90, 0.14);
+  --dsw-alias-interactive-bg-hover-solid: #3a3e2c;
+  --dsw-alias-label-primary: #f4ead6;
+  --dsw-alias-label-primary-bluish: #e8dcb8;
+  --dsw-alias-label-secondary: #c8c0a4;
+  --dsw-alias-label-tertiary: #9e9780;
+  --dsw-alias-label-caption: #7e7866;
+  --dsw-alias-state-business-primary: #c4a35a;
+  --dsw-alias-state-business-tertiary: #3a3828;
+  --dsw-shadow-lv2: var(--vj-shadow);
+  --dsw-specific-input-major: rgba(28, 30, 22, 0.82);
+  --dsw-specific-selector: rgba(48, 50, 36, 0.9);
+  --dsw-specific-sidebar-fill: rgba(14, 16, 12, 0.88);
+  --dsw-alias-markdown-code-block: #141610;
+  --dsw-alias-markdown-code-block-banner: #1c1e16;
+  --shiki-token-constant: #4dabf7;
+  --shiki-token-string: #69db7c;
+  --shiki-token-comment: #adb5bd;
+  --shiki-token-keyword: #faa2c1;
+  --shiki-token-parameter: #ffa94d;
+  --shiki-token-function: #b197fc;
+  --shiki-token-string-expression: #8ce99a;
+  --shiki-token-punctuation: #ced4da;
+  --shiki-token-link: #74c0fc;
+}
+
+body[data-dsh-815]::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(10, 12, 8, 0.6) 0%,
+      rgba(10, 12, 8, 0.38) 30%,
+      rgba(12, 12, 10, 0.55) 52%,
+      rgba(10, 12, 8, 0.78) 78%,
+      rgba(8, 10, 6, 0.9) 100%
+    ),
+    radial-gradient(ellipse at 50% 30%, transparent 18%, rgba(8, 10, 6, 0.5) 100%);
+}
+
+body[data-dsh-815] [id='root'] {
+  position: relative;
+  z-index: 1;
+  background: transparent;
+}
+
+body[data-dsh-815] :is([data-pane='sidebar'], [class*='sidebarCol']) {
+  --dsw-alias-label-primary: #f4ead6;
+  --dsw-alias-label-secondary: #d4ccb0;
+  position: relative;
+  z-index: auto;
+  background: rgba(16, 18, 12, 0.92);
+  border-right: 1px solid rgba(196, 163, 90, 0.42);
+  box-shadow: 10px 0 28px rgba(0, 0, 0, 0.28);
+}
+
+body[data-dsh-815] :is([data-pane='sidebar'], [class*='sidebarCol']) > div {
+  position: relative;
+  overflow: visible;
+  background:
+    linear-gradient(180deg, rgba(28, 30, 20, 0.55), rgba(12, 14, 10, 0.72));
+}
+
+body[data-dsh-815] [data-skin-chrome='rescript-plaque'] {
+  position: absolute;
+  left: 50%;
+  bottom: 88px;
+  z-index: 1;
+  width: min(86%, 232px);
+  max-height: 28%;
+  object-fit: contain;
+  border-radius: 10px;
+  transform: translateX(-50%);
+  pointer-events: none;
+  opacity: 0.88;
+  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
+}
+
+/* 青天白日海军旗：蓝底白日十二芒。仅挂在会话选中行左侧。 */
+body[data-dsh-815] [data-vj-session] {
+  position: relative;
+  padding-left: 26px;
+}
+
+body[data-dsh-815] [data-vj-session]:hover:not([aria-selected='true']) {
+  border-radius: 8px;
+  background: rgba(196, 163, 90, 0.1);
+}
+
+body[data-dsh-815] [data-vj-session][aria-selected='true'] {
+  border-radius: 8px;
+  background: linear-gradient(90deg, rgba(196, 163, 90, 0.22), rgba(28, 30, 22, 0.12));
+  box-shadow: inset 0 0 0 1px rgba(196, 163, 90, 0.35);
+}
+
+body[data-dsh-815] [data-vj-session][aria-selected='true'] [class*='title'] {
+  color: #fff8e8;
+}
+
+body[data-dsh-815] [data-vj-session][aria-selected='true']::before {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 50%;
+  z-index: 2;
+  width: 16px;
+  height: 11px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  background-color: #000095;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23000095'/%3E%3Cg fill='%23fff' transform='translate(15 10)'%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(30)'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(60)'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(90)'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(120)'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(150)'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(180)'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(210)'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(240)'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(270)'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(300)'/%3E%3Cpolygon points='0,-8.4 1.05,-3.5 -1.05,-3.5' transform='rotate(330)'/%3E%3Ccircle r='2.7'/%3E%3Ccircle r='3.55' fill='none' stroke='%23000095' stroke-width='0.85'/%3E%3C/g%3E%3C/svg%3E");
+  background-size: cover;
+  background-repeat: no-repeat;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
+}
+
+body[data-dsh-815] :is([data-pane='conversation'], [class*='centerCol']) {
+  color: #f4ead6;
+  background: transparent;
+}
+
+/* 对话列宿主会写 background: var(--dsw-alias-bg-base)；主题若在内层重绑该 token，会盖住油画并和输入座切出一条水平线。 */
+body[data-dsh-815] [data-phase='active'] {
+  --dsw-alias-bg-base: transparent;
+  background: transparent;
+}
+
+body[data-dsh-815] [data-phase='active'] [class*='scrollBody'],
+body[data-dsh-815] [data-phase='active'] [class*='viewArea'] {
+  background: transparent;
+}
+
+body[data-dsh-815] :is([data-pane='details'], [class*='detailsCol']) {
+  background: rgba(18, 20, 14, 0.88);
+  border-left-color: rgba(196, 163, 90, 0.4);
+}
+
+body[data-dsh-815] button[class*='brand'] {
+  color: #f3e3c0;
+  --dsw-alias-label-primary-inverted: #1a1c14;
+}
+
+body[data-dsh-815] button[class*='brand'] > svg > rect {
+  fill: #c4a35a;
+}
+
+body[data-dsh-815] [data-phase='hero'] [class*='headline'] {
+  color: #fff8e8;
+  font-family: Georgia, 'Times New Roman', serif;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
+}
+
+body[data-dsh-815] [data-composer-card] {
+  isolation: isolate;
+  min-height: 0;
+  color: #1c1a14;
+  --dsw-alias-label-primary: #1c1a14;
+  --dsw-alias-label-primary-bluish: #2a261c;
+  --dsw-alias-label-secondary: #4a4638;
+  --dsw-alias-label-tertiary: #6a6454;
+  --dsw-alias-label-caption: #7e7866;
+  --dsw-alias-brand-text: #1c1a14;
+  --dsw-specific-input-major: #f3ead4;
+  --dsw-alias-bg-layer-1: #f3ead4;
+  --dsw-alias-bg-layer-2: #efe4c8;
+  border: 1px solid rgba(196, 163, 90, 0.55);
+  border-radius: 18px;
+  background: linear-gradient(180deg, #f3ead4, #e4d6b4);
+  box-shadow: var(--vj-shadow);
+}
+
+body[data-dsh-815] [data-composer-card] :is(textarea, input, [contenteditable='true']) {
+  color: #1c1a14;
+  caret-color: #1c1a14;
+  background: #f3ead4;
+}
+
+body[data-dsh-815] [data-composer-card] :is(textarea, input)::placeholder {
+  color: #6a6454;
+}
+
+body[data-dsh-815] [data-phase='active'] [data-composer-seat] {
+  --dsw-alias-bg-base: transparent;
+  background: transparent;
+}
+
+body[data-dsh-815] [data-chat-flow] {
+  max-width: var(--dsh-composer-card-max-width);
+}
+
+body[data-dsh-815]
+  [data-chat-flow-kind='assistant-step'] > * > * > * > div[class*='markdown'] {
+  box-sizing: border-box;
+  align-self: stretch;
+  width: 100%;
+  max-width: 100%;
+  padding: 14px 18px;
+  border: 1px solid rgba(196, 163, 90, 0.32);
+  border-radius: 14px 14px 14px 6px;
+  color: #f4ead6;
+  background: rgba(28, 30, 22, 0.9);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
+}
+
+body[data-dsh-815] [class*='markdown'] [class*='bannerWrap'] {
+  background-color: var(--dsw-alias-markdown-code-block-banner);
+}
+
+body[data-dsh-815]
+  [data-chat-flow-kind='assistant-step'] > * > * > * > div[class*='markdown'] :not(pre) > code {
+  color: #1c1a14;
+}
+
+body[data-dsh-815]
+  [data-chat-flow-kind='assistant-step'] > * > * > * > div[class*='markdown'] [class*='fileMention'] {
+  color: #6b4e16;
+}
+
+body[data-dsh-815] [data-composer-card] button[class*='add'] {
+  color: #ffffff;
+}
+
+body[data-dsh-815] [class*='userRow'] [class*='bubble'] {
+  color: #f4ead6;
+  border: 1px solid rgba(196, 163, 90, 0.4);
+  background: rgba(52, 48, 32, 0.92);
+}
+
+body[data-dsh-815] [class*='userRow'] [class*='bubble'] :not(pre) > code {
+  color: #1c1a14;
+}
+
+body[data-dsh-815] [data-terminal] {
+  --dsw-alias-markdown-code-block: rgba(18, 20, 14, 0.96);
+  --dsw-alias-label-primary: #f4ead6;
+  color: #f4ead6;
+}
+
+body[data-dsh-815] :is([role='dialog'], [role='menu'], [data-radix-popper-content-wrapper] > *) {
+  color: #f4ead6;
+  --dsw-alias-label-primary: #f4ead6;
+  --dsw-alias-label-secondary: #d4ccb0;
+  --dsw-alias-label-tertiary: #9e9780;
+  --dsw-alias-label-caption: #7e7866;
+  --dsw-alias-bg-layer-1: #24261c;
+  --dsw-alias-bg-layer-2: #1c1e16;
+  --dsw-alias-bg-layer-3: #2c2e24;
+  --dsw-alias-bg-module-platform: #24261c;
+  --dsw-alias-bg-overlay: #323428;
+  --dsw-specific-input-major: #24261c;
+  --dsw-specific-selector: #323428;
+  --dsw-specific-menu: #2c2e24;
+  --dsw-specific-tip: #2a2c22;
+  --dsw-alias-button-elevated-fill: #2e3026;
+  --dsw-alias-button-floating-fill: #2a2c22;
+  --dsw-alias-button-floating-hover: #3a3e2c;
+  --dsw-alias-markdown-inline-code: #2a2c22;
+  border-color: rgba(196, 163, 90, 0.5);
+  box-shadow: var(--vj-shadow);
+}
+
+body[data-dsh-815] [data-slot='sidebar.settings'] [role='dialog'][aria-modal='true'] {
+  --dsw-specific-sidebar-nav-item-active: rgba(196, 163, 90, 0.32);
+  --dsw-specific-sidebar-nav-item-hover: rgba(196, 163, 90, 0.14);
+}
+
+body[data-dsh-815] [class*='titlebar'] > [class*='button']:first-of-type {
+  display: none;
+}
+
+body[data-dsh-815] [data-skin-chrome='titlebar-brand'] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+  color: #f3e3c0;
+  --dsw-alias-label-primary-inverted: #1a1c14;
+  pointer-events: none;
+}
+
+body[data-dsh-815] [data-skin-chrome='titlebar-brand'] svg {
+  display: block;
+  height: 18px;
+  width: auto;
+}
+
+body[data-dsh-815] [class*='titlebar'] {
+  position: relative;
+  background: linear-gradient(to top, rgba(16, 18, 12, 0.96), rgba(36, 38, 26, 0.9));
+  border-bottom: 1px solid rgba(196, 163, 90, 0.42);
+}
+
+body[data-dsh-815] [class*='titlebar'] [class*='button'] {
+  color: #d4bc7a;
+}
+
+body[data-dsh-815] [data-skin-chrome='caption'] {
+  position: fixed;
+  right: 16px;
+  bottom: 12px;
+  z-index: 30;
+  max-width: min(52vw, 420px);
+  color: #e8dcb8;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-align: right;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
+  pointer-events: none;
+}
+
+@media (hover: hover) {
+  body[data-dsh-815] [data-time-hover-root] :is([class*='timeStart'], [class*='timeEnd']) {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body[data-dsh-815] [data-composer-card] {
+    transition: none;
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+/** 宿主加载入口。浏览器皮肤无宿主行为。 */
+
+/** 不提供宿主侧效果。 */
+export function apply(): void {}

package/tests/apply.spec.ts

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest'
+import { Context, type Fiber } from '@deepseek-ai/cordis'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { apply } from '../src/client/index.ts'
+
+let fiber: Fiber | undefined
+
+async function mount(): Promise<Fiber> {
+  const f = new Context().plugin({ apply })
+  await f.await()
+  return f
+}
+
+afterEach(async () => {
+  await fiber?.dispose()
+  fiber = undefined
+  document.body.innerHTML = ''
+  document.title = ''
+})
+
+describe('815 skin apply', () => {
+  it('declares only the public client manifest', () => {
+    const manifest = JSON.parse(readFileSync(resolve(process.cwd(), 'package.json'), 'utf8'))
+    expect(manifest.dsh.client).toEqual({ inject: [], platform: 'web' })
+    expect(manifest.peerDependencies).toHaveProperty('@deepseek-ai/cordis', '^4.0.1')
+  })
+
+  it('sets the body attribute and retracts it on dispose', async () => {
+    fiber = await mount()
+    expect(document.body.hasAttribute('data-dsh-815')).toBe(true)
+    await fiber.dispose()
+    expect(document.body.hasAttribute('data-dsh-815')).toBe(false)
+  })
+
+  it('installs the photograph backdrop and restores prior body styles', async () => {
+    document.body.style.setProperty('background-position', 'left bottom')
+    fiber = await mount()
+    expect(document.body.style.backgroundImage).toContain('data:image/jpeg;base64,')
+    expect(document.body.style.backgroundPosition).toBe('center 42%')
+    await fiber.dispose()
+    expect(document.body.style.backgroundImage).toBe('')
+    expect(document.body.style.backgroundPosition).toBe('left bottom')
+  })
+
+  it('injects chrome and retracts every owned element on dispose', async () => {
+    fiber = await mount()
+    expect(document.body.querySelectorAll('[data-skin-owner="815"]').length).toBeGreaterThan(0)
+    await fiber.dispose()
+    expect(document.body.querySelectorAll('[data-skin-owner="815"]').length).toBe(0)
+  })
+})