refactor: organize features and standardize frontend tooling
Colocate feature views, components, stores, and upload logic; centralize shared map utilities without changing API behavior. Add ESLint, Prettier, EditorConfig, and VS Code settings; standardize four-space indentation and document the project structure and checks. Validation: npm run check, npm run build, and git diff --check.
This commit is contained in:
+19
-25
@@ -4,14 +4,14 @@
|
||||
|
||||
## 分层
|
||||
|
||||
| 层级 | 文件 | 职责 |
|
||||
| --- | --- | --- |
|
||||
| 设计令牌 | `src/styles/tokens.css` | 颜色、字体、渐变、阴影、动效时长等稳定决策 |
|
||||
| 基础规则 | `src/styles/base.css` | 页面基线、选中文本、全局圆角策略 |
|
||||
| 组件规则 | `src/styles/components.css` | 页面 Hero、容器、表单、面板、按钮等共享语义类 |
|
||||
| 第三方主题 | `src/lib/theme.ts` | Naive UI 的全局主题契约;值应与设计令牌保持一致 |
|
||||
| 单组件样式 | Vue 文件的 `<style scoped>` | 只属于一个功能的滑杆、动画、地图或媒体细节 |
|
||||
| 一次性布局 | Vue 模板中的 Tailwind 类 | flex/grid、间距、响应式排列及确实只出现一次的视觉调整 |
|
||||
| 层级 | 文件 | 职责 |
|
||||
| ---------- | --------------------------- | ----------------------------------------------------- |
|
||||
| 设计令牌 | `src/styles/tokens.css` | 颜色、字体、渐变、阴影、动效时长等稳定决策 |
|
||||
| 基础规则 | `src/styles/base.css` | 页面基线、选中文本、全局圆角策略 |
|
||||
| 组件规则 | `src/styles/components.css` | 页面 Hero、容器、表单、面板、按钮等共享语义类 |
|
||||
| 第三方主题 | `src/lib/theme.ts` | Naive UI 的全局主题契约;值应与设计令牌保持一致 |
|
||||
| 单组件样式 | Vue 文件的 `<style scoped>` | 只属于一个功能的滑杆、动画、地图或媒体细节 |
|
||||
| 一次性布局 | Vue 模板中的 Tailwind 类 | flex/grid、间距、响应式排列及确实只出现一次的视觉调整 |
|
||||
|
||||
`src/style.css` 只负责按以上顺序装配全局样式,不再直接堆放组件规则。
|
||||
|
||||
@@ -25,8 +25,8 @@ OpenCloud 的绿色应接近清晨的桉叶与嫩叶,而不是灰暗的苔藓
|
||||
- 不直接使用 Tailwind 默认 `green-*`、`lime-*`,也不要在组件里写亮绿色十六进制值或 RGB。
|
||||
- 新增绿色前先判断它属于品牌交互还是成功状态,并优先使用已有语义类或设计令牌。
|
||||
|
||||
| 语义 | 主色 | 深色 | 浅色表面 |
|
||||
| --- | --- | --- | --- |
|
||||
| 语义 | 主色 | 深色 | 浅色表面 |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| 品牌/交互 | `#34745d` | `#274c40` | `#f2faf6` |
|
||||
| 成功/通过 | `#4d7f3b` | `#35522c` | `#f4faef` |
|
||||
|
||||
@@ -44,15 +44,15 @@ OpenCloud 的绿色应接近清晨的桉叶与嫩叶,而不是灰暗的苔藓
|
||||
|
||||
```html
|
||||
<section class="oc-page-hero">
|
||||
<div class="oc-container oc-container--content oc-page-hero__inner">
|
||||
<p class="oc-page-eyebrow">Cloud Upload</p>
|
||||
<h1 class="oc-page-title">上传云图</h1>
|
||||
<p class="oc-page-description">页面描述</p>
|
||||
</div>
|
||||
<div class="oc-container oc-container--content oc-page-hero__inner">
|
||||
<p class="oc-page-eyebrow">Cloud Upload</p>
|
||||
<h1 class="oc-page-title">上传云图</h1>
|
||||
<p class="oc-page-description">页面描述</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="oc-container oc-container--content oc-page-content">
|
||||
<!-- 页面内容 -->
|
||||
<!-- 页面内容 -->
|
||||
</main>
|
||||
```
|
||||
|
||||
@@ -63,9 +63,7 @@ Hero 同时包含左侧介绍和右侧状态卡时,使用 `oc-page-hero__split
|
||||
### 表单
|
||||
|
||||
```html
|
||||
<label class="oc-field-label">
|
||||
拍摄时间 <span class="oc-field-required">*</span>
|
||||
</label>
|
||||
<label class="oc-field-label"> 拍摄时间 <span class="oc-field-required">*</span> </label>
|
||||
<input class="oc-field-control" />
|
||||
<p class="oc-field-help">补充说明</p>
|
||||
<p class="oc-field-error">错误信息</p>
|
||||
@@ -88,12 +86,8 @@ Hero 同时包含左侧介绍和右侧状态卡时,使用 `oc-page-hero__split
|
||||
Naive UI 按钮继续使用 `type="default"`,视觉语义由共享类控制:
|
||||
|
||||
```html
|
||||
<NButton class="oc-panel-button oc-panel-button--neutral" type="default">
|
||||
取消
|
||||
</NButton>
|
||||
<NButton class="oc-panel-button oc-panel-button--sky" type="default">
|
||||
保存
|
||||
</NButton>
|
||||
<NButton class="oc-panel-button oc-panel-button--neutral" type="default"> 取消 </NButton>
|
||||
<NButton class="oc-panel-button oc-panel-button--sky" type="default"> 保存 </NButton>
|
||||
```
|
||||
|
||||
页面级主操作使用 `oc-primary-button`;面板内操作使用 `oc-panel-button`。可用变体为 `neutral`、`sky`、`teal`、`amber`、`danger`,不要临时创建新的强调色。其中 `teal` 是兼容命名,视觉上使用的是清新桉叶绿。
|
||||
|
||||
Reference in New Issue
Block a user