@koishi-ce/client 1.0.0

package/app/styles/element.scss

@@ -0,0 +1,217 @@
+:root {
+  --el-text-color-regular: var(--fg1);
+  --el-text-color-primary: var(--fg2);
+  --el-input-text-color: var(--fg1);
+  --el-border-color: var(--k-color-border);
+  --el-border-color-light: var(--k-color-border-light);
+  --el-border-color-lighter: var(--k-color-divider);
+  --el-border-color-extra-light: var(--k-color-divider-light);
+  --el-border-color-hover: var(--active);
+  --el-color-primary: var(--k-color-primary);
+  --el-color-success: var(--k-color-success);
+  --el-color-warning: var(--k-color-warning);
+  --el-color-danger: var(--k-color-danger);
+  --el-color-primary-light-9: var(--k-hover-bg);
+  --el-color-white: var(--bg0);
+  --el-color-black: var(--fg1);
+  --el-bg-color: var(--bg0);
+  --el-bg-color-overlay: var(--bg0);
+  --el-fill-color-blank: transparent;
+  --el-disabled-bg-color: var(--card-bg);
+  --el-fill-color: var(--card-bg);
+  --el-fill-color-light: var(--k-hover-bg);
+}
+
+.el-input-number, .el-popper {
+  --el-fill-color-light: transparent;
+}
+
+.el-input-number__decrease:hover, .el-input-number__increase:hover {
+  background-color: var(--bg1);
+}
+
+.el-dropdown-menu {
+  background-color: var(--el-color-white);
+}
+
+.el-dropdown__popper.el-popper[role=tooltip] {
+  background-color: var(--el-color-white);
+}
+
+.el-dropdown-menu__item.is-disabled {
+  pointer-events: none;
+}
+
+.el-dropdown-menu__item--divided {
+  &:first-child, &:last-child {
+    display: none;
+  }
+}
+
+.el-input__wrapper,
+.el-input-number__decrease,
+.el-input-number__increase,
+.el-checkbox__label {
+  transition: var(--color-transition);
+}
+
+.el-input__prefix-inner, .el-input__suffix-inner {
+  align-items: center;
+}
+
+.el-loading-mask {
+  background-color: var(--loading-mask-bg);
+  transition: 0.3s ease;
+}
+
+.el-radio {
+  height: 1.2rem;
+}
+
+.el-radio__label {
+  --el-color-primary: var(--active);
+  padding-top: 1px;
+}
+
+.el-scrollbar__bar {
+  z-index: 500;
+}
+
+html .el-switch {
+  --el-switch-on-color: var(--k-fill-normal);
+}
+
+.el-button {
+  --el-button-hover-bg-color: var(--k-button-hover-bg);
+  --el-button-hover-border-color: var(--k-color-active);
+  transition: var(--color-transition);
+}
+
+.el-button--primary {
+  --el-button-hover-text-color: var(--k-color-active);
+}
+
+.el-switch__core .el-switch__action,
+.el-slider__button {
+  --el-color-white: var(--bg2);
+}
+
+html.dark .el-popper.is-dark {
+  color: var(--fg1);
+  background-color: var(--bg1);
+  border: 1px solid var(--k-color-border);
+  box-shadow: var(--k-card-shadow);
+  transition: var(--color-transition);
+
+  .el-popper__arrow::before {
+    border: 1px solid var(--k-color-border);
+    background: var(--bg1);
+    transition: var(--color-transition);
+  }
+}
+
+.right-adjacent {
+  &.el-button, &.el-select .el-input__wrapper {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:hover, &:focus {
+    + .left-adjacent::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      border-left: 1px solid #c6e2ff;
+      z-index: 1;
+    }
+  }
+}
+
+.left-adjacent {
+  margin-left: -1px;
+
+  &.el-button, &.el-select .el-input__wrapper {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.el-overlay-dialog {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .el-dialog {
+    margin: 0;
+    min-width: 480px;
+  }
+
+  @media screen and (max-width: 768px) {
+    justify-content: flex-end;
+
+    .el-dialog {
+      width: 100%;
+      min-width: unset;
+    }
+  }
+}
+
+.el-table__body-wrapper,
+.el-table__footer-wrapper,
+.el-table__header-wrapper {
+  --el-table-tr-bg-color: var(--el-fill-color-blank);
+  --el-table-header-bg-color: var(--el-fill-color-blank);
+  --el-table-row-hover-bg-color: var(--bg2);
+  tr {
+    td,
+    th {
+      &.hover-row {
+        background-color: var(--el-table-row-hover-bg-color);
+      }
+      &.el-table-fixed-column--left,
+      &.el-table-fixed-column--right {
+        background-color: var(--el-table-tr-bg-color);
+      }
+      &.el-table-fixed-column--left:is(th),
+      &.el-table-fixed-column--right:is(th) {
+        background-color: var(--el-table-header-bg-color);
+      }
+      &.is-first-column,
+      &.is-last-column {
+        &.el-table-fixed-column--left {
+          &::before {
+            box-shadow: inset 10px 0 10px -10px var(--bg0);
+          }
+        }
+        &.el-table-fixed-column--right {
+          &::before {
+            box-shadow: inset -10px 0 10px -10px var(--bg0);
+          }
+        }
+      }
+    }
+  }
+}
+
+.flex, .grid {
+  > .el-button + .el-button {
+    margin-left: 0;
+  }
+}
+
+.el-cascader-panel {
+  .el-checkbox.is-disabled {
+    visibility: hidden;
+  }
+}
+
+.el-select.frameless {
+  .el-input .el-input__wrapper {
+    --el-input-height: 1rem;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+}

package/app/styles/hc.scss

@@ -0,0 +1,35 @@
+:root, .theme-root.light {
+  &[theme=hc-light] {
+    --bg0: white;
+    --bg1: white;
+    --bg2: white;
+    --bg3: white;
+  
+    --fg0: black;
+    --fg1: black;
+    --fg2: black;
+    --fg3: black;
+  
+    --k-card-border: black;
+    --k-color-border: black;
+    --k-color-divider: black;
+  }
+}
+
+:root, .theme-root.dark {
+  &[theme=hc-dark] {
+    --bg0: black;
+    --bg1: black;
+    --bg2: black;
+    --bg3: black;
+
+    --fg0: white;
+    --fg1: white;
+    --fg2: white;
+    --fg3: white;
+
+    --k-card-border: white;
+    --k-color-border: white;
+    --k-color-divider: white;
+  }
+}

package/app/styles/index.scss

@@ -0,0 +1,140 @@
+@use 'sass:color';
+@use './layout.scss';
+@use './element.scss';
+@use './hc.scss';
+
+$black: #000000;
+$white: #ffffff;
+
+:root, .theme-root.light {
+  --bg0: #ffffff;
+  --bg1: #f9f9fa;
+  --bg2: #f0f0f2;
+  --bg3: #e3e3e5;
+
+  --fg0: #000000;
+  --fg1: rgba(40, 40, 44);
+  --fg2: rgba(40, 40, 44, .7);
+  --fg3: rgba(40, 40, 44, .4);
+
+  --hover-inset: 0 0 2px inset #0002;
+
+  --k-card-bg: var(--bg0);
+  --k-card-border: var(--k-card-bg);
+  --k-card-shadow: 0 4px 8px -4px rgb(0 0 0 / 15%);
+  --k-menu-bg: var(--bg0);
+  --k-main-bg: var(--bg0);
+  --k-side-bg: var(--bg1);
+  --k-page-bg: var(--bg0);
+  --k-hover-bg: var(--bg3);
+  --k-activity-bg: var(--bg2);
+
+  --k-color-border: #c8c9cc;
+  --k-color-divider: #e0e4e8;
+  --k-color-disabled: #909399;
+
+  --k-text-dark: var(--fg1);
+  --k-text-normal: var(--fg2);
+  --k-text-light: var(--fg3);
+  --k-text-active: var(--k-color-primary);
+
+  --loading-mask-bg: #f2f3f5bf;
+
+  @mixin apply-color($name, $base) {
+    --k-color-#{$name}: #{$base};
+    --k-color-#{$name}-shade: #{color.mix($base, $black, 90%)};
+    --k-color-#{$name}-tint: #{color.mix($base, $white, 80%)};
+    --k-color-#{$name}-fade: #{color.adjust($base, $alpha: -0.9)};
+  }
+
+  @include apply-color(primary, #409eff);
+  @include apply-color(secondary, #909399);
+  @include apply-color(success, #67c23a);
+  @include apply-color(warning, #e49400);
+  @include apply-color(danger, #f56c6c);
+  @include apply-color(info, #909399);
+}
+
+html.dark, .theme-root.dark {
+  --bg0: #000000;
+  --bg1: #1e1e20;
+  --bg2: #252529;
+  --bg3: #313136;
+
+  --fg0: #ffffff;
+  --fg1: rgba(255, 255, 245, .9);
+  --fg2: rgba(255, 255, 245, .6);
+  --fg3: rgba(255, 255, 245, .4);
+
+  --k-card-bg: var(--bg2);
+  --k-card-border: var(--k-color-divider);
+  --k-card-shadow: 0 4px 8px -4px rgb(0 0 0 / 15%);
+  --k-menu-bg: var(--bg0);
+  --k-main-bg: var(--bg3);
+  --k-side-bg: var(--bg2);
+  --k-page-bg: var(--bg2);
+  --k-hover-bg: var(--bg3);
+  --k-activity-bg: var(--bg1);
+
+  --k-color-border: rgba(82, 82, 89, .8);
+  --k-color-divider: rgba(82, 82, 89, .5);
+  --k-color-disabled: #909399;
+
+  --k-text-dark: var(--fg1);
+  --k-text-normal: var(--fg2);
+  --k-text-light: var(--fg3);
+  --k-text-active: var(--k-text-dark);
+
+  --loading-mask-bg: #202225bf;
+
+  @mixin apply-color($name, $base) {
+    --k-color-#{$name}: #{$base};
+    --k-color-#{$name}-shade: #{color.mix($base, $black, 80%)};
+    --k-color-#{$name}-tint: #{color.mix($base, $white, 90%)};
+    --k-color-#{$name}-fade: #{color.adjust($base, $alpha: -0.9)};
+  }
+
+  @include apply-color(primary, #7459ff);
+  @include apply-color(secondary, #4f545c);
+  @include apply-color(success, #3ba55e);
+  @include apply-color(warning, #f9af1b);
+  @include apply-color(danger, #ff595a);
+  @include apply-color(info, #4f545c);
+}
+
+:root {
+  // transitions
+  --color-transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
+
+  // fonts
+  --font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+  --font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+
+  // fallback
+  --k-color-border-dark: var(--k-color-border);
+  --k-color-border-light: var(--k-color-divider);
+  --k-color-divider-dark: var(--k-color-divider);
+  --k-color-divider-light: var(--k-color-divider);
+
+  --k-fill-normal: var(--k-color-primary);
+  --k-fill-disabled: var(--k-color-disabled);
+
+  --k-menu-shadow: var(--k-card-shadow);
+
+  --k-button-hover-bg: var(--bg1);
+
+  // compatibility
+  --border: var(--k-color-border);
+  --divider: var(--k-color-divider);
+  --page-bg: var(--k-page-bg);
+  --hover-bg: var(--k-hover-bg);
+  --card-bg: var(--k-card-bg);
+  --card-shadow: var(--k-card-shadow);
+  --success: var(--k-color-success);
+  --error: var(--k-color-danger);
+  --danger: var(--k-color-danger);
+  --warning: var(--k-color-warning);
+  --active: var(--k-color-primary);
+  --primary: var(--k-color-primary);
+  --k-color-active: var(--active);
+}

package/app/styles/index.ts

@@ -0,0 +1,30 @@
+/**
+ * 全局样式插件：引入 app 级 SCSS，并注册四套内置主题
+ * （默认 / 高对比 × 明亮 / 暗色），供主题选择器列出与切换。
+ */
+
+import type { Context } from "@koishi-ce/client";
+
+import "./index.scss";
+
+export default function (ctx: Context) {
+	ctx.theme({
+		id: "default-light",
+		name: "Default Light",
+	});
+
+	ctx.theme({
+		id: "default-dark",
+		name: "Default Dark",
+	});
+
+	ctx.theme({
+		id: "hc-light",
+		name: "High Contrast Light",
+	});
+
+	ctx.theme({
+		id: "hc-dark",
+		name: "High Contrast Dark",
+	});
+}

package/app/styles/layout.scss

@@ -0,0 +1,92 @@
+:root {
+  --aside-width: 17.5rem;
+  --activity-width: 4rem;
+  --activity-padding: 0.5rem;
+  --activity-marker-width: 4px;
+  --activity-marker-height: 1.75rem;
+  --activity-icon-size: 1.5rem;
+  --header-height: 3rem;
+  --footer-height: 1.75rem;
+
+  --card-margin: 2rem;
+  --card-padding-vertical: 1.5rem;
+  --card-padding-horizontal: 1.5rem;
+
+  @media screen and (max-width: 768px) {
+    --aside-width: 17rem;
+    --activity-width: 3.5rem;
+    --activity-padding: 0.25rem;
+    --activity-icon-size: 1.375rem;
+    --card-margin: 1.5rem;
+    --card-padding-vertical: 1rem;
+    --card-padding-horizontal: 1rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    --card-margin: 1rem;
+    --card-padding-vertical: 0.75rem;
+    --card-padding-horizontal: 0.875rem;
+  }
+
+  @media screen and (max-width: 384px) {
+    --aside-width: calc(100vw - 2 * var(--activity-width));
+  }
+}
+
+.layout-left {
+  .el-tree {
+    margin-top: 0.5rem;
+    user-select: none;
+    line-height: 2.25rem;
+  }
+
+  .el-tree-node__expand-icon {
+    margin-left: 8px;
+  }
+
+  .el-tree-node {
+    &:focus:not(:hover):not(.is-active) > .el-tree-node__content {
+      background-color: unset;
+    }
+
+    &.is-disabled > .el-tree-node__content .label {
+      color: var(--k-text-light);
+    }
+
+    &.is-active > .el-tree-node__content {
+      background-color: var(--k-tree-bg-active, var(--k-hover-bg));
+      color: var(--active);
+    }
+  }
+
+  .el-tree-node__content {
+    line-height: 2rem;
+    height: 2rem;
+    transition: var(--color-transition);
+
+    .label {
+      font-size: 14px;
+      flex: 1 1 auto;
+      margin-right: 0.5rem;
+    }
+  }
+}
+
+.k-tab-menu-item {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  color: var(--k-text-light);
+  transition: var(--color-transition);
+
+  &:hover {
+    color: var(--k-text-dark);
+    background-color: var(--k-hover-bg);
+  }
+
+  &.active {
+    font-weight: bolder;
+    color: var(--active);
+  }
+}

package/app/theme/activity/button.vue

@@ -0,0 +1,97 @@
+<!--
+  活动栏单个图标按钮，也是拖拽排序的拖拽源：
+  拖起时向 dataTransfer 写入 "activity:<id>" 文本供落点组件识别。
+  无 id 的项（如溢出组的 "..." 图标）渲染为不可点击的 span。
+-->
+<template>
+  <component
+    :is="data.id ? 'k-activity-link' : 'span'"
+    class="activity-button"
+    draggable="true"
+    :id="data.id"
+    :class="{ 'dragging': isDragging }"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd">
+    <k-icon class="activity-button-icon" :name="data.icon"></k-icon>
+  </component>
+</template>
+
+<script lang="ts" setup>
+import type { Activity } from "@koishi-ce/client";
+import { ref } from "vue";
+
+const props = defineProps<{
+	data: Activity;
+}>();
+
+const isDragging = ref(false);
+
+function handleDragStart(event: DragEvent) {
+	isDragging.value = true;
+	// 约定的拖拽协议：以 "activity:" 前缀 + 活动 id 标识被拖动的活动项
+	event.dataTransfer.setData("text/plain", `activity:${props.data.id}`);
+}
+
+function handleDragEnd(event: DragEvent) {
+	isDragging.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+
+.activity-button {
+  height: calc(var(--activity-width) - 2 * var(--activity-padding));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  transition: var(--color-transition);
+  color: var(--k-text-light);
+  border-radius: var(--activity-padding);
+  cursor: pointer;
+
+  .activity-button-icon {
+    height: var(--activity-icon-size);
+    pointer-events: none;
+  }
+
+  &:hover, &.dragging {
+    color: var(--k-text-dark);
+    background-color: var(--k-hover-bg);
+  }
+
+  &.active {
+    color: var(--k-text-active);
+  }
+
+  .badge {
+    position: absolute;
+    border-radius: 1rem;
+    color: #ffffff;
+    background-color: var(--k-color-danger);
+    top: 50%;
+    right: 1.5rem;
+    transform: translateY(-50%);
+    line-height: 1;
+    padding: 4px 8px;
+    font-size: 0.75rem;
+    font-weight: bolder;
+    transition: var(--color-transition);
+  }
+
+  &.is-group {
+    &::before {
+      content: "";
+      position: absolute;
+      right: 0;
+      bottom: 4px;
+      width: 0;
+      height: 0;
+      border: 4px solid;
+      border-color: transparent transparent transparent currentColor;
+      transition: var(--color-transition);
+    }
+  }
+}
+
+</style>