diff --git a/.github/release-template.md b/.github/release-template.md index f292779..f470899 100644 --- a/.github/release-template.md +++ b/.github/release-template.md @@ -1,4 +1,4 @@ -## ✨ Feat +## ✨ Feature #### CSS 变量 diff --git a/.github/release.md b/.github/release.md index 6cb77e6..d415ab0 100644 --- a/.github/release.md +++ b/.github/release.md @@ -1,7 +1,20 @@ +## ✨ Feature + +#### CSS 变量 + +- 支持自定义探索/组织/用户页面的仓库列表列数 +- 支持自定义探索/组织页面的用户/组织列表列数 + ## 🌈 Style #### 更符合 GitHub 风格 - 同步 Issue/PR 的评论样式 - 同步表情菜单样式 -- 同步探索页面仓库样式 +- 同步探索/组织/用户页面的仓库列表样式 +- 同步探索/组织页面的用户列表样式 +- 同步探索页面的组织列表样式 + +## 🐞 Fix + +- 修复探索页面下仓库的类型标签意外触发悬浮效果 diff --git a/README.md b/README.md index cd79f0c..592352e 100644 --- a/README.md +++ b/README.md @@ -51,9 +51,14 @@ THEMES = gitea-dark, github-dark ### CSS 变量 -| 变量名 | 描述 | Gitea (默认值) | Github | 推荐 | 最小值 | 最大值 | -| :------------------------ | :----------- | :------------- | :----- | :---- | :----- | :----- | -| --custom-clone-menu-width | 克隆菜单宽度 | 232px | 332px | 200px | 150px | 400px | +| 变量名 | 描述 | 默认值 | Github | 推荐 | 最小值 | 最大值 | +| :-------------------------------- | :-------------------------- | :----- | :----- | :---- | :----- | :----- | +| --custom-clone-menu-width | 克隆菜单宽度 | Gitea | 332px | 200px | 150px | 400px | +| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | | +| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | | +| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 2 | | | +| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1 | | | +| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 2 | | | ## 截图 diff --git a/TODO.md b/TODO.md index 87de43c..e9eb7d5 100644 --- a/TODO.md +++ b/TODO.md @@ -1,7 +1,6 @@ ### 重大 - gitea issue 默认标签颜色匹配使用 github 样式 -- 探索/组织/用户仓库样式 github 布局 - issue/PR 列表样式 github 布局 - styles/themes 库组件导出整理 - defineTheme 颜色生成代码重构 diff --git a/src/core/types.ts b/src/core/types.ts index 43b5b3d..116709a 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -1,8 +1,8 @@ type Primitive = string | boolean | number | null | undefined; type Tokens = { [key: string]: string | Tokens }; +export type CSSVarFunction = `var(--${string})`; export type WithOptionalLayer = T & { "@layer"?: string }; - export type MapLeafNodes = { [Prop in keyof Obj]: Obj[Prop] extends Primitive ? LeafType diff --git a/src/functions/index.ts b/src/functions/index.ts index ba14d2b..c703d21 100644 --- a/src/functions/index.ts +++ b/src/functions/index.ts @@ -1 +1,2 @@ export { scaleColorLight } from "./scss"; +export { fallbackVar } from "./var"; diff --git a/src/functions/var.ts b/src/functions/var.ts new file mode 100644 index 0000000..90a9996 --- /dev/null +++ b/src/functions/var.ts @@ -0,0 +1,7 @@ +import type { CSSVarFunction } from "src/core/types"; + +type CSSFallbackVar = `var(--${string}, ${string})`; +export function fallbackVar(cssvar: CSSVarFunction, fallback: string): CSSFallbackVar { + const var_name = cssvar.replace("var(--", "").replace(")", ""); + return `var(--${var_name}, ${fallback})`; +} diff --git a/src/types/vars.ts b/src/types/vars.ts index b318ce7..84f33a3 100644 --- a/src/types/vars.ts +++ b/src/types/vars.ts @@ -38,6 +38,15 @@ const otherVars = { const customVars = { custom: { cloneMenuWidth: "custom-clone-menu-width", + explore: { + repolistColumns: "custom-explore-repolist-columns", + userlistColumns: "custom-explore-userlist-columns", + }, + userRepolistColumns: "custom-user-repolist-columns", + org: { + repolistColumns: "custom-org-repolist-columns", + userlistColumns: "custom-org-userlist-columns", + }, }, }; diff --git a/styles/components/clone.ts b/styles/components/clone.ts index 1c65558..e080b4a 100644 --- a/styles/components/clone.ts +++ b/styles/components/clone.ts @@ -1,4 +1,4 @@ -import { css, otherThemeVars, themeVars, customThemeVars } from "src/types/vars"; +import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; // 克隆按钮的弹窗 export const clone = css` diff --git a/styles/components/explore.ts b/styles/components/explore.ts index 9f1d10e..c612b02 100644 --- a/styles/components/explore.ts +++ b/styles/components/explore.ts @@ -1,19 +1,20 @@ -import { css, otherThemeVars, themeVars } from "src/types/vars"; +import { fallbackVar } from "src/functions"; +import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; + +const userRepoVar = fallbackVar(customThemeVars.custom.userRepolistColumns, "2"); +const exploreRepoVar = fallbackVar(customThemeVars.custom.explore.repolistColumns, "2"); +const orgRepoVar = fallbackVar(customThemeVars.custom.org.repolistColumns, "1"); // 仓库列表 -export const repositoriesExplore = css` - // [TODO] 组织和用户使用 Github 的列表样式, 探索页面手机端样式待完善 +export const repoList = css` // 组织 - /* .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven, */ + .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven, // 用户 - /* .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve, */ + .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve, // 探索 .page-content.explore.repositories > .ui.container { > .flex-list { display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 16px; - > .flex-item { border: 1px solid ${themeVars.color.light.border}; border-radius: ${otherThemeVars.border.radius}; @@ -46,7 +47,9 @@ export const repositoriesExplore = css` color: ${themeVars.color.text.light.num1}; gap: 16px; font-size: 12px; - > .flex-text-inline .tw-mr-2 { + > .flex-text-inline .color-icon { + width: 12px; + height: 12px; margin-right: 0 !important; } } @@ -67,4 +70,92 @@ export const repositoriesExplore = css` } } } + // 仓库列表列数 + // 组织 + .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven > .flex-list { + grid-template-columns: repeat(${orgRepoVar}, 1fr); + gap: min(${orgRepoVar} * 8px, 16px); + } + // 用户 + .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve > .flex-list { + grid-template-columns: repeat(${userRepoVar}, 1fr); + gap: min(${userRepoVar} * 8px, 16px); + } + // 探索 + .page-content.explore.repositories > .ui.container > .flex-list { + grid-template-columns: repeat(${exploreRepoVar}, 1fr); + gap: min(${exploreRepoVar} * 8px, 16px); + } +`; + +const exploreUserVar = fallbackVar(customThemeVars.custom.explore.userlistColumns, "3"); +const orgUserVar = fallbackVar(customThemeVars.custom.org.userlistColumns, "2"); + +// 用户列表 +export const userList = css` + // 组织 + .page-content.organization.members > .ui.container, + // 探索的用户和组织 + .page-content.explore.users > .ui.container { + > .flex-list { + display: grid; + > .flex-item { + border: 1px solid ${themeVars.color.light.border}; + border-radius: ${otherThemeVars.border.radius}; + padding: 16px; + > .flex-item-main { + // 用户名称 + > .flex-item-title { + gap: 8px; + margin-bottom: 8px; + // 用户标签 + > .label { + font-size: 12px; + padding: 3px 6px; + } + } + // 用户描述 + > .flex-item-body { + font-size: 12px; + svg { + width: 12px; + min-width: 12px; + } + } + } + } + } + } + // 用户列表列数 + // 组织 + .page-content.organization.members > .ui.container > .flex-list { + grid-template-columns: repeat(${orgUserVar}, 1fr); + gap: min(${orgUserVar} * 8px, 16px); + } + // 探索的用户和组织 + .page-content.explore.users > .ui.container > .flex-list { + grid-template-columns: repeat(${exploreUserVar}, 1fr); + gap: min(${exploreUserVar} * 8px, 16px); + } +`; + +// 手机下的仓库和用户列表 +export const mobileList = css` + @media (max-width: 767.98px) { + // 组织的仓库列表 + .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven, + // 用户的仓库列表 + .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve, + // 探索的仓库列表 + .page-content.explore.repositories > .ui.container, + // 组织的成员列表 + .page-content.organization.members >.ui.container, + // 探索的用户和组织列表 + .page-content.explore.users >.ui.container { + > .flex-list { + grid-template-columns: 1fr; + gap: 8px; + } + } + } `;