<!-- SPEC: PJ2026-010405 云端控制台. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<!-- Responsibility: 展示浏览器偏好与运行参数 ownership，不复制业务 authority。 -->

<script setup lang="ts">
import { Menu } from "lucide-vue-next";
import { computed } from "vue";
import { RouterLink } from "vue-router";
import InspectorPanel from "@/components/console/InspectorPanel.vue";
import SectionFrame from "@/components/layout/SectionFrame.vue";
import StatusStrip from "@/components/layout/StatusStrip.vue";

const props = defineProps<{ identityName: string; role: string; reducedMotion: boolean; isAdmin: boolean }>();
const sidebarCollapsed = defineModel<boolean>("sidebarCollapsed", { required: true });
const statusItems = computed(() => [
  { id: "actor", label: "Actor", value: props.identityName },
  { id: "role", label: "Role", value: props.role || "member" },
  { id: "motion", label: "Motion", value: props.reducedMotion ? "reduced" : "standard", tone: props.reducedMotion ? "info" as const : "neutral" as const },
  { id: "session", label: "Session", value: "HttpOnly" }
]);
</script>

<template>
  <div class="settings-workspace">
    <StatusStrip :items="statusItems" label="设置上下文" />
    <div class="settings-workspace-grid">
      <SectionFrame title="当前浏览器" description="仅影响显示，不成为业务状态 authority。">
        <div class="settings-row">
          <div><strong>侧边导航</strong><p>折叠后为主工作区释放横向空间；导航 ACL 不变。</p></div>
          <button class="table-action" type="button" :aria-pressed="sidebarCollapsed" @click="sidebarCollapsed = !sidebarCollapsed"><Menu :size="16" aria-hidden="true" />{{ sidebarCollapsed ? '展开导航' : '折叠导航' }}</button>
        </div>
        <div class="settings-row">
          <div><strong>减少动态效果</strong><p>读取操作系统 `prefers-reduced-motion`，不创建第二套偏好 authority。</p></div>
          <span class="status-pill" :data-status="reducedMotion ? 'active' : 'pending'">{{ reducedMotion ? '已启用' : '未启用' }}</span>
        </div>
        <div class="settings-row">
          <div><strong>控制台密度与视图</strong><p>集合页通过 URL 的 `view`、`density`、`q`、`filter`、`sort` 与 `cursor` 恢复。</p></div>
          <span class="status-pill" data-status="active">URL state</span>
        </div>
      </SectionFrame>

      <InspectorPanel title="运行参数 ownership" subtitle="本页不复制运行域事实">
        <div class="settings-fact-group">
          <p>Provider profile、Code Agent timeout 和 gateway timeout 属于对应运行域。本页不会通过 Workbench 私有 store 修改或持久化这些事实。</p>
          <RouterLink class="table-action" :to="isAdmin ? '/admin/provider-profiles' : '/workbench'">{{ isAdmin ? '打开 Provider Profiles' : '返回 Workbench' }}</RouterLink>
        </div>
        <div class="settings-fact-group" role="note" aria-label="后端 blocker">
          <strong>后端 blocker</strong>
          <p>当前没有独立的用户设置 typed API。需要服务端设置时，应先明确 owner、ACL 和 read model，再增加可编辑项。</p>
        </div>
      </InspectorPanel>
    </div>
  </div>
</template>

<style scoped>
.settings-workspace { display: grid; gap: 12px; min-width: 0; }
.settings-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 12px; }
.settings-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--console-border); padding: 12px 0; }
.settings-row:last-child { border-bottom: 0; }
.settings-fact-group { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--console-border); }
.settings-fact-group:last-child { border-bottom: 0; }
.settings-row p { margin: 4px 0 0; color: var(--console-graphite-600); }
@media (max-width: 840px) { .settings-workspace-grid, .settings-row { grid-template-columns: 1fr; } }
</style>
