@gct-paas/scss 0.1.6-dev.8 → 6.0.0-dev.1

package/README.md

@@ -1,3 +1,85 @@
+# @gct-paas/scss
+
+PaaS 平台样式框架包。提供 BEM 命名、主题 CSS 变量、全局 SCSS 入口及 TS 侧 `useNamespace` 辅助。被 `core-components`、`core-web`、`v-ben` 及上层 design/render 包依赖。
+
+> 本文档面向后续开发与 AI 模型阅读。下文「样式工具文档」章节为 SCSS functions/mixins API 参考。
+
+## 包信息
+
+| 项 | 值 |
+| --- | --- |
+| 包名 | `@gct-paas/scss` |
+| 入口 | `es/index.mjs`（类型：`es/index.d.ts`） |
+| 样式入口 | `@gct-paas/scss/style/global.scss`、`@gct-paas/scss/style/index.scss` |
+| peer | 无（宿主仅需 Vue 3 用于 TS 导出） |
+
+```ts
+import { useNamespace } from '@gct-paas/scss';
+// 或从 @gct-paas/core 再导出（推荐与 core 一致）
+import '@gct-paas/scss/style/index.scss';
+```
+
+---
+
+## 在 monorepo 中的位置
+
+```
+scss（样式基础层，无 _gct 依赖）
+ ├── core-components / v-ben / core-web
+ └── design / render 及其 *-web 层
+```
+
+规划中端侧包（`core-mobile` / `core-pad` 等）同样依赖本包。
+
+---
+
+## 依赖说明
+
+| 依赖 | 用途 |
+| --- | --- |
+| `normalize.css` | 浏览器样式重置 |
+| `vue` | TS 侧 `Namespace` / `useNamespace` 构建依赖 |
+
+---
+
+## 源码结构
+
+```
+packages/scss/
+├── src/utils/namespace/   # Namespace、useNamespace（与 core 逻辑对齐）
+├── style/                 # global.scss、index.scss、mixins、functions、tokens
+└── README.md              # 本文件（含下方 SCSS API 表）
+```
+
+---
+
+## 与 `_gct` 的关系
+
+**不挂载、不依赖 `_gct`。** 纯样式与 BEM 工具层。
+
+- **TS BEM**：组件内优先 `useNamespace('block')`（也可从 `@gct-paas/core` 导入，底层同源）
+- **SCSS BEM**：`@include b/e/m/when`，详见 `.agents/skills/gct-bem-best/SKILL.md`
+- **CSS 变量三步法**：define map → `set-component-css-var` → `getCssVar`
+
+---
+
+## 给后续模型的约束
+
+1. 组件样式类名走 BEM，禁止手写 `gct-xxx` 拼接。
+2. 全局样式通过 `@gct-paas/scss/style/global.scss` 或 `index.scss` 引入，不要复制 mixin 源码。
+3. 本包无运行时初始化，引入 SCSS/TS 即可。
+
+---
+
+## 本地命令
+
+```bash
+cd packages/scss
+npm run dev
+npm run build
+```
+
+---
 
 # 样式工具文档
 

package/dist/index.esm.min.js

