Static Resource Management Specification

1. Purpose

Static resources serve as the foundational carriers for page rendering, interactive display, and business enablement in software systems. Their standardization directly impacts system loading performance, compatibility, security, and iterative maintainability. To ensure consistency in resource naming, storage structure, format compression, and reference invocation across all products, Qiantong Technology has established this Static Resource Management Specification.

This specification consolidates the company's operational and development experience accumulated through long-term project practices, and has become the unified resource management standard followed across all Qiantong Technology products (including qKnow Knowledge Platform, qData Data Middle Platform, qThing IoT Platform, qModel Model Management Platform, etc.). Through standardized static resource management, the team can maintain unified resource standards and usage conventions across parallel multi-project development, version iteration, and environment deployment — optimizing page access speed, reducing server bandwidth consumption, and improving development delivery and operational management efficiency, ensuring products deliver high-quality experiences, compliance, and long-term iteration capabilities.

2. Directory Structure Specification

Rules

1. Directories must use English-only naming.

2. Use camelCase naming convention (e.g., camelCase).

3. Directory names should uniformly use module nouns (e.g., da, dp, dpp, ds).

4. Common directories should be named common.

5. Cross-module direct references are prohibited.

6. Resources referenced by ≥2 modules must be moved to the corresponding common/ subdirectory under each resource type.

7. Module resource directory depth is determined by file count: 15–20 files are placed flat under assets/[type]/[module]/; beyond that, subdirectories should be created by page or secondary module as assets/[type]/[module]/[page]/.

Example Structure

assets/
├── images/
│   ├── common/
│   ├── dp/
│   ├── ds/
│   └── qm/
├── icons/
│   ├── svg/
│   │   ├── common/
│   │   ├── dp/
│   │   └── ds/
│   └── iconfont/
│       └── font/
├── fonts/
│   ├── common/
│   └── dp/
├── styles/
│   ├── common/
│   ├── dp/
│   └── ds/

3. Image Resource Specification

Rules

File names use all-lowercase English + hyphen separators; single words require no hyphen.

Use kebab-case naming convention (e.g., kebab-case).

File naming format: [purpose-prefix]-[description].[extension]

Supported extensions: .png, .jpg, .svg, .webp, .gif

Common Prefixes

Prefix	Meaning	Example
bg-	Background	bg-login.jpg
logo-	Logo	logo-qdata.png
avatar-	Avatar	avatar-default.png
toolbar-	Toolbar	toolbar-export.png
status-	Status indicator	status-success.png
empty-	Empty state	empty-no-data.png
error-	Error page	error-404.png
qr-	QR code	qr-wechat.png
ds-	Data source icon	ds-mysql.png
brand-	Brand / AI model	brand-deepseek.svg
file-	File type	file-pdf.png
action-	Action button	action-edit.png
arrow-	Arrow direction	arrow-left.png
deco-	Decorative asset	deco-cockpit-box-1.png
ui-	UI component asset	ui-tab.png
illust-	Illustration	illust-api.png
form-	Form control	form-email.png
banner-	Banner	banner-login.png
theme-	Theme switch	theme-dark.svg
img-	Generic (fallback)	img-pay.png

Naming Examples

• bg-header.png
• logo-company.svg
• status-success.png
• empty-no-data.svg
• file-excel.png

4. Icon Specification

1. SVG

Rules

File names use all-lowercase English + hyphen separators; single words require no hyphen.

Use kebab-case naming convention (e.g., kebab-case).

File naming format: [purpose-prefix]-[description/icon-meaning].svg

Supported file extension: .svg

Common Prefixes

Prefix	Meaning	Example
nav-	Navigation / Menu	nav-dashboard.svg
action-	Action / Operation	action-edit.svg
status-	Status indicator	status-success.svg
form-	Form control	form-checkbox.svg
file-	File type	file-pdf.svg
user-	User / Role	user-group.svg
media-	Communication	media-email.svg
biz-	Business function	biz-dict.svg
chart-	Chart / Data	chart-equalizer.svg
system-	System / Config	system-settings.svg
device-	Device / Hardware	device-server.svg
layout-	Layout / View	layout-fullscreen.svg
brand-	Brand / Third-party	brand-github.svg
empty-	Empty state art	empty-data.svg
flag-	Flag / Marker	flag-cn.svg
loading-	Loading / Progress	loading-spin.svg

Naming Examples

• nav-home.svg
• action-delete.svg
• status-error.svg
• user-avatar.svg

iconfont

Rules

File names must start with icon-.

All-lowercase English letters + hyphens.

File naming format: icon-[category]-[icon-name]

Common Categories

Category	Meaning	Example
nav	Navigation / Menu	icon-nav-home
action	Action / Operation	icon-action-edit
status	Status result	icon-status-success
form	Form control	icon-form-calendar
file	File type	icon-file-pdf
user	User / Role	icon-user-group
media	Communication	icon-media-email
biz	Business function	icon-biz-caigou
chart	Chart / Data	icon-chart-bar
brand	Brand / Third-party	icon-brand-alipay
device	Device / Hardware	icon-device-smartphone
layout	Layout / View	icon-layout-fullscreen

Naming Examples

• icon-action-save.css
• icon-status-warning.css

5. Font Specification

Rules

File names retain the font's official name, connected with kebab-case, e.g., pingfang-sc-regular.woff2.

File naming format: [font-family]-[font-weight].[extension]

Naming Examples

• pingfang-sc-regular.woff2
• helvetica-neue-bold.woff
• roboto-medium.woff2
• microsoft-yahei-light.ttf

6. Style Specification

Rules

Use kebab-case naming convention.

Single words require no hyphen.

File naming format:

• Global styles: [purpose/role].[extension]
• Dynamic styles (CSS Modules): [purpose/role].module.[extension]

Supported extensions: .css, .scss, .less

Naming Examples

• global.css
• variables.scss
• mixins.scss
• reset.css
• layout.module.scss
• form.module.css
• button.module.scss
• modal.module.less

7. Common Vocabulary

Vocabulary Reference

Type	Vocabulary
Status	success, error, warning, info, active, disabled, loading
Action	add, edit, delete, save, search, filter, export, import, upload, download, copy, share, refresh, close, back, reset
Direction	left, right, up, down
Scene	login, home, dashboard, detail, list, setting
User	default, admin, group, person
File	pdf, excel, folder, image
Form	email, calendar, checkbox, select
Chart	bar, line, pie, table
Layout	fullscreen, grid, card, sidebar
System	settings, key, server, mobile
Communication	chat, message, bell
Empty State	no-data, no-result
Theme	dark, light
Loading	spin, dots

---

Tip

Follow the standards to move steadily and go farther.