@@ -1 +1,2 @@
-function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(e,r,n){return(r=function(e){var r=function(e){if("object"!=t(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,"string");if("object"!=t(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==t(r)?r:r+""}(r))in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function r(t,e,r,n,o){let s=`${t}-${e}`;return r&&(s+=`-${r}`),n&&(s+=`__${n}`),o&&(s+=`--${o}`),s}var n=class{constructor(t,r){e(this,"block",void 0),e(this,"namespace",void 0),this.block=t,this.namespace=r||"gct"}b(t=""){return r(this.namespace,this.block,t,"","")}e(t){return t?r(this.namespace,this.block,"",t,""):""}m(t){return t?r(this.namespace,this.block,"","",t):""}be(t,e){return t&&e?r(this.namespace,this.block,t,e,""):""}em(t,e){return t&&e?r(this.namespace,this.block,"",t,e):""}bm(t,e){return t&&e?r(this.namespace,this.block,t,"",e):""}bem(t,e,n){return t&&e&&n?r(this.namespace,this.block,t,e,n):""}is(t,e){return t&&e?`is-${t}`:""}cssVar(t){const e={};for(const r in t)t[r]&&(e[this.cssVarName(r)]=t[r]);return e}cssVarBlock(t){const e={};for(const r in t)t[r]&&(e[this.cssVarBlockName(r)]=t[r]);return e}cssVarName(t){return`--${this.namespace}-${t}`}cssVarBlockName(t){return`--${this.namespace}-${this.block}-${t}`}};export{n as Namespace};
+/*! @gct-paas/scss v6.0.0-dev.1 */
+function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(e,r,n){return(r=function(e){var r=function(e){if("object"!=t(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,"string");if("object"!=t(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==t(r)?r:r+""}(r))in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function r(t,e,r,n,o){let s=`${t}-${e}`;return r&&(s+=`-${r}`),n&&(s+=`__${n}`),o&&(s+=`--${o}`),s}var n=class{constructor(t,r){e(this,"block",void 0),e(this,"namespace",void 0),this.block=t,this.namespace=r||"gct"}b(t=""){return r(this.namespace,this.block,t,"","")}e(t){return t?r(this.namespace,this.block,"",t,""):""}m(t){return t?r(this.namespace,this.block,"","",t):""}be(t,e){return t&&e?r(this.namespace,this.block,t,e,""):""}em(t,e){return t&&e?r(this.namespace,this.block,"",t,e):""}bm(t,e){return t&&e?r(this.namespace,this.block,t,"",e):""}bem(t,e,n){return t&&e&&n?r(this.namespace,this.block,t,e,n):""}is(t,e){return t&&e?`is-${t}`:""}cssVar(t){const e={};for(const r in t)t[r]&&(e[this.cssVarName(r)]=t[r]);return e}cssVarBlock(t){const e={};for(const r in t)t[r]&&(e[this.cssVarBlockName(r)]=t[r]);return e}cssVarName(t){return`--${this.namespace}-${t}`}cssVarBlockName(t){return`--${this.namespace}-${this.block}-${t}`}};function o(t){return new n(t)}export{n as Namespace,o as useNamespace};

package/docs/theme-tokens.md

@@ -24,6 +24,36 @@ This document outlines all design tokens available in the light theme.
 | `--gct--blue-11` | RGB(1, 60, 114) |
 | `--gct--blue-12` | RGB(1, 48, 90) |
 
+#### Runtime Theme Color (Light)
+
+Light theme supports two pre-defined primary palettes, switched via CSS class on `html`:
+
+| `themeSetting.themeColor` | Class on `html` | Blue-8 (Primary) |
+|---------------------------|-----------------|------------------|
+| `#026AC8` (default) | _(none)_ | RGB(2, 106, 200) |
+| `#0DAA9C` | `theme-color-teal` | RGB(13, 170, 156) |
+
+When `theme-color-teal` is present on `.light` / `.light-theme`, only `--gct-blue-1` through `--gct-blue-12` are overridden. Semantic tokens (`--gct-color-primary`, info, link, border hover/active) cascade automatically.
+
+**Teal palette** (`theme-color-teal`):
+
+| Token | Value |
+|-------|-------|
+| `--gct--blue-1` | RGB(248, 252, 252) |
+| `--gct--blue-2` | RGB(233, 247, 246) |
+| `--gct--blue-3` | RGB(211, 240, 237) |
+| `--gct--blue-4` | RGB(207, 238, 235) |
+| `--gct--blue-5` | RGB(170, 225, 220) |
+| `--gct--blue-6` | RGB(134, 213, 206) |
+| `--gct--blue-7` | RGB(66, 189, 178) |
+| `--gct--blue-8` | RGB(13, 170, 156) |
+| `--gct--blue-9` | RGB(12, 156, 144) |
+| `--gct--blue-10` | RGB(11, 139, 128) |
+| `--gct--blue-11` | RGB(9, 122, 112) |
+| `--gct--blue-12` | RGB(8, 109, 100) |
+
+Switching is handled by `useThemeSetting` in `@gct-paas/core` — set `themeSetting.themeColor` to one of `THEME_COLORS` (`#026AC8` | `#0DAA9C`).
+
 ### Red (Danger)
 | Token | Value |
 |-------|-------|

package/es/index.mjs

@@ -1,2 +1,2 @@
-import { Namespace } from "./utils/namespace/namespace.mjs";
-export { Namespace };
+import { Namespace, useNamespace } from "./utils/namespace/namespace.mjs";
+export { Namespace, useNamespace };

package/es/utils/index.d.ts

@@ -1 +1 @@
-export { Namespace } from './namespace/namespace';
+export { Namespace, useNamespace } from './namespace/namespace';

package/es/utils/namespace/namespace.d.ts

@@ -115,3 +115,11 @@ export declare class Namespace {
      */
     cssVarBlockName(name: string): string;
 }
+/**
+ * 获取 bem 操作类
+ *
+ * @export
+ * @param {string} block
+ * @return {*}  {Namespace}
+ */
+export declare function useNamespace(block: string): Namespace;

package/es/utils/namespace/namespace.mjs

@@ -168,5 +168,15 @@ var Namespace = class {
 		return `--${this.namespace}-${this.block}-${name}`;
 	}
 };
+/**
+* 获取 bem 操作类
+*
+* @export
+* @param {string} block
+* @return {*}  {Namespace}
+*/
+function useNamespace(block) {
+	return new Namespace(block);
+}
 //#endregion
-export { Namespace };
+export { Namespace, useNamespace };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gct-paas/scss",
-  "version": "0.1.6-dev.8",
+  "version": "6.0.0-dev.1",
   "type": "module",
   "loader": "dist/index.esm.min.js",
   "description": "paas 平台样式框架包",

package/style/generic/antv.scss

@@ -0,0 +1,13 @@
+.light {
+  .ant-btn-success {
+    color: var(--gct-color-success);
+  }
+
+  .ant-btn-error {
+    color: var(--gct-color-danger);
+  }
+
+  .ant-btn-warning {
+    color: var(--gct-color-warning);
+  }
+}

package/style/generic/base.scss

@@ -0,0 +1,78 @@
+// ! nprogress 样式
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1031;
+  width: 100%;
+  height: 2px;
+  background: #29d;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  position: absolute;
+  right: 0;
+  display: block;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1.0;
+  transform: rotate(3deg) translate(0, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  position: fixed;
+  top: 15px;
+  right: 15px;
+  z-index: 1031;
+  display: block;
+}
+
+#nprogress .spinner-icon {
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  position: relative;
+  overflow: hidden;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// ! nprogress 样式 End
+
+body.color-weak {
+  filter: invert(80%);
+}
+
+body.gray-mode {
+  filter: grayscale(100%);
+}

package/style/generic/index.scss

@@ -1,4 +1,5 @@
 /** 重置标准化样式、框大小定义等，例如 normalize.css、reset.css **/
-@forward './ant-design-vue';
 @forward './reset';
+@forward './base';
+@forward './antv';
 @forward './vant';

package/style/theme/light/_blue-palettes.scss

@@ -0,0 +1,33 @@
+@use '../../global.scss' as *;
+
+// 默认主色 #026AC8
+@mixin blue-palette-blue {
+  #{getCssVarName(blue, 1)}: 246, 250, 253;
+  #{getCssVarName(blue, 2)}: 226, 238, 249;
+  #{getCssVarName(blue, 3)}: 200, 223, 243;
+  #{getCssVarName(blue, 4)}: 191, 216, 242;
+  #{getCssVarName(blue, 5)}: 144, 187, 233;
+  #{getCssVarName(blue, 6)}: 91, 156, 225;
+  #{getCssVarName(blue, 7)}: 48, 126, 210;
+  #{getCssVarName(blue, 8)}: 2, 106, 200;
+  #{getCssVarName(blue, 9)}: 2, 90, 170;
+  #{getCssVarName(blue, 10)}: 1, 75, 142;
+  #{getCssVarName(blue, 11)}: 1, 60, 114;
+  #{getCssVarName(blue, 12)}: 1, 48, 90;
+}
+
+// 青绿主色 #0DAA9C
+@mixin blue-palette-teal {
+  #{getCssVarName(blue, 1)}: 248, 252, 252;
+  #{getCssVarName(blue, 2)}: 233, 247, 246;
+  #{getCssVarName(blue, 3)}: 211, 240, 237;
+  #{getCssVarName(blue, 4)}: 207, 238, 235;
+  #{getCssVarName(blue, 5)}: 170, 225, 220;
+  #{getCssVarName(blue, 6)}: 134, 213, 206;
+  #{getCssVarName(blue, 7)}: 66, 189, 178;
+  #{getCssVarName(blue, 8)}: 13, 170, 156;
+  #{getCssVarName(blue, 9)}: 12, 156, 144;
+  #{getCssVarName(blue, 10)}: 11, 139, 128;
+  #{getCssVarName(blue, 11)}: 9, 122, 112;
+  #{getCssVarName(blue, 12)}: 8, 109, 100;
+}

package/style/theme/light/light-theme.scss

@@ -1,22 +1,11 @@
 @use '../../global.scss' as *;
+@use './blue-palettes' as *;
 
 .light, .light-theme {
   #{getCssVarName(color, white)}: white;
   #{getCssVarName(color, black)}: black;
 
-  // 主色
-  #{getCssVarName(blue, 1)}: 246, 250, 253;
-  #{getCssVarName(blue, 2)}: 226, 238, 249;
-  #{getCssVarName(blue, 3)}: 200, 223, 243;
-  #{getCssVarName(blue, 4)}: 191, 216, 242;
-  #{getCssVarName(blue, 5)}: 144, 187, 233;
-  #{getCssVarName(blue, 6)}: 91, 156, 225;
-  #{getCssVarName(blue, 7)}: 48, 126, 210;
-  #{getCssVarName(blue, 8)}: 2, 106, 200;
-  #{getCssVarName(blue, 9)}: 2, 90, 170;
-  #{getCssVarName(blue, 10)}: 1, 75, 142;
-  #{getCssVarName(blue, 11)}: 1, 60, 114;
-  #{getCssVarName(blue, 12)}: 1, 48, 90;
+  @include blue-palette-blue;
 
   // 危险色
   #{getCssVarName(red, 1)}: 254, 236, 221;
@@ -280,3 +269,8 @@
   #{getCssVarName(z-index, l)}: 2000;
   #{getCssVarName(z-index, xl)}: 9999;
 }
+
+.light.theme-color-teal,
+.light-theme.theme-color-teal {
+  @include blue-palette-teal;
+}

package/style/generic/ant-design-vue.scss

@@ -1,303 +0,0 @@
-@use '../global.scss' as *;
-
-// 用于重置覆盖 ant-design-vue 的样式
-.light {
-  --ant-primary-color: var(--gct-color-primary);
-  --ant-primary-color-hover: var(--gct-color-primary-hover);
-  --ant-primary-color-active: var(--gct-color-primary-active);
-}
-
-input:-webkit-autofill {
-  box-shadow: 0 0 0 1000px white inset !important;
-}
-
-:-webkit-autofill {
-  transition: background-color 5000s ease-in-out 0s !important;
-}
-
-html {
-  overflow: hidden;
-  text-size-adjust: 100%;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  overflow-x: hidden;
-  overscroll-behavior: none;
-
-  // overflow: hidden;
-
-  &.color-weak {
-    filter: invert(80%);
-  }
-
-  &.gray-mode {
-    filter: grayscale(100%);
-    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
-  }
-
-  .copy-main {
-    box-sizing: border-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all; /* 任意字符处都可换行（包括单词中间） */
-    overflow-wrap: break-word; /* 允许在单词内换行 */
-    outline: none;
-    background-color: #fff;
-
-    // display: table;
-    border: 1px dashed #e8ebf0;
-
-    .copy-rich-text {
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      word-break: break-all; /* 任意字符处都可换行（包括单词中间） */
-      overflow-wrap: break-word; /* 允许在单词内换行 */
-
-      span {
-        line-height: 1;
-      }
-
-      p {
-        margin-bottom: 12px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-
-#app {
-  overflow: auto;
-
-  // & > *:not(.is-empty-page) {
-  //   min-width: 1280px;
-  // }
-}
-
-a:focus,
-a:active,
-button,
-div,
-svg,
-/* stylelint-disable-next-line no-descending-specificity */
-span {
-  outline: none;
-}
-
-.primary-gct {
-  color: #{getCssVar(color-primary)} !important;
-}
-
-.warning-gct {
-  color: #{getCssVar(color-warning)} !important;
-}
-
-.error-gct {
-  color: #{getCssVar(color-error)} !important;
-}
-
-.success-gct {
-  color: #{getCssVar(color-success)} !important;
-}
-
-.primary-gct-hover:hover {
-  color: #{getCssVar(color-primary)} !important;
-}
-
-.warning-gct-hover:hover {
-  color: #{getCssVar(color-warning)} !important;
-}
-
-.error-gct-hover:hover {
-  color: #{getCssVar(color-error)} !important;
-}
-
-.success-gct-hover:hover {
-  color: #{getCssVar(color-success)} !important;
-}
-
-.box-full {
-  width: 100%;
-  height: 100%;
-}
-
-.gct-divider__vertical {
-  display: inline-block;
-  height: var(--size, 14px);
-  margin-right: var(--space-r, 12px);
-  margin-left: var(--space-l, 12px);
-  border-left: 1px solid var(--color, #eaeaea);
-}
-
-// css描述 覆盖antd样式
-// tab组件左上方间距
-.ant-tabs.--tl-space {
-  .ant-tabs-nav {
-    padding-left: 24px;
-  }
-}
-
-// //拖拽样式
-.drawing-chosen {
-  background-color: rgb(13 170 156 / 10%) !important;
-}
-
-.simple-upload-model.ant-modal {
-  .ant-modal-header {
-    padding-right: 50px;
-  }
-}
-
-.gct-text-overflow {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  white-space: nowrap;
-}
-
-a[danger] {
-  color: var(--ant-error-color);
-}
-
-// textarea关闭resize，数字提示位置调整
-div.ant-input-textarea.ant-input-textarea-show-count {
-  position: relative;
-
-  textarea {
-    resize: none;
-  }
-
-  &.ant-input-textarea-show-count::after {
-    position: absolute;
-    right: 12px;
-    bottom: 1px;
-    margin: 0;
-  }
-}
-
-// 修改组件默认圆角大小
-button.ant-btn,
-span.ant-input-affix-wrapper,
-textarea.ant-input,
-div.ant-input-number,
-div.ant-select:not(.ant-select-customize-input) .ant-select-selector,
-div.ant-picker,
-div.ant-input-number-group-addon {
-  border-radius: 4px;
-}
-
-input.ant-input {
-  border-radius: 0;
-}
-
-.ant-input-group.ant-input-group-compact > .ant-select:first-child > div.ant-select-selector,
-span.ant-input-group.ant-input-group-compact > :first-child,
-span.ant-input-group-addon {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-span.ant-input-group.ant-input-group-compact > :last-child,
-span.ant-input-group-addon:last-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.gct-number-input {
-  &.ant-input-number {
-    border-right-width: 0;
-
-    &:hover {
-      border-right-width: 1px;
-    }
-  }
-
-  .ant-input-number-group-addon {
-    font-size: 14px;
-    background-color: #fff;
-  }
-}
-
-.gct-edhr-table {
-  .ant-spin-nested-loading > div > .ant-spin {
-    max-height: 100%;
-  }
-}
-
-.gct-edhr-auto-size-table {
-  position: relative;
-  height: 100%;
-  overflow: hidden;
-
-  .ant-spin-nested-loading {
-    position: absolute;
-    inset: 0;
-    height: 100%;
-    overflow: hidden;
-
-    .ant-spin-container {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-
-      .ant-table {
-        flex: 1;
-        overflow: hidden;
-      }
-
-      .ant-table-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        overflow: hidden;
-
-        .ant-table-body {
-          flex: 1;
-
-          // overflow: auto !important;
-        }
-      }
-    }
-  }
-}
-
-.gct-edhr-pagination {
-  .ant-pagination.ant-table-pagination {
-    margin-bottom: 0;
-  }
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.ant-table {
-  color: #212528;
-}
-
-.gct-border-dashed {
-  border: 2px dashed #dbdbdb;
-}
-
-// 无界应用内的 vue-devtools 容器隐藏
-.wujie-sub-app {
-  /* stylelint-disable-next-line selector-id-pattern */
-  #__vue-devtools-container__ {
-    display: none !important;
-  }
-}
-
-.ant-radio {
-  .ant-radio-inner {
-    border-color: var(--gct-color-border);
-  }
-}
-
-.is-hidden {
-  display: none !important;
-